@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;500;700;900&display=swap');

/* ------------------------------------------- CSS Information 
 Style Info:     ブラウザスタイルのリセット設定
----------------------------------------------------------- */  
html{overflow-y:scroll;} 
body,div,blockquote,pre,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,table,th,td,form,input,textarea,fieldset{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}   
img,abbr,acronym,fieldset{border:none;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
hr,legend{display:none;}
object,embed{vertical-align:top;}
li{list-style:none;}

/* ------------------------------------------- CSS Information 
 Style Info:     基本設定
----------------------------------------------------------- */
/*A Style*/  
a{text-decoration:underline;color:#666666;}
a:hover{text-decoration:underline;color:#999999;}
/*font*/
.b{font-weight:bold;}
.ul{text-decoration:underline;}
.bg{background:linear-gradient(transparent 70%, #fff799 0%);}
.big{font-size:22px;line-height:36px;}@media only screen and (max-width:750px){.big{font-size:16px;line-height:24px;}}
.small{font-size:12px;line-height:20px;}
.red{color:#fb1858;}
.text_center{text-align:center !important;}
.text_right{text-align:right;}
.pc{display:block;}
.sp{display:none;}
@media only screen and (max-width:750px){
.pc{display:none;}
.sp{display:block;}
}

/* ----------------------- CSS Information 
 Style Info: HTML/BODY
--------------------------------------- */
html,body{  
font-family:'Noto Sans JP',"メイリオ","ヒラギノ角ゴ Pro W3",Sans-Serif;
color:#333333;
font-size:18px;
line-height:0;
text-align:center;
letter-spacing:0em;
background:#ffffff;
width:100%;
height:100%;
}

/* ----------------------- CSS Information 
 Style Info: HEADER
--------------------------------------- */
header{
position:relative;
width:100%;
margin:0;
padding:0;
background:#ffffff url(../img/header_bg_pc.png) no-repeat center;
background-size:auto 100%;
box-sizing:border-box;
}
.header_wrapper{
position:relative;
display:block;
width:100%;
max-width:1000px;
margin:0 auto;
padding:0;
}
.header_wrapper:after{
content:"";
display:block;
padding-top:70%;
}
.header_text{
z-index:10;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-repeat:no-repeat;
background-position:center top;
background-size:100% auto;
animation:header_text 1s both;
opacity:0;
box-sizing:border-box;
}
.header_text.src1{background-image:url(../img/header01_pc.png);animation-delay:0.5s;}
.header_text.src2{background-image:url(../img/header02_pc.png);animation-delay:2s;}
.header_text.src3{background-image:url(../img/header03_pc.png);animation-delay:3.5s;}
@keyframes header_text{0%{opacity:0;}100%{opacity:1;}}
@media only screen and (max-width:750px){
header{
background:#f6f6f5 url(../img/header_bg_sp.png) no-repeat center;
background-size:auto 100%;
}
.header_wrapper{max-width:750px;}
.header_wrapper:after{padding-top:150%;}
.header_text{}
.header_text.src1{background-image:url(../img/header01_sp.png);animation-delay:0.5s;}
.header_text.src2{background-image:url(../img/header02_sp.png);animation-delay:2s;}
.header_text.src3{background-image:url(../img/header03_sp.png);animation-delay:3.5s;}
}

/* ----------------------- CSS Information 
 Style Info: 共通設定
--------------------------------------- */
.section{
position:relative;
width:100%;
margin:0;
padding:120px 0 120px 0;
}
.section_wrapper{
width:100%;
max-width:1000px;
margin:0 auto;
box-sizing:border-box;
}
.section_box{
position:relative;
width:100%;
margin:0 auto;
padding:0 4%;
box-sizing:border-box;
}
.section_flex{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:space-between;
align-items:stretch;
position:relative;
width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
.section_flex .textbox{
width:60%;
min-width:480px;
margin:0 auto;
padding:0 4% 0 4%;
box-sizing:border-box;
}
.section_flex .imgbox{
flex:1;
margin:0;
padding:0;
}
.section_img{display:none;}
@media only screen and (max-width:750px){
.section{padding:40px 0 40px 0;}
.section_wrapper{}
.section_box{}
.section_flex{display:block;}
.section_flex .textbox{width:100%;min-width:0;padding:0 4% 0 4%;}
.section_flex .imgbox{display:none;}
.section_img{display:block;float:right;width:30%;max-width:240px;margin:4px 0 0 15px;padding:0;}
}

/* ----------------------- CSS Information 
 Style Info: TITLE
--------------------------------------- */
.title{
position:relative;
display:block;
width:100%;
margin:0 auto 80px auto;
padding:0;
box-sizing:border-box;
}
.title_hr:after{
content:"";
position:relative;
display:block;
width:250px;
height:8px;
margin:40px auto 0 auto;
padding:0;
background:url(../img/title_hr.png) no-repeat center;
}
.title img{
display:block;
width:100%;
max-width:750px;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
@media only screen and (max-width:750px){
.title{margin:0 auto 30px auto;}
.title_hr:after{
width:125px;
height:4px;
margin:20px auto 0 auto;
background:url(../img/title_hr.png) no-repeat center;
background-size:100% auto;
}
.title img{}
}
/* -- text -- */
.text{
width:100%;
margin:0 auto;
padding:0;
font-size:17px;
line-height:30px;
text-align:justify;
box-sizing:border-box;
}
.text p{margin:0 0 30px 0;padding:0;}
.text p:last-child{margin:0;}
@media only screen and (max-width:750px){
.text{
font-size:14px;
line-height:24px;
text-align:justify;
}
.text p{margin:0 0 20px 0;}
.text p:last-child{margin:0;}
/* -- br -- */
.text br{display:none;}
.text br.sp{display:block;}
.text br.all{display:block;}
}

/* ----------------------- CSS Information 
 Style Info: RIBBON
--------------------------------------- */
.ribbon{
display:block;
position:relative;
width:100%;
height:60px;
margin:0 auto 30px auto;
text-align:center;
box-sizing:border-box;
}
.ribbon:before{
content:"";
position:absolute;
width:calc(10% - 50px);
bottom:-10px;
left:0;
z-index:5;
border:30px solid #5ab2b8;
border-left-color:transparent;
}
.ribbon:after{
content:"";
position:absolute;
width:calc(10% - 50px);
bottom:-10px;
right:0;
z-index:5;
border:30px solid #5ab2b8;
border-right-color:transparent;
}
.ribbon span{
position:relative;
display:block;
width:80%;
height:60px;
margin:0 auto;
padding:0;
font-size:20px;
line-height:59px;
text-align:center;
color:#ffffff;
background:#63c6cd;
box-sizing:border-box;
z-index:10;
}
.ribbon span:before{
content:"";
position:absolute;
top:100%;
left:0;
border:none;
border-bottom:solid 10px transparent;
border-right:solid 10px #3a99a0;
z-index:10;
}
.ribbon span:after{
content:"";
position:absolute;
top:100%;
right:0;
border:none;
border-bottom:solid 10px transparent;
border-left:solid 10px #3a99a0;
z-index:10;
}
#present .ribbon{}
#present .ribbon:before{border:30px solid #6864c2;border-left-color:transparent;}
#present .ribbon:after{border:30px solid #6864c2;border-right-color:transparent;}
#present .ribbon span{background:#8071ca;}
#present .ribbon span:before{border-right:solid 10px #4c47b9;}
#present .ribbon span:after{border-left:solid 10px #4c47b9;}
@media only screen and (max-width:750px){
.ribbon{height:40px;margin:0 auto 20px auto;}
.ribbon:before{width:calc(10% - 30px);border:20px solid #5ab2b8;border-left-color:transparent;}
.ribbon:after{width:calc(10% - 30px);border:20px solid #5ab2b8;border-right-color:transparent;}
.ribbon span{width:80%;height:40px;font-size:15px;line-height:39px;}
.ribbon span:before{}
.ribbon span:after{}
#present .ribbon{}
#present .ribbon:before{border:20px solid #6864c2;border-left-color:transparent;}
#present .ribbon:after{border:20px solid #6864c2;border-right-color:transparent;}
#present .ribbon span{background:#8071ca;}
#present .ribbon span:before{}
#present .ribbon span:after{}
}

/* ----------------------- CSS Information 
 Style Info: SECTION01
--------------------------------------- */
#section01{padding:120px 0 160px 0;background:#f6f6f5 url(../img/bg01.png) repeat center;}
#section01:after{
content:"";
position:absolute;
bottom:0;
display:block;
width:100%;
height:40px;
background:url(../img/bg_bottom.png) no-repeat center bottom;
background-size:100% 100%;
z-index:10;
}
/* 01 */
#section01-01{}
#section01-01 .imgbox{
background:url(../img/section01-01_img.png) no-repeat center;
background-size:100% auto;
}
.ul_section01-01{
display:block;
width:100%;
margin:30px 0;
}
.ul_section01-01 li{
position:relative;
display:block;
margin:0;
padding:0 0 0 17px;
font-weight:700;
}
.ul_section01-01 li:before{
content:"";
position:absolute;
top:10px;
left:0;
display:block;
width:12px;
height:12px;
border-radius:50%;
background:#63c6cd;
}
/* 02 */
#section01-02{
position:relative;
width:100%;
padding:60px 4%;
box-sizing:border-box;
}
#section01-02 img{
width:100%;
margin:40px auto 10px auto;
padding:0;
border-radius:10px;
background:#ffffff;
box-sizing:border-box;
}
#section01-02 p{
margin:0;
padding:0;
font-size:12px;
line-height:20px;
color:#999999;
text-align:right;
}
/* 03 */
#section01-03{flex-direction:row-reverse;}
#section01-03 .imgbox{
background:url(../img/section01-03_img.png) no-repeat center;
background-size:100% auto;
}
@media only screen and (max-width:750px){
#section01{padding:40px 0 60px 0;}
#section01:after{height:20px;}
#section01 .section_img{width:33%;margin:5px 0 0 10px;}
/* 01 */
#section01-01{}
#section01-01 .imgbox{}
.ul_section01-01{margin:20px 0;}
.ul_section01-01 li{}
.ul_section01-01 li:before{top:7px;}
/* 02 */
#section01-02{padding:40px 4%;}
#section01-02 img{margin:20px auto 0 auto;padding:0 8px;border-radius:8px;}
#section01-02 p{font-size:11px;line-height:16px;text-align:center;}
/* 03 */
#section01-03{}
#section01-03 .imgbox{}
}

/* ----------------------- CSS Information 
 Style Info: SECTION02
--------------------------------------- */
#section02{background:#ffffff;}
/* 01 */
#section02-01{}
#section02-01 .imgbox{
background:#ffffff url(../img/section02-01_img_pc.png) no-repeat center;
background-size:cover;
}
/* 02 */
#section02-02{
position:relative;
width:100%;
padding:120px 4% 80px 4%;
box-sizing:border-box;
}
.title_media{
position:relative;
display:block;
width:100%;
margin:0 auto 40px auto;
padding:0;
}
.title_media img{
display:block;
width:100%;
max-width:690px;
margin:0 auto;
padding:0;
}
#section02-02 .textbox{
width:100%;
padding:40px 4%;
background:#f6f6f5;
border-radius:10px;
box-sizing:border-box;
}
#section02-02 dl{
width:100%;
margin:0 auto 40px auto;
}
#section02-02 dl:last-child{margin:0 auto 0 auto;}
#section02-02 dl dt{
display:flex;
justify-content:center;
align-items:center;
margin:0 0 10px 0;
padding:0;
font-size:18px;
line-height:30px;
text-align:left;
color:#333333;
font-weight:bold;
}
#section02-02 dl dt:before{
content:"";
margin:0 10px 0 0;
border-top:2px solid #63c6cd;
flex:1;
}
#section02-02 dl dt:after{
content:"";
margin:0 0 0 10px;
border-top:2px solid #63c6cd;
flex:1;
}
#section02-02 dl dd{
margin:0;
padding:0;
}
.book_img{
width:100%;
max-width:870px;
margin:0 auto;
}
.tv_img{
display:block;
width:100%;
max-width:920px;
margin:0 auto;
}
.media_img{
width:100%;
max-width:920px;
margin:0 auto;
}
/* 03 */
#section02-03{
position:relative;
width:100%;
background:#ffffff;
}
@media only screen and (max-width:750px){
#section02{}
#section02 .section_flex{}
/* 01 */
#section02-01{}
#section02-01:before{display:none;}
#section02-01:after{display:none;}
#section02-01 .imgbox{}
/* 02 */
#section02-02{padding:40px 4% 20px 4%;}
.title_media{margin:0 auto 30px auto;}
.title_media img{}
#section02-02 .textbox{padding:30px 4%;border-radius:8px;}
#section02-02 dl{margin:20px auto;}
#section02-02 dl dt{font-size:16px;line-height:20px;}
#section02-02 dl dt:before{}
#section02-02 dl dt:after{}
#section02-02 dl dd{}
.book_img{}
.tv_img{}
.media_img{}
/* 03 */
#section02-03{}
}

/* ----------------------- CSS Information 
 Style Info: SECTION03
--------------------------------------- */
#section03{
padding:160px 0;
background:#f6f6f5 url(../img/bg_pc.png) repeat-y center top;
}
#section03:before{
content:"";
position:absolute;
top:0;
display:block;
width:100%;
height:40px;
background:url(../img/bg_top.png) no-repeat center top;
background-size:100% 100%;
z-index:10;
}
#section03:after{
content:"";
position:absolute;
bottom:0;
display:block;
width:100%;
height:40px;
background:url(../img/bg_bottom.png) no-repeat center bottom;
background-size:100% 100%;
z-index:10;
}
/* 01 */
#section03-01 .text{text-align:center;}
#section03-01 .text p{margin:0;}
/* 02 */
#section03-02{}
.worry{
display:flex;
align-items:center;
width:690px;
margin:40px auto;
background:#ffffff;
}
.worry h3{
position:relative;
display:block;
width:180px;
margin:0 auto 0 -10px;
padding: 0 10px 0 10px;  
height:40px;
font-size:16px;
line-height:39px;
text-align:center;
color:#ffffff;
background:#63c6cd;
box-sizing:border-box;
}
.worry h3:before{
content:"";
position:absolute;
top:100%;
left:0;
border:none;
border-bottom:solid 10px transparent;
border-right:solid 10px #5ab2b8;
}
.worry h3:after{
content:"";
position:absolute;
width:0px;
height:0px;
top:0;
right:0;
border-width:20px 10px 20px 0px;
border-color:transparent #ffffff transparent transparent;
border-style:solid;
z-index:1;
}
.worry ul{
display:block;
flex:1;
padding:30px;
}
.worry ul li{
position:relative;
margin:0 0 10px 0;
padding:0 0 0 20px;
font-size:16px;
line-height:30px;
text-align:left;
}
.worry ul li:last-child{margin:0;}
.worry ul li:before{
content:"";
position:absolute;
width:5px;
height:10px;
top:8px;
left:5px;
transform:rotate(50deg);
border-right:3px solid #ffffff;
border-bottom:3px solid #ffffff;
z-index:10;
}
.worry ul li:after{
content:"";
position:absolute;
top:7px;
left:0;
width:18px;
height:18px;
background:#63c6cd;
}
/* 03 */
#section03-03 .text{text-align:center;}
@media only screen and (max-width:750px){
#section03{padding:60px 0;background:#f6f6f5 url(../img/bg_sp.png) repeat-y center top;background-size:100% auto;}
#section03:before{height:20px;}
#section03:after{height:20px;}
/* 01 */
#section03-01 .text{text-align:justify;}
#section03-01 .text p{margin:0;}
/* 02 */
#section03-02{}
.worry{display:block;width:100%;margin:20px auto;padding:10px 0 0 0;}
.worry h3{
position:relative;
display:block;
width:180px;
margin:0 auto 0 -10px;
height:30px;font-size:14px;line-height:29px;}
.worry h3:before{}
.worry h3:after{border-width:15px 10px 15px 0px;}
.worry ul{display:block;padding:20px;}
.worry ul li{margin:0 0 10px 0;padding:0 0 0 15px;font-size:14px;line-height:24px;text-align:justify;}
.worry ul li:last-child{}
.worry ul li:before{width:4px;height:8px;top:7px;left:4px;border-right:2px solid #ffffff;border-bottom:2px solid #ffffff;}
.worry ul li:after{top:6px;width:14px;height:14px;}
/* 03 */
#section03-03 .text{text-align:justify;}
}

/* ----------------------- CSS Information 
 Style Info: MERIT
--------------------------------------- */
#merit{background:#ffffff;padding:160px 0 160px 0;}
.merit_box{
position:relative;
width:100%;
margin:0 auto 120px auto;
padding:0;
box-sizing:border-box;
}
.merit_box:last-child{margin:0 auto;}
.merit_num{
display:flex;
justify-content:center;
align-items:center;
}
.merit_num:after{
content:"";
flex:1;
border-top:1px solid #8071ca;
}
.merit_num span{
font-family:'Noto Serif JP',"メイリオ","ヒラギノ角ゴ Pro W3",Serif;
position:relative;
display:block;
width:160px;
height:40px;
margin:0 auto 0 20px;
padding:10px 0;
font-size:18px;
line-height:19px;
text-align:center;
font-weight:500;
color:#ffffff;
background:#8071ca;
box-sizing:border-box;
}
.merit_num span:before{
content:"";
position:absolute;
display:block;
width:0;
height:0;
top:0;
left:-40px;
border-top:20px solid transparent;
border-right:20px solid #8071ca;
border-left:20px solid transparent;
border-bottom:20px solid transparent;
}
.merit_num span:after{
content:"";
position:absolute;
display:block;
width:0;
height:0;
top:0;
right:-40px;
border-top:20px solid transparent;
border-left:20px solid #8071ca;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
}
.merit_box h3{
font-family:'Noto Serif JP',"メイリオ","ヒラギノ角ゴ Pro W3",Serif;
display:block;
width:100%;
margin:0 auto 40px auto;
padding:10px 0 30px 0;
font-size:22px;
line-height:50px;
font-weight:500;
text-align:left;
color:#000000;
border-bottom:1px solid #8071ca;
box-sizing:border-box;
}
.merit_box h3 span.big{font-size:30px;font-weight:900;}
.merit_img{
display:block;
float:right;
width:33%;
margin:4px 0 0 20px;
border-radius:10px;
}
.ul_merit{
display:block;
margin:40px 0;
padding:0;
}
.ul_merit li{
position:relative;
display:block;
margin:0 0 20px 0;
padding:0 0 0 10px;
font-weight:700;
}
.ul_merit li:before{
content:"";
position:absolute;
top:10%;
left:0;
display:block;
width:4px;
height:80%;
border-radius:2px;
background:#63c6cd;
}
.dl_merit{
display:block;
margin:40px 0 0 0;
padding:0;
}
.dl_merit dt{
display:flex;
justify-content:center;
align-items:center;
margin:0 0 30px 0;
padding:0;
font-size:18px;
line-height:30px;
text-align:left;
color:#8071ca;
font-weight:bold;
}
.dl_merit dt:after{
content:"";
margin:0 0 0 10px;
border-top:2px dotted #8071ca;
flex:1;
}
.dl_merit dd{
margin:0;
padding:0;
}
@media only screen and (max-width:750px){
#merit{padding:60px 0 60px 0;}
.merit_box{margin:0 auto 60px auto;}
.merit_num span{width:120px;height:30px;margin:0px auto 0 15px;padding:5px 0;font-size:14px;line-height:19px;}
.merit_num span:before{left:-30px;border-top:15px solid transparent;border-right:15px solid #8071ca;border-left:15px solid transparent;border-bottom:15px solid transparent;}
.merit_num span:after{right:-30px;border-top:15px solid transparent;border-left:15px solid #8071ca;border-right:15px solid transparent;border-bottom:15px solid transparent;}
.merit_box h3{margin:0 auto 30px auto;padding:15px 0 25px 0;font-size:16px;line-height:26px;}
.merit_box h3 span.big{font-size:18px;line-height:30px;}
.merit_img{width:40%;margin:4px 0 0 15px;border-radius:8px;}
.ul_merit{margin:30px 0;}
.ul_merit li{margin:0 0 10px 0;}
.ul_merit li:before{height:84%;}
.dl_merit{margin:30px 0 0 0;}
.dl_merit dt{margin:0 0 20px 0;font-size:14px;line-height:24px;}
.dl_merit dt:after{}
.dl_merit dd{}
}

/* ----------------------- CSS Information 
 Style Info: VOICE
--------------------------------------- */
#voice{
padding:160px 0 160px 0;
background:#f6f6f5 url(../img/bg_pc.png) repeat-y center top;
}
#voice:before{
content:"";
position:absolute;
top:0;
display:block;
width:100%;
height:40px;
background:url(../img/bg_top.png) no-repeat center top;
background-size:100% 100%;
z-index:10;
}
#voice:after{
content:"";
position:absolute;
bottom:0;
display:block;
width:100%;
height:40px;
background:url(../img/bg_bottom.png) no-repeat center bottom;
background-size:100% 100%;
z-index:10;
}
#voice .section_wrapper{max-width:750px;}
.video{
position:relative;
width:100%;
margin:0 auto 80px auto;
padding:0 4%;
box-sizing:border-box;
}
.video_box{
position:relative;
width:100%;
max-width:690px;
max-height:388px;
margin:auto; 
padding-top:56.25%;
background:#666666;
}
.video_box iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
max-width:690px;
max-height:388px;
box-sizing:border-box;
}
.reason_img{
display:block;
width:100%;
max-width:750px;
margin:80px auto 0 auto;
padding:0;
}
@media only screen and (max-width:750px){
#voice{background:#f6f6f5 url(../img/bg_sp.png) repeat-y center top;background-size:100% auto;padding:60px 0 60px 0;}
#voice:before{height:20px;}
#voice:after{height:20px;}
.video{margin:0 auto 40px auto;}
.video_box{}
.video_box iframe{}
.reason_img{margin:40px auto 0 auto;}
}

/* ----------------------- CSS Information 
 Style Info: CONTENTS
--------------------------------------- */
#contents{}
.contents_box{
position:relative;
width:100%;
margin:0 auto 120px auto;
padding:0;
box-sizing:border-box;
}
.contents_num{
font-family:'Noto Serif JP',"メイリオ","ヒラギノ角ゴ Pro W3",Serif;
position:relative;
display:block;
width:160px;
height:40px;
margin:-60px auto 20px auto;
padding:10px 0;
font-size:18px;
line-height:19px;
text-align:center;
font-weight:500;
color:#ffffff;
background:#63c6cd;
box-sizing:border-box;
}
.contents_num:before{
content:"";
position:absolute;
display:block;
width:0;
height:0;
top:0;
left:-40px;
border-top:20px solid transparent;
border-right:20px solid #63c6cd;
border-left:20px solid transparent;
border-bottom:20px solid transparent;
}
.contents_num:after{
content:"";
position:absolute;
display:block;
width:0;
height:0;
top:0;
right:-40px;
border-top:20px solid transparent;
border-left:20px solid #63c6cd;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
}
.contents_box h3{
font-family:'Noto Serif JP',"メイリオ","ヒラギノ角ゴ Pro W3",Serif;
display:block;
width:100%;
margin:0 auto 60px auto;
padding:40px 0 40px 0;
font-size:30px;
line-height:40px;
font-weight:900;
text-align:center;
color:#000000;
background:#f6f6f5;
border:1px solid #5ab2b8;
}
.contents_img{display:block;float:right;width:33%;margin:4px 0 0 30px;border-radius:10px;}
.ul_contents{
display:block;
margin:40px 30px 40px 0;
padding:30px;
border:1px solid #dddddd;
border-radius:10px;
}
.ul_contents li{
margin:0 0 10px 0;
padding:0;
font-weight:700;
}
.ul_contents li.li_border{
position:relative;
padding:0 0 0 10px;
}
.ul_contents li.li_border:before{
content:"";
position:absolute;
top:10%;
left:0;
display:block;
width:4px;
height:80%;
border-radius:2px;
background:#63c6cd;
}
.ul_contents li:last-child{margin:0;}
.ul_contents li span.num{
display:inline-block;
margin:0 10px 0 0;
width:60px;
text-align:center;
color:#ffffff;
font-weight:500;
background:#63c6cd;
}
@media only screen and (max-width:750px){
#contents{}
.contents_box{margin:0 auto 60px auto;}
.contents_num{width:120px;height:30px;margin:-35px auto 10px auto;padding:5px 0;font-size:14px;line-height:19px;}
.contents_num:before{left:-30px;border-top:15px solid transparent;border-right:15px solid #63c6cd;border-left:15px solid transparent;border-bottom:15px solid transparent;}
.contents_num:after{right:-30px;border-top:15px solid transparent;border-left:15px solid #63c6cd;border-right:15px solid transparent;border-bottom:15px solid transparent;}
.contents_box h3{margin:0 auto 30px auto;padding:20px 0 25px 0;font-size:20px;line-height:30px;}
.contents_img{width:40%;margin:4px 0 0 15px;border-radius:8px;}
.ul_contents{margin:30px 15px 30px 0;padding:30px 15px;}
.ul_contents li{display:flex;align-items:flex-start;margin:0 0 20px 0;}
.ul_contents li span.num{width:50px;}
.ul_contents li.li_border{margin:0 0 10px 0;}
.ul_contents li.li_border:last-child{margin:0;}
}

/* ----------------------- CSS Information 
 Style Info: PRESENT
--------------------------------------- */
#present{background:#ffeda7 url(../img/present_bg.png) repeat center top;padding:160px 0;}
#present:before{
content:"";
position:absolute;
top:0;
display:block;
width:100%;
height:40px;
background:url(../img/bg_top.png) no-repeat center top;
background-size:100% 100%;
z-index:10;
}
#present:after{
content:"";
position:absolute;
bottom:0;
display:block;
width:100%;
height:40px;
background:url(../img/bg_bottom.png) no-repeat center bottom;
background-size:100% 100%;
z-index:10;
}
#present .text_intro{
text-align:center;
font-weight:500;
width:100%;
max-width:690px;
margin:0 auto;
}
.present_box{
position:relative;
width:100%;
margin:120px auto 0 auto;
padding:0;
border-radius:10px;
box-sizing:border-box;
}
.present_num{
display:block;
position:absolute;
top:-30px;
left:0;
right:0;
width:320px;
height:40px;
margin:0 auto 30px auto;
text-align:center;
box-sizing:border-box;
}
.present_num:before{
content:"";
position:absolute;
width:10px;
bottom:-10px;
left:0;
z-index:5;
border:20px solid #e50947;
border-left-color:transparent;
}
.present_num:after{
content:"";
position:absolute;
width:10px;
bottom:-10px;
right:0;
z-index:5;
border:20px solid #e50947;
border-right-color:transparent;
}
.present_num span{
font-family:'Noto Serif JP',"メイリオ","ヒラギノ角ゴ Pro W3",Serif;
position:relative;
display:block;
width:240px;
height:40px;
margin:0 auto;
padding:0;
font-size:18px;
line-height:39px;
text-align:center;
color:#ffffff;
font-weight:500;
background:#fb1858;
box-sizing:border-box;
z-index:10;
}
.present_num span:before{
content:"";
position:absolute;
top:100%;
left:0;
border:none;
border-bottom:solid 10px transparent;
border-right:solid 10px #cb053d;
z-index:10;
}
.present_num span:after{
content:"";
position:absolute;
top:100%;
right:0;
border:none;
border-bottom:solid 10px transparent;
border-left:solid 10px #cb053d;
z-index:10;
}
.present_box h3{
font-family:'Noto Serif JP',"メイリオ","ヒラギノ角ゴ Pro W3",Serif;
display:block;
width:100%;
margin:0 auto 40px auto;
padding:40px 0 40px 0;
font-size:30px;
line-height:40px;
font-weight:900;
text-align:center;
color:#ffffff;
border-radius:10px;
background:rgba(0,0,0,0.5);
}
.present_img{display:block;float:right;width:33%;margin:4px 0 0 30px;border-radius:10px;}
@media only screen and (max-width:750px){
#present{padding:60px 0;}
#present:before{height:20px;}
#present:after{height:20px;}
#present .text_intro{text-align:justify;}
.present_box{margin:80px auto 0 auto;border-radius:8px;}
.present_num{top:-25px;width:240px;height:30px;margin:0 auto 20px auto;}
.present_num:before{border:15px solid #e50947;border-left-color:transparent;}
.present_num:after{border:15px solid #e50947;border-right-color:transparent;}
.present_num span{width:180px;height:30px;font-size:14px;line-height:29px;}
.present_num span:before{}
.present_num span:after{}
.present_box h3{margin:0 auto 30px auto;padding:30px 0 30px 0;font-size:20px;line-height:30px;border-radius:8px;}
.present_img{width:40%;margin:4px 0 0 15px;border-radius:8px;}
}

/* ----------------------- CSS Information 
 Style Info: PRICE
--------------------------------------- */
#price{background:#ffffff;}
#price .section_flex{flex-direction:row-reverse;}
#price01{}
.price_img{
display:block;
float:right;
margin:5px 0 0 10px;
width:33%;
max-width:300px;
}
.ul_price{
display:block;
width:100%;
max-width:690px;
margin:40px auto 40px 0;
padding:0;
}
.ul_price li{
position:relative;
display:block;
margin:0 0 20px 0;
padding:0 0 0 10px;
font-weight:700;
box-sizing:border-box;
}
.ul_price li:before{
content:"";
position:absolute;
top:10%;
left:0;
display:block;
width:4px;
height:80%;
border-radius:2px;
background:#63c6cd;
}
@media only screen and (max-width:750px){
#price{}
#price01{}
.ul_price{margin:30px auto 30px 0;}
.ul_price li{}
.ul_price li:before{height:84%;}
}

/* ----------------------- CSS Information 
 Style Info: FAQ
--------------------------------------- */
#faq{}
#faq input[type=checkbox]{display:none;}
#faq label{
position:relative;
display:block;
width:100%;
max-width:920px;
margin:0 auto;
padding:20px 40px 20px 70px;
font-size:16px;
line-height:30px;
text-align:justify;
color:#333333;
border-radius:10px;
cursor:pointer;
text-transform:uppercase;
box-sizing:border-box;
background-color:#efeff7;
background-image:url(../img/faq_q.png);
background-size:30px 30px;
background-repeat:no-repeat;
background-position:20px 20px;
}
#faq label:after{
content:"＋";
position:absolute;
display:block;
top:50%;
margin-top:-10px;
right:10px;
width:20px;
height:20px;
font-size:18px;
line-height:19px;
color:#6864c2;
}
#faq input[type=checkbox]:checked + label:after{content:"－";}
#faq label:hover{background-color:#f6f6f5;}
#faq input[type=checkbox]:checked + label{background-color:#efeff7;border-radius:10px 10px 0 0;}
.faq_answer{
position:relative;
margin:0 auto 30px auto;
padding:0 20px 0 70px;
width:100%;
max-width:920px;
height:0;
font-size:16px;
line-height:30px;
text-align:justify;
transition:1s;
box-sizing:border-box;
background-color:#f6f6f5;
background-image:url(../img/faq_a.png);
background-size:30px 30px;
background-repeat:no-repeat;
background-position:20px 20px;
border-radius:0 0 10px 10px;
overflow:hidden;
opacity:0;
}
.faq_answer p{margin:0;padding:0;}
.faq_answer:last-child{margin:0 auto 0 auto;}
#faq input[type=checkbox]:checked + label + .faq_answer{
padding:20px 20px 20px 70px;
height:auto;
opacity:1;
}
@media only screen and (max-width:750px){
#faq{}
#faq label{
padding:10px 26px 10px 40px;
font-size:14px;
line-height:20px;
border-radius:6px;
background-size:20px 20px;
background-position:10px 10px;
}
#faq label:after{
margin-top:-8px;
right:5px;
width:16px;
height:16px;
font-size:16px;
line-height:16px;
}
#faq input[type=checkbox]:checked + label:after{}
#faq input[type=checkbox]:checked + label{border-radius:6px 6px 0 0;}
.faq_answer{
margin:0 auto 15px auto;
padding:0 10px 0 40px;
font-size:14px;
line-height:24px;
background-size:20px 20px;
background-position:10px 10px;
border-radius:0 0 6px 6px;
}
.faq_answer br{display:none;}
#faq input[type=checkbox]:checked + label + .faq_answer{padding:8px 10px 20px 40px;}
}

/* ----------------------- CSS Information 
 Style Info: PS
--------------------------------------- */
#ps{
padding:160px 0 120px 0;
background:#f6f6f9 url(../img/ps_bg_pc.png) no-repeat center top;
background-size:100% auto;
}
#ps:before{
content:"";
position:absolute;
top:0;
display:block;
width:100%;
height:40px;
background:url(../img/bg_top.png) no-repeat center top;
background-size:100% 100%;
z-index:10;
}
#ps .title{max-width:1000px;padding:0 4%;}
#ps .title img{margin:0 auto 0 0;max-width:690px;padding:0;}
#ps .textbox{
padding:60px 4%;
background:rgba(255,255,255,0.75);
box-sizing:border-box;
}
#ps .text{
font-family:'Noto Serif JP',"メイリオ","ヒラギノ角ゴ Pro W3",Serif;
line-height:40px;
background:url(../img/ps_text_pc.png) repeat top left;
}
#ps .text p,#ps .text ul{margin:0 0 40px 0;}
.sign{
display:block;
width:auto;
height:80px;
margin:0 0 0 auto;
padding:0;
}
@media only screen and (max-width:750px){
#ps{
background:#f6f6f9 url(../img/ps_bg_sp.png) no-repeat center top;
background-size:100% auto;
padding:60px 0 40px 0;
}
#ps:before{height:20px;}
#ps .textbox{padding:40px 4%;}
#ps .text{line-height:30px;background:url(../img/ps_text_sp.png) repeat top left;
}
#ps .text p,#ps .text ul{margin:0 0 30px 0;}
.sign{height:50px;}
}

/* ----------------------- CSS Information 
 Style Info: CTA
--------------------------------------- */
.cta{
padding:80px 0 80px 0;
background:#f6f6f5 url(../img/cta_bg_pc.png) no-repeat center top;
background-size:auto 100%;
}
.cta_img{
width:100%;
max-width:750px;
margin:0 auto;
padding:0;
}
.cta .section_wrapper{max-width:750px;}
.payment{
width:100%;
margin:0 auto 0 auto;
padding:0;
text-align:center;
color:#333333;
box-sizing:border-box;
}
.payment dt{
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 10px auto;
font-size:16px;
line-height:30px;
color:#3a99a0;
font-weight:500;
}
.payment dt:before,.payment dt:after{
content:"";
height:1px;
background:#63c6cd;
flex:1;
}
.payment dt:before{margin-right:10px;}
.payment dt:after{margin-left:10px;}
.payment dd{
margin:0;
padding:0 0 20px 0;
font-size:16px;
line-height:30px;
}
.payment_img{
display:block;
width:auto;
height:40px;
margin:0 auto 10px auto;
}
.btn_cta{
position:relative;
display:block;
width:100%;
max-width:600px;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
.btn_cta a{
position:relative;
display:block;
width:100%;
max-width:600px;
margin:0 auto;
padding:0;
background:#ffffff;
overflow:hidden;
border-radius:8px;
box-shadow:2px 2px 4px 0px rgba(0,0,0,0.5);
box-sizing:border-box;
}
.btn_cta a img{width:100%;}
.btn_cta a img:hover{opacity:0.5;}
@media only screen and (max-width:750px){
.cta{padding:40px 0 40px 0;background:#f6f6f5 url(../img/cta_bg_sp.png) no-repeat center top;background-size:100% auto;}
.cta_img{}
.payment{}
.payment dt{font-size:14px;line-height:24px;}
.payment dt:before,.payment dt:after{}
.payment dt:before{}
.payment dt:after{}
.payment dd{font-size:14px;line-height:24px;text-align:justify;}
.payment_img{width:100%;max-width:690px;height:auto;margin:0 auto 10px auto;}
.btn_cta{}
.btn_cta a{}
.btn_cta a img{}
.btn_cta a img:hover{}
}

/* ----------------------- CSS Information 
 Style Info: FOOTER
--------------------------------------- */
footer{
margin:0;
padding:40px 0 40px 0;
width:100%;
color:#333333;
background:#ffffff;
}
footer a{color:#333333;text-decoration:none;}
footer a:hover{color:#333333;text-decoration:underline;}
#nav_footer{
display:block;
width:100%;
max-width:750px;
margin:0 auto;
}
#nav_footer ul{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
align-items:flex-start;
width:100%;
text-align:center;
list-style-type:none;
}
#nav_footer ul li{
display:block;
font-size:12px;
line-height:20px;
margin:0;
padding:0 20px;
border-right:1px solid #63c6cd;
}
#nav_footer ul li:last-child{border-right:none;}
footer small{
display:block;
margin:20px 0 0 0;
padding:0;
text-align:center;
font-size:12px;
line-height:20px;
}
@media only screen and (max-width:750px){
footer{}
#nav_footer{}
#nav_footer ul{flex-direction:column;}
#nav_footer ul li{width:100%;margin:0 0 20px 0;padding:0;border-right:none;}
#nav_footer ul li:last-child{border-right:none;}
footer small{margin:0;}
.sp_no{display:none;}
}

/* ----------------------- CSS Information 
 Style Info: TOPBAR
--------------------------------------- */
#topbar{
display:block;
width:100%;
background:#ffffff;
box-shadow:0 0 4px 0px rgba(0,0,0,0.5);
box-sizing:border-box;
}
@media only screen and (max-width:750px){}

/* スライド下のページャーの設定 */
.sp-buttons{padding-top:10px;}
.sp-button{width:10px;height:10px;border:none;border-radius:50%; margin:0 5px; background:#cccccc;}
.sp-selected-button{background:#63c6cd; }
.sp-image{border:1px solid #cccccc;}