@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {
  .no-spinner {
    -moz-appearance: textfield;
  }

  .no-spinner::-webkit-outer-spin-button,
  .no-spinner::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  .signature-canvas {
    flex: 1;
    min-height: 254px;
  }

  @media (min-height: 585px) {
    .signature-canvas {
      min-height: 0;
    }
  }
}
.print-svg > svg {
  width: 188px;
  height: 188px;
}
input[type="radio"].kpt-card-radio{
  position: relative;
  width: 26px;
  height: 26px;
  color: #fff;
  border: 2px solid #ABABAB;
  border-radius: 50%;
  vertical-align: -8px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="radio"].kpt-card-radio:checked {
  position: relative;
  width: 26px;
  height: 26px;
  color: #fff;
  border: 1px solid #ABABAB;
  border-radius: 50%;
  vertical-align: -8px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="radio"].kpt-card-radio:checked::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E0694B;
  content: '';
}

input[type="radio"].kpt-card-radio:focus {
  --tw-ring-color: none;
}

ul.kpt-list {
  list-style: none;
  padding-left: 0;
}

ul.kpt-list li {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

ul.kpt-list li::before {
  flex: 0 0 auto;
  margin-right: 16px;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #E0694B;
  border-radius: 50%;
}

.balloon {
  position: relative;
}

.balloon::before {
  content: "";
  position: absolute;
  top: calc(50% - 18px);
  right: -20px;
  display: block;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 20px solid #F6F6F6;
}

.balloon::after {
  content: "";
  position: absolute;
  top: calc(50% - 18px);
  right: -16px;
  display: block;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 20px solid #F6F6F6;
}

.balloon.focused::before {
  content: "";
  position: absolute;
  top: calc(50% - 18px);
  right: -20px;
  display: block;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 20px solid #E0694B;
}

.balloon.focused::after {
  content: "";
  position: absolute;
  top: calc(50% - 18px);
  right: -16px;
  display: block;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 20px solid #FFF8F7;
}

.balloon-tab {
  position: relative;
}

.balloon-tab.active::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: calc(50% - 8px);
  display: block;
  width: 0;
  height: 0;
  border-top: 8px solid #E0694B;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
.fixed-bottom-form-button {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #063A77;
  padding: 1.2rem 0;
  z-index: 1;
}

.fixed-bottom-form-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  gap: 0.8rem;
}

.fixed-bottom-form-button-container-sp {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  gap: 5.6rem;
}

.fixed-bottom-form-button-sp {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 1.6rem 5.6rem 1.4rem 10.5rem;
  background-color: #E0694B;
}

.fixed-bottom-form-button-logo-text-image {
  width: 15.2rem;
  height: 3.2rem;
}

.fixed-bottom-form-button-logo-text-sub-container-sp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem
}
.
.fixed-bottom-form-button-logo-text-image-sp {
  width: 8.8rem;
  height: 1.85rem;
}

.fixed-bottom-form-button-logo-text-container {
  display: flex;
  flex-direction: column;
}

.fixed-bottom-form-button-text {
  color: #FFF;
  font-family: '游ゴシック', 'Yu Gothic', '游ゴシック体', Avenir, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, Roboto, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.96px;
  margin-top: 1rem;
}

.fixed-bottom-form-button-sub-text-sp {
  color: #FFF;
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.64px;
  margin-top: 0.5rem;
}

.fixed-bottom-form-button-text-sp {
  color: #FFF;
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.64px;
}

.fixed-bottom-form-button-right-arrow-icon {
  width: 1.2rem;
  height: 2rem;
  margin: 1rem 0 0 0
}

.top {
  background: linear-gradient(348deg, rgba(0, 0, 0, 0.00) 8.39%, rgba(255, 255, 255, 0.20) 91.61%), #063A77;
}

.top-sp {
  min-height: 771px;
}

.top-container {
  display: flex;
  justify-content: center;
}

.top-left-container .promotion_banner {
  top: -44px;
  left: -44px;
}

.top-right-container {
  width: 100%;
  max-width: 672px;
}

.table-contents-container {
  background-color: #EBF5FE;
  padding: 2.4rem 0 0 0;
  width: 100%;
  overflow-x: auto;
}

.table-contents-container-sp {
  background-color: #FFF;
  padding-top: 5.6rem;
  width: 100%;
}

.table-content-items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  min-width: 133.6rem;
}

.table-content-items-sp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  padding: 0 3.2rem;
}

.table-content-item {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  text-decoration: none;
}

.table-content-item-sp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 1.6rem;

  border-bottom: 0.1rem dashed #063A77;
  text-decoration: none;
}

.table-content-item-line {
  width: 1px;
  height: 4.8rem;
  background-color: #063A77;
}

.table-content-item-text {
  display: flex;
  align-items: center;
  color: #063A77;
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 120%;
  margin-left: 0.8rem;

  &::after {
    display: block;
    background-image: url(/assets/arrow_down_icon-6e40a7111fa3a2239d99a4ceefb93c12bf612809f9a45ebc06372a5196f4bdd6.png);
    background-size: contain;
    content: '';
    width: 2rem;
    height: 2rem;
    margin-left: 2.4rem
  }
}

.table-content-item-text-sp {
  display: flex;
  align-items: center;
  color: #063A77;
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 120%;
  margin-left: 0.8rem;
}

.table-content-item-icon {
  width: 2rem;
  height: 2rem;
}

.points {
  margin-bottom: 6rem;
}

.points-sp {
}

.points-image {
  width: 100%;
  max-width: 1336px;
}

.points-title-sp {
  margin: 4rem 0;
}

.points-title-sp {
  margin-bottom: 3.2rem; 
}

.points-title-sub_content-sp {
  margin-top: 2.4rem;
}

.work-flow {
  background-color: #F6F6F6;
}

.work-flow-sp {
  background-color: #F6F6F6;
}

.work-flow-image {
  width: 100%;
  max-width: 1336px;
}

.points-space {
  width: 133.6rem;
  height: 6.4rem;
  background-color: #F6F6F6;
}

.features {
}

.feature1-1-image {
  width: 100%;
  max-width: 1336px;
}

.feature1-2-image {
  width: 100%;
  max-width: 1336px;
  padding: 0 10rem;
}

.feature2-image {
  width: 100%;
  max-width: 1336px;
}

.feature3-image {
  width: 100%;
  max-width: 1336px;
}


.materials {
  background-color: #EBF5FE;
}

.materials-image {
  width: 100%;
  max-width: 1336px;
}

.how-to-use {
  background-color: #FFF;
}

.how-to-use-sp {
  background-color: #FFF;
}

.how-to-use-image {
  width: 100%;
  max-width: 1336px;
}

.how-to-use-content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.6rem 0.8rem;
  margin: 0 20rem;
  border-radius: 0.8rem;
  background-color: #E0694B;
  box-shadow: 0px 2px 8px 0px rgba(218, 159, 134, 0.25);
}

.how-to-use-content-container-sp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.6rem 0.8rem;
  margin: 2.4rem 3.2rem 4rem 3.2rem;
  border-radius: 0.8rem;
  background-color: #E0694B;
  box-shadow: 0px 2px 8px 0px rgba(218, 159, 134, 0.25);
}

.how-to-use-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

.how-to-use-icon {
  width: 7.9rem;
  height: 7.1rem;
}

.how-to-use-icon-text {
  color: #FFF;
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 140%;
}

.how-to-use-icon-text-sp {
  color: #FFF;
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 100%;
}

.how-to-use-form-button-container {
  display: flex;
  width: 31.9rem;
  height: 4.4rem;
  padding: 1.8rem 5.9rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 62px;
  border: 1px solid #E0694B;
  background: #FFF;
  box-shadow: 0px 2px 10px 0px rgba(224, 105, 75, 0.25);
  color: var(--Kakaris-orange, #E0694B);
  text-align: center;
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 100%;
}

.how-to-use-form-button-container-sp {
  display: flex;
  width: 27.9rem;
  height: 4.4rem;
  padding: 1.8rem 5.9rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 62px;
  border: 1px solid #E0694B;
  background: #FFF;
  box-shadow: 0px 2px 10px 0px rgba(224, 105, 75, 0.25);
  color: var(--Kakaris-orange, #E0694B);
  text-align: center;
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 100%;
}


.how-to-use-inquiry-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.8rem;
}

.how-to-use-inquiry-icon {
  width: 2.4rem;
  height: 2.4rem;
}

.how-to-use-inquiry-text {
  color: #FFF;
  text-align: center;
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 100%;
  text-decoration-line: underline;
}

.price {
  background-color: #EBF5FE;
}

.price-image {
  width: 100%;
  max-width: 1336px;
}

.price-inquiry-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-top: 40px;
  padding-bottom: 56px;
}

.price-inquiry-icon {
  width: 2.4rem;
  height: 2.4rem;
}

.price-inquiry-text {
  color: #063A77;
  text-align: center;
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 100%;
  text-decoration-line: underline;
}

.oishi-kenko-service-description {
  background-color: #063A77;
}

.oishi-kenko-service-description-image {
  width: 100%;
  max-width: 1336px;
}

.oishi-kenko-service-description-button-container {
  display: flex;
  width: 39.9rem;
  height: 5.6rem;
  padding: 1.8rem 5.9rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.announcements {
  background-color: #EBF5FE;
}

.announcements summary {
  list-style: none;
}

.announcements summary::-webkit-details-marker {
  display: none;
}
.interview-privacy-policy-checkbox-input {
  padding: 4px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.interview-privacy-policy-checkbox-input-input {
  margin: 0;
  width: 0;
  opacity: 0;
}

.interview-privacy-policy-checkbox-input-input:hover > .interview-privacy-policy-checkbox-input-dummy-input {
  background: #FFFFFF;
  border: solid 2px #333333;
}

.interview-privacy-policy-checkbox-input-input:focus + .interview-privacy-policy-checkbox-input-dummy-input {
  background: #FFFFFF;
  border: solid 2px #333333;
}

.interview-privacy-policy-checkbox-input-input:checked + .interview-privacy-policy-checkbox-input-dummy-input {
  border: solid 2px #333333;
  background: #FFFFFF;
}

.interview-privacy-policy-checkbox-input-input:checked + .interview-privacy-policy-checkbox-input-dummy-input::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hlY2siPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIj48L3BvbHlsaW5lPjwvc3ZnPg==") no-repeat center;
  background-size: contain;
}

.interview-privacy-policy-checkbox-input-dummy-input {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  border: solid 2px #333333;
  background: #FFFFFF;
  border-radius: 4px;
}
.recipe-ranking {
  grid-template:
    "item0 item0 item0 item0 item1 item1 item1 item1 item2 item2 item2 item2"
    "item0 item0 item0 item0 item1 item1 item1 item1 item2 item2 item2 item2"
    "item0 item0 item0 item0 item1 item1 item1 item1 item2 item2 item2 item2"
    "item0 item0 item0 item0 item1 item1 item1 item1 item2 item2 item2 item2"
    "item0 item0 item0 item0 item1 item1 item1 item1 item2 item2 item2 item2"
    "item3 item3 item3 item3 item4 item4 item4 item4 item5 item5 item5 item5"
    "item3 item3 item3 item3 item4 item4 item4 item4 item5 item5 item5 item5"
    "item3 item3 item3 item3 item4 item4 item4 item4 item5 item5 item5 item5"
    "item6 item6 item6 item7 item7 item7 item8 item8 item8 item9 item9 item9"
    "item6 item6 item6 item7 item7 item7 item8 item8 item8 item9 item9 item9"
    "item6 item6 item6 item7 item7 item7 item8 item8 item8 item9 item9 item9";
  grid-template-columns: repeat(12, 1fr);
}

.item0 {
  grid-area: item0;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.item4 {
  grid-area: item4;
}

.item5 {
  grid-area: item5;
}

.item6 {
  grid-area: item6;
}

.item7 {
  grid-area: item7;
}

.item8 {
  grid-area: item8;
}

.item9 {
  grid-area: item9;
}

.recipe-ranking-number {
  text-shadow:
    1px 1px 0px #063a77,
    -1px 1px 0px #063a77,
    1px -1px 0px #063a77,
    -1px -1px 0px #063a77,
    1px 0px 0px #063a77,
    0px 1px 0px #063a77,
    -1px 0px 0px #063a77,
    0px -1px 0px #063a77;
}
.rg-border-dotted {
  background-image: radial-gradient(circle, #9CA3AB 1px, transparent 1.4px);
  background-size: 8px 2px;
  background-position: left bottom;
  background-repeat: repeat-x;
}
.swiper {
  --swiper-pagination-bottom: 0px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 .risupad-title-underline {
  position: relative;
  display: inline-block;
 }

.risupad-title-underline::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #FFCABF;
  z-index: -1;
}

.trapezoid {
  clip-path: polygon(0 0, 94% 0, 100% 100%, 0% 100%);
}

@page {
  margin: 24px;
  size: A4 portrait;
}