@charset "utf-8";

/* -- STYLE -- */

body{ background: #000;}

.allDsp{ display: inline-block; margin: 0 10px 0 0;}
.sp,.sp_ft{ display: none;}
.container{ background-color: #000; display: block; padding: 0 10px;}
.wrap{ margin: 0 auto; max-width: 960px; width: 100%;}
.modal-content{ display: none;}
h2 span,
h3 span,
h4 span,
.min{ font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro', "游明朝体", "Yu Mincho" , "HG明朝E", "メイリオ", Meiryo, sans-serif; color: #333;}
.sd{ box-shadow:2px 2px 2px 0px rgba(0,0,0,0.5);
  -moz-box-shadow:2px 2px 2px 0px rgba(0,0,0,0.5);
  -webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.5);
}

/* -- HEADER -- */

header{ padding: 10px 0;}
header .wrap.top{ margin-bottom: 10px;}
header .wrap.top h1,
header .wrap.top .tit{ float: left; margin-top: 25px;}
header .wrap.top .tit{ margin: 45px 0 0 15px;}
header .wrap.top .tel{ float: right;}
header .wrap.bottom .hd_nav li{ float: left; background-color: rgba(98, 98, 0, 0.5); margin-left: 0.374%; width: 19.7%;}
header .wrap.bottom .hd_nav li:first-child,
header .wrap.bottom .hd_nav li:nth-child(6){ margin-left: 0;}
header .wrap.bottom .hd_nav li:nth-child(n-5){ margin-bottom: 3px;}
header .wrap.bottom .hd_nav li a {
  display: block;
  padding: 0 .3em;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(98,98,0,1) 100%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}
header .wrap.bottom .hd_nav li a:hover { background-position: -100% 0;}
header .wrap.bottom .hd_nav li a img{ max-width: 100%;}
header .wrap.bottom .hd_nav li a:hover img{ opacity: 1;}

header .wrap.bottom .hd_nav li a { line-height: 1; padding: 1px 0;}
header .wrap.bottom .hd_nav li img { vertical-align:top; }


/* -- FOOTER -- */

footer .wrap.top .ft_bn li{ float: left;}
footer .wrap.top .ft_bn li img{ width: 100%;}
footer .wrap.top .ft_bn li:first-child{ width: 30.0125%;}
footer .wrap.top .ft_bn li:nth-child(2){ width: 20.2083%;}
footer .wrap.top .ft_bn li:nth-child(3),
footer .wrap.top .ft_bn li:nth-child(4){ width: 23.9583%;}
footer .wrap.top .ft_bn li:nth-child(n+2){ margin-left: 0.623%;}

footer .wrap.bottom{ display: block; padding: 20px 0;}
footer .wrap.bottom ul{ float: left; padding-top: 1%; width: 55%;}
footer .wrap.bottom ul li{ float: left;}
footer .wrap.bottom ul li:first-child{ margin-right: 4.44%;}
footer .wrap.bottom .ft_info{ float: right; width: 40.83%;}
footer .wrap.bottom .ft_info a{ float: right; display: block;}
footer .wrap.bottom .copy{ color: #fff; clear: both; font-size: 12px; text-align: right;}


/* -- PAGE -- */

.path{ display: block; margin-bottom: 20px;}
.path ul li{ display: inline;}
.path ul li, .path ul li a{ color: #333; font-size: 12px;}
.path ul li a:hover{ text-decoration: underline;}
.path ul li:nth-child(n+2):before{ content: "> ";}

.subNav{ display: block; margin-bottom: 40px;}
.subNav ul li{ float: left;}
.subNav ul li:nth-child(n+2){ margin: 0 0 0 10px;}

.main.wrap{ background-color: #fff; display: block; border-radius: 12px; padding: 0 0 50px;}
.main.wrap .titleImage img{ width: 100%;border-radius: 10px 10px 0 0;}
.main.wrap h2{ margin-bottom: 40px;}
.main.wrap h2 span{ display: none;}
.main.wrap .wrapInner{ display: block; padding: 0 40px;}
.main.wrap .caption{ font-size: 12px; margin-top: 30px;}

p{ font-size: 13px; line-height: 2em;}
p.caption{ font-size: 10px; line-height: 1.5em;}
.fit img{ width: 100%; height: auto; margin: 0 auto; display: block;}
.attention{ color: red; display: block; font-size: 10px;}

.innerL{ float: left; width: 49%;}
.innerR{ float: right; width: 49%;}

.col4,.col3{ display: block; margin: 30px 0 0; width: 100%;}
.col4 li,.col3 li{ display: block; float: left;}
.col4 li{ width: 22.1590%; max-width: 195px;}
.col4 li:nth-child(n+2){ margin-left: 3.788%;}
h3,
h4{ margin: 7px 0;}
h3 span,
h4 span{ display: none; padding-bottom: 5px}
.col3 li{ width: 30.4545%; max-width: 269px;}
.col3 li:nth-child(n+2){ margin-left: 4.31825%;}

.detail p{ font-size: 11px; line-height: 1.2em;}


.bx-wrapper { margin: 0;}
.bx-wrapper .bx-viewport{ border:none; left: 0; -moz-box-shadow:none; -webkit-box-shadow: none; box-shadow: none; background: none;}
/*.bx-controls.bx-has-controls-direction { display: none;}*/


/* ----------- */
/* -- MEDIA -- */
/* ----------- */
@media only screen and (max-width:840px) {
  /* for width840_ */
  .wrap.top .tit{ float: none;}

  header .wrap.top{ margin-bottom: 10px;}
  header .wrap.top  h1, header .wrap.top .tit{ float: none;}
  header .wrap.top h1{ margin-top: 0; padding-top: 10px; width:48%; max-width: 180px;}
  header .wrap.top h1 img{ width:100%;}
  header .wrap.top .tit{ width: 100%; margin: 10px 0 0; max-width: 453px;}
  header .wrap.top .tit img{ width: 100%;}
  header .wrap.top .tel{ width: 50%; max-width: 218px;}
  header .wrap.top .tel img{ width: 100%;}

  footer .wrap.bottom ul,
  footer .wrap.bottom .ft_info,
  footer .wrap.bottom .ft_info a{ float: none; width: 100%; margin: 0 auto;}
  footer .wrap.bottom .ft_info a img{ display: block; margin: 0 auto;}
  footer .wrap.bottom ul{ max-width: 450px;}
  footer .wrap.bottom .ft_info{ max-width: 398px;}
  footer .wrap.bottom .copy { text-align: center; margin-top: 10px;}
  /* _for width840 */
}
@media only screen and (max-width:640px) {
  /* for width640_ */
  .allDsp{ display: block!important; margin: 0 auto 20px; width: 100%;}
  h2 img.allDsp{ max-width: 290px;}
  .pc{ display: none;}
  .sp{ display: block;}
  .container { padding-bottom: 80px;}
  header { padding: 10px 0 0;}
  header .wrap.top .tit{ margin: 0;}
  header .wrap.bottom{ display: none;}

  footer .wrap.top .ft_bn li:first-child{ width: 59.5%;}
  footer .wrap.top .ft_bn li:nth-child(2){ width: 39.5%;}
  footer .wrap.top .ft_bn li:nth-child(3),
  footer .wrap.top .ft_bn li:nth-child(4){ width: 49%;}
  footer .wrap.top .ft_bn li:nth-child(n+2){ margin-left: 0;}
  footer .wrap.top .ft_bn li:nth-child(even){ float: right;}
  .sp_ft{ background-color:#fff; display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;}
  .sp_ft ul li{ float: left; width: 33.333333%}
  .sp_ft ul li:first-child{ background-color: #d47e7e;}
  .sp_ft ul li:nth-child(2){ background-color: #7da8c3;}
  .sp_ft ul li:nth-child(3){ background-color: #c8ab45;}
  .sp_ft ul li a{ display: block; width: 100%; padding: 5px 10px;}
  .sp_ft ul li a img{  width: 100%; display: block; margin: 5px auto;}
  footer .wrap.bottom .ft_info a.pc img{display: none;}

  .modal-content { position:fixed; display:none; z-index:200; width:80%; margin:0 auto; padding:0;}
  .modal-content ul li{ width: 48%;}
  .modal-content ul li:nth-child(odd){ float: left;}
  .modal-content ul li:nth-child(even){ float: right;}
  .modal-content ul li:nth-child(n+3){ margin-top: 10px;}
  .modal-content ul li a{ background-color: #323300; display: block;}
  .modal-content ul li a img{ display: block; margin: 0 auto;}
  .modal-content ul li a:hover{ background-color: #626300;}
  .modal-content ul li a:hover img{ opacity: 1;}
  .modal-overlay { z-index:100; display:none; position:fixed; top:0; left:0; width:100%; height:120%; background-color:rgba(0,0,0,0.75);}
  .modal-open { color:#00f; text-decoration:underline;}
  .modal-open:hover { cursor:pointer; color:#f00;}
  .modal-close { color:#00f; text-decoration:underline;}
  .modal-close:hover { cursor:pointer; color:#f00;}

  .main.wrap h2 img{ display: none;}
  .main.wrap h2 span{ display: inline; font-size: 20px;}
  .main.wrap .wrapInner{ display: block; padding: 0 10px;}

  .innerL, .innerR{ float: none; width: 100%!important;}

  /* _for width640 */
}
@media only screen and (max-width:480px) {
  /* for width480_ */

  .subNav ul li{ float: none; width: 49%;}
  .subNav ul li img{ width: 100%;}
  .subNav ul li:nth-child(n+2){ margin: 0 auto;}
  .subNav ul li:nth-child(odd){ float: left; margin: 0;}
  .subNav ul li:nth-child(even){ float: right; margin: 0;}

  footer .wrap.bottom ul{ width: 100%;}
  footer .wrap.bottom ul li{ display: block; width: 100%; margin-bottom: 10px;}
  footer .wrap.bottom ul li:nth-child(2) img{max-width: 110px;}
  footer .wrap.bottom ul li img{ display: block; margin: 0 auto; width: 100%;}

  section{ margin-top: 40px;}
  section:first-child{ margin-top: 0;}

  .col4 li{ display: block; width: 49%; /*min-height: 320px;*/ padding: 10px 0;}
  .col4 li:nth-child(odd){ float:left;}
  .col4 li:nth-child(even){ float:right;}
  .col4 li:nth-child(n+2){ margin-left: 0;}
h3,
h4{ border-bottom: 1px solid #333;}
h3 img,
h4 img{ display: none!important;}
h3 span,
h4 span{ display: block; color: #333; font-size: 12px;}

  .col3 li{ float: none; width: 100%; max-width: none; margin: 0 auto;}
  .col3 li:nth-child(n+2){ margin: 40px auto 0;}
  .col3 li img{ width: auto;}
  /* _for width480 */
}