@charset "utf-8";
/*	◆ CSS Document ◆
ベースになるCSSコードや、:rootで変数にしたものはbase.cssにあります。
こちらはカスタム投稿タイプ「companion」ページの項目用のCSSです。 */

/*--------------------------------------------------
    投稿ページ 共通
--------------------------------------------------*/
#companion_ttl {
	background-image: url("../images/companion/hero/companion_hero.webp");
	background-position-y: top;
}
#companion_archive h2,
#companion_post h2,
.companion_wrap #foot_contact h2 {
	color: var(--gold);
	font-size: .32rem;
	font-weight: 900;
	margin-bottom: .15rem;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
#companion_archive h2::before,
#companion_post h2::before,
.companion_wrap #foot_contact h2::before{
	content: "";
	background: url(../images/common/logo_symbol_gold.webp) no-repeat;
	background-size: contain;
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	margin-bottom: .15rem;
}

.book-section h2.book-section__title::before {
	display: none !important;
	content: none !important;
}

#companion_archive p{
	text-align: center;
}

@media (max-width: 767px) {
	#companion_ttl {
		background-image: url("../images/companion/hero/companion_hero_sp.webp");
		background-position-y: -.2rem;
		margin-top: -3px;
	}
    #companion_archive h2,
	#companion_post h2 {
		font-size: .45rem;
    }
		#companion_archive h2::before,
		#companion_post h2::before {
			margin-bottom: .25rem;
		}
	#companion_archive p,
	#companion_post p {
		font-size: .2rem;
	}
}

/*--------------------------------------------------
    投稿ページ 一覧
--------------------------------------------------*/
#companion_sort{
	background: var(--whitegold);
	margin-top: .5rem;
	padding: .25rem;
}
#companion_sort h3{
	color: var(--gold);
	font-size: .24rem;
	margin-block: .5rem .25rem;
	font-weight: 600;
}
#companion_sort h3:first-of-type {
	margin-top: 0;
}
#companion_sort .sort_list{
	width: 100%;
	flex-wrap: wrap;
}
#companion_sort .sort_list li{
	background: var(--white);
	color: var(--gold);
	font-size: .18rem;
	box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
	padding: .2rem;
	text-align: center;
	min-height: .6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 2px;
	border: 1px solid transparent;
	font-weight: 600;
}
#companion_sort .sort_list.sort01 li,
#companion_sort .sort_list.sort02 li{
	width: calc((100% - .5rem) / 5);
}
	#companion_sort .sort_list.sort01 li img:first-of-type{
		margin-right: .05rem;
	}
#companion_sort .sort_list.sort03 li {
	width: calc((100% - .5rem) / 4);
}
#companion_sort .sort_list.sort01 li:nth-of-type(n+6),
#companion_sort .sort_list.sort02 li:nth-of-type(n+6),
#companion_sort .sort_list.sort03 li:nth-of-type(n+5){
	margin-top: .25rem;
}
#companion_sort .sort_list li img{
	width: auto;
	height: .12rem;
}

/* フィルターボタンの状態スタイル */
#companion_sort .sort_list li:hover {
	background-color: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.1);
}

#companion_sort .sort_list li.active {
	background-color: #f0f0f0;
	color: #333;
	font-weight: 400;
	border-color: #ddd;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* ランクボタンのアクティブ状態（画像付きの場合） */
#companion_sort .sort01 li.active img {
	filter: brightness(0.9) saturate(0.8);
	opacity: 0.9;
}

/* 特徴フィルターの複数選択表示 */
#companion_sort .sort02 li.active {
	background-color: #e8e8e8;
	color: #555;
	border-color: #ccc;
}

/* ソートボタンのアクティブ状態 */
#companion_sort .sort03 li.active {
	background-color: #f5f5f5;
	color: #444;
	border-color: #bbb;
}

#companion_list{
	background: var(--bg-section-top-fade);
	background-repeat: var(--bg-rose-repeat);
	background-position: var(--bg-rose-position);
	background-size: var(--bg-rose-size);
	padding-block: .5rem 1rem;
}
#companion_list .flex_between {
	margin-block: .25rem;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}
		#companion_list .flex_between:after {
			content: "";
			display: block;
			width: calc((100% - 1rem) / 3);
			height: 0;
		}

#companion_list .flex_between li {
	background: var(--white);
	padding-block: .25rem;
	width: calc((100% - 1rem) / 3);
	box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
	justify-content: flex-start;
}
#companion_list .flex_between li:nth-child(n+4) {
	margin-top: .5rem;
}


@media (max-width: 767px) {
	#companion_sort{
		padding: .5rem .25rem;
	}
	#companion_sort .sort_list.sort01{
		flex-wrap: wrap;
	}
	#companion_sort .sort_list.sort01 li{
		width: 100%;
	}
	#companion_sort .sort_list.sort01 li:nth-child(n+2) {
		margin-top: .25rem;
	}
	#companion_sort .sort_list.sort02 li{
		width: calc((100% - .25rem) / 2);
	}
	#companion_sort .sort_list.sort02 li:nth-of-type(n+3){
		margin-top: .25rem;
	}

	#companion_sort select{
		width: 100%;
		color: #666;
		background: var(--white);
		padding: .2rem;
		box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
		appearance: none;
		text-align: center;
	}
	#companion_list {
		/* 背景サイズは統一変数で管理 */
	}
	#companion_list h2{
		text-align: center;
	}
	#companion_list p{
		font-size: .25rem;
		text-align: center;
	}
		#companion_list .flex_between li{
			width: calc((100% - .15rem) / 2);
		}
		#companion_list .flex_between li:nth-child(n+3){
			margin-top: .25rem;
		}

}


/*--------------------------------------------------
    投稿ページ プロフィール
--------------------------------------------------*/
#companion_post{
	background: var(--bg-section-top-fade);
	background-repeat: var(--bg-rose-repeat);
	background-position: var(--bg-rose-position);
	background-size: var(--bg-rose-size);
	padding-top: .5rem;
}
#companion_post h2{

	margin-bottom: .5rem;
}
	#companion_post h2.subttl::before,
	.companion_wrap #foot_contact h2.subttl::before{
		display: none;
	}

.prof_spec_wrap{
	margin-block: .5rem;
	text-align: center;
}
	.prof_spec_wrap .name{
		font-size: .32rem;
		font-weight: 700;
		margin-bottom: .1rem;
	}
	.prof_spec_wrap .spec{
		font-family: "Noto Sans", sans-serif;
		font-weight: 300;
		font-size: .16rem;
	}
#companion_post .rank{
	margin-bottom: .1rem;
}
#companion_post .profile{
	width: 50%;
	margin-block: .5rem 1rem;
}
#companion_post .profile th,
#companion_post .profile td{
	border-bottom: 1px solid var(--black);
	padding-block: .1rem;
	text-align: left;
	font-size: .2rem;
}
	#companion_post .profile th:first-of-type,
	#companion_post .profile td:first-of-type {
		border-top: 1px solid var(--black);
	}
#companion_post .profile th{
	color: #666;
	padding-left: .2rem;
}

#companion_post .movie_wrap{
	margin-bottom: .5rem;
}
#companion_post .frame_goldline {
	margin-top: 0;
	margin-bottom: .5rem;
	background: var(--white);
	text-align: center;
	padding: .4rem .8rem;
	box-sizing: border-box;
}
	#companion_post .frame_goldline h4{
		margin-bottom: .25rem;
	}
	#companion_post .frame_goldline ul{
		margin-block: .25rem;
		line-height: 1.7;
	}
	#companion_post .frame_goldline p{
		line-height: 1.1;
	}

#companion_post .schedule_list{
	font-size: .22rem;
	margin-bottom: .25rem;
}
	#companion_post .schedule_list th {
		background-color: var(--gold);
		color: var(--white);
		text-align: left;
		padding: .2rem;
		border: 1px solid var(--white);
		width: 25%;
	}
	#companion_post .schedule_list td {
		text-align: center;
		vertical-align: middle;
		height: .5rem;
		background: var(--white);
		border: 1px solid var(--gold);
	}
		#companion_post .schedule_list td:first-of-type {
			width: 50%;
		}
		#companion_post .schedule_list td:last-of-type {
			color: var(--gold);
		}
		#companion_post .schedule_list td img{
			display: block;
			margin: auto;
			width: 80%;
    		max-width: 1.8rem;
		}
#companion_post a.viewmore{
	display: block;
	width: fit-content;
	font-size: .24rem;
	font-family: "Noto Sans", sans-serif;
	font-weight: 100;
	color: var(--white);
	background: var(--gold);
	padding: .15rem .4rem;
	margin-bottom: 1rem;
}



@media (max-width: 767px) {
	#companion_post {
		/* 背景サイズは統一変数で管理 */
	}
	#companion_post h2 {
		align-items: center;
	}
	.prof_spec_wrap{
		margin-block: .25rem;
	}
	.prof_spec_wrap .name {
		font-size: .4rem;
	}
	.prof_spec_wrap .spec {
		font-size: .2rem;
	}
	#companion_post .profile {
		width: 100%;
	}
	#companion_post .profile th,
	#companion_post .profile td {
		padding-block: .2rem;
	}
	#companion_post .frame_goldline {
		padding: .3rem;
	}
	#companion_post .schedule_list {
		font-size: .16rem;
		width: 100%;
	}
	#companion_post .schedule_list th,
	#companion_post .schedule_list td {
		width: auto;
	}
	#companion_post a.viewmore {
		text-align: center;
		width: 80%;
	}
}


/*--------------------------------------------------
    投稿ページ スライダー
--------------------------------------------------*/
	.photo_slide {
		width: 3.1rem;
		margin: 0 auto;
		/* 元に戻す */
	}
		.photo_slide li{
			width: 3.1rem;
			height: 4.2rem;
			/* 元に戻す */
		}
	.photo_slide img {
		width: 100%;
		height: auto;
		object-fit: cover;
		aspect-ratio: 3 / 4;
	}
	.photo_slide .slick-slide {
		margin: 0 2rem;
	}
	.slick-prev,
	.slick-next {
		position: absolute;
		top: 50%;
		cursor: pointer;
		outline: none;
		border-top: 4px solid #222;
		border-right: 4px solid #222;
		height: 20px;
		width: 20px;
		z-index: 3;
	}
	.slick-prev::before,
	.slick-next::before {
		position: absolute;
		color: rgba(0, 0, 0, 0) !important;
		content: "";
		width: 15px;
		height: 15px;
		border-right: 2px solid #666;
		border-top: 2px solid #666;
		margin: auto;
		transform: rotate(45deg);
	}
	.slick-prev {
		transform: rotate(180deg) !important;
		margin-top: -15px;
	}
	.slick-dots li {
		width: .2rem !important;
		height: .2rem !important;
		margin: 0;
		padding: 0;
		cursor: pointer;
	}

@media (max-width: 767px) {}

/*--------------------------------------------------
    コンパニオンカード 共通スタイル
--------------------------------------------------*/

/* コンパニオンカードのレイアウト（各ページ共通） */
.companion-card {
    background: var(--white);
    padding-block: .1rem .2rem;
    justify-content: flex-start;
    box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.1);
}

/* 3列レイアウト用 */
#todays-attendance .companion-card,
#companion_list .companion-card,
#schedule_dtl .companion-card {
    width: calc((100% - 1rem) / 3);
}

/* 行間隔調整 */
#todays-attendance .companion-card:nth-child(n+4),
#companion_list .companion-card:nth-child(n+4),
#schedule_dtl .companion-card:nth-child(n+4) {
    margin-top: .5rem;
}

/* モバイルレスポンシブ */
@media (max-width: 767px) {
    #todays-attendance .companion-card,
    #companion_list .companion-card,
    #schedule_dtl .companion-card {
        width: calc((100% - .15rem) / 2);
    }
    
    #todays-attendance .companion-card:nth-child(n+3),
    #companion_list .companion-card:nth-child(n+3),
    #schedule_dtl .companion-card:nth-child(n+3) {
        margin-top: .25rem;
    }
    
    #todays-attendance .companion-card:nth-child(n+4),
    #companion_list .companion-card:nth-child(n+4),
    #schedule_dtl .companion-card:nth-child(n+4) {
        margin-top: .25rem; /* 4番目以降も同じ間隔に統一 */
    }
}
.companion-card .rank {
    margin-bottom: .15rem;
}

.companion-card .photo {
    width: 100%;
    position: relative;
}

.companion-card .photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 4;
}

.companion-card .photo span {
    position: absolute;
    bottom: .15rem;
    right: .05rem;
    padding: .05rem;
    border-radius: .2rem;
    font-size: .12rem;
    font-family: "Noto Sans", sans-serif;
    color: var(--white);
    background: #000000CC;
}

.companion-card .txt {
    text-align: left;
    padding:  0.25rem 0.25rem 0.1rem 0.25rem;
    flex-grow: 1;
    width: 100%;
    /* 要素間余白 */
    display: grid;
    row-gap: 0.3em;
	line-height: 1.1;
}

.companion-card .name {
    font-size: .32rem;
    font-weight: 900;
}

.companion-card .spec,
.companion-card .profile {
    /* font-family: "Noto Sans", sans-serif; */
    font-weight: 100;
}

.companion-card .spec {
    font-size: .20rem;
	text-align: left !important;
}

.companion-card .profile {
    font-size: .16rem;
}

.companion-card .linkbtn {
    padding: 0 .25rem;
}

/* ランクボタンのグラデーション */
.companion-card .view_prof {
    color: var(--white);
    font-size: .24rem;
    padding: .1rem;
    width: calc(100% - .5rem);
    text-align: center;
}

.companion-card .view_prof.diamond {
    background: linear-gradient(to right, #636eb7, #00bba2);
}

.companion-card .view_prof.gold {
    background: linear-gradient(to right, #c99b52, #ecd7a4, #c99b52);
}

.companion-card .view_prof.ask {
    background: linear-gradient(to right, #211d1f, #757678, #211d1f);
}

.companion-card .view_prof.silver {
    background: linear-gradient(to right, #607577, #839ea1, #607577);
}

/* モバイル対応 */
@media (max-width: 767px) {
    .companion-card .rank img {
        width: auto;
        height: .5rem;
    }
    
    .companion-card .txt {
        padding: .25rem .1rem .1rem .1rem;
    }

    #front-page .companion-card .spec,
    .companion-card .spec {
        font-size: .18rem !important;
		text-align: left;
    }
    
    .companion-card .profile {
        font-size: .18rem !important;
        text-align: left;
    }
    
    .companion-card .name {
        font-size: .28rem; /* モバイル時は少し小さく */
        white-space: normal; /* 改行を許可 */
        word-break: keep-all; /* 単語内での分割を防ぎ、空白で折り返す */
        overflow-wrap: normal; /* 空白以外では極力改行しない */
        hyphens: none; /* ハイフネーションを無効化 */
    }
	.companion-card .linkbtn {
		padding: 0 .1rem;
	}
}

/*--------------------------------------------------
    ★追加★ コンパニオンカード プロフィール固定高さ
--------------------------------------------------*/
.profile-fixed-height {
    width: 100%;
    min-height: 2.4em;
    height: auto;
    line-height: 1.2em;
    text-align: left !important;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    
    /* 縦軸中央揃え（複数行対応） */
    display: flex;
    align-items: center;
}