@charset "UTF-8";

/*共通部分
-------------------*/
html{
	font-size: 100%;
}
body{
	font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;
	line-height: 1; /*全体の行間設定*/
	color: #432;
}
a {
	text-decoration: none;
	color:#252525;
}
img{
	max-width: 100%;
}
.text{
	display:inline-block;
}

#pr{
	max-width: 600px;
	background: #00947a;
	/** border-radius: 5px; **/
	margin: 40px auto;
	box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.11);
}
#pr p{
	font-size: 1.3em;
	font-weight: 500;
	line-height:1.8rem;
	padding: 10px 10px 20px;
	text-align:center;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
}
#pr .small{
	font-size: .9rem;
	color: #f2d58a;
}
#pr .small-2{
	font-size: .8rem;
}
#pr .big{
	font-size: 1.5rem;
}
.text-narrow-90 {
    transform: scale(0.9, 1);
	transform-origin: top left;
    width: 111%;
}
.text-narrow-85 {
    transform: scale(0.85, 1);
	transform-origin: top left;
    width: 118%;
}
.text-narrow-80 {
    transform: scale(0.8, 1);
	transform-origin: top left;
    width: 125%;
}
.text-narrow-70 {
    transform: scale(0.7, 1);
	transform-origin: top left;
    width: 143%;
}

.mb100 {
	margin: 0 0 100px 0 ;
}


/*大きな背景画像
-------------------*/
.big-bg{
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment:fixed;
}
#home{
	background-color:#efefef;
}
#home .page-title{
	text-transform: none; /*テキストの大文字小文字全角を変換しない指定*/
}
/*@media only screen and (min-width:641px) {}*/
/*@media screen and (max-width: 640px) {
.big-bg{
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}#home{
	background-color:#f7f6fb;
}
}/*


/*
#home{
	background-image:url(../../../zai/main-bg.jpg);
	min-height: 100vh;
	padding: 0 25px;
}
*/



/*header
-------------------*/
.logo{
	width: 60%;
	margin-top: -100px;
	margin-bottom: -130px;
}
@media screen and (max-width: 640px) {
.logo{
	width: 100%;
	margin-top: -50px;
	margin-bottom: -130px;
}
}
.page-heder{
	display: flex;
	justify-content: space-between;
}
.wrapper{
	max-width: 1100px;
	margin: 0 auto; /*中央に配置する指定*/
	padding: 4%; /*スマホ向け余白の指定*/
}


/*ヘッダーメニュー入れるとき-------------------*/
header {
	z-index: 9999;
	padding: 30px 4% 10px;
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;
	transition: all .5s ease-out;
	height:110px;
}
header.min-header {
	height:80px;
	padding: 10px 4%;
	background-color: #00afcc;
}
header h1 {
	margin: 0;
	padding: 0;
	font-size: 20px;
}
header a {	
	text-decoration: none;
	color: #fff;
}
a {
	text-decoration: none;
	color: #252525;
}
p {
	line-height: 2;
}
nav {
	margin: 0 0 0 auto;
}
ul {
	list-style: none;
	margin: 0;
	display: flex;
}
li {
	margin: 0 0 0 10px;
	font-size: 18px;
}

.sp-nav {
	display: none;
}
.pc-nav li {
	font-size: 1rem;
	line-height: 20px;
	font-weight: 500;
	margin: 0px 1.2em;
	padding: 0px;
	font-family: 'Noto Sans JP', sans-serif;
	color: #fff;

}
.pc-nav ul li{
	float: left;
	border-left: 1px solid #fff;
	padding-left: 13px;
	margin-right: 13px;
	left: -50%;
}

@media screen and (max-width: 640px) {
	/**ハンバーガーメニュー	**/
	.pc-nav {
		display: none;
	}
	.sp-nav {
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		display: block;
		background: rgba(0, 0, 0, .8);
		opacity: 0;
		transform: translateY(-100%);
		transition: all .2s ease-in-out;
	}
	#hamburger {
		position: relative;
		display: block;
		width: 30px;
		height: 25px;
		margin: 0 0 0 auto;
	}
	#hamburger span {
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: 100%;
		height: 2px;
		background-color: #fff;
		transform: translateY(-50%);
	}
	#hamburger::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #fff;
	}
	#hamburger::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 70%;
		height: 2px;
		background-color: #fff;
	}
	/*スマホメニュー	*/
	.sp-nav ul {
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.sp-nav li {
		margin: 0;
		padding: 0;
		line-height: 25px;
		text-align:center;
	}

	/*　閉じる	*/
	.sp-nav li span {
		font-size: 15px;
		color: #fff;
	}

	.sp-nav li a, .sp-nav li span {
		display: block;
		padding: 20px 0;
	}

	/*-閉じるアイコンー	*/
	.sp-nav .close {
		position: relative;
		padding-left: 20px;
	}
	.sp-nav .close::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: 16px;
		height: 1px;
		background: #fff;
		transform: rotate( 45deg );
	}
	.sp-nav .close::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: 16px;
		height: 1px;
		background: #fff;
		transform: rotate( -45deg );
	}
	}
	.toggle {
		transform: translateY( 0 );
		opacity: 1;
	}
	.main-visual {
		padding: 0 4%;
	}
	h2 {
		line-height: 1.6;
		text-align: center;
	}

table {
	max-width: 700px;
	margin: 0 auto;
	color: #aaa;
}

.break {
	margin-bottom:200px;
}
}


/*home
-------------------*/
.home-content{ /*画面中央と余白の指定*/
	text-align: center;
	margin-top: 30%;/*メニュー有りは30% 標準は5%*/
}
	/*タイトル周りのフォント*/
.page-title{
	font-size: 3.5rem;
	font-weight:600;
	line-height:5rem;
	font-family: 'Shippori Mincho B1', serif;
	text-transform: uppercase;
	margin: 10px 0 45px;
	color: #666c67;
	/*text-shadow: 2px 3px 6px #24140e;*/
}
.home-content .page-subtitle{
	font-size:1.8rem;
	line-height:2.2rem;
	margin: 0 0 10px;
	color: #666c67;
	/*text-shadow: 2px 3px 6px #24140e;*/
}
.home-content .small-collar{
	font-size:1.125rem;
	margin: 10px 0 42px;
	color: #ffdc00;
	/*text-shadow: 2px 3px 6px #24140e;*/
}
.home-content .small{
	font-size:1.8rem;
	font-weight:500;
	margin: 10px 0 42px;
	color: #ffdc00;
	/*text-shadow: 2px 3px 6px #24140e;*/
}

.home-content .border{
	border-bottom: .5px dotted;
}

.home-content .nerai{
	width:600px;
	font-size:1rem;
	line-height:2rem;
	font-weight:lighter;
	margin: 10px auto 60px;
	text-align:left;
	color: #666c67;
	/*text-shadow: 2px 3px 6px #24140e;*/
}
h2 img{
	width:750px;
}

@media screen and (max-width: 640px) {
.home-content{ /*画面中央と余白の指定*/
	text-align: center;
	margin-top: 20%;
}
.page-title{
	font-size: 2.3rem;
	line-height:3.3rem;
}
.home-content .page-subtitle{
	font-size:1.5rem;
	line-height:2rem;
}
.home-content .small{
	font-size: 1rem;
}
.home-content .nerai{
	width:90%;
}
h2 img{
	width:100%;
}
}


/*文章_見たい動画をクリックタップ
-------------------*/
.ex {
	width:50%;
	font-size: 1rem;
	line-height:2rem;
	background: #505050;
	padding: 5px 32px;
	margin: 0 auto;
	color: #fff;
}


/*目次
-------------------*/

.area{
	width:100%;
	height:100%;
	padding:30px 0 30px;
	margin:0 0 150px 0;
	background-color:#666c67;
}

#index{
	margin:30px auto;
}
.index{
}
#index a {
	display: block;
	width:40%;
	font-size: 1rem;
	font-weight:400;
	line-height:2rem;
	background: #fff;
	padding: 10px 10px;
	text-align:center;
	margin:30px auto;
	color: #666c67;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transition: all .3s ease-out;
}
#index a:hover  {
	color: #fff;
	background-color: #00afcc;
}

@media screen and (max-width: 640px) {
#index a {
	width:70%;
}
#area{
	height:550px;
}
}


/*ダウンロード方方法
-------------------*/
.explanation{
	font-size:15.5px;
	line-height:27px;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight:400;
	margin:60px auto 60px;
	color:#fff;
	text-align:center;
}
hr {
	width:60%;
	height:10%;
	margin: 30px auto 30px;
	color:#666c67;
}

/*ジャンル
-------------------*/

#genre-1{
	font-size: 1.4rem;
	line-height:2.8rem;
	font-weight:600;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	/*background: #252525;*/
	letter-spacing:3px;
	margin:150px auto 25px;
	text-align:center;
	color: #00afcc;
}
#genre-1 p{
	font-size: 1.3rem;
	line-height:2.3rem;
	font-weight:500;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	/*background: #252525;*/
	color: #252525;
}

#genre-2{
	font-size: 1.3rem;
	line-height:2.3rem;
	font-weight:600;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	/*background: #252525;*/
	letter-spacing:3px;
	margin:150px auto 30px;
	text-align:center;
	color: #00afcc;
}

#genre-3{
	font-size: 1.3rem;
	line-height:2.3rem;
	font-weight:600;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	/*background: #252525;*/
	letter-spacing:3px;
	margin:150px auto 30px;
	text-align:center;
	color: #00afcc;
}

#genre-4{
	font-size: 1.3rem;
	line-height:2.3rem;
	font-weight:600;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	/*background: #252525;*/
	letter-spacing:3px;
	margin:150px auto 30px;
	text-align:center;
	color: #00afcc;
}

#genre-5{
	font-size: 1.3rem;
	line-height:2.3rem;
	font-weight:600;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	/*background: #252525;*/
	letter-spacing:3px;
	margin:150px auto 30px;
	text-align:center;
	color: #00afcc;
}

#genre-ex{
	font-size: 1.3rem;
	line-height:2.3rem;
	font-weight:600;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	/*background: #252525;*/
	letter-spacing:3px;
	margin:150px auto 30px;
	text-align:center;
	color: #00afcc;
}

.line{
	width:210px;
	position:relative;
	bottom:30px;
	border-radius:5px;
	border:2px solid #00afcc;
	opacity: 0;
	margin:0 auto 30px;
	transform: translate(80px, 0);
	transition: all .8s ease-out;
}

@media screen and (max-width: 640px) {
.line{
	border:2px solid #00afcc;
	transform: translate(30px, 0);
	transition: all .8s ease-out;
}
}

/*Flexbox
-------------------*/
.container{
	max-width:1000px;
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(310px,1fr));
	gap: 20px;
	margin:0 auto 150px;
}
.item{
	display: grid;
	background: #fff;
	color: #393e4f;
	/* border-radius: 10px;*/
	text-align:center;
	/*place-items: center;*/
	/* box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.15);*/
    width: 270px;
	height: 190px;
	margin:20px auto ;
	/*padding: 15px 15px;*/
	opacity: 0;
	transform: translate(0, 80px);
	transition: all .5s ease-out;
	}
@media screen and (max-width: 640px) {
.container{
	grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
	gap: 10px;
	margin:8px 8px 100px 8px;
}
.item{
    width: 170px;
	height: 135px;
	/*padding: 15px 10px;*/
	transform: translate(0, 10px);
	transition: all 1s ease-out;
}
}
/*--
.item{
	background: #0bd;
	color: #fff;
	margin: ;
	padding: 10px;

--*/
	
.item .title{
	font-size:1rem;
	line-height:1.4rem;
	font-weight:500;
	margin: 0 0 5px 0; 
	padding: 0 10px;
	font-family: 'Noto Sans JP', sans-serif;
}
.item .title-90 {
	font-size:1rem;
	line-height:1.4rem;
	font-weight:500;
	margin: 0 0 5px -10px; 
	padding: 0 10px;
	font-family: 'Noto Sans JP', sans-serif;
    transform: scale(0.9, 1);
    width: 110%;
}
.item .title-80 {
	font-size:1rem;
	line-height:1.4rem;
	font-weight:500;
	margin: 0 0 5px -20px; 
	padding: 0 10px;
	font-family: 'Noto Sans JP', sans-serif;
    transform: scale(0.8, 1);
    width: 120%;
}
.item .title-70 {
	font-size:1rem;
	line-height:1.4rem;
	font-weight:500;
	margin: 0 0 5px -30px; 
	padding: 0 10px;
	font-family: 'Noto Sans JP', sans-serif;
    transform: scale(0.7, 1);
    width: 130%;
}
.item .subtitle{
	font-size:.8rem;
	line-height:1.2rem;
	padding: 0 10px;
	font-weight:400;
}
.item .subtitle-90 {
	font-size:.8rem;
	line-height:1.2rem;
	font-weight:400;
	padding: 0 10px;
	margin-left:-10px;
    transform: scale(0.9, 1);
    width: 110%;
}
.item .subtitle-80 {
	font-size:.8rem;
	line-height:1.2rem;
	padding: 0 10px;
	font-weight:400;
	margin-left:-20px;
    transform: scale(0.8, 1);
    width: 120%;
}
.item .subtitle-70 {
	font-size:.8rem;
	line-height:1.2rem;
	font-weight:400;
	padding: 0 10px;
	margin-left:-30px;
	padding: 0 10px;
    transform: scale(0.7, 1);
    width: 110%;
}

.item .koushi{
	position:relative;
	font-size:.9rem;
	line-height:1.4rem;
	font-weight:500;
	left:15px;
	margin: 0 0 15px 0; 
	padding: 0 10px;
	font-family: 'Noto Sans JP', sans-serif;
}
.item .koushi-2{
	position:relative;
	font-size:1rem;
	line-height:1.4rem;
	font-weight:500;
	left:5px;
	margin: 0 0 15px 0; 
	padding: 0 10px;
	font-family: 'Noto Sans JP', sans-serif;
}

.item img{
	width:100%;
	margin:0 0 5px 0;
}
.item .time{
	position:relative;
	font-size:.8rem;
	line-height:1.2rem;
	color:#e95388;
	bottom:1px;
}


.item .new{
	position:absolute;
	width:50px;
	height:50px;
	border-radius:25px;
	top:-25px;
	left:-15px;
	padding: 14px 0 0 0;
	letter-spacing:2px;
	background-color:#ffdc00;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
}

.item .new p{
	font-size:.7rem;
	font-weight:600;
	transform: scale(0.8,1);
	color:#ed6d35;
	letter-spacing:2px;
	transform:rotate(-20deg);
	font-family: 'Noto Sans JP', sans-serif;
}

.item .new_2l{
	position:absolute;
	width:50px;
	height:50px;
	border-radius:25px;
	top:-25px;
	left:-15px;
	padding: 10px .5px 0 0;
	letter-spacing:2px;
	background-color:#ffdc00;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
}

.item .new_2l p{
	font-size:.65rem;
	font-weight:600;
	transform: scale(0.8,1);
	color:#ed6d35;
	letter-spacing:2px;
	line-height:.85rem;
	transform:rotate(-20deg);
	font-family: 'Noto Sans JP', sans-serif;
}

.item .new_2l .sub{
	font-size:.6rem;
	font-weight:500;
	letter-spacing:.5px;genre-1
	color:#ed6d35;
	font-family: 'Noto Sans JP', sans-serif;
}
.item .sample{
	position:absolute;
	width:65px;
	height:65px;
	border-radius:40px;
	top:-35px;
	left:-15px;
	padding: 18px .5px 0 0;
	letter-spacing:2px;
	background-color:#ea5550;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
}

.item .sample p{
	font-size:.8rem;
	font-weight:600;
	transform: scale(0.8,1);
	color:#fff;
	letter-spacing:0;
	line-height:0.9rem;
	transform:rotate(-20deg);
	font-family: 'Noto Sans JP', sans-serif;
}

.item .sample .sub{
	font-size:.6rem;
	font-weight:500;
	letter-spacing:.5px;
	color:#ed6d35;
	font-family: 'Noto Sans JP', sans-serif;
}

/*.item .new{
	position:absolute;
	width:50px;
	height:50px;
	border-radius:25px;
	font-size:.8rem;
	font-weight:600;
	top:-25px;
	left:-15px;
	padding: 13px 0 0 0;
	transform: scale(0.8,1);
	letter-spacing:2px;
	color:#ed6d35;
	background-color:#ffdc00;
	transform:rotate(-20deg);
	font-family: 'Noto Sans JP', sans-serif;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
}*/

@media screen and (max-width: 640px) {
.item .title{
	font-size:.8rem;
	line-height:1rem;
	padding: 0 5px;
}
.item .title-90 {
	font-size:.8rem;
	line-height:1rem;
	padding: 0 5px;
}
.item .title-80 {
	font-size:.8rem;
	line-height:1rem;
	padding: 0 5px;
}
.item .title-70 {
	font-size:.8rem;
	line-height:1rem;
	padding: 0 5px;
}
.item .subtitle{
	font-size:.7rem;
	line-height:.9rem;
	padding: 0 5px;
}
.item .subtitle-90 {
	font-size:.7rem;
	line-height:.9rem;
	padding: 0 5px;
}
.item .subtitle-80 {
	font-size:.7rem;
	line-height:.9rem;
	padding: 0 5px;
}
.item .subtitle-70 {
	font-size:.7rem;
	line-height:.9rem;
	padding: 0 5px;
}
.item .koushi{
	font-size:.8rem;
	line-height:1rem;
	left:5px;
	padding: 0 5px;
}
.item img{
	width:100%;
	padding:0 0 5px;
}
.item .time{
	font-size:.7rem;
	line-height:.9rem;
}

.item .new{
	position:absolute;
	width:32px;
	height:32px;
	border-radius:16px;
	top:-15px;
	left:-8px;
	padding: 6.5px 0 0 0;
	letter-spacing:.6px;
}

.item .new p{
	font-size:.6rem;
	font-weight:600;
	letter-spacing:.6px;
}


.item .new{
	position:absolute;
	width:36px;
	height:36px;
	border-radius:18px;
	top:-15px;
	left:-8px;
	padding: 9px 0 0 0;
	letter-spacing:.6px;
}

.item .new p{
	font-size:.6rem;
	font-weight:600;
	letter-spacing:.6px;
}

.item .new_2l{
	position:absolute;
	width:36px;
	height:36px;
	border-radius:18px;
	top:-15px;
	left:-8px;
	padding: 8px .5px 0 0;
	letter-spacing:.6px;
}

.item .new_2l p{
	font-size:.6rem;
	font-weight:600;
	letter-spacing:.6px;
	line-height:.6rem;
}

.item .new_2l .sub{
	font-size:.5rem;
	font-weight:500;
	letter-spacing:0px;
}


/*
.item .new{
	position:absolute;
	width:32px;
	height:32px;
	border-radius:16px;
	font-size:.6rem;
	font-weight:600;
	top:-15px;
	left:-8px;
	padding: 6.5px 0 0 0;
	letter-spacing:.6px;
}
*/

}


.back{
	margin:100px auto 100px;
}
.back p a {
	display: block;
	width:20%;
	font-size: 1rem;
	line-height:2rem;
	background: #666c67;
	text-align:center;
	padding: 10px 10px;
	margin:30px auto;
	color: #fff;
	border-radius:10px;
	transition: all .3s ease-out;
}
.back p a:hover  {
	color: #505050;
	background-color: #fff;
}

@media screen and (max-width: 640px) {
.back{
	margin:30px auto 100px;
}
.back p a {
	font-size: .7rem;
	width:40%;
}
}


/*
ページトップに戻る
********************/
#footer_button{
	width:400px;
	margin:0 auto;
	text-align:center;
	margin-top:0px;
	margin-bottom:60px;
	margin-top:60px;
}
#footer_button a{
	font-size:25px;
	text-align:center;
	color:#414548;
	width:400px;
	height:60px;
	line-height:60px;
	border:1px solid #414548;
	border-radius:10px;
	display:block;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
}
#footer_button a:hover{
	color:white;
	background-color:#414548;
	transition: 0.5s;
}


/*
注意文
********************/
.attention{
	width:100%;
	height:50%;
	position:relative;
	margin:20px 0;
	padding: 4%; /*スマホ向け余白の指定*/
}

.attention p{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: .7rem;
	line-height:1.5rem;
	font-weight: 300;
	text-align: center;
	color:#504946;
}

/*
コピーライト
********************/
#copywriter{
	width:100%;
	margin:0 auto;
	height:20px;
}
#copywriter2{
	width:60%;
	float:left;
	padding-left:2%;
	font-size:15px;
	font-weight:300;
	line-height:20px;
	margin:0 0 30px;
}
#copywriter1{
	width:35%;
	float:left;
	text-align:right;
	position:relative;
	top:6px;
}
@media screen and (max-width: 640px) {
#copywriter2{
	font-size:10px;
}
}


/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all .5s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 80px);
	transition: all 1.5s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-250px, 0);
	transition: all 0.8s ease-out;
 }

/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(15px, 0);
	transition: all 0.5s ease-out;
 }