﻿/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */
.con_navbar.is-fixed ul {
    background-color: #fff;
}

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */

/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

:root{
    --color1: #FF7D81;
    --color2: #F9EFF1;
    --color3: #F9EFF1;
	/*--color4: #f5f2e9;*/
	/*--font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;*/
}

.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}
.txt_color2, .hvr_txt_color2:hover{color: var(--color2);}
/*.txt_color3, .hvr_txt_color3:hover{color: var(--color3);}*/
/*.txt_color4, .hvr_txt_color4:hover{color: var(--color4);}*/

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2);}
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3);}
/*.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4);}*/

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2);}
/*.border_color3, .hvr_border_color3:hover{border-color: var(--color3);}*/
/*.border_color4, .hvr_border_color4:hover{border-color: var(--color4);}*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.mainwrap-r {
    width: 13%;
}

.fixbnr {
    z-index: 2;
    right: 40px;
    bottom: 40px;
    width: 8%!important;
}

.fv_copy {
    top: 39%;
    width: 29%;
    right: 19%;
}

#mainwrap {
    overflow: hidden;
    min-height: auto;
}

.fv-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

/* ==== 左：薄い画像帯 ==== */
.strip-left {
  position: absolute;
  left: 7%;
  top: -8%;
  width: 22vw;
    height: 120%;
  overflow: hidden;
  opacity: 0.35;
  transform: rotate(13deg);
}

.strip-left img {
  width: 70%;
    aspect-ratio: 1.6;
      object-fit: cover;
  border-radius: 18px;
  margin-bottom: 2.8vw;
   padding: 8px;
}

/* ==== 右：濃い画像帯 ==== */
.strip-right {
    position: absolute;
    left: 19%;
    top: -10%;
    width: 28vw;
    height: 130%;
    overflow: hidden;
    opacity: 1;
    transform: rotate(13deg);
}

.strip-right img {
  width: 70%;
  object-fit: cover;
      aspect-ratio: 1.6;
  border-radius: 20px;
  margin-bottom: 3.2vw;
   padding: 8px;
}

/* トラック（縦スクロール） */
.photo-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* ===== SPレスポンシブ ===== */

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .fv_copy {
        top: 34%;
        width: 82%;
        right: 50%;
        transform: translateX(50%);
        z-index: 2;
    }
    .strip-left {
        position: absolute;
        left: 7%;
        top: -26%;
        width: 52vw;
        height: 104%;
        transform: rotate(43deg);
    }
    
    .strip-right {
        position: absolute;
        left: 30%;
        top: 57%;
        width: 80vw;
        height: 130%;
        transform: rotate(43deg);
    }
    
    .fixbnr {
        z-index: 2;
                left: 27px;
        bottom: 20px;
        width: 20% !important;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
        .strip-right {
            top: 30%;
        }
        
            .fixbnr {
        z-index: 2;
        left: 17px;
        bottom: 20px;
        width: 26% !important;
    }
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#mainwrap {
    padding: 0px;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    
    .bg_custom01 {
        background-size: contain;
        background-position: 0;
    }
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}


