@charset "utf-8";
/* 1536 , 1530 × 735 ,1366 *//* ←記画面幅でも崩れていないか確認 */

/* カテゴリリンクの飛び先位置の数値を適宜調整してください */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */


/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Shippori+Mincho&display=swap');

:root{
    --fw-bold: 500;
}

body{
    font-size: 16px;
    font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: var(--fw-bold);
}
.con_title, .intro_txt_kotei  {
     font-family: "Shippori Mincho", serif;
     font-weight: 600;
}
.font_roboto {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 2vw;
    color: var(--color3);
    letter-spacing: 0;
}
.font_en {
    font-family: "Roboto","Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#main_img, #contents_box{
    background-color: var(--color5);
}
.txt_white, .hvr_txt_white:hover {
    color: var(--color2);
}
.bg_white, .hvr_bg_white:hover {
    background-color: #f3f3f3;
}
#cms_3-e .txt_white{
    color: #fff;
}

#loading_bg{
    overflow: hidden;
}

.fat-nav li {
    font-size: 16px;
}

#logo{
    padding: 0;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
body{
    font-size: 16px;
}
header.bg_color1 {
    padding-bottom: 20px;
    padding-top: 20px;
    & #logo{
        max-width: 255px;
    }
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
body{
    font-size: 14px;
}
.font_roboto {
    font-size: 18px;
}
header.bg_color1 {
    padding-bottom: 10px;
    padding-top: 10px;
    & #logo {
        max-width: 214px;
    }
}
.hamburger {
    top: 5px;
    right: 3px;
}
.main_box {
    padding-top: 49px;
}
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img{
    position: relative;
    max-height: 100%;
    min-height: 63vw;
    z-index: 2;
    & .fv_txt1, & .fv_txt2 {
        width: min(69%, 980px);
        top: 2%;
        left: -40px;
    }
    & .fv_txt1{
        z-index: 2;
    }
    & .fv_txt2{
        z-index: 3;
    }
    & .fv_txt3{
        z-index: 3;
        right: 3%;
        top: 7%;
        width: min(12%,170px);
    }
    & .fv_item1{
        z-index: 2;
        right: 0;
        top: 8%;
        width: min(68%, 1000px);
    }
    & .fv_bg1 {
        z-index: 0;
        top: 0;
        right: 0;
        width: 70%;
    }
}

.dodon-trigger {
  opacity: 0;
  &.is-active {
      animation: dodon-triple 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
}
@keyframes dodon-triple {
  0% {
    opacity: 0;
    transform: scale(2.5) translateY(-100px);
    filter: blur(10px);
  }
  30% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
  45% {
    transform: scale(1.05) translateY(-10px);
  }
  60% {
    transform: scale(1) translateY(0) translateX(-5px) rotate(-1.5deg);
  }
  75% {
    transform: translateX(4px) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0);
  }
}
.delay-1 { animation-delay: 0.15s!important; }
.delay-2 { animation-delay: 0.2s!important; }
.delay-3 { animation-delay: 0.7s!important; }


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#main_img {
    margin-bottom: -17px;
    min-height: 172vw;
    & .fv_txt1, & .fv_txt2 {
        width: 100%;
        top: -2%;
        left: -24px;
    }
    & .fv_item1 {
        right: 0;
        top: auto;
        bottom: 0;
        width: 96%;
    }
    & .fv_txt3 {
        right: 3%;
        top: auto;
        bottom: 19%;
        width: 18%;
    }
}

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
body{
    overflow: visible;
}
#contents1{
    padding: 0;
    width: 100%;
    & .intro_title{
        width: 80%;
        margin-bottom: 18vw;
        transform: translateX(-76px);
        margin-top: 10px;
    }
    & .text{
        font-weight: var(--fw-bold);
        color: var(--color2);
        font-size: clamp(16px, 1.1428571429vw, 20px);
        letter-spacing: 0.07em;
        line-height: 2.8;
    }
    & .intro_txt_kotei{
        font-weight: bold;
        color: var(--color2);
        font-size: 2.142857vw;
        letter-spacing: 0.07em;
        line-height: 1.8;
    }
}
.sticky_container{
    & .sticky_item {
        position: sticky;
        top: -7%;
        height: 100vh;
        padding: 5%;
    }
    & .scroll_item {
        padding: 0% 10% 21%;
        overflow: hidden;
    }
}

.video_wrap{
    padding: 10% 0%;
    position: relative;
    z-index: 5;
    margin-top: -15%;
}
#video {
    height: 40vw!important;
    max-height: 650px;
    transform:rotate(-5deg) scale(1.1);
    z-index: 1;
    width: 100%;
    overflow: hidden;
}

#attach{
    padding: 0 0 24% 6%;
    box-sizing: border-box;
    background-image: url(../img/con_bg1.png), url(../img/con_bg2.png), url(../img/con_bg2.png), url(../img/con_bg1.png);
    background-position: top 36% left, top 2% right, top 68% right, bottom -3% left;
    background-repeat: no-repeat;
    background-size: 46%, 40%, 46%, 45%;
    & .blur{
        backdrop-filter: blur(0px);
        background-color: transparent;
    }
    & .con_dai_title {
        width: 49%;
        margin-top: -3%;
    }
    & .con_item1 {
        width: min(50%, 800px);
        right: 0;
        top: -5%;
    }
    & .con_title{
        line-height: 1;
        & span:first-of-type{
            font-size:2vw;
            position: relative;
            z-index: 2;
        }
        & span:last-of-type{
            font-size:4vw;
            line-height: 1.2;
        }
    }
    & .text {
        font-size: clamp(16px, 1.1428571429vw, 20px);
        letter-spacing: 0.02em;
        line-height: 2;
        font-weight: var(--fw-bold);
    }
}
.img-container.active .img-container_img{
    opacity: 1!important;
}
.top_bnr{
    margin-top: -25%;
}

/* title anim */
.intro_txt_kotei span, #attach .con_title span {
    padding: 5px;
    display: inline;
    line-height: 1.6;
    box-sizing: border-box;
    color: transparent;
    background: linear-gradient(to right, var(--color3),  var(--color3));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size .5s 0s ease, color .2s 0s ease;
}
.intro_txt_kotei span {
    padding: 5px;
    display: inline;
    line-height: 1.6;
    box-sizing: border-box;
    color: transparent;
    background: linear-gradient(to right, var(--color2),  var(--color2));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size .5s 0s ease, color .2s 0s ease;
}
.js-show .con_title span {
    background-size: 100% 100%!important;
    color: #ffffff !important;
}
.js-show .intro_txt_kotei span {
    background-size: 100% 100%!important;
    color: var(--color1)!important;
}
#contents2 .title, #contents3 .title {
    border-bottom: none;
    margin-bottom: 40px;
}
.anim-bgtxt-txt.on .txt {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: blur(0);
    transition: transform 0.2s 0.3s ease-out, opacity 0.2s 0.3s ease-out, filter 0.1s 0.3s ease;
}
.img-container:before{
    display: none;
}

.top_cms_wrap {
    background-color: var(--color2);
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#contents1 {
    & .intro_title {
        width: 66%;
        margin-top: 7px;
        margin-bottom: 19vw;
        transform: translateX(-46px);
    }
    & .text {
        font-size: 16px;
        line-height: 2;
    }
    & .intro_txt_kotei{
        font-size: 3.142857vw;
        line-height: 2.2;
    }
}
.sticky_container {
    & .sticky_item {
        display: none;
    }
    & .scroll_item {
        padding: 10% 10% 17%;
        background-image: url(/Files/img/intro_bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
}
    
#attach {
    & .con_title {
        span:first-of-type {
            font-size: 3.571429vw;
        }
        span:last-of-type {
            font-size: 4.571429vw;
        }
    }
    & .text {
        font-weight: var(--fw-bold);
        font-size: 16px;
        letter-spacing: 0.02em;
    }
}
#contents2 .title, #contents3 .title {
    border-bottom: none;
    margin-bottom: 14px;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#video {
    height: 30vh !important;
}
#contents1 {
    & .intro_title {
        width: 95%;
        margin-top: 7px;
        margin-bottom: 34vw;
        transform: translateX(-16px);
    }
    & .intro_txt_kotei{
        font-size: 17px;
        line-height: 2.2;
    }
}
.sticky_container {
    & .scroll_item {
        padding: 16% 5% 20%;
        background-image: url(/Files/img/intro_bg.jpg);
    }
}

#attach {
    padding: 5% 5% 29%;
    & .con_dai_title {
        width: 70%;
    }
    & .con_title {
        span:first-of-type {
            font-size: 18px;
        }
        span:last-of-type {
            font-size: 25px;
        }
    }
    & .con_item1 {
        width: min(50%, 800px);
        top: -2%;
    }
    & .text {
        font-size: 14px;
    }
}
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#page8 .bnr {
    width: min(100%, 1000px);
    margin-top: -9px;
}
.page8_title{
    font-size: 25px;
    font-weight: bold;
}
#tel_txt .title {
    color: var(--color3)!important;
}
#cms_6-b .cate_title{
    color: #fff;
}


/*カテゴリリンクの飛び先位置を調整する*/
/* --- PC --- */
:root {
--header-height: 50px;
}
/* --- タブレット --- */
@media screen and (max-width: 768px){
:root {
--header-height: 130px;
}
}
/* --- スマートフォン --- */
@media screen and (max-width: 667px){
:root {
--header-height: 100px;
}
}





/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.page8_title {
    font-size: 18px;
    font-weight: bold;
}
}