@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 : 700px;
	}
	.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;
}
@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{
		margin-top : 1em;
	}
}
@media print,screen and (min-width: 769px){
	.article-between{
		margin-top : 44px;
	}
	.article-between li{
		display : flex;
		align-items : flex-start;
	}
	.article-between li:nth-child(even){
		flex-direction : row-reverse;
	}
	.article-between .img{
		flex-shrink : 0;
		width : 520px;
	}
	.article-between li + li{
		margin-top : 80px;
	}
	.article-between li > div{
		flex-grow : 1;
		width : 100%;
	}
	.article-between li:nth-child(odd) > div{
		margin-left : 20px;
	}
	.article-between li:nth-child(even) > .img{
		margin-left : 20px;
	}
	.article-between .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{
		margin-top : calc( 60 * 100vw / 768 );
	}
	.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;
	}
}
/*# sourceMappingURL=../maps/component.css.map */


/*--------------------------------------------
component-list
---------------------------------------------*/
.component-list{
	display : flex;
	flex-wrap : wrap;
}
@media screen and (max-width: 768px){
	.component-list{
		justify-content : space-between;
	}
}
@media print,screen and (min-width: 769px){
	.component-list{
		justify-content : center;
	}
}
ul.component-list  li{
	background-color : #fff;
}
	ul.component-list li > span , ul.component-list li >  div.imgbox{
	}
		ul.component-list li > span img , ul.component-list li >  div.imgbox img{
			align-items: center;
		}
	ul.component-list li >  div.iconbox{
		background-color : #ff9900;
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
	}
		ul.component-list li >  div.iconbox img{
		}
ul.component-list.list-arrow li >  div.iconbox::after {
	content: url("../images/business/flow-icon_arrow.svg");
	display: block;
	z-index: 10;	
}
ul.component-list.list-arrow li:last-of-type  div.iconbox::after {
	content: none;
}
ul.component-list .box{
	text-align : center;
}
	ul.component-list .box h4{
		font-weight: 600;
		margin-bottom: 10px;
	}
	ul.component-list .box p{
		text-align: left;
		line-height: 1.5;
	}
@media screen and (max-width: 768px){

	ul.component-list{
		margin-top : calc( 50 * 100vw / 768 );
	}
	ul.component-list li{
		margin-bottom: calc( 24 * 100vw / 768 );
	}
	ul.component-list li , ul.component-list.sp-column1 li{
	}
	ul.component-list.sp-column2 li{
		width : calc(50% - ( 12 * 100vw / 768 ) );
	}
	ul.component-list li > span , ul.component-list li >  div.imgbox{
	}
		ul.component-list li > span img , ul.component-list li >  div.imgbox img{
			width: 100%;
		}
	ul.component-list li >  div.iconbox{
		height: calc( 200 * 100vw / 768 );
		position: relative
	}
		ul.component-list li >  div.iconbox img{
			width: calc( 100 * 100vw / 768 );
		}
			ul.component-list.list-arrow li >  div.iconbox::after {
				width: calc( 100 * 100vw / 768 );
				height: calc( 100 * 100vw / 768 );
				position: absolute;
				right: calc( -40 * 100vw / 768 );
			}
	ul.component-list .box{
		padding-top : calc( 12 * 100vw / 768 );
		padding-bottom : calc( 12 * 100vw / 768 );
	}
		ul.component-list.list-pd .box{
			padding-top: calc( 12 * 100vw / 768 );
			padding-bottom: calc( 12 * 100vw / 768 );
			padding-left: calc( 12 * 100vw / 768 );
			padding-right: calc( 12 * 100vw / 768 );
		}
		ul.component-list .box p{
			font-size: calc( var(--textSizeSP) * 100vw / 720 );
		}
}
@media print,screen and (min-width: 769px){
	ul.component-list{
		margin-top: 50px;
		align-items: stretch;
	}
		ul.component-list li{
			margin-right: 20px;
			margin-bottom: 20px;
			align-self: stretch;
		}
			ul.component-list li:last-of-type{
				margin-right: 0px;
			}
		ul.component-list.column5 li{
			width : 196px;
		}
			ul.component-list.column5 li:nth-of-type(5n){
				margin-right: 0px;
			}
		ul.component-list.column4 li{
			width : 250px;
		}
			ul.component-list.column4 li:nth-of-type(4n){
				margin-right: 0px;
			}
		ul.component-list.column3 li{
			width : 340px;
		}
			ul.component-list.column3 li:nth-of-type(3n){
				margin-right: 0px;
			}
		ul.component-list.width200 li{
			width : 200px;
		}
		ul.component-list.width250 li{
			width : 250px;
		}
		ul.component-list li > span{
		}
	ul.component-list li > span , ul.component-list li >  div.imgbox{
	}
		ul.component-list li > span img , ul.component-list li >  div.imgbox img{
			width: 100%;
			height: auto;
		}
	ul.component-list li >  div.iconbox{
		height: 140px;
		position: relative
	}
		ul.component-list li >  div.iconbox img{
			width: 80px;
			height: auto;
		}
			ul.component-list.list-arrow li >  div.iconbox::after {
				width: 80px;
				height: 80px;
				position: absolute;
				right: -48px;
			}
		ul.component-list .box{
			padding-top: 10px;
			padding-bottom: 10px;
		}
		ul.component-list.list-pd .box{
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 10px;
			padding-right: 10px;
		}
}