@charset "utf-8";

/*----------------------------------------------------------------------------------------------------------------------------

reset & root set

----------------------------------------------------------------------------------------------------------------------------*/

/* reset
--------------------------------------------------------------*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  font-size: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

header,
footer,
main,
aside,
picture {
  display: block;
}

/* iOS Safari tap reset */
body {
  -webkit-tap-highlight-color: transparent;
}

/* print set
--------------------------------------------------------------*/
@media print {
  html {
    width: 1280px;
  }

  .header {
    position: relative !important;
  }

  /* fixheader clear */
}

/* root set
--------------------------------------------------------------*/

/* color */
:root {
  --cl-key01: #1f1f1f;
  --cl-key02: #bd2c1f;
  --cl-txt: #333;
  --cl-wh: #fff;
  --cl-bg: #fff;
}

/* fixheader height */
:root {
  --header-height: 6rem;
  --container-width: calc(100vw - 4rem);
}

@media print, screen and (min-width: 640px) {
  :root {
    --header-height: 0;
    --container-width: 91rem;
  }
}

/* font set */
:root {
  /* font: style weight size / line-height family */
  --ff-base: normal 500 1.4rem / 1.6 "Noto Sans JP", sans-serif;
  --ff01w: 700;
}

/*----------------------------------------------------------------------------------------------------------------------------

base set

----------------------------------------------------------------------------------------------------------------------------*/
html {
  font-size: calc(100vw / 37.5);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: var(--cl-txt);
  background-color: var(--cl-bg);
  font: var(--ff-base);
}

a {
  color: var(--cl-txt);
  outline: none;
  text-decoration: none;
}

.page-wrapper {
  overflow: hidden;
}

@media print, screen and (min-width: 640px) {
  html {
    font-size: calc(100vw / 128);
  }

  body {
    font-size: 1.6rem;
  }
}

@media print, screen and (min-width: 1280px) {
  html {
    font-size: 62.5%;
  }

  body {
    font-size: 1.6rem;
  }

  /* a {
    transition: 0.5s;
  } */

  a:hover {
    opacity: 0.7;
  }

  button:hover {
    opacity: 0.7;
  }
}

/*----------------------------------------------------------------------------------------------------------------------------

utility & inview set

----------------------------------------------------------------------------------------------------------------------------*/

/* utility - base
---------------------------------------------------- */

/* utility - base responsive */
.u-inner {
  max-width: 110rem;
  margin: 0 auto;
  width: 90%;
}

.u-only-pc {
  display: none;
}

.item-center {
  margin-right:auto;
  margin-left:auto;
  text-align: center;
  width:300px;
}
.item-center-error {
  background-color: #fdecea; /* 薄い赤の背景色 */
  border: 1px solid #e74c3c; /* 赤い境界線 */
  color: #e74c3c; /* 赤い文字色 */
  padding: 10px; /* 内側の余白 */
  margin-bottom: 15px; /* 他の要素との間隔 */
  font-weight: bold; /* 強調表示 */
  line-height: 1.6; /* 行間を広げる */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
  margin-right:auto;
  margin-left:auto;
  text-align: center;
}

@media print, screen and (min-width: 640px) {
  .u-only-sp {
    display: none !important;
  }

  .u-only-pc {
    display: inherit;
  }
}

/* utility - base */
.u-base-font {
  font-family: var(--ff-base);
  font-weight: var(--ff01w);
}

.u-cl-txt {
  color: var(--cl-txt);
}

.u-cl-wh {
  color: var(--cl-wh);
}

.u-cl-key01 {
  color: var(--cl-key01);
}

.u-cl-key02 {
  color: var(--cl-key02);
}

.u-iframebox {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.u-iframebox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.u-w30 {
  width: 30% !important;
}

.u-w50 {
  width: 50% !important;
}

.u-mt01 {
  margin-top: 1rem !important;
}

.u-mt02 {
  margin-top: 2rem !important;
}

.u-mt03 {
  margin-top: 3rem !important;
}

.u-mb01 {
  margin-bottom: 1rem !important;
}

.u-mb02 {
  margin-bottom: 2rem !important;
}

.u-mb03 {
  margin-bottom: 3rem !important;
}

.u-center {
  text-align: center;
}

/* iv-animation
---------------------------------------------------- */
.iv-fade {
  opacity: 0;
  transition: 0.8s;
}

.iv-fade._view {
  opacity: 1;
}

.iv-up_fade {
  opacity: 0;
  transform: translate(0, 6rem);
  transition: 0.8s;
}

.iv-up_fade._view {
  opacity: 1;
  transform: translate(0, 0);
}

.iv-down_fade {
  opacity: 0;
  transform: translate(0, -6rem);
  transition: 0.8s;
}

.iv-down_fade._view {
  opacity: 1;
  transform: translate(0, 0);
}

.iv-left_fade {
  opacity: 0;
  transform: translate(-6rem, 0);
  transition: 0.8s;
}

.iv-left_fade._view {
  opacity: 1;
  transform: translate(0, 0);
}

.iv-right_fade {
  opacity: 0;
  transform: translate(6rem, 0);
  transition: 0.8s;
}

.iv-right_fade._view {
  opacity: 1;
  transform: translate(0, 0);
}

.iv-right_fixed_menu {
  opacity: 0;
  transform: translate(6rem, 0);
  transition: 3.0s;
}

.iv-right_fixed_menu._view {
  opacity: 1;
  transform: translate(0, 0);
}
/*----------------------------------------------------------------------------------------------------------------------------

base layout

----------------------------------------------------------------------------------------------------------------------------*/

/* header
--------------------------------------------------------------*/

/* header */
.header {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 0.8rem 2rem;
  z-index: 5;
}

.logo-slogan {
  font-size: 1rem;
}

.logo-image {
  width: 14rem;
  margin-top: 0.2rem;
}

@media print, screen and (min-width: 640px) {

  .header{
    padding: 1.8rem 6rem;
    display: flex;
    align-items: center;
    gap: clamp(5rem, 15vw, 32rem);
  }
  .logo-slogan{
    font-size: 1.2rem;
  }
  .logo-image{
    width: 23rem;
  }
}

/* footer
--------------------------------------------------------------*/

/* footer */
.footer {
  background-color: var(--cl-footer-bg);
  margin-bottom: 5rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3.6rem 0 2rem 0;
}

.link-list {
  display: flex;
  align-items: center;
  margin-top: 3rem;
}

.link-list a {
  padding: 0 3rem;
  font-size: 1.2rem;
}

.footer-tips {
  font-size: 1.2rem;
}

.footer-logo {
  margin-top: 0.8rem;
  width: 25.4rem;
}

.copyright {
  text-align: center;
  font-size: 1.2rem;
  background-color: #3C3C3C;
  color: #fff;
  padding: 0.7rem 0;
}

.link-list a:first-child {
  border-right: 1px solid #707070;
}

@media print, screen and (min-width: 640px) {
  .footer{
    margin-bottom: 0;
  }
  .footer-inner {
    padding-top: 7.7rem;
  }
  .footer-tips {
    font-size: 1.6rem;
  }
  .footer-logo {
    margin-top: 1rem;
    width: 34rem;
  }
  
.link-list {
  margin-top: 5rem;
}
  .link-list a {
    padding: 0 2rem;
    font-size: 1.6rem;
  }
  .copyright{
    padding: 1rem 0;
  }
}

.fixed-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
  display: flex;
}

.fixed-menu .button {
  width: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  background-color: var(--cl-key02);
  color: #fff;
  gap: 1rem;
  height: 5rem;
}

.fixed-menu .button img {
  width: 2rem;
}

.fixed-menu .black-button {
  background-color: #333333;
  border: 1px solid #333333;
  text-align: center;
}


@media print, screen and (min-width: 640px) {
  .fixed-menu {
    bottom: 20rem;
    right: 0;
    left: auto;
    width: 10rem;
    flex-direction: column;
    animation: loadFixedMenu 1.5s ease-in-out .5s forwards;
  }

  @keyframes loadFixedMenu {
    0%{
      right: -10rem;
      opacity: 0;
    }
    100%{
      right: 0;
      opacity: 1;
    }
  }
  
  .fixed-menu .button {
    width: 10rem;
    height: 10rem;
    flex-direction: column;
    font-size: 1.4rem;
  }
  
  .fixed-menu .button img {
    width: 3rem;
  }
  
  .fixed-menu .black-button{
    border: none;
  }
  
}

/* main
--------------------------------------------------------------*/

/* main */

.main {
  margin-top: 6rem;
}

.main p {
  font-size: 1.4rem;
  font-weight: 500;
}

.main .section-title {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  padding: 0.8rem 0 2rem 0;
  line-height: 3.6rem;
}

.main .eng-title {
  color: var(--cl-key02);
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}

.main .u-16-text {
  font-size: 1.6rem;
}

.main .with-red-bottom-border {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.main .with-red-bottom-border::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  background-color: var(--cl-key02);
}

@media print, screen and (min-width: 640px) {
  .main {
    margin-top: 0;
  }

  .main .section-title {
    font-size: 4rem;
    line-height: 6rem;
    padding-bottom: 4.2rem;
  }

  .main .eng-title {
    font-size: 2.4rem;
    line-height: 4rem;
  }

  .main .u-16-text {
    font-size: 1.8rem;
  }
}

/* kv
--------------------------------------------------------------*/

/* kv */

.kv {
  display: flex;
  flex-direction: column;
}

.kv-image {
  width: 100vw;
}

.kv-intro {
  padding: 2.8rem 2rem;
}

.kv-intro .tag-list {
  display: flex;
  gap: 0.4rem;
}

.kv-intro .tag-list .tag {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--cl-key02);
  border: 1px solid var(--cl-key02);
  padding: 0.6rem 0.7rem;
}

.kv-intro .tag-list .black-tag {
  border: 1px solid #1f1f1f;
  color: #1f1f1f;
}

.kv-intro .head-logo .kv-logo-image {
  width: 27.7rem;
  margin: 0.8rem 0 2.2rem 0;
}

.head-logo h1 {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 3.6rem;
}

.head-logo p {
  padding: 3rem 0;
}

@media print, screen and (min-width: 640px) {
  .kv {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }

  .kv-image {
    width: 50vw;
    max-width: 80rem;
    position: relative;
    z-index: 8;
    height: 80rem;
    
  }
  .kv-image img {
    object-fit: cover;
    height: 80rem;
  }

  .kv-intro {
    padding-left: 15rem;
    position: relative;
    padding-top: 10rem;
    z-index: 9;
  }

  
  .nav-link{
    position: absolute;
    left: -18rem;
    top: 4.5rem;
    font-size: 1.4rem;
    line-height: 1em;
    border-bottom: 1px solid #333;
    cursor: pointer;
  }
  .nav-link:hover{
    
    opacity: .7;
  }

  
.kv-intro .tag-list {
  gap: 1.8rem;
}

.kv-intro .tag-list .tag {
  font-size: 1.6rem;
  padding: 0.5rem 0.8rem;
}

.kv-intro .head-logo .kv-logo-image {
  width: 44rem;
  margin: 1.8rem 0 4.5rem 0;
}

.head-logo h1 {
  font-size: 4rem;
  line-height: 6rem;
}

.head-logo p {
  padding: 5rem 0 6rem 0;
  font-size: 1.8rem;
}

.kv .button{
  background-color: var(--cl-key02);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 1.6rem;
  width: 29.8rem;
  height: 7rem;
  cursor: pointer;

}
.kv .button img{
  width: 3rem;
}
}

/* youtube
--------------------------------------------------------------*/

/* youtube */
.youtube {
  margin: 2rem auto 5.5rem auto;
  width: var(--container-width);
  position: relative;
  z-index: 8;
}

.youtube iframe {
  width: var(--container-width);
  height: 18.6rem;
}

@media print, screen and (min-width: 640px) {
  .youtube {
    margin: 11.6rem auto;
    display: flex;
    justify-content: center;
  }

  .youtube iframe {
    width: 72rem;
    height: 40rem;
  }
}

/* whatis
--------------------------------------------------------------*/

/* whatis */

.whatis {
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5.2rem 0 6rem 0;
  position: relative;
}

.whatis::after {
  position: absolute;
  content: "";
  width: 100vw;
  height: 5.2rem;
  background-color: #f7f7f7;
  bottom: -5.2rem;
  left: 0;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
}

.whatis .sub-title {
  font-size: 1.4rem;
  color: var(--cl-key02);
  font-weight: bold;
  text-align: center;
}

.whatis .double-arrow {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.whatis .double-arrow img {
  width: 2rem;
}

.whatis .slogan {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  line-height: 4.5rem;
  margin-top: 2rem;
}

.whatis .slogan span {
  position: relative;
}

.whatis .slogan span::before {
  content: "";
  width: 100%;
  height: 0.8rem;
  background-color: var(--cl-key02);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

@media print, screen and (min-width: 640px) {
  .whatis {
    padding: 14rem 0 14rem 0;
    position: relative;
  }
  .whatis .whatis-line{
    position: absolute;
    left: -17rem;
    top: -38rem;
    z-index: 2;
    width: 136rem;
  }
  .whatis .sub-title {
    font-size: 2.4rem;
  }

  .whatis .section-title {
    padding-top: 0;
  }

  .whatis .slogan {
    font-size: 6rem;
    line-height: 6rem;
    display: flex;
    justify-content: center;
    letter-spacing: 0;
    margin-top: 1rem;
  }

  .whatis .double-arrow {
    margin: 0.5rem 0 0 0;
  }

  .whatis .double-arrow img {
    width: 4rem;
  }

  .whatis .slogan span::before {
    height: 2rem;
    bottom: -2rem;
  }

  .whatis::after {
    height: 20rem;
    bottom: -20rem;
  }
}

/* about
--------------------------------------------------------------*/

/* about */

.about .about-intro {
  margin-bottom: 1.7rem;
}

.about .about-text {
  font-size: 1.6rem;
  font-weight: 500;
}

.about .with-red-bottom-border {
  padding-top: 1.3rem;
}

.about .with-red-bottom-border::after {
  bottom: 2rem;
}

.about .steps-wrap {
  position: relative;
}

.about .steps-wrap::before {
  content: "";
  height: 70%;
  border-left: 0.2rem dotted var(--cl-key02);
  position: absolute;
  top: 0;
  left: 3.4rem;
  z-index: -1;
}

.about .steps-wrap .step {
  display: flex;
  gap: 1.8rem;
  margin-bottom: 0.7rem;
}

.about .steps-wrap .step .step-num {
  width: 7rem;
  min-width: 7rem;
  height: 7rem;
  background-color: var(--cl-key02);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  border-radius: 100%;
  flex-direction: column;
}

.about .steps-wrap .step span:last-child {
  font-size: 3.2rem;
  line-height: 3.2rem;
}

.about .steps-wrap .step .step-text h3 {
  color: var(--cl-key02);
  font-size: 1.8rem;
  padding: 0.8rem 0 1rem 0;
  line-height: 2rem;
}

@media print, screen and (min-width: 640px) {
  .about {
    padding-top: 11.8rem;
  }

  .about .u-inner {
    max-width: 91rem;
  }

  .about .with-red-bottom-border {
    padding-top: 5.3rem;
  }

  .about .with-red-bottom-border::after {
    bottom: 4rem;
    height: 1.2rem;
  }

  .about .steps-wrap::before {
    height: 70%;
    border-left: 0.2rem dotted var(--cl-key02);
    left: 4.5rem;
  }

  .about .steps-wrap .step {
    gap: 4.6rem;
    margin-bottom: 3.6rem;
  }

  .about .steps-wrap .step .step-num {
    width: 9rem;
    min-width: 9rem;
    height: 9rem;
    font-size: 1.4rem;
  }

  .about .steps-wrap .step span:last-child {
    line-height: 3rem;
  }

  .about .steps-wrap .step .step-text h3 {
    font-size: 2.4rem;
    padding: 0;
    line-height: 2.4rem;
    margin-bottom: 1.2rem;
  }

  .about .steps-wrap .step .step-text img {
    width: 31.4rem;
    min-width: 31.4rem;
    height: 23rem;
  }

  .about .steps-wrap .step .step-text {
    display: flex;
    gap: 3.2rem;
  }
}

/* solution
--------------------------------------------------------------*/

/* solution */

.solution {
  padding: 3rem 0 4.4rem 0;
}

.solution .solution-wrap {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 2.2rem;
}

.solution .reverse-solution-wrap {
  margin-top: 3rem;
}

.solution .solution-wrap .solution-intro {
  border: 0.2rem solid var(--cl-key02);
  padding: 4.6rem 2rem 2rem 2rem;
  position: relative;
}

.solution .solution-wrap .solution-intro .solution-num {
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--cl-key02);
  color: white;
  width: 10rem;
  height: 10rem;
  clip-path: polygon(0 0, 0 100%, 100% 0);
  font-size: 3.2rem;
  padding: 0 0.5rem 0 0.5rem;
}

.solution .reverse-solution-wrap .solution-intro .solution-num {
  right: 0;
  left: auto;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  text-align: right;
}

.solution .solution-wrap .solution-intro .think-man {
  position: absolute;
  left: 52%;
  top: -8rem;
  transform: translateX(-50%);
  width: 7.9rem;
}

.solution .solution-wrap .solution-intro .trouble {
  color: var(--cl-key02);
  font-size: 1.4rem;
}

.solution .solution-wrap .solution-intro .solution-title {
  font-size: 2.2rem;
}

.solution .solution-wrap .solution-intro .down-arrow {
  margin: 0 auto;
  width: 1.9rem;
  position: relative;
  top: 0.5rem;
}

.solution .solution-wrap .solution-intro p {
  padding: 2rem;
  font-size: 1.6rem;
  font-weight: bold;
  background-color: rgba(189, 44, 31, 0.07);
}

@media print, screen and (min-width: 640px) {
  .solution {
    padding: 8rem 0 12rem 0;
    position: relative;
  }
  .solution .solution-line{
    position: absolute;
    right: -46rem;
        top: -62rem;
        z-index: 2;
        transform: rotateX(180deg) rotateZ(197deg);
        width: 149rem;
  }
  .solution .solution-tips-text {
    width: 66rem;
    margin: 0 auto;
  }

  .solution .solution-wrap {
    display: flex;
    flex-direction: row;
    padding-top: 14.2rem;
    position: relative;
  }

  .solution .reverse-solution-wrap {
    margin-top: 1rem;
    justify-content: flex-end;
  }

  .solution .solution-wrap .solution-image {
    position: absolute;
    top: 3rem;
    right: 0;
    width: 53rem;
    height: 39.5rem;
  }

  .solution .reverse-solution-wrap .solution-image {
    right: auto;
    left: 0;
    top: 6.4rem;
  }

  .solution .solution-wrap .solution-intro {
    padding: 4.6rem 10rem 4.6rem 5.5rem;
    width: 62.5rem;
  }

  .solution .reverse-solution-wrap .solution-intro {
    padding: 4.6rem 5.5rem 4.6rem 9.5rem;
  }

  .solution .solution-wrap .solution-intro .solution-num {
    width: 15rem;
    height: 15rem;
    font-size: 5.7rem;
    padding: 0 0rem 0 0.8rem;
    line-height: 1.2em;
  }

  .solution .solution-wrap .solution-intro .think-man {
    left: 48%;
    top: -11.4rem;
    width: 9.5rem;
  }

  .solution .reverse-solution-wrap .solution-intro .think-man {
    left: 53%;
  }

  .solution .reverse-solution-wrap .solution-intro .solution-num {
    padding-right: 1.4rem;
  }

  .solution .solution-wrap .solution-intro .trouble {
    font-size: 1.6rem;
  }

  .solution .solution-wrap .solution-intro .solution-title {
    font-size: 2.8rem;
  }

  .solution .solution-wrap .solution-intro .down-arrow {
    width: 4.2rem;
    top: 0.5rem;
  }

  .solution .solution-wrap .solution-intro p {
    padding: 2rem;
    font-size: 1.8rem;
  }
}

/* merit
--------------------------------------------------------------*/

/* merit */

.merit {
  padding: 1rem 0 5.5rem 0;
}

.merit .merit-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.merit .merit-list .merit-item {
  width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.merit .merit-list .merit-item .merit-icon {
  width: 19rem;
  padding: 1rem 0;
  position: relative;
}

.merit .merit-list .merit-item .merit-icon::after {
  content: "";
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16.8rem;
  height: 16.8rem;
  border-radius: 100%;
  background-color: rgba(189, 44, 31, 0.07);
}

.merit .merit-list .merit-item .merit-title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
}

.merit .merit-list .merit-item .merit-title h3 {
  color: var(--cl-key02);
  font-size: 1.8rem;
}

.merit .merit-list .merit-item .merit-title img {
  width: 2rem;
}

.merit .merit-list .merit-item .merit-title img:last-child {
  transform: rotate(45deg);
}

@media print, screen and (min-width: 640px) {
  .merit {
    padding: 1rem 0 7rem 0;
  }

  .merit .merit-list {
    flex-direction: row;
    gap: 5.5rem;
  }

  .merit .merit-list .merit-item {
    width: 33rem;
  }

  .merit .merit-list .merit-item .merit-icon {
    padding: 0;
  }

  .merit .merit-list .merit-item .merit-icon::after {
    top: 75%;
    left: 50%;
    width: 16.8rem;
    height: 16.8rem;
  }

  .merit .merit-list .merit-item .merit-title {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 3rem;
  }

  .merit .merit-list .merit-item .merit-title h3 {
    font-size: 2.4rem;
  }
  .merit .merit-list .merit-item .merit-icon:nth-child(2){
    margin-bottom: 1.6rem;
  }
  .merit .merit-list .merit-item .merit-title img {
    width: 2rem;
  }
}

/* system
--------------------------------------------------------------*/

/* system */

.system {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    white 60%
  );
  position: relative;
  padding-top: 3.3rem;
}

.system-background {
  width: 100vw;
  height: 100%;
  position: absolute;
  top: -2.3rem;
  left: 0;
  z-index: -1;
}

.system-container {
  position: relative;
  z-index: 3;
  width: var(--container-width);
  margin: 2rem auto;
}

.system-image {
  margin-top: 2rem;
}


@media print, screen and (min-width: 640px) {
    
.system {
    padding-top: 16rem;
  }
  
.system-container {
  margin-bottom: 0;
  padding-bottom: 2rem;
}
}


/* faq
--------------------------------------------------------------*/

/* faq */

.faq {
  margin: 4.5rem auto 2rem auto;
}

.faq .section-title {
  padding-bottom: 1.5rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.faq-list .faq-item {
  padding: 2rem 2rem 0 2rem;
  background-color: #f7f7f7;
  position: relative;
  padding-bottom: 0;
  transition: all 0.5s ease-in-out;
}

.faq-list .faq-item .question {
  font-size: 1.4rem;
  font-weight: bold;
  width: 85%;
  padding-left: 10%;
  position: relative;
  padding-bottom: 1.5rem;
  line-height: 2rem;
}

.faq-list .faq-item .question::before {
  content: "Q";
  position: absolute;
  top: 0.3rem;
  left: 0;
  font-size: 1.2rem;
  background-color: var(--cl-key02);
  color: white;
  border-radius: 100%;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  padding-bottom: 0.4rem;
}

.faq-list .faq-item .answer {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2rem;
  display: none;
  /* padding-bottom: 1.5rem; */

  transition: all 0.5s ease-in-out;
}

.faq-list .faq-item .faq-arrow {
  position: absolute;
  right: 2rem;
  top: 2.2rem;
  width: 1.5rem;
  transform: rotate(-180deg);
  transition: transform 0.3s ease-in-out;
}

.faq-list .faq-item .faq-arrow.active {
  transform: rotate(0deg);
}

.faq-list .faq-item .show-answer {
  overflow: hidden;
  display: block;
}


@media print, screen and (min-width: 640px) {
    
.faq .u-inner{
    max-width: 91rem;
}

.faq {
   position: relative;
    margin: 0 auto 2rem auto;
    padding-top: 8rem;
    background-color: white;
    z-index: 4;
  }
  .faq .faq-line{
    position: absolute;
    left: -35rem;
        top: -72rem;
        z-index: -1;
        transform: rotateZ(17deg);
        width: 143rem;
  }
  .faq-list {
    margin-top: 1.3rem;
    gap: 1.5rem;
  }
  .faq-list .faq-item .question {
    font-size: 1.8rem;
    padding-left: 4%;
    cursor: pointer;
    line-height: 2.8rem;
  }
  .faq-list .faq-item .answer {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}


/* contact
--------------------------------------------------------------*/

/* contact */

.contact {
  background-color: rgba(189, 44, 31, 0.05);
  padding: 0.3rem 0 6rem 0;
  margin-top: 7rem;
}

.contact .big-english-title {
  font-size: 4.8rem;
  color: var(--cl-key02);
  font-weight: bold;
  text-align: center;
  position: relative;
  top: -2rem;
  line-height: 1em;
}

.contact form .tips {
  font-size: 1.2rem;
  padding: 1.6rem 0 1.4rem 0;
  font-weight: 500;
}

.contact form .required-star {
  color: var(--cl-key02);
  padding-right: 1rem;
}

.contact form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.7rem;
}

.contact form .form-group label {
  font-size: 1.4rem;
  font-weight: 500;
}

.contact form .form-group label .required-star {
  padding-left: 1rem;
}

.contact form .form-group input[type="text"] {
  border: none;
  padding: 1.7rem 2rem;
}

.contact form .button {
  width: 29.8rem;
  margin: 3.3rem auto 0 auto;
  background-color: var(--cl-key02);
  padding: 2.3rem 0;
  color: white;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  border: none;  /* 佐々木追記 */
}


@media print, screen and (min-width: 640px) {

    .contact {
        padding: 0.3rem 0 12rem 0;
        margin-top: 18rem;
      }
      
      .contact .big-english-title {
        font-size: 8rem;
        top: -5rem;
        line-height: 1em;
      }
      .contact .contact-tips-text{
        font-size: 1.8rem;
      }
      .contact .section-title{
        padding-bottom: 2.5rem;
      }
      .contact form{
        width: 72rem;
        margin: 0 auto;
      }
      .contact form .tips {
        font-size: 1.4rem;
        padding: 5.3rem 0 4rem 0;
      }
      
      .contact form .required-star {
        padding-right: 1rem;
      }
      
      .contact form .form-group {
        display: flex;
        flex-direction: row;
        gap: 5rem;
        margin-bottom: 3rem;
      }
      
      .contact form .form-group label {
        min-width: 14rem;
      }
      
      .contact form .form-group label .required-star {
        padding-left: 1rem;
      }
      
      .contact form .form-group input[type="text"] {
        padding: 2.2rem 2rem;
        width: 100%;
      }
      
      .contact form .button {
        width: 29.8rem;
        margin: 5.8rem auto 0 auto;
        padding: 2.3rem 0;
        gap: 1rem;
        border: none;  /* 佐々木追記 */
      }
      
}


.notfound{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 12rem;
  padding-bottom: 5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.u-title-lg{
  font-size: 3rem;
  text-align: center;
}

.notfound .notfound-txt{
  text-align: center;
  padding: 5rem 0 3rem 0;
  font-size: 1.6rem;
  font-weight: bold;
}

.back-button{
  display: flex;
  justify-content: center;
}

.back-button a{
  width: 20rem;
  height: 5rem;
  background-color: var(--cl-key02);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: white;
}

body:has(.notfound) .footer{
  margin-bottom: 0;
}

@media print, screen and (min-width: 640px) {
  .notfound{
    padding-top: 27rem;
    padding-bottom: 20rem;
  }
  
  .u-title-lg{
    font-size: 5rem;
  }
  
  .notfound .notfound-txt{
    padding: 10rem 0 7rem 0;
    font-size: 2rem;
  }
  
  .back-button a{
    width: 30rem;
    height: 7rem;
    font-size: 1.6rem;
  }
  
}


body:has(.formthanks) .footer{
  margin-bottom: 0;
}

.formthanks-ico{
  width: 7rem;
  margin: 0 auto;
}

.formthanks{
  padding: 10rem 0 5rem 0;
}

.c-formthanks-txt{
  font-size: 1.6rem;
  text-align: center;
  font-weight: bold;
  margin: 6rem 0 2rem 0;
}

.c-formthanks-ex{
  text-align: center;
  font-size: 1.4rem;
}

.c-formthanks-notice{
  border: 1px solid #CCC;
  padding: 3rem 2rem;
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 2rem 0 4rem 0;
}


@media print, screen and (min-width: 640px) {
  .formthanks-ico{
    width: 10rem;
  }
  
  .formthanks{
    padding: 20rem 0 10rem 0;
  }
  
  .c-formthanks-txt{
    font-size: 1.8rem;
    margin: 10rem 0 2rem 0;
  }
  
  .c-formthanks-ex{
    font-size: 1.6rem;
  }
  
  .c-formthanks-notice{
    padding: 5rem 4rem;
    font-size: 1.8rem;
    margin: 5rem 0 8rem 0;
  }
}