@charset "UTF-8";
/*--------------------------------------------------------------
>>> MATSUYA
----------------------------------------------------------------*/

body{
font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
h1, h2, h3, h4, h5, h6{margin-bottom:0;}

#page{margin:0;padding:0;}
.contents{max-width:1280px;margin:0 auto 80px auto;padding:0;}
.contents-40{max-width:1280px;margin:-10px auto 40px auto;padding:0;}
.contents-0{max-width:1280px;margin:0 auto;padding:0;}
.contents-b{max-width:1280px;margin:0 auto 80px auto;padding:0;}
@media only screen and (max-width: 680px) {.contents-b{margin:0 auto;}}

/*title*/
.site-header{background: #fff;}
.header-lead{margin:0 auto;padding:5px 0; font-size:0.8em;color:#000; width:100%;}
@media only screen and (max-width: 680px) {
.header-lead{padding:2px;text-align:center;}
}
.site-title img{max-width:350px; height:auto;}
.site-title{padding:15px 0 15px 0;margin:10px auto;}

.site-branding{margin-bottom:0;	display: flex;
	justify-content: space-between;
	align-items: center;background-image: url("../img/title_bg.png");background-size:80px;}

@media only screen and (max-width: 680px) {
.site-title img{max-width:240px; height:auto;}
.site-title{padding:10px 0 10px 0;vertical-align: middle;left:-10px;position: relative;}
}



  

/*========= ナビゲーション ===============*/
/*========= 上部固定させるためのCSS ===============*/
#header{
/*	height: 100px;/*高さ指定*/
	width:100%;/*横幅指定*/
	/*以下はレイアウトのためのCSS*/

	background:#fff;
	color:#fff;
	text-align: center;
	
}
@media only screen and (max-width: 680px) {
#header{
/*	height: 80px;*/}}

/*JSを使いfixedクラスが付与された際の設定*/
#header.fixed{
	position: fixed;/*fixedを設定して固定*/
  z-index: 1050;/*最前面へ*/
  top:0;/*位置指定*/
  left:0;/*位置指定*/
}

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;

  z-index:999;

    /*ナビの位置と形状*/
  top:-120%;
  width:100%;
  height: 100vh;/*ナビの高さ*/
  background:#eeeeee;
    /*動き*/
  transition: all 0.6s;  opacity: 0.95;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{ top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {
    display: block;
}

/*リストのレイアウト設定*/

#g-nav li{
  list-style: none;
    text-align: center; 
}

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

/*========= ボタン ===============*/
.openbtn1{
  position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
  top:15px;
  right: 10%;
  cursor: pointer;
    width: 50px;
    height:50px;
}
@media only screen and (max-width: 680px) {
 .openbtn1{right: 20px;}}
 
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background-color: #333;
    width: 45%;
  }

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

.openbtn1 span:nth-of-type(2) {
  top:23px;
}

.openbtn1 span:nth-of-type(3) {
  top:31px;
}
.openbtn1 span:nth-of-type(3)::after {
	content:"menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top:5px;
	left:-2px;
	color: #333;
	font-size: 0.6rem;font-family: "メイリオ";
	text-transform: none;
}

.openbtn1.active span:nth-of-type(1) {
  background-color: #333;
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

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

.openbtn1.active span:nth-of-type(3){
  background-color: #333;
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
.openbtn1.active span:nth-of-type(3)::after {
	content:"close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
	top:5px;
	left:4px;color: #333;
}
.menu-item > a:before{	font-size: 0.7em;text-transform: none;margin:0;display:block;line-height:0.8em;}
.menu-item-01 > a:before {
  content: '';}
.menu-item-02 > a:before {
  content: '';}
.menu-item-03 > a:before {
  content: '';}
.menu-item-04 > a:before {
  content: '';}
.menu-item-05 > a:before {
  content: '';}

@media screen and (max-width: 680px) {
#g-nav ul {top:40%;padding-left:0;}
}
/*==================================================
　5-3-8 円が線に変化
===================================*/


.gnavi li a{
    /*円の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    /*線になる丸の形状*/
    width: 100%;
    height: 5px;
    border-radius: 50%;
    background:#333;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0.04, 1);/*X方向0.04、Y方向1*/
    transform-origin:center bottom;/*中央下部基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    height: 2px;/*縦幅を変化*/
    border-radius: 0;/*丸みをなくす*/    
    transform: scale(0.8, 1);/*X方向0.8、Y方向1にスケール拡大*/
}

/*========= フッター ===============*/
/*sticky footer */
html,body{height:100%;}
#page{position:relative;min-height:100%;height:auto;!important;
/*height:100%;*/}
#footer{bottom:0;height:5em;position:absolute;}
.foot{background:#fff;color:#000;padding:0;}
.foot-title img{max-width:120px; height:auto;}
.foot-title{text-align:left;margin:0 auto;}
.f_text1{font-size:1.2em;padding:15px 0 0 10px;}
.f-text1{margin-top:10px;padding:5px 0 30px 15px;}
.foot-info{margin:25px auto;text-align:center;width:80%;}
.f-text{display: inline-block;line-height:1.8em;padding-right:20px; }
.f-text{display: block;line-height:1.8em;padding:20px 25px;/*margin-bottom:10px;*/border-bottom:solid 1px #fff; text-align:left;}
@media screen and (max-width: 770px) {
.foot-title{text-align:center;}
.f_text1{font-size:1.1em;padding:15px 0 0 0;}
.f-text1{text-align:left;padding:15px 0;}
.f-text{padding:5px 10px;display: block;}
}
.site-info{padding-top:0.5em;padding-bottom:7px;font-size:0.8em;}
.foot-navi{width:100%;padding-top:4px;
}
.footcontents{margin:0 auto;max-width:1280px;border-top:#333 1px solid;}
.footadress{margin:10px;font-size:0.9em;}
.f-tel{font-size:1.1em;}
@media screen and (max-width: 770px) {.footadress{margin:10px auto;text-align:center;}}

.t-foot{background:#647359;color:#fff;}
.t-foot-info{margin:17px auto 0 auto;text-align:center;width:80%;}
.t-foot-info h3{font-size: 20px;}



/* 飾り枠 */
.waku{position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /*min-height: 100vh;*/
  color: #333;
  margin: 0;
 /* animation: bg-change 10s ease infinite;*/
}
/*@keyframes bg-change {
  0% {background: #fff;}
  20% {background: #cff;}
  40% {background: #ffc}
  60% { background: #fcc;}
  80% { background: #cfc;}
  100% {background: #fff;}
}*/
.frame {
  position: relative;
  width: 90%;
  max-width: 800px;
  margin: 10px auto;
  padding: 1em 2em;
}
.frame::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background:
    radial-gradient(circle at top left, transparent 20px, #ca4 20px, #ca4 23px, transparent 23px) left top / 23px 23px no-repeat,
    radial-gradient(circle at top right, transparent 20px, #ca4 20px, #ca4 23px, transparent 23px) right top / 23px 23px no-repeat,
    radial-gradient(circle at bottom left, transparent 20px, #ca4 20px, #ca4 23px, transparent 23px) left bottom / 23px 23px no-repeat,
    radial-gradient(circle at bottom right, transparent 20px, #ca4 20px, #ca4 23px, transparent 23px) right bottom / 23px 23px no-repeat,
    linear-gradient(90deg, transparent 20px, #ca4 23px) left top / 51% 3px no-repeat,
    linear-gradient(-90deg, transparent 20px, #ca4 23px) right top / 51% 3px no-repeat,
    linear-gradient(90deg, transparent 20px, #ca4 23px) left bottom / 51% 3px no-repeat,
    linear-gradient(-90deg, transparent 20px, #ca4 23px) right bottom / 51% 3px no-repeat,
    linear-gradient(180deg, transparent 20px, #ca4 23px) left top / 3px 51% no-repeat,
    linear-gradient(0deg, transparent 20px, #ca4 23px) left bottom / 3px 51% no-repeat,
    linear-gradient(180deg, transparent 20px, #ca4 23px) right top / 3px 51% no-repeat,
    linear-gradient(0deg, transparent 20px, #ca4 23px) right bottom / 3px 51% no-repeat;
}
/*.frame::after {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  content: "";
  box-shadow: 0 0 0 1px #ca4;
}*/
.frame h2 {
  text-align: center;
  color: #ca4;
}
.frame-box-12 {position: relative;
  width: 90%;
  max-width: 800px;
  margin: 10px auto;
    border: 4px solid #cc6699;
    border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
    margin: 2em 0;
    padding: 2em;
}
/* あいさつ文囲み */
.abox{position: relative;
  width: 90%;
  max-width: 800px;
  border-top: 2px solid #cc6699;
  border-bottom: 2px solid #cc6699;
  padding: 1em 0;
  margin:0 auto 150px auto;
}

.abox:before, .abox:after{
  content: '';
  position: absolute;
  top: -10px;
  width: 2px;
  height: -webkit-calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: #cc6699;
}

.abox:before {
  left: 10px;
}

.abox:after {
  right: 10px;
}

.abox p {
  padding-left: 50px;
}
/* pagetitleBAN */
.pagetitle-ban{margin:100px auto 50px auto;padding:0;width:100%;text-align:center;}
.pagetitle-ban h2{font-size: 35px;color: #707070;}
.pagetitle-ban1 h2{font-size: 37px;color: #707070;}
.pagetitle-ban1{margin:100px auto 60px auto;padding:0;width:100%;text-align:left;}
.pagetitle-ban3 h2{font-size: 38px;color: #707070;}
.pagetitle-ban3{margin:100px auto 20px auto;padding:0;width:100%;text-align:left;}
.title-sub{text-align:right;width:100%;color: #cc9933;}
.line_u{width:100%;}
@media only screen and (max-width: 680px) {
.pagetitle-ban1{margin:50px auto 20px auto;padding:0;width:95%;text-align:center;}
.pagetitle-ban1 h2{font-size: 30px;}
.pagetitle-ban h2{font-size: 30px;color: #707070;}
.pagetitle-ban3{text-align:center;}
.title-sub{text-align:right;width:95%;color: #331414;font-size:0.9em;line-height:1.1em;margin-top:5px;}
.line_u{width:90%;}
}
.pagetitle-ban2{margin:15px auto;padding:0;width:100%;text-align:center;}
.pagetitle-ban0{margin:30px auto 50px auto;padding:0;width:100%;text-align:center;}
.pagetitle{font-size:1.4em;position:relative;
margin:20px auto 50px auto;
padding:0;font-weight: bold;
border-bottom:2px solid #CC9933;
}
@media only screen and (max-width: 680px) {.pagetitle-ban0{margin:30px auto 20px auto;}
.pagetitle-ban{margin:100px auto 20px auto;}
}
.pagetitle:before{ content:" ";
position:absolute;
top:1px;
left:5px;
width:25px;height:25px;background:#ff9900;
border-width:2px;border-color:#cc9933;border-style:solid;
}
.pagetitle-ban img{max-width:30px;height:auto;margin:60px auto 15px auto;}

/* page 見出し画像入り　*/
.page-midashibox{margin:32px auto;max-width:540px;}
.midashibox-text,.midashibox-textw{display:inline-block;vertical-align:middle;}
.midashibox-text h2{font-size: 35px;color: #707070;line-height:1.5em;
  margin: 0;}
.midashibox-textw h2{font-size: 38px;color: #fff;line-height:1.5em;
  margin: 0;} 
.midashibox-pic{display:inline-block;
  margin-right: 15px;}
.midashibox-pic img{max-width: 320px;
  height:auto;}
@media only screen and (max-width: 599px) {
.midashibox-text,.midashibox-textw,.midashibox-pic{display:block;text-align:center;}.midashibox-pic img{max-width: 350px;
  height:auto;}
}
@media only screen and (max-width: 680px) { 
.midashibox-text h2{font-size: 28px;}
}

/* Toppage 見出しleft画像入り　*/
.midashi-l{margin:50px 0 20px 0;
padding: 0 0 0 50px;
  background-image: url(../img/maru.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  font-size:20px;color:#666;
  border-bottom:solid 1px #999;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;}
@media only screen and (max-width: 680px) {
.midashi-l{font-size:16px;padding: 0 0 0 40px;margin:5px auto 0 auto; background-size: contain;width:90%;}}
 
/* page セクション　*/
.section-b{margin:0;padding:20px 0 0 0;background: #2EA7ED;width:100%;}
.section-b2{margin:0;padding:20px 0 20px 0;background: #2EA7ED;width:100%;}
.section-w{margin:25px 0;padding:15px 0 0 0;background: #fff;width:100%;}
  
/* page 見出し　*/
.midashi-b{margin:25px auto;max-width:540px;text-align:center;}
.midashi-b h3{font-size: 20px;padding:5px;color: #707070;display: inline-block;position: relative;border-top: solid 1px #CF9D00;border-bottom: solid 1px #CF9D00;}
.midashi-btext{font-size: 16px;color: #444444;line-height:2em;}

.midashi-w{margin:40px auto;max-width:540px;text-align:center;}
.midashi-w h3{font-size: 38px;color: #fff; display: inline-block;position: relative;}
.midashi-wtext{font-size: 20px;color: #fff;line-height:1.8em;}
.midashi-w h3:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -45px;/*線の上下位置*/
  display: inline-block;
  width: 120px;/*線の長さ*/
  height: 4px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #fff;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}
.sec-titlew{margin:40px auto; text-align: center;}
.sec-titlew h4 {color:#fff;
  position: relative;
  display:inline-block;
  padding: 0 65px;
  text-align: center;
}

.sec-titlew h4:before,.sec-titlew h4:after{
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 4px;
  content: '';
  border-bottom: solid 2px #fff;
 /* border-bottom: solid 2px #000;*/
}

.sec-titlew h4:before {
  left: 0;
}

.sec-titlew h4:after {
  right: 0;
}
.sec-titleb{margin:40px auto; text-align: center;}
.sec-titleb h4 {color:#2EA7ED;
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
}

.sec-titleb h4:before,
.sec-titleb h4:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 4px;
  content: '';
  border-bottom: solid 2px #2EA7ED;
 /* border-bottom: solid 2px #000;*/
}

.sec-titleb h4:before {
  left: 0;
}

.sec-titleb h4:after {
  right: 0;
}

/* page 本文　*/
.contents500{max-width:500px;margin:40px auto;padding:0;line-height:2em;}
.contents500w{max-width:500px;margin:40px auto 0 auto;padding:0;line-height:2em;color:#fff;}
.contents550{max-width:550px;margin:40px auto;padding:0;line-height:2em;}
.contents600{max-width:600px;margin:40px auto;padding:0;line-height:2em;}
.contents800{max-width:800px;margin:40px auto;padding:0;line-height:2em;}
@media only screen and (max-width: 680px) {
.contents500{max-width:500px;margin:20px auto;padding:15px;line-height:2em;}
.contents550{max-width:550px;margin:40px auto;padding:15px;line-height:2em;}
.contents800{width:90%;margin:40px auto;padding:0;line-height:2em;}
.contents600{width:90%;}}

/*　会社概要　*/
.prof{width:319px;margin:40px auto;padding:0;text-align:center;}
.prof img{max-width:319px;height:auto;margin:50px auto 20px auto;}
.prof-text{color: #2EA7ED;font-size:1.3em;}
.prof-text2{font-size:70%;}
.access-text{color:#707070;}
.access-text h4{color:#CF9D00;font-size:18px;}
.welcm{margin:40px auto;padding:0;text-align:center;font-size:1.3em;color:#444444;font-weight:bold;}

/* トップswiper */
.com-text{font-size:17px;color:#333;line-height:1.8em;text-align:center;}
.com-text0{font-size:18px;color:#666;line-height:1.8em;padding:1em;width:80%;margin:10px auto;}
/*.com-komi{font-size:16px;color:#707070;text-align:center;}
.com-komi h4{margim-bottom:0;}
.com-st{font-size:12px;color:#CF9D00;text-align:center;}
*/
.com-photo{margin:10px 0 32px 0;padding:0;}
.com-photo img{width:100%; height:auto;}
@media only screen and (max-width: 680px) {
.com-text{text-align:center;width:90%;margin:10px auto;}
.com-photo{margin:10px 0 15px 0;}}

/* 予約限定 */
.sea-sb{text-align:center;color:#707070;line-height:1.6em;}
.mizu{margin:40px auto 20px auto;text-align:center;width:100%;}
.mizu p{margin:0;padding:0;font-size:13px;}
.mizu img{padding:0;width:75%;height:auto;}
.tate-box{text-align:center;}
.tate{-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    /* 左右中央揃え */
        align-items: center;height:250px;display: inline-block;
    margin: 10px auto;  text-align: left;}
.sea-price{position: relative;text-align:center;margin-bottom:80px;}
.sea-price p{color:#fff;
font-size:13px;
position: relative;
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.sea-price img{width:60%;height:auto;}

/* 商品のご案内 */
.sub-menu{color:#fff; font-weight:bold;}
.osh-text{text-align:left;color:#707070;line-height:1.8em;padding-bottom:35px;}
.osh-price{text-align:center;color:#707070;line-height:1.8em;}
.swiper-pagination-thumbs{display: flex;
  justify-content: space-between;
  flex-wrap: wrap;}
#thumbnail-list img{width:150px;height:150px;object-fit:cover;border-radius:50%;}
/*.thumbnail-item{
  flex: 0 1 30%;
  margin-bottom: 10px;
  box-sizing: border-box;
  position:relative;
  &:after{
    content:'';
    background-color: rgba(0,0,0,0.5);
    position:absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: .3s opacity linear;
  }
  &.swiper-slide-thumb-active:after{
    opacity: 0.3;
  }}
.thumbnail-current{
 opacity: 0.3;
}*/
@media screen and (max-width: 550px) {
.swiper-pagination-thumbs{justify-content:space-around;}
#thumbnail-list img{width:88px;height:88px;}
}
/* swiper */
.swiper-wrapper {
  transition-timing-function: linear;
}
.swiper-slide img {
      max-width: 100%;
    }
    .swiper-container{overflow: hidden;}
    /* メインのスライダーのアクティブでないものは不透明度を 0.6 に */
/*.swiper-slide {
      opacity: 0.6;
    }
    /* メインのスライダーでアクティブなもの（現在表示されている）は不透明度を 1 に */
/*    .swiper-slide.swiper-slide-active {
      opacity: 1;
    }
    /* サムネイルでアクティブなものには枠線を表示 */
    .thumbs-slider .swiper-slide-thumb-active img {
     opacity: 0.3;
    }
    /* アクティブでないサムネイル */
    .thumbs-slider .swiper-slide {
      opacity: 1;
    }
    /* アクティブなサムネイル */
    .thumbs-slider .swiper-slide-thumb-active {
      opacity: 1;
    }
    
.swiper-pagination-thumb{
    width: 150px;
    height: 150px;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius:50%;
    margin: 5px;
    cursor: pointer;
    opacity: 1;
}
.swiper-pagination-thumb-active{
opacity: 0.3!important;}
.swiper-pagination-thumb-hover{opacity: 0.8;border:none;background-color: none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

 .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 25px;color:#707070;opacity: 0.8;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  margin-top: -365px; /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
}
.swiper-button-next::after {
    content: "\f138";
  }
.swiper-button-prev::after {
    content: "\f137";
  }

@media screen and (max-width: 550px) {
.swiper-pagination-thumbs{justify-content:space-around;}
.swiper-pagination-thumb{width:88px;height:88px;}
}
#thumbnail-list span{
background-color:#fff;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

/* サービス　*/
.s-contents{max-width:890px;margin:30px auto;}
.box-service{
    position: relative;
    margin: 2em 0 100px 0;
    padding: 0.5em 1em;
    border: solid 3px #3264A6;background:#fff;
    border-radius: 50px;
}
.box-service .maru{font-size:3em;
    position: absolute;
    width:75px;
    height: 75px;
    border: solid 3px #3264A6;color:#3264A6;background:#fff;
    border-radius: 50%;top:-40px;
    left:-16px;text-align:center;
}

.sbox-text{width:80%;margin:15px auto;}
.box-servicemidashi{color:#3264A6;font-weight:bold;margin:0 auto;
    padding: 0;text-align:center;
}
.s-text{color:#3264A6;line-height:1.8em;margin:15px auto;}

/* EVENT */
.eventcontents{max-width:600px;margin:20px auto;text-align:center;}
.eventcontents img{max-width:550px;height:auto;}
.e-button {
  display: inline-block;
  padding: .75em 4em;
  border: 2px solid #333;
  border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
  color: #333;
  text-decoration: none;
  text-align: center;
}



/* NEW! */
.red{color:red;font-weight:bold;}
.newlist-title{padding-left:2em;}

.widget-area .widget ul{
margin-left:1em;
list-style-type:none;
}

/* info article style */
.entry-content{
margin-bottom:3em;
margin-top:0.8em;
padding-bottom:3em;
border-bottom:1px dashed #ccc;
}
.entry-title{
font-size:1.5em;
padding-bottom:10px;
margin-bottom:3px;
border-bottom:1px solid #ccc;}
.entry-meta{
text-align:right;
margin-top:0px;}
.single-header{
margin-bottom:4em;}
.archive-header{border-bottom:1px solid #ccc;}
.archive-title{border-bottom:none;}
.archive-meta{margin-top:2.7em;}

/* page article style */
.p-entry-content{
margin-bottom:3em;
margin-top:0.8em;
padding-bottom:3em;
}
.p-entry-title{
font-size:1.5em;
padding-bottom:10px;
margin-bottom:3px;
border-bottom:1px solid #ccc;}
.page-header{
margin-bottom:4em;}
.page-content{
display: block;
width:100%;
padding:50px 0;
margin:0 auto 35px auto;
line-height:1.6em;
}
.page-content:after { content:''; display:table; clear:both; }
.page-title{
font-size:15px;
font-weight:bold;
padding:10px 0 5px 10px;
margin:50px 0 15px 0;
border-bottom:1px solid #999;
}

/* TOPPAGE */
/*カレンダー*/
.calewaku{width:90%;margin:10px auto;height:auto;}

.tlink_ban{text-align:right;margin:20px 0 0 0;line-height:16px;padding:10px 0;z-index:2000;}
.tlink_ban p{border-bottom:2px solid #CF9D00;display: inline-block;}
.tlink_ban a{display: block;
    text-decoration: none;
    color: #444444;}
.tlink_ban a{
    /*線の基点とするためrelativeを指定*/
  position: relative;
}

.tlink_ban,
.tlink_ban a:hover{
  color:#707070;
}

.tlink_ban a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    /*線の形状*/
    width: 100%;
    height: 2px;
    background:#CF9D00;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}

/*現在地とhoverの設定*/
.tlink_ban ,
.tlink_ban a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}


.toppage_u{margin-bottom:80px;}
.pagetitle2{font-size:1.5em;position:relative;
margin:20px 15px;
padding:0 0 10px 45px;font-weight: bold;
border-bottom:double 5px #003399;
}
.pagetitle2:before{ content:" ";
position:absolute;
top:1px;
left:5px;
width:25px;height:25px;background:#003399;
border-width:2px;border-color:#cc9933;border-style:solid;
border-radius:  50%;        /* 丸くする */
}
.toppage-content{
font-size:1.1em; 
display: block;
width:100%;
padding:20px 0;
margin:0 auto 20px auto;
line-height:1.6em;
}
.toppage-content:after { content:''; display:table; clear:both; }
.toppage-title{
font-size:1.3em;
font-weight:bold;
padding:10px 0 5px 10px;
margin:20px 25px 15px 25px;
border-bottom:1px solid #003399;
color:#003399;
}
@media (max-width: 767px) {.toppage-content ul{margin:0;}}
.toptext{font-size:1.1em;line-height:1.8em; margin:20px auto;text-align:left;}

.pagetitle3{
font-size:1.3em;
font-weight:bold;
  padding: 3px 0 3px 10px;/*文字の上下 左右の余白*/
  margin:20px 25px 15px 25px;
  color: #003399;/*文字色*/
  background: #fff;/*背景色*/
  border-left: solid 25px #003399;/*左線*/
  border-bottom: 1px solid #cc9933;/*下線*/
}
.pagetitle4{font-size:1.3em;position:fixed;
margin:20px 15px;
padding:0 0 5px 45px;font-weight: bold;
border-bottom:solid 2px #003399;
color:#003399;
}
.pagetitle4:before{ content:" ";
position:absolute;
top:1px;
left:5px;
width:25px;height:25px;background:#003399;
border-radius:  50%;        /* 丸くする */
}
@media (max-width: 767px) {
.pagetitle3{margin:20px 3px 15px 3px;}
.pagetitle4{margin:20px 3px;}
}
/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
#scrolldown4{
    /*描画位置※位置は適宜調整してください*/
	position:fixed;
	bottom:1%;
	right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
#scrolldown4 span{
    /*描画位置*/
	position: absolute;
	left:-20px;
	bottom:10px;
    /*テキストの形状*/
	color: #647359;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
#scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #647359;
    transform: skewX(-31deg);
}

#scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 50px;
	background:#647359;
}

/*　消す　*/
#scrolldown4.UpMove{opacity: 0;}

/*　出す　*/
#scrolldown4.DownMove{	opacity: 1;}

/*========= 1文字ずつ出現させるためのCSS ===============*/
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}




/* price */
.info-table{width:100%;font-size:1.1em;}
.info-table th{width:30%;vertical-align: top;}
.price thead{background:#eee;}
.price th,td{text-align:left;}
.price{margin:1.5em auto;}
/* map */
.map{padding:0 ;}
.map {
position: relative;
padding-top: 50%;
height: 0;width: 100%;
overflow: hidden;
}
.map::before {
    content: "";
    display: block;
    padding-top: calc(400 / 800 * 100%);
}
.map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* notice for aboutpage */
.notice{
margin-left:1.5em;
padding-left:1.5em;
font-size:15px;}
.notice li{list-style:none;}

/* information page */
.info th{white-space: nowrap;text-align:center;font-weight:normal; }
.info{font-size:1.1em;line-height:1.7em;}
.namekoji{ text-align: right; } 

/* flow page*/
.flowbox{width:80%;margin:0 auto;text-align:center;}
@media (max-width: 767px) {.flowbox{width:100%;}}
.flowheader div{display: table-cell;
    vertical-align: middle;}
.flowheader{background:#042666;text-align:left;padding-left:10px;border-bottom:#f9bc02 1px solid;}
.ftitle{padding-left:1em; font-size:1.8em;color:#fff;}
.flowtextbox{padding:1em 0;background:#1f8fe8;color:#fff;margin:0 auto;}
.flowtext{font-size:1.1em;padding:1em 0;line-height:1.6em;}

/* 文字指定 */
.f1{padding:0 50px;font-size:1.1em;line-height:1.7em;margin:auto 0;}


/* 改行位置指定 */
.cr-text{display:inline-block;}
@media only screen and (max-width: 500px){
.mbtb{display:none;}
}
.show_sp {
  display: none;
}
@media only screen and (max-width: 680px) {
.show_sp {
  display: block;
}
}
@media only screen and (max-width: 599px){
.mbtb2{display:none;}
}

/* 戻るボタン　パソコン・スマホ共通のCSS */
#PageTopBtn {
    position: fixed; /*ボタンの配置場所を固定*/
    bottom: -10px; /*下からのボタンの配置場所を指定*/
    right: 10px; /*右からのボタンの配置場所を指定*/
    z-index: 999;
}
#PageTopBtn a {
    display: block; /*配置の調整*/
    text-decoration: none; /*文字の下線を消す*/
    color: #fff; /*文字の色*/
    background: #333; /*ボタンの背景色*/
    text-align: center; /*文字を中央に配置*/
    border-radius: 5%; /*ボタンの角を少し丸くする*/
    outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtn a:hover {
    text-decoration: none; 
    background: #666; /*マウスオーバー時の背景色*/
}

/* パソコンで表示する場合のCSS */
@media (min-width: 768px) {
#PageTopBtn {
    font-size: 13px; /*文字のサイズ*/
}
#PageTopBtn a {
    width: 100px; /*ボタンの幅*/
    height: 70px; /*ボタンの高さ*/
    padding: 24px 0; /*文字の配置場所の調整*/
}
}

/* スマホで表示する場合のCSS */
@media (max-width: 767px) {
#PageTopBtn {
    font-size: 10px;
}
#PageTopBtn a {
    width: 70px;
    height: 50px;
    padding: 17px 0;
    margin-right:15px;
}
}

/*animate fadeinup */
@keyframes fadeInUpMin {
  from {
    opacity: 0;
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUpMin {
  animation-name: fadeInUpMin;
}

/* contents top */
.topban{
    margin: -35px auto 40px auto;
}

/*top topics*/
.pagetitle5{font-size:1.3em;position:relative;
margin:15px 10px;
padding:0 0 5px 45px;font-weight: bold;
border-bottom:solid 2px #00a565;
color:#00a565;
}
.pagetitle5:before{ content:" ";
position:absolute;
top:1px;
left:5px;
width:25px;height:25px;background:#00a565;
border-radius:  50%;        /* 丸くする */
}

.topics{border:solid 2px  #00695b;
margin:0 auto 10px auto;padding:0 15px 10px;}

.general a:hover {
color: #fff;
background-color: #ffef6e;
}

.general a {
display: inline-block;
white-space: nowrap;
padding: 5px 20px;
border-radius: 3px;
text-decoration: none;
color: #fff;
background-color: #ffd900;
font-weight:bold;
font-size:1.1em;
margin:15px auto;
}
.house a:hover {
color: #fff;
background-color: #73b9ff;
}

.house a {
display: inline-block;
white-space: nowrap;
padding: 5px 20px;
border-radius: 3px;
text-decoration: none;
color: #eee;
background-color: #00a3db;
font-weight:bold;
font-size:1.1em;
margin:15px auto;
}
@media (max-width: 767px) {
.pagetitle5{margin:20px 3px;}
.topics{margin-top:20px;}
}

/* Top PAGE */
.button-w{text-align:right;}
@media (max-width: 680px) {.button-w{text-align:center;}}
.button-s a{
  font-size: 18px;
  display: inline-block;
  padding: 0.5em 1em;
  color: #ffffff;
  border-radius: 10px;
  background-color: #ff99cc;
  border: none;
  cursor: pointer;
  margin-right: 20px;
}
.button-s a:hover{color: #ffffff;text-decoration: none;
  background-color: #ff80bf;}


.button3 a{font-size: 18px;
    position: relative;
    display:inline-block;
      padding: 0.5em 3em;
  color: #ffffff;
  border-radius: 10px;
  background-color: #ff99cc;
  border: none;
  cursor: pointer;
  margin-right: 20px;
}
.button3 a::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    width: 20px;
    height: 2px;
    background: #FFF;
    transition: .3s;
}
.button3 a::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    width: 8px;
    height: 8px;
    border-left: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    transform: rotate(-135deg);
    transition: .3s;
}
.button3 a:hover{color: #ffffff;text-decoration: none;
  background-color: #ff80bf;}
.button3 a:hover::before{
    right: 10px;
    width: 30px;
}
.button3 a:hover::after{
    right: 10px;
}

  
.bird{width:100%;text-align:right;padding:10px;}
.bird img{width:100px; height:auto;}
/* yokonarabi takasa */
.list {
  width: 600px;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list__item {
  width: calc((100% - 40px) / 3);
  min-height: 300px;
  margin-bottom: 20px;
  background: gray;
  display: flex;
  align-items: stretch;
}
.list__item__link {
  background: yellow;
  color: black;
  line-height: 1.5;
  text-decoration: none;
  display: block;
  width: 100%;
}
/* menu midashi */
/* 文字を重ねる処理 */
.midashi-m{width:100%;height:auto;
    position: relative;
}
.midashi-m h3{display:inline;font-size: 25px;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%,-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);-moz-transform: translateY(-50%) translateX(-50%);
}
.midashi-m img{width:100%;height:auto;}

.m-sub,.m-sub1{font-size: 1em;position: absolute;top:50%; /*親要素を起点に上から50%*/
  right: 10px;  /*親要素を起点に左から50%*/
  transform: translateY(-50%) translateX(-50%); /*要素の大きさの半分ずつを戻す*/
 -webkit-transform: translateY(-50%) translateX(-50%);-moz-transform: translateY(-50%) translateX(-50%);text-align:right;}
@media screen and (max-width: 768px) {.midashi-m{margin:10px;}.midashi-m h3{left:30%;
  font-size: 1.2em;}
.m-sub{right: 0px;font-size: 0.8em;}.m-sub1{right: 0px;top:120%;font-size: 0.8em;}
}


/* menu */
.p-cap{margin:0;font-size:0.9em;text-align:center;color:#331414;}
.menu-cap{color:#cc9933;}
.menu-cap1{color:#c71585;}
.menu-prc{font-size:1.1em;text-align:center;padding-top:10px;}
.menu-name{font-size:1.1em;text-align:left;padding-top:10px;font-weight:bold;}
.menu-name1{font-size:0.9em;padding-top:5px;font-weight:normal;}
.m-text{margin:10px 0 10px 15px;}
.m-photo{margin:10px 0 32px 0;padding:0;text-align:center;}
.m-photo img{width:90%; height:auto;max-width:380px;}
@media only screen and (max-width: 680px) {
.m-photo{margin:10px 0 15px 0;}
.menu-name{font-size:1.1em;text-align:center;}
}
@media screen and (max-width: 768px) {.m-text{width:90%;margin:0 auto;}}
.m-text2{margin:10px auto auto 15px;}
@media screen and (max-width: 768px) {.m-text2{width:90%;margin:0 auto;text-align:center;}}

/*-- PC版表示CSS  --*/
.pc_area{
  display:block;
}
.phone_area{
  display:none;
}

/*-- スマホ版表示CSS  --*/
@media screen and (max-width: 768px){
 .pc_area{
    display:none;
  }
  .phone_area{
    display:block;
  }
}

/*矢印（右に移動して背景がつく）*/
.arrowbtn-3 a{
	--arrow-color: #333;
	position: relative;
	border: 1px solid var(--arrow-color);
	color: var(--arrow-color);
	text-decoration: none;
	padding: 8px 30px;
	display: inline-block;
	text-align: center;
	transition: all .2s linear;
}

.arrowbtn-3 a:hover{
	background:#7b8fa1;
	color:#fff;
}

.arrowbtn-3 a::before {
	border-bottom: 1px solid var(--arrow-color);
	border-right: 1px solid var(--arrow-color);
	content: '';
	height: 10px;
	position: absolute;
	top:calc(50% - 10px);
	right:-20px;
	transform: skewX(50deg);
	width:40px;
	transition: all .3s; /*なめらかな動き*/
}

/*hoverした際の移動*/

.arrowbtn-3 a:hover::before {
	right:-25px;
}
.button-box{width:100%;}
@media screen and (max-width: 680px){.button-box{width:fit-content;margin:10px auto;}}

.heading1{font-weight:bold;
position:relative;
padding-left:30px;
/*border-bottom:2px solid #ccc;*/
font-size: 1.1em;
line-height: 38px;
}
.heading1:before{
content:''; 
border-radius:36px;
-webkit-border-radius:36px;
-moz-border-radius:36px; 
height:18px; 
width:18px; 
display:block; 
position:absolute; 
top:7px; 
left:5px; 
background-color:#ff6699;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}

.heading2{font-size:1.2em;position:relative;
margin:40px 0 5px 0;
padding:0 0 0 35px;font-weight: bold;
border-bottom:1px solid #9B8E00;
}
.heading2:before{ content:" ";
position:absolute;
top:1px;
left:0;
width:20px;height:25px;background:#9B8E00;
/*border-width:8px;border-color:#0099ff;border-style:solid;*/
}

/* sns link */
.snslinks img{max-width:40px;height:auto;}
.snslinks{margin:10px auto;display: flex;
  flex-direction: row;
  justify-content: space-between;}
.snsban{width:100%;text-align:center;}
.sns_com{color:#666;margin:0 auto;text-align:center;font-size:0.9em;padding-top:50px;}
@media screen and (max-width: 680px){.sns_com{padding-top:0;}}

/* ページ内リンク調整　固定ヘッダー対策　*/
#menu{padding-top: 250px;margin-top:-250px;}
#info{padding-top: 250px;margin-top:-250px;}

/* 見出し付き枠と高さ揃え*/
.koyoso{display: flex;}
.box27 {width:90%;
    position: relative;
    margin: 2em auto;
    padding: 0.5em 1em;
    border: solid 3px #336600;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #336600;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}
.box28 {width:90%;
    position: relative;
    margin: 2em auto;
    padding: 0.5em 1em;
    border: solid 3px #339900;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #339900;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box28 p {
    margin: 0; 
    padding: 0;
}

.t_order{margin:0px auto;text-align:center;}
.text-order2{color:#cc6699;}

.order_contents {
	max-width:740px;
margin:45px auto;
}
@media screen and (max-width: 680px){
.order_contents {
	width:90%;}
}
/* 各店舗リンクバナー囲み */
.linkban_s{width:300px;height:auto;
border:#333 1px solid;margin:5px auto;padding:5px;}
.linkban_s img{width:100%;height:auto;max-width:280px;margin:0 auto;}

.linktext_s{color:#333;font-size:16px;width:280px;padding:5px;margin:0 auto;}
.linkbox{margin:15px 0 50px 0;;padding:0;}
@media screen and (max-width: 680px){
.linkbox{width:90%;}}

/* 囲みアニメ　*/
.square{position:relative;
  width: 280px;
  height:280px;
 margin:10px auto;
  background-image: 
    linear-gradient(00deg, #333, #333),
    linear-gradient(00deg, #333, #333),
    linear-gradient(00deg, #333, #333),
    linear-gradient(00deg, #333, #333);

  background-repeat: no-repeat;

  background-size: 4px 100%, 100% 4px, 4px 100%, 100% 4px;
  background-position: left bottom, left top, right top, right bottom;

  animation: square_anim 2s linear forwards;
}

@keyframes square_anim{
  00%{
    background-size: 
      4px 0, 0 4px,
      4px 0, 0 4px; 
  }
  25%{
    background-size: 
      4px 100%, 0 4px,
      4px 0, 0 4px;
  }
  50%{
    background-size: 
      4px 100%, 100% 4px,
      4px 0, 0 4px;
  }
  75%{
    background-size: 
      4px 100%, 100% 4px,
      4px 100%, 0 4px;
  }
  100%{
    background-size: 
      4px 100%, 100% 4px,
      4px 100%, 100% 4px;
  }
}

/* 018ボタン */
.button018 a {text-decoration: none;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 250px;
    padding: 10px 0px 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.button018 a:before, .button018 a:after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
}
.button018 a:before {
  width: 0.5rem;
  height: 0.5rem;
  left: 1.1rem;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  z-index: 2;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}
.button018 a:after {
  left: 0;
  background: #333;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 4rem;
  transform: translateY(-50%);
  transition: all 0.5s;
}
.button018 a span {
  position: relative;
  transition: all 0.3s;
  z-index: 3;
}

.button018 a:hover span {
  color: #fff;
}
.button018 a:hover:before {
  left: 2rem;
}
.button018 a:hover:after {
  right: 0;
  width: 100%;
}

/*バウンドアニメ　*/
.container{
	position:relative;
	width:100%;
	height:350px;
}

/*フォント*/
.bound{
	position: absolute;
	left: 0;
	right: 0;
	top:0;
	bottom: 0;
	margin: 30% auto;
	font-size:1.8em;
	font-weight:bold;
	color:#333;
	text-align:center;
	width:250px;
	height:auto;
	animation: bound-anim 3s infinite;
}

@keyframes bound-anim {
  0% {
    top: 0;
    transform: scale(1);
  }
  2.5% {
    top: -5%;
  }
  5% {
    transform: scale(1);
  }
  7.5% {
    top: 0;
    transform: scale(1.1,0.9);
  }
  10% {
    top: 0;
    transform: scale(1);
  }
  12.5% {
    top: -5%;
  }
  15% {
    transform: scale(1);
  }
  17.5% {
    top: 0;
    transform: scale(1.1,0.9);
  }
  20% {
    top: 0;
    transform: scale(1);
  }
  100% {
    top: 0;
    transform: scale(1);
  }
}

.subtx{color:#333;font-size:16px;width:280px;padding:15px;margin:60% auto 0 auto;  position: absolute;top:0;bottom:0;left:0;right:0;text-align:center;}

.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:3px;
  background:#333;/* 枠線の色*/
}