@charset "utf-8";

:root {
  --svh: 100vh;
  --color-text: var(--color-black);
  --color-bg: var(--color-white);
  --color-black: #000;
  --color-white: #fff;
  --color-gold: #d3a243;
  --ease_out: cubic-bezier(0.5, 1, 0.89, 1);
  --ease_inout: cubic-bezier(0.65, 0, 0.35, 1);
}

html {
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;  
  -webkit-piebox-sizing: border-piebox;
  piebox-sizing: border-piebox;
}
*, ::before, ::after {
  -webkit-piebox-sizing: inherit;
  piebox-sizing: inherit;
  margin: 0;
  padding: 0;
  -webkit-piebox-sizing: border-piebox;
  piebox-sizing: border-piebox
}
body {
  min-height: max(884px, 100dvh);
        }

        .glow-gold {
            text-shadow: 0 0 10px rgba(197, 157, 95, 0.5);
        }

 .magic-border {
            border: 2px solid #c59d5f;
            position: relative;
        }

        .magic-border::before,
        .magic-border::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: #c59d5f;
            transform: rotate(45deg);
        }

        .magic-border::before {
            top: -5px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
        }

        .magic-border::after {
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
        }


  
/************************
common
************************/
span {
        display: inline-block;
}
.sp_position {
  height: 100vh;
}


/* スクロールバーを非表示テスト */
/* スマホサイズ（768px以下）の設定 */
@media (max-width: 768px) {
  .hide-scrollbar {
    /* スクロールは有効にしつつバーを隠す */
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none;   /* Firefox [2, 4] */
  }

  /* Chrome, Safari, Edge(Chromium) */
  .hide-scrollbarr::-webkit-scrollbar {
    display: none; /* [3, 5] */
  }
}
/* 画面全体のスクロールバーを完全に消し去る設定 */
.hide-scrollbar {
  /* Firefox */
  scrollbar-width: none !important;
  /* IE, Edge (旧) */
  -ms-overflow-style: none !important;
}

/* Chrome, Safari, Edge (新) */
.hide-scrollbar::-webkit-scrollbar, 
.hide-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/************************
topページ
************************/
.hourglass {
            display: block;
            transform: rotate(-20deg);
            position: absolute;
            left: 25px;                /* 左からの位置指定 */
            top: -40px;                  /* 上からの位置指定 */
            filter: drop-shadow(10px 0px 10px rgb(0 0 0 / 0.2));
              }
.pen {
            display: block;
            transform: rotate(45deg);
            position: absolute;
            right: -5px;                /* 左からの位置指定 */
            bottom: 30px;                  /* 上からの位置指定 */
            filter: drop-shadow(10px 0px 10px rgb(0 0 0 / 0.2));
              }

/************************
砂時計とペン画が消える
************************/
div.hourglass {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-out 0.5s;
}
div.hourglass.hide {
  opacity: 0;
  visibility: hidden;
}
/************************
resultページ
************************/
.fixed-header {
  position: fixed; /* 要素を画面固定 */
  top: 0;          /* 上端に配置 */
  left: 100%;        /* 左端に配置 */
  width: 100%;     /* 幅を画面いっぱいにする */
  height: 100%;

  } 
.bg_img_parchment {
    background-image: url("../assets/img/paper_ln.png");
    background-size: cover;      /* 画像を崩さず要素いっぱいに拡大縮小 */
    background-repeat: no-repeat;
    width: 100%;                 /* 幅100% */
  /* min-height: 100vh; */           /* 高さを画面の高さに */
  } 

  .container {
  display: grid;
  place-items: center; /* 文字を中央寄せする場合 */
}

.container img,
.container .text {
  grid-area: 1 / 1; /* すべての要素を1行1列目（重なる位置）に配置 */
}

.text {
  z-index: 50; /* 画像より上に表示 */
}

.decorated-title {
  display: flex;                /* Flexpieboxを有効化 */
  align-items: center;          /* 垂直方向を中央揃え */
  justify-content: center;      /* 水平方向を中央揃え（お好みで） */
  gap: 15px;                    /* 画像と文字の間隔を調整 */
}

.title-icon {
  width: 30px;                  /* 画像のサイズ（任意） */
  height: auto;
}

/* Button設定 */
.container_button {
  max-width: 20rem;
  display: block;
  margin: 0 auto;
}
.share_x {
  width: 230px; /* 高さを固定 */
  height: 160px;
}
.present {
 width: 115px; /* 高さを固定 */
 height: 80px;
}
.start_over {
  
}


/* .share_x {
  width: 250px; /* 高さを固定 */
 /*  height: 180px;
} */
/* .present {
 width: 192px;  *//* 高さを固定 */
 /* height: 117px;
} */

 


 footer {
  position:fixed;
  height: 14px;
 }

 
/*------------------------------------
  pie chart1
------------------------------------*/
@media screen and (min-width: 751px) {
  .pie-chart-wrap {
    display: -webkit-piebox;
    display: -ms-flexpiebox;
    display: flex;
    -webkit-piebox-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-piebox-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.piebox {
  position: relative;
  min-width: 150px;
  width: 33.3333333333%;
  height:200px;
  display: -webkit-piebox;
  display: -ms-flexpiebox;
  display: flex;
  -webkit-piebox-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-piebox-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-piebox-orient: vertical;
  -webkit-piebox-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 750px) {
  .piebox {
    width: 100%;
  }
}
@media screen and (min-width: 751px) {
  .piebox + .piebox {
    margin-left: 20px;
  }
}
@media screen and (max-width: 750px) {
  .piebox + .piebox {
    margin-top: 20px;
  }
}
.piebox .percent {
  position: relative;
  width: 150px;
  height: 150px;
}
.piebox .percent svg {
  position: relative;
  width: 150px;
  height: 150px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.piebox .percent svg circle {
  position: relative;
  fill: none;
  stroke-width: 10;
  stroke: #fff;
  stroke-dasharray: 440;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}
.piebox .percent .number {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-piebox;
  display: -ms-flexpiebox;
  display: flex;
  -webkit-piebox-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-piebox-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #000;
}
.piebox .percent .number .title {
  font-size: 50px;
}
.piebox .percent .number .title span {
  font-size: 22px;
}
.piebox .text {
  padding: 10px 0 0;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}
 .text {

  text-align: center;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
}
.piebox .percent .line {
  -webkit-animation: circleAnim 1s forwards;
          animation: circleAnim 1s forwards;
}

.piebox .percent .line {
  stroke-dashoffset: 154;
  stroke: #D3A243;
}


@-webkit-keyframes circleAnim {
  0% {
    stroke-dasharray: 0 440;
  }
  99.9%, to {
    stroke-dasharray: 440 440;
  }
}

@keyframes circleAnim {
  0% {
    stroke-dasharray: 0 440;
  }
  99.9%, to {
    stroke-dasharray: 440 440;
  }
}

.piebox .percent svg {
  transform: rotate(-90deg);
}