@charset "utf-8";



/* CSS Document */



:root {

  --content-width: 1120px;

  --side-space: clamp(20px, 5vw, 72px);



  --section-space: clamp(72px, 10vw, 160px);

  --section-space-sm: clamp(48px, 7vw, 96px);



  --font-s: clamp(.8rem, 5vw, 15px);



  --gap-lg: clamp(32px, 6vw, 80px);

  --gap-md: clamp(20px, 4vw, 48px);

  --gap-sm: clamp(12px, 2vw, 24px);

  --main-color: #3F3593;

  --sub-color: #0008ff;

  --round: clamp(.4rem, 0.2vw, .6rem);



  --fz-body: clamp(14px, 1.2vw, 16px);

  --fz-lead: clamp(16px, 1.5vw, 20px);

  --fz-title-xs: clamp(.8rem, 1vw, 1rem);

  --fz-title-sm: clamp(22px, 3vw, 36px);

  --fz-title-md: clamp(28px, 4vw, 50px);

  --fz-title-lg: clamp(40px, 7vw, 96px);

  --fz-title-xl: clamp(3.2rem, 10vw, 6rem);

}





body {

font-family: "Noto Sans JP", sans-serif;

background: #FFEB9A;

color:  var(--main-color);

}



#header {

background: none;

box-shadow: none;

}



footer {

margin-top: 0;

background: #ffd424;

color:var(--main-color);

margin-top:clamp(4rem, 16vw, 8rem);

}





* {

box-sizing: border-box;

line-height: 1;

}





a {

text-decoration: none;

color:var(--main-color);

}



a:link,

a:visited {

color:var(--main-color);

}



a:hover {

  opacity:.7;

  transition: .3s;

}









.dispPC {

display: block;

}



.dispSP {

display: none;

}





@media (max-width: 767.98px) {



.dispPC {

	display: none;

}



.dispSP {

	display: block;

}



}







/* ロゴマーキー */

.logo-marquee {

  overflow: hidden;

  width: 100%;

  margin-top: clamp(3.2rem, 5vw, 8rem)

}



.logo-marquee__track {

  display: flex;

  width: max-content;

  animation: image-marquee 30s linear infinite;

}



.logo-marquee__track img {

  width: clamp(100px, 25vw, 180px);

  aspect-ratio: 3 / 2;

  object-fit: cover;

  flex-shrink: 0;

  margin-right:var(--gap-sm);

  border-radius: var(--round);

  border:1px solid var(--main-color);

}



@keyframes image-marquee {

  from {

    transform: translateX(0);

  }

  to {

    transform: translateX(-50%);

  }

}







/* Vue表示前のチラつき防止 */

[v-cloak] {

  display: none;

}



/* 画面切り替えアニメーション */

.page-enter-active,

.page-leave-active {

  transition:

    opacity .55s ease,

    transform .55s ease;

}



.page-enter-from {

  opacity: 0;

  transform: translateY(30px);

}



.page-leave-to {

  opacity: 0;

  transform: translateY(-30px);

}



.page-wrap {

  min-height: 500px;

}



.brand-page {

  width: 100%;

  width: min(var(--content-width), calc(100% - var(--side-space) * 2));

  margin-inline: auto;

}



.brand-page__back {

  display: inline-block;

  margin-bottom: 40px;

  font-family: "Montserrat", sans-serif;

  font-size: 13px;

  letter-spacing: .08em;

  cursor: pointer;

  font-weight: 900;

}





.brand-page__head {

  margin-bottom:  var(--gap-sm);;

}



.brand-page__title {

	font-weight: 800;

  font-family: "Montserrat", sans-serif;

  font-size: var(--fz-title-lg);

  color:  var(--main-color);

  line-height: 1;

  margin-bottom: 32px;

  letter-spacing: -0.025rem;

}



.brand-page__title span {

  display: block;

  font-size: clamp(.25em, 1vw, .8rem);

  margin-bottom: clamp(.25em, 1vw, .8rem);

}



.brand-page__lead {

  line-height: 2;

  font-size:var(--font-s);

}



.event-card {

  display: block;

  cursor: pointer;

}



.event-card img {

  width: 100%;

  height: auto;

  display: block;

  border-radius: var(--round);

  border: 1px solid var(--main-color);

}



/* 画像の縦横比を維持 */

.event-splide .splide__slide {

  aspect-ratio: 3 / 4;

  overflow: hidden;

}



.event-splide .splide__slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}





.container {

  width: 100%;

}









/* ブランドごとの画面内 */







/* 商品リスト */



h3.brand-page__catname {

  padding-top:4rem;

  margin-top:  var(--gap-lg);

  margin-bottom:  var(--gap-sm);

  border-top:1px solid var(--main-color);

  font-weight: 700;

  font-family: "Montserrat", sans-serif;

  font-size: var(--fz-title-md);

  color: var(--main-color);

}



h3.brand-page__catname span {

  display: block;

  font-size: clamp(.25em, 1.5vw, 1rem);

  margin-bottom:.4rem;

}





.brand-page__catname + p {

  line-height: 1.6;

  font-size:var(--font-s);

}





.itemList {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  margin-top:2.4rem;

  grid-row-gap:  var(--gap-sm);

  grid-column-gap:  var(--gap-sm);

}



@media (max-width:  767.98px) {





.itemList {

  grid-template-columns:1fr 1fr;

}



}





.item__meta {

  margin-top:.4rem;

}



.item__thumbs img {

  border-radius: var(--round);

  border:1px solid var(--main-color);

}





.item__meta .brand {

  display: block;

  font-family: "Montserrat", sans-serif;

  font-size: var(--font-s);

  font-weight:700;

  color: var(--main-color);

  margin-bottom: .4rem;

}



.name {

  font-weight: 600;

  font-family: "Montserrat", sans-serif;

  font-size: .8rem;

  color: var(--main-color);

}







.item__inner {

  /*width:80%;*/

  margin-inline: auto;

}





.intro {

  width: 100%;

  width: min(var(--content-width), calc(100% - var(--side-space) * 2));

  margin-inline: auto;

}





.intro h1 {

  text-align: center;

  font-family: "Montserrat", sans-serif;

  font-size: var(--fz-title-xl);

  font-weight: 900;

  line-height: 1;

  margin-top: clamp(3.2rem, 12vw, 4rem);

}



.intro p {

  margin-top: clamp(2.4rem, 4vw, 4rem);

  font-family: "Noto Sans JP", sans-serif;

  font-size: var(--fz-lead);

  font-weight: 600;

  line-height: 2;



}







/* splide全体を基準にする */



.splide {

	position: relative;

}



.brand-page__back svg,

.splide__arrow svg {

	height: .6rem;

	width: .6rem;

	fill:  var(--main-color);

}



.brand-page__back,

.splide__arrow {

	border: 1px solid var(--main-color);

	background: none;

	width: 4rem;

	height: 4rem;

}



.brand-page__back {

  border-radius: 50%;

}





.brand-page__back svg {

  transform: rotate(180deg);

}





.brand-page__back.--second {

  margin-top:4rem;

}







.btn a {

  display:inline-block;

  max-width:90%;

  width:360px;

  border:1px solid var(--main-color);

  color: var(--main-color);

  padding:1.2rem 2.4rem 1.2rem 1.6rem;

  border-radius: 10rem;

  font-size: .8rem;

  margin-top: var(--gap-md);

}





.btn a:before {

  content:"●";

  margin-right:.8rem;

  font-size:.6rem;

}