:root {
    --color-accent: #005184;
	--color-accent-rgba3: rgba(0, 81, 132, 0.3);
    --color-accent2: #6e94cd;
    --color-accent3: #143771;
    --color-white: #fff;
    --color-text: #3d3d3d;
    --color-gray: #f2f2f3;
    --color-gray2: #b2b2b2;
    --font-sans: "Noto Sans JP", sans-serif;
    --font-serif: "Noto Serif JP", serif;
    --font-size-00: 1rem;
    --font-size-0: 1.2rem;
    --font-size: 1.4rem;
    --font-size-1: 1.6rem;
    --font-size-2: 2.3rem;
    --font-size-3: 2.6rem;
    --font-size-4: 2.8rem;
    --font-size-00-sp: 1rem;
    --font-size-0-sp: 3.2vw;
    --font-size-sp: 3.7vw;
    --font-size-1-sp: 4.2vw;
    --font-size-2-sp: 6.4vw;
    --font-size-3-sp: 6.9vw;
    --font-size-4-sp: 7.46vw;
    --pc-size: 1080px;
    --pc-size1: 980px;
    --pc-size2: 880px;
    --sp-size: 90%;
    --size-10: 10px;
    --size-20: 20px;
    --size-30: 30px;
    --size-40: 40px;
    --size-50: 50px;
    --size-60: 60px;
    --size-70: 70px;
    --size-80: 80px;
    --size-90: 90px;
    --size-100: 100px;
    --size-p-3: 3%;
    --size-p-5: 5%;
    --size-p-10: 10%;
    --size-p-30: 30%;
    --size-p-40: 40%;
    --size-p-60: 60%;
    --size-p-70: 70%;
    --size-p-80: 80%;
    --size-p-90: 90%;
    --size-p-100: 100%;
    --unit-scale: 1.25;
    --unit-base: 2.8vw;
    --unit-size-00: calc( var(--unit-size-0) / var(--unit-scale));
    --unit-size-000: calc( var(--unit-size-00) / var(--unit-scale));
    --unit-size-0000: calc( var(--unit-size-000) / var(--unit-scale));
    --unit-size-0: var(--unit-base);
    --unit-size-1: calc( var(--unit-size-0) * var(--unit-scale));
    --unit-size-2: calc( var(--unit-size-1) * var(--unit-scale));
    --unit-size-3: calc( var(--unit-size-2) * var(--unit-scale));
    --unit-size-4: calc( var(--unit-size-3) * var(--unit-scale));
    --unit-size-5: calc( var(--unit-size-4) * var(--unit-scale));
    --unit-size-6: calc( var(--unit-size-5) * var(--unit-scale));
    --unit-size-7: calc( var(--unit-size-6) * var(--unit-scale));
    --unit-size-8: calc( var(--unit-size-7) * var(--unit-scale));
    --unit-size-9: calc( var(--unit-size-8) * var(--unit-scale));
    --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
}

html {
	font-size: 62.5%;
}

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: var(--color-white);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-sp);
	line-height: 1.75em;
}
@media (min-width: 1024px) {
	body {
		font-size: var(--font-size);
	}
}
a {
	text-decoration: none;
}
img, picture {
	max-width: 100%;
	display: block;
	vertical-align: top;
}
h1 {
	font-family: var(--font-serif);
	color: var(--color-accent);
	font-weight: 700;
}
h2,h3 {
	color: var(--color-accent);
	font-weight: 400;
}



/**********
共通横幅
**********/
.about main section,
.service main section {
	width: 100%;
}
.about main section img,
.service main section img {
	width: 100%;
}
@media (min-width: 1024px) {
	.about main section,
	.service main section {
		width: var(--pc-size1);
		margin: 0 auto 0 auto;
	}
}

/**********
ページタイトル
**********/
.title_img {
	width: 95%;
	height: 13vh;
	margin: var(--size-p-5) 0 0 0;
	position: relative;
	top: 0;
	left: 5%;
	z-index: -1;
}
.title_img > .title_img_box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/index/top_img_box.jpg');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 230% auto;
	clip-path: polygon(100% 0,3.4% 0,0 100%,100% 100%);
}
.title_img > .title_img_box::before {
	position: absolute;
	content: "";
	background-color: rgba(94, 135, 211, 0.6);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: inherit;
}
.title_img > .title_img_box h1 {
	color: var(--color-white);
	z-index: 1;
	position: absolute;
	font-size: var(--font-size-4-sp);
	padding: 0;
	margin: 0;
	bottom: 15%;
	left: 7%;
	text-shadow: 1.53px 1.29px 5px var(--color-accent3);
}
@media (min-width: 1024px) {
	.title_img {
		width: 100%;
		height: 123px;
		position: relative;
		top: 0;
		left: auto;
		right: 0;
		margin: 80px 0 50px 0;
	}
	.title_img > .title_img_box {
		background-position: center center;
		background-size: cover;
	}
	.title_img > .title_img_box::before {
		position: absolute;
		content: "";
		background-color: rgba(94, 135, 211, 0.6);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		clip-path: inherit;
	}
	.title_img > .title_img_box h1 {
		font-size: var(--font-size-4);
		bottom: 20px;
		left: 36px;
	}
}

/**********
共通見出し
**********/
section > .contents {
	width: 90%;
	margin: 0 auto 2em auto;
}
section > .contents > .contents {
	margin: 2em auto 2em auto;
}
section > .contents h1 {
	font-size: var(--font-size-2-sp);
	line-height: 1.25em;
}
section > .contents h2 {
	font-size: var(--font-size-1-sp);
}
section > .contents ul.link-ul {
	list-style: none;
}
section > .contents ul.link-ul li::before {
	content: "▶︎ ";
}
section > .contents a {
	color: var(--color-accent);
	text-decoration: underline;
}
section > .contents a:hover {
	text-decoration: none;
}
section > .contents a.pdf-link {
	position: relative;
	padding-right: 28px;
}
section > .contents a.pdf-link::after {
	content: 'picture_as_pdf';
	font-family: 'Material Icons';
	font-size: var(--font-size-2);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text);
}
section > .contents .text-right {
	text-align: right;
}
section > .contents .border-accent {
	border: solid 1px var(--color-accent);
	background-color: var(--color-gray);
	padding: var(--size-p-3);
}
@media (min-width: 1024px) {
	section > .contents {
		width: var(--pc-size2);
		margin: 0 auto 50px auto;
	}
	section > .contents > .contents {
		margin: 50px auto 50px auto;
	}
	section > .contents h1 {
		font-size: var(--font-size-2);
	}
	section > .contents h2 {
		font-size: var(--font-size-1);
	}
	section > .contents ul {
	}
	section > .contents ul li::before {
	}
	section > .contents a {
		color: var(--color-accent);
		text-decoration: underline;
	}
	section > .contents a:hover {
		text-decoration: none;
	}
	section > .contents a.pdf-link {
		position: relative;
		padding-right: 28px;
	}
	section > .contents a.pdf-link::after {
		content: 'picture_as_pdf';
		font-family: 'Material Icons';
		font-size: var(--font-size-2);
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		color: var(--color-text);
	}
}


.link_block {
	margin: var(--size-p-10) 0 var(--size-p-10) 0;
}
@media (min-width: 1024px) {
	.link_block {
		margin: var(--size-50) 0 var(--size-50) 0;
	}
}



a[class*="link_btn-90"] {
	max-width: 90%;
}
a[class*="bg_link50"] {
	max-width: 50%;
}
a[class*="bg_link30"] {
	max-width: 30%;
}
a[class^="link_btn"] {
	background-color: var(--color-accent);
	color: var(--color-white);
	padding: 5% 5%;
	border: solid 1px var(--color-accent);
	border-radius: 30px;
	display: block;
	text-align: center;
	margin: 0 auto 0 auto;
	transition: all 0.3s ease;
}
a[class^="b_bg_link"]:hover {
	background-color: var(--color-white);
	color: var(--color-text);
	border: solid 1px var(--color-text);
}
a[class^="b_bg_link_white"] {
	background-color: var(--color-white);
	color: var(--color-text);
	padding: 1% 1%;
	border: solid 1px var(--color-text);
	border-radius: 30px;
	display: block;
	text-align: center;
	margin: 3% auto 0 auto;
	text-decoration: none;
	transition: all 0.3s ease;
}
a[class^="b_bg_link_white"]:hover {
	background-color: var(--color-text);
	color: var(--color-white);
	border: solid 1px var(--color-text);
}
@media only screen and (max-width:1024px){
	a[class^="b_bg_link"] {
		max-width: 90%;
		margin: 3% auto 0 auto;
	}
}

a[class^="w_bg_link"] {
	background-color: var(--color-white);
	color: var(--color-accent);
	padding: 1% 1%;
	border: solid 1px var(--color-white);
	border-radius: 30px;
	display: block;
	max-width: 50%;
	text-align: center;
	margin: 3% 0 0 0;
	text-decoration: none;
	transition: all 0.3s ease;
}
a[class^="w_bg_link"]:hover {
	background-color: var(--color-accent);
	color: var(--color-white);
	border: solid 1px var(--color-white);
}
@media only screen and (max-width:1024px){
	a[class^="w_bg_link"] {
		max-width: 90%;
		margin: 3% auto 0 auto;
	}
}

.header_first > div {
	width: 90%;
	margin: var(--unit-size-3) auto var(--unit-size-3) auto;
}
.header_first > div h1 {
	margin: 0 auto var(--unit-size-0) auto;
}

@media (min-width: 1024px) {
	.header_first > div {
		width: 1000px;
	}
}

.header_second > div > .title {
	margin: var(--size-60) 0 var(--size-60) 0;
	text-align: center;
	color: var(--color-accent);
	font-size: var(--unit-size-4);
	font-style: normal;
	font-weight: 800;
	line-height: 24px;
}

@media (min-width: 1024px) {
	.header_second > div > .title {
		font-size: 39px;
	}
}

[class^=contents_block] {
	width: 90%;
	margin: 0 auto 0 auto;
}

@media (min-width: 1024px) {
	[class^=contents_block] {
		width: 1000px;
	}
}

[class^=grid-cols] {
    display: grid;
    gap: var(--unit-size-2);
    grid-template-columns: repeat(1, minmax(0, 1fr))
}

@media (min-width: 1024px) {
    .grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 60px 40px;
    }
    .grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr))
    }
    .grid-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr))
    }
    .grid-cols-2-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

.cardnews,
.cardnseminar {
	text-decoration: none;
    height: 100%;
    background-color: var(--color-white);
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--size-10);
    position: relative;
    transition: box-shadow .3s var(--ease-elastic-3), transform .3s var(--ease-elastic-3);
}
.cardnews:hover,
.cardnseminar:hover {
    box-shadow: 0 var(--unit-size-00) var(--unit-size-0) calc(var(--unit-size-00) * -.3) #0000001a;
    transform: translateY(-1%)
}

.cardnews > .img,
.cardseminar > div > .img {
    position: relative;
    width: 100%;
    padding-top: 56.17%;
    overflow: hidden;
}
.cardnews img,
.cardseminar img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cardnews > div > .date,
.cardnseminar > div > div > .date {
	color: var(--color-accent);
	margin: var(--size-p-3) 0 0 0;
}
.cardnews > div > .title,
.cardnseminar > div > div > .title {
	color: var(--color-text);
	font-size: var(--unit-size-1);
	font-weight: 700;
	line-height: 2em;
	margin: var(--size-10) 0 var(--size-10) 0;
	text-wrap: wrap;
}
@media (min-width: 1024px) {
	.cardnews > div > .title,
	.cardnseminar > div > div > .title {
		font-size: var(--font-size-1);
	}
}
.cardnews > div > .desc,
.cardnseminar > div > div > .desc {
	color: var(--color-text);
	font-size: var(--unit-size-1);
	font-weight: 400;
	text-wrap: wrap;
}
@media (min-width: 1024px) {
	.cardnews > div > .desc,
	.cardnseminar > div > div > .desc {
		font-size: var(--font-size-1);
	}
}

.member .contents_block > div > div > div > h2 {
	color: var(--color-accent);
	font-size: var(--unit-size-2);
	font-weight: 700;
	margin: 0 0 var(--size-30) 0;
	line-height: 1.75em;
	text-wrap: wrap;
}
@media (min-width: 1024px) {
	.member .contents_block > div > div > div > h2 {
		font-size: var(--font-size-3);
	}
}


/**********
footer
**********/
footer {
	background-color: var(--color-accent2);
}
footer p {
	text-align: center;
	color: var(--color-white);
	font-size: var(--font-size-0-sp);
	padding: var(--size-10) 0 var(--size-10) 0;
	margin: 0 0 0 0;
}
@media (min-width: 1024px) {
	footer p {
		font-size: var(--font-size-0);
	}
}


/**********
Menu
**********/
/**　Global
*******************/
header {
	margin: 0 auto 0 auto;
}
@media (min-width: 1024px) {
	header {
		width: var(--pc-size);
	}
}
header > #nav_block {
	display: flex;
}
header > #nav_block > h1 {
	width: 37.86%;
	margin: 4% 0 0 3%;
}
@media (min-width: 1024px) {
	header > #nav_block > h1 {
		width: 235px;
		margin: 32px 0 0 0;
	}
}
header > #nav_block > div {
	display: none;
}
header > #nav_block > div#slide_menu.active {
    display: flex;
    position: absolute;
    right: 0;
    background-color: var(--color-accent);
    width: 100%;
    height: 100vh;
    transition: right 0.3s ease;
    z-index: 999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
header > #nav_block > div > ul {
	padding: 0 0 0 0;
	margin: 0 0 2em 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	list-style: none;
	gap: 2em 0;
}
header > #nav_block > div > ul > li {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	text-align: center;
}
header > #nav_block > div > ul > li > a {
	color: var(--color-white);
}
@media (min-width: 1024px) {
	header > #nav_block > div {
		width: 810px;
		display: flex;
		flex-direction: column-reverse;
		justify-content: flex-end;
	}
	
	header > #nav_block > div > ul {
		flex-direction: row;
		justify-content: flex-end;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
	}
	header > #nav_block > div > ul > li {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
	}
	header > #nav_block > div > ul.main_menu {
		gap: 0 5px;
	}
	header > #nav_block > div > ul.main_menu > li {
		width: 150px;
		height: 42px;
		background-color: var(--color-white);
		border-bottom: solid 3px var(--color-gray2);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
		transition: color 0.3s ease, background-color 0.3s ease;
	}
	header > #nav_block > div > ul.main_menu > li:hover {
		background-color: var(--color-accent);
	}
	header > #nav_block > div > ul.main_menu > li:hover > a {
		color: var(--color-white);
	}
	header > #nav_block > div > ul.main_menu > li > a {
		margin: 0;
		padding: 0;
		text-align: center;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	header > #nav_block > div > ul.main_menu > li > a.current {
		background-color: var(--color-accent);
		color: var(--color-white);
	}
	header > #nav_block > div > ul.sub_menu {
		align-items: center;
		height: 60px;
		gap: 0 15px;
	}
	header > #nav_block > div > ul.sub_menu > li:first-child {
		margin: 0 0 0 auto;
	}
	header > #nav_block > div > ul > li > a {
		color: var(--color-text);
	}
	header > #nav_block > div > ul.sub_menu > li:last-child {
		width: 110px;
	}
	header > #nav_block > div > ul.sub_menu > li:last-child > a {
		color: var(--color-white);
		white-space: nowrap;
		transition: color 0.3s ease, background-color 0.3s ease;
	}
	header > #nav_block > div > ul.sub_menu > li:last-child > a:hover {
		color: var(--color-accent);
		background-color: var(--color-white);
	}
}

/**　ハンバーガーメニュー
*******************/
@media screen and (max-width: 1024px) {
	.menu_block {
		width: 40px;
		height: 40px;
		background-color: var(--color-white);
		position: fixed;
		top: 15px;
		right: 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 7px;
		z-index: 1000;
	}
	
	.menu_block span {
		display: block;
		width: 30px;
		height: 2px;
		background-color: var(--color-accent);
		transition: 0.5s;
	}
	.menu_block.active span:nth-child(1) {
		transform: rotate(-45deg) translate(-5px, 5px);
	}
	.menu_block.active span:nth-child(2) {
		opacity: 0;
	}
	.menu_block.active span:nth-child(3) {
		transform: rotate(45deg) translate(-8px, -8px);
	}
}




/**********
Index
**********/
.top_img {
	width: 95%;
	height: 35vh;
	position: relative;
	top: 0;
	left: 5%;
	z-index: -1;
}
.top_img > .top_img_box {
	position: absolute;
	top: 5%;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/index/top_img_box.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	clip-path: polygon(100% 0,14.9% 0,0 100%,100% 100%);
}
.top_img > .top_img_box::before {
	position: absolute;
	content: "";
	background-color: rgba(94, 135, 211, 0.6);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: inherit;
}
@media (min-width: 1024px) {
	.top_img {
		width: 53.57%;
		height: 537px;
		position: absolute;
		top: 0;
		left: auto;
		right: 0;
	}
	.top_img > .top_img_box {
		top: 0;
		background-position: left top;
	}
	.top_img > .top_img_box::before {
		position: absolute;
		content: "";
		background-color: rgba(94, 135, 211, 0.6);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		clip-path: inherit;
	}
}
body.index main > .section1 {
	width: var(--sp-size);
	margin: 0 auto 0 auto;
}
body.index main > .section1 h1 {
	font-size: 8.53vw;
	line-height: 1.25em;
	margin: var(--size-p-10) 0 0 0;
}
body.index main > .section1 p {
	width: 100%;
	margin: var(--size-p-5) 0 var(--size-p-5) 0;
	font-size: var(--font-size-sp);
	line-height: 2em;
}

@media (min-width: 1024px) {
	body.index main > .section1 {
		width: var(--pc-size);
	}
	body.index main > .section1 h1 {
		font-size: 4.8rem;
		line-height: 1.75em;
		margin: 70px 0 0 30px;
	}
	body.index main > .section1 p {
		width: 430px;
		margin: 0 0 0 60px;
		font-size: var(--font-size-1);
		line-height: 1.75em;
	}
}

body.index main > .section2 {
	width: var(--sp-size);
	margin: 0 auto 0 auto;
}
body.index main > .section2 > div {
	width: 100%;
	margin: 0 0 0 0;
}
body.index main > .section2 > div > h1 {
	font-size: var(--font-size-2-sp);
}
body.index main > .section2 > div > ul {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	list-style: none;
}
body.index main > .section2 > div > ul > li {
	padding: 0 0 var(--size-p-3) 0;
	margin: 0 0 var(--size-p-3) 0;
	border-bottom: solid 1px var(--color-accent-rgba3);
}


@media (min-width: 1024px) {
	body.index main > .section2 {
		width: var(--pc-size1);
		margin: 220px auto 220px auto;
	}
	body.index main > .section2 > div {
		width: 560px;
		margin: 0 0 0 auto;
	}
	body.index main > .section2 > div > h1 {
		font-size: var(--font-size-2);
	}
	body.index main > .section2 > div > ul {
	}
	body.index main > .section2 > div > ul > li {
	}
}


.top_img2 {
	width: 100%;
	height: 25vh;
	position: relative;
	top: 0;
	right: 5%;
	z-index: -1;
}
.top_img2 > .top_img2_box {
	position: absolute;
	top: 0;
	right: auto;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/index/top_img2_box.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	clip-path: polygon(0 100%, 85.1% 100%, 100% 0, 0 0);
}
.top_img2 > .top_img2_box::before {
	position: absolute;
	content: "";
	background-color: rgba(94, 135, 211, 0.6);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: inherit;
}
@media (min-width: 1024px) {
	.top_img2_area {
		position: relative;
	}
	.top_img2 {
		width: 44.57%;
		height: 366px;
		position: absolute;
		top: 190px;
		left: 0;
	}
	.top_img2 > .top_img2_box {
		top: 0;
		background-position: right 30% top 75%;
		background-size: 200% auto;
	}
	.top_img2 > .top_img2_box::before {
		position: absolute;
		content: "";
		background-color: rgba(94, 135, 211, 0.6);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		clip-path: inherit;
	}
}