/*!
Theme Name: oculo
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: oculo
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

oculo is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

dt{color:#7e6500;
    font-family: 游明朝, YuMincho, "Hiragino Mincho ProN W3", yu-mincho-pr6, sans-serif;
        font-size: 1.7rem;
    font-weight: 600;}
	
.btn{margin-top:25px}
	
#secondary.widget-area {
  background-color: #b1b1b6;
}


@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500&family=Taviraj:wght@300&family=Zen+Old+Mincho:wght@400;500&display=swap');

#ockm,#ockm *,#ockm *::before,#ockm *::after{box-sizing:border-box;margin:0;padding:0}
#ockm{font-family:游ゴシック体,YuGothic,"游ゴシック Medium","Yu Gothic Medium",游ゴシック,"Yu Gothic",sans-serif;color:#282723;-webkit-font-smoothing:antialiased}
#ockm img{max-width:100%;height:auto;display:block}
#ockm a{text-decoration:none;color:inherit}
#ockm ul,#ockm ol{list-style:none}
#ockm h2{font-weight:400;border:none;padding:0;background:none;border-bottom:none}
#ockm p{margin:0}
#ockm hr{border:none}

/* MODULE A */
#ockm .mod-a{background:#fff;padding:60px 24px 72px}
#ockm .mod-a__inner{max-width:860px;margin:0 auto}
#ockm .mod-a__logo{text-align:center;margin-bottom:36px}
#ockm .mod-a__logo img{max-width:320px;margin:0 auto}
#ockm .mod-a__title{font-size:22px;font-weight:400;text-align:center;color:#282723;letter-spacing:0.08em;line-height:1.6;margin-bottom:32px}
#ockm .mod-a__list{display:flex;flex-direction:column;gap:8px}
#ockm .mod-a__item{display:flex;align-items:center;gap:20px;background:#F4EBE0;padding:10px 20px;min-height:92px}
#ockm .mod-a__icon{flex-shrink:0;width:72px;height:72px}
#ockm .mod-a__icon img{width:72px;height:72px;object-fit:contain}
#ockm .mod-a__text{font-size:15px;line-height:1.9;color:#282723}
/* MODULE B */
#ockm .mod-b{background:#E0D4BF}
#ockm .mod-b__head{text-align:center;padding:64px 24px 40px}
#ockm .mod-b__logo{margin:0 auto 28px;max-width:340px}
#ockm .mod-b__logo img{width:100%}
#ockm .mod-b__title{font-size:26px;font-weight:400;line-height:1.7;color:#282723;letter-spacing:0.03em}
#ockm .mod-b__body{max-width:1060px;margin:0 auto;padding:0 24px 40px;display:flex;gap:20px;align-items:flex-start}
#ockm .mod-b__img{flex:0 0 347px;max-width:347px}
#ockm .mod-b__img img{width:100%;display:block}
#ockm .mod-b__img-placeholder{width:100%;aspect-ratio:1/1;background:#C8B89A;display:flex;align-items:center;justify-content:center;color:#7A6C5C;font-size:13px}
#ockm .mod-b__info{flex:1;min-width:0}
/* リードテキスト: Shippori Mincho 18px + letter-spacing 1px */
#ockm .mod-b__lead{font-family:"Shippori Mincho",serif;font-size:18px;font-weight:400;text-align:center;color:#282723;line-height:160%;letter-spacing:1px;margin-bottom:28px}
#ockm .mod-b__stats{display:flex;justify-content:center;gap:0;margin-bottom:8px}
#ockm .mod-b__stat{text-align:center;flex:1;padding:0 4px}
#ockm .mod-b__stat-icon{width:72px;height:72px;margin:0 auto 12px}
#ockm .mod-b__stat-icon img{width:72px;height:72px;object-fit:contain}
/* 3アイコンラベル: Shippori Mincho 500 13px */
#ockm .mod-b__stat-label{font-family:"Shippori Mincho",serif;font-size:8px;font-weight:500;text-align:center;color:#282723;line-height:140%}
#ockm .mod-b__note{font-size:11px;color:#7A6C5C;text-align:center;margin-bottom:20px;line-height:1.6}
#ockm .mod-b__divider{border-top:1px solid #B8A88A;margin-bottom:20px}
#ockm .mod-b__text{font-size:14px;line-height:2;color:#282723}

/* CTA: Figma完全再現 */
#ockm .mod-b__cta{max-width:860px;margin:0 auto;padding:0 20px 64px;display:flex;gap:8px;justify-content:center}
#ockm .mod-b__cta-btn{flex:1 1 0;min-width:0;display:flex;height:80px;overflow:hidden;align-items:center;padding:16px 12px 16px 16px;gap:8px;border:2px solid #7F6600;background:#fff;text-decoration:none !important;transition:opacity 0.2s;color:#282723 !important;position:relative}
#ockm .mod-b__cta-btn::before{content:'';position:absolute;inset:0;background:#7F6600;z-index:-1}
#ockm .mod-b__cta-btn:hover{opacity:0.82}
#ockm .mod-b__cta-icon{flex-shrink:0;width:48px;height:48px;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}
#ockm .mod-b__cta-icon svg{width:26px;height:26px;display:block;fill:white}
#ockm .mod-b__cta-btn--web .mod-b__cta-icon{background:linear-gradient(to left,#a57a7c,#9a373a)}
#ockm .mod-b__cta-btn--tel .mod-b__cta-icon{background:linear-gradient(to left,#d4bf6b,#a59141)}
#ockm .mod-b__cta-text{display:flex;flex-direction:column;gap:2px;flex:1}
/* LINE/WEB main: Shippori Mincho 18px */
#ockm .mod-b__cta-main{font-family:"Shippori Mincho",serif;font-size:17px;font-weight:400;line-height:1.6;color:#282723}
/* TEL phone number: Taviraj Light 26px */
#ockm .mod-b__cta-btn--tel .mod-b__cta-main{font-family:"Taviraj",serif;font-size:23px;font-weight:300;line-height:1;letter-spacing:0.04em}
/* Sub text: Zen Old Mincho 10px */
#ockm .mod-b__cta-sub{font-family:"Zen Old Mincho",serif;font-size:9px;font-weight:500;line-height:1.4;letter-spacing:-0.04em;color:#282723;white-space:nowrap!important;overflow:hidden}
#ockm .mod-b__cta-btn--tel .mod-b__cta-sub{font-weight:400}

@media screen and (max-width:767px){
  #ockm .mod-a{padding:40px 16px 48px}
  #ockm .mod-a__logo img{max-width:220px}
  #ockm .mod-a__title{font-size:18px;margin-bottom:24px}
  #ockm .mod-a__item{gap:14px;padding:12px 16px;min-height:76px}
  #ockm .mod-a__icon{width:56px;height:56px}
  #ockm .mod-a__icon img{width:56px;height:56px}
  #ockm .mod-a__text{font-size:13px;line-height:1.8}
  #ockm .mod-b__head{padding:40px 16px 28px}
  #ockm .mod-b__logo{max-width:220px;margin-bottom:20px}
  #ockm .mod-b__title{font-size:19px}
  #ockm .mod-b__body{flex-direction:column;padding:0 16px 32px;gap:24px}
  #ockm .mod-b__img{flex:none;max-width:100%;width:100%}
  #ockm .mod-b__lead{font-size:16px;margin-bottom:20px}
  #ockm .mod-b__stat-icon{width:56px;height:56px}
  #ockm .mod-b__stat-icon img{width:56px;height:56px}
  #ockm .mod-b__stat-label{font-size:11px}
  #ockm .mod-b__cta{flex-direction:column;gap:8px;padding:0 16px 48px;justify-content:stretch}
  #ockm .mod-b__cta-btn{width:100%;min-height:68px;padding:14px 12px 14px 16px;justify-content:space-between}
  #ockm .mod-b__cta-btn::after{content:"›";font-size:24px;font-weight:300;opacity:0.6;flex-shrink:0;line-height:1}
  #ockm .mod-b__cta-icon{width:40px;height:40px}
  #ockm .mod-b__cta-main{font-size:16px}
  #ockm .mod-b__cta-btn--tel .mod-b__cta-main{font-size:22px}
}

/* テキスト折り返し防止・Figma letter-spacing修正 */
#ockm .mod-b__cta-main { white-space: nowrap; }
#ockm .mod-b__cta-btn--web .mod-b__cta-main { letter-spacing: -1px; }
#ockm .mod-b__cta-btn--tel .mod-b__cta-main { letter-spacing: 0.04em; }



/* WEB予約ボタン: Figma準拠レイアウト */
#ockm .mod-b__cta-btn--web .mod-b__cta-text { align-items: center; }
#ockm .mod-b__cta-btn--web .mod-b__cta-main { text-align: center; letter-spacing: -2px; white-space: nowrap; }
#ockm .mod-b__cta-btn--web .mod-b__cta-sub  { text-align: center; white-space: nowrap !important; overflow: hidden; }

/* LINEアイコン: コンテナに背景色（WEB/TELと統一） */
#ockm .mod-b__cta-btn--line .mod-b__cta-icon { background: #06C755; border-radius: 10px; }

/* LINEボタン: メインテキスト font-size 16px（PC版） */
#ockm .mod-b__cta-btn--line .mod-b__cta-main { font-size: 17px; letter-spacing: -1px; }

/* アイコン画像化後: SVG用スタイルを無効化 */
#ockm .mod-b__cta-icon svg { width: auto; height: auto; }
#ockm .mod-b__cta-btn--line .mod-b__cta-icon { background: none; border-radius: 0; }
#ockm .mod-b__cta-btn--web .mod-b__cta-icon  { background: none; }
#ockm .mod-b__cta-btn--tel .mod-b__cta-icon  { background: none; }

/* SP: WEBボタンのテキスト左揃え（他ボタンと統一） */
@media screen and (max-width: 767px) {
  #ockm .mod-b__cta-btn--web .mod-b__cta-text { align-items: flex-start; text-align: left; }
  #ockm .mod-b__cta-btn--web .mod-b__cta-main { text-align: left; }
  #ockm .mod-b__cta-btn--web .mod-b__cta-sub  { text-align: left; }
}
/* ============================================================
   監修医師トグル（京都 #ockm スコープ）
   ============================================================ */
#ockm .ockm-supervisor-box {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 48px;
}
#ockm .ockm-supervisor-inner {
  border: 1px solid #C8B49A;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
#ockm .ockm-supervisor-toggle { display: none; }
#ockm .ockm-supervisor-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}
#ockm .ockm-supervisor-left { flex-shrink: 0; }
#ockm .ockm-supervisor-left img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
#ockm .ockm-supervisor-right { flex: 1; min-width: 0; }
#ockm .ockm-supervisor-title {
  font-size: 11px;
  color: #999;
  margin-bottom: 2px;
  letter-spacing: 0.05em;
}
#ockm .ockm-supervisor-clinic {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  margin-bottom: 3px;
}
#ockm .ockm-supervisor-name {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  margin: 0;
}
#ockm .ockm-supervisor-arrow {
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #A8902A;
  border-bottom: 2px solid #A8902A;
  transform: rotate(45deg);
  transition: transform 0.25s;
  margin-right: 4px;
}
#ockm .ockm-supervisor-toggle:checked + .ockm-supervisor-header .ockm-supervisor-arrow {
  transform: rotate(-135deg);
}
#ockm .ockm-supervisor-content {
  display: none;
  padding: 16px 20px 20px;
  border-top: 1px solid #EBE0CC;
}
#ockm .ockm-supervisor-toggle:checked ~ .ockm-supervisor-content { display: block; }
#ockm .ockm-supervisor-content p {
  font-size: 13px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 12px;
}
#ockm .ockm-supervisor-link {
  display: inline-block;
  font-size: 13px;
  color: #A8902A;
}
#ockm .ockm-supervisor-link:hover { text-decoration: underline; }

@media screen and (max-width: 767px) {
  #ockm .ockm-supervisor-box { padding: 0 16px 40px; }
  #ockm .ockm-supervisor-header { padding: 12px 16px; gap: 12px; }
  #ockm .ockm-supervisor-left img { width: 52px; height: 52px; }
}
