@charset "UTF-8";

/*リセット・初期設定・共通*/
html{color:#333;}
#l-content .content-inner.pad0{ padding-bottom: 0!important; }
dl dt img{ max-width: 100%; width: auto; margin-right:0; }
img{max-width: 100%; width: 100%; height: auto; }
.inner{ width:min(990px,90%); margin:0 auto; }
.wrapper{ max-width: 846px; margin: 0 auto; }
h2{font-weight:600; font-size:20px; line-height:1.5em; margin-bottom:0.5em; }
li{list-style:none;}
br.sp{display:none;}

*[tume="L"]{text-indent: -0.5em;}

.telbtn{position: relative;}
@media screen and (max-width:767px){
	*[vanish="sp"],
	.pc_only{ display:none; }
	.telbtn a{ display:block; position:absolute; top:0; left:0; width:100%; height:100%; }
	.vanish_branch img:not([src*="_sp"]){display: none;}
}
@media screen and (min-width:768px){
	*[vanish="pc"],
	.sp_only{display:none;}
	.pc_br_del br{display:none;}
	.telbtn a{display:none;}
	.vanish_branch img[src*="_sp"]{display:none;}
	*[class*="text_indent"] *{text-indent: 0;}
	.text_indent1{padding-left: 1em;text-indent: -1em;}
	.text_indent2{padding-left: 2em;text-indent: -2em;}
}
*[class*="text_indent"].pcsp *{text-indent: 0;}
.text_indent2.pcsp{padding-left: 2em;text-indent: -2em;}

#l-content .content-inner.pad0 { padding-bottom:0 !important; }

/*LPのページだけ*/
#l-content .content-inner{padding:0;}
.m-txt-ttl,#l-headerpath{ width:min(1000px,100%); margin:0 auto; }

/* 背景 */
section.bg_grad{
	background-color: #b8e0eb;
	background-image: url("../images/bg-grad.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 1366px auto;
	padding-bottom: min(100px,calc(1vw * 50 / 3.75));
}
@media screen and (max-width:767px){
	section.bg_grad{
		background-image: url("../images/bg-grad-sp.png");
		background-size: contain;
	}
}

/*メイン*/
#Main_v{padding: 0;}
#Main_v .mv{
	width:min(990px,90%); margin:0 auto;
	display: flex;
	justify-content: center;
}
#Main_v .mv picture,
#Main_v .mv img{display: block; width:100%;}
/*
#Main_v .mv picture{margin-right: max(-5px,min(-2.5px,calc(1vw * -2.5 / 3.75)));}
#Main_v .mv picture:nth-of-type(2){ width:min(706px,80%); display:block; margin:0 auto; }
*/
@media screen and (max-width:767px){
	#Main_v .mv{width:100%;}
}

/*コンテンツ部分*/
:root{
--LP-color-K     :#231815;
--LP-color-R     :#e60012;
--LP-color-YG    :#6fb844;
--LP-color-G     :#009d5e;
--LP-color-C     :#38a1db;
--LP-color-B     :#007bc6;
}
#Contents {padding:0;}
#Contents picture,
#Contents img{display: block; max-width: 100%;}

:root{
--mv_btn-shadow:min(3px,calc(1vw * 1.6 / 3.75));
}
#Contents .mv_btn{width: min(990px, 90%); margin: 0 auto;
display: flex; justify-content: space-between;}
#Contents .mv_btn a{display: block; width: calc(1% * 310 / 9.9);
border-radius: min(20px,max(18px,calc(1vw * 18 / 10)));
box-shadow: var(--mv_btn-shadow) var(--mv_btn-shadow) var(--mv_btn-shadow) rgba(0, 0, 0, 0.2);}
@media screen and (max-width:767px){
	#Contents .mv_btn{gap:calc(1vw * 10 / 3.75);flex-direction: column;}
	#Contents .mv_btn a{width:100%;
	border-radius: calc(1vw * 15 / 3.75);}
}

#Contents .cp_base{width: min(990px, 90%); margin: min(60px,6%) auto 0;}
#Contents .cp_base *[id*="cp"]{position: relative;}
#Contents .cp_base *[id*="cp"] .in{position: absolute; inset:0; width: 100%; height:100%;
display: flex; justify-content: center; align-items: center;}
#Contents .cp_base *[id*="cp"] .in a.btn{position: absolute; width:calc(1% * 478 / 9.9); min-height: 100px; border-radius: 6px;
background-color: var(--LP-color-B); color:#FFF; font-size: min(22px,calc(1vw * 16 / 3.75)); font-weight: 700; line-height: calc(1em * 31 / 22);
white-space: pre-wrap; text-align: center; padding: 19px 0; text-decoration: none;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
display: flex; justify-content: center; align-items: center;}
#Contents .cp_base *[id*="cp"] .in a.btn::after{content:''; display: block; background-color: #FFF; width:9px; height:13px;
clip-path: polygon(0 0, 100% 50%, 0 100%);
position: absolute; right:14px;}
#Contents .cp_base *[id*="cp"] .in a.btn[c="G"]{background-color: var(--LP-color-G);}
#Contents .cp_base *[id*="cp"] .in a.btn[c="C"]{background-color: var(--LP-color-C);}
#Contents .cp_base *[id*="cp"] .in a.btn.cp1{inset: auto auto calc(1% * 54 / 20.2); }
#Contents .cp_base *[id*="cp"] .in a.btn.cp2-1{inset: auto auto calc(1% * 760 / 26.8); }
#Contents .cp_base *[id*="cp"] .in a.btn.cp2-2{inset: auto auto calc(1% * 90 / 26.8); }
#Contents .cp_base *[id*="cp"] .in a.btn.cp3{inset: auto auto calc(1% * 100 / 19.4); }
#Contents .cp_base #cp2{margin-top: min(100px,10%);}
#Contents .cp_base .oubosougaku{width: min(890px, 100%); margin: calc(-1% * 32 / 9.9) auto;
position: relative; z-index: 2;}
@media screen and (max-width:767px){
	#Contents .cp_base{width:calc(1vw * 335 / 3.75); margin: calc(1vw * 30 / 3.75) auto 0;}
	#Contents .cp_base *[id*="cp"] .in a.btn{width:calc(1% * 300 / 3.35); min-height: 0; line-height: calc(1em * 22 / 16);}
	#Contents .cp_base *[id*="cp"] .in a.btn.cp1{inset: auto auto calc(1% * 26 / 22.2); }
	#Contents .cp_base *[id*="cp"] .in a.btn.cp2-1{inset: auto auto calc(1% * 895 / 25.78); }
	#Contents .cp_base *[id*="cp"] .in a.btn.cp2-2{inset: auto auto calc(1% * 60 / 25.78); }
	#Contents .cp_base *[id*="cp"] .in a.btn.cp3{inset: auto auto calc(1% * 50 / 16.2); }
	#Contents .cp_base #cp2{margin-top: calc(1vw * 50 / 3.75);}
	#Contents .cp_base .oubosougaku{width: calc(1% * 300 / 3.35); margin: calc(-1% * 25 / 3.35) auto;}
}

.btn-login a{ border-radius:4px; display:table; background-image:-webkit-gradient(linear, left bottom, left top, from(#c60814), to(#e70012)); background-image:-webkit-linear-gradient(bottom, #c60814, #e70012); background-image:linear-gradient(to top, #c60814, #e70012); background-color:#e70012; color:#fff !important; padding:5px 12px 4px 35px; }
.btn-login a .login-name { display:table-cell; vertical-align:middle; font-size:12px; font-size:1.2rem; padding-right:3px; padding-top:2px; }
.btn-login a .login-link { display:table-cell; vertical-align:middle; font-size:15px; font-size:1.5rem; font-weight:bold; }
.btn-login a:after{ font-family:'icomoon'; line-height:1; position:absolute; left:11px; top:50%; margin-top:-10.5px; color:#fff; font-size:21px; content:'\e912'; text-indent:0; font-weight:normal !important; word-break:normal; }
.item-guid{ display:block; font-weight:bold; border:solid 1px #d8d5d5; background-image:-webkit-gradient(linear, left bottom, left top, from(#ebebeb), to(#fff)); background-image:-webkit-linear-gradient(bottom, #ebebeb, #fff); background-image:linear-gradient(to top, #ebebeb, #fff); border-radius:5px; background-color:#fff; -webkit-box-shadow:1px 2px 1px rgba(0, 0, 0, 0.11); box-shadow:1px 2px 1px rgba(0, 0, 0, 0.11); font-size:14px; font-size:1.4rem; padding:6px 10px 3px; }
.item-guid span{ position:relative; display:inline-block; padding-left:24px; }
.item-guid span:before{ content:''; background:url(../images/i_beginner_sp.png) no-repeat; background-size:15px 21px; width:15px; height:21px; position:absolute; top:0; bottom:0; left:0; margin-top:auto; margin-bottom:auto; }

/*文章部分*/
#Points{padding:min(100px,calc(1vw * 60 / 3.75)) 0; background:#fff;}
#Points h2{text-align:left; color:var(--LP-color-B);}
#Points h2[c="G"]{color:var(--LP-color-G);}
#Points h2[c="C"]{color:var(--LP-color-C);}
#Points h2 ~ h2{margin-top: min(100px,calc(1vw * 50 / 3.75));}
/*
#Points h3{font-size:16px; line-height:24px; font-weight:600; margin:0;}
#Points p{font-size:15px; line-height:22px; margin:15px 0;}
#Points p span{ color:var(--LP-color-B); }
#Points p span[num]{
	background-color: var(--LP-color-B);
	color:#FFF;
	width: 1em;
	height: 1em;
	border-radius: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
#Points p span[num]::before{
	content:attr(num);
	display: block;
	font-size: 0.75em;
	line-height: 1em;
	height: 1em;
}
*/
#Points ul,#Points li{list-style-type:none; padding:0; margin:0;}
#Points ul li{ font-size:15px; line-height:22px; color:var(--LP-color-K); display:flex; }
#Points ul li *{white-space: pre-wrap; display: block;}
#Points ul li * b{display: inline-block;}
#Points ul > li::before{content: "●"; color:var(--LP-color-B);}
#Points ul[c="G"] > li::before{color:var(--LP-color-G);}
#Points ul[c="C"] > li::before{color:var(--LP-color-C);}
#Points ul > li[m]::before{ content:attr(m);}
/*
#Points ul li span span{ font-weight:600; }
#Points .hr_ttl{ margin-top:100px; }
*/
#Points .info { border-top: 1px solid #808080; padding-top: 34px; margin-top:min(100px,calc(1vw * 50 / 3.75)); }
#Points .info p { font-size: 14px; }
#Points .info .tel_wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
#Points .info .tel_wrap .btn1 { max-width: 437px; width: 100%; }
#Points .info .tel_wrap .btn2 { max-width: 448px; width: 100%; }
/*
#Points .po_img{ margin:10px 0; }
#Points .ol_txt span{ color:var(--LP-color-B); }
#Points .mt30{ margin-top:50px; }
#Points .quote{ font-size:14px; line-height:23px; }
#Points .btn_li{margin: 0 -1% 30px; display:flex; justify-content:space-between; }
#Points .btn_li li{ width:33%; }
#Points .btn_li li::before{ content:none; }
#Points .bgbox{ background:#eeeeef; padding:15px; box-sizing:border-box; margin-bottom:30px; }
#Points .bold{ font-weight:700; color:var(--LP-color-K); }
#Points .flex_set{margin: 15px 0; display: flex;}
#Points .flex_set p{margin: 0; width: 2.25em; min-width: 2.25em;}
#Points .flex_set .flex{font-size: 15px; line-height: 22px; width:100%; max-width: 47em;
gap: 1em 2em; display: flex; flex-wrap: wrap; justify-content: center;}
#Points .flex_set .flex .t{text-align: justify;}
#Points .flex_set .flex .t b{display: inline-block; margin-right: 0.5em; border: solid 2px var(--LP-color-R); padding: 0 0.5em; margin-bottom: 0.25em;}
#Points .flex_set .flex .t b[c="1"]{border-color:var(--LP-color-B); color:var(--LP-color-B);}
#Points .flex_set .flex .t b[c="2"]{border-color:var(--LP-color-YG); color:var(--LP-color-YG);}
#Points .flex_set .flex .m{background-color: var(--LP-color-R); color: #FFF;
font-weight: 700; width: 2em; padding: 0.25em 0.5em 0;
display: flex; justify-content: center; align-items: center;}
#Points b.col_R{color: var(--LP-color-R); text-decoration: underline;}
#Points .p_mgnhalf p{margin: 0.4em 0;}
*/

@media screen and (max-width:1055px){}
@media screen and (max-width:767px){
	br.sp{display:block;}
	#Points{ padding:55px 0; }
	#Points h2{ font-size:16px; line-height:25px; }
	/*
	#Points h3{ font-size:14px; line-height:22px; }
	#Points .hr_ttl{ margin-top:70px; }
	*/
	#Points ul li{ font-size:14px; line-height:22px; }
	#Points .info{ padding-top:40px; margin-top:50px; }
	#Points .info .tel_wrap .btn1 { max-width: none; margin-bottom: 10px; }
	#Points .info .tel_wrap .btn2 { max-width: none; }
	/*
	#Points .btn_li{ margin: 0 -3.5%; flex-direction:column; }
	#Points .btn_li li{ width:100%; }
	#Points .flex_set .flex{max-width: none; flex-direction: column;}
	#Points .flex_set .flex .t br{display: none;}
	#Points .flex_set .flex .m{width: 5em; margin: 0 auto;}
	*/
}