/*************************************************************************************************************** LAYOUT-CSS LAST UPDATE : 2013/4/19 ****************************************************************************************************************/ /*------------------------------------------------------------------------------------------------------------- ALL FRAMES --------------------------------------------------------------------------------------------------------------*/ /* body -------------------------------------------------------*/ body{ background:#fff; min-width: 980px;} /* header -------------------------------------------------------*/ #header{ border-top:5px solid #000; background: #fff; padding:0 0 0 0; position:fixed; width:100%; z-index:100; min-width:960px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1); -o-box-shadow: 0px 0px 10px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px rgba(0,0,0,0.1); } #header .hInner{ max-width:1400px; margin:0 auto; overflow:hidden; padding:0 0 0 0;} #header .hInner .logo{ float:left; padding: 24px 10px;} #header .hInner ul.gNav{ float:right; overflow:hidden;} #header .hInner ul.gNav li{ display: inline-block;vertical-align: bottom; cursor: pointer; padding:0;} #header .hInner ul.gNav li.more{ margin: 0; padding:0;} #header .hInner ul.gNav li.cur{ margin:0; padding:0; background:#333333;} #header .hInner ul.gNav li:hover{ opacity:0.6; filter: alpha(opacity=60); /* ie lt 8 */ -ms-filter: "alpha(opacity=60)"; /* ie 8 */ -moz-opacity:0.6; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.6; /* Safari 1.x */ zoom:1; cursor:pointer; } #header .hInner ul.gNav li.cur:hover{ opacity:1; filter: alpha(opacity=100); /* ie lt 8 */ -ms-filter: "alpha(opacity=100)"; /* ie 8 */ -moz-opacity:1; /* FF lt 1.5, Netscape */ -khtml-opacity: 1; /* Safari 1.x */ zoom:1; cursor:pointer; } /* moreNav -------------------------------------------------------*/ #moreNav{ background:#f2f2ed ; position:absolute; width:100%; display:none; z-index:99; -webkit-box-shadow: 0px 3px 6px rgba(60,60,60,0.1) inset; -moz-box-shadow: 0px 3px 6px rgba(60,60,60,0.1) inset; -o-box-shadow: 0px 3px 6px rgba(60,60,60,0.1) inset; box-shadow: 0px 3px 6px rgba(60,60,60,0.1) inset; } #moreNav .mInner{ width:960px; margin:0 auto; color:#333; padding:40px 0;} #moreNav .mInner ul.menuArea{overflow: hidden;} #moreNav .mInner ul.menuArea li{width:165px; float:left; margin:0 13px 35px;} #moreNav .mInner ul.menuArea .txtLinks{ width:355px; margin-bottom: 0;} #moreNav .mInner ul.menuArea li.txtLinks ul li{ margin:0 10px 10px 0; float:none;} #moreNav .mInner ul.menuArea li.txtLinks ul li a{ display:inline; font-size:100%;} #moreNav .mInner ul.menuArea li a{ color:#333; opacity:0.85; filter: alpha(opacity=85); /* ie lt 8 */ -ms-filter: "alpha(opacity=85)"; /* ie 8 */ -moz-opacity:0.85; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.85; /* Safari 1.x */ zoom:1; cursor:pointer; } #moreNav .mInner ul.menuArea li a, #moreNav .mInner ul.menuArea li a img, #moreNav .mInner ul.menuArea li a span{ display:block;} #moreNav .mInner ul.menuArea li a img{ background:#fff; margin:0 0 10px 0;} #moreNav .mInner ul.menuArea li a:hover{ opacity:1; filter: alpha(opacity=100); /* ie lt 8 */ -ms-filter: "alpha(opacity=100)"; /* ie 8 */ -moz-opacity:1; /* FF lt 1.5, Netscape */ -khtml-opacity:1; /* Safari 1.x */ zoom:1; cursor:pointer; text-decoration:none; } #moreNav .mInner ul li a{font-size:18px;} #moreNav .mInner ul li a span{ font-size:14px; margin:5px 0 0 0;} #moreNav .mInner ul.txtMenuArea{ display:none;} #moreNav .arrowNomal li{position: relative; padding-left: 15px;} #moreNav .arrowNomal li:before{ position: absolute; left: 0; top: 0; content: "・";} #moreNav .arrowNomal li a {background: none; padding-left: 0; } /* localNav -------------------------------------------------------*/ .localNav{ background:#4d4d4b; width:100%; clear:both;} .localNav ul{ width:960px; margin:0 auto; overflow:hidden; padding:0 0 0 0;} .localNav ul li{ float:left; margin:0 0 0 0;} .localNav ul li a{ display:block; margin:5px 0; line-height:1;} .localNav ul li a:hover{ background:#8c4f4f;} .localNav ul li a.cur{ background:#8c4f4f;} /* childNav -------------------------------------------------------*/ .childNav{ background:#ffffff; width:100%; clear:both;} .childNav ul{ width:960px; margin:0 auto; overflow:hidden; padding:0 0 0 0;} .childNav ul li{ float:left; margin:0 5px 0 0;} .childNav ul li a{ display:block; margin:2px 0; line-height:1; border:solid 2px #ffffff; width:127px; text-align:center;} .childNav ul li a:hover{ border:solid 2px #8c4f4f;} .childNav ul li a.cur{ border:solid 2px #8c4f4f;} /* contentsWrap -------------------------------------------------------*/ #contentsWrap{ width:100%; padding:90px 0 0 0;} .hasDir #contentsWrap{padding:173px 0 0 0;} /* contents -------------------------------------------------------*/ #contents, #contents_main{ margin:0 auto; max-width: 960px;} #contents .section{ margin:0 0 60px 0;} #contents .bgBSection{ margin:0 0 60px 0; background:#f2f2ed; padding:30px;} #contentsWrap .localNav,#contentsWrap .childNav{ display:none;} #contents .bgBSection .whiteInner{ padding:30px ; background:#fff;} /* mainVisual -------------------------------------------------------*/ #mainVisual .randoseru-top-image-wrap{margin-top: 0;} #mainVisual{ margin:0 0 40px 0; position:relative; text-align: center;} #mainVisual ul.step{ width:75px; overflow:hidden; margin:0 auto 0 -37px; position:absolute; left:50%; bottom:15px;} #mainVisual ul.step li{ text-indent:-9999px; background:url(/randoseru/img/disc_step_off.png) no-repeat 0 0; width:5px; height:5px; overflow:hidden; cursor:pointer; margin:0 5px; float:left;} #mainVisual ul.step li.cur{background:url(/randoseru/img/disc_step_cur.png) no-repeat 0 0;} #mainVisual .randoseru-top-image-wrap{background-color: #fff;} /* topMenu -------------------------------------------------------*/ .topMenu ul { width:974px; margin:0 -7px 40px -7px ; overflow:hidden;} .topMenu ul li{ float:left; width:310px; margin:0 7px 15px;} .topMenu ul li a{ display:block; position:relative;} .topMenu ul li a:hover{ opacity:0.85; filter: alpha(opacity=80); /* ie lt 8 */ -ms-filter: "alpha(opacity=85)"; /* ie 8 */ -moz-opacity:0.85; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.85; /* Safari 1.x */ zoom:1; cursor:pointer; text-decoration:none; } .topMenu ul li a span{ background:#000; color:#fff; font-size:135%; text-align:right; line-height:1; padding:0; display:block; position:absolute; bottom:0; left:0; width:100%; opacity:0.85; filter: alpha(opacity=80); /* ie lt 8 */ -ms-filter: "alpha(opacity=85)"; /* ie 8 */ -moz-opacity:0.85; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.85; /* Safari 1.x */ zoom:1; cursor:pointer; text-decoration:none; } .topMenu ul li a span em{ font-style:normal; padding:10px 20px 10px 10px; display:block; background:url(/randoseru/img/icon_top_menu01.gif) no-repeat right center;} .topMenu ul li a span.last{ background:#c00;} .topMenu ul li a span.last em{background:url(/randoseru/img/icon_top_menu02.gif) no-repeat right center;} .topMenu ul li.news{width:280px; height:290px; background:#000; color:#fff; padding:10px 15px;} .newsBox{width:280px; height:290px; overflow-y:scroll;} .newsBox .ttl{ font-size:135%; padding:5px 0 15px 0; border-bottom:1px solid #7d7d7d; line-height:1; margin:0 25px 0 0;} .newsBox dl{ background:url(/randoseru/common/img/bg_dotline_01.gif) repeat-x left bottom; padding:0 0 10px; margin:0 25px 0 0;} .newsBox dl dt{ margin:10px 0 5px 0 ; color:#b2b2b2;} .newsBox dl dd a{color:#ffffff;} .spInfo dl dd a{color:#b2b2b2;} .newsBox dl dd a:hover{text-decoration: underline;} .dotline { border: none; height: 1px; background:url(/randoseru/common/img/bg_dotline_01.gif) 0 50% repeat-x; padding:10px 0 10px 0; } /* scroll_top -------------------------------------------------------*/ .scroll_top{text-align:right; margin: 0 10px 10px 0;} /* topicPath -------------------------------------------------------*/ .topicPath{ border-top:1px solid #dddddd; width:100%; clear:both;} .topicPath ul{ width:960px; margin:0 auto; overflow:hidden;} .topicPath li{ float:left; margin:0 12px 0 0;} .topicPath li a{ line-height:1; display:block; padding:9px 20px 9px 0; background:url(/randoseru/common/img/bg_topicpath.gif) no-repeat right center; color:#858585;} .topicPath li span{line-height:1; display:block; padding:9px 20px 9px 0; color:#702828;} /* footLinks -------------------------------------------------------*/ #footLinks{ background:#f2f2ed; min-width:960px; letter-spacing:0;} #footLinks .fInner{ width:960px; margin:0 auto; padding:30px 0 20px 0; overflow:hidden;} #footLinks .fInner .fSitemap{width:780px; float:left;} #footLinks .fInner .fSitemap dl{ width:175px; margin:0 20px 0 0; float:left;} #footLinks .fInner .fSitemap dt{ margin:0 0 10px 0;} #footLinks .fInner .fSitemap a{ color:#646464;} #footLinks .fInner .fSitemap ul{ margin:0 0 10px 0;} #footLinks .fInner .fSitemap ul li{ margin:0 0 7px 0;} #footLinks .fInner .fSitemap dl.secondShelf{ width:980px;margin-top:20px; padding-top:30px; border-top:1px solid #ccc;} #footLinks .fInner .fSitemap dl.secondShelf dd{ float:left; width:175px; margin-right:20px;} #footLinks .fInner .fSitemap dl.secondShelf dd.last{margin-right:0;} #footLinks .fInner .fSitemap dl dd p.ttl{ margin:0 0 8px 0;} #footLinks .fInner dl.bnr{ margin:0;} #footLinks .fInner dl.bnr dt{ display:none;} #footLinks .fInner dl dd ul li{ margin:0 0 7px 0;} #footLinks .fInner dl dd ul li img{ border:1px solid #ccc;} /* footLinks 2018.12追加 -------------------------------------------------------*/ .btn-link-mens-wrap { text-align: center; padding: 0; } .btn-link-mens-wrap a img { max-width: 300px; height: auto; margin: 20px auto 20px; padding: 0 14px; } .btn-link-mens-wrap a img:hover { opacity: 0.8; } /* footer -------------------------------------------------------*/ #footer{ background:#000; color:#fff; font-size:90%; min-width:960px; padding:12px 0; letter-spacing:0;} #footer ul li a{ color:#fff;} #footer .copy{ text-align:center; clear:left; padding:5px 0 0 0;} #footer ul{ margin:0 auto; width:43em;} #footer ul li{float:left;padding:0 1em; border-right:1px solid #fff; line-height:1.2;} #footer ul li a{display:block;text-align:center;} #pageTop{max-width: 1024px;} /* spInfo -------------------------------------------------------*/ .spInfo{ display:none;} #spFootLink{ display:none;} *,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .max1280{ max-width: 1280px!important; margin: 0 auto!important;} .max1024{ max-width: 1024px!important; margin: 0 auto!important; } .max900{ max-width: 900px!important; margin: 0 auto!important; } .max820{ max-width: 820px!important; margin: 0 auto!important; } .max720{ max-width: 720px!important; margin: 0 auto!important; } .max700{ max-width: 700px!important; margin: 0 auto!important; } .max640{ max-width: 640px!important; margin: 0 auto!important;} .max600{ max-width: 600px!important; margin: 0 auto!important;} .max500{ max-width: 500px!important; margin: 0 auto!important; } .max400{ max-width: 400px!important; margin: 0 auto!important; } .max300{ max-width: 300px!important; margin: 0 auto!important; } .max200{ max-width: 200px!important; margin: 0 auto!important;} /* #wrap:before { position: absolute; content: ""; background: url(../../../_new_top.jpg) center top no-repeat; height: 3301px; width: 1440px; top: 0; left: 50%; margin-left: -720px; z-index: 1; opacity: 0.5; pointer-events: none; }*/ a{-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} /*--------------------------------------------- grid system ---------------------------------------------*/ .grid {margin: 0 auto;overflow: hidden;padding-right: 0;} .grid:after {content: "";display: table;clear: both;} .colNum {float: left;min-height: 1px;}.push_right { float: right; } .grid.inline{ letter-spacing: -0.4em; text-align: center; } .grid.inline .colNum{ float: none; display: inline-block; vertical-align: middle; letter-spacing: normal; text-align: left;} .gd_0 { margin-right: -0px; margin-bottom: -0px;}.gd_1 { margin-right: -1px; margin-bottom: -1px;}.gd_8 { margin-right: -8px; margin-bottom: -8px;}.gd_10 { margin-right: -10px; margin-bottom: -10px;}.gd_15 { margin-right: -15px; margin-bottom: -15px;}.gd_16 { margin-right: -16px; margin-bottom: -16px;}.gd_20 { margin-right: -20px; margin-bottom: -20px;}.gd_24 { margin-right: -24px; margin-bottom: -24px;}.gd_25 { margin-right: -25px; margin-bottom: -25px;}.gd_30 { margin-right: -30px; margin-bottom: -30px;}.gd_40 { margin-right: -40px; margin-bottom: -40px;}.gd_50 { margin-right: -50px; margin-bottom: -50px;}.gd_60 { margin-right: -60px; margin-bottom: -60px;} .gd_0 .colNum {margin-bottom: 0; padding-right: 0;}.gd_1 .colNum {margin-bottom: 1px; padding-right: 1px;}.gd_8 .colNum {margin-bottom: 8px; padding-right: 8px;}.gd_10 .colNum {margin-bottom: 10px; padding-right: 10px;}.gd_15 .colNum {margin-bottom: 15px; padding-right: 15px;}.gd_16 .colNum {margin-bottom: 16px; padding-right: 16px;}.gd_20 .colNum {margin-bottom: 20px; padding-right: 20px;}.gd_24 .colNum {margin-bottom: 24px; padding-right: 24px;}.gd_25 .colNum {margin-bottom: 25px; padding-right: 25px;}.gd_30 .colNum {margin-bottom: 30px; padding-right: 30px;}.gd_40 .colNum {margin-bottom: 40px; padding-right: 40px;}.gd_60 .colNum {margin-bottom: 60px; padding-right: 60px;}.gd_60 .colNum {margin-bottom: 60px; padding-right: 60px;} .grid.border .colNum{border-right: 1px solid rgba(0,0,0,0.2);/*$カラム間ボーダー*/} .grid.border.gd_8 { margin-right: -4px; margin-left: -4px; margin-bottom: -8px;}.grid.border.gd_10 { margin-right: -5px; margin-left: -5px; margin-bottom: -10px;}.grid.border.gd_15 { margin-right: -7px; margin-left: -7px; margin-bottom: -15px;}.grid.border.gd_20 { margin-right: -10px; margin-left: -10px; margin-bottom: -20px;}.grid.border.gd_25 { margin-right: -12px; margin-left: -12px; margin-bottom: -25px;}.grid.border.gd_30 { margin-right: -15px; margin-left: -15px; margin-bottom: -30px;}.grid.border.gd_40 { margin-right: -20px; margin-left: -20px; margin-bottom: -40px;} .grid.border.gd_10 .colNum {margin-bottom: 10px; padding-right: 5px; padding-left: 5px; }.grid.border.gd_10 .colNum {margin-bottom: 10px; padding-right: 5px; padding-left: 5px; }.grid.border.gd_15 .colNum {margin-bottom: 15px; padding-right: 7px; padding-left: 7px; }.grid.border.gd_16 .colNum {margin-bottom: 16px; padding-right: 8px; padding-left: 8px; }.grid.border.gd_20 .colNum {margin-bottom: 20px; padding-right: 10px; padding-left: 10px; }.grid.border.gd_24 .colNum {margin-bottom: 24px; padding-right: 12px; padding-left: 12px; }.grid.border.gd_25 .colNum {margin-bottom: 25px; padding-right: 12px; padding-left: 12px; }.grid.border.gd_30 .colNum {margin-bottom: 30px; padding-right: 15px; padding-left: 15px; }.grid.border.gd_40 .colNum {margin-bottom: 40px; padding-right: 20px; padding-left: 20px; } .col_1_1 { width: 100%; }.col_2_3,.col_8_12 { width: 66.66%; }.col_1_2,.col_6_12 { width: 50%; }.col_1_3,.col_4_12 { width: 33.33%; }.col_1_4,.col_3_12 { width: 25%; }.col_1_5 { width: 20%; }.col_1_6,.col_2_12 { width: 16.667%; }.col_1_7 { width: 14.28%; }.col_1_8 { width: 12.5%; }.col_1_9 { width: 11.1%; }.col_1_10 { width: 10%; }.col_1_11 { width: 9.09%; }.col_1_12 { width: 8.33%; }.col_11_12 { width: 91.66%; }.col_10_12 { width: 83.333%; }.col_9_12 { width: 75%; }.col_5_12 { width: 41.66%; }.col_7_12 { width: 58.33%; } .push_2_3,.push_8_12 { margin-left: 66.66%; }.push_1_2,.push_6_12 { margin-left: 50%; }.push_1_3,.push_4_12 { margin-left: 33.33%; }.push_1_4,.push_3_12 { margin-left: 25%; }.push_1_5 { margin-left: 20%; }.push_1_6,.push_2_12 { margin-left: 16.667%; }.push_1_7 { margin-left: 14.28%; }.push_1_8 { margin-left: 12.5%; }.push_1_9 { margin-left: 11.1%; }.push_1_10 { margin-left: 10%; }.push_1_11 { margin-left: 9.09%; }.push_1_12 { margin-left: 8.33%; } .colInner{height: 100%;} .wrapInner{ overflow: hidden; margin: 0 auto; max-width: 1400px;} .canter_btn .bg_btn{height: 80px; font-size: 18px;} .bg_btn{ height: 40px; cursor: pointer; -webkit-font-smoothing: antialiased; display: table; width: 100%; text-align: center; background: #645031; color: #fff!important; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding: 15px; } .bg_btn:hover{ opacity: 0.7; text-decoration: none;} .bg_btn .inner_btn{ display: table-cell; vertical-align: middle; position: relative; overflow: hidden; z-index: 2; width: 2000px; padding-right: 15px;} .bg_btn .inner_btn:after{ content: ">"; position: absolute; right: 0px; top: 50%; margin-top: -0.5em; line-height: 1; } .infoList .hd { font-size: 32px; padding-bottom: 15px; color: #645031; font-family: "ヒラギノ明朝 ProN", "HiraMinProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; border-bottom: 1px solid #cccccc; } .infoList ul li {border-bottom: 1px solid #cccccc; font-size: 16px;} .infoList ul li dl {overflow: hidden; line-height: 1.75; display: table; width: 100%; padding: 18px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .infoList ul li dl dt {display: table-cell; width: 7em; padding-right: 10px; } .infoList ul li dl dd {display: table-cell; } .topInfoSection{margin: 80px 0;} .topInfoSection .wrapInner{ max-width: 1080px;} .moreLink{text-align: right; font-size: 16px; margin-top: 15px;} .moreLink a{color: #936927;} .moreLink a:before{content:">"; margin-right: 5px;} .topBanner{ padding: 80px 0; background: #fafafa; } .topBanner a:hover{opacity: 0.7; text-decoration: none;} .topDir{margin: 60px 0;} .topDir a{display: block;} .topDir a:hover{opacity: 0.7; text-decoration: none;} .topDir img{width: 100%; height: auto;} .topDir .grid {padding-left: 1px;} .topDir .grid li{ margin-top: 10px; } .topDir dt{} .topDir .grid li a{color: #333;} .topDir .grid li dl{ position: relative; font-size: 16px;} .topDir .grid li dl:before{ content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: #ccc;} .topDir .grid li dl:after{ content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: #ccc;} .topDir .grid li dd{ border-bottom: 1px solid #ccc; padding: 22px ;} .snsIcon{ text-align: center; margin: 100px 0;} .snsIcon ul li{display: inline-block; margin: 0 15px;} .snsIcon ul li a:hover{ opacity: 0.7; text-decoration: none;} #footerWrap{ background: #f2f2ed; padding: 80px 40px; } #footerTop .wrapInner{ max-width: 1080px; } #footerTop .ttl{ font-size: 18px;} #footerTop .footNav{ font-size: 14px; } #footerTop .footNav li{ margin-top: 15px; position: relative;} #footerTop .footNav li:before{ content: "・"; } #footerTop .footNav li a{ color: #333; } #footerTop .nav_btn{ margin-bottom: 10px; } #footerTop .nav_btn .bg_btn{ text-align: left; font-size: 16px; } #footerBottom{margin-top: 75px;} #footerBottom ul{text-align: center;} #footerBottom ul li{display: inline-block; padding: 0 8px; border-left: 1px solid #80807e; line-height: 1;} #footerBottom ul li:first-child{ border-left: none; } #footerBottom ul li a{color: #333;} #footerBottom .copy{ text-align: center; margin-top: 10px; font-size: 10px;} #sp_header,#footer_sp{display: none;} .section .wrapInner{max-width: 1080px;} /*------------------------------------------------------------------------------------------------------------- Windowサイズが481px以上～850px以内の Style --------------------------------------------------------------------------------------------------------------*/ @media screen and (min-width: 481px) and (max-width: 850px){ /* header -------------------------------------------------------*/ #header{ position:static; min-width:730px;} /*#header .hInner{ width:730px;}*/ #header .hInner .logo{ float:left;} /*#header .hInner ul.gNav{ width:501px;}*/ /* moreNav -------------------------------------------------------*/ #moreNav .mInner{ width:730px;} #moreNav .mInner ul.menuArea{ margin:0 -11px;} #moreNav .mInner ul.menuArea li{margin:0 11px 35px 11px;} #moreNav .mInner ul.menuArea .txtLinks{ width:525px; height:196px;} /* localNav -------------------------------------------------------*/ #header .localNav{ display:none;} #contentsWrap .localNav{display:block; padding:0; background:none; margin:0 0 15px 0;} #contentsWrap .localNav:nth-child(even){ margin:0 0 40px 0;} #contentsWrap .localNav ul{ width:100%; padding:0;} #contentsWrap .localNav ul li{ margin:0 0 0 0; width:33.3%; text-align:center; border:1px solid #fff; box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; background:#4D4D4B;} #contentsWrap .localNav ul li:nth-child(4){ clear:left;} #contentsWrap .localNav ul li a{ margin:0;} #moreNav .mInner ul.txtMenuArea{ display:none;} /* childNav -------------------------------------------------------*/ #header .childNav{ display:none;} #contentsWrap .childNav{display:block; padding:0; background:none; margin:0 0 15px 0;} #contentsWrap .childNav:nth-child(even){ margin:0 0 40px 0;} #contentsWrap .childNav ul{ width:100%; padding:0;} #contentsWrap .childNav ul li{ margin:0 0 0 0; width:25%; text-align:center; border:solid 2px #ffffff; box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; background:#ffffff;} #contentsWrap .childNav ul li:nth-child(5){ clear:left;} #contentsWrap .childNav ul li a{ margin:0; border:solid 2px #8c4f4f; width:auto;} /* contentsWrap -------------------------------------------------------*/ #contentsWrap{padding:15px 0 0 0;} .hasDir #contentsWrap{padding:10px 0 0 0;} /* contents -------------------------------------------------------*/ #contents, #contents_main{ width:730px; padding:0 10px;} #contents .bgBSection{ margin: 0 0 40px 0; background:#fff; padding:0; border-top:1px solid #dededf; } #contents .bgBSection .whiteInner{ padding:0;} /* mainVisual -------------------------------------------------------*/ #mainVisual{ margin:0 0 40px 0;} #mainVisual img{ width:100%; height:auto;} /* topMenu -------------------------------------------------------*/ .topMenu ul { width:730px; margin:0 -4px 40px -4px ;} .topMenu ul li{ width:235px; margin:0 4px 8px;} .topMenu ul li img{ width:100%; height:auto;} .topMenu ul li a span{font-size:100%;} .topMenu ul li.news{width:205px; height:217px; background:#000;} .newsBox{width:213px; height:213px; } .newsBox .ttl{ font-size:115%; } .newsBox dl dd{font-size:90%;} /* topicPath -------------------------------------------------------*/ .topicPath{ display:none;} /* footLinks -------------------------------------------------------*/ #footLinks{ background:#f2f2ed; min-width:740px;} #footLinks .fInner{ width:730px; padding:50px 0 30px;} #footLinks .fInner .fSitemap{float:none; overflow:hidden;} #footLinks .fInner dl{ width:182px; margin:0;} #footLinks .fInner dl.bnr{width:730px; margin-top:20px;} #footLinks .fInner dl.bnr dd ul li{ float:left; width:174px; margin:0 20px 7px 0;} /* footer -------------------------------------------------------*/ #footer{min-width:740px;} #footer ul{ width:43em;} #spFootLink{ display:none;} } /*end media*/ /*------------------------------------------------------------------------------------------------------------- Windowサイズが480px以下の Style --------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 480px){ body{min-width: 100%;} .spOnly { display: block !important; } .pcOnly { display: none !important; } img{max-width: 100%;} img.spOnly { display: inline-block !important; } .grid:not(.sp_grid){margin-right: 0; margin-bottom: 0;} .grid:not(.sp_grid)>.colNum{ width: 100%; padding-right: 0; margin-bottom: 15px;} .grid:not(.sp_grid)>.colNum:last-child{ margin-bottom: 0}; .sp_gd_0 { margin-right: -0px; margin-bottom: -0px;}.sp_gd_1 { margin-right: -1px; margin-bottom: -1px;}.sp_gd_8 { margin-right: -8px; margin-bottom: -8px;}.sp_gd_10 { margin-right: -10px; margin-bottom: -10px;}.sp_gd_15 { margin-right: -15px; margin-bottom: -15px;}.sp_gd_16 { margin-right: -16px; margin-bottom: -16px;}.sp_gd_20 { margin-right: -20px; margin-bottom: -20px;}.sp_gd_24 { margin-right: -24px; margin-bottom: -24px;}.sp_gd_25 { margin-right: -25px; margin-bottom: -25px;}.sp_gd_30 { margin-right: -30px; margin-bottom: -30px;}.sp_gd_40 { margin-right: -40px; margin-bottom: -40px;}.sp_gd_88 { margin-right: -88px; margin-bottom: -88px;} .sp_gd_0>.colNum {margin-bottom: 0; padding-right: 0;}.sp_gd_1>.colNum {margin-bottom: 1px; padding-right: 1px;}.sp_gd_8>.colNum {margin-bottom: 8px; padding-right: 8px;}.sp_gd_10>.colNum {margin-bottom: 10px; padding-right: 10px;}.sp_gd_15>.colNum {margin-bottom: 15px; padding-right: 15px;}.sp_gd_16>.colNum {margin-bottom: 16px; padding-right: 16px;}.sp_gd_20>.colNum {margin-bottom: 20px; padding-right: 20px;}.sp_gd_24>.colNum {margin-bottom: 24px; padding-right: 24px;}.sp_gd_25>.colNum {margin-bottom: 25px; padding-right: 25px;}.sp_gd_30>.colNum {margin-bottom: 30px; padding-right: 30px;}.sp_gd_40>.colNum {margin-bottom: 40px; padding-right: 40px;}.sp_gd_88>.colNum {margin-bottom: 88px; padding-right: 88px;} .sp_grid.border.sp_gd_8 { margin-right: -4px; margin-left: -4px; margin-bottom: -8px;}.sp_grid.border.sp_gd_10 { margin-right: -5px; margin-left: -5px; margin-bottom: -10px;}.sp_grid.border.sp_gd_15 { margin-right: -7px; margin-left: -7px; margin-bottom: -15px;}.sp_grid.border.sp_gd_20 { margin-right: -10px; margin-left: -10px; margin-bottom: -20px;}.sp_grid.border.sp_gd_25 { margin-right: -12px; margin-left: -12px; margin-bottom: -25px;}.sp_grid.border.sp_gd_30 { margin-right: -15px; margin-left: -15px; margin-bottom: -30px;}.sp_grid.border.sp_gd_40 { margin-right: -20px; margin-left: -20px; margin-bottom: -40px;} .sp_grid.border.sp_gd_10>.colNum {margin-bottom: 10px; padding-right: 5px; padding-left: 5px; }.sp_grid.border.sp_gd_10>.colNum {margin-bottom: 10px; padding-right: 5px; padding-left: 5px; }.sp_grid.border.sp_gd_15>.colNum {margin-bottom: 15px; padding-right: 7px; padding-left: 7px; }.sp_grid.border.sp_gd_16>.colNum {margin-bottom: 16px; padding-right: 8px; padding-left: 8px; }.sp_grid.border.sp_gd_20>.colNum {margin-bottom: 20px; padding-right: 10px; padding-left: 10px; }.sp_grid.border.sp_gd_24>.colNum {margin-bottom: 24px; padding-right: 12px; padding-left: 12px; }.sp_grid.border.sp_gd_25>.colNum {margin-bottom: 25px; padding-right: 12px; padding-left: 12px; }.sp_grid.border.sp_gd_30>.colNum {margin-bottom: 30px; padding-right: 15px; padding-left: 15px; }.sp_grid.border.sp_gd_40>.colNum {margin-bottom: 40px; padding-right: 20px; padding-left: 20px; } .sp_col_1_1 { width: 100%; }.sp_col_2_3,.sp_col_8_12 { width: 66.66%; }.sp_col_1_2,.sp_col_6_12 { width: 50%; }.sp_col_1_3,.sp_col_4_12 { width: 33.33%; }.sp_col_1_4,.sp_col_3_12 { width: 25%; }.sp_col_1_5 { width: 20%; }.sp_col_1_6,.sp_col_2_12 { width: 16.667%; }.sp_col_1_7 { width: 14.28%; }.sp_col_1_8 { width: 12.5%; }.sp_col_1_9 { width: 11.1%; }.sp_col_1_10 { width: 10%; }.sp_col_1_11 { width: 9.09%; }.sp_col_1_12 { width: 8.33%; }.sp_col_11_12 { width: 91.66%; }.sp_col_10_12 { width: 83.333%; }.sp_col_9_12 { width: 75%; }.sp_col_5_12 { width: 41.66%; }.sp_col_7_12 { width: 58.33%; } .sp_dBlock { display: block!important; } .sp_w5p{ width: 5%!important;}.sp_w8p{ width: 8%!important;}.sp_w10p{ width: 10%!important;}.sp_w11p{ width: 11%!important;}.sp_w12p{ width: 12%!important;}.sp_w15p{ width: 15%!important;}.sp_w16p{ width: 16%!important;}.sp_w18p{ width: 18%!important;}.sp_w20p{ width: 20%!important;}.sp_w22p{ width: 22%!important;}.sp_w25p{ width: 25%!important;}.sp_w30p{ width: 30%!important;}.sp_w35p{ width: 35%!important;}.sp_w40p{ width: 40%!important;}.sp_w45p{ width: 45%!important;}.sp_w50p{ width: 50%!important;}.sp_w55p{ width: 55%!important;}.sp_w60p{ width: 60%!important;}.sp_w65p{ width: 65%!important;}.sp_w70p{ width: 70%!important;}.sp_w75p{ width: 75%!important;}.sp_w80p{ width: 80%!important;}.sp_w85p{ width: 85%!important;}.sp_w90p{ width: 90%!important;}.sp_w95p{ width: 95%!important;}.sp_w100p{ width: 100%!important;} .sp_wmax{ width: 100%!important; height: auto!important; max-width: inherit;}.sp_wAuto{ width: auto !important; } .sp_layoutC{ text-align: center; }.sp_layoutR{ text-align: right; }.sp_layoutL{ text-align: left; } .sp_fz10{ font-size: 62.5% !important; }.sp_fz11{ font-size: 68.75% !important; }.sp_fz12{ font-size: 75% !important; }.sp_fz14{ font-size: 87.5% !important; }.sp_fz16{ font-size: 100% !important; }.sp_fz18{ font-size: 112.5% !important; }.sp_fz20{ font-size: 125% !important; }.sp_fz22{ font-size: 137.5% !important; }.sp_fz24{ font-size: 150% !important; }.sp_fz26{ font-size: 162.5% !important; }.sp_fz28{ font-size: 175% !important; }.sp_fz30{ font-size: 187.5% !important; }.sp_fz32{ font-size: 200% !important; }.sp_fz34{ font-size: 212.5% !important; }.sp_fz36{ font-size: 225% !important; }.sp_fz38{ font-size: 237.5% !important; }.sp_fz40{ font-size: 250% !important; }.sp_fz42{ font-size: 262.5% !important; }.sp_fz44{ font-size: 275% !important; }.sp_fz46{ font-size: 287.5% !important; }.sp_fz48{ font-size: 300% !important; } .wrapInner { max-width: 100%; } #sp_header, #footer_sp{display: block;} #header{display: none;} #wrap{padding-top: 56px;} .spMenuToggle{height: 56px;} .spMenuToggle { position: absolute; right: 0; top: 2px; width: 57px; height: 54px;cursor: pointer; z-index: 100; background: url(../img/menu_sp.png); background-size:100% auto ; text-indent: -9999px;} .spMenuToggle.cur{ background-image: url(../img/menu_sp_cur.png); } .hInner{display: none;} #sp_header {background: #fff;} .spHeader{ display: none;} .gnav {background: #f2f2ed;} .gnav .ttl{ padding: 15px;font-size: 14px; } .gnav .parentList>li{border-bottom: 1px solid #f2f2ed;} .gnav .parentList, .gnav .parentList>li, .gnav .parentList>li a, .gnav .parentList>li span { text-align: left; display: block; width: 100%; height: auto; } .gnav .parentList>li .link {position: relative; padding: 15px 15px; color: #333; font-size: 12px; background: url(../img/icon_nav_arrow.png) no-repeat right 10px center #fff; background-size: 7.5px 9px; } .gnav .parentList>li .link {} .gnav em{font-style: normal;} #sp_header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #sp_header .siteId{border-top: solid #000 2px;-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.1); -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.1); box-shadow: 0px 0px 3px rgba(0,0,0,0.1);} #sp_header .siteId img{height: 54px;} #sp_header .spLogin{position: absolute; right: 58px; top: 2px; width: 75px;} #sp_header .spLogin img{width: 100%; height: auto;} #footerWrap{padding: 0 0 20px;} #footerTop {display: none;} #footerBottom{ margin-top: 30px; } .footer_btn_nav { text-align: center; } .footer_btn_nav .nav_btn{ display: inline-block; width: 170px;} .footer_btn_nav .nav_btn a{ text-align: left;} .footer_btn_nav .nav_btn .bg_btn .inner_btn:after{right: 0;} .footer_btn_nav{ margin-top: 30px; } .topDir{margin: 40px 0;} .snsIcon{margin: 50px 0;} .snsIcon ul li{margin: 0 7px;} .snsIcon img{ width: 40px; height: auto; } .wrapInner{padding: 0 15px;} .topInfoSection{margin: 60px 0;} .infoList .hd{text-align: center;} .infoList ul li dl dt{display: block; font-size: 10px;} .infoList ul li dl dd{display: block;} .moreLink{text-align: center; font-size: 12px; margin-top: 25px;} .topDir .grid li dl{display: table;} .topDir .grid li dl dt{display: table-cell; vertical-align: middle;width: 50%;} .topDir .grid li dl dd{display: table-cell; vertical-align: middle; width: 50%; padding: 10px; font-size: 13px; line-height: 1.3;} .topDir .grid li dl:before{left: 0; top: 0; right: 0; height: 1px; width: 100%;} .topBanner{padding: 40px 0;} /* header -------------------------------------------------------*/ #header{ position:relative; border:none;min-width:300px; padding:10px 0 0; min-height:20px !important; background:none;} #header .hInner{ width:auto; padding:0 0 0 10px;} #header .hInner ul.gNav{ width:119px;} #header .hInner ul.gNav li{ padding:0;} /* moreNav -------------------------------------------------------*/ #moreNav{ display:none; padding:0;} #moreNav .mInner{ min-width:320px; width:100%; padding:0;} #moreNav .mInner ul.menuArea{ display:none;} #moreNav .mInner ul.txtMenuArea{ display:block;border-bottom:1px solid #fff;} #moreNav .mInner ul.txtMenuArea li{ border-top:1px solid #fff;} #moreNav .mInner ul.txtMenuArea li a{ padding:20px; display:block; color:#fff; background:url(/randoseru/common/img/icon_arrow_02.png) no-repeat 97% center; background-size:4px 7px;} #moreNav .mInner ul.txtMenuArea li.bnr{ padding:10px 10px 0 10px;} #moreNav .mInner ul.txtMenuArea li.bnr ul{ border:none; width:100%; overflow:hidden; } #moreNav .mInner ul.txtMenuArea li.bnr ul li{ padding:0 10px 0 0; border:none; width:50%; float:left; margin:0 0 10px 0; box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box;} #moreNav .mInner ul.txtMenuArea li.bnr ul li:nth-child(2){ float:right; padding:0 0 0 10px;} #moreNav .mInner ul.txtMenuArea li.bnr ul li a{ display:inline; background:none; padding:0;} #moreNav .mInner ul.txtMenuArea li.bnr ul li img{ width:100%; height:auto;} /* localNav -------------------------------------------------------*/ #header .localNav{ display:none;} #contentsWrap .localNav{display:block; padding:0 10px; background:none; margin:0 0 15px 0; width:auto;} #contentsWrap .localNav:nth-child(1){ display:none;} #contentsWrap .localNav:nth-child(even){ margin:40px 0 40px 0; display:block;} #contentsWrap .localNav ul{ width:100%; padding:0;} #contentsWrap .localNav ul li{ margin:0 0 0 0; width:50%; text-align:center; border:1px solid #fff; box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; background:#4D4D4B;} #contentsWrap .localNav ul li a{ margin:0;} /* childNav -------------------------------------------------------*/ #contentsWrap .childNav{display:block; padding:0 10px; background:none; margin:0 0 15px 0; width:auto;} #contentsWrap .childNav ul{ width:100%; padding:0;} #contentsWrap .childNav ul li{ margin:0 0 0 0; width:33.3%; text-align:center; border:2px solid #fff; box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; background:#ffffff;} #contentsWrap .childNav ul li a{ margin:0; border:solid 2px #8c4f4f; width:auto;} #header .childNav{display:none;} /* contentsWrap -------------------------------------------------------*/ #contentsWrap{padding:0 0 0 0;} .hasDir #contentsWrap{padding:0 0 0 0;} /* contents -------------------------------------------------------*/ #contents, #contents_main{ width:100%; min-width:300px;} #contents .section{ margin: 0 10px 10px 10px;} #contents .bgBSection{ margin: 0 10px 0 10px; background:#fff; padding:0; border-top:1px solid #dededf; } #contents .bgBSection .whiteInner{ padding:0;} /* mainVisual -------------------------------------------------------*/ #mainVisual{ margin:0 0 30px 0;} #mainVisual img{ width:100%; height:auto;} /* topMenu -------------------------------------------------------*/ .topMenu ul { width:100%; margin:0 ;} .topMenu ul li{ width:100%; margin:0 0 1px; float:none; background: url(/randoseru/common/img/bg_sp_iconnav2.png) no-repeat right bottom #717071; background-size:15px 15px;} .topMenu ul li img{ width:50px; height:auto; margin:1px;} .topMenu ul li.news{ display:none;} .newsBox{ display:none; } .topMenu ul li a{ display:table;} .topMenu ul li a img{ display:table-cell; width:50px;} .topMenu ul li a span{ display:table-cell; background:none; font-size:100%;position:static; text-align:left; vertical-align:middle;} .topMenu ul li a span em{ display:inline; background:none;} .topMenu ul li a span.last{ display:table-cell; background:none; font-size:100%;position:static; text-align:left; vertical-align:middle;} .topMenu ul li a span.last em{ display:inline; background:none;} /* topicPath -------------------------------------------------------*/ .topicPath {display:none;} /* scroll_top -------------------------------------------------------*/ .scroll_top{text-align:right; margin: 0 10px 20px 0;} /* footLinks -------------------------------------------------------*/ #footLinks{display:none;} /* footer -------------------------------------------------------*/ #footer{min-width:320px; margin:10px 0 0 0;} #footer ul{ width:100%; min-width:320px;} #footer ul li{ text-align:right; margin:0 0 5px 0; width:50%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;} #footer ul li:nth-child(2), #footer ul li:nth-child(4){ border:none; text-align:left;} #footer ul li:nth-child(3){ clear:left;} #footer ul li a{ display:inline;} /* footLinks 2018.12追加 -------------------------------------------------------*/ .btn-link-mens-wrap a img { margin: 10px auto 0; } /* spInfo -------------------------------------------------------*/ .spInfo{ display:block; margin:0 10px 10px; height:auto; background:#000; overflow:hidden; color:#fff; padding-bottom:5px;} .spInfo p.ttl{ padding:10px; border-bottom:1px solid #7d7d7d; margin:0 0 5px;} .spInfo dl{ padding:0 10px; display:none;} .spInfo dl.view{ padding:0 10px; display:block;} .spInfo dl dd { color:#b2b2b2; margin-bottom:5px;} #spFootLink{ display: none!important;} } /*end media*/