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

/* =======================================
	2025.07  No.204
======================================= */

/*---Color---*/

.maincolor{
    background:#539D9C;
}

.bla{
    color:#000;
}
.tec_grn{
    color:#008E00;
}

/*---link---*/

a:link { text-decoration:none; color: #375270;transition:0.5s;}
a:visited { text-decoration:none; color: #375270;}
a:active { text-decoration:none; color: #375270;}
a:hover { text-decoration:underline; color: #539D9C;}

/* =======================================
	PC
======================================= */

/*---layout---*/
.wrapper{
    width:100%;
    min-height:100vh;
    margin:0 0;
}

.pages{
    width:100%;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    position:relative;
    text-align: left;
}

#sideArea{
    width:14%;
    position:relative;
    transition:0.4s;
    /*z-index:15;*/
    z-index:100;
}

#mainArea{
    width:86%;
    transition:0.4s;
}

/*---side--*/
#sideArea h1{
    width:10%;
    display:block;
    position:fixed;
    left:1.8%;
    top:125px;
    z-index:100;
    transition:0.2s;
}

#sideArea h1 #main_logo img{
    width:100%;
}

#sideArea h1 img#main_num{
    width:44%;
    margin:1em 0 0 28%;
}

#sideArea img#sp_menu{
    display:none;
}

#sideArea h1 img#link_index{
    width:42%;
    margin:4em 30% 0 28%;
    transition:0.2s;
}

#sideArea h1 img#link_index:hover{
    opacity:0.5;
}

/*---pageNavi--*/

div.pageNavi{
    height:auto;
    position:fixed;
    top:420px;
    left:7%;
    margin-left:-5px;
    z-index:120;
    display:none;
    }  

div.pageNavi ul{
    height:20vh;
    margin:2.5em auto 0;
    position:relative;
    text-align: center;
}

div.pageNavi li{
    margin:0 auto 20px;
    text-align: center;
}

div.pageNavi div#nav-pre{
  width: 10px;
  height: 10px;
  border: 1px solid;
  margin:0 0 20px -1px;
  border-color: #565656 #565656 transparent transparent;
  transform: rotate(-45deg);
}

div.pageNavi div#nav-next{
  width: 10px;
  height: 10px;
  border: 1px solid;
  margin-left:-1px;
  border-color:  transparent transparent #565656 #565656;
  transform: rotate(-45deg);
}

div.pageNavi div#nav-next,
div.pageNavi div#nav-pre{
    transition:0.8s;
    cursor:pointer;
    display:none;
}

div.pageNavi div#nav-pre:hover{
    border-color:  #FFF #FFF transparent transparent;
}
div.pageNavi div#nav-next:hover{
    border-color:  transparent transparent #FFF #FFF;
}

div.pageNavi li a{
    display:block;
    background:#000;
    margin:0 auto;
    width:10px;
    height:10px;
    opacity:0.3;
    mix-blend-mode: multiply;
    transition:0.8s;
}

div.pageNavi li.current a{
    border-radius: 50%;
    background:#FFF;
    width:10px;
    height:10px;
    opacity:1;
}

div.pageNavi li a:hover{
    background:#FFF;
    opacity:1;
}

/*---Footer--*/

footer{
    width:100%;
    position:relative;
    padding:35px 0;
    text-align:center;
    background:#FFF;
    border-top:solid 1px #000;
    z-index:130;
}

footer copyright{
    /*width:21.5%;*/
    width:18%;
    margin:0.8em auto;
    display:inline-block;
}

footer copyright picture img{
    width:100%;
}

footer div.next{
    width:500px;
    height:auto;
    margin:0 auto 1.5em;
}

footer div.next a img{
    width:100%;
}

footer div.next a{
    transition:1s;
}

footer div.next a:hover{
    opacity:0.5;
}

/*---Smph Menu--*/
nav#sp_navi{
    display:none;
}


/* =======================================
	DISPLAY LARGE
======================================= */

@media screen and  (min-width:1400px){
    #sideArea{
    width:200px;
    position:relative;
}
    
#sideArea h1{
    width:160px;
    display:block;
    position:fixed;
    left:18px;
    top:125px;
}

#mainArea{
    width:calc(100% - 200px);
}
    
div.pageNavi{
    left:95px;
    }  
}

/* =======================================
	TABLET
======================================= */

@media screen and  (min-width:641px) and ( max-width:1024px) {
    
    #sideArea{
    width:2%;
    position:relative;
}
    
#sideArea #link_index{
    display:none;
}
    
#sideArea h1,div.pageNavi{
    opacity:0;
}

#mainArea{
    width:98%;
}   
}

/* =======================================
	SMPH
======================================= */

@media screen and (max-width: 640px) {
 
/*---layout---*/
.pages{
    width:100%;
    display:block;
    text-align: left;
    position:relative;
}
    
#sideArea{
    width:100%;
    position:fixed;
    text-align: center;
    padding:18px 0 15px;
    z-index:140;
}

#mainArea{
    width:100%;
    padding-top:80px;
}
    
/*---side--*/
    
#sideArea h1{
        position:relative;
        left:auto;
        top:auto;
    width:52%;
    margin:0 26% 0 22%;
    height:55px;
    background:url("../images/204/sp_header_l.png")no-repeat center;
    background-size:contain;
    }
#sideArea h1 #main_logo,
#sideArea h1 #main_num,
#sideArea h1 #link_index{
    display:none !important;
    }
    
#sideArea.scrld h1{
    width:76%;
    height:20px;
    margin:0 15% 0 9%;
    background:url("../images/204/sp_header.png")no-repeat center;
    background-size:contain;
}

#sideArea div#sp_menu{
    width:40px;
    height:40px;
    display:block;
    background:url("../images/parts/common/sp_nav_menu.png")no-repeat center;
    background-size:contain;
    position:absolute;
    right:12px;
    top:24px;
}

#sideArea.scrld div#sp_menu{
    width:25px;
    height:25px;
    display:block;
    background:url("../images/parts/common/sp_menu_line.png")no-repeat center;
    background-size:contain;
    position:absolute;
    right:10px;
    top:10px;
}

#sideArea div#sp_menu.active,
#sideArea.scrld div#sp_menu.active{
    background:url("../images/parts/common/nav_cls.png")no-repeat center;
    background-size:80% 80%;
    opacity:0.7;
    right:10px;
}
    
div.pageNavi{
        display:none;
    } 
    
    /*---Footer--*/

    footer{
        padding:15px 0;
    } 

    footer div.next{
        width:92%;
        height:auto;
        margin:0 auto 1.5em;
    }

    footer div.next a img{
        width:100%;
    }

    footer copyright{
        width:58%;
        margin:0.8em auto;
        display:inline-block;
    }

    /*Smph Menu*/
    nav#sp_navi{
        width:74%;
        height:100%;
        background:rgba(0,0,0,0.8);
        position:fixed;
        right:-74%;
        top:0;
        display:block;
        z-index:135;
        transition:1s;
    }

    nav#sp_navi.active{
        right:0;
    }

    nav#sp_navi ul{
        width:86%;
        margin:20vh auto 0;
        color:#FFF;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    nav#sp_navi.scrld ul{
        margin:12vh auto 0;
    }

    nav#sp_navi ul li{
        text-align: left;
        border-bottom:solid 1px #FFF;
        padding-bottom:0.5em;
        margin-bottom:0.5em;
        position:relative;
    }

    nav#sp_navi ul li a:link,
    nav#sp_navi ul li a:visited{
        width:100%;
        display: inline-block;
        color:#FFF;
        text-decoration: none;
    }

    nav#sp_navi ul li h3,
    nav#sp_navi ul li p,
    nav#sp_navi ul li span{
        font-family: "Helvetica Neue",Arial,
        "Hiragino Kaku Gothic ProN","Hiragino Sans",
        Meiryo,sans-serif;
        line-height:1.2em;
    }

    nav#sp_navi ul li h3{
        font-size:14px;
        margin:0 0 0.5em;
        letter-spacing: 0;
        -ms-writing-mode: horizontal-tb;
        -webkit-writing-mode: horizontal-tb;
        writing-mode:horizontal-tb;
        text-indent:0;
    }
    nav#sp_navi ul li p{
        font-size:13px;
        margin-bottom:0.5em;
        text-indent: 0;
        letter-spacing: 0;
        -ms-writing-mode: horizontal-tb;
	-webkit-writing-mode: horizontal-tb;
    writing-mode:horizontal-tb;
    }
    nav#sp_navi ul li p.num{
        position:absolute;
        right:0;
        bottom:0.5em;
        color:#539D9C;
        font-weight:bold;
        text-indent: 0;
        letter-spacing: 0;
    }

    nav#sp_navi ul li span{
        font-size:0.8em;
        letter-spacing: 0;
    }
}

/* =======================================
	PC INDEX
======================================= */

div#p00 #sideArea img#sp_main_num{
    display:none;
}
div#p00 .contArea{
    padding-bottom:3em;
    background:#FFF;
    overflow-x: hidden;
}
div#p00 #fvArea{
    width:100%;
    height:100vh;
}
div#p00 div#mainVidual{
    width:100%;
    height:88vh;
    background:url("../images/204/main_vd.jpg")no-repeat top;
    background-size:cover; 
    position:relative;
}
div#p00 div#mainVidual p.cap{
    position:absolute;
    right:1em;
    bottom:1em;
    color:#FFF;
    font-size:10px;
    font-weight:bold;
    text-shadow: 0px 0px 12px #000000;
    /*background:rgba(241,239,237,0.8);
    box-shadow: 0px 0px 12px #000000;*/
}
div#p00 div#mainVidual img.tag{
    width:40.5%;
    max-width:480px;
    position:absolute;
    left:0;
    bottom:5%;
}
div#p00 div.whArea{
    width:100%;
    height:12vh;
    background:#FFF;
    text-align: center;
}
div#p00 div.whArea > p{
    font-size:14px;
    letter-spacing:0.1em;
    line-height:1.3em;
    font-family: "A1 Mincho";
    text-align:center;
    display:block;
    margin:1vh auto 0;
    }

div#p00 div.whArea > p span{
    display:inline-block;
}

div#p00 div.whArea a.btn{
    display:block;
    width:70%;
    max-width:1200px;
    min-width:450px;
    color:#000;
    background:#539D9C;
    position:relative;
    margin:1vh auto 3vh;
    padding:0.5em 0;
}

div#p00 div.whArea a.btn:hover{
    text-decoration:none;
    opacity:0.5;
}

div#p00 div.whArea a.btn p{
    margin:0 auto;
    font-size:13px;
    font-family: "Shuei KakuGo Gin B";
    text-align:center;
}
div#p00 div.whArea a.btn p>span{
    font-size:14px;
    font-family: "Shuei KakuGo Gin M";
}

div#p00 div.whArea a.btn p>span.spdn{
    display:inline;
}

div#p00 div.whArea a.btn img{
    display:inline-block;
    height:1.4vh;
    width:auto;
    padding:1.3vh 20px;
    /*image-rendering: -webkit-optimize-contrast;*/
    image-rendering:auto;
    vertical-align: middle;
}

div#p00 div.indexArea{
    width:70%;
    max-width:1200px;
    margin:0 auto;
    text-align: center;
}

div#p00 div.indexArea h2{
    width:9%;
    margin:1em auto 2em;
}
div#p00 div.indexArea .summary{
    width:100%;
    min-height:200px;
    margin-bottom:5em;
    position:relative;
    border-left:solid 8px #539D9C;
    transition:0;
}

div#p00 div.indexArea .summary.cs{
    min-height:auto;
}

div#p00 div.indexArea .summary p img.cs{
    width:170px;
}

div#p00 div.indexArea .summary > div#cs{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

div#p00 div.indexArea .summary a:link,
div#p00 div.indexArea .summary a:visited,
div#p00 div.indexArea .summary a:hover{
    display:block;
    width:58%;
    margin-left:2em;
    text-align: left;
    text-decoration: none;
    color:#000;
    opacity:1;
}

div#p00 div.indexArea .summary span{
    display:inline-block;
    font-size:100%;
}

div#p00 div.indexArea .summary h6{
    font-size:14px;
    height:1.5em;
    margin-bottom:1.5em;
    position:relative;
}

div#p00 div.indexArea .summary h4{
    font-size:15px;
    font-family: "A1 Mincho";
    font-weight:bold;
    letter-spacing:0.1em;
    margin-bottom:0.5em;
}
div#p00 div.indexArea .summary h5{
    font-size:14px;
    font-family: "A1 Mincho";
    margin-bottom:0.5em;
}

div#p00 div.indexArea .summary h3{
    font-size:25px;
    line-height:1.2em;
    font-family: "A1 Mincho";
    font-weight:bold;
    letter-spacing:0.1em;
    margin-bottom:0.8em;
}
div#p00 div.indexArea div#sp1 .summary h3,
div#p00 div.indexArea div#sp2 .summary h3,
div#p00 div.indexArea div#tech .summary h3{
    letter-spacing:0.2em;
}

div#p00 div.indexArea .summary h3.txt-s{
    font-size:22px;
    letter-spacing:0.05;
}
div#p00 div.indexArea .summary h3 span.sub{
    font-size:16px;
    font-weight:bold;
    display:block;
    letter-spacing: 0.1em;
}
div#p00 div.indexArea .summary p{
    font-size:14px;
    line-height:1.65em;
    font-family: "Shuei KakuGo Gin M";
    margin-bottom:0;
    clear:both;
}

.summary a div.btn{
    display:inline-block;
    color:#000;
    padding:0.8em 3em;
    line-height:1em;
    font-size:0.8em;
    font-family: "Shuei KakuGo Gin M";
    position:relative;
    margin:1.5em 0 0;
    transition:1s;
}

.summary a div.btn:hover{
    opacity:0.5;
}

div#p00 div.indexArea .summary h6 > img{
    width:auto;
    height:100%;
}

.summary#p08 a div{
    margin:3em 0 0;
}

div#p00 div.indexArea .summary .thumbnail{
    width:35%;
    display:block;
    max-width:350px;
    position:absolute;
    right:0;
    bottom:3.5em;
}

a#owner_info img{
    width:100%;
}

div#p00 div#sp2 .summary a#owner_info:hover{
    opacity:0.5;
}

div#p00 div#tech .summary .thumbnail{
   position:absolute;
    right:0;
    /*top:0.8em;*/
    top:-1.5em;
}

picture.thumbnail img{
    width:100%;
}

div.indexArea .summary img.thumb_s{
    width:25%;
    float:left;
    margin-right:1em;
    margin-bottom:1em;
}

div#p00 div.contArea div.indexArea ul{
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    justify-content: space-between;
    /*flex-direction:row-reverse;*/
}

div#p00 div.contArea div.indexArea ul li{
    width:31%;
    border-left:solid 8px #539D9C;
}

div#p00 div.contArea div.indexArea ul li.summary{
    min-height:auto;
}

div#p00 div.indexArea ul li.summary a:link,
div#p00 div.indexArea ul li.summary a:hover{
    width:85%;
}

div#p00 div.contArea div.indexArea ul::after {
        content: "";
        display: block;
        width: 32%;
        height: 0;
    }

div#p00 div.indexArea ul li#p08 h3{
    letter-spacing: 0.05;
}

div#p00 p>span.txt-s {
    font-size:80% !important;
}

@media screen and ( max-width:1400px) {
    div#p00 div.contArea div.indexArea ul li{
    width:48%;
    }
}


/* =======================================
	TABLET INDEX
======================================= */
@media screen and  (min-width:641px) and ( max-width:1024px) {
        div#p00 div#mainVidual{
                    background:url("../images/204/main_vd.jpg")no-repeat center top;
                    background-size:cover; 
    }
        div#p00 div.indexArea{
        width:90%;
    }
    
}
/* =======================================
	SMPH INDEX
======================================= */
@media screen and (max-width: 640px) {

            div#p00 #sideArea{
                padding:15px 0 0;
                height:calc(100vw*0.35);
                background:#539D9C center;
                background-size: 80% auto;
                transform-origin: bottom center 0;
            }
    
div#p00 #sideArea.maincolor.scrld{
                height:5vh;
                background:#539D9C url("../images/204/sp_header.png") no-repeat center;
    background-size: 80% auto;
    }

    div#p00 #sideArea h1{
                width:42%;
                margin:0 auto;
                padding:0;
                position:relative;
                background:none;
                display:block;
                left:auto;
                top:auto;
                transition:2s;
            }
    div#p00 #sideArea h1 picture#main_logo{
        display:block!important;
        width:100%;
    }
            
            div#p00 #sideArea img#sp_main_num{
            width:17%;
            display:block;
            position:absolute;
            left:41.5%;
            top:calc(100vw*0.3);
            z-index:0;
                transition:2s;
            }
            div#p00 #sideArea.scrld h1,
            div#p00 #sideArea.scrld #sp_main_num{
                display:none;
            }
    
            div#p00 #mainArea{
                width:100%;
                padding-top:calc(100vw*0.35);
                background:#539D9C;
            }  

            div#p00 #fvArea{
                width:100%;
                /*height:85vh;*/
                height:auto;
            }
            div#p00 div#mainVidual{
                width:100%;
                /*height:85vh;*/
                height:calc(100vw*1.45);
                background:url("../images/204/sp_main_vd.jpg")no-repeat center bottom;
                background-size:cover; 
                position:relative;
            }
            div#p00 div#mainVidual p.cap{
                font-size:9px;
                right:0.5em;
                bottom:0.8em;
            }
            div#p00 div#mainVidual img.tag{
                width:100%;
                max-width:auto;
                left:0;
                bottom:5%;
            }
            div#p00 div.whArea{
                width:100%;
                background:#FFF;
                text-align: center;
            }
    
            div#p00 div.whArea > p{
            margin:1.5em auto;
            }
    
            div#p00 div.whArea a.btn{
                display:block;
                width:90%;
                height:auto;
                max-width:auto;
                min-width:auto;
                color:#000;
                background:#539D9C;
                position:relative;
                padding:1em 0 0.8em;
                margin:0.5em auto 1.5em;
            }

        div#p00 div.whArea a.btn p{
            font-size:13px;
            line-height:1.6em;
            letter-spacing:0.05em;
            font-family: "Shuei KakuGo Gin B";
            text-align:center;
        }
    
    div#p00 div.whArea a.btn p>span.spdn{
    display:none;
}

        div#p00 div.whArea a.btn img{
            display:inline-block;
            height:1em;
            width:auto;
            padding:0 20px;
            image-rendering: -webkit-optimize-contrast;
            vertical-align: middle;
        }

        div#p00 div.indexArea{
            width:90%;
            max-width:auto;
            margin:0 auto;
            padding-top:3em;
            text-align: center;
        }

        div#p00 div.indexArea h2{
            width:25%;
            margin:2em auto 2em;
        }
        div#p00 div.indexArea .summary{
            width:100%;
            display:block;
            min-height:200px;
            margin-bottom:3.5em;
            position:relative;
            border-left:solid 8px #539D9C;
            transition:0;
        }

        div#p00 div.indexArea .summary a:link,
        div#p00 div.indexArea .summary a:hover{
            display:block;
            width:85%;
            margin-left:2em;
            text-align: left;
            text-decoration: none;
            color:#000;
            opacity:1;
        }

        div#p00 div.indexArea .summary h6{
            font-size:12px;
            height:1.5em;
            margin-bottom:1.5em;
            position:relative;
        }

        div#p00 div.indexArea .summary h4{
            font-size:16px;
            font-family: "A1 Mincho";
            margin-bottom:0.8em;
        }
        div#p00 div.indexArea .summary h3{
            font-size:23px;
            line-height:1.4em;
            font-family: "A1 Mincho";
            margin-bottom:0.5em;
        }
        div#p00 div.indexArea .summary h3 span.sub{
            font-size:18px;
            display:block;
        }
        div#p00 div.indexArea .summary p{
            font-size:14px;
            line-height:1.65em;
            font-family: "Shuei KakuGo Gin M";
            margin-bottom:0;
            width:100%;
            
        }
    
        .summary#p08 a div{
            margin:1.5em 0 0;
        }
    
        div#p00 div.indexArea .summary h6 > img{
            width:auto;
            height:100%;
        }

        div#p00 div.indexArea .summary .thumbnail{
            width:calc(100% + 2.8em);
            max-width:auto;
            margin-bottom:1em;
            position:relative;
            right:auto;
            left:-2em;
            top:auto;
            bottom:auto;
        }
    
        div#p00 div#sp2 .summary a#owner_info{
            width:80%;
            max-width:auto;
            position:absolute;
            left:0;
            bottom:0;
            trasition:0;
        }

        a#owner_info img{
            width:100%;
        }

        div#p00 div#sp2 .summary a#owner_info:hover{
            opacity:none;
        }

        div#p00 div#sp2 .btn{
            /*margin-bottom:110px;*/
        }
        div#p00 div#sp2 .summary .thumbnail{
            position:relative;
            right:auto;
            bottom:auto;
            top:auto;
        }

        div#p00 div#tech .summary .thumbnail{
            position:relative;
            right:auto;
            top:0;
            overflow-x: hidden;
        }
        div#p00 div#tech .summary .thumbnail img{
            /*width:80%;
            margin-left:10%;*/
        }

        div#p00 div.contArea div.indexArea ul{
            display:block;
        }

        div#p00 div.contArea div.indexArea ul li{
            width:100%;
            min-height:auto;
            border-left:solid 8px #539D9C;
        }

        div#p00 div.indexArea ul li.summary a:link,
        div#p00 div.indexArea ul li.summary a:hover{
            width:85%;
        }

        div#p00 div.contArea div.indexArea ul::after {
                content: "";
                display: block;
                width: 31%;
                height: 0;
            }
 
}

/* =======================================
	PAGE NAVI (add 2025.aug)
======================================= */

#sideArea{
    z-index:100;

}

#sideArea h1{
    z-index:100;
}

#sideArea h1 span#btn_index{
    width:36%;
    display:block;
    height:auto;
    margin:3em 33% 0 31%;
    cursor:pointer;
    transition:0.2s;
    background:none;
}

#sideArea h1 span#btn_index.active{
    background: url("../images/parts/common/btn_cls.png") no-repeat top;
    background-size:contain; 
}

#sideArea h1 span#btn_index:hover{
    opacity:0.5;
}

#sideArea h1 span#btn_index img{
    width:100%;
}

#sideArea h1 span#btn_index.active img{
    opacity:0;
}

nav#sp_navi{
    width:50%;
    height:100%;
    background:rgba(255,255,255,0.9);
    position:fixed;
    left:0;
    top:0;
    display:block;
    /*display:none;*/
    z-index:12;
    transition:1.2s;
    transform-origin: left top;
    -webkit-transform: translateX(-100%); 
    transform: translateX(-100%);
    opacity:0.5;
}

nav#sp_navi.active{
    -webkit-transform: none; 
    transform: none;
    opacity:1;
}

div.list_wrap{
    margin-left:28%;
    height:100vh;
    position:relative;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

nav#sp_navi >div.list_wrap ul{
    padding:1.5em 0;
    text-align:center;
    transition:1s;
    margin:0 auto 0;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%);
}

nav#sp_navi >div.list_wrap ul.overflow{
    top: 0;
    left: 0;
    -webkit-transform:none; 
    transform:none;
}

nav#sp_navi >div.list_wrap ul li{
    width:90%;
    margin:0 auto;
    padding:0.5vh 0;
    border-bottom:solid 1px #4F4F4F;
    transition:1s;
}

nav#sp_navi >div.list_wrap ul li:first-child{
    border-top:solid 1px #4F4F4F;
}

nav#sp_navi >div.list_wrap ul li img.menu{
    width:99%;
    margin-left:1%;
}

nav#sp_navi img.btn{
    width:44%;
    margin:3em auto 0;
    transition:0.5s;
}

nav#sp_navi >div.list_wrap ul li:hover{
    background:#F2F2F2;
}

nav#sp_navi img.btn:hover{
    opacity:0.5;
}
footer{
    z-index:10;
}

div#sidecover{
    width:14%;
    height:100vh;
    position:fixed;
    left:0;
    bottom:0;
    transition:0.4s;
    z-index:20;
}

footer{
    width:86%;
    margin-left:14%;
    transition:0.4s;
}

footer copyright{
    min-width:300px;
}

footer div#fbnr{
    width:200px;
    position:fixed;
    right:10px;
    bottom:10px;
    display:none;
}

footer div#fbnr > span{
    display:block;
    width:100%;
    height:100%;
    position:relative;
}

footer div#fbnr picture img{
    width:100%;
}

footer div#fbnr img#fbnr_cls{
    width:10%;
    display:block;
    position:absolute;
    right:5px;
    top:5px;
}

/*pagenavi z-index:120*/

#sideArea h1{
    z-index:135;
}

@media screen and  (min-width:1400px){
    #sideArea{
    width:200px;
    position:relative;
}
    nav#sp_navi{
    width:calc(200px + 30%);
    max-width:900px;
    }
    div.list_wrap{
    margin-left:200px;
}
    
div#sidecover{
        width:200px;    
    }
    
footer{
    width:calc(100% - 200px);
    margin-left:200px;
}
    
    
}

@media screen and  (min-width:641px) and ( max-width:1024px) {
    div.list_wrap{
    margin-left:3%;
}
    
    nav#sp_navi img.btn:hover{
    opacity:1;
}
    
    div#sidecover{
        width:2%;
    }
    
  footer{
    width:98%;
    margin-left:2%;
    padding-bottom:130px;
}  
    
    footer div#fbnr{
    width:36%;
    position:fixed;
    right:0;
    left:32%;    
    bottom:10px;
    display:none;
}
    
    footer div#fbnr picture img{
        width:100%;
    }
    
    footer div#fbnr img#fbnr_cls{
    width:5%;
    right:3px;
    top:3px;
    }

}

@media screen and (max-width: 640px) {
    
    nav#sp_navi{
    width:100%;
    height:auto;
    background:rgba(255,255,255,0.95);
    position:fixed;
    left:0;
    top:0;
    z-index:10;
    transition:1s;
    box-shadow: 1px 0 5px 1px #ccc;
    display:block;
    transform-origin: center top;
    -webkit-transform: translatey(-100%); 
    transform: translatey(-100%);
}
    
    #sideArea div#sp_menu{
    width:40px;
    height:40px;
    display:block;
    background:url("../images/parts/common/sp_menu_line.png")no-repeat center;
    background-size:contain;
    position:absolute;
    right:12px;
    top:24px;
}
    
    nav#sp_navi.active{
    -webkit-transform: translatey(0%); 
    transform: translatey(0%);
    }
    
    div.list_wrap{
    margin-left:0;
    height:auto;
}

nav#sp_navi >div.list_wrap ul{
    width:96%;
    margin:80px auto 0;
    padding:1em 0 3em;
    text-align:center;
    transition:1s;
    position:relative;
    left:0;
    top:0;
    transform:none;
}
    

nav#sp_navi >div.list_wrap ul li{
    margin:0 auto;
    padding:0;
    border-bottom:solid 1px #4F4F4F;
    transition:1s;
}
    nav#sp_navi >div.list_wrap ul li:first-child{
    border-top:none;
}
    
    nav#sp_navi img.btn{
    width:60%;
    }
    
    div#sidecover{
        display:none;
    }
    
    #sideArea h1 span#btn_index{
            display:none;
    }
    
    footer{
    width:100%;
    margin-left:0;
    padding-bottom:100px;
    transition:0.4s;
}
    
    footer copyright{
    min-width:auto;
}

    footer div#fbnr{
    width:65%;
    position:fixed;
    right:auto;
    /*left:15px;*/
    left:17.5%;
    bottom:1.5vh;
    display:none;
        transition:0.8s;
}
    
    footer div#fbnr.left{
    position:fixed;
    right:auto;
    left:10px;
}
    
     footer div#fbnr img#fbnr_cls{
    width:7%;
    right:0;
    top:0;
    }
    
}


/* =======================================
	HACK
======================================= */

/*for Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-color-index:0) {
      p,h1,h2,h3,h4,h5,h6{word-break: break-all;}
      span.dir_s{-webkit-text-orientation:mixed;}
}
_::-webkit-full-page-media, _:future, :root p,h1,h2,h3,h4,h5,h6{
    word-break: break-all;
}
_::-webkit-full-page-media, _:future, :root span.dir_s{
    -webkit-text-orientation:mixed;
}

/*for Firefox*/
@-moz-document url-prefix() {
      /*for smph;*/
      @media screen and (max-width: 640px) {
          wbr.ff{display:block;}
      }
}