/* common
---------------------------------------- */
.clr:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clr { display: inline-block;}

/* Hides from IE-mac \*/
* html .clr { height: 1%;}
.clr { display: block;}



.baseBtn2 a { position: relative; z-index: 1000; display: block; width: 110px; color: var(--baseBtn2); text-align: center; font-weight: bold; text-decoration: none !important; transition: all 0.3s; border: 2px solid var(--baseBtn2); background: var(--baseBtn2);}
.baseBtn2 a,
.baseBtn2 a:hover { color: #fff; text-decoration: none;}
.baseBtn2 a:hover { color: var(--baseBtn2); background: var(--shiro);}
.baseBtn2 a::before { position: absolute; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 40px;}

.baseBtn2.outline a { height: 30px; padding: 75px 0 0; font-size: 14px;}
.baseBtn2.outline a::before { content: "\f1ad"; top: 30px; left: 36px;}

.baseBtn2.catalog { margin-left: -15px;}
.baseBtn2.catalog a { height: 30px; padding: 75px 0 0; font-size: 11px; letter-spacing: -0.05em;}
.baseBtn2.catalog a::before { content: "\f518"; top: 30px; left: 31px;}

.baseBtn2.contact { margin-left: -15px;}
.baseBtn2.contact a { height: 30px; padding: 75px 0 0; font-size: 14px;}
.baseBtn2.contact a::before { content: "\f0e0"; top: 30px; left: 34px;}

@media screen and (max-width: 810px/*778px*/) {
.baseBtn2 a { width: 160px; height: auto !important; padding: 10px 0 !important; font-size: 12px !important;}
.baseBtn2.catalog,
.baseBtn2.contact { margin-left: 0;}
.baseBtn2.outline a::before,
.baseBtn2.catalog a::before,
.baseBtn2.contact a::before { content: none;}
}






/*.entry-meta .author.vcard,
.entry-meta .entry-date.updated { display: none;}*/



.fancy-title-head h1.fancy-title { text-shadow: 1px 2px 2px #333;}
h2.fancy-subtitle span { text-shadow: 1px 2px 2px #333;}
@media screen and (max-width: 778px) {
.fancy-title-head h1.fancy-title { font-size: 20px !important; text-shadow: 0px 0px 0px #333;}
}



.cw { color: #fff !important;}
.cr { color: #f33 !important;}
.cb { color: #000 !important;}
.cb3 { color: #333 !important;}
.cg { color: #00b19e !important;}
.f13 { font-size: 13px !important;}
.f16 { font-size: 19px !important;}
.f19 { font-size: 19px !important;}
.f24 { font-size: 24px !important;}
.fwb { font-weight: bold !important;}
.lh15 { line-height: 1.5 !important;}
.lh18 { line-height: 1.8 !important;}
.lh2 { line-height: 2.0 !important;}
.ts1 { text-shadow: 2px 2px 2px #000;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;}
.ts1.tt1 { text-transform: none/*capitalize*/;}
@media screen and (max-width: 767px) {
.ts1 { font-size: 14px !important; line-height: 1.6 !important;}
.ts2 { text-shadow: 1px 2px 2px #333;}
.gBg .upb_row_bg { background: #36b48e !important;}
}
.nbld h2,
.nbld h3,
.nbld h4 { font-weight: normal;}
.img240 { height: 240px;}
@media screen and (max-width: 778px) {
.img240 { height: 100%;}
}
.infos h3 { text-shadow: 1px 1px 3px #333;}



.clCo { margin-bottom: 50px;}
.clCo dl { margin-bottom: 10px; padding: 10px 10px 5px; background: #f4f4f4;}
.clCo dt { padding-bottom: 5px; color: #000; font-weight: normal;}


.clCo p { margin: 0 !important; padding: 0 !important;}
.clCo span { margin: 0;}
.clCo .mt { margin-top: 5px !important;}
.clCo label { margin-right: 2em;}
.clCo .bDd span span span { display: block;}
.clCo .bDd span span span span { display: inline;}
.clCo .soubiDd span span span { width: 32%;}


/*.clCo input[type=text],
.clCo input[type=email],
.clCo textarea { width: 100%; background: #fff; border: none;}*/
.clCo input[type=text].p-postal-code { width: 25%;}
.clCo input[type=text].w15,
.clCo select.w15,
.clCo select.w15 option { width: 15%;}
.clCo input[type=text].w2,
.clCo select.w2 { width: 15%;}
.clCo input[type=text].w3,
.clCo select.w3,
.clCo select.p-region { width: 30%;}
.clCo input[type=tel].w5,
.clCo input[type=text].w5 { width: 50%;}
.clCo input[type=tel].w6,
.clCo input[type=text].w6 { width: 60%;}
.clCo input[type=checkbox],
.clCo input[type=radio] { background: #fff;}
.clCo input,
.clCo option,
.clCo textarea { padding: 5px 8px;}
.clCo input:focus,
.clCo select:focus,
.clCo textarea:focus { background: #ffc;}
.fTxt { margin-top: 10px; color: #f30; font-size: 14px;}
.fTxt.mt { margin-top: 20px;}

.clCo .hissuIcon { margin-left: 5px; padding: 1px 5px 2px; color: #fff; font-size: 11px; font-weight: bold; text-align: center; vertical-align: middle; letter-spacing: 0.1em;
/*-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;*/
/*box-shadow: 0 2px 4px 0 #ccc;*/ background: #f33;}
.clCo .niniIcon { margin-left: 5px; padding: 1px 5px 2px; color: #fff; font-size: 11px; font-weight: bold; text-align: center; vertical-align: middle; letter-spacing: 0.1em; background: #00f;}


@media screen and (max-width: 767px) {
.clCo input[type=text].w15,
.clCo select.w15,
.clCo select.w15 option { width: 80%;}
.clCo input[type=text].w3,
.clCo select.w3,
.clCo select.p-region { width: 40%;}

.clCo input[type=text].p-postal-code { width: 50%;}
.clCo .soubiDd span span span { width: 49%;}
.clCo .hissuIcon { padding: 1px 5px; font-size: 10px;}
}


:root {
--cp: #5ec9b9;
--stepen1: #fccb00;
--stepen2: #ccc;
--stepbg1: #0068b2;
--orange: #f5782b;
}
.bd1 { position: relative; padding: 50px 15px 5px; border: 1px solid var(--cp); background: #fafafa;}
.bd1 h4 { position: absolute; top: -50px; left: -15px; color: #fff; background: var(--cp); padding: 10px 15px !important;}

.bd2 { padding: 1.2rem 1.2rem; color: #fff; background: #4390ed; border-bottom: solid 6px #ccc; border-radius: 10px;}

.bd3 { position: relative; border: 2px solid var(--orange); border-radius: 30px;}
.bd3 h4 { position: absolute; top: -1.6rem; left: calc(50% - 5.2em) ; width: fit-content; margin: 0 auto !important; padding: 0.5rem 0.8rem !important; color: #fff; background: var(--orange); border-radius: 5px; border: 2px solid #fff; box-shadow: 0px 0px 0px 5px var(--orange);}
.bd3 h4 a,
.bd3 h4 a:hover{ color: #fff;}

.bd4 { z-index: 0; position: relative; padding: 1.2rem 1.0rem; border: 8px solid var(--cp); letter-spacing: 0.1em; background: #f1fbfd;}
.bd4::before { z-index: 1; content: ''; position: absolute; top: -8px; left: -8px; width: 8px; height: 8px; background: var(--orange);}

.bd5 { position: relative; padding: 4.5rem 1rem 1rem; border: solid 2px #fd7e00; background: #ffe9d8;}
.bd5 h3 { position: absolute; display: inline-block; top: -2px; left: -2px; padding: 0.8rem 0.8rem; /*height: 3rem; line-height: 3rem;*/ color: #fff; font-weight: bold; background: #fd7e00;}
.bd5 strong { color: #fd7e00;}
.bd5 .b { font-weight: bold;}
@media screen and (max-width: 767px) {
.bd4 { padding: 1.0rem 0.7rem; font-size: 13px;}
.bd5 { padding-top: 6.5rem;}
}


.h4db1 { position: relative; background: #d0ecff; line-height: 1.4; padding: 0.5rem 0.5rem 0.5rem 1.0rem; border-radius: 0 5px 5px 5px;}
.h4db1::after { position: absolute; font-family: "Font Awesome 5 Free"; font-weight: bold; background: #EB3228; color: #fff; left: 0px; bottom: 100%; border-radius: 5px 5px 0 0; padding: 3px 7px 1px; font-size: 1.0rem; line-height: 1; letter-spacing: 0.05em;}
.h4db1.p1::after { content: "\f00c　POINT 1";}
.h4db1.p2::after { content: "\f00c　POINT 2";}


.h5db1 { position: relative; margin-left: 25px; padding: 5px 15px 5px; color: #fff; font-size: 20px; border-radius: 0 10px 10px 0; background: var(--stepbg1);}
.h5db1::before {
/*font-family: "Font Awesome 5 Free"; content: "\f041";*/
display: inline-block; position: absolute; left: -1.35em; top: 50%; width: 40px; height: 40px; text-align: center; color: var(--stepbg1); font-weight: 900; line-height: 2.0em; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; /*box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);*/ border-bottom: solid 3px #ccc; background: var(--stepen1);}
.h5db1.no1::before { content: "１";}
.h5db1.no2::before { content: "２";}
.h5db1.no3::before { content: "３";}


.secchiritsu { color: #f00; font-size: 28px !important; font-weighgt: bold;}


.lbt h3 { padding: 10px 0 10px 10px !important; background: #f4f4f4;}
.lbt.lbt1 h3 { border-left: 4px solid #f00;}
.lbt.lbt2 h3 { border-left: 4px solid #ccc;}
.lbt.lbt3 h3 { border-left: 4px solid #70ad47;}
.lbt.lbt4 h3 { border-left: 4px solid #00b0f0;}
.lbt.c1 h3 { border-left: 4px solid #4cadc9;}
.lbt.c2 h3 { border-left: 4px solid #f90;}


.lbt .bbc1 { background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #A1D5E3 0%) repeat scroll 0 0;}
.lbt .bbc2 { background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFC670 0%) repeat scroll 0 0;}
.pinkline { background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}
.yellowline { background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}
.blueline { background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;}



.schoolMeritDl dt { color: #288cba; font-size: 19px; /*font-weight: bold;*/ text-decoration: underline;}
.schoolMeritDl dd { margin-bottom: 1rem;}



.hayamiTb { overflow: hidden; width: 100%; border: 2px solid #999; border-spacing: 0; border-collapse: collapse;}
.hayamiTb img { height: 35px;}
.hayamiTb th,
.hayamiTb td { padding: 5px 3px 5px !important; text-align: center !important; line-height: 1; border: 2px solid #f2f2f2;}
.hayamiTb td { font-size: 18px;}
.hayamiTb th { font-size: 12px; font-weight: bold; background: #A1D5E3;}
.hayamiTb th,
.hayamiTb td { position: relative; width: 8.33%;}
.hayamiTb .tTh { width: 16.66%;}

.hayamiTb td:hover { background: #ffff64;}
.hayamiTb td:hover::before,
.hayamiTb td:hover::after { /*ホバーした縦横セルのハイライト準備*/
position: absolute; top: 0;	left: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: #FFFFC2; /*縦横のカラー指定*/}

.hayamiTb td:hover::before { /*ホバーした横のセル全部をハイライト*/
width: 200vw; left: -100vw;}
.hayamiTb td:hover::after { /*ホバーした縦のセル全部をハイライト*/
height: 200vh; top: -100vh;}

.hayamiTb .imgTd { text-align: center;}
.hayamiTb .imgTd,
.hayamiTb .imgTd:hover,
.hayamiTb .imgTd:hover::before,
.hayamiTb .imgTd:hover::after { background: #fff;}

.hayamiTb .nTd,
.hayamiTb .nTd:hover,
.hayamiTb .nTd:hover::before,
.hayamiTb .nTd:hover::after { background: #fff;}

@media screen and (max-width: 778px) {
.hayamiTb { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; white-space: nowrap;}
.hayamiTb th,
.hayamiTb .tTd { font-size: 11px;}
}

.btnfb a { font-weight: bold;}



:root {
--shiro: #fff;
--kuro1: #555;
--baseBtn2: #058ED9;

--qa1: #F0A202;
--qa2: #FDB321;
--qa3: #F18805;
--mail1: #0088cc;
--mail2: #299AE0;
--mail3: #006394;
--point1: #6ab165;
--osusume1: #6ab165;
--chuui1: #ff675b;
--magma1: #58b9da;
}
.baseBtn { width: /*fit-content 90%*/240px; margin-bottom: 15px !important;}
.baseBtn a { position: relative; z-index: 1000; display: block; padding: 0.8rem 0rem; text-align: center; /*font-weight: bold;*/ transition: all 0.3s; border-radius: 0.3rem;}
.baseBtn a,
.baseBtn a:hover { color: #fff !important; text-decoration: none;}
.baseBtn a:hover { transform: translate(0, 5px);}
.baseBtn a::before { font-family: "Font Awesome 5 Free"; font-weight: bold; padding-right: 7px; font-size: 1.2rem;}

.baseBtn.qa a { font-size: 1.1rem; letter-spacing: .1rem; background: var(--qa1); box-shadow: 0 5px 0 var(--qa3);}
.baseBtn.qa a:hover { background: var(--qa2); box-shadow: 0 0px 0 var(--qa3);}
.baseBtn.qa a::before { content: "\f03a";}

.baseBtn.mail a { font-size: 1.0rem; background: var(--mail1); box-shadow: 0 5px 0 var(--mail3);}
.baseBtn.mail a:hover { background: var(--mail2); box-shadow: 0 0px 0 var(--mail3);}
.baseBtn.mail a::before { content: "\f0e0";}


.iconBox { width: fit-content; margin: 0 auto; position: relative; z-index: 1000; display: block; padding: .7rem 1.1rem; color: #fff; font-size: 1.0rem; text-align: center;}

.iconBox.point { background: var(--point1); border-radius: 3.0rem;}
.iconBox.point::before { content: "\f0a6"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-right: 7px; font-size: 1.1rem;}

.iconBox.osusume { padding: .9rem 1.1rem; background: var(--osusume1);}
.iconBox.chuui { padding: .9rem 1.1rem; background: var(--chuui1);}

.iconBox.option { padding: .7rem .5rem; color: var(--kuro1); font-size: .9rem; background: var(--shiro); border: 2px solid var(--kuro1); border-radius: .3rem;}
.iconBox.option.sml { font-size: .8rem; line-height: 1.3;}

.iconBox.magma { width: 94%; padding: .7rem .7rem; background: var(--magma1);}