@charset "UTF-8";
.surveyBOX {
    padding: .5rem;
    color: #687178;
    margin: .5rem auto 0rem;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .125);
    font-size: 0.875rem;
    width: 100%;
}
@media (min-width: 992px) {
    .surveyBOX {
        margin-top: 2rem;
        margin-bottom: 5rem;
        padding: 1rem;
        color: #687178;
        width: 80%;
    }
}
.surveyBOX * { box-sizing: border-box; }
    :root {
      --page-bg: #ededed;
      --section-bg: #efefef;
      --text: #231815;
      --muted: #7b7b7b;
      --line: #d9d9d9;
      --required: #c70000;
      --btn: #c50000;
      --btn-dark: #a80000;
      --option-bg: #f6f6f6;
      --option-border: #dcdcdc;
      --option-active: #fff6cc;
      --option-active-border: #a98d3f;
      --blue: #297cff;
      --panel: rgba(0, 0, 0, 0.72);
      --title-yellow: #f5d15e;
    }

.surveyBOX html { scroll-behavior: smooth; }
.surveyBOX body {
      margin: 0;
      background: var(--page-bg);
      color: var(--text);
      font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
    }

.surveyBOX .page {
      width: 100%;
      margin: 0 auto; 
      min-height: 100vh;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.02);
    }

.surveyBOX .hero {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
      background: #000;
    }
 
.surveyBOX .hero-grid {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
    }

.surveyBOX .tile {
      position: relative;
      overflow: hidden;
    }

.surveyBOX .tile::before {
      content: "";
      position: absolute;
      inset: -8%;
      background:
        radial-gradient(circle at 34% 34%, rgba(255,219,162,.95), rgba(166,106,53,.9) 42%, rgba(92,51,23,.98) 78%);
      filter: saturate(1.05);
    }

.surveyBOX .tile::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 52%;
      transform: translate(-50%, -50%) rotate(-9deg);
      width: 178px;
      height: 152px;
      border-radius: 50% 47% 52% 48% / 44% 49% 51% 56%;
      background: radial-gradient(circle at 36% 32%, rgba(255,227,177,.5), rgba(142,84,38,.98) 60%);
      box-shadow: inset -20px -24px 0 rgba(85, 46, 20, .28);
    }

.surveyBOX .tile:nth-child(2)::before,
.surveyBOX .tile:nth-child(5)::before {
      background: radial-gradient(circle at 48% 45%, rgba(117,86,40,.72), rgba(60,36,17,.95) 56%, rgba(26,13,7,1) 100%);
    }
.surveyBOX .tile:nth-child(2)::after,
.surveyBOX  .tile:nth-child(5)::after {
      width: 150px;
      height: 150px;
      border-radius: 46% 54% 45% 55% / 42% 43% 57% 58%;
      background: radial-gradient(circle at 42% 40%, rgba(121,85,36,.36), rgba(70,43,18,.98));
    }

.surveyBOX .tile:nth-child(3)::before,
.surveyBOX .tile:nth-child(6)::before {
      background: radial-gradient(circle at 64% 34%, rgba(74,80,134,.72), rgba(17,18,25,.98) 56%, rgba(9,9,10,1) 100%);
    }
.surveyBOX .tile:nth-child(3)::after,
.surveyBOX .tile:nth-child(6)::after {
      width: 132px;
      height: 192px;
      border-radius: 43% 57% 44% 56% / 31% 36% 64% 69%;
      background: radial-gradient(circle at 30% 18%, rgba(98,104,181,.82), rgba(20,21,29,.98) 58%);
      transform: translate(-42%, -46%) rotate(-18deg);
    }
.surveyBOX .brand {
      position: absolute;
      top: 14px;
      left: 0;
      right: 0;
      z-index: 2;
      text-align: center;
    }
.surveyBOX .brand a {text-align: center; display: flex;justify-content: center;align-items: center}
.surveyBOX .brand a img { display: block;margin-top: 1px; width:160px; height:46px; }

.surveyBOX .hero-panel {
      position: absolute;
      left: 6%;
      right: 6%;
      top: 15%;
      z-index: 2;
      background: rgba(0,0,0,0.75);
      border-radius: 8px;
      padding: 24px 22px 22px;
      text-align: center;
    }

.surveyBOX .hero-title {
      margin: 0 0 10px; 
		color: transparent;
		background: linear-gradient(90deg, #D3b242 20%, #Fffbce 30%, #c2980b 60%, #Fffbce 70%);
		background-clip: text;
      font-size: 40px;
      line-height: 1.35;
      font-weight: 900;
      letter-spacing: .02em;
    }

.surveyBOX  .hero-copy {
      margin: 0;
      color: #fff;
      font-size: 26px;
      line-height: 1.5;
      font-weight: 500;
      letter-spacing: .01em;
    }

.surveyBOX .hero-copy .accent { color: #ff2525; }

.surveyBOX .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 18px;
      min-width: 360px;
      height: 50px;
      padding: 0 28px;
      background: var(--btn);
      color: #fff;
      font-size: 20px;
      line-height: 1;
      font-weight: 700;
	border-radius: .25rem;
      text-decoration: none;
      transition: background .2s ease;
    }
.surveyBOX .cta:hover { background: var(--btn-dark); }

.surveyBOX  .form-wrap {
      padding: 56px 36px 64px;
    }

.surveyBOX form { margin: 0; }

.surveyBOX .question {
      display: grid;
      grid-template-columns: 88px 1fr;
      column-gap: 20px;
      padding: 36px 0 45px;
      border-top: 1px solid var(--line);
    }
.surveyBOX  .question:first-of-type {
      border-top: none;
      padding-top: 58px;
    }

.surveyBOX  .q-side { padding-top: 2px; }

.surveyBOX .q-no {
      margin: 0;
      font-size: 40px;
      line-height: .94;
      font-weight: 500;
      letter-spacing: -.03em;
      color: #231815;
    }

.surveyBOX .required {
      display: inline-block;
      margin-top: 16px;
      background: var(--required);
      color: #fff;
      font-size: 19px;
      line-height: 1;
	  letter-spacing: 0.25em;
		text-align:center;
      font-weight: 500;
      padding: 9px 7px 8px 10px;
    }

.surveyBOX .q-title {
      margin: 0 0 22px;
      font-size: 32px;
      line-height: 1.45;
      font-weight: 700;
      letter-spacing: .01em;
    }

.surveyBOX  .helper {
      margin: -8px 0 16px;
      color: var(--blue);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: .1em;
    }

.surveyBOX  .field-label {
      display: inline-block;
      min-width: 121px;
      background: #ffffff; 
      color: #2b2b2b;
      font-size: 22px;
      line-height: 1;
      padding: 11px 5px 10px;
      margin: 0 0 9px;
    }

.surveyBOX .option-list {
      display: grid;
      gap: 8px;
    }

.surveyBOX  input[type="radio"],
.surveyBOX  input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

.surveyBOX  .option {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 50px;
      padding: 8px 18px;
	background: linear-gradient(180deg, #f8f8f8 30%, #ffffff 70%);
      border: 1px solid var(--option-border);
      color: #2d2d2d;
      font-size: 23px;
      line-height: 1.25;
      cursor: pointer;
      transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
      user-select: none;
    }
.surveyBOX  .option:hover {
      border-color: #c9c9c9;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
    }

.surveyBOX  input[type="radio"]:checked + .option,
.surveyBOX input[type="checkbox"]:checked + .option {
      background: var(--option-active);
      border-color: var(--option-active-border);
    }

.surveyBOX .stack-gap { height: 24px; }

.surveyBOX  .select-wrap { position: relative; }
.surveyBOX  select,
.surveyBOX  textarea,
.surveyBOX input[type="text"],
.surveyBOX input[type="email"] {
      width: 100%;
      border: 1px solid var(--option-border);
      background: linear-gradient(180deg, #f8f8f8 30%, #ffffff 70%);
      color: #2d2d2d;
      font: inherit;
      outline: none;
    }

.surveyBOX select {
      appearance: none;
      min-height: 50px;
      padding: 0 58px 0 18px;
      font-size: 23px;
      cursor: pointer;
    }

.surveyBOX .select-wrap::after {
      content: "▼";
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #111;
      pointer-events: none;
    }

.surveyBOX  textarea {
      min-height: 120px;
      padding: 16px 18px;
      font-size: 19px;
      resize: vertical;
      line-height: 1.6;
    }

.surveyBOX .consent {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-top: 10px;
      font-size: 16px;
      line-height: 1.7;
      color: #333;
    }

.surveyBOX  .consent input {
      position: relative;
      opacity: 1;
      width: 18px;
      height: 18px;
      margin-top: 4px;
      flex: 0 0 auto;
    }

.surveyBOX .submit-area {
      border-top: 1px solid var(--line);
      padding: 34px 0 0;
      text-align: center;
    }

.surveyBOX .submit-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 320px;
      height: 64px;
      border: none;
      background: #298ba5;
      color: #fff;
      font-size: 22px;
      font-weight: 700;
      cursor: pointer;
	border-radius: .25rem;
		line-height: 1.5rem;
      transition: background .2s ease, transform .05s ease;
    }
.surveyBOX .submit-btn:hover { background: #1a6c81; }
.surveyBOX  .submit-btn:active { transform: translateY(1px); }

.surveyBOX .status {
      display: none;
      margin-top: 18px;
      padding: 15px 18px;
      background: #fff;
      border: 1px solid #d7d7d7;
      color: #222;
      font-size: 16px;
      line-height: 1.7;
      text-align: left;
    }
.surveyBOX .status.show { display: block; }
.surveyBOX .status.ok { border-color: #8fbe8f; background: #f7fff7; }
.surveyBOX .status.error { border-color: #d9a3a3; background: #fff8f8; }

.surveyBOX .footnote {
      margin-top: 30px;
      color: #333333;
      font-size: 13px;
      line-height: 1.7;
      text-align: center;
    }

    @media (max-width: 767px) {
.surveyBOX  .hero {
        min-height: auto;
      }

.surveyBOX  .hero-panel {
        left: 3%;
        right: 3%;
        top: 17%;
        padding: 10px 10px 10px;
      }

.surveyBOX .hero-title {
        font-size: 36px;
      }

.surveyBOX .hero-copy {
        font-size: 16px;
      }

.surveyBOX .cta {
        width: 100%;
        min-width: 0;
        height: 46px;
        font-size: 20px;
      }

.surveyBOX .form-wrap {
        padding: 0 20px 52px;
      }

.surveyBOX .question {
	   display: grid;
        grid-template-columns: 72px 1fr;
        column-gap: 14px;
        padding: 32px 0 38px;
      }

.surveyBOX .q-no {
        font-size: 32px;
      }

 .surveyBOX .required {
        margin-top: 10px;
        font-size: 12px;
        padding: 8px 10px 7px;
      }

.surveyBOX  .q-title {
        font-size: 20px;
        margin-bottom: 18px;
      } 
.surveyBOX .field-label {
        font-size: 18px;
        min-width: 98px;
        padding: 10px 12px 9px;
      }

.surveyBOX .option,
.surveyBOX select {
        min-height: 42px;
        font-size: 16px;
      }

.surveyBOX  textarea,
.surveyBOX  input[type="text"],
.surveyBOX  input[type="email"] {
        font-size: 17px;
      }

.surveyBOX .submit-btn {
        width: 100%;
        min-width: 0;
        height: 60px;
        font-size: 20px;
      }
    }
	  
 @media (max-width: 575.98px) {
		.surveyBOX  .brand a img { display: block;margin-top: 1px; width:100px; height:29px; }
		.surveyBOX  .hero-title { font-size: 25px; }
	    .surveyBOX .hero-copy {font-size: 18px;}
	  }
 @media (max-width: 440px) {
	 .surveyBOX  .hero-title { font-size: 22px; }
	    .surveyBOX .hero-copy {font-size: 14px;}
}