/* @import 'tailwindcss'; */
@import "../flux.css";
:root {
    --ion-color-primary: var(--color-bland_gold);
    --ion-background-color: #fff;
    --ion-card-background: #fff;
    --ion-border-radius: 14px;
    --ion-font-family: "Noto Sans JP", ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    color-scheme: light;
    --spacing: 0.25em;
    --radius-sm: 0.25em;
    --tw-border-style: solid;
    --color-bland_gold: #c9a063;
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --font-weight-bold: 700;
    --color-white: #ffffff;
    --color-dis: #E1DDD8;
    --color-bland_dark: #795929;
    --color-fill_gray: #F8F8F8;
    --radius-sm: 0.25em;
    --leading-relaxed: 1.625;
    --font-weight-normal: 400;
    --tw-ring-offset-width: 0px;
    --tw-inset-shadow: 0 0 #0000;
    --tw-inset-ring-shadow: 0 0 #0000;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-offset-shadow: 0 0 0 calc(0px + 0px);
    --tw-shadow: 0 0 #0000;
    --color-text_gray: #84807B;
    --color-gray-400: #cfcdcb;
    --color-gray-500: #bab8b4;
    --color-gray-700: #85807a;
    --color-gray: #C4C4C4;
    --text-sm: 0.875rem;
}
/* override */
.text-bland_dark {
    color: #795929;
}
.text-text_gray {
    color: #84807B;
}
.text-22px {
    font-size: 22px !important;
}
.leading-1_2 {
    line-height: 1.2 !important;
}
.leading-1_5 {
    line-height: 1.5 !important;
}
.leading-1_8 {
    line-height: 1.8 !important;
}
.bg-C9A063-600 {
    background-color: #d6b788 !important;
}
.menu-button-hidden {
  display: block !important;
}
.k-button {
    display: inline-flex;
    min-height: calc(var(--spacing) * 13);
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-sm) !important;
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
    border-color: transparent !important;
    background-color: var(--color-bland_gold);
    padding-inline: calc(var(--spacing) * 2.5) !important;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}
.k-button:active {
    background-color: var(--color-bland_dark);
}
.k-button.disabled {
    pointer-events: none;
    cursor: not-allowed;
    background-color: var(--color-dis) !important;
}
.h-14_5 {
    height: calc(var(--spacing) * 14.5);
}
.min-h-63 {
    min-height: calc(var(--spacing) * 63);
}
.backdrop-blur-xs {
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur )
}
.pt-9_5 {
    padding-top: calc(var(--spacing) * 9.5);
}
.bg-con_bg {
    background-color: #fcf9f5;
}
.text-red {
    color: #E40000;
}
.bg-fill_gray {
    background-color: var(--color-fill_gray);
}
.w-17 {
    width: calc(var(--spacing) * 17);
}
.w-30 {
    width: calc(var(--spacing) * 30 + 22px);
}
.p-3 {
    padding: calc(var(--spacing) * 3) !important;
}
.font-size-13px {
    font-size: 13px !important;
}
.after_border-bland_gold::after {
    border-top-color: var(--color-bland_gold) !important;
    border-top-style: var(--tw-border-style);
    border-top-width: 7px;
    border-inline-style: var(--tw-border-style);
    border-inline-width: 7px;
    border-inline-color: transparent;
}
.gap-0 {
    gap: calc(var(--spacing) * 0) !important;
}
.text-input {
    display: inline-flex;
    height: calc(var(--spacing) * 12);
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    overflow: hidden;
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    /* border-color: transparent; 未フォーカス時は透明にしないのでコメントアウト */
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-dark_gray);
    width: 100% !important;
}
.text-input:placeholder-shown {
    background-color: var(--color-fill_gray);
}
.text-input:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: var(--color-bland_gold);
}
.text-input:focus-visible {
    /* outline-color: var(--color-bland_gold); 二重枠削除の為コメントアウト */
    border-color: var(--color-bland_gold);
    border-width: 2px; /* フォーカス時に枠線が細くならないように調整 */
}
.text-input:placeholder-shown:focus {
    background-color: var(--color-white);
}
select.text-input:invalid {
    background-color: var(--color-fill_gray);
}
select.text-input {
    appearance: none;
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: transparent;
    background-image: url("/img/icon/pull-down.svg");
    background-position: calc(100% - 12px) center;
    background-repeat: no-repeat;
    padding-right: calc(var(--spacing) * 11);
    background-color: var(--color-white);
}
select.text-input:placeholder-shown {
    background-color: var(--color-fill_gray);
}
select.text-input:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: var(--color-bland_gold);
    background-color: var(--color-white);
}
select.text-input:focus-visible {
    outline-color: var(--color-bland_gold);
    border-color: var(--color-bland_gold);
}
select.text-input:placeholder-shown:focus {
    background-color: var(--color-white);
}
.h-17 {
    height: calc(var(--spacing) * 17);
}
.h-42 {
    height: calc(var(--spacing) * 42);
}
.scroll-bar-gray_line::-webkit-scrollbar {
    width: 4px;
}
.bg-text_gray {
    background-color: var(--color-text_gray);
}
.scroll-bar-gray_line::-webkit-scrollbar-thumb {
    background-color: #c7c5c0;
}
.border-text_gray {
    border-color: var(--color-text_gray);
}
.button-wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
}
.before_border-text_gray:before {
    border-color: var(--color-text_gray);
}
.after_bg-bland_gold::after {
    background-color: var(--color-bland_gold);
}
.has-input-checked:has(:is(input:checked)):before {
    content: var(--tw-content);
    border-color: var(--color-bland_gold);
}
.border-gray-400 {
    border-color: var(--color-gray-400) !important;
}
.text-gray-700 {
    color: var(--color-gray-700) !important;
}
.text-gray-500 {
    color: var(--color-gray-500) !important;
}
.text-gray {
    color: var(--color-gray) !important;
}
.border-gray {
    border-color: var(--color-gray);
}
.min-w-18 {
    min-width: calc(var(--spacing) * 18);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}
.aspect-16_9 {
    aspect-ratio: 16 / 9 !important;
}

.text-sm {
    font-size: var(--text-sm);
}
.line-clamp-10 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
}
/* 本文用デフォルトCSSオーバーライド */
.wysiwyg-content p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
    color: var(--color-dark_gray) !important;
}
.wysiwyg-content p a {
    color: var(--color-bland_gold);
    text-decoration: underline;
}
.wysiwyg-content p span {
    color: var(--color-dark_gray) !important;
}
.wysiwyg-content img {
    display: inline;
}
.wysiwyg-content h1,
.wysiwyg-content h2,
.wysiwyg-content h3,
.wysiwyg-content h4,
.wysiwyg-content h5,
.wysiwyg-content h6 {
    margin-top: 16px;
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 1.2;
}
/* Ionic コンポーネントのカスタムプロパティ */
ion-content::part(scroll)::-webkit-scrollbar {
  display:none;
}
ion-toolbar {
    --background: #ffffff;
    --color: var(--color-bland_dark);
    --padding-start: 12px;
    --padding-end: 12px;
}
ion-title {
    font-weight: 400;
    font-size: 14px;
    --color: #795929;
}
ion-menu::part(container) {
    --width: 100%;
}
ion-menu-button::part(native) {
    width: 41px;
    --background: url("../../../img/icon/menu.svg") no-repeat center / 24px;
}
ion-menu-button::part(icon) {
    display: none;
}
/*
*  Preview styles
*/
#preview {
    margin: 0;
    background-color: #ccc;
}
#mobile-view {
    width: 393px;
    height: 852px;
    background: #fff;
    margin: auto;
}

.field-section {
    padding-bottom: calc(var(--spacing) * 6);
}

.caution-section {
  position: relative;
}
.caution-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  padding: calc(var(--spacing) * 2) 0;
  border-bottom: 1px solid var(--color-gray_line);
}
/* 同意チェックボックスの上下余白 */
.agree-caution {
  margin-top: calc(var(--spacing) * 10);
  margin-bottom: calc(var(--spacing) * 10);
}

/* オートフィルの背景を上書きする CSS を追加 */
input.text-input:-webkit-autofill,
textarea.text-input:-webkit-autofill,
select.text-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  box-shadow: 0 0 0px 1000px #fff inset;
  background-color: #fff !important;
}