﻿@charset "utf-8";

/*全体の設定	--------------------------------*/

html{
font-size: 62.5%;
height: 100%;}

body{	
margin: 0;	
padding: 0;
height: 100%;	
color: #666;
font-size: 1.5rem;
line-height: 2em;	
background: #FCFCFA;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	
counter-reset: count;}

a{
color: #666;
text-decoration: none;
transition: 0.2s;}                    

a:hover{	
color: #999;
text-decoration: none;}                    

ul,li,dl,dt,dd,figure{
margin: 0px;
padding: 0px;
font-size: 100%;
font-weight: normal;}

ul{	 
list-style-type: none;}

img{
border: none;
max-width: 100%;
height: auto;
vertical-align: middle;}

span{
display: inline-block;}

.small{
font-size: 80%;}

.large{
margin: 0 0.1em;
font-size: 180%;
vertical-align: bottom;}

.large_red{
color: #CD090B;
margin: 0 0.1em;
font-size: 180%;
vertical-align: bottom;}

.red_bold{
color: #FE5050; 
font-weight: bold;}

.header,
.caution_circle,
.incircle,
.incircle-1line,
.incircle-3line,
.number_sp,
.number,
.number:before,
.faq_q:before,
.faq_a:before,
.offer,
.infomation,
.trial_price1,
.trial_price2{
font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;}

h1,h2,h3,h4{
font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;}

/*ヘッダー -----------------*/

.bg_header{
clear: both; 
overflow: hidden;
position:relative; 
margin: 0;
border-top: 13px solid #C3292E;
background: linear-gradient(to bottom, #FFF 50%, #FCFCFA);}

.header{
 position:  relative;
 max-width: 998px;
 width: 100%;
 margin: 0 auto;
 border: 1px solid #ccc;
 border-top: none;} 

.unit{
position: absolute;
top: 30px;
left: 40px;}       

.unit h1{
clear: both;
font-size: 4.0rem;
color: #CD090B;
line-height: 1;
margin: 0;
letter-spacing: -0.5px;}

.h1_1stline{ 
display: block;
font-size: 2.7rem;
color: #666;
line-height: 2.5em;}

.h1_large{
margin: 0 0.2em;
font-size: 160%;
line-height: 1;
border-bottom: solid 2px #D1171C;}

.unit .usp1{
margin-top: 45px;
background: #C3292E;
font-size: 2.0rem;
font-weight: bold; 
color: #FFF;
width: 490px;
 box-sizing: border-box; 
padding: 25px 16px;
border: 1px solid #C3292E;}    

.unit .usp2{
margin-top: 20px;
background: rgba(255,255,255,0.8);
color: #D12C30;
font-size: 1.6rem;
line-height: 1.4;
font-weight: bold; 
width: 490px;
box-sizing: border-box; 
padding: 10px 16px 10px 16px;
border: 1px solid #C3292E;}

.unit .asterisk1{
vertical-align: super;
margin: 0 6px;	
font-size: 70%;
letter-spacing: 3px; 
line-height: 1;}

.unit .asterisk2{
vertical-align: super;
margin: 0 6px;	
font-size: 80%;
letter-spacing: 3px; 
line-height: 1;}


.header p.notes{
position: absolute;
bottom: 2%;
right: 45px;
font-size: 1.2rem;
line-height: 1.6;
text-align: right;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  "メイリオ", Meiryo, Osaka;}       


/*ボタン*/

.btn{
max-width: 1000px;
margin: 30px auto;
font-size: 2rem;
font-weight: bold; 
text-align: center;}

.btn a{
position: relative;
overflow: hidden;
display: block;
background: #FE9327;
border: solid 1px #FE9327;
padding: 2em 0;
line-height: 1;}

.btn a i{
position: relative;
z-index: 3;
color: #FFF;
-webkit-transition: all 200ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 200ms cubic-bezier(0.77, 0, 0.175, 1);}

.btn a:before{
content: "";
position: absolute;
right: 100%;
top: 0;
width: 100%;
height: 100%;
background: #C3292E;
-webkit-transition: all 200ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 200ms cubic-bezier(0.77, 0, 0.175, 1);}

.btn a:after{
content: "";
position: absolute;
right: 0;
top: 50%;
width: 18%;
height: 1px;
background: #FFF;
z-index: 2;
-webkit-transition: all 200ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 200ms cubic-bezier(0.77, 0, 0.175, 1);}

.btn a:hover{
border: solid 1px #C3292E;
opacity: 1;}

.btn a:hover i{
color: #fff;}

.btn a:hover:before{
right: 0;}

.btn a:hover:after{
width: 42px;
background: #fff;}


/*コンテンツ	---------------------------*/

.contents{
display: block;
max-width: 1000px;
margin: 0 auto;	
padding: 0;}  


/*注意*/

.bg_outer{
margin: 0;
margin-bottom: 45px;
padding: 13px;
border: 1px solid #975921;
border-radius: 10px;
background : url(../img/caution_bg1.png) 0% 0% / auto auto repeat scroll padding-box border-box transparent;}

.caution{
margin: 0;
padding: 40px 10%;
border: 0;
background : url(../img/caution_bg2.png) 0% 0% / auto auto repeat scroll padding-box border-box transparent;}

.caution_circle{
display: block;
width:100px;
height:100px;
border-radius:50%;
text-align: center;
font-size: 6rem;
line-height: 100px;
color: #FFF;
font-weight: bold;
background: #D70909;
margin: 0 auto;
padding: 0;}

.caution h2{
clear: both;
font-size: 3.3rem;
letter-spacing: 0.02em;
text-align: center;
line-height: 1.8em;
margin: 1em 0 0;}

.caution hr{
clear: both;
display:block;
margin: 0 auto 3em;
height: 2px;
background-color: #D70909;
width: 100%;
border: none;}

.caution p{
margin: 1em 0 0;
padding: 0;}


/*セクション1*/

.sec01{
margin: 0;
margin-bottom: 45px;
padding: 45px 88px 40px;
border: 1px solid #ccc;
background: #FFF;
overflow:hidden;}

.sec01 h2{
clear: both;
margin: 0;
font-size: 3rem;
text-align: center;
line-height: 2em;
letter-spacing: 0;}

.underline{
border-bottom: solid 2px #D1171C;}

.sec01 hr{
clear: both;
display:block;
margin: 2em auto 3em;
height: 1px;
background-color: #CCC;
width: 100%;
border: none;}


.sec01 p{
margin: 1em 0;
padding: 0;}

.sec01_float_left{
float: left;
padding: 0 ;
margin: 0;
width: 50%;}

.sec01_float_left p{
margin: 1em 0;
padding: 0;}

.sec01_float_right{
float: right;
text-align: right;
margin: 0;
padding: 0;
width: 50%;}

/*セクション2*/

.sec02{
margin: 0;
padding: 45px 88px 45px;
border: 1px solid #ccc;
background: #FFF;
overflow:hidden;}

.sec02 h2{
clear: both;
margin: 0;
font-size: 3rem;
text-align: center;
line-height: 2em;
letter-spacing: 0;
border-bottom: solid 2px #D1171C;}

.reason{
margin: 40px 0 50px 0;
text-align: center;}

.circle{
position: relative;
display: inline-block;
width:140px;
height:190px;
transform:rotate(45deg);
border-radius:50%;
text-align: center;
vertical-align:  middle;
background: #D70909;
margin: 0 10px;
padding: 0;}

.incircle{
position: absolute;
width:150px;
top: 27%;
left: -3%;
transform:rotate(-45deg);
text-align: center;
color: #FFF;
font-size: 2.8rem;
font-weight: bold;
line-height: 1.5em;
margin: 0;}

.incircle-1line{
position: absolute;
width:150px;
top: 40%;
left: -5%;
transform:rotate(-45deg);
text-align: center;
color: #FFF;
font-size: 2.8rem;
font-weight: bold;
line-height: 1.5em;
margin: 0;}

.sec02 .img{
text-align: center;
margin: 0 auto;}

.sec02 h3{
clear: both;
font-size: 3.3rem;
letter-spacing: 0.02em;
text-align: center;
line-height: 1.8em;
margin: 1em 0 0;}

/*セクション3*/

.sec03{
margin: 0;
margin-bottom: 45px;
padding: 1px 35px 0;
border: 1px solid #ccc;
border-top: none;
background: #FBFAF7;}

/*セクション4*/

.sec04{
position: relative;
margin: 40px 0;
padding: 0 0 25px;
border: 1px solid #ccc;
border-radius: 10px;
background: #FFF;}

.number{
position: relative;
margin: 40px 40px;
padding: 15px 70px;
border-bottom: solid 2px #D1171C;}

.number:before{
counter-increment: count;
content:counter(count);
position: absolute;
color: #CD090B;
font-size: 8rem;
font-weight: bold;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
left: 0;
top: 35px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;}

.number h3{
clear: both;
font-size: 2.6rem;
line-height: 1.7;
margin: 0;
letter-spacing: 0;}

.sec04 p{
margin: 1em 90px;}

.sec04_figure_ttl{
margin: 1em 90px 0;
font-weight: bold;}

.sec04_figure{
margin: 0 90px; 
width: auto;
height: auto;}


/*注釈*/

dl.sec04_notes{
font-size: 1.2rem;	
padding: 1.5em 90px 0;}   

dl.sec04_notes dt{	
float: left;
line-height: 1.8em; 	
width: 6em;}

dl.sec04_notes dd{
line-height: 1.8em; 	
padding-bottom: 1.5em;	
padding-left: 7em;}


dl.sec04_notes_asterisk{
font-size: 1.2rem;	
padding: 1.5em 90px 0;}   

dl.sec04_notes_asterisk dt{	
float: left;
line-height: 1.8em; 	
width: 1em;}

dl.sec04_notes_asterisk dd{
line-height: 1.8em; 	
padding-bottom: 1.5em;	
padding-left: 1.5em;}

/*セクション05*/

.sec05{
margin: 0;
margin-bottom: 45px;
padding: 45px 88px 40px;
border: 1px solid #ccc;
background: #FFF;
overflow:hidden;}

.sec05 h2{
clear: both;
margin: 0;
font-size: 3rem;
text-align: center;
line-height: 2em;
letter-spacing: 0;}

.sec05 hr{
 clear: both;
 display:block;
 margin: 2em auto 3em;
 height: 1px;
 background-color: #CCC;
 width: 100%;
 border: none;}

.sec05 h3{
clear: both;
font-size: 3rem;
margin: 2em 0 1em;
padding-left: 0;
line-height: 1.6;
letter-spacing: 0;
border-bottom: solid 2px #D1171C;}

.flex_text-figure{
display:flex;
flex-direction: row;
justify-content: space-between;}

.flex_text60{
width: 58%;
box-sizing: border-box; 
padding-right: 2em;}

.flex_figure40{
width: 42%;
background-color: #FFF;
margin: 0;}

.flex_figure40 img{
width: 100%;
height: auto;}

.sec05 p{
margin: 0;
padding: 0 0 1em 1em;}

/*セクション06*/

.sec06{
margin: 0;
margin-bottom: 45px;
padding: 45px 88px 40px;
border: 1px solid #ccc;
background: #FFF;}

.sec06 h2{
clear: both;
margin: 0;
font-size: 3.5rem;
text-align: center;
line-height: 2em;
letter-spacing: 0;}

.sec06 hr{
clear: both;
display:block;
margin: 2em auto 3em;
height: 1px;
background-color: #CCC;
width: 100%;
border: none;}

.faq_q{
position: relative;
margin: 1em 0 2em;
padding: 10px 5px 10px 60px;
font-size: 1.8rem;
color: #CD090B;
font-weight: bold;}

.faq_q:before{
content: "Q";
position: absolute;
color: white;
background: #CD090B;
font-size: 3.6rem;
font-weight: bold;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
left: -0.5em;
top: 24px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;}

.faq_a{
position: relative;
margin: 1em 0;}

.faq_a:before{
content: "A";
position: absolute;
color: #CD090B;
font-size: 4rem;
font-weight: bold;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
left: -0.5em;
top: 20px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;}

.faq_a p{
padding: 0 50px 1em 60px;
margin: 0;}

.faq_a .bold{
margin: 0 3px;
font-weight: bold;}

/*セクション07*/

.sec07{
margin: 0;
margin-bottom:45px;
padding: 45px 88px 45px;
border: 1px solid #ccc;
background: #FFF;
overflow:hidden;}

.sec07 h3{
clear: both;
margin: 0;
font-size: 3rem;
text-align: center;
line-height: 2em;
letter-spacing: 0;}

.sec07 hr{
 clear: both;
 display:block;
 margin: 1em auto 3em;
 height: 2px;
 background-color: #D70909;
 width: 95%;
 border: none;}

.sec07 .circle{
position: relative;
display: inline-block;
width:140px;
height:190px;
transform:rotate(45deg);
border-radius:50%;
text-align: center;
vertical-align:  middle;
background: #D70909;
margin: 0 10px;
padding: 0;}

.sec07 .incircle-3line{
position: absolute;
width:150px;
top: 22%;
left: -3%;
transform:rotate(-45deg);
text-align: center;
color: #FFF;
font-size: 2.0rem;
font-weight: bold;
line-height: 1.8em;
margin: 0;}

.sec07 .incircle{
position: absolute;
width:150px;
top: 27%;
left: -3%;
transform:rotate(-45deg);
text-align: center;
color: #FFF;
font-size: 2.1rem;
font-weight: bold;
line-height: 1.8em;
margin: 0;}

.reason_sp{
display: none !important;}

.sec07 .img{
text-align: center;
margin: 0 auto 30px;}

.offer{
margin: 0 auto;
font-size: 2.7rem;
line-height: 2;
font-weight: bold;
text-align: center;
letter-spacing: 0;}

.bg_trial{
margin: 40px auto;
padding: 13px;
width: 100%;
box-sizing: border-box; 
border: 1px solid #975921;
border-radius: 10px;
background : url(../img/caution_bg1.png) 0% 0% / auto auto repeat scroll padding-box border-box transparent;}

.trial{
margin: 0;
padding: 30px;
border: 0;
text-align: center;
background : url(../img/caution_bg2.png) 0% 0% / auto auto repeat scroll padding-box border-box transparent;}

.trial h2{
font-size: 2.8rem;
text-align: center;
margin: 0 auto;
letter-spacing: 0;
line-height: 1.5;}

.trial hr{
clear: both;
display:block;
margin: 1em auto 3em;
height: 2px;
background-color: #D70909;
width: 95%;
border: none;}

.trial_figure{
margin: 40px auto 0;}

.flex_trial_summary{
display:flex;
flex-direction: row;
justify-content: space-between;
padding: 15px;
margin: 20px auto 0;
width: 100%;
 box-sizing: border-box; 
text-align: left;
border: dashed 2px #CCC;
background: rgba(255,255,255,0.4);}

.flex_summary{
width: 50%;
box-sizing: border-box; 
padding: 0 2em;}

.flex_price{
width: 50%;
text-align: right;
margin: 0;}

.trial_summary_ttl{
font-size: 1.6rem;
font-weight: bold;}   

.trial_price1{
color: #CD090B;
margin: 0.1em 0.1em 0;
font-size: 5rem;
line-height: 1;
font-weight: bold;}  
 
.trial_price2{
color: #CD090B;
font-size: 1.6rem;
line-height: 1;
font-weight: bold;}   

.trial_notes{
margin-top: 15px;
font-size: 1.6rem;
font-weight: bold;}   

/*セクション08*/

.sec08{
margin: 0;
padding: 45px 88px 0;
border: 1px solid #ccc;
border-bottom: none;
background: #FFF;}

.sec08 h3{
clear: both;
margin: 0;
font-size: 2.8rem;
text-align: center;
line-height: 2em;
letter-spacing: 0;
border-bottom: solid 2px #D1171C;}

/*窓口案内*/

.infomation{
margin 0;
padding: 0;
margin-bottom: 1.2em;}

.infomation h4{
position: relative;
font-size: 2rem;
font-weight: bold; 
background-color: #EFDCE0;
border-radius: 6px;
padding: .5em 1.5em;
margin: 30px 60px;}

h4::after{
position: absolute;
top: 100%;
left: 40px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #EFDCE0;}

.consultation_dial{
color: #0377a9; 
font-size: 40px;
font-weight: bold; 
background : url(../img/footer_dial.png) left center / 41px auto no-repeat scroll padding-box border-box transparent;
margin: 5px  30px 0 60px; 
padding-top: 3px;
padding-left: 52px;}

.servicehours{
clear: both;
font-size: 1.6rem;
font-weight: bold;}   

.sec08 .notes{
clear: both;
font-size: 1.4rem;
line-height: 1.8;
padding: 1.5em 10px;
margin: 0 ; 
border-top: solid 1px #CCC;} 


/*フッター -----------*/

footer{	
clear: both;
margin: 0;	
font-size: 1.4rem;
background: #F1F3F0;
border-top: 1px solid #ccc;}

.footer_inner{
max-width: 1000px;
margin: 0 auto;	
padding: 0;}

.address{
position: relative;
display: block;
padding: 0 !important ;
margin: 20px 10px 10px 80px;}

.address::before {
	content: url(../img/logo_LP-footer.png);
	position: absolute;
	top: -10px;
	left: -60px; }

.link{
text-align: right;	
margin: 10px 15px 10px 0;}

footer a{
margin-left: 1.5em;
color: #8d8d8d;
text-decoration: none;}

footer a:hover{
color: #c0c0c0;}

/*コピーライト -------------------------*/

#copyright{
clear: both;
margin-bottom: 0;
text-align: center;	
font-size: 1rem;
line-height: 1.2;
padding: 5px 0;
color: #fff;
background: #C3292E;
letter-spacing: 0.05em;}


/*PAGE TOP（↑）設定----------------------*/

@keyframes scroll{
0%{opacity: 0;} 
100%{opacity: 1;} 
}

body .nav-fix-pos-pagetop a{
display: none;
}

body.is-fixed-pagetop .nav-fix-pos-pagetop a{
display: block;
text-decoration: none;
text-align: center;z-index: 100;
position: fixed;	
width: 60px;
line-height: 60px;
border-radius: 50%;
bottom: 30px;
right: 3%;
background: #000;
background: rgba(0,0,0,0.6);
color: #fff;
border: 1px solid #fff;
animation-name: scroll;
animation-duration: 1S;
animation-fill-mode: forwards;}

body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover{
background: #999;} 

.pc{
display: block !important;} 

.mb{
display: none !important;} 

.tb{
display: none !important;} 

.pc_mb{
display: block !important;} 

.mb_sp{
display: none !important;} 

.sp{
display: none !important;} 


