@charset "UTF-8";



/*///////////////////////////////
	共通パーツ
///////////////////////////////*/

html{
    scroll-padding-top: 150px;
    overflow-x: hidden; /* 横スクロールを防止 */
    scroll-behavior: smooth;
}

body {
    margin:0px;
	padding:0px;
	color:#000;
    font-family: 'Roboto', sans-serif;
    background-color: #EDEEEF;
    text-align: left;
    position:relative;
    overflow-x: hidden; /* 横スクロールを隠す */
    font-weight:  normal;
    letter-spacing: 0.15em;
}

.japanese{
    font-family: 'Noto Sans JP', sans-serif;
}

.inner { 
    display:block; 
    max-width: 1280px;
    margin: auto;
}
@media (max-width: 760px) {
    .inner{
        padding:0 30px; 
        max-width: 370px;
    }    
}

/* bodyスクロール禁止 */
.no-scroll {
  overflow: hidden;
  touch-action: none; /* スマホでのスクロールも防止 */
  height: 100vh;
}


img{
    width: 100%;
    pointer-events: none; 
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    touch-callout:none;
    user-select:none;
}

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

.a_click{
    display: block;
}


p{
    font-size: 19px; 
    line-height: 30px;
    letter-spacing: -0.01em;
    font-weight:  400;
}

.japanese p{
    letter-spacing: 0.07em;
    line-height: 34px;
}
@media (max-width: 760px) {
    p{
        font-size: 13px; 
        line-height: 22px;
        letter-spacing: 0.12em;
    }    
    
    .japanese p{
        letter-spacing: 0.07em;
        line-height: 24px;
    }
}

h1{
    font-size: 46px;
    font-weight: 500; /* Medium */
    font-style: italic; /* Italic */
    text-align: center;
    margin: 160px 0 145px;
    white-space: pre-wrap; /* スペースも改行もそのまま扱う */
    line-height: 1.6em;
}

h1 {
  opacity: 0;
  transition: opacity 0.2s;
}

h1.animated {
  opacity: 1;
}

h1 span {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeUp 0.3s ease forwards;
}

.japanese h1{
    font-family: 'Noto Serif JP', sans-serif;
}

@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}



.pc_vis{
    display:block ;
}
@media (max-width: 760px) {
    .pc_vis{
        display: none;
    } 
    
}

.sp_vis{
    display: none ;
}
@media (max-width: 760px) {
    .sp_vis{
        display: block;
    } 

}

ul{
    list-style: none;
    padding-inline-start: 0px;
}

.position_base{
    position: relative;
}

.position_in{
    position: absolute;
}

#trailCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* ← マウス操作を邪魔しないように */
  z-index: 9999; /* ← 必要なら一番上に表示 */
}

a :hover{
    opacity: 0.6;
}



/*///////////////////////////////
	header
///////////////////////////////*/

/*** mv ***/
.mv{
    width: 100%; /* 横幅を親要素に合わせる */
    height: 100vh; /* 縦横比を維持 */
    margin: auto;
}

.mv {
  position: relative;
  width: 100vw;       /* 画面幅いっぱい */
  height: 100vh;      /* 画面高さいっぱい */
  overflow: hidden;   /* はみ出た部分を隠す */
}

.mv .video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 画面いっぱいにトリミングして表示 */
  transform: translate(-50%, -50%);
}

.mv .mv_second{
    left: 60px;
    top: 27px;
    width: 52px;
    position: fixed;
    z-index: 9999;
}

.mv .mv_third{
    right: 215px;
    top: 50%;
    transform: translateY(-50%);
    width: 193px;
}

.mv .mv_four{
    right: 70px;
    top: 32px;
    font-size: 14px;
    color: #fff;
}

.mv .mv_four a{
    color: #fff;
}

.mv .mv_four a:hover{
    opacity: 0.6;
}

.mv .mv_four {
    right: 70px;
    top: 32px;
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px; /* SoundとEN/JPの間隔 */
}

/* Soundボタン */
/* SOUND + ボタンを横並び */
.sound-control {
  display: flex;
  align-items: center;
  gap: 6px; /* SOUNDとボタンの間隔 */
    margin-right: 10px;
}

/* SOUNDラベル */
.sound-label {
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
}

/* 丸いボタン（白い線） */
.sound-button {
  width: 40px;
  height: 25px;
  border-radius: 50%;
  background: none;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.sound-button .triangle {
    width: 12px;
    height: 12px;
    background-color: #fff;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    transition: transform 0.2s ease;
}

.sound-button.playing .triangle {
    animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}






/* EN/JPリンク */
.mv .mv_four .lang-links a {
    color: #fff;
    text-decoration: none;
    margin: 0 2px;
}

.mv .mv_four .lang-links a:hover {
    opacity: 0.6;
}


/* 全画面ローディング */
#loading {
  position: fixed;
  inset: 0;
  background: #000; /* 白背景にしたい場合は #fff に変更 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  color: #fff;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loading.hide {
  opacity: 0;
  visibility: hidden;
}

/* ロゴ */
#logo {
  width: 180px;
  opacity: 0;
  animation: fadeIn 1.5s ease forwards;
}

@media (max-width: 760px) {
    #logo {
      width: 140px;
    }

}

/* Sound選択 */
.sound-select {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.sound-select.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* Soundボタン */
.sound-select button {
  background: none;
  border: 2px solid #fff;
  color: #fff;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.3s, color 0.3s;
}

.sound-select button:hover {
  background: #fff;
  color: #000;
}

/* アニメーション */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

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


@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2px); }
}





/*///////////////////////////////
	main
///////////////////////////////*/

/*** about ***/

#about {
	position: relative;
	overflow: hidden;
}

#about .back img {
	width: 100%;
	height: auto;
	transform: translateY(0);
	transition: transform 0.1s linear;
	will-change: transform;
}

#about p{
    font-size: 17px;
    line-height: 24px;
    letter-spacing: -0.001em;
    font-weight: normal;
    bottom: 60px;
    right: 60px;
}

.japanese #about p{
    letter-spacing: 0.3em;
    line-height: 1.8em;
    font-size: 14px;
}


/*** explanation ***/

.position_second,
.position_third{
    position: absolute;
}

#point{
    margin: 200px auto 205px;
    max-width: 1160px;
}

#point p span{
    font-size: 45px;
    font-weight: 500; /* Medium */
    font-style: italic; /* Italic */
}

.explanation_in{
    display: flex;  
    justify-content: space-between;
}

.flex_area{
    width: 50%;
}

.one{
    margin-bottom: 370px;
}

.one p{
    margin-top: 130px;
    margin-left: 56px;
}

.one .position_in{
    width: 592px;
    right: 78px;
}

.two{
    margin-bottom: 430px;
}

.two .position_in{
    width: 323px;
    left: 76px;
    top:100px;
}

.three{
    margin-bottom: 612px;
}

.three .position_in{
    width: 557px;
    right: 0;
    top:-260px;
}

.three .position_second{
    width: 373px;
    left: 76px;
    top:380px;
}

.four{
    margin-bottom: 380px;
}

.four p{
    margin-left: 133px;
}

.four .position_in{
    width: 246px;
    right: 142px;
    top:-143px;
}

.five{
    margin-bottom: 486px;
}

.five p{
    margin-right: 133px;
}

.five .position_in{
    width: 400px;
    left: 224px;
    top:-183px;
}

.six{
    margin-bottom: 839px;
}

.six p{
    margin-right: 133px;
}

.six .position_in{
    width: 516px;
    left: 76px;
    top:-55px;
}

.six .position_second{
    width: 251px;
    right: 186px;
    top: 222px;
}

.six .position_third{
    width: 200px;
    left: 197px;
    top: 416px;
}

.seven{
    margin-bottom: 448px;
}

.seven .position_in{
    width: 557px;
    right: 0px;
    top:-295px;
}

.seven .position_second{
    width: 251px;
    left: 165px;
    top: 380px;
}

.eight{
    margin-bottom: 349px;
}

.eight p{
    margin-left: 280px;
}

.eight .position_in{
    width: 557px;
    right: 0px;
    top: -148px;
}

.eight .position_second{
    width: 150px;
    left: -37px;
    top: 29px;
}

.nine{
    margin-bottom: 549px;
}

.nine .position_in{
    width: 498px;
    left: 0px;
    top: -119px;
}

.ten{
    margin-bottom: 260px;
}

.ten p{
    margin-left: 76px;
}

.ten .position_in{
    width: 524px;
    right: 0px;
    top: -286px;
}

.eleven{
    margin-bottom: 260px;
}

.eleven p{
    margin-right: 76px;
}

.eleven .position_in{
    width: 429px;
    left: 76px;
    top: -90px;
}

.eleven .position_second{
    width: 202px;
    right: 0;
    top: 366px;
}

/* 線 */
.container {
    position: absolute;
}

.cLinePath__path {
    stroke: white;
    stroke-width: 9;
    fill: none;
}

.cLinePath__path {
  stroke-dasharray: 1000; /* 仮の大きい値で線を隠す */
  stroke-dashoffset: 1000;
  opacity: 0; /* 最初は透明に */
  transition: opacity 0.3s ease; /* 少し滑らかに出す用 */
}

.mask_01{
    width: 911px; 
    top: 284px;
    right: -138px;
}

.mask_02{
    width: 622px; 
    top: 248px;
    left: -113px;
}

.mask_03{
    width: 721.76px;
    top: -176px;
    right: -99px;
}

.mask_04{
    width: 652.55px;
    top: 333px;
    left: -99px;
}

.mask_05{
    width: 752.8px;
    top: -191px;
    right: 21px;
}


/* 画像アニメーション */

/* --- アニメーション前の状態 --- */
.smoke-image {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
    transition: opacity 0.8s ease, transform 0.8s ease, filter 1s ease;
}

/* --- 表示された時の状態 --- */
.smoke-image.show {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}



/*** map ***/

#map{
    margin: 600px 0 124px;
}

#map div{
    width: 707px;
    margin: auto;
}

#map img {
    width: 100%;
    display: block;
    opacity: 0;
    filter: blur(15px);
    transform: scale(1.05); /* 少しズームしてるとより自然 */
    transition: opacity 1.2s ease, filter 1.5s ease, transform 1.5s ease;
}

#map img.show {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}


/*** price ***/

.gray_back{
    background: #737B80;
    color: #fff;
}

#prices p,
#news p{
    font-weight: 200;
    letter-spacing: 0em;
}

.prices_flex,
.news_flex{
    max-width: 1080px;
    margin: auto;
    display: flex;
}

#prices h2,
#news h2{
    font-size: 43px;
    width: 30%;
    font-weight: 500; /* Medium */
    font-style: italic; /* Italic */
    margin: 0;
}

#prices{
    padding: 91px 0 89px;
}


/*** news ***/

.area {
	flex: 1; /* 残りの幅を使う */
}

.news_list {
	text-align: left;
}

.news_list dl {
	position: relative;
	margin: 20px 0;
	cursor: pointer;
}

.news_list dl:last-child {
	margin-bottom: 30px;
}

/* ＋マーク */
.news_list_in dt::before,
.news_list_in dt::after {
	content: "";
	position: absolute;
	background: #fff;
	right: 27px;
	top: 10px;
	width: 1.5px;
	height: 17px;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
	z-index: 1;
}

/* 横線 */
.news_list_in dt::after {
	transform: translateY(-50%) rotate(90deg);
}

/* 開いた時（縦線を回して重ねる） */
.open dt::before {
	transform: translateY(-50%) rotate(90deg);
}

/* タイトル行（dt） */
.news_list dl dt {
	position: relative;
	margin: 0;
	padding: 0 0 23px;
	font-weight: 200;
	letter-spacing: 0em;
	font-size: 19px;
	color: #fff;
	border-bottom: solid #fff 1.5px;
	display: flex;
	align-items: center;
	gap: 103px; /* 日付とタイトルの間隔 */
}

/* 日付（左側） */
.news_list dl dt .date {
	font-size: 19px;
	font-weight: 200;
	color: #fff;
	flex-shrink: 0; /* タイトルが長くても潰れない */
}

/* タイトル（右側） */
.news_list dl dt .title {
	flex: 1; /* 残りの幅を使う */
}

/* 内容部分 */
.news_list dl dd {
	position: relative;
	display: none; /* JSで flex に切り替える */
	margin: 0;
	color: #fff;
	padding: 30px 26px 40px 0;
	border-top: none;
	font-size: 19px;
	display: flex; /* JSで付与される想定 */
	align-items: flex-start;
	gap: 20px;
	font-weight: 200;
	letter-spacing: 0em;
}

.news_list dl dd span {
	display: inline-block;
}


/*** gallery ***/

#gallery{
    margin: 177px 0 127px;
}

#gallery h2{
    font-size: 43px;
    text-align: center;
    font-weight: 500;
    font-style: italic;
    margin: 0;
    margin-bottom: 47px;
}

canvas {
    display: block;
}

#gallery {
  width: 100%;
  overflow: hidden;
  background: #737B80;
  justify-content: center;
  align-items: center;
}

@media (max-width: 760px) {
  #gallery {
    height: 250px;
  }
}

.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slide-track {
  display: flex;
  width: calc(500px * 20); /* 画像枚数×2倍分 */
  animation: scroll 40s linear infinite;
}

.slide-track img {
  width: 500px;
  height: auto;
  object-fit: cover;
  margin: 0 10px;
  transition: transform 0.3s ease;
}


@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-500px * 10)); /* 半分分だけスクロール */
  }
}

@media (max-width: 760px) {
    
    .slide-track {
      display: flex;
      width: calc(250px * 20); /* 画像枚数×2倍分 */
      animation: scrollSp 40s linear infinite;
    }

  .slide-track img {
      width: 250px;

    }
    
    
}

@keyframes scrollSp {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-250px * 10)); /* スマホ用 */
    }
  }

/*** logo ***/

.logo{
    width: 156px;
    margin: 0 auto;
    padding-bottom:  20px;
}





/*///////////////////////////////
	footer
///////////////////////////////*/

footer{
    width: 1160px;
    margin: auto;

}

footer ul{
    margin: 83px 0 82px;
}

footer ul li{
	letter-spacing: 0em;
    font-size: 14px;
    font-weight: 200;
    margin-bottom: 15px; 
}

footer .copy{
    text-align: right;
    font-size: 14px;
    font-weight: 200;
    margin-bottom: 47px;
}





/*///////////////////////////////
	レスポンシブ
///////////////////////////////*/

@media (max-width: 760px) {
    
    h1 {
        font-size: 22px;
        margin: 160px 0 100px;
        white-space: pre-wrap;
        line-height: 1.5em;
    }
    

    
    /*///////////////////////////////
        header
    ///////////////////////////////*/

    /*** mv ***/

    .mv .mv_second{
        left: 27px;
        top: 27px;
        width: 41px;
    }
    
    .mv .mv_third{
        right: 215px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 136px;
    }
    
    .mv .mv_four{
        right: 30px;
    }



    /*///////////////////////////////
        main
    ///////////////////////////////*/

    /*** about ***/
    
    #about p {
        font-size: 14px;
        line-height: 20px;
        font-weight: normal;
        bottom: 6px;
        right: inherit;
        left: 20px;
    }    
    
    .japanese #about p {
        letter-spacing: 0.2em;
        line-height: 22px;
    }

    /*** point ***/
    
    #point {
        margin: 456px 20px 205px;
        max-width: 740px;
    }
    
    #point p span {
        font-size: 37px;
    }

    .explanation_in {
        display: block;
    }
    
    .container {
        z-index: 99;
    }
    
    .one {
        margin-bottom: 328px;
    }
    
    .one .position_in {
        width: 360px;
        right: 51px;
        top: -278px;
    }
    
    .one p {
         margin-left: 0;
    }  
    
    .two {
        margin-bottom: 531px;
    }
    
    .two .position_in {
        width: 257px;
        top: -220px;
    }
    
    .mask_01 {
        width: 339px;
        top: 205px;
        left: -82px;
        right: inherit;
    }
    
    
    .three {
        margin-bottom: 675px;
    }

    .three .position_in {
        width: 300px;
        left: 50%;
        transform: translateX(-50%);
        right: inherit;
        top: -443px;
    }

    .mask_02 {
        width: 302px;
        top: 362px;
        left: 47px;
    }
    
    .three .position_second {
        width: 373px;
        left: 76px;
        top: 195px;
    }    

    .four {
        margin-bottom: 432px;
    }
    
    .four .position_in {
        width: 191px;
        right: 142px;
        top: -326px;
    }
    
    .four p {
        margin-left: 0px;
    }
    
    .five {
        margin-bottom: 530px;
    }

    .five .position_in {
        width: 214px;
        left: 107px;
        top: -352px;
    }
    
    .five p {
        margin-right: 0px;
    }
 
    .six {
        margin-bottom: 884px;
    }
    
    .mask_03 {
        width: 400px;
        top: -487px;
        right: 78px;
    }
    
    .six .position_in {
        width: 516px;
        left: -86px;
        top: -474px;
    }
    
    .six .position_second {
        width: 251px;
        right: inherit;
        left: -76px;
        top: 110px;
    }
    
    .six .position_third {
        width: 146px;
        left: 194px;
        top: 268px;
    }
    
    .seven {
        margin-bottom: 647px;
    }
    
    .seven .position_in {
        width: 317px;
        right: inherit;
        left: 50%;
        transform: translateX(-50%);
        top: -482px;
    }    

    .seven .position_second {
        width: 175px;
        left: 165px;
        top: 183px;
    }
    
    .eight .position_in {
        width: 477px;
        right: 56px;
        top: -484px;
    }
    
    
    .eight p {
        margin-left: 0px;
    }
    
    .eight .position_second {
        width: 150px;
        left: 185px;
        right: inherit;
        top: -25px;
    }
    
    .mask_04 {
        width: 300px;
        top: 209px;
        left: -99px;
    }
    
    .eight {
        margin-bottom: 525px;
    }
    
    .nine {
        margin-bottom: 517px;
    }

    .nine .position_in {
        width: 297px;
        left: inherit;
        right: 20px;
        top: -428px;
    }
    
    .ten {
        margin-bottom: 520px;
    }
    
    .ten .position_in {
        width: 524px;
        right: 0px;
        top: -448px;
    }
    
    .ten p {
        margin-left: 0px;
    }
    
    .eleven {
        margin-bottom: 361px;
    }


    .eleven .position_in {
        width: 229px;
        right: 12px;
        left: inherit;
        top: -428px;
    }
    
    .eleven p {
        margin-right: 0;
    }
    
    .eleven .position_second {
        width: 156px;
        right: 175px;
        top: 146px;
    }
    
    .japanese .eleven .position_second {
        top: 181px;
    }
    
    
    .mask_05 {
        width: 350px;
        top: -83px;
        right: 21px;
    }
    
    
    /*** map ***/
    
    #map {
        margin: 300px 20px 124px;
    }
    
    #map div {
        width: 100%;
        margin: auto;
    }
    
    
    /*** prices ***/
    
    .prices_flex, .news_flex {
        display: block;
    }
    
    #prices h2, #news h2 {
        font-size: 27px;
        width: 100%;
    }
    
    #prices {
        padding: 75px 20px 73px;
    }
    
    #prices p{
        font-size: 15px;
        line-height: 1.6em;
    }
    
    
    #news{
        padding: 0 20px;
    }
    
    .news_list dl dt {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0 0 12px;
        letter-spacing: 0em;
        font-size: 15px;
        color: #fff;
        border-bottom: solid #fff 1.5px;
        display: inline-grid;
        align-items: center;
        gap: 9px;
    }
    
    
    .news_list dl {
        margin: 12px 0;
    }
    
    .news_list dl dt .date {
        font-size: 15px;
    }
    
    .news_list_in dt::before, .news_list_in dt::after {
        top: 35px;
        width: 1.5px;
        height: 14px;
    }
    
    .news_list dl dd {
        padding: 14px 8px 21px 0;
        font-size: 15px;
    }
    
    
    /*** gallery ***/
      
    #gallery {
        margin: 126px 0 100px;
    }
    
    #gallery h2 {
        font-size: 27px;
        margin-bottom: 30px;
    }
    
    .logo {
        width: 116px;
        padding-bottom: 20px;
    }


    /*///////////////////////////////
        footer
    ///////////////////////////////*/
    
    footer {
        width: auto;
        margin: auto;
        padding: 0 20px;
    }
    
    footer ul {
        margin: 56px 0 66px;
    }
    
    footer .copy {
        font-size: 14px;
        margin-bottom: 25px;
    }
    
    

}