@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500;700&family=EB+Garamond:wght@500&display=swap');
html .en {
 font-family: "EB Garamond", serif;
 font-optical-sizing: auto;
 font-weight: normal;
 font-style: normal;
 letter-spacing: normal;
 line-height: 1em;
}
:root {
 --base-white: #fff;
 --main-bg-color: #ebe2ea;
 --sub-color: #b5a9dc;
 --text-color: #4c4f59;
 --link-color: #ec6500;
 --link-bg-color: #e7e3f4;
 --app-height: 100vh;
}
body, html {
 height: 100%
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 font-size: 1em;
 margin: 0;
 padding: 0;
 border: 0;
 vertical-align: baseline;
 -webkit-font-smoothing: antialiased
}
html {
 font-size: 62.5%;
 -webkit-text-size-adjust: 100%;
 scroll-behavior: smooth
}
body {
 font-family: "Zen Old Mincho", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
 font-size: 1.6rem;
 line-height: 1.9em;
 color: var(--text-color);
 font-style: inherit;
 font-weight: 500;
 /* iPhoneポップアップ無効 */
 -webkit-touch-callout: none;
 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
 text-rendering: geometricPrecision;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -webkit-tap-highlight-color: transparent;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 min-height: -webkit-fill-available;
 background: #fff url("location/bg.jpg") no-repeat center top;
 background-size: 100% auto;
}
@media screen and (max-width : 812px) {
 body {
  font-size: 1.4rem;
  background-size: 200% auto;
 }
}
b, strong, .bold {
 font-weight: 700;
}
a {
 text-decoration: none;
 outline: none;
 color: #424242;
 overflow-wrap: break-word
}
a:hover {
 color: #424242
}
a:focus, a:visited {
 outline: none;
 color: #424242
}
img {
 width: 100%;
 height: auto;
 border: none;
 vertical-align: bottom
}
li {
 list-style: none
}
iframe {
 display: block
}
button {
 display: block;
 padding: 0;
 background-color: rgba(0, 0, 0, 0);
 border: none;
 appearance: none;
 -moz-appearance: none;
 -webkit-appearance: none;
 cursor: pointer
}
/* スクロールバー */ ::-webkit-scrollbar {
 width: 3px;
 height: 4px;
}
::-webkit-scrollbar-thumb {
 background: var(--sub-color);
 border-radius: 2px;
}
::-webkit-scrollbar-track {
 background: var(--link-bg-color);
}
#mapOver .imgarea div {
 position: relative
}
#mapOver .imgarea div::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0)
}
.opa {
 opacity: 1;
 transition: all 180ms 0s ease-out
}
.opa:hover, .opa:focus {
 opacity: .6;
 filter: drop-shadow(0 0.3em 0.3em rgba(0, 0, 0, 0.4))
}
.center {
 margin-left: auto;
 margin-right: auto;
 text-align: center
}
.popupBase {
 display: none;
 position: fixed;
 z-index: 1100;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 min-height: 100%;
 min-height: 100vh;
 min-height: 100lvh;
 min-height: 100dvh;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 background-color: #fff
}
.popupBase > div {
 position: relative;
 margin: auto;
 padding: 6em 0 3vw;
 filter: blur(1em);
 transition: all .7s 0s ease-out
}
.popupBase.visible > div {
 filter: blur(0)
}
@media screen and (max-width: 768px) {
 .popupBase > div {
  padding: 80px 0 40px
 }
}
@keyframes moveanime {
 0% {
  transform: translate(0, 1em);
  opacity: 0
 }
 100% {
  transform: translate(0, 0);
  opacity: 1
 }
}
@keyframes moveanime2 {
 0% {
  filter: blur(1em);
  opacity: 0
 }
 100% {
  filter: blur(0);
  opacity: 1
 }
}
.close {
 position: absolute;
 z-index: 1101;
 top: 5px;
 right: 0;
 left: 0;
 margin: auto;
 display: flex;
 justify-content: flex-end;
}
.closebtn {
 position: relative;
 width: 66px;
 height: 66px;
 background-color: var(--sub-color);
 border-radius: 50%;
 transition: all 180ms 0s ease-out;
}
.closebtn p {
 position: absolute;
 width: 50%;
 height: 12%;
 left: 0;
 right: 0;
 top: -12%;
 bottom: 0;
 margin: auto
}
.closebtn p span {
 display: block;
 position: absolute;
 left: 0;
 width: 100%;
 height: 1px;
 background-color: #fff;
 transition: all 180ms 0s ease-out
}
.closebtn p span:first-of-type {
 top: 0;
 transform: translateY(7px) rotate(-20deg)
}
.closebtn p span:last-of-type {
 bottom: 0;
 transform: rotate(20deg)
}
.closebtn:hover {
 transform: scale(0.92)
}
.closebtn:hover span:first-of-type {
 transform: translateY(7px) rotate(-40deg)
}
.closebtn:hover span:last-of-type {
 transform: rotate(40deg)
}
#mapOver section {
 position: relative
}
#mapOver section .numicon {
 position: absolute;
 z-index: 10;
 left: 12px;
 top: -50px;
 width: 60px;
}
#mapOver .imgarea {
 position: relative;
 opacity: 0;
 filter: blur(1em);
 text-align: center;
 aspect-ratio: 3 / 2.6;
}
#mapOver .imgarea.box01 {
 aspect-ratio: 3 / 2.1;
}
#mapOver .imgarea div {
 box-sizing: border-box;
 position: absolute;
 z-index: 2;
}
#mapOver .imgarea div:first-of-type {
 left: 2%;
 top: 0;
 width: 64%;
 transform: rotate(-3deg)
}
#mapOver .imgarea div.tate:nth-of-type(2) {
 right: 4%;
 top: 23%;
 width: 44%;
 transform: rotate(2deg);
 z-index: 1;
}
#mapOver .imgarea div.yoko:first-of-type {
 left: 3%;
 top: 0;
 width: 64%;
 transform: rotate(-3deg)
}
#mapOver .imgarea div.yoko:nth-of-type(2) {
 right: 3%;
 top: 46%;
 width: 64%;
 transform: rotate(2deg)
}
#mapOver .imgarea div.photo {
 left: 3%;
 top: 0;
 width: 92%;
 transform: rotate(-3deg)
}
#mapOver .imgarea .line {
 border: 5px solid #fff;
 box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
#mapOver .imgarea .only {
 left: 0;
 right: 0;
 margin: auto;
 width: 69% !important
}
#mapOver .imgarea .yoko img {
 aspect-ratio: 3/2
}
#mapOver .imgarea .tate img {
 aspect-ratio: 2/3
}
#mapOver img {
 background-position: center top;
 background-repeat: no-repeat;
 background-size: 100% auto
}
#mapOver .detail .detail-title {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 font-size: clamp(3.2rem, 6vw, 5rem);
 line-height: 1em;
 white-space: nowrap;
 margin-bottom: 1rem;
}
#mapOver .detail-title .en {
 margin-right: 12px;
}
#mapOver .detail-title .jp {
 display: block;
 font-size: .6em;
 letter-spacing: normal;
 letter-spacing: -1px;
}
#mapOver .map iframe {
 aspect-ratio: 3/2;
 width: 100%;
 transition: all 180ms 0s ease-out
}
#mapOver .map iframe:hover, #mapOver .map iframe:focus {
 filter: none !important;
 -webkit-filter: none !important
}
#mapOver .nz {
 background: rgba(255, 255, 255, .6);
}
#mapOver .nz .map iframe {
 filter: grayscale(50%);
 -webkit-filter: grayscale(50%)
}
#mapOver section, #mapOver .detail .txt, #mapOver .map {
 opacity: 0;
 transform: translate(0, 1em)
}
#mapOver.visible section {
 animation: moveanime forwards .5s ease-out .2s
}
#mapOver.visible .detail .txt, #mapOver.visible .map {
 animation: moveanime forwards .5s ease-out .2s
}
#mapOver.visible .imgarea {
 animation: moveanime2 forwards .5s ease-out .4s
}
#mapOver section .detail {
 position: relative;
}
#mapOver section .detail a {
 color: var(--sub-color);
 text-decoration: underline;
 display: inline-block;
 line-height: 1.4em;
}
#mapOver section .detail a:hover {
 text-decoration: none;
}
@media screen and (min-width: 769px) {
 #mapOver > div .inner {
  width: 90%;
  margin: auto;
 }
 .close {
  top: 15px;
  width: 90%;
 }
 #mapOver section {
  padding: .5em
 }
 #mapOver section .detail {
  padding: 0 .5em 1.5em
 }
 #mapOver section .detail.info {
  margin-top: 2em;
 }
}
@media screen and (min-width: 980px) {
 #mapOver > div .inner {
  max-width: 1200px;
 }
 .close {
  max-width: 1200px;
 }
 #mapOver .nz {
  display: flex;
  justify-content: space-between;
 }
 #mapOver .nz .c-left {
  width: 54%;
 }
 #mapOver .nz .map {
  width: 46%;
 }
 #mapOver .map iframe {
  min-height: 100%;
 }
}
@media screen and (max-width: 768px) {
 #mapOver > div {
  margin: 2vw;
  box-sizing: border-box
 }
 #mapOver section .numicon {
  top: -48px;
  left: 0;
  width: 10vw;
  max-width: 50px;
  min-width: 46px;
 }
 #mapOver section .detail {
  padding: 4vw 4vw
 }
 #mapOver section .map {
  padding: 0 1vw 1vw
 }
 #mapOver section .map iframe {
  aspect-ratio: 5/4
 }
}
#movieOver .movieItem {
 position: relative;
 opacity: 0;
 transform: translate(0, 1em);
 padding: .5em;
 background-color: #fff
}
#movieOver .movieItem > div {
 box-sizing: border-box;
 position: relative;
 z-index: 5;
 aspect-ratio: 16/9
}
#movieOver .movieItem > div iframe {
 position: absolute;
 top: 0;
 right: 0;
 width: 100% !important;
 height: 100% !important
}
#movieOver.visible .movieItem {
 animation: moveanime forwards .5s ease-out .2s
}
@media screen and (min-width: 769px) {
 #movieOver > div {
  width: 70%
 }
}
/* ローディング */
#Loading {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 9999; /* 最前面に表示 */
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
}
#container {
 width: 100%;
 min-height: 100vh;
 min-height: 100lvh;
 height: -webkit-fill-available;
 padding: 0;
 margin: 0 auto;
 position: relative;
}
#container::after, .popupBase::after, #Loading::after {
 content: "";
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100vh;
 height: 100lvh;
 min-height: 100vh;
 min-height: 100lvh;
 display: block;
 position: fixed;
 /* 背景グラデーションの設定 */
 background: linear-gradient(to bottom, #dac8f9, #e0dffb, #e7f7fe, #e7f7fe);
 background-size: 100% 180%; /* 縦方向に2倍に広げて、アニメーションの余白を確保 */
 /* アニメーションの適用 */
 animation: moveGradient 8s ease-in-out infinite alternate;
}
#container::after {
 opacity: .6;
}
@keyframes moveGradient {
 0% {
  background-position: 0% 0%; /* 上からスタート */
 }
 100% {
  background-position: 0% 50%; /* 下に移動 */
 }
}
header, main, footer {
 position: relative;
 z-index: 2
}
header > * {
 opacity: 0
}
header.visible .header-logo, header.visible #text {
 animation: moveanime forwards .8s ease-out
}
header.visible #text {
 height: 1em;
 margin-left: calc(50% - 5em);
 font-size: 1.2em;
 line-height: 1em;
 color: var(--link-color);
}
header.visible #text .fade-in {
 display: inline-block;
 animation: txtfadein 1s ease-out
}
header.visible h2 {
 animation: moveanime forwards .8s ease-out .5s
}
.header-logo {
 max-width: 800px;
 width: 82%;
 padding: 2rem 0 0 4%;
 margin: 0 auto;
 position: relative;
 z-index: 120;
}
.header-logo a {
 display: block;
 opacity: 1;
}
@media screen and (max-width: 768px) {
 header h2 {
  width: 50vw
 }
 .header-logo {
  max-width: 400px;
  padding-left: 0;
 }
}
@keyframes txtfadein {
 from {
  opacity: 0;
  transform: translateY(6px)
 }
 to {
  opacity: 1;
  transform: translateY(0)
 }
}
main {
 opacity: 0;
 color: #fff
}
main.visible {
 animation: moveanime forwards 2s ease-out .5s
}
footer {
 margin-top: 2em;
 padding-bottom: 2em
}
#mapArea {
 box-sizing: border-box
}
#mapArea .mapimg {
 position: relative;
 aspect-ratio: 1;
 max-width: 800px;
 margin: auto;
}
#mapArea section {
 position: relative
}
#mapArea .point {
 position: absolute;
 width: 4%;
 cursor: pointer;
 transition: all 180ms 0s ease-out
}
#mapArea .point:hover, #mapArea .point:focus {
 transform: scale(1.2) translate(0, -2px)
}
@media screen and (min-width: 769px) {
 #mapArea section {
  padding: 2vw
 }
}
@media screen and (max-width: 768px) {
 #mapArea {
  padding: 3vh 0
 }
}
#mapArea .point[data-map="1"] {
 left: 14%;
 top: 50.8%;
}
#mapArea .point[data-map="2"] {
 left: 43%;
 top: 38%
}
#mapArea .point[data-map="3"] {
 left: 29.2%;
 top: 24%;
}
#mapArea .point[data-map="4"] {
 left: 28.3%;
 top: 29.1%;
}
#mapArea .point[data-map="5"] {
 left: 27%;
 top: 34.1%;
}
#mapArea .point[data-map="6"] {
 left: 31.3%;
 top: 34.1%;
}
.copyright {
 font-size: 1rem;
 line-height: 1.6em;
 text-align: center;
}
/* ------------------------------
	画像スライダー
------------------------------ */
.photo {
 cursor: pointer;
}
.slider-story-area {
 width: 100%;
 overflow: hidden;
 margin-bottom: 30px;
}
.slider-story {
 display: flex;
 width: max-content; /* コンテンツの幅を画像の総幅に合わせる */
 animation: scroll-img 48s linear infinite; /* 無限スクロールアニメーション */
 transform: translate3d(0, 0, 0);
}
.slider-story img {
 aspect-ratio: 3 / 2;
 object-fit: cover;
}
.slider-story img.ph-tate {
 object-position: 50% 85%;
}
.slider-story li {
 display: block;
 position: relative;
 object-fit: cover;
 width: 50vw;
 padding: 10px 5px;
}
/* 無限スクロールのアニメーション */
@keyframes scroll-img {
 0% {
  transform: translateX(0); /* スライド開始位置 */
 }
 100% {
  transform: translateX(-50%); /* スライド終了位置（画像の半分だけスクロール） */
 }
}
@keyframes scroll-img-reverse { /* アニメーション名も変更 */
 0% {
  transform: translateX(-50%); /* 開始位置を右端に */
 }
 100% {
  transform: translateX(0%); /* 終了位置を左端に */
 }
}
@media screen and (min-width: 813px) {
 /* 画像を横に並べる */
 .slider-story {
  animation: scroll-img 56s linear infinite;
 }
 .slider-story li {
  width: 30vw;
 }
}
@media screen and (min-width: 1240px) {
 /* 画像を横に並べる */
 .slider-story {
  animation: scroll-img 64s linear infinite;
 }
 .slider-story li {
  width: 20vw;
 }
}
/* ------------------------------
	コンテンツ
------------------------------ */
.content {
 padding: 60px 0;
 width: 88%;
 max-width: 1200px;
 margin: auto;
}
.article {
 max-width: 800px;
 margin: auto;
 font-size: clamp(1.6rem, 1.6vw, 1.7rem);
}
.bg-white {
 background-color: #fff;
}
.sub-title {
 margin: 0 auto 20px;
 font-size: clamp(2.4rem, 2.4vw, 3.4rem);
 font-weight: 700;
 text-align: center;
 white-space: nowrap;
}
.imgsbox2 {
 display: flex;
 gap: 20px;
 max-width: 100%;
 margin: 30px auto 0;
}
.btn-area {
 margin: 30px auto 0;
}
.btn-area .btn {
 font-size: clamp(1.65rem, 2vw, 2rem);
 font-weight: 700;
 line-height: 1.4em;
 padding: 10px;
 border-radius: 40px;
 margin: auto;
 max-width: 400px;
 width: 90%;
 background-color: var(--link-color);
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: all 180ms 0s ease-out
}
.ico-point {
 position: relative;
 padding: 5px 10px;
 background: var(--sub-color);
 color: #fff;
 display: inline-block;
 border-radius: 2px;
 top: -8px;
 font-size: 1.2em;
}
.ico-point:after {
 position: absolute;
 content: '';
 top: 100%;
 left: 5px;
 border: 5px solid transparent;
 border-top: 5px solid var(--sub-color);
 width: 0;
 height: 0;
}
@media screen and (min-width : 913px) {
 .btn-area .btn:hover {
  opacity: .7;
 }
}
@media screen and (max-width : 912px) {
 .content {
  padding-top: 40px;
  padding-bottom: 40px;
 }
 .imgsbox2 {
  flex-direction: column;
 }
}
.txt-center {
 text-align: center;
 font-size: clamp(1.6rem, 1.6vw, 1.8rem);
}
.company {
 position: relative;
 display: inline-block;
 margin: 1rem 0 1rem -10px;
 padding: .2rem 2rem .2rem 3rem;
 color: #fff;
 border-radius: 0 100vh 100vh 0;
 background: var(--sub-color);
 -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, .1);
 box-shadow: 2px 2px 3px rgba(0, 0, 0, .1);
 font-weight: 600;
 font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
 font-size: .9em;
}
.company::before {
 position: absolute;
 bottom: -10px;
 left: 0;
 width: 0;
 height: 0;
 content: '';
 border-top: 10px solid #8980a6;
 border-left: 10px solid transparent;
}
.tour {
 max-width: 900px;
 margin: 2rem auto 4rem;
 display: flex;
 flex-direction: column;
 gap: 2rem;
}
.tour .link {
 display: block;
 background-color: rgba(255, 255, 255, 1);
 -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);
 box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);
}
.tour .link:hover {
 background-color: rgba(255, 255, 255, .7);
}
.tour-ttl {
 padding: 0 3rem 3rem;
 font-size: clamp(1.6rem, 1.6vw, 1.7rem);
 font-weight: 500;
}
.sp {
 display: none;
}
@media screen and (max-width: 812px) {
 .company {
  padding: .1rem 1.6rem .1rem 2rem;
  margin-bottom: .5rem;
 }
 .tour-ttl {
  padding: 0 1.6rem 1.6rem;
 }
 .sp {
  display: block;
 }
 .pc {
  visibility: hidden;
  display: none !important;
 }
}