@charset "UTF-8";
:root {
  --f-en: "YakuHanJP", "din-2014", sans-serif;
  --f-ja: "YakuHanJP", "Noto Sans JP", sans-serif;
}

.container {
  font-family: var(--f-ja);
  padding-top: 80px;
  overflow: clip;
}


/****MV*****/
.mv_wrapp {
    margin-bottom: 0px;
    background: linear-gradient(105deg,rgba(27, 20, 99, 1) 0%, rgba(25, 18, 92, 1) 25%, rgba(11, 8, 41, 1) 100%);
}

.mv_fade {
    opacity: 0;
    transition: all 0.6s ease-out;
}
.mv_fade.on {
    opacity: 1;
}


.swiper-slide {
  width: 100%;
    position: relative;
}

.swiper-slide .cap {
    position: absolute;
    right: 2em;
    bottom: 1em;
    font-size: 11px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(000, 000, 000, 0.5), -1px 1px 2px rgba(000, 000, 000, 0.5), 1px -1px 2px rgba(000, 000, 000, 0.5), -1px -1px 2px rgba(000, 000, 000, 0.5);
}
.swiper-slide img {
  height: auto;
  width: 100%;
}

/***メインテキスト***/
.main_text_wrapp {
    position: relative;
    z-index: 2;
    padding: 100px 0 80px;
    background: linear-gradient(105deg,rgba(27, 20, 99, 1) 0%, rgba(25, 18, 92, 1) 25%, rgba(11, 8, 41, 1) 100%);
}

.main_text_wrapp .main_text {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: -140px;
}
.main_text_wrapp .main_point {
    width: 90%;
    max-width: 1100px;
    padding-top: 50px;
    margin: 50px auto 0;
    border-top: 1px solid #757575;
}


@media screen and (max-width: 768px) {
    
.main_text_wrapp {
    position: relative;
    z-index: 2;
    padding: 40px 0 40px;
}   
  
.main_text_wrapp .main_text {
    width: 90%;
    margin: 0 auto;
    margin-top: 0px;
}
.main_text_wrapp .main_point {
    width: 94%;
    max-width: 1100px;
    padding-top: 0px;
    margin: 40px auto 0;
    border-top:none;
}
    
}



/********トップコンセプト*********/
.top_concept {
    width: 100%;
    background: #fff;
    padding: 60px 0 60px;
}
.top_concept h3 {
    text-align: center;
    color: #0b1336;
     font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
    font-size: min(4.8vw, 50px);
    line-height: 190%;
    letter-spacing: 0.1em;
}
.top_concept h3 span {
    letter-spacing: -0.1em;
    font-size: 130%;
    border-bottom: 1px solid #0b1336;
    padding-bottom: 10px;
}
.top_concept h3 small {
    display: block;
    font-size: 80%;
    line-height: 100%;
}

.cv_wrapp_outer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 80%;
    max-width: 700px;
    margin: 60px auto 30px;
}
.top_cv_wrapp {
    width: 48%;
    max-width: 400px;
    margin: 0px;
    position: relative;
}
.top_cv_wrapp a.button {
    display: block;
    height: 80px;
    background: linear-gradient(90deg, rgba(0, 98, 161, 1) 0%, rgba(7, 81, 140, 1) 39.3%, rgba(20, 50, 100, 1) 100%);
    transition: all .3s ease;
}
.top_cv_wrapp a.button.reserve {
    background: linear-gradient(90deg, rgba(175, 149, 101, 1) 0%, rgba(159, 131, 80, 1) 45.15%, rgba(135, 105, 49, 1) 99.89%);
}
.top_cv_wrapp a:hover {
 opacity: 0.7;
}

.reserve_info {
    text-align: center;
    color: #0b1336;
     font-family: "Zen Old Mincho", serif;
  font-weight: 500;
    font-size: min(2.8vw, 26px);
}
.reserve_info figure {
    display: inline-block;
}

.reserve_info span {
    display: block;
    font-size: 60%;
}


.top_concept2 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.top_concept2 .concept2_bg {
    position: relative;
    transition: all 1.8s ease-out;
    opacity: 0;
    filter: blur(6px) brightness(300%);
}

.top_concept2 .concept2_bg.is-active {
   opacity: 1;
    filter: blur(0px) brightness(100%);
}

.top_concept2 .cap {
    position: absolute;
    right: 1em;
    bottom: 1em;
    color: #fff;
    font-size: 11px;
}

.top_concept2 .tommorow_text {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0%;
  overflow: hidden; /* はみ出たスライドを隠す */
}

.top_concept2 .tommorow_text_in {
    width: calc(200vw / 1);
    display: flex; /* スライドのグループを横並び */
}

.top_concept2 .tommorow_text_in p {
width: 90vw;
    margin: 0 5vw;
    animation: infinity-scroll-left 40s infinite linear 0.5s both;
}

	@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}

.top_concept2 .top_concept2_in {
    position: absolute;
    width: 100%;
    top: 7%;
   left: 50%;
   transform: translate(-50%,0%);
    z-index: 3;
}

.top_concept2 h3 {
    text-align: center;
    font-weight: 700;
    font-size: min(4.8vw, 60px);
    color: #1b1464;
    letter-spacing: 0.1em;
    margin-top: -60px;
    margin-bottom: 5%;
    position: relative;
    z-index: 2;
}
.top_concept2 h3 span {
    display: block;
    font-size: 60%;
    letter-spacing: 0;
}

.top_concept2 .deve_logo {
    width: 70%;
    max-width: 1000px;
    margin: 0 auto 5%;
}
.top_concept2 .concept_text {
color: #0b1336;
    font-weight: 500;
    font-size: min(1.6vw, 18px);
    text-align: center;
    line-height: 250%;
}


@media screen and (max-width: 768px) {
  
.top_concept {
    width: 100%;
    background: #fff;
    padding: 40px 0 40px;
}
    
.top_concept h3 {
    font-size: min(8.0vw, 50px);
}
.top_concept h3 span {
    font-size: 120%;
} 
    
    
.cv_wrapp_outer {
    width: 80%;
    margin: 40px auto 0px;
}
    
.top_cv_wrapp {
    width: 100%;
    margin: 0px auto 20px;
    position: relative;
}
.reserve_info {
    font-size: min(5.8vw, 26px);
    letter-spacing: 0;
}
.reserve_info figure {
    display: none;
}
.reserve_info span {
    font-size: 50%;
}   
    
.top_concept2 .tommorow_text {
    width: 92%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 4%;
}

.top_concept2 .tommorow_text_in {
    width: 100%;
    display: flex; 
}

.top_concept2 .tommorow_text_in p {
width: 100%;
    margin: 0;
    animation:none;
} 
.top_concept2 h3 {
    font-size: min(9.4vw, 60px);
    margin-top: 20px;
    margin-bottom: 5%;
    line-height: 150%;
}
.top_concept2 h3 span {
    font-size: 42%;
}   
.top_concept2 .deve_logo {
    width: 90%;
} 
.top_concept2 .concept2_bg {
    margin-top: 46vh;
}
.top_concept2 .concept_text {
    font-size: min(2.8vw, 18px);
}   
    
    
}



/***コンテンツブロック***/

.contents_block_wrapp {
    width: 100%;
    padding: 80px 0 0;
    overflow: hidden;
     background: linear-gradient(105deg,rgba(27, 20, 99, 1) 0%, rgba(25, 18, 92, 1) 25%, rgba(11, 8, 41, 1) 100%);
}
.contents_flexbox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 100px;
}
.contents_flexbox.reverse {
    flex-direction: row-reverse;
}

.contents_flexbox .contents_photo {
    width: 50%;
    flex: 1;
    position: relative;
}

.contents_flexbox .contents_photo .cap {
    opacity: 0;
    transition: all 1.4s ease-out;
    position: absolute;
    left: 1em;
    bottom: 1em;
    font-size: 11px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(000, 000, 000, 0.5), -1px 1px 2px rgba(000, 000, 000, 0.5), 1px -1px 2px rgba(000, 000, 000, 0.5), -1px -1px 2px rgba(000, 000, 000, 0.5);
}

.contents_flexbox .contents_photo.on .cap {
    opacity: 1;
}

.contents_flexbox .contents_photo .cap.location_cap_1 {
    left: auto;
    right: 52%;
    bottom: 45%;
}
.contents_flexbox .contents_photo .cap.location_cap_2 {
    left: auto;
    right: 1em;
    bottom: 63%;
}
.contents_flexbox .contents_photo .cap.location_cap_3 {
    left: auto;
    right: 52%;
    bottom: 1em;
}
.contents_flexbox .contents_photo .cap.location_cap_4 {
    left: auto;
    right: 1em;
    bottom: 1em;
}
.contents_flexbox .contents_photo .cap.rig {
    left: auto;
    right: 1em;
    bottom: 1em;
}

.contents_flexbox .contents_text {
    width: 42%;
    padding-left: 4vw;
    padding-right: 2vw;
    padding-bottom: 20px;
    text-align: left;
}
.contents_flexbox.reverse .contents_text {
    padding-left: 8vw;
}

.contents_flexbox .contents_text h3 {
    font-family: din-2014, sans-serif, 'YakuHanJP', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
    font-weight: 700;
    color: #fff;
    font-size: min(2.2vw, 20px);
    line-height: 100%;
    margin-bottom: 40px;
}
.contents_flexbox .contents_text h3 span {
    display: block;
    
    font-size: min(4.2vw, 60px);
    line-height: 180%;
    background: linear-gradient(90deg, #f7e8c0 0%, #735b00 45%, #fde79d 70%, #dbb10c 85%, #bc7f04 90% 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contents_flexbox .contents_text p {
    color: #fff;
    margin-bottom: 40px;
font-family: "Zen Old Mincho", serif;
  font-weight: 500;
    font-size: min(1.8vw, 20px);
}

.contents_flexbox .contents_text p .caution {
    display: block;
    font-size: 70%;
}

.contents_flexbox .contents_text p sup {
    font-size: 60%;
}

.contents_flexbox .contents_text .contents__btn a
 {
position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
-ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #333333;
  font-family: var(--f-en);
  letter-spacing: 0.1em;
  color: #fff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
    width: 180px;
    aspect-ratio: 180 / 52;
    font-size: 16px;
}

.contents_flexbox .contents_text .contents__btn a:hover {
    background: #666;
}

.contents_flexbox .contents_text .contents__btn a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 40px;
    height: 1px;
    background-color: #fff;
    transition: 0.5s;
}
.contents_flexbox .contents_text .contents__btn a:hover::after {
    width: 20px;
}

.footer_image {
    width: 100%;
    margin-top: -100px;
    position: relative;
    transition: all 1.8s ease-out 0.2s;
/*transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);*/
    opacity: 0;
    filter: blur(6px) brightness(400%);
}

.footer_image.is-active {
    opacity: 1;
    filter: blur(0px) brightness(100%);
}

.footer_image .cap {
    position: absolute;
    right: 1em;
    bottom: 1em;
    font-size: 11px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(000, 000, 000, 0.5), -1px 1px 2px rgba(000, 000, 000, 0.5), 1px -1px 2px rgba(000, 000, 000, 0.5), -1px -1px 2px rgba(000, 000, 000, 0.5);
}

.card_image {
    transition: all 1.4s ease-out;
    transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
    opacity: 0;
    clip-path: polygon(0% 0, 5% 100%, 7% 100%, 2% 70%, 0 0%);
    }
.on .card_image {
    opacity: 1;
    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%, 0 0%);
    }


@media screen and (max-width: 768px) {
  
.contents_flexbox {
    display: block;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 0;
} 
.contents_flexbox .contents_photo {
    width: 100%;
    flex: 1;
    position: relative;
}
.contents_flexbox .contents_text {
    width: 100%;
    padding-left:0;
    padding-right: 0;
    padding-top: 30px;
    padding-bottom: 80px;
    text-align: center;
}  
    
.contents_flexbox.reverse .contents_text {
    padding-left: 0;
} 
    
.contents_flexbox .contents_text h3 {
    font-size: min(5.2vw, 20px);
    margin-bottom: 20px;
} 
    
.contents_flexbox .contents_text h3 span
 {
    font-size: min(7.7vw, 60px);
    line-height: 180%;
} 
.contents_flexbox .contents_text p {
    font-size: min(3.8vw, 22px);
    margin-bottom: 20px;
} 
.contents_flexbox .contents_text .contents__btn a {
    margin: 0 auto;
} 
    
.contents_flexbox .contents_photo .cap {
  font-size: min(2.4vw, 10px);
}
    
    
}



.fadein_up {
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
    transition: all 1s ease-out;
    transition-delay: 0.2s;
}
.fadein_up.started {
    transform: none;
    opacity: 1;
}