@charset "UTF-8";
/* CSS Document */
.ttlArea .inner h1 {
	padding-top: 50px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #fff;
    font-size: min(9vw, 32px);
	text-align: center;
}
main {
	padding-top: 135px;
}

/*==================================================
アコーディオンのためのcss
===================================*/

/*アコーディオンタイトル*/
.clickBtn {
	position: relative;/*+マークの位置基準とするためrelative指定*/
	cursor: pointer;
	font-size: 1rem;
	font-weight: normal;
	padding: 3% 30px .5% .5%;
	transition: all 1s ease;
}

/*アイコンの＋と×*/
.clickBtn::before,
.clickBtn::after{
	position: absolute;
	content:'';
	width: 15px;
	height: 2px;
	background-color: #FFF;
}
.clickBtn::before{
	top: 48%;
	right: 15px;
	transform: rotate(0deg);
}
.clickBtn::after{
	top: 48%;
	right: 15px;
	transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
.clickBtn.close::before{
	transform: rotate(45deg);
}

.clickBtn.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.openBox {
	display: none;/*はじめは非表示*/
	margin:0 .5% 3% .5%;
	padding: .5%;
}

/* pickupArea */
.pickupArea {
  padding-bottom: 120px;
  text-align: center;

  h2 {
    font-size: 42px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .splide {
    padding-top: 40px;

    .splide__track ul li {
      overflow: hidden;

      a {
        display: block;
        width: 100%;
        aspect-ratio: 600 / 300;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
          display: block;
        }

        &:hover {
          opacity: 0.7;

          img {
            transform: scale(1.1);
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
/* pickupArea */
	.pickupArea {
		padding-bottom: 80px;
			h2 {
				font-size: clamp(1.625rem, 0.86rem + 3.82vw, 3.25rem);
			}
			.splide {
				padding-top: 30px;
		}
	}
}

@media screen and (max-width: 768px) {
	main {
		padding-top: 70px;
	}
}
@media screen and (max-width: 600px) {
	.pickupArea {
		padding-top: 30px;
		padding-bottom: 60px;
		.splide {
			padding-top: 20px;
		}
	}
}