@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/*------------------------------------------
  Base Layout
------------------------------------------*/
:root {
	--color-black: #202f55;
	--color-main: #202f55;
	--color-sub01: #DD3D3D;
	--color-sub02: #F1E4A9;
	--background-main: url(../images/common/main_bg.png) no-repeat center / cover;
}

html {
  font-size: 62.5%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
body {
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS PGothic", sans-serif;
  font-size: 1.6em;
  font-size: 16px;
  background: #fff;
  color: #000;
  line-height: 1.5;
}
.mincho {
	font-family: 'Noto Serif JP', serif;
}

* {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: #000;
}
a.blue {
	color: #0000ff;
}
a.blue:not(:hover) {
	text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.wrapper {
	width: 100%;
	height: 100svh;
	position: fixed;
	top: 0;
	left: 0;
	overflow: scroll;
}
/* 背景動画 */
.wrapper .main-bg-video {
	position: fixed;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 177.77777778vh;
	height: 56.25vw;
	min-height: 100%;
	min-width: 100%;
}
/* Main Logo */
.wrapper .main-logo {
	position: fixed;
	left: 5%;
	top: 5%;
}
@media only screen and (max-width: 600px) {
	.wrapper .main-logo {
		display: none;
	}
}

/* テンプレートによって追加・変更 */
.content {
	width: 100%;
	max-width: 390px;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 99;
	box-shadow: 0 0 15px rgba(0, 0, 0, .5);
}
.disp-pc {
  display: block;
}
.disp-sp {
  display: none;
}
@media only screen and (max-width: 600px) {
	.disp-pc {
		display: none;
	}
	.disp-sp {
		display: block;
	}
}

/*------------------------------------------
  Clearfix
------------------------------------------*/
.clearfix {
	*zoom: 1;
}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/*------------------------------------------
  Pager
------------------------------------------*/
.pager {
	padding-top: 40px;
}
.pager .pagination {
	text-align: center;
	line-height: 0;
}
.pager .pagination li {
	margin: 0 2px;
	padding: 0;
	display: inline-block;
	width: 40px;
	height: 40px;
	overflow: hidden;
	text-align: center;
	position: relative;
	border-radius: 2px;
}
.pager .pagination li a {
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	display: table;
	text-decoration: none;
	transition: all 0.3s ease;
	color: var(--color-main);
}
.pager .pagination li a:hover {
	color: #fff;
	background: var(--color-main);
}
.pager .pagination li a span {
	display: table-cell;
	vertical-align: middle;
	transform: none;
}
.pager .pagination li .active {
	color: #fff;
	background: var(--color-main);
}
@media only screen and (max-width: 600px) {
	.pager .pagination li {
		display: none;
	}
	.pager .pagination .pre {
		display: inline-block;
		width: 40%;
		height: 50px;
		text-align: center;
	}
	.pager .pagination .pre a {
		width: 100%;
		text-align: center;
	}
	.pager .pagination .pre span:after {
		content: "　前の10件へ";
	}
	.pager .pagination .next {
		display: inline-block;
		width: 40%;
		height: 50px;
		text-align: center;
	}
	.pager .pagination .next a {
		width: 100%;
		text-align: center;
	}
	.pager .pagination .next span:before {
		content: " 次の10件へ　";
	}
}

/*------------------------------------------
  Parts
------------------------------------------*/
/* News List */
.news-list {
	text-align: left;
	display: flex;
	flex-direction: column;
	border-top: 1px dashed #000;
	font-size: 14px;
}
.news-list .post {
	border-bottom: 1px dashed #000;
	display: block;
	padding: 10px 0;
}
.news-list .date {
	color: var(--color-main);
}
.news-list .title {
	display: block;
	margin-top: 5px;
}

/*------------------------------------------
  Form
------------------------------------------*/
.form-block {
	width: 100%;
	margin: 3rem auto 0;
}
.form-block .required {
	display: inline-block;
	line-height: 1;
	margin-left: 1rem;
	color: #fff;
	background: var(--color-main);
	font-size: 12px;
	font-weight: 400;
	border-radius: 8px;
	padding: 2px 8px 3px;
}
.form-block dl {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 30px;
}
.form-block dd {
	width: 100%;
}
.form-block input[type="text"],
.form-block textarea {
	background: #fff;
	border-radius: 3px;
	width: 100%;
	padding: 8px 10px;
	box-sizing: border-box;
	border: 1px solid #000;
}
.form-block .privacy {
	text-align: center;
	margin: 5rem 0;
}
.form-block .submit {
	margin-top: 5rem;
}
.form-block .submit input {
	width: 142px;
	height: 38px;
	line-height: 38px;
	display: block;
	margin: auto;
	text-align: center;
	border: 1px solid #000;
	border-radius: 60px;
	transition: .3s;
	color: #000;
}
.form-block .submit input:hover {
	background: #000;
	color: #fff;
}

/*------------------------------------------
  Header
------------------------------------------*/
.cmn-header {
	max-width: 390px;
	width: 100%;
	height: 105px;
	position: fixed;
	top: 0;
	z-index: 99;
	transition: .3s;
}
.cmn-header .inner {
	width: 90%;
	margin: auto;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 0 15px;
	position: relative;
	z-index: 99;
}
.cmn-header .inner .g-btn {
	width: 55px;
	height: 100%;
	line-height: 55px;
	background: var(--color-black);
	color: #fff;
	box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
	writing-mode: vertical-rl;
	text-align: center;
	font-size: 18px;
	letter-spacing: 5px;
}
.cmn-header .menu-trigger {
	width: 58px;
	height: 58px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	background: var(--color-sub);
	border-radius: 50%;
	padding: 18px 14px;
	position: relative;
	background: #fff;
	box-shadow: 0 4px 4px rgba(0, 0, 0, .15);
	margin-left: auto;
}
.cmn-header .menu-trigger:hover {
	cursor: pointer;
}
.cmn-header .menu-trigger span {
	width: 100%;
	height: 3px;
	background: var(--color-main);
	border-radius: 5px;
	display: block;
	transition: .3s;
}
.cmn-header .menu-trigger.active span:nth-of-type(1) {
	transform: translateY(9px) rotate(135deg);
}
.cmn-header .menu-trigger.active span:nth-of-type(2) {
	display: none;
}
.cmn-header .menu-trigger.active span:nth-of-type(3) {
	transform: translateY(-9px) rotate(-135deg);
}

/* Modal */
.cmn-header .menu {
	max-width: 390px;
	width: 100%;
	height: 100vh;
	background: var(--background-main);
	position: fixed;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 30px 0;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	padding-top: 150px;
}
.cmn-header .menu.active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
}
.cmn-header .menu .flex {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: flex-start;
	gap: 25px;
}
.cmn-header .menu .flex a {
	display: block;
	font-size: 20px;
	text-align: center;
	writing-mode: vertical-rl;
	letter-spacing: 5px;
}
.cmn-header .menu .info {
	margin-top: auto;
}
.cmn-header .menu .info .text {
	font-size: 14px;
	width: 90%;
	margin: 0 auto 2rem;
	display: flex;
	flex-direction: column;
	gap: 10px 0;
}
.cmn-header .menu iframe {
	display: block;
}

/*------------------------------------------
  Footer
------------------------------------------*/
.cmn-footer {
	position: relative;
}
.cmn-footer .info {
	background: var(--background-main);
	padding: 5rem 0;
	font-size: 14px;
}
.cmn-footer .info .inner {
	width: 90%;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 1.5rem 0;
}
.cmn-footer .info dt {
	margin-bottom: 5px;
}
.cmn-footer iframe {
	display: block;
}
.cmn-footer .copy {
	font-size: 10px;
	text-align: center;
	color: #fff;
	background: var(--color-black);
	padding: 3px 0;
}