/* 予約章。スマホ版、PC版。 */

/* 全数値は元のraw宣言。QA未合格の外部候補。 */

@media(max-width:1023px) {
  .sp-reserve {
    height:550px;
    min-height:550px;
    padding:0 25px 20px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-decoration {
    top:0;
    right:-5px;
    width:131px;
    height:82px!important; /* 理由: 通常宣言の詳細度/順序を打ち消す: .m2-frame img */
  }
}

@media(max-width:1023px) {
  .sp-reserve>.sp-image-note {
    top:70px;
    right:8px;
  }
}

@media(max-width:1023px) {
  .sp-reserve .sp-heading {
    position:absolute;
    top:37px;
    left:15px;
    right:15px;
    padding-top:29px;
    margin:0;
  }
}

@media(max-width:1023px) {
  .sp-reserve .sp-heading>.script {
    left:22%;
    font-size:38px;
  }
}

@media(max-width:1023px) {
  .sp-reserve .sp-heading h2 {
    font-size:25px;
    line-height:1.3;
  }
}

@media(max-width:1023px) {
  .sp-reserve-ribbon {
    position:absolute;
    font-size:12px;
    white-space:nowrap;
    letter-spacing:-.035em;
  }
}

@media(max-width:1023px) {
  .sp-reserve-houses {
    position:absolute;
    top:180px;
    left:4px;
    right:4px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-houses figure {
    position:relative;
    background:url('../assets/deco/watercolor-sky-trees-mobile.webp') center/contain no-repeat;
    padding-top:11px;
    min-width:0;
  }
}

@media(max-width:1023px) {
  .sp-reserve-houses img {
    width:100%;
    height:96px;
    object-fit:contain;
    filter:drop-shadow(3px 5px 4px rgba(34,57,92,.12));
  }
}

@media(max-width:1023px) {
  .sp-reserve-houses figcaption {
    font-size:13px;
    white-space:nowrap;
    text-align:center;
    line-height:1.4;
    background:rgba(235,220,195,.5);
    padding:2px 0;
  }
}

@media(max-width:1023px) {
  .sp-reserve-houses .sp-badge {
    width:32px;
    height:32px;
    top:0;
    left:0;
  }
}

@media(max-width:1023px) {
  .sp-reserve-houses .sp-badge b {
    font-size:18px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-outline {
    position:absolute;
    right:1px;
    top:-10px;
    font-size:40px;
    z-index:0;
  }
}

@media(max-width:1023px) {
  .sp-reserve-buttons {
    position:absolute;
    top:318px;
    left:25px;
    right:25px;
    display:grid;
    gap:8px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-buttons .button {
    width:100%;
    min-width:0;
    min-height:0;
    height:53px;
    padding:8px 12px;
    gap:12px;
    font-size:20px;
    font-weight:900;
    justify-content:flex-start;
    border-radius:8px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-buttons .button>.icon {
    width:24px;
    height:30px;
    flex:0 0 24px;
    padding-right:9px;
    box-sizing:content-box;
    border-right:1px solid currentColor;
  }
}

@media(max-width:1023px) {
  .sp-reserve-buttons .button>b {
    margin-left:auto;
    font:400 26px/1 "Noto Sans JP",sans-serif;
  }
}

@media(max-width:1023px) {
  .sp-reserve-buttons .sp-reserve-phone {
    height:82px;
    gap:14px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-phone>.icon {
    width:32px!important; /* 理由: 通常宣言の詳細度/順序を打ち消す: .m2-reserve-buttons .button>.icon */
    height:42px!important; /* 理由: 通常宣言の詳細度/順序を打ち消す: .m2-reserve-buttons .button>.icon */
    flex-basis:32px!important; /* 理由: 通常宣言の詳細度/順序を打ち消す: .m2-reserve-buttons .button>.icon */
    padding-right:14px!important; /* 理由: 通常宣言の詳細度/順序を打ち消す: .m2-reserve-buttons .button>.icon */
  }
}

@media(max-width:1023px) {
  .sp-reserve-phone-copy {
    display:grid;
    gap:1px;
    text-align:center;
    flex:1;
    min-width:0;
  }
}

@media(max-width:1023px) {
  .sp-reserve-phone-copy>span:first-child {
    font-size:14px;
    line-height:1.2;
  }
}

@media(max-width:1023px) {
  .sp-reserve-phone-copy>strong.sp-num {
    font:400 34px/1 "Playfair Display",serif;
    font-variant-numeric:lining-nums;
    white-space:nowrap;
  }
}

@media(max-width:1023px) {
  .sp-reserve-phone-copy>span:last-child {
    font-size:12px;
    border-top:1px solid rgba(255,255,255,.5);
    padding-top:2px;
    line-height:1.2;
  }
}

@media(max-width:1023px) {
  .sp-reserve-buttons .button--request {
    height:48px;
    font-size:18px;
    background:transparent;
    border-width:2px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-houses .sp-badge span {
    font-size:12px;
  }
}

@media(max-width:374px) {
  .sp-reserve-phone-copy>strong.sp-num {
    font-size:28px;
  }
}

@media(max-width:374px) {
  .sp-reserve-buttons .button {
    font-size:17px;
  }
}

@media(max-width:374px) {
  .sp-reserve-buttons .button--request {
    font-size:16px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-buttons .button>.icon>.deco-generated-icon {
    right:9px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-buttons .sp-reserve-phone>.icon>.deco-generated-icon {
    right:14px;
  }
}

@media(max-width:1023px) {
  .sp-reserve .sp-heading>[data-ornament="english-reservation"] {
    top:-27px;
    --orn-w:150px!important; /* 理由: 元inline切り抜き値より優先する既存装飾寸法 */
    --orn-h:54px!important; /* 理由: 元inline切り抜き値より優先する既存装飾寸法 */
    width:150px;
    height:54px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-ribbon[data-ornament] {
    max-width:calc(100% - 24px);
    left:50%;
    right:auto;
    top:130px;
    transform:translateX(-50%);
    width:330px!important; /* 理由: 同時適用するimportant宣言との元の勝者を維持: [data-ornament-kind="ribbon"] */
    height:40px!important; /* 理由: 同時適用するimportant宣言との元の勝者を維持: [data-ornament-kind="ribbon"] */
    --orn-w:330px;
    --orn-h:40px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-houses > figure:first-child > .sp-badge {
    left:4px;
  }
}

@media(max-width:1023px) {
  .sp-reserve-houses > figure:last-child > .sp-reserve-outline {
    right:4px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-houses {
    position:absolute;
    left:40px;
    right:40px;
    top:30px;
    height:310px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-house {
    height:310px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
}

@media(min-width:1024px) {
  .pc-reserve-house>img {
    width:100%;
    height:280px;
    object-fit:contain;
    object-position:center bottom;
  }
}

@media(min-width:1024px) {
  .pc-reserve-house .pc-badge {
    left:20px;
    top:20px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-house figcaption {
    height:30px;
    padding-top:6px;
    font:700 17px/1.3 "Zen Maru Gothic",sans-serif;
    text-align:center;
  }
}

@media(min-width:1024px) {
  .pc-reserve-heading>.script {
    font-size:60px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-heading h2 {
    font-size:52px;
    letter-spacing:-.025em;
    white-space:nowrap;
  }
}

@media(min-width:1024px) {
  .pc-reserve-ribbon {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    max-width:none;
    font-size:20px;
    font-weight:700;
  }
}

@media(min-width:1024px) {
  .pc-reserve-actions>.button {
    height:140px;
    min-height:140px;
    font:900 30px/1.2 "Zen Maru Gothic",sans-serif;
    gap:20px;
    padding:12px 24px;
    white-space:nowrap;
  }
}

@media(min-width:1024px) {
  .pc-reserve-actions .icon {
    width:44px;
    height:44px;
    flex:0 0 44px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-tel>.icon {
    box-sizing:content-box;
    padding-right:24px;
    border-right:1px solid rgba(255,255,255,.6);
  }
}

@media(min-width:1024px) {
  .pc-reserve-web>.icon {
    box-sizing:content-box;
    padding-right:24px;
    border-right:1px solid rgba(255,255,255,.6);
  }
}

@media(min-width:1024px) {
  .pc-reserve-tel-copy {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    min-width:0;
  }
}

@media(min-width:1024px) {
  .pc-reserve-tel-copy>span:first-child {
    font:700 22px/1.1 "Zen Maru Gothic",sans-serif;
  }
}

@media(min-width:1024px) {
  .pc-reserve-tel-copy strong {
    font:400 52px/1.1 "Playfair Display",serif;
    font-variant-numeric:lining-nums;
    white-space:nowrap;
  }
}

@media(min-width:1024px) {
  .pc-reserve-tel-copy>span:last-child {
    font-size:16px;
    line-height:1.1;
    border-top:1px solid rgba(255,255,255,.6);
    width:100%;
    padding-top:2px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-web>b {
    font-size:36px;
    font-weight:500;
    margin-left:auto;
  }
}

@media(min-width:1024px) {
  .pc-reserve-request .icon {
    width:30px;
    height:30px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-request b {
    font-size:30px;
    margin-left:auto;
    font-weight:500;
  }
}

@media(min-width:1024px) {
  .pc-reserve-prop {
    position:absolute;
    right:35px;
    top:365px;
    width:125px;
    height:115px;
    transform:rotate(6deg);
  }
}

@media(min-width:1024px) {
  .pc-reserve-prop img {
    width:100%;
    height:100%;
    object-fit:contain;
  }
}

@media(min-width:1024px) {
  .pc-reserve-prop span {
    position:absolute;
    right:0;
    bottom:-10px;
    font-size:12px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-leaf--top {
    left:-60px;
    top:0;
    width:220px;
    height:220px!important; /* 理由: 通常宣言の詳細度/順序を打ち消す: .p1-frame img / 同時適用するimportant宣言との元の勝者を維持: .p1-leaves */
  }
}

@media(min-width:1024px) {
  .pc-reserve-leaf--bottom {
    right:-55px;
    bottom:30px;
    width:220px;
    height:220px!important; /* 理由: 通常宣言の詳細度/順序を打ち消す: .p1-frame img / 同時適用するimportant宣言との元の勝者を維持: .p1-leaves */
  }
}

@media(min-width:1024px) and (max-width:1350px) {
  .pc-reserve-heading h2 {
    font-size:46px;
  }
}

@media(min-width:1024px) and (max-width:1350px) {
  .pc-reserve-actions>.button {
    font-size:25px;
    gap:12px;
    padding:12px 18px;
  }
}

@media(min-width:1024px) and (max-width:1350px) {
  .pc-reserve-tel-copy strong {
    font-size:46px;
  }
}

@media(min-width:1024px) and (max-width:1350px) {
  .pc-reserve-actions .icon {
    width:36px;
    height:36px;
    flex-basis:36px;
  }
}

@media(min-width:1024px) and (max-width:1350px) {
  .pc-reserve-tel>.icon {
    padding-right:14px;
  }
}

@media(min-width:1024px) and (max-width:1350px) {
  .pc-reserve-web>.icon {
    padding-right:14px;
  }
}

@media(min-width:1024px) and (max-width:1350px) {
  .pc-reserve-prop {
    right:18px;
    width:105px;
    top:356px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-heading>[data-pc-ornament] {
    left:50%;
    transform:translateX(-50%);
    top:-24px;
    --pc-word-w:260px;
    --pc-word-h:80px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-heading {
    position:absolute;
    left:40px;
    right:40px;
    text-align:center;
    padding-top:60px;
    top:385px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-ribbon[data-pc-ornament] {
    top:524px;
    width:600px;
    height:93px!important; /* 理由: 同時適用するimportant宣言との元の勝者を維持: [data-pc-ornament-kind="ribbon"] */
  }
}

@media(min-width:1024px) {
  .pc-reserve-ribbon .deco-pc-ornament-ink {
    width:100%;
    height:auto;
    aspect-ratio:var(--pc-ink-ratio);
  }
}

@media(min-width:1024px) {
  .pc-reserve-actions {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:1140px;
    max-width:90%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    top:636px;
  }
}

@media(min-width:1024px) {
  .pc-reserve-request {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:430px;
    height:70px;
    font:900 20px/1.2 "Zen Maru Gothic",sans-serif;
    padding:12px 24px;
    gap:24px;
    top:808px;
  }
}

@media(min-width:1024px) {
  .pc-reserve {
    height:908px;
  }
}