@charset "utf-8";
/*==========================================================================

   base width

==========================================================================*/
 body {
	 min-width: var(--container-width); /*幅狭時のスクロールで見切り調整*/
 }
.l-container {
	position: relative;
	width: var(--container-width);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--container-side-space);
	padding-left: var(--container-side-space);
}
/* エディタ用 */
.editor-styles-wrapper .l-container,
.block-editor-block-list__layout .l-container {
    width: 100%;
    max-width: none;
}



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

   base frame

==========================================================================*/
#header {
    position: relative;
    display: flex;
    justify-content: center;
	z-index: 100;
}
#main {
    position: relative;
    background: var(--base-color);
    z-index: 2;
}
.header-normal #main {
}
.header-fixed #main {
}
/* 固定ヘッダー + 余白あり */
.header-fixed.header-has-margin #main {
    margin-top: calc(var(--header-height));
}
#footer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 96px 0;
    background: var(--key-color);
    z-index: 2;
}


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

   header

==========================================================================*/
/* ヘッダー：通常 */
.header-normal #header {
    position: relative;
}
/* ヘッダー：固定 */
.header-fixed #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /*background: var(--base-color);*/
}
.header-logo img,
.header-logo-svg {
    width: var(--logo-width);
    height: auto;
    display: block;
}
/* トップページの最初（白くする） */
.header-transparent .header-logo-svg .st0 {
    fill: #fff !important;
}
/* スクロール後：元の色に戻す */
.header-transparent #header.logo-scrolled .header-logo-svg .st0 {
    fill: #BD1212 !important;
}

.header-inner {
	width: 1100px;
	max-width: calc(100% - 64px);
	margin: 0 32px;
	height: calc(var(--header-height));
}
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* ヘッダー背景色 */
#header {
    background-color: var(--header-bg-color, transparent);
    transition: background-color 0.3s ease;
}

/* 透過設定 */
.header-transparent #header {
    background-color: transparent;
}

.header-transparent #header.is-scrolled {
    background-color: var(--header-bg-color);
}



.header-option {
    display: flex;
    gap: 32px;
    align-items: center;
    padding: 0 16px;
}
/* ハンバーガーボタン */
.header-gnav-btn button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.header-gnav-btn button:hover {
    opacity: 0.8;
}

/* グローバルナビ */
.gnav {
    position: fixed;
    top: 100px;
    right: -0;
    width: 36%;
    max-width: 36%;
    height: 100vh;
	border-radius: 104px 0px 0px 0px;
    background: var(--key-color);
    z-index: 9999;
    transition: .3s ease;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
}

.gnav.is-open {
    top: 0;
    opacity: 1;
    pointer-events: auto;
}

/* 背景オーバーレイ */
body.gnav-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    z-index: 100;
    animation: fadeIn 0.3s;
    pointer-events: none; /* ← この行を追加 */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* スクロール禁止 */
body.gnav-open {
	position: relative;
    /*overflow: hidden;*/
}

.gnav-header-option {
	display: flex;
    align-content: center;
    align-items: center;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 24px;
    height: 100px;
    justify-content: flex-end;
    margin: 0px 32px;
    padding: 0px;
    width: 1280px;
    --gap-h-aaf5034d-ae80-453d-8b5c-298d6722c906: 24px;
    --gap-v-aaf5034d-ae80-453d-8b5c-298d6722c906: 0px;
    --gap-uuid: aaf5034d-ae80-453d-8b5c-298d6722c906;
    max-width: calc(100% - 64px);
}
.header-cta {
	padding: 12px;
}
.gnav-cta {
    padding: 12px;
}
.gnav-open-icon {
    width: 24px;
    height: 24px;
    color: var(--key-color);
}
.gnav-close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: none;
    border-radius: 50%;
    border: 1px solid #fff;
}
.gnav-close:hover {
	cursor: pointer;
}
.gnav-close-icon {
    font-size: 32px;
    color: #fff;
}




.gnav-menu {
    align-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.0);
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 32px;
    height: auto;
    justify-content: center;
    margin: 0px 32px;
    padding: 40px 0 32px;
    width: auto;
    max-width: calc(100% - 64px);
}

.gnav-menu-list {
    align-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0px;
}
.gnav-menu-item {
    font-size: 20px;
    font-weight: 700;
    height: auto;
    letter-spacing: 0.02em;
    line-height: 1.5;
    text-align: center;
}
.gnav-menu-item a {
    display: block;
    align-content: center;
    align-items: center;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 12px 24px;
    width: 100%;
    max-width: 100%;
    color: #fff;
}



.header-icons-list {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.header-icons-item {
    width: 40px;
    height: 40px;
}
.header-icons-item a {
    display: flex;
    justify-content: center;
	align-items: center;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 50%;
	overflow: hidden;
	transition: .3s;
    color: #fff;
	
}
.header-icons-item a:hover {
	opacity: .75;
}


.header-icons-icon {
	width: 18px;
	height: 18px;
}


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

   footer

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

.footer-row {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 1000px;
    margin: 0 40px;
}

.footer-logo {
    width: 200px;
    margin-bottom: 24px;
}

.footer-menu-list {
    display: flex;
}
.footer-menu-item {
    font-size: 20px;
    font-weight: 700;
}
.footer-menu-item:nth-child(1) a {
    padding-left: 0;
}
.footer-menu-item a {
    display: block;
    padding: 12px 24px;
    color: #fff;
}


.footer-copyright {
    display: block;
    width: 1000px;
    margin: 0 40px;
    font-size: 12px;
    font-weight: 400;
    height: auto;
    letter-spacing: 0.05em;
    color: #fff;
}

.footer-icons-list {
    display: flex;
    gap: 24px;
}

.footer-icons-item a {
    color: #fff;
}

.footer-icons-icon {
    width: 24px;
    height: 24px;
}







@media screen and (max-width: 768px) {
	.header-option {
		padding: 0;
	}
	.header-cta.m-btn01 {
		display: none;
	}
	.gnav {
		width: 86%;
		max-width: 86%;
	}






	#footer {
		text-align: center;
	}
	.footer-logo {
		margin-right: auto;
		margin-left: auto;
	}
	.footer-menu-list {
		justify-content: center;
	}
	.footer-menu-item {
		font-size: 15px;
	}
	.footer-icons-list {
		justify-content: center;
		gap: 56px;
	}
}