@charset 'UTF-8';
@import url("../../css/default.css");
@import url("../../css/search.css");
@import url("../../css/menu_rspv.css");
@import url("styles.css");
@import url("header_sp.css");

@import url("print.css") print;


/* common_rspv.css
---------------------------------------------------- */

/* for Responsive
==============================================================================
	Screen
		950px-
		641px-949px
		-640px
		sp navigation 2017/10
============================================================================== */

body {
}


/* content */
#content {
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
}
#content a {
    color: #e94609;
}


/* new header */
#navHeader {
    position:relative;
    width:950px;
    margin:0 auto;
    padding:48px 0 0;
}
#navHeader h1 {
    display:none;
}


/* main navigation */
ul#mainNav {
    margin:0 0 0 1px;
}
ul#mainNav li {
    float:left;
    margin:0 1px 0 0;
    zoom:1;
}
ul#mainNav li:hover {
    position:relative;
}
ul#mainNav li a.level1 {
    display:block;
    width:157px;
    height:59px;
    text-indent:-9999px;
}

ul#mainNav li a.nav01 { background:url("../../images/repsonsive/nav/nav01.png") no-repeat 0 0; }
ul#mainNav li a.nav02 { background:url("../../images/repsonsive/nav/nav02.png") no-repeat 0 0; }
ul#mainNav li a.nav03 { background:url("../../images/repsonsive/nav/nav03.png") no-repeat 0 0; }
ul#mainNav li a.nav04 { background:url("../../images/repsonsive/nav/nav04.png") no-repeat 0 0; }
ul#mainNav li a.nav05 { background:url("../../images/repsonsive/nav/nav05.png") no-repeat 0 0; }
ul#mainNav li a.nav06 { background:url("../../images/repsonsive/nav/nav06.png") no-repeat 0 0; }
ul#mainNav li a.nav01:hover { background:url("../../images/repsonsive/nav/nav01_o.png") no-repeat 0 0; }
ul#mainNav li a.nav02:hover { background:url("../../images/repsonsive/nav/nav02_o.png") no-repeat 0 0; }
ul#mainNav li a.nav03:hover { background:url("../../images/repsonsive/nav/nav03_o.png") no-repeat 0 0; }
ul#mainNav li a.nav04:hover { background:url("../../images/repsonsive/nav/nav04_o.png") no-repeat 0 0; }
ul#mainNav li a.nav05:hover { background:url("../../images/repsonsive/nav/nav05_o.png") no-repeat 0 0; }
ul#mainNav li a.nav06:hover { background:url("../../images/repsonsive/nav/nav06_o.png") no-repeat 0 0; }
ul#mainNav li a.nav07 { display:none; }


ul#mainNav li ul {
    visibility:hidden;
    position:absolute;
    top:100%;
    left:0;
    width:141px;
    background:#ffffff;
    padding:7px;
    border-left:1px solid #dc5631;
    border-right:1px solid #dc5631;
    border-bottom:1px solid #dc5631;
    z-index:200;
}
ul#mainNav li ul li {
    float:none;
    margin:0 0 0.5em;
    text-align:left;
}
ul#mainNav li ul li a {
    display:inline-block;
    width:100%;
    background:url("../../images/repsonsive/arrow.png") no-repeat 0 center;
    padding:0 0 0 12px;
    font-size:108%;
    color:#333333;
}
ul#mainNav li ul li.line2 a {
    background:url("../../images/repsonsive/arrow.png") no-repeat 0 3px;
}
ul#mainNav li ul li a.sub {
    background:url("../../images/repsonsive/dot.png") no-repeat 2px center;
}


/* pankuzu */
#pankuzu{
    position:absolute;
    top:12px;
    left:0;
    margin-bottom:8px;
    text-align:left;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
    font-size:10px;
    z-index:1;
}

/* sns buttons */
ul#sns_top {
    position:absolute;
    top:0;
    right:0;
    height:auto;
    margin-bottom:8px;
    padding-top:12px;
    letter-spacing:-0.5em;
}
ul#sns_top li {
    display:inline-block;
    margin-left:5px;
    vertical-align:top;
    letter-spacing:normal;
}
.fb-like iframe {
    z-index:9999;
}


/* new footer */
#navFooter {
    width:100%;
    background:#ececec;
    margin:0 auto 30px;
}
#navFooterInner {
    width:950px;
    margin:0 auto;
    padding:30px 0;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
    text-align:left;
    font-size:12px;
}

#navFooterInner div {
    float:left;
    width:220px;
    margin:0 8px;
}

#navFooterInner a:link    { color:#000000;text-decoration:none; }
#navFooterInner a:visited { color:#000000;text-decoration:none; }
#navFooterInner a:hover   { color:#1a1a1a;text-decoration:underline; }
#navFooterInner a:active  { color:#1a1a1a;text-decoration:underline; }

#navFooterInner h5 {
    background:url("../../images/repsonsive/arrow.png") no-repeat 0 center;
    margin:0 0 0.5em;
    padding:0 0 0 12px;
    font-size:14px;
}
#navFooterInner h6 {
    margin:0 0 0.5em;
    font-weight:bold;
    font-size:12px;
}
#navFooterInner ul {
    margin:0 0 1em 1em;
}
#navFooterInner ul li {
    margin:0 0 0.5em;
    text-indent:-12px;
}
#navFooterInner ul li:first-letter {
    background:url("../../images/repsonsive/dot.png") no-repeat 2px center;
    padding:0 0 0 12px;
}


.pagetop_sp,.pagetop_sp a {
    display:none;
}



/* screen -949px */
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 949px) {

body {
    width:100%;
    background:none;
    margin:0;
    padding:0;
    font-size:84%;
    -webkit-text-size-adjust:100%;
}


/* wrapper */
#wrapper {
    width:100%;
    margin:0;
    padding:0;
}

/* content */
#content {
    width:100%;
    font-size:16px;
}
#content img {
    width:100%;
    height:auto;
}


/* new header */
#navHeader {
    position:relative;
    width:100%;
    margin:0 0 2%;
    padding:30px 0 0;
}
#navHeader h1 {
    display:none;
}

/* pankuzu */
#pankuzu{
    left:1%;
    max-width:65%;
}
/* sns buttons */
ul#sns_top {
    right:1%;
    padding-top:16px;
}


/* main navigation */
ul#mainNav {
    width:98%;
    margin:0 auto 4%;
    text-align:center;
}
ul#mainNav li {
    float:left;
    width:16.15%;
    height:auto;
    margin:0 0.5% 0 0;
    zoom:1;
}
ul#mainNav li:hover {
    position:relative;
}
ul#mainNav li a.level1 {
    width:100%;
    background-size:contain;
    background-color:#d95332;
}
ul#mainNav li a.level1:hover {
    background-size:contain;
    background-color:#d95332;
}

ul#mainNav li ul {
    top:100%;
    left:0;
    width:160px;
    background:#ffffff;
    padding:7px;
    border-left:1px solid #dc5631;
    border-right:1px solid #dc5631;
    border-bottom:1px solid #dc5631;
    z-index:200;
}
ul#mainNav li ul li a {
    display:inline-block;
    width:160px;
    background:url("../../images/repsonsive/arrow.png") no-repeat 0 center;
    padding:0 0 0 12px;
    font-size:108%;
    color:#333333;
}



/* new footer */
#navFooter {
}
#navFooterInner {
    width:92%;
    margin:0 4%;
}

#navFooterInner div {
    float:left;
    width:42%;
    margin:0 2% 2%;
}


/* page top */
.pagetop_sp {
    display:none;
    position:fixed;
    bottom:2%;
    right:2%;
}
.pagetop_sp a {
	display:block;
	width:48px;
	height:48px;
	background:url("../../images/repsonsive/sp/up.png") no-repeat 0 0;
	background-size:80% auto;
	font-size:0.1em;
	text-decoration:none;
	text-indent:-9999px;
}

}
/*-------------------------------------------------------------------------------------------*/
/* /screen 641px-949px */




/* screen -640px */
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 640px) {

/* display none */
.header,#header,#navFooter {
    display:none;
}

body {
    width:100%;
    background:none;
    margin:0;
    padding:0;
    font-size:84%;
    -webkit-text-size-adjust:100%;
}

/* wrapper */
#wrapper {
    
}

/* content */
#content {
    width:100%;
    margin:0;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
    text-align:center;
    font-size:16px;
}
#content img {
    width:100%;
    height:auto;
}


/* new header */
#navHeader {
    position:relative;
    width:100%;
    height:auto;
    margin:0 0 2%;
    padding:0;
}

/* main navigation */
ul#mainNav {
    display:none;
}


/* pankuzu */
#pankuzu{
    position:static;
    /* width:100%; */
    max-width:100%;
    height:auto;
    margin:0 3% 5px;
}

/* sns buttons */
ul#sns_top {
    position:static;
    width:98%;
    height:auto;
    margin:0 1% 5px;
    padding-top:0;
    text-align:right;
}


/* footer style **********************************************************/
/* base css /css/menu.css */
#footer {
    overflow:hidden;
    width:100%;
    margin:0 auto;
    padding-bottom:0;
    background:none;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
    text-align:center;
}
/*#footer {
    width:100%;
    margin:0 auto;
    padding-bottom:0;
    background:none;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
    text-align:center;
}*/
.footer {
    width:100%;
    background:none;
    margin:0 auto;
    padding:0;
    text-align:left;
}

/**/
.footer_left{
    float:none;
    width:100%;
    margin:0;
    padding:0;
}

.footer_right{
    float:none;
    width:100%;
    margin:0;
    padding:0;
}

.copyright {
    display:block;
    width:100%;
    height:28px;
    background:none;
    margin:0;
    padding:0;
    text-align:center;
    font-size:10px;
    text-decoration:none;
    text-indent:0;
    line-height:2.4;
}

.footer_left ul {
    float:none;
    width:100%;
    margin:0 0 20px;
    padding:0;
    border-top:1px solid #ef8100;
}
.footer_left ul li {
    display:block;
    margin:0;
    padding:0 5%;
    border-bottom:1px solid #ef8100;
}
.footer_left ul li a {
    float:none;
    display:block;
    height:auto;
    background:url("../../images/repsonsive/sp/arrow.png") no-repeat 0 center;
    margin:0;
    padding:8px 0 8px 12px;
    font-size:14px;
    text-decoration:none;
    text-indent:0;
}

/* 180401update */
.footer ul li.footer01 a, .footer ul li.footer01 a:visited {display:none;}
.footer ul li.footer02 a, .footer ul li.footer02 a:visited {background:url("../../images/repsonsive/sp/arrow.png") no-repeat 0 center; background-size:6px auto; width:100%;}
.footer ul li.footer03 a, .footer ul li.footer03 a:visited {background:url("../../images/repsonsive/sp/arrow.png") no-repeat 0 center; background-size:6px auto; width:100%;}
.footer ul li.footer04 a, .footer ul li.footer04 a:visited {display:none;}
.footer ul li.footer05 a, .footer ul li.footer05 a:visited {background:url("../../images/repsonsive/sp/arrow.png") no-repeat 0 center; background-size:6px auto; width:100%;}
.footer ul li.footer06 a, .footer ul li.footer06 a:visited {background:url("../../images/repsonsive/sp/arrow.png") no-repeat 0 center; background-size:6px auto; width:100%;}

.footer ul li.footer01 a:hover {display:none;}
.footer ul li.footer02 a:hover {background:url("../../images/repsonsive/sp/arrow.png") no-repeat 0 center !important; background-size:6px auto!important; width:100%;}
.footer ul li.footer03 a:hover {background:url("../../images/repsonsive/sp/arrow.png") no-repeat 0 center !important; background-size:6px auto!important; width:100%;}
.footer ul li.footer04 a:hover {display:none;}
.footer ul li.footer05 a:hover {background:url("../../images/repsonsive/sp/arrow.png") no-repeat 0 center !important; background-size:6px auto!important; width:100%;}
.footer ul li.footer06 a:hover {background:url("../../images/repsonsive/sp/arrow.png") no-repeat 0 center !important; background-size:6px auto!important; width:100%;}

/*.footer ul li.footer03 {display:none;}*/

#footer .pagetop {display:none;}

/* end of footer style ***************************************************/


/* page top */
.pagetop_sp {
    display:none;
    position:fixed;
    bottom:0;
    right:0;
}
.pagetop_sp a {
	display:block;
	width:60px;
	height:60px;
	background:url("../../images/repsonsive/sp/up.png") no-repeat 0 0;
	background-size:80% auto;
	font-size:0.1em;
	text-decoration:none;
	text-indent:-9999px;
}

}
/*-------------------------------------------------------------------------------------------*/
/* /screen -640px */





/*-------------------------------------------------------------------------------------------*/
/* sp navigation 2017/10 */
/*-------------------------------------------------------------------------------------------*/
/* display none */
#responsiveHead {display:none;}
#reponsiveNav {display:none;}


/* - 640px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 640px) {


html {
    overflow-x:hidden;
}
body {
    position:relative;
    overflow-x:hidden;
}



/* responsive navigation */
#responsiveHead {
    display:block;
    position:relative;
    width:100%;
    text-align:left;
}


#reponsiveNav {
    display:block;
    position:fixed;
    top:0;
    right:0;
    width:0;
    height:calc(100% - 60px);
    /*background:#e94709;*/
    z-index:99999;
    -moz-transform:translate3d(100%, 0, 0);
    -webkit-transform:translate3d(100%, 0, 0);
    transform:translate3d(100%, 0, 0);
    -moz-transition: .2s;
    -webkit-transition: .2s;
    transition: .2s;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
    font-size:14px;
    color:#ffffff;
    -webkit-overflow-scrolling:touch;
    -webkit-text-size-adjust:100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

/* slide left */
#reponsiveNav.open {
    width:100%;
    -moz-transform:translate3d(0, 0, 0);
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
}


#reponsiveNav a:link {color:#ffffff;text-decoration:none;}
#reponsiveNav a:visited {color:#ffffff;text-decoration:none;}
#reponsiveNav a:hover{color:#ffffff;text-decoration:none;}

#reponsiveNav {
}


nav#navInner {
    overflow-x:hidden;
    overflow-y:scroll;
    position:relative;
    height:100%;
    min-height:100%;
    background:#e94709;
    line-height:1.8;
    -webkit-overflow-scrolling:touch;
}
nav#navInner .nav-child {
    position:absolute;
    top:0;
    left:100%;
    width:100%;
    height:100%;
    background:#e94709;
    -moz-transition:left .3s;
    -webkit-transition:left .3s;
    transition:left .3s;
    -webkit-overflow-scrolling:touch;
    -webkit-text-size-adjust:100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
nav#navInner .nav-child.nav-active {
    left:0;
}

nav#navInner .nav-child ul {
    background:#e94709;
    padding-bottom:4em;
}

nav#navInner a.nav-parent:hover,
ul#reponsiveNavMain li.nav-back a:hover {
    cursor:pointer;
}
ul#reponsiveNavMain li.nav-back a {
    background:url("../../images/repsonsive/sp/icon_prev.png") no-repeat 15px center;
    background-size:auto 16px;
}


ul#reponsiveNavMain {
    padding-bottom:5rem;
    line-height:1.8;
}
ul#reponsiveNavMain li {
    text-align:left;
    font-weight:normal;
}
ul#reponsiveNavMain li a {
    display:block;
    border-bottom:1px solid #ebebeb;
}
ul#reponsiveNavMain li p.open a {
}

ul#reponsiveNavMain li a.home {
    background:url("../../images/repsonsive/sp/icon_home.png") no-repeat 15px center;
    background-size:auto 16px;
}
ul#reponsiveNavMain li a.nav-parent {
    background:url("../../images/repsonsive/sp/icon_next.png") no-repeat 92% center;
    background-size:auto 16px;
}

ul#reponsiveNavMain .sub-title {
    border-bottom:1px solid #ebebeb;
    font-weight:bold;
}


ul#reponsiveNavMain li ul li {
    font-weight:normal;
}
ul#reponsiveNavMain li ul li a {
}

ul#reponsiveNavMain li ul li.line2 a {
    line-height:1.4;
}


/* open head */
#reponsiveNav .nav_head {
    display:block;
    position:relative;
    width:100%;
    height:60px;
    background:none;
}

ul#reponsiveNavMain li a,
ul#reponsiveNavMain li.nav-back a,
ul#reponsiveNavMain li a.home,
ul#reponsiveNavMain li a.nav-parent,
ul#reponsiveNavMain .sub-title {
    padding:.5rem 0 .5rem 40px;
}
ul#reponsiveNavMain li ul li a,
ul#reponsiveNavMain li ul li.line2 a {
    padding:.5rem 0 .5rem 50px;
}


/* button */
.nav_close,
.nav_open {
    float:right;
    position:relative;
    width:12%;
    height:60px;
    text-align:center;
}
.nav_close {
    background:#e94709;
}
.nav_open {
    background:#ffffff;
}



button#close,
button#open {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    background:none;
    margin:0 auto;
    padding:0;
    cursor:pointer;
    outline:0;
    border:0;
    font-size:0;
    line-height:0;
}

button#close img,
button#open img {
    width:65%;
}


/* not scroll */
.scroll {
    position:fixed;
    width:100%;
    height:100%;
}



}
/* - 640px end */





/* - 480px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 480px) {


.nav_close,
.nav_open {
    width:18%;
}

button#close img,
button#open img {
    width:60%;
}



}
/* - 480px end */

@media only screen and (max-width: 375px) {
  .nav_close,
  .nav_open {
    width: 17%; }

  button#close img,
  button#open img {
    width: 60%; }
}
/* - 375px end */



/* - 320px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 320px) {

nav#navInner {
    
}

.nav_close,
.nav_open,
#reponsiveNav .nav_head {
    height: 50px; }

#reponsiveNav {
    height:calc(100% - 50px);
}

ul#reponsiveNavMain li a,
ul#reponsiveNavMain li.nav-back a,
ul#reponsiveNavMain li a.home,
ul#reponsiveNavMain li a.nav-parent,
ul#reponsiveNavMain .sub-title {
    padding:.4rem 0 .4rem 40px;
}
ul#reponsiveNavMain li ul li a,
ul#reponsiveNavMain li ul li.line2 a {
    padding:.4rem 0 .4rem 50px;
}


}
/* - 320px end */



