@charset "UTF-8";

/*!
Theme Name: Cocoon Child - フィール大国町店
Description: Cocoon専用の子テーマ。リラクゼーション フィール 大国町店向けに、桜色を基調とした1ページ完結型のレイアウトを追加します。固定ページテンプレート「フィール大国町店／1ページ」を選ぶと適用されます。
Theme URI: https://wp-cocoon.com/
Author: feel
Author URI: https://wp-cocoon.com/
Template: cocoon-master
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/************************************
** 00. 桜色のトークン
************************************/
:root{
  --oor-petal:#fdf3f5;      /* 花びらの白 */
  --oor-sakura:#f7dde3;     /* 桜色 */
  --oor-sakura-mid:#e79aae; /* 薄紅 */
  --oor-kobai:#c4657f;      /* 紅梅（差し色・文字にも使える濃さ） */
  --oor-kobai-deep:#a44e66;
  --oor-sumi:#3b3238;       /* 墨に紅を落とした暗色 */
  --oor-muted:#7a6d72;
  --oor-paper:#fffdfc;
  --oor-moss:#8a9a7b;       /* 葉。ごく少量だけ使う */
  --oor-hairline:rgba(59,50,56,.13);

  --oor-mincho:"Times New Roman","Times",serif,"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP","MS PMincho",serif;
  --oor-gothic:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",Meiryo,sans-serif;

  --oor-gutter:clamp(18px,5vw,48px);
  --oor-rail:clamp(0px,3.2vw,52px);
  --oor-maxw:1080px;

  --oor-fs-hero:clamp(28px,7.2vw,62px);
  --oor-fs-h2:clamp(20px,3.2vw,30px);
  --oor-fs-h3:clamp(15px,1.9vw,18px);
  --oor-fs-body:clamp(14px,1.5vw,16px);
  --oor-fs-small:clamp(11.5px,1.2vw,13px);
}

/************************************
** 01. ヘッダーを常に見える位置に固定する
**  Cocoon設定「ヘッダーを固定する」を有効にした場合は
**  親テーマ側が処理するため、こちらは何もしない。
************************************/
body:not(.is-header-fixed) .header-container{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:99;
}

/* 店名を明朝／Timesで表示する */
.header .site-name-text,
.footer .site-name-text,
.logo-header .site-name-text{
  font-family:var(--oor-mincho);
  letter-spacing:.10em;
  font-weight:400;
}
.header .tagline{
  font-family:var(--oor-mincho);
  letter-spacing:.24em;
}

/* ヘッダー・ナビを桜色に寄せる */
.header-container{
  background-color:var(--oor-petal);
  border-bottom:1px solid var(--oor-hairline);
}
.navi,
.navi-in > .menu-header .item-label{
  font-family:var(--oor-gothic);
  letter-spacing:.12em;
}
.navi-in a:hover{
  background-color:var(--oor-sakura);
}
.navi-in > ul li{
  height:auto;
  line-height:2.6;
}

/************************************
** 02. 1ページテンプレートの土台
**  Cocoonの記事枠（幅・余白・枠線）を外して全幅で使う
************************************/
.oor-lp .content{
  margin-top:0;
  margin-bottom:0;
}
.oor-lp .content-in{
  width:100%;
  max-width:100%;
}
.oor-lp #main.main{
  width:100%;
  max-width:100%;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.oor-lp .breadcrumb{
  display:none;
}
.oor-lp{
  background-color:var(--oor-paper);
  color:var(--oor-sumi);
}
.oor-lp .entry-title,
.oor-lp .article h1.entry-title{
  display:none;
}

/************************************
** 03. 共通パーツ
************************************/
.oor-wrap{
  width:100%;
  max-width:var(--oor-maxw);
  margin-inline:auto;
  padding-inline:var(--oor-gutter);
  box-sizing:border-box;
}
.oor-section{
  padding-block:clamp(40px,7vw,76px);
  scroll-margin-top:clamp(56px,9vw,84px);
  font-family:var(--oor-gothic);
  font-size:var(--oor-fs-body);
  line-height:1.9;
  letter-spacing:.04em;
}
.oor-section--petal{
  background:linear-gradient(180deg,var(--oor-petal) 0%,rgba(253,243,245,0) 100%);
}
.oor-section + .oor-section{
  border-top:1px solid var(--oor-hairline);
}

/* 見出し。縦組みの札を左端に立て、横方向の行数を使わない */
.oor-head{
  display:grid;
  grid-template-columns:var(--oor-rail) 1fr;
  gap:0 clamp(10px,2vw,22px);
  align-items:start;
  margin-bottom:clamp(18px,3vw,32px);
}
.oor-head__mark{
  font-family:var(--oor-mincho);
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:var(--oor-fs-small);
  letter-spacing:.42em;
  color:var(--oor-kobai);
  line-height:1;
  padding-top:.35em;
  border-right:1px solid var(--oor-hairline);
  height:100%;
  min-height:4.6em;
}
.oor-head__body{min-width:0;}
.oor-head__en{
  display:flex;
  align-items:center;
  gap:.6em;
  font-family:var(--oor-mincho);
  font-size:var(--oor-fs-small);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--oor-muted);
  margin-bottom:.5em;
}
.oor-petal-mark{
  width:11px;height:11px;flex:none;
  color:var(--oor-sakura-mid);
}
.oor-head__ja{
  font-family:var(--oor-mincho);
  font-size:var(--oor-fs-h2);
  font-weight:400;
  letter-spacing:.12em;
  line-height:1.55;
  margin:0;
  color:var(--oor-sumi);
}
.oor-head__lead{
  margin:.7em 0 0;
  color:var(--oor-muted);
  max-width:44em;
}
@media screen and (max-width:640px){
  .oor-head{grid-template-columns:1fr;}
  .oor-head__mark{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    border-right:0;
    border-left:2px solid var(--oor-sakura-mid);
    padding:0 0 0 .7em;
    min-height:0;
    margin-bottom:.9em;
    letter-spacing:.34em;
  }
}

/************************************
** 04. イメージ（ファーストビュー）
************************************/
.oor-hero{
  position:relative;
  min-height:min(76svh,640px);
  display:grid;
  align-items:end;
  overflow:hidden;
  background:linear-gradient(165deg,#4a3440 0%,#8e6270 48%,#e2a7b6 100%);
}
.oor-hero__media{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.04);
  animation:oor-breathe 28s ease-in-out infinite alternate;
}
.oor-hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(40,26,34,.40) 0%,rgba(40,26,34,.14) 36%,rgba(40,26,34,.62) 100%);
}
/* 大きな花びらを一枚だけ、うっすら重ねる */
.oor-hero__petal{
  position:absolute;
  right:-6%;
  bottom:-14%;
  width:min(56vw,520px);
  color:rgba(255,255,255,.10);
  pointer-events:none;
}
.oor-hero__inner{
  position:relative;
  width:100%;
  max-width:var(--oor-maxw);
  margin-inline:auto;
  padding:clamp(28px,7vw,72px) var(--oor-gutter) clamp(30px,6vw,64px);
  color:#fff;
  box-sizing:border-box;
}
.oor-hero__en{
  font-family:var(--oor-mincho);
  font-size:var(--oor-fs-hero);
  font-weight:400;
  letter-spacing:.06em;
  line-height:1.12;
  margin:0;
  color:#fff;
  text-shadow:0 2px 18px rgba(40,26,34,.4);
}
.oor-hero__rule{
  width:clamp(40px,8vw,84px);
  height:1px;
  background:rgba(255,255,255,.72);
  margin:clamp(14px,2.4vw,22px) 0;
}
.oor-hero__ja{
  font-family:var(--oor-mincho);
  font-size:clamp(14px,2.1vw,19px);
  letter-spacing:.2em;
  line-height:2.05;
  color:rgba(255,255,255,.94);
  max-width:26em;
  margin:0;
}
.oor-hero__meta{
  margin:clamp(16px,3vw,28px) 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:.6em clamp(12px,2.4vw,24px);
  font-family:var(--oor-gothic);
  font-size:var(--oor-fs-small);
  letter-spacing:.14em;
  color:rgba(255,255,255,.88);
}
.oor-hero__meta span{display:inline-flex;align-items:center;gap:.5em;}
.oor-hero__meta span::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--oor-sakura);
}
@keyframes oor-breathe{
  from{transform:scale(1.04);}
  to{transform:scale(1.11);}
}

/************************************
** 05. 案内
************************************/
.oor-menu{
  display:grid;
  gap:1px;
  background:var(--oor-hairline);
  border:1px solid var(--oor-hairline);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.oor-menu__item{
  background:var(--oor-paper);
  padding:clamp(18px,2.8vw,28px);
  display:flex;
  flex-direction:column;
  gap:.5em;
  transition:background .3s ease;
}
.oor-menu__item:hover{background:var(--oor-petal);}
.oor-menu__no{
  display:flex;align-items:center;gap:.5em;
  font-family:var(--oor-mincho);
  font-size:var(--oor-fs-small);
  letter-spacing:.28em;
  color:var(--oor-kobai);
}
.oor-menu__title{
  font-family:var(--oor-mincho);
  font-size:var(--oor-fs-h3);
  font-weight:400;
  letter-spacing:.1em;
  margin:0;
  color:var(--oor-sumi);
}
.oor-menu__text{
  font-size:var(--oor-fs-small);
  color:var(--oor-muted);
  line-height:1.95;
  margin:0;
}
.oor-route{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.45em;
}
.oor-route li{
  position:relative;
  padding-left:1.5em;
  font-size:var(--oor-fs-small);
  color:var(--oor-muted);
  line-height:1.9;
}
.oor-route li::before{
  content:"";
  position:absolute;
  left:.35em;top:.78em;
  width:6px;height:6px;
  border-right:1px solid var(--oor-kobai);
  border-bottom:1px solid var(--oor-kobai);
  transform:rotate(-45deg);
}

/************************************
** 06. 料金
************************************/
.oor-price{border-top:1px solid var(--oor-hairline);}
.oor-price__row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:.2em clamp(10px,2vw,24px);
  padding:clamp(12px,2vw,18px) clamp(6px,1.4vw,14px);
  border-bottom:1px solid var(--oor-hairline);
}
.oor-price__row--pick{
  background:linear-gradient(90deg,rgba(247,221,227,.66),rgba(247,221,227,0));
}
.oor-price__name{
  font-family:var(--oor-mincho);
  font-size:var(--oor-fs-h3);
  letter-spacing:.08em;
  color:var(--oor-sumi);
}
.oor-price__badge{
  display:inline-block;
  margin-left:.7em;
  vertical-align:middle;
  font-family:var(--oor-gothic);
  font-size:10px;
  letter-spacing:.18em;
  color:#fff;
  background:var(--oor-kobai-deep);
  padding:.25em .6em;
  border-radius:2px;
}
.oor-price__fee{
  grid-row:1 / span 2;
  grid-column:2 / 3;
  align-self:center;
  font-family:var(--oor-mincho);
  font-size:clamp(17px,2.6vw,24px);
  letter-spacing:.04em;
  white-space:nowrap;
  color:var(--oor-sumi);
}
.oor-price__fee small{
  font-size:.6em;
  letter-spacing:.1em;
  color:var(--oor-muted);
  margin-left:.35em;
}
.oor-price__note{
  grid-column:1 / 2;
  font-size:var(--oor-fs-small);
  color:var(--oor-muted);
  line-height:1.8;
  margin:0;
}
.oor-price__foot{
  margin:clamp(14px,2.4vw,20px) 0 0;
  font-size:var(--oor-fs-small);
  color:var(--oor-muted);
  line-height:1.9;
}

/************************************
** 07. 場所と最寄り駅
************************************/
.oor-access{
  display:grid;
  gap:clamp(18px,3vw,36px);
  grid-template-columns:minmax(0,1fr);
}
@media screen and (min-width:860px){
  .oor-access{
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    align-items:start;
  }
}
.oor-info{border-top:1px solid var(--oor-hairline);}
.oor-info__row{
  display:grid;
  grid-template-columns:5.8em 1fr;
  gap:.4em clamp(10px,2vw,18px);
  padding:clamp(9px,1.6vw,13px) 0;
  border-bottom:1px solid var(--oor-hairline);
  font-size:var(--oor-fs-small);
}
.oor-info__key{
  font-family:var(--oor-mincho);
  letter-spacing:.16em;
  color:var(--oor-kobai);
}
.oor-info__val{color:var(--oor-sumi);line-height:1.85;}
.oor-info__val a{
  color:var(--oor-kobai-deep);
  border-bottom:1px solid var(--oor-hairline);
  text-decoration:none;
}
.oor-map{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  background:var(--oor-petal);
  border:1px solid var(--oor-hairline);
  overflow:hidden;
}
@media screen and (min-width:860px){
  .oor-map{aspect-ratio:1 / 1;}
}
.oor-map iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  filter:grayscale(.2) contrast(.96);
}
.oor-map__empty{
  position:absolute;inset:0;
  display:grid;place-content:center;
  gap:.7em;text-align:center;
  padding:var(--oor-gutter);
  color:var(--oor-muted);
  font-size:var(--oor-fs-small);
}
.oor-map__link{
  display:inline-block;
  border:1px solid var(--oor-hairline);
  padding:.55em 1.1em;
  border-radius:2px;
  letter-spacing:.14em;
  color:var(--oor-kobai-deep);
  text-decoration:none;
}
.oor-map__link:hover{
  border-color:var(--oor-kobai);
  background:var(--oor-petal);
}

/************************************
** 08. 免責・本文追記エリア
************************************/
.oor-note{
  font-size:var(--oor-fs-small);
  color:var(--oor-muted);
  line-height:1.95;
  border-top:1px solid var(--oor-hairline);
  padding-top:clamp(14px,2.4vw,20px);
  margin:0;
}
.oor-lp .oor-free .entry-content{
  margin:0;
  font-family:var(--oor-gothic);
  font-size:var(--oor-fs-body);
}

/************************************
** 09. スマホ用の電話ボタン
**  Cocoonのモバイルボタンを使う場合は、
**  functions.php の該当行をコメントアウトしてください。
************************************/
.oor-cta{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:90;
  display:none;
  background:var(--oor-kobai-deep);
  color:#fff;
  text-align:center;
  font-family:var(--oor-gothic);
  letter-spacing:.2em;
  font-size:var(--oor-fs-small);
  text-decoration:none;
  padding:.95em 0 calc(.95em + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(59,50,56,.16);
}
.oor-cta:hover{color:#fff;}
@media screen and (max-width:834px){
  .oor-lp .oor-cta{display:block;}
  .oor-lp .footer{padding-bottom:calc(3.6em + env(safe-area-inset-bottom));}
  /* Cocoonのモバイルボタンと重ならないようにする */
  .oor-lp .mobile-footer-menu-buttons{bottom:3.4em;}
}

/************************************
** 10. 表示アニメーションと配慮
************************************/
.oor-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease,transform .7s ease;
}
.oor-reveal.is-shown{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .oor-reveal{opacity:1;transform:none;transition:none;}
  .oor-hero__media{animation:none;transform:none;}
}

@media print{
  .oor-cta,.oor-map{display:none;}
  .oor-hero{min-height:auto;}
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .oor-lp .content-in{padding:0;}
}

/*834px以下*/
@media screen and (max-width: 834px){
  .oor-hero{min-height:min(70svh,560px);}
}

/*480px以下*/
@media screen and (max-width: 480px){
  .oor-price__row{padding-inline:0;}
  .oor-info__row{grid-template-columns:5em 1fr;}
}