@charset "utf-8";


/* top page */
.top_bg_01{
    background-color: #fbfbf1;
}
.ttl_img450 img{
    max-width: 450px;
}
.ttl_img500 > img{
    max-width: 500px;
}
.abs{
    position: absolute;
}
.top_mv_text{
    position: absolute;
    bottom: 60%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
}
.top_mv_text > span:nth-of-type(1){
    font-size: clamp(42px,10vw,115px);
    display: block;
    padding-bottom: 2rem;
    overflow: hidden;
    font-weight: 900;
}
.top_mv_text > span:nth-of-type(2){
    color: #b0bdc3;
    font-size: clamp(25px,4vw,48px);
    display: block;
    overflow: hidden;
  -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    animation: top_mv_text02 forwards 2s 0.7s;
}
@media screen and (max-width: 820px){
    .top_mv_bg img{
        width: 170%;
        margin-left: -35%;
    }
}


.top_mv_deco01{
    right: 10%;
    top: 14.5%;
    max-width: 80px;
    width: 5.925926%;
    opacity: 0;
    animation: top_op forwards 1s 1s;
}
.top_mv_deco02{
    left: 12.1%;
    top: 23.5%;
    max-width: 53px;
    width: 3.925926%;
    opacity: 0;
    animation: top_op forwards 1s 1.1s;
}
.top_mv_deco03{
    left: 13.5%;
    top: 37%;
    max-width: 176px;
    width: 13.037037%;
    transform-origin: 100% 60%;
    animation: top_car forwards 1.5s 2s;
    transform: scale(0);
}
.top_mv_deco04{
    top: 14.5%;
    left: 42.5%;
    max-width: 116px;
    width: 8.592593%;
    opacity: 0;
    animation: top_op forwards 1s 1.2s;
}
.top_mv_deco05{
    top: 14.5%;
    left: 3%;
    max-width: 153px;
    width: 11.33333%;
    opacity: 0;
    animation: top_op forwards 1s 1.3s;
}
.top_mv_deco06{
    top: 31.5%;
    right: 2.6%;
    max-width: 74px;
    width: 5.481481%;
    opacity: 0;
    animation: top_op forwards 1s 1.4s;
}
.top_mv_deco07{
    right: 11%;
    top: 38.5%;
    max-width: 110px;
    width: 8.148148%;
    opacity: 0;
    animation: top_op forwards 1s 1.5s;
}
.top_mv_deco08{
    right: 32.4%;
    top: 12%;
    max-width: 41px;
    width: 3.037037%;
    opacity: 0;
    animation: top_op forwards 1s 1.6s;
}
.top_mv_deco09{
    right: 24.2%;
    top: 40.3%;
    max-width: 104px;
    width: 7.7037%;
    opacity: 0;
    animation: top_op forwards 1s 1.7s;
}
.top_mv_deco10{
    left: 26%;
    top: 9%;
    max-width: 69px;
    width: 5.1111%;
    opacity: 0;
    animation: top_op forwards 1s 1.8s;
}
.top_mv_deco11{
    left: 1.5%;
    top: 31%;
    max-width: 117px;
    width: 8.6666%;
    opacity: 0;
    animation: top_op forwards 1s 1.9s;
}
.top_mv_deco12{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 145px;
    width: 10.740741%;
}
.top_mv_deco12_01{
    animation: spin infinite linear 15s;
}
.top_mv_deco12_02{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.text_span_op{
    opacity: 0;
    transform: rotate(-30deg) translateY(205%);
    display: inline-block;
    animation: top_mv_text01 forwards 0.5s;
}
.top_intro_loop{
	display: flex;
	/*max-width: 658px;*/
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
    background-color: #0d1e54;
}
.top_intro_loop img{
    max-width: none;
    display: block;
    width: 4750px;
    object-fit: contain;
}
.top_intro_loop img:first-child{
	animation: loop 100s -50s linear infinite;
}
.top_intro_loop img:last-child{
	animation: loop02 100s linear infinite;
}
.top_ttl_deco{
    font-size: clamp(14px,2vw,20px);
    font-weight: normal;
    position: absolute;
    left: 0;
    bottom: 0;
}
.top_ttl_text{
    font-size: clamp(14px,2vw,20px);
}
@media screen and (max-width: 1199px){
    .top_mv_deco01{
        right: 8%;
    }
    .top_mv_deco02{
        left: 10%;
    }
    .top_mv_deco10{
        top: 11%;
    }
}
@media screen and (max-width: 999px){
    .top_mv_deco04{
        top: 11%;
    }
    .top_mv_deco08{
        top: 7%;
    }
    .top_mv_deco10{
        top: 6%;
        left: 30%;
    }
}
@media screen and (max-width: 820px){
    .top_mv_text{
        bottom: 62%;
    }
    .top_mv_deco01{
        width: 9.75%;
        right: 2%;
        top: 12%;
    }
    .top_mv_deco02{
        width: 6.46%;
        left: 4%;
    }
    .top_mv_deco03{
        width: 20.46%;
        left: 6%;
        top: 39%;
    }
    .top_mv_deco04{
        width: 14.14%;
    }
    .top_mv_deco05{
        width: 18.65%;
        top: 12%;
    }
    .top_mv_deco06{
        display: none;
    }
    .top_mv_deco07{
        width: 13.41%;
        right: 6%;
    }
    .top_mv_deco08{
        width: 5%;
    }
    .top_mv_deco09{
        width: 12.68%;
    }
    .top_mv_deco10{
        width: 8.41%;
        top: 12%;
        left: 28%;
    }
    .top_mv_deco11{
        display: none;
    }
    .top_mv_deco12{
        width: 17.68%;
    }
}
@media screen and (max-width: 599px){
    .top_intro_loop img{
        width: 2000px;
    }
    .top_mv_deco01{
        right: 1%;
        top: 15%;
    }
    .top_mv_deco02 {
        top: 28%;
    }
    .top_mv_deco03 {
        top: 40%;
    }
    .top_mv_deco04{
        left: 44%;
        top: 9%;
    }
    .top_mv_deco05 {
        top: 10%;
        left: -2%;
    }
    .top_mv_deco07{
        top: 40%;
        right: 5%;
    }
    .top_mv_deco08{
        top: 6%;
        right: 27%;
    }
    .top_mv_deco10{
        top: 10%;
        left: 30%;
    }
}
@keyframes top_car{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes top_op{
    0%{
        opacity: 0;
        transform: translateY(30px);
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}
@keyframes spin{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes top_mv_text01{
    0% {
        opacity: 0;
        transform: rotate(-45deg) translateY(205%);
    }
    100%{
        opacity: 1;
        transform: rotate(0deg) translateY(0%);

    }
}
@keyframes top_mv_text02{
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }
    100%{
        -webkit-clip-path: inset(0);
        clip-path: inset(0);

    }
}
@keyframes loop{
	0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
      }
  }
@keyframes loop02 {
	0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
      }
    }
  


/* content */
.top_ttl_grid{
    display: grid;
    grid-template-columns: 35% 1fr;
}
.top_ttl_grid > div{
    align-self: center;
}
.top_ttl_link{
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    row-gap: 3rem;
    padding: 1rem 2rem;
    max-width: 307px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    transition: all 0.4s;
}
@media screen and (max-width: 820px){
    .top_ttl_grid{
        grid-template-columns: 42% 1fr;
    }
}
@media screen and (max-width: 599px){
    .top_ttl_grid{
        grid-template-columns: 1fr;
        row-gap: 30px;
    }
}
.top_ttl_link span{
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
}
.top_ttl_link span:first-child{
    font-size: clamp(12px,1.75vw,16px);
}
.top_ttl_link span:last-child{
    font-size: clamp(25px,3.5vw,31px);
}
.top_ttl_link::after {
    content: url(../images/top/btn_arrow.png);
    display: inline-block;
    width: 24px;
    height: 20px;
    position: absolute;
    right: 10px;
    bottom: 15px;
    transition: all 0.4s;
    filter: invert(100%);
}

.top_ttl_link:hover{
    background-color: #fff;
    color: #000;
    scale: 1.01;
}
.top_ttl_link:hover::after{
    filter: invert(0);
    translate: 3px -3px;
}
.top_event_deco{
    position: absolute;
    top: 9%;
    right: 10%;
    max-width: 146px;
    width: calc((146 / 1190) * 100%);
}
.top_works_deco{
    position: absolute;
    top: 7%;
    right: 0%;
    max-width: 321px;
    width: calc((321 / 1190) * 100%);
}
@media screen and (max-width: 820px) {
    .top_event_deco,
    .top_works_deco{
        display: none;
    }
}
.top_news_deco{
    position: absolute;
    top: 5%;
    right: 10%;
    max-width: 242px;
    width: 20.33%;
}
.top_post_four{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    column-gap: 3.5%;
    row-gap: 30px;
}
.top_post_four a.rela {
    display: block;
}
@media screen and (max-width: 599px){
    .top_post_four{
        grid-template-columns: repeat(2,1fr);
        row-gap: 30px;
    }
}
/* top_styly */
.top_style_flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top_style_flex.reverse{
    flex-direction: row-reverse;
}
.top_style_flex > div{
    width: 48.66%;
}
.top_style_copy span{
    display: block;
    line-height: 1;
}
.top_style_copy span:first-of-type{
    font-size: clamp(50px,7.5vw,70px);
}
.top_style_copy span:last-of-type{
    font-size: clamp(20px,3.125vw,35px);
}
@media screen and (max-width: 599px){
    .top_style_flex,
    .top_style_flex.reverse{
        flex-direction: column;
        row-gap: 30px;
    }
    .top_style_flex > div{
        width: 100%;
    }
}
.top_style_loop{
	display: flex;
	/*max-width: 658px;*/
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
    z-index: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.top_style_loop img{
    max-width: none;
    display: block;
    width: 100%;
    max-width: 1651px;
    object-fit: contain;
}
.top_style_loop img:first-child{
	animation: loop 100s -50s linear infinite;
}
.top_style_loop img:last-child{
	animation: loop02 100s linear infinite;
}
.top_view_deco{
    position: absolute;
    right: 2%;
    bottom: 95%;
    max-width: 118px;
    width: 11.23%;
}
.top_life_deco{
    position: absolute;
    left: 36%;
    top: -1%;
    max-width: 118px;
    width: 11.23%;
}
@media screen and (min-width: 1200px){
    .top_style_flex > div:last-of-type img{
        width: 44.44vw;
        max-width: 600px;
    }
    .top_style_flex.reverse > div:last-of-type img{
        margin-left: -100px;
    }
}
@media screen and (max-width: 599px){
    .top_view_deco {
        width: 20%;
        bottom: 86%;
    }
    .top_life_deco{
        width: 20%;
        top: 6%;
        right: 3%;
        left: auto;
    }
}

/* top_cocept */
.top_concept_obi_bg01{
    background-color: #0d1e54;
}
.top_concept_obi_bg02{
    background-color: #92934e;
}
.top_concept_obi_bg03{
    background-color: #936a4e;
}
.bg_concept{
    background-image: repeating-linear-gradient( 0deg, #f2f2f2 0px 1px, transparent 1px 10px), repeating-linear-gradient( 90deg,#f2f2f2 0px 1px, transparent 1px 10px);
}

.top_concept_flex{
    border-top: #000 solid 1px;
}

/* concept_copy */
.top_concept_copy{
    display: flex;
    flex-wrap: wrap;
}
/*
.top_concept_copy span:nth-of-type(1){
    display: block;
    color: #b0bdc3;
    font-size: clamp(12px,1.75vw,18px);
    width: 100%;
}
.top_concept_copy span:nth-of-type(2){
    font-size: clamp(45px,6.5vw,60px);
    letter-spacing: -2px;
    line-height: 1;
}
.top_concept_copy span:nth-of-type(3){
    padding-left: 1rem;
    font-size: clamp(14px,2.125vw,20px);
    align-self: flex-end;
}
*/

.top_concept_copy span.text_new_line:nth-of-type(3){
    align-self: center;
    line-height: 1.1;
}



.top_concept_copy-01{
    display: block;
    color: #b0bdc3;
    font-size: clamp(12px,1.75vw,18px);
    width: 100%;
}
.top_concept_copy-02{
    font-size: clamp(45px,6.5vw,60px);
    letter-spacing: -2px;
    line-height: 1;
}
.top_concept_copy-03{
    padding-left: 1rem;
    font-size: clamp(14px,2.125vw,20px);
    align-self: flex-end;
}

.top_concept_copy-h{

}









/* concept 中身 */
.top_concept_flex{
    display: flex;
    flex-wrap: wrap;
}
.top_concept_flex > li{
    width: 50%;
    border-bottom: 1px solid #000;
}
.top_concept_box{
    display: flex;
    height: 100%;
}
.top_concept_flex > li:nth-of-type(odd) .top_concept_box{
    justify-content: flex-end;
}
.top_concept_flex > li:nth-of-type(even) .top_concept_box{
    justify-content: flex-start;
}

.top_concept_box_text{
    width: 86.6666%;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    max-width: 675px;
    box-sizing: border-box;
}
.top_concept_flex > li:nth-of-type(odd) .top_concept_box .top_concept_box_text{
    padding: min(7.5%, 50px) min(7.5%, 50px) min(15%, 130px) min(7.5%, 50px);
}
.top_concept_flex > li:nth-of-type(even) .top_concept_box .top_concept_box_text{
    padding:min(15%, 130px) min(7.5%, 50px) min(7.5%, 50px) min(7.5%, 50px);
}
@media screen and (min-width: 1350px){
    .top_concept_flex > li:nth-of-type(odd) .top_concept_box .top_concept_box_text{
        border-left: 1px solid #000;
    }
}
@media screen and (max-width: 1199px){
    .top_concept_flex > li:nth-of-type(odd) .top_concept_box .top_concept_box_text{
        padding: min(7.5%, 50px) min(5%, 50px) min(15%, 130px) min(5%, 50px);
    }
    .top_concept_flex > li:nth-of-type(even) .top_concept_box .top_concept_box_text{
        padding:min(15%, 130px) min(5%, 50px) min(7.5%, 50px) min(5%, 50px);
    }
}
@media screen and (max-width: 820px){
    .top_concept_flex > li{
        width: 100%;
    }
    .top_concept_flex > li:nth-of-type(even) .top_concept_box{
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    
}
/* concept_obi */
.order01{
    order: 1;
}
.order02{
    order: 2;
}
.order03{
    order: 3;
}
.order04{
    order: 4;
}
.top_concept_obi{
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 15px;
    box-sizing: border-box;
}
.top_concept_obi > p:nth-of-type(2){
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.top_concept_obi > p:nth-of-type(1){
    border-bottom: #fff solid 1px;
}
.top_concept_obi > p:nth-of-type(3){
    border-top: #fff solid 1px;
}
@media screen and (max-width: 1199px){
    .top_concept_obi{
        padding: 20px 8px;
    }
}
@media screen and (min-width: 821px){
    .top_concept_obi{
        width: 13%;
        max-width: 88px;

    }
}
@media screen and (max-width: 599px){
    .top_concept_obi{
        padding: 30px 8px;
    }
}
.top_img{
    transition: all 0.6s;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
}
.top_img.show{
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
}
.top_img02{
    transition: all 0.8s;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
}
.top_img02.show{
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
}
.top_concenpt_link_btn{
    position: absolute;
    width: 33%;
    left: 70%;
    top: 80%;
    max-width: 150px;
    display: block;
    z-index: 3;
    border-radius: 50%;
    background-color: #000;
    aspect-ratio: 1/1;
    border: #000 solid 1px;
}
.voice_btn.top_concenpt_link_btn{
    top: 55%;
    left: 65%;
}
@media screen and (max-width: 599px) {
    .voice_btn.top_concenpt_link_btn{
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
    }
}
.top_concenpt_link_btn_text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%) rotate(15deg);
    color: #fff;
    width: max-content;
    transition: all 0.4s;
}
.top_concenpt_link_btn::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50% , -50%) scale(1);

    /*波形の形状*/
    border: 1px solid #333;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /*はじめは不透明*/
    opacity:0;
    /*アニメーションの設定*/
}
.top_concenpt_link_btn:hover {
    animation: 0.2s top_concenpt_link_btn02;
    background-color: #fff;

}
.top_concenpt_link_btn:hover .top_concenpt_link_btn_text{
    color: #000;

}
.top_concenpt_link_btn:hover::before {
    /*波形の形状*/
    opacity:1;
    /*アニメーションの設定*/
    animation:1s top_concenpt_link_btn infinite;
}
@media screen and (max-width: 599px){
    .top_concenpt_link_btn{
        max-width: 90px;
        left: 60%;
    }
    .top_concenpt_link_btn::before {
        width: 90px;
        height: 90px;
    }
}
/*波形が広がるアニメーション*/
@keyframes top_concenpt_link_btn{
    0%{
      opacity: 1;
      transform: translate(-50% , -50%) scale(1);
    }
    100%{
      opacity: 0;
      transform: translate(-50% , -50%) scale(2);
  
    }
  }
  @keyframes top_concenpt_link_btn02{
    0%{
        scale:1;
    }
    50%{
        scale:1.05;
    }
    100%{
        scale:1;
  
    }
  }
    
  .top_concept_img01_deco02{
    max-width: 270px;
    width: 55%;
    right: 56%;
    top: 32%;
}
.top_concept_img01_deco01{
    max-width: 128px;
    width: 22%;
    right: 6%;
    top: 18%;
}
@media screen and (max-width: 999px){
    .top_concept_img01_deco01{
        display: none;
    }
}

/* under_concept */
.concept_mv{
    background-color: #0d1e54;
    overflow: hidden;
}
.concept_mv_swiper {
    max-width: 900px;
    margin-inline: auto;
    z-index: 5;
}
.concept_mv_num img{
    max-width: 105px;
}
.concept_mv_swiper_box li{
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto;
}
.concept_mv .swiper-button-next,
.concept_mv .swiper-button-prev{
    width: 70px;
}
.concept_mv .swiper-button-next:after,
.concept_mv .swiper-button-prev:after{
    content: "";
    width: 70px;
    aspect-ratio: 1/1;
}
.concept_mv .swiper-button-next:after{
    background-image: url(../images/concept/concept_mv_arrow_r.png);
    background-size: contain;
    background-position: center;
}
.concept_mv .swiper-button-prev:after{
    background-image: url(../images/concept/concept_mv_arrow_l.png);
    background-size: contain;
    background-position: center;

}
@media screen and (max-width: 1099px)  and (min-width: 900px){
    .concept_mv .swiper-button-next,
    .concept_mv .swiper-button-prev{
        top: auto;
        bottom: 15%;
        right: auto;
        left: 8%;
    }
    .concept_mv .swiper-button-next{
        transform: translateX(150%);
    }

}
@media screen and (max-width: 599px){
    .concept_mv .swiper-button-next,
    .concept_mv .swiper-button-prev{
        width: 45px;
        top: 40%;
    }

}
.concept_mv_deco_text{
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50% ,10%);
    z-index: 3;
}
.cocept_mv_op{
    opacity: 0.6;
}
.concept_mv_photo01{
    right: 0;
    top: 28%;
    z-index: 2;
    animation: pucaapuca 1s ease-in-out infinite alternate;
}
.concept_mv_photo02{
    right: 10%;
    top: 20%;
    z-index: 1;
    animation: pucaapuca 1.5s ease-in-out infinite alternate;
}
.concept_mv_photo03{
    left: 1%;
    bottom: 25%;
    animation: pucaapuca 0.8s ease-in-out infinite alternate;
}
.concept_mv_photo04{
    top: 10%;
    right: 35%;
    animation: pucaapuca 0.9s ease-in-out infinite alternate;
}
.concept_mv_photo05{
    left: 28%;
    top: 5%;
    animation: pucaapuca 1.3s ease-in-out infinite alternate;
}
.concept_mv_photo06{
    left: 2%;
    top: 21%;
    animation: pucaapuca 1.1s ease-in-out infinite alternate;
}
.concept_mv_photo07{
    left: 19%;
    bottom: 7%;
    z-index: 1;
    animation: pucaapuca 1s ease-in-out infinite alternate;
}
.concept_mv_photo08{
    right: 29%;
    top: 30%;
    animation: pucaapuca 1.4s ease-in-out infinite alternate;
}
.concept_mv_photo09{
    right: 0%;
    bottom: 12%;
    animation: pucaapuca 1.2s ease-in-out infinite alternate;
}
/*
.concept_mv_photo09,
.concept_mv_photo08,
.concept_mv_photo07,
.concept_mv_photo06,
.concept_mv_photo05,
.concept_mv_photo04,
.concept_mv_photo03,
.concept_mv_photo02,
.concept_mv_photo01{
	animation: pucaapuca 1s ease-in-out infinite alternate;
}

.concept_mv_photo09 img,
.concept_mv_photo08 img,
.concept_mv_photo07 img,
.concept_mv_photo06 img,
.concept_mv_photo05 img,
.concept_mv_photo04 img,
.concept_mv_photo03 img,
.concept_mv_photo02 img,
.concept_mv_photo01 img{
	animation: vertical 1s ease-in-out infinite alternate;
}
*/
.concept_mv_photo01 img{
	animation: vertical 1s ease-in-out infinite alternate;
}
.concept_mv_photo02 img{
	animation: vertical 1.5s ease-in-out infinite alternate;
}
.concept_mv_photo03 img{
	animation: vertical 0.8s ease-in-out infinite alternate;
}
.concept_mv_photo04 img{
	animation: vertical 0.9s ease-in-out infinite alternate;
}
.concept_mv_photo05 img{
	animation: vertical 1.3s ease-in-out infinite alternate;
}
.concept_mv_photo06 img{
	animation: vertical 1.1s ease-in-out infinite alternate;
}
.concept_mv_photo07 img{
	animation: vertical 1s ease-in-out  infinite alternate;
}
.concept_mv_photo08 img{
	animation: vertical 1.4s ease-in-out infinite alternate;
}
.concept_mv_photo09 img{
	animation: vertical 1.2s ease-in-out infinite alternate;
}

.top_deco07{
	position: absolute;
	right: 5%;
	top: 40%;
	animation: pucaapuca 1s ease-in-out infinite alternate;
	width: 17.11%;
}
.top_deco07 img{
	animation: vertical 1s ease-in-out infinite alternate;
}

@keyframes pucaapuca{
	0% { 
		-webkit-transform:translateX( -2px);
		transform:translateX( -2px);
	 }
     
  100% {
	-webkit-transform:translateX(  0px);
	transform:translateX(  0px);
}
}
@keyframes vertical {
    0% { 
        transform:translateY(-3px);
        /*opacity: 0.6;*/
    }
  100% {
    transform:translateY(  0px);
    /*opacity: 0.85;*/
    }
}



@media screen and (max-width: 899px){
    .concept_mv_swiper_box li{
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        row-gap: 30px;
    }
    .concept_mv_swiper_box li > div:nth-of-type(2){
        width: 50%;
    }
}
@media screen and (max-width: 599px){
    .concept_mv_swiper_box li > div:nth-of-type(2){
        width: 55%;
    }
}

/* concept_intro */
.concept_intro_50{
    font-size: clamp(25px,4vw,50px);
    font-feature-settings: "palt";
}
.lh_17{
    line-height: 1.7;
}
.concept_logo img{
    max-width: 368px;
    width: 33%;
}
.concept_intro_copy img{
    max-width: 700px;
    width: 75%;
}
.concept_intro_text{
    text-align: center;
    font-feature-settings: "palt";
    letter-spacing: 1px;
}
.concept_intro_text > span:nth-of-type(1){
    font-size: clamp(42px,7vw,95px);
    display: block;
    padding-bottom: 2rem;
    overflow: hidden;
    font-weight: 900;
}
.concept_intro_text .concept_intro_anime01 span{
    opacity: 0;
    transform: rotate(-30deg) translateY(205%);
    display: inline-block;
}
.concept_intro_text .concept_intro_anime01.show span{
    animation: top_mv_text01 forwards 0.5s;

}
.concept_intro_text > span:nth-of-type(2){
    color: #b0bdc3;
    font-size: clamp(20px,3vw,40px);
    display: block;
    overflow: hidden;
  -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
}
.concept_intro_text > span.show:nth-of-type(2){
    animation: top_mv_text02 forwards 2s 0.7s;
}
.concept_intro_deco01{
    top: 8%;
    left: 18%;
    max-width: 84px;
    width: 6.22%;
}
.concept_intro_deco02{
    top: 28%;
    left: 7%;
    max-width: 109px;
    width: 8.07%;
}
.concept_intro_deco03{
    top: 46%;
    left: 10%;
    max-width: 177px;
    width: 13.11%;
}
.concept_intro_deco04{
    top: 1%;
    right: 12%;
    max-width: 137px;
    width: 10.14%;
}
.concept_intro_deco05{
    right: 5%;
    top: 24%;
    max-width: 75px;
    width: 5.5%;
}
.concept_intro_deco06{
    top: 42%;
    right: 9%;
    max-width: 86px;
    width: 6.3%;
}
.concept_intro_deco07{
    left: 5%;
    bottom: 6%;
    max-width: 224px;
    width: 16.59%;
}
.concept_intro_deco08{
    bottom: 9%;
    right: 6%;
    max-width: 216px;
    width: 16%;
}
.concept_intro_loop{
	display: flex;
	/*max-width: 658px;*/
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
    z-index: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.concept_intro_loop img{
    max-width: none;
    display: block;
    width: 100%;
    max-width: 2415px;
    object-fit: contain;
}
.concept_intro_loop img:first-child{
	animation: loop 100s -50s linear infinite;
}
.concept_intro_loop img:last-child{
	animation: loop02 100s linear infinite;
}

@media screen and (max-width: 599px){
    .concept_intro_deco07{
        left: 1%;
        bottom: 0%;
    }
    .concept_intro_deco01{
        top: 1%;
        left: 10%;
    }
    .concept_intro_deco02{
        top: 16%;
        left: 3%;
    }
    .concept_intro_deco03{
        top: 30%;
        left: 1%;
    }
    .concept_intro_deco04{
        top: -2%;
        right: 12%;
    }
    .concept_intro_deco05{
        right: 1%;
        top: 12%;
    }
    .concept_intro_deco06{
        top: 30%;
        right: 1%;
    }
    .concept_intro_deco08{
        right: 1%;
        bottom: 0%;
    }
    
}

 
/* demo */
.concept_gallery_frame{
	position: relative;
    max-height: 380px;
    aspect-ratio: 1350/373;
}


.concept_gallery01,
.concept_gallery02,
.concept_gallery03,
.concept_gallery04,
.concept_gallery05,
.concept_gallery06,
.concept_gallery07{
	position: absolute;
	opacity: 0;
	transition: transform 2.2s , opacity 2.2s cubic-bezier(0.23,1,0.32,1); 
}
.concept_gallery_frame img:hover{
	animation: opp 1.2s ease-in-out forwards;
	z-index: 10;
    opacity: 1;
}
@keyframes opp{
	0%{ opacity: 0.4; }
	100%{ opacity: 1; }
}
.concept_gallery01{
	top: 10%;
	left: 0px;
	width: 13.55%;
}
.concept_gallery02{
	top: 0%;
    left: 12%;
	width: 18.8%;
	z-index: 2;
}
.concept_gallery03{
	top: 16%;
	left: 29%;
	width: 18.8%;
	z-index: 3;
}
.concept_gallery04{
	top: 8%;
    left: 46%;
	width: 25.14%;
	z-index: 4;
}
.concept_gallery05{
	top: 0%;
	right: 0px;
	width: 18.44%;
}
.concept_gallery06{
	top: 44%;
    left: 65%;
    z-index: 5;
	width: 18.8%;
}
:root{
	--gallery_val: -60px;
}
.concept_pt01{
	/*左上から*/
	transform: translate(-60px,-60px);
}
.concept_pt02{
	/*左下から*/
	transform: translate(-60px,60px);
}
.concept_pt03{
	/*右下から*/
	transform: translate(60px,60px);
}
.start .concept_pt01{
	opacity: 0.6;
	transform: translate(0px);
}
.start .concept_pt02{
	opacity: 0.6;
	transform: translate(0px);
}
.start .concept_pt03{
	opacity: 0.6;
	transform: translate(0px);
}

/* concept_content */
.concept_text_50{
    font-size: clamp(30px,4.3vw,50px);

}
.concept_flex01,.concept_flex02{
    display: flex;
    justify-content: space-between;
}
.concept_flex01.reverse{
    flex-direction: row-reverse;
}
.concept_flex01 > div:nth-of-type(1){
    width: 52%;
}
.concept_flex01 > div:nth-of-type(2){
    width: 45%;
}

.concept_flex02 > div{
    width: 48.5%;
    display: flex;
    justify-content: space-between;
}
.concept_flex02 > div:nth-of-type(2){
    padding-top: 15%;
}
.concept_flex02_ttl{
    width: 28.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.concept_flex02_img{
    width: 68%;
}
@media screen and (max-width: 820px){
    .concept01_deco02,.concept02_deco02,.concept03_deco02{
        display: none;
    }
    .concept_flex02 > div:nth-of-type(2){
        padding-top: 5%;
        flex-direction: row-reverse;
    }
    .concept_flex02 > div{
        width: 100%;
    }
    .concept_flex01,.concept_flex02,.concept_flex01.reverse{
        flex-direction: column;
        row-gap: 30px;
    }
    .concept_flex01 > div:nth-of-type(1){
        width: 100%;
    }
    .concept_flex01 > div:nth-of-type(2){
        width: 100%;
        text-align: center;
    }
    .concept_flex02_img{
        width: 71%;
    }
    
}
.concept_flex02_ttl_num{
    display: flex;
    align-items: center;
    line-height: 1;
    width: max-content;
}
.concept_flex02_ttl_num span:nth-of-type(1){
    line-height: 0.5;
}
.concept_flex02_ttl_num span:nth-of-type(2){
    font-size: clamp(60px,10vw,100px);
    letter-spacing: -0.5rem;
}
.concept_flex02_copy{
    line-height: 1.5;
}
.concept_flex02_copy > span{
    font-weight: 900;
}
.concept_flex02_copy > span.concept_flex02_copy02{
    font-size: clamp(30px,4vw,50px);
    line-height: 1;
    display: inline-block;
    transform: translateY(-0.5rem);
}
.concept_flex02_copy > span.concept_flex02_copy01{
    font-size: clamp(16px,2vw,26px);
}

.concept_flex01_img_end{
    align-self: flex-end;
}

.plan_warranty05_copy01,
.concept03_point01_deco,
.concept03_point02_deco,
.concept02_point01_deco,
.concept02_point02_deco,
.concept01_point01_deco,
.concept01_point02_deco{
    position: absolute;
    left: 50%;
    transform: translate(-50%,50%);
    bottom: 0;
}
.concept01_point01_deco{
    width: clamp(100px,18vw,171px);
}
.concept01_point02_deco{
    width: clamp(105px,18vw,175px);
}
.concept02_point01_deco{
    width: clamp(120px,18vw,206px);
}
.concept02_point02_deco{
    width: clamp(85px,15vw,141px);
}
.concept03_point01_deco{
    width: clamp(55px,10vw,92px);
}
.concept03_point02_deco{
    width: clamp(70px,12vw,126px);
}
.concept_btn{
    display: inline-block;
    max-width: 340px;
    box-sizing: border-box;
    padding: 4rem 2rem;
    width: 95%;
    margin-top: auto;
    text-align: left;
    background-color: #000;
    position: relative;
    color: #fff;
    border-radius: 5px;
    border: #000 solid 1px;
}
.concept_btn.renovation_pickup_btn{
    background-color: #faf339;
    color: #000;
    border: #faf339 solid 1px;
}
.concept_btn::after{
    content: url(../images/top/btn_arrow.png);
    display: inline-block;
    width: 24px;
    height: 20px;
    position: absolute;
    right: 10px;
    bottom: 15px;
    transition: all 0.4s;
    filter: invert(100%);

}
.concept_btn.renovation_pickup_btn::after{
    filter: invert(0%);
}
.concept_btn:hover{
    background-color: #fff;
    color: #000;
    scale: 1.01;
}
.concept_btn.renovation_pickup_btn:hover{
    border: #000 solid 1px;
}

.concept_btn:hover::after{
    filter: invert(0);
    translate: 3px -3px;
}


.concept01_ttl_deco01{
    max-width: 121px;
    position: absolute;
    bottom: 105%;
    left: 0;
    transform: translateX(-20%);
}


.concept01_text_bg ,.concept02_text_bg,.concept03_text_bg{
    position: absolute;
    top: 5%;
}
.concept01_text_bg{
    left: 0;
    max-width: 270px;
    width: 25%;
}
.concept02_text_bg{
    right: -3.5%;
    max-width: 213px;
    width: 20%;
}
.concept03_text_bg{
    left: -3.5%;
    max-width: 212px;
    width: 20%;
}
.concept01_deco01{
    position: absolute;
    max-width: 137px;
    width: 27%;
    top: 0;
    right: 5%;
    transform: translateY(-60%);
}
.concept01_deco02{
    max-width: 337px;
    width: 90%;
    position: absolute;
    right: 0;
    bottom: 100%;
}

.concept02_deco01{
    position: absolute;
    max-width: 137px;
    bottom: 100%;
    right: 15%;
    width: 27%;
}

.concept02_deco02{
    position: absolute;
    max-width: 304px;
    width: 60%;
    bottom: 77%;
    left: 1%;
}
.concept03_deco01{
    position: absolute;
    max-width: 137px;
    width: 27%;
    bottom: 100%;
    right: 0%;
    transform: translateX(80%);
}
.concept03_deco02{
    max-width: 191px;
    width: 14.14%;
    position: absolute;
    left: 5%;
    bottom: 0%;
}
.under_concept_obi01,
.under_concept_obi03{
    right: 0;
}
.under_concept_obi02{
    left: 0;
}
.under_concept_obi{
    display: flex;
    flex-direction: column;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 15px;
    box-sizing: border-box;
    top: 0;
    height: 100%;
    width: 85px;
    align-items: center;
}
.under_concept_obi > p:nth-of-type(2){
    border-bottom: #fff solid 1px;
    border-top: #fff solid 1px;
    padding-top: 3rem;
    padding-bottom: 3rem;
}


.plan_warranty05_img09{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20.57%;
    max-width: 216px;

}
@media screen and (max-width: 1199px){
    .under_concept_obi{
        padding: 20px 8px;
    }
    .concept_inner_frame.inner_frame{
        max-width: 980px;
        margin-left: 0;
        padding-left: 20px;
    }
    .concept_inner_frame_reverse.inner_frame{
        max-width: 980px;
        margin-right: 0;
        padding-right: 20px;
    }
}
@media screen and (max-width: 1049px){
    .concept_inner_frame.inner_frame,
    .concept_inner_frame_reverse.inner_frame{
        width: calc(100% - 85px);
    }
    .plan_warranty05_img09{
        display: none;
    }
}
@media screen and (max-width: 820px){
    .concept03_deco01{
        transform: none;
        bottom: 95%;
    }

    .concept_inner_frame.inner_frame,
    .concept_inner_frame_reverse.inner_frame{
        padding-left: 3%;
        padding-right: 3%;
    }
    .concept_btn.sp_concept_btn_l{
        width: 81.5vw;
        margin-left: -37%;
    }
    .concept_btn.sp_concept_btn_r{
        margin-left: 4%;
        width: 81.5vw;
    }

}
@media screen and (max-width: 599px){
    .concept01_ttl_deco01,
    .concept01_ttl_deco02,
    .concept01_ttl_deco03{
        width: 25%;
        left: 5%;
    }
    .under_concept_obi{
        padding: 30px 8px;
        width: 40px;
    }
    .concept_inner_frame.inner_frame,
    .concept_inner_frame_reverse.inner_frame{
        padding-left: 2%;
        padding-right: 2%;
        width: calc(100% - 40px);
    }
    .lh_28{
        line-height: 2.4!important;
    }
}


.concept_under_content{
    display: flex;
    justify-content: center;
}
.concept_under_content li{
    width: 50%;
    max-width: calc(1350px / 2);
    box-sizing: border-box;
}
.concept_under_content_box{
    padding-left: 3.5%;
    padding-right: 3.5%;
}
.concept_under_content li:nth-of-type(1){
    border-left: #000 solid 1px;
    border-right: #000 solid 1px;
}
.concept_under_content li:nth-of-type(2){
    border-right: #000 solid 1px;
}
.concept_under_ttl{
    text-align: right;
    padding-left: 3.5%;
    padding-right: 3.5%;
    box-sizing: border-box;
}
.concept_under_link{
    display: inline-block;
}
.concept_under_link span img{
    transition: .6s;
}
.concept_under_link span{
    display: inline-block;
    overflow: hidden;
    border: #000 solid 1px;
}
.concept_under_link:hover span img{
    scale: 1.03;
} 
.concept_under_num{
    position: absolute;
    left: -10%;
}
.concept_under_num01{
    max-width: 141px;
    width: 35%;
    top: -20%;
}
.concept_under_num02{
    max-width: 172px;
    width: 35%;
    top: -20%;
}
.concept_under_num03{
    max-width: 152px;
    width: 35%;
    top: -10%;
}
.concept_under_num04{
    max-width: 168px;
    width: 35%;
    top: -10%;
}
@media screen and (max-width: 820px){
    .concept_under_num {
        left: 0;
    }
}
@media screen and (max-width: 599px){
    .concept_under_content{
        flex-direction: column;
    }
    .concept_under_content li{
        width: 100%;
    }
    .concept_under_content li:nth-of-type(1),
    .concept_under_content li:nth-of-type(2){
        border: none;
    }
    
}

/* plan */
.max_800{
    max-width: 800px;
    margin-inline: auto;
}
.bg01{
    background-color: #fff;
}
.plan_ttl_color01{
    color: #0a2680;
}
.plan_ttl_color02{
    color: #bdbf9a;
}
.plan_ttl_color03{
    color: #936a4e;
}
.plan_tab_area {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    column-gap: 2.5%;
    width: 95%;
    margin-inline: auto;
    cursor: pointer;/* カーソルポインターに */
}
.plan_tab {
    padding: 12% 10px;
    text-align: center;
    color: #fff;
    background-color: #afafa8;
    transition: all 0.4s;
    position: relative;
    line-height: 1.3;
}
.plan_tab::after{
    content: "";
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    border: 1px solid #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
}
.plan_tab.active {
    background-color: #000;
}
.plan_panel {
    display: none;
}
.plan_panel.active {
    display: block;
}
@media screen and (max-width: 599px){
    .plan_tab_area{
        grid-template-columns: repeat(2,1fr);
        row-gap: 30px;
        width: 100%;
    }
}
.plan_copy{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% ,-50%);
    width: max-content;
}
.plan_copy span:nth-of-type(2){
    font-size: clamp(48px,7.5vw,80px);
}
.plan_item_deco{
    position: absolute;
    top: 8%;
    right: 10%;
    max-width: 141px;
    width: 13.4%;
}

.plan_num_copy{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
}
.plan_num_copy p{
    padding-left: 1rem;
    padding-right: 1rem;
}
.plan_num_copy p:first-of-type{
    border-right: 1px solid #fff;
}
.plan_content{
    padding: 3% 5.5%;
    box-sizing: border-box;
}
.plan_content_large{
    padding: 3%;
    box-sizing: border-box;
}
.plan_ttl_box01{
    display: grid;
    grid-template-columns: 1fr 55%;
    align-items: center;
}
.plan_flex01{
    display: flex;
    justify-content: space-between;
    column-gap: 6%;
}
.plan_flex01.reverse{
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.plan_flex01 > div:nth-of-type(1){
    width: 34.55%;
}
.plan_flex01 > div:nth-of-type(2){
    width: 53.6%;
}

.plan_flex02{
    display: flex;
    justify-content: space-between;
}
.plan_flex02.reverse{
    flex-direction: row-reverse;
}
.plan_flex02.a_i_center{
    align-items: center;
}
.plan_flex02 > div{
    width: 48.5%;
}
.plan_copy_box01{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
}
.plan_copy_box01 p{
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: 3;
}
.plan_copy_box01 p:first-of-type{
    border-right: 1px solid #000;
    padding-left: 3rem;
}
.plan_grid03{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 3%;
    row-gap: 50px;
}
.plan_text_line{
    position: relative;
    z-index: 2;
}
.plan_text_line::after{
    width: 100%;
    height: 40%;
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background-color: #f8f483;
    z-index: -1;
}

@media screen and (max-width: 820px){
    .plan_ttl_box01 {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }
}
@media screen and (max-width: 599px){
    .plan_flex01,
    .plan_flex01.reverse,
    .plan_flex02,
    .plan_flex02.reverse{
        flex-direction: column;
        row-gap: 30px;
        justify-content: flex-start;
    }
    .plan_flex01.sp_reverse{
        flex-direction: column-reverse;
    }
    .sp_no_colum.plan_flex02{
        flex-direction: row;
    }
    .plan_flex01 > div:nth-of-type(1),
    .plan_flex01 > div:nth-of-type(2),
    .plan_flex02 > div{
        width: 100%;
    }
    .plan_grid03{
        grid-template-columns: repeat(1,1fr);
        text-align: center;
        row-gap: 30px;
    }
    .plan_grid03 p:last-of-type{
        text-align: left;
    }
    .plan_num_copy,
    .plan_copy_box01{
        grid-template-columns: 1fr;
    }
    .plan_num_copy p:first-of-type,
    .plan_copy_box01 p:first-of-type{
        border-right: none;
    }
    .plan_copy_box01 p:first-of-type{
        padding-left: 1rem;
    }
    .plan_copy_box01 p{
        line-height: 2;
    }
}



.plan_bg{
    background-image: linear-gradient(#e5e5e5 1px, transparent 0),
    linear-gradient(90deg, #e5e5e5 1px, transparent 0);
    background-size: 200px 200px;
}
.under_plan_obi01{
    left: 0;
}
.under_plan_obi{
    display: flex;
    flex-direction: column;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 15px;
    box-sizing: border-box;
    top: 0;
    height: 100%;
    width: 50px;
    align-items: center;
}
.under_plan_obi > p:nth-of-type(2){
    padding-top: 1rem;
    padding-bottom: 3rem;
    position: relative;
}
.under_plan_obi > p:nth-of-type(2)::after{
    content: "";
    width: 50px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    left: -10px;
    bottom: 0;
}
@media screen and (max-width: 1199px){
    .under_plan_obi{
        padding: 20px 8px;
    }
}
.plan_other_ttl{
    display: grid;
    grid-template-columns: 46.6% 1fr;
    align-items: center;
}
.plan_other_ttl p:nth-of-type(1){
    border-right: 1px solid #000;
}
.plan_other_ttl p:nth-of-type(2){
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: 0 auto;
}


@media screen and (max-width: 1199px){
    .plan_inner_frame.inner_frame{
        max-width: 980px;
        margin-left: 0;
        padding-left: 20px;
    }
    .plan_inner_frame_reverse.inner_frame{
        max-width: 980px;
        margin-right: 0;
        padding-right: 20px;
    }
}
@media screen and (max-width: 1049px){
    .plan_inner_frame.inner_frame,
    .plan_inner_frame_reverse.inner_frame{
        width: calc(100% - 50px);
    }
}
@media screen and (max-width: 999px){
    .plan_other_ttl{
        grid-template-columns: 1fr;
        row-gap: 30px;
    }
    .plan_other_ttl p:nth-of-type(1){
        border-right: none;
    }
    .plan_other_ttl p:nth-of-type(2){
        display: block;
        padding-bottom: 30px;
        margin: none;
        width: 100%;
    }
   
}
@media screen and (max-width: 820px){
    .plan_inner_frame.inner_frame,
    .plan_inner_frame_reverse.inner_frame{
        padding-left: 3%;
        padding-right: 3%;
    }
}
@media screen and (max-width: 599px){
    .under_plan_obi > p:nth-of-type(2)::after{
        width: 40px;
        left: -7.5px;
    }
    .under_plan_obi{
        width: 40px;
    }
    .plan_inner_frame.inner_frame,
    .plan_inner_frame_reverse.inner_frame{
        padding-left: 2%;
        padding-right: 2%;
        width: calc(100% - 40px);
    }
}
.plan_bg_text01{
    left: 0;
    top: 0;
    z-index: 0;
}
.plan_bg_text02{
    right: 0;
    top: 0;
    z-index: 0;
}
.plan_bg_text03{
    right: 0;
    top: -1%;
    z-index: 0;
}
.plan_item_exterior_deco{
    max-width: 175px;
    right: -6%;
    top: 18%;
}
.plan_item_wood_deco{
    max-width: 185px;
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%);
}
.plan_item_plastered_deco{
    max-width: 223px;
    left: 0;
    bottom: 100%;
}
@media screen and (max-width: 1099px){
    .plan_bg_text01,.plan_bg_text02,.plan_bg_text03{
        display: none;
    }
}

@media screen and (max-width: 999px){
    .plan_item_exterior_deco{
        display: none;
    }
}
@media screen and (max-width: 599px){
    .plan_item_wood_deco,
    .plan_item_plastered_deco{
        display: none;
    }
}
.plan_spec_ttl{
    width: max-content;
    margin: 0 auto;
}
.plan_spec_ttl_deco01{
    left: 0;
    bottom: 90%;
    transform: translateX(-100%);
}
.plan_spec_ttl_deco02{
    left: 50%;
    bottom: 0;
    transform: translate(-100%,50%);
}
.plan_spec_arrow{
    display: flex;
    justify-content: center;
    column-gap: 20px;
    align-items: center;
}
.plan_spec_plan_ttl{
    left: 0;
    bottom: 100%;
}
.plan_spec_plan01_deco01{
    right: -1%;
    bottom: 55%;
    width: 29.4%;
    max-width: 309px;
    min-width: 155px;
}
.plan_spec_plan02_deco01{
    right: 0;
    bottom: 0;
    width: 23.33%;
    max-width: 245px;
    min-width: 105px;
}
.plan_spec_plan02_deco02{
    right: 3%;
    bottom: -20%;
    max-width: 288px;
    width: 60.25%;
    min-width: 120px;
}
.plan_spec_plan03_deco01{
    right: 2%;
    bottom: -45%;
    width: 29.4%;
    max-width: 309px;
    min-width: 140px;
}
.plan_spec_plan03_deco02{
    right: 0;
    bottom: -28%;
    max-width: 332px;
    min-width: 150px;
    width: 69.4%;
}
@media screen and (max-width: 999px){
    .plan_spec_plan03_deco01 {
        bottom: 30%;
        right: -5%;
    }
    .plan_spec_plan02_deco01,.plan_spec_plan02_deco02 {
        display: none;
    }
}
@media screen and (max-width: 820px){
    .plan_spec_plan03_deco02{
        display: none;
    }
}
@media screen and (max-width: 599px){
    .plan_spec_arrow{
        flex-direction: column;
        row-gap: 10px;
        margin-top: 50px;
    }
    .plan_spec_plan01_deco01{
        bottom: 75%;
    }
    .plan_spec_plan03_deco01{
        bottom: 60%;
    }
    .plan_spec_ttl_deco01{
        width: 50%;
        bottom: 80%;
    }
    .plan_spec_ttl_deco02{
        left: 50%;
    bottom: 50%;
    transform: translate(-50%,50%);
    }
}
.plan_ttl_bg_box{
    overflow: hidden;
    border-radius: 20px;
}
@media screen and (max-width: 599px){
    .plan_ttl_bg_box .plan_ttl_bg{
        width: 200%;
        margin-left: -50%;
    }
}

.plan_text_color01{
    color: #666666;
}
.plan_warranty01_deco01{
    max-width: 245px;
    width: 23.333%;
    bottom: 0;
    right: 13%;
}
.plan_warranty01_deco02{
    max-width: 176px;
    width: 16.76%;
    bottom: 0;
    right: 18%;
}
.plan_warranty02_deco01{
    max-width: 170px;
    width: 16.19%;
    right: 1.5%;
    bottom: -15%;
}
.plan_warranty03_deco01{
    max-width: 248px;
    width: 23.61%;
    bottom: -12%;
    right: 8%;
}
.plan_warranty04_deco01{
    left: 1%;
    bottom: -5%;
    max-width: 256px;
    width: 24.38%;
}
.plan_warranty04_deco02{
    right: 5%;
    bottom: -3%;
    max-width: 82px;
    width: 7.809%;
}
@media screen and (max-width: 820px){
    .plan_warranty01_deco02{
        display: none;
    }
}
@media screen and (max-width: 599px){
    .plan_warranty01_deco01{
        right: -2%;
    }
    .plan_warranty02_deco01,
    .plan_warranty03_deco01,
    .plan_warranty04_deco01,
    .plan_warranty04_deco02{
        display: none;
    }
}

.plan_warranty05_copy02,
.plan_warranty05_copy01{
    position: absolute;
    left: 50%;
    transform: translate(-40%,50%);
    bottom: 0;
}
.plan_warranty05_copy01,
.plan_warranty05_copy02{
    width: clamp(110px,18vw,212px);
}
.plan_grid04{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    column-gap: 2%;
    row-gap: 30px;
}
@media screen and (max-width: 599px){
    .plan_grid04{
        grid-template-columns: repeat(2,1fr);
    }
    .plan_sp_p_l.concept_flex02_ttl_num{
        padding-left: 2rem;
    }
}
.plan_under_text{
    display: flex;
    justify-content: center;
}



/* FAQ */
.faq_link{
    display: flex;
    column-gap: 2%;
    justify-content: center;
}
.faq_link a{
    display: inline-block;
    width: 240px;
    position: relative;
    color: #fff;
    font-weight: bold;
    font-size: clamp(14px,2.125vw,20px);
    padding-top: 1.7em;
    padding-bottom: 2.3em;
    text-align: center;
    background-color: #000;
}
.faq_link a::after{
    content: "";
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    border: 1px solid #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
}
.faq_link a::before{
    content: "";
    display: inline-block;
    width: 32px;
    aspect-ratio: 16/9;
    clip-path: polygon(5% 0, 50% 77%, 94% 0, 100% 10%, 50% 100%, 0 10%);
    background-color: #fff;
    transform: translateX(-50%);
    position: absolute;
    bottom: 15%;
    left: 50%;
}
.faq_accordion{
    background-color: #fff;
    margin-bottom: 40px;
    padding: 0rem 4rem;
}
.faq_accordion dt,
.faq_accordion dd{
	font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(14px,1.875vw,16px);
    position: relative;
    line-height: 2;
    padding-left: 4rem;
}
.faq_accordion dt{
    cursor: pointer;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-right: 2rem;
    position: relative;
    display: flex;
    justify-content: space-between;
}
.faq_accordion dt span{
    width: calc(100% - 35px);
}

.faq_accordion dt::before,
.faq_accordion dd::before{
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size:25px;
    position: absolute;
    line-height: 1.4;
    left: 0;
    top: 0;
    padding-top: 4rem;
}
.faq_accordion dt::before{
    content: "Q";
    color: #4299e2;
}
.faq_accordion dd::before{
    content: "A";
    color: #e24255;
}
.faq_accordion dd{
    display: none;
    border-top: 1px solid #000;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.faq_icon{
    width: 25px;
    height: 25px;
    position: relative;
}
.faq_icon::after,
.faq_icon::before{
    content: "";
    position: absolute;
    background-color: #4299e2;
    transition: all 0.3s;
}
.faq_icon::after{
    width: 3px;
    height: 25px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.faq_icon::before{
    width: 25px;
    height: 3px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.open .faq_icon::after{
    transform: translateX(-50%) rotate(90deg);
}
.open .faq_icon::before{
    opacity: 0;
}
@media screen and (max-width: 599px){
    .faq_accordion{
        padding: 0 2rem;
        margin-bottom: 20px;
    }
    .faq_accordion dt, .faq_accordion dd{
        padding-left: 3rem;
        line-height: 1.8;
    }
    .faq_accordion dt{
        padding-bottom: 2rem;
        padding-right: 0;
        padding-top: 2rem;
    }
    .faq_accordion dt span{
        width: calc(100% - 30px);
    }
    .faq_accordion dd{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .faq_link a::before{
        width: 20px;
    }
    .faq_accordion dt::before, .faq_accordion dd::before{
        line-height: 1.2;
        padding-top: 2rem;
    }
}

/* voice */
.voice_intro_ttl > img{
    max-width: 520px;
}
.voice_intro_ttl_deco{
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(40%,45%);
    width: 33%;
}
.voice_pickup_ttl{
    text-align: left;
}
.voice_pickup_ttl.reverse{
    text-align: right;
}
.voice_pickup_ttl img{
    max-width: 225px;
}
.voice_copy_num img{
    max-width: 106px;
}
.voice_copy > img{
    max-width: 360px;
}
.voice_inner.inner_frame{
    max-width: 860px;
}
@media screen and (max-width: 1199px){
    .concept_inner_frame_reverse.inner_frame.voice_inner {
        margin-right: auto;
        padding-right: 20px;
        }
    }
@media screen and (max-width: 999px){
     .concept_inner_frame_reverse.inner_frame.voice_inner {
        margin-right: 0;
    }
}
.voice_copy_box{
    display: flex;
    justify-content: space-between;
}
.voice_copy_box.reverse{
    flex-direction: row-reverse;
}
.voice_copy_box.reverse{
    text-align: right;
}
.voice_text_frame{
    display: flex;  
    justify-content: space-between;
    border-bottom: #000 4px dotted;
}
.voice_text_frame.reverse{
    flex-direction: row-reverse;
}
.voice_text_frame > div{
    width: 48%;
}
.comment_tag01,
.comment_tag02,
.comment_tag03{
    position: absolute;
    bottom: 0;
}
.comment_tag01,
.comment_tag03{
    left: 0.5%;
}
.comment_tag02{
    left: 48%;
}
@media screen and (max-width: 599px) {
    .comment_tag01,
    .comment_tag02,
    .comment_tag03{
        width: 35%;
        left: 0.5%;
    }

    .voice_pickup_ttl img {
        width: 45%;
    }
    .voice_copy_box ,
    .voice_copy_box.reverse{
        flex-direction: column-reverse;
        row-gap: 20px;
    }
    .voice_copy > img{
        width: 75%;
    }
    .voice_copy_num img{
        width: 20%;
    }
    .voice_text_frame,
    .voice_text_frame.reverse{
        flex-direction: column;
        row-gap: 50px;
    }
    .voice_text_frame > div{
        width: 100%;
    }
    .sp_lh_24{
        line-height: 2.4;
    }
}

/* staff */
.staff_detail{
    max-width: 1140px;
    margin-inline: auto;
    background-image: url(../images/staff/staff_bg.jpg);
    background-size: contain;
    /* box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.2); */
    box-sizing: border-box;
}
.staff_detail_box {
    padding: min(6%,70px);
    display: none;
}
.staff_detail_box.active{
    display: block;
}
@media screen and (max-width: 599px) {
    .staff_detail_box {
        padding: 30px min(6%,70px);
        display: none;
    }
}
.staff_detail_info_box{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.staff_detail_info_box > div{
    width: 48.5%;
}
@media screen and (max-width: 599px) {
    .staff_detail_info_box{
        flex-direction: column;
        row-gap: 50px;
    }
    .staff_detail_info_box > div{
        width: 100%;
    }
    }
.staff_message_box{
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 7px solid #000;
    background-color: #fff;
    padding: 4.3% 3.5%;
}
@media screen and (max-width: 599px) {
    .staff_message_box{
        padding: 40px 3.5%;
    }
}
.staff_message{
    max-width: 265px;
    width: 23.24%;
    position: absolute;
    left: 3.5%;
    top: 0;
    transform: translateY(-55%);
}
.staff_detail_under_message_box .staff_message{
    width: 58%;
}

@media screen and (max-width: 599px) {
    .staff_message,
    .staff_detail_under_message_box .staff_message{
        width: 45.5%;
    }
}
.staff_favorite{
    display: flex;
    column-gap: 3%;
}
.staff_favorite > div:first-of-type{
    width: 26.5%;
}
.staff_favorite > div:last-of-type{
    width: 65%;
}
@media screen and (max-width: 599px) {
    .staff_favorite{
        flex-direction: column;
    }
    .staff_favorite > div:first-of-type{
        width: 45%;
    }
    .staff_favorite > div:last-of-type{
        width: 100%;
    }
}
.staff_favorite_contents{
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
@media screen and (max-width: 599px) {
    .staff_favorite_contents{
        grid-template-columns: repeat(1,1fr);
        row-gap: 30px;
    }
    .staff_favorite_contents p{
        text-align: center;
    }
}
.staff_detail_history_box{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.staff_detail_history_img{
    width: 56.5%;
}
.staff_detail_history_text{
    padding-top: 30px;
    width: 41.5%;
}
@media screen and (max-width: 599px) {
    .staff_detail_history_box{
        flex-direction: column-reverse;
        row-gap: 30px;
    }
    .staff_detail_history_img,
    .staff_detail_history_text{
        width: 100%;
        padding-top: 0;
    }
}
.staff_slider_bg_img{
    max-width: 1257px;
    margin-inline: auto;
}
.staff_mv_swiper{
    max-width: 1350px;
    margin-inline: auto;
    margin-top: max(-30%,-350px);
}
.staff_mv_swiper .swiper-slide{
    max-width: 450px;
    width: 80%;
}
@media screen and (max-width: 599px) {
    .staff_mv_swiper .swiper-slide{
        width: 45%;
    }
}
.staff_mv_swiper .swiper-slide.short{
    max-width: 686px;
    width: 90%;
    margin-inline: auto;
}
.staff_mv_swiper .swiper-button-next,
.staff_mv_swiper .swiper-button-prev{
    width: 70px;
    height: auto;
    aspect-ratio: 1/1;
}
@media screen and (max-width: 599px) {
    .staff_mv_swiper .swiper-button-next,
    .staff_mv_swiper .swiper-button-prev{
        width: 50px;
    }
}
.staff_mv_swiper .swiper-button-next::after,
.staff_mv_swiper .swiper-button-prev::after{
    content: "";
    background-size: contain;
    width: 100%;
    aspect-ratio: 1/1;
}
.staff_mv_swiper .swiper-button-next::after{
    background-image: url(../images/staff/arrow_r.jpg);
}
.staff_mv_swiper .swiper-button-prev::after{
    background-image: url(../images/staff/arrow_l.jpg);
}
.swiper_btn.none{
    display: none;
}

.staff_link_btn{
    position: absolute;
    width: 25%;
    left: 5%;
    top: 55%;
    max-width: 150px;
    display: block;
    z-index: 3;
    border-radius: 50%;
    background-color: #d9cc00;
    aspect-ratio: 1/1;
    border: #d9cc00 solid 1px;
    cursor: pointer;
}
.staff_link_btn_text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%) rotate(15deg);
    color: #000;
    width: max-content;
    transition: all 0.4s;
    font-weight: 800;
    user-select: none;
    font-size: 1.4rem;
}
@media screen and (max-width: 599px) {
    .staff_link_btn_text{
        font-size: 10px;
    }
}
.staff_link_btn::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50% , -50%) scale(1);

    /*波形の形状*/
    border: 1px solid #e6d815;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /*はじめは不透明*/
    opacity:0;
    /*アニメーションの設定*/
}
.staff_link_btn:hover {
    animation: 0.2s top_concenpt_link_btn02;
    background-color: #fff;

}
.staff_link_btn:hover::before {
    /*波形の形状*/
    opacity:1;
    /*アニメーションの設定*/
    animation:1s top_concenpt_link_btn infinite;
}
@media screen and (max-width: 599px){
    .staff_link_btn{
        max-width: 95px;
        width: 35%;
        top: 65%;
        left: 2%;
    }
    .staff_link_btn::before {
        width: 95px;
        height: 95px;
    }
}



.btn_close{
    width: 98px;
    aspect-ratio: 1/1;
    background-color: #000;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
.btn_close::after,
.btn_close::before{
    content: "";
    width: 48%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
}
.btn_close::after{
    transform: translate(-50%,-50%) rotate(45deg);
}
.btn_close::before{
    transform: translate(-50%,-50%) rotate(-45deg);
}
@media screen and (max-width: 599px) {
    .btn_close{
        width: 60px;
    }
}

.staff_profile{
    max-width: 265px;
    width: 54.5%;
    position: absolute;
    bottom: 110%;
    left: 0;
}

.staff_anime01{
    position: absolute;
    max-width: 150px;
    width: 13.15%;
    right: 7%;
    top: 1%;
}
@media screen and (max-width: 821px) {
    .staff_anime01{
        right: 8%;
        top: 3%;
    }
}
@media screen and (max-width: 599px) {
    .staff_anime01{
        right: 9%;
        top: 2%;
        width: 20%;
    }
    .staff_profile{
        width: 45%;
        bottom: 103%;
    }
}
.staff_anime01 .staff01_anim01_01,
.staff_anime01 .staff01_anim01_02,
.staff_anime01 .staff01_anim01_03{
    position: absolute;
    width: 100%;
}
.staff_anime01.show .staff01_anim01_02{
	animation: staff_anime01_01 .4s 0.6s linear forwards;
}
.staff_anime01.show .staff01_anim01_01{
	animation: staff_anime01_02 .4s 0.6s linear forwards;
}
@keyframes staff_anime01_01{
    0% {
          transform: translate(0%);
    }
    50% {
        transform: translate(-16%, 3%);
    }
      100% {
        transform: translate(-16%, 3%);
    }
  }
  @keyframes staff_anime01_02{
    0% {
          transform: translateX(0%);
    }
    50% {
        transform: translate(-16%, 3%);
    }
      100% {
        transform: translate(-32%, 6%);
      }
  }
  

.staff_anime02 .staff01_anim02_01,
.staff_anime01 .staff01_anim01_01{
    z-index: 3;
}
.staff_anime02 .staff01_anim02_02,
.staff_anime01 .staff01_anim01_02{
    z-index: 2;
}
.staff_anime02 .staff01_anim02_03,
.staff_anime01 .staff01_anim01_03{
    z-index: 1;
}
.staff_sticker{
    max-width: 174px;
    width: 40.2777%;
    position: absolute;
    right: 2%;
    top: 48%;
    z-index: 0;
}
.staff_anime02{
    position: absolute;
    max-width: 359px;
    width: 83.1%;
    left: -12%;
    top: auto;
}
.staff_anime02 .staff01_anim02_01,
.staff_anime02 .staff01_anim02_02,
.staff_anime02 .staff01_anim02_03{
    position: absolute;
    width: 100%;
    transition: all 0.4s;
}
.staff_anime02.show .staff01_anim02_02{
	animation: no1_r .4s linear forwards;
}
.staff_anime02.show .staff01_anim02_01{
	animation: no1_r2 .4s linear forwards;
}

@keyframes no1_r{
  0% {
		transform: translateX(0%);
  }
  50% {
		transform: translateX(14%);
  }
	100% {
		transform: translateX(14%);
	}
}
@keyframes no1_r2{
  0% {
		transform: translateX(0%);
  }
  50% {
		transform: translateX(14%);
  }
	100% {
		transform: translateX(28%);
	}
}
@media screen and (max-width: 599px) {
    .staff_sticker{
        width: 35%;
        right: 0%;
        top: 35%;
    }
    .staff_anime02{
        position: static;
        display: grid;
    }
    .staff_anime02 .staff01_anim02_01,
    .staff_anime02 .staff01_anim02_02,
    .staff_anime02 .staff01_anim02_03{
        grid-area: 1/1;
        position: static;
    }
    
}
/* 追加 */
.staff_detail_under_message_box{
    display: flex;
    column-gap: 2%;
    justify-content: space-between;
}

.staff_detail_under_message_box .staff_message_box{
    width: 44.7%;
    padding: 7% 2% 2% 2%;
}
.staff_detail_under_message_box .staff_detail_history_img{
    width: 55.7%;
}
@media screen and (max-width: 599px) {
    .staff_detail_under_message_box{
        flex-direction: column;
        row-gap: 30px;
    }
    .staff_detail_under_message_box .staff_message_box{
        padding: 40px 2%;
    }
    .staff_detail_under_message_box .staff_message_box,
    .staff_detail_under_message_box .staff_detail_history_img{
        width: 100%;
        box-sizing: border-box;
    }
}
.staff03_deco01,
.staff03_deco02,
.staff03_deco03{
    position: absolute;
    z-index: 3;
}
.staff03_deco01{
    max-width: 238px;
    width: 20.877%;
    left: 75%;
    top: 14%;
    animation: kakukaku steps(1) 2s infinite;
}
.staff03_deco02{
    max-width: 100px;
    width: 8.77%;
    left: 77%;
    top: 7%;
}
.staff03_deco03{
    max-width: 199px;
    width: 17.45%;
    left: 55%;
    top: 10%;
    animation: kakukaku steps(1) 2s infinite 1s;
}
@media screen and (max-width: 599px) {
    .staff03_deco01{
        width: 28%;
        left: 78%;
        top: 17%;
    }
    .staff03_deco02{
        width: 15%;
        left: 78%;
        top: 15%;
    }
    .staff03_deco03{
        width: 25%;
        left: 5%;
        top: 4%;
    }
}
@keyframes kakukaku{
    0% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }
    10% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    20% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }
    30% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    40% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }
}
.no04_deco01,.no04_deco02{
    position: absolute;
}
.no04_deco01{
    max-width: 163px;
    width: calc((163 / 486) * 100%);
    bottom: 150%;
    right: 0;
    animation: kakukaku steps(1) 2s infinite;
}
@media screen and (max-width: 599px) {
    .no04_deco01 {
        bottom: 105%;
        width: calc((163 / 486) * 80%);
    }
}
.no04_deco02{
    max-width: 96px;
    width: calc((96 / 486) * 100%);
    right: 10%;
    top: 90%;
    animation: kakukaku steps(1) 2s infinite 1s;
}
@media screen and (max-width: 599px) {
    .no04_deco02 {
        top: 95%;
        width: calc((96 / 486) * 80%);
    }
}
.no05_deco01{
    position: absolute;
    left: 78%;
    top: 10%;
    max-width: 172px;
    width: calc((172 / 1140) * 100%);
}



/* sitemap */
.sitemap_list{
    max-width: 600px;
    margin-inline: auto;
}
.sitemap_list li{
    background-image : linear-gradient(to right, #aaaaaa 8px, transparent 8px);
    background-size: 10px 1px;
    background-repeat: repeat-x; 
    background-position: left bottom;
}
.sitemap_list li:nth-of-type(odd) .sitemap_en{
    color: #4299e2;
    font-size:clamp(18px,2.5vw,22px) 
}
.sitemap_list li:nth-of-type(even) .sitemap_en{
    color: #c01b1b;
    font-size:clamp(15px,2.5vw,20px) 
}
.sitemap_ja,
.sitemap_en{
    display: inline-block;
}
.sitemap_ja{
    width: %;
}
.sitemap_en{
    font-weight: bold;
    width: 20%;
}
.sitemap_list_link{
    display: flex;
    column-gap: 5%;
    padding: 2.5rem 0;
}
@media screen and (max-width: 599px) {
    .sitemap_list_link{
        display: flex;
        column-gap: 0%;
        padding: 2.5rem 0;
    }    
    .sitemap_ja{
        width: 68%;
    }
    .sitemap_en{
        font-weight: bold;
        width: 30%;
    }
}
/* RENOVATION */
.renovation_h_block span{
    display: block;
    width: 100%;
    line-height: 1.4;
}
.renovation_bg01{
    background-color: #ecece0;
}
.renovation_mv_under_img_frame{
    max-height: 350px;
    overflow: hidden;
}
@media screen and (max-width: 599px) {
    .renovation_mv_under_img_frame img{
        width: 150%;
    }

}
.renovation_intro_left,.renovation_intro_right{
    position: absolute;
    top: 0;
}
.renovation_intro_left{
    left: 0;
    width: 28.074074%;
}
.renovation_intro_right{
    right: 0;
    width: 24.148148%;
}
.renovetion_intro_center{
    text-align: center;
}
.renovetion_intro_center img{
    max-width: 618px;
    width: 58.857143%;
}
@media screen and (max-width: 599px) {
    .renovetion_intro_center img{
        width: 90%;
    }
}
.renovetion_intro_frex{
    display: flex;
    justify-content: space-between;
}
.renovetion_intro_frex > div:nth-of-type(1){
    width: 48.5%;
}
.renovetion_intro_frex > div:nth-of-type(2){
    width: 46%;
}
@media screen and (max-width: 821px) {
    .renovetion_intro_frex{
        flex-direction: column-reverse;
        row-gap: 30px;
    }
    .renovetion_intro_frex > div:nth-of-type(1),
    .renovetion_intro_frex > div:nth-of-type(2){
        width: 100%;
    }
}
.renovation_intro_text_bg{
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #537295;
    box-sizing: border-box;
    font-feature-settings: "palt";
    display: inline-block;
    margin-bottom: 5px;
}
.renovation_recommend_box{
    background-color : #537295;
    background-image :
      repeating-linear-gradient(to bottom,          /* 横線 */
        transparent 13px,
        #4f6c8d 14px,  #4f6c8d 14px,
        transparent 15px,  transparent 27px, 
        #4f6c8d 28px,  #4f6c8d 28px,
        transparent 29px,  transparent 41px, 
        #4f6c8d 42px,  #4f6c8d 42px,
        transparent 43px,  transparent 55px, 
        #4f6c8d 56px,  #4f6c8d 56px,
        transparent 57px,  transparent 69px, 
        #4f6c8d 70px,  #4f6c8d 70px),

    repeating-linear-gradient(to right,          /* 縦線 */
        transparent 13px,
        #4f6c8d 14px,  #4f6c8d 14px,
        transparent 15px,  transparent 27px, 
        #4f6c8d 28px,  #4f6c8d 28px,
        transparent 29px,  transparent 41px, 
        #4f6c8d 42px,  #4f6c8d 42px,
        transparent 43px,  transparent 55px, 
        #4f6c8d 56px,  #4f6c8d 56px,
        transparent 57px,  transparent 69px, 
        #4f6c8d 70px,  #4f6c8d 70px);
        border-radius: 20px;
        padding: 80px 5% 60px 5%;
        box-sizing: border-box;
        border: #000 solid 3px;
}
@media screen and (max-width: 599px) {
    .renovation_recommend_box{
        padding: 50px 3.5%;
    }
}
.renovation_recommend_text{
    text-transform: uppercase;
    -webkit-text-stroke: 1px #000; /* ベンダープレフィックス */
    text-stroke: 1px #000;
    text-shadow: 4px 4px 0px #000;
}
@media screen and (max-width: 599px) {
    .renovation_recommend_text{
        text-shadow: 2px 2px 0px #000;
    }
}
.renovation_recommend_grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 3.8%;
    max-width: 850px;
    margin-inline: auto;
}
@media screen and (max-width: 599px) {
    .renovation_recommend_grid{
        grid-template-columns: repeat(1,1fr);
    }
}
.renovation_recommend_list li{
    padding: 5px 0;
    display: flex;
    column-gap: 5%;
    align-items: center;
    line-height: 1.2;
}
.renovation_gallery_flex{
    display: flex;
    justify-content: center;
    column-gap: 4%;
}
.renovation_gallery_flex > div:nth-of-type(1){
    text-align: right;
    width: 53.481481%;
}
.renovation_gallery_flex > div:nth-of-type(2){
    text-align: left;
    width: 42.814815%;
}
.renovation_text_color{
    color: #f1c755;
}
.en_uppercase_letter{
    text-transform: uppercase;
}
.renovation_example_list{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 3%;
}
@media screen and (max-width: 821px) {
    .renovation_example_list{
        column-gap: 2%;
    }
}
@media screen and (max-width: 599px) {
    .renovation_example_list{
        grid-template-columns: repeat(1,1fr);
        row-gap: 50px;
    }
}
.renovation_item_deco{
    position: absolute;
}
.renovation_item_deco01{
    right: 10%;
    top: 42%;
    max-width: 133px;
    width: 12.66%;
}
.renovation_item_deco02{
    left: 22%;
    top: 15%;
    max-width: 78px;
    width: 7.42%;
}
.renovation_item_deco03{
    left: 1%;
    top: 29%;
    max-width: 130px;
    width: 12.38%;
}
.renovation_item_deco04{
    left: 13%;
    top: 51%;
    max-width: 130px;
    width: 12.38%;
}
.renovation_item_deco05{
    right: 25%;
    top: 10%;
    max-width: 100px;
    width: 9.52%;
}
.renovation_item_deco06{
    right: 5%;
    top: 20%;
    max-width: 72px;
    width: 6.85%;
}
.renovation_item_deco07{
    max-width: 51px;
    width: 4.85%;
    display: inline-block;
}
.renovation_item_flex{
    display:flex;
    column-gap: 8%;
    align-items: center;
}
.renovation_item_flex > div:nth-of-type(1){
    width: 47.619%;
}
.renovation_item_flex > div:nth-of-type(2){
    width: 40%;
}
@media screen and (max-width: 599px) {
    .renovation_item_flex{
        flex-direction: column;
        row-gap: 30px;
    }
    .renovation_item_flex > div:nth-of-type(1),
    .renovation_item_flex > div:nth-of-type(2){
        width: 100%;
    }
}
.renovation_pickup_box{
    border-radius: 20px;
    background-color: #2e618c;
    padding: 90px 5.8%;
    box-sizing: border-box;
}
@media screen and (max-width: 599px) {
    .renovation_pickup_box{
        padding: 50px 5%;
    }
}
.renovation_pickup_text_color{
    color: #e8e96f;
}
.renovation_pickup_flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.renovation_pickup_flex > div:nth-of-type(1){
    width: 42%;
}
.renovation_pickup_flex > div:nth-of-type(2){
    width: 47.619%;
}
@media screen and (max-width: 599px) {
    .renovation_pickup_flex{
        flex-direction: column;
        row-gap: 30px;
    }
    .renovation_pickup_flex > div:nth-of-type(1),
    .renovation_pickup_flex > div:nth-of-type(2){
        width: 100%;
    }
}
.renovation_pickup_deco01{
    position: absolute;
    max-width: 332px;
    width: 27.89%;
    top: 0;
    left: 5px;
    transform: translateY(-40%);
}
@media screen and (max-width: 768px) {
    .renovation_pickup_deco01{
        width: 35%;
    }
}
.renovation_example_list_copy{
    font-size: clamp(16px,2.25vw,24px);
}
@media screen and (max-width: 599px) {
    .renovation_example_list_copy{
        font-size: clamp(20px,2.25vw,24px);
    }
}