@charset "UTF-8";
/*** THEME ***/
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}
@font-face {
  font-family: "FuturaHeavyBT"; /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("/common/css/fonts/FuturaHeavyBT.ttf");
}
body {
  background: repeating-linear-gradient(-45deg, #989898, #989898 8px, #f0f0f0 4px, #f0f0f0 10px);
  background-size: 14px 14px;
}

.h1_ttl,
.h1_logo {
  font-size: 3.5714285714rem;
  margin-bottom: 2.1428571429rem;
  display: flex;
  align-items: center;
  color: #323232;
  font-family: "FuturaHeavyBT", "Century Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  font-weight: bold;
}
.h1_ttl .icon,
.h1_logo .icon {
  margin: 0 1.4285714286rem 0 0;
  width: 5rem;
  border-radius: 0 0 1.4285714286rem 0;
  box-shadow: 4px 4px 8px #999999;
}
.h1_ttl .logo_txt,
.h1_logo .logo_txt {
  width: auto;
  height: 5rem;
}
.h1_ttl span,
.h1_logo span {
  font-size: 2.1428571429rem;
}
@media only screen and (max-width: 736px) {
  .h1_ttl,
.h1_logo {
    font-size: 2.4rem;
    margin-bottom: 1.4285714286rem;
  }
  .h1_ttl span,
.h1_logo span {
    font-size: 1.6rem;
  }
}

.h1_logo {
  font-size: 2.1428571429rem;
}
.h1_logo .icon {
  border-radius: 0 0 1.0714285714rem 0;
  width: 3.5714285714rem;
}
.h1_logo .logo_txt {
  width: auto;
  height: 3.5714285714rem;
}

.bg_line {
  border-bottom: 0.2142857143rem solid #fff;
}

.bg_line2 {
  border-bottom: 0.2142857143rem solid #323232;
}

.bg_line3 {
  border-top: 0.2142857143rem solid #fff;
}

.bg_line4 {
  border-top: 0.2142857143rem solid #323232;
}

#contents .sub_imgarea {
  background: #f0f0f0;
  border-bottom: 0.3571428571rem solid #323232;
}
@media only screen and (max-width: 736px) {
  #contents .sub_imgarea {
    height: auto;
  }
}
#contents .sub_imgarea .m_c {
  max-width: 100rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 736px) {
  #contents .sub_imgarea .m_c {
    height: auto;
    padding: 2.8571428571rem 0;
  }
}
#contents .sub_imgarea .detail {
  max-width: 100rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2% 1%;
}
@media only screen and (max-width: 736px) {
  #contents .sub_imgarea .detail {
    display: block;
    width: 98%;
  }
}
#contents .sub_imgarea .detail .sub_txt {
  width: 100%;
}
@media only screen and (max-width: 736px) {
  #contents .sub_imgarea .detail .sub_txt {
    width: 100%;
  }
}
#contents .sub_imgarea .detail .sub_txt .for_txt {
  display: flex;
  align-items: center;
  font-size: 1.4285714286rem;
}
@media only screen and (max-width: 736px) {
  #contents .sub_imgarea .detail .sub_txt .for_txt {
    font-size: 0.95em;
  }
}
#contents .sub_imgarea .detail .sub_txt .for_txt img {
  width: 3.5714285714rem;
  margin: 0 0.7142857143rem 0 0;
}
#contents .sub-contents {
  position: relative;
  max-width: 107.1428571429rem;
  margin: 0 auto;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents {
    margin: 0 2%;
  }
}
#contents .sub-contents .contents_area {
  max-width: 100rem;
  margin: 2.8571428571rem auto;
  background: #fff;
  padding: 0;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area {
    width: 96%;
    padding: 0;
    margin: 1rem auto;
  }
}
#contents .sub-contents .contents_area #diagram {
  width: 100%;
  height: auto;
  position: relative;
}
#contents .sub-contents .contents_area #diagram > div {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
}
#contents .sub-contents .contents_area #diagram > div a {
  position: relative;
}
#contents .sub-contents .contents_area #diagram > div a::before {
  content: "";
  width: 100%;
  height: 100%;
  background: #555;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div a::before {
    display: none;
  }
}
#contents .sub-contents .contents_area #diagram > div a:hover {
  cursor: pointer;
}
#contents .sub-contents .contents_area #diagram > div a:hover::before {
  content: "";
  opacity: 0.5;
}
#contents .sub-contents .contents_area #diagram > div a:hover img {
  opacity: 1;
}
#contents .sub-contents .contents_area #diagram > div img {
  display: block;
}
#contents .sub-contents .contents_area #diagram > div img.pc {
  display: block;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div img.pc {
    display: none;
  }
}
#contents .sub-contents .contents_area #diagram > div img.sp {
  display: none;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div img.sp {
    display: block;
  }
}
#contents .sub-contents .contents_area #diagram > div.back {
  position: static;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div.back {
    margin: 0 auto;
  }
}
#contents .sub-contents .contents_area #diagram > div.pa {
  width: 14.5rem;
  top: 7.6428571429rem;
  left: 5.2142857143rem;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div.pa {
    width: 21.8%;
    top: 11.6%;
    left: 32.4%;
  }
}
#contents .sub-contents .contents_area #diagram > div.cu {
  width: 14.5rem;
  top: 7.6428571429rem;
  left: 22rem;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div.cu {
    width: 21.8%;
    top: 25%;
    left: 32.4%;
  }
}
#contents .sub-contents .contents_area #diagram > div.la {
  width: 14.5rem;
  top: 7.6428571429rem;
  left: 38.5714285714rem;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div.la {
    width: 21.8%;
    top: 38.4%;
    left: 32.4%;
  }
}
#contents .sub-contents .contents_area #diagram > div.pv {
  width: 14.5rem;
  top: 7.6428571429rem;
  left: 55.3571428571rem;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div.pv {
    width: 21.8%;
    top: 52%;
    left: 32.4%;
  }
}
#contents .sub-contents .contents_area #diagram > div.ar {
  width: 14.5rem;
  top: 19.7857142857rem;
  left: 5.2142857143rem;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div.ar {
    width: 21.8%;
    top: 11.6%;
    left: 7.2%;
  }
}
#contents .sub-contents .contents_area #diagram > div.in {
  width: 14.5rem;
  top: 19.7857142857rem;
  left: 22rem;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div.in {
    width: 21.8%;
    top: 25%;
    left: 7.2%;
  }
}
#contents .sub-contents .contents_area #diagram > div.pr {
  width: 14.5rem;
  top: 19.7857142857rem;
  left: 38.5714285714rem;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div.pr {
    width: 21.8%;
    top: 38.4%;
    left: 7.2%;
  }
}
#contents .sub-contents .contents_area #diagram > div.mp {
  width: 14.5rem;
  top: 19.7857142857rem;
  left: 55.3571428571rem;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div.mp {
    width: 21.8%;
    top: 52%;
    left: 7.2%;
  }
}
#contents .sub-contents .contents_area #diagram > div.mo {
  width: 15.2857142857rem;
  top: auto;
  bottom: 5.7142857143rem;
  left: 29.8571428571rem;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div.mo {
    width: 21.8%;
    top: 31.8%;
    left: auto;
    right: 6%;
    bottom: auto;
  }
}
#contents .sub-contents .contents_area #diagram > div.cs {
  width: 15.2857142857rem;
  left: auto;
  right: 3.1428571429rem;
  top: 26.9285714286rem;
}
@media only screen and (max-width: 736px) {
  #contents .sub-contents .contents_area #diagram > div.cs {
    width: 21.8%;
    top: auto;
    bottom: 2.4%;
    left: 39.2%;
  }
}
#contents .sub-contents .contents_area #diagram > div.arrow {
  pointer-events: none;
}

@media only screen and (max-width: 736px) {
  .remodal {
    width: 100% !important;
    padding: 40px 2% !important;
  }
}
.remodal .modal_ttl {
  font-size: 1.7142857143rem;
  margin-bottom: 1.4285714286rem;
  border-bottom: 0.1428571429rem solid;
  text-align: left;
}
.remodal p {
  margin-bottom: 1.4285714286rem;
  text-align: left;
}

button {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}