/*==============================================
COMMON
============================================= */
html {font-size: calc(100vw / 26);-webkit-text-size-adjust: 100%;}
#header {border-bottom: #ededed solid 1px;}
.copyRight {border-top: 1px solid #ededed;}
.pageTop {width: 40px;height: 40px;right: 10px;background-size: 40px;border-radius: 50%;}
#mainContents {font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Arial", sans-serif;color: #221815;letter-spacing: 0.10em;}
.pc {display: none;}
.x-small {display:block}


/*==============================================
HEADER
============================================= */
#header .home a {width: 224px;height: 50px;background-size: 224px auto;}
#header .headerIn .usage {margin-top: 0}
#header .headerIn .usage .btn{ width: auto!important;font-size: 1rem; line-height: 1.4;height: auto!important;padding: .5em 1em}
#header .headerIn .usage .btn:after {content: none}


/*==============================================
MAIN TITLE
============================================= */
.mainTitleWrap {padding-bottom: 1rem;}
.mainTitle-sub,.mainTitle-img,.mainTitle .clock {display: none;}
.mainTitle h1 {display: block;padding-top: 84%;background: url(../img/sp_h1.jpg) no-repeat 0 0;background-size: 100%;text-indent: -999em;font-size: 0;margin-top: 20px;}


/*==============================================
BNR
============================================= */
.bnrWrap {position: relative;margin: 3rem 0 0;padding-bottom: 1rem;background: #062432 url(../img/sp_bnr.png) no-repeat center top;background-size: contain;min-height:330px}
.bnr {display: block;}
.btnTxt {line-height: 1.4 !important;margin: 2rem 2rem 0;padding-left: 1.4rem;text-indent: -1.4rem;font-size: 1rem !important;}
.bnrWrap .btnTxt {margin: 0;padding-top: 9rem;color: #fff;text-align: center;}
.btnBox {margin: 1rem 2rem 0;}
.bnrWrap .btnBox {margin: 0;position:absolute;bottom:10px;width:90%;left:50%;transform: translateX(-50%)}
.btn {position: relative;display: block;width: 100%;height: 3.2rem;line-height: calc(3.2rem - 2px);border-radius: 30px;text-align: center;color: #fff;font-size: 1.2rem;box-sizing: border-box;font-weight: 600}
.btn + .btn {margin-top: 1rem;}
.btn, .btn:visited, .btn:hover {color: #fff;}
.btn.active {border: 1px solid #10ab1d;background-color: #17cb26;}
.btn.active:hover,a:hover .btn.active {background-color: #10ab1d;}
.btn.classic {background-color: #8f7769;border: 1px solid #756156;}
.btn::after {content: "";position: absolute;top: 0;bottom: 0;right: 2rem;width: .6rem;height: .6rem;margin: auto 0;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);}


/*==============================================
.indexWrap
============================================= */
.indexWrap {display: none;}


/*==============================================
.content 
============================================= */
.content {padding: 20px 0} 
.contentIn {margin: 30px auto 0 auto; }
/*.content h2 {width: 100%;font-size: 100%;margin: 0 auto;color:  #034a7c;position: relative;text-align: center;padding: 10px 0 20px 0;background: url(../img/bkg.jpg);background-size: cover;}
.content h2::before {font-size: 40px;color: rgba(168,204,245,1);margin-bottom: 5px}
.content h2 .txt {font-size: 1.6rem;margin: 0;line-height: 1.4;color: #fff;font-weight: 600;padding: 0 .5em;letter-spacing: 0}
*/
.content .sectionImage {width: auto;margin: 10px auto}
.content .sectionImage img {height: 150px;}
.content h3 {margin-top: 60px;font-size: 22px;text-align: left;}
.content p { line-height: 1.8em;margin: 0 auto;text-align: left;font-size: 1.2rem;}
.content p + p { margin-top: 20px;}




.contentIn {padding-left: 15px; padding-right: 15px;margin: 0}

.small {font-size: .8em;font-weight: 400}
.medium {font-size: 1em;}
.large {font-size: 1.2em;}

p.cta {font-size: 1.1em;padding: 1.5em 0}

#mainContents {width:100%;max-width: 100%}

.content {width:100%;padding:2rem 0}

.mainTitleWrap .mainTitle {padding:20px}
.mainTitleWrap .content {padding:10px 0}


.mainTitleWrap .content .cta .btnBox {width:auto}

.content h2 {margin-bottom:2rem;font-size:inherit;width:100%}
.content h2 .txt {font-size:1.8rem}
.content p {font-size:1.1rem}

.contentIn {width:90%;margin-left:auto;margin-right:auto;padding-right:0;padding-left:0;overflow-x: hidden}

#intro .contentIn .lead p {line-height:2.2}

.mainTitleWrap .content .contentIn .seminarTitle {width:100%}
.mainTitleWrap .content .contentIn .seminarTitle p {font-size:1.15rem}
#intro .contentIn .lead p {line-height:2}
.content p + p {margin-top:2.5rem}
#intro .contentIn .voice .in {width:calc(100% / 1.15);margin-left:auto;margin-right:auto}
#intro .contentIn .voice .in h3 {padding-left:1rem;padding-right:1rem}
img.floatRight {float:none;margin:0;width:100%;display:block;margin-bottom: 30px}

#BENEFIT {border-top: 0;margin-bottom: 0;padding-bottom: 0;padding-top:2em}
#BENEFIT h3:first-child {margin-top: 0;}
#BENEFIT .contentIn h2 .small {font-size: 18px}
#BENEFIT .block h3 {margin-top:20px}
#BENEFIT h3 .txt {font-size:1.6rem;text-align:center;margin-left:auto;margin-right:auto}
.benefit2 {padding-top:0}

#BENEFIT h3 {display:block}
#BENEFIT h3 .no {text-align:center;margin:0}
#BENEFIT h3 .txt {line-height:1.4}
.content.benefit2 h2 {margin-bottom:0!important}