/* =========================
   custom.css (Casa BRUTUS-ish)
   既存style.cssは触らない
========================= */
@charset "utf-8";

/* ---- Base ---- */
:root{
  --bg: #fcfcfb;
  --text: #111;
  --muted: #666;
  --line: rgba(0,0,0,.12);
  --card: #fff;
  --shadow: 0 14px 40px rgba(0,0,0,.08);
  --radius: 18px;
  --max: 980px;
}

html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body{



  font-family: "Sawarabi Mincho","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif !important;
  line-height: 2.15 !important;
  letter-spacing: .04em !important;
  font-size: 16px;
}

/* links */
a{ color: inherit; text-decoration: none; }
a:hover{ opacity: .85; }

/* images */
img{ max-width:100%; height:auto; display:block; }

/* ---- Header ---- */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252,252,251,.86) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header .bg_bl{ display:none !important; }

header h1{
  margin: 0 !important;
  padding: 16px 22px !important;
}
header h1 img{
  width: 140px !important;
  height: auto !important;
}

/* ---- Navigation ---- */
#g_navi{
  border-top: 1px solid var(--line) !important;
  background: rgba(252,252,251,.96) !important;
}
#g_navi ul{
  width: min(var(--max), calc(100% - 44px)) !important;
  margin: 0 auto !important;
  padding: 10px 0 !important;
  list-style: none !important;
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
#g_navi a{
  font-size: 13px !important;
  letter-spacing: .08em !important;
  padding: 10px 6px !important;
}
#g_navi .contact a{
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 9px 14px !important;
}

/* ---- Sub top ---- */
#sub_top.about{
  text-align: center;
  min-height: 42vh !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  padding: 90px 22px 34px !important;
  border-bottom: 1px solid var(--line) !important;

  /* 背景画像 */
  background: url("../img/slide/main_img_02.jpg") center/cover no-repeat !important;

  font-size: 14px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #fff !important; /* 画像上なので白推奨 */
}
/* ---- Breadcrumb ---- */
.pankuzu{
  width: min(var(--max), calc(100% - 44px)) !important;
  margin: 0 auto !important;
  padding: 18px 0 !important;
  color: var(--muted) !important;
}
.pankuzu ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  font-size: 12px !important;
}
.pankuzu a{ color: var(--muted) !important; }

/* ---- Main container ---- */
.content{
  width: min(var(--max), calc(100% - 44px)) !important;
  margin: 0 auto !important;
  padding: 64px 0 120px !important;
}

/* ---- Section card ---- */
.cont_wrap{
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 64px 56px !important;
  margin: 36px auto !important;
}

/* ---- Typography ---- */
h2{
  margin: 0 0 18px !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
}
h3{
  margin: 0 0 30px !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  letter-spacing: .06em !important;
}
.cont_wrap p{
  margin: 0 0 18px !important;
}
.cont_wrap p:last-child{ margin-bottom: 0 !important; }

/* ---- Right image block ---- */
.img_right{
  float: right !important;
  width: 320px !important;
  margin: 0 0 24px 28px !important;
}
.img_right img{
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
}
.img_right p{
  margin-top: 10px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  letter-spacing: .08em !important;
}

/* ---- Table ---- */
.table_01{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.table_01 th,
.table_01 td{
  padding: 18px 18px !important;
  vertical-align: top !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 14px !important;
}
.table_01 tr:last-child th,
.table_01 tr:last-child td{ border-bottom: none !important; }
.table_01 th{
  width: 28% !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  background: rgba(0,0,0,.02) !important;
}

/* ---- Footer ---- */
footer{
  border-top: 1px solid var(--line) !important;
  background: #fff !important;
  padding: 40px 0 20px !important;
}
footer .cont_wrap{
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: min(var(--max), calc(100% - 44px)) !important;
  display: grid !important;
  grid-template-columns: 1.4fr .8fr !important;
  gap: 26px !important;
}
.f_box img{
  width: 160px !important;
  margin-bottom: 12px !important;
}
.f_box p{
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 2.0 !important;
}
.f_box ul{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
address{
  width: min(var(--max), calc(100% - 44px)) !important;
  margin: 24px auto 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--line) !important;
  color: var(--muted) !important;
  font-style: normal !important;
  font-size: 12px !important;
}

/* ---- To top ---- */
.to_top a{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;
}

/* ---- Responsive ---- */
@media (max-width: 820px){
  body{ font-size: 15px !important; }
  .content{
    width: calc(100% - 26px) !important;
    padding: 44px 0 84px !important;
  }
  .cont_wrap{
    padding: 42px 22px !important;
    border-radius: 16px !important;
  }
  #g_navi ul{
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 0 12px !important;
    gap: 12px !important;
  }
  #g_navi a{ white-space: nowrap !important; }
  .img_right{
    float: none !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
  }
  footer .cont_wrap{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: calc(100% - 26px) !important;
  }
  .table_01 th{ width: 34% !important; }
  .table_01 th,.table_01 td{
    padding: 14px 12px !important;
    font-size: 13px !important;
  }
}


/* ===== 縦書き hero ===== */
.hero_copy{
  writing-mode: vertical-rl;      /* 縦書き */
  text-orientation: upright;      /* 文字を正立 */
  font-size: 28px;
  letter-spacing: 0.15em;
  line-height: 2.2;
  color: #fff;
  margin: 0 auto;   /* ← これを追加 */
}

/* 中央配置 */
#sub_top.about{
  min-height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ===== フェードイン ===== */
.fadein{
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.8s ease forwards;
}

@keyframes fadeUp{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}



/* =========================
   Casa BRUTUS-ish for Philosophy section
   既存CSSの末尾に追記
========================= */

/* セクション全体：余白と整列 */
.cont_wrap.effect{
  padding: 84px 72px !important;
}

@media (max-width: 820px){
  .cont_wrap.effect{
    padding: 52px 22px !important;
  }
}

/* 見出し：雑誌っぽいタイポ */
.cont_wrap.effect h2{
  font-size: 13px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  color: rgba(0,0,0,.55) !important;
  margin-bottom: 22px !important;
}

.cont_wrap.effect h3{
  font-size: 24px !important;
  line-height: 1.9 !important;
  letter-spacing: .08em !important;
  font-weight: 400 !important;
  color: #111 !important;
  margin-bottom: 56px !important;
  position: relative;
  padding-bottom: 22px;
}

/* 見出しの下に細いライン（Casa感） */
.cont_wrap.effect h3::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 1px;
  background: rgba(0,0,0,.18);
}

/* 本文：行間と段落のリズムを“余白”で作る */
.cont_wrap.effect p{
  font-size: 16px !important;
  line-height: 2.35 !important;
  letter-spacing: .05em !important;
  margin: 0 0 26px !important;
  color: rgba(0,0,0,0.65) !important;
}

/* <br> 連打の“詰まり”を減らす（読み物のテンポ調整） */
.cont_wrap.effect p br{
  content: "";
}

/* “最後の一文”を締めコピーっぽく */
.cont_wrap.effect p:last-of-type{
  margin-top: 44px !important;
  padding-top: 22px !important;
  border-top: 1px solid rgba(0,0,0,.12) !important;
  font-size: 17px !important;
  letter-spacing: .06em !important;
}

/* 画像：紙面の余白感（角丸は控えめ、境界線は薄く） */
.cont_wrap.effect .img_right{
  width: 340px !important;
  margin: 0 0 34px 44px !important;
}

.cont_wrap.effect .img_right img{
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  filter: saturate(.92) contrast(1.02);
}

/* キャプション：小さく、静かに */
.cont_wrap.effect .img_right p{
  margin: 10px 0 0 !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  color: rgba(0,0,0,.55) !important;
}

/* スマホ：画像を上に、文章を読みやすく */
@media (max-width: 820px){
  .cont_wrap.effect h3{
    font-size: 20px !important;
    margin-bottom: 34px !important;
    padding-bottom: 18px !important;
  }
  .cont_wrap.effect h3::after{
    width: 56px;
  }
  .cont_wrap.effect p{
    font-size: 15px !important;
    line-height: 2.2 !important;
    margin-bottom: 22px !important;
  }
  .cont_wrap.effect .img_right{
    float: none !important;
    width: 100% !important;
    margin: 0 0 22px 0 !important;
  }
}

/* “読み物”感を上げる：本文の最大幅を少し絞る */
@media (min-width: 821px){
  .cont_wrap.effect{
    max-width: 980px;
  }
  /* 本文ブロックだけ少し細くして余白を作る */
  .cont_wrap.effect > p{
    max-width: 560px;
  }
}