/* ================================================
   BASE STYLE
================================================ */
body.dark-theme{
  margin:0;
  padding:0;
  font-family:"Montserrat",sans-serif;
  background:#0d0d0d;
  color:#f5f5f5;
  overflow-x:hidden;
}
/* =====================================================
   HEADER
===================================================== */
.site-header{
  width:100%;
  position:fixed;
  top:0; left:0;
  z-index:999;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-logo img {
  height: 28px;                 /* 使うロゴの縦サイズに合わせて調整 */
  width: auto;
  display: block;
}

@media(max-width: 768px){
  .header-logo img {
    height: 24px;               /* SP は少し小さく */
  }
}

.header-inner{
  max-width:1700px;
  margin: auto;
  padding:1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.header-nav{
  display:flex;
  gap:2rem;
}

.header-nav a{
  color:#ddd;
  text-decoration:none;
  font-size:0.9rem;
  letter-spacing:0.1em;
  position:relative;
  transition:0.25s;
}

.header-nav a:hover{
  color:#fff;
}

.header-nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0%; height:1px;
  background:#fff;
  transition:0.25s;
}

.header-nav a:hover::after{
  width:100%;
}

/* ハンバーガー */
.menu-toggle{
  display:none;
  font-size:1.8rem;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}

/* モバイルメニュー */
.header-nav-mobile{
  display:none;
  flex-direction:column;
  background:rgba(0,0,0,0.85);
  padding:1rem 1.5rem;
}

.header-nav-mobile a{
  color:#ddd;
  padding:0.8rem 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  text-decoration:none;
}

.header-nav-mobile a:last-child{
  border-bottom:none;
}

@media(max-width:768px){
  .header-nav{display:none;}
  .menu-toggle{display:block;}

  .header-nav-mobile.active{
    display:flex;
  }
}

/* =====================================================
   FOOTER
===================================================== */
.site-footer{
  background:#0d0d0d;
  color:#ccc;
  padding:2rem 2rem;
  text-align:center;
  /* border-top:1px solid rgba(255,255,255,.05); */
}

.footer-inner{
  max-width:1200px;
  margin:0 auto;
}

.footer-logo img {
  height: 100px;                 /* 見栄えが良いサイズ */
  width: auto;
  margin-bottom: 1rem;
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:1.8rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
}

.footer-links a{
  color:#bbb;
  text-decoration:none;
  font-size:0.85rem;
  letter-spacing:0.1em;
  transition:.25s;
}

.footer-links a:hover{
  color:#fff;
}

.footer-sns{
  display:flex;
  justify-content:center;
  gap:1.5rem;
  margin:1.5rem 0;
}

.footer-sns img{
  width:28px;
  opacity:0.8;
  transition:.25s;
}

.footer-sns img:hover{
  opacity:1;
  transform:scale(1.15);
}
.footer-sns .sns-icon {
  width: 34px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;   /* ← 中身が小さすぎても影響なし */
}

.footer-sns .sns-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ← 比率を守って最大表示 */
  display: block;
  opacity: .9;
  transition: .25s;
}

.footer-sns .sns-icon:hover img {
  opacity: 1;
  transform: scale(1.15);
}

.footer-copy{
  font-size:0.75rem;
  opacity:0.7;
  margin-top:1rem;
}


section{
  width:100%;
  position:relative;
}

.text-box{
  max-width:1200px;
  margin:0 auto;
}

.text-box p{
  font-size:1.05rem;
  line-height:1.9;
  margin:.6rem 0;
  /* text-align: center; */
}

.text-dark{color:#222!important;}
.text-dark p{color:#222!important;}


/* ================================================
   HERO SECTION
================================================ */
.hero-section{
  height:92vh;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.25));
}

.hero-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.v-line{
  position:absolute;
  top:0; bottom:0;
  width:1px;
  background:rgba(0,0,0,.9);
}
.v-line-1{left:24%;}
.v-line-2{left:50%;}
.v-line-3{left:76%;}
.hero-section::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:4%;
  height:1px;
  background:rgba(0,0,0,.9);
}

.hero-side-strip{
  position:absolute;
  top:0; bottom:0; right:0;
  width:14%;
  background:rgba(255,255,255,.96);
  display:flex;
  justify-content:center;
  align-items:center;
}

.hero-side-text{
  writing-mode:vertical-rl;
  font-family:"Shippori Mincho",serif;
  font-size:1.5rem;
  letter-spacing:.3em;
  color:#111;
}

.hero-content{
  position:relative;
  margin-left:6vw;
  z-index:5;
}

.hero-title{
  font-family: "Montserrat", sans-serif;
  font-size: 5rem;
  font-weight: 500;        /* ★ 太字 */
  letter-spacing: 0.12em;  /* 少し詰めると締まる */
  line-height: 1.15;
  text-transform: uppercase;
}
/* 1. 全ての単語は基本的に横並び（インライン） */
.hero-title .word {
    display: inline;
}
/* 2. PC用の改行要素は表示 */
.hero-title .pc-break-only {
    display: inline; 
}


/* ======================================================== */
/* SP設定（767px以下） */
/* ======================================================== */
@media screen and (max-width: 767px) {
    /* 1. タイトルサイズを画面幅に追従させ、字間を少し詰める */
    .hero-title {
        /* clampで最小値を確保しつつ、vwで可変にする */
        font-size: clamp(3rem, 9vw, 4rem) !important;
        letter-spacing: 0.1em !important; /* 広すぎた字間を調整 */
        line-height: 1.2;
    }
    .hero-title .pc-break-only {
        display: none !important;
    }

    /* 2. 右側の白い帯に絶対重ならないようにガードを敷く */
    .hero-content {
        margin-left: 5vw !important;
        /* 右側の帯（最大28%想定）に重ならないよう、paddingで押し返す */
        padding-right: 32% !important; 
        box-sizing: border-box;
    }

    /* 3. 単語を縦並びにして、一行を短くする */
    .hero-title .word {
      display: block;     /* ★ 1単語＝1行 */
      text-align: left;   /* 好みで center でもOK */
    }

    /* 4. サブテキスト（社名）の微調整 */
    /* HTMLを <span class="sub-word">...</span> に変更した場合 */
    .sub-word {
        display: block;
        font-size: 0.75rem;
        margin-top: 10px;
        letter-spacing: 0.05em;
        opacity: 0.8;
    }
}


/* ================================================
   TITLES
================================================ */
.section-title{
  text-align:center;
  font-size:2.6rem;
  color:#111;
  font-weight:300;
  margin:0 1rem;
  padding-top: 2rem;
}

.section-title-script{
  text-align:center;
  font-size:4rem;
  margin-top:3rem;
  margin-bottom:.6rem;
  color:#fff;
}

.section-sub{
  text-align:center;
  font-size:1rem;
  opacity:.75;
  margin-bottom:3rem;
}


/* ================================================
   BACKGROUND
================================================ */
.bg-dark-ocean{
  background:#0d0d0d;
  color:#fff;
}

.bg-white{
  background:#fff;
  color:#000;
  padding-bottom:2rem;
}


/* ================================================
   PHOTO BLOCKS
================================================ */

/* 🔥 全体の基本はこれ */
.section-photo{
  width:100%;
  background-size:cover;
  background-position:center;
  display:block;
}

/* 🔥 ABOUT / HISTORY の画像は常に 380px 固定 */
.section-block.has-photo .section-photo{
  height:380px !important;
  margin:0 !important;
}
/* ================================================
   MISSION：共通スタイル
================================================ */
#mission .mission-item {
  margin-bottom: 1.8rem;
}

#mission .mission-label {
  display: block;          /* ★ 常に改行 */
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}

#mission .mission-desc {
  display: block;          /* ★ 常に改行 */
}
/* ================================================
   ROW LAYOUT（MISSION / COMPANY / CONTACT）
================================================ */

.section-row{
  display:flex;
  width:100%;
  align-items:stretch;
}

.section-row-right{flex-direction:row;}
.section-row-left{flex-direction:row-reverse;}

/* テキスト側 */
.section-row .text-box{
  flex:1;
  padding:2rem 2vw;
}

/* 🔥 左右レイアウトの画像は親行にフィット（隙間ゼロ） */
.section-row .section-photo{
  flex:1;
  height: auto;
  min-height:450px;
}


/* ================================================
   SERVICES GRID
================================================ */
.section-column-bottom{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
}

.service-card {
  position: relative;
  padding: 2rem;
  border-radius: 12px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 45%,
    rgba(0,0,0,0.22) 100%
  );

  border: 2px solid rgba(255,255,255,0.18);
  overflow: hidden;
}

/* ★ 文字を守るための内側レイヤー */
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 既存の 0.28 から 0.85 へ変更 → 背景透過をほぼなくし、カードを暗くする */
  background: rgba(0,0,0,0.65); 
  pointer-events: none;
  z-index: 0;
}

/* 中身はレイヤーの上に */
.service-card > * {
  position: relative;
  z-index: 1;
}
.service-card h3{
  margin-top:1rem;
  /* サイズを1.2remから1.4remへ大きくする */
  font-size:1.4rem; 
  color:#fff;
  font-weight: 500; /* 強調のために太字にする */
  text-align: center;
}
.service-links {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
}

.service-links li + li {
  margin-top: 0.6rem;
}

.service-links a {
  position: relative;
  display: block;
  padding: 0.6rem 0.8rem 0.6rem 1.6rem;
  font-size: 0.9rem;
  
  /* リンクの色をブランドカラー（青など）に変更 */
  color: #4A90E2; 
  text-decoration: none;
  
  /* 左のラインの色をリンク色に合わせて濃くする */
  border-left: 2px solid #4A90E2; 
  transition: 0.25s ease;
}

/* 矢印をリンク色に合わせる */
.service-links a::before {
  content: "→";
  position: absolute;
  left: 0.4rem;
  /* リンク色に合わせ、不透明度を上げる */
  color: #4A90E2; 
  opacity: 1; 
  transition: 0.25s;
}

/* hover時の修正 */
.service-links a:hover {
  /* ホバー時、ラインを強調するために色を変えても良い */
  border-color: #fff; 
  background: rgba(255,255,255,0.08); /* 背景をより目立たせる */
  color: #fff; /* ホバーで白色に戻すとメリハリがつく */
}

.service-links a:hover::before {
  opacity: 1;
  transform: translateX(2px);
}


/* ================================================
   SNS LIST
================================================ */
.sns-links{
  margin-top:3rem;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:2rem 2.5rem;
  padding:0 6vw;
}

.sns-links .sns-icon{
  width:34px;height:34px;
}

.sns-links .sns-icon img{
  width:100%;height:100%;
  object-fit:contain;
  opacity:.9;
  transition:.25s;
}

.sns-links .sns-icon:hover img{
  opacity:1;
  transform:scale(1.15);
}


/* ================================================
   PARTNERS
================================================ */
.section-no-photo{
  background:#fff;
  color:#000;
  /* margin-top:3rem; */
}

.partner-wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2.5rem 3rem;
  max-width:1200px;
  margin:0 auto;
  padding:2rem 0 4rem;
}

.partner-wrap img{
  width:150px;
  height:70px;
  object-fit:contain;
  transition:.2s;
}

.partner-wrap img:hover{
  transform:scale(1.05);
}


/* ================================================
   HISTORY
================================================ */
.history-timeline{
  max-width:900px;
  margin:0 auto 4rem;
}

.history-row{
  display:flex;
  gap:2rem;
  padding:1.2rem 0;
  border-bottom:1px solid #ddd;
}

.history-year{
  width:80px;
  font-size:1.3rem;
  font-weight:600;
}

.history-desc{
  flex:1;
  line-height:1.7;
}


/* ================================================
   CONTACT
================================================ */
.contact-text-box{
  padding:6rem 6vw;
}

.contact-button{
  display:block;
  margin:2.5rem auto 0;
  padding:.9rem 2.4rem;
  color:#fff;
  border:1.4px solid #fff;
  border-radius:30px;
  width:fit-content;
  text-decoration:none;
  transition:.25s;
}

.contact-button:hover{
  background:#fff;
  color:#000;
  transform:translateY(-2px);
}

@media (min-width: 769px) {

  .map-frame {
    padding: 1rem 1vw;           /* contact-text-box と同一 */
    box-sizing: border-box;
  }

  .map-frame iframe {
    width: 100%;
    height: 100%;
  }

}

/* ============================================================
   RESPONSIVE : TABLET
============================================================ */
@media(max-width:980px){

  .hero-title{font-size:3rem;}
  .hero-side-strip{width:18%;}

  .service-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .service-links-horizontal{
    padding:0 3vw;
    gap:1.5rem;
  }
}


/* ============================================================
   RESPONSIVE : SMARTPHONE
============================================================ */
@media(max-width:768px){

  /* HERO */
  .hero-section{height:75vh;}
  .hero-title{font-size:2.2rem;}
  .hero-side-strip{width:23%;}
  .hero-content{margin-left:3vw;}

  /* ROW → column */
  .section-row{
    flex-direction:column!important;
  }
  .section-row .text-box{
    padding:2rem 1.2rem!important;
  }

  /* 🔥 MISSION / COMPANY の画像：縦並び用 */
  @media (max-width: 768px) {

    #mission .mission-item {
      margin-bottom: 1.6rem;
    }

    #mission .mission-label {
      display: block;
      font-size: 0.95rem;
      margin-bottom: 0.3rem;
    }

    #mission .mission-desc {
      display: block;
      font-size: 0.85rem;
      opacity: 0.9;
      line-height: 1.7;
    }

  }
  .section-row .section-photo,
  .map-frame{
    min-height:400px !important;
    height:400px !important;
    flex: none !important;
  }

  /* Google MAP 内 iframe も合わせる */
  .map-frame iframe {
    height: 100% !important;
  }
  

  /* TITLES */
  .section-title{font-size:2.1rem;padding:0 1rem;}
  .section-title-script{font-size:3rem;}

  /* PHOTO SECTIONS（ABOUT/HISTORY） */
  .section-block.has-photo .section-title,
  .section-block.has-photo .section-sub,
  .section-block.has-photo .text-box{
    padding:0 1.2rem!important;
  }

  /* SERVICES */
  .service-grid{
    grid-template-columns:1fr!important;
    padding:0 1.4rem;
  }

  /* 運営サービス → 横スライド */
  .service-links-horizontal{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:1rem 1.2rem!important;
    gap:1.4rem;
    scroll-snap-type:x mandatory;
  }
  .service-links-horizontal::-webkit-scrollbar{display:none;}

  /* PARTNERS */
  .partner-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem 1rem 2rem !important;
    justify-items: center;      /* ← ★ これで左右中央揃え */
    align-items: center;        /* ← ↑上下方向も中央に */
  }
  /* HISTORY */
  .history-row{
    padding-left:1rem;
    padding-right:1rem;
  }

  /* CONTACT */
  .contact-text-box{
    padding:2.4rem 1.2rem!important;
  }
}


/* ============================================================
   SMALL MOBILE
============================================================ */
@media(max-width:480px){

  .hero-title{font-size:1.8rem;}
  .hero-side-strip{width:28%;}

  .sns-links .sns-icon{
    width:30px;
    height:30px;
  }
}