/* 親要素でflexboxを使って横並びに配置 */
.slider-container {
    display: flex;
    align-items: flex-end; /* スライダーとテキストを下揃え */
    justify-content: flex-start;
    position: relative;
    width: 100%;
    height: auto;  /* 必要に応じて高さを設定 */
    margin-bottom: 10vw; /* 下にスペースを入れる */
}

/* FlexSliderの基本スタイル */
.flexslider {
    width: 70%;
    height: 100%;
    margin: 0;
    padding: 15px;
    overflow: hidden; /* スライダー外の画像は表示しない */
    position: relative;
    box-sizing: border-box;
}


/* flexslider.cssで指定されているborderを上書き */
.flexslider {
    border: none !important; /* 重要度を上げてborderをリセット */
}


.flexslider .slides img {
    width: 100%;        /* 横幅100% */
    height: 100%;       /* 親要素に合わせる */
    object-fit: cover;   /* 比率を保ったままトリミング */
    object-position: center; /* 中央に配置 */
    display: block;      /* 隙間を消す */

}


/* 画像をクリック可能にするため、ポインターを手のひらに変更 */
.flexslider .slides img {
    cursor: pointer; /* ポインターを手のひらに */
}


/* テキストの配置 */
.text-container {
    position: absolute;
    bottom: 0;  /* スライダーの下に配置 */
    right: 15px; /* 画面右端から15px */
    text-align: right; /* テキストを右揃え */
    font-size: 16px; /* テキストのサイズ */
    color: #000; /* テキストの色 */
    max-width: 29%;
 
}

/* Sliderを中央に配置する */
.slides, .slides > li{
    display: flex ; /* slide liのサイズを元に中央に配置する */
}

.slides li{
    aspect-ratio: 16 / 11; /* ここで高さの比率を固定 (好きな比率に調整OK) */
}


/* 全体のスタイル */
html, body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
    height: 100%;
  }

 /* テキストハイライトのカラーを変える */
 ::selection {
    background-color: rgb(204, 95, 255);
    color:ivory ;
  }
  
 /* テキストハイライトのカラーを変える(Firefox専用) */
  ::-moz-selection {
    background-color: rgb(204, 95, 255); /* ハイライトの背景色 */
    color: ivory ;   /* ハイライト時の文字色 */
  }
  
  /* WebKit系（Chrome, Safari, Edge）に確実に適用 */
  @media screen and (-webkit-min-device-pixel-ratio:0) {
  ::selection {
    background-color: rgb(204, 95, 255);
    color: ivory;
  }
}
  
/* iOS Safari の選択許可 */
body, p, h1, h2, h3, h4, h5, h6, span, a {
  -webkit-user-select: text;
  user-select: text;
}


  
  /* ヘッダーのスタイル */
  header {
    display: flex;
    justify-content: space-between;
    align-items: top;
    background-color: white;
    color: black;
    padding: 15px 20px 100px;
  }
  
  header h1 {
    margin: 0;
    font-size: 20px; /* メニューと同じ大きさ */
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
  
  /* メニューのスタイル */
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 100px; /* メニューの間隔 */
  }
  
  nav ul li {
    margin-left: px;
  }
  
  nav ul li a {
    color: black;
    text-decoration: none;
    font-size: 20px;
  }
  
  nav ul li a:hover {
    text-decoration: underline;
  }

  
  /* フッターのスタイル */
  footer {
    background-color: white; /* フッターの背景色 */
    color: black;
    padding: 100px 20px 15px; /* 上100px 右20px 下15px */
    
    display: flex;
    align-items: flex-end; /* 下に揃える */
  }
  
  .footer-content {
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    width: 100%; /* フッターを幅いっぱいに広げる */
  }
  
  footer p, .footer-menu ul {
    margin: 0; /* 余白をゼロにする */
    padding: 0; /* パディングもゼロにする */
    font-size: 16px;
  }
  
  .footer-menu ul {
    display: flex; /* 横並び */
    gap: 50px; /* メニューの間隔 */
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .footer-menu ul li a {
    color: black;
    text-decoration: none;
    font-size: 16px;
  }
  
  .footer-menu ul li a:hover {
    text-decoration: underline; /* ホバー時のアニメーション */
  }
  


/* topに戻る矢印 */    
.back-to-top img {
    display: block;
    width: 40px;
    height: auto;
    margin-left: auto; /* 右寄せ */
    padding: 20px;
    
}

html {
    scroll-behavior: smooth; /* スムースに上に戻る */
}


/* スマホ用　topに戻る矢印 */ 
@media (max-width: 768px) {   
    .back-to-top img {
        width: 30px;
        height: auto;   
    }
}





  /* スマホ画面で縦並びにするためのメディアクエリ */
@media (max-width: 768px) {
    .slider-container {
        display: flex;
        flex-direction: column;  /* 縦並びに変更 */
        align-items: center;    /* 中央揃え */
        height: auto;           /* 高さを自動に設定 */        
    }

    .text-container {
        width: 100%;            /* 横幅100% */
        text-align: right;       /* 右揃え */
        font-size: 1rem;         /* 文字サイズを小さく */
        position: relative;        /* absoluteを解除 */
        right: 15px;
        max-width: 100%;
    }

    p {
        margin: 0;
    }

    .flexslider {
        width: 100%;             /* 幅を100%にして縦並びでも適切なサイズ */
    }
}





/* スマホ用メニューのスタイル */
nav {
    display: flex;
    justify-content: space-between;
    align-items: top;
    gap: 30px
  }
  
  .menu {
    display: flex;
    list-style: none;
  }
  
  .menu li {
    margin-right: 0px;
  }
  
  .menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
  }
  
  .menu-icon span {
    width: 20px;
    height: 2px;
    background-color: #333;
    margin: 3px 0;
  }
  
  /* スマホ画面サイズのときにメニューを隠す */
  @media (max-width: 768px) {
    .menu {
      display: none;
      flex-direction: column;
      gap: 70px;
    }
  
    .menu-icon {
      display: flex;
    }
  }
  
  /* ドロワーメニューが開く */
  .menu.active {
    display: flex;
  }


 /* スマホ用 footer */
  @media (max-width: 768px) {
    footer p, .footer-menu ul {
        font-size: 13px;
      }
      
      .footer-menu ul {
        display: flex; /* 横並び */
        gap: 20px; /* メニューの間隔 */
        list-style: none;
        margin: 0;
        padding: 0;
      }
      
      .footer-menu ul li a {
        font-size: 13px;
      }
  }







/* About Page */

    /* ボディをフレックスボックスに設定し、ページ全体を縦にレイアウト */
    body {
        display: flex;
        flex-direction: column; /* 縦方向に並べる */
        min-height:  100vh; /* 画面全体の高さにする */
        margin: 0; /* マージンをリセット */
      }
      
        /* メインコンテンツ部分 */
        main {
        flex-grow: 1; /* 残りのスペースを占める */
    }
    
      .about-text-container {
        min-height: calc(100vh - 137.5px - 133.5px); /* headerとfooterの高さ */
        padding-left: 20px;
        padding-right: 20px;
      }
    
      .about-text {
        margin: 0;
        width: 70%;
        font-size: 28px; /* メニューと同じ大きさ */
        font-family: "Inter", sans-serif; /* メニューと同じフォント */
        font-optical-sizing: auto;
        font-weight: 400;
        font-weight: normal; 
      }
      
    


      .getInTouch-link {
        color: black; /* 初期色 */
        text-decoration: underline;
        transition: color 0.3s ease, text-decoration 0.3s ease; /* 色とテキストのアンダーラインの変化をスムーズに */
    }
    
      .getInTouch-link:hover {
        color: rgb(204, 95, 255);
        text-decoration: none; /* ホバー時にアンダーラインを消す */
    }
    





/* スマホ用 About Page */
@media (max-width: 768px) {

    .about-text-container {
        min-height: calc(100vh - 137.5px - 133.5px);
        box-sizing: border-box;  /* paddingを含めた高さを計算 */
    }

    .about-text {
        margin: 0;
        width: 100%;
        font-size: 24px; /* メニューと同じ大きさ */
        font-family: "Inter", sans-serif; /* メニューと同じフォント */
        font-weight: normal; 
        max-height: 100%;
      }
      
    }







/* Contact Pageのデザイン */

.contact-container {
    min-height: calc(100vh - 137.5px - 133.5px); /* headerとfooterの高さ */
    padding-left: 20px;
    padding-right: 20px;
}


h2 {
    font-family: "Inter", sans-serif; /* フォントを変更 */
    font-size: 28px; /* フォントサイズ */
    margin: 0;
    padding-bottom: 20px;
    text-decoration: underline 2px;
    font-weight: normal;
}


.contact-text {
    margin: 0;
    font-size: 18px;
}


/* Emailを背景画像として配置 */
.email-container {
    width: 190px;
    height: 30px;
    background-image: url('image/bllankEmail.png');
    background-size: contain;  /* 画像全体を表示 */
    background-repeat: no-repeat;  /* 繰り返し防止 */
    background-position: center;  /* 画像を中央配置 */
}




/* コンタクトフォーム全体のスタイル */

form {
    max-width: 700px; /* フォームの幅を調整 */
    margin: 0;
    padding:0;
    padding-top: 50px;
    background: none; /* 背景色 */
  }
  
  /* ラベルのスタイル */
  label {
    display: block;
    font-weight: normal;
    margin-bottom: 5px;
  }
  
  /* 入力フィールドのスタイル */
  input, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1.5px solid #ccc;
    border-radius: 0px;
    font-size: 16px;
    box-sizing: border-box;
  }

  textarea {
    font-family: Arial, sans-serif; /* フォントを変更 */
    font-size: 16px; /* フォントサイズ */
    width: 100%; /* 幅は100% */
    min-height: 150px; /* 高さを設定 */
    resize: vertical; /* 縦方向にのみリサイズ可能にする */
    padding: 10px; /* 内側の余白 */
    box-sizing: border-box; /* paddingを含めたサイズ計算 */
  }
  
  
  /* フォーカス時のエフェクト */
  input:focus, textarea:focus {
    border-color:rgb(204, 95, 255);
    outline: none;
    box-shadow: 0 0 0px;
  }
  
  /* 送信ボタンのスタイル */
  button {
    width: 110px;
    padding: 3px;
    background-color: white;
    color: black;
    font-size: 20px;
    font-family: "Inter", sans-serif;
    border: 2px solid;
    border-color: #000;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  /* ホバー時のエフェクト */
  button:hover {
    background-color: black;
    color: white;
  }
  




  /* モバイル用 コンタクトフォーム */

  @media (max-width: 600px) {
    form {
      width: 100%; 
    }
  
    input, textarea {
      font-size: 16px;
      box-shadow: none !important; /* 強制的に影を消す */
      -webkit-appearance: none; /* iOS Safariのデフォルトスタイルをリセット */
      -moz-appearance: none;
      appearance: none;
    }
  }






/* Thanks Page */

  .thanks-container {
    background-color: rgb(243, 241, 241);
    margin: 0;
    height: 100vh;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 15px;
  }

  .thanks-text {
    margin: 0px;
    padding-bottom: 0px;
    font-family: Arial, sans-serif;
    font-size: 28px;
    font-style: italic;
    color: darkgray;
  }
  
  .thanks-container a {
    color: black;
    text-decoration: none;
    font-size: 18px;
    display: inline-block; /* margin-topを適用するために指定 */
    margin-top: 30px; /* 上に20pxの余白を追加（数値は調整可能） */
}

.thanks-container a:hover {
    text-decoration: underline;
}

/* スマホ用 Thanks Page */
@media (max-width: 768px) {
    .thanks-text {
        font-size: 24px;
      }
    }



/* Impressum Page */

h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    margin-bottom: 10px;
    max-width: 100%;
}

.impressum-text {
    font-size: 18px;
    margin: 0;
    margin-bottom: 40px;
    max-width: 100%;
}

.space {
    height: 40px;
}


/* スマホ用 Impressum Page */
@media (max-width: 768px) {
    h3 {
        font-size: 18px;
    }

    .impressum-text {
        font-size: 16px;
    }
}



/* Datenschutz Page */

h4 {
    font-size: 28px;  /* 一番大きいタイトル */
    font-weight: 600;
    margin: 0;
    margin-bottom: 10px;
    max-width: 100%;
}

h5 {
    font-size: 18px;  /* 一番小さいタイトル */
    font-weight: 600;
    margin: 0;
    margin-bottom: 10px;
    max-width: 100%;
}


/* スマホ用 Datenschutz Page */
@media (max-width: 768px) {
    h4 {
        font-size: 24px;
    }

    h5 {
        font-size: 16px;
    }

}