@charset "utf-8";
/* CSS Document */

/*その他
-------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb-space-large {margin-bottom: var(--space-large) !important;}
.look {line-height: 1.5 !important; display: inline-block;padding: 5px 10px;background: rgba(0,0,0,0.1);border: 1px solid rgba(0,0,0,0.3);border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
.inline-block {display: inline-block !important;}
.relative {position: relative;}

/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}
}


/*.movie 
-------------------------------------------------------*/
.movie {
  margin: 0 auto 50px;
}
@media screen and (max-width: 768px) {
  .movie {
    margin: 50px auto;
  }
}


/*.question 
-------------------------------------------------------*/
.question {
  padding: 2em 0;
}
.question p {
  font-size: 1.2em !important;
  font-weight: 600;
  margin-left: 1em;
  text-indent: -1em;
  line-height: 1.5 !important;
}
@media screen and (max-width: 768px) {
  .question {
    padding: 1.5em 0 0 0 !important;
  }
  .question p {
    font-size: 1.0em !important;
    font-weight: 600;
  }
}

/*ul.merit 
-------------------------------------------------------*/
ul.merit {
  padding: 2em 0 !important;
}
ul.merit li {
  margin-left: 1em;
  text-indent: -1em;
  line-height: 2;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  ul.merit li {
    font-size: 12px;
  }
}



/*h4.bracket_sub 
-------------------------------------------------------*/
h4.bracket_sub {
  color: #fff;
  line-height: 1.2;
  font-size: 1.8rem !important;
}
@media screen and (max-width: 768px) {
  h4.bracket_sub {
    line-height: 1.2;
    font-size: 1.2rem !important;
  }
}

/*.clm3-img 
-------------------------------------------------------*/
.clm3-img {
  width: 33.33% !important;
  aspect-ratio: auto !important;
}
@media screen and (max-width: 768px) {
  .clm3-img {
    width: 100% !important;
  }
}

/*.sp-img16
-------------------------------------------------------*/
 .sp-img16{ 
	 display: block;
	 width:50%!important;
	 height: auto;
}

@media screen and (min-width:800px) {
 .sp-img16{ display: none;
	}	
}





/*.sample
-------------------------------------------------------*/
.sample { 
	padding: 0 0 50px;
	 background-image: -moz-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%)!important;
	background-image: -webkit-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%)!important;
	background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%)!important;
}
.sample h4 {
	font-size:1.1rem!important;
	font-weight:900;
	margin-bottom: 20px;
	color:#fff;	
}
.sample h4 span{
	font-weight:900;
	color:#fff!important;
}
@media screen and (min-width:800px) {
.sample { 
	padding:0 0 50px;
	}
.sample h4 { 
  font-size: 1.8rem !important;
	font-weight:900;
	margin-top: 0px;
	margin-bottom: 20px;

	}
}

/* .sample .base 
-------------------------------------------------------*/
.sample .base {
        width: 96%;
    margin-right: auto;
    margin-left: auto;
}
@media screen and (min-width:800px) {
.sample .base {
        width: 90%;
    }
}


/*.sample_inner
-------------------------------------------------------*/
.sample_inner {
		width:100%;
		margin: auto;
}
.sample_inner h4{
	font-size:1.1em;
	font-weight:900;
	margin-top: 50px;
}
.sample_inner p {
	font-size:13px;
	color:#fff;
	line-height: 1.8;
	text-align: justify;
	margin: 2rem auto;
	}
.sample_inner p.cl {
    text-align: justify;
	color: #fff;
	}

@media screen and (min-width:800px) {
.sample_inner {
		width:80%;
		margin: auto;
	}
.sample_inner h4{
	font-size:1.2rem!important;
	font-weight:900;
}
.sample_inner p{
	font-size:1rem;

	}
.sample_inner p.cl {
    text-align:center;
	}
}/*追加指定ここまで*/


.sample_inner figure {
width:100%!important;
height: auto;
margin: 0 auto;
}
.sample_inner figure img {
width:100%;
height: auto;
}
@media screen and (min-width:800px) {
.sample_inner figure {
 margin: 0 auto;
	width:50%;
	height: auto;
}
}


/*list-grid2（2カラムボックス）
---------------------------------------------------------------------------*/
.list-grid2 .list * {margin: 0;padding: 0;}
/*ボックス１個あたり*/
.list-grid2 .list {
    display: grid;
	margin-bottom: 0rem;	/*ボックスの下に空けるスペース*/
}
/*ボックス１個あたり*/
.list-grid2 .list {
	padding: 1rem 0rem;
    grid-template-rows: auto 1fr auto;
}
/*ボックス内のfigure画像*/
.list-grid2 .list figure {
	/*margin: -1rem;	*/		/*画像を枠いっぱいに表示させる為に上の「.list-grid1 .list」のpadding分をネガティブマーインで指定*/
	margin: 0 auto;
	}
@media screen and (min-width:800px) {
	.list-grid2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0vw;	/*ブロックの間に空けるマージン的な指定*/
		margin: auto;
		text-align: center;
	}
	.list-grid2 .list {
	padding: 1rem 0.2rem;
		margin-bottom: 0;	/*下に空けるスペースをなくす*/
	}
	}/*追加指定ここまで*/


/*list-grid3（3カラムボックス）
---------------------------------------------------------------------------*/
.list-grid3 .list * {margin: 0;padding: 0;}
/*ボックス１個あたり*/
.list-grid3 .list {
    display: grid;
	margin-bottom: 0rem;	/*ボックスの下に空けるスペース*/
}
/*ボックス１個あたり*/
.list-grid3 .list {
	padding: 1rem 0rem;
    grid-template-rows: auto 1fr auto;
}
/*ボックス内のfigure画像*/
.list-grid3 .list figure {
	/*margin: -1rem;	*/		/*画像を枠いっぱいに表示させる為に上の「.list-grid1 .list」のpadding分をネガティブマーインで指定*/
	margin: 0 auto;
	}
@media screen and (min-width:800px) {
	.list-grid3 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0vw;	/*ブロックの間に空けるマージン的な指定*/
		margin: auto;
		text-align: center;
	}
	.list-grid3 .list {
	padding: 1rem 0.2rem;
		margin-bottom: 0;	/*下に空けるスペースをなくす*/
	}
	}/*追加指定ここまで*/

/*figure.wide1
-------------------------------------------------------------------------*/
figure.wide1{
 width:80%!important;
	height: auto;
}
/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {
figure.wide1{
 width:30%!important;
	height: auto;
}		
		
}