@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

:root {
  --ease-smooth: cubic-bezier(0, .34, .39, .65);
  --wrapper-padding: min(
    3.66%,
    71.04px
  );
  --wrapper-inner: min(
    92.67%,
    1779.84px
  );
  --font-comorant: "Cormorant Infant", serif;
  --font-basker: "Baskervville", serif;
  --sec-color: #B4D9CC;
}
@media screen and (max-width: 768px) {
  :root {
    --wrapper-padding: 5.33%;
    --wrapper-inner: 89.33%;
  }
}

html,
body {
  font-size: 16px;
}

html {
  min-height: 100%;
}

body {
  font-family: "Shippori Mincho", serif;
  color: #333;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

img, picture, svg {
  display: block;
}

a {
  color: inherit;
}

.u-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .u-sp {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  br.u-sp {
    display: inline;
  }
}

.u-sp-small {
  display: none;
}
@media screen and (max-width: 768px) {
  .u-sp-small {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  br.u-sp-small {
    display: inline;
  }
}

@media screen and (max-width: 768px) {
  .u-pc {
    display: none;
  }
}

.main {
  max-width: 100%;
  overflow-x: clip;
}

.index__item {
  transform: translateY(7%);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.index__item picture {
  opacity: 0;
}
.index__item .index__ttl {
  opacity: 0;
  transition: opacity 0.7s;
}
.index__item.js-animate {
  transform: translateY(0);
}
.index__item.js-animate picture {
  animation-name: keyIndexPhoto;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
}
.index__item.js-animate .index__ttl {
  opacity: 1;
}
.index__item:nth-child(2) {
  transition-delay: 0.2s;
}
.index__item:nth-child(2) picture {
  animation-delay: 0.2s;
}
.index__item:nth-child(2) .index__ttl {
  transition-delay: 0.5s;
}
.index__item:nth-child(3) {
  transition-delay: 0.4s;
}
.index__item:nth-child(3) picture {
  animation-delay: 0.4s;
}
.index__item:nth-child(3) .index__ttl {
  transition-delay: 0.7s;
}
.index__item:nth-child(4) {
  transition-delay: 0.6s;
}
.index__item:nth-child(4) picture {
  animation-delay: 0.6s;
}
.index__item:nth-child(4) .index__ttl {
  transition-delay: 0.9s;
}
@media screen and (max-width: 768px) {
  .index__item:nth-child(odd) {
    transition-delay: 0s;
  }
  .index__item:nth-child(odd) picture {
    animation-delay: 0s;
  }
  .index__item:nth-child(odd) .index__ttl {
    transition-delay: 0.3s;
  }
  .index__item:nth-child(even) {
    transition-delay: 0.2s;
  }
  .index__item:nth-child(even) picture {
    animation-delay: 0.2s;
  }
  .index__item:nth-child(even) .index__ttl {
    transition-delay: 0.5s;
  }
}
html:not(.js-enabled) .index__item {
  transform: none;
}
html:not(.js-enabled) .index__item picture,
html:not(.js-enabled) .index__item .index__ttl {
  opacity: 1;
}
@media print {
  .index__item {
    transform: none;
  }
  .index__item picture,
  .index__item .index__ttl {
    opacity: 1;
  }
}

@keyframes keyIndexPhoto {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.anim-fade {
  opacity: 0;
}
.anim-fade.js-animate, .js-animate .anim-fade {
  animation-name: keyFade;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
html:not(.js-enabled) .anim-fade {
  opacity: 1;
}
@media print {
  .anim-fade {
    opacity: 1;
  }
}

@keyframes keyFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.item__photo-main {
  --photo-main-transform: rotate(4deg);
}
.layout-a--reverse .item__photo-main, .layout-b--reverse .item__photo-main {
  --photo-main-transform: rotate(-4deg);
}
.item__photo-main > * {
  transform: var(--photo-main-transform);
  opacity: 0;
}
.item__photo-main.js-animate > * {
  animation-name: keyPhotoMain;
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
}
html:not(.js-enabled) .item__photo-main > * {
  transform: none;
  opacity: 1;
}
@media print {
  .item__photo-main > * {
    transform: none;
    opacity: 1;
  }
}

@keyframes keyPhotoMain {
  0% {
    opacity: 0;
    transform: var(--photo-main-transform);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
.item__photo-sub {
  overflow: hidden;
  --photo-sub-transform: translateX(3%);
  --photo-sub-clip: inset(0 0 0 100%);
}
.layout-a--reverse .item__photo-sub, .layout-b--reverse .item__photo-sub {
  --photo-sub-transform: translateX(-3%);
  --photo-sub-clip: inset(0 100% 0 0);
}
.item__photo-sub > * {
  opacity: 0;
  transform: var(--photo-sub-transform);
}
.item__photo-sub.js-animate > * {
  animation: keyPhotoSub 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
html:not(.js-enabled) .item__photo-sub > * {
  opacity: 1;
  transform: none;
}
@media print {
  .item__photo-sub > * {
    opacity: 1;
    transform: none;
  }
}

@keyframes keyPhotoSub {
  0% {
    opacity: 0;
    transform: var(--photo-sub-transform);
    clip-path: var(--photo-sub-clip);
  }
  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}
.sec-header__num {
  opacity: 0;
  transform-origin: center center;
}
.sec-header.js-animate .sec-header__num {
  animation-name: keyHeaderNum;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}
html:not(.js-enabled) .sec-header__num {
  opacity: 1;
}
@media print {
  .sec-header__num {
    opacity: 1;
  }
}

@keyframes keyHeaderNum {
  0% {
    opacity: 0;
    transform: translate(5%, -14%) rotate(7deg) scale(1.15);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}
.sec-header__tip {
  opacity: 0;
  transform: translateX(-20%);
  transition: opacity 0.3s linear 0.3s, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.sec-header.js-animate .sec-header__tip {
  opacity: 1;
  transform: translateX(0%);
}
html:not(.js-enabled) .sec-header__tip {
  opacity: 1;
  transform: none;
}
@media print {
  .sec-header__tip {
    opacity: 1;
    transform: none;
  }
}

.sec-header__num-area::after {
  opacity: 0;
  transform-origin: center center;
  transform: rotate(-45deg) translateY(-50%) scaleX(0);
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.3s, opacity 0.7s linear 0.3s;
}
.sec-header.js-animate .sec-header__num-area::after, html:not(.js-enabled) .sec-header__num-area::after {
  transform: rotate(-45deg) translateY(-50%) scaleX(1);
  opacity: 1;
}
@media print {
  .sec-header__num-area::after {
    transform: rotate(-45deg) translateY(-50%) scaleX(1);
    opacity: 1;
  }
}

.sec-header__ttl::after {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}
.sec-header.js-animate .sec-header__ttl::after, html:not(.js-enabled) .sec-header__ttl::after {
  transform: scaleX(1);
}
@media print {
  .sec-header__ttl::after {
    transform: scaleX(1);
  }
}

.sec-header__ttl-inner,
.sec-header__desc,
.mv__text p {
  --clip-duration: 2.4s;
  --clip-delay: 0.3s;
  --clip-transform: none;
  display: block;
  position: relative;
  overflow: hidden;
  transition: translate var(--clip-duration) cubic-bezier(0.25, 1, 0.5, 1) var(--clip-delay);
  translate: var(--clip-translate);
}
.sec-header__ttl-inner::after,
.sec-header__desc::after,
.mv__text p::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -50%;
  width: 150%;
  height: 100%;
  background: #fff;
  background: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 1) 33%, rgb(255 255 255 / 1) 100%);
  z-index: 10;
  transition: left var(--clip-duration) cubic-bezier(0.25, 1, 0.5, 1) var(--clip-delay);
}
.sec-header.js-animate .sec-header__ttl-inner, .sec-header__ttl-inner.js-animate, html:not(.js-enabled) .sec-header__ttl-inner,
.sec-header.js-animate .sec-header__desc,
.sec-header__desc.js-animate,
html:not(.js-enabled) .sec-header__desc,
.sec-header.js-animate .mv__text p,
.mv__text p.js-animate,
html:not(.js-enabled) .mv__text p {
  translate: none;
}
.sec-header.js-animate .sec-header__ttl-inner::after, .sec-header__ttl-inner.js-animate::after, html:not(.js-enabled) .sec-header__ttl-inner::after,
.sec-header.js-animate .sec-header__desc::after,
.sec-header__desc.js-animate::after,
html:not(.js-enabled) .sec-header__desc::after,
.sec-header.js-animate .mv__text p::after,
.mv__text p.js-animate::after,
html:not(.js-enabled) .mv__text p::after {
  left: 101%;
}
@media print {
  .sec-header__ttl-inner,
  .sec-header__desc,
  .mv__text p {
    translate: none;
  }
  .sec-header__ttl-inner::after,
  .sec-header__desc::after,
  .mv__text p::after {
    left: 101%;
  }
}

.sec-header__desc {
  --clip-delay: 0.8s;
}

.mv__bg img {
  opacity: 0;
  transform: scale(1.1);
  filter: blur(1vw);
  transition: transform 10s cubic-bezier(0.25, 1, 0.5, 1), filter 1.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s linear;
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
}
.mv.js-animate .mv__bg img, html:not(.js-enabled) .mv__bg img {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
@media print {
  .mv__bg img {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.mv__txt-area::before {
  clip-path: inset(0 100%);
  opacity: 0;
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, opacity 0.9s linear 0.4s;
}
@media screen and (max-width: 768px) {
  .mv__txt-area::before {
    clip-path: inset(0 0 0 0);
  }
}
.mv.js-animate .mv__txt-area::before, html:not(.js-enabled) .mv__txt-area::before {
  clip-path: inset(0 0 0 0);
  opacity: 0.15;
}
@media screen and (max-width: 768px) {
  .mv.js-animate .mv__txt-area::before, html:not(.js-enabled) .mv__txt-area::before {
    opacity: 0.4;
  }
}
@media print {
  .mv__txt-area::before {
    clip-path: inset(0 0 0 0);
    opacity: 0.15;
  }
}

.mv__txt-01 {
  opacity: 0;
  transform: translateX(-4%);
  transition: opacity 1s linear 0.8s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}
.mv.js-animate .mv__txt-01, html:not(.js-enabled) .mv__txt-01 {
  opacity: 1;
  transform: translateX(0);
}
@media print {
  .mv__txt-01 {
    opacity: 1;
    transform: translateX(0);
  }
}

.mv__txt-02::before,
.mv__txt-03::before {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.4, 0, 0.2, 1) 2s;
}
.mv__txt-02 span,
.mv__txt-03 span {
  display: block;
  overflow: hidden;
}
.mv__txt-02 img,
.mv__txt-03 img {
  transform: translateY(105%);
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 1.1s;
}
.mv.js-animate .mv__txt-02::before, html:not(.js-enabled) .mv__txt-02::before,
.mv.js-animate .mv__txt-03::before,
html:not(.js-enabled) .mv__txt-03::before {
  clip-path: inset(0 0 0 0);
}
.mv.js-animate .mv__txt-02 img, html:not(.js-enabled) .mv__txt-02 img,
.mv.js-animate .mv__txt-03 img,
html:not(.js-enabled) .mv__txt-03 img {
  transform: translateY(0);
}
@media print {
  .mv__txt-02::before,
  .mv__txt-03::before {
    clip-path: inset(0 0 0 0);
  }
  .mv__txt-02 img,
  .mv__txt-03 img {
    transform: translateY(0);
  }
}

.mv__txt-03::before {
  transition-delay: 2.5s;
}
.mv__txt-03 img {
  transition-delay: 1.6s;
}

.mv__txt-04,
.mv__txt-06 {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.4, 0, 0.2, 1) 2.5s;
}
.mv.js-animate .mv__txt-04, html:not(.js-enabled) .mv__txt-04,
.mv.js-animate .mv__txt-06,
html:not(.js-enabled) .mv__txt-06 {
  clip-path: inset(0 0 0 0);
}
@media print {
  .mv__txt-04,
  .mv__txt-06 {
    clip-path: inset(0 0 0 0);
  }
}

.mv__txt-06 {
  transition-delay: 3.5s;
}

.mv__txt-05 {
  opacity: 0;
  transform-origin: center center;
}
.mv.js-animate .mv__txt-05 {
  animation: mvNum 2s cubic-bezier(0.16, 1, 0.3, 1) 3s forwards;
}
html:not(.js-enabled) .mv__txt-05 {
  opacity: 1;
}
@media print {
  .mv__txt-05 {
    opacity: 1;
  }
}

@keyframes mvNum {
  0% {
    opacity: 0;
    transform: translate(5%, -14%) rotate(-8deg) scale(1.5);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}
.mv {
  overflow: hidden;
}
.mv__main {
  position: relative;
  overflow: hidden;
}
.mv__main img {
  display: block;
}
.mv__bg img {
  width: 100%;
}
.mv__bg.swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+2), html:not(.js-enabled) .mv__bg.swiper-slide:nth-child(n+2) {
  display: none;
}
@media screen and (max-width: 768px) {
  .mv__bg.swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+2), html:not(.js-enabled) .mv__bg.swiper-slide:nth-child(n+2) {
    display: block;
  }
}
@media print {
  .mv__bg.swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+2), html:not(.js-enabled) .mv__bg.swiper-slide:nth-child(n+2) {
    display: none;
  }
}
.mv__logo {
  position: absolute;
  left: 2.19vw;
  top: 2.19vw;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .mv__logo {
    top: 3.2vw;
    left: 3.73vw;
  }
}
.mv__logo img {
  width: 6.29vw;
}
@media screen and (max-width: 768px) {
  .mv__logo img {
    width: 15.28vw;
  }
}
.mv__txt-area {
  position: absolute;
  width: 40.99vw;
  height: 38.06vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .mv__txt-area {
    height: 64vw;
    inset: auto 0 0;
    transform: none;
    width: auto;
  }
}
.mv__txt-area::before {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  background-color: #231815;
}
@media screen and (max-width: 768px) {
  .mv__txt-area::before {
    display: block;
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 1) 40%);
  }
}
.mv__txt-area img {
  width: 1000%;
}
.mv__txt-area > * {
  position: relative;
  display: block;
}
.mv__txt-01 {
  margin: 3.29vw auto 0;
  width: 20.57vw;
}
@media screen and (max-width: 768px) {
  .mv__txt-01 {
    width: 37.6vw;
    margin: 2.93vw auto 0;
  }
}
.mv__txt-02::before, .mv__txt-03::before {
  content: "";
  position: absolute;
  bottom: 0;
  bottom: 0.29vw;
  right: -0.81vw;
  display: block;
  opacity: 0.6;
  height: 0.97vw;
  background: #81dbf4;
  width: 21.71vw;
}
@media screen and (max-width: 768px) {
  .mv__txt-02::before, .mv__txt-03::before {
    right: -1.6vw;
    height: 1.77vw;
    width: 39.56vw;
  }
}
.mv__txt-02 span, .mv__txt-03 span {
  position: relative;
}
.mv__txt-02 {
  margin: 1.97vw 0 0 2.19vw;
  width: 32.79vw;
}
@media screen and (max-width: 768px) {
  .mv__txt-02 {
    width: 59.73vw;
    margin: 2.4vw 0 0 16.8vw;
  }
}
.mv__txt-03 {
  margin: 2.12vw 0 0 11.27vw;
  width: 27.67vw;
}
@media screen and (max-width: 768px) {
  .mv__txt-03 {
    width: 50.4vw;
    margin: 2.93vw 0 0 33.06vw;
  }
}
.mv__txt-03::before {
  bottom: 0;
  right: 0.14vw;
  width: 28.14vw;
}
@media screen and (max-width: 768px) {
  .mv__txt-03::before {
    width: 51.26vw;
  }
}
.mv__txt-last {
  display: flex;
  margin: 2.48vw 0 0 3.44vw;
}
@media screen and (max-width: 768px) {
  .mv__txt-last {
    margin: 4.26vw 0 0 20.53vw;
  }
}
.mv__txt-04 {
  margin-top: 5.19vw;
  width: 9.51vw;
}
@media screen and (max-width: 768px) {
  .mv__txt-04 {
    width: 17.19vw;
    margin-top: 9.06vw;
  }
}
.mv__txt-05 {
  margin-left: 1.83vw;
  width: 6.8vw;
}
@media screen and (max-width: 768px) {
  .mv__txt-05 {
    width: 12.26vw;
    margin-left: 3.46vw;
  }
}
.mv__txt-06 {
  margin: 5.12vw 0 0 1.9vw;
  width: 13.32vw;
}
@media screen and (max-width: 768px) {
  .mv__txt-06 {
    width: 24.26vw;
    margin: 9.33vw 0 0 3.2vw;
  }
}
.mv__text {
  margin-top: min(8.05vw, 110px);
  font-size: 1.25rem;
  font-size: clamp(20px, 10.1371841155px + 0.7220216606vw, 24px);
  line-height: 3;
  text-align: center;
}
@media screen and (max-width: 1365px) {
  .mv__text {
    font-size: clamp(17px, 13.1407035176px + 0.5025125628vw, 20px);
  }
}
@media screen and (max-width: 768px) {
  .mv__text {
    font-size: 1rem;
    font-size: clamp(16px, 15.0458015267px + 0.2544529262vw, 17px);
    line-height: 2.5;
  }
}
@media screen and (max-width: 370px) {
  .mv__text {
    font-size: max(13.76px, 4.26vw);
    padding-inline: var(--wrapper-padding);
  }
}
@media screen and (max-width: 319px) {
  .mv__text {
    text-align: left;
  }
}
@media screen and (max-width: 319px) {
  .mv__text br {
    display: none;
  }
}
.mv__text p {
  width: max-content;
  display: inline-block;
  max-width: 100%;
}

.index {
  margin-top: min(10.24vw, 140px);
}
@media screen and (max-width: 768px) {
  .index {
    margin-top: 58px;
  }
}
.index__list {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style-type: none;
  width: 1180px;
  max-width: 100%;
  padding-inline: var(--wrapper-padding);
  gap: 0 3.7%;
}
@media screen and (max-width: 768px) {
  .index__list {
    width: 500px;
    grid-template-columns: repeat(2, 1fr);
    padding-inline: 2.66%;
    gap: 2.66vw;
  }
}
.index__item {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .index__item {
    container-type: inline-size;
  }
}
.index__item a {
  position: relative;
  display: block;
  text-decoration: none !important;
}
.index__item a:hover .index__img::after {
  opacity: 0.6;
}
.index__item a:hover .index__img img {
  transform: scale(1.04);
}
.index__img {
  overflow: hidden;
  position: relative;
}
.index__img::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #000;
  transition: opacity 0.5s;
}
.index__img img {
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.index__ttl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: 3.33%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 0.15em;
  color: #fff;
  font-family: var(--font-comorant);
  font-size: min(2.92vw, 2.5rem);
}
@media screen and (max-width: 768px) {
  .index__ttl {
    font-size: 2.5rem;
    font-size: 23.25cqw;
    margin-bottom: 4.63%;
  }
}
@media screen and (max-width: 370px) {
  .index__ttl {
    font-size: 10.66vw;
  }
}
.index__ttl-tip {
  font-size: 0.65em;
}

@media screen and (max-width: 1365px) {
  .layout-a.item .item__desc,
  .layout-b.item .item__desc {
    margin-left: clamp(-42px, -96.0301507538px + 7.0351758794vw, 0px);
    margin-right: clamp(-15px, -34.2964824121px + 2.5125628141vw, 0px);
  }
}
@media screen and (max-width: 768px) {
  .layout-a.item .item__desc,
  .layout-b.item .item__desc {
    margin-inline: auto;
  }
}
@media screen and (max-width: 768px) {
  @supports (display: contents) {
    .layout-a.item,
    .layout-b.item {
      flex-direction: column !important;
    }
    .layout-a.item .item__txt-area,
    .layout-a.item .item__photo-area,
    .layout-b.item .item__txt-area,
    .layout-b.item .item__photo-area {
      display: contents;
    }
    .layout-a.item .item__photo-main,
    .layout-b.item .item__photo-main {
      order: 1;
    }
    .layout-a.item .item__desc-wrap,
    .layout-b.item .item__desc-wrap {
      order: 2;
    }
    .layout-a.item .link,
    .layout-b.item .link {
      order: 3;
    }
  }
}

.layout-a.item .link {
  right: clamp(10px, 1.5179783394px + 0.6209386282vw, 13.44px);
}
@media screen and (max-width: 1365px) {
  .layout-a.item .link {
    right: clamp(0px, -12.864321608px + 1.675041876vw, 10px);
  }
}
@media screen and (max-width: 768px) {
  .layout-a.item .link {
    right: auto;
  }
}

@media screen and (max-width: 1365px) {
  .layout-a--reverse.item .item__desc,
  .layout-b--reverse.item .item__desc {
    margin-right: clamp(-42px, -96.0301507538px + 7.0351758794vw, 0px);
    margin-left: clamp(-15px, -34.2964824121px + 2.5125628141vw, 0px);
  }
}
@media screen and (max-width: 768px) {
  .layout-a--reverse.item .item__desc,
  .layout-b--reverse.item .item__desc {
    margin-inline: auto;
  }
}

.layout-a--reverse.item {
  flex-direction: row;
}

.layout-b.item {
  flex-direction: row;
}
.layout-b.item .item__txt-area {
  margin-top: 3.31%;
}
.layout-b.item .link {
  margin-top: max(78px, 13.92%);
}

.layout-b--reverse.item {
  flex-direction: row-reverse;
}

.sec {
  margin-top: 184px;
  margin-top: clamp(184px, -1.4209386282px + 13.5740072202vw, 259.2px);
  scroll-margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .sec {
    margin-top: max(55px, 14.66vw);
  }
}

.sec-header {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .sec-header {
    flex-direction: column;
    padding-inline: 2.66%;
    width: 520px;
    max-width: 100%;
    margin-inline: auto;
  }
}
.sec-header__num-area {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 6.25rem;
  font-size: clamp(100px, 0.9773285199px + 7.2490974729vw, 140.16px);
}
@media screen and (max-width: 1365px) {
  .sec-header__num-area {
    font-size: 4.87rem;
    font-size: clamp(78px, 49.6984924623px + 3.6850921273vw, 100px);
  }
}
@media screen and (max-width: 768px) {
  .sec-header__num-area {
    font-size: clamp(78px, 66.5496183206px + 3.0534351145vw, 90px);
  }
}
@media screen and (max-width: 370px) {
  .sec-header__num-area {
    font-size: 20.8vw;
  }
}
.sec-header__num-area::after {
  content: "";
  position: absolute;
  right: 0.26em;
  margin-top: 0.09em;
  top: 50%;
  display: block;
  border-bottom: 1px solid var(--sec-color);
  width: 1.12em;
  height: 1px;
}
@media screen and (max-width: 768px) {
  .sec-header__num-area::after {
    right: -0.44em;
  }
}
.sec-header__tip {
  position: relative;
  z-index: 2;
  margin-top: -0.13em;
  font-size: 0.24em;
  font-family: var(--font-basker);
  line-height: 1;
}
.sec-header__num {
  margin-inline: -0.22em 1.02em;
  color: var(--sec-color);
  line-height: 1;
  font-family: var(--font-comorant);
}
@media screen and (max-width: 768px) {
  .sec-header__num {
    margin-right: 0.35em;
  }
}
@media screen and (max-width: 768px) {
  .sec-header__txt-area {
    width: 100%;
  }
}
@media screen and (max-width: 370px) {
  .sec-header__ttl, .sec-header__desc {
    padding-inline: calc(var(--wrapper-padding) - 2.66%);
  }
}
.sec-header__ttl {
  position: relative;
  padding-bottom: 0.53em;
  font-size: 1.87rem;
  font-size: clamp(30px, -0.1802166065px + 2.2093862816vw, 42.24px);
  font-weight: normal;
}
@media screen and (max-width: 1365px) {
  .sec-header__ttl {
    font-size: 1.5rem;
    font-size: clamp(24px, 16.2814070352px + 1.0050251256vw, 30px);
  }
}
@media screen and (max-width: 768px) {
  .sec-header__ttl {
    margin-block: 0.73em 0.57em;
    padding-bottom: 0.42em;
    font-size: 1.62rem;
    font-size: clamp(26px, 17.4122137405px + 2.2900763359vw, 35px);
    line-height: 1.385;
    text-align: center;
  }
}
@media screen and (max-width: 370px) {
  .sec-header__ttl {
    font-size: max(22.08px, 6.93vw);
  }
}
.sec-header__ttl::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid var(--sec-color);
}
@media screen and (max-width: 319px) {
  .sec-header__ttl br.u-sp {
    display: none;
  }
}
.sec-header__desc {
  margin-top: 0.8em;
  font-size: 1.25rem;
  font-size: clamp(20px, -1.6981949458px + 1.5884476534vw, 28.8px);
}
@media screen and (max-width: 1365px) {
  .sec-header__desc {
    font-size: 0.87rem;
    font-size: clamp(14px, 6.2814070352px + 1.0050251256vw, 20px);
  }
}
@media screen and (max-width: 768px) {
  .sec-header__desc {
    margin-top: 0;
    font-size: 1.12rem;
    line-height: 1.722;
    text-align: center;
  }
}
@media screen and (max-width: 370px) {
  .sec-header__desc {
    font-size: max(15.36px, 4.8vw);
  }
}
@media screen and (max-width: 319px) {
  .sec-header__desc br.u-sp {
    display: none;
  }
}

#tip01 {
  margin-top: 159px;
  margin-top: clamp(159px, 1.8853429603px + 11.5018050542vw, 222.72px);
  --photo-bg-color: rgb(180 217 204 / 0.3);
}
@media screen and (max-width: 768px) {
  #tip01 {
    margin-top: max(70px, 18.66vw);
  }
}
#tip01 .link__list--main {
  --link-bg-color-hover: rgb(180 217 204 / 0.7);
}

#tip02 {
  --sec-color: #A9DEED;
  --photo-bg-color: rgb(169 222 237 / 0.3);
}
#tip02 .link__list--main {
  --link-bg-color-hover: rgb(169 222 237 / 0.7);
}

#tip03 {
  --sec-color: #C5C0D8;
  --photo-bg-color: rgb(197 192 216 / 0.3);
}
#tip03 .link__list--main {
  --link-bg-color: #EEECF3;
  --link-border-color: #EEECF3;
  --link-bg-color-hover: rgb(197 192 216 / 0.2);
}

#tip04 {
  --sec-color: #E88177;
  --photo-bg-color: rgb(232 129 119 / 0.15);
}
#tip04 .link__list--main {
  --link-bg-color: #F8D9D6;
  --link-border-color: #F8D9D6;
  --link-bg-color-hover: rgb(232 129 119 / 0.24);
}

.item {
  margin-top: 120px;
  margin-top: clamp(120px, -0.720866426px + 8.8375451264vw, 168.96px);
  padding-inline: var(--wrapper-padding);
  width: 1920px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .item {
    padding-inline: 0;
    flex-direction: column-reverse;
    margin-top: max(70px, 18.66vw);
  }
}
.sec-header + .item {
  margin-top: 97px;
  margin-top: clamp(97px, 0.0485198556px + 7.0974729242vw, 136.32px);
}
@media screen and (max-width: 768px) {
  .sec-header + .item {
    margin-top: max(42px, 11.2vw);
  }
}
.item__photo-area {
  width: 45.81%;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .item__photo-area {
    width: auto;
  }
}
.item__photo-main {
  display: block;
  width: 100%;
  background: var(--photo-bg-color);
}
@media print {
  .item__photo-main {
    background: transparent;
  }
}
.item__photo-main img {
  width: 100%;
}
.item__photo-main .slider__item:not(:first-child) {
  display: none;
}
@media screen and (max-width: 768px) {
  .item__photo-main .slider__item:not(:first-child) {
    display: block;
  }
}
.item__txt-area {
  width: 44.23%;
  margin-top: 4.1%;
  margin-right: 1.57%;
}
@media screen and (max-width: 1365px) {
  .item__txt-area {
    margin-right: clamp(0px, -25.7286432161px + 3.3500837521vw, 20px);
  }
}
@media screen and (max-width: 768px) {
  .item__txt-area {
    margin-inline: auto;
    width: 100%;
  }
}
.item__desc-wrap {
  font-size: 1.06rem;
  font-size: clamp(17px, 2.1071480144px + 1.0902527076vw, 23.04px);
  line-height: 2.529;
  min-height: 18em;
  min-height: clamp(0px, -393.648241206px + 51.256281407vw, 306px);
  display: flex;
  align-items: flex-end;
}
@media screen and (max-width: 1365px) {
  .item__desc-wrap {
    font-size: 0.87rem;
    font-size: clamp(14px, 10.1407035176px + 0.5025125628vw, 17px);
  }
}
@media screen and (max-width: 768px) {
  .item__desc-wrap {
    font-size: clamp(14px, 11.1374045802px + 0.7633587786vw, 17px);
    margin-top: 47px;
    padding-inline: var(--wrapper-padding);
    line-height: 2.214;
  }
}
.item__desc-inner {
  padding: 11.78% 14.28% 12.14%;
}
@media screen and (max-width: 1365px) {
  .item__desc-inner {
    padding: clamp(35px, -4.8793969849px + 5.1926298157vw, 66px) clamp(45px, -0.0251256281px + 5.8626465662vw, 80px);
  }
}
@media screen and (max-width: 768px) {
  .item__desc-inner {
    padding: 2.14em 2.85em !important;
  }
}
.item--02-01 .item__desc-inner, .item--03-01 .item__desc-inner {
  padding-right: 12.5%;
  padding-right: clamp(70px, 1.1575451264px + 5.0397111913vw, 97.92px);
}
@media screen and (max-width: 1365px) {
  .item--02-01 .item__desc-inner, .item--03-01 .item__desc-inner {
    padding-right: 14.28%;
  }
}
.item--03-01 .item__desc-inner {
  letter-spacing: -0.04em;
}
@media screen and (max-width: 1365px) {
  .item--03-01 .item__desc-inner {
    letter-spacing: 0em;
  }
}
.item__desc, .item__desc-inner {
  position: relative;
  --desc-border-width: 7.05em;
  --desc-border-offset: 1.23em;
}
@media screen and (max-width: 768px) {
  .item__desc, .item__desc-inner {
    --desc-border-width: 5.71em;
    --desc-border-offset: 0.92em;
  }
}
.item__desc::before, .item__desc::after, .item__desc-inner::before, .item__desc-inner::after {
  content: "";
  display: block;
  position: absolute;
  background: #707070;
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), margin 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s linear;
}
.item__desc-wrap.js-animate .item__desc::before, .item__desc-wrap.js-animate .item__desc::after, .item__desc-wrap.js-animate .item__desc-inner::before, .item__desc-wrap.js-animate .item__desc-inner::after {
  opacity: 1;
}
html:not(.js-enabled) .item__desc::before, html:not(.js-enabled) .item__desc::after, html:not(.js-enabled) .item__desc-inner::before, html:not(.js-enabled) .item__desc-inner::after {
  transform: none !important;
  margin: 0 !important;
  opacity: 1 !important;
}
@media print {
  .item__desc::before, .item__desc::after, .item__desc-inner::before, .item__desc-inner::after {
    transform: none !important;
    margin: 0 !important;
    opacity: 1 !important;
  }
}
.item__desc::before, .item__desc-inner::before {
  height: 1px;
  width: var(--desc-border-width);
  transform: scaleX(0);
}
.item__desc-wrap.js-animate .item__desc::before, .item__desc-wrap.js-animate .item__desc-inner::before {
  transform: scaleX(1);
}
@media print {
  .item__desc::before, .item__desc-inner::before {
    border-top: 1px solid #707070;
    background-color: transparent;
  }
}
@media screen and (max-width: 768px) {
  .item__desc::before, .item__desc-inner::before {
    height: 0.5px;
  }
}
.item__desc::after, .item__desc-inner::after {
  width: 1px;
  height: var(--desc-border-width);
  transform: scaleY(0);
}
.item__desc-wrap.js-animate .item__desc::after, .item__desc-wrap.js-animate .item__desc-inner::after {
  transform: scaleY(1);
}
@media print {
  .item__desc::after, .item__desc-inner::after {
    border-left: 1px solid #707070;
    background-color: transparent;
  }
}
@media screen and (max-width: 768px) {
  .item__desc::after, .item__desc-inner::after {
    width: 0.5px;
  }
}
.item__desc::before {
  top: var(--desc-border-offset);
  margin-left: 6%;
  transform-origin: right center;
}
.item__desc-wrap.js-animate .item__desc::before {
  margin-left: 0;
}
.item__desc::after {
  top: 0;
  left: var(--desc-border-offset);
  margin-top: -2%;
  transform-origin: center top;
  transition-delay: 0.15s;
}
.item__desc-wrap.js-animate .item__desc::after {
  margin-top: 0;
}
.item__desc-inner::before {
  bottom: var(--desc-border-offset);
  right: 0;
  margin-right: 6%;
  transform-origin: left center;
  transition-delay: 0.6s;
}
.item__desc-wrap.js-animate .item__desc-inner::before {
  margin-right: 0;
}
.item__desc-inner::after {
  bottom: 0;
  right: var(--desc-border-offset);
  margin-bottom: -2%;
  transform-origin: center bottom;
  transition-delay: 0.4s;
}
.item__desc-wrap.js-animate .item__desc-inner::after {
  margin-bottom: 0;
}
.item__photo-sub {
  display: block;
  width: 85.71%;
  margin: max(72px, 12.85%) auto 0;
}
@media screen and (max-width: 768px) {
  .item__photo-sub {
    display: none;
  }
}
.item__photo-sub img {
  width: 100%;
}
.item .link {
  margin-top: max(48px, 8.57%);
  position: relative;
  width: 28.57em;
  max-width: 90%;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .item .link {
    margin-top: 48px !important;
    padding-inline: var(--wrapper-padding);
    max-width: 100%;
    width: 500px;
  }
}
.item .swiper {
  overflow: visible;
}
.item .swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+2),
.item html:not(.js-enabled) .swiper-slide:nth-child(n+2) {
  display: none;
}
@media screen and (max-width: 768px) {
  .item .swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+2),
  .item html:not(.js-enabled) .swiper-slide:nth-child(n+2) {
    display: block;
  }
}
@media print {
  .item .swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+2),
  .item html:not(.js-enabled) .swiper-slide:nth-child(n+2) {
    display: none;
  }
}

.item--03-01 {
  align-items: stretch;
}
.item--03-01 .item__txt-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 2.6%;
}
@media screen and (max-width: 1365px) {
  .item--03-01 .item__txt-area {
    padding-bottom: 0;
    padding-bottom: clamp(0px, -42.4522613065px + 5.527638191vw, 33px);
  }
}

.link {
  --link-text-color: #333;
  --link-bg-color: var(--sec-color);
  --link-border-color: transparent;
  --link-text-color-hover: #333;
  --link-bg-color-hover: #fff;
  --link-border-color-hover: transparent;
  --link-arrow-url: url("../img/link_arrow_black.svg");
}
.link__list {
  padding-left: 0;
  list-style-type: none;
  font-size: 0.87rem;
  font-size: clamp(14px, 4.1371841155px + 0.7220216606vw, 18px);
}
@media screen and (max-width: 768px) {
  .link__list {
    font-size: 0.87rem;
    font-size: 0.87rem;
    font-size: clamp(14px, 13.0458015267px + 0.2544529262vw, 15px); /* 14px @375px - 15px @768px */
  }
}
.link__item {
  padding-bottom: 0.57em;
  font-size: inherit;
  position: relative;
  opacity: 0;
  left: -0.6em;
  top: -0.2em;
  transition: opacity 1.2s ease, left 0.6s ease, top 0.6s ease;
}
@media screen and (max-width: 768px) {
  .link__item {
    padding-bottom: 0.64em;
  }
}
.link__item:nth-child(1) {
  transition-delay: 0s;
}
.link__list--sub .link__item:nth-child(1) {
  transition-delay: 0.25s;
}
.link__item:nth-child(2) {
  transition-delay: 0.02s;
}
.link__list--sub .link__item:nth-child(2) {
  transition-delay: 0.27s;
}
.link__item:nth-child(3) {
  transition-delay: 0.04s;
}
.link__list--sub .link__item:nth-child(3) {
  transition-delay: 0.29s;
}
.link__item:nth-child(4) {
  transition-delay: 0.06s;
}
.link__list--sub .link__item:nth-child(4) {
  transition-delay: 0.31s;
}
.link__item:nth-child(5) {
  transition-delay: 0.08s;
}
.link__list--sub .link__item:nth-child(5) {
  transition-delay: 0.33s;
}
.link__item:nth-child(6) {
  transition-delay: 0.1s;
}
.link__list--sub .link__item:nth-child(6) {
  transition-delay: 0.35s;
}
.link__item:nth-child(7) {
  transition-delay: 0.12s;
}
.link__list--sub .link__item:nth-child(7) {
  transition-delay: 0.37s;
}
.link__item:nth-child(8) {
  transition-delay: 0.14s;
}
.link__list--sub .link__item:nth-child(8) {
  transition-delay: 0.39s;
}
.link__item:nth-child(9) {
  transition-delay: 0.16s;
}
.link__list--sub .link__item:nth-child(9) {
  transition-delay: 0.41s;
}
.link__item:nth-child(10) {
  transition-delay: 0.18s;
}
.link__list--sub .link__item:nth-child(10) {
  transition-delay: 0.43s;
}
.link__item:nth-child(11) {
  transition-delay: 0.2s;
}
.link__list--sub .link__item:nth-child(11) {
  transition-delay: 0.45s;
}
.link.js-animate .link__item, html:not(.js-enabled) .link__item {
  opacity: 1;
  top: 0;
  left: 0;
}
@media print {
  .link__item {
    opacity: 1;
    left: 0;
    top: 0;
  }
}
.link a {
  font-size: inherit;
  display: flex;
  align-items: center;
  text-decoration: none;
  will-change: opacity, left;
}
@media screen and (max-width: 319px) {
  .link a {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
.link a > span {
  display: inline-block;
}
.link__name {
  flex: 1;
  font-size: inherit;
  letter-spacing: 0.086em;
}
@media screen and (max-width: 319px) {
  .link__name {
    width: 100%;
    flex: 0 1 auto;
  }
}
.link__price {
  position: relative;
  padding-left: 1.57em;
  margin-right: 0.5em;
  font-size: inherit;
  letter-spacing: 0.05em;
  text-align: right;
}
.link__item--l .link__price, .link__item--s .link__price {
  min-width: 5.35em;
}
.link__price::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-45%);
  display: block;
  width: 1.07em;
  height: 1.07em;
  background: center center/contain no-repeat none;
}
.link__item--l .link__price::before {
  content: "";
  background-image: url("../img/link_l.svg");
}
.link__item--s .link__price::before {
  content: "";
  background-image: url("../img/link_s.svg");
}
.link__tax {
  margin-right: 1.37em;
  margin-bottom: -0.32em;
  font-size: 0.57em;
}
.link__btn {
  position: relative;
  width: 6em;
  height: 2.4em;
  font-size: 0.71em;
  background-color: var(--link-bg-color);
  border: 1px solid var(--link-border-color);
  text-align: center;
  line-height: 2.2em;
  color: var(--link-text-color);
  transition: padding-right 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.link__btn::before {
  content: "";
  display: block;
  width: 0.88em;
  height: 100%;
  background: center center/contain no-repeat var(--link-arrow-url);
  position: absolute;
  top: 0;
  right: 0.6em;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.link a:hover .link__btn {
  padding-right: 0.7em;
  color: var(--link-text-color-hover);
  background-color: var(--link-bg-color-hover);
  border-color: var(--link-border-color-hover);
}
.link a:hover .link__btn::before {
  transform: translateX(0.3em);
  opacity: 1;
}
.link__list--sub {
  position: relative;
  margin-top: 1em;
  padding-top: 1.35em;
  --link-text-color: #333333;
  --link-bg-color: transparent;
  --link-border-color: #EAEAEA;
  --link-text-color-hover: #fff;
  --link-bg-color-hover: #333333;
  --link-border-color-hover: #333333;
  --link-arrow-url: url("../img/link_arrow_white.svg");
}
.link__list--sub::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  opacity: 0;
  display: block;
  height: 1px;
  background-color: #EAEAEA;
  transition: right 1s cubic-bezier(0, 0.55, 0.45, 1) 0.1s, opacity 0.06s linear;
}
.link.js-animate .link__list--sub::before, html:not(.js-enabled) .link__list--sub::before {
  right: 0;
  opacity: 1;
}
@media print {
  .link__list--sub::before {
    right: 0;
    opacity: 1;
  }
}

.flex-box {
  display: flex;
}

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

.slide-box {
  overflow: hidden;
}

/* end-block------------------ */
.end-block {
  position: relative;
  margin-top: 0;
  background-color: #fff;
  overflow: hidden;
}

.end-block .bgi-photo {
  position: absolute;
  top: 0;
  left: 0;
}

/*banner-block-----------------------------*/
.banner-block {
  margin: min(19.76vw, 270px) auto 51px;
  position: relative;
}

.banner-block a {
  display: block;
  transition: 0.6s ease-in-out;
}

.banner-block a:hover {
  background: rgba(255, 255, 255, 0.4);
}

.banner-block .c-btn01 {
  width: 36%;
  min-width: 600px;
  margin: 0 auto 11px;
  border: 1px solid #000;
  transition: 0.3s;
  display: block;
}
.banner-block .c-btn01 img {
  width: 100%;
}

.banner-block .line {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: 1px;
  margin: 5% auto 0;
  background: #000;
}

.banner-block .flex-box {
  padding-left: 0;
  justify-content: space-between;
  width: 36%;
  min-width: 600px;
  margin: 4.5% auto 0;
}

.banner-block .flex-box .c-btn01 {
  width: 48%;
  min-width: 290px;
  margin: 0;
}

/* ページトップボタン---------------------------- */
#pagetop {
  position: fixed;
  right: 15px;
  bottom: 15px;
  width: 50px;
  height: 50px;
  display: block;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#pagetop.is-show, html:not(.js-enabled) #pagetop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media print {
  #pagetop {
    display: none !important;
  }
}

#pagetop .btn-loading {
  display: inline-flex;
  text-decoration: none;
  font-weight: 700;
  color: #111;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 1 !important;
  transition: all 0.3s;
  background-color: #CCC;
  border-radius: 100%;
  transition: color 0.2s;
  overflow: hidden;
}

#pagetop .btn-loading01:before,
#pagetop .btn-loading01:after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 0;
  background-color: #231815;
  pointer-events: none;
}

#pagetop .btn-loading:before {
  bottom: 0;
  left: 0;
}

#pagetop .btn-loading:after {
  top: 0;
  right: 0;
}

#pagetop:hover .btn-loading {
  color: #65A04D;
}

#pagetop:hover .btn-loading:before,
#pagetop:hover .btn-loading:after {
  height: 100%;
}

#pagetop:hover .btn-loading:before {
  transition: height 0.1s 0.1s linear;
}

#pagetop:hover .btn-loading:after {
  transition: height 0.1s linear;
}

#pagetop .btn-loading span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  background-color: #FFF;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}

#pagetop .btn-loading span img {
  width: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* フッター--------------------------------------------- */
.footer {
  letter-spacing: 0.3em;
  position: relative;
  text-align: center;
  padding: 0 0 30px 0;
}

.footer img {
  transition: 0.3s;
}

.footer img:hover {
  opacity: 0.6;
  transition: 0.3s;
}

.footer_sns .instagram {
  display: block;
  width: 2.34%;
  min-width: 30px;
  margin: 0 auto 2%;
  opacity: 1;
  transition: 0.3s;
}

.f-ow {
  width: 7.96%;
  min-width: 102px;
  margin: 25px auto 0 auto;
}

.footer_copyright {
  font-family: "Helvetica", sans-serif;
  font-size: max(0.6vw, 10px);
  letter-spacing: 0.02em;
  margin: 1.71% 0 0;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .flex-box {
    flex-direction: column;
  }
  /* バナー--------------------------- */
  .banner-block {
    margin-top: 104px;
    margin-bottom: 35px;
  }
  .banner-block .c-btn01 {
    width: 80%;
    max-width: 460px;
    min-width: auto;
  }
  .banner-block .line {
    display: none;
  }
  .banner-block .flex-box {
    flex-direction: row;
    width: 80%;
    max-width: 460px;
    min-width: auto;
    margin: 36px auto 0;
  }
  .banner-block .flex-box .c-btn01 {
    min-width: auto;
  }
  /* ページトップボタン--------------------------- */
  #pagetop {
    position: fixed;
    right: 10px;
    width: 35px;
    height: 35px;
    display: block;
    z-index: 30;
  }
  #pagetop .btn-loading {
    display: inline-flex;
    text-decoration: none;
    font-weight: 700;
    color: #111;
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 1 !important;
    transition: all 0.3s;
    background-color: #CCC;
    border-radius: 100%;
    transition: color 0.2s;
    overflow: hidden;
  }
  #pagetop .btn-loading01:before,
  #pagetop .btn-loading01:after {
    content: "";
    display: block;
    position: absolute;
    width: 50%;
    height: 0;
    background-color: #231815;
    pointer-events: none;
  }
  #pagetop .btn-loading:before {
    bottom: 0;
    left: 0;
  }
  #pagetop .btn-loading:after {
    top: 0;
    right: 0;
  }
  #pagetop:hover .btn-loading {
    color: #65A04D;
  }
  #pagetop:hover .btn-loading:before,
  #pagetop:hover .btn-loading:after {
    height: 100%;
  }
  #pagetop:hover .btn-loading:before {
    transition: height 0.1s 0.1s linear;
  }
  #pagetop:hover .btn-loading:after {
    transition: height 0.1s linear;
  }
  #pagetop .btn-loading span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    background-color: #FFF;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
  }
  #pagetop .btn-loading span img {
    width: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* フッター--------------------------- */
  .footer {
    padding-bottom: 20px;
  }
  .footer_sns {
    margin: 0 auto;
  }
  .footer_sns .instagram {
    width: 2.73%;
    min-width: 35px;
  }
  .f-ow {
    margin-top: 5.86vw;
    width: 9.37%;
    min-width: 120px;
  }
  .footer_copyright {
    margin-top: 5.33vw;
  }
  .footer_copyright img {
    width: 72vw;
  }
}