@charset "utf-8";
/* 全ページ共通 */
*{
	box-sizing: border-box;
}

/* CSSのリセット */
html, body,
ul, ol, li, dl, dt, dd,
h1, h2, h3, h4, h5, h6, p, div{
	margin: 0;
	padding: 0;
}

li{
	list-style: none;
}

a{
	color: inherit;
	text-decoration: none;
}

img{
	vertical-align: bottom;
}

button{
	font: inherit;
	color: inherit;
}

/* リンクのスクロール */
html{
	scroll-behavior: smooth; /* スムーススクロール */
}

/* フォントと背景（デザインは游ゴシックと源ノ角ゴシック。どの環境でも同じに見えるように Noto Sans JP にした） */
body{
	font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.08em;
	color: #000000;
	background-color: #ffffff; /* 背景色 */
	overflow-x: hidden;
	text-wrap: pretty; /* 段落の最後の行が1〜2文字だけにならないようにする */
}

/* 見出しは文節の切れ目で折り返す（長いタイトルが言葉の途中で切れないように） */
h1, h2, h3{
	word-break: auto-phrase;
}

/* PC・SPの表示・非表示*/
.sp{
	display: none;
}

.pc{
	display: block;
}





/* コンテンツ幅 */
.contents01{
	max-width: 1240px;
	width: 100%;
	margin: 0 auto;
	padding: 0px 20px;
}





/* ヘッダー */
header{
	position: relative;
	z-index: 20;
	width: 100%;
	background-color: #ffffff;
}

.header02{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	height: 98px;
	padding: 0 3.3% 0 13.5%;
}

.logo_text{
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.1em;
}

.logo_header a{
	display: inline-block;
	margin-top: 4px;
}

.logo_header a:hover{
	opacity: 0.7;
}

/* 下層のヘッダー（少し高く、下に緑の線） */
.page_lower header{
	border-bottom: 5px solid #33aa8f;
}

.page_lower .header02{
	height: 171px;
	padding: 0 7.6% 0 9.4%;
}

/* ロゴは会社ごとに形が変わるので、高さの上限で大きさをそろえる */
.logo_header img{
	display: block;
	width: auto;
	height: auto;
	max-width: 280px;
	max-height: 40px;
}

.header_menu{
	display: flex;
	align-items: center;
	gap: 40px;
	flex-shrink: 0;
}

.global-menu{
	display: flex;
	border-right: 1px solid #33aa8f;
}

.global-menu li{
	border-left: 1px solid #33aa8f;
}

.global-menu a{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 35px;
	line-height: 1.4;
}

.global-menu a:hover{
	opacity: 0.7;
}

.menu_ja{
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.menu_en{
	margin-top: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #33aa8f;
}

/* お問い合わせのボタン */
.header_button{
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	min-width: 256px;
	height: 63px;
	padding: 0 50px 0 46px;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	background-color: #33aa8f;
	border-radius: 50px;
}

.header_button::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 26px;
	transform: translateY(-50%);
	border-left: 13px solid #ffffff;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

.header_button:hover{
	opacity: 0.7;
}

.mail_icon{
	width: 22px;
	height: 22px;
	fill: currentColor;
	flex-shrink: 0;
}

/* ハンバーガーメニュー（PCでは隠す） */
.sp-menu{
	display: none;
}

.p-hamburger{
	display: flex;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;/* カーソルが上に来たらポインターに変身 */
	position: fixed; /* 設置する位置を固定 */
	top: 10px; /* 上からの位置 */
	right: 15px; /* 右からの位置 */
	z-index: 9999; /* 一番手前に表示 */
	width: 50px; /* 横幅 */
	height: 50px; /* 縦幅 */
	background-color: #29557b; /* 四角の色 */
	border-radius: 4px; /* 角丸 */
	padding-left: 12px;
	border: 1px solid #29557b;/* 枠線 */
}

.p-hamburger span{
	width: 25px;
	height: 2px;
	background-color: #ffffff;/* 三本線の色 */
	margin: 2.5px 0;
	transition: 0.3s;/* 三本線の動く時間 */
}

/* 三本線をバツにする */
.p-hamburger.active span:nth-of-type(1){
	transform: rotate(-45deg) translate(-5px, 5px);
}

.p-hamburger.active span:nth-of-type(2){
	opacity: 0;
}

.p-hamburger.active span:nth-of-type(3){
	transform: rotate(45deg) translate(-5px, -5px);
}

/* 表示前のハンバーガーメニューを隠す */
#gnav{
	position: fixed;
	z-index: 999;
	top: 70px; /* ヘッダーの下から、画面の下の端まで */
	bottom: 0;
	right: -120%; /* 画面の右側に隠す */
	width: 100%;
	overflow-y: auto;
	background-color: #ffffff;
	transition: all 0.6s;
}

#gnav.list_active{
	right: 0;
}

.hamburger-menu1{
	max-width: 600px;
	margin: 30px auto 0;
	padding: 10px 30px 40px;
}

.hamburger-menu1 ul{
	border-top: 1px solid #29557b;
}

.hamburger-menu1 li{
	border-bottom: 1px solid #29557b;
}

.hamburger-menu1 li a{
	position: relative;
	display: block;
	padding: 18px 40px 18px 0;
	font-size: 15px;
	font-weight: 700;
	color: #29557b;
}

.hamburger-menu1 .nav_arrow{
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	font-size: 14px;
	font-weight: 400;
	color: #29557b;
}

.hamburger-menu1 a:hover{
	opacity: 0.7;
}

.hamburger-btn{
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.hamburger-btn .header_button{
	min-width: 0;
	height: 54px;
	padding: 0 52px 0 34px;
}





/* 電話番号 */
.tel_link{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	color: #003d59;
}

.tel_circle{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3em;
	height: 1.3em;
	background-color: #33aa8f;
	border-radius: 50%;
	flex-shrink: 0;
}

.tel_icon{
	width: 58%;
	height: 58%;
	fill: #ffffff;
}

.tel_hours{
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
}





/* ボタン（緑。右に矢印） */
.btn{
	text-align: center;
}

.btn1,
.btn2{
	display: inline-block;
	position: relative;
	width: 263px;
	max-width: 100%;
	padding: 13px 40px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center; /* 親が左寄せでも、ボタンの中の文字は中央にする */
	color: #ffffff;
	background-color: #33aa8f;
	border-radius: 50px;
}

.btn1::before,
.btn2::before{
	content: "";
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 24px;
	width: 7px;
	height: 7px;
	margin: auto;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}

.btn1:hover,
.btn2:hover{
	opacity: 0.7;
}

/* 白いボタン（写真の上に置く） */
.btn2{
	width: 275px;
	color: #003d59;
	background-color: #ffffff;
}





/* セクションの見出し（日本語を大きく、英語を小さく下に。英語の両側に線） */
.title{
	text-align: center;
}

.title_ja{
	display: block;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	color: #18293e;
}

.title_en{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: #33aa8f;
}

.title .title_en::before,
.title .title_en::after{
	content: "";
	width: 48px;
	height: 1px;
	background-color: currentColor;
}

/* 見出しの下の文章 */
.lead{
	margin-top: 60px;
	font-size: 14px;
	text-align: center;
}





/* フッター */
footer{
	color: #ffffff;
	background-color: #003d59;
}

.page_lower footer{
	background-color: #29557b;
}

.footer_inner{
	display: flex;
	justify-content: space-between;
	gap: 40px;
	padding: 86px 0 70px;
}

.logo_footer{
	margin-top: 6px;
}

.logo_footer a{
	display: inline-block;
}

.logo_footer a:hover{
	opacity: 0.7;
}

.logo_footer img{
	display: block;
	width: auto;
	height: auto;
	max-width: 300px;
	max-height: 44px;
}

.footer_address{
	margin-top: 48px;
	font-size: 14px;
	font-weight: 500;
	line-height: 2.1;
}

.footer_address div{
	display: flex;
}

.footer_address dt{
	flex-shrink: 0;
	margin-right: 0.5em;
}

/* フッターメニュー（縦に4つずつ並べる） */
.footer_menu{
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	column-gap: 72px;
	row-gap: 34px;
}

.footer_menu a{
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.footer_menu a:hover{
	opacity: 0.7;
}

.footer_arrow{
	margin-right: 8px;
	font-size: 12px;
}

/* コピーライト */
.copyright{
	padding: 0 0 22px;
	text-align: center;
}

.copyright p{
	font-size: 14px;
	font-weight: 500;
}





/* トップに戻るボタン */
.top-button{
	position: fixed;
	right: 24px;
	bottom: 20px;
	z-index: 9;
}

.top-button a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	background-color: #ffffff;
	border: 1px solid #003d59;
	border-radius: 50%;
}

.top-button a::before{
	content: "";
	border-bottom: 17px solid #003d59;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}

.top-button:hover{
	opacity: 0.7;
}





@media screen and (max-width: 1500px){

	.header02,
	.page_lower .header02{
		padding: 0 2% 0 3%;
	}

	.global-menu a{
		padding: 0 18px;
	}

	.header_menu{
		gap: 24px;
	}

	.header_button{
		min-width: 0;
		padding: 0 46px 0 28px;
	}
}




@media screen and (max-width: 1170px){

	/* PC・SPの表示・非表示*/
	.pc{
		display: none;
	}

	.sp{
		display: block;
	}

	/* ヘッダー（スマホ・タブレットでは上に固定） */
	body{
		padding-top: 70px;
	}

	header{
		position: fixed;
		top: 0;
		left: 0;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
	}

	.header02,
	.page_lower .header02{
		height: 70px;
		padding: 0 80px 0 20px;
	}

	.header_menu{
		display: none;
	}

	.logo_text{
		font-size: 11px;
	}

	.logo_header img{
		max-width: 220px;
		max-height: 30px;
	}

	.sp-menu{
		display: block;
	}

	/* フッター */
	.footer_inner{
		flex-direction: column;
		padding: 60px 0 40px;
	}

	.footer_menu{
		grid-template-rows: none;
		grid-template-columns: repeat(3, auto);
		grid-auto-flow: row;
		grid-auto-columns: auto;
		justify-content: start;
		row-gap: 20px;
	}

	.top-button a{
		width: 70px;
		height: 70px;
	}
}




@media screen and (max-width: 750px){

	p{
		font-size: 14px;
	}

	/* ボタン */
	.btn1,
	.btn2{
		width: 240px;
		padding: 10px 40px;
		font-size: 14px;
	}

	/* 見出し */
	.title_ja{
		font-size: 24px;
	}

	.title_en{
		margin-top: 6px;
		font-size: 14px;
	}

	.title .title_en::before,
	.title .title_en::after{
		width: 30px;
	}

	.lead{
		margin-top: 30px;
		text-align: left;
	}

	/* 電話番号 */
	.tel_link{
		font-size: 26px;
	}

	/* フッター */
	.footer_inner{
		padding: 50px 0 30px;
	}

	.logo_footer img{
		max-width: 240px;
		max-height: 36px;
	}

	.footer_address{
		margin-top: 24px;
		font-size: 13px;
	}

	/* フッター（デザインのとおり、会社名と住所だけを中央に。メニューはハンバーガーにある） */
	.footer_inner{
		align-items: center;
		text-align: center;
	}

	.footer_address div{
		justify-content: center;
	}

	.footer_menu{
		display: none;
	}

	.footer_menu a{
		font-size: 13px;
	}

	.copyright p{
		font-size: 11px;
	}

	/* トップへ戻るボタン */
	.top-button{
		right: 10px;
		bottom: 10px;
	}

	.top-button a{
		width: 56px;
		height: 56px;
	}

	.top-button a::before{
		border-bottom-width: 12px;
		border-left-width: 7px;
		border-right-width: 7px;
	}
}





/* ===== 下層のページで共通 ===== */

/* ページの見出しの帯（写真を暗くした上に、パンくずと白い見出し） */
.page_head{
	position: relative;
	padding: 22px 0 70px;
	color: #ffffff;
	background-color: #18293e;
	background-image: url("../img/common/subpage.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.page_head::before{
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(24, 41, 62, 0.4);
}

.page_head > .contents01{
	position: relative;
}

.breadcrumb{
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.breadcrumb li + li::before{
	content: "＞";
	margin: 0 0.5em;
}

.breadcrumb a:hover{
	opacity: 0.7;
}

.page_title{
	margin-top: 26px;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-align: center;
}

/* 見出しの下の文章（中央ぞろえ） */
.page_lead{
	margin-top: 90px;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
}

/* 中見出し（白い枠。左に紺の帯） */
.block_subheading{
	padding: 16px 30px 16px 48px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: #29557b;
	background-color: #ffffff;
	border: 1px solid #29557b;
	border-left: 17px solid #29557b;
}




@media screen and (max-width: 750px){

	.page_head{
		padding: 12px 0 34px;
	}

	.breadcrumb{
		font-size: 11px;
	}

	.page_title{
		margin-top: 14px;
		font-size: 21px;
	}

	.page_lead{
		margin-top: 40px;
		font-size: 14px;
		text-align: left;
	}

	.block_subheading{
		padding: 10px 16px 10px 20px;
		font-size: 18px;
		border-left-width: 9px;
	}
}