/* CSS Document */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("../font/NotoSansJP-Regular.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url("../font/NotoSansJP-Bold.woff") format("woff");
}

html[lang="ja"] {
  font-family: "Zen Maru Gothic", "Noto Sans JP", serif;
}
/* リセットCSS（Reset CSS） */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
    
}

sup {
  vertical-align:text-top;
  font-size:small;
}

a{
    text-decoration: none;
}

a:hover{
    opacity: 0.8;
}


/* ページのボックスモデルを変更しない */
* {
  box-sizing: border-box;
}

ul, ol{
    list-style: none;
}

/* ページ全体に対する基本的なスタイル */
html {
    font-size: 18px;
    line-height: 1.5;
    position: relative;
    height: 100%;
    text-align: justify;
    text-justify: inter-word;
}

body {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 500;
    font-style: normal;
    color: #453831;
    padding: 16px;
    margin: 0;
    background-color: #e5f2e6;
}

body section{
    margin: 0 auto;
    background-color: #FDF6ED;
    border-radius: 16px;
    padding: 8px 16px 16px 16px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#starfield {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

.top_menu.submenu{
  position: relative;
  z-index: 1;                 /* 背景のcanvas(#starfield)より上に */
  padding: 16px 16px 48px;       /* ← 上部に余白を確保（.entryぶん） */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

#menu .top_menu{
  position: static;          
  top: auto !important;
  left: auto !important;
  transform: none !important;
}


/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
 body section, #menu section {
    max-width: 100%;
  }
}

/* PC標準（1024〜1439） */
@media (min-width: 1024px) and (max-width: 1439px) {
 body section, #menu section  {
    max-width: 1280px;
  }
}

/* ワイドPC（1440〜） */
@media (min-width: 1440px) {
  body section, #menu section  {
    max-width: 1600px;
  }
}

/* body section の共通スタイルを打ち消しつつ右上に固定 */
#menu > section.entry{
  position: fixed !important;     /* ← 強制固定 */
  top: 16px;
  right: 16px;
  z-index: 10;                     /* #starfield(z=0) より前 */
  background: transparent;         /* 共通のベージュを無効化 */
  padding: 0;                      /* 余白を消す */
  border-radius: 0;
  box-shadow: none;
}
#menu > section.entry a{
  display: inline-block;
  padding: 6px 12px;
  font-size: clamp(16px, 2.2vw, 20px);
  color: #334;
  border: 2px solid #fff;
  border-radius: 999px;
  background-color: #b0c4de;
  text-decoration: none;
}

#menu .top_menu .menu_details{
    background-color: #fff !important;
    padding: 8px 16px;
    border-radius: 5px; 
    position: relative;
    z-index: 2;   
    transform: translateZ(0);

}



#menu .top_menu .menu_details p, #menu .number p{
    text-align: center;
    margin-top: 10px;
    font-size: 1.3em;
}


#menu .top_menu .menu_details .code_space{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#menu .top_menu .menu_details .code_space div{
  width: 50%; 
  padding: 8px;
  text-align: left;
}

#menu .top_menu .menu_details .code_space span{
  font-size: 1.25em;
  font-weight: bold
}

#menu .top_menu .menu_details .code_space input{
  width: 200px;
  margin-left: 8px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #000;
  background: rgba(255,255,255,0.15);
  color: #000;
  -webkit-text-fill-color: #000; /* Safari用 */
  font-size: 1.1em;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  margin-right: 8px;
}







#menu .top_menu h1,
#menu .number h1{
    font-size: 1.75em;
    text-align: center;
    font-weight: bold;
    position: relative;
    z-index: 2;   
    transform: translateZ(0);
}
#menu .top_menu h1.title {
  color: #fff;
  font-size: 2.25em;
}
#menu .number h1 {
  font-size: 2em;
}

#menu .top_menu .title{
  font-size: 3em;
  color: #fff;
}


#menu .top_menu ul{
  display: flex;
  justify-content: center;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

#menu .top_menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: bold;
  text-decoration: none;
  color: white;
  text-align: center;
  background: radial-gradient(circle at 30% 30%, #4facfe, #004e92); /* 青系の放射グラデーション */
  box-shadow: 0 0 20px rgba(79, 172, 254, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 光沢ライン */
#menu .top_menu  li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
  transform: skewX(-25deg);
}

/* ホバー時 */
#menu .top_menu li a:hover {
  opacity: 1;
  box-shadow: 0 0 30px rgba(79, 172, 254, 0.9);
}

#menu .top_menu  li a:hover::before {
  animation: shine 0.8s forwards;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* 2つのモードで色分け */
#menu .top_menu  li:nth-child(1) a {
  background: radial-gradient(circle at 30% 30%, #43cea2, #185a9d); /* 緑青系（自習モード） */
  box-shadow: 0 0 20px rgba(67, 206, 162, 0.6);
}

#menu .top_menu  li:nth-child(2) a {
  background: radial-gradient(circle at 30% 30%, #ff512f, #dd2476); /* 赤ピンク系（学級モード） */
  box-shadow: 0 0 20px rgba(255, 81, 47, 0.6);
}



#menu .submenu ul {
      flex-wrap: wrap;
      gap: 0;
    }

#menu .submenu ul li{
    width: 20%;
    margin: 16px 0;
    text-align: center;
    display: flex;
    justify-content: center;
}


#menu .top_menu ul li a{
      width: 300px;
      height: 300px;
      background-color: #3498db;
      color: white;
      border-radius: 50%; /* 正円にする */
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size:2.75rem;
      cursor: pointer;
      transition: 0.3s;
      border: solid 5px #fff;
    }

#menu .submenu ul li a{
      width: 160px ;
      font-weight: bold;
      height: 160px;
      font-size:2em;
      border: solid 1px #fff;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #fff;
      color: #333;
      font-family: "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN","Yu Gothic UI", "MS PGothic", sans-serif !Important;
      font-weight: bold;

    }


/* 各天体ごとの色（グラデーション版） */
#menu .submenu ul li:nth-child(10) a {
  background: radial-gradient(circle at 30% 30%, #ffffff, #b0c4de);
} /* シリウス（青白く輝く） */

#menu .submenu ul li:nth-child(9) a {
  background: radial-gradient(circle at 30% 30%, #5dade2, #1b4f72);
} /* 海王星（深い青） */

#menu .submenu ul li:nth-child(8) a {
  background: radial-gradient(circle at 30% 30%, #b0e0e6, #4682b4);
} /* 天王星（明るい水色） */

#menu .submenu ul li:nth-child(7) a {
  background: radial-gradient(circle at 30% 30%, #f5deb3, #a0522d);
} /* 土星（黄土色） */

#menu .submenu ul li:nth-child(6) a {
  background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
} /* 木星（黄金） */

#menu .submenu ul li:nth-child(5) a {
  background: radial-gradient(circle at 30% 30%, #ff7f50, #8b0000);
} /* 火星（赤オレンジ） */

#menu .submenu ul li:nth-child(4) a {
  background: radial-gradient(circle at 30% 30%, #87cefa, #0047ab);
} /* 地球（鮮やかな青） */

#menu .submenu ul li:nth-child(3) a {
  background: radial-gradient(circle at 30% 30%, #ffe4e1, #ff69b4);
} /* 金星（ピンクベージュ） */

#menu .submenu ul li:nth-child(2) a {
  background: radial-gradient(circle at 30% 30%, #dcdcdc, #696969);
} /* 水星（グレー） */

#menu .submenu ul li:nth-child(1) a {
  background: radial-gradient(circle at 30% 30%, #fff8b0, #ffcc33);
  color: #333;
} /* お日さま（明るい黄色） */

.back_button {
    text-align: center;
    margin-top: 32px;
}

.result_back_button {
  margin-top: 16px;
}

.back_button a {
  display: inline-block;
  padding: 12px 48px;
  background: linear-gradient(135deg, #7b2ff7, #1e90ff);
  color: white;
  font-weight: bold;
  text-decoration: none;
  border-radius: 25px;
  box-shadow: 0 0 15px rgba(123, 47, 247, 0.6),
              0 0 25px rgba(30, 144, 255, 0.4);
  transition: all 0.3s ease;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}
.back_button a.screenshot, a.copy-result {
  background: #f0f0e0;
  border: solid 1px #666666;
  padding: 8px 10px 2px 10px;
  box-shadow: none;
}
a.copy-result {
  padding: 8px 8px 2px 8px;
  border-radius: 25px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}
a.copy-result img {
  height: 1.75em;
}

/* 光沢エフェクト */
.back_button a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
  transform: skewX(-25deg);
}

/* ホバー時 */
.back_button a:hover {
  box-shadow: 0 0 20px rgba(123, 47, 247, 0.8),
              0 0 30px rgba(30, 144, 255, 0.6);
}

.back_button a:hover::before {
  animation: shine 0.8s forwards;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

.challenge{
    display: flex;
    width: 100%;
    margin-top: 80px;
    align-items: center;
}


.challenge .time{
    width: 50%;
    background-color: #fff;
    padding: 16px;
    font-size: 1.2em;
    text-align: center;
}


.link_button {
    text-align: center;
    margin-top: 80px;
    padding: 0 40px;
}


.challenge .link_button{
    margin-top: 0px;
    width: 50%;
}



.link_button a{
    width: 100%;
    background-color: #fff;
    display: block;
    padding: 8px;
    border-radius: 32px;
    color: #0b0f2e;
}



#menu .number{
    background-color: #fff;
    padding: 32px;
    border-radius: 16px;
    position: relative;
  z-index: 2;
}
#menu .notice {
  margin-top:80px;
}
#menu .number h3{
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 8px;
    margin-top: 40px;
}

#menu .number p{
    width: 100%;
    margin-bottom: 40px;
}

#menu .number .border_box{
    width: 100%;
    padding: 6px 10px;
    background: #f0f0f0;
    border-radius: 4px;
    font-family: monospace;

}


#menu .number form{
  font-weight: bold;
}

#menu .number form input{
    width: 240px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #000;
  background: rgba(255,255,255,0.15);
  font-size: 1.1em;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  margin-right: 8px;
}








.copy-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.copy-text {
  padding: 6px 10px;
  background: #f0f0f0;
  border-radius: 4px;
  font-family: monospace;
  user-select: all;
  width: 80%;
}

.copy-btn {
  padding: 6px 12px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}
.copy-btn:hover {
  background: #45a049;
}


body .question h1{
  position: relative;
  font-size: 1.5em;
  margin: 0 0 6px 0;
}

body .question h1 .title1,
body .question h1 .title1s{
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #FFC266;
    margin-left: 10px;
    margin-right: 8px;
}
body .question h1 .title1 {
  font-size:1.0em;
}
body .question h1 .title1s{
  font-size:0.9em;
}

body .question h1 .title2{
    border-bottom: 4px solid #FFC266;
    margin-right: 8px;
    font-size:0.8em;
}

body .question h1 .title3{
  border-bottom: 3px solid #FFC266;
  margin-left: 16px;
  font-size:0.8em;
  white-space: nowrap;
}
body .question h1 .center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

body .question .blackboard{
    padding: 0 16px;
}

body .question .blackboard dl{
    background-color: #00693E;
    border-radius: 16px 16px 0 0;
    display: flex;
  align-items: center;
    min-height: 280px;
    margin: auto;
    padding: 24px 24px;
}
body .question .blackboard dl.with-under {
  padding: 24px 24px 0 24px;
}
body .question .blackboard dl.continue {
  border-radius: 0;
  padding: 0 24px;
}
body .question .blackboard .typing{
    background-color: #00693E;
    border-radius: 16px 16px 0 0;
    padding: 16px 24px 24px 24px;
}


body .question .blackboard .typing p{
    color: #fff;
    font-size: 1.5em;
    line-height: 1.7em;
}

body .question .blackboard .typing p img{
  height: 32px;
}



body .question .blackboard .typing div.example {
  text-align: center;
}
body .question .blackboard .typing div.example img{
    width: 80%;
    height: fit-content;
}

body .feedback .feedback_a .next_button,
body .feedback2 .feedback_a .next_button {
  margin-top: 12px;
}
body .question .blackboard .typing .start_button,
body .feedback .feedback_a .next_button,
body .feedback2 .feedback_a .next_button{
    text-align: center;
    margin: 7px auto;
}

body .question .blackboard .typing .start_button a {
  display: inline-block;
  padding: 12px 40px;
  font-size: 1.8rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
  background: linear-gradient(135deg, #ff512f, #dd2476); /* 赤〜ピンクのグラデ */
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(221, 36, 118, 0.5);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 光沢エフェクト */
body .question .blackboard .typing .start_button a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  transform: skewX(-25deg);
}

body .question .blackboard .typing .start_button a:hover {
    opacity: 1;
}

body .question .blackboard .typing .start_button a:hover::before {
  animation: shine 0.8s forwards;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

body .question .blackboard .typing .typing_result{
    display: flex;
    color: #fff;
    margin-left:10%;
    padding: 8px 0 0;
    font-size: 1.2em;
    line-height: 2em;
}

body .question .blackboard .typing .typing_result li {
  width: 50%;
}

li input[type="text"], li input[type="number"] {
  width: 140px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.15);
  color: #fff;
  outline: none;
  font-size: 1.1em;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  margin-right: 8px;
}

li input[type="text"]:focus {
  border-color: #4facfe;
  background-color: rgba(255,255,255,0.25);
}

body .question .blackboard .typing .blackboard_next,
body .question .blackboard dl dd.blackboard_back,
body .question .blackboard dl dd.blackboard_next{
  display: flex;
  justify-content:end;
  align-items:center;
  margin-top:14px;
  height:80px;
}

body .question .blackboard .typing .blackboard_next .error{
  color: #ffcccc;
  font-size: 1.2em;
  font-weight: bold;
  text-align: right;
  padding-right: 12px;
}
body .question .blackboard .typing .blackboard_next a,
body .question .blackboard dl dd.blackboard_back a,
body .question .blackboard dl dd.blackboard_next a{
  display: inline-block;
  width:auto;
  padding:16px 8px;
  background-color:#DE446B;
  border-radius: 8px;
  color: #fff;
}

body .question .blackboard .typing .blackboard_next a img{
  margin-left:4px;
  height: fit-content;
  width: 50%;
}





body .question .blackboard dl dt {
    color: #fff;
    width: 55%;
    padding: 0 16px 0;
    font-size: 1.6em;
    line-height: 2em;
}
body .question .blackboard dl dt.wide {
  width: 78%;
}
body .question .blackboard dl dt.full {
  width: 100%;
}
body .question .blackboard dl dt.low-margin {
  margin-top: 4px;
  margin-bottom: 8px;
}
body .question .blackboard dl dt.high-margin {
  margin-top: 30px;
  margin-bottom: 30px;
}

body .question .blackboard dl dt img.under {
  width: 100%;
}

body .question .blackboard dl dd{
    width: 45%;
}
body .question .blackboard dl dd.wide{
    width: 22%;
}

body .question .blackboard dl dd img{
    width: 100%;
}

body .question .blackboard2 img{
    width: 100%;
    margin-top: -24px;
}

body .question .question_list dl{
    display: flex;
    min-height: 180px;
}

body .question .question_list dl dt{
    width: 92%;
}
body .question .question_list dl dt.three{
    width: 84%;
}

body .question .question_list dl dd{
    padding: 20px 0;
}
body .question .question_list dl dd.left{
    margin-left: 20px;
}

body .question .question_list dl dd a{
    display: flex;
    flex-wrap: wrap;
    background-color: #DE446B;
    justify-content: center;
    height: 100%;
    border-radius: 5px;
    align-items: center;
    align-content: center;
    
}

body .question .question_list dl dd a span{
    width: 100%;
    text-align: center;
    color: #fff;
    margin-bottom: 8px;
}

body .question .question_list dl dd a img{
    width: 32px;
}


.option-container, .option-img-container{
    padding: 12px 20px 4px;
}
.option-img-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.option-img-container .img-option {
  width: 32%;
}
.option-img-container .img-option img {
  width: 100%;
  cursor: pointer;
}
.option-img-container .img-option .checkbox {
  width: 25%;
  cursor: pointer;
}

.option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 1.1em;
    
}

.option span{
    background-color: #fff;
    display: block;
    width: 90%;
    padding: 12px 16px 6px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-height: 56px;
}

body .question .question_list .big_img span{
    height: 200px;
}



.option span img{
    height: 40px;
}

body .question .question_list .big_img span img{
    height: 170px;
}





.option span:hover,  .checkbox:hover {
    background: #fceeee;
}

.option-text {
    flex-grow: 1;
    padding-right: 16px;
    border-right: 1px solid #ccc;
}

.checkbox{
    background-color: #fff;
    width: 8%;
    display: block;
    padding: 6px 16px;
    min-height: 56px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body .question .question_list .big_img .checkbox{
    height: 200px;
}
  
.radio {
    width: 24px;
    height: 24px;
    margin-left: 16px;
    flex-shrink: 0;
    position: relative;
    /* ← ここで最初は非表示（完全に何もない） */
    visibility: hidden;
}

.radio.checked {
    visibility: visible;
}

.radio::before {
    /*content: '\f111';*/
    content: '✔︎';
    /*content: url("assets/img/maru.svg");*/
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    color: #d55d7a;
    font-size: 2em;
    line-height: 1;
    position: absolute;
    top: 90%;
    left: 33%;
    transform: translate(-60%, -48%); /* Y方向だけちょい上げ */
}


.next_button {
  text-align: center;
}

.next_button a {
  display: inline-block;
  background: linear-gradient(135deg, #D97706, #B45309); /* 濃いオレンジ系 */
  color: #ffffff;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 8px 32px;
  width: 250px;
  border-radius: 999px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.next_button a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  background: linear-gradient(135deg, #C2410C, #9A3412); /* hover時はさらに濃いトーン */
}

.next_button a:active {
  transform: translateY(0);
  box-shadow: 0 3px 7px rgba(0,0,0,0.2);
}





body .result1, body .result2{
    font-family: "Noto Sans JP";
    font-size: 0.9em;
}

body .result1 h1, body .result2 h1{
    background-color: #DE446B;
    padding: 8px;
    border-radius: 4px;
    color: #fff;
    font-size: 1.4em;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

body .result1 h1 i, body .result2 h1 i{
    padding-right: 8px;
}

body .result1 h1 .title_right{
    background-color: #fff;
    color: #635e56;
    padding:4px 0 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
}

body .result1 .result1_l1{
    display: flex;
    justify-content: space-between;
    margin: 16px 0 8px;
}

body .result2 .result2_l1{
    display: flex;
    justify-content: space-between;
    margin: 10px 0 0 0;
}


body .result1 .result1_l1 .result1_l1l{
    width: 72%;
}

body .result1 .result1_l1 .result1_l1r{
    width: 27%;
    background-color: #fff;
    padding: 8px;
    border-radius: 4px;
}

body .result2 .result2_l1 .result2_l1l{
    width: 49.5%;
    padding: 8px;
  border-radius: 8px;
}

body .result2 .result2_l1 .result2_l1r{
    width: 49.5%;
    padding: 0 0 8px 0;
  background-color: #fff;
  border-radius: 8px;
}

body .result2 .result2_l1 .result2_l1r div,
body .result2 .result2_l1 .result2_l1l{
    background-color: #fff;
}

body .result2 .result2_l1 .result2_l1l h3, body .result2 .result2_l1 .result2_l1r h3{
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 8px;
    margin-bottom: 4px;
}


body .result1 .result1_l1 .result1_l1r h2{
    text-align: center;
    font-weight: bold;
    margin-bottom: 8px;
}

body .result1 .result1_l1 .result1_l1r .graph{
    display: flex;
     margin-bottom: 8px;
}

body .result1 .result1_l1 .result1_l1r .graph li{
    text-align: center;
    padding: 8px 0;
}

body .result1 .result1_l1 .result1_l1r .graph .g5{
    background-color: #F58E7E;
}

body .result1 .result1_l1 .result1_l1r .graph .g4{
    background-color: #79D1B0;
}

body .result1 .result1_l1 .result1_l1r .graph .g3{
    background-color: #FDC44F;
}

body .result1 .result1_l1 .result1_l1r .graph .g2{
    background-color: #33BFDB;
}

body .result1 .result1_l1 .result1_l1r .graph .g1{
    background-color: #AD6FC1;
}

body .result1 .result1_l1 .result1_l1r .graph .g0{
    background-color: #16A6B6;
}

body .result1 .result1_l1 .result1_l1r .graph_name{
    display: flex;
    flex-wrap: wrap;
}

body .result1 .result1_l1 .result1_l1r .graph_name li{
    margin-right: 4px;
}

body .result1 .result1_l1 .result1_l1r .graph_name i{
    margin-right: 4px;
}

body .result1 .result1_l1 .result1_l1r .graph_name .g5 i{
    color: #F58E7E;
}
body .result1 .result1_l1 .result1_l1r .graph_name .g4 i{
    color: #79D1B0;
}
body .result1 .result1_l1 .result1_l1r .graph_name .g3 i{
    color: #FDC44F;
}
body .result1 .result1_l1 .result1_l1r .graph_name .g2 i{
    color: #33BFDB;
}
body .result1 .result1_l1 .result1_l1r .graph_name .g1 i{
    color: #AD6FC1;
}
body .result1 .result1_l1 .result1_l1r .graph_name .g0 i{
    color: #16A6B6;
}


body .result2 .result2_l1 .result2_l1r table {
    border-collapse: collapse;
    border: solid 1px #FDF6ED;
    background-color: #fff;
    width: 100%;
    font-size: 0.9em;
}

body .result2 .result2_l1 .result2_l1r table td{
    border: solid 1px #FDF6ED;
}


body .result2 .result2_l1 .result2_l1r th{
    background-color: #4D6FB4;
  border: solid 1px #FDF6ED;
    color: #fff;
    padding: 5px 6px;
  width: 15%;
  text-align: right;
}

body .result2 .result2_l1 .result2_l1r td{
    padding: 5px 6px;
    width: 35%;
  text-align: right;
}

body .result2 .result2_l1 .result2_l1r .title_right{
    text-align: center;
    margin-top: 8px;
    font-size: 1.25em;
    background-color:#F58E7E;
    padding: 8px;
    font-weight: bold;
    color: #fff;
}


body .result2 .result2_l2{
    margin: 8px 0 10px 0;
    background-color: #fff;
    border-radius: 8px;
    padding: 16px 16px 32px 40px;
    position:  relative;  
}

body .result2 .result2_l2 img{
    position: absolute;
    width: 48px;
    left: -10px;
    bottom: 0px;
}

body .result2 .result2_l3{
  border-radius: 8px;
}

body .result1 .result1_l3{
    display: flex;
    justify-content: space-between;
    margin: 10px 0 0;
}

body .result1 .result1_l3 .result1_l3l{
    width: 65%;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 16px 16px 40px;
    position:  relative;  
}

body .result1 .result1_l3 .result1_l3l img{
    position: absolute;
    width: 48px;
    left: -10px;
    bottom: 0px;
}

body .result1 .result1_l3 .result1_l3r{
    width: 34%;
}

body .result1 .result1_l3 .result1_l3r h3, body .result2 .result2_l3 h3{
  width:100%;
    background-color: #FCDBB4;
    padding: 8px;
    border-radius: 5px 5px 0 0;
    display: inline-block;
    font-weight: bold;
}

body .result1 .result1_l3 .result1_l3r div, body .result2 .result2_l3 div div{
    background-color: #fff;
    border-radius: 0 5px 5px 5px;
    padding: 10px 16px 16px 16px;
}

body .result1 .result1_l3 .result1_l3r div a, body .result2 .result2_l3 div a{
    color: #000;
    text-decoration: underline;
}

body .result1 .result1_l3 .result1_l3r div li, body .result2 .result2_l3 div li{ 
    margin: 4px 0;
  width: 100%;
  font-size: 0.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


body .result1 table{
    border-collapse: collapse;
    border: solid 1px #FDF6ED;
    background-color: #fff;
    width: 100%;
    font-size: 0.9em;
}

body .result1 table tr, body .result1 table td{
    border: solid 1px #FDF6ED;
}


body .result1 table th{
    background-color: #4D6FB4;
    color: #fff;
    padding: 0 4px;
}

body .result1 table td{
    padding: 2px 4px;
}

body .result1 table a{
    text-decoration: underline;
    color: #003D87;

}


/* セクション自体を雲の土台にする */
.feedback {
  position: relative;
  background-color: #DAEFFC;
  overflow: hidden; /* はみ出す雲を隠す */
}



/* 2枚目の雲（奥レイヤー）を消す：前に入れてた場合の保険 */
.feedback::after { content: none !important; }

/* 1枚の雲だけ、疎に・薄く・ゆっくり流す */
.feedback::before{
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 1400px 180px;   /* ← タイルを大きく＝雲の間隔が広がる */
  background-position: 0 28px;
  opacity: 0.5;                   /* ← 薄くして主張を弱める */
  animation: cloud-move 120s linear infinite; /* ← ゆっくり */
  /* タイルの中に“3か所だけ”雲を置いたSVG（#は%23でエスケープ） */
  background-image: url("data:image/svg+xml;utf8,\
                        <svg xmlns='http://www.w3.org/2000/svg' width='1400' height='180' viewBox='0 0 1400 180'>\
                        <g fill='%23ffffff'>\
                        <g><circle cx='120' cy='80' r='26'/><circle cx='160' cy='70' r='34'/><circle cx='205' cy='84' r='26'/></g>\
                        <g><circle cx='700' cy='90' r='28'/><circle cx='740' cy='78' r='36'/><circle cx='785' cy='92' r='28'/></g>\
                        <g><circle cx='1200' cy='78' r='24'/><circle cx='1234' cy='68' r='32'/><circle cx='1274' cy='82' r='24'/></g>\
                        </g></svg>");
                        /* 上下をそっとフェード（対応ブラウザ向け） */
                        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
                                mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
                        filter: blur(0.2px); /* ごく軽いぼかし */
}

@keyframes cloud-move {
  from { background-position: 0 28px; }
  to   { background-position: -1400px 28px; }
}

/* セクション自体はそのまま土台 */
.feedback2{
  position: relative;
  background-color: #92a0b5;
  overflow: hidden;
}

.feedback2::before{
  content: "";
  position: absolute;
  inset: -20% -10%;
  opacity: 0.6;                /* 濃さ ↑ */
  transform: rotate(-12deg);   /* 角度は好みで */
  transform-origin: center;
  background-repeat: repeat;
  background-size: 700px 350px; /* タイルを小さめ＝相対的に密度↑ */
  animation: rain-fall 12s linear infinite; /* 速く */

  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='700' height='350' viewBox='0 0 700 350'>\
    <defs>\
      <!-- 太さを stroke-width='2.4' に、長さを y2=28 にして“太い雨筋” -->\
      <g id='d' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' opacity='0.95'>\
        <line x1='0' y1='0' x2='0' y2='28'/>\
      </g>\
    </defs>\
    <g>\
      <!-- ばら撒き。必要なら <use> を増やすと更に密度↑ -->\
      <use href='%23d' x='20'  y='8'/>  <use href='%23d' x='58'  y='110'/>\
      <use href='%23d' x='96'  y='230'/> <use href='%23d' x='134' y='24'/>\
      <use href='%23d' x='172' y='165'/> <use href='%23d' x='210' y='300'/>\
      <use href='%23d' x='248' y='70'/>  <use href='%23d' x='286' y='210'/>\
      <use href='%23d' x='324' y='150'/> <use href='%23d' x='362' y='12'/>\
      <use href='%23d' x='400' y='295'/> <use href='%23d' x='438' y='205'/>\
      <use href='%23d' x='476' y='90'/>  <use href='%23d' x='514' y='335'/>\
      <use href='%23d' x='552' y='55'/>  <use href='%23d' x='590' y='175'/>\
      <use href='%23d' x='628' y='18'/>  <use href='%23d' x='666' y='260'/>\
      <use href='%23d' x='40'  y='190'/> <use href='%23d' x='120' y='330'/>\
      <use href='%23d' x='200' y='145'/> <use href='%23d' x='260' y='10'/>\
      <use href='%23d' x='320' y='320'/> <use href='%23d' x='380' y='90'/>\
      <use href='%23d' x='460' y='245'/> <use href='%23d' x='520' y='128'/>\
      <use href='%23d' x='600' y='30'/>  <use href='%23d' x='680' y='225'/>\
    </g>\
  </svg>");

  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  filter: blur(0.15px); /* 崩れ防止で控えめ */
}

@keyframes rain-fall {
  from { background-position: 0 0; }
  to   { background-position: 0 350px; }
}





.feedback h1, .feedback2 h1{
    font-size: clamp(1.0em, 3vw, 2.0em);
    background-color: #fff;
    padding: 8px 16px;
    display: inline-block;
    white-space: nowrap;
    border-radius: 4px;
}

.feedback h1 i, .feedback2 h1 i{
    color: #DE446B;
    margin-right: 8px;
}

.feedback .feedback_a, .feedback2 .feedback_a{
  position: relative;
  display: block;
  inline-size: 100%;
}

/* 画像の下にできる隙間対策 */
.feedback .feedback_a .rainbow .school_img, .feedback2 .feedback_a .rainbow .school_img{
  display: block;
  width: 100%;
  height: auto;
}

/* スコア：下寄せの中央固定 */
.feedback .feedback_a .score, .feedback2 .feedback_a .score{
  position: absolute;
  left: 50%;                 /* 中央基準 */
  bottom: 3%;                /* 下からの距離（好みで調整） */
  transform: translateX(-50%); /* 中央揃えの決め手 */
  z-index: 1;                /* 画像より前面 */
  text-align: center;
  line-height: 1.2;
  padding: 16px;
  font-size: clamp(18px, 2.6vw, 36px); /* レスポンシブに */
  font-weight: 700;
  pointer-events: none;      /* クリックの邪魔をしない */
}
.feedback2 .feedback_a .score {
  bottom: 10%;                /* 下からの距離（好みで調整） */
}

.feedback .feedback_a .score i, .feedback2 .feedback_a .score i{
    color: #CEA016;
    padding-bottom: 24px;
}

.feedback .feedback_a .score p, .feedback2 .feedback_a .score p{
    white-space: nowrap;
    padding-bottom: 24px;
}

.feedback .feedback_a .score .star, .feedback2 .feedback_a .score .star{
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'>\
<polygon points='0,0 400,0 400,240 200,300 0,240' fill='%23FDF6ED' stroke='%23CEA016' stroke-width='8'/>\
<polygon points='0,0 400,0 400,240 200,300 0,240' fill='none' stroke='%2363432F' stroke-width='16'/>\
</svg>") center/100% 100% no-repeat;
  padding: 16px 20px 32px;
  color: #333;
  display: inline-block;
}

.rainbow_sp img{
    width: 160px;
    margin-top: 16px;
}

.feedback .feedback_a .score_details,
.feedback2 .feedback_a .score_details{
    background-color: #fff;
    padding: 80px 36px 8px 36px;
    border-radius: 12px;
    font-size: 1.3em;
    position: relative;
}
.feedback .feedback_a .score_details p,
.feedback2 .feedback_a .score_details p{
  font-size: 0.9em;
}

.feedback .feedback_a .score_details h3, .feedback2 .feedback_a .score_details h3{
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 16px;
}

.feedback .feedback_a .rainbow {
  position: relative;       /* 画像ブロックを基準にする */
}

/* 画像は普通にフル幅 */
.feedback .feedback_a .rainbow img {
  display: block;
  height: auto;
}

/* スコア：画像の中で中央寄せ・下寄せ */
.feedback .feedback_a .score {
  position: absolute;
  left: 50%;
  bottom: 3%;              /* 好きな位置に調整、10〜20% くらいで試す */
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
  line-height: 1.2;
  padding: 16px;
  font-size: clamp(18px, 2.6vw, 36px);
  font-weight: 700;
  pointer-events: none;
}
.feedback2 .feedback_a .rainbow {
  position: relative;
}

.feedback2 .feedback_a .rainbow > img {
  display: block;
}

/* 画像の中で score を中央下寄せ */
.feedback2 .feedback_a .score {
  position: absolute;
  left: 50%;
  bottom: 3%;             /* 好きな位置に調整する（8〜20%くらいで試す） */
  transform: translate(-50%, 5%);
  text-align: center;
  z-index: 1;
}

.feedback .feedback_a .rainbow {
    position: relative;
}


.feedback .feedback_a .score {
    position: absolute;
    left: 50%;
    top: 50%;                    /* 画像の中央を基準 */
    transform: translate(-50%, -65%); /* 中央より少し上に調整 */
    z-index: 1;
    text-align: center;
}
.rainbow_sp img {
  display: block;
  width: 160px;
  margin: 16px auto 0;  /* 上だけ 16px, 左右 auto で中央 */
}

div.float_l {
  float:left;
}
div.float_r {
  float:right;
  font-size: 0.8em;
}

div.error {
  width: 100%;
  text-align: center;
  color: red;
  font-size: 0.9rem;
}

.t_center{
    text-align: center;
}

.t_right{
    text-align: right !important;
}

.input400{
  width: 400px !important;
}

.input100{
  width: 100px !important;
}

@media (max-width: 977px) {
  .rainbow_sp img{
    width: 100px;
  }
  .feedback2 .feedback_a .score {
    transform: translate(-50%, 20%);
  }
}
@media (max-width: 799px) {
  .radio::before {
    font-weight: 200;
    font-size: 1.5em;
    transform: translate(-120%, -48%);
  }
}
@media (max-width: 699px) {
  .feedback h1, .feedback2 h1 {
    white-space: wrap;
  }
  .feedback2 .feedback_a .score {
    transform: translate(-50%, 40%);
  }
  .rainbow_sp {
    opacity: 0.4;
  }
  .copy-result {
    display: none;
  }
  .radio::before {
    font-weight: 200;
    font-size: 1.25em;
    transform: translate(-150%, -48%);
  }
}