@charset "utf-8";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
common
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body { color: #333333; line-height: 1.8; background: #fff;}	
a { color: var(--c-main);  text-decoration: none;}
a:hover { text-decoration: underline;}
.clickable a, .clickable a:hover { color: #333;}

/* ----------------------------------------------------
parts (common)
---------------------------------------------------- */
:root {
--ff-symbol: 'Material Symbols Outlined';
--ff-en: "Roboto", sans-serif;
--c-main:#b7193f;
}

/* icon */
.ic--symbol {position: relative; }
.ic--symbol::before {font-family: var(--ff-symbol); position: absolute; }
.ic--fill::before {font-variation-settings: 'FILL' 1;}
.ic--left::before { left: 0; top: 50%; transform: translateY(-50%);}
.ic--top::before  { left: 50%; top: 0; transform: translateX(-50%);}

/* flex */
.flex {display: flex; display: -webkit-flex; flex-wrap: wrap;}
.jc--sb {justify-content: space-between;}
.jc--c  {justify-content: center;}
.jc--fe {justify-content: flex-end;}

/* img */
img {width: 100%; height: auto;}
.img-obj {overflow: hidden;}
.img-obj img {width: 100%; height: 100%; object-fit: cover;}


/* ----------------------------------------------------
calendar (common)
---------------------------------------------------- */
.ft__cal {width: min(90%,500px); margin: 0 auto; background: #fff; padding: clamp(10px,3.3vw,40px) 0;}

/* month prev/next */
div.cal_wrapper .cal_ui input:not(:nth-child(2)) {
 font-size: clamp(1.4rem,1.25vw, 1.5rem);
 padding: 0 clamp(5px,0.83vw,10px);
 background: #333; color: #fff;
}
/* date */
div.cal_wrapper .headline {background:#aaa;}
div.cal_wrapper .headline td {padding: clamp(5px,0.83vw, 10px) 0; font-size: clamp(1.3rem,1.3vw,1.6rem);}

/* day */
div.cal_wrapper tr:not(.headline) {column-gap:3px;}
div.cal_wrapper tr:not(.headline) td {margin-top:3px; font-size: clamp(1.5rem,1.5vw,1.8rem);}
div.cal_wrapper td > div {background: #ccc; }

@media (max-width: 780px) {

}

/* color */

/* 午後休診 */
div.cal_wrapper td > div.Sat, div.cal_wrapper td > div.Wed {
  background: #bce2e8;
  color: #007bbb;
}
.cal-halfOff {color: #bce2e8;}

/* 日曜・祝日 */
div.cal_wrapper td > div.Sun, div.cal_wrapper td > div.Holyday{
  background: #f6bfbc;
  color: #c53d43;
}
.cal-off {color: #f6bfbc;}

/* その他 */
div.cal_wrapper td > div.otherDay {
  background: #d8e698;
  color: #333333;
}
.cal-other {color: #d8e698;}


/* 午後休診（イレギュラー) */
div.cal_wrapper td > div.PMOff {
  background: #bce2e8;
  color: #007bbb;
}

/* 休診（イレギュラー） */
div.cal_wrapper td > div.dayOff {
  background: #f6bfbc;
  color: #c53d43;
}

/* 休診→受診日（イレギュラー） */
div.cal_wrapper td > div.weekday {
  background: transparent;
  color: #333;
}

/* 本日 */
div.cal_wrapper td > div.Today {
  font-weight: bold;
  color: #333;
}


/* ----------------------------------------------------
header
---------------------------------------------------- */
 #header {padding: var(--w-15) var(--w-50);  display: flex; display: -webkit-flex; justify-content: space-between;}
 #hd-logo {width: 122px;}
 #header .sp-btnTel{display: none;}
 .hd_info {display: flex; display: -webkit-flex; justify-content: flex-end; align-items: center; column-gap: var(--w-30);}
 .pc-tel {text-align: right;}
 .pc-tel .hd_tel__txt {font-size: var(--fs-14); font-weight: 600; line-height: 1.4;}
 .pc-tel .hd_tel__num {font-size: var(--fs-15); font-family: var(--ff-en); font-weight: 700; color: var(--c-main); line-height: 1.4; }
 .pc-tel .hd_tel__num a {font-size: var(--fs-26); }
 
 .btnWeb a {display: block; border-radius: 30vw; padding:  var(--w-10) var(--w-30); background: var(--c-main); color: #fff; text-align: center; font-weight: 600; font-size: var(--fs-16);}
  .btnWeb a br {display: none;}

 
@media (max-width: 960px) {
 #header {padding: var(--w-15) ;}

 #hd-logo {width: min(15vw,122px);}
 }
 
 @media (max-width: 490px) {
 #header {position: relative; padding-right: min(28vw,120px);}
 .btnWeb {position: absolute; right: 0; top: 0; height: 100%;}
 .btnWeb a {border-radius: 0; padding: var(--w-10) 0; height: 100%; display: flex; display: -webkit-flex; justify-content: center; align-items: center; line-height: 1.4; width: min(26vw,110px);}
 .btnWeb a br {display: block;}
 .pc-tel .hd_tel__txt,.pc-tel .hd_tel__num {letter-spacing: normal;}
 }

 /* tabletでは電話させない
 @media (min-width: 768px) {
  #header .pc-tel {display: block!important; color: #fff; position: absolute; top: 50%; transform: translateY(-50%);
  right: min(17vw,90px); 
  font-size: clamp(2rem, 3vw ,3.6rem)}
  #header .sp-btnTel {display: none!important;}
 }
 

 body {padding-top: min(15vw,70px);}
 #home main{ width: 100%; position: relative; }
 #header {position: fixed; left: 0; top: 0; z-index: 99;  width: 100%;  height: min(15vw,70px); background: #1d2f82; }
 #header #hd-logo {height: min(12vw,60px);}
 #header #hd-logo img {height: 100%; width: auto;}
 #header #hd-logo a {color: #fff;}
 #header .sp-btnTel {position: absolute;	height: min(15vw,70px); aspect-ratio: 1/1; right: min(15vw,70px);	top: 0;	z-index: 120;	background: #5d70c8;	display: flex;	display: -webkit-flex;	justify-content: center;	align-items: center; }
 #header .sp-btnTel a {line-height: 1}
 #header .sp-btnTel span {color: #fff; font-size: clamp(3rem,6vw,4rem); line-height: 1;}
 #header .sp-btnTel span.fill{font-variation-settings: 'FILL' 1;}
 #btnGlobal {position: absolute; height: min(15vw,70px); aspect-ratio: 1/1;right: 0;	top: 0;	z-index: 120;	background: #384891;	display: flex;	display: -webkit-flex;	justify-content: center;	align-items: center;}
 #btnGlobal .btnWrapGlobal {	position: relative;	width: min(7vw,3.5rem);	height: min(5vw,2.5rem);}
 #btnGlobal .btnLine { height: 3px; background: #fff; position: absolute; right:0; width: 100%;}
 #btnGlobal .btnLine.btnLineT {  top: 0;}
 #btnGlobal .btnLine.btnLineM { top: 50%; transform: translateY(-50%);}
 #btnGlobal .btnLine.btnLineB { bottom: 0; }
 #btnGlobal.active .btnLine {background: #fff;}
 #btnGlobal.active .btnLine.btnLineT { display: none;}
 #btnGlobal.active .btnLine.btnLineM { transform: translateY(0) rotate(45deg) ;}
 #btnGlobal.active .btnLine.btnLineB { transform: rotate(-45deg); bottom:inherit; top: 50%;}
 #btnGlobal .btnLine.btnLineM, #btnGlobal .btnLine.btnLineB {transition: all, ease-in-out, 0.3s;}
 #grandMenu {background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; z-index: 100; left: 0; top: 0; display: none; overflow: auto; padding: min(18vw,100px) 8%;}
 #grandMenu a {color: #fff;}

 #grandMenu #navGlobal li { font-size: clamp(1.5rem, 4vw, 2rem); border-bottom: 1px dotted #888; line-height: 1;}
 #grandMenu #navGlobal li a {display:  block; padding: min(4vw,24px) 0; position: relative;}
 #grandMenu #navGlobal li a::after {content:""; position: absolute; right: 3%; top: 50%; width: min(2vw,10px); aspect-ratio:1/1; border-top:1px solid #fff; border-right: 1px solid #fff; transform:  rotate(45deg) translateX(-50%);}
 #grandMenu #navGlobal li.btn-navChild a::after { transform:  rotate(135deg);}
 #grandMenu #navGlobal li.btn-navChild .navChild {display: none;}
 #grandMenu #navGlobal li.btn-navChild .navChild  li {border-bottom: none; font-size: clamp(1.4rem,4vw,1.8rem); padding-left: 1em;}
 #grandMenu #navGlobal li.btn-navChild .navChild a::after {transform:  rotate(45deg) ;}

 #header .pc-tel {display: none;} 
 
 */
 
}


/* ----------------------------------------------------
bnrRecruit
---------------------------------------------------- */
#bnrRecruit{}
.bnrRec__list {display: flex; display: -webkit-flex; column-gap: min(1.2vw,15px); flex-wrap: wrap;}
.bnrRec__list li {width: calc(50% - min(0.6vw,7.5px)); flex-grow: 2; background: #eee; margin-top:min(1.2vw,15px); text-align: center; }
.bnrRec__list li:nth-child(-n+2){margin-top: 0;}

@media (max-width: 971px) and (min-width: 781px) {

}

@media (max-width: 780px) {

}


/* ----------------------------------------------------
footer (common)
---------------------------------------------------- */
footer{margin-top: var(--w-100);}

#navFooter {display: flex; display: -webkit-flex; column-gap: 1px; flex-wrap: wrap;}
.navBtn {aspect-ratio: 16/9; overflow: hidden; position: relative; width: calc(calc(100% - 3px)/4); background: #a2a2a2; transition: 0.5s all ease-in-out;}
.navBtn img {width: 100%; height: 100%; object-fit: cover; transition: 0.5s all ease-in-out; mix-blend-mode: multiply;}
.navBtn:hover {background: #f3f3f3;}
.navBtn:hover img { transform: scale(1.05); }
.navBtn a {display: flex; display: -webkit-flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; left: 0; top: 0; color: #fff; text-align: center;  z-index: 10;  transition: 0.3s all ease-in-out;  padding: var(--w-15);}
.navBtn a .navTitle p {line-height: 1.5; font-weight: 700; font-size: var(--fs-16); }
.navBtn a .navTitle h3 {font-size: var(--fs-30); font-weight: 700; letter-spacing: 0.2rem;}
.navBtn a .navTitle h3 span {font-size: var(--fs-26);}
.navBtn a:hover {opacity: 1!important;}

#footer .copy {text-align: center; font-size: var(--fs-14); padding: var(--w-30) 5%; }
#footer .copy a {color: #333;}

#pagetop {  position: fixed;  bottom: 0;  right: 0;  z-index: 7;}
#pagetop a { display: block;  width: 45px;  height: 45px;background-color: #1d2f82;   color: #fff;  position: relative; z-index: 8;}
#pagetop a::before {content: ""; width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); z-index: 9;}

@media (max-width: 1020px)  {
 .navBtn {aspect-ratio: 7/3; width: calc(calc(100% - 1px)/2); margin-bottom: 1px;}
}

@media (max-width: 640px) {
.navBtn {aspect-ratio: 4/3;}
}

@media (max-width: 780px) {

}


/* -----------------------------------------------------
home(common)
------------------------------------------------------- */
/* point */
.pointWrap {background: #e8f7fc; padding: clamp(30px,5.8vw,70px) 0;}
.pointWrap h2 { text-align: center; font-weight: 600; font-size: clamp(2.2rem,2.5vw,3rem); color: #1d2f82;}
.pointWrap h2 span {display: block; font-size: clamp(1.4rem, 1.3vw, 1.6rem); color: #666666;}
.point { width: 90%; max-width: 970px; margin: clamp(15px, 3.3vw, 40px) auto clamp(10px, 2.5vw,30px); border-bottom: 1px dashed #1d2f82; padding-bottom: clamp(15px, 3.3vw, 40px); }
.point:last-child{ border-bottom: none; padding-bottom: 0; }
.point h3 {	font-size: clamp(1.6rem,1.6vw,2rem);	color: #1d2f82;	font-weight: 600;	margin: clamp(10px, 2.5vw,30px) 0 clamp(5px, 0.83vw, 10px);}
.point h3:first-of-type { margin-top: 0;}

table.schedule { width: 100%; margin-bottom: 10px; font-size: clamp(1.4rem,1.25vw,1.5rem);}
table.schedule th {	background: #1757af;	color: #fff;	border: 1px solid #e8f7fc;	text-align: center;	font-weight: normal;	padding: 5px; line-height: 1.4;}
table.schedule td {	border: 1px solid #e8f7fc;	text-align: center;	padding: 5px;	color: #333; background: #fff;}
table.schedule tr th:first-child {background: #1d2f82;}
table.schedule th.sat,table.schedule thead th span.sat {	color: #78c4ff;}
table.schedule th.red,table.schedule thead th span.red {	color: #ffb4b4;}
table.schedule td.red {	color: #ca0000;	background: #ffdfce;	font-weight: bold;}
.point p:last-child { margin-bottom: 0;}
/*日付統合の調整*/
table.schedule thead th.merge span{display: inline-block;}
table.schedule thead th.merge span.btw{	padding: 0 0.5em;	vertical-align:50%;}

@media (max-width:640px) {
 table.schedule {display: block;	width: auto !important;	margin: 2vw 0 3vw;	border-collapse: collapse;}
 table.schedule thead {display: block;	float: left;	width: 35%;}
 table.schedule tbody {	display: block;	width: 65%;	float: left;}
 table.schedule th, table.schedule td {	text-align: center;	padding: 2vw 1vw;	display: block;	line-height: 1.6;}
 table.schedule th br { display: none;}
 table.schedule thead tr { display: block;  }
 table.schedule tbody tr {width: 50%;	display: block;float: left;}
 table.schedule th, table.schedule td {	margin-top: -1px;	margin-left: -1px;}
 table.schedule { zoom: 100%;}
 table.schedule:after {content: ".";	display: block;	height: 0;	clear: both;	visibility: hidden;}
 table.schedule td br {display: block;}
 table.schedule th br {display: none;}
 table.schedule th br.sp_br {display: block !important;}

  /*-----------------------------*/
  /*スマホでも横にレイアウト変したい時：長期休診用*/
  table.schedule.schedule_y {display: table;	width: 100% !important;	margin: 1vw 0;	border-collapse: collapse;  }
  table.schedule.schedule_y thead {display: table-header-group;  float: none; width: 100%; }
  table.schedule.schedule_y tbody { display: table-row-group; width: 100%; float: none; }
  table.schedule.schedule_y th, table.schedule.schedule_y td { text-align: center; padding: 0.6vw 0.2vw; display: table-cell;font-weight: normal;  }
  table.schedule.schedule_y td br { display: block; }
  table.schedule.schedule_y th br { display: block !important; }
  table.schedule.schedule_y th br.sp_br { display: none !important;}
  table.schedule.schedule_y thead tr { display: table-row; }
  table.schedule.schedule_y tbody tr { width: 100%; display: table-row; float: none; }
  table.schedule.schedule_y tbody tr th {	width: 2em;	padding: 1px 2px;  }
  table.schedule.schedule_y th, table.schedule.schedule_y td { margin-top: -1px; margin-left: -1px; }
  table.schedule.schedule_y { zoom: 100%; }
  table.schedule.schedule_y:after {content: ".";	display: table;	height: 0;	clear: both;	visibility: hidden;font-size: 0; }
  table.schedule.schedule_y th, table.schedule.schedule_y td {vertical-align: middle !important;}
}

@media (min-width:641px) {
 table.schedule td br {display: none}
 table.schedule th br.sp_br {display: none !important;}
}


/* ----------------------------------------------------
module(common)
---------------------------------------------------- */
/* base setting
#main {
  --w: 1200px;
  --m: 5%;
  margin-inline: max(var(--m),50cqw - var(--w)/2);
}
.bgWhite {padding-block: clamp(40px, 7.5vw,90px);}
.bgGray {border-image: conic-gradient(#f3f3f3 0 0) fill 0//0 100vw; padding-block: clamp(40px,7.5vw,90px);}
.bgBlue{border-image: conic-gradient(#ddecf5 0 0) fill 0//0 100vw; padding-block: clamp(40px,7.5vw,90px);}
 */
 
@media (max-width: 780px) {
}

/* ----------------------------------------------------
local navi(common)
---------------------------------------------------- */
@media (min-width: 781px) { /* 781px以上 */
 #navLocal {width: 90%;max-width: 1200px; margin: 0 auto 0;}
 #navLocal ul {display: flex; display: -webkit-flex; justify-content: center; flex-wrap: wrap; column-gap: min(1.25vw,15px);}
 #navLocal ul li {font-size:min( 1.3vw, 1.6rem); margin: min(0.83vw,10px) 0;}
 #navLocal ul li a {display: block; text-align: center; padding: min(1vw, 12px) min(1.66vw, 20px); background: #f5f5ef; min-width: min( 15.8vw, 190px); border: 2px solid #7ecc4a; color: #7ecc4a; font-weight: 600;}
 #navLocal ul li a.current, #navLocal ul.first li a.parentsLink, #navLocal ul li a:hover { color : #fff; background: #7ecc4a; position: relative;}
}

@media (max-width: 780px) { /*　780px以下 */
 .col-reverse {display: flex; display: -webkit-flex; flex-direction: column-reverse;}
 #navLocal {background: #00a1e9; width: 100%}
 #navLocal ul {margin: 0;}
 #navLocal ul li a {display: block; color: #fff; font-size: clamp(1.8rem,2vw,2.4rem); padding: clamp(12px,2vw,24px) clamp(20px,3vw,36px); border-bottom: 1px solid #fff; position: relative;}
 #navLocal ul li a::after {content: ""; width: min(2vw,15px); aspect-ratio: 1/1; margin-top: -0.5vw; border-top: 1px solid #fff; border-right: 1px solid #fff; position: absolute; right: clamp(20px,3vw,36px); top: 50%; transform: rotate(45deg);}
 #navLocal ul li a.current, #navLocal ul.first li a.parentsLink {background: #0485bf; font-weight: 600;} 
}

/* --------------------------------------------------
visual / topicPath 
----------------------------------------------------- */
.visual {display: flex; display: -webkit-flex; justify-content: center; align-items: center; background: #f3f3f3 url("../../img/page/common/img-vis-01.jpg") right top / auto 100% no-repeat; height:clamp(120px, 96.563px + 6.25vw, 180px);}
.visual h2 {font-size: var(--fs-30); text-align: center; line-height: 1.2; font-weight: 500; }
.visual h2 span {font-family: var(--ff-en); font-size: var(--fs-16); color: var(--c-main); font-weight: 600;}

@media (max-width: 900px) {
.visual {justify-content: flex-start;}
.visual h2 {text-align: left; width: 90%; margin: 0 auto;}
}

@media (max-width: 490px) {
.visual {background-position: 30% center;}
}

/* topicPath */
ol.topicPath {width: 90%; margin: 5px auto;}

@media (max-width: 971px) and (min-width: 781px) { }
@media (max-width: 780px) { }

#mainContent {width: 90%; max-width: 1200px; margin: var(--w-60) auto;}


/* --------------------------------------------------
heading / p 
----------------------------------------------------- */
.hA {font-size: clamp(2.6rem,3.3vw,4rem); text-align: center; font-weight: 600; margin: clamp(50px,6.6vw,80px) 0 clamp(35px,4.16vw,50px);}
.hA:first-child {margin-top: 0;}
.hB {font-size: clamp(2.2rem, 2.33vw,2.8rem); padding: clamp(10px,1.25vw,15px); background: #666; color: #fff; margin: clamp(35px,4.16vw,50px) 0 clamp(25px,2.5vw,30px);}
.hC {font-size: clamp(1.9rem,1.66vw,2rem); padding-bottom: clamp(5px, 0.83vw,10px); font-weight: bold; margin: clamp(25px,4.16vw,50px) 0 clamp(20px,2.5vw,30px); border-bottom: 3px solid #333;}
.hD {font-size: clamp(1.8rem,1.66vw,2rem); font-weight: bold; margin: clamp(20px,2.5vw,30px) 0 clamp(10px,1.66vw,20px); }

.strongA { background: linear-gradient(transparent 60%, #ffff66 60%);}

@media (max-width: 971px) and (min-width: 781px) { }
@media (max-width: 780px) { }


/* --------------------------------------------------
link / list 
----------------------------------------------------- */
.telLink {font-size: clamp(2.2rem,2.2vw,2.6rem);}
.telLink::before { color: #7ecc4a; }

a.linkArrow {display: inline-block; min-width: min(25.5vw,300px); padding: var(--w-15) var(--w-30); text-align: center; position: relative; border-radius: 30vw;}
a.linkArrow::after {content: "";	position: absolute;	right: min(1.25vw,15px);	top: 50%;	width: min(0.83vw, 10px);	aspect-ratio:1/1;	border-top: 1px solid;	border-right: 1px solid;	transform: translateY(-50%) rotate(45deg);}

a.linkArrow {background: var(--c-main); color: #fff;}
a.linkArrow::after {border-color: #fff;}
a.linkExternal span::after { color: #fff;}

ul.listDot li::before { background:#66ba2e;}
ul.listCheck li::before { color: #66ba2e;}

.listData dt {margin-top: min(0.4vw, 5px);}

@media (max-width: 780px) {
 .telLink a {color: inherit;}
 a.linkArrow {display:block; min-width:inherit; width: 80%; padding: min(4vw, 18px) min(5vw, 30px); margin: 0 auto;}
 a.linkArrow::after {right: min(3vw,15px); width: min(2vw, 10px);}
.listData dt {margin-top: min(1vw, 5px);}
}


/* --------------------------------------------------
decBox
----------------------------------------------------- */
.decBox { padding: min(2.5vw,30px); margin-bottom: min(2.5vw,30px);}

.decBox01 { border: 1px solid #66ba2e;  background: #fff;}
.decBox02 { background: #dfeed6;}
.decBox03 {background: #fff;  border: 2px solid #dadac6;}

@media (max-width: 780px) {
 .decBox { padding:min(5vw,30px); margin-bottom:min(5vw,30px);}
}

/* --------------------------------------------------
table
----------------------------------------------------- */
.tblA, .tblTime {border: 1px solid #ccc;}
.tblA th, .tblA td, .tblTime th, .tblTime td {border:1px solid #ccc; padding: clamp(5px,0.83vw, 10px);}
.tblA th, .tblTime th {background: #eee; color: #333;}
.tblA td, .tblTime td {background: #fff; color: #333;}

@media (max-width: 780px) {}

/* --------------------------------------------------
grid list (サイズ均等)
---------------------------------------------------- */
.l-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  grid-gap: 1.25em;
 }
.l-grid--02{  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));}
.l-grid--03{  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));}
.l-grid--04{  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));}

@media (max-width: 400px) {
 .l-grid--02 {grid-template-columns: 1fr;}
}

/* --------------------------------------------------
gridレイアウト / 画像上テキスト
---------------------------------------------------- */
.grdImgBox {margin: min(3.3vw, 40px) 0;}
.picOver__txt {background: rgba(0,0,0,0.2); color: #fff; padding: min(1.66vw,15px) min(1.66vw,20px);}

@media (max-width: 780px) {
 .picOver__txt {padding: min(2.5vw,15px) min(3vw,20px);}
}


/* --------------------------------------------------
step
---------------------------------------------------- */
.stpBox{background: #f3f3f3; border-radius: min(1.25vw,15px); padding: min(6vw, 70px) min(5vw, 60px) min(5vw, 60px); position: relative;}
.stpBox .stpNum {margin: 0; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); border-radius: 50%; background: #333; color: #fff; aspect-ratio: 1/1; width: clamp(75px,7.5vw, 90px); line-height: 1.3; display: flex; display: -webkit-flex; justify-content: center; align-items: center;}
.stpBox .stpNum span em {font-size: clamp(2rem, 2vw,2.4rem); display: block; text-align: center;}
.stpBox .stpTitle h3 {font-weight: 600; font-size: clamp(1.8rem,1.66vw,2rem); margin-bottom: min(1.66vw,20px);}

@media (max-width: 780px) {
 .stpBox{ border-radius: min(3vw,15px); padding: min(10vw, 60px) min(8vw, 60px) min(8vw, 60px);}
 .stpBox .stpTitle h3 { margin-bottom: min(3.5vw,20px);}
}

/* ---------------------------------------------------
access
--------------------------------------------------- */
.acsStep__num {margin: 0; background: #000; color: #fff; aspect-ratio: 1/1; width: clamp(40px,4.16vw,50px); display: flex; display: -webkit-flex; justify-content: center; align-items: center; border-radius: 50%;}

@media (max-width: 971px) and (min-width: 781px) {

}

@media (max-width: 780px) {

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
other
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width:768px) {
 /* hover */
 a:hover,.clickable:hover {
   opacity: .8 !important;
   text-decoration: none;
   transition: all 0.2s ease-in-out;
 }

}
@media (max-width: 971px) and (min-width: 781px) {
}
@media (max-width: 780px) {
}



/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

column

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* category */
.tabColCat {display: flex; display: -webkit-flex; column-gap: 5px; border-bottom:2px solid var(--c-main); margin-bottom: var(--w-40);}
.tabColCat li a { display: block;border: 2px solid var(--c-main); background: #fff;  border-radius: 10px 10px 0 0 ; border-bottom: none; color: var(--c-main); text-align: center; line-height: 1.3; padding:var(--w-10) var(--w-30);  font-weight: 600; font-size: var(--fs-20); transition: 0.3s all ease-in-out; min-width: 18%; }

.tabColCat li span {font-size: var(--fs-14); color: #666; display: block; transition: 0.3s all ease-in-out; }
.tabColCat li:first-child a,.tabColCat li:nth-child(2) a {display: flex; display: -webkit-flex; align-items: center; justify-content: center; color: #fff; transition: 0.3s all ease-in-out; height: 100%;}
.tabColCat li:not(.active):first-child a,.tabColCat li:not(.active):nth-child(2) a  {color:var(--c-main)}
.tabColCat li.active a,.tabColCat li:hover a,.tabColCat li:not(.active):first-child a:hover,.tabColCat li:not(.active):nth-child(2) a:hover {background: var(--c-main); color: #fff;}
.tabColCat li.active a span ,.tabColCat li:hover a span {color: #fff;}

.colCont {display: flex; display: -webkit-flex; flex-wrap: wrap; column-gap: 1.7%;}
.postIndex {width:calc(calc(100% - 5.1%)/4) ; margin-top:1.7%; background: #fff; border-radius: 10px; border: 1px solid #ccc; font-size: var(--fs-16);}
.postIndex .postThum {border-radius: 10px 10px 0 0; aspect-ratio: 16/9; overflow: hidden; margin: 0;}
.postIndex .postThum img {width: 100%; height: 100%; object-fit: cover; }
.postIndex .postIdxCont {padding: var(--w-15) var(--w-20) var(--w-20);}
.postIndex .postIdxCont .postDate {font-weight: 600; margin: 0 0 5px; font-size: var(--fs-14);}
.postIndex .postIdxCont h3 {font-weight: 600; line-height: 1.4;}
.postIndex .postIdxCont h3 a {color: #333; }

.postCat {margin: var(--w-10) 0 0; display: flex; display: -webkit-flex; column-gap:5px; flex-wrap: wrap; font-size: var(--fs-12); font-weight: 600;}
.postCat li {margin-top: 5px;}
.postCat li a {display: block; color: #fff; background: #d85674; border-radius: 5px; padding: 0 var(--w-10);}

.wp-pagenavi {margin-top: var(--w-60); text-align: center;}

@media (max-width: 1020px)  {
.postIndex {width:calc(calc(100% - 3.4%)/3) ;}
}

@media (max-width: 690px) {
 .tabColCat li a {padding:var(--w-10) var(--w-15); }
 .postIndex {width:calc(calc(100% - 3.4%)/2) ;}
}
@media (max-width: 560px) {
 .tabColCat {flex-wrap: wrap; border-bottom:none;column-gap: 1%;}
 .tabColCat li {font-size: var(--fs-20); min-width:inherit; width: 49.5%; margin-bottom: 1%;}
 .tabColCat li a {border-radius: 10px; border-bottom: 2px solid var(--c-main); padding:var(--w-10) var(--w-20); }

}


/* single */
.postHead {text-align: center; max-width: 790px; margin: 0 auto;}
.postHead .postDate {color: var(--c-main); font-size: var(--fs-18); font-weight: 600;}
.postHead h2 {font-size: var(--fs-36); line-height: 1.5; font-weight: 500;}
.postHead .postCategory {margin: var(--w-15) 0 0; font-size: var(--fs-20); font-weight: 600;}

.postBody {border: 1px solid #999; border-radius: var(--w-30); margin: var(--w-60) auto 0; padding:var(--w-60);}
.postBody h2 {color: var(--c-main); font-weight: 600; font-size: var(--fs-26); margin: var(--w-40) auto var(--w-15);}
.postBody h3 {background: #f2e0e4; color: var(--c-main); font-weight: 600; font-size: var(--fs-22); margin: var(--w-30) 0 var(--w-15); padding: var(--w-10) var(--w-30);}
.postBody h4 {color: var(--c-main); font-weight: 600; font-size: var(--fs-20); margin: var(--w-20) 0 0; }
.postBody h5 {color: var(--c-main); font-weight: 600; margin: var(--w-20) 0 0; }

.postBody figure {margin: min(2.5vw,30px) auto;}
.postBody img {width: revert-layer; max-width: 100%;}
.postBody ul {list-style: disc; padding-left: 1.5em;}
.postBody ol {list-style: decimal; padding-left: 1.5em;}

.postNav {
 margin-top: min(3.3vw,40px);
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: 1fr;
 grid-column-gap: min(1.66vw,20px);
 grid-row-gap: 0px;
}
.postNav p {margin: 0;}
.prevPostNav { grid-area: 1 / 1 / 2 / 2; }
.backPostNav { grid-area: 1 / 2 / 2 / 3; }
.nextPostNav { grid-area: 1 / 3 / 2 / 4; text-align: right;}

.prevPostNav a {padding-left: 1em; position: relative;}
.nextPostNav a {padding-right: 1em; position: relative;}
.prevPostNav a::before,
.nextPostNav a::before {content: ""; width: min(1vw,12px); aspect-ratio: 1/1; border-top: 2px solid var(--c-main); border-right: 2px solid var(--c-main);position: absolute; }
.prevPostNav a::before {left: 0;  top: 50%; transform: translateY(-50%) rotate(-135deg);}
.nextPostNav a::before {right: 0;  top: 50%; transform: translateY(-50%) rotate(45deg);}



@media (max-width: 780px) {
.postNav {
 margin: min(5vw,40px) auto;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 grid-column-gap: 4vw;
 grid-row-gap: 4vw;
}
.postNav p {margin: 0;}
.prevPostNav { grid-area: 2 / 1 / 3 / 2; }
.backPostNav { grid-area: 1 / 1 / 2 / 3; }
.nextPostNav { grid-area: 2 / 2 / 3 / 3; }
.prevPostNav a::before,
.nextPostNav a::before { width: min(2vw,10px); }
.backPostNav a {min-width: 60%;}

}