@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*設定する場合→ font-family:'Noto sans japanese', sans-serif; を追加*/
/*同時に他のWEBフォントを使う場合はhtml側に記載すること*/
html {
	scroll-behavior: smooth;
}


* {
	box-sizing: border-box;
}

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

body {
	font-size: 14px;
	background: #FFFFFF;
	font-family: Meiryo, Tahoma, Verdana, Arial, sans-serif;
}

#wrapper {
	min-width: 320px;
	max-width: 600px;
	margin: 0 auto;
}

img {
	vertical-align: bottom;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=submit],
input[type=button] {
	-webkit-appearance: none;
	border: 1px solid #999999;
}

.for-pc {
	display: none !important;
}

.sp-br {
	display: block;
}

.content {
	min-width: 320px;
	max-width: 600px;
	margin: 0 auto;
	overflow: hidden;
	padding: 1rem;
}

/*共通
----------------------------------------------------------------------------------------------------*/
:root {
	--black: #242424;
	--white: #fff;
	--red: #AF0A00;
	--blue: #12224e;
	--light-blue: #30457c;
	--gray: #e0e0e0;
	--light-gray: #efefef;
	--dark-gray: #666666;
	--yellow: #ffbe32;
	--green: #00641e;
}

/*  */

.hl-text-l {
	font-size: 1.125rem;
	font-weight: 500;
}

.hl-text-s {
	font-size: .875rem;
}

/*  */

.svg {}

.svg-stroke {
	stroke: var(--black);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: transparent;
}

.svg-stroke-s {
	stroke-width: 2;
}


.svg-blue {
	stroke: var(--blue);
}

.svg-white {
	stroke: var(--white);
}

.svg-yellow {
	stroke: var(--yellow);
}

.svg-gray {
	stroke: var(--gray);
}

.svg-s {
	width: 1rem;
	height: 1rem;
}

.svg-m {
	width: 2rem;
	height: 2rem;
}

/*  */

.st {
	color: var(--blue);
	font-size: 2rem;
	font-weight: 600;
}

.bg--white {
	background: var(--white);
}

.bg--blue {
	background: var(--blue);
}

.bg--gray {
	background: var(--gray);
}

.bg--light-gray {
	background: var(--light-gray);
}

/*  */

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: .5rem 1rem;
}

.button--round {
	border-radius: 4px;
	overflow: hidden;
}

.button--primary {
	background: var(--blue);
	color: var(--white);
}

.button--success {
	background: var(--green);
	color: var(--white);
}

.button--secondary {}

.button--fit-content {
	width: fit-content;
}

/*ヘッダー
----------------------------------------------------------------------------------------------------*/

header {
	background: #fff;
}

.header__inner {
	width: 100%;
	max-width: 1000px;
	margin: auto;

	display: flex;
	align-items: center;
}

.header__inner--top {
	padding: 1rem;
	justify-content: space-between;
}

.header__inner--bottom {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	transition: .3s;
	z-index: 999;
}

.header__inner--bottom.active {
	visibility: visible;
	opacity: 1;
}

.header__line {
	width: 100%;
	height: 2px;
	background: var(--light-gray);
}

.header__logo {}

.header__logo-img {
	height: 40px;
}

.hero__cta {}

.header__nav {}

.nav {
	width: 100%;
}

.nav__list {
	display: flex;
	flex-direction: column;
	background: var(--white);
}

.nav__item {
	flex: 0 1 100%;
	border-bottom: 1px solid var(--gray);
}

.nav__link {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 1.2rem 1rem;
	text-align: center;
}

.right-menu {
	display: flex;
	align-items: center;
	grid-area: .5rem;
	border: unset;
	height: 40px;
	padding: 0 1rem;
	background: var(--blue);
	color: var(--white);
	border-radius: 4px;
}

/*メインコンテンツ
----------------------------------------------------------------------------------------------------*/
#main {}

/*  */

.hero {}

.swiper {
	width: 100%;
	max-width: 600px;
}

.swiper-wrapper {}

.swiper-slide {
	position: relative;
}

.swiper-slide::before {
	content: "";
	display: block;
	padding-top: calc(100% * 19/34);
}

.swiper__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.swiper-pagination-bullet {
	background: gray;
	opacity: 1;
	width: 10px;
	height: 10px;
	margin: 0 6px;
	border-radius: 50%;
	transition: background 0.3s;
}

.swiper-pagination-bullet-active {
	background: var(--yellow);
}

.swiper-button-prev {
	display: none;
}

.swiper-button-next {
	display: none;
}

/*  */

.menu {}

.menu__list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
}

.menu__item {
	flex: 0 0 30%;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--gray);
}

.menu__item::before {
	content: "";
	display: block;
	padding-top: 60%;
}

.menu__link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;

	background: var(--white);
}

.menu__figure {
	flex: 0 0 80%;
	overflow: hidden;
}

.menu__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.menu__figcaption {
	flex: 0 0 20%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
}

/*  */

.message {}

.message__media {
	background: var(--white);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column-reverse;
}

.message__detail {
	flex: 0 0 50%;
	padding: 1rem;
}

.message__ttl {
	font-size: 2rem;
	font-weight: 600;
}

.message__ttl span {}

.message__ttl p {
	font-size: 1rem;
	line-height: 1.7;
}

.message__ex,
.message__link {
	margin-top: 1rem;
}

.message__ex p {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.7;
}

.message__figure {
	position: relative;
	flex: 0 0 50%;
}

.message__figure::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.message__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*  */

.company {}

.company__table {
	border-collapse: separate;
	border-spacing: 0;
	background: var(--white);
	width: 100%;
	margin-top: 2rem;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--gray);
}

.company__table-body {}

.company__table-row {}

.company__table-header {
	background: var(--blue);
	color: var(--white);
	font-weight: 500;
	padding: 2rem 1rem;
	width: 30%;
	border-bottom: 1px solid var(--white);
}

.company__table--simple .company__table-header {
	background: var(--dark-gray);
}

.company__table-rowr:last-child .company__table-header {
	border: none;
}

.company__table-data {
	padding: 1rem;
	border-bottom: 1px solid var(--gray);
	line-height: 1.7;
}

.company__table-row:last-child .company__table-data {
	border: none;
}

/*  */

.sponsor {}

.sponsor__list {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.sponsor__item {
	flex: 0 0 calc(20% - 4rem/5);
	background: var(--white);
}

.sponsor__link {
	display: flex;
	padding: 1rem;
	align-items: center;
	justify-content: center;
}

.sponsor__logo {
	display: block;
	height: 60px;
}

/*フッター
----------------------------------------------------------------------------------------------------*/

footer {
	background: var(--blue);
}

.footer__map {}

.footer__content {
	color: var(--white);
}

.footer__logo {}

.footer__menu {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
	margin-top: 1rem;
}

.footer__menu-link {
	flex: 0 0 50%;
	color: var(--white);
	font-weight: bold;
	padding: 1rem;
	font-size: 1rem;
}

.footer__divider {
	width: 100%;
	height: 2px;
	background: var(--white);
}

.footer__concept {
	margin-top: 1rem;
	font-size: .75rem;
	padding-bottom: 80px;
}

.footer__bottom {
	background: var(--black);
	color: var(--white);
	text-align: center;
	font-size: .8rem;
	padding: 1rem;
}



.pagetop {
	position: fixed;
	bottom: 48px;
	/*適宜変更*/
	right: 20px;
	/*適宜変更*/
	z-index: 99;
	/*適宜変更・削除*/

	display: inline-block;
	/*必要があれば適宜変更*/
	background: var(--blue);
	padding: .5rem;
	border-radius: 4px;
}

.pagetop img {
	/*アイコンを置く場合などは適宜サイズ指定など追加。*/
}