/*============================================================================================================================*/
/* 基本ルール
==============================================================================================================================
TailwindCSSを利用してください
フレームワーク内で用意されているクラスを組み合わせてUIを構成してください
フォントサイズ、Nodeサイズは以前同様に倍率可変にしてください
フォントサイズはtailwindcssのものを利用してください
フレームワーク内で用意されているクラスでは対応できない場合のみCSSを独自に作成して利用してください
幅に関してはよほどモックサイトとズレが発生しない限りはフレームワーク内で用意されているクラスのサイズで妥協してかまいません
それでも検証者から指摘がある場合はCSSを独自に作成して利用してください

マージン(vm)
    auto  m-auto
    全体  ma-N
    右    mr-N
    左    ml-N
    上    mt-N
    下    mb-N
    複数2 m-N-N
    複数3 m-N-N-N
    複数4 m-N-N-N-N
マージン(%)
    auto  m-auto
    全体  ma-Np
    右    mr-Np
    左    ml-Np
    上    mt-Np
    下    mb-Np
    複数2 m-Np-Np
    複数3 m-Np-Np-Np
    複数4 m-Np-Np-Np-Np
パディング
    p-N

文字カラー fc-FF0000
バックグランドカラー bgc-78909C
    RGBカラーコードではなく16進数カラーコードを利用してください(透過が必要な場合RGBカラーコードを利用してもいいです)
    16進数カラーコードのアルファベット部分は大文字で定義してください
    fc-ff0000 × → fc-FF0000 ○
    bgc-78909c × → bgc-78909C ○

*1 jQueryでslide関数などでanimationする際に指定した要素が完全に表示されるまでの間".ui-effects-placeholder"というnodeが作成され、そのnodeのbackground-colorはfooterのbackground-colorになり、css上書きできないので色は付けない
==============================================================================================================================*/
/* custom(パーツ)
==============================================================================================================================*/
:root{
    --system-primary-color: #FFAE15;
    --system-primary-text-color: #000000;
    --system-secondary-color: #FFBF45;
    --system-secondary-text-color: #000000;
    --system-tertiary-color: #FFEFD0;
    --system-tertiary-text-color: #000000;
}
html {
    width:100%;
    height:100%;
    font-size:3.8vw;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    -webkit-touch-callout:none;/* iOS長押し対応 */
    touch-action:manipulation;/* iOSダブルタップ対応 */
}
body {
    width:100%;
    height:100%;
}
/* overscroll blackgroundcolor ios 参考:https://qiita.com/bgn_nakazato/items/9399937fdf4059f9f9d7 */
body::after {
    position:fixed;
    bottom:0;
    width:100%;
    height:100%;
    content:"";
    z-index:-999;
    background-color:#F5F5F5;
}
header {
    width:100%;
    background-color:#F5F5F5;
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",メイリオ,meiryo,sans-serif,"Microsoft Yahei","微软雅黑";
}
main {
    width:100%;
    height: 100%;
    background-color:#F5F5F5;
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",メイリオ,meiryo,sans-serif,"Microsoft Yahei","微软雅黑";
}
footer {
    width:100%;
    position:fixed;
    bottom:0;
    background-color:transparent;/* *1 */
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",メイリオ,meiryo,sans-serif,"Microsoft Yahei","微软雅黑";
}
a {
    text-decoration:none;
    color:#000000;
    display:block;
}
a:hover {
    color: #000000;
}
a:focus-visible {
    outline: none;
}
input:disabled {
    background-color:#888888;
}
::-webkit-scrollbar {
    display:none;
}
/* color */
.fc-000000 {
    color:#000000;
}
.fc-FFFFFF {
    color:#FFFFFF;
}
.fc-888888 {
    color:#888888;
}
.fc-D64200 {
    color:#D64200;
}
.fc-System-Primary {
    color:var(--system-primary-color);
}
.fc-System-Secondary{
    color:var(--system-secondary-color);
}
.fc-System-Tertiary{
    color:var(--system-tertiary-color);
}
/* border-color */
.bc-System-Primary {
    border-color:var(--system-primary-color);
}
.bc-System-Secondary{
    border-color:var(--system-secondary-color);
}
.bc-System-Tertiary{
    border-color:var(--system-tertiary-color);
}
/* background-color */
.bgc-FFFFFF {
    background-color:#FFFFFF;
}
.bgc-F5F5F5 {
    background-color:#F5F5F5;
}
.bgc-2680EB {
    background-color:#2680EB;
}
.bgc-D64200 {
    background-color:#D64200;
}
.bgc-FE0132 {
    background-color:#FE0132;
}
.bgc-08BF5B {
    background-color:#08BF5B;
}
.bgc-888888 {
    background-color:#888888;
}
.bgc-FFAE15 {
    background-color:#FFAE15;
}
.bgc-System-Primary {
    background-color:var(--system-primary-color);
    color:var(--system-primary-text-color);
}
.bgc-System-Secondary {
    background-color:var(--system-secondary-color);
    color:var(--system-secondary-text-color);
}
.bgc-System-Tertiary {
    background-color:var(--system-tertiary-color);
    color:var(--system-tertiary-text-color);
}
/* background-color(透過) */
.bgc-255-255-255-08 {
    background-color:rgba(255,255,255,0.8);
}
.bgc-136-136-136-08 {
    background-color:rgba(136,136,136,0.8);
}
.bgc-0-0-0-08 {
    background-color:rgba(0,0,0,0.8);
}
/* fill */
.f-FFFFFF {
    fill:#FFFFFF;
}
.f-888888 {
    fill:#888888;
}
.f-D64200 {
    fill:#D64200;
}
.f-System-Primary {
    fill:var(--system-primary-color);
}
.f-System-Secondary {
    fill:var(--system-secondary-color);
}
.f-System-Tertiary {
    fill:var(--system-tertiary-color);
}
/* accent-color */
.ac-System-Primary {
    accent-color:var(--system-primary-color);
    color:var(--system-primary-text-color);
}
.ac-System-Secondary {
    accent-color:var(--system-secondary-color);
    color:var(--system-secondary-text-color);
}
.ac-System-Tertiary {
    accent-color:var(--system-tertiary-color);
    color:var(--system-tertiary-text-color);
}
/*============================================================================================================================*/
/* component(汎用性があるもの)
==============================================================================================================================*/
.info-layer {}
/* タイトル */
.component-title-left-border {
    border-left:1.5rem solid var(--system-primary-color);
}
.component-title-bottom-border {
    border-bottom:0.3rem solid var(--system-primary-color);
}
.component-title-top-border {
    border-top:0.3rem solid var(--system-primary-color);
}

/* #D64200 */
/* all */
.component-border-middle-D64200 {
    border:0.18rem solid #D64200;
    border-radius:5px;
}
.component-border-small-D64200 {
    border:0.09rem solid #D64200;
    border-radius:5px;
}
/* top */
.component-border-top-middle-D64200 {
    border-top:0.18rem solid #D64200;
}
.component-border-top-small-D64200 {
    border-top:0.09rem solid #D64200;
}
/* bottom */
.component-border-bottom-middle-D64200 {
    border-bottom:0.18rem solid #D64200;
}
.component-border-bottom-small-D64200 {
    border-bottom:0.09rem solid #D64200;
}

/* #888888 */
/* all */
.component-border-middle-888888 {
    border:0.18rem solid #888888;
    border-radius:5px;
}
.component-border-small-888888 {
    border:0.09rem solid #888888;
    border-radius:5px;
}
/* top */
.component-border-top-small-888888 {
    border-top:0.09rem solid #888888;
}
.component-border-top-middle-888888 {
    border-top:0.18rem solid #888888;
}
/* bottom */
.component-border-bottom-middle-888888 {
    border-bottom:0.18rem solid #888888;
}
.component-border-bottom-small-888888 {
    border-bottom:0.09rem solid #888888;
}

/* #FFBF45 */
/* all */
/* top */
.component-border-top-middle-FFBF45 {
    border-top:0.18rem solid #FFBF45;
}
/* bottom */

/* system-primary-color */
/* all */
/* top */
.component-border-top-small-System-Primary {
    border-top:0.09rem solid var(--system-primary-color);
}
/* bottom */
.component-border-bottom-small-System-Primary {
    border-bottom:0.09rem solid var(--system-primary-color);
}

/* system-secondary-color */
/* all */
.component-border-middle-System-Secondary{
    border:0.18rem solid var(--system-secondary-color);
    border-radius:5px;
}
.component-border-small-System-Secondary{
    border:0.09rem solid var(--system-secondary-color);
    border-radius:5px;
}
/* top */
.component-border-top-middle-System-Secondary {
    border-top:0.18rem solid var(--system-secondary-color);
}
.component-border-top-small-System-Secondary {
    border-top:0.09rem solid var(--system-secondary-color);
}
/* bottom */
.component-border-bottom-middle-System-Secondary {
    border-bottom:0.18rem solid var(--system-secondary-color);
}
.component-border-bottom-small-System-Secondary {
    border-bottom:0.09rem solid var(--system-secondary-color);
}

/* button */
.component-button-center {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:5px;
}
.component-button-F5F5F5 {
    color:#000000;
    text-align:center;
    background-color:#F5F5F5;
    border:0.18rem solid var(--system-secondary-color);
    border-radius:5px;
}
.component-button-System-Primary {
    color:var(--system-primary-text-color);
    text-align:center;
    background-color:var(--system-primary-color);
    border:0.18rem solid var(--system-primary-color);
    border-radius:5px;
}
.component-button-System-Secondary {
    color:var(--system-secondary-text-color);
    text-align:center;
    background-color:var(--system-secondary-color);
    border:0.18rem solid var(--system-secondary-color);
    border-radius:5px;
}
.component-button-FFFFFF {
    color:#000000;
    text-align:center;
    background-color:#FFFFFF;
    border:0.18rem solid #FFFFFF;
    border-radius:5px;
}
.component-button-CBCBCB {
    color:#FFFFFF;
    text-align:center;
    background-color:#CBCBCB;
    border:0.18rem solid #CBCBCB;
    border-radius:5px;
}
.component-button-888888 {
    color:#000000;
    text-align:center;
    background-color:#888888;
    border:0.18rem solid #888888;
    border-radius:5px;
}
.component-button-FFFFFF-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border:0.18rem solid #888888;
    background-color:#FFFFFF;
}
.component-button-System-Primary-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border:0.18rem solid var(--system-primary-color);
    background-color:var(--system-primary-color);
    color:var(--system-primary-text-color);
}
.component-button-common {
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.component-button-order {
    color: #888888;
    padding: 0.15rem 0.45rem 0.15rem 0.45rem;
    border-radius: 100vh;
    border: 0.18rem solid #888888;
}
.component-button-plus {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.18rem solid #000000;
    color: #FFFFFF;
    background-color: #000000;
}
.component-button-square {
    color: #000000;
    width:2.5rem;
}
.component-button-minus {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.18rem solid #888888;
    color: #888888;
    background-color: #FFFFFF;
}
.component-absolute-start {
    top: 50%;
    left: 0%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}
.component-absolute-center {
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
}
.component-absolute-end {
    top: 50%;
    right: 0%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}
/* !! Basically use the "shadow-xl" class from Tailwind CSS! Use only if the background and the element you want to shadow are both the same color! */
.component-shadow-lg {
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
/* https://qiita.com/shuhei/items/0d8d925acd48afefdb57 */
/* [class*="button"]:active {
    transform:scale(0.9);
} */
/*============================================================================================================================*/
/* other(汎用性が全くないもの/画面固有のもの)
==============================================================================================================================*/
.mic_top {
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}
.mic_bottom {
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}
a.category-selected {
    background-color: var(--system-primary-color);
    color:var(--system-primary-text-color);
    border-radius: 100vh;
    text-align: center;
}
.option-article.option-selected-ui {
    background-color: var(--system-primary-color);
    color:var(--system-primary-text-color);
}
/* .option-article:has(.option-selected) {
    background-color: var(--system-primary-color);
    color:var(--system-primary-text-color);
} */
/*
.option .grid.grid-cols-2 > *:not(:nth-last-of-type(-n + 2)),
.option .grid.grid-cols-2 > *:nth-last-of-type(2):nth-of-type(even) {
    border-bottom:0.09rem dotted #888888;
}
*/
.hamburger-menu {
    margin-top: 3.35rem;
    margin-right: -0.75rem;
}
.select-eatin-takeout {
    height: 3rem;
    border-radius: 20px;
    border: 0.18rem solid #888888;
    background-color: #888888;
}
input[name="delivery_cd"][type="radio"]:checked + span,
input[name="delivery_address"][type="radio"]:checked + span {
    display: block;
}
input[name="new_address"][type="radio"]:checked + label span {
    background-color: var(--system-primary-color);
    box-shadow: 0px 0px 0px 2px white inset;
}

input[name="new_address"][type="radio"]:checked + label{
    color: var(--system-primary-color);
}
/*============================================================================================================================*/
/* レスポンシブ https://tailwindcss.com/docs/responsive-design //!! レスポンシブ影響あり
==============================================================================================================================*/
/* タブレット-PC */
@media (min-width: 768px) {       /* md => https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference */
    html {
        font-size:2.8vw;
    }
}
/* 縦 < 横 */
@media (orientation: landscape) { /* landscape => https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference */
    html {
        font-size:1.5vw;
    }
}