body {
    margin: 0;                                                  /* 余白なし */
    padding: 0;                                                 /* ページ内側の余白なし */
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;   /* 表示する文字種の設定 */
    background: #FFFAF4;                                      /* 背景色 */
}

.container
{
    display: flex;                  /* フレックスボックスレイアウトにする */
    width: 100%;                    /* 横幅 */
    min-height: 60vh;               /* 高さ */
    background-color: #77131B;    /* 背景色 */
    overflow: hidden;               /* はみ出し部分を隠す */
}

.container-text{
    flex: 0 0 35%;                              /* containerの横幅の割合 */
    display: flex;                              /* フレックスボックスレイアウトにする */
    flex-direction: column;                     /* 要素を横並びにする */
    justify-content: center;                    /* 要素を中央寄せにする（縦方向） */
    align-items: center;                        /* 要素を中央寄せにする（横方向） */
    padding: clamp(0.625rem, 2vw, 2rem);        /* ページ内側の余白（10px～32px） */
    color: white;                             /* 文字色 */
    font-size: clamp(0.625rem, 2vw, 2rem);      /* 文字サイズ（10px～32px） */
    line-height: 2.0;                           /* 行同士の高さ */
    text-align: center;                         /* 中央寄せ */
    opacity: 0;                                 /* フェードインPram OFF*/
    transform: translateY(30px);                /* Webページ表示時は文字を隠しておく  */
    transition: opacity 1.5s ease, transform 1.5s ease;   /* 滑らかに表示する */
}

.container-text.active {
    opacity: 1;                 /* フェードインPram ON */
    transform: translateY(0);   /* 下から文字を表示させる */
}

.container-slider{
    position: relative;     /* absolute要素の基準 */
    flex: 1;                /* スライダー部分が残り全部を使う */
    overflow: hidden;       /* 写真が文字側に飛び出さないようにする */
}

/* スクロール */
.container-slider-slides {
    display: flex;                  /* フレックスボックスレイアウトにする */
    width: 100%;                    /* 横幅（画像7枚で700%） */
    height: auto;                   /* 高さ */
    transition: transform 1s ease;  /* 滑らかに表示する */
}

.container-slider-slides img {
    flex: 0 0 100%;     /* 幅を100％に固定する */
    width: 100%;        /* 横幅 */
    height: 100%;       /* 高さ */
    object-fit: cover;  /* 写真をトリミングして、枠にピッタリはめる */
}

/* 矢印ボタン */
.prev, .next {
    position: absolute;                       /* 親要素を基準にする */
    top: 50%;                                 /* 親要素の高さ（上部から）50% */
    transform: translateY(-50%);              /* 自分自身の高さ50％分、上に配置する（topと組み合わせることで、画像の中央に矢印を配置する） */
    background: rgba(0,0,0,0.3);            /* 背景色 */
    color: white;                           /* 矢印の色 */
    border: none;                             /* 枠なし */
    font-size: clamp(1.25rem, 5vw, 2.5rem);   /* 矢印サイズ（20px～40px） */
    border-radius: 0.5rem;                    /* 丸み */
    cursor: pointer;                          /* カーソルが当たった時に、カーソルの種類を変更 */
    padding: clamp(0.375rem, 2vw, 0.875rem) clamp(0.625rem, 3vw, 1.25rem);  /* 上下：余白（6px～14px）、左右：余白（10px～20px） */
}

.prev {
    left: clamp(0.3125rem, 2vw, 0.75rem);    /* 左端からの距離（5px～12px） */
}

.next {
    right: clamp(0.3125rem, 2vw, 0.75rem);   /* 右端からの距離（5px～12px） */
}

/* ドット全体 */
.slider-dots {
    position: absolute;                     /* 親要素を基準にする */
    bottom: clamp(0.75rem, 3vw, 1.25rem);   /* 親要素の高さ（下部から）12px～20px */
    left: 50%;                              /* 親要素の幅（左部から）50% */
    transform: translateX(-50%);            /* ドットを中央に配置する */
    display: flex;                          /* フレックスボックスレイアウトにする */
    gap: clamp(0.5rem, 2vw, 0.75rem);       /* 左右の間隔（8px～12px） */
}

/* 各ドット */
.dot {
    width: clamp(0.5rem, 2vw, 0.75rem);           /* 横幅（8px～12px） */
    height: clamp(0.5rem, 2vw, 0.75rem);          /* 高さ（8px～12px） */
    background-color: rgba(255, 255, 255, 0.5); /* 背景色 */
    border-radius: 50%;                           /* 丸み */
    cursor: pointer;                              /* カーソルが当たった時に、カーソルの種類を変更 */
}

/* アクティブ状態 */
.dot.active {
    background-color: white;  /* 背景色 */
}

.main-contens {
    width: 65%;         /* 横幅 */
    margin: 0 auto;     /* ページ内側の余白 */
}

.main-contens p {
    font-size: clamp(0.75rem, 2vw, 1.25rem);    /* 文字サイズ（12px～20px） */
}

.news-layout {
    display: flex;                              /* フレックスボックスレイアウトにする */
    gap: clamp(0.75rem, 2vw, 1.5rem);           /* 左右の間隔（12px～24px） */
    align-items: flex-start;                    /* 上揃え */
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);  /* 下部の余白（24px～40px） */
}

.info-box, .important-box {
    flex: 1;
    width: 100%;              /* 横幅 */
}

.info-box h2, .important-box h2 {
    color: #000;                          /* 文字色 */
    font-size: clamp(1.25rem, 2vw, 2rem);   /* 文字サイズ（20px～32px） */
    text-align: center;                     /* 文字を中央寄せ */
}

.info  {
    display: flex;            /* フレックスボックスレイアウトにする */
    justify-content: right;   /* 横方向の右寄せ */
    align-items: center;      /* 縦方向の中央寄せ */
    width: 100%;              /* 横幅 */
}

.important {
    display: flex;            /* フレックスボックスレイアウトにする */
    justify-content: left;    /* 横方向の左寄せ */
    align-items: center;      /* 縦方向の中央寄せ */
    width: 100%;              /* 横幅 */
}

.scroll-box {
    text-align: left;                     /* 文字を左寄せ */
    width: 100%;                          /* 横幅 */
    max-width: 100%;                      /* 最大横幅 */
    height: clamp(15rem, 50vw, 25rem);    /* 縦幅を固定（240px～400px） */
    border: 1px solid #333;             /* 枠線 */
    overflow-y: auto;                     /* 縦方向にスクロールバーを表示 */
    padding: clamp(0.75rem, 2vw, 1rem);   /* ページ内部の余白（12px～16px） */
    border-radius: 0.5rem;                /* 丸み */
    box-sizing: border-box;               /* 横幅の中にpaddingとborderも含めて表示する */
}

.explain {
    width: 100%;                                              /* 横幅 */
    padding: clamp(0.75rem, 2vw, 5rem) clamp(1rem, 5vw, 5%);  /* 上下：余白（12px～80px）、左右：余白（16px～5％） */
    box-sizing: border-box;                                   /* 枠内に要素を収める */
}

.explain h2 {
    font-size: clamp(1.25rem, 2vw, 2rem);           /* 文字サイズ（20px～32px） */
    font-weight: 600;                               /* 文字の太さ */
    margin-bottom: clamp(1.25rem, 4vw, 1.875rem);   /* 下部余白（20px～30px） */
}

.explain h2 span {
    font-size: clamp(1.25rem, 2vw, 2rem);           /* 文字サイズ（20px～32px） */
    margin-right: clamp(0.375rem, 2vw, 0.625rem);   /* 右側余白（6px～10px） */
    border-bottom: 2px solid #000;                /* 下線部 */
}

/* 01 理念 */
.philosophy {
    display: flex;        /* フレックスボックスレイアウトにする */
    flex-wrap: wrap;      /* 折り返し表示 */
    text-align: center;   /* 文字を中央寄せ */
}

.philosophy-content {
    flex: 1;
    padding: clamp(0.75rem, 4vw, 1.25rem) clamp(1rem, 6vw, 2.5rem);   /* 上下：余白（12px～20px）、左右：余白（16px～40px） */
    font-size: clamp(0.75rem, 5vw, 1.25rem);                          /* 文字サイズ（12px～20px） */
}

.philosophy-catch {
    font-size: clamp(1rem, 2vw, 2rem);     /* 文字サイズ（20px〜26px） */
    color: #d9534f;                             /* 文字色 */
    margin-bottom: clamp(0.75rem, 3vw, 1.25rem);  /* 下部余白（12px〜20px） */
}

/* 02 提供エリア */
.service-area {
    display: flex;            /* フレックスボックスレイアウトにする */
    flex-wrap: wrap;          /* 折り返し表示 */
    text-align: center;       /* 文字を中央寄せ */
    justify-content: center;  /* 横方向の中央 */
}

.area-wrapper {
    padding: clamp(0.75rem, 4vw, 1.25rem) clamp(1rem, 6vw, 2.5rem);   /* 上下：余白（12px～20px）、左右：余白（16px～40px） */
}

/* 03 特徴 */
.features {
    text-align: center;     /* 文字を中央寄せ */
}

.feature-list {
    display: flex;                          /* フレックスボックスレイアウトにする */
    flex-wrap: wrap;                        /* 折り返し表示 */
    gap: clamp(1rem, 3vw, 1.875rem);        /* 要素同士の間隔（16px～30px） */
    margin: clamp(1.5rem, 6vw, 2.5rem) 0;   /* 上下：余白（24px〜40px）、左右：余白なし */
    justify-content: center;                /* 横方向の中央 */
}

.feature-item {
    background: white;                      /* 背景色 */
    border-radius: 50%;                       /* 丸み */
    width: clamp(13.75rem, 70vw, 26.25rem);   /* 横幅（220px～420px）  */
    height: clamp(13.75rem, 70vw, 26.25rem);  /* 高さ（220px～420px）  */
    padding: clamp(1rem, 4vw, 2.5rem);        /* 余白（16px〜40px） */
    box-sizing: border-box;                   /* 枠内に要素を収める */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);   /* 要素の影 */
}

.feature-item h3 {
    font-size: clamp(0.875rem, 2vw, 1.5rem);        /* 文字サイズ（14px～24px） */
    font-weight: 500;                               /* 文字の太さ */
    margin-bottom: clamp(0.5rem, 2vw, 0.75rem);     /* 下部の余白（8px～12px） */
}

.feature-bottom {
    font-size: clamp(0.875rem, 2vw, 1.5rem);  /* 文字サイズ（14px～24px） */
    font-weight: 500;                         /* 文字の太さ */
    margin-top: clamp(1.5rem, 6vw, 5rem);     /* 上部余白：24px ～ 80px */
}

/* スマホ + タブレット対応 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;   /* 要素を縦並びにする */
        height: auto;             /* 高さ */
    }

    .news-layout {
        flex-direction: column;   /* 要素を縦並びにする */
    }

    .main-contens {
        width: 90%;         /* 横幅 */
        margin: 0 auto;     /* ページ内側の余白 */
    }

    .info,
    .important {
        display: block;
    }

    .scroll-box {
        width: 100%;
        max-width: 100%;
    }

    .feature-item {
        background: white;                      /* 背景色 */
        border-radius: 2rem;                      /* 丸み */
        width: 90%;                               /* 横幅 */
        height: auto;                             /* 高さ */
        padding: 1rem;                            /* 余白（16px） */
        box-sizing: border-box;                   /* 枠内に要素を収める */
        box-shadow: 0 0 10px rgba(0,0,0,0.1);   /* 要素の影 */
    }
}