@charset "utf-8";



/* ==========================================================================
	mv
========================================================================== */
#mv{
    position: relative;
    width: 100%;
    height:calc(100vh - 180px);
    min-height: 880px;
    padding-top: 160px;
    position: relative;
    box-sizing:border-box;
}

#mv .main_inr{
    position: relative;
    width: calc(100% - 9.5vw);
    height: 100%;
    margin:0 auto;
    z-index:50;
}

#mv .tit_area {
position: absolute;
    left: 0;
    right: 0;
    top: 100px;

    display: flex;
    align-items: center;
    justify-content: center; 
    flex-direction: row-reverse;
    align-items: flex-start;
    z-index:50;
}
#mv .tit_area .v_txt {
    position: relative;
    display: inline-block;;
    padding:20px 0;
    background:#fff;
    border-radius:2px;
    font-size: 38px;
    z-index:10;
    margin:0 10px;
    z-index:10;
}

#mv .img_area{
    position: relative;
    width: 100%;
    height: 100%;
    background:url(../image/hasei_main.jpg) center center;
    background-size:cover;
    z-index:10;
}
#mv .mv_txt{
    position: absolute;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: flex-start;
    width: 535px;
    left: 0;
    right: 0;
    top: calc(100% - 100px);
    margin:auto;
    z-index:50;
    transform: translateX(13px);
    letter-spacing: 0.15em;
}
#mv .mv_txt span.v_txt {
    display: block;
    position: relative;
    width: 36px;
    padding:0 10px;
    border-right:1px solid #ccc;
    font-size: 16px;
    box-sizing:border-box;
    opacity: .8;
}
#mv .mv_txt span.v_txt.lt{
    transform: translateY(-8px);
    border-right:none;
}
#mv .mv_txt span.v_txt.lt:after{
    content:"";
    display: block;
    width: 1px;
    height: calc(100% - 8px);
    position: absolute;
    right: 0;
    top: 8px;
    background:#ccc;
}


@media screen and (max-width : 800px ){

    #mv{
        position: relative;
        width: 100%;
        height: auto;
        padding-top: 117px;
        position: relative;
        box-sizing:border-box;
    }

    #mv .main_inr{
        position: relative;
        width: calc(100% - 11.11vw);
        height: 100%;
        margin:0 auto;
        background:#dee5eb;
        z-index:50;
        padding-bottom: 25px;
    }

    #mv .tit_area {
        top: 11vw;
    }
    #mv .tit_area .v_txt {
        padding:10px 0;
        background:#fff;
        font-size: 26px;
        font-size: clamp(24px,6.4vw,28px);
        margin:0 5px;
        z-index:10;
    }

    #mv .img_area{
        position: relative;
        width: 100%;
        height: auto;
        background:none;
    }
    #mv .mv_txt{
        position: relative;
        display: block;
        width: 220px;
        left: auto;
        right: auto;
        top: auto;
        margin:0 auto;
        transform: translateY(-6.25vw);
    }
    #mv .mv_txt span.v_txt {
        display: inline-block;
        position: relative;
        width: auto;
        padding:0;
        border-right:none;
        /*
        border-bottom:1px solid #ccc;
        */
        font-size: 12px;
        line-height: 32px;
    }
    #mv .mv_txt span.v_txt:before{
        content:"";
        display: block;
        position: absolute;
        left: 0;
        bottom:3px;
        background:#ccc;
        width: 100%;
        height: 1px;
            
}
    #mv .mv_txt span.v_txt.lt{
        transform: translateY(0);
        border-right:none;
    }
    #mv .mv_txt span.v_txt.lt:after{
        display:none;
    }
}
/* ==========================================================================
	con01
========================================================================== */
#con01 {
    position: relative;
    max-width:1920px;
    margin:280px auto 115px;
}
#con01 .con_inr {
    position: relative;
}
#con01 .main_box {
     position: relative;   
}
#con01 .tit_area {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin:auto;
    height: 105px;
    width: 460px;
    z-index:10;
}
#con01 .mincho {
    display:inline-block;
    padding:0 15px;
    background: #fff;
    border-radius: 2px;
    font-size: 34px;
    font-size: clamp(34px,2.36vw,38px);
}
#con01 .tit_area h2:nth-child(2){
    margin-top: 20px;
}
#con01 .img_area {
    position: relative;
    width: 87.5%;
    margin-left: 12.5%;
    border-radius:3px;
    height: 500px;
    background:url(../image/secret/con01_img01.jpg) center center;
    background-size:cover;
    z-index:5;
}
#con01 .sub_img {
    width: 29.16vw;
    max-width:450px;
    position: absolute;
    right: -5.55vw;
    bottom:-250px;
    bottom:max(-17.36vw,-250px);
    z-index:10;
}
#con01 .sub_img img{
    border-radius:3px;
}

#con01 .txt {
    position: relative;
    margin-top: 75px;
    font-size: 16px;
    line-height: 36px;
    letter-spacing:0.2em;
    z-index:15;
    width: 68%;
    max-width:890px;
    opacity:.8;
}
@media screen and (max-width : 800px ){

    #con01 {
        margin:55px auto 47px;
    }
    #con01 .tit_area {
        height: 50px;
        width: 280px;
    }
    #con01 .mincho {
        padding:0 10px;
        font-size: 21px;
        font-size: clamp(21px,5.33vw,23px);
    }
    #con01 .tit_area h2:nth-child(2){
        margin-top: 6px;
    }
    #con01 .img_area {
        position: relative;
        width: 90%;
        margin-left: 10%;
        height: 240px;
        transform: translateX(5.55vw);
    }
    #con01 .txt {
        margin-top: 35px;
        font-size: 12px;
        line-height: 25px;
        letter-spacing:0.2em;
        width: 100%;
    }
}



/* ==========================================================================
	con02
========================================================================== */
#con02 {
    position: relative;
    max-width:1920px;
    margin:0 auto;
}
#con02:before{
    content:"";
    display: block;
    width: 43%;
    height: 1280px;
    background:#f0f0f0;
    z-index:1;
    position: absolute;
    right: 0;
    top: 110px;
}
#con02 .con_inr {
    position: relative;
    z-index:10;
}
#con02 .main_box {
     position: relative;
    /*
    transform: translateX(-5.55vw);
    width: calc(100% + 5.55vw);
    */
    transform: translateX(-6.55vw);
    width: calc(100% + 8.55vw);
}
#con02 .tit_area {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin:auto;
    height: 80px;
    width: 460px;
    z-index:10;
}
#con02 .mincho {
    display:inline-block;
    padding:0 15px;
    background: #fff;
    border-radius: 2px;
    font-size: 34px;
    font-size: clamp(34px,2.36vw,38px);
}
#con02 .tit_area h2:nth-child(2){
    margin-top: 20px;
}
#con02 .img_area {
    position: relative;
    width: 87.5%;
    border-radius:3px;
    height: 500px;
    background:url(../image/secret/con02_img01.jpg) center center;
    background-size:cover;
    z-index:5;
}

#con02 .txt_area{
    position: relative;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
}
#con02 .sub_img {
    width:423px;
    z-index:10;
    transform: translateY(-115px);
}
#con02 .sub_img img{
    border-radius:3px;
}

#con02 .txt {
    position: relative;
    margin-top: 63px;
    font-size: 16px;
    line-height: 36px;
    letter-spacing:0.2em;
    z-index:15;
    width: 60.5%;
    opacity:.8;
}
@media screen and (max-width : 1350px ){

    #con02 .sub_img {
        width: 35%;
        transform: translateY(-6.9vw);
    }
    #con02 .txt {
        width: 62%;
    }

}
@media screen and (max-width : 1150px ){

    #con02 .sub_img {
        width: 35%;
        transform: translateY(75px);
    }
    #con02 .txt {
        width: 62%;
    }

}

@media screen and (max-width : 800px ){

    #con02:before{
        width: 71.25vw;
        height: 100%;
        background:#f0f0f0;
        top: 50px;
    }
    #con02 .main_box {
    transform: translateX(-5.55vw);
    width: calc(100% + 5.55vw);
        
    }
    #con02 .tit_area {
        position: absolute;
        right: -10px;
        top: 0;
        bottom: 0;
        margin:auto;
        height: 50px;
        width: 290px;
        z-index:10;
    }
    .iPhone #con02 .tit_area {
        width: 280px;
    }
    #con02 .mincho {
        padding:0 10px;
        font-size: 21px;
        font-size: clamp(21px,5.33vw,23px);
    }
    #con02 .tit_area h2:nth-child(2){
        margin-top: 6px;
    }
    #con02 .img_area {
        position: relative;
        width: 88%;
        border-radius:3px;
        height: 240px;
    }

    #con02 .txt_area{
        display: block;
    }
    #con02 .txt {
        margin-top: 35px;
        font-size: 12px;
        line-height: 25px;
        letter-spacing:0.2em;
        width: 100%;
    }
}


/* ==========================================================================
	con03
========================================================================== */
#con03 {
    position: relative;
    max-width:1920px;
    margin:0 auto 155px;
}
#con03 .con_inr {
    position: relative;
}
#con03 .main_box {
     position: relative;  
    max-width:1240px;
    margin:0 auto;
    
}
#con03 .tit_area {
    position: absolute;
    left: 15px;
    top: 130px;
    margin:auto;
    height: 80px;
    width: 460px;
    z-index:10;
}
#con03 .mincho {
    display:inline-block;
    padding:0 15px;
    background: #fff;
    border-radius: 2px;
    font-size: 34px;
    font-size: clamp(34px,2.36vw,38px);
    letter-spacing: 0.15em;
}
#con03 .tit_area h2:nth-child(2){
    margin-top: 16px;
    letter-spacing: 0.1em;
    padding:0 10px;
}
#con03 .img_area {
    position: relative;
    width: 80%;
    max-width:760px;
    border-radius:3px;
    height: 760px;
    background:url(../image/secret/con03_img01.jpg) center center;
    background-size:cover;
    z-index:5;
    margin:0 auto;
}
#con03 .sub_img {
    width: 31.14vw;
    max-width:460px;
    position: absolute;
    left: -5.5vw;
    top:640px;
    z-index:10;
}
#con03 .sub_img img{
    border-radius:3px;
}

#con03 .txt {
    position: relative;
    margin-top: 59px;
    margin-left: 36%;
    font-size: 16px;
    line-height: 36px;
    letter-spacing:0.2em;
    z-index:15;
    width: 64%;
    opacity:.8;
}
@media screen and (max-width : 800px ){
    #con03 {
        padding-top: 50px;
        margin:0 auto 75px;
        
    }
    #con03:before{
        content:"";
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 71.25vw;
        height: 90px;
        background:#f0f0f0;
        z-index:1;
    }
    #con03 .con_inr {
        z-index:10;
    }
    #con03 .tit_area {
        position: absolute;
        left: 0;
        top: 70px;
        height: 50px;
        width: 290px;
    }
    #con03 .mincho {
        padding:0 10px;
        font-size: 21px;
        font-size: clamp(21px,5.33vw,23px);
        border-radius:0 2px 2px 0;
    }
    #con03 .tit_area h2:nth-child(2){
        margin-top: 6px;
        padding:0 5px;
    }
    #con03 .img_area {
        position: relative;
        width: 100%;
        max-width:760px;
        height: 353px;
    }
    #con03 .txt {
        margin-top: 35px;
        font-size: 12px;
        line-height: 25px;
        letter-spacing:0.2em;
        width: 100%;
        margin-left: 0;
    }
}