@charset "UTF-8";

#result {
position: relative;
  width: 60%;
  margin: 0 auto;
  padding: 5% 0% 5% 0%;
  height: auto;
  z-index: 100;
}

.lang-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 20px 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;

}

.lang-buttons button {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 25px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff; /* 文字白 */
  transition: background-color 0.3s ease, color 0.3s ease;
  box-sizing: border-box;
  border-radius: 3px;
border:1px solid #fff;
}

.lang-buttons button:hover {
  background-color: #FF3300;
  color: #fff;
}

/* aタグがボタン内にある場合のスタイル */
.lang-buttons button a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

/* ホバー時も白のまま */
.lang-buttons button:hover a {
  color: #fff;
}

@media screen and (max-width: 1050px) {
#result {
position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 7% 1% 5% 1%;
  height: auto;
  z-index: 100;
}
  .lang-buttons {
    grid-template-columns: 1fr; 
  }
}

.ffcotwlogo {
  width: 30%;
  margin: 0 auto;
}


.surveytit {
  position: relative;
  font-size: 4vw;
  font-weight: 700;
  font-family: "Noto Sans SC", "Barlow Condensed", sans-serif;
  color: #fff;
  margin-bottom: 0;
  
  text-align: center;
  z-index: 100;  
}
.surveysub {
  margin-top: -10px;
  font-size: 2rem;
  font-weight: 600;
  color:#fff;
  text-align: center;
  padding-bottom:20px;
}

@media screen and (max-width: 1050px) {
  .ffcotwlogo {
  width: 70%;
  margin: 0 auto;
}


.surveytit {
  position: relative;
  font-size: 13vw;
  font-weight: 700;
  font-family: "Noto Sans SC", "Barlow Condensed", sans-serif;
  color: #fff;
  margin-bottom: 0;
  
  text-align: center;
  z-index: 100;  
}
.surveysub {
  margin-top: -20px;
  font-size: 6vw;
  font-weight: 600;
  color:#fff;
  text-align: center;
  padding-bottom:20px;
  border-bottom:1px solid #fff;
  margin-bottom: 20px;
}
}


.resultitemwrp_large {
  max-width:70%;
  margin: 2% auto;
  font-family: sans-serif;
  margin-bottom: 100px;
  color: #333;
  padding: 20px;text-align: center;
}
.resultitemwrp_large img {
  width: 100%;
  margin-left: -5%;
}

.wdt100 {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.winner_name,
.winnter_id {
  display: inline-block;
  margin-top: 30px;
  margin-right: 15px;
  font-size: 1.8em;
  font-weight: bold;
  color:#fff;
}
.winnter_id a:link {
  color:#fff;
}
.winnter_id a:hover {
  color:#fff;
}
.winnter_id a:visited {
  color:#fff;
}

.winner_name::before,
.winnter_id::before {
  display: inline-block;
  background: #FF3300;
  color: white;
  font-size: 0.8em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
}

.winner_name::before {
  content: "昵称";
}

.winnter_id::before {
  content: "ID";
}

.textarea_m.body_text {
  position: relative;
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-top: 30px;
  font-size: 1.7rem;
  line-height: 1.7;
   text-align: left;
}
.textarea_m.body_text span {
  font-weight: 600;
}

.textarea_m.body_text::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 60px;
  border: 12px solid transparent;
  border-bottom-color: #ccc;
}

.textarea_m.body_text::after {
  content: "";
  position: absolute;
  top: -22px;
  left: 60px;
  border: 11px solid transparent;
  border-bottom-color: #f4f4f4;
}

.intro_text {
  font-weight: 600;
  font-size: 1.5vw;
  margin-top: 5%;
  color:#fff;
  text-align: center;
}
.icon_clickzoom {
  position: relative;
  margin-bottom: 5px;
  margin-left: -5%;
  width: 20%;
}

@media screen and (max-width: 1050px) {
  .icon_clickzoom {
  position: relative;
  margin-bottom: 5px;
     margin-left: 0%;
  width: 40%;
}

  .resultitemwrp_large {
  max-width:100%;
  margin: 0 auto;
  font-family: sans-serif;
  color: #333;
    margin-top: 50px;
    margin-bottom: 100px;
  padding: 0;
    text-align: center;
}
  .intro_text {
  font-weight: 600;
  font-size: 3.9vw;
  color:#fff;
  text-align: center;
}
  .textarea_m.body_text {
  position: relative;
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-top: 50px;
  font-size: 3.5vw;
  line-height: 1.7;
   text-align: left;
}
  .winner_name,
.winnter_id {
  display: inline-block;
  margin-top: 20px;
  margin-right: 15px;
  font-size: 1.8em;
  font-weight: bold;
  color:#fff;
}
  .resultitemwrp_large img {
  width: 100%;
  margin-left: -0%;
}

}


.simple-button {
  display: inline-block; /* ←これがないと width が効かないことがある */
  width: 60%; /* ←固定幅 */
  padding: 0.6em 0; /* ←左右パディング減らす（中央揃えのため） */
  background: #ff3300;
  color: #fff;
  font-size: 1.5vw;
  font-weight: 600;
  border: none;
  border-radius: 3px;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center; /* ←文字中央揃え */
  transition: background 0.3s ease;
}



.simple-button:hover {
  background: #cc2900; /* ホバー時：濃いオレンジ */
  color: #fff; /* 明示的に白を維持 */
  text-decoration: none; /* アンダーラインなし */
  cursor: pointer;
}


.rbtn {
  margin-bottom: 3%;
  text-align: center;
}

@media screen and (max-width: 1050px) {
.simple-button {
  display: block;
  width: 87vw; /* ← 画面幅いっぱい */
  margin: 0;     /* ← 中央揃えの margin: auto は不要 */
  border-radius: 0; /* ← 角丸が要らないなら */
  padding:3% 5%;
  background: #ff3300;
  color: #fff;
  font-size: 4vw;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  line-height: 1.2em;
  border-radius: 3px;
}
}