@charset "UTF-8";

:root {
	--oshikatsu-color-main: #9a6adb;
	--oshikatsu-color-sub: #9ae7c4;
	--oshikatsu-color-key: #ffff3f;
	--oshikatsu-color-black: #524b58;
	--oshikatsu-color-white: #fff;
	--oshikatsu-color-navbg: #f182a5;
}


#jp-oshikatsu {
    display: flex;
    flex-direction: column;
    gap: 24px;
	font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", sans-serif;
	color: var(--oshikatsu-color-black);

	.jp-oshikatsu-header__title {

		.jp-oshikatsu-header__lead {
			padding: 20px;
			text-align: center;
			font-size: 20px;
			font-weight: bold;
		}

	}

	.jp-oshikatsu-content {

		.jp-oshikatsu-content__title {
			display: block;
			margin: var(--u-spacing-4) auto;
			padding: var(--u-spacing-5);
			color: var(--oshikatsu-color-white);
			font-size: var(--u-text-lg);
			text-align: center;
			background: var(--oshikatsu-color-main);
			box-shadow: 5px 5px 0 color-mix(in srgb, var(--oshikatsu-color-main), var(--oshikatsu-color-white) 50%);
		}

		.jp-oshikatsu-content__title2 {
			display: flex;
			margin: var(--u-spacing-4) auto;
			justify-content: center;
			align-items: center;
			gap: var(--u-spacing-4);
			font-size: 24px;
			line-height: 1.25em;
			&::before,
			&::after {
				content: "";
				display: inline-block;
				width: 70px;
				height: 2px;
				border-top: solid 1px var(--oshikatsu-color-main);
				border-bottom: solid 1px var(--oshikatsu-color-main);
				@media screen and (max-width: 768px) {
					width: 50px;
				}
			}
		}

		.jp-oshikatsu-content____link {
			display: flex;
			justify-content: center;
			align-items: stretch;
			flex-wrap: wrap;
			gap: 10px;
		}

		.jp-oshikatsu-content__banner {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 20px;
			a{
				display: flex;
				justify-content: center;
				img {
					max-width: 640px;
					@media screen and (max-width: 768px) {
						max-width: 90%;
					}
				}
			}
		}

		.jp-oshikatsu-content__ranking {
			ul {
				display: flex;
				justify-content: space-between;
				align-items: stretch;
				flex-wrap: wrap;
				gap: 20px 0;
			}

			ul>li {
				width: 49%;
				border-radius: 5px;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
				@media screen and (max-width: 768px) {
					width: 100%;
				}

				&.wide {
					width: 100%;
				}

				h4 {
					display: flex;
					padding: 16px;
					justify-content: center;
					align-items: center;
					gap: 10px;
					background: var(--oshikatsu-color-sub);
					color: var(--oshikatsu-color-black);
					font-size: var(--u-text-base);
					font-weight: bold;
					text-align: center;
					border-radius: 4px 4px 0 0;

					&::before,
					&::after {
						content: "\f005";
						font-family: FontAwesome;
						color: var(--oshikatsu-color-key);
					}
				}

				ol {
					counter-reset: number;
					margin: 10px;
					display: flex;
					justify-content: space-between;
					align-items: start;
					flex-wrap: wrap;

					li {
						position: relative;
						width: 100%;
						padding: 16px 16px 16px 44px;
						margin-bottom: 8px;
                        display: flex;
                        align-items: center;
                        min-height: 3em;
                        line-height: 1.5em;
						border-radius: 50px;
						background: color-mix(in srgb, var(--oshikatsu-color-sub), #fff 80%);

						&::before {
                            background-color: var(--oshikatsu-color-main);
                            color: var(--oshikatsu-color-white);
                            position: absolute;
                            left: 10px;
                            top: 50%;
                            transform: translateY(-50%);
                            display: block;
                            counter-increment: number;
                            content: counter(number);
                            font-weight: bold;
                            font-size: 14px;
                            border-radius: 50%;
                            width: 28px;
                            height: 28px;
                            line-height: 28px;
                            text-align: center;
						}

						&:nth-of-type(n+11) {
							margin: 0;
							border-bottom: 1px dashed #cdcdcd;
							background-color: transparent;
							border-radius: 0;
						}

						&:nth-of-type(n+11):before {
							background: color-mix(in srgb, var(--oshikatsu-color-main), #fff 80%);
							color: var(--oshikatsu-color-main);
						}

						&:nth-of-type(n+11):last-child {
							border: 0;
						}

						span {
							margin-left: 0.5em;
							font-size: 12px;
						}

					}

				}


			}
		}

		.jp-oshikatsu-content__point {
			padding: 1rem 1rem;
			text-align: left;
			border-radius: 10px;
			background: color-mix(in srgb, var(--oshikatsu-color-main), #fff 80%);
			margin-bottom: 15px;
			h4 {
				position: relative;
				font-size: 1.1em;
				font-weight: bold;
				padding-top: 0.3em;
				padding-bottom: 0.3em;
				padding-left: 40px;
				margin-bottom: 0.5em;
				position: relative;
				color: var(--oshikatsu-color-main);
				text-shadow: 0 0 5px var(--oshikatsu-color-white);
				&::before {
					position: absolute;
					font-family: FontAwesome;
					content: "\f005";
					top: 50%;
					left: 0;
					width: 28px;
					height: 28px;
					padding: 0em;
					border-radius: 50%;
					text-align: center;
					line-height: 28px;
					background-color: var(--oshikatsu-color-main);
					color: var(--oshikatsu-color-white);
					text-shadow: 0 0 3px var(--oshikatsu-color-white);
					transform: translateY(-50%);
					text-shadow: none;
				}
				&::after {
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					left: 23px;
					height: 0;
					width: 0;
					border-top: 5px solid transparent;
					border-bottom: 5px solid transparent;
					border-left: 12px solid var(--oshikatsu-color-main);
					transform: translateY(-50%);
					text-shadow: none;
				}
			}

		}

	} /* .jp-oshikatsu-content  */


}
/* #jp-oshikatsu  */