html { scroll-behavior: smooth;}

/* CSS Document */

body {
	overflow-x: hidden;
	margin: 0;
    background: #fff none repeat scroll 0 0;
    color: #000;
    font-family: 'メイリオ', Meiryo,'Meiryo UI','Yu Gothic UI','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 100% !important;
    line-height: 1.5em;
}

.wrap {
	overflow: hidden;
}

a {
	transition: all 0.3s ease 0s;
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

a:hover img {
	opacity: 0.7;
	transition: all 0.3s ease 0s;
}

.remove {
    display: block;
    font-size: 0.5em;
    overflow: hidden;
    text-align: left;
    text-indent: -9999px;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}

.small-gutter [class*='col-'] {
    padding-right:5px;
    padding-left:5px;
}

.no-gutter [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

.bold { font-weight: bold; }

.h1{ font-size:35px; } .h2{ font-size:28px; } .h3{ font-size: 30px; line-height: 1.4em; } .h4-l{ font-size:22px; } .h4{ font-size:18px; } .text_01{ font-size:18px; text-align: center; line-height:1.7; margin: 30px;} .text_l{font-size:18px;line-height:1.7;} .text_m{ font-size:14px; } .text_s{ font-size:12px;line-height: 1.5; }

.mt10 { margin-top: 10px; }.mt20 { margin-top: 20px; }.mt30 { margin-top: 30px; }.mt50 { margin-top: 50px; }.mt70 { margin-top: 70px; }.mt100 { margin-top: 100px; }
.mb10 { margin-bottom: 10px; }.mb20 { margin-bottom: 20px; }.mb30 { margin-bottom: 30px; }.mb50 { margin-bottom: 100px; }.mb70 { margin-bottom: 70px; }.mb100 { margin-bottom: 100px; }
.pt10 { padding-top: 10px; }.pt20 { padding-top: 20px; }.pt30 { padding-top: 30px; }.pt50 { padding-top: 50px; }.pt70 { padding-top: 70px; }.pt100 { padding-top: 100px; }
.pb10 { padding-bottom: 10px; }.pb20 { padding-bottom: 20px; }.pb30 { padding-bottom: 30px; }.pb50 { padding-bottom: 50px; }.pb70 { padding-bottom: 70px; }.pb100 { padding-bottom: 100px;}

@media screen and (max-width:991px) {
	.h1{ font-size:30px; } .h2{ font-size:26px; } .h3{ font-size: 24px; line-height: 1.4em; } .h4-l{ font-size:20px; } .h4{ font-size:18px; } /*.text_l{font-size:18px;line-height:1.7;} .text_m{ font-size:14px; } .text_s{ font-size:12px;line-height: 1.5; }*/
}

@media screen and (max-width:767px){
	.tAr {
		text-align: left;
	}
	.h1{ font-size:26px;} .h2{font-size:24px;} .h3{font-size:18px;} .h4-l{ font-size:16px; } .h4{font-size:14px;} .text_l{font-size:16px;} .text_m{font-size:12px;} .text_s{font-size:10px;}
}

/*************************************************

					footer

*************************************************/

.copy_container {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 1em;
}

/*************************************************

						main

*************************************************/

.container {
	padding-left: 15px;
	padding-right: 15px;
}


.container::after {
    height: auto;
}

.container {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 1080px;
    min-height: 100%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    width: 100%;
}

.container::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.title {
    font-size: 214%;
    line-height: 1.4;
    margin-bottom: 10px;
    text-align: center;
}

.interview {
	background: url("../img/interview.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
    display: block;
    padding-top: 43%;
}
.interview_main {
	position: relative;
    background: #fff;
}
.interview_main p {
	padding: 2%;
	font-size: 1.2em;
	line-height: 1.7em;
}
.interview_main img {
	width: 100%;
	margin: 2% 0;
}
.ul_ye{
	background: linear-gradient(transparent 50%, yellow 50%);
}
.ul_re{
	border-bottom: solid 1px red;
}

#lp_01 a {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#lp_01 {
    background: url("../img/fv.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
    height: 70vh;
}

#lp_01 h1 {
	position: absolute;
	left: 10%;
	top: 15%;
	opacity: 1;
	color: #fff;
	font-weight: 900;
	font-size: 5em;
	text-shadow: 2px 2px 16px #808080;
}

.lp_common {
	position: relative;
    background: #fff6d3;
	padding: 2%;
}
.lp_common_01 {
	background: url("../img/movie_01.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
    display: block;
    padding-top: 12%;
}
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin-top: 2%;
}
.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.lp_common_02 {
	position: relative;
    background: url("../img/zureboushi_01.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
    display: block;
    padding-top: 70%;
}
.flexbox {
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	width: 90%;
	max-width: 990px;
}
.sheets,.mat {
	-webkit-flex: 1;
	flex: 1;
	padding: 2%;
	text-align: center;
	margin: 1em;
}
.flexbox p{
	font-size: 1.5em;
	font-weight: bold;
	color: #37b6e8;
	border-top: 3px solid #37b6e8;
	border-bottom: 3px solid #37b6e8;
	padding: 0.5em;
}

.sheets {
	background: url("../img/sheets.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
    display: block;
    padding-top: 30%;
}
.mat {
	background: url("../img/mat.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
    display: block;
    padding-top: 30%;
}

#sheets .main {
	background: url("../img/sheets_main.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
    display: block;
    padding-top: 64%;
}
#sheets .onayami {
	background: url("../img/sheets_onayami.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
    display: block;
    padding-top: 36%;
}
#sheets .point {
	background: url("../img/sheets_point.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
    display: block;
    padding-top: 7%;
}

#sheets .ditail{
	background-color: #fff;
	margin-top: 3%;
}

#sheets .flexbox3 {
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	width: 90%;
	max-width: 990px;
}
#sheets h4 {
	color: #37b6e8;
	font-weight: bold;
}
#sheets .sheets_point {
	-webkit-flex: 1;
	flex: 1;
	padding: 2%;
	text-align: center;
	margin: 1em;
}
#sheets .sheets_point p {
	text-align: left;
}
#sheets img {
	text-align: center;
	width: 100%;
}


#mat .main {
	background: url("../img/mat_main.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
    display: block;
    padding-top: 65%;
}
#mat .ditail {
	background: url("../img/mat_ditail.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
    display: block;
    padding-top: 65%;
	margin-top: 5%;
}

.bg_lb {
	position: relative;
    background-color: #C5E7FF;
	padding: 2%;
}

.button {
	width: 100%;
	text-align: center;
}

.button a:hover {
	text-decoration: none;
	opacity: 0.5;
}

.lb a {
	display: inline-block;
	justify-content: space-between;
	align-items: center;
	margin: 2%;
	padding: 1em 2em;
	color: #fff;
	font-size: 18px;
	background-color: #37b6e8;
	transition: 0.3s;
	text-align:center;
	border-radius: 0.5rem;
}

.gr a {
	display: inline-block;
	justify-content: space-between;
	align-items: center;
	margin: 2%;
	padding: 1em 2em;
	color: #fff;
	font-size: 18px;
	background-color: #00B600;
	transition: 0.3s;
	text-align:center;
	border-radius: 0.5rem;
}

.youtubesm{
	background:#fff
}
.youtubesm a{
	border:2px
	solid #fff;
	display:block;
	position:relative
}
.youtubesm a:hover{
	opacity:.6
}
.youtubesm a::before{
	background:url(../img/yt_logo_cmyk_light.png) center center / 100px 64px no-repeat;content:"";
	display:block;
	width:100%; /*アイコンの幅調整*/
	height:60px; /*アイコンの高さ調整*/
	margin:-32px auto 0;
	position:absolute;
	top:50%;
	left:0;
	right:0;
	z-index:1
}
.youtubesm a img{
	width:100%
}


/******* tablet 用 *******/
@media screen and (min-width:768px) and ( max-width:1024px) {
	#lp_01 {
		height: 50vh;
	}
	
	#lp_01 h1 {
		left: 10%;
		top: 15%;
		font-size: 4em;
	}

	.lb a {
		margin: 1.5%;
		padding: 1em 2em;
		font-size: 15px;
	}

	#sheets .main {
		padding-top: 64%;
	}

}


/******* S P 用 *******/
@media screen and (max-width:767px) { 

	.lp_common_01 {
		background: url("../img/movie_01_sp.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: block;
		padding-top: 30%;
	}

	.lp_common_02 {
		background: url("../img/zureboushi_01_sp.jpg");
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: block;
		padding-top: 88%;
	}

	.interview_main p {
		padding: 2%;
		font-size: 1em;
		line-height: 1.5em;
	}

	#lp_01 {
		height: 30vh;
	}

	#lp_01 h1 {
		top: 5%;
		left: 7%;
		line-height: 1.2em;
		font-size: 2.5em;
	}

	.lb a {
		margin: 1%;
		padding: 1em 2em;
		font-size: 12px;
	}

	.gr {
		margin: 2%;
		padding: 1em 2em;
	}

	.gr a {
		font-size: 12px;
	}

	.flexbox {
		width: 100%;
	}

	.flexbox p{
		font-size: 0.8em;
	}

	#sheets .main {
		background: url("../img/sheets_main_sp.jpg");
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: block;
		padding-top: 86%;
	}
	#sheets .onayami {
		background: url("../img/sheets_onayami_sp.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: block;
		padding-top: 247%;
	}
	#sheets .point {
		background: url("../img/sheets_point_sp.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: block;
		padding-top: 7%;
	}
	#sheets .flexbox3 {
		width: 100%;
		display: block;
		padding: 2%;
	}
	#sheets .sheets_point {
		width: 100%;
		margin: 0 auto;
	}

	#mat .main {
		background: url("../img/mat_main_sp.jpg");
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: block;
		padding-top: 60%;
	}
	#mat .ditail {
		background: url("../img/mat_ditail_sp.jpg");
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: block;
		padding-top: 199%;
		margin-top: 5%;
	}
}