@import url("reset.min.css");

/* =========================
  グローバル変数設定
========================= */

:root {
	/* Colors */
	--white-fff: rgba(255, 255, 255, 1);
	--gray-333: rgba(51, 51, 51, 1);
	--gray-777: rgba(119, 119, 119, 1);
	--gray-bbb: rgba(187, 187, 187, 1);
	--bg-clr: rgba(255, 255, 255, 0);
	--accent-clr: rgba(112, 132, 129, 0.5);
	--main-clr: rgba(8, 80, 120, 1);
	--high-clr: rgba(133, 216, 206, 1);
	--white-fff-t-high: rgba(255, 255, 255, 0.1);
	--white-fff-t-mdl: rgba(255, 255, 255, 0.5);
	--white-fff-t-low: rgba(255, 255, 255, 0.9);
	--t-50: rgba(255, 255, 255, 0.5);
	--t-0: rgba(255, 255, 255, 0);
	--bg-img: url(../img/ak-background.png);
	--main-grd: linear-gradient(270deg, rgba(133, 216, 206, 0.9) 0%, rgba(8, 80, 120, 0.9) 100%);

	/* Fonts */
	--font-main: "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic", YuGothic, YuGothicMedium, Helvetica, Meiryo, sans-serif;

	--line-height-l: 1.8;
	--line-height-m: 1.6;
	--line-height-s: 1.4;
	--line-height-xs: 1;

	--font-weight-l: 600;
	--font-weight-m: 400;
	--font-weight-s: 300;

	/* Screen Widths */
	--1r-width: 375px;
	--2r-width: 750px;
	--3r-width: 1125px;

	/* PC top Height */
	--top-height-pc: 186px;
	--top-height-sp: 150px;
}

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

	:root {
		--font-size-h1: 18px;
		--font-size-h2: 24px;
		--font-size-h3: 20px;
		--font-size-h4: 18px;
		--font-size-p: 16px;
		--font-size-small: 14px;
	}

}

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

	:root {
		--font-size-h1: 36px;
		--font-size-h2: 24px;
		--font-size-h3: 20px;
		--font-size-h4: 18px;
		--font-size-p: 16px;
		--font-size-small: 14px;
	}
}

@media screen and (min-width: 1125px) {

	:root {
		--font-size-h1: 36px;
		--font-size-h2: 24px;
		--font-size-h3: 20px;
		--font-size-h4: 18px;
		--font-size-p: 16px;
		--font-size-small: 14px;
	}
}

/* =========================
  共通レイアウト
========================= */

* {
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

html,
body {
	margin: 0px;

	font-family: var(--font-main);
	font-weight: var(--font-weight-m);
	font-size: var(--font-size-p);
	color: var(--gray-333);
	line-height: var(--line-height-xs);
}

body {
	background-image: var(--bg-img);
	background-size: 360px 360px;
	background-repeat: repeat;
	background-color: var(--bg-clr);

	background-attachment: fixed;
}

a {
	all: unset;
	display: inline;
	text-decoration: inherit;
	color: inherit;
	cursor: pointer;
}

h1, h2, h3, h4, p, ul {
	margin: 0;
	padding: 0;
	width: 100%;
}

div, p, blockquote {
	line-height: var(--line-height-l);
}

h1, h2, h3, h4, ul, dl {
	line-height: var(--line-height-s);
}

img {
	max-width: 100%;
}

.ak-line {
	width: 100%;
	height: 1px;
	background-color: var(--accent-clr);
	margin-top: 10px;
}

.ak-section {
	display: flex;
	padding: 10px;
	align-items: flex-start;
	align-content: flex-start;
	gap: 10px;
	width: 100%;
	flex-wrap: wrap;

	background: var(--white-fff-t-high);
	-webkit-backdrop-filter: blur(2.5px);
	backdrop-filter: blur(2.5px);
	background-clip: border-box;
	position: relative;
}

/* =========================
  ヘッダー
========================= */
.ak-top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	width: 100%;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	z-index: 1000;
}

.ak-top .ak-header {
	display: flex;
	height: 70px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	align-self: stretch;

	background: var(--main-grd, linear-gradient(270deg, #85D8CE 0%, #085078 100%));
	z-index: 4000;

	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.ak-top h1 {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
}

.ak-top h1 a {
	display: flex;
	align-items: center;
	height: fit-content;
}

.ak-top h1 img {
	height: var(--font-size-h1);
	width: auto;
}

.ak-top .ak-year {
	display: flex;
	flex-direction: column;
	width: 16px;
	height: 55px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 2px 3px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--gray-333);
}

.ak-top .ak-year span {
	position: relative;
	width: 9px;
	font-size: 9px;
	margin-top: -6.00px;
	margin-bottom: -4.00px;
	font-weight: 600;
	color: #ffffff;
	text-align: center;
	line-height: 10px;
}

.ak-top .ak-icon-menu img {
	width: 30px;
	height: 18px;
	position: absolute;
	right: 50px;
	top: calc(50% - 9px);
}

.ak-top .ak-icon-filter img {
	width: 30px;
	height: 28.065px;
	position: absolute;
	right: 10px;
	top: calc(50% - 14px);
}

/* =========================
  メニュー PC
========================= */

.ak-header-menu-pc {
	width: 100%;
	z-index: 3000;
}

.ak-header-menu-pc .ak-header-menu {
	display: flex;
	width: 100%;
	flex: 0 0 auto;
	line-height: var(--line-height-xs);
}

.ak-header-menu-pc .ak-header-menu li {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex: 1;
	border: 1px solid var(--white-fff);
	background: var(--accent-clr);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: var(--font-size-small);
	color: var(--white-fff);
}

/* メニュー内のリンク */
.ak-header-menu-pc .ak-header-menu li a {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 10px;
}

.ak-header-menu-pc li.ak-header-menu-theme-pc a,
.ak-header-menu-pc li.ak-header-menu-year-pc a {
	cursor: default;
}

/* サブメニューの設定 */
.ak-header-menu-pc .ak-header-menu-theme-pc ul,
.ak-header-menu-pc .ak-header-menu-year-pc ul {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	position: absolute;
	left: 0px;
	top: calc(100% + 1px);
	width: auto;
}

.ak-header-menu-pc .ak-header-menu-theme-pc ul {
	width: 270%;
	line-height: var(--line-height-s);
}

.ak-header-menu-pc .ak-header-menu-year-pc ul {
	width: 100%;
	line-height: var(--line-height-xs);
}

/* サブメニューのリスト項目 */
.ak-header-menu-pc .ak-header-menu-theme-pc li,
.ak-header-menu-pc .ak-header-menu-year-pc li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	text-align: left;
	border: 1px solid var(--accent-clr);
	background: var(--white-fff-t-low);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	color: var(--main-clr);
}

/* サブメニュー内のリンク */
.ak-header-menu-pc .ak-header-menu-theme-pc li a,
.ak-header-menu-pc .ak-header-menu-year-pc li a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 10px;
	text-align: left;
	cursor: pointer;
}

/* ホバー時のスタイル */
.ak-header-menu-pc li:hover {
	color: var(--main-clr);
}

.ak-header-menu-pc .ak-header-menu-theme-pc li:hover,
.ak-header-menu-pc .ak-header-menu-year-pc li:hover {
	color: var(--high-clr);
}

/* =========================
  メニュー SP
========================= */

.ak-header-menu-sp {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 70px;
	overflow-y: auto;
	z-index: 5000;
	line-height: var(--line-height-xs);
}

.ak-header-menu-sp .ak-header-menu {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	z-index: 3000;
}

.ak-header-menu-sp .ak-header-menu li {
	display: flex;
	align-items: center;
	width: 100%;
	border: 1px solid var(--white-fff);
	background: var(--accent-clr);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: var(--font-size-small);
	color: var(--white-fff);
	text-align: left;
}

.ak-header-menu-sp .ak-header-menu li a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 5px;
	text-decoration: none;
	color: var(--white-fff);
}

.ak-header-menu-sp .ak-header-menu-theme-sp,
.ak-header-menu-sp .ak-header-menu-year-sp {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
}

.ak-header-menu-sp .ak-header-menu-theme-sp {
	line-height: var(--line-height-s);
}

.ak-header-menu-sp .cursor-default a,
.ak-header-menu-sp .cursor-default a {
	cursor: default;
}

.ak-header-menu-sp .ak-header-menu-theme-sp li,
.ak-header-menu-sp .ak-header-menu-year-sp li {
	display: flex;
	align-items: center;
	width: 100%;
	border: 1px solid var(--accent-clr);
	background: var(--white-fff-t-mdl);
	color: var(--gray-777);
	text-align: left;
}

.ak-header-menu-sp .ak-header-menu-theme-sp li a,
.ak-header-menu-sp .ak-header-menu-year-sp li a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: var(--gray-777);
	padding: 5px;
}

.ak-header-menu-sp a:active {
	color: var(--high-clr);
}

/* =========================
  メインビジュアル
========================= */

.ak-top .ak-main-image {
	position: relative;
	height: 80px;
	align-self: stretch;

	background: var(--white-fff-t-mdl);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	z-index: 2000;
}

.ak-top .ak-main-image-wrapper {
	position: relative;
	height: 80px;
	width: 100%;
}

.ak-top .ak-house {
	position: absolute;
	width: 100%;
	height: 80px;
	bottom: 0;
	left: 0;
	object-fit: cover;
}

.ak-top .ak-main-image-people {
	position: absolute;
	bottom: 0;
	width: 100%;
	display: flex;
	justify-content: center;
}

.ak-top .ak-main-image-people img {
	width: 860px;
	max-width: none;
	height: 30px;
	bottom: 0;
	position: absolute;
}

.ak-top .ak-people1 {
	left: -560px;
}

.ak-top .ak-people2 {
	left: 300px;
}

.ak-top .ak-people3 {
	left: 1160px;
}


.ak-top .ak-people4 {
	left: -560px;
}

.ak-top .ak-people5 {
	left: 300px;
}

.ak-top .ak-people6 {
	left: 1160px;
}

.ak-top .ak-people7 {
	left: 300px;
}

/* =========================
  コンテンツエリア
========================= */

.ak-mdl {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	margin-top: calc(var(--top-height-pc) + 20px);
}

.ak-mdl-left,
.ak-mdl-right {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ak-mdl-right {
	min-width: var(--1r-width);
	align-items: center;
	padding: 0px;
	position: relative;
	align-self: stretch;
}

#ak-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 10px;
	width: 100%;
	flex: 0 0 auto;
	border-left: 3px solid var(--main-clr);
	border-right: 3px solid var(--main-clr);
}

/* =========================
  見出しデザイン
========================= */
h2 {
	display: block;
	align-items: center;
	width: 100%;
	padding-left: 10px;
	margin-bottom: 10px;
	font-size: var(--font-size-h2);
	font-weight: 600;
	color: var(--main-clr);
	border-left: 2px solid var(--accent-clr);
}

h3 {
	display: flex;
	align-items: center;
	font-size: var(--font-size-h3);
	font-weight: 600;
	color: var(--main-clr);
	margin-bottom: 10px 0;

	padding-left: 30px;
	background-image: url('../img/icon-h3.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
}

h3::after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background-color: var(--accent-clr);
	margin-left: 10px;
}

h4 {
	font-size: var(--font-size-h4);
	font-weight: 600;
}


/* =========================
  ボタン
========================= */

.ak-button {
	display: flex;
	width: 85%;
	height: 40px;
	max-width: 450px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	margin: 0 auto;

	border-radius: 20px;
	border: 2px solid var(--main-clr, #085078);
	background: var(--main-grd, linear-gradient(270deg, #85D8CE 0%, #085078 100%));

	color: var(--white-fff);
}

.ak-button:hover {
	filter: brightness(1.2);
}

.ak-button a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}


/* =========================
  フィルター
========================= */

.ak-filter-sp {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 50px;

	overflow-y: auto;
	z-index: 5000;

	display: none;
}

.ak-filter {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px;
	top: var(--top-height-pc);
	position: sticky;
	width: 100%;
	gap: 20px;

	line-height: var(--line-height-xs);

	background: var(--white-fff-t-high);
	-webkit-backdrop-filter: blur(2.5px);
	backdrop-filter: blur(2.5px);
	background-clip: border-box;
}

.ak-filter h2 {
	font-size: var(--font-size-h4);
}

.ak-filter .wrapper1 {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	width: 100%;
}

.ak-filter .wrapper2,
.ak-filter .ak-areas {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	width: 100%;
	gap: 10px;
}

.ak-filter .ak-search-box {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	width: 100%;
	background-color: #ffffff40;
	border: 2px solid #151141;
	position: relative;
}

.ak-filter .ak-search-input {
	font-weight: 600;
	font-size: var(--font-size-p);
	color: #000;
	background-color: transparent;
	text-align: center;
	border: none;
	outline: none;
	width: 100%;
	padding: 8px 10px;
}

.ak-filter .ak-search-input::placeholder {
	color: #cccccc;
}

.ak-filter .ak-search-pdf-button {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ak-filter .ak-search-pdf-button img {
	width: 100%;
	height: auto;
	filter: grayscale(100%);
	/* デフォルトは白黒 */
	transition: filter 0.3s ease-in-out;
}

.ak-filter .ak-search-pdf-button input:checked+img {
	filter: none;
	/* オンのときはカラー表示 */
}

.ak-filter .ak-search-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 85%;
	padding: 8px 16px;
	margin: 10px auto;
	font-weight: 600;
	font-size: var(--font-size-p);
	color: #ffffff;
	background: var(--main-grd, linear-gradient(270deg, #85D8CE 0%, #085078 100%));
	border: 2px solid var(--main-clr, #085078);
	border-radius: 20px;
	cursor: pointer;
	transition: background 0.3s ease-in-out;
}

.ak-filter .ak-search-button:hover {
	filter: brightness(1.2);
}

.ak-filter .ak-theme,
.ak-filter .ak-division {
	display: flex;
	width: 100%;
	height: 30px;
}

.ak-filter .ak-theme li,
.ak-filter .ak-division li {
	display: flex;
	height: 30px;
	flex: 1;
	border: 1px solid var(--gray-333);
	background: linear-gradient(270deg, rgba(175, 175, 175, 0.50) 0%, rgba(64, 64, 64, 0.50) 100%);
	color: #FFF;
	font-size: var(--font-size-small);
}

.ak-filter .ak-area-map {
	width: 60%;
	height: auto;
	margin: 0 auto;
}

.ak-filter .ak-area-name {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.ak-filter .ak-area-name li {
	display: flex;
	width: calc(100%/6);
	height: 30px;
	border: 1px solid var(--gray-333);
	background: linear-gradient(270deg, rgba(175, 175, 175, 0.50) 0%, rgba(64, 64, 64, 0.50) 100%);
	color: #FFF;
	font-size: var(--font-size-small);
}

.ak-filter .ak-theme li:hover,
.ak-filter .ak-division li:hover,
.ak-filter .ak-area-name li:hover {
	background: var(--main-grd, linear-gradient(270deg, #85D8CE 0%, #085078 100%));
}

.ak-filter .ak-theme li a,
.ak-filter .ak-division li a,
.ak-filter .ak-area-name li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}


/* =========================
  アイコン・グループ
========================= */
.ak-filter .overlap-group {
	width: 31px;
	height: 31px;
	background-color: var(--high-clr);
	border-radius: 50%;
	box-shadow: inset 2px 2px 1px #00000040;
}

.ak-filter .span {
	position: absolute;
	top: 7px;
	left: 3px;
	font-size: 11px;
	color: #ffff00;
	font-weight: 600;
}

/* =========================
  スタイル統一
========================= */
.ak-filter .span-2 {
	color: #ffffff;
	font-size: var(--font-size-p);
	text-align: center;
	font-weight: 600;
}

/* =========================
  フッター
========================= */

.ak-btm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0px;
	padding: 50px 0px 20px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.ak-button-gotop {
	display: flex;
	justify-content: flex-end;
	/* 右端に配置 */
	width: 100%;
}

.ak-gotop {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 31px;
	background-color: var(--accent-clr);
	cursor: pointer;
	text-decoration: none;
}

.ak-gotop::before {
	content: "";
	width: 21px;
	height: 17px;
	background: url("../img/icon-gotop.svg") no-repeat center / contain;
}

.ak-gotop span {
	font-weight: 600;
	font-size: var(--font-size-p);
	color: #ffffff;
	text-align: center;
}

.ak-btm .ak-btm-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
	background: var(--main-grd, linear-gradient(270deg, #85D8CE 0%, #085078 100%));
}

.ak-btm p {
	position: relative;
	align-self: stretch;
	margin-top: -1.00px;
	color: #ffffff;
	font-size: var(--font-size-p);
	text-align: center;
}

.ak-btm p a:hover {
	color: var(--high-clr);
}

.ak-btm .rogo-mlit {
	position: relative;
	width: 149.89px;
	height: 30px;
}

.ak-btm .rogo-bp {
	position: relative;
	width: 90.81px;
	height: 24px;
	object-fit: cover;
}

.ak-btm .ak-btm-rogo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 20px 0px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
}

.alert-box {
	display: none;
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	border: 5px solid var(--main-clr);
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	background: var(--white-fff-t-low);
	-webkit-backdrop-filter: blur(2.5px);
	backdrop-filter: blur(2.5px);
	background-clip: border-box;
	text-align: center;
	white-space: nowrap;
	z-index: 9000;
}

/* =========================
  メディアクエリ SP
========================= */

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

	.ak-title-year {
		position: absolute;
		width: 70px;
		height: auto;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.ak-title-pc {
		display: none;
	}

	.ak-header-menu-pc {
		display: none;
	}

	.ak-filter {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		top: 0px;
	}

	.ak-mdl {
		margin-top: calc(var(--top-height-sp) + 20px);
	}

	.ak-mdl-left {
		width: 100%;
	}

	.ak-mdl-right {
		display: none;
	}

	p {
		font-size: var(--font-size-p);
	}

}

/* =========================
  メディアクエリ PAD
========================= */

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

	.ak-title-year {
		position: absolute;
		width: 120px;
		height: auto;
		top: -5px;
		left: 2px;
		z-index: 9999;
	}

	.ak-title-sp {
		display: none;
	}

	.ak-top .ak-icon-menu img {
		display: none;
	}

	.ak-top .ak-icon-filter img {
		display: none;
	}

	.ak-header-menu-sp {
		display: none;
	}

	.ak-mdl-left {
		width: 100%;
	}

	.ak-mdl-right {
		max-width: 375px;
	}

	p {
		font-size: var(--font-size-p);
	}
}

/* =========================
  メディアクエリ PC
========================= */

@media screen and (min-width: 1125px) {

	.ak-title-year {
		position: absolute;
		width: 150px;
		height: auto;
		top: -10px;
		left: 40px;
		z-index: 9999;
	}

	.ak-title-sp {
		display: none;
	}

	.ak-top .ak-icon-menu img {
		display: none;
	}

	.ak-top .ak-icon-filter img {
		display: none;
	}

	.ak-header-menu-sp {
		display: none;
	}

	.ak-mdl-left {
		width: 100%;
	}

	.ak-mdl-right {
		max-width: 375px;
	}

	p {
		font-size: var(--font-size-p);
	}

}

/* =========================
  メディアクエリ 縦が小さい場合
========================= */

@media screen and (max-height: 720px) {

	.ak-filter {
		position: static;
	}

}