@charset "utf-8";

/*===========================================================
ヘッダー
===========================================================*/

.header-logo {
	display: none;
}

.header.is-active .header-logo {
	display: block;
	vertical-align: top;
}

/*===========================================================
カバー
===========================================================*/

.cover {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 800 / 900;
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 999;
}

.cover-area {
	width: 100%;
	position: relative;
}

.cover-area::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .4);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 1;
}

.cover-logo {
    max-width: 400px;
    width: 50%;
    position: absolute;
	top: 24%;
    right: 0;
    left: 0;
    margin: auto;
	z-index: 2;
	filter: drop-shadow(0 0 10px rgba(0, 0, 0, .5));
}

.cover-illust-box {
	margin: 0 auto;
	max-width: 1920px;
	width: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 2;
}

/*===========================================================
top01
===========================================================*/

.top01-bg-img {
	height: 300px;
}

.top01-bg-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.top01-title-container {
    position: absolute;
    top: -34%;
    z-index: 1;
}

.top01-bg-img {
	position: relative;
	clip-path: inset(0);
	z-index: 0;
	mask-image: linear-gradient(#000, #000), url(/system_panel/uploads/images/mask01.png);
	-webkit-mask-image: linear-gradient(#000, #000), url(/system_panel/uploads/images/mask01.png);
	mask-position: center top, center bottom;
	-webkit-mask-position: center top, center bottom;
	mask-size: 100% calc(100% - 15vw), 100vw auto;
	-webkit-mask-size: 100% calc(100% - 15vw), 100vw auto;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.top01-bg-img::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(62, 39, 39, .7);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 1;
}

.top01-line-box {
    max-width: 1920px;
    width: 100%;
    margin: -13.5% auto 0;
    position: relative;
    z-index: 2;
}

.top01-title-container {
	display: inline-flex;
	flex-direction: row-reverse;
}

.top01-title-box02 {
	margin: 20% 0 0;
}

.top01-title {
    line-height: 1.5em;
	letter-spacing: 0.13em;
}

.top01-text-container {
	margin: 40px 0 0;
}

.top01-title {
	margin: 0;
}

.top01-text {
	display: inline-block;
	margin: 0;
    line-height: 2.45em;
    letter-spacing: 0.3em;
	text-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

/*===========================================================
top02
===========================================================*/

.top02-title-box s {
    text-decoration: none;
}

.top02-title-box s span {
    display: inline-block;
    color: var(--tertiary);
    /* aspect-ratio: 1 / 1; */
    padding: 5px;
    line-height: 1.25em;
	letter-spacing: 0.25em;
    text-align: center;
}

.top02-title-box01 s span {
	line-height: 1.25em;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
}

.top02-title-box02 s span {
	line-height: 1.25em;
    letter-spacing: 0.13em;
    text-indent: 0.13em;
}

/* 1. 全てのspanのデフォルト、または1番目を secondary に指定 */
.top02-title-box s span:first-of-type {
    background: var(--secondary);
}

/* 2. 2番目から交互に primary を指定 */
/* 2n（2, 4, 6...番目）を primary に */
.top02-title-box s span:nth-of-type(2n) {
	color: var(--base-font-color);
    background: var(--tertiary);
}

/* 3. 3番目から交互に tertiary を指定 */
/* 2n+1（3, 5, 7...番目）を tertiary に */
.top02-title-box s span:nth-of-type(2n+1):not(:first-of-type) {
    background: var(--primary);
}

.top02-btn-area {
	gap: 20px 50px;
}

/*===========================================================
top03
===========================================================*/

.top03-frame {
    margin: 40px;
	z-index: 1;
}

.top03-bg-img {
	height: 300px;
}

.top03-bg-img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.top03-title-box {
	padding: 0 15px;
    position: absolute;
    top: 22%;
	right: 0;
	left: 0;
    z-index: 1;
}

.top03-bg-img {
	position: relative;
	clip-path: inset(0);
	z-index: 0;
	mask-image: linear-gradient(#000, #000), url(/system_panel/uploads/images/mask02.png);
	-webkit-mask-image: linear-gradient(#000, #000), url(/system_panel/uploads/images/mask02.png);
	mask-position: center top, center bottom;
	-webkit-mask-position: center top;
	mask-size: 100% calc(100% - 100%), 100vw 100%;
	-webkit-mask-size: 100% calc(100% - 100%), 100vw 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.top03-bg-img::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(62, 39, 39, .5);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 1;
}

.top03-line-box {
    margin: 0 auto -13% !important;
    position: relative;
    z-index: 2;
}

/*===========================================================
バナー
===========================================================*/

.top03-banner {
    padding: 40px 15px;
    max-width: 1320px;
    width: 100%;
    display: block;
    position: relative;
    z-index: 5;
	background-image: url(/system_panel/uploads/images/top_banner_bg.jpg);
    background-attachment: scroll;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
	transition: all .3s;
}

.top03-banner::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-image: url(/system_panel/uploads/images/top_banner_border.svg);
    border-image-slice: 100;
    border-image-width: 100px;
    border-image-outset: 0;
    border-image-repeat: round;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9;
}

.top03-banner:hover {
	filter: brightness(1.2);
}

.top-banner-illust01 {
	max-width: 408px;
    width: 30.9%;
    position: absolute;
    top: 0;
    right: 0;
    margin: auto;
}

.top-banner-illust02 {
    max-width: 132px;
    width: 10%;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: auto;
}

.top-banner-container {
    max-width: 968px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.top-banner-illust03 {
    max-width: 125px;
    width: 12.9%;
    position: absolute;
    top: 0;
    left: 0;
}

.top-banner-area {
    max-width: 714px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.top-banner-illust04 {
    max-width: 52px;
    width: 10%;
    position: absolute;
    top: 0;
    right: 0;
}

.top-banner-illust05 {
	max-width: 364px;
    width: 27.6%;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
}

.top-banner-box {
    max-width: 603px;
    width: 100%;
    margin: 20px auto 0;
}

.top-banner-text-box {
    margin: 20px 0;
}

/*===========================================================
top04
===========================================================*/

.top04-logo-box {
    max-width: 240px;
    width: 46.5%;
    margin: 0 auto;
}

.top04-address-area {
    margin: 24px 0 0;
}

.top04-address-row {
    display: flex;
    flex-direction: column;
    padding: 20px 0 15px;
    border-bottom: 1px solid var(--base-font-color)
}

.top04-address-row:first-child {
    padding: 0 0 15px;
}

.top04-btn-area {
	gap: 20px 40px;
}

/*===========================================================
top05
===========================================================*/

.top05::before {
	content: "";
	display: block;
	width: 100%;
	height: 78.7%;
	background: var(--secondary);
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

/*===========================================================
top06
===========================================================*/

.top06-frame {
	background-image: url(/system_panel/uploads/images/bg02.png);
    background-attachment: scroll;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
	transition: all .3s;
}

.top06-title-box01 s {
    text-decoration: none;
}

.top06-title-box01 s span {
    display: inline-block;
    color: var(--tertiary);
    /* aspect-ratio: 1 / 1; */
	padding: 5px 2px 10px 14px;
    line-height: 1.2em;
    letter-spacing: 0.15em;
    text-align: center;
    text-indent: 0.02em;
}

/* 1. 全てのspanのデフォルト、または1番目を secondary に指定 */
.top06-title-box01 s span:first-of-type {
    background: var(--primary);
}

/* 2. 2番目から交互に primary を指定 */
/* 2n（2, 4, 6...番目）を primary に */
.top06-title-box01 s span:nth-of-type(2n) {
    background: var(--secondary);
}

/* 3. 3番目から交互に tertiary を指定 */
/* 2n+1（3, 5, 7...番目）を tertiary に */
.top06-title-box01 s span:nth-of-type(2n+1):not(:first-of-type) {
    background: var(--primary);
}

.top06-title-box01 {
    padding: 0 0 0 7%;
}

.top06-title-box02 {
	padding: 0 0 0 4%;
}

.top06-text-box {
	padding: 0 0 0 4%;
}

.top06-btn-area {
	padding: 0 0 0 4%;
}

.top06-title {
	line-height: 0;
}

/*===========================================================
top07
===========================================================*/

.top07-title {
    display: inline;
    position: relative;
}

.top07-title::before {
    content: "";
    position: absolute;
    top: 65%;
    left: -15%;;
    z-index: -1;
    width: 129.9%;
    max-width: 325px;
    aspect-ratio: 325 / 72;
    background: url(/system_panel/uploads/images/title_decoration02.png) no-repeat center / contain;
}

.top07-left {
	display: contents;
}

.top07-title-box {
	order: 1;
}

.top-news-area {
	order: 2;
}

.top07-btn-area {
	order: 3;
}

/*===========================================================
お知らせ
===========================================================*/

img + .no-img {
    display: none;
}

.top-news-link {
	padding: 13px 40px 13px 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-bottom: 1px solid var(--primary);
	position: relative;
	transition: all .3s;
}

.top-news-item:first-child .top-news-link {
	padding: 0 40px 13px 0;
}

/* .top-news-link:hover {
	opacity: 0.7;
} */

.top-news-link::before {
	content: "";
	display: block;
    width: 26px;
    height: 22px;
    background: url(/system_panel/uploads/images/news_arrow.svg) center / contain no-repeat; 
	position: absolute;
	bottom: 14px;
	right: 0;
	margin: auto;
	transform: translateX(0);
    transform-origin: center center; 
	transition: all .3s;
}

.top-news-link:hover::before {
	transform: translateX(10px);
}

.top-news-cate-flex {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
}

.top-news-cate {
	flex: 1;
    padding: 3px 10px 2px;
    display: block;
    width: 100%;
    max-width: max-content;
	min-width: 102px;
    font-size: 15px;
    font-weight: 700;
	letter-spacing: 0.05em;
    color: var(--tertiary);
    text-align: center;
	background: var(--primary);
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-news-date {
	display: block;
	font-size: clamp(14px, 13.515px + 0.129vw, 16px);
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--primary);
}

.top-news-title {
	margin: 16px 0 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--primary);
	flex: 1;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:414px) {


/*===========================================================

===========================================================*/

} /* min-width: 414px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:544px) {


/*===========================================================
バナー
===========================================================*/

.top-banner-text-box {
	text-align: center;
}

/*===========================================================
top01
===========================================================*/

.top01-bg-img {
	height: 400px;
}

.top01-title-container {
    top: -36%;
}

/*===========================================================
top03
===========================================================*/

.top03-bg-img {
	height: 400px;
}

.top03-title-box {
    top: 25%;
}

/*===========================================================
top04
===========================================================*/

.top04-address-row {
    flex-direction: row;
    align-items: flex-start;
}

.top04-address-th {
    min-width: 80px;
    padding: 0 10px 0 3%;
}

} /* min-width: 544px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width: 768px) {

/*===========================================================
カバー
===========================================================*/

.cover {
	aspect-ratio: 1920 / 960;
}

.cover-logo {
    width: 20.9%;
	top: 25.5%;
}

/*===========================================================
top01
===========================================================*/

.top01-bg-img {
	height: 800px;
}

.top01-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.top01-title-container {
    position: relative;
    top: 0;
}

.top01-text {
	color: var(--white);
}

.top01-text-container {
	margin: 5% 0 0;
}

/*===========================================================
top02
===========================================================*/

.top02 {
	margin: -13.4% 0 0 !important;
}

.top02-title {
	font-size: clamp(30px, 3.333px + 3.472vw, 70px);
}

/*===========================================================
top03
===========================================================*/

.top03-frame {
	margin: 0;
    position: absolute;
    bottom: 11%;
    right: 0;
    left: 0;
    margin: auto;
}

.top03-banner {
	padding: 56px 15px 65px;;
}

.top03-bg-img {
	height: 1230px;
}

.top03-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.top03-title-box {
	padding: 0;
    position: relative;
    top: 0;
}

.top03-text {
	color: var(--white);
}

/*===========================================================
top04
===========================================================*/

.top04-address-row {
    flex-direction: column;
}

.top04-address-th {
    min-width: 100%;
    padding: 0;
}

/*===========================================================
top07
===========================================================*/

.top07-left {
	display: block;
}

.top07-title-box {
	margin: 0 7% 0 0;
	order: unset;
}

.top-news-area {
	order: unset;
}

.top07-btn-area {
	order: unset;
}

} /* min-width: 768px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width: 1024px) {

/*===========================================================
カバー
===========================================================*/

.cover-logo {
    width: 20.9%;
	top: 18.5%;
}

/*===========================================================
top01
===========================================================*/

.top01-bg-img {
	height: 900px;
}

.top01-text-container {
	margin: 10% 0 0;
}

/*===========================================================
top03
===========================================================*/


/*===========================================================
top04
===========================================================*/

.top04-address-row {
    flex-direction: row;
}

.top04-address-th {
    min-width: 137px;
    padding: 0 10px 0 6%;
}

/*===========================================================
top06
===========================================================*/

.top06-title-box02 {
	margin: 6px 0 0;
	padding: 0 0 0 5%;
}

.top06-text-box {
	padding: 0 0 0 5%;
}

.top06-btn-area {
	padding: 0 0 0 5%;
}

/*===========================================================
お知らせ
===========================================================*/

.top-news-link {
	padding: 40px 40px 13px 0;
}

.top-news-item:first-child .top-news-link {
	padding: 0 40px 13px 0;
}

.top-news-cate-flex {
	gap: 20px 25px;
}

.top-news-cate {
    padding: 3px 20px 2px;
}

} /* min-width: 1024px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1200px) {


/*===========================================================

===========================================================*/



} /* min-width: 1200px ここまで */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1300px) {

/*===========================================================
top01
===========================================================*/

.top01-bg-img {
	height: 1000px;
}

} /* min-width: 1300px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1400px) {


/*===========================================================
top01
===========================================================*/

.top01-bg-img {
	height: 1150px;
}

.top01-text-container {
	margin: 20% 0 0;
}

} /* min-width: 1400px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1500px) {




} /* min-width: 1500px ここまで */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */