@charset "utf-8";

body {
    margin: 0;
    padding: 0;
    background-color: rgb(227, 226, 211);
    white-space: nowrap;
    font-family: 'MSP明朝', serif;
    overflow-x: hidden;
}

.caution ul {
  list-style-type: none; /* デフォルトのリストマーカー（「・」）を非表示にする */
  padding-left: 0; /* リスト内の余白をリセット */
}

.caution li::before {
  content: "•"; /* リストアイテムの前に表示するマーカーを「•」に設定 */
  margin-right: 5px; /* 「・」の右側に少しスペースを追加 */
  font-weight: normal; /* マーカーの太さを通常に設定 */
}

a {
  text-decoration: none !important; /* 下線を非表示にする */
  color: inherit; /* デフォルトのテキスト色を維持 */
  cursor: pointer; /* リンクのカーソルスタイルを指定 */
}
header {
  margin: 0; /* マージンを削除 */
}
.menu {
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 20px; /* フォントサイズを設定 */
  z-index: 999;
  /* 文字の輪郭（アウトライン）を白色に */
  color: black; /* 文字の基本色 */
  text-shadow: 
    -1px -1px 2px white, 
    1px -1px 2px white, 
    -1px 1px 2px white, 
    1px 1px 2px white;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu li {
  margin-right: 20px;
  position: relative; /* 画像を絶対配置するために relative を設定 */
  display: inline-block;
  text-align: center;
  padding: 10px 20px; /* 余白を調整 */
}
.menu a {
  text-decoration: none;
  color: rgb(49,49,49);
  padding: 10px;
  font-weight: bold;
  position: relative;
  z-index: 2; /* 背景画像の上に表示 */
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
  display: block;
}

/* 背景画像（デフォルトは非表示） */
.menu ul li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 親要素（li）の幅にフィット */
  height: 100%; /* 親要素（li）の高さにフィット */
  object-fit: cover; /* 画像を親要素に合わせる */
  opacity: 0; /* 初期状態で非表示 */
  transition: opacity 0.3s ease-in-out;
  z-index: 1; /* テキストより背面に配置 */
}

/* ホバー時に画像を表示 */
.menu ul li:hover img {
  opacity: 1;
}
#top-logo {
  position: fixed;
  top: -170px;
  left: -100px;
}
.top-logo {
  width: 400px; /* 画像の幅を100%に設定 */
}
@media (max-width: 768px) {
  .menu {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 10px; /* フォントサイズを設定 */
  }
  .menu li {
    margin-right: 0px;
  }
  .reserve-menu {
    padding: 2px;
  }
  .top-logo {
    width: 100px;
    height: auto;
  }
}
@media (max-width: 425px) {
  .top-logo {
    margin-top: 5px;
    width: 60px;
    height: auto;
  }
}
/*************************
==== section1
*************************/
.section1 {
  width: 100vw; /* 画面の幅いっぱいにセクションを広げる */
  height: 100vh; /* 画面の高さいっぱいにセクションを広げる */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.header-img {
  width: 100vw; /* 画面幅に合わせて画像の幅を調整 */
  height: 100vh; /* 高さを自動調整し、アスペクト比を保持 */
  object-fit: cover; /* 画像を中央に配置し、アスペクト比を保持して画面いっぱいに表示 */
  display: none;
}
.header-img-2 {
  width: 100vw; /* 画面幅に合わせて画像の幅を調整 */
  height: 100vh; /* 高さを自動調整し、アスペクト比を保持 */
  object-fit: cover; /* 画像を中央に配置し、アスペクト比を保持して画面いっぱいに表示 */
  display: none;
}

/*************************
==== section2
*************************/
#section2 {
  width: 100vw;
  height: 100vh;
  position: relative;
  color: white;
  font-size: 24px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden; /* オーバーフローを隠します */
}
.bg-clip {
  width: 100%; /* 親要素に合わせます */
  height: 100%; /* 親要素に合わせます */
  overflow: hidden; /* オーバーフローを隠します */
}
#section2 .space-1 {
  position: relative;
}
.bg-clip-img {
  max-width: 100%; /* 画像が親要素に合わせるように調整 */
  height: auto;
  filter: brightness(50%); /* 画像の明るさを50%に調整 */
}
.circle-clip1 {
  clip-path: circle(0% at center);
  transition: clip-path 5s ease; /* クリッピングのトランジションを5秒に設定 */
}
@media (max-width: 425px) {
  #section2 {
    width: 100vw; /* 画面の幅いっぱいにセクションを広げる */
    height: 200vh; /* 画面の高さいっぱいにセクションを広げる */
  }
  .space-1 img {
    width: 50px;
    height: auto;
    filter: brightness(50%)
  }
  .img-background-column {
    gap: 5px;
  }
  .bg-clip {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
}
/*************************
==== section3
*************************/
#section3 {
  width: 100vw; /* 画面の幅いっぱいにセクションを広げる */
  height: 100vh; /* 画面の高さいっぱいにセクションを広げる */
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  overflow: hidden;
    /* 文字の輪郭（アウトライン）を白色に */
    color: black; /* 文字の基本色 */
    text-shadow: 
      -1px -1px 2px white, 
      1px -1px 2px white, 
      -1px 1px 2px white, 
      1px 1px 2px white;
}
#section3 h1 {
  font-size: 40px;
  text-align: center;
  margin: 2rem auto 0.5rem auto; 
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s, transform 1s;
}
#section3 p {
  max-width: 80%;
  margin: 0 auto;
  padding: 1rem;
  font-size: 0.8rem;
  text-align: justify;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.about_me_img {
  width: 300px;
  height: auto;
  border-radius: 15px; /* 画像の角を丸くする */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); /* ぼかし効果を強調 */
}
.sec3_frame {
  position: relative;
  width: 100%;
  min-height: 500px;
  
  background-image: url("img/cameraman.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; 
  padding: 2rem;
  color: black;
}

/* 丸い画像（左上） */
.sec3_circle.left {
  position: absolute;
  top: 0%; /* 上からの位置調整 */
  left: 20%; /* 左端からの位置調整 */
  transform: translateY(-10%); /* 垂直方向の微調整 */

  width: 300px; /* 丸のサイズ */
  height: 300px;
  
  border-radius: 60%; /* 丸くする */
  overflow: hidden; /* はみ出た部分を隠す */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* 影をつける */
  animation: fadeInOut 5.5s infinite; /* 6秒サイクルで繰り返し */
}

/* 丸い画像（中央） */
.sec3_circle.center {
  position: absolute;
  top: 70%; /* 上からの位置調整 */
  left: 35%; /* 左端からの位置調整 */
  transform: translateY(-10%); /* 垂直方向の微調整 */

  width: 300px; /* 丸のサイズ */
  height: 300px;
  
  border-radius: 60%; /* 丸くする */
  overflow: hidden; /* はみ出た部分を隠す */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* 影をつける */
  animation: fadeInOut 6s infinite; /* 6秒サイクルで繰り返し */
}

/* 丸い画像（右上） */
.sec3_circle.right {
  position: absolute;
  top: 10%; /* 上からの位置調整 */
  right: 20%; /* 右端からの位置調整 */
  transform: translateY(-10%); /* 垂直方向の微調整 */

  width: 400px; /* 丸のサイズ */
  height: 400px;
  
  border-radius: 70%; /* 丸くする */
  overflow: hidden; /* はみ出た部分を隠す */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* 影をつける */
  animation: fadeInOut 5s infinite; /* 6秒サイクルで繰り返し */
}

/* 画像の調整 */
.sec3_circle img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比を保持して丸にフィット */
}

@keyframes fadeInOut {
  0% { opacity: 0; }   /* 透明 */
  50% { opacity: 1; }  /* 完全に表示 */
  100% { opacity: 0; } /* また透明 */
}

/* テキストの調整 */
.sec3_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  z-index: 2; /* 画像の下に隠れないようにする */
}

.sec3_about_me_info {
  text-align: left;
}

@media (max-width: 425px) {
  #section3 h1 {
    display: none;
  }
  .sec3_about_me_info {
    font-size: 12px;
    text-align: center;
  }
  .about_me_img {
    width: 200px;
    height: auto;
    border-radius: 15px; /* 画像の角を丸くする */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* ぼかし効果を強調 */
  }
  .sec3_frame {
    flex-direction: column-reverse;
    gap: 1rem;
  }
  #section3 {
    height: 100vh; 
  }
}
/*************************
==== section4
*************************/
.gallery-and-price {
  background-color: rgba(255, 255, 255, 0.3); /* 白の透明度30%の背景 */
  padding: 1rem 0px 1rem 0px;
  margin: 10rem 0 4rem 0;
}
#section4 {
  margin: 10rem 0 4rem 0;
  width: 100vw; /* 画面の幅いっぱいにセクションを広げる */
  height: 100vh; /* 画面の高さいっぱいにセクションを広げる */
  border-top: 2px solid rgb(204,204,204);
}
#section4 h2 {
  text-align: center;
}
#gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  cursor: pointer;
}

.image-container {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 10px;
  flex: 0 0 calc(33.33% - 20px);
  box-sizing: border-box;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 320px;
  border-top: 1px solid #000;
  padding-top: 4px;
  object-fit: cover;
  transition: filter 0.3s; /* オーバーレイのトランジションを設定 */
}

.image-label {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0px 10px 0px 10px;
  background-color: rgb(34,34,34); /* 背景色を透明に設定 */
  color: rgba(255, 255, 255, 0.75); /* テキストの透明度を75%に設定 */
  padding: 4px;
  margin: 0;
  transition: background-color 0.3s;
}

.image-container:hover img {
  filter: brightness(50%); /* ホバー時に画像の明るさを50%に設定 */
}

.image-container:hover .image-label {
  background-color: rgba(255, 255, 255, 0.5); /* ホバー時の背景色を設定（半透明の白色） */
}
#gallery a p {
  margin: 0 10px;
}
@media (max-width: 425px) {
  #gallery {
    flex-direction: column;
  }
}

/*************************
==== section5
*************************/
#section5 {
  margin: 4rem 0 4rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: auto;
  overflow: hidden;
  flex-direction: column; /* 子要素を縦方向に配置 */
}
#section5 h2 {
  text-align: center;
}
#price-categ {
  display: flex; /* 子要素を横並びに配置 */
  justify-content: center; /* 子要素を中央寄せ */
  align-items: center; /* 子要素を中央寄せ */
}
#price-categ a {
  margin: 0px 1rem 0 1rem;
  padding: 1rem 1rem 1rem 1rem;
  text-decoration: none; /* 下線を非表示に */
  color: inherit; /* デフォルトのテキスト色を維持 */
  cursor: pointer; /* リンクのカーソルスタイルを指定 */
  border-top-left-radius: 10px; /* 左上の角を丸くする */
  border-top-right-radius: 10px; /* 右上の角を丸くする */
}
.konrei-price {
  display: flex; /* 子要素を横並びに配置 */
  justify-content: center; /* 子要素を中央寄せ */
  align-items: center; /* 子要素を中央寄せ */
}
.category-link {
  font-size: 1rem;
  font-weight: bold;
}
.category-link.konrei-button {
  background-color: rgb(250,247,243);
}
section5 img {
  width: 600px;
  height: auto;
}
.category-content {
  display: none;
  padding: 4rem 8rem;
  background-color: rgb(250,247,243);
  border-radius: 10px; /* 全ての角を10pxで丸くする */
}    
.konrei.category-content {
  display: block;
}
.maternity-categ {
  display: none;
  padding: 2rem;
  background-color: rgb(241,236,231);
  border-radius: 10px; /* 全ての角を10pxで丸くする */
}
.maternity-detail-categ {
  display: flex; /* 子要素を横並びに配置 */
  justify-content: center; /* 子要素を中央寄せ */
  align-items: center; /* 子要素を中央寄せ */
}
.maternity-detail-categ a {
  margin: 1rem 2rem 0px 2rem;
  padding: 1rem 2rem 0px 2rem;
  text-decoration: none; /* 下線を非表示に */
  color: inherit; /* デフォルトのテキスト色を維持 */
  cursor: pointer; /* リンクのカーソルスタイルを指定 */
  border-top-left-radius: 10px; /* 左上の角を丸くする */
  border-top-right-radius: 10px; /* 右上の角を丸くする */
}
.maternity-categ.flower {
  display: block;
}
.maternity-category-link.flower {
  background-color: rgb(241,236,231);
}
.plan-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列のグリッドを作成 */
  gap: 20px; /* 要素間の間隔を設定（必要に応じて調整） */
  max-width: 100px;
  margin:0 0 0 3rem;
}
.text-detail1 {
  margin: 0px;
  font-weight: bold;
  font-size: 0.9rem;
}
.text-detail2 {
  margin: 0px;
  font-size: 0.8rem;
}
.text-detail3 {
  margin: 0px;
  font-size: 0.8rem;
}
.caution {
  width: auto;
  word-wrap: break-word;
  white-space: normal;
  font-size: 0.6rem;
}
@media (max-width: 768px) {
  section5 img {
    width: 300px;
    height: auto;
  }
  #price-categ a {
    margin: 0 0.2rem 0 0.2rem;
    padding: 0.5rem 1rem 0px 1rem;
    font-size: 0.7rem
  }
  .plan-content {
    margin:0 0 0 0rem;
  }
  .text-detail1 {
    margin: 0px;
    font-size: 0.9rem;
    font-weight: bold;
  }
  .text-detail2 {
    margin: 0px;
    font-size: 0.4rem;
  }
  .maternity-detail-categ a {
    margin: 1rem 2rem 0px 2rem;
    padding: 0.5rem 1rem 0px 1rem;
    font-size: 0.7rem
  }
}

/*************************
==== section6
*************************/
section6 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: auto;
  overflow: hidden;
  flex-direction: column; /* 子要素を縦方向に配置 */
}
section6 h2 {
  text-align: center;
  font-size: 24px;
  margin: 1rem auto 1rem auto;
}
iframe {
  width: 100%; /* 親要素に合わせて幅を調整 */
  height: 100%;
  max-width: auto; /* 必要に応じて最大幅を設定 */
  max-height: auto; /* 高さをコンテンツに合わせて自動調整 */
  border: none;
  overflow-x: hidden; /* スクロールバーを表示する */
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
/* モーダル内のコンテンツのスタイル */
.modal-content {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  width: 80%;
  height: 60%;
  max-width: 600px;
  margin: 150px auto;
  padding: 30px;
  position: relative;
}
/* 閉じるボタンのスタイル */
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
}
@media (max-width: 425px) {
  .modal-content {
    margin: 10px auto;
  }
}
/*************************
==== footer
*************************/
footer {
  margin-top: 10rem;
  background-color: #222; /* ダークグレーの背景 */
  color: white; /* 文字色を白 */
  text-align: center; /* 中央揃え */
  padding: 20px 0; /* 上下の余白 */
  font-size: 0.9rem;
  font-family: 'Arial', sans-serif;
  position: relative;
}

/* 仕切り線 */
footer::before {
  content: "";
  display: block;
  width: 80%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 auto 15px; /* フッターの上に余白 */
}

/* メールリンク */
footer a {
  color: #ffcc00; /* ゴールドっぽい色 */
  text-decoration: none; /* 下線を消す */
  font-weight: bold;
  transition: color 0.3s ease-in-out;
}

/* ホバー時のエフェクト */
footer a:hover {
  color: #ff6600; /* オレンジに変化 */
  text-decoration: underline;
}

/* フッター内の余白 */
footer p {
  margin: 5px 0;
}

/* フッター全体をフェードイン */
@keyframes fadeInFooter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

footer {
  animation: fadeInFooter 1s ease-out;
}

.instagram-icon {
  width: 20px;
  height: 20px;
}

.logo {
    width: 100%; /* 画像の幅を100%に設定 */
    height: auto; /* 高さを自動調整して縦横比を保つ */
}
@media (max-width: 425px) {
  .logo {
    width: 50%; 
    height: auto; 
  }
  .instagram-icon {
    width: 30px;
    height: 30px;
    margin-top: 5px;
  }
}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 900;
  animation: loadingAnimation 3s ease-in-out forwards;
  pointer-events: none; /* クリックイベントを透過 */
}

@keyframes loadingAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none; /* 100%のときに要素を非表示にする */
  }
}

#loading2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* クリックイベントを透過 */
  z-index: 999;
}
.text-sec2 {
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  color: white;
  font-size: 60px;
  pointer-events: none;
}
@media (max-width: 425px) {
  .text-sec2 {
    font-size: 22px;
  }
}

#logo-element {
  opacity: 1.0;
  transition: opacity 0.5s ease-in-out; 
  max-width: 800px; /* 画像の最大幅を30pxに設定 */
  max-height: 800px; /* 画像の最大高さを30pxに設定 */
  color: transparent;
  animation-name: slideAndBounceAnimation; /* アニメーション名を指定 */
  animation-duration: 3.5s; /* アニメーションの持続時間（1秒待機 + 2秒スライド） */
  animation-timing-function: ease-in-out; /* タイミング関数（イージング） */
  animation-iteration-count: 1; /* 1回のみ繰り返す */
  animation-fill-mode: forwards; /* アニメーション終了時の状態を保持 */
}
#contact-modal{
  position: absolute;
  width: 100vw; /* 画面の幅いっぱいにセクションを広げる */
  height: 100vh; /* 画面の高さいっぱいにセクションを広げる */
  z-index: 999;
}
@keyframes slideAndBounceAnimation {
  0% {
    transform: translateX(0%); /* 初期位置と最終位置 */
  }
  33.33% {
    transform: translateX(0%); /* 1秒間その場で待機 */
  }
  100% {
    transform: translateX(-25%); /* 2秒かけて左にスライド */
  }
}

@media (max-width: 425px) {
  @keyframes slideAndBounceAnimation {
    0% {
      transform: translate(0%, 100%);; /* 初期位置と最終位置 */
    }
    33.33% {
      transform: translate(0%, 100%);; /* 1秒間その場で待機 */
    }
    100% {
      transform: translate(0%, -200%);; /* 2秒かけて左にスライド */
    }
  }
}

/* スクロールバーの縦方向 */
::-webkit-scrollbar {
    width: 12px; /* スクロールバーの幅 */
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーのトラック部分の背景色 */
  }
  
  ::-webkit-scrollbar-thumb {
    background: #888; /* スクロールバーのつまみ部分の背景色 */
    border-radius: 6px; /* つまみ部分の角を丸くする */
  }
  
  /* スクロールバーの横方向（必要な場合） */
  ::-webkit-scrollbar-horizontal {
    height: 12px; /* スクロールバーの高さ */
  }
  
  ::-webkit-scrollbar-thumb:horizontal {
    background: #555; /* 横方向のつまみ部分の背景色 */
}