@charset "utf-8";

.sp{ display: none !important; }

@media screen and (max-width: 1060px) {
  body { min-width: auto; }
  .mvimg img { width:53%; }
  .mvimg::before { height: 2px; top: 42%; }
  .maintit { width:94%; margin: 1% auto 2%; }
  .maintit img{ width:35%; }
  .mvcont { width:94%; }
  .mvcont .nav { margin-top:1%; width:18%; }
  .mvcont .nav li { padding: 0 0 5% 5%; margin-bottom: 3%; }
  .mvcont .nav li img{ width:86%; }
  #MainImgArea{ margin-bottom:0; height:auto; }
  #MainImgArea .mvcont .read { width: 45%; }
  #MainImgArea .mvcont .read .tit { width:105%; margin-top: -3%; }
  #MainImgArea .mvcont .read p { font-size: 1.7vw; margin: -5% auto 0; padding: 1em .5em; }

  .Account{  width: 100%; min-width: auto;  margin: 0 auto 0;}

  .Account h2 { width: 94%; font-size: 4.3vw;  box-sizing: border-box; margin: 1em auto 0; background-size:120% auto; min-height: auto; line-height:1.3; }
  .Account h2 > span { max-width:640px; width:100%; }
  .Account h2:before{ width: 3em; height: 3em; background-size: contain;}



}


@media screen and (max-width: 810px) {
  #MainArea{ background: none; }
  #MainArea img{ max-width: 100%; height: auto; }
  .pc{ display: none !important; }
  .sp{ display: block !important; }
  body:before{ background: #d6e2e7; }
  .nbo_header,.nxt_header{ display: none; }
  #sp_header{ background: #fff; text-align: center; padding: 5px; }
  #sp_header img{ width: 210px; margin: 0 auto; padding: 5px 0; }
  .social_buttons{ width: 95%; margin: 0 auto;  }
  .social_buttons li { margin-right: 5px; }
  .gnav { top: -100px; }
  .gnav ul{ width: 90%; padding: 5px 0; }
  .gnav ul li:not(:first-child):before{ margin: 0 3px; font-size: 1.7vw; }
  .gnav ul li a{ font-size: 1.7vw; padding: 5px 0; }
  .bnr{ right: 0; align-items: center; bottom: -20%; width: 100%; padding: 5% 3%; background-color: rgba(255,255,255,0.8); max-width: 100%;  }
  .bnr a.pagetop{ padding-right: 0; width: 15%; }
  .bnr a.img{ max-width: 100%; width: 82%; border: 2px solid #4186fd; }
  .bnr.on{ right: 0; }

  .maintit { height: auto; }
  .maintit h1{ left: 0; position: static; }
  .mainimg{ height:auto; background:none; }
  .mainimg h1{ position:static; transform:translate(0,0); width:100%; }
  #MainImgArea .read{ width:100%; }
  #MainImgArea .read p { font-size:3.7vw; padding: 2em 1.5em; }
  
  #MainImgArea {
    padding: 0 0;
    background: none;
    height: auto;
    min-width: auto;
  }
  
  
  .read > p { padding: 0 7%; font-size: 3.5vw; }
  .vol-list{ display: block; width: 90%; margin: 0 auto 5%; }
  .vol-list li{ width: 100%; padding: 1px 0; }
  .vol-list .sub{ font-size: 90%; }
  .vol-list .tit{ font-size: 100%; }
  .vol-list li.coming .sub{ padding: 0 0 3em; }
  
  a.linkBtn { width: 90%; margin-top: 0;  }
  a.linkBtn:before{ left: 3px; top: 3px; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 6px; }
  
  #content-inner{ padding-top: 0; }
  
  #content{ width: 100%; font-size: 15px; }
  #leftArea{ float: none; width: 100%; }
  #rightArea{ float: none; width: 100%; margin-top: 0; }
  #index{ display: none; }
  


  .acc { margin:20px auto; width: 86%; font-size: 3.5vw; }
  .acc > p { width: 100%; }
  .acc .st { margin-top:.5em; }
  
  .flex2 { display:block; }
  .flex2 > div{ margin-top:1.3em; width:100%; }
  
  .new:after{ right: -10px; top: -10px; width: 40px; height: 40px; }
  
  ul.logolist{ width: 90%; margin: 0 auto; padding: 0 0; justify-content: space-between; text-align: center; }
  ul.logolist li{ padding: 3% 0; width: 48%; }
  ul.logolist li a{ max-width: 230px; margin:  auto; }
  ul.logolist li a.movlink:before{ width: 80%; left: 10%;  }

  .link-box{ font-size: 3.5vw; }
  .link-box > li{ padding: 5%; }
  .link-box > li a{ display: block; font-size: 140%;}
  .link-box > li a span{ display: block; text-align: left; margin-top: .5em; }

  .fig{ margin: 4% 0; width: 100%; margin-left: 0; }
  .fig .figimg,.fig .figtxt{ width:100%; }
  .fig h3 { font-size: 3.2vw;   }
  .fig .figtxt h3{ text-align: left; padding: .3em .8em; }
  .fig > p{ font-size: 90%;}
  
  .photo{ width: 100%; }
  .photo.R, .photo.L { float: none; transform: translateX(0); }
  .photo.R > p,.photo.L > p { padding: 0; }
  .photo.R, .img.R { margin: 5px auto 15px; text-align:center; }

  .photoW{
  margin: 2em 0;
}
.photoW > div{ display: block; }
.photoW .ph{ width: 100%; transform: translateX(0); text-align: center; }
.photoW .txt{ width: 90%; font-size: 90%; padding: 2em 0; transform: translateX(0); }
.photoW.R > div{ transform: translateX(0); }
.photoW.R .ph{ transform: translateX(0); }
.photoW.R .txt{ transform: translateX(0); }
  
  .menu.type2 h2{ background-color: #003571; font-size: 100%; text-align: center; }
  .menu.type2 ul{ background-color: #e1ecf3; }
  .menu.type2 ul li a{ font-size: 110%; }
  #footArea { margin: 30px auto 0; padding: 5% 0; }
  #footArea > div{ padding: 0 5% 15px; }
  #footArea h2{ font-size: 90%; text-align: center; margin-top: 15px; }
  
  .Account.link-area{ width:90%; }
  .Account.link-area h3 { font-size: 4vw; }
  #linkArea{ font-size: 3.6vw; }
  
  .sp_contact{ border: 2px solid #ddd; padding: 0 15px 20px; }
  .sp_contact h2{ font-size: 100%;
  background-color: #000;
  color: #fff;
  position: relative;
  padding: 7px 15px;
  margin: 20px 0 15px;
  letter-spacing: 0.3em; }

  dl { width: 100%; }
  
  
  .footArea{
  margin: 0 auto 0;
  padding: 10% 5%;
  width: 100%;
  font-size: 2.8vw;
  }
  .footArea:before{
  width: 100%;
  height: 100%;
  transform: translateX(0);
  left: 0;
  background: url(contact_bg_sp.jpg) no-repeat; background-size: cover;
}
  .footArea h2 { font-size:320%;  }
  .footArea dl{ width: 100%; display: block; }
.footArea dl dt{ font-size: 2.8vw; padding-bottom: 1em; }
.footArea dl dd{ font-size: 3.6vw; padding: 1em 0 0; border-width: 1px 0 0 0; margin: 0; }
.footArea dl dd p{ font-size: 2.6vw; }
.footArea .logo{ margin: 20px 0; }
  
  

}