@import url(base.css);
@import url(common.css);
@import url(lib.css);
/*PC*/
/*SP*/
/* ---------------------------------
Index
---------------------------------- */
#mainv { width: 1000px; margin: 0 auto; position: relative; height: 464px; }
#mainv h2 { padding: 70px; }
#mainv .btn { position: absolute; bottom: 89px; left: 70px; }
#mainv .btn a { width: 110px; display: block; border: solid 1px #e60012; line-height: 40px; text-align: center; color: #e60012; font-size: 14px; font-weight: bold; }
#mainv .btn a:hover { background: #e60012; text-decoration: none; color: white; }

.container { padding: 30px 0; padding-bottom: 60px; }

ul#tnav { zoom: 1; margin-bottom: 60px; }
ul#tnav:after { display: table; clear: both; content: ""; }
ul#tnav:before { display: table; content: ""; }
ul#tnav li { background: white; width: 334px; height: 185px; margin-right: -1px; border: solid 1px #ccc; padding: 30px; float: left; }
ul#tnav li dl dt { font-size: 18px; font-weight: bold; line-height: 1.6em; letter-spacing: 1px; color: #e60012; margin-bottom: 5px; }
ul#tnav li dl dd { font-size: 14px; line-height: 1.8em; }
ul#tnav li.nav01 { background: white url(../img/index/img01.png) no-repeat 85% 60%; }
ul#tnav li.nav02 { background: white url(../img/index/img02.png) no-repeat 85% 60%; }
ul#tnav li.nav03 { background: white url(../img/index/img03.png) no-repeat 85% 60%; }

.messagebox { zoom: 1; margin-bottom: 60px; }
.messagebox:after { display: table; clear: both; content: ""; }
.messagebox:before { display: table; content: ""; }
.messagebox .cont_l { width: 500px; float: left; }
.messagebox .cont_r { width: 450px; float: right; }
.messagebox .cont_r dl { margin-top: 25px; }
.messagebox .cont_r dl dt { font-size: 17px; font-weight: bold; margin-bottom: 20px; letter-spacing: 3px; color: #e60012; }
.messagebox .cont_r dl dd { font-weight: bold; font-size: 24px; letter-spacing: 2px; margin-bottom: 30px; }
.messagebox .cont_r p a { display: block; width: 165px; padding: 10px 15px; text-align: center; font-size: 14px; font-weight: bold; letter-spacing: 2px; color: #e60012; border: solid 1px #e60012; }
.messagebox .cont_r p a:hover { background: #e60012; color: white; text-decoration: none; }

ul.exbox { zoom: 1; }
ul.exbox:after { display: table; clear: both; content: ""; }
ul.exbox:before { display: table; content: ""; }
ul.exbox li { margin-right: -1px; width: 50%; float: left; }

/*SP*/
@media (max-width: 640px) { #mainv { width: 100%; margin: 0 auto; height: inherit; padding: 0 15%; text-align: center; }
  #mainv h2 { width: 200px; margin: 0 auto; padding: 30px 0; padding-bottom: 100px; background: url(../img/sp/index/main_bg.png) no-repeat center bottom; background-size: 100%; }
  #mainv h2 img { width: 50%; }
  #mainv .btn { position: static; margin-top: 15px; }
  #mainv .btn a { width: 100%; }
  .container { padding: 30px 0; padding-bottom: 40px; }
  ul#tnav { width: 90%; margin: 0 auto; zoom: 1; margin-bottom: 40px; }
  ul#tnav:after { display: table; clear: both; content: ""; }
  ul#tnav:before { display: table; content: ""; }
  ul#tnav li { background: white; width: 100%; height: inherit; margin-right: 0px; margin-bottom: -1px; padding: 20px; float: none; }
  ul#tnav li.nav01 { background: white url(../img/index/img01.png) no-repeat 85% 60%; background-size: 100px; }
  ul#tnav li.nav02 { background: white url(../img/index/img02.png) no-repeat 85% 60%; background-size: 100px; }
  ul#tnav li.nav03 { background: white url(../img/index/img03.png) no-repeat 85% 60%; background-size: 100px; }
  .messagebox { zoom: 1; margin-bottom: 40px; }
  .messagebox:after { display: table; clear: both; content: ""; }
  .messagebox:before { display: table; content: ""; }
  .messagebox .cont_l { width: 100%; float: none; }
  .messagebox .cont_r { width: 100%; padding: 0 5%; float: none; }
  .messagebox .cont_r dl { margin-top: 15px; }
  .messagebox .cont_r dl dt { font-size: 17px; font-weight: bold; margin-bottom: 3px; letter-spacing: 3px; color: #e60012; }
  .messagebox .cont_r dl dd { font-weight: bold; font-size: 20px; letter-spacing: 2px; margin-bottom: 15px; }
  .messagebox .cont_r p a { display: block; width: 90%; margin: 0 auto; padding: 10px; }
  ul.exbox { zoom: 1; }
  ul.exbox:after { display: table; clear: both; content: ""; }
  ul.exbox:before { display: table; content: ""; }
  ul.exbox li { margin-right: -1px; width: 100%; float: none; padding: 0 5%; margin-bottom: -1px; }
  ul.exbox li img { width: 100%; vertical-align: bottom; } }

/*ローディングアニメーション*/
#loader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
}
#loader .loader-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #efefef;
 
}
#loader .loader-slide img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 40px;
}
#loader .loader-slide.open {
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 2s;
}
@keyframes slideOut {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}