/* ------------  共通の設定【共通】 ------------  */

/* リセットCSS */
button {
  border-color: transparent;
  background: transparent;
  cursor: pointer;
  font-weight: bold;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

html {
  scroll-behavior: smooth;
  touch-action: manipulation;
}

h2{
  font-weight: 400;
}

h3{
  font-weight: normal;
}

body {
  background-color: #fff2b8;
  background-image: url("images/sougen53.png");
  /*背景画像 */
  background-size: cover;
  /* 画像を縦横比を保ちながら全体に拡大/縮小 */
  background-repeat: no-repeat;
  /*画像の繰り返しを無効にする */
  background-attachment: fixed;
  /**/
  background-position: center center;
  /*画像を中央に配置 */
  position: relative;
  width: 97vw;
  /* ビューポートの幅を100% */
  height: 91vh;
  /* ビューポートの高さを100% */
  font-family: "Mochiy Pop One", serif;
  font-style: normal;
  transition: background-image 0.3s ease-in-out;
}

#container {
  width: auto;
  margin: 0px auto 30px;
  position: relative;

}

#flex-container {
  margin: 0px auto 0px;

}

.img_center img {
  text-align: center;
}

.img_center2 img {
  text-align: center;
}

.img_center {
  text-align: center;
}

.image_center {
  text-align: center;
}


.img_center2 {
  text-align: center;
}

.loading {
  /*ローディング画面の縦横幅を画面いっぱいになるように指定*/
  width: 100vw;
  height: 100vh;
  /*ローディング画面の表示位置を固定*/
  position: fixed;
  top: 0;
  left: 0;
  background: #65ceeb;
  /*background: #fff2b8;*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*ローディング画面を0.5秒かけて非表示にする*/
  transition: all 0.3s linear;
  z-index: 110;
}

/*ローディング画面を非表示にする*/
.loading.loaded {
  /*0.5秒かけてopacityを0にする*/
  opacity: 0;
  visibility: hidden;
}

.loading-text {
  color: #FFF;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
}



.spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #FFF;
  border-left-color: #1082ce;
  /* アニメーションを1秒かけて実行 */
  animation: spinner-rotation 1s linear infinite;
}

/* アニメーションの設定 */
@keyframes spinner-rotation {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* るび */
[data-ruby] {
  position: relative;
}

[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  top: -0.5em;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 0.3em;
}

/* 以下追加 */
rt {
  display: none;
  word-wrap: nowrap;
}

/*ハンバーガーメニュー*/

.conts-menu {
  position: fixed;
  top: 23px;
  left: 5px;
  font-size: 15px;
  z-index: 5;
}

.conts-body {
  margin: 0 auto;
  height: 20px;
  z-index: 50;

}

.hamburger {
  width: 40px;
  height: 32px;
  position: fixed;
  top: 10px;
  left: 5px;
  z-index: 100;
}

.hamburger_bar {
  display: block;
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;

  background: #000;
  transition: top 0.24s, transform 0.24s, opacity 0.24s;

}

.hamburger_bar:nth-child(1) {
  top: 10%;
}

.hamburger_bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger_bar:nth-child(3) {
  top: 90%;
  transform: translateY(-100%);
}

.hamburger_bar.is_active:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
}

.hamburger_bar.is_active:nth-child(2) {
  transform: translate(50%, -50%);
  opacity: 0;
}

.hamburger_bar.is_active:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-135deg);
}


#toggleSwitch {

  position: fixed;
  top: 80px;
  left: 10px;
  z-index: 30;
  cursor: pointer;
}

#toggleSwitch img {

width:40px;

}


/*ナビゲーションエリア*/

.nav {
  padding: 20px;
  width: 99%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  background: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.nav.is_active {
  opacity: 1;
  pointer-events: auto;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 32px;


}

a.btn_05 {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 170px;
  margin: 0px auto;
  padding: 1rem 2.5rem;
  border: 2px solid #27acd9;
  color: #27acd9;
  border-radius: 100vh;
  transition: 0.5s;
  font-size: 17px;
}

a.btn_05:hover {
  color: #fff;
  background: #27acd9;
}

/* ボタンの指定 */
.js-backToTop {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 20px;
  bottom: 20px;
  width: 80px;
  height: 80px;
  font-size: 13px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  color: #000000;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease-in-out;
  font-family: "Mochiy Pop One", serif;
  font-weight: lighter;
}

.js-backToTop:hover {
  background: #e8e8e8;
  color: #FFF;

}

.js-backToTop img {
  width: 65px;

}

/* ボタンの指定 */
.js-backToTop2 {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 20px;
  bottom: 20px;
  width: 80px;
  height: 80px;
  font-size: 13px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  color: #000000;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease-in-out;
  font-family: "Mochiy Pop One", serif;
  font-weight: lighter;
  z-index: 30;
}





.js-backToTop2:hover {
  background: #e8e8e8;
  color: #FFF;

}

.js-backToTop2 img {
  width: 65px;

}

/* クラス付与時の指定 */
.is-active {
  opacity: 1;
  visibility: visible;
}

/* ------------  トップページの設定【共通】 ------------  */

#logo_area {
  position: absolute;
  top: -40px;
  left: -60px;
  transform: rotate(-15deg);
  width: 230px;
}

#logo_area2 {
  position: absolute;
  top: -60px;
  right: -20px;
 
}

#logo_area2 img{
  width: 100px;
}

.custom_p {
  text-align: center;
  font-size: 20px;
  text-shadow: 1.5px 1.5px 0px #ffffff;
  color: #333333;
}

@keyframes sway {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-5px);
  }

  100% {
    transform: translateX(0);
  }
}

/* ボタン部分の処理 */

.btn_06 {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 180px;
  margin: auto;
  padding: 1rem 4rem;
  border: 2px solid #27acd9;
  color: #27acd9;
  border-radius: 100vh;
  background: #ffffff;
  transition: 0.5s;
  margin-top: 40px;
  cursor: pointer;
  font-size: 2em;
}

.btn_06:hover {
  color: #fff;
  background: #27acd9;
  cursor: pointer;
}


/* ボタン部分の処理 */

.btn_10 {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 230px;
  margin: 0px auto;
  padding: 15px;
  border: 2px solid #27acd9;
  color: #27acd9;
  border-radius: 100vh;
  background: #ffffff;
  transition: 0.5s;
  margin-top: 30px;
  cursor: pointer;
  font-size: 20px;
}

.btn_10:hover {
  color: #fff;
  background: #27acd9;
  cursor: pointer;
}

.score_image_01 {
  width: 100%; /* 必要に応じて調整 */
  text-align: center; /* 画像が中央にならない場合の補助 */
}
.score_image_01 img {
  display: block;
  margin: 0 auto;
}

.custom_p {
  animation: sway 2s infinite ease-in-out;
}

.link_p {

  text-align: center;
  margin: 100px 0px 0px 0px;
  font-size: 25px;
}

.link_p a {
  display: inline-block;
  
  color: #757474;
  transition: .3s;
  padding: 12px 20px 12px;
  background-color: #ffffff;
  border-radius: 15px;
}

.link_p a:hover {

  color: #EF8998 !important;
  /*文字色*/
  animation: zoom .3s;
}

@keyframes zoom {
  50% {
    transform: scale(1.01);
  }
}


#profile_area{
  width: 50%;
  background-color: #ffffff;
  margin: 0px auto;
  padding: 30px;
  border-radius: 15px;
  margin-top: 50px;
}

.profile_txt {
  font-size: 18px;
  color: #ffffff;
  background-color: #f9a51f;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  padding: 10px;
  border-radius: 10px;
}

#profile_area p {
  margin-bottom: 1.5rem;
}

#profile_area a {
  color: #0077cc;
  text-decoration: none;
}

#profile_area a:hover {
  text-decoration: underline;
}

.center-link {
  display: inline-block;
  margin: 2em auto;
  padding: 0.8em 1.6em;
  background-color: #ffd966;
  color: #333;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background-color 0.3s, transform 0.2s;
}

/* 親要素が text-align: center を持っていない場合に備えて */
.center-link-wrapper {
  text-align: center;
}

/* ホバー時の演出 */
.center-link:hover {
  background-color: #ffcc33;
  transform: scale(1.05);
}


.accordion {
  width: 800px;
  background-color: none;
  margin: 30px auto 30px;

}

.accordion-content {
  display: none;
}

.accordion-header {
  width: 280px;
  background-color: #ffa500;
  padding: 12px 45px 10px 20px;
  margin: 10px auto 0;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
  text-align: center;
  border-radius: 20px;
  color:#ffffff;
}

.accordion-header::before,
.accordion-header::after {
  position: absolute;
  content: '';
  top: 1px;
  right: 20px;
  bottom: 0;
  width: 12px;
  height: 2px;
  margin: auto;
  background: #ffffff;
}

.accordion-header::after {
  transform: rotate(-90deg);
  transition: transform 0.3s;
}

.accordion-header.active::after {
  transform: rotate(0deg);
}

.accordion-content {

  padding: 12px 20px 10px;
}

.accordion-header span,
.accordion-content span {
  padding-left: 25px;
  position: relative;
}

.accordion-header span::before {
  position: absolute;

  top: 2px;
  left: 0;
  color: #151E2F;
  font-size: 17px;
}


.accordion-content span::before {
  position: absolute;

  top: 3px;
  left: 0;
  color: #151E2F;
  font-size: 17px;
}

/* hover */
.accordion-header:hover {
  background-color: #ffa500;
}


#member_area{

width: 100%;
}


/*吹き出し*/

.fuki {
  position: relative;
  padding: 3rem 3rem 3rem 3rem;
  border-radius: 30px;
  background-color: #ffffff;
  color: #757474;

  font-size: 23px;
  width: 58%;
  text-align: center;
  margin: 0px auto 0px;
  margin-top: 65px;
}

.fuki:before {
  position: absolute;
  top: 100%;
  left: 46%;
  height: 0;
  width: 0;
  border-style: solid;
  border-color: transparent;
  border-top-color: #ffffff;
  border-width: 25px;
  content: "";
}

.txt_r img {
  display: block;
  margin: 0 auto;
  margin-top: 40px;
}

.wrapper_btn {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0px auto;
  padding: 0px;
  padding-bottom: 10px;
  width: 85%;
  margin-top: 0px;
}

.index_mozi {
  text-align: center;
  font-size: 40px;
  background-color: #ffa500;
  color: #ffffff;
  padding: 15px;
  margin: 0px auto;
  margin-top: 40px;
  width: 85%;
  border-radius: 8px;
  position: relative;
  z-index: -1;
}


.socre_image_01 img{
  text-align: center;
  display: block;
  width: 200px;
  margin: 0 auto;
}

/*豆知識エリア*/

.knowledge-box {
  max-width: 500px;
  margin: 2em auto;
  padding: 1em;
  background-color: #f0f9ff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  text-align: center;
}

.knowledge-box h2 {
  font-size: 1.5em;
  color: #007acc;
  margin-bottom: 0.5em;
}

.knowledge-box p {
  font-size: 1.05em;
  color: #333;
  margin-bottom: 1em;
}

.knowledge-link {
  display: inline-block;
  padding: 0.7em 1.4em;
  background-color: #ffd966;
  color: #333;

  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.3s, transform 0.2s;
  width: 60%;
}

.knowledge-link:hover {
  background-color: #ffcc33;
  transform: scale(1.05);
}

/*豆知識エリア*/

.login_beside {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  /* 横方向の中央揃え */
  gap: 20px;
  align-items: center;
  /* 縦方向の中央揃え */
  height: 60px;
  width: 100%;
}

.login_beside02 {

  gap: 10px;
}


/* ボタンの指定 */
.js-backToTop3 {
  position: fixed;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  left: -10px;
  bottom: 50px;
  border: none;
  width: 80px;
  transition: 0.3s ease-in-out;
  font-family: "Mochiy Pop One", serif;
  font-weight: lighter;
  z-index: 30;
}


.login_beside_top {
  margin-top: 20px;
  /*display: flex;*/
  justify-content: center;
  /* 横方向の中央揃え */
  gap: 20px;
  align-items: center;
  /* 縦方向の中央揃え */
  height: 60px;
  width: 100%;
}

.login_beside02_top {

  gap: 10px;
}



.site_info {

  width: 80%;
  background-color: #ffffff;
  padding: 50px;
  font-size: 25px;
  margin: 100px auto 70px;
  border-radius: 30px;
  color: #757474;
}

.info_word {
  text-align: center;
  font-size: 30px;
}

.info_link {
  text-align: center;
}

.advertisement {
  margin: 35px auto;
  width: 80%;
  text-align:center;
  color: #000000;
  font-size: 18px;
  padding-bottom: 10px;
  position: relative;
}

.advertisement a:hover {

  color: #ffffff;
}
/*
.advertisement2{
  width: 40%;
  border: 3px solid #00b5ad;
  padding: 10px;
  margin: 10px auto;
  text-align: left;
}
*/

.s_image{
  position: absolute;
  top:57px;
  left: 50%;
  transform: translateX(-540px);
}

.s_image2{
  position: absolute;
  top:129px;
  left: 50%;
  transform: translateX(150px);
}



.cp_hr11 {
  height: 3px;
  border-width: 0;
  background-color: #e8e8e8;

}

.kuku_mozi {

  width: 45%;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  margin-top: 80px;
  margin-bottom: 80px;
  text-shadow: 2px 2px 0px #ffffff;
}

#footer a:hover {
  color: #ffffff !important;
}

#label_lyout {

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0px auto;
  padding: 0px;
  padding-bottom: 0px;
  width: 400px;
  margin-top: 30px;
  margin-bottom: 30px;

}

#index_neko {
  position: relative;
  margin: 50px 0px 40px;
}

.balloon3-right-btm:before {
  content: "";
  position: absolute;
  bottom: -5px;
  right: -5px;
  margin-top: 0px;
  border: 15px solid transparent;
  border-left: 15px solid #a58eff;
  z-index: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*吹き出し2*/

.balloon4-right-btm {
  position: relative;
  display: inline-block;
  margin: 20px 0 1.5em 0;
  padding: 28px 5px;
  width: 95px;
  height: 95px;
  line-height: 18px;
  text-align: center;
  color: #ffa500;
  font-size: 14px;
  border: #ffa500 solid 2px;
  background: #ffff;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: top;


}

/* 004 */
.button004 a {
  background: #eee;
  border-radius: 50px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  width: 280px;
  padding: 15px 20px;
  color: #27acd9;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  border: #27acd9 solid 1px;
  font-size: 20px;
}

.button004 a:hover {
  background: #27acd9;
  color: #FFF;
}

.button004 a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #27acd9;
  border-right: 3px solid #27acd9;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 20px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}

.button004 a:hover:after {
  border-color: #FFF;
}

/* ボタン部分の処理 */

.btn_04 {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 320px;
  margin: 43px auto 20px;
  padding: 1rem 4rem;
  border: 2px solid #27acd9;
  color: #27acd9;
  border-radius: 100vh;
  background: #ffffff;
  transition: 0.5s;
  cursor: pointer;
  font-size: 2em;
}

.btn_04:hover {
  color: #fff;
  background: #27acd9;
  cursor: pointer;
}

/*

a.btn_04 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  background: repeating-linear-gradient(45deg, #ffffff, #ffffff 3px, #e7e7e7 3px, #e7e7e7 30px);
  color: #333;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-decoration: none;
  position: relative;
   margin: 43px auto 20px;
  padding: 1rem 4rem;
  font-size: 1.4em;
  border-radius: 20px;
  
}
a.btn_04 span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  background: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  position: absolute;
  top: -6px;
  left: -6px;
  transition-duration: 0.2s;
  border-radius: 20px;
}
a.btn_04:hover span {
  left: -1px;
  top: -1px;
}

*/


.checkbox-2 {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 2em;
  border: none;
  text-shadow: 2px 2px 0px #ffffff;
}

.checkbox-2 label {
  display: flex;
  align-items: center;
  gap: 0 .5em;
  position: relative;
  cursor: pointer;
}

.checkbox-2 label::before {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #333333;
  background-color: #ffffff;
  content: '';
}

.checkbox-2 label:has(:checked)::after {
  position: absolute;
  top: 3px;
  left: 6px;
  transform: rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid #575757;
  border-width: 0 3px 3px 0;
  content: '';
}

.checkbox-2 input {
  display: none;
  
}

.label_mozi {

  text-align: center;
  margin-top: 0px;
}

.label_mozi_h {
  background-color: #ffffff;
  font-size: 25px;
  display: inline-block;
  margin-bottom: 5px;
  color: #ffa500;
  padding: 5px;
  border-radius: 6px;
  width: 95%;
}

.label_mozi02 {

  text-align: center;
  margin-top: 0px;
}

.checked-label {
  color: #d3d3d3;
  /* 変更する文字色 */
}

.btn_c_area {
  position: relative;
  width: 500px;
  margin: 0 auto;

}


/* 広告のスタイル */
.ad-banner {
  position: absolute;
  top: 300px;
  right: 8px;
  width: 120px;
 z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* 閉じるボタンのスタイル */
.ad-banner .close-btn {
  align-self: flex-end;
  cursor: pointer;
  margin: 3px;
  font-size: 14px;
  color: #999;
}


/* テキストのスタイル */
.ad-banner02 {
  position:absolute;
  top: 220px;
  right: 120px;
  width: 350px;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  opacity: 0;
  transition: opacity 0.5s ease;
  background-image: url(images/cloud.png);
  background-size: 310px; /* 幅100px、高さ100px */
  background-repeat: no-repeat;
  background-position: 50% 50%; /* 同じ意味で、50%の位置に配置 */
  color: #575757;
  animation: fuwafuwa3 12s infinite;
  text-align: center;
}

@keyframes fuwafuwa3 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* 閉じるボタンのスタイル */
.ad-banner02 .close-btn02 {
  align-self: flex-end;
  cursor: pointer;
  margin: 3px;
  font-size: 14px;
  color: #333333;
}

.ad-content02{
  padding: 3px;
  font-size: 14px;
}


#top_info_question2 img {
  width: 200px;
  z-index: 0;
}


#top_info_question2 img {
  animation: slideinRight02 2.4s 1;
}

@keyframes slideinRight02 {
  0% {
    transform: translateX(-200px);

  }

  100% {
    transform: translateX(0);

  }
}


#top_info_question3 img {
  width: 70px;
  z-index: 0;
}


#top_info_question3 img {
  animation: slideinRight02 3.4s 1;
}

@keyframes slideinRight02 {
  0% {
    transform: translateX(-200px);

  }

  100% {
    transform: translateX(0);

  }
}


#haikei_area span {

  /*text-shadow:2px 2px 0px #ffffff;*/
  background-color: #ffa500;
  padding: 5px;
  font-size: 15px;
  color: #ffffff;
  border-radius: 4px;
}

#haikei_area {
  width: 70px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
  position: fixed;
  top: 30px;
  right: 10px;
 z-index: 5;
}

.button02 {
  width: 60px;
  height: 60px;
  background-color: #fff;
  border: solid 2px #27acd9;
  color: #27acd9;
  padding: 5px 5px;
  text-decoration: none;
  font-size: 16px;
  border-radius: 50%;
  transition: 0.5s;
}

.button02:hover {
  color: #ffffff;
  background-color: #27acd9;
}

.button-2 {
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 0.8rem;
  color: #00b5ad;
  text-decoration: none;
  user-select: none;
  border: 1px #00b5ad solid;
  border-radius: 20px;
  transition: 0.4s ease;
  background: #ffffff;
  width: 110px;
}

.button-2:hover {
  color: #fff;
  background: #00b5ad;
}

.button-2_size {
  width: 200px;
}

.button-3_size {
  width: 350px;
}

.button-3 {
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 0.8rem;
  color: #00b5ad;
  text-decoration: none;
  user-select: none;
  border: 1px #00b5ad solid;
  border-radius: 20px;
  transition: 0.4s ease;
  background: #ffffff;
  width: 110px;
  font-family: "Mochiy Pop One", serif;
  font-weight: normal;
}

.button-3:hover {
  color: #fff;
  background: #00b5ad;
}


.button-5 {
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.8rem;
  color: #00b5ad;
  text-decoration: none;
  user-select: none;
  border: 1px #00b5ad solid;
  border-radius: 20px;
  transition: 0.4s ease;
  background: #ffffff;
  width: 80px;
}

.button-5:hover {
  color: #fff;
  background: #00b5ad;
}



.button-6 {
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.8rem;
  color: #00b5ad;
  text-decoration: none;
  user-select: none;
  border: 1px #00b5ad solid;
  border-radius: 20px;
  transition: 0.4s ease;
  background: #ffffff;
  width: 6px;
  font-family: "Mochiy Pop One", serif;
  font-weight: normal;
  width: 80px;
}

.button-6:hover {
  color: #fff;
  background: #00b5ad;
}

.input_d02 {

  width: 94px;

}

.fixed-image01 {
  position: absolute;
  top: 280px;
  /* 上からの距離を指定 */
  left: 50px;
  /* 左からの距離を指定 */
  width: 380px;
  /* 幅を指定 */
  animation: fuwafuwa 9s infinite;
}

@keyframes fuwafuwa {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

.fixed-image02 {
  position: absolute;
  top: 280px;
  /* 上からの距離を指定 */
  right: 50px;
  /* 左からの距離を指定 */
  width: 380px;
  /* 幅を指定 */
  animation: fuwafuwa2 8s infinite;
}

@keyframes fuwafuwa2 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/*
.fixed-image03 {
  position: absolute;
  top: 210px;

  right: 0px;

}
*/
/*
.fixed-image04 {
  position: absolute;
  top: 180px;
  right: 0px;
}
*/
.fixed-image05 {
  position: absolute;
  top: 250px;
  /* 上からの距離を指定 */
  left: -10px;
  /* 左からの距離を指定 */
}

.fixed-image06 {
  position: absolute;
  top: 410px;
  /* 上からの距離を指定 */
  left: -10px;
  /* 左からの距離を指定 */
}

.fixed-image07 {
  position: absolute;
  top: 200px;
  /* 上からの距離を指定 */
  left: -20px;
  /* 左からの距離を指定 */
}

#footer {
  width: 100%;
  height: 20px;
  vertical-align: bottom;
  text-align: center;
  margin-top: 60px;
  font-size: 16px;
  color: #333;
}


/*  ------------ 問題エリアの設定【共通】 ------------  */

/* 3カラムレイアウト */

#flex-container {
  display: flex;
  /* フレックスコンテナとして指定 */
  justify-content: space-between;
  /* 子要素の間にスペースを均等に配置 */
  align-items: stretch;
  /* 子要素の高さを揃える */
  width: 100%;
  height: 100%;
  max-width: 90%;
  margin: 0 auto;
  /* コンテナを中央に配置 */
}

#yoku,
#center_v,
#right_area {
  box-sizing: border-box;
  /* パディングとボーダーを含めてサイズを計算 */
}

#yoku {
  flex: 1;
  /* 左カラムの比率を1とする */
  max-width: 100%;
}

#center_v {
  flex: 2;
  /* 中央カラムの比率を3とする */
  max-width: 100%;

}

#right_area {
  flex: 1;
  /* 右カラムの比率を1とする */
  max-width: 100%;
}

#input_area {
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 80%;
  max-width: 65%;
  justify-content: center;
}

.input_box {
  margin-top: 20px;
  margin-left: 20px;
  width: 280px;
  height: 250px;
  border: solid 2px#000;
  background-color: #ffffff;
  padding: 10px 0 10px;
  display: block;
  font-size: 10em;
  font-weight: bold;
}

#question {
  font-size: 12.5em;
  color: #000000;
  font-weight: bold;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px #fff;

}

#question_area {
  z-index: 1;
  margin: 0px auto;
  text-align: center;
  margin-top: -30px;

}

.ng {
  display: inline-block;
  width: 100px;
}

.ok {
  display: inline-block;
  width: 100px;
}

#ok_area {
  margin: 0px auto;
  margin-top: -20px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 22%;
  position: relative;
}

#ng_area {
  margin: 0px auto;
  margin-top: -45px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 22%;
  position: relative;
}

#ok_area p {

  text-align: center;
  font-size: 30px;
  color: #25271F;
  letter-spacing: 0.1em;

}

#playAudio{
  position: absolute;
  bottom:300px;
  right: 40px;
  cursor: pointer;
}

#playAudio02{
  position: absolute;
  bottom:300px;
  right: 40px;
  cursor: pointer;
}

/*吹き出し1*/

.balloon3-right-btm {
  position: relative;
  display: inline-block;
  margin: 0 0 1.5em 0;
  padding: 0 5px;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  color: #FFF;
  font-size: 17px;

  background: #a58eff;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: top;

}

/*吹き出し3*/

.balloon-003 {
  display: flex;
  margin: 0px auto;
  width: 150px;
  align-items: center;
  position: relative;
  max-width: 150px;
  padding: .8em 1.2em;
  border-radius: 5px;
  background-color: #a58eff;
  color: #ffffff;

}

.balloon-003::before {
  position: absolute;
  right: -14px;
  width: 15px;
  height: 30px;
  background-color: #a58eff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: '';
}

#ng_area p {

  text-align: center;
  font-size: 30px;
  color: #25271F;
  letter-spacing: 0.1em;

}

#kekka_image {
  padding: 50px;
  background-color: #ffffff;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  margin: 0px auto;

}

#smart_area {
  grid-auto-rows: 10px;
  display: flex;
  margin: 0px auto 5px;
  text-align: center;
  width: 260px;
}

#smart_area img {
  margin-left: 20px;
}

.input_d {

  width: 150px;

}



/* ボタン部分の処理 */

.btn_03 {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 320px;
  margin: auto;
  padding: 1rem 4rem;
  border: 2px solid #27acd9;
  color: #27acd9;
  border-radius: 100vh;
  background: #ffffff;
  transition: 0.5s;
  margin-top: 40px;
  cursor: pointer;
}

.btn_03:hover {
  color: #fff;
  background: #27acd9;
  cursor: pointer;
}

#buttons-container {
  margin: 20px;
}

.bt_margin {

  margin: 5px;
}

.box_center {
  margin: 0 auto;
  width: 180px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin-top: 0;
  -moz-appearance: textfield;
}

#l_box,
#c_box,
#r_box {
  box-sizing: border-box;
  /* パディングとボーダーを含めてサイズを計算 */
}

#l_box {
  flex: 1;
  /* 左カラムの比率を1とする */
  max-width: 100%;
}

#c_box {
  flex: 1;
  /* 左カラムの比率を1とする */
  max-width: 100%;
}

#r_box {
  flex: 1;
  /* 左カラムの比率を1とする */
  max-width: 100%;

}

.btn_07_area {
  margin: 5px 0px 0px;
}

a.btn_07 {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 120px;
  margin: auto;
  padding: 1rem 4rem;
  border: 2px solid #27acd9;
  color: #27acd9;
  border-radius: 100vh;
  transition: 0.5s;
  background-color: #ffffff;
}

a.btn_07:hover {
  color: #fff;
  background: #27acd9;
}

#clear_b {
  margin-left: 20px;
}

.emphasis_design5 {
  margin: 0 auto;
  color: #ffffff;
  font-size: 20px;
  border-radius: 10px;
  margin-top: 0px;
  margin-bottom: 5px;
  width: 51%;
  padding: 8px;
  background-color: #ffa500;

}

.emphasis_design6 {

  color: #ff8e9d;
  font-size: 2.35em;
  letter-spacing: 0.1em;
  margin: 0px auto 50px;
  text-shadow: 2px 2px 0px #ffffff;
  text-align: center;
}

#top_info_question4 img {
  width: 200px;
  z-index: 0;
}


#top_info_question4 img {
  animation: slideinRight04 1.8s 1;
}

@keyframes slideinRight04 {
  0% {
    transform: translateX(-200px);

  }

  100% {
    transform: translateX(0);

  }
}

/*　ムーブエリア */

.image_move {

  position: absolute;
  bottom: 100%;
  left: 50%;

}

.image-container {
  width: 40px;
  height: 50px;
  overflow: hidden;
  position: relative;
}

.image-container img {
  position: absolute;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  /* 初期状態では見えないようにする */
}

.image-container img.show {
  visibility: visible;
  animation: moveUp2 0.4s ease-out forwards;
}

.image-container img.hide {
  visibility: visible;
  animation: moveDown2 0.4s ease-out forwards;
}

@keyframes moveUp2 {
  0% {
    bottom: -100%;
  }

  100% {
    bottom: -20%;
  }
}

@keyframes moveDown2 {
  0% {
    bottom: -20%;
  }

  100% {
    bottom: -100%;
  }
}

.change_mode {
  position: absolute;
  top: -50px;
  left: -35px;
  width: 180px;
  z-index: 5;
  transform: rotate(-20deg);
}

.change_mode2 {
  position: absolute;
  top: 40px;
  right: -180px;
  z-index: -1;
}

/* クリアボタン */

#clear_b {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 150px;
  margin: auto;
  margin-left: 10px;
  padding: 0.3rem 1.8rem;
  color: #27acd9;
  background: #ffffff;
  border-radius: 100vh;

  box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
  transition: 0.5s;

}

#clear_b:hover {
  color: #fff;
  background: #27acd9;

  transform: translateY(3px);
}

/*アニメーション1*/
.animation {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  width: 130px;
}

.keyframe3 {
  animation-name: anim_s;
  transform: rotate(20deg);
  animation-duration: 5s;
}

@keyframes anim_s {
  50% {
    transform: rotate(-20deg);
  }

  100% {
    transform: rotate(20deg);
  }
}

/*アニメーション2*/

.animation2 {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 3s;
  width: 110px;
}

.keyframe6 {
  animation-name: poyopoyo;
}

@keyframes poyopoyo {

  0%,
  40%,
  60%,
  80% {
    transform: scale(1.0);
  }

  50%,
  70% {
    transform: scale(0.95);
  }
}


/*以下、①背景色など*/
.line-bc {
  display: block;
  margin: 15px auto;
  width: 790px;

}

/*以下、①背景色など*/
.line-bc2 {
  display: block;
  margin: 15px auto;
  width: 660px;

}

/*以下、②左側のコメント*/
.balloon8 {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
}

.balloon8 .faceicon2 {
  margin-right: 0px;
  width: 100px;
}

.balloon8 .faceicon2 img {
  height: auto;

}

.faceicon2 img {
  margin-top: 13px;
  margin-left: 30px;

}

.balloon8 .chatting2 {
  width: 100%;
  text-align: left;
}

.chatting2 {
  margin-left: 20px;
  margin-bottom: 40px;
  margin-top: 25px;
}

.says2 {
  display: inline-block;
  position: relative;
  margin: 15px 0 0 50px;
  padding: 30px;
  max-width: 80%;
  font-size: 22px;
  border-radius: 12px;
  background: #ffffff;
  color: #757474;

}

.says2:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 25px;
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #ffffff;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

.says2 p {
  margin: 0;
  padding: 0;
  text-align: center;
}



#input_area {

  margin-top: 0px;

}



.ok {
  color: #ff8e9d;
  font-size: 15px;
  padding: 5px;
  border-bottom: solid 2px #ffa500;
  width: 100%;
padding-left: 11px;
  margin-top: 5px;
  margin-bottom: 10px;

}

.ng {
  font-size: 15px;
  padding: 5px;
  border-bottom: solid 2px #ffa500;
  width: 100%;

  padding-left: 11px;
  margin-top: 5px;
  margin-bottom: 10px;
}

/* 1~9ボタン処理 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  margin: 0px auto;
  padding: 10px;
  width: 800px;
  margin-bottom: 25px;
}

.grid-item {
  padding: 15px;
  text-align: center;
  background-color: #ffffff;
  border: 2px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
}

.grid-item2 {
  padding: 15px;
  text-align: center;
  background-color: #ffffff;
  border: 2px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
  font-size: 20px;
  width: 100px;

}

.grid-item:hover {
  background-color: #ddd;
}

.grid-item2:hover {
  background-color: #ddd;
}

/* 1~9ボタン処理 */

#area4 {
  margin-top: 0px;

}

#check {
  opacity: 0.5;
  /* 要素を薄くする */
  pointer-events: none;
  /* クリックやタップを無効にする */
  cursor: not-allowed;
  /* カーソルを禁止マークにする */

  font-size: 35px;
  letter-spacing: 0.1em;
  cursor: pointer;

}

#btt {

  letter-spacing: 0.1em;
  font-size: 1.8em;
}



.goback {
  margin-top: 40px;
  font-size: 1.8em;
  letter-spacing: 0.1em;

}

.privacy_word {

  width: 60%;
  background-color: #ffffff;
  padding: 50px;
  margin: 30px auto 0px;
  font-size: 18px;
  border-radius: 15px;
}

.privacy_h1 {

  font-size: 24px;
  color: #ff8e9d;
}

#over_mozi {
  height: 20px;
  color: #000000;
  margin-bottom: -15px;
  margin-top: -5x;

  text-shadow: 2px 2px 0px #ffffff;
}

#content_mozi {
  font-size: 20px;
  letter-spacing: 0.1em;
  color: #25271F;

  text-shadow: 2px 2px 0px #ffffff;
}

#f_r {
  display: block;
  margin: 20px auto 0px;
  text-align: center;
}

.q02 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.q03 {
  margin-top: 0px;
  margin-bottom: 0px;
}


.coment_k2 {
  padding: 5px;
  background-color: #ffa500;
  margin-top: 5px;
}

.coment_k3 {
  font-size: 40px;
  color: #ffffff;

}


.score_area {
  width: 60%;
  margin: 0 auto;
  background-color: #ffffff;
  /*背景色*/
  border: solid 6px #ffa500;
  /*線*/
  color: #000000;
  /*文字色*/
}

.msg {
  letter-spacing: 0.1em;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 20px;
}

#ok_area .msg {

  color: #ff8e9d;
}

.msg2 {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  /*background-color:#ffa500;背景色*/
  color: #ffffff;

}


#msg3 {
  width: 70%;
  margin: 0 auto;
  padding: 10px;
  background-color: #ffffff;
  /*背景色*/
  border: solid 2px #333333;
  /*線*/
  color: #333333;
  font-size: 32px;
  margin-top: 40px;
  border-radius: 15px;
  position: relative;
}
 #msg3 h1{
  font-size: 32px;
  font-weight: normal;
 }


#h_hyouzi {
  position: relative;
  margin: -10px auto;
}

/* 吹き出しの処理 */

.balloon5 {
  width: 100%;
  margin: 10px;
  overflow: hidden;

  font-size: 16px;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img {
  width: 100%;
  height: auto;

}

.balloon5 .chatting {
  width: 100%;
}

.says {
  color: #757474;
  display: inline-block;
  position: relative;
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #ffffff;
}


.says:after {
  content: "";
  color: #ffffff;
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #ffffff;
}

.says p {
  margin: 0;
  padding: 0;
}

.check_area {
  margin-top: 10px;
  margin-bottom: 0px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;

}


/* 飛行機の処理 */

#awan2 {
  position: absolute;
  top: 30px;
  left: 0px;
  width: 100px;
  height: 50px;
  opacity: 1;
  z-index: -5;
  text-align: center;
  margin: 0px;
  padding: 0px;
  background-image: url("images/private_jet.png");
  background-repeat: no-repeat;
  background-size: 4.5%;
  background-position: 70% 80%;
  width: 100%;
  height: 100px;
  animation: awan-animasi 60s linear infinite;
  -ms-animation: awan-animasi 60s linear infinite;
  -moz-animation: awan-animasi 60s linear infinite;
  -webkit-animation: awan-animasi 60s linear infinite;
}


@keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 110% -10%;
  }

  ;
}

@-webkit-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 110% -10%;
  }

  ;
}

@-ms-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 110% -10%;
  }

  ;
}

@-moz-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 110% -10%;
  }

  ;
}

/*--------------------サイトの進め方ページ----------*/

.guide {
  max-width: 800px;
  margin: 2em auto;
  padding: 2em;
  line-height: 1.8;
  background: #fff8f0;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.guide h2 {
  font-size: 1.6em;
  color: #ff6f61;
  margin-bottom: 1em;
}

.step h3 {
  font-size: 1.2em;
  color: #4a90e2;
  margin-top: 2em;
}

.support h3 {
  font-size: 1.2em;
  color: #7b4f9d;
  margin-top: 2em;
}




/* ------------ ログインエリア【共通】 ------------ */

.login_area input[type="text"] {
  pointer-events: auto;
  /* クリックを有効化 */
  padding: 10px 10px 10px 20px;
  width: 300px;
  margin-bottom: 20px;
  margin-top: 20px;
}

#mypage_kin {
  width: 80%;
  padding: 20px;
  border: 3px #999999 solid;
  background-color: #ffffff;
  border-radius: 20px;
  margin: 10px auto 40px;
}


.login_area {

  width: 60%;
  margin: 0 auto;
  text-align: center;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 0px;

}

.login_area_txt {

  margin: 0 auto;

}

.login_area02 {

  width: 60%;
  margin: 0 auto;
  text-align: center;
  font-weight: lighter;
}

.login_area03 {

  width: 60%;
  margin: 0 auto;
  text-align: center;
  font-weight: lighter;
}



.my_back {
  margin: 20px 0px 20px;
}

.example {
  position: relative;
}

.example p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  /*文字の装飾は省略*/
}

.example img {
  width: 60%;
  margin: 10px 0 10px;
}

.login_area h2 {
  position: relative;
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  width: 300px;
  text-align: center;
  margin: 0px auto;
  margin-bottom: 35px;
}

.login_area h2::before,
.login_area h2::after {
  position: absolute;
  top: 0.8rem;
  height: 1.8rem;
  content: '';
}

.login_area h2::before {
  border-left: solid 3px;
  left: 0;
  transform: rotate(-30deg);
}

.login_area h2::after {
  border-right: solid 3px;
  right: 0;
  transform: rotate(30deg);
}

.syougo_txt {

  font-size: 27px;
  display: inline-block;
  margin: 40px 0px 40px;
  color: #00BCD4;
}

.mypage_area {
  font-size: 22px;

}

.mypage_area h2 {
  font-weight: normal;
}


/***　おしゃれテーブル シアンカラー　***/
.osare3-table {
  width: 100%;
  border-collapse: separate;
  border: none;
  border-spacing: 0px 10px;
}

.osare3-table tbody td,
.osare3-table tfoot td {
  text-align: center;
}

/* 上部ヘッダー（背景：パステルカラー） */
.osare3-table thead th {
  color: #FFF;
  font-weight: bold;
  background: #00BCD4;
}

/* 上部ヘッダーの丸み */
.osare3-table thead th:nth-child(2) {
  border-radius: 10px 0 0 0;
}

.osare3-table thead th:last-child {
  border-radius: 0 10px 0 0;
}

.osare3-table th,
.osare3-table td {
  border: 0 none !important;
}

/* １行ずつ色変更　不要なら削除 even:奇数行　odd:偶数行 */
.osare3-table tr:nth-child(even) td {
  background: #f5f5f5;
}

.osare3-table tr:nth-child(odd) td {
  background: #FDFDFD;
}

/* ヘッダーセル先頭・ボディ項目・フッター項目 */
.osare3-table tbody th,
.osare3-table tfoot th,
.osare3-table thead th:first-child {
  background: none;
  color: #666;
  font-weight: bold;
  line-height: 4.5em;
  text-align: right;
}


/*（共通）　項目の多いテーブルの幅を調整*/
@media (max-width: 767px) {

  .col6t th,
  .col6t td {
    font-size: 0.4em;
    padding: 10px 0px;
  }

  .col5t th,
  .col5t td {
    font-size: 0.5em;
    padding: 10px 0px;
  }

  .col4t th,
  .col4t td {
    font-size: 0.7em;
    padding: 10px 5px;
  }

  .col3t th,
  .col3t td {
    font-size: 0.8em;
    padding: 10px 10px;
  }
}


.says_m_color {
  text-decoration: underline wavy #EF8998;
  color: #27acd9;
  font-size: 16px;
}

.button-4 {
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 1.5rem;
  color: #ffffff;
  text-decoration: none;
  user-select: none;
  border: 1px #ffa500 solid;
  border-radius: 20px;
  transition: 0.4s ease;
  background: #ffa500;
  width: 300px;
  font-family: "Mochiy Pop One", serif;
  margin: 20px 0px;
}

.button-4:hover {
  color: #ffa500;
  background: #ffffff;
}

#item_image {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 要素の間にスペースを確保 */
  margin: 40px auto 40px;
  font-size: 17px;
  gap: 20px;
}

.item_image_01 {
  flex: 1;
  /* 各要素の幅を均等に設定 */
}

.item_image_02 {
  flex: 1;
  /* 各要素の幅を均等に設定 */
}

.item_image_03 {
  flex: 1;
  /* 各要素の幅を均等に設定 */
}

.mode_text{
    padding: 0.8rem 0;
    margin: 0px auto;
    margin-bottom: 0.2rem;
    background-image: linear-gradient(90deg, #b2d5de 0 20%, #dedede 20%);
    background-repeat: no-repeat;
    background-size: 100% 10%;
    background-position: bottom;
    color: #323232;
    font-size: 20px;
    width: 70%;
}

/* ------------ エンドページ【共通】------------ */

#score_back_number {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 20px;
  text-align: left;
  width: 95%;
  margin: 0 auto;
  margin-top: 16px;
  color: #EF8998;
  border: solid 3px #000000;
  font-size: 15px;
}

.point_area {
  text-align: center;
  margin: -30px 0px 30px;
}

#ten {

  color: #ff8e9d;
  font-size: 1em;
}

#score {
  color: #ff8e9d;
  font-size: 1.5em;

}

.end_txt {
  text-shadow: 2px 2px 0px #ffffff;
  font-size: 25px;
  text-align: center;
  color: #ff8e9d;
}

#a_c {

  text-align: center;
  font-size: 4em;

  color: #ff8e9d;
  letter-spacing: 0.1em;
  margin-top: 0px;
  margin-bottom: 20px;
}

.kekka_mozi02 {
  text-align: center;
  background-color: #ffffff;
  width: 250px;
  margin: 0 auto;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 30px;
  padding: 5px;
  color: #757474;
}

.kekka_mozi03 {
  text-align: center;
  color: #EF8998;
  font-size: 32px;
  rotate: -10deg;
  margin-top: -40px;
  margin-left: 5px;
  text-shadow: 2px 2px 0px #ffffff;
}

#kekka {
  padding: 12px;
  text-align: left;
  border: #25271F;
  font-size: 17px;
}

.box14 {
  width: 85%;
  height: 94%;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
  background: #ffffff;
  border: solid 3px #000;
  border-radius: 2em;

}

.box14 p {
  margin: 0;
  padding: 0;
}

#k_text {
  text-align: center;
  padding: 5px 5px 5px 13px;
  background-color: #ffa500;
  color: #ffffff;
}

.e_text {

  font-size: 15px;
  text-align: center;
}


/* ------------ かけ算の勉強ページエリア【共通】 ------------ */




/* メイン見出し（study_h） */
.study_h {
  font-size: 36px;


  color: #2c7be5;
  background-color: #e0f7fa;
  padding: 0.8em 1.2em;

  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  margin-top: 40px;
  margin-bottom: 40px;

  transition: all 0.3s ease;
}


/* サブ見出し（study_h2） */
.study_h2 {
  font-size: 26px;


  color: #ff6f61;

  background-color: #fff3f0;
  padding: 0.6em 1em;

  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  margin-top: 40px;
  margin-bottom: 40px;

  transition: all 0.3s ease;
}



.study_word {
  font-size: 21px;

}

/*------------list.htmlページのデザイン【共通】 ------------  */

.list_container {

  width: 70%;
  margin: 0px auto;

}

.wrapper_btn_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0px auto;
  padding: 15px;
  padding-bottom: 20px;
  width: 75%;
}

.check_txt {
  text-align: center;
  font-size: 20px;
}

.box_design {
  text-align: center;
  background-color: #ffffff;
  margin: 15px;
  padding: 15px;
  border-radius: 15px;
  border: solid 2px #000;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
}

#link_area {

  margin: 0px auto;
  text-align: center;
  font-size: 14px;
}

#link_area a {
  background-color: #ffffff;
  border-radius: 50% 50%;
  display: inline-flex;
  /* display: flex; に変更 */
  justify-content: center;
  /* 水平方向の中央揃え */
  align-items: center;
  width: 60px;
  height: 60px;
  margin: 8px;
  padding: 8px;
  text-align: center;
  vertical-align: bottom;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease-in-out;
}

#link_area a:hover {
  background: #27acd9;
  color: #FFF;

}

/* ------------ サンプルページエリア【共通】 ------------ */

.kuku_mozi2 {

  margin-top: 10px;

}



#print_area {

  width: 83%;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20px;
  margin-top: 40px;
  margin-bottom: 80px;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  /* 水平方向にセンターに配置 */

}

#print_area2 {

  width: 55%;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20px;
  margin-top: 40px;
  margin-bottom: 80px;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  /* 水平方向にセンターに配置 */
}

.print_item {
  text-align: center;
  position: relative;
  width: 180px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.pdf_icon {
  position: absolute;
  top: -20px;
  left: -10px;
  border: none;
}

.pdf_icon img {

  border: none;
}

.print_date {

  border: 3px solid #ff8e9d;
  border-radius: 8px;
}



.print_mozi {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  display: block;
}

/* 003 */
.button003 a {
  background: #eee;
  border-radius: 50px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  width: 120px;
  padding: 10px 20px;
  color: #27acd9;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  border: #27acd9 solid 1px;
  font-size: 12px;
}

.button003 a:hover {
  background: #27acd9;
  color: #FFF;
}

.button003 a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #27acd9;
  border-right: 3px solid #27acd9;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 20px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}

.button003 a:hover:after {
  border-color: #FFF;
}

/* ------------ 広告エリアのcss ------------ */

.koukoku {
  padding: 10px;
  margin: 0px auto;
  text-align: center;
  color: #757474;
  border-radius: 15px;
  width: 75%;
}

.koukoku a{
    transition: all .3s ease-in-out;
    text-decoration: none;
}
.koukoku a:hover{
    color: #2c2c2c;
}

.koukoku_phone {
  padding: 5px;
  margin: 0px auto;
  text-align: center;
  color: #757474;
  border-radius: 15px;
  font-size: 13px;
  width: 90%;
}

.koukoku_phone {
  display: none;
}


/*  ------------ 不使用中 ------------  */

.tet {
  display: block;
}

.ba_mozi {

  display: block;
  padding: 10px;
  background-color: #ffffff;
  color: #000;
}

.position-right-top {
  position: absolute;
  /* スクロールしても位置が固定されます */
  top: 0;
  right: 45%;
  z-index: 10;
  /* 他の要素よりも前面に表示されます */
}

.position_text {
  color: #000000;

  text-shadow: 2px 2px 0px #ffffff;
}

/*
.fadein {
  opacity:0;
}
*/

.anime {
  animation-name: fade_bottom;
  animation-duration: 0.5s;
  opacity: 1;
}

@keyframes fade_bottom {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

.coment_k3 {
  font-size: 28px;
  color: #ffffff;
  margin-top: -20px;
}

.msg4 {
  font-size: 35px;
}

.content {
  width: auto;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-text {
  color: #333;
}

.nunber01 {

  font-size: 40px;
  color: #ff8e9d;

}

.nunber02 {

  font-size: 23px;

}

.heading_word {

  font-size: 70px;
  text-align: center;
  margin: 0px;
  padding: 0px;
  text-shadow: 3px 3px 0px #ffffff;
}


/*  ------------ PC向けのスタイル ------------  */

@media screen and (min-width: 1200px) {


  /*  ------------ 問題エリア【PC】 ------------  */

  #smart_area {
    display: none;
  }



  #h_hyouzi {
    margin-top: -15px;
  }

  .balloon5 {
    margin-top: 0px;
  }

  #content_mozi {
    margin-top: 0px;
  }

  .line-bc {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .line-bc2 {
    margin-top: 50px;
    margin-bottom: 30px;
  }

  .label_mozi {
    color: #ffffff;
    background-color: #ffa500;
    padding: 10px;
    width: 550px;
    margin: 0px auto;
    margin-bottom: 15px;
    border-radius: 10px;
    font-size: 20px;
  }

  .label_mozi02 {
    color: #757474;
    background-color: #ffffff;
    padding: 15px;
    width: 300px;
    margin: 0px auto;
    margin-bottom: 15px;
    border-radius: 10px;
  }


  #ok_area {

    margin-top: -20px;

  }

  #ng_area {

    margin-top: -45px;

  }

  #yoku img {
    display: block;
    margin: 0 auto;
    /*padding-top: 100px;*/
  }

  .const_txt {
    display: none;
  }

  .yoku_sub {

    margin-top: 30px;
  }

  .kuku_mozi {
    width: 800px;
    font-size: 28px;

  }

  .kuku_mozi img {
    width: 480px;

  }

  /*  ------------ リストエリア【PC】 ------------  */

  #link_area {

    margin: 0px auto;
    text-align: center;
    font-size: 20px;
  }

  #link_area a {
    background-color: #ffffff;
    border-radius: 50% 50%;
    display: inline-flex;
    /* display: flex; に変更 */
    justify-content: center;
    /* 水平方向の中央揃え */
    align-items: center;
    width: 90px;
    height: 90px;
    margin: 8px;
    padding: 8px;
    text-align: center;
    vertical-align: bottom;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease-in-out;
  }

  #link_area a:hover {
    background: #27acd9;
    color: #FFF;

  }

  /*  ------------ トップエリア【PC】 ------------  */

.kanji{
  display: none;
}


  #label_lyout {

    width: 550px;
    font-size: 24px;
  }

  .checkbox-2 label:has(:checked)::after {
    position: absolute;
    top: 10px;
    left: 7px;

  }


  .s_image3{
  display: none;

}

  .box_center {

    font-size: 24px;
    text-align: center;
    width: 250px;
    margin: 0px auto;
  }

/*

  #top_info_question {
    display: none;
  }
*/

/*
  #top_info_bg {
    display: none;
  }
*/
  .custom_p02 {
    display: none;
  }

  .js-backToTop2 {
    position: fixed;
    right: 20px;
    /*bottom: 280px;*/
    bottom: 30px;
  }


  /*  ------------ エンドエリア【PC】 ------------  */

  .box14 {
    margin-left: 30px;
  }

#bt03_area{
  display: none;
}

/*

 .bg_back_02{
  display: none;
 }
  .bg_back_03{
  display: none;
 }

 */

}

/*  ------------タブレット向けのスタイル ------------ */

@media screen and (min-width: 768px) and (max-width: 1199px) {

  /*  ------------問題エリア 【タブレット】------------ */

  #flex-container {

    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
  }

  #yoku {
    flex: 1;
    /* 左カラムの比率を1とする */
    order: 2;
    max-width: 100%;

  }
/*
  #top_info_question {
    display: none;
  }
*/
/*
  #top_info_bg {
    display: none;
  }
*/

  /*
  .balloon5 {
    display: none;
  }
  */

  .emphasis_design5 {
    font-size: 19px;
    margin-top: 20px;
    margin-bottom: 0px;

  }

  #smart_area {
    display: none;
  }

  .coment_k3 {
    font-size: 20px;
    color: #ffffff;
    margin-top: -20px;
  }

  #msg3 {
    font-size: 20px;
  }
 #msg3 h1{
  font-size: 20px;
  font-weight: normal;
 }

  .msg4 {
    font-size: 30px;
  }

  #input_area {

    font-size: 10px;
  }

  .input_box {
    margin-top: 30px;
    width: 120px;
    height: 110px;
    border: solid 2px#000;
    background-color: #ffffff;
    padding: 10px;
    display: block;
    font-size: 70px;
  }

  .label_mozi {
    color: #ffffff;
    background-color: #ffa500;
    padding: 10px;
    width: 400px;
    margin: 0px auto;
    margin-bottom: 15px;
    border-radius: 10px;
  }

  .label_mozi_h {

    font-size: 20px;


  }

  #awan2 {
    display: none;
  }

  .checkbox-2 label:has(:checked)::after {
    position: absolute;
    top: 6px;
    left: 7px;

  }


  .box_center {

    font-size: 19px;
    text-align: center;
    width: 180px;
    margin: 0px auto;
  }

  .label_mozi02 {
    color: #757474;
    background-color: #ffffff;
    padding: 10px;
    width: 400px;
    margin: 0px auto;
    margin-bottom: 15px;
    border-radius: 10px;
  }

  #center_v {
    flex: 2;
    /* 中央カラムの比率を3とする */
    order: 1;
    max-width: 100%;
    padding: 10px;
  }

  #right_area {
    flex: 1;
    /* 右カラムの比率を1とする */
    order: 3;
    max-width: 100%;
    padding: 10px;
  }



  /*  ------------トップエリア【タブレット】 ------------ */


.kanji{
  display: none;
}

  .custom_p02 {
    display: none;
  }

  .js-backToTop2 {
    position: fixed;
    right: 20px;
    bottom: 30px;
  }

  .kuku_mozi {
    margin-bottom: 30px;
    width: 70%;

  }

  .site_info {

    width: 80%;
    background-color: #ffffff;
    padding: 40px;
    font-size: 18px;
    margin: 30px auto 70px;
    border-radius: 30px;
    color: #757474;
  }

  #print_area {

    width: 80%;
    grid-template-columns: repeat(3, 1fr);

  }

  .s_image{
  display: none;

}

  .s_image2{
  display: none;

}

  #print_area2 {

    width: 80%;
    grid-template-columns: repeat(3, 1fr);
  }

  .index_mozi {
    text-align: center;
    font-size: 25px;
    background-color: #ffa500;
    color: #ffffff;
    padding: 15px;
    margin: 0px auto;
    margin-top: 40px;
    width: 85%;
  }

  .fuki {
    padding: 3rem 3rem 3rem 3rem;
    font-size: 22px;
  }

  .const_txt {
    display: none;
  }

  #balloon_image {
    display: none;
  }

    #balloon_image2 {
    display: none;
  }

  #label_lyout {

    width: 450px;
    font-size: 19px;
  }

/*

   .bg_back_02{
  display: none;
 }

    .bg_back_03{
  display: none;
 }


 */

   #banner_area02 {
    display: none;
  }

  /* ------------スタートエリア  【タブレット】------------*/

#playAudio{
  position: absolute;
  bottom:300px;
  right: 40px;
}

#playAudio02{
  position: absolute;
  bottom:300px;
  right: 40px;
}

  /* ------------エンドページ  【タブレット】------------*/

  .score_area {
    width: 70%;
    margin: 0 auto;
    background-color: #ffffff;
    /*背景色*/
    border: solid 6px #ffa500;
    /*線*/
    color: #000000;
    /*文字色*/
  }

  .yoku_sub {

    margin-top: 50px;
  }

  #bt10_area{
  display: none;
}


  /* ------------list.html デザイン 【タブレット】 ------------*/

  .wrapper_btn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0px auto;
    padding: 0px;
    padding-bottom: 50px;
    width: 85%;
    margin-top: -20px;
  }

  .wrapper_btn_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0px auto;
    padding: 15px;
    padding-bottom: 20px;
    width: 85%;
  }


  .box_design {
    text-align: center;
    background-color: #ffffff;
    margin: 15px;
    padding: 15px;
    border-radius: 15px;
  }

  .nunber01 {

    font-size: 36px;

  }

  .nunber02 {

    font-size: 15px;

  }

}

/*  ------------スマートフォン向けのスタイル ------------ */

@media screen and (max-width: 767px) {

  /*  ------------共通エリア【スマホ】 ------------ */

  body {
    background-color: #fff2b8;
    background-image: url("images/sougen53_sp.png");
  /*背景画像 */
  background-repeat: no-repeat;
  /*画像の繰り返しを無効にする */
  background-attachment: scroll;
  background-position: top center;
  /*画像を中央に配置 */
  }

  #container {
  
    padding-top: 38px;
  }

  .nav-list {

    width: 300px;
  }


  .hamburger {
    top: 7px;
    left: 5px;
  }

  .loading {

    background: #fff2b8;

  }


  /*ハンバーガーメニュー*/

  .conts-body {

    margin: 0 auto;
    width: 100%;
    background-color: #ffffff;
    height: 45px;
    z-index: 50;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0px;
    left: 0px;

  }

  .const_txt {
    text-align: right;
    padding-right: 20px;
    margin-bottom: 15px;
    color: #575757;
  }

  .logo_color01 {
    color: #2EA2CB;
  }

  .logo_color02 {
    color: #F4A017;
  }

  .logo_color03 {
    color: #757474;
  }

  .logo_color04 {
    color: #958AC1;
  }

  .logo_color05 {
    color: #E48492;
  }

  /*  ------------トップエリア【スマホ】 ------------ */

  .fixed-image05 {
    position: absolute;
    top: 160px;
    /* 上からの距離を指定 */
    left: -5px;
    /* 左からの距離を指定 */
  }

  #top_info_question2 img {

    width: 140px;
    margin-left: -5px;
  }

  #top_info_question3 {

    display: none;
  }

  .link_p {

    width: 85%;
    font-size: 15px;
    margin: 0px auto;
    margin-top: 30px;
  }

.socre_image_01 img{
  width: 90px;
}

  .custom_p02 {
    text-align: center;
    color: #757474;
    border-bottom: dotted 2px #757474;
    border-top: dotted 2px #757474;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 3px;
    padding-top: 3px;
  }

  .advertisement {
    margin: 35px auto;
    width: 80%;
    text-align: center;
    color: #7F4F21;
    font-size: 13px;
    padding: 20px 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 20px;
  }

  .s_image3 img{
  width: 260px;

}

  #toggleSwitch {

  position: fixed;
  top: -11px;
  left: 70px;
  z-index: 10;

}

#profile_area{
  width: 72%;
  margin-top: 50px;
  font-size: 14px;
}

  .limited-checkbox2{

    margin-bottom: -2px;
  }


.knowledge-box {
  max-width: 350px;
}


  /*

  .bg_back_02{
    position: absolute;
    top:800px;
    left: 0px;
    z-index: -5;
  }

 .bg_back_02 img{
  width: 100%;
 }

   .bg_back_03{
    position: absolute;
    top:630px;
    left: -60px;
    z-index: -5;
  }

 .bg_back_03 img{
  width: 100%;
 }

 */

  .site_info {

    width: 75%;
    background-color: #ffffff;
    padding: 30px;
    font-size: 14px;
    margin: 30px auto 70px;
    border-radius: 30px;
    color: #757474;
  }

  .site_info img {

    width: 85%;

  }

  .accordion {
    width: 100%;
    margin-bottom: 30px;
  }

  .accordion-header {
    width: 55%;
    font-size: 13px;
  }

  .accordion-content {
    width: 100%;
    padding: 12px 0px 10px;
  }

  .accordion-header span,
  .accordion-content span {
    padding-left: 0px;
    position: relative;
  }

  /* 004 */
  .button004 a {

    width: 180px;
    padding: 15px 20px;
    font-size: 14px;
  }

  .print_item {
    margin: 20px auto 20px;
    width: 150px;
  }

  .print_date {
    width: 80%;
  }

  .pdf_icon {
    width: 30%;
  }

  .pdf_icon {
    position: absolute;
    top: -18px;
    left: 0px;
    border: none;
  }

/*
  #top_info_question img {
    width: 50px;
  }
*/


  /*
  #top_info_question img {
    animation: slideinRight 0.7s 1;
  }
  
  @keyframes slideinRight {
    0% {
      transform: translateX(90px);
      opacity: 0; 
    }
    100% {
      transform: translateX(0);
      opacity: 1; 
    }
  }
    */


/*
  #top_info_bg img {
    width: 105%;
    z-index: -20;
    opacity: 0.7;
  }

*/






  /*
    .bg {
      animation:slide 10s ease-in-out infinite alternate;
      background-image: linear-gradient(-120deg, #fff2b8 50%, #ffffff 50%);
      bottom:0;
      left:-50%;
      opacity:.5;
      position:absolute;
      right:-50%;
      top:0px;
      z-index:-1;
      height: 450px;
    }
    
    .bg2 {
      animation-direction:alternate-reverse;
      animation-duration:10s;
    }
    
    .bg3 {
      animation-duration:10s;
    }
  
    @keyframes slide {
      0% {
        transform:translateX(-25%);
      }
      100% {
        transform:translateX(25%);
      }
    }
    */
  #index_neko {

    margin: 65px 0px 55px;
  }

  .check_area {
    margin-top: 20px;
    margin-bottom: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px;
    border-radius: 20px;
    width: 98%;
    margin-left: -3px;
  }

  .btn_c_area {
    position: relative;
    width: 320px;
    margin: 0 auto;
  }

  .change_mode {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 125px;
    transform: rotate(-20deg);
  }

    .change_mode2 {

    display: none;
  }

  #balloon_image {
    display: none;
  }

  #balloon_image2 {
    display: none;
  }

  #logo_area {
    display: none;
  }

    #logo_area2 {
    display: none;
  }

  #haikei_area {
    display: none;
  }

  .custom_p {

    display: none;
  }

  /* ボタンの指定 */
  .js-backToTop3 {
    position: absolute;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    left: 150px;
    top: 12px;
    border: none;
    width: 150px;
    height: 40px;
  }


  .login_beside_top {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    /* 横方向の中央揃え */
    gap: 4px;
    align-items: center;
    /* 縦方向の中央揃え */
    height: 60px;


  }

  .login_beside02 {

    gap: 4px;
  }

  .img_center img {
    width: 80%;
  }

   .img_p_size img{
    height: 70%;
   }

  #label_lyout {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0px auto;
    padding: 0px;
    padding-bottom: 0px;
    width: 80%;
    margin-top: 10px;
    font-size: 13px;
    margin-bottom: 0px;


  }

  #label_lyout label {

    margin-bottom: 15px;
  }



  .fuki img {
    width: 100px;
  }

  .fuki {
    padding: 2rem 2rem 2rem 2rem;
    margin-top: 65px;
  }

  .txt_r {
    margin-top: -10px;
  }


  .msg {

    margin-top: -30px;
  }

  .btn_04 {
    width: 180px;
    font-size: 20px;
  }

  .label_mozi {

    font-size: 13px;
    margin-top: 10px;
    color: #ffffff;
    background-color: #ffa500;
    padding: 5px;
    width: 85%;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);

  }

  .label_mozi_h {

    font-size: 15px;

  }

  .label_mozi02 {

    font-size: 14px;
    margin-top: 10px;
  }

  .index_mozi {
    text-align: center;
    font-size: 19px;
    background-color: #ffa500;
    color: #ffffff;
    padding: 15px;
    margin: 0px auto;
    margin-top: 40px;
    margin-bottom: 30px;
    width: 85%;
   
  }

  .says2 {
    display: inline-block;
    position: relative;
    margin: 20px 0 0 50px;
    padding: 25px 15px 25px;
    font-size: 13px;
    border-radius: 12px;
    background: #ffffff;
  }

  /*以下、①背景色など*/
  .line-bc {
    display: block;
    margin: 15px auto 0px;
    width: 90%;

  }

  /*以下、①背景色など*/
  .line-bc2 {
    display: block;
    margin: 15px auto 0px;
    width: 90%;

  }

  .faceicon2 img {
    margin-left: 12px;
    margin-top: 18px;
  }

  .chatting2 {
    margin-left: 0px;
    margin-bottom: 30px;
    margin-top: 11px;
  }

  .btn_06 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 60px;
    margin: auto;
    padding: 0.8rem 1.5rem;
    border: 2px solid #27acd9;
    color: #27acd9;
    border-radius: 100vh;
    background: #ffffff;
    transition: 0.5s;
    margin-top: 40px;
    cursor: pointer;
    font-size: 14px;
  }

  .btn_06:hover {
    color: #fff;
    background: #27acd9;
    cursor: pointer;
  }

  .kuku_mozi {

    width: 85%;
    font-size: 15px;
  }

  .kuku_mozi img {

    width: 300px;
  }

  #print_area {
    padding: 25px 5px 15px;
    width: 82%;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 30px;
  }

  #print_area2 {
    padding: 5px;
    width: 77%;
    grid-template-columns: repeat(1, 1fr);
  }

  .conts-menu {
    display: none;
  }


  .print_date img {

    width: 38%;

  }

  .print_mozi {

    font-size: 13px;
  }


  .button003 a {
    background: #eee;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    width: 85px;
    padding: 10px 20px;
    color: #27acd9;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    border: #27acd9 solid 1px;
    font-size: 12px;
  }

  .fuki {
    width: 72%;
    font-size: 15px;
  }

  .s_image{
  display: none;

}

  .s_image2{
  display: none;

}

  /*  ------------問題エリア【スマホ】 ------------ */

  #flex-container {

    padding-top: 38px;
  }

  #question {

    font-size: 60px;
    color: #25271F;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2), 0 0 5px rgba(255, 255, 255, 0.2);


  }

  /* 1~9ボタン処理 */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin: 5px auto;
    padding: 5px;
    width: 90%;
    margin-bottom: 0px;
  }

  .grid-item {
    padding: 15px;
    text-align: center;
    background-color: #ffffff;
    border: 2px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;

  }

  .grid-item2 {
    padding: 15px;
    text-align: center;
    background-color: #ffffff;
    border: 2px solid #ccc;
    border-radius: 20px;
    cursor: pointer;
    font-size: 15px;

  }

  .item01 {
    order: 1;
  }

  .item02 {
    order: 2;
  }

  .item03 {
    order: 3;
  }

  .item04 {
    order: 4;
  }

  .item05 {
    order: 5;
  }

  .item06 {
    order: 7;
  }

  .item07 {
    order: 8;
  }

  .item08 {
    order: 9;
  }

  .item09 {
    order: 10;
  }

  .item10 {
    order: 11;
  }

  .item11 {
    order: 6;
  }

  .item12 {
    order: 12;
  }

  .ng {
    display: block;
    margin-bottom: -20px;
  }

  .ok {
    display: block;
    margin-bottom: -20px;

  }

  #question_area {

    margin-top: 25px;
    /*background-image: url("images/2091_line.png");
    background-size: cover;
    background-repeat:repeat-x;
    background-position: center;
    background-size: 32% auto; 
    */
  }

  .icon img {

    width: 100px;
  }

  #content_mozi {

    margin-top: -20px;

  }

  #content_mozi2 {

    margin-top: -20px;

  }

  #msg3 {
    width: 80%;
    margin: 0 auto;
    padding: 10px;
    background-color: #ffffff;
    /*背景色*/
    border: solid 1px #333333;
    /*線*/
    color: #333333;
    font-size: 15px;
    margin-top: 20px;
  }
 #msg3 h1{
  font-size: 15px;
  font-weight: normal;
 }
  
  .goback {

    margin-top: -25px;
    font-size: 14px;
  }

  .msg4 {
    font-size: 17px;
  }

  .coment_k3 {
    font-size: 15px;
    color: #ffffff;
    margin-top: -20px;
  }


  .image_move {

    position: absolute;
    bottom: 133px;
    left: 90px;

  }

  #input_area {
    display: flex;
    margin: 0px auto;
  }

  #l_box {
    flex: 0;
    /* 左カラムの比率を1とする */
    max-width: 100%;
    display: none;
  }

  #c_box {
    flex: 1;
    /* 左カラムの比率を1とする */
    max-width: 100%;
  }

  #r_box {
    flex: 1;
    /* 左カラムの比率を1とする */
    max-width: 100%;

  }

  .input_box {
    margin-top: 5px;
    width: 60px;
    height: 60px;
    border: solid 2px#000;
    background-color: #ffffff;
    padding: 10px;
    display: block;
    font-size: 40px;
    margin-left: 5px;
  }

  #yoku {
    padding-top: 10px;
  }

  #image_zone {

    margin-bottom: -30px;
    margin-top: 10px;
  }

  #image_zone img {

    width: 100%;
    max-width: 400px;

  }


  .question_mozi {
    display: inline-block;
    text-align: center;
    font-size: 19px;
  }

  #awan2 {
    display: none;
  }

  #h_hyouzi {
    margin-top: -39px;
  }

  #content_mozi {

    margin-left: 0px;
    margin-bottom: 0px;
    font-size: 20px;
  }

  #content_mozi2 {

    margin-left: 0px;
    margin-bottom: 0px;
    font-size: 20px;
  }

  .btn_07_area {
    margin-top: 30px;
  }

  .balloon3-right-btm {

    display: none;
  }


  .balloon5 {
    margin-top: 15px;
    margin-bottom: 20px;
  }

  #flex-container {

    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
  }

  #yoku {
    flex: 1;
    /* 左カラムの比率を1とする */
    order: 2;
    max-width: 100%;
    padding: 10px;
  }

  #center_v {
    flex: 2;
    /* 中央カラムの比率を3とする */
    order: 1;
    max-width: 100%;
    padding: 10px;
  }

  #right_area {
    flex: 1;
    /* 右カラムの比率を1とする */
    order: 3;
    max-width: 100%;
    padding: 10px;
  }

  .tes {
    text-align: center;
    margin: 0px auto;
  }

  /*
#yoku{

  display: none;
}

.balloon5 {
  display: none;
}

#kekka{
  display: none;
}

.box14{
  display: none;
}
*/

  .emphasis_design5 {
    font-size: 20px;
    margin-top: 20px auto;
    margin-bottom: 0px;
    width: 80%;
    display: none;
  }

  .emphasis_design5 {

    display: none;
  }

  .position-right-top {
    position: absolute;
    /* スクロールしても位置が固定されます */
    top: 37px;
    right: 40%;
    z-index: 5;
    /* 他の要素よりも前面に表示されます */
  }

  .position_text {
    color: #333333;
    font-size: 12px;
  }

  .says {
    color: #757474;
    display: inline-block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #ffffff;
    font-size: 14px;
  }

  #check {
    font-size: 18px;
  }

  /*　ムーブエリア */

  .image_move {

    position: absolute;
    bottom: 63px;
    left: 90px;

  }


  .btn_03 {
    width: 180px;

  }

  #area4 {
    margin-bottom: 40px;
    margin-top: -20px;

  }

  #buttons-container {
    display: flex;
    grid-template-columns: 1fr 1fr;
    margin: 0px auto;
    width: 90%;
  }

  #over_mozi {

    padding-top: 2px;
    font-size: 12px;
  }

  .over_mozi_inner {
    margin-top: -14px;
    padding-bottom: 27px;

  }

  #ok_area p {

    text-align: center;
    font-size: 28px;
    color: #25271F;
  }

  #ng_area p {

    text-align: center;
    font-size: 28px;
    color: #25271F;
  }

  #top_info_question4 {
    margin-top: -210px;
    z-index: 5;
  }

  #top_info_question4 img {

    width: 84px;
    margin-left: 9px;
  }

  .msg2 {
    margin-left: -18px;
  }

  .msg_size {

    font-size: 5px;
  }

  .msg_txt {

    font-size: 16px;

  }

  .msg {
    line-height: 19px;

  }

    .ba_mozi {
    font-size: 15px;

  }

#playAudio{
  position: absolute;
  bottom:197px;
  right: 17px;
}

#playAudio02{
  position: absolute;
  bottom:197px;
  right: 17px;
}


.mode_text{
 
    font-size: 15px;
    width: 80%;
}


  /* ------------ リストページ【スマホ】 ------------ */

  #list_container {

    padding-top: 20px;
  }

  /*  ------------エンドページ【スマホ】 ------------ */

  #btt {
    font-size: 18px;
  }

  .score_area {
    width: 100%;
    margin: -45px auto 0;
    background-color: #ffffff;
    /*背景色*/
    border: solid 6px #ffa500;
    /*線*/
    color: #25271F;
    /*文字色*/
  }

  .img_center2 img {
    width: 35%;
  }

  .yoku_sub {

    margin-top: 50px;
    margin-bottom: 30px;
  }

  .box14 {
    width: 240px;

  }



  #score_back_number {
    width: 240px;

  }

  #score_back_number p {
    font-size: 12px;

  }

  #bt10_area{
  display: none;
}



  /* ------------list.html デザイン【スマホ】 ------------*/

  .heading_word {

    font-size: 32px;
    margin-top: 50px;

  }

  .wrapper_btn {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0px auto;
    padding: 0px;
    padding-bottom: 10px;
    width: 100%;
    margin-top: -35px;
  }

  .wrapper_btn_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0px auto;
    padding: 0px;
    padding-bottom: 20px;
    width: 90%;
  }

  .check_txt {
    font-size: 16px;
  }

  .box_design {
    text-align: center;
    background-color: #ffffff;
    margin: 20px 5px 5px 5px;
    padding: 5px 2px 5px 2px;
    border-radius: 15px;
  }

  .nunber01 {

    font-size: 18px;

  }

  .nunber02 {

    font-size: 11px;

  }

  /* ------------プライバシーページ【スマホ】 ------------*/

  .privacy_word {
    font-size: 14px;
    padding: 20px;
    width: 77%;

  }

  /* ------------勉強方法のページ【スマホ】 -----------*/

  .study_h {
    font-size: 21px;

  }

  .study_h2 {
 
    font-size: 21px;
  }

  .study_word {
    font-size: 15px;

  }

  /* ------------広告エリアのcss ------------*/

  .koukoku {
    display: none;
  }

  .koukoku_phone {
    display: block;
  }

  #banner_area {
    display: none;
  }

  #banner_area02 {
    display: none;
  }

/*
.ad-content02{
  padding: 3px;
  font-size: 12px;
}

.ad-banner02 {
  position:absolute;
  top: 1220px;
  left:15px;
  width: 320px;
font-size: 12px;
}
*/

  /* ------------ログインページ【スマホ】 ------------*/

  .login_area {

    width: 80%;
    margin: 0 auto;
    text-align: center;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .login_area input[type="text"] {
    pointer-events: auto;
    /* クリックを有効化 */
    width: 250px;
    margin-bottom: 20px;
    font-size: 14px;
  }

  .login_txt {
    font-size: 25px;
  }

  .mypage_area {
    font-size: 14px;
    margin-top: 40px;

  }

  .point_txt {
    font-size: 15px;
  }

  .login_area h2 {

    font-size: 15px;
    width: 200px;

  }

  .syougo_txt {

    font-size: 17px;
  }

  .example p {
    width: 100%;
    top: 50%;
    left: 50%;
  }

  .example img {
    width: 100%;
    margin: 10px 0 10px;
  }

  #item_image {
    width: 90%;
    display: block;
    margin: 40px auto 40px;
    font-size: 17px;

  }

    /* ------------計算方法【スマホ】 ------------*/

.kakezan02_img{
  width: 250px;
}

}