/*==========================
    フォント
==========================*/

@font-face{
    font-family:"HachiMaruPop-Regular";
    src:url("/static/fonts/HachiMaruPop-Regular.ttf");
}

@font-face{
    font-family:"KiwiMaru-Regular";
    src:url("/static/fonts/KiwiMaru-Regular.ttf");
}

@font-face{
    font-family:"MPLUSRounded1c-ExtraBold";
    src:url("/static/fonts/MPLUSRounded1c-ExtraBold.ttf");
}

@font-face{
    font-family:"NotoSansJP-VariableFont_wght";
    src:url("/static/fonts/NotoSansJP-VariableFont_wght.ttf");
}

@font-face{
    font-family:"YuseiMagic-Regular";
    src:url("/static/fonts/YuseiMagic-Regular.ttf");
}


/*==========================
    フォント設定
==========================*/

:root{
    --app-font:"NotoSansJP-VariableFont_wght";
}

body.font-hachi-maru-pop{
    --app-font:"HachiMaruPop-Regular";
}

body.font-kiwi-maru{
    --app-font:"KiwiMaru-Regular";
}

body.font-mplus-rounded{
    --app-font:"MPLUSRounded1c-ExtraBold";
}

body.font-noto-sans-jp{
    --app-font:"NotoSansJP-VariableFont_wght";
}

body.font-yusei-magic{
    --app-font:"YuseiMagic-Regular";
}


/*==========================
    共通
==========================*/

*{
    box-sizing:border-box;
}

html{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}

body{
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    min-width:0;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    font-family:var(--app-font),sans-serif;
    background-image:url("/static/img/background_phone.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

body *{
    font-family:inherit;
}


/*==========================
    画面共通
==========================*/

.background{
    width:100%;
    flex:1 1 0;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow:hidden;
}

.back-link{
    display:block;
    width:max-content;
    flex-shrink:0;
    margin-bottom:5px;
    color:#888;
    font-size:14px;
    text-decoration:none;
}


/*==========================
    ページスクロール
==========================*/

.page-scroll{
    width:100%;
    flex:1 1 0;
    min-width:0;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.page-scroll::-webkit-scrollbar{
    display:none;
}


/*==========================
    共通コンテナ
==========================*/

.container{
    width:100%;
    max-width:430px;
    min-width:0;
    margin:0 auto;
    padding:10px 20px 30px;
}


/*==========================
    タイトル
==========================*/

.page-title{
    margin:10px 0 20px;
    color:#333;
    text-align:center;
    font-size:25px;
}


/*==========================
    戻るボタン
==========================*/

.back-button{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    max-width:430px;
    height:40px;
    margin:0 auto;
    padding:0 15px;
    color:#888;
    font-size:14px;
    line-height:1;
    text-decoration:none;
}

.back-button:active{
    opacity:.7;
}


/*==========================
    フォーム共通
==========================*/

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:bold;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
}


/*==========================
    入力項目
==========================*/

input,
select,
textarea{
    font-size:16px !important;
}


/*==========================
    テキスト入力
==========================*/

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"]{
    width:100%;
    height:45px;
    padding:0 12px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fff;
}


/*==========================
    セレクト
==========================*/

select{
    width:100%;
    height:45px;
    padding:0 12px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fff;
}


/*==========================
    日付・日時入力
==========================*/

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"]{
    display:block;
    width:100%;
    min-inline-size:0;
    height:45px;
    margin:0;
    padding:0 12px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fff;
    font-size:16px !important;
}


/* Safari */

@supports (-webkit-touch-callout:none){
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"]{
        width:100%;
        min-inline-size:0;
        -webkit-appearance:none;
        appearance:none;
    }
}


/*==========================
    テキストエリア
==========================*/

textarea{
    width:100%;
    min-height:100px;
    padding:12px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fff;
    resize:vertical;
}


/*==========================
    ファイル入力
==========================*/

input[type="file"]{
    width:100%;
}


/*==========================
    チェックボックス
==========================*/

.checkbox{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:bold;
    line-height:18px;
}

.checkbox input{
    width:18px;
    height:18px;
    margin:0;
    flex-shrink:0;
}


/*==========================
    ラジオボタン
==========================*/

.radio{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:bold;
    line-height:18px;
}

.radio input{
    width:18px;
    height:18px;
    margin:0;
    flex-shrink:0;
}


/*==========================
    共通ボタン
==========================*/

button{
    box-sizing:border-box;
}


/*==========================
    検索開閉ボタン
==========================*/

.search-toggle-btn{
    display:flex;
    align-items:center;
    width:100%;
    max-width:400px;
    height:42px;
    margin:0 auto;
    padding:0 14px;
    border:0;
    border-radius:12px;
    background:#fff;
    color:#555;
    font-size:14px;
    font-weight:bold;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    cursor:pointer;
}

.search-toggle-btn:active{
    transform:scale(.98);
}

.search-toggle-icon{
    margin-right:7px;
    font-size:16px;
}

.search-toggle-arrow{
    margin-left:auto;
    color:#aaa;
    font-size:12px;
    transition:transform .2s ease;
}

.search-toggle-btn[aria-expanded="true"] .search-toggle-arrow{
    transform:rotate(180deg);
}


/*==========================
    検索エリア
==========================*/

.search-area-wrapper{
    width:100%;
    padding:10px 15px 0;
}

.search-area{
    display:none;
    width:100%;
    max-width:400px;
    margin:8px auto 0;
    padding:15px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.search-area.is-open{
    display:block;
}

.search-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.search-form input{
    width:100%;
    height:42px;
    padding:0 12px;
    box-sizing:border-box;
    border:1px solid #ddd;
    border-radius:9px;
    background:#fff;
    color:#333;
    outline:none;
}

.search-form input:focus{
    border-color:#ff8fb1;
}

.search-bottom{
    display:flex;
    gap:10px;
}

.search-bottom select{
    flex:1;
    height:42px;
    padding:0 12px;
    box-sizing:border-box;
    border:1px solid #ddd;
    border-radius:9px;
    background:#fff;
    color:#333;
    outline:none;
}

.search-bottom select:focus{
    border-color:#ff8fb1;
}

.search-bottom button{
    width:90px;
    height:42px;
    padding:0;
    border:0;
    border-radius:9px;
    background:#ff8fb1;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    cursor:pointer;
}

.search-bottom button:active{
    transform:scale(.98);
}


/*==========================
    カード共通
==========================*/

.card{
    display:block;
    width:100%;
    margin:0;
    padding:18px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 3px 8px rgba(0,0,0,.12);
}


/*==========================
    共通メッセージ
==========================*/

.empty-message{
    margin-top:30px;
    color:#777;
    text-align:center;
}

.error-message{
    width:100%;
    max-width:400px;
    margin:0 auto 15px;
    color:#e53935;
    font-weight:bold;
    text-align:center;
}


/*==========================
    通知
==========================*/

.toast{
    position:fixed;
    top:-100px;
    left:50%;
    z-index:9999;
    width:85%;
    max-width:400px;
    padding:15px 20px;
    border-radius:12px;
    background:#ff6b6b;
    color:#fff;
    text-align:center;
    font-size:14px;
    transform:translateX(-50%);
    transition:.4s;
}

.toast.show{
    top:20px;
}


/*==========================
    非表示
==========================*/

.hidden{
    display:none!important;
}


/*==========================
    メインレイアウト
==========================*/

.main-layout{
    width:100%;
    flex:1 1 0;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
}


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

@media(min-width:601px){

    .main-layout{
        padding-left:220px;
        transition:padding-left .25s ease;
    }

    .main-layout.side-nav-collapsed{
        padding-left:70px;
    }

    .container{
        max-width:900px;
    }

    .back-button{
        width:100%;
        max-width:1100px;
        margin:0;
        padding:0 30px;
        align-self:flex-start;
    }

    .search-toggle-btn{
        width:100%;
        max-width:none;
        margin-left:0;
        margin-right:0;
    }

    .search-area-wrapper{
        width:100%;
        max-width:1100px;
        margin:0;
        padding:15px 30px 0;
        box-sizing:border-box;
        align-self:flex-start;
    }

    .search-area{
        width:100%;
        max-width:none;
        margin:10px 0 0;
    }

    .card{
        padding:20px;
    }
}


/*==========================
    スマートフォン
==========================*/

@media(max-width:767px){

    html{
        height:100dvh;
    }

    body{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        width:100%;
        height:100dvh;
    }

    .background{
        height:100%;
    }

    .page-scroll{
        flex:1 1 0;
        height:auto;
    }

    .container{
        max-width:430px;
    }

    .search-area-wrapper{
        width:100%;
        padding:10px 12px 0;
    }

}