@charset "utf-8";
/*----- 
01.TOPページのみ
----- */
#top .hero{
padding-top: 90px;
position: relative;
height: 100vh;
overflow: hidden;
min-height: 990px;
}
#top .main-img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
#top .hero .text-box{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 581px;
}
#top .hero h1{
margin-bottom: 26.2px;
transform: scale(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#top .hero h1.is-move {
  transform: scale(1);
}
#top .hero .white-box{
background: #fff;
font-size: 20px;
letter-spacing: 0.12em;
font-weight: 700;
color: #005C92;
padding: 11.5px 40px;
border-radius: 295px;
margin: 0 auto;
text-align: center;
max-width: 315px;
position: relative;
overflow: hidden;
}
/* 光の膜の設定 */
#top .hero .white-box.is-move::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%; /* 初期位置：ボタンの左外側 */
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(191 195 102 / 30%) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg); /* 光を斜めにする */
  animation: shine-effect 2.5s infinite; /* 2.5秒ごとにアニメーションを繰り返す */
}

/* 光が移動するアニメーション */
@keyframes shine-effect {
  100% {
left: 150%; /* ボタンの右外側まで移動 */
  }
}
#top .hero .vertical-text{
position: absolute;
right: 14.9%;
top: 20.4%;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
z-index: 10;
}
#top .hero .vertical-text .span-1,#top .hero .vertical-text .span-2{
background: #fff;
display: block;
white-space: nowrap;
padding: 17px 0;
font-size: 28px;
letter-spacing: 0.3em;
font-weight: 700;
max-width: fit-content;
}
#top .hero .vertical-text .span-1{
margin-top: 85px;
height: 206px;
}
#top .hero .vertical-text .span-1 span{
font-size: 18px;
}
#top .crowd1,#top .crowd2{
position: absolute;
z-index: 10;
}
#top .crowd2{
width: 26.9%;
top: 12.7%;
right: -0.6%;
}
#top .crowd1{
width: 21.6%;
top: 14.73%;
left: -1.2%;
}
#top  .hero .vertical-text img{
width: 133px;
position: absolute;
bottom: -60px;
right: -54.5px;
}
#top #about{
padding-top: 60px;
background: linear-gradient(#FDF9F5, #FEFAF6);
overflow: hidden;
padding-bottom: 103px;
}
#top #about h2{
font-size: 21px;
letter-spacing: 0.21em;
font-weight: 700;
text-align: center;
max-width: fit-content;
margin: 0 auto;
width: 19.6%;
}
#top #about h2 span{
display: block;
line-height: 1;
}
#top #about .deco-1{
margin-bottom: 34px;
}
#top #about .deco-about1{
margin: 0 auto;
}

#top #about .deco-about2{
margin: 0 auto;
position: relative;
}

#top #about .deco-about2 .teraiwa{
  margin: 0 auto;
}
#top #about .raleway{
font-style: italic;
font-size: 23px;
color: #005C92;
position: absolute;
top: -6px;
z-index: 10;
right: 0;
height: 50px;
font-weight: 900;
padding-right: 72px;
}
#top #about .raleway span{
position: absolute;
right: 15px;
font-size: 80px;
  background: linear-gradient(to bottom, #005C92 60%, #fff 50%);
  /* 背景を文字の形で切り抜く */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  top: -10px;
  width: 53px;
}
#top #about .flex-box1{
gap: 7.4%;
margin-bottom: 100px;
margin-top: 60px;
position: relative;
z-index: 10;
}
#top #about .flex-box1 div,#top #about .flex-box1 div div{
position: relative;
}
#top #about .cnt-box{
width: 28.3%;
}
#top #about .img-box{
padding-top: 33px;
}
#top #about .flex-box1 .cnt-box img{
border-radius: 10px;
}
#top #about .flex-box1 h3{
font-size: 23px;
font-weight: 700;
text-align: center;
margin-bottom: 17px;
}
#top #about .flex-box1 p{
font-size: 16px;
}
#top #about .flex-box1 a{
font-weight: 600;
color: #049AFC;
}
#top #about .max-w-1920{
max-width: 1920px;
margin: 0 auto;
}
#top #about .flex-box2{
max-width: 1600px;
margin-left: 0;
width: 98%;
}
#top #about .cnt-left{
width: 60%;
position: relative;
}
#top #about .cnt-right{
width: 39.5%;
margin-left: auto;
position: relative;
z-index: 10;
}
#top #about .cnt-right h3{
font-weight: bold;
display: flex;
align-items: center;
margin-bottom: 20px;
}
#top #about .cnt-right h3 img{
  width: 29%;
  max-width: 160px;
  margin-right: 10px;
}
#top #about .cnt-right .cnt-span{
display: flex;
font-weight: 700;
white-space: nowrap;
}
#top #about .cnt-right .cnt-span1{
font-size: 34px;

line-height: 49px;
margin-bottom: 2px;
}
#top #about .cnt-right .cnt-span2{
font-size: 43px;
line-height: 62px;
}
#top #about .cnt-right .cnt-span span{
font-size: 27px;
}
#top #about .cnt-right h3 + span{
display: block;
font-weight: 700;
margin-bottom: 20px;
}
#top #about .deco-about5, #top #about .deco-about6, #top #about .deco-about7, #top #about .deco-about8,#top #about .deco-about6-re,#top #about .deco-about9{
position: absolute;
}
#top #about .deco-about5{
width: 144px;
left: 81px;
}
#top #about .deco-about6{
width: 9.9%;
left: -16%;
bottom: -50px;
z-index: -1;
}
#top #about .deco-about7{
width: 17.34%;
left: 14.6%;
top: -116px;
}
#top #about .deco-about8{
width: 26%;
right: -8.25%;
bottom: -59.4px;
z-index: -1;
}
#top #about .deco-about6-re{
width: 9.9%;
right: -238px;
bottom: -28px;
z-index: -1;
}
#top #about .deco-about9{
width: 34.5%;
right: -37.4%;
bottom: -31px;
z-index: -1;
}
#top #modal-btn{
appearance: none;
border: none;
background: transparent;
cursor: pointer;
padding: 9px 29px;
background: #fff;
border-radius: 173px;
color: #005C92;
position: relative;
display: block;
width: 250px;
border: 1px solid #005C92;
font-weight: 700;
margin-top: 20px;
}

#top #modal-btn img{
width: 116.74px;
}
#top #sky {
  position: relative;
  overflow: hidden;
  background: #FEFAF6;
}
#top video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
  border-radius: 50px 50px 0 0;
}
/* #top #sky img{
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 50px 50px 0 0;
} */
#top #sky .wrapper{
position: relative;
height: 1026px;
}
#top #sky .vertical-text{
font-size: 20px;
position: absolute;
display: flex;
flex-direction: column;
gap: 10px;
}
#top #sky .vertical-text1{
right: 130px;
top:93px;
}
#top #sky .vertical-text2{
left: 134px;
bottom: 160px;
}
#top #sky .vertical-text .span-1,#top #sky .vertical-text .span-2{
background: #fff;
display: block;
white-space: nowrap;
padding: 15px 3px;
letter-spacing: 0.3em;
text-align: center;
}
#top #sky .vertical-text1 .span-1{
height: 293px;
}
#top #sky .vertical-text1 .span-2{
margin-top: 100px;
height: 243px;
}
#top #sky .vertical-text2 .span-1{
height: 356px;
}
#top #sky .vertical-text2 .span-2{
margin-top: 100px;
height: 297px;
}
#top #menu{
padding: 85px 0 76px;
background: #FEFBF6;
border-radius: 50px 50px 0 0;
margin-top: -43px;
position: relative;
z-index: 10;
}
#top #menu h2 img{
margin: 0 auto 14px;
}
#top #menu h2{
max-width: fit-content;
margin: 0 auto 50px;
text-align: center;
font-size: 20px;
font-weight: 700;
color: #005C92;
}
#top #menu .cnt-left{
width: 31.48%;
}
#top #menu .cnt-box1{
margin-bottom: 22px;
}
#top #menu .cnt-box1 p{
font-weight: 900;
color: #005C92;
}
#top #menu .cnt-box1 p span:first-of-type{
font-size: 30px;
font-weight: 900;
color: #005C92;
line-height: 44px;
}
#top #menu .cnt-box1 p span:last-of-type{
display: block;
font-size: 12px;
margin-top: 3px;
}
#top #menu .flex-box1{
gap: 4.6%;
}
#top #menu .flex-box2{
gap: 30px;
}
#top #menu .title{
font-size: 40px;
line-height: 58px;
margin-bottom: 18px;
font-weight: 700;
margin-bottom: 12px;
}
#top #menu .title + p{
margin-bottom: 23px;
}
#top #menu .price-box{
align-items: center;
margin-bottom: 20px;
}
#top #menu .price-box:first-of-type{
margin-bottom: 13px;
}
#top #menu .price-box:nth-of-type(2){
margin-bottom: 21px;
}
#top #menu .price-box .bucket-sm{
width: 28.47px;
margin-right: 12.5px;
}
#top #menu .price-box .bucket-lg{
width: 41.03px;
margin-right: 6px;
}
#top #menu .mount{
font-size: 18px;
line-height: 1.6;
}
#top #menu .barlow{
font-size: 40px;
font-weight: 700;
color: #005C92;
}
#top #menu .yen{
font-size: 12px;
}
#top #menu .cnt-right{
width: 63.75%;
}
#top #menu .flex-box4{
gap: 8px;
}
#top #menu .cnt-right img{
border-radius: 10px;
object-fit: cover;
height: 100%;
}
#top #menu .cnt-right .cnt-box{
width: 73.6%;
}
#top #menu .cnt-right .flex-box{
width: 25.3%;
flex-direction: column;
gap: 8px;
}
#top #menu .deco{
position: absolute;
z-index: -1;
}
#top #menu .deco1{
width: 9.1%;
left: 7%;
top: 14.4%;
}
#top #menu .deco2{
width: 11.3%;
left: 2%;
top: 48%;
}
#top #menu .deco3{
width: 7%;
right: 7.8%;
top: 18.8%;
}
#top #menu .deco4{
width: 9.16%;
top: 41.7%;
right: 2.3%;
}
#top #news{
background: top/cover no-repeat url(../../img/common/bg-news.jpg);
padding: 406px 0 597px;
}
#top #news .cnt-left{
padding: 48px 56px;
background: #fff;
width: 50%;
border-radius: 10px 0 0 10px;
}
#top #news h2 span{
display: block;
font-weight: 700;
}
#top #news h2 .en{
font-size: 16px;
color: #005C92;
line-height: 24px;
margin-bottom: 2px;
}
#top #news h2 .jp{
font-size: 35px;
line-height: 51px;
}
#top #news .flex-box1{
border-radius: 10px;
overflow: hidden;
}
#top #news .flex-box2{
justify-content: space-between;
margin-bottom: 13px;
}
#top #news .cnt-right{
width: 50%;
}
#top #news .cnt-right img{
border-radius: 0 10px 10px 0;
height: 100%;
width: 100%;
object-fit: cover;
}
#top #news .news-box{
font-size: 16px;
border-bottom: 1px solid #CCCCCC;
}
#top #news .news-box a{
padding: 16px 0;
gap: 24px;
position: relative;
}
#top #news .news-box a::after{
content: "";
display: inline-block;
width: 4.83px;
height: 9.65px;
background: top/contain no-repeat url(../../img/common/arrow-blue.png);
right: 0;
top: 50%;
transform: translateY(-50%);
position: absolute;
}

/* 追記 */
#modal-bg{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
}
#modal-bg .modal{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  width: 85%;
  max-width: 850px;

}
#modal-bg .modal-content{
  background-color: #fff;
  position: relative;
  box-sizing: border-box;

}
#modal-bg .close-btn{
  position: absolute;
  right: 0;
  top: -50px;
  cursor: pointer;
}
#modal-bg .close-btn>div{
  width: 30px;
  height: 30px;
  position: relative;
}
#modal-bg .close-btn>div>span{
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#modal-bg .close-btn>div>span:first-of-type{
  transform: rotate(45deg);
}
#modal-bg .close-btn>div>span:last-of-type{
  transform: rotate(-45deg);
}
 /* 追記 */
#modal-bg.active{
  display: block;
}
#modal-bg .video{
	position: relative;
	padding-top: 56.25%; /* 16:9 アスペクト比 */
	height: 0;
}
#modal-bg .video iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
#top .hanbai{
  background: #FEFBF6;
  padding: 30px 0;
}
#top .hanbai .flex-box{
  gap: 40px;
  padding: 35px 20px;
  background: center/cover no-repeat url(../../img/top/banner-hanbai.jpg);
  border: 10px solid #fff;
justify-content: center;
align-items: flex-end;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.08);
}
#top .hanbai h2{
  font-size: 40px;
  text-shadow: 0 3px 0 rgba(0,92, 146, 1);
  color: #fff;
  font-weight: 700;
}
#top .hanbai p{
  color: #fff;
    text-shadow: 0 1px 0 black;
}
@media screen and (min-width: 1920px){
  #top .deco-about2 .kage,#top .deco-about1-wrap {
position: relative;
max-width: fit-content;
margin: 0 auto;
}
#top .kage::before,#top .deco-about1-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
background: linear-gradient(to left, rgba(253, 249, 245, 0) 0%, rgba(253, 249, 245, 1) 100%);
}
#top .kage::after,#top .deco-about1-wrap::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 100%;
background: linear-gradient(to right, rgba(253, 249, 245, 0) 0%, rgba(253, 249, 245, 1) 100%);
}
#top #about .cnt-left::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
background: linear-gradient(to left, rgba(253, 249, 245, 0) 0%, rgba(253, 249, 245, 1) 100%);
}
}
@media screen and (max-width: 1440px){
#top .hero {
padding-top: 60px;
}
}
@media screen and (max-width: 1280px){
  #top .hero h1{
max-width: 500px;
  }
#top .hero .vertical-text {
right: 10%;
top: 80px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
z-index: 10;
}
#top #about .cnt-left{
width: 50%;
}
#top #about .cnt-right{
width: 50%;
margin-left: auto;
position: relative;
z-index: 10;
}
#top #about .deco-about9{
  right: 0;
  width: 23%;
}
#top #menu h2 img {
margin: 0 auto;
width: 80%;
}
#top #menu {
padding: 50px 0;
}
#top #menu .flex-box1 {
gap: 0;
justify-content: space-between;
}
#top #menu .cnt-left {
width: 50%;
}
#top #menu .cnt-right{
width: 45%;
flex-direction: column;
}
#top #menu .cnt-right .cnt-box {
width: 100%;
}
#top #menu .cnt-right .flex-box {
width: 100%;
flex-direction: row;
justify-content: space-between;
}
#top #menu .cnt-right .flex-box img{
  width: 49%;
}
#top #menu .deco1 {
width: 7%;
}
#top #menu .deco2 {
top: auto;
bottom: 3%;
}
#top #menu .deco3 {
top: 15.8%;
}
#top #menu .title + p {
margin-bottom: 0px;
}
#top #news {
padding: 250px 0;
}
#top #contact-area {
margin-top: -100px;
}
#top #news .cnt-left {
padding: 35px;
}
}
@media screen and (max-width: 1180px){
#top #news .flex-box1{
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
}
#top #news .cnt-left{
  width: 100%;
  border-radius: 10px 10px 0 0;
}
#top #news .cnt-right {
width: 100%;
}
#top #news .cnt-right img{
  border-radius: 0 0 10px 10px;
}
}
@media screen and (max-width: 1080px){
  #top #about .cnt-right h3{
justify-content: center
  }
#top #about .flex-box2 {
flex-direction: column-reverse;
width: 100%;
}
#top #about .cnt-right {
width: 89%;
margin: 0 auto;
}
#top #about .cnt-right p{
text-align: center;
font-size: 16px;
}
#top #about .cnt-right h3 +span {
margin-bottom: 10px;
text-align: center;
}
#top #modal-btn {
margin: 20px auto 0;
}
#top #about .deco-about9 {
right: 0;
width: 15%;
}
#top #about .cnt-left {
width: 100%;
}

#top #menu .title {
font-size: 30px;
line-height: 1.6;
}
#top #menu .flex-box1 {
flex-direction: column;
}
#top #menu .flex-box2{
  justify-content: space-between;
}
#top #menu .cnt-left {
width: 100%;
}
#top #menu .cnt-right {
width: 100%;
max-width: 500px;
margin: 30px auto 0;
}
#top #menu .price-box {
margin-bottom: 10px;
}
#top #menu .deco1 {
top: 10%;
}
#top #menu .deco3 {
top: 22%;
}
#top #menu .price-box .bucket-sm {
width: 20px;
margin-right: 17px;
}
#top #menu .price-box .bucket-lg {
width: 30px;
}
}
@media screen and (max-width: 768px){
#top .hero{
  min-height: auto;
}
#top .hero .vertical-text {
right: 14.9%;
top: 67px;
}
#top .hero .white-box {
font-size: 18px;
}
#top .hero .vertical-text .span-1, #top .hero .vertical-text .span-2 {
padding: 10px 5px;
font-size: 16px;
}
#top .hero .vertical-text .span-1 {
margin-top: 20px;
height: 135px;
}
#top .hero .vertical-text img {
bottom: -16px;
width: 75px;
}
#top .crowd1 {
width: 45%;
left: -1.2%;
}
#top .crowd2 {
width: 45%;
bottom: 10%;
top: auto;
}
#top #about {
padding: 50px 0;
}
#top #about h2{
font-size: 18px;
margin: 0 auto 15px;
width: 40%;
}
#top #about .flex-box1 {
  flex-direction: column;
gap: 7.4%;
margin-bottom: 25px;
margin-top: 60px;
position: relative;
z-index: 10;
}
#top #about .cnt-box{
  width: 100%;
}
#top #about .flex-box1 div, #top #about .flex-box1 div div {
max-width: 363px;
margin: 0 auto 20px;
}
#top #about .flex-box1 .cnt-box img{
  margin: 0 auto 20px;
}
#top #about .flex-box1 h3 {
font-size: 18px;
margin-bottom: 5px;
}
#top #about .deco-about8{
  bottom: -30px;
}
#top #about .deco-about2{
  margin-bottom: 20px;
}
#top #about .cnt-right .cnt-span1 {
font-size: 20px;
line-height: 1;
margin-bottom: 8px;
}
#top #about .cnt-right .cnt-span span {
font-size: 16px;
}
#top #about .cnt-right .cnt-span2 {
font-size: 28px;
line-height: 1;
margin-bottom: 10px;
}
#top #modal-btn {
font-size: 16px;
}
#top #sky .wrapper {
height: 500px;
}
#top #sky .vertical-text .span-1,#top #sky .vertical-text .span-2{
font-size: 16px;
padding: 5px;
}
#top #sky .vertical-text1{
  right: 0;
  top: 50px;
}
#top #sky .vertical-text1 .span-1{
height: 220px;
}
#top #sky .vertical-text1 .span-2{
margin-top: 90px;
height: 180px;
}
#top #sky .vertical-text2 .span-1{
height: 285px;
}
#top #sky .vertical-text2 .span-2{
margin-top: 90px;
height: 215px;
}
#top #sky .vertical-text2 {
left: 0;
bottom: 70px;
}
#top #menu h2 {
margin: 0 auto 30px;
font-size: 18px;
}
#top #menu .title{
font-size: 28px;
}
#top #menu .deco1 {
width: 20%;
}
#top #menu .deco3{
  width: 15%;
}
#top #menu .deco4{
  width: 18%;
}
#top #menu .deco2{
  width: 21%;
  bottom: -3%;
}
#top #menu .cnt-box1 p span:first-of-type {
font-size:20px;
line-height: 1;
}
#top #menu .cnt-box1 p span:last-of-type {
font-size: 8px;
margin-top: 0;
}
#top #menu .cnt-right {
margin: 20px auto 0;
}
#top #menu .title + p{
  font-size: 16px;
}
#top #menu .mount {
font-size: 16px;
}
#top #menu .barlow {
font-size: 30px;
}
#top #menu .price-box {
margin-bottom: 10px;
font-size: 16px;
}
#top #menu .deco3 {
top: 25%;
}
#top #menu .cnt-right img {
height: auto;
}
#top #news {
padding: 80px 0 150px;
}
#top #news h2 .en {
margin-bottom: 8px;
}
#top #news h2 .jp {
font-size: 28px;
line-height: 1;
}
#top #news .cnt-left {
padding: 25px;
}
#top #news .flex-box2 {
flex-direction: column;
margin-bottom: 13px;
padding: 0;
}
#top #news .flex-box2 h2{
  margin-bottom: 15px;
}
#top #news .news-box a{
  flex-direction: column;
  gap: 0px;
  padding: 10px 0;
}
#top .hanbai .flex-box{
  gap: 20px;
  padding: 20px;
  border: 5px solid #fff;
flex-direction: column;
position: relative;
        z-index: 10;
        background: center / cover no-repeat url(../../img/top/banner-hanbai-sp.jpg);
        align-items: baseline;
}
#top .hanbai h2{
  font-size: 28px;
}
}