@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://use.typekit.net/txm6kjs.css");



#loading.disappear { display: none; }
#loading_bg { position: fixed; top:0; overflow-y: scroll; width:100vw; height:100vh; background:rgba(0,0,0,0.6); z-index: 10001; }
#loading_content { width:600px; height:750px; background:url("/img/holidayBg_noIcon.jpg"); background-size:contain; background-repeat: no-repeat; background-color:#1d276d; position: relative; top:10%; left:50%; margin-bottom:10%; transform: translateX(-50%); text-align:center; position: relative; overflow: hidden; }
#loading_link { width:80%; max-width: 400px; text-align:center; position:absolute; bottom:50px; left:50%; transform: translateX(-50%); z-index:100; }
#loading_link > button { font-size:21px; font-weight: 600; color:#1d276d; letter-spacing: 0; font-style: normal; border:none; background-color:#ebeae8; border-radius: 10px; width:100%; height:100%; padding-top:15px; padding-bottom:15px; margin:auto; transition: all 0.3s ease-in-out; }
#loading_link > button:hover { cursor: pointer; filter: brightness(0.8); position: relative; top:1px }
#loading_logo { width:30%; max-width:160px; margin:auto; }
#loading_btn { position:absolute; display: inline-block; top:20px; right:15px; border:none; line-height: 0.9; font-family: "Noto Sans JP", sans-serif; font-weight: 100; color:#bee1fa; background-color:transparent; font-size:50px; transition: all 0.5s ease-in-out; box-sizing: border-box; z-index:100; }
#loading_btn:hover { cursor: pointer; color:#094aa0; }

@media (max-width: 800px) {
  #loading_content { width:76%; height:auto; max-height: 750px;  aspect-ratio: 4 / 5; }
  #loading_link { bottom:5%; }
  #loading_link > button { font-size:18px; letter-spacing: 0; padding-top:10px; padding-bottom:10px; }
  #loading_btn { top:10px; right:10px; width:30px !important; height:30px !important; font-size:24px; padding:0; margin:0; border-radius:15px; line-height: 1; }
}
@media (max-width: 460px) {
  #loading_content { width:90%; }
  #loading_link { bottom:7%; }
  #loading_link > button { font-size:15px; padding-top:6px; padding-bottom:6px; }
}



header#header { background:url("../../img/main_pc.webp"); width:100vw; max-width:1400px; margin:auto; height:100vh; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; }
header#header > div#main_icon { width:30%; max-width:240px; max-height:240px; position:absolute; top:50%; left:50%; transform:translate(-60%, -180%); z-index: 100; }
header#header > div#main_icon img { width:100%; height: 100%; animation:10s linear infinite rotation; }
@keyframes rotation {
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
@media (max-width: 800px) {
  header#header { background:url("/img/main_sp.webp"); width:100vw; max-width:600px; margin:auto; height:100vh; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; }
  header#header > div#main_icon { width:30%; max-width:160px; max-height:160px; top:50%; left:50%; transform:translate(-70%, -250%); }
}


.marquee { display: flex; white-space: nowrap; overflow: hidden; gap: 1rem; font-size: 56px; font-family: "Noto Serif Display", serif; font-weight: 400; padding-top:20px; padding-bottom:20px; border-top:#231815 solid 2px; border-bottom:#231815 solid 2px; }
@media (max-width: 800px) {
  .marquee { font-size:40px; }
}


#aboutBlock { width:80%; margin:100px auto; }
#aboutBlock > h2 { font-size:42px; padding-bottom:40px; }
#aboutBlock > p { font-size:20px; padding-bottom:30px; font-weight: 600; letter-spacing: 0.1em; }
#aboutLink > a { font-size: 22px; color:#231815; font-weight: 600; background-color:#fefefe; display: block; text-align:center; width:80%; max-width:320px; line-height: 50px; padding-top:4px; border-radius: 30px; border: #231815 solid 2px; margin-top:40px; box-shadow: 3px 5px #231815; }
#aboutLink > a:hover { background-color:#95caff; position:relative; top:3px; box-shadow: 2px 2px #231815; }
@media (max-width: 800px) {
  #aboutBlock { width:86%; margin:60px auto; }
  #aboutBlock > h2 { font-size:24px; padding-bottom:30px; }
  #aboutBlock > p { font-size:16px; padding-bottom:20px; }
  #aboutLink > a {font-size: 16px; line-height: 40px; width:70%; margin-top:30px; }
}



.slide-container { width: 100%; margin: 100px 0 50px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.slide-wrapper { display: flex; animation: slide-flow-reverse 40s infinite linear 1s both; }
.slide-wrapper > .slider{ width: 420px; object-fit:cover; }
@media (max-width: 800px) {
  .slide-container { margin:40px auto; }
  .slide-wrapper > .slider{ width: 180px; }
}

@keyframes slide-flow {
   0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}
@keyframes slide-flow-reverse {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}



.productScroll { white-space: nowrap; overflow: hidden; gap: 1rem; font-size: 120px; line-height: 1; font-family: "poppins", sans-serif; font-weight: 800; padding-top:35px; padding-bottom:20px; border-top:#231815 solid 2px; border-bottom:#231815 solid 2px; } 
.productScroll > div { position:relative; left: -65%; }
.productScroll > div > p { -webkit-text-stroke-width: 2px; -webkit-text-fill-color: #ebeae8; -webkit-text-stroke-color: black; }
@media (max-width: 800px) {
  .productScroll { font-size:70px; padding-top:30px; padding-bottom:20px; }
  .productScroll > div { left: -90%; }
}


.marqueeProduct { display: flex; white-space: nowrap; overflow: hidden; gap: 1rem; font-size: 120px; line-height: 1; font-family: "poppins", sans-serif; font-weight: 800; padding-top:35px; padding-bottom:20px; border-top:#231815 solid 2px; border-bottom:#231815 solid 2px; }
.marqueeProduct-inner { -webkit-text-stroke-width: 2px; -webkit-text-fill-color: #ebeae8; -webkit-text-stroke-color: black; }
@media (max-width: 800px) {
  .marqueeProduct { font-size:70px; padding-top:30px; padding-bottom:20px; }
}

#gNav_logo { opacity: 0; transition:all 0.5s ease-in-out; }
#gNav_logo.show { opacity: 1; }

div#product_block { margin:100px auto; }
div#product_block > h3 { font-size:60px; margin:auto; margin-bottom:30px; text-align:center; }

div.product_flex { display: flex; justify-content: center; margin:auto; text-align:center; gap:8%; width:84%; box-sizing: border-box; max-width: 1000px; margin-bottom:120px; }
div.product_flex > div { width:30%; }
div.product_flex > div a img { width:auto; max-width:100%; height:270px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: contain; margin-bottom:20px; transition: all 0.4s ease-in-out;  }
div.product_flex > div a img:hover { transform: scale(1.05, 1.05); filter: brightness(0.8); }
div.product_flex.oneItem { margin-top:0px; }
div.product_flex.oneItem > div a img { width:240px; height:240px; object-fit: contain; border-radius: 50%; margin-bottom:10px; }
div.product_flex.oneItem > div { width:80%; }
div.product_flex > div > h5 { font-size:24px; margin-top:10px; margin-bottom:10px; }
div.product_flex > div > h5 > span { font-size:12px; font-weight: 500; display: inline-block; position: relative; top:-8px; left:3px; }
div.product_flex > div > p { font-weight: 500; }
div#product_block a#product_link { font-size: 22px; color:#231815; font-weight: bold; background-color:#fefefe; display: block; text-align:center; width:80%; max-width:300px; line-height: 46px; padding-top:4px; border-radius: 30px; border: #231815 solid 2px; margin:auto; box-shadow: 3px 5px #231815; }
div#product_block a#product_link:hover { background-color:#95caff; position:relative; top:3px; box-shadow: 2px 2px #231815; }
@media (max-width: 1150px) {
  div.product_flex > div a img { height:200px; }
}
@media (max-width: 800px) {
  div#product_block { padding-top:40px; padding-bottom:40px; margin:auto; margin-bottom:20px; }
  div#product_block > h3 { font-size:24px; margin-bottom:20px; }
  div#product_block > h4 { font-size:20px; letter-spacing: 0.1em; margin-bottom:40px; }
  div.product_flex > div > h5 { font-size:18px; margin-top:10px; }
  div.product_flex > div > h5 > span { font-size:9px; top:-6px; }
  div.product_flex.oneItem > div > h5 { font-size:15px; line-height: 1.3; }
  div.product_flex { margin-bottom:50px; flex-wrap: wrap; gap:4%; }
  div.product_flex > div { width:80%; margin-bottom:40px; }
  div.product_flex > div a img { width:100%; max-width:200px; margin-bottom:5px; height:auto; }
  div.product_flex.oneItem > div a img { width:200px; height:200px; }
  div.product_flex > div > p { font-size:13px; }
  div#product_block a#product_link { font-size:16px; line-height: 40px; }
}


div#newsBlock { margin:auto; margin-bottom:100px; }
div#newsContent { width:80%; max-width:700px; margin:80px auto; }
div#newsContent div { margin-bottom:30px; }
div#newsContent div > a {  display: flex; position:relative; justify-content: space-between; transition: all 0.6s ease-in-out; }
div#newsContent div > a::before { content:""; width:106%; height:2px; left:-3%; bottom:0; background-color:#020202; position:absolute; }
div#newsContent div > a::after { content:""; width:106%; height:2px; left:-3%; bottom:0; background-color:#95caff; transform: scale(0, 1); position:absolute; transition: all 0.6s ease-in-out; transform-origin: left bottom; }
div#newsContent div > a:hover::after { transform: scale(1,1); }
div#newsContent div > a > p { font-size:24px; line-height: 2; color:#020202; font-weight: 600; }
div#newsContent div > a:hover > p { color:#95caff; }
div#newsContent div > a > p.newsTitle { width:70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

div#newsLink > a { font-size: 22px; color:#231815; font-weight: bold; background-color:#fefefe; display: block; text-align:center; width:80%; max-width:300px; line-height: 46px; padding-top:4px; border-radius: 30px; border: #231815 solid 2px; margin:auto; box-shadow: 3px 5px #231815; }
div#newsLink > a:hover { background-color:#95caff; position:relative; top:3px; box-shadow: 2px 2px #231815; }
@media (max-width: 800px) {
  div#newsContent { margin:60px auto 50px; }
  div#newsContent div > a > p { font-size:16px; }
  div#newsLink > a { font-size: 16px; line-height: 40px; }
}


div#imageSlider { overflow: hidden; margin-top:20px; margin-bottom:120px;  }
div#imageSlider .autoplay-slider { display: flex; transform: translateX(-50%); width: 100%; min-width: 100%; width: min-content; animation: 35s linear infinite sliderAnimation; position:relative; }
div#imageSlider .slide { width: 380px; height: 540px; position: relative; } 
div#imageSlider .slide > img { width:100%; height: auto; }
@keyframes sliderAnimation {
  100% { transform: translateX(0); }
}
@media (max-width: 800px) {
  div#imageSlider { margin-top:40px; margin-bottom:40px; }
  div#imageSlider .autoplay-slider::before { height:80px; }
  div#imageSlider .slide { width:170px; height:210px; }
}


div#instagramBlock { padding-top:80px; padding-bottom:80px; }
@media (max-width: 800px) {
  div#instagramBlock { padding-top:50px; padding-bottom:50px; }
}

div#instagramFlex { width:90%; max-width: 900px; flex-wrap: wrap; display: flex; gap:20px; margin:auto; text-align: center; justify-content: center; }
div#instagramFlex > div { display: block; width:25%; max-width:240px; height:auto; max-height: 320px;; border:solid #231815 2px; position: relative; }
div#instagramFlex > div img { width:100%; height:100%; object-fit: cover; vertical-align: bottom; }
div#instagramFlex > div a::before { content: ""; width:100%; height:100%; z-index: 1; position:absolute; transition: all 0.5s ease-in-out; }
div#instagramFlex > div a:hover::before { background-color:rgba(10,10,10,0.7); }
div#instagramFlex > div a::after { content:""; width:20%; height:20%; background:url("/img/insta_white.svg"); background-repeat: no-repeat; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); opacity: 0; z-index: 2; transition: all 0.5s ease-in-out; }
div#instagramFlex > div a:hover::after { opacity: 1; }
@media (max-width: 800px) {
  div#instagramFlex { justify-content: center; flex-wrap: wrap; gap:3%; }
  div#instagramFlex > div { margin-bottom:10px; }
  div#instagramFlex > div a::after { width:24%; height:24%; }
}



div#productImage { padding-top:50px; padding-bottom:100px; }
div#productImage > div { width:84%; max-width:600px; margin:auto; text-align:center; }
div#productImage > div > img { width:100%; height: auto; }
@media (max-width: 800px) {
  div#productImage { padding-top:30px; padding-bottom:80px; }
}