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

	追加コンポーネント

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

/* ------------------------------------------------------------
1：全共通
2：レイアウト
3：見出し
4：リンク
5：ボタンリスト
6：ナビゲーション
------------------------------------------------------------ */


/* ------------------------------------------------------------
    1：全共通（カラー設定）
------------------------------------------------------------ */
:root {
	--main-color: #007853;
	--base-green: #188542;
	--logo-green: #268300;
	--content-width: 100%;
	--link-color: #0155AD;

	--btn-bg-white: #ffffff;
	--btn-bg-gray: #DEF2ED;
	--btn-bg-blue: #0f75da;
	--btn-bg-red: #E50111;
	--btn-bg-green: #268300;
	--btn-bg-orange: #f6b24c;
	--btn-bg-darkgray: #555555;

	--btn-border-white: #cccccc;
	--btn-border-gray: #cccccc;
	--btn-border-darkgray: #333333;
	--btn-border-blue: #0c63b9;
	--btn-border-red: #ab010c;
	--btn-border-green: #207100;
	--btn-border-orange: #cb913a;
}


/* ------------------------------------------------------------
    2：レイアウト
------------------------------------------------------------ */
.w940 {
	max-width: min(100%, 940px);
	margin: 0 auto;
}

.w1200 {
	max-width: min(100%, 1200px);
	margin: 0 auto;
}


/* ------------------------------------------------------------
    3：見出し
------------------------------------------------------------ */

/* - アンダーライン 見出し
------------------------------------------------------------ */
.heading-underline {
	border-bottom: 3px solid var(--main-color);
	font-size: 2.4rem;
	font-weight: bold;
	padding-bottom: 0.3em;
}

.heading-underline.h2 { font-size: 2rem; }
.heading-underline.h3 { font-size: 1.8rem; }
.heading-underline.h4 { font-size: 1.6rem; }
.heading-underline.h5 { font-size: 1.4rem; }
.heading-underline.h6 { font-size: 1.3rem; }

.heading-underline.center { text-align: center; }/* --- センタリング --- */

/* --- オプションテキスト --- */
.heading-underline > .opt { font-size: 1.4rem; line-height: 1.3; display: block; }
.heading-underline.h2 > .opt { font-size: 1.3rem; }
.heading-underline.h3 > .opt { font-size: 1.2rem; }
.heading-underline.h4 > .opt { font-size: 1.1rem; }
.heading-underline.h5 > .opt, .heading-underline.h6 > .opt { font-size: 1rem; }


/* - 左ライン 見出し
------------------------------------------------------------ */
.heading-leftline {
	border-left: 3px solid var(--main-color);
	padding-left: 0.5em;
	font-size: 2.4rem;
	font-weight: bold;
}

.heading-leftline.h2 { font-size: 2rem; }
.heading-leftline.h3 { font-size: 1.8rem; }
.heading-leftline.h4 { font-size: 1.6rem; }
.heading-leftline.h5 { font-size: 1.4rem; }
.heading-leftline.h6 { font-size: 1.3rem; }


/* --- オプションテキスト --- */
.heading-leftline .opt { font-size: 1.4rem; line-height: 1.3; display: block; }
.heading-leftline.h2 .opt { font-size: 1.3rem; }
.heading-leftline.h3 .opt { font-size: 1.2rem; }
.heading-leftline.h4 .opt { font-size: 1.1rem; }
.heading-leftline.h5 .opt, .heading-leftline.h6 .opt { font-size: 1rem; }



/* - シンプル見出し
------------------------------------------------------------ */
.heading-simple { font-weight: bold; font-size: 2.4rem; }

.heading-simple.center { text-align: center; }/* --- センタリング --- */

.heading-simple.h1 { font-size: 2.4rem; }
.heading-simple.h2 { font-size: 2rem; }
.heading-simple.h3 { font-size: 1.8rem; }
.heading-simple.h4 { font-size: 1.6rem; }
.heading-simple.h5 { font-size: 1.4rem; }
.heading-simple.h6 { font-size: 1.3rem; }



/* ------------------------------------------------------------
   4：リンク
------------------------------------------------------------ */
/* --- ボタンコンテナー（センタリング用） --- */
.btn-container.center { text-align: center; }


/* - 基本ボタン
------------------------------------------------------------ */
.btn-def-simple {
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 -2px rgba(0,0,0,0.1) inset;
	padding: 9px 12px;
	border-radius: 6px;
	text-decoration: none;
	color: #333;
	display: inline-block;
	line-height: 1.3;
	font-size: inherit;
}


/* --- ブロック --- */
.btn-def-simple.btn-block { display: block; }
.btn-def-simple.btn-block.txt-center { display: block; text-align: center; }
.btn-def-simple.btn-block.link-icon i { margin-right: 0.4em; }

.btn-def-simple.bold { font-weight: bold; }/* --- ボールド --- */
.btn-def-simple.no-shadow { box-shadow: none; }/* --- シャドウ無し --- */

/* --- フォントサイズ --- */
.btn-def-simple.btn-xl { font-size: 1.8rem; }
.btn-def-simple.btn-lg { font-size: 1.5rem; }
.btn-def-simple.btn-sm { font-size: 1.1rem; }
.btn-def-simple.btn-xs { font-size: 1rem; }

/* --- padding --- */
.btn-def-simple.v-padding-fat { padding: 16px 12px; }/* --- 縦広め --- */
.btn-def-simple.padding-narrow { padding: 8px; }/* --- 狭め --- */

/* --- inline-flex（ボタンリスト用） --- */
.btn-def-simple.inline-flex {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	line-height: 1.3;
}

.btn-def-simple.inline-flex i { color: var(--base-green); }

/* --- センタリング --- */
.btn-def-simple.center { text-align: center; }
.btn-def-simple.inline-flex.center { justify-content: center; }

/* --- リンクカラー --- */
.btn-def-simple.colored { color: var(--link-color); }


/* --- 背景色 --- */
.btn-def-simple.gray {
	background-color: var(--btn-bg-gray);
	border: 1px solid var(--btn-border-gray);
}

.btn-def-simple.gray.link-icon i { color: #555; }

.btn-def-simple.darkgray {
	background-color: var(--btn-bg-darkgray);
	color: #fff;
	border: 1px solid var(--btn-border-darkgray);
}

.btn-def-simple.darkgray.link-icon i { color: #fff; }

.btn-def-simple.blue {
	background-color: var(--btn-bg-blue);
	color: #fff;
	border: 1px solid var(--btn-border-blue);
}

.btn-def-simple.blue.link-icon i { color: #fff; }

.btn-def-simple.red {
	background-color: var(--btn-bg-red);
	color: #fff;
	border: 1px solid var(--btn-border-red);
}

.btn-def-simple.red.link-icon i { color: #fff; }

.btn-def-simple.green {
	background-color: var(--btn-bg-green);
	color: #fff;
	/*border: 1px solid var(--logo-green);*/
	border: 1px solid var(--btn-border-green);
}

.btn-def-simple.green.link-icon i { color: #fff; }

.btn-def-simple.orange {
	background-color: var(--btn-bg-orange);
	border: 1px solid var(--btn-border-orange);
}

.btn-def-simple.orange.link-icon i { color: #333; }



/* - 楕円ボタン
------------------------------------------------------------ */
.btn-round {
	text-decoration: none;
	/*background-color: #1D2186;*/
	background-color: var(--logo-green);
	/*border: 1px solid var(--logo-green);*/
	border: 1px solid transparent;

	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	line-height: 1.5;
	font-size: 1.4rem;
	font-weight: 500;
	border-radius: calc(infinity * 1px);
	padding: 0.5em 3em;
	text-align: center;
	/*box-shadow: 0 0 10px rgba(0,0,0,0.33);*/
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.btn-round.narrow-padding { padding: 0.3em 1em; }/* --- padding狭め --- */

/* --- ボールド --- */
.btn-round.bold { font-weight: bold; }

/* --- ブロック表示 --- */
.btn-round.btn-block { display: block; }

/* --- フォントサイズ --- */
.btn-round.btn-xl { font-size: 1.8rem; }
.btn-round.btn-lg { font-size: 1.5rem; }
.btn-round.btn-sm { font-size: 1.1rem; line-height: 1.3; }
.btn-round.btn-xs { font-size: 1rem; line-height: 1.3; }

/* --- カラー --- */
.btn-round.white {
	background-color: #fff;
	color: #333;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
    border: 1px solid var(--btn-border-white);
}

.btn-round.gray {
	background-color: #DEF2ED;
	color: #014C2C;
	border: 1px solid var(--btn-border-gray);
}

.btn-round.blue {
	background-color: #0f75da;
	color: #fff;
}

.btn-round.red {
	background-color: #E50111;
	color: #fff;
}

.btn-round.orange {
	background-color: #f6b24c;
	color: #333;
    border: 1px solid var(--btn-border-orange);
}

.btn-round.darkgray {
	background-color: #555;
	color: #fff;
}

.btn-round i { color: #fff; }
.btn-round.white i, .btn-round.white.link-icon i,
.btn-round.orange i, .btn-round.orange.link-icon i { color: #333;}
.btn-round.gray i, .btn-round.gray.link-icon i { color: #014C2C; }
.btn-round.link-icon i { color: #fff; }

/* --- シャドウ無し --- */
.btn-round.flat { box-shadow: none; }
/*.btn-round.white.flat { border: 1px solid #ccc; }
.btn-round.gray.flat { border: 1px solid #ccc; }
*/


/* - アイコン付きリンク
------------------------------------------------------------ */
.link-icon {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
}

.link-icon.center { justify-content: center; }

.link-icon.icon-top { align-items: baseline; }
.link-icon i { color: var(--base-green); vertical-align: baseline; }
.link-icon.icon-top i { line-height: 1.4; }



/* ------------------------------------------------------------
    5：ボタンリスト
------------------------------------------------------------ */
.button-list {
	display: grid;
	--button-list-gap: 10px;
	gap: var(--button-list-gap);
	box-sizing: border-box;
}

.button-list.div2 { grid-template-columns: repeat(2, 1fr); }
.button-list.div3 { grid-template-columns: repeat(3, 1fr); }
.button-list.div4 { grid-template-columns: repeat(4, 1fr); }
.button-list.div5 { grid-template-columns: repeat(5, 1fr); }
.button-list.div6 { grid-template-columns: repeat(6, 1fr); }

/*.button-list.no-wrap { } */

.button-list > div > a {
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 1.4rem;
	font-weight: bold;
	color: #06a;
	padding: 12px;
	position: relative;

	word-wrap: break-word;
	overflow-wrap: break-word;

	/*text-align: left;*/
}

.button-list.narrow > div > a { padding: 6px; }/* --- padding狭め --- */

.button-list.no-color > div > a { color: #333; }/* --- リンクカラー無し --- */
.button-list.no-bold > div > a { font-weight: normal; }/* --- ボールド無し --- */

/* --- センタリング --- */
.button-list.center > div > a { justify-content: center; }/* --- ボタン内要素センタリング --- */
.button-list.txt-center > div > a { text-align: center; }/* --- ボタン内の複数要素内のテキストセンタリング --- */

/*.button-list.center > div { text-align: center; }*/

/* --- 複数行オプション --- */
.button-list > div > a > .inner {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.button-list > div > a > .inner > .txt {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/*.button-list > div > a > .inner > .txt > .opt.opt-sm { font-size: 1.2rem; }
.button-list > div > a > .inner > .txt > .opt.opt-xs { font-size: 1.1rem; }
.button-list > div > a > .inner > .txt > .opt.block { display: block; }
*/

.button-list > div > a .opt {
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.button-list > div > a .opt.opt-sm { font-size: 1.2rem; }
.button-list > div > a .opt.opt-xs { font-size: 1.1rem; }
.button-list > div > a .opt.block { display: block; padding: 2px 0; }

/* --- PDFリンク --- */
.button-list.pdf-link > div > a .icon i {
	font-size: 2.4rem;
}


/* --- ボタンのカラーバリエーションとの組み合わせ調整 --- */
.button-list > div > a.btn-round { color: #fff; }
.button-list > div > a.btn-round.white,
.button-list > div > a.btn-round.orange { color: #333; }
.button-list > div > a.btn-round.gray { color: #014C2C; }

.button-list > div > a.btn-round i,
.button-list > div > a.btn-round.link-icon i { color: #fff; }
.button-list > div > a.btn-round.white.link-icon i,
.button-list > div > a.btn-round.orange.link-icon i { color: #333;}
.button-list > div > a.btn-round.gray.link-icon i { color: #014C2C; }

.button-list > div > a.btn-def-simple.gray,
.button-list > div > a.btn-def-simple.orange { color: #333; }
.button-list.no-color > div > a.btn-def-simple.darkgray,
.button-list.no-color > div > a.btn-def-simple.red,
.button-list.no-color > div > a.btn-def-simple.blue,
.button-list.no-color > div > a.btn-def-simple.green { color: #fff; }


/* ------------------------------------------------------------
    6：ナビゲーション
------------------------------------------------------------ */
/* - タブ（no-wrap）
------------------------------------------------------------ */
div.nav.tab.no-wrap {
	/*display: table;
	width: 100%;
	table-layout: fixed;
	*/

	display: flex;
	justify-content: center;
	/*align-items: center;*/
	width: 100%;
	
}

div.nav.tab.no-wrap > div {
	/*display: table-cell;
	vertical-align: middle;*/

	text-align: center;
	border-left: 1px solid #fff;
    background-color: #f5f5f5;

	width: 100%;

	display: flex;
}

div.nav.tab.no-wrap > div:first-child { border-left: none; }

div.nav.tab.no-wrap > div > a {
	display: block;
	background-color: #e7e7e7;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	padding: 12px 8px;
    font-size: 1.4rem;

	display: flex;
	justify-content: center;
	align-items: center;
	
	width: 100%;
}

.no-touch div.nav.tab.no-wrap > div > a:hover { background-color: #dcedc8; }

div.nav.tab.no-wrap > div.current > a {
	background-color: #268300;
	color: #fff;
}

div.nav.tab.no-wrap > div.current > a:hover { background-color: #268300; }

div.nav.tab.no-wrap > div.current > a {
	position: relative;
	background: #268300;
}

div.nav.tab.no-wrap > div.current > a::after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(38, 131, 0, 0);
	border-top-color: #268300;
	border-width: 10px;
	margin-left: -10px;
    top: 99%;
	display: block;
}





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

	939px以下

------------------------------------------------------------ */
@media screen and ( max-width : 939px ) {
    
}

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

	768px以下

------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {
	
    /* - ボタンリスト
    ---------------------------------------------------------------------- */
    .button-list.div4 { grid-template-columns: repeat(2, 1fr); }
    .button-list.div5 { grid-template-columns: repeat(3, 1fr); }
    .button-list.div6 { grid-template-columns: repeat(3, 1fr); }

    .button-list.no-wrap.div4 { grid-template-columns: repeat(4, 1fr); }
    .button-list.no-wrap.div5 { grid-template-columns: repeat(5, 1fr); }
    .button-list.no-wrap.div6 { grid-template-columns: repeat(6, 1fr); }
    
    
}


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

	639px以下

------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {
	
    /* - 下線 見出し
	---------------------------------------------------------------------- */
    .heading-underline { font-size: 2.1rem; }

    /* - 左線 見出し
	---------------------------------------------------------------------- */
    .heading-leftline { font-size: 1.8rem; }

    /* - ボタンリスト
	---------------------------------------------------------------------- */
	.button-list.div3 { grid-template-columns: repeat(2, 1fr); }
    .button-list.div2 { grid-template-columns: 1fr; }

    .button-list.div5 { grid-template-columns: repeat(2, 1fr); }
    .button-list.div6 { grid-template-columns: repeat(2, 1fr); }

    
    .button-list.no-wrap.div2 { grid-template-columns: repeat(2, 1fr); }
    .button-list.no-wrap.div3 { grid-template-columns: repeat(3, 1fr); }
    .button-list.no-wrap.div4 { grid-template-columns: repeat(4, 1fr); }

    .button-list.no-wrap.div5 { grid-template-columns: repeat(2, 1fr); }
    .button-list.no-wrap.div6 { grid-template-columns: repeat(2, 1fr); }
    
}


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

	479px以下

------------------------------------------------------------ */
@media screen and ( max-width : 479px ) {
	
	/* - ボタンリスト
	---------------------------------------------------------------------- */
    .button-list.div3 { grid-template-columns: 1fr; }

    .button-list.no-wrap.div2 { grid-template-columns: repeat(2, 1fr); }
    .button-list.no-wrap.div3 { grid-template-columns: repeat(3, 1fr); }
    .button-list.no-wrap.div4 { grid-template-columns: repeat(4, 1fr); }

	/*.button-list.no-wrap.div2 > div > a,
	.button-list.no-wrap.div3 > div > a,
	.button-list.no-wrap.div4 > div > a { padding: 8px; }

	.button-list.no-wrap > div > a { padding: 8px; }*/

	/* --- 複数行オプション --- */
	.button-list > div > a .opt.sp-block { display: block; padding: 2px 0; }

	/* - タブ（no-wrap）
	------------------------------------------------------------ */
	div.nav.tab.no-wrap > div > a { font-size: 1.2rem; }

}