body {
  background-color: #fff0f5;
  font-family: 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
}
header {
  background: #ff99cc;
  text-align: center;
  position: relative;
  height: 60px;        /* ヘッダーを少し大きめに */
  line-height: 60px;   /* テキストやロゴの縦位置を中央寄せ */
}

header .logo {
  height: 50px;        /* 可能な限り大きく（60pxに収まるサイズ） */
  vertical-align: middle;
}

.line-btn {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%); /* 上下中央に配置 */
}

.line-btn img {
  width: 40px;         /* ロゴに負けない存在感 */
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: block;
}

.line-btn img:hover {
  transform: scale(1.1);
}


.logo {
  width: 120px;
}
.container {
  padding: 10px;
  max-width: 420px;
  margin: 0 auto;
}
.progress-container {
  width: 100%;
  height: 10px;
  background-color: #f5c6d6; /* 薄ピンク背景 */
  border-radius: 20px;
  overflow: hidden;
  margin: 20px 0;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #ff69b4; /* 濃いピンク */
  transition: width 1s ease; /* アニメーション */
}

.question-text {
  text-align: center;
  font-size: 25px;
  margin-bottom: 40px;
  color: #d63384;
  font-weight: bold;
}
input[type="number"],
input[type="email"]
{
  width: 93%;
  padding: 12px;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid #ff99cc;
  background-color: #fff;
  margin-bottom: 140px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}
select{
  width: 98%;
  height: 80px;
  padding: 12px;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid #ff99cc;
  background-color: #fff;
  margin-bottom: 140px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.selectbox-2 {
    position: relative;
}

.selectbox-2::before,
.selectbox-2::after {
    position: absolute;
    content: '';
    pointer-events: none;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.selectbox-2::before {
    right: 0;
    display: inline-block;
    width: 2.8em;
    height: 2.8em;
    border-radius: 0 12px 12px 0;
    background-color: #ff99cc;
    content: '';
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.selectbox-2::after {
    position: absolute;
    top: 50%;
    right: 1.4em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.selectbox-2 select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: .4em 3.6em .4em .8em;
    border: 1px solid #ff99cc;
    border-radius: 12px;
    color: #d63384;
    font-size: 1em;
    cursor: pointer;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.selectbox-2 select:focus {
    outline: 1px solid #dd17a2;
}










input:focus, select:focus {
  outline: none;
  border-color: #ff66a3;
  box-shadow: 0 0 5px rgba(255, 102, 163, 0.5);
}





.checkbox-1 {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 2em;
    border: none;
    
}

.checkbox-1 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    margin-bottom: 140px;
    font-size: 18px;
}

.checkbox-1 label::before,
.checkbox-1 label:has(:checked)::after {
    content: '';
}

.checkbox-1 label::before {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #e6edf3;
}

.checkbox-1 label:has(:checked)::before {
    background-color: #d63384;
}

.checkbox-1 label:has(:checked)::after {
    position: absolute;
    top: 6px;
    left: 6px;
    transform: rotate(45deg);
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

.checkbox-1 input {
    display: none;
}



.radio-2 {
    display: flex;
    flex-wrap: wrap;
    gap: .3em 2em;
    border: none;
}

.radio-2 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    margin-bottom: 60px;
    font-size: 18px;
}

.radio-2 label::before,
.radio-2 label::after {
    border-radius: 50%;
    content: '';
}

.radio-2 label::before {
    width: 18px;
    height: 18px;
    border: 2px solid #dee5eb;
    box-sizing: border-box;
}

.radio-2 label::after {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    background-color: #dee5eb;
}

.radio-2 label:has(:checked)::after {
    background-color: #d63384;
    animation: anim-radio-2 .3s linear;
}

@keyframes anim-radio-2 {
    0% {
        box-shadow: 0 0 0 1px transparent;
    }
    50% {
        box-shadow: 0 0 0 10px #2589d033;
    }
    100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

.radio-2 input {
    display: none;
}



.textbox-1-label,
.textbox-1 {
    color: #333;
}

.textbox-1-label {
    display: block;
    margin-bottom: 5px;
    font-size: 18px;
   
}

.textbox-1 {
    width: 93%;
    padding: 8px 10px;
    border: 1px solid #d63384;
    border-radius: 12px;
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 60px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.textbox-1::placeholder {
    color: #999;
}




.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}
.radio-option {
  width: 48%;
  background-color: #fff;
  border: 1px solid #ff99cc;
  border-radius: 15px;
  padding: 10px;
  text-align: center;
}
.radio-option input {
  margin-right: 5px;
}
.nav-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#tugihe button{
  width: 200px;
  padding: 16px;
  font-size: 18px;
  background-color: #ff66a3;
  color: white;
  border: none;
  border-radius: 30px;
  margin: -20px auto 25px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}
#modoru button{
  width: 200px;
  padding: 16px;
  font-size: 18px;
  background-color: #afafaf;
  color: white;
  border: none;
  border-radius: 30px;
  margin: -20px auto 25px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

#modoru {
  text-align: center; /* 子要素を中央に */
  margin-top: 20px;
}

h3{
  text-align: center;
  font-size: 25px;
  color: #d63384;
  font-weight: bold;
}

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

.wage {
  font-family: 'Kosugi Maru', sans-serif; /* 丸文字でやさしい印象 */
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  margin: 30px auto;
  color: #ff4b9f; /* 濃いめのピンク */
  background: linear-gradient(90deg, #ff91c8, #ff4b9f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    2px 2px 6px rgba(255, 182, 193, 0.6),
    0 0 8px rgba(255, 105, 180, 0.5);
  padding: 1px 0;
  border-bottom: 3px dashed #ffc1e3; /* 可愛いラインを追加 */

  display: block;      /* ← blockにして */
  text-align: center;  /* ← 中央揃え */
  width: fit-content;  /* ← 文字幅に合わせる */
  margin-left: auto;   /* ← 中央寄せ */
  margin-right: auto;  /* ← 中央寄せ */
}




.tyui{
  text-align: center;
  color: #4f4f4f;
}

.comment-box {
  width: 85%;
  margin: 0 auto;
  border: 1px solid #ff6b9c;      /* ピンクの枠線 */
  border-radius: 12px;            /* 角を丸く */
  padding: 15px;                  /* 内側余白 */
  background-color: #ffffff;      /* 薄ピンク背景 */
  color: #4f4f4f;                    /* テキスト色 */
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 10px;

  /* 👇 ここが立体感のキモ！ */
  box-shadow: 0 6px 14px rgba(233, 30, 99, 0.35);
  /* ↑ (X方向, Y方向, ぼかし量, 色・透明度) */
}

h4{
  text-align: center;
  font-size: 20px;
  font-weight:200;

}

.answer-summary{
  margin: 20px;
}

li{
  list-style: none;
}

ul{
  padding-left:0;
}

.submit-buttons{
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.completion-buttons{
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.result-buttons{
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#sagasu button{
  width: 350px;
  padding: 16px;
  font-size: 22px;
  
  border: none;
  border-radius: 30px;
  margin: -20px auto 25px;
  display: inline-block;
  background-image: linear-gradient(45deg, #ff1493 0%, #dda0dd 100%);
  color: #fff;
  text-align: center;
  font-weight: 700;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);

}
#saisyo button{
  width: 350px;
  padding: 16px;
  font-size: 18px;
  background-image: linear-gradient(45deg, #006acd 0%, #9dd0ff 100%);
  color: white;
  border: none;
  border-radius: 30px;
  margin: -20px auto 25px;
  font-weight: 500;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

/*index.php　バナー画像*/
/* 全体をリセット */
/* バナー画像を画面いっぱいに表示 */
.fullscreen-image {
  width: 100%;
}
.background {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ←ここで画像全体を見せる */
  object-position: center;
  z-index: 0;
}


#start {
  position: absolute;
  top: 85%; /* ← 中央より下に配置。80%とかでもOK */
  left: 50%;
  transform: translate(-50%, -50%);
}

/* オプション：ボタンのスタイル */
#startBtn {
  padding: 10px 20px;
  font-size: 18px;
  width: 200px;
  padding: 16px;
  font-size: 22px;
  background-image: linear-gradient(45deg, #ff1493 0%, #dda0dd 100%);
  color: white;
  border: none;
  border-radius: 30px;
  margin: -20px auto 25px;
  font-weight: 700;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

/* オプション：チェックボックスラベル */
#start label {
  display: block;
  margin-bottom: 10px; /* ← 上げたいならこの数値を増やす */
  font-size: 14px;
  text-align: center;
}


#type button{
  width: 350px;
  padding: 16px;
  font-size: 22px;
  
  border: none;
  border-radius: 30px;
  margin: -20px auto 25px;
  display: inline-block;
  background-image: linear-gradient(45deg, #ff1493 0%, #dda0dd 100%);
  color: #fff;
  text-align: center;
  font-weight: 700;

}



.type-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 80px;
  flex-wrap: wrap; /* スマホでも折り返し可能に */
}

.type-button button {
  width: 160px;        /* 幅固定 */
  height: 160px;       /* 高さ固定＝正方形 */
  font-size: 30px;
  font-weight: 700;
  background-color: #ff69b4;
  border: none;
  border-radius: 20px;
  color: white;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  word-break: break-word;
}

.type-button button:hover {
  background-color: #ff85c1;
  transform: scale(1.05);
}

.type-button a {
  text-decoration: none;
}

.select-text{
  text-align: center;
  font-size: 25px;
  margin-bottom: 40px;
  color: #d63384;
  font-weight: bold;
  margin-top: 50px;
}

#type_modoru button{
  width: 200px;
  padding: 16px;
  font-size: 18px;
  background-color: #afafaf;
  color: white;
  border: none;
  border-radius: 30px;
  margin: 60px auto 25px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.sr-only {
  position: absolute !important;
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0, 0, 0, 0); 
  white-space: nowrap; 
  border: 0;
}

.kanri-box {
  margin: 20px auto;
  padding: 20px 40px;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  background-color: #fff0f5; /* 淡いピンク */
  border: 2px solid #ff69b4; /* 濃いめピンク */
  border-radius: 20px; /* 角丸 */
  width: fit-content;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
}

.kanri-box {
  margin: 40px auto;
  padding: 30px 60px;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
  border: 3px solid #ff69b4;
  border-radius: 20px;
  width: fit-content;
  min-width: 200px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}

/* LINE公式アカウントカード */
.line-card {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto;
  padding: 15px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-width: 350px;
}

.line-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%; /* 丸くする */
  margin-right: 15px;
}

.line-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.line-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}