@font-face {
  font-family: 'RiiPopkkR';
  src: url('../common/font/RiiPopkkR.otf') format('opentype');
  font-display: swap;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	/* 25/05 追記 */
	.SelectCup table td {
		/* 翻訳対応、文字折り返し可能に */
		word-break: break-word;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

#contents_body/*, #SelectCupPulldown*/ {
	font-family: 'RiiPopkkR';
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.SelectCup table, .SelectCup table th, .SelectCup table td {
	border: 3px solid #cc317f;
}

.SelectCup table {
	margin: 0 auto;
	table-layout: fixed;
	border-collapse: collapse;
}
	.SelectCup table caption {
		line-height: 2;
		color: #fdfdfd;
		background: #cc317f;
	}
	.SelectCup table td {
		height: 60px;
	}
		.SelectCup td a {
			width: 100%;
			height: 100%;
			padding: 8px;
			color: #cc317f;
			transition: all 0.6s ease;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			.SelectCup a.WWSlink {
				text-decoration: underline;
			}

			.SelectCup a br {/* wbrにしたいが、table関連でややこしくなるのでbrにしてます */
				display: none;
			}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

article section {
	padding-top: 50px;
}
	article section:last-child {
		padding-bottom: 50px;
	}

	section .image-text  {
	    grid-template-columns: 50% 50%;
	    grid-template-rows: 100%;
	    gap: 0 15px;
	}
		.imgarea {
			grid-column: 1;
			grid-row: 1;
		}
			.imgarea img {
				width: 100%;
				height: auto;
			}

		.textarea {
		    margin-top: 15px;
			grid-column: 2;
			grid-row: 1;
		}
			.listout {
				display: flex;
				gap: 0 10px;
			}
			.left_ul, .right_ul {
				flex: 1;
			}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

section .heading {
    color: #cc317f;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 5px;
    margin-bottom: 30px;
    border-bottom: solid 1px #cc317f;
}
	section#male .heading {/* 俺は男だ */
		color: #315ecc;
		border-bottom: solid 1px #315ecc;
	}

	.heading .h2wrap {
	    align-items: baseline;
	    gap: 0 5px;
	}
		.heading strong {
			font-size: 160%;
		}
		.heading small {/* bust gap */
			font-weight: normal;
			line-height: 1.2;
		}

	.heading img {
		width: 50px;
	}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.listout ul li {
	line-height: 1.5;
	list-style: none;
	text-indent: -1em;
	padding-left: 1em;
}
	#male .listout ul li {/* いつも遊びに〜 */
		text-indent: initial;
		padding-left: initial;
	}

.voice h3 {
	color: hotpink;
	font-weight: normal;
	margin-bottom: 5px;
	display: inline-block;
	border-bottom: 1px solid hotpink;
}
.voice {
	text-align: left;
	margin-top: 30px;
}
	.voice_bottom {
		display: none;
	}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

#SelectCupPulldown {
	background: #fdfdfd;
	margin-top: 40px;
    padding: 20px;
}
	#SelectCupPulldown p {
		color: hotpink;
		text-indent: -1em;
		padding-left: 1em;
	}
		#SelectCupPulldown select {
			cursor: pointer;
			padding: 5px;
		}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( font-size )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.SelectCup table caption {
	font-size: clamp(0.625rem, 6vw, 1.5rem);/* 24px */
}
	.SelectCup table a {
	    font-size: clamp(0.625rem, 7.5vw, 1.875rem);/* 30px */
	}
		.SelectCup a.WWSlink {
			font-size: clamp(0.625rem, 4.5vw, 1.125rem);/* 18px */
		}

.heading h2 {/* ○○カップ */
	font-size: 1.375rem; /* 22px */
}
	.heading small {/* bust gap */
		font-size: 1.25rem;  /* 20px */
	}
		.listout ul li {
			font-size: 1.25rem;  /* 20px */
		}
		.voice h3 {
			font-size: 1.125rem; /* 18px */
		}
		.voice p {
			font-size: 1.125rem; /* 18px */
		}

#SelectCupPulldown p, #SelectCupPulldown form {
    font-size: 1.125rem; /* 18px */
}



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑共通部分↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( 各種条件分岐 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/



@media screen and (orientation: landscape) {

	.SelectCup table {
		width: 85%;
	}

}

/*----------------------------------------------------------------------------------*/

@media screen and (orientation: portrait) {

	.SelectCup table {
		width: 100%;
	}

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( Z-INDEX指定 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑（共通スタイル）↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓特殊３カラム（ノートPC--iPadpro横）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (1280px <= width <= 1366px) and (orientation: landscape) {


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓２カラム（タブ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (933px <= width < 1280px) and (orientation: landscape),
       screen and (768px <= width < 1280px) and (orientation: portrait) {/* ２カラム共通スタイル */



/*:::::２カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (933px <= width < 1280px) and (orientation: landscape) {


/*:::::２カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (768px <= width < 1280px) and (orientation: portrait) {

	section .image-text {
	    grid-template-columns: 60% 40%;
	}
		.listout {
			display: block;
		}
		.voice {
			display: none;
		}
			.voice_bottom {
				display: table;
				margin: 30px auto 0;
			}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓１カラム（スマホ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (width < 933px) and (orientation: landscape),
       screen and (width < 768px) and (orientation: portrait) {/* １カラム共通スタイル */


/*:::::１カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 933px) and (orientation: landscape) {

} @media screen and (width < 700px) and (orientation: landscape) {/* iPhoneSE横 */

	section .image-text {
	    grid-template-columns: 60% 40%;
	}
		.listout {
			display: block;
		}
		.voice {
			display: none;
		}
			.voice_bottom {
				display: table;
				margin: 30px auto 0;
			}


/*:::::１カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 768px) and (orientation: portrait) {

	section .image-text  {
	    display: block;
	}
		.SelectCup a br {
			display: initial;
		}

	section .heading, section#male .heading {
	    border-bottom: none;
	}
		.heading .h2wrap {
			width: 100%;
			border-bottom: solid 1px #cc317f;
		}
			section#male .heading .h2wrap {
				border-bottom: solid 1px #315ecc;
			}

		.heading small {/* bust gap */
			margin-left: auto;
		}

		.voice {
			display: none;
		}
			.voice_bottom {
				display: table;
				margin: 30px auto 0;
			}


} @media screen and (width <= 480px) and (orientation: portrait) {

} @media screen and (width <= 375px) and (orientation: portrait) {/* iPhoneSE縦 */

} @media screen and (width <= 320px) and (orientation: portrait) {

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* https://pengi-n.co.jp/blog/hover/ */

/*::::::::::::::::::::::::::::::( ホバー時の挙動 )::::::::::::::::::::::::::::::::::*/

@media (hover: hover) {

	.SelectCup table a:hover {
		color: white;
		background: #cc317f;
	}

}



/*::::::::::::::::::::::::::::::( ホバーできない機種の挙動 )::::::::::::::::::::::::::::::::::*/

@media (hover: none) {

	.SelectCup table a:active {
		color: white;
		background: #cc317f;
	}

}