@charset "UTF-8";

/* ===== Reset / Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
  color: #333;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* ===== PC/SP 出し分け ===== */
.is_sp { display: none; }

@media screen and (max-width: 750px) {
  .is_sp { display: inline; }
}

/* ===== Scroll fade-in ===== */
.is_hidden {
  transform: translate(0, 30px);
  opacity: 0;
}
.is_show {
  transition: 800ms ease;
  transform: translate(0, 0);
  opacity: 1;
  transition-delay: .5s;
}

/* ===== MV animation ===== */
.mv-fadein {
  opacity: 0;
  filter: blur(16px);
  transform: scale(1.04);
  transition: opacity 1.4s ease-out, filter 1.2s ease-out, transform 1.6s ease-out;
  will-change: opacity, filter, transform;
}
.mv-fadein picture {
  display: block;
  line-height: 0;
}
.mv-fadein.is-show {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
}
.mv-fadeup {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  will-change: opacity, transform;
}
.mv-fadeup.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Header ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  transition: background 0.3s ease, opacity 0.3s ease;
}


.header--scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
}

.header--scrolled .header_logo img {
  filter: invert(1);
}

.header_brand img,
.sp_header_brand img {
  filter: invert(1);
}

.header--scrolled .header_brand img,
.header--scrolled .sp_header_brand img {
  filter: none;
}

.header--scrolled .header_nav_item a,
.header--scrolled .header_nav_item a:link,
.header--scrolled .header_nav_item a:visited {
  color: #333;
}

.header--scrolled .header_nav_item + .header_nav_item::before {
  background: #333;
}

.header--scrolled .header_catalog_btn {
  border: 1px solid #666;
}

.header_catalog_btn:link,
.header_catalog_btn:visited {
  color: #666;
}

.header_inner {
  display: flex;
  align-items: flex-start;
  padding: 1.625vw 5.17vw;
}

.header_logo {
  text-decoration: none;
  display: block;
  flex-shrink: 0;
  margin-right: 5.21vw; /* 100px */
}

.header_logo img {
  display: block;
  width: 9.15vw; /* 13.07vw × 70% */
  height: auto;
}

.header_nav {
  flex: 1;
  margin-top: 0.52vw;
}

.header_nav_list {
  display: flex;
  align-items: center;
  list-style: none;
}

.header_nav_item + .header_nav_item::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1.74vw;
  background: #fff;
  margin: 0 3.17vw;
  vertical-align: middle;
  flex-shrink: 0;
}

.header_nav_item {
  display: flex;
  align-items: center;
}

.header_nav_item a,
.header_nav_item a:link,
.header_nav_item a:visited {
  text-decoration: none;
  color: #fff;
  font-family: "Yu Mincho", "游明朝", YuMincho, serif;
  font-size: 1.23vw;
  letter-spacing: 0.25em;
  white-space: nowrap;
  font-weight: 400;
}

.header_catalog_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  margin-top: 0;
  margin-right: 1.78vw;
  color: #666;
  font-family: 'Yu Mincho', '游明朝', YuMincho, serif;
  font-size: 1.19vw;
  font-weight: 400;
  letter-spacing: 0.31em;
  white-space: nowrap;
  background: #fff;
  width: 12.15vw; /* 233.3816px / 1920 */
  height: 2.49vw; /* 47.7441px / 1920 */
  border-radius: 4px;
}

.header_brand {
  flex-shrink: 0;
  margin-top: 0.42vw;
}

.sp_header_brand,
.sp_ham_btn,
.sp_drawer,
.sp_overlay {
  display: none;
}

.header_brand img {
  display: block;
  width: 9.68vw;
  height: auto;
}

/* ===== sec01 KV ===== */
.page-top .sec01 {
  position: relative;
  width: 100%;
}

.page-top .sec01_bg {
  width: 100%;
  display: block;
}

.page-top .sec01_content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 13.29vw;
}

.page-top .sec01_house {
  width: 13.52%; /* 259.5px / 1920px */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-top .sec01_house > img {
  width: 100%;
  opacity: 0;
  animation: kvFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

/* ===== KV animation ===== */
@keyframes kvFadeUp {
  from { opacity: 0; transform: translateY(1.5vw); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Air Consulting animation ===== */
.page-top .sec01_ac {
  position: relative;
  width: 100%;
  height: 3.7vw;
  margin-bottom: 0.18vw;
}

@keyframes acFloatIn {
  from {
    opacity: 0;
    transform: translateY(1.2vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-top .ac-char {
  position: absolute;
  display: block;
  opacity: 0;
  animation: acFloatIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* デザイン実測値: コンテナ比率で各文字を配置 */
.page-top .ac-A  { width: 0.39vw; left:  0.5%;  top: 11%;   animation-delay: 0s;    }
.page-top .ac-i1 { width: 0.08vw; left:  9%;    top:  5%;   animation-delay: 0.05s; }
.page-top .ac-r  { width: 0.21vw; left: 15.5%;  top:  6%;   animation-delay: 0.1s;  }
.page-top .ac-C  { width: 0.36vw; left: 29%;    top:  0%;   animation-delay: 0.15s; }
.page-top .ac-o  { width: 0.31vw; left: 37.4%;  top:  5%;   animation-delay: 0.2s;  }
.page-top .ac-n1 { width: 0.36vw; left: 45.4%;  top:  9%;   animation-delay: 0.25s; }
.page-top .ac-s  { width: 0.34vw; left: 53.4%;  top: 16%;   animation-delay: 0.3s;  }
.page-top .ac-u  { width: 0.36vw; left: 61%;    top: 22%;   animation-delay: 0.35s; }
.page-top .ac-l  { width: 0.23vw; left: 69%;    top: 26%;   animation-delay: 0.4s;  }
.page-top .ac-t  { width: 0.21vw; left: 76%;    top: 32%;   animation-delay: 0.45s; }
.page-top .ac-i2 { width: 0.18vw; left: 82.7%;  top: 34.2%; animation-delay: 0.5s;  }
.page-top .ac-n2 { width: 0.36vw; left: 89%;    top: 38%;   animation-delay: 0.55s; }
.page-top .ac-g  { width: 0.34vw; left: 97.3%;  top: 40%;   animation-delay: 0.6s;  }

.page-top .sec01_ttl {
  margin-top: 3.08vw;
  font-family: "Yu Mincho", "游明朝", YuMincho, serif;
  font-size: 3.125vw;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.32em;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  animation: kvFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.page-top .sec01_lead {
  margin-top: 2.56vw;
  font-family: "Yu Mincho", "游明朝", YuMincho, serif;
  font-size: 1.25vw;
  font-weight: 400;
  opacity: 0;
  animation: kvFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
  color: #fff;
  letter-spacing: 0.4em;
  line-height: 1.8;
  text-align: center;
}

.page-top .sec01_scroll {
  position: absolute;
  bottom: 4.08vw;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: scrollFadeIn 0.8s ease-out 1.3s forwards, scrollBounce 1.8s ease-in-out 2.1s infinite;
}

@keyframes scrollFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

.page-top .sec01_scroll img {
  display: block;
  width: 4.04vw; /* 77.5px / 1920 */
  height: auto;
}

/* ===== sec02 ===== */
.page-top .sec02 {
  padding: 1.125vw 0 8.17vw;
}

/* 1. 「人が一生のうちに…57%は室内空気です。」 */
.page-top .sec02_01 {
  font-family: "Yu Mincho", "游明朝", YuMincho, serif;
  text-align: center;
  font-size: 1.46vw; /* 28px / 1920 */
  font-weight: 300;
  color: #333;
  letter-spacing: 0.55em;
}

/* 2. 物質割合インフォグラフィック */
.page-top .sec02_02 {
  background: url('../img/sec02_bg.png') center top / 100% auto no-repeat;
  width: 100%;
  margin-top: 1.04vw;
  padding: 2.54vw 0 1.04vw;
}

.page-top .sec02_02_inner {
  width: 55.83%; /* 2144/2=1072px / 1920 */
  margin: 0 auto;
}

/* 3. 「空気環境を整える方法は…」+ ボタン×3 */
.page-top .sec02_03 {
  margin-top: 5.17vw;
}

.page-top .sec02_03_media {
  width: 49.47%;
  margin: 0 auto;
}

.page-top .sec02_03_txt {
  font-family: "Yu Mincho", "游明朝", YuMincho, serif;
  font-weight: 600;
  font-size: 1.5625vw; /* 30px / 1920 */
  line-height: 1.75;
  letter-spacing: 0.31em;
  text-align: center;
  color: #4d4d4d;
}

.page-top .sec02_03_img {
  display: none;
}

.page-top .sec02_03_btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.08vw; /* 40px / 1920 */
  list-style: none;
  margin-top: 2.08vw; /* 40px / 1920 */
}

.page-top .sec02_03_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15.36vw;
  height: 2.94vw;
  border-radius: 0.12vw;
}

.page-top .sec02_03_btn--01 { background-color: #b8d200; }
.page-top .sec02_03_btn--02 { background-color: #45b035; }
.page-top .sec02_03_btn--03 { background-color: #0081cc; }

.page-top .sec02_03_btn_txt {
  font-family: "Yu Mincho", "游明朝", YuMincho, serif;
  font-weight: 600;
  font-size: 1.25vw;
  letter-spacing: 0.3em;
  color: #fff;
}

.page-top .sec02_03_btn_img {
  display: none;
}

/* 4. スライダー */
.page-top .sec02_04 {
  width: 47.40%;
  margin: 4.125vw auto 0;
}

.page-top .sec02_slider_wrap {
  position: relative;
}

.page-top .sec02_slider .swiper-slide img {
  width: 100%;
  display: block;
}

.page-top .sec02_slider_wrap .swiper-button-prev,
.page-top .sec02_slider_wrap .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  z-index: 10;
  width: auto;
  height: auto;
}

.page-top .sec02_slider_wrap .swiper-button-prev::after,
.page-top .sec02_slider_wrap .swiper-button-next::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
}

.page-top .sec02_slider_wrap .swiper-button-prev::after {
  border-width: 1.225vw 1.24vw 1.225vw 0;
  border-color: transparent #999999 transparent transparent;
}

.page-top .sec02_slider_wrap .swiper-button-next::after {
  border-width: 1.225vw 0 1.225vw 1.24vw;
  border-color: transparent transparent transparent #999999;
}

.page-top .sec02_slider_wrap .swiper-button-prev {
  left: -5.125vw;
}

.page-top .sec02_slider_wrap .swiper-button-next {
  right: -5.125vw;
}

.page-top .sec02_04 .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 0.52vw;
  margin-top: 2.54vw;
}

.page-top .sec02_04 .swiper-pagination-bullet {
  width: 0.625vw; /* 12px / 1920 */
  height: 0.625vw;
  border-radius: 50%;
  background: #999999;
  opacity: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.page-top .sec02_04 .swiper-pagination-bullet-active {
  background: #b8d200;
}

/* 5. 「第２種換気ってないの？」パネル */
.page-top .sec02_05 {
  width: 57.45%;
  margin: 4.17vw auto 0; /* 80px / 1920 */
}

/* ===== sec03 ===== */
.page-top .sec03 {
  position: relative;
  background: url('../img/sec03_bg.png') center top / 100% auto no-repeat;
  padding: 4.17vw 0 1.91vw;
  overflow: hidden;
}

.page-top .sec03::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40.57vw; /* 779px / 1920 */
  height: 16.17vw; /* 310.5px / 1920 */
  background: url('../img/sec03_leaf_top.png') top right / 100% auto no-repeat;
  z-index: 2;
  pointer-events: none;
}

.page-top .sec03::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20.94vw; /* 401.5px / 1920 */
  height: 61.25vw; /* 1176px / 1920 */
  background: url('../img/sec03_leaf_left.png') bottom left / 100% auto no-repeat;
  z-index: 2;
  pointer-events: none;
}

.page-top .sec03_lead {
  font-family: "Yu Mincho", "游明朝", YuMincho, serif;
  font-weight: 500;
  font-size: 0.833vw;
  line-height: 1.75;
  letter-spacing: 0.31em;
  color: #4d4d4d;
  text-align: center;
  background: #fff;
  padding: 0 0 0.5vw;
}

.page-top .sec03_inner {
  width: 50.52vw; /* 970px / 1920 */
  margin: 0 auto;
}

.page-top .sec03_hd {
  background: #fff;
  padding: 0;
}

.page-top .sec03_hd img {
  width: 32.66vw; /* 627px / 1920 */
  display: block;
  margin: 0 auto;
}

.page-top .sec03_cards {
  list-style: none;
  margin-top: 1.3vw;
  display: flex;
  flex-direction: column;
  gap: 0.95vw;
}

.page-top .sec03_card {
  position: relative;
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.6);
}

.page-top .sec03_card_txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.8vw 2vw 3.2vw 5.56vw;
}

.page-top .sec03_card_main {
  font-family: "Yu Mincho", "游明朝", YuMincho, serif;
  font-weight: 500;
  font-size: 0.9375vw;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #666;
  background: #fff;
  margin-left: -5.56vw;
  margin-right: -2vw;
  padding: 0.5vw 0vw 0.5vw 1.76vw;
  text-align: center;
}

.page-top .sec03_card_tag {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-weight: 400;
  font-size: 0.646vw;
  line-height: 1.75;
  letter-spacing: 0.31em;
  color: #4d4d4d;
  margin-top: 0.52vw;
  text-align: center;
  margin-bottom: 0.52vw;
}

.page-top .sec03_card_content {
  width: 50%;
  display: block;
}

.page-top .sec03_card_btn {
  position: absolute;
  bottom: 0.56vw;
  left: 5.56vw;
  width: 16.15vw;
  height: 2.52vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2vw 0 0;
  border-radius: 0.358vw; /* 6.879px / 1920 */
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-size: 0.677vw;
  letter-spacing: 0.31em;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

.page-top .sec03_card_btn {
  transition: opacity 0.3s ease;
}

.page-top .sec03_card_btn:hover {
  opacity: 0.8;
}

.page-top .sec03_card_btn span {
  position: absolute;
  right: 1.479vw;
}

.page-top .sec03_card_btn--01 { background-color: #b8d200; }
.page-top .sec03_card_btn--02 { background-color: #45b035; }
.page-top .sec03_card_btn--03 { background-color: #0081cc; }

/* ===== sec04 ===== */
.page-top .sec04 {
  background: url('../img/sec04_bg.png') center top / 100% auto no-repeat;
  padding: 4.17vw 0 5.21vw; /* 80px / 1920, 100px / 1920 */
}

.page-top .sec04_inner {
  width: 57.97vw; /* 1113px / 1920 */
  margin: 0 auto;
}

.page-top .sec04_ttl {
  text-align: center;
}

.page-top .sec04_ttl_txt {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 2.083vw; /* 40px / 1920 */
  line-height: 1.75;
  letter-spacing: 0.31em;
  color: #0081cc;
}

.page-top .sec04_ttl_img {
  display: none;
}

.page-top .sec04_ttl img {
  width: 29.66vw;
  display: block;
  margin: 0 auto;
}

.page-top .sec04_points {
  margin-top: 2.08vw; /* 40px / 1920 */
}

.page-top .sec04_points img {
  width: 100%;
  display: block;
}

/* ===== sec_footer ===== */
.sec_footer_catalog {
  background: #fff;
  padding: 3.125vw 0 9.17vw;
  text-align: center;
}

.sec_footer_inner {
  width: 26.2vw; /* 503px / 1920 */
  margin: 0 auto;
}

.sec_footer_label {
  font-family: "Noto Serif JP", serif;
  font-size: 0.83vw; /* 16px / 1920 */
  font-weight: 400;
  color: #555;
  letter-spacing: 0.1em;
}

.sec_footer_ttl {
  font-family: "Noto Serif JP", serif;
  font-size: 1.46vw;
  font-weight: 400;
  color: #333;
  line-height: 1.9;
  margin-top: 0.52vw;
  letter-spacing: 0.22em;
}

.sec_footer_img {
  margin-top: 0.16vw;
}

.sec_footer_img img {
  width: 100%; /* 503px = 26.2vw、inner幅に合わせる */
  display: block;
  margin: 0 auto;
}

.sec_footer_lead {
  font-family: "Noto Serif JP", serif;
  font-size: 0.83vw;
  font-weight: 400;
  color: #555;
  line-height: 2.2;
  margin-top: 1.56vw;
  letter-spacing: 0.25em;
}

.sec_footer_lead_em {
  font-size: 1.25vw;
}

.sec_footer_btn {
  display: block;
  margin-top: 2.56vw;
}

.sec_footer_btn img {
  width: 15.65vw; /* 300.5px / 1920 */
  display: block;
  margin: 0 auto;
}

.sec_footer_nav {
  width: 46.875vw; /* 900px / 1920 */
  margin: 0 auto;
  padding-bottom: 9.9vw; /* 190px / 1920 */
}

.sec_footer_nav_list {
  list-style: none;
  display: flex;
}

.sec_footer_nav_list li {
  flex: 1;
}

.sec_footer_nav_list li a {
  display: block;
}

.sec_footer_nav_list li a img {
  width: 100%;
  display: block;
}

/* ===== SP ===== */
@media screen and (max-width: 750px) {

  /* Header */
  .header {
    height: auto;
  }

  .header_inner {
    position: relative;
    padding: 3.59vw 3.42vw; /* top: 14px/390, left/right: 40px/1170 */
    align-items: center;
    justify-content: space-between;
  }

  .header_logo {
    margin-right: 0;
  }

  .header_logo img {
    width: 23.93vw; /* 280px / 1170 */
  }

  /* PC専用要素を非表示 */
  .header_nav,
  .header_catalog_btn,
  .header_brand {
    display: none;
  }

  /* SP専用ブランドロゴ */
  .sp_header_brand {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .sp_header_brand img {
    display: block;
    width: 23.42vw; /* 274.06px / 1170 */
    height: auto;
  }

  /* ハンバーガーボタン */
  .sp_ham_btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.05vw; /* 8px / 390 */
    width: 7.69vw; /* 30px / 390 */
    height: 7.69vw;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }

  .header--scrolled .sp_ham_btn span {
    background: #333;
  }

  .sp_ham_btn span {
    display: block;
    width: 100%;
    height: 0.51vw; /* 2px / 390 */
    background: #fff;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
  }

  .sp_ham_btn.open span {
    background: #333;
  }

  .sp_ham_btn.open span:first-child {
    transform: translateY(1.28vw) rotate(45deg);
  }

  .sp_ham_btn.open span:last-child {
    transform: translateY(-1.28vw) rotate(-45deg);
  }

  /* SP drawer */
  .sp_drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100dvh;
    background: #fff;
    z-index: 99;
    transition: right 0.5s ease;
    display: flex;
    flex-direction: column;
    padding-top: 20.51vw; /* header高さ分 + 余白 */
    overflow-y: auto;
  }

  .sp_drawer.open {
    right: 0;
  }

  .sp_drawer_list {
    list-style: none;
  }

  .sp_drawer_list li {
    border-bottom: 1px solid #e5e5e5;
  }

  .sp_drawer_list li a {
    display: block;
    padding: 5.13vw 8.97vw; /* 20px 35px / 390 */
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-size: 4.62vw; /* 18px / 390 */
    font-weight: 400;
    color: #333;
    text-decoration: none;
    letter-spacing: 0.2em;
  }

  .sp_drawer_catalog {
    padding: 10.26vw 8.97vw;
    text-align: center;
  }

  .sp_drawer_catalog a {
    display: block;
    width: 60vw;
    margin: 0 auto;
    background: #0081cc;
    color: #fff;
    font-family: 'Yu Mincho', '游明朝', YuMincho, serif;
    font-size: 3.8vw;
    letter-spacing: 0.3em;
    padding: 3.5vw 0;
    text-decoration: none;
    text-align: center;
  }

  /* オーバーレイ */
  .sp_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 98;
  }

  .sp_overlay.open {
    display: block;
  }

  /* ドロワー展開時: スクロール状態に関わらずヘッダーを表示 */
  .header:has(.sp_ham_btn.open) {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
  }

  .header:has(.sp_ham_btn.open) .header_logo img {
    filter: invert(1);
  }

  .header:has(.sp_ham_btn.open) .sp_header_brand img {
    filter: none;
  }

  /* sec01 */
  .page-top .sec01_scroll {
    display: none;
  }

  .page-top .sec01_content {
    padding-top: 33.95vw;
  }

  .page-top .sec01_house {
    width: 32%;
  }

  .page-top .sec01_ac {
    height: 8.76vw;
    margin-bottom: 0.41vw;
  }

  .page-top .ac-A  { width: 0.92vw; }
  .page-top .ac-i1 { width: 0.19vw; }
  .page-top .ac-r  { width: 0.50vw; }
  .page-top .ac-C  { width: 0.85vw; }
  .page-top .ac-o  { width: 0.73vw; }
  .page-top .ac-n1 { width: 0.85vw; }
  .page-top .ac-s  { width: 0.80vw; }
  .page-top .ac-u  { width: 0.85vw; }
  .page-top .ac-l  { width: 0.54vw; }
  .page-top .ac-t  { width: 0.50vw; }
  .page-top .ac-i2 { width: 0.43vw; }
  .page-top .ac-n2 { width: 0.85vw; }
  .page-top .ac-g  { width: 0.80vw; }

  .page-top .sec01_ttl {
    margin-top: 20.33vw;
    font-size: 6.11vw;
    font-weight: 600;
    letter-spacing: 0.31em;
  }

  .page-top .sec01_lead {
    margin-top: 10.14vw;
    font-size: 3.16vw;
    font-weight: 300;
    letter-spacing: 0.31em;
    line-height: 1.75;
  }

  /* sec02 */
  .page-top .sec02 {
    padding: 5.13vw 0; /* 60px / 1170 */
  }

  .page-top .sec02_01 {
    font-size: 2.73vw; /* 31.91px / 1170 */
    font-weight: 600;
    letter-spacing: 0.31em;
    line-height: 1.75;
    padding-left: 4vw;
  }

  .page-top .sec02_02 {
    width: 100%;
    margin: 5.13vw 0 0;
    background-image: url('../img/sec02_bg_sp.png');
    padding: 6.54vw 0 2.04vw;
  }

  .page-top .sec02_02_inner {
    width: 100%;
  }

  .page-top .sec02_03 {
    margin-top: 7.69vw; /* 30px / 390 */
  }

  .page-top .sec02_03_media {
    width: 71.41vw;
    margin: 0 auto;
  }

  .page-top .sec02_03_img {
    display: none;
  }

  .page-top .sec02_03_txt {
    font-size: 4.19vw; /* 49.02px / 1170 */
    line-height: 1.63;
  }

  .page-top .sec02_03_btns {
    flex-direction: row;
    gap: 1.56vw;
    margin-top: 7.13vw;
    justify-content: center;
  }

  .page-top .sec02_03_btn_txt {
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-weight: 600;
    font-size: 3.75vw;
    letter-spacing: 0.15em;
    color: #fff;
  }

  .page-top .sec02_03_btn {
    flex: none;
    width: 29.02vw;
    height: 10.56vw;
    border-radius: 0.52vw;
    font-size: 1.11vw;
  }

  .page-top .sec02_03_btn_img {
    display: none;
  }

  .page-top .sec02_04 {
    width: 92%;
    margin: 7.69vw auto 0; /* 30px / 390 */
  }

  .page-top .sec02_slider_wrap .swiper-button-prev::after {
    border-width: 6.05vw 4.08vw 6.05vw 0;
  }

  .page-top .sec02_slider_wrap .swiper-button-next::after {
    border-width: 6.05vw 0 6.05vw 4.08vw;
  }

  .page-top .sec02_slider_wrap .swiper-button-prev {
    left: -1.13vw;
  }

  .page-top .sec02_slider_wrap .swiper-button-next {
    right: -1.13vw;
  }

  .page-top .sec02_04 .swiper-pagination {
    gap: 2.56vw;
    margin-top: 9.85vw;
  }

  .page-top .sec02_04 .swiper-pagination-bullet {
    width: 2.05vw; /* 8px / 390 */
    height: 2.05vw;
  }

  .page-top .sec02_05 {
    width: 92%;
    margin: 14.69vw auto 0;
  }

  /* sec_footer */
  .sec_footer_catalog {
    padding: 11.54vw 0 15.38vw;
  }

  .sec_footer_inner {
    width: 86%;
  }

  .sec_footer_btn img {
    width: 52.71vw; /* 616.68px / 1170 */
  }

  .sec_footer_label {
    font-size: 3.14vw;
    line-height: 1.75;
    letter-spacing: 0.31em;
  }

  .sec_footer_ttl {
    font-size: 4.14vw;
    line-height: 1.75;
    letter-spacing: 0.31em;
    margin-top: 2.56vw;
  }

  .sec_footer_img {
    margin-top: 5.13vw;
  }

  .sec_footer_lead {
    font-size: 2.71vw;
    line-height: 2.06;
    letter-spacing: 0.31em;
    margin-top: 5.13vw;
  }

  .sec_footer_lead_em {
    font-size: 3.61vw;
    line-height: 1.54;
    letter-spacing: 0.31em;
  }

  .sec_footer_btn {
    margin-top: 5.13vw;
  }

  .sec_footer_nav {
    width: 92.31vw; /* 1080px / 1170 */
    flex-direction: column;
    padding-bottom: 10.26vw; /* 120px / 1170 */
  }

  .sec_footer_nav_list {
    flex-direction: column;
    gap: 3.16vw;
  }

  /* sec04 */
  .page-top .sec04 {
    padding: 7.69vw 0 10.26vw;
    background-image: url('../img/sec04_bg_sp.png');
  }

  .page-top .sec04_inner {
    width: 92%;
  }

  .page-top .sec04_ttl_img {
    display: none;
  }

  .page-top .sec04_ttl_txt {
    font-size: 5.05vw;
    line-height: 1.75;
    letter-spacing: 0.31em;
  }

  .page-top .sec04_ttl img {
    width: 68.46vw; /* 801px / 1170 */
  }

  .page-top .sec04_points {
    margin-top: 5.13vw;
  }

  .page-top .sec04_points img {
    width: 89.40vw; /* 1046px / 1170 */
  }

  /* sec03 */
  .page-top .sec03 {
    padding: 7.69vw 0 25.26vw;
    background-image: url('../img/sec03_bg_sp.png');
  }

  .page-top .sec03::before {
    width: 65.57vw;
    height: 16.17vw;
  }

  .page-top .sec03::after {
    width: 37.94vw;
    height: 126.25vw;
    z-index: 1;
  }

  .page-top .sec03_inner {
    position: relative;
    z-index: 3;
    width: 92%;
  }

  .page-top .sec03_lead {
    font-size: 2.785vw; /* 32.58px / 1170 */
    padding: 0 0 7.5vw;
  }

  .page-top .sec03_hd {
    padding: 7.69vw 0 0;
  }

  .page-top .sec03_hd img {
    width: 80%;
  }

  .page-top .sec03_cards {
    margin-top: 12vw;
    gap: 10.7vw;
  }

  .page-top .sec03_card {
    display: block;
    background-color: transparent;
    background-size: cover;
    background-position: center;
    aspect-ratio: 2162 / 838;
    position: relative;
  }

  .page-top .sec03_card--01 { background-image: url('../img/sec03_card01_sp.png'); }
  .page-top .sec03_card--02 { background-image: url('../img/sec03_card02_sp.png'); }
  .page-top .sec03_card--03 { background-image: url('../img/sec03_card03_sp.png'); }

  .page-top .sec03_card_content {
    display: none;
  }

  .page-top .sec03_card_txt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 11.28vw;
    width: 100%;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3vw 2vw 2vw;
    background: transparent;
  }

  .page-top .sec03_card_main {
    background: #fff;
    margin-left: 0;
    margin-right: 0;
    width: 79.91vw;
    padding: 1.26vw 0;
    font-size: 2.9vw;
    text-align: center;
    color: #666;
  }

  .page-top .sec03_card_tag {
    font-size: 2.98vw;
    line-height: 1.75;
    letter-spacing: 0.31em;
    text-align: center;
    margin-top: 1.9vw;
    margin-bottom: 0;
  }

  .page-top .sec03_card_btn {
    position: absolute;
    bottom: 5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 59.32vw;
    height: 6.28vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5vw 0 0;
    border-radius: 1.5vw;
    font-size: 2.97vw;
    line-height: 1.75;
    letter-spacing: 0.31em;
  }

  .page-top .sec03_card_btn span {
    position: absolute;
    right: 3vw;
  }
}

/* ===== PC hover ===== */
@media screen and (min-width: 751px) {
  .header_logo,
  .header_nav_item a,
  .header_catalog_btn,
  .sec_footer_btn,
  .sec_footer_nav_list a {
    transition: opacity 0.3s ease;
  }

  .header_logo:hover,
  .header_nav_item a:hover,
  .header_catalog_btn:hover,
  .sec_footer_btn:hover,
  .sec_footer_nav_list a:hover {
    opacity: 0.7;
    text-decoration: none;
  }
}