html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height:1.8}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {display:block}
ul, ol, li {list-style:none}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}
ins {background-color:#ff9;color:#000;text-decoration:none}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom:1px dotted #000;cursor:help}
table {border-collapse:collapse;border-spacing:0}
hr {display:block;height:1px;border:0;border-top:2px solid #cccccc;margin:4em 0;padding:0}
input, select {vertical-align:middle}

/* responsive view */
.spView{display:none;}
@media screen and (max-width: 800px) { 
.pcView{display:none;}
.spView{display:block;}
}
/* other */
.clearfix:after{content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden}
.clearfix{display: inline-block;} 
* html .clearfix{height: 1%;}
.clearfix{display:block;}

/*========================================
BASIC
=======================================*/
html{-webkit-text-size-adjust:100%}
body{margin: 0;overflow-x: hidden;height: 100vh;width: 100%;color:#0B0B0B;font-family: 'Noto Sans JP', sans-serif;line-height:1.8;font-size: 18px;}
figure {line-height: 0}
img{line-height: 1;width: 100%;height: auto;}
h1,h2,h3,dt,th {font-weight: 600}
@media screen and (max-width: 800px) {
body{;font-size: 16px;}
}

p {margin-bottom: 2%}
.Hv {transition: .4s;}
.Hv:hover {transition: .4s; opacity: 0.7;}




/*========================================
MENU
=======================================*/

/**SCROLLBAR STYLE FOR IE**/
body {scrollbar-base-color: #138a72; scrollbar-3dlight-color: #fff; scrollbar-highlight-color: #1abc9c; scrollbar-track-color: #fff; scrollbar-arrow-color: #1abc9c; scrollbar-shadow-color: #1abc9c; scrollbar-dark-shadow-color: #1abc9c; -ms-overflow-style: -ms-autohiding-scrollbar;}
.icon {display: inline-block; width: 5vw; height: 4vw; stroke-width: 0; stroke: currentColor; fill: currentColor;}

/*========================================
TEXT & TEXTAREA
=======================================*/
input, textarea, select {font-family:'Noto Sans JP', "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], textarea {width:100%;border:1px solid #ECE1E1;background:#FFF;margin:0 0 2%;padding:2%;border-radius:4px;box-sizing: border-box;}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus{border: 2px solid #F85E8E;outline: none;}


/*========================================
 COMMON STYLE
=======================================*/
a{color:#674F52;text-decoration:none;}
a:hover{color:#674F52;}


/* フォントカラー */
.red, .color-red {color:#FF0000;}

/* フォント位置 */
.txt-l {text-align: left;}
.txt-r {text-align: right;}
.txt-c {text-align: center !important;}
.midNote {margin-bottom: 30px;}

/* フォントサイズ */
.fs-80 {font-size:80%;}
.fs-90 {font-size:90%;}
.fs-120 {font-size:120%;}
.fs-140 {font-size:140%;}
.fs-160 {font-size:160%;}
.fs-180 {font-size:180%;}
.fs-200 {font-size:200%;}
.quoteNote {text-align: right;font-size: 8px;padding-right: 5px;}

.effect-fade {opacity : 0;transform : translate(0, 60px);transition : all 1000ms;}
.effect-fade.effect-scroll {opacity : 1;transform : translate(0, 0);}
.effect-zoom {opacity : 0.1;transform : scale(1.3,1.3);;transition : all 1000ms;}
.effect-zoom.effect-scroll {opacity : 1;transform : scale(1,1);}

/* margin */
.mt-0 {margin-top: 0!important;}
.mt-2 {margin-top: 2%!important;}
.mt-4 {margin-top: 4%!important;}
.mt-5 {margin-top: 5%!important;}
.mt-6 {margin-top: 6%!important;}
.mt-8 {margin-top: 8%!important;}
.mt-10 {margin-top: 10%!important;}

.mb-0 {margin-bottom: 0!important;}
.mb-2 {margin-bottom: 2%!important;}
.mb-4 {margin-bottom: 4%!important;}
.mb-5 {margin-bottom: 5%!important;}
.mb-6 {margin-bottom: 6%!important;}
.mb-8 {margin-bottom: 8%!important;}
.mb-10 {margin-bottom: 10%!important;}

/* フォントデコレーション */
.u-l { text-decoration:underline;}
.bold, .Bold {font-weight: 700;}
.vFrame { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 15px;}
.vFrame iframe {position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}
.vComment {margin: 0 auto 30px;}

/* section */
section{}


/*========================================
CONTENTS
=======================================*/

/*====
hero
=====*/
.hero {width: 100%;position: relative; margin: 0 auto;padding: 0;background: url("../img/bg.jpg") no-repeat 100% 0;right: 0;background-size: contain;right: 0}
.hero .Cnt {margin: 0 auto;width: 100%;max-width: 1020px;overflow: hidden;padding: 60px 0;}
.hero .Cnt h1 {width: 930px; margin: 0 auto;}
@media screen and (max-width: 800px) {
.hero .Cnt {padding: 100px 0;padding: 30px 0}
.hero .Cnt h1 {width: 98%; margin: 0 auto;}
}
@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}
section {width: 100%;position: relative;margin: 0 auto;box-sizing: border-box;}
@media screen and (max-width: 800px) {
section {max-width: 100%;width: 100%; display: block;overflow: hidden;}
}

section.bookInfo {background-color: #4fb4e8; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite;}
section.bookInfo .Cnt {width: 768px; margin: 0 auto;box-sizing: border-box;padding: 10px;display: block;position: relative;color: #fff;}
section.bookInfo .Cnt .txt {display: table;float: left;border-bottom: 1px solid #fff;border-top: 1px solid #fff;overflow: hidden;}
section.bookInfo .Cnt .txt figure {display: table-cell;vertical-align: middle;width: 139px;padding: 15px;}
section.bookInfo .Cnt .txt .tx {display: table-cell;font-size: 24px; font-weight: 700;vertical-align: middle;color: #fff;}
section.bookInfo .Cnt .book {width: 159px;position: absolute;bottom: 15px;right: 15px;}
@media screen and (max-width: 800px) {
section.bookInfo {overflow:visible;}
section.bookInfo .Cnt {width: 100%;}
}

section.limited {width: 100%;background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite;}
section.limited .Cnt {width: 768px; margin: 0 auto;box-sizing: border-box;padding: 20px;display: block;position: relative;}
section.limited .Cnt .box {width: 100%;display: table; margin: 0 auto; padding: 15px 0;}
section.limited .Cnt .box .txt {display: table-cell;vertical-align: middle;color: #fff;font-weight: 700;font-size: 24px;box-sizing: border-box;text-align: right;border-bottom: 1px solid #fff;border-top: 1px solid #fff;}
section.limited .Cnt .box figure {display: table-cell;vertical-align: middle; width: 38%;box-sizing: border-box;padding-right: 20px;}
@media screen and (max-width: 800px) {
section.limited .Cnt {width: 100%;padding: 15px 20px;}
section.limited .Cnt .box {display: table;width: 100%;}
section.limited .Cnt .box .txt {font-size: 14px;line-height: 1.4;}
section.limited .Cnt .box figure {width: 130px;box-sizing: border-box;padding-right: 20px;}
}

section.formSec {width: 100%;}
section.formSec .tie {background:#f9b616;padding: 15px;line-height: 1.6;width: 100%;box-sizing: border-box;}
section.formSec .tie h2 {text-align: center;color: #fff;font-size:26px;}
section.formSec .inputBox {background:#e4f6f3;}
section.formSec .inputBox .Cnt {width: 470px; margin: 0 auto; padding: 60px 0;}
section.formSec .inputBox .Cnt input[type="text"] {background: #fff;border-radius: 4px; padding: 15px;border: 1px solid #f7f7f7;margin-bottom: 15px;box-sizing: border-box;height: 50px;}
section.formSec .btn.app {text-align: center;font-size: 24px; font-weight: 700; background:#00aa98 url("../img/icon-arrow.png") 96% 50% no-repeat;width: 100%;border-radius: 30px;color: #fff;padding: 8px 0;border: none;}
@media screen and (max-width: 800px) {
section.formSec .tie h2 {font-size:22px;}
section.formSec .inputBox .Cnt {width: 94%;padding: 40px 0;}
section.formSec .btn.app {font-size: 20px;background-size: 26px auto;}
}

section.mediaSec {width: 100%;background: #fff;}
section.mediaSec .Cnt {width: 768px;margin: 0 auto;padding: 50px 0 25px}
section.mediaSec .Cnt h2 {text-align: center;font-weight: 700;font-size: 36px;color:#3cb0e6;margin-bottom: 15px;}
section.mediaSec .Cnt figure {margin: 0 auto 25px;}
@media screen and (max-width: 800px) {
section.mediaSec .Cnt {width: 94%;padding: 50px 0}
section.mediaSec .Cnt h2 {font-size: 22px;}
}

section.ytSec {width: 100%;background: #f9b616;}
section.ytSec .Cnt {width: 768px;margin: 0 auto;padding: 15px 0}
section.ytSec .Cnt h2 {text-align: center;font-weight: 700;font-size: 22px;color:#fff;margin-bottom: 15px;}
section.ytSec .Cnt figure {margin: 0 auto;}
@media screen and (max-width: 800px) {
section.ytSec .Cnt {width: 94%;padding: 15px 0}
section.ytSec .Cnt h2 {font-size: 16px;}
}

h2.commonTit {position: relative; padding: 1.5rem 2% 1rem; text-align: center;font-size: 26px;margin-bottom: 30px}
h2.commonTit:before { position: absolute; bottom: -5px; left: calc(50% - 30px); width: 60px; height: 4px; content: ''; border-radius: 3px; background: #f9b616;}
h2.commonTit span {display: block;text-align: center;font-size: 70%;}
@media screen and (max-width: 800px) {
h2.commonTit {padding: 1.5rem 1% 1rem; font-size: 22px;margin-bottom: 30px}
}


section.recommendSec {background: #fff;width: 100%;padding: 30px 0}
section.recommendSec .Cnt {max-width: 1024px; min-width: 800px;margin: 0 auto;padding: 15px 15px;box-sizing: border-box;}
section.recommendSec .Cnt ul {overflow: hidden}
section.recommendSec .Cnt ul li{width: 100%;border: solid 4px #5BB1D0; box-sizing: border-box;padding: 25px;background: #fff;border-radius: 6px;margin-bottom: 25px;display: table;}
section.recommendSec .Cnt ul li .heading {display: table-cell;margin-bottom: 15px;padding-bottom: 15px;width: 40%;vertical-align: top;font-size: 14px;}
section.recommendSec .Cnt ul li .heading .photo {width: 200px; margin: 0 auto 15px;}
section.recommendSec .Cnt ul li .heading .photo figure {box-sizing: border-box;}
section.recommendSec .Cnt ul li .heading .name {font-size: 14px;box-sizing: border-box;padding: 0 0 0 10px;line-height: 1.4;font-weight: 700}
section.recommendSec .Cnt ul li .heading .name span {font-size: 22px;padding-right: 10px}
section.recommendSec .Cnt ul li .txt {display: table-cell;vertical-align: top;box-sizing: border-box;padding-left: 20px;border-left: 1px solid #5BB1D0;}
@media screen and (max-width: 800px) {
section.recommendSec .Cnt {width: 100%;min-width: 100%;}
section.recommendSec .Cnt ul li{width: 100%;padding: 20px;display: block;}
section.recommendSec .Cnt ul li .heading {display: table;margin-bottom: 15px;padding-bottom: 15px;border-bottom: 1px solid #5BB1D0;width: 100%}
section.recommendSec .Cnt ul li .heading .photo {display: table-cell;vertical-align: middle;width: 110px;}
section.recommendSec .Cnt ul li .heading .photo figure {overflow: hidden;}
section.recommendSec .Cnt ul li .heading .name {display: table-cell;vertical-align: middle;font-size: 14px;box-sizing: border-box;padding: 0 0 0 10px;}
section.recommendSec .Cnt ul li .txt {display: block;border-left:none;padding: 0}
}

section.voiceSec {background: #f7f7f7;width: 100%;padding: 30px 0}
section.voiceSec .Cnt {max-width: 1024px; min-width: 800px;margin: 0 auto;padding: 15px 15px;box-sizing: border-box;}
section.voiceSec .Cnt ul {overflow: hidden}
section.voiceSec .Cnt ul li{ float: left;width: 48%;border: solid 2px #ffc72e; box-sizing: border-box;padding: 15px;font-size: 14px;background: #fff;border-radius: 6px;margin-bottom: 25px;}
section.voiceSec .Cnt ul li:nth-child(2n) {float: right;}
section.voiceSec .Cnt ul li .heading {display: table;margin-bottom: 15px;padding-bottom: 15px;border-bottom: 1px solid #ffc72e;width: 100%}
section.voiceSec .Cnt ul li .heading .photo {display: table-cell;vertical-align: middle;width: 100px;height: 100px;}
section.voiceSec .Cnt ul li .heading .photo figure {overflow: hidden;border-radius: 50%;}
section.voiceSec .Cnt ul li .heading .name {display: table-cell;vertical-align: middle;font-size: 16px;font-weight: 700; box-sizing: border-box;padding: 0 0 0 10px;}
section.voiceSec .Cnt ul li .heading .name span {font-size: 22px;display: block;}
section.voiceSec .Cnt ul li h3 {font-size: 130%;position: relative; padding: 0 0 1.0rem;margin-bottom: 15px;line-height: 1.6}
section.voiceSec .Cnt ul li h3:after {position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; content: ''; background-image: -webkit-repeating-linear-gradient(135deg, #ffc72e, #ffc72e 1px, transparent 2px, transparent 5px); background-image: repeating-linear-gradient(-45deg, #ffc72e, #ffc72e 1px, transparent 2px, transparent 5px); background-size: 7px 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
@media screen and (max-width: 800px) {
section.voiceSec .Cnt {width: 100%;max-width: 100%;min-width: 100%;}
section.voiceSec .Cnt ul li{width: 100%;padding: 20px;}
section.voiceSec .Cnt ul li .heading .photo {width: 80px;height: 80px;}
}

section.normalSec {width: 100%;padding: 30px 0}
section.normalSec.white {background: #fff}
section.normalSec.gray {background: #f7f7f7}
section.normalSec .Cnt {width: 768px;margin: 0 auto;padding: 15px 0;box-sizing: border-box;}
section.normalSec .Cnt h2 {font-size: 36px;}
section.normalSec .Cnt figure {margin-bottom: 20px;}
section.normalSec .Cnt .txtBox {padding: 0 4%;} 
section.normalSec .box {margin: 4% auto;border: 4px solid #ABABAB;background: #fff;box-sizing: border-box;padding: 20px;border-radius: 4px;}
section.normalSec .Cnt h3 {border-bottom: double 5px #FFC778;font-size: 140%;margin-bottom: 15px;margin-top: 30px;}
section.normalSec .box h3 {text-align: center;font-size: 120%;margin-bottom: 15px;}
section.normalSec .box ul {overflow: hidden;}
section.normalSec .box ul li{position: relative;font-weight: bold;padding-left: 24px;}
section.normalSec .box ul li:before {position: absolute;content: '';background: url("../img/icon-check.svg") no-repeat;width: 20px; height: 20px;left: 0;top: 8px;}
section.normalSec .proPhoto {float: right;margin: 0 0 40px 40px;width: 300px; height: 300px;}
@media screen and (max-width: 800px) {
section.normalSec .Cnt {width: 100%;}
section.normalSec .proPhoto {float: none;margin: 0 auto 15px;width: 200px; height: auto;}
section.normalSec .Cnt h2 {font-size: 22px;}
}

.prv {display: table;margin-bottom: 15px;}
.prv dt {width: 5%;display: table-cell;vertical-align: top;}
.prv dd {width: 95%;display: table-cell;vertical-align: top;}
.prv dd ul {padding-left: 30px;overflow: hidden;}
.prv dd ul li {list-style: decimal;font-size: 90%}

.keySec dl {overflow: hidden; padding-bottom: 5px; border-bottom: 1px dotted #BFBFBF; margin-bottom: 15px; font-size: 14px;}
.keySec dl dt {float: left; width: 28%; padding-right: 2%;}
.keySec dl dd {float: right; width: 70%;}
/*====
FOOTER
=====*/
footer{ width:100%; box-sizing: border-box; font-size:12px;color:#fff; overflow: hidden; background:#2485B4;}
footer .Cnt{box-sizing: border-box;padding: 0 10px; max-width: 600px;margin:20px auto; overflow:hidden;text-align: center;}
footer .copyright {text-align:center; margin:0 auto; color:#fff;padding-left: 10px;font-size: 14px;}
footer a {color:#fff;}
footer a:hover {color:#fff; text-decoration:underline;}
@media screen and (max-width: 800px) { 
footer .Cnt {max-width: 96%;min-width: 96%;}
}