@charset "UTF-8";

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap");

html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


body,div,a,p,img,span,ul,li {
	margin:0;
	padding:0;
}
article,aside,footer,header,nav,section {
  display: block;
}

.sectitle{
	color: #000;
	margin-bottom: 30px;
	font-size: 1.5em;
}

figcaption,
figure,
main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-size: 1em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline-width: 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
  font-family : inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
	border-radius: 0px;
	border: 1px solid #c7c7c7;
	cursor: pointer;
}
button:hover,
html [type="button"]:hover,
[type="reset"]:hover,
[type="submit"]:hover{
	opacity:0.8;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
  resize: none;
}

[type="checkbox"],
[type="radio"] {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	transform: scale(1.6);
	margin-right: 4px;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details,
menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

img {
  width: 100%;
  height: auto;
}

/*ベース設定*/
body {
  font-size: 16px;
  line-height: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: 0.4px;
  color: #212121;
  font-family: 'Noto Serif JP',"游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.pcbr {
	display: none;
}
@media screen and (max-width: 840px) {
  .spbr {
	display: none;
  }
  .pcbr {
	display: block;
  }
}
a {
  text-decoration: none;
  color: #212121;
}
.unl{
	text-decoration: underline;
}
section {
  position: relative;
  padding: 30px;
}
section .inner .block .text {
	line-height: 1.7em;
	letter-spacing: 4px;
	margin-bottom: 1.0em;
}
section .inner .block .caption{
	font-size:0.8em;
	font-weight: normal;
}

textarea {
  padding: 1em;
  letter-spacing: 0.1em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #c7c7c7;
}

input {
  padding-left: 1em;
  letter-spacing: 0.1em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #c7c7c7;
}
select{
	border: 1px solid #c7c7c7;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

h1{
	font-size:2.0em;
}
h2{
	font-size:1.8em;
	letter-spacing: 5px;
	margin: 0 auto;
	margin-bottom: 50px;
	text-align:center;
}
h2.towa{
	border:none;
	position:relative;
	font-size:1.6em;
	padding:1em 1em;
	writing-mode: vertical-rl;
	outline:none;
	margin-bottom:50px;
	color: transparent;
	text-shadow: 0px 0px 6px #fff;
	-moz-transform: scale(0.95);
	-ms-transform: scale(0.95);
	-o-transform: scale(0.95);
	-webkit-transform: scale(0.95);
	transform: scale(0.95);
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
h2.towa.active{
	color:#000;
	 -moz-transform: scale(1.0);
	-ms-transform: scale(1.0);
	-o-transform: scale(1.0);
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
}
h2.towa:before,h2.towa:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:0;
  width:1px;
  background: #999;
  transition:400ms ease all;
}
h2.towa:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
h2.towa.active:before,h2.towa.active:after{
  height:100%;
  transition:300ms ease all;
}



h2.subcategory::after {
	position:relative;
	top:25px;
	left:0px;
	content:"";
	display:block;
	width:1em;
	height:1em;
	background:url(../../common/images/mugenmusubi3.svg) no-repeat;
	background-size:contain;
	margin: 0 auto;
}
p {
  margin: 0;
}

/* ローディング（背景） -------------------- */
#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: #FFF;
	z-index: 18;
}

/* ローディング（トップ） -------------------- */
#loader {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 2;
}
#loader h1{
	display:inline;
	transform:translate(-50%, -50%);
	writing-mode: vertical-rl;
}

/* ローディング（コンテンツページ） -------------------- */
#pageloder {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	width:100px;
}
#pageloder::before {
	display: block;
	width: 100%;
	height: 100%;
	content: " ";
	position: absolute;
	background: url(../images/logo.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100px;
	opacity: 0.3;
}
#pageloder h1{
	writing-mode: vertical-rl;
	position: relative;
	margin: 0 auto;
}
.loder-square-spinner , .loder-square-spinner * {
	box-sizing: border-box;
}

.loder-square-spinner {
	height: 15px;
	width: 15px;
	position: relative;
	border: 2px solid #d6cb95;
	animation: loder-square-spinner-animation 4s infinite ease;
	margin: 15px auto;
}

.loder-square-spinner .spinner-inner {
	vertical-align: top;
	display: inline-block;
	background-color: #d6cb95;
	width: 100%;
	opacity: 1;
	animation: loder-square-spinner-inner-animation 4s infinite ease-in;
}

@keyframes loder-square-spinner-animation {
	0% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(180deg);
	}

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

	75% {
		transform: rotate(360deg);
	}

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

@keyframes loder-square-spinner-inner-animation {
	0% {
		height: 0%;
	}

	25% {
		height: 0%;
	}

	50% {
		height: 100%;
	}

	75% {
		height: 100%;
	}

	100% {
		height: 0%;
	}
}


/* メニュー -------------------- */

.overlay-navigation {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 100%, 0.2);
  display: none;
  opacity: 0;
}

nav,
nav ul {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

nav ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
}

nav ul li {
  -webkit-flex-basis: 12.5%;
  -ms-flex-preferred-size: 12.5%;
  flex-basis: 12.5%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  display: none;
  background-color: #FFF;
  border-left:solid 1px  #ccc;
  background-size: cover;
  cursor: pointer;
}

nav ul li:last-child{
	background-image: url('../images/logo01.svg');
	background-repeat: no-repeat;
	background-size: 70% 70%;
	background-color: #000;
	background-position: center;
}
@media (max-width: 640px) {
	nav ul li:last-child{
		background-image: url('../images/logo02.svg');
		background-repeat: no-repeat;
		background-size: 65% 65%;
		background-color: #000;
		background-position: center;
	}
}

nav li a {
  margin: 0 auto;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size: 1.4rem;
  height: 100%;
  opacity: 0;
  writing-mode: vertical-rl;
}

nav li a:before {
  content: '';
  width: 70px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 100;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}

nav li a:after {
  content: attr(data-content);
  font-size: 0.7rem;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
  opacity: 0;
  position: absolute;
  z-index: 100;
  color: #fff;
  display: block;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  bottom: -50px;
  text-transform: none;
  font-family: 'Open sans', sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
}


/* ====================================
Burger king
==================================== */

.open-overlay {
	position: absolute;
	right: 5rem;
	top: 3.2rem;
	z-index: 17;
	width: 34px;
	display: block;
	cursor: pointer;
/*	opacity:0;*/
	transition: 0.5s;
}



/* ====================================
Animation keyframes
==================================== */

@keyframes animate-top-bar {
  0% {
	background-color: #fff;
  }
  50% {
	-webkit-transform: translateY(9px);
	transform: translateY(9px)
  }
  80% {
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
	background-color: #fff
  }
  100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	background-color: #29363B;
  }
}

@keyframes animate-bottom-bar {
  0% {
	background-color: #fff;
  }
  50% {
	-webkit-transform: translateY(-9px);
	transform: translateY(-9px)
  }
  80% {
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
	background-color: #fff;
  }
  100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	background-color: #29363B;
  }
}

@keyframes animate-middle-bar {
  0% {
	background-color: #fff;
  }
  80% {
	background-color: #fff;
  }
  100% {
	background-color: #29363B;
  }
}

@keyframes animate-out-top-bar {
  0% {
	background-color: #29363B
  }
  50% {
	-webkit-transform: translateY(9px);
	transform: translateY(9px)
  }
  80% {
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
	background-color: #29363B
  }
  100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	background-color: #FFF;
  }
}

@keyframes animate-out-bottom-bar {
  0% {
	background-color: #29363B
  }
  50% {
	-webkit-transform: translateY(-9px);
	transform: translateY(-9px)
  }
  80% {
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
	background-color: #29363B;
  }
  100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	background-color: #FFF;
  }
}

@keyframes animate-out-middle-bar {
  0% {
	background-color: #29363B
  }
  80% {
	background-color: #29363B;
  }
  100% {
	background-color: #fff;
  }
}



@media (max-width: 640px) {
  nav ul {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column-reverse;
	-ms-flex-direction: column-reverse;
	flex-direction: column-reverse;
  }
  nav ul li {
	height: 20%;
	border-left: none;
	border-bottom: solid 1px #ccc;
  }
  nav ul li a {
	font-size: 1.2em;
	left:0;
	writing-mode: initial;
	color:#FFF;
	vertical-align: middle;
	display: table-cell;
  }
  nav li a:after {
	font-size: 0.6rem;
	bottom: -25px;
  }
  nav li a:hover:after {
	transform: translateY(0);
  }

  nav li a:before {
	width: 25px;
  }
}
/* 左上ロゴ -------------------- */
.logo2{
	position: fixed;
	top: 15px;
	left: 15px;
	width:133px;
	height:43px;
	border: none;
	cursor: pointer;
	z-index:15;
	transition: 0.5s;
	background-image: url('../../common/images/logo02.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 133px auto;
}
.logo2.bl{
	background-image: url('../../common/images/logo02_b.svg');
	transition: 0.5s;
}
/* メニューボタン -------------------- */
.menubutton {
	position: fixed;
	right: 10px;
	top: 10px;
	width: 60px;
	height: 60px;
	background-color: rgba(43, 43, 43, 0.7);
	border-radius: 5px;
	border: none;
	cursor: pointer;
}
.menubutton:focus {
	outline:0;
}
.menutxt{
	position: fixed;
	top: 50px;
	font-size: 0.65em;
	right: 22px;
	color: #FFF;
}
.menubutton span {
	display: block;
	width: 60%;
	margin: auto;
	height: 2px;
	background-color: #FFF;
	position: absolute;
	left: 0;
	right: 0;
	top: calc((100% - 15px)/2);
	border-radius: 3px;
	transition: .2s;
}

.lineTop {
	transform: translateY(-10px);
}

.lineBottom {
	transform: translateY(10px);
}

.open .lineTop {
	transform: rotate(45deg);  
}

.open .lineMiddle {
	opacity: 0;
}

.open .lineBottom {
	transform: rotate(-45deg);  
}

.layer{
	z-index: 4;
}
.layer .mugen{
	display:inline;
	transform:translate(-50%, -50%);
	writing-mode: vertical-rl;

}
.layer .mugen::before {
	position:absolute;
	top:35%;
	left:-50px;
	content:"";
	display:inline-block;
	width:1em;
	height:1em;
	background:url(../../common/images/mugenmusubi.svg) no-repeat;
	background-size:contain;
}

.layer .mugen::after {
	position:absolute;
	top:35%;
	right:-50px;
	content:"";
	display:inline-block;
	width:1em;
	height:1em;
	background:url(../../common/images/mugenmusubi.svg) no-repeat;
	background-size:contain;
}

/*見出しの別パターン*/
.contitlewrap::before {
    content: "";
    background-image: url(../../common/images/contitle.svg);
    background-repeat: no-repeat;
    height: 300px;
    width: 100%;
    background-position: center 24%;
    position: absolute;
    top: 10%;
    margin: 0 auto;
    background-size: auto 110px;
    opacity: 0.8;
}
.contitle{
    display: inline;
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
    font-size:1.8em;
}


/*背景画像の設定*/
.menu{
  /*opacity:0;*/ /*初期値は見えなくしておく*/
  position:relative;
  display: block;
  height:100%;
  
  transition: all .8s ease 0s;  /*背景画像のアニメーション設定*/
}
.menu.active{
  opacity:1; /*activeクラス付与で表示させる*/
  transition: .3s;
}


.menu.menu02.active{
  background: url('../images/menu02.jpg')center center / cover no-repeat;
}
.menu.menu03.active{
  background: url('../images/menu03.jpg')center center / cover no-repeat;
}
.menu.menu04.active{
  background: url('../images/menu04.jpg')center center / cover no-repeat;
}
.menu.menu05.active{
  background: url('../images/menu05.jpg')center center / cover no-repeat;
}
.menu.menu06.active{
  background: url('../images/menu06.jpg')center center / cover no-repeat;
}
.menu.menu07.active{
  background: url('../images/menu07.jpg')center center / cover no-repeat;
}
.menu.menu08.active{
  background: url('../images/menu08.jpg')center center / cover no-repeat;
}

@media (max-width: 640px){
	.menu{
		display: table;
		width: 100%;
	}
	.menu.active a{
	  color: #000!important;
	}	
	.menu.menu02{
	  background: url('../images/spmenu02.jpg')center center / cover no-repeat;
	}
	.menu.menu03{
	  background: url('../images/spmenu03.jpg')center center / cover no-repeat;
	}
	.menu.menu04{
	  background: url('../images/spmenu04.jpg')center center / cover no-repeat;
	}
	.menu.menu05{
	  background: url('../images/spmenu05.jpg')center center / cover no-repeat;
	}
	.menu.menu06{
	  background: url('../images/spmenu06.jpg')center center / cover no-repeat;
	}
	.menu.menu07{
	  background: url('../images/spmenu07.jpg')center center / cover no-repeat;
	}
	.menu.menu08{
	  background: url('../images/spmenu08.jpg')center center / cover no-repeat;
	}

	
	.menu.menu02.active{
	  background: url('../images/spmenu02.jpg')center center / cover no-repeat;
	}
	.menu.menu03.active{
	  background: url('../images/spmenu03.jpg')center center / cover no-repeat;
	}
	.menu.menu04.active{
	  background: url('../images/spmenu04.jpg')center center / cover no-repeat;
	}
	.menu.menu05.active{
	  background: url('../images/spmenu05.jpg')center center / cover no-repeat;
	}
	.menu.menu06.active{
	  background: url('../images/spmenu06.jpg')center center / cover no-repeat;
	}
	.menu.menu07.active{
	  background: url('../images/spmenu07.jpg')center center / cover no-repeat;
	}
	.menu.menu08.active{
	  background: url('../images/spmenu08.jpg')center center / cover no-repeat;
	}

}

.menu.active a{
  color:#FFF;
  transform: scale(1.2);
  transition: .3s;
}
/*上にかぶさる帯の設定*/
.menu::before:not(.menu::last-child){
  width:100%;
  height:100%;
  position: absolute;
  display: block;
  content: '';
  background-color:#FFF;
  transition: all .8s ease 0s;   /*帯のアニメーション*/
}
.menu.active::before{
  transform: translateY(100%);   /*左に隠れている帯を右端まで伸ばして、右端を越えて消えるように設定*/
}


/* フッター -------------------- */
footer {
	background:#000;
	color:#FFF;
	padding: 60px 30px 10px 30px;
}
footer .fttop{
	display: flex;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

@media (max-width: 1020px){
	footer .fttop {
		display: flex;
		flex-wrap: wrap;
	}
}
footer .block{
	width:25%;
}
footer .ftlogo .logo03{
	position: relative;
	padding-top: 10px;
	width: 100%;
	height:100%;
	margin: 0 auto;
	margin-bottom:20px;
	background-image: url('../../common/images/logo02.svg');
	background-repeat: no-repeat;
	background-position: top;
	background-size: 220px auto;
	cursor: pointer;
}
@media (max-width: 1020px){
	footer .ftlogo {
		width: 100%;
		height: 85px;
	}
}
footer ul{
	margin: 0 2.2rem 0 0;
	padding:0rem;
	list-style-type:none;
	border-radius:5px;
}
footer ul li{
	line-height:1.6;
	padding:6px 0;
	margin:5px 0px;
	cursor: pointer;
}
footer ul li:not(:last-child){
	border-bottom:1px dashed #FFF;
	margin-bottom:0;
}
footer ul li:before{
	content:'◆';
	padding:10px;
	font-weight:900;
	color:#9b9a64;
}
@media (max-width: 1020px){
	footer .ftlist01 ul{
		margin: 0 1.1rem 0 0;
	}
	footer .ftlist02 ul{
		margin: 0;
	}
	footer .ftlist01,footer .ftlist02 {
		width: 50%;
		font-size: 0.9em;
	}
	footer .short {
		letter-spacing: -1.3px;
	}

}
@media (max-width: 420px) {
	footer .ftlist01,footer .ftlist02{
		font-size: 0.75em;
	}
}

@media (max-width: 1020px){
	footer .ftdetail {
		width: 100%;
		text-align: center;
	}
	
}
footer .ftdetail p{
	margin-bottom:20px;
}
@media (max-width: 1020px){
	footer .ftdetail p{
		width: 350px;
		margin:0 auto;
		margin-bottom:20px;
		margin-top: 20px;
	}
	footer .ftdetail .button_base{
		width: 350px;
		margin:0 auto;
		margin-bottom:20px;
		margin-top: 20px;
	}
}
@media (max-width: 420px){
	footer .ftdetail p{
		width: 100%;
	}
	footer .ftdetail .button_base{
		width: 100%;
	}
}
footer .fttel{
	letter-spacing: 6px;
}

@media (max-width: 1240px) and (min-width: 1024px) { 
	footer .fttel{
		letter-spacing: 3px;
	}
}
footer .tel{
	font-size:1.8em;
}
@media (max-width: 420px){
	footer .fttel{
		font-size:1.0em;
	}
	footer .tel{
		font-size:1.4em;
	}	
}
@media (max-width: 1240px) and (min-width: 1024px) { 
	footer .tel{
		font-size: 1.6em;
	}
}
footer .tel a{
	color:#FFF;
}
footer .ftcap{
	font-size:.8em;
	margin-bottom:10px;
}
@media (max-width: 420px){
	footer .ftcap{
		font-size:.7em;
	}
}
footer .ftbtm .copyright{
	text-align:center;
	margin-top: 30px;
}
@media (max-width: 1020px){
	footer .ftbtm .copyright{
		font-size:0.8em;
	}
}

@media (max-width: 540px){
	footer .ftbtm .copyright{
		line-height: 2em;
		margin-top: 20px;
	}
	footer .ftbtm .copyright .cpsmall{
		display:block;
	}
}

footer .button_base {
	margin: 0;
	border: 0;
	font-size: 18px;
	position: relative;
	width: 260px;
	height: 60px;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-user-select: none;
	cursor: default;
}

footer .button_base:hover {
	cursor: pointer;
}
/* ボタンのスライド */
footer .slidein {
	overflow: hidden;
	border: #000000 solid 1px;
}

footer .slidein div {
	position: absolute;
	text-align: center;
	width: 100%;
	height: 60px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 18px;
}

footer .slidein div:nth-child(1) {
	color: #FFF;
	background: #52304f url(../images/bglogo01.png) no-repeat 124px -40px / 180px;
}

footer .slidein div:nth-child(2) {
	background: #7a4171 url(../images/bglogo01.png) no-repeat 124px -40px / 180px;
	width: 350px;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transform: translate(-350px, 0px) skewX(0deg);
	-webkit-transform: translate(-350px, 0px) skewX(0deg);
	-moz-transform: translate(-350px, 0px) skewX(0deg);
}
/*
footer .slidein div:nth-child(3) {
	color: #ffffff;
	left: -230px;
	transition: left 0.2s ease;
	-webkit-transition: left 0.2s ease;
	-moz-transition: left 0.2s ease;
}
*/
footer .slidein:hover div:nth-child(2) {
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transform: translate(0px, 0px) skewX(0deg);
	-webkit-transform: translate(0px, 0px) skewX(0deg);
	-moz-transform: translate(0px, 0px) skewX(0deg);
}

footer .slidein:hover div:nth-child(3) {
	left: 0px;
	transition: left 0.30000000000000004s ease;
	-webkit-transition: left 0.30000000000000004s ease;
	-moz-transition: left 0.30000000000000004s ease;
}

/* 各コンテンツの基本スタイル -----------------------*/
#contents {
	background-image: url('../../common/images/bg.svg');
	background-repeat: no-repeat;
	background-position: right bottom;
	background-color: #f4f3e7;
	background-attachment: fixed;
}
#contents section{
	padding:0;
}
#contents section .inner .block{
	padding: 50px 10% 100px 10%;
}
#contents section .inner .block .nm{
	background:#fcfbf8;
}
#contents section .inner .block .img{
	/*margin-top: 10px;*/
	background:#fcfbf8;
}
#contents section .inner .block a span{
	text-decoration: underline;
}
#contents h2{
	font-size:1.8em;
	letter-spacing: 5px;
	margin: 0 auto;
	margin-bottom: 50px;
}
#contents #contents .slide{
	opacity:0;
	transition: 0.5s;
}

#contents .inner{
	background-color: rgba(255,255,255,0.7);
	width: 90%;
	margin: 0px auto;
	margin-top: 80px;
	transition: 0.5s;
}

/* 本文の問い合わせボタン -----------------------*/
#toiawase table{
	margin: 0 0 2.0rem 0;
	width: 100%;
	position: relative;
	border-collapse: collapse;
	border-spacing: 0;
}

#toiawase th {
	border-top: 1px solid #e2e2e2;
	text-align: center;
	width: 30%;
	line-height: 26px;
	padding: 30px 0;
	font-size: 1.3em;
	font-weight: normal;
	background: #eee;
}
#toiawase td {
	border-top: 1px solid #eee;
	width: 70%;
	line-height: 26px;
	padding: 20px;
}
@media screen and (max-width: 1024px) {
	#toiawase th,#toiawase td{
		width: 100%;
		display:block;
		padding: 20px 0px 30px 0px;
	}
}
#toiawase .postinfo .fttel{
	letter-spacing: 6px;
}
@media (max-width: 1240px) and (min-width: 1024px) { 
	#toiawase .postinfo .fttel{
		letter-spacing: 3px;
	}
}
#toiawase .postinfo .tel{
	font-size:1.8em;
}
@media (max-width: 1240px) and (min-width: 1024px) { 
	#toiawase .postinfo .tel{
		font-size: 1.6em;
	}
}
@media (max-width: 420px) {
	#toiawase .postinfo .tel{
		font-size: 1.4em;
	}
}

#toiawase .postinfo .ftcap{
	font-size:.8em;
	margin-bottom:10px;
}
#toiawase .postinfo .ftbtm .copyright{
	text-align:center;
	margin-top: 30px;
}

#toiawase .postinfo .button_base {
	margin: 0;
	border: 0;
	font-size: 18px;
	position: relative;
	width: 260px;
	height: 60px;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-user-select: none;
	cursor: default;
}

#toiawase .postinfo .button_base:hover {
	cursor: pointer;
	color: #FFF;
}
/* ボタンのスライド */
#toiawase .postinfo .slidein {
	overflow: hidden;
	color: #FFF;
	margin-top: 30px;
}

#toiawase .logoimg img{
	width:170px;
}
	
@media screen and (max-width: 1024px) {


	#toiawase .logoimg{
		text-align:center;
	}

	#toiawase .name{
		text-align:center;
	}

	#toiawase .zip{
		text-align:center;
	}
	#toiawase .postinfo{
		text-align:center;
	}
	
	#toiawase .postinfo .slidein {
		margin: 30px auto 0px auto;
	}
}
#toiawase .postinfo .slidein div {
	position: absolute;
	text-align: center;
	width: 100%;
	height: 60px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 18px;
}

#toiawase .postinfo .slidein div:nth-child(1) {
	color: #FFF;
	background: #52304f url(../../common/images/bglogo01.png) no-repeat 124px -40px / 180px;
}

#toiawase .postinfo .slidein div:nth-child(2) {
	background: #7a4171 url(../../common/images/bglogo01.png) no-repeat 124px -40px / 180px;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transform: translate(-350px, 0px) skewX(0deg);
	-webkit-transform: translate(-350px, 0px) skewX(0deg);
	-moz-transform: translate(-350px, 0px) skewX(0deg);
}

#toiawase .postinfo .slidein:hover div:nth-child(2) {
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transform: translate(0px, 0px) skewX(0deg);
	-webkit-transform: translate(0px, 0px) skewX(0deg);
	-moz-transform: translate(0px, 0px) skewX(0deg);
}

#toiawase .postinfo .slidein:hover div:nth-child(3) {
	left: 0px;
	transition: left 0.30000000000000004s ease;
	-webkit-transition: left 0.30000000000000004s ease;
	-moz-transition: left 0.30000000000000004s ease;
}

/* 予約ボタン --------------------------*/

#toiawase .postinfo .yoyaku div:nth-child(1) {
	background: #6d1717 url(../../common/images/bglogo01.png) no-repeat 124px -40px / 180px;
}
#toiawase .postinfo .yoyaku div:nth-child(2) {
	background: #af2525  url(../../common/images/bglogo01.png) no-repeat 124px -40px / 180px;
}


/* ルート案内ボタン --------------------------*/

.postinfo .route
,.postinfo .route a{
	color:#FFF!important;
}
#toiawase .postinfo .route div:nth-child(1) {
	background: #000 url(../../common/images/bglogo01.png) no-repeat 124px -40px / 180px;
}
#toiawase .postinfo .route div:nth-child(2) {
	background: #484848 url(../../common/images/bglogo01.png) no-repeat 124px -40px / 180px;
}

/* サンクスボタン --------------------------*/

#toiawase .postinfo .thanks div:nth-child(1) {
	background: #155600 url(../../common/images/bglogo01.png) no-repeat 124px -40px / 180px;
}
#toiawase .postinfo .thanks div:nth-child(2) {
	background: #208200 url(../../common/images/bglogo01.png) no-repeat 124px -40px / 180px;
}


/* 見出し装飾：梅 -----------------------*/
.ume{
	list-style-type:none;
	margin:10px 0 10px 10px;
	width:33px;
	height:30px;
	top:-8px;
	position:absolute;
}


.ume:before{
/****花弁の作成****/
	content:"";
	display: block;   	
	border: solid 4px #FFF;
	border-radius: 100%;
	-moz-border-radius:100%;
	-webkit-border-radius: 100%;
	position: absolute;
	left: 37px;
	top: 18px;
	z-index: 1;
	box-shadow: -6px 4px 0 0 #FFF, 6px 4px 0 0 #FFF, -4px 11px 0 0 #FFE, 4px 11px 0 0 #FFF, 0px 6px 0 0 #FFF;
}
 .ume:after{
/****雄蕊の作成****/
	z-index: 1;
	content:"";
	display:block;
	border: solid 1px #aa4c8f;
	border-radius: 100%;
	-moz-border-radius:100%;
	-webkit-border-radius: 100%;
	position:absolute;
	left: 40px;
	top: 24px;
	box-shadow:-3px 2px 0 0 #aa4c8f, 3px 2px 0 0 #aa4c8f, -2px 6px 0 0 #aa4c8f, 2px 6px 0 0 #aa4c8f;
}
/* 見出し装飾：梅２ -----------------------*/
.umebana:before{
	content:' ';
	display:inline-block;
	width:40px;
	height:40px;
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	background-image: radial-gradient(circle, transparent 50%, #9b9a64 50%, #9b9a64 calc(50% + 2px), transparent calc(50% + 2px)),
	radial-gradient(circle, transparent 50%, #9b9a64 50%, #9b9a64 calc(50% + 2px), transparent calc(50% + 2px)),
	radial-gradient(circle, transparent 50%, #9b9a64 50%, #9b9a64 calc(50% + 2px), transparent calc(50% + 2px)),
	radial-gradient(circle, transparent 50%, #9b9a64 50%, #9b9a64 calc(50% + 2px), transparent calc(50% + 2px)),
	radial-gradient(circle, transparent 50%, #9b9a64 50%, #9b9a64 calc(50% + 2px), transparent calc(50% + 2px));
	background-position: 50% 0, 5% 40%, 95% 40%, 23% 95%, 78% 95%;
	background-size: 20px 20px;
	background-repeat:no-repeat;
	margin-bottom:5px;
}

/* 見出し装飾：麻 -----------------------*/
.asanoha:before{
	content:' ';
	display:inline-block;
	width:30px;
	height:30px;
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	background-image: linear-gradient(90deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(30deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(150deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(0deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(60deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(120deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(180deg, #E7355C 1px, transparent 1px, transparent calc(100% - 1px), #E7355C calc(100% - 1px)),
	linear-gradient(180deg, #E7355C 1px, transparent 1px, transparent calc(100% - 1px), #E7355C calc(100% - 1px)),
	linear-gradient(60deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(60deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(60deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(60deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(-60deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(-60deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(-60deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px)),
	linear-gradient(-60deg, transparent calc(50% - .5px), #E7355C calc(50% - .5px), #E7355C calc(50% + .5px), transparent calc(50% + .5px));
	background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0% 50%, 100% 50%, 60% 0, 40% 100%, -3% 32%, 106% 70%, 40% 0, 60% 100%, -3% 70%, 106% 32%;
	background-size: 100% 100%, 100% 100%, 100% 100%, 70% 70%, 58% 58%, 58% 58%, 35% 60%, 35% 60%, 25% 25%, 25% 25%, 27% 27%, 27% 27%, 25% 25%, 25% 25%, 27% 27%, 27% 27%;
	background-repeat:no-repeat;
	margin-bottom:.5em;
}


/* 見出し装飾：花菱 -----------------------*/

.hanabishi:before{
	content:' ';
	display:inline-block;
	width:50px;
	height:40px;
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	background-image: radial-gradient(#948bdb 25%, transparent 0),
	radial-gradient(#948bdb 25%, transparent 0),
	radial-gradient(#948bdb 25%, transparent 0),
	radial-gradient(#948bdb 25%, transparent 0);
	background-position: 50% 80%, 50% 30%, 0% 80%, 100% 80%;
	background-size: 15px 15px, 30px 25px, 30px 25px, 30px 25px;
	background-repeat:no-repeat;
}

/* 見出し装飾：ひし形 -----------------------*/
.hishigata:before{
	content:' ';
	display:inline-block;
	width:18px;
	height:18px;
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	background-color:#ccc;
	transform: rotate(45deg);
	margin-bottom:.3em;
}


/* 右ナビゲーション -----------------------*/
#rightnavi{
	position: fixed;
	top: 12%;
	right: 0px;
	z-index: 5;
	width: 50px;
	padding: 0;
	margin: 0;
	opacity:0;
	transition: 0.5s;
}


#rightnavi li {
	display: inline-block;
	float: right;
	height: 120px;
	width: 50px;
}
#rightnavi li a::before{
	content: '';
	display: inline-block;
	width: 18px;
	height: 32px;
	background-image: url('../../common/images/kasaneirome.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position:0px 0px;
	
}
#rightnavi li.active{
	background: #3f3f3f;
}
#rightnavi li a{
	padding: 15px 18px 37px 18px;
	display:block;
	text-decoration:none;
	color: #FFF;
}
@media (min-width: 1020px){
	#rightnavi li:hover{
		color: #FFF;
		opacity:0.8;
	}
}
#rightnavi .navr{
	background:#8d4b48;
}
#rightnavi .navg{
	background:#3a715e;
}
#rightnavi .navb{
	background:#476a7b;
}
#rightnavi .navy{
	background:#c18a26;
}
#rightnavi li.left {
	position: fixed;
	top: 12%;
	left: 0;
}
@media (max-width: 360px) {
	#rightnavi li {
	    width: 40px;
	    font-size: 0.9em;
	}
	#rightnavi li a {
	    padding: 15px 12px 37px 12px;
	}
}

/* 見出し墨円 -----------------------*/

h3.maru {
	font-size:1.3em;
	margin-bottom: 10px;
}
h3.maru::before {
	content: '';
	width: 20px;
	height: 30px;
	background-image: url(../images/sumien.png);
	background-size: 20px 20px;
	background-repeat: no-repeat;
	vertical-align: middle;
	display: inline-block;
	padding-right: 10px;
	background-position: 0px 1px;
}

.photo {
	padding: 11px;
	background-color: #FFFFFF;
	box-shadow: 0 3px 18px -4px rgba(0, 0, 0, 0.8);
}
@media screen and (max-width: 500px) {
	.photo {
		margin: 0 auto;
		display: block;
	}
}





.scaling-squares-spinner, .scaling-squares-spinner * {
	  box-sizing: border-box;
	}

	.scaling-squares-spinner {
	  height: 25px;
	  width: 25px;
	  position: relative;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: center;
	  animation: scaling-squares-animation 1250ms;
	  animation-iteration-count: infinite;
	  transform: rotate(0deg);
	}

	.scaling-squares-spinner .square {
	  height: calc(25px * 0.25 / 1.3);
	  width: calc(25px * 0.25 / 1.3);
	  margin-right: auto;
	  margin-left: auto;
	  border: calc(25px * 0.04 / 1.3) solid #d6cb95;
	  position: absolute;
	  animation-duration: 1250ms;
	  animation-iteration-count: infinite;
	}

	.scaling-squares-spinner .square:nth-child(1) {
	  animation-name: scaling-squares-spinner-animation-child-1;
	}

	.scaling-squares-spinner .square:nth-child(2) {
	  animation-name: scaling-squares-spinner-animation-child-2;
	}

	.scaling-squares-spinner .square:nth-child(3) {
	  animation-name: scaling-squares-spinner-animation-child-3;
	}

	.scaling-squares-spinner .square:nth-child(4) {
	  animation-name: scaling-squares-spinner-animation-child-4;
	}


	@keyframes scaling-squares-animation {

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

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

	@keyframes scaling-squares-spinner-animation-child-1 {
	  50% {
		transform: translate(150%,150%) scale(2,2);
	  }
	}

	@keyframes scaling-squares-spinner-animation-child-2 {
	  50% {
		transform: translate(-150%,150%) scale(2,2);
	  }
	}

	@keyframes scaling-squares-spinner-animation-child-3 {
	  50% {
		transform: translate(-150%,-150%) scale(2,2);
	  }
	}

	@keyframes scaling-squares-spinner-animation-child-4 {
	  50% {
		transform: translate(150%,-150%) scale(2,2);
	  }
	}
/* 最上部へ -------------------------*/
#page-top {
	position: relative;
	bottom: 20px;
	left: 95%;
	font-size: 0.7em;
	display: block;
	width: 70px;
	opacity:0;
	transition: 0.5s;
}
@media (max-width: 540px){
	#page-top {
		left: 80%;
	}
}
#page-top a {
	text-decoration: none;
	color: #fff;
	width: 70px;
	padding: 33px 0 22px 0;
	text-align: center;
	display: block;
	background-image: url(../../common/images/pagetop.svg);
	transition: 0.5s;
	background-size: 70px auto;
	background-position: center;
	background-repeat: no-repeat;
}
#page-top:hover {
	opacity:0.7;
	bottom:25px;
	transition: 0.3s;
}

/* スライド矢印 -------------------------------------- */
.slick-arrow {
	z-index:5; /* 矢印画像を最前面へ */
}
.slide-arrow{
	position: absolute;
	top: 40%;
	cursor: pointer;
	transition: 0.5s;
}
.slide-arrow:hover{
	opacity: 0.5;
}

.prev-arrow{
	left: -10%;
}
.next-arrow{
	right: -10%;
}
.slide-arrow img{
	max-width: 80px!important;
}

/* テキストを非表示から上へ出現させる --------------- */
.details {
  color: #000;
  position: absolute;
  z-index: 3;
}
.details span {
  display: inline;
  opacity: 0;
  position: relative;
  top: 30px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 1.0s;
          transition-duration: 1.0s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}


.details:focus:before,
.details:focus span, .details.active:before,
.details.active span {
  opacity: 1;
}

.details:focus span, .details.active span {
  top: 0;
}

/* 下線アニメーション（横） --------------- */
.underline {
  display: inline-block;
  padding-bottom: 4px;
  position: relative;
}
.underline::after {
  background-color: #FFF;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  -webkit-transition: .5s all;
  transition: .5s all;
  width: 0;
  box-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px;
}
.underline.active:after {
  width: 100%;
}
/* 左から右 --------------- */
.underline.to-right::after {
  left: 0;
}
/* 右から左 --------------- */
.underline.to-left::after {
  right: 0;
}
/* 中央から両側 --------------- */
.underline.center::after {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

/* 下線アニメーション（縦） --------------- */
.underlinerl {
  display: inline-block;
  padding-bottom: 4px;
  position: relative;
  writing-mode: vertical-rl;
}
.underlinerl::after {
  background-color: #FFF;
  bottom: 0;
  content: '';
  display: block;
  height: 0;
  position: absolute;
  -webkit-transition: .5s all;
  transition: .5s all;
  width: 1px;
  box-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px;
}
.underlinerl.active:after {
  height: 100%;
}
/* 左から下 --------------- */
.underlinerl.from-left::after {
  top: 0;
  left:-5px;
}
/* 右から下 --------------- */
.underlinerl.from-right::after {
  top:0;
  right: -5px;
}

/* scroll矢印 --------------------------------*/
.btm_arrow{
	position: absolute;
	bottom:30px;
	width:100%;
	height:50px;
	color:#000;
	z-index: 5;
}
.btm_arrow .arrow {
  padding-top: 70px;
}
.btm_arrow .arrow span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 1.5s infinite;
	animation: sdb 1.5s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}
.btm_arrow .scroll {
	display: block;
	text-align: center;
	position: relative;
	top: 55px;
	color: #000;
}
/* YouTube --------------------------------*/


.youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
  text-align: center;
}

.youtube iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}