@charset "utf-8";
/* CSS Document */

/* =======================================
	2025.SPRING  No.203
    p02/ OWNER's STORY
======================================= */
/*---Text Head---*/
    /*FV*/
#p02 h3{
    width:auto;
    font-family: "Shuei Nijimi Go Gin B";
    font-size:50px;
    line-height:1.5em;
    height:10em;
    /*letter-spacing:0.3em;*/
    letter-spacing:0.15em;
    /*-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;
    color:#1a1a1a;
    opacity:0;
    /*text-shadow:2px 2px 40px #302C2C;*/
    text-align: left;
    position:absolute;
	top:50px;
    left: 40px;
    /*transform: translateX(-50%);
    -webkit- transform: translateX(-50%); */
    transition:0.5s;
}

div#fv h3.active{
    /*transition:0.5s;*/
    animation-name:fadeIn;
    animation-delay: 1s;
    animation-duration: 4s;
    animation-fill-mode:forwards;
}
    /*Column*/
#p02 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 #498744;
    border-left:solid 5px #498744;
    margin:0 auto 3.5em;
}
    /*plan & Data*/
div.dataWrap h5,
div.select h5{
    width:20%;
    padding:1em 0;
    margin:0 auto;
}
div.dataWrap h6,
div.select h6{
    font-family: "Shuei KakuGo Gin B";
    font-size:16px;
    padding:1em 0;
    letter-spacing: 0.1em;
    text-align: center;
}

/*---Text Para---*/
#p02 p{
    font-family: "Shuei KakuGo Gin M";
    font-size:16px;
    line-height:2em;
    letter-spacing:0.2em;
    margin-bottom:1.8em;
    text-indent:1.2em;
}
#p02 p span{
    display: inline-block;
    text-indent:0;
}

#p02 p span.nfont{
    font-family: "Hiragino Kaku Gothic ProN",Meiryo;
}

#p02 p span.indent{
    text-indent:-0.5em;
}

.titleArea div#fv p{
    font-family: "Shuei Nijimi Go Gin B";
    line-height:3em;
    letter-spacing:0.1em;
    text-indent:0;
    color:#000;
    /*-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;
}
div.name{
    position:relative;
    width:100%;
    padding:1em 0 1.5em;
}

div.name p{
    font-size:16px;
    font-family: "Shuei Nijimi Go Gin B"!important;
    text-shadow:none;
    text-align:center;
}

.titleArea div#fv p span.txt-l{
    font-size:20px;
    -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;
}

#p02 p#lead span.txt-ss{
    font-size:60%;
    letter-spacing:0;
    display:inline;
}

div#leadWrap{
        position:relative;
        padding-bottom:100px;
}


#p02 div.capWrap{
    width:50%;
    font-size:0.8em;
    letter-spacing:0.1em;
    line-height:1.5em;
    color:#386D9A;
    text-align: justify;
    font-feature-settings: "palt" 1;
    -webkit-line-break: strict;
    line-break: strict;
    position:absolute;
    left:25%;
    bottom:50px;
    text-indent:-1.5em;
    margin-left:1em;
}

#p02 p#lead span.anno{
    display:inline;
    font-size:80%;
    color:#386D9A;
}

div.pages.short{
    /*border:solid 3px;*/
}

div.pWrap{
    margin:2em auto 3em;
}


div.pWrap p{
    font-family: "Shuei Nijimi Go Gin B";
    line-height:3em;
    letter-spacing:0.1em;
    text-indent:0!important;
    -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;
}

div.pages.short div.pWrap p{
        /*height:28em;*/
}


div.column p{
    padding:0 0.5em 0;
}
#p02 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";
    display:inline-block;
    margin-left:-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%;
}


/*For Gallery*/
div#area5 p{
    text-indent:0;
}

/*---Line---*/
hr{
	border-top: 1px solid #498744;
}

/* =======================================
	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;*/
}

div#area1{
    margin-bottom:2em;
}

#mainArea{
    background:#FFF;
}
.contArea{
    margin:0 auto 3em;
}
/*FV*/

/*.contArea div{
    border:solid 1px;
}*/

#fvArea{
    position:relative;
    height:100vh;
    transition:0.2s;
}

.titleArea{
    width:100%;
    margin:0 auto;
    text-align:center;
    position:relative;
}

.titleArea h2{
    width:32%;
    max-width:300px;
    margin:0 auto 2em;
}

div#mainPhoto{
    width:90%;
    max-width:1200px;
    height:70%;
    height:70vh;
    min-height:550px;
    margin:0 auto 3em;
    padding-bottom:4em;
    background:url("../img/pho_main.jpg?02") no-repeat center bottom;
    background-size:cover;
    position:relative;
    opacity:1;
}

/*div#mainPhoto div.main_l{
    position:absolute;
    left:0;
    top:0;
    width:50%;
    height:100%;
    background:url("../img/pho_main_l.jpg?03") no-repeat center top;
    background-size:cover;
}

div#mainPhoto div.main_r{
    position:absolute;
    left:50%;
    top:0;
    width:50%;
    height:100%;
    background:url("../img/pho_main_r.jpg?01") no-repeat right top;
    background-size:cover;
}
*/
div#sp_mainPhoto{
    display:none;
}
div#fv{
    width:100%;
    height:100%;
    /*margin:8vh auto 0;*/
    margin:0 auto;
    /*display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    justify-content: center;
    flex-direction:row-reverse;
    gap:0;*/
    /*background: url("../img/pho_main_cover.png") no-repeat center bottom;
    background-size:100%;*/
}



.titleArea.scrld div#fv{
    /*transition:0.5s;
    animation-name:fadeOut;
    animation-delay: 3s;
    animation-fill-mode:forwards;
    opacity:1;*/
}

div.name p::before,
div.name p::after{
    content:"|";
}
div.name p::before{
    margin-right:1em;
}
div.name p::after{
    margin-left:1em;
}

div.name p >span{
    display:inline;
    vertical-align: middle;
    margin:0;
    padding:0;
}

div.fvSpace1{
    width:5%;
    height:100%;
}
div.fvSpace2{
    width:8%;
    height:100%;
}

/*Contents*/

.textArea{
    width:88%;
    min-width:850px;
    margin:0 auto;
    position:relative;
    text-align: center;
}

div.tgt {
    clear: both;
}

div.column{
    width:80%;
    max-width:1050px;
    margin:0 auto 10em;
}
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:58%;
    margin:0.8em 0 1em;
}

div.column > div.phoWrap.w100{
    width:100%;
    margin:3em 0 6em;
}

div.column > div.phoWrap.w50{
    width:50%;
    margin:0.8em 0 1em;
}

div.column > div.phoWrap.w40{
    width:40%;
    margin:0.8em 0 2em;
}

div.column > div.phoWrap.right{
    float:right;
}

div.column > div.phoWrap.left{
    float:left;
}

div.column > div.phoWrap img{
    width:85%;
	display:inline-block;
    transition:0.2s;
}

div.column > div.phoWrap.w100 img{
    width:100%;
}

div.column > div.phoWrap.right img{
    margin-left:15%;
    margin-right:0;
}
div.column > div.phoWrap.right p.cap{
    margin-left:15%;   
    margin-right:0%; 
}

div.column > div.phoWrap.left img{
    margin-right:15%;
    margin-left:0;
}
div.column > div.phoWrap.left p.cap{
    margin-right:15%;
    margin-left:0%;
}

div.column > div.phoWrap.w100.dual a{
    display:inline-block;
    width:47%;
	position:relative;
	vertical-align: top;
}

div.column > div.phoWrap.w100.dual a:first-child{
	margin-right:3%;
	margin-bottom:1em;
}
div.column > div.phoWrap.w100.dual a:last-child{
	margin-left:3%;
	margin-bottom:1em;
}

div.column > div.phoWrap.w100.dual a img{
	width:100%;
	height:auto;
	margin:0;
    display:block;
}

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;
}



#n3-8 div.flexbox{
	width:99%;
	margin:0 auto;
}

#n3-8 div.flexbox p.cap{
	width:48%;
}


/*#n2-11{
	padding:2.5em 0;
}

#n2-14,#n3-10,#n3-15{
	padding:2.5em 0 0;
}


#n1-9 img:first-child{
	margin-bottom:1.5em;
}

#n1-9 img:last-child{
	margin-left:0;
}*/

/*#n3-2{
	position:relative;
}

#n3-2 img#pho_dog{
	position:absolute;
	left:-8%;
	bottom:10px;
	width:38%;
	height:auto;
}

#n3-2 img#pho_dog:hover{
	opacity:1;
}

#n3-2 p.cap{
	width:55%;
	margin-left:32%;
}*/

div.textArea p a.btn{
    display:block;
    width:40%;
    min-width:400px;
    padding:0.8em 0;
    border:solid 1px #498744;
    background:#498744;
    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;
    opacity:0.5;
    /*background:#498744;
    border:solid 1px #498744;
    color:#FFF;*/
}



/*MODAL: Plan and Data*/
div#slideArea{
    width:100%;
    height:100vh;
    background:#FFF;
    position:fixed;
    left:0;
    top:0;
    z-index:500;
    display:none;
	/*display:block;*/
}
div#slideArea div.dataWrap,
div#slideArea div.select{
    width:60%;
    max-width:1400px;
    min-width:850px;
    margin:0 auto;
}

p.change{
    width:auto;
    display:block;
    margin:1em 0;
    font-size:0.9em;
    text-align: right;
    letter-spacing:0.1em;
    font-weight:bold;
    vertical-align: middle;
}

p.change img{
    width:40px;
    vertical-align: middle;
    margin-left:0.5em;
}

p.change span{
    cursor:pointer;
    transition:0.5s;
}

p.change span:hover{
    opacity:0.5;
}

div#slideArea div.select ul{
    width:80%;
    margin:5% auto 15%;
}

div#slideArea div.select ul li{
    width:38%;
    margin:0 5%;
    position:relative;
    display:inline-block;
}

div#slideArea div.select ul li img{
    width:100%;
    margin-bottom:1.5em;
    cursor:pointer;
    transition:0.5s;
}

div#slideArea div.select ul li div{
    display:block;
    text-align:center;
    width:90%;
    margin:0 auto;
    padding:0.8em 0;
    color:#FFF;
    font-size:0.9em;
    letter-spacing:0.15em;
    cursor:pointer;
    text-indent:0.3em;
    transition:0.5s;
}

div#slideArea div.select ul li.plan1 div{
    background:#498744;
}

div#slideArea div.select ul li.plan2 div{
}

div#slideArea div.select ul li img:hover,
div#slideArea div.select ul li div:hover{
    opacity:0.5;
}

div.dataWrap div#data,
div.dataWrap div#data2{
    margin:2em auto 1em;
}
div#plan01,div#plan02{
    display:inline-block;
    position:relative;
    background:#FFF;
    vertical-align: top;
}
div#plan01{
    width:46%;
	margin-left:3%;
}
div#plan02{
    width:46%;
	margin-left:3%;
}
div.dataWrap div#data img.p_plan{
    width:100%;
    margin:0 auto;
}
div.dataWrap div#data2 img.p_plan{
    width:76%;
    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;
}

div.dataWrap div#data span#second_3{
    display:block;
    width:40px;
    height:40px;
    background: url(../img/icon_target.png) no-repeat;
    background-size:contain;
    position:absolute;
    opacity:0.6;
    cursor:pointer;
    transition:1s;
}

div.dataWrap div#data span#second_3:hover{
	opacity:1;
}

span.camera#first_1{
    right:8%;
    top:30%;
}
span.camera#first_2{
    left:38%;
    top:55%;
}
span.camera#first_3{
    left:12%;
    top:68%;
}
span.camera#first_4{
    left:25%;
    top:37%;
}
span.camera#first_5{
    left:25%;
    top:37%;
}
span.camera#first_6{
    left:79%;
    top:40%;
}
span.camera#first_7{
    left:72%;
    top:83%;
}


span.camera#second_1{
    left:12%;
    top:33%;
}
span.camera#second_2{
    left:32%;
    top:46%;
}
span.camera#second_3{
    left:66%;
    top:78.34%;
}


div.dataWrap div#data span.camera:hover,
div.dataWrap div#data2 span.camera:hover{
    opacity:1;
}

div.p_overImg{
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    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.first_5{
    background: url("../img/first_5.png") no-repeat;
    background-size:100% auto; 
}
div.p_overImg.first_6{
    background: url("../img/first_6.png") no-repeat;
    background-size:100% auto; 
}
div.p_overImg.first_7{
    background: url("../img/first_7.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#second_3_com{
    display:none;
    position:absolute;
    left:5%;
    top:0;
    width:50%;
    height:87%;
    transition:0.5s;
	background: url("../img/second_3_com.png") no-repeat bottom;
    background-size:contain; 
	cursor:pointer;
	animation:fadeIn 0.5s forwards;
}

div#slideArea div.dataWrap div.dataText{
    width:60%;
    margin:2em 0 0 22%;
    position:relative;
}
div#slideArea div.dataWrap div.dataText > p.tt{
    position:absolute;
    right:10%;
    top:-2em;
    width:9%;
    text-align:center;
    font-size:12px;
    line-height:1.3em;
    white-space: nowrap;
}

div#slideArea div.dataWrap div.dataText > p.tt span{
    display:block;
    font-size:0.9em;
}

div#slideArea div.dataWrap div.dataText > p.tt img{
    width:100%;
    display:block;
    margin-bottom:0.5em;
}

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:45px;
    bottom:220px;
    display:none;
    cursor:pointer;
    transition:0.4s;
    z-index:131;
}

div.pages.nonbnr img#b_pad{
    right:10px;
    bottom:10px;
}

img#b_close:hover,
img#b_pad:hover{
    opacity:0.5;
}
div.modal,div.floor{
    display:none;
}
br.pcdn{
    display:none;
}
a.spdn{
    display:inline;
}



/* =======================================
	DISPLAY LARGE
======================================= */
@media screen and  (min-width:1801px) {
    #p02 h3{
        font-size:52px;
    }
    img#b_pad{
    right:220px;
    bottom:10px;
}
}
@media screen and  (min-width:1400px) and ( max-width:1800px) {
    
}
/* =======================================
	TABLET
======================================= */
@media screen and  (min-width:641px) and ( max-width:1024px) {
    div#mainPhoto{
    
}
    .titleArea{
    }
    
    .textArea{
    min-width:750px;
}
    
    img#b_pad{
    right:10px;
    bottom:10px;
}

}
/* =======================================
	SMPH
======================================= */
@media screen and (max-width: 640px) {
    
    
    /*---Text Head---*/ 
        /*FV*/
    #p02 h3{
        width:97%;
        font-size:28px;
        line-height:1.5em;
        letter-spacing:0.05em;
        top:8vh;
        left:6%;
		transform: none;
    	-webkit- transform: none; 
        position:absolute;
        text-align:left;
    }
        /*column*/
    #p02 h4{
        font-size:20px;
        letter-spacing:0.05em;
        line-height:1.8em;
        width:80%;
        margin:0 auto 2em;
    }
        /*plan & Data*/
    div.dataWrap h5,
    div.select h5{
        width:30%;
        padding:0.3em 0;
    }
    div.dataWrap h6,
    div.select h6{
        font-size:13px;
        letter-spacing: 0.1em;
        padding:0.5em 0;
    }
        /*---Text Para---*/   
    #p02 p{
        font-size:16px;
        line-height:1.8em;
        letter-spacing:0.1em;
    }
    .titleArea div#fv p{
        font-family: "Shuei Nijimi Go Gin B";
    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;*/
        text-align: center;
    display:inline-block;
        font-size:15px;
        line-height:2em;
        letter-spacing:1px;
    }
    
    div.name{
        margin:1em 0 0 -0.5em;
        padding:2em 0 0;
    }
    div.name p{
        font-size:15px;
        margin:0;
        padding:0;
    }
    
    #p02 p#lead span.txt-ss{
    font-size:60%;
    letter-spacing:0;
    display:inline;
    }


    #p02 div.capWrap{
        width:90%;
        font-size:0.8em;
        letter-spacing:0.1em;
        color:#386D9A;
        position:absolute;
        left:5.5%;
        bottom:20px;
        text-indent:0;
        margin-left:0;
    }

    #p02 p#lead span.anno{
        font-size:70%;
    }
    
    .titleArea div#fv p span.txt-l{
    font-size:16px;
        vertical-align:middle;
    -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;
}
    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:30em;
    }*/
    
    div.column > div.phoWrap.right p.cap,
    div.column > div.phoWrap.left p.cap{
    padding-top:1em;
    margin-left:0;   
    margin-right:0; 
}
    
    .textArea{
        min-width:auto;
    }
    
    div.pWrap{
        position:relative;
        margin:3em auto 3em;
}
    
    div.pWrap > p{
        margin:0 auto;
        height:26em;
    }
    
    p#lead{
        line-height:1.6em;
    }
    
    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;
    }
    
   /* 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#fv div.name p >span{
    display:inline-block;
    vertical-align: top;
}
    
/*---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:1em 0 0;
    }
    .titleArea{
        width:80%;
        margin:0 auto;
        position:relative;
    }
    
/*---SMPH FV---*/
    #fvArea{
    margin-top:0;
    height:auto;
    }
    div.titleArea{
        position:relative;
        padding:0;
        width:90%;
    }
    div#mainPhoto{
        position:relative;
        width:100%;
        height:auto;
        padding-top:calc(200vw*1);
        min-height:auto;
        margin:0 auto;
        padding-bottom:0;
        background:url("../img/sp_pho_main.jpg?01") no-repeat top;
        background-size:cover;
        left:auto;
        top:auto;
        }
    
    div#mainPhoto div.main_l,
    div#mainPhoto div.main_r{
        display:none;
    }
    
    div#fv{
        width:100%;
        height:100%;
        margin:0 auto 0;
        display:block;
        overflow:hidden;
        position:absolute;
        left:0;
        top:0;
        /*animation-delay: 0s;
        animation-duration: 4s;
        animation-fill-mode:forwards;*/
        animation-name:fadeIn;
        animation-delay: 1.5s;
        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;
    }
    /*.titleArea div#fv div.pWrap{
        display:block;
        width:90%;
        text-align: center;
        margin:3em 7% 3em 2%;
        }*/
    
/*---SMPH Contents---*/
	
div#leadWrap{
        padding-bottom:0;
}
    
div.column{
    width:94%;
    margin:0 auto 3em;
    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-sp1{order:6}*/
    #n1-6{order:6}
    #n1-7{order:7}
    #n1-8{order:9}
    #n1-9{order:10}
    #n1-10{order:11}
    #n1-11{order:17}
    #n1-12{order:13}
    #n1-13{order:14}
    #n1-14{order:15}
    #n1-15{order:16}
    #n1-sp2{order:8}
    #n1-16{order:18}
    #n1-17{order:19}
    
    #n2-1{order:1}
    #n2-2{order:2}
    #n2-3{order:3}
    #n2-4{order:4}
    #n2-5{order:8}
    #n2-6{order:5}
    #n2-7{order:6}
    #n2-8{order:7}
    #n2-9{order:9}
    #n2-10{order:10}
    #n2-11{order:11}
    #n2-12{order:12}
    #n2-sp1{order:14}
    #n2-13{order:13}
    #n2-14{order:18}
    #n2-15{order:15}
    #n2-16{order:16}
    #n2-17{order:17}
    
    #n3-1{order:2;/*margin-bottom:1em;*/}
    #n3-2{order:1}
    #n3-3{order:3}
    #n3-4{order:4}
    #n3-5{order:5;/*margin-bottom:0.5em;*/}
    #n3-6{order:6}
    #n3-7{order:7}
    #n3-8{order:8;margin-bottom:0.5em;}
    #n3-sp1{order:9}
    
    
    #n4-sp1{order:1}
    #n4-1{order:2}
    #n4-2{order:3}
    #n4-3{order:6}
    #n4-4{order:4}
    #n4-5{order:5}
    #n4-6{order:7}
    #n4-7{order:8}
    #n4-8{order:9}
    #n4-9{order:10}
    #n4-10{order:11}
    
    
    #n3-sp1 img:first-child/*,
    #n3-sp1 img:nth-child(2)*/{
        margin-bottom:0;
    }
	
    #n3-8 div.flexbox p.cap{
	width:auto;
}
    
/*#n3-2 img#pho_dog{
	position:absolute;
	left:-8%;
	bottom:2em;
	width:42%;
	height:auto;
}

*/

    div.column > div.phoWrap{
        width:100%;
        margin:0.8em 0 2em;
    }

    div.column > div.phoWrap.w100,
    div.column > div.phoWrap.w50,
    div.column > div.phoWrap.w40{
        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 img.spdn{
		display:none;
	}
    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.dual img{
        width:100%!important;
        margin:0!important;
    }
    
    div.column > div.phoWrap.w100.dual img{
    }
	
	div.column > div.phoWrap.w100.dual a{
    display:inline-block;
    width:100%;
	position:relative;
	vertical-align: top;
}

div.column > div.phoWrap.w100.dual a:first-child{
	margin-right:0;
	margin-bottom:0;
}
div.column > div.phoWrap.w100.dual a:last-child{
	margin-left:0;
	margin-bottom:0;
}

div.column > div.phoWrap.w100.dual a img{
	width:100%;
	height:auto;
	margin:0;
}
	
div.column > div.phoWrap.w100.dual a img#pho10,    
div.column > div.phoWrap.w100.dual a img#pho11{
        display:none;
    }
    
			p.cap#pho07_cap{
			display:none;
		}

		p.cap#pho08_cap{
			display:none;
		}
	
	/*#n2-14,#n3-15{
	padding:1.5em 0 0;
}
	
	#n3-10{
		padding:0 0;
	}
	
	div#n2-sp3 a{
		margin-bottom:1em;
	}*/
	
    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:500;
        height:100%;
    }

    div#slideArea div.dataWrap,
    div#slideArea div.select{
        width:80%;
        max-width:auto;
        min-width:auto;
    }
    
    div#slideArea div.select ul{
    width:50%;
    margin:10% auto 0;
}

    div#slideArea div.select ul li{
    width:100%;
    margin:0 auto 2em;
    position:relative;
    display:block;
}

div#slideArea div.select ul li img{
    width:100%;
    margin-bottom:0.5em;
    cursor:pointer;
    transition:0.5s;
}
    
    p.change{
    width:auto;
    display:block;
    margin:1em 0;
    font-size:0.7em;
    text-align: right;
    letter-spacing:0.1em;
    font-weight:normal;
    vertical-align: middle;
    position:absolute;
        right:0;
        top:13%;
    }
    
    p.change img{
    width:30px;
    vertical-align: middle;
    margin-left:0.5em;
}

	div#second_3_com{
    display:none;
    position:absolute;
    left:8%;
    top:0;
    width:60%;
    height:82%;
    transition:0.5s;
	background: url("../img/second_3_com.png") no-repeat bottom;
    background-size:contain; 
	cursor:none;
	animation:fadeIn 0.5s forwards;
	}
	

    div.dataWrap div#data{
        margin:1em auto;
    }
    div#plan01{
        width:100%;
        position:relative;
        margin:25% auto 0;
    }
    div#plan02{
        width:100%;
        position:relative;
        margin:25% auto 0;
    }
    
    div#plan01{
            display:block;
        }
    div#plan02{
            display:none;
        }   
    div.dataWrap div#data span.camera,
    div.dataWrap div#data2 span.camera,
	div.dataWrap div#data span#second_3{
        display:block;
        width:30px;
        height:30px;
    }

    div.dataWrap div#data img.p_plan{
        width:90%;
        margin:1em auto;
    }
    
    div.dataWrap div#data2 img.p_plan{
        width:70%;
        margin:0 auto;
    }
    
   /* div.dataWrap div#data2{
        padding:15% 0 0;
    }*/
    
    div#slideArea div.dataWrap div.dataText{
        width:96%;
        margin:0 auto 0;
    }
    div#slideArea div.dataWrap div.dataText > p.tt{
    position:absolute;
    right:0;
    left:0;
    top:8em;
    width:100%;
    text-align:left;
    font-size:12px;
    line-height:1.3em;
    white-space: nowrap;
}
    
    div#slideArea div.dataWrap div.dataText > p.tt span{
        display:inline;
    }
    
    div#slideArea div.dataWrap div.dataText > p.tt span::after{
        content:":";
    }

div#slideArea div.dataWrap div.dataText > p.tt img{
    width:60px;
    display:inline;
    vertical-align: middle;
    margin-bottom:0;
    margin-right:0.5em;
}
    
    div#slideArea div.dataWrap div.dataText > p.tt br{
        display:none;
    }
    
    img#b_close{
        width:80px;
        position:absolute;
        right:1em;
        bottom:0.5em;
        cursor:pointer;
        transition:1.5s;
    }
    img#b_pad{
        width:95px;
        position:fixed;
        right:3px;
        bottom:0.5em;
        display:none;
        z-index:10;
        transition:1.5s;
    } 
    
    div.pages.nonbnr img#b_pad{
    right:3px;
    bottom:0.5em;
    }
    
    div.p_overImg{
    display:none;
}
div.p_overImg.active{
    opacity:0;
}

    div.floor{
        width:auto;
        padding:0.5em 0.8em;
        background:#FFF;
        color:#498744;
        border:solid 1px #498744;
        position:absolute;
        font-family: 'Zen Maru Gothic', sans-serif;
        font-size:15px;
        display:block;
    }
    
    div.floor.active{
        border:solid 1px #498744;
        background:#498744;
        color:#FFF;
        } 
    #icon_1f,#icon2_1f{
        left:0;
        top:14%;
    }
    #icon_2f,#icon2_2f{
        left:0;
        top:21%;
    }

    br.spdn{
        display:none;
    }
    br.pcdn{
        display:block;
}  
    span.em{
        display:inline-block;
        text-indent:1em;
    }
    
    }

/* =======================================
	FOR SE
======================================= */

@media screen and (max-width: 321px) {
    #p02 h3{
        font-size:26px;
    }
    div#fv{
        /*margin:2em auto 6vh;*/
    }
    div.textArea div.pWrap > p{
        font-size:14px!important;
        line-height:1.2em;
        height:26em;
    }
    img#b_close{
        width:60px;
        position:absolute;
        right:1em;
        bottom:1em;
    }
    
    p#lead{font-size:14px}
    }

/* =======================================
	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;
}

@-webkit-keyframes fadeOutIn {
  0% {opacity:1;}
    10%{opacity:1;}
  50%{opacity:0;}
    90%{opacity:1;}
  100%{opacity:1;}
}

@keyframes fadeOutIn {
  0% {opacity:1;}
    10%{opacity:1;}
  50%{opacity:0;}
    90%{opacity:1;}
  100%{opacity:1;}
}
.fadeOutIn {
  -webkit-animation-name: fadeOutIn;
  animation-name: fadeOutIn;
}
/* =======================================
	Styles of lightbox
======================================= */

    .lightboxOverlay {
    background-color:/*#498744*/#314839;/*色味変更のため次回注意*/
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=8);
    opacity: 0.9;
    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: #FFF;
}

.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;width:100%;} */
      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;width:100%;
    }

    _::-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;}*/
    }