@charset "UTF-8";
/* ヘッダー */
.header {
  background-color: #C00C4B; }

/* 生地・アパレルアイテム 共通パーツ */
.content {
  padding: 8rem 0;
  position: relative;
  /* 拡大表示された画像 */
  /* ４枚のサムネ画像 */ }
  .content--material {
    z-index: 5; }
  .content--apparel {
    background-color: #F2EBD9;
    z-index: 4; }
  .content__titleBox {
    width: 100%;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .content__titleBox--material:before, .content__titleBox--material:after {
      content: "";
      background: linear-gradient(to right, #c00c4b, #c00c4b 56%, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0) 100%) 0% 0%;
      background-size: 16px 4px;
      width: calc(50% - 70px);
      height: 4px; }
    .content__titleBox--apparel:before, .content__titleBox--apparel:after {
      content: "";
      background: linear-gradient(to right, #c00c4b, #c00c4b 56%, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0) 100%) 0% 0%;
      background-size: 16px 4px;
      width: calc(50% - 150px);
      height: 4px; }
  .content__title {
    font-size: 3.2rem;
    color: #C00C4B;
    text-align: center;
    line-height: 1;
    font-family: 'Kiwi Maru', serif; }
    .content__title--material {
      width: 75px; }
    .content__title__apparel {
      width: 300px; }
  .content__itemWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
  .content__item {
    width: 47%;
    margin-bottom: 60px; }
    .content__item:nth-of-type(3) {
      margin-bottom: 0; }
    .content__item:nth-of-type(4) {
      margin-bottom: 0; }
  .content__mainBox {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 15px;
    overflow: hidden;
    filter: blur(1px); }
    .content__mainBox--active {
      filter: blur(0);
      transition: 0.6s; }
  .content__thumbnailFlex {
    display: flex;
    justify-content: space-between; }
  .content__thumbnailBox {
    width: 23.5%;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: black; }
  .content__thumbnailImg1, .content__thumbnailImg2, .content__thumbnailImg3, .content__thumbnailImg4, .content__thumbnailImg5, .content__thumbnailImg6, .content__thumbnailImg7, .content__thumbnailImg8 {
    cursor: pointer;
    transition: opacity 0.5s;
    opacity: 1;
    /* 選択画像を暗くする */ }
    .content__thumbnailImg1:hover, .content__thumbnailImg2:hover, .content__thumbnailImg3:hover, .content__thumbnailImg4:hover, .content__thumbnailImg5:hover, .content__thumbnailImg6:hover, .content__thumbnailImg7:hover, .content__thumbnailImg8:hover {
      opacity: 0.8; }
    .content__thumbnailImg1--active, .content__thumbnailImg2--active, .content__thumbnailImg3--active, .content__thumbnailImg4--active, .content__thumbnailImg5--active, .content__thumbnailImg6--active, .content__thumbnailImg7--active, .content__thumbnailImg8--active {
      opacity: 0.5 !important; }
  .content__itemTitle {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 10px;
    color: #C00C4B; }

/* 磐田市公認！しっぺいグッズ */
.goods {
  padding: 8rem 0;
  background-color: #D73024;
  position: relative;
  z-index: 3;
  padding-top: 100px;
  margin-top: -20px; }
  .goods__title {
    color: #FFFFFF;
    font-size: 4rem;
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
    font-family: 'Kiwi Maru', sans-serif; }
  .goods__wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 8; }
  .goods__sippei {
    width: 220px;
    position: absolute;
    right: 0;
    top: -140px;
    z-index: 1; }
  .goods__content {
    max-width: 545px;
    width: 48%;
    height: auto;
    margin-bottom: 50px;
    position: relative;
    z-index: 10; }
    .goods__content:nth-of-type(4), .goods__content:nth-of-type(5) {
      margin-bottom: 0; }
  .goods__contentTop {
    border-radius: 17px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 3px solid #FFFFFF; }
  .goods__contentTitle {
    text-align: center;
    color: #FFFFFF;
    font-size: 2.4rem;
    line-height: 1; }

@media (max-width: 1150px) {
  /* 磐田市公認！しっぺいグッズ */
  .goods__title {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    margin-bottom: 35px; }
  .goods__sippei {
    width: 400px;
    top: -260px;
    right: -230px; }
  .goods__content {
    margin-bottom: 45px; }
  .goods__contentTop {
    margin-bottom: 15px; } }
@media (max-width: 750px) {
  /* ヘッダー */
  .header {
    height: 45px; }

  .headerNav {
    display: none; }

  /* 生地・アパレルアイテム一覧 */
  .content {
    padding: 4rem 0; }
    .content__titleBox--material:before, .content__titleBox--material:after {
      width: calc(50% - 50px); }
    .content__titleBox--apparel:before, .content__titleBox--apparel:after {
      width: calc(50% - 120px); }
    .content__title {
      font-size: 2.5rem; }
    .content__itemWrapper {
      flex-direction: column; }
    .content__item {
      width: 100%; }
      .content__item:nth-of-type(3) {
        margin-bottom: 60px; }
    .content__itemTitle {
      font-size: 2rem; }

  /* 磐田市公認！しっぺいグッズ */
  .goods__title {
    font-size: 3.2rem; }
  .goods__sippei {
    position: static;
    width: 307px;
    margin: 0 auto;
    margin-bottom: 45px; }
  .goods__content {
    width: 100%; }
    .goods__content:nth-of-type(4) {
      margin-bottom: 45px; }
    .goods__content:nth-of-type(5) {
      margin-bottom: 0; }
  .goods__contentTitle {
    font-size: 2rem; } }