@charset "UTF-8";

@import "assets/css/style.css";

/*!
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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

/************************************
** サイドバー：クリニック紹介カード
************************************/
.clinic-card {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
}
.clinic-card__thumb {
  flex: 0 0 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clinic-card__thumb img {
  max-width: 100%;
  max-height: 100%;
}
.clinic-card__body {
  flex: 1;
  min-width: 0;
}
.clinic-card__name {
  margin: 0;
  padding-top: 4px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
}
.clinic-card__text {
  margin: 4px 6px;
  font-size: 12px;
  line-height: 1.6;
}
.clinic-card__btn,
.clinic-card__btn:visited {
  display: block;
  margin: 10px 6px 0;
  height: 32px;
  line-height: 32px;
  border-radius: 6px;
  background: #2196f3;
  box-shadow: 0 4px 0 #0e6fbd;
  color: #fff;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s ease-in-out, transform .2s ease-in-out;
}
.clinic-card__btn:hover {
  color: #fff;
  box-shadow: none;
  transform: translateY(4px);
}

/************************************
** ヘッダーメニューのアイコン（メニュー再作成後の項目 ID）
************************************/
body #header-container #header-container-in nav#navi #navi-in .menu-top .menu-item a::before{content:"";display:inline-block;width:1.8em;height:1.8em;margin-right:0.4em;background-size:cover;position:relative;top:0}
body #header-container #header-container-in nav#navi #navi-in .menu-top .menu-item#menu-item-438 a::before{background-image:url(/wp-content/uploads/2026/06/floor-cleaner.png)}
body #header-container #header-container-in nav#navi #navi-in .menu-top .menu-item#menu-item-439 a::before{background-image:url(/wp-content/uploads/2026/06/cosmetic.png)}
body #header-container #header-container-in nav#navi #navi-in .menu-top .menu-item#menu-item-440 a::before{background-image:url(/wp-content/uploads/2026/06/make-up-1.png)}
body #header-container #header-container-in nav#navi #navi-in .menu-top .menu-item#menu-item-441 a::before{background-image:url(/wp-content/uploads/2026/06/brush.png)}
body #header-container #header-container-in nav#navi #navi-in .menu-top .menu-item#menu-item-442 a::before{background-image:url(/wp-content/uploads/2026/06/paint-bucket.png)}

/************************************
** トップ：エリアから探す
************************************/
.area-finder{margin:10px 0 40px}
.area-finder__lead{font-size:14px;margin:0 0 14px}
.area-finder__radio{display:none}
.area-finder__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.area-finder__tabs label{cursor:pointer;padding:8px 20px;border-radius:999px;background:#fff;border:2px solid #c5686b;color:#c5686b;font-weight:700;font-size:14px;line-height:1.4;transition:background .2s,color .2s}
.area-finder__tabs label:hover{background:#fbeeee}
.area-finder__panel{display:none;background:#fff;border-radius:8px;padding:18px 20px}
#af-osaka:checked~.area-finder__panel--osaka,
#af-nagoya:checked~.area-finder__panel--nagoya,
#af-shinjuku:checked~.area-finder__panel--shinjuku,
#af-okinawa:checked~.area-finder__panel--okinawa{display:block}
#af-osaka:checked~.area-finder__tabs label[for="af-osaka"],
#af-nagoya:checked~.area-finder__tabs label[for="af-nagoya"],
#af-shinjuku:checked~.area-finder__tabs label[for="af-shinjuku"],
#af-okinawa:checked~.area-finder__tabs label[for="af-okinawa"]{background:#c5686b;color:#fff}
.area-finder__count{font-weight:700;margin:0 0 10px}
.area-finder__list{list-style:none;margin:0;padding:0}
.area-finder__list li{display:grid;grid-template-columns:5.5em 11em 1fr;gap:8px;align-items:baseline;padding:8px 0;border-bottom:1px solid #f0e6e6;font-size:14px;list-style:none}
.area-finder__brand{font-weight:700;color:#c5686b}
.area-finder__clinic{font-weight:700}
.area-finder__access{color:#666;font-size:13px}
.area-finder__btn,.area-finder__btn:visited{display:inline-block;margin-top:14px;padding:10px 22px;border-radius:6px;background:#c5686b;color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.area-finder__btn:hover{opacity:.85;color:#fff}
.area-finder__note{font-size:13px;color:#666;margin:12px 0 0}
.area-finder__source{font-size:12px;color:#888;margin:8px 0 0}
.index-list-top-note{font-size:12px;color:#888}
@media (max-width:833px){
  .area-finder__list li{grid-template-columns:5em 1fr;row-gap:2px}
  .area-finder__access{grid-column:2}
}
#af-yokohama:checked~.area-finder__panel--yokohama,
#af-hiroshima:checked~.area-finder__panel--hiroshima{display:block}
#af-yokohama:checked~.area-finder__tabs label[for="af-yokohama"],
#af-hiroshima:checked~.area-finder__tabs label[for="af-hiroshima"]{background:#c5686b;color:#fff}
#af-ginza:checked~.area-finder__panel--ginza{display:block}
#af-ginza:checked~.area-finder__tabs label[for="af-ginza"]{background:#c5686b;color:#fff}

/* ===== 2026-09 mobile layout fixes ===== */
/* 一覧の先頭カード：画像に文字を重ねず、画像の下にタイトルを出す（アイキャッチ内の文字と重なるため） */
body #content #content-in #main #list .entry-card-wrap:nth-of-type(1){padding:15px}
body #content #content-in #main #list .entry-card-wrap:nth-of-type(1) .entry-card::before{display:none}
body #content #content-in #main #list .entry-card-wrap:nth-of-type(1) .entry-card .entry-card-thumb{margin-bottom:12px}
body #content #content-in #main #list .entry-card-wrap:nth-of-type(1) .entry-card .entry-card-content,
body #content #content-in #main #list .entry-card-wrap:nth-of-type(1) .entry-card .entry-card-content{position:static;transform:none;left:auto;background:transparent;padding:0;border-radius:0;width:auto}
body #content #content-in #main #list .entry-card-wrap:nth-of-type(1) .entry-card .entry-card-content .entry-card-title{color:inherit}
body #content #content-in #main #list .entry-card-wrap:nth-of-type(1) .entry-card .entry-card-content .entry-card-snippet{color:#858585}
body #content #content-in #main #list .entry-card-wrap:nth-of-type(1) .entry-card .entry-card-content .entry-date{color:inherit}

/* 記事内の表：スマホでは列を潰さず横スクロール */
@media (max-width:834px){
  .article .entry-content .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .article .entry-content .wp-block-table table{width:auto !important;min-width:100%;margin:0 !important}
  .article .entry-content .wp-block-table th,
  .article .entry-content .wp-block-table td{min-width:7.5em;word-break:normal;overflow-wrap:anywhere}
  .article .entry-content .wp-block-table th:first-child,
  .article .entry-content .wp-block-table td:first-child{min-width:6.5em}
  .article .entry-content .wp-block-table.is-style-stripes table{border-bottom:0}
}

/* あわせて読みたい */
.article .ueo-related-box{background:#f7f8fa;border-left:4px solid #b86b6f;border-radius:6px;padding:18px 20px;margin:2.4em 0}
.article .ueo-related-box .ueo-related-title{margin:0 0 .6em;font-size:1em}
.article .ueo-related-box ul{margin:0 0 .6em;padding-left:1.2em}
.article .ueo-related-box li{margin:.35em 0;line-height:1.6}
.article .ueo-related-box p:last-child{margin:0;font-size:.92em;line-height:1.9}

/* トップのメインビジュアル：スマホ・タブレットでもスライダーを表示（横のボタンは非表示） */
@media (max-width:1022px){
  #index-list-top-68468{display:block;margin-bottom:24px}
  #index-list-top-68468__slide{width:100%}
  #index-list-top-68468__button{display:none}
  #index-list-top-68468__slide .swiper-button-prev,
  #index-list-top-68468__slide .swiper-button-next{transform:scale(.7)}
}

/* 目次：スマホでは余白を詰めて横幅を広く、行頭の点を揃える */
body.single #container .article #toc a::before,body.page #container .article #toc a::before{flex-shrink:0}
@media (max-width:834px){
  body.single #container .article #toc,body.page #container .article #toc{display:block;padding:14px 10px;margin:28px 0}
  body.single #container .article #toc .toc-content,body.page #container .article #toc .toc-content{padding:0}
  body.single #container .article #toc ol,body.single #container .article #toc ul,
  body.page #container .article #toc ol,body.page #container .article #toc ul{padding-left:0}
  body.single #container .article #toc ol li ol,body.single #container .article #toc ul li ul,
  body.page #container .article #toc ol li ol,body.page #container .article #toc ul li ul{padding-left:1em}
  body.single #container .article #toc li a,body.page #container .article #toc li a{padding:.6em .3em .5em;line-height:1.6}
  /* あわせて読みたいボックスも同様に */
  .article .ueo-related-box{padding:14px 12px}
  .article .ueo-related-box ul{padding-left:1.1em}
}

/* 表の見出し：スキンの 18px を本文と同程度に */
.article .entry-content table th{font-size:15px;line-height:1.5;padding:10px 12px}
.article .entry-content table td{line-height:1.6}
@media (max-width:834px){
  .article .entry-content table th{font-size:13px;padding:8px 10px}
  .article .entry-content table td{font-size:13px;padding:8px 10px}
  .article .entry-content .wp-block-table thead th{white-space:nowrap}
}

/* 表：スマホで列が細くなりすぎないように */
@media (max-width:834px){
  .article .entry-content .wp-block-table th,
  .article .entry-content .wp-block-table td{min-width:8.5em}
  .article .entry-content .wp-block-table th:first-child,
  .article .entry-content .wp-block-table td:first-child{min-width:9em}
  .article .entry-content .wp-block-table tr:first-child th{white-space:nowrap}
}
/* PR ラベル：カテゴリラベルと重ならないよう右上へ */
body.single .pr-label-s,body.page .pr-label-s{left:auto;right:6px}
/* ログイン中（管理バー表示時）のスマホで、ヘッダーと本文の間に余白が出ないように */
@media (max-width:782px){
  body.admin-bar .mobile-header-menu-buttons{top:46px}
}

/* ロゴ横のサブタイトル */
body #header-container #header-container-in header#header #header-in .logo-header::after{content:"医療脱毛クリニックを料金・条件で比較"}