@charset "UTF-8";

/*共通*/

html{
    background-color: white;
    font-size: 100%;
}




body{
    font-family: "WDXL Lubrifont JP N", sans-serif;
  font-weight: 400;
  font-style: normal;
    line-height: 1.7;
    color: #E5E7EB;
    font-size: 30px;

}

h2{
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700; 
    font-style: normal;
    color: #2c2c2f;
}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
}

/*レイアウト*/
.align-center {
    text-align: center;
}

/*ヘッダー*/
.page-header {
    padding-top:  .5rem;
}
.logo {
    margin-top: 250px;
    width: 300px;
}

/*見出し*/
.font-english{
    font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700; 
  font-style: normal;
}

.page-title{
    font-size: 2rem;
    text-align: center;
    margin-top: 1rem;
    line-height: 1.4;
}

.box1 {
    position: relative;
    width: 331px;
    height: 206px;
    padding: 1em 1em;
    margin: 0 auto;
    color: #2c2c2f;
    background: whitesmoke;/*背景色*/
    border-radius: 60px;/*角の丸み*/
    text-align: center;
    border: 1px solid #2c2c2f;
    
    
}
.box1 p {
    margin: 0 auto; 
    padding: 0;
}


.box2 {
    position: relative;
    width: 331px;
    height: 340px;
    padding: 1em 1em;
    margin: 0 auto;
    margin-top: 40px;
    color: #2c2c2f;
    background: whitesmoke;/*背景色*/
    border-radius: 60px;/*角の丸み*/
    text-align: center;
    border: 1px solid #2c2c2f;
    font-size: 20px;

}


.box2 p {
    margin: 0 auto; 
    padding: 0;
}

.minibox{
    position: absolute;
    width: 300px;
    height: 150px;
    padding: 0.5em 1em;
    margin-top: 120px;
    color: #2c2c2f;
    background: whitesmoke;/*背景色*/
    border-radius: 40px;/*角の丸み*/
    text-align: center;
    border: 1px solid #2c2c2f;
    display: flex;
    justify-content: center;  /* 横中央 */
    align-items: center;       /* 縦中央 */
    left: 50%;         /* 親要素の左端から50%の位置に移動 */
    transform: translateX(-50%);
    top: 20px;
}

.maru2{
    position: absolute;
    width:50px;
    height: 50px;
    border-radius: 50%;
    background-color: #2c2c2f;
    text-align: center;
    bottom: -10px;
    right: 1px;
    justify-content: center;
    align-items: center;
    
}

.box3 {
    width: 331px;
    height: 306px;
    padding: 1em 1em;
    margin: 0 auto;
    margin-top: 40px;
    color: #2c2c2f;
    background: whitesmoke;;/*背景色*/
    border-radius: 60px;/*角の丸み*/
    text-align: center;
    border: 1px solid #2c2c2f;
 
    
}
.box3 p {
    font-size: 20px;
    margin: 0; 
    padding: 0;

}

.btn{
    all:unset;
    background-color:#2c2c2f;
    color: #fff;
    padding: 10px 30px;
    margin-top: 20px;
    text-decoration: none;
    font-size: 1em;
    border-radius: 60px;/*角の丸み*/
    text-align: center;

}
.btn:hover {
  color: #fff;
  opacity: 0.8;
}

/*fontnavi*/

.logo2{
    margin-top: 80px;
    width: 300px;

}

.setumei{
    text-align: center;
}

.btn-container{
    text-align: center;
}

#start-box{
    text-align: center;
}

#start-btn{
    all:unset;
    display: inline-block;
    text-align: center;
    background-color:#2c2c2f;
    color: #fff;
    padding: 10px 30px;
    margin-top: 20px;
    text-decoration: none;
    font-size: 1em;
    border-radius: 60px;/*角の丸み*/
}

#start-btn:hover {
  color: #fff;
  opacity: 0.8;
}


.back{
    text-align: center;
}

#question-box,#result-box{
    display: none;
    text-align: center;
}

#options button{
    all:unset;
    display: inline-block;
    text-align: center;
    background-color:#2c2c2f;
    color: #fff;
    padding: 10px 30px;
    margin-top: 20px;
    text-decoration: none;
    font-size: 1em;
    border-radius: 60px;/*角の丸み*/
}

#options button:hover {
  color: #fff;
  opacity: 0.8;
}

#retry-btn{
    all:unset;
    display: inline-block;
    text-align: center;
    background-color:#2c2c2f;
    color: #fff;
    padding: 10px 30px;
    margin-top: 20px;
    text-decoration: none;
    font-size: 1em;
    border-radius: 60px;/*角の丸み*/ 
}

.back-btn{
    all:unset;
    display: inline-block;
    text-align: center;
    background-color:#2c2c2f;
    color: #fff;
    padding: 10px 30px;
    margin-top: 20px;
    text-decoration: none;
    font-size: 20px;
    border-radius: 60px;/*角の丸み*/ 
}

.back-btn:hover {
  color: #fff;
  opacity: 0.8;
}

.restart-btn{
    all:unset;
    display: inline-block;
    text-align: center;
    background-color:#2c2c2f;
    color: #fff;
    padding: 10px 30px;
    margin-top: 20px;
    text-decoration: none;
    font-size: 20px;
    border-radius: 60px;/*角の丸み*/ 
}

.restart-btn:hover {
  color: #fff;
  opacity: 0.8;
}

#setumei{
    color: #2c2c2f;
    font-size: 25px;
}

#result {
    font-family: "Oswald", sans-serif;
    font-size: 24px;
}

#question-text {
    font-family: 'Oswald', sans-serif;
}

#options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 300px;
    margin: 10px auto;
}

.btn5{
    all:unset;
    background-color:#2c2c2f;
    color: #fff;
    padding: 10px 30px;
    margin-top: 50px;
    text-decoration: none;
    font-size: 20px;
    border-radius: 60px;/*角の丸み*/
    text-align: center;

}
.btn5:hover {
  color: #fff;
  opacity: 0.8;
}

#question-text{
    font-family: "WDXL Lubrifont JP N", sans-serif;
}