html{
  font-size: 100%; /* 16px */
  letter-spacing:0.05em;
  scroll-padding-top: 160px;
  -webkit-tap-highlight-color: transparent; /* 強調をなくす＝透明にする */
  scroll-behavior: smooth;/* スムーススクロール */
}

body {
  color: #24292e;
  font-family: "Sawarabi Gothic";
  margin: 0;
  background-color: #fff;
}

.wrapper{
  padding: 0 2px 0px 4px;
}

.test{
  border-style: solid;
  border-color: red;
}

.section{
  margin-bottom: 0px;
}

.sec-title{
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 0px;
 
}

ul{
  list-style:none;
}

a{
  color:#333;
  text-decoration: none;
}

/* header */
#header {
  padding-top: 0px;
  position: sticky; /*** ← fixedでsticky固定 ***/
  top: 0;
  z-index: 999;
  background-color: #fff;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 4%;
  height: 100px;
  margin-bottom: 0px;
}

#header h1{
  display: flex;
}

#header h1 img.logo{
  width:545px;
	padding:20px 0px 0px 0px; /*上右下左 */
}

#g-nav h1 {
  display: none;
}

#header ul{
  display: flex;
  flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
  margin:0 0 10px 0;
  list-style: none;
  font-size: 0.9rem;
}

#header ul li a{
  display: block;
  padding:10px 15px;
}

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

#header ul li.current a,
#header ul li a:hover{
  opacity:0.8;
  /* color:#333; */

}

/* ニュースティッカー */
#infomation {
  position: sticky; /*** ← fixedでsticky固定 ***/
  top: 100px;
  z-index: 999;
  height: 35px;
  background: #1b3c53;
  padding:5px 0;
  margin:0;
  overflow: hidden;
}

.infoText {
  padding-left: 100%;
  white-space: nowrap;
  display: inline-block;
  animation: infoAnimation 24s linear infinite;
}

.infoText p {
  display:inline-block;
  margin:0 1rem 0 0;
}
.infoText a {
  color: #ffffff;
}

/* 横に流れていくアニメーション */
@keyframes infoAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/*==================================================
スライダー（sliderスライドショー）のためのcss
===================================*/

.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
/*   width:100%; */
/*   margin:50px auto; */
  width:80%;
  margin:0px auto;
}

.slider p {
  font-size: 1.0rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}

.slider img {
  width:30vw;
  height:auto;
/*   border-radius: 5px; */
  object-fit: contain; 
  aspect-ratio: 3 / 2;/* ここにアスペクト比を入れる */
  /* object-position: 50% 50%; */
}

.slider p {
  width: 500px;
  font-size: 0.9rem;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;/* テキストoverflow時「・・・」表示 */
}

.slider .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;/*矢印の色*/
  border-right: 2px solid #666;/*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  text-align: center;
  margin: 30px 0 0 0;
}

.slick-dots li {
  display: inline-block;
margin: 0 15px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:18px;/*ドットボタンのサイズ*/
  height:18px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#fdbb03;/*ドットボタンの現在地表示の色*/
}

/*＝＝＝目的/地図切替ボタンのCSS*/
#switchbtn{
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;  
}

.dis_none_bt1,
.dis_none_bt2{
  display: block;
  width: 150px;
  background: #1b3c53;
  color: #ffffff;
  padding: 10px;
  margin: 10px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  border-radius: 30px;
  cursor: pointer;
  /*ぼわんとする*/
  position: relative;
  /*はみ出す波紋を隠す*/
  overflow: hidden;
}

.dis_none_bt1::after,
.dis_none_bt2::after {
  content: "";
  /*絶対配置で波紋位置を決める*/
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /*波紋の形状*/
  background: radial-gradient(circle, #fff 10%, transparent 10%) no-repeat 50%;
  transform: scale(10, 10);
  /*はじめは透過0に*/
  opacity: 0;
  /*アニメーションの設定*/
  transition: transform 0.5s, opacity 1s;
}

/*クリックされたあとの形状の設定*/
.dis_none_bt1:active::after ,
.dis_none_bt2:active::after{
  transform: scale(0, 0);
  transition: 0s;
  opacity: 0.8;
}

/*＝＝＝並び替えボタンのCSS*/

/* sort */
#sort {
  /* width:94%;*/
  display: flex; 
  text-align:center; 
	flex-wrap: wrap;  
  writing-mode: vertical-lr;/* 縦書き */
	padding:0px 0px 50px 0px;
	margin: 0 auto;	
	/* line-height: auto; */
}

#sort ul{
	justify-content: center; 
	flex-wrap: wrap;
  /*writing-mode: vertical-lr;/* 縦書き */
	padding:0px 0px 0px 0px;
}

#sort li{
  list-style:none;
	border-radius:0px;
	cursor: pointer;
	padding: 10px 50px;
	border-bottom: 2px solid #1b3c53;
}
#sort li :hover{
  opacity:0.6;
  color:#53341b;

}
	
#sort li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	border-top: 2px solid #1b3c53;
	border-bottom: 0px solid #ddd;
	border-left: 2px solid #1b3c53;
	border-right: 2px solid #1b3c53;
	color: #1b3c53;
}

/* #shoplist{ */
/*   display: none; */
/* } */

/* gallery */
#gallery{
  margin-bottom: 0px;

  /* 下からフワッと */
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
    to {
      opacity: 1;
    transform: translateY(0);
    }
}

#gallery img{
  width: 100%;/* 横幅の指定 */
  object-fit: contain;
  aspect-ratio: 3 / 2;/* ここにアスペクト比を入れる */
/*   border-radius: 5px; */
/* 	width:100%; */
/* 	height:100%; */
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

.box {
    display:flex;
    flex-direction: column;
    margin: 0px 10px 50px 10px;
    text-align: left;
}

.box h3 {
    font-size: 1.2rem;
    margin: 0;
}

.box p {
  font-size: 1.0rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;/* テキストoverflow時「・・・」表示 */
}

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item{
display: inline-block;
position: absolute;
/*width: 33%;/*横並びで3つ表示*/
width: 24%;/*横並びで4つ表示*/
z-index: 1;
list-style:none;
}

/* map　地図 */
#mymap {
/*   display: flex; */
  display: none;
  align-items: center;
  justify-content: center;

    /* 下からフワッと */
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
    to {
      opacity: 1;
    transform: translateY(0);
    }
}

#map {
	height: 400px;
	width: 97%;
	position: relative;
	border: groove 4px #aaa;
	z-index:1;
}

/* インスタグラム */
/* #insta ul.f_bn { */
/*     text-align: center; */
/*     display: block; */
/*     padding-top: 20px; */
/*     padding-bottom: 20px; */
/*     background-color: #006384; */
/*     border-radius: 20px; */
/*     width: 100%; */
/* } */
/* #insta .f_bn li { */
/*     display: inline; */
/* } */
/* #insta .f_bn li a { */
/*     display: inline-block; */
/*     font-size: 14px; */
/*     letter-spacing: 1px; */
/*     padding: 10px; */
/*     text-decoration: none; */
/*     color: #fff; */
/*     margin-left: 10px; */
/*     font-weight: bold; */
/*     border-radius: 10px; */
/*     -webkit-border-radius: 10px; */
/*     -moz-border-radius: 10px; */
/*     margin-right: 10px; */
/* } */

/* #insta .f_bn li a:hover { */
/*     background-color: #0085B2; */
/* } */

/* #insta .f_bn li .icon { */
/*     display: flex; */
/*     align-items: center; */
/*     justify-content: center; */
/* } */

/* #insta .f_bn li .svg { */
/* 	mask-image: url(/netads/images/instagram.svg); */
/* 	mask-size: contain; */
/* 	mask-repeat: no-repeat; */
/* 	mask-position: center; */
/* 	background-color: #FFFFFF; */
/* 	width: 32px; */
/* 	aspect-ratio: 1/1; */
/* } */

/* 街並み画像*/
#machi{
  text-align: right;
}
#machi img{
  width: 600px;
  margin: 0 0 0 auto;
  vertical-align:top;
}

/* footer フッター*/
#footer{
  background: #1b3c53;
  color: #fff;
  margin: 0px 0 0px 0;
  padding: 20px 50px 20px 50px;
}

#footer a{
  color: #fff;
}

.footer-area{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.info{
  width:50%;
}

.info .footer-title{
  display: block;
  font-size:2.0rem;
  font-weight: bold;
  line-height: 1.5;
}

.info dt.footer-title,
.info li:first-of-type{
  margin: 0 0 10px 0;
}

.info li{
  font-size:1.5rem;
}

.info li dt{
  margin:0 10px 0 0;
}

.info li dt,
.info li dd{
  display: inline-block;
}

.footer-area dl img{
  width: 200px;
}

#footer small{
  text-align: center;
  font-size:1.2rem;
}

/* ローディング*/
/* 画面全体の設定 */
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: hsl(0, 0%, 100%);
  z-index: 9999999;
  text-align:center;
  color:#fff;
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ローディング ロゴぽよんぽよん*/
#splash-logo img {
  width: 120px;
  transform-origin: center bottom;
  /* animation: purun 1.2s linear infinite; */
  animation: poyon 2.0s ease 0s, purun 1.3s ease 0.5s, poyooon 1.5s linear 2 1.8s;
}

@keyframes poyon {
  0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
  10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
  20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes poyooon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%) rotateY(0); }
  10%  { transform: scale(1.1, 0.9) translate(0%, 5%) rotateY(0); }
  40%  { transform: scale(1.2, 0.8) translate(0%, 15%) rotateY(0); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%) rotateY(0); }
  60%  { transform: scale(0.9, 1.2) translate(0%, -150%) rotateY(270deg); }
  75%  { transform: scale(0.9, 1.2) translate(0%, -80%) rotateY(0deg) }
  85%  { transform: scale(1.2, 0.8) translate(0%, 15%) rotateY(0deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%) rotateY(0deg); }
}

/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/

.splashbg{
	position: fixed;
	top: 0;
	right:0;
	bottom:0;
	left: 0;
	border-width: 0px;/*開始はボーダーの太さは0*/
	border-style:solid;
  border-color: #ffffff;/*拡大する四角の色*/
	animation-duration:.5s;
	animation-fill-mode:forwards;
}

@keyframes backBoxAnime{
	99.9% {/*アニメーション終了ぎりぎりまで*/
    z-index: 2;/*最前面に*/
		border-width: 0px;/*開始はボーダーの太さは0*/
	}
    100%{
      z-index: -1; /*最背面に*/
      border-width: 0px;/*終了はボーダーの太さは0*/
    }
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
  position: relative;
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}