/* =====================================================
Base
===================================================== */

* {
  box-sizing: border-box;
  }

body {

```
margin: 0;

font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

/* 背景色 */
background:
    linear-gradient(
        45deg,
        #f3f4f0,
        #f3f4f0
    );

color: #222;

line-height: 1.8;
```

}

/* =====================================================
Container
===================================================== */

.container {

```
max-width: 900px;

margin: 40px auto;

padding: 32px;
```

}

/* =====================================================
Header
===================================================== */

h1 {

```
text-align: center;

font-size: 2.2rem;

margin-bottom: 16px;

color: #111;
```

}

h2 {

```
font-size: 1.2rem;

margin-top: 0;

color: #222;
```

}

p {

```
color: #555;
```

}

/* =====================================================
Hero Image
===================================================== */

.hero-image {

    text-align: center;

    margin-bottom: 24px;
}

.hero-image img {

    width: 100%;

    max-width: 700px;

    height: auto;

    border-radius: 0px;

}

.subtitle {

    text-align: center;

    color: #666;

    margin-bottom: 40px;
}

/* =====================================================
Question Card
===================================================== */

.question {

```
background: white;

padding: 24px;

margin-bottom: 20px;

border-radius: 18px;

box-shadow:
    0 8px 30px
    rgba(0,0,0,0.15);
```

}

.question label {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 5px;

    cursor: pointer;
}

.question input[type="radio"] {

    margin: 0;

    margin-top: 10px;

    flex-shrink: 0;

    accent-color: #4a4036;
}

.question select {

    width: 90%;

    max-width: 90%;

    box-sizing: border-box;

    padding: 12px;

    border-radius: 10px;

    border: 1px solid #ddd;

    font-size: 1rem;
}

/* =====================================================
Button
===================================================== */

.submit-area {

```
text-align: center;

margin-top: 40px;
```

}

button {

```
border: none;

border-radius: 14px;

padding:
    14px
    32px;

font-size: 1rem;

font-weight: bold;

cursor: pointer;

/* 「診断する」ボタンの色 */
background:
    linear-gradient(
        135deg,
        #917A5D,
        #917A5D
    );

color: white;

transition:
    transform 0.2s,
    box-shadow 0.2s;
```

}

button:hover {

```
transform:
    translateY(-2px);

box-shadow:
    0 10px 25px
    rgba(30,30,0,0.25);
```

}

/* =====================================================
Result Sections
===================================================== */

section {

```
background: white;

margin-bottom: 24px;

padding: 24px;

border-radius: 18px;

box-shadow:
    0 8px 30px
    rgba(0,0,0,0.15);
```

}


/* =====================================================
Animal Type
===================================================== */

#animalTypeSection {

    text-align: left;
}

.animal-image {

    width: 320px;

    max-width: 100%;

    height: auto;

    display: block;

    margin:
        0 auto
        20px;
    /*
    filter:
        drop-shadow(
            0 8px 16px
            rgba(0,0,0,0.15)
        );
    */
}

.animal-type-card {

    text-align: center;
}

#animalTypeName {

    font-size: 1.6rem;

    font-weight: bold;

    margin-bottom: 10px;
}


/* =====================================================
Camera Card
===================================================== */

#bestMatchCamera,
#secondCamera {

```
padding: 16px;

border-radius: 12px;

background: #f8f9fb;
```

}

#bestMatchCamera h3,
#secondCamera h3 {

```
margin-top: 0;

color: #111;
```

}

/* =====================================================
Reason
===================================================== */

.reason-list {

```
padding-left: 20px;
```

}

.reason-list li {

```
margin-bottom: 10px;
```

}


/* =====================================================
Error
===================================================== */

#errorMessage {

```
color: red;

margin-bottom: 20px;
```

}

/* =====================================================
Mobile
===================================================== */

@media (max-width: 768px) {

    .container {

        padding: 12px;
    }

    h1 {

        font-size: 1.6rem;
    }

    .question,
    section {

        padding: 16px;
    }

    .camera-card {

        padding: 16px;
    }

    .shop-buttons {

        gap: 8px;
    }

    .shop-buttons a {

        max-width: none;

        font-size: 0.9rem;

        padding: 12px 8px;
    }

    .x-share-button {

        width: 100%;

        min-width: 0;
    }
}


/* =====================================================
Camera Card
===================================================== */

.camera-card {

    background: white;

    border-radius: 20px;

    padding: 24px;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,0.08);

    text-align: center;
}

.camera-image {

    width: 100%;

    max-width: 450px;

    height: auto;

    display: block;

    margin:
        0 auto
        20px;
}

.camera-card h3 {

    margin-bottom: 20px;

    font-size: 1.5rem;
}

.reason-list {

    text-align: left;

    margin-bottom: 24px;
}

.reason-list li {

    margin-bottom: 12px;
}


/* =====================================================
Shop Buttons
===================================================== */

.shop-buttons {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 20px;

    flex-wrap: nowrap;
}

.shop-buttons a {

    flex: 1;

    max-width: 180px;

    text-align: center;
}


.amazon-button {

    display: inline-block;

    padding:
        12px
        24px;

    border-radius: 12px;

    background: #ff9900;

    color: white;

    text-decoration: none;

    font-weight: bold;

    transition: 0.2s;
}

.amazon-button:hover {

    opacity: 0.9;
}

.rakuten-button {

    display: inline-block;

    padding:
        12px
        24px;

    border-radius: 12px;

    background: #bf0000;

    color: white;

    text-decoration: none;

    font-weight: bold;

    transition: 0.2s;
}

.rakuten-button:hover {

    opacity: 0.9;
}


/* =====================================================
note記事バナー画像
===================================================== */
#noteSection {

    text-align: left;
}

.note-image {

    width: 100%;

    max-width: 600px;

    height: auto;

    display: block;

    margin:
        0 auto
        16px;

    border-radius: 12px;
}

.note-title {

    text-align: center;
}

.note-summary {

    text-align: left;

    margin-top: 12px;

    margin-bottom: 20px;

    line-height: 1.8;

    font-size: 0.95rem;
}

/* =====================================================
X Share Button
===================================================== */

.x-share-button {

    background: #000;

    color: #fff;

    border: none;

    border-radius: 12px;

    padding: 14px 24px;

    font-size: 1rem;

    font-weight: bold;

    cursor: pointer;

    width: auto;

    min-width: 180px;

    white-space: nowrap;
}

.x-share-button:hover {

    background: #222;
}


/* =====================================================
フッター（免責事項等）
===================================================== */
.site-footer {

    margin-top: 60px;

    padding-top: 24px;

    border-top: 1px solid #ddd;

    font-size: 0.85rem;

    color: #666;

    text-align: center;

    line-height: 1.7;
}

.site-footer p {

    margin-bottom: 10px;
}