@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&family=Noto+Sans+JP:wght@100..900&display=swap');
.ibm-plex-sans-jp-thin {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.ibm-plex-sans-jp-extralight {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 200;
  font-style: normal;
}
.ibm-plex-sans-jp-light {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.ibm-plex-sans-jp-regular {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.ibm-plex-sans-jp-medium {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.ibm-plex-sans-jp-semibold {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.ibm-plex-sans-jp-bold {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 22px; }

.container {
  width: 100%;
  margin: 90px auto 20em;
}
.top_hero { position: relative; width: 100%; overflow: hidden; }
.top_hero-img { width: 100%; height: auto; display: block; }
.top_hero-title { font-size: 0; }

.hero {
  position: relative;
  width: 100%;
  height: 200px;
  background-image: url(../img/titlebg01.jpg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero-title {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgba(0,0,0,0.5);
  padding: .5em 1em;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 2rem;
}

/* Wrapper */
.Wrapper { width: 90%; margin: 0 auto; }
section { margin: 4em auto; }

.box_A {
  width: 100%;
  padding: 0.5em 1em;
  margin: 2em auto;
  color: #000;
  background: #F3E4FF;
  border-top: solid 2px #7105B0;
  box-shadow: 0 3px 4px rgba(0,0,0,0.32);
}
.box_A h2.profile {
  background: #7105B0;
  padding: .3em;
  color: white;
  font-size: 1.4em;
  text-align: center;
}
.box_A h3.name {
  padding: .3em;
  font-size: 1.6em;
  text-align: center;
}
.box_A img { width: 100%; height: auto; }
.box_A p { margin: 2em 0; }

h2.title1 {
  position: relative;
  padding: 1rem 2rem calc(1rem + .3rem);
  background: #fff100;
  margin-top: 2em;
}
h2.title1:before {
  position: absolute;
  top: -10px; left: -10px;
  width: 100%; height: 100%;
  content:'';
  border: 4px solid #000;
}
h2.title3 {
  position: relative;
  padding: 1rem 2rem calc(1rem + .3rem);
  background: #7C9CB0;
}
/* Kids Division------------------------------------------------------------------ */
#Kids_Division .judge-title {
  margin: 0 auto;
   width: 100%;
  flex-basis: 100%;   /* ★ これも重要 ★ */
  text-align: center;
}

#Kids_Division .judge-title h3  {
  position: relative;
  padding: 0.6em;
  background: #009A76;
   flex-basis: 100%;   /* ★ これが重要 ★ */
color:#FFFFFF;
}

/* 3人横並び */
#Kids_Division .judge-wrap {
  display: flex;
  gap: 2em;
  justify-content: space-between;
  margin: 1.4em 0 0;
   flex-basis: 100%;   /* ★ これが重要 ★ */
}

/* カード本体 */
#Kids_Division .judge-card {
  position: relative;
  width: 32%;
  background: #fff;
  border: 2px solid #92C913;
  border-radius: 10px;
  padding: 1em 1.2em 1.2em;
  box-sizing: border-box;
}

/* アイコン（カードに食い込む） */
#Kids_Division .judge-icon {
  position: absolute;
  top: -15%;
  left: 20px;
}

#Kids_Division .judge-icon img {
  width: 200px;
  height: 200px;
}

/* 名前 */
#Kids_Division .judge-name {
  font-weight: bold;

  margin-left: 115px; /* ←アイコンの右側に配置 */
  font-size: 1.1em;
}

/* コメント文 */
#Kids_Division .judge-content p {
  margin: 3em 0 0 0 ;
  line-height: 1.6;
  padding-left: 0.2em;
}

/* スマホ（縦積み） */
@media screen and (max-width: 768px) {
#Kids_Division .judge-wrap {
    flex-direction: column;
    gap: 3em;
	text-align: left;
  }
#Kids_Division .judge-card {
    width: 100%;
  position: relative;
  margin-top: 1em;
  }

/* アイコン（カードに食い込む） */
#Kids_Division .judge-icon {
  position: absolute;
  top: -60px;
  left: 20px;
}

#Kids_Division .judge-icon img {
  width: 30%;
  height: 30%;
}

/* 名前 */
#Kids_Division .judge-name {
  font-weight: bold;

  margin-left: 130px; /* ←アイコンの右側に配置 */
  font-size: 1.1em;
}

/* コメント文 */
#Kids_Division .judge-content p {
  margin: 3em 0 0 0 ;
  line-height: 1.6;
  padding-left: 0.2em;
}
}
/* Kids Division------------------------------------------------------------------ */

/* Kids Division */
#Kids_Division h2.title2 {
  position: relative;
  padding: 1.5rem 1rem;
  color:#00966E;
}

#Kids_Division h2.title2:after {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 10px;
  content:'';
  background-image: repeating-linear-gradient(-45deg, #00966E, #00966E 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
}


/* group-box（審査員に干渉しないようそのまま） */
#Kids_Division .group-box {
  counter-increment: group-counter;
  position: relative;
  display: flex;
  gap: 1.5em;
  align-items: center;
  flex-wrap: wrap;
  padding: 1em;
  margin: 0 auto;
  font-family: sans-serif;
  margin-top: 6em;
  background-color: #F4FFD1;
  background-image: repeating-linear-gradient(-45deg,#fff,#fff 6px,transparent 0,transparent 12px);
  border: 2px solid #92C913;
}

#Kids_Division .group-title::before {
  content: counter(group-counter) ". ";
  font-weight: bold;
}

#Kids_Division .group-title {
  position: absolute;
  top: -2em; left: -1em;
  background: #009A76;
  color: white;
  padding: .3em 1em;
  font-size: 1.8em; font-weight: bold;
  transform: rotate(-4deg);
  border-radius: 4px;
  box-shadow: 1px 2px 4px rgba(0,0,0,.3);
  z-index:10;
}

#Kids_Division .group-box img {
  max-width: 50%;
  height: auto;
  flex-shrink: 0;
  border-radius: 4px;
}

@media screen and (max-width:600px) {
  #Kids_Division .group-box {
    flex-direction: column;
    text-align: center;
  }
  #Kids_Division .group-box img {
    max-width: 100%;
    margin-top:2em;
  }
}

/* コメントテキスト */
.intro-comment {
  flex:1;
  background:#fff;
  padding:1em;
  border-radius:6px;
  margin:2em 0;
  line-height:1.6;
}
/* Kids Division------------------------------------------------------------------ */
#Adult_Division .judge-title {
  margin: 0 auto;
   width: 100%;
  flex-basis: 100%;   /* ★ これも重要 ★ */
  text-align: center;
}

#Adult_Division .judge-title h3  {
  position: relative;
  padding: 0.6em;
  background: #7D00B4;
   flex-basis: 100%;   /* ★ これが重要 ★ */
color:#FFFFFF;
}

/* 3人横並び */
#Adult_Division .judge-wrap {
  display: flex;
  gap: 2em;
  justify-content: space-between;
  margin: 1.4em 0 0;
   flex-basis: 100%;   /* ★ これが重要 ★ */
}

/* カード本体 */
#Adult_Division .judge-card {
  position: relative;
  width: 32%;
  background: #fff;
  border: 2px solid #8523CF;
  border-radius: 10px;
  padding: 1em 1.2em 1.2em;
  box-sizing: border-box;
}

/* アイコン（カードに食い込む） */
#Adult_Division .judge-icon {
  position: absolute;
  top: -40px;
  left: 20px;
}

#Adult_Division .judge-icon img {
  width: 200px;
  height: 200px;
}

/* 名前 */
#Adult_Division .judge-name {
  font-weight: bold;

  margin-left: 115px; /* ←アイコンの右側に配置 */
  font-size: 1.1em;
}

/* コメント文 */
#Adult_Division .judge-content p {
  margin: 3em 0 0 0 ;
  line-height: 1.6;
  padding-left: 0.2em;
}

/* スマホ（縦積み） */
@media screen and (max-width: 768px) {
#Adult_Division .judge-wrap {
    flex-direction: column;
    gap: 3em;
	text-align: left;
  }
#Adult_Division .judge-card {
    width: 100%;
  position: relative;
  margin-top: 1em;
  }

/* アイコン（カードに食い込む） */
#Adult_Division .judge-icon {
  position: absolute;
  top: -60px;
  left: 20px;
}

#Adult_Division .judge-icon img {
  width: 30%;
  height: 30%;
}

/* 名前 */
#Adult_Division .judge-name {
  font-weight: bold;

  margin-left: 130px; /* ←アイコンの右側に配置 */
  font-size: 1.1em;
}

/* コメント文 */
#Adult_Division .judge-content p {
  margin: 3em 0 0 0 ;
  line-height: 1.6;
  padding-left: 0.2em;
}
}
/* Kids Division------------------------------------------------------------------ */

#Adult_Division h2.title2 {
  position: relative;
  padding: 1.5rem 1rem;
  color:#7D00B4;
}

#Adult_Division h2.title2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: repeating-linear-gradient(-45deg, #7D00B4, #7D00B4 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
}

#Adult_Division .group-box {
  counter-increment: group-counter;
  position: relative;
  display: flex;
  gap: 1.5em;
  align-items: center;
  flex-wrap: wrap;
  padding: 1em;
  margin: 0 auto;
  font-family: sans-serif;
  margin-top: 6em;
  background-color: #F4EAFC;
  background-image: repeating-linear-gradient(-45deg, #fff, #fff 6px, transparent 0, transparent 12px);
  border: 2px solid #8B33F9;
}

#Adult_Division .group-title::before {
  content: counter(group-counter) ". ";
  font-weight: bold;
}

#Adult_Division .group-title {
  position: absolute;
  top: -2em;
  left: -1em;
  background: #7D00B4;
  color: #FFFFFF;
  padding: 0.3em 1em;
  font-size: 1.8em;
  font-weight: bold;
  transform: rotate(-4deg);
  border-radius: 4px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

#Adult_Division .group-box img {
  max-width: 50%;
  height: auto;
  flex-shrink: 0;
  border-radius: 4px;
}

@media screen and (max-width: 600px) {
  #Adult_Division .group-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #Adult_Division .intro-comment {
    text-align: left;
    margin: 0;
  }
  #Adult_Division .group-box img {
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
    border-radius: 4px;
    margin: 2em 0 0 0;
  }
}
/* ---- 特別コメント（アイコン + 吹き出し） ---- */
.judge-bubble {
  display: flex;
  align-items: flex-start;
  gap: 1.5em;
  margin: 3em auto;
  width: 80%;
}

/* アイコン部分 */
.bubble-icon img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
}

/* 吹き出し枠 */
.bubble-box {
  position: relative;
  flex: 1;
  background: #fff;
  border: 3px solid #72A1C6;
  border-radius: 18px;
  padding: 1.5em 2em;
  box-sizing: border-box;
}

/* タイトル */
.bubble-title {
  font-size: 1.6em;
  font-weight: 700;
  margin: 0 0 .6em 0;
  background: #72A1C6;
  color: #fff;
  padding: 0.4em 0.8em;
  display: inline-block;
}


/* 本文 */
.bubble-box p {
  line-height: 1.4;
  margin: 0;
}

/* 吹き出しの “しっぽ” */
.bubble-box::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 40px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 25px solid #72A1C6; /* 枠線色 */
}

.bubble-box::after {
  content: "";
  position: absolute;
  left: -22px;
  top: 42px;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 23px solid #fff; /* 中の白 */
}

/* ---- スマホ対応 ---- */
@media screen and (max-width: 768px) {
  .judge-bubble {
    flex-direction: column;
    align-items: center;
  width: 80%;
  }
  .bubble-icon img {
    width: 140px;
    height: 140px;
	margin:0;
	padding:0;
  }
  /* 本文 */
.bubble-box p {
  line-height: 1.4;
  margin: 0;
}

/* 吹き出し枠 */
.bubble-box {
  position: relative;
  flex: 1;
  background: #fff;
  border: 3px solid #72A1C6;
  border-radius: 18px;
  padding: 1em;
  box-sizing: border-box;
}
  .bubble-box::before,
  .bubble-box::after {
    display: none; /* スマホでは “しっぽ” 削除 */
  }
}

/* コメントテキスト */
.intro-comment {
  flex: 1;
  font-size: 1em;
  line-height: 1.6;
}

.intro-comment {
  background: #FFFFFF;
  padding: 1em;
  border-radius: 6px;
  margin-bottom: 2em;
  margin-top: 2em;
}

.comment-box {
  display: flex;
  align-items: flex-start;
  gap: 1em;
}

.comment-bubble {
  color: #FFFFFF;
  background: #5B00DC;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  padding: 0.8em 1em;
  position: relative;
  flex-grow: 1;
}

/* 外側のしっぽ（枠線用） */
.comment-bubble::before {
  content: "";
  position: absolute;
  top: 20px;
  right: -14px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #FFFFFF;
  z-index: 0;
}

/* 内側のしっぽ（背景色と一致） */
.comment-bubble::after {
  content: "";
  position: absolute;
  top: 22px;
  right: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #5B00DC;
  z-index: 1;
}

.comment-image img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #5B00DC;
}

.inline-icon {
  height: 3em;
  vertical-lign: -0.1em;
}

/* ---------------------- Responsive ---------------------- */
@media screen and (max-width: 768px) {
  body { font-size: 15px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  .hero { height: 120px; }
  .hero-title { font-size: 1.2rem; }
}

.QR {
  display: block;
  text-align: center;
  margin: 2em auto;
}

.small { font-size: 0.8em; padding-left: 1.1em; }
.yomi { font-size: 0.8em; }

.m-t_1em { margin-top: 1em; }
.m-t_2em { margin-top: 2em; }
.m-t_3em { margin-top: 3em; }
.m-t_4em { margin-top: 4em; }
.m-t_5em { margin-top: 5em; }

/* -------------------------------------------------------------------------------- */
.container-lr_con {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

/* 3枚横並び部分 */
.con_col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.con_col > div {
  width: 100%;
}

.con_col > div:not(:last-child) {
  margin-bottom: 2em;
}

.con_col > div img {
  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------------------------------------------- */
.con_fle2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 0;
  width: 90%;
  max-width: 90%;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 auto;
}

.con_fle2 > div {
  width: 100%;
  overflow: hidden;
  margin-bottom: 3em;
  padding: 1em 2em;
  margin: 2em auto;
  color: #000000;
  background: #F3E4FF;
  border-top: solid 2px #7105B0;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
}

.con_fle2 > div:nth-last-child(-n+2) {
  margin-bottom: 0;
}

.con_fle2 img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

.con_fle2 p {
  margin: 2em 0 0;
  display: block;
  line-height: 1.6em;
}

.con_fle2 h2.name {
  padding: 0.3em;
  font-size: 1.6em;
  text-align: center;
}

/* ------- fle3 ------- */
.con_fle3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 30px;
  row-gap: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.con_fle3 > div {
  width: 100%;
  overflow: hidden;
  margin-bottom: 3em;
}

.con_fle3 img {
  width: 100%;
  height: auto;
  display: block;
}

.con_fle3 p {
  margin: 2em 0 0;
  display: block;
  line-height: 1.6em;
}

/* ------- fle4 ------- */
.con_fle4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  row-gap: 0;
  width: 100%;
  overflow: hidden;
}

.con_fle4 > div {
  width: 100%;
  overflow: hidden;
  margin-bottom: 3em;
}

.con_fle4 img {
  width: 100%;
  height: auto;
  display: block;
}

.con_fle4 p {
  margin: 1em 0 0;
  display: block;
}

/* ------- fle5 ------- */
.con_fle5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 10px;
  row-gap: 0;
  width: 100%;
  overflow: hidden;
}

.con_fle5 > div {
  width: 100%;
  overflow: hidden;
  margin-bottom: 3em;
}

.con_fle5 img {
  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------------------------------------------- */
.profile-container {
  margin: 2em auto 0;
  padding: 0.5em 1em;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background: #F3E4FF;
  border-top: solid 2px #7105B0;
  text-align:center;
}

h1.name {
  text-align:center;
  font-size:1.6em;
  font-weight:bold;
  background:#7105B0;
  margin-bottom:1em;
  padding:0.2em;
  color:white;
}

.profile-section {
  display:flex;
  flex-wrap:wrap;
  gap:1.5em;
}

.profile-image img {
  width:280px;
  max-width:100%;
  border-radius:6px;
}

.profile-text {
  flex:1;
  font-size:1em;
  line-height:1.8em;
  text-align:left;
}

@media screen and (max-width:768px) {
  .profile-section {
    width:100%;
    flex-direction:column;
    align-items:center;
  }
  .profile-image img {
    width:80%;
    max-width:auto;
  }
  .profile-text {
    width:100%;
  }
}

/*-----付箋デザイン--*/
.box-007 {
  max-width: 100%;
  margin: 0 auto;
  border: 2px solid #71bafe;
  border-radius: 5px;
  color:#333;
}

.box-007 div {
  display:inline-flex;
  align-items:center;
  column-gap:4px;
  position:relative;
  top:-13px;
  left:10px;
  margin:0 7px;
  padding:0 8px;
  background:#fff;
  color:#71bafe;
  font-weight:600;
  font-size:1.6em;
}

.box-007 div::before {
  width:30px;
  height:30px;
  content:'';
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%2371bafe'%3E%3C/path%3E%3C/svg%3E");
}

.box-007 p {
  margin:0;
  padding:0 1.5em 1em;
  font-size:1.2em;
  font-weight:bold;
}

.archive {
  list-style:none;
  padding:0;
  margin:2em auto;
  background:#f9f9f9;
  overflow:hidden;
  font-family:'Noto Sans JP', sans-serif;
}

.archive li { border-bottom:1px solid #ddd; }
.archive li:last-child { border-bottom:none; }

.archive a {
  display:block;
  padding:0.3em 1.2em;
  text-decoration:none;
  color:#333;
  font-weight:bold;
  background:#fff;
  transition:all .3s;
}

.archive a:hover {
  background:#FFF100;
  color:#000;
  padding-left:3em;
  position:relative;
}

.archive a:hover::before {
  content:"▶";
  position:absolute;
  left:1em;
  top:50%;
  transform:translateY(-50%);
  color:#000;
  font-size:1em;
}