@charset "utf-8";
*, article, aside, canvas, details, figcaption, figure,
header, footer, hgroup, nav, section, summary, main {
  margin: 0;
  padding: 0;
}

html,body{ height:100%;}

/* 背景 */
body {
  color: #3A4F63;
  font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Yu Gothic","游ゴシック",Meiryo,"メイリオ",Arial,sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: clamp(14px,1.5vw,18px);
  line-height: 2.5;
  background: #FFFFFF url(../images/bg.jpg) repeat-y bottom center;
}

/* 画像全体 */
img {
  border: 0;
  vertical-align: top;
  max-width: 100%;
  height: auto;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

/* リスト */
ol, ul, li {
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}

/* テーブル */
table {
  border-collapse: collapse;
}

/* HTML5, 5.1 で追加 */
article, aside, canvas, details, figcaption, figure, footer,
header, hgroup, main, menu, nav, picture, section, summary {
  display: block;
}

/* ルビ */
ruby rt {
  font-size: 0.45em;
  line-height: 1;
  transform: translateY(-2px);
}


/* コンテンツ全体 */
.section_wrapper {
  max-width: 1200px;
  margin: auto;
  padding: 40px 80px;
  box-sizing: border-box;
  border: 6px solid #046E54;
  border-radius: 20px;
}
.section_wrapper:first-child {
  border: 6px solid #F4A80E;
}
section {
  width: 100%;
}
.container {
  max-width: 1200px;
  width: 100%;
  margin: auto;
  padding-top: clamp(30px, 3.3vw, 40px);
  box-sizing: border-box;
}
/* .container.contact {
  width: 95%;
  padding: 0 2.5%;
  box-sizing: border-box;
} */
section h2.for_foreigners {
  font-size: clamp(20px,3vw,36px);
  font-weight: bold;
  background: #F5DF7C;
  padding: 0.5em 1em 0.2em 0
}
section h2.for_organizations {
  font-size: clamp(20px,3vw,36px);
  font-weight: bold;
  background: #cddc39;
  padding: 0.5em 1em 0.2em 0
}
section p {
  margin-top: 15px;
  line-height: 1.8;
}
main.mainContents {
  min-height: 100vh;
  padding: 0 2.5%;
  box-sizing: border-box;
}

/* ヘッダー */
header {
  max-width: 1920px;
  width: 100%;
  text-align: center;
}
.header_inner {
  width: 100%;
  aspect-ratio: 1920 / 700;
  background-image:
  url(../images/bg_hero.png),url(../images/bg_h.png),
  linear-gradient(to bottom, rgba(221,238,245,1), rgba(255,255,255,1));
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100%;
  height: auto;
  position: relative;
}
.header_inner .hero_picture {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
}
.header_inner .hero_picture img {
  width: 50%;
  height: auto;
}

.hero_picture img {
  opacity: 0;
  transform: translateY(40px);
}

.header_inner h1 {
  font-size: clamp(28px,3.2vw,62px);
  font-weight: bold;
  line-height: 1.4;
  padding:50px 1em 10px;
  letter-spacing: 1.5px;
  font-family: "vdl-v7marugothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  position: relative;
  z-index: 3;
  text-shadow:
    2px 2px 0 #fff,
    -2px 2px 0 #fff,
    2px -2px 0 #fff,
    -2px -2px 0 #fff,
    0 2px 0 #fff,
    2px 0 0 #fff,
    0 -2px 0 #fff,
    -2px 0 0 #fff;
}
.header_inner h1 ruby rt {
  font-size: 0.3em;
  line-height: 1;
  transform: translateY(-2px);
}
.header_inner h1 span {
  color: #ea545d;
  letter-spacing: 0.5px;
}
.header_inner h1+p{
  font-size: clamp(14px,1.68vw,32px);
  background: #ea545d;
  color: #FFFFFF;
  letter-spacing: 1px;
  width: fit-content;
  margin: 0 auto 20px;
  padding: 8px 2em 0;
  font-family: "vdl-v7marugothic", sans-serif;
  font-weight: 500;
  font-style: normal;
  position: relative;
  z-index: 3;
  line-height: 1.8;
}
.header_inner h1+p span {
  font-size: 87.5%;
}
.header_inner .section_title {
  font-size: clamp(22px,2.1vw,42px);
  font-weight: bold;
  letter-spacing: 1.5px;
  font-family: "vdl-v7marugothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  position: relative;
  z-index: 3;
  text-shadow:
    2px 2px 0 #fff,
    -2px 2px 0 #fff,
    2px -2px 0 #fff,
    -2px -2px 0 #fff,
    0 2px 0 #fff,
    2px 0 0 #fff,
    0 -2px 0 #fff,
    -2px 0 0 #fff;
}
.header_inner .section_title span {
  font-size: clamp(16px,1.4vw,28px);
}
.header_inner .section_description {
  font-size: clamp(14px,1.25vw,24px);
  font-family: "vdl-v7marugothic", sans-serif;
  font-weight: 500;
  font-style: normal;
  position: relative;
  z-index: 3;
  text-shadow:
    2px 2px 0 #fff,
    -2px 2px 0 #fff,
    2px -2px 0 #fff,
    -2px -2px 0 #fff,
    0 2px 0 #fff,
    2px 0 0 #fff,
    0 -2px 0 #fff,
    -2px 0 0 #fff;
}

nav.gnav {
  max-width: 1920px;
  width: 100%;
  padding: 0 2.5%;
  box-sizing: border-box;
  margin: auto;
}
nav.gnav .gnav_list {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 60px;
}
nav.gnav li {
  max-width: 500px;
  width: 100%;
}
nav.gnav li a {
  font-size: clamp(24px,1.875vw,36px);
  font-weight: bold;
  border-radius: 10px 10px 0 0;
  padding: 10px 1em;
  width: 100%;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  background: #F4A80E;
  color: #FFFFFF;
  box-sizing: border-box;
  box-shadow: 0 -4px 6px 0px rgba(0, 0, 0, .17);
  border: 3px solid #F4A80E;
  border-bottom: 0;
  box-sizing: border-box;
  transition: 0.3s all;
  position: relative;
}
nav.gnav li.for_organizations a {
  background: #046E54;
  border: 3px solid #046E54;
  border-bottom: 0;
}
nav.gnav li a::after {
  content: "";
  display: inline-block;
  width: 42px;
  height: 42px;
  background: url(../images/icon_arrow_right.svg) no-repeat;
  position: absolute;
  right: 1em;
  transition: 0.3s all;
}
nav.gnav li a span {
  font-size: 80%;
}
nav.gnav li a:hover {
  background: #FFFFFF;
  color: #F4A80E;
  box-shadow:none;
  cursor: pointer;
}
nav.gnav li.for_organizations a:hover {
  color: #046E54;
}

/* タブ切り替え */
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
nav.gnav li.active a::after {
  transform-origin: center;
  transform: rotate(90deg);
}



/* フッター */
footer {
  text-align: center;
  /* font-size: 12px; */
  padding: 1em;
  box-sizing: border-box;
  margin: 0 auto;
  width: 100%;
}

/* サブページ大見出し */
main.mainContents h3 {
  font-size: clamp(20px,2.6vw,32px);
  font-weight: bold;
  padding-bottom:20px;
  padding-top: clamp(20px,5vw,60px);
  margin-bottom: 1em;
  border-bottom: 2px solid #CCCCCC;
  line-height: 1;
  position: relative;
}
main.mainContents h3::before {
  content: "";
  display: inline-block;
  width: 100px;
  height: 5px;
  background: #3A4F63;
  position: absolute;
  bottom: -4px;
  left: 0;
}

/* 一番最初にくる時はアキなしにする場合はここに書き足す */
main h3:first-child, main h4:first-child, main h5:first-child, main p:first-child, main table tr td p:first-child {
  margin-top: 0;
}

/* 組み合わせでアキなしする場合はここに書き足す */
main h3 + h4, main h4 + h5, main h3 + p ,main h4 + p, main h5 + p {
  margin-top:0;
}

main.mainContents h4 {
  margin-top: 1em;
  margin-bottom: 0.25em;
  font-size: 110%;
  font-weight: bold;
  background: #fcd158;
  padding: 0.5em 1em;
}

/* サブページ小見出し  */
main.mainContents h5 {
  margin: 1.5em 0 0.5em 0;
  margin-bottom: 0.5em;
  padding:0.2em;
  font-size: 110%;
  font-weight: bold;
  border-bottom:3px dotted #ccc;
}


/* サブページ段落 */
main p {
  margin-top: 1em;
}
main p.zero {
  margin-top: 0;
}
main p.han {
  margin-top: 0.5em;
}

/* サブページリスト */
main ul {
  margin-left: 1em;
}
main ul li {
  list-style: disc;
}
main ul.half li {
  margin-bottom: 0.5em;
}
main ol {
  margin-left: 1.5em;
}
main ol li {
  list-style: decimal;
}


/* リンク */
p.link {
  background:url(../images/icon_link.png) no-repeat left center;
  padding-left:15px;
  margin-bottom:0;
}
p.link a:link,p.link a:visited {
  color:#333333;
  text-decoration:none;
}
p.link a:hover,p.link a:active {
  color:#666666;
  text-decoration:underline;
}

/* 文章中のリンク */
a:link, a:visited {
  color: #0066CC;
  text-decoration: none;
}
a:hover, a:active {
  color: #0066CC;
  text-decoration: underline;
}

a.btn {
  font-size: clamp(16px,2vw,24px);
  font-weight: bold;
  border-radius: 5px;
  padding: 15px 35px 10px 5px;
  max-width: 500px;
  width: 100%;
  margin:auto;
  margin-top: clamp(20px,5vw,60px);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  background: #F4A80E;
  border: 2px solid #F4A80E;
  color: #FFFFFF;
  box-sizing: border-box;
  box-shadow: 0 4px 6px 0px rgba(0, 0, 0, .17);
  transition: 0.3s all;
  position: relative;
}
a.btn:hover {
  color:#F4A80E;
  background: #FFFFFF;
}
a.btn:before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 42px;
  background: url(../images/icon_arrow_right.svg) no-repeat;
  position: absolute;
  right: 1em;
}
a.btn.green {
  border: 2px solid #046E54;
  background: #046E54;
}
a.btn.green:hover {
  background: #FFFFFF;
  color: #046E54;
}


/* pagetop */
.pagetop {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 95px;
  z-index: 2;
}
.pagetop a {
  display: block;
  width: 70px;
  height: 70px;
  background: rgba(35, 24, 21, 0.8);
  border-radius: 50%;
  position: relative;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.pagetop a::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% - 10px);
  width:0;
  height:0;
  border-style:solid;
  border-width: 0 10px 17px 10px;
  border-color: transparent transparent #FFFFFF transparent;
  opacity: 0.95;
}
.pagetop a:hover {
  opacity: 0.6;
}


/* 外部リンク */
a.external {
  background: url(../images/external.png) no-repeat right center;
  padding-right: 20px;
}

/* テンプレート */
table.hyou_aaa {
  width: 100%;
  margin-bottom: 1em;
}
table.hyou_aaa td {
  border: 1px solid #666666;
  background-color: #FFFFFF;
  padding: 0.5em;
  vertical-align: top;
  text-align: left;
}
table.hyou_aaa th {
  border: 1px solid #666666;
  background-color: #F0FFEE;
  padding: 0.5em;
  vertical-align: top;
  text-align: left;
  font-weight: normal;
  width: 20%;
}
table.hyou_aaa tr {
  padding: 0.5em;
  vertical-align: top;
  text-align: left;
}

/* table line_none */
table.non {
  border: none;
}
table.non td {
  text-align: left;
  vertical-align: top;
}
table.non th {
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  font-weight: normal;
}

/* ※一字下げ */
.kome{
  padding-left:1em;
  text-indent:-1em;
}

/* text */
.mbm1 {margin-bottom:-1em;}
.mb1 {margin-bottom:1em;}
.mb2 {margin-bottom:2em;}
.mb03 {margin-bottom:0.3em;}
.mb05 {margin-bottom:0.5em;}
.mb15 {margin-bottom:1.5em;}

.pl05 {padding-left:0.5em;}

.ml1 {margin-left:1em;}

.f85 {font-size:85%;}
.f90 {font-size:90%;}
.f95 {font-size:95%;}
.f100 {font-size:100%;}
.f105 {font-size:105%;}
.f110 {font-size:110%;}
.f115 {font-size:115%;}
.f120 {font-size:120%;}

.uchikeshi {
   background:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABGdBTUEAAK/INwWK6QAAAANQTFRFAAAAp3o92gAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII=)
0 center repeat-x;
}
.uchikeshi.red {
   background:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABGdBTUEAAK/INwWK6QAAAANQTFRF/wAAGeIJNwAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII=
) 0 center repeat-x;
}
.underline {
  text-decoration:underline;
}
.red {color: #FF0000;
}
.blue {color: #1d2777;
}

/* 太字 */
.bold{
  font-style:normal;
  font-weight:bold;
}

.text_r{
  text-align:right;
}
.text_c{
  text-align:center;
}


/* 活動内容（外国人向け） */
p.note_important {
  font-size: clamp(16px,1.8vw,22px);
  font-weight: bold;
}
.content_block.flex {
  display: flex;
  gap: 40px;
  width: 100%;
}

.content_block.flex .inner {
  width: 50%;
}
.content_block.flex h4 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 110%;
  font-weight: bold;
  background: #FDEBBB;
  padding: 0.5em 1em;
}
.img_flyer img {
  width: 200px;
  margin: 60px auto;
  box-shadow: 3px 0 20px rgba(58,79,99,0.3);
  display: block;
  border: 2px solid transparent;
  transition: 0.5s all;
}
.img_flyer img:hover {
  border: 2px solid #3A4F63;
}
ul.icon_check li {
  position: relative;
  list-style:none;
  padding-left: 1.5em;
}
ul.icon_check li::before {
  content: "";
  display: inline-block;
  background: url(../images/icon_checkbox.svg) no-repeat;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 12px;
  left: -0.5em;
}

/* 活動例 */
.katsudo .inner {
  width: 100%;
  display: flex;
  gap: 40px;
}
.katsudo dl {
  width: 50%;
  display: grid;
  grid-template-columns: 6em 1fr;
  row-gap: 5px;
}
.event_images {
  margin: 40px auto;
  display: flex;
  gap: 40px;
}
.event_images .img {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mainContents h4.event {
  margin: 1.5em 0 0.5em 0;
  margin-bottom: 0.5em;
  padding:0.2em;
  font-size: 110%;
  font-weight: bold;
  border-bottom:3px dotted #ccc;
  background: transparent;
}

/* 参加方法（STEP1〜5） */
.content_block.step {
  /* margin-bottom: 80px; */
}
/* パネル本体 */
.panel-row {
  display: flex;
  align-items: stretch; /* パネルを同じ高さにする */
}
.panel {
  font-size: 16px;
  font-weight: bold;
  width: 285px;
  background: #fbf8e1;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px 16px 24px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column; /* 画像→テキストを縦並び */
}

/* パネル内の画像 */
.panel img {
  max-width: 164px;
  width: 100%;
  height: auto;
  margin:0 auto 12px;
}

/* 三角（横15px × 縦24px） */
.triangle {
  width: 0;
  height: 0;
  border-left: 15px solid #ccc;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin: 0 10px;
  /* ★これが重要：高さ揃えの計算から外す */
  align-self: center;
}
.panel_title {
  margin-bottom: 0.5em;
  text-align: center;
  font-size: 18px;
}
.panel-row.katsuyou .panel ul li a {
  text-decoration: underline;
}
.panel-row.katsuyou .panel ul li a:hover {
  text-decoration: none;
}


/* 団体向け */
.container.flex_dantai {
  display: flex;
  gap: 60px;
}
.container.flex_dantai .content_block {
  flex: 1; /* 横幅を均等にする */
}

/* 活用の流れ（STEP1〜4） */
.panel-row.katsuyou .panel {
  text-align: left;
}
.panel-row.katsuyou .panel ul {
  font-size: 14px;
}




/* PCで表示 */
.pc_only {
  display: inline-block;
}
/* PCでは非表示 */
.sp_only, .tb_only, .pc_none {
  display: none;
}

/*------------------------------------------*/
/* タブレット用 1000px */
/*------------------------------------------*/
@media screen and (max-width:1000px){
  /* タブレットで表示 */
  .tb_only, .pc_none {
    display: inline-block;
  }
  /* タブレットでは非表示 */
  .pc_only, .sp_only {
    display: none;
  }


  /* コンテンツ全体 */
  .section_wrapper {
    padding: 0 5%;
    width: 95%;
    border-radius: 2px;
  }
  /* ヘッダー */
  .header_inner .hero_picture {
    top: 100px;
    gap: 50px;
    width: calc(100% - 50px);
  }
  
  nav.gnav {
    padding: 50px 5% 0;
  }
  

  /* pagetop */
  .pagetop {
    right:20px;
    z-index: 3;
  }

  /* 下記は削除しない */
}

/*------------------------------------------*/
/* スマホ用 767px  */
/*------------------------------------------*/
  @media screen and (max-width:767px){
  /* スマホで表示 */
  .sp_only, .pc_none {
    display: inline-block;
  }
  /* スマホでは非表示 */
  .pc_only, .tb_only, .sp_none {
    display: none;
  }


  /* コンテンツ全体 */
  section h2.for_foreigners {
    padding: 1em;
    text-align: center;
  }
  section h2.for_organizations {
    padding: 1em;
    text-align: center;
  }

/* ヘッダー */
  .header_inner {
    background-image:url(../images/bg_h.png),linear-gradient(to bottom, rgba(221,238,245,1), rgba(255,255,255,1));
    margin-bottom: 40px;
  }
  .header_inner .hero_picture {
    top: 0;
    padding: 0 2.5%;
    width: auto;
    gap: 0;
    box-sizing: border-box;
  }
  .hero_picture img {
    display: block;
    width: 47.5%;
    height: auto;
  }
  .header_inner h1 {
    padding:140px 2.5% 10px;
  }
  .header_inner h1+p{
    margin: 0 auto 10px;
  }
  .header_inner .section_description {
    padding: 0 14%;
    margin-top: 0;
  }

  nav.gnav {
    padding: 0 5%;
    position: relative;
    z-index: 3;
  }
  
  nav.gnav .gnav_list {
    gap: 20px;
  }
  nav.gnav li {
    max-width: 500px;
    width: 50%;
  }
  nav.gnav li a {
    font-size: clamp(20px,1.68vw,32px);
    border-radius: 6px 6px 0 0;
    padding: 10px 1em 10px 0;
    flex-direction: column;
    line-height: 0.9;
  }
  nav.gnav li a::after {
    right: 0;
  }

  /* フッター */
  footer {
    padding: 40px 1em;
  }

  /* 活動内容（外国人向け） */

  .content_block.flex {
    flex-direction: column;
  }

  .content_block.flex .inner {
    width: 100%;
  }
  
  .img_flyer img {
    width: 200px;
    margin: 20px auto 40px;
  }
  .img_flyer img:hover {
    border: 2px solid #3A4F63;
  }
  a.btn.img_flyer {
    flex-direction: column;
    line-height: 1.8;
  }

  ul.icon_check li::before {
    width: 14px;
    height: 14px;
    top: 5.5px;
  }

  /* 活動例 */
  .katsudo .inner {
    flex-direction: column;
    gap: 0;
  }
  .katsudo dl {
    width: 100%;
  }

  /* 参加方法（STEP1〜5） */
  
  /* パネル内の画像 */
  .panel-row {
    flex-direction: column;
    align-items: center; 
    padding: 0 5%; 
  }

  .triangle {
    display: none;
  }

  .panel {
    width: 100%;
    max-width: 360px;
    margin-bottom: 20px;
  }
  

  /* 団体向け */
  .container.flex_dantai {
    gap: 10px;
    flex-direction: column;
  }

  /* 活用の流れ（STEP1〜4） */


  .container.contact {
    width: 90%;
    margin: 0 5%;
  }


  /* 下記は削除しない */
}

/*------------------------------------------*/
/* タブレット用 480px */
/*------------------------------------------*/
@media screen and (max-width:480px){

  .header_inner .hero_picture {
    top: 0;
    padding: 0 2.5%;
    width: auto;
    gap: 0;
    box-sizing: border-box;
    }


    /* 下記は削除しない */
}

/*------------------------------------------*/
/* プリント用 */
/*------------------------------------------*/
@media print {
  /* タブの中身を全部表示 */
  .tab-content {
    display: block !important;
  }

  /* タブの見た目を無効化（任意） */
  .gnav,
  .gnav_list,
  .gnav_list .tab {
    display: block !important;
  }

  /* active の強調を消す（任意） */
  .gnav_list .tab.active a {
    border-bottom: none !important;
    font-weight: normal !important;
    color: #000 !important;
  }
}