.index0{z-index: 0!important;}

/* ---------- font ---------- */

/* @import url('https://fonts.googleapis.com/css2?family=Jost:wght@500&family=Zen+Kaku+Gothic+New:wght@500;900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');


:root{
	--font-jp: "Shippori Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
body, .font_sans-serif, .font_serif{
    font-family: var(--font-jp);
}

/* ---------- color ---------- */
.bg_base {
    background-color: #ffffff;
}





/* ======================================================================================
　　all
======================================================================================== */

/* ---------- anim ---------- */
.txt_anim1 span{
	position: relative;
	right: 20px;
	opacity: 0;
	transition: all .8s;
}
.txt_anim1 span.start{
	right: 0;
	opacity: 1;
}
#loading .loading_logo{
    width: 150px;
}

/* ---------- header ---------- */
#logo {
    width: 150px;
    opacity: 0.6;
}


/* ---------- footer ---------- */
#top_info{
    background: url( "../img/f_bg.jpg" ) center / cover no-repeat;
}
footer.bg_black {
    background-color: #343331;
}
.top_info_left {
    background: none!important;
}
.top_info_left_bg {
    background-color: #90c7f7;
}
.top_info_right {
    background-color: rgb(35 151 181 / 92%);
}
#top_info .contact_bt a {
    border-radius: 50px;
    color: var(--color5);
    border-color: var(--color5);
    background-color: rgb(255 255 255 / 58%);
}
.foot_tel a{
    color: var(--color5);
}
#logo2{
    max-width: 150px;
    margin: 0 auto 30px;
}



/*======================================================================================
　　top
======================================================================================== */

.top_con_wrap {
    position: relative;
    background: linear-gradient(to bottom, #f79252 11%, #ee7860 28%, #283863 55%, #001935 100%);
    background: linear-gradient(to bottom, #f49972 0%, /* 開始：朝焼けのオレンジ */ #e67e5f 15%, /* オレンジの範囲をさらに絞り、早めに切り替え */ #3a4b78 56%, /* メインとなる深い青 */ #0c1729 100% /* 底部はより深い夜の色へ */);
}
.top_con_wrap:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 22vw;
    top: calc(-22vw - -1px);
    background: linear-gradient(to bottom, #f7925200 0%, #f39871e6 79%, #f39871 100%);
    z-index: -2;
}


#main_img .sns_links{
        bottom: calc(140px - -20vh);
}
#main_img .swiper-pagination{
    bottom: calc(30px - -21vh);
}

.main_wrap.top {
    padding-top: 14vh;
}
/*#main_img {
    height: 100vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    z-index: -1;
}*/
#main_img{
    height: 120vh;
}
.swiper-container .opacity07 {
    opacity: 1;
}
#main_img .main_txt{
    max-width: 1300px;
}
.fv_txt {
    width: min(50%, 480px);
    margin: auto;
    transform: translateY(-15%);
}
.fv_txt2{
    top: -7%;
    right: 15%;
    width: min(13%, 180px);
}

#top_intro .intro_img{
    margin-top: -200px;
}

.con1,.con2{
    width: 76% !important;
}
.con2 {
    margin-left: auto;
    margin-right: 10%;
}
.con1 .mg_t-150px, .con2 .mg_t-150px {
    margin-top: 13vw;
}


#top_link {
    margin-top: -1px;
    padding-bottom: 20vw;
    padding-top: 14vw;
}
#top_link .top_link_title {
    font-size: 50px;
    font-weight: 400;
}
.wave-bg {
    bottom: 0;
    right: 0;
    width: 135%;
    height: 200px;
    z-index: 0;
}
.wave-bg svg {
    width: 100%;
    height: 100%;
}
#top_cms{
    margin-top: -2px;
    z-index: 2;
    position: relative;
}





/* ---------- loopSlider ---------- */

.slider-container {
  overflow: hidden;
  width: 100%;
}

.slider-track {
  display: flex;
  width: max-content; /* 中身の幅に合わせて自動で広がる */
  animation: scroll 30s linear infinite;

}

.loop-content {
  display: flex; /* 画像を横並びにする */
}

.slider-item {
  width: 400px; /* 好きな幅でOK（バラバラでも可） */
  flex-shrink: 0;
}

.top_intro_b.slider-container {
    padding: 68px 0 0;
}
.top_intro_b .slider-item{
    padding: 0 18px;
    margin: 68px 0 0;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 2セット並んでいるうちの、1セット分（50%）移動させる */
    transform: translateX(-50%);
  }
}

/* マウスを乗せた時に止めたい場合（お好みで） */
/*.slider-container:hover .slider-track {
  animation-play-state: paused;
}
*/



/*======================================================================================
　　under
======================================================================================== */
.cate_list, #page_list {
    background-color: var(--color3);
}
.page_title_bg {
    background-color: #4d3939;
}

#page08 .tel_wrap {
    margin-top: -50px;
    padding: 0;
}
.yoyaku_bnr{
    width: min(100%, 650px);
    margin-bottom: 65px;
}
.Instagram_bnr{
    width: min(100%, 650px);
    margin-bottom: 80px;
}




/*======================================================================================
　　size
======================================================================================== */
/* ---------- tablet ---------- */
@media screen and (max-width: 768px){
#loading .loading_logo{
    width: 150px;
}
.Instagram_bnr{
    width: min(100%, 500px);
    margin-bottom: 70px;
}
#logo {
    top: 28px;
    left: 28px;
}
.main_wrap.top {
    padding-top: 0;
}
#main_img {
    height: 116vh;
}
.fv_txt {
    width: 54%;
    margin: auto;
    transform: translateY(-31%);
}
.fv_txt2 {
    top: auto;
    bottom: -13%;
    right: 0;
    left: 0;
    width: 54%;
    margin: auto;
}
#top_intro .intro_title1 {
    height: 337px;
}
.slider-item {
    width: 300px;
    flex-shrink: 0;
}
#top_con {
    padding-left: 12%;
    padding-right: 12%;
}
.con1, .con2 {
    width: 100% !important;
}
.con2 {
    margin-left: auto;
    margin-right: 0;
}
#top_link .top_link_title {
    font-size: 30px;
}
#top_link {
    padding-bottom: 20vw;
    padding-top: 15vw;
}
.wave-bg {
    height: 46px;
    z-index: 0;
}
#logo2 img{
    width: 59%;
}
.sns_links li {
    width: 63px;
}

}

/* ---------- mobile ---------- */
@media screen and (max-width: 667px){
#loading .loading_logo {
    width: 130px;
}
#menu_nav #nav_logo {
    top: 21px;
    left: 30px;
    width: 62px;
}
#main_img {
    height: calc(100svh + 80px);
}
.main_wrap.top {
    padding-top: 0;
}
.fv_txt {
    width: 83%;
    margin: auto;
    transform: translateY(-20%);
}
.fv_txt2 {
    top: auto;
    bottom: -24%;
    right: 0;
    left: 0;
    width: 69%;
    margin: auto;
}
#top_intro .intro_img {
    margin-top: 0;
}

.Instagram_bnr {
    margin-bottom: 50px;
    margin-top: -50px;
}
#head_contact{
    display: none;
}
#logo {
    top: 15px;
    left: 18px;
    width: 83px;
}
.modal_wrap .intro_img {
    margin-bottom: 20px;
    padding: 10px;
}
#top_intro .intro_title1 {
    height: inherit;
}
#top_intro .intro_title1 {
    height: inherit;
    font-size: 22px;
    letter-spacing: 0;
}
#top_intro .intro_title_wrap{
    padding-left: 0;
    margin-bottom: 57px;
}
#top_con .con_about {
    font-weight: 300;
}
.slider-item {
    width: 150px;
}
#top_con {
    padding-left: 5%;
    padding-right: 0;
    }
.top_intro_b .slider-item {
    padding: 0 4px;
    margin: 0;
}
#top_link {
    padding-bottom: 28vw;
    padding-top: 20vw;
}
.wave-bg {
height: 67px;
        z-index: 0;
        right: -5%;
}
#copyright{
    font-size: 14px;
    letter-spacing: 1px;
}
#logo2{
    max-width: 203px;
    margin: 0 auto 30px;
}
#logo2 {
    max-width: 250px;
    margin: 0 auto 30px;
}
}



/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    bottom: 22px;
    right: 94px;
    z-index: 10;
    width: 70%;
    max-width: 200px;
    transition: 0.5s;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
.kasou #fix_bnr {
    opacity: 1;
    pointer-events: auto;
}
#fix_bnr.scroll{
    opacity: 1;
pointer-events: auto;
}
#fix_bnr.close{
    opacity: 0;
    pointer-events: none;
}
@media screen and (max-width: 768px){
/*#fix_bnr.close{
    transform: translateY(200px);
}*/
#fix_bnr {
    max-width: 177px;
}
}
@media screen and (max-width: 667px){
#fix_bnr {
    width: 57%!important;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 10px;
}
#fix_bnr {
    width: 36% !important;
    left: 11px;
    right: auto;
    margin: auto;
    bottom: 11px;
}

}
/* fix_bnr end ---------------------------------------------------------------------------------------------*/