@charset "utf-8";

/* 全体の設定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
	font-family: 'Noto Sans JP', sans-serif;
	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: #0072B6;
	--sub-color_01: #73B800;
	
	--line: #06C755;
	
	--light-blue: #C9E9FA;
	--light-blue_02: #cfefff;
	--blue: #7dcdf5;
	--dark-blue: #00A0E9;
	--navy: #1d50a2;
	--green: #009245;
	--yellow-green: #73B800;
	--light-yellow: #f4f1df;
	--yellow: #e1b80d;
	--light-orange: #ED945D;
	--orange: #E35F0D;
	--vermilion: #dc503c;
	--red: #E60012;
	--light-gray: #c1c1c1;
	--light-gray_02: #b6b6b6;
	--gray: #A7A7A7;
	--dark-gray: #666666;
	--deep-dark-gray: #333;
	--white: #fff;
	--black: #000;
	
	--gr-red: linear-gradient(#DD2126, #A01315);
	--gr-blue__90deg: linear-gradient(90deg, #1e9cd7, #0075be);
	
	/* 角丸 */
	--rounded-5-10: clamp(5px, 3vw, 10px);
	--rounded-10-20: clamp(10px, 3.2vw, 20px);
	--rounded-10-25: clamp(10px, 3.5vw, 25px);
	--rounded-200: 200px;

}


/* 基本CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
    display: inline-block;
    text-decoration-line: none;
	color: inherit;
}

a:hover,a img:hover {
    color: inherit;
    opacity: 0.8;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {text-decoration: none;}

table {width: 100%; border-collapse: collapse;}
table :is(th,td) {padding: 1.5rem .5rem;}
table th {width: 30%;}
table p {margin: 0;}

button {
	background: none;
    border: none;
}

/* フォント */
.font-montserrat {
  font-family: "Montserrat", sans-serif;
}

@media screen and (max-width: 960px) {
	table.table960 :is(th,td),
	.table960 :is(th,td) {display: block; width: 100%;}
	table.table960 th,
	.table960 th {padding-bottom: 0;}
	table.table960 td,
	.table960 td {padding-top: .5rem;}
}
@media screen and (max-width: 768px) {
	table.table768 :is(th,td),
	.table768 :is(th,td) {display: block; width: 100%;}
	table.table768 th,
	.table768 th {padding-bottom: 0;}
	table.table768 td,
	.table768 td {padding-top: .5rem;}
}
@media screen and (max-width: 560px) {
	table.table560 :is(th,td),
	.table560 :is(th,td) {display: block; width: 100%;}
	table.table560 th,
	.table560 th {padding-bottom: 0;}
	table.table560 td,
	.table560 td {padding-top: .5rem;}
}


/* 汎用コンテンツ
-------------------------------------*/
/* 背景色 */
.bg__main {background-color: var(--main-color);}
.bg__sub01 {background-color: var(--sub-color_01);}

.bg__white {background-color: var(--white);}
.bg__light-blue_02 {background-color: var(--light-blue_02);}
.bg__mp {
	background-color: var(--main-color);
	position: relative; z-index: 0;
}
.bg__mp::before, .bg__mp::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 76%;
	background-color: rgb(0 114 182 / .4);
	mix-blend-mode: multiply;
	z-index: -1;
}
.bg__mp::before {clip-path: polygon(0 0, 100% 70%, 100% 100%, 0% 100%);}
.bg__mp::after {clip-path: polygon(0 70%, 100% 0, 100% 100%, 0% 100%);}

/* 追加文字色 */
.text-main {color: var(--main-color);}
.text-sub1 {color: var(--sub-color_01);}

/* リスト(タイムライン) */
.list-timeline li {
	display: flex;
	line-height: 1.5;
}
.list-timeline li .date {
	width: auto;
	transform: translateY(-28px);
	font-size: clamp(30px, 3.5vw, 36px);
	white-space: nowrap;
	padding-right: clamp(1.5rem, 4vw, 2.5rem);
	margin: 0;
}
.list-timeline li .date span {
	font-size: .6em;
	margin: 0 .25rem;
}
.list-timeline li .content {
	width: auto;
	position: relative;
	padding: 0 0 clamp(3rem, 6.5vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
	border-left: 1px solid var(--light-gray);
}
.list-timeline li:last-of-type .content {
	padding-bottom: 0;
	border-left: none;
}
.list-timeline li .point {
	position: absolute;
	top: 0; left: -6px;
	width: 12px; aspect-ratio: 1 / 1; border-radius: 50%;
	background-color: var(--sub-color_01);
}
.list-timeline li .box {
	transform: translateY(-12px);
	font-size: clamp(16px,2vw,18px);
}

.list-timeline li table :is(th,td) {
	padding-top: 0; padding-bottom: 0;
}
.list-timeline li table th {
	width: 16%;
	font-weight: normal; text-align: left;
	vertical-align: top; white-space: nowrap;
}
.list-timeline li table th::after {
	content: "／";
	margin-left: 1rem;
}

/* テーブル(上下線) */
.tbl__border-y {
	border-collapse: separate;
    border-spacing: .5rem 0;
}
.tbl__border-y :is(th,td) {padding-left: clamp(1rem, 3vw, 2rem); padding-right: clamp(1rem, 3vw, 2rem);}
.tbl__border-y th {
	width: 150px;
	text-align: left; white-space: nowrap;
	border-bottom: 1px solid var(--deep-dark-gray);
}
.tbl__border-y tr:first-of-type th {border-top: 1px solid var(--deep-dark-gray);}
.tbl__border-y td {
	border-bottom: 1px solid var(--light-gray_02);
}
.tbl__border-y tr:first-of-type td {border-top: 1px solid var(--light-gray_02);}

/* アイコン画像サイズ */
[class*="icon-width-"] { display: inline-block; }
.icon-width-40-60 { width: clamp(40px,8vw,60px); }

/* 角丸 */
.corner-rounded__200 {border-radius: var(--rounded-200);}

.corner-rounded__5-10 {border-radius: var(--rounded-5-10);}
.corner-rounded__10-20 {border-radius: var(--rounded-10-20);}
.corner-rounded__10-25 {border-radius: var(--rounded-10-25);}

.corner-rounded__50per {border-radius: 50%;}

@media screen and (max-width: 560px) {
	/* リスト(タイムライン) */
	.list-timeline li {display: block;}
	.list-timeline li .date {
		width: 100%; padding-right: 0;
		transform: none;
	}
	.list-timeline li .content {
		width: 100%; padding: 1.2rem 0 1rem;
		border-top: 1px solid var(--sub-color_01); border-left: none;
	}
	.list-timeline li .point {display: none;}
	
	/* テーブル(上下線) */
	.tbl__border-y.table560 tr:first-of-type :is(th,td) {border-top: none;}
	.tbl__border-y.table560 th {padding-top: 0; padding-bottom: .75rem;}
	.tbl__border-y.table560 td {border-bottom: none;}
	
}