@charset "UTF-8";
/* CSS Document */
@font-face {
font-family: "Yu Mincho", YuMincho, "游明朝体", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
font-family: 'Roboto', sans-serif;
    

font-style: normal;
font-weight: 400;
src: local("Noto Sans CJK JP"),
         url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
         url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
         url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}

/*フォントサイズを変更しやすくするための設定*/
/*16px x 62.5% =10px*/
html{
    font-size: 62.5%;
}

/*フォント種類・フォントカラー・フォントサイズの指定*/
body{
    font-family: "Yu Mincho", YuMincho, "游明朝体", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    color: #333333;
    font-size: 1.6rem;
    line-height: 1.5;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media all and (-ms-high-contrast:none){
	body{
		font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	}
}

/*画像のレスポンシブ対応*/
img{
  width: 100%;
  height: auto; 
}

/*画面表示サイズの指定＆画面の中央表示*/
.inner{
    max-width: 1120px;
    margin: auto;
}

.text-center{
    text-align: center;
}

.br-pc{
    display: block;
}
    
.br-sp{
    display: none;
}

.flexbox{
    display: flex;
    justify-content: space-between;
}

/*************
* ヘッダー
*************/
.header{
	position: relative;
    width: 100%;
    height: 17vw;
	background-image: url("../image/store-infomation/header-bg.jpg");
    background-size: cover;
}

.headerLogo {
    width: 92px;
    padding: 10px;
    position: fixed;
    top: 0;
    z-index: 5;
}

.headerLogo img{
	filter: drop-shadow(0px 3px 10px rgba(250,250,250,0.8));
}

.headerText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.pageTitle{
    font-size: 5rem;
    color: #fff;
    display: inline-block;
    border-top: solid #fff 1px;
    border-bottom: solid #fff 1px;
    line-height: 1;
    margin-bottom: 10px;
}

@media all and (-ms-high-contrast:none){
	.pageTitle{
		font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif !important;
	}
}

.header-text{
    color: #fff;
    text-align: left;
}

.header-text span{
    font-family: Roboto;
}

/*トリガーメニュー 〜ここから〜*/
.btn-trigger {
    background-color: #562e00;
    position: fixed;
    right: 0;
	color: #fff;
	padding: 9px 19px;
	text-align: center;
	cursor: pointer;
    z-index: 10;
}

.btn-trigger::after{
	content: 'menu';
}

.btn-trigger.active {
    background-color: transparent;
    position: fixed;
    right: 0;
	color: #333;
	padding: 9px 25px;
	text-align: center;
	cursor: pointer;
	z-index: 20;
}

.btn-trigger.active::after {
    content: 'close';
    position: absolute;
    top: 48px;
    left: 21px;
}

.btn-trigger span{
	display: block;
	width: 30px;
	height: 1px;
	background-color: #fff;
    margin: 10px auto;
}

.btn-trigger span:last-of-type{
	margin-bottom: 5px;
}

.btn-trigger.active span:first-of-type{
	transform: translateY(11px) rotate(-45deg);
    background-color: #333333;
}

.btn-trigger.active span:nth-of-type(2){
	transform: translateY(0px) rotate(45deg);
    background-color: #333333;
}

.btn-trigger.active span:last-of-type{
	display: none;
    background-color: #333333;
}

.btn-trigger-text{
	font-family: Roboto;
    color: #fff;
    line-height: 0;
}

.btn-trigger-text span{
	vertical-align: -0.2em;
}

.nav {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	transform: translate(100%);
}

.nav-list{
    margin-bottom: 6vh;
}

.nav-inner{
    display: flex;
    width: 100%;
    height: 100vh;
}

.nav-image{
    width: 50%;
    height: 100vh;
    background-image: url("../image/store-infomation/TriggerNav-image.jpg");
    background-size: cover;
    background-position: center;
}

.nav-image img{
    max-width: none;
    height: 100vh;
}

.nav-right{
    width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;		
}

.nav-right-inner{
	position: relative;
}

.triggerNav-logo{
    width: 100%;
   text-align: center;
    margin-bottom: 6vh;
}

.triggerNav-logo img{
    width: auto;
}

.triggerNav-info-wrapper{
    text-align: center;
}

.triggerNav-tel{
    margin-bottom: 20px;
}

.triggerNav-tel img{
    width: auto;
}

.triggerNav-info{
    margin-bottom: 15px;
}
.triggerNav-info:first-of-type{
    margin-bottom: 8px;
}
.triggerNav-info:nth-of-type(2){
    margin-bottom: 8px;
}

.triggerNav-info:last-of-type{
    margin-bottom: 0;
}

.triggerNav-info span{
    font-weight: 700;
    margin-left: 5px;
}

.triggerNav-sns{
    display: inline-block;
	width: 60px;
    position: absolute;
    bottom: 0;
    right: -30%; 
}

.nav.open {
  transform: translateZ(0);
}

.nav li {
    font-size: 2rem;
    color: #fff;
    text-align: center;
    padding: 20px 0;
	line-height: 1;
}

.nav-list a{
	color: #333;
    display: inline-block;
}

.nav-list li a:after{
    content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 3px solid #000;
	display: block;
    padding-top: 3px;
}

.nav-list li a:hover:after{
    width: 100%;
    border-bottom: solid 3px #562e00;
}

/*トリガーメニュー 〜ここまで〜*/

/***********************
* 共通
***********************/
.sectionTitle{
    font-size: 3.5rem;
    padding: 10px 0;
    background-image: url("../image/store-infomation/bg.png");
    text-align: center;
}

@media all and (-ms-high-contrast:none){
	.sectionTitle{
		font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif !important;
	}
}

/***********************
* section01 -詳細-
***********************/
.information-inner{
    display: flex;
}

.heimenMap-fromAkashi{
    position: relative;
}

.information-image{
    width: 60%;
    height: 40vw;
    background-image: url("../image/store-infomation/store-image.jpg");
    background-size: cover;
    background-position: bottom;
}

.information-detail{
    width: 40%;
	min-width: 630px;
    background-color: rgba(255,255,255,0.83);
    display: flex;
    justify-content: center;
    align-items: center;
}

.information-detail div{
    margin: 0 auto;
    display: flex;
    padding: 0.7vw 0;
}

dt{
    font-weight: bold;
}

dt{
    width: 120px;
}

/*********************
* section02 -MAP/地図-
*********************/
.map-inner{
    width: 80%;
    margin: 0 auto;
    padding: 80px 0;
}

.map-inner p{
    margin-bottom: 5px;
}

.map-image{
    width: 100%;
    height: 34vw;
    background-image: url("../image/store-infomation/storeinfo-image.jpg");
    background-size: cover; 
}

/****************************
* section03 -ACCESS/アクセス-
****************************/
.access-wrapper{
    padding: 80px 0;
}
.access-wrapper:first-of-type{
    padding-bottom: 0;
}

/*交差点名*/
.kousaten-name {
    position: absolute;
    top: 38%;
    left: 14%;
    background-color: #fff;
    border: solid 3px #FF0004;
    padding: 1%;
    color: #FF0004;
    transform: translateY(-60%);
    line-height: 1;
}
.fromTanba .kousaten-name{
    top: 84%;
    left: 13%;
}
.zyunro-item-inner .kousaten-name{
    top: 26%;
    padding: 2%;
}
.fromTanba .zyunro-item-inner .kousaten-name{
    top: 34%;
    left: 5%;
    padding: 2%;
}
.kousaten-name span{
    display: block;
    font-size: 3vw;
    margin-top: 6%;
}
.zyunro-item-inner .kousaten-name span{
    font-size: 1.5vw;
}

/*道順 -zyunro-*/
.block-title{
    display: inline-block;
    font-size: 2rem;
    margin-bottom: 50px;
    border-bottom: solid 5px #ebf5ec;
}
.block-title span{
    font-size: 2.5rem;
    font-weight: bold;
}
.block-title::before{
    content: url("../image/store-infomation/access/icon-car.jpg");
    margin-right: 10px;
    top: 7px;
    position: relative;
    position: 5px;    
}
.fromStation .block-title::before{
    content: url("../image/store-infomation/access/icon-work.jpg");
}
.block-title span span{
    font-family: "Times New Roman", Times, "serif";
}
.access-inner{
    width: 80%;
    margin: 0 auto;
}
.access-wrapper.fromTanba{
    border-bottom: solid 3px #562e00;
}
.heimenMap{
    margin: 5px 0 50px;
    position: relative;
}
.heimenMap img{
}
.zyunro{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.zyunro-item-inner{
    position: relative;
}
.zyunro-item{
    width: 30%;
}
.zyunro-item div{
    margin: 5px 0;
}
.zyunro-item img{
    width: 100%;
}
.fromStation .zyunro::after{
  content:"";
  display: block;
  width:30%;
}
.fromStation .zyunro-item{
    margin-bottom: 50px;
}
.fromStation .zyunro-item:nth-of-type(4),
.fromStation .zyunro-item:nth-of-type(5){
    margin-bottom: 0;
}
/*丹波方面からお車でお越しの方*/

/******************
* フッター -footer-
******************/
.footer{
    padding: 50px 0;
	background-image: url(../image/store-infomation/footer-bg.jpg);
	background-repeat: repeat;
}

.footer-top{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 30px;
    border-bottom: solid 1px rgba(86,46,0,0.30);
}

.footer-top-tel{
    margin-right: 100px;
    padding-top: 5px;
}

.footer-top-tel-text{
    background-color: #fff;
    border: solid 1px #562e00;
    padding: 5px 10px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.footer-top-tel-num{
    font-family: Roboto;
    font-size: 3.5rem;
    text-decoration: none;
}

.footer-top-tel-num::before{
    content: '';
    display: inline-block;
    width: 50px;
    height: 60px;
    background-image: url(../image/store-infomation/icon-sp.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 10px;
}

.footer-top-tel a{
    color: #333333;
    text-decoration: none;
}

.footer-top-info p{
    margin-bottom: 10px;
}

.footer-top-info i{
    margin-right: 5px;
}

.footer-bottom{
    padding-top: 40px;
    position: relative;
}

.footer-nav-list{
    display: flex;
    justify-content:center;
    margin-bottom: 45px;
    box-sizing: border-box;
    padding: 4px 0;
}

.footer-nav-list li{
    margin-right: 50px;
}

.footer-nav-list li:last-of-type{
    margin: 0;
}

.footer-nav-list li a{
    text-decoration: none;
	padding-bottom: 3px;
	display: block;
}

.footer-nav-list a{
	color: #333333;
}

.footer-nav-list li a:after {
	content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 2px solid #562e00;
	display: block;
}
.footer-nav-list li a:hover:after {
	width: 100%;
	border-bottom: 2px solid #562e00;
}

.footer-insta{
    width: 15%;
    position: absolute;
    bottom: 0;
    left: 30px;
}

.footer-logo{
    width: 20%;
    margin: 0 auto;
}

.copyright{
    display: block;
    color: #fff;
    background-color: #562e00;
    padding: 5px;
}

/*************************
* ページトップへ戻るボタン
*************************/
.pageTop {
    width: 110px;
    position: fixed;
    right: -100px;
    bottom: 50px;
    background-image: url(../image/store-infomation/pageTop-before.png);
    background-position: center;
    opacity: 1;
    background-size: cover;
    z-index: 2;
}
.pageTop:hover {
    background-image: url("../image/store-infomation/pageTop-after.png");
}

.pageTop a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
.pageTop a::before {
    content: 'PAGE TOP';
    color: #000;
    font-size: 1.2rem;
    position: absolute;
    width: 115px;
    top: -5px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

.pageTop a::after {
    content: '';
    display: inline-block;
    width: 29px;
    height: 24px;
    background-image: url(../image/store-infomation/pagetop-arrow-sp.png);
    background-size: cover;
    vertical-align: middle;
    position: absolute;
    top: -29px;
    right: -22px;
}

.pageTop a:hover::after {
    top: -35px;
}


@media screen and (max-width:640px){
    body{
        font-size: 1.5rem;
    }
    .inner{
        box-sizing: border-box;
        width: 100%;
        padding: 0 20px;
    }
    .wrapper{
        box-sizing: border-box;
        width: 100%;
        padding: 0 20px;
    }
    img{
        width: 100%;
        height: auto;
    }
    .br-pc{
        display: none;
    }
    .br-sp{
        display: block;
    }
    
    /******************************
    * ページトップボタン -PAGE TOP-
    ******************************/  
    .pageTop {
        background-image: none;
        background-color: rgba(86,46,0,0.5);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        padding: 10px;
        box-sizing: border-box;
        bottom: 5px;
    }
    
    .pageTop:hover{
        background-image: none;
    }
    
    .pageTop a {
        position: relative;
        display: block;
        width: auto;
        height: auto;
        text-decoration: none;
        top: 0px;
        right: -10px;
    }
    
    .pageTop a::before{
        content: 'PAGE TOP';
        color: #fff;
        font-size: 1.2rem;
        position: absolute;
        width: 50px;
        top: 1px;
        bottom: 0;
        right: 0;
        left: -20px;
        margin: auto;
        text-align: center;
        line-height: 1.3;
    }
    
    .pageTop a::after{
        content: none;
    }

    /******************
    * ヘッダー
    ******************/
    .header{
        height: 52vw;
    }
    
    .headerLogo{
        width: 60px;
    }
    
    .headerText{
        width: 90%;
    }
    
    .pageTitle{
        font-size: 2.5rem;
        margin-bottom: 20px;
    }
    
    .header-text{
        text-align: left;
    }
    
    .btn-trigger {
        padding: 8px 15px;
    }
    
    .btn-trigger span:last-of-type {
        margin-bottom: 10px;
    }
    
    .btn-trigger::after {
        display: none;
    }
    
    .btn-trigger.active span:first-of-type {
        transform: translateY(11px) translatex(9px) rotate(-45deg);
    }
    
    .btn-trigger.active span:nth-of-type(2) {
        transform: translateY(0px) translatex(9px) rotate(45deg);
    }
    
    .nav{
        width: 100%;
        background-color: #fff;
    }
    
    .nav-list{
        margin-bottom: 10%;
    }
    
    .nav li{
        font-size: 1.5rem;
		margin-bottom: 0;
		padding: 15px 0;
    }
    
    .nav-list li a::after {
        display: none;
    }
    
    .nav-image{
        display: none;
    }
    
    .nav-right{
        width: 100%;
        padding: 0 0 0;
        margin: auto 0;
    }
    
    .triggerNav-logo {
        width: 60%;
        margin: 0 auto 10%;
    }
    
    .triggerNav-logo img{
        width: 100%;
    }
    
    .nav-list-item{
        margin-bottom: 5px;
    }
    
    .triggerNav-tel{
        width: 80%;
        margin: 0 auto 10%;
    }
    
    .triggerNav-tel img{
        width: 100%;
    }
    
    .triggerNav-sns {
        display: none;
    }
    
    .triggerNav-info{
        display: block;
    }
    
    /******************
    * 共通
    ******************/
    
    .sectionTitle{
        font-size: 2rem;
    }
    
    /***********************
    * section01 -詳細-
    ***********************/
    .information-inner{
        display: block;
    }
    
    .information-image {
        background-image: url("../image/store-infomation/store-image-sp.jpg");
        width: 100%;
        height: 53vw;
    }
    
    .information-detail{
        width: 96%;
				min-width: auto;
        margin: 0 auto;
        padding: 30px 0 50px;
    }
    
    .information-detail div{
        border-bottom: solid 1px #333333;
				padding: 10px 0;
    }
    
    .information-detail dt{
        width: 100px;
        height: 22px;
        margin: auto 0;
    }
	
	.information-detail div span dd:first-of-type{
		margin-bottom: 10px;
	}
    
    /********************
    * map/地図
    ********************/
    .block-title{
        font-size: 1.6rem;
    }
    
    .block-title span{
        font-size: 2rem;
    }
    
    .map-inner{
        width: 90%;
        padding: 50px 0;
    }
    
    .map-image{
        background-image: url("../image/store-infomation/storeinfo-image-sp.jpg");
        height: 53vw;
    }
    
    /********************
    * ACCESS/アクセス
    ********************/
    .access-inner {
        width: 90%;
    }
    
    .access-wrapper{
        padding: 50px 0;
    }
    
    .block-title{
        height: 30px;
        font-size: 1.5rem;
        margin-bottom: 30px;
    }
    
    .fromStation .block-title{
        height: 60px;
    }
    
    .block-title span{
        font-size: 1.9rem;
    }
    
    .block-title::before {
        float: left;
        top: -11px;
    }
    
    .fromStation .block-title::before {
        float: left;
        top: 0;
    }

    .heimenMap-title{
        display: none;
    }
    
    .heimenMap{
        display: none;
    }
    
    .zyunro{
        display: block;
    }
    
    .zyunro-item{
        width: 100%;
        margin-bottom: 30px;
    }
    
    .zyunro-item-inner .kousaten-name span {
        font-size: 5.5vw;
    }
    
    .fromStation .zyunro-item{
        margin-bottom: 30px;
    }
    
    .zyunro-item:last-of-type{
        margin-bottom: 0;
    }
    
    .fromStation .zyunro-item:nth-of-type(4) {
        margin-bottom: 30px;
    }
    
    /******************
    * フッター -footer-
    ******************/
    .footer-inner{
        width: 90%;
        margin: 0 auto;
    }
    .footer-top{
        display: block;
        width: 100%;
        border-bottom: none;
    }
    
    .footer-top-tel{
        margin-right: 0;
        margin-bottom: 30px;
    }
    
    .footer-top-tel-text{
        box-sizing: border-box;
        width: 290px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    
    .footer-top-tel-num{
        font-size: 3rem;
        text-align: center;
    }
    
    .footer-top-info{
        text-align: center;
    }
    
    .footer-top-info p{
        margin-bottom: 5%;
    }
    
    .footer-bottom{
        padding-top: 0;
    }
    
    .footer-nav-list{
        display: none;
    }
    
    .footer-logo{
        width: 60%;
    }
    
    .footer-insta{
        width: 15%;
        left: 0;
    }
    
}

@media screen and (min-width:641px) and (max-width:1024px){
    
    /******************************
    * ページトップボタン -PAGE TOP-
    ******************************/  
    .pageTop {
        background-image: none;
        background-color: rgba(86,46,0,0.5);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        width: 70px;
        height: 70px;
        border-radius: 100%;
        padding: 10px;
        box-sizing: border-box;
        bottom: 5px;
    }
    
    .pageTop:hover{
        background-image: none;
    }
    
    .pageTop a {
        position: relative;
        display: block;
        width: auto;
        height: auto;
        text-decoration: none;
        top: 10px;
        right: -10px;
    }
    
    .pageTop a::before{
        content: 'PAGE TOP';
        color: #fff;
        font-size: 1.2rem;
        position: absolute;
        width: 50px;
        top: 1px;
        bottom: 0;
        right: 0;
        left: -20px;
        margin: auto;
        text-align: center;
        line-height: 1.3;
    }
    
    .pageTop a::after{
        content: none;
    }
    
    /***********************
    * ヘッダー -header-
    ***********************/
    .header{
        height: 30vw;
    }
    
    .headerText{
        width: 100%;
    }
    
    .header-text{
        text-align: center;
    }
    
    .nav{
        width: 100%;
        background-color: #fff;
    }
    
    .nav-list li a::after {
        display: none;
    }
    
    .nav-image{
        display: none;
    }
    .nav-right{
        width: 100%;
        margin: auto 0;
    }
	
	/******************
    * 詳細 -detail-
    ******************/
	.information-inner{
		display: block;
	}
	
	.information-image{
		width: 100%;
		height: 64vw;
	}
	
	.information-detail{
		width: 100%;
		padding: 50px 0;
	}
    
    /******************
    * アクセス -access-
    ******************/
    .zyunro-item-inner .kousaten-name {
        top: 22%;
        left: 3%;
    }
    
    .zyunro-item-inner .kousaten-name span {
        font-size: 2.5vw;
    }
    
    .fromTanba .zyunro-item-inner .kousaten-name {
        top: 23%;
        left: 3%;
    }

    /******************
    * フッター -footer-
    ******************/
    .footer-top{
        width: 90%;
    }
    
    .footer-top-tel-num{
        font-size: 2.5rem;
        padding-left: 10px;
    }
    
    .footer-top-tel{
        margin-right: 5%;
        padding-top: 10px;
    }
    
    .footer-nav-list li a:after{
        transition: none;
		display: none;
    }

}