@charset "UTF-8";
@keyframes pathmove {0% {height: 0;bottom: 100%;}50% {height: 100%;bottom: 0;}100% {height: 100%;bottom: -100%;}}

/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
.ttl-style-01 {font-size: 125%;}
.ttl-style-01::before, .ttl-style-01::after {display: none;}
.pathmove {position: relative;overflow: hidden;background-color: #ccc;width: 1px;height: 2em;margin: 0 auto;}
.pathmove span {animation: pathmove 1.5s both cubic-bezier(.15, .31, .24, .88) infinite;position: absolute;bottom: 0;right: 0;z-index: 2;background-color: #fff;width: 1px;text-indent: -999em;}

#Contents {padding-top: 0;}
#Billboard {position: relative;background: transparent url("../img/common/bg_02.webp") no-repeat 50% / cover;}
#Billboard h2 {font-size: 200%;font-weight: normal;font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;}
#Billboard h2 + p {margin-top: 2em;font-size: 112.5%;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;}
#Billboard .container {position: relative;z-index: 2;width: calc(100% - 4em);max-width: 1260px;padding: 5em 2em 3em;margin-left: auto;margin-right: auto;box-sizing: border-box;}

#Main {background: transparent url("../img/common/bg_01.webp") no-repeat 50% / cover;}
#Main .block-online-01 {position: relative;background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.9) 100%);}
#Main .block-online-01 h3 {margin-bottom: 0.5em;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 175%;text-align: center;letter-spacing: 0.2em;color: var(--light-blue);}
#Main .block-online-01 h4 {border-top: 1px solid var(--light-blue);border-bottom: 1px solid var(--light-blue);margin-bottom: 1em;padding: 1em 0;color: var(--light-blue);}
#Main .block-online-01 h5 {background: var(--grad-01);margin: 0 0 0.5em;padding: 0.5em 0;font-weight: normal;font-size: 100%;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";color: #fff;text-align: center;}
#Main .block-online-01 .lead {max-width: 42em;margin: 0 auto;text-align: center;line-height: 2.5;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
#Main .block-online-01 .lead span {display: inline-block;white-space: nowrap;}
#Main .block-online-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-online-01 .merit {background: #fff;box-shadow: 0 0 1em rgb(0 0 0 / 5%);border-radius: 1em;margin-top: 3em;padding: 2.5em;overflow: hidden;}
#Main .block-online-01 .merit .grid-list {margin: 0 -1em;}
#Main .block-online-01 .merit .grid-list > div {width: calc(33.33% - 2em);margin: 1em;}
#Main .block-online-01 .merit .grid-list > div p {font-size: 87.5%;}
#Main .block-online-01 .recommend {margin-top: 1.5em;padding: 2.5em;overflow: hidden;}
#Main .block-online-01 .recommend h4 {position: relative;border: 1px solid #ad9d80;border-radius: 3em;max-width: 20em;margin: 0 auto 1em;padding: 0.75em;text-align: center;}
#Main .block-online-01 .recommend h4::before {content: "";position: absolute;top: 50%;left: -5em;right: 100%;height: 1px;background-color: #ad9d80;}
#Main .block-online-01 .recommend h4::after {content: "";position: absolute;top: 50%;right: -5em;left: 100%;height: 1px;background-color: #ad9d80;}
#Main .block-online-01 .recommend h5 {position: relative;background: none;margin-top: 0.25em;padding-bottom: 0;color: var(--light-blue);}
#Main .block-online-01 .recommend h5::before {content: "";position: absolute;bottom: 0;left: 0;right: 0;height: 1px;background-color: #ddd;z-index: 1;}
#Main .block-online-01 .recommend h5::after {content: "";position: relative;z-index: 2;display: block;width: 6em;border-bottom: 1px solid var(--light-blue);margin: 0.5em auto 0;}
#Main .block-online-01 .recommend .grid-list {margin: 0 -1em;}
#Main .block-online-01 .recommend .grid-list > div {width: calc(33.33% - 2em);margin: 1em;}
#Main .block-online-01 .recommend .grid-list > div p {font-size: 87.5%;}
#Main .block-online-01 .recommend .cv a {max-width: 22em;position: relative;margin: 2em auto 0;padding: 1.5em 2.5em 1.5em 1.5em;background: var(--deep-blue) url("../img/common/bg_05.webp") no-repeat 50% / cover;text-align: center;font-size: 112.5%;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";color: #fff;letter-spacing: 0.15em;}
#Main .block-online-01 .recommend .cv a::after {content: "";position: absolute;top: 50%;right: 1em;transform: translateY(-50%);width: 1em;height: 1em;background: transparent url("../img/online/icon_external.svg") no-repeat 50% / contain;filter: invert(96%) sepia(91%) saturate(15%) hue-rotate(132deg) brightness(109%) contrast(100%);}
#Main .block-online-01 .flow {background: transparent url("../img/online/bg_01.webp") no-repeat 50% 0 / cover;ackground-blend-mode: hard-light;background-color: currentColor;box-shadow: 0 0 1em rgb(0 0 0 / 5%);border-radius: 1em;margin-top: 3em;padding: 2.5em;overflow: hidden;}
#Main .block-online-01 .flow h4 {border-color: #426b68;color: #426b68;}
#Main .block-online-01 .flow h4 strong {font-size: 200%;font-weight: normal;line-height: 1;}
#Main .block-online-01 .flow figure {display: flex;flex-direction: column-reverse;margin-bottom: 0.75em;}
#Main .block-online-01 .flow figcaption {background: var(--grad-01);padding: 0.5em 0;font-weight: normal;font-size: 100%;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";text-align: center;color: #fff;}
#Main .block-online-01 .flow figcaption strong {font-size: 200%;font-weight: normal;line-height: 1;}
#Main .block-online-01 .flow .grid-list {margin: 0 -1em;}
#Main .block-online-01 .flow .grid-list > div {width: calc(33.33% - 2em);margin: 1em;}
#Main .block-online-01 .flow .grid-list > div p {font-size: 87.5%;}
#Main .block-online-01 .flow .grid-list > div p a {}
#Main .block-online-01 .flow .grid-list > div p small {display: block;line-height: 1.5;}
#Main .block-online-01 .flow .cv a {max-width: 22em;position: relative;margin: 2em auto 0;padding: 1.5em 2.5em 1.5em 1.5em;background: var(--deep-blue) url("../img/common/bg_05.webp") no-repeat 50% / cover;text-align: center;font-size: 112.5%;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";color: #fff;letter-spacing: 0.15em;}
#Main .block-online-01 .flow .cv a::after {content: "";position: absolute;top: 50%;right: 1em;transform: translateY(-50%);width: 1em;height: 1em;background: transparent url("../img/online/icon_external.svg") no-repeat 50% / contain;filter: invert(96%) sepia(91%) saturate(15%) hue-rotate(132deg) brightness(109%) contrast(100%);}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-online-01 .grid-list > div figure > img {max-width: 350px;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  .ttl-style-01 {letter-spacing: 0;}

  #Billboard h2 + p {margin-top: 0.5em;}
  #Billboard .container {width: 100%;padding: 2em 0 2em;}
  #Billboard::after {background-position: 50%;background-size: auto 100%;}

  #Main .block-online-01 h3 {font-size: 137.5%;letter-spacing: 0;}
  #Main .block-online-01 h4 {margin-bottom: 0;}
  #Main .block-online-01 .container {position: relative;padding-bottom: 3.5em;}
  #Main .block-online-01 .merit {margin-top: 1.5em;}
  #Main .block-online-01 .merit h4 {margin: 0 -1em;}
  #Main .block-online-01 .grid-list > div {width: 100%!important;margin: 2em 0 0!important;}
  #Main .block-online-01 .recommend h4 {margin-bottom: 0;}
  #Main .block-online-01 .recommend .cv {margin: 1.5em -1em 0;}
  #Main .block-online-01 .recommend .cv a,
  #Main .block-online-01 .flow {margin-top: 0;}
  #Main .block-online-01 .flow h4 {margin: 0 -1em;}
  #Main .block-online-01 .flow .cv a {max-width: 100%;margin: 2em -1em -1em;padding: 1em 2.5em 1em 1.5em;line-height: 1.5;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}