@charset "utf-8";

/* ============================================================
   CSS設計方針
   - style.css  : サイト全体の基盤（変数・リセット後処理・共通レイアウト・
                  ヘッダー・フッター・CTA・PageTop・SPナビ・サブFV）
   - parts.css  : ページ固有コンポーネント（サービスカード・フロー・FAQ等）
   ============================================================ */


/* ============================================================
   1. CSS カスタムプロパティ（デザイントークン）
   ============================================================ */
:root {
  /* ブランドカラー */
  --color-primary:   #f3b421;  /* メインイエロー */
  --color-secondary: #f7931e;  /* サブオレンジ  */
  --color-accent:    #f5a300;  /* アクセント（ボタン等）*/
  --color-link:      #754c24;  /* テキストリンク */

  /* テキスト */
  --color-text:      #565656;
  --color-text-dark: #1b2a52;
  --color-text-mute: #78716c;
  --color-text-light: #666;

  /* 背景 */
  --color-bg-white:  #fff;
  --color-bg-warm:   #fffaef;
  --color-bg-dark:   #292524;
  --color-bg-icon:   #fef3c7;

  /* ボーダー */
  --color-border:    #f5f5f4;
  --color-border-warm: #f1e5bf;

  /* wave の高さ */
  --wave-h: 120px;

  /* トランジション */
  --transition: 0.3s ease;
}


/* ============================================================
   2. 基本要素（リセット後の共通設定）
   ============================================================ */
html {
  font-size: 100%;
}

body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: var(--color-text);
  font-size: clamp(16px, 2vw, 18px);
  background: url("../img/common/bg.jpg") center / cover fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7;
  font-weight: 600;
}

p {
  letter-spacing: 0.1em;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.7;
}

a {
  text-decoration: none;
  color: var(--color-link);
  transition: opacity var(--transition);
}

ul, ol {
  list-style: none;
  padding: 0;
}

main {
  width: 100%;
  overflow: hidden;
}

section {
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

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


/* ============================================================
   3. ユーティリティクラス
   ============================================================ */

/* --- テキスト揃え --- */
.t_center { text-align: center; }
.t_left   { text-align: left;   }

/* --- インラインブロック（改行制御） --- */
span.ib { display: inline-block !important; }

/* --- PC / SP 表示切替 --- */
.sp { display: none; }
.pc { display: block; }

@media (max-width: 767px) {
  .sp { display: block; }
  .pc { display: none;  }
}

/* --- 改行ユーティリティ --- */
@media (min-width: 451px) { br.only450 { display: none; } }
@media (max-width: 450px) { br.not450  { display: none; } }

/* --- 幅制御 --- */
.inner {
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
}
.inner.wide { max-width: 1400px; }
.inner.max  { max-width: none;   }
.inner.w960 { max-width: 960px;  }

/* --- margin-bottom ユーティリティ --- */
.mg100 { margin-bottom: 100px !important; }
.mg80  { margin-bottom:  80px !important; }
.mg60  { margin-bottom:  60px !important; }
.mg50  { margin-bottom:  50px !important; }
.mg40  { margin-bottom:  40px !important; }
.mg30  { margin-bottom:  30px !important; }
.mg20  { margin-bottom:  20px !important; }
.mg10  { margin-bottom:  10px !important; }
.mg0   { margin-bottom:   0   !important; }

/* --- p の margin-bottom --- */
.pmg5  p { margin-bottom:  5px; }
.pmg   p { margin-bottom: 10px; }
.pmg15 p { margin-bottom: 15px; }
.pmg20 p { margin-bottom: 20px; }
.pmg5  p:last-child,
.pmg   p:last-child,
.pmg15 p:last-child,
.pmg20 p:last-child { margin-bottom: 0; }

/* --- 画像フィット --- */
.obj-in  { width: 100%; height: 100%; object-fit: contain; }
.obj-cov { width: 100%; height: 100%; object-fit: cover;   }

.img_4-3 {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.img_16-9 {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --- Flexbox ユーティリティ --- */
.flexbox { display: flex; flex-wrap: wrap; }
.f_jsb   { justify-content: space-between; }
.f_cent  { justify-content: center;        }
.fac,
.f_center { align-items: center; }

.comn2 { width: 48%; }
.comn3 { width: calc(100% / 3 - 20px); }
.comn4 { width: 35%; }
.comn5 { width: 62%; }

@media (max-width: 767px) {
  .flexbox { flex-direction: column; }
  .flexbox.rever { flex-direction: column-reverse; }
  .comn2, .comn3, .comn4, .comn5 {
    width: 100%;
    margin-bottom: 30px;
  }
}


/* ============================================================
   4. 見出し（共通）
   ============================================================ */
.main-ttl {
  font-size: clamp(1.5rem, 1.205rem + 1.31vw, 2.188rem);
  font-weight: 600;
  margin-bottom: 50px;
}

/* サブタイトル（斜め線付きラベル） */
.sub_ttl {
  color: var(--color-primary);
  font-size: clamp(1.125rem, 1.071rem + 0.24vw, 1.25rem);
  margin-bottom: 20px;
}
.sub_ttl span {
  padding-left: 20px;
  position: relative;
}
.sub_ttl span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 2px;
  height: 25px;
  background: var(--color-primary);
  transform: rotate(35deg);
}


/* ============================================================
   5. 波形背景（wavearia）
   ============================================================ */

/* 上下波 */
.wavearia {
  position: relative;
  margin: var(--wave-h) 0;
  background: var(--color-bg-white);
}
.wavearia::before,
.wavearia::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: var(--wave-h);
}
.wavearia::before {
  top: calc(-1 * var(--wave-h));
  background: url("../img/common/wave-top.svg") no-repeat top / cover;
}
.wavearia::after {
  bottom: calc(-1 * var(--wave-h));
  background: url("../img/common/wave-bottom.svg") no-repeat bottom / cover;
}

/* 上波のみ */
.wavearia_top {
  position: relative;
  margin: var(--wave-h) 0 0;
  background: var(--color-bg-white);
}
.wavearia_top::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--wave-h));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: var(--wave-h);
  background: url("../img/common/wave-top.svg") no-repeat top / cover;
}
/* 下波のみ */
.wavearia_bottom {
  position: relative;
  margin: 0 0 var(--wave-h);
  background: var(--color-bg-white);
}
.wavearia_bottom::before {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--wave-h));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: var(--wave-h);
  background: url("../img/common/wave-bottom.svg") no-repeat bottom / cover;
}


/* ============================================================
   6. 共通ボタン
   ============================================================ */

/* --- アバウトリンク（矢印テキストリンク） --- */
.tabout-link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tabout-link a {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-weight: 600;
  font-size: 25px;
  padding: 0 20px;
  border-bottom: 2px solid var(--color-link);
  transition: var(--transition);
}
.arrow {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url("../img/common/arrow.svg") no-repeat center / contain;
  transition: var(--transition);
}
.tabout-link a:hover .arrow {
  background-image: url("../img/common/arrow-hover.svg");
  transform: scale(1.4);
}

/* --- 汎用ボタン（.btn） --- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: bold;
  text-decoration: none;
  transition: var(--transition);
}
.btn.primary {
  background: var(--color-secondary);
  color: #fff;
  letter-spacing: 0.1rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.btn.primary:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
}
.btn.secondary {
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}
.btn.secondary:hover {
  border-color: #fff;
}

@media (max-width: 500px) {
  .btn.primary { width: 80%; }
}
@media (max-width: 350px) {
  .btn.primary { width: 95%; }
}


/* ============================================================
   7. ヘッダー
   ============================================================ */
#header {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  gap: 50px;
}

.h-head {
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 2rem;
  height: 70px;
  display: inline-block;
  border-radius: 80px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
}
.h-head ul {
  display: flex;
  gap: 15px;
  height: 100%;
  align-items: center;
}
.h-head li {
  height: 100%;
  width: max-content;
}
.h-head li a {
  display: flex;
  align-items: center;
  height: 100%;
}
.h-head .hlogo {
  margin-right: 20px;
  padding: 8px 0;
}

.h-contact {
  height: 100%;
  border-radius: 80px;
  background: var(--color-secondary);
  width: max-content;
  transition: opacity var(--transition);
}
.h-contact a {
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 2rem;
}
.h-contact:hover {
  opacity: 0.6;
}

/* タブレット〜 */
@media (max-width: 1269px) {
  #header {
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
  }
  .h-head .hlogo { margin-left: 20px; }
  .h-head ul li:not(.hlogo) { display: none; }
  .sp-right { display: flex; gap: 20px; }
}

/* 高さが低いデバイス（ノートPC等） */
@media (max-height: 1200px) {
  #header { height: 60px; }
}

@media (max-width: 768px) {
  #header  { height: 60px; }
  .h-head  { height: 60px; }
}
@media (max-width: 599px) {
  .h-contact { display: none; }
}
@media (max-width: 450px) {
  .h-head { height: 50px; padding: 5px 1rem; }
}


/* ============================================================
   8. フッター CTA（fcta.php）
   ============================================================ */
.cta {
  position: relative;
  padding-top: 150px;
  background:
    linear-gradient(to bottom, rgba(30, 24, 24, 0.45), rgba(20, 20, 20, 0.8)),
    url("../img/common/ctabg.jpg") center / cover;
  color: #fff;
  text-align: center;
  overflow: hidden;
}


.cta-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--wave-h);
}
.cta-wave img {
  width: 100%;
  display: block;
}
#about .cta-wave{
	display: none;
}
.cta-title {
  font-size: clamp(1.563rem, 1.375rem + 0.83vw, 2rem);
  line-height: 1.5;
  margin-bottom: 20px;
}
.cta-title span { color: var(--color-primary); }

.cta-text {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 40px;
}
.cta-text strong { color: #fff; }

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.cta-points {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.cta-points i { color: var(--color-primary); }


/* ============================================================
   9. フッター（footer.php）
   ============================================================ */
.footer {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--color-bg-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}

.footer-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }
}

/* ブランド */
.brand-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.brand-name {
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.2rem;
}
.brand-text {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
}

/* カラム */
.footer-col h4 {
  font-size: 14px;
  margin-bottom: 15px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--color-primary); }

@media (max-width: 768px) {
  .footer-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
}

/* お問い合わせリスト */
.contact-list li { margin-bottom: 10px; }
.contact-list i   { color: var(--color-primary); }

/* フッター CTAエリア */
.footer-text {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 15px;
}

a.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-secondary);
  padding: 10px 20px;
  border-radius: 999px;
  min-width: 200px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1rem;
  color: #fff;
  transition: background var(--transition);
}
a.footer-btn:hover { background: var(--color-primary); }

/* フッターボタン 矢印 */
a.footer-btn .arrow_02 {
  position: relative;
  width: 20px;
  height: 10px;
}
a.footer-btn .arrow_02::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
  transition: width var(--transition);
}
a.footer-btn .arrow_02::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  transition: right var(--transition);
}
a.footer-btn:hover .arrow_02::before { width: 20px; }
a.footer-btn:hover .arrow_02::after  { right: -2px; }

@media (max-width: 768px) {
  a.footer-btn { font-size: clamp(1rem, 0.779rem + 0.98vw, 1.25rem); }
}

/* コピーライト */
.copy {
  text-align: center;
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.7);
  border-top: 0.5px solid #958c74;
  padding: 12px 0;
  font-size: 12px;
  font-weight: 400;
}
@media (max-width: 599px) {
  .copy { padding-bottom: 72px; }
}


/* ============================================================
   10. ページトップボタン
   ============================================================ */
#page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  opacity: 0;
  transform: translateY(100px);
}
#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background: url("../img/common/pagetop.png") center / contain no-repeat;
  color: #fff;
  font-size: 0.6rem;
  text-decoration: none;
  transition: opacity var(--transition);
}
#page-top a:hover { opacity: 0.6; }

/* アニメーション */
#page-top.UpMove   { animation: UpAnime   0.5s forwards; }
#page-top.DownMove { animation: DownAnime 0.5s forwards; }

@keyframes UpAnime {
  from { opacity: 0; transform: translateY(100px); }
  to   { opacity: 1; transform: translateY(0);     }
}
@keyframes DownAnime {
  from { opacity: 1; transform: translateY(0);     }
  to   { opacity: 1; transform: translateY(100px); }
}

@media (max-width: 599px) {
  #page-top { bottom: 65px; }
  #page-top a { width: 45px; height: 45px; }
}


/* ============================================================
   11. SPナビ（ハンバーガー & フルスクリーンメニュー）
   ============================================================ */

/* --- ハンバーガーボタン --- */
.openbtn {
  cursor: pointer;
  width: 70px;
  height: 70px;
  background: var(--color-primary);
  position: relative;
  border-radius: 50%;
}
@media (min-width: 1270px) { .openbtn { display: none; } }
@media (max-width: 599px)  { .openbtn { display: none; } }

.openbtn span {
  display: inline-block;
  position: absolute;
  left: 25%;
  width: 50%;
  height: 3px;
  border-radius: 2px;
  background-color: #eee;
  transition: all 0.4s;
}
.openbtn span:nth-of-type(1) { top: 22px; }
.openbtn span:nth-of-type(2) { top: 34px; }
.openbtn span:nth-of-type(3) { top: 46px; }

/* 開いた状態 */
.openbtn.active span:nth-of-type(1) { top: 28px; transform: translateY(6px)  rotate(-45deg); }
.openbtn.active span:nth-of-type(2) { opacity: 0; }
.openbtn.active span:nth-of-type(3) { top: 40px; transform: translateY(-6px) rotate(45deg);  }

/* 高さが低いデバイス */
@media (max-height: 1200px) {
  .openbtn { width: 60px; height: 60px; }
  .openbtn span:nth-of-type(1) { top: 18px; }
  .openbtn span:nth-of-type(2) { top: 28px; }
  .openbtn span:nth-of-type(3) { top: 38px; }
  .openbtn.active span:nth-of-type(1) { top: 23px; }
  .openbtn.active span:nth-of-type(3) { top: 35px; }
}

/* --- フルスクリーンメニュー --- */
#menu {
  position: fixed;
  inset: 0;
  z-index: 888;
  background: #fffaea;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
#menu.panelactive {
  opacity: 1;
  pointer-events: auto;
}

#menu .slide {
  width: 42%;
  height: 100%;
  overflow: hidden;
}
#menu .slide img {
  object-fit: cover;
  height: 100%;
}

#menu .cont {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  height: 100%;
}

#menu .cont .inner ul:nth-of-type(1) {
  width: 440px;
}
#menu .cont .inner ul:nth-of-type(1) li {
  font-size: 18px;
  letter-spacing: 0.06em;
  line-height: 1em;
  border-bottom: 1px solid #ffe9a6;
  margin-bottom: 30px;
}
#menu .cont .inner ul:nth-of-type(1) li i   { color: var(--color-primary); }
#menu .cont .inner ul:nth-of-type(1) li a   { display: block; padding-bottom: 10px; }
#menu .cont .inner ul:nth-of-type(2)         { margin-top: 10px; font-size: 20px; }
#menu .cont .inner ul:nth-of-type(2) li span { font-size: 13px; padding-right: 15px; }

.cont-mail {
  display: inline-block;
  margin: 20px 0 0;
  background: var(--color-primary);
  color: #fff;
  padding: 8px 2rem;
  border-radius: 50px;
}

@media (max-width: 768px) {
  #menu .slide { width: 35%; }
  #menu .cont  { left: 40%;  }
}
@media (max-width: 599px) {
  #menu .slide { display: none; }
  #menu .cont  { left: 0; width: 100%; }
  #menu .cont .inner ul:nth-of-type(1) { width: 100%; max-width: 440px; }
}
@media (max-width: 450px) {
  #menu .cont .inner ul:nth-of-type(1) li { font-size: 16px; margin-bottom: 13px; }
}
@media (max-width: 350px) {
  #menu .cont .inner ul:nth-of-type(2) li span { display: block; }
}


/* ============================================================
   12. SP固定フッターバー
   ============================================================ */
.sp-fixed-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  z-index: 999;
}
@media (min-width: 600px) { .sp-fixed-bar { display: none; } }

.sp-fixed-bar a {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  color: #fff;
  font-size: 14px;
}
.sp-fixed-bar .sp-menu { background: #4a403d; }
.sp-fixed-bar .tel     { background: #e58a16; font-weight: bold; }
.sp-fixed-bar .mail    { background: #6b5f5b; }


/* ============================================================
   13. サブページ ファーストビュー（sub-fv）
   ============================================================ */
.sub-fv {
  position: relative;
  height: 700px;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* オーバーレイ（空divなしで::beforeで実装） */
.sub-fv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.sub-fv__inner {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}


/* パンくずリスト */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 14px;
}
.breadcrumb a {
  color: #fff;
  opacity: 0.9;
}

/* カテゴリラベル */
.sub-fv__label {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  color: var(--color-accent);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 24px;
}

/* ページタイトル */
.sub-fv h1 ,.sub-fv .pttl{
  font-size: clamp(2rem, 1.357rem + 2.86vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
}

/* リード文 */
.sub-fv p {
  font-size: 20px;
  line-height: 1.8;
  max-width: 900px;
}

@media (max-width: 768px) {
  .sub-fv { height: 500px; }
  .sub-fv p { font-size: 16px; line-height: 1.7; }
  .breadcrumb { font-size: 12px; }
}
@media (max-width: 375px) {
    .sub-fv p {
        font-size: 14px;
    }
}