/* カウントダウン全体のコンテナ */

.c-timer-container {

    text-align: center;

    margin-bottom: 40px;

    width: 100%;

    max-width: 337px; /* 画像のコンパクトな横幅に合わせる */

    margin-left: 24px;

    margin-right: auto;

}



/* ヘッダー部分（タイトルと左右の線） */

.c-timer-header {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-bottom: 8px;

}



.c-timer-header__title {

    color: #D71920; /* トレンドマイクロレッド */

    font-size: 18px;

    font-weight: 600;

    margin: 0;

    line-height: 24px;

}



/* 左右の斜線共通のベーススタイル（ここで長さ・太さ・色をコントロール） */

.c-timer-header__title::before,

.c-timer-header__title::after {

    content: "";

    display: inline-block;

    

    /* 【長さ調整】高さを変えると、斜線の長さが変わります */

    height: 20px; 

    

    /* 【太さ・色調整】borderの太さを変えると線の太さが、色を変えると線の色が変わります */

    border-left: 2px solid #333333; 

}



/* 左側の斜線「 \ 」：右に傾ける */

.c-timer-header__title::before {

    transform: rotate(-25deg) translateX(-8px); 

}



/* 右側の斜線「 / 」：左に傾ける */

.c-timer-header__title::after {

    transform: rotate(25deg) translateX(8px); 

}



/* タイマー表示エリア */

.c-timer-display {

    display: flex;

    justify-content: center;

    gap: 4px; /* ボックスと文字の絶妙な間隔 */

    align-items: flex-end;

}



/* 白い数字ボックス */

.c-timer-box {

    background: #ffffff;

    border-radius: 8px; /* 綺麗な角丸 */

     /* 軽い影で立体感を出す */

    min-width: 58px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* ボックスの中の数字 */

.c-timer-box span {

    color: #333; /* 画像に合わせた濃いネイビーグレー */

    font-size: 42px;

    font-weight: 600;

    line-height: 42px;

}



/* 2桁のボックスは少し幅を広げる */

.c-timer-box:has(#timer-hours),

.c-timer-box:has(#timer-minutes),

.c-timer-box:has(#timer-seconds) {

    min-width: 58px;

}



/* 「日」「時間」などの単位テキスト */

.c-timer-unit {

    color: #333; /* 上品なグレー */

    font-size: 14px;

    font-weight: 500;

    margin-right: 2px;

    line-height: 20px;

}

.c-timer-unit:last-child {

    margin-right: 0;

}

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

    .c-timer-container{

        max-width: 242px;

        margin-left:auto;

    }

    .c-timer-header__title{

        font-size: 16px;

        line-height: 20px;

    }

    .c-timer-display{

        gap: 2px;

    }

    .c-timer-box{

        border-radius: 4px;

        min-width: 40px;

        height: 32px;

    }

    .c-timer-box:has(#timer-hours),

    .c-timer-box:has(#timer-minutes),

    .c-timer-box:has(#timer-seconds) {

        min-width: 40px;

    }

    .c-timer-box span{

        font-size: 24px;

        line-height: 24px;

    }

    .c-timer-unit{

        font-size: 12px;

    }

}

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

    .c-timer-container{

        max-width: 205px;

    }

    .c-timer-header__title{

        font-size: 14px;

        line-height: 20px;

    }

    .c-timer-box{

        border-radius: 4px;

        min-width: 28px;

        height: 30px;

    }

    .c-timer-box:has(#timer-hours),

    .c-timer-box:has(#timer-minutes),

    .c-timer-box:has(#timer-seconds) {

        min-width: 28px;

    }

    .c-timer-box span{

        font-size: 18px;

        line-height: 20px;

    }

}

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

    .c-timer-container{

        margin-left: auto;

        margin-bottom: 30px;

    }

    .c-timer-box{

        min-width: 44px;

        height: 38px;

    }

    .c-timer-box:has(#timer-hours),

    .c-timer-box:has(#timer-minutes),

    .c-timer-box:has(#timer-seconds) {

        min-width: 44px;

    }

    .c-timer-box span{

        font-size: 34px;

        line-height: 34px;

    }

}