@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Playfair+Display:wght@400;500;600;700&display=swap");
* {
  min-inline-size: 0; }

/*==================================================
ふわっ
===================================*/
/* fadeIn */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeInAnime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/* fadeDown */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/* fadeLeft */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
/* fadeRight */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0; }

/*==================================================
ぱたっ
===================================*/
/* flipDown */
.flipDown {
  animation-name: flipDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes flipDownAnime {
  from {
    transform: perspective(2500px) rotateX(100deg);
    opacity: 0; }
  to {
    transform: perspective(2500px) rotateX(0);
    opacity: 1; } }
/* flipLeft */
.flipLeft {
  animation-name: flipLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0; }

@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0; }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1; } }
/* flipLeftTop */
.flipLeftTop {
  animation-name: flipLeftTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(-15deg);
    opacity: 0; }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1; } }
/* flipRight */
.flipRight {
  animation-name: flipRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  opacity: 0; }

@keyframes flipRightAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
    opacity: 0; }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1; } }
/* flipRightTop */
.flipRightTop {
  animation-name: flipRightTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(25deg);
    opacity: 0; }
  to {
    transform: translate(0, 1) rotate(0deg);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger {
  opacity: 0; }

/*==================================================
くるっ
===================================*/
/* rotateX */
.rotateX {
  animation-name: rotateXAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateXAnime {
  from {
    transform: rotateX(0);
    opacity: 0; }
  to {
    transform: rotateX(-360deg);
    opacity: 1; } }
/* rotateY */
.rotateY {
  animation-name: rotateYAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateYAnime {
  from {
    transform: rotateY(0);
    opacity: 0; }
  to {
    transform: rotateY(-360deg);
    opacity: 1; } }
/* rotateLeftZ */
.rotateLeftZ {
  animation-name: rotateLeftZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateLeftZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0; }
  to {
    transform: rotateZ(-360deg);
    opacity: 1; } }
/* rotateRightZ */
.rotateRightZ {
  animation-name: rotateRightZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateRightZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0; }
  to {
    transform: rotateZ(360deg);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger {
  opacity: 0; }

/*==================================================
ぶわっ、ぽんっ、どどんっ
===================================*/
/* zoomIn */
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; }

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }
/* zoomOut */
.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; }

@keyframes zoomOutAnime {
  from {
    transform: scale(1.2);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.zoomInTrigger,
.zoomOutTrigger {
  opacity: 0; }

/*==================================================
じわっ
===================================*/
/* blur */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0; }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.blurTrigger {
  opacity: 0; }

/*==================================================
にょろっ
===================================*/
/* smooth */
.smooth {
  animation-name: smoothAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  　transform-origin: left;
  opacity: 0; }

@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0; }
  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.smoothTrigger {
  opacity: 0; }

/*==================================================
背景色が伸びて出現
===================================*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0; }

@keyframes bgextendAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*左から右*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/ }

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }
/*右から左*/
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/ }

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0); }
  50% {
    transform-origin: right;
    transform: scaleX(1); }
  50.001% {
    transform-origin: left; }
  100% {
    transform-origin: left;
    transform: scaleX(0); } }
/*下から上*/
.bgDUextend::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/ }

@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0); }
  50% {
    transform-origin: bottom;
    transform: scaleY(1); }
  50.001% {
    transform-origin: top; }
  100% {
    transform-origin: top;
    transform: scaleY(0); } }
/*上から下*/
.bgUDextend::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #FFFF00;
  /*伸びる背景色の設定*/ }

@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0); }
  50% {
    transform-origin: top;
    transform: scaleY(1); }
  50.001% {
    transform-origin: bottom; }
  100% {
    transform-origin: bottom;
    transform: scaleY(0); } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
  opacity: 0; }

/*==================================================
枠線が伸びて出現
===================================*/
/*枠線が伸びて出現*/
.lineTrigger {
  position: relative;
  /* 枠線が書かれる基点*/
  opacity: 0; }

.lineTrigger.lineanime {
  animation-name: lineAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes lineAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/*上下線*/
.lineTrigger::before,
.lineTrigger::after {
  position: absolute;
  content: '';
  width: 0;
  height: 1px;
  background: #333;
  /* 枠線の色*/ }

/*左右線*/
.line2::before,
.line2::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 0;
  background: #333;
  /* 枠線の色*/ }

/*上線*/
.lineTrigger::before {
  top: 0;
  left: 0; }

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;
  /*表示されて0秒後に上線が0.5秒かけて表示*/ }

/*右線*/
.line2::before {
  top: 0;
  right: 0; }

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;
  /*表示されて0.5秒後に右線が0.5秒かけて表示*/ }

/*下線*/
.lineTrigger::after {
  bottom: 0;
  right: 0; }

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;
  /*表示されて1秒後に下線が0.5秒かけて表示*/ }

/*左線*/
.line2::after {
  bottom: 0;
  left: 0; }

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;
  /*表示されて1.5秒後に左線が0.5秒かけて表示*/ }

@keyframes lineAnime {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }
@keyframes lineAnime2 {
  0% {
    height: 0%; }
  100% {
    height: 100%; } }
/*枠線内側の要素*/
.lineTrigger.lineanime .lineinappear {
  animation: lineInnerAnime .5s linear 1.5s forwards;
  /*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;
  /*初期値を透過0にする*/ }

@keyframes lineInnerAnime {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*==================================================
アニメーション設定
===================================*/
/* アニメーションの回数を決めるCSS*/
.count2 {
  animation-iteration-count: 2;
  /*この数字を必要回数分に変更*/ }

.countinfinite {
  animation-iteration-count: infinite;
  /*無限ループ*/ }

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05 {
  animation-delay: 0.5s; }

.delay-time08 {
  animation-delay: 0.8s; }

.delay-time1 {
  animation-delay: 1s; }

.delay-time15 {
  animation-delay: 1.5s; }

.delay-time2 {
  animation-delay: 2s; }

.delay-time25 {
  animation-delay: 2.5s; }

/* アニメーション自体が変化する時間を決めるCSS*/
.change-time05 {
  animation-duration: 0.5s; }

.change-time1 {
  animation-duration: 1s; }

.change-time15 {
  animation-duration: 1.5s; }

.change-time2 {
  animation-duration: 2s; }

.change-time25 {
  animation-duration: 2.5s; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0px;
  height: -webkit-fill-available; }

body {
  background-color: #000000;
  margin: 0;
  font-size: 16px;
  box-sizing: border-box;
  font-feature-settings: "palt";
  min-height: 100vh;
  min-height: -webkit-fill-available;
  position: relative; }
  body img {
    width: 100%;
    min-height: 100%;
    min-width: 100%; }

a:link, a:visited, a:hover, a:active {
  text-decoration: none; }

.flCol {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between; }

.grCol {
  display: grid; }

.spBr {
  display: none; }

.tabBr {
  display: none; }

.pcBr {
  display: block; }

@media screen and (max-width: 991px) {
  .tabBr {
    display: block; } }
@media screen and (max-width: 767px) {
  .spBr {
    display: block; }

  .pcBr {
    display: none; } }
.text-xxs {
  font-size: 0.625rem;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.8em;
  font-weight: 400; }

.text-xs {
  font-size: 0.75rem;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.8em;
  font-weight: 400; }

.text-sm {
  font-size: clamp(0.75rem, calc(0.6943rem + 0.241vw), 0.875rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 2em;
  font-weight: 400; }
  .text-sm.bold {
    font-weight: 700; }

.text-md {
  font-size: clamp(0.875rem, calc(0.6964rem + 0.5714vw), 1.125rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 2em;
  font-weight: 400; }
  .text-md.bold {
    font-weight: 700; }

.text-lg {
  font-size: clamp(1.125rem, calc(0.9464rem + 0.5714vw), 1.375rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.5em;
  font-weight: 700; }

.text-xl {
  font-size: clamp(1rem, calc(0.7214rem + 1.2048vw), 1.625rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.5em;
  font-weight: 700; }

.text-xxl {
  font-size: clamp(1.125rem, calc(0.7349rem + 1.6867vw), 2rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.5em;
  font-weight: 700; }

.text-3l {
  font-size: clamp(1.375rem, calc(-0.3214rem + 5.4286vw), 3.75rem);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  line-height: 1.35em;
  font-weight: 900; }

.text-4l {
  font-size: clamp(1.625rem, calc(0.1071rem + 4.8571vw), 3.75rem);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  line-height: 1.35em;
  font-weight: 900; }

.sectionTitle {
  font-size: clamp(1.625rem, calc(0.1071rem + 4.8571vw), 3.75rem);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  line-height: 1.35em;
  font-weight: 900;
  display: flex;
  flex-direction: column-reverse;
  padding: 1em 0; }
  .sectionTitle span:last-child {
    font-size: clamp(0.875rem, calc(0.6964rem + 0.5714vw), 1.125rem);
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
    line-height: 2em;
    font-weight: 700; }

.subTitle {
  font-size: clamp(1.125rem, calc(0.9464rem + 0.5714vw), 1.375rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.5em;
  font-weight: 700; }

.readText {
  font-size: clamp(0.875rem, calc(0.6964rem + 0.5714vw), 1.125rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 2em;
  padding: 1em 0; }

.notesText {
  font-size: 0.625rem;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.8em;
  font-weight: 400; }

main {
  font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
  main :root {
    --padding-set: 5vw; }
    @media screen and (max-width: 991px) {
      main :root {
        --padding-set: 5vw; } }
    @media screen and (max-width: 767px) {
      main :root {
        --padding-set: 10vw; } }
  main .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto; }
  main .bg {
    position: relative; }
    main .bg::after {
      content: "";
      width: 100%;
      height: 100%;
      background-image: url("../images/common/bg.webp");
      background-repeat: repeat;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2; }

#menuCol {
  font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  position: fixed;
  width: 180px;
  height: 100%;
  overflow: hidden;
  z-index: 1000;
  top: 0;
  left: 0; }

@media screen and (max-width: 991px) {
  #menuCol {
    width: 50px; } }
@media screen and (max-width: 767px) {
  #menuCol {
    width: 40px; } }
#headerCol {
  font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  position: relative;
  height: 100%;
  height: 100vh;
  height: 100dvh; }
  #headerCol #headerColInner {
    transition: .5s ease;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    height: 100dvh;
    padding: 40px 20px; }
    #headerCol #headerColInner .title {
      writing-mode: vertical-rl;
      text-orientation: upright;
      margin: 40px auto;
      font-size: clamp(0.625rem, calc(0.4464rem + 0.5714vw), 0.875rem);
      font-weight: 500;
      letter-spacing: 0.1em; }
    #headerCol #headerColInner .menuSet {
      margin-top: auto; }
      #headerCol #headerColInner .menuSet .item a {
        position: relative;
        font-size: clamp(0.625rem, calc(0.4464rem + 0.5714vw), 0.875rem);
        font-size: 0.875rem;
        line-height: 2.5em;
        width: 100%;
        display: block; }
        #headerCol #headerColInner .menuSet .item a:after {
          content: "";
          position: absolute;
          top: 50%;
          right: 0;
          font-size: 0.875rem;
          width: 0.5em;
          height: 0.5em;
          border-right: 1px solid #FFFFFF;
          border-bottom: 1px solid #FFFFFF;
          transform: translateY(-65%) rotate(-45deg);
          transition: .4s ease;
          z-index: -1; }
        #headerCol #headerColInner .menuSet .item a:hover:after {
          transform: translateY(-45%) rotate(0deg); }
      #headerCol #headerColInner .menuSet .openbtn {
        display: none; }

@media screen and (max-width: 991px) {
  #headerCol #headerColInner {
    padding: 20px 10px; }
    #headerCol #headerColInner .menuSet {
      display: none; }
    #headerCol #headerColInner .openbtn {
      position: relative;
      display: block;
      z-index: 9999;
      cursor: pointer;
      width: 100%;
      height: 50px;
      margin: 0 auto;
      transition: all .3s; }
      #headerCol #headerColInner .openbtn span {
        display: inline-block;
        transition: all .3s;
        position: absolute;
        left: 0;
        height: 1px;
        background-color: #FFFFFF;
        width: 100%; }
        #headerCol #headerColInner .openbtn span:nth-of-type(1) {
          top: 15px; }
        #headerCol #headerColInner .openbtn span:nth-of-type(2) {
          top: 23px; }
        #headerCol #headerColInner .openbtn span:nth-of-type(3) {
          top: 31px; }
      #headerCol #headerColInner .openbtn:hover {
        width: 80%; } }
#g-nav {
  font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  position: fixed;
  z-index: 99999999;
  top: 0;
  right: -120%;
  width: 100%;
  height: 100vh;
  transition: all 0.3s;
  color: #FFFFFF; }
  #g-nav::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/common/bg-gnavi.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; }
  #g-nav.panelactive {
    right: 0; }
    #g-nav.panelactive #g-nav-list {
      position: fixed;
      z-index: 999;
      width: 100%;
      height: 100vh;
      overflow: auto;
      -webkit-overflow-scrolling: touch; }
  #g-nav .navInner {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(80%, 600px); }
    #g-nav .navInner .logo {
      width: clamp(130px, 20vw, 300px);
      margin-inline: auto;
      margin-bottom: 50px; }
    #g-nav .navInner .navCol .item a {
      position: relative;
      font-size: 0.875rem;
      line-height: 2.5em;
      width: 100%;
      display: block; }
      #g-nav .navInner .navCol .item a:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        font-size: 0.875rem;
        width: 0.5em;
        height: 0.5em;
        border-right: 1px solid #FFFFFF;
        border-bottom: 1px solid #FFFFFF;
        transform: translateY(-65%) rotate(-45deg);
        transition: .4s ease;
        z-index: -1; }
      #g-nav .navInner .navCol .item a:hover:after {
        transform: translateY(-45%) rotate(0deg); }
    #g-nav .navInner .navCol .closeBtn {
      cursor: pointer;
      position: relative;
      width: clamp(200px, 20vw, 300px);
      position: relative;
      display: block;
      border: 1px solid #FFFFFF;
      text-align: center;
      font-size: 0.875rem;
      padding: 0.8em;
      margin-top: 50px;
      margin-inline: auto; }
      #g-nav .navInner .navCol .closeBtn .close {
        font-size: 0.875rem;
        position: absolute;
        z-index: 9999;
        top: 50%;
        right: 20px;
        cursor: pointer;
        width: 30px;
        height: 30px;
        transform: translateY(-50%); }
        #g-nav .navInner .navCol .closeBtn .close span {
          display: inline-block;
          transition: all .3s;
          position: absolute;
          right: 0;
          height: 1px;
          background-color: #FFFFFF;
          width: 100%; }
          #g-nav .navInner .navCol .closeBtn .close span:nth-of-type(1) {
            top: 50%;
            right: 0;
            transform: translateY(-50%) rotate(-45deg);
            width: 100%; }
          #g-nav .navInner .navCol .closeBtn .close span:nth-of-type(2) {
            opacity: 0; }
          #g-nav .navInner .navCol .closeBtn .close span:nth-of-type(3) {
            top: 50%;
            right: 0;
            transform: translateY(-50%) rotate(45deg);
            width: 100%; }

#mainFooter {
  background-color: aliceblue;
  padding: 200px 5%;
  height: 100%; }

main #wrap .bg {
  position: relative; }
  main #wrap .bg::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../images/common/bg.webp");
    background-repeat: repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; }
main#top__l #kvCol {
  position: relative; }
  main#top__l #kvCol .titleCol {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; }
    main#top__l #kvCol .titleCol .logo {
      width: min(20vw, 200px);
      height: auto; }
    main#top__l #kvCol .titleCol .text {
      text-indent: 1em;
      font-size: clamp(1.625rem, calc(0.1071rem + 4.8571vw), 3.75rem);
      font-feature-settings: "palt";
      letter-spacing: 0.05em;
      line-height: 1.35em;
      font-weight: 900; }
  main#top__l #kvCol #video-wrap {
    position: relative;
    height: 100vh; }
    main#top__l #kvCol #video-wrap #video-area {
      position: fixed;
      z-index: -3;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      overflow: hidden; }
      main#top__l #kvCol #video-wrap #video-area #video {
        position: absolute;
        z-index: -3;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        aspect-ratio: 16 / 9;
        width: auto;
        height: auto;
        min-height: 100%;
        min-width: 100%; }
main#top__l #about {
  position: relative;
  margin-top: 76px;
  color: white; }
  main#top__l #about::before {
    content: "";
    width: 100%;
    height: 76px;
    background-image: url("../images/top/sky__h.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: absolute;
    top: -76px;
    left: 0;
    z-index: -2; }
  main#top__l #about::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("../images/top/sky__c.webp");
    background-repeat: repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2; }
  main#top__l #about .text__wrap {
    padding: min(8%, 6em) 0; }
    main#top__l #about .text__wrap .titleCol {
      padding: 0 0 min(4%, 2em) 0; }
    main#top__l #about .text__wrap .textCol {
      padding: 0 0 min(6%, 4em) 0; }
  main#top__l #about .illustCol {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1; }
    main#top__l #about .illustCol .illust {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%; }
main#transfer__l #wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100vh; }
main#transfer__l #sec01 {
  position: relative;
  width: 90%;
  padding: 5%; }
  main#transfer__l #sec01 .titleCol {
    display: flex;
    justify-content: center;
    align-items: center; }
    main#transfer__l #sec01 .titleCol .logo {
      width: min(20vw, 200px);
      height: auto; }
    main#transfer__l #sec01 .titleCol .text {
      text-indent: 1em;
      font-size: clamp(1.625rem, calc(0.1071rem + 4.8571vw), 3.75rem);
      font-feature-settings: "palt";
      letter-spacing: 0.05em;
      line-height: 1.35em;
      font-weight: 900; }
  main#transfer__l #sec01 .col {
    background-color: #ffeacd;
    text-align: center;
    border-radius: 20px;
    padding: 5%;
    margin: 60px 0; }
    main#transfer__l #sec01 .col .text {
      font-size: clamp(0.875rem, calc(0.6964rem + 0.5714vw), 1.125rem);
      font-feature-settings: "palt";
      letter-spacing: 0.1em;
      line-height: 2em;
      font-weight: 400; }
    main#transfer__l #sec01 .col .text02 {
      margin-top: 1em;
      font-size: 0.625rem;
      font-feature-settings: "palt";
      letter-spacing: 0.1em;
      line-height: 1.8em;
      font-weight: 400; }
    main#transfer__l #sec01 .col.col02 .text {
      margin-bottom: 2em; }
    main#transfer__l #sec01 .col.col02 .iconInstagram a {
      display: block;
      width: min(10vw, 150px);
      height: auto;
      margin: 0 auto; }
      main#transfer__l #sec01 .col.col02 .iconInstagram a img {
        vertical-align: bottom; }
  main#transfer__l #sec01 .copy {
    font-size: 0.625rem;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
    line-height: 1.8em;
    font-weight: 400;
    text-align: center; }
@media screen and (max-width: 767px) {
  main#transfer__l #sec01 {
    position: relative;
    width: 95%;
    padding: 5%; }
    main#transfer__l #sec01 .titleCol {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      main#transfer__l #sec01 .titleCol .logo {
        width: min(30vw, 200px);
        height: auto; }
      main#transfer__l #sec01 .titleCol .text {
        text-indent: unset;
        font-size: clamp(1.625rem, calc(0.1071rem + 4.8571vw), 3.75rem);
        font-feature-settings: "palt";
        letter-spacing: 0.05em;
        line-height: 1.35em;
        font-weight: 900;
        margin-top: .3em; }
    main#transfer__l #sec01 .col {
      text-align: center;
      border-radius: 10px;
      padding: 5%;
      margin: 40px 0; }
      main#transfer__l #sec01 .col .text {
        font-size: clamp(0.875rem, calc(0.6964rem + 0.5714vw), 1.125rem);
        font-feature-settings: "palt";
        letter-spacing: 0.1em;
        line-height: 2em;
        font-weight: 400; }
      main#transfer__l #sec01 .col.col02 .text {
        margin-bottom: 1em; }
    main#transfer__l #sec01 .copy {
      font-size: 0.625rem;
      font-feature-settings: "palt";
      letter-spacing: 0.1em;
      line-height: 1.8em;
      font-weight: 400;
      text-align: center; } }

#transfer {
  background-color: #fffeeb; }

/*# sourceMappingURL=style.css.map */