/* 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;}




.bs1 { border-radius: 5px !important; box-shadow: 2px 2px 4px 0 #ccc;}
.bs2 { box-shadow: 2px 2px 4px 0 #ccc;}
.bs3 { box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);}
.bs4 { margin-right: 5px; border: 1px solid var(--midori3); box-shadow: 5px 5px var(--midori3);}
.bs4 h4::before { font-family: "Font Awesome 5 Free"; margin-right: 7px; font-size: 1.5rem;}
.bs4.hour h4::before { content: "\f017";}
.bs4.day h4::before { content: "\f073";}
.bs4.pack h4::before { content: "\f77c";}

.bs5 { margin-right: 5px; box-shadow: 20px 20px 10px var(--cream2);}
.imgr { border-radius: 25px;}
.imgr1 img { border-radius: 25px;}
.imgr3 img { border-radius: 10px 20px 30px 40px / 5px 10px 50px 100px;}
.imgr2 img { border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1) !important;}





:root {
--white: #fff;
--gray1: #ccc;
--cc1: #3b469b/*#6967AB*/;
--cc2: #FFA400;
--cc3: #84B082;

--pink1: #F09E93;
--pink2: #f6c4bd;

--blue1: #eaf7fb;
--blue2: #EBF6FF;

--phone1: #FFA400;
--phone2: #84B082;
--map1: #5AAA95;
--menu1: #FF6B6B;
}


.ab { padding: 2rem; border-top: solid 5px var(--cc1); background: var(--cc3); box-shadow: 3px 1px 4px rgb(0 0 0 / .2);}
.ftrly { margin-bottom: 30px; text-align: center;}


.bd1 { position: relative; margin-bottom: 48px; border: 2px solid var(--pink1);}
.bd1 dt { width: fit-content; margin: -1.1em 0 0 1.2em; padding: .3em 1.0em .4em; color: #fff; font-size: 18px; background: var(--pink1);}
.bd1 dd { padding: 1.5em 2em 2em;}
.bd1::before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 50px; width: 2px; background-color: var(--pink1);}
.bd1.bn::before { height: 0; width: 0;}

.bd2 { width: fit-content; margin: 0 auto; padding: 1rem 1.5rem 1rem; background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);}




.h4db2 h4 { position: relative; text-align: center;}
.h4db2 h4::before { content: ""; position: absolute; top: -18px; left: 50%; width: 180px; height: 70px; border-radius: 50%; border: 5px solid var(--orange1); border-left-color: transparent; border-right-color: transparent; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
@media screen and (max-width: 778px) {
.h4db2 h4::before { height: 62px;}
}





.tb { width: 100%; border: 3px double var(--gray1) !important;}
.tb th,
.tb td { padding: 10px 15px !important; border: 1px solid var(--gray1) !important; background: #fff;}
.tb th { width: 25%; text-align: center !important; background: var(--cream2) !important;}
.tb td { width: 75%;}
/*.tb th:nth-of-type(2) { width: 44% !important;}*/
@media screen and (max-width: 778px) {
/*.tb4 { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; white-space: nowrap;}*/
.tb th { width: 22%; padding: 10px 3px !important; font-size: 11px !important; line-height: 1.5;}
.tb td { width: 78%; padding: 10px 6px !important; font-size: 11px !important; line-height: 1.5;}
}


.filter-categories a { font-size: 15px !important; line-height: 1.5 !important;}


.lyt { margin-left: 10px; color: #333/*#60AC35#6cc23b*/; font-size: 12px !important; font-weight: bold;}
.lyt span { margin-left: 0.2em;}


.clCo ol,
.clCo ol li {list-style: none;}
.clCo li { float: left; line-height: 1; background: #fff;}
.clCo ol span { display: block; padding-bottom: 5px; text-align: center; font-size: 12px;}



.fancy-title-head h1.fancy-title { 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;}
}


.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;}
.ts2 { text-shadow: 1px 2px 2px #333;}
.tb th,
.tb td { font-size: 12px !important; line-height: 1.5 !important;}
}



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


.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 .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;}

/*.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 select.w2 option { width: 15%;}
.clCo input[type=text].w3,
.clCo select.w3,
.clCo select.p-region { width: 30%;}
.clCo select.w4 { width: 40%;}
.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;}
@media screen and (max-width: 767px) {
.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;}
}



.ht1 { text-align: center;}
.ht1 span { font-weight: bold;}
.ht1 span:nth-of-type(1) { color: #0074c2; font-size: 15px !important; letter-spacing: 0.05em !important;}
.ht1 span:nth-of-type(2) { color: #44AF69; font-size: 16px !important; letter-spacing: -0.03em !important;}

.ht2 { text-align: center;}
.ht2 span { font-weight: bold;}
.ht2 span:nth-of-type(1) { color: var(--cc1); font-size: 15px !important; letter-spacing: 0.05em !important;}
.ht2 span:nth-of-type(2) { color: var(--cc1); font-size: 15px !important; letter-spacing: -0.02em !important;}



.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;}








.h5db1 { position: relative; margin-left: 25px; padding: 5px 15px 7px; color: #474747; font-size: 20px; border-radius: 0 10px 10px 0; background: var(--blue3);}
.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: #fff; font-weight: 900; line-height: 1.8em; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29); border-bottom: solid 2px var(--blue1); background: var(--blue2);}
.h5db1.no1::before { content: "１";}
.h5db1.no2::before { content: "２";}
.h5db1.no3::before { content: "３";}

/*.h4db1 { position: relative; border: 1px solid #333;}
.h4db1::after { content: ''; position: absolute; top: 5px; left: 5px; z-index: -1; width: calc(100% + 1px) !important; height: calc(100% + 1px) !important; background: red !important;}*/


.enUl { list-style: none; padding: 0; font-size: 1.6em; color: #333;}
.enUl li { display: flex; align-items: center; gap: 20px; margin-bottom: 20px;}
.enUl span { display: inline-block; width: 50px; height: 50px; color: #fff; font-weight: bold; font-size: 1.5em; border-radius: 50%; text-align: center; line-height: 50px;}
.enUl .en1 { background: #e57373;}
.enUl .en2 { background: #e5a573;}
.enUl .en3 { background: #e5c173;}





.telBtn1 { width: fit-content; padding: 1.0rem 2.2rem 1.0rem 1.0rem; border-radius: 25px; background: linear-gradient(to right, var(--phone1), var(--map1)); transition: all 0.3s;}
.telBtn1 span { display: block; margin-left: 2.8rem; color: var(--cc1); font-weight: bold;}
.telBtn1 a { padding-left: 15px; color: var(--cc1) !important; font-size: 1.4rem; font-weight: bold; line-height: 1.0;}
.telBtn1 a::before { font-family: "Font Awesome 5 Free"; content: "\f095"; padding-right: 7px;}
.telBtn1:hover { background: linear-gradient(to right, var(--map1), var(--phone1)); transform: translate(0, -3px);}


.telBtn2 { padding: 2rem 1.4rem; border-radius: 60% 80% / 100% 80%; background: linear-gradient(to right, var(--cc1), var(--cc2)); transition: all 0.3s;}
.telBtn2 a { padding-left: 15px; color: #fff !important; font-size: 1.4rem; font-weight: bold; line-height: 1.0;}
.telBtn2 a::before { font-family: "Font Awesome 5 Free"; content: "\f095"; padding-right: 7px;}
.telBtn2:hover { border-radius: 100% 80px / 80px 100%;}



.kakko { position: relative; /*line-height: 1.4;*/ padding: 20px; display: inline-block; background: #f4f4f4;}
.kakko:before,
.kakko:after { content:''; width: 20px; height: 25px; position: absolute; display: inline-block;}
.kakko:before { border-left: solid 3px #0074c2; border-top: solid 3px #0074c2; top:0; left: 0;}
.kakko:after { border-right: solid 3px #0074c2; border-bottom: solid 3px #0074c2; bottom:0; right: 0;}



.en1 { width: 60px; height: 60px; margin: 0 auto; padding-top: 10px; text-align: center !important; background: #0074c2; border-radius: 50%; box-sizing: border-box;}
@media screen and (max-width: 767px) {
.en1 { width: 50px; height: 50px; padding-top: 8px;}
}



.subt h3 { border-left: 3px solid var(--cc1); padding-left: 15px !important;}
.subt h4 { position: relative; padding: 0 0 25px !important; border-bottom: solid 3px var(--cc3);}
.subt h4::after{ position: absolute; content: ''; display: block; border-bottom: solid 3px var(--cc2); bottom: -3px; width: 30%;}



.tH1 h1 { color: #e57373;}

.tH2 { position: relative; margin-bottom: 50px !important; color: #ff6f61; text-align: center;}
.tH2:before { content: ""; position: absolute; left: calc(50% - 2.5rem); bottom: -20px; width: 80px; height: 4px;  background: #ff6f61;}



.bd { padding: 15px 5px; border-radius: 10px;}
.bd.bdp h4 { color: var(--pinkc1) !important;}
.bd.bdp { border: 2px solid var(--pinkc1); background: var(--pinkc2);}
.bd.bdg h4 { color: var(--greenc1) !important;}
.bd.bdg { border: 2px solid var(--greenc1); background: var(--greenc2);}
.bd.bdb h4 { color: var(--bluec1) !important;}
.bd.bdb { border: 2px solid var(--bluec1); background: var(--grayc1);}

.accessDl { padding: 15px; border-left: 5px solid var(--pinkc1); border-radius: 8px; background-color: #fff3e0; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);}
.accessDl dt { font-weight: bold;}

.btn a { display: block; position: relative; width: fit-content; margin: 20px auto 20px; padding: 25px 30px; font-size: 20px; line-height: 0.7; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); border-radius: 999px; background: var(--greenc2);}
.btn a:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); background: var(--pinkc2)/*#f0fff4*/;}
.btn.btng a { padding: 0 30px 25px; color: #38a169; background: #fff;}
.btn.btng a:hover { background: var(--greenc2);}
.btn.btnb a { background: var(--bluec2);}
.btn.btnb a:hover { background: var(--bluec3);}
.btn .icon { font-size: 1.8rem; margin-right: 10px;}
@media screen and (max-width: 767px) {
.btn a { font-size: 16px;}
}

.ftrCo { padding: 16px; text-align: center; background: #fff/*#f5f5f0*/; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.ftrCo dl { font-size: 1.1rem; font-weight: bold;}



.baseBtn { width: /*fit-content*/95%; margin: 0 auto;}
.baseBtn t.span { position: relative;}
.baseBtn a { overflow: hidden; position: relative; z-index: 1000; display: block; padding: 0.9rem 1.1rem; color: #333; font-size: 1.1rem; text-align: center; transition: all 0.3s; border-radius: 3.0rem; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);}
.baseBtn a,
.baseBtn a:hover { text-decoration: none;}
.baseBtn a:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);}
.baseBtn a::before { font-family: "Font Awesome 5 Free"; font-weight: bold; padding-right: 7px; font-size: 1.3rem;}

.baseBtn.phone { margin-bottom: 13px;}
.baseBtn.phone a { color: #fff !important; background: var(--phone1); border: 2px solid var(--phone1);}
.baseBtn.phone a:hover { background: var(--cc3) !important; border: 2px solid var(--cc3) !important;}
.baseBtn.phone a::before { content: "\f095";}
/*.baseBtn.phone a::after { position: absolute; z-index: 100; content: ""; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.5s ease-in-out; transform: translateX(-97%); background: #fff;}
.baseBtn.phone a:hover::after { transform: translateX(-99%); background: var(--phone1);}*/

.baseBtn.menu { margin-top: 15px !important;}
.baseBtn.menu a { color: #fff; background: var(--menu1); border: 2px solid var(--menu1);}
.baseBtn.menu a:hover { text-decoration: none; /*background: var(--menu1);*/}
.baseBtn.menu a::before { content: "\f518";}

.baseBtn.map { margin-top: 15px !important;}
.baseBtn.map a { color: #fff; background: var(--map1); border: 2px solid var(--map1);}
/*.baseBtn.map a:hover { color: #333; background: #fff;}*/
.baseBtn.map a::before { content: "\f3c5";}





.areaImg3Sec { text-align: center; padding: 80px 20px; background: none;}
.sect { margin-bottom: 30px; font-size: 50px; font-weight: 900t; font-style: italic; color: var(--cc1); text-transform: uppercase; letter-spacing: 3px; font-family: "Poppins", sans-serif; line-height: 1.5:}
.secSt { margin-bottom: 30px !important; font-size: 26px !important; font-weight: bold; color: var(--cc1); margin-bottom: 40px; font-family: "Noto Sans JP", sans-serif; line-height: 1.5:}
.sect.w,
.secSt.w { color: var(--white); text-shadow: 1px 2px 2px #333;}

.areaImg3Sec .areaBoxs { display: flex; justify-content: center; gap: 20px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap;}
.areaImg3Sec .areaBox { background: #ffffff; border-radius: 15px; overflow: hidden; width: 360px; text-align: left; box-shadow: 0 10px 20px rgba(0, 116, 194, 0.2); transition: transform 0.3s ease-in-out;}
.areaImg3Sec .areaBox:hover { transform: translateY(-10px);}

.areaImg3Sec .areaTxtCo { padding: 25px; display: flex; flex-direction: column; justify-content: space-between; height: 250px;}
.areaImg3Sec h3 { font-size: 18px; line-height: 1.3 !important; font-weight: bold; color: var(--cc1); margin-bottom: 10px;}
.areaImg3Sec p { font-size: 16px; color: #444; margin-bottom: 20px; line-height: 1.5;}

.areaImg3Sec .img3Co { width: 100%; height: 240px; overflow: hidden;}
.areaImg3Sec .img3Co img { width: 100%; height: 100%; object-fit: cover;}

.areaImg3Sec .arrowTxt { display: flex; justify-content: flex-end;}
.areaImg3Sec .arrowTxt a { font-size: 24px; font-weight: bold; color: var(--cc1); text-decoration: none; transition: color 0.3s;}
.areaImg3Sec .arrowTxt a:hover { color: #005B9A;}

@media (max-width: 768px) {
.areaImg3Sec h2 { font-size: 28px !important;}
.secSt { font-size: 20px !important;}
.areaImg3Sec .areaBoxs { flex-direction: column; align-items: center;}
.areaImg3Sec .areaBox { width: 90%;}
.areaImg3Sec .areaBox .areaTxtCo p { font-size: 14px;}
}





.sectionHeader { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 30px;}

.areaImglSec { background: var(--cc3); padding: 60px 20px; border-radius: 15px;}
.areaImgrSec { background: var(--cc3); padding: 60px 20px; border-radius: 15px;}

.areaImglSec .imgTxtCo,
.areaImgrSec .imgTxtCo { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; flex-wrap: wrap;}

.areaImglSec .imgCo,
.areaImgrSec .imgCo { flex: 1; max-width: 50%;}

.areaImglSec .imgCo img,
.areaImgrSec .imgCo img { width: 100%; border-radius: 10px;}

.areaImglSec .areaCo,
.areaImgrSec .areaCo { flex: 1; max-width: 45%; text-align: left;}
.areaImglSec h2,
.areaImgrSec h2 { font-size: 28px;}
.areaImglSec h2 span,
.areaImgrSec h2 span { display: block;}
.areaImglSec .areaCo a,
.areaImgrSec .areaCo a { display: inline-block; font-size: 20px; font-weight: bold; color: #fff; background: #1E2A3A; padding: 12px 30px; border-radius: 8px; text-decoration: none; margin-top: 20px; transition: 0.3s;}
.areaImglSec .areaCo a:hover,
.areaImgrSec .areaCo a:hover { background: var(--cc1);}
.areaImglSec .areaTxt,
.areaImgrSec .areaTxt { margin: 0 0 20px; font-size: 20px; font-weight: normal; color: #1E2A3A; border-left: 5px solid var(--cc1); padding-left: 10px;}

@media (max-width: 768px) {
.sectionHeader h2 { font-size: 30px;}
.areaImglSec .imgTxtCo,
.areaImgrSec .imgTxtCo { flex-direction: column; text-align: center;}
.areaImglSec .imgCo,
.areaImgrSec .imgCo { max-width: 100%; margin: 20px 0 20px;}
.areaImglSec .areaCo,
.areaImgrSec .areaCo { max-width: 100%;}
.areaImglSec h2,
.areaImgrSec h2 { font-size: 24px;}
.areaImglSec h2 span,
.areaImgrSec h2 span { display: inline;}
.areaImglSec .areaTxt,
.areaImgrSec .areaTxt { font-size: 18px;}
}