@charset "utf-8";
/* CSS Document */

body {
    font-family: 'Noto Sans JP', sans-serif;
}

/* ヒーローセクションの背景グラデーションを削除し、画像スライド用に変更 */
.hero-slide-container {
    position: relative;
    overflow: hidden;
    height: 800px; /* 高さの調整 */
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* JavaScriptでスライドさせるための基盤 */
    transition: transform 0.8s ease-in-out; /* スライドアニメーションをコンテナに移動 */
}

.slide-item {
    min-width: 100%; /* 各スライドアイテムが全幅を占めるように設定 */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.slide-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* オーバーレイ */
}

/* 画像のプレースホルダー（実際は画像パスを変更してください） */
.slide-image-1 { background-image: url('images/top_1.jpg'); } 
.slide-image-2 { background-image: url('images/top_2.jpg'); }
.slide-image-3 { background-image: url('images/top_3.jpg'); }


.section-gradient {
    background: linear-gradient(to bottom, #f0fdf4 0%, #ffffff 100%); /* 薄い緑から白へのグラデーション */
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.smooth-scroll {
    scroll-behavior: smooth;
}

/* カスタムアニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}



/* 独自の画像アイコンのサイズ設定 */
.custom-icon {
    /* Font Awesomeのアイコンに合わせてサイズを調整 */
    width: 5rem; /* text-5xl (48px) に近いサイズ */
    height: 5rem;
    margin: 0 auto -3rem; /* 左右をautoにして中央寄せにする */
}

.strengths-icon{
	margin-bottom: 4rem;
}


/* 商品カード内のカスタムアイコンのスタイル */
.product-icon {
    /* 画像のサイズ調整 (text-6xl に近いサイズ) */
    width: 5rem; /* 80px */
    height: 5rem; /* 80px */
}

/* 商品カード背景の共通設定（全カードに適用） */
/* product-card-1 から product-card-4 まで全てに共通して適用するスタイル */
.product-card-1, 
.product-card-2, 
.product-card-3, 
.product-card-4 {
    background-size: cover;       /* コンテナを覆うように拡大・縮小 */
    background-position: center;  /* 中央に配置 */
    background-repeat: no-repeat; /* 繰り返しなし */
    position: relative; /* オーバーレイのために必要 */
}

/* 個別の背景画像を設定 */
.product-card-1 {
    background-image: url('assets/product_bg1.jpg'); /* バスタオル用の背景画像 */
}

.product-card-2 {
    background-image: url('assets/product_bg2.jpg'); /* フェイスタオル用の背景画像 */
}

.product-card-3 {
    background-image: url('assets/product_bg3.jpg'); /* 寝具セット用の背景画像 */
}

.product-card-4 {
    background-image: url('assets/product_bg4.jpg'); /* 枕・クッション用の背景画像 */
}


/* オーバーレイの共通設定 (アイコンを見やすくするために重要) */
/* ::before を使って、全てのカードに半透明のオーバーレイをかける */
.product-card-1::before,
.product-card-2::before,
.product-card-3::before,
.product-card-4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35); /* 例：濃いめのオーバーレイ */
}

/* product-icon の共通設定（アイコンが画像より手前に来るように） */
.product-icon {
    width: 5rem;
    height: 5rem;
    z-index: 10; 
    position: relative; 
}

/* お問い合わせフォーム*/
.contact-section {
  max-width: 100%;
  margin: 40px auto;
  padding: 25px;
  background: #f8f8f8;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #333;
}

.contact-section h2 {
  text-align: center;
  font-size: 35px;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.contact-section p {
  text-align: center;
  font-size: 20px;
  margin-bottom: 25px;
  color: #666;
}

.contact-section form{
	margin: 0 auto;
	max-width: 600px;
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 14px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 14px;
  font-family: inherit;
}

.contact-form button {
  display: block;
  width: 100%;
  background-color: #3cb371; /* 緑色 */
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s;
}
.contact-form button:hover {
  background-color: #2e8b57; /* 少し濃い緑 */
}

/* style.css に追記 */

/* オンラインストアセクションのアイコン画像用スタイル */
.store-platform-icon {
    width: 12rem;  /* 約56px (text-5xl: 48pxより少し大きめ) */
    height: 8rem; /* 約56px */
    /* 必要に応じて画像のfitやobject-positionを調整できます */
    object-fit: contain; /* 画像がコンテナ内に収まるように */
    object-position: center; /* 中央に配置 */
}

/* 既存の store-card-hover も引き続き適用されます */
.store-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.store-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.1), 0 5px 5px -5px rgba(0, 0, 0, 0.04);
}