@charset "utf-8";

/* init **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
*{ margin:0; padding:0; box-sizing:border-box; }
select option{ padding:0 5px; }
body{ color:#06324c; background:#fff; font:16px helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif; line-height:1.8; text-align:center; min-width:1200px; _display: inline;_zoom:1; }
h1 , h2 , h3 , h4 , h5 , h6 , address{ font-style:normal; font-weight:normal; font-size:100%; }
ul{ list-style-type:none; }
img{ border:0; vertical-align:bottom; }

table{ border-spacing:0; border:0; }
table th{ text-align:left; vertical-align:middle; font-weight:normal; }
table td{ word-break:break-all; }

.floatR{ float:right; }
.floatL{ float:left; }

.alignL{ text-align:left; }
.alignR{ text-align:right; }
.alignC{ text-align:center; }

.rel{ position:relative; }
.abs{ position:absolute; }


/* clearfix **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.cf:after{ content:" "; display:block; clear:both; }


/* link **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
a:link , a:visited{ color:#0000ff; text-decoration:underline; }
a:hover{ color:#ff8000; text-decoration:underline; }


/* font decoration **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* size */
.fontSS{ font-size:12px; }
.fontS{ font-size:14px; }
.fontL{ font-size:20px; }
.fontLL{ font-size:24px; }
.fontLLL{ font-size:28px; }

/* color */
.txt-red{ color:#d2032b; font-weight:bold; }
.txt-blue{ color:#53bfca; font-weight:bold; }
.txt-yellow{ color:#f0d407; font-weight:bold; }
.txt-orange{ color:#e4b600; font-weight:bold; }
.txt-green{ color:#55d4b9; font-weight:bold; }

/*indent */
.idt , ul.assist li , .system li{ padding-left:1.0em; text-indent:-1.0em; }
.idt-half{ padding-left:0.5em; text-indent:-0.5em; }

/*other */
.str{ font-weight:bold; }
.str-reset{ font-weight:normal; }

.underline{ text-decoration:underline; }
.underline-double{ border-bottom:double medium; }

.waveline{ background:url(../images/wave_line.png) repeat-x left bottom; padding-bottom:7px; }
.waveline-red{ background:url(../images/wave_line_red.png) repeat-x left bottom; padding-bottom:7px; }
.waveline-blue{ background:url(../images/wave_line_blue.png) repeat-x left bottom; padding-bottom:7px; }

.marker{background-color:#fff600; }

.br-add{ display: none; }


/* space **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* padding */
.spt0{ padding-top:0px !important; }
.spt5{ padding-top:5px !important; }
.spt10{ padding-top:10px !important; }
.spt15{ padding-top:15px !important; }
.spt20{ padding-top:20px !important; }
.spt25{ padding-top:25px !important; }
.spt30{ padding-top:30px !important; }
.spt35{ padding-top:35px !important; }

.spb0{ padding-bottom:0px !important; }
.spb5{ padding-bottom:5px !important; }
.spb10{ padding-bottom:10px !important; }
.spb15{ padding-bottom:15px !important; }
.spb20{ padding-bottom:20px !important; }
.spb25{ padding-bottom:25px !important; }
.spb30{ padding-bottom:30px !important; }
.spb35{ padding-bottom:35px !important; }

/* margin */
.smt0{ margin-top:0px !important; }
.smt5{ margin-top:5px !important; }
.smt10{ margin-top:10px !important; }
.smt15{ margin-top:15px !important; }
.smt20{ margin-top:20px !important; }
.smt25{ margin-top:25px !important; }
.smt30{ margin-top:30px !important; }
.smt35{ margin-top:35px !important; }
.smt40{ margin-top:40px !important; }
.smt45{ margin-top:45px !important; }
.smt50{ margin-top:50px !important; }
.smt-30{ margin-top:-30px !important; }
.smt-60{ margin-top:-60px !important; }

.smb0{ margin-bottom:0px !important; }
.smb5{ margin-bottom:5px !important; }
.smb10{ margin-bottom:10px !important; }
.smb15{ margin-bottom:15px !important; }
.smb20{ margin-bottom:20px !important; }
.smb25{ margin-bottom:25px !important; }
.smb30{ margin-bottom:30px !important; }
.smb35{ margin-bottom:35px !important; }
.smb40{ margin-bottom:40px !important; }
.smb45{ margin-bottom:45px !important; }
.smb50{ margin-bottom:50px !important; }
.smb-30{ margin-bottom:-40px !important; }
.smb-50{ margin-bottom:-50px !important; }

.sml0{ margin-left:0px !important; }
.sml20{ margin-left:20px !important; }
.sml30{ margin-left:30px !important; }
.sml50{ margin-left:50px !important; }

.smr0{ margin-right:0px !important; }
.smr20{ margin-right:20px !important; }
.smr30{ margin-right:30px !important; }
.smr50{ margin-right:50px !important; }

/* paragraph */
p{ padding:10px 0 }
p.lh-reset{ line-height:1.0; }

p{ font-weight: bold; }


/* original frame */
.box{ margin:0 50px; }


/* favorite decoration **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
ul.assist{ font-size:12px; padding:15px 25px 12px; line-height:1.6; border:solid 1px #cdcdcd; }


/* responsive  **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.pc-item{ display:block; }
.sp-item{ display:none; }

[class^="pic"]{ float:right; margin:0 50px 20px 20px; }
.inner [class^="pic"]{ float:right; margin:0 0 20px 20px; }

.inner{ padding:20px; background-color:#fff; }
.inner p{ margin:0 0 30px; }
.inner p:last-child{ margin:0; }


body { font-family:'Kosugi Maru', sans-serif;}


/* wrap **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.wrap{ width:1200px; margin:0 auto; text-align:left; position:relative; }

.entry img{ box-shadow:0 1px 8px rgba(0,0,0,0.2); }


/* flex **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.flex-box{ display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; width: 1160px; margin: 0 auto; justify-content: center; }


/* top **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.top{ background: linear-gradient(90deg, #b1faea 0%, #b1faea 50%, #67ccd6 50%, #67ccd6 100%); display:flex; width:100%; }
.top h1{ text-align:center;}
.top .txt1 img{ margin-right:10px; }
.top .txt1{ font-size:22pt; color:#0b3b40; font-weight:900; text-align:center; line-height:100px; margin:10px 0 -15px; }
.top .txt2{ font-size:20pt; color:#0b3b40; font-weight:900; text-align:center; line-height:150%; margin:25px 0 35px; }
.top br{ display:none; }
.triangle { margin:0 auto; overflow:hidden; position:relative; width:72px; height:40px; }
.triangle::after { content:""; position:absolute; width:48px; height:48px; background:linear-gradient(45deg, #b1faea 0%, #b1faea 50%, #67ccd6 50%, #67ccd6 100%); top:-32px;
  left:12px; transform:rotate(45deg); }


/* contents **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* h2 */
h2{ text-align:center; }
h2 .title{ position:relative; display:inline-block; font-size:26pt; font-weight:1000; margin-top:20px; }
.section1 h2 img{ position:absolute; top:-35px; left:-90px;}
.section2 h2 img{ position:absolute; top:-25px; left:-70px;}
.section3 h2 img{ position:absolute; top:-25px; left:-70px;}
.section1 h2 .kazari, .section2 h2 .kazari, .section4 h2 .kazari{ margin:10px auto; width:80px; height:6px; background:linear-gradient(90deg, #b1faea 0%, #b1faea 50%, #67ccd6 50%, #67ccd6 100%); border-radius:3px; }
.section3 h2 .kazari{ margin:10px auto; width:80px; height:6px; background:linear-gradient(90deg, #ecbc00 0%, #ecbc00 50%, #67ccd6 50%, #67ccd6 100%); border-radius:3px; }

/* section1 */
.section1{ background:#ececec; padding:65px 0 30px; }
.section1 .fig{ background: url(../images/sec1_fig_bg.png) top center no-repeat; height:965px; position:relative; }
.section1 .fig ul{ font-size:19px; list-style:none; }
.section1 .fig .orange ul li{ padding:0 0 12px 38px; line-height: 1.4em; background: url(../images/check_o.png) left 0px top -2px no-repeat; background-size: 32px auto; }
.section1 .fig .orange{ position:absolute; top:140px; left:430px; }
.section1 .fig .green ul li{ padding:0 0 12px 38px; line-height: 1.4em; background: url(../images/check_g.png) left 0px top -2px no-repeat; background-size: 32px auto; }
.section1 .fig .green{ position:absolute; top:630px; left:190px; }
.section1 .fig .blue ul li{ padding:0 0 12px 38px; line-height: 1.4em; background: url(../images/check_b.png) left 0px top -2px no-repeat; background-size: 32px auto; }
.section1 .fig .blue{ position:absolute; top:630px; left:680px; }

/* section2 */
.section2{ padding:55px 0 30px; }
.section2 .point h3 img{ position:absolute; top:-15px; left:-60px; }
.section2 .point h3{ font-size:18pt; font-weight:bold; line-height:1.4em; padding:80px 0 20px; position:relative; }
.section2 .point p{ font-size:13pt; font-weight:bold; line-height:1.4em; }
.section2 .point .txt{ float:left; margin-right:30px; }
.section2 .point .img{ float:right; margin-right:20px; }
.section2 .point .txt2{ float:right; margin-right:20px; }
.section2 .point .img2{ float:left; margin-right:30px; }
.section2 .point .txt3{ float:left; margin-right:30px; padding-left:160px; }
.section2 .point{ margin:40px auto 20px; width:940px; }

/* section3 */
.section3{ background:#ddfef7 url("../images/sec3_img.png")center top 150px no-repeat; padding:55px 0 30px; }
.section3 .flow{ text-align: center; width: 600px; margin: 0 auto; margin-top: 20px; padding-bottom: 10px; border: solid 8px #61c6d0; border-radius: 15px; background: #fff; }

.btn-s{ width: 1200px; margin: 0 auto; text-align: center;}
.btn-s img{ padding: 30px 10px; }


/* section4 */
.section4{ padding:30px 0 30px; }
.section4 .series{ width: 370px; text-align: center; background: #f7f7f7; border-radius: 10px; padding:20px; }
.section4 .series:nth-child(n+2){ margin-left: 20px; }
.section4 .series .series-sbt{ color: #53bfca; font-size: 20px; }
.section4 .series .series-sbt:before{ content: url("../images/sec4_check.png"); display: block; margin-bottom: -5px; }
.section4 .series .series-sbt:after{ content: url("../images/sec4_line.png"); display: block; margin-top: -10px; }


input[type=checkbox]:checked ~ div.changed {
    display:none;
}
input[type=checkbox]:checked ~ div.changed2 {
    display:block;
}


.btn{margin-top: 20px; margin-bottom: 50px;}
.changed{display:block; }
.changed2{display:none; }


/* footer **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.footer{ font-size:14px; background:#1a676f; padding:20px 0 18px; color:#fff; }
.footer .wrap{ box-sizing:border-box; overflow:hidden; }
.footer .txt{ float:left; padding-right:40px; }
.footer .url{ float:left; color: #fff; border: solid 1px #fff; border-radius:10px; padding:15px; margin-top: 10px; }
.footer .logo{ float:right; margin-top: 10px; }
.footer a{ color:#fff; }


/* ★★★ タブレット ★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 768px){
/* init **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
body{ min-width:100%; }


/* space **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* paragraph */
p{ margin:0 10px 30px; }

/* original frame */
.box{ margin:0; }

/* responsive **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.pc-item{ display:none; }
.sp-item{ display:block; }

[class^="pic"],.inner [class^="pic"]{ float:none; margin:0 auto 20px; }

.inner{ padding:20px; text-align:center; }
.inner p{ text-align:left; }

.fontL{ font-size:18px; }
.fontLL{ font-size:20px; }
.fontLLL{ font-size:22px; }
    
.w100 img{ width:100%; height:auto; }
.w90 img{ width:90%; height:auto; }
p img{ max-width:520px; width:100%; height:auto; }


/* wrap **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.wrap{ width:calc(100% - 20px); -webkit-width:calc(100% - 20px); margin:0 10px; }
/*↑width:calc(ウィンドウ幅 - 左右に空けたい余白の合計値);*/

    
    
/* flex **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.flex-box{ display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; width: 100%; margin: 0 auto; justify-content: center; }

    
/* top **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.top br{ display:block; }
.top .txt1{ font-size:20pt; }
.top .txt2{ font-size:18pt; }

/* contents **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.contents{ background:url(../images/contents_bg_sp.jpg); }
    
    
h2 .title{ position:relative; display:inline-block; font-size:22pt; font-weight:1000; margin-top:20px; }
.section1 h2 img, .section2 h2 img, .section3 h2 img{ display: none;}
.section1 .title:before{ content: url("../images/sec1_h2txt_sp.png"); display: block; margin-bottom:  -20px;}
.section2 .title:before{ content: url("../images/sec2_h2txt_sp.png"); display: block; margin-bottom:  -20px;}
.section3 .title:before{ content: url("../images/sec3_h2txt_sp.png"); display: block; margin-bottom:  -20px;}
	
/* section2 */
.section2{ padding:25px 0 30px; }
.section2 .point h3 img{ position:absolute; top:-15px; left:100px; }
.section2 .point h3{ text-align: center; margin: 0 auto; font-size:18pt; font-weight:bold; line-height:1.4em; padding:80px 0 20px; position:relative; }
.section2 .point p{ text-align: center; width: 80%; font-size:13pt; font-weight:bold; line-height:1.4em; margin: 0 auto; }
.section2 .point .txt , .section2 .point .img , .section2 .point .txt2 , .section2 .point .img2 , .section2 .point .txt3{ float:none; margin: 0 auto; text-align: center; padding: 0; }
.section2 .point .img img{ margin-top: 20px; width: 100%; max-width: 406px; }
.section2 .point{ margin:40px auto 20px; width: 100%; }
    
/*.section2 .list {padding:85px 10px 30px;}
.section2 .list{margin:10px 0 0px; }
.section2 .list .sbt{text-align: center;}
.section2 .btn{width:auto; text-align:center;}
.section2 .btn .btnp{float:none; margin-bottom:20px;}
.section2 .btn .btnr{float:none; }*/
    
/* section3 */
.section3{ background-image: none; padding:55px 0 30px; }
.section3 .flow{ width: 100%; margin: 0 auto; padding: 20px 20px; }
.section3 .flow p{ margin: 0 auto; }
    
    
.btn-s{ width: 100%; margin: 0 auto; }
    .btn-s img{ padding: 10px 0; }
    
/* section4 */
.section4{ padding:30px 0 30px; }
.section4 .series{ width: 370px; text-align: center; background: #f7f7f7; border-radius: 10px; padding: 10px; margin-bottom: 20px; }
.section4 .series:nth-child(n+2){ margin: 0 auto; margin-bottom: 20px; }
.section4 .series .series-sbt{ color: #53bfca; font-size: 20px; margin-bottom: -15px; }
.section4 .series .series-sbt:before{ content: url("../images/sec4_check.png"); display: block; margin-bottom: -5px; }
.section4 .series .series-sbt:after{ content: url("../images/sec4_line.png"); display: block; margin-top: -10px; }

    
/* footer **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.footer .wrap{width:auto; text-align:center;}
.footer .wrap .txt{float:none; margin-bottom:10px;}
.footer .wrap .url{ float:none; max-width: 350px; margin: 5px auto 0; }
.footer .wrap .logo{float:none; margin-top: 20px;} 


}


@media only screen and (max-width: 540px){
/* top ********** スマホサイズまで待つと小さくなり過ぎるので 540px から2分割にしている
///////////////////////////////////////////////////////////////////////////////////////////////*/
.br-reset{ display:none; }
.br-add{ display: block; }

    
/* ★★★ スマホ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 414px){ /* iPhone6Plus */
/* init **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
body{ min-width:320px; }
/*↑最小幅指定*/


/* contents **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.btn-s img{ width: 100%; padding: 10px; }
.btn img{ width: 100%; }

.footer .wrap .url{ float:none; width: 100%; margin: 5px auto 0; }
.footer .wrap .logo img{ width: 100%; } 
    

}