@charset "UTF-8";

/**************************************************************
* ローディング画面
**************************************************************/

@media all and (max-width: 767px) {
  .ripples-area {
    display: none;
  }
}

@media all and (min-width: 768px) {
  .ripples-area {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../images/enticement/bg_loading.png);
    transition: opacity 0.5s ease-in-out;
    will-change: opacity;
  }

  .ripples-area[class*="is-animation-done"] {
    opacity: 0;
  }
  
  .loading-screen__logo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    max-width: 20rem;
    height: auto;
    margin: auto;
    opacity: 0;
    visibility: hidden;
  }
}


/**************************************************************
* ハンバーガーメニュー
**************************************************************/

.g-hamburger-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.g-hamburger-menu__controls {
  position: fixed;
  top: 5vw;
  right: 1rem;
  z-index: 9999;
  width: 6rem;
  height: 6rem;
  cursor: pointer;
  transform: translateY(-25%);
}

@media all and (min-width: 768px) {
  .g-hamburger-menu__controls {
    position: absolute;
  }
}

@media all and (min-width: 1366px) {
  .g-hamburger-menu__controls {
    top: 5vw;
    right: calc(9.8vw + 1rem);
  }
}

/* hamburger-btn
********************************/
.hamburger-btn {
  position: relative;
  z-index: 9998;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--base-bg);
}

.hamburger-btn__icn {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 2.4rem;
  height: 0.2rem;
  margin: auto;
  border-radius: 5rem;
  background-color: var(--base-color);
}

.hamburger-btn__icn::before,
.hamburger-btn__icn::after {
  content: "";
  position: absolute;
  height: 100%;
  border-radius: 5rem;
  background-color: var(--base-color);
  transition: all 0.3s ease-out;
}
.hamburger-btn__icn::before {
  width: calc(100% - 0.5rem);
  transform: translate3d(0, 300%, 0);
}
.hamburger-btn__icn::after {
  width: calc(100% + 0.5rem);
  transform: translate3d(0, -300%, 0);
}

/* hover */
@media (hover: hover) {
  .hamburger-btn {
    transition: background-color 0.15s ease-out;
  }
  
  .hamburger-btn:hover {
    background-color: var(--accent-1-background-color);
  }
}

/* states */ 
.hamburger-btn__icn {
  transition: width 0.3s ease-out,
              transform 0.3s ease-out;
  will-change: width;
}

.hamburger-btn__icn::before,
.hamburger-btn__icn::after {
  transition-delay: 0.05s;
}

.hamburger-btn[class*="--triggered"] {
  transform: rotateZ(45deg);
  transition: width 0.1s ease-out,
              transform 0.1s ease-out 0.5s;
}

.hamburger-btn[class*="--triggered"] .hamburger-btn__icn::before {
  width: 100%;
  transform: translate3d(0, 0, 0) rotateZ(-90deg);
}
.hamburger-btn[class*="--triggered"] .hamburger-btn__icn::after {
  width: 100%;
  transform: translate3d(0, 0, 0) rotateZ(-90deg);
}

/* slidding-nav
********************************/
.slidding-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100vh;
}

.slidding-nav__holder {
  width: 100%;
  height: 100%;
}

.slidding-nav__body {
  display: grid;
  justify-content: center;
  align-items: center;
  z-index: 999;
  width: 100%;
  height: 100%;
  border: 3rem solid var(--base-bg);
  background: var(--accent-1-background-color);
}

.slidding-nav__logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slidding-nav__logo > span {
  width: 100%;
}

.slidding-nav__guts {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

.slidding-nav__list {
  display: grid;
  gap: 1.5rem;
}

.slidding-nav__sns {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 1.5rem;
  padding-top: 2rem;
}

@media all and (min-width: 768px) {
  .slidding-nav {
    position: absolute;
  }
}

@media all and (max-width: 1023px) {
  .slidding-nav__body {
    grid-template-rows: 25% 1fr;
  }
}

@media all and (min-width: 1024px) {
  .slidding-nav__body {
    grid-template-columns: 25% 1fr;
  }

  .slidding-nav__logo > span {
    width: 50%;
  }

  .slidding-nav__list {
    display: flex;
    align-self: flex-end;
    gap: 4rem;
    padding-bottom: 2rem;
  }
}

/* hover */
@media (hover: hover) {
	.slidding-nav__link {
		transition: color 0.3s ease-out;
	}

	.slidding-nav__link:hover {
    color: var(--accent-1-color);
    filter: brightness(120%);
	}
}

/* animations */
.slidding-nav {
  opacity: 0;
  transform-origin: 0 100%;
  transform: translateY(100%) scaleY(0);
}

.slidding-nav .slidding-nav__holder {
  transform-origin: 0 0;
  transform: translateY(-100%);
}

.slidding-nav .slidding-nav__body {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
}

.slidding-nav__guts {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.slidding-nav[class*="--opened"] .slidding-nav__guts {
  opacity: 1;
  transition: opacity 1s ease-out;
  transition-delay: 0.5s;
}


/**************************************************************
* グロバルの要素
**************************************************************/

/* scroll-indicator
********************************/
.scroll-indicator {
  position: absolute;
  bottom: 5%;
  left: 6%;
  z-index: 99;
  width: 3rem;
  height: 8rem;
}

@media all and (max-width: 767px) {
  .scroll-indicator {
    bottom: calc(5% - 3rem);
    left: 0;
    right: 0;
    margin: auto;
  }
}

.scroll-indicator > span {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: min(0.25vw + 1rem, 1.4rem);
  font-family: 'Arial', sans-serif;
  left: 0.1em;
  line-height: 3.5;
}

.scroll-indicator__start::after {
  content: "";
  bottom: calc(-100% - 1.5rem);
  display: block;
  width: 1px;
  height: 200%;
  margin: auto;
  background: #000000;
  transform-origin: top;
}

/* animations */
.scroll-indicator__start::after {
  animation: stretching-effect 2s ease-out infinite;
}

@keyframes stretching-effect {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

/* tel-reservation
********************************/
.tel-reservation {
 position: relative;
}

/* overrides */
.tel-reservation .c-btn__body {
  box-shadow: 1.15rem 1.15rem 3rem rgba(196, 0, 0, 0.4);
}

.tel-reservation a {
  text-decoration: none;
}

@media all and (max-width: 767px) {
  /* overrides */
  .tel-reservation .c-btn__body {
    text-align: center;
    box-shadow: none;
    border-radius: inherit;
  }

  .tel-reservation .c-btn__body > span small {
    display: block;
  }
}

@media all and (min-width: 768px) {
  .tel-reservation {
    position: absolute;
    top: 15%;
    right: 1.5%;
    width: 6rem;
    height: 22rem;
    z-index: 9999;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  .tel-reservation .c-btn__body small {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 66.66%;
  }
  
  .tel-reservation .c-btn__body small > span {
    writing-mode: horizontal-tb;
    text-orientation: upright;
    line-height: 1;
  }

  /* overrides */
  .tel-reservation .c-btn__body {
    border-radius: 4rem;
  }
}

/* tel-icn
********************************/
.tel-icn {
  position: relative;
  width: 1.6rem;
  height: 2rem;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: contain;
  background-image: url(../images/common/tel_icn.png);
  transform: translateY(-10%);
}

@media all and (min-width: 768px) {
  .tel-icn {
    vertical-align: inherit;
  }
}

/* web-reservation
********************************/
.web-reservation {
  position: relative;
}
.web-reservation > a {
  text-decoration: none;
  background-color: #59bfb3;
}

.web-reservation small {
  display: block;
  font-size: 66.66%;
  line-height: 2.5;
}


@media all and (max-width: 767px) {
  .web-reservation > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    text-align: center;
    cursor: pointer;
    font-size: min(0.58vw + 1rem, 1.8rem);
    line-height: 1.5;
    color: var(--base-inverted-color);
  }
}

@media all and (min-width: 768px) {
  .web-reservation {
    position: absolute;
    bottom: 5%;
    right: 1.5%;
    z-index: 9999;
    width: 7.8125%;
    min-width: 15rem;
  }
  .web-reservation > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .web-reservation a::after {
    content: "";
    display: block;
    padding-top: 100%;
  }
  
  .web-reservation span {
    text-align: center;
    font-size: min(0.44vw + 1rem, 1.6rem);
    line-height: 1.25;
    letter-spacing: 0.1em;
    color: var(--base-inverted-color);
  }
}

/* hovers */
@media (hover: hover) {
  .web-reservation > a {
    transition: all 0.3s ease-out;
  }

  .web-reservation > a:hover {
    box-shadow: 0 0 0 0.5rem rgba(161, 241, 232, 0.5),
                0 0 0 1rem rgba(37, 248, 224, 0.5);
  }
}

/* line-reservation
********************************/
.line-reservation {
  position: relative;
}

.line-reservation > a {
  text-decoration: none;
  background-color: #1FC32E;
}

.line-reservation small {
  display: block;
  font-size: 66.66%;
  line-height: 2.5;
}

@media all and (max-width: 767px) {
  .line-reservation > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    text-align: center;
    cursor: pointer;
    font-size: min(0.58vw + 1rem, 1.8rem);
    line-height: 1.5;
    color: var(--base-inverted-color);
  }
}

@media all and (min-width: 768px) {
  .line-reservation {
    position: absolute;
    bottom: 30%;
    right: 1.5%;
    z-index: 9999;
    width: 7.8125%;
    min-width: 15rem;
  }
  .line-reservation > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .line-reservation a::after {
    content: "";
    display: block;
    padding-top: 100%;
  }
  
  .line-reservation span {
    text-align: center;
    font-size: min(0.44vw + 1rem, 1.6rem);
    line-height: 1.25;
    letter-spacing: 0.1em;
    color: var(--base-inverted-color);
  }
}


/* hovers */
@media (hover: hover) {
  .line-reservation > a {
    transition: all 0.3s ease-out;
  }

  .line-reservation > a:hover {
    box-shadow: 0 0 0 0.5rem rgba(164, 255, 141, 0.5),
                0 0 0 1rem rgba(0, 233, 19, 0.5);
  }
}

/* gradient-frame
********************************/
.gradient-frame {
  position: relative;
  padding: 2.5rem;
}
.gradient-frame::before,
.gradient-frame::after {
  content: "";
  display: block;
  width: 7rem;
  height: 7rem;
  position: absolute;
  border-image: linear-gradient(90deg, #fe749d 0, #2693ff 50%);
}

.gradient-frame::before {
  left: 0;
  top: 0;
  border-top: 1px solid;
  border-left: 1px solid;
  border-image-slice: 2 0 0 2;
}
.gradient-frame::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid;
  border-right: 1px solid;
  border-image-slice: 0 2 2 0;
}

@media all and (min-width: 768px) {
  .gradient-frame {
    padding: 2.5rem 5rem;
  }
}

/* pond-visual
********************************/
.pond-visual {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
  background-image: url(../images/common/pond_visual_bg.jpg);
  transform-origin: center;
}

.pond-visual__holder {
  position: relative;
  width: 100%;
  height: 25vh;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  .pond-visual {
    position: fixed;
  }

  .pond-visual__holder {
    height: 125vh;
  }
}

@media all and (min-width: 1486px) {
  .pond-visual {
    background-size: 100%;
  }

  .pond-visual__holder {
    height: 175vh;
  }
}

/* vline
********************************/
.vline {
  position: relative;
  top: 1rem;
  display: block;
  width: 1px;
  height: 5rem;
  margin-left: auto;
  margin-right: auto;
  background: var(--base-color);
}

@media all and (min-width: 768px) {
  .vline {
    height: 10rem;   
  }
}

/* animated-gif
********************************/
.animated-gif {
  background-color: transparent;
}
.animated-gif > img {
  display: block;
}

/* context-data
********************************/
.context-data {
  position: relative;
}

.context-data__ttl {
  margin-bottom: 1.5rem;
  font-size: min(1.18vw + 1rem, 2.6rem);
  line-height: 1.8;
  letter-spacing: 0.1em;
}

.context-data__body p {
  line-height: 1.8;
}
.context-data__body p:not(:last-child) {
  margin-bottom: 2rem;
}

@media all and (min-width: 768px) {
  .context-data__ttl {
    font-size: min(1.024vw + 1rem, 2.4rem);
  }
}

/* annotations
********************************/
@media all and (max-width: 767px) {
  .annotations *:where(p, label, li, dt, dd) {
    font-size: min(0.25vw + 1rem, 1.4rem) !important;
  }
}

/* aside-box
********************************/
.aside-box {
  position: relative;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4rem;
  background: #dcecf3;
}

.aside-box__data {
  padding: 3rem 2.5rem;
}

.aside-box__data > dt {
  margin-bottom: 3rem;
  text-align: center;
  font-size: min(0.58vw + 1rem, 1.8rem);
  color: #3d8bb6;
}

@media all and (min-width: 768px) {
  .aside-box__data {
    padding: 6rem;
  }
}

/* sns-gallery
********************************/
.sns-gallery {
  position: absolute;
  top: 0;
  left: 0;
  /* display: flex;
  flex-flow: nowrap; */
  display: flex;
  align-items: stretch;
  flex-direction: row;
  flex-shrink: 0;
  gap: 3rem;
}

.sns-gallery__item {
  position: relative;
  flex: 1 0 20%;
  width: 100%;
  transform: translateY(-55%);
}

@media all and (min-width: 768px) {
  .sns-gallery__item {
    flex: 1 0 60%;
  }
}

/* cta-btn
********************************/
.cta-btn {
  width: 100%;
  height: 6rem;
  max-width: 52rem;
  margin-top: 12rem;
  margin-left: auto;
  margin-right: auto;
}
.cta-btn a + p {
  margin-top: 2.5rem;
}

.cta-btn > p {
  text-align: center;
  font-size: min(0.73vw + 1rem, 1.1rem);
}

@media all and (min-width: 768px) {
  .cta-btn {
    height: 10rem;
  }

  .cta-btn > p {
    font-size: min(0.88vw + 1rem, 1.2rem);
  }
}

/**************************************************************
* MAIN VISUAL
**************************************************************/
.mv {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(90deg, #ffe2d9 0, #d0ffff 50%, #ffe2d9 100%);
  background-position: center center;
  background-size: 200% 100%;
}
.mv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url(../images/enticement/bg.png);
  mix-blend-mode: lighten;
}

/* animations */
.mv {
  animation: mv-gradient-motion 30s linear infinite;
  will-change: animation;
}

@keyframes mv-gradient-motion {
  0% {
    background-position: center center;
  }
  33.33% {
    background-position: 0% 0%;
  }
  66.66% {
    background-position: 200% center;
  }
  100% {
    background-position: center center;
  }
}

/**************************************************************
* ENTICEMENT
**************************************************************/

.enticement {
  position: relative;
}

.enticement__block {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.enticement__block:nth-child(1) {
  height: calc(100vh - 6rem);
}

.enticement__catch-box {
  text-align: center;
}

@media all and (max-width: 767px) {
  .enticement__block {
    padding-left: 5.333%;
    padding-right: 5.333%;
  }
  .enticement__block.--cp {
    padding-left: 1.333%;
    padding-right: 1.333%;
  }

  /* .enticement__guts {
    transform: translateY(-5%);
  } */
}

@media all and (min-width: 768px) {
  .enticement__block:nth-child(1) {
    height: 100vh;
  }
  .enticement__block:nth-child(2) {
    height: 100vh;
  }
}



/* enticement-catch
********************************/
.enticement-catch {
  margin-bottom: min(3vw + 1rem, 5rem);
  text-align: center;
  font-size: min(2.782vw + 1rem, 4.8rem);
  line-height: 1.8;
  letter-spacing: 0.15em;
}

/* states */
.enticement-catch mark {
  background-position: 0% 0%;
  transition: all 0.3s ease-out;
}

.enticement-catch[class*="is-animation-done"] mark {
  background-position: 100% 65%;
}

/* enticement-info
********************************/
.enticement-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(0.4vw + 1rem, 2rem);
  text-align: center;
  line-height: 1.2;
}

.enticement-info > p {
  font-size: min(1.9vw + 1rem, 3.6rem);
  letter-spacing: 0.05em;
}
.enticement-info > p small {
  display: inline-flex;
  font-size: 66.666%;
  line-height: 1.4;
  border-bottom: 1px solid currentColor;
}

.enticement-info > var {
  font-size: min(6vw + 1rem, 9.2rem);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg, #fe749d 0%, #00a3d9 65%);
}

.enticement-info > var span {
  font-size: 26%;
}

@media all and (min-width: 768px) {
  .enticement-info {
    gap: min(3.6vw + 1rem, 6rem);
  }
}

/* scrolling-alphabet-catch
********************************/
.scrolling-alphabet-catch {
  position: absolute;
  top: 2.3rem;
  left: 0;
  mix-blend-mode: color-burn;
}

.scrolling-alphabet-catch > span {
  display: inline-block;
  font-family: var(--alphabetic-font-family);
  font-size: min(8.8vw + 1rem, 14rem);
  color: #71add0;
  line-height: 0;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transform: translateX(-2.5%);
}

/* states */
.scrolling-alphabet-catch {
  will-change: transform;
}

@media all and (min-width: 768px) {
  .scrolling-alphabet-catch {
    top: 7.3rem;
  }
}

/* floating-visual
********************************/
@media all and (max-width: 767px) {
  .floating-visual {
    display: none;
  }
}

@media all and (min-width: 768px) {
  .floating-visual {
    position: absolute;
    z-index: 100;
    display: block;
  }
  .floating-visual::before {
    content: "";
    position: absolute;
    z-index: 100;
    display: block;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
  }
  .floating-visual::after {
    content: "";
    position: absolute;
    top: -2rem;
    left: 0;
    right: 0;
    z-index: -1;
    display: block;
    width: 90%;
    margin: auto;
    filter: blur(30px);
  }

  .floating-visual[class*="--1"] {
    top: 0;
    right: 0;
    width: 20.833%;
    max-width: 40rem;
  }
  .floating-visual[class*="--1"]::before {
    padding-top: calc(692/400 * 100%);
    background-image: url(../images/enticement/floating_visual_1_bg.png);
  }
  .floating-visual[class*="--1"]::after {
    padding-top: calc(692/400 * 100%);
    box-shadow: 0 2rem 0.6rem 0.05rem rgba(113, 175, 208, 1);
  }  

  .floating-visual[class*="--2"] {
    bottom: 60%;
    left: 5%;
    width: 7.71%;
    max-width: 14.8rem;
  }
  .floating-visual[class*="--2"]::before {
    padding-top: calc(692/400 * 100%);
    background-image: url(../images/enticement/floating_visual_2_bg.png);
  }
  .floating-visual[class*="--2"]::after {
    padding-top: calc(692/400 * 100%);
    box-shadow: 0 2rem 0.6rem 0.05rem rgba(106, 0, 0, 1);
  }

  .floating-visual[class*="--3"] {
    top: -2.5%;
    left: 5%;
    width: 16.666%;
    max-width: 32rem;
  }
  .floating-visual[class*="--3"]::before {
    padding-top: calc(200/320 * 100%);
    background-image: url(../images/enticement/floating_visual_3_bg.png);
  }
  .floating-visual[class*="--3"]::after {
    padding-top: calc(200/320 * 100%);
    box-shadow: 0 2rem 0.6rem 0.05rem rgba(106, 0, 0, 1);
  }
}


/**************************************************************
* PROBLEMS
**************************************************************/

.problems {
 position: relative;
}

.problems header {
  margin-bottom: 4rem;
}

.problems__block1 {
  margin-bottom: 2.5rem;
}
.problems__block1 > p {
  font-size: min(1.86vw + 1rem, 2.4rem);
  line-height: 2.4;
}
.problems__block1 > p em {
  text-decoration: underline;
}

.problems__block2 {
  max-width: 88rem;
}

@media all and (max-width: 767px) {
  .problems {
    padding-top: 10%;
    padding-bottom: 15%;
  }

  .problems__block1 {
    text-align: center;
  }

  .problems__block2 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* overrides */
  .problems .l-container {
    padding-left: inherit;
    padding-right: inherit;
  }
}

@media all and (min-width: 768px) {
  .problems {
    padding-top: 8%;
  }

  .problems header {
    margin-bottom: 7rem;
  }

  .problems__block1 {
    margin-bottom: 5rem;
  }

  .problems__block1,
  .problems__block2 {
    text-align: center;
  }

  .problems__block1 > p {
    font-size: min(1.24vw + 1rem, 2.4rem);
  }
}


/**************************************************************
* SUGGESTION
**************************************************************/

.suggestion {
  position: relative;
  margin-bottom: 6%;
}

.suggestion header {
  display: grid;
  justify-content: center;
  margin-top: 4rem;
  margin-bottom: min(8vw + 1rem, 12rem);
}

.suggestion header .gradient-frame {
  margin-bottom: 2rem;
  padding-top: 5rem;
  padding-left: min(6.58vw + 1rem, 10rem);
  padding-right: min(6.58vw + 1rem, 10rem);
}
@media all and (max-width: 767px) {
  .suggestion header .gradient-frame {
    padding-left: min(10.58vw, 12rem);
    padding-right: min(10.58vw, 12rem);
  }
}

.suggestion__alphabet-catch {
  position: relative;
  padding-top: 5%;
  text-align: center;
  line-height: 1;
  /* transform: translateY(-40%); */
}

.suggestion__alphabet-catch > span {
  font-family: var(--alphabetic-font-family);
  font-size: min(4.98vw + 1rem, 7.8rem);
  letter-spacing: 0.3em;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg, #fe92b3 0%, #71afd0 80%);
}

@media all and (max-width: 767px) {
  /* overrides */
  .suggestion  .l-container {
    padding-left: inherit;
    padding-right: inherit;
  }

  .suggestion .cta-btn {
    margin-top: 6rem;
  }
}

@media all and (max-width: 767px) {
  .suggestion {
    padding-left: 5.333%;
    padding-right: 5.333%;
  }
  
  .suggestion__alphabet-catch {
    padding-top: 10%;
  }
}

/* suggestion-data
********************************/
.suggestion-data {
  text-align: center;
}

.suggestion-data > dt {
  margin-bottom: 2.5rem;
  font-size: min(1.866vw + 1rem, 2.4rem);
  line-height: 1.8;
}

.suggestion-data > dd {
  margin-bottom: 7rem;
}

@media all and (min-width: 768px) {
  .suggestion-data > dt {
    font-size: min(1.024vw + 1rem, 2.4rem);
  }
}

/* suggestion-annotations
********************************/
.suggestion-annotations {
  display: grid;
  justify-content: center;
  max-width: 84.6rem;
  margin-top: 6rem;
  margin-left: auto;
  margin-right: auto;
}

.suggestion-price-box {
  position: relative;
  display: grid;
  gap: 5rem;
  margin-top: 2rem;
  margin-bottom: 10rem;
}

.suggestion .course-prices th,
.suggestion .course-prices td  {
  padding: 1.3rem;
}
/*.suggestion .course-prices thead th {
  background-color: transparent;
  border-color: transparent;
}*/
/*.suggestion .course-prices td,
.suggestion .course-prices th {
  border-bottom: none;
}*/

@media all and (max-width: 767px) {
  .suggestion-annotations {
    grid-template-columns: 100vw;
  }

  .suggestion-annotations > li:nth-child(1),
  .suggestion-annotations > li:nth-child(2),
  .suggestion-annotations > li:nth-child(3) {
    padding-left: 5.333%;
    padding-right: 5.333%;
  }
}

@media all and (min-width: 768px) {
  .suggestion-price-box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* suggestion-fig
********************************/
.suggestion-fig {
  text-align: center
}

@media all and (max-width: 767px) {
  .suggestion-fig {
    max-width: 100%;
    margin: auto;
  }
}
/* big-droplet-shape-bg
********************************/
.big-droplet-shape-bg {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  z-index: -1;
  width: 65%;
  height: 65%;
  max-width: 95rem;
  max-height: 95rem;
  margin: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url(../images/suggestion/big_droplet_shape_bg.jpg);
  transition: all 1s linear;
}

@media all and (min-width: 768px) {
  .big-droplet-shape-bg {
    top: -10%;
    bottom: 0;
  }
}

/* animations */
@media all and (min-width: 1024px) {
  .big-droplet-shape-bg::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 65%;
    height: 65%;
    margin: auto;
    filter: blur(20px);
    background: radial-gradient(circle at center, rgba(235, 219, 244, 0.6) 0%, rgba(185, 137, 214, 0.4) 100%);
    animation: fluidrotate 6s linear infinite;
    will-change: animation;
  }  
}

@keyframes fluidrotate {
  0%, 100% {
    border-radius: 63% 37% 54% 46% / 30% 48% 100% 45%;
    transform: rotateZ(100deg) scale3d(1, 1, 1);
  }
  14% {
    border-radius: 40% 60% 54% 46% / 49% 60% 90% 51%;
    transform: rotateZ(60deg) scale3d(1, 1, 1);
  }
  28% {
    border-radius: 54% 46% 38% 62% / 49% 70% 80% 51%;
    transform: rotateZ(100deg) scale3d(1, 1, 1);
  }
  42% {
    border-radius: 61% 40% 55% 45% / 80% 30% 82% 39%;
    transform: rotateZ(140deg) scale3d(0.95, 0.95, 1);
  }
  56% {
    border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    transform: rotateZ(200deg) scale3d(0.85, 0.85, 1);
  }
  70% {
    border-radius: 50% 50% 55% 66% / 56% 68% 68% 44%;
    transform: rotateZ(140deg) scale3d(1.02, 1.02, 1);
  }
  84% {
    border-radius: 76% 54% 50% 50% / 35% 61% 39% 65%;
    transform: rotateZ(100deg) scale3d(1, 1, 1);
  }
}

/* director-minibox
********************************/
.director-minibox {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 2rem;
}

.director-minibox .director-signature {
  margin-top: 2rem !important;
  text-align: right;
}

.director-minibox > div:nth-child(1) {
  flex: 0 0 60%;
}
.director-minibox > div:nth-child(2) {
  flex: 0 0 30%;
}

.director-minibox .director-gallery__body-img-1 {
  border-radius: 2rem;
}

@media all and (min-width: 1024px) {
  .director-minibox {
    gap: 4rem;
    max-width: 100rem;
    margin: auto;
  }
  .director-minibox > div:nth-child(1) p + p {
    margin-top: 2rem;
  }
}


/**************************************************************
* WHAT’S LUMECCA
**************************************************************/

.about {
  position: relative;
}

.about header {
  margin-top: 5rem;
}

@media all and (max-width: 767px) {
  .about {
    padding-top: 20%;
  }
}

@media all and (min-width: 768px) and (max-width: 1023px) {
  .about {
    margin-bottom: 10%;
  }
}

@media all and (min-width: 1024px) {
  .about::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -1;
    width: 60%;
    height: 100rem;
    margin: auto;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    background-image: linear-gradient(to right, #ffffdb 0%, #ffecec 40%);
    transform: translateY(38.25%);
  }
}

/* ipl-machine-gimmick
********************************/
.ipl-machine-gimmick {
  position: relative;
  top: -2rem;
  right: -2.5rem;
  display: inline-block;
  width: 40%;
  max-width: 30rem;
  /* padding-top: 30%; */
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: contain;
  /* background-image: url(../images/about/tool.jpg); */
}

.ipl-machine-gimmick video {
  width: 100%;
}

@media all and (min-width: 768px) {
  .ipl-machine-gimmick {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 100%;
    padding-top: 50%;
  }
}

@media all and (min-width: 1024px) {
  .ipl-machine-gimmick {
    right: calc(3.66vw + 10rem);
    padding-top: 30%;
    width: 200px;
  }
}

@media all and (min-width: 1536px) {
  .ipl-machine-gimmick {
    top: -8vw;
    right: 12vw;
    width: 14vw;
  }
}

/* special */
@media all and (max-width: 767px) {
  .about .narrowscreen-upper-block {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 8rem;
    padding-left: 5.333%;
    padding-right: 5.333%;
  }

  .about .narrowscreen-animated-gif {
    overflow: hidden;
    display: inline-block !important;
    width: 40%;
    margin: auto;
  }
  .about .narrowscreen-animated-gif video {
    width: 100%;
    object-fit: cover;
  }
}

/* about-data
********************************/
.about-data {
  position: relative;
  margin-top: 2.5rem;
  display: flow-root;
}

@media all and (max-width: 767px) {
  .about-data > dd figure {
    margin-bottom: 5rem;
    text-align: center;
    float: right;
    margin-left: 2.5%;
    width: 250px;
  }
}

@media all and (max-width: 1023px) {
  .about-data {
    padding: 5%;
    background-image: linear-gradient(to right, #ffffdb 0%, #ffecec 40%);
  }
}

@media all and (min-width: 768px) {
  .about-data {
    max-width: 58%;
    margin-top: 16rem;
  }

  .about-data > dd {
    padding-right: 10%;
  }

  .about-data > dd figure {
    width: 80%;
    max-width: 35rem;
    position: absolute;
    top: 40vw;
    right: 0;
    transform: translateX(100%) translateY(45%);
  }

  .about-data>dd video {
    width: 100%;
  }
}

.about-data > dd + dt {
  margin-top: min(6.8359375vw + 1rem, 8rem);
}

.about-data .context-data__ttl-img {
  display: block;
  width: 50%;
  margin-top: 1rem;
}

@media all and (min-width: 768px) {
  .about-data .context-data__ttl {
    display: flex;
  }
  .about-data .context-data__ttl-img {
    display: initial;
    width: 30%;
    margin-top: 0;
    margin-left: 3rem;
  }
}

@media all and (min-width: 1024px) {
  .about-data > dd figure {
    max-width: 35rem;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(110%) translateY(35%);
    width: 200px;
  }

  .about-data > dd figure video {
    width: 100%;
    object-fit: cover;
  }
}

@media all and (min-width: 1536px) {
  .about-data {
    padding-left: min(16vw, 16rem);
  }

  .about-data > dd figure {
    width: 30%;
  }
}

/* about-application-visual
********************************/
.about-application-visual {
  display: block;
  margin-top: min(6.8359375vw + 1rem, 8rem);
}

/* about-application-visual-video
********************************/
.about-application-visual-video {
  width: 100%;
}

/**************************************************************
* EFFECT
**************************************************************/

.effect {
  padding-top: 20%;
}

.effect header {
  margin-bottom: 10rem;
}

@media all and (min-width: 768px) {
  .effect {
    padding-top: 15%;
  }
}

/* effect-data
********************************/
.effect-data {
  position: relative;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
}

.effect-data > dt small {
  display: block;
  font-size: 60%;
}

.effect-data__fig {
  margin-bottom: 8rem;
  text-align: center;
}

@media all and (max-width: 767px) {
  .effect-data__fig {
    max-width: 100%;
    margin-top: 4rem;
    margin-left: auto;
    margin-right: auto;
  }

  .effect-data > dt small {
    font-size: 100%;
  }
}


/* effect-annotations
********************************/
.effect-annotations {
  max-width: 100rem;
  margin-top: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4vw;
  padding-right: 4vw;
}

/* small-blue-droplet-bg
********************************/
.small-blue-droplet-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 15%;
  height: 15%;
  max-width: 20rem;
  max-height: 20rem;
  margin: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.small-blue-droplet-bg[class*="--1"] {
  left: 2.5%;
  background-image: url(../images/effect/blue_droplet_1_bg.jpg);
} 
.small-blue-droplet-bg[class*="--2"] {
  top: -50%;
  left: 8.5%;
  background-image: url(../images/effect/blue_droplet_2_bg.jpg);
} 

/* big-blue-droplet-bg
********************************/
.big-blue-droplet-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 20%;
  max-width: 35.6rem;
  margin: auto;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url(../images/effect/blue_droplet_3_bg.jpg);
}


/**************************************************************
* FLOW
**************************************************************/

.flow {
  padding-top: 20%;
  padding-bottom: 10%;
  overflow: hidden;
}

.flow header {
  margin-top: 5rem;
  margin-bottom: 2rem;
}

@media all and (min-width: 768px) {
  .flow {
    padding-top: 5%;
    padding-bottom: 15%;
  }
}

/* slider
********************************/
.slider__list {
  width: 100%;
  display: flex;
  padding: 0;
  will-change: transform;
}

.slider__item {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}

@media all and (max-width: 767px) {
  .slider {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .slider__item {
    overflow: hidden;
    scroll-snap-align: start;
  }
}

@media all and (min-width: 768px) {
  .slider__item {
    flex: 0 0 50%;
    height: 75vh;
    align-items: center;
    padding-left: 5%;
  }
}

@media all and (min-width: 1024px) {
  .slider__item {
    flex: 0 0 33.33%;
    height: 75vh;
    align-items: flex-start;
  }
}

/* flow-list
********************************/
.flow-list {
  counter-reset: flow-step-counter;
}

.flow-list > li {
  counter-increment: flow-step-counter;
}

/* flow-step
********************************/
.flow-step {
  position: relative;
}
.flow-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  writing-mode: vertical-rl;
  font-family: 'Arial', sans-serif;
  letter-spacing: 0.1em;
  color: var(--accent-2-color);
}

.flow-list > li:nth-child(1) .flow-step::before {
  content: "case1";
}
.flow-list > li:nth-child(2) .flow-step::before {
  content: "case2";
}
.flow-list > li:nth-child(3) .flow-step::before {
  content: "case3";
}
.flow-list > li:nth-child(4) .flow-step::before {
  content: "case4";
}

.flow-step__data {
  /* margin-bottom: min(5.12vw + 1rem, 8rem); */
  margin-bottom: min(2.2vw + 1rem, 4rem);
  padding-left: 8rem;
}

.flow-step__visual {
  position: relative;
}
.flow-step__visual::before {
  content: counter(flow-step-counter);
  position: absolute;
  top: 0;
  left: 1rem;
  display: block;
  font-family: var(--alphabetic-font-family);
  font-size: min(2.78vw + 1rem, 4.8rem);
  color: var(--accent-2-color);
  transform: translateY(-50%);
}

@media all and (max-width: 767px) {
  .flow-step {
    display: grid;
    align-items: flex-end;
  }

  .flow-step__data > dd {
    height: var(--flow-elem-txt-height, auto);
  }
}

@media all and (min-width: 768px) {
  .flow-step {
    top: 10%;
  }

  .flow-step__data {
    height: var(--flow-elem-txt-height, auto);
  }
}

/* horizontal-scroll-notice
********************************/
.horizontal-scroll-notice {
  padding-top: 2.55%;
  padding-left: 2.55%;
  font-size: min(0.88vw + 1rem, 1.2rem);
}

.horizontal-scroll-notice::after {
  content: "";
  position: relative;
  bottom: -1rem;
  display: block;
  width: 100%;
  height: 1px;
  margin: auto;
  background: #000000;
  transform-origin: left 50%;
}

@media all and (min-width: 768px) {
  .horizontal-scroll-notice {
    display: none;
  }
}

/* animations */
.horizontal-scroll-notice::after {
  animation: stretching-effect-2 2s ease-out infinite;
}

@keyframes stretching-effect-2 {
  0% {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}



/**************************************************************
* PRICE
**************************************************************/

.price {
  padding-top: 20%;
  padding-bottom: 24%;
}

.price header {
  margin-bottom: 12rem;
}

@media all and (min-width: 768px) {
  .price {
    padding-top: 5%;
    padding-bottom: 15.5vmin;
  }
}

/* first-time-body
********************************/
.first-time-body {
  display: grid;
  justify-content: center;
  grid-template-columns: 100%;
}

/* first-time-price
********************************/
.first-time-price {
  margin-bottom: calc(5% + 9rem);
}

.first-time-price > dt {
  font-size: min(0.58vw + 1rem, 1.8rem);
}

.first-time-price__core {
  position: relative;
  display: grid;
  gap: 5rem;
}

@media all and (max-width: 767px) {
  .first-time-price {
    text-align: center;
  }
  .first-time-price > dt {
    margin-bottom: 4rem;
    font-size: min(2vw + 1rem, 1.8rem);
  }
}

@media all and (min-width: 768px) {
  .first-time-price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16rem;
  }

  .first-time-price__core { 
    display: flex;
    align-items: center;
    gap: 10rem;
  }
}

/* normal-price
********************************/
.normal-price {
  position: relative;
  text-align: center;
  font-size: min(0.58vw + 1rem, 1.8rem);  
}
.normal-price::after {
  content: "";
  position: relative;
  top: 2rem;
  display: block;
  width: 5.4rem;
  height: 2rem;
  margin: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  background-image: url(../images/price/equal_pattern_bg.png);
}

.normal-price del {
  position: relative;
}
.normal-price del::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  margin: auto;
  background-color: currentColor;
}

.normal-price var {
  font-size: 133.333%;
}
.normal-price small {
  font-size: 58.333%;
}

@media all and (max-width: 767px) {
  .normal-price {
    font-size: min(2vw + 1rem, 1.8rem);
  }

  .normal-price::after {
    margin-top: 2rem;
    margin-bottom: 2rem;
    transform: rotate(90deg);
  }
}

@media all and (min-width: 768px) {
  .normal-price {
    left: -2rem;
  }

  .normal-price::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transform: translateX(calc(100% + 3rem));
  }
}

/* special-price
********************************/
.special-price {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40rem;
  padding: 1rem 0;
  font-size: min(2.666vw + 1rem, 2rem) !important;
  line-height: 1;
  color: var(--accent-3-color);
}

.special-price em {
  padding-left: 5%;
  font-size: 200%;
}

.special-price small {
  position: relative;
  top: -0.25rem;
  font-size: 80%;
  align-self: flex-end;
}

.special-price span > small {
  top: 0.1rem;
  display: block;
  font-size: 65.5%;
  line-height: 1.5;
}

@media all and (max-width: 767px) {
  .special-price {
    min-width: initial;
  }
  .special-price::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80%;
    margin: auto;
    border-bottom: 1px solid var(--btn-background-color);
  }
}

@media all and (min-width: 768px) {
  .special-price {
    padding: 2rem 4rem;
    font-size: min(0.58vw + 1rem, 1.8rem);
    color: var(--base-inverted-color);
    border-radius: 4rem;
    background: var(--btn-background-color);
  }
}


/* price-catch
********************************/
.price-catch {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 1.5rem auto 0;
  text-align: center;
  transform: translateX(0) translateY(150%);
}

@media all and (max-width: 767px) {
  .price-catch {
    left: 0;
    margin: auto;
    text-align: center;
    transform: translateY(150%);
  }
}

@media all and (min-width: 768px) {
  /*.price-catch {
    transform: translateX(-28.5%) translateY(150%);
  }*/
}

/* course-prices-body
********************************/
.course-prices-body {
  width: 100%;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
}

/* course-prices
********************************/
.course-prices {
  width: 100%;
  border-collapse: collapse;
  font-size: min(0.58vw + 1rem, 1.8rem);
}

.course-prices th,
.course-prices td {
  padding: 1.3rem;
  text-align: center;
}

.course-prices thead th {
  background-color: #eeeeee;
  border-color: #eeeeee;
}

.course-prices td,
.course-prices th {
  border-bottom: 1px solid #dddddd;
}

/* table-price
********************************/
.table-price {
  font-size: min(1.024vw + 1rem, 2.4rem);
}
.course-prices var small {
  font-size: 60%;
}

/* course-prices-annotations
********************************/
.course-prices-annotations {
  margin-top: 3rem;
}


/**************************************************************
* FACILITY
**************************************************************/

.facility {
  position: relative;
}

@media all and (min-width: 1024px) {
  .facility::before {
    content: "";
    position: absolute;
    top: calc(100% + 2.5rem);
    left: 0;
    display: block;
    z-index: -1;
    width: 80%;
    height: 80vh;
    background-color: var(--accent-1-background-color);
    transform: translateY(-80%);
  }
}

/* facility-about
********************************/
.facility-about {
  display: grid;
  margin-top: 10rem;
}

.facility-about__visuals {
  position: relative;
}

.facility-about__visuals img:nth-child(2) {
  position: absolute;
  bottom: -4rem;
  right: 0;
}

@media all and (max-width: 767px) {
  .facility-about > p {
    padding-top: 6rem;
  }

  .facility-about__visuals img:nth-child(2) {
    width: 40%;
    height: auto;
    transform: translateX(5%);
  }
}

@media all and (min-width: 768px) {
  .facility-about {
    grid-template-columns: 52.8% 1fr;
    gap: 8.8%;
  }

  .facility-about > p {
    position: relative;
    right: 10%;
    padding-right: 10%;
  }

  .facility-about__visuals img:nth-child(2) {
    width: 50%;
    height: auto;
    transform: translateX(calc(50% - 4.5rem));
  }
}

@media all and (min-width: 1024px) {
  .facility-about > p {
    padding-top: 5rem;
  }
}

@media all and (min-width: 1536px) {
  .facility-about__visuals {
    left: 5%;
  }

  .facility-about__visuals img:nth-child(2) {
    width: inherit;
    height: inherit;
    transform: translateX(calc(75% - 9rem));
  }
}


/**************************************************************
* HOW TO CHOOSE (GUIDANCE)
**************************************************************/

.guidance {
  position: relative;
  padding-bottom: 20%;
}

.guidance header {
  padding-top: 6.5rem;
}

.guidance__body {
  margin-top: 10rem;
}

@media all and (min-width: 768px) {
  .guidance {
    position: relative;
    padding-bottom: calc(10% + 10rem);
  }
}

/* guidance-list
********************************/
.guidance-list {
  display: grid;
  gap: 5rem;
}

.guidance-list > li {
  position: relative;
  display: flex;
}

@media all and (min-width: 768px) {
  .guidance-list {
    grid-template-columns: repeat(3, 1fr);
    gap: min(2.9vw + 1rem, 5rem);
  }
  
  .guidance-list > li:nth-child(2) {
    transform: translateY(5rem);
  }
  .guidance-list > li:nth-child(3) {
    transform: translateY(10rem);
  }

  .guidance-list > li::before,
  .guidance-list > li::after {
    content: "";
    position: absolute;
    bottom: 0.75rem;
    display: block;
    width: 49.5%;
    height: 1px;
    margin: auto;
    z-index: -1;
    box-shadow: 0 1rem 1.5rem #dd1010,
    0 1rem 1.5rem #dd1010,
    0 1rem 1.5rem #dd1010;
  }
  .guidance-list > li::before {
    left: 0;
    transform: rotate(-1.75deg);
  }
  .guidance-list > li::after {
    right: 0;
    transform: rotate(1.75deg);
  }
}

/* guidance-item
********************************/
.guidance-item {
  position: relative;
  padding: min(3.66vw + 1rem, 6rem) min(1.33vw + 1rem, 3rem);
  background: #f9f4f4;
}
.guidance-item::before,
.guidance-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ff9191;
}
.guidance-item::before {
  width: 10rem;
  height: 1px;
}
.guidance-item::after {
  width: 1px;
  height: 3rem;
}

.guidance-item__illust {
  padding-left: 5rem;
  padding-right: 5rem;
  text-align: center;
}

.guidance-item__data {
  margin-top: 4rem;
}
.guidance-item__data > dt {
  margin-bottom: 2.25rem;
  text-align: center;
  font-size: min(1.024vw + 1rem, 2.4rem);
  color: var(--accent-1-color);
}

@media all and (min-width: 768px) {
  .guidance-item__illust {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}


/**************************************************************
* FAQ (QUESTIONS)
**************************************************************/

.faq {
  position: relative;
  display: grid;
}
.faq::before {
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url(../images/faq/qa_bg.jpg);
}

.faq header {
  margin-bottom: 10rem;
}

.faq__body {
  padding-top: 12%;
  padding-bottom: 18%;
  padding-left: 15%;
  padding-right: 15%;
  background-color: var(--accent-1-background-color);
}

@media all and (min-width: 768px) {
  .faq {
    grid-template-columns: 1fr 1fr;
  }
}

/* faq-data
********************************/
.faq-data {
  position: relative;
  margin-bottom: min(7.8125vw + 1rem, 9rem);
}

.faq-data > dt {
  position: relative;
  margin-bottom: 2.5rem;
  font-size: min(0.58vw + 1rem, 1.8rem);
}
.faq-data > dt::before {
  content: "Q.";
  margin-right: 0.5rem;
}

.faq-data > dd:not(:last-child) {
  margin-bottom: min(7.8125vw + 1rem, 9rem);
}


/**************************************************************
* DIRECTOR
**************************************************************/

.director {
  padding-top: 20%;
  padding-bottom: 6vmin;
}

.director header {
  margin-bottom: 10rem;
}

.director__body {
  display: grid;
}

@media all and (max-width: 767px) {
  .director__body {
    gap: 4rem;
  }
}

@media all and (min-width: 768px) {
  .director {
    padding-top: 6.25%;
  }

  .director__body {
    grid-template-areas: 
      "block-1 figure"
      "block-2 figure";

  }

  .director-message {
    grid-area: block-1;
  }
  .director-gallery {
    grid-area: figure;
  }
  .director-career {
    grid-area: block-2;
  }
}

@media all and (min-width: 1536px) {
  .director__body {
    padding-left: 10%;
    padding-right: 10%;
  }
}

/* director-message
********************************/
@media all and (min-width: 768px) {
  .director-message {
    padding-left: 5%;
  }

  .director-message > dd {
    padding-right: 12rem;
  }
}

/* director-signature
********************************/
.director-signature {
  margin-top: 6rem;
  font-size: min(0.58vw + 1rem, 1.8rem);
}

/* director-gallery
********************************/
.director-gallery {
  position: relative;
}

.director-gallery img:nth-child(2) {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(10%, 70%);
}

@media all and (max-width: 767px) {
  .director-gallery img:nth-child(2) {
    width: 50%;
  }
}

@media all and (min-width: 768px) {
  .director-gallery__body {
    position: relative;
  }
}
.director-gallery__body-img-1 {
  border-radius: 6rem;
}

@media all and (min-width: 1536px) {
  .director-gallery img:nth-child(2) {
    transform: translate(30%, 70%);
  }
}

/* director-career
********************************/
.director-career {
  position: relative;
}

.director-career__ttl {
  position: relative;
  margin-bottom: 3rem;
  font-size: min(1.024vw + 1rem, 2.4rem);
  line-height: 1.8;
  letter-spacing: 0.1em;
}
.director-career__ttl::after {
  content: "";
  position: relative;
  top: -0.2rem;
  display: inline-block;
  width: 10rem;
  height: 1px;
  vertical-align: middle;
  margin-left: 1.25rem;
  background-color: currentColor;
}

@media all and (min-width: 768px) {
  .director-career {
    margin-top: 12rem;
    padding-left: 5%;
    padding-right: 12rem;
  }
}

/* career-entry-line
********************************/
.career-entry {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.career-entry:not(:last-child) {
  border-bottom: 1px solid #dddddd;
}

.career-entry__date {
  color: var(--accent-2-color);
}

.career-entry__info {
  margin-left: 5rem;
}


/**************************************************************
* ACCESS
**************************************************************/

.access {
  position: relative;
  margin-top: calc(14.75vw + 2rem);
  padding-top: 22vmin;
  padding-bottom: 2.5%;
  background-color: var(--accent-1-background-color);
}

.access header {
  margin-bottom: 10rem;
}

.access__body {
  max-width: 110rem;
  margin-left: auto;
  margin-right: auto;
}

/* access-directions
********************************/
.access-directions {
  display: grid;
  gap: 4rem;
  margin-bottom: 8rem;
  counter-reset: access-directions-counter;
}

.access-directions__entry {
  counter-increment: access-directions-counter;
}

.access-directions__entry figure {
  position: relative;
}
.access-directions__entry figure::before {
  display: none;
  content: counter(access-directions-counter);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--alphabetic-font-family);
  font-size: min(2.78vw + 1rem, 4.8rem);
  color: var(--accent-2-color);
  transform: translate(20%, -45%);
}


@media all and (min-width: 768px) {
  .access-directions {
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
  }
}

/* access-info
********************************/
.access-info {
  display: grid;
  gap: 12rem;
}

.access-info__logo {
  position: relative;
  margin-bottom: 4rem;
}
.access-info__logo .txt-tag {
  display: block;
  margin-top: 1rem;
}

.access-info__address {
  font-size: min(0.25vw + 1rem, 1.4rem);
}

.access-info__tel {
  margin-bottom: 4rem;
  font-size: min(1.024vw + 1rem, 2.4rem);
  line-height: 1.8;
  color: var(--accent-1-color);
}

.access-info__extra {
  display: flex;
  gap: 2rem;
}
.access-info__extra > dt {
  min-width: 10rem;
}
.access-info__extra > dd small {
  display: block;
  font-size: 86%;
}

/* overrides */
.access-info .cta-btn {
  margin-top: 7rem;
}

@media all and (min-width: 768px) {
  .access-info {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .access-info__guts {
    padding-right: 4.5%;
  }
}


/**************************************************************
* OverRide
**************************************************************/

/**************************************************************
* ENTICEMENT
**************************************************************/
/* enticement-mainBnr
********************************/
@media all and (min-width: 768px) {
  .enticement-mainBnr {
    width: 54.687%;
    max-width: 105rem;
    margin: 5rem auto;
  }
  .enticement-mainBnr-link {
    text-align: center;
  }
  .enticement-mainBnr-link a {
    text-decoration: underline;
  }
}
@media all and (max-width: 767px) {
  .enticement-mainBnr {
    margin: 5rem auto;
  }
  .enticement-mainBnr-link {
    text-align: center;
  }
  .enticement-mainBnr-link a {
    font-size: 1rem;
    text-decoration: underline;
  }
}
.enticement__block {
  padding-top: 10%;
}

/**************************************************************
* PROBLEMS
**************************************************************/
@media all and (min-width: 768px) {
  .problems {
    padding: 8% 0;
  }
}

/* suggestion-price-box
********************************/
@media all and (min-width: 768px) {
  .suggestion-price-box {
    width: 100%;
    max-width: 34rem;
  }
}



/**************************************************************
* customize
**************************************************************/

.faq-data dt::before{
  left: 0;
  position: absolute;
}

.faq-data dt{
  position: relative;
  padding-left: 20px;
}

.faq__list li::before{
  content: "・";
  left: 0;
  position: absolute;
}

.faq__list li{
  position: relative;
  padding-left: 20px;
}



@media all and (max-width:767px) {
  .faq-data dt{
    position: relative;
    padding-left: 20px;
  }

  .faq__list li{
    position: relative;
    padding-left: 15px;
  }
}