@charset "UTF-8";
/*各ページ独自のcss設定*/


/*以下に指定を記述する*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
   font-family: "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;
   font-weight: 500;
   color: #3e3a39;

   /*opacity: 0;
   animation: bodyFadeIn 1.5s ease-out forwards;*/
}

@keyframes bodyFadeIn {
  to {
    opacity: 1;
  }
}

a{
   text-decoration: none;
   color: #3e3a39;
}

a:hover{
   color: #3e3a3999;
}

.back-to-top {
position: fixed;
bottom: 15px;
right: 15px;
background-color: #f3c75999;
color: white;
padding: 10px 14px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
z-index: 999;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}

.back-to-top:hover {
background-color: #e07e0099;
color: white;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.view{
   position: relative;
}

.view-title{
   margin-top: 40px;
   margin-left: 15px;
   margin-bottom: 50px;

   font-weight: 700;
   position: relative;
   z-index: 10;

   animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
   /*transform: translateX(-100px);
   animation: slideInRight 1.5s ease forwards;*/
}

@keyframes slideInLeft {
  to {
    transform: translateX(0);
  }
}

.view-title::before{
   content: "";
   display: block;
   width: 51px;
   aspect-ratio: 1/1;
   border-radius: 50%;
   background: linear-gradient(
      to right, #ffecc5, #ffffff);
   position: absolute;
   left: 15px;
   top: -75px;
   z-index: 1;
   margin-top: 52px;
   transform: rotate(15deg);

   animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
   /*transform: translateX(-100px);
   animation: slideInLeft 1.5s ease forwards;*/
}
.view-title::after{
   content: "";
   display: block;
   width: 58px;
   aspect-ratio: 1/1;
   border-radius: 50%;
   background: linear-gradient(
      to right, #ffecc5, #ffffff);
   position: absolute;
   left: -15px;
   top: -45px;
   z-index: 1;
   margin-top: 52px;
   transform: rotate(15deg);

   animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
   /*transform: translateX(-100px);
   animation: slideInLeft 1.5s ease forwards;*/
}

.view-title h2{
   position: relative;
   z-index: 2;
   -webkit-text-stroke: 1px #ffffff;
   paint-order: stroke;
}

.vt1, .vt3{
   font-size: 20px;
   margin-left: 20px;
}
.vt2{
   font-size: 30px;
}
.vt2 span{
   -webkit-text-stroke: 1px #ffffff;
   paint-order: stroke;
}

.vt3{
   font-kerning: normal;
}

.view-img{
   top: -52px;
   right: 0px;
   position: absolute;
   z-index: 0;
   width: 290px;
   height: 210px;

   animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  /*transform: translateX(100px);
  animation: slideInRight 1.5s ease forwards;*/
}

@keyframes slideInRight {
  to {
    transform: translateX(0);
  }
}


.view-bar{
   width: 287px;
   height: 35px;
   background: linear-gradient(
      to right, #ffffff, #ffbf3f, #ff8e3f);
   position: relative;
   z-index: 1;
   top: -30px;

   animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
   /*transform: translateX(-100px);
   animation: slideInLeft 1.5s ease forwards;*/
}

.view-tf{
   display: flex;
   justify-content: center;
   align-items: center;

   background: radial-gradient(
      #ffecc599 -30%, #ffffff 70%);
   
   opacity: 0;
   transform: translateY(30px);
   animation: slideIn 1s ease-out forwards;
   animation-delay: 1s;  
}

.view-text{
   font-size: 12px;
   line-height: 23px;
   font-weight: 700;
}
.view-text span{
   font-size: 14px;
}

.underline1, .underline2{
   position: relative;
   z-index: 0;
}

.underline1::after, .underline2::after{
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 1px;
  width: 101%;
  height: 4px; 
  background-color: #f3c759;
}

.content {
  opacity: 0;
  transform: translateY(30px); 
  animation: slideIn 1s ease-out forwards;
  animation-delay: 0.5s;  
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.caption{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-bottom:40px;
   margin-top: 80px;
}

.caption-text1{
   text-align: center;
   position:relative;
   margin-bottom:-5px;

   font-weight: 700;
   font-size: 17px;
}
   
.caption-text2{
   text-align: center;
   margin-top:-5px;
   font-size: 14px;
   font-family: sans-serif;
   color:#f3c759
}

.caption-bar{
   display: flex;
   gap:50%;
   width: 75%;
   justify-content: center;
}

.caption-bar1{
   border:#3e3a39 solid 1px;
   width:30%;
}

.caption-bar2{
   border:#3e3a39 solid 1px;
   width:30%;
}

.label{
   display: flex;
   flex-direction: column;
   gap: 20px;
   justify-content: center;
   align-items: center;
}

.label-box{
   width: 309px;
   height: 58px;
   background-color: #f5f5f5;
   border-radius: 5px;
   position: relative;
}

.label-box::before{
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 0;
  position:absolute;
  left: 10px;
  top:50%;
  transform:translateY(-50%)
}

.boxA::before{
  border-left: 6px solid #edaa0b;
}
.boxB::before{
  border-left: 6px solid #f3c759;
}
.boxC::before{
  border-left: 6px solid #f9e3aa;
}

.label-title{
   position: absolute;
   margin-left: 10%;
   top: 48.5%;
   transform: translateY(-50%);
   font-size: 17px;
   font-weight: 700;
}

.titleA::before{
  position: absolute;
  content: "";
  display: block;
  width: 103%;
  height: 3px;
  background-color: #edaa0b;
  margin-top: 24px;
}
.titleB::before{
  position: absolute;
  content: "";
  display: block;
  width: 103%;
  height: 3px;
  background-color: #f3c759;
  margin-top: 24px;
}
.titleC::before{
  position: absolute;
  content: "";
  display: block;
  width: 103%;
  height: 3px;
  background-color: #f9e3aa;
  margin-top: 24px;
}

.label-content{
   position: absolute;
   margin-left:43%;
   top: 50%;
   transform: translateY(-50%);
   font-size: 12px;
}

.label-tri{
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 10px;
   z-index: 100;
}

.label-box:hover ~ .label-tri{
   animation: fuwafuwa 1s linear infinite;
}



@keyframes fuwafuwa{
 0%{transform:translateY(0px)}
 25%{transform:translateY(-3px)}
 50%{transform:translateY(0px)}
 75%{transform:translateY(3px)}
 100%{transform:translateY(0px)}
}

.lab-tri1{
   aspect-ratio: 1/sin(30deg);
   clip-path: polygon(0 0, 50% 100%, 100% 0);
   background-color: #fbb03b;
   opacity: 60%;

   position: absolute;
   width: 26px;
}

.lab-tri2{
   aspect-ratio: 1/sin(30deg);
   clip-path: polygon(0 0, 50% 100%, 100% 0);
   background-color: #fbb03b;
   opacity: 60%;

   position: absolute;
   width: 26px;
   top: 10px;
}

.exam{
   height: 530px;
   background: linear-gradient(
      #ffffff, #ffecc599, #ffffff);
   position: relative;
   z-index: 0;
   margin-top: 30px;

  /* opacity: 0;
  transform: translateY(30px); 
  animation: slideIn 1s ease-out forwards;
  animation-delay: 0.5s;  */
}

.exam-title{
   position: relative;
   width:75%;
   margin: auto;
   padding-top: 50px;
   margin-bottom: 40px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.exam-img{
   width: 100px;
   transform: rotate(15deg);
   position: absolute;
   left: 180px;
   top: 0px;
}

.exam-text1{
   font-size: 15px;
   position: relative;
   padding-left: 1px;
}

.exam-text1 h2{
   z-index: 3;
   position: relative;
}

.exam-text1::before{
   content: "";
   display: block;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: linear-gradient(
      to right, #ffe194, #ffffff);
   position: absolute;
   left: -14px;
   top: 2px;
   z-index: 1;
}

.exam-text2{
   font-size: 10px;
   font-family: sans-serif;

   padding-left: 3px;
}

.exam-bar{
   height: 1px;
   width: 100%;
   background-color: #3e3a39;

   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.exam-bar::before{
   content: "";
   height: 3px;
   width: 112px;
   background-color: #edaa0b;
}

.exam-box{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 40px;
   row-gap: 35px;
}

.exam-box0{
   width:127px;
   height:104px;
   background-color: #ffffff;
   border: solid 1px #e5e5e5;
   position:relative;
   display:flex;
   flex-direction:column;
   align-items: center;
   gap:9px;
   box-shadow: 1.25px 1.25px 1.25px rgba(62, 58, 57, 0.5);
}

.exam-box0:hover{
   opacity: 0.9;
   transform: translate(1.25px, 1.25px);
   box-shadow: 1.25px 1.25px 1.25px rgba(62, 58, 57, 0);
}

.exam-box000{
   width:127px;
   height:104px;
   background-color: #ffffff;
   border: solid 0.5px #eeeeee;
   position:relative;
   display:flex;
   flex-direction:column;
   align-items: center;
   gap:9px;
   color: #3e3a3999;
}

.exam-box0::before{
   position:absolute;
   top: -1px;
   left: 3px;

   font-size:14px;
   font-style: italic;
   font-family: "Harlow Solid Italic";
   color: #f7931e;
}

.exam-box0:hover::before,
.exam-box0:hover .exam-Btext1::before {
   opacity: 0.5;
}

.exam-box000::before{
   position:absolute;
   top: -1px;
   left: 3px;

   font-size:14px;
   font-style: italic;
   font-family: "Harlow Solid Italic";
   color: #f7931e80;
}

.exam-box1::before{
   content:"01";
}

.exam-box2::before{
   content:"02";
}

.exam-box3::before{
   content:"03";
}

.exam-box4::before{
   content:"04";
}

.exam-box5::before{
   content:"05";
}

.exam-Btext1{
   font-size:13.5px;
   font-weight: 700;

   text-align:center;
   margin-top:14px;
   display:flex;
   flex-direction:column;
   align-items: center;
   position:relative;
}

.exam-Btext1::before{
   content: "";
   display:block;
   height: 1px;
   width: 40px;
   background-color: #edaa0b;
   position:absolute;
   margin-top: 23px;
}

.exam-Btext2{
   font-size:10px;
   text-align:center;
   line-height: 16px;
}

.data{
   position: relative;

  /* opacity: 0;
  transform: translateY(30px); 
  animation: slideIn 1s ease-out forwards;
  animation-delay: 0.5s;  */
}

.data-jump{
   display: inline-block;
   position: absolute;
   width: 30px;
   height: 30px;
   top: -70px;
}

.data-title{
   position: relative;
   width:75%;
   margin: auto;
   margin-bottom: 40px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.data-img{
   width: 100px;
   transform: rotate(-10deg);
   position: absolute;
   left: 180px;
   top: -60px;
}

.data-text1{
   font-size: 15px;
   position: relative;
   padding-left: 1px;
}

.data-text1 h2{
   z-index: 3;
   position: relative;
}

.data-text1::before{
   content: "";
   display: block;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: linear-gradient(
      to right, #ffecc5, #ffffff);
   position: absolute;
   left: -14px;
   top: 2px;
   z-index: 1;
}

.data-bar{
   height: 1px;
   width: 100%;
   background-color: #3e3a39;

   display: flex;
   align-items: center;
   justify-content: center;
}

.data-bar::before{
   content: "";
   height: 3px;
   width: 112px;
   background-color: #f3c759;
}

.etc{
   height: 640px;
   background: linear-gradient(
      #ffffff, #ffecc599, #ffffff);
   margin-top: 10px;

  /* opacity: 0;
  transform: translateY(30px); 
  animation: slideIn 1s ease-out forwards;
  animation-delay: 0.5s;  */
}

.etc-img{
   width: 100px;
   position: absolute;
   left: 180px;
   top: 0px;
}

.etc-bar{
   height: 1px;
   width: 100%;
   background-color: #3e3a39;

   display: flex;
   align-items: center;
   justify-content: flex-end;
}

.etc-bar::before{
   content: "";
   height: 3px;
   width: 112px;
   background-color: #f9e3aa;
}

.info{
   width:127px;
   height:104px;
   font-size:10px;
   text-align:center;
   line-height: 18px;

   position: relative;
   display:flex;
   align-items: center;
   justify-content: center;
}

.info-img{
   width: 44px;

   position: absolute;
   left: -20px;
}

.info1{
   width: 130px;

   position: absolute;
   left: 8px;
}

.info::before{
   content: "";
   display: block;
   height: 1px;
   width: 120px;
   background-color: #edaa0b;

   position: absolute;
   top: 25px;
}

.info::after{
   content: "";
   display: block;
   height: 1px;
   width: 120px;
   background-color: #edaa0b;

   position: absolute;
   bottom: 25px;
}

.info2{
   position: absolute;
   font-size: 7px;
   line-height: 11px;
   top: 85px;
   width: 160px;
}

.qa{
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;

   /* opacity: 0;
   transform: translateY(30px); 
   animation: slideIn 1s ease-out forwards;
   animation-delay: 0.5s;*/
}

.qa-img{
   width: 54px;
   transform: rotate(10deg);
   position: absolute;
   left: 240px;
   top: -46px;
}

.qa-frame{
   width: 204.5px;
   height: 34.5px;
   background: linear-gradient(
      to right, #ff8e3f, #ffbf3f);
   border-radius: 999px;

   position: relative;
   z-index: 1;

   display: flex;
   justify-content: center;
   align-items: center;
}

.qa-frame::before{
   content: "";
   
   width: 200.5px;
   height: 30.5px;
   background-color: #ffffff;
   border-radius: 999px;

   position: absolute;
   z-index: 2;
   left: 2px;
   top: 2px;
}

.qa-frame:hover::before{
   background: linear-gradient(
      to right, #ff8e3f, #ffbf3f);
}

.qa-frame::after{
   content: "その他の疑問はこちらへ！";
   color: #ffffff;
   font-size: 7px;
   font-weight: 700;
   text-align: center;
   line-height: 13px;

   display: block;
   width: 100px;
   height: 12px;
   background: linear-gradient(
      to right, #ff8e3f, #ffbf3f);
   transform: rotate(-7deg);

   position: absolute;
   z-index: 3;
   top: -2px;
   left: -20px;
}

.qa-frame span{
   font-size: 12px;
   font-weight: 700;
   color: #3e3a39;

   z-index: 5;
   width: 150px;
}

.qa-frame:hover span{
   color: #ffffff;
}

.qa-button{
   position: relative;
   display: inline-block;
   left: -22px;
   top: -4px;
}

.qa-button::before{
   content: '';
   width: 3px;
   height: 3px;
   border-top: solid 1px #ffffff;
   border-right: solid 1px #ffffff;
   position: absolute;
   z-index: 3;
   left: 1.75px;
   top: 2.5px;
   transform: rotate(45deg);
}

.qa-frame:hover+.qa-button::before{
   border-top: solid 1px #ff8e3f;
   border-right: solid 1px #ff8e3f;
}

.qa-button::after{
   content: "";
   display: block;

   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: linear-gradient(
      to right, #ff8e3f, #ffbf3f);

   position: absolute;
   z-index: 1;
}

.qa-frame:hover+.qa-button::after{
   background: #ffffff;
}

 /*レスポンシブ用*/

@media screen and (min-width:1024px) {
   .view{
      max-width: 1200px;
      margin: 0 auto;
   }

   .view-img{
      top: -100px;
      right: 0;
      width: 690px;
      height: 520px;
      z-index: 10;
   }

   .view-title{
      margin-left: 90px;
      margin-top: 70px;
      padding: 40px 0 85px 0px;
      /*background: radial-gradient(#ffecc599 0%, #ffffff 60%);*/ 
      z-index: 50;  
   }

   .view-title h2{
      line-height: 1.4;
   }

   .vt1, .vt3{
      font-size: 40px;
      margin-left: 50px;
   }

   .vt2{
   font-size: 80px;
   }

   .view-title::before{
      width: 100px;
      top: -80px;
   }   

   .view-title::after{
      width: 130px;
      left: -50px;
      top: -20px;
   }

   .view-bar{
      width: 800px;
      height: 80px;
      z-index: 20;
      top: -50px;
   }

   .view-tf{
      margin-top: 45px;
   }

   .view-text{
      font-size: 17px;
      line-height: 32px;
   }

   .view-text span{
      font-size: 20px;
   }

   .linebreak1, .linebreak3{
      display: none;
   }

   .caption-text1{
      font-size: 20px;
      margin-bottom: -10px;
   }

   .caption-text2{
      font-size: 14px;
   }

   .caption-bar{
      gap: 30%;
   }

   .label-box{
      width: 390px;
      height: 67px;
   }

   .label-box::before{
      left: 6%;
   }

   .label-title{
      font-size: 19px;
   }

   .label-content{
      font-size: 15px;
      margin-left: 40%;
   }

   .label-tri{
      margin-top: 20px;
   }

   .lab-tri1{
      width: 30px;
   }

   .lab-tri2{
      width: 30px;
      top: 10px;
   }

   .exam{
      height: 450px;
      margin-top: 30px;
   }

   .exam-title{
      width: 70%;
      margin-bottom: 50px;
   }

   .exam-img{
      width: 140px;
      right: 10%;
      left: auto;
      top: -20%;
   }

   .exam-text1, .data-text1{
      padding-left: 10px;
      font-size: 19px;
   }
   
   .exam-text2 /*.data-text2*/{
      padding-left: 12px;
      font-size: 13px;
      z-index: 1;
   }

   .exam-text1::before, .data-text1::before{
      width: 80px;
      height: 80px;
      top: -20px;
      left: -30px;
      z-index: 1;
   }

   .exam-bar, .data-bar, .etc-bar{
      z-index: 1;
   }

   .exam-bar::before, .data-bar::before, .etc-bar::before{
      width: 33%;
   }

   .exam-box{
      justify-content: flex-start;
      max-width: 820px;  
      margin: 0 auto;    
   }

   .exam-box0, .exam-box000{
      width: 175px;
      height: 135px;
      gap: 18px;
   }

   .exam-box0::before{
      font-size: 17px;
      top: 1px;
      left: 5px;
   }
   
   .exam-Btext1{
      font-size: 17px;
   }

   .exam-Btext2{
      font-size: 14px;
      line-height: 20px;
   }

   .exam-Btext1::before{
      margin-top: 31px;
   }

   .data{
      height: 350px;
   }

   .data-title{
      width: 70%;
      margin-bottom: 50px;
   }

   .data-img{
      width: 130px;
      right: 10%;
      left: auto;
      top: -100%;
   }

   .etc{
      position: relative;
      z-index: 0;
      height: 550px;
   }

   .etc-img{
      width: 130px;
      right: 10%;
      left: auto;
      top: -10%;
      z-index: 10;
   }

   .info{
      width: 165px;
      height: 120px;
      font-size: 14px;
      line-height: 21px;
   }

   .info1{
      width: 165px;
      left: 10px;
   }

   .info2{
      font-size: 10px;
      line-height: 15px;
      top: 100px;
      width: 190px;
   }

   .qa{
      margin-bottom: 50px;
   }

   .qa-frame{
      width: 282px;
      height: 51px;
   }

   .qa-frame span{
      font-size: 17px;
      width: 220px;
   }

   .qa-frame::before{
      width: 276px;
      height: 45px;
      left: 3px;
      top: 3px;
   }

   .qa-frame::after{
      font-size: 11px;
      line-height: 19px;
      width: 160px;
      height: 19px;
      top: -6px;
      left: -45px;
   }

   .qa-button{
      left: -32px;
      top: -6px;
   }

   .qa-button::before{
      left: 2.75px;
      top: 3.5px;
      width: 4px;
      height: 4px;
   }

   .qa-button::after{
      width: 12px;
      height: 12px;
   }

   .qa-img{
      width: 65px;
      left: 55%;
      top: -110%;
   }

}