@charset "UTF-8";

.inner {
    max-width: 1240px;
}

body {
    padding-top: 0;
}

.hero {
    padding-top: 150px;
}

.hero_name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 45px;
    font-weight: bold;
    color: #fff;
    background: #036EB8;
    padding: 10px 30px;
    text-align: center;
    width: fit-content;
    margin: 0 auto 40px;
}

.hero_ttl {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70px;
    line-height: 90px;
    font-weight: bold;
    padding: 40px 0 315px;
    background: url(/img/home/img-hero.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}


/* intro */

.intro_intro {
    text-align: center;
    padding: 0 0 55px;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
}

.intro .inner {
    max-width: 1020px;
}

.construct {
    padding: 45px 100px;
    background: #FFF7F7;
}

.construct_ttl {
    text-align: center;
    font-size: 34px;
    font-weight: bold;
    margin-bottom: 10px;
}

.construct_date {
    text-align: center;
    padding-bottom: 15px;
    border-bottom: solid 3px #D50000;
}

.store_cnt .sec_ttl {
    margin-bottom: 40px;
}

.store_ttl {
    margin-bottom: 25px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
}

.store_row {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 20px;
}

.store_row_item {
    border: solid 2px #D50000;
    padding: 20px 35px;
    background: #fff;
    width: 354px;
}

.store_row_item .date {
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: solid 2px #D50000;
    text-align: center;
}

.store_row_item .red {
    color: #D50000;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}

.construct_store .note {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
}

.note_sub {
    padding-left: 1em;
    text-indent: -1em;
    word-break: break-all;
    width: 100%;
    max-width: 1040px;
    margin: 20px auto 0;
}

.note_sub a {
    color: #036EB8;
    text-decoration: underline;
    padding-left: 5px;
}

.note_sub a:hover {
    text-decoration: none;
}


/* store */

.store {
    background: #EBF9FF;
}

.store_cnt {
    position: relative;
}

.map {
    padding: 100px;
    text-align: center;
}

.map_img {
    text-align: center;
    margin-bottom: 15px;
}

.map p {
    padding-left: 1em;
    text-indent: -1em;
    font-size: 20px;
    text-align: left;
    max-width: 750px;
    margin: 0 auto;
}

.map .balloon img {
    position: absolute;
}

.map .balloon img:nth-child(1) {
    top: 16%;
    left: 21%;
}

.map .balloon img:nth-child(2) {
    top: 45%;
    right: 50px;
}

.map .balloon img:nth-child(3) {
    bottom: 95px;
    right: 30px;
}

.hours {
	padding: 65px 30px;
    margin-bottom: 85px;
}

.hours_list {
	display: flex;
	justify-content: center;
	gap: 40px;
    margin-bottom: 40px;
}

.shop_cat {
	position: relative;
	padding-left: 20px;
	font-size: 24px;
	font-weight: bold;
}

.shop_cat::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 40px;
	background: #036EB8;
	position: absolute;
	bottom: 50%;
	left: 0;
	transform: translateY(50%);
}

.shop_hours {
	font-size: 30px;
	line-height: 30px;
	margin-bottom: 20px;
}

.shop_hours span {
    font-size: 20px;
}

.link_menu {
	background: #EBF9FF;
	border-radius: 3px;
	padding: 10px 20px;
	color: #036EB8;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.link_menu:hover {
	background: #036EB8;
	color: #EBF9FF;
}

.link_menu::before {
	content: '';
	width: 12px;
	height: 16px;
	background: url(/img/cmn/icon-pdf.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.store .note {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #D50000;
    background: #FFF7F7;
    padding: 10px 30px;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}

.sns_list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.sns_list a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    line-height: 30px;
    border: solid 1px #C4C4C4;
    background: #fff;
    padding: 20px 50px;
}

.sns_list a:hover {
    opacity: .7;
}

.sns_list .facebook::before {
    content: '';
    width: 60px;
    height: 60px;
    background: url(/img/cmn/icon-facebook.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sns_list .insta::before {
    content: '';
    width: 55px;
    height: 55px;
    background: url(/img/cmn/icon-insta.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* access */

.access_map {
    margin-bottom: 70px;
}

.access_map .name {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
}

.access_map .address {
    margin-bottom: 30px;
}

.access_map iframe {
    width: 100%;
    height: 420px;
}

.access .map {
    padding: 0;
    margin-bottom: 35px;
}

.access .map p {
    font-size: 16px;
    text-align: center;
}

.vehicle {
    margin-bottom: 50px;
}

.vehicle_ttl {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-left: 70px;
    position: relative;
}

.vehicle.train .vehicle_ttl::before {
    content: '';
    width: 56px;
    height: 56px;
    background: url(/img/cmn/icon-train.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: 50%;
    transform: translateY(50%);
}

.vehicle.car .vehicle_ttl::before {
    content: '';
    width: 56px;
    height: 56px;
    background: url(/img/cmn/icon-car.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: 50%;
    transform: translateY(50%);
}

.vehicle_list li {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
}

.vehicle_list li .from {
    color: #fff;
    background: #2EA7E0;
    padding: 5px 15px;
    width: 150px;
    text-align: center;
    border-radius: 40px;
}

.vehicle_list li .direct {
    flex: 1;
}

.vehicle_list li .direct span {
    display: inline-block;
    width: 16px;
    height: 7px;
    background: url(/img/cmn/icon-arrow_access.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 10px;
}

.vehicle_note a {
    color: #D50000;
    text-decoration: underline;
}

.vehicle_note a:hover {
    text-decoration: none;
}


/* link_bnr */

.link_bnr {
    padding: 50px 60px;
    background: #F7F7F7;
}

.link_list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px 2%;
    flex-wrap: wrap;
}

.link_list li a {
    display: block;
    transition-duration: 0.5s;
}

.link_list li a:hover {
    opacity: 0.7;
}




@media screen and (max-width:1240px) {
}

@media screen and (max-width:767px) {

    /* hero */

    .hero {
        padding-top: 100px;
    }

    .hero_name {
        font-size: 23px;
        padding: 10px 20px;
        margin-bottom: 20px;
    }

    .hero_ttl {
        font-size: 28px;
        line-height: 40px;
        padding: 0 0 80px;
    }

    .intro_intro {
        font-size: 18px;
        text-align: left;
        line-height: 35px;
    }

    .construct {
        padding-inline: 25px 20px;
    }

    .construct_ttl {
        font-size: 20px;
    }

    .construct_date {
        border: none;
    }

    .construct_store .note {
        font-size: 19px;
    }


    /* store */

    .store_ttl {
        font-size: 20px;
    }

    .store_row {
        flex-flow: column;
        gap: 15px;
    }

    .store_row_item {
        padding: 20px 30px;
        width: 100%;
    }

    .store_row_item .date {
        font-size: 20px;
    }

    .store_row_item .red {
        font-size: 28px;
    }

    .map {
        padding: 10px 10px 70px 10px;
    }

    .map_img {
        margin-bottom: 0px;
    }

    .map .balloon img:nth-child(1) {
        width: 30%;
        left: 4%;
        top: 11%;
    }

    .hours {
        padding: 15px 20px;
        margin-bottom: 50px;
    }

    .hours_list {
        flex-flow: column;
    }

    .shop_cat {
        font-size: 20px;
    }

    .shop_hours {
        font-size: 24px;
    }

    .store {
        padding-bottom: 50px;
    }

    .store .note {
        font-size: 20px;
        padding: 10px 20px;
    }

    .sec_comment {
        font-size: 19px;
    }

    .sns_list {
        flex-flow: column;
        gap: 10px;
    }

    .sns_list a {
        font-size: 16px;
        line-height: 25px;
        padding: 20px 40px;
    }
    
    .sns_list .facebook::before {
        width: 45px;
        height: 45px;
    }

    .sns_list .insta::before {
        width: 40px;
        height: 40px;
    }


    /* access */

    .access {
        padding-top: 50px;
    }

    .access_map .name {
        font-size: 20px;
        text-align: center;
    }

    .address {
        text-align: center;
    }

    .access_map {
        margin-bottom: 20px;
    }

    .access_map iframe {
        height: 273px;
    }

    .access .map {
        margin-bottom: 100px;
    }

    .access .map p {
        text-align: left;
    }

    .vehicle.train {
        margin-bottom: 100px;
    }

    .vehicle.car {
        margin-bottom: 0px;
    }

    .vehicle_ttl {
        font-size: 20px;
        padding-left: 0px;
        text-align: center;
    }

    .vehicle.train .vehicle_ttl::before,
    .vehicle.car .vehicle_ttl::before {
        transform: translateX(50%);
        right: 50%;
        left: unset;
        top: -170%;
    }

    .vehicle_list li {
        flex-flow: column;
        gap: 10px;
        margin-bottom: 30px;
    }

    .vehicle_list li .direct {
        text-align: center;
    }

    .vehicle_list li .direct span {
        transform: rotate(90deg);
    }


    /* link_bnr */

    .link_bnr {
        padding: 30px;
    }

    .link_list {
        gap: 10px 2%;
    }

    .link_list li {
        width: 45%;
    }


}