@charset "utf-8";

/* 全体の設定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
	font-family: "LINE Seed JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: .968em;
	margin: 0;
	word-wrap: break-word;
	/* letter-spacing: .05em;line-height: 1.2; */
	overflow-x: hidden;
}
html {scroll-behavior: smooth;}
section {padding: clamp(3rem,6.5vw,5rem) 1rem;}


/* ROOT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
	/* Color */
	--main-color: #006A44;
	--sub-color_01: #FFD527;
	--acc-color: #80CCE3;
	
	--line: #06C755;
	--inst: linear-gradient(-45deg, #8E24AA, #EF5350, #FFD54F, #FFD54F);
	
	--light-blue: #CCEBF4;
	--blue: #78b4dc;
	--dark-blue: #00A0E9;
	--navy: #1d50a2;
	--light-green: #84ce65;
	--green: #006A44;
	--dark-green: #00633D;
	--yellow-green: #82C934;
	--light-yellow: #FFF8D9;
	--yellow: #FFD527;
	--light-orange: #FF931E;
	--orange: #E35F0D;
	--vermilion: #dc503c;
	--red: #E60012;
	--pink: #F08CA0;
	--high-light-gray: #E6E6E6;
	--light-gray: #CCCCCC;
	--gray: #999999;
	--dark-gray: #666666;
	--deep-dark-gray: #333;
	--white: #fff;
	--black: #000;
	
	--gr-blue-01: #007598;
	--gr-blue-02: #00A8C2;
	--gr-red: linear-gradient(#DD2126, #A01315);
	--gr-blue: linear-gradient(0deg,var(--gr-blue-01), var(--gr-blue-02));
	--gr-blue__90deg: linear-gradient(90deg, var(--gr-blue-01), var(--gr-blue-02));
	--gr-blue__135deg: linear-gradient(135deg, var(--gr-blue-01), var(--gr-blue-02));
	--gr-blue__270deg: linear-gradient(270deg, var(--gr-blue-01), var(--gr-blue-02));
	
	/* 角丸 */
	--rounded-5-10: clamp(5px, 3vw, 10px);
	--rounded-10-20: clamp(10px, 3.2vw, 20px);
	--rounded-10-25: clamp(10px, 3.5vw, 25px);
	--rounded-15-30: clamp(15px, 3.5vw, 30px);
	--rounded-20-40: clamp(20px, 4.6vw, 40px);
	--rounded-25-50: clamp(25px, 5vw, 50px);
	--rounded-30-200: clamp(30px, calc((-24rem + 100vw) / 5.2), 200px);
	--rounded-50-100: clamp(50px, 8vw, 100px);
	--rounded-200: 200px;

}


/* 基本CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
p {margin: 0;}
a {display: inline-block; text-decoration-line: none; color: inherit;}
a:hover {/*color: currentColor;*/ opacity: 0.8;}
ul,ol {list-style: none; padding: 0; margin: 0;}
li {text-decoration: none;}

/*input { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }*/
button {appearance: none; background-color: transparent; border: none; cursor: pointer;}
summary {list-style: none;}
summary::-webkit-details-marker {display: none;}


/* Table
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {width: 100%; border-collapse: collapse; table-layout: fixed;}
table :is(th,td) {padding: 1.5rem .5rem; word-break: break-word;}
table th {width: 30%;}
table p {margin: 0;}

/* table - 全体調整 */
.tbl-auto { width: auto; }

/* table - 全体パディング */
.tbl-py0 {
	--tbl-th-pt: 0; --tbl-th-pb: 0;
	--tbl-td-pt: 0; --tbl-td-pb: 0;
}
.tbl-py0 > :is(thead, tbody, tfoot) > tr > :is(th,td) {padding-top: 0; padding-bottom: 0;}
.tbl-py5 {
	--tbl-th-pt: .5rem; --tbl-th-pb: .5rem;
	--tbl-td-pt: .5rem; --tbl-td-pb: .5rem;
}
.tbl-py5 > :is(thead, tbody, tfoot) > tr > :is(th,td) {padding-top: .5rem; padding-bottom: .5rem;}
.tbl-py10 > :is(thead, tbody, tfoot) > tr > :is(th,td) { padding-top: 1rem; padding-bottom: 1rem; }

.tbl-pyh_75 > :is(thead, tbody, tfoot) > tr > :is(th,td) { padding-top: .75rem; padding-bottom: .75rem; }

/* table - 全体可変パディング */
.tbl-px10-20 > :is(thead, tbody, tfoot) > tr > :is(th,td) { padding-left: clamp(1rem, 3vw, 2rem); padding-right: clamp(1rem, 3vw, 2rem); }


.tbl__row-py5 {
	--tbl-th-pt: .5rem;
	--tbl-td-pb: .5rem;
}

/* 縦積み時の th / td 間隔 */
.tbl__cell-gap-line {
	--tbl-th-pb: .75rem;
	--tbl-td-pt: .75rem;
}
.tbl__cell-gap-bg {
	--tbl-th-pt: .75rem;
	--tbl-th-pb: .75rem;
	--tbl-td-pt: 1rem;
}
.tbl__cell-gap-flat {
	--tbl-th-pb: 0;
	--tbl-td-pt: 0;
}

/* table - th幅調整 */
.tbl-th-w20 th {width: 20%;}
.tbl-th-w40 th {width: 40%;}

/* table - thパディング */
.tbl-th-pl0 > tbody > tr > th {padding-left: 0;}
.tbl-th-px20 > tbody > tr > th { padding-left: 2rem; padding-right: 2rem; }

@media screen and (max-width: 960px) {
	table.tbl_lg > tbody > tr > :is(th,td),
	.tbl_lg > tbody > tr > :is(th,td) {display: block; width: 100%;}
	table.tbl_lg > tbody > tr > th,
	.tbl_lg > tbody > tr > th {padding-top: var(--tbl-th-pt, 1.5rem); padding-bottom: var(--tbl-th-pb, 0);}
	table.tbl_lg > tbody > tr > td,
	.tbl_lg > tbody > tr > td {padding-top: var(--tbl-td-pt, .5rem); padding-bottom: var(--tbl-td-pb, 1.5rem);}
	
	/* table - thパディング */
	.tbl-th-px20.tbl_lg > tbody > tr > th { padding-left: .5rem; padding-right: .5rem; }
}
@media screen and (max-width: 768px) {
	table.tbl_md > tbody > tr > :is(th,td),
	.tbl_md > tbody > tr > :is(th,td) {display: block; width: 100%;}
	table.tbl_md > tbody > tr > th,
	.tbl_md > tbody > tr > th {padding-top: var(--tbl-th-pt, 1.5rem); padding-bottom: var(--tbl-th-pb, 0);}
	table.tbl_md > tbody > tr > td,
	.tbl_md > tbody > tr > td {padding-top: var(--tbl-td-pt, .5rem); padding-bottom: var(--tbl-td-pb, 1.5rem);}
	
	/* table - thパディング */
	.tbl-th-px20.tbl_md > tbody > tr > th { padding-left: .5rem; padding-right: .5rem; }
}
@media screen and (max-width: 560px) {
	table.tbl_sm > tbody > tr >  :is(th,td),
	.tbl_sm > tbody > tr > :is(th,td) {display: block; width: 100%;}
	table.tbl_sm > tbody > tr > th,
	.tbl_sm > tbody > tr > th {padding-top: var(--tbl-th-pt, 1.5rem); padding-bottom: var(--tbl-th-pb, 0);}
	table.tbl_sm > tbody > tr > td,
	.tbl_sm > tbody > tr > td {padding-top: var(--tbl-td-pt, .5rem); padding-bottom: var(--tbl-td-pb, 1.5rem);}
	
	/* table - thパディング */
	.tbl-th-pl0_sm > tbody > tr > th {padding-left: 0;}
	.tbl-th-px20.tbl_sm > tbody > tr > th { padding-left: .5rem; padding-right: .5rem; }
}


/* 汎用コンテンツ
-------------------------------------*/
/* 文字色 */
.text-black { color: var(--black); }
.text-white { color: var(--white); }
.text-gray { color: var(--gray); }
.text-deep-dark-gray { color: var(--deep-dark-gray); }
.text-red { color: var(--red); }
.text-blue { color: var(--blue); }

.text-main {color: var(--main-color);}
.text-sub1 {color: var(--sub-color_01);}

/* 文字 - はみ出し分省略 */
.text-over {text-overflow: ellipsis; overflow: hidden;}

/* 背景色 */
.bg__white {background-color: var(--white);}
.bg__black {background-color: var(--black);}
.bg__light-yellow {background-color: var(--light-yellow);}
.bg__yellow {background-color: var(--yellow);}
.bg__yellow-green {background-color: var(--yellow-green);}
.bg__green {background-color: var(--green);}
.bg__pink {background-color: var(--pink);}

.bg-radt-30-200 {border-radius: var(--rounded-30-200) var(--rounded-30-200) 0 0;}
.bg-radt-200 {border-radius: var(--rounded-200) var(--rounded-200) 0 0;}

/* リンクボタン - 横幅 */
[class^="link-w"],
[class*=" link-w"] {max-width: 100%;}
.link-w200 {width: min(200px, 100%);}
.link-w300 {width: min(300px, 100%);}

/* リンクボタン - 縦幅 */
.link-h70 {min-height: 70px;}
.link-h90 {min-height: 90px;}

/* リンクボタン共通 */
[class^="link-btn__"],
[class*=" link-btn__"] {
	--link-bgc: var(--black);
	--link-txtc: var(--white);
	--link-hv-bgc: var(--main-color);
	--link-hv-txtc: var(--link-txtc);
	--link-rad: 0;
	--link-py: 1rem;
	--link-px: 1rem;
	--link-speed: .2s;

	display: inline-block;
	background-color: var(--link-bgc);
	color: var(--link-txtc);
	font-size: clamp(16px, 2vw, 18px);
	font-weight: 600;
	text-align: center;
	padding: var(--link-py) var(--link-px);
	border-radius: var(--link-rad);
}
[class^="link-btn__"].inline-flex,
[class*=" link-btn__"].inline-flex {display: inline-flex;}
[class^="link-btn__"].py5,
[class*=" link-btn__"].py5 {--link-py: .5rem;}
[class^="link-btn__"]:hover,
[class*=" link-btn__"]:hover {opacity: 1;}

/* リンクボタン - 余白 */
.link-py15 { --link-py: 1.5rem; }

/* リンクボタン - 角丸 */
.link-btn__round { --link-rad: var(--rounded-200); }

/* リンクボタン - 背景色 */
.link-bgc-main {--link-bgc: var(--main-color);}
.link-bgc-yellow {--link-bgc: var(--yellow);--link-txtc: var(--black);}
.link-bgc-gray {--link-bgc: var(--gray);}
.link-bgc-white {--link-bgc: var(--white); --link-txtc: var(--black);}

/* リンクボタン - hover */
[class^="link-hover__"],
[class*=" link-hover__"] {border: 1px solid var(--link-bgc); transition: background-color .3s ease, color .3s ease;}
[class^="link-hover__"]:hover,
[class*=" link-hover__"]:hover {background-color: var(--link-hv-bgc); color: var(--link-hv-txtc);}
.link-hover__bg-main {--link-hv-bgc: var(--white); --link-hv-txtc: var(--main-color);}
.link-hover__bg-yellow {--link-hv-bgc: var(--white);}
.link-hover__bg-gray {--link-hv-bgc: var(--white); --link-hv-txtc: var(--black);}
.link-hover__bg-white {--link-hv-bgc: var(--yellow);}

/* リンクボタン - 枠線 */
[class^="link-bdc__"],
[class*=" link-bdc__"] {--link-bdc: var(--link-bgc); border-color: var(--link-bdc);}
.link-bdc__black {--link-bdc: var(--black);}

/* 三角矢印 */
.link-tri {display: block; position: relative; margin-right: .5rem;}
.link-tri::after,
.link-tri-frame::after {
	content: "";
	display: inline-block;
	width: 12px; aspect-ratio: 6 / 7;
	background-color: currentColor;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}

/* 枠付き三角 */
.link-tri-frame {
	display: inline-block; width: clamp(40px,8vw,60px); aspect-ratio: 1 / 1;
	background-color: var(--link-bgc);
}
.link-tri-frame::after {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

/* Table */
/* auto */
.tbl-auto-layout {table-layout: auto;}

/* 文字太さ */
.tbl-th-font-normal th { font-weight: normal; }

/* テーブル - 全体角丸 */
[class*="tbl-rad"] {
	border-collapse: separate; border-spacing: 0;
	border-radius: var(--tbl-rad, 5px);
}
.tbl-rad10-20 { --tbl-rad: var(--rounded-10-20); }

/* テーブル - 線共通 */
[class^="tbl__bd"],
[class*=" tbl__bd"] {
	--tbl-bdw: 1px;
	--tbl-bdc: var(--gray);
	--tbl-th-bdc: var(--tbl-bdc);
	--tbl-td-bdc: var(--tbl-bdc);
}

/* テーブル - 線幅 */
.tbl-bdw-1 { --tbl-bdw: 1px; }
.tbl-bdw-2 { --tbl-bdw: 2px; }

/* テーブル - 線色 */
.tbl-bdc-black { --tbl-bdc: var(--black); }
.tbl-bdc-light-gray { --tbl-bdc: var(--light-gray); }

/* テーブル - 外線 */
.tbl__bd { border: var(--tbl-bdw) solid var(--tbl-bdc); }

/* テーブル - 1色下線 */
.tbl__bd-b > tbody > tr {
	border-bottom: var(--tbl-bdw) solid var(--tbl-bdc);
}
.tbl__bd-b > tbody > tr:first-of-type {
	border-top: var(--tbl-bdw) solid var(--tbl-bdc);
}
.tbl__bd-t-first-none > tbody > tr:first-of-type {border-top: none;}
.tbl__bd-b-last-none > tbody > tr:last-of-type {border-bottom: none;}

/* テーブル - ドット */
.tbl__dot-b > tbody > tr {border-bottom: var(--tbl-bdw) dotted var(--tbl-bdc);}
.tbl__dot-b > tbody > tr:last-of-type {border-bottom: none;}
.tbl__dot-b > tbody > tr > th {font-size: 1.125em;}

/* テーブル - th色 */
:is(.tbl__th-txtc, [class^="tbl__th-txtc-"], [class*=" tbl__th-txtc-"]) > tbody > tr > th {
	color: var(--tbl-th-txtc, var(--main-color));
}

/* th - 背景色 */
:is(.tbl__th-bg, [class*="tbl__th-bg-"]) > :is(thead, tbody, tfoot) > tr > th { background-color: var(--tbl-th-bg, var(--main-color)); }

.tbl__th-bg-yellow { --tbl-th-bg: var(--yellow); }

/* th - ■アイコン */
.tbl__ico-sq th {
	--tbl-ico-size: 12px;
	text-align: left;
}
.tbl__ico-sq th::before {
	content: "";
	display: inline-block;
	width: var(--tbl-ico-size); height: var(--tbl-ico-size);
	aspect-ratio: 1 / 1;
	background-color: var(--tbl__icon-c, currentColor);
	margin-right: .25rem;
}
.tbl__ico-white th::before { --tbl__icon-c: var(--white); }
.tbl__ico-main th::before { --tbl__icon-c: var(--main-color); }

/* th - スラッシュ区切り線 */
.tbl-th-slash th { position: relative; padding-right: 2rem; }
.tbl-th-slash th::after {
	content: "／";
	position: absolute; right: 0;
	margin-left: .5rem;
}
.tbl-th-slash:not(.tbl-th-top) th::after { top: 50%; transform: translateY(-50%); }

/* リスト - アイコンマーカー
   --list-ico : マーカー文字（デフォルト "■"）
*/
.list__ico li {
	text-indent: -1.2em;
    padding-left: 1.2em;
}
.list__ico li::before {
	content: var(--list-ico, "■");
    margin-right: .2rem;
	color: var(--list-ico-c, currentColor);
}
/* アイコンマーカー - ● */
.list__ico-circle { --list-ico: "●"; }
/* アイコンマーカー - ◎ */
.list__ico-dbl-circle { --list-ico: "◎"; }
/* アイコンカラー */
.list__icoc-main { --list-ico-c: var(--main-color);}

/* リスト - チェックマーク
<li>
	<span class="icon"></span>
	<span>ここにテキストを入れる形で使用</span>
</li>
*/
.list__check li {
	--list-icon-size: 20px;
	--list-check-line: calc(var(--list-icon-size) * .15);
	
	display: flex; gap: .5rem;
}
.list__check li span.icon {
	display: block; flex: 0 0 var(--list-icon-size);
	width: var(--list-icon-size); height: var(--list-icon-size); aspect-ratio: 1 / 1;
	background-color: var(--main-color);
	position: relative;
}
.list__check li span.icon::before {
	content: "";
	position: absolute; left: 54%; top: 15%; transform: rotate(-45deg) translate(-50%,-50%);
	width: 50%; height: 25%;
	border-left: var(--list-check-line) solid var(--white); border-bottom: var(--list-check-line) solid var(--white);
}

/* アイコン画像幅 */
[class^="ico-w"],
[class*=" ico-w"] { display: inline-block; }

.ico-w20 {width: 20px;}

.ico-w20-30 { width: clamp(20px, 3.5vw, 30px); }
.ico-w30-40 { width: clamp(30px, 4.5vw, 40px); }
.ico-w40-60 { width: clamp(40px, 8vw, 60px); }
.ico-w50-60 { width: clamp(50px, 10vw, 60px); }
.ico-w56-86 { width: clamp(56px, 8vw, 86px); }

/* 角丸 */
.rad5 { border-radius: 5px; }
.rad200 { border-radius: var(--rounded-200); }

.rad5-10 { border-radius: var(--rounded-5-10); }
.rad10-20 { border-radius: var(--rounded-10-20); }
.rad10-25 { border-radius: var(--rounded-10-25); }
.rad15-30 { border-radius: var(--rounded-15-30); }
.rad20-40 { border-radius: var(--rounded-20-40); }
.rad25-50 { border-radius: var(--rounded-25-50); }
.rad50-100 { border-radius: var(--rounded-50-100); }

.rad-full { border-radius: 50%; }

.map-container.rad10-20 iframe { border-radius: var(--rounded-10-20); }

/* 影 - 文字/画像などの透過形状に沿う */
.dsh-black { filter: drop-shadow(0 0 6px var(--black)); }
.dsh-gray  { filter: drop-shadow(0 0 6px var(--gray)); }
.dsh-white { filter: drop-shadow(0 0 6px var(--white)); }

/* 線 - 基本枠
   --bd-w : 線の太さ
   --bd-c : 線の色。未指定時は currentColor
*/
.bd { border: var(--bd-w, 1px) solid var(--bd-c, currentColor); }

/* 線 - 表示位置 */
.bd-t { border-top: var(--bd-w, 1px) solid var(--bd-c, currentColor); }
.bd-b { border-bottom: var(--bd-w, 1px) solid var(--bd-c, currentColor); }
.bd-r { border-right: var(--bd-w, 1px) solid var(--bd-c, currentColor); }
.bd-l { border-left: var(--bd-w, 1px) solid var(--bd-c, currentColor); }

.bd-x { border-right: var(--bd-w, 1px) solid var(--bd-c, currentColor); border-left: var(--bd-w, 1px) solid var(--bd-c, currentColor); }
.bd-y { border-top: var(--bd-w, 1px) solid var(--bd-c, currentColor); border-bottom: var(--bd-w, 1px) solid var(--bd-c, currentColor); }

/* 線太さ - border側 */
.bdw-1 { --bd-w: 1px; }
.bdw-2 { --bd-w: 2px; }
.bdw-3 { --bd-w: 3px; }
.bdw-4 { --bd-w: 4px; }
.bdw-5 { --bd-w: 5px; }
.bdw-10 { --bd-w: 10px; }

/* 線色 - border側。outline側も未指定なら同じ色になる */
.bdc-white     { --bd-c: var(--white); }
.bdc-light-gray { --bd-c: var(--light-gray); }
.bdc-gray      { --bd-c: var(--gray); }
.bdc-deep-gray { --bd-c: var(--deep-gray); }
.bdc-black     { --bd-c: var(--black); }
.bdc-blue {--bd-c: var(--blue);}
.bdc-light-green {--bd-c: var(--light-green);}
.bdc-green {--bd-c: var(--green);}
.bdc-yellow {--bd-c: var(--yellow);}
.bdc-pink {--bd-c: var(--pink);}

@media screen and (max-width: 560px) {
	/* Table */
	/* th - スラッシュ区切り線 */
	.tbl-th-slash.tbl_sm th::after {position: static;}
	.tbl-th-slash:not(.tbl-th-top) th::after {transform: none;}
}