@charset "utf-8";
/* CSS Document */
/* Dynamics contact form; keep the legacy special pages unchanged. */
body:has(#dynamics-contact):after {
  display: none;
}
#dynamics-contact {
  max-width: 84rem;
  margin: 8rem auto 0;
  font-size: 1.8rem;
  line-height: 1.8;
  color: #3c3c3c;
}
#dynamics-contact h1 {
  margin-bottom: 5.4rem;
  font-size: 3.6rem;
  font-weight: 300;
}
#dynamics-contact dl {
  border-bottom: 0.1rem solid #3c3c3c;
}
#dynamics-contact dl:first-child {
  border-top: 0.1rem solid #3c3c3c;
}
#dynamics-contact dt {
  padding: 1.26rem 0;
  cursor: auto;
}
#dynamics-contact dt p {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  line-height: inherit;
}
#dynamics-contact dt p:before,
#dynamics-contact dt p:after {
  content: none;
}
#dynamics-contact dt span {
  color: inherit;
}
#dynamics-contact dt input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 1.8rem 0 1.8rem 1rem;
  border: 0;
  background: #fff;
  color: inherit;
  font: inherit;
}
#dynamics-contact input::placeholder {
  color: #757575;
  opacity: 1;
}
#dynamics-contact h3 {
  margin: 5.4rem 0 2.16rem;
  font-size: inherit;
  font-weight: 400;
  line-height: 2.5;
}
#dynamics-contact .wpcf7-list-item {
  display: block;
  margin: 0 0 1.35rem;
}
#dynamics-contact input[type="radio"] {
  margin: 0 0.9rem 0 0;
  vertical-align: middle;
  accent-color: #3c3c3c;
}
#dynamics-contact textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: -0.8rem;
  padding: 0.2rem;
  border: 0.1rem solid #3c3c3c;
  background: #fff;
  color: inherit;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1.8;
  resize: vertical;
}
#dynamics-contact .p-pageContact__form__lastMes {
  margin: 3.6rem 0 11.7rem;
}
#dynamics-contact .p-pageContact__form__sendBlock {
  padding-bottom: 10.5rem;
  text-align: center;
}
#dynamics-contact input[type="submit"] {
  width: 28.5rem;
  max-width: 100%;
  padding: 3rem 0;
  border: 0;
  background: #646464;
  color: #f2f2f2;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
#dynamics-contact input[type="submit"]:hover {
  background: #3c3c3c;
}
#dynamics-contact input:focus-visible,
#dynamics-contact textarea:focus-visible {
  outline: 0.2rem solid #008b95;
  outline-offset: 0.3rem;
}
#dynamics-contact .wpcf7-spinner {
  display: block;
  margin: 1rem auto 0;
}
@media screen and (max-width: 767px) {
  #dynamics-contact {
    margin-top: 4rem;
    font-size: 1.6rem;
  }
  #dynamics-contact h1 {
    margin-bottom: 3rem;
    font-size: 3rem;
  }
  #dynamics-contact dt input,
  #dynamics-contact textarea {
    background: #f6f6f6;
  }
  #dynamics-contact h3 {
    margin: 4.8rem 0 1.92rem;
    line-height: 2;
  }
  #dynamics-contact .p-pageContact__form__lastMes {
    margin: 3.2rem 0 6rem;
  }
  #dynamics-contact .p-pageContact__form__sendBlock {
    padding-bottom: 6rem;
  }
}
.EN {
    font-family: "Inter", sans-serif;
    font-weight: 300;
}
body:after{
  position:fixed;
  left:0px;
  top:75px;
  content:"";
  background:url("../img/special/special_bg_PC.png") center bottom/cover no-repeat;
  width:100%;
  height: calc(100vh - 75px);
  z-index:-1;
}
#top {
    margin: 10rem auto 2em;
}
#top h1{
	font-size:5.2rem;
	text-align:center;
	line-height:1.5;
	font-family: 'hiragino_W1';
    letter-spacing: 0.07em;
}
#top h2{
	font-size:3.3rem;
	letter-spacing:-0.01em;
	line-height:1.4;
  color:#00BEC8;
  text-align:center;
}
#top h2 .JP{
  font-size:3.7rem;
  font-family: "Inter", sans-serif;
  font-weight: 300;
}
#top h2 .EN{
  font-size:5.2rem;
}
#top h3{
	font-size:2.4rem;
  text-align:center;
  line-height:1.6;
  margin:1.3em 0 1.5em 0;
}
#top .text{
  font-size:1.8rem;
  width:94%;
  margin:0 auto 1.6em;
}
#top .text .JP{
  text-align: justify;
}
#top .text .EN{
  text-align: center;
}
main dt{
  cursor: pointer;
  padding-bottom:3em;
}
main dt img{
  width:100%;
}
main dt p{
  border-top:1px solid #a7a7a7;
  position:relative;
  font-size:2.4rem;
  padding:0.7em 2em 0.7em 0.3em;
}
main dt span{
  color:#8d8d8d;
}
main dt p:before {
    position: absolute;
    top: 2.2em;
    right: 0.45em;
    margin-top: -1.3em;
    content: '';
    display: inline-block;
    height: 1em;
    border-right: 0.1em solid #505050;
    transition: 0.3s;
}
main dt.active p:before {
    transform: rotate(90deg);
	opacity:0;
}
main dt p:after {
    position: absolute;
    top: 2.2em;
    right: 0em;
    margin-top: -0.875em;
    content: '';
    display: inline-block;
    width: 1em;
    border-top: 0.1em solid #505050;
    transition: 0.3s;
}
main dt p{
  line-height: 1.5;
}
main dd{
  display:none;
}
main dd h4{
  font-size:2.4rem;
  width: 90%;
    margin: 0 auto 0.5em;
}
main dd p{
      font-size: 1.8rem;
    line-height: 1.8;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 2em;
}
main dd img{
  margin-bottom:2em;
  width:100%;
}
main .btn_contact{
  text-align: center;
  padding:1em 0 3em 0;
}
main .btn_contact a{
  transition-duration: 0.3s;
}
main .btn_contact a img{
  margin-bottom:0px;
  width:201px;
}
main .btn_contact a:hover{
  color: #505050;
  opacity:0.7;
}
main dd .caption{
  margin-bottom:3em;
}
main dd video{
  width:100%;
  margin-bottom:2em;
}
#contact{
  width:90%;
  margin:5em auto 0;
  background-color:#FFF;
  box-sizing: border-box;
  padding:3%;
}
#contact h4{
  font-size:2.5rem;
  text-align: center;
  margin-bottom:1em;
  font-family: "Inter", sans-serif;
  font-weight: 300;
}
#contact label{
  display:flex;
  justify-content: space-between;
  font-size:1.8rem;
}
#contact label input{
  width:100%;
  font-size:1.8rem;
  background-color:#efefef;
  border:none;
  padding:0.3em;
  box-sizing: border-box;
}
#contact label textarea{
  width:100%;
  font-size:1.8rem;
  background-color:#efefef;
  border:none;
  padding:0.3em;
  box-sizing: border-box;
  resize: none;
}
#contact label br + span{
  width:100%;
}
#contact label span{
  min-width:10em;
  margin-bottom:0.7em;
  color:#969696;
}
#contact .btn_check{
  text-align: center;
  margin:3em 0;
}
#contact .btn_check input{
  transition-duration: 0.3s;
}
#contact .btn_check input:hover{
  opacity:0.7;
}
#contact .btn_check .JP input{
  width:177px;
  height: 36px;
  border:none;
  font-size: 0px;
  cursor: pointer;
  background:url("../img/special/special_check_jp.svg") center bottom/cover no-repeat;
}
#contact .btn_check input{
  width:177px;
  height: 36px;
  border:none;
  font-size: 0px;
  cursor: pointer;
  background:url("../img/special/special_check_jp.svg") center bottom/cover no-repeat;
}
#contact .btn_check .EN input{
  background:url("../img/special/special_check_en.svg") center bottom/cover no-repeat;
}
#contact.confirm{
  background:none;
}
#contact.confirm h1{
  text-align: center;
  font-size:2.3rem;
  margin-bottom:1em;
}
#contact.confirm label{
  justify-content: flex-start;
  align-items: flex-start;
  word-wrap: break-word;
  word-break: break-all;
}
#contact.confirm label br{
  display:none;
}
#contact.confirm .btn_area{
  justify-content: center;
  display:flex;
  margin-top:3em;
}
#contact.confirm .btn_area input{
  cursor: pointer;
  transition-duration: 0.3s;
  margin:0 2rem;
}
#contact.confirm .btn_area input:hover{
  opacity: 0.7;
}
#contact.confirm .btn_correct input{
  width:177px;
  height: 36px;
  border:none;
  font-size: 0px;
  cursor: pointer;
  background:url("../img/special/confirm_correct_jp.svg") center bottom/cover no-repeat;
}
#contact.confirm .btn_correct .EN input{
  background:url("../img/special/confirm_correct_en.svg") center bottom/cover no-repeat;
}
#contact.confirm .btn_send input{
  width:177px;
  height: 36px;
  border:none;
  font-size: 0px;
  cursor: pointer;
  background:url("../img/special/confirm_send_jp.svg") center bottom/cover no-repeat;
}
#contact.confirm .btn_send .EN input{
  background:url("../img/special/confirm_send_en.svg") center bottom/cover no-repeat;
}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
    border: none;
  color:#F01E00;
  font-size:1.7rem;
  text-align: center;
}
div.wpcf7 .ajax-loader{
  display:none;
}

/*---------------------------------------------------------------
横幅768px～1000pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1000px) {
  body:after{
    top:7vw;
    height: calc(100vh - 7vw);
  }
	
}

/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  body:after {
    top: 14vw;
    background: url(../img/special/special_bg_SP.png) center top/cover no-repeat;
    height: calc(100vh - 16vw);
}
#top {
    margin: 6rem 5% 2em 5%;
}
#top h1 {
    font-size: 3.2rem;
}
  #top h2 {
    font-size: 2rem;
}
 #top h2 .JP {
    font-size: 2.2rem;
} 
#top h2 .EN {
    font-size: 2.8rem;
}
  #top h3 {
    font-size: 1.7rem;
}
  #top .text {
    font-size: 1.6rem;
    width: 100%;
    margin-bottom:2em;
}
  main dt {
    padding-bottom: 2em;
}
  main dt p {
    font-size: 1.6rem;
}

  main dd p {
    font-size: 1.6rem;
}
  main .btn_contact {
    padding: 1em 0 1em 0;
}
  main .btn_contact a img {
    width: 46%;
}
  main dd h4 {
    font-size: 1.8rem;
}
  
  #contact {
    width: 100%;
    padding:5%;
}
  #contact h4 {
    font-size: 2rem;
}
  #contact label {
    font-size: 1.6rem;
    display:block;
}
  #contact label input {
    font-size: 1.6rem;
    margin-bottom:1em;
}
  #contact label textarea {
    font-size: 1.6rem;
    
}
  #contact.confirm{
    margin-top:3em;
  }
  #contact.confirm h1 {
    font-size: 2rem;
}
  #contact.confirm label{
    margin-bottom:1em;
  }
  #contact.confirm label br {
    display: block;
}
  
#contact.confirm .btn_area {
    display: block;
  text-align: center;
}
  #contact.confirm .btn_area input {
    margin: 0rem;
    margin-top:2rem;
}
  
	
}