@charset "UTF-8";
#billboard {position: relative;}
#billboard > img  {width: 32%;position: absolute;top: 50%;left: 30%;z-index: 1;transform: translate(-50%,-50%);opacity: 0;transition: 1.2s ease-out 0.2s;}
#billboard figure figcaption {font-size: 225%;font-weight: bold;letter-spacing: 0.05em;writing-mode: vertical-rl;ruby-position: inter-character; position: absolute;top: 30%;left: 82%;z-index: 1;transform: translate(-50%,-50%);opacity: 0;transition: 0.8s ease-out 1.6s;}
#billboard figure figcaption ruby rt {font-size: 40%;margin-left: 0.5em;}
body.loaded #billboard > img  {opacity: 1;left: 25%;}
body.loaded #billboard figure figcaption {opacity: 1;}
#Introduction {padding: 7em 0;background: #fff;}
#Introduction .container:nth-child(1) p {font-weight: bold;text-align: center;line-height: 2;}
#Introduction .container:nth-child(1) p + p {margin-top: 2em;}
#Introduction .container:nth-child(1) p strong {color: var(--color-01);}
#Introduction .container:nth-child(2) h2 {color: var(--color-01);font-size: 175%;font-weight: bold;text-align: center;}
#Introduction .container:nth-child(2) h2::before {display: block;content: '';width: 2px;height: 2em;margin: 2em auto;background: var(--color-01);}
#Introduction .container:nth-child(2) div {padding: 3em;margin-top: 2em;border: 2px solid var(--color-01);border-radius: 2em;}
#Introduction .container:nth-child(2) div ul {max-width: 700px;margin: 0 auto;}
#Introduction .container:nth-child(2) div ul li {padding-left: 2em;position: relative;}
#Introduction .container:nth-child(2) div ul li::before {display: block;content: '';width: 1.6em;height: 1.6em;background: url("../img/common/icon_check.svg") no-repeat center/contain;position: absolute;top: 0.2em;left: 0;z-index: 1;}
#Introduction .container:nth-child(2) div ul li + li {margin-top: 2.5em;}
#Introduction .container:nth-child(2) div ul li span {display: inline;font-weight: 600;line-height: 1.8;letter-spacing: 0.1em;padding-bottom: 0.5em;background-image: repeating-linear-gradient(to right,#6a5b2e 0 3px,transparent 3px 7px);background-position: 0 1.6em;background-size: 100% 3px;background-repeat: repeat-x;}
#service {padding: 7em 0;background: url("../img/common/bg_01.webp");}
#service ul {margin-top: 4em;}
#service ul li {padding: 2.5em 3.5em;min-height: 17em;background: #fff;border-radius: 1em;overflow: hidden;position: relative;}
#service ul li:nth-child(odd) {padding-left: calc(35% + 3em);}
#service ul li:nth-child(even) {padding-right: calc(35% + 3em);}
#service ul li::after {display: block;content: '';width: 35%;height: 100%;background: #f8f8f8;position: absolute;top: 0;z-index: 1;}
#service ul li:nth-child(odd)::after {left: 0;}
#service ul li:nth-child(even)::after {right: 0;}
#service ul li:nth-child(1)::after {background: url("../img/top/index_img01_pc.webp") no-repeat center/cover;}
#service ul li:nth-child(2)::after {background: url("../img/top/index_img02_pc.webp") no-repeat center/cover;}
#service ul li:nth-child(3)::after {background: url("../img/top/index_img03_pc.webp") no-repeat center/cover;}
#service ul li + li {margin-top: 4em;}
#service ul li h4 {color: var(--color-01);font-size: 162.5%;font-weight: bold;letter-spacing: 0.05em;}
#service ul li p {line-height: 2;margin-top: 1em;}
#achieve {padding: 7em 0;background: #fff;}
#achieve ul {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 4em -0.8em 0;}
#achieve ul li {width: calc(33.33% - 1.6em);margin: 0.8em;padding: 1.5em;border-radius: 1em;box-shadow: -3px 3px 10px rgba(108,99,53,0.3);}
#achieve ul li p:nth-child(1) {color: var(--color-01);font-family:"Yu Gothic", YuGothic, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;font-size: 137.5%;font-weight: bold;padding: 0.5em 0 0.5em 5em;position: relative;}
#achieve ul li p:nth-child(1)::before {display: block;content: '';width: 4em;height: 4em;position: absolute;top: 0;left: 0;z-index: 1;}
#achieve ul li:nth-child(1) p:nth-child(1)::before {background: url("../img/top/index_img11_pc.svg") no-repeat center/contain;}
#achieve ul li:nth-child(2) p:nth-child(1)::before {background: url("../img/top/index_img12_pc.svg") no-repeat center/contain;}
#achieve ul li:nth-child(3) p:nth-child(1)::before {background: url("../img/top/index_img13_pc.svg") no-repeat center/contain;}
#achieve ul li p:nth-child(2) {line-height: 1.8;margin-top: 1em;padding: 1.2em 0.25em 0;border-top: 1px solid var(--color-01);}
#price {padding: 7em 0;}
#price ul {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 4em -1em 0;}
#price ul li {width: calc(50% - 1em);margin: 0 0.5em;border-radius: 1em;border: 2px solid var(--color-01);background: var(--color-01);overflow: hidden;}
#price ul li h4 {color: #fff;font-size: 162.5%;font-weight: bold;text-align: center;padding: 0.5em 0;background: var(--color-01);}
#price ul li > div {background: #fff;}
#price ul li .label {color: #fff;font-size: 150%;font-weight: bold;letter-spacing: 0.2em;text-align: center;width: 5.5em;margin: 0 auto 0.5em;border-radius: 2em;background: var(--color-02);}
#price ul li .price {font-size: 200%;font-weight: bold;text-align: center;}
#price ul li .price .sp01 {font-size: 200%;font-weight: 600;line-height: 1;letter-spacing: 0;}
#price ul li .price .sp01 small {font-size: 50%;}
#price ul li .price .sp02 {font-size: 90%;font-weight: normal;}
#price ul li:nth-child(1) {width: calc(100% - 1em);margin-bottom: 2em;}
#price ul li:nth-child(1) > div {display: flex;flex-wrap: wrap;justify-content: space-between;}
#price ul li:nth-child(1) > div div {width: 50%;padding: 1.5em;}
#price ul li:nth-child(1) > div div:nth-child(2) {border-left: 1px solid var(--color-01);}
#price ul li:nth-child(n + 2) div {padding: 3em 1.5em;} 
#training {padding: 7em 0;background: #fff;}
#training .container {border-radius: 1em;border: 2px solid var(--color-01);background: var(--color-01);overflow: hidden;}
#training h3 {color: #fff;font-size: 162.5%;font-weight: bold;text-align: center;padding: 0.5em 0;background: var(--color-01);}
#training .container div {padding: 1.5em calc(45% + 4em) 1.5em 3em;background: #fff;position: relative;}
#training .container div::before {display: block;content: '';width: 45%;height: calc(100% - 3em);background: url("../img/top/index_img21_pc.webp") no-repeat center/cover;position: absolute;top: 1.5em;right: 1.5em;z-index: 1;}
#training .container div h4 {color: var(--color-01);font-size: 162.5%;font-weight: bold;letter-spacing: 0.05em;margin-top: 0.5em;}
#training .container div p:nth-of-type(1) {line-height: 2;margin-top: 1em;}
#training .container div p:nth-of-type(2) {font-size: 200%;font-weight: bold;text-align: center;margin-top: 1em;}
#training .container div p:nth-of-type(2) .sp01 {font-size: 200%;font-weight: 600;line-height: 1;}
#training .container div p:nth-of-type(2) .sp02 {font-size: 90%;font-weight: normal;}
#contact {padding: 7em 0;}
#contact form {margin-top: 3em;}
#contact form .item {padding: 2em 0 2em 1em;border-top: 1px solid #a3a3a3;}
#contact form .item > p {display: flex;flex-wrap: wrap;justify-content: space-between;}
#contact form .item label {display: inline-block;color: var(--color-02);font-size: 137.5%;font-weight: 600;font-family:"Yu Gothic", YuGothic, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;vertical-align: middle;width: 320px;margin-top: 0.65em;}
#contact form .item label::after {content: '必須';color: var(--color-01);font-size: 70%;padding-left: 1em;}
#contact form .item label + span {display: block;width: calc(100% - 322px);}
#contact form .item textarea,
#contact form .item input {font-family:"Yu Gothic", YuGothic, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;width: 100%;padding: 1em;background: #fff;border: 1px solid #a3a3a3;border-radius: 0.5em;}
#contact form .item textarea {line-height: 1.5;resize: vertical;}
#contact form .item .wpcf7-not-valid-tip {font-size: 14px;font-weight: bold;line-height: 1.5;}
#contact form .item5 {border-bottom: 1px solid #a3a3a3;}
#contact form .item.exp label + span {line-height: 0;position: relative;}
#contact form .item.exp label + span::after {display: block;content: '';width: 1em;height: 1em;background: url("../img/common/icon_arrow.svg") no-repeat right bottom/contain;position: absolute;right: 0;bottom: 0;z-index: 1;pointer-events: none;}
#contact .btn-style-01 {text-align: center;line-height: 3;width: 12em;margin: 3em auto 0;padding: 0;position: relative;}
#contact .btn-style-01 input {color: #fff;font-size: 150%;font-weight: bold;line-height: 1;width: 100%;height: 100%;border: none;background: transparent;cursor: pointer;position: absolute;top: 0;left: 0;}
#contact .btn-style-01 span {font-weight: 500;position: relative;z-index: 1;}
#contact .btn-style-01 .wpcf7-spinner {background: transparent;}
#contact .btn-style-01 .wpcf7-spinner::before {display: none !important;}
@media only screen and (max-width: 1400px) {}
@media only screen and (max-width: 1300px) {}
@media only screen and (max-width: 1200px) {}
@media only screen and (max-width: 1100px) {}
@media only screen and (min-width: 769px) and (max-width: 1400px) {
  #billboard figure figcaption {font-size: 2.4vw;}  
}
@media only screen and (min-width: 768px) {
  #contact .btn-style-01 input:hover {color: var(--color-01);}
}
@media only screen and (max-width: 767px) {
  #billboard > img {width: 50%;top: 40%;left: 30%;}
  #billboard figure figcaption {font-size: 162.5%;top: 44%;left: 84%;transition-delay: 0.4s;}
  #Introduction {padding: 3em 0;}
  #Introduction .container:nth-child(1) p {font-size: 100%;}
  #Introduction .container:nth-child(1) p strong {display: block;}
  #Introduction .container:nth-child(2) h2 {font-size: 137.5%;}
  #Introduction .container:nth-child(2) h2::before {height: 1.5em;margin: 1em auto;}
  #Introduction .container:nth-child(2) div {padding: 1em 1.25em 1.5em;margin-top: 1em;}
  #Introduction .container:nth-child(2) div ul li {font-size: 100%;line-height: 2.5;}
  #Introduction .container:nth-child(2) div ul li::before {top: 0.65em;}
  #service {padding: 3em 0;}
  #service ul {margin-top: 2em;}
  #service ul li {padding: 14.5em 1em 1em !important;}
  #service ul li::after {width: 100%;height: 13em;}
  #service ul li h4 {font-size: 131.25%;letter-spacing: 0;}
  #service ul li p {font-size: 100%;}
  #service ul li + li {margin-top: 2em;}
  #achieve {padding: 3em 0;}
  #achieve ul {margin-top: 2em;}
  #achieve ul li {width: calc(100% - 1.6em);padding: 1.5em;border-radius: 1em;}
  #achieve ul li p:nth-child(1) {font-size: 131.25%;letter-spacing: 0;}
  #achieve ul li p:nth-child(2) {padding: 1em 0 0;}
  #price {padding: 3em 0;}
  #price ul {margin-top: 2em;}
  #price ul li {border-radius: 1em;}
  #price ul li h4 {font-size: 112.5%;white-space: nowrap;line-height: 1.25;padding: 0.5em 0;}
  #price ul li .label {font-size: 112.5%;margin-bottom: 0.5em;border-radius: 1em;}
  #price ul li .price {font-size: 112.5%;}
  #price ul li .price .sp01 {display: block;letter-spacing: 0;}
  #price ul li:nth-child(1) {margin-bottom: 1em;}
  #price ul li:nth-child(1) > div div,
  #price ul li:nth-child(n + 2) div {padding: 1em 0;}
  #training {padding: 3em 0;}
  #training h3 {font-size: 112.5%;white-space: nowrap;line-height: 1.25;padding: 0.5em 0;}  
  #training .container div {padding: 14.5em 1em 1em !important;}
  #training .container div::before {width: calc(100% - 2em);height: 13em;top: 1em;left: 1em;}
  #training .container div h4 {color: var(--color-01);font-size: 131.25%;letter-spacing: 0;}
  #training .container div p:nth-of-type(1) {font-size: 100%;}
  #training .container div p:nth-of-type(2) {font-size: 112.5%;}
  #contact {padding: 5em 0 3em;margin-top: -2em;}
  #contact form .item {padding: 1.75em 0.5em;}
  #contact form .item label {font-size: 112.5%;width: 100%;margin-top: 0;}
  #contact form .item label::after {padding-left: 0.5em;}
  #contact form .item label + span {width: 100%;margin-top: 0.5em;}
  #contact .btn-style-01 {margin-top: 2em;}
  #contact .btn-style-01 input {font-size: 106.25%;}
}
@media (orientation: landscape) and (max-width: 767px){}