@charset "UTF-8";
/* CSS Document */
@font-face{
	font-family: 'NSKPHMKF';
	font-style: normal;
    font-weight: 400;
	src:
	local("NSKPHMKF"),
	url("../fonts/NSKPHMKF.ttf") format('truetype');
}
html{
	font-size: 62.5%;
}
body{
	color: #090717;
	font-family: "Noto Serif JP", serif;
	font-size: 1.6rem;
	font-feature-settings: "palt";
	letter-spacing: 0.025em;
}
a{
    color: #090717;
    text-decoration: none;
    outline: none;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    max-width: 100%;
    height: auto;
}
*{
    box-sizing: border-box;
}
.fade{
	display: none;
}
.text-center{
    text-align: center;
}
.pc-img{
    display: block;
}
.sp-img{
    display: none;
}
.br-sp{
    display: none;
}
.display_sp{
    display: none;
}
.flex{
    display: flex;
}
.wrapper{
    margin: 0 auto;
    padding: 0 40px;
    max-width: 1280px;
}
/*----------------------------------------

             ローディング

----------------------------------------*/

/* Loading背景画面設定　*/
#splash{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-image: url("../images/common/texture_asa_navy.jpg");
    text-align: center;
    color: #fff;
}
/* Loading画像中央配置　*/
#splash_logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
    display: inline-block;
    width: 600px;
}
/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .2s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #fff;/*線の色*/
	}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path{
	  fill: #fff;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}
/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}
body.appear .splashbg{
    display: block;
    content: "";
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #890F12;
    animation-name: PageAnime;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes PageAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}
/*画面遷移の後現れるコンテンツ設定*/
#container{
    opacity: 0;/*はじめは透過0に*/
}
body.appear #container{
    animation-name: PageAnimeAppear;
    animation-duration: 1s;
	animation-delay: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
    }
}
main{
    position: relative;
}
/*----------------------------------------

             ヘッダー

----------------------------------------*/
#header{
    position: fixed;
    top: 0;
    left: 0;
    width: 230px;
    height: 100vh;
    background-image: url("../images/common/texture_asa_navy.jpg");
    padding: 100px 30px 50px 30px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
}
#header a{
    transition: all 0.3s;
}
#header a:hover{
    opacity: 0.6;
}
#header .page-menu .navBtn.current{
    position: relative;
    transition: all 0.3s;
}
#header .page-menu .navBtn.current::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #fff;
    bottom: -6px; 
}
.header-area{
    width: 60%;
}
#header .page-menu li{
    padding-bottom: 2.4em;
    text-align: right;
}
.page-menu li:last-child{
    padding-bottom: 0;
}
.page-menu li a{
    color: #fff;
}
.sns-link li{
    display: inline-block;
    padding-right: 0.8em;
}
.sns-link li:last-of-type{
    padding-right: 0;
}
.sns-link li img{
    width: 38px;
}
#content-area{
    width: 100%;
    padding: 0 0 0 230px;
}
.openbtn{
    display: none;
}
/*----------------------------------------

        　グローバルナビゲーション

----------------------------------------*/
#sp-nav{
    display: none;
}
#main-nav{
    z-index: 100;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
    background-image: url("../images/common/texture_washi.jpg");
}
#g-nav>ul{
    display: flex;
}
#g-nav>ul>li.has-child{
    position: relative;
}
#g-nav>ul>li.has-child ul{
    display: block;
    position: absolute;
	left:50%;
	top:80px;
    transform: translateX(-50%);
	z-index: 4;
    /*形状を指定*/
	background:rgba(137,15,18,0.7);
	width:155px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}
#g-nav>ul>li.current>a{
    color: #890F12;
}
#g-nav>ul>li.current>a::before{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: #890F12;
    bottom: 24px;
}
/*hoverしたら表示*/
#g-nav>ul>li.has-child:hover > ul{
  visibility: visible;
  opacity: 1;
}
/*ナビゲーションaタグの形状*/
#g-nav>ul>li.has-child ul li a{
    display: block;
	color: #fff;
	border-bottom:solid 1px rgba(255,255,255,0.6);
    font-size: 1.4rem;
    padding: 20px 15px;
}
#g-nav>ul>li.has-child ul li:last-child > a{
 border-bottom:none;
 }
#g-nav>ul>li.has-child ul li a:hover{
	background:#890F12;
}
#g-nav>ul>li>a{
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 31px 25px;
    position: relative;
    transition: all 0.3s;
}
#g-nav>ul>li>a:hover{
    color: #890F12;
}
/*----------------------------------------

             メインビジュアル

----------------------------------------*/
#slider {
    width: 100%;
    position: relative;
    height: calc(100vh - 80px);
}
#slider img{
    position: absolute;
    width: 20%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/*----------------------------------------

             セクション

----------------------------------------*/
section{
    padding-bottom: 80px;
}
.sub-sec_title.common img{
    width: 40px;
    padding-bottom: 0.8rem;
}
.sub-sec_title.common h3{
    font-family: 'NSKPHMKF';
    font-size: 2.8rem;
    padding-bottom: 40px;
}
.sub-sec{
    margin-bottom: 5.6rem;
}
.sub-sec:last-of-type{
    margin-bottom: 0;
}
h2.common{
    font-family: 'NSKPHMKF';
    font-size: 4.0rem;
    padding: 8.0rem 0;
    position: relative;
}
h2.common::before{
    content:"";
    position: absolute;
    background-image: url("../images/common/deco_star_navy.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 117px;
    height: 137px;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}
/* 4-1 ふわっ（下から） */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 4-1 ふわっ（左から）*/

.fadeLeft{
animation-name: fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 4-1 ふわっ（右から） */

.fadeRight{
animation-name: fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}
/*----------------------------------------

             ボタン

----------------------------------------*/
/*--- 線から塗り（共通設定） ---*/
.btn{
     /*線の基点とするためrelativeを指定*/
    position: relative;
     /*ボタンの形状*/
    display: inline-block;
    color: #fff;
    padding: 28px 32px;
    background: #890F12;
    text-decoration: none;
    outline: none;
    /*アニメーションの指定*/
    transition: all .3s;
    transition-delay: .5s;/*0.7秒遅れてアニメーション*/
    font-family: 'NSKPHMKF';
    font-size: 2.4rem;
}
.btn:hover{
    background: #fff;
    color: #890F12;
}
/*線の設定*/
.btn span{
    display: block;
}
/*横線の設定*/
.btn::before,
.btn::after{
    content:"";
    /*絶対配置で線の位置を決める*/   
    position: absolute;
    /*線の形状*/   
    width: 0;
    height: 2px;
    background: #fff;
    /*アニメーションの指定*/
    transition: all 0.2s linear;
}

/*縦線の設定*/
.btn span::before,
.btn span::after{
    content:"";
    /*絶対配置で線の位置を決める*/   
    position: absolute;
    /*線の形状*/
    width:2px;
    height:0;
    background: #fff;
    /*アニメーションの指定*/
    transition: all 0.2s linear;
}
/*hoverした際、線が縦横100%伸びる*/
.btn:hover::before,
.btn:hover::after{
    width: 100%;
}
.btn:hover span::before,
.btn:hover span::after{
    height: 100%;
}
/*== 左上と右下から枠線が伸びて塗りに */

/*右下から右上へ伸びる横線*/
.bordercircle::after{
    right:0;
    bottom: 0;
    transition-duration: 0.3s;
}

/*右下から右上へ伸びる縦線*/
.bordercircle span::after{
    right:0;
    bottom: 0;
    transition-duration: 0.3s;
}

/*左上から右上へ伸びる横線*/
.bordercircle::before{
    left: 0;
    top: 0;
    transition-duration: 0.3s;
}

/*左上から左下へ伸びる横線*/
.bordercircle span::before{
    left: 0;
    top: 0;
    transition-duration: 0.3s;
}

.btn-small{
    display: inline-block;
    color: #fff;
    background: #890F12;
    text-decoration: none;
    outline: none;
    transition-duration: 1.5s;
    padding: 17px 0;
    width: 170px;
}
.btn-small.btn-blue{
    padding: 12px 0;
    background: #090717;
    margin-top: 1.6rem;
}
.tempo-info dl:nth-of-type(2) dt:hover .btn-small{
    transform: rotateX(360deg);
}
/*----------------------------------------

             駒八のこだわり

----------------------------------------*/
#lead{
    background-image: url("../images/common/texture_washi.jpg");
}
#lead h2{
    text-align: right;
}
#lead h2 img{
    width: 180px;
}
#lead .sub-sec.top{
    margin-top: -90px;
}
#lead .sub-sec_title{
    margin-bottom: 3.2rem;
}
#lead>div:nth-of-type(2) .sub-sec_title{
    text-align: right;
}
#lead .sub-sec_title h3{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 4.0rem;
    font-weight: 700;
    line-height: 1.8em;
    text-shadow: 1px 1px 0 #fff;
    display: inline-block;
    vertical-align: top;
    position: relative;
}
#lead .sub-sec_title h3.h3-1::before{
    content: "";
    display: inline-block;
    position: absolute;
    background-image: url("../images/common/deco_fude1.png");
    background-size: contain;
    background-repeat: no-repeat;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    mix-blend-mode:color-burn;
    width: 63px;
    height: 448px;
}

#lead .sub-sec_title h3.h3-2{
    text-align: left;
}
#lead .sub-sec_title h3.h3-2::before{
    content: "";
    display: inline-block;
    position: absolute;
    background-image: url("../images/common/deco_fude2.png");
    background-size: contain;
    background-repeat: no-repeat;
    bottom: -50px;
    left: -130px;
    mix-blend-mode:color-burn;
    width: 286px;
    height: 98px;
}
#lead .sub-sec_title h3.h3-3::before{
    content: "";
    display: inline-block;
    position: absolute;
    background-image: url("../images/common/deco_fude3.png");
    background-size: contain;
    background-repeat: no-repeat;
    bottom: -50px;
    left: 0;
    mix-blend-mode:color-burn;
    width: 264px;
    height: 154px;
}
#lead .sub-sec_title>img{
    width: 50%;
}
#lead .sub-sec_title>img:nth-child(odd){
    margin-right: 4%;
}
#lead .sub-sec_title>img:nth-child(even){
    margin-left: 4%;
}
#lead .sub-sec_text{
    /* フレックスコンテナであることを指定 */
    display: flex;
    justify-content: center;
    flex-direction:row-reverse 
}
#lead .sub-sec_text p{
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    line-height: 2;
    display: inline-block;
    padding-left: 3em;
    vertical-align: top; 
}
#lead .sub-sec_text p:last-of-type{
    padding-left: 0;
}
#lead .sub-sec_text p span{
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
    text-combine-upright: all;
}
/*----------------------------------------

             お品書き

----------------------------------------*/
#menu{
    background-image: url("../images/common/texture_wood_wave.png");
    background-size: cover;
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
}
#menu h2{
    padding-bottom: 80px;
}
#menu h2 img{
    width: 80%;
    margin-right: 8%;
}
#menu h2 span{
    font-family: 'NSKPHMKF';
    font-size: 4rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding-top: 72px;
}
#menu h2 span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 64px;
    background: #090717;
}
#menu .sub-sec.slide-menu{
    margin-bottom: 8.0rem;
}
#menu .sub-sec div:nth-of-type(2){
    padding-bottom: 40px;
}
#menu .sub-sec div:nth-of-type(2) img{
    padding-right: 3.2rem;
}
#menu .sub-sec div:nth-of-type(3) img{
    padding-left: 3.2rem;
    order: 1;
}
.menu-con{
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-con img{
    width: 50%;
}
.menu-con div p:first-of-type{
    font-size: 2.8rem;
    font-weight: 600;
    text-shadow: 1px 1px 0 #fff;
    position: relative;
}
.menu-con div p:nth-of-type(2){
    margin-top: 4em;
    line-height: 2;
    padding: 0 3.2rem;
}
.menu-con div .menu1-title::before{
    content: "";
    display: inline-block;
    position: absolute;
    background-image: url("../images/common/deco_fude4.png");
    background-size: contain;
    background-repeat: no-repeat;
    bottom: -40px;
    left: 0;
    width: 393px;
    height: 55px;
}
.menu-con div .menu2-title::before{
    content: "";
    display: inline-block;
    position: absolute;
    background-image: url("../images/common/deco_fude5.png");
    background-size: contain;
    background-repeat: no-repeat;
    bottom: -40px;
    right: 0;
    width: 262px;
    height: 90px;
}
.center{
    padding: 2.0rem 0;
    background-image: url("../images/common/texture_asa_navy.jpg");
}
.center li{
	margin-right: 20px;
}
.slick-prev,.slick-next{
    position: absolute;
    width: 18px;
    height: 34.5px;
    top: calc(100% + 0.8rem);
    z-index: 100;
}
.slick-prev{
    left: 2.0rem;
}
.slick-next{
    right: 2.0rem;
}
/*----------------------------------------

             お知らせ

----------------------------------------*/
#news{
    background-image: url("../images/common/texture_washi.jpg");
}
.sub-sec.news{
    display: flex;
    justify-content: center;
    padding: 5.6rem 0;
    background-image: url("../images/home/back_oshirase.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
.sub-sec.news .memo{
    background-color:rgba(255,255,255, 0.6);
    padding: 0 2.4rem 2.4rem;
    width: 50%;
    margin-right: 1.6rem;
    height: 462px;
    overflow-y: scroll;
}
.sub-sec.news .fb-timeline{
    width: 30%;
}
.fb-timeline{
    background-image: url("../images/common/texture_asa_red.jpg");
    text-align: center;
    padding: 1.6rem;
}
.fb-page,
.fb-page span,
.fb-timeline iframe{
  width: 100% !important;
  height: 430px !important;
}
/* -- div#contents-maker-news -- */

div#contents-maker-news * {
	margin: 0;
	padding: 0;
	box-sizing: content-box;
}
div#contents-maker-news div.cm-box {
	padding: 24px 0 8px;
	border-bottom: 1px solid #890F12;
}
div#contents-maker-news dl dt {
	font-weight: bold;
	margin: 0 0 3px;
}
div#contents-maker-news dl dd {
	width: auto;
    word-break:break-all
}
/*----------------------------------------

             アクセス

----------------------------------------*/
#access,#tempo-access{
    background-image: url("../images/common/texture_wood_wave.png");
    background-size: cover;
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
}
.maps-outer{
    background-image: url("../images/common/texture_asa_navy.jpg");
    background-size: cover;
    padding: 1.6rem 0;
}
.maps{
    width: 100%;
    height: 360px;
}
.access-text{
    display: flex;
    justify-content: center;
    padding-top: 3.2rem;
}
.access-text .sub-sec_title{
    width: 20%;
}
.access-text>div:nth-of-type(2){
    width: 78%;
}
.access-text .column-1{
    padding-right: 4.0rem;
}
.access-text dl{
    padding-bottom: 1.6rem;
}
.access-text dl.last-type{
    padding-bottom: 0;
}
.access-text dl dt{
    font-weight: 600;
    line-height: 2;
}
.access-text dl dd{
    line-height: 1.5;
    display: inline-block;
}
.access-text dl dd a:hover{
    opacity: 0.6;
}
.access-text dl dd:first-of-type{
    width: 190px;
}
/*----------------------------------------

             フッター

----------------------------------------*/
#footer a{
    transition: all 0.3s;
}
#footer a:hover{
    opacity: 0.6;
}
.footer-inner{
    background-image: url("../images/common/footer_back.jpg");
    background-size: cover;
    background-position: center;
    padding: 3.2rem;  
}
.footer-container{
    display: flex;
    justify-content:space-between;
}
.footer-container div img{
    width: 140px;
}
.footer-container>div:first-of-type{
    width: 20%;
}
.footer-container .footer-box{
    width: 80%;
    display: flex;
    justify-content: center;
}
.footer-container .footer-box div:first-of-type{
    margin-right: 2.4rem;
    }
.footer-container dl{
    padding-bottom: 1.6rem;
    color: #fff;
}
.footer-container dl a{
    color: #fff;
}
.footer-container dl dt{
    font-family: 'NSKPHMKF';
    line-height: 2;
    font-size: 1.8rem;
} 
.footer-container dl dd{
    line-height: 1.5;
    display: inline-block;
} 
.footer-container dl dd:first-of-type{
    width: 181px;
}
/*========= ページトップのためのCSS ===============*/
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom: 30px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(150px);
    transition: .6s all;
}
#page-top:hover a{
    opacity: 0.6;
}
/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(150px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(150px);
  }
}

/*画像の切り替えと動き*/
#page-top a {
    /*aタグの形状*/
	display: block;
	width: 30px;
	height: 56px;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-family: "Londrina Solid";
    /*背景画像の指定*/
	background: url("../images/common/deco_star_navy2.png") no-repeat center;
	background-size: contain;
}

#page-top.floatAnime a{
	width: 30px;
	height: 56px;
    /*背景画像の指定*/
	background: url("../images/common/deco_star_red.png") no-repeat center;
	background-size: contain;
    /*アニメーションの指定*/
	animation: floatAnime 2s linear infinite;
	opacity: 0;
}

@keyframes floatAnime {
  0% { transform: translateX(0); opacity: 0; }
  25% { transform: translateX(-6px);opacity: 1; }
  50% { transform: translateX(0) }
  100% { transform: translateX(6px);opacity: 1; }
}

/*Page Topと書かれたテキストの位置*/
#page-top span{
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
	color: #090717;
}
#page-top.floatAnime span{
    color: #890F12;
}
.footer-inner>a{
    display: block;
    width: 166px;
    padding: 1.6rem;
    margin: 0 0 0 auto;
    font-size: 1.3rem;
    color: #fff;
    position: relative;
}
.footer-inner>a::before {
    content:"";
    display:inline-block;
    width: 1px;
    height: 28px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.footer-inner>a::after {
    content:"";
    display:inline-block;
    width: 1px;
    height: 28px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
.copyrights{
    display: block;
    text-align: center;
    padding: 12px;
	font-family: "Londrina Solid";
    color: #fff;
    font-size: 1.3rem;
    background-image: url("../images/common/texture_asa_red.jpg");
}
/*----------------------------------------

             店舗一覧

----------------------------------------*/
.page-header{
    background-size: cover;
    height: 196px;
    color: #fff;
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 196px;
}
.page-header.tempo-header{
    background-image: url("../images/top_title/top_tempo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    text-shadow: 1px 1px 0 #090717;
}
#tempo{
    background-image: url("../images/common/texture_washi.jpg");
    padding: 60px 0;
    line-height: 1.5;
}
#tempo div p{
    display: flex;
    justify-content: center;
    padding-bottom: 60px;
}
#tempo .tempo-info{
    padding-bottom: 3.2rem;
    justify-content: center;
    align-items: center;
}
#tempo .tempo-info:last-of-type{
    padding-bottom: 0;
    align-items: flex-start;
}
#tempo .tempo-info img{
    width: 170px;
    height: 143px;
}
#tempo .tempo-info dl:first-of-type{
    width: 50%;
    line-height: 1.5;
    padding: 0 2.4rem 0 1.6rem;
}
#tempo .tempo-info dl:first-of-type dt{
    font-size: 1.8rem;
    font-weight: 500;
    padding-bottom: 0.8rem;
}
#tempo .tempo-info dl:first-of-type dd:first-of-type{
    height: 80px;
}
#tempo .tempo-info dl:first-of-type dd:nth-of-type(2) span{
    display: inline-block;
    background-image: url("../images/common/icon_map.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    margin-left: 1.6rem;
    vertical-align: middle;
}
#tempo .tempo-info dl:nth-of-type(2) dt:nth-of-type(2) span{
    display: inline-block;
    background-image: url("../images/common/icon_tel.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 28px;
    height: 26px;
    margin-right: 0.4rem;
    vertical-align: middle;
}
/*----------------------------------------

             会社情報

----------------------------------------*/
#greeting{
    background-image: url(../images/common/texture_washi.jpg);
}
.page-header.company-header{
    background-image: url("../images/top_title/top_company.jpg");
    text-shadow: 1px 1px 0 #090717;
}
#greeting .ceo-img img{
    width: 230px;
    margin: 0 2.4rem;
}
#greeting .ceo-img p:first-of-type{
    padding: 1.6rem 0;
}
#greeting .ceo-name{
    font-family: 'NSKPHMKF';
    font-size: 3.2rem;
}
#greeting .flex{
    align-items: flex-start;
    justify-content: center;
}
#greeting .greeting-text{
    width: 70%;
}
#greeting .greeting-text p{
    padding-bottom: 2.4rem;
    line-height: 1.5;
}
#greeting .greeting-text p:last-of-type{
    padding-bottom: 0;
}
#greeting .sensi img{
    width: 287px;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
    transition: all 0.3s
}
#greeting .sensi img:hover{
    opacity: 0.8;
}
#greeting .sensi img:active {
    /*ボタンを押したとき*/
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
}
#company-info{
    background-image: url("../images/common/texture_wood_wave.png");
    background-size: cover;
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
}
#company-info .sub-sec{
    max-width: 720px;
}
.info-item{
    display: flex;
    margin-bottom: 2.4rem;
    line-height: 1.5;
}
.info-item:last-of-type{
    margin-bottom: 0;
}
.info-title{
    width: 112px;
    height: 32px;
    line-height: 32px;
    margin-right: 30px;
    color: #fff;
    font-weight: 600;
    background: #090717;
    text-align: center;
}
#company-history{
    background-image: url("../images/common/texture_washi.jpg");
}
#company-history .sub-sec>div{
    display: flex;
    flex-wrap: wrap;
}
#company-history .menu-img {
    width: 50%;
    height: 40vh;
}
#company-history .sub-sec>div:nth-of-type(1) .menu-img-detail {
    background: url("../images/company/enkaku1.jpg") no-repeat center;
    background-size: cover;
}
#company-history .sub-sec>div:nth-of-type(2) .menu-img-detail {
    background: url("../images/company/enkaku2.jpg") no-repeat center;
    background-size: cover;
}
#company-history .sub-sec>div:nth-of-type(3) .menu-img-detail {
    background: url("../images/company/enkaku3.jpg") no-repeat center;
    background-size: cover;
}
#company-history .sub-sec>div:nth-of-type(4) .menu-img-detail {
    background: url("../images/company/enkaku4.jpg") no-repeat center;
    background-size: cover;
}
#company-history .sub-sec>div:nth-of-type(5) .menu-img-detail {
    background: url("../images/company/enkaku5.jpg") no-repeat center;
    background-size: cover;
}
#company-history .menu-img-detail {
    height: 40vh;
}
#company-history .menu-content {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#company-history .menu-box {
    animation-delay: .5s;
}
#company-history .menu-box h4 {
    font-family: 'NSKPHMKF';
    font-size: 3.2rem;
    color: #890F12;
    padding-bottom: 4.0rem;
}
#company-history .menu-box p{
    line-height: 1.5;
} 
#company-history .sub-sec>div:nth-of-type(2n) {
    flex-direction: row-reverse;
}
#company-history .sub-sec>div:nth-of-type(2n) .menu-box{
    text-align: right;
}
.blur {
    animation-name: blurAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
.blurTrigger {
    opacity: 0;
}
.lineTrigger {
    position: relative;
    opacity: 0;
}
.lineTrigger.lineanime {
    animation-name: lineAnimeBase;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}
@keyframes lineAnimeBase{
    from {
    opacity:0;
    }

    to {
    opacity:1;  
    }
}
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content: '';
  width:0;
  height:1px;
  background:#090717;/* 枠線の色*/
}
.line2::before,
.line2::after{
  position: absolute;
  content: '';
  width: 1px;
  height:0;
  background:#090717;/* 枠線の色*/
}
.lineTrigger::before {
	top:0;
	left:0;
}
.lineTrigger.lineanime::before {
	animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}
.line2::before{ 
	top:0;
	right:0;
}
.lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}
.lineTrigger::after { 
	bottom:0;
	right:0;
}

.lineTrigger.lineanime::after {
	animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}
.line2::after{ 
	bottom:0;
	left:0;
}
.lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
	0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
	0% {height:0%;}
    100%{height:100%;}
}
.lineTrigger.lineanime .lineinappear{
	animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0;/*初期値を透過0にする*/	
}

@keyframes lineInnerAnime{
	0% {opacity:0;}
    100% {opacity:1;}
}
/*----------------------------------------

             プライバシーポリシー

----------------------------------------*/
#pp{
    background-image: url("../images/common/texture_wood_wave.png");
    background-size: cover;
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
}
.page-header.pp-header{
    background-image: url("../images/top_title/top_pp.jpg");
    text-shadow: 1px 1px 0 #090717;
}
#pp .sub-sec{
    line-height: 1.5;
}
#pp .sub-sec>p:first-of-type{
    padding: 8.0rem 0 4.0rem 0;
}
#pp .sub-sec ol{
    list-style-type: decimal;
    padding: 0 2.4rem;
}
#pp .sub-sec ol li{
    padding-bottom: 4.0rem;
}
#pp .sub-sec .text-box{
    text-align: right;
    padding-top: 4.0rem;
}
#pp .sub-sec .text-box p{
    display: inline-block;
    text-align: left;
    line-height: 2;
}
#pp .sub-sec .text-box p a:hover{
    opacity: 0.6;
}
/*--------------------------------------
*　　　　　PC画面幅1180px以下メディアクエリ
*
----------------------------------------*/
@media screen and (max-width:1180px){
    .br-pc.br-pc2{
        display: none;
    }
    .wrapper.wrapper2{
        padding: 0 2.4rem;
    }
    #lead .sub-sec_text p{
        line-height: 1.5;
        padding-left: 2em;
    }
    #lead .sub-sec_title h3{
        font-size: 3.2rem;
        line-height: 1.5em;
    }
    .menu-con div .menu1-title::before{
        width: 295px;
        height: 41.3px;
    }
    .menu-con div .menu2-title::before{
        width: 175px;
        height: 60px;
    }
    .menu-con div p:nth-of-type(2){
        line-height: 1.5;
        padding: 0 1.6rem;
    }
    #menu .sub-sec div:nth-of-type(2) img{
        padding-right: 1.6rem;
    }
    #menu .sub-sec div:nth-of-type(3) img{
        padding-left: 1.6rem;
    }
    .menu-con div p:first-of-type{
        font-size: 2.0rem;
    }
    .access-text .sub-sec_title{
        width: 15%;
    }
    .access-text>div:nth-of-type(2){
        width: 85%;
    }
    .access-text .column-1{
        padding-right: 2.4rem;
    }
    .maps-btn .btn{
        width: 210px;
    }
}
    /*--------------------------------------
     *　　　　　PC画面幅1148px以下メディアクエリ
     *
    ----------------------------------------*/
@media screen and (max-width:1148px){
    .access-text .sub-sec_title{
        width: 30%;
    }
    .access-text>div:nth-of-type(2){
        width: 50%;
    }
    #greeting .ceo-img img{
        width: 160px;
        margin: 0 1.6rem;
    }
    #footer{
        font-size: 1.4rem;
    }
    .footer-container>div:first-of-type{
        width: 10%;
    }
    .footer-container .footer-box{
        width: 90%;
    }
    .footer-container .footer-box div:first-of-type{
        margin-right: 1.6rem;
    }
    .footer-container dl dd:first-of-type {
        width: 160px;
    }
}
    /*--------------------------------------
     *　　　　　PC画面幅960px以下メディアクエリ
     *
    ----------------------------------------*/
@media screen and (max-width:960px){
    body{
        font-size: 1.4rem;
    }
    .br-pc{
        display: none;
    }
    /*----------------------------------------

                 ボタン

    ----------------------------------------*/
    .btn-small{
        padding: 10px 0;
        width: 150px;
    }
    .btn-small.btn-blue{
        margin-top: 0;
        padding: 8px 0;
    }
    /*----------------------------------------

                 駒八のこだわり

    ----------------------------------------*/
    #lead h2{
        text-align: center;
        padding-top: 40px;
    }
    #lead h2 img{
        width: 111px;
    }
    #lead .sub-sec.top{
        margin-top: 40px;
    }
    #lead .sub-sec_title h3{
        font-size: 2.4rem;
    }
    #lead .sub-sec_title h3.h3-1::before{
        width: 33px;
        height: 233px;
        top: -24px;
    }
    #lead .sub-sec_title h3.h3-2::before{
        left: -30px;
        width: 119px;
        height: 42px;
    }
    #lead .sub-sec_title h3.h3-3::before{
        width: 99px;
        height: 58px;
    }
    #lead .sub-sec_title>img{
        width: 68%;
    }
    #lead .sub-sec_title>img:nth-child(odd){
        margin-right: 2%;
    }
    #lead .sub-sec_title>img:nth-child(even){
        margin-left: 2%;
    }
    #lead .sub-sec_text{
        /* フレックスコンテナであることを指定 */
        display: block;
    }
    #lead .sub-sec_text p{
        writing-mode: initial;
        padding-left: 0;
        padding-bottom: 2em;
        line-height: 1.8;
    }
    #lead .sub-sec_text p:last-of-type{
        padding-left: 0;
        padding-bottom: 0;
    }
    #menu h2 span{
        font-size: 3rem;
        padding-top: 46px;
    }
    #menu h2 span::before {
        height: 38px;
    }
    .menu-con div .menu1-title::before{
        width: 200px;
    }
    /*----------------------------------------

                 アクセス

    ----------------------------------------*/
    #access .flex,#tempo-access .flex{
        justify-content: center;
    }
    #access .flex.wrap,#tempo-access .flex.wrap{
        flex-wrap: wrap;
    }
    .access-text{
        display: block;
        padding-top: 2.4rem;
    }
    .access-text .sub-sec_title{
        width: 100%;
    }
    .access-text>div:nth-of-type(2){
        width: 100%;
    }
    .access-text .column-1{
        padding-right: 1.6rem;
    }
    .access-text dl dd{
        display: block;
    }
    .access-text dl dd:first-of-type{
        width: 158px;
    }
    .maps-btn{
        width: 100%;
        padding-top: 4.8rem;
        text-align: center;
    }
    
    /*----------------------------------------

                 店舗一覧

    ----------------------------------------*/
    .page-header{
        height: 223px;
        font-size: 2.8rem;
        line-height: 223px;
    }
    .page-header.tempo-header{
        background-image: url("../images/top_title/top_tempo_sp.jpg");
        background-position: center;
    }
    #tempo div p{
        padding-bottom: 40px;
    }
    #tempo .tempo-info{
        flex-wrap: wrap;
    }
    #tempo .tempo-info dl:nth-of-type(2){
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 2.4rem;
    }
    #tempo .tempo-info dl:nth-of-type(2) dt:first-of-type{
        margin-right: 0.8rem;
    }
    #tempo .tempo-info img{
        width: 40%;
        height: auto;
    }
    #tempo .tempo-info dl:first-of-type{
        line-height: 1.3;
        width: 60%;
        padding: 0 0 0 1.6rem;
    }
    #tempo .tempo-info dl:first-of-type dt{
        font-size: 1.6rem;
        padding-bottom: 0.4rem;
    }
    #tempo .tempo-info dl:first-of-type dd:first-of-type{
        height: 78px;
    }
    #tempo .tempo-info dl:first-of-type dd:nth-of-type(2) span{
        width: 20px;
        height: 20px;
        margin-left: 0.8rem;
    }
    #tempo-access .flex {
        justify-content: center;
    }
    #tempo-access .flex.wrap {
        flex-wrap: wrap;
    }
    /*----------------------------------------

                 フッター

    ----------------------------------------*/
    .footer-inner{
        background-image: url("../images/common/footer_back_sp.jpg");
        background-size: cover;
        background-position: center;
        padding: 3.2rem 1.6rem;
    }
    .footer-container div img{
        width: 100%;
    }
    .footer-container>div:first-of-type{
        padding-right: 0.4rem;
    }
    .footer-container .footer-box{
        display: block;
        width: 73%;
    }
    .footer-container dl{
        padding-bottom: 1.6rem;
        color: #fff;
    }
    .footer-container dl dt{
        font-size: 1.6rem;
    }
    .footer-inner>a::before {
        height: 24px;
    }
    .footer-inner>a::after {
        height: 24px;
    }
    .footer-container>div:first-of-type {
        width: 20%;
    }
}
/*--------------------------------------
 *　　　　　タブレット用メディアクエリ
 *
----------------------------------------*/
@media screen and (max-width:807px){
    .sp-img{
        display: block;
    }
    .pc-img{
        display: none;
    }
    .br-pc{
        display: none;
    }
    .wrapper{
        padding: 0 24px;
    }
    .display_sp{
        display: block;
    }
    /*--- 線から塗り（共通設定） ---*/
    .btn{
        padding: 18px 28px;
        font-size: 1.8rem;
    }
    /*----------------------------------------

             ローディング

    ----------------------------------------*/
    /* Loading アイコンの大きさ設定　*/
    #splash_logo svg{
        width: 200px;
    }
    #content-area{
        padding: 0;
    }
    #header{
        display: none;
    }
    /*----------------------------------------

             グローバルナビゲーション

    ----------------------------------------*/
    #main-nav{
        z-index: 1000;
        position: fixed;
        top: 7px;
        right: 14px;
        background-image: initial;
    }
    #g-nav{
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position:fixed;
        z-index: 999;
        /*ナビのスタート位置と形状*/
        top:0;
        left: -120%;
        width:100%;
        height: 100vh;/*ナビの高さ*/
        /*動き*/
        transition: all 0.6s;
        background-image: url("../images/common/texture_asa_navy.jpg");
        /*動き*/
    }
    /*アクティブクラスがついたら位置を0に*/
    #g-nav.panelactive{
        left: 0;
    }
    #g-nav>ul{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    #g-nav>ul>li.has-child ul{
        display: none;
    }
    /*hoverしたら表示*/
    #g-nav>ul>li.has-child:hover > ul{
      opacity: 0;
    }
    #g-nav>ul>li.current>a{
        color: #fff;
    }
    #g-nav>ul>li.current a::before{
        top: 50%;
        left: 0;
        width: 16px;
        height: 1px;
        background: #fff;
        animation: gnavipathmove 2.4s ease-in-out infinite;
        opacity: 0;
    }
    /*高さ・位置・透過が変化して線が上から下に動く*/
    @keyframes gnavipathmove{
        0%{
            width:0;
            left:0;
            opacity: 0;
        }
        30%{
            width:16px;
            opacity: 1;
        }
        100%{
            width:0;
            left: 28px;
            opacity: 0;
        }
    }
    #g-nav>ul>li{
        text-align: center;
    }
    #g-nav>ul>li>a{
        padding: 0;
        margin-bottom: 4.0rem;
        color: #fff;
    }
    #g-nav>ul>li:nth-of-type(4)>a{
        margin-bottom: 8.0rem;
    }
    #g-nav>ul>li.display_sp.sns{
        margin-bottom: 8.0rem;
    }
    #g-nav>ul>li:first-of-type a img{
        margin-bottom: 8.0rem;
    }
    .sns-link li{
        padding-right: 1.6em;
    }
    /*========= ボタンのためのCSS ===============*/
    .openbtn{
        display: block;
        position:fixed;
        top: 11.5px;
        left: 14px;
        z-index: 9999;/*ボタンを最前面に*/
        width: 45px;
        height: 45px;
        padding: 6px 8.5px;
        cursor: pointer;
	    overflow: hidden;/*ジャンプしてはみ出た要素を消す*/
        background-color: #090717;
    }
    /*×に変化*/	
    .openbtn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        height: 2px;
        border-radius: 2px;
        width: 28px;
        background-color: #fff;
      }
    .openbtn span:nth-of-type(1) {
        top: 11px;	
    }
    .openbtn span:nth-of-type(2) {
        top: 21.5px;
    }
    .openbtn span:nth-of-type(3) {
        bottom: 11px;
	}
    .openbtn.active{
        background-color: transparent;
    }
    .openbtn.active span:nth-of-type(1) {
        transform: rotate(45deg);
	    top: 21.5px;
    }
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    .openbtn.active span:nth-of-type(3){
        transform: rotate(-45deg);
        bottom: 21.5px;
    }
    /*----------------------------------------

             メインビジュアル

    ----------------------------------------*/
    #slider{
        height: 100vh;
    }
    #slider img{
        width: 236px;
    }
    /*----------------------------------------

                 セクション

    ----------------------------------------*/
    section{
        padding-bottom: 7.2rem;
    }
    .sub-sec_title.common img{
        width: 34px;
    }
    .sub-sec_title.common h3{
        font-size: 2.0rem;
        padding-bottom: 3.2rem;
    }
    .sub-sec{
        margin-bottom: 4.8rem;
    }
    h2.common{
        font-size: 2.4rem;
        padding: 7.2rem 0;
    }
    h2.common::before{
        width: 83px;
        height: 97px;
    }
    
    
    /*----------------------------------------

                 会社情報

    ----------------------------------------*/
    .page-header.company-header{
        background-image: url("../images/top_title/top_company_sp.jpg");
        background-position: center;
    }
    #greeting .ceo-img{
        text-align: center;
        padding-bottom: 4.0rem;
    }
    #greeting .ceo-img img{
        width: 188px;
        margin: 0;
    }
    #greeting .ceo-img p:first-of-type{
        padding: 0.8rem 0;
    }
    #greeting .ceo-name{
        font-size: 2.8rem;
    }
    #greeting .flex{
        display: block;
    }
    #greeting .greeting-text{
        width: 100%;
    }
    #greeting .greeting-text p{
        padding-bottom: 1.6rem;
    }
    .info-title{
        width: 92px;
        height: 27px;
        line-height: 27px;
        margin-right: 1.6rem;
    }
    .info-detail{
        width: 65%;
    }
    #company-history .menu-img {
        height: 20vh;
    }
    #company-history .menu-img-detail {
        height: 20vh;
    }
    #company-history .menu-box h4 {
        font-size: 2.4rem;
        padding-bottom: 3.2rem;
    }
    /*----------------------------------------

                 プライバシーポリシー

    ----------------------------------------*/
    .page-header.pp-header{
        background-image: url("../images/top_title/top_pp_sp.jpg");
    }
    #pp .sub-sec>p:first-of-type{
        padding: 5.6rem 0 2.4rem 0;
    }
    #pp .sub-sec ol{
        padding: 0 1.6rem;
    }
    #pp .sub-sec ol li{
        padding-bottom: 2.4rem;
    }
    #pp .sub-sec .text-box{
        padding-top: 3.2rem;
    }
    #pp .sub-sec .text-box p{
        line-height: 1.8;
    }
}
/*--------------------------------------
 *　　　　　スマホ用メディアクエリ
 *
----------------------------------------*/
@media screen and (max-width:479px){
    #lead .sub-sec_title h3{
        font-size: 2rem;
    }
    .footer-container dl dd:first-of-type{
        width: inherit;
    }
    .br-sp{
        display: block;
    }
    /*----------------------------------------

                 お品書き

    ----------------------------------------*/
    #menu h2{
        padding-bottom: 4.0rem;
    }
    #menu h2 img{
        margin-right: 7%;
    }
    #menu h2 span{
        font-size: 2.4rem;
        padding-top: 24px;
    }
    #menu h2 span::before {
        width: 1px;
        height: 20px;
    }
    #menu .sub-sec.slide-menu{
        margin-bottom: 6.4rem;
    }
    #menu .sub-sec div:nth-of-type(2){
        padding-bottom: 4.8rem;
    }
    #menu .sub-sec div:nth-of-type(2) img{
        padding-right: 0;
    }
    #menu .sub-sec div:nth-of-type(3) img{
        padding-left: 0;
    }
    .menu-con{
        display: block;
    }
    .menu-con img{
        width: 100%;
    }
    .menu-con div p:first-of-type{
        font-size: 1.8rem;
    }
    .menu-con div p:nth-of-type(2){
        margin-top: 4.0rem;
        padding: 0;
        line-height: 1.8;
    }
    .menu-con div .menu1-title,.menu2-title{
        text-align: center;
        margin-top: 4rem;
    }
    .menu-con div .menu1-title::before{
        bottom: -26px;
        left: 50%;
        transform: translateX(-50%);
        width: 245px;
        height: 34px;
    }
    .menu-con div .menu2-title::before{
        bottom: -10px;
        right: 26px;
        width: 124px;
        height: 42px;
    }
    .center{
        padding: 1.6rem 0;
    }
    .center li{
        margin-right: 1.6rem;
    }
    .slick-prev,.slick-next{
        width: 13px;
        height: 24.5px;
    }
    /*----------------------------------------

             お知らせ

    ----------------------------------------*/
    .sub-sec.news{
        background-image: url("../images/home/back_oshirase_sp.jpg");
        background-attachment: scroll;
        padding: 3.2rem 0;
        flex-wrap: wrap;
    }
    .sub-sec.news .memo{
        width: 90%;
        margin-right: 0;
        margin-bottom: 1.6rem;
    }
    .sub-sec.news .fb-timeline{
        width: 90%;
    }
}