:root {
  /*----------COLORS-------------*/

  --text_main: #333A40;
  --bg_color: #fff2db;
  --blue: #409bd2;
  --blue2: #52a7de;
  --sub_blue: #7dd1ff;
  --red: #e75d5c;
  --red2: #ef948e;
  --sub_red: #ffd2d2;
  --green: #37ac9d;
  --sub_green: #84f2e2;
  --yellow: #ffc403;
  --sub_yellow:#ffe89f;
  --search_green: #00ab84;
  


}



body{
 color: var(--text_main);
}

.container{
  max-width: 1200px;
  margin:0 auto;
  padding: 8rem 0;
}

img{
 width: 100%;
}

a img:hover {
        opacity: 1;
    }

.font_70{
 font-size: 70%;
}
.font_120{
 font-size:120%;
}
.font_300{
 font-size:300%;
}

.font_bold{
 font-weight: bold;
}


.g_menu_ul img{
 width: 2rem;
}


.h-globalnavi_link{
  display: flex;
  align-items: center;   /* ← 上下中央揃え */
  gap: 1rem;              /* 画像と文字の間隔（任意） */
}

.h-globalnavi_link img{
  display: block;
}

.h-header .h-navi .h-globalnavi>ul>li>a.gm1:hover {
        color: var(--red);
    }

.h-header .h-navi .h-globalnavi>ul>li>a.gm2:hover {
        color: var(--green);
    }

.h-header .h-navi .h-globalnavi>ul>li>a.gm3:hover {
        color: var(--blue);
}

.h-header .h-navi .h-globalnavi>ul>li>a.gm4:hover {
        color: var(--yellow);
    }






.con_btn_area{
 background-color: var(--bg_color);
}

.con_btn_flex a{
 display: block;
 color: #ffffff;
 font-weight: bold;
 text-decoration:none;
}



.con_btn_flex i{
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size:3rem;
}

.con_btn_flex h3{
 margin:1rem 0;
}

/**当事者***/
.toujisha{
  position: relative;
  background-color:var(--red);
  overflow:hidden;
  transition: background-color .3s ease;

  z-index: 0; /* ← 新規追加（基準レイヤー） */

  border-radius: 20px;


 padding:1rem 2rem 0;
}

/* ======================
   背景画像（背面）
====================== */
.toujisha::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:url("../images/top/2026/p1_bg.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  opacity:0;
  transition: opacity .3s ease;

  z-index:-1;           /* ★ 背面へ */
  pointer-events:none;
}

/* ======================
   中身を前面へ
====================== */
.toujisha > *{
  position: relative;
  z-index: 1;
}

/* hover */
.toujisha_link:hover .toujisha{
  background-color:var(--sub_red);
}

.toujisha_link:hover .toujisha::after{
  opacity:0.35;
}

/* hover時 文字色変更 */
.toujisha_link:hover .toujisha h2,
.toujisha_link:hover .toujisha h3,
.toujisha_link:hover .toujisha i{
  color:var(--red);
  text-shadow:
    2px  2px 0 #fff,
   -2px  2px 0 #fff,
    2px -2px 0 #fff,
   -2px -2px 0 #fff;
}

.toujisha h2,
.toujisha h3{
  transition: color .3s ease;
}
/*****/


/**自治体***/
.jichi{
  position: relative;
  background-color:var(--green);
  overflow:hidden;
  transition: background-color .3s ease;

  z-index: 0; /* ← 基準レイヤー */

  border-radius: 20px;


 padding:1rem 2rem 0;
}

/* ======================
   背景画像（背面）
====================== */
.jichi::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:url("../images/top/2026/p2_bg.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  opacity:0;
  transition: opacity .3s ease;

  z-index:-1;
  pointer-events:none;
}

/* ======================
   中身を前面へ
====================== */
.jichi > *{
  position: relative;
  z-index: 1;
}

/* hover */
.jichi_link:hover .jichi{
  background-color:var(--sub_green);
}

.jichi_link:hover .jichi::after{
  opacity:0.35;
}

/* hover時 文字色変更 */
.jichi_link:hover .jichi h2,
.jichi_link:hover .jichi h3,
.jichi_link:hover .jichi i{
  color:var(--green);
  text-shadow:
    2px  2px 0 #fff,
   -2px  2px 0 #fff,
    2px -2px 0 #fff,
   -2px -2px 0 #fff;
}

.jichi h2,
.jichi h3{
  transition: color .3s ease;
}
/*****/


/***教育関係者**/
.kyouiku{
  position: relative;
  background-color:var(--blue);
  overflow:hidden;
  transition: background-color .3s ease;

  z-index: 0; /* 基準レイヤー */

  border-radius: 20px;


 padding:1rem 2rem 0;
}

/* ======================
   背景画像（背面）
====================== */
.kyouiku::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:url("../images/top/2026/p3_bg.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  opacity:0;
  transition: opacity .3s ease;

  z-index:-1;
  pointer-events:none;
}

/* ======================
   中身を前面へ
====================== */
.kyouiku > *{
  position: relative;
  z-index: 1;
}

/* hover */
.kyouiku_link:hover .kyouiku{
  background-color:var(--sub_blue);
}

.kyouiku_link:hover .kyouiku::after{
  opacity:0.35;
}

/* hover時 文字色変更 */
.kyouiku_link:hover .kyouiku h2,
.kyouiku_link:hover .kyouiku h3,
.kyouiku_link:hover .kyouiku i{
  color:var(--blue);
  text-shadow:
    2px  2px 0 #fff,
   -2px  2px 0 #fff,
    2px -2px 0 #fff,
   -2px -2px 0 #fff;
}

.kyouiku h2,
.kyouiku h3{
  transition: color .3s ease;
}
/*****/


.fv_area{
 position: relative;
}

.fv_text{

 width: 73%;
 position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

.whta_is {
    background: #f8e8cd;
}

h2.wi_h2 {
    background: #e75d5c;
    width: fit-content;
    margin: 0 auto;
    font-size: 3rem;
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 100px 50px 80px 20px;
}

p.wi_p {
    max-width: 800px;
    margin: 4rem auto 0;
    font-weight: bold;
}

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

.btn.top_to_soudan a {
    display: inline-block;
    padding: 2rem 4rem;
    border: 2px solid var(--red);
    border-radius: 100px;
    background-color: var(--red);
    color: #ffffff;
    font-size: 2.4rem;
    font-weight: bold;
}

.btn.top_to_soudan a:hover {
    background-color: var(--red);
    transform: scale(1.06);
}

.pdf_area{
 padding: 2rem;
 background-color: #fff;
 border-radius: 10px;
     margin-top: 4rem;
}

.delivery-lesson .pdf_h3{
 max-width: 100%;

    border-left: solid 8px var(--blue);
    padding: 0 0 0.2rem 1rem;
    margin-bottom: 1.5rem;
}

ul.pdf_links {
    margin: 0.5rem 0 1rem 0;
    text-align: center;
}

.pdf_links a{
    color: #cc4b21;
    text-decoration: underline;
    white-space: nowrap;
    font-size:1.4rem;
    font-weight: bold;
}

.ws_h4 {
    margin-bottom: 0.5rem;
}

.pdf_dl {
    margin-bottom: 3rem;
}

/* ======================
   about
====================== */

.p-state.ab_bg {
    background-color: #f5f2f2;
}

.p-intro.a_int_area{
 background-image: url("../images/about/2026/about_top_bg.webp");
  background-repeat: no-repeat;   /* 繰り返さない */
  background-position: center;    /* 画像の中心を基準 */
  background-size: cover;
}

.c-page_title.ab_h1 .wrap {
    display: inline-block;
    padding: 17px 55px;
    border: none; 
    border-radius: 180px 50px 150px 50px;
    background-color: var(--red);
    min-width: 400px;
    color: #ffffff;
    font-weight: bold;
    font-size:3rem;
}

.muni_page_top .textbody,
.edu_page_top .textbody,
.a_int_area .textbody {
    width: fit-content;
    max-width: 680px;
    margin: 0 auto;
    background-color: #ffffffe0;
    padding: 1rem 2rem;
    border-radius: 10px;
    
}


.a_int_area.p-intro .textbody p strong {
    font-size: 1.8rem;
    font-weight: bold;
    background: none;
    text-decoration: none;
    background-image: linear-gradient(var(--sub_red), var(--red));
    background-repeat: no-repeat;
    background-size: 100% 0.35em;
    background-position: 0 100%;
}


.c-anchor_navi.pg_ab_navi{
 background-color: var(--bg_color);
}

.bg_color{
 background-color: var(--bg_color)!important;

}

.c-title.ab_h2:first-letter{
font-size: 120%;
  color: var(--red);
}

.c-title.ab_h2{
 width: fit-content;
 margin: 0 auto ;
  font-weight: bold;
  border-bottom: 5px solid var(--sub_red);
  padding: 0;
  margin-bottom: 4rem;
  position: relative;
}

.c-title.ab_h2::after {
  content: '';
  background-color: var(--red);
  width:  4em;
  height: 3px;
  position: absolute;
  bottom: -3px;
  left: 0;
  z-index: 1;
}

.p-profile dl.shi_dl::before {
    background-color: var(--red);
}

.c-faq_list.ab_faq .item {
    border: 3px solid var(--red2);
}

.c-faq_list.ab_faq .item .question:hover {
    color: var(--green);
}

.p-problem.ab_pro .problem_list .item {
    border: 2px solid var(--red);
}

.p-problem.ab_pro .problem_list .item h3 {
    background-color: var(--red);
}

.p-message.ab_me .img::before{
 background: none !important;

}

.p-soudan.ab_soudan {
    padding: 50px 0 60px;
    border-top: 2px solid var(--red);
    position: relative;
    background: url(../images/about/2026/about_end_bg.webp) center center / cover no-repeat;
}


.ab_soudan_img{
  opacity: 0; /* 初期は見えない */
}

/* 発火用クラス */
.ab_soudan_img.is-show{
  animation: poyoyon2 1s ease-in-out forwards;
}

@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
 

.p-soudan.ab_soudan .btn a{
  display: inline-block;
  padding: 28px 40px;
  border: 2px solid var(--red);
  border-radius: 100px;
  background-color: var(--red);
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: bold;
}



.p-soudan.ab_soudan .btn a::before {
    content: " ";
    display: block;
    background: none;
    position: absolute;
    top: 50%;
    right: 25px;
    margin-top: -20px;
}

.p-soudan.ab_soudan .btn a:hover {
    background-color: var(--red);
    transform: scale(1.06);
   
}


/* ======================
   educator
====================== */

.edu_page_top .p-intro{
 padding: 40px 0 60px !important;
 background-image: url("../images/educator/2026/edu_top_bg.webp");
  background-repeat: no-repeat;   /* 繰り返さない */
  background-position: center;    /* 画像の中心を基準 */
  background-size: cover;
}

.c-page_title.edu_h1 .wrap {
    display: inline-block;
    padding: 17px 55px;
    border: none;
    border-radius: 180px 50px 150px 50px;
    background-color: var(--blue);
    color: #ffffff;
    font-weight: bold;
    font-size:3rem;
}


.delivery-lesson.pagecont.bg_yellow,
.p-educator.edu_kuro_area{
 background-color: var(--bg_color);
}

.p-educator.edu_kuro_area .p-profile dl::before {
    background-color: var(--blue);
}

.p-educator.edu_kuro_area .c-faq_list .item .question:hover {
    color: var(--green);
}

.p-educator.edu_kuro_area .c-faq_list .item {
    border: 3px solid var(--blue2);
}






.delivery-lesson.pagecont.demae_area.demae_area,
.delivery-lesson.pagecont.bg_gray{
 background-color: #f2f5f7;
}

.delivery-lesson.demae_area .c-content_inner {
    /*border-top: none;*/
}

h2.demae_h2{
    width: fit-content;
    margin: 0 auto;
    font-weight: bold;
    border-bottom: 5px solid var(--sub_blue);
    padding: 0;
    margin-bottom: 4rem;
    position: relative;
    font-size: 3.2rem;
}

h2.demae_h2::after {
    content: '';
    background-color: var(--blue);
    width: 4em;
    height: 3px;
    position: absolute;
    bottom: -3px;
    left: 0;
    z-index: 1;
}

.edu_h2_1st{
 font-size:120%;
 color: var(--blue);
}

.c-btn.demae_btn a::before {
    background: none;
}

.c-btn.demae_btn a {
    border: 2px solid var(--blue);
}

.c-btn.demae_btn a:hover {
    background-color: var(--blue);
    color: #ffffff;
    font-weight: bold;
}

.delivery-lesson.demae_area .past h4 {
    background-color: var(--blue2);
    font-weight: bold;
}

.edu_bg .delivery-lesson.pagecont,
.edu_bg .p-educator {
   background-color:  transparent;
}

/* ノート風ボックス */
.cstm-box-notebook {
  margin: 2em auto; /* 外側余白 */
  padding: 3em 2em 2em; /* 内側余白（上・左右・下） */
  position: relative; /* 疑似要素の基準 */
  background: var(--sub_red); /* 背景色 */
}

/* 上部のドット罫線 */
.cstm-box-notebook::before {
  content: '';
  position: absolute;
  top: 0.5em; /* 上位置 */
  inset-inline: 1em; /* 左右余白 */
  border-top: dotted 10px #fff; /* ドット線 */
  pointer-events: none; /* クリック透過 */
}

/* 内側テキスト */
.p-intro .textbody .cstm-box-notebook p {
  margin: 0; /* 余白リセット */
  font-weight: bold;
  font-size:2rem;
}




/* ======================
   自治体
====================== */

.muni_page_top .p-intro {
    padding: 40px 0 60px !important;
    background-image: url(../images/municipalty/muni_top_bg.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.c-page_title.muni_h1 .wrap {
    display: inline-block;
    padding: 17px 55px;
    border: none;
    border-radius: 180px 50px 150px 50px;
    background-color: var(--green);
    color: #ffffff;
    font-weight: bold;
    font-size:3rem;
}

h2.muni_h2 {
    width: fit-content;
    margin: 0 auto;
    font-weight: bold;
    border-bottom: 5px solid var(--sub_green);
    padding: 0;
    margin-bottom: 4rem;
    position: relative;
    font-size: 3.2rem;
}

h2.muni_h2::after {
    content: '';
    background-color: var(--green);
    width: 4em;
    height: 3px;
    position: absolute;
    bottom: -3px;
    left: 0;
    z-index: 1;
}

.muni_h2_1st {
    font-size: 120%;
    color: var(--green);
}

.p-intro.p_int_area,
.p-educator.jitai_area{
 background-color: var(--bg_color);
}

.edu_p,
.ji_p{
 max-width: 680px;
 margin:0 auto;
}

table {
  margin: 20px auto;
}
.tbl-r02 th {
  background: #e9727e;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.tbl-r02 td {
  border: solid 1px #ccc;
  padding: 10px;
}

.ji_pdf{
 text-align: center;
     margin-top: 4rem;
}

.ji_pdf a{
 font-weight: bold;
 color: var(--red);
}

.p-educator.jirei_area,
.tieup-content.pagecont.tai_area
{
 background-color: #f2f7f6;
}

h3.pu_h3{
 font-size:2.5rem;margin-bottom:2rem;

}

.pu_h3_gr{
 color:var(--green);
 padding-right: 1.5rem;
 font-size:150%
}

/* YouTube比率固定 */
.p_youtube{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* ← 比率維持（重要） */
  overflow: hidden;
}

/* iframeを全面フィット */
.p_youtube iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ma_top_3{
 margin-top:3rem;
}


.tieup-content .post-list.tai_ul>li {
    background: var(--green);
    color: #ffff;
    font-weight: bold;
    border-radius: 0;
}

.tai_ul .title{
 color: var(--green);
 font-weight: bold !important;
 border-radius: 12px 0px !important;
}

.tieup-content .post-list>li .cont .linkbtn a::before {
    background-image:none;
    display: none;
}

 .tieup-content .post-list.tai_ul>li .cont .linkbtn a {
    border-radius: 50px;
    font-weight: 100;
}

.tieup-content .post-list.tai_ul>li .cont .linkbtn a:hover {
    opacity: 1;
    background-color: var(--green);
    color: #ffffff;
    border: #ffffff solid 3px;
    font-weight: bold;
}


.circle-number{
  list-style: none;
  counter-reset: num;
  padding-left: 2em;
}

.circle-number li{
  position: relative;
  counter-increment: num;
  margin-top: 2rem;
}

/* 円数字 */
.circle-number li::before{
  content: counter(num);
  position: absolute;
  left: -2em;

  width: 1.5em;
  height: 1.5em;
  line-height: 1.2em;
  text-align: center;

  border-radius: 50%;
  background-color: var(--green); /* ← 指定カラー */
  color: #ffffff;            /* 数字は白 */
  font-weight: bold;
  font-size: 0.9em;
}


.seika_ul{
  list-style: none;     /* デフォルト黒丸を削除 */
  padding-left: 1.8em;
}

.seika_ul li{
  position: relative;
  margin-bottom: 0.6em;
}

/* カラー丸 */
.seika_ul li::before{
  content: "";
  position: absolute;
  left: -1.4em;
  top: 0.4em;           /* 文字中央付近に調整 */

  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background-color: var(--green);
}


.ji_h3{
 border-left:solid 8px var(--green);
 padding:0 0 0.2rem 1rem;
 margin-bottom: 1rem;
}

.ji_sec {
    margin: 4rem 0;
}

.c-topicpath .yc_uni_list ul li::after {
    content: " ";
    display: none;
}


.p-search_result .union_list .union_item .links.links_area li a{
 font-weight: bold;
 color: var(--search_green);
 text-decoration: underline;
}

.c-topicpath ul.links_area{
 display: block;
}

.p-search_result .union_list .union_item .links.tel_mail li,
.p-search_result .union_list .union_item .links.links_area li {
    margin-bottom: 0.5rem;
}

.c-topicpath ul.tel_mail{
 display: block;
}

.list_con_title{
    margin-bottom: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color:  var(--search_green);
    margin-top:12px;
}

.list_con_p{
 font-size: 1.4rem;
}

.so_ko_shu{
 margin-top:1.25rem;
 font-size: 1.2rem;
    font-weight: 800;
    color: var(--search_green);
}

.p-search_result .union_list .union_item ul li.soudan_icon {
    width: 70px;
    margin: 8px 8px 0 0;
    font-size: 1.0rem;
    text-align: center;
}

.p-search_result .union_list .union_item ul.consultation-type-list {
    
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
}

.p-search .p-search_box .select_list.todoufuken {

    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}


p.nagasaki_p {
    padding-left: 2rem;
}




.yc_youtube{
  width: 100%;            /* 横幅を親要素いっぱいに広げる */
    max-width: 560px;       /* 必要に応じて最大幅を制限（任意） */
    margin: 0 auto 3rem;         /* 中央寄せ（任意） */
    
    /* --- 16:9を維持する魔法のコード --- */
    aspect-ratio: 16 / 9;   /* 横16：縦9の比率を固定 */
}

.yc_youtube iframe{
 max-width: 100%;
 height: 100%;           /* 親(.yc_youtube)の縦幅に合わせる */
    border: none;
}

@media (min-width: 1025px) {
 img.soudan_title {
    max-width: 600px;
}

 p.lead {
     margin-top: 5rem;
 }

 div#message {
    padding-bottom: 140px;
}

}


@media (min-width: 521px) {

 .pc{
  display: block;
 }
 .sp{
  display: none;
 }



   .con_btn_flex{
  display: flex;
          justify-content: space-between;
   align-items:stretch; 
 }

 .con_btn_flex > a{
  display:flex;
  text-decoration:none;
  
}

 .con_btn_flex a{
  width: 32%;
 }

 .toujisha_area,
.jichi_area,
.kyouiku_area{
  display:flex;
  width:100%;
}

.toujisha,
.jichi,
.kyouiku{
  display:flex;
  flex-direction:column;
  width:100%;
}

.toujisha img,
.jichi img,
.kyouiku img{
  margin-top:auto;
}

/* 横並び */
.m_pc_lrex{
  display: flex;
  gap: 24px;              /* 動画間の余白 */
}

/* 動画ラッパー */
.new_movie{
  flex: 1;                /* 横幅を均等に分配 */
}

.gra_area {
    margin: 4rem 0;
    display: flex;
    /* align-content: center; */
    justify-content: space-between;
    gap: 4rem;
}

.tai_hou{
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
}

.ji_img{
 width: 45%;
}
.ji_hou{
 width: 52%;
}
.chizu_area img{
 width: 50%;
 margin:0 auto;
 display: block;
}

 .pdf_dl {
    width: 32%;
}

.ws_pdf{
 display: flex;
 justify-content: space-between;
}


}

@media (max-width: 520px) {
 .pc{
  display: none;
 }
 .sp{
  display: block;
 }

 .sp_text_center{
 text-align: center;
}

 .c-page_title.ab_h1 .wrap,
 .c-page_title.edu_h1 .wrap,
 .c-page_title.muni_h1 .wrap{
  font-size:2.5rem;
 }

 h2.demae_h2,
 h2.muni_h2
  {
    font-size:2.3rem;
 }

 h3.pu_h3 {
  font-size:1.5rem;
 }

 .h-header .h-navi .h-globalnavi>ul>li>a {
        display: flex;
        font-weight: bold;
    }

 .con_btn_area .container{
  padding: 4rem;
 }

 .con_btn_flex a{
  margin-bottom:4rem;
 }

 .a_int_area .c-page_title .wrap {
        padding: 9px 37px;
        border-width: 3px;
        min-width: 280px;
    }

.p-intro.a_int_area{
 background-image: url("../images/about/2026/about_top_bg_sp.webp");
  background-repeat: no-repeat;   /* 繰り返さない */
  background-position: center;    /* 画像の中心を基準 */
  background-size: cover;
}

.p-soudan.ab_soudan {
    background: url(../images/about/2026/about_end_bg.webp) center top / 100% auto repeat-y;
}

h2.wi_h2 {
    font-size: 2.5rem;}

    .btn.top_to_soudan a {
    padding: 1rem 2rem;
    margin-top: 3rem;
    font-size: 2rem;
}

p.wi_p {
    margin: 2rem auto 0;
}

.container.wi_co{
 padding-top:7rem;
}

.yt_se{
 margin-top:2.5rem;
}

.g_con {
    margin: 2rem 0;
}


.p-intro .textbody .cstm-box-notebook p {
    font-size: 1.8rem;
    line-height: 1.5;
}

.cstm-box-notebook {
    padding: 2em 0.15em 1em;
}

}