@charset "UTF-8";

/* 共通 */
body {
  margin: 0;
  padding: 0;
}

body * :not(.site-header *, .drawer-menu *, .fv *, .site-footer *) {
  transform: matrix(1, 0, 0, 1, 0, 50);
  opacity: 0;
}

/* header fv footer 以外の要素に .is-shown が付与されたら */
body * :not(.site-header *, .drawer-menu *, .fv *, .site-footer *).show {
  transform: matrix(1, 0, 0, 1, 0, 0);
  opacity: 1;
  transition: 1s;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.sp-only {
  display: none;

  @media screen and (max-width:780px) {
    display: block;
  }
}

.pc-only {
  display: block;

  @media screen and (max-width:780px) {
    display: none;
  }
}



.about__text {
  font-family: "Cormorant Infant", serif;
  color: #002e60;
  line-height: 3.1307550645vw;
  font-size: 1.48vw;
  font-weight: 500;
  text-align: center;
}

.water__block--reverse .about__text {
  padding-right: 0;
  padding-bottom: 3vw;
  font-size: 1.5vw;
  line-height: 1.5;

  @media screen and (max-width:780px) {
    font-size: 4vw;
    max-width: 95%;
    line-height: 1.6;
  }
}

.water__block--reverse .about__text span {
  font-size: 1.5vw;

  @media screen and (max-width:780px) {
    font-size: inherit;
  }

}

@media screen and (max-width:780px) {
  .about__text {
    font-size: 4.8717948718vw;
    line-height: 8.7179487179vw;
  }
}

.about__text span {
  /* font-size: 1.7495395948vw; */
  font-family: "Cormorant Infant", serif;
  color: #002e60;
  font-weight: bold;
}

@media screen and (max-width:780px) {
  .about__text span {
    font-size: 4.8717948718vw;
  }
}

.only_sp {
  display: none;
}

@media screen and (max-width:780px) {
  .only_sp {
    display: block;
  }
}



/* --------------------------------------------- */
.fv {
  width: 100%;
  height: 100vh;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
}

/* 背景動画 */
.fv_movie_pc,
.fv_movie_sp {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width:780px) {
  .fv_movie_pc {
    display: none;
  }
}

.fv_movie_sp {
  display: none;
}

@media screen and (max-width:780px) {
  .fv_movie_sp {
    display: block;
  }
}

/* 全画面動画 */
.fv_full-size-movie {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 1s visibility 1s;
  transition: opacity 1s visibility 1s;
}

.fv_full-size-movie.is-active {
  opacity: 1;
  visibility: visible;
}

.fv_full-size-movie_inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.fv_fs-movie_pc,
.fv_fs-movie_sp {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (max-width:780px) {
  .fv_fs-movie_pc {
    display: none;
  }
}

.fv_fs-movie_sp {
  display: none;
}

@media screen and (max-width:780px) {
  .fv_fs-movie_sp {
    display: block;
  }
}

.fv_inner {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 41.2438625205vh;
}

.fv-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 200;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 1;
  text-align: center;
}


.fv-logo {
  line-height: 1;
  position: relative;
  width: min(365px, calc(365 / 1222 * 100vh));
  padding-bottom: min(72px, calc(72 / 1222 * 100vh));
}

@media screen and (max-width:780px) {
  .fv-logo {
    width: min(calc(365 / 780 * 100vw), calc(365 / 1222 * 100vh));
    padding-bottom: min(calc(72 / 780 * 100vw), calc(72 / 1222 * 100vh));
  }
}

.fv-logo img {
  width: 100%;
}

.fv-logo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: min(211px, calc(211 / 1222 * 100vh));
  height: 1px;
  background-color: #fff;
}

@media screen and (max-width:780px) {
  .fv-logo::after {
    width: min(calc(211 / 780 * 100vw), calc(211 / 1222 * 100vh));
  }
}



.page-logo {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 153px;
  max-width: 274px;
  margin-inline: auto;


  @media screen and (max-width: 780px) {
    max-width: 185px;
    padding-top: 28.5vw;
  }
}

.page-logo::after {
  content: "";
  display: block;
  max-width: 160px;
  width: 100%;
  height: 1px;
  margin-top: 54px;
  background-color: #002e60;

  @media screen and (max-width: 780px) {
    max-width: 105px;
    margin-top: 34px;
  }
}

.page-title {
  line-height: 1;
  font-family: "Cormorant Infant", serif;
  color: #fff;
  font-size: min(84px, calc(84 / 1222 * 100vh));
  font-weight: 300;
  margin-top: min(56px, calc(56 / 1222 * 100vh));
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media screen and (max-width:780px) {
  .page-title {
    font-size: min(calc(84 / 780 * 100vw), calc(84 / 1222 * 100vh));
    margin-top: min(calc(56 / 780 * 100vw), calc(56 / 1222 * 100vh));
  }
}

.page-title-navy {
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.page-titleblock {
  margin: 0 auto;
  padding-top: 200px;
  text-align: center;
  width: 100%;
  display: block;
}

.page-title-navy {
  line-height: 1;
  font-family: "Cormorant Infant", serif;
  color: #002E60;
  font-size: min(84px, calc(95 / 1222 * 100vh));
  font-weight: 300;
  margin-top: min(56px, calc(56 / 1222 * 100vh));
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media screen and (max-width:780px) {

  .page-titleblock {
    margin: 0 auto;
    padding-top: 100px;
    text-align: center;
    width: 100%;
    display: block;
  }

  .page-title-navy {
    font-size: min(calc(84 / 780 * 100vw), calc(84 / 1222 * 100vh));
    margin-top: min(calc(56 / 780 * 100vw), calc(56 / 1222 * 100vh));
  }
}

/* Water */
.page-titleblock--water {
  padding-top: 0;
}

.page-title-navy--water {
  margin-top: 36px;

  @media screen and (max-width:780px) {
    margin-top: 6.7vw;
  }
}


.fv-btn {
  /* margin-top: 4.9099836334vh; */
  /* padding: min(17px, calc(17 / 1222 * 100vh)) min(28px, calc(28 / 1222 * 100vh)); */
  margin-top: 1.7vw;
  padding: .35vw .9vw;
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: min(24px, calc(24 / 1222 * 100vh));
}

@media screen and (max-width:780px) {
  .fv-btn {
    margin-top: min(calc(60 / 780 * 100vw), calc(60 / 1222 * 100vh));
    font-size: min(calc(24 / 780 * 100vw), calc(24 / 1222 * 100vh));
    padding: min(calc(17 / 780 * 100vw), calc(17 / 1222 * 100vh)) min(calc(28 / 780 * 100vw), calc(28 / 1222 * 100vh));
  }
}

/* --------------------------------------------------- 
    introduction
--------------------------------------------------- */
.introduction {
  position: relative;
  height: auto;
}

.intro_inner {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.intro_inner__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media screen and (max-width:780px) {
  .intro_inner__top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

.intro_inner__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.intro_image {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width:780px) {
  .intro_image {
    width: 100%;
  }
}

.intro_image:nth-of-type(1) {
  margin-top: min(92px, calc(92 / 2172 * 100vw));
}

@media screen and (max-width:780px) {
  .intro_image:nth-of-type(1) {
    margin-top: min(92px, calc(101 / 780 * 100vw));
  }
}

.intro_image:nth-of-type(2) {
  margin-top: min(262px, calc(262 / 2172 * 100vw));
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

@media screen and (max-width:780px) {
  .intro_image:nth-of-type(2) {
    margin-top: min(95px, calc(95 / 780 * 100vw));
  }
}

.intro_image img {
  width: 31.5837937385vw;
}

@media screen and (max-width:780px) {
  .intro_image img {
    width: 61.4102564103vw;
  }
}

.intro_texts {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10.7274401473vw;
  padding-top: 9.6685082873vw;
}

.intro_text1 {
  margin-top: 9.6685082873vw;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (max-width:780px) {
  .intro_text1 {
    margin-top: 12.6923076923vw;
  }
}

.intro_text2 {
  padding-top: 4.6040515654vw;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media screen and (max-width:780px) {
  .intro_text2 {
    padding-top: 12.8205128205vw;
  }
}

/* ---------------------------------------------------
    Pillar
--------------------------------------------------- */
/*
.pillar {
  width: 100%;
  height: 14.7329650092vw;
  background: url(../img/pillar.png) no-repeat center center/cover;
  margin-top: 5.3867403315vw;
  margin-bottom: 6.5377532228vw;
}

@media screen and (max-width:780px) {
  .pillar {
    height: 34.6153846154vw;
    margin-top: 16.9230769231vw;
    margin-bottom: 16.1538461538vw;
  }
}

*/
.pillar {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 212;
  /* 元画像の比率に合わせて調整 */
  background: url(../img/pillar-pc.webp) no-repeat center center / contain;
  margin-top: 5.39vw;
  margin-bottom: 6.54vw;
}

@media screen and (max-width: 780px) {
  .pillar {
    width: 100%;
    background: url(../img/pillar-sp.webp) no-repeat center center / contain;
    aspect-ratio: 780 / 255;
    /* スマホ用画像の比率に合わせて調整 */
    margin-top: 16.92vw;
    margin-bottom: 16.15vw;
  }
}

.pillar-vision {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 212;
  /* 元画像の比率に合わせて調整 */
  background: url(../img/vision01.webp) no-repeat center center / contain;
  margin-top: 5.39vw;
  margin-bottom: 6.54vw;
}

@media screen and (max-width: 780px) {
  .pillar-vision {
    background: url(../img/vision01sp.webp) no-repeat center center / contain;
    aspect-ratio: 390 / 236;
    /* スマホ用画像の比率に合わせて調整 */
    margin-top: 16.92vw;
    margin-bottom: 16.15vw;
  }
}


/* ---------------------------------------------------
    Main Content
--------------------------------------------------- */
.mc_top_images {
  margin-top: 5.4788213628vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 4.3738489871vw;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (max-width:780px) {
  .mc_top_images {
    margin-top: 17.1794871795vw;
    gap: 5.5128205128vw;
  }
}

.mc_top_images img {
  width: 19.8895027624vw;
}

@media screen and (max-width:780px) {
  .mc_top_images img {
    width: 25.1282051282vw;
  }
}

.mc_middle {
  margin-top: min(232px, calc(232 / 2172 * 100vw));
  position: relative;
  height: 100%;
  padding-bottom: min(122px, calc(122 / 2172 * 100vw));
}

@media screen and (max-width:780px) {
  .mc_middle {
    padding-bottom: min(507px, calc(507 / 780 * 100vw));
  }
}

.mc_texts {
  margin-top: min(295px, calc(295 / 2172 * 100vw));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: min(136px, calc(136 / 2172 * 100vw));
}

@media screen and (max-width:780px) {
  .mc_texts {
    margin-top: min(526px, calc(526 / 780 * 100vw));
    gap: min(136px, calc(136 / 780 * 100vw));
  }
}

.mc_step-text {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: start;
  line-height: 1;
}

@media screen and (max-width:780px) {
  .mc_step-text {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}

.mc_step-text:nth-of-type(1) {
  margin-left: 17.5414364641vw;
}

@media screen and (max-width:780px) {
  .mc_step-text:nth-of-type(1) {
    margin-left: 0;
  }
}

.mc_step-text:nth-of-type(2) {
  margin-left: 32.7808471455vw;
}

@media screen and (max-width:780px) {
  .mc_step-text:nth-of-type(2) {
    margin-left: 0;
  }
}

.mc_step-text:nth-of-type(3) {
  margin-left: 43.876611418vw;
}

@media screen and (max-width:780px) {
  .mc_step-text:nth-of-type(3) {
    margin-left: 0;
  }
}

.mc_step-text:nth-of-type(4) {
  margin-left: 50.5524861878vw;
}

@media screen and (max-width:780px) {
  .mc_step-text:nth-of-type(4) {
    margin-left: 0;
  }
}

.mc_middle_images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%;
}

@media screen and (max-width:780px) {
  .mc_middle_images {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.mc_middle_image1 {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.mc_middle_image1 img {
  width: 35.3591160221vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -o-object-fit: contain;
  object-fit: contain;
  margin-top: 9.8526703499vw;
}

@media screen and (max-width:780px) {
  .mc_middle_image1 img {
    width: 78.3333333333vw;
    margin-top: 24.8717948718vw;
  }
}

@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 780px) {
    .mc_middle_image1 img {
      width: 82vw; /* ← iOS Safariだけ上書き */
      margin-top: 0vw;
    }
  }
}

.mc_middle_image2 {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width:780px) {
  .mc_middle_image2 {
    width: 78.3333333333vw;
  }
}

.mc_middle_image2 img {
  width: 35.3591160221vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -o-object-fit: contain;
  object-fit: contain;
  margin-top: 31.9981583794vw;
}

@media screen and (max-width:780px) {
  .mc_middle_image2 img {
    width: 78.3333333333vw;
  }
}

@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 780px) {
    .mc_middle_image2 {
      width: 100vw;
      display: flex;
     
      padding-top: 15vw; /* ← iOS専用の余白調整。marginではなくpaddingで */
		padding-bottom:15vw;
    }

    .mc_middle_image2 img {
      width: 82vw;
      margin-top: 0 !important; /* ← margin-topを完全無効に */
      height: auto;
      object-fit: contain;
    }
  }
}



.mc_bottom {
  margin-top: 8.6556169429vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 9.3462246777vw;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (max-width:780px) {
  .mc_bottom {
    margin-top: 18.7179487179vw;
    gap: 17.4358974359vw;
  }
}

@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 780px) {
    .mc_bottom {
      margin-top: 0vw;
    }
  }
}

.mc_bottom img {
  width: 50.138121547vw;
}

@media screen and (max-width:780px) {
  .mc_bottom img {
    width: 82.0512820513vw;
  }
}

.page-link-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 13.5359116022vw;

}

@media screen and (max-width:780px) {
  .page-link-button {
    margin-top: 20.2564102564vw;
  }
}

.button-nonspace {
  margin-top: 0vw !important;
}

.button-lowspace {
  margin-top: 2vw !important;
}

.link_btn {
  padding: 15px 41px 13px 42px;
  border: 1px solid #002e60;
  color: #002e60;
  position: relative;
  cursor: pointer;
  min-width: 100px;
  font-family: "Montserrat", sans-serif;
}

.link_btn a,
.link_btn a:hover,
.link_btn a:visited {
  color: #002e60;
}

.link_btn::before,
.link_btn::after {
  content: "";
  position: absolute;
  top: 0.3683241252vw;
  right: 0.4143646409vw;
}

.link_btn::before {
  width: 14px;
  height: 1px;
  background-color: #002e60;
}

.link_btn::after {
  width: 1px;
  height: 14px;
  background-color: #002e60;
}

@media screen and (max-width:780px) {
  .link_btn::before,
.link_btn::after {
  content: "";
  position: absolute;
  top: 1.3683241252vw;
  right: 1.4143646409vw;
}
}


/* --------------------------------------------------- 
    brand-concept
--------------------------------------------------- */

.pdtop {
  padding-top: 200px;
}

.textpd {
  padding-top: 100px;
}


.brand-colors__image {
  text-align: center;
  margin-bottom: 3vw;
}

.brand-colors__image img {
  display: inline-block;
  width: 50.138121547vw;
  height: auto;
}


@media screen and (max-width:780px) {
  .brand-colors__image img {
    width: 82.0512820513vw;
  }
}

.brand-colors__swatches {
  display: flex;
  justify-content: center;
  gap: 1vw;
  margin: 3vw 0;
}

.brand-colors__swatch {
  width: 6.5vw;
  height: auto;
  max-width: 100px;
}


.brand-colors__text {
  font-family: "Cormorant Infant", serif;
  color: #002e60;
  font-size: 1.475vw;
  line-height: 2.5vw;
  text-align: center;
  font-weight: 300;
}

.brand-colors__text span {
  font-size: 1.7495395948vw;
  font-family: "Cormorant Infant", serif;
  color: #002e60;
  font-weight: bold;
}

.brand-colors__title {
  font-family: "Cormorant Infant", serif;
  color: #002e60;
  font-size: 2vw;
  line-height: 3.5vw;
  margin-bottom: 1.5vw;
  font-weight: 500;
}

@media screen and (max-width: 780px) {
  .brand-colors__title {
    font-size: 5.5vw;
    line-height: 9vw;
  }
}

@media screen and (max-width: 780px) {
  .brand-colors__text {
    font-size: 4.8717948718vw;
    line-height: 8.7179487179vw;
  }

  .brand-colors__text span {
    font-size: 4.8717948718vw;
  }

  .brand-colors__swatches {
    flex-direction: column;
    align-items: center;
    gap: 2vw;
  }

  .brand-colors__swatch {
    width: 12vw;
    max-width: none;
  }
}


@media screen and (max-width: 780px) {
  .brand-colors {
    padding: 10vw 0;
  }

  .brand-colors__image img {
    max-width: 90vw;
  }

  .brand-colors__swatches {
    flex-direction: row;
    justify-content: center;
    gap: 6vw;
    /* 間隔を広げて読みやすく */
    margin: 6vw 0;
  }

  .brand-colors__swatch {
    width: 20vw;
    max-width: none;
  }

  .brand-colors__text {
    font-size: 4vw;
    line-height: 6.4vw;
    padding: 0 5vw;
    text-align: center;
  }

  .brand-colors__text span {
    font-size: 4vw;
  }

  .spbottom {
    padding-bottom: 3.9vw;
  }

  .spmbottom {
    margin-bottom: 5.9vw;
  }

}



.essence {
  padding: 5vw 0;
  color: #002e60;
}

.essence__block {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4vw;
  margin-bottom: 8vw;
  flex-wrap: nowrap;
}

/*
.essence__block--bottom {
  flex-direction: row-reverse !important;
}*/

.essence__img {
  flex: 0 0 40%;
  max-width: 23% !important;
}

section.essence .essence__img {
  max-width: 25%;
}


.essence__text {
  flex: 0 0 56%;
  max-width: 48%;
  font-family: "Cormorant Infant", serif;
  font-size: 1.475vw;
  line-height: 2.5vw;
  text-align: left;
  font-weight: 300;
}



.essence__text p {
  padding-top: 1.95vw;
}

.essence__text p.upspace {
  padding-top: 3.9vw;
}

.essence__text span {
  font-weight: bold;
}

.essence__title {
  font-family: "Cormorant Infant", serif;
  font-size: 2vw;
  line-height: 3.5vw;

  font-weight: 500;

}

.essence__block--bottom .essence__text p:nth-of-type(2) {
  margin-left: 15vw;
  text-align: left;
}

@media screen and (max-width: 780px) {
  .essence__block {
    flex-direction: column;
    gap: 6vw;
    margin-bottom: 10vw;
  }

  .essence__block--bottom .essence__img {
    order: -1;
    /* ← テキストより先に表示 */
  }

  .essence__img {
    max-width: 100vw;
    margin: 0 auto;
  }

  section.essence .essence__img {
    max-width: 60%;
    margin: 0 auto;
  }

  .essence__img img {
    width: 100%;
    height: auto;
    display: block;
  }

  .essence__img {
    flex: 0 0 100%;
    max-width: 60% !important;
  }

  section.essence .essence__img {
    max-width: 60%;
  }

  .essence__text {
    max-width: 90vw;
    margin: 0 auto;
    font-size: 4.6vw;
    line-height: 8vw;
    text-align: left;
  }

  .essence__title {
    font-size: 5.8vw;
    line-height: 9vw;
    margin-bottom: 5vw;
    text-align: center;
  }

  .essence__text span {
    font-weight: bold;
    font-size: 4.6vw;
  }

  .essence__block--bottom .essence__text p:nth-of-type(2) {
    margin-left: 15vw;
    text-align: left;
  }
}

.koji-value {
  padding: 5vw 0;
  overflow-x: hidden;
}

.koji-value__inner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

.koji-value__text {
  width: 50vw;
  margin-left: 10vw;
  font-family: "Cormorant Infant", serif;
  color: #002e60;
  font-size: 1.8vw;
  line-height: 3.2vw;
  text-align: left;
  box-sizing: border-box;
}

.koji-value__text span {
  font-weight: bold;
}

.koji-value__text p {
  margin: 0 0 2.5vw 0;
  margin-left: 10vw;
}

.koji-value__text p:nth-of-type(2) {
  margin: 0 0 2.5vw 0;
  padding-top: 50px;
}

.koji-value__img {
  width: 50vw;
  margin-right: -35vw;
}

.koji-value__img img {
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
}



@media screen and (max-width: 780px) {
  .koji-value__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8vw;
  }

  .koji-value__text {
    width: 90vw;
    margin: 0 auto;
    text-align: left;
    font-size: 4.8vw;
    line-height: 8vw;
    color: #002e60;
  }

  .koji-value__text span {
    font-weight: bold;
    font-size: 4.8vw;
  }

  .koji-value__text p {
    margin-bottom: 5vw;
  }

  .koji-value__img {
    width: 80vw;
    margin: 0 auto;
  }

  .koji-value__img img {
    width: 100%;
    height: auto;
    display: block;
  }
}



.professionals {
  padding: 110px 0 5vw;
  color: #002e60;
}


.professionals__ppagetitle {
  background-image: url(../img/professionals-title_bg.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 140px;
  padding-bottom: 140px;
  color: rgb(255, 255, 255);
  font-size: 50px;
  font-family: "Cormorant Infant";
  line-height: 1.2;
  text-align: center;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);

  @media screen and (max-width: 780px) {
    background-image: url(../img/professionals-title_bg_sp.png);
    background-position: top left;
    padding-top: 62px;
    padding-bottom: 62px;
    font-size: 32px;
  }
}

.professionals__block {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4vw;
  margin-bottom: 8vw;
  flex-wrap: nowrap;
  padding-top: 5vw;
}

.professionals__block--reverse {
  flex-direction: row-reverse;
}

.professionals__img {
  flex: 0 0 40%;
  max-width: 25%;
}

.professionals__text {
  flex: 0 0 48%;
  max-width: 48%;
  font-family: "Cormorant Infant", serif;
  font-size: 1.4vw;
  line-height: 2.8vw;
  text-align: left;
}

.professionals__text p {
  padding-top: 50px;
}

.professionals__text span {
  font-weight: bold;
}

.professionals__text__pdleft{
	padding-left:3.9vw;
}

.professionals__text__pdleft__high{
	padding-left:5.9vw;
}

.professionals__text__pdright{
	padding-right:3.9vw;
}


@media screen and (max-width: 780px) {

	.professionals__text__pdleft{
	padding-left:0vw;
}
	
	.professionals__text__pdleft__high{
	padding-left:0vw;
}
	
	.professionals__text__pdright{
	padding-right:0vw;
}
	
  .professionals {
    padding: 80px 0 5vw;
    color: #002e60;
  }

  .professionals__block {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 6vw;
    margin-bottom: 10vw;
  }

  .professionals__block--reverse {
    flex-direction: column-reverse;
    /* ← reverseも統一表示に */
  }

  .professionals__img {
	  max-width:80vw;
    margin: 0 auto;
  }
	
	.professionals__img-minimg{
		max-width:60vw !important;
	}

  .professionals__img img {
    width: 100%;
    height: auto;
    display: block;
  }

  .professionals__text {
    max-width: 85vw;
    margin: 0 auto;
    text-align: left;
    font-size: 4vw;
    line-height: 8vw;
  }

  .professionals__text p {
    margin-bottom: 6vw;
  }

  .professionals__text span {
    font-weight: bold;
	  font-size: 4vw;
  }
}

.water {
  padding: 6.5vw 0 13.5vw;
  color: #002e60;


  @media screen and (max-width: 780px) {
    padding: 18.75vw 0 3vw;
  }
}

.water__mainimg {
  text-align: center;
  margin-bottom: 7vw;
}

.water__mainimg img {
  width: 32.4vw;
  height: auto;
  display: block;
  margin: 0 auto;
  /* ← 中央配置 */
}

.water__maintext {
  text-align: center;
  font-family: "Cormorant Infant", serif;
  font-size: 1.475vw;
  line-height: 2.3vw;
  margin-bottom: 7vw;
  padding: 0 6vw;
  /* ← 左右の余白追加 */


  @media screen and (max-width: 780px) {
    line-height: 6.5vw;
  }
}

.water__block {
  display: flex;
  justify-content: center;
  align-items: center;
  /* ← ここを変更 */
  gap: 5.8vw;
  padding: 0 11.25vw;
}

.water__block--reverse {
  flex-direction: row-reverse;
  gap: 3vw;
  margin-top: -2.25vw;
  padding: 0 8.6vw 0 9.25vw;

}

.water__block--reverse .water__inner-offset {
  padding-left: 1.9vw;
}

.water__block--reverse .water__img {
  flex: 0 0 38.5%;
  max-width: 38.5%;

  @media screen and (max-width: 780px) {
    flex: 0 0 83%;
    max-width: 83%;
  }
}

.water__block--2 {
  @media screen and (max-width: 780px) {
    margin-top: 17vw;
  }

  .water__img {
    @media screen and (max-width: 780px) {
      max-width: 83%;
      margin-bottom: 10.5vw;
    }
  }

}

.water__block--4 {
  gap: 4.75vw;
  padding-top: 6vw;

  @media screen and (max-width: 780px) {
    margin-top: 17.5vw;
  }

  .water__img--offset {
    padding-left: 5vw;
  }

  .water__text {
    padding-bottom: .5vw;

    @media screen and (max-width: 780px) {
      margin-top: 11vw;
      max-width: 85%;
      width: 100%;
    }

  }

  .water__img img {
    @media screen and (max-width: 780px) {
      max-width: 75%;
    }
  }
}

.water__block--4 .water__img {}

.water__text p+p {
  margin-top: 6.3vw;
}

.water__img {
  flex: 0 0 41%;
  max-width: 41%;
}

.water__img img {
  width: 100%;
  height: auto;
  display: block;
}

.water__caption {
  margin-top: .85vw;
  font-size: 1.13vw;
  line-height: 1.6vw;
  text-align: left;
  font-family: "Cormorant Infant", serif;

  @media screen and (max-width: 780px) {
    max-width: 90%;
    margin-inline: auto;
    margin-top: 3vw;
  }
}

.water__caption-meta {
  margin-bottom: .45vw;
  font-size: 1.25vw;
}

.water__text {
  flex: 0 0 50%;
  max-width: 50%;
  font-family: "Cormorant Infant", serif;

  line-height: 2.2vw;
  text-align: left;
  padding: 0 1vw;
  padding-bottom: 7vw;
}

.water__text span {
  font-weight: bold;
}


.water__img--offset {
  padding-left: 9vw;
}


@media screen and (max-width: 780px) {

  .water__block {
    flex-direction: column !important;
    gap: 4vw;
    padding: 0 5vw;
    align-items: center;
  }

  .water__block--reverse {
    flex-direction: column !important;
    padding-top: 16.5vw;
    margin-top: 0;
    gap: 15vw;
  }

  .water__img,
  .water__img img {
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
  }

  .water__text {
    max-width: 100%;
    flex: unset;
    font-size: 4vw;
    line-height: 6.4vw;
    text-align: left;
    padding: 0;
  }

  .water__text p+p {
    margin-top: 12vw;
  }

  .water__mainimg {
    margin-bottom: 17vw;
  }

  .water__mainimg img {
    width: 77vw;
  }

  .water__maintext {
    font-size: 3.9vw;
    line-height: 7vw;
    padding: 0 6vw;
  }

  .water__caption {
    color: #002e60;
    font-size: 3.25vw;
    line-height: 5vw;
    margin-top: 2.5vw;
    text-align: left;
  }

  .water__caption-meta {
    font-size: 3.25vw;

  }

  .water__text--offset .water__inner-offset {
    padding-left: 0 !important;
  }

  .water__img--offset {
    padding-left: 0 !important;
  }


}

.koji {
  padding: 6.5vw 0 13.5vw;
  color: #002e60;


  @media screen and (max-width: 780px) {
    padding: 18.75vw 0 3vw;
  }
}


.koji__block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.8vw;
  padding: 0 11.25vw;
  margin-top: 0vw;

}

.koji__block--reverse {
  flex-direction: row-reverse;
}

.koji__block--center {
  flex-direction: column;
  text-align: center;
}


.koji__video-wrap {
  position: relative;
  max-width: 65%;
  align-items: center;
  margin: 0 auto;
  z-index: 1; /* ←追加 */
}


.koji__video-wrap2{
	width:60%;
}
.koji__video-container {
  position: relative;
  width: 100%;
  max-width: 49.5%;
  margin: 0 auto;
  z-index: 0;
	margin-bottom:11.9vh;
}

.koji__video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden; /* ←これで iframeのはみ出しをカット */
}

.koji__video-frame iframe {
  position: absolute;
  top: 0;

  width: 102.1%;
	height:101%;
  border: none;
}





iframe {
  border: none;
  outline: none;
  display: block;
}

.koji-mute-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
}

.koji-mute-button img {
  width: 40px;
  height: 40px;
}



@media screen and (max-width: 780px) {
	
	.koji__video-container {
  position: relative;
  width: 100%;
		max-width:90%;
  margin: 0 auto;
  z-index: 0;
	margin-bottom:11.9vh;
}
	
  .koji__video-wrap {
    position: relative;
    max-width: 90%;
  }
}

.koji__video-wrap video {
  width: 100%;
  height: auto;
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% 99%, 0 99%);
}

#koji-video2 {
  clip-path: polygon(0 0, 100% 0, 100% 99%, 0 99%);

}
.koji-mute-button {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001; /* ←大きく上げる */
  display: block !important; /* ←念のため */
}

.koji-mute-button img {
  width: 40px;
  height: 40px;
}

/* 画像サイズ調整 */
.koji__img {
  flex: 0 0 65%;
  max-width: 65%;
}

.koji__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキストサイズ・余白調整 */
.koji__text {
  flex: 0 0 90%;
  max-width: 90%;
  font-family: "Cormorant Infant", serif;
  font-size: 1.475vw;
  line-height: 2.3vw;
  text-align: left;
  padding: 0 1vw;
  padding-bottom: 7vw;
}

.koji__text p+p {
  margin-top: 6.3vw;
}

.koji__text span {
  font-weight: bold;
}

/* テキスト位置を画像より少し右寄りにしたい場合 */
.koji__text--left {
  margin-left: 3vw;
}




/* セクション全体：中央寄せ＋左右余白 */
.koji__block--feature {
  display: block;
  padding: 0vw 10vw 6.3vw;
  /* ← 左右に6vw追加 */
  text-align: center;
  color: #002e60;
}

/* 画像 */
.koji__img--centered {
  text-align: center;
  margin-bottom: 6.3vh;
}

.koji__img--centered img {
  width: 39.4vw;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* テキスト */
.koji__text--centered {
  max-width: 100%;
  text-align: center;
  font-family: "Cormorant Infant", serif;
  font-size: 1.475vw;
  line-height: 2.3vw;

  padding: 3vw 6vw;
  /* ← テキストにも左右padding */
}

.koji__text--centered span {
  font-weight: bold;
  color: #002e60;
}

.koji__text__minleft {
  padding-right: 18.3vw;
}

.koji__text__minright {
  padding-left: 12.3vw;
}

.koji__text__left {
  text-align: left;
}

.koji__text__leftspace {
  padding-left: 6.3vw;
}

.koji__text__topspace {
  padding-top: 6.3vw;
}

.koji__img--small {
  flex: 0 0 30%;
  max-width: 30%;
}

/* 左端寄せ＆画像大きめ専用ブロック */
.koji__block--edgeleft {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin-top: -6vw;
  /* ← 上に食い込ませる */
  gap: 3vw;
  position: relative;
  /* オーバーラップのベース */
  z-index: 2;
  /* 必要に応じて重なり調整 */
}

/* 左端くっつけ＋画像拡大 */
.koji__img--edgeleft {
  flex: 0 0 45%;
  max-width: 45%;
  margin-left: 0;
}

.koji__img--edgeleft img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト調整（右側の余白含めて） */
.koji__block--edgeleft .koji__text {
  flex: 0 0 40%;
  max-width: 40%;
  font-family: "Cormorant Infant", serif;
  font-size: 1.475vw;
  line-height: 2.3vw;
  text-align: left;
  padding-top: 0;
  margin-top: 0;
  padding-right: 6vw;
}



@media screen and (max-width: 768px) {

  /* 共通：全体的に縮小して整列 */
  .koji__block {
    gap: 6.4vw;
    padding: 0 0vw;
    align-items: center;
  }

  .koji__img {
    flex: 0 0 90%;
    max-width: 90%;
  }

  .koji__img img {
    width: 100%;
    height: auto;
    display: block;
  }

  .koji__text {
    flex: 0 0 100%;
    max-width: 100%;
    font-size: 3.9vw;
    line-height: 6.4vw;
    text-align: left;
    padding: 0;
  }

  .koji__text span {
    font-weight: bold;
    color: #002e60;
  }


  .koji__block--feature {
    display: block;

    text-align: center;
    color: #002e60;
  }

  .koji__img--centered {
    text-align: center;
    margin-bottom: 6.3vh;
    margin-top: 6.3vh;
  }

  .koji__img--centered img {
    width: 80vw;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .koji__text--centered {
    max-width: 100%;
    text-align: center;
    font-family: "Cormorant Infant", serif;
    font-size: 3.9vw;
    line-height: 6.4vw;

    padding: 3vw 6vw;
    /* ← テキストにも左右padding */
    padding-bottom: 6.4vh;
  }

  /* reverseブロック（画像右） */
  .koji__block--reverse {
    flex-direction: row-reverse;
  }

  .koji__img--small {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .koji__block--reverse .koji__text {
    flex: 0 0 60%;
    max-width: 60%;

  }




  /* 左端くっつけ＋画像拡大 */
  .koji__block--edgeleft {
    display: flex;
    flex-direction: column-reverse;
    /* ← ここが大事！ */
    align-items: center;
    gap: 0vw;
    padding: 10vw 16vw 6vw 0vw;
  }

  .koji__img--edgeleft {
    width: 100%;
    max-width: 100%;
  }



  .koji__img--edgeleft img {
    width: 100%;
    height: auto;
    display: block;
  }

  .koji__block--edgeleft .koji__text {
    max-width: 100%;
    font-size: 3.9vw;
    line-height: 6.4vw;
    text-align: left;
    padding: 0;
    padding-bottom: 6.4vh;

  }


  .koji__text__leftspace,
  .koji__text__topspace,
  .koji__text__minleft,
  .koji__text__minright {
    padding: 0;
  }

  .koji__text__leftspace {
    padding-left: 8.4vw;
  }

}



.company {
  padding: 110px 0 13.5vw;
  color: #002e60;


  @media screen and (max-width: 780px) {
    padding: 80px 0 3vw;
  }
}

.company__pagetitle {
  background-image: url(../img/company-title_bg.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 140px;
  padding-bottom: 140px;
  color: rgb(255, 255, 255);
  font-size: 50px;
  font-family: "Cormorant Infant";
  line-height: 1.2;
  text-align: center;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);

  @media screen and (max-width: 780px) {
    background-position: top left;
    padding-top: 62px;
    padding-bottom: 62px;
    font-size: 32px;
  }
}

.company__block {
  justify-content: center;
  align-items: center;
  /* ← ここを変更 */
  gap: 1.8vw;
  padding: 0 11.25vw;
}

.company__lead {
  padding-bottom: 3.9vw;
  font-weight: bold;
  font-size: 1.8vw;
}

.company__leadbig {
  padding-top: 3.9vw;
  padding-bottom: 0vw;
  font-weight: bold;
  font-size: 2.2vw;
}

.company__message {
  font-size: 1.475vw;
  line-height: 2.3vw;
  padding-bottom: 3.9vw;
}


.company__info {
  font-size: 1.475vw;
  line-height: 2.3vw;
  font-weight: bold;
  border-bottom: 1px solid #002E60;
  border-top: 1px solid #002E60;
  padding: 3.9vw 3.9vw;
  width: 60%;
  margin: 0 auto;
}

.comapny-topspace {
  padding-top: 7.8vw;
}


.company__block.comapny-topspace2 {
  padding-top: 4vw;

  @media screen and (max-width: 780px) {
    padding-top: 12vw;
  }
}


.company__block--supplier {
  padding-top: 6.5vw;
  text-align: center;
  color: #002e60;
}

/* サプライヤータイトル */
.company__supplier-title {
  font-size: 1.6vw;
  font-weight: bold;
  margin-bottom: 1.3vw;
}

/* タイトル下のライン */
.company__supplier-line {
  width: 3.9vw;
  height: 1px;
  background-color: #002e60;
  margin: 0 auto 3.9vw;
}

/* メッセージ（中央揃え・やや小さめ） */
.company__supplier-message {
  font-size: 1.475vw;
  line-height: 2.3vw;
  max-width: 60vw;
  margin: 0 auto 5.2vw;
}

/* 画像ラップ */
.company__supplier-imgwrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  /* テキストを画像の下端に揃える */
  gap: 2vw;
  width: 80%;
  margin: 0 auto;
  padding-top: 3.9vw;
}

.company__supplier-img {
  width: 55%;
  /* 少し小さく調整 */
  height: auto;
  display: block;
}

.company__supplier-caption {
  width: 40%;
  font-size: 1vw;
  line-height: 1.7vw;
  text-align: left;
  color: #002e60;

}

.company__supplier-caption a {
  color: #002e60;
  text-decoration: none;
}

@media screen and (max-width: 768px) {

  .company__block {
    justify-content: center;
    align-items: center;
    /* ← ここを変更 */
    gap: 1.8vw;
    padding: 0 3.9vw;
  }

  .company__lead {
    font-size: 6vw;
    padding-bottom: 6vw;
    text-align: center;
    line-height: 1.5;
  }

  .company__message {
    font-size: 4.2vw;
    line-height: 6vw;
    padding: 0 6vw 8vw;
    text-align: center;
  }

  .company__message span {
    font-weight: bold;
  }

  .company__info {
    font-size: 4.2vw;
    line-height: 6vw;
    padding: 6vw 6vw;
    width: 100%;
    border-top: 1px solid #002E60;
    border-bottom: 1px solid #002E60;
    text-align: center;
  }

  .company__info p {
    margin-bottom: 2vw;
  }

  .company__info p:last-child {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .company__leadbig {
    font-size: 5.5vw;
    padding-top: 10vw;
    padding-bottom: 6vw;
    text-align: center;
    line-height: 1.4;
  }

  .company__supplier-title {
    font-size: 5vw;
    margin-bottom: 4vw;
    text-align: center;
  }

  .company__supplier-line {
    width: 10vw;
    margin: 0 auto 6vw;
  }

  .company__supplier-message {
    font-size: 4.2vw;
    line-height: 6.5vw;
    max-width: 100%;
    padding: 0 6vw;
    margin-bottom: 10vw;
    text-align: center;
  }
}


@media screen and (max-width: 768px) {
  .company__supplier-imgwrap {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 6vw 0 10vw;
    gap: 4vw;
  }

  .company__supplier-img {
    width: 90%;
    height: auto;
    display: block;
  }

  .company__supplier-caption {
    width: 90%;
    font-size: 3.5vw;
    line-height: 5.5vw;
    text-align: left;
  }

  .company__supplier-caption a {
    word-break: break-word;
  }
}


/*ショップメニュー追加*/
.btob-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 20px;
  z-index: 1000;
}

.btob-button a {
  display: inline-block;
  padding: 10px 30px;

  font-size: 18px;
  color: #002E60;
  text-decoration: none;
  font-family: "Cormorant Infant", serif;
  transition: background-color 0.3s, color 0.3s;
}

.btob-button a:hover {
  background-color: #002E60;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .btob-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 0px !important;
  z-index: 1000;
  }
	
	.btob-button a {
  display: inline-block;
  padding: 10px 5px !important;

  font-size: 15px !important;
  color: #002E60;
  text-decoration: none;
  font-family: "Cormorant Infant", serif;
  transition: background-color 0.3s, color 0.3s;
}

.btob-button a:hover {
  background-color: #fff;
  color: #002E60;
}

}


.contant-button-pro {
  z-index: 100;
  /* font-size: 35px; 
  font-size: clamp(28px, calc(28 / 2434 * 100vw), 28px);*/
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 2px;
  position: absolute;
  bottom: 18vh;
  left: 50%;
  transform: translateX(-50%);
  /* 追加 */
  font-family: "Montserrat", sans-serif;
}

.contant-button-pro.dark {
  color: #002e60;
  border-bottom: 1px solid #002e60;
}


.contant-button-btob {
  font-size: 18px;
  z-index: 100;
  /* font-size: 35px; 
  font-size: clamp(28px, calc(28 / 2434 * 100vw), 28px);*/
  padding: 10px 30px;

  color: #002E60;
  text-decoration: none;
  font-family: serif;
  transition: background-color 0.3s, color 0.3s;
  position: absolute;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  /* 追加 */
  font-family: "Cormorant Infant", serif;
}

.contant-button-btob.dark {
  color: #002e60;
  
}
.btob-button-btob a:hover {
  background-color: #002E60;
  color: #fff;
}

.contant-button-btob-in {
  font-size: 18px;
  z-index: 100;
  padding: 10px 20px;

  color: #002E60;
  text-decoration: none;
  font-family: serif;
  transition: background-color 0.3s, color 0.3s;

  /* 追加 */
  font-family: "Cormorant Infant", serif;
display: block;
margin: 0 auto;
width: fit-content;
	margin-top:20px;
	
}

.contant-button-btob-in.dark {
  color: #002e60;
}
.btob-button-btob-in a:hover {
  background-color: #002E60;
  color: #fff;
}