@charset "UTF-8";
/* line 6, ../add-men.scss */
.kaso section {
  padding: 0 5vw; }
  /* line 8, ../add-men.scss */
  .kaso section .men-block {
    width: auto;
    max-width: 1240px;
    margin: 0 auto;
    padding: 80px 0; }
    @media screen and (max-width: 960px) {
      /* line 8, ../add-men.scss */
      .kaso section .men-block {
        padding: 40px 0; } }

@media screen and (max-width: 767px) {
  /* line 19, ../add-men.scss */
  .information_area .inner_box {
    width: 92.5% !important; } }
/* line 23, ../add-men.scss */
.sample #mainVisual {
  background: url(https://tokyo-ramen.co.jp/img/sample_top.jpg) center no-repeat;
  background-size: cover;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  width: 100%; }
  /* line 32, ../add-men.scss */
  .sample #mainVisual h1 {
    font-size: 40px;
    color: #fff; }

/* line 37, ../add-men.scss */
#work_top_01 {
  background: url(/img/kodawari01-sample_bg.jpg) left bottom no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed;
  padding-bottom: 80px !important; }

/* line 43, ../add-men.scss */
.text-gray {
  color: #424242; }

/* line 46, ../add-men.scss */
.text-red {
  color: #8b0000; }

/* line 49, ../add-men.scss */
.text-underline {
  display: inline;
  padding: 0 4px 2px 4px;
  background: linear-gradient(transparent 60%, yellow 0%); }

/* line 54, ../add-men.scss */
.mt40 {
  margin-top: 40px; }

/* line 57, ../add-men.scss */
.mt60 {
  margin-top: 60px; }

/* line 60, ../add-men.scss */
.mb40 {
  margin-bottom: 40px; }

/* line 63, ../add-men.scss */
.mb60 {
  margin-bottom: 60px; }

/* line 66, ../add-men.scss */
.mr05 {
  margin-right: 0.5em; }

/* line 69, ../add-men.scss */
.note01 {
  margin-bottom: 40px; }

/* line 72, ../add-men.scss */
.pc-none {
  display: none !important; }
  @media screen and (max-width: 767px) {
    /* line 72, ../add-men.scss */
    .pc-none {
      display: flex !important; } }

/* line 79, ../add-men.scss */
.men-item-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; }
  @media screen and (max-width: 767px) {
    /* line 79, ../add-men.scss */
    .men-item-list {
      flex-direction: column; } }
  /* line 88, ../add-men.scss */
  .men-item-list .men-item {
    box-sizing: border-box;
    width: calc((100% / 3) - calc(40px / 3));
    padding: 15px 15px 30px 15px;
    background: rgba(245, 245, 242, 0.8);
    box-shadow: 5px 5px 20px -5px #888; }
    @media screen and (max-width: 1080px) {
      /* line 88, ../add-men.scss */
      .men-item-list .men-item {
        width: calc((100% / 2) - 10px); } }
    @media screen and (max-width: 767px) {
      /* line 88, ../add-men.scss */
      .men-item-list .men-item {
        width: 100%; } }

/* line 102, ../add-men.scss */
.men-item-detail {
  display: flex; }
  /* line 105, ../add-men.scss */
  .men-item-detail .men-item {
    box-sizing: border-box;
    width: 100%;
    padding: 30px 15px;
    background: rgba(245, 245, 242, 0.8);
    box-shadow: 5px 5px 20px -5px #888; }
    /* line 111, ../add-men.scss */
    .men-item-detail .men-item:last-child {
      display: none; }
    @media screen and (min-width: 768px) {
      /* line 115, ../add-men.scss */
      .men-item-detail .men-item:first-child {
        width: 60%;
        padding: 60px; }
      /* line 119, ../add-men.scss */
      .men-item-detail .men-item:last-child {
        display: block;
        width: 40%; }
      /* line 123, ../add-men.scss */
      .men-item-detail .men-item .men-img {
        margin-bottom: 0; } }
    /* line 128, ../add-men.scss */
    .men-item-detail .men-item .men-img {
      flex-flow: column;
      gap: 15px;
      margin-bottom: 20px; }
      /* line 132, ../add-men.scss */
      .men-item-detail .men-item .men-img .men-img-item {
        width: 100%; }
        /* line 134, ../add-men.scss */
        .men-item-detail .men-item .men-img .men-img-item:last-child span {
          right: auto;
          left: 5px; }
  /* line 141, ../add-men.scss */
  .men-item-detail .tag-link {
    margin-bottom: 20px; }

/* line 146, ../add-men.scss */
.men-item {
  box-sizing: border-box; }
  /* line 148, ../add-men.scss */
  .men-item h2 {
    font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    color: #8b0000;
    font-size: clamp(17px, 1.2rem, 5vw); }
  /* line 153, ../add-men.scss */
  .men-item h3 {
    font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    font-size: clamp(16px, 1rem, 4vw);
    margin-bottom: 10px;
    display: flex;
    align-items: center; }
    /* line 159, ../add-men.scss */
    .men-item h3::before {
      background-color: #000;
      content: "";
      height: 1px;
      width: 1.5em;
      margin-right: 0.5em; }
  /* line 167, ../add-men.scss */
  .men-item .men-memo {
    display: inline-block;
    font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    color: #fff;
    margin-bottom: 5px;
    background: #c2872e;
    padding: 2px 8px;
    border-radius: 3px; }
  /* line 176, ../add-men.scss */
  .men-item .men-copy {
    font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    margin-bottom: 20px; }
  /* line 182, ../add-men.scss */
  .men-item .men-spec td.men-spec-value {
    font-weight: bold;
    color: #424242; }
  /* line 188, ../add-men.scss */
  .men-item .men-img {
    display: flex;
    margin-bottom: 10px; }
    /* line 191, ../add-men.scss */
    .men-item .men-img .men-img-item {
      position: relative; }
      /* line 194, ../add-men.scss */
      .men-item .men-img .men-img-item span {
        position: absolute;
        left: 5px;
        top: 5px;
        background: rgba(255, 255, 255, 0.8);
        padding: 2px 5px;
        font-size: 0.75rem; }
      /* line 203, ../add-men.scss */
      .men-item .men-img .men-img-item:last-child span {
        left: auto;
        right: 5px; }

/* line 211, ../add-men.scss */
.men-flex-block {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  /* line 215, ../add-men.scss */
  .men-flex-block .back-link {
    display: inline-block;
    margin-left: auto; }

/* line 220, ../add-men.scss */
.men-ttl {
  text-align: center;
  width: 95%;
  margin: 0 auto 40px auto; }
  /* line 224, ../add-men.scss */
  .men-ttl h2 {
    font-size: clamp(18px, 5vw, 28px); }
    /* line 226, ../add-men.scss */
    .men-ttl h2::after {
      content: "";
      display: block;
      width: 90px;
      height: 1px;
      background: #000;
      margin: 10px auto 0; }
  /* line 235, ../add-men.scss */
  .men-ttl h3 {
    font-size: clamp(17px, 5vw, 18px);
    margin-top: 10px; }
  /* line 239, ../add-men.scss */
  .men-ttl p {
    font-weight: bold;
    margin-top: 10px; }

/* line 244, ../add-men.scss */
.men-cat {
  box-sizing: border-box;
  margin-bottom: 10px; }
  /* line 247, ../add-men.scss */
  .men-cat li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 0.75rem;
    color: #8b0000;
    border: 1px solid #8b0000;
    padding: 2px 5px;
    margin-right: 5px;
    margin-bottom: 5px; }

/* line 258, ../add-men.scss */
.tag-link {
  box-sizing: border-box;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }
  /* line 264, ../add-men.scss */
  .tag-link li {
    display: inline-block;
    box-shadow: 3px 3px 5px -3px #888; }
    /* line 267, ../add-men.scss */
    .tag-link li a {
      display: block;
      padding: 5px 8px;
      border: 1px solid #8b0000;
      background: rgba(255, 255, 255, 0.7); }
      /* line 272, ../add-men.scss */
      .tag-link li a:hover {
        color: #fff;
        background: #8b0000; }
    /* line 278, ../add-men.scss */
    .tag-link li.active a {
      background: #8b0000;
      color: #fff; }
      /* line 281, ../add-men.scss */
      .tag-link li.active a:hover {
        background: rgba(255, 255, 255, 0.7);
        color: #8b0000; }
  @media screen and (max-width: 767px) {
    /* line 258, ../add-men.scss */
    .tag-link {
      gap: 5px; }
      /* line 291, ../add-men.scss */
      .tag-link li a {
        font-size: 0.9rem;
        padding: 4px 6px; } }

/* line 298, ../add-men.scss */
.men-texture {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  /* line 304, ../add-men.scss */
  .men-texture .men-texture-item {
    box-sizing: border-box;
    width: 47%;
    margin-bottom: 10px;
    /* ツマミ：Chrome, Safari, Edge用 */
    /* ツマミ：Firefox用 */ }
    /* line 308, ../add-men.scss */
    .men-texture .men-texture-item h4 {
      color: #424242;
      font-size: 14px;
      margin-bottom: 5px; }
      /* line 312, ../add-men.scss */
      .men-texture .men-texture-item h4 span {
        color: #8b0000; }
    /* line 316, ../add-men.scss */
    .men-texture .men-texture-item input[type="range"]:disabled {
      opacity: 1; }
    /* line 319, ../add-men.scss */
    .men-texture .men-texture-item .texture-range {
      appearance: none;
      width: 100%;
      height: 1px;
      background: #424242; }
    /* line 326, ../add-men.scss */
    .men-texture .men-texture-item .texture-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 9999px;
      background: #8b0000;
      box-shadow: none; }
    /* line 336, ../add-men.scss */
    .men-texture .men-texture-item .texture-range::-moz-range-thumb {
      border: none;
      width: 14px;
      height: 14px;
      border-radius: 9999px;
      background: #c2872e;
      box-shadow: none; }
    /* line 344, ../add-men.scss */
    .men-texture .men-texture-item .slider-marks {
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      margin: 4px auto 0 auto; }
      /* line 352, ../add-men.scss */
      .men-texture .men-texture-item .slider-marks span:first-child {
        margin-left: 2px; }

/* line 360, ../add-men.scss */
.men-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px; }
  /* line 365, ../add-men.scss */
  .men-btn .btn-add-list {
    width: 70%; }
  /* line 368, ../add-men.scss */
  .men-btn .btn-detail {
    width: 26%; }

/* line 373, ../add-men.scss */
.btn-add-list button,
.btn-add-list a {
  box-sizing: border-box;
  font-size: clamp(14px, 1vw, 16px) !important;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  padding: 10px 25px 10px 50px;
  color: #fff;
  transition: 0.3s ease-in-out;
  font-weight: bold;
  background: #8b0000;
  border: 1px solid #8b0000;
  border-radius: 100vh;
  z-index: 0;
  overflow: hidden;
  cursor: pointer; }
  /* line 394, ../add-men.scss */
  .btn-add-list button:before,
  .btn-add-list a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f067";
    line-height: 1;
    position: absolute;
    left: 3px;
    background: #fff;
    color: #8b0000;
    padding: 11px;
    border-radius: 100vh;
    z-index: 2; }
  /* line 406, ../add-men.scss */
  .btn-add-list button:after,
  .btn-add-list a:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: #fff;
    transition: 0.3s;
    left: 0; }
  /* line 417, ../add-men.scss */
  .btn-add-list button:not(.active):hover,
  .btn-add-list a:not(.active):hover {
    color: #8b0000; }
    /* line 419, ../add-men.scss */
    .btn-add-list button:not(.active):hover:after,
    .btn-add-list a:not(.active):hover:after {
      width: 100%;
      z-index: -1; }
    /* line 423, ../add-men.scss */
    .btn-add-list button:not(.active):hover:before,
    .btn-add-list a:not(.active):hover:before {
      background: #8b0000;
      color: #fff; }
  /* line 428, ../add-men.scss */
  .btn-add-list button.active,
  .btn-add-list a.active {
    cursor: default;
    background: #fff;
    color: #8b0000; }
    /* line 432, ../add-men.scss */
    .btn-add-list button.active:before,
    .btn-add-list a.active:before {
      content: "\f00c";
      color: #fff;
      background: #8b0000; }
    /* line 437, ../add-men.scss */
    .btn-add-list button.active:after,
    .btn-add-list a.active:after {
      background: rgba(139, 0, 0, 0.1); }
    /* line 440, ../add-men.scss */
    .btn-add-list button.active:hover:before,
    .btn-add-list a.active:hover:before {
      color: #fff; }
/* line 445, ../add-men.scss */
.btn-add-list.btn-order {
  margin: 0 auto; }
  /* line 449, ../add-men.scss */
  .btn-add-list.btn-order button:before,
  .btn-add-list.btn-order a:before {
    content: "\f0e0"; }

/* line 456, ../add-men.scss */
#goToOrder.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed; }

/* line 464, ../add-men.scss */
.btn-detail a {
  display: block;
  width: 100%;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  font-size: clamp(14px, 1vw, 16px) !important; }
  /* line 473, ../add-men.scss */
  .btn-detail a::after {
    content: "";
    display: block;
    width: 5em;
    height: 5px;
    margin-left: -0.2em;
    margin-top: 5px;
    border: none;
    border-right: 2px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(45deg);
    transition: 0.3s; }
  /* line 486, ../add-men.scss */
  .btn-detail a:hover::after {
    width: 100%; }

/* line 493, ../add-men.scss */
:root {
  --btn-h: 56px;
  /* ボタン高さ */
  --panel-h: 0px;
  /* パネル実高さ ── JS で毎回セット */ }

/* line 497, ../add-men.scss */
html.is-reloading #footerCtrl {
  transition: none !important;
  /* 一時的にアニメーション無効 */ }

/* line 501, ../add-men.scss */
#footerCtrl {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 9999; }

/* line 510, ../add-men.scss */
.centerBox {
  position: relative;
  width: 92.5%;
  max-width: 640px;
  margin: 0 auto;
  pointer-events: auto; }

/* line 517, ../add-men.scss */
.btn-toggle-sample,
#slideContent {
  width: 100% !important; }

/* トグルボタン -------------------------------------- */
/* line 522, ../add-men.scss */
.btn-toggle-sample {
  all: unset;
  height: var(--btn-h);
  background: linear-gradient(#a44 0, #8d0505 100%);
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  cursor: pointer;
  transition: transform 0.3s;
  position: relative;
  z-index: 2; }

/* line 538, ../add-men.scss */
.btn-toggle-sample .icon {
  transition: transform 0.3s; }

/* line 541, ../add-men.scss */
#footerCtrl.open .btn-toggle-sample .icon {
  transform: rotate(180deg); }

/* スライドパネル ------------------------------------ */
/* line 545, ../add-men.scss */
#slideContent {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  max-height: 90vh;
  /* 上限が必要なら調整 */
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s;
  z-index: 1; }
  /* line 559, ../add-men.scss */
  #slideContent p {
    font-size: 0.85em;
    margin-bottom: 15px; }

/* 開いたとき */
/* line 565, ../add-men.scss */
#footerCtrl.open #slideContent {
  transform: translateY(0);
  padding: 15px 15px 40px 15px; }

/* ボタンを “実パネル高” だけ押し上げる */
/* line 570, ../add-men.scss */
#footerCtrl.open .btn-toggle-sample {
  transform: translateY(calc(-1 * var(--panel-h))); }

/* line 574, ../add-men.scss */
.men-cart-list {
  margin-bottom: 20px;
  width: 100%;
  border-top: 1px solid #ddd; }
  /* line 578, ../add-men.scss */
  .men-cart-list tr {
    border-bottom: 1px solid #ddd; }
    /* line 580, ../add-men.scss */
    .men-cart-list tr td {
      padding: 0.5rem 0; }

/* line 585, ../add-men.scss */
.men-cart-clear {
  padding-left: 1.5em;
  text-align: right; }
  /* line 588, ../add-men.scss */
  .men-cart-clear button {
    padding: 10px;
    cursor: pointer;
    color: #000; }
    /* line 592, ../add-men.scss */
    .men-cart-clear button span {
      margin-right: 0.5em; }

/* =============== ベース変数 =============== */
/* line 599, ../add-men.scss */
.form-block {
  --label-w: 100%;
  /* ラベル幅 */
  --gap: 0.75rem;
  /* 行内の隙間 */
  --input-h: 48px;
  /* 1行入力高さ */
  --radius: 8px;
  /* 角丸 */
  --border: 1px solid #aaa;
  --bg: #fff;
  /* 背景 */ }

/* line 608, ../add-men.scss */
.form-block {
  box-sizing: border-box;
  background: #f5f5f5;
  padding: 40px 0; }
  /* line 613, ../add-men.scss */
  .form-block .form-block-inner {
    box-sizing: border-box;
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
  /* line 622, ../add-men.scss */
  .form-block h2 {
    font-size: 1.4rem;
    margin-top: 60px;
    margin-bottom: 20px; }
  /* line 627, ../add-men.scss */
  .form-block .note {
    margin-top: 10px;
    font-size: 0.85rem; }
  /* line 632, ../add-men.scss */
  .form-block .thanks h2 {
    margin-top: 0; }
  /* line 635, ../add-men.scss */
  .form-block .thanks p {
    font-weight: bold;
    margin-bottom: 1em; }

/* line 642, ../add-men.scss */
.form-row {
  box-sizing: border-box;
  gap: var(--gap);
  margin-bottom: 20px; }
  /* line 648, ../add-men.scss */
  .form-row label,
  .form-row input,
  .form-row select,
  .form-row textarea {
    color: #000;
    width: 100%;
    box-sizing: border-box; }
  /* line 656, ../add-men.scss */
  .form-row.half {
    display: flex; }
    /* line 658, ../add-men.scss */
    .form-row.half .col {
      width: 50%; }

/* line 664, ../add-men.scss */
.form-row .title {
  width: var(--label-w);
  font-weight: bold;
  line-height: var(--input-h);
  position: relative;
  padding-left: 2.4em; }
  /* line 670, ../add-men.scss */
  .form-row .title::before {
    content: "任意";
    background-color: #777;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 4px;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0; }
/* line 689, ../add-men.scss */
.form-row.required .title::before {
  content: "必須";
  background-color: #8b0000; }
/* line 695, ../add-men.scss */
.form-row p {
  margin-bottom: 1em; }

/* 1行入力フィールド */
/* line 700, ../add-men.scss */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select {
  flex: 1;
  height: var(--input-h);
  padding: 0 0.75rem;
  border: var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  box-sizing: border-box; }

/* line 712, ../add-men.scss */
.form-row textarea {
  flex: 1;
  min-height: calc(var(--input-h) * 2.5);
  padding: 0.75rem;
  border: var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  resize: vertical; }

/* line 721, ../add-men.scss */
.form-row input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: middle; }

/* サンプル麺：縦並び */
/* line 729, ../add-men.scss */
.inline-options {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 1項目ずつ折り返し */
  gap: 0.5rem; }

/* line 735, ../add-men.scss */
.option-item {
  display: flex;
  align-items: center;
  gap: 0.5rem; }

/* line 740, ../add-men.scss */
.option-item label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.35rem; }

/* line 746, ../add-men.scss */
.option-item .note {
  font-size: 0.85rem;
  color: #666; }

/* line 750, ../add-men.scss */
.detail-btn {
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer; }

/* line 759, ../add-men.scss */
.detail-btn:active {
  opacity: 0.85; }

/* ===== サンプル麺横並び ===== */
/* line 763, ../add-men.scss */
.sample-list {
  border-top: 1px solid #aaa;
  margin: 10px 0 20px 0; }

/* line 767, ../add-men.scss */
.sample-item {
  padding: 0.4rem 0;
  border-bottom: 1px solid #aaa; }
  /* line 770, ../add-men.scss */
  .sample-item .item-ttl {
    position: relative;
    padding-left: 1.3em;
    font-weight: bold; }
    /* line 774, ../add-men.scss */
    .sample-item .item-ttl::before {
      font-weight: 900;
      display: block;
      font-family: "Font Awesome 5 Free";
      content: "\f058";
      position: absolute;
      color: #8b0000;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2; }
  /* line 787, ../add-men.scss */
  .sample-item .men-cat {
    margin-top: 5px;
    margin-bottom: 0; }

/* line 792, ../add-men.scss */
.sample-item label {
  display: flex;
  align-items: center;
  gap: 0.25rem; }

/*# sourceMappingURL=add-men.css.map */