@charset "utf-8";

/* CSS Document */



/* =======================================

	2023.SUMMER  No.197

    p02/ OWNER's STORY

======================================= */

/*---Text Head---*/

    /*FV*/

h3{

    font-family: "Shuei Nijimi Go Gin B";

    /*font-size:60px;*/

    font-size:55px;

    line-height:1.6em;

    /*letter-spacing:0.3em;*/

    letter-spacing:0.2em;

    -ms-writing-mode: tb-rl;

	-webkit-writing-mode: vertical-rl;

    writing-mode:vertical-rl;

    -webkit-text-orientation: upright;

    text-orientation:upright;

    display:inline-block;

    font-feature-settings: initial;

}

    /*Column*/

h4{

    font-family: "Shuei KakuGo Gin B";

    font-size:24px;

    line-height:1.5em;

    letter-spacing:0.2em;

    width:400px;

    display:inline-block;

    text-align: center;

    border-right:solid 5px #BD875A;

    border-left:solid 5px #BD875A;

    margin:0 auto 3.5em;

}

    /*plan & Data*/

div.dataWrap h5{

    width:30%;

    padding:1em 0;

    margin:0 auto;

}

div.dataWrap h6{

    font-family: "Shuei KakuGo Gin B";

    font-size:16px;

    padding:1em 0;

    letter-spacing: 0.1em;

    text-align: center;

}



/*---Text Para---*/

p{

    font-family: "Shuei KakuGo Gin M";

    font-size:16px;

    line-height:2em;

    letter-spacing:0.2em;

    margin-bottom:1.8em;

    text-indent:1em;

}

p span{

    display: inline-block;

    text-indent:0;

}



.titleArea div#fv p{

    font-family: "Shuei Nijimi Go Gin B";

    line-height:3em;

    letter-spacing:0.1em;

    text-indent:0;

    -ms-writing-mode: tb-rl;

	-webkit-writing-mode: vertical-rl;

    writing-mode:vertical-rl;

    -webkit-text-orientation: upright;

    text-orientation:upright;

    font-feature-settings: initial;

    display:inline-block;

}

.titleArea div#fv div.name p{

    font-size:15px;

}

.titleArea div#fv p span{

    /*letter-spacing:-0.2em;*/

}

.titleArea div#fv p span.txt-l{

    font-size:17px;

    -webkit-text-combine: horizontal;

    text-combine-upright:all;

}

div.column p{

    padding:0 0.5em 0;

}

div.column p.cap{

    font-size:13px;

    line-height:1.5em;

    color:#222;

    text-indent:0;

    margin-top:-0.5em;

}

div.column p span.drop{

    font-size:38px;

    font-family: "Shuei KakuGo Gin B";

    text-indent:-17px;

}

div.dataText p{

    font-size:13px;

    line-height:1.8em;

    text-indent:0;

    display:inline-block;

    vertical-align: top;

    width:40%;

    padding-left:5%;

    margin:0 auto;

}

div.dataText p:last-child{

    border-left:solid 1px #000;

    padding-left:9%;

}



/*---Line---*/

hr{

	border-top: 1px solid #BD875A;

}

/* =======================================

	PC

======================================= */

/*---Layout---*/

div.pageNavi{

    display:block;

}

div.pageNavi #nav5,

div.pageNavi #nav6{

    display:none;

}

div#area1,div#area2,div#area3,div#area4{

    padding-top:3em;

}



#mainArea{

    background:#FFF;

}

.contArea{

    width:88%;

    min-width:850px;

    margin:0 auto 3em;

}

/*FV*/

#fvArea{

    position:relative;

    margin-top:2.5%;

}



.titleArea{

    width:100%;

    max-width:1800px;

    height:100%;

    margin:0 auto;

    text-align:center;

    position:relative;

    overflow: hidden;

}

.titleArea h2{

    width:32%;

    max-width:300px;

    margin:0 auto 3em;

}

div#mainPhoto{

    width:100%;

    height:80vh;

    background:url("../img/pho_main.jpg") no-repeat;

    background-size:cover;

    position:absolute;

    left:0;

    top:10vh;

    animation-delay: 2s;

    animation-duration: 5s;

    animation-fill-mode:forwards;

    z-index:10;

}

div#sp_mainPhoto{

    display:none;

}

div#fv{

    width:80%;

    max-width:700px;

    height:70vh;

    margin:13vh auto 7vh;

    text-align: start;

    display:-webkit-box;

  	display:-ms-flexbox;

  	display:flex;

    -ms-flex-wrap: wrap;

  	flex-wrap: wrap;

    justify-content: center;

    flex-direction:row-reverse;

    gap:0;

    transition:0.5s;

    animation-delay: 3s;

    animation-fill-mode:forwards;

    opacity:0;

}



div#fv div.name p::before,

div#fv div.name p::after{

    content:"―";

    text-combine-upright:all;

}

div#fv div.name p::before{

    margin-bottom:1em;

}

div#fv div.name p::after{

    margin-top:1em;

}



div.fvSpace1{

    width:3%;

    height:100%;

}

div.fvSpace2{

    width:5%;

    height:100%;

}



/*Contents*/



.textArea{

    width:100%;

    position:relative;

    text-align: center;

}



div.tgt {

    clear: both;

}



div.column{

    width:80%;

    max-width:1050px;

    margin:0 auto 5em;

}

div.column > div{

    position:relative;

}

div.column > div.w100{

    width:100%;

}



div.column > div img{

    width:98%;

    margin:0 1%;

    transition:1.5s;

    margin-bottom:0.8em;

}

div.column > div img:hover{

    opacity:0.9;

}



div.column > div img.icon_zoom{

    width:50px!important;

    height:auto;

    position:absolute;

    right:0.2em;

    bottom:0.2em;

}



div.column > div img.icon_zoom2{

    width:40px!important;

    height:auto;

    position:absolute;

    left:32.5%;

    bottom:-5px;

}



div.column > div img.icon_zoom3{

    width:40px!important;

    height:auto;

    position:absolute;

    right:0.5%;

    bottom:-5px;

}





div.column > div.phoWrap{

    width:54%;

    margin:0.8em 0 1em;

}



div.column > div.phoWrap.w100{

    width:100%;

    margin:0 0 2em;

}



div.column > div.phoWrap.right{

    float:right;

}



div.column > div.phoWrap.left{

    float:left;

}



div.column > div.phoWrap img{

    width:85%;

    transition:0.2s;

}



div.column > div.phoWrap.right img{

    margin-left:13%;

    margin-right:2%;

}

div.column > div.phoWrap.left img{

    margin-right:13%;

    margin-left:2%;

}



div.column > div.phoWrap.w100 img{

    width:45%!important;

    margin:0 2.5%;

    display:inline-block!important;

}



div.column > div.phoWrap img.w50{

    width:41%!important;

    margin:0;

    display:inline-block!important;

}

 

div.column > div.phoWrap img.w50:first-child{

    float:left;

    margin:0 1% 0 2%!important;

}



#n2-9{

    clear: both;

}

#n3-3{

    margin-bottom:0.8em;

}

#n3-4{

    margin-bottom:3em;

}



div.textArea p a.btn{

    display:block;

    width:40%;

    min-width:400px;

    padding:0.8em 0;

    border:solid 1px #BD875A;

    background:#BD875A;

    color:#FFF;

    text-align: center;

    transition:0.5s;

    font-family: "Shuei KakuGo Gin B";

    margin:0 auto 8em;

}



div.textArea p a.btn:hover{

    text-decoration: none;

    background:#E6C29F;

    color:#FFF;

}



/*MODAL: Plan and Data*/

div#slideArea{

    width:100%;

    height:100vh;

    background:#FFF;

    position:fixed;

    left:0;

    top:0;

    z-index:130;

    display:none;

}

div#slideArea div.dataWrap{

    width:70%;

    max-width:1200px;

    min-width:850px;

    margin:0 auto;

}

div.dataWrap div#data{

    margin:2em auto 1em;

}

div#plan01,div#plan02{

    width:46%;

    display:inline-block;

    position:relative;

}

div.dataWrap div#data img.p_plan{

    width:82%;

    margin:0 auto;

}

div.dataWrap div#data span.camera{

    display:block;

    width:40px;

    height:40px;

    background: url(../img/icon_camera.png) no-repeat;

    background-size:contain;

    position:absolute;

    opacity:0.6;

    cursor:pointer;

    transition:1s;

}



span.camera#first_1{

    left:25%;

    top:36%;

}

span.camera#first_2{

    left:17%;

    top:28%;

}

span.camera#first_3{

    right:30%;

    top:52%;

}

span.camera#first_4{

    left:30%;

    bottom:24%;

}



span.camera#second_1{

    right:14%;

    bottom:35%;

}

span.camera#second_2{

    left:23%;

    bottom:40%;

}

span.camera#second_3{

    left:28%;

    top:18%;

}

span.camera#second_4{

    right:28%;

    top:42%;

}

div.dataWrap div#data span.camera:hover{

    opacity:1;

}



div.p_overImg{

    display:block;

    position:absolute;

    left:9%;

    top:0;

    width:82%;

    height:100%;

    opacity:0;

    transition:0.5s;

}

div.p_overImg.active{

    opacity:1;

}

div.p_overImg.first_1{

    background: url("../img/first_1.png") no-repeat;

    background-size:100% auto; 

}

div.p_overImg.first_2{

    background: url("../img/first_2.png") no-repeat;

    background-size:100% auto; 

}

div.p_overImg.first_3{

    background: url("../img/first_3.png") no-repeat;

    background-size:100% auto; 

}

div.p_overImg.first_4{

    background: url("../img/first_4.png") no-repeat;

    background-size:100% auto; 

}

div.p_overImg.second_1{

    background: url("../img/second_1.png") no-repeat;

    background-size:100% auto; 

}

div.p_overImg.second_2{

    background: url("../img/second_2.png") no-repeat;

    background-size:100% auto; 

}

div.p_overImg.second_3{

    background: url("../img/second_3.png") no-repeat;

    background-size:100% auto; 

}

div.p_overImg.second_4{

    background: url("../img/second_4.png") no-repeat;

    background-size:100% auto; 

}

div#slideArea div.dataWrap div.dataText{

    width:80%;

    margin:2em auto 0;

}

img#b_close{

    width:80px;

    position:absolute;

    right:1.5em;

    bottom:1.5em;

    cursor:pointer;

    transition:1.5s;

}

img#b_pad{

    position:fixed;

    width:120px;

    right:1em;

    bottom:1em;

    display:none;

    cursor:pointer;

    transition:1.5s;

}

img#b_close:hover,

img#b_pad:hover{

    opacity:0.5;

}

div.modal,div.floor{

    display:none;

}

br.pcdn{

    display:none;

}



/* =======================================

	DISPLAY LARGE

======================================= */

@media screen and  (min-width:1801px) {

    h3{

    font-size:65px;}

    

    .titleArea div#fv div.name p{

    font-size:20px;

}

    

    div#fv{

    max-width:1000px;

    margin:18vh auto 0;

    }

}

@media screen and  (min-width:1400px) and ( max-width:1800px) {

}

/* =======================================

	TABLET

======================================= */

@media screen and  (min-width:641px) and ( max-width:1025px) {

/*for Vertical screen */

    div.hrzn div#mainPhoto{

    height:80vh;

    left:0;

    top:8vh;

    background:url("../img/sp_pho_main.jpg") no-repeat right 65%;

    background-size:cover;

}

    div.hrzn div#mainArea div#fv{

    height:80%;

    margin:10% auto 0;

    }

}

/* =======================================

	SMPH

======================================= */

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

    

    

    /*---Text Head---*/ 

        /*FV*/

    h3{

        font-size:38px;

        line-height:1.45em;

        letter-spacing:0.15em;

        margin:0 auto 0.5em 18vw;

    }

        /*column*/

    h4{

        font-size:20px;

        line-height:1.8em;

        width:80%;

        margin:0 auto 2em;

    }

        /*plan & Data*/

    div.dataWrap h5{

        width:50%;

        padding:0.3em 0;

    }

    div.dataWrap h6{

        font-size:13px;

        letter-spacing: 0.1em;

        padding:0.5em 0;

    }

        /*---Text Para---*/   

    p{

        font-size:16px;

        line-height:1.8em;

        letter-spacing:0.1em;

    }

    .titleArea div#fv p{

        font-size:15px;

        line-height:2em;

        letter-spacing:1px;

        text-indent:0;

    }

    .titleArea div#fv div.name p{

        padding:0;

        position:absolute;

        right:13vw;

        top:0.5em;

        font-size:17px;

    }

    .titleArea div#fv p span.txt-l{

        font-size:16px;

    }

    div.column p span.drop{

        font-size:32px;

        text-indent:0;

        margin-left:-16px;

    }

    div.column p.cap{

    font-size:13px;

    line-height:1.3em;

    }

    .titleArea div#fv div.pWrap > p{

        margin:0 auto;

        height:19em;

    }

    div.dataText p{

    width:100%;

    font-size:12px;

    line-height:1.6em;

    display:block;

    text-align: left;

    padding:0.5em;

    }

    div.dataText p:last-child{

        border-left:none;

        border-top:solid 1px #000;

        padding-left:0;

        padding:0.5em;

    }

/*---SMPH Layout---*/

    div.pageNavi{

    display:none;

}

    div#area1,div#area2,div#area3,div#area4{

    padding-top:0;

}

    .contArea{

        width:100%;

        min-width:0;

        margin:0 auto;

        padding:2.3em 0 0;

    }

    .titleArea{

        width:80%;

        margin:0 auto;

        position:relative;

    }

/*---SMPH FV---*/

    div#mainPhoto{

        display:none;

    }

    div#sp_mainPhoto{

        display:block;

        width:94%;

        height:calc(94vw*1.44);

        background:url("../img/sp_pho_main.jpg") no-repeat;

        background-size:cover;

        position:absolute;

        top:170px;

        left:3%;

        animation-delay: 2s;

        animation-duration: 5s;

        animation-fill-mode:forwards;

        }

    #fvArea{

    margin-top:0;

    }

    

    div#fv{

        width:100%;

        height:auto!important;

        margin:3em auto 6vh;

        display:block;

        overflow:auto;

        position:relative;

        /*animation-delay: 0s;

        animation-duration: 4s;

        animation-fill-mode:forwards;*/

        animation-delay: 3s;

        animation-duration: 4s;

        animation-fill-mode:forwards;

        background:none;

        opacity:0;

    }

    

    .titleArea h2{

        width:64%;

        max-width:auto;

        margin:0 auto 1.5em;

    }

    div.fvSpace1,div.fvSpace2{

        display:none;

    }

    div#fv div.name{

            display:inline-block;

        }

    .titleArea div#fv div.pWrap{

        display:block;

        width:90%;

        text-align: center;

        margin:4em auto 3em;

        }

/*---SMPH Contents---*/

    

div.column{

    width:88%;

    margin:0 auto 5em;

    display:-webkit-box;

    display:-ms-flexbox;

    display:flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

} 

/*column Order*/

    #n1-1{order:2}

    #n1-2{order:1}

    #n1-3{order:3}

    #n1-4{order:4}

    #n1-5{order:5}

    #n1-6{order:6}

    #n1-7{order:8}

    #n1-8{order:9}

    #n1-9{order:7;margin-bottom:2em;}

    #n1-10{order:10}

    #n1-11{order:11}

    #n1-12{order:13}

    #n1-13{order:14}

    #n1-14{order:15}

    #n1-15{order:12;margin-bottom:2em;}

    

    #n2-1{order:1}

    #n2-2{order:2}

    #n2-3{order:3}

    #n2-4{order:4}

    #n2-5{order:5}

    #n2-6{order:6}

    #n2-7{order:7}

    #n2-8{order:9;margin-bottom:3em}

    #n2-9{order:10}

    #n2-10{order:8;margin-bottom:2em}

    #n2-11{order:11;}

    

    #n3-1{order:2;margin-bottom:2em}

    #n3-2{order:1}

    #n3-3{order:3}

    #n3-4{order:4}

    #n3-5{order:5}

    #n3-6{order:6}

    #n3-7{order:8}

    #n3-8{order:9}

    #n3-9{order:10;margin-bottom:2em}

    #n3-10{order:11;}

    #n3-11{order:7}

    

    #n4-1{order:1}

    #n4-2{order:3}

    #n4-3{order:2;margin-bottom:2em}

    #n4-4{order:4}

    #n4-5{order:6}

    #n4-6{order:7}

    #n4-7{order:5;margin-bottom:2em}

    #n4-8{order:8}

    

/**/

    div.column > div.phoWrap{

        width:100%;

        margin:0.8em 0 1em;

    }



    div.column > div.phoWrap.w100{

        width:100%;

        margin:0 0 2em;

    }



    div.column > div.phoWrap.right{

        float:none;

    }



    div.column > div.phoWrap.left{

        float:none;

    }



    div.column > div.phoWrap img{

        width:100%;

        transition:0;

    }

    div.column > div.phoWrap.right img,

    div.column > div.phoWrap.left img{

        margin:0;

    }

    div.column > div.phoWrap img.w50{

        width:100%!important;

    }

    div.column > div.phoWrap img.w50:first-child{

        float:none;

        margin:0!important;

    }



    div.column > div.phoWrap.w100 img{

        width:100%!important;

        margin:0!important;

    }

    div.column > div img.icon_zoom,

    div.column > div img.icon_zoom2,

    div.column > div img.icon_zoom3{

        display:none;

    }

    div.textArea p a.btn{

        width:88%;

        font-size:14px;

        min-width:auto;

        margin:-3em auto 5em;

        }

    

    /*Plan and Data*/

    .box{

        margin:0 auto 0;

        position: relative;

        top: 1.5em;

        left: 0;

        transform: none;

        -webkit- transform: none; 

    }    

    

    div#slideArea{

        z-index:100;

    }



    div#slideArea div.dataWrap{

        width:80%;

        max-width:auto;

        min-width:auto;

    }



    div.dataWrap div#data{

        margin:1em auto;

    }

    div#plan01,div#plan02{

        width:112%;

        position:relative;

        margin:25% auto 1em -10%;

    }

    div#plan01{

            display:block;

        }

    div#plan02{

            display:none;

        }   

    div.dataWrap div#data span.camera{

        display:block;

        width:30px;

        height:30px;

    }

    div.dataWrap div#data img.p_plan{

        width:70%;

        margin:0 auto;

    }

    

    div#slideArea div.dataWrap div.dataText{

        width:80%;

        margin:0 auto 0;

    }

    img#b_close{

        width:80px;

        position:absolute;

        right:1.5em;

        bottom:1.5em;

        cursor:pointer;

        transition:1.5s;

    }

    img#b_pad{

        width:95px;

        position:fixed;

        right:0.2em;

        bottom:0.5em;

        display:none;

        transition:1.5s;

    } 

    div.p_overImg{

    display:none;

}

div.p_overImg.active{

    opacity:0;

}



    div.floor{

        display:block;

        width:auto;

        padding:0.5em 0.8em;

        background:#FFF;

        color:#BD875A;

        border:solid 1px #BD875A;

        position:absolute;

        font-family: 'Zen Maru Gothic', sans-serif;

        font-size:15px;

    }  

    div.floor.active{

        border:solid 1px #BD875A;

        background:#BD875A;

        color:#FFF;

        }   

    #icon_1f{

        right:0;

        top:15%;

    }

    #icon_2f{

        right:0;

        top:23%;

    }



    br.spdn{

        display:none;

    }

    br.pcdn{

        display:block;

}  

    

}



/* =======================================

	FOR SE

======================================= */



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

    h3{

        font-size:34px;

    }

    div#fv{

        margin:2em auto 6vh;

    }

    }



/* =======================================

	ADD ANIMATION

======================================= */

@-webkit-keyframes fadeOut {

  from {opacity: 1;}



  to {

    opacity: 0.2;

  }

}



@keyframes fadeOut {

  from {

    opacity: 1;

  }



  to {

    opacity: 0.2;

  }

}

.fadeOut {

  -webkit-animation-name: fadeOut;

  animation-name: fadeOut;

}

/* =======================================

	Styles of lightbox

======================================= */

.lightboxOverlay {

    background-color:#E6C29F;

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=96);

    opacity: 0.96;

    overflow: hidden;

}



 /*caption*/

.lb-data .lb-caption {

  font-weight: normal;

}



.lb-dataContainer .lb-data .lb-caption {

    font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",

    "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;

    font-weight:500;

    letter-spacing: 0.05em;

    color: #000;

}



.lb-dataContainer .lb-data .lb-caption a {

    color: #4ae;

}



.lb-dataContainer .lb-data .lb-number {

    color: #32627D;

    opacity:0;

}



.lb-data .lb-details {

  width: 90%;

}



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

    .lb-data .lb-details {

  width: 85%;

    }

}



/* =======================================

	HACK

======================================= */

/*for firefox*/

@-moz-document url-prefix() {

    div#fv p {

    display:inline-block;

    margin:0 auto;

}

    br.spdn{display:inline;}

    

      /*for smph;*/

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

        br.pcdn{display:inline;}

        br.spdn{display:none;}

      }

}



/*for Safari*/

@media screen and (-webkit-min-device-pixel-ratio:0)

  and (min-color-index:0) {

      div#fv {justify-content: space-between;}

      div.fvSpace1,div.fvSpace2 {display:none;}

      div#fv p {margin:0 auto;} 

      span.trn{letter-spacing:-0.2em;-webkit-text-orientation:mixed;}

        /*for smph;*/

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

        div#fv h3 {height: 13em;}

        img#b_close{bottom:2.5em;}

      }

}

/**/

    _::-webkit-full-page-media, _:future, :root div#fv {

        justify-content: space-between;

    }



    _::-webkit-full-page-media, _:future, :root div.fvSpace1,div.fvSpace2 {

        display:none;

    }



    _::-webkit-full-page-media, _:future, :root div#fv p {

        margin:0 auto;

    }



    _::-webkit-full-page-media, _:future, :root span.trn{

            letter-spacing:-0.2em;-webkit-text-orientation:mixed;

        }



      /*for smph;*/

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

        _::-webkit-full-page-media, _:future, :root div#fv h3 {height: 13em;}

    }