/*
Theme Name: wannyan_themes
Template: arkhe
*/

/* ----------
  COMMON
-------------- */
* { box-sizing: border-box;}

body {
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Yu Gothic", YuGothic, sans-serif; 
    letter-spacing: 0.05em;
    background:
    url(https://wannyan-oukoku.com/wo/wp-content/themes/wannyan_themes/images/bg_circle.png),
    url(https://wannyan-oukoku.com/wo/wp-content/themes/wannyan_themes/images/bg_paper.jpg);
    background-repeat: repeat-y, repeat;
    color: #593919;
}

p {
    margin: 0;
    padding: 0;
    word-break: break-all;
    text-align: justify;
    line-height: 1.7;
}

img {width: 100%;vertical-align: bottom;}

.grecaptcha-badge { visibility: hidden; }

.pc_view {}
.sp_view { display: none !important;}

a {
    color: #ed6e9f;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}
.c-gnav__li>.c-gnav__a {
    font-weight: 600;
    color: #844f1c; !important;}

a:hover,.c-gnav__li>.c-gnav__a:hover {color: #fea700;}
.l-header__right nav .sub-menu li { margin-right: 0px !important; }


/*Gnav deco*/
.gn_about a .__mainText,
.gn_service a .__mainText,
.gn_staff a .__mainText,
.gn_access a .__mainText,
.gn_blog a .__mainText { margin-bottom: 10px;}

/* サブメニューはmarginなし */
.gn_about .sub-menu a .__mainText,
.gn_service .sub-menu a .__mainText,
.gn_staff .sub-menu a .__mainText,
.gn_access .sub-menu a .__mainText,
.gn_blog .sub-menu a .__mainText { margin-bottom: 0px;}


.gn_about a:after,
.gn_service a:after,
.gn_staff a:after,
.gn_access a:after,
.gn_blog a:after {
    color:#d0a921;
    font-size: 75%;
    line-height: 1;}

.gn_about a:after { content: "ABOUT US";}
.gn_service a:after { content: "SERVICES";}
.gn_staff a:after { content: "STAFF";}
.gn_access a:after { content: "ACCESS";}
.gn_blog a:after { content: "BLOG";}

/* サブメニューは非表示 */
.gn_about .sub-menu a:after,
.gn_service .sub-menu  a:after,
.gn_staff .sub-menu  a:after,
.gn_access .sub-menu  a:after,
.gn_blog .sub-menu  a:after { display: none;}


.gn_reserve {
    background: #9a6620 url(https://wannyan-oukoku.com/wo/wp-content/themes/wannyan_themes/images/icon_reserve.png) no-repeat 20px 50%;
    background-size: 30px;
    padding: 0 15px 0 55px;
    border-radius: 100px;  
    transition: .25s; 
}
.gn_reserve:hover {
    background: #c2912e url(https://wannyan-oukoku.com/wo/wp-content/themes/wannyan_themes/images/icon_reserve.png) no-repeat 20px 50%;
    background-size: 30px;}
.gn_reserve a {color: #fff !important;}
    


.c-gnav .sub-menu {
    display: block;
    background: #9a6621;
    border-radius: 10px;
}
.c-gnav__depth1:before {
    background-color: #9a6621;
    bottom: 100%;
    -webkit-clip-path: polygon(0 100%, 100% 100%, 50% 60%);
    clip-path: polygon(0 100%, 100% 100%, 50% 60%);
    content: "";
    height: 1.2em;
    left: calc(50% - .5em);
    position: absolute;
    width: 1em;
    z-index: 59;
    top: -16px;
}

.l-header__right {margin-right: 20px;}

h2 {
    font-size: 2em;
    letter-spacing: 0.1em;
}

.c-postContent h2 {
    position: relative;
    padding-left: 20px;
    font-size: 180%;
    line-height: 1.3;
}

.c-postContent h2::before {
  content: ""; 
  display: block;
  position: absolute;
  left: 0; 
  top: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(
    180deg,
    #ccb7a5 0%,
    #ccb7a5 50%,
    #5d3d2e 50%,
    #5d3d2e 100%
  );
}

.c-pageTitle__main {
    padding-left: 10px;
    font-size: 200%;
    line-height: 1.3;
    border-left: 7px dotted #c7a772;
}
.p-topArea__title .c-pageTitle__main { color: #593919;border-left:none;}
.p-topArea__title .c-pageTitle__main::after {background-image: none; }
.p-topArea__body {text-shadow: 0px 0px 0 #0000001a;}

.p-entry__thumb { margin-bottom: 30px;}

.c-postContent h3 {
    font-size: 1.4rem;
    padding: 0.4em 0.8em;
    border-left: 7px solid #593919;
    background: #f4efe6;
    border-radius: 4px;
}

.c-postContent h3.wp-block-accordion-heading {
    font-size: 1rem;
    padding: 0.2em 0.3em;
    border-left: 0px solid #ddd;
    background: #eee;
    border-radius: 4px;
	text-align:center;
	margin-bottom:20px;
}
.c-postContent h3.wp-block-accordion-heading:hover  { background: #ddd;text-decoration:none !important;}
.wp-block-accordion-heading__toggle:hover {text-decoration:none !important;}
.wp-block-accordion-heading__toggle-title:hover {text-decoration:none !important;}

.c-postContent h4 {
    font-size: 1.4rem;
    border-bottom: 4px solid #d1af8f;
    padding-bottom: 0.2em;
    font-weight: bold;
}

.c-postContent h5 {
  position: relative;
  display: inline-block;
  background-color: #e3d5c5;
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  margin: 25px 0 15px;
  box-sizing: border-box;
}

.c-postContent h5::before {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 7px 0 7px;
    border-color: #e3d5c5 transparent transparent transparent;
}

.c-postContent h6 {
    background: url(https://wannyan-oukoku.com/wo/wp-content/themes/wannyan_themes/images/icon_nikukyu02.png) no-repeat 0px 0%;
    background-size: 30px;
    color: #b8771a;
    padding-left: 41px;
    font-size: 120%;
}

.c-postThumb__img { border-radius: 10px;}


@media (max-width: 768px) {
    .pc_view {display: none !important;}
    .sp_view {display: inherit !important;}
    
    [data-btns=rr-rl] .l-header__body {
    grid-template-areas: "left center right search menu";
    grid-template-columns: 0% auto auto var(--ark-searchW) var(--ark-drawerW);
    }
    .l-header__center {
    margin-right: auto;
    margin-left: 0;
}
.gn_about a:after,
.gn_service a:after,
.gn_staff a:after,
.gn_access a:after,
.gn_blog a:after { display: none;}

.c-drawerNav { border-bottom:0px;}
.c-drawerNav li:last-of-type { border-bottom:0px;}
.c-drawerNav > li:nth-last-child(2) {
  border-bottom:0px;
}
.c-iconBtn__icon svg:not([fill]) {
    fill: rgb(135 86 37);
}

.c-postContent h2 {font-size:150%;}
.c-postContent h3 {font-size: 1.3rem;}
.c-postContent h4 {font-size: 1.2rem;}
}


/* ----------------------
   ALL
-------------------------*/
.l-content__body {margin: 0 auto;}
.l-header__center {padding: 0;}
.l-header {transition: opacity 0.25s ease;}
.l-header__body { background: #ffffff00; background-image: url();transition: opacity 0.25s ease;}
[data-scrolled=true] .l-header[data-pcfix="1"] {
    /*background-image: url(/rdm/img/bg_gnav.jpg);*/
    background-color: #fff;
    background-position: 0 100%;
}


/*--------- gnav ----------*/
.l-header__right nav {
    height: 55px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding: 0 0 0 30px;
    color: #000;
    margin: 0 0 0 10px;
}

.l-header__right nav h1 { width: 20%;}
.l-header__right nav h1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.l-header__right nav ul {
    width: 78%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    list-style: none;
}

.l-header__right nav ul li {
    margin-right: 15px;
    line-height: 68px;
}

.l-header__right nav ul li:last-child{ margin-right: 0;}


/*Gnav調整*/
#header .l-header__body {
    width: 100% !important;
    max-width: 100% !important;
}

#header .l-container {
    padding-right: 0;
    padding: 16px 10px 16px 20px;
}


@media screen and (max-width: 959px) {
    .p-drawer__nav div,
    .sp_bottom_menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .p-drawer__nav div a,
    .sp_bottom_menu a {display: block; width: 33.3333333%;}
}

/*ドロワー*/
[data-drawer-move=fade][data-drawer=opened] .l-header__drawerBtn,
.l-header__drawerBtn { color: #b47d26;}
.p-drawer {
    background: #ffffff;
    color: #d05c00;
    font-weight: bold;
}


/* ----------------------
   TEXT STYLE
-------------------------*/


/* ----------------------
   Sec Title
-------------------------*/
.p-topArea { min-height: 25vh; }
.p-topArea.-noimg {
    background: url(https://wannyan-oukoku.com/wo/wp-content/themes/wannyan_themes/images/bg_sectitle.png) no-repeat;
    background-size: 85%;
    background-position: 50% 100%;
    padding-bottom: 0;
}

@media screen and (max-width: 959px) {
.p-topArea {
    min-height: 14vh;
}
}

/* ----------------------
   Sec parts
-------------------------*/

/* ギャラリー */
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {border-radius: 30px;}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    background: #23180994;
    border-radius: 0 0 30px 30px;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {backdrop-filter: none;}

/* 下層画像 */
.img_round { border-radius: 15px;}
.img_round img { border-radius: 15px;}

@media screen and (max-width: 959px) {
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    margin: 0;
    width: 100%;
}
}

/* Table */
.table_normal th,
.table_normal td { display: block; width: 100%; }


/* ----------------------
   Key
-------------------------*/
#key {
  background: url(https://wannyan-oukoku.com/wo/wp-content/themes/wannyan_themes/images/img_key_wannyan.png) no-repeat;
  background-size: 85%;
  background-position: 50% 100%;
  padding: 10% 5%;
  overflow: hidden;
}

#key .key_inner {
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%;
    min-width: 700px;
}

#key h2 {
    position: absolute;
    left: 50px;
    top: 35%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.4em;
    z-index: 3;
    margin: 0;
    align-items: flex-start;
    flex-direction: row-reverse;
}

#key h2 span {
    writing-mode: vertical-rl;
    background-color: #ffffff;
    padding: 1em 0.5em;
    border-radius: 20px;
    font-size: 100%;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-family: "fot-tsukuardgothic-std", sans-serif;
}

#key h2 span:last-child {
  margin-top: 3em;
}

#key figure {
  position: relative;
  width: 75%;
  aspect-ratio: 4 / 3;
  z-index: 1;
  margin: 0;
}

#key figure::before,
#key figure::after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
}

#key figure::before {
  top: -4%;
  left: -2%;
  width: 102%;
  height: 106%;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  z-index: 1;
  animation: blobMorph1 14s ease-in-out infinite;
}

#key figure::after {
  top: 4%;
  left: 6%;
  width: 98%;
  height: 102%;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  z-index: 0;
  animation: blobMorph2 18s ease-in-out infinite;
}

@keyframes blobMorph1 {
  0% {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  25% {
    border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%;
  }
  50% {
    border-radius: 35% 65% 60% 40% / 65% 40% 60% 35%;
  }
  75% {
    border-radius: 65% 35% 45% 55% / 45% 55% 45% 55%;
  }
  100% {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
}

@keyframes blobMorph2 {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  30% {
    border-radius: 45% 55% 65% 35% / 40% 60% 40% 60%;
  }
  60% {
    border-radius: 70% 30% 40% 60% / 50% 65% 35% 50%;
  }
  85% {
    border-radius: 38% 62% 55% 45% / 65% 45% 55% 35%;
  }
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

#key figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 53% 47% 41% 59% / 49% 58% 42% 51%;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  #key {
    padding: 10% 0% 10% 5%;
    overflow: hidden;
}
#key .key_inner {
    width: 100%;
    min-width: auto;
    margin-top: 40px;
    align-items: flex-start;
  }

  #key h2 {
    position: absolute;
    top: auto;
    left: 0px;
    transform: none;
    margin-bottom: 1em;
    gap: 0.2em;
    margin-top: 50px;
  }

  #key figure { width: 100%;}
#key figure img {
    width: 117%;
    height: 122%;
    object-fit: cover;
    border-radius: 53% 47% 41% 59% / 49% 58% 42% 51%;
    position: relative;
    z-index: 2;
}
  #key h2 span {
    writing-mode: vertical-rl;
    background-color: #ffffff;
    padding: 1em 0.5em;
    border-radius: 20px;
    font-size: 60%;
    font-weight: bold;
    margin-top: 2em;
}
#key h2 span:last-child {
    margin-top: 6em;
}


}

/* ----------------------
   Sec body
-------------------------*/
.home .l-content__body {
    max-width: 100%;
    padding:0;
}

.page .l-content__body {
    background: #fff;
    border-radius: 35px;
    padding: 50px 0;
    max-width: 100%;
    opacity: 0;
    animation: pageFadeUp 1s ease forwards;
    animation-delay: 0.2s;
}

@keyframes pageFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.single .l-content__body{
    background: #fff;
    border-radius: 35px;
    padding: 50px 0;
    max-width: 100%;}

.archive .l-content__body{
    background: #fff;
    border-radius: 35px;
    padding: 50px 0;
    max-width: 100%;
}

.archive .l-content__body #main_content,
.single .l-content__body #main_content {
    max-width: calc(var(--ark-width--container) + var(--ark-padding--container) * 0);
    margin: 0 auto;
}

@media (max-width: 768px) {
.page .l-content__body {padding: 50px 25px;}
.single .l-content__body {padding: 50px 20px;}
}

/* ----------------------
   汎用フェードインクラス
   ブロックの「高度な設定 → 追加CSSクラス」に
   js-fadein または js-fadein-stagger を入力すると使えます
-------------------------*/

/* 単体でふわっと表示 */
.js-fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.js-fadein.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* 直下の子要素（リストの各項目、カラムの各カラムなど）を順番にふわっと表示 */
.js-fadein-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.js-fadein-stagger.is-inview > * {
  opacity: 1;
  transform: translateY(0);
}

.js-fadein-stagger.is-inview > *:nth-child(1) { transition-delay: 0s; }
.js-fadein-stagger.is-inview > *:nth-child(2) { transition-delay: 0.15s; }
.js-fadein-stagger.is-inview > *:nth-child(3) { transition-delay: 0.3s; }
.js-fadein-stagger.is-inview > *:nth-child(4) { transition-delay: 0.45s; }
.js-fadein-stagger.is-inview > *:nth-child(5) { transition-delay: 0.6s; }
.js-fadein-stagger.is-inview > *:nth-child(6) { transition-delay: 0.75s; }


/* ----------------------
   News
-------------------------*/

#news {
  padding: 8% 5%;
}

#news .news_inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

#news h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  font-size: 200%;
  color: #54433a;
  font-weight: bold;
  margin: 0 0 2em 0;
}

#news h2 span {
  font-size: 42%;
  color: #c09e53;
  letter-spacing: 0.15em;
  font-weight: normal;
}

#news ul {
  list-style: none;
  padding: 0;
  margin: 0 0 3em 0;
  text-align: left;
}

#news li {
  border-bottom: 2px dotted #bba793;
}

#news li a {
  display: flex;
  gap: 2.5em;
  align-items: center;
  padding: 1.2em 0.5em;
  text-decoration: none;
  color: #54433a;
  transition: opacity 0.3s;
}

#news li a:hover {
  opacity: 0.6;
}

#news li time {
  font-size: 90%;
  color: #79675c;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

#news li span {
  font-size: 95%;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#news .news_inner > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  padding: 0.8em 3em;
  border: 1px solid #79675c;
  border-radius: 30px;
  color: #54433a;
  text-decoration: none;
  font-size: 95%;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.3s;
}

#news .news_inner > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #54433a;
  border-right: 1.5px solid #54433a;
  transform: rotate(45deg);
  margin-top: 1px;
}

#news .news_inner > a:hover {
  background-color: #54433a;
  color: #ffffff;
}

#news .news_inner > a:hover::after {
  border-color: #ffffff;
}



/* ----------------------
   Staff
-------------------------*/

#staff {
  position: relative;
  background-color: #ffffff;
  padding: 6% 5% 1%;
  margin: 80px 0;
}

#staff::before,
#staff::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

#staff::before {
  top: -79px;
  -webkit-mask-image: url('./images/bg_wave_w_top.png');
  mask-image: url('./images/bg_wave_w_top.png');
}

#staff::after {
  bottom: -79px;
  -webkit-mask-image: url('./images/bg_wave_w_bottom.png');
  mask-image: url('./images/bg_wave_w_bottom.png');
}

#staff .staff_inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 5%;
}

#staff figure {
  position: relative;
  width: 42%;
  flex-shrink: 0;
  margin: 0;
}

#staff figure::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 80%;
  background-color: #e2c775;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  position: absolute;
  top: -6%;
  left: -8%;
  z-index: 1;
}

#staff figure img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
}

#staff .staff_inner > div {
  position: relative;
  width: 53%;
}

#staff h2 {
    position: relative;
    font-size: 190%;
    color: #c09e53;
    line-height: 1.2;
    margin: 0 0 1.2em 0;
    padding: 0 0.8em;
    font-weight: 500;
}

#staff h2::before,
#staff h2::after {
  position: absolute;
  font-size: 220%;
  color: #eae1d3;
  font-family: serif;
  line-height: 1;
  font-weight: normal;
}

#staff h2::before {
  content: "“";
  top: -0.2em;
  left: -0.3em;
}

#staff h2::after {
  content: "”";
  bottom: -0.3em;
  right: 0.2em;
}

#staff p {
  font-size: 90%;
  color: #54433a;
  line-height: 1.9;
  margin: 0 0 2em 0;
}

#staff a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  padding: 0.8em 2.5em;
  border: 1px solid #c09e53;
  border-radius: 30px;
  color: #c09e53;
  text-decoration: none;
  font-size: 90%;
  font-weight: bold;
  transition: all 0.3s;
}

#staff a::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 8px;
  background-color: #c09e53;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M1 7h14L10 1' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M1 7h14L10 1' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color 0.3s;
}

#staff a:hover {
  background-color: #c09e53;
  color: #ffffff;
}

#staff a:hover::after { background-color: #ffffff;}

.img_wan01 {
    position: absolute;
    right: 5%;
    bottom: -25px;
    width: 250px;
    height: auto;
    pointer-events: none;
    z-index: 5;
}


@media (max-width: 768px) {
#staff .staff_inner {
    flex-direction: column;
    gap: 2em;
  }

  #staff figure,
  #staff .staff_inner > div {
    width: 100%;
  }
  #staff h2 {font-size: 135%;}

  .img_wan01 {
        width: 160px;
        right: 0;
        bottom: -56px;
    }

  #staff a {
    margin: 0 auto;
    width: fit-content;
    display: block;
}

}



/* ----------------------
   medical
-------------------------*/
#medical { padding: 8% 5%;}
#medical-sec { padding: 2% 0%;}

#medical .medical_inner,
#medical-sec .medical_inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

#medical h2,
#medical-sec h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-size: 220%;
  font-weight: bold;
  margin: 0 0 0.8em 0;
}

#medical h2 span,
#medical-sec h2 span {
  font-size: 42%;
  color: #c09e53;
  letter-spacing: 0.15em;
  font-weight: normal;
}

#medical .medical_inner > p,
#medical-sec .medical_inner > p {
  font-size: 90%;
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto 3.5em;
}

#medical .medical_inner > ul,
#medical-sec .medical_inner > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2.5%;
  justify-content: center;
}

#medical .medical_inner > ul > li,
#medical-sec .medical_inner > ul > li {
  width: 31.6%;
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 33px;
  box-shadow: 0 10px 25px rgba(187, 167, 147, 0.15);
  transition: transform 0.3s, box-shadow 0.3s;
}

#medical-sec .medical_inner > ul > li:hover { }

#medical .medical_inner > ul > li > a,
#medical-sec .medical_inner > ul > li > a {
  display: block;
  padding: 2.5em 1.5em 1.5em;
  text-decoration: none;
  color: inherit;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

#medical h3,
#medical-sec h3  {
    position: absolute;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    padding: 0.8em 1.6em;
    border-radius: 25px 25px 0 0;
    font-size: 110%;
    margin: 0;
    font-weight: bold;
    white-space: nowrap;
    border-left: 0px solid #593919;
    box-shadow: 0px -2px 2px 0px rgb(187 167 147 / 13%);
}

#medical figure,
#medical-sec figure {
  background-color: #f3ecd4;
  border-radius: 16px;
  margin: 0 0 1.2em 0;
  padding: 1.5em 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}

#medical figure img,
#medical-sec figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

#medical .medical_inner > ul > li ul,
#medical-sec .medical_inner > ul > li ul {
  list-style: none;
  padding: 0 0 1.2em 0;
  margin: 0 0 1em 0;
  border-bottom: 1px dotted #bba793;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0em 1.3em;
  text-align: left;
}

#medical .medical_inner > ul > li ul li,
#medical-sec .medical_inner > ul > li ul li {
  font-size: 95%;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.3em;
  color: #703f1e;
}

#medical .medical_inner > ul > li ul li::before,
#medical-sec .medical_inner > ul > li ul li::before {
  content: "●";
  font-size: 70%;
}

#medical .medical_inner > ul > li > a > span,
#medical-sec .medical_inner > ul > li > a > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-size: 85%;
  color: #c09e53;
  font-weight: bold;
}

#medical .medical_inner > ul > li > a > span::before,
#medical-sec .medical_inner > ul > li > a > span::before {
  content: "›";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #f3ecd4;
  border-radius: 50%;
  text-align: center;
  line-height: 14px;
  font-size: 100%;
}

@media (max-width: 768px) {
#medical .medical_inner > ul,
#medical-sec .medical_inner > ul {
    flex-direction: column;
    gap: 2.5em;
  }

  #medical .medical_inner > ul > li,
  #medical-sec .medical_inner > ul > li {
    width: 90%;
    margin: 0 auto;
  }

#medical .medical_inner > ul > li ul,
#medical-sec .medical_inner > ul > li ul { gap: 0.3em 1.6em;}
#medical .medical_inner > ul > li ul li,
#medical-sec .medical_inner > ul > li ul li { font-size: 100%;}
#medical .medical_inner > ul > li > a > span,
#medical-sec .medical_inner > ul > li > a > span { font-size: 100%;}
}





/* ----------------------
   case
-------------------------*/
#case {
  position: relative;
  background-color: #ffffff;
  padding: 6% 5%;
  margin: 80px 0;
}

#case::before,
#case::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

#case::before {
  top: -79px;
  -webkit-mask-image: url('./images/bg_wave_w_top.png');
  mask-image: url('./images/bg_wave_w_top.png');
}

#case::after {
  bottom: -79px;
  -webkit-mask-image: url('./images/bg_wave_w_bottom.png');
  mask-image: url('./images/bg_wave_w_bottom.png');
}

#case .case_inner {
  max-width: 1000px;
  margin: 0 auto;
}

#case .case_inner > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.5em;
}

#case h2 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-size: 200%;
  font-weight: bold;
  margin: 0;
}

#case h2::before {
    content: "";
    position: absolute;
    left: -95px;
    top: -27px;
    width: 96px;
    height: 96px;
    background: url(./images/img_wan02.png) no-repeat center / contain;
}

#case h2 span {
  font-size: 42%;
  color: #c09e53;
  letter-spacing: 0.15em;
  font-weight: normal;
}

#case .case_inner > div > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.8em;
  background-color: #f3ecd4;
  border-radius: 20px;
  color: #54433a;
  text-decoration: none;
  font-size: 85%;
  font-weight: bold;
  transition: opacity 0.3s;
}

#case .case_inner > div > a::before {
  content: "›";
  font-size: 110%;
  color: #c09e53;
  font-weight: bold;
}

#case .case_inner > div > a:hover {
  opacity: 0.7;
}

#case ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 3.5%;
}

#case ul > li {
  width: 31%;
  position: relative;
}

#case ul > li a {
  display: block;
  text-decoration: none;
  color: inherit;
}

#case figure {
  margin: 0 0 1em 0;
  position: relative;
  aspect-ratio: 4 / 3;
}

#case figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.3s;
}

#case ul > li a:hover figure img {
  transform: scale(1.05);
}

#case ul > li:nth-child(1) figure::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -10px;
  width: 36px;
  height: 36px;
  background: url('./images/icon_nikukyu_b.png') no-repeat center / contain;
  z-index: 2;
  pointer-events: none;
}

#case ul > li:nth-child(2) figure::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: -10px;
  width: 38px;
  height: 38px;
  background: url('./images/icon_flower_b.png') no-repeat center / contain;
  z-index: 2;
  pointer-events: none;
}

#case ul > li:nth-child(3) figure::before {
  content: "";
  position: absolute;
  top: -15px;
  right: -15px;
  width: 44px;
  height: 44px;
  background: url('./images/icon_bone_b.png') no-repeat center / contain;
  z-index: 2;
  pointer-events: none;
}

#case time {
  display: block;
  font-size: 80%;
  margin-bottom: 0.4em;
}

#case p {
  font-size: 90%;
  font-weight: bold;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#case ul > li:nth-child(1)::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -10px;
  width: 36px;
  height: 36px;
  background: url('./images/ill_paw.png') no-repeat center / contain;
  z-index: 2;
  pointer-events: none;
}

#case ul > li:nth-child(2)::after {
  content: "";
  position: absolute;
  bottom: 2.2em;
  right: -12px;
  width: 38px;
  height: 38px;
  background: url('./images/ill_flower.png') no-repeat center / contain;
  z-index: 2;
  pointer-events: none;
}

#case ul > li:nth-child(3)::before {
  content: "";
  position: absolute;
  top: -15px;
  right: -15px;
  width: 44px;
  height: 44px;
  background: url('./images/ill_bone.png') no-repeat center / contain;
  z-index: 2;
  pointer-events: none;
}


@media (max-width: 768px) {
 #case h2 {
        text-align: center;
        margin: 0 auto;
    }

  #case h2::before {
    position: absolute;
    margin-bottom: 0.5em;
  }

  #case .case_inner > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
  }

  #case ul {
    flex-direction: column;
    gap: 2.5em;
  }

  #case ul > li {
    width: 100%;
  }

.case_blogbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.8em;
  background-color: #f3ecd4;
  border-radius: 20px;
  color: #54433a;
  text-decoration: none;
  font-size: 85%;
  font-weight: bold;
  transition: opacity 0.3s;
  width: fit-content;
  margin: 30px auto 0;
}

.case_blogbtn::before {
  content: "›";
  font-size: 110%;
  color: #c09e53;
  font-weight: bold;
}

.case_blogbtn:hover {
  opacity: 0.7;
}

.p-postList.-type-card {padding: 0 30px;}
.p-entry__related .p-postList.-type-card {padding: 0 0px;}
}




/* ----------------------
   hours
-------------------------*/
#hours {
  padding: 8% 5%;
}

#hours .hours_inner {
  max-width: 900px;
  margin: 0 auto;
}

#hours h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  font-size: 200%;
  color: #54433a;
  font-weight: bold;
  margin: 0 0 2.5em 0;
  text-align: center;
}

#hours h2 span {
  font-size: 42%;
  color: #c09e53;
  letter-spacing: 0.15em;
  font-weight: normal;
}

#hours .table_wrap {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  position: relative;
}

/* 背面に配置（z-index: 1） */
#hours .table_wrap::before {
  content: "";
  position: absolute;
  left: 2%;
  top: -50px;
  width: 140px;
  height: 80px;
  background: url('./images/img_nyan01.png') no-repeat center / contain;
  z-index: 1;
  pointer-events: none;
}

/* 前面に配置（z-index: 2） */
#hours table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
  position: relative;
  z-index: 2;
  border-top: 0px;
  border-right: 0px;
}

#hours thead tr:first-child th:first-child {
  border-top-left-radius: 20px;
}
#hours thead tr:first-child th:last-child {
  border-top-right-radius: 20px;
}
#hours tbody tr:last-child th:first-child {
  border-bottom-left-radius: 20px;
}
#hours tbody tr:last-child td:last-child {
  border-bottom-right-radius: 20px;
}

#hours thead {
  background-color: #e2d28b;
  color: #54433a;
}

#hours th,
#hours td {
  padding: 1.1em 0.2em;
  border: 1px solid #eeeeee;
  font-size: 90%;
  vertical-align: middle;
}

#hours thead th {
    border: none;
    font-weight: bold;
    background-color: #e6d88e;
    color: #54433a;
}

#hours tbody th {
  font-weight: bold;
  color: #54433a;
  background-color: #ffffff;
  border-left: none;
}

#hours tbody td {
  color: #54433a;
  background-color: #ffffff;
}

#hours table tr td:last-child,
#hours table tr th:last-child {
  border-right: none;
}

#hours table tr:last-child th,
#hours table tr:last-child td {
  border-bottom: none;
}

#hours table tr th:first-child {
  width: 38%;
}

#hours .notes {
  list-style: none;
  padding: 0;
  margin: 1.5em 0 3.5em 0;
  font-size: 80%;
  color: #54433a;
  line-height: 1.8;
}

#hours .notes span {
  color: #e05275;
  font-weight: bold;
}

#hours .hours_contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5%;
    margin-bottom: 3.5em;
}

#hours .hours_contact > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  width: 49%;
  max-width: 49%;
  padding: 1.2em 1em;
  background: #703f1e;
  color: #ffffff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  font-size: 105%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s;
}

#hours .hours_contact > a::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url("./images/icon_reserve.png") no-repeat center / contain;
}

#hours .hours_contact > a::after {
  content: "›";
  font-size: 120%;
  color: #c09e53;
}

#hours .hours_contact > a:hover {
  opacity: 0.85;
}

#hours .hours_contact > div {
  padding-left: 5%;
  border-left: 1px solid #dcd1c4;
  width: 49%;
}

#hours .hours_contact > div p:first-child {
  font-size: 85%;
  font-weight: bold;
  color: #54433a;
  margin: 0 0 0.3em 0;
}

#hours .hours_contact > div a {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-size: 260%;
  font-weight: bold;
  color: #d0a921;
  text-decoration: none;
  line-height: 1.1;
  margin-bottom: 0.2em;
}

#hours .hours_contact > div a::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  background: url("./images/icon_tel.png") no-repeat center / contain;
}

#hours .hours_contact > div p:last-child {
  font-size: 80%;
  color: #79675c;
  margin: 0;
}

#hours .btn_more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  width: 240px;
  margin: 0 auto;
  padding: 0.8em 0;
  border: 1px solid #79675c;
  border-radius: 30px;
  color: #54433a;
  text-decoration: none;
  font-size: 90%;
  font-weight: bold;
  background-color: #ffffff;
  transition: all 0.3s;
}

#hours .btn_more::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 8px;
  background-color: #54433a;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M1 7h14L10 1' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M1 7h14L10 1' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color 0.3s;
}

#hours .btn_more:hover {
  background-color: #54433a;
  color: #ffffff;
}

#hours .btn_more:hover::after {
  background-color: #ffffff;
}

/* 下層用 */
.sec-table {
    box-shadow: 0 1px 9px rgb(0 0 0 / 9%) !important;
}

.sec-hours {
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 768px) {
  #hours .table_wrap::before {
    left: 5px;
    top: -40px;
    width: 100px;
    height: 60px;
  }

  #hours th,
  #hours td {
    padding: 0.8em 0.1em;
    font-size: 75%;
  }

  #hours table tr th:first-child {
    width: 42%;
  }

  #hours .hours_contact {
    flex-direction: column;
    gap: 2em;
  }

  #hours .hours_contact > a {
    width: 100%;
    max-width: 100%;
  }

  #hours .hours_contact > div {
    padding-left: 0;
    border-left: none;
    text-align: center;
  }

#hours .hours_contact > div p:first-child { text-align: center;}
#hours .hours_contact > div p:last-child {
    font-size: 100%;text-align: center;
}
#hours .hours_contact > div {width: 100%;}

#hours thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
}
#hours thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
}
#hours tbody tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
}
#hours tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

}



/* ----------------------
   access
-------------------------*/
#access {
    position: relative;
    background: url(./images/bg_wave_brown_middle.png) repeat center / contain;
    padding: 2% 0%;
    margin: 80px 0;
    color: #ffffff;
    opacity: 0;
    transition: opacity 1.2s ease;
}

#access.is-inview {
  opacity: 1;
}

#access::before{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 165px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#access::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 141px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#access::before {
    top: -160px;
    background-image: url(./images/bg_wave_brown_top.png);
}

#access::after {
    bottom: -131px;
    background-image: url(./images/bg_wave_brown_bottom.png);
}


#access .access_inner {
  max-width: 1100px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

#access .access_inner.is-inview {
  opacity: 1;
  transform: translateY(0);
}

#access h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  font-size: 200%;
  color: #ffffff;
  font-weight: bold;
  margin: 0 0 2.5em 0;
  text-align: center;
}

#access h2 span {
  font-size: 42%;
  color: #e2d28b;
  letter-spacing: 0.15em;
  font-weight: normal;
}

#access .access_inner > div {
  display: flex;
  align-items: flex-start;
  gap: 5%;
}

#access figure {
  width: 40%;
  overflow: hidden;
  margin: 0;
  flex-shrink: 0;
}

#access figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#access .access_inner > div > div {
  width: 51%;
}

#access h3 {
  font-size: 150%;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 1.2em 0;
  padding-bottom: 0.8em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

#access h3 span {
  display: block;
  font-size: 85%;
  font-weight: bold;
  margin-top: 0.2em;
}

#access dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1.2em 0.8em;
  margin: 0 0 2em 0;
  line-height: 1.6;
}

#access dt {
  font-weight: bold;
  font-size: 95%;
}

#access dd {
  margin: 0;
  font-size: 95%;
}

#access dd p {
  margin: 0 0 0.6em 0;
}

#access dd > a[target="_blank"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 1.2em;
  border: 1px solid #ffffff;
  border-radius: 20px;
  color: #ffffff;
  text-decoration: none;
  font-size: 85%;
  transition: all 0.3s;
}

#access dd > a[target="_blank"]::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

#access dd > a[target="_blank"]:hover {
  background-color: #ffffff;
  color: #5b3318;
}

#access dd > a[target="_blank"]:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b3318'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

#access dd ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#access dd ul li {
  position: relative;
  padding-left: 1em;
}

#access dd ul li::before {
  content: "・";
  position: absolute;
  left: 0;
}

#access dd > a[href^="tel"] {
  font-size: 120%;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  margin-right: 0.5em;
}

#access dd > span {
  font-size: 80%;
  display: inline-block;
}

#access .table_wrap {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.2em;
}

#access table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
  border-top: 0px;
  border-right: 0px;
}

#access thead tr:first-child th:first-child { border-top-left-radius: 20px; }
#access thead tr:first-child th:last-child { border-top-right-radius: 20px; }
#access tbody tr:last-child th:first-child { border-bottom-left-radius: 20px; }
#access tbody tr:last-child td:last-child { border-bottom-right-radius: 20px; }

#access thead th {
  background-color: #e2d28b;
  color: #54433a;
  font-weight: bold;
  padding: 1em 0.2em;
  border: none;
  font-size: 85%;
}

#access th,
#access td {
  padding: 0.9em 0.2em;
  border-bottom: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  font-size: 80%;
  vertical-align: middle;
}

#access tbody th {
  font-weight: bold;
  color: #54433a;
  background-color: #ffffff;
}

#access tbody td {
  color: #54433a;
  background-color: #ffffff;
}

#access table tr td:last-child,
#access table tr th:last-child {
  border-right: none;
}

#access table tr:last-child th,
#access table tr:last-child td {
  border-bottom: none;
}

#access table tr th:first-child {
  width: 38%;
}

#access .notes {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 75%;
  color: #ffffff;
  line-height: 1.7;
}

#access .notes span {
  color: #ffb8c6;
  font-weight: bold;
}

@media (max-width: 850px) {

  #access {
    position: relative;
    background: url(./images/bg_wave_brown_middle.png) repeat;
    background-size: 100%;
     padding: 18% 5%;
}

#access::before {
    top: -102px;
    background-image: url(./images/bg_wave_brown_top.png);
    background-size: contain;
}
#access::after {
    bottom: -91px;
    background-image: url(./images/bg_wave_brown_bottom.png);
    background-size: contain;
}

  #access .access_inner > div {
    flex-direction: column;
    gap: 2em;
    align-items: center;
  }

  #access figure {
    width: 90%;
    /*max-width: 320px;*/
  }

  #access .access_inner > div > div {
    width: 100%;
  }

#access thead tr:first-child th:first-child { border-top-left-radius: 10px; }
#access thead tr:first-child th:last-child { border-top-right-radius: 10px; }
#access tbody tr:last-child th:first-child { border-bottom-left-radius: 10px; }
#access tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }

}

/* ----------------------
   banner
-------------------------*/
#banner {
  padding: 6% 5%;
}

#banner .banner_inner {
  max-width: 900px;
  margin: 0 auto;
}

/* --- #banner（li が順番にフェードイン） --- */
#banner .banner_inner li {
  opacity: 0;
}

#banner .banner_inner.is-inview li:nth-child(1) {
  animation: medicalFadeUp 0.9s ease forwards;
}

#banner .banner_inner.is-inview li:nth-child(2) {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 0.2s;
}

#banner ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 4%;
}

#banner li {
  width: 48%;
  max-width: 420px;
}

#banner a {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

#banner a:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

#banner img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  #banner ul {
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
  }

  #banner li {
    width: 100%;
    max-width: 400px;
  }
}

/* ----------------------
   footer
-------------------------*/
#footer_img_wannyan { width: 100%; margin-top: 40px;}
#footer { background: #eadac3;}

.l-footer__nav {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 4px 24px;
    width: 70%;
    margin: 0 auto;
}

/* 子孫セレクタでの指定 */
.l-footer__nav li { width: fit-content; }
.l-footer__nav a {
    font-size: 0.9rem;
    color: #703f1e;
}
.l-footer__nav a::before {
  content: "";
  display: inline-block;
  width: 8px; 
  height: 8px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
  margin-right: 10px;
  flex-shrink: 0; 
}

#footer_info {
    display: flex;
    width: 800px;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    margin: 40px auto;
    font-size: 90%;
    color: #703f1e;
}

#footer_info img { width: 40%;}
#footer_info address {font-style: normal; width: 60%;}
#footer_info address span { font-weight: bold;font-size: 105%; display: block; }


@media (max-width: 768px) {
  #footer_info {
    width:100%;
    flex-direction: column;
  }
#footer_info img { width: 60%;}
  .l-footer__nav {
    display: grid;
    grid-template-columns: repeat(1, max-content);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 4px 20px;
    width: 100%;
    margin: 0 auto;
}
#footer_info address {
    font-style: normal;
    width: 90%;
}

#footer { margin-bottom: 70px;}

}



/* to top */
.u-flex--c {border-radius: 50px;}
.c-fixBtn { background: #814d08;}

/* ----------------------
   スクロールフェードイン演出
--------------------------*/

/* --- #key（読み込み時：img → h2 の順） --- */
#key figure img {
  opacity: 0;
  animation: keyFadeUp 1.2s ease forwards;
  animation-delay: 0.2s;
}

#key h2 {
  opacity: 0;
  animation: keyFadeUp 1.2s ease forwards;
  animation-delay: 1.1s;
}

@keyframes keyFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- #news / #staff（スクロールで画面に入ったらフェードイン） --- */
#news .news_inner,
#staff {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

#news .news_inner.is-inview,
#staff.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* --- #medical（h2 → p → li の順に段階的に表示） --- */
#medical .medical_inner h2,
#medical .medical_inner > p,
#medical .medical_inner > ul > li {
  opacity: 0;
}

@keyframes medicalFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#medical .medical_inner.is-inview h2 {
  animation: medicalFadeUp 0.9s ease forwards;
}

#medical .medical_inner.is-inview > p {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 0.5s;
}

#medical .medical_inner.is-inview > ul > li:nth-child(1) {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 1s;
}

#medical .medical_inner.is-inview > ul > li:nth-child(2) {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 1.2s;
}

#medical .medical_inner.is-inview > ul > li:nth-child(3) {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 1.4s;
}

/* --- #medical li ホバー時のリフト演出（liは登場アニメーション対象のため、動きはa側に持たせて分離） --- */
#medical .medical_inner > ul > li > a {
  transition: transform 0.3s ease;
}

#medical .medical_inner > ul > li:hover > a,
#medical-sec .medical_inner > ul > li:hover > a {
  transform: translateY(-5px);
}

/* --- #case（case_inner全体 → li は順番に表示） --- */
#case .case_inner {
  opacity: 0;
}

#case .case_inner > ul > li {
  opacity: 0;
}

#case .case_inner.is-inview {
  animation: medicalFadeUp 0.9s ease forwards;
}

#case .case_inner.is-inview > ul > li:nth-child(1) {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 0.6s;
}

#case .case_inner.is-inview > ul > li:nth-child(2) {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 0.8s;
}

#case .case_inner.is-inview > ul > li:nth-child(3) {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 1s;
}

/* --- #hours（h2 → table_wrap → notes → hours_contact → btn_more の順） --- */
#hours .hours_inner > h2,
#hours .hours_inner > .table_wrap,
#hours .hours_inner > .notes,
#hours .hours_inner > .hours_contact,
#hours .hours_inner > .btn_more {
  opacity: 0;
}

#hours .hours_inner.is-inview > h2 {
  animation: medicalFadeUp 0.9s ease forwards;
}

#hours .hours_inner.is-inview > .table_wrap {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 0.3s;
}

#hours .hours_inner.is-inview > .notes {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 0.6s;
}

#hours .hours_inner.is-inview > .hours_contact {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 0.9s;
}

#hours .hours_inner.is-inview > .btn_more {
  animation: medicalFadeUp 0.9s ease forwards;
  animation-delay: 1.2s;
}


/* ----------------------
   Contact Form 
-------------------------*/
 
.wpcf7-form {
  background: #f8f3ea;
  border-radius: 20px;}
  
.cf7-form {
  max-width: 640px;
  margin: 0 auto;
}
 
.cf7-form p {
  margin: 0 0 0em !important;
}
 
.cf7-form label {
  display: inline-block;
  font-weight: bold;
  font-size: 15px;
  color: #5d3d2e;
  margin-bottom: 0.5em;
}
 
.cf7-form .required {
  color: #c0392b;
  margin-left: 0.3em;
  font-size: 13px;
}
 
.cf7-form .note {
  display: inline-block;
  font-size: 13px;
  color: #8a7a6d;
  margin-bottom: 0.6em;
}
 
/* テキスト・電話・メール・テキストエリア共通 */
.cf7-form input[type="text"],
.cf7-form input[type="tel"],
.cf7-form input[type="email"],
.cf7-form input[type="date"],
.cf7-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.9em 1em;
  border: 1px solid #ddd0c4;
  border-radius: 10px;
  background-color: #fffefc;
  font-size: 15px;
  font-family: inherit;
  color: #333;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
 
.cf7-form textarea {
  min-height: 150px;
  resize: vertical;
}
 
.cf7-form input[type="text"]:focus,
.cf7-form input[type="tel"]:focus,
.cf7-form input[type="email"]:focus,
.cf7-form input[type="date"]:focus,
.cf7-form textarea:focus {
  outline: none;
  border-color: #ccb7a5;
  box-shadow: 0 0 0 3px rgba(204, 183, 165, 0.3);
}
 
.cf7-form input::placeholder,
.cf7-form textarea::placeholder {
  color: #b9aea3;
}
 
/* ラジオボタン（犬／猫、オス／メス） */
.cf7-form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
 
.cf7-form .wpcf7-list-item {
  margin: 0;
}
 
.cf7-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border: 1px solid #ddd0c4;
  border-radius: 999px;
  background-color: #fffefc;
  font-weight: normal;
  font-size: 15px;
  color: #5d3d2e;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
 
.cf7-form .wpcf7-list-item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  display: inline-block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  border-radius: 50%;
  border: 2px solid #ccb7a5;
  margin: 0;
  padding: 0;
  position: relative;
  flex: none;
}
 
.cf7-form .wpcf7-list-item input[type="radio"]:checked {
  border-color: #5d3d2e;
}
 
.cf7-form .wpcf7-list-item input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #5d3d2e;
}
 
.cf7-form .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label {
  color: #5d3d2e;
}
 
.cf7-form .wpcf7-list-item:has(input[type="radio"]:checked) label {
  background-color: #f5ede4;
  border-color: #5d3d2e;
}
 
/* 送信ボタン */
.cf7-form input[type="submit"] {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 2em auto 0;
  padding: 1em 2em;
  border: none;
  border-radius: 999px;
  background-color: #5d3d2e;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
 
.cf7-form input[type="submit"]:hover {
  background-color: #814d08;
  transform: translateY(-2px);
}
 
.cf7-form input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
 
/* バリデーションエラー */
.cf7-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.5em;
  font-size: 13px;
  color: #c0392b;
}
 
.cf7-form input.wpcf7-not-valid,
.cf7-form textarea.wpcf7-not-valid {
  border-color: #c0392b;
}
 
.cf7-form .wpcf7-response-output {
  margin-top: 2em;
  padding: 1em 1.5em;
  border-radius: 10px;
  font-size: 14px;
}
 
@media (max-width: 600px) {
  .cf7-form { padding: 0 10px;}

  .cf7-form .wpcf7-radio {
    gap: 10px;
  }
  .cf7-form .wpcf7-list-item label {
    padding: 0.6em 1.3em;
    font-size: 14px;
  }
}
 
/* ----------------------
   ①固定 電話／LINE予約バー
   （画面下部・右側に固定。少しスクロールしたら表示）
-------------------------*/
.fixed-contact {
  position: fixed;
  right: -12px;
  bottom: 76px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fixed-contact.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fixed-contact__line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border-radius: 10px;
  padding: 8px 18px 8px 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.fixed-contact__line:hover {
  transform: translateY(-2px);
}

.fixed-contact__line-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #06c755;
  flex-shrink: 0;
}

.fixed-contact__line-icon svg {
  width: 20px;
  height: 20px;
}

.fixed-contact__line-text {
  font-weight: bold;
  font-size: 15px;
  color: #333;
  white-space: nowrap;
}

.fixed-contact__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border-radius: 11px;
  padding: 12px 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.fixed-contact__tel:hover {
  transform: translateY(-2px);
}

.fixed-contact__tel-icon {
  color: #4c8a34;
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.fixed-contact__tel-body {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.fixed-contact__tel-number {
  font-size: 160%;
  font-weight: bold;
  color: #4c8a34;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.fixed-contact__tel-hours {
  font-size: 11px;
  color: #4c8a34;
  white-space: nowrap;
}

@media (max-width: 768px) {
.fixed-contact {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0px;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    width: 100vw;
}

.fixed-contact__tel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #55433a;
    border-radius: 0px;
    padding: 6px 0px 14px;
    box-shadow: 0 4px 0px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    transition: transform 0.2s ease;
    width: 70%;
    justify-content: center;
}
.fixed-contact__tel-hours {
        font-size: 80%;
        color: #ffffff;
        white-space: nowrap;
        letter-spacing: -0.01em;
    }

.fixed-contact__tel-icon {
    color: #ffffff;
    font-size: 30px;
    flex-shrink: 0;
    line-height: 1;
}

.fixed-contact__tel-number {
        font-size: 186%;
        font-weight: bold;
        color: #ffffff;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

.fixed-contact__line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0dc755;
    border-radius: 0px;
    padding: 8px 0px 8px 8px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
    text-decoration: none;
    transition: transform 0.2s ease;
    width: 30%;
    text-align: center;
    justify-content: center;
}

.fixed-contact__line-text {
    font-weight: bold;
    font-size: 90%;
    color: #ffffff;
    white-space: nowrap;
}

  .fixed-contact__line-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #0dc755;
    flex-shrink: 0;
}
.fixed-contact__line-icon svg {
    width: 35px;
    height: 35px;
}

.fixed-contact__line:hover,
.fixed-contact__tel:hover {
  transform: translateY(0px);
}


}

/* ----------------------
   ②固定 サイドボタン（鳥類／エキゾチック）
   お知らせエリアまでは画面右端・縦中央に固定表示
-------------------------*/
.side-info-btns {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 850;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.side-info-btns__item {
  display: block;
  line-height: 0;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: 0s;
}

.side-info-btns.is-visible .side-info-btns__item:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1s;
}

.side-info-btns.is-visible .side-info-btns__item:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.3s;
}

.side-info-btns__item img {
  display: block;
  width: 140px;
  height: auto;
}

@media (max-width: 600px) {
  .side-info-btns__item img {
    width: 96px;
  }
  .side-info-btns {
  position: fixed;
  top: 15%;}
}

/* totop */
.p-fixBtnWrap {bottom: 3%;}

/* ----------------------
   ドロワーメニュー表示中は固定ボタン類を隠す
   （data-drawerが"closed"以外になったら非表示）
-------------------------*/
html:not([data-drawer="closed"]) .fixed-contact,
html:not([data-drawer="closed"]) .side-info-btns {
  display: none !important;
}