@charset "UTF-8";

.udon_tokuban_contents {
  --tk-red: #d9121f;
  --tk-red-dark: #b50b16;
  --tk-blue: #0b8ed8;
  --tk-blue-dark: #0877b4;
  --tk-yellow: #ffd23f;
  --tk-ink: #232323;
  --tk-sub: #6a655c;
  --tk-radius: 20px;

  background: #fbf0d6 url("../img/bg.jpg") center top / cover no-repeat;
  padding: 16px 12px 56px;
  color: var(--tk-ink);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .03em;
  -webkit-font-smoothing: antialiased;
}


.udon_tokuban_head {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  background: #000;
  border-radius: var(--tk-radius) var(--tk-radius) 0 0;
  overflow: hidden;
  box-shadow: 0 18px 40px -14px rgba(120, 80, 0, .35);
}
.udon_tokuban_head h1 {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  line-height: 0;
}
.udon_tokuban_head h1::before,
.udon_tokuban_head h1::after { content: none; }
.udon_tokuban_head img {
  display: block;
  width: 100%;
  height: auto;
}


.udon_tokuban_concept {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px 48px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #fffdf8 0%, #fffaf0 100%);
  border-radius: 0 0 var(--tk-radius) var(--tk-radius);
  text-align: center;
  box-shadow: 0 24px 50px -16px rgba(120, 80, 0, .35);
  clip-path: inset(0 -80px -80px -80px);
}
.udon_tokuban_concept > * {
  max-width: 680px;
  margin: 34px auto 0;
}
.udon_tokuban_concept > :first-child { margin-top: 0; }

.udon_tokuban_concept p {
  padding: 0;
  font-size: 15px;
  line-height: 1.9;
  text-wrap: balance;
}
.udon_tokuban_concept strong { font-weight: 800; }


.udon_tokuban_concept .ph { display: inline-block; }
.udon_tokuban_concept .pc_br { display: none; }


.tk_lead { color: #333; }


.tk_ask {
  position: relative;
  padding-top: 30px !important;
  font-size: 19px !important;
  font-weight: 800;
  line-height: 1.75 !important;
  letter-spacing: .05em;
}
.tk_ask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  height: 8px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, var(--tk-red) 4px, transparent 4.5px) 0 0 / 8px 8px no-repeat,
    radial-gradient(circle, var(--tk-yellow) 4px, transparent 4.5px) 18px 0 / 8px 8px no-repeat,
    radial-gradient(circle, var(--tk-blue) 4px, transparent 4.5px) 36px 0 / 8px 8px no-repeat;
}
.tk_mark {
  background: linear-gradient(transparent 60%, rgba(255, 210, 63, .85) 60%);
  padding: 0 .1em;
}


.udon_tokuban_concept .tk_ref {
  font-size: 16px !important;
  line-height: 2;
}

.udon_tokuban_concept .tk_ref a {
  color: var(--tk-blue);
  font-size: 1.25em;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}




.tk_voice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 10px;
}
.tk_bubble {
  display: inline-block;
  padding: 5px 16px;
  background: #fff;
  border: 2px solid var(--tk-ink);
  border-radius: 22px;
  box-shadow: 0 3px 0 var(--tk-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  transform: rotate(-1.2deg);
}
.tk_bubble:nth-child(even) { transform: rotate(1.2deg); }
.tk_etc {
  font-size: 14px;
  color: var(--tk-sub);
}
.tk_reason {
  flex-basis: 100%;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--tk-red-dark);
}


.tk_pick {
  line-height: 2.2 !important;
}
.tk_pick strong {
  display: inline;
  padding: 0 .15em;
  font-size: 17px;
  font-weight: 800;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tk_pick strong:nth-of-type(1) {
  color: var(--tk-red-dark);
  background: linear-gradient(transparent 58%, rgba(255, 210, 63, .85) 58%);
}
.tk_pick strong:nth-of-type(1)::after {
  content: "\A";
  white-space: pre;
}
.tk_pick strong:nth-of-type(2) {
  color: var(--tk-blue-dark);
  background: linear-gradient(transparent 58%, rgba(11, 142, 216, .22) 58%);
}

/* ---------- プレゼント ---------- */
.tk_gift {
  font-weight: 700;
}
.tk_gift strong {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  padding: 0 1.1em;
  color: var(--tk-red-dark);
  font-size: 20px;
  letter-spacing: .05em;
}
.tk_gift strong::before,
.tk_gift strong::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3px;
  height: 1.3em;
  border-radius: 2px;
  background: var(--tk-red);
}
.tk_gift strong::before { left: 0;  transform: translateY(-50%) rotate(-28deg); }
.tk_gift strong::after  { right: 0; transform: translateY(-50%) rotate(28deg); }

/* ---------- CTA ---------- */
.tk_cta { text-align: center; }
.udon_tokuban_concept .btn_style1_link {
  margin: 0;
  padding: 0;
  text-align: center;
  background: none;
}
.udon_tokuban_concept .btn_style1_link a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  margin: 0;
  padding: 20px 26px 20px 32px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ee2a35 0%, #d9121f 55%, #c20e1a 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .06em;
  text-decoration: none;
  box-shadow: 0 6px 0 #9d0912, 0 14px 26px rgba(217, 18, 31, .35);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: tk-pulse 2.6s ease-out infinite;
}
.udon_tokuban_concept .btn_style1_link a::before { content: none; }
.udon_tokuban_concept .btn_style1_link a::after {
  all: unset;
  content: "";
  box-sizing: border-box;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9121f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .2s ease;
}
.udon_tokuban_concept .btn_style1_link a:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #9d0912, 0 10px 20px rgba(217, 18, 31, .35);
  animation: none;
}
.udon_tokuban_concept .btn_style1_link a:hover::after { transform: translateX(3px); }
.udon_tokuban_concept .btn_style1_link a:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 #9d0912, 0 4px 10px rgba(217, 18, 31, .3);
}
.udon_tokuban_concept .btn_style1_link a:focus-visible {
  outline: 3px solid var(--tk-yellow);
  outline-offset: 4px;
}
@keyframes tk-pulse {
  0%   { box-shadow: 0 6px 0 #9d0912, 0 14px 26px rgba(217,18,31,.35), 0 0 0 0 rgba(217,18,31,.40); }
  70%  { box-shadow: 0 6px 0 #9d0912, 0 14px 26px rgba(217,18,31,.35), 0 0 0 16px rgba(217,18,31,0); }
  100% { box-shadow: 0 6px 0 #9d0912, 0 14px 26px rgba(217,18,31,.35), 0 0 0 0 rgba(217,18,31,0); }
}

/* 締切 */
.udon_tokuban_concept .tk_deadline {
  margin: 24px 0 0;
  font-size: 15px;
}
.udon_tokuban_concept .tk_deadline strong {
  font-weight: 800;
  letter-spacing: .05em;
}
.tk_date {
  color: var(--tk-red-dark);
  font-size: 1.25em;
}

/* ---------- 注意事項 ---------- */
.udon_tokuban_concept h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 56px auto 0;
  padding: 0;
  background: none;
  color: var(--tk-sub);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
}
.udon_tokuban_concept h3::before,
.udon_tokuban_concept h3::after {
  content: "";
  position: static;
  flex: 1;
  height: 1px;
  background: #d9cfb8;
}
.udon_tokuban_concept .list {
  margin: 14px auto 0;
  padding: 0 4px;
  list-style: none;
  background: none;
}
.udon_tokuban_concept .list li {
  position: relative;
  padding-left: 1.4em;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--tk-sub);
  text-align: left;
}
.udon_tokuban_concept .list li + li { margin-top: 8px; }
.udon_tokuban_concept .list li::before {
  content: "";
  position: absolute;
  left: .25em;
  top: .78em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9bfa5;
  font-size: inherit;
}

/* =========================================================
   Tablet / PC
   ========================================================= */
@media screen and (min-width: 768px) {
  .udon_tokuban_contents {
    --tk-radius: 24px;
    padding: 48px 24px 96px;
  }
  .udon_tokuban_concept {
    padding: 64px 56px 80px;
  }
  .udon_tokuban_concept > * { margin-top: 48px; }
  .udon_tokuban_concept > :first-child { margin-top: 0; }

  .udon_tokuban_concept .pc_br { display: inline; }
  .udon_tokuban_concept p { font-size: 17px; }

  .tk_lead { font-size: 18px !important; line-height: 2 !important; }

  .tk_ask {
    padding-top: 36px !important;
    font-size: 28px !important;
  }
  .tk_ask::before { width: 56px; transform: translateX(-50%) scale(1.2); }

  .tk_ref {
    font-size: 18px !important;
  }

  .udon_tokuban_concept .tk_ref a {
    font-size: 1.35em;
  }

  .tk_voice { gap: 16px 14px; }
  .tk_bubble { padding: 7px 22px; font-size: 18px; box-shadow: 0 4px 0 var(--tk-ink); }
  .tk_etc { font-size: 16px; }
  .tk_reason { margin-top: 10px; font-size: 20px; }

  .tk_pick strong { font-size: 22px; }

  .tk_gift strong { font-size: 26px; margin-top: 8px; padding: 0 1.2em; }

  .udon_tokuban_concept .btn_style1_link a {
    max-width: 500px;
    padding: 24px 32px 24px 40px;
    font-size: 23px;
  }
  .udon_tokuban_concept .btn_style1_link a::after { width: 34px; height: 34px; background-size: 18px; }
  .udon_tokuban_concept .tk_deadline { margin-top: 28px; font-size: 17px; }

  .udon_tokuban_concept h3 { margin-top: 72px; font-size: 17px; }
  .udon_tokuban_concept .list li { font-size: 14.5px; }

  .br_hidden { display: none; }
}


@media (prefers-reduced-motion: reduce) {
  .udon_tokuban_concept .btn_style1_link a { animation: none; transition: none; }
}