@charset "UTF-8";
html, body {
  margin: 0;
  padding: 0;
}


/* CSS Document */
html {
  visibility: hidden;
}
html.wf-active {
  visibility: visible;
}

body {
  font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: .025em;
  line-height: 1.8;
}
* {
  box-sizing: border-box;
}

/* ============================================= */
/*  共通レイアウト（ベース／サイドバー／フッター） */
/*  全ページ共通の CSS                            */
/*  → 各ページでそのまま流用してください          */
/* ============================================= */

:root {
  --bg-grad-start:#edf6f2;
  --bg-grad-end:#f8f1e9;
  --card-bg:#ffffff;
  --text-main:#333333;
  --text-muted:#0F0F0F;
  --accent:#333;
  --border:#ece6dd;
  --radius-lg:8px;
  --radius-pill:999px;
  --shadow-soft:0 18px 40px rgba(0,0,0,.06);
  --font-sans:-apple-system,BlinkMacSystemFont,"游ゴシック体","YuGothic","メイリオ",system-ui,sans-serif;
  --title:#1D3D5D;
}

*,
*::before,
*::after {
  box-sizing:border-box;
}

html,body {
  margin:0;
  padding:0;
}

body {
  font-family:
    "Yu Gothic Medium",
    "Yu Gothic",
    "YuGothic",
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color:var(--text-main);
  line-height:1.7;
	background: linear-gradient(
  to right,
  #F3F7F5 0%,
  #FCFAF6 50%,
  #FDF9F3 100%
);
	font-family: "Shippori Mincho", serif;
	font-weight: 400; /* 太字 */
}

/* ページ全体レイアウト */
.page {
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* コンテンツ幅の基準コンテナ */
.page-inner {
  width:100%;
/*  padding:24px 16px 40px;*/
  margin:0 auto;
}
.arrow {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 1.5px;
  margin: 3.9px 0;
  border-radius: 9999px;
  background-color: #000000;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.75px);
  right: 0;
  width: 7px;
  height: 1.5px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: calc(100% - 0.75px) 50%;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}

/* 矢印をスライドさせる（hover in/out 共にナチュラル） */
.section-btn .arrow {
  transition: transform 0.25s ease;
  will-change: transform;
}

.section-btn:hover .arrow {
  transform: translateX(5px);
}

/* 750px 以上：サイドバー＋メインの2カラム */
@media (min-width:881px) {
  .page-inner {
    padding:40px 40px 64px;
  }
  .layout {
    display:flex;
    align-items:flex-start;
    gap:10px;
  }
}

/* 1600px 以上は最大幅 90%に制限 */
@media (min-width:1600px) {
  .page-inner {
    max-width:100%;
  }
}

/* ---------- Sidebar ---------- */

.sidebar {
  margin-bottom:32px;
}

.site-logo {
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--title) !important;
}

.site-title {
	margin: 0;
  font-size:20px;
  letter-spacing:.15em;
	color:var(--title);
	font-weight: 400;
	color:var(--title) !important;
}

.site-title a{
	color:var(--title) !important;
	text-decoration: none;
}
.site-subtitle {
  font-size:12px;
  margin-top:4px;
  color:var(--title);
}

.sidebar-nav {
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:22px 16px;
    position: fixed;
    bottom: 30%;
}
/* aはレイアウト用、spanを装飾対象にする */
.sidebar-nav a {
  text-decoration: none;
  color: var(--text-muted);
}

.sidebar-nav a:hover {
  color: #FF6767;
}

/* spanを証跡要素に */
.sidebar-nav a span {
  position: relative;
  display: inline-block;
}

/* 下線（初期：非表示） */
.sidebar-nav a span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background-color: #FF6767;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* hover時：下からふわっと出現 */
.sidebar-nav a:hover span::after {
  opacity: 1;
  transform: translateY(0);
}

/* 現在地を常時表示したい場合 */
.sidebar-nav a.is-current span::after {
  opacity: 1;
  transform: translateY(0);
}
img {
	width: 100%;
	height: auto;
}
/* 750px 以上：サイドバーを縦に固定 */
@media (min-width:880px) {
  .sidebar {
/*    flex:0 0 220px;*/
    position:sticky;
    top:40px;
  }
  .sidebar-nav {
    flex-direction:column;
  }
}

/* ---------- Main container (各ページ共通の基本形) ---------- */

.main {
  flex:1;
}

/* ---------- Footer ---------- */

.footer {
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.6);
  padding:32px 16px 40px;
  font-size:11px;
  color:var(--text-muted);
  background:rgba(255,255,255,.4);
	color: #1D3D5D;
	background: #fff;
}

.footer-inner {
  width:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.footer-upper {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.footer-name {
  font-size:14px;
  letter-spacing:.14em;
}

.footer-link {
  margin-left:auto;
  font-size:11px;
}

.footer-link a {
  text-decoration:none;
}

.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:center;
  border-top: .1px solid #7F7F7F;
	
}
.footer-copy{
	margin-top: 22px;
}
.footer-link a{
	position: relative;
	left: -30px;
}
.footer-link a::after{
	z-index: 111;
	content: "";
	width: 10px;
	height: 10px;
	background: url("../img/comn/link.png") no-repeat;
	background-size: contain;
	background-position: center;
	display: block;
	position: absolute;
	right: -14px;
	top:3px;
}
/* 750px 以上フッターを横並びに */
@media (min-width:750px) {
  .footer {
    padding:32px 40px 40px;
  }
  .footer-upper {
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
  }
}
@media (min-width:821px) {
	  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
}


/* PC：ハンバーガーは不要 */
.hamburger{ display:none; }

/* ===== SP: <=880px ===== */

  @keyframes spMenuIn{
    from{ transform: translateX(105%); }
    to{ transform: translateX(0); }
  }


  @keyframes spDrawerIn{
    0%   { transform: translateX(110%); }
    60%  { transform: translateX(-10px); } /* 少し行き過ぎる */
    100% { transform: translateX(0); }
  }

@media (max-width: 880px){
.pc {
    display: none !important;
  }
 .sp {
    display: block !important;
  }
/* ---------- Sidebar ---------- */

.sidebar {
  margin-top:22px;
	margin-left: 22px;
}

.site-logo {
  font-size:.6rem;
}

.site-title {

 font-size:1rem;
}

.site-subtitle {
  font-size:.6rem;
}

.sidebar-nav {
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:22px 16px;
    position: fixed;
    bottom: 30%;
}
/* aはレイアウト用、spanを装飾対象にする */
.sidebar-nav a {
  text-decoration: none;
  color: var(--text-muted);
	margin-bottom: 20px;
}

.sidebar-nav a:hover {
  color: #FF6767;
}

/* spanを証跡要素に */
.sidebar-nav a span {
  position: relative;
  display: inline-block;
}

/* 下線（初期：非表示） */
.sidebar-nav a span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background-color: #FF6767;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* hover時：下からふわっと出現 */
.sidebar-nav a:hover span::after {
  opacity: 1;
  transform: translateY(0);
}

/* 現在地を常時表示したい場合 */
.sidebar-nav a.is-current span::after {
  opacity: 1;
  transform: translateY(0);
}

	
	
	
  /* ハンバーガー */
  .hamburger{
    display: grid;
    place-items: center;
    width: 44px;
    height: 22px;
    position: fixed;
    top: 20px;
    right: 1em;
    z-index: 3001;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
	  background: rgba(0,0,0,0) ;		  
  }

  .hamburger span{
    display:block;
    width:30px;
    height:1px;
    background:#111;
    margin:2.5px 0;
    transition: transform .25s ease, opacity .25s ease;
    pointer-events:none;
  }

  /* SPでは nav を完全に非表示（これが最重要） */
  #spMenu.sidebar-nav{
    display: none !important;  /* ← 強制で消す：チラ見え根絶 */
  }

	.sidebar-nav {
  margin-top:0;
}
	
  /* 開いた時だけ表示 */
  .sidebar.is-open #spMenu.sidebar-nav{
    display: flex !important;  /* ← 開いた時だけ出す */
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    z-index: 3000;
    padding: 72px 18px 18px;
    flex-direction: column;
    gap: 10px;

    /* ここからアニメーション（display切替＋アニメ両立のため初期位置から） */
    transform: translateX(0);
    animation: spMenuIn .22s cubic-bezier(.22,.61,.36,1) both;
	          align-items: center;

        justify-content: center;
  }

  /* ×変形 */
  .sidebar.is-open .hamburger span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }
  .sidebar.is-open .hamburger span:nth-child(2){
    opacity: 0;
  }
  .sidebar.is-open .hamburger span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }
	
  /* =========================
     Overlay（背面をふわっと暗く＋少しブラー）
     ========================= */
  .sidebar::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
    z-index: 2990; /* メニュー(=3000)より下、本文より上 */
  }

  .sidebar.is-open::before{
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* =========================
     Drawer（オーバーシュートで抑揚）
     ========================= */
#spMenu.sidebar-nav{
    /* 速さ → ゆっくり */
    transition:
      transform .85s cubic-bezier(.16,1,.3,1),
      opacity   .30s ease;
  }

  .sidebar.is-open #spMenu.sidebar-nav{
    animation: spDrawerInSlow .85s cubic-bezier(.16,1,.3,1) both;
	  text-align: center;
	  }
	.sidebar.is-open #spMenu.sidebar-nav::after{
	  content: "";
	  width: 100%;
	  display: block;
	  height: 300px;
	  margin: 0 auto;
	  background: url("../img/index/culture-img02.png") no-repeat;
	  background-size: contain;
	  background-position: bottom;
	}
  .sidebar:not(.is-open) #spMenu.sidebar-nav{
    /* 閉じる時はスッと戻る（少し短め） */
    transition:
      transform .32s cubic-bezier(.4,0,.2,1),
      opacity   .20s ease;
  }

  /* =========================
     Items（リンクを順番にふわっと出す）
     ========================= */
  #spMenu.sidebar-nav a{
    transform: translateX(14px);
    opacity: 0;

    transition:
      transform .45s cubic-bezier(.2,.9,.2,1),
      opacity   .30s ease;
  }

  .sidebar.is-open #spMenu.sidebar-nav a{
    transform: translateX(0);
    opacity: 1;
  }

  /* スタッガー（1個ずつ遅らせる） */
  .sidebar.is-open #spMenu.sidebar-nav a:nth-child(1){ transition-delay: .08s; }
  .sidebar.is-open #spMenu.sidebar-nav a:nth-child(2){ transition-delay: .13s; }
  .sidebar.is-open #spMenu.sidebar-nav a:nth-child(3){ transition-delay: .18s; }
  .sidebar.is-open #spMenu.sidebar-nav a:nth-child(4){ transition-delay: .23s; }
  .sidebar.is-open #spMenu.sidebar-nav a:nth-child(5){ transition-delay: .28s; }
  .sidebar.is-open #spMenu.sidebar-nav a:nth-child(6){ transition-delay: .33s; }
  .sidebar.is-open #spMenu.sidebar-nav a:nth-child(7){ transition-delay: .38s; }
  .sidebar.is-open #spMenu.sidebar-nav a:nth-child(8){ transition-delay: .43s; }
	
}

/* ===== PC: >=821px ===== */
@media (min-width: 821px){
  /* PCでは nav を通常表示へ */
  #spMenu.sidebar-nav{
    display: flex !important;
    position: static;
    height: auto;
    width: auto;
    padding: 0;
    transform: none;
    animation: none;
	position: fixed;
  }
}