/* ========== Reset / Base ========== */
html,body{height:100%}
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;color:#5D5955;font-family:"ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;font-size:15px;line-height:2;background:#fff}
img{max-width:100%;height:auto;vertical-align:middle;border:0}
iframe{width:100%;border:0}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,figure{margin:0;padding:0;font-weight:400}
ul{list-style:none}
ol{padding-left:40px;padding-bottom:15px}
a{color:#666;text-decoration:none;transition:color .25s ease}
a:hover{color:#cd6052}

/* ========== Layout ========== */
#container{width:100%;height:100%}

/* 背景大画像 */
#mainimg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: url(../img/bg_04.webp) no-repeat right top / cover;
}

/* ヘッダー領域高さ */
header{height:93%}

/* ロゴ（円形） */
#logo img{
  width: min(20vw, 23vh);
  height: auto;
  border-radius: 50%;
  position: fixed;
  left: 5%;
  top: 4%;
}

/* メニュー画像（円形＋フェード） */
@keyframes fadeInMenu{from{opacity:0}to{opacity:1}}
#logo,#menu1,#menu2,#menu3,#menu4{animation:fadeInMenu 4s both}
#menubar img{border-radius:50%;}
header #logo a:hover,#menubar a:hover{opacity:.8}

/* メニュー配置 */
/* === Diagonal Swoop + Tapered Sizes (B + C) === */
:root{
  /* 位置（B由来） */
  --left-base: 6%;
  --left-step: clamp(12px, 2.5vw, 48px); /* 斜めの強さ（横幅に応じて自動で程よく） */
  --top-base: 28vh;
  --top-gap: 15vh;

  /* 段階サイズ（C由来：上=大 → 下=小） */
  --size-1: clamp(68px, 12vw, 132px);
  --size-2: clamp(62px, 11vw, 124px);
  --size-3: clamp(56px, 10vw, 116px);
  --size-4: clamp(52px,  9vw, 108px);
}

#menu1,#menu2,#menu3,#menu4{
  position: fixed;
  /* 画像は円形のまま（既存の丸角指定があればそちらが効きます） */
}

#menu1{
  left: calc(var(--left-base) + 0   * var(--left-step));
  top:  calc(var(--top-base)  + 0   * var(--top-gap));
  width: var(--size-1);
}
#menu2{
  left: calc(var(--left-base) + 1   * var(--left-step));
  top:  calc(var(--top-base)  + 1   * var(--top-gap));
  width: var(--size-2);
}
#menu3{
  left: calc(var(--left-base) + 0.5 * var(--left-step));
  top:  calc(var(--top-base)  + 2   * var(--top-gap));
  width: var(--size-3);
}
#menu4{
  left: calc(var(--left-base) + 1.5 * var(--left-step));
  top:  calc(var(--top-base)  + 3   * var(--top-gap));
  width: var(--size-4);
}

/* モバイル：下部ドックに横並び（等サイズに揃えて操作性優先） */
@media (max-width: 480px){
  :root{ --dock-y: 10px; --dock-size: clamp(44px, 16vw, 64px); }
  #menu1,#menu2,#menu3,#menu4{
    top:auto; bottom: var(--dock-y); width: var(--dock-size);
  }
  #menu1{ left: 8%;  }
  #menu2{ left: 30%; }
  #menu3{ left: 52%; }
  #menu4{ left: 74%; }
}

/* ========== コンテンツ共通 ========== */
.contents{overflow:hidden;padding:0 4% 50px 30%}
:root{
  --bg-step1:#FFF8F0;
  --bg-step2:#FDECEF;
  --bg-step3:#EAF4EC;
  --bg-step4:#EEF2FF;
  --bg-step5:#F6EFE7;
}

/* 既存レイアウト維持：背景画像だけ無効化＋色を塗る */
body .contents.bg1{ background-color:var(--bg-step1) !important; background-image:none !important; }
body .contents.bg2{ background-color:var(--bg-step2) !important; background-image:none !important; }
body .contents.bg3{ background-color:var(--bg-step3) !important; background-image:none !important; }
body .contents.bg4{ background-color:var(--bg-step4) !important; background-image:none !important; }
body .contents.bg5{ background-color:var(--bg-step5) !important; background-image:none !important; }

.contents h2{text-align:center;color:#2F2B29;letter-spacing:.2em;font-size:40px;margin-bottom:3px}
.contents h2::before{content:"❀";display:block;text-shadow:20px 10px 0 rgba(165,202,123,.8)}
.contents h2 span{display:block;font-size:12px}
.contents h3{margin-bottom:20px;letter-spacing:.1em;background:rgba(255,255,255,.3);text-align:center;border-radius:30px;padding:0 20px}
.contents p{padding:0 30px 20px}
.contents p+p{margin-top:-5px}

/* 一覧／ギャラリー */
.list img{width:31%;max-width: 238px;border-radius:8%;margin:10px .5%}
.list_top img{width:47%;max-width: 330px;border-radius:8%;margin:10px .5%}
.list {text-align:center}

/* NEW一覧（定義リスト） */
#new dl{padding:0 30px}
#new dt{float:left;width:9em;letter-spacing:.1em;color:#cd6052}
#new dd{padding-left:9em}

/* テーブル（ta1） */
.ta1{width:100%;margin:0 auto 30px}
.ta1 tr{background: none;}
.ta1 th,.ta1 td{padding:10px 15px;word-break:break-all}
.ta1 th{width:200px;text-align:center}
.ta1 th img{width:100%}
.ta1 th.other{
  font-weight: 700;
  font-size: 119%;
  letter-spacing: .05em;
}

/* テーブル（ta2） */
.ta2{width:100%;margin:0 auto 30px}
.ta2 th,.ta2 td{padding:10px 15px;word-break:break-all}
.ta2 th{width:30%;text-align:center}
.ta2 th.other{text-align:center;background: rgba(255,255,255,.2)}
.ta2 th img{width:100%;max-width: 278px;border-radius:50%}

/* フッター */
footer{text-align:center;padding:20px;line-height:81%}
footer a{text-decoration:none}

/* ユーティリティ */
.sketch{font-size:100%;}
.newicon{font-size:83%;font-weight:700;color:#f0113d}
.bold{font-size:108.5%;font-weight:700}
.small{font-size:85%}
.tiny{font-size:65%;}
.look{background:rgba(0,0,0,.1);padding:5px 10px;border-radius:4px}
.mb15,.mb1em{margin-bottom:15px!important}
.mb30{margin-bottom:30px!important}
.mb50{margin-bottom:50px!important}
.p0{padding:0!important}
.clear{clear:both}
ul.disc{padding:0 25px 15px;list-style:disc}
.color1,.color1 a{color:#cd6052!important}
.wl{width:96%}.ws{width:50%}
.c{text-align:center}.r{text-align:right}.l{text-align:left}
.w50{overflow:hidden;width:50%}
.fl{float:left}.fr{float:right}
.big1{font-size:50px}
.mini1{font-size:11px;line-height:1.5;display:inline-block}
.sh{display:none}

/* link */
a{ color: var(--accent); }
a:hover{ opacity:.85; }
.btn,
.button,
#menubar a,
header #logo a,

/* line */
/* 1) 色と太さ（好みで微調整） */
:root{
  --line-color: rgba(0,0,0,.16);
  --line-thick: 1px;
}

/* 2) 画像ラインを無効化（上書き） */
.ta1 tr,
.ta1 th.other,
.ta2 tr,
.ta2 th.other{
  background-image: none !important;
  background: none !important; /* 行背景にline.webpを敷いていた場合の保険 */
}

/* 3) セルの下線で“横ライン”を再現（高DPIでもクッキリ） */
.ta1 th, .ta1 td,
.ta2 th, .ta2 td{
  border-bottom: var(--line-thick) solid var(--line-color);
}

/* 最終行だけ線を消す（必要なら） */
.ta1 tr:last-child th, .ta1 tr:last-child td,
.ta2 tr:last-child th, .ta2 tr:last-child td{
  border-bottom: none;
}

/* 4) 「見出し行（.other）」の上辺に線を引く
   旧来：背景画像を上辺 repeat-x
   新方式：セルの上ボーダーで再現（色は同じ） */
.ta1 th.other,
.ta2 th.other{
  border-top: var(--line-thick) solid var(--line-color);
  background-color: rgba(255,255,255,.2); /* 元の淡い面色を残す場合。不要なら削除 */
}

/* 同じ行のTDにも上線を適用（:has()対応ブラウザ） */
.ta1 tr:has(th.other) td,
.ta2 tr:has(th.other) td{
  border-top: var(--line-thick) solid var(--line-color);
}

/* :has()非対応向けのフォールバック（多くの環境で効く） */
.ta1 th.other + td,
.ta1 th.other ~ td,
.ta2 th.other + td,
.ta2 th.other ~ td{
  border-top: var(--line-thick) solid var(--line-color);
}

/* === Link underline (safe patch) === */
a{
  text-decoration: underline;
  text-underline-offset: 0.14em;       /* 下線を文字から少し離す */
  text-decoration-thickness: 0.08em;   /* 細めの下線 */
}

/* ホバー時：色は既存ルールを活かしつつ、下線をほんの少し太く */
a:hover{
  text-decoration-thickness: 0.1em;
}

/* ボタン/ナビ等は下線ナシ（必要な箇所だけ明示的に除外） */

.btn,
.button,
#menubar a,
header #logo a,
.smooth a{
  text-decoration: none !important;
}

#menubar img,
.smooth img{
  border-radius: 50%;
}

@keyframes fadeInMenu { from { opacity: 0 } to { opacity: 1 } }
#logo, #menu1, #menu2, #menu3, #menu4{
  animation: fadeInMenu 5s both;
}

@keyframes toTopFade { from { opacity: 0 } to { opacity: 1 } }
body .smooth a{ display:none; }
body.smooth_pagetop .smooth a{
  position: fixed; left:6%; bottom: 20px; z-index: 100;
  display: block; width: 50px; line-height: 50px; text-align: center;
  text-decoration: none; animation: toTopFade .9s both;
}

#menubar a img{ transition: transform .18s ease, filter .18s ease; }
@media (hover:hover){
  #menubar a:hover img{ transform: scale(1.06); filter: brightness(1.05) saturate(1.04); }
}


/* ========== Responsive ========== */
@media (max-width:800px){
  body.s-n #sub,body.s-n #footermenu,.m-n{display:none}
  .big1{font-size:24px}
  .w50{width:auto}
  .fl,.fr{float:none}
}

@media (max-width:480px){
  body{font-size:12px;line-height:1.5}
  #logo img{left:2%;top:10px;position:fixed}
  #menu1,#menu2,#menu3{width:15%}
  #menu1{left:4%;top:20%}
  #menu2{left:4%;top:35%}
  #menu3{left:4%;top:50%}
  #menu4{left:6.5%;top:65%;width:10%}
  .contents{padding:0 4% 50px 25%}
  .contents h2{font-size:20px;letter-spacing:normal}
  .contents h2 span{font-size:10px}
  .contents p{padding:0 0 20px}
  #new dl{padding:0}
  #new dt{float:none;width:auto}
  #new dd{padding-left:0;margin-bottom:8px}
  .ta1,.ta1 td,.ta1 th{padding:5px}
  .ta1 th{width:100px}
  .ws,.wl{width:94%}
  .big1{font-size:16px}
  .sh{display:block}.pc{display:none}
}

/* Optional demo underlines */
p.line1{text-decoration:none}
p.line2{text-decoration:underline}
p.line3{text-decoration:overline}
p.line4{text-decoration:line-through}
p.line6{text-decoration:underline dotted red}

/* ギャラリー中央揃え */
.pswp-gallery .sketch{
  display: block;
  text-align: center;
}

/* 行間をちょっと整える（任意） */
.pswp-gallery .sketch a{
  display: inline-block;
  margin: 0 .1em .4em;
  line-height: 1;
  /* 下線が邪魔なら次行をON */
  /* text-decoration: none; */
}

/* NEW! も横並びで中央に */
.pswp-gallery .sketch .newicon{
  display: inline-block;
  margin-left: .4em;
}