@charset "UTF-8";

html {
  font-size: 100%;
}

body {
  font-family: Arial, sans-serif;
}

html, body {
  overflow-x: hidden;
}


/* リンクにカーソルを当てた時薄くする設定 */
a {
  text-decoration: none;
  color: black; 
  transition: opacity 0.3s ease;
}
a:hover {
  opacity: 0.6;
}

ul {
  list-style: none;
}

.container1 {
  padding: 0 20px;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.container2 {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

h2 {
  font-family: 'Caveat', cursive; 
  font-size: 5rem;
  margin-top: 200px;
  margin-bottom: 100px;
}
@media screen and (max-width:480px) {
  h2 {
    font-size: 3.5rem;
  }
}



/* ファーストビュー */
/* ナビ */
.top-menu {
  text-align: left;
  margin-bottom: 30vh;
}

.top-menu li {
  font-size: 1.8vw;
  font-weight: 500;  /* お好みで太さも変更可能 */
  padding-bottom: 30px;
}
@media screen and (max-width: 1024px) {
.top-menu li {
  font-size: 4.0vw;
  }
}
@media screen and (max-width: 480px) {
.top-menu li {
  font-size: 6.0vw;
}
}

.top-flex{
  padding-top: 80px;
  padding-right: 80px;
    /*width: 1200px;*/
  width: 100%;
  height: 100vh;
  margin: auto;
  position: relative;
  display: flex;
  justify-content:flex-end;
  margin-bottom: 100px;
}

.menu-wrap{
  position: absolute;
  top: 50px;
  left: 50px;
  padding-left: 30px;
}



/* ヒーロー画像 */
.hero{
  width: 80%;
  height: 100%;
  /*aspect-ratio: 1 / 1;*/
}
/* スマホだけ全幅 */
@media screen and (max-width: 480px) {
  .hero {
    width: 100%;     /* ← 80%を解除して全幅に */
  }

  .hero img {
    width: 100%;     /* 横幅いっぱい */
    height: auto;    /* 高さは自動調整 */
    max-width: none; /* 上限解除 */
  }
}
@media screen and (max-width: 480px) {
  .top-flex, .container1, .hero {
    width: 100%;
    padding: 0;      /* 横余白をリセット */
    margin: 0 auto;  /* 中央寄せ */
  }

  .hero img {
    width: 100%;
    height: auto;
    max-width: none;
    display: block;
  }
}


.hero img {
  width: 100%;
  height: 100%;
  /*aspect-ratio: 1 / 1;*/
  object-fit: cover;  /* 画像が縮小せずトリミングされた */
}
/* スマホだけ全幅 */
@media screen and (max-width: 480px) {
  img {
    width: 100%;     /* 横幅いっぱい */
    height: auto;     /* 高さは自動調整 */
    max-width: none;  /* 500px制限を解除 */
  }
}

/* タイトル */
#hero-title { 
  font-family: 'Caveat', cursive; 
  font-size: 10rem;
  font-weight: 800;
  transform: rotate(-10deg);
  text-align: center;
  font-size: clamp(1.5rem, 5vw, 3rem); /* 画面幅に応じて文字サイズ可変 */
  line-height: 1.0; /* デフォルト行間（1.4倍） */
}

h1 span {
  display: inline-block;
  transform: translateX(-50px);
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  font-size: 10vw;
}
@media screen and (max-width: 1024px) {
  h1 span {
    font-size: 20vw;
  }
}

  /* サイト読み込み後にshowがついたらアニメーション開始 */
h1.show span {
  transform: translateX(0);
  opacity: 1;
}

/* 遅延を一文字ごとに設定 */
    h1.show span:nth-child(1)  { transition-delay: 0.0s; }
    h1.show span:nth-child(2)  { transition-delay: 0.1s; }
    h1.show span:nth-child(3)  { transition-delay: 0.2s; }
    h1.show span:nth-child(4)  { transition-delay: 0.3s; }
    h1.show span:nth-child(5)  { transition-delay: 0.4s; }
    h1.show span:nth-child(6)  { transition-delay: 0.5s; }
    h1.show span:nth-child(7)  { transition-delay: 0.6s; }
    h1.show span:nth-child(8)  { transition-delay: 0.7s; }
    h1.show span:nth-child(9)  { transition-delay: 0.8s; }
    h1.show span:nth-child(10) { transition-delay: 0.9s; }
    h1.show span:nth-child(11) { transition-delay: 1.0s; }
    h1.show span:nth-child(12) { transition-delay: 1.1s; }
    h1.show span:nth-child(13) { transition-delay: 1.2s; }
    h1.show span:nth-child(14) { transition-delay: 1.3s; }



/* GALLERY */
.gallery {
  padding: 20px 20px;
}
.gallery-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}
.gallery-flex:first-of-type{
    margin-top: 0px;
}

.gallery-images {
  width: 50%;
  height: auto;
}

.gallery img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.gallery-text {
  margin: 0 auto;/* Flex（ブロック要素)で適用 */
  line-height: 4.4;
  align-items: center;
  font-size: 1.5vw;
}



/* ABOUT */
.flex {
  display: flex;
  align-items: center;
}
@media screen and (max-width:480px) {
  .flex {
    display: flex;
    flex-direction: column;
  }
}

.about-text {
  padding: 0 50px;
}
@media screen and (max-width:480px) {
.about-text {
  margin-top: 50px;
}
}

.about-name {
  text-align: left;  
  margin-bottom: 50px;      
  line-height: 1.2;          
}

.about-name .roman {
  display: block;            /* 上下に並べるためにブロック化 */
  font-size: 1.4rem;           /* ローマ字の大きさ */
}

.about-name .kanji {
  display: block;            /* 下の行にする */
  font-size: 2rem;         /* 漢字は少し小さめ */
  margin-top: 3px;           /* 上の文字との隙間 */
}
@media screen and (max-width: 480px) {
  .about-name .roman {
    font-size: 1.5rem;
  }
  .about-name .kanji {
    font-size: 1.2rem;
  }
}

.about-text p {
  margin-top: -24px;
  font-size: 1.4em;
  line-height: 1.8;
  text-align: left;
}
@media screen and (max-width: 480px) {
  .about-text p {
  font-size: 0.8em;
}
}

.about-image img {
  width: 300px;
  height: 400px;
  object-fit: cover;
}
@media screen and (max-width:480px) {
  .about-image img {
    max-width: 60%;
    height: auto;
  }
  
}

/* ABOUTアニメーション 初期状態（下にずらして透明にしている状態） */
.fade-in {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* ふわっと表示時 */
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}



/* CONTACT */
.contact-wraper {
  padding: 10px;
  background-image: url(images/blue01.png), url(images/yellow01.png);
  background-repeat: no-repeat;
  background-position: 600px, 100px 100px;
  background-size: 650px, 500px;
}

#contact p {
  font-size: 1.4em;
  margin-top: 60px;
  margin-bottom: 80px;
}
@media screen and (max-width: 480px) {
  #contact p {
    font-size: 1.2em;
  }
}

.btn {
  display: contents;
}

.btn img {
  width: 50%;
  height: auto;
}



/* LETTERFRAGMENTS */
#letterfragments {
  text-align: center;
}
.letterfragments-wraper {
  max-width: 1200px;
  margin: 0 auto;
  background-image: url(images/letterfragments.back.blue.png), url(images/letterfragments.back.pink.png);
  background-repeat: no-repeat;
  background-position: calc(50% - 200px) calc(50% + 100px), calc(50% + 200px) calc(50% + 80px);

  background-size: 100px, 100px;
}
.letterfragments-btn img {
  width: 100px;
  height: 100px;
  margin-top: 100px;
}

#letterfragments p {
  font-size: 1.4em;
}
@media screen and (max-width: 480px) {
  #letterfragments p {
    font-size: 1.2em;
  }
}



/* FOOTER */
#footer {
  margin-top: 300px;
}
.footer-wraper {
  max-width: 1200px;
  margin: 0 auto;
  background-image: url(images/pink01.png), url(images/yellow01.png), url(images/blue01.png);
  background-repeat: no-repeat;
  background-position:  calc(50% - 300px) calc(50% + 100px), calc(50% + 300px) calc(50% - 100px);
  background-size: 800px,300px,400px;
}
#footer p {
  font-size: 1.4em;
  text-align: center;
  line-height: 50px;
}
@media screen and (max-width: 480px) {
  #footer p {
    font-size: 1em;
  }
}

#footer span {
  font-size: 2em;
  font-weight: bold;
}

.footer-menu {
  text-align: center;
  margin-top: 100px;
}

.footer-menu li {
  font-size: 1.8vw;
  font-weight: 500;  /* お好みで太さも変更可能 */
  padding-bottom: 30px;
}
@media screen and (max-width: 1024px) {
.footer-menu li {
  font-size: 4.0vw;
  }
}
@media screen and (max-width: 480px) {
.footer-menu li {
  font-size: 6.0vw;
}
}

.footer-copyright {
  margin: 0;
  margin-top: 150px;
}