@charset "UTF-8";

/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*, *:before, *:after 
{ box-sizing: border-box; }

html { font-size: 18px; }

body {
  font-size: 1.2em;
  line-height: 1.6;
  overflow-x: hidden;
  font-family: "Helvetica Neue", sans-serif;
  background-color: #f2c2c3;
}

label .menu {
  position: absolute;
  right: -100px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: #f2c2c3;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
}

label .hamburger {
  position: absolute;
  top: 150px;
  left: 50px;
  width: 30px;
  height: 2px;
  background: #69D2e7;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #69d2e7;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

label input { display: none; }

label input:checked + .menu {
  box-shadow: 0 0 0 100vw #46c78d, 0 0 0 100vh #FFF;
  border-radius: 0;
  
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
  
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
  
}

label input:checked + .menu + ul { opacity: 1; }

label ul {
  font-size: 30px;
  z-index: 200;
  position: absolute;
  top: 340%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
}

label a {
  margin-bottom: 1em;
  display: frex;
  color: #f38630;
  text-decoration: none;
}


/* コンテナ */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ヘッダー */
header{
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding-top: 30px;
    padding-bottom: 80px;
    width: 100%;
    height: 14%;
    background-color: #f0f4b7;
    z-index: 100;
    position: fixed;
    top: 0px ;
    width: 100%;
    color: #69d2e7;
}



header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
font-weight: bold;
  font-family: "Nunito", sans-serif;
  font-size: 3rem; /* サイズをさらに大きくしました */
  margin-right: 0; /* 左寄せを強調するために余白をゼロにしました */
}


nav ul {
  list-style: none;
  display: flex;
}
nav ul li {
  margin-left: 20px;
}
nav ul li a:hover {
  color: #b00000;
}

/* ヒーローセクション */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  margin-top: 80px; /* ヘッダー高さ分のオフセット */
}

/* ヒーロースライダー */
.hero-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.hero-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero-slide.active {
  opacity: 1;
}

/* ヒーローコンテンツ（中央配置＆フェードイン） */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 20px;
}
.hero-content h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  animation: fadeInUp 1s ease-out;
}
.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  animation: fadeInUp 1.5s ease-out;
}
.btn {
  display: inline-block;
  background: #6dc7d0;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
　bordr-color: none;
  transition: background 0.3s;
}
.btn:hover {
  background: #e582b7;
}

/* キーフレームアニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* セクション共通 */
.about, .menu, .contact {
  padding: 60px 0;
  text-align: center;
  color: #69d2e7;
}
.about h2, .menu h2, .contact h2 {
  font-size: 2rem;
  margin-bottom: 40px;
}
.about p {
  font-size: 1.1rem;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}

/* メニューセクション */
.menu-items {
  color: #69d2e7;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
.menu-item {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  max-width: 300px;
  text-align: center;
  transition: transform 0.3s ease;
}
.menu-item:hover {
  transform: translateY(-5px);
}
.menu-item img {
  width: 100%;
  display: block;
}
.menu-item h3 {
  color: #B5AEAE;
  font-size: 1.5rem;
  margin: 15px 0 10px;
}
.menu-item p {
  padding: 0 15px 15px;
  font-size: 1rem;
  line-height: 1.5;
}

/* お問い合わせフォーム */
.contact form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
  color: #69d2e7;
}
.form-group {
   font-size: 1.0rem;
   display: block; /* フレックスボックスで横並び */
  align-items: center; /* 縦の位置を揃える */
  margin-bottom: 15px;
}

.form-group label {
  font-size: 0.8rem;
  width: 100%; /* ラベルの固定幅 */
  text-align: left; /* ラベルを左寄せ */
  display: flex;
  margin-bottom: #fff, 5px;
  font-weight: bold;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.form-group textarea {
  flex-grow: 1; /* 入力欄を伸縮可能に */
  padding: 8px;
  font-size: 14px;
  box-sizing: border-box;
}


/* フッター */
footer {
  background: #f0f4b7;
  padding: 20px 0;
  text-align: center;
  font-size: 0.9rem;
  color: #777;
}

.copyright{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #f0f4b7;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: 2px;
    border-top-width: 2px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
.contact form {
  margin: 0 auto;
  text-align: left;
}
.form-group {
  font-size: 0.5rem; /* ラベルのフォントを小さくする */
  display:block;
  margin-bottom: 20px;
}
.form-group label {
  width:auto;
  font-size: 0.8rem; /* ラベルのフォントを小さくする */
  display: flex;
  margin-bottom: 5px;
  font-weight: bold;
}
.form-group input,
.form-group textarea {
  font-size: 0.9rem; /* 入力欄のテキストサイズを調整 */
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
 


label {
        width: 40px;
    }

    .hamburger {
        width: 25px;
    }

    .hamburger::before,
    .hamburger::after {
        width: 25px;
    }

  nav ul {
    flex-direction: column;
    align-items: center;
  }
  nav ul li {
    margin: 10px 0;
  }
  .menu-items {
    flex-direction: column;
    align-items: center;
  }
}






/* 既存の共通スタイル … */

/* 例：既にあるリセット、ヘッダー、ヒーローセクション、各セクションのスタイル */

/* ここからレスポンシブ対応のための追加スタイル */
/* 超小型モバイル向け（480px以下） */
@media (max-width: 480px) {
/* 横書きにする */
.contact form,
.form-group label,
.hero-content h2,
.hero-content p {
  writing-mode: horizontal-tb; /* 横書きに設定 */
}
.contact form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
.form-group {
font-size: 0.5rem; /* ラベルのフォントを小さくする */
  display: block;
}
.form-group label {
  font-size: 0.5rem; /* ラベルのフォントを小さくする */
  display: flex;
  font-weight: bold;
}
.form-group input,
.form-group textarea {
  font-size: 0.9rem; /* 入力欄のテキストサイズを調整 */
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
 
  header h1 {
    font-size: 1.5rem;
  }
  nav ul li a {
    font-size: 0.9rem;
  }
  
  .hero-content h2 {
    font-size: 1.8rem;
  }
  .hero-content p {
    font-size: 0.9rem;
  }
  .btn {
    padding: 8px 15px;
    font-size: 0.9rem;
  }
  
  /* レスポンシブなフォーム対応（入力エリアの余白調整など） */
.contact form,
.form-group label,
.hero-content h2,
.hero-content p {
  writing-mode: horizontal-tb; /* 横書きに設定 */
}
  .contact form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
.form-group label {
  font-size: 0.8rem; /* ラベルのフォントを小さくする */
  display: flex;
  font-weight: bold;
}
.form-group input,
.form-group textarea {
  font-size: 0.9rem; /* 入力欄のテキストサイズを調整 */
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
 
  .contact form {
    padding: 0 10px;
  }
}

/* モバイルサイズ（768px以下） */
@media (max-width: 768px) {
/* 横書きにする */
.contact form,
.form-group label,
.hero-content h2,
.hero-content p {
  writing-mode: horizontal-tb; /* 横書きに設定 */
}
.contact form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
.form-group {
 font-size: 0.5rem; /* ラベルのフォントを小さくする */
  display: block;
}
.form-group label {
  font-size: 0.5rem; /* ラベルのフォントを小さくする */
  display: flex;
  font-weight: bold;
}
.form-group input,
.form-group textarea {
  font-size: 0.9rem; /* 入力欄のテキストサイズを調整 */
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
 
label {
        width: 40px;
    }

    .hamburger {
        width: 25px;
    }

    .hamburger::before,
    .hamburger::after {
        width: 25px;
    }

  /* ナビゲーション */
  nav ul {
    flex-direction: column;
    align-items: center;
  }
  nav ul li {
    margin: 10px 0;
  }
  
  /* ヒーローセクションのテキスト */
  .hero-content {
    padding: 0 10px;
  }
  .hero-content h2 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
  
  /* メニューのカードを縦に並べる */
  .menu-items {
    flex-direction: column;
    align-items: center;
  }
}

/* タブレットサイズ（1024px以下） */

@media (max-width: 1024px) {

label {
        width: 40px;
        height: 40px;
    }

    .hamburger {
        width: 25px;
    }

    .hamburger::before,
    .hamburger::after {
        width: 25px;
    }

  .hero-content h2 {
    font-size: 2.5rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
}