@charset 'UTF-8';
/*
Theme Name: GRATES 09
Version: 4.0
Author: GRATES
Description: 2025, GRATES
*/

* {
 padding: 0;
 margin: 0;
 border: none;
 box-sizing: border-box;
 outline: none; 
 font-weight: normal;
 font-style: normal;
}
html {
 overflow: auto;
 width: 100％;
 font-size: 62.5%;
 line-height: 1;
}
body {
 position: relative;
 display: flex; /* フッターを下部に固定 1/4 */
 flex-direction: column; /* フッターを下部に固定 2/4  */
 min-height: 100vh; /* フッターを下部に固定 3/4  */
 width: 100%; 
 height: 100%;
 font-family: helvetica, arial, sans-serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック";
 color: #103;
 background-color: #eee;
 -webkit-text-size-adjust: 100%; /*iPhoneの文字が大きくなるバグ対策*/
}
footer {
 margin-top: auto; /*  フッターを下部に固定 4/4  */
}
article,section,footer {
 display: block;
}
h2 {
 margin-bottom: 64px;
 font-size: 3.2rem;
 text-align: center;
 font-weight: bold;
}
p, h6, li {
 font-size: 2.0rem;
 line-height: 1.8;
}
a:link,
a:visited,
a:active {
 color: #103;
}
a:hover {
 transition: 0.5s;
}
svg.fillDrkPpl {
 fill: #103;
}
/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 h2 {
  margin-bottom: 10%;
  font-size: 2.4rem;
 }
 p, h6, li {
  font-size: 1.6rem;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  Loader  */
/* --------------------------- */

#loader {
 position: fixed;
 z-index: 100;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(255,255,255,1.0);
}
#loader div {
 position: absolute;
 z-index: 101;
 top: 50%;
 left: 50%;
 width: 200px;
 height: 200px;
 margin-top: -100px;
 margin-left: -100px;
 text-align: center;
}
#loader div img {
 width: 75%;
 height: auto;
}
#loader div p {
 margin-top: 16px;
 font-size: 1.6rem;
}



/* --------------------------- */
/*  article  */
/* --------------------------- */

article {
 width: 100%;
}
section {
 width: 90%; 
 max-width: 640px;
 margin: 120px auto;
}
section.topWrap {
 text-align: center;
}

/*  btn  */
a#btn p {
 overflow: hidden;
 width: 280px;
 height: 64px;
 margin: 64px auto 0;
 line-height: 64px;
 text-align: center;
 color: #103;
 background: #fff;
 border: 1px solid #103;
 border-radius: 32px;
 transition: 0.5s;
}
a#btn p:hover {
 color: #fff;
 background: #103;
 box-shadow: 0 4px 6px 1px rgba(0,0,0,.18);
 transform: scale(1.05);
}
a#btn:link {
 text-decoration: none;
}

/*  footer  */
footer p {
 margin: 0 auto 32px;
 width: 100%;
 font-size: 1.2rem;
 text-align: center;
}
footer a {
 text-decoration: underline;
}
footer svg {
 display: block;
 width: 200px;
 aspect-ratio: 19 / 4;
 margin: 0 auto 16px;
}
/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 section {
  margin: 20% auto;
  }
 section.topWrap {
  text-align: left;
 }
 a#btn p {
  width: 240px;
  height: 56px;
  margin: 10% auto 0;
  font-size: 1.8rem;
  line-height: 56px;
  border-radius: 28px;
 }

 /*  footer  */
 footer p {
  margin: 0 auto 5%;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  Contact */
/* --------------------------- */

section.contactWrap p.form_title {
 margin: 32px 0 8px;
 line-height: 1;
}
section.contactWrap input,
section.contactWrap textarea {
 width: 100%;
 padding: 16px;
 font-size: 2rem;
 color: #333;
 background: #fff;
 border: 1px solid #ccc;
 border-radius: 8px;
 box-sizing: border-box;
 outline: none;
 cursor: pointer;
 -webkit-appearance: none; /* iPad対策 */
 -moz-appearance: none;
 appearance: none;
}
section.contactWrap textarea {
 height: 320px;
 line-height: 1.4;
}

/* ----- 送信ボタン ----- */
section.contactWrap input[type=submit] {
 overflow: hidden;
 display: block;
 width: 280px;
 height: 64px;
 margin: 64px auto 0;
 text-align: center;
 color: #103;
 background: #fff;
 border: 1px solid #103;
 border-radius: 32px;
 box-sizing: border-box;
 outline: none;
 -webkit-appearance: none; /* iPad対策 */
 -moz-appearance: none;
 appearance: none;
 transition: 0.5s;
}
section.contactWrap input[type=submit]:hover {
 color: #fff;
 background: #103;
 box-shadow: 0 4px 6px 1px rgba(0,0,0,.18);
 transform: scale(1.05);
}
/* ----- 記入もれ ----- */
.wpcf7 span.wpcf7-not-valid-tip {
 margin-top: 4px;
 font-size: 1.8rem;
 line-height: 1;
 color: #f77;
}
.wpcf7 span.wpcf7-not-valid-tip:before {
 margin-right: 4px;
 vertical-align: text-top;
 content: "\2191";
}
/* ----- 完了 or エラー ----- */
.wpcf7 .wpcf7-response-output {
 padding: 16px 16px;
 font-size: 2rem;
 text-align: center;
 border-radius: 8px;
}
/* 入力内容に問題があります */
.wpcf7 form.invalid .wpcf7-response-output {
 padding: 8px;
 color: #f77 !important;
 border: 1px solid #f77 !important;
}

/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {

 section.contactWrap p.form_title {
  margin: 8% 0 1.5%;
 }
 section.contactWrap input,
 section.contactWrap textarea {
  padding: 4%;
  font-size: 1.6rem;
  border-radius: 6px;
 }
 section.contactWrap textarea {
  height: 240px;
 }
 /* ----- 送信ボタン ----- */
 section.contactWrap input[type=submit] {
  width: 240px;
  height: 56px;
  margin: 10% auto 0;
  font-size: 1.8rem;
  border-radius: 28px;
 }
 /* ----- 記入もれ ----- */
 .wpcf7 span.wpcf7-not-valid-tip {
  margin-top: 1%;
  font-size: 1.6rem;
 }
 /* ----- 完了 or エラー ----- */
 .wpcf7 .wpcf7-response-output {
  padding: 1% 0;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: left;
  border-radius: 6px;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  Form Thanks  */
/* --------------------------- */
section.thanksWrap {
 position: absolute;
 top: 45%;
 left: 50%;
 width: 90%;
 margin: -24px auto 0;
 text-align: center; 
 word-wrap: break-word;  /* 長い文字列を改行 */
 transform: translate(-50%, -50%);
}
section.thanksWrap img {
 width: 40%;
 max-width: 240px;
}
section.thanksWrap p {
 margin-top: 32px;
}

/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 section.thanksWrap {
  top: 50%;
 }
 section.thanksWrap img {
  width: 55%;
 }
 section.thanksWrap p {
  margin-top: 5%;
 }
 section.thanksWrap p span {
  display: block;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  policy  */
/* --------------------------- */

h6 {
 margin-top: 40px;
 font-weight: bold;
}
ul {
 margin-bottom: 40px;
}
ul li {
 margin-left: 1.4em;
 text-indent: -1.2em;
 list-style-type: disc !important;
 list-style-position: inside !important;
}

/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 h6 {
  margin-top: 10%;
 }
}
/* -------------- media screen end -------------- */



/* ----- reCAPTCHA ----- */
.grecaptcha-badge {
 visibility: hidden;
}