@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:500,700&display=swap&subset=japanese);

/* =============================================
 全体設定
============================================= */

html {
  background-color: #ccc
}

html * {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  max-width: 600px
}

body {
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  background-color: #FFF;
  color: #2B2B2B;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
}

html,
body {
  min-height: 100vh;
}

.hbspt-form {
  display: none;
}

h1 {
  height: 47px;
  margin: 0;
  font-weight: normal;
}

.header_text {
  vertical-align: middle;
  display: inline-block;
  font-size: 12px;
  height: 39px;
}

/* ボタンの装飾リセット */
button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none
}

html {
  line-height: 1
}

ol,
ul {
  list-style: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

caption,
td,
th {
  text-align: left;
  font-weight: inherit;
  vertical-align: middle
}

blockquote,
q {
  quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none
}

a img {
  border: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block
}

a {
  color: inherit;
  text-decoration: inherit
}

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

.inputRadio {
  display: inline-block;
  position: relative
}

.inputRadio input {
  display: none
}

.inputRadio1,
.inputRadio2,
.inputRadio3 {
  width: 100%
}

h3 {
  font-size: 20px;
}

h3>span {
  font-size: 24px;
  font-weight: bold;
}

.inputRadio:hover,	
.next-btn:hover,	
.cta-btn:hover,	
#last-name:hover,	
#tel:hover,	
#email:hover { cursor: pointer; }

/* =============================================
 トップページ
============================================= */

#sec2,
#sec3,
#sec4,
#sec5,
#sec6 {
  display: none
}

#sec1 .wrapper,
#sec2 .wrapper,
#sec3 .wrapper,
#sec4 .wrapper,
#sec5 .wrapper {
  position: relative;
}

#sec1::before {
  content: none;
}

#sec1 {
  width: 100%;
}

#sec1>div.wrapper {
  background: url('../img/back-image.png') no-repeat center 0 / 100% auto;
}

#sec1>.wrapper {
  background: transparent;
}

#sec1>div>img {
  max-width: 100%;
}

.topTextBox {
  width: 100%;
  max-height: 600px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.topTextBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.formList-top {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  padding: 0;
  justify-content: center;
}

.item-left {
  margin-right: 5%;
  margin-bottom: 4%;
}

/* 進捗バー本体 */
.progress {
  --height: 25px;
  width: 85%;
  --radius: 9999px;
  --track: #BDBDBD;
  --fill: #169DD7;
  --inset: 14px;

  position: relative;
  height: var(--height);
  margin: 20px auto;
  background: var(--track);
  border-radius: var(--radius);
  overflow: hidden;
}

/* 進捗部分 */
.progress__fill {
  position: absolute;
  inset: 0;
  width: calc((100% - var(--inset)) * (var(--p)/100));
  background: var(--fill);
  border-radius: var(--radius);
  display: block;
}

.progress__fill {
  transition: width .55s ease;
}

#sec1>div.wrapper>h3 {
  text-align: center;
}

.item-top {
  width: 40%;
  margin-top: 30px;
}

.checkbox-top {
  border: 1px solid #B1E7FE;
  font-size: 1.17em;
  font-weight: bold;
  box-shadow: 4px 4px 0 #169DD7;
  background: #fdfcfa;
  text-align: center;

  img {
    width: 40%;
    margin: 0 auto;
  }

  .man {
    width: 42%;
  }

  p {
    margin: auto;
  }
}

/* 項目を選択したらへこませる */
.inputRadio1:active {
  transform: translateY(4px);
  box-shadow: none;
}

header {
  background-color: #FFF;
  position: relative;
  z-index: 50;
}

footer {
  margin-top: auto;
  z-index: 100;
}

footer .wrapper {
  padding: 5px 0;
  border-top: 1px solid #8D8D8D;
  text-align: center;
  font-size: 10px;
  line-height: 1
}

footer>.wrapper>ul {
  padding: 0;
}

main .sec>.wrapper {
  padding: 15px 15px 40px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.sec>.wrapper .formHead {
  text-align: center;
  line-height: 1.4;
  padding: 15px 8px;
}

.logo {
  padding: 4px;
}

.logo>img {
  width: 80px;
}

/* 指さし本体 */
#sec1 .guide-hand{	
position: absolute;	
top: -120px;	
left: var(--left, auto);	
right: var(--right, 10px);	
width: 56px;	
opacity: 0;	
pointer-events: none;	
z-index: 5;	
--sway: 8px;	
}

/* 起動用クラス：落下(1回) → 横揺れ(無限) を連結 */	
#sec1 .guide-hand.is-active{	
animation:	
handDrop .9s cubic-bezier(.22,.61,.36,1) forwards,	
handSway 1.6s ease-in-out .9s infinite;	
}	

/* 落下（停止位置は JS から --stop で供給） */	
@keyframes handDrop{	
0% { top:-120px; opacity:0; }	
100% { top:var(--stop, 0px); opacity:1; }	
}	

/* 横揺れ（左右に行ったり来たり） */	
@keyframes handSway{	
0% { transform: translateX(calc(var(--sway) * -1)); }	
50% { transform: translateX(var(--sway)); }	
100% { transform: translateX(calc(var(--sway) * -1)); }	
}

/* =============================================
 2ページ目（状況確認ページ）
============================================= */

h3 {
  font-weight: normal;
  margin-bottom: 20px;
}

#sec2 {
  position: relative;
  isolation: isolate;
}

#sec2,
#sec3,
#sec4,
#sec5,
#sec6 {
  position: relative;
  background: url('../img/back-image.png') no-repeat center 0 / 100% auto;
}

.checkbox {
  display: flex;
  position: relative;
  height: 95px;
  border: 1px solid #B1E7FE;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3em;
  flex-wrap: wrap;
  box-shadow: 4px 4px 0 #169DD7;
  background: #fdfcfa;
  z-index: 1;

  img {
    height: 90%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 0;
  }

  p {
    margin: auto;
    width: 100%;
    text-align: center;
    z-index: 2;
  }
}

.formHead {
  margin: 0 auto;
  padding-bottom: 15px;
  border-bottom: #169DD7 solid 3px;
  width: 90%;
}

.item {
  padding-bottom: 5px;
}

#sec2>.wrapper>ul {
  padding: 0;
  width: 90%;
  margin: 0 auto;
}

#sec2>.wrapper>ul>li>label {
  height: 50px;
  width: 85%;
  margin: 0 auto 20px;
}

#sec2>.wrapper>ul {
  margin-top: 40px;
}

#sec2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  aspect-ratio: 393 / 474;
  background: url('../img/back_image_item/back_image1.png') no-repeat center bottom / contain;
  z-index: 0;
  pointer-events: none;
  width: 65%;
}

#sec2 .wrapper>.formHead,
#sec2 .wrapper>.formList,
#sec2 .wrapper>.btnBack {
  position: relative;
  z-index: 1;
}

.blue {
  background-color: #169DD7 !important;
  box-shadow: none !important;
  color: #fff !important;
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.blue>.hidden {
  display: none;
}

#sec2 .guide-hand{	
position: absolute;	
top: calc(100% + 80px);	
right: auto !important;	
left: 0;	
width: 56px;	
opacity: 0;	
pointer-events: none;	
z-index: 5;	
--sway: 8px;	
}	
/* せり上がりアニメーション */	
#sec2 .guide-hand.is-active{	
animation:	
handRise .9s cubic-bezier(.22,.61,.36,1) forwards,	
handSway 1.6s ease-in-out .9s infinite;	
}	
@keyframes handRise{	
0% { top: calc(100% + 80px); opacity: 0; }	
100% { top: var(--stop, 0px); opacity: 1; }	
}	
@keyframes handSway{	
0% { transform: translateX(-8px); }	
50% { transform: translateX( 8px); }	
100% { transform: translateX(-8px); }	
}

/* =============================================
 3ページ目（地域確認ページ）
============================================= */

#sec3>div.wrapper>ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 430px;
  margin: 40px auto 0;
  padding: 0;
}

.item-nine {
  width: 100px;
  margin-bottom: 15px;
  margin-left: 15px;
}

.item-nine-right {
  margin-right: 15px;
}

@media (max-width: 399px) {
  .item-nine-right {
    margin-right: 0px;
  }
}

.formList .item:first-child>label>p,
.formList .item:last-child>label>p {
  line-height: 3rem;
}

/* 項目を選択したらへこませる */
.checkbox:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* 戻るボタンの設定 */
.prevBtn {
  font-size: 10px;
  color: #737373;
  margin-top: 30px;
  margin-left: 25px;
}

.dli-chevron-round-left {
  display: inline-block;
  vertical-align: middle;
  color: #737373;
  line-height: 1;
  position: relative;
  width: 1em;
  height: 1em;
  transform: translateX(25%) rotate(-135deg);
}

.dli-chevron-round-left::before {
  top: 0;
    left: 0;
    right: 0;
    height: 0.1em;
}

.dli-chevron-round-left::after {
  top: 0;
    right: 0;
    bottom: 0;
    width: 0.1em;
}

.dli-chevron-round-left::before, .dli-chevron-round-left::after {
  content: '';
    position: absolute;
    background: currentColor;
    border-radius: 0.1em;
}

/* sec3～sec5 は入場アニメなし：常に見出し位置で横揺れ */
#sec3 .guide-hand,	
#sec4 .guide-hand,	
#sec5 .guide-hand {	
position: absolute;	
right: 10px;	
top: var(--stop, 0px);	
width: 56px;	
opacity: 1;	
pointer-events: none;	
z-index: 5;	
--sway: 8px;	
animation: handSway 1.6s ease-in-out infinite;	
}	
#sec5 .guide-hand {	
z-index:200;	
}

/* =============================================
 4ページ目（名前確認ページ）
============================================= */
#sec4 {
  position: relative;
  padding-bottom: clamp(200px, 30vw, 320px);
}

#sec4>div.wrapper {
  text-align: center;
}

#sec4>div.wrapper>div.privacy>p>a {
  color: #639B4A;
}

#sec4>div.wrapper>div.privacy>p {
  margin: 25px 0;
}

#sec4>div.wrapper>div.privacy {
  font-size: 0.7rem;
}

#sec4>div.wrapper>.comment>h3 {
  width: 60%;
}

.input {
  all: unset;
  text-align: left; 
  padding: 10px;
  width: 60%;
  border-radius: 10px;  
  border: 2px solid #BDBDBD;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transition: border-color .3s ease-in-out;
  margin-top: 30px;
  background-color: #FFF;
}

.input:hover,
.input:focus {
  border-color:#169DD7;
}

input::placeholder {
  text-align: left;
  color: #BDBDBD;
  font-size: 12px;
}

.next-btn {
  display: block;
  margin: 0 auto;
  width: 60%;
  height: 50px;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  color: #FFF;
  font-size: 20px;
  letter-spacing: 5px;
  background-image: linear-gradient(45deg, #B5E9FF 0%, #54B0D7 50%, #007FB5 100%);
  transition: .4s;
  position: relative;
}

.next-btn::before {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
  transform: rotate(45deg);
}

.next-btn::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 26px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
  transform: rotate(45deg);
}

.next-btn:hover {
  background-image: linear-gradient(45deg, #54B0D7 0%, #075475 100%);
}

#sec4>div.wrapper button {
  display: block;
}

.annotation {
  font-size: 16px;
  font-weight: normal;
}

#sec4::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  aspect-ratio: 393 / 474;
  background: url('../img/back_image_item/back_image2.png') no-repeat center bottom / contain;
  z-index: 0;
  pointer-events: none;
  width: 65%;
}

/* =============================================
 5ページ目（電話番号、メールアドレス確認ページ）
============================================= */
#sec5 {
  position: relative;
  padding-bottom: clamp(200px, 30vw, 320px);
}

#sec5>div.wrapper {
  text-align: center;
}

.cta-btn {
  display: block;
  margin: 0 auto;
  width: 70%;
  height: 65px;
  padding: 9px 20px;
  border-radius: 50px;
  text-decoration: none;
  color: #FFF;
  font-size: 30px;
  font-weight: bold;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  transition: .4s;
  margin-top: 40px;
  position: relative;
  text-align: center;
  z-index: 100;
}

@media screen and (max-width: 450px) {
  .cta-btn {
    font-size: 20px;
  }
}

.cta-btn::before {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
  transform: rotate(45deg);
}

.cta-btn::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 26px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
  transform: rotate(45deg);
}

.cta-btn:hover {
  background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
}

#sec5>div.wrapper>.btnBack {
  position: absolute;
  left: 15px;
}

.input-first {
  margin-top:30px;
}

.input-second {
  margin-top: 20px;
}

.input-second>p {
  padding-left: 40px;
}

.input-first>p,
.input-second>p {
  margin: 0;
  padding-right: 50%;
}

.input-first>input,
.input-second>input {
  margin-top: 0;
}

#sec5::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  aspect-ratio: 393 / 474;
  background: url('../img/back_image_item/back_image3.png') no-repeat center bottom / contain;
  z-index: 0;
  pointer-events: none;
  width: 65%;
}

#error-messages {
  text-align: center;
  margin: 20px auto;
}

#error-messages p {
  color: red;
  font-size: 14px;
  margin-bottom: 10px;
}

/* =============================================
 6ページ目（Thanksページ）
============================================= */
#sec6>.wrapper>h3 {
  font-size: 24px;
  font-weight: bold;
}

.inverted-triangle {
  background-color: #FF9011;
  width: 100px;
  height: 35px;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  margin: 0 auto;
}

.cta-text {
  margin: 30px auto 30px;
  width: 70%;
}

.line {
  text-align: center;
  background-color: #B1E7FE;
  padding: 10px 5px;
  width: 80%;
  margin: 15px auto 0;
}

.line>p {
  font-weight: bold;
}

.line>a>img {
  width: 80%;
  padding: 20px 0 15px;
}

/* =============================================
 フッター
============================================= */
#lp02>footer>div {
  background: black;
  color: white;
}