@charset "UTF-8";
section{
  position: relative;
}
.mv li{
    width: 100%;
    height: 100%;
    max-height: 100vh;
    min-height: auto; /* または 100vh */
}
.mv picture {
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*main*/
.about {
    padding-top: 10px;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}
.abo_title {
  font-size: clamp(28px, 2.5vw + 1rem, 60px); /* 最大60pxに変更 */
  line-height: 1.3;
  text-align: center;
  font-weight: bold;

}
.abo_title::after {
    content: ' ';
  -webkit-background-size: contain;
  background-size: contain;
  width: 851px;
  margin: auto;
  max-width: 100%;
  height: 39px;
    line-height: 0;
    display: flex;
    justify-content: center;
    align-items: baseline;
}
.abo_inner {
    max-width: 1024px;
    width: 90%;
    margin: 20px auto 0;
    background: #EFF0ED;
    padding: 30px 50px 30px 80px; /* 上下の余白を小さめに */
    box-sizing: border-box;
    display: block;
    justify-content: flex-start;
    box-shadow: 0px 0px 10px #00000026;
}
.abo_left {
    width: 100%;
    flex: none;
}
.abo_midashi {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    color: #CC0000;
}
.abo_text {
    line-height: 2;
    letter-spacing: 1.2px;
    margin-top: 20px;
}
@media screen and (max-width: 768px) {

  /* 見出し文字サイズ・行間調整 */
  .abo_title span {
    font-size: 20px;        
    line-height: 1.25;      /* 行間を少し詰める */
    display: block;
  }

  /* 見出し周りの余白調整 */
  .abo_title {
    margin-bottom: 12px;    /* 下の要素との隙間を少し減らす */
  }

  /* セクション内余白 */
  .sup_inner {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* 画像幅調整 */
  .sup_inner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
  }

  /* テキスト中央寄せ・行間調整 */
  .center {
    font-size: 14px;
    line-height: 1.35;     /* 行間を少し詰める */
  }

}
/*gallery*/
.gallery {
    padding: 120px 0 140px;
    overflow: hidden;
}
.gallery_inner {
    max-width: 2819px;
    width: 90%;
    margin: auto;
}
.gallery_loop{
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 420px;
  margin-top: 50px;
　overflow: hidden;
}
.gallery_img{
    min-width: 2819px;
    animation: loop-slide 40s infinite linear 1s both;
}
.gallery_img img {
    width: auto;
    height: auto;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/*support*/
.support {
    padding-top: 40px; /* 追加 */
}
.sup_inner {
    padding-top: 50px;
    padding-bottom: 115px;
    max-width: 1024px;
    width: 90%;
    margin: auto;
}
.sup_title {
    font-size: 3rem;
    font-weight: bold;
    color: #000;
    text-align: center;
}
.faq_sp{
  top: auto;
  bottom: -50px;
}
/*faqs*/
.faq {
    padding-top: 90px;
}
.faq_inner {
    max-width: 1024px;
    width: 90%;
    margin: auto;
}
.faq_midashi {
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 6px;
    color: #000000;
}
.faq_list {
  width: 100%;
    margin-top: 30px;
}
.faq_card {
    margin-top: 20px;
    width: 100%;
}
.faq_q {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #74833f;
}
.faq_q::before {
    content: 'Q';
  min-width: 80px;
  min-height: 80px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 2.4rem;
  font-weight: bold;
  background: #465A00;
  color: #fff;
}
.faq_q p {
    font-weight: bold;
    font-size: 2rem;
    padding-left: 40px;
    color: #fff;
}
.faq_a {
    background: #f4ebd4;
    padding: 20px 80px 30px 130px;
    position: relative;
  letter-spacing: 1.2px;
  line-height: 2;
}
.faq_a::before {
    content: 'A';
  min-width: 80px;
  min-height: 80px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 2.4rem;
  font-weight: bold;
  background: #be8700;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 767px) {
  .mv li{
    min-height: 0;
  }
.imp_sub {
    padding: 0;
  text-align: left;
}

.fixed_bnr {
    transform: scale(0.8) translateY(50px);
    right: 0;
    bottom: 80px;
}
.fixed_bnr.open {
    transform: scale(0.8) translateY(0px);
}
.fixed_bnr.open.close {
    transform: scale(0.8) translateY(50px);
}
.abo_title {
    font-size: 10vw;
    letter-spacing: 8px;
}
.abo_inner {
    padding: 0 5% 20px;
    flex-direction: column;
    align-items: center;
}
.faq_q p {
    font-weight: bold;
    font-size: 1.6rem;
    padding-left: 10px;
    padding-right: 10px;
}
.faq_a {
    background: #EFF0ED;
    padding: 20px 10px 30px 90px;
    position: relative;
    letter-spacing: 1.2px;
    line-height: 2;
}
}

.hd_mail_btn {
    background: #465a00 !important;
}
.fixed_mail a {
    background: #465a00 !important;
}
.fixed_num {
    color: #000000 !important; /* ← 好きな色に変更 */
}
/* アクセス＋住所＋DS ロゴブロック */
.access_block {
  max-width: 1024px;
  width: 90%;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.access_left {
  flex: 1;
}

.access_address {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 16px;
}

.access_links {
  display: flex;
  gap: 40px;              /* 2つのリンクの間の距離（画像に近づけるならここで調整） */
}

.access_links a {
  font-size: 1.5rem;
  color: #33a4d7;         /* 画像のような水色 */
  text-decoration: underline;
  white-space: nowrap;    /* 改行させない */
}

.access_right img {
  max-height: 150px;       /* DSロゴの大きさ。画像に合わせて適宜調整 */
  width: auto;
}

/* スマホ用：縦並び＋センター揃え */
@media screen and (max-width: 767px) {
  .access_block {
    flex-direction: column;   /* 縦並び */
    align-items: center;      /* 全体をセンターに */
    gap: 16px;
    text-align: center;
  }

  .access_left {
    width: 100%;
  }

  /* 住所の行（1行目）を中央揃え */
  .access_address {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 8px;
  }

  /* リンク2行（2・3行目）も縦並び＋中央 */
  .access_links {
    flex-direction: column;
    gap: 4px;
  }

  .access_links a {
    display: inline-block;
    text-align: center;
  }

  /* DS のロゴを少し大きめに＆中央 */
  .access_right img {
    max-height: 110px;   /* ← 大きさ。もっと大きくしたければ 120〜130 に */
    width: auto;
    display: block;
    margin: 8px auto 0;
  }
}
.recruit_big {
  font-size: 2.4rem;     /* 通常 1.6rem 前後なので 約2倍 */
  font-weight: bold;
  color: #000;           /* 必要なら変更可 */
  display: inline-block;
  margin: 20px 0 10px;
}
/* 募集要項見出し（募集要項のボックス内用） */
.abo_inner .abo_title.abo_title--recruit {
  text-align: center;      /* 念のためセンター */
  margin: 30px 0 10px;     /* 上下の余白（好みに応じて調整） */
}

/* 中の文字は現状の大きさをそのまま使うので指定不要
   必要なら少しだけ太くする場合： */
.abo_inner .abo_title.abo_title--recruit span {
  font-weight: bold;
}

.step_wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 0;     /* 基準レイヤー */
}

/* 背景スライダー（背面） */
.step_slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;    /* ヘッダーよりも奥に押し込む */
}

.step_slider img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;   /* ← これ重要！薄くしない */
}

/* 前面固定の STEP 画像 */
.step_fixed {
  position: relative;
  z-index: 10;
  width: 100%;
  text-align: center;
  padding-top: 0px; /* ← 背景画像との間の調整（必要に応じて調整） */
  padding-bottom: 60px;
}

.step_fixed_img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}


/* fixed_bnr は fixed のまま最前面へ */
.fixed_bnr {
  z-index: 9999 !important;
  position: fixed !important;
}
@media screen and (max-width: 767px) {
  /* support セクションの上の余白を少なくする */
  .support {
    padding-top: 10px;       /* 40px → 10px 相当 */
  }

  /* 中身（sup_inner）の上下の余白も少なめに */
  .sup_inner {
    padding-top: 20px;       /* 50px → 20px */
    padding-bottom: 40px;    /* 115px → 40px（下も少し詰める）*/
  }
}
@media screen and (max-width: 767px) {

  /* 募集要項ブロックの外側の余白をしっかり確保 */
  .abo_inner {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }


}
/* スマホでも募集要項のタイトルをPCと同じ大きさにする */
@media screen and (max-width: 768px) {
  .abo_title span {
    font-size: clamp(28px, 2.5vw + 1rem, 60px) !important;
    /* ↑ PCと同じ指定をそのまま上書き */
  }
}
/* 募集要項タイトル周りの余白を詰める */
.abo_title {
  margin-top: 10px !important;     /* 上の余白を詰める */
  margin-bottom: 0px !important;  /* 下の余白を詰める */
}

/* ブロック全体の余白も調整 */
.abo_inner {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* 背景画像（mv_01.png） */
.mv_bg {
  width: 100%;
  height: auto;
}


/* ============================
   MV（トップ画像）
============================ */

.mv_bg picture,
.mv_bg img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain !important;
}
@media (max-width: 767px) {
    .mv {
        padding-bottom: 10px; /* ← スマホ用の余白調整 */
    }
}
/* =====================================
   recruit MV 最終版
   （style.css の一番下に追加）
===================================== */

/* MV 全体は画像にあわせて高さ可変にする */
.mv {
  position: relative;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 10px;
  margin-bottom: 10px
}

/* MV の下に十分な余白をつくるため、次のセクションとの間も少し広げる */
.about {
  margin-top: 10px;    /* 必要に応じて 60px などに増やしてOK */
}

/* スマホ用微調整 */
@media screen and (max-width: 767px) {
  .about {
    margin-top: 30px;
  }
}
/* =========================
   MV の下にしっかり余白をあける
   （style.css の一番最後に追加）
========================= */


/* スマホは少しだけ狭く */
@media screen and (max-width: 767px) {
  .mv {
    margin-bottom: 60px !important;
  }
}

/* =========================
   「旅籠の紹介」ブロックを
   MV からしっかり離す
   ========================= */

#about {
/* PCでのMVとの間の余白。MV画像 + 黒いボックスの高さ + 必要な余白の分だけ下げます */
  /* 例：MV画像（高さ可変）の代わりに、次の要素を配置する */
  /* ↓ 以前の値（160px）を削除またはコメントアウトし、適切な余白を設定します */
  margin-top: 30px;         /* 画像の状態に合わせて調整。画像の上の文字から50px程度離すイメージ */
  background-color: #ffffff; /* 白背景は維持 */
  z-index: 10;               /* 他の要素の上に表示されるようZ-indexも確保 */
  position: relative;        /* z-indexが効くように */
}

/* スマホのときは少しだけ余白を減らす */
@media screen and (max-width: 767px) {
  #about {
    margin-top: 50px;
  }
}

/* ヘッダーを最前面に */
header {
  position: relative;
  z-index: 100;
  background-color: #ffffff;  /* 背景を白で塗って、下の画像を隠す */
}
/* 「かやぶきの郷 薬師温泉 旅籠の紹介」見出しの上に余白をつける */
#about .abo_title {
  margin-top: 30px;   /* ← 好きな値に調整できる（例：100〜200px） */
}
/* ==== 応募から採用までのステップ（PC用） ==== */
.flow {
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.flow_sp {
  display: none;
}

/* ==== スマホ用に差し替え ==== */
@media screen and (max-width: 767px) {
  .flow {
    display: none;
  }

  .flow_sp {
    margin: 60px auto 0;
    position: relative;
    display: block;
    max-width: 500px;
  }
}
/* スマホ時にMVと「旅籠の紹介」の間を詰める */
@media screen and (max-width: 767px) {

  /* MVの下の余白を少なめに */
  .mv {
    padding-bottom: 10px;       /* 50px → 20px */
    margin-bottom: 10px !important; /* 60px → 20px */
  }

  /* #about ブロックの位置を少し上げる */
  #about {
    margin-top: 10px;           /* 50px → 10px */
  }

  /* セクション内の上パディングも少し詰める */
  .about {
    padding-top: 10px;          /* 50px → 20px */
  }
}
/* 「お問い合わせ」ボタンを画面に固定する */
.fixed_btn {
  z-index: 9999;     /* 他の要素の上に出す */
}
/*応募*/
.apply{
  max-width: 900px;
  width: 90%;
  text-align: center;
  border: 2px solid #2d4500;
  padding: 30px 0 50px;
  margin: 50px auto ;
}
.apply_text{
  font-size: 3rem;
  text-align: center;
  font-weight: bold;
  letter-spacing: 6px;
  margin-bottom: 20px;
}
.apply_text span{
  font-size: 5rem;
  color: #2d4500;
  letter-spacing: 10px;
  letter-spacing: 0;
}
.apply_text--under{
  font-size: 1.6rem;
  text-align: center;
  font-weight: normal;
  letter-spacing: 2px;
  padding-top: 30px;
}
.apply_text--under span.big{
  font-size: 5rem;
  letter-spacing: 10px;
}
.apply_text--under .red{
  color: #2d4500;
}
.apply_text--under .maker{
  background:linear-gradient(transparent 60%, #ff6 60%);
}
  .apply{
    margin-bottom: 0;
  }
  .apply_text,.apply_text--under{
    font-size: 1.8rem;
    letter-spacing: 4px;
  }
.apply_text span,.apply_text--under span.big{
    font-size: 2.4rem;
}
.sp-br { display: none; }

@media screen and (max-width: 768px) {
  .sp-br { display: inline; }
}
.apply_text .maker .red {
  font-size: 3.4rem !important;
  font-weight: bold;
}