@charset "UTF-8";
main {
  position: relative;
  background:#eee;
  padding-left: 0px;
}
.serif {
  font-family: 'Playfair Display', 'YuMincho', '游明朝', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
}
@media (min-width: 768px) {
  main {
    padding-left: 0;
  }
  .spOnly {
    display: none;
  }
}
@media (min-width: 960px) {
  main {
    padding: 0;
  }
}
@media (min-width: 320px) {
  .hero {
    position: relative;
    width: 100%;
    height: 100dvh;
  }
  .hero .logo {
    position: absolute;
    width: auto;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 2;
  }
  .hero .logo svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .hero .scroll {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 200px;
    margin-left: -100px;
    height: 55px;
    color: #23282d;
    text-align: center;
    z-index: 20;
	font-size: 14px;
        letter-spacing: 0;
		line-height: 1.2;
  }
  .hero .scroll:before {
	position: absolute;
        bottom: 3px;
        left: calc(50% - 6px);
        transform: rotate(-45deg);
        display: block;
        width: 12px;
        height: 12px;
        content: "";
        border: 4px solid #000;
        border-width: 0px 0 4px 4px;
		animation: bounce 2s linear infinite;
  }
  .hero .scroll::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 4px;
    height: 25px;
    background-color: #23282d;
		animation: bounce2 2s linear infinite;
  }
	.scrolled .hero .scroll{display:none;}
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  70%,
  80% {
    -webkit-transform: translateY(0)rotate(-45deg);
    -ms-transform: translateY(0)rotate(-45deg);
    transform: translateY(0)rotate(-45deg);
  }
  40% {
    -webkit-transform: translateY(-8px)rotate(-45deg);
    -ms-transform: translateY(-8px)rotate(-45deg);
    transform: translateY(-8px)rotate(-45deg);
  }
  60% {
    -webkit-transform: translateY(-4px)rotate(-45deg);
    -ms-transform: translateY(-4px)rotate(-45deg);
    transform: translateY(-4px)rotate(-45deg);
  }
}
@keyframes bounce2 {
  0%,
  100%,
  20%,
  50%,
  70%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  60% {
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}

@media (min-width: 768px) {
  .hero .logo {
    width: 120px;
    height: 240px;
  }
  .hero .sns li a:hover {
    opacity: .6;
  }
}
@media (min-width: 320px) {
.sidebar { position: fixed; top:0; bottom:0; left:0; width:50px;
  background: rgba(100,20,10,0.9); color:#efece5; z-index:10; }
.gnav {
  position: absolute;
  top: 50%;
  left: 0; /* 見え方合わせて調整 */
  transform: translateY(-50%);
  width: auto;
  height: auto;
}
.gnav ul { 
list-style:none; margin:0; padding:0; text-align: center;
	display: flex;
        flex-wrap: wrap;
		}

.gnav li { 
    position: relative;
    display: inline-block;
    transition: color .3s linear 0s;
    cursor: pointer;
 }
.gnav li a {
  display: inline-block;
  writing-mode: vertical-rl;
  font-weight: 700;
  font-family: octin-college, sans-serif;
  letter-spacing: 2px;
  color: #efece5;
  text-decoration: none;
  position: relative;
  padding: 12px 30px 12px 0;
  overflow: visible;
  white-space: nowrap;
  cursor: pointer;
}  
.gnav li a span {
  display: inline-block;
  transition: transform .28s ease;
    font-size: 12px;
    color: #efece5;
	font-weight: 700;
	font-family: octin-college, sans-serif;
    letter-spacing: 2px;
  display: block;
  padding: 0  12px 0 0;
  position: relative;
  z-index: 2;
}

.gnav li a span {
  display: inline-block;
  transition: transform 0.5s ease, background 0.3s, color 0.3s;
  padding: 0 15px;
}

}



@media (min-width: 768px) {
	.sidebar { width:63px; }
	.gnav li a { padding: 12px 30px 12px 4px;  }
	.gnav li:hover a span {
	  transform: translateX(50px);
	 color:rgba(100,20,10,0.9);
	 text-shadow:1px 1px 0px rgba(255,255,255,0.5), -1px -1px 0px rgba(255,255,255,0.5),
			  -1px 1px 0px rgba(255,255,255,0.5),  1px -1px 0px rgba(255,255,255,0.5),
			   1px 0px 0px rgba(255,255,255,0.5), -1px  0px 0px rgba(255,255,255,0.5),
			   0px 1px 0px rgba(255,255,255,0.5),  0px -1px 0px rgba(255,255,255,0.5);
	}

	.gnav li a span::after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 9px;
	  transform: translateY(-50%);
	  width: 120%;
	  height: 150px;
	  border: 3px solid rgba(100,20,10,0.9);
	  border-left: none;
	  opacity: 0;
	  transition: width 1.0s ease, opacity .2s ease;
	  pointer-events: none;
	  padding-right:5px;
	  z-index: 2;
	}
	.gnav li:hover a span::after {
	  width: 36px;
	  opacity: 1;
	}
}




@media (min-width: 320px) {
  .section-line {
    position: relative;
    padding: 60px 0 60px 45px;
  }
/*  .section-line::before, .section-line::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    width: 1px;
    height: 30px;
    background-color: #24292d;
    margin-left: 25px;
  }
  .section-line::before {
    top: 0;
  }
  .section-line::after {
    bottom: 0;
  }*/
  .section-line.no-bottom::after {
    display: none;
  }
  .section-line.line-wh::before, .section-line.line-wh::after {
    background-color: #efece5;
  }
  .section-inner {
    position: relative;
    width: 100%;
    max-width: 1080px;
    padding: 0 25px;
    margin: 0 auto;
  }
  .section-inner.min {
    max-width: 1080px;
  }
  .section-title {
    text-align: center;
    padding: 20px 0;
  }
  .section-title h3 {
    font-size: 30px;
    letter-spacing: 1.5px;
    color: #293c4c;
	font-family: octin-college, sans-serif;
font-weight: 600;
font-style: normal;;
  }
  .section-title h2 {
    font-size: 14px;
    letter-spacing: 1px;
    margin-top: 20px;
    line-height: 1.8;
  }
  .section-title p {
    font-size: 12px;
    margin-top: 10px;
	        margin-bottom: 20px;
  }
  .section-title.color-wh {
    color: #efece5;
	        position: relative;
        z-index: 2;
  }
  .section-title.color-wh h3 {
    color: #efece5;
  }
  #pickup .section-line {
    background: #efece5;
  }
}
@media (min-width: 768px) {
  .section-line {
    padding: 80px 0 80px 62px;
  }
  .section-line::before, .section-line::after {
    height: 40px;
  }
  .section-inner {
    padding: 0 30px; max-width: 650px;
  }
  .section-title h3 {
    font-size: 45px;
  }
  .section-title h2 {
    font-size: 18px;
    margin-top: 40px;
  }
  .section-title p {
    font-size: 13px;
  }
}
@media (min-width: 960px) {
  .section-inner {
    max-width: 800px;
  }
  .section-line { padding: 80px 62px 80px 62px;}
  .section-title h2 {
    font-size: 24px;
  }
  .section-title p {
    font-size: 14px;
  }
}
/* concept */
@media (min-width: 320px) {
  .concept-sec {
    position: relative;
    width: 100%;
  }
  .concept-sec .text {
    width: 100%;
    display: block;
  }
  .concept-sec .text p {
    font-size: 12px;
    line-height: 2.2;
    margin: 10px 0;
  }
  .concept-sec .img {
    width: 100%;
    display: block;
    margin: 20px 0;
  }
  .concept-sec .img img {
    width: 100%;
    display: block;
  }
}
@media (min-width: 768px) {
  .concept-sec {
    margin: 30px 0;
  }
  .concept-sec .text p {
    font-size: 15px;
    margin: 20px 0;
    letter-spacing: 1px;
  }
}
/* menu */
@media (min-width: 320px) {
  #menu {
    background-image: url(../img/menu-bg-03.jpg);
    background-position: left 20% center;
    background-size: cover;
	position: relative;
  }
#menu::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 10, 30, 0.5);
    top: 0;
    z-index: 0;
}
.menu-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 10px 30px;
}
  .menu-sec .pdf {
    position: relative;
    display: inline-block;
	width:calc((100% - 30px) /2);
    color: #efece5;
    letter-spacing: 1px;
    padding: 30px 30px 40px 30px;
	font-family: octin-college, sans-serif;
background: rgb(255, 255, 255, 0.15);
        background-blend-mode: lighten;
		margin: 0 3px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(2px);
  }
  .menu-sec .pdf::after {
    content: "";
        position: absolute;
        left: 50%;
		transform: translate(-50%);
        bottom: 20%;
        width: 14px;
        height: 14px;
        background-size: 14px 14px;
    background-image: url(../img/pdf.png);
  }
  .menu-sec .pdf span {
    display: block;
}
  .menu-sec .pdf .menu-ttl {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 10px;
        letter-spacing: 2px;
}
  .menu-sec .pdf .button {
	font-size: 12px;
        font-weight: 600;
		margin-bottom: 10px;
}

}
@media (min-width: 768px) {
  #menu {
    background-position: center;
  }
.menu-box{
	padding: 10px 20%;
}
  .menu-sec .pdf {
	width:calc((100% - 60px) /2);
  }
  .menu-sec .pdf:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
  }
  .menu-sec .pdf .menu-ttl {
        font-size: 2４px;
}
}
@media (min-width: 960px) {
  .pickup .section-title h2 {
    font-size: 18px;
  }
}
@media (min-width: 320px) {
  #gallery {
    background-color: #2f2e2c;
  }
  #gallery {
    background-color: #2f2e2c;
  }
}
/* information */
@media (min-width: 320px) {
  #information {
    background-color: #24292d;
  }
  .info-sec {
    position: relative;
    display: block;
    width: 100%;
    margin: 30px 0;
  }
  .info-sec .info {
    position: relative;
    display: block;
    width: 100%;
    color: #444;
    margin: 0 0 20px;
  }
  .info-sec .info h2 {
    font-size: 18px;
  }
  .info-sec .info img {
    display: block;
    width: 100%;
    margin: 20px 0;
  }
  .info-sec .info h4 {
    font-size: 15px;
    margin: 10px 0;
  }
  .info-sec .info p {
    font-size: 13px;
  }
  .info-sec .info table {
    width: 100%;
    margin: 0;
  }
  .info-sec .info table th, .info-sec .info table td {
    font-size: 12px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #efece5;
    color: #efece5;
    padding: 30px 0;
  }
  .info-sec .info table th {
    width: 80px;
  }
  .info-sec .info table td a {
    color: #fff;
    text-decoration: underline;
  }
  .info-sec .map {
    position: relative;
    display: block;
    width: 100%;
  }
  .info-sec .map #map {
    display: block;
    width: 100%;
    height: 240px;
    margin-bottom: 10px;
  }
  .info-sec .map .view-gm {
    display: block;
    width: 100%;
    text-align: right;
    color: #efece5;
    font-size: 13px;
  }
  .info-sec .info table td a.sns {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 0;
    transition: opacity .3s linear;
  }
  .info-sec .info table td a.sns svg {
    fill: #efece5;
    width: 20px;
    height: 20px;
  }
}
@media (min-width:768px) {
  .info-sec .info {
    width: 50%;
    float: left;
    padding-right: 20px;
  }
  .info-sec .info table th, .info-sec .info table td {
    padding: 20px 0;
  }
  .info-sec .map {
    width: 50%;
    float: right;
    padding-left: 20px;
  }
  .info-sec .map #map {
    height: 360px;
  }
  .info-sec .info table td a.sns:hover {
    opacity: .6;
  }
}
@media (min-width:960px) {
  .info-sec .info h2 {
    font-size: 22px;
  }
  .info-sec .info h4 {
    font-size: 17px;
  }
  .info-sec .info p {
    font-size: 14px;
    font-weight: lighter;
    letter-spacing: 1px;
  }
  .info-sec .info table th, .info-sec .info table td {
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: lighter;
  }
  .info-sec .info table th {
    width: 90px;
  }
}
/* News */
#news {
  padding-bottom: 50px;
}
#news .section-title {
  margin-bottom: 30px;
}
#news li {
  border-bottom: dotted 1px #ccc;
  margin-bottom: 20px;
  padding: 5px auto 10px;
}
#news h2 {
  font-size: 13px;
  font-weight: bold;
}
#news h2 span {
  font-weight: normal;
  margin-left: 10px;
  font-size: 90%;
  letter-spacing: 1.4px;
}
#news p {
  margin-bottom: 5px;
  margin-left: 15px;
}
#news a {
  text-decoration: underline;
  color: #a28364;
}
#news .table-cell {
  display: block;
}
@media (min-width: 768px) {
  #news .section-inner {
    padding: 0 90px;
  }
}
@media (min-width: 960px) {
  #news .section-inner {
    padding: 0 150px;
  }
}
/* news_page */
#news_page h2 {
  font-size: 25px;
  border-bottom: dotted 1px #aaa;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
#news_page p {
  margin-bottom: 5px;
}
#news_page {
  padding-bottom: 30px;
}
#news_page .date {
  font-size: 80%;
  margin-top: 30px;
  padding: 2px 6px;
  letter-spacing: 2px;
  font-weight: bold;
  margin-bottom: 5px;
}
#news_page .endlogo {
  text-align: center;
  width: 50%;
  margin: 70px auto;
}
@media (min-width: 768px) {
  #news_page .section-inner {
    padding: 0 90px;
  }
}
@media (min-width: 960px) {
  #news_page .section-inner {
    padding: 0 150px;
  }
}
.line {
  text-decoration: line-through;
}
.tip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 2;
  width: 100%;
}
.tip .bottom_line {
  position: relative;
  display: inline-block;
  border-bottom: dotted 2px #821e14;
}
.tip .tiptext {
  position: absolute;
  z-index: 1;
  bottom: 120%;
  right: 0;
  visibility: hidden;
  width: auto;
  padding: 1em;
  transition: opacity 1s;
  opacity: 0;
  color: #ffffff;
  border-radius: 4px;
  background-color: #821e14;
  font-size: 10px;
  font-weight: 400;
  text-align: left;
  width: 40vw;
  z-index: 20;
}
.tip .tiptext::after {
  position: absolute;
  top: 100%;
  left: 50%;
  content: ' ';
  border: 5px solid transparent;
  border-top-color: #821e14;
}
.tip .bottom_line.infoarea {
  background: #821e14;
  color: #FFF;
  -webkit-transition: all ease .8s;
  -moz-transition: all ease .8s;
  -ms-transition: all ease .8s;
  -o-transition: all ease .8s;
  transition: all ease .8s;
  margin-top: 8px;
  display: inline-block;
  line-height: 1;
  padding: 7px 14px 2px;
  font-size: 0.8em;
}
.tip:hover .tiptext {
  visibility: visible;
  opacity: 1;
}
.tip:hover .tiptext:hover {
  display: none;
}
.tip sup {
  font-size: 0.7em;
  vertical-align: top;
  position: relative;
  top: 0.8em;
  color: #821e14;
}

@media (min-width: 320px) {
	.rightbar {position: fixed;bottom:auto;top: 50%;right: 25px;width:400px;height:50px;transform: translateY(-50%) translateX(50%) rotate(90deg);z-index: 5;font-size: 18px;line-height:50px;padding: 0; }
	.rightbar a  { transform: rotate(-90deg); }
	.rightbar a div { background: rgba(50,50,50,0.9); padding: 0;}
	.scrolled .rightbar {position: fixed; bottom: 0; right: 0px;width: 100%;height: 50px;z-index: 5;transform: inherit;top: inherit;box-shadow: 5px 1px 10px rgb(1, 1, 1, 0.35);}
	.scrolled .rightbar a {
        position: relative;
        display: block;
        text-align: center;
        transition: opacity .3s ease;
		transform: rotate(0deg);
    }
	.scrolled .rightbar .vanished {
        display: none;
    }
}

@media (min-width: 768px) {
	.rightbar {height: 65px;right: 32px;}
	.scrolled .rightbar {height: 70px;}
}
@media (min-width: 960px) {
	.scrolled .rightbar {position: fixed;bottom:auto;top: 50%;width:400px;height: 65px;right: 32px;transform: translateY(-50%) translateX(50%) rotate(90deg);z-index: 5;font-size: 18px;line-height:50px;padding: 0;}
	.scrolled .rightbar a  { transform: rotate(-90deg); }
	.scrolled .rightbar a div { background: rgba(50,50,50,0.9); padding: 0;}
	.scrolled .rightbar .vanished { display: block; }
}


/*下のアイコン*/

.action-bar__mobile { position: fixed; display: flex; align-items: flex-end; background-color:rgba(235,235,235,0.9); transition: transform 0.25s cubic-bezier(0.37, 0.31, 0.2, 0.85) 0s; left: 50%; z-index: 99; transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); padding: 5px 10px 0 55px; width:100%; height: 100%;box-shadow: 3px 1px 5px rgb(1, 1, 1, 0.15);}
.action-bar__mobile.is-link-active .action-bar__mobile__link:not(.is-active) { opacity: 0.4; }
.action-bar__mobile__close { position: absolute; top: -30px; right: 0px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 18px; }
.action-bar__mobile__link { flex: 1 1 0%; text-align: center; color: #24292d; background-color: transparent; border: none; transition: opacity 0.3s ease 0s;     width: calc(100% / 3);
    height: 100%;}
.action-bar__mobile__link:hover {opacity: 0.3; }
.action-bar__mobile__link:active, .action-bar__mobile__link:focus { color: rgb(255, 255, 255); outline: none; }
.action-bar__mobile__link span { display: block;font-family: octin-college, sans-serif;
    letter-spacing: 1px; font-weight: 700; }
.action-bar__mobile__link__icon { display: flex; font-size: 16px; }
@media (min-width: 360px) {
  .action-bar__mobile__link__icon { font-size: 10px; line-height: 15px; }
    svg.sociavore-icon{width:25px; fill:#24292d;}
}
@media (min-width: 440px) {
  .action-bar__mobile__link__icon { font-size: 10px; line-height: 10px;}
}
@media (min-width: 560px) {
  .action-bar__mobile__link__icon { font-size: 10px; line-height: 10px; }
}
.action-bar__mobile__link__title { font-size: 11px; line-height: 11px; }
@media (min-width: 375px) {
  .action-bar__mobile__link__title { font-size: 9px; line-height: 13px;}
}
@media (min-width: 440px) {
  .action-bar__mobile__link__title { font-size: 11px; line-height: 19px; }
}
@media (min-width: 560px) {
  .action-bar__mobile__link__title { font-size: 12px; line-height: 12px; }
  
  
}

@media (min-width: 768px) {
    svg.sociavore-icon{width:30px;}  
  .action-bar__mobile__link__title { font-size: 12px; line-height: 13px; }
  .action-bar__mobile__link { padding: 8.5px 5px; }
  .action-bar__mobile { padding: 5px 30px; }

}
@media (min-width: 1200px) {
    svg.sociavore-icon{width:21%;}  
}
.action-bar__mobile.action-bar_visible { display: flex !important; }

.action-bar__mobile__infobox__links { height: 100%; overflow: auto; }
.action-bar__mobile__infobox__links__item { display: block; color: rgb(26, 25, 25); }
.action-bar__mobile__infobox__links__item:not(:first-child) { padding-top: 10px; }
.action-bar__mobile__infobox__links__item:not(:last-child) { padding-bottom: 10px; border-bottom: 1px solid rgba(26, 25, 25, 0.1); }
.action-bar__mobile__infobox__links__item:hover, .action-bar__mobile__infobox__links__item:focus { color: rgb(26, 25, 25); }
body.modal-open .action-bar__desktop { width: calc(100% - 17px); }


/*swiper*/
.swiper,
.swiper-wrapper,
.swiper-slide {
  overflow: visible !important;
}

 .swiper-slide {
   text-align: center;
   box-sizing: border-box;
 }

.swiper-slide img {
  width: 100%;
  height: auto; 
  object-fit: contain; 
}

 .swiper-wrapper {
   transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
 }
 .swiper {
   width: 100%;
 }

 .swiper-slide img {
  transition: transform 2.5s, filter 1s ease;
}

.slide-shadow-center img {
  filter: drop-shadow(0px 30px 5px rgba(25,5,0,0.15));
}
.slide-shadow-left1 img {
  filter: drop-shadow(-5px 20px 10px rgba(25,5,0,0.50));
}
.slide-shadow-left2 img {
  filter: drop-shadow(-20px 35px 10px rgba(25,5,0,0.2));
}
.slide-shadow-right1 img {
  filter: drop-shadow(5px 20px 10px rgba(25,5,0,0.50));
}
.slide-shadow-right2 img {
  filter: drop-shadow(20px 35px 10px rgba(25,5,0,0.2));
}	


 @media (min-width: 768px) {
	.slide-shadow-center img {
	  filter: drop-shadow(0px 50px 10px rgba(25,5,0,0.15));
	}

	.slide-shadow-left1 img {
	  filter: drop-shadow(-15px 40px 20px rgba(25,5,0,0.20));
	}


	.slide-shadow-left2 img {
	  filter: drop-shadow(-30px 55px 20px rgba(25,5,0,0.2));
	}


	.slide-shadow-right1 img {
	  filter: drop-shadow(15px 40px 15px rgba(25,5,0,0.20));
	}
	.slide-shadow-right2 img {
	  filter: drop-shadow(30px 55px 20px rgba(25,5,0,0.2));
	}
 }
#showcase {
position: relative;
z-index: 1;
  }
 #showcase:after {
    content: "";
    width: 100%;
    height: 68%;
    bottom: 0;
    background: #c1bcb7;
    position: absolute;
	z-index: 0;
}

/* @media (min-width: 768px) {
   .swiper-slide-active img {
     transform: scale(1.2);
   }
 }
*/

/*map*/
	.map iframe {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 1;
	width: 100%;
	}
	footer .foot-bottom .sns {
	float: none;}
	footer .foot-bottom .sns li{margin:0 !important;}