@charset "utf-8";

/* スマホトップ（本番 front + home_test）。767px以下で body.sp_home のみ */
.sp_hd_extra,
.sp_mv {
  display: none;
}

body:not(.sp_home) header .logo .logo_sp,
body:not(.sp_home) .sp_hd_extra {
  display: none !important;
}

body.sp_home #page_title,
body.sp_home [id^='path'] {
  display: none;
}

@media screen and (max-width: 767px) {
  body.sp_home {
    /* メニュー位置・固定ヘッダー分。実高さは common.js で同期 */
    --sp-hd-h: 72px;
    padding-top: var(--sp-hd-h);

    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 200;
      background: #fff;
      --sp-hd-h: inherit;
    }

    header #header_body > .inner {
      position: relative;
      z-index: 201;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      column-gap: 6px;
      padding: 6px;
      box-sizing: border-box;
      background: #fff;
    }

    header #header_body > .inner .info {
      display: none !important;
    }

    header #header_body > .inner .logo {
      display: block;
      width: auto;
      max-width: 110px;
      margin: 0 0 0 2px;
      padding: 0;
    }

    header #header_body > .inner .logo a {
      display: block;
      line-height: 0;
    }

    header .logo .logo_default {
      display: none !important;
    }

    header .logo .logo_sp {
      display: block;
      width: auto;
      height: auto;
      max-width: 110px;
      max-height: 56px;
    }

    header .logo .logo_default img {
      height: 34px;
      width: auto;
      max-width: 92px;
    }

    .sp_hd_extra {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
      gap: 4px;
    }

    .sp_hd_lead {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      color: #6d584c;
      font-size: 9px;
      line-height: 1.35;
      letter-spacing: 0;
      word-break: keep-all;
    }

    .sp_hd_actions {
      display: flex;
      align-items: flex-end;
      flex: 0 0 auto;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
      flex: 0 0 auto;
    }

    .sp_hd_actions a,
    .sp_hd_actions button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 2px;
      min-width: 40px;
      padding: 0;
      border: 0;
      background: none;
      color: #5c4638;
      font: inherit;
      font-size: 11px;
      letter-spacing: 0.04em;
      line-height: 1;
      text-decoration: none;
      cursor: pointer;
    }

    .sp_hd_actions svg,
    .sp_hd_actions .sp_hd_tel_icon {
      display: block;
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      object-fit: contain;
    }

    .sp_hd_menu .x {
      display: none;
    }

    .sp_hd_menu.close .bars {
      display: none;
    }

    .sp_hd_menu.close .x {
      display: block;
    }

    .sp_hd_menu.close::after {
      content: '';
      position: fixed;
      left: 0;
      top: var(--sp-hd-h);
      bottom: 0;
      width: 20%;
      height: auto;
      z-index: calc(var(--z-header-menu) + 5);
    }

    #iconlist {
      display: none !important;
    }

    header nav {
      height: 0;
      overflow: visible;
    }

    header nav #globalnav {
      top: var(--sp-hd-h) !important;
      bottom: 0 !important;
      left: 0;
      right: 0;
      height: auto !important;
      max-height: none;
      box-sizing: border-box;
    }

    #back {
      bottom: 0.12rem;
    }

    /* メインイメージ（確認用ページだけ、既存スライダーを隠す） */
    .home_fv {
      display: none !important;
    }

    .sp_mv {
      display: block;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      color: #5c4638;
    }

    .sp_mv_hero {
      position: relative;
      line-height: 0;
      background: #f8e4e8;
    }

    .sp_mv_main {
      display: block;
      width: 100%;
      height: auto;
      vertical-align: top;
    }

    /* ピンク帯上：白リボンはCSS、線画葉のみ背景画像で重ねる */
    .sp_mv_place {
      position: absolute;
      left: 3.5%;
      right: 3.5%;
      bottom: 5%;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
    }

    .sp_mv_place_ribbon {
      max-width: 100%;
      filter: drop-shadow(0 0.02rem 0.05rem rgb(80 40 50 / 12%));
    }

    .sp_mv_place_badge {
      --sprig-l: none;
      --sprig-r: none;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.05rem;
      box-sizing: border-box;
      margin: 0;
      padding: 0.09rem 0.5rem;
      max-width: 100%;
      background: #fff;
      color: #c0485c;
      font-family: var(--mincho);
      font-size: clamp(12px, 0.152rem, 17px);
      font-weight: 500;
      font-synthesis: none;
      letter-spacing: 0.08em;
      line-height: 1.35;
      clip-path: polygon(0.12rem 0, calc(100% - 0.12rem) 0, 100% 50%, calc(100% - 0.12rem) 100%, 0.12rem 100%, 0 50%);
      pointer-events: auto;
    }

    .sp_mv_place_sprig {
      position: absolute;
      z-index: 1;
      top: 50%;
      width: 0.32rem;
      height: 0.26rem;
      background: center / contain no-repeat;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .sp_mv_place_sprig--l {
      left: 0.2rem;
      background-image: var(--sprig-l);
    }

    .sp_mv_place_sprig--r {
      right: 0.18rem;
      background-image: var(--sprig-r);
    }

    .sp_mv_place_badge.is-sprig-mirror-r .sp_mv_place_sprig--r {
      transform: translateY(-50%) scaleX(-1);
    }

    .sp_mv_place_badge .sp_mv_place_pin,
    .sp_mv_place_badge .sp_mv_place_txt {
      position: relative;
      z-index: 2;
    }

    .sp_mv_place_pin {
      width: 0.21rem;
      height: 0.21rem;
      flex: 0 0 auto;
    }

    .sp_mv_place_txt {
      white-space: nowrap;
    }

    .sp_mv_cert {
      --cert-leaf-l: none;
      --cert-leaf-r: none;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0.11rem 0.16rem;
      background: #f38584;
      color: #fff;
      font-family: var(--mincho);
      font-size: clamp(11px, 0.134rem, 16px);
      font-weight: 500;
      font-synthesis: none;
      letter-spacing: 0.03em;
      line-height: 1.35;
    }

    .sp_mv_cert[style*='--cert-leaf-l'],
    .sp_mv_cert[style*='--cert-leaf-r'] {
      padding-left: 0.36rem;
      padding-right: 0.36rem;
    }

    .sp_mv_cert_txt {
      position: relative;
      z-index: 1;
      text-align: center;
      white-space: nowrap;
    }

    .sp_mv_cert_leaf {
      position: absolute;
      z-index: 0;
      top: 50%;
      width: 0.3rem;
      height: 0.3rem;
      background: center / contain no-repeat;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .sp_mv_cert_leaf--l {
      left: 0.1rem;
      background-image: var(--cert-leaf-l);
    }

    .sp_mv_cert_leaf--r {
      right: 0.1rem;
      background-image: var(--cert-leaf-r);
    }

    .sp_mv_cert.is-cert-leaf-mirror-r .sp_mv_cert_leaf--r {
      transform: translateY(-50%) scaleX(-1);
    }

    .sp_mv_commit {
      padding: 0.2rem 0.2rem 0.7rem;
      background: #fefbf7 url('../images/sp_mv_flowers.jpg') center bottom / 100% auto no-repeat;
    }

    .sp_mv_commit h2 {
      margin: 0;
      color: #5a4032 !important;
      font-family: var(--mincho);
      font-size: 0.2rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      line-height: 1.55;
      text-align: center;
    }

    .sp_mv_rule {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.1rem;
      width: 2.05rem;
      max-width: 88%;
      margin: 0.12rem auto 0.14rem;
    }

    .sp_mv_rule::before,
    .sp_mv_rule::after {
      content: '';
      flex: 1 1 auto;
      min-width: 0.35rem;
      height: 2px;
      background: #c9b8aa;
      border-radius: 1px;
    }

    .sp_mv_rule_icon {
      flex: 0 0 auto;
      display: block;
      width: 0.18rem;
      height: auto;
      object-fit: contain;
    }

    .sp_mv_commit_txt {
      margin: 0 auto;
      max-width: 3.15rem;
      color: #5c4638;
      font-size: 0.118rem;
      letter-spacing: 0.04em;
      line-height: 1.85;
    }

    /* フッター */
    footer,
    #footer_body,
    #footer_bottom {
      background: #fff;
    }

    #footer_body {
      padding: 0.08rem 0 0;
    }

    #footer_body .column-1 .ft_nav_new {
      margin: 0;
      padding: 0.12rem 0.14rem 0.08rem;
      background: transparent;
      color: #6a5348;
      font-size: 0.105rem;
      letter-spacing: 0.04em;
      text-align: left;
    }

    #footer_body .column-1 .ft_nav_new ul {
      justify-content: flex-start;
      max-width: none;
      margin: 0 !important;
      gap: 0.12rem 0.18rem;
      line-height: 1.5;
    }

    #footer_body .column-1 .ft_nav_new ul li::before {
      content: '\f105';
      font-family: FontAwesome;
      transform: none;
      flex: 0 0 auto;
      margin-right: 0.06rem;
      color: #e07b8c;
      font-size: 0.18rem;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
    }

    #footer_body .ft_logo,
    #footer_body .logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0.06rem;
      text-align: center;
    }

    #footer_body .ft_logo a,
    #footer_body .logo a {
      display: inline-block;
      line-height: 0;
    }

    /* ウィジェットのロゴ差し替え（sp_hd_logo.png＝ヘッダーと同一） */
    #footer_body .ft_logo img,
    #footer_body .logo img {
      width: 110px;
      height: auto;
      max-height: 56px;
      object-fit: contain;
      content: url('../images/sp_hd_logo.png');
    }

    #footer_bottom #copyright,
    #copyright {
      max-width: none;
      margin: 0;
      padding: 0.06rem 0.12rem 0.2rem;
      color: #8d7c72;
      font-size: 0.09rem;
      text-align: center;
    }
  }
}