/*
Theme Name: Hope Center Theme
Theme URI: 
Author: aracode
Author URI: 
Description: 希望創発センターのための完全オリジナルテーマ
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hope-theme
*/

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-primary);
    background-color: #fff;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
img { width: 100%;height: 100%;object-fit: cover; }

.wire {
    border: solid 1px #000;
}
.width {
    width: 100vw;
    padding: 0 var(--section-spacing-width-lg);
}
.section.primary { background-color: var(--bg-white); }
.section.secondary { background-color: var(--bg-yellow); }
.section {
    padding: var(--section-space-top) var(--section-spacing-width-lg) var(--section-space-bottom);
    border-radius: var(--section-radius) var(--section-radius) 0 0;
    margin-top: -50px;
    overflow: hidden;
}
.service-page .section {
    padding: var(--xl2) var(--section-spacing-width-lg) var(--xl2);
    border-radius: 0;
    margin: 0;
}
.section:not(.service-page) {
    position: relative;
    z-index: 0;
}
.inner {
    max-width: 1400px;
    margin: 0 auto;
}
.block {
    position: relative;
    margin-bottom: 80px;
}
h1 {
    font-size: var(--fz-xl);
    line-height: 1.4;
    font-weight: 500;
    text-align: left;
    margin-bottom: 40px;
}
h2 {
    font-size: var(--fz-lg);
    line-height: 1.4;
    font-weight: bold;
    text-align: left;
    margin-bottom: 30px;
}
h3 {
    font-size: var(--fz-md);
    line-height: 1.5;
    font-weight: bold;
    text-align: left;
    margin-bottom: 30px;
}
p {
    font-size: var(--fz-sm);
    margin-bottom: 20px;
    line-height: 1.8;
    font-weight: normal;
    text-align: left;
    margin: 0 0 20px 5px;
}
p.lead {
    font-size: var(--fz-sm-lead);
    line-height: 1.875;
    font-weight: normal;
    text-align: left;
    margin: 0 0 40px 10px;
}
.top p.lead {
	font-size: 18px;
	line-height: 32px;
    margin: 0 0 60px;
}
p.small {
    font-size: var(--fz-xs);
    line-height: 1.8;
    font-weight: normal;
    text-align: left;
    margin: 0 0 20px 5px;
}
span.fwn { font-weight: normal; }
.flex {
    display: flex;
}
.accent {
	color: var(--service-brand-color);
}
.fz30 {
	font-size: 30px;
}
@media screen and (max-width: 768px) {
    .pc-only {
        display: none !important;
    }

    .section {
        border-radius: 30px 30px 0 0;
        margin-top: -30px;
    }
}
@media screen and (min-width: 769px) {
    .sp-only {
        display: none !important;
    }
	.normal-link {
		position: relative;
	}
	.normal-link::after {
		position: absolute;
		content: '';
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: var(--text-secondary);
		opacity: 0;
		transition: opacity 0.3s;
	}
	.normal-link:hover::after {
		opacity: 1;
	}
}
.shake-up {
    animation: shake-up 3s infinite ease-in-out;
}
@keyframes shake-up {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
}

.breadcrumbs-wrap {
    padding: var(--md) 0 15px !important;
    border-radius: 0 !important;
    margin: 0;
    border-top: solid 2px;
    border-color: var(--service-brand-color);
}
.breadcrumbs-wrap.primary {
    background: var(--bg-white);
}
.breadcrumbs-wrap.secondary {
    background: var(--bg-yellow);
}
.general .breadcrumbs-wrap {
    border: none;
}
.breadcrumbs-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
	overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.breadcrumbs-inner::-webkit-scrollbar {
    display: none;
}
.breadcrumbs-inner > span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--bread-span-height);
    margin-right: var(--xs);
    font-size: var(--bread-font-size);
    font-weight: 300;
	flex-shrink: 0; 
    white-space: nowrap;
}
.breadcrumbs-inner > span:first-child {
	padding-left: var(--section-spacing-width-lg);
}
.breadcrumbs-inner > span:last-child {
	padding-right: var(--section-spacing-width-lg);
}

.breadcrumbs-inner a,
.breadcrumbs-inner .current-item {
    text-decoration: none;
    line-height: 1;
    transition: background-color 0.3s;
}

.breadcrumbs-inner .home {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--bread-home-height);
    height: var(--bread-home-height);
    background-color: var(--teal);
    border-radius: 50% !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.breadcrumbs .home-icon {
    display: inline-block;
    width: var(--bread-home-icon-height);
    height: var(--bread-home-icon-height);
    background-color: var(--bg-white) !important;
    vertical-align: middle;
    margin: 0 !important;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5703 6.959L15.5692 6.95799L9.04225 0.432007C8.76325 0.153 8.39425 0 8.00025 0C7.60725 0 7.23725 0.153 6.95825 0.432007L0.434247 6.955L0.428251 6.961C-0.143748 7.536 -0.142748 8.468 0.431249 9.041C0.692251 9.30299 1.03825 9.455 1.40825 9.47099C1.42325 9.472 1.43825 9.47301 1.45425 9.47301H1.71425V14.276C1.71425 15.227 2.48725 16 3.43825 16H4.61825H4.73625C5.68725 16 6.46025 15.227 6.46025 14.276V13.862V11.766C6.46025 11.332 6.81325 10.979 7.24725 10.979H8.75325C9.18725 10.979 9.54025 11.332 9.54025 11.766V13.862V14.276C9.54025 15.227 10.3133 16 11.2643 16H11.8102H12.5622C13.5132 16 14.2862 15.227 14.2862 14.276V9.47301H14.5282C14.9213 9.47301 15.2912 9.32001 15.5692 9.041C16.1433 8.468 16.1433 7.534 15.5703 6.959ZM14.9063 8.379C14.8052 8.48 14.6713 8.536 14.5282 8.536H13.8182C13.5593 8.536 13.3492 8.745 13.3492 9.004V14.276C13.3492 14.71 12.9963 15.062 12.5622 15.062H12.0653H11.2643C10.8303 15.062 10.4772 14.71 10.4772 14.276V13.862V12.275V11.766C10.4772 10.815 9.70425 10.042 8.75325 10.042H7.24725C6.29625 10.042 5.52325 10.815 5.52325 11.766V13.862V14.276C5.52325 14.71 5.17025 15.062 4.73625 15.062H3.93525H3.43825C3.00425 15.062 2.65125 14.71 2.65125 14.276V9.004C2.65125 8.745 2.44125 8.536 2.18225 8.536H1.48525L1.46325 8.535C1.32325 8.532 1.19225 8.47701 1.09425 8.379C0.885251 8.17 0.885251 7.83 1.09425 7.621L7.62225 1.09399C7.72325 0.992996 7.85725 0.936996 8.00025 0.936996C8.14325 0.936996 8.27725 0.992996 8.37925 1.09399L14.9043 7.619L14.9072 7.62199C15.1153 7.83099 15.1153 8.17 14.9063 8.379Z" fill="white"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5703 6.959L15.5692 6.95799L9.04225 0.432007C8.76325 0.153 8.39425 0 8.00025 0C7.60725 0 7.23725 0.153 6.95825 0.432007L0.434247 6.955L0.428251 6.961C-0.143748 7.536 -0.142748 8.468 0.431249 9.041C0.692251 9.30299 1.03825 9.455 1.40825 9.47099C1.42325 9.472 1.43825 9.47301 1.45425 9.47301H1.71425V14.276C1.71425 15.227 2.48725 16 3.43825 16H4.61825H4.73625C5.68725 16 6.46025 15.227 6.46025 14.276V13.862V11.766C6.46025 11.332 6.81325 10.979 7.24725 10.979H8.75325C9.18725 10.979 9.54025 11.332 9.54025 11.766V13.862V14.276C9.54025 15.227 10.3133 16 11.2643 16H11.8102H12.5622C13.5132 16 14.2862 15.227 14.2862 14.276V9.47301H14.5282C14.9213 9.47301 15.2912 9.32001 15.5692 9.041C16.1433 8.468 16.1433 7.534 15.5703 6.959ZM14.9063 8.379C14.8052 8.48 14.6713 8.536 14.5282 8.536H13.8182C13.5593 8.536 13.3492 8.745 13.3492 9.004V14.276C13.3492 14.71 12.9963 15.062 12.5622 15.062H12.0653H11.2643C10.8303 15.062 10.4772 14.71 10.4772 14.276V13.862V12.275V11.766C10.4772 10.815 9.70425 10.042 8.75325 10.042H7.24725C6.29625 10.042 5.52325 10.815 5.52325 11.766V13.862V14.276C5.52325 14.71 5.17025 15.062 4.73625 15.062H3.93525H3.43825C3.00425 15.062 2.65125 14.71 2.65125 14.276V9.004C2.65125 8.745 2.44125 8.536 2.18225 8.536H1.48525L1.46325 8.535C1.32325 8.532 1.19225 8.47701 1.09425 8.379C0.885251 8.17 0.885251 7.83 1.09425 7.621L7.62225 1.09399C7.72325 0.992996 7.85725 0.936996 8.00025 0.936996C8.14325 0.936996 8.27725 0.992996 8.37925 1.09399L14.9043 7.619L14.9072 7.62199C15.1153 7.83099 15.1153 8.17 14.9063 8.379Z" fill="white"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.breadcrumbs-inner .current-item {
    display: inline-block;
    background-color: var(--gray) !important;
    color: var(--bg-white) !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
}

.single .breadcrumbs-inner a,
.category .breadcrumbs-inner a,
.archive .breadcrumbs-inner a {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--text-primary) !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
}

.single .breadcrumbs-inner a.home,
.category .breadcrumbs-inner a.home,
.archive .breadcrumbs-inner a.home {
    background-color: var(--teal) !important;
    padding: 8px !important;
    border-radius: 50% !important;
}

.breadcrumbs-inner a {
    display: inline-block;
    background-color: var(--text-primary) !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
}

.breadcrumbs-inner a.home {
    background-color: var(--teal) !important;
    padding: 8px 8px !important;
    border-radius: 50% !important;
}

.breadcrumbs a:hover:not(.home) {
    background-color: #333 !important;
}
.breadcrumbs-inner .br-sep {
    display: none !important;
}

.hover-slide-black {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease;
}
.hover-slide-black::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--text-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}
.recruit-buttons .hover-slide-black::before {
    background-color: var(--text-secondary);
}
.hover-slide-black:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}
.hover-slide-black:hover {
    color: #fff;
}
.circle-arrow-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px; 
    text-decoration: none;
    cursor: pointer;
}

.circle-icon {
    position: relative;
    display: flex;
    justify-content: center; 
    align-items: center;
    width: 16px; 
    height: 16px; 
    border-radius: 50%;
    background-color: var(--teal);
    position: relative;
    overflow: hidden; 
    z-index: 1;
}
.service-page .circle-icon {
    background-color: var(--service-brand-color);
}
.circle-icon::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #000;
    transform: scaleX(0); 
    transform-origin: right; 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    z-index: -1;
}
.circle-icon img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 0.8em; 
    height: auto;
    transition: filter 0.3s ease;
}
.circle-arrow-btn:hover .circle-icon::before {
    transform: scaleX(1);
    transform-origin: left;
}
.circle-btn-arrow {
    width: 16px; 
    height: auto;
    transition: filter 0.3s ease;
    z-index: 2; 
}
.circle-arrow-btn:hover .circle-btn-arrow {
    filter: brightness(0) invert(1);
}
.circle-btn-text {
    color: var(--text-primary);
    font-weight: bold;
    font-size: var(--fz-sm);
}
.service-page .circle-btn-text {
    color: var(--service-brand-color);
}

.top .mv-section {
    height: calc(100vh - var(--header-height));
}
.mv-section {
    position: relative;
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 100px;
}
.mv-section.primary { background-color: var(--bg-white); }
.mv-section.secondary { background-color: var(--bg-yellow); }

.mv-content {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}
.mv-title {font-size: clamp(3.125rem, 1.458rem + 8.33vw, 8.75rem);
    line-height: 1.2;
    margin: 0;
    margin-left: var(--xl);
}

.scroll-indicator {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scroll-indicator span {
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 15px;
}
.scroll-line {
    width: 2px;
    height: 80px;
    background-color: var(--text-primary);
    animation: scrollDown 2s infinite;
    margin-bottom: 20px;
}
.mv-illust {
    margin-top: auto;
    margin-right: var(--xl);
}
.mv-illust img {
    width: var(--top-mv-illust-width);
    height: auto;
}
.mv-illust.text {
    background-color: #fff;
    border: 2px dashed #ccc;
    border-radius: 12px;
}

.top section.about p.lead {
	width: 48%;
}
@keyframes scrollDown {
    0% { transform: scale(1, 0); transform-origin: 0 0; }
    50% { transform: scale(1, 1); transform-origin: 0 0; }
    51% { transform: scale(1, 1); transform-origin: 0 100%; }
    100% { transform: scale(1, 0); transform-origin: 0 100%; }
}
@media screen and (max-width: 768px) {
    .mv-content {
        flex-direction: column;
    }
    .mv-illust {
        margin: 0;
        margin-left: auto;
    }
	.top section.about p.lead {
		width: 100%;
		font-weight: 600;
	}
	.single .mv-section,
	.archive-page .mv-section,
	.download .mv-section {
		padding-top: 50px !important;
		padding-bottom: 90px !important;
	}
	.single .mv-section .mv-content-front,
	.archive-page .mv-section .mv-content-front,
	.download .mv-section .mv-content-front {
		margin: 0 !important;
		padding: 0 !important;
	}
	.single .mv-section h1,
	.archive-page .mv-section h1,
	.download .mv-section h1 {
		margin: 0 !important;
	}
}

.about-illust {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
#illust-2.about-illust img {
    max-width: 550px;
    width: 40vw;
    height: auto;
}
#illust-3.about-illust img {
    max-width: 620px;
    width: 44vw;
    height: auto;
}
.top .pamphlet-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--xl);
    margin-top: var(--space-60);
}
.lab .pamphlet-wrap {
	display: flex;
	align-items: center;
    gap: var(--xl);
	margin-top: var(--space-60);
}
.lab .pamphlet-wrap img {
	width: 120px;
	height: auto;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}
.lab .pamphlet-wrap a {
	text-decoration: underline;
}

.lab .pamphlet-wrap a:hover {
	opacity: 0.7;
}
@media screen and (max-width: 768px) {
	.lab .pamphlet-wrap {
		flex-direction: column;
	}
	.lab .pamphlet-wrap img {
		width: 100%;
	}
}

.top .pamphlet-wrap img {
    width: clamp(8.75rem, 7.25rem + 6vw, 12.5rem);
    height: auto;
}
.top .pamphlet-wrap a {
    font-size: var(--fz-sm);
    text-decoration: underline;
}
.top .section.service .service-wrap {
    display: flex;
    flex-direction: column;
}
.top .section.service .service-list {
    display: flex;
    gap: 110px;
}
.top .section.service .service-item .service-illust {
    display: flex;
    gap: var(--lg);
}
.top .section.service .service-item .service-illust .illust-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--top-service-illust-circle-width);
    height: var(--top-service-illust-circle-width);
    padding: var(--xl);
    border-radius: 50%;
    background: var(--bg-white);
    margin-left: -100px;
}
.initiatives .section.service .service-item .service-illust .illust-circle {
    margin-left: 0;
}
.top .section.service .service-item.lab .service-illust .illust-circle img,
.initiatives .section.service .service-item.lab .illust-circle img {
    width: 55%;
}
.top .section.service .service-item.sb .service-illust .illust-circle img,
.initiatives .section.service .service-item.sb .illust-circle img {
    width: 60%;
}
.top .section.service .service-item.otoyo .service-illust .illust-circle img,
.initiatives .section.service .service-item.otoyo .illust-circle img {
    width: 85%;
}
.top .section.service .service-item.sip .service-illust .illust-circle img,
.initiatives .section.service .service-item.sip .illust-circle img {
    width: 70%;
}
.top .section.service .service-item .service-illust .illust-circle img,
.initiatives .section.service .service-item .illust-circle img {
    height: auto;
}
.top .section.service .service-item .service-illust .number-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    writing-mode: vertical-rl;
    border-radius: 30px;
    font-size: var(--fz-sm);
    background: var(--gray-dark);
    color: var(--bg-white);
    height: fit-content;
    padding: 1em .5em;
    margin-top: 10px;
}

.top .section.service .service-item .service-info {
    position: relative;
    z-index: 2;
    width: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    gap: var(--lg);
    padding-left: var(--xl);
    border-left: solid 2px var(--text-primary);
    margin-top: -50px;
}
.top .section.service .service-item .service-info .logo img {
    width: auto;
    height: 100px;
}
.top .section.service .service-item .service-info p {
    margin-bottom: 0;
}
.top .section.service .service-item .service-info .custom-btn {
    font-size: clamp(0.875rem, 0.835rem + 0.19vw, 1rem);
    padding: .4em 1em .4em 2em;
    background: var(--teal);
}
.top .section.news .inner {
    display: flex;
    justify-content: space-between;
}
.top .section.news .news-heading h2 {
    font-size: var(--fz-top-page-h2);
    font-weight: 400;
    margin-bottom: var(--md);
}
.top .section.news .news-heading .custom-btn {
    font-size: var(--fz-sm);
    padding: .5em 1em .5em 2em;
}
.top .section.news .news-list-container {
    width: 66%;
}

.general .mv-content-front {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 100px auto 0;
}
.general .mv-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.general .mv-section h1 {
    font-size: var(--fz-xl);
}
.general .mv-section .illust {
    width: 50%;
    max-width: 540px;
}
.general .mv-section .illust img {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 768px) {
	.top .section.news .news-list-container {
		width: 100%;
	}
    .general .mv-content-front {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 0;
    }
    .general .mv-section h1 {
        margin-top: 110px;
        margin-bottom: 30px;
    }
    .general .mv-section .illust {
        width: 100%;
    }
}
.about-page h2,
.initiatives h2 {
    font-weight: bold;
    font-size: clamp(1.625rem, 1.525rem + 0.4vw, 1.875rem);
}
.about-page .section:not(.mv-section, .about),
.initiatives .section:not(.mv-section, .about) {
    position: relative;
    border-radius: 0 var(--section-radius) 0 0;
    overflow: visible;
}
.about-page .section:not(.mv-section, .about)::before,
.initiatives .section:not(.mv-section, .about)::before {
    position: absolute;
    top: 1px;
    left: var(--tab-left);
    transform: translateY(-100%);
    padding: var(--xs) var(--tab-pl);
    font-weight: bold;
    color: var(--text-primary);
    border-radius: 16px 16px 0 0;
    font-size: var(--tab-fz);
    letter-spacing: .1em;
}
.about-page .section:not(.mv-section, .about).primary::before,
.initiatives .section:not(.mv-section, .about).primary::before {
    background: var(--bg-white);
}
.about-page .section:not(.mv-section, .about).secondary::before,
.initiatives .section:not(.mv-section, .about).secondary::before {
    background: var(--bg-yellow);
}

.about-page .section.about .inner {
    max-width: 660px;
    margin: 0 auto 40px;
    line-height: 2;
}

.about-page .section.message .flex {
    justify-content: space-between;
}
.about-page .section.message .flex .message-info {
    width: 36%;
}
.about-page .section.message .flex .message-info .image-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    margin-bottom: 25px;
}
.about-page .section.message .flex .message-info h3 {
    font-weight: 400;
}
.about-page .section.message .flex .message-info p {
    font-size: var(--fz-sm);
}
.about-page .section.message .flex .message-description {
    width: 58%;
}
.about-page .section.message .flex .message-description p {
    margin-bottom: 40px;
}
.about-page .section.message .flex p:last-child {
    margin-bottom: 0;
}

.about-page .section.organization .illust-wrap {
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
}

.about-page .section.symbol .flex {
    justify-content: space-between;
}
.about-page .section.symbol .symbol-logo {
    margin-left: 50px;
    margin-top: 50px;
    width: clamp(9.125rem, 6.725rem + 9.6vw, 15.125rem);
}

.about-page .section.symbol .symbol-logo img {
    width: 100%;
    height: auto;
}
.about-page .section.symbol .symbol-description {
    width: 52%;
}

.initiatives .section.service {
    padding: 0;
}
.initiatives .section.service .hidden {
    position: relative;
    padding: var(--section-space-top) var(--section-spacing-width-lg) var(--section-space-bottom);
    width: 100vw;
    overflow: hidden;
}
.initiatives .section.service .service-list {
    width: 100%;
}
.initiatives .section.service .service-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: var(--xl2);
    padding-bottom: 100px;
}
.initiatives .section.service .service-item::before {
    position: absolute;
    z-index: -1;
    content: '';
    top: 0;
    left: auto;
    right: auto;
    width: 100vw;
    height: 100%;
    border-color: var(--service-brand-color) !important;
}
.initiatives .section.service .service-item:nth-child(odd)::before {
    right: 30px;
    border-radius: 0 var(--section-radius) 0 0;
    border-top: solid 3px;
    border-right: solid 3px;
}
.initiatives .section.service .service-item:nth-child(even)::before {
    left: 30px;
    border-radius: var(--section-radius) 0 0 0;
    border-top: solid 3px;
    border-left: solid 3px;
}

.initiatives .section.service .service-item .service-info {
    display: flex;
    flex-direction: column;
    width: 45%;
}
.initiatives .section.service .service-item .service-info .number-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: clamp(0.563rem, 0.502rem + 0.28vw, 0.75rem) clamp(1.25rem, 1.19rem + 0.28vw, 1.438rem);
    font-size: var(--fz-xs);
    background: var(--text-primary);
    color: var(--bg-white);
    border-radius: 50px;
    margin-bottom: var(--xl2);
}
.initiatives .section.service .service-item .service-info .logo {
    width: 100%;
    margin-bottom: var(--xl);
}
.initiatives .section.service .service-item .service-info .logo img {
    width: 100%;
    height: auto;
}
.initiatives .section.service .service-item .service-info p {
    margin-bottom: var(--md);
	font-size: 16px;
}
.initiatives .section.service .service-item .service-info .custom-btn {
    font-size: clamp(0.875rem, 0.835rem + 0.19vw, 1rem);
	padding: .4em 1em .4em 2em;
	background: var(--teal);
}
.initiatives .section.service .service-item .illust-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    aspect-ratio: 1/1;
    padding: var(--xl);
    border-radius: 50%;
    background: var(--bg-white);
}

.contact .section.contact .flex {
    margin-bottom: clamp(2.375rem, 2.075rem + 1.2vw, 3.125rem);
}
.contact .section.contact h4 {
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
    font-weight: 400;
    width: 6em;
	margin-bottom: 12px;
}
.contact .section.contact .contact-address {
	font-size: clamp(1.125rem, 0.925rem + 0.8vw, 1.625rem);
}
.contact .section.contact .contact-number {
	font-size: clamp(1.875rem, 1.375rem + 2vw, 3.125rem);
	line-height: 1;
}
.contact .section.contact .mail-wrap {
	height: clamp(1.25rem, 1.079rem + 0.69vw, 1.679rem);
	width: auto;
}
.contact .section.contact .mail-wrap svg {
	height: 100%;
	width: auto;
	margin-top: 8px;
}
.contact .section.campus-map .block {
    margin-bottom: var(--xl);
}
.contact .section.campus-map .inner {
    display: flex;
    gap: var(--xl);
}
.contact .section.campus-map .map-figure {
	width: 50%;
}
.contact .section.campus-map img {
    max-width: 550px;
	width: 100%;
}
.contact .section.google-map iframe {
    width: 100%;
    height: 600px;
	border-radius: clamp(1.25rem, 1.05rem + 0.94vw, 1.875rem);
}
@media screen and (max-width: 768px) {
    .sticky-contain-width {
        width: 100% !important;
    }
    .top .flex {
        align-items: flex-end;
        justify-content: space-between;
    }
	.top .about .flex.about-virtical {
		align-items: center;
		flex-direction: column;
		justify-content: flex-start;
	}
	.top .about .flex.about-virtical #illust-3.about-illust {
		margin-top: -80px;
		display: flex;
		justify-content: center;
	}
	.top .about .flex.about-virtical #illust-3.about-illust img {
		width: 90%;
	}
    .top .about h1 {
        line-height: 1.6;
        writing-mode: vertical-rl;
    }
    .top h1 span.mt-18 {
        margin-top: -18px;
    }
    .about-illust {
        position: static;
        transform: translateY(0);
        margin-bottom: 20px;
    }
    #illust-2.about-illust img {
        width: 45vw;
    }
    .top .section.service .service-wrap {
        gap: var(--space-60);
    }
    .top .section.service .service-list {
        flex-direction: column;
        gap: var(--space-60);
    }
    .top .section.service .service-item .service-illust .illust-circle {
        margin-left: -78px;
    }
    .top .section.service .service-item .service-illust {
        display: flex;
        justify-content: space-between;
    }
    .top .section.service .service-item .service-info {
        width: 100%;
    }
    .top .section.service .service-item .service-info .logo img {
        width: 100%;
        height: auto;
    }
    .top .section.news .inner {
        flex-direction: column;
        gap: var(--xl);
    }
    .top .section.news .news-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .top .section.news .news-heading h2 {
        margin-bottom: 0;
    }

    .about-page .section.message .flex .message-info {
        width: 100%;
        margin-top: 24px;
		order: 1;
    }
	.about-page .section.message .flex .message-info h3 {
		margin-bottom: 8px;
	}
    .about-page .section.message .flex .message-description {
        width: 100%;
    }
    .about-page .section.message .flex,
    .about-page .section.symbol .flex {
        flex-direction: column;
        justify-content: flex-start;
    }
    .about-page .section.symbol .flex .symbol-logo {
        margin: 0 auto 24px;
    }
    .about-page .section.symbol .symbol-description {
        width: 100%;
    }

    .initiatives .section.service .service-item {
        flex-direction: column;
    }
    .initiatives .section.service .service-item::before {
        height: calc(var(--top-service-illust-circle-width) / 2);
    }
    .initiatives .section.service .service-item:nth-child(odd)::before {
        right: 20vw;
    }
    .initiatives .section.service .service-item:nth-child(even)::before {
        left: 20vw;
    }
    .initiatives .section.service .service-item .illust-circle {
        width: 100%;
        order: -1;
    }
    .initiatives .section.service .service-item:nth-child(odd) .illust-circle {
        margin-right: -100px;
    }
    .initiatives .section.service .service-item:nth-child(even) .illust-circle {
        margin-left: -110px;
    }
    .initiatives .section.service .service-item .service-info {
        width: 100%;
        margin-top: -70px;
    }
    .initiatives .section.service .service-item .service-info .custom-btn {
        margin: 0 auto;
    }
    .contact .section.contact .flex,
    .contact .section.campus-map .inner {
        flex-direction: column;
    }
	.contact .section.campus-map .map-figure {
		width: 100%;
	}
    .contact .section.google-map iframe {
        height: 400px;
    }
}
@media screen and (min-width: 769px) {
    .top h1 span.ml-30 {
        margin-left: -30px;
    }
    .top .section.service .service-heading {
        display: flex;
        align-items: center;
        gap: var(--space-60);
        margin-bottom: var(--space-60);
    }
    .top .section.service .service-heading h2 {
        font-size: var(--fz-top-page-h2);
        font-weight: 400;
        margin: 0;
    }
    .top .section.service .service-heading p {
        width: 550px;
        margin: 0;
    }
    .top .section.service .service-list:nth-child(1) {
        transform: translateX(20px);
    }
    .top .section.service .service-item {
        margin-left: clamp(0rem, -8.403rem + 17.46vw, 6.875rem);
    }
    .top .section.service .service-item.sb,
    .top .section.service .service-item.sip {
        margin-top: 96px;
    }
    .top .section.service .service-list {
        gap: clamp(3.125rem, -1.458rem + 9.52vw, 6.875rem);
    }
    .top .section.service .service-item .service-info .logo img {
        height: clamp(4.375rem, 2.083rem + 4.76vw, 6.25rem);
    }
    
    .sticky-contain-width {
        width: calc(100% -  var(--page-space-right)) !important;
        margin: 0;
    }
    .initiatives .section.service .service-item.sip::before {
        border-radius: var(--section-radius) 0 0 var(--section-radius);
        border-bottom: solid 3px;
    }
}
@media screen and (min-width: 1020px) {
	.top .section.service .service-list:nth-child(1) {
        transform: translateX(75px)
	}
}


/* --- 本文（約 18px） --- */
.single-body {
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-primary);
}

/* --- 見出し H2 --- */
.single-body h2 {
    font-size: 32px;
    font-weight: bold;
    border-bottom: 2px solid #26b7bc; /* ブルーの下線 */
    padding-bottom: 8px; /* 線と文字の間の余白 */
    margin-top: 2em;     /* 上の段落との余白 */
    margin-bottom: 1em;  /* 下の段落との余白 */
}

/* --- 見出し H3 --- */
.single-body h3 {
    font-size: 32px;
    font-weight: bold;
    margin-top: 2em;
    margin-bottom: 1em;
}

/* --- 見出し H4 --- */
.single-body h4 {
    font-size: 26px;
    font-weight: bold;
    color: #26b7bc;
    border-left: 5px solid #26b7bc; /* 先頭の縦線装飾 */
    padding-left: 12px; /* 縦線と文字の間の余白 */
    margin-top: 2em;
    margin-bottom: 1em;
}

/* --- 見出し H5 --- */
.single-body h5 {
    font-size: 24px;
    font-weight: bold;
    margin-top: 2em;
    margin-bottom: 1em;
}

/* --- 見出し H6 --- */
.single-body h6 {
    font-size: 22px;
    font-weight: 500;
    margin-top: 2em;
    margin-bottom: 1em;
}
.single-body a {
    color: #0066cc;
    text-decoration: underline;
    font-weight: 500;
    transition: all 0.3s ease;
}
.single-body a:hover {
    color: #004080;
    text-decoration: none;
    opacity: 0.8;
}
@media screen and (max-width: 768px) {
    .single-body {
        font-size: 16px;
    }
    .single-body h2, 
    .single-body h3 {
        font-size: 24px;
    }
    .single-body h4 {
        font-size: 20px;
    }
    .single-body h5 {
        font-size: 18px;
    }
    .single-body h6 {
        font-size: 16px;
    }
}