@charset "UTF-8";

/* ==============================
   RESET / BASE
============================== */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  line-height: 1.7;
  color: #4e4e4e;
  background: #fff;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  transform: scale(0.96);
}

li {
  list-style: none;

}

.wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0 23px;
  margin: 0 auto;
  box-sizing: border-box;
}

.sp-only {
  display: block
}

.tab-only,
.pc-only {
  display: none;
}

/* ==============================
   LOADING
============================== */
.loading {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 10000;
}

.loading__title {
  font-family: "Zen Old Mincho", serif;
  font-size: 2.4rem;
  color: #1C4446;
  text-align: center;
  padding-top: 45svh;
  opacity: 0;
}

/* ==============================
   COMMON TITLE
============================== */
.voice__article--title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  margin-bottom: 20px;
}

.section__title--ja {
  position: relative;
  font-family: "Zen Old Mincho", serif;
  font-size: 2rem;
  font-weight: 700;
  color: #1C4446;
}

.section__title--ja::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 4em;
  height: 1px;
  background: #C7E5BE;
}

.section__title--en {
  font-family: "Vujahday Script", cursive;
  font-size: 4.2rem;
  line-height: 1;
  color: #C7E5BE;
 transform: rotate(-13deg) translateY(-30px);
  white-space: nowrap;
  position: relative;
  z-index: 10000;
}


.section--text {
  font-size: 1.4rem;
  line-height: 2;
  margin-bottom: 24px;
}

/* JSタイトルアニメ用 */
.section__title--ja .title-line {
  display: inline-block;
  white-space: nowrap;
}

.section__title--ja .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(15px);
}

.section__title--en {
  opacity: 1;
}

/* ==============================
   HEADER / MENU
============================== */
header {
  position: relative;
  z-index: 9999;
}

.menu__btn {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  left: 23px;
  z-index: 9999;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.menu__btn--line1,
.menu__btn--line2 {
  display: block;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 3px rgba(28, 62, 60, 0.5);
  transform-origin: left center;
}

.menu__btn--line1 {
  width: 30px;
  margin-bottom: 10px;
}

.menu__btn--line2 {
  width: 20px;
}

.menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100svh;
  background: rgba(148, 210, 207, 0.92);
  color: #fff;
  z-index: 9998;
  overflow-x: hidden;
  will-change: left;
  backface-visibility: hidden;
}

.menu a {
  color: #fff;
}

.menu__title {
  font-family: "Zen Old Mincho", serif;
  font-size: 2.4rem;
  font-weight: 400;
  margin-top: 14vh;
  padding-left: 20vw;
}

.menu__list {
  margin-top: 9.5vh;
  padding-left: 20vw;
}

.menu__list--contents {
  font-size: 1.6rem;
  margin-bottom: 25px;
}

.header__btn--contner {
  display: none;
}

/* ==============================
   SCROLL INDICATOR
============================== */
.scroll-indicator {
  position:absolute;
  right: 0;
  bottom: 100px;
  transform: translateX(-40%);
  text-align: center;
  color: #4e4e4e;
  z-index: 9997;
  opacity: 0;
  visibility: hidden;
}

.scroll-text {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}

.scroll-line {
  display: block;
  width: 1px;
  height: 30px;
  background: #4e4e4e;
  margin: 0 auto;
}

/* ==============================
   MV
============================== */
.mv {
  width: 100%;
  min-height: 100svh;
  background: #fff;
  opacity: 0;
  visibility: hidden;
}

.mv__visual {
  position: relative;
  min-height: 92svh;
  overflow: hidden;
}

.mv__bg {
  position: absolute;
  inset: 0;
  background: url(../images/mv_01_sp.webp) no-repeat center center / cover;
  opacity: 0;
  z-index: 0;
}

.mv__Industry {
  text-align: right;
  padding-top: 8px;
}

.mv__Industry--en {
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.mv__Industry--ja {
  position: relative;
  z-index: 1;
  font-size: 2.4rem;
  font-weight: 900;
  color: #1C4446;
  font-family: "Zen Old Mincho", serif;
  letter-spacing: 0.25em;
}

.mv__Industry--ja::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 255, 255, 0.4), rgba(243, 239, 239, 0.2));
  top: -8px;
  right: 9px;
  z-index: -1;
}

.mv__sub {
  position: relative;
}

.mv__sub>div {
  position: absolute;
}

.mv__sub--01 {
  top: 3svh;
  left: 20%;
}

.mv__sub--02 {
  top: 9svh;
  left: 13%;
}

.mv__sub--03 {
  top: 15svh;
  left: 8%;
}

.mv__sub--text {
  display: inline-block;
  position: relative;
  padding: 8px 16px;
  font-size: 1.6rem;
  color: #1C4446;
  z-index: 0;
}

.mv__sub--text01 {
  transform: rotate(7deg);
}

.mv__sub--text02 {
  transform: rotate(2deg);
}

.mv__sub--text03 {
  transform: rotate(-3deg);
}

.mv__sub--text::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  clip-path: polygon(5% 0%, 95% 18%, 94% 85%, 4% 100%);
  z-index: -1;
}

.mv__main {
  display: inline-block;
  margin-top: 35svh;
  margin-left: 5.3%;
  font-family: "Zen Old Mincho", serif;
  color: #fff;
}

.mv__main--title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding: 8px 16px;
  /* background: linear-gradient(rgba(69, 167, 172, 0.55), rgba(47, 110, 113, 0.55)); */
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.mv__main--title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(69, 167, 172, 0.55), rgba(47, 110, 113, 0.55));
  border-radius: 8px;

  transform: scaleX(var(--bg-scale, 0));
  transform-origin: left;
  z-index: -1;
}
.mv__main--title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

.mv__main--text {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 2.19;
  padding-left: 1em;
}

.mv__bottom {
  min-height: auto;
  padding-bottom: 50px;
  background: #fff;
  /* position: relative;
  z-index: 0; */
}

.mv__btn {
  position: absolute;
  left: 50%;
  bottom: 23px;
  display: inline-block;
  background: #383838;
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.5;
  padding: 5px 15px 10px;
  z-index: 2;
}

.mv__btn--frist {
  font-size: 2rem;
  letter-spacing: 0.1em;
}

.mv__item {
  position: absolute;
  left: -12%;
  top: -150px;
  width: 55%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv__item img {
  width: 70%;
}

/* ==============================
   VOICE
============================== */
.voice__curve {
  line-height: 0;
  font-size: 0;
}

#sectionCurve {
  display: block;
  width: 100%;
  height: 110px;
  background: transparent;
  vertical-align: bottom;
}

#sectionCurve path {
  fill: #a8d8d3;
}

.voiceWrap {
  overflow: hidden;
}

.voice__article {
  position: relative;
  z-index: 5;
  margin-top: 50px;
}

/* .pin-spacer {

  background: url(../images/voice_spaer2_img.webp) no-repeat center top;
  background-size: contain;
} */

.white__base .section__title--ja {
  color: #1C4446;
}

.white__base .section__title--ja::after {
  background: #C7E5BE;
}

.white__base .section__title--en {
  color: #C7E5BE;
}

.voice-draw {
  width: 80%;
  margin: 40px auto 0;
  position: relative;
  z-index: 1;
}

#voiceSvg {
  display: block;
  width: 100%;
  height: auto;
}

#voiceSvg .cls-1 {
  fill: none;
  stroke: #1C4446 !important;
  stroke-width: 2 !important;
}

.voice__stage {
  position: relative;
  overflow: hidden;
  padding: 0 ;
}

.voice__stage .section__title--ja {
  padding-bottom: 40px;
  margin-bottom: 20px;
}

.voice__stage .section__title--ja::after {
  background: #fff;
  bottom: 20px;
}

.voice__stage .section__title--en {
  position: absolute;
  top: 40px;
  right: 20px;
  z-index: 2;
  font-size: 3.2rem;
  line-height: 0.95;
   transform: rotate(-13deg) translateY(5px);
  color: #C7E5BE;
}

.voice__inner
.voice__article--title{
  margin-bottom: 8svh;
}
.voice__track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 0 16px;
  /* margin-bottom: 42px; */
  margin-bottom: 16svh;
  will-change: transform;
}

.voice__item {
  flex: 0 0 72vw;
  max-width: 280px;
}

.voice__contens {
  width: 100%;
  aspect-ratio: 564 / 460;
  background: url(../images/voice_window_close.png) no-repeat center center / cover;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  font-size: 1.4rem;
}

.voice__item.is-open .voice__contens {
  background-image: url(../images/voice_window.png);
}

.voice__contens--text {
  width: 60%;
  /* margin-top: 30px; */
  margin-top: 25%;
  line-height: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.voice__item.is-open .voice__contens--text {
  opacity: 1;
}

.voice__contens--place {
  font-size: 2rem;
  color: #fff;
  text-align: center;
}

.voice__inner {
  margin-top: -2px;
  padding-bottom: 32px;
  background: linear-gradient(#a8d8d3, #7ABBB7);
  min-height: 80svh;
   position: relative;
}

.voice__inner--text {
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
  /* padding-bottom: 50px; */
}

/* ==============================
   PRODUCTS
============================== */
.products__contents {
  background: #F9FBF2;
  padding-top: 70px;
}

.products__contents--item {
  padding-bottom: 100px;
}

.products__contents--title {
  font-size: 1.6rem;
  color: #1C4446;
  margin-bottom: 23px;
}

.products__contents--img {
  margin-bottom: 32px;
  border-radius: 8px;
  overflow: hidden;
}

.products__contents--text {
  padding: 0 32px;
  font-size: 1.4rem;
  line-height: 1.8;
  margin-bottom: 14px;
}

/* ==============================
   CTA
============================== */
.cta--01 {
  position: relative;
  background: url(../images/cta_01.webp) no-repeat center center / cover;
  padding: 100px calc(50% - 130px);
}

.cta--01::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 86%;
  top: calc(50% - 43%);
  left: calc(50% - 45%);
  border: 4px solid rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.cta__btn--02 {
  display: inline-block;
  width: 260px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  text-align: center;
  border-radius: 8px;
  font-size: 2.4rem;
  font-weight: 700;
  padding: 3px 0 10px;
}

.cta__name {
  font-size: 3.2rem;
  letter-spacing: 0.1em;
}

.cta--02 {
  display: none;
}

/* ==============================
   EVERYDAY
============================== */
.everyday__bk {
  background: #A8D3D1;
}

.everyday__contents {
  position: relative;
  background: #A8D3D1;
  padding-top: 50px;
  padding-bottom: 120px;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

.everyday__contents .section__title--ja {
  line-height: 1.7;
  margin-bottom: 50px;
}

.everyday__contents .section__title--ja::after {
  bottom: -8px;
}

.everyday__contents--img {
  position: relative;
  width: 84%;
  aspect-ratio: 16 / 17;
  overflow: hidden;
  margin-bottom: 24px;
}

.everyday-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.everyday-img:first-child {
  opacity: 1;
}

.contents__text {
  font-size: 1.4rem;
  line-height: 1.8;
  margin-bottom: 24px;
}

.list {
  padding-left: 0;
  font-size: 1.4rem;
  line-height: 1.8;
  padding-bottom: 30px;
}

.list__contents {
  position: relative;
  padding-left: 28px;
}

.list__contents::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 16px;
  height: 16px;
  background: url("../images/list_01.webp") no-repeat center / contain;
}

/* ==============================
   GIFT
============================== */
.gift__bk {
  background: #E9EFEA;
}

.gift__contents {
  /* background: #E9EFEA; */
  padding-top: 50px;
  padding-bottom: 70px;
}

.gift__contents .section__title--ja {
  color: #426465;
}

.gift__contents .section__title--ja::after {
  background: #426465;
  top: 38px;
}

.gift__contents .section__title--en {
  color: #426465;
  font-size: 6.4rem;
}

.gift__contents .everyday__contents--img {
  margin: 0 0 24px auto;
}

.gift__contents .list__contents::before {
  background: url("../images/list_02.webp") no-repeat center / contain;
}

/* ==============================
   AUTO SLIDE
============================== */
.auto-slide {
  padding: 0;
  overflow: hidden;
  s
}

.auto-slide__wrap {
  overflow: hidden;
}

.auto-slide__track {
  display: flex;
  width: max-content;
}

.auto-slide__item {
  flex: 0 0 180px;
  width: 180px;
  height: 180px;
}

.auto-slide__item img,
.auto-slide__item a {
  width: 100%;
  height: 100%;
}

.auto-slide__item img {
  object-fit: cover;
  transition: 0.3s;
}

.auto-slide__item img:hover {
  opacity: 0.7;
  
}
.auto-slide__item p{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
 background: rgba(0,0,0,0.2);
color: #fff;
  text-align: center;
    font-size: 1.2rem;
  line-height: 1.8;
  pointer-events: none;
} 

/* ==============================
   CHARM
============================== */
.charm__contents {
  position: relative;
  z-index: 0;
  padding: 70px 0 200px;
}

.charm__contents::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/charm_bk.webp) no-repeat center center / cover;
  opacity: 0.7;
  z-index: -1;
}

.charm__contents .section__title--en {
  color: #fff;
}

.charm__contents .section__title--ja {
  line-height: 1.7;
  margin-bottom: 50px;
}

.charm__contents .section__title--ja::after {
  bottom: -8px;
  background: #fff;
}

.charm__contents--text {
  font-size: 1.4rem;
  line-height: 1.8;
  margin-bottom: 80px;
}

.charm__contents--title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #426465;
}

.charm__contents--block {
  max-width: 500px;
  margin: 0 auto;
}

.charm__contents--img {
  width: 60%;
}

.charm_02,
.charm_04 {
  margin-left: auto;
}

/* ==============================
   MESSAGE
============================== */
.message__contents {
  position: relative;
  background: #fff;
  z-index: 3;
}

.messageBk {
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
  z-index: 0;
}

.messageBk img {
  width: 100%;
}

.message__contents .section__title--ja,
.message__contents .section__title--en {
  margin-top: -50px;
}

.message__contents--text {
  position: relative;
  font-size: 1.4rem;
  margin-bottom: 24px;
}

.profile {
  display: flex;
  align-items: flex-end;
}

.artist__name {
  width: 50%;
  font-size: 1.4rem;
  padding-bottom: 70px;
}

.name {
  font-family: "Tsukimi Rounded", sans-serif;
  font-size: 2rem;
}

.profile__img {
  width: 50%;
  position: relative;
  z-index: 30;
  padding-bottom: 16px;
}

.profile__img img {
  width: 80%;
}

/* ==============================
   FOOTER
============================== */
#footer {
  background: #7ABBB7;
  text-align: center;
  color: #fff;
  padding: 24px 0;
}

#footer p {
  font-size: 1.2rem;
  letter-spacing: 0.17em;
}

/* ==============================
   SMALL DEVICES
============================== */
@media screen and (max-width: 380px) {
  .mv__sub {
    margin-top: -3.5svh;
  }

  .mv__main--title {
    margin-bottom: 8px;
  }

  .mv__main--text {
    line-height: 1.8;
  }

  .everyday__contents {
    height: auto;
  }
}


/* ==============================
   タブレット ipad mini
============================== */
@media screen and (min-width: 768px) {
  body {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .wrapper {
    max-width: 720px;
    padding: 0 30px;
  }

  .section__title--ja {
    font-size: 2.4rem;
  }

  .section__title--ja::after {
    bottom: -16px;
    width: 3em;
  }

  .section__title--en {
    font-size: 8rem;
    transform: rotate(-13deg) translateY(-60px);
  }

  .section--text {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .sp-only {
    display: none;
  }

  .tab-only {
    display: block;
  }

  /*  タブレット  MV */

  .mv__visual {
    min-height: 90svh;
  }

  .mv__Industry--en {
    font-size: 4.8rem;
    margin-bottom: 16px;
  }

  .mv__Industry--ja {
    font-size: 4rem;
    letter-spacing: 0.25em;
  }

  .mv__Industry--ja::before {
    width: 96px;
    height: 96px;
    top: -16px;
    right: 14px;
  }

  .mv__sub--01 {
    top: 2svh;
    left: 17%;
  }

  .mv__sub--02 {
    top: 8svh;
    left: 11%;
  }

  .mv__sub--03 {
    top: 15svh;
    left: 5%;
  }

  .mv__sub--text {
    padding: 10px 20px;
    font-size: 2rem;
    font-weight: bold;
  }

  .mv__main--title {
    font-size: 3rem;
  }

  .mv__main--text {
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    line-height: 2.19;
    padding-left: 1em;
  }

  .mv__bottom {
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    z-index: 1;
  }



  .mv__btn {
    position: absolute;
    left: 50%;
    bottom: 23px;
    display: inline-block;
    background: #383838;
    color: #fff;
    text-align: center;
    font-size: 2rem;
    line-height: 1.5;
    padding: 6px 16px 12px;
    z-index: 2;
  }

  .mv__item {
    left: -5%;
    top: -200px;
    width: 40%;
  }
.scroll-indicator {
  right: 40%;
}

.scroll-line {
  height: 80px;
}
  /*  タブレット 
    飾ってみて、届いた声  */

  .voice__article {
    margin-top: 70px;
    padding-bottom: 140px;
  }

  .voice-draw {
    width: min(700px, 70%);
    margin-top: 56px;
  }

  .voice__stage {
    padding-top: 40px;
    padding-bottom: 0 !important;

  }

  .voice__article .section__title--en {
    transform: rotate(-13deg) translateY(-80px);
    position: relative;
    z-index: 5000;
  }

  .voice__stage .section__title--en {
    top: 120px;
    right: 40px;
    font-size: 4.8rem;
  }

  .voice__track {
    gap: 24px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .voice__item {
    flex: 0 0 420px;
    max-width: none;
  }

  .voice__inner--text {
    padding: 0 40px;
    font-size: 1.3rem;
  }

  .pin-spacer {
    background-size: 78% auto;
  }

  .voice__stage .wrapper {
    max-width: 100%;
    margin: -2px auto 0;
    padding-bottom: 70px;
  }

  /* 多肉のインテリア */

  .products__contents {
    padding-top: 100px;
  }

  .products__contents--flex {
    display: flex;
    gap: 20px;
  }

  .products__contents--title {
    font-size: 1.8rem;
    margin-bottom: 32px;
  }

  .products__contents--text {
    padding: 0 16px;
    font-size: 1.6rem;
    margin-bottom: 24px;
  }

  /* 暮しの中でこんなふうに
*/

  .everyday__contents .section__title--ja::after {
    bottom: -16px;
  }

  .everyday__contents--img {
    width: 72%;
    margin-bottom: 24px;
  }

  .everyday__contents {
    padding-top: 88px;
  }

  .contents__text {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  .list {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  /* GIFT */
  .gift__contents {
    padding-top: 88px;
  }

  .gift__contents .section__title--en {
    font-size: 10rem;
  }

  .gift__contents .section__title--ja::after {
    top: 52px
  }

  /*AUTO SLIDE  */
  .auto-slide__item {
    flex: 0 0 280px;
    width: 280px;
    height: 280px;
  }
.auto-slide__item p{
    font-size: 1.6rem;
  line-height: 2;
} 


  /*  CHARM */
  .charm__contents {
    padding: 88px 0 200px;
  }

  .charm__contents--text {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 80px;
  }

  .charm__contents--title {
    font-size: 1.6rem;
  }

  /*  MESSAGE */

  .message__contents--text {
    max-width: 29em;
    margin: 0 auto 24px;
    font-size: 1.6rem;
  }

  .artist__name {
    width: 50%;
    font-size: 1.6rem;
    padding-bottom: 70px;
  }

  .name {
    font-size: 2.8rem;
  }

  .message__contents .voice__article--title {
    display: block;
    margin-top: 60px;
  }

  .message__contents .section__title--en {
    transform: rotate(-13deg) translateY(-185px);
  }

  .message__contents .section__title--ja {
    text-align: center;
    transform: translateY(-100px);
  }

  .message__contents .section__title--ja::after {
    left: calc(50% - 36px);
    right: calc(50% - 36px);
  }

  .profile {
    max-width: 29em;
    margin: 0 auto 24px;
  }
}

/* ==============================
  タブレット ipad mini 横
============================== */
@media screen and (min-width: 1024px) {
  .wrapper {
    max-width: 840px;
    padding: 0 30px;
  }

  .menu__btn {
    display: none;
  }

  .menu {
    position: static;
    left: 0;
    height: 80px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    color: #4e4e4e;
    align-items: center;
  }

  .menu a {
    color: #4e4e4e;
  }

  .menu__title {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 0;
    color: #1C4446;
    padding-left: 10px;
    position: relative;
  }

  .menu__title::after {
    position: absolute;
    content: "";
    display: block;
    top: -20px;
    left: 3.5em;
    width: 40px;
    height: 40px;
    background-image: url("../images/pc_header_img.png");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
  }

  .menu__list {
    display: flex;
    margin-top: 0;
    padding-left: 0;
    align-items: center;
  }

  .menu__list--contents {
    font-size: 1.4rem;
    margin-bottom: 0;
    padding-right: 10px;
    position: relative;
  }

  .menu__list--contents::after {
    position: absolute;
    display: block;
    content: "";
    width: 0;
    height: 1px;
    left: 0;
    bottom: -4px;
    background: #C7E5BE;
    transition: width 0.3s;
  }

  .menu__list--contents:hover::after {
    width: 90%;
  }

  .header__btn--contner {
    display: block
  }

  .header__btn {
    display: inline-block;
    background: #383838;
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.5;
    padding: 5px 10px 10px;
    z-index: 2;
  }

  .header__btn--contner a {
    color: #fff;
  }

  .header__btn--frist {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
  }

  /* MV */
  .mv {
    min-height: calc(100svh - 70px);
  }

  .mv__visual {
    min-height: calc(100svh - 70px);
  }

  .mv__bg {
    background: url(../images/mv_01_pc.webp) no-repeat center center / cover;
  }

  .mv .wrapper {
    max-width: 100%;
    padding: 0 10px;
  }

  .mv__sub--01 {
    top: -3svh;
    left: 28%;
  }

  .mv__sub--02 {
    top: 7svh;
    left: 21%;
  }

  .mv__sub--03 {
    top: 18svh;
    left: 18%;
  }

  .mv__main {
    display: inline-block;
    margin-top: 50svh;
    margin-left: 25%;
  }

  .mv__item {
    left: -4%;
    top: -220px;
    width: 24.5%;
  }

  .pin-spacer {
    background-size: 55% auto;
  }

  /* MV タイトル BTN 非表示 */
  .mv__main--title,
  .mv__btn {
    display: none;
  }

  /* CTA */
  .cta--01 {
    display: none;
  }

  .cta--02 {
    display: block;
  }

  .cta--02 a:hover {
    transform: scale(1);
  }

  .cta--02flex {
    display: flex;
    justify-content: stretch;

  }

  .cta--02flex--left {
    width: 50%;
  }

  .cta--02flex--left img {
    opacity: 0.9;
  }

  .cta--02flex--right {
    width: 50%;
    background-color: #989898;
    display: flex;
    align-items: center;
  }

  .cta--02--btn {
    width: 55%;
    min-width: 300px;
    display: block;
    font-size: 3.2rem;
    font-weight: bold;
    color: #4e4e4e;
    background-color: #fff;
    text-align: center;
    align-items: center;
    margin: 0 auto;
    padding: 25px 0 28px;
    border-radius: 8px;
    transition: 0.3s;
  }

  .cta--02--btn:hover {
    transform: scale(0.96);
  }

  .cta--02--name {
    font-size: 3.6rem;
  }

  /* 暮しの中でこんなふうに
*/
  .everyday__contents .voice__article--title {
    flex-direction: column-reverse;
  }

  .everyday__contents {
    padding-top: 120px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 0;
    max-width: 840px;
    margin: 0 auto;
  }

  /* タイトル：左上 */
  .everyday__contents .voice__article--title {
    grid-area: 1 / 1 / 2 / 2;
    margin-top: 50px;
  }

  /* テキスト：左下 */
  .everyday__contents .wrapper:last-child {
    grid-area: 2 / 1 / 3 / 2;
  }

  /* 画像：右全部（上下2段使う） */
  .everyday__contents .everyday__contents--img {
    grid-area: 1 / 2 / 3 / 3;
  }

  .gift__contents .voice__article--title {
    display: flex;
    flex-direction: column-reverse;
  }

  .gift__contents .section__title--en {
    align-self: flex-end;
  }

  .gift__contents {
    display: grid;
    height: 100svh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 40px 0;
    max-width: 840px;
    margin: 0 auto;
  }

  /* タイトル：右上 */
  #gift .voice__article--title {
    grid-area: 1 / 2 / 2 / 3;
    margin-top: 50px;

  }

  /* テキスト：右下 */
  #gift .wrapper:last-child {
    grid-area: 2 / 2 / 3 / 3;
  }

  /* 画像：左全部 */
  #gift .everyday__contents--img {
    grid-area: 1 / 1 / 3 / 2;
  }

  .everyday__contents--img {
    position: relative;
    width: 100%;
    aspect-ratio: 547 / 663;
    overflow: hidden;
    margin-bottom: 24px;
  }

  /*  CHARM */
  .charm__contents {
    padding: 130px 0 300px;
  }

  .charm__contents--block {
    max-width: 840px;
    margin: 0 auto;
  }

  /*  MESSAGE */

  .messageBk {
    top: -220px;
  }

  .message__contents .section__title--en {
    transform: rotate(-13deg) translateY(-255px);
  }

  .artist {
    position: relative;
    z-index: 1;
  }

}

@media screen and (min-width: 1320px) {

  /* header */
  .wrapper {
    max-width: 1110px;
    padding: 0 30px;
  }

  .menu {
    max-width: 1320px;
    padding: 0 20px;
    margin: 0 auto;
    height: 126px;
  }

  .menu__title {
    font-size: 3.8rem;
  }

  .menu__title::after {
    top: -28px;
    left: 3.8em;
    width: 50px;
    height: 50px;
  }

  .menu__list--contents {
    padding-right: 16px;
    font-weight: bold;
  }

  .header__btn {
    font-size: 1.4rem;
    padding: 9px 14px 14px;
    margin-left: 20px;

  }

  .header__btn--frist {
    font-size: 2rem;
    letter-spacing: 0.1em;
  }

  /* mv */
  .mv__bg .wrapper {
    max-width: 1320px;
    padding: 0 20px;
    margin: 0 auto;
  }

  .mv__main {
    display: block;
    margin: 0 auto;
    max-width: 1320px;
    padding-left: 420px;
    transform: translateY(420px);
  }

  .mv__sub {
    margin: 0 auto;
    max-width: 1320px;
  }

  .mv__main--text {
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 1.8;
  }

  .mv__sub--01 {
    top: -3svh;
    left: calc(50% - 660px + 350px);
  }

  .mv__sub--02 {
    top: 8svh;
    left: calc(50% - 660px + 290px);
  }

  .mv__sub--03 {
    top: 20svh;
    left: calc(50% - 660px + 250px);
  }


  .mv__bottom {
    max-width: 1320px;
    padding: 0 20px 100px;
    margin: 0 auto;
  }

  .mv__item {
    width: 30%;
    top: -300px;
    left: 20px;
  }


  .voice_flex {
    display: flex;
  }

  .voice_flex--text {
    display: block;
    max-width: 60%;
  }

  .voice-draw {
    max-width: 40%;
  }

  .voice__inner .voice__article--title {
    justify-content: center;
  }

  .voice__inner .voice__article--title .section__title--ja::after {
    left: calc(50% - 1.5em);
    right: calc(50% - 1.5em);
  }

  #voice {
    overflow: hidden;
    background: linear-gradient(#a8d8d3, #7ABBB7);
  }

  /* 多肉のインテリア */

  .products__contents--flex {
    gap: 64px;
  }


  .everyday__contents {
    padding-top: 120px;
    max-width: 1110px;
    overflow: hidden;
    margin-bottom: -5px;
    box-sizing: border-box;
  }

  .gift__contents {
    padding-top: 120px;
    max-width: 1110px;
  }

  .everyday__bk {
    background-color: #A8D3D1;
    overflow: hidden;
  }

  .gift__bk {
    padding-bottom: 120px;
  }

  /*  CHARM */
  .charm__contents {
    padding: 130px 0 400px;
  }

  .charm__contents--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    row-gap: 60px;

  }

  .charm_02 {
    transform: translateY(-120px) translateX(-120px);

  }

  .charm_03 {
    transform: translateX(120px);

  }

  .charm_04 {
    transform: translateY(-120px);
  }

  /* MESSAGE */

  .messageBk {
    position: absolute;
    top: -220px;
  }

  .message__contents .section__title--en {
    transform: rotate(-13deg) translateY(-310px);
  }

  .profile {
    padding-bottom: 120px;
  }

  /* ==============================
   FOOTER
============================== */
  #footer {
    background: #7ABBB7;
    text-align: center;
    color: #fff;
    padding: 24px 0;
  }

  #footer p {
    font-size: 2rem;
    letter-spacing: 0.17em;
  }

}