@charset "utf-8";

/*--------------- 共通設定 --------------------
	1:ぱんくず
	2:タイトル
	3:テーブル
	4:リンク
	5:定義リスト
	6:順番付き・順番なしリスト
	7:flexbox
	8:btn
	9:基本的な共通項目
	10:アニメーション
--------------------------------------------------*/
html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	scroll-padding-top: 100px;
	line-height: 1.8;
}

body {
	font-family:
        "Zen Maru Gothic", "Hiragino Sans",
		"Hiragino Kaku Gothic ProN","Noto Sans JP", "Noto Sans",
		"Meiryo", "メイリオ", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    color: #00143e;
    background-color: #fff;
    overflow-x: hidden;
}

img {
	max-width: 100%;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid #00143e;
	outline-offset: 2px;
}



@media (max-width: 768px) {
	body {
		font-size: 16px;
	}
}


/*-------------------- 1:ぱんくず --------------------*/
.topicpath {
	margin-bottom: clamp(20px, 4vw, 60px);
}

.topicpath ol {
    display: flex;
	flex-wrap: wrap;
    gap: 0 40px;
    list-style: none;
    padding: 0;
	font-size: clamp(12px, 2vw, 16px);
}

.topicpath li {
    display: flex;
    align-items: center;
	position: relative;
	font-size: 14px;
	line-height: 1.4;
}

.topicpath li::after {
	content: "/";
	position: absolute;
	top: 0;
	right: -24px;
}

.topicpath li:last-child::before,
.topicpath li:last-child::after {
	content: none;
}

/*-------------------- 2:タイトル --------------------*/
h1,
h2,
h3,
h4 {
	font-feature-settings: "palt";
}

.lowerh1Box {
	height: 100%;
}

.lowerh1 {
	font-size: clamp(30px, 5vw, 50px);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #04a8e2;
	background-color: #fff;
	line-height: 1;
	padding: 7px 15px 12px;
}

.titleBox {
    margin-bottom: 50px;
}

.titleL {
    font-family: "Plus Jakarta Sans","Noto Sans",sans-serif;
    font-size: clamp(60px, 11vw, 110px);
    line-height: 1.1;
}

.titleM {
    font-family: "Plus Jakarta Sans","Noto Sans",sans-serif;
    font-size: clamp(40px, 9vw, 60px);
    line-height: 1.1;
}

.subTitle {
	font-size: clamp(16px, 3vw, 20px);
    padding-left: 7px;
}

.titleNote {
    transform: translateY(-10px);
    padding-left: 30px;
    font-size: 20px;
    letter-spacing: -0.03em;
    line-height: 1.5;
}

.titleUnderline {
	font-size: clamp(18px, 3vw, 24px);
	border-bottom: 1px solid #00143e;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.1em;
}

@media (max-width: 630px) {
	.lowerh1Box {
		transform: translateY(20px);
	}
}


/*-------------------- 3:テーブル --------------------*/


/*-------------------- 4:リンク --------------------*/
a {
	color: #00143e;
	text-decoration: none;
	transition: all 0.3s ease;
}

a:hover {
	color: #04a8e2;
	transition: all 0.3s ease;
}

/*-------------------- 5:定義リスト --------------------*/
dl {
	border-top: 1px solid #00143e;
}

dl .row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #00143e;
	padding: 22px 10px;
}

dt {
	width: 140px;
	padding-right: 20px;
	font-weight: 700;
}

dt span {
	font-size: 0.9em;
}

dd {
	flex: 1;
}

dd span {
	display: inline-block;
}

@media (max-width: 630px) {
    dl .row {
        flex-direction: column;
        align-items: flex-start;
		padding: 15px 5px;
    }

    dt {
        width: 100%;
		font-size: 1.1em;
    }
}

/*------------ 6:順番付き・順番なしリスト -------------*/


/*-------------------- 7:flexbox --------------------*/

.flex {
	display: flex;
}

.flex.aic {
	align-items: center;
}

.flex.fww {
	flex-wrap: wrap;
}

.flex.jcc {
	justify-content: center;
}

.flex.jcsb {
	justify-content: space-between;
}

.flex.jcfs {
	justify-content: flex-start;
}

.flex.jcfe {
	justify-content: flex-end;
}

.flex.fdc {
	flex-direction: column;
}

.flex.frr {
	flex-direction: row-reverse;
}

.flex.ais {
	align-items: stretch;
}

.flex01 {
	flex: 1;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}




/*------------------- 9:基本的な共通項目 --------------------*/

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* sm: 576px以上 */
@media (min-width: 576px) {
    .container { max-width: 540px; }
}
/* md: 768px以上 */
@media (min-width: 768px) {
    .container { max-width: 720px; }
}
/* lg: 992px以上 */
@media (min-width: 992px) {
    .container { max-width: 960px; }
}
/* xl: 1200px以上 */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}


/* googleマップ */
.gmap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*-------------------- 10:アニメーション --------------------*/

/* 画面の横揺れ防止用。横からスライドインする要素の親要素につけること */
.slideMask {
	overflow: hidden;
}

/* スクロールすると、下から現れる */
.slideIn {
	opacity: 0;
	transform: translateY(50px);
	transition: 1s;
}

/* スクロールすると、右から現れる */
.slideRight {
	opacity: 0;
	transform: translateX(100px);
	transition: 1s;
}

/* スクロールすると、左から現れる */
.slideLeft {
	opacity: 0;
	transform: translateX(-100px);
	transition: 1s;
}

/* スクロールすると、その場でズームイン */
.zoomIn {
	opacity: 0;
	transform: scale(0.8);
	transition: 1s;
}


/*---------------- フローティングバナー --------------------*/
.floating {
	position: fixed;
	z-index: 1;
	bottom: 0;
	right: 20px;
	transform: translateY(120%);
	opacity: 0;
	transition: transform 0.4s ease, opacity 0.4s ease;
	pointer-events: none;
}

.floating.show {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.floatingBnr {
	display: block;
	color: #fff;
	background-color: #00143e;
	border: 1px solid #00143e;
	border-radius: 10px 10px 0 0;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 10px 25px 10px 70px;
	width: 100%;
	max-width: 380px;
	position: relative;
	margin: 0 auto;
	line-height: 1.4;
}

.floatingBnr::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	width: 36px;
	height: 42px;
	background-image: url(../images/icon-pdf.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform 0.3s;
}

.floatingBnr:hover {
	background-color: #fff;
	color: #00143e;
}

.floatingBnr span {
	display: block;
	font-size: 15px;
	padding-right: 5px;
}

@media (max-width: 768px) {
	.floating {
		right: 0;
		bottom: 5px;
		width: 100%;
		padding: 0 5px;
	}

	.floatingBnr {
		border-radius: 10px;
		max-width: 100%;
		padding: 7px 25px 7px 70px;
	}

	.floatingBnr span {
		display: inline-block;
	}

	.floatingBnr::before {
		width: 20%;
		height: 65%;
		background-position: left center;
	}
}

@media (min-width: 469px) {
	.floatingBnr br {
		display: none;
	}
}

@media (max-width: 468px) {
	.floatingBnr {
		padding: 4px 25px 6px 70px;
		line-height: 1.3;
	}
}

/*---------------- ページトップボタン --------------------*/
.pageTop {
	position: relative;
}

.pageTopBtn {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 60px;
	height: 60px;
	color: #fff;
	text-decoration: none;
}

.pageTopBtn:hover {
	transform: translateY(-5px);
}

@media (max-width: 630px) {
	.pageTopBtn {
		width: 40px;
		height: 40px;
	}
}

/*---------------- 下層ページメイン画像 --------------------*/
.top {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 1;
	border-radius: 0 0 60px 60px;
	margin-bottom: 15px;
}

.top .inner {
	height: 100%;
}

@media (max-width: 1200px) {
	.top {
		aspect-ratio: 3 / 1;
	}
}

@media (max-width: 630px) {
	.top {
		aspect-ratio: 2 / 1;
	}
}

/*---------------- 下層ページ 下部リンク --------------------*/
.commonLink {
	background-color: #f7f6f6;
}

.commonLinkWrap {
	background-color: #00143e;
	border-radius: 60px 60px 0 0;
}

.commonLink a {
	display: block;
	background-color: #fff;
	border-radius: 30px;
	align-items: center;
	padding: 40px 75px 40px 40px;
	width: 100%;
	position: relative;
	line-height: 1.4;
}

.commonLink a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 39px;
    height: 39px;
    background-image: url(../images/icon-arrow01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s;
}

.commonLink a:hover {
	color: #04a8e2;
}

.commonLink a:hover::after {
	background-image: url(../images/icon-arrow01-blu.png);
	transform: translate(5px, -50%);
}

.commonLinkBox {
	gap: 20px;
}

.commonLink figure {
	width: 100px;
	text-align: center;
	transition: all .5s;
}

.commonLink a:hover figure,
.commonLink figure:hover {
    transform: translateX(-5px);
}

.commonLink h2 {
	font-size: clamp(24px, 3.8vw, 30px);
	font-weight: 700;
	width: 150px;
}

.commonLink.wide h2 {
	width: 230px;
}

.commonLink p {
	flex: 1;
}

@media (max-width: 768px) {
	.commonLink a {
		padding: 30px 75px 30px 20px;
	}

	.commonLink h2 {
		width: 130px;
	}

	.commonLink.wide h2 {
		width: 210px;
	}
}

@media (max-width: 630px) {
	.commonLink a {
        padding: 30px 20px;
    }

	.commonLink a::after {
		top: 34%;
		width: 30px;
		height: 30px;
	}

	.commonLinkBox {
		flex-wrap: wrap;
	}

	.commonLink figure {
		width: 90px;
	}

	.commonLink h2,
	.commonLink.wide h2 {
		width: auto;
	}

	.commonLink p {
		flex: 0 0 100%;
	}
}

@media (max-width: 468px) {
	.commonLink.wide .commonLinkBox {
		gap: 20px 5px;
	}
}

/*------------- 下層ページ 内部リンクナビ --------------*/
.linkTabBox {
	display: flex;
	max-width: 100%;
	border: 1px solid #00143e;
}

.linkItem {
	flex: 1;
	text-align: center;
	padding: 14px 0;
	font-size: clamp(18px, 3vw, 24px);
	color: #00143e;
	background-color: #fff;
	border-right: 1px solid #00143e;
	position: relative;
	transition: all 0.3s ease;
	line-height: 1.3;
}

.linkItem:last-child {
	border-right: none;
}

.triangleIcon {
	display: inline-block;
	width: 20px;
	height: 15px;
	margin-left: 10px;
	background-image: url("../images/icon-triangle.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: filter 0.3s ease;
}

.linkItem:hover {
	background: #00143e;
	color: #fff;
}

.linkItem:hover .triangleIcon {
	filter: brightness(0) invert(1);
}

/* 項目が3つのとき */
.tabOver .linkItem {
	font-size: clamp(17px, 2.5vw, 24px);
}

@media (min-width: 631px) {
	.tabOver .linkItem br {
		display: none;
	}
}

@media (max-width: 630px) {
	.tabOver .linkItem {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 10px 34px;
	}

	.tabOver .triangleIcon {
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		margin: 0;
	}
}


/*---------------- contact --------------------*/
.contact {
	background-image: url(../images/contact-img01.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: clamp(60px, 8vw, 120px) 0 clamp(9px, 14vw, 120px);
}

.contactBox {
	border-radius: 30px;
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	padding: 55px 85px;
}

.contactTextBox {
	margin-bottom: 40px;
}

.contactLinks {
	gap: 50px;
}

.contactLinks .btn {
	padding: 12px 10px;
	margin: 0;
}

.contactPhone {
	font-family: "Plus Jakarta Sans","Noto Sans",sans-serif;
	font-size: clamp(34px, 5.2vw, 60px);
	line-height: 1;
}

.contactPhone span {
    font-size: clamp(18px, 4vw, 30px);
}

@media (max-width: 1200px) {
	.contactBox {
		padding: 55px 30px;
	}
}

@media (min-width: 921px) {
	.contactTextBox p br {
		display: none;
	}
}

@media (max-width: 920px) {
	.contactBox {
		padding: 30px 20px;
	}

	.contactTextBox {
		margin-bottom: 20px;
	}

	.contactLinks {
		flex-direction: column;
		gap: 25px;
	}

	.contactPhone {
		font-size: clamp(30px, 9vw, 50px);
	}
}

@media (max-width: 468px) {
	.contactTextBox {
		letter-spacing: -0.02em;
	}
}

/*---------------- ページャー --------------------*/
.pager nav {
	display: flex;
	justify-content: center;
}

.pagerList {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pagerItem {
	text-align: center;
}

.worksDetail .pagerList,
.topicsDetail .pagerList {
	gap: 30px;
}

.pagerButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 16px 2px;
	border: 1px solid #00143e;
	border-radius: 30px;
	color: #00143e;
	text-decoration: none;
	line-height: 1;
	transition: all 0.2s ease;
}

.pagerButton.returnButton {
	width: 200px;
}

.pagerButton:hover {
	background-color: #00143e;
	color: #fff;
}

.pagerButton.isActive {
	background-color: #00143e;
	color: #fff;
	pointer-events: none;
}

/* 前後にページがないときはグレーアウト */
.pagerButton.noPage {
	border: 1px solid #ccd0d8;
	color: #ccd0d8;
	pointer-events: none;
}

.prevButton,
.nextButton {
	width: 80px;
}

.ellipsis {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	color: #0b1e4b;
	font-size: 18px;
}

@media (max-width: 630px) {
	.pagerItem .pagerButton:not(.prevButton):not(.nextButton):not(.returnButton) {
		display: none;
	}

	.pagerItem.ellipsis {
		display: none;
	}

	.pagerList {
		justify-content: space-between;
		width: 100%;
		gap: 0;
	}

	.worksDetail .pagerList,
	.topicsDetail .pagerList {
		gap: 0;
	}

	.prevButton,
	.nextButton {
		width: 200px;
	}
}

@media (max-width: 468px) {
	.pagerButton {
		height: 35px;
	}

	.prevButton,
	.nextButton {
		width: 140px;
	}
}