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


.property td,
.lucky-symbols td {
	text-align:center;
}

strong {
	font-weight: normal;
}

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

/* 25/05 追記 */
.for-align-width {
	width: 4em;
	/* 日本語4文字分(英語なら8文字分で、9文字目以降折り曲がるけど、色んな言語あるしとりあえず日本語ベースでいいかな… */
	/* Directio-nとかnだけ下に行くけど */
	display: inline-block;
	text-align: left;
	vertical-align: middle;
}
	.zodiac td,
	.property th, .property td,
	.lucky-symbols th, .lucky-symbols td {
		/* 翻訳対応、文字折り返し可能に */
		word-break: break-word;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}


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

.intro img {/* くちびる */
    width: 80px;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.Rank h2 strong {
	font-size: 160%;
}

.Sign figcaption
{/* values24-32px,view1024-1980px */
	font-size: clamp(1.5rem, 0.964rem + 0.84vw, 2rem);
}
.Sign figcaption strong { font-size: 200%; }/* 点数 */

.Sign th, .Sign td {
	padding: 5px;
}

.lucky-symbols th, .lucky-symbols td {
	padding: 10px 5px;
}
.lucky-symbols .color_box {/* values1-1.25rem,view1024-1980px */
	width: clamp(1rem, 0.732rem + 0.42vw, 1.25rem);
	height: clamp(1rem, 0.732rem + 0.42vw, 1.25rem);
}




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

.intro {
	border-top: 2px dotted black;
	border-bottom: 2px dotted black;
	padding: 15px 0;
	position: relative;

}
	.intro p {
		font-family: 'Sawarabi Mincho', sans-serif;
		font-style: italic;
		text-align: center;
	}
	.intro p:nth-child(1) {
		margin-bottom: 15px;
	}
	.intro img {
	    position: absolute;
	    bottom: 0;
	    right: 30px;
	    transform: rotate(-25deg);
		-moz-transform: rotate(-25deg);
		-webkit-transform: rotate(-25deg);
		opacity: 0.4;
	}

table.zodiac {
	table-layout: fixed;
	width: 100%;
	margin: 15px auto 30px;
}
	.zodiac caption {
	    line-height: 2;
	    background: #ebebeb;
	}
	.zodiac a {
		padding: 10px 5px;
		gap: 5px 10px;
	    color: #333;
	    transition: all 0.6s ease;
	    display: grid;
	    align-items: center;
    justify-items: center;
    justify-content: center;
	}
.zodiac img {
	display: block;
	width: 50px;

}

.zodiac th {
    writing-mode: vertical-rl;
    width: 30px;
    padding: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #fdfdfd;
    text-align: center;
}
	.zodiac th.Fire { background: indianred; }
	.zodiac th.Earth{ background: saddlebrown; }
	.zodiac th.Air { background: yellowgreen; }
	.zodiac th.Water{ background: steelblue; }



.gallery {
	text-align: right;
}
.gallery a {
	text-decoration: underline;
	word-break: keep-all;
}

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

#Aries, #Taurus, #Gemini, #Cancer, #Leo, #Virgo, #Libra, #Scorpio, #Sagittarius, #Capricorn, #Aquarius, #Pisces {
	width:100%;
	padding-top: 50px;/* stickPanで見えないので余白 */
}

section .Rank {
	width:100%;
    background:#ebebeb;
	border-left: solid 12.5px;
	border-bottom: solid 3px;
	border-color: gray;
	display:flex;
	vertical-align:middle;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	overflow:hidden;
	position:relative;
	gap: 16px;
}

	.Rank.gold {
		border-color: #d5ca63;
		background-image: -webkit-linear-gradient(right, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);
		background-image: linear-gradient(to right, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);
	}
	.Rank.silver {
		border-color: silver;
		background-image: -webkit-linear-gradient(right, #A5A5A5, #BABAC2, #E8E8E8, #A5A5A5, #BABAC2);
		background-image: linear-gradient(to right, #A5A5A5, #BABAC2, #E8E8E8, #A5A5A5, #BABAC2);
	}
	.Rank.bronze {
		border-color: saddlebrown;
		background-image: -webkit-linear-gradient(right, #9A6229, #9a6229, #E8E8E8, #9A6229, #9a6229);
		background-image: linear-gradient(to right, #9A6229, #9a6229, #E8E8E8, #9A6229, #9a6229);
	}


.Rank:after {/* 英字 */
	width: 30%;
    height: 100%;
    content: "";
    opacity: 0.2;
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translate( 0, -50% );
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

	#Aries .Rank:after { background-image: url('images/img_Aries_title.png'); }
	#Taurus .Rank:after { background-image: url('images/img_Taurus_title.png'); }
	#Gemini .Rank:after { background-image: url('images/img_Gemini_title.png'); }
	#Cancer .Rank:after { background-image: url('images/img_Cancer_title.png'); }
	#Leo .Rank:after { background-image: url('images/img_Leo_title.png'); }
	#Virgo .Rank:after { background-image: url('images/img_Virgo_title.png'); }
	#Libra .Rank:after { background-image: url('images/img_Libra_title.png'); }
	#Scorpio .Rank:after { background-image: url('images/img_Scorpio_title.png'); }
	#Sagittarius .Rank:after { background-image: url('images/img_Sagittarius_title.png'); }
	#Capricorn .Rank:after { background-image: url('images/img_Capricorn_title.png'); }
	#Aquarius .Rank:after { background-image: url('images/img_Aquarius_title.png'); }
	#Pisces .Rank:after { background-image: url('images/img_Pisces_title.png'); }

.Rank h2 {
	line-height: 2.25;
	margin-left: 16px;
	letter-spacing: 0.05rem;
	color: black;
	font-weight:normal;
}
.Rank h2 strong {

}
.Rank h2 strong:nth-child(1) {}
.Rank h4 {
	line-height: 2;
	font-weight:normal;
	color: black;
}

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

section .TextWrap {
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	padding: 40px 0 50px;
	gap: 20px 20px;
}
	.TextWrap .Sign {
		width: 35%;
	}
	.TextWrap .Luck {
		flex: 1;
	}
	.TextWrap .lucky-symbols {
		width:100%;
		/*flex: none; width: 100%; だけで十分なため、通常は flex: none; は不要。*/
	}

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

.Sign figure {
	width: 100%;
}
.Sign figcaption {text-align:center;}
.Sign figcaption {}
.Sign figure img {width:100%;height:auto;}
.Sign table.property {background:silver;width: 100%;}
.property th, .property td {}
.property th {width:30%;background:#ebebeb;font-weight: normal;font-style: italic;}
.property td {width:70%;background:white;word-break: keep-all;}

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


.TextWrap .Luck section {
	margin-top: 20px;
}
	.TextWrap .Luck section:first-child {
	    margin-top: 0;
	}

.TextWrap .Luck p {
	word-break:break-all;
	text-align:justify;
	padding: 0 16px;
}

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


.TextWrap table.lucky-symbols {margin-top: 20px;background:silver;}
.lucky-symbols th, .lucky-symbols td {width:25%;background:#FDFDFD;}
.lucky-symbols tr:first-child th {background:#ebebeb;line-height: 1.25;}
.lucky-symbols th {}
.lucky-symbols th img {width: 23%;vertical-align:middle;margin-right: 5px;}

.lucky-symbols td { line-height: 1.3; }
.lucky-symbols .color_box {
	border: 1px solid gray;
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
}


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

.good-luck {
	text-align: center;
	margin-bottom: 50px;
}
	.good-luck img {
		width: 100%;
		max-width: 500px;
		height: auto;
	}


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

	.zodiac caption, .zodiac a {
	    font-size: clamp(0.625rem, 4.5vw, 1.125rem);/* 18px */
	}
		.zodiac span {
			width: 5.625rem;/* 5文字分 おひつじ座 */
		}

	.gallery a {
	    font-size: 1.125rem; /* 18px */
	}

	article p,
	.Rank h2, .Rank h4,
	.Luck h3 {
		font-size: 1.125rem; /* 18px */
	}
		.Sign table.property, .lucky-symbols th, .lucky-symbols td {
		   font-size: clamp(0.625rem, 4vw, 1rem);/* 16px */
		}
			.Sign figcaption {/* 点数 */
				font-size: clamp(0.625rem, 7.5vw, 1.875rem);/* 30px */
			}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( 各種条件分岐 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/



@media screen and (orientation: landscape) {

	.zodiac a {
		grid-template-columns: auto auto;
	    grid-template-rows: 100%;
	}

}

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

@media screen and (orientation: portrait) {

	.zodiac td {
		text-align: center;
	}
	.zodiac a {
		grid-template-columns: 100%;
	    grid-template-rows: auto auto;
	}

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑（共通スタイル）↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓特殊３カラム（ノート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) {/* ２カラム共通スタイル */

	.TextWrap .Sign {
		width: 100%;
		display: flex;
        flex-direction: row;
	    gap: 0 15px;
	}
		.Sign figure {
			width: 40%;
		}
		.Sign table.property {
			flex: 1;
		}
	.TextWrap .Luck {
		flex: initial;
		width: 100%;
	}

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


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


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

@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横 */

	.TextWrap .Sign {
		width: 100%;
		display: flex;
        flex-direction: row;
	    gap: 0 15px;
	}
		.Sign figure {
			width: 40%;
		}
		.Sign table.property {
			flex: 1;
		}
	.TextWrap .Luck {
		flex: initial;
		width: 100%;
	}


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

	section .Rank {
		display: block;
		padding-top: 10px;
	}
		.Rank h2 {
			line-height: 1.3;
		}
		.Rank h4 {
			margin-left: 16px;
		}
			.Rank:after {
		        width: 40%;
		        height: 60%;
		     }

	section .TextWrap {
	    padding: 20px 0 50px;
	}
	    .TextWrap .Sign {
	        width: 100%;
	    }
		    .Sign figure {
				display: flex;
				align-items: flex-end;
				justify-content: space-evenly;
			}
		    .Sign figure img {
			    width: 60%;
			}
			.Sign table.property {
				width: 90%;
				margin: 20px auto 0;
			 }
		.TextWrap .Luck {
			flex: initial;
			width: 100%;
		}

	    .lucky-symbols th img {
	        width: 40%;
	        margin: 0 auto;
	        display: block;
	    }
			.for-align-width {
				text-align: center;
			}


} @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) {

	.zodiac a:hover { color: white; }
	.zodiac a.Fire:hover { background: indianred; }
	.zodiac a.Earth:hover { background: saddlebrown; }
	.zodiac a.Air:hover { background: yellowgreen; }
	.zodiac a.Water:hover { background: steelblue; }

}


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

@media (hover: none) {

	.zodiac a:active { color: white; }
	.zodiac a.Fire:active { background: indianred; }
	.zodiac a.Earth:active { background: saddlebrown; }
	.zodiac a.Air:active { background: yellowgreen; }
	.zodiac a.Water:active { background: steelblue; }

}