@charset "utf-8";

.sp{ display: none !important; }

@media screen and (max-width: 810px) {
  #MainArea{ background: none; font-size: 2.6vw; }
  #content{ width: 100%; font-size: 2.6vw; background-color:#fff; padding-top:5%; }
}
@media screen and (max-width: 550px) {
  #MainArea{ font-size: 3.2vw; }
  #content{ font-size: 3.2vw; }
}

@media screen and (max-width: 810px) {
  #MainImgArea h1{ height:auto; }
  #MainImgArea h1 img{ height: auto; object-fit: contain; }
  #content::before {}
  #content::after { top:0; height:4px; }
  #mainbg{ display:none; }

  img{ max-width:100%; height:auto; }

  .pc{ display: none !important; }
  .sp{ display: block !important; }
  body { background: none; min-width: auto; }
  .social_buttons{ width: 95%; margin: 0 auto;  }
  .social_buttons li { margin-right: 5px; }
  
  

  #MainImgArea {  }
  .maintit{ margin: 0 auto; padding: 0 0 0; }
  .maintit .sub{ width:60%;  margin:7% 0 10% 32%; }
  .maintit h1 { width:74%; margin:0 auto 1em; }
  .maintit h1 img.tit2{ margin:3% 0 0 1%; width:85%; }
  #MainImgArea .read > div{ display: block; font-size:100%;  }
  #MainImgArea .read .name-area{ width:100%;  margin-bottom:1em; }
  #MainImgArea .read .name-area .name{ font-size:130%; }
  #MainImgArea .read .profile{ width:100%; }
  
  
  .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; }
  #leftArea{ float: none; width: 100%; }
  #rightArea{ float: none; width: 100%; margin-top: 0; }
  #index{ display: none; }
  .Account{  width: 100%; min-width: auto;  margin: 0 auto 0;}
  .Account.fund{ margin:7% auto 6%; }

  .Account h2 { font-size:150%; height: 8rem; }
  .Account h2::before { height: 8rem; width: 150vw; }

  .Account h2 > b{ padding-left:.2em; }
  .Account h2 > span, .nextBtn > span { padding: 0 1.2em; }
  .Account h2 > span b,.nextBtn > span b{ border-bottom: 2px solid #b23112;  }

  .nextBtn { font-size:110%; }
  

  

.Account .acc > h3 { margin:1em auto; font-size:110%; }

.Account.type2 { width:90%; padding:5%; }
.Account.type2 h3 { font-size:110%; margin: 0 0 1em; }
.Account.type2 .txt {
  padding: 0;
}


  .acc { padding:4% 1%; box-sizing:border-box; }
  .acc > p { width: 100%; }
  .acc .st { margin-top:.5em; }
  
  .flex2 { display:block; }
  .flex2 > div{ margin-top:1.3em; width:100%; }

  a.link-btn { font-size: 100%; }
  .logo-flex { display:block; text-align: center; }
  .logo-flex .logo { width:80%; margin:1em auto; }
  .logo-flex p {  text-align: center; }

  .next h3 { margin-bottom:1em; }
  .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{  }
  .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: 20px 0; padding: 4% 0; box-sizing: border-box; margin-left: 0; }
  .fig .figimg,.fig .figtxt{ width:100%; }
  .fig h3 {  font-size:100%;  }
  .fig .figtxt h3{ text-align: left; padding: .3em 0; }
  .fig > p{ font-size: 90%;}
  
  .photo{ width: 110%; transform: translateX(-5%); }
  .photo.R, .photo.L { float: none; transform: translateX(0); margin: 1em auto; max-width:100%; text-align:center; }
  .photo.R > p,.photo.L > p { padding: 0; }

  .photoW{
  margin: 0 0;
  background: rgb(220,230,231);
}
.photoW:before{ display:none; }
.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); margin:0 auto; }
.photoW .txt .name span { font-size:130%; }
.photoW.R > div{ transform: translateX(0); }
.photoW.R .ph{ transform: translateX(0); }
.photoW.R .txt{ transform: translateX(0); margin:0 auto; }
.photoW .txt > div {transform: translateX(0);}

.imgwid { margin-left:0; }


.ph-wid { 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%; }
  
  .Account.link-area{ width:90%; }
  .Account.link-area > div { padding: 1em 0; }
  .Account.link-area h3 {  }
  .linkArea{  }
  
  .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%; }

  .link-area h3 { font-size:110%; }
  .footArea h2 { font-size:100%; }
  
  
  

}


@media screen and (max-width: 550px) {
  .Account h2 { height: 6rem; }
  .Account h2::before { height: 6rem; }

}