@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Noto+Sans+JP:wght@100..900&display=swap');

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*/
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 1;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
a img {
  border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: break-word;
  outline: none !important;
}
html, body {
  font-family: var(--font-ja);
  line-height: 1.4;
  /*text-align: justify;*/
  font-size: 10px;
  /*scroll-behavior: smooth;*/
  /*-webkit-overflow-scrolling: touch;*/
  font-weight: var(--medium);
  color: var(--color-txt);
  /* font-feature-settings: "palt"; */
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: 0.004em;
}
a {
  display: inline-block;
  color: var(--color-txt);
  cursor: pointer;
  outline: none !important;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  transition: .3s;
}
*:focus {
  outline: none;
  }
a, a:hover {
  text-decoration: none;
}
.flex {
  display: flex;
}
button {
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
strong {
  font-weight: var(--bold);
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  letter-spacing: 0;
}
h1, h2, h3, h4 {
  font-weight: var(--bold);
}
/*
p, dt, dd {
  overflow-wrap: break-word;
}
*/
body {
  margin: auto;
  /* opacity: 0;
  animation: fadeIn .7s .2s ease-out forwards; */
}
small {
  font-size: 70%;
}
main {
  overflow: hidden;
  overflow: clip;
}
li {
  list-style: none;
}
input,
textarea,
select,
option,
button {
  font-family: var(--font-ja);
  font-weight: var(--medium);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
option:focus-visible {
  outline: none;
}
input:not([type="radio"],[type="checkbox"],[type="submit"],[type="button"]),
textarea,
select {
  width: 100%;
  padding: 1rem 1.4rem;
  border: 1px solid #DEDEDE;
  border-radius: 0.5rem;
  background: #FFFFFF;
  font-size: 1.6rem;
  font-weight: var(--regular);
  line-height: 1.75;
}
.empty {
  background: #FFEFEF !important;
}
select {
  border: 1px solid #c8ccce;
  background: var(--color-white) url(../img/common/icon_select_arrow.png) center right 2.1rem/0.9rem auto no-repeat;
}
select::after {
  position: absolute;
  content: "";
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
textarea {
  min-height: 19.2rem;
  resize: vertical;
}
.checkbox {
  display: block;
  margin: 6rem auto 0;
  width: max-content;
  font-weight: var(--regular);
  font-size: 1.4rem;
  font-size: max(1.4rem, 10px);
  cursor: pointer;
}
.checkbox a {
  color: var(--color-blue);
}
input[type="checkbox"] {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
  background: var(--color-white);
  border: 1px solid #cccccc;
  margin: 0 1rem -0.3rem 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: 0.2s;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  background-color: var(--color-blue);
  box-shadow: none;
}
input[type="checkbox"]:checked:before {
  position: absolute;
  content: '';
  top: 40%;
  left: 50%;
  width: 0.5rem;
  height: 0.7rem;
  border-right: 0.1rem solid var(--color-white);
  border-bottom: 0.1rem solid var(--color-white);
  transform: translate(-50%, -50%) rotate(50deg);
}
input[type="radio"] {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
  background: var(--color-white);
  border: 1px solid #cccccc;
  border-radius: 100%;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: 0.2s;
  cursor: pointer;
  font-size: 1.4rem;
  font-size: max(1.4rem, 10px);
}
input[type="radio"]:checked {
  box-shadow: none;
}
input[type="radio"]:checked:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background: var(--color-blue);
  transform: translate(-50%, -50%);
}
label {
  cursor: pointer;
}
.radios {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: center;
  padding: 0 2rem;
  font-size: 1.4rem;
  font-size: max(1.4rem, 10px);
}
.radios label {
  display: flex;
  gap: 1rem;
  align-items: center;
}
tbody {
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 767px) {
  ::-webkit-scrollbar{
    width: 0;
  }
}
@media screen and (max-width: 1450px) {
  html, body {
    font-size: calc(1000vw / 1450);
  }
}
@media screen and (max-width: 767px) {
  html, body {
    font-size: calc(1000vw / 375);
  }
}
.sp,
.spi {
  display: none !important;
}
.pc {
  display: block !important;
}
.pci {
  display: inline-block !important;
}
@media screen and (max-width: 767px) {
  /* input:not([type="radio"],[type="checkbox"]),
  textarea,
  select {
    padding: 1.35rem 1.5rem;
    font-size: 1.5rem;
  } */
  .radios {
    padding: 1rem 2rem 1.6rem;
    font-size: 1.4rem;
  }
  .checkbox {
    margin-top: 4rem;
    font-size: 1.4rem;
  }
  .sp {
    display: block !important;
  }
  .spi {
    display: inline-block !important;
  }
  .pc,
  .pci {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  a:hover {
    opacity: 0.68;
  }
}

/* ----------------------------------
common
---------------------------------- */
:root {
  --color-pink: #fbbad0;
  --color-white: #fff;
  --color-txt: #222222;
  --color-black: #333333;
  --color-bage: #FFF5E0;
  --color-green: #25B8AB;
  --color-lght-green: #E8F8F4;
  --color-glay: #F6F6F6;
  --color-red: #D80000;
  --color-orange: #F58600;
  --color-yellow: #FFD650;
  --color-gr: linear-gradient(-300deg, #25B8AB 0%, #25B8AB 30%, #3FAEDE 100%);
  --light: 300;
  --regular: 400;
  --medium: 600;
  --semibold: 600;
  --bold: 600;
  --black: 900;
  --font-en: "Figtree", sans-serif;
  /* --font-ja: "Hiragino Kaku Gothic StdN","ヒラギノ角ゴ StdN","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP", sans-serif; */
  --font-ja: "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP", sans-serif;
}
.is-hide {
  display: none !important;
}
.en {
  font-family: var(--font-en);
}
.ja {
  font-family: var(--font-ja);
}
a {
  transition: .3s;
}
::placeholder {
  color: #B1B9BA;
}
body.fixed {
  /* width: 100%;
  height: 100%;
  position: fixed; */
  overflow: hidden;
}
.accordion_ttl {
  cursor: pointer;
  transition: opacity 0.3s;
}
.accordion_ttl:not(.sp_ac)::before,
.accordion_ttl:not(.sp_ac)::after {
  position: absolute;
  top: 50%;
  right: 0;
  content: "";
  display: block;
  width: 1.4rem;
  height: 1px;
  background: var(--color-txt);
  transition: .3s;
  transform: translateY(-50%);
}
.accordion_ttl:not(.sp_ac)::after {
  transform: translateY(-50%) rotate(90deg);
}
.accordion_ttl:not(.sp_ac).open::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}
.in {
  position: relative;
  max-width: 140rem;
  margin: 0 auto;
}
.txt {
  font-size: 1.6rem;
}
time {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: var(--regular);
  letter-spacing: 0.03em;
  color: rgb(34 34 34 / 0.5);
}
.comingsoon {
  pointer-events: none;
}
.popup-youtube:not(.comingsoon)::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  width: 5.4rem;
  height: 5.4rem;
  background: url(../img/common/icon_media_play.png) center/contain;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .in {
    padding: 0 2rem;
  }
  time {
    font-size: 1.1rem;
  }
}

/* button ------------------------- */
.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 5.4rem;
}
.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 31.7rem;
  height: 6rem;
  border-radius: 5rem;
  font-size: 1.6rem;
  color: var(--color-white);
  font-weight: var(--bold);
  background: var(--color-gr);
}
.button::after {
  position: absolute;
  top: 50%;
  right: 2.5rem;
  content: "";
  display: block;
  width: 1.3rem;
  height: 1.2rem;
  background: url(../img/common/icon_arrow.svg) center/contain no-repeat;
  transform: translateY(-50%);
}
.button.button_wh {
  background: var(--color-white);
  border: 1px solid #E5E5E5;
  color: var(--color-txt);
}
.button.button_wh::after {
  background-image: url(../img/common/icon_arrow_bk.svg);
}
.button.button_line {
  background: #06C755;
}
.button2 {
  position: relative;
  display: block;
  padding: 3.4rem;
  background: #F4F7F7;
  border-radius: 1rem;
  font-size: 1.8rem;
  font-weight: var(--medium);
}
.button2 + .button2 {
  margin-top: 1rem;
}
.button2::after {
  position: absolute;
  top: 50%;
  right: 3rem;
  content: "";
  display: block;
  width: 1.3rem;
  height: 1.2rem;
  background: url(../img/common/icon_arrow_gr.svg) center/contain no-repeat;
  transform: translateY(-50%);
}
.button2 small {
  display: block;
  font-size: 1.2rem;
}
.button_cv {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.2rem;
  height: 9rem;
  width: 100%;
  margin-bottom: 2rem;
  background: var(--color-yellow);
  font-size: 2.4rem;
  border-radius: 5rem;
}
.button_cv img {
  width: 2.7rem;
  filter: brightness(0);
}
.button3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 3rem;
  height: 11rem;
  background: var(--color-white);
  border-radius: 1rem;
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
  font-size: 1.8rem;
  font-weight: var(--medium);
  line-height: 1.44;
}
.button3 img {
  width: 5.6rem;
}
.button3::after {
  position: absolute;
  top: 50%;
  right: 3rem;
  content: "";
  display: block;
  width: 1.3rem;
  height: 1.2rem;
  background: url(../img/common/icon_arrow_bk.svg) center/contain no-repeat;
  transform: translateY(-50%);
}
.more {
  position: relative;
  display: inline-block;
  padding-right: 3.6rem;
  font-size: 1.6rem;
  font-weight: var(--medium);
}
.more span {
  text-decoration: underline;
}
.more::after {
  position: absolute;
  right: 0;
  top: 50%;
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  background: var(--color-green) url(../img/common/icon_arrow.svg) center/1.2rem auto no-repeat;
  transform: translateY(-50%);
}
.button.button_og {
  background: var(--color-orange);
}
.button.button_og_solid {
  background: var(--color-white);
  border: 2px solid var(--color-orange);
  color: var(--color-orange);
}
.button_arrow {
  position: relative;
  margin-top: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-green);
  border-radius: 5rem;
  font-size: 1.6rem;
  height: 6rem;
  color: var(--color-green);
  letter-spacing: 0.04em;
}
.button_arrow::before,
.button_arrow::after {
  position: absolute;
  content: "";
}
.button_arrow::before {
  top: 50%;
  left: 2.6rem;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--color-green);
  transform: translateY(-50%);
  border-radius: 100%;
}
.button_arrow::after {
  top: 50%;
  left: 3.2rem;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
  transform: translateY(-50%) rotate(45deg);
}
@media screen and (min-width: 768px) {
  .cvwrap .button_cv:hover {
    background: #fcbc36;
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  .buttons {
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3rem;
  }
  .button {
    width: 100%;
    height: 4.7rem;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
  }
  .button.button_line {
    height: 4.7rem;
  }
  .button::after {
    width: 1.1rem;
    height: 0.9rem;
  }
  .button2 {
    padding: 2.5rem 5rem 2.5rem 2.5rem;
    font-size: 1.3rem
  }
  .button2::after {
    width: 1.2rem;
    height: 0.9rem;
    right: 2rem;
    background-image: url(../img/common/icon_arrow_bk.svg);
  }
  .button3 {
    height: 8.5rem;
    font-size: 1.3rem;
    padding: 0 2.2rem;
  }
  .button3 img {
    width: 3.9rem;
  }
  .button3::after {
    width: 1.2rem;
    height: 0.9rem;
  }
}

/* df_ttl ---------------------------------- */
.df_ttl {
  margin-bottom: 4.7rem;
}
.df_ttl .ttl_h2 {
  font-size: 3.4rem;
  font-weight: var(--bold);
  line-height: 1.4;
}
.df_ttl .ttl_h2 small {
  display: block;
  margin-bottom: 1.6rem;
  font-family: var(--font-en);
  font-weight: var(--regular);
  letter-spacing: 0.15em;
  font-size: 1.4rem;
  line-height: 1;
  color: rgb(34 34 34 / 0.5);
}
.df_ttl .txt {
  font-size: 1.6rem;
  margin-top: 2.6rem;
  line-height: 1.75;
  font-weight: var(--regular);
}
.df_ttl.ta_center {
  text-align: center;
}
.icon_h2 {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-bottom: 3.5rem;
  font-size: 2.4rem;
  font-weight: var(--medium);
}
.icon_h2 img {
  width: 2.2rem;
}
@media screen and (max-width: 767px) {
  .df_ttl {
    margin-bottom: 3rem;
    text-align: center;
  }
  .df_ttl .ttl_h2 {
    font-size: 2.2rem;
  }
  .df_ttl .ttl_h2 small {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  .df_ttl .txt {
    margin-top: 0.7rem;
    font-size: 1.3rem;
  }
  .icon_h2 {
    font-size: 1.6rem;
    gap: 1.8rem;
    margin-bottom: 2.5rem;
  }
  .icon_h2 img {
    width: 1.6rem;
  }
}

/* check_list ------------------------- */
.check_list > li {
  padding-left: 3rem;
  font-size: 1.6rem;
  font-weight: var(--medium);
  background: url(../img/common/icon_check.svg) top left/2.1rem auto no-repeat;
}
.check_list > li + li {
  margin-top: 1.2rem;
}
.check_list.batsu li {
  background-image: url(../img/common/icon_batsu.svg);
}
.check_list > li.col p {
  margin: 0;
}
.check_list > li.col .ttl {
  font-weight: var(--bold);
}
ol.check_list > li {
  position: relative;
  background: none;
  padding-left: 4rem;
}
ol.check_list > li .num {
  position: absolute;
  left: 0;
  top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--color-green);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  border: 1px solid var(--color-green);
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .check_list > li.col {
    display: flex;
    gap: 2.7rem;
    padding-right: 0 !important;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto 1fr;
    display: grid;
    row-gap: 0;
  }
  .check_list > li.col p {
    margin: 0;
  }
  .check_list > li.col .txt {
    position: relative;
    width: 20.7rem;
    min-width: 20.7rem;
  }
  .check_list > li.col .txt::before {
    position: absolute;
    top: 50%;
    left: -1.4rem;
    content: "";
    height: 100%;
    width: 1px;
    background: var(--color-txt);
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 767px) {
  .check_list > li {
    font-size: 1.3rem;
  }
  ol.check_list > li {
    padding-left: 3rem;
  }
  ol.check_list > li .num {
    font-size: 1.3rem;
    width: 2rem;
    height: 2rem;
  }
}


/* sp_yokoscroll ------------------- */
@media screen and (max-width: 767px) {
  .sp_yokoscroll {
    margin: 1.9rem -2rem;
    padding: 0 2rem;
    overflow-x: scroll;
  }
  .sp_yokoscroll > * {
    margin: 0 !important;
  }
  .sp_yokoscroll > img {
    min-width: 93.6rem;
  }
  .sp_yokoscroll::-webkit-scrollbar {
    display: none;
  }
}

/* link_img ---------------------------------- */
.link_img {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4rem;
  max-width: 68.5rem;
  width: 100%;
  padding: 2rem;
  border-radius: 1rem;
  background: var(--color-white);
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
}
.link_img::before,
.link_img::after {
  position: absolute;
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  right: 1.5rem;
  bottom: 1.5rem;
}
.link_img::before {
  background: var(--color-gr);
}
.link_img::after {
  background: url(../img/common/icon_arrow.svg) center/1.3rem auto no-repeat;
}
.link_img figure {
  position: relative;
  width: 13rem;
  min-width: 13rem;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 0.4rem;
}
.link_img figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.link_img .txt {
  font-size: 2rem;
  line-height: 1.6;
}
.link_img .txt span {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-green);
}
@media screen and (max-width: 767px) {
  .link_img {
    padding: 1.5rem 2rem 1.5rem 1.5rem;
    gap: 1.9rem;
  }
  .link_img .txt {
    font-size: 1.4rem;
  }
  .link_img .txt span {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    white-space: nowrap;
  }
  .link_img figure {
    width: 8rem;
    min-width: 8rem;
  }
  .link_img::before, 
  .link_img::after {
    width: 2.2rem;
    height: 2.2rem;
    right: 0.8rem;
    bottom: 0.8rem;
  }
  .link_img::after {
    background-size: 0.7rem auto;
  }
}

/* breadcrumbs ---------------------------------- */
.breadcrumbs {
  max-width: 140rem;
  margin: 0 auto;
  padding: 2.7rem 0;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}
.breadcrumbs li {
  position: relative;
  display: inline;
}
.breadcrumbs li:first-of-type {
  padding-left: 2.3rem;
  background: url(../img/common/breadcrumbs_icon.svg) center left/1.3rem auto no-repeat;
}
.breadcrumbs li:not(:first-of-type) {
  padding-left: 2.3rem;
}
.breadcrumbs li:not(:first-of-type)::before {
  position: absolute;
  content: "";
  top: 0.6rem;
  left: 0.6rem;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1px solid var(--color-txt);
  border-right: 1px solid var(--color-txt);
  transform: rotate(45deg);
}
.breadcrumbs li a {
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  .breadcrumbs {
    padding: 1.5rem 2rem;
    font-size: 1rem;
    position: relative;
    padding-left: 9rem;
    line-height: 1.75;
  }
  .breadcrumbs li:first-of-type {
    position: absolute;
    left: 2rem;
    padding-left: 2rem;
    background-size: 1rem auto;
  }
  .breadcrumbs li:not(:first-of-type)::before {
    top: 0.3rem;
  }
  .breadcrumbs li:nth-of-type(2) {
    padding-left: 0;
  }
  .breadcrumbs li:nth-of-type(2)::before {
    left: -1.5rem;
  }
}



/* section --------------------------------------- */
section {
  padding: 10rem 0;
}
@media screen and (max-width: 767px) {
  section {
    padding: 4.9rem 0 6rem;
  }
}



/* product_card --------------------------------------- */
.product_slide {
  overflow: visible;
}
.product_list {
  display: flex;
}
.product_card {
  width: 32.8rem;
  min-width: 32.8rem;
  margin-right: 3rem;
  height: auto;
}
.product_card a {
  display: block;
  height: 100%;
  background: var(--color-white);
  padding: 5rem 3.5rem 3.1rem;
  border-radius: 1rem;
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
}
.product_card a figure {
  position: relative;
  overflow: hidden;
  width: 25rem;
  aspect-ratio: 1/1;
  margin: 0 auto 5.4rem;
}
.product_card a figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.product_card a p.maker {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  font-weight: var(--regular);
  font-family: var(--font-en);
  color: rgb(34 34 34 / 0.5);
}
.product_card a p.name {
  font-size: 1.8rem;
  font-weight: var(--bold);
  letter-spacing: 0.05em;
  margin: 0;
}
.product_card a p.sku {
  margin: 1.4rem 0 0;
  font-size: 1.3rem;
  font-weight: var(--regular);
  line-height: 1.4;
  word-break: break-all;
}
.product_card a p.sku > span {
  display: block;
  text-indent: -3em;
  padding-left: 3em;
  word-break: break-all;
  font-weight: var(--regular);
  color: var(--color-txt);
}
.product_card a p.price {
  margin: 1.5rem 0 0;
  font-size: 2.2rem;
  font-family: var(--font-en);
  font-weight: var(--medium);
  color: var(--color-red);
}
.product_card a .price.sale {
  color: var(--color-red);
}
.product_card a .price small {
  padding-left: 0.5rem;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  font-weight: var(--regular);
}
.product_card a p.note {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: rgb(34 34 34 / 0.5);
}

.ranking .product_list {
  counter-reset: number 0;  
}
.ranking .product_card {
  position: relative;
}
.ranking .product_card::before {
  position: absolute;
  counter-increment: number 1;
  content: counter(number);
  width: 4rem;
  height: 4rem;
  top: 1.3rem;
  left: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: var(--bold);
  font-family: var(--font-en);
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: 100%;
  background: var(--color-white);
  z-index: 3;
}
.ranking .product_card:nth-of-type(1)::before {
  background: #F5A916;
  border-color: #F5A916;
  color: var(--color-white);
}
.ranking .product_card:nth-of-type(2)::before {
  background: #838383;
  border-color: #838383;
  color: var(--color-white);
}
.ranking .product_card:nth-of-type(3)::before {
  background: #AF640B;
  border-color: #AF640B;
  color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .product_card {
    width: 20rem;
    min-width: 20rem;
    margin-right: 2rem;
  }
  .product_card a {
    padding: 2.5rem 2rem 1.5rem;
  }
  .product_card a figure {
    width: 100%;
    margin-bottom: 3.3rem;
  }
  .product_card a p.maker {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  .product_card a p.name {
    font-size: 1.3rem;
  }
  .product_card a p.sku {
    margin-top: 1.1rem;
    font-size: 1rem;
    letter-spacing: 0.04em;
  }
  .product_card a p.price {
    margin-top: 1rem;
    font-size: 1.8rem;
    font-weight: var(--bold);
  }
  .product_card a .price small {
    font-size: 0.9rem !important;
    padding-left: 0;
  }
  .product_card a p.note {
    margin-top: 0.64rem !important;
    font-size: 0.9rem !important;
  }

  .ranking .product_card::before {
    top: 1rem;
    left: 1rem;
    width: 2.9rem;
    height: 2.9rem;
    font-size: 1.1rem;
  }
}
/* 価格下部固定 ---------------------- */
.product_card a {
  position: relative;
  padding-bottom: 9rem !important;
}
.product_card a p.note {
  position: absolute;
  bottom: 2.8rem;
}
.product_card a p.price {
  position: absolute;
  bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .product_card a {
    padding-bottom: 7rem !important;
  }
  .product_card a p.note {
    bottom: 1.8rem;
    max-width: calc(100% - 3rem);
    line-height: 1;
  }
  .product_card a p.price {
    bottom: 4rem;
  }
}
/* 価格下部固定 ---------------------- */


/* campaign_card --------------------------------------- */
.campaign_slide {
  overflow: visible;
}
.campaign_list {
  display: flex;
}
.campaign_card {
  width: 44.7rem;
  min-width: 44.7rem;
  margin-right: 3rem;
  height: auto;
}
.campaign_card a {
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
  background: var(--color-white);
  height: 100%;
}
.campaign_card a figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1/0.56;
}
.campaign_card a figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.campaign_info {
  padding: 1.9rem 3rem 2.7rem;
}
.campaign_info .data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.campaign_info .labels {
  display: flex;
  gap: 1rem;
}
.campaign_info .labels span {
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  padding: 0.75rem 0.9rem;
  border-radius: 0.2rem;
  border: 1px solid rgb(0 0 0 / 0.14);
}
.campaign_info .ttl {
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .campaign_card {
    width: 27rem;
    min-width: 27rem;
    margin-right: 1.5rem;
  }
  .campaign_info {
    padding: 1.6rem 2rem 2rem;
  }
  .campaign_info .ttl {
    font-size: 1.3rem;
  }
  .campaign_info .data {
    margin-bottom: 1.3rem;
  }
  .campaign_info .labels span {
    font-size: 1rem;
    padding: 0.7rem;
  }
  .campaign_info time {
    display: none;
  }
}



/* case_card --------------------------------------- */
.case_slide {
  overflow: visible;
}
.case_list {
  display: flex;
}
.case_card {
  width: 44.7rem;
  min-width: 44.7rem;
  margin-right: 3rem;
}
.case_card a {
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
  background: var(--color-white);
}
.case_card a figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1/0.56;
}
.case_card a figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case_info {
  padding: 1.9rem 3rem 2.7rem;
}
.case_info .data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.case_info .labels {
  display: flex;
  gap: 1rem;
}
.case_info .labels span {
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  padding: 0.75rem 0.9rem;
  border-radius: 0.2rem;
  border: 1px solid rgb(0 0 0 / 0.14);
}
.case_info .ttl {
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .case_card {
    width: 27rem;
    min-width: 27rem;
    margin-right: 1.5rem;
  }
  .case_info {
    padding: 1.6rem 2rem 2rem;
  }
  .case_info .ttl {
    font-size: 1.3rem;
  }
  .case_info .data {
    margin-bottom: 1.3rem;
  }
  .case_info .labels span {
    font-size: 1rem;
    padding: 0.7rem;
  }
  .case_info time {
    display: none;
  }
}


/* banner_links --------------------------------------- */
.banner_links {
  background: var(--color-gr);
}
.banner_links .list {
  display: flex;
  gap: 1px;
}
.banner_links .list .item {
  width: 25%;
  padding: 7rem 0;
  text-align: center;
  color: var(--color-white);
}
.banner_links .list .item:not(:first-of-type) {
  border-left: 1px solid rgb(255 255 255 / 0.35);
}
.banner_links .list .item dt {
  font-size: 2rem;
  letter-spacing: 0.04em;
  font-weight: var(--medium);
}
.banner_links .list .item dd {
  margin-top: 2.8rem;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  line-height: 1.75;
  font-weight: var(--regular);
}
.banner_links .list .item .button {
  margin: 2.8rem auto 0;
  width: 21.9rem;
  height: 5rem;
  background: rgb(255 255 255 / 0.15);
}
.banner_links .list .item .button::after {
  content: none;
}
@media screen and (min-width: 768px) {
  .banner_links.col3 .list .item {
    width: 33.33%;
  }
  .banner_links .list .item .button:hover {
    opacity: 1;
    background: var(--color-white);
    color: var(--color-green);
  }
}
@media screen and (max-width: 767px) {
  .banner_links .list {
    flex-wrap: wrap;
  }
  .banner_links .list .item {
    padding: 4.5rem 0 4rem;
    width: calc(50% - 0.5px);
  }
  .banner_links .list .item:not(:first-of-type,:nth-of-type(2)) {
    border-top: 1px solid rgb(255 255 255 / 0.35);
  }
  .banner_links .list .item dt {
    font-size: 1.4rem;
  }
  .banner_links .list .item dd {
    font-size: 1.1rem;
    margin-top: 1.9rem;
  }
  .banner_links .list .item .button {
    padding: 1.5rem 2rem;
    width: max-content;
    margin-top: 2.2rem;
    height: auto;
  }
}




/* column_card --------------------------------------- */
.column_slide {
  overflow: visible;
}
.column_card {
  width: 32.8rem;
  min-width: 32.8rem;
  margin-right: 2.9rem;
}
.column_card a {
  display: block;
}
.column_card a figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 1rem;
  margin-bottom: 2rem;
}
.column_card a figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.column_card a .ttl {
  margin-top: 1.3rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.625;
}
@media screen and (max-width: 767px) {
  .column_card {
    width: 27rem;
    min-width: 27rem;
    margin-right: 1.7rem;
  }
  .column_card a figure {
    margin-bottom: 1.6rem;
  }
  .column_card a .ttl {
    margin-top: 1.2rem;
    font-size: 1.3rem;
  }
}

/* cvwrap ---------------------------------- */
.cvwrap {
  position: relative;
  padding: 9.6rem 0 6.1rem;
  background: var(--color-orange);
}
.cvwrap .in {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.cvwrap .in .left {
  position: relative;
  width: calc(100% - 67.4rem - 5rem);
}
.cvwrap .in .left::after {
  position: absolute;
  content: "";
  right: 1.1rem;
  top: -6.6rem;
  width: 29.4rem;
  height: 25.4rem;
  background: url(../img/waterheater/top/cv_chance.png) center/contain no-repeat;
}
.cvwrap .in .ttl_h2 {
  position: relative;
  z-index: 1;
  padding-bottom: 3.9rem;
  color: var(--color-white);
  font-size: 3.4rem;
  font-weight: var(--medium);
}
.cvwrap .in .button_cv {
  position: relative;
  z-index: 2;
}
.cvwrap .in .ttl_h2 small {
  display: block;
  font-size: 1.6rem;
  margin-top: 3.2rem;
}
.cvwrap .in .right {
  width: 67.4rem;
}
.cvwrap .in .right .box {
  padding: 4rem 5rem 3.8rem;
  background: var(--color-white);
  border-radius: 1rem;
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
}
.cvwrap .in .right .note {
  margin-top: 0.6rem;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-align: right;
}
.cvwrap .in .right .icon_h2 {
  gap: 1.9rem;
  font-size: 2.2rem;
  margin-bottom: 3rem;
}
.cvwrap .buttons2 {
  display: flex;
  gap: 0.2rem;
}
.cvwrap .buttons2 .button2 {
  margin: 0 !important;
  width: 50%;
}
.cvwrap .buttons2 .button2 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 8rem;
  padding: 1.5rem 3rem;
  font-size: 1.6rem;
}
.cvwrap .buttons2 .button2:nth-of-type(1) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.cvwrap .buttons2 .button2:nth-of-type(2) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.cvwrap .icon_h2 img {
  width: 2.6rem;
}
@media screen and (max-width: 767px) {
  .cvwrap {
    padding: 7rem 0 5rem;
  }
  .cvwrap .in {
    display: block;
  }
  .cvwrap .in .left {
    width: 100%;
  }
  .cvwrap .in .ttl_h2 {
    padding-bottom: 2.7rem;
    font-size: 2.2rem;
  }
  .cvwrap .in .ttl_h2 small {
    max-width: 21rem;
    margin-top: 1.6rem;
    font-size: 1.2rem;
  }
  .cvwrap .in .right {
    width: 100%;
    margin-top: 3rem;
  }
  .cvwrap .in .button_cv {
    height: 6.5rem;
    gap: 1.4rem;
    font-size: 1.6rem;
    margin: 0;
  }
  .cvwrap .in .button_cv img {
    width: 1.8rem;
  }
  .cvwrap .in .right .box {
    padding: 3.5rem 3rem 3rem;
  }
  .cvwrap .in .right .icon_h2 {
    font-size: 1.6rem;
    margin-bottom: 2.2rem;
  }
  .cvwrap .buttons2 {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .cvwrap .buttons2 .button2 {
    width: 100%;
    border-radius: 1rem !important;
  }
  .cvwrap .buttons2 .button2::after {
    background-image: url(../img/common/icon_arrow_gr.svg);
  }
  .cvwrap .in .right .note {
    font-size: 1rem;
    margin-top: 1.3rem;
  }
  .cvwrap .in .left::after {
    right: -2.7rem;
    top: -4.1rem;
    width: 31rem;
    height: 18.9rem;
    background-image: url(../img/waterheater/top/cv_chance_sp.png);
  }
}



.pager {
  margin-top: 11.3rem;
}
.pager .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pager .nav-links span,
.pager .nav-links a {
  display: block;
  width: 3rem;
  height: 4rem;
  font-size: 1.6rem;
  font-weight: var(--medium);
  line-height: 3.6rem;
  text-align: center;
  border-bottom: 1px solid #E2DED3;
}
.pager .nav-links .current {
  border-color: #F58600;
  color: #F58600;
  font-weight: var(--bold);
}
.pager .nav-links a.next, 
.pager .nav-links a.prev {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pager .nav-links a.next img, 
.pager .nav-links a.prev img {
  width: 0.5rem;
}
@media screen and (max-width: 767px) {
  .pager {
    margin-top: 5rem;
  }
  .pager .nav-links span,
  .pager .nav-links a {
    font-size: 1.4rem;
  }
}


/* news_card --------------------------------------- */
.news_list li + li {
  margin-top: 1rem;
}
.news_card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3.9rem;
  padding: 3.5rem 4.5rem;
  background: #F4F7F7;
  border-radius: 1rem;
  font-size: 1.6rem;
  font-weight: var(--regular);
}
.news_card::after {
  position: absolute;
  top: 50%;
  right: 3rem;
  content: "";
  display: block;
  width: 1.3rem;
  height: 1.2rem;
  background: url(../img/common/icon_arrow_bk.svg) center / contain no-repeat;
  transform: translateY(-50%);
}
.news_card time {
  min-width: max-content;
  font-size: 1.3rem;
}
@media screen and (max-width: 767px) {
  .news_card {
    display: block;
    padding: 2.4rem;
  }
  .news_card p {
    font-size: 1.3rem;
    max-width: 25rem;
  }
  .news_card time {
    display: block;
    margin-bottom: 1.3rem;
    font-size: 1.2rem;
  }
  .news_card::after {
    right: 2.5rem;
    width: 1.2rem;
    height: 0.9rem;
  }
}



/* voice_card --------------------------------------- */
.voice_slide {
  overflow: visible;
}
.voice_card {
  position: relative;
  width: 44.7rem;
  min-width: 44.7rem;
  margin-right: 3rem;
  background: var(--color-white);
  border-radius: 1rem;
  padding: 4.6rem 5rem 5.2rem;
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
}
.voice_card::after {
  position: absolute;
  bottom: -1.4rem;
  left: 50%;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.8rem 2.85rem 0 2.85rem;
  border-color: #FFFFFF transparent transparent transparent;
  transform: translateX(-50%);
}
.voice_card .txt {
  font-size: 1.5rem;
  font-weight: var(--regular);
  line-height: 1.73;
}
.voice_info {
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.voice_info figure {
  position: relative;
  width: 6rem;
  height: 6rem;
  border-radius: 100%;
  overflow: hidden;
  background: var(--color-lght-green);
}
.voice_info figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voice_info .ttl {
  font-size: 1.6rem;
  font-weight: var(--medium);
}
.voice_info .star {
  margin-top: 1rem;
  font-family: var(--font-en);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
@media screen and (max-width: 767px) {
  .voice_card {
    position: relative;
    width: 27rem;
    min-width: 27rem;
    margin: 0 0.75rem;
    padding: 5rem 3rem 4rem;
  }
  .voice_card .txt {
    font-size: 1.2rem;
  }
  .voice_info figure {
    position: absolute;
    width: 5rem;
    height: 5rem;
    left: 50%;
    top: -2.5rem;
    transform: translateX(-50%);
  }
  .voice_info {
    display: block;
    text-align: center;
    margin-bottom: 2.3rem;
  }
  .voice_info .ttl {
    font-size: 1.4rem;
  }
  .voice_info .star {
    font-size: 0.9rem;
  }
}



/* swiper --------------------------------------- */
.swiper:not(.mv_slide) .swiper-slide:last-of-type {
  margin-right: 0;
}
.swiper-controll {
  position: absolute;
  right: 0;
  top: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 11.2rem;
  margin: 0 0 0 auto;
}
.swiper-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.3rem;
  height: 5.3rem;
  border-radius: 100%;
  border: 1px solid rgb(0 0 0 / 0.13);
  transition: .3s;
  cursor: pointer;
}
.swiper-button::before {
  position: absolute;
  content: "";
  display: block;
  width: 1.3rem;
  height: 1.2rem;
  left: 50%;
  top: 50%;
  background: url(../img/common/icon_arrow_bk.svg) center/contain no-repeat;
  transform: translate(-50%, -50%);
}
.swiper-button:first-of-type {
  transform: rotate(180deg);
}
@media screen and (min-width: 768px) {
  .swiper-button:hover {
    opacity: 0.68;
  }
}
@media screen and (max-width: 767px) {
  .swiper-controll {
    display: none;
  }
}



/* header --------------------------------------- */
header {
  background: var(--color-white);
}
header .top .in {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2.9rem 0 2.3rem;
}
header .top .in .hamburger {
  display: none;
}
header .top .list {
  display: flex;
  align-items: center;
  gap: 3rem;
}
header .top .list a {
  font-size: 1.2rem;
  font-weight: var(--regular);
  letter-spacing: 0.02em;
  text-align: center;
}
header .top .list a span {
  position: relative;
  display: block;
  margin: 0 auto 1.3rem;
  width: 5.3rem;
}
header .top .list a span img {
  width: 100%;
  transition: .3s;
}
/* header .top .list a img:first-of-type {
  opacity: 0;
}
header .top .list a img:nth-of-type(2) {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
header .top .list .current a img:first-of-type {
  opacity: 1;
}
header .top .list .current a img:nth-of-type(2) {
  opacity: 0;
} */
header .top .list li:not(.current) a:not(:hover) img {
  filter: brightness(0.5) grayscale(10);
}
header .top .list .current a {
  color: var(--color-green);
  font-weight: var(--bold);
}
header .top .logo span,
header .top .logo h1 {
  font-size: 1.2rem;
  font-weight: var(--regular);
  color: rgb(34 34 34 / 0.5);
  letter-spacing: 0.02em;
  display: block;

  position: absolute;
  top: 1.9rem;
}
header .top .logo a {
  display: block;
  margin: 3rem 0 1rem;
}
header .top .logo img {
  width: 25.1rem;
}
header .bottom {
  padding: 1.1rem 0;
  background: var(--color-gr);
}
header .bottom.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 10;
}
header .bottom nav {
  display: flex;
  gap: 4rem;
  align-items: center;
  justify-content: space-between;
}
header .bottom nav .list {
  display: flex;
  gap: 3rem;
}
header .bottom nav .list * {
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: var(--regular);
  letter-spacing: 0.02em;
}
header .bottom nav .list li {
  position: relative;
}
header .bottom nav .list li:first-of-type a {
  font-weight: var(--bold);
}
header .bottom nav .list li dt {
  position: relative;
  padding-right: 1.2rem;
  cursor: pointer;
}
header .bottom nav .list li dt::before {
  position: absolute;
  top: 50%;
  right: 0;
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 0.2rem solid var(--color-white);
  border-right: 0.2rem solid var(--color-white);
  transform: translateY(-50%) rotate(135deg);
}
header .bottom nav .list li dt::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 6rem;
  top: -2rem;
  left: 0;
  z-index: 2;
}
header .head_nav {
  position: absolute;
  top: 6rem;
  padding: 3.7rem;
  border-radius: 1rem;
  background: var(--color-white);
  z-index: 20;
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
}
header .head_nav::before {
  position: absolute;
  left: 1.6rem;
  top: -0.9rem;
  content: "";
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 1px;
  background: var(--color-white);
  transform: rotate(45deg);
}
header .head_nav a {
  display: block;
  font-size: 1.6rem !important;
  color: var(--color-txt) !important;
  font-weight: var(--regular) !important;
}
header .head_nav a + a {
  margin-top: 1rem;
}
header .bottom .botton_wrap {
  display: flex;
  gap: 0.6rem;
}
header .bottom .botton_wrap .button {
  display: block;
  width: auto;
  height: auto;
  padding: 1rem 1.8rem;
  background: var(--color-white);
  border-radius: 5rem;
  font-size: 1.2rem;
  font-weight: var(--regular);
  color: var(--color-txt);
}
header .bottom .botton_wrap .button::after {
  content: none;
}
header .bottom .botton_wrap .button_mitumori {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  justify-content: center;
  background: var(--color-orange);
  font-size: 1.3rem;
  color: var(--color-white);
  padding: 0 1.8rem;
  margin: -1.1rem 0;
  margin-left: 2rem;
}
header .bottom .botton_wrap .button_mitumori::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.6rem;
  background: url(../img/common/icon_mitumori.svg) center/contain no-repeat;
}
header .bottom .botton_wrap .button_mitumori.tel::before {
  background-image: url(../img/common/icon_tel.png);
}
header .mobile_drawer,
header .overray {
  display: none;
}
header .bar {
  display: none;
}
@media screen and (min-width: 768px) {
  header .head_nav {
    width: max-content;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
  }
  header .bottom nav .list li dt:hover::after {
    height: 10rem;
  }
  header .bottom nav .list li dl:hover dd {
    opacity: 1;
    pointer-events: auto;
  }
  header .top .list a:hover {
    opacity: 1;
    color: var(--color-green);
  }
}
@media screen and (max-width: 767px) {
  header .top .in {
    display: block;
    padding: 1rem 2rem 1.9rem;
  }
  header .top .logo span,
  header .top .logo h1 {
    display: block;
    font-size: 1.1rem;
    text-align: center;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgb(0 0 0 / 0.1); 
  }
  header .top .logo img {
    margin-top: 2.4rem;
    width: 16.8rem;
  }
  header .top .in nav {
    display: none;
  }
  header .bottom {
    overflow-x: scroll;
    padding: 0;
    display: none;
  }
  header .bottom::-webkit-scrollbar {
    display: none;
  }
  header .bottom nav {
    height: 4.2rem;
    width: max-content;
  }
  header .bottom nav .list {
    gap: 2rem;
  }
  header .bottom nav .list * {
    font-size: 1.3rem;
  }
  header .bottom nav .list > * {
    min-width: max-content;
  }
  header .bottom .botton_wrap {
    align-items: center;
  }
  header .bottom .botton_wrap .button {
    min-width: max-content;
    font-size: 1.1rem;
    padding: 0.8rem 1rem;
  }
  header .bottom .botton_wrap .button_mitumori {
    min-width: max-content;
    height: 4.2rem;
    font-size: 1.1rem;
    margin-left: 0.5rem;
  }

  
  header .top .in .hamburger {
    position: absolute;
    display: block;
    width: 3rem;
    height: 1.5rem;
    right: 2rem;
    top: 7.2rem;
  }
  header .top .in .hamburger span,
  header .top .in .hamburger::after,
  header .top .in .hamburger::before {
    position: absolute;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--color-txt);
  }
  header .top .in .hamburger span {
    top: 50%;
    transform: translateY(-50%);
  }
  header .top .in .hamburger::before {
    top: 0;
  }
  header .top .in .hamburger::after{
    bottom: 0;
  }
  header .mobile_drawer .close_btn {
    position: absolute;
    width: 3rem;
    height: 1.5rem;
    top: 2rem;
    right: 2rem;
  }
  header .mobile_drawer .close_btn::after,
  header .mobile_drawer .close_btn::before {
    position: absolute;
    content: "";
    top: 50%;
    width: 34px;
    height: 1px;
    background: var(--color-txt);
  }
  header .mobile_drawer .close_btn::after {
    transform: translateY(-50%) rotate(150deg);
  }
  header .mobile_drawer .close_btn::before {
    transform: translateY(-50%) rotate(-150deg);
  }
  header .mobile_drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 33.5rem;
    background: var(--color-white);
    padding: 6.4rem 3rem 5rem;
    z-index: 20;
    height: 100vh;
    overflow: scroll;
    display: none;
  }
  header .mobile_drawer .in {
    padding: 0;
  }
  header .mobile_drawer .buttons {
    margin: 0;
  }
  header .mobile_drawer .button {
    height: 5rem;
    font-size: 1.3rem;
  }
  header .mobile_drawer .button_og::after {
    left: 3rem;
    width: 1.5rem;
    height: 1.6rem;
    background-image: url(../img/common/icon_mitumori.svg);
  }
  header .mobile_drawer .button_form::after {
    left: 3rem;
    width: 1.7rem;
    height: 1.7rem;
    background-image: url(../img/common/icon_form.svg);
  }
  header .mobile_drawer .button_tel::after {
    left: 3rem;
    width: 1.8rem;
    height: 1.9rem;
    background-image: url(../img/common/icon_tel.png);
  }
  header .mobile_drawer .list {
    margin-top: 2.3rem;
  }
  header .mobile_drawer .list li {
    font-size: 1.4rem;
    font-weight: var(--bold);
    border-bottom: 1px solid rgb(0 0 0 / 0.1);
  }
  header .mobile_drawer .list li a {
    display: block;
  }
  header .mobile_drawer .list li > a {
    padding: 2rem 0;
  }
  header .mobile_drawer .list li dt {
    position: relative;
    padding: 2rem 0;
  }
  header .mobile_drawer .list li dt::after {
    content: none;
  }
  header .mobile_drawer .list li dt::before {
    position: absolute;
    width: 0.9rem;
    height: 0.9rem;
    border-top: 1px solid var(--color-green);
    border-right: 1px solid var(--color-green);
    background: none;
    transform: translateY(-50%) rotate(135deg);
  }
  header .mobile_drawer .list li dt.open::before {
    transform: translateY(-50%) rotate(-45deg);
  }
  header .mobile_drawer .list li dd {
    position: relative;
    padding: 0 2.2rem 2.9rem 2.2rem;
    display: none;
  }
  header .mobile_drawer .list li dd::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    display: block;
    width: 1px;
    height: calc(100% - 2.9rem);
    background: rgb(0 0 0 / 0.1);
  }
  header .mobile_drawer .list li dd a {
    font-size: 1.2rem;
    font-weight: var(--regular);
    letter-spacing: 0.04em;
  }
  header .mobile_drawer .list li dd a + a {
    margin-top: 1rem;
  }
  header .mobile_drawer .box_links {
    display: flex;
    flex-wrap: wrap;
    margin: 5rem -3rem 0;
  }
  header .mobile_drawer .box_links li {
    width: 50%;
    border-bottom: 1px solid rgb(0 0 0 / 0.1);
  }
  header .mobile_drawer .box_links li:nth-of-type(-n + 2) {
    border-top: 1px solid rgb(0 0 0 / 0.1);
  }
  header .mobile_drawer .box_links li:nth-of-type(2n) {
    border-left: 1px solid rgb(0 0 0 / 0.1);
  }
  header .mobile_drawer .box_links li a {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    flex-direction: row;
    gap: 1.4rem;
    justify-content: flex-start;
    height: 6.2rem;
    padding: 1.5rem;
    letter-spacing: 0.04em;
    font-weight: var(--medium);
  }
  header .mobile_drawer .box_links li a img {
    width: 3.3rem;
  }
  header .overray {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgb(0 0 0 / 0.3);
    display: none;
    z-index: 11;
  }
  header .bottom nav .list li dt::after {
    height: 3.7rem !important;
    top: -1rem;
  }
  header .head_nav {
    position: fixed;
    width: 100%;
    left: 0;
    top: 15.7rem;
    padding: 2rem;
    border-radius: 0;
    background: var(--color-lght-green);
    display: none;
    z-index: 100;
  }
  header.fixed .head_nav {
    top: 4rem !important;
  }
  header .head_nav::before {
    content: none;
  }
  header .head_nav a {
    font-size: 1.3rem !important;
  }
  
  /* no_scroll */
  header.no_scroll .top .in {
    position: relative;
    display: flex;
    align-items: center;
    padding: 2rem;
    justify-content: space-between;
    transition: .3s;
    background-color: var(--color-white);
    z-index: 11;

    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
  }
  main:not(.form) {
    padding-top: 7.8rem;
  }
  header.no_scroll .top .in::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0.2rem;
    bottom: 0;
    left: 0;
    background: var(--color-gr);
    opacity: 0;
    transition: .3s;
  }
  header.no_scroll .top .logo span,
  header.no_scroll .top .logo h1 {
    display: none;
  }
  header.no_scroll .bar {
    display: block;
    font-size: 1.1rem;
    text-align: center;
    padding: 1rem 0 1.1rem;
    font-weight: var(--regular);
    margin: 0 2rem;
    border-bottom: 1px solid rgb(0 0 0 / 0.1);
    color: rgb(34 34 34 / 0.5);
    letter-spacing: 0.02em;
  }
  header.no_scroll .logo a {
    margin: 0;
  }
  header.no_scroll .logo img {
    margin: 0;
    transition: .3s;
  }
  header.no_scroll .top .in .hamburger {
    position: relative;
    right: auto;
    top: auto;
  }
  header.no_scroll.fixed .top .in {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 1.3rem;
  }
  header.no_scroll.fixed .top .in::after {
    opacity: 1;
  }
  header.no_scroll.fixed .logo img {
    width: 13.9rem;
  }
}



/* fixed_buttons --------------------------------------- */
.fixed_buttons {
  position: fixed;
  right: 2rem;
  bottom: 5rem;
  z-index: 10;
  /* display: none; */
}
.fixed_buttons .head_button {
  position: relative;
  display: block;
}
.fixed_buttons .head_button a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
  width: 11.4rem;
  height: 11.4rem;
  border-radius: 1rem;
  font-size: 1.4rem;
  color: var(--color-white);
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
}
.fixed_buttons .head_button a.otoku {
  background: #25B8AB;
}
.fixed_buttons .head_button a.otoku img {
  width: 3.8rem;
}
.fixed_buttons .head_button a.mitumori {
  background: var(--color-orange);
}
.fixed_buttons .head_button a.mitumori img {
  width: 2.8rem;
}
.fixed_buttons .head_button a.line {
  background: #06C755;
}
.fixed_buttons .head_button a.line img {
  width: 3.5rem;
}
.fixed_buttons .head_button .close {
  position: absolute;
  top: -0.5rem;
  right: -0.4rem;
  width: 2.3rem;
  height: 2.3rem;
  background: var(--color-white) url(../img/common/icon_close.svg) center/0.7rem auto no-repeat;
  border-radius: 100%;
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
  z-index: 2;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .fixed_buttons .head_button a {
    border: 0.2rem solid var(--color-white);
  }
}
@media screen and (max-width: 767px) {
  .fixed_buttons {
    bottom: 0;
    right: 0;
  }
  .fixed_buttons_in {
    display: flex;
    border: 1px solid var(--color-white);
  }
  .fixed_buttons .head_button a {
    width: 18.7rem;
    height: 5rem;
    flex-direction: row;
    margin: 0 !important;
    border-radius: 0;
    border: 1px solid var(--color-white);
  }
  .fixed_buttons .head_button .close {
    display: none;
  }
  .fixed_buttons .head_button a.mitumori img {
    width: 2.2rem;
  }
  .fixed_buttons .head_button a.line img {
    width: 2.5rem;
  }
}


/* footer ---------------------------------- */
footer {
  padding: 10.3rem 0 6.6rem;
  border-top: 1px solid rgb(0 0 0 / 0.15);
  background: var(--color-white);
}
footer .in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer .left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24.8rem;
}
footer .left .logo {
  width: 17rem;
}
footer .banners a {
  position: relative;
  display: block;
  font-size: 1.3rem;
  font-weight: var(--regular);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgb(0 0 0 / 0.15);
}
footer .banners a::after {
  position: absolute;
  bottom: 0.7rem;
  right: 0;
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1px solid var(--color-txt);
  border-right: 1px solid var(--color-txt);
  transform: translateY(-50%) rotate(45deg);
}
footer .banners a img {
  width: 100%;
  margin-bottom: 1rem;
}
footer .left .sns {
  display: flex;
  justify-content: space-between;
  margin-top: 3.6rem;
}
footer .left .sns .item {
  width: 4.5rem;
}
footer .right {
  gap: 9.4rem 7.2rem;
  width: 84rem;
  display: grid;
  grid-template-columns: auto auto auto;
}
footer .right dt {
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  font-weight: var(--medium);
}
footer .right dd {
  margin-top: 2.6rem;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}
footer .right dd a {
  display: block;
  font-weight: var(--regular);
}
footer .right dd a + a {
  margin-top: 1em;
}
footer .right .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

footer .bottom {
  width: 100%;
  padding-top: 4.9rem;
  margin-top: 8.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgb(0 0 0 / 0.1);
}
footer .bottom .links {
  display: flex;
  align-items: center;
  gap: 5rem;
}
footer .bottom .links a {
  font-size: 1.3rem;
  font-weight: var(--regular);
  letter-spacing: 0.04em;
}
footer .bottom .copy {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: var(--regular);
  color: rgb(34 34 34 / 0.5);
}
@media screen and (max-width: 767px) {
  footer {
    padding: 8rem 0 7rem;
  }
  footer .left {
    width: 100%;
  }
  footer .left .logo {
    display: block;
    width: 17.1rem;
    margin: 0 auto;
  }
  footer .left .sns {
    margin-top: 2.5rem;
    justify-content: center;
    gap: 0.8rem;
  }
  footer .left .sns .item {
    width: 3.3rem;
  }
  footer .right {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5rem;
    width: 100%;
    gap: 0.2rem;
  }
  footer .right dl {
    width: 100% !important;
    background: #F4F7F7;
  }
  footer .right dl:first-of-type {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  footer .right dl:last-of-type {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }
  footer .right dt {
    position: relative;
    padding: 3rem 2.5rem;
    font-size: 1.3rem;
  }
  footer .right dt::after {
    position: absolute;
    top: 50%;
    right: 3rem;
    content: "";
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    border-right: 1px solid var(--color-txt);
    border-top: 1px solid var(--color-txt);
    transform: translateY(-50%) rotate(135deg);
    transition: .5s;
  }
  footer .right dt.open::after {
    transform: translateY(-50%) rotate(-45deg);
  }
  footer .right dd {
    display: none;
    margin: 0;
    padding: 0 3.9rem 2.6rem;
  }
  footer .right dd a {
    font-size: 1.1rem;
  }
  footer .bottom {
    margin: 6rem 0 0;
    padding: 0;
    border: none;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
  }
  footer .bottom .links {
    gap: 1.5rem;
  }
  footer .bottom .links a {
    font-size: 1rem;
  }
  footer .bottom .copy {
    font-size: 0.9rem;
  }
  footer .banners {
    margin-top: 3.2rem;
  }
}



/* form_header ---------------------------------- */
header.form_header {
  padding-top: 2.4rem;
}
header.form_header .flex {
  justify-content: space-between;
  align-items: flex-start;
}
header.form_header .logo_img {
  width: 25.1rem;
  margin-top: 1.7rem;
  display: block;
}
header.form_header #logo span,
header.form_header #logo h1 {
  font-size: 1.2rem;
  font-weight: var(--regular);
  color: rgb(34 34 34 / 0.5);
  letter-spacing: 0.02em;
  display: block;
}
header.form_header #telephone {
  width: 28.5rem;
}
header.form_header #telephone .button {
  display: block;
  min-width: auto;
  width: 100%;
  border-radius: 0.9rem;
  font-family: var(--font-en);
  font-size: 2.8rem;
  font-weight: var(--bold);
  padding: 0.6rem 4.1rem;
  text-align: left;
  height: auto;
}
header.form_header #telephone .button::after {
  content: none;
}
header.form_header #telephone .button small {
  display: block;
  font-size: 1.2rem;
  font-weight: var(--bold);
  letter-spacing: 0.04em;
}
header.form_header #telephone > p {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #222222;
}
@media screen and (max-width: 767px) {
  header.form_header {
    position: relative;
    padding: 2rem 0 0;
  }
  header.form_header .logo_img {
    width: 15.8rem;
    margin: 0;
  }
  header.form_header #logo span,
  header.form_header #logo h1 {
    position: absolute;
    top: -5rem;
    left: 2rem;
    width: calc(100% - 4rem);
    display: none;
    font-size: 1.1rem;
    text-align: center;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgb(0 0 0 / 0.1);
  }
  header.form_header #telephone {
    width: 15.5rem;
  }
  header.form_header #telephone .button {
    width: 90%;
    margin: 0 0 0 auto;
    font-size: 1.4rem;
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
    text-align: center;
  }
  header.form_header #telephone .button small {
    font-size: 1rem;
  }
  header.form_header #telephone > p {
    font-size: 1rem;
    text-align: right;
    font-weight: 400;
  }
}




/* form_footer ---------------------------------- */
.form_footer {
  padding: 5rem 0 1.9rem;
  background: #F6F6F6;
  border: none;
}
.form_footer .in {
  display: block;
}
.form_footer #logo {
  width: 24rem;
  margin: 0 auto;
}
.form_footer .copy {
  font-size: 1.2rem;
  font-family: var(--font-en);
  font-weight: 400;
  text-align: right;
  padding-top: 1.7rem;
  margin-top: 4rem;
  border-top: 1px solid rgb(0 0 0 / 0.15);
  color: rgb(34 34 34 / 0.5);
}
@media screen and (max-width: 767px) {
  .form_footer #logo {
    width: 21rem;
  }
  .form_footer .copy {
    font-size: 1rem;
    padding-top: 1rem;
    text-align: center;
  }
}


/* form placeholder ---------------------------------- */
#fakePlaceholder {
  position: absolute;
  width: 100%;
  padding: 1rem 2rem 1rem 5.4rem;
  font-size: 1.6rem;
  font-weight: var(--regular);
  line-height: 1.75;
  color: #B1B9BA;
}
#fakePlaceholder::before {
  content: "(例)";
  position: absolute;
  left: 2rem;
}
#fakePlaceholder span {
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}
@media screen and (max-width: 767px) {
  #fakePlaceholder {
    font-size: 1.4rem;
  }
}

picture source {
  display: none;
}






.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}
/* アニメーション */
.anime.slideUp,
.anime.slideLeft,
.anime.fadeIn {
  opacity: 0;
}
.anime.slideUp.active {
  animation: slideUp .5s .05s ease-out forwards;
}
.anime.slideLeft.active {
  animation: slideLeft .5s .05s ease-out forwards;
}
.anime.fadeIn.active {
  animation: fadeIn .5s .2s ease-out forwards;
}
.anime.scaleDown img {
  transform: scale(1.1);
}
.anime.scaleDown.active img {
  animation: img-scale 7s ease-out forwards;
}
span.anime.slideLeft {
  display: inline-block;
}
.anime.img_cr {
  z-index: 2;
  overflow: hidden;
}
.anime.img_cr::after {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
}
.anime.img_cr.orange::after {
  background: #F7A544;
}
.anime.img_cr.blue::after {
  background: #648EF8;
}
.anime.img_cr.green::after {
  background: #79DD2A;
}
.anime.img_cr.red::after {
  background: #F77981;
}
.anime.active.img_cr::after {
  animation: img-cr .7s .5s ease-out forwards;
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(-2rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes img-scale {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes img-cr {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slideUp_tb {
  0% {
    opacity: 0;
    transform: translateY(2rem) rotate(90deg);
    transform-origin: top left;
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(90deg);
    transform-origin: top left;
  }
}