/* style-00-root.css */

/* ブレークポイント 481px 768px 1024px 1280px */

/* =========================
   CSS変数（色・共通値）集約
========================= */
:root {
    /* 色 */
    --new-color-gray-300: #ccc;
    --new-color-gray-400: #999;
    --new-color-gray-600: #666;
    --new-color-gray-800: #333;

    --new-color-blue-300: #ccf;
    --new-color-blue-400: #99f;
    --new-color-blue-600: #33f;
    --new-color-blue-800: #00c;

    /* カレンダー区分色 */
    --color-calendar-a: #fff;
    --color-calendar-b: #cff;
    --color-calendar-c: #ff0;
    --color-calendar-d: #f90;
    --color-calendar-e: #f00;
    --color-calendar-z: #000;

    /* タイポ */
    --font-family-base: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    --line-height-base: 1.6;

    /* 文字サイズ */
    --font-size-base: 16px;
    --font-size-tablet: 22px;

    --font-size-h1: 1.65em;
    --font-size-h2: 1.325em;
    --font-size-h3: 1.15em;
    --font-size-month: 1.00em;
    --font-size-footer: 1.00em;

    --font-size-month-cell: 2.5vh;
    --font-size-legend: 1.5vh;
    --font-size-lastnext-month: clamp(0.7em, 2.9vw, 0.8em);

}

:root {
    /* 余白・枠 */

    --space-zero: 0.0em;
    --space-010em: 0.10em;
    --space-025em: 0.25em;
    --space-050em: 0.50em;
    --space-075em: 0.75em;
    --space-100em: 1.00em;
    --space-150em: 1.50em;
    --space-200em: 2.00em;
    --space-400em: 4.00em;

    /* サイズ */
    --percent-1428: 14.28%;
    --percent-1500: 15.00%;
    --percent-5625: 56.25%;
    --percent-9000: 90.00%;
    --percent-10000: 100.00%;

    --px-0: 0px;
    --px-2: 2px;
    --px-5: 5px;

    /* 線 */
    --border-last-update: 1px dashed var(--new-color-gray-300);
    --border-h3: solid 3px var(--color-calendar-a);
    --border-h3-accent: solid 3px var(--new-color-gray-600);
    --border-zero: 0;
    --border-1: 1px solid var(--new-color-gray-300);
    --border-left-month: solid 1px var(--new-color-gray-300);
    --border-bottom-month: solid 1px var(--new-color-gray-300);


    /* 画像 */
    --u-wave-image: url(../img/u_wave.png);
    --u-wave-size: 16px;
    --u-wave-padding-bottom: 3px;
    --img-no1: url(../img/no1.gif);
    --img-no2: url(../img/no2.gif);
    --img-no3: url(../img/no3.gif);

    /* アニメーション */
    --fadein-name: fadeIn;
    --fadein-duration: 0.5s;
    --fadein-timing: ease;
    --fadein-delay: 1s;
    --fadein-iteration: 1;
    --fadein-direction: normal;
    --fadein-webkit-duration: 2s;
    --fadein-webkit-delay: 0s;

    /* lazy */
    --lazy-opacity-hidden: 0;
    --lazy-opacity-shown: 1;
    --lazy-transition: opacity 500ms ease;
}

:root {
    /* 見出し装飾（三角） */
    --h2-after-border: 10px;
    --h2-after-offset: -10px;

    /* 見出し装飾（h3下線） */
    --h3-after-bottom: -3px;
    --h3-after-width: 30%;

    /* パンくず */
    --bc-margin-x: 1em;
    --bc-padding-y: 0.25em;
    --bc-crumb-padding-left: 0.5em;
}

:root {
    /* gmap */
    --gmap-padding-bottom: 56.25%;

    /* eyecatch */
    --eyecatch-margin-y: 1em;
    --eyecatch-copy-padding: 0.75em 1em 0.5em;

    /* サイドバー見出し */
    --sidebar-h2-font-size: 1.2em;
    --sidebar-h2-padding: 0.5em 1.5em;
    --sidebar-h2-radius: 5px;
    --sidebar-h2-marker-left: 0.7em;
    --sidebar-h2-marker-width: 5px;
    --sidebar-h2-marker-height: 1.2em;

    /* js_side-bar */
    --side-bar-li-width: 31%;
    --side-bar-li-margin: 1%;
    --side-bar-link-font-size: 0.8em;
    --side-bar-link-padding: 10px 0;

    /* ticket */
    --ticket-padding: 1em;
    --ticket-max-width: 90%;
    --ticket-font-size: 1.1em;
    --ticket-line-height: 1.25;
    --ticket-radius: 3em;
    --ticket-border-width: 5px;

    /* shadow */
    --shadow-rgb-black: 0 0 0;
    --shadow-ticket-alpha: 0.3;
    --shadow-ticket: 0 3px 5px 0 rgb(var(--shadow-rgb-black) / var(--shadow-ticket-alpha));

    /* hotel */
    --hotel-border: 1px solid var(--color-calendar-a);
    --hotel-name-line-height: 1.2em;
    --hotel-overview-font-size: 0.85em;
    --hotel-overview-line-height: 1.35em;
    --hotel-review-padding: 0.5em;
}

:root {

    /* 高さ */
    --height-month-cell: 5.5vh;
    --line-height-month-cell: 5.5vh;


    /* 前月/来月ボタン */
    --month-btn-padding: var(--space-025em) var(--space-100em);
    --month-btn-margin: var(--space-100em) 0;

    /* num（混雑ラベル）を画面幅に応じて縮める */
    --font-size-month-day: clamp(0.50em, 1.0vw, 0.90em);
    --font-size-month-num: clamp(0.45em, 1.0vw, 0.90em);

    /* congestion_list（凡例） */
    --congestion-li-width: calc(100% / 6);
    --font-size-congestion-legend: var(--font-size-legend);
}


:root {
    /* display */
    --display-none: none;

    /* 幅・レイアウト（タブレット） */
    --wrapper2-width-tablet: 30em;
    --main-sidebar-width-tablet: 28em;

    /* 幅・レイアウト（PC） */
    --wrapper2-width-pc: 64.25em;
    --main-width-pc: 41.5em;
    --sidebar-width-pc: 17.75em;

    /* 角丸 */
    --radius-1em: 1em;

    /* header logo */
    --logo-width: 91px;
    --logo-width-mobile: 50px;
    --logo-width-tablet: 120px;
    --logo-width-pc: 80px;

    --logo-margin-mobile: 0;
    --logo-margin-tablet: 0.5em auto;
    --logo-margin-pc: 1em auto;

    /* eyecatch */
    --eyecatch-copy-font-mobile: 0.8em;
    --eyecatch-copy-font-tablet: 0.9em;
    --eyecatch-copy-padding-tablet: 1em 1em;

    /* hotel list item width */
    --hotel-li-width-mobile: 48%;
    --hotel-li-width-tablet: 32%;

    /* ticket */
    --ticket-maxwidth-tablet: 70%;
    --ticket-padding-tablet: 0.5em 1.5em;
    --ticket-fontsize-tablet: 1.3em;
    --ticket-maxwidth-pc: 50%;
    --ticket-fontsize-pc: 1.5em;

    /* calendar month (tablet) */
    --month-margin-tablet: 0 0.5em 2em 1em;
    --month-cell-width: 14.28%;
    --month-cell-fontsize-tablet: 2.9vh;
    --month-cell-height-tablet: 5.8vh;
    --month-cell-lineheight-tablet: 5.8vh;

    /* calendar month (pc) */
    --month-width-pc: 41.5em;
    --month-margin-pc: 1em 0 2em;
    --month-cell-height-pc: 80.0px;
    --month-cell-lineheight-pc: 80.0px;
}

:root {
    /* グラデーション */
    --category-grad-angle: 225deg;
    --category-grad-cut: 13px;

    /* 枠線 */
    --category-title-border-width: 3px;

    /* 幅 */
    --percent-10000: 100%;
    --category-width-tablet: 32.5%;

    /* padding（title） */
    --category-title-padding: 8px 0 6px;
}

:root {
    /* 幅 */
    --year-container-width-default: 90%;
    --year-container-width-mobile: 45%;
    --year-container-width-tablet: 31%;
    --month-width: 100%;

    /* 年間カレンダー（月セル） */
    --year-month-cell-font-mobile: 2.5vh;
    --year-month-cell-height-mobile: 6.5vh;
    --year-month-cell-lineheight-mobile: 6.5vh;

    --year-month-cell-font-tablet: 1.5vh;
    --year-month-cell-height-tablet: 4.5vh;
    --year-month-cell-lineheight-tablet: 4.5vh;
}


@media screen and (min-width:768px) {
    :root {
        --congestion-li-width: calc(100% / 6);
        --font-size-congestion-legend: 1.5vh;
        --font-size-month-num: clamp(0.48em, 0.9vw, 0.62em);
    }
}

@media screen and (min-width:1024px) {
    :root {
        --font-size-month-num: clamp(0.52em, 0.7vw, 0.66em);
    }
}