@charset 'UTF-8';
/* CSS Document */

/*-----------------------
       リセット
-----------------------*/
*{ margin:0; padding:0; box-sizing: border-box; }
html{ font-size: 62.5%; }
ul ,li{ list-style-type:none; }
img{ width:100%; }

h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: 600;}


/*-----------------------
       全体共通
-----------------------*/
body{
    font-family: 'Liberation Serif', 'Noto Sans CJK JP','TakaoGothic', 'VL Gothic','Yu Gothic', 'MS Gothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Osaka-Mono', 'Noto Sans JP', Monospace;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
}

img{
    width: 100%;
}

p, li{
    font-feature-settings: "palt";
}

.inr{
    margin: 0 auto;
    padding: 0 20px;
    max-width: 700px;
}

@media ( min-width: 600px ){
    .inr{
        padding-right: 50px;
        padding-left: 50px;
    }
}


/*-----------------------
　 ヘッダー
-----------------------*/
header p{
    padding: 15px 10px 10px;
    text-align: center;
}
header p img{
    max-width: 140px;
}
header h1{
    background-color: #06C755;
    padding: 10px 10px;
    text-align: center;
}
header h1 img{
    max-width: 600px;
}



/*-----------------------
　 メイン
-----------------------*/
main{
    position: relative; 
}
.introduction .inr{
    margin-top: 40px;
    margin-bottom: 40px;
}

@media ( max-width: 599px ){
    .introduction .inr{
        padding-left: 12%;
        padding-right: 12%;
    }
}

.introduction h2{
    color: #06C755;
    font-size: 140%;
    margin-bottom: 20px;
    text-align: center;
}
.introduction h2 span{
    display: inline-block;
}
.introduction p{
    line-height: 1.7;
    text-align: justify;
}
.introduction p .marker{
    background:linear-gradient(transparent 30%, #FFF89A 30%);
    color: #E60021;
    font-size: 120%;
    font-weight: 600;
}
.introduction .caution{
    border-top: 1px dashed #ccc;
    color: #4D4D4D;
    margin-top: 20px;
    padding-top: 20px;
    text-align: justify;
}
.introduction .caution li+li{
    margin-top: 5px;
}


.flow{
    background-color: #E6E6E6;
    padding: 40px 0;
}
.flow h2{
    text-align: center;
}
.flow h2 span{
    background-color: #06A950;
    border-radius: 100px;
    color: #fff;
    display: inline-block;
    font-size: 120%;
    font-weight: 600;
    padding: 6px 30px;
    text-align: center;
}
.flow_list{
    margin-top: 30px;
    position: relative;
}
.flow_list::after{
    content: '';
    background-color: #06A950;
    width: 6px;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.flow_list li{
    background-color: #fff;
    border: 1px solid #06A950;
    border-radius: 10px;
    display: inline-block;
    padding: 12px 30px 12px 55px;
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 1;
}
.flow_list li span{
    display: inline-block;
}
.flow_list li+li{
    margin-top: 20px;
}
.flow_list li::before{
    content: '';
    background-color: #06A950;
    border-radius: 10px 0 10px 0;
    color: #fff;
    font-weight: 600;
    line-height: 1.0;
    padding: 10px 15px;
    text-align: center;
    position: absolute;
    top: -1px;
    left: -1px;
}
.flow_list li:first-child::before{
    content: '1';
}
.flow_list li:nth-child(2)::before{
    content: '2';
}
.flow_list li:nth-child(3){
    border: 1px solid #E60021;
    color: #E60021;
}
.flow_list li:nth-child(3)::before{
    content: '3';
    background-color: #E60021;
}


.map{
    background-color: #EAF4D4;
    padding-bottom: 30px;
}
.menu{
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}
.menu li{
    width: 50%;
    max-width: 300px;
}
.menu li:first-child{
    border-right: 1px solid #E6E6E6;
}

.menu li a{
    color: #06C755;
    display: block;
    font-weight: 600;
    padding: 10px;
    text-align: center;
    text-decoration: none;
}
.menu li a::before{
    content: '';
    width: 32px;
    height: 30px;
    display: block;
    margin: 0 auto 5px;
}
.menu li:first-child a::before{
    background-image: url(../img/ico_btn_map.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.menu li:nth-child(2) a::before{
    background-image: url(../img/ico_btn_store.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.menu li a > span{
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu .arrow{
    border: 1px solid #06C755;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
}
.menu .arrow::after{
    content: '';
    border-top: solid 1px #06C755;
    border-right: solid 1px #06C755;
    width: 4px;
    height: 4px;
    transform: rotate(135deg);
    margin: auto;
    position: absolute;
    top: 4px;
    right: 0;
    left: 0;
}

.subttl{
    margin-top: 40px;
    text-align: center;
}
.subttl span{
    background-color: #fff;
    border: 1px solid #06A950;
    border-radius: 100px;
    color: #06A950;
    display: inline-block;
    font-size: 120%;
    font-weight: 600;
    padding: 10px 30px;
    text-align: center;
    position: relative;
}
.subttl span::before{
    content: '';
    width: 32px;
    height: 32px;
    display: block;
    margin: auto;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
}
.map .subttl span::before{
    background-image: url(../img/ico_subttl_map.png);
}
.store .subttl span::before{
    background-image: url(../img/ico_subttl_store.png);
}
.how{
    margin: 20px 0;
    text-align: center;
}
.how span{
    display: inline-block;
}



.map_box{
    background-color: #fff;
    border-radius: 10px;
    filter: drop-shadow(0 0 3px rgba(0,0,0,.08));
    margin-bottom: 30px;
    overflow: hidden;
}
.map_box h3{
    background-color: #06A950;
    color: #fff;
    font-size: 120%;
    padding: 20px 10px;
    text-align: center;
}
.map_box .map_inr{
    padding: 30px 5%;
}
@media ( min-width: 600px ){    
    .map_box .map_inr{
        padding-right: 10%;
        padding-left: 10%;
    }
}

.map_box figure{
    border-radius: 10px;
    overflow: hidden;
}
.map_box .link{
    padding: 0 10px;
}
.map_box .link li{
    border-bottom: 1px solid #E6E6E6;
    margin: 5px 0;
    padding: 10px 0;
}
.map_box .link a{
    display: flex;
    align-items: center;
    font-size: 120%;
    font-weight: 600;
    padding: 10px 0;
    position: relative;
    text-decoration: none;
}
.map_box .link a::after{
    content: '';
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
}

.map_box li .kuro_num{
    background-color: #F32F52;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.0;
    letter-spacing: 0;
    font-size: 80%;
    text-align: center;
    width: 1.6em;
    height: 1.6em;
    margin-right: 4px;
}
.map_box li:nth-child(2) .kuro_num{
    background-color: #1B8FB8;
}
.map_box li:nth-child(3) .kuro_num{
    background-color: #F97538;
}
.map_box li:nth-child(4) .kuro_num{
    background-color: #2DA970;
}
.map_box li:nth-child(5) .kuro_num{
    background-color: #B1604C;
}
.map_box li:nth-child(6) .kuro_num{
    background-color: #d50000;
}
.map_box li:nth-child(7) .kuro_num{
    background-color: #68b177;
}

.map_box .link li:first-child a{
    color: #F32F52;
}
.map_box .link li:nth-child(2) a{
    color: #1B8FB8;
}
.map_box .link li:nth-child(3) a{
    color: #F97538;
}
.map_box .link li:nth-child(4) a{
    color: #2DA970;
}
.map_box .link li:nth-child(5) a{
    color: #B1604C;
}
.map_box .link li:nth-child(6) a{
    color: #d50000;
}
.map_box .link li:nth-child(7) a{
    color: #68b177;
}

  
input[name="tab_item"] {
    display: none;
}

.tab_item_wrap{
    border-bottom: 4px solid #E60021;
    display: flex;
    justify-content: center;
}
.tab_item{
    background-color: #E6E6E6;
    border-radius: 6px 6px 0 0;
    color: #4D4D4D;
    font-size: 90%;
    padding: 20px 10px;
    text-align: center;
    width: 42%;
    max-width: 295px;
}
.tab_item:first-child{
    margin-right: 10px;
}
#store_sapporo:checked ~ .tab_item_wrap .tab_item:first-child,
#store_other:checked ~ .tab_item_wrap .tab_item:last-child{
    background-color: #E60021;
    color: #fff;
}
.tab_content {
    display: none;
    clear: both;
    overflow: hidden;
}
#store_sapporo:checked ~ #sapporo_content,
#store_other:checked ~ #other_content{
    display: block;
}

.tab_content h3{
    color: #E60021;
    font-size: 120%;
    font-weight: 600;
    margin: 30px 0;
    text-align: center;
}
.tab_content h3 img{
    max-width: 140px;
}
.tab_content .link li{
    margin-bottom: 12px;
}
.tab_content .link a{
    border: 1px solid #ccc;
    border-radius: 100px;
    color: inherit;
    display: block;
    font-size: 85%;
    padding: 10px 35px 10px 25px;
    text-align: center;
    text-decoration: none;
    position: relative;
}
.tab_content .link a span{
    display: inline-block;
}
.tab_content .link a::after{
    content: '';
    border-top: solid 2px #E60021;
    border-right: solid 2px #E60021;
    width: 9px;
    height: 9px;
    transform: rotate(135deg);
    position: absolute;
    top: calc(50% - 8px);
    right: 16px;
}

.store_wrap{
    background-color: #EAF4D4;
    margin-top: 30px;
    padding: 40px 0 100px;
}

.store_box{
    background-color: #fff;
    border-radius: 10px;
    filter: drop-shadow(0 0 3px rgba(0,0,0,.08));
    margin-bottom: 30px;
    overflow: hidden;
    padding: 30px 8% 12px;
}
@media ( min-width: 600px ){    
    .store_box{
        padding-right: 10%;
        padding-left: 10%;
    }
}
.store_box h4{
    border-bottom: 2px solid #06A950;
    font-feature-settings: "palt";
    font-size: 120%;
    padding-bottom: 10px;
    text-align: center;
}
.store_box h4 .block{
    display: inline-block;
}
.store_box h4 .small{
    font-size: 80%;
}
.store_box > p{
    color: #4D4D4D;
    margin: 20px 0;
    text-align: center;
}
.store_box > p .marker{
    background-color: #06C755;
    color: #fff;
    display: inline-block;
    font-size: 140%;
    font-weight: 600;
    line-height: 1.2;
    margin: 3px 0;
    padding: 2px 6px;
}

.store_list{
    background-color: #F8F8F8;
    border: 1px solid #E6E6E6;
    border-radius: 6px;
    padding: 20px 8%;
}
.store_list dt{
    color: #E60021;
    padding-left: 20px;
    position: relative;
}
.store_list dt::before{
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #E60021;
    position: absolute;
    top: 6px;
    left: 0;
}
.store_list dd{
    margin: 5px 0 0;
}
.store_list dd:not(:last-child){
    margin-bottom: 15px;
}
.store_list li{
    list-style: disc;
    margin-left: 35px;
}
.store_box .btn{
    background-color: #06C755;
    border-radius: 10px;
    border-bottom: 4px solid #06A950;
    color: #fff;
    display: block;
    font-size: 90%;
    font-weight: 600;
    padding: 16px 40px 16px 30px;
    text-align: center;
    text-decoration: none;
    position: relative;
}
.store_box .btn .big{
    display: block;
    font-size: 150%;
}
.store_box .btn .arrow{
    background-color: #fff;
    border-radius: 50%;
    width: 21px;
    height: 21px;
    display: inline-block;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 12px;
}
.store_box .btn .arrow::after{
    content: '';
    border-top: solid 2px #06C755;
    border-right: solid 2px #06C755;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 8px;
}



/*-----------------------
    ページトップへ
-----------------------*/
#pagetop{
    background: #fff;
    border-radius: 50%;
    display: block;
    filter: drop-shadow(0 0 3px rgba(0,0,0,.08));
    height: 60px;
    width: 60px;
    padding: 10px;
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 99;
}
#pagetop::before{
    content: '';
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    
    border: 0px;
    border-top: solid 2px #06C755;
    border-right: solid 2px #06C755;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: 25px;
    right: 20px;
}


/*-----------------------
       フッター
-----------------------*/

.copyright p{
    font-size: 1.0rem;
    padding: 20px 10px;
    text-align: center;
}


/*-----------------------
    プリント用CSS
-----------------------*/
/*@media print{
    
}*/