@charset "utf-8";

/* =========================================================
   成光会 common.css（ヘッダー＋追従ボタン）
   - ヘッダー最大幅 1200px
   - 右上の「お問い合わせ」「採用情報」は画面右上に固定（PC）
   - グロナビはロゴの右から並べる
========================================================= */

:root{
  --container-max: 1200px;
  --container-pad: 24px;

  --float-size: 86px;
  --float-gap: 14px;
  --float-top: 18px;
  --float-right: 18px;

  --header-height: 92px;

  /* ドロップダウン色 */
  --dd-bg: #f3f0eb;
  --dd-border: #dccbb1;
}

/* --------------------------------------
   base
-------------------------------------- */
/* アンカーリンクをスムーズスクロールに */
html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

img {
	max-width: 100%;
	height: auto;
}

/* 最大1200pxコンテナ */
.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}

/* --------------------------------------
   右上の追従ボタン（PC）
-------------------------------------- */
.floating-actions{
  position: fixed;
  top: var(--float-top);
  right: var(--float-right);
  z-index: 1000;
  display: flex;
  gap: var(--float-gap);
}

.floating-actions__btn{
  display: block;
  width: var(--float-size);
  height: var(--float-size);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  background: transparent;
}

.floating-actions__btn img{
  display: block;
  width: 100%;
  height: 100%;
}

.floating-actions__btn:hover{ filter: brightness(.98); }
.floating-actions__btn:active{ transform: translateY(1px); }

/* --------------------------------------
   Header
-------------------------------------- */
.site-header{
  background: #fff;
  position: relative;
  z-index: 900;
}

/* 丸ボタン2個ぶん＋余白をヘッダー内右paddingとして確保 */
.site-header .container{
  padding-right: calc(var(--container-pad) + 246px); /* 186 + 60 */
}

.header-inner{
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}

/* ロゴ */
.header-logos{
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.header-logos__main img{
  display: block;
  height: clamp(44px, 4.2vw, 56px);
  width: auto;
}

.header-logos__sa img{
  display: block;
  height: clamp(32px, 3.2vw, 44px);
  width: auto;
}

/* グロナビ（ロゴの右側） */
.gnav{
  flex: 1 1 auto;
  min-width: 0;
}

.gnav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
}

.gnav__item{
  position: relative;
}

.gnav__link{
  display: inline-flex;
  align-items: center;
  padding: 18px 6px;
  text-decoration: none;
  color: #6b6b6b;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 18px;
  white-space: nowrap;
}

/* --------------------------------------
   Dropdown（PC）
-------------------------------------- */
.gnav-sub{
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  background: var(--dd-bg);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  padding: 16px 18px;
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: opacity .18s ease, visibility .18s ease, translate .18s ease;
  z-index: 950;
}

.gnav-sub--small{ min-width: 220px; }

.gnav-sub__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.gnav-sub__item + .gnav-sub__item{
  border-top: 1px solid var(--dd-border);
}

.gnav-sub__link{
  display: block;
  padding: 14px 8px;
  text-decoration: none;
  color: #5f5f5f;
  font-weight: 700;
  font-size: 14px;
}

.gnav-sub__link:hover{
  background: rgba(255,255,255,.35);
}

/* hover / focus-within で開く（PC） */
.gnav__item--has-sub:hover .gnav-sub,
.gnav__item--has-sub:focus-within .gnav-sub{
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* --------------------------------------
   ハンバーガーボタン
-------------------------------------- */
.nav-toggle{
  display: none; /* PCでは非表示、SPで表示 */
  position: absolute;
  top: 50%;
  right: var(--container-pad);
  transform: translateY(-50%);
  padding: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1100;
}

.nav-toggle__line{
  display: block;
  width: 28px;
  height: 2px;
  background: #6b6b6b;
  margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}

/* 開いているときの×印アニメ */
.nav-toggle--open .nav-toggle__line:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle--open .nav-toggle__line:nth-child(2){
  opacity: 0;
}
.nav-toggle--open .nav-toggle__line:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------
   Responsive（PC幅の微調整）
-------------------------------------- */

/* 1620px以下：少しコンパクトに */
@media screen and (max-width: 1620px){
  :root{
    --float-size: 78px;
    --float-gap: 12px;
    --header-height: 88px;
  }
  .header-inner{ gap: 18px; }
  .header-logos{ gap: 14px; }
  .gnav__list{ gap: 36px; }
}

/* 1400px以下：さらに詰める */
@media screen and (max-width: 1400px){
  :root{
    --float-size: 72px;
    --float-gap: 10px;
    --header-height: 84px;
  }
  .header-inner{ gap: 14px; }
  .gnav__list{ gap: 28px; }
  .gnav__link{ padding: 16px 4px; font-size: 15px; }
}

/* タブレット〜 */
@media screen and (max-width: 980px){
  :root{
    --float-size: 68px;
    --float-gap: 10px;
    --float-top: 12px;
    --float-right: 12px;
    --header-height: 80px;
  }
}

/* スマホ：ハンバーガー＋SPフッターボタン */
@media screen and (max-width: 768px){

  /* 追従丸ボタンはSPでは非表示 */
  .floating-actions{
    display: none;
  }

  .site-header .container{
    padding-inline: var(--container-pad);
  }

  .header-inner{
    justify-content: flex-start;
    gap: 16px;
  }

  /* ハンバーガーを画面右上に固定表示 */
  .nav-toggle{
    display: block;
    position: fixed;
    top: 10px;
    right: 10px;
    transform: none;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }

  /* ナビを全画面オーバーレイにして開閉 */
  .gnav{
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: #fff;
    padding: 24px var(--container-pad) 40px;
    display: none;
    overflow-y: auto;
    z-index: 800;
  }

  .gnav.gnav--open{
    display: block;
  }

  .gnav__list{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .gnav__link{
    padding: 8px 0;
    font-size: 18px;
  }

  /* サブメニューは常時展開、段組みを縦並びに */
  .gnav-sub{
    position: static;
    transform: none;
    min-width: auto;
    margin-top: 6px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    translate: 0;
  }

  .gnav-sub__list{
    margin: 0 0 0 18px;
  }

  .gnav-sub__item + .gnav-sub__item{
    border-top: none;
  }

  .gnav-sub__link{
    padding: 4px 0;
    font-size: 15px;
  }

  /* PC用 hover 開閉は無効化（常に見えているので実質何もしない） */
  .gnav__item--has-sub:hover .gnav-sub,
  .gnav__item--has-sub:focus-within .gnav-sub{
    opacity: 1;
    visibility: visible;
    translate: 0;
  }

  /* SP固定 お問い合わせ／採用 */
  body{
    padding-bottom: 42px; /* 下部固定ボタン分の余白 */
  }

  .sp-fixed-actions{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 900;
  }

  .sp-fixed-actions__btn{
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
  }

  .sp-fixed-actions__btn--contact{
    background: #cf6b59;
  }

  .sp-fixed-actions__btn--recruit{
    background: #cea55b;
  }

  .sp-fixed-actions__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sp-fixed-actions__icon img{
    display: block;
    width: 18px;
    height: 18px;
  }

  .sp-fixed-actions__text{
    line-height: 1;
  }

  /* 上に戻るボタンは下部ボタンの少し上に置く */
  .page-top{
    bottom: 56px;
  }
}

/* =========================================================
   Footer
========================================================= */
.site-footer{
  /*margin-top: 80px;*/
}

/* 上段：グラデーション背景 */
.footer-main{
  background: linear-gradient(to bottom, #f1efeb 0%, #cfc1aa 100%);
  padding: 40px 0 36px;
  color: #6e6358;
}

.footer-main__inner{
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

/* 左カラム：ロゴ＋住所＋TEL/FAX */
.footer-brand{
  flex: 0 0 42%;
}

.footer-brand__logo img{
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
}

.footer-brand__addr{
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.8;
}

.footer-brand__tel{
  margin-top: 10px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.0;
  color: #606060;
  letter-spacing: 0;
}

.footer-brand__tel-label{
  display: inline-block;
  width: 2.0em;
  color: #606060;
}

.footer-brand__tel-number{
  letter-spacing: 0.08em;
}

/* 右カラム：フッターナビ */
.footer-nav{
  flex: 1 1 0;
  font-size: 16px;
}

.footer-nav__section{
  border-top: 2px solid #514943;
  padding: 14px 0 10px;
}

.footer-nav__section + .footer-nav__section{
  margin-top: 14px;
}

.footer-nav__row{
  display: flex;
  align-items: flex-start;
  gap: 36px;
}

.footer-nav__section--single .footer-nav__row{
  justify-content: flex-start;
}

.footer-nav__title{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 180px;
}

.footer-nav__title a{
  color: #6e6358;
  font-size: 100%;
  font-weight: 700;
}

.footer-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav__list li + li{
  margin-top: 4px;
}

.footer-nav__link{
  text-decoration: none;
  color: #514943;
  font-size: 16px;
}

.footer-nav__link:hover{
  text-decoration: underline;
}

/* 下段：コピーライト帯 */
.footer-bottom{
  background: #514943;
  color: #fff;
  font-size: 14px;
  padding: 10px 0;
}

.footer-bottom__inner{
  text-align: center;
}

.footer-copy{
  margin: 0;
  letter-spacing: 0.06em;
}

.footer-nav__section--single{
  border-top: none;
  padding-top: 0;
}

/* --------------------------------------
   Footer Responsive
-------------------------------------- */
@media screen and (max-width: 980px){
  .footer-main__inner{
    flex-direction: column;
    gap: 32px;
  }

  .footer-brand{
    flex: 1 1 auto;
  }

  .footer-nav__row{
    flex-direction: column;
    gap: 10px;
  }

  .footer-nav__title{
    font-size: 17px;
    flex: 0 0 auto;
  }

  .footer-nav__link{
    font-size: 15px;
  }
}

/* スマホ：フッターナビを非表示にしてシンプルな表示に */
@media screen and (max-width: 768px){
  .footer-main__inner{
    flex-direction: column;
    gap: 24px;
  }
  .footer-nav{
    display: none;
  }
 

  .footer-main{
    padding: 28px 0 30px;
  }

  .footer-brand__logo img{
    max-width: 260px;
  }

  .footer-brand__addr{
    font-size: 15px;
  }

  .footer-brand__tel{
    font-size: 28px;
  }

  .footer-bottom{
    font-size: 13px;
  }
}

/* --------------------------------------
   ページトップボタン
-------------------------------------- */
.page-top{
  position: fixed;
  right: 18px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: #e5e5e5;
  color: #555555;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  cursor: pointer;
  z-index: 950;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .2s ease;
}

.page-top--visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.page-top:hover{
  filter: brightness(1.02);
}

.page-top:active{
  transform: translateY(2px);
}

/* スマホでちょっと小さく（位置はSPフッターボタンの上） */
@media screen and (max-width: 600px){
  .page-top{
    right: 12px;
    bottom: 64px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* SP固定ボタンのデフォルト（PCでは非表示） */
@media screen and (min-width: 769px){
  .sp-fixed-actions{
    display: none;
  }
}

/* =====================================
   共通ボタン：成光会をもっと見る など
   ===================================== */
/* 共通ボタン */
.btn-more{
  display: inline-flex;
  align-items: center;

  /* ★中央寄せをやめて左寄せにして、自前でレイアウト */
  justify-content: flex-start;

  /* gap は使わず、アイコン側で余白を調整 */
  /* gap: 8px; は削除 */

  min-width: 260px;     /* 幅を揃える指定はそのまま（必要に応じて調整） */
  max-width: 260px;
  padding: 10px 24px;
  border-radius: 999px;
  background-color: #b7905a;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}

/* テキスト部分を横いっぱいに広げて中央揃え */
.btn-more span{
  flex: 1;
  text-align: center;
}

@media screen and (max-width: 768px){
  .btn-more{
    width: 240px;          /* すべて同じ幅で固定 */
    max-width: 100%;       /* 画面が狭くてもはみ出さない保険 */
	  font-size: 18px;
	  padding: 4px 8px 4px 8px;
  }
}

.btn-more:hover{
  filter: brightness(1.05);
}

.btn-more__icon{
  width: 32px;
  height: auto;
  margin-left: auto;   /* これで右端にピタッと寄る */
}

/* ============================
   デバイス別表示ユーティリティ
   ============================ */

/* 初期状態（PC前提） */
.u-pc-only {
  display: block;
}
.u-sp-only {
  display: none;
}

/* スマホ幅で表示を入れ替える */
@media screen and (max-width: 767px) {
  .u-pc-only {
    display: none !important;
  }
  .u-sp-only {
    display: block !important;
  }
}

/* =========================================
   フェードインアニメーション（共通）
   - 左から：.fadein-left
   - 下から：.fadein-up
========================================= */

.fadein-left,
.fadein-up {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

/* 左からふわっと */
.fadein-left {
  transform: translateX(-30px);
}

/* 下からふわっと */
.fadein-up {
  transform: translateY(30px);
}

/* 画面内に入ったとき付与するクラス */
.fadein-left.is-visible,
.fadein-up.is-visible {
  opacity: 1;
  transform: none;
}

/* 動きを減らしたい環境ではアニメーション無効 */
@media (prefers-reduced-motion: reduce) {
  .fadein-left,
  .fadein-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================
   フェードイン用 遅延ユーティリティ
========================================= */

.fadein-delay-1 {
  transition-delay: 0.2s;
}

.fadein-delay-2 {
  transition-delay: 0.8s;
}

/* 必要なら増やせるように雛形だけ置いておきます */
/*
.fadein-delay-3 {
  transition-delay: 0.6s;
}
*/


/* =========================================
   共通：セクション見出し（下線 line1.svg）
   - タイトル幅だけ下線を表示
   - 下線の太さは常に一定
========================================= */

.c-secHead{
  text-align: center;
}

.c-secHead__title{
  display: inline-block;  /* ← タイトル幅にする */
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: #6e6358;
	font-size: 40px;
}

/* 下線（line1.svg）は背景で横に繰り返す */
.c-secHead__line{
  display: block;
  width: 100%;
  height: 5px; /* ← 下線の“見た目の太さ”はここで固定 */
  margin: 10px 0 0;
  background-image: url("../images/common/line1.svg");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%; /* 高さに合わせる（太さ固定） */
}

/* ======================================
   スマホサイズ（～767px）
   ====================================== */
@media screen and (max-width: 767px){
  .c-secHead__title{
    font-size: 28px !important;
    letter-spacing: 0.05em; /* 少しだけ詰める（任意） */
  }

  .c-secHead__line{
    height: 4px;     /* 線も少しだけ細く（任意） */
    margin-top: 8px; /* 間隔も少し詰める（任意） */
  }
}


/* =======================================
   Footer（スマホ表示の調整）
======================================= */
@media screen and (max-width: 768px){

  /* ロゴ〜TEL/FAX 全体を中央寄せ */
  .footer-brand{
    text-align: center;
  }

  /* 郵便番号・住所は「左寄せのまま」中央に置く */
  .footer-brand__addr{
    display: inline-block;   /* 幅を内容に合わせる */
    text-align: left;        /* 文字は左寄せ */
    margin-left: auto;
    margin-right: auto;
  }

  /* ロゴ画像：確実に中央寄せ */
  .footer-brand__logo{
    display: block;      /* flexをやめる（確実） */
    text-align: center;
  }

  .footer-brand__logo img{
    display: block;
    margin: 0 auto;      /* ←これが決定打 */
    width: 50%;
    max-width: 260px;
  }

  /* TEL/FAXの塊も中央に（見た目のズレ防止） */
  .footer-brand__tel{
    display: inline-block;
    text-align: left;        /* TEL/FAXの揃いは左のままが綺麗 */
  }

  /* ============================
     SP固定ボタン：高さ1.5倍 + 幅比 2:1
  ============================ */

  body{
    padding-bottom: 64px; /* 40px→60pxになった分、余白も増やす */
  }

  .sp-fixed-actions__btn{
    height: 60px;         /* 40px × 1.5 */
    font-size: 15px;      /* 少しだけ見やすく（不要なら消してOK） */
  }

  /* お問い合わせを2、採用情報を1の比率に */
  .sp-fixed-actions__btn--contact{
    flex: 2 1 0;
  }
  .sp-fixed-actions__btn--recruit{
    flex: 1 1 0;
  }

  /* アイコンを少しだけ大きくしてバランス */
  .sp-fixed-actions__icon img{
    width: 20px;
    height: 20px;
  }

  /* 上に戻るボタンの位置も少し上げる（任意） */
  .page-top{
    bottom: 76px;
  }
}