@charset "UTF-8";
/* CSS Document */

/*----------------------------------------------------------

共通css

----------------------------------------------------------*/
/*リセット
-----------------------------*/
html{
	width: 100%;
}
body{
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 15px;
	min-width: 1100px;
}
body *{
	box-sizing: border-box;
}
.all_wrap{
	overflow: hidden;
}
a{
	color: #2370BF;
}
p{
	font-size: 20px;
	color: #361616;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*リセット（スマホ）
-----------------------------*/
@media screen and (max-width:736px){
	body{
		font-size: 14px;
		min-width: 100%;
	}
	p{
		font-size: 16px;
		text-align: left;
		line-height: 1.5em;
	}
}
/* 表示非表示切り替え
-----------------------------*/
/* SP */
@media screen and (max-width:736px) {
	.-u-SpNonePcBlock {
		display: none;
	}
	.-u-SpNonePcinline {
		display: none;
	}
	.-u-PcNoneSpBlock {
		display: block;
	}
	.-u-PcNoneSpinline {
		display: inline;
	}
}
/* PC */
@media print, screen and (min-width:737px) {
	.-u-SpNonePcBlock {
		display: block;
	}
	.-u-SpNonePcinline {
		display: inline;
	}
	.-u-PcNoneSpBlock {
		display: none;
	}
	.-u-PcNoneSpinline {
		display: none;
	}
}

/*----------------------------------------------------------
　ページトップボタン
----------------------------------------------------------*/
#page_top{
	position: fixed;
	width: 120px;
	height: 120px;
	bottom: 100px;
	right: 20px;
	z-index: 9999;
}
#page_top img{
	width: 100%;
	height: auto;
}
/* SP */
@media screen and (max-width:736px) {
	#page_top{
		width: 60px;
		height: 60px;
		bottom: 100px;
	}
}
/* PC */
@media screen and (min-width:737px) {
	#page_top{
		left: 50px;
	}
}
/* =======================================================
   ヘッダー（SPベース・PC上書き構成）
======================================================= */

/* --- sp --- */
header {
  background-color: #EEE0C7;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000; /* 他のコンテンツより必ず前面に出す */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
header + * {
  margin-top: 80px;
}
/* サイトタイトルなどの外枠 */
.header_box_top {
  width: 100%;
  min-height: 80px;
  line-height: 80px;
  padding: 0 15px;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* ロゴとメニューボタンを両端に配置 */
  align-items: center;
}

.site_title {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.site_title img {
  max-width: 100%;
  width: auto;
}
/* スマホではサブテキストや補助ロゴを非表示 */
.site_title span,
.project_name {
  display: none;
}

/* ハンバーガーメニューボタン */
#menu_btn {
  display: block;
  width: 80px;       /* ボタンのクリック判定エリアの広さ */
  margin: 0;
  padding: 0;
  cursor: pointer;
  
  /* 子要素の画像を中央に寄せるための設定 */
  display: flex;
  justify-content: center;
  align-items: center;
}

#menu_btn img {
  width: 70%;
  height: auto;      /* 縦横比（アスペクト比）を完全に維持 */
  display: block;
}

/* ナビゲーションの外枠（スマホではメニューボタン押下で開閉するエリア） */
header nav {
  display: none; /* JSでの開閉制御用（デフォルト非表示） */
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #EEE0C7; /* メニュー背景色をヘッダーと統一 */
}

.header_nav {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  display: flex;
  flex-wrap: wrap; /* 2列に折り返す */
}

.header_nav li {
  width: 50%; /* スマホでは2列配置 */
  padding: 0;
  text-align: center;
}

.header_nav li a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 5px;
  width: 100%;
  line-height: 20px;
  text-decoration: none;
  color: #361616;
  font-weight: bold;
  font-size: 14px;
  border-left: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.5);
  box-sizing: border-box;
}

/* 左側の列（奇数番目）の左ボーダーを消す */
.header_nav li:nth-child(odd) a {
  border-left: none;
}


/* --- PC版 --- */
@media screen and (min-width: 1400px) {
  header + * {
    margin-top: 103px;
  }
	
  .header_box_top {
    max-width: 1600px;
    min-height: 103px;
    line-height: 90px;
    padding: 0 30px;
    margin: 0 auto;
    justify-content: flex-start; /* 左詰めに戻す */
    align-items: stretch;
  }

  .site_title {
    margin: auto;
  }
  .site_title img {
    max-width: 480px;
    height: auto;
  }
  .site_title span {
    display: inline; /* PC版のサブテキストを表示 */
    padding: 10px;
  }
  .site_title span img {
    width: auto;
    height: 19px;
  }

  /* PCではメニューボタンを隠す */
  #menu_btn {
    display: none;
  }

  /* ナビゲーションの配置をPC用にリセット */
  header nav {
    display: block; /* PCでは常に表示 */
    position: static;
    width: auto;
    background: none;
  }

  .header_nav {
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: nowrap; /* 折り返さない */
    justify-content: space-around;
    align-items: center;
    height: 100%;
  }

  .header_nav li {
    width: auto; /* 2列を解除してコンテンツ幅に */
  }

  .header_nav li a {
    padding: 2em 15px;
    font-size: 1.2em;
    line-height: 30px;
    border-left: none; /* スマホ用の枠線をリセット */
    border-bottom: none;
  }
}

/*----------------------------------------------------------
　フッター
----------------------------------------------------------*/
#FOOTER {
  font-family: var(--font-body);
}

.footer_main {
  background: var(--color-bg-footer);
  padding: 52px 24px 48px;
}

.footer_inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer_left  { display: flex; flex-direction: column; gap: 28px; }

.footer_title     { font-size: 22px; font-weight: 800; color: var(--color-brown); letter-spacing: 0.06em; line-height: 1.55; }
.footer_title__sub{ font-size: 18px; font-weight: 700; letter-spacing: 0.08em; }

.sdgs_wrap  { display: flex; flex-direction: column; gap: 12px; }
.sdgs_logos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sdgs_logos__main { 
	width: 420px; 
	height: auto; 
	flex-shrink: 0;
}
.sdgs_logos__icons{ display: flex; gap: 4px; align-items: center; }
.sdgs_logos__icon { width: 72px; height: 72px; object-fit: contain; border-radius: var(--radius-sm); }
.sdgs_note  { font-size: 12px; color: var(--color-muted); letter-spacing: 0.04em; }

.footer_right { 
	display: flex;
	flex-direction: row; 
	gap: 20px; 
	align-items: center; 
}

.footer_banner {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 240px;
  width: 100%;
}
.footer_banner:hover        { opacity: 0.82; transform: translateY(-2px); }
.footer_banner:focus-visible{ outline: 3px solid var(--color-brown); outline-offset: 3px; border-radius: var(--radius-md); }
.footer_banner img          { width: 100%; height: auto; border-radius: var(--radius-md); }

.footer_copy { background: var(--color-bg-copy); padding: 18px 24px; text-align: center; }
.footer_copy p { font-size: 12px; color: var(--color-muted); letter-spacing: 0.06em; }


/*窓口・お問い合わせ（pc）
-----------------------------*/
@media screen and (min-width:736px){
	#FOOTER {
  		margin-top: 6em;
	}
  /* --- #FOOTER --- */
  .footer_main  { padding: 60px 40px 56px; }
  .footer_inner { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 48px; }
  .footer_left  { flex: 1; max-width: 560px; }
  .footer_right { 
	  flex-shrink: 0; 
	  flex-direction: column; 
	  align-items: flex-end;
	  gap: 24px; 
	}
  .footer_banner { max-width: 200px; }
}

/*窓口・お問い合わせ（sp）
-----------------------------*/
@media screen and (max-width: 393px){
	#FOOTER {
  		margin-top: 4em;
	}
  /* --- #FOOTER --- */
  .footer_main      { padding: 72px 56px 64px; }
  .footer_title     { font-size: 26px; }
  .footer_title__sub{ font-size: 20px; }
  .sdgs_logos__main {  }
  .sdgs_logos__icon { width: 50%; height: auto; }
  .footer_banner    { max-width: 50%;}
  .footer_copy p    { font-size: 13px; }
}


/*----------------------------------------------------------
　共通パーツ 幅
----------------------------------------------------------*/
/*wide100%
-----------------------------*/
.wrap_all{
	width: 100%;
	margin: 0;
	padding: 100px 0 100px;
}
/*wide100%（スマホ）
-----------------------------*/
@media screen and (max-width:736px){
	.wrap_all{
		padding: 50px 0 50px;
	}
}
/*wide1000px
-----------------------------*/
.wrap_m{
	width: 1000px;
	margin: 0 auto;
	padding: 100px 0 100px;
}
/*wide800px
-----------------------------*/
.wrap_s{
	width: 800px;
	margin: 0 auto;
	padding: 100px 0 100px;
}
/*リセット（スマホ）
-----------------------------*/
@media screen and (max-width:736px){
	.wrap_m,.wrap_s{
		width: 100%;
		margin: 0 auto;
		padding: 50px 15px 50px;
	}
}

/*----------------------------------------------------------
　共通パーツ 見出しスタイル
----------------------------------------------------------*/
/*ページタイトル
-----------------------------*/
.page_title{
	background-color: #AAAAAA;
	margin: 0;
	padding: 0;
	text-align: center;
	line-height: 200px;
	min-height: 200px;
}
.page_title img{
	height: 102px;
	width: auto;
}
/*ページタイトル（スマホ）
-----------------------------*/
@media screen and (max-width:736px){
	.page_title{
		line-height: 100px;
		min-height: 100px;
		margin: 0;
	}
	.page_title img{
		height: 51px;
	}
}

/*セクション見だし
-----------------------------*/
.sec_title{
	padding: 0 0 .5em;
	margin: 0 0 .5em;
	font-size: 2em;
	text-align: center;
}
/*セクション見だし（スマホ）
-----------------------------*/
@media screen and (max-width:736px){
	.sec_title{
		margin: 0 0 30px;
	}
}

/*----------------------------------------------------------
　共通パーツ リストスタイル
----------------------------------------------------------*/
/*説明リスト
-----------------------------*/
.dl{
	margin: 0 0 50px;
	padding: 0;
}
.dl dt{
	margin: 0 0 1em;
	padding: 1em 0 0;
	float: left;
	width: 7em;
	clear: both;
	font-weight: bold;
}
.dl dd{
	width: 100%;
	margin: 0;
	padding: 1em 0 1em 10em;
	border-bottom: 1px solid #cccccc;
}
/*説明リスト（スマホ）
-----------------------------*/
@media screen and (max-width:736px){
	.dl{
		margin: 0 0 50px;
	}
	.dl dt{
		margin: 0 0 1em;
		padding: 1em 0 0;
		float: none;
		width: 100%;
	}
	.dl dd{
		width: 100%;
		margin: 0;
		padding: 0 0 1em 2em;
		border-bottom: 1px solid #cccccc;
	}
}

/*----------------------------------------------------------
　共通パーツ ボタンスタイル
----------------------------------------------------------*/
/*ボタン
-----------------------------*/
.btn{
	text-align: center;
	margin: 50px 0 0;
}
.btn a{
	display: inline-block;
	max-width: 100%;
	min-width: 450px;
	padding: .5em 1em;
	font-size: 1.3333em;
	text-decoration: none;
	background-color: #333333;
	border-radius: 5px;
	color: #fff;
	background-image: url("../images/arrow_w.png");
	background-repeat: no-repeat;
	background-size: auto 20px;
	background-position: center right 15px;
}
.btn a + a{
	margin: 0 0 0 50px;
}
.btn a:hover{
	background-color: #000000;
}
/*戻るボタン
-----------------------------*/
.btn_back{
	text-align: center;
	margin: 50px 0 0;
}
.btn_back a{
	display: inline-block;
	max-width: 100%;
	min-width: 450px;
	padding: .5em 3em;
	font-size: 1.3333em;
	text-decoration: none;
	background-color: #333333;
	border-radius: 5px;
	color: #fff;
	background-image: url("../images/arrow_w_back.png");
	background-repeat: no-repeat;
	background-size: auto 20px;
	background-position: center left 15px;
}
.btn_back a:hover{
	background-color: #000000;
}
/*ボタン（スマホ）
-----------------------------*/
@media screen and (max-width:736px){
	.btn,.btn_back{
		margin: 30px 0 0;
	}
	.btn a + a{
		margin: 15px 0 0;
	}
	.btn a,.btn_back a{
		font-size: 1.2em;
		min-width: 100%;
	}
}

/*----------------------------------------------------------
　共通パーツ テキストスタイル
----------------------------------------------------------*/
/*タイトル下のコピー
-----------------------------*/
.title_under_copy{
	text-align: center;
	color: #707070;
	line-height: 2em;
	margin: 0;
	padding: 0;
}
/*タイトル下のコピー（スマホ）
-----------------------------*/
@media screen and (max-width:736px){
	.title_under_copy{
		text-align: left;
	}
}

/*----------------------------------------------------------
　共通パーツ カラム
----------------------------------------------------------*/
/*2カラム
-----------------------------*/
.wrap_2colm{
}
.wrap_2colm .colm{
	width: 47%;
	float: left;
}
.wrap_2colm .colm:nth-child(2n){
	float: right;
}

/*2カラム（スマホ）
-----------------------------*/
@media screen and (max-width:736px){
	.wrap_2colm .colm,
	.wrap_2colm .colm:nth-child(2n){
		float: none;
		width: 100%;
	}
	.wrap_2colm .colm + .colm{
		margin-top: 40px;
	}
}