* {box-sizing: border-box;}

.showAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: showAnime;
 -ms-animation-name: showAnime;
 animation-name: showAnime;
 visibility: visible !important;
}
@-webkit-keyframes showAnime {
 0% { opacity: 0; -webkit-transform: translateY(70px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes showAnime {
 0% { opacity: 0; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


a:hover { opacity: 0.8; }
h2 a:hover {opacity: 1;}

.content {max-width:980px; width: 100%; padding :0 10px; margin: 0 auto;}
.content1500 { margin: 0 auto; width: 1500px; max-width: 100%; }
.pc {display: block;}
.sp {display: none;}

#yoko{display: none;}

header {background:#fff; color:#333; margin: 0 0 5px 0; font-family: "Cinzel","A1明朝", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
header h1 {font-size:10px; padding:5px 0 15px 85px; text-align: left; line-height: 1.6; }
header  h2 {float:left; width: 357px;}
header  #btnWrap {float:right; width: calc(100% - 357px);}
header  #btnWrap .logoR {text-align: right; margin: 0 0 15px 0;}
header  #btnWrap .logoR li {display: inline-block; vertical-align: middle;}
header  .btnR {text-align: right;}
header  .btnR li {display: inline-block; vertical-align: middle; margin: 0 0 0 5px; line-height: 1;}
header  .btnR li a {font-size: 12px;}
header  .btnR li a:hover {color: #000;}


#gnav {background: #3a3a3a; font-family: "Cinzel","A1明朝", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
#gnav .btnSP {display: none;}
#gnav .content li{float:left; width:10%; border-left: 1px solid #838383; letter-spacing: 2px; position: relative;}
#gnav .content li:nth-of-type(10) {border-right: 1px solid #838383; background: #c82a10;}}
#gnav .content li span{display:none;}
#gnav .content li a {display: block; padding: 10px 0; text-align: center; line-height: 1; color: #fff; font-size: 11px;}
#gnav .content li a:hover {background: #000; opacity: 1; text-decoration: none;}
#gnav .content li .active {background: #000;}
#gnav .content li:nth-of-type(10) .active {background: #c82a10;}
#gnav .content li .disable {color: #838383;}
#gnav .content li .disable:hover {color: #838383; background: #3a3a3a;}

#gnav .content li:nth-of-type(6):before ,#gnav .content li:nth-of-type(10):before {
  content: "New";
  position: absolute;
  top: 0;
  right: 0;
  margin: auto;
  z-index: 10;
  font-size: 8px;
  line-height: 1;
  background-color: #9a0000;
  color: #FFF;
  padding: 0;
}


#main {background: #000; font-family:"A1明朝", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

.btnRequest {text-align: center;}
.btnRequest > p { margin: 20px 0 0; font-size: 16px; }

.caption {font-size: 10px; text-align: right; color: #fff; margin: 5px 0 0 0; padding: 0 5px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}
.logoAds {margin: 0 auto 50px; position: relative;}
.logoAds ul li { float: left; width: 28.125%; margin: 0 7.8125% 20px 0; min-height: 90px; }
.logoAds ul li:nth-of-type(3n) {margin: 0 0 20px;}

.logoAds #move_btn {display: none;}
.logoAds #move_btn a {display: block; width: 100%; height: 100%;}
.logoAds .prev, .logoAds .next{background: url('../../img/common/move_icon.png') no-repeat left center; width: 19px; height: 57px; cursor: pointer; position:absolute; top:50%; margin-top:-29px;}
.logoAds .prev {left:0;}
.logoAds .next {transform: rotate(180deg); right:0;}

.mainCap {margin: 0 auto; padding: 0 10px 50px; font-size: 10px; background: #000; color: #fff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}
.mainCap .btn {padding: 60px 0 40px; text-align: center;}
.mainCap .btn > p {margin: 20px 0 0;}
.mainCap .btn img{margin: 0 10px 20px 10px}

.txtm{font-family:"YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; display:inline !important;}

footer nav {background: #3a3a3a; color:#fff; font-size: 11px;}
footer nav li {float:left; border-left:1px solid #838383; line-height: 1;}
footer nav li:last-of-type {border-right:1px solid #838383;}
footer nav li a {padding: 10px; display: block;}
footer nav li a:hover {text-decoration: underline; color: #fff;}
footer nav li a.active {text-decoration: underline;}
footer nav li .disable {color: #8c8b8b;}
footer nav li .disable:hover {text-decoration: none; opacity: 1; color: #8c8b8b;}

footer #fBottom {margin: 20px auto;}
footer #fBottom #fContact { float: right; width: 66%; }
footer #fBottom #fContact .phone {font-size: 26px; font-family: "Cinzel","A1明朝", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
footer #fBottom #fContact p {font-size: 9px; margin: 0 0 5px 0; text-align: right;}
footer #fBottom #fContact ul {display: table; width: 100%;}
footer #fBottom #fContact ul li {line-height: 1;}
footer #fBottom #fContact ul li:nth-of-type(1) {display: table-cell; vertical-align: middle;}
footer #fBottom #fContact ul li:nth-of-type(2) {display: table-cell; vertical-align: middle; text-align: right; padding: 0 0 0 5px;}

footer #fBottom #fLogo {float: left; width: 21%;}

footer #fLink {margin: 0 auto 10px; font-size: 12px;}
footer #fLink li {position: relative; padding: 0 0 0 10px; float:left; margin: 0 3% 0 0; text-align: left;}
footer #fLink li::before {position: absolute; left: 0; top: 4px; content: '>'; font-size: 8px;}
footer #fLink li:nth-child(3n+1) {width: 25%;}
footer #fLink li:nth-child(3n+2) {width: 25%;}
footer #fLink li:nth-child(3n) {width: 27%; margin: 0 0 0 0;}
footer #fLink li a{text-decoration:underline;}
footer #fLink li a:hover {text-decoration: none; color: #000;}

footer #copyright {text-align:right; font-size:10px; line-height:1; padding:5px 10px 20px;}

#pageTop {position: fixed; bottom: 20px; right: 20px; z-index: 99999; opacity: 0.8;}
#pageTop a {display: block;padding: 3px 5px; border-radius: 5px; background: #9a9a9a; color: #fff; font-weight: bold; text-align: center; font-size: 10px; }
#pageTop a:hover {opacity: 0.7;}

/*popup*/
#popUp .content, .modal .content {max-width: 670px; margin: 0 auto 30px; padding: 0 10px;}
.modal .content { max-width:750px !important; padding:30px 10px 0 10px;}
#popUp .content .img{ text-align: center; padding-right: 20px; padding-left: 20px; padding-bottom: 55px; }
.modal .content .img { text-align:center; padding:0 20px 30px 20px;}
#popUp .content .cap > p, .modal .content .cap > p {font-size: 10px; line-height: 1; margin-bottom: 10px;}
#popUp .content .cap > p > span, .modal .content .cap > p > span {margin: 0 10px 0 0;}

#popUp header {width: 100%; padding: 20px 10px;}
/*#popUp header .content {display: table;}
#popUp header .content h1 {display: table-cell; vertical-align: middle; width: 65%; padding: 0; margin: 0;}
#popUp header .content .btnR { display: table-cell; vertical-align: middle; width: 42%; text-align: right; padding: 0 0 0 20px; }*/

#popUp header .content {display: table; padding-top: 10px;}
#popUp header .content h1 {display: table-cell; vertical-align: middle; width: 60%; padding: 0; margin: 0;}
#popUp header .content .btnR { display: table-cell; vertical-align: middle; width: 40%; text-align: right; padding: 0 0 0 20px; }

#popUp #zoom { display: none; text-align: center; padding-bottom: 10px; }
#popUp footer .logo { margin: 0 auto 15px; text-align: left; }


.ftNav{background-color: #000; padding: 30px 10px;}

.ftNav .inner{ max-width: 1000px; margin: auto;}	
.ftNav .inner ul{padding-left: 1%;}	
.ftNav .inner ul li{width: 32%; margin-right: 1%; float: left;margin-bottom: 10px;}
.ftNav .inner ul li:nth-child(3n){margin-right: 0;}	



/*===============================
             MEDIA
================================*/

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 736px)
  and (orientation: landscape) {
  #yoko{width: 100%; height: 100%; z-index: 1000000; position: fixed; top: 0px; left:0px; display: block; } 
  #yoko img{width: 100%; height: 100%; }
}

@media only screen and (max-width:980px){  
  #gnav .content li a {font-size: 1.2vw;}
  #fLink li{margin: 0 2% 0 0 !important; width: 45% !important;}
  #fLink li:nth-of-type(2n){margin: 0 0 0 0 !important;}
  footer #fBottom #fContact .phone {font-size: 3vw;}
}
@media only screen and (max-width:800px){
  header h1 {padding:5px 0 15px 0;}
  header .logo h2 {width: 49%;}
  header .logo #btnWrap {width: 49%;}
  header .logo #btnWrap .logoR li {font-size: 0; width: 49%;}
  header .logo #btnWrap .btnR li {width: 23%; margin:0 0 0 0.5%;}
  header .logo #btnWrap .btnR li:nth-of-type(1) {width: 35%; margin:0;}
  header .logo #btnWrap .btnR li:nth-of-type(2) {width: 14%;}
  header .logo #btnWrap .btnR li a{font-size:1.5vw;}
  
  footer #fBottom #fContact {width: 72%;}
  footer #fBottom #fContact p span {display: block;}
}  

@media only screen and (max-width:750px){
  body {background: #000;}
  .pc {display: none;}
  .sp {display: block;}
  
  header {margin: 0;}
  header .logo h2 { float: none; width: 70%; padding: 10px 0; text-align: center; margin-left: auto; margin-right: auto; }
	header .headerBtns{display: none;}

  #gnav {background: #fff; position: fixed; top: 0; left: 0; z-index: 999999; font-size: 3.5vw;}
  #gnav .btnSP {display: block; width: 100%;}
  #gnav .btnSP li {float: left; width: 20%;}
  #gnav .content {padding: 0; display: none;}
  #gnav .content li {width: 50% !important; border-bottom: 1px solid #fff; border-left: 0; text-align: center;}
  #gnav .content li:nth-of-type(2n+1) {border-right: 1px solid #fff;}
  #gnav .content li a {display: block; background: #333333; color: #fff; padding: 20px 10px; font-size: 3vw;}
  #gnav .content li a:hover {background: #9f9f9f;}
  #gnav .content li a.active {background: #9f9f9f;}
  #gnav .content li img {display: none;}
  #gnav .content li span{display:block;}
  
  #main .content{padding-left:0; padding-right:0;}
  .caption {font-size: 8px;}
  .logoAds{max-width:350px;}
  .logoAds #move_btn {display: block;}
  .logoAds ul li{margin:0 !important;}
  .logoAds ul li a{display:block;}
  
  footer {color: #fff;}
  footer nav {background: none; color:#fff; font-size: 3.5vw;}
  footer nav .content {padding: 0;}
  footer nav li {float: left; width: 50%; text-align: center; border-bottom: 1px solid #fff; border-right: 1px solid #fff !important; border-left: 0 !important; line-height: 1.6;}
  footer nav li:nth-of-type(2n) {border-right: 0 !important;}
  footer nav li:nth-of-type(1){border-top: 1px solid #fff;}
  footer nav li:nth-of-type(2){border-top: 1px solid #fff;}
  footer nav li a {display: block; padding: 10px; background: #333333;}
  footer nav li a:hover {background: #9f9f9f; text-decoration: none;}
  footer nav li a.active {background: #9f9f9f; text-decoration: none;}
  
  footer #fBottom {margin: 30px auto; text-align: center;}
  footer #fBottom #fContact {float: none; width: 100%; margin: 0 0 40px 0;}
  footer #fBottom #fContact .sp {font-family: "Cinzel","A1明朝", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
  footer #fBottom #fContact .sp > p {text-align: center;}
  footer #fBottom #fContact .sp > .tit {font-size: 3.5vw;}
  footer #fBottom #fContact .sp > .tel {font-size: 8vw;}
  footer #fBottom #fContact .sp > .tel > span {display: inline-block; vertical-align: middle; line-height: 1.2;}
  footer #fBottom #fContact .sp > .time {font-size: 2.5vw;}
  footer #fBottom #fLogo {float: none; width: 100%; padding: 0 20px;}

  footer #fLink {font-size: 3vw; padding: 0;}
  footer #fLink li {width: 50% !important; max-width: 100% !important; margin: 0 !important; padding: 0; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}
  footer #fLink li::before {content: '';}
  footer #fLink li:nth-of-type(1) {border-top: 1px solid #ccc;}
  footer #fLink li:nth-of-type(2) {border-top: 1px solid #ccc;}
  footer #fLink li a{display: block; padding: 20px 0; text-align: center; text-decoration:none; background: #626262;}
  footer #fLink li a:hover {background: #3a3636; color: #fff;}

  footer #fLink li a span {display: block;}
  
  footer #copyright {text-align: center;}
  
  #popUp {background: #fff;}
  #popUp .content .cap > p > span, .modal .content .cap > p > span {display:inline-block; margin: 0 5px 5px 0;}
  #popUp .content .img{padding:55px 0 55px 10px;}
  #popUp footer {color: #000;}
  #popUp #zoom {display: block;}
  #popUp h3, .modal h3{padding:0 10px;}
  #popUp .cap, .modal .cap{padding:0 10px;}
	
	
.mainCap .btn img{margin: 0 0px 20px 0px}
	
}
@media only screen and (max-width:480px){
  .btnRequest > p {margin: 10px 0 0;}
  .mainCap .btn > p {margin: 10px 0 0;}

  footer #fBottom #fContact .sp > .tit {font-size: 4vw;}
  footer #fBottom #fContact .sp > .tel {font-size: 11vw;}
  footer #fBottom #fContact .sp > .tel > span img {width: 80px;}
  footer #fBottom #fContact .sp > .time {font-size: 3.2vw;}
  .spHide{display: none;}
  .spCenter{text-align: center;}
#group1 p{font-size: 13px;
    line-height: 1.6;}
    #box_08 p.toSmall{font-size: 13px;}    
}
@media only screen and (max-width:320px){  
  /*#gnav .content li a {font-size: 14px;}*/
  footer #fBottom #fContact {margin: 0 auto 25px;}
  footer #fBottom #fContact .sp > .tel > span img {width: 50px;}
  footer #fBottom #fContact .sp > .tit {font-size: 14px;}
  footer #fBottom #fContact .sp > .time {font-size: 12px;}
}

/* AREA information maru */
/* 円の基本形 */
.maru {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column; 
  vertical-align: top;
  margin-right: 5px;
}
/* 円の大きさ */
.size_normal{
  width: 20px;
  height: 20px;
  font-size: 0.8em;
  line-height: 1.5em;
}
/* 円と文字の色 */
.pink1 {
  color: white;
  border: 4px solid #6e4c40;
  background: #6e4c40;
}
.pink2 {
  color: white;
  border: 4px solid #017dcb;
  background: #017dcb;
}
.pink3 {
  color: white;
  border: 4px solid #7d1147;
  background: #7d1147;
}
.pink4 {
  color: white;
  border: 4px solid #ba1852;
  background: #ba1852;
}
.pink5 {
  color: white;
  border: 4px solid #f89e23;
  background: #f89e23;
}
.pink6 {
  color: white;
  border: 4px solid #0e6632;
  background: #0e6632;
}