@charset "UTF-8";
/*=================================
リセットレイアウト
===================================*/
body{
    font-family:"Century Gothic", sans-serif;
	color: #333;
	-webkit-font-smoothing: antialiased;/* Mac OS X/macOS でのみ動作 サブピクセルではなく、ピクセルレベルでフォントを滑らかにします。*/
	-moz-osx-font-smoothing: grayscale;/* Mac OS X/macOS でのみ動作 サブピクセルではなくグレースケールのアンチエイリアスで、テキストを描画します。暗い背景に明るいテキストを表示する際に、サブピクセルレンダリングからアンチエイリアシングに切り替えることで、より明るく見えるようになります。*/
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;/* 単語の途中で改行するかどうかを指定 単語の途中で自動改行 */}
html {
  box-sizing: border-box;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;}
*,
::before,
::after {
  background-repeat: no-repeat;
  box-sizing: inherit;}
::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;}
* {
  padding: 0;
  margin: 0;}
body {background-color:#fff;}
body {margin: 0;}
audio:not([controls]) {
  display: none;
  height: 0;}
hr {overflow: visible;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {display: block;}
summary {display: list-item;}
small {font-size: 80%;}
[hidden],
template {display: none;}
abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;}
a {background-color: transparent;
  -webkit-text-decoration-skip: objects;}
a:active,
a:hover {outline-width: 0;}
code,
kbd,
pre,
samp {font-family: monospace, monospace;}
b,
strong {font-weight: bolder;}
dfn {font-style: italic;}
mark {
  background-color: #ff0;
  color: #000;}
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none;}
progress {vertical-align: baseline;}
svg:not(:root) {overflow: hidden; }
audio,
canvas,
progress,
video {display: inline-block;}
@media screen {
  [hidden~="screen"] {
    display: inherit;}
  [hidden~="screen"]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;}
}
[aria-busy="true"] {
  cursor: progress;
}
[aria-controls] {
  cursor: pointer;
}
[aria-disabled] {
  cursor: default;
}
p {text-decoration: none}
/*=================================
基礎設定のレイアウト
===================================*/
/*header設定*/
#header{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 0;/*高さを全画面にあわせる*/
} 
/* ########### 768px 以下 ########### */
@media (max-width:768px){
 #container{
width: 100%;
height: auto;
z-index: 0;
margin-left: auto;
margin-right: auto;
}
/* main-area左 */
#main-area-top{
}
/* sub-area右 */
#sub-area{

}
}
/* ########### 769px 以上 ########### */
@media (min-width:769px){
/* main-area左 */
#main-area-top{
width: 82%;
margin-top: auto;
margin-left: auto;
margin-right: auto;
padding: 0;
z-index: 0;
	
}
/* sub-area右 */
#sub-area{
width: 13%;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0;
z-index: 0;

}
}
/* ########### 768pxから960pxまで ########### */
@media screen and (min-width: 769px) and (max-width: 960px) {
 #container{
display: flex;
width: 100%;
height: auto;
z-index: 0;
margin-left: auto;
margin-right: auto;
padding-right:20px;
padding-left:20px;
}
}
/* ########### 961px 以上 ########### */
@media (min-width:961px){
 #container{
display: flex;
max-width: 1130px;
height: auto;
z-index: 0;
margin-left: auto;
margin-right: auto;
padding-right:15px;
padding-left:15px;

}
}

/*=================================
背景画像レイアウト
===================================*/
.front-img{
     position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
} 
.front-img ul{
}
.front-img img {
    min-height: 100%;
    min-width: 100%;   
}
.front-img li:nth-child(1) { 
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.front-img li:nth-child(2) {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}
@-webkit-keyframes front-anime { 
    0% {
        -webkit-animation-timing-function: ease-in;
        opacity: 0;
    }
    25% {
        -webkit-transform: scale(1.01);
        opacity: 1;
        -webkit-animation-timing-function: ease-out; 
    } 
    50% {
        -webkit-transform: scale(1.02);
        opacity: 1;
    }
    80% {
        -webkit-transform: scale(1.1);
        opacity: 0;
    }
    100% { opacity: 0 }
}
@keyframes front-anime { 
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
    }
    25% {
        transform: scale(1.01);
        opacity: 1;
        animation-timing-function: ease-out; 
    } 
    50% {
        transform: scale(1.02);
        opacity: 1;
    }
    80% {
        transform: scale(1.1);
        opacity: 0;
    }
    100% { opacity: 0 }
}
/* ########### 768px 以下 ########### */
@media (max-width:768px){
.front-img ul{
}
.front-img-pc{display: none
}
.front-img li {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;

    width: 56.25vh; /* 9:16 の幅→9 ÷ 16＝ 177.77% */
    height: 177.77777778vw; /* 9:16の幅 → 16 ÷ 9 = 56.25% */
    min-height: 100%;
    min-width: 100%;
   top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    -webkit-animation: front-anime 16s linear infinite 0s;
    animation: front-anime 16s linear infinite 0s;	
}
}
/* ########### 769px 以上 ########### */
@media (min-width:769px){
.front-img ul{
}
.front-img-sp{display: none
}
.front-img li {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;

    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
   top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    -webkit-animation: front-anime 16s linear infinite 0s;
    animation: front-anime 16s linear infinite 0s;	
}
}
/*=================================
ナビゲーションレイアウト
===================================*/
/*スマホの空き状況ボタン*/
.aki{
width: 100%;
display: flex;
justify-content: center;
margin-top: 10px
}
.aki a{display: block;
	width: 75%;
    background-color:#265CFF;
    border-radius: 1px;
    align-items: center;
	text-align:center;
	padding: 8px 0px 8px 0px;
	font-size: 14px;
    font-family: "Klee One", cursive;
    font-weight: 400;
    color: #fff;
	line-height: 1;
    text-decoration: none;
	letter-spacing: 0.05em;
    transition: 0.3s ease-in-out;
}
.aki a:hover{
    background:rgba(255, 255, 77, 0.8);
    color:#265CFF;
}
/*インスタ*/
.sns img{
	width:28px;
	height: auto;
	margin-top: 7px
}
.sns  a{
border: none;
transition:all 0.3s;}
.sns a:hover {opacity: 0.3}
/*メニューふりがな*/
.furi{font-size: 11px;
color: #265CFF;
letter-spacing: 0em}
/* ########### 427px 以下 ########### */
@media screen and (max-width: 427px) {
/*ナビゲーションPC*/
.nav2{
display: none
}	
/*予約の固定*/
.circle{
display: none}
nav {
  width: 200px;
  height: 100%;
  padding-top: 10px;
  background-color: rgba(255, 255, 255, 0.9);
	border-left: 1px solid #000;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 10;
  transform: translate(200px);
  transition: all .5s;
	    font-family: "Klee One", cursive;
    font-weight: 400;
}
/*ナビゲーションSP*/
nav ul{
	margin-top:0px;
	float:none;
	list-style:none;

}
nav ul li a{
	text-align:left;
	display: block;
	color: #000;
	text-decoration: none;
	font-size:16px;
	line-height:20px;
	letter-spacing: 0.15em;
	margin-left:30px;
transition:all 0.3s;
}

nav ul li a:hover {color:#265CFF;
display: block;
}

nav li {
  color: #fff;
  text-align: center;
  padding: 3px 0;
}
nav.open {
  transform: translateZ(0);
}		
}

/* ########### 428pxから530pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 530px) {
/*ナビゲーションPC*/
.nav2{
display: none
}	
/*予約の固定*/
.circle{
display: none}
nav {
  width: 230px;
  height: 100%;
  padding-top: 30px;
  background-color: rgba(255, 255, 255, 0.9);
	border-left: 1px solid #000;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 10;
  transform: translate(230px);
  transition: all .5s;
	    font-family: "Klee One", cursive;
    font-weight: 400;
}
/*ナビゲーションSP*/
nav ul{
	margin-top:0px;
	float:none;
	list-style:none;

}
nav ul li a{
	text-align:left;
	display: block;
	color: #000;
	text-decoration: none;
	font-size:16px;
	line-height:20px;
	letter-spacing: 0.15em;
	margin-left:30px;
transition:all 0.3s;
}

nav ul li a:hover {color:#265CFF;
display: block;
}

nav li {
  color: #fff;
  text-align: center;
  padding: 8px 0;
}
nav.open {
  transform: translateZ(0);
}
}
/* ########### 531pxから768pxまで ########### */
@media screen and (min-width: 531px) and (max-width: 768px) {
/*ナビゲーションPC*/
.nav2{
display: none
}	
/*予約の固定*/
.circle{
display: none}
nav {
  width: 250px;
  height: 100%;
  padding-top: 80px;
  background-color: rgba(255, 255, 255, 0.9);
	border-left: 1px solid #000;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 10;
  transform: translate(250px);
  transition: all .5s;
	    font-family: "Klee One", cursive;
    font-weight: 400;
}
/*ナビゲーションSP*/
nav ul{
	margin-top:0px;
	float:none;
	list-style:none;

}
nav ul li a{
	text-align:left;
	display: block;
	color: #000;
	text-decoration: none;
	font-size:16px;
	line-height:20px;
	letter-spacing: 0.15em;
	margin-left:30px;
transition:all 0.3s;
}

nav ul li a:hover {color:#265CFF;
display: block;
}

nav li {
  color: #fff;
  text-align: center;
  padding: 10px 0;
}
nav.open {
  transform: translateZ(0);
}	
}
/* ########### 768px 以下 ########### */
@media screen and (max-width: 768px) {
/*三本線*/
.menu-trigger {
  display: inline-block;
  width: 36px;
  height: 28px;
  vertical-align: middle;
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
/*   transform: translateX(0);
  transition: transform .5s;
 */}
/* .menu-trigger.active {
  transform: translateX(-250px);
}
 */.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #265CFF;
  transition: all .5s;
}
.menu-trigger.active span {
  background-color: #265CFF;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(12px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
  top: 12px;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-12px) rotate(45deg);
}

}
/* ########### 769px 以上 ########### */
@media screen and (min-width: 769px) {
/*ナビゲーションsp*/
nav{
display: none
}	
/*ハンバーガーボタン*/
.menu-trigger{
display: none
  }
#navArea{
  }
.navArea-inner{
position: fixed;
top:60px;
  }
/*ナビゲーションPC*/
.nav2{
position: absolute;
padding: 10px 0px 15px 0px;
background-color: rgba(255, 255, 255, 0.6);
height: auto;
box-sizing:border-box;
border: 1px solid #000;
overflow-x: hidden;
overflow-y: auto;
transition: all .5s;
z-index: 3;
display: block
}
.nav2 ul{list-style: none;}

.nav2 a{
	display: block;
	text-decoration: none;
	color: #000;
	padding:12px 0px 0px 0px;;
	transition:all 0.3s;
	text-align: center;
	font-size: 14px;
	font-family: "Klee One", cursive;
	font-weight: 500;
	font-style: normal;
	line-height: 1.0em;
	letter-spacing: 0em
}
.nav2 a:hover {color:#265CFF;
display: block;}
	
/*予約の固定*/
.circle{
margin-left: auto;
margin-right: auto;
position: absolute;
top:420px;
}
.circle a{
width: 100%;
height: 100%;
position: relative;
display: inline-block;
border-radius: 50%;
background: rgba(38, 92, 255, 0.7);
text-align:center;
transition:all 0.3s;
}
.circle a span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align:center;
  color: #fff;
  font-size: 16px;
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
transition:all 0.3s;
}

.circle a:hover {
background-color: rgba(255, 255, 77, 0.8);
color: #265CFF;cursor: pointer;}
.circle a span:hover {
color: #265CFF;
}	
}
/* ########### 769pxから960pxまで ########### */
@media screen and (min-width: 769px) and (max-width: 960px) {
/*ナビゲーションPC*/
.nav2{
width:110px;
}
/*予約の固定*/
.circle a{
width: 110px;
height: 110px;
}
.circle a span {
  width :110px;
}
}
/* ########### 961px 以上 ########### */
@media screen and (min-width: 961px) {

/*ナビゲーションPC*/
.nav2{
width:130px;
}	
/*予約の固定*/
.circle a{
width: 130px;
height: 130px;
}
.circle a span {
  width :130px;
}
}



/*==================================================
パンくず
===================================*/
.breadcrumb-002 {
	width: 90%;
    display: flex;
	justify-content: flex-end;
    gap: 0 15px;
    list-style: none;
    padding: 0;
    font-size: .8em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
}
.breadcrumb-002 li {
    display: flex;
    align-items: center;
}
.breadcrumb-002 li:not(:last-child)::after {
    display: inline-block;
    margin-left: 15px;
    color: #000333;
    content: '/';
}
.breadcrumb-002 a {
    color: #000333;
    text-decoration: none;
}
/*========= span設定のCSS ===============*/
.mini{
font-size: 14px;
letter-spacing: 0.2em
}
.midori{
color: teal;
}
.midori13{
color: teal;
font-size: 13px
}
.ao{
color: #265CFF;
}
.ao14{
color: #265CFF;
font-size: 14px
}
.kuro{
color: #000;
}
.aka{color:#FF2626}
.line{
background:linear-gradient(transparent 60%, #ff6 60%);}

.f-size14{
font-size: 14px;
}
.futoi{
font-weight: bold;
}
a.arealink {
color: #265CFF;
	font-size: 15px
}
a:hover.arealink {
color: #FFFF00;
}
/*========= ヘッダーロゴ設定のCSS ===============*/
.top {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	position: relative;
}
.top img{
	position:absolute;
	height: auto
}
/*==================================================
メインタイトル
===================================*/
/*メイン大*/
.midashi1 {
text-align: center;
margin-bottom: 0px
}
.midashi1 h3 {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  font-size: 28px;
  color: #265CFF;
	font-family: "Klee One", cursive;
	font-weight: 500;
	font-style: normal;
letter-spacing: 0.15em;
}
.midashi1 h3:before {
  content: '';
  position: absolute;
  bottom: -8px;
  display: inline-block;
  width: 40px;
  height: 1px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #265CFF;
  border-radius: 1px;
}
.midashi1 p {
font-size: 15px;
font-family: "Klee One", cursive;
font-weight: 500;
font-style: normal;
letter-spacing: 0.07em;
color: #265CFF;
}

/*==============
トップテキスト
==============*/
.top-text{
width: 100%;
height: 120px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
}
.top-text p{
text-align: center;
vertical-align: baseline;
color: #000;
font-family: "Klee One", cursive;
font-weight: 600;
font-style: normal;
padding: 0 3% 0 3%;
}

/*==============
エリア範囲指定
==============*/
/*内容*/
.area{
height: auto;
margin-left: auto;
margin-right: auto;
font-family: "Klee One", cursive;
color: #000
}
.area a{
text-decoration: none;
transition:all 0.3s;
}
.area a:hover {
}
.area li{
list-style: none;
}
/*内容*/
.area p{
font-size: 15px;
line-height: 1.8em;
letter-spacing: 0em;
text-align:justify;
}
/* ########### 427px 以下 ########### */
@media screen and (max-width: 427px) {
/*========= ヘッダーロゴ設定のCSS ==========*/
.top {
	padding-top: 20px;
	margin-bottom:40px;
}
.top img{
	top: 15px;
    right:0;
    left:5px;
	bottom: 0;
	width: 90px;
}

/*==============
トップテキスト
==============*/
.top-text{
height: 90px;
margin-bottom: 20px;
}	
.top-text p{
font-size: 15px;
letter-spacing: 0em;
line-height: 1.7em;
padding: 0 7% 10px 7%
}
}
/* ########### 427px 以下 ########### */
@media screen and (max-width: 427px) {
/*内容*/
.area{
width: 100%;
margin-bottom: 50px;
padding: 30px;
}
}
/* ########### 428pxから530pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 530px) {
/*========= ヘッダーロゴ設定のCSS ==========*/
.top {
	padding-top: 25px;
	margin-bottom:50px;
}
.top img{
	top: 10px;
    right:0;
    left:20px;
	bottom: 0;
	width: 100px;
}
/*==============
トップテキスト
==============*/
.top-text{
height: 95px;
margin-bottom: 20px;
}
.top-text p{
font-size: 16px;
letter-spacing: 0em;
line-height: 1.5em;
padding: 0 0% 10px 0%
}

}
/* ########### 428pxから768pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 768px) {
/*内容*/
.area{
width: 100%;
margin-bottom: 50px;
padding: 40px;
}
}
/* ########### 531px 以上 ########### */
@media screen and (min-width: 531px) {
/*==============
トップテキスト
==============*/
.top-text{
height: 95px;
margin-bottom: 20px;
}
.top-text p{
font-size: 16px;
letter-spacing: 0.2em;
line-height: 1.5em
}
}
/* ########### 769px 以上 ########### */
@media screen and (min-width: 769px) {
/*内容*/
.area{
width: 100%;
margin-bottom: 50px;
padding: 30px;
}
}
/* ########### 531pxから768pxまで ########### */
@media screen and (min-width: 531px) and (max-width: 768px) {
/*========= ヘッダーロゴ設定のCSS ==========*/
.top {
	padding-top: 25px;
	margin-bottom:50px;
}
.top img{
	top: 10px;
    right:0;
    left:20px;
	bottom: 0;
	width: 100px;
}

/*==============
トップテキスト
==============*/
.top-text{
height: 95px;
margin-bottom: 20px;
}
}
/* ########### 769pxから960pxまで ########### */
@media screen and (min-width: 769px) and (max-width: 960px) {
/*========= ヘッダーロゴ設定のCSS ==========*/
.top {
	padding-top: 35px;
	margin-bottom:50px;
}
.top img{
	top:15px;
    right:0;
    left:50px;
	bottom: 0;
	width: 110px;
}

/*==============
トップテキスト
==============*/
.top-text{
height: 95px;
margin-bottom: 30px;
}
}
/* ########### 961px 以上 ########### */
@media screen and (min-width: 961px) {
/*========= ヘッダーロゴ設定のCSS ==========*/
.top {
	padding-top: 55px;
	margin-bottom:60px;
}
.top img{
	top:25px;
    right:0;
    left:50px;
	bottom: 0;
	width: 120px;
}

/*==============
トップテキスト
==============*/
.top-text{
height: 120px;
margin-bottom: 50px;
}
}
/*=================================
フッターレイアウト
===================================*/
footer {width: 100%;
	color:#000;
	font-family:'M PLUS 1p', sans-serif;

}
footer p{
	font-family: "Klee One", cursive;
	font-weight: bold;
}
footer img{
	height: auto;
	border: none;
}

/* フッターロゴ */
h2 {text-align: center}	
	
h2 img{
	height:auto;
	}

h2 a{
border: none;
transition:all 0.3s;}
	
h2 a:hover	{opacity: 0.3}
/* フッター店名 */
footer h4{
	font-size: 24px;
	letter-spacing: 0.15em;
	text-align: left;
	font-family: "Klee One", cursive;
	font-weight: 600;
	font-style: normal;	
	margin-bottom: 15px
}
footer h4 span{
	font-size: 18px;
}

footer a.tel{
	
	line-height:30px;
	letter-spacing: 0.15em;
	text-decoration: none;
	color:#0040FF;
	transition:all 0.3s;
}
footer a.tel:hover {color:#FFFF00;}

footer a.pri{
	color:#0040FF;

	line-height:30px;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition:all 0.3s;
}
footer a.pri:hover {color:#FFFF00;}

/* 支払いボタン */
.pay{
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;

}
.pay ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content:center ;
}
.pay li {
list-style-type: none;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 5px
}

.pay li img{
margin-left: auto;
margin-right: auto
}
	  

/* コピーライト */
.copy p{
	font-size: 11px;
	color:#265CFF;
	text-align:center;
	letter-spacing: 0.2em;
	}

/* ########### 427px 以下 ########### */
@media (max-width:427px){
	
/*フッター予約ボタンsp*/
.contact-sp{
width: 100%;
height: 50px;
background: #265CFF;
margin-left: auto;
margin-right: auto;
display: flex;
position: fixed;
bottom: 0; /*下に固定*/
z-index: 10;
}
.contact-sp ul {
margin: auto;
width: 95%;
}
.contact-sp ul {
position:relative;/*絶対値指定の親要素に必要*/
display:flex;/*要素を横並びに*/
justify-content:space-between;/*横並びにした要素を両端に配置*/
}
.contact-sp ul:before {
content:"";/*疑似要素の中身を指定*/
position:absolute;/*絶対位置指定*/
left:50%;/*横位置の指定*/
top:0;/*縦位置の指定*/
bottom:0;
background:#fff;/*線の色指定*/
width:1px;/*線の幅指定*/
height:100%;/*線の高さ指定*/

}
.contact-sp li{
list-style:none;
text-align: center;
margin-left: auto;
margin-right: auto;
padding-right: 5px
}
    
.contact-sp p{
color: #fff;
font-size: 12px;
letter-spacing: 0em;
padding-top: 0px;
margin-top: 0px;
text-align: center;
font-family: "Klee One", cursive;
font-weight: 400;
font-style: normal;
}

.contact-sp a{
color: #fff;
font-size: 16px;
display: block;
text-decoration: none;
letter-spacing: 0em;
margin-bottom: 0px;
font-family: "Klee One", cursive;
font-weight: 500;
font-style: normal;
transition:all 0.3s;
}
.contact-sp a:hover {
color:#FFFF00
}

/* 支払いボタン */
.pay{
width: 95%;}

.pay li {
width: 60px;
}
.pay li img{
width: 75%;
}
}
/* ########### 427px 以下 ########### */
@media (max-width:427px){
/* フッター下部空き */
footer {
padding-bottom: 60px;
}
/* フッターロゴ */
h2 img{
max-width:140px;
height:auto;
margin-bottom: 30px}	
}
/* ########### 768px 以下 ########### */
@media (max-width:768px){

/*フッター予約ボタンpc*/
.contact{
display: none
}

/* お店情報をたてに並べる設定 */
.box-f1	{
	width: 100%;
}
.box-f2	{	
	width:100%}

.box-f {display:block;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom:50px;

}
footer p{
	font-size: 15px;
	line-height:32px;
	letter-spacing: 0em;
	text-align: left
}
}
/* ########### 428pxから768pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 768px) {
/* フッター下部空き */
footer {
padding-bottom: 70px;
}
/*フッター予約ボタンsp*/
.contact-sp{
width: 100%;
height: 55px;
background-color: #265CFF;
margin-left: auto;
margin-right: auto;
display: flex;
position: fixed;
bottom: 0; /*下に固定*/
z-index: 10;
}
.contact-sp ul {
margin: auto;
width: 95%;
}
.contact-sp ul {
position:relative;/*絶対値指定の親要素に必要*/
display:flex;/*要素を横並びに*/
justify-content:space-between;/*横並びにした要素を両端に配置*/
}
.contact-sp ul:before {
content:"";/*疑似要素の中身を指定*/
position:absolute;/*絶対位置指定*/
left:50%;/*横位置の指定*/
top:0;/*縦位置の指定*/
bottom:0;
background:#fff;/*線の色指定*/
width:1px;/*線の幅指定*/
height:100%;/*線の高さ指定*/

}
.contact-sp li{
list-style:none;
text-align: center;
margin-left: auto;
margin-right: auto;
}
    
.contact-sp p{
color: #fff;
font-size: 13px;
letter-spacing: 0.1em;
padding-top: 0px;
margin-top: 0px;
text-align: center;
font-family: "Klee One", cursive;
font-weight: 400;
font-style: normal;
}

.contact-sp a{
color: #fff;
font-size: 17px;
display: block;
text-decoration: none;
letter-spacing: 0.1em;
margin-bottom: 2px;
font-family: "Klee One", cursive;
font-weight: 500;
font-style: normal;
transition:all 0.3s;
}
.contact-sp a:hover {
color:#FFFF00
}
/* フッターロゴ */
h2 img{
max-width:140px;
height:auto;
margin-bottom: 30px}
	
/* 支払いボタン */
.pay{
width: 90%;}

.pay li {
width: 60px;
}
.pay li img{
width: 75%;
}
}
/* ########### 769px 以上 ########### */
@media (min-width:769px){
/* フッター下部空き */
footer {
padding-bottom: 15px;
}
/*フッター予約ボタンsp*/
.contact-sp{
display: none
}
/*フッター予約ボタン*/
.contact{
	width: 95%;
	height: 135px;
	border: 1px solid #265CFF;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	padding-top: 15px;
	padding-bottom: 0px;
}
.contact ul {position:relative;/*絶対値指定の親要素に必要*/
display:flex;/*要素を横並びに*/
justify-content:space-between;/*横並びにした要素を両端に配置*/
}
.contact ul:before {
content:"";/*疑似要素の中身を指定*/
position:absolute;/*絶対位置指定*/
left:50%;/*横位置の指定*/
top:20%;/*縦位置の指定*/	
background:#265CFF;/*線の色指定*/
width:1px;/*線の幅指定*/
height:60%;/*線の高さ指定*/

}
.contact li{
padding:0px;/*余白指定*/
list-style:none;/*リストスタイルを非表示に*/
text-align: center;
margin-left: auto;
margin-right: auto;
}
    
.contact p{
color: #265CFF;
font-size: 17px;
letter-spacing: 0.1em;
padding-top: 0px;
margin-top: 0px;
text-align: center;
font-family: "Klee One", cursive;
font-weight: 400;
font-style: normal;
}

.contact a{
color: #265CFF;
font-size: 19px;
display: block;
text-decoration: none;
letter-spacing: 0.25em;
margin-top: 10px;
margin-bottom: 10px;
font-family: "Klee One", cursive;
font-weight: 600;
font-style: normal;
transition:all 0.3s;
}
.contact a:hover {
color:#FFFF00
}
.contact span {
font-size: 13px;
color: #265CFF;
letter-spacing: 0.10em;
}
/*==================================================
コチラ
===================================*/
.rese_btn {
  display: inline-block;
  width: 125px;
  text-align: center;
  text-decoration: none;
  color: #265CFF;
font-family: "Klee One", cursive;
font-weight: 600;
font-style: normal;
}
.rese_btn a {
  display: inline-block;
  width: 125px;
  text-align: center;
  text-decoration: none;
  color: #265CFF;
  position: relative;
  font-size: 20px;
}

.rese_btn a:hover {
 opacity: 0.7;
color:#FFFF00;
}
.rese_btn a:hover::before {
right: -5px;
opacity: 0.7;
color:#FFFF00;
}
/* お店情報を横に2つ並べる設定 */
.box-f1	{
	width: 25%;
	margin-right:15px;
}
.box-f2	{	
	width: 75%}

.box-f {display: flex;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom:50px;
}
/* フッターロゴ */
h2 img{
	max-width:120px;
	height:auto;
	}
footer p{
	font-size: 15px;
	line-height:30px;
	letter-spacing: 0.08em;
	text-align: left
}
/* 支払いボタン */
.pay{
width: 100%;}
.pay li {
width: 53px;
}
.pay li img{
width:72%;
}
}


/* ------------------- 記事基本構造 ------------------- */
/* ボックスの上下の間隔 */
.sub-header	{padding-top: 5px;}
.contents {height: auto;
margin-left: auto;
margin-right: auto;
font-family: "Klee One", cursive;
color: #000
}
/* ########### 427px 以下 ########### */
@media screen and (max-width: 427px) {
/*内容*/
.contents{
width: 100%;
margin-bottom: 50px;
padding: 30px 30px 0px 30px;
}
}

/* ########### 428pxから768pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 768px) {
/*内容*/
.contents{
width: 100%;
margin-bottom: 50px;
padding: 40px 40px 0px 40px;
}
}
/* ########### 769px 以上 ########### */
@media screen and (min-width: 769px) {
.contents{
width: 100%;
margin-bottom: 50px;
padding: 50px 50px 0px 50px;
}
}
/* ########### 961px 以上 ########### */
@media (min-width: 961px) {
	/* 全体の横幅 */
.sub-header
		{width: 100%;
		margin-left: auto;
		margin-right: auto}
}
/* ------------------- 記事の概要 ------------------- */

/* 概要 */
.gaiyou a	{display: block;
	padding: 20px 0;
	border-bottom: solid 1px #265CFF;
	color: #000000;
	text-decoration: none}

.gaiyou a:hover	{background-color: rgba(255, 255, 255, 0.6)}

.gaiyou a:after	{content: "";
	display: block;
	clear: both}

.gaiyou img	{float: left;
	width: 200px}

.gaiyou .text	{float: none;
	width: auto;
	margin-left: 230px}


.gaiyou h1	{margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
color:#265CFF}

.gaiyou p	{margin: 0;
	font-size: 14px}

.gaiyou .kiji-date	{margin-bottom: 8px}

/* 概要（大サイズ） */
.gaiyou-large a	{display: block;
	padding: 20px 0;
	border-bottom: dotted 2px #dddddd;
	color: #000000;
	text-decoration: none}

.gaiyou-large:first-child a	{padding-top: 0}

.gaiyou-large a:hover	{background-color: #eeeeee}

.gaiyou-large h1	{margin-top: 10px;
	margin-bottom: 10px;
	font-size: 26px;
}

.gaiyou-large p	{margin: 0;
	font-size: 14px}

.gaiyou-large .kiji-date	{margin-bottom: 8px}

.gaiyou-large .thumb	{width: 100%;
	height: 350px;
	background-size: cover;
	background-position: 50% 50%}


/* ########### 530px 以下 ########### */
@media (max-width: 530px) {
	.gaiyou-large a	{padding: 10px 0}

	.gaiyou-large h1	{font-size: 18px}

	.gaiyou-large p	{font-size: 12px}

	.gaiyou-large .thumb	{height: 200px}
}
/* ########### 530px 以下 ########### */
@media (max-width: 530px) {
	.gaiyou a	{padding: 10px 0}

	.gaiyou img	{width: 100px}

	.gaiyou .text	{margin-left: 110px}

	.gaiyou h1	{font-size: 16px}

	.gaiyou p	{visibility: hidden;
		height: 0}

	.gaiyou .kiji-date	{margin-bottom: 0}
}
/* ------------------- 記事 ------------------- */

/* 記事 */
.kiji:after	{content: "";
	display: block;
	clear: both}
.kiji h1	{margin-top: 0;
	margin-bottom: 10px;
	font-size: 36px;
color:#265CFF}

.kiji p	{margin-top: 0;
	margin-bottom: 20px;}
/* ########### 427px 以下 ########### */
@media (max-width: 427px) {
	.kiji h1	{font-size:24px;
		color:#265CFF}

	.kiji p	{font-size: 14px}
}
/* 投稿日・更新日 */
.kiji-date	{margin-bottom: 20px;
	color: #000;
	font-size: 12px}
/* ########### 530px 以下 ########### */
@media (max-width: 530px) {
	.kiji-date	{font-size: 11px}
}

/* ------------------- サイドバー ------------------- */
time2{display: block;
	padding: 5px 0 0 0;
	color:#000;
	font-size: 12px
	}
/* メニュー */
.mymenu	{display:block;
	width:100%;
	}

.mymenu h2	{margin-top: 0;
margin-bottom: 10px;
padding:10px 0px 10px 20px;
color: #fff;
font-size: 15px;
font-family: "Klee One", cursive;
font-weight: 400;
text-align: center;
background-color: rgba(38, 92, 255, 0.7);}


.mymenu ul	{margin: 0;
	padding: 0;
	list-style: none;
text-align:left;}

.mymenu li a	{display: block;
	padding: 0px 0px 8px 0px;
	color: #000000;
	font-size: 15px;
	text-decoration: none;
text-align:left;}

.mymenu li a:hover	{background-color: rgba(255, 255, 255, 0.6)}

/* サムネイル画像を付けたメニューのデザイン */
.mymenu-thumb li a	{padding: 5px 0;
	border-bottom: dotted 1px #dddddd;
	color: #265CFF;
font-family: "Klee One", cursive;
font-weight: 400;}

.mymenu-thumb li a:after	{content: "";
	display: block;
	clear: both}

.mymenu-thumb li .thumb	{float: left;
	width: 60px;
	height: 60px;
	background-size: cover;
	background-position: 50% 50%}

.mymenu-thumb li .text	{float: none;
	width: auto;
	margin-left: 75px}

.mymenu-thumb li span	{display: block;
	color: #666666;
	font-size: 12px}

/* ########### 427px 以下 ########### */
@media screen and (max-width: 427px) {
.mymenu{
margin-bottom: 50px;
padding: 0px 30px 0px 30px;
}
}
/* ########### 428pxから768pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 768px) {
.mymenu{
margin-bottom: 80px;
padding: 0px 40px 0px 40px;
}
}
/* ########### 769px 以上 ########### */
@media screen and (min-width: 769px) {
.mymenu{
margin-bottom: 80px;
padding: 0px 50px 0px 50px;
}
}
/* ------------------- 画像 ------------------- */

/* 画像のキャプション */
.wp-caption-text	{margin: 0;
	color: #666666;
	font-size: 10px;
	text-align: center}

.wp-caption-text a	{color: #666666}

/* 画像の配置 */
.aligncenter	{display: block;
	margin-top: 30px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto}
/* ########### 530px 以下 ########### */
@media (max-width: 530px) {
	.alignleft, .alignright	{display: block;
		margin-top: 30px;
		margin-bottom: 30px;
		margin-left: auto;
		margin-right: auto}
}
/* ########### 531px 以上 ########### */
@media (min-width: 531px) {
	.alignleft	{float: left;
		margin-top: 10px;
		margin-bottom: 20px;
		margin-right: 30px}

	.alignright	{float: right;
		margin-top: 10px;
		margin-bottom: 20px;
		margin-left: 30px}
}

/* Internet Explorer用の設定 */
a img	{border: none}
/* 大きい画像用の設定 */
img, .wp-caption	{max-width: 100%;
	height: auto}

/* アイキャッチ画像 */
.catch	{margin-top: 30px;
	margin-bottom: 30px}

/* パンくずリスト */
.bread ol	{margin: 0;
	padding: 0;
	list-style: none}

.bread li a	{display: inline-block;
	padding: 5px 5px;
	color: #000;
	font-size: 12px;
	text-decoration: none}

.bread li a[href]:hover	{color: #265CFF}

.bread ol:after	{content: "";
	display: block;
	clear: both}

.bread li	{float: left;
	width: auto}

.bread li:after	{content: '\003e';
	margin-left: 2px;
	margin-right: 2px;
	color: #000}

.bread li:last-child:after	{content: none}

.bread i	{font-size: 14px}

.bread span	{display: inline-block;
	text-indent: -9999px}

/* ########### 530px 以下 ########### */
@media (max-width: 530px) {
	.bread li:last-child	{text-indent: -9999px}
}

/* ページネーション */
.pagination	{margin: 30px 0 0px;
	text-align: center}

.pagination ul	{display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none}

.pagination li a,
.pagination li > span
	{display: block;
	margin: 0 4px 0 4px;
	padding: 3px 0px 0px 0px;
	border: solid 1px #fff;
		border-radius: 50%;
	color: #000000;
	font-size: 14px;
	text-decoration: none;
width:30px;
height:30px;
}

.pagination li > span
	{background-color: #efefef}

.pagination li a:hover	{background-color: #eeeeee}

.pagination ul:after	{content: "";
	display: block;
	clear: both}

.pagination li	{float: left;
	width: auto}


/* 記事一覧のページネーション */
.pagination-index li .dots
	{padding: 6px 2px;
	border-color: transparent;
	background-color: transparent}

/* ########### 530px 以下 ########### */
@media (max-width: 530px) {
	.pagination-index li a,
	.pagination-index li > span
		{margin: 0;
		padding: 6px 7px;
		border-left: none;
		font-size: 12px}

	.pagination-index li:first-child a,
	.pagination-index li:first-child > span
		{border-left: solid 1px #cccccc}

	.pagination-index li .dots
		{border-right-color: #cccccc}
}

/* ------------------- カテゴリー／タグ ------------------- */

.contents > h1	{margin-top: 0;
	font-size: 34px}

@media (max-width: 530px) {
	.contents > h1	{font-size: 22px}

	.archive .bread li:last-child	{text-indent: 0}
}