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

/*==============================================
COMMON
============================================= */
* {margin: 0;padding: 0;}
html {font-size: calc(100vw / 32);-webkit-text-size-adjust: 100%;}
body {font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS UI Gothic", Helvetica, Arial, sans-serif;font-size: small;text-align: center;height: 100%;color: #333;}
h1, h2, h3, h4, h5, h6, dl, dt, dd, p, li, textarea {line-height: 1;font-size: 100%;font-weight: normal;}
img {border: none;font-size: 0;vertical-align: bottom;}
ul, ol, li, dl, dt, dd {list-style: outside none none;}
table {border-collapse: collapse;}
a, a:visited, a:hover {color: #000;text-decoration: none;}
img {max-width:100%}


/*==============================================
HEADER
============================================= */
#header {width: 100%;height: 70px;background: #fff;box-sizing: border-box;}
#header .logo {display: table;float: left;height: 57px;text-align: left;}
#header .logo img {height: 20px;vertical-align: middle;}
#header .home {display: table-cell;vertical-align: middle;}
#header .home a {display: block;width: 320px;height: 70px;background: url(../img/logo.png) no-repeat 0 0;text-indent: -999em;font-size: 0;background-size: 320px auto;}
#header .headerIn {display: flex;align-items: center;justify-content: space-between;} 

/*==============================================
FOOTER
============================================= */
#footer {padding: 15px 10px;background-color: #012232;}
#footer .in {margin: 0 auto;}
#footer .in p {line-height: 1.6;color: #fff;text-align: center}


/*==============================================
TO TOP
============================================= */
.pageTop {display: none;position: fixed;bottom: 20px;right: 20px;background: rgba(0, 0, 0, 0.20) url(../img/totop.png) no-repeat 0 0;width: 58px;height: 58px;z-index: 100;}
.pageTop:hover {opacity: 0.7;}

@media (max-width: 768px) {
	#header {padding: 0 10px;}
	#header {height: 50px;}
	#header .logo {height: 47px;}
	#header .category {display: none;}
	#header .usage {margin-top: 9px;}
	#header .usage .pr {line-height: 30px;height: 30px;}
	#header .usage .guide {margin-left: 10px;}
	#header .usage .guide a {width: 30px;height: 30px;padding: 0;text-indent: -999em;}
	#header .usage .guide a::before {top: 6px;left: 8px;text-indent: 0;}
	#header .usage .maker {line-height: 30px;height: 30px;margin-top: 0;font-size: 10px;}
	#header .usage .maker+.pr {margin-top: 6px;font-size: 10px;}

	.copyRight {line-height: 1.4;margin-top: 10px;padding: 10px 10px;text-align: center;}
	.corporateLink+p {float: none;}
	.copyRightIn {width: auto;}
	.pageTop {width: 40px;height: 40px;right: 10px;background-size: 40px;}
	.floatL, .floatR {width: 100%;}
}


/*==============================================
CONTENT
============================================= */
.small {font-size: .7em;font-weight: 600;}
.medium {font-size: 1.4em;font-weight: 600;}
.large {font-size: 1.6em;font-weight: 600;}
.underline {border-bottom: solid 1px #000;}

a.form {color: #276895;text-decoration: underline;font-weight: 600;}

.center {text-align: center!important}


.content h2 {width: 920px;margin: 0 auto 80px auto;text-align: left;color:  #222;position: relative;font-size: 26px;text-align: center;}
.content h2::before {content: attr(data-en);display: block;color: rgba(20,142,179,.25);font-size: 60px;font-style: italic;text-transform: uppercase;font-weight:  700;font-family: 'Noto Serif JP', serif;}
.content h2 .txt {display: block;line-height: 1.5;font-size: 38px;font-weight: 700;}
.content .sectionImage img {height: 200px}
.content h3 {margin-top: 60px;text-align: left;}

/* BENEFIT */
#BENEFIT { background: linear-gradient(180deg, rgba(253, 253, 253, 1) 0%, rgba(254, 254, 254, 1) 50%, rgba(255, 255, 255, 1) 100%); border-top: solid 1px #eee; }
#BENEFIT h3 {font-weight: 600;padding-bottom: .25em;display:flex;align-items: center;}
#BENEFIT h3 .no {font-family: 'Noto Serif JP', serif;font-weight:700;font-style:italic;font-size: 2em;margin-right: 20px;color:#034d7c}
#BENEFIT h3 .txt {font-size: 32px;color:#034d7c}
#BENEFIT h3+p {margin-top: 20px!important}

#APPLY {margin-top: 0}
#APPLY h2::before {margin-bottom: 20px}
#APPLY .contentIn {padding-top: 60px;}
#APPLY h3 { font-weight: 600; padding-bottom: .75em; display:flex;align-items: center;}
#APPLY h3 .no {font-family: 'Noto Serif JP', serif;font-weight: 700;font-style: italic;font-size: 2.2em;margin-right: 20px;color: rgba(20,142,179,.5);}
#APPLY h3 .txt {font-size: 26px;color:#034a7c}
#APPLY h3+p {margin-top: 10px}

p.cta {text-align: center;font-size: 1.65em;font-weight: 700;padding: 1em 0;background: #0082c8;color: #fff;margin-top: 1em}

.usage .btn {border-radius: 6px;width: 180px;font-size: 16px;border: none;}
.usage .btn:after {content: none}


strong, .underline {font-size:1.25em;font-weight:700}
.underline {border-bottom: solid 1px}
.bkg {font-size:1.15em;font-weight:700;background:#fff100}



.content h2 {margin-bottom:2em}
.content .clearfix {clear:both}


.mainTitleWrap {background:url(../img/mainVisual.jpg)}
.mainTitleWrap .logo {padding: 40px 0 10px 0}
.mainTitleWrap .mainTitle {padding:20px 0 0;margin:20px auto 0;text-align:center}
.mainTitleWrap .mainTitle img {margin:0 auto}
.mainTitleWrap .content {padding:40px 0}	
.mainTitleWrap .content .contentIn p {text-align:center;color:#fff}	
.mainTitleWrap .content .contentIn .seminarTitle {margin:20px auto;width:500px;border-top:solid 2px #fff;border-bottom: solid 2px #fff;padding:20px 0 30px 0;text-align:center}
.mainTitleWrap .content .contentIn .seminarTitle p {text-align:center;color:#fff;background:#ff0000;display:block;font-size:20px;margin-bottom:20px;font-weight:700;line-height:1.8}
.mainTitleWrap .content .cta .btnBox {width:100%;padding-top:0;margin-top:0}

#intro .contentIn h2 .txt .small {line-height:1.4;display:block;margin-bottom:20px;font-size:.65em}
#intro .contentIn .lead p {line-height:2.4}

#intro .contentIn .voice {display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:30px;padding-top:30px}
#intro .contentIn .voice .in {width: calc(100% / 3.15);text-align:center;margin-bottom:40px;padding-bottom:10px;border-bottom: solid 1px #ccc;background:#f7f7f7;}
#intro .contentIn .voice .in img {max-width:200px}	
#intro .contentIn .voice .in h3 {text-align:center;line-height:1.4;font-weight:700;margin-top:10px;font-size:17px}	
#intro .contentIn .voice .in p {text-align:center;font-size:15px;margin-top:10px}	

#section2 {background:#fafafa}

#BENEFIT .block {margin-bottom:2em;padding-bottom:2em;border-bottom: solid 1px #333}
#BENEFIT .block h3 {line-height:1.6;}

#NOT {background:#f7f7f7}

.benefit2 {border-top:0}
.benefit2 .block {margin-bottom:2em;padding-bottom:4em;border-bottom:solid 2px #0572b7}
.benefit2 h3 {line-height:1.6}

#zoom {background:url(../img/mainVisual.jpg);backgrond-position-y:bottom;color:#fff}
#zoom h2 {color:#fff}
img.floatRight {width:350px;float:right;margin:0 0 30px 20px}

.x-small {display:none}