@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.page-id-15 #toc{
  display: none;
}
.result-title{
  padding-top:30px;
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  width: 100%;
  color:#FD027C;
}
.form-birth,
.form-birth .year,
.form-birth .month,
.form-birth .date{
  display: flex;
  justify-content: center;
  align-items: center;
}
/* HTML: <div class="loader"></div> */
.loader-area {
  width: 100%;
  text-align: center;
  margin:20px 0;
}
.loading-text{
  font-weight: bold;
  margin:0 0 10px 0;
  padding:0;
}
/* 点滅 */
.loading-text {
  animation: blinking 1s ease-in-out infinite alternate;
  color:#FD027C;
  }
  
  @keyframes blinking {
  0% {opacity: 0;}
  100% {opacity: 1;}
  }

.loader {
  margin:auto;
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #FF8080;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}


h3.uranai {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border:none;
  border-left: solid 5px #FF8080;/*左線（実線 太さ 色）*/
  margin:0;
}
h3.uranai + div {
  font-weight: normal;
  margin-bottom:30px;
  padding-left:1em;
  padding-top:0.5em;
}
.eye-catch-wrap{
  justify-content: center;
}
/* HTML: <div class="loader"></div> */
/* .loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,#FF8080 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#FF8080);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13{ 
  100%{transform: rotate(1turn)}
} */

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}