/* =======================================
   専用スタイル
   ======================================= */

body.page .site-header {
   display: none;
}

:root {
   --base-font-color: #333333;
   --h-color: #e70010;
   --thema-color: #E70010;

}

html {
   font-size: 2.7vw;
   color: var(--base-font-color);
}

@media (min-width: 768px) {
   html {
      font-size: min(2vw, 12px);
   }
}

h3 {
   font-size: 1.2rem;
}

#main>.threec-logo {
   position: fixed;
   left: 50%;
   top: 1.5rem;
   z-index: 99999;
   transform: translate(-50%, 0);
}

#main>.threec-logo svg {
   width: 9rem;
   aspect-ratio: 160.3 / 28.35;
   height: auto;
}

#main>.threec-logo svg use {
   width: 100%;
   height: auto;
   fill: #fff;
   transition: 0.5s ease-in-out;
}

main .container>section:not(.container-header):not(.slider-banner-section) {
   padding-top: 7rem;
   padding-bottom: 7rem;
}

h2.section-title {
   color: var(--h-color);
   border-bottom: 0;
   padding-bottom: .5em;
   letter-spacing: .08em;
   text-align: center;
   font-size: 3rem;
}

.site-main {
   padding: 0;
}

main .container>* {
   padding-left: 2rem;
   padding-right: 2rem;
}


section {
   margin-bottom: 3rem;
}

.section-body {
   max-width: 1200px;
   margin: 0 auto;
}

section.hero {
   width: 100vw;
   height: 102vh;
   height: calc(100svh + calc(121vw * calc(71.30 / 1921.52)));
   background-image: linear-gradient(180deg, rgba(231, 0, 16, 1) 66%, rgba(151, 3, 12, 1));
}

.hero-overlay {
   height: 100%;
   width: 100%;
   position: relative;
}

.hero-content .logo {
   max-width: 100svh;
   max-height: 100vw;
   width: calc(100vw - 4rem);
   height: 100svh;
   aspect-ratio: 1 / 1;
   margin: 0 auto;
   padding-top: calc(calc(100svh - 100vw) / 2);
}

.hero-content .logo h1 {
   width: 100%;
   height: auto;
}

.hero-content .logo h1 img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

.snowmt {
   position: absolute;
   top: 101svh;
   left: 0;
   width: 100vw;
   height: calc(121vw * calc(71.30 / 1921.52));
   overflow: hidden;
}

.snowmt img {
   position: absolute;
   width: 120vw;
   height: auto;
   left: -10vw;
   bottom: 0;
   max-width: 120vw;
}


.container-header {
   margin: 1.5rem 0;
   /* padding-top: 1.5rem; */
   padding-top: 5rem;
   padding-bottom: 1.5rem;
   position: sticky;
   top: 0;
   background-color: rgba(255, 255, 255, 0.7);
   border-bottom: 2px solid #fff;
   z-index: 999;
}

.container-header .menu ul {
   display: flex;
   list-style: none;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: stretch;
   gap: 0;
   justify-content: center;
}

.container-header .menu ul li {
   border-right: 1px solid #ccc;
   padding: 0rem 1rem;
}

.container-header .menu ul li:first-of-type {
   padding-left: 0;
}

.container-header .menu ul li:last-of-type {
   padding-right: 0;
   border-right: 0;
}


.container-header .menu ul li a {
   font-weight: 600;
   color: var(--base-font-color);
   letter-spacing: .05em;
   font-size: 1.2rem;
   line-height: 1em;
   position: relative;
   display: block;
   height: 100%;
}

.container-header .menu ul li a:has(svg) {
   padding: 0 .7rem;
}

.container-header .menu ul li a svg {
   position: absolute;
   left: 50%;
   top: calc(50% - 0rem);
   transform: translate(-50%, -50%);
   width: 1.7rem;
   height: 1.7rem;
}

.notice-card {
   width: 100%;
   max-width: 800px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 5rem 1fr;
   gap: 2rem;
   align-items: center;
   border-bottom: 1px solid #333;
   padding-bottom: .6rem;
   margin-bottom: 1rem;
   padding-left: 1rem;
   padding-right: 1rem;
}

.notice-card .notice-title {
   line-height: 1.5em;
}

.notice-card .notice-title,
.notice-card .notice-title a {
   color: #333;
}

section.notices:has(.section-body > .empty) {
   display: none;
}


/********************
*  about
*********************/
section.about {
   position: relative;
   padding-block: 3rem;
}

section.about:after {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 0);
   content: "";
   width: 80%;
   max-width: 1000px;
   height: 3px;
   background-color: #e70010;
   border-radius: 100%;
}

.event-about-block .image {
   margin-bottom: 1rem;
}


.event-about-block .attention {
   font-size: 0.8rem;
   border-bottom: 1px solid #333;
   width: fit-content;
   margin: 1rem auto;

}

.event-about-block .attention:before {
   content: "※";
}

section.about .section-title {
   font-size: min(6vw, 3rem);
}

section.about .section-body {
   text-align: center;
}

.event-about-block {
   margin-bottom: 3rem;
}

.event-about-block h3 {
   font-size: min(5vw, 3rem);
   margin-bottom: 1rem;
}

.event-about-block h3 span {
   display: block;
   line-height: 1.2em;
}

.event-about-block p {
   font-size: 1.3rem;
   line-height: 2.2em;
   letter-spacing: .1em;
}

.event-about-block img {
   width: 60%;
}

@media (min-width:768px) {
   .event-about-block h3 span {
      display: inline;
   }

}


/**********************
*  TOPICS
***********************/
.topic-heading {
   border-left: 4px solid var(--thema-color);
}

section.topics {
   background-color: #032842;

}

section.topics h2 {
   color: #fff;
}


.topics-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 3rem;
}

.topic-card {
   margin: 1rem;
   position: relative;
}

.topic-card .date-small {
   position: absolute;
   left: -1rem;
   top: -1rem;
   background-color: #032842;
   border: 1px solid #fff;
   width: 4rem;
   height: 4rem;
   border-radius: 100px;
   color: #fff;
   z-index: 3;
}

.topic-card .date-small:before {
   content: "";
   position: absolute;
   width: 1px;
   height: 65%;
   background-color: #fff;
   left: 39%;
   top: 15%;
   transform: rotate(30deg);
}

.topic-card .date-small .month,
.topic-card .date-small .day {
   position: absolute;
   line-height: 1em;
   transform: translate(-50%, -50%);
}

.topic-card .date-small .month {
   left: 25%;
   top: 35%;
   font-size: 0.9rem;
}

.topic-card .date-small .day {
   left: 65%;
   top: 60%;
   font-size: 1.4rem;
}


@media (min-width: 768px) {
   .topics-grid {
      grid-template-columns: 1fr 1fr;
   }
}

@media (min-width: 1200px) {
   .topics-grid {
      grid-template-columns: 1fr 1fr 1fr;
   }
}

.topic-card .topic-image a {
   display: block;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   border-top-right-radius: 8px;
   width: 100%;
   height: 100%;
   border-top-right-radius: 8px;
   position: relative;
}

.topic-card .topic-image a img {
   width: 100%;
   height: auto;
   position: absolute;
   top: 50%;
   left: 0;
   transform: translate(0, -50%);
}

.topic-card .topic-body {
   padding: 1rem;
}

.topic-card .topic-body .author {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   gap: 1rem;
   margin-bottom: 0.5rem;
}


.topic-card .topic-body .author .author-name {
   font-size: 0.9rem;
   font-weight: 600;
}


.topic-card .topic-body .topic-title a {
   color: var(--base-font-color);
}


/**********************
*  バナースライダー
***********************/
main .container .slider-banner-section {
   width: 100%;
   overflow: hidden;
   padding-left: 0;
   padding-right: 0;
}

.slider-banner-section .slider-banner-swiper {
   padding-bottom: 40px;
}

.slider-banner-section .swiper-button-next,
.slider-banner-section .swiper-button-prev {
   color: #fff;
   transform: translate(0, -20px);
}

.banner-image {
   width: 100%;
   height: auto;
   display: block;
}

/* SP: 1枚表示 */
.swiper-slide {
   width: 100%;
}

.swiper {
   padding-bottom: 40px;
}

.pc-only {
   display: none;
}

.sp-only {
   display: block;
}

/* PC: 中央80%、左右10%ずつ表示 */
@media (min-width: 768px) {
   .slider-banner-swiper .swiper-slide {
      width: 70vw !important;
      max-width: 980px !important;
      pointer-events: none;
   }

   /* 中央のスライドは不透明に */
   .slider-banner-swiper .swiper-slide-active {
      pointer-events: all;
   }

   .pc-only {
      display: block;
   }

   .sp-only {
      display: none;
   }
}

/**********************
*  Xアカウントリスト
***********************/
.x-accounts-grid {
   display: grid;
   grid-template-columns: 1fr;
}

.x-account-card {
   position: relative;
   padding: 1rem;
}

.x-account-card a {
   position: relative;
   color: var(--base-font-color);
}

.card-head {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1rem;
}

.x-account-icon {
   aspect-ratio: 1 / 1;
   width: 7rem;
   height: auto;
   overflow: hidden;
   border-radius: 50%;
}

.x-account-icon img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.x-account-info .x-account-name,
.x-account-info .x-account-id {
   text-align: left;
}

.x-account-info .x-account-name {
   font-size: 1.2rem;
}

.x-account-arrow {
   position: absolute;
   top: 3.5rem;
   right: 0;
   transform: translate(0, -50%);
}

@media (min-width:768px) {
   .x-accounts-grid {
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
   }
}


@media (min-width:1200px) {
   .x-accounts-grid {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 3rem;
   }
}


/**********************
*  youtube動画リスト
***********************/
.theecchannel {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 1rem;
   margin-bottom: 2rem;
}

.theecchannel .channel-img {
   width: 100px;
   max-width: 16vw;
   height: auto;
   aspect-ratio: 1 / 1;
   border-radius: 100%;
   overflow: hidden;
}

.theecchannel .channel-img img {
   width: 100%;
   height: auto;
}

.theecchannel .channel-name {
   font-size: 2rem;
   font-weight: 900;
   letter-spacing: .05em;
}

.youtube-videos-grid {
   display: grid;
   grid-template-columns: 1fr;
}

.youtube-videos-grid .youtube-video-item:nth-child(n+7) {
   display: none;
}

.youtube-video-item {
   position: relative;
   padding-bottom: 2rem;
   margin-bottom: 4rem;
}

.youtube-video-item a {
   display: block;
}

.youtube-video-item a img {
   width: 100%;
   height: auto;
   border-radius: 1rem;
}

.youtube-video-item a h3 {
   color: var(--base-font-color);
   line-height: 1.4em;
   margin-top: .5em;
}

.youtube-video-item .video-date {
   position: absolute;
   bottom: 0;
   right: 0;
   line-height: 1em;
   font-size: 0.9rem;
   letter-spacing: 0.05em;
   color: #999;
   font-weight: 400;
}

@media (min-width:768px) {
   .youtube-videos-grid {
      grid-template-columns: 1fr 1fr;
      gap: 2rem
   }
}

@media (min-width:1200px) {
   .youtube-videos-grid .youtube-video-item:nth-child(n+7) {
      display: block;
   }

   .youtube-videos-grid {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 2rem
   }
}

.transition_youtube {
   text-align: center;
}

.transition_youtube a {
   font-size: 2rem;
   background-color: var(--thema-color);
   color: #fff;
   font-weight: 600;
   padding: .7em 2em;
   border-radius: 1rem;
}


/************************
* 店舗情報
***********************/



section#shopinfo {
   background-color: var(--base-font-color);
}

section#shopinfo .section-title {
   color: #fff;
}

.shops-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
}

.shops-list .shop-item {
   grid-template-columns: min(250px, 50%) 1fr;
   color: var(--base-font-color);
   line-height: 1.3em;
   letter-spacing: .04em;
}

.shop-item a {
   color: var(--base-font-color);
}

.shop-item .shop-thumb {
   border-radius: 1rem;
   overflow: hidden;
   display: grid;
   width: 100%;
   height: fit-content;
}

.shop-item .shop-thumb img {
   width: 100%;
}

.shop-info-content .shop-top {
   display: flex;
   justify-content: space-between;
   margin-bottom: 1.2em;
   align-items: center;
}


.shop-item .shop-name {
   letter-spacing: 0.03em;
}

.shop-info-content .shop-tel {
   margin: 1em 0;
}

.shop-item .shop-hours {
   white-space: normal;
}

.shop-item .btn-map-small {
   background-color: var(--base-font-color);
   padding: .4em .8em;
   color: #fff;
}

.shop-item .shop-actions {
   margin-top: 2em;
}


@media (min-width: 768px) {
   .shops-list {
      grid-template-columns: 1fr 1fr;
   }

   .shops-list .shop-item {
      grid-template-columns: 1fr;
   }
}

@media (min-width: 1200px) {
   .shops-list .shop-item {
      grid-template-columns: min(250px, 50%) 1fr;
   }
}


.backtolist {
   display: none;
}

.footer-content {
   display: none;
}