/*
Theme Name: Robodatchi
Description: ロボダッチ公式サイト用オリジナルテーマ
Version: 1.0

========================================
STYLE INDEX
========================================
01. Reset / Base
02. Header / Navigation
03. Front Page
04. Common Animation
05. About
06. Contact
07. News List
08. Single News
09. Privacy Policy
10. 404
11. Footer
12. Tablet / Smartphone
========================================
*/
/* ==================================================
   DESIGN TOKENS / COMMON COMPONENTS
   サイト全体で共通利用する値と見た目
================================================== */

:root {
    --color-main: #e60000;
    --color-text: #333;
    --color-muted: #777;
    --color-white: #fff;
    --content-width: 900px;
    --panel-border: 2px solid var(--color-main);
    --panel-radius: 20px;
}

/* 共通：ドット背景のページ面 */
.l-page-surface {
    background-image: url("assets/images/bg.png");
    background-repeat: repeat;
}

/* 共通コンテンツ幅 */
.l-container {
    width: 90%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

/* 共通：赤背景＋白文字のセクション見出し */
.c-section-title {
    display: inline-block;
    padding: 8px 20px 10px;
    background: var(--color-main);
    color: var(--color-white);
    border-radius: 4px;
    font-family: "M PLUS 1p", sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
}

/* 共通：白背景＋赤枠＋角丸パネル */
.c-panel {
    background: var(--color-white);
    border: var(--panel-border);
    border-radius: var(--panel-radius);
}

@media screen and (max-width: 768px) {
    .l-container {
        width: 100%;
    }

    .c-section-title {
        padding: 7px 15px 9px;
        font-size: 28px;
    }
}

/* ==================================================
   RESET
================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

img {
    display: block;
    max-width: 100%;
}

body {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;

    min-height: 100vh;
    background: var(--color-main);

}

/* ==================================================
   HEADER
================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: calc(100% - 40px);
    max-width: 1400px;

    height: 80px;

    margin: 20px auto 0;
    padding: 0 30px;

    background: #fff;

    border-radius: 40px;

    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}

/* ヘッダーロゴ */

.site-header__logo {
    display: block;

    width: 150px;
}

.site-header__logo img {
    display: block;

    width: 100%;
    height: auto;
}

/* X */

.site-nav__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.site-nav__x img {
    display: block;

    width: 34px;
    height: 34px;

    border-radius: 6px;
}

.site-nav__x:hover {
    transform: translateY(-3px);
    opacity: 0.75;
}

/* ==================================================
   PC NAVIGATION
================================================== */

.site-nav {
    display: flex;
    align-items: center;

    gap: 35px;
}

.site-nav a {
    color: #222;

    font-size: 14px;
    font-weight: bold;

    text-decoration: none;

    transition: opacity 0.2s ease;
}

.site-nav a:hover {
    opacity: 0.5;
}

/* ONLINE STORE */

.site-nav .site-nav__store {
    padding: 12px 22px;

    border-radius: 30px;

    background: #222;
    color: #fff;
}

/* ==================================================
   MAIN VISUAL
================================================== */

.main-visual {
    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background-image: url("./assets/images/bg.png");
    background-repeat: repeat;
}

/* ==================================================
   MAIN TITLE
================================================== */

.main-visual__title {
    position: relative;

    padding-top: 45px;

    z-index: 10;
}

.main-visual__title img {
    width: 100%;
    height: auto;
}

/* ==================================================
   TOP NEWS
================================================== */

.top-news {
    width: 100%;
    background: transparent;
}

/* NEWS見出し */

.top-news__title {

    color: var(--color-main);

    font-size: 40px;
    font-weight: 900;

    line-height: 1;
}

/* NEWS 白背景＋赤枠 */

.top-news__list {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    width: 100%;

    padding: 30px;
}

/* NEWS記事 */

.top-news__item {
    padding: 0;

    border-bottom: none;
}

/* カテゴリー＋日付 */

.top-news__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}

.top-news__date {
    font-size: 13px;
    font-weight: bold;
}

/* カテゴリー */

.top-news__categories {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.top-news__category {
    padding: 4px 12px;

    background: #ffd800;

    border-radius: 20px;

    font-size: 11px;
    font-weight: bold;
}

/* アイキャッチ画像 */

.top-news__image {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #fff;

    border: 1px solid #999;
    border-radius: 8px;
}

.top-news__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* 記事タイトル */

.top-news__item-title {
    margin: 12px 0 0;

    font-size: 15px;
    line-height: 1.5;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.top-news__item-title a {
    color: var(--color-main);

    font-weight: bold;

    text-decoration: none;
}

.top-news__item-title a:hover {
    opacity: 0.6;
}

/* ==================================================
   TOP ABOUT
   ロボダッチとは？
================================================== */

.top-about {
    width: 100%;
}

/* ABOUT見出し */

.top-about__title {
    margin: 0 0 20px;

    color: var(--color-main);

    font-size: 40px;
    font-weight: 900;

    line-height: 1.2;
}

/* ABOUT 白背景＋赤枠 */

.top-about__box {
    position: relative;

    width: 100%;

    padding: 35px;
}

/* ==================================================
   ABOUT TEXT
================================================== */

.top-about__text {
    width: 100%;
}

.top-about__text p {

    font-size: 17px;
    font-weight: 500;

    line-height: 1.9;
}

.top-about__text p:last-of-type {
    margin-bottom: 0;
}

/* ==================================================
   ABOUT BUTTON
================================================== */

.top-about__button {
    display: inline-flex;
    align-items: center;

    gap: 15px;

    margin-top: 20px;
    padding: 13px 24px;

    background: var(--color-main);
    color: #fff;

    border-radius: 30px;

    font-size: 14px;
    font-weight: bold;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.top-about__button:hover {
    transform: translateY(-3px);

    opacity: 0.9;
}

/* ==================================================
   ABOUT IMAGE GALLERY
================================================== */

.top-about__images {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    width: 100%;

    margin-top: 45px;
}

/* 画像共通 */

.top-about__image {
    display: block;

    width: auto;
    max-width: 100%;

    object-fit: contain;
}

/* 島 */

.top-about__image--island {
    width: 230px;
    height: auto;
}

/* タマゴロー
   PCでは右側へ自由配置 */

.top-about__image--tamagoro {
    position: absolute;

    top: 110px;
    right: 45px;

    width: 170px;
    height: auto;

    z-index: 5;
}

/* ガマロボ */

.top-about__image--gamarobo {
    width: 145px;
    height: auto;
}

/* ソウジロボ */

.top-about__image--soujirobo {
    width: 145px;
    height: auto;
}

/* ロボカー */

.top-about__image--robocar {
    width: 230px;
    height: auto;
}

/* ==================================================
   TOP ONLINE STORE
================================================== */

.top-store {
    width: 100%;
}

/* =========================
   見出し
========================= */

.top-store__title {

    color: var(--color-main);

    font-size: 40px;
    font-weight: 900;
    line-height: 1.2;
}

/* =========================
   白背景＋赤枠
========================= */

.top-store__box {
    display: grid;

    /*
       PCでは

       ロゴ | ストア画像
       文章 | ストア画像

       という構成
    */

    grid-template-columns: 42% 58%;
    grid-template-areas:
        "logo image"
        "content image";

    column-gap: 40px;
    row-gap: 20px;

    align-items: center;

    width: 100%;

    padding: 40px;
}

/* =========================
   秘密基地ロゴ
========================= */

.top-store__logo-area {
    grid-area: logo;

    width: 100%;
}

.top-store__logo {
    display: block;

    width: 280px;
    max-width: 100%;
    height: auto;

    margin: 0;
}

/* =========================
   説明＋ボタン
========================= */

.top-store__content {
    grid-area: content;

    width: 100%;
}

.top-store__lead {
    margin: 0 0 22px;

    font-size: 18px;
    font-weight: bold;

    line-height: 1.7;
}

/* =========================
   ONLINE STORE ボタン
========================= */

.top-store__button {
    display: inline-flex;
    align-items: center;

    gap: 15px;

    padding: 13px 24px;

    background: var(--color-main);
    color: #fff;

    border-radius: 30px;

    font-size: 14px;
    font-weight: bold;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.top-store__button:hover {
    transform: translateY(-3px);

    opacity: 0.9;
}

/* =========================
   ストア画像
========================= */

.top-store__image {
    grid-area: image;

    width: 100%;

    /* 画像の左右に余白を作る */
    padding: 20px 30px 30px;
}

.top-store__image img {
    display: block;

    /* フレームいっぱいにしない */
    width: 90%;
    max-width: 760px;
    height: auto;

    /* 真ん中に配置 */
    margin: 0 auto;
}

/* ==================================================
   SECTION COMMON
   セクション共通設定
================================================== */

/* セクション間の余白を統一 */
.top-news,
.top-about,
.top-store {
    width: 100%;
    margin: 0;
    padding: 40px 20px;
}

/* 見出しと白いBOXの間隔を統一・ラベル付け */

.top-news__title,
.top-about__title,
.top-store__title {

    margin: 0 0 25px;
}

/* ==================================================
   ANIMATION
   セクション見出し
================================================== */

.section-title-animate {
    opacity: 0;
    transform: translateY(20px) rotate(-2deg) scale(0.9);
}

.section-title-animate.is-show {
    animation: titlePop 0.6s ease forwards;
}

@keyframes titlePop {

    0% {
        opacity: 0;
        transform: translateY(20px) rotate(-2deg) scale(0.9);
    }

    70% {
        opacity: 1;
        transform: translateY(-4px) rotate(1deg) scale(1.04);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }

}

/* ==================================================
   ABOUT PAGE
================================================== */

.about-page {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 70px;
}

/* ------------------------------
   ABOUT INTRO
------------------------------ */

.about-main {
    width: 100%;
    padding: 50px 20px 60px;
}

.about-main__title {
    margin: 0 0 12px;
}

.about-main__box {
    padding: 35px 40px;
}

.about-main__box p {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}

.about-main__box p:last-child {
    margin-bottom: 0;
}

/* ------------------------------
   CHARACTERS
------------------------------ */

.about-characters {
    width: 100%;
    padding: 30px 20px 60px;
}

.about-characters__title {
    margin: 0 0 20px;
}

/* ------------------------------
   CHARACTER SLIDER
------------------------------ */

.character-slider {
    position: relative;
    width: 100%;
    min-height: 650px;
    padding: 45px 100px 35px;

    text-align: center;
}

.character-slider__main {
    width: 100%;
    text-align: center;
}

.character-slider__image {
    display: block;
    width: auto;
    max-width: 430px;
    height: 360px;
    margin: 0 auto 20px;
    object-fit: contain;
}

.character-slider__name {
    margin: 0 0 10px;
    color: var(--color-main);
    font-size: 38px;
    font-weight: 900;
    line-height: 1.3;
}

.character-slider__text {
    margin: 0;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
}

/* 左右の矢印 */

.character-slider__arrow {
    position: absolute;
    top: 45%;
    z-index: 2;

    padding: 10px;

    background: transparent;
    border: 0;

    color: var(--color-main);
    font-size: 48px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.character-slider__arrow:hover {
    transform: scale(1.15);
    opacity: 0.75;
}

.character-slider__arrow--prev {
    left: 25px;
}

.character-slider__arrow--next {
    right: 25px;
}

/* 下のキャラクターアイコン */

.character-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    width: 100%;
    margin-top: 25px;
}

.character-slider__thumb {
    width: 75px;
    height: 75px;
    padding: 0;

    background: transparent;
    border: 0;

    opacity: 0.25;
    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.character-slider__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.character-slider__thumb:hover {
    opacity: 0.7;
    transform: translateY(-3px);
}

/* 選択中のキャラクター */

.character-slider__thumb.is-active {
    opacity: 1;
    transform: scale(1.12);
}

/* ------------------------------
   CHARACTER CHANGE ANIMATION
------------------------------ */

.character-slider__image.is-changing {
    animation: characterPop 0.45s ease;
}

@keyframes characterPop {

    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-4deg);
    }

    70% {
        opacity: 1;
        transform: scale(1.06) rotate(2deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }

}

/* ==================================================
   ABOUT PAGE - MOBILE
================================================== */

@media screen and (max-width: 768px) {

    .about-page {
        padding-top: 80px;
        padding-bottom: 45px;
    }

    .about-main {
        padding: 40px 20px 45px;
    }

    /* CHARACTERS */

    .character-slider {
        min-height: 540px;
        padding: 35px 20px 30px;
    }

    .character-slider__image {
        max-width: 100%;
        height: 270px;
        margin-bottom: 15px;
    }

    .character-slider__name {
        font-size: 30px;
        overflow-wrap: normal;
    }

    .character-slider__text {
        font-size: 15px;
        line-height: 1.8;
    }

    .character-slider__arrow {
        top: 165px;
        transform: translateY(-50%);
        font-size: 38px;
    }

    .character-slider__arrow--prev {
        left: 8px;
    }

    .character-slider__arrow--next {
        right: 8px;
    }

    .character-slider__nav {
        gap: 10px;
        margin-top: 20px;
    }

    .character-slider__thumb {
        width: 52px;
        height: 52px;
        flex: 0 1 52px;
    }

}

/* ==================================================
   CONTACT PAGE
================================================== */

.contact-page {
    width: 100%;
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: 70px;
}

/* ------------------------------
   CONTACT MAIN
------------------------------ */

.contact-main {
    width: 100%;
    padding: 50px 20px 60px;
}

/* 見出し */

.contact-main__title {

    margin: 0 0 25px;
}

/* 説明文 */

/* ------------------------------
   CONTACT INFORMATION
------------------------------ */

.contact-main__lead-box {
    margin-bottom: 40px;
    padding: 30px 35px;
}

.contact-main__lead {
    margin: 0;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 2;
}

.contact-main__notice {
    margin: 20px 0 0;

    font-size: 14px;
    line-height: 1.9;
}

.contact-main__company-link {
    color: var(--color-main);

    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-main__company-link:hover {
    opacity: 0.6;
}

/* ------------------------------
   FORM BOX
------------------------------ */

.contact-form {
    width: 100%;

    padding: 45px 50px;
}

/* 1項目 */

.contact-form__row {
    margin-bottom: 30px;
}

.contact-form__row:last-of-type {
    margin-bottom: 0;
}

/* ラベル */

.contact-form__label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;

    color: var(--color-text);

    font-size: 15px;
    font-weight: 800;
}

/* 必須 */

.contact-form__required {
    display: inline-block;

    padding: 3px 8px;

    background: var(--color-main);
    color: #fff;

    border-radius: 4px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

/* ------------------------------
   INPUT
------------------------------ */

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    width: 100%;

    padding: 13px 15px;

    background: #fff;
    color: var(--color-text);

    border: 1px solid #aaa;
    border-radius: 8px;

    font-family: "M PLUS 1p", sans-serif;
    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease;
}

/* フォーカス時 */

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    border-color: var(--color-main);

    box-shadow:
        0 0 0 3px rgba(230, 0, 0, 0.12);
}

/* select */

.contact-form__field select {
    cursor: pointer;
}

/* textarea */

.contact-form__field textarea {
    min-height: 200px;

    resize: vertical;

    line-height: 1.8;
}

/* ------------------------------
   CONFIRM BUTTON
------------------------------ */

.contact-form__submit {
    margin-top: 40px;

    text-align: center;
}

.contact-form__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    min-width: 280px;

    padding: 15px 30px;

    background: var(--color-main);
    color: #fff;

    border: 2px solid var(--color-main);
    border-radius: 50px;

    font-family: "M PLUS 1p", sans-serif;
    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.contact-form__button:hover {
    background: #fff;
    color: var(--color-main);

    transform: translateY(-3px);
}

/* ------------------------------
   ERROR MESSAGE
------------------------------ */

.contact-form__errors {
    margin: 0 0 25px;
    padding: 20px 25px;

    background: #fff;
    color: var(--color-main);

    border: 2px solid var(--color-main);
    border-radius: 12px;
}

.contact-form__errors-title {
    margin: 0 0 10px;

    font-weight: 900;
}

.contact-form__errors ul {
    margin: 0;
    padding-left: 20px;

    font-size: 14px;
    line-height: 1.8;
}

/* ------------------------------
   CONFIRM PAGE
------------------------------ */

.contact-confirm__list {
    margin: 0;
}

.contact-confirm__row {
    display: grid;

    grid-template-columns: 200px 1fr;

    padding: 22px 0;

    border-bottom: 1px solid #ddd;
}

.contact-confirm__row:first-child {
    padding-top: 0;
}

.contact-confirm__row dt {
    color: var(--color-main);

    font-size: 14px;
    font-weight: 900;
}

.contact-confirm__row dd {
    margin: 0;

    color: var(--color-text);

    font-size: 15px;
    line-height: 1.8;

    overflow-wrap: anywhere;
}

/* 確認画面のボタン */

.contact-confirm__buttons {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 20px;

    margin-top: 40px;
}

/* 戻るボタン */

.contact-form__back {
    padding: 15px 25px;

    background: #fff;
    color: var(--color-main);

    border: 2px solid var(--color-main);
    border-radius: 50px;

    font-family: "M PLUS 1p", sans-serif;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.contact-form__back:hover {
    background: var(--color-main);
    color: #fff;

    transform: translateY(-3px);
}

/* ------------------------------
   COMPLETE
------------------------------ */

.contact-complete {
    padding: 60px 40px;

    text-align: center;
}

.contact-complete__title {
    margin: 0 0 20px;

    color: var(--color-main);

    font-size: 24px;
    font-weight: 900;
}

.contact-complete__text {
    margin: 0 0 35px;

    color: var(--color-text);

    font-size: 15px;
    line-height: 1.9;
}

.contact-complete .contact-form__button {
    text-decoration: none;
}

/* ------------------------------
   HONEYPOT
------------------------------ */

.contact-form__honeypot {
    position: absolute;

    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}

/* ------------------------------
   PRIVACY POLICY LINK
------------------------------ */

.contact-form__privacy {
    margin: 35px 0 0;

    color: #555;

    font-size: 13px;
    line-height: 1.8;

    text-align: center;
}

.contact-form__privacy a {
    color: var(--color-main);

    font-weight: 800;
    text-decoration: underline;

    text-underline-offset: 3px;
}

.contact-form__privacy a:hover {
    opacity: 0.6;
}

/* ==================================================
   NEWS PAGE
================================================== */

.news-page {
    width: 100%;
    min-height: 100vh;

    padding: 140px 20px 120px;
}

/* ------------------------------
   TITLE
------------------------------ */

.news-main__title {

    margin: 0 0 45px;
}

/* ------------------------------
   CATEGORY FILTER
------------------------------ */

.news-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;

    margin-bottom: 35px;
}

.news-filter__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 90px;
    padding: 9px 18px;

    background: #fff;
    color: var(--color-main);

    border: 2px solid var(--color-main);
    border-radius: 50px;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.news-filter__button:hover {
    background: var(--color-main);
    color: #fff;

    transform: translateY(-3px);
}

.news-filter__button.is-active {
    background: var(--color-main);
    color: #fff;
}

/* ------------------------------
   NEWS LIST
------------------------------ */

.news-list {
    width: 100%;
}

.news-list__item {
    margin-bottom: 25px;
}

.news-list__link {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;

    padding: 25px;

    color: inherit;
    text-decoration: none;

    transition:
        transform 0.2s ease;
}

.news-list__link:hover {
    transform: translateY(-4px);

}

/* IMAGE */

.news-list__image {
    width: 100%;
    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #eee;

    border-radius: 12px;
}

.news-list__thumbnail {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.news-list__noimage {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #aaa;

    font-size: 12px;
    font-weight: 800;
}

/* CONTENT */

.news-list__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-list__meta {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 12px;
}

.news-list__date {
    color: #777;

    font-size: 13px;
    font-weight: 700;
}

.news-list__categories {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.news-list__category {
    display: inline-block;

    padding: 4px 12px;

    background: var(--color-main);
    color: #fff;

    border-radius: 50px;

    font-size: 11px;
    font-weight: 800;
}

.news-list__title {
    margin: 0;

    color: var(--color-text);

    font-size: 20px;
    font-weight: 900;
    line-height: 1.6;
}

/* EMPTY */

.news-list__empty {
    padding: 50px 20px;

    text-align: center;
}

/* ------------------------------
   PAGINATION
------------------------------ */

.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 45px;
}

.news-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin: 0 5px;

    background: #fff;
    color: var(--color-main);

    border: 2px solid var(--color-main);
    border-radius: 50%;

    font-size: 14px;
    font-weight: 900;
    line-height: 1;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

/* マウスを乗せたとき */

.news-pagination a.page-numbers:hover {
    background: var(--color-main);
    color: #fff;

    transform: translateY(-3px);
}

/* 現在のページ */

.news-pagination .page-numbers.current {
    background: var(--color-main);
    color: #fff;
}

/* … */

.news-pagination .page-numbers.dots {
    background: transparent;

    border-color: transparent;

    color: var(--color-main);
}

/* ==================================================
   NEWS PAGE - MOBILE
================================================== */

@media screen and (max-width: 768px) {

    .news-page {
        padding: 120px 15px 90px;
    }

    .news-main__title {
        margin-bottom: 30px;
    }

    .news-list__item {
        margin-bottom: 18px;
    }

    /* NEWS一覧：PCの横2列レイアウトをスマホでは縦並びに */
    .news-list__link {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 20px;
    }

    .news-list__content {
        min-width: 0;
    }

    .news-list__meta {
        flex-wrap: wrap;
    }

    .news-list__title {
        font-size: 18px;
        overflow-wrap: anywhere;
    }


    .news-list__image {
        margin-bottom: 18px;
    }

    .news-list__meta {
        gap: 10px;

        margin-bottom: 10px;
    }

.news-filter {
    gap: 8px;

    margin-bottom: 25px;
}

.news-filter__button {
    min-width: 0;

    padding: 8px 14px;

    font-size: 12px;
}

.news-pagination {
    margin-top: 35px;
}

.news-pagination .page-numbers {
    width: 38px;
    height: 38px;

    margin: 0 3px;

    font-size: 12px;
}

}

/* ==================================================
   CONTACT PAGE - MOBILE
================================================== */

@media screen and (max-width: 768px) {

    .contact-page {
        padding-top: 80px;
        padding-bottom: 45px;
    }

    .contact-main {
        padding: 40px 20px 45px;
    }

    .contact-main__lead {
        margin-bottom: 25px;
    }

    .contact-main__lead-box {
        margin-bottom: 30px;
    }

    .contact-main__notice {
        margin-top: 18px;
    }

    /* FORM */

    .contact-form__row {
        margin-bottom: 25px;
    }

    .contact-form__field input,
    .contact-form__field select,
    .contact-form__field textarea {
        display: block;
        width: 100%;
        max-width: 100%;
        font-size: 16px; /* iPhoneで入力時の自動拡大を防ぐ */
    }

    .contact-form__field textarea {
        min-height: 180px;
    }

    /* BUTTON */

    .contact-form__submit {
        margin-top: 30px;
    }

    .contact-form__button {
        min-width: 0;
    }

/* CONFIRM */

.contact-confirm__row dt {
    margin-bottom: 7px;
}

.contact-confirm__row dd {
    font-size: 14px;
}

.contact-confirm__buttons {
    flex-direction: column-reverse;

    gap: 12px;

    margin-top: 30px;
}

.contact-form__back {
    width: 100%;
}

/* COMPLETE */

.contact-complete {
    padding: 40px 20px;
}

.contact-complete__title {
    font-size: 20px;
}

.contact-complete__text {
    font-size: 14px;
}

}

/* ==================================================
   SINGLE NEWS
================================================== */

.single-news-page {
    width: 100%;

    padding: 100px 20px 120px;
}

/* ------------------------------
   NEWS HEADER BOX
------------------------------ */

.single-news__header-box {
    margin-bottom: 35px;
    padding: 28px 30px 32px;
}

/* ------------------------------
   NEWS HEADING
------------------------------ */

.single-news__heading {

    margin: 0 0 40px;
}

/* ------------------------------
   META
------------------------------ */

.single-news__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 15px;

    margin-bottom: 18px;
}

.single-news__date {
    color: #777;

    font-size: 14px;
    font-weight: 700;
}

.single-news__categories {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.single-news__category {
    display: inline-block;

    padding: 4px 12px;

    background: var(--color-main);
    color: #fff;

    border-radius: 50px;

    font-size: 11px;
    font-weight: 800;
}

/* ------------------------------
   TITLE
------------------------------ */

.single-news__title {
    margin: 0;

    color: var(--color-text);

    font-size: 28px;
    font-weight: 900;
    line-height: 1.5;
}

/* ------------------------------
   ARTICLE BOX
------------------------------ */

.single-news__box {
    padding: 40px;
}

/* ------------------------------
   FEATURED IMAGE
------------------------------ */

.single-news__image {
    width: 100%;

    margin-bottom: 35px;

    text-align: center;
}

.single-news__thumbnail {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 12px;
}

/* ------------------------------
   CONTENT
------------------------------ */

.single-news__content {
    color: var(--color-text);

    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}

.single-news__content > *:first-child {
    margin-top: 0;
}

.single-news__content > *:last-child {
    margin-bottom: 0;
}

/* 本文の見出し */

.single-news__content h2 {
    margin: 45px 0 20px;
    padding-bottom: 10px;

    color: var(--color-main);

    border-bottom: 2px solid var(--color-main);

    font-size: 24px;
    font-weight: 900;
}

.single-news__content h3 {
    margin: 35px 0 15px;

    color: var(--color-main);

    font-size: 20px;
    font-weight: 900;
}

/* 本文の画像 */

.single-news__content img {
    max-width: 100%;
    height: auto;

    border-radius: 10px;
}

/* 本文のリンク */

.single-news__content a {
    color: var(--color-main);

    font-weight: 700;
}

/* ------------------------------
   BACK BUTTON
------------------------------ */

.single-news__back {
    margin-top: 40px;

    text-align: center;
}

.single-news__back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 25px;

    background: #fff;
    color: var(--color-main);

    border: 2px solid var(--color-main);
    border-radius: 50px;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.single-news__back-button:hover {
    background: var(--color-main);
    color: #fff;

    transform: translateY(-3px);
}

/* ==================================================
   SINGLE NEWS - MOBILE
================================================== */

@media screen and (max-width: 768px) {

    .single-news-page {
        padding: 80px 15px 90px;
    }

    .single-news__heading {
        margin-bottom: 30px;
    }

    .single-news__header-box {
        margin-bottom: 25px;
    }

    .single-news__meta {
        gap: 8px 10px;
        margin-bottom: 15px;
    }

    .single-news__image {
        margin-bottom: 25px;
    }

    .single-news__content h2 {
        margin-top: 35px;
    }

    .single-news__content h3 {
        margin-top: 30px;
    }

    .single-news__back {
        margin-top: 30px;
    }

}

/* ==================================================
   PRIVACY POLICY
================================================== */

.privacy-page {
    width: 100%;
    min-height: 100vh;

    padding: 140px 20px 120px;
}

/* ------------------------------
   TITLE
------------------------------ */

.privacy-main__title {

    margin: 0 0 40px;
}

/* ------------------------------
   CONTENT BOX
------------------------------ */

.privacy-main__box {
    padding: 50px;

    color: var(--color-text);

    font-size: 15px;
    font-weight: 500;
    line-height: 2;
}

.privacy-main__intro {
    margin: 0 0 45px;
}

/* ------------------------------
   SECTIONS
------------------------------ */

.privacy-section {
    margin-top: 45px;
}

.privacy-section:first-of-type {
    margin-top: 0;
}

.privacy-section h2 {
    margin: 0 0 15px;

    color: var(--color-main);

    font-size: 20px;
    font-weight: 900;
    line-height: 1.5;
}

.privacy-section p {
    margin: 0 0 15px;
}

.privacy-section p:last-child {
    margin-bottom: 0;
}

.privacy-section ul {
    margin: 10px 0 0;
    padding-left: 1.5em;
}

.privacy-section li {
    margin-bottom: 5px;
}

/* ------------------------------
   POLICY INFO
------------------------------ */

.privacy-main__info {
    margin-top: 55px;
    padding-top: 25px;

    border-top: 1px solid #ddd;

    font-size: 14px;
}

.privacy-main__info p {
    margin: 0;
}

/* ==================================================
   PRIVACY POLICY - MOBILE
================================================== */

@media screen and (max-width: 768px) {

    .privacy-page {
        padding: 80px 15px 90px;
    }

    .privacy-main__title {
        margin-bottom: 30px;
    }

    .privacy-main__intro {
        margin-bottom: 35px;
    }

    .privacy-section {
        margin-top: 35px;
    }

    .privacy-main__info {
        margin-top: 40px;
        padding-top: 20px;
    }

}

/* ==================================================
   404 PAGE
================================================== */

.error-page {
    width: 100%;
    min-height: 70vh;

    padding: 140px 20px 100px;
}

.error-main__inner {

    text-align: center;
}

.error-main__number {
    margin: 0;

    color: var(--color-main);

    font-size: 120px;
    font-weight: 900;
    line-height: 1;
}

.error-main__title {
    margin: 20px 0;

    color: var(--color-main);

    font-size: 30px;
    font-weight: 900;
}

.error-main__text {
    margin: 0;

    color: var(--color-text);

    font-size: 15px;
    font-weight: 500;
    line-height: 2;
}

.error-main__button-wrap {
    margin-top: 40px;
}

.error-main__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 25px;

    background: var(--color-main);
    color: #fff;

    border: 2px solid var(--color-main);
    border-radius: 50px;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.error-main__button:hover {
    background: #fff;
    color: var(--color-main);

    transform: translateY(-3px);
}

/* ==================================================
   404 PAGE - MOBILE
================================================== */

@media screen and (max-width: 768px) {

    .error-page {
        padding: 110px 20px 80px;
    }

    .error-main__number {
        font-size: 80px;
    }

    .error-main__title {
        font-size: 23px;
    }

    .error-main__text {
        font-size: 14px;
    }

    .error-main__text br {
        display: none;
    }

}

/* ==================================================
   FOOTER
================================================== */

.site-footer {
    width: 100%;
    padding: 60px 20px 30px;

    background: var(--color-main);
    color: #fff;
}

.site-footer__inner {
    width: 90%;
    max-width: 900px;

    margin: 0 auto;
}

/* ==================================================
   FOOTER NAVIGATION
================================================== */

.footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 35px;

    padding-bottom: 40px;
}

.footer-nav a {
    color: #fff;

    font-size: 14px;
    font-weight: bold;

    text-decoration: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.footer-nav a:hover {
    opacity: 0.7;
    transform: translateY(-2px);
}

/* ONLINE STORE */

.footer-nav__store {
    padding: 11px 20px;

    border: 2px solid #fff;
    border-radius: 30px;
}

/* ==================================================
   COPYRIGHT
================================================== */

.site-footer__copyright {
    margin: 0;

    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.5);

    font-size: 12px;
    text-align: center;
}

/* ==================================================
   HAMBURGER BUTTON
   PCでは非表示
================================================== */

.menu-button {
    display: none;
}

/* ==================================================
   TABLET
   1000px以下
================================================== */

@media screen and (max-width: 1000px) {

    /*
     * ABOUTだけレイアウト変更。
     * セクション自体の横幅は共通900pxルールを使用。
     */

    /* タマゴローを絶対配置から戻す */

    .top-about__image--tamagoro {
        position: static;

        width: auto;
        height: 150px;
    }

    /* ABOUT画像を折り返す */

    .top-about__images {
        display: flex;
        flex-wrap: wrap;

        align-items: flex-end;
        justify-content: center;

        gap: 30px;

        margin-top: 35px;
    }

    .top-about__image--island {
        width: min(230px, 40%);
        height: auto;
    }

    .top-about__image--gamarobo {
        width: auto;
        height: 130px;
    }

    .top-about__image--soujirobo {
        width: auto;
        height: 140px;
    }

    .top-about__image--robocar {
        width: min(230px, 35%);
        height: auto;
    }

}

/* ==================================================
   SMARTPHONE
   768px以下
================================================== */

@media screen and (max-width: 768px) {

    /* ==================================================
       HEADER
    ================================================== */

    .site-header__inner {
        height: 64px;

        margin-top: 10px;

        padding: 0 20px;
    }

    .site-header__logo {
        position: relative;

        width: 120px;

        z-index: 1100;
    }

    /* ==================================================
       MOBILE NAVIGATION
    ================================================== */


    .site-nav {
        position: fixed;

        top: 90px;
        right: 0;

        width: 80%;
        max-width: 320px;

        height: calc(100dvh - 90px);

        padding: 35px 30px 40px;

        background: #fff;

        /* 左上の角を丸くする */
        border-radius: 24px 0 0 0;

        /* ふんわりした影 */
        box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.15);

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 30px;

        overflow-y: auto;

        transform: translateX(100%);
        transition: transform 0.4s ease;

        z-index: 1050;
    }


    /* 開いた状態 */

    .site-nav.is-open {
        transform: translateX(0);
    }

    /* ==================================================
       HAMBURGER BUTTON
    ================================================== */

    .menu-button {
        display: flex;

        flex-direction: column;
        justify-content: center;

        gap: 6px;

        width: 44px;
        height: 44px;

        padding: 8px;

        border: 0;

        background: transparent;

        cursor: pointer;

        position: relative;

        z-index: 1100;
    }

    .menu-button span {
        display: block;

        width: 100%;
        height: 3px;

        background: #222;

        border-radius: 10px;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }

    /* 開いたら×にする */

    .menu-button.is-open span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .menu-button.is-open span:nth-child(2) {
        opacity: 0;
    }

    .menu-button.is-open span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* ==================================================
       MAIN TITLE
    ================================================== */

    .main-visual__title {

        padding-top: 100px;
    }

    /* ==================================================
       NEWS - SMARTPHONE
    ================================================== */

    .top-news__title {
        margin-bottom: 20px;

        font-size: 36px;
    }

    .top-news__list {
        grid-template-columns: 1fr;

        gap: 35px;

        padding: 20px;
    }

    .top-news__item {
        padding: 0;
    }

    .top-news__item-title {
        font-size: 17px;
    }

    /* ==================================================
       ABOUT - SMARTPHONE
    ================================================== */

    .top-about__title {
        margin-bottom: 20px;

        font-size: 30px;
    }

    .top-about__box {
        padding: 25px 20px;
    }

    /* ABOUT文章 */

    .top-about__text p {
        margin-bottom: 18px;

        font-size: 15px;

        line-height: 1.8;
    }

    /* ABOUTボタン */

    .top-about__button {
        margin-top: 15px;
    }

    /* ABOUT画像 */

    .top-about__images {
        display: flex;
        flex-wrap: wrap;

        align-items: flex-end;
        justify-content: center;

        gap: 25px 18px;

        margin-top: 30px;
    }

    /* タマゴローも通常配置 */

    .top-about__image--tamagoro {
        position: static;
        height: 120px;
    }

    /* 島 */

    .top-about__image--island {
        height: 90px;
    }

    /* ガマロボ */

    .top-about__image--gamarobo {
        height: 100px;
    }

    /* ソウジロボ */

    .top-about__image--soujirobo {
        height: 110px;
    }

    /* ロボカー */

    .top-about__image--robocar {
        height: 90px;
    }

/* ==================================================
   ONLINE STORE - SMARTPHONE
================================================== */

.top-store__title {
    font-size: 30px;
}

/* =========================
   スマホレイアウト
========================= */

.top-store__box {
    grid-template-columns: 1fr 1fr;

    grid-template-areas:
        "logo content"
        "image image";

    column-gap: 20px;
    row-gap: 30px;

    align-items: center;

    padding: 25px 20px;
}

/* =========================
   左上：秘密基地ロゴ
========================= */

.top-store__logo-area {
    width: 100%;
}

.top-store__logo {
    width: 100%;
    max-width: 220px;

    margin: 0 auto;
}

/* =========================
   右上：文章＋ボタン
========================= */

.top-store__content {
    width: 100%;
}

.top-store__lead {
    margin: 0 0 15px;

    font-size: 14px;
    line-height: 1.7;
}

.top-store__button {
    padding: 11px 16px;

    font-size: 12px;

    white-space: nowrap;
}

/* =========================
   下：ストア画像
========================= */

.top-store__image {
    width: 100%;
}

.top-store__image img {
    width: 100%;
    height: auto;
}

    /* =========================
       SECTION SPACING
    ========================= */

  /* ==================================================
       FOOTER - SMARTPHONE
    ================================================== */

    .site-footer {
        padding: 45px 20px 25px;
    }

    .site-footer__inner {
        width: 100%;
    }

    .footer-nav {
        flex-wrap: wrap;

        gap: 20px 25px;

        padding-bottom: 30px;
    }

    .footer-nav a {
        font-size: 13px;
    }

    .footer-nav__store {
        padding: 9px 16px;
    }

    .site-footer__copyright {
        padding-top: 20px;

        font-size: 11px;
    }

}

/* ==================================================
   COMMON COMPONENT AUTHORITY
   共通クラスをページ固有CSSより優先して一元管理
================================================== */

.c-section-title.c-section-title {
    display: inline-block;
    padding: 8px 20px 10px;
    background: var(--color-main);
    color: var(--color-white);
    border-radius: 4px;
    font-family: "M PLUS 1p", sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
}

.c-panel.c-panel {
    background: var(--color-white);
    border: var(--panel-border);
    border-radius: var(--panel-radius);
}

@media screen and (max-width: 768px) {
    .c-section-title.c-section-title {
        padding: 7px 15px 9px;
        font-size: 28px;
    }
}