body {
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	font-style: normal;
	
	width: 100%;
	height: 100svh;
}
.wrap2 {
	width: 100%;
	height: 100svh;

	background-image: url('../images/bg_kumo.svg');
	background-position: 0 0;
	background-repeat: repeat;
}
.color01 { background-color: #fdeff2; }
.color02 { background-color: #f8f4e6; }
.color03 { background-color: #eaf4fc; }
.color04 { background-color: #eff5d7; }
.color05 { background-color: #e8ecef; }
.wrap1 {
	width: 100%;
	height: 100svh;
	/* overflow-x: hidden; */
	
	position: relative;
	z-index: 1;
}
.wrap1.result::before,
.wrap1.result::after {
    display: inline-block;
	width: 100%;
	height: 100%;
	content: '';
	
	position: absolute;
	top: 0;
	left: 0;
	
	background-repeat: no-repeat;
	background-size: 40vh;
	
	z-index: -1;
}
.wrap1.result::before {
	background-image: url('../images/bg_wrapper_left.png');
	background-position: top left;
}
.wrap1.result::after {
	background-image: url('../images/bg_wrapper_right.png');
	background-position: bottom right;
}

.figure_omikuji,
.wrap_btn {
	width: 100%;
	height: 100svh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.figure_omikuji img {
	width: 60vw;
	max-width: 300px;
	filter: drop-shadow(0px 0px 6px rgba(255,255,255,0.8));
}

h1,h2 {
	writing-mode: vertical-rl;
	text-orientation: mixed;

	color: #000000;
}
/* --- 基準値 vw = 基準フォントサイズ / 600px × 100 --- */
h1 {
	font-family: 'Zen Antique', serif;
	font-size: clamp(40px, 6.66vw, 72px);
	font-weight: 400;
		
	position: absolute;
	top: 5%;
	right: 15%;
}
h2 {
	font-family: 'Kaisei Tokumin', serif;
	font-size: clamp(30px, 5.00vw, 50px);
	font-weight: 700;
	
	position: absolute;
	bottom: 5%;
	left: 15%;
}
@media screen and (min-width: 581px) and (max-width: 800px) {
	h1 { right: 10%; }
	h2 { left: 10%; }
}
@media screen and (max-width: 580px) {
	h1 { right: 5%; }
	h2 { left: 5%; }
}


/*------------------------------------------------------*/
.figure_tobetsu {
	/* width: 135px; */
	/* height: 135px; */
	width: clamp(135px, 19.28vw, 180px);
	height: auto;
	
	position: absolute;
	bottom: 2.5%;
	right: calc(15% - 40px);
	
	animation: yurayura 2.0s ease-in-out infinite;
}

@keyframes yurayura {
	0%  {transform: rotate(0deg); }
	50% {transform: rotate(12deg); }
	100% {transform: rotate(0deg); }
}

.figure_tobetsu img {
	width: 100%;
	height: 100%;
	filter: drop-shadow(3px 3px 4px #444444);
}
@media screen and (min-width: 581px) and (max-width: 800px) {
	.figure_tobetsu { right: calc(10% - 40px); }
}
@media screen and (max-width: 580px) {
	.figure_tobetsu { right: 4%; }
}


/*------------------------------------------------------*/
.btn_start {
	display: flex;
	justify-content: center;
	align-items: center;

	box-sizing: border-box;
	width: 60%;
	max-width: 220px;
	padding: 20px;
	border-radius: 50%;
	
	font-family: 'Kaisei Tokumin', serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	/* color: rgba(153, 3, 18, 1.0); */
	/* text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); */
	color: rgba(255, 255, 255 ,1.0);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
	overflow: hidden;
	
	background-color: rgba(230, 5, 27, 1.0);
	background-image: url('../images/bg_btn_start_w.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: 0 5px 8px rgba(128, 3, 15, 0.6);
	border: 5px solid rgba(230, 5, 27, 1.0);
	
	transition: 0.5s;
	position: relative;
	
	animation: pushpush 3.0s ease infinite;
}
.btn_start::before {
	content: '';
	display: block;
	padding-top: 100%;
}
.btn_start:hover,
.btn_start:active {
	background-color: rgba(227, 68, 84, 1.0);
}

@keyframes pushpush {
	0% { transform: scale(1); box-shadow: 0 5px 8px rgba(128, 3, 15, 0.6); }
	6% { transform: scale(0.95); box-shadow: 0 0 8px rgba(128, 3, 15, 0.6); }
	12% { transform: scale(1); box-shadow: 0 5px 8px rgba(128, 3, 15, 0.6); }
	18% { transform: scale(0.95); box-shadow: 0 0 8px rgba(128, 3, 15, 0.6); }
	30% { transform: scale(1); box-shadow: 0 5px 8px rgba(128, 3, 15, 0.6); }
	100% { transform: scale(1); box-shadow: 0 5px 8px rgba(128, 3, 15, 0.6); }
}


/*------------------------------------------------------*/
body.fadein {
	opacity: 0;
	animation: fadein 2.0s ease-in forwards;
}

@keyframes fadein {
	0% { opacity: 0; }
	35% { opacity: 0; }
	100% { opacity: 1; }
}


/*------------------------------------------------------*/
.wrap_loadership {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column nowrap;
	
	width: 100%;
	height: 100svh;
	
	background-color: #ffffff;
	position: absolute;
	/* z-index: 20; */
}
.loadership {
	display: block;
	position: relative;
	width: 70px;
	height: 70px;
}
.loadership div {
	animation: loadership_roller 1.83s infinite;
	animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
	transform-origin: 35px 35px;
}
.loadership div::after {
	content: '';
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #e2041b;
}
.loadership div:nth-child(1) { animation-delay: 0.00s; }
.loadership div:nth-child(1)::after {
	top: 60px;
	left: 30px;
}
.loadership div:nth-child(2) { animation-delay: -0.07s; }
.loadership div:nth-child(2)::after {
	top: 54px;
	left: 48px;
}
.loadership div:nth-child(3) { animation-delay: -0.13s; }
.loadership div:nth-child(3)::after {
	top: 39px;
	left: 59px;
}
.loadership div:nth-child(4) { animation-delay: -0.20s; }
.loadership div:nth-child(4)::after {
	top: 21px;
	left: 59px;
}
.loadership div:nth-child(5) { animation-delay: -0.26s; }
.loadership div:nth-child(5)::after {
	top: 6px;
	left: 48px;
}
.loadership div:nth-child(6) { animation-delay: -0.33s }
.loadership div:nth-child(6)::after {
	top: 0;
	left: 30px;
}
.loadership div:nth-child(7) { animation-delay: -0.40s }
.loadership div:nth-child(7)::after {
	top: 6px;
	left: 12px;
}
.loadership div:nth-child(8) { animation-delay: -0.46s }
.loadership div:nth-child(8)::after {
	top: 21px;
	left: 1px;
}
.loadership div:nth-child(9) { animation-delay: -0.53s }
.loadership div:nth-child(9)::after {
	top: 39px;
	left: 1px;
}
.loadership div:nth-child(10) { animation-delay: -0.59s }
.loadership div:nth-child(10)::after {
	top: 54px;
	left: 12px;
}
@keyframes loadership_roller {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loadertext {
	display: inline-block;
	color: #e2041b;
	margin-top: 30px;
	font-size: 1.1em;
	font-weight: 500;
	
	clip-path: inset(0 100% 0 0);
	animation: loadertext 4.0s ease-out infinite;
}
@keyframes loadertext {
	0% { clip-path: inset(0 100% 0 0); }
	15% { clip-path: inset(0 0 0 0); }
	70% { clip-path: inset(0 0 0 0); }
	85% { clip-path: inset(0 0 0 100%); }
	100% { clip-path: inset(0 0 0 100%); }
}

.fadein2_1 {
	opacity: 1;
	animation: fadein2_1 5.0s ease-in forwards;
}
@keyframes fadein2_1 {
	0% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}

.fadein2_2 {
	opacity: 0;
	animation: fadein2_2 10.0s ease-in forwards;
}
@keyframes fadein2_2 {
	0% { opacity: 0; }
	55% { opacity: 0; }
	70% { opacity: 1; }
	100% { opacity: 1; }
}

.fadein2_3::before,
.fadein2_3::after {
	opacity: 0;
	animation: fadein2_3 10.0s ease-in forwards;
}
@keyframes fadein2_3 {
	0% { opacity: 0; }
	60% { opacity: 0; }
	75% { opacity: 1; }
	100% { opacity: 1; }
}

.fadein2_4 {
	opacity: 0;
	animation: fadein2_4 10.0s ease-in forwards;
}
@keyframes fadein2_4 {
	0% { opacity: 0; }
	75% { opacity: 0; }
	90% { opacity: 1; }
	100% { opacity: 1; }
}

.fadein2_5 {
	opacity: 0;
	animation: fadein2_5a 10.0s ease-in forwards;
}
@keyframes fadein2_5a {
	0% { opacity: 0; }
	75% {
		opacity: 0;
		transform: rotateY(180deg);
		background-image: url('../omikuji/omikuji-ura.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: auto 35%;
		}
	90% {
		opacity: 1;
		transform: rotateY(0deg);
		background: none;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: auto 60%;
		}
	100% { opacity: 1; }
}
.fadein2_5 img {
	opacity: 0;
	animation: fadein2_5b 10.0s ease-in forwards;
}
@keyframes fadein2_5b {
	0% { opacity: 0; }
	83% { opacity: 0; }
	90% { opacity: 1; }
	100% { opacity: 1; }
}

.fadein2_6 {
	opacity: 0;
	animation: fadein2_6 10.0s ease-in forwards;
}
@keyframes fadein2_6 {
	0% { opacity: 0; }
	90% { opacity: 0; }
	100% { opacity: 1; }
}



/*------------------------------------------------------------------*/
/*--- 詳細ボタン ---------------------------------------------------*/
.wrap_btn_detail {
	position: absolute;
	bottom: 3%;
	left: 50%;
	transform: translateX(-50%);
}
.btn_detail {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;

	box-sizing: border-box;
	width: 170px;
	height: 60px;
	border-radius: 30px;
	
	font-family: 'Kaisei Tokumin', serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	/* color: rgba(153, 3, 18, 1.0); */
	/* text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); */
	color: rgba(255, 255, 255 ,1.0);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
	overflow: hidden;
	
	background-color: rgba(230, 5, 27, 1.0);
	background-image: url('../images/bg_btn_detail_w.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 5px 8px rgba(128, 3, 15, 0.6);
	border: 5px solid rgba(230, 5, 27, 1.0);
	
	transition: 0.5s;
	
	animation: pushpush 3.0s ease infinite;
}
.btn_detail span {
	font-size: 15px;
	font-weight: 500;
}
.btn_detail:hover,
.btn_detail:active {
	background-color: rgba(227, 68, 84, 1.0);
}

/*--- 詳細ボタンの高さ分、おみくじを上に -------------------*/
.figure_omikuji:has(~ .wrap_btn_detail) {
	position: absolute;
	top: -30px;
}


/*------------------------------------------------------------------*/
/*--- 詳細ページ ---------------------------------------------------*/
.wrap_detail {
	width: 100%;
	min-height: 100svh;	/**/
	
	display: flex;
	justify-content: center;
	
	padding: 60px 0;

	background-image: url('../images/bg_kumo.svg');
	background-position: 0 0;
	background-repeat: repeat;
}
table.table_detail {
	width: 78%;
	max-width: 700px;
	height: fit-content;	/**/
	border-collapse: collapse;
	background-color: #ffffff;
	border: 2px solid rgba(230, 5, 27, 1.0);
	color: rgba(230, 5, 27, 1.0);
	text-align: center;
	line-height: 1.4;
	
	position: relative;
	z-index: 1;
}
table.table_detail::before {
	content: '';
	display: block;
	background-color: #ffffff;
	
	position: absolute;
	top: -22px;
	bottom: -22px;
	right: -22px;
	left: -22px;
	z-index: -1;
}
@-moz-document url-prefix() {	/* for Firefox */
    table.table_detail::before {
        background-color: transparent;
    }
}
table.table_detail::after {
	content: '';
	display: block;
	/* background-color: #ffffff; */
	border: 5px solid rgba(230, 5, 27, 1.0);
	
	position: absolute;
	top: -10px;
	bottom: -10px;
	right: -10px;
	left: -10px;
	z-index: -1;
}
table.table_detail th,
table.table_detail td {
	padding: 20px 5px;
}
td.omikuji_name,
td.jinja_name,
td.fortune {
	font-family: 'Zen Antique', serif;
	line-height: 1.2;
	
	border-bottom: 1px dotted rgba(230, 5, 27, 1.0);
}
td.omikuji_name,
td.jinja_name {
	font-size: clamp(30px, 5.00vw, 50px);
	font-weight: 400;
}
td.fortune {
	font-size: clamp(40px, 6.67vw, 62px);
	font-weight: 600;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
}
td.advice {
	text-align: left;
}
td.advice dl {
	font-size: clamp(18px, 3.00vw, 24px);
	margin: 10px 20px;
}
td.advice dl dt {
	font-weight: 800;
	letter-spacing: 0.2em;
}
td.advice dl dd {
	color: #000000;
	font-weight: 500;
	margin: 0.3em 0 1.5em 0;
}

.fadein3 {
	opacity: 0;
	animation: fadein3 2.0s ease-in forwards;
}
@keyframes fadein3 {
	0% { opacity: 0; }
	35% { opacity: 0; }
	100% { opacity: 1; }
}



/*------------------------------------------------------------------*/
/*--- 404ページ ----------------------------------------------------*/
.wrap_404 {
	width: 100%;
	height: 100svh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.section_404 {
	width: 80vw;
	max-width: 600px;
}
.section_404 > figure {
	width: 60%;
	max-width: 300px;
	margin: 0 auto 50px;
}
.section_404 > figure img {
	width: 100%;
	height: 100%
}
.section_404 > h1 {
	writing-mode: horizontal-tb;
	color: #666666;
	text-align: center;
	line-height: 1.3;
	position: relative;
	top: auto;
	right: auto;
	margin-bottom: 50px;
}
.section_404 > p {
	color: #666666;
	font-size: clamp(18px, 3.00vw, 24px);
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
}