@charset "UTF-8";
/* ベーススタイル  ------------------------- */
@import url("https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@100;400;700;800&display=swap");
*,
*::before,
*::after {
 margin:0;
 padding:0;
 box-sizing:border-box;
}

html:focus-within {
 scroll-behavior:smooth;
}

body {
 min-height:100vh;
 line-height:1.5;

 text-rendering:optimizeSpeed;
}

img,
picture,
video,
canvas,
svg {
 display:block;
 width:100%;
 max-width:100%;
 height:auto;
}

input,
button,
textarea,
select {
 font:inherit;
}

ul,
ol {
 list-style:none;
}

a {
 color:inherit;
 text-decoration:none;
}

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

fieldset,
legend {
 margin:0;
 padding:0;
 border:0;
}

button {
 padding:0;
 border:none;
 background:none;
 cursor:pointer;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
 width:8px;
 height:8px;
}

::-webkit-scrollbar-track {
 background:#f1f1f1;
}

::-webkit-scrollbar-thumb {
 border-radius:4px;
 background:#c1c1c1;
}

::-webkit-scrollbar-thumb:hover {
 background:#a8a8a8;
}

@media screen and (max-width: 1420px) {
 [id^="a_"] {
  scroll-margin-top:54px;
 }
}
main {
 flex:1;
 position:relative;
 width:100%;
 max-width:1100px;
 margin:0 auto;
 margin-top:64px;
 padding:0;
 background-color:white;
}

@media screen and (max-width: 428px) {
 main {
  min-height:calc(100vh - 48px - 56px);
  margin-top:48px;
  padding:0;
  padding-bottom:56px;
 }
}
@media screen and (max-width: 375px) {
 main {
  min-height:calc(100vh - 48px - 52px);
  padding-bottom:52px;
 }
}
/* ==================================================
top-btn
================================================== */
.c_pagetop {
 display:block;
 position:fixed;
 right:.5vw;
 bottom:.5vw;
 z-index:90;
 width:60px;
 height:60px;
 padding-top:27px;
 border-radius:40px;
 box-sizing:border-box;
 background-color:#b1b1b1;
 color:#ffffff;
 font-weight:bold;
 font-size:16px;
 line-height:22px;
 text-decoration:none !important;
 text-align:center;

 pointer-events:auto;
}

@media screen and (max-width: 750px) {
 .c_pagetop {
  bottom:82px;
 }
}

.c_pagetop:before {
 position:absolute;
 top:10px;
 left:0;
 width:100%;
 font-size:16px;
 text-align:center;
 content:"▲";
}

.c_pagetop:hover {
 opacity:.5;
 transition:.5s;
}

/* ==================================================
lity 設定
================================================== */
.lity {
 background-color:rgba(255, 255, 255, .5607843137) !important;
}

.lity-content {
 padding:2% 4%;
 background-color:#ffffff;
}

.lity-image img {
 height:80vh;
 max-height:100%;

 -o-object-fit:contain;
    object-fit:contain;
}

@media (max-width: 769px) {
 .lity-image img {
  height:auto;
 }
}
.lity {
 -webkit-backdrop-filter:blur(3px);
         backdrop-filter:blur(3px);
}

[data-lity] {
 cursor:pointer;
}

[data-lity]:hover {
 opacity:.5;
 transition:.3s;
}

html:has(.lity-opened) {
 overflow:hidden;
 background-color:#3b3b3b;

 scrollbar-gutter:stable;
}

html {
 scroll-behavior:smooth;
}

/* ベーススタイル ここまで ------------------------- */
/* メインコンテンツ ------------------------- */
/* メインコンテンツ ここまで------------------------- */
/* snsリンク -------------------------*/
/* SNS Styles */
/* SNSアイコンを追加、もしくはサイズ変更時にここを調整 */
.sns {
 position:absolute;
 top:0;
 right:calc(-1 * (var(--sns-icon-width) + var(--sns-left-space)));
 height:100%;

 --sns-icon-width:48px;
 --sns-left-space:8px;
 --sns-button-group-height:96px;
 --sns-button-group-bottom-space:16px;
}

.sns.hide {
 transform:translateY(100%);
}

.sns__button-group {
 position:sticky;
 top:calc(100svh - var(--sns-button-group-height) - var(--sns-button-group-bottom-space));
}

.sns__icons {
 display:flex;
 flex-direction:column;
}

.sns__image-wrapper {
 width:48px;
 cursor:pointer;
}

.sns__image-logo {
 display:none;
}

/* SNSボタン表示切替 */
/* コンテンツ幅を変えたらmax-widthを調整 */
@media screen and (max-width: 1250px) {
 .sns {
  position:fixed;
  top:unset;
  right:0;
  bottom:0;
  width:100%;
  height:auto;
  padding:1rem 1.5rem 1.5rem;
  background-color:#ffffff;
  transition:transform .2s ease;
 }
 .sns .sns__button-group {
  display:flex;
  justify-content:space-between;
 }
 .sns .sns__image-logo {
  display:block;
  width:128px;
 }
 .sns .sns__icons {
  display:flex;
  flex-direction:row;
  align-items:center;

  gap:.5rem;
 }
 .sns .sns__image-wrapper {
  width:36px;
 }
}
/* SNSリンク ここまで------------------------- */
/**** lity ****/
.lity-content {
 padding:4% 3%;
 background-color:#ffffff;
}

.lity-image img {
 height:80vh;
 max-height:100%;

 -o-object-fit:contain;
    object-fit:contain;
}

@media (max-width: 769px) {
 .lity-image img {
  height:auto;
 }
}
.lity {
 background:rgba(0, 0, 0, .7098039216);

 -webkit-backdrop-filter:blur(3px);
         backdrop-filter:blur(3px);
}

[data-lity] {
 cursor:pointer;
}

[data-lity]:hover {
 opacity:.5;
 transition:.3s;
}

/* --- lightbox ------------------------------ */
.lightboxOverlay {
 background-color:rgba(0, 0, 0, .7098039216);

 -webkit-backdrop-filter:blur(3px);
         backdrop-filter:blur(3px);
}

/* --- スクロールロック ---------------------- */
html:has(.lity-opened) {
 overflow:hidden;
 background-color:#000000;

 scrollbar-gutter:stable;
}

/* ///// variable ///////////////////////////////// */
:root {
 --font-base:"LINE Seed JP", sans-serif;
 --text-base:#40210f;
 --bg:#ffffff;
 --bg-main:#ffffff;
 --bg-cont:#ffffff;
 --bg-main-content-footer:#38b0a7;
 --c-01:#60bccb;
 --c-01-con:#ffffff;
 --c-02:#fff100;
 --c-02-con:#ffffff;
}

/* ///// layout /////////////////////////////////  ****/
:root {
 --bg-01:#ffffff;
 --bg-02:#ebebeb;
}

body {
 width:100%;
 width:100%;
 background-image:url(../images/bg.webp);
 background-size:cover;
 background-color:var(--bg);
}

/* body::before {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url(../images/bg.webp);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
} */

main {
 background-color:var(--bg-main);
}

main :where(*) {
 color:var(--text-base);
 font-weight:700;
 font-size:clamp(14px, 1.8vw, 24px);
 line-height:1.6;
 font-family:var(--font-base);
 letter-spacing:.05rem;
}

main {
 position:relative;
 width:min(100%, 800px);
}

.t-content {
 display:flex;
 flex-direction:column;
 align-items:center;

 padding-block:1.88rem;
 gap:2rem;
}
.t-content-2 {
 display:flex;
 flex-direction:column;
 align-items:center;

 padding-block:1rem;
}

@media (min-width: 769px) {
 .t-content {
  padding-block:1rem;
 }
}
.t-content-gap-ver01 {
 gap:clamp(30px, 3.9vw, 40px);
}

a {
 cursor:pointer;
}

a:hover {
 opacity:.5;
 transition:.3s;
}

/* ==================================================
heading
================================================== */
.t-heading-01 {
 background-color:var(--head-bg-01);
 color:var(--head-text-01);
 font-weight:600;
 font-size:clamp(18px, 2.3vw, 32px);
 line-height:1.4;
 font-family:var(--font-base);
 letter-spacing:.2rem;
 text-align:center;

 padding-inline:2rem;
 padding-block:.63rem;
}

/* ==================================================
pic
================================================== */
.t-pic-middle {
 width:40%;
}

@media (min-width: 769px) {
 .t-pic-middle {
  width:50%;
 }
}
.btn-special-goods-goshuin {
 display:inline-block;
 width:60%;
}

@media (min-width: 769px) {
 .btn-special-goods-goshuin {
  width:50%;
 }
}
/* ==================================================
parts
================================================== */

.t-pickup__text {
 color:#ea5514;
}

/* --- attention ---------------------- */
.t-attention-wrapper {
 margin-top:1rem;
}

.t-attention-wrapper--noMargin {
 margin-top:0;
}

.t-attention {
 display:flex;
 flex-direction:column;
 align-items:center;
 margin:0 auto;

 gap:.4em 0;
}

.t-attention__text {
 margin-top:.1em;
 margin-left:1em;
 font-weight:500;
 font-size:clamp(10px, 1vw, 14px);
 line-height:1.2;
 text-align:center;
 text-indent:-1em;
 word-break:break-all;
}

.t-attention__text::before {
 content:"※";
}

.t-attention__text--dot::before {
 content:"・";
}

.t-attention__text--center {
 text-align:center;
}

/* ==================================================
固有部分
================================================== */
.container {
 display:flex;
 flex-direction:column;
 align-items:center;
 width:89.7%;
}
@media (min-width: 769px) {
 .container {
  width:83.3%;
 }
}

.container-gap-ver01 {
 gap:clamp(30px, 5.2vw, 40px);
}

.container-gap-ver02 {
 gap:clamp(18px, 2.3vw, 24px);
}

.container__caption {
 width:100%;
 max-width:clamp(285px, 37.1vw, 460px);
 font-size:clamp(12px, 1.6vw, 16px);
 text-align:center;

 padding-block:clamp(6px, .8vw, 10px);
 padding-inline:clamp(6px, 1.3vw, 16px);
}

.container__caption--border {
 border:solid 1px #ec7aa1;
}

.card-wrapper {
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 width:100%;
}

.card-wrapper--ver01 {
 gap:clamp(10px, 2.6vw, 50px);
}

.card-wrapper--ver02 {
 gap:clamp(8px, 1vw, 14px);
}

.card {
 display:flex;
 flex-direction:column;
 align-items:center;
 position:relative;
 z-index:0;

 gap:clamp(10px, 1.6vw, 12px);
}
.card::before {
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 z-index:1;
 background-image:linear-gradient(135deg, #c52155 0 4rem, transparent 1rem);
 content:"";

 pointer-events:none;
}
.card::after {
 position:absolute;
 top:.7rem;
 left:8px;
 z-index:3;
 color:white;
 font-size:1.2rem;
 text-align:center;
 text-transform:uppercase;
 content:"一等";

 pointer-events:none;
}
.card img {
 position:relative;
}
.card0::before {
 background-image:none;
}
.card0::after {
 position:none;
 content:"";
 content:"";
}
.card2::after {
 content:"二等";
}
.card3::after {
 content:"三等";
}
.card4::after {
 content:"四等";
}
.card5::after {
 content:"五等";
}

.card-no1 {
 width:100%;
}
.card--border-color01 {
 border:solid 1px #40210f;
}
.card--back-color {
 background-color:#d3d3d3;
}
.card--border-color02 {
 border:solid 1px #40210f;
}

.card--half {
 width:48%;

 padding-block:1rem;
}
.card--half-2 {
 display:flex;
 width:82%;

 padding-block:1rem;
}
.flex-inner {
 display:flex;
 align-items:center;
}
s .card__title {
 font-size:clamp(14px, 1.8vw, 18px);
 line-height:1.4;
 text-align:center;
}

.card__title--border-bottom {
 display:flex;
 flex-direction:column;
 width:90%;

 gap:.6rem;
}

.card__title--border-bottom::after {
 border-bottom:solid 1px rgba(64, 33, 15, .4745098039);
 content:"";
}

.card__price {
 color:#c52155;
 font-size:clamp(14px, 1.8vw, 18px);
 line-height:1;
 line-height:130%;
 text-align:center;
}
.card__price-no1 {
 padding-bottom:1rem;
 font-size:clamp(18px, 1.8vw, 24px);
}
.card__price-2 {
 color:#40210f;
}

.card__caption {
 font-size:.75rem;
 line-height:1.4;
 text-align:center;
 white-space:nowrap;

 padding-block:clamp(6px, .8vw, 10px);
 padding-inline:clamp(6px, 1.3vw, 16px);
}

.card__caption--color01 {
 background-color:#ec7aa1;
 color:#ffffff;
}

.card__caption--color02 {
 background-color:#4bbcc4;
 color:#ffffff;
}

.caption-wrapper {
 display:flex;
 flex-direction:column;
 align-items:center;

 gap:clamp(4px, .5vw, 8px);
}

.caption {
 font-size:clamp(14px, 1.8vw, 24px);
 text-align:center;
}

.u-pic-card {
 width:clamp(120px, 20vw, 300px);
}

.u-pic-tokuten {
 width:70%;
}
.u-noitem-card {
 width:clamp(60px, 20vw, 190px);
}

/* ==================================================
nav
================================================== */
:root {
 --nav-bg:#f6edde;
 --nav-bgArea:#ffffff67;
 --nav-color:#40210f;
 --nav-line:#40210f;
}

/* --- 位置調整 ---------------------- */
[id^="n-"] {
 scroll-margin:calc(40px + var(--js-header-height));
}
@media (min-width: 769px) {
 [id^="n-"] {
  scroll-margin:calc(50px + var(--js-header-height));
 }
}

@media (max-width: 768px) {
 .main-image {
  padding-top:40px;
  transition:.3s;
 }
}
/* --- ナビエリア ---------------------- */
.nav-main {
 position:sticky;
 top:0;
 z-index:102;
 width:100%;
}

@media (min-width: 768px) {
 .nav-main {
  position:sticky;
  top:var(--js-header-height);
  max-width:1300px;
  margin:0 auto;
 }
}
@media (max-width: 768px) {
 .nav-main {
  position:absolute;
  left:0;
  height:100%;

  pointer-events:none;
 }
}
@media (max-width: 769px) {
 .nav-main__content--decoration {
  border-radius:0;
 }
 .nav-main__content--decoration::before,
 .nav-main__content--decoration::after {
  display:none;
 }
}

/* --- ナビコンテンツ枠 ---------------------- */
.nav-main__content {
 display:flex;
 background-color:var(--nav-bg);
}

@media (min-width: 768px) {
 .nav-main__content {
  flex-direction:row;
  justify-content:center;
  align-items:center;
  width:100%;

  padding-block:.75rem;
 }
}
@media (max-width: 768px) {
 .nav-main__content {
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;
  right:-100%;
  z-index:1;
  width:80%;
  height:100%;
  padding-top:20%;
  transition:.5s;

  gap:5%;
  pointer-events:auto;
 }
}
@media (max-width: 768px) {
 .nav-main:has(#nav-main-sp-trigger:checked) .nav-main__content {
  right:0;
 }
}
/* --- ナビコンテンツ ---------------------- */
.nav-main__menuList {
 display:flex;
 justify-content:center;
 align-items:center;
 width:100%;
}

@media (min-width: 768px) {
 .nav-main__menuList {
  flex-direction:row;

  gap:1rem;
 }
}
@media (max-width: 768px) {
 .nav-main__menuList {
  flex-direction:column;

  gap:2.5rem;
 }
}
a.nav-main__menuItem {
 color:var(--nav-color);
 font-weight:600;
 font-size:clamp(18px, 2.6vw, 24px);
 line-height:1;
 font-family:var(--font-base);
 letter-spacing:.1rem;
 text-decoration:none;
 white-space:nowrap;
}

@media (min-width: 768px) {
 a.nav-main__menuItem:not(:first-child) {
  padding-left:1rem;
  border-left:solid 2px var(--nav-line);
  line-height:1;
 }
}
@media (max-width: 768px) {
 a.nav-main__menuItem {
  text-align:center;
  white-space:break-spaces;
 }
}
a.nav-main__menuItem:hover {
 opacity:.5;
 transition:.3s;
}

a.nav-main__menuItem img {
 width:auto;
 height:1.69rem;
}

/* --- ナビ-SP ---------------------- */
@media (max-width: 768px) {
 .nav-main__contentSpOnly {
  display:contents;
 }
 .nav-main__spHeadArea {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  position:sticky;
  top:var(--js-header-height);
  width:100%;
  height:42px;
  padding:0 10px;
  border-bottom:solid 1px var(--text01-con);
  background-color:var(--nav-bg);
  transition:.5s;

  pointer-events:auto;
 }
 html:has(#nav-main-sp-trigger:checked) {
  overflow:hidden;
  background-color:#000000;

  scrollbar-gutter:stable;
 }
 html:has(#nav-main-sp-trigger:checked) .header {
  z-index:1;
 }
 .nav-main:has(#nav-main-sp-trigger:checked) .nav-main__spHeadArea {
  position:relative;
 }
 /* ハンバーガーマーク */
 .nav-main__menuBtn {
  display:block;
  position:relative;
  z-index:2;
  margin-left:auto;

  pointer-events:auto;
 }
 .nav-main__menuBtn,
 .nav-main__menuBtn::before,
 .nav-main__menuBtn::after {
  width:25px;
  height:3px;
  border-radius:3px;
  background-color:var(--nav-color);
  transition:.3s;
 }
 .nav-main__menuBtn::before {
  position:absolute;
  top:-7px;
  content:"";
 }
 .nav-main__menuBtn::after {
  position:absolute;
  top:7px;
  content:"";
 }
 .nav-main:has(#nav-main-sp-trigger:checked) .nav-main__menuBtn {
  opacity:1;
  position:fixed;
  top:25px;
  right:10px;
  background-color:initial;
 }
 .nav-main:has(#nav-main-sp-trigger:checked) .nav-main__menuBtn::before {
  top:0;
  right:0;
  transform:rotate(45deg);
 }
 .nav-main:has(#nav-main-sp-trigger:checked) .nav-main__menuBtn::after {
  top:0;
  right:0;
  transform:rotate(-45deg);
 }
 /* 閉じるエリア */
 .nav-main:has(#nav-main-sp-trigger:checked) .nav-main-sp_bgArea {
  opacity:1;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:var(--nav-bgArea);
  transition:.5s;

  pointer-events:auto;
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px);
 }
}
/* チェックボックス非表示 */
#nav-main-sp-trigger {
 display:none;
}

/* ==================================================
responsive
================================================== */
.sp {
 display:none;
}

.pc {
 display:block;
}

.br_pc {
 display:block;
}

@media (max-width: 769px) {
 .sp {
  display:block;
 }
 .pc {
  display:none;
 }
 .br {
  display:block;
 }
 .br_pc {
  display:none;
 }
}
.outnumber {
 width:98%;
 padding:8px;
 border:solid 1px #000000;
 background-color:#f3983c;
 color:#ffffff;
 text-align:center;
}

@media (max-width: 769px) {
 .card::before {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-image:linear-gradient(135deg, #c52155 0 2.5rem, transparent 1rem);
  content:"";
 }
 .card::after {
  position:absolute;
  top:.5rem;
  left:3px;
  color:white;
  font-size:.8rem;
  text-align:center;
  text-transform:uppercase;
  content:"一等";
 }
 .card2::after {
  content:"二等";
 }
 .card3::after {
  content:"三等";
 }
 .card4::after {
  content:"四等";
 }
 .card5::after {
  content:"五等";
 }
}