@import url('common.css');

/* body */
body {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic,"游ゴシック", "Yu Gothic", "Helvetica Neue", "Arial", "Meiryo", sans-serif;
}

/* Buttons */
.btn{
    display: block;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    transition: opacity 0.3s;
}
.btn:hover{
    opacity: 0.8;
}
.btn-normal{
    padding: 1rem 12px;
    border-radius: 4px;
    border: none;
    background-color: var(--col-green);
    font-size: var(--font-size-pc-lg);
    color: var(--col-white);
}
.btn-normal-outline{
    padding: 1rem 12px;
    border-radius: 4px;
    border: 2px solid var(--col-green);
    background-color: var(--col-white);
    font-size: var(--font-size-pc-lg);
    color: var(--col-green);
    transition:  color 0.2s ease-out, background-color 0.2s ease-out;
    
}
.btn-normal-outline:hover{
    background-color: var(--col-green);
    color: var(--col-white);
    border-color: var(--col-white);
}
.btn-normal-outline:disabled{
    background-color: var(--col-gray);
    border-color: var(--col-dark-gray);
    color: var(--col-dark-gray);
    cursor: default;
}
.btn-large-outline{
    padding: 0;
    margin: 1.5rem 0;
    border: 2px solid var(--col-green);
    border-radius: 6rem;
    background-color: var(--col-white);
    font-size: var(--font-size-pc-lg);
    color: var(--col-green);
    line-height: 6rem;
    text-decoration: none;
    transition:  color 0.2s ease-out, background-color 0.2s ease-out;
}
.btn-large-outline:hover{
    background-color: var(--col-green);
    color: var(--col-white);
    border-color: var(--col-white);
}
@media screen and (max-width: 767px) {
    .btn-normal{
        padding: 3.6vw 12px;
        border-radius: 4px;
        border: none;
        background-color: var(--col-green);
        font-size: var(--font-size-lg);
        color: var(--col-white);
    }
    .btn-normal-outline{
        padding: 3.6vw 12px;
        border-radius: 4px;
        border: 2px solid var(--col-green);
        background-color: var(--col-white);
        font-size: var(--font-size-lg);
        color: var(--col-green);
    }
    .btn-normal-outline:disabled{
        background-color: var(--col-gray);
        border-color: var(--col-dark-gray);
        color: var(--col-dark-gray);
        cursor: default;
    }
    .btn-large-outline{
        padding: 0;
        margin: 3vw 0;
        border-radius: 8vw;
        background-color: var(--col-white);
        font-size: var(--font-size-lg);
        line-height: 12vw;
    }
}
/* Pagenation and Buttons */
.pagenation_wrap{
    display: flex;
    flex-direction: row;
    margin: 1rem 0;
}
.pagenate_btn{
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--col-green);
    background-color:var(--col-white);
    font-size: var(--font-size-pc-md);
    color: var(--col-green);
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    line-height: 2rem;
    margin-left: 0.75rem;
    cursor: pointer;
    transition: color 0.2s ease-out, background-color 0.2s ease-out;
}
.pagenate_btn:hover{
    background-color:var(--col-green);
    color: var(--col-white);
}
.pagenation_wrap > .pagenate_btn:first-child{
    margin-left: 0;
}
.pagenate_btn.current{
    cursor: default;
    background-color: var(--col-green);
    color: var(--col-white);
}
.pagenate_btn.disabled{
    cursor: default;
    border-color: var(--col-dark-gray);
    color: var(--col-dark-gray);
}
.pagenate_btn.previous{
    background-image: url('../img/left_arrow.svg');
    background-size: 1.0rem;
    background-position: center center;
    background-repeat: no-repeat;
}
.pagenate_btn.previous:hover{
    background-image: url('../img/left_arrow_white.svg');
}
.pagenate_btn.previous.disabled{
    background-image: url('../img/left_arrow_gray.svg');
}
.pagenate_btn.next{
    background-image: url('../img/right_arrow.svg');
    background-size: 1.0rem;
    background-position: center center;
    background-repeat: no-repeat;
}
.pagenate_btn.next:hover{
    background-image: url('../img/right_arrow_white.svg');
}
.pagenate_btn.next.disabled{
    background-image: url('../img/right_arrow_gray.svg');
}
@media screen and (max-width: 767px) {
    .pagenation_wrap{
        margin: 5vw 0;
    }
    .pagenate_btn{
        width: 8vw;
        height: 8vw;
        font-size: var(--font-size-xl);
        line-height: 8.5vw;
        margin-left: 2vw;
    }
    .pagenate_btn.previous{
        background-size: 3vw;
    }
    .pagenate_btn.next{
        background-size: 3vw;
    }
}

/* Header */
header {
    position: relative;
    height: var(--header-height-pc);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
    background-color: var(--col-white);
    z-index: 100;
}
header > div{
    width: 100%;
    max-width: var(--min-width);
    height: var(--header-height-pc);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 5vw;
}
.header_img_wrap{
    height: 7vh;
}
.header_img_wrap span{
    display: block;
    margin-top: 0.25rem;
    font-size: 0.625rem;
    line-height: 0.75rem;
    letter-spacing: -1px;
}
header img{
    height: 5vh;
    margin-top: 0.25vh;
}
.btn_menu{
    height: 40px;
    padding: 0 48px;
    font-size: var(--font-size-pc-xs);
    border-radius: 40px;
    letter-spacing: 2px;
    line-height: 40px;
}
@media screen and (max-width: 767px) {
    header {
        position: sticky;
        top: 0;
        height: var(--header-height);
    }
    header > div{
        height: var(--header-height);
    }
    .header_img_wrap{
        height: 7vh;
    }
    header img{
        height: 5vh;
        margin-top: 0.125vh;
    }
    .btn_menu{
        height: 4vh;
        padding: 0 6vw;
        font-size: var(--font-size-xs);
        border-radius: 6vw;
        letter-spacing: 2px;
        line-height: 4vh;
    }
}

/* modal common */
.modal-back{
    max-width: 640px;
    position: fixed;
    left: calc((100% - 640px) / 2);
    top: 5vh;
    width: 90vw;
    max-height: 90vh;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
}
.modal-close{
    display: flex;
    justify-content: center;
    margin: 48px 0;
    cursor: pointer;
}
.modal-close img{
    width: 64px;
    height: 64px;
}
p.modal-title{
    text-align: center;
    font-size: var(--font-size-pc-xl);
    font-weight: lighter;
    letter-spacing: 1vw;
    margin: 2rem 0;
}
.modal-back .hr{
    margin: 2rem 1rem;
}
@media screen and (max-width: 767px) {
        .modal-back{
            left: 5vw;
        }
        .modal-close{
            margin: 8vw 0;
        }
        .modal-close img{
            width: 8vw;
            height: 8vw;
        }
        p.modal-title{
            font-size: var(--font-size-xl);
            margin: 3vw 0;
        }
        .modal-back .hr{
            margin: 6vw 4vw;
        }
}

/* Menu */
#menu{
    display: none;
    background-color: rgba(255,255,255,0.8);
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
}
#menu.show{
    display: block;
}
#menu ul{
    margin: 0;
    padding: 0 4vw;
}
#menu ul li{
    height: 4rem;
    margin: 2rem 0;
    font-size: var(--font-size-pc-xxl);
    line-height: 4rem;
    letter-spacing: 4px;
}
#menu ul a{
    text-decoration: none;
}
#menu ul a:first-child li{
    margin-top: 0;
}
#menu ul a:last-child li{
    margin-top: 4rem;
}
@media screen and (max-width: 767px) {
    #menu{
        display: none;
        background-color: rgba(255,255,255,0.8);
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 10000;
    }
    #menu.show{
        display: block;
    }
    #menu ul{
        margin: 0;
        padding: 0 4vw;
    }
    #menu ul li{
        height: 10vw;
        margin: 4vw 0;
        font-size: var(--font-size-xxl);
        line-height: 10vw;
        letter-spacing: 4px;
    }
    #menu ul a:last-child li{
        margin-top: 12vw;
    }
}
/* Main */
#main{
    width: 100%;
    overflow: hidden;
}
#main .main_content{
    min-height: calc(100vh - var(--footer-height-pc) - var(--header-height-pc) - 4rem);
    padding-bottom: 2vw;
}
.content-title{
    margin: 0;
    padding: 2.5rem 0 0 0;
    line-height: 1.6;
    letter-spacing: 4px;
    text-align: center;
    font-size: var(--font-size-pc-xl);
    font-weight: lighter;
}
.content-subtitle{
    margin: 0.5rem 0;
    letter-spacing: 2px;
    text-align: center;
    font-size: var(--font-size-pc-sm);
}
.section-title{
    margin: 0;
    padding: 1rem 5vw;
    background-color: var(--col-green);
    color: var(--col-white);
    font-weight: lighter;
    font-size: var(--font-size-pc-lg);
    letter-spacing: 4px;
}
.section-title .title-wrap{
    max-width: var(--min-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.title-wrap p{
    margin: 0;
}
@media screen and (max-width: 767px) {
    #main .main_content{
        min-height: calc(100vh - var(--footer-height) - var(--header-height) - 6vw);
    }
    .content-title{
        padding: 7vw 0 0 0;
        font-size: var(--font-size-xl);
    }
    .content-subtitle{
        margin: 1vw 0;
        font-size: var(--font-size-sm);
    }
    .section-title{
        margin: 0;
        padding: 3.8vw 5vw;
        background-color: var(--col-green);
        color: var(--col-white);
        font-weight: lighter;
        font-size: var(--font-size-lg);
        letter-spacing: 4px;
    }
}
/* footer */
footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: var(--footer-height-pc);
    padding: 2rem 0;
    background-color: var(--col-footer);
    font-size: var(--font-size-pc-xxs);
    color: black;
}
footer > div{
    width: 100%;
    max-width: var(--min-width);
    display: flex;
    justify-content: space-between;
    margin: 0 1.5rem;
}
footer div:last-child{
    justify-content: center;
    margin: 1.5rem 0;
}
footer p{
    margin: 1.5rem 0;
}
footer a{
    color: black;
    text-decoration: none;
    margin: 0 1.5rem;
}
footer a:visited{
    color: black;
}
footer dl{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0 0 0.5rem 0;
}
footer dt{
    font-weight: bold;
}
footer dd{
    margin: 0;
}
footer dd a{
    text-decoration: underline;
    margin: 0;
}
@media screen and (max-width: 767px) {
    footer{
        height: var(--footer-height);
        padding: 3vw 0;
        font-size: var(--font-size-xxs);
    }
    footer > div{
        width: 90vw;
    }
    footer > div:last-child{
        margin: 2vw 0;
    }
    footer p{
        margin: 1.5vw 0;
    }
    footer a{
        margin: 0 2vw;
    }
}

/* フリーワード検索 */
.free_word_form_wrap{
    max-width: var(--min-width);
    width: 100%;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.free_word_form_group{
    width: 100%;
    display: flex;
    gap: 1rem;
}
.free_word_form_group input{
    height: 1rem;
    padding: 2rem;
    border: none;
    outline-color: black;
    background-color: var(--col-white);
    border-radius: 4px;
    font-size: var(--font-size-pc-lg);
    letter-spacing: 2px;
    outline-offset: 0;
    width: 60%;
}
.form_messages{
    margin: 0.5rem 0 0 0;
}
.form_messages span{
    display: block;
    font-size: var(--font-size-pc-xxs);
    color:#666
}
.free_word_form_group input::placeholder{
    color: #ccc;
}
.free_word_form_group .btn{
    width: 30%;
    padding: 1rem 3rem;
}
#error_search_words{
    display: none;
    color: var(--col-red);
}
#error_search_words.show{
    display: block;
}
@media screen and (max-width: 767px) {
    .free_word_form_wrap{
        margin: 3vw auto;
    }
    .free_word_form_group{
        width: 90vw;
        margin: 0 5vw;
        gap: 2.8vw;
    }
    .free_word_form_group input{
        height: 6vw;
        padding: 4vw;
        font-size: var(--font-size-lg);
    }
    .form_messages{
        margin: 1vw 0 0 0;
    }
    .form_messages span{
        font-size: var(--font-size-xxs);;
        margin: 1vw 5vw;
    }
    .free_word_form_group input::placeholder{
        color: #ccc;
    }
    .free_word_form_group .btn{
        padding: 3.6vw 6vw;
    }
}

/* 地域･都道府県選択ボタン */
.provance_btn_wrap{
    display: none;
}
.provance_btn_wrap.show{
    display: block;
}
.provance_btn_wrap_col{
    width: 100%;
    max-width: var(--min-width);
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: 1rem;
}
.provance_btn_wrap_col .btn{
    width: 48%;
    font-size: var(--font-size-pc-xl);
    letter-spacing: 4px;
}
.provance_btn_wrap_col:first-child{ margin-top: 2rem;}
.provance_btn_wrap_col:last-child{ margin-bottom: 2rem;}
#btn_area_back{
    display: none;
    height: 2.5rem;
    font-size: var(--font-size-pc-xs);
    line-height: 2.5rem;
    border-radius: 5rem;
}
#btn_area_back.show{
    display: block;
}
@media screen and (max-width: 767px) {
    .provance_btn_wrap_col{
        width: inherit;
        margin-top: 3vw;
        padding: 0 5vw;
    }
    .provance_btn_wrap_col .btn{
        font-size: var(--font-size-xl);
    }
    .provance_btn_wrap_col:first-child{ margin-top: 5vw;}
    .provance_btn_wrap_col:last-child{ margin-bottom: 5vw;}
    #btn_area_back{
        height: 5vw;
        padding: 0 5vw;
        font-size: var(--font-size-xs);
        line-height: 5vw;
        border-radius: 5vw;
    }
    
}

/* 検索条件を追加する */
.refine_search_btn{
    margin: 3rem 0;
    position: relative;
    letter-spacing: 3px;
    background-image: url('../img/down_arrow.svg');
    background-size: 2rem;
    background-position: center right 3rem;
    background-repeat: no-repeat;
}
.refine_search_btn:hover{
    background-image: url('../img/down_arrow_white.svg');
}

/* 検索条件を追加するモーダル */
#modal_search{
    display: none;
    background-color: rgba(255,255,255,0.8);
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 11000;
}
#modal_search.show{
    display: block;
}
#input_layout_type{
    position: relative;
    border: 1px solid var(--col-dark-gray);
    width: 80vw;
    height: 12vw;
    padding: 2vw 5vw;
    margin: 0 5vw;
    color: black;
    font-size: var(--font-size-xl);
    appearance: none;
    background-image: url('/assets/img/icon-arrow-select.svg');
    background-repeat: no-repeat;
    background-size: 5vw;
    background-position: calc(100% - 5vw) center;
}
@media screen and (max-width: 767px) {
    .refine_search_btn{
        margin: 5vw 0;
        height: 16vw;
        line-height: 16vw;
        font-size: var(--font-size-xl);
        background-size: 4vw;
        background-position: center right 6vw;
     }

    /* 検索条件を追加するモーダル */
    #modal_search{
        display: none;
        background-color: rgba(255,255,255,0.8);
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 11000;
    }
    #modal_search.show{
        display: block;
    }
    #input_layout_type{
        position: relative;
        border: 1px solid var(--col-dark-gray);
        width: 80vw;
        height: 12vw;
        padding: 2vw 5vw;
        margin: 0 5vw;
        color: black;
        font-size: var(--font-size-xl);
        appearance: none;
        background-image: url('/assets/img/icon-arrow-select.svg');
        background-repeat: no-repeat;
        background-size: 5vw;
        background-position: calc(100% - 5vw) center;
    }
}
/* 検索条件を追加するモーダル内、市区町村 */
.city_wrap{
    margin: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.city_wrap > div{
    display: inline-block;
    padding: 0 0.5rem;
    margin: 1.5rem 0.5rem;
    vertical-align: middle;
}
.city_wrap label, .city_wrap input{
    cursor: pointer;
}
.city_wrap input::before{
    content: "";
    display: inline-block;
    width: var(--font-size-pc-xs);
    height: var(--font-size-pc-xs);
    background-image: url('/assets/img/icon-check-off.svg');
    background-size: var(--font-size-pc-xs)  var(--font-size-pc-xs);
    vertical-align: middle; 
    margin-top: calc(-0.5 * var(--font-size-pc-xs));
}
.city_wrap input:checked:before{
    background-image: url('/assets/img/icon-check-on.svg');
}
.city_wrap input::before img{
    width: 100%;
    height: 100%;
}
.city_wrap input[type="checkbox"]{
    appearance: none;
    margin: 0;
    padding: 0;
}
.city_wrap label{
    letter-spacing: 2px;
    font-size: var(--font-size-pc-xs);
}
.city_wrap button{
    width: 100%;
    border-radius: 8vw;
    font-size: var(--font-size-pc-xl);
    font-weight: lighter;
    letter-spacing: 2px;
    margin-top: 3rem;
}
@media screen and (max-width: 767px) {
    .city_wrap{
        margin: 5vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .city_wrap > div{
        display: inline-block;
        padding: 0 2vw;
        margin: 3vw 1vw;
        vertical-align: middle;
    }
    .city_wrap input::before{
        content: "";
        display: inline-block;
        width: 5vw;
        height: 5vw;
        background-image: url('/assets/img/icon-check-off.svg');
        background-size: 5vw 5vw;
        vertical-align: middle; 
        margin-top: -1vw;
    }
    .city_wrap input:checked:before{
        background-image: url('/assets/img/icon-check-on.svg');
    }
    .city_wrap input::before img{
        width: 100%;
        height: 100%;
    }
    .city_wrap input[type="checkbox"]{
        appearance: none;
        margin: 0;
        padding: 0;
    }
    .city_wrap label{
        letter-spacing: 2px;
        font-size: var(--font-size-sm);
    }
    .city_wrap button{
        width: 100%;
        border-radius: 8vw;
        font-size: var(--font-size-xl);
        font-weight: lighter;
        letter-spacing: 2px;
        margin-top: 6vw;
    }
}
/* 新着情報 */
#news_list{margin: 2rem 0;}
#news_list .hr{margin: 1rem auto;}
.news_wrap{
    width: 100%;
    max-width: var(--min-width);
    margin: 0 auto;
}
.news_header{
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 0.75rem 0;
}
.news_header p {
    margin: 0 0 0 2rem;
    font-weight: bold;
    font-size: var(--font-size-pc-sm);
}
.news_badge{
    background-color: var(--col-pink);
    color: var(--col-white);
    font-size: var(--font-size-pc-xs);
    font-weight: bold;
    line-height: 2rem;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 2rem;
    padding: 0.25rem 2rem;
}
.news_wrap a{
    display: inline-block;
    width: calc(100% - 2vw);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    text-align: left;
    color: black;
    font-weight: bold;
    font-size: var(--font-size-pc-xs);
    line-height: calc(2 * var(--font-size-pc-xs));
    text-decoration: none;
}
.news_wrap a:visited{color: #666;}
.news_title{
    letter-spacing: 1px;
    font-size: var(--font-size-pc-xs);
    font-weight: bold;
    text-align: left;
}
.news_content_wrap{
    padding-top: 2rem;
    font-size: var(--font-size-pc-xs);
}
.news_content_wrap .btn{
    margin-top: 10vw;
}
@media screen and (max-width: 767px) {
    #news_list{margin: 4vw 0;}
    #news_list .hr{
        margin: 3vw 0;
    }
    .news_wrap{
        margin: 0 5vw;
    }
    .news_header{
        margin: 1vw 0;
    }
    .news_header p {
        margin: 0 0 0 2vw;
        font-size: var(--font-size-sm);
    }
    .news_badge{
        font-size: var(--font-size-xs);
        line-height: 3vw;
        border-radius: 3vw;
        padding: 1vw 5vw;
    }
    .news_wrap a{
        width: calc(100% - 2vw);
        padding: 1vw 1vw 1vw 2vw;
        font-size: var(--font-size-xs);
        line-height: 4vw;
    }
    .news_wrap a:visited{color: #666;}
    .news_title{
        font-size: var(--font-size-xs);
    }
    .news_content_wrap{
        padding-top: 10vw;
        font-size: var(--font-size-sm);
    }
    .news_content_wrap .btn{
        margin-top: 10vw;
    }
}
/* 新着情報、FAQ共通 */
.text_link{
    text-decoration: underline;
    color: var(--col-green);
    line-height: 8vw;
}

/* ニコニコ収納庫の特徴 */
.feature_wrap{
    width: 100%;
    max-width: var(--min-width);
    margin: 2rem auto;
    background-color: var(--col-white);
}
.feature_wrap img{
    width: 100%;
}
.feature_wrap p{
    font-size: var(--font-size-pc-md);
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 2.5rem;
    margin: 1rem 2rem;
}
.feature_wrap div{
    padding: 0 2rem 2rem 2rem;
    font-size: var(--font-size-pc-xs);
    line-height: 2rem;
}
.feature_wrap .text_emphasize{
    color: var(--col-red);
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    .feature_wrap{
        width: 90vw;
        margin: 4vw auto;
    }
    .feature_wrap p{
        font-size: var(--font-size-lg);
        line-height: 5vw;
        margin: 3vw 5vw;
    }
    .feature_wrap div{
        padding: 0 5vw 1vw 5vw;
        font-size: var(--font-size-xs);
        line-height: 4vw;
    }
    .feature_wrap div:last-child{
        padding: 0 5vw 5vw 5vw;
    }
}

/* 利用者の声 */
.voice_wrap{
    padding: 1rem 0;
}
.voice_wrap_all > div:first-child{
    padding-top: 2rem;
}
.voice_wrap_all > div:last-child{
    padding-bottom: 2rem;
}
.voice_wrap .voice_title{
    font-size: var(--font-size-pc-md);
    font-weight: bold;
    margin: 0;
}
.voice_wrap .voice_name{
    font-size: var(--font-size-pc-xs);
    font-weight: bold;
    margin: 0 0 2rem 0;
}
.voice_wrap .voice_baloon{
    position: relative;
    background-color: var(--col-white);
    border-radius: 2rem;
}
.voice_baloon img{
    position: absolute;
    width: 60px;
    height: 60px;
    top: -60px;
    right: 60px;
}
.voice_wrap .voice_content{
    display: none;
    padding: 2.5rem;
    font-size: var(--font-size-pc-xs);
    line-height: 3rem;
}
.voice_wrap .voice_content.show{
    display: block;
}
.voice_wrap .voice_buttons{
    display: flex;
    justify-content: center;
}
.btn.btn_voice{
    display: none;
    border: none;
    width: 100%;
    background-color: var(--col-white);
    color: var(--col-green);
    font-size: var(--font-size-pc-md);
    line-height: 2.5rem;
    margin: 2rem 0;
}
.btn.btn_voice.show{
    display: block;
}
@media screen and (max-width: 767px) {
    .voice_wrap{
        padding: 3vw 0;
    }
    .voice_wrap_all > div:first-child{
        padding-top: 4vw;
    }
    .voice_wrap_all > div:last-child{
        padding-bottom: 4vw;
    }
    .voice_wrap .voice_title{
        font-size: var(--font-size-lg);
    }
    .voice_wrap .voice_name{
        font-size: var(--font-size-sm);
        margin: 0 0 3vw 0;
    }
    .voice_wrap .voice_baloon{
        border-radius: 2vw;
    }
    .voice_baloon img{
        width: 8vw;
        height: 8vw;
        top: -8vw;
        right: 8vw;
    }
    .voice_wrap .voice_content{
        padding: 4vw;
        font-size: var(--font-size-xs);
        line-height: 5vw;
    }
    .btn.btn_voice{
        font-size: var(--font-size-lg);
        line-height: 4vw;
        margin: 3vw 0;
    }
}

/* 物件一覧 */
.main_content .shop_wrap{
    display: block;
    background-color: var(--col-white);
    text-decoration: none;
    color: black;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 8px;
    margin: 2rem auto;
}
.shop_content{
    width: 100%;
    display: flex;
    min-height: 160px;
}
.shop_img_wrap{
    width: 50%;
}
.shop_img_wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop_description{
    width: 50%;
    margin: 2rem;
}
.shop_type{
    width: 12rem;
    margin: 0 0 1rem 0;
    background-color: var(--col-green);
    font-size: var(--font-size-pc-xs);
    text-align: center;
    letter-spacing: 2px;
    color: var(--col-white);
}
.shop_type.from_today{
    background-color: var(--col-pink);
}
.shop_description > div{
    height: 50%;
    margin: 0;
}
.shop_description_badges p:last-child{
    margin-bottom: 1rem;
}
.shop_description_text{
    display: flex;
    flex-flow: column;
    justify-content: end;
}
.shop_description_text p{
    margin: 1rem 0;
    font-size: var(--font-size-pc-xs);
}
.shop_description .shop_name{
    margin: 0 0 0.5rem 0;
    font-size: var(--font-size-pc-md);
    font-weight: bold;
    word-break: auto-phrase;
}
.shop_wrap:hover .shop_name{
    text-decoration: underline;
}
.shop_facilities{
    display: flex;
    flex-direction: column;
    margin: 0.5rem 0.5rem 0 0.5rem;
    padding-bottom: 0.5rem;
}
.shop_facilities ul{
    display: inline-flex;
    list-style: none;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}
.shop_facilities ul:first-child{
    margin-bottom: 0.25rem;
}
.shop_facilities li{
    margin: 0.125rem 0.25rem;
    background-color: var(--col-dark-gray);
    padding: 0.5rem 0;
    width: 25%;
    font-size: var(--font-size-pc-xs);
    text-align: center;
    line-height: 2rem;
    letter-spacing: 2px;
    color: var(--col-white);
    border-radius: 2px;
}
.shop_facilities li.show{
    background-color: var(--col-green);
}
@media screen and (max-width: 767px) {
    .main_content .shop_wrap{
        margin: 4vw 5vw;
    }
    .shop_img_wrap{
        width: 37vw;
        min-width: 37vw;
    }
    .shop_img_wrap img{
        max-height: 50vw;
    }
    .shop_description{
        margin: 3vw;
    }
    .shop_type{
        width: 32vw;
        margin: 0 0 1vw 0;
        font-size: var(--font-size-xs);
    }
    .shop_description_badges p:last-child{
        margin-bottom: 2vw;
    }
    .shop_description_text p{
        margin: 2vw 0 0 0;
        font-size: var(--font-size-xxs);
    }
    .shop_description .shop_name{
        margin: 0 0 2vw 0;
        font-size: var(--font-size-md);
    }
    .shop_facilities{
        margin: 2vw 2vw 0 2vw;
        padding-bottom: 2vw;
    }
    .shop_facilities ul:first-child{
        margin-bottom: 1vw;
    }
    .shop_facilities li{
        margin: 0.5vw 0.5vw;
        padding: 0.75vw 0;
        font-size: var(--font-size-xs);
        line-height: 4vw;
    }
}

/* 店舗詳細 */
.shop_detail_wrap{
    display: block;
    background-color: var(--col-white);
    text-decoration: none;
    color: black;
}
.shop_detail_img_wrap img{
    width: 100%;
}
.shop_description_detail{
    margin: 0 1rem;
    padding-bottom: 1rem;
}
.shop_description_detail .shop_description_badges{
    width: 100%;
}
.shop_description_badges ul{
    padding: 0;
    width: 100%;
}
.shop_description_badges ul li{
    width: 25%;
    margin-right: 0.25rem;
}
.shop_description_detail .shop_type{
    display: inline-block;
    padding: 0.75rem 0;
}
.shop_description_detail_text{
    font-size: var(--font-size-pc-sm);
}
.shop_description_detail_text dl{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0 0 1rem 0;
}
.shop_description_detail_text dt{
    min-width: 6rem;
    padding: 1rem 1rem;
    border-radius: 4px;
    background: var(--col-gray);
    text-align: center;
}
.shop_description_detail_text dd{
    margin: 0;
}
.shop_description_detail .shop_facilities{
    margin: 0;
}
@media screen and (max-width: 767px) {
    .shop_description_detail{
        padding-bottom: 2vw;
        margin: 0 3vw 3vw 3vw;
    }
    .shop_description_badges ul{
        padding: 0;
        margin: 0 0 3vw 0;
    }
    .shop_description_badges ul li{
        width: 27vw;
    }
    .shop_description_detail .shop_type{
        padding: 1vw 0;
    }
    .shop_description_detail_text{
        font-size: var(--font-size-sm);
    }
    .shop_description_detail_text dl{
        margin: 0 0 3vw 0;
    }
    .shop_description_detail_text dt{
        min-width: 18vw;
        padding: 1.8vw 1.8vw;
    }
}

/* FAQ */
.faq_wrap{
    margin: 1.5rem 0;
}
.main_content .faq_wrap:first-child{
    margin-top: 3rem;
}
.main_content .faq_wrap:last-child{
    margin-bottom: 3rem;
}
.faq_btn{
    margin: 1rem 0;
    font-size: var(--font-size-pc-sm);
    text-align: left;
    line-height: 4rem;
    background-image: url('../img/icon_question.svg');
    background-repeat: no-repeat;
    background-size: 4rem;
    background-position: 1rem center;
}
.faq_btn:hover{
    background-image: url('../img/icon_question_inv.svg');
}
.faq_btn span{
    display: block;
    padding-left: 6rem;
}
.faq_title{
    background-image: url('../img/icon_question_inv.svg');
    background-size: 8vw;
    background-position: 4vw center;
    background-repeat: no-repeat;
}
.faq_title span{
    padding-left: 10vw;
    letter-spacing: 2px;
}
.faq_wrap .faq_baloon{
    position: relative;
    background-color: var(--col-white);
    border-radius: 2rem;
    padding: 1.5rem;
    margin: 3.5rem 0 0 0 ;
    font-size: var(--font-size-pc-xs);
    word-wrap: break-word;
}
.faq_content{
    line-height: 2;
}
.faq_baloon img{
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -3rem;
    left: calc(50% - 1.5rem);
}
@media screen and (max-width: 767px) {
    .faq_wrap{
        margin: 4vw 0;
    }
    .main_content .faq_wrap:first-child{
        margin-top: 6vw;
    }
    .main_content .faq_wrap:last-child{
        margin-bottom: 6vw;
    }
    .faq_btn{
        margin: 3vw 0;
        text-align: left;
        line-height: 8vw;
        background-image: url('../img/icon_question.svg');
        background-repeat: no-repeat;
        background-size: 8vw;
        background-position: 2vw center;
        font-size: var(--font-size-lg);
    }
    .faq_btn span{
        display: block;
        padding-left: 10vw;
    
    }
    .faq_title{
        background-image: url('../img/icon_question_inv.svg');
        background-size: 8vw;
        background-position: 4vw center;
        background-repeat: no-repeat;
    }
    .faq_title span{
        padding-left: 10vw;
        letter-spacing: 2px;
    }
    .faq_wrap .faq_baloon{
        position: relative;
        background-color: var(--col-white);
        border-radius: 2vw;
        padding: 4vw;
        margin: 10vw 0 0 0 ;
        font-size: var(--font-size-xxs);
        word-wrap: break-word;
    }
    .faq_content{
        line-height: 2;
    }
    .faq_baloon img{
        position: absolute;
        width: 6vw;
        height: 6vw;
        top: -6vw;
        left: calc((90vw - 6vw) / 2);
    }
}

/* お問合せ */
.contact_wrap{
    color: #333;
}
.contact_wrap label{
    display: inline-block;
    font-size: var(--font-size-pc-sm);
    letter-spacing: 2px;
}
.contact_wrap label::after{
    content: "\A";
}
.contact_wrap input{
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 1rem 0.5rem;
    border: 2px solid var(--col-very-dark-gray);
    outline-color: black;
    background-color: var(--col-white);
    border-radius: 4px;
    font-size: var(--font-size-pc-sm);
    letter-spacing: 2px;
    outline-offset: 0;
    color: #333;
}
.contact_wrap input::placeholder{
    color: #bbb;
}
.contact_wrap textarea::placeholder{
    color: #bbb;
}
.contact_wrap select{
    display: block;
    width: 100%;
    padding: 1rem;
    appearance: none;
    border: 2px solid var(--col-very-dark-gray);
    border-radius: 4px;
    font-size: var(--font-size-pc-sm);
    letter-spacing: 2px;
    background-image: url('../img/down_arrow_gray.svg');
    background-repeat: no-repeat;
    background-size: 2rem;
    background-position: center right 1rem;
    color: #666;
}
.contact_wrap textarea{
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--col-very-dark-gray);
    border-radius: 4px;
    font-size: var(--font-size-pc-md);
    resize: vertical;
}
.contact_wrap input:disabled{
    color: #333;
    border-color: var(--col-dark-gray);
    opacity: 1;
    margin-bottom: 4vw;
}
.contact_wrap select:disabled{
    color: #333;
    border-color: var(--col-dark-gray);
    opacity: 1;
    margin-bottom: 4vw;
}
.contact_wrap textarea:disabled{
    color: #333;
    border-color: var(--col-dark-gray);
    opacity: 1;
    background-color: var(--col-white);
    margin-bottom: 4vw;
}
.contact_explanation{
    display: inline-block;
    font-size: var(--font-size-pc-xxs);
    color: #666;
    margin-bottom: 4vw;
}
#company_inputs, #individual_inputs{
    display: none;
    transition: all 0.3s ease;
    opacity: 0;
}
#company_inputs.show, #individual_inputs.show{
    display: block;
    animation-name: fadeIn;
    animation-fill-mode:forwards;
    animation-duration:0.4s;
}
#company_inputs.init, #individual_inputs.init{
    display: block;
    opacity: 1;
}
@keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.privacy_btn{
    cursor: pointer;
    background-color: var(--col-white);
    background-image: url('../img/check-off.svg');
    background-repeat: no-repeat;
    background-size: 3rem;
    background-position: center left 2rem;
    width: 100%;
    height: 6rem;
    margin: 1.5rem 0;
    border: 2px solid var(--col-green);
    border-radius: 4px;
    color: var(--col-green);
    text-align: center;
    font-size: var(--font-size-pc-xl);
    font-weight: bold;
    line-height: 6rem;
    letter-spacing: 2px;
    transition: all 0.2s ease;
}
.privacy_btn.clicked{
    background-color: var(--col-green);
    background-image: url('../img/check-on.svg');
    color: var(--col-white);
}
.send_btn{
    height: 6rem;
    border-color: var(--col-red);
    color: var(--col-red);
    transition: all 0.2s ease-in;
}
.send_btn:hover:enabled{
    background-color: var(--col-red);
    color: var(--col-white);
}
.send_btn:disabled{
    cursor: default;
    background-color: var(--col-white);
    border-color: var(--col-very-dark-gray);
    color: var(--col-very-dark-gray);
}
.send_btn:disabled:hover{
    background-color: var(--col-white);
    border-color: var(--col-very-dark-gray);
    color: var(--col-very-dark-gray);
}
.privacy_link{
    display: block;
    width: 100%;
    margin: 5vw 0;
    color: #333;
    font-size: var(--font-size-pc-lg);
    text-align: center;
    letter-spacing: 4px;
}
@media screen and (max-width: 767px) {
    .contact_wrap label{
        font-size: var(--font-size-sm);
    }
    .contact_wrap input{
        padding: 4vw 2vw;
        font-size: var(--font-size-md);
    }
    .contact_wrap select{
        padding: 4vw;
        font-size: var(--font-size-lg);
        background-size: 4vw;
        background-position: center right 3vw;
    }
    .contact_wrap textarea{
        padding: 3vw;
        font-size: var(--font-size-md);
    }
    .contact_wrap input:disabled{
        margin-bottom: 4vw;
    }
    .contact_wrap select:disabled{
        margin-bottom: 4vw;
    }
    .contact_wrap textarea:disabled{
        margin-bottom: 4vw;
    }
    .contact_explanation{
        font-size: 2.5vw;
        margin-bottom: 4vw;
    }
    .privacy_btn{
        background-size: 6vw;
        background-position: center left 4vw;
        height: 16vw;
        margin: 4vw 0;
        font-size: var(--font-size-xl);
        line-height: 16vw;
    }
    .send_btn{
        height: 16vw;
    }
    .privacy_link{
        margin: 5vw 0;
        font-size: var(--font-size-lg);
    }
}

/* サイトマップ */
.sitemap_wrap{
    padding: 1.5rem 0;
}
.sitemap_wrap > div{
    margin: 0 4vw;
}
.sitemap_wrap .link_lg{
    display: inline-block;
    margin: 1rem 0;
    font-size: var(--font-size-pc-lg);
    font-weight: bold;
    text-decoration: none;
    color: #333;
}
.sitemap_wrap .link_lg span{
    text-decoration: underline;
    text-underline-offset: 0.5rem;
}
.sitemap_wrap .link_prefecture{
    font-size: var(--font-size-pc-sm);
    display: inline-block;
    margin: 0.25rem 0.75rem;
    text-decoration: underline;
    color: #333;
}
.sitemap_wrap .link_md{
    font-size: var(--font-size-pc-sm);
    display: inline-block;
    margin: 0.25rem;
    text-decoration: underline;
    color: #333;
}
.sitemap_wrap a:visited{color: #333;}
.sitemap_wrap p{
    font-size: var(--font-size-pc-lg);
    font-weight: bold;
    color: #333;
    margin: 1rem 0 0 0;
}
.sitemap_wrap .prefecture_wrap{
    margin: 0 0 0 2rem;
}
.sitemap_wrap .hr{
    margin: 0.5rem 0;
    width: inherit;
}

@media screen and (max-width: 767px) {
    .sitemap_wrap{
        padding: 4vw 0;
    }
    .sitemap_wrap > div{
        margin: 0 0 0 6vw;
    }
    .sitemap_wrap .link_lg{
        margin: 2vw 0;
        font-size: var(--font-size-xl);
    }
    .sitemap_wrap .link_lg span{
        text-underline-offset: 1vw;
    }
    .sitemap_wrap .link_prefecture{
        font-size: var(--font-size-md);
        margin: 1vw 2vw;
    }
    .sitemap_wrap .link_md{
        font-size: var(--font-size-md);
        margin: 1vw 2vw;
    }
    .sitemap_wrap a:visited{color: #333;}
    .sitemap_wrap p{
        font-size: var(--font-size-xl);
        margin: 2vw 0 0 0;
    }
    .sitemap_wrap .prefecture_wrap{
        margin: 0 0 0 4vw;
    }
    .sitemap_wrap .hr{
        margin: 3vw 0;
    }
}

/* ご契約の流れ */
.flow_title{
    margin: 0;
    padding: 1rem 5vw;
    background-color: var(--col-green);
    color: var(--col-white);
    font-weight: lighter;
    font-size: var(--font-size-pc-lg);
    letter-spacing: 4px;
    line-height: var(--font-size-pc-lg);
    text-align: center;
}
.flow_content{
    max-width: var(--min-width);
    position: relative;
    padding: 2rem;
    margin: 60px auto 1rem auto;
    background-color: var(--col-white);
    font-size: var(--font-size-pc-xs);
    line-height: 2rem;
}
.flow_content img{
    position: absolute;
    width: 60px;
    height: 60px;
    top: -60px;
    left: calc(50% - 30px);
}
@media screen and (max-width: 767px) {
    .flow_title{
        padding: 3.8vw 5vw;
        font-size: var(--font-size-lg);
        line-height: 5vw;
    }
    .flow_content{
        padding: 4vw;
        margin: 8vw 5vw 4vw 5vw;
        font-size: var(--font-size-sm);
        line-height: 6vw;
    }
    .flow_content img{
        width: 8vw;
        height: 8vw;
        top: -8vw;
        left: calc(50% - 4vw);
    }
}

/* 収納スペースの使い方 */
.howto_wrap{
    max-width: var(--min-width);
    margin: 2rem auto;
    background-color: var(--col-white);
}
.howto_wrap img{
    width: 100%;
}
.howto_content{
    padding: 0 2rem 2rem 2rem;
    font-size: var(--font-size-pc-xs);
    line-height: 2.5rem;
}
.howto_content span{
    display: inline-block;
    margin: 0.25rem 0;
    padding-left: var(--font-size-pc-xs);
    text-indent: calc(-1 * var(--font-size-pc-xs));
}
.howto_content span::before{
    content: "◎";
}
.howto_badge{
    display: inline-block;
    background-color: var(--col-green);
    color: var(--col-white);
    font-size: var(--font-size-pc-xs);
    font-weight: bold;
    line-height: 2rem;
    text-align: center;
    letter-spacing: 2px;
    padding: 0.25rem 2rem;
    margin: 1rem 2rem 0 2rem;
}
@media screen and (max-width: 767px) {
    .howto_wrap{
        width: inherit;
        margin: 5vw;
        background-color: var(--col-white);
    }
    .howto_wrap img{
        width: 100%;
    }
    .howto_content{
        padding: 0 4vw 4vw 4vw;
        font-size: var(--font-size-xs);
        line-height: 6vw;
    }
    .howto_content span{
        display: inline-block;
        margin: 1vw 0;
        padding-left: var(--font-size-xs);
        text-indent: calc(-1 * var(--font-size-xs));
    }
    .howto_badge{
        font-size: var(--font-size-xs);
        line-height: 3vw;
        padding: 1vw 2vw;
        margin: 2vw 5vw 0 5vw;
    }
}

/* 収納スペースのサイズ */
.space_wrap{
    max-width: var(--min-width);
    width: inherit;
    background-color: var(--col-white);
    padding: 2rem;
    margin: 1.5rem auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.space_img_wrap{
    max-width: calc(var(--min-width) / 2);
}
.space_img_wrap img{
    display: block;
    width: 100%;
    margin: 0 auto;
}
.space_content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-image: url('../img/icon-box.svg');
    background-repeat: no-repeat;
    background-size: 8rem;
    background-position: center center;
}
.space_content.inner{
    background-position: center top 5vw;
}
.space_wrap .badge{
    display: inline-block;
    padding: 0 2rem;
    margin: 0 auto;
    background-color: var(--col-pink);
    border-radius: 4rem;
    color: var(--col-white);
    font-size: var(--font-size-pc-sm);
    font-weight: bold;
    line-height: calc(2 * var(--font-size-pc-sm));
    letter-spacing: 2px;
}
.space_detail .large{
    font-size: 6rem;
    font-weight: bold;
    line-height: 4rem;
}
.space_detail.inner .large{
    line-height: 4rem;
}
.space_detail .small{
    font-size: var(--font-size-pc-lg);
    font-weight: bold;
}
.space_detail_text{
    margin: 1vw 0;
    font-size: var(--font-size-pc-xs);
    text-align: center;
    line-height: 1.5rem;
}
.space_item_img_wrap{
    width: 100%;
}
.space_item_img_wrap img{
    width: 100%;
}
@media screen and (max-width: 767px) {
    .space_wrap{
        width: inherit;
        padding: 2vw;
        margin: 4vw 5vw;
    }
    .space_img_wrap{
        width: 50vw;
        height: 40vw;
    }
    .space_content{
        background-size: 15vw;
    }
    .space_content.inner{
        background-position: center top 5vw;
    }
    .space_wrap .badge{
        padding: 0 4vw;
        margin: 0 auto;
        border-radius: 6vw;
        font-size: var(--font-size-sm);
        line-height: calc(2 * var(--font-size-sm));
    }
    .space_detail .large{
        font-size: 10vw;
        line-height: 4vw;
    }
    .space_detail.inner .large{
        line-height: 12vw;
    }
    .space_detail .small{
        font-size: var(--font-size-lg);
    }
    .space_detail_text{
        margin: 1vw 0;
        font-size: 2.5vw;
        line-height: 4vw;
    }
}
/* etc */
.common_wrap{
    max-width: var(--min-width);
    width: 100%;
    margin: 0 auto;
}
.hr {
    max-width: var(--min-width);
    margin: 0 auto;
    border-bottom: 2px solid var(--col-dark-gray);
}
.hr.wm {
    margin: 2rem auto;
}
.hr.dotted {
    border-bottom: 2px dotted var(--col-dark-gray);
}
.text-danger{
    font-size: var(--font-size-pc-xxs);
    color: var(--col-red);
}
.w_100{width: 100%;}
@media screen and (max-width: 767px) {
    .common_wrap{
        width: inherit;
        margin: 0 5vw;
    }
    .hr {
        width: 90vw;
        margin: 0 5vw;
    }
    .hr.wm {
        margin: 4vw auto;
    }
    .text-danger{
        font-size: var(--font-size-xxs);
    }
}