*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#fff;
  color:#111;
  font-family:Arial,"Helvetica Neue",sans-serif;
  letter-spacing:.03em;
}

a{
  color:inherit;
  text-decoration:none;
}


/* =========================
   HEADER
========================= */

.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:58px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  z-index:20;
  border-bottom:1px solid #eee;
}

.logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
}

.menu-btn{
  width:42px;
  height:42px;
  border:0;
  background:none;
  padding:8px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}

.menu-btn span{
  display:block;
  height:1.5px;
  background:#111;
  width:24px;
}


/* =========================
   SECTION
========================= */

.section{
  padding:76px 18px;
}

.section-title{
  font-size:11px;
  letter-spacing:.22em;
  margin:0 0 28px;
  font-weight:700;
}


/* =========================
   NEWS
========================= */

.news-item{
  border-top:1px solid #ddd;
  padding:17px 0;
}

.news-item:last-child{
  border-bottom:1px solid #ddd;
}

.date{
  font-size:10px;
  color:#777;
  margin-bottom:7px;
}

.news-title{
  font-size:14px;
  line-height:1.5;
}


/* =========================
   MEMBERS
========================= */

.members{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:#f2f2f2;
}

.member{
  background:#f2f2f2;
  padding:0;
  display:block;
}

.member:nth-child(3n){
  background:#e9ecef;
}


/* MEMBER IMAGE */

.member img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
}


/* MEMBER NAME */

.member-name{
  font-size:17px;
  font-weight:700;
  letter-spacing:.08em;
  padding:12px 14px 0;
}


/* MEMBER ROLE */

.member-role{
  display:block;
  font-size:9px;
  letter-spacing:.14em;
  margin-top:5px;
  padding:0 14px 14px;
  color:#666;
}


/* =========================
   CARD
========================= */

.card{
  border:1px solid #ddd;
  padding:20px;
  margin-bottom:10px;
}

.card strong{
  font-size:15px;
}

.card small{
  display:block;
  margin-top:7px;
  color:#777;
  font-size:10px;
  letter-spacing:.12em;
}


/* =========================
   FOOTER
========================= */

.footer{
  padding:55px 18px 35px;
  border-top:1px solid #eee;
}

.footer-logo{
  font-family: 'Cormorant Garamond', serif;
  font-weight:700;
  letter-spacing: 0.08em;
}

.footer small{
  display:block;
  margin-top:18px;
  color:#777;
  font-size:9px;
}


/* =========================
   HAMBURGER MENU
========================= */

.overlay{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:30;
  transform:translateY(-100%);
  transition:transform .32s ease;
  display:flex;
  flex-direction:column;
}

.overlay.open{
  transform:translateY(0);
}

.menu-head{
  height:58px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #eee;
}

.close{
  font-size:30px;
  font-weight:200;
  background:none;
  border:0;
  line-height:1;
}

.menu-links{
  padding:45px 28px;
}

.menu-links a{
  display:block;
  font-size:25px;
  font-weight:700;
  letter-spacing:.06em;
  padding:15px 0;
}

.menu-links small{
  display:block;
  font-size:9px;
  color:#777;
  letter-spacing:.18em;
  margin-top:-10px;
  margin-bottom:13px;
}

.sns-card{
  display:block;
}



/* =========================
   HERO
=========================*/

.hero {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

/* スライダー全体 */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 各スライド */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

/* 表示中のスライド */
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* スライド画像 */
.hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 左右の矢印 */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  color: #55466a;
  font-size: 28px;
  cursor: pointer;
}

.slider-arrow.prev {
  left: 10px;
}

.slider-arrow.next {
  right: 10px;
}

/* ページネーション */
.slider-dots {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 9px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.slider-dot.active {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(80, 60, 100, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}


/* スマートフォンでの横はみ出し対策 */
html,
body {
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: clip;
}

/* セクション見出しとNEWSの余白を確保 */
.section {
  padding-left: 20px;
  padding-right: 20px;
}

.section-title,
.news-item,
.date,
.news-title {
  min-width: 0;
  max-width: 100%;
}

.news-title {
  overflow-wrap: anywhere;
  word-break: normal;
}


/* NEWS ARTICLE */
.news-article {
  padding-top: 100px;
}

.news-article .date {
  font-size: 10px;
  color: #777;
  margin-bottom: 12px;
}

.news-article h1 {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin: 0 0 28px;
}

.news-article p {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  margin: 0 0 24px;
}

.news-article .back-link {
  font-size: 13px;
  margin-top: 36px;
}


/* =========================
   PC VIEW
========================= */

@media (min-width:700px){

  body:before{
    content:"This sample is designed for smartphone viewing.";
    display:block;
    padding:30px;
    text-align:center;
  }

}