@charset "utf-8";

/*-----------------------------------------------------------
メニュー
-----------------------------------------------------------*/

.menu-staff-list {
    margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
}

/* .menu-staff-list > section {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
} */

/*-----------------------------------------------------------
カテゴリー
-----------------------------------------------------------*/

.category-container {
    padding: 0;
    margin: 0 auto;
}

.category-container > section {
    display: flex;
    flex-wrap: wrap;
    margin: -10px -5px 0;
}

.category-col {
    padding: 0 5px;
    margin: 10px 0 0;
}

.category-col-first {
    display: none;
}

.category-col-first:first-child {
    display: block;
}

.category-btn {
    padding: 18px 15px;
    max-width: 100%;
}

.category-btn.active {
    background: var(--secondary);
    color: var(--white);
}

.category-btn.active::after {
    background: var(--white);
}

/*-----------------------------------------------------------
施術事例
-----------------------------------------------------------*/

.staff-list {
    margin: 60px 0 0;
}

.staff-list > section {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
}

.staff-modal-link {
    display: block;
    color: var(--base-font-color);
    transition: .3s;
}

.staff-modal-link:hover {
    opacity: 0.65;
    color: var(--base-font-color);
}

.staff-container {
    max-width: 1120px;
    width: 100%;
    padding: 0;
}

.staff-row {
    display: flex;
    flex-direction: column;
}

.staff-col {
	margin: 40px auto 0;
    padding: 0 5px;
	max-width: 90%;
}

.staff-col:first-child {
	margin: 0 auto;
}

.staff-link-img-box {
    aspect-ratio: 4 / 3;
}

.staff-link-img-box > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

img + .no-img {
    display: none;
}

.staff-link-title {
    margin: 15px 0 0;
}

/* ----- モーダル内 ----- */

.staff-title-box {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.staff-cate {
    display: inline-block;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    background: var(--white);
    padding: 5px 10px;
    color: var(--primary);
    font-weight: bold;
    letter-spacing: 0.05em;
}

.staff-post {
    color: var(--secondary);
    margin: 30px 0 0;
}

.staff-title {
    margin: 5px 0 0;
}

.staff-content {
    margin: 30px 0 0;
}

.staff-title-box + .staff-container {
    margin: 20px 0 0;
}

.swiper + .no-img {
    display: none;
}

.staff-slider-img {
    padding: 0 0 75%;
}

.staff-movie {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 40px 0 0;
}

.staff-movie iframe {
	width: 100%;
	height: 100%;
}

.staff-pdf-btn {
    margin: 30px auto 0;
}

/*-----------------------------------------------------------
サムネイル
-----------------------------------------------------------*/

/* サムネ全体を5カラムのグリッドに */
.thumbnail-slider {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

/* もしマークアップに swiper 用のラッパーが残っているなら中和 */
.thumbnail-slider .swiper-wrapper { display: contents; }
.thumbnail-slider .swiper-slide {
  width: auto !important;
  margin: 0 !important;
}

/* サムネ画像の見た目 */
.thumbnail-slider img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  cursor: pointer;
  transition: all .3s;
}

.thumbnail-slider img:hover {
  	opacity: 0.7;
}

/*-----------------------------------------------------------
モーダル
-----------------------------------------------------------*/

.modal{
	opacity: 0;
	visibility: hidden;
	display: block;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 999999999999;
	transition: .3s;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal__bg{
	background: rgba(0,0,0,0.8);
	height: 100vh;
	position: absolute;
	width: 100%;
}

.modal__content{
	max-width: 1100px;
	width: 96%;
	height: 95%;
	background: var(--white);
	left: 50%;
	padding: 60px 3%;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	overflow-x: scroll;
}

.modal-btn-block {
    margin: 30px 0 0;
}

/*-----------------------------------------------------------
ページャー
-----------------------------------------------------------*/

.webgene-pagination {
    grid-column: 1/3;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:768px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.staff-row {
    flex-direction: row;
}

.staff-col {
	margin: 0;
	max-width: 50%;
}

.staff-list {
    margin: 80px 0 0;
}


/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
}/* min-width: 768px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */ 

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1024px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.staff-list {
    margin: 120px 0 0;
}

/*-----------------------------------------------------------
メニュー
-----------------------------------------------------------*/

.menu-staff-list {
    margin: 60px 0 0;
}

.menu-staff-list {
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
}

/* .menu-staff-list > section {
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
} */

/*-----------------------------------------------------------
カテゴリー
-----------------------------------------------------------*/

.category-container > section {
    margin: -20px -10px 0;
}

.category-col {
    padding: 0 10px;
    margin: 20px 0 0;
}

.category-btn {
    padding: 24px 15px;
}

/*-----------------------------------------------------------
施術事例
-----------------------------------------------------------*/

.staff-list > section {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 60px;
}

.staff-col {
    padding: 0 10px;
}

.staff-link-title {
    margin: 20px 0 0;
}
	
/* ----- モーダル内 ----- */

.staff-title-box + .staff-container {
    margin: 40px 0 0;
}

.staff-comment {
    margin: 25px 0 0;
    padding: 30px;
}

.staff-movie {
    margin: 60px 0 0;
}

.staff-movie iframe {
  width: 100%;
  height: 100%;
}

.staff-pdf-btn {
    margin: 60px auto 0;
}

/*-----------------------------------------------------------
モーダル
-----------------------------------------------------------*/

.modal-btn-block {
    margin: 60px 0 0;
}

/*-----------------------------------------------------------
ページャー
-----------------------------------------------------------*/

.webgene-pagination {
    grid-column: 1/4;
}


/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
}/* min-width: 1024px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */