@charset "UTF-8";

html {
  font-size: 62.5%;
  overflow-x: hidden
}

body {
  font-size: 1.6rem;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.6;
  color: var(--color_text);
  font-weight: 400;
  background: #e4e4e4;
  box-sizing: border-box;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 374px) {
  body {
    font-size: clamp(10px, 4.38vw, 1.6rem);
  }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  color: var(--color_red);
  text-decoration: underline;
  transition: var(--transition);
}

@media (hover: hover) {
  a:hover {opacity: .5;}
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a img {
  opacity: 1;
  transition: var(--transition);
}

.pc {display:block;}
.sp {display: none;}

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

ul, li {list-style: none;}


/*--------------
メソッド
--------------*/

:root {
  --color_text: #333;/*基本的な文字色*/
  --color_white: #fff;
  --color_red:#F23855;
  --color_brown:#693906;
  --color_beige:#F4E3C9;
  --color_pro:#D5AE45;
  --color_expert:#9CAAAF;
  --color_standard:#F23855;
  --ff_noto: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --ff_qs: "Quicksand", "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --transition: .5s ease-in-out;
  --z_modal: 1000;
  --z_header: 100;
  --z_floating: 10;
}


/*--------------
レイアウト
--------------*/

.l_container {
  max-width: 375px;
  margin: 0 auto;
  position: relative;
  background: #fff;
  max-width: 375px;
  min-height: 100vh;
  overflow: hidden;
}

main {padding-top: 60px;}

.l_inner {
  margin: 0 auto;
  padding: 0 calc(20/375*100%);
}

.relative {
  position: relative;
}

.bg_white {background: var(--color_white);}
.bg_cleam {background: #FFF8E6;}

.renkei_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:20px;
  padding: 25px 0 40px;
}

.renkei_container p {
  font-family: var(--ff_noto);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color_brown);
  text-align: center;
}

@media screen and (max-width: 374px) {
  .renkei_container p {
    font-size: clamp(10px, 4.8vw, 1.8rem)
  }
}


/* ▽ object-fit系 --------------*/
.img_cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img_contain {
  object-fit: contain;
}

/*--------------
テキスト
--------------*/
.text16 {font-size: 1.6rem;}
.text18 {font-size: 1.8rem;}

.text_noto16 {
  font-family: var(--ff_noto);
  font-size: 1.6rem;
  line-height: 1.75;
}

@media screen and (max-width: 374px) {
  .text16,
  .text_noto16 {
    font-size: clamp(10px, 4.38vw, 1.6rem)
  }

  .text18 {font-size: clamp(10px, 4.8vw, 1.8rem)}
}

.text_noto16 .small {font-size: 1.2rem;}

@media screen and (max-width: 374px) {
  .text_noto16 .small {font-size: clamp(10px, 3.2vw, 1.2rem);}
}

.text_noto14 {
  font-family: var(--ff_noto);
  font-size: 1.4rem;
  line-height: 1.5;
}

@media screen and (max-width: 374px) {
  .text_noto14 {
    font-size: clamp(10px, 3.83vw, 1.4rem);
  }
}

.text_noto14 .large {
  font-size: 1.6rem;
}

@media screen and (max-width: 374px) {
  .text_noto14 .large {
    font-size: clamp(10px, 4.38vw, 1.6rem)
  }
}

.text_noto14 p + p {
  margin-top: 1em;
}

.text_noto14 .mt1em + p {
  margin-top: 1em;
}

.text_noto14 .large {
  font-size: 1.6rem;
}

.text_noto12{
  font-size: 1.2rem;
  font-family: var(--ff_noto);
}


@media screen and (max-width: 374px) {
  .text_noto12 {
    font-size: clamp(10px, 3.2vw, 2.4rem)
  }
}

.notes {
  font-family: var(--ff_noto);
  font-size: 1.2rem;
  line-height: 1.5;
  display: flex;
  gap:5px;
}

@media screen and (max-width: 374px) {
  .notes {font-size: clamp(10px, 3.28vw, 1.2rem)}
}


.indent01_16 {
  font-size: 1.6rem;
  line-height: 1.75;
  text-indent: -1em;
  padding-left: 1em;
}

@media screen and (max-width: 374px) {
  .indent01_16 {font-size: clamp(10px, 4.266vw, 1.6rem)}
}

.indent01_12 {
  font-size: 1.2rem;
  line-height: 1.5;
  text-indent: -1em;
  padding-left: 1em;
}

@media screen and (max-width: 374px) {
  .indent01_12 {font-size: clamp(10px, 3.2vw, 1.2rem)}
}

.indent01_14 {
  font-size: 1.4rem;
  line-height: 1.5;
  text-indent: -1em;
  padding-left: 1em;
}

@media screen and (max-width: 374px) {
  .indent01_14 {font-size: clamp(10px, 3.733vw, 1.4rem)}
}


/*--------------
タイトル
--------------*/

/* ▽ 両端が丸の中央揃えのタイトル --------------*/
.ttl_point {
  font-size: 2.4rem;
  color: var(--color_red);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 374px) {
  .ttl_point {
    font-size: clamp(10px, 5.3333vw, 2.4rem)
  }
}

.ttl_point:before,
.ttl_point:after {
  content: "";
  background: #92D651;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.ttl_point:before { margin-right: 10px;}
.ttl_point:after { margin-left: 10px;}


/* ▽ ピンクの下線のタイトル --------------*/
.ttl_uline {
  font-size: 2.0rem;
  font-weight: 700;
  color: var(--color_brown);
  line-height: 1.3;
  text-align: center;
}

@media screen and (max-width: 374px) {
  .ttl_uline {
    font-size: clamp(10px, 5.33vw, 2.0rem)
  }
}

.ttl_uline span {
  background: linear-gradient(transparent 60%, #FDE7EA 60%);
  padding: 0 5px;
}

/* ▽ 20pxタイトル --------------*/
.ttl_20 {
  font-size: 2.0rem;
  font-weight: 700;
  color: var(--color_brown);
  line-height: 1;
}

@media screen and (max-width: 374px) {
  .ttl_20 {
    font-size: clamp(10px, 5.33vw, 2.0rem)
  }
}

/* ▽ 18pxタイトル --------------*/
.ttl_18 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color_brown);
  line-height: 1;
}

@media screen and (max-width: 374px) {
  .ttl_18 {
    font-size: clamp(10px, 4.8vw, 1.8rem)
  }
}

/* ▽ 16pxタイトル --------------*/
.ttl_16 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color_brown);
  line-height: 1;
}

@media screen and (max-width: 374px) {
  .ttl_16 {
    font-size: clamp(10px, 4.266vw, 1.6rem)
  }
}


/* ▽ 中ページタイトル --------------*/
.page_ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color_beige);
  color: var(--color_brown);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  padding: calc(15/375*100%);
}

@media screen and (max-width: 374px) {
  .page_ttl {
    font-size: clamp(10px, 5.8666vw, 2.2rem)
  }
}

/* ▽ テキスト系その他 --------------*/
.text_center {text-align: center;}

.flex1 {flex:1}

.flex0 {
  flex-shrink: 0;
  white-space: nowrap;
}

.ff_noto {font-family: var(--ff_noto);}

.red {color: var(--color_red);}
.brown {color: var(--color_brown);}

.lh120{line-height: 1.2;}

.fw_m{font-weight: 500;}

.indent01 {
  text-indent: -1em;
  padding-left: 1em;
}

/*--------------
マージン
--------------*/
.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt25 {margin-top: 25px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}
.mt70 {margin-top: 70px;}

.mt1em {margin-top: 1em;}

.mt-15 {margin-top: -15px;}
.mt-25 {margin-top: -25px;}

/*--------------
ボタン
--------------*/

.btn_container {
  width: 100%;
  max-width: 295px;
  margin-left: auto;
  margin-right: auto;
}

.btn_red,
.btn_red02,
.btn_white,
.btn_white02,
.btn_white_2line,
.btn_white_back,
.btn_brown,
.btn_line,
.btn_pro,
.btn_expert,
.btn_standard {
  width: 100%;
  margin: 0 auto;
  padding: calc(12/315*100%) 0;
  border-radius: 9999px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  box-sizing: border-box;
  display: block;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: var(--transition);
}

.btn_white_2line {
  font-size: 1.6rem;
  line-height: 1.25;
  padding: calc(8/315*100%) 0;
}

@media screen and (max-width: 374px) {
  .btn_red,
  .btn_red02,
  .btn_white,
  .btn_white02,
  .btn_white_2line,
  .btn_white_back,
  .btn_brown,
  .btn_line,
  .btn_pro,
  .btn_expert,
  .btn_standard {
    font-size: clamp(10px, 5.33vw, 2.0rem);
  }

  .btn_white_2line {
    font-size: clamp(10px, 4.266vw, 1.6rem);
  }
}

.btn_red,
.btn_red02 {
  background: var(--color_red);
  color: var(--color_white);
  border: 1px solid var(--color_white);
}

.btn_white,
.btn_white02,
.btn_white_2line {
  background: var(--color_white);
  color: var(--color_brown);
  border: 1px solid #FFD562;
}

.btn_white_back {
  background: var(--color_white);
  color: var(--color_brown);
  border: 1px solid var(--color_brown);
}

.btn_brown {
  background: var(--color_brown);
  color: var(--color_white);
  border: 1px solid var(--color_white);
}

.btn_line {
  background: #06C755;
  color: var(--color_white);
  border: 1px solid var(--color_white);
}

.btn_pro {
  background: var(--color_pro);
  color: var(--color_white);
  border: 1px solid var(--color_white);
}

.btn_expert {
  background: var(--color_expert);
  color: var(--color_white);
  border: 1px solid var(--color_white);
}

.btn_standard {
  background: var(--color_standard);
  color: var(--color_white);
  border: 1px solid var(--color_white);
}

.btn_red::after,
.btn_red02::after,
.btn_white::after,
.btn_white_2line::after,
.btn_brown::after,
.btn_line::after,
.btn_pro::after,
.btn_expert::after,
.btn_standard::after {
  content: "";
  width: 22px;
  height: 7px;
  position: absolute;
  top:0;
  bottom:0;
  right:0;
  margin: auto 9px auto 0;
}

.btn_white_back::before {
  content: "";
  width: 22px;
  height: 7px;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  margin: auto 0 auto 9px;
}

.btn_red::after {background: url('../img/arrow_white.png') no-repeat center / contain;}
.btn_white::after, .btn_white_2line::after {background: url('../img/arrow_yellow.png') no-repeat center / contain;}
.btn_brown::after {background: url('../img/arrow_white.png') no-repeat center / contain;}
.btn_line::after {background: url('../img/arrow_white.png') no-repeat center / contain;}
.btn_pro::after {background: url('../img/arrow_white.png') no-repeat center / contain;}
.btn_expert::after {background: url('../img/arrow_white.png') no-repeat center / contain;}
.btn_standard::after {background: url('../img/arrow_white.png') no-repeat center / contain;}


.btn_white_back::before {background: url('../img/arrow_brown.png') no-repeat center / contain;}

.btn_white02 {transition: var(--transition);}
.btn_white02:hover {opacity: .5;}

.btn_red02::after {
  background: url('../img/arrow_white.png') no-repeat center / contain;
  transform: rotate(90deg);
}


/* 非活性 */
.btn_red.is-disabled,
.btn_red02.is-disabled,
.btn_white.is-disabled,
.btn_white02.is-disabled,
.btn_white_back.is-disabled,
.btn_brown.is-disabled,
.btn_line.is-disabled,
.btn_pro.is-disabled,
.btn_expert.is-disabled,
.btn_standard.is-disabled {
  background: #E0E0E0;
  color: var(--color_white);
  border-color: var(--color_white);
  pointer-events: none; /* クリック無効 */
  cursor: not-allowed;
  opacity: 1;
}

@media (hover: hover) {
  .btn_red:hover,
  .btn_red02:hover,
  .btn_white:hover,
  .btn_white02:hover,
  .btn_white_2line:hover,
  .btn_white_back:hover,
  .btn_brown:hover,
  .btn_line:hover,
  .btn_pro:hover,
  .btn_expert:hover,
  .btn_standard:hover {opacity: .5;}
}

.btn_notes a {
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-decoration: underline;
  color: var(--color_text);
  font-family: var(--ff_noto);
  margin-top: 25px;
  display: block;
}

.btn_top {
  width: calc(69/375*100%);
  margin-top: 60px;
  display: block;
}

.pagenation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:20px;
  font-family: var(--ff_qs);
  font-size: 16px;
  text-align: center;
  color: #ADADAD;
  line-height: 1;
}

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

.pagenation .on {
  font-size: 20px;
  font-weight: 600;
  color: var(--color_brown);
}

.pagenation .pn_prev,
.pagenation .pn_next {
  width: calc(26/335*100%);
}

.z-index1 {z-index: 1;}

/*--------------
フォーム
--------------*/

.label_ttl,
.label_ttl_hissu,
.label_ttl_nini {
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: 700;
  font-family: var(--ff_noto);
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 10px;
}

@media screen and (max-width: 374px) {
  .label_ttl,
  .label_ttl_hissu,
  .label_ttl_nini {
    font-size: clamp(10px, 4.266vw, 1.6rem);
  }
}

.label_ttl span,
.label_ttl_hissu span,
.label_ttl_nini span {
  font-size: 1.2rem;
  font-weight: 400;
}

@media screen and (max-width: 374px) {
  .label_ttl span,
  .label_ttl_hissu span ,
  .label_ttl_nini span {
    font-size: clamp(10px, 3.2vw, 1.2rem);
  }
}

.label_ttl_hissu::after,
.label_ttl_nini::after {
  font-size: 1.2rem;
  color: var(--color_white);
  line-height: 1;
  font-weight: 400;
  border-radius: 2px;
  padding:3px 6px;
  margin-left: 10px;
}

.label_ttl_hissu::after {
  content: "必須";
  background: var(--color_red);
}

.label_ttl_nini::after {
  content: "任意";
  background: #92D651;
}

.label_question {
  display: flex;
  gap:10px;
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: 700;
  font-family: var(--ff_noto);
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 10px;
}

@media screen and (max-width: 374px) {
  .label_question {
    font-size: clamp(10px, 4.266vw, 1.6rem);
  }
}

.label_question p,
.label_question .flex1 {
  flex: 1;
}

.label_question .number {
  color: var(--color_red);
}

.label_question .ex,
.label_question small.ex {
  font-size: 1.2rem;
  font-weight: 400;
}

@media screen and (max-width: 374px) {
  .label_question .ex,
  .label_question small.ex {
    font-size: clamp(10px, 3.2vw, 1.2rem);
  }
}

.input_area {
  width: 100%;
  max-width: 295px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  font-family: var(--ff_noto);
  background: #F5F5F5;
  border-radius: 4px;
  padding: 10px;
  display: block;
}

.input_area02 {
  width: 100%;
  max-width: 100%;
  margin: 10px auto 0;
  font-size: 16px;
  line-height: 1.75;
  font-family: var(--ff_noto);
  background: #F5F5F5;
  border-radius: 4px;
  padding: 10px;
  display: block;
}

.checkbox_other_wrap {
  width: 100%;
  display: block;
}

.input_area_other {
  width: calc(100% - 25px);
  max-width: 100%;
  margin: 10px 0 0 auto;
  font-size: 16px;
  line-height: 1.75;
  font-family: var(--ff_noto);
  background: #F5F5F5;
  border-radius: 4px;
  padding: 10px;
  display: block;
  box-sizing: border-box; 
}


.form_flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.form_flex li {
  width: calc(142/295*100%);
}

/* ===========================
   ラジオボタン
=========================== */
.radio_wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 0;
}

.radio_label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  cursor: pointer;
  font-family: var(--ff_noto);
}

@media screen and (max-width: 374px) {
  .radio_label {
    font-size: clamp(10px, 4.266vw, 1.6rem);
  }
}

.radio_label.vertical {
  align-items: flex-start;
}


/* ラジオボタン デフォルトを非表示 */
.radio_label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s;
}

/* 選択時 */
.radio_label input[type="radio"]:checked {
  border: 6px solid var(--color_red);
}

.radio_wrap.vertical {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 4px 0;
}

/* ===========================
   チェックボックス（ラジオ風デザイン）
=========================== */
.checkbox_label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;

  /* ↓ これで丸くなる */
  border-radius: 50%;

  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color 0.2s;
}

/* 選択時 → ラジオボタンと同じスタイル */
.checkbox_label input[type="checkbox"]:checked {
  border: 6px solid var(--color_red);
}

.checkbox_label {
  width: 100%;
  display: flex;
  gap: 5px;
} 

.checkbox_label p,
.checkbox_label .checkbox_text {
  font-family: var(--ff_noto);
  font-size: 1.6rem;
  line-height: 1.1;
  margin-top: 2px;
  flex: 1;
  display: block;
} 

.checkbox_label p span,
.checkbox_label .checkbox_text small {
  font-size: 1.2rem;
} 


/* ===========================
   セレクトボックス
=========================== */
.select_area {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 12px 40px 12px 16px;
  font-size: 14px;
  color: #999;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;

  /* 矢印アイコン */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;

  transition: border-color 0.2s;
}

/* 値が選択された時に文字色を変更 */
.select_area:not([value=""]) {
  color: #333;
}

/* フォーカス時 */
.select_area:focus {
  outline: none;
  border-color: #e83d3d;
}

/* ホバー時 */
.select_area:hover {
  border-color: #aaa;
}


/*--------------
ヘッダー
--------------*/

.l_fixed_layer {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 375px;
  height: 100vh;
  overflow: hidden;          /* ★ 375px外に絶対に見えない */
  pointer-events: none;      /* ★ コンテンツへのクリックを通す */
  z-index: var(--z_header);
  height: 100dvh;
}

header {
  width: 100%;
  padding: 9px 10px 9px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 100;
  background: #fff;
  border-bottom: 2px solid #E0E0E0;
  pointer-events: auto;      /* ★ クリック受け付ける */
}

header h1 {width: 121px;}
header h1 {width: 84px;}

/* ===========================
  ハンバーガーボタン
=========================== */
    .hamburger-btn {
      width: 44px;
      height: 44px;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
      padding: 4px;
      position: relative;
      z-index: 101;             /* ヘッダーより前面 */
      pointer-events: auto;      /* ★ クリック受け付ける */
    }

    /* 3本線 */
    .hamburger-btn .bar {
      display: block;
      width: 24px;
      height: 2px;
      background: #9B9B9B;
      border-radius: 2px;
      transform-origin: center;
      transition:
        transform 0.35s ease,
        opacity   0.35s ease,
        top       0.35s ease;
    }

    /* 開いた時: × に変換 */
    .hamburger-btn.is-active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
    .hamburger-btn.is-active .bar:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }
    .hamburger-btn.is-active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    /* ===========================
       ナビゲーションメニューパネル
    =========================== */
    .nav-panel {
      position: absolute;
      top: 0;
      right: -100%;/* 初期状態: 右外に隠す */
      width: calc(335/375*100%);
      background: var(--color_brown);
      z-index: 90;/* ヘッダー(100)より下 */
      transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      padding-top: 74px; /* ヘッダー分の余白 */
      padding-bottom: 30px;
      border-radius: 0 0 0 50px;
      overflow-y: auto;          /* ★ パネル内スクロール */
      -webkit-overflow-scrolling: touch;
      pointer-events: auto;      /* ★ クリック受け付ける */
    }

    /* 開いた状態 */
    .nav-panel.is-open {
      right: 0;
    }

    /* ===========================
       ナビリスト
    =========================== */
    .nav-list {
      width: 100%;
      padding: 0 calc(30 / 315 * 100%);
      list-style: none;
    }

    .nav-list li {
      border-bottom: 1px dotted var(--color_white);
    }

    .nav-list a {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 9px 0;
      text-decoration: none;
      color: var(--color_white);
      font-size: 16px;
      font-weight: 500;
      pointer-events: auto;
    }

    .nav-list a::before {
      content: "●";
      font-size: 8px;
      color: #92D651;
      flex-shrink: 0;
    }

    .btn_container_nav_wrap {
      position: relative;
      padding: 0 calc(20/335*100%);
    }


    /* ===========================
       オーバーレイ（メニュー後ろの薄暗い幕）
    =========================== */
    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(51,51,51,0.4);
      z-index: 80;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }

    .overlay.is-visible {
      opacity: 1;
      pointer-events: auto;
    }



/*--------------
フッター
--------------*/
footer {
  background: #F2EAE2;
  padding: 0 0 30px;
  font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

.spfoot {
  width: 100%;
  background: #724747;
  padding: 20px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spfoot li {
  width: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap:5px;
}

.spfoot li.mail::before {
  content: "";
  background: url('../img/p_mail.png') no-repeat center / contain;
  width: 16px;
  height: 12px;
}

.spfoot li.shop::before {
  content: "";
  background: url('../img/p_shop.png') no-repeat center / contain;
  width: 16px;
  height: 14px;
}

.spfoot li:first-child {
  border-right: 4px dotted #F2EAE2;
}

.spfoot li a {
  color: #F2EAE2;
  font-size: 1.3rem;
  text-decoration: none;
}



.spfoot li a:hover {
  text-decoration: underline;
  opacity: 1;
}

.footerlink {
  display: flex;
  flex-direction: column;
  /* margin-top: 20px; */
  justify-content: space-between;
  align-items: center;
}

.btn_circle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:20px;
}

.btn_circle li {
  width: 44px;
  display: block;
}

.link_list {
  /* border-top: 1px solid #EADCCC; */
  border-bottom: 1px solid #EADCCC;
  margin: 0 auto 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: var(--color_brown);
  width: calc(100% - 20px);
  padding: 0 10px;
}

.link_list li {
  width: 45%;
  border-left: none;
  line-height: 1.8;
  /* border-bottom: 1px solid #EADCCC; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  position: relative;
}

@media screen and (max-width: 374px) {
  .link_list li {
    font-size: clamp(10px, 3.2vw, 1.2rem);
  }
}


.link_list li:nth-child(3),
.link_list li:nth-child(4) {
  border-bottom: none;
}

.link_list li::after {
  content: "";
  background: url('../img/arrow.png') no-repeat center / contain;
  width: 6px;
  height: 11px;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto 0 auto auto;
}

.link_list li a {
  display: block;
  padding: 15px 0;
  color: var(--color_brown);
  text-decoration: none;
}

.link_list li a:hover {
  text-decoration: underline;
  opacity: 1;
}

.copyright {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15px;
}

.copyright img {
  width: 108px;
}

.copyright p {
  margin-top:10px;
  font-size: 1.1rem;
  color: var(--color_brown);
  margin-top: 5px;
}

@media screen and (max-width: 374px) {
  .link_list li {
    font-size: clamp(10px, 2.93vw, 1.1rem);
  }
}

.copyright small {
  font-size: 80%;
}