@charset "utf-8";

/* 基本のリセット */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  overflow-x: hidden; /* 横のはみ出しを隠す */
}

header {
  background-color: #E31B13;
  margin: 0;
  padding: 64px 64px 120px;
  width: 100%;
}

body {
  font-family: "あおとゴシック DB","Aoto Gothic DemiBold","Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo",sans-serif;
  scrollbar-width: none; /* Firefox */
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

header,footer {
  background-color: #E31B13;
}

.header-top-message,main,footer {
  text-align: center;
}

main {
  padding: 250px 96px 120px;
  color: #E31B13;
}

footer {
  padding: 64px 64px 32px;
  width: 100%;
  height: auto;
    
}

.main-outline-text-container {
  text-align: left;
  display: inline-block;
}

.footer-text {
  text-align: center;
  display: inline-block;
}



/*　TOP NEWS詳細--------------------------------------------------------------------------------------------- */

/* NEWSの細かい文字詰め */
.tsume_1 {
  margin-top: 6px;
}

.tsume_2 {
  margin-left: 6px;
}

.tsume_3 {
  margin-top: -8px;
}

.tsume_4 {
  margin-left: -8px;
}

.tsume_5 {
  margin-bottom: -12px;
}

.tsume_6 {
  margin-right: -8px;
}

.tsume_7 {
  margin-bottom: 3px;
}

.tsume_8 {
  margin-left: -3px;
}

.tsume_9 {
  margin-top: 12px;
}

.tsume_10 {
  margin-bottom: -1px;
}

.tsume_11 {
  margin-bottom: 14px;
}

.tsume_12 {
  margin-bottom: 15px;
}

.tsume_13 {
  margin-bottom: -6px;
  margin-top: -4px;
}



.loop-wrap {
  display: none; /* スマホ用の横流れニュースは消しておく */
}

/* 親コンテナもリセット */
.header-top-container {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative; /* Instagram の absolute の基準 */
}

.header-top-news {
  position: fixed;
  top: 0px;
  right: -5px; /* 右端を大幅に超える */
  width: calc(100vw + 5px); /* 幅も超過 */
  font-size: 24px;
  z-index: 1;
  height: auto;
  writing-mode: vertical-rl; /* 縦書き */
  text-align: left;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* テキストの後ろ”のみ”に背景色を付ける　※テキストに追従して背景色が付く */
.header-top-news-popup {    
  display: inline; /* box-decoration-break: clone;の場合は「display: inline;」にしなきゃいけない　※必須 */
  padding: 6px;
  line-height: 1.8;
  box-decoration-break: clone; /* テキストの後ろ”のみ”に背景色を付ける　※テキストに追従して背景色が付く */
  -webkit-box-decoration-break: clone; /* box-decoration-break: clone;のベンダープレフィクス　※必須 */
  position: relative; /* ::before の基準点を設定 */

  background: linear-gradient(to bottom, transparent 0%, #fff 0%); /* 初期は透明 */
  background-size: 100% 200%; /* グラデーションを大きく */
  background-position: top; /* 初期位置 */
  animation: bgUDextendAnime 1s forwards;
}

/* 1.まず全体のボックス（bgextend）を出現させる */
.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;
  }
}

/* 3.最後に内側のボックス（.bgappear）を遅らせて出現させる */
.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;
  }
}

/* 2.ボックスの擬似要素（::before）に背景色が伸びる指定 */
@keyframes bgUDextendAnime {
  0% {
      background-position: top; /* 透明部分が見える */
  }
  100% {
      background-position: bottom; /* 白い部分が全体に */
  }
}

/* Safari向けに微調整 */
@supports (-webkit-touch-callout: none) {
  .header-top-news-popup {
      padding: 4px 8px; /* ズレを補正 */
      margin-right: 2px; /* 微調整 */
  }
}

/*　TOP NEWS end--------------------------------------------------------------------------------------------- */



/*　header詳細----------------------------------------------------------------------------------------------- */

/* インスタグラムのロゴ */
.header-top-instagram {
  overflow: hidden;
  background: #000;
}

.header-top-instagram img {
  position: absolute;
  top: -26px; 
  left: -26px; 
  width: 48px;
  height: auto;
  z-index: 2; /* ニュースと重ならないように */
  opacity: 1;
}

.header-top-instagram:hover img {
  opacity: 0.6;
  transition-duration: 0.3s;
  cursor: pointer;
  transition-duration: 0.3s;
}



/* TOP KVロゴ */
.header-top-kv--logo img {
  display: block;
  width: 420px;
  margin: auto;
  padding: 120px 0 240px 0;
}

header {
  padding: 64px 64px 120px;
}

.header-top-message {
  max-width: 1000px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* 縦に並べる */
  justify-content: center; /* 垂直方向の中央揃え */
  align-items: center; /* 中央揃え */  
  overflow: visible; /* コンテナ外への表示を許可 */
  padding-bottom: 120px; 
}



/* 縦書き日本語メッセージ */
.header-top-message--japanese {
  writing-mode: vertical-rl; /* 縦書きにする */
  padding: 0 0 120px 0;
  text-align: left; /* テキストが縦書きのためleftを指定して上端を揃える */
  margin: 0 auto;
  letter-spacing: 3px; /* 文字詰め */
  /* 段落の調整 */
  display: inline-flex;
  flex-direction: column;
  width: max-content;    
}

.header-top-message--japanese p {
  /* 段落マージンの調整 */
  margin: 0 0 0 4.8rem ;/* テキストが縦書きのため上下左右が英語と逆 */
  /* 行間の調整 */
  line-height: 38px;      
}

.header-top-message--japanese p:nth-of-type(3) {
  margin: 0 ;/* 3段落目のみマージン解除 */
}

.header-top-message--english {
  display: block; 
  margin: 0 auto;
  width: 75%; 
  height: auto; 
  visibility: visible; /* 強制表示 */
}

/* Firefox 専用調整 */
@-moz-document url-prefix() {
  .header-top-message--japanese {
      margin-left: auto;
      margin-right: auto;
  }
  .header-top-message--english {
      margin-left: auto;
      margin-right: auto;
  }
}

.header-top-message--japanese,.header-top-message--english,.footer-text {
  color: #fff; 
}


/*　テキストがゆっくり出現するアニメーションの基本設定　*/
.header-top-message--japanese p {
  transition: 1s;
  opacity: 0;
  transform: translateY(0px);
  display: block; 
}

/*　スクロールするとテキストがゆっくり出現するアニメーションが動き始めるようにする ※Javascript(jQuery)による制御あり　*/
  .txt-effect1 {
    animation: txtEffect1 0.8s forwards 0.5s;
  }
  
  @keyframes txtEffect1 {
    100% {
      opacity: 1;
    }
  }

  .txt-effect2 {
    animation: txtEffect2 0.8s forwards 1.5s;
  }
  
  @keyframes txtEffect2 {
    100% {
      opacity: 1;
    }
  }

  .txt-effect3 {
    animation: txtEffect3 0.8s forwards 2.5s;
  }
  
  @keyframes txtEffect3 {
    100% {
      opacity: 1;
    }
  }

/*　header end----------------------------------------------------------------------------------------------- */





/*　main詳細------------------------------------------------------------------------------------------------ */

span {
  display: inline-block;
} /* 変な位置で改行されないように */

main h1 {
  margin-bottom: 56px;
  font-size: 2.0rem;
}

.main-about-container,.main-members-works-container {
  margin-bottom: 216px;
  display: inline-block;
}

.main-about-text p {
    line-height: 42px;
    text-align: left;
    font-size: 1.15rem;
}
.karagyou {
  margin-bottom: 28px;
}

/* main各コンテンツ毎の英語タイトル（日本語タイトルの背景・装飾的に使用）*/
.main-about-container {
  position: relative;
}

.title--english-1{
  position: absolute;
  top: -80px;
  left: 450px;
  width: 65%;
}



/* メインコンテナ */
.main-members-works-container {
  margin-bottom: 104px;
  display: block; /* inline-block から変更して幅をフルに */
  width: 100%; /* 幅を明示的に設定 */
}

/* 個々のカード */
.introduction-card {
  width: 100%;
  max-width: 1200px; /* 最大幅を設定して大きすぎないように */
  display: flex;
  align-items: center; /* 縦中央揃え */
  margin: 0 auto 120px ; /* カード間に余白を追加 */
  gap: 8px; /* 子要素間の間隔を統一 */
  overflow: visible;
}

/* 画像コンテナ */
.card-img-container {
  flex: 0 0 100%; /* 固定幅ではなく柔軟に */
  max-width: 1836px; /* 画像が大きくなりすぎないように */
  text-align: center; /* 画像を中央に */
  overflow: visible; /* 画像がコンテナからはみ出しても表示 */
}

/* 画像 */
.card-img {
  width: 100%;
  height: auto;
  margin: 0; /* マージンをリセットして gap に依存 */
  display: block; /* デフォルトのインライン要素によるズレを防ぐ */
}

/* テキストコンテナ */
.card-text-container {
  flex: 1; /* 残りのスペースを占有 */
  text-align: left;
}

.card-img.pc-img {
  display: block;
}
.card-img.sp-img {
  display: none;
}



 /* オブジェクトがふわふわ揺れるアニメーション */
.main {
  position: relative;
}

.fuwafuwa-container,.fuwafuwa-container .fuwafuwa {
  position: absolute;
  display: inline-block;
  transition: 1.5s ease-in-out;
  max-width: 120px;
  width: 100%;
  height: auto;
}

/* このオブジェクトだけ小さく見えるため調整 */
.fuwafuwa-container img:nth-child(5),.fuwafuwa-container img:nth-child(10),.fuwafuwa-container img:nth-child(15) {
  max-width: 180px;
  width: 180px;
  height: auto;
}


.fuwa1,.fuwa3,.fuwa5,.fuwa7,.fuwa9,.fuwa12,.fuwa15 {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-8deg);
  }
  50% {
    transform:translate(0, -8px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(8deg);
  }
}

.fuwa2,.fuwa4,.fuwa6,.fuwa8,.fuwa10,.fuwa11,.fuwa13,.fuwa14{
  animation: fuwafuwa2 3s ease-in-out infinite alternate;
}
  
@keyframes fuwafuwa2 {
  0% {
    transform:translate(0, 0) rotate(8deg);
  }
  50% {
    transform:translate(0, 8px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(-8deg);
  }
}

  .fuwa1 {
    top: 60px;
    right: -200px;
  }

  .fuwa2 {
    top: 750px;
    right: -50px;
  }

  .fuwa3 {
    top: 430px;
    left: 700px;
  }

  .fuwa4 {
    top: 1200px;
    left: 250px;
  }

  .fuwa5 {
    top: 1450px;
    left: 730px;
  }

  .fuwa6 {
    top: 2165px;
    left: 700px;
  }

  .fuwa7 {
    top: 2870px;
    left: 760px;
  }

  .fuwa8 {
    top: 1850px;
    right: -50px;
  }

  .fuwa9 {
    top: 2540px;
    right: -140px;
  }

  .fuwa10 {
    top: 3380px;
    left: -70px;
  }

  .fuwa11 {
    top: 5250px;
    right: -580px;
  }

  .fuwa12 {
    top: 3770px;
    left: 750px;
  }

  .fuwa13 {
    top: 4165px;
    right: -300px;
  }

  .fuwa14 {
    top: 4500px;
    right: -50px;
  }

  .fuwa15 {
    top: 4950px;
    right: -700px;
  }
  


/* 概要欄 */
.outline-text--title {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

.outline-text--detail {
  font-size: 1.0rem;
  font-family: "Aoto Gothic Medium"," あおとゴシック M","Aoto Gothic DemiBold","あおとゴシック DB", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

.outline-text {
  margin: 0 0 1.8rem 0;/* 段落マージン調整 */
}

.kome-1,.kome-2 {
  font-size: 0.9rem;
}

.kome-2 {
  margin-bottom: 0.5rem;
}

.outline-text--detail a { 
  color: #E31B13;
  text-decoration: none;
  opacity: 1; /* 初期値 */
}

.outline-text--detail a:hover {
  opacity: 0.5;
}

/*　main end------------------------------------------------------------------------------------------------ */





/*　footer詳細--------------------------------------------------------------------------------------------- */

/* フッター */
.footer-container {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.footer-supporters--logo img {
  width: 100%;
  height: 56px;
  margin-bottom: 64px; 
  margin-right: auto;
  margin-left: auto;
}

.footer-text {
  font-size: 65%; 
}

.footer-text a {
  color: #fff;
  text-decoration: none;
  word-break: break-all;/* 長いURLがボックス幅に合わせてちゃんと折り返されるように（aタグで囲んだ部分がまるごとされてしまう） */
  opacity: 1; /* 初期値 */
}

.footer-text a:hover {
  opacity: 0.5;
}

.footer-text-part {
  display: inline; /* デフォルトでは横並び */
  margin: 0; /* 余分なマージンを削除 */
}

.footer-text a {
  color: #fff;
  text-decoration: none;
  word-break: break-all;
}

/*　footer end--------------------------------------------------------------------------------------------- */