@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.openbtn1{display:none;}
#g-nav{display:none;}
.logo-header img {width: 120px; height: auto;}
.header-container{height:0;}
.header-container-in{z-index:10;position:relative;}
.header-in {margin-top:0!important;width:100%!important;}
.header-bar {display:flex;flex-direction:row;justify-content:space-between;width:90%!important;margin:auto;}
.content {margin-top:0;}
.wrap{width:100%;}
.logo-image {text-align:left;padding:0;}
.header-menu{width:80%;display:flex;flex-direction:row;justify-content:space-between;}
.insta{width:5%;position:relative;top:20px;transition:0.7s;}
a.insta:hover{opacity:0.7;}
.header-menu ul{width:90%;display:flex;flex-direction:row;justify-content:space-between;position:relative;top:30px;}
.header-menu ul li{list-style:none;text-decoration:none;}
.header-menu ul li a{text-decoration:none;color:#221815;font-size:100%;display: inline-block;position: relative;}
.header-menu ul li a::after {position: absolute;content: '';bottom: 0;left: 0;width: 0;height:2px;background:#221815;transition: all .3s ease 0s;}
.header-menu ul li a:hover {cursor: pointer;}
.header-menu ul li a:hover::after {width: 100%;}
.logo-area{width:20%;}
#fixed-header {position: fixed;top:-155px;width:100%;box-sizing: border-box;transition: .5s;background:rgb(255,255,255,0.9);box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.1);}
.fixed-bar{width:90%;display:flex;flex-direction:row;justify-content:space-between;margin:auto;}
#fixed-header ul{width:90%;display:flex;flex-direction:row;justify-content:space-between;position:relative;top:30px;}
#fixed-header ul li{list-style:none;text-decoration:none;}
#fixed-header ul li a{text-decoration:none;color:#221815;font-size:100%;display: inline-block;position: relative;}
#fixed-header ul li a::after {position: absolute;content: '';bottom: 0;left: 0;width: 0;height:2px;background:#221815;transition: all .3s ease 0s;}
#fixed-header ul li a:hover {cursor: pointer;}
#fixed-header ul li a:hover::after {width: 100%;}
#fixed-header.is-show {top: 0;}
.cf::after {display:none;}
.m-top-img{display:none;}
.top-img{text-align:right;}
.top-img img{width:90%;opacity:0.7;}
.fv{position:relative;}
.catch{position:absolute;top:50%;left:50px;font-size:200%;font-weight:normal;}
.catch br{display:none;}
main#main.main{padding:0;}
.footer {margin-top:0;}
.h2-bx{margin:100px 0;}
.h2-concept{padding-left:100px;border-bottom:solid 1px #221815;display:inline-block;font-size:170%;font-weight:normal;color:#221815;}
.h3-concept{font-size:150%;font-weight:normal;color:#221815;text-align:center;}
.concept-ctt{width:60%;margin:auto;margin-top:50px;margin-bottom:50px;}
.concept-ctt p{text-align:left;}
.concept-img img{width:30%;}
.btnarrow4{font-size:100%;position: relative;display: inline-block;padding: 0 20px;color:#221815;text-decoration: none;outline: none;}
.btnarrow4::before{content: '';position: absolute;bottom:-8px; left:15%; width: 85%; height: 1px;background:#221815;transition: all .3s;}
.btnarrow4::after{content: '';position: absolute;bottom:-3px;right:0;width: 15px;height:1px;background:#221815;transform: rotate(35deg);transition: all .3s;}
.btnarrow4:hover::before{left:20%;}
.btnarrow4:hover::after{right:-5%;}
.btnarrow4:hover{color:#000;}
.btn-bx{text-align:right;margin-top:50px;}
#menu{position:relative;padding:100px 0 0 0;}
.menu-bx{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;}
.bx1{height:350px;width:25%;background:url(img/bx-img1.jpg);background-size:cover;background-repeat:no-repeat;position:relative;}
.bx2{height:350px;width:25%;background:url(img/bx-img5.png);background-size:contain;background-repeat:no-repeat;background-position:center bottom 30%;position:relative;}
.bx3{height:350px;width:25%;background:url(img/bx-img2.jpg);background-size:cover;background-repeat:no-repeat;position:relative;}
.bx4{height:350px;width:25%;height:350px;width:25%;background:url(img/bx-img6.png);background-size:contain;background-repeat:no-repeat;background-position:center bottom 30%;position:relative;}
.bx5{height:350px;width:25%;height:350px;width:25%;background:url(img/bx-img7.png);background-size:contain;background-repeat:no-repeat;background-position:center bottom 30%;position:relative;}
.bx6{height:350px;width:25%;background:url(img/bx-img3.jpg);background-size:cover;background-repeat:no-repeat;position:relative;}
.bx7{height:350px;width:25%;height:350px;width:25%;background:url(img/bx-img8.png);background-size:contain;background-repeat:no-repeat;background-position:center bottom 30%;position:relative;}
.bx8{height:350px;width:25%;background:url(img/bx-img4.png);background-size:cover;background-repeat:no-repeat;position:relative;}
.bx-bg{width:100%;height:100%;background:rgb(0,0,0,0.5);transition:0.7s;display:block;padding-top:45%;text-align:center;color:#fff!important;text-decoration:none;font-size:150%;z-index:12;}
.bx-bg:hover{background:rgb(0,0,0,0);}
#information{position:relative;padding:0;}
.info-bx{display:flex;flex-direction:row;justify-content:flex-start;}
.info-ctt{width:55%;padding:200px 0 200px 100px;}
.h2-info{writing-mode: vertical-rl;color:#221815;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);font-size:170%;font-weight:normal;color:#221815;}
.h2-info-bx{background:#f7f2ed;width:25%;position:relative;}
.t-list{border-bottom:solid 1px #221815;padding:30px 0 20px 0;}
.t-list a{color:#221815;}
#contact{height:350px;width:100%;background:url(img/contact-bg.jpg);background-size:cover;background-repeat:no-repeat;position:relative;}
.contact-bx{height:350px;width:100%;background:rgb(0,0,0,0.4);display:flex;flex-direction:row;justify-content:space-between;padding:100px 400px;align-items:center;}
.contact-ctt{width:50%;color:#fff;}
.contact-btn a{color:#221815;border:solid 2px #fff;background:#fff;padding:10px 30px;text-decoration:none;transition:0.7s;}
.contact-btn a:hover{color:#fff;border:solid 2px #fff;background:transparent;}
.reserve-btn a{color:#221815;border:solid 2px #88A476;background:#88A476;padding:10px 30px;text-decoration:none;transition:0.7s;}
.reserve-btn a:hover{color:#88A476;border:solid 2px #88A476;background:transparent;transition:0.7s;}
#access{padding:0;}
iframe {display: block;}
#footer{padding:0;}
.footer-bx{height:400px;width:100%;background:url(img/footer-bg.jpg);background-size:cover;background-repeat:no-repeat;position:relative;background-position:center;}
.footer-ctt{height:400px;width:100%;background:rgb(0,0,0,0.5);display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:auto;padding:0 300px;}
.footer-address{color:#fff;width:70%;}
.f-logo img{width:30%;}
.footer-menu{width:30%;}
.footer-menu ul li{list-style:none;padding:5px 0;}
.footer-menu ul li a{text-decoration:none;transition:0.7s;}
.footer-menu ul li a:hover{opacity:0.7;}

/*下層共通*/
.under-bx{height:60vh;display:flex;flex-direction:row;justify-content:space-between;position:relative;}
.h1-under-bx{background:#f7f2ed;width:25%;position:relative;text-align:center;}
.h1-under{writing-mode: vertical-rl;color:#221815;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);font-size:170%;font-weight:normal;color:#221815;height:100%;}
.h1-under2{font-weight:normal;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);font-size:140%;width: 100%;text-align: center;}
.h1-under2::before {background-color:#221815;bottom:-5px;content: "";height: 1px;left: 50%;position: absolute;transform: translateX(-50%);width: 30px;}
.h1-under3{font-weight:normal;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);font-size:140%;}
.h1-under3::before {background-color:#221815;bottom:-5px;content: "";height: 1px;left: 50%;position: absolute;transform: translateX(-50%);width: 30px;}
.under-inner{width:70%;margin:auto;padding:100px 0;position:relative;}
.h2-under{font-size:120%;border-bottom:solid 1px #221815;margin-bottom:30px;}
.under-ctt{margin-bottom:50px;}
.pagination {margin:100px 0 50px 0;}
.pagination .current{background:#221815;color:#fff;}
.h2-under2{position: relative;display: inline-block;padding: 0 55px;text-align:center;color:#221815;font-size:130%;}
.h2-under2:before, .h2-under2:after {content: '';position: absolute;top: 50%;display: inline-block;width:45px;height: 1px;background-color:#221815;}
.h2-under2:before {left:0;}
.h2-under2:after {right: 0;}
.h2-bx2{text-align:center;margin:30px;}
.h3-under{position: relative;display: inline-block;padding: 0 55px;text-align:center;color:#221815;font-size:110%;}
.h3-under:before, .h3-under:after {content: '';position: absolute;top: 50%;display: inline-block;width:45px;height: 1px;background-color:#221815;}
.h3-under:before {left:0;}
.h3-under:after {right: 0;}
.h3-bx{text-align:center;margin:30px;}
.h3-under2{text-align:center;margin-bottom:30px;}

/*contact*/
.table-contact th{border:none;background:transparent;display:block;width:100%;text-align:left;}
.table-contact td{border:none;background:transparent;display:block;width:100%;}
table tr:nth-of-type(2n+1) {background:transparent;}
.must{background:#f7f2ed;font-size:80%;margin-left:10px;padding:5px;}
.c-button{text-align:center;margin-top:30px;}
input[type='submit'] {color:#fff;text-decoration:none;background:#221815;width:180px;display:inline-block;padding:10px;border:solid 1px #221815;height:40px;}
input[type='submit']:hover{background:#fff;border:solid 1px #221815;color:#221815;transition-duration: .7s;}
.wpcf7-spinner {display:none;}

/*about*/
.about-table{margin-bottom:150px;}
.about-table th{width:30%;background:#f7f2ed;}
.about-table td{width:70%;}
.about-table:last-child{margin-bottom:0;}

/*staff*/
.staff-bx{margin-bottom:100px;}
.staff-ctt{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;}
.staff-img{width:30%;}
.staff-txt{width:70%;padding:0 20px;font-size:90%;}
.staff-table th{width:30%;background:#f7f2ed;}
.staff-table td{width:70%;}
.slider1{display:flex;flex-direction:row;justify-content:space-between;margin: 100px 0; width:90%;margin:auto;}
.slick-slide {margin: 0 10px;}
.slick-slide img{border-radius:20px;}
.slide-arrow {bottom: 0;height: 0;margin: auto;position: absolute;top: 0;width: 0;}
.prev-arrow {cursor:pointer;left:-50px;background:#f7f2ed;width:50px;height:50px;border-radius:50%;border:none;z-index:3;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition: -webkit-transform ease-out 200ms;transition: -webkit-transform ease-out 200ms;transition: transform ease-out 200ms;transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;}
.prev-arrow::before {font-family:"Font Awesome 5 Free";content:"\f104"; font-size:22px;font-weight:900;color:#fff;}
.next-arrow {cursor:pointer;right:-50px;background:#f7f2ed;width:50px;height:50px;border-radius:50%;border:none;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition: -webkit-transform ease-out 200ms;transition: -webkit-transform ease-out 200ms;transition: transform ease-out 200ms;transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;}
.next-arrow::before {font-family:"Font Awesome 5 Free";content:"\f105"; font-size:22px;font-weight:900;color:#fff;}

/*product*/
.product-mes{margin-bottom:100px;}
.product-ctt{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:50px;flex-wrap:wrap;}
.product-ctt:last-child{margin-bottom:0;}
.product-ctt2{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:50px;flex-wrap:wrap;}
.product-txt{width:50%;padding-left:30px;}
.product-txt2{width:50%;padding-right:30px;}
.product-img{width:50%;}

/*tirimming*/
.td-caution{border:none!important;}
.trimming-table{margin-bottom:150px;}
.trimming-table th{border-top:none;border-left:none;border-right:none;border-bottom: solid 1px #221815;background:transparent;width:40%;}
.trimming-table td{border-top:none;border-left:none;border-right:none;border-bottom: solid 1px #221815;background:transparent;width:60%;}
.trimming-td{width:30%!important;text-align:center;}
.course-bx{display:flex;flex-direction:row;justify-content:space-between;margin:50px 0 100px 0;flex-wrap:wrap;}
.course-img{width:50%;}
.course-ctt{width:50%;padding-left:30px;}
.course-ctt2{width:50%;padding-right:30px;}
.course-ex{background:#f7f2ed;padding:50px;}
.price-bx{background:#f7f2ed;padding:10px;display:flex;flex-direction:row;justify-content:space-around;margin-top:20px;}
.trimming-bx{margin-bottom:30px;}

/*senior daycare*/
.senior-bx{margin-bottom:100px;text-align:center;display: block;}
.senior-bx p{text-align:left;display:inline-block;}
.ul-care{margin-bottom:100px;}

.insta-bx{width:60%;margin:auto;}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
.catch {left: 10px;font-size: 150%;}
.catch br{display:block;}
.fixed-bar { align-items: center;}
.insta-m{top:20px;position:relative;}
#g-nav{display:block;position:fixed;z-index:10;top:0;right: -120%;width:100%; height: 100vh;background:#f7f2ed;;transition: all 0.6s;}
#g-nav.panelactive{right: 0;}
#g-nav.panelactive #g-nav-list{position: fixed;z-index: 999; width:100%; height: 100vh;overflow: auto;-webkit-overflow-scrolling: touch;}
#g-nav-list ul {text-align:center;display:block!important;position: absolute;z-index: 999;top:50%;left:50%;transform: translate(-50%,-50%);padding-left:0;width:100%;}
#g-nav-list li{ list-style: none;text-align: center;padding:5px 0;}
#g-nav-list li a{color:#221815;font-size:120%;text-decoration: none;display: block;letter-spacing: 0.1em;transition:0.7s;}
#g-nav-list li a:hover{opacity:0.7;}
.openbtn1{display:block;position:relative;z-index: 9999;cursor: pointer;width: 50px;height:50px;}
.openbtn1 span{display: inline-block; transition: all .4s; position: absolute;left: 14px;height:2px;background-color:#221815;width: 60%;}
.openbtn1 span:nth-of-type(1) {top:15px; }
.openbtn1 span:nth-of-type(2) {top:23px;}
.openbtn1 span:nth-of-type(3) { top:31px;}
.openbtn1.active span:nth-of-type(1) { top: 18px;left: 18px;transform: translateY(6px) rotate(-45deg); width: 60%;}
.openbtn1.active span:nth-of-type(2) { opacity: 0;}
.openbtn1.active span:nth-of-type(3){ top: 30px;left: 18px; transform: translateY(-6px) rotate(45deg);width: 60%;}
.logo-area { width:25%;}
.site-name-text-link {text-decoration:none;padding:0;}
.top-img img{display:none;}
.m-top-img{display:block;text-align:right;}
.m-top-img img{width:90%;opacity:0.7;}
#fixed-header ul{display:none;}
.logo-header img {width:200px;}
.header-menu{display:none;}
.h2-bx{margin:50px 0;}
.concept-ctt {width: 90%;margin-top:30px;margin-bottom:30px;}
.concept-img img {width: 80%;}	
.bx1{height:180px;width:50%;order:1;}
.bx2{height:180px;width:50%;order:2;}
.bx3{height:180px;width:50%;order:4;}
.bx4{height:180px;width:50%;order:3;}
.bx5{height:180px;width:50%;order:6;}
.bx6{height:180px;width:50%;order:5;}
.bx7{height:180px;width:50%;order:7;}
.bx8{height:180px;width:50%;order:8;}
.info-ctt {width:80%;padding:50px 20px;}	
.h2-info-bx {width:20%;}
.contact-bx {flex-direction:column;padding:80px 0 120px 0;text-align:center;}
.contact-btn{margin:15px 0;}
.reserve-btn{margin:15px 0;}
.footer-ctt {text-align:center;padding: 0 20px;}	
.footer-menu{display:none;}
.f-logo img {width:50%;}
.under-inner{width:90%;}
.staff-img{width:100%;}
.staff-txt{width:100%;padding:0 0 20px 0;}
.product-txt{width:100%;padding:0}
.product-txt2{width:100%;padding:0}
.product-img{width:100%;}
.product-ctt2{flex-direction:column-reverse;}
.h1-under2 {left:60%;width:80%;}
.h1-under3 {left:70%;width:70%;}
.h1-under3:before{left:40%;}
.trimming-table {margin-bottom:100px;}
.course-ex {padding:20px;}
.course-img{width:100%;}
.course-ctt{width:100%;padding-left:0;}
.course-ctt2{width:100%;padding-right:0;}
.footer-address{width:100%;}
.insta-bx{width:90%;}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* === Mercury Dog & Cat / Staff section === */
.mdc-staff,
.mdc-staff * {
  box-sizing: border-box;
}

.mdc-staff {
  --mdc-ink: #221815;
  --mdc-accent: #88a476;
  --mdc-muted: #8a8272;
  background: #ffffff;
  padding: clamp(56px, 8vw, 104px) 24px;
  color: var(--mdc-ink);
  font-family: "Yu Gothic", "游ゴシック", YuGothic,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mdc-staff .mdc-staff__inner {
  max-width: 900px;
  margin: 0 auto;
}

.mdc-staff .mdc-staff__head {
  text-align: center;
  margin: 0 0 clamp(40px, 6vw, 72px);
}

.mdc-staff .mdc-staff__en {
  margin: 0;
  font-weight: 400;
  line-height: 1;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: 0.12em;
  color: var(--mdc-ink);
}

.mdc-staff .mdc-staff__ja {
  margin: 18px 0 0;
  font-size: 13px;
  letter-spacing: 0.35em;
  color: var(--mdc-muted);
  padding-left: 0.35em;
}

.mdc-staff .mdc-staff__ja::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--mdc-accent);
  margin: 0 auto 16px;
}

.mdc-staff .mdc-staff__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(44px, 6vw, 60px) clamp(28px, 4vw, 48px);
}

.mdc-staff .mdc-staff__card {
  width: 240px;
  max-width: 100%;
  text-align: center;
}

.mdc-staff .mdc-staff__photo {
  width: 160px;
  height: 160px;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  background: #f3f1ec;
  border: 1px solid #eae6de;
}

.mdc-staff .mdc-staff__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.mdc-staff .mdc-staff__card:hover .mdc-staff__photo img {
  transform: scale(1.04);
}

.mdc-staff .mdc-staff__role {
  margin: 0 0 8px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--mdc-accent);
}

.mdc-staff .mdc-staff__name {
  margin: 0 0 14px;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--mdc-ink);
}

.mdc-staff .mdc-staff__kana {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--mdc-muted);
  font-weight: 400;
}

.mdc-staff .mdc-staff__tagline {
  min-height: 3.45em;
  margin: 0 auto 12px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.72;
  letter-spacing: 0.03em;
  color: #3f4c39;
}

.mdc-staff .mdc-staff__msg {
  max-width: 230px;
  margin: 0 auto;
  font-size: 13.5px;
  line-height: 1.9;
  color: #4a453d;
  text-align: left;
}

@media (max-width: 559px) {
  .mdc-staff .mdc-staff__card {
    width: min(320px, 100%);
  }

  .mdc-staff .mdc-staff__msg {
    max-width: 280px;
  }

  .mdc-staff .mdc-staff__tagline {
    min-height: 0;
  }
}

/* --- Hero上のキャッチコピー：白フチで可読性を確保 --- */
.fv .catch {
  text-shadow:
    0 0 10px rgba(255, 255, 255, 1),
    0 0 20px rgba(255, 255, 255, 0.89),
    0 0 31px rgba(255, 255, 255, 0.76),
    0 0 41px rgba(255, 255, 255, 0.63),
    0 1px 2px rgba(255, 255, 255, 1);
}

/* --- ヘッダーのメニュー文字・タグライン：同上 --- */
.header-bar .header-menu ul li a,
.header-bar .tagline,
.fixed-bar .header-menu ul li a,
.fixed-bar .tagline {
  text-shadow:
    0 0 10px rgba(255, 255, 255, 1),
    0 0 20px rgba(255, 255, 255, 0.89),
    0 0 31px rgba(255, 255, 255, 0.76),
    0 0 41px rgba(255, 255, 255, 0.63),
    0 1px 2px rgba(255, 255, 255, 1);
}

/* --- ヘッダーのロゴ・Instagramアイコン（画像）：白い光彩を回す --- */
.header-bar .logo-header img,
.header-bar .header-menu .insta img,
.fixed-bar .logo-header img,
.fixed-bar .header-menu .insta img {
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 1))
    drop-shadow(0 0 15px rgba(255, 255, 255, 1))
    drop-shadow(0 0 23px rgba(255, 255, 255, 1));
}