@charset "utf-8";
/* CSS Document */

#remote_img{
    max-width: 300px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    display: block;
    margin-top: 5rem;
}

h1{
    background-color: var(--main_color);
    padding-top: 1.2rem;
    margin: 0;
    padding-bottom: 1.2rem;
    width: 100%;
    height: auto;
    color: #FFFFFF;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 1.1;
    font-size: 2.3rem;
    text-align: center;
}
h1 span{
    color: #FFFFFF;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    font-size: 1rem;
    text-align: center;
    display: block;
    margin-right: auto;
    padding: 0;
    margin-left: auto;
}
.txt{
    max-width: 1300px;
    height: auto;
    color: #333;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.65;
    margin-right: auto;
    padding: 0;
    margin-left: auto;
    margin-top: 3rem;
}
    @media (max-width: 566px) {
		.txt{
    width: 94%;
    padding-left: 1rem;
    padding-right: 1rem;
		}				
    }	
	
.txt2{
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
    margin-top: 1rem;
}
}
    @media (max-width: 566px) {
		.txt2{
    width: 100%;
		}				
    }	
    .container {
    max-width: 1300px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 4rem;
    }


    @media (max-width: 950px) {
		.container {
			width: 94%;
		}				
    }


    .steps {
      display: flex;
      flex-wrap: nowrap;
    }

    .step {
      position: relative;
      flex: 1;
      color: white;
      text-align: center;
      padding: 40px 10px;
      font-size: 1.2em;
      font-weight: bold;
      cursor: pointer;
      clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
      transition: all 0.3s ease;
      background: linear-gradient(145deg, #1e3c72, #2a5298);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .step:hover {
      transform: scale(1.03);
      box-shadow: 0 0 15px rgba(30, 100, 255, 0.6);
    }


    .step span {
      display: block;
      font-size: 0.8em;
      opacity: 0.8;
    }

    /* 色をグラデーションで段階的に */
    .step:nth-child(1) {
      background: linear-gradient(145deg, #2066af, #2989d8);
    }

    .step:nth-child(2) {
      background: linear-gradient(145deg, #1b5ea8, #2779ce);
    }

    .step:nth-child(3) {
      background: linear-gradient(145deg, #154f9d, #236dc2);
    }

    .step:nth-child(4) {
      background: linear-gradient(145deg, #103d85, #1c5bb2);
    }

    .info-box {
      margin-top: 25px;
      background: white;
      border-left: 5px solid #1976d2;
      padding: 20px;
      min-height: 80px;
      color: #333;
      font-size: 1em;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
    }

.step.active {
  outline: 4px solid #ffca28; /* 強調された黄色のアウトライン */
  box-shadow:
    0 0 10px rgba(255, 202, 40, 0.6),
    0 0 20px rgba(255, 202, 40, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.2); /* ネオン感 + 輪郭強調 */
  background: linear-gradient(145deg, #2d8be5, #52a7f7); /* 少し明るく */
  transform: scale(1.05);
  z-index: 2;
}
	
	
/*--------------------------------------------------------------*/
/*	ログインボタン
/*--------------------------------------------------------------*/
.css_btn_class {
    font-size: 1.3em;
    font-weight: normal;
    -moz-border-radius: 8px;
    color: #FFFFFF !important;
    background-image: -webkit-linear-gradient(270deg,rgba(228,0,126,1.00) 0%,rgba(203,0,112,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(228,0,126,1.00) 0%,rgba(203,0,112,1.00) 100%);
    width: 40%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    display: block;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5rem;
}
.css_btn_class:hover {
	background-image: -webkit-linear-gradient(270deg,rgba(25,118,204,1.00) 0%,rgba(22,104,181,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(25,118,204,1.00) 0%,rgba(22,104,181,1.00) 100%);

}
    @media (max-width: 566px) {
		.css_btn_class{
   			 width: 100%;
		}				
    }	
/* ===== たまに“分かる”レベルで震える（CSSのみ） ===== */

/* 震え本体（少し強め） */
@keyframes btnNudgeStrong {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  8%   { transform: translate3d(-2px,0,0) rotate(-0.6deg); }
  16%  { transform: translate3d( 2px,0,0) rotate( 0.6deg); }
  24%  { transform: translate3d(-3px,0,0) rotate(-0.9deg); }
  32%  { transform: translate3d( 3px,0,0) rotate( 0.9deg); }
  40%  { transform: translate3d(-4px,0,0) rotate(-1.1deg); }
  48%  { transform: translate3d( 4px,0,0) rotate( 1.1deg); }
  60%  { transform: translate3d(-2px,0,0) rotate(-0.7deg); }
  72%  { transform: translate3d( 2px,0,0) rotate( 0.7deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

/* 待機→一瞬震える（周期A/Bで規則性を薄める） */
@keyframes cycleA {
  0%, 90% { transform: translate3d(0,0,0) rotate(0deg); }
  100%    { transform: translate3d(0,0,0) rotate(0deg); }
}
@keyframes cycleB {
  0%, 93% { transform: translate3d(0,0,0) rotate(0deg); }
  100%    { transform: translate3d(0,0,0) rotate(0deg); }
}

.css_btn_class{
  position: relative;
  display: block;                 /* 念のため */
  transform: translateZ(0);
  will-change: transform;
}

/* “たまに震える”は疑似要素で実行（本体transformと干渉しにくい） */
@media (prefers-reduced-motion: no-preference){
  .css_btn_class::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;

    /* 12秒＆17秒の2周期で、毎回終盤に0.55秒だけ強めに震える */
    animation:
      cycleA 9s linear infinite,
      cycleB 13s linear infinite,
      btnNudgeStrong 0.8s ease-in-out infinite;
    animation-delay:
      0s,
      0s,
      10.9s; /* ← 震え始めの位置（12秒の終盤） */
    animation-duration:
      12s,
      17s,
      12s;   /* ← nudgeは12秒周期で1回だけ起きる */
  }

  /* さらに“存在感”が欲しい場合はここをON（薄い呼吸効果） */
  .css_btn_class{
    animation: breathe 3.6s ease-in-out infinite;
  }
  @keyframes breathe{
    0%,100%{ transform: translateZ(0) scale(1); }
    50%    { transform: translateZ(0) scale(1.02); }
  }
}

/* 動きを減らす設定なら停止 */
@media (prefers-reduced-motion: reduce){
  .css_btn_class,
  .css_btn_class::after{
    animation: none !important;
  }
}


	

.sms_system {
    margin-right: auto;
    padding: 0;
    margin-left: auto;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    font-size: 2.3rem;
    text-align: center;
    margin-top: 10rem;
    color: var(--main_color);
}
/*---------------------------------------------------------------*/
/*  FAQ                                                          */
/*---------------------------------------------------------------*/
.faq-wrap {
  width: min(100%, 1300px);
  margin: 0 auto;
  padding: 0;
}
.faq-wrap .top_margin_Cancel {
  margin-top: 0;
}
.faq-wrap .question {
  position: relative;
  display: block;
  margin: 2.25rem 0 .5rem;
  color: var(--main_color);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.45;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.faq-wrap .question::before {
  content: "Q";
  display: inline-flex;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  background: #1976CC;
  color: #fff;
}
.faq-wrap .answer {
  position: relative;
  display: block;
  width: 100%;
  padding: 1.5rem 2rem;
  background: #F8FBFF;
  border: 1px solid #DFEAF6;
  border-radius: 4px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  font-size: 1rem;
  overflow-wrap: break-word;
  word-break: normal;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  margin-bottom: 3.5rem;
}
.faq-wrap .answer:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
  background-color: #ECF4FF;
  color: #000;
}
.faq-wrap .faq-more {
  margin-top: 2rem;
  color: #666;
  text-align: left;
}
@media (max-width: 560px) {
  .faq-wrap {
    padding: 0;
    width: 94%;
  }
  .faq-wrap .answer {
    padding: .9rem 1rem;
    margin: 0;
  }
  .faq-wrap .question {
    margin-top: 5rem;
  }
}