@charset "UTF-8";

:root {
	--green: #004236;
	--l-green: #3a857e;
	--l-beige: #f8f4eb;
	--white: #fff;
	--type-gold: #f8d047;
	--type-wind: #b64f9d;
	--type-water: #3078c2;
	--type-earth: #8f6156;
	--type-tree: #3a807e;
	--type-fire: #e05242;
}
.forcms_block {
	background: var(--l-beige);
}
#fortune * {
	font-family: 'Noto Sans JP', sans-serif;
}
#fortune img {
	max-width: 100%;
}
#fortune br.pc {
	display: none;
}
sup {
	font-size: 70%;
	vertical-align: top;
	position: relative;
	top: -0.1em; 
	left: -0.1em;
}
.top_page {
	padding-bottom: 20vw;
}
.fortune_top {
	padding: 30px 0 0;
	animation: fadeIn 1s 1s forwards;
	opacity: 0;
}
.top_ttl {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	margin: 7vw 2vw 0;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.top_ttl_type {
	opacity: 0;
}
#top_ttl_type1 {
	animation: fadeIn 1s 1s forwards;
}
#top_ttl_type2 {
	animation: fadeIn 1s 1.4s forwards;
}
#top_ttl_type3 {
	animation: fadeIn 1s 1.8s forwards;
}
#top_ttl_type4 {
	animation: fadeIn 1s 3s forwards;
}
#top_ttl_type5 {
	animation: fadeIn 1s 2.6s forwards;
}
#top_ttl_type6 {
	animation: fadeIn 1s 2.2s forwards;
}
#top_ttl_logo {
	grid-column: 1 / 4;
	grid-row: 2;
	width: 60vw;
	margin: 1vw auto -2vw;
	opacity: 0;
	animation: fadeIn 3s 3.6s forwards;
}
#top_ttl_logo img {
	width: 100%;
}

.fadein {
	opacity: 0;
	transition: 1.5s;
}
.fadein.inview-show {
	opacity: 1;
}
.top_txt {
	font-size: 3.6vw;
	font-weight: 500;
	line-height: 2;
	text-align: center;
	margin-top: 10vw;
}
.top_content {
	width: 88vw;
	margin: 60px auto 0;
}
.top_content .theme_ttl {
	background: var(--l-green);
	padding: 10px 0;
	margin-bottom: 20px;
	color: var(--white);
	font-size: 4vw;
	font-weight: bold;
	text-align: center;
}
.top_content p {
	font-size: 3.5vw;
	line-height: 2;
	text-align: center;
	padding-top: 4.7vw;
	font-feature-settings: "palt";
}
.top_content .sub_ttl{
	font-size: 3.8vw;
	font-weight: 700;
	line-height: 1.77;
	text-align: center;
}
.keyword_wrap h3 {
	display: flex;
	align-items: center;
	font-size: 3.8vw;
	font-weight: 700;
	gap: 5vw;
	margin: 12vw auto 6vw;
}
.keyword_wrap h3::before,
.keyword_wrap h3::after {
	content: "";
	flex: 1;
	display: block;
	height: 1px;
	background-color: #333;
}
.keyword_list {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.keyword_list .keyword_item:first-child {
	grid-column: 1 / 3;
	margin: 0 auto;
}
.keyword_list .keyword_item {
	width: 43vw;
}
.lucky_item {
	width: 80vw;
	margin: 18vw auto 18vw;
	background-color: #ede5d9;
	border: 2px solid #a8845a;
}
.lucky_item > .theme_ttl {
	background-color: #a8845a;
	position: relative;
	margin-bottom: 0;
}
.lucky_item > .theme_ttl::after {
	content: "";
	display: inline-block;
	background-image: url("/img/usr/products/i/251226_fortune/lucky_item_bg.png");
	background-repeat: repeat;
	background-size: 100%;
	background-position: center;
	mix-blend-mode: plus-lighter;
	position: absolute;
	inset: 0;
	opacity: .2;
}
.lucky_item_wrap {
	padding: 7vw;
}
.lucky_item_wrap .lucky_item_desc {
	text-align: justify;
	font-feature-settings: "palt";
	padding: 5vw 0;
} 
.check_box {
	padding-top: 18vw;
	border-top: 1px solid var(--green);
}
.check_ttl {
	color: var(--green);
	font-size: 5.2vw;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
.input_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 80vw;
	margin: 8vw auto 0;
}
.input_box .input_select {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.input_box select {
	appearance: none;
	border: 1px solid #7b786f;
	border-radius: 0;
	outline: none;
	background: transparent;
	width: 32.3vw;
	margin: 0;
	padding: 15px 6vw;
	margin-right: 5%;
	color: #999;
	font-size: 4.2vw;
}
.input_box .input_select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10vw;
	transform: translateY(-50%);
	width: 3.5vw;
	height: 3vw;
	background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22451.8px%22%20height%3D%22257.6px%22%20viewBox%3D%220%200%20451.8%20257.6%22%20style%3D%22enable-background%3Anew%200%200%20451.8%20257.6%3B%22%20xml%3Aspace%3D%22preserve%22%20%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%237B786F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M225.9%2C257.6c-8.1%2C0-16.2-3.1-22.4-9.3L9.3%2C54C-3.1%2C41.7-3.1%2C21.6%2C9.3%2C9.3C21.6-3.1%2C41.7-3.1%2C54%2C9.3%20l171.9%2C171.9L397.8%2C9.3c12.4-12.4%2C32.4-12.4%2C44.7%2C0c12.4%2C12.4%2C12.4%2C32.4%2C0%2C44.8L248.3%2C248.3C242.1%2C254.5%2C234%2C257.6%2C225.9%2C257.6z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center center / 100%;
	pointer-events: none;
}
.input_box span {
	font-size: 4vw;
	font-weight: 700;
	text-align: right;
}
#check_year {
	width: 100%;
	margin-bottom: 20px;
}
#check_year select {
	width: 74vw;
	margin-right: 0.1%;
}
#check_month, #check_day {
	width: 48%;
}
.input_box input {
	appearance: none;
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
	cursor: pointer;
}
#check_submit {
	width: 100%;
	margin-top: 35px;
}
#check_submit input {
	width: 100%;
	padding: 13px 0 11px;
	background: var(--green);
	border-radius: 100vw;
	color: var(--l-beige);
	font-size: 6vw;
	font-weight: 900;
	line-height: 1;
}
#check_submit input:hover {
	background: #d6ce4b;
	color: var(--green);
}

.profile_box {
	width: 88vw;
	margin: 20vw auto 0;
	padding: 8vw 0;
	border-top: 1px solid #7b786f;
	border-bottom: 1px solid #7b786f;
}
.profile_detail {
	margin-top: 15px;
}
.profile_name {
	font-size: 4.5vw;
}
.profile_name > small {
	font-size: 3vw;
}
.profile_txt {
	font-size: 3vw;
	line-height: 1.8;
	text-align: justify;
	text-justify: inter-ideograph;
	margin-top: 5px;
	font-feature-settings: "palt";
	letter-spacing: 0.06em;
}
.fortune_inner {
	padding: 0 0 15vw;
}
.main_img {
	padding: 50px 40px 50px;
	text-align: center;
	margin-bottom: 18vw;
}
.result_type > img {
	width: auto;
	height: 16vw;
	margin-bottom: 1vw;
}
.result_type .result_type_ja {
	color: var(--white);
}
.result_type .result_type_ja > span {
	color: var(--white);
	font-size: 6vw;
	font-weight: 700;
	padding-right: 0.5vw;
}
.result_img {
	margin: 6vw 0;
}
#type_tree .main_img {
	background: var(--type-tree);
}
#type_fire .main_img {
	background: var(--type-fire);
}
#type_wind .main_img {
	background: var(--type-wind);
}
#type_gold .main_img {
	background: var(--type-gold);
}
#type_water .main_img {
	background: var(--type-water);
}
#type_earth .main_img {
	background: var(--type-earth);
}
.main_logo {
	width: 40vw;
	margin: 0 auto;
}
.main_logo img {
	vertical-align: bottom;
}
.result_ttl {
	width: 73.125vw;
	margin: 20px auto 0;
}
.type_box {
	width: 80vw;
	margin: 40px auto 0;
}
.result_box + .result_box {
	margin-top: 10vw;
}

#result_fortune .type_wrap + .type_wrap {
	margin-top: 10vw;
}
#result_item .type_wrap + .type_wrap {
	margin-top: 15vw;
}
#result_item, #result_personality, #result_action {
	margin-top: 15vw;
}
.type_ttl {
	padding: 2vw 0 2vw;
	color: var(--l-beige);
	font-size: 4.4vw;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	margin-bottom: 7vw;
}
#type_tree .type_ttl {
	background: var(--type-tree);
}
#type_fire .type_ttl {
	background: var(--type-fire);
}
#type_wind .type_ttl {
	background: var(--type-wind);
}
#type_gold .type_ttl {
	background: var(--type-gold);
}
#type_water .type_ttl {
	background: var(--type-water);
}
#type_earth .type_ttl {
	background: var(--type-earth);
}
.type_ttl small {
	font-size: 4vw;
}
.result_desc {
	font-size: 3.5vw;
	font-weight: bold;
	line-height: 1.8;
	margin-bottom: 3vw;
	margin-top: 0;
}
#type_tree .result_desc {
	color: var(--type-tree);
}
#type_fire .result_desc {
	color: var(--type-fire);
}
#type_wind .result_desc {
	color: var(--type-wind);
}
#type_gold .result_desc {
	color: var(--type-gold);
}
#type_water .result_desc {
	color: var(--type-water);
}
#type_earth .result_desc {
	color: var(--type-earth);
}
.type_box p {
	font-size: 3.5vw;
	line-height: 1.8;
	text-align: justify;
	text-justify: inter-ideograph;
}
.flex_container {
	display: flex;
	flex-wrap: wrap;
	margin: 12vw 0 0;
}
.item_detail + .item_detail {
	margin-top: 5vw;
}
.item_wrap {
	text-align: center;
	margin-top: 12vw;
}
.item_wrap img {
	width: 55%;
	margin: 0 auto;
}
.item_inner + .item_inner {
	margin-top: 24vw;
}
.item_inner .category {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.item_inner .category > p {
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	display: inline-block;
	width: auto;
	height: 4.4vw;
	color: transparent;
}
.item_inner .category.body > p {
	mask-image: url(/img/usr/products/i/251226_fortune/text_body.svg);
	aspect-ratio: 141.85 / 36.5;
}
.item_inner .category.face > p {
	mask-image: url(/img/usr/products/i/251226_fortune/text_face.svg);
	aspect-ratio: 125.27 / 36.45;
}
.item_inner .category.fragrance > p {
	mask-image: url(/img/usr/products/i/251226_fortune/text_fragrance.svg);
	aspect-ratio: 298.12 / 36.45;
}
.item_inner .category::before {
	content: "";
	display: block;
	height: 0.25vw;
	flex: 1;
}
.item_inner .category::after {
	content: "";
	display: block;
	height: 0.25vw;
	flex: 1;
}

#type_earth .item_inner .category > p,
#type_earth .item_inner .category::before,
#type_earth .item_inner .category::after {
	background-color: var(--type-earth);
}
#type_fire .item_inner .category > p,
#type_fire .item_inner .category::before ,
#type_fire .item_inner .category::after {
	background-color: var(--type-fire);
}
#type_water .item_inner .category > p,
#type_water .item_inner .category::before ,
#type_water .item_inner .category::after {
	background-color: var(--type-water);
}
#type_tree .item_inner .category > p,
#type_tree .item_inner .category::before ,
#type_tree .item_inner .category::after {
	background-color: var(--type-tree);
}
#type_wind .item_inner .category > p,
#type_wind .item_inner .category::before ,
#type_wind .item_inner .category::after {
	background-color: var(--type-wind);
}
#type_gold .item_inner .category > p,
#type_gold .item_inner .category::before ,
#type_gold .item_inner .category::after {
	background-color: var(--type-gold);
}
.item_img {
	margin-bottom: 3vw;
}
.item_name {
	font-size: 3.8vw;
	font-weight: 900;
	padding-bottom: 1vw;
}
.type_box .item_price {
	font-size: 3.6vw;
	text-align: center;
}
.type_box .item_price small {
	font-size: 2.8vw;
}
.type_box .item_price > span + span {
	margin-left: 2.5vw;
}
.type_box .item_txt {
	width: 86%;
	margin: 3vw auto 0;
	font-size: 3.2vw;
}
.type_box .item_txt.txt_column {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 100%;
}
.type_box .item_txt.txt_column > p {
	width: 48%;
}
.item_btn a {
	display: block;
	padding: 2vw 0 2.6vw;
	border-width: 2px;
	border-style: solid;
	border-radius: 100vw;
	font-size: 3.6vw;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	box-sizing: border-box;
	margin: 6vw auto 0;
	width: 46vw;
}
#type_tree .item_btn a {
	color: var(--type-tree);
	border-color: var(--type-tree);
}
#type_fire .item_btn a {
	color: var(--type-fire);
	border-color: var(--type-fire);
}
#type_wind .item_btn a {
	color: var(--type-wind);
	border-color: var(--type-wind);
}
#type_gold .item_btn a {
	color: var(--type-gold);
	border-color: var(--type-gold);
}
#type_water .item_btn a {
	color: var(--type-water);
	border-color: var(--type-water);
}
#type_earth .item_btn a {
	color: var(--type-earth);
	border-color: var(--type-earth);
}
.type_wrap .item_note {
	margin-top: 12vw;
}
.type_wrap .item_note p{
	font-size: 2.8vw;
	line-height: 1.6;
}
.txt_credit {
	width: 80vw;
	margin: 5vw auto 0;
	font-size: 3vw!important;
	text-align: right !important;
}
.top_btn a {
	display: block;
	width: 60vw;
	margin: 15vw auto 0;
	background: var(--l-green);
	color: var(--l-beige);
	padding: 2vw 0;
	border-radius: 100vw;
	font-size: 3.6vw;
	font-weight: 700;
	text-align: center;
	box-sizing: border-box;
}