/* ****************************************************

		 　共 通 設 定

***************************************************** */
/* キャンペーン・症例紹介のシングルページ
-------------------------------------------------*/
body.single-campaign, body.single-case, body.single-worries {
  & .main-container {
    padding: 40px 17px;
    display: grid;
    row-gap: 40px;
	  background: #f2ebe7;
    & .lt-content {
      width: 100%;
      padding: 20px 17px;
      & img {
        margin: 40px auto 0;
        display: block;
      }
    }
  }
}

/* 右側に ▶ のリンク
-------------------------------------------------*/
a.triangle-right {
  font-family: "Shippori Mincho", serif;
  color: #2d2e54;
  display: block;
  position: relative;
  &::after {
    content: '';
    width: 0;
    height: 0;
    margin: auto;
    border-top: 6px solid transparent;
    border-right: 0 solid #2d2e54;
    border-left: 9px solid #2d2e54;
    border-bottom: 6px solid transparent;
    box-sizing: border-box;
    position: absolute;
    top: 0; bottom: 0; right: 0;
  }
}

/* ****************************************************

		 　M o b i l e  S t y l e

***************************************************** */


.p-archiveContent ul li article {
    background: #fff;
    padding: 20px 17px;
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(204, 153, 142, 0.36);
	  }

body.archive, body.single-campaign, body.single-case, body.single-worries {
  & #main-wrap {
    & #page-head {
      width: 100%;
      height: 200px;
      & .page-title {
        height: 200px;
        padding: 0 5%;
        color: #fff;
        line-height: 1.5;
        display: flex;
        justify-content: center;
        flex-direction: column;
        & .en {
          font-size: 5.6vw;
          font-weight: 600;
          letter-spacing: .2em;
        }
        & .jp {
          font-size: 2.8vw;
          font-weight: 600;
          letter-spacing: .2em;
        }
      }
    }
    /* 料金のヘッダー画像 */
    & #page-head.cases {
      background: url(images/page_h_case.jpg) no-repeat center;
      background-size: cover;
    }
  }

  /* t e r m 一 覧 の タ ブ
  -------------------------------------------------*/
  & .tab-wrap {
    margin-bottom: 30px;
    & .tab-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: .5em;
      row-gap: 1em;
      & .archive-tab-item {
        padding: 8px 0;
        color: #2d2e54;
        font-size: 2vw;
        text-align: center;
        cursor: pointer;
        border-radius: 2px;
        background: #fff;
        transition: .4s ease-in-out;
      }
      & .archive-tab-item.is-active {
        display: inline-block;
        color: #fff;
        border-radius: 4px;
        background: #2d2e54;
        position: relative;
        animation: panel-show .9s ease-in-out forwards;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          border-style: solid;
          border-width: 10px 5px 0 5px;
          border-color: #2d2e54 transparent transparent;
          translate: -50% 100%;
        }
      }
    }

    /* 症例一覧タブ */
    .tab-nav {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      white-space: nowrap;
      padding-bottom: 10px;
    }

    .tab-btn {
      flex: 0 0 auto;
      padding: 10px 16px;
      color: #2d2e54;
      background: #fff;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
    }

    .tab-btn.active {
      background: #2d2e54;
      color: #fff;
    }
    .tab-btn.active::after {
      content: "";
      position: absolute;
      bottom: -8px; /* タブの下に出す */
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid #2d2e54;
    }

    /* 記事 */
    .post-list {
      display: grid;
      gap: 20px;
    }

    .post-item a {
      display: flex;
      gap: 15px;
      text-decoration: none;
      color: inherit;
    }

    .thumb img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    .meta {
      flex: 1;
    }

    .title {
      font-size: 16px;
      margin: 5px 0;
    }

    .cat {
      font-size: 12px;
      color: #888;
    }

    .date {
      font-size: 12px;
      color: #aaa;
    }


    /* タブの切り替えアニメーション */
    @keyframes panel-show {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  }
  & .panel-list {
    & .archive-panel-item {
      display: none;
      & ul.campaign-list {
        display: grid;
        row-gap: 30px;

          & a {
            font-family: 'Shippori Mincho', serif;
            color: #2d2e54;
			  

            & .excerpt {
              margin-top: 5px;
              padding-top: 10px;
              border-top: 1px solid #2d2e54;
            }
            & .date {
              font-size: 3vw;
              color: #9e9e9e;
            }
            & ul.terms {
              display: flex;
              flex-wrap: wrap;
              & li.term {
                margin-bottom: 10px;
                padding: 3px 1em;
                font-size: 2.8vw;
                color: #fff;
                border-radius: 100vmax;
              }
              & li.new,
              & li.new-case,
              & li.worries-category,
              & li.featured {
                background: #919191;
              }
              & li.month,
              & li.skin,
              & li.cosmetic {
                background: #2d2e54;
              }
              & li.first_time,
              & li.injection {
                background: #bdae61;
              }
              & li.introduction,
              & li.lift-up {
                background: #c54f2d;
              }
              & li.set,
              & li.prescription {
                background: #d69a90;
              }
            }
          }
        
      }
      /* ページネーション */
      & ul.page-numbers {
        display: flex;
        justify-content: center;
        box-shadow: none;
        background: transparent;
        & span.current {
          border-radius: 4px;
        }
        & a.page-numbers, a.next {
          background: #bdae61;
          border-radius: 4px;
        }
      }
    }
    & .archive-panel-item.is-active {
      display: block;
      animation: panel-show .9s ease-in-out forwards;
    }
  }
}



.p-archiveContent .content-list .panel-item .campaign-list li{
	background: #fff;
	padding: 20px 17px;
	border-radius: 10px;
}
	
/* お 悩 み か ら 探 す 一 覧
-------------------------------------------------*/
ul.campaign-list {
  display: grid;
  row-gap: 30px;
  & a {
    font-family: 'Shippori Mincho', serif;
    color: #2d2e54;
    & .excerpt {
      margin-top: 5px;
      padding-top: 10px;
      border-top: 1px solid #2d2e54;
    }
    & .date {
      font-size: 3vw;
      color: #9e9e9e;
    }
    & .terms {
      display: flex;
      column-gap: 5px;
      & span.term {
        margin-bottom: 10px;
        padding: 3px 1em;
        font-size: 2.8vw;
        color: #fff;
        border-radius: 100vmax;
        background: #919191;
      }
      & li.new,
      & li.new-case,
      & li.worries-category,
      & li.featured {
        background: #919191;
      }
      & li.month,
      & li.skin,
      & li.cosmetic {
        background: #2d2e54;
      }
      & li.first_time,
      & li.injection {
        background: #bdae61;
      }
      & li.introduction,
      & li.lift-up {
        background: #c54f2d;
      }
      & li.set,
      & li.prescription {
        background: #d69a90;
      }
    }
  }
 }



/* ページネーション */
.pagination {
  & .nav-links {
    display: flex;
    justify-content: center;
    & a.page-numbers {
      background: #bdae61;
    }
  }
}

.l-mainContent__inner {
  padding: 60px 17px;
	    background: #f5ece8;
  & .page-title {
    margin-bottom: 40px;
    & .main-title {
      padding-left: 38px;
      font-size: 6vw;
      color: #2d2e54;
      line-height: 1.2;
      position: relative;
      &::before {
        content: "";
        width: 10%;
        height: 1px;
        position: absolute;
        top: 50%;
        left: -7px;
        background: #2d2e54;
      }
    }
    & .sub-title {
      padding-left: 40px;
      font-size: 2.6vw;
      color: #bdae61;
    }
  }
  & .p-archiveContent {
    display: grid;
    row-gap: 40px;
  }
  & .p-postList__item {
    padding: 17px;
    border-radius: 8px;
    background: #fff;
    & .p-postList__thumb {
      border-radius: 6px;
    }
  }
}

/* サ イ ド バ ー
-------------------------------------------------*/
.side-bar {
  width: 100%;
  margin: 0 auto;
  & .serch-by-problem {
    margin: 0 !important;
  }
  & .serch-by-problem, .serch-from-menu {
    margin-top: 40px;
    border-radius: 6px;
    background: #fff;
    & h3 {
      padding: 15px 1em;
      font-size: 3.6vw;
      font-weight: 600;
      color: #2d2e54;
      border-bottom: 1px solid #d2cad2;
    }
    & ul {
      & li {
        padding: 12px 1em;
        border-bottom: 1px solid #f9f5f3;
      }
    }
  }
}

/* ****************************************************

		 　D e s k T o p S t y l e

***************************************************** */
@media screen and (min-width: 960px) {
  /* キャンペーン・症例紹介のシングルページ
  -------------------------------------------------*/
  body.single-campaign, body.single-case, body.single-worries {
    & #main-wrap {
      & #page-head {
        height: 400px;
        & .page-title {
          height: 400px;
          & .en {
            font-size: 28px;
            font-weight: 400;
          }
          & .jp {
            font-size: 18px;
            font-weight: 400;
          }
        }
      }
    }
    & .main-container {
      display: grid;
      grid-template-columns: 2fr 1fr;
      & .lt-content {
        width: 100%;
        padding: 60px 17px;
      }
    }
  }

  /* t e r m 一 覧 の タ ブ
  -------------------------------------------------*/
  body.archive {
    & #main-wrap {
      /* 固 定 ペ ー ジ の ヘ ッ ダ ー 画 像
      -------------------------------------------------*/
      & #page-head {
        height: 400px;
        & .page-title {
          height: 400px;
          & .en {
            font-size: 28px;
            font-weight: 400;
          }
          & .jp {
            font-size: 18px;
            font-weight: 400;
          }
        }
      }
    }
    & .tab-wrap {
      margin-bottom: 60px;
      & .tab-list {
        grid-template-columns: repeat(6, 1fr);
        column-gap: .5em;
        & .archive-tab-item {
          font-size: 16px;
          letter-spacing: -.1em;
        }
      }
    }
    & .panel-list {
      & .archive-panel-item {
        display: none;
        & ul.campaign-list {
          grid-template-columns: repeat(2, 1fr);
          column-gap: 30px;

            & a {
              font-size: 18px;
              & ul.terms {
                column-gap: 10px;
                & li.term {
                  padding: 2px 1em;
                  font-size: 11px;
                  text-align: center;
                }
              }
              & .date {
                font-size: 14px;
              }
            }
          
        }
        /* ページネーション */
        & ul.page-numbers {
          display: flex;
          justify-content: center;
          box-shadow: none;
          background: transparent;
          & span.current {
            border-radius: 4px;
          }
          & a.page-numbers, a.next {
            background: #bdae61;
            border-radius: 4px;
          }
        }
      }
      & .archive-panel-item.is-active {
        display: block;
        animation: panel-show .9s ease-in-out forwards;
      }
    }

    & ul.campaign-list {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 30px;

        & a {
          font-size: 18px;
          & ul.terms {
            column-gap: 10px;
            row-gap: 5px;
            & li {
              padding: 2px 1em;
              font-size: 11px;
              text-align: center;
              color: #fff;
              border-radius: 100vmax;
              background: #919191;
            }
          }
          & .date {
            font-size: 14px;
          }
        }
      
    }
  }

  /* お 悩 み か ら 探 す 一 覧
  -------------------------------------------------*/
	.p-archiveContent{
		        & img.attachment-large.size-large {
    margin-bottom: 15px;
}
		& img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image{
    margin-bottom: 15px;
}
	}
  ul.campaign-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
      & a {
        font-family: 'Shippori Mincho', serif;
        color: #2d2e54;

        & .excerpt {
          margin-top: 5px;
          padding-top: 10px;
          border-top: 1px solid #2d2e54;
        }
        & .date {
          font-size: 14px;
        }
        & .terms {
          display: flex;
          flex-wrap: wrap;
          column-gap: 5px;
          & span.term {
            margin-bottom: 10px;
            padding: 3px 1em;
            font-size: 11px;
            color: #fff;
            border-radius: 100vmax;
            background: #919191;
          }
          & li.new,
          & li.new-case,
          & li.worries-category,
          & li.featured {
            background: #919191;
          }
          & li.month,
          & li.skin,
          & li.cosmetic {
            background: #2d2e54;
          }
          & li.first_time,
          & li.injection {
            background: #bdae61;
          }
          & li.introduction,
          & li.lift-up {
            background: #c54f2d;
          }
          & li.set,
          & li.prescription {
            background: #d69a90;
          }
        }
      }
    
  }



  .l-mainContent__inner {
    max-width: 1200px;
    margin: 0 auto;
    & .page-title {
      margin-bottom: 40px;
      & .main-title {
        padding-left: 120px;
        font-size: 34px;
        letter-spacing: 0;
        &::before {
          content: "";
          width: 6%;
          height: 1px;
          position: absolute;
          top: 50%;
          left: 40px;
          background: #2d2e54;
        }
      }
      & .sub-title {
        padding-left: 120px;
        font-size: 12px;
      }
    }
    & .p-archiveContent {
      display: grid;
      grid-template-columns: 2fr 1fr;
      & .p-postList {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 15px;
        & .p-postList__item {
          width: 100%;
          padding: 17px;
          & .p-postList__link {
            display: grid;
            justify-content: normal;
            & .p-postList__thumb {
              width: 100%;
              margin-bottom: 20px;
            }
          }
        }
      }
    }
  }

  /* サ イ ド バ ー
  -------------------------------------------------*/
  .side-bar {
    & .serch-by-problem, .serch-from-menu {
      & h3 {
        font-size: 18px;
      }
    }
  }
}