@charset "utf-8";

* {
	box-sizing: border-box;

}

body {
	margin: 0;
	font-family: 'Kiwi Maru', serif;
	font-size: calc(12px + 0.5vw);
}

@media(min-width:961px) {
	.sponly {
		display: none !important;
	}
}

@media(max-width:960px) {
	.pconly {
		display: none !important;
	}
}

@media(min-width:561px) {
	.show_sp {
		display: none !important;
	}
}

@media(min-width:961px) {
	.show_sptb {
		display: none !important;
	}
}

@media(max-width:560px) {
	.show_tbpc {
		display: none !important;
	}
}

@media(max-width:960px) {
	.show_pc {
		display: none !important;
	}
}

/*変数*/
:root {
	--basecolor: #edffe9;
	/*基本色*/
	--sabcolor: #f2ffec;
	/*サブカラー*/

}

img {
	max-width: 100%;
	vertical-align: bottom;
}


p {
	margin: 0
}

h3 {
	margin: 0;
}

a {

	text-decoration: none;

}

a:visited {}

a:hover {
	/*filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;*/
}

.tac {
	text-align: center;
}

.tal {
	text-align: left;
}

.tar {
	text-align: right;
}

.mg0 {
	margin: 0 auto;
}


.margin1 {
	margin: 10px
}

.margin2 {
	margin: 20px
}

.margin3 {
	margin: 30px
}

.margin4 {
	margin: 40px
}

.margin5 {
	margin: 50px
}

.mgb1 {
	margin-bottom: 10px
}

.mgb2 {
	margin-bottom: 20px
}

.mgb3 {
	margin-bottom: 30px
}

.mgb4 {
	margin-bottom: 40px
}

.mgb5 {
	margin-bottom: 50px
}

.mgt1 {
	margin-top: 10px
}

.mgt2 {
	margin-top: 20px
}

.mgt3 {
	margin-top: 30px
}

.mgt4 {
	margin-top: 40px
}

.mgt5 {
	margin-top: 50px
}

.mgl1 {
	margin-left: 10px
}

.mgl2 {
	margin-left: 20px
}

.mgl3 {
	margin-left: 30px
}

.mgl4 {
	margin-left: 40px
}

.mgl5 {
	margin-left: 50px
}

.mgr1 {
	margin-right: 10px
}

.mgr2 {
	margin-right: 20px
}

.mgr3 {
	margin-right: 30px
}

.mgr4 {
	margin-right: 40px
}

.mgr5 {
	margin-right: 50px
}

.n_mgt5 {
	margin-top: 5%
}

.padding1 {
	padding: 10px
}

.padding2 {
	padding: 20px
}

.padding3 {
	padding: 30px
}

.padding4 {
	padding: 40px
}

.padding5 {
	padding: 50px
}

.pdt1 {
	padding-top: 10px
}

.pdt2 {
	padding-top: 20px
}

.pdt3 {
	padding-top: 30px
}

.pdt4 {
	padding-top: 40px
}

.pdt5 {
	padding-top: 50px
}

.pdt6 {
	padding-top: 60px
}

.pdt7 {
	padding-top: 70px
}

.pdt8 {
	padding-top: 80px
}

.pdt9 {
	padding-top: 90px
}

.pdt10 {
	padding-top: 100px
}

.pdb1 {
	padding-bottom: 10px
}

.pdb2 {
	padding-bottom: 20px
}

.pdb3 {
	padding-bottom: 30px
}

.pdb4 {
	padding-bottom: 40px
}

.pdb5 {
	padding-bottom: 50px
}

.pdb6 {
	padding-bottom: 60px
}

.pdb7 {
	padding-bottom: 70px
}

.pdb8 {
	padding-bottom: 80px
}

.pdb9 {
	padding-bottom: 90px
}

.pdb10 {
	padding-bottom: 100px
}

.pdr5 {
	padding-right: 30%;

}

.pokipoki span{
	display:inline-block;
}

/*----------
特殊例
-----------*/
/*----------
マーカー下線
----------*/
.marker_line {
	background: linear-gradient(transparent 60%, var(--basecolor) 0%);
}

.marker_line_oreng {
	background: linear-gradient(transparent 50%, #ffd95d9f 50%);
}

/*---------
 題字下下線
 ----------*/
.hr-green {
	border-top: 2px solid #3ca27e;
	width: 80px;
}

/*--------------
矢印が右に移動する
----------------*/
.btnarrow4 {
	/*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
	/*形状*/
	display: block;
	color: #333;
	text-decoration: none;
	outline: none;
}

/*矢印と下線の形状*/
.btnarrow4::before {
	content: '';
	/*絶対配置で下線の位置を決める*/
	position: absolute;
	bottom: -8px;
	left: 0;
	/*下線の形状*/
	width: 60%;
	height: 1px;
	background: #333;
	/*アニメーションの指定*/
	transition: all .3s;
}

.btnarrow4::after {
	content: '';
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	bottom: -3px;
	right: 40%;
	/*矢印の形状*/
	width: 15px;
	height: 1px;
	background: #333;
	transform: rotate(35deg);
	/*アニメーションの指定*/
	transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow4:hover::before {
	left: 10%;
}

.btnarrow4:hover::after {
	right: 30%;
}

/*-------------
ボタン共通設定
--------------*/
.btn06 {
	/*矢印の基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	color: #000000;
	padding: 10px 40px 10px 30px;
	text-align: right;
	outline: none;
	border: 1px solid #83e66d;
	background-color: #83e66d;
	/*アニメーションの指定*/
	transition: ease .2s;
}

.btn06:hover {
	background-color: #cbfcdb;
	border: 1px solid #cbfcdb;
}

/*--------------
矢印が右に移動
--------------*/
.btnarrow1::after {
	content: '';
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 42%;
	right: 20px;
	/*矢印の形状*/
	width: 5px;
	height: 5px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(45deg);
	/*アニメーションの指定*/
	transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow1:hover::after {
	right: 11px;
}

/*------------
きらっと光る
------------*/
.btnshine {
	/*キラッと光る基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	display: inline-block;

	color: #fff;
	padding: 10px 20px;
	text-decoration: none;
	outline: none;
	overflow: hidden;
}

/*キラッと光る*/
.btnshine::before {
	content: '';
	/*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
	top: 0;
	left: -75%;
	/*キラッと光る形状*/
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
	transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.btnshine:hover::before {
	animation: shine 0.7s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

/*-------------
 文字animation
-------------*/
@-webkit-keyframes passing-bar {
	0% {
		left: 0;
		right: auto;
		width: 0;
	}

	50% {
		left: 0;
		right: auto;
		width: 100%;
	}

	51% {
		left: auto;
		right: 0;
		width: 100%;
	}

	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}

@keyframes passing-bar {
	0% {
		left: 0;
		width: 0;
	}

	50% {
		left: 0;
		width: 100%;
	}

	51% {
		left: 0;
		width: 100%;
	}

	100% {
		left: 100%;
		width: 0;
	}
}

@-webkit-keyframes passing-txt {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes passing-txt {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* css */
.passing .passing-box {
	display: block;
	text-align: center;
}

.passing .passing-bar {
	position: relative;
	display: inline-block;
	/*　後ほど解説　*/
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.passing .passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	/* 任意の値 */
	background: #11b319;
}

.passing .passing-txt {
	opacity: 0;
	/* 後ほど解説 */
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	/* 任意の値 */
	font-size: 3vw;
	font-weight: bold;
	line-height: 1.5;
}

.passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
	animation: passing-bar 1s ease 0s 1 normal forwards;
}

.passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
	animation: passing-txt 0s ease .5s 1 normal forwards;
}



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

.flex {
	display: flex;
}

.flex_wrap_reverse {
	display: flex;
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

/*--------------------------------
       ここまでtemplate
---------------------------------*/
/*--------- top 幅規定とか--------*/

.top_menu_bar {
	background: url(../img/back01.jpg);
	border-top: 15px solid #cb2f33;
}

.index_logo {
	text-align: center;
	margin: 20px auto;
}

.index_logo img {
	width: 40%;
}


/*--------- menu bar css --------*/

.menu_back {
	position: relative;

}



.menu_box {
	font-size: 1.4vw;
	list-style: none;
	padding: 10px 0;
	margin: 0;
	display: flex;
	background: #cb2f33;
	color: #fff;
	align-items: center;
	justify-content: center;
}

.menu_box li {
	position: relative;

}

.menu_box li:nth-child(1),
.menu_box li:nth-child(2),
.menu_box li:nth-child(3) {
	margin-right: 4em;
}

.menu_box li:nth-child(1)::after,
.menu_box li:nth-child(2)::after,
.menu_box li:nth-child(3)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	margin: 0 -2em;
	width: 1px;
	height: 50%;
	background: #fff;
}

.menu_box a {
	color: #fff;
	transition: .3s;
}

.menu_box a:hover {
	color: #000;
}

/*slide*/
#slid {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*-----*/


/*ハンバーガーメニュー*/
/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive {
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position: fixed;
	z-index: 999;
	top: 0;
	width: 100%;
	height: 100vh;
}

/*丸の拡大*/
.circle-bg {
	position: fixed;
	z-index: 3;
	/*丸の形*/
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #f6ead2;
	/*丸のスタート位置と形状*/
	transform: scale(0);
	/*scaleをはじめは0に*/
	left: -50px;
	top: -50px;
	transition: all .6s;
	/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive {
	transform: scale(50);
	/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list {
	display: none;
	/*はじめは表示なし*/
	/*ナビの数が増えた場合縦スクロール*/
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list {
	display: block;
	/*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
	opacity: 0;
	/*はじめは透過0*/
	/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
	position: absolute;
	z-index: 999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
	opacity: 1;
	padding: 0;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li {
	animation-name: gnaviAnime;
	animation-duration: 1s;
	animation-delay: .2s;
	/*0.2 秒遅らせて出現*/
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes gnaviAnime {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}


/*リストのレイアウト設定*/
#g-nav li {
	text-align: center;
	list-style: none;
}

#g-nav li a {
	color: #333;
	text-decoration: none;
	padding: 10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

.sp_menu_logo{
	position:absolute;
	top: 20%;
    left: 50%;
    width: 80%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}



/*========= ボタンのためのCSS ===============*/
.openbtn {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 9999;
	/*ボタンを最前面に*/
	cursor: pointer;
	width: 50px;
	height: 50px;
}

/*×に変化*/
.openbtn span {
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 14px;
	height: 3px;
	border-radius: 2px;
	background-color: #cb2f33;
	width: 65%;
}

.openbtn span:nth-of-type(1) {
	top: 15px;
}

.openbtn span:nth-of-type(2) {
	top: 29px;
}

.openbtn span:nth-of-type(3) {
	bottom: 3px;
}

.openbtn span:nth-of-type(4) {
	background: none;
	bottom: 0;
	color: #cb2f33;
	font-size: 13px;
}

.openbtn.active span:nth-of-type(1) {
	top: 20px;
	left: 13px;
	transform: translateY(6px) rotate(-45deg);
	width: 65%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
	top: 32px;
	left: 13px;
	transform: translateY(-6px) rotate(45deg);
	width: 65%;
}





/*----------- 横からでてくるやつ -------------*/
/*#sslink{
	cursor: pointer;
    position: fixed;
    z-index: 9999;

}
#sslink a:first-child{
	display: block;
	width: 150px;
	border-left:6px solid #ffc65d;
	background-color: #fffde6;
	padding: 20px ;
	margin-bottom: 50px;
}
#sslink a:nth-child(2){
	display: block;
	width: 150px;
	border-left:6px solid #ff5555;
	background-color: #ffeee7;
	padding: 20px ;
}
#sslink a{
	transition: all 0.2s;
}
#sslink a:hover{
	transform: translate(-50px, 0);
}*/


/*----------- contentsここから --------------*/
/*共通*/
.section_box {
	position: relative;
	padding: 30px 0;
}

.section_box.back01 {
	background: url(../img/back01.jpg);
	padding: 120px 0;
}

.section_box.back02 {
	background: url(../img/back02.jpg);
	padding: 120px 0;
}

.contents_wrap {
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}



/*導線リンク*/
.hiro_image {
	position: relative;
}

.dousen {
	justify-content: space-around;
	display: flex;
}

.dousen {
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: 2;
}

.dousen a:first-child {
	margin: 0 100px 0 0px;
}





/*イントロ*/
/*.intro_back.section_box.back01 {
	padding: 180px 0 120px;
}*/
.intro_back.section_box.back01 {
	padding: 140px 0 120px;
}

.intoro_box {
	position: relative;
	background: #fff;
	padding: 150px 20px 150px;
	text-align: center;
	margin: 100px 0 20px;
	z-index: 2;
	border-radius: 10px;


}

.intoro_box::after {
	content: "MIHARAYAKI";
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	position: absolute;
	top: -180px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	font-size: 12.5rem;
	color: #fff;
	z-index: -4;


}

.intoro_box::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background: url(../img/sukashi.png) no-repeat;
	background-size: contain;
	background-position: center center;
	width: 90%;
	height: 90%;
	z-index: -4;

}

.intoro_box p {
	margin: 40px 0;
	font-size: 130%;
	z-index: 10;
}

.intro_d01 {
	position: absolute;
	top: -70px;
	left: -100px;
}

.intro_d02 {
	position: absolute;
	top: 25%;
	left: -6vw;
	width: 13vw;
	max-width:260px;
	animation: furifuri 2s infinite;
}

@keyframes furifuri {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(0deg);
	}

	51% {
		transform: rotate(5deg);
	}

	99% {
		transform: rotate(5deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

.intro_d03 {
	position: absolute;
	bottom: -10%;
	left: -150px;
	overflow: hidden
}

.intro_d04 {
	position: absolute;
	top: -20%;
	right: 130px;
	width: 10vw;
	transform-origin: center bottom;
	animation: yurayura 2s linear infinite;
}

@keyframes yurayura {

	0%,
	100% {
		transform: rotate(10deg);
	}

	50% {
		transform: rotate(-10deg);
	}
}

.intro_d05 {
	position: absolute;
	top: 7%;
	right: calc(-12vw + 5em);
	width: 15vw;
	max-width: 350px;
}

.intro_d06 {
	position: absolute;
	bottom: -4%;
	right: -3vw;
	width: 17vw;
	max-width: 440px;
	animation: katakata 6s infinite ease-in-out alternate;
}

@keyframes katakata {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	21% {
		transform: translate(0, 0) rotate(0deg);
	}

	22% {
		transform: translate(0, 0) rotate(-3deg);
	}

	23% {
		transform: translate(0, -1px) rotate(0deg);
	}

	24% {
		transform: translate(0, -1px) rotate(3deg);
	}

	25% {
		transform: translate(1px, 0) rotate(-2deg);
	}

	26% {
		transform: translate(0, 1px) rotate(0deg);
	}

	27% {
		transform: translate(0, 0) rotate(3deg);
	}

	28% {
		transform: translate(0, 0) rotate(0deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

.intro_d07 {
	position: absolute;
	bottom: -20%;
	right: 35%;
}

.banner_wrap{
	text-align:center;
	margin: 0 auto 130px;
}

/*news_box*/
.news_box_wrap {
	padding: 0px 0 0px;
	max-width: 800px;
	margin: 0 auto 250px;
	font-weight: bold;
	position: relative;
}

.news_box_wrap h5 {
	margin: 0;
	font-size: 120%;
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.news_box_wrap ul {
	list-style: none;
	padding: 10px;
	margin: 0;
	border-radius: 10px;
	background: #fff;

}

.news_box_wrap ul li span {
	color: #cb2f33;
	display: inline-block;
	margin-right: 10px;
}

.news_box_wrap ul li a {
	display: block;
	color: #000;

}
/*ニュース1行の周りの余白*/
.slider a{
    display: block;
    background:#fff;
    padding:20px;
}

/*日付*/
/*ニュース1行の周りの余白*/


/*日付*/

/*768px以下の見た目 ※1行のままにしたい場合は不要　*/
/*@media screen and (max-width:768px) {
    .slider {
        padding:20px;
        background:#fff;
    }

    .slider li {
        border-bottom:1px dashed #ccc;
    }

    .slider li:last-child {
        border-bottom:none;
    }
    .slider span {
        display:block;
		padding-bottom:10px;
    }
}*/
.more_link {
	position: absolute;
	width: 7em;
	padding: 3px 4px 7px;
	right: 10px;
	bottom: 10px;
	text-align: center;
	font-size: 85%;
	display: inline-block;
	background-color: #cb2f33;
	color: #fff;
	border-radius: 3px;
}






/*store*/
.border_box {
	position: relative;
	border: 3px solid #000;
}

.border_box .store_title {
	font-size: 50px;
	border-left: 20px solid #000;
	padding-left: 10px;
}

.border_box .store_title span {
	font-size: 15px;
	display: block;
	letter-spacing: 3px;
}

.border_box.sanzyo{
	margin-top: 150px;
}
.border_box.sanzyo .store_links div {
	margin-bottom: 0;
}
.store_links.flex-wrap {
	justify-content: space-evenly;
}

.store_links {
	padding: 50px 10px;
}

.store_links div {
	width: 28%;
	height: auto;
	text-align: center;
	margin-bottom: 10%;
}

.store_links div a {
	display: block;
	overflow: hidden;
	border-radius: 100%;
	border: 10px solid #fff;
	transition: all 0.3s;
}

.store_links div a img {
	vertical-align: top;
	transition: all 0.3s;
}

.store_links div a:hover img {
	transform: scale(1.2);
}

.store_links div p {
	font-size: 25px;
	margin-top: 10px;
}

.sub_name {
	display: block;
	font-size: 60%;
}

.not_link {
	opacity: 0.8;
	pointer-events:none;
}

.not_link img {
	/* display: block; */
	/* overflow: hidden; */
	/* line-height: 0; */
	/* border-radius: 100%; */
	/* border: 10px solid #fff; */
}

/*店舗一覧のとこの飾り*/
.store_d01 {
	position: absolute;
	bottom: -40px;
	right: -30px;
	width: 9vw;
}

.store_d02 {
	position: absolute;
	bottom: -40px;
	left: -70px;
	width: 17vw;
}

.store_d03 {
	position: absolute;
	top: 30px;
	right: 60px;
}

/*mapの見出し*/

.midashi_line {
	position: relative;
	text-align: center;
	color: #cb2f33;
	font-size: 200%;
}

.midashi_line span {
	position: relative;
	z-index: 1;
	display: inline-block;
	max-width: 70%;
	padding: 0 20px;
	background: url(../img/back01.jpg);
	text-align: left;
}

.midashi_line::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #000;
	background: -webkit-linear-gradient(-45deg, transparent, #000 10%, #000 90%, transparent);
	background: linear-gradient(-45deg, transparent, #000 10%, #000 90%, transparent);
}

/*map*/
.sentence {
	margin: 20px 0;
}

/*banner*/
.flex.link_banner a {
	margin: 0 2%;
	transition: all 0.3s;
}

.flex.link_banner a:hover {
	opacity: 0.5;
}

/*三原焼きの歴史へのリンク*/
.his_link {
	margin: 20px 0 20px 0;
	padding-top: 50px;
}

.his_link a {
	background: #cb2f33;
	border: 1px solid #cb2f33;
	color: #fff;
	padding: 8px 30px 8px 20px;
	border-radius: 3px;
	position: relative;
	transition: all 0.3s;
}

.his_link a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 13px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	margin: 0 auto 0px;
	border-style: solid;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent #fff;
	transition: all 0.3s;
}

.his_link a:hover {
	color: #cb2f33;
	background: #FFF;
}

.his_link a:hover::after {
	right: 8px;
	border-color: transparent transparent transparent #cb2f33;

}


/*------------- footer -------------*/
footer {
	border-bottom: 50px solid #cb2f33;
}

footer .section_box.back01 {
	padding: 120px 0 0;
}

footer .section_box.back02 {
	padding: 50px 0;
}

.footer_link_wrap.flex {
	justify-content: space-between;
}

.cont_item ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 15px;
}

.cont_item ul li a {
	margin: 10px 0;
	color: #000;
	transition: all 0.3s;
}

.cont_item .ttl {
	display: block;
	font-size: 120%;
	position: relative;
	margin: 20px 0 0px;
	padding: 0 0 0 15px;
	color: #000;
	transition: all 0.3s;
}

.cont_item .ttl:first-child {
	margin: 0;
}

.cont_item .ttl::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -0px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	width: 7px;
	height: 1px;
	background: #000;
	transition: all 0.3s;
}

.cont_item ul li a:hover,
.cont_item .ttl:hover {
	color: #cb2f33;
}

.cont_item .ttl:hover::after {
	background: #cb2f33;
}

.footer_logo {
	position: relative;
	margin: 40px 0 0;
	bottom: 0;
	padding: 10% 0 0;
	z-index: 2;
}

.footer_logo::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 70%;
	height: 100%;
	background: url(../img/back02.jpg);
	z-index: -1;
	clip-path: circle(50% at 50% 100%);
}

.footer_logo .f_logo {
	width: 30%;
}

.footer_logo_d01 {
	position: absolute;
	bottom: -100px;
	left: 70px;
	width: 12%;
}

.footer_logo_d02 {
	position: absolute;
	bottom: -100px;
	right: 70px;
	width: 12%;
}

.facebook_logo {
	text-align: center;
	margin-bottom: 50px;

}

.facebook_logo a img {
	width: 60px;
}









/*--------------- お問い合わせ ---------------*/

.contact_tel .box_center {
	margin: 30px auto 0;
}

.section_box.back01.contact_back {
	padding: 30px 0;
}

.box_center {
	width: fit-content;
	margin: 0px auto;
}

.form_box {
	max-width: 900px;
	width: 90%;
	margin: 50px auto 0;
}

.form p {
	margin-left: 10%;
}

.co_table {
	max-width: 900px;
	width: 90%;
	margin: 0px auto 10px;
	padding: 0px 0px 10px 0px;
}

/*.co_table dl{
	margin: 0px 0px 20px 0px;
    padding: 0px 0px 20px 0px;
    border-bottom: #CCC dotted 1px;
}*/
.co_table dt {
	float: left;
	margin-left: 10px;
}

.co_table dd {
	margin-left: 200px;
}

.co_table em {
	color: red;
	font-size: 15px;
	font-weight: bold;
}

input[type=text],
input[type=radio],
textarea {
	width: 100%;
	border-top: none;
	border-right: none;
	border-left: none;
	height: 50px;
	border: #ccc solid 1px;
	background-color: #fff;
	padding: 0.5em;
}

input[type=text],
input[type=radio],
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

textarea {
	height: 100px
}

.short {
	width: 200px;
	margin-bottom: 10px
}

input[type="submit"],
a.back {
	width: auto;
	height: auto;
	text-align: center;
	border: 0px solid;
	padding: 10px 20px;
	color: #fff;
	background: #cb2f33;
	font-size: 16px;
	margin-top: 40px;
	min-width: 200px;
	display: inline-block;
}

input[type="checkbox"] {
	width: auto;
	height: auto;
}

.submit_tac {
	text-align: center;
}

.co_midashi1 {
	position: relative;
}

.kazari_4 {
	position: absolute;
	top: -30px;
	left: -40px;

}


/*----------- 店舗ページ -------------*/
.tenpo_back.section_box.back01 {
	padding: 30px 0 30px;
}

.fff_block {
	background: #fff;
	z-index: 2;
	border-radius: 10px;
	position: relative;
	padding: 60px 50px 50px;
	margin: 100px 0 20px;
}


.fff_block.info a{
	text-decoration:underline;
	color:#cb2f33
}

.tenpo_ttl {
	text-align: center;
	margin: -140px auto 0;
}

.fff_block.tenpo .write_box:first-child {
	border-top: none;
	margin: 0;
}

.tenpo_ttl h2 {
	font-size: 180%;
}

.tenpo_ttl h2 span {
	display: block;
	font-weight: normal;
	font-size: 25px;
}

.tenpo_ttl img {
	width: calc(7vw + 20px);
}

.write_box {
	border-top: 1px dotted #555;
	margin: 40px 0;
	padding: 40px 0 0px;
}

.write_box.flex {}

.write_box .img_box {
	width: 50%;
	margin: 0 1%;
}

.write_box .text_box {
	width: 45%;
	margin: 0 1%;
}

.text_box h2 {
	color: #cb2f33;
}

.fff_block h2 {
	text-align: center;
	margin: 10px 0 0 0;
}

.timeline {
	margin: 0vw auto;
}

.timeline-list {
	padding: 40px 0;
	margin: 0;
}

.timeline-list-item {
	display: flex;
	line-height: 1.5;
}

.timeline-list-item .date {
	width: 30%;
	text-align: center;
	padding: 0 0 40px 20px;
	color: #000;
	font-weight: bold;
}

.timeline-list-item .content {
	position: relative;
	width: 70%;
	padding: 0 20px 40px 10%;
	border-left: 1px solid #000;
}

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

.fff_block.menu h2 {
	margin: 0 0 40px 0;
}

.fff_block.menu div {
	display: inline-block;
}

.fff_block.menu a {
	display: inline-block;
}

.fff_block.menu a img {
	height: 300px;
	width: auto
}

.tenpo_movie,
.tenpo_main_img{
	position: relative;
	margin: 30px auto 0px;
	max-width: 1700px;
	width: 95%;
	text-align:center;
}

.tenpo_movie video {
	width: 100%;
}

/*お好み焼きの歴史*/
.miharayaki_his.fff_block {
	padding: 3% 7%;
	margin: 0;
}

.miharayaki_his.fff_block p {
	margin: 50px 0;
}

.okonomiyaki_his.border_box {
	padding: 3% 7%;
}

.okonomiyaki_his.border_box p {
	margin: 50px 0;
}

.okonomiyaki_his.border_box a {
	color: #cb2f33;
}

/*お土産販売*/
.miyage_wrap.fff_block {
	margin: 0;
	padding: 3% 7%;
}

.miyage_wrap.fff_block p {
	margin: 20px 0;
}

.miyage_wrap.fff_block .flex img {
	width: 20%;
}

.miyage_wrap .tac {
	margin: 20px 0;
}

.miyage_wrap span {
	border-bottom: 2px dotted #cb2f33;
}

.miyage_img.flex {
	margin: 50px 0;
	align-items: center;
	justify-content: center;
}

.shoplist {
	max-width: 1000px;
	margin: 30px auto;
}

.shoplist h2:first-letter {
	color: #e33321;
}

.shoplist table {
	border-collapse: collapse;
}

.shoplist table th,
.shoplist table td {
	border-bottom: 1px solid #ccc;
	padding: 2% 0;
}

.shoplist table th {
	width: 20%;
	color: #fff;
	background: #cb2f33;
	/*position: sticky;*/
	top: 0;
}

.shoplist table td:nth-child(1) {
	text-align: center;
	font-weight: bold;
}

.shoplist table td:nth-child(n+3) {
	text-align: center;
}

.shoplist table td a {
	position: relative;
	display: inline-block;
	border: 1px solid;
	margin: 0 auto;
	color: #000;
	padding: 2% 15%;
}

.online_wrap.border_box {
	padding: 3% 7%;
}

.on-line img {
	width: 30%;
}

.on-line p {}

.payment_of_taxes.border_box {
	margin-top: 150px;
}

.payment_of_taxes .flex-wrap {
	align-items: center;

}

.taxes_link {
	width: 29%;
	margin: 2%;
}

.news_day{
	color: #cb2f33;
	display: block;
	font-size: 15px;
}
.news_txt{
	margin-top: 30px;
}


/*page-top*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#5c1b1d;
	width: 70px;
	height: 70px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
	clip-path: circle(50% at 50% 50%);
}
#page-top a:hover{
	background:#fff;
	color: #cb2f33;
}
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  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(100px);
  }
}






/*--------------SP--------------■■■■■■■■■■■*/
@media(max-width:1150px) {
	.intoro_box::after {
		font-size: 10.5rem;
		top: -153px;
	}

	.intro_d01 {}

	.intro_d02 {
		left: -100px;
		width: 15vw;
	}

	.intro_d03 {
		width: 23vw;
		left: -100px;
		bottom: -6%;
	}

	.intro_d04 {
		top: -18%;
		right: 234px;
		width: 13vw;
	}

	.intro_d05 {
		position: absolute;
		top: 10%;
		right: -40px;
		width: 15vw;
	}

	.intro_d06 {
		right: -30px;
	}

	.intro_d07 {
		bottom: -13%;
		right: 35%;
		width: 22vw;
	}

	/*店舗一覧*/
	.store_d03 {
		top: 15px;
		right: 36px;
	}

	.tenpo_ttl img {
		width: calc(12vw + 25px);
	}
}

@media(max-width:960px) {
	.intoro_box::after {
		font-size: 7.5rem;
		top: -108px;
	}
}

@media(max-width:950px) {

	/*------共通---------*/
	.flex_wrap_reverse {
		flex-wrap: wrap-reverse;
	}

	.flex {
		flex-wrap: wrap;
	}

	.section_box.back01,
	.section_box.back02 {
		padding: 60px 0;
	}

	footer .section_box.back01 {
		padding: 60px 0 0;
	}



	/*------ sp menu --------*/
	.header_menu_sp {
		position: fixed;
		left: 53px;
		top: 12px;
		z-index: 3;
		background-color: #55321f;
		border-radius: 5px;
	}

	.header_menu_sp img {
		width: 34px;
		vertical-align: bottom;
	}

	.contents_box {
		padding-left: 0;
	}

	.wrap2 {
		margin: 50px 0 0;
	}

	.dousen {
		width: 90%;
	}
	/*-----  sp_top  ----------*/
	.sp_logo{
		position: absolute;
		z-index: 2;
		top: 55%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		width:80%
	}

	/*----- sp under menu ------*/
	.sp_under {
		position: fixed;
		bottom: 0;
		text-align: center;
		width: 100%;
		display: flex;
		z-index: 1;
		font-family: 'Krona One', sans-serif;

	}

	.sp_under a {
		background-color: #55321f;
		font-size: 130%;
		display: inline-block;
		width: 50%;
		padding: 20px;
		color: #fff;
		letter-spacing: 3px;
	}

	.sp_under a:first-child {
		border-right: 1px solid #fff
	}

	/*-------- contents -----------*/
	.dousen a:first-child {
		margin: 0px 0 15px;
	}

	/**/
	.news_box_wrap {
		margin: 0 auto 180px;
	}

	/*イントロ*/
	.intro_d04 {
		top: -13%;
	}

	/*店舗一覧*/
	.store_links div a {
		border: 6px solid #fff;
	}

	.store_d01 {
		right: -13px;
		width: 12vw;
	}

	.store_d02 {
		left: -14px;
		width: 26vw;
	}

	.store_d03 {
		width: 15vw;
	}

	/*banner*/
	.link_banner.flex {
		justify-content: center;
		width: 80%;
		margin: 0 auto;
	}

	.flex.link_banner a {
		margin: 10px auto;
	}


	/*----------- contact page----------------*/
	.co_table {
		clear: left;
		float: left;
		width: 100%;
	}

	.co_table dt {
		float: left;
		margin-left: 0%;
	}

	.co_table dd {
		margin-left: 0%;
	}



	/*店舗ページ*/
	.write_box .img_box,
	.write_box .text_box {
		width: 100%;
	}

	.write_box .text_box {
		margin: 30px 0 0;
	}

	/*お土産ページ*/
	.miyage_wrap.fff_block {
		padding: 5% 7%;
	}

	.miyage_wrap.fff_block .flex img {
		width: 50%;
	}

	.miyage_img.flex {
		margin: 40px 0 20px;
	}

	.shoplist table {
		width: 100%;
	}

	.shoplist table td {
		display: block;
		width: 96%;
		margin-left: 4%;
	}

	.shoplist table td:nth-child(1) {
		text-align: left;
	}

	.shoplist table td:nth-child(n+3) {
		text-align: left;
		margin-top: -1vw
	}

	.shoplist table td::before {
		content: attr(data-label);
		font-size: .875rem;
		color: #fff;
		display: block;
		margin-bottom: 0.45rem;
		padding: 5px 0 5px 5px;
		background: #cb2f33;
		margin-left: -4%;
		text-align: center;
	}

	.shoplist table td:nth-child(n+3):before {
		display: none;
	}

	.shoplist table th,
	.shoplist table td {
		border: none;
	}

	.payment_of_taxes.border_box {
		margin-top: 50px;
	}

	.on-line img {
		width: 100%;
	}

	.on-line p {
		margin: 10px 0;
	}

}

@media(max-width:800px) {
	.intro_d03 {
		width: 32vw;
		left: -60px;
		bottom: -1%;
	}

	.intro_d05 {
		top: -1%;
		right: -22px;
		width: 21vw;
	}

	.intro_d06 {
		width: 30vw;
	}

	.intro_d07 {
		width: 31vw;
	}

	/*店舗一覧*/


}

@media(max-width:768px) {
	.hiro_image #slid{
		height:432px
	}
	
}


@media(max-width: 680px) {
	/*.intro_back.section_box.back01 {
		overflow: hidden;
		padding: 140px 0 120px;
	}*/
	
	.intro_back.section_box.back01 {
		overflow: hidden;
		padding: 90px 0 120px;
	}

	.intoro_box::after {
		font-size: 4rem;
		top: -101px;
		left: -12px;
		transform: scale(1, 3);
	}

	.intro_d01 {
		top: -37px;
		left: -68px;
	}

	.intro_d02 {
		width: 30%;
		top: 30%;
		left: 0;
	}

	.intro_d04 {
		top: -12%;
		width: 20vw;
		right: 128px;
	}

	.intro_d05 {
		top: -5%;
		right: -3rem;
		width: 37vw;
	}

	.intro_d06 {
		right: -3rem;
		width: 37vw;
	}

	.store_d01 {
		right: 0;
	}

	/*店舗一覧*/
	.store_links.flex-wrap {
		justify-content: space-around;
	}

	.store_links div {
		width: 48%;
	}

	.store_links div a,
	.not_link img {
		border: 5px solid #fff;
	}

	/*footer*/
	.footer_link_wrap.flex {
		width: 100%;
		margin: 0 auto;
		justify-content: space-between;
	}

	.cont_item {
		width: 45%;
	}

	.footer_link_wrap.flex .cont_item:nth-child(3),
	.footer_link_wrap.flex .cont_item:nth-child(4){
		margin:30px 0 0 0
	}

	/*店舗*/
	.fff_block {
		padding: 35px 20px 20px;
		margin: 20px 0 50px;
	}

	.contents_wrap .fff_block:last-child {
		margin: 20px 0 0;
	}

	.write_box {
		margin: 30px 0;
		padding: 30px 0 0;
	}

	.tenpo_ttl {
		margin: -100px auto 0;
	}

	.tenpo_ttl img {
		width: 30%;
	}

	.timeline-list-item .date {
		padding: 0 10px 40px 0;
	}

	.timeline-list-item .content {
		padding: 0 0 40px 20px;
	}

	.fff_block.menu h2 {
		margin: 0 0 20px 0;
	}
	.fff_block.tenpo .write_box:first-child{
		padding:0
	}
	.write_box .text_box{
		margin:10px 0 0 
	}
	.banner_wrap{
		margin:0 auto 80px
	}
}

@media(max-width:560px) {

	/*イントロ*/
	.intro_d03 {
		width: 51vw;
		animation: yurayura 2s linear infinite;
	}

	.intro_d04 {
		top: -10%;
		right: 88px;
	}

	.intro_d05 {
		top: 0;
		right: -2rem;
	}

	.intro_d06 {
		right: -3rem;
		width: 45vw;
		bottom: -2%;
	}

	.intro_d07 {
		bottom: -10%;
		right: 10%;
		width: 48vw;
	}

	/*news*/
	.news_box_wrap ul li span {
		display: block;
	}

	.news_box_wrap ul li a {
	}

	.more_link {}

	/*店舗一覧*/
	.border_box .store_title {
		font-size: 30px;
	}

	.border_box .store_title span {
		font-size: 10px;
	}

	.border_box.sanzyo{
		margin-top: 65px;
	}



	.store_links div p {
		font-size: 18px;
	}

	.sub_name {}

	.store_d01 {
		right: -13px;
		bottom: -5px;
		width: 20vw;
	}

	.store_d02 {
		bottom: -20px;
		left: -21px;
		width: 46vw;
	}

	.store_d03 {
		top: -16px;
		right: -6px;
		width: 24vw;
	}

	/*三原焼きmap一覧*/
	.midashi_line {
		font-size: 120%;
	}

	/*footer*/
	.facebook_logo a img {
		width: 40px;
	}

	.footer_logo_d02 {
		bottom: -30px;
		right: 30px;
		width: 15%;
	}

	.footer_logo_d01 {
		bottom: -30px;
		left: 30px;
		width: 15%;
	}

	/*店舗ページ*/
	.tenpo_back.section_box.back01 .contents_wrap{
		width:95%
	}

	.fff_block{
		padding:35px 15px 
	}
	.tenpo_ttl {
		margin: -75px auto 0;
	}

	.tenpo_ttl img {
		width: 20%;
	}

	.fff_block.menu div {}

	.fff_block.menu a img {
		height: auto;
		width: 50%;

	}

	.tenpo_movie{
		width:98%
	}

	.tenpo_movie video {
		/* width: 100vw; */
		/* margin-left: calc(-20px - 6.5%); */
		/* box-shadow: 10px 10px 10px #ccc; */
	}

	/*お問い合わせ*/
	.co_table em {
		font-size: 10px;
	}


}