/*
Theme Name: MyUniStory Official site
Description: 
Author:
Author URI: 
*/
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */

@charset "utf-8";
body {
	font: normal 18px/1.7 'Noto Sans JP', sans-serif;
	color:#222;
	text-align: justify;
	overflow-x: hidden;
  background-color: #eeeeee;
  letter-spacing: 0.1em;
}

/* 和文見出し */
.v-mincho {
  font-family: 'Zen Old Mincho', 'Noto Serif JP', serif;
}

/* 英字見出し */
.v-cormorant {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* 補助英字・UIラベル */
.v-montserrat {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


.fl_left {
	float: left;
}
.fl_right {
	float: right;
}
.ov_hd {
	overflow: hidden;
}
.bg_none {
	background-image: none!important;
}
a.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.center {
	text-align: center;
}
.right {
	text-align:right;
}
.line_0 {
	line-height: 0;
}
.zindex {
	z-index: 200;
}
input[type=radio] {
	width: 15px;
	height: 15px;
	vertical-align: middle;
}
input[type=image]:hover{
		opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	}


/* ----------------------------------------------------

    text

---------------------------------------------------- */
em {
	text-decoration: underline;
  font-style: normal;
}


.ul{
	text-decoration: underline;

}
.bd_red {
	border-bottom: 1px solid #FF0004;
	padding-bottom: 2px;
}
.bd_red02 {
	border-bottom: 3px solid #FF0004;
	padding-bottom: 0px;
}
.pink{
	color: #e64369;
}

.brown {
	color: #B6905B;
  font-weight: bold;
}

.white {
	color: #fff;
	font-weight: bold;
}

.green {
	color: #039ca2;
	font-weight: bold;
}

.gray {
	color:#6e6e6e;
}
.bold {
	font-weight: bold;
}
strong {
	font-weight: bold;
}
.strike {
	text-decoration: line-through;
}
.ac {
	text-align: center !important;
}
.ar {
	text-align: right !important;
}
.al {
	text-align: left !important;
}
.bold {
	font-weight: bold !important;
  color: #00479d;
}
.font10 {
	font-size: 10px !important;
}
.font11 {
	font-size: 11px !important;
}
.font12 {
	font-size: 12px !important;
}
.font13 {
	font-size: 13px !important;
}
.font14 {
	font-size: 14px !important;
}
.font15 {
	font-size: 15px !important;
}
.font16 {
	font-size: 16px !important;
}
.font17 {
	font-size: 17px !important;
	line-height:150%;
}
.font18 {
	font-size: 18px !important;
}
.font19 {
	font-size: 19px !important;
}
.font20 {
	font-size: 20px !important;
}
.font21 {
	font-size: 21px !important;
}
.font22 {
	font-size: 22px !important;
}
.font23 {
	font-size: 23px !important;
}
.font24 {
	font-size: 24px !important;
}
.font25 {
	font-size: 25px !important;
}
.font26 {
	font-size: 26px !important;
}
.font27 {
	font-size: 27px !important;
}
.font28 {
	font-size: 28px !important;
}
.font29 {
	font-size: 29px !important;
}
.font30 {
	font-size: 30px !important;
}
.font42 {
	font-size: 42px !important;
}
.font70 {
	font-size: 70px !important;
}
.weight{
    font-weight: 700;
    }


.sp-only{
  display: none;
}
.pc-only{
  display: block;
}

@media (max-width: 950px){
  .sp-only {
    display:block;
  }

  .pc-only {
    display: none;
  }
}


/* ----------------------------------------------------

    float

---------------------------------------------------- */
.fr {
	float: right !important;
}
.fl {
	float: left !important;
}
.clear {
	clear: both;
}
img {
	line-height: 0;
	padding: 0;
	margin: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}



/* ----------------------------------------------------
共通項目
---------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main{
	max-width: 2700px;
	margin: 0 auto;

}

.wrap{
	width: 1000px;
	margin: 0 auto;
}

@media (max-width: 950px){
	.wrap{
    width: 92vw; 
    max-width: none; 
}
}

.sec img{
	width: 100%;
	margin: 0 auto;
}





/* ----------------------------------------------------
    固定メニュー
---------------------------------------------------- */
:root {
  --header-h: 80px;
  --menu-gap: 30px;
  --bg: #eeeeee;
  --ink: #2a2a2a;
  --ink-dim: #555;
  --border: #d0d0d0;
}

* { box-sizing: border-box; }


.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 固定ヘッダー */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--bg);
  backdrop-filter: saturate(180%) blur(6px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
}

/* ロゴ */
.site-header__logo img {
  display: block;
  height: auto;
  margin-right: 40px; 
}

/* ナビゲーション */
.primary-nav__list {
  display: flex;
  gap:20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  height: var(--header-h);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .02em;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: color .2s ease;
}

.primary-nav__link:hover,
.primary-nav__link:focus {
  color: var(--ink-dim);
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #eeeeee;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  padding: 8px 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .18s ease;
  border: none;
  white-space: nowrap;      /* ✅ 改行禁止 */
}


/* 表示状態 */
.has-submenu[aria-expanded="true"] .submenu,
.has-submenu.open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* スペーサー（ヘッダー分の高さ） */
.header-spacer {
  height: var(--header-h);
}

/* ▼アイコン（線のV字） */
.dropdown-icon {
  display: inline-block;
  margin-left: 6px;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(45deg); 
  transition: border-color 0.2s ease;
  position: relative;
  top: -1px;
}

/* hover時は色だけ変える */
.has-submenu:hover .dropdown-icon {
  border-color: var(--ink-dim); /* ← グレー寄りに変化するだけ */
}
/* サブメニュー本体（重なり・角丸・影・アニメ） */
.has-submenu{position:relative}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu{
  opacity:1;visibility:visible;transform:translateY(0);
}

/* サブメニュー内リンク */
.submenu a{
  display:block;padding:12px 16px;
  color:var(--ink);text-decoration:none;font-weight:500;font-size:12px;
  line-height:1.6;
  transition:background .16s ease, color .16s ease;
  border-radius:4px; /* hover背景が角丸で気持ち良い */
  margin:0 6px;     /* 左右に6pxの余白 → hover背景がはみ出さない */
}
.submenu a:hover,.submenu a:focus{background:#f7f7f7}

/* モーション弱め希望ユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .submenu{transition:none;transform:none}
  .dropdown-icon{transition:none}
}


/* CTAエリア */
.header-cta {
  display: flex;
  align-items: center;
  gap: 0px;
  margin-left: auto;
}

/* 各ボタン */
.header-cta .cta-btn {
  display: flex;
  align-items: center;        /* 垂直中央揃え */
  justify-content: center;    /* 水平方向も中央揃え */
  gap: 10px;                   /* アイコンと文字の間隔 */
  width: 160px;               /* 横幅を固定 */
  height: var(--header-h);    /* ヘッダーと同じ高さ（80px） */
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500; 
  line-height: 1.4;
  text-align: left;
  transition: background-color 0.25s ease, color 0.25s ease; /* ← 派手な動きは削除 */
}

/* アイコン設定 */
.header-cta .cta-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* 色指定 */
.cta-btn.gray { 
  background: #b8b8b8; /* ← グレーからベージュへ変更 */
  color: #fff;
;
}
.cta-btn.gold {
  background: #b89a65;
  color: #fff;
}

/* hoverエフェクト */
.cta-btn.gray:hover {
  background: #cdcccc; /* 少しだけ濃いベージュ */
}
.cta-btn.gold:hover {
  background: #a88a58; /* 少しだけ濃いゴールド */
}

/* 検索フォーム */
.header-search {
  position: relative;          /* ← アイコン配置用 */
  height: 34px;                
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 36px 0 10px;      /* 右側にアイコン分の余白を確保 */
  margin-left: 20px;
}

/* 入力欄 */
.header-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff;
  height: 100%;
  padding: 0;
  line-height: 1;
}

/* 検索ボタン */
.header-search button {
  position: absolute;
  right: 10px;          
  top: 50%;
  transform: translateY(-50%); /* 縦中央揃え */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-search img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* hoverで軽く反応 */
.header-search button:hover img {
  opacity: 1;
}


/*  STOREエリア */
.header-store {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px; /* 横幅調整 */
  height: var(--header-h);
}

.header-store a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #222;
}

.header-store img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-bottom: 4px;
}

.header-store span {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* hover時にわずかに暗く */
.header-store a:hover {
  opacity: 0.8;
}


/* ============= 共通変数（SP用高さ追加） ============= */
:root{
  --sp-header-h: 56px; /* スマホのヘッダー高 */
}

/* PC時のまま */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: var(--bg);
  backdrop-filter: saturate(180%) blur(6px);
}


/* PCではSP専用ブロックを出さない */
.sp-nav-extra,
.mobile-actions{
  display:none;
}

/* =========================
  SPハンバーガーメニュー
   ========================= */
@media (max-width: 950px){

  :root{
    --sp-header-h: 64px; /* SPヘッダーの高さ */
  }

  /* PC専用パーツはSPで非表示 */
  .header-cta,
  .header-search,
  .header-store {
    display: none !important;
  }
  .container {
    margin: 0 0 0 10px;
    padding: 0 0px;
  }
  
  .site-header__inner {
    height: auto !important;
  }


  .header-spacer {
    height: auto !important;
  }
  
  /* 右上の INSTAGRAM / STORE / MENU */
  .mobile-actions{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: right 0,!important;
  }
  
  .ma-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#222;
  }
  .ma-link img{
    width:22px;
    height:22px;
    object-fit:contain;
  }
  .ma-link span{
    margin-top:8px;
    font-family:'Montserrat',sans-serif;
    font-size:8px;
    font-weight:600;
    letter-spacing:.05em;
    line-height:1;
  }

  /* MENU ボタン */
  .nav-toggle{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width: 60px;
    gap: 4px;
    height: 54px;
    padding: 8px 5px;
    border-radius: 5px 0 0 5px;
    background:#222;
    color:#fff;
    border:none;
    cursor:pointer;
    margin-left: auto;
  }
  .nav-toggle .bars{
    position:relative;
    width:22px;
    height:14px;
    display:block;
  }
  .nav-toggle .bars::before,
  .nav-toggle .bars::after,
  .nav-toggle .bars span{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition: transform .25s ease, opacity .25s ease;
  }
  .nav-toggle .bars::before{ top:0; }
  .nav-toggle .bars span{ top:50%; transform:translateY(-50%); }
  .nav-toggle .bars::after{ bottom:0; }

  /* ラベル（MENU / CLOSE） */
  .nav-toggle .label{
    display:block;
    font-family:'Montserrat',sans-serif;
    font-size:10px;
    font-weight:600;
    letter-spacing:.08em;
    line-height:1;
    color:#fff;
    position:relative;
  }
  .nav-toggle .label::after{
    content:"MENU";
  }
  .nav-toggle.is-open .label::after{
    content:"CLOSE";
  }

  /* 開いたときは×にする */
  .nav-toggle.is-open .bars::before{
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle.is-open .bars::after{
    transform: translateY(-6px) rotate(-45deg);
  }
  .nav-toggle.is-open .bars span{
    opacity:0;
  }



  /* ========= ドロワーメニュー本体 ========= */
    /* 最初だけ完全に非表示（チラ見え防止用） */
    #primary-nav.nav-init-hide {
      display: none;
    }


  #primary-nav{
    position: fixed;
    top: var(--sp-header-h);   /* ヘッダーの下から表示 */
    left: 0;
    right: 0;
    bottom: auto;              /* ← 画面いっぱいにしない */
    z-index: 90;
    background: rgba(240,240,240, 0.95) !important;
    backdrop-filter: blur(3px);
    transform: translateX(100%);
    transition: transform .35s ease;
    padding: 20px 16px 24px;

    /* コンテンツ分＋少し余裕。長くなったら中だけスクロール */
    max-height: calc(100vh - var(--sp-header-h) - 24px);
    overflow-y: auto;
  }
  #primary-nav.open{
    transform: translateX(0);
  }

  /* メニュー縦並び */
  .primary-nav__list{
    list-style:none;
    margin:0 0 5px;
    padding:0;
    border-top:1px solid #e5e5e5;
    display:flex;
    flex-direction:column;
  }

   /* メニュー各項目の高さを統一 */
.primary-nav__item{
  display:flex;
  align-items:center;          /* ← テキストを上下中央に */
  justify-content:space-between;
  border-bottom:1px solid #c7c7c7;
  width:100%;
  padding:0 0 20px 0;                 /* ← paddingは消して高さで管理する */
  min-height:50px;             /* ← ← ★ これで高さを統一！ */
}

/* 商品一覧のボタンも上下中央揃え */
.primary-nav__link{
  font-size:15px;
  line-height:1.4;
  padding:0;
  height:auto;
  display:flex;
  align-items:center;          /* ← ← ★ これで中央揃え */
}

/* ▼アイコン位置を微調整（中央揃えに合わせる） */
.dropdown-icon{
  margin-left:8px;
  position: relative;
  top: 1px;                    /* ← 必要なら微調整（0〜2px） */
}

/* サブメニューがある場合も間隔を揃える */
.has-submenu > .primary-nav__link{
  min-height:50px; 
  padding-top: 25px            /* ← 商品一覧だけ高さがズレる問題を強制解決 */
}


  /* サブメニュー（アコーディオン） */
  .submenu{
    position:static;
    background:transparent;
    padding:8px 0 12px;
    margin: 0;
    padding: 8px 0 8px;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
  }
  .has-submenu.open > .submenu{ display:block; }
  .submenu a{
    display:block;
    padding:10px 4px;
    font-size:13px;
    border-bottom:1px dashed #e5e5e5;
    color:#333;
    text-decoration:none;
  }

  /* 下部：検索＋ボタン */
  .sp-nav-extra{
    display:block;
    max-width:480px;
    margin:0 auto;
  }

  .sp-nav-search{
    display:flex;
    align-items:center;
    border:1px solid #ccc;
    padding:0 10px;
    margin:8px 0 20px;
    background:#fff;
    height:54px;
    border-radius:6px;
  }
  .sp-nav-search input{
    flex:1;
    border:none;
    padding:14px 8px;
    font-size:16px;
    outline:none;
  }
  .sp-nav-search button{
    border:none;
    background:none;
    padding:10px 6px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .sp-nav-search__icon-img{
    width:20px;
    height:20px;
    object-fit:contain;
  }

  .sp-nav-actions{
    display:flex;
    margin-bottom:20px;
  }
  .sp-nav-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:12px 6px;
    text-decoration:none;
    font-size:13px;
    line-height:1.4;
  }
  .sp-nav-btn--gray{
    background:#9a9a9a;
    color:#fff;
  }
  .sp-nav-btn--gold{
    background:#b89a65;
    color:#fff;
  }
  .sp-nav-btn__icon-img{
    width:22px;
    height:22px;
    margin-bottom:6px;
    object-fit:contain;
    display:block;
  }

  .sp-nav-close{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:none;
    background:none;
    font-size:15px;
    margin:20px auto 0;
    cursor:pointer;
  }
}

/* Safari のしつこい検索ボックス影を完全に消す */
.sp-nav-search input[type="search"] {
  -webkit-appearance: none !important;
  appearance: none !important;

  box-shadow: 0 0 0px 1000px #fff inset !important; /* ← Safari の影を完全に塗りつぶす */
  background-color: #fff !important;               /* ← 白に固定 */

  border: none;
}

/* Safari が付ける × ボタンも消す */
.sp-nav-search input[type="search"]::-webkit-search-decoration,
.sp-nav-search input[type="search"]::-webkit-search-cancel-button {
  display: none !important;
}


  
/* ----------------------------------------------------
  お知らせバー（共通）
---------------------------------------------------- */
:root{
  --notice-h: 36px;
  --notice-bg: #e4d8b0;
  --notice-ink: #2a2a2a; /* ← 修正 */
}

.notice-bar{
  height: var(--notice-h);
  background: var(--notice-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid rgba(0,0,0,.05);
  padding: 0 12px;           /* 端の余白 */
}

.notice-bar p{
  margin:0;
  font: 13px/1.4 'Noto Sans JP', sans-serif;
  letter-spacing:.02em;
  color: var(--notice-ink);
  text-align:center;
}

/* SPだけ お知らせバー1行表示 */
@media (max-width: 950px){

  .notice-bar {
    height: var(--notice-h);      /* そのまま1行分の高さ */
    padding: 0 12px;
  }

  .notice-bar p {
    white-space: nowrap;          /* 改行させない */
    overflow: hidden;             /* はみ出した分を隠す */
    text-overflow: ellipsis;      /* 末尾を「…」に */
  }
}


/* ----------------------------------------------------
    FV
---------------------------------------------------- */
.fv {
  width: 100%;
  aspect-ratio: 1000 / 400;  /* 高さは比率で自動計算 */
  position: relative;
  overflow: hidden;
}

/* スライダー */
.fv-slider {
  position: absolute;
  inset: 0;
}

/* スライド（フェード切替） */
.fv-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.fv-slider .slide.active { opacity: 1; }

/* 画像設定：比率維持で中央トリミング */
.fv-slider picture,
.fv-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* aspect-ratio非対応ブラウザ用フォールバック */
@supports not (aspect-ratio: 1) {
  .fv {
    position: relative;
  }
  .fv::before {
    content: "";
    display: block;
    padding-top: 40%; /* 400 / 1000 * 100% = 40% */
  }
  .fv-slider {
    position: absolute;
    inset: 0;
  }
}
  

@media (max-width: 950px){
  /* コンテナは中身の高さに合わせる */
  .fv {
    aspect-ratio: auto;
    height: auto;
  }

  /* スライダーは通常フローに戻す */
  .fv-slider {
    position: relative;
  }

  /* スライドを重ねない。activeだけ表示する */
  .fv-slider .slide {
    position: relative;
    inset: auto;
    opacity: 0;
    display: none;
    transition: opacity 0.6s ease-in-out;
  }
  .fv-slider .slide.active {
    opacity: 1;
    display: block;
  }

  /* 画像は縦横比そのまま表示 ※全幅にしたいなら width:100% */
  .fv-slider picture,
  .fv-slider img {
    width: 100%;
    height: auto;
    object-fit: contain; 
    }

  /* SCROLLインジケータの位置も少し下げるなら調整 */
  .scroll-indicator{
    right: 10px;
    top: 80%;
  }
}

/* ----------------------------------------------------
    SCROLL
---------------------------------------------------- */
/* インジケータ全体：FVの右寄せに重ねる */
.scroll-indicator{
  position: absolute;
  right: 40px;            /* 画像の右端からの距離 */
  top: 85%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  flex-direction: column; /* 縦に「文字→線」 */
  gap: 10px;
  z-index: 2;             /* 画像より前面に */
  pointer-events: none;   /* クリックを邪魔しない */
}

/* 文字：縦組み、Montserrat、白っぽく */
.scroll-label{
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,.9);
  writing-mode: vertical-rl;     /* 縦書き */
  text-shadow: 0 1px 2px rgba(0,0,0,.25); /* 画像上でも視認性UP */
}

/* 土台の線 */
.scroll-line{
  position: relative;
  width: 1px;
  height: 120px;           /* 長さはお好みで */
  background: rgba(255,255,255,.35);
  overflow: hidden;        /* はみ出しを隠す */
}

/* 流れる光 */
.scroll-line::after{
  content:"";
  position: absolute; left: 0; top: -40px;  /* 初期は上の外側 */
  width: 100%;
  height: 40px;                              /* 光の長さ */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.9) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: lineFlow 1.8s linear infinite;
}

/* 上→下へ流れる */
@keyframes lineFlow{
  0%   { transform: translateY(0); }
  100% { transform: translateY(160px); }
}

/* 動きを弱めたいユーザーに配慮 */
@media (prefers-reduced-motion: reduce){
  .scroll-line::after{ animation: none; }
}



/* ----------------------------------------------------
    進捗スライダー
---------------------------------------------------- */
.scroll-lines {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}

.scroll-lines .line {
  width: 80px;
  height: 2px;
  background: #e6e6e6; /* 非アクティブ時の色 */
  transition: background-color 0.4s ease;
}

.scroll-lines .line.active {
  background: #b89a65; /* アクティブ線の色（ゴールド） */
  
}

@media (max-width: 950px){
  /* プログレス線サイズを小さく調整 */
  .scroll-lines{
    position: relative;         /* 中央寄せ用に位置指定 */
    left: 50%;
    transform: translateX(-50%);/* 親が何でも中央に来る */
    width: 300px;               /* もしくは 60% + max-width でもOK */
    max-width: 80vw;
    margin-top: 12px;
    display: flex;              /* 罫線の並び */
    gap: 10px;
    justify-content: space-between;
  }

  .scroll-indicator{
    right:10px;
    top:80%;
  }

  .scroll-line{ 
    height:80px; 
  }
}


/* ----------------------------------------------------
    インスタフォロー
---------------------------------------------------- */
/* FOLLOW US 固定パーツ */
.follow-fixed {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  z-index: 1000;
}

/* 表示時 */
.follow-fixed.active {
  opacity: 1;
  visibility: visible;
}

/* 全体リンク領域 */
.follow-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: 10px;
}

/* テキスト部分 */
.follow-label {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #222;
  text-shadow: 0 0 4px rgba(255,255,255,0.4);
  transition: opacity 0.3s ease;
}

/* ライン部分 */
.follow-line {
  display: block;
  width: 1px;
  height: 60px;
  background: #222;
  opacity: 0.6;
}

/* アイコン部分 */
.follow-link img {
  width: 22px;
  height: 26px;
  transition: opacity 0.3s ease;
}

/* hover時：全体に反応 */
.follow-link:hover img,
.follow-link:hover .follow-label {
  opacity: 0.6;
}
.follow-ig:hover{ transform: scale(1.06); opacity: .9; }


@media (max-width: 950px){
  .follow-fixed{ display:none; }
}






/* ----------------------------------------------------
    ふわっと
---------------------------------------------------- */

/* 初期：右下に少しズラして薄く */
.reveal{
  opacity: 0;
  transform: translate(20px, 24px); /* ← 右(X)+下(Y) */
  transition:
    opacity 1.2s ease-out,
    transform 1.2s cubic-bezier(.22,.61,.36,1); /* ゆっくり滑らか */
  will-change: opacity, transform;
}

/* 表示時：元位置に戻る */
.reveal.is-visible{
  opacity: 1;
  transform: translate(0,0);
}

/* スタッガー（段差表示）を使う場合 */
.reveal[data-reveal]{
  transition-delay: calc(0.08s * var(--rv, 0)); /* 少しゆっくりに */
}

/* 動き苦手ユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ----------------------------------------------------
    最新情報
---------------------------------------------------- */

/* ===== 最新情報 ===== */
:root{
  --news-ink:#222;
  --news-dim:#9a9a9a;
  --news-rule:#9a9a9a;
  --accent:#b89a65;      /* ゴールド */
  --badge:#e4d8b0;       /* ベージュ */
}

.news-sec .wrap{
  max-width: 750px;
  width: min(92vw, 750px);
  margin: 0 auto;
}

/* タイトルを2行で省略（PC/SP共通でOK） */
.news-title{
  font-size: 17px;
  letter-spacing: .02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* 2行で省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-sec{ padding: 150px 0 0; color:var(--news-ink); }
.news-sec__heading{
  text-align:center;
  font-size:28px;
  letter-spacing:.03em;
  margin-bottom:28px;
}

/* リスト */
.news-list{ list-style:none; margin:0; padding:0; }
.news-item{ border-bottom:1px solid var(--news-rule); }
.news-item:first-child{ border-top:1px solid var(--news-rule); }

.news-link{
  display:block;
  padding:20px 0;
  color:inherit;
  text-decoration:none;
}
.news-link:hover .news-title{ text-decoration:underline; }

/* 1行目：バッジ＋日付 */
.news-meta{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* ← ここを明示 */
  gap:10px;                  /* バッジと日付の間隔 */
  margin-bottom:8px;
}
.badge {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 999px;
  background: #e4d8b0; /* ← ベージュ */
  color: #222;        /* ← 文字色 */
}


.badge {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 999px;
  background: #e4d8b0; /* ベージュ */
  white-space: nowrap; /* 折り返し防止 */
}

.news-date {
  font-size: 12px;
  color: #9a9a9a; /* グレー文字 */
  white-space: nowrap;
}

/* タイトル */
.news-title{
  font-size:17px;
  letter-spacing:.02em;
}

/* もっとみるボタン（中央） */
.news-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

@media (max-width: 950px){

  .news-sec{ padding: 30px 0 0; }

  .news-sec__heading{
    font-size: 28px;
    margin-bottom: 25px;
  }

  .news-sec .wrap{
    width: 100%;
    padding: 0 16px;           /* 画面端の余白 */
  }

  .news-link{
    padding: 14px 0;           /* タップしやすく */
  }

  .news-meta{
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;           /* せまい時は折り返し可 */
  }

  .badge{
    font-size: 11px;
    padding: 6px 10px;
  }

  .news-date{
    font-size: 11px;
    color: var(--news-dim);
  }

  .news-title{
    font-size: 15px;
    -webkit-line-clamp: 2;     /* 念のため再指定 */
  }

  .news-item{ border-bottom-width: 1px; }

  .news-more{
    margin-top: 50px;
  }
}

/* タブレット（任意：少しだけ縮めたい場合） */
@media (min-width: 769px) and (max-width: 1024px){
  .news-sec .wrap{ width: 90%; }
  .news-title{ font-size: 16px; }
  .badge{ font-size: 11px; }
}

/* ======================================
  共通ボタン：btn_all
====================================== */
.btn_all {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 50px;
  padding: 0 20px 0 20px;
  border-radius: 999px;
  border: 1px solid #b89a65;
  background: #b89a65;
  color: #fff;
  font-size: 15px;
  letter-spacing: .05em;
  text-decoration: none;
  transition: all .25s ease;
}

/* 共通：矢印 */
.btn_all::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 45%;
  transform: translateY(-50%);
  font-size: 20px;
  color: currentColor;
  transition: right .25s ease, color .25s ease;
}

/* hover */
.btn_all:hover {
  background: #a88a58;
  color: #fff;
}
.btn_all:hover::after {
  right: 12px;
}


@media (max-width: 950px) {
  .btn_all {
    width: 250px;
    height: 60px;
  }
}

/* ゴールド（デフォルト） */
.btn_all--gold {
  background: #b89a65;
  border-color: #b89a65;
  color: #fff;
}
.btn_all--gold:hover {
  background: #a8854f;
}

/* グレー */
.btn_all--gray {
  background: #b8b8b8;
  border-color: #b8b8b8;
  color: #fff;
}
.btn_all--gray:hover {
  background: #a0a0a0;
}

/* ライト（ベージュ） */
.btn_all--light {
  background: #E4D8B0;
  border-color: #e2d5aa;
  color: #222;
}
.btn_all--light:hover {
  background: #dbcd9d;
  color: #222;
}


/* ----------------------------------------------------
    私たちのこだわり
---------------------------------------------------- */

.philosophy-sec {
  position: relative;
  padding: 150px 0 0;
  overflow: hidden;
}


/* タイトル */
.philosophy-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 英語タイトル */
.philosophy-title .en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: 0.05em;
}

/* 日本語タイトル */
.philosophy-title .ja {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .18em;
}

.philosophy-sec .wrap {
  margin: 0 auto 40px;
  text-align: left;
}

/* 横スクロール写真 */
/* 基本：横流しトラック */
.photo-scroll{
  overflow: hidden;
  width: 100%;
  position: relative;
  touch-action: pan-y; /* ← 指スワイプを縦には通す */
}

.photo-track{
  display: flex;
  gap: 8px;
  width: max-content;
  will-change: transform;
  animation: photo-marquee 40s linear infinite; /* ← 自動流し速度 */
}

/* 画像の基本サイズ */
.photo-track img{
  height: clamp(160px, 28vw, 250px);
  width: auto;
  flex: 0 0 auto;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* 無限マルキー */
@keyframes photo-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* 動きを弱めたいユーザー配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .photo-track{ animation-duration: 999s; } /* 実質停止に近く */
}


.philosophy-content{
  background:#eeeeee;
  padding: 70px 0 72px;
}


/* 2カラム */
.philosophy-content .wrap{
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 48px;
  align-items: start;
}

/* 左：大見出し */
.ph-lead{
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.6;
  letter-spacing: .18em;
}

/* 右：本文 */
.ph-text p{
  font-size: 15px;
  line-height: 2.2;
}

/* CTAボタン（中央寄せ） */
.ph-cta{
  display:flex;
  justify-content:center;
  margin-top: 40px;
}


.ph-cta .btn-more.small{
  min-width: 220px;  
}



@media (max-width: 950px){
  .philosophy-content .wrap{ 
    grid-template-columns: 1fr; 
    gap: 28px; 
  }

  .ph-lead{ 
    text-align: left; }

  .philosophy-sec {
  padding: 100px 0 0;
}

.philosophy-title .en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: 0.05em;
}

.philosophy-content{
  background:#eeeeee;
  padding: 30px 0 72px;
}

}





/* ----------------------------------------------------
    ブランドリスト
---------------------------------------------------- */

.brandlist-sec {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}


/* タイトル */
.brandlist-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom:24px;

}

/* 英語タイトル */
.brandlist-title .en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: 0.05em;
}

/* 日本語タイトル */
.brandlist-title .ja {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .18em;
}


/* グリッド：PC 2列 / SP 1列 */
.brandlist-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 36px;
}

/* カード */
.brandlist-card{
  position: relative;
}

/* 画像 */
.brandlist-figure{
  margin:0;
  line-height:0;
  overflow:hidden;
}
.brandlist-figure img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 1000 / 600;          /* 写真比率目安 */
  object-fit: cover;
}

/* 白いボックス（画像の下に重ねる感じ） */
.brandlist-body{
  position: relative;
  z-index: 1;
  background:#fff;
  padding: 18px 20px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  margin: -24px 0 0 25px;
}

/* タイトル＆本文 */
.brandlist-ttl{
  font-family:'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  color:#222;
  margin: 0 0 10px;
}
.brandlist-txt{
  font-size: 14px;
  line-height: 1.9;
  color:#333;
}

/* CTAボタン（中央寄せ） */
.brandlist-cta{
  display:flex;
  justify-content:center;
  margin-top: 20px;
}


.brandlist-cta .btn-more.small{
  min-width: 220px;  
}

/* ふわっと（既存の .reveal を流用していれば不要） */
.brandlist-card.reveal{
  opacity:0;
  transform: translate(16px, 20px);
  transition: opacity .7s ease-out, transform .7s cubic-bezier(.22,.61,.36,1);
}
.brandlist-card.reveal.is-visible{
  opacity:1;
  transform: none;
}


@media (max-width: 950px){

  .brandlist-sec {
  padding: 40px 0 50px;
}


.brandlist-body{
  position: relative;
  z-index: 1;
  background:#fff;
  padding: 20px 20px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  margin: -15px 0 0 10px;
}

  .brandlist-list{ 
    grid-template-columns: 1fr; 
    gap: 36px; 
  }

/* カード */
.brandlist-card{
  position: relative;
}

/* 画像 */
.brandlist-figure{
  margin:0;
  line-height:0;
  overflow:hidden;
}
.brandlist-figure img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 1000 / 600;          /* 写真比率目安 */
  object-fit: cover;
}

/* 白いボックス（画像の下に重ねる感じ） */
.brandlist-body{
  position: relative;
  z-index: 1;
  background:#fff;
  padding: 18px 20px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  margin: -24px 0 0 25px;
}

/* タイトル＆本文 */
.brandlist-ttl{
  font-family:'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  color:#222;
  margin: 0 0 10px;
}
.brandlist-txt{
  font-size: 14px;
  line-height: 1.9;
  color:#333;
}

/* CTAボタン（中央寄せ） */
.brandlist-cta{
  display:flex;
  justify-content:center;
  margin-top: 20px;
}

.brandlist-cta .btn-more.small{
  min-width: 220px;  
}
}



/* ----------------------------------------------------
    実績
---------------------------------------------------- */

.jisseki-sec {
  position: relative;
  padding: 80px 0 0;
  overflow: hidden;
}


/* タイトル */
.jisseki-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 英語タイトル */
.jisseki-title .en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: 0.05em;
}

/* 日本語タイトル */
.jisseki-title .ja {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .18em;
}


/* タイトル下のロゴ列：PCはグリッドで7つ */
.jisseki-logos{
  list-style:none; 
  margin:40px 0 28px; 
  padding:0;
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap:16px;
}

.jisseki-logos img{
  width:100%; 
  height:52px; 
  object-fit:contain; 
  display:block;
  background:#fff; 
  box-shadow:0 2px 8px rgba(0,0,0,.05); 
  padding:8px; 
}

/* 念のためPC側ではアニメ無効を強制 */
@media (min-width: 951px){
  .jisseki-logos{
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 950px){
  .logos-scroll{
    position:relative;
    overflow:hidden;
    padding:10px 0;
    width:100%;
  }

  /* JSで is-marquee が付いてるときだけ横流し */
  .logos-scroll.is-marquee .jisseki-logos{
    display:flex;              /* gridを上書き */
    align-items:center;
    gap:20px;
    margin:0;
    padding:0;
    list-style:none;
    width:max-content;
    animation: logos-marquee 18s linear infinite;
    will-change: transform;
  }

  .logos-scroll.is-marquee .jisseki-logos li{
    flex:0 0 auto;
  }

  .logos-scroll.is-marquee .jisseki-logos img{
    height:56px;              /* ここでSPの見た目サイズ調整 */
    width:auto;
    padding:6px 10px;
  }
}

/* 2周分並べているので、半分だけ流せば1周分になる */
@keyframes logos-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}




@media (max-width: 950px){
  .logos-scroll{
    position: relative;
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
    touch-action: pan-y;
  }

  .logos-scroll.is-marquee .jisseki-logos{
    display: flex !important;   /* gridを打ち消し */
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
    will-change: transform;     /* ← JSでtransformだけ動かす */
  }

  .logos-scroll.is-marquee .jisseki-logos li{
    flex: 0 0 auto;
  }

  .logos-scroll.is-marquee .jisseki-logos img{
    height: 56px;
    width: auto;
    padding: 6px 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    display: block;
  }
    .jisseki-swiper{
    padding-right: 24px;   /* ここを増減させるとチラ見せ量が変わる */

}

}


/* ===========================
  実績スライド
   =========================== */
.jisseki-slider-wrap{ position:relative; padding-bottom:64px; }

/* Swiper のデフォ制御を阻害しない */
.jisseki-swiper { overflow:hidden; }
.jisseki-swiper .swiper-wrapper { /* 何も指定しない（Swiperに任せる） */ }
.jisseki-swiper .swiper-slide  { width:auto; } /* ← 明示的な width 指定はしない */

/* カード（崩れ対策） */
.j-card{ 
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.08); }


.j-figure{ line-height:0; }
.j-figure img{ width:100%; height:220px; object-fit:cover; display:block; }
.j-body{ padding:14px 16px 18px; }
.j-ttl{ font-size:13px; font-weight:700; margin:0 0 8px; color:#222; }
.j-txt{ font-size:12px; line-height:1.8; color:#333; margin:0; }

/* ========= 矢印 ========= */
.jisseki-prev, .jisseki-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #b89a65;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  z-index: 5;
  cursor: pointer;
  outline: none;
  border: none;
}

.jisseki-prev { left: -20px; }
.jisseki-next { right: -20px; }

/* --- 矢印本体（中心揃え・8px） --- */
.jisseki-prev::after,
.jisseki-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-40%, -40%) rotate(135deg); /* ← prev */
  transform-origin: center;
}

/* → next */
.jisseki-next::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 無効時 */
.jisseki-prev.swiper-button-disabled,
.jisseki-next.swiper-button-disabled {
  opacity: .35;
  pointer-events: none;
}


/* ========= ドット（中央下） ========= */
.jisseki-pagination{
  position:absolute !important;
  left:50% !important; 
  transform:translateX(-50%);
  bottom:130px !important;
  width:auto !important;
  text-align:center;
}

.jisseki-pagination .swiper-pagination-bullet{
  width:6px; 
  height:6px; 
  border-radius:50%; 
  background:#c8c8c8; 
  opacity:1;
  margin:0 4px !important;
}

.jisseki-pagination .swiper-pagination-bullet-active{ 
  background:#b89a65; }

/* 「その他の実績一覧」中央揃え */
.jisseki-more{ display:flex; justify-content:center; margin-top:60px; }

.jisseki-prev,
.jisseki-next {
  outline: none;          /* フォーカス枠を消す */
  border: none;           /* 念のため枠線も消す */
  box-shadow: 0 6px 16px rgba(0,0,0,.15); /* 既存の影は維持 */
}

.jisseki-prev:focus,
.jisseki-next:focus {
  outline: none;
}

@media (max-width: 950px){

  /* ←→ 丸ボタンの位置（強制的に上書き） */
  .jisseki-prev{
    left: -3px ;
    top: 190px;
  }
  .jisseki-next{
    right: -3px ;
    top: 190px;
  }

  /* 丸の大きさはそのまま（必要なら調整OK） */
  .jisseki-prev, 
  .jisseki-next{
    width: 22px;
    height: 22px ;
  }

  /* 中の矢印だけ小さく（← これが大事） */
  .jisseki-prev::after,
  .jisseki-next::after{
    width: 6px ;   /* ← 小さくする */
    height: 6px ;
    border-width: 2px ;
  }

  /* ページネーションの位置 */
  .jisseki-pagination{
    bottom: 150px !important;
  }
}




/* ----------------------------------------------------
    社会的な取り組み
---------------------------------------------------- */

.torikumi-sec {
  position: relative;
  padding: 80px 0 100px;
  overflow: visible;
}


/* タイトル */
.torikumi-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 英語タイトル */
.torikumi-title .en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: 0.05em;
}

/* 日本語タイトル */
.torikumi-title .ja {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .18em;
  margin-bottom: 30px;
}


/* リード＆本文 */
.torikumi-lead{
  font-size: 17px;
  font-weight: 700;
}


.torikumi-text p{
  margin: 0 0 14px;
  line-height: 1.95;
  font-size: 14px;
}

/* CTA */
.torikumi-cta{ margin-top: 24px; }

.torikumi-grid {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

/* 左（テキスト）エリアを少し狭める */
.torikumi-copy {
  flex: 0 0 46%;      /* ← 元56%を46%にして右側を広げる */
  max-width: 580px;
  order: 1;
}


/* ===== タイトル ===== */
.torikumi-title {
  margin: 0 0 20px;
  line-height: 1.1;
}


.torikumi-title .en {
  display: inline-block;
  white-space: nowrap; /* ←改行防止 */
  font-family: 'Cormorant Garamond', serif;
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: 0.05em;
}

.torikumi-title .ja {
  display: block;
  margin-top: 14px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-bottom: 30px;
}

/* ===== リード・本文 ===== */
.torikumi-lead {
  font-size: 20px;
  font-weight: 700;
  margin: 24px 0 18px;
}

.torikumi-text p {
  margin: 0 0 14px;
  line-height: 1.95;
  font-size: 14px;
  color: #222;
}

/* CTAボタン（中央配置） */
.torikumi-cta {
  margin-top: 32px;
  text-align: center;        /* ← ボタンを中央寄せ */
}


/* ===== 画像エリア ===== */

.torikumi-visual {
  flex: 1 1 auto;
  order: 2;
  position: relative;
}

.torikumi-visual img {
  display: block;
  width: 85%;
  height: auto;
  margin-left: auto;
  margin-top: -200px;
  z-index: 1;
  overflow: visible; 
  position: relative; 
}

.tk-main {
  transform: translateY(-120px);   /* お好みで調整 */
  will-change: transform;
}

.tk-thumb {
  position: absolute;
  left: -60px;
  bottom: -0px;
  width: 240px;
  overflow: visible; 
}

@media (max-width: 950px){
  /* タイトル下に画像を正しく並べる */
  .torikumi-title .en {
  display: inline-block;
  white-space: nowrap; /* ←改行防止 */
  font-family: 'Cormorant Garamond', serif;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: 0.05em;
}

  .torikumi-grid{
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .torikumi-visual{
    order: 1;
    position: relative;
    width: 100%;
    margin-bottom: 40px;
  }

  /* ===== メイン画像：右寄せ・やや小さめ ===== */
  .tk-main{
    width: 85%;
    margin: 340px 0 0 auto;
  }

  .tk-main img{
    width: 100%;
    aspect-ratio: 1 / 1;    /* 正方形にする */
    object-fit: cover;
    display: block;
  }


  .tk-thumb{
    width: 50%;
    position: absolute;
    left: 0;
    bottom: -20px;
  }

  .tk-thumb img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  }

  /* テキスト部分は画像の下へ */
  .torikumi-copy{
    order: 2;
    margin-top: -70px;
  }


  /* PCでの特大 margin-bottom をリセット */
  .torikumi-title{
    margin-bottom: 0 !important;
  }
}


/* 1文字ずつフェード＋少し下から */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  animation: charIn 0.9s cubic-bezier(.22,.61,.36,1) var(--d, 0s) forwards;
  will-change: transform, opacity;
}

/* 改行は自然に扱う */
.char.br { display: inline; }

/* アニメーション本体 */
@keyframes charIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 見出しは少しテンポ速めに見えるよう微調整したいときは上書き可能 */
.torikumi-lead .char { animation-duration: .6s; }

/* 一行ごとのフェードアップ */
.js-linefade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
.js-linefade.is-visible {
  opacity: 1;
  transform: translateY(0);
}



/* ----------------------------------------------------
    お問い合わせ
---------------------------------------------------- */
.contact-sec {
  position: relative;
  background: url("../images/contact_bg.jpg") center center / cover no-repeat;
  padding: 80px 0px;
  color: #fff;
  text-align: center;
  margin-bottom: -1px;
}


/* 内側 */
.contact-inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
}

/* タイトル */
.contact-title {
  display: flex;
  flex-direction: column;
}

.contact-title .en {
  font-size: 50px;
  letter-spacing: 0.04em;
}

.contact-title .ja {
  font-size: 20px;
  letter-spacing: 0.18em;
}

/* リード文 */
.contact-lead {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 40px;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─ 上ボタン（淡ベージュ） ─ */
.contact-btn.light {
  background: #f3e7c1;
  color: #222;
  border: 1px solid #e2d5aa;
  width: 280px;
}

.contact-btn.light:hover {
  background: #e8dbad;
}

/* ─ 下ボタン（濃いゴールド） ─ */
.contact-btn.gold {
  background: #b89a65;
  color: #fff;
  border: 1px solid #b89a65;
  width: 280px;
}
.contact-btn.gold:hover {
  background: #a8854f;
}



/* ボタン行：PCは横並び＆間隔広め、SPは縦積み */
.contact-cta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 30px;        
  flex-wrap: wrap;        /* 画面が狭めでも崩れにくく */
}

/* お問い合わせ（light）の矢印だけ黒 */
.btn_all--light::after {
  color: #333 !important;
}


.c-form input[type="date"] {
  color: #222;              /* 時間セレクトと同じ色にする */
  text-align: left;         /* 左寄せを明示 */
  padding: 20px 15px;       /* select と高さ＆余白を合わせる */
  line-height: 1.2;
}

/* iPhone Safari 専用の調整（中央に浮かないように） */
@supports (-webkit-touch-callout: none) {
  .c-form input[type="date"] {
    min-height: 55px;       /* select と同じ高さに */
    padding-top: 14px;      
    padding-bottom: 14px;
    text-align: left;       /* iPhoneは内部UI対策 */
  }
}



@media (max-width: 950px){

  .contact-sec {
  padding: 30px 0px 50px;
}


  .contact-cta{
    flex-direction: column;
    gap: 10px;            
  }
  
  .contact-btn.light,
  .contact-btn.gold {
    width: 300px;
    height: 70px;
  }

  .contact-lead {
    font-size: 16px;
    line-height: 1.9;
    margin-top: 30px;
}

}






/* ----------------------------------------------------
    下層FV
---------------------------------------------------- */
.fv-sub {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.fv-sub__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトル（画像の中央 or 左下）*/
.fv-sub__title {
  position: absolute;
  left: 50%;
  bottom: 40%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 32px;
  letter-spacing: 0.04em;
  font-weight: 1000;
}

@media (max-width: 950px) {
  .fv-sub {
    height: 200px;
    margin-top: 50px;
  }
  .fv-sub__title {
    font-size: 20px;
    bottom:35%;
    text-align: center;
  }
}


/* ======================================
  次ページへのCTA
====================================== */
.next-cta{
  padding-bottom: 100px;
  display: flex;
  padding-bottom: 100px;
}

/* グレーボタン共通 */
.btn_all--gray {
  background: #b8b8b8;
  border-color: #b8b8b8;
  color: #fff;
  display: inline-flex;      
  align-items: center;        
  justify-content: center;   
  margin: 0 auto;
  width: 270px;
}

/* ホバー時 */
.btn_all--gray:hover {
  background: #a0a0a0;
  border-color: #a0a0a0;
}

/* 矢印の色も白で統一 */
.btn_all--gray::after {
  color: #fff;
}

.news-sec .next-cta {
  margin-top: 40px;
}

@media (max-width: 950px){
.btn_all--gray {      
  width: 280px;  
  height: 60px; 
}
}



/* ----------------------------------------------------
    阪神タイガース
---------------------------------------------------- */


/* -------------------------------
  阪神タイガース × My Uni Story FV
-------------------------------- */
.ht-hero {
  padding: 120px 0 80px;
  text-align: center;
}


.ht-hero__inner {
  max-width: 900px;
  margin: 0 auto 24px;
}

.ht-hero__logo img {
  display: block;
  margin: 0 auto 24px;
  max-width: 420px;
  height: auto;
}


.ht-hero__title {
  font-size: 26px;
  font-weight: 600;
  margin: 0;
  letter-spacing: .06em;
}


.ht-hero__title-img {
  margin: 40px 0;
}

.ht-hero__title-img img {
  display: block;
  width: 100%;    
  height: auto;
}

/* 文章エリア */
.ht-hero__text {
  font-size: 15px;
  line-height: 1.9;
  max-width: 1000px;
  margin:50px auto 0;
}


.ht-hero__text p {
  margin: 0 0 14px;
}

@media (max-width: 950px) {
  .ht-hero {
    padding: 50px 0 0px;
  }

  .ht-hero__logo img {
    max-width: 100vw;
  }

  .ht-hero__title {
    font-size: 25px;
    margin-bottom: 16px;
  }

  .ht-hero__text {
    font-size: 14px;
    line-height: 1.8;
    padding: 0 0;
  }
}




/* ===============================
  3枚の自由配置セクション
================================ */

.kodawari-free {
  position: relative;
  padding: 0px 0 400px;
}

.kodawari-free__inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 画像の基本設定 */
.kf-photo {
  position: absolute;
  display: block;
}

.kf-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 1枚目 */
.kf-photo--01 {
  top: -30px;
  left: 20%;
  width: 28%;
  z-index: 1;
}

/* 2枚目 */
.kf-photo--02 {
  top: 120px;
  left: 50%;
  width: 33%;
  z-index: 2; 
}

/* 3枚目 */
.kf-photo--03 {
  top: 160px;
  left: 8%;
  width: 15%;
  z-index: 3;
}

@media (max-width: 950px) {
  .kodawari-free {
    padding: 10px 0 550px;
  }

  .kodawari-free__inner {
    position: static;
  }

  .kf-photo {
    position: absolute;
    width: 80%;
    max-width: 420px;
    margin: 0 auto 20px;
  }
    .kf-photo--01 {
      top: 30px;
      right: 0;
      width: 60%;
      z-index: 1;
    }
    .kf-photo--02 {
      left: 0;
      top: 190px;
      z-index: 2;
    }

    .kf-photo--03 {
    right: -160px;
    top: 380px;
    width: 35%;
    z-index: 3;
  }
  }



/* ==========================
  STORY セクション
========================== */
.ht-story {
  padding: 80px 0 110px;
}

.ht-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 60px;
  align-items: center;
}

/* 左：画像２枚を自由配置 */
.ht-story__photos {
  position: relative;
  min-height: 320px;   /* キャンバスの高さ（お好みで調整） */
}

/* 共通 */
.ht-story__photo {
  position: absolute;
  margin: 0;
}
.ht-story__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* メイン画像（大きい方） */
.ht-story__photo--main {
  width: 360px;        /* サイズはここで調整 */
  top: 0;
  left: 120px;
}

/* サブ画像（小さい方） */
.ht-story__photo--sub {
  width: 210px;        /* サイズ */
  bottom: -40px;       /* 少しはみ出させる感じならマイナス指定OK */
  left: 10px;          /* 横位置 */
}

/* 右：テキスト */
.ht-story__text p {
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 14px;
}


@media (max-width: 950px) {
  
  .ht-story {
    padding: 0px 0;
  }

  .ht-story__inner {
    display: block;
  }

  .ht-story__photos {
    min-height: auto;
    margin: 45px 0;
  }

  /* SPでは素直に上下配置にして崩れ防止 */
  .ht-story__photo {
    position: static;
  }
  .ht-story__photo--main {
    width: 80%;
    margin-bottom: 12px;
    margin-left: 60px;
  }

  .ht-story__photo--sub {
    width: 60%;
  }

  .ht-story__text p {
    font-size: 14px;
    text-align: center;
  }
}


/* =============================
  商品ブロック（阪神タイガース）
============================= */

.ht-product {
  padding: 80px 0;
  background: #faf6ec;
}

.ht-product__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 60px;
  align-items: flex-start;
}

/* 左：スライダー枠 */
.ht-product__slider .ht-product-swiper {
  width: 100%;
  overflow: hidden;
  background: #000;
}

.ht-product-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

:root {
  --swiper-navigation-size: 22px;
}

.ht-product-swiper .swiper-button-prev,
.ht-product-swiper .swiper-button-next {
  width: 32px !important;
  height: 32px !important;
  color: #fff;
}

.ht-product-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,.7);
}
.ht-product-swiper .swiper-pagination-bullet-active {
  background: #fff;
}

/* 右：テキストエリア */
.ht-product__content {
  font-size: 15px;
  line-height: 1.9;
}

.ht-product__title {
  font-size: 19px;
  line-height: 1.7;
  margin: 0 0 26px;
  letter-spacing: .12em;
  font-weight: 600;
}



.ht-product__text p {
  margin: 0 0 16px;
}

.ht-product__cta {
  margin: 26px auto;
  display: flex;
  gap: 16px;}


@media (max-width: 950px) {

  .ht-product {
    padding: 40px 0 50px;
  }

  .ht-product__inner {
    display: block;
  }
  
  .ht-product__title{
    font-size: 20px;
    line-height: 1.7;
    margin: 0 0 16px;
    text-align: center;
  }
  
  .ht-product__title .sm{
  font-size: 15px; 
}
  .ht-product__title .sm2{
  font-size: 18px; 
}


  .ht-product__slider {
    max-width: 500px;
    margin: 0 auto 24px;
  }

  .ht-product__content {
    font-size: 14px;
    line-height: 1.8;
    padding: 0 16px;
  }


  .ht-product__text p {
    margin-bottom: 14px;
  }

  .ht-product__cta {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin: 30px auto 0;
  }


  .ht-product__cta .btn_all {
    width: 100%;
    max-width: 360px;
    height: 64px;
  }
}




/* --------------------------------
  ページリンク
--------------------------------- */

.page-btn:hover {
  background: #B89A65;
  color: #fff;
  border: none;
}

.page-nav-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 80px 0;
}

.kodawari .page-btn{
  position: relative;
  display: flex;               
  align-items: center;         
  padding: 0 36px 0 20px;     
  height: 70px;
  width: 250px;
  color: #b89a65;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid #b89a65;
  transition: all .25s ease;
}

/* 右矢印 */
.page-btn::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 500;
  color: #b89a65;
  transition: all .25s ease;
}

.page-btn:hover {
  background: #B89A65;
  color: #fff;
}

.page-btn:hover::after {
  color: #fff;
  right: 10px;
}


#feeling,#gallery,#box,#onlyone
{
  scroll-margin-top:  180px ;
}

@media (max-width: 768px) {
  .page-nav-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 12px 16px; /* 上下：12px / 左右：16px */
    margin: 50px 10px 50px;
  }

  .page-btn {
    width: 100% !important;
    padding: 5px 0;
    font-size: 14px;
  }
}





/* ======================================
  人形の秀月×職人技
====================================== */

.feeling-block {
  padding: 100px 0 220px;
  background: url("../images/kodawari_bg.jpg") center center / cover no-repeat;
  
}

.feeling-block__inner {
  display: grid;
  grid-template-columns: 1.2fr 1.3fr;  /* 左コピー : 右本文 */
  align-items: start;
  gap: 30px;
}


/* ─ 左：縦キャッチコピー ─ */
.feeling-copy__text {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px;
  line-height: 2.6;
  writing-mode: vertical-rl;
  letter-spacing: .15em;
  white-space: nowrap;
  margin-left:120px;
}

.feeling-copy__text .feeling-indent {
  display: inline-block;
  margin-top: 120px; 
}

/* ─ 右：本文 ─ */
.feeling-text p {
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 14px;
}

.feeling-text p:last-child {
  margin-bottom: 0;
}



@media (max-width: 950px) {

  .feeling-block {
    padding: 20px 0 80px;
  }

  .feeling-block__inner {
    display: block;
  }

  /* 縦書き → 横書きへ変更 */
  .feeling-copy__text {
    font-size: 23px;
    line-height: 2.3;
    margin-bottom: 24px;
    text-align: center;
  }

  .feeling-text p {
    font-size: 14px;
    line-height: 2;
    text-align: center;
  }


}



/* ----------------------------------------------------
    人形の秀月×職人技　写真エリア
---------------------------------------------------- */
.feeling-gallery{
  padding: 120px 0;
}

.feeling-gallery__inner {
  position: relative;
    min-height: 620px;
}

.fg-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}



/* 共通：画像 */
.fg-item {
  position: absolute;     
}

.fg-item img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* ▼ 左の画像サイズ */
.fg-img--left {
  width: 320px;   
}

/* ▼ 右の画像サイズ */
.fg-img--right {
  width: 620px;    
}


/* 上左の大きい写真 */
.fg-item--01 {
  top: 0;
  left: 4%;
  width: 42%;
}

/* 右上の写真 */
.fg-item--02 {
  top: 14%;
  right: 8%;
  width: 30%;
}

/* 真ん中の横長（左寄り） */
.fg-item--03 {
  top: 55%;
  left: 10%;
  width: 45%;
  z-index: 2;
}

/* 左下の小さい写真 */
.fg-item--04 {
  bottom: -140px;         
  left: -90px;
  width: 22%;
  z-index: 1;
}




.kodawari-block__inner{
  display: grid;
  grid-template-columns: 1.1fr 1.1fr;  
  column-gap: 60px;
  align-items: flex-start;
  margin-top: -150px;
}

/* ---------- 左側 ---------- */
.kb-left{
  position: relative;
}

/* 大きい写真 */
.kb-photo-main img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 小さい写真（左下にかぶせる） */
.kb-photo-sub{
  position: absolute;
  left: -160px;   
  bottom: -90px;
  width: 220px;    
}
.kb-photo-sub img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ---------- 右側 ---------- */
.kb-right{
  position: relative;
}

/* 上の横長写真 */
.kb-photo-top{
  max-width: 420px;   
  margin-left: auto;  
  margin-bottom: 24px;
}
.kb-photo-top img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* テキストエリア */
.kb-text{
  max-width: 480px;    
}

.kb-heading{
  font-size: 23px;
  margin: 0 0 16px;
  letter-spacing: .12em;
  font-weight: 600;
}

.kb-lead p{
  font-size: 15px;
  margin: 0 0 18px;
  line-height: 1.9;
}

.kodawari-triple {
  margin-bottom: 80px;
}


.kodawari-triple__inner {
  display: flex;
  justify-content: flex-end; 
  margin-top: -50px;
}

.kb-photo-triple {
  display: flex;
  gap: 5px;                
}

.kb-photo-item {
  width: 260px;            
}

.kb-photo-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}


@media (max-width: 950px) {

    .feeling-gallery{
      padding: 50px 0;
      margin-bottom: 40px;
    }

    .feeling-gallery__inner {
      position: static;
      min-height: auto;
    }

    .fg-row {
    flex-direction: column;
    gap: 24px;
    }

  .fg-img--left,
  .fg-img--right {
    width: 90%;
    margin: 0 auto;
  }

    .fg-item {
      position: static;     
      width: 100%;
      max-width: 420px;
      margin: 0 auto 20px;   
    }

    .fg-item:last-child {
      margin-bottom: 0;
    }

    /* 上左の大きい写真 */
    .fg-item--01 {
      width: 100%;
      padding-bottom: 35px;
    }

    .fg-item--02 {
      width: 100%;
      padding-top: 35px;
      margin-bottom: 50px;
    }
    .fg-item--03 {
      width: 100%;
      padding-top: 45px;
    }
      .kodawari-block__inner{
    display: block;
    padding: 60px 0 0px;
  }

  .kb-left{
    margin-bottom: 40px;
  }
  /* 大きい写真 */
  .kb-photo-main img{
    width: 80%;
    margin-left: 20px;
  }

  .kb-photo-sub{
    position: absolute;
    left: -20px;  
    bottom: -80px;
    width: 50%;
  }

  .kb-text{
    max-width: 100%;
  }

  .kb-heading{
  font-size: 26px;
  margin: 120px 0 16px;
  letter-spacing: .12em;
  font-weight: 600;
  text-align: right;
}

  .kb-lead{
    margin-top: 100px;
  }
    .kodawari-triple__inner {
    justify-content: center; 
  }

  .kb-photo-triple {
    flex-direction: column;
    gap: 20px;
  }

  .kb-photo-item {
    width: 100%;           
  }
}



/* ==============================
    檜箱セクション
============================== */

.kodawari-box {
  position: relative;
  padding: 80px 0 ;
  margin-top: -1px;
}

.kodawari-box__bg {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0.45)),
    url("../images/kodawari_bg_02.jpg") center center / cover no-repeat;
  z-index: 0;
}

.kodawari-box__inner {
  position: relative;
  z-index: 2;
}

/* タイトル */
.kb-box-title {
  text-align: center;
  margin-bottom: 30px;
}


.kb-box-title__line {
  font-size: 23px;
  font-weight: 600;
}

/* 写真を自由配置するために relative */
.kodawari-box__inner {
  position: relative;
}


/* 左下の小写真 3つ（位置微調整OK） */
.kb-box-photo--01 {
  position: absolute;
  top:150px;
  left: 130px;
  width: 260px;
}

.kb-box-photo--02 {
  position: absolute;
  top: 180px;
  left: 40%;
  width: 260px;
}

.kb-box-photo--03 {
  position: absolute;
  top: 210px;
  right: 70px;
  width: 260px;
}

.kb-box-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* テキスト */
.kb-box-text {
  max-width: 650px;
  margin: 530px auto 0;
  text-align: center;
}

.kb-box-text p {
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 14px;
}

.kb-box-text p :last-child{
  margin: 0 0 0px;
}

@media (max-width: 950px) {
  .kb-box-title__line {
  font-size: 22px;
  font-weight: 600;
}

  .kodawari-box {
    padding: 60px 0 60px;
  }

  .kb-box-photo--main,
  .kb-box-photo--01,
  .kb-box-photo--02,
  .kb-box-photo--03 {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }

  .kb-box-text {
    margin-top: 40px;
    font-size: 14px;
    text-align: center;
  }
}


/* ==============================
  ONLY ONE セクション
============================== */

.kodawari-only {
  padding: 80px 0;
  background: #fff;
}

.kodawari-only__inner {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr;
  align-items: center;
}

/* 左側テキスト */
.kodawari-only__left {
  padding-right: 40px;
}

.kodawari-only__en {
  font-size: 60px;
  letter-spacing: 0.05em;
  color: #d4d4d4;
  margin: 0 0 18px;
}

.kodawari-only__ja {
  font-size: 23px;
  line-height: 1.8;
  margin: 0 0 28px;
  letter-spacing: .14em;
  font-weight: 600;
}

.kodawari-only__text p {
  font-size: 15px;
  line-height: 2.0;
  margin: 0 0 14px;
}

/* 右側：丸写真（PC） */
.kodawari-only__right {
  position: relative;
}

.kodawari-only__circle {
  position: relative;
  width: 530px;
  height: 520px;
  overflow: hidden;
  margin-left: auto;
  margin-right: -140px;   /* ← PCで右にはみ出させる */
}

.kodawari-only__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


@media (max-width: 950px) {

  .kodawari-only {
    padding: 40px 0;
  }

  .kodawari-only__inner {
    display: block;        /* 2カラム → 縦積み */
  }

  .kodawari-only__left {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .kodawari-only__en {
      margin: 0 0;
  }

  .kodawari-only__ja {
    font-size: 23px;
  }

  /* SPでは画像を左に寄せる */
  .kodawari-only__right {
    margin-top: 10px;
  }

  .kodawari-only__circle {
    width: 380px;          /* or 80vw でもOK */
    height: auto;
    margin: 0;             /* ← 左にぴったり */
  }

  .kodawari-only__text {
    text-align: left;
    margin-top: 30px;
  }
}


/* ==============================
  SERIAL NUMBER セクション
============================== */

.ht-serial {
  padding: 80px 0;
  background-color: #fff;
}

.ht-serial__inner {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr; /* 左：画像 / 右：テキスト */
  column-gap: 70px;
  align-items: center;
}

/* 左：画像エリア（自由配置用） */
.ht-serial__visual {
  position: relative;
  min-height: 360px;    
}

/* 共通スタイル */
.ht-serial__img {
  position: absolute;
  overflow: hidden;
}

.ht-serial__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ここで “自由配置” する */
.ht-serial__img--main {
  width: 350px;
  height: 350px;
  top: -50px;
  left: 140px;
}

.ht-serial__img--sub1 {
  width: 210px;
  height: 210px;
  top: 210px;
  left: 10px;
}

.ht-serial__img--sub2 {
  width: 190px;
  height: 190px;
  top: 260px;
  left: 210px;
}

/* 右：テキスト */
.ht-serial__body {
  text-align: left;
}

.ht-serial__en {
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: #d3d3d3;
  margin: 0 0 18px;
}

.ht-serial__ja {
  font-size: 20px;
  line-height: 2;
  letter-spacing: .16em;
  margin: 0 0 24px;
  font-weight: 600;
}

.ht-serial__text p {
  font-size: 15px;
  line-height: 2;
  margin: 0 0 14px;
}

.ht-serial__text p:last-child{
  margin: 0 0 0px;
}


.c-form__privacy a {
  color: #B89A65;  /* ゴールド */
  text-decoration: underline;
}

.c-form__privacy a:hover {
  opacity: 0.7;
}



@media (max-width: 950px) {

.ht-serial {
  padding: 0px 0 40px;
}

  .ht-serial__inner {
    display: flex;
    flex-direction: column;
  }

  .ht-serial__visual {
    min-height: auto;
    height: auto;
    margin-bottom: 30px;
  }

  .ht-serial__img {
    position: static;
    width: 100%;
    height: auto;
    margin-bottom: 14px;
  }

  .ht-serial__ja {
    font-size: 20px;
  }

  .ht-serial__text p {
    font-size: 14px;
  }

    .ht-serial__body {
    order: 1;
  }
  .ht-serial__visual {
    order: 2;
  }
  .ht-serial__text {
    order: 3;
  }
}




/* ==============================
  お問い合わせフォーム＆打ち合わせ日程
============================== */

.form_attention {
  background-color: #fff;
  padding: 30px ;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  text-align: center;   
  max-width: 930px;   
  margin: 0 auto;     
}


/* 中のテキスト整える（任意） */
.form-sec .form_attention p {
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 8px;
}
.form-sec .form_attention p:last-child {
  margin-bottom: 0;
}

.form-sec p {
  font-size: 15px;
  line-height: 1.9;
}

.c-form {
  max-width: 750px;
  margin: 60px auto;
  font-size: 15px;
}

/* 1項目ごとのブロック */
.c-form__row {
  margin-bottom: 50px;
}

.c-form__row--textarea {
  margin-bottom: 20px !important;
}

/* ラベル部分（上段） */
.c-form__label-wrap {
  margin-bottom: 6px;
}

/* ラベル＋必須を横並びに（ここがキモ） */
.c-form .c-form__label {
  display: inline-flex !important;   /* テーマ側に勝つ */
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

/* 必須マーク */
.c-form .c-form__badge {
  display: inline-block !important;
  padding: 2px 8px;
  font-size: 11px;
  background: #B89A65;
  color: #fff;
  line-height: 1;
  border-radius: 2px;
  white-space: nowrap;
}

/* 入力欄（テキストボックス） */
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form textarea {
  width: 100%;
  border: 1px solid #999999;
  padding: 20px;
  font-size: 15px;
  border-radius: 0;
  box-sizing: border-box;
}

/* テキストエリア高さ */
.c-form textarea {
  min-height: 160px;
  resize: vertical;
  margin-bottom: 0px !important;
}



.c-form__privacy input[type="checkbox"] {
  margin-right: 6px;
}

/* 送信ボタン */
.c-form__submit {
  text-align: center;
}

.c-form__submit input[type="submit"] {
  display: block;        
  margin: 60px auto 0;       
  padding: 13px 100px;
  border-radius: 50px;
  background: #dbcd9d;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s;
  border: none;
}


.c-form__submit input[type="submit"]:hover {
  background: #B89A65;
  color: #fff;
}

/* チェックボックス全体のサイズを大きくする */
.c-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  transform: scale(1.4); /* ←サイズ拡大（数値調整OK） */
  margin-right: 8px;
  cursor: pointer;
}

/* クリック範囲を広げる */
.c-form label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}



/* 打ち合わせ方法のラジオボタン */
.c-form__radios label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 20px;
  margin-bottom: 6px;
  cursor: pointer;
}

.c-form__radios input[type="radio"] {
  width: 18px;
  height: 18px;
  transform: scale(1.2);
}

/* セレクトボックス（時間帯・日程）の押しやすさ改善 */
.c-form select,
.c-form .c-form__select {
  width: 100%;
  padding: 20px;      
  font-size: 15px;          
  border: 1px solid #999999;
  border-radius: 0px;        
  background-color: #fff;
  box-sizing: border-box;
  margin-top: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23B89A65" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 20,0 10,12"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center; /* ← 矢印位置 */
  background-size: 14px;
}



.c-form input[type="date"] {
  width: 100%;
  border: 1px solid #999999;
  padding: 20px;
  font-size: 14px;
  border-radius: 0;
  box-sizing: border-box;
  background-color: #fff;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

.c-form__field .c-form__date,
.c-form__field .c-form__select {
  display: block;
  width: 100%;
}

/* 日付と時間の間に余白 */
.c-form__field .c-form__select {
  margin-top: 10px;
}

/* 打ち合わせ方法のラジオボタン（見た目調整） */
.c-form__field--meeting label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 20px;
  margin-bottom: 6px;
  cursor: pointer;
}

.c-form__field--meeting input[type="radio"] {
  width: 18px;
  height: 18px;
  transform: scale(1.2);
}

.c-form__note {
  font-size: 12px;
  color: #777;
  margin: 6px 0 0;
}


/* プライバシーエリアの余白をすべて潰す */
.c-form__privacy {
  margin: 0 -30px 0 0 !important;
  padding: 0 !important;
}

/* CF7 の wrap が余白を作るので完全に無効化 */
.c-form__privacy .wpcf7-form-control-wrap {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
}

/* ラベル部分の余白も完全に削除 */
.c-form__privacy-label {
  margin: 0 !important;
  padding: 0 !important;
}

/* リンクをすぐ下にピタッと付ける */
.c-form__privacy-link {
  margin-left: 48px !important; /* ← チェックボックスとテキストの位置に合わせて調整 */
  margin-top: -10px;
  display: block;
  font-size: 14px;
}

.c-form__privacy * {
  line-height: 1.2 !important;
}

/* 日付・セレクトなどフォーム内の青字を黒に統一 */
.c-form input[type="date"],
.c-form select,
.c-form .c-form__select {
  color: #333 !important;
}

/* 共通のスタイル（高さや余白をセレクトと合わせる） */
.c-form input[type="date"] {
  width: 100%;
  border: 1px solid #999999;
  padding: 18px 15px;
  font-size: 15px;
  border-radius: 0;
  box-sizing: border-box;
  background-color: #fff;
}

/* iPhone Safari 向け微調整 */
@supports (-webkit-touch-callout: none) {
  .c-form input[type="date"] {
    min-height: 55px;
    padding-top: 14px;
    padding-bottom: 14px;
    text-align: left;
  }
}

@media (max-width: 950px) {


    .form_attention {
    padding: 20px 5px;
    text-align: left;   

}


  .c-form {
    padding: 0 10px;
  }

  .c-form__privacy {
    font-size: 18px;
  }

  .c-form .c-form__label {
    font-size: 17px;
  }

  .c-form__submit input[type="submit"] {
  padding: 26px 150px;
  background-color: #dbcd9d;
  color: #222;
}


  .c-form input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    height: 52px !important; /* ← 好きに調整OK */
    padding: 27px !important;
    font-size: 16px !important;
    box-sizing: border-box;
    background-color: #fff !important;
    border: 1px solid #999999 !important;
  }

  /* ▼ date の親が横並びを維持しようとするのを無効化 */
  .c-form__field {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

    .c-form__note {
    font-size: 13px;

}

}



/* ----------------------------------------------------
    フッター
---------------------------------------------------- */

.footer {
  background:#9e9e9e;
  color:#fff;
  font-size:14px;
  line-height:1.8;
  padding:60px 0 20px;
}

/* 2カラム：横並びを安定させる */
.footer-inner{
  display:flex;
  align-items:flex-start;
  gap:40px;              /* 大きすぎると合計幅>100%で落ちます */
  flex-wrap:nowrap;      /* ここが重要：PCでは折り返さない */
  min-width:0;           /* オーバーフロー抑止 */
}

/* 左カラム：伸縮可だが少し広め */
.footer-info{
  flex: 1 1 380px;       /* 伸び縮みOK、基準幅380px */
  min-width: 200px;
}

/* 右カラム：余った幅を全部受ける */
.footer-nav{
  flex: 1 1 0;           /* 残りを全部取る */
  min-width: 580px;
}

/* ===== 左：会社情報 ===== */
.footer-logo{ font-size:18px;  margin-bottom:12px; }
.footer-address{ margin-bottom:12px; }

/* 電話/メール（アイコン行） */
.footer-contactlist{
  list-style:none; margin:0 0 16px; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.footer-contactlist li{
  display:flex; align-items:center; gap:10px;
  opacity:.95;
}
.footer-contactlist img{
  width:18px; height:18px; flex:0 0 18px; display:block; filter:brightness(0) invert(1);
}

/* SNS */
.footer-sns{ display:flex; gap:14px; margin:0; padding:0; list-style:none; }
.footer-sns a img{ width:24px; height:24px; opacity:.85; transition:opacity .2s; }
.footer-sns a:hover img{ opacity:1; }

/* ===== 右：リンク一覧 ===== */
.footer-nav ul{
  list-style:none; margin:0; padding:0;
  column-count:2;        /* 2段組み */
  column-gap:20px;
}

.footer-nav li{
  margin-bottom: 15px;
}

.footer-nav a{
  color:#fff; text-decoration:none; transition:opacity .2s;
}
.footer-nav a:hover{ opacity:.8; }

/* コピーライト */
.footer-bottom{
  margin-top:40px; 
  text-align:center; 
  font-size:12px; 
  opacity:.9;
}

/* ===== SP：1カラムに切替 ===== */
@media (max-width: 950px){

  .footer {
  padding:40px 0 15px;
}



  .footer-inner{ flex-wrap:wrap; }
  .footer-info, .footer-nav{ flex: 1 1 100%; min-width:0; }
  .footer-nav ul{ column-count:1; }
.footer-bottom{
  font-size:12px;
}

}


    /* ==============================
      ページトップ戻るボタン
    ============================== */
    .pagetop-btn {
      position: fixed;
      right: 16px;
      bottom: 24px;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #b89a65;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: opacity .4s ease, transform .4s ease, visibility .4s;
      z-index: 999;
    }

    /* ← ここで上向き矢印をCSSだけで描く */
    .pagetop-btn .arrow {
      position: relative;
      display: block;
      width: 10px;
      height: 10px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(-135deg); /* ＞を上向きに回転 */
      top:3px;
    }

    /* 表示時 */
    .pagetop-btn.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* SP少し小さく */
    @media (max-width: 950px) {
      .pagetop-btn {
        width: 44px;
        height: 44px;
        right: 12px;
        bottom: 18px;
      }
    }

/* ===== プライバシーポリシー ===== */

.plivacypolicy {
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #222;
  line-height: 1.8;
  padding: 60px 20px;
  background: #fafafa;
}

.plivacypolicy .article {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  padding: 40px 28px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

/* 見出し */
.plivacypolicy h1 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6F4B26;
}

.plivacypolicy h2 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 1.8em 0;
  line-height: 1.9;
}

.plivacypolicy h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 2em 0 0.6em;
  color: #333;
  border-left: 4px solid #B6905B;
  padding-left: 0.6em;
}

/* 段落 */
.plivacypolicy p {
  margin: 0 0 1.5em;
  font-size: 0.95rem;
  color: #333;
}

/* サイトTOPリンク */
.plivacypolicy a {
  display: inline-block;
  margin-top: 40px;
  padding: 12px 28px;
  background: #B6905B;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 4px;
  transition: background 0.3s;
}
.plivacypolicy a:hover {
  background: #6F4B26;
}

/* スマホ対応 */
@media (max-width: 950px) {
  .plivacypolicy {
    padding: 40px 14px;
  }
  .plivacypolicy .article {
    padding: 28px 18px;
  }
  .plivacypolicy h1 {
    font-size: 1.6rem;
  }
  .plivacypolicy h2 {
    font-size: 1rem;
  }
  .plivacypolicy h3 {
    font-size: 1.05rem;
  }
}

/* ===== 特商法 ===== */
/* ページ全体中央寄せ */
.tokushohobg {
  background: #FAF7F0;
  min-height: 100vh; /* 全画面高さ */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 16px;
}

/* カード本体 */
.tokushoho {
  width: 100%;
  max-width: 900px;
  background: #fff;
  border-radius: 12px;
  padding: 40px 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  animation: fadeIn 0.6s ease;
}

/* タイトル */
.tokushoho > h1 {
  font-size: 26px;
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
  color: #333;
  letter-spacing: 1px;
}

/* 定義リスト（2カラム揃え） */
.tokushoho-list .row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px 16px;
  padding: 14px 0;
  border-bottom: 1px dashed #e0e0e0;
}
.tokushoho-list dt {
  font-weight: bold;
  color: #555;
}
.tokushoho-list dd {
  margin: 0;
  color: #333;
  line-height: 1.7;
}

/* 戻るリンクをボタン風に */
.backlink {
  text-align: center;
  margin-top: 32px;
}
.backlink a {
  display: inline-block;
  padding: 10px 20px;
  background: #f8f8f8;
  border-radius: 8px;
  color: #444;
  text-decoration: none;
  border: 1px solid #ddd;
  transition: 0.2s;
}
.backlink a:hover {
  background: #eee;
  border-color: #ccc;
}

/* フェードイン演出 */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}

/* スマホ表示 */
@media (max-width: 950px) {
  .tokushoho {
    padding: 24px 16px;
  }
  .tokushoho > h1 {
    font-size: 20px;
  }
  .tokushoho-list .row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
  }
}