@charset "UTF-8";

html {
  font-size: 62.5%;
  /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
  /* #important非推奨のため後程変更 */
  scroll-behavior: auto !important;
}

body {
  color: #000;
  font-family: "Sawarabi Gothic", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center; /* デフォルトで中央寄せ */
  margin: 0; /* bodyのマージンをリセット */
}

img {
  width: 100%; /* 画像は親要素の幅いっぱいに */
  height: auto; /* 高さは自動調整 */
}

/*モバイル/デフォルトスタイル*/
.sp_nav {
  height: 5rem;
}

.logo {
  width: 81.424px;
  height: 56px;
  flex-shrink: 0;
  aspect-ratio: 81.42 / 56.00;
  margin: 0 auto;
}

.nav_logo_set {
  display: flex;
  flex-direction: column;
}

.IGlogo {
  width: 20px;
  height: 19.75px;
  flex-shrink: 0;
  margin-top: 4rem;
}

.menu_open {
  /* 見やすくするため（あとで消す） */
  background-color: #E3B3A1;
  width: 48px;
  height: 48px;
  position: absolute;
  /* 子要素のabsolute配置のために必要 */
  display: flex;
  /* flexboxで中央揃えなどに使っても良い */
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10000;
}


/* ハンバーガーメニューの線（span要素） */
.menu_open span {
  display: block;
  position: absolute;
  height: 2px;
  width: 30px;
  background: #ffffff;
  border-radius: 2px;
  /* transition: all 0.3s ease; */
  transition: all 3s ease;
  
}

/* 1本目の線 */
.menu_open span:nth-of-type(1) {
  top: 17px;
}

/* 2本目の線 (中央) */
.menu_open span:nth-of-type(2) {
  top: 23px;
  /* 上からの位置調整 (中央) */
}

/* 3本目の線 */
.menu_open span:nth-of-type(3) {
  top: 29px;
  /* 上からの位置調整 */
}

/* menu_open_active */
.menu_open.active span:nth-of-type(1) {
  -webkit-transform: translateY(4.5px) rotate(-315deg);
  transform: translateY(4.5px) rotate(-315deg);
}

.menu_open.active span:nth-of-type(2) {
  opacity: 0;
}

.menu_open.active span:nth-of-type(3) {
  -webkit-transform: translateY(-7px) rotate(315deg);
  transform: translateY(-7px) rotate(315deg);
}


/* mainvisualゾーン */
.mainvisual_PC {
    display: none; /* モバイルではPC用動画を非表示 */
}


.mainvisual_SP {
    display: block; /* モバイルではSP用動画を表示 */
    width: 100%;
    /* max-width: 37.5rem; */
    height: 100%; /* 親の#mainvisualの高さに合わせる */
    object-fit: cover; /* 縦横比を保ちつつ、要素全体を覆うように表示 */
}

#iconRow .iconRow_item {
  width: 200%;
}

.iconRow_item {
  animation: iconRow_item 16s linear infinite;
  margin-left: 2rem;
}



/* PC用のナビゲーションとメインビジュアルはモバイルでは非表示 */
.pc_nav {
  display: none;
}



/* ここからメイン */
.section_title {
  color: #FFF;
  /* ドロップシャドウ */
  text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25);
  -webkit-text-stroke-width: 0.1rem;
  -webkit-text-stroke-color: #000;
  font-family: "Segoe Print";
  font-size: 4rem;
  line-height: 4rem;
  /* 100% */
  margin-top: 6rem;
}

.subSection_title {
  font-size: 2rem;
  margin-top: 2.5rem;
}

.section_subTitle {
  font-size: 1.8rem;
  margin-top: 4rem;
}

.sectiontxt {
  padding: 0 5.5rem;
  flex-shrink: 0;
  /* max-width: 26.5rem; */
  line-height: 2.5rem;
  text-align: left;
  margin-top: 1.5rem;
  letter-spacing: 0.12rem;
}

.iconCharacter_speechBubble {
  display: flex;
  margin-top: 10rem;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6rem;
}


    .tableTalkLogo {
      width: 50%;
      display: inline-block;
      margin: 3rem;
    }



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


    /* PC用動画の表示 */
    #mainvisual .mainvisual_PC {
        display: block; 
        width: 100%;
        height: 100%; 
        object-fit: cover;
    }

    .mainvisual_SP {
      display: none;
    }



    #content-area {
        flex: 1;
        /* フッター以外の残りの高さをすべて占める */
        display: flex;
        overflow: hidden;
        /* コンテンツがはみ出したら隠す（必要に応じてautoに変更） */
      }



    main section {
      text-align: left;
    }




    .pc_nav h1 {
      margin: 0;
      /* デフォルトマージンをリセット */
    }



    #iconRow .iconRow_item {
    margin-left: 3rem;
    width: 100%;
}


    #about{
        display: flex;
        height : 35rem;
    }
    
    #about_PC{
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: -26px;;
    }

    .section_title{
      margin-top: 0;
    }


    #about .sectiontxt{
      padding-left: 0;
      width: 40rem;
      height: 30rem;
    }


    .aboutInfo{
      padding-left: 4rem;
      width: 53rem;
      height: 74rem;
      flex-shrink: 0;
    }

    .aboutInfo .subSection_title{
      text-align: left;
    }


    .aboutsection-left {
      display: flex;
      padding-left: 5rem;
      padding-left: 5%;
      width: 50%;
    }



    .iconCharacter_speechBubble{
      margin-top : 20rem;
    }

    #contact  .iconCharacter_speechBubble {
      margin-top : 30rem;
    }



      .newEvent_button {
    align-items: center;
    text-align: center;
    }


        .contactsection-right {
      display: flex;
      flex-direction: column;
      width: 43rem;
      flex-shrink: 0;
      text-align: center;
    }

    #contact .decorationUnderscore {
      display: block;
      margin: 0 auto;
    }

    #contact .sectiontxt {
      width: 40rem;
      height: 20rem;
      padding-left: 9rem;
      padding-right: 5.5rem;
      }

    #contact{
        display: flex;
        flex-direction: row-reverse;
    }

    .tableTalkLogo {
      width: 50%;
      display: inline-block;
      margin: 3rem;
    }


  footer.footer {
    flex-shrink: 0;
    background-color: #FFF0E1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }


  footer.footer .iconRow {
    margin-top: 0;

  }

  footer.footer .footertxt {
    padding: 0;
    max-width: 800px;
  }

  footer.footer .footer_nav_list {
    margin: 2rem auto 0;
  }

  footer.footer .nav_logo_set {
    margin: 2rem 0 0;
  }



  .TopBack {
    position: absolute;
    right: 10rem;
    bottom: 2.5rem;
  }
}





@media (min-width: 1025px) {
    #wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }

    /* メインビジュアルのコンテナ */
    #mainvisual {
        height: 70rem; /* PCでのメインビジュアルの固定高さを設定（必要に応じて調整） */
        flex-shrink: 0;
        width: 100%;
        overflow: hidden; /* 動画がはみ出さないように */
        display: flex; /* 動画を中央に配置する場合などに使用 */
        justify-content: center;
        align-items: center;
    }

    /* PC用動画の表示 */
    #mainvisual .mainvisual_PC {
        display: block; /* PCではPC用動画を表示 */
        width: 100%;
        height: 100%; /* 親の#mainvisualの高さに合わせる */
        object-fit: cover; /* 縦横比を保ちつつ、要素全体を覆うように表示 */
    }

    /* SP用動画の非表示 */
    #mainvisual .mainvisual_SP {
        display: none; /* PCではSP用動画を非表示 */
    }




    #content-area {
        flex: 1;
        /* フッター以外の残りの高さをすべて占める */
        display: flex;
        overflow: hidden;
        /* コンテンツがはみ出したら隠す（必要に応じてautoに変更） */
      }

    header {
      width: 20rem;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      background-color: #FFF0E1;
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
      padding: 0;
      height: 100vh;
      position: fixed;
    }


    main {
      flex: 1;
      /* ヘッダー以外の残りの幅をすべて占める */
      display: flex;
      /* mainvisualとその他のsectionを縦に並べる */
      flex-direction: column;
      padding-left: 20rem;
      text-align: left;
      /* bodyのtext-align: centerを上書き */
    }


  /* 各セクション（About, Events, Contactなど）の共通パディング */
    main section {
      text-align: left;
    }


    .sp_nav {
      display: none;
    }

    /* PC用のナビゲーションを表示する */
    .pc_nav {
      display: flex;
      /* Flexboxを適用して子要素を縦並びにする */
      flex-direction: column;
      /* ロゴ、ul、IGロゴを縦に並べる */
      justify-content: flex-start;
      /* 上寄せ */
      align-items: center;
      /* 中央揃え (横方向) */
      padding: 0;
      /* headerでパディングを管理するためリセット */
      box-shadow: none;
      /* header全体にシャドウがあるので不要 */
      height: 100%;
      /* 親のheaderの高さに合わせる */
    }

    .pc_nav h1 {
      margin: 0;
      /* デフォルトマージンをリセット */
    }

    .pc_nav .logo {
      width: 10rem;
      /* PCでのロゴサイズ */
      height: auto;
      margin-top: 2rem;
      /* 上からの余白 */
    }

    .pc_nav nav ul {
      display: flex;
      list-style: none;
      flex-direction: column;
      /* リンクアイテムを縦に並べる */
      margin: 3rem 0;
      /* ロゴとIGロゴの間の余白 */
      padding: 0;
      gap: 2rem;
    }

    /* ナビゲーションテキストのスタイルは既存のまま */
    .pc_nav nav li a {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      color: #333;
      white-space: nowrap;
    }

    .pc_nav nav .nav-text-primary {
      font-size: 1.2rem;
      font-weight: bold;
    }

    .pc_nav nav .nav-text-secondary {
      font-size: 0.8rem;
      color: #666;
    }

    .pc_nav > a {
      margin-bottom: 2rem;
      /* 下からの余白 */
      margin-left: 0;
    }

    .pc_nav .IGlogo {
      width: 2rem;
      height: 2rem;
      /* margin-top: 0; /* 既存のmargin-topをリセット（pc_nav > aでマージンを設定したため） */
      display: block;
      }

    #iconRow .iconRow_item {
    margin-left: 4rem;
    width: 100%;
    }

    #about{
        display: flex;
        height : 35rem;
    }
    
    #about_PC{
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: -26px;;
    }

    .section_title{
      margin-top: 0;
    }


    #about .sectiontxt{
      padding-left: 0;
      width: 40rem;
      height: 30rem;
    }


    .aboutInfo{
      padding-left: 4rem;
      width: 53rem;
      height: 74rem;
      flex-shrink: 0;
    }

    .aboutInfo .subSection_title{
      text-align: left;
    }


    .aboutsection-left {
      display: flex;
      padding-left: 5rem;
      padding-left: 5%;
      width: 50%;
    }



    .iconCharacter_speechBubble{
      margin-top : 20rem;
    }

     #contact  .iconCharacter_speechBubble {
      margin-top : 30rem;
    }

    .newEvent_button {
    align-items: center;
    text-align: center;
  }

      .contactsection-right {
      display: flex;
      flex-direction: column;
      padding-right: 10rem;
      width: 53rem;
      flex-shrink: 0;
      text-align: center;
    }

    #contact .decorationUnderscore {
      display: block;
      margin: 0 auto;
    }

    #contact .sectiontxt {
      height: 16rem;
      padding: 0;
      }

    #contact{
        display: flex;
        flex-direction: row-reverse;
    }

    a.contact_button {
    margin-top: 0;
    }

    .tableTalkLogo {
      width: 50%;
      display: inline-block;
      margin: 3rem;
    }


    .footer {
    position: relative;
    display: flex;
    padding-left: 20rem;
  }

.footer_nav{
  display: none;
}



  footer.footer {
    flex-shrink: 0;
    background-color: #FFF0E1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }


  footer.footer .iconRow {
    margin-top: 0;
    /* overflow: visible; */

  }

  footer.footer .footertxt {
    padding: 0;
    max-width: 800px;
  }

  footer.footer .footer_nav_list {
    margin: 2rem auto 0;
  }

  footer.footer .nav_logo_set {
    margin: 2rem 0 0;
  }

  /* ハンバーガーメニューはPCでは完全に非表示 */
  .menu_open {
    display: none;
  }

  .TopBack {
    position: absolute;
    right: 10rem;
    bottom: 2.5rem;
  }

}



/* ドロワーメニュー */

.drawer {
    background-color: rgb(255,240,225,0.9);
    width: 100%;
    height: 100vh;
    position:fixed;
    top: 0;
    left: 0;
    z-index:5000;
    transform: translateX(-100%);
    transition: 0.4s;

    display: flex; 
    flex-direction: column; 
    align-items: center; 
    box-sizing: border-box; 
    padding-top: 2rem;
} 

.drawerMenu {
   display: flex;
    flex-direction: column;
    align-items: anchor-center;
}

.drawerMenu .img {
  display: block;
}

.drawerMenu .IGlogo {
  margin-top: 0;
  margin-bottom: 2rem;
  display: block;
}

.drawerMenu .decorationUnderscore {
  margin-bottom: 2rem;
}


.drawerMenu .p {
  max-width: 37.5rem;
}

.drawerMenu_nav__item a {
  font-size: 1.6rem;
}



.drawerMenu .txtLogo {
  width: 200px;
  height: auto;
  flex-shrink: 0;
  aspect-ratio: 314.57/93.00;
}

.drawer.active {
  transform: translateX(0);
}

.drawerMenu_nav__item {
  margin-bottom: 2rem;
}

.drawerMenu_nav__item a,
.drawerMenu_nav__item img {
  display: block;
  text-align: center;
}


.drawerMenu_nav__list .drawerMenu_nav__item .icon1{
  width: 90px;
  height: 91px;
  flex-shrink: 0;
  aspect-ratio: 90/91;
}
.drawerMenu_nav__list .drawerMenu_nav__item .icon2{
  width: 73px;
  height: 91px;
  flex-shrink: 0;
  aspect-ratio: 73/91;
}
.drawerMenu_nav__list .drawerMenu_nav__item .icon3{
  width: 88px;
  height: 93px;
  flex-shrink: 0;
  aspect-ratio: 88/93;
}
.drawerMenu_nav__list .drawerMenu_nav__item .icon4{
  width: 74px;
  height: 88px;
  flex-shrink: 0;
  aspect-ratio: 37/44;
}





/* iconスライド */
.iconRow {
  margin-top: 1rem;
  width: 100%;
  max-width: 144rem;
  /* display: block; */
  white-space: nowrap;
  /* 画像が改行されないようにする */
  overflow: hidden;
}

@keyframes iconRow_item {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}


 




@keyframes poyoyon {
  0% {
    transform: translateX(140px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 1;
  }
}



.hairAsymmetry_iconCharacter {
  width: 65px;
  height: 60px;
  flex-shrink: 0;
  aspect-ratio: 13/12;
}

.speech_bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
}



.about_speech_bubble_top {
  /* display: block; */
  background-color: #000;
  height: 1px;
  width: 150px;
  transform: rotate(30deg) translateY(-40px);
}

.about_speech_bubble_under {
  display: block;
  background-color: #000;
  height: 1px;
  width: 150px;
  transform: rotate(-10deg) translateY(20px);
}




/* event */

#event {
  /* margin-top: 12rem; */
  height: 50rem;
  flex-shrink: 0;
}

#event .section_title, 
.subSection_title {
  text-align: center;
}

#event .decorationUnderscore {
  display: block;
  margin: 0 auto;
}




/* sp-slider */
.content_area {
  max-width: 700px;
  padding: 0 40px;
  margin: 2rem auto;
}

.sp-slider img {
  padding: 1.5%;
}



a.newEventLink{
  display: inline-block;
  padding: 1.5rem 2.5rem;
  color: #000;
  border-radius: 0;
  background: #E3B3A1;
  text-decoration: none;
  }




/* contactSP */
/* contact_button */
.contact_button {
  margin-top: 2rem;
  display: inline-block;
  overflow: hidden;
  /* 光沢部分がはみ出さないように隠す */
  position: relative;
  /* 擬似要素の基準位置にする */
  padding: 1.5rem 6rem;
  color: #000;
  border-radius: 0;
  background: #C9E8D6;
  /* ボタンの背景色 */
  text-decoration: none;
  /* リンクの下線をなくす */
  transition: background 0.3s ease;
  /* ホバー時の背景色変化を滑らかに */
}

a.contact_button span {
  position: relative;
  /* spanテキストが擬似要素の上に表示されるようにする */
  z-index: 1;
  /* 擬似要素より手前に表示 */
}

a.contact_button::before {
  content: '';
  /* 擬似要素には content が必須 */
  position: absolute;
  top: 0;
  left: 0;
  /* 左端から開始 */
  width: 150%;
  /* 光沢の幅をボタンより広くする */
  height: 500%;
  /* 光沢の高さをボタンより高くする */
  background: #E0BFE8;
  /* 白い半透明の光沢 */
  /* ホバー前の初期位置（ボタンの左外から右上に向かって傾ける） */
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-70%) rotate(135deg);
  transform: translateX(-98%) translateY(-70%) rotate(135deg);
  pointer-events: none;
  /* 擬似要素がクリックを邪魔しないようにする */
  z-index: 0;
  /* spanテキストより奥に表示 */
}

a.contact_button:hover::before {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(135deg);
  transform: translateX(-9%) translateY(-25%) rotate(135deg);
}

/* (オプション) ホバーでボタンの背景色を変える場合 */
a.contact_button:hover {
  background: #fff;
  /* ホバー時のボタン背景色 */
}

/* contactイラスト */
.contact_speech_bubble_top {
  /* display: block; */
  background-color: #000;
  height: 1px;
  /* 線の高さ */
  width: 150px;
  /* 線の長さ */
  transform: rotate(150deg) translateY(40px);
}

.contact_speech_bubble_under {
  display: block;
  background-color: #000;
  height: 1px;
  /* 線の高さ */
  width: 150px;
  /* 線の長さ */
  transform: rotate(190deg) translateY(-20px);
}

.hairMitsuami_iconCharacter {
  width: 51.709px;
  height: 66px;
  flex-shrink: 0;
  aspect-ratio: 51.71 / 66.00;
}

#contact .section_title {
  margin-top: 12rem;
}






/* footer*/

footer {
  background-color: #FFF0E1;
}



.footer_nav_list {
  display: flex;
  max-width: fit-content;
  margin: 3rem auto 0;
  gap: 2.5rem
}

.footer_nav_items {
  display: flex;
  flex-direction: column;
}

.nav_logo_set {
  margin: 5rem;
}





.footer {
  position: relative;
}

.TopBack {
  position: absolute;
  display: flex;
  flex-direction: column;
  right: 2rem;
  bottom: 2rem;


}
.hairPattun_iconCharacter {
  width: 48px;
  height: 49.1px;
  flex-shrink: 0;
  aspect-ratio: 76.20 / 78.10;
}