@charset "UTF-8";
/*--------------------------------------------
FLEX BOX
---------------------------------------------*/
.flex{
	display : flex;
	height : 100%;
}
.flex.flex-wrap{
	flex-wrap : wrap;
}
.flex-center{
	justify-content : center;
	align-items : center;
	text-align : center;
}
/*--------------------------------------------
MV
---------------------------------------------*/
.component.mv{
	color : #fff;
	background-position : center;
	background-repeat : no-repeat;
	background-size : cover;
}
.component.mv .wrap{
	padding-top : 0;
	padding-bottom : 0;
}
.component.mv .title-mv{
	font-weight : 500;
	letter-spacing : .1em;
	line-height : 1.2;
}
@media screen and (max-width: 768px){
	.component.mv{
		background-image : url("../images/components/mv/bg_sp.png");
	}
	.component.mv .wrap{
		height : calc( 719 * 100vw / 768 );
	}
	.component.mv .title-mv{
		font-size : calc( 40 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.component.mv{
		background-image : url("../images/components/mv/bg_pc.png");
	}
	.component.mv .wrap{
		height : 584px;
	}
	.component.mv .title-mv{
		font-size : 40px;
	}
}
/*--------------------------------------------
CONTENT HEADER
---------------------------------------------*/
.component.content-header{
	background-color : var(--titleBg);
}
.component.content-header .wrap{
	padding-top : 0;
	padding-bottom : 0;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
}
.component.content-header .title-header{
	letter-spacing : .1em;
	color : var(--titleColor);
	line-height : 1.2;
}
@media screen and (max-width: 768px){
	.component.content-header .wrap{
		height : calc( 120 * 100vw / 768 );
	}
	.component.content-header .title-header{
		font-size : calc( 40 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.component.content-header .wrap{
		height : 120px;
	}
	.component.content-header .title-header{
		font-size : 30px;
	}
}
/*--------------------------------------------
SUB MENU
---------------------------------------------*/
.component.submenu .list{
	display : flex;
	justify-content : center;
	flex-wrap : wrap;
}
.component.submenu a{
	padding-left : 1em;
	padding-right : 1em;
}
@media screen and (max-width: 768px){
	.component.submenu .wrap{
		padding-top : calc( ( 31 - 2 ) * 100vw / 768 );
		padding-bottom : 0;
		margin-top : calc( -20 * 100vw / 768 );
	}
	.component.submenu li{
		margin-top : calc( 20 * 100vw / 768 );
	}
	.component.submenu a{
		font-size : calc( 26 * 100vw / 768 );
		line-height : 1.15;
	}
}
@media print,screen and (min-width: 769px){
	.component.submenu .wrap{
		padding-top : calc( 42px - 1.5px );
		padding-bottom : calc( 50px - 1.5px );
	}
	.component.submenu a{
		font-size : 18px;
		line-height : 21px;
	}
}
.component.submenu02 .list{
	display : flex;
	justify-content : center;
	flex-wrap : wrap;
}
.component.submenu02 a{
	padding-left : 1em;
	padding-right : 1em;
}
@media screen and (max-width: 768px){
	.component.submenu02 .wrap{
		padding-top : calc( ( 31 - 2 ) * 100vw / 768 );
		padding-bottom : calc( ( 31 - 2 ) * 100vw / 768 );
		margin-top : calc( -20 * 100vw / 768 );
	}
	.component.submenu02 li{
		margin-top : calc( 20 * 100vw / 768 );
	}
	.component.submenu02 a{
		font-size : calc( 26 * 100vw / 768 );
		line-height : 1.15;
	}
}
@media print,screen and (min-width: 769px){
	.component.submenu02 .wrap{
		padding-top : calc( 27px - 1.5px );
		padding-bottom : calc( 34px - 1.5px );
	}
	.component.submenu02 li{
		display : flex;
		align-items : center;
	}
	.component.submenu02 li + li:before{
		content : "|";
		font-size : 18px;
		font-weight : 400;
	}
	.component.submenu02 a{
		font-size : 18px;
		line-height : 21px;
	}
}
/*--------------------------------------------
TIPICS
---------------------------------------------*/
.component.topics a{
	color : #221815;
}
.component.topics .topics > li{
	border-bottom : dashed;
	border-bottom-color : #ccc;
}
.component.topics .box{
	display : flex;
	align-items : flex-start;
}
.component.topics time{
	display : block;
	flex-shrink : 0;
	letter-spacing : .1em;
}
.component.topics .categories{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	color : #fff;
	flex-shrink : 0;
}
@media screen and (max-width: 768px){
	.component.topics .topics{
		margin-top : calc( 40 * 100vw / 768 );
	}
	.component.topics li{
		border-bottom-width : calc( 2 * 100vw / 768 );
		padding-bottom : calc( ( 21 - 6.5 ) * 100vw / 768 );
	}
	.component.topics li + li{
		margin-top : calc( 21 * 100vw / 768 );
	}
	.component.topics .box{
		align-items : center;
	}
	.component.topics time{
		font-size : calc( 26 * 100vw / 768 );
		width : calc( 192 * 100% / 720 );
	}
	.component.topics .categories{
		width : calc( 169 * 100% / 720 );
		height : calc( 43 * 100vw / 768 );
		font-size : calc( 26 * 100vw / 768 );
	}
	.component.topics .title-topics{
		margin-top : calc( ( 20 - 6.5 ) * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.component.topics .topics{
		margin-top : 34px;
		padding-left : 121px;
		padding-right : 121px;
	}
	.component.topics .topics > li{
		border-bottom-width : 2px;
	}
	.component.topics .topics > li > a{
		display : flex;
		align-items : flex-start;
		padding-bottom : 19px;
	}
	.component.topics .topics > li:not(:first-child){
		padding-top : 18px;
	}
	.component.topics .box{
		flex-shrink : 0;
	}
	.component.topics time{
		font-size : 16px;
		margin-top : 6px;
		padding-left : 6px;
		width : 114px;
	}
	.component.topics .categories{
		width : 121px;
		height : 34px;
		font-size : 16px;
	}
	.component.topics .title-topics{
		margin-left : 19px;
		padding-right : 19px;
		margin-top : calc( 8px - 4px );
	}
}
/*--------------------------------------------
ARTICLE
---------------------------------------------*/
@media screen and (max-width: 768px){
	.component.article .article-between + .article-center{
		margin-top : calc( 60 * 100vw / 768 );
	}
	.component.article .article-between + .article-center .img{
		margin-right : calc(50% - 50vw);
		margin-left : calc(50% - 50vw);
	}
	.component.article .article-between + .article-center .img img{
		max-width : 100vw;
		width : 100vw;
	}
}
@media print,screen and (min-width: 769px){
	.component.article .article-between + .article-center{
		margin-top : 104px;
	}
}
.article-between .title-article{
	margin-top : -.1em;
    position: relative;
}
    .article-between .title-article::after{
        content: "";
        display: block;
        width: 150px;
        height: 2px;
        background: #2179c7;
        position: absolute;
        bottom: -10px;
        left: 0px;
    }
	.article-between .ul-text{
	}
        .article-between .ul-text li{
            list-style: disc !important;
            line-height: 1.8;
            margin: 0px;
            padding: 0px;
            margin-left: 1.5em;
        }
@media screen and (max-width: 768px){
	.article-between{
		margin-top : calc( 21 * 100vw / 768 );
	}
	.article-between li + li{
		margin-top : calc( ( 116 - 6.5 ) * 100vw / 768 );
	}
	.article-between .img{
		width : 100%;
	}
	.article-between .title-article{
		margin-top : calc( ( 30 - 3.4 ) * 100vw / 768 );;
	}
	.article-between .text , .article-between .ul-text{
		margin-top : 1em;
	}
}
@media print,screen and (min-width: 769px){
	.article-between{
		margin-top : 44px;
	}
	.article-between li.article-li{
		display : flex;
		align-items : flex-start;
	}
	.article-between li.article-li.reverse{
		flex-direction : row-reverse;
	}
	.article-between .img{
		flex-shrink : 0;
		width : 520px;
	}
	.article-between li.article-li + li.article-li{
		margin-top : 80px;
	}
	.article-between li.article-li > div{
		flex-grow : 1;
		width : 100%;
	}
	.article-between li.article-li > div{
		margin-left : 20px;
	}
	.article-between li.article-li.reverse > .img{
		margin-left : 20px;
	}
	.article-between .text , .article-between .ul-text{
		margin-top : 1em;
	}
}
@media screen and (max-width: 768px){
	.article-center{
		margin-top : calc( 21 * 100vw / 768 );
	}
	.article-center .img{
		width : 100%;
	}
	.article-center .title-article{
		margin-top : calc( ( 28 - 3.4 ) * 100vw / 768 );
	}
	.article-center .text{
		margin-top : 1em;
	}
}
@media print,screen and (min-width: 769px){
	.article-center{
		margin-top : 36px;
	}
	.article-center .img{
		width : 100%;
	}
	.article-center .img img{
		max-width : 100%;
	}
	.article-center .wrap-center{
		padding-left : 62px;
		padding-right : 62px;
	}
	.article-center .title-article{
		margin-top : calc( 42px - 2.4px );
	}
	.article-center .text{
		margin-top : 1em;
	}
}
.article-list{
	display : flex;
	flex-wrap : wrap;
}
.article-list .img{
	width : 100%;
}
@media screen and (max-width: 768px){
	.article-list{
		margin-top : calc( 30 * 100vw / 768 );
	}
	.article-list.sp2 li{
		width : calc( 347 * 100% / 720 );
	}
	.article-list.sp2 li:nth-child(even){
		margin-left : auto;
	}
	.article-list.sp2 li:nth-child( n + 3){
		margin-top : calc( ( 75 - 6.5 ) * 100vw / 768 );
	}
	.article-list.sp3 li:not(:nth-child(3n+1)){
		margin-left : auto;
	}
	.article-list.sp4 li{
		width : 250px;
	}
	.article-list.sp4 li:not(:nth-child(4n+1)){
		margin-left : auto;
	}
	.article-list.sp5 li:not(:nth-child(5n+1)){
		margin-left : auto;
	}
	.article-list.sp6 li:not(:nth-child(6n+1)){
		margin-left : auto;
	}
	.article-list .title-article02{
		margin-top : calc( ( 30 - 2.6 ) * 100vw / 768 );
	}
	.article-list .text{
		margin-top : 1em;
	}
}
@media print,screen and (min-width: 769px){
	.article-list{
		margin-top : 40px;
	}
	.article-list.pc2 li:nth-child(even){
		margin-left : auto;
	}
	.article-list.pc3 li:not(:nth-child(3n+1)){
		margin-left : auto;
	}
	.article-list.pc4 li{
		width : 250px;
	}
	.article-list.pc4 li:not(:nth-child(4n+1)){
		margin-left : auto;
	}
	.article-list.pc5 li:not(:nth-child(5n+1)){
		margin-left : auto;
	}
	.article-list.pc6 li:not(:nth-child(6n+1)){
		margin-left : auto;
	}
	.article-list .title-article02{
		margin-top : calc( 15px - 2px );
	}
	.article-list .text{
		margin-top : 1em;
	}
}
@media screen and (max-width: 768px){
	.article-introduction{
		margin-top : calc( 42 * 100vw / 768 );
	}
	.article-introduction .img{
		text-align : center;
	}
	.article-introduction .img img{
		max-width : 100%;
		width : auto;
	}
	.article-introduction .title-article03{
		margin-top : calc( ( 23 - 5 ) * 100vw / 768 );;
	}
	.article-introduction .text{
		margin-top : 1em;
	}
}
@media print,screen and (min-width: 769px){
	.article-introduction{
		display : flex;
		align-items : flex-start;
		margin-top : 58px;
	}
	.article-introduction .img{
		flex-shrink : 0;
		width : 308px;
	}
	.article-introduction > div{
		width : 100%;
		flex-grow : 1;
		margin-left : 32px;
	}
	.article-introduction .text{
		margin-top : 1em;
	}
}
@media screen and (max-width: 768px){
	.article-datalist{
		margin-top : calc( 58 * 100vw / 768 );
	}
	.article-datalist > div + div{
		margin-top : calc( ( 20 - 6.5 ) * 100vw / 768 );
	}
	.article-datalist dd{
		padding-left : 1.5em;
		margin-top : calc( ( 20 - 6.5 ) * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.article-datalist{
		margin-top : 48px;
	}
	.article-datalist > div{
		display : flex;
		align-items : flex-start;
	}
	.article-datalist > div + div{
		margin-top : 1em;
	}
	.article-datalist dt{
		text-align : right;
		flex-shrink : 0;
		width : 250px;
	}
	.article-datalist dt + dd{
		width : 100%;
		flex-grow : 1;
	}
	.article-datalist dd{
		padding-left : 1em;
	}
}
.aritcles li{
	border-style : solid;
	border-color : #d9d9d9;
}
.aritcles li > a{
	display : block;
}
@media screen and (max-width: 768px){
	.aritcles{
		margin-top : calc( 52 * 100vw / 768 );
	}
	.aritcles li{
		border-width : calc( 3 * 100vw / 768 );
		margin-bottom: calc( 20 * 100vw / 768 ); 
	}
	.aritcles li > div , .aritcles li > a{
		padding-top : calc( 28 * 100vw / 768 );
		padding-bottom : calc( 31.5 * 100vw / 768 );
		padding-left : calc( 35 * 100vw / 768 );
		padding-right : calc( 35 * 100vw / 768 );
	}
	.aritcles .img{
		text-align : center;
	}
	.aritcles .img img{
		width : auto;
		max-width : 100%;
	}
	.aritcles .title-article{
		margin-top : .5em;
	}
	.aritcles .text{
		margin-top : 1em;
	}
}
@media print,screen and (min-width: 769px){
	.aritcles{
		margin-top : 44px;
	}
	.aritcles li{
		border-width : 1px;
		margin-bottom: 20px !important;
	}
	.aritcles li > div , .aritcles li > a{
		display : flex;
		align-items : flex-start;
		padding : 10px;
	}
	.aritcles .img{
		flex-shrink : 0;
		width : 280px;
	}
	.aritcles li > div > div , .aritcles li > a > div{
		width : 100%;
		flex-grow : 1;
		margin-left : 30px;
	}
	.aritcles .title-article{
		margin-top : .5em;
	}
	.aritcles .text{
		margin-top : 1em;
	}
}
/*--------------------------------------------
SINGLE
---------------------------------------------*/
@media screen and (max-width: 768px){
	.component.single .single-mv{
		margin-top : calc( 44 * 100vw / 768 );
		margin-right : calc(50% - 50vw);
		margin-left : calc(50% - 50vw);
	}
	.component.single .single-mv img{
		max-width : 100vw;
		width : 100vw;
	}
	.component.single .title-article{
		margin-top : 1em;
	}
	.component.single .text{
		margin-top : 1em;
	}
}
@media print,screen and (min-width: 769px){
	.component.single .single-mv{
		width : 100%;
		margin-top : 52px;
	}
	.component.single .title-article{
		margin-top : 1em;
	}
	.component.single .text{
		margin-top : 1em;
	}
}
/*--------------------------------------------
TEST
---------------------------------------------*/
.component.test dt{
	font-weight : 500;
}
.component.test .answer .checkbox label{
	position : relative;
	cursor : pointer;
	display : flex;
	align-items : center;
}
.component.test .answer .checkbox label:before{
	content : "";
	display : block;
}
.component.test .answer .checkbox input[type="checkbox"]{
	display : none;
}
.component.test .answer .checkbox input[type="checkbox"]:checked ~ label:before{
	content : "\2713";
}
.component.test .answer .checkbox label{
	letter-spacing : .1em;
}
.component.test .answer .checkbox label:before{
	background-color : #ccc;
	color : #fe3705;
}
.component.test .answer textarea{
	width : 100%;
	background-color : #e6e5e5;
	padding : .5em 1em;
	border : 0;
}
.component.test input[type="submit"]{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	margin-left : auto;
	margin-right : auto;
	background-color : #ffcb1f;
	color : #222;
	font-weight : 500;
}
.component.test .answer .radio li input{
	display : none;
}
.component.test .answer .radio li label::before{
	content : "";
	display : block;
	top : 0;
	left : 0;
	border-radius : 50%;
}
.component.test .answer .radio li label{
	display : flex;
	align-items : center;
	cursor : pointer;
	position : relative;
}
.component.test .answer .radio li input:checked + label:after{
	content : "";
	display : block;
	position : absolute;
	border-radius : 50%;
}
.component.test .answer .radio label{
	letter-spacing : .1em;
}
.component.test .answer .radio label:before{
	background-color : #ccc;
}
.component.test .answer .radio label:after{
	background-color : #f30;
}
@media screen and (max-width: 768px){
	.component.test .test-mv{
		margin-top : calc( 45 * 100vw / 768 );
		margin-right : calc(50% - 50vw);
		margin-left : calc(50% - 50vw);
	}
	.component.test .test-mv img{
		max-width : 100vw;
		width : 100vw;
	}
	.component.test .lede{
		margin-top : 1em;
	}
	.component.test .tests{
		margin-top : calc( 50 * 100vw / 768 );
	}
	.component.test .tests > div + div{
		margin-top : calc( 118 * 100vw / 768 );
	}
	.component.test dt{
		text-align : center;
		font-size : calc( 40 * 100vw / 768 );
	}
	.component.test dt + dd{
		margin-top : calc( ( 27 - 6.5 ) * 100vw / 768 );
	}
	.component.test .tests .img{
		margin-top : calc( ( 32 - 6.5 ) * 100vw / 768 );
	}
	.component.test .tests .img img{
		width : 100%;
		height : auto;
	}
	.component.test .answer{
		margin-top : calc( 32 * 100vw / 768 );
	}
	.component.test .answer .checkbox li + li{
		margin-top : calc( 28 * 100vw / 768 );
	}
	.component.test .answer .checkbox label{
		font-size : calc( 26 * 100vw / 768 );
	}
	.component.test .answer .checkbox label:before{
		width : calc( 24 * 100vw / 768 );
		height : calc( 24 * 100vw / 768 );
		font-size : calc( 24 * 100vw / 768 );
		margin-right : .5em;
	}
	.component.test .answer textarea{
		height : calc( 254 * 100vw / 768 );
	}
	.component.test input[type="submit"]{
		margin-top : calc( 84 * 100vw / 768 );
		width : calc( 450 * 100% / 720 );
		height : calc( 80 * 100vw / 768 );
		font-size : calc( 30 * 100vw / 768 );
	}
	.component.test .answer .radio{
		padding-left : calc( 14 * 100% / 720 );
	}
	.component.test .answer .radio li + li{
		margin-top : calc( 14 * 100vw / 768 );
	}
	.component.test .answer .radio label{
		font-size : calc( 26 * 100vw / 768 );
	}
	.component.test .answer .radio label:before{
		width : calc( 22 * 100vw / 768 );
		height : calc( 22 * 100vw / 768 );
		margin-right : calc( 8 * 100vw / 768 );
	}
	.component.test .answer .radio label:after{
		width : calc( 10 * 100vw / 768 );
		height : calc( 10 * 100vw / 768 );
		top : calc( 8 * 100vw / 768 );
		left : calc( 6 * 100vw / 768 );
	}	
}
@media print,screen and (min-width: 769px){
	.component.test .test-mv{
		margin-top : 40px;
		width : 100%;
	}
	.component.test .test-mv img{
		max-width : inherit;
	}
	.component.test .lede{
		margin-top : 1em;
	}
	.component.test .tests{
		margin-top : 48px;
	}
	.component.test .tests > div{
		display : flex;
		align-items : flex-start;
	}
	.component.test .tests > div + div{
		margin-top : 38px;
	}
	.component.test .tests dt{
		flex-shrink : 0;
		width : 64px;
		font-size : 24px;
	}
	.component.test .tests .text{
		margin-top : -4px;
	}
	.component.test .img{
		margin-top : 10px;
	}
	.component.test .answer{
		margin-top : 16px;
	}
	.component.test .answer .checkbox li + li{
		margin-top : 16px;
	}
	.component.test .answer .checkbox label{
		font-size : 16px;
	}
	.component.test .answer .checkbox label:before{
		width : 14px;
		height : 14px;
		font-size : 14px;
		margin-right : 1em;
	}
	.component.test .answer textarea{
		height : 105px;
	}
	.component.test input[type="submit"]{
		margin-top : 67px;
		font-size : 18px;
		width : 300px;
		height : 60px;
	}
	.component.test .answer .radio{
	}
	.component.test .answer .radio li + li{
		margin-top : 16px;
	}
	.component.test .answer .radio li{
		margin-left : 30px;
	}
	.component.test .answer .radio label{
		font-size : 16px;
	}
	.component.test .answer .radio label:before{
		width : 16px;
		height : 16px;
		margin-right : 10px;
	}
	.component.test .answer .radio label:after{
		width : 6px;
		height : 6px;
		top : 5px;
		left : 5px;
	}
}
/*--------------------------------------------
LOGIN
---------------------------------------------*/
.component.login{
	background-color : #efefef;
}
.component.login .login-box{
	background-color : #fff;
}
.component.login .lede{
	text-align : center;
	color : #111;
}
.component.login input[type="password"] , .component.login input[type="email"]{
	background-color : #e6e5e5;
	padding-left : .5em;
	border : 0;
}
.component.login .checkbox label{
	position : relative;
	cursor : pointer;
	display : flex;
	align-items : center;
}
.component.login .checkbox label:before{
	content : "";
	display : block;
}
.component.login .checkbox input[type="checkbox"]{
	display : none;
}
.component.login .checkbox input[type="checkbox"]:checked ~ label:before{
	content : "\2713";
}
.component.login .checkbox label:before{
	background-color : #ddd;
	color : #fe3705;
}
.component.login input[type="submit"]{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	font-weight : 500;
	background-color : #ffcb1f;
}
.component.login a{
	border-bottom : solid 1px #333;
	display : inline-block;
}
@media screen and (max-width: 768px){
	.component.login .wrap{
		padding-top : calc( 60 * 100vw / 768 );
		padding-bottom : calc( 55 * 100vw / 768 );
	}
	.component.login .login-box{
		margin-top : calc( 44 * 100vw / 768 );
		padding-top : calc( ( 27 - 6.5 ) * 100vw / 768 );
		padding-bottom : calc( 53 * 100vw / 768 );
		padding-left : calc( 40 * 100% / 720 );
		padding-right : calc( 40 * 100% / 720 );
	}
	.component.login .lede{
		font-size : calc( 26 * 100vw / 768 );
		line-height : 1.5;
	}
	.component.login form{
		margin-top : calc( 36 * 100vw / 768 );
	}
	.component.login form > label{
		display : block;
	}
	.component.login form > label + label{
		margin-top : calc( 32 * 100vw / 768 );
	}
	.component.login form > label span{
		display : block;
		font-size : calc( 26 * 100vw / 768 );
		letter-spacing : .1em;
	}
	.component.login form input[type="password"] , .component.login form input[type="email"]{
		margin-top : calc( 20 * 100vw / 768 );
		width : 100%;
		height : calc( 60 * 100vw / 768 );
	}
	.component.login form .checkbox{
		margin-top : calc( 32 * 100vw / 768 );
	}
	.component.login form .checkbox label{
		justify-content : center;
		font-size : calc( 26 * 100vw / 768 );
	}
	.component.login form .checkbox label:before{
		width : calc( 24 * 100vw / 768 );
		height : calc( 24 * 100vw / 768 );
		font-size : calc( 24 * 100vw / 768 );
		margin-right : calc( 10 * 100vw / 768 );
	}
	.component.login form input[type="submit"]{
		width : calc( 450 * 100vw / 768 );
		height : calc( 80 * 100vw / 768 );
		font-size : calc( 30 * 100vw / 768 );
		margin-top : calc( 54 * 100vw / 768 );
		margin-left : auto;
		margin-right : auto;
	}
	.component.login a{
		display : table;
		margin-left : auto;
		margin-right : auto;
		text-align : center;
		font-size : calc( 26 * 100vw / 768 );
		padding-bottom : calc( 24 * 100vw / 768 );
		margin-top : calc( 37 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.component.login .login-box{
		margin-top : 36px;
		width : 928px;
		margin-left : auto;
		margin-right : auto;
		padding-top : calc( 45px - 4px );
		padding-bottom : 68px;
		padding-left : 76px;
		padding-right : 76px;
	}
	.component.login .lede{
		font-size : 16px;
		line-height : 24px;
	}
	.component.login form{
		width : 446px;
		margin-left : auto;
		margin-right : auto;
		margin-top : calc( 52px - 4px );
		display : -ms-grid;
		display :     grid;
		-ms-grid-columns : 136px 310px;
		grid-template-columns : 136px 310px;
		-ms-grid-rows : 44px 53px 40px 52px;
		grid-template-rows : 44px 53px 40px 52px;
	}
	.component.login form > label:nth-of-type(1){
		-ms-grid-row : 1;
		-ms-grid-row-span : 1;
		    grid-row : 1/2;
		-ms-grid-column : 1;
		-ms-grid-column-span : 2;
		    grid-column : 1/3;
	}
	.component.login form > label:nth-of-type(2){
		-ms-grid-row : 2;
		-ms-grid-row-span : 1;
		    grid-row : 2/3;
		-ms-grid-column : 1;
		-ms-grid-column-span : 2;
		    grid-column : 1/3;
	}
	.component.login form .checkbox{
		-ms-grid-row : 3;
		-ms-grid-row-span : 1;
		    grid-row : 3/4;
		-ms-grid-column : 2;
		-ms-grid-column-span : 1;
		    grid-column : 2/3;
	}
	.component.login form input[type="submit"]{
		-ms-grid-row : 4;
		-ms-grid-row-span : 1;
		    grid-row : 4/5;
		-ms-grid-column : 2;
		-ms-grid-column-span : 1;
		    grid-column : 2/3;
	}
	.component.login form > label{
		display : flex;
		align-items : center;
		align-self : flex-start;
	}
	.component.login form > label span{
		font-size : 16px;
		padding-right : 12px;
		text-align : right;
		width : 136px;
		flex-shrink : 0;
		letter-spacing : .1em;
	}
	.component.login form input[type="password"] , .component.login form input[type="email"]{
		height : 30px;
	}
	.component.login form input[type="email"]{
		width : 310px;
	}
	.component.login form input[type="password"]{
		width : 240px;
	}
	.component.login form .checkbox label{
		font-size : 16px;
	}
	.component.login form .checkbox label:before{
		width : 16px;
		height : 16px;
		margin-right : 8px;
	}
	.component.login form input[type="submit"]{
		height : 100%;
		width : 228px;
		font-size : 16px;
	}
	.component.login a{
		font-size : 16px;
		margin-left : 299px;
		margin-top : 24px;
		padding-bottom : 14px;
	}
}
/*--------------------------------------------
FORM
---------------------------------------------*/
.component.form .require:after{
	content : "必須";
	color : #fff;
	background-color : #fa085d;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
}
.component.form input[type="text"] , .component.form input[type="email"] , .component.form input[type="tel"]{
	border : 0;
	background-color : #e6e5e5;
	padding-left : .5em;
}
.component.form .checkbox label{
	position : relative;
	cursor : pointer;
	display : flex;
	align-items : center;
}
.component.form .checkbox label:before{
	content : "";
	display : block;
}
.component.form .checkbox input[type="checkbox"]{
	display : none;
}
.component.form .checkbox input[type="checkbox"]:checked ~ label:before{
	content : "\2713";
}
.component.form .checkbox label{
	letter-spacing : .1em;
	color : #222;
}
.component.form .checkbox label:before{
	background-color : #ddd;
	color : #fe3705;
}
.component.form .radio li input{
	display : none;
}
.component.form .radio li label::before{
	content : "";
	display : block;
	top : 0;
	left : 0;
	border-radius : 50%;
}
.component.form .radio li label{
	display : flex;
	align-items : center;
	cursor : pointer;
	position : relative;
}
.component.form .radio li input:checked + label:after{
	content : "";
	display : block;
	position : absolute;
	border-radius : 50%;
}
.component.form .radio label{
	letter-spacing : .1em;
}
.component.form .radio label:before{
	background-color : #ccc;
}
.component.form .radio label:after{
	background-color : #f30;
}
.component.form select{
	border : 0;
	background-color : #e6e5e5;
	padding-left : .5em;
}
.component.form textarea{
	border : 0;
	background-color : #e6e5e5;
	padding : .5em;
}
.component.form input[type="submit"]{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	background-color : #ffcb1f;
	color : #222;
	letter-spacing : .1em;
	margin-left : auto;
	margin-right : auto;
}
@media screen and (max-width: 768px){
	.component.form .wrap{
		padding-bottom : calc( 60 * 100vw / 768 );
	}
	.component.form .lede{
	}
	.component.form form{
		margin-top : calc( 102 * 100vw / 768 );
	}
	.component.form form > ul > li{
		padding-bottom : calc( 20 * 100vw / 768 );
	}
	.component.form form > ul > li + li{
		border-top : dotted calc( 3 * 100vw / 768 ) #ccc;
		padding-top : calc( 26 * 100vw / 768 );
	}
	.component.form form > ul > li > label{
		display : flex;
		align-items : center;
		font-size : calc( 26 * 100vw / 768 );
	}
	.component.form form > ul > li > label.require:after{
		width : calc( 71 * 100vw / 768 );
		height : calc( 25 * 100vw / 768 );
		font-size : calc( 24 * 100vw / 768 );
		margin-left : calc( 18 * 100vw / 768 );
	}
	.component.form form > ul > li > *:not(label){
		margin-top : calc( 15 * 100vw / 768 );
	}
	.component.form input[type="text"] , .component.form input[type="email"] , .component.form input[type="tel"]{
		height : calc( 60 * 100vw / 768 );
		font-size : calc( 26 * 100vw / 768 );
	}
	.component.form .input{
		display : flex;
		justify-content : space-between;
	}
	.component.form .input input{
		width : calc( 349 * 100vw / 768 );
	}
	.component.form input[type="email"] , .component.form input[type="tel"]{
		width : 100%;
	}
	.component.form .checkbox{
		padding-left : calc( 14 * 100% / 720 );
	}
	.component.form .checkbox li + li{
		margin-top : calc( 14 * 100vw / 768 );
	}
	.component.form .checkbox label{
		font-size : calc( 26 * 100vw / 768 );
	}
	.component.form .checkbox label:before{
		width : calc( 24 * 100vw / 768 );
		height : calc( 24 * 100vw / 768 );
		font-size : calc( 24 * 100vw / 768 );
		margin-right : calc( 7 * 100vw / 768 );
	}
	.component.form .radio{
		padding-left : calc( 14 * 100% / 720 );
	}
	.component.form .radio li + li{
		margin-top : calc( 14 * 100vw / 768 );
	}
	.component.form .radio label{
		font-size : calc( 26 * 100vw / 768 );
	}
	.component.form .radio label:before{
		width : calc( 22 * 100vw / 768 );
		height : calc( 22 * 100vw / 768 );
		margin-right : calc( 8 * 100vw / 768 );
	}
	.component.form .radio label:after{
		width : calc( 10 * 100vw / 768 );
		height : calc( 10 * 100vw / 768 );
		top : calc( 8 * 100vw / 768 );
		left : calc( 6 * 100vw / 768 );
	}
	.component.form .address > div{
		display : flex;
		align-items : center;
		font-size : calc( 26 * 100vw / 768 );
		letter-spacing : .1em;
	}
	.component.form .address > div + div{
		margin-top : calc( 14 * 100vw / 768 );
	}
	.component.form .address > div input.select{
		letter-spacing : 0;
	}
	.component.form .address01 input{
		width : calc( 308 * 100vw / 768 );
	}
	.component.form .address01 select{
		width : calc( 346 * 100vw / 768 );
		height : calc( 60 * 100vw / 768 );
		margin-left : calc( 26 * 100vw / 768 );
		font-size : calc( 26 * 100vw / 768 );
	}
	.component.form .address02 , .component.form .address03{
		white-space : nowrap;
	}
	.component.form .address02 input , .component.form .address03 input{
		margin-left : calc( 11 * 100vw / 768 );
		width : calc( 593 * 100vw / 768 );
	}
	.component.form textarea{
		width : 100%;
		height : calc( 218 * 100vw / 768 );
	}
	.component.form input[type="submit"]{
		width : calc( 450 * 100vw / 768 );
		height : calc( 80 * 100vw / 768 );
		font-size : calc( 30 * 100vw / 768 );
		margin-top : calc( 54 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.component.form .wrap{
		padding-bottom : 0;
	}
	.component.form .lede{
		width : 800px;
		margin-left : auto;
		margin-right : auto;
		margin-bottom: 3em;
		text-align: center;
	}
	.component.form form{
		display : block;
		padding-bottom : 107px;
		padding-top : 33px;
	}
	.component.form form > ul > li{
		display : flex;
		align-items : flex-start;
	}
	.component.form form > ul > li + li{
		margin-top : 36px;
	}
	.component.form form > ul > li > label{
		display : flex;
		align-items : center;
		justify-content : flex-end;
		flex-shrink : 0;
		width : 340px;
		text-align : right;
		margin-right : 20px;
		letter-spacing : .1em;
		font-size : 16px;
	}
	.component.form form > ul > li > label:after{
		content : "";
		display : block;
		margin-left : 20px;
		width : 71px;
		min-height : 1px;
	}
	.component.form form > ul > li > label.require:after{
		width : 71px;
		height : 25px;
		font-size : 12px;
	}
	.component.form input[type="text"] , .component.form input[type="email"] , .component.form input[type="tel"]{
		height : 30px;
	}
	.component.form .inputs{
		display : felx;
		align-items : flex-start;
	}
	.component.form .inputs input{
		width : 180px;
	}
	.component.form .inputs input + input{
		margin-left : 18px;
	}
	.component.form input[type="tel"]{
		width : 360px;
	}
	.component.form input[type="email"]{
		width : 467px;
	}
	.component.form .checkbox{
		display : flex;
		flex-wrap : wrap;
		align-items : flex-start;
		margin-left : -30px;
	}
	.component.form .checkbox li{
		margin-left : 30px;
	}
	.component.form .checkbox label{
		font-size : 16px;
	}
	.component.form .checkbox label:before{
		width : 14px;
		height : 14px;
		font-size : 14px;
		margin-right : 11px;
	}
	.component.form .radio{
		display : flex;
		align-items : flex-start;
		flex-wrap : wrap;
		margin-left : -30px;
	}
	.component.form .radio li{
		margin-left : 30px;
	}
	.component.form .radio label{
		font-size : 16px;
	}
	.component.form .radio label:before{
		width : 16px;
		height : 16px;
		margin-right : 10px;
	}
	.component.form .radio label:after{
		width : 6px;
		height : 6px;
		top : 5px;
		left : 5px;
	}
	.component.form .addres > div{
		display : flex;
		align-items : center;
		font-size : 16px;
	}
	.component.form .address01 input{
		margin-left : 9px;
	}
	.component.form .address01 select{
		width : 255px;
		height : 30px;
		margin-left : 8px;
	}
	.component.form .address02 , .component.form .address03{
		letter-spacing : .1em;
	}
	.component.form .address02 input , .component.form .address03 input{
		letter-spacing : 0;
		margin-left : 7px;
		width : 519px;
	}
	.component.form .address02{
		margin-top : 14px;
	}
	.component.form .address03{
		margin-top : 6px;
	}
	.component.form textarea{
		width : 628px;
		height : 143px;
	}
	.component.form input[type="submit"]{
		margin-top : 40px;
		width : 257px;
		height : 56px;
		font-size : 18px;
	}
}


/*------------------
テキストエフェクト　背景色がでる
-----------------*/

/*全共通*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #2179c7;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}