@charset "utf-8";

/*-----------------------------------------------------------------------------

top page

-------------------------------------------------------------------------------*/

.information {
  margin: 0 0 50px 0;
  text-align: center;
}

/* bnr */
#bnr_block {
  width:auto;
}

#bnr_block div {
  background:#999;
}
#bnr_block div img { vertical-align: bottom;}

#bnr_block div ul,
#bnr_block div li {
  padding:0;
  margin:0;
  list-style:none;
}

#bnr_block div ul {
  width:1000px;
  margin:0 auto;
  text-align:center;
}

#bnr_block div li {
  display:inline-block;
  *display:inline;
  *zoom:1;
  background:#fff;
}

#sub_bnr {
  width:1000px;
  margin:40px auto;
  padding-top:10px;
}

#sub_bnr ul,
#sub_bnr li {
  padding:0;
  margin:0;
  list-style:none;
}

#sub_bnr li {
  float:left;
}


/* topics */
#topics {
  padding:70px 0 0 0;
}

#topics h3 {
  width:896px;
  margin:0 auto;
  padding-bottom:15px;
}

#topics .bg { background:#999; position:relative; padding:0 0 40px 0; }
#topics .bg::before { position:absolute; width:50%; height:100%; background:#010101; top:0; left:0; z-index:1; content:''; display:block; }
#topics ul {  }
#topics ul,
#topics li {
  padding:0;
  margin:0;
  list-style:none;
}

#topics ul {
  width:896px;
  margin:0 auto; position:relative; z-index:2;
}

#topics .bg li {
  width:224px;
  height:188px;
  float:left;
  position:relative;
}

#topics .bg li a {
  display: block;
  width: 224px;
  height: 188px;
  position: absolute;
  top: 2px;
  left: -6px;
  background-image: url(../img/topics_arw.png);
  background-position: 190px 140px;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}

#topics .bg li a.pc:hover {
  background-image:url(../img/topics_arw_on.png);
  color:#000;
}

#topics .bg li:first-child {
  background:#1A1A1A;
}

#topics .bg li:nth-child(2) {
  background:#333;
}

#topics .bg li:nth-child(3) {
  background:#4D4D4D;
}

#topics .bg li:nth-child(4) {
  background:#666;
}

#topics .bg li:first-child.on {
  background:#D1D1D1;
}

#topics .bg li:nth-child(2).on {
  background:#D6D6D6;
}

#topics .bg li:nth-child(3).on {
  background:#dbdbdb;
}

#topics .bg li:nth-child(4).on {
  background:#e0e0e0;
}

#topics .ymd {
  font-size:24px;
  letter-spacing:0.05em;
  display:block;
  margin:20px;
  padding-bottom:10px;
  white-space:nowrap;
  border-bottom:1px solid #e6e6e6;
}

.mac #topics .ymd {
  letter-spacing:normal;
}

#topics .bg li.on .ymd {
  border-bottom:1px solid #000;
}

#topics .no {
  font-size:12px;
  letter-spacing:normal;
}

#topics .art_title {
  display:block;
  padding:0 40px 0 20px;
  font-size:12px;
  line-height:160%;
  letter-spacing:0.1em;
  letter-spacing:normal\9;
}
.mac #topics .art_title {
  letter-spacing:normal;
}

#ft_menu {
  width:auto;
  height:670px;
  margin-top:100px;
  background-image:url(../img/ft_menu_bg.jpg);
  background-position: center bottom;
  background-repeat:no-repeat;
}

#ft_menu .menu_box {
  padding:80px 0 80px 0;
  width:884px;
  margin:0 auto;
}

#ft_menu .box {
  width:32%;
  height:220px;
  margin:0 2% 2% 0;
  background:rgba(255,255,255,0.6);
  float:left;
  position:relative;
  cursor:pointer;
  transition:background 0.5s linear 0s;
}
#ft_menu .box:hover { background:rgba(230,0,18,0.6); }

#ft_menu .box.on { background:rgba(230,0,18,0.6);
}

#ft_menu .box:nth-of-type(3n) { margin:0 0 2% 0; }

#ft_menu .box h4 {
  position:absolute;
  top:48px;
  left:35px;
}

#ft_menu .box a {
  display:inline-block;
  *display:inline;
  *zoom:1;
  line-height:32px;
  padding-right: 50px;
  background-image:url(../img/ft_menu_arw.png);
  background-position: right top;
  background-repeat:no-repeat;
  color:#D7092F;
  position:absolute;
  left:35px;
  bottom:40px;
  font-size:14px;
  letter-spacing:0.1em;
}

.mac #ft_menu .box a {
  letter-spacing:normal;
}

#ft_menu .box.on a {
  background-position: right bottom;
  color:#fff;
}




/*-----------------------------------------------------------------------------

For Responsive 2018.02.23

-------------------------------------------------------------------------------*/
#mainVisual { margin:0 0 50px 0; }
#top_slider { width:100%; clear:both; }
#top_slider img { display:block; }
#top_slider a { display:block; }

#loaderWrapper {  position:fixed; width:100%; height:100%; top:0; left:0; z-index:99999999; background:rgba(220,220,220,1); }
#loader {  top:calc(50% - 88px - 2em); color:#fff; }
#loader,
#loader::before,
#loader::after { background: #d7092f; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; }
#loader { color: #d7092f; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px;  -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
#loader::before,
#loader::after { position: absolute; top: 0; content: ''; }
#loader::before { left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
#loader::after { left: 1.5em; }
  @-webkit-keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em;   } }
  @keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0;  height: 4em;   } 40% {  box-shadow: 0 -2em;  height: 5em;   } }

@media screen and (max-width:1000px) {
#bnr_block { margin:0 auto 5px auto; }
#bnr_block div { width:100%; box-sizing:border-box; padding:0 15px; }
#bnr_block div ul { max-width:100%; }
#bnr_block div li { vertical-align:top; width: 50%; }

#sub_bnr { max-width:100%; box-sizing:border-box; padding:0 15px; }
#sub_bnr ul li { width:33.33%; float:left; margin:0 0 5px 0; }
#sub_bnr ul li:nth-of-type(3n+1) { clear:both; }
#sub_bnr ul li img {  width:100%; }

#topics {  margin:0 0 50px 0; }
#topics h3 { padding:0 15px 15px 15px; box-sizing:border-box; max-width:100%; }
#topics h3 img { max-width:64px; height:auto; }
#topics .bg ul { max-width:100%; }
#topics .bg li { width:25%; box-sizing:border-box; padding:0; display:block; }
#topics .bg li a { width:100%; position:relative; height:auto; box-sizing:border-box; padding:10px 10px 30px 10px; top:0; left:0; display:block; background-image:none; }
#topics .bg li a::after { content:''; background:url(../img/topics_arw.png) center center no-repeat; width:12px; height:22px; bottom:5px; right:10px; display:block; position:absolute; }
#topics .bg li a.pc:hover { background:none;  }
#topics .bg li a.pc:hover::after { content:''; background:url(../img/topics_arw_on.png) center center no-repeat; width:12px; height:22px; bottom:5px; right:10px; display:block; position:absolute; }
#topics .ymd {  white-space:normal; }

#ft_menu { height:auto; background:url(../img/ft_menu_bg.jpg) center bottom / cover no-repeat; box-sizing:border-box; padding:15px; margin:0 0 0 0; }
#ft_menu .menu_box { max-width:100%; }

#ft_menu .menu_box .box { width:32%; box-sizing:border-box; margin:0 2% 2% 0; }
#ft_menu .menu_box .box:nth-of-type(3n) { margin:0 0 2% 0; }
#ft_menu .menu_box .box:nth-of-type(3n+1)  { clear:both; }
}
@media screen and (max-width:800px) {
#sub_bnr ul li,#sub_bnr ul li:nth-of-type(3n+1) { clear:none; width:100%; float:none }
#sub_bnr ul li:nth-of-type(odd) { clear:both; float:none; }

#topics .bg ul::after {  display:none; }
#topics .bg {  }
#topics .bg ul { display:flex; flex-direction:row; align-items:stretch; flex-wrap:wrap; }
#topics .bg li  { flex-basis:50%; width:auto; height:auto; align-self:stretch; float:none; margin:0; padding:0 0 10px 0 }
#topics .bg li a { height:100%; color:#fff; text-decoration:none; padding:10px; }
#topics .ymd { margin:0 20px; }


#ft_menu .menu_box .box { width:49%; margin:0 0 2% 0 !important; height:150px; }
#ft_menu .menu_box .box:nth-of-type(3n),
#ft_menu .menu_box .box:nth-of-type(3n+1)  { clear:none; }
#ft_menu .menu_box .box:nth-of-type(odd) { clear:both; }
#ft_menu .menu_box .box:nth-of-type(even) { float:right; }

#ft_menu .box h4 { top:15px; left:15px; max-width:calc(100% - 30px); }
#ft_menu .box a { display:inline-block; padding:0 2em 0 0; line-height:2em; bottom:15px; left:15px; font-size:14px; background:url(../img/ft_menu_arw.png) right top / auto 200% no-repeat; }

}
@media screen and (max-width:480px) {
#topics .bg li { flex-basis:100%; }
#ft_menu .box a { font-size:3vw; }

#bnr_block div li { display: block; width: 100%; }
}