@charset "UTF-8";

/* ========================================
 * リセットCSS
 * ======================================== */

html,body {
    background-color: transparent;
}

*,*:after,*:before {
    box-sizing: border-box
}

* {
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit
}

pre,textarea {
    overflow: auto
}

template {
    display: none
}

details,main,summary {
    display: block
}

input[type=number] {
    width: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

progress {
    display: inline-block
}

small {
    font-size: 75%
}

sub,sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

textarea {
    resize: vertical
}

audio,canvas,iframe,img,svg,video {
    vertical-align: middle
}

img {
    width: 100%;
    height: auto;
    border: 0
}

audio:not([controls]) {
    display: none
}

button,input,select,textarea {
    min-height: 1.5em;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    color: inherit
}

button {
    overflow: visible
}

button,select {
    text-transform: none
}

input {
    line-height: normal
}

button,html input[type=button],input[type=reset],input[type=submit] {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    cursor: pointer;
    background-color: transparent;
    border-style: none
}

button[disabled],html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,input::-moz-focus-inner {
    padding: 0;
    border: 0
}

code,kbd,pre,samp {
    font-family: monospace
}

ol,ul {
    list-style: none
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

table {
    border-spacing: 0;
    border-collapse: collapse
}

fieldset {
    border: 0
}

/* ========================================
 * 基本スタイル
 * ======================================== */

body {
    font-family: "ヒラギノ明朝 Pro","Hiragino Mincho Pro","游明朝体","Yu Mincho","yumincho","MS P明朝","MS PMincho",serif;
    line-height: 1.6;
    color: #000;
    word-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    --base-font: 1.3333vw;
}

@media (min-width: 769px) {
    body {
        --base-font: 10px
    }
}

:where(a) {
    color: #000;
    text-decoration: none
}

:where(a):visited {
    color: #000
}

:where(a):hover {
    color: #000;
    text-decoration: none;
}

:where(a):active {
    color: #000;
    text-decoration: none;
}

:where(a)[href^="tel:"] {
    color: #000;
    text-decoration: none;
    pointer-events: none;
    cursor: text
}

:where(a)[href^="tel:"]:hover,:where(a)[href^="tel:"]:active {
    color: #000
}

/* ========================================
 * ボタンコンポーネント
 * ======================================== */

.c-btn__wrap {
    margin: 0 auto
}

@media (min-width: 769px) {
    .c-btn__wrap {
        display: flex;
        justify-content: center;
        max-width: calc(830 * var(--base-font, 1) / 10)
    }
}

@media (max-width: 768.98px) {
    .c-btn__wrap .c-btn+.c-btn {
        margin-top: calc(30 * var(--base-font, 1) / 10)
    }
}

@media (min-width: 769px) {
    .c-btn__wrap .c-btn+.c-btn {
        margin-left: calc(30 * var(--base-font, 1) / 10)
    }
}

.c-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: calc(10 * var(--base-font, 1) / 10);
    line-height: 1.8;
    color: #fff;
    letter-spacing: .05em;
    background-color: #a29447;
    border-radius: calc(10 * var(--base-font, 1) / 10)
}

@media (max-width: 768.98px) {
    .c-btn {
        max-width: calc(520 * var(--base-font, 1) / 10);
        min-height: calc(90 * var(--base-font, 1) / 10);
        margin-right: auto;
        margin-left: auto;
        font-size: calc(32 * var(--base-font, 1) / 10)
    }
}

@media (min-width: 769px) {
    .c-btn {
        max-width: calc(400 * var(--base-font, 1) / 10);
        min-height: calc(60 * var(--base-font, 1) / 10);
        font-size: calc(18 * var(--base-font, 1) / 10)
    }
}

.c-btn__calendar {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(calc(-100% + -11 * var(--base-font, 1) / 10), -50%)
}

.c-btn__calendar img,.c-btn__calendar svg {
    display: block
}

@media (max-width: 768.98px) {
    .c-btn__calendar img,.c-btn__calendar svg {
        width: calc(28 * var(--base-font, 1) / 10);
        height: calc(28 * var(--base-font, 1) / 10)
    }
}

@media (min-width: 769px) {
    .c-btn__calendar img,.c-btn__calendar svg {
        width: calc(20 * var(--base-font, 1) / 10);
        height: calc(20 * var(--base-font, 1) / 10)
    }
}

.c-btn__plus {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

@media (max-width: 768.98px) {
    .c-btn__plus {
        right: calc(40 * var(--base-font, 1) / 10)
    }
}

@media (min-width: 769px) {
    .c-btn__plus {
        right: calc(35 * var(--base-font, 1) / 10)
    }
}

.c-btn__plus svg {
    display: block
}

@media (max-width: 768.98px) {
    .c-btn__plus svg {
        width: calc(30 * var(--base-font, 1) / 10);
        height: calc(30 * var(--base-font, 1) / 10)
    }
}

@media (min-width: 769px) {
    .c-btn__plus svg {
        width: calc(19 * var(--base-font, 1) / 10);
        height: calc(19 * var(--base-font, 1) / 10)
    }
}

.c-btn__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

@media (max-width: 768.98px) {
    .c-btn__arrow {
        right: calc(40 * var(--base-font, 1) / 10)
    }
}

@media (min-width: 769px) {
    .c-btn__arrow {
        right: calc(34 * var(--base-font, 1) / 10)
    }
}

.c-btn__arrow svg {
    display: block
}

@media (max-width: 768.98px) {
    .c-btn__arrow svg {
        width: calc(30 * var(--base-font, 1) / 10);
        height: calc(16 * var(--base-font, 1) / 10)
    }
}

@media (min-width: 769px) {
    .c-btn__arrow svg {
        width: calc(27 * var(--base-font, 1) / 10);
        height: calc(14 * var(--base-font, 1) / 10)
    }
}

/* ========================================
 * ユーティリティ
 * ======================================== */

.u-relative {
    position: relative
}

.u-hover {
    transition: opacity .3s ease
}

.u-hover:hover {
    opacity: .7
}