@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500&display=swap');

body{
  position: relative;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  display: grid;
  grid-template: 
      "... container-top ..."
      "... container-contact ..."
      "... footer ..."
      / auto minmax(800px,1920px) auto;
}

/* MAIN PAGE(背景：青) */
.container-top{
  grid-area: container-top;
  display: grid;
  grid-template: 
    "... ....... ... img" calc(272px * var(--window_ratio))
    "... contact ... img" calc(78px * var(--window_ratio))
    "... ....... ... img" calc(20px * var(--window_ratio))
    "... line    ... img" calc(40px * var(--window_ratio))
    "... ....... ... img" calc(20px * var(--window_ratio))
    "... top     ... img" calc(37px * var(--window_ratio))
    "... ....... ... img" calc(147px * var(--window_ratio))
    "... ....... ... img" calc(124px * var(--window_ratio))
    "... ....... ... ..." calc(160px * var(--window_ratio))
    "... ....... ... ..." calc(146px * var(--window_ratio))
    /* 80 20      275 1220  */
    /calc(85px * var(--window_ratio)) calc(20px * var(--window_ratio)) calc(275px * var(--window_ratio)) calc(1220px * var(--window_ratio));
  color: #ffffff;
  background-color:#191970;
  overflow-x: hidden;
}
.contact-side{
  grid-area: contact;
  display: flex;
  align-items: center;
  margin: 0;
  transform: rotate(270deg) translateY(-45%);
  color: #f3f4f5;
  width: max-content;
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
}
.contact-side-line{
  grid-area: line;
  display: flex;
  border-top: 1px solid #ffffff;
  opacity: 0.5;
  width: calc(0px * var(--window_ratio));
  height: calc(40px * var(--window_ratio));
  transform: translateY(-25%);
}
.contact-side-top{
  grid-area: top;
  display: flex;
  align-items: center;
  margin: 0;
  transform: rotate(270deg) translateX(-50%);
  color: rgba(243, 244, 245, 0.5);
  font-size: calc(20px * var(--window_ratio));
  font-weight: 500;
}
.contact-top-img-bg{
  grid-area: img;
  opacity: 0.5;
  background-color: #191970;
  z-index: 3;
}
.contact-top-img{
  grid-area: img;
  width: 100%;
  z-index: 3;
}
.contact-bg-parent{
  grid-column: 1/-1;
  grid-row: 8/10;
  z-index: 1;
}
.contact-bg{
  margin: 0;
  color: #ffffff;
  mix-blend-mode: normal;
  font-size: calc(400px * var(--window_ratio));
  font-weight: 100;
  line-height: calc(100px * var(--window_ratio));
  letter-spacing: calc(-32px * var(--window_ratio));
  white-space: nowrap;
  text-overflow: clip;
}
@keyframes hscroll {
  0% { transform:translateX(310px); }
  100% { transform:translateX(-100%); }
}
.contact-bg ul {
  display:inline-block;
  margin: calc(100px * var(--window_ratio)) 0;
  padding:0;
  animation:hscroll 60s linear infinite;
}
.contact-bg li {
  display:inline-block;
}
.contact-info-parent{
  grid-area: info;
}




.container-contact{
  grid-area: container-contact;
  display: grid;
  grid-template: 
    "... ........ ... .... ..." calc(142px * var(--window_ratio))
    "... input    ... form ..." calc(20px * var(--window_ratio))
    "... ........ ... form ..." calc(20px * var(--window_ratio))
    "... line-1   ... form ..." calc(60px * var(--window_ratio))
    "... ........ ... form ..." calc(20px * var(--window_ratio))
    "... confirm  ... form ..." calc(20px * var(--window_ratio))
    "... ........ ... form ..." calc(20px * var(--window_ratio))
    "... line-2   ... form ..." calc(60px * var(--window_ratio))
    "... ........ ... form ..." calc(20px * var(--window_ratio))
    "... complete ... form ..." calc(20px * var(--window_ratio))
    "... ........ ... form ..." auto
    "... ........ ... .... ..." calc(320px * var(--window_ratio))
    /* 200 35     135 855 375  */
    /calc(200px * var(--window_ratio)) calc(35px * var(--window_ratio)) calc(135px * var(--window_ratio)) calc(855px * var(--window_ratio)) calc(375px * var(--window_ratio));
  background-color: #ffffff;
}
.contact-side-input{
  grid-area: input;
  font-family: YuGothic;
  margin: 0;
  width: max-content;
  font-size: calc(18px * var(--window_ratio));
  font-weight: bold;
  color: #191970;
  text-decoration: underline;
}
.contact-side-line-1{
  grid-area: line-1;
  display: flex;
  border-top: 1px solid #9c9ca8;
  width: calc(0px * var(--window_ratio));
  height: calc(60px * var(--window_ratio));
  transform: translateY(-15%);
}
.contact-side-confirm{
  grid-area: confirm;
  margin: 0;
  width: max-content;
  font-size: calc(18px * var(--window_ratio));
  font-weight: bold;
  color: #9c9ca8;
}
.contact-side-line-2{
  grid-area: line-2;
  display: flex;
  border-top: 1px solid #9c9ca8;
  width: calc(0px * var(--window_ratio));
  height: calc(60px * var(--window_ratio));
  transform: translateY(-15%);
}
.contact-side-complete{
  grid-area: complete;
  margin: 0;
  width: max-content;
  font-size: calc(18px * var(--window_ratio));
  font-weight: bold;
  color: #9c9ca8;
}
.contact-form-area{
  grid-area: form;
}
.contact-guide{
  display: grid;
  grid-template: 
    "... ... text" auto
    /calc(23px * var(--window_ratio)) calc(230px * var(--window_ratio)) calc(604px * var(--window_ratio));
  background-color: #ffffff;
  margin-bottom: calc(54px * var(--window_ratio));
}
.contact-text{
  grid-column: text;
  margin: 0;
  font-family: YuGothic;
  font-size: calc(13.6px * var(--window_ratio));
  font-weight: 500;
  line-height: 1.86;
  letter-spacing: -0.14px;
  text-align: left;
  color: #272d3d;
}
.contact-form{
  display: grid;
  grid-template: 
    "... ........ answer     " calc(27px * var(--window_ratio))
    "... question answer     " calc(16px * var(--window_ratio))
    "... ........ answer     " calc(27px * var(--window_ratio))
    "... ........ precautions" auto
    /calc(23px * var(--window_ratio)) calc(230px * var(--window_ratio)) calc(604px * var(--window_ratio));
  background-color: #ffffff;
  margin-bottom: calc(50px * var(--window_ratio));
}
.contact-form-question{
  grid-area: question;
  margin: 0;
  font-family: YuGothic;
  font-size: calc(16px * var(--window_ratio));
  font-weight: bold;
  line-height: 1.63;
  letter-spacing: -0.16px;
  color: #272d3d;
}
.contact-form-answer{
  grid-area: answer;
}
.contact-form-answer-lg{
  grid-column: 3/-1;
  grid-row: 1/-1;
}
.contact-form-precautions{
  grid-area: precautions;
  font-family: YuGothic;
  font-size: calc(14px * var(--window_ratio));
  font-weight: 500;
  line-height: 1.86;
  letter-spacing: -0.14px;
  color: rgba(39, 45, 61, 0.5);
  margin-left: calc(29px * var(--window_ratio));
}
.contact-form-answer select{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: YuGothic;
  font-size: calc(14px * var(--window_ratio));
  font-weight: 500;
  line-height: 1.86;
  letter-spacing: -0.14px;
  color: rgba(39, 45, 61, 0.5);
  background-color: #f6f6fa;
  border: none;
  border-left: calc(29px * var(--window_ratio)) solid #f6f6fa;
  border-right: calc(31px * var(--window_ratio)) solid #f6f6fa;
}
.contact-form-answer input{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: YuGothic;
  font-size: calc(14px * var(--window_ratio));
  font-weight: 500;
  line-height: 1.86;
  letter-spacing: -0.14px;
  color: rgba(39, 45, 61, 0.5);
  background-color: #f6f6fa;
  border: none;
  border-left: calc(29px * var(--window_ratio)) solid #f6f6fa;
  border-right: calc(31px * var(--window_ratio)) solid #f6f6fa;
}
.contact-form-answer-lg textarea{
  width: 100%;
  height: calc(176px * var(--window_ratio));
  box-sizing: border-box;
  font-family: YuGothic;
  font-size: calc(14px * var(--window_ratio));
  font-weight: 500;
  line-height: 1.86;
  letter-spacing: -0.14px;
  color: rgba(39, 45, 61, 0.5);
  background-color: #f6f6fa;
  border: none;
  border-top: calc(28px * var(--window_ratio)) solid #f6f6fa;
  border-left: calc(29px * var(--window_ratio)) solid #f6f6fa;
}
.contact-privacy-policy{
  margin: calc(60px * var(--window_ratio)) 0;
  padding: calc(30px * var(--window_ratio)) 0;
  width: 100%;
  height: calc(150px * var(--window_ratio));
  border: solid 1px #dadadf;
  background-color: #ffffff;
}
.mw_wp_form .vertical-item{
  text-align: center;
}
.mwform-checkbox-field{
  text-align: center;
  display: block;
}
.contact-privacy-policy p{
  margin-bottom: calc(16px * var(--window_ratio));
  margin-top: 0;
  font-family: YuGothic;
  font-size: calc(14px * var(--window_ratio));
  font-weight: bold;
  text-align: center;
  color: #191970;
  text-decoration: none;
}
.contact-privacy-policy-link a{
  margin: 0;
  font-family: YuGothic;
  font-size: calc(14px * var(--window_ratio));
  font-weight: bold;
  text-align: center;
  color: #191970;
  text-decoration: none;
}
.contact-privacy-policy-link a:hover{
  text-decoration: underline;
}
.contact-confirm{
  width: 100%;
  height: calc(150px * var(--window_ratio));
  border: none;
  background-color: #191970;
  font-family: Montserrat;
  font-size: calc(14px * var(--window_ratio));
  line-height: 2.71;
  text-align: center;
  color: #f6f6fa;
}
.contact-confirm:hover{
  width: 100%;
  height: calc(150px * var(--window_ratio));
  border: none;
  background-color: #f6f6fa;
  font-family: Montserrat;
  font-size: calc(14px * var(--window_ratio));
  line-height: 2.71;
  text-align: center;
  color: #191970;
  text-decoration: underline;
  text-decoration-color: #191970;
}
.error{
  text-align: right;
  font-family: YuGothic;
  font-size: calc(14px * var(--window_ratio));
  font-weight: 500;
  line-height: 1.86;
  letter-spacing: -0.14px;
  color: #f00014;
}