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

 全体CSS（＝スマホ用）

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

@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 300;
  src: url(../font/NotoSerifCJKjp-Medium.otf) format('opentype');
}

html{
  font-size: 1em !important;
}
input[type="submit"],
input[type="reset"]{
  -webkit-appearance: none;
}

body{
  width: 100%;
  /*min-width: 280px;*/
  height: auto;
  word-break: break-all;
  font-size: 0.95em;
  position: relative;
  font-family: 'Noto Serif Japanese', serif;
  font-weight: 300;
}
img { width: 100%; vertical-align: bottom;}
a { display: inline-block; cursor:pointer; color: #000; text-decoration: none;}
a:hover{
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
section{ 
  padding: 25px 15px;
}
.sp-only{
  display: block !important;
}
.pc-only{
  display: none !important;
}
.d-flex{
  display:-webkit-box;/*--- Android ブラウザ用 ---*/
  display:-ms-flexbox;/*--- IE10 ---*/
  display:-webkit-flex;/*--- safari（PC）用 ---*/
  display:flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.right{ float: right; }
.left{ float: left; }

/* 均一に真ん中に整列 */
.between{
  -webkit-justify-content: space-between;
  justify-content: space-between;
 }
.item-center{
  -webkit-align-items: center;
  align-items: center;
}
.clear-both{
  clear: both;
}


/*************************
アニメーション
*************************/
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 50% { opacity: 0; -webkit-transform: translateY(-10px); }
 50% { opacity: 0.5; -webkit-transform: translateY(-5px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); }
 50% { opacity: 0.5; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.wrap1000{
  width: 100%;
}

/* タイトル */

.tit-style01{
  font-size: 1.7em;
  padding-bottom: 20px;
  text-align: center;
}
.tit-style02{
  font-size: 1.3em;
}
.tit-style02 + .line{
  width: 10%;
  height: 1px;
  margin: 10px auto;
  background: #c9171e;
  display: block;
}

/* ぱんくず */


/* 共通 */

.topimg{
  width: 100%;
  height: 100px;
  /*margin-top: 65px;*/
  position: relative;
  border-top: solid 5px rgba(255,255,255,0.3);
  border-bottom: solid 5px rgba(255,255,255,0.3);
  background-size: cover;
}
.syotenteramachi { background-image: url('../syotenteramachi/images/topimg.jpg'); }
.teramachi { background-image: url('../teramachi/images/topimg.jpg'); }
.senmon { background-image: url('../senmon/images/topimg.jpg'); }
.palette { background-image: url('../palette/images/topimg.jpg'); }
.meiten { background-image: url('../meiten/images/topimg.jpg'); }
.kobashi { background-image: url('../kobashi/images/topimg.jpg'); }
.nishiki { background-image: url('../nishiki/images/topimg.jpg'); }
.kyogoku { background-image: url('../kyogoku/images/topimg.jpg'); }
.shinkyogoku { background-image: url('../shinkyogoku/images/topimg.jpg'); }
.kawaramachi { background-image: url('../kawaramachi/images/topimg.jpg'); }
.green { background-image: url('../green/images/topimg.jpg'); }
.nawate { background-image: url('../nawate/images/topimg.jpg'); }
.matsubara { background-image: url('../matsubara/images/topimg.jpg'); }
.omiya { background-image: url('../omiya/images/topimg.jpg'); }
.shindo { background-image: url('../shindo/images/topimg.jpg'); }
.furukawa { background-image: url('../furukawa/images/topimg.jpg'); }
.imakuma { background-image: url('../imakuma/images/topimg.jpg'); }
.sanjyo { background-image: url('../sanjyo/images/topimg.jpg'); }
.kitano { background-image: url('../kitano/images/topimg.jpg'); }
.daisyogun { background-image: url('../daisyogun/images/topimg.jpg'); }
.senbon { background-image: url('../senbon/images/topimg.jpg'); }
.horikawa { background-image: url('../horikawa/images/topimg.jpg'); }
.shinomiya { background-image: url('../shinomiya/images/topimg.jpg'); }
.yaoi { background-image: url('../yaoi/images/topimg.jpg'); }
.kitayama { background-image: url('../kitayama/images/topimg.jpg'); }
.shinmachi { background-image: url('../shinmachi/images/topimg.jpg'); }
.masugata { background-image: url('../masugata/images/topimg.jpg'); }
.otesuji { background-image: url('../otesuji/images/topimg.jpg'); }
.nayacho { background-image: url('../nayacho/images/topimg.jpg'); }
.ryoma { background-image: url('../ryoma/images/topimg.jpg'); }
.furoya { background-image: url('../furoya/images/topimg.jpg'); }
.arashiyama { background-image: url('../arashiyama/images/topimg.jpg'); }


.topimg h1{
  width: 100%;
  position: absolute;
  top: 25%;
  background: rgba(197,0,17,0.7);
  color: #fff;
  font-size: 1.15em;
  text-align: center;
}
.topimg h1 .wrap1000{
  display: block;
  padding: 10px 0;
}
.topimg h1 .common{
  display: none;
}

/* -------------------------------------
 
  ヘッダー

------------------------------------- */
header{
  width: 100%;
  height: auto;
  /*position: fixed;*/
  top: 0;
  z-index: 10000;
}
#header-wrap{
  width: 100%;
  margin: 0 auto;
  padding: 8px 0 10px;
  background: rgba(255,255,255,0.95);
}
.header-top{
  padding: 0 15px;
  margin-bottom: 10px;
}
.logo{
  padding: 10px 15px;
}
.logo a{
  width: 145px;
}
.sp-gnavi-open{
  display: block;
  width: 26px;
  height: 26px;
}
#gnavi-wrap{
  width: 100%;
}

input[type="checkbox"].on-off{
  display: none;
}
#gnavi-wrap ul {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  margin: 0;
  padding: 0;
  list-style: none;
}
#gnavi-wrap li {
  padding: 15px 0;
  margin: 0;
  text-align: center;
}
input[type="checkbox"].on-off + ul{
  height: 0;
  overflow: hidden;
}
input[type="checkbox"].on-off:checked + ul{
  height: 250px;
  margin: 10px 0 0 !important;
}
ul.h-gnavi li a{
  color: #000;
  text-decoration: none;
  padding: 10px 0;
  text-align: left;
  font-size: 0.95em;
}
#sp-gnavi-open {
  display: block;
  width: 107px;
  height: 36px;
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  padding: 7px 9px 0;
  margin-top: 3px;
  border: 1px solid #000;
}
#sp-gnavi-open span {
  display: block;
  background: #000;
  width: 16px;
  height: 2px;
  position: absolute;
  left: 11px;
  top: 23px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
}
#sp-gnavi-open span:first-child {
  top: 11px;
}
#sp-gnavi-open span:nth-child(2) {
  margin-top: -1px;
  top: 52%;
}
#sp-gnavi-open span:last-child {
  bottom: 12px;
}
#sp-gnavi-open em{
  float: right;
  color: #000;
}
.panel-btn .close{
  background: transparent !important;
}
.panel-btn .close:before, .panel-btn .close:after{
  margin-top: 0;
}
.panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.h-gnavi li{
  padding: 0 !important;
}



/* -------------------------------------
 
  フッター

------------------------------------- */
footer{
  width: 100%;
  height: auto;
  background-color: #c9171e;
  background-image: linear-gradient(45deg, #cd272e 25%, transparent 25%, transparent 75%, #cd272e 75%, #cd272e), linear-gradient(45deg, #cd272e 25%, transparent 25%, transparent 75%, #cd272e 75%, #cd272e);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
}
.f-navi{
  width: 100%;
  padding: 10px 0 5px;
  margin: 0 auto;
}
.f-navi li{
  width: 100%;
}
.f-navi li a{
  padding: 5px 8px;
  display: block;
  color: #fff;
  text-align: center;
}
small{
  display: block;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}
small a{
  color: #ffcb73;
  text-decoration: underline;
  display: inline;
}

/* -------------------------------------
 
  メイン

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

section.shoparea-about .txt-wrap{
  width: 100%;
  text-align: center;
}

section.shoparea-point{
  width: 100%;
  height: auto;
  background-color: #f8f4e1;
  background-image: linear-gradient(45deg, #fbf9ee 25%, transparent 25%, transparent 75%, #fbf9ee 75%, #fbf9ee), linear-gradient(45deg, #fbf9ee 25%, transparent 25%, transparent 75%, #fbf9ee 75%, #fbf9ee);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
}

.shoparea-point .txt-wrap{
  width: 100%;
  background: #fff;
  border-left: 10px solid #dc7379;
  padding: 10px 0;
  margin-bottom: 10px;
  box-shadow: 1px 1px 1px 1px #f2f2f2;
}
.shoparea-point .txt-wrap img{
  width: 6%;
  max-width: 30px;
  margin-left: 3%;
}
.shoparea-point .txt-wrap p{
  width: 90%;
  padding: 0 10px;
}
.shoparea-point .img-wrap{
  border: 5px solid #fff;
  box-shadow: 1px 1px 1px 1px #f2f2f2;
}
.shoparea-point .wrap1000 > img{
  width: 30%;
}
.shoparea-point .wrap1000 > img.right{
  margin-right: 40px;
}
.shoparea-point .wrap1000 > img.left{
  margin-left: 40px;
}

section.shoparea-gallery .img-wrap li:nth-child(1),
.shoparea-gallery .img-wrap li:nth-child(2),
.shoparea-gallery .img-wrap li:nth-child(3){
  width: 48.8%;
  padding: 1% 0;/* 追加 */
}
.shoparea-gallery .img-wrap li.big{
  width: 48.8%;
  padding: 1% 0;
}
.shoparea-gallery .img-wrap li.block ul li{
  width: 48.8%;
  padding: 1% 0;/* 追加 */
}
.shoparea-gallery .img-wrap li.block ul li:nth-child(1),
.shoparea-gallery .img-wrap li.block ul li:nth-child(2){
  padding: 1% 0;
}
.shoparea-gallery .txt-wrap{
  margin-top: 20px;
}
.shoparea-gallery .tit-style02 + .line{
  margin: 10px 0;
}
.shoparea-gallery .txt-wrap a{
  text-decoration: underline;
  color: blue;
}
.shoparea-gallery .txt-wrap a:hover{
  color: #76baff;
}

.attention-wrap{
  background: #f8f4e1;
  text-align: center;
  padding: 20px 15px;
}

.attention-wrap a{
  color: #ec000a;
  text-decoration: underline;
}
.attention-wrap a:hover{
  color: #ff6d73;
}