@charset "utf-8";

.sp{ display: none !important; }
body { min-width: 350px; }
@media screen and (max-width: 1000px) {
  .social_buttons{ width: 95%; margin: 0 auto;  }
  .social_buttons li { margin-right: 5px; }
  #ContentsArea { background:none; }
  #MainArea{ font-size: 1.6vw; }
  #MainImgArea { background-size:auto 90%; }
  .maintit { width:90%; }
  .maintit .m1{ width:42%; margin-top:1em; }
  .maintit .m2{ width:45%; }
  .mainnav { width:90%; }
  #content{ font-size: 1.6vw; background-color:#fff; }
  .Account{ width:94%; }
  .Account h2{ width:66%; }
  .acc { width:66%; }
  .profile{ width:66%; }
  #pickup{ left:calc(50% + 19vw); width:28vw; padding:1em; }
  .photoW.L .txt > div { transform: translateX(10%); }
}


@media screen and (max-width: 810px) {
  #MainArea{ background: none; font-size: 2.6vw; }
  #content{ font-size: 2.6vw; }

  .pc{ display: none !important; }
  .sp{ display: block !important; }
  body { background: none; min-width: auto; }

  #MainImgArea {  }
  .maintit .m1{ width:45%; }
  .maintit .m2{ width:48%; }
  .mainnav{ font-size:105%; }
  #MainImgArea h1{ margin:0 0 0 5%; width: 100%; text-align:center;  }
  #MainImgArea .read{ width:100%; }
  #MainImgArea .read p{ padding: 1.5em 5%; font-size: 95%; }

  #pickup{ position:fixed; left:0; top:auto !important; bottom:0; width:100%; background-color:#000; padding:10px 10px 0; }
  #pickup.fixed{ top:auto !important; }
  #pickup h2{ display:none; }
  #pickup ul{ display:flex; justify-content:space-between; gap:.5em; font-size:75%; }
  #pickup ul li{ margin-bottom:10px; }
  #pickup ul a {  height:100%; box-sizing:border-box; padding:5px; letter-spacing:0; }
  #pickup.c4 ul{ font-size:58%; }

  
  .Account{ width:90%; margin: 3em auto 0; }
  .Account h2{ width:100%; font-size:150%; }
  .Account h2:before{ width:100%; height:4px;  }
  .acc { width:100%; }
  .acc .st { margin-top:.5em; }

  .profile{ width:100%; }
  .profile .txt{ width:70%; padding: 2em; } 
  .profile .img{ width:25%; padding-right:5%; }
  
  .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{  }
  .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; width: 100%; margin-left: 0; }
  .fig .figimg,.fig .figtxt{ width:100%; }
  .fig h3 {    }
  .fig .figtxt h3{ text-align: left; padding: .3em .8em; }
  .fig > p{ font-size: 90%;}
  
  .photo{ width: 100%; }
  .photo.R, .photo.L { transform: translateX(0); margin: 5px 0 15px 0; }
  .photo.R { text-align: right;}
  .photo.R > p,.photo.L > p { padding: 0; }

  .photoW{ margin: 0 auto; max-width:520px; width:100%;  }
.photoW:before,.photoW:after{ display:none; }
.photoW > div{ display: block; }
.photoW .txt > div { padding-top:0; }
.photoW .ph{ width: 100%; transform: translateX(0); margin: 0 auto; text-align: center; }
.photoW .txt{ width: 100%; background: rgb(229,228,226); font-size: 80%; padding: 2em 5%; text-align: center; transform: translateX(0); margin:0 auto; position:static; }
.photoW .txt .name span { font-size:130%; }
.photoW.L .txt > div { transform: translateX(0); }
.photoW.R > div{ transform: translateX(0); }
.photoW.R .ph{ transform: translateX(0); }
.photoW.R .txt{ transform: translateX(0); margin:0 auto; left:0; }
.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%; }
  #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 > 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%; }
  
  #fot-nav { width:100%; gap:2%; }
  #fot-nav li{ width:32%; margin-bottom:2%; }
  
  .footArea{ width: 90%;}
  
  

}

@media screen and (max-width: 550px) {
    .sp2{ display: block !important; }
  #MainArea{ font-size: 3.2vw; }
  #content{ font-size: 3.2vw; }

  .Account h2{ font-size:130%; }
  #pickup{ padding:.5em .5em 0; }
  #pickup ul{ gap:.7em; font-size:65%; }
  #pickup ul li{ margin-bottom:.8em; }
  #pickup ul a{ padding:.5em;}
  #pickup ul p{ margin-top:.5em; }

  #pickup.c4 ul{ flex-wrap:wrap; gap:0; font-size:70%; }
  #pickup.c4 ul li{ width:49%; }

  #fot-nav { gap:4%; }
  #fot-nav li{ width:48%; margin-bottom:4%; }
  #fot-nav li.index{ width:70%; }
}



/* ==========================================================
header
========================================================== */
    
.header_bg {
    background: #EFEFEF;
    box-sizing: border-box;
}
.header_wrap {
    position: relative;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 945px;
    height: 14.5vw;
    padding-right: 20px;
    box-sizing: border-box;
}
.header_logo {
    display: inline-block;
    height: 100%;
    width: 30.84vw;
    position: relative;
}
.header_logo.xtech {
    /*width: 38.548vw;*/
    margin-left: 15px;
}
.header_logo img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 45%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.header_logo.xtech img {
    top: 50%;
}
.header_pr {
    display: inline-block;
    font-size: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 8.585%;
}
.header_pr img {
    width: 100%;
}


@media screen and (min-width: 440px) {
    .header_wrap {
        height: 66px;
    }
    .header_logo {
        width: 179.598px;
    }
    .header_logo.xtech {
        width: 150px;
    }
    .header_pr {
        width: 40px;
    }
}


@media screen and (min-width: 640px) {
  .header_wrap {
    padding-right: 0;
  }
    .header_logo {
        width: 210px;
    }
    .header_logo.xtech {
        width: 176px;
    margin-left: 50px;
    }
}