@charset "utf-8";

/******************************
ローディング & フェードイン
******************************/
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  /* ★3秒後にフェードアウトアニメーションを開始 */
  /* fadeOutアニメーションを 0.5秒かけて、3秒待ってから実行し、最後の状態を維持する */
  animation: fadeOut 0.5s ease-in-out 3s forwards;
}
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #ff8c00;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.5s linear infinite;
}
#loader-wrapper p {
  margin-top: 20px;
  font-size: 1.1em;
  color: #555;
  font-weight: bold;
}
#result-content {
  /* ★最初は非表示 */
  opacity: 0;
  /* ★ここがポイント：3秒後にフェードインアニメーションを開始 */
  /* fadeInアニメーションを 1秒かけて、3秒待ってから実行し、最後の状態を維持する */
  animation: fadeIn 1.0s ease-in-out 3s forwards;
}
/* --- キーフレームアニメーションの定義 --- */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; z-index: -1; /* アニメーション後に非表示にする */ }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/******************************
診断フォーム
******************************/
form.numerologyForm{
display:block;
overflow:hidden;
width:100%;
margin:1.5rem 0 0 0;
padding:0 2rem 2rem 2rem;
border:5px #33cccc solid;
}
form.numerologyForm p{
display:flex;
justify-content:space-between;
}
form.numerologyForm p img{
width:calc(100% / 12);
}

form.numerologyForm table,
form.numerologyForm th,
form.numerologyForm td{
text-align:left;
margin:0;
padding:0;
border:0;
background:none;
white-space:nowrap;
}
form.numerologyForm th{
font-size:1rem;
padding:1rem 0 0 0;
}

form.numerologyForm th.partner,
form.numerologyForm tfoot th{
padding-top:2rem;
}

@media all and (max-width:650px){
	form.numerologyForm{
		padding:0 1rem 1rem 1rem;
	}
}

form.numerologyForm input[type=text],
form.numerologyForm input[type=number],
form.numerologyForm select,
form.numerologyForm button{
font-size:1rem;
margin:0;
padding:0 .5rem;
width:100%;
height:3rem;
line-height:1;
border:1px #ccc solid;
}
form.numerologyForm select{
max-width:50%;
background:#fff;
}
form.numerologyForm button{
font-size:1rem;
font-weight:bold;
border:1px #33cccc solid;
background:#33cccc;
color:#333;
}
form.numerologyForm button:hover{
border:1px #33cccc solid;
background:#33cccc;
color:#fff;
}

/******************************
結果表示
******************************/
.result{
display:flex;
align-items:center;
margin:1.5rem 0 0 0;
padding:0;
background-image:url('https://kokoro.wdeco.jp/_/files/medias/app_numerology/yoko-intro.webp');
background-position:center center;
background-size:cover;
}
.result div{
text-align:center;
font-size:2rem;
font-weight:bold;
margin:2rem 0;
width:100%;
padding:1rem;
background:rgba(255,255,255,.5);
}
.result div span{
display:block;
font-size:1rem;
text-align:center;
}

.numeroTable{
display:block;
overflow:hidden;
width:100%;
}
.numeroTable thead th{
font-size:1.1rem;
background:#33cccc;
}
@media all and (max-width:650px){
	.numeroTable thead th{
		font-size:.9rem;
	}
}
.numeroTable table{
table-layout:fixed;
}
.numeroTable th,
.numeroTable td{
text-align:center;
}
.numeroTable span{
text-align:center;
display:inline-block;
}
.numeroTable img{
width:50px;
}


div.intList{
}
div.intList p{
text-align:center;
font-size:.9rem;
font-weight:bold;
margin:1rem 0 .5rem 0;
border-bottom:1px #ccc dashed;
}
div.intList ul{
display:flex;
justify-content:space-between;
gap:1rem;
list-style:none;
margin:1rem 0 0 0;
padding:0;
line-height:1;
}
div.intList li{
list-style:none;
text-align:center;
margin:0 auto;
padding:0;
}
div.intList img{
display:block;
width:100%;
}

h4 img{
height:3rem;
margin-right:5px;
}
h4 img.right{
height:25%;
}

/******************************
解説
******************************/
details.toclist{
margin:2rem 0 0 0;
padding:0;
background:none;
border:0;
border-top:3px #ccc solid;
}
details.toclist a{
font-weight:bold;
text-align:right;
text-decoration:underline;
color:#0066FF;
}
details.toclist a:hover{
text-decoration:none;
}
details.toclist summary{
gap:1rem;
font-size:1.3rem;
padding:0 1rem;
height:3.5em;
background:#eee;
}
details.toclist summary h3,
details.toclist summary h4{
flex:1;
font-size:1.1rem;
line-height:1.1;
margin:0;
padding:0;
border:0;
}
details.toclist ul{
margin:0;
padding-bottom:0;
border:0;
}
details.toclist li{
color:#333;
}
/******************************
END
******************************/