@charset "UTF-8";
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
font-size: 100%;
}
body {
min-height: 100%;
font-size: 1rem;
line-height: 1;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
:where(img, svg, video, canvas, audio, iframe) {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
:where(ul[class], ol[class]) {
list-style: none;
}
:where(input, button, textarea, select),
:where(input[type=file])::-webkit-file-upload-button {
font: inherit;
color: inherit;
}
:where(input[type=file]) {
cursor: auto;
}
:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
cursor: pointer;
}
:where(button, [role=button]) {
touch-action: manipulation;
}
:where(textarea) {
resize: vertical;
min-block-size: 3lh;
}
:where(a, button, label, summary, [tabindex]:not([tabindex*="-"])) {
color: inherit;
text-decoration: none;
}
:where(a, button, label:has(input), summary, [tabindex]:not([tabindex*="-"])) {
cursor: pointer;
}
:where(button, input, select, textarea)[disabled] {
cursor: not-allowed;
}
:where(a:not([class])) {
text-decoration: underline;
text-decoration-skip-ink: auto;
}
:where(sub, sup) {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
:where(sub) {
bottom: -0.25em;
}
:where(sup) {
top: -0.5em;
}
:where(em, b, strong) {
font-weight: bold;
}
:where(p, h1, h2, h3, h4, h5, h6) {
overflow-wrap: break-word;
}
:where(p) {
text-wrap: pretty;
}
:where(table) {
width: 100%;
border-collapse: collapse;
}
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline-width: 2px;
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
:focus-visible {
transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
}
}
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
:where([hidden]) {
display: none;
}
summary::marker, summary::-webkit-details-marker {
display: none;
}
:root {
interpolate-size: allow-keywords;
}
body {
color: #2e363b;
font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
font-size: 1rem;
font-weight: 400;
font-optical-sizing: auto;
font-style: normal;
line-height: 1.5;
}
:where(a, button, input[type=submit], input[type=reset], input[type=button]) {
transition: 0.3s ease;
}
@media (hover: hover) {
:where(a, button, input[type=submit], input[type=reset], input[type=button]):hover {
opacity: 0.7;
}
}
:where(p) {
line-height: 1.75;
}
:where(p) + :where(p) {
margin-top: 1.5em;
}
.u-text-main {
color: #C2285C;
}
.u-text-caution {
color: #E60012;
}
.u-text-center {
text-align: center;
}
.u-text-large {
font-size: 1.125rem;
}
.u-bg-pink {
background-color: #FDF5F3;
}
.u-bg-gray {
background-color: #F8F8F8;
}
.u-round-m {
border-radius: 12px;
}
.is-navOpen {
overflow: hidden;
}
.is-hidden {
display: none;
}
.is-scroll .l-header::after {
opacity: 1;
}
[class*=icon-]::before {
display: inline-block;
content: "";
width: 1em;
aspect-ratio: 1/1;
background-color: currentColor;
}
.icon-mail::before {
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.icon-doc::before {
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.icon-bulb::before {
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.icon-subject::before {
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.icon-schedule::before {
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.icon-map::before {
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.icon-coach::before {
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.icon-fee::before {
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.icon-register::before {
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.c-title {
font-weight: 700;
line-height: 1.45;
}
.c-title--pagetitle {
color: #fff;
font-size: 1.8125rem;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 900;
text-align: center;
}
.c-title--skin01 {
margin-bottom: 20px;
font-size: 1.4375rem;
}
.c-title--skin02 {
margin-bottom: 36px;
color: #3c77cb;
font-size: 1.875rem;
text-align: center;
}
.c-title--skin03 {
display: grid;
margin-bottom: 28px;
font-size: 1rem;
text-align: center;
}
.c-title--skin03::after {
display: block;
content: "";
width: 72px;
height: 3px;
margin-top: 16px;
margin-inline: auto;
background-color: #f3babf;
}
.c-title--skin04 {
margin-bottom: 28px;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 1.875rem;
font-weight: 900;
}
.c-title__en {
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 900;
font-size: 2.25rem;
}
.c-title__jp {
color: #2f3c45;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 500;
}
.c-button {
position: relative;
z-index: 1;
display: inline-flex;
justify-content: center;
align-items: center;
max-width: 100%;
min-width: min(246px, 100%);
padding: 16px 24px;
border: 1px solid transparent;
border-radius: 10em;
background-color: #C2285C;
color: #fff;
font-size: 1rem;
line-height: 1.3;
}
.c-button--square {
border-radius: 8px;
}
.c-button--outline {
border-color: #C2285C;
background-color: #fff;
color: #C2285C;
}
.c-button--green {
background-color: #66CBB1;
}
.c-button--orange {
background-color: #E9772B;
}
.c-button--blue {
background-color: #224D80;
}
.c-button--arrow {
padding-right: 68px;
position: relative;
}
.c-button--arrow:after {
position: absolute;
display: block;
content: "";
top: 50%;
right: 24px;
transform: translateY(-50%);
width: 2em;
height: 2em;
border-radius: 50%;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
background-color: currentColor;
}
.c-button--phone {
flex-wrap: wrap;
padding: 0;
border-radius: 0;
background-color: transparent;
color: #C2285C;
}
.c-button--phone .num {
display: block;
width: 100%;
font-size: 150%;
font-weight: 700;
text-align: center;
}
.c-button--large {
padding-block: 20px;
min-width: min(340px, 100%);
font-size: 1.0625rem;
justify-content: center;
}
.c-button-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 40px;
}
.c-button--w100 {
display: flex;
flex-grow: 1;
}
.c-telLink {
color: inherit;
}
.c-intro {
padding-left: 28px;
font-size: 0.875rem;
font-weight: 700;
}
.c-lead {
margin-bottom: 80px;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 1.1875rem;
font-weight: 500;
text-align: center;
}
.c-card {
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 8px;
background-color: #fff;
color: #224D80;
}
.c-card__image img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
.c-card__body {
padding: 16px;
font-size: 0.875rem;
}
.c-card__date {
font-size: 0.75rem;
}
.c-card__title {
font-size: 0.875rem;
font-weight: 700;
}
.c-card__info {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5em;
align-items: start;
margin-top: 20px;
}
.c-card__info-row {
display: contents;
}
.c-card__label {
display: inline-block;
padding: 2px 10px;
border-radius: 10em;
color: #fff;
font-size: 0.75rem;
text-align: center;
}
.c-card__label--orange {
background: #FD7A58;
}
.c-card__label--green {
background: #66CBB1;
}
.c-club-card {
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
border-radius: 5px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
background: #fff;
}
.c-club-card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 45px 18px;
}
.c-club-card__header {
position: relative;
background: #999;
}
.c-club-card__img {
aspect-ratio: 16/9;
}
.c-club-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-club-card__badge {
position: absolute;
bottom: 12px;
left: 15px;
padding: 8px 20px;
border-radius: 50px;
border: 1px solid #C2285C;
background: #fff;
color: #C2285C;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 0.6875rem;
font-weight: 500;
}
.c-club-card__badge--certified {
border-color: #66CBB1;
color: #66CBB1;
}
.c-club-card__badge--registration {
border-color: #FD7A58;
color: #FD7A58;
}
.c-club-card__body {
padding: 20px;
}
.c-club-card__title {
font-size: 1.4rem;
text-align: center;
margin-bottom: 15px;
}
.c-club-card__btn-detail {
display: inline-block;
background: #888;
color: #fff;
padding: 5px 20px;
border-radius: 50px;
font-size: 12px;
margin-bottom: 20px;
}
.c-club-card__info-list {
list-style: none;
padding: 0;
text-align: left;
font-size: 13px;
line-height: 1.8;
}
.c-club-card__info-list li::before {
content: "・";
}
.c-club-card__footer {
padding: 0 20px 20px;
margin-top: auto;
}
.c-club-card__tag-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px 4px;
list-style: none;
padding: 0;
}
.c-club-card__tag {
border: 2px solid #f06292;
border-radius: 50px;
padding: 5px;
font-size: 11px;
text-align: center;
color: #d81b60;
white-space: nowrap;
}
.c-table {
width: 100%;
font-size: 0.9375rem;
}
.c-table-container {
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
}
.c-table thead tr:first-child th {
border-top: 0;
}
.c-table thead tr:first-child th:first-child {
border-left: 0;
}
.c-table thead tr:first-child th:last-child {
border-right: 0;
}
.c-table :is(th, td) {
padding: 10px 16px;
}
.c-table th {
border: 1px solid rgba(255, 255, 255, 0.7);
background-color: #C2285C;
color: #fff;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 1.0625rem;
font-weight: 700;
text-align: center;
}
.c-table td {
border: 1px solid rgba(77, 77, 77, 0.7);
background-color: #fff;
font-weight: 500;
}
.c-tag {
display: inline-block;
padding: 2px 8px;
border: 1px solid #2e363b;
font-size: 0.75rem;
line-height: 1.2;
}
.c-checkbox-label {
display: flex;
gap: 8px;
}
.c-filter {
color: #C2285C;
}
.c-filter__title {
position: relative;
margin-bottom: 20px;
padding-left: 20px;
color: #E46C93;
font-size: 1rem;
}
.c-filter__title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 8px solid #E46C93;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.c-filter__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 28px 20px;
list-style: none;
padding: 0;
}
.c-filter__input {
display: none;
}
.c-filter__group:nth-child(n+2) {
margin-top: 60px;
padding-top: 20px;
border-top: 1px solid #9D9D9E;
}
.c-filter__label {
display: block;
border: 2px solid #E46C93;
border-radius: 50px;
padding: 10px 20px;
text-align: center;
cursor: pointer;
background: #fff;
font-weight: 500;
transition: all 0.3s ease;
}
.c-filter__label:has(:checked) {
background-color: #C2285C;
border-color: #E46C93;
color: #fff;
}
.c-filter__label {
transition: 0.3s ease;
}
@media (hover: hover) {
.c-filter__label:hover {
opacity: 0.7;
}
}
.c-filter__footer {
margin-top: 60px;
padding-top: 20px;
border-top: 1px solid #9D9D9E;
text-align: right;
}
.c-filter__clear {
background: none;
border: none;
color: #E46C93;
font-size: 0.875rem;
}
.c-filter__empty {
display: none;
}
.c-tab__header {
display: flex;
margin-bottom: 48px;
}
.c-tab__button {
flex: 1;
padding: 16px;
border: 1px solid #2e363b;
background: #fff;
color: #2e363b;
margin-left: -1px;
}
.c-tab__button:first-child {
margin-left: 0;
}
.c-tab__button--active {
background-color: #C2285C;
color: #fff;
}
.c-tab__box:not(.c-tab__box--active) {
display: none;
}
.c-carousel {
position: relative;
padding-inline: 30px;
}
.c-carousel .swiper-slide {
padding: 5px 10px 20px;
}
.c-carousel .swiper-button {
display: block;
width: 60px;
height: 60px;
margin-top: -30px;
border-radius: 50%;
background: #e46c93;
border: 0;
color: #fff;
}
.c-carousel .swiper-button::after {
font-weight: 700;
font-size: 28px;
}
.c-carousel .swiper-button-prev {
left: 0px;
padding-right: 2px;
}
.c-carousel .swiper-button-next {
right: 0px;
padding-left: 4px;
}
.l-container {
overflow-x: clip;
}
.l-layer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 900;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
pointer-events: none;
}
.l-layer.is-show {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.l-wrapper {
max-width: min(92vw, 1080px);
margin-inline: auto;
}
.l-wrapper--wide {
max-width: min(92vw, 1260px);
margin-inline: auto;
}
.l-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
gap: 20px;
padding-right: 36px;
}
.l-header::after {
position: absolute;
inset: 0;
display: block;
content: "";
opacity: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
transition: all 0.3s ease;
}
.l-header__logo-link {
display: inline-block;
padding: 28px 32px 28px 28px;
border-radius: 0 0 28px 0;
background: #fff;
box-shadow: 0.73px 1.46px 4.02px rgba(0, 0, 0, 0.51);
transition: 0.3s ease;
}
@media (hover: hover) {
.l-header__logo-link:hover {
opacity: 1;
}
.l-header__logo-link:hover .l-header__logo-image {
opacity: 0.7;
}
}
.l-header__logo-image {
transition: all 0.3s ease;
}
.l-gnav {
display: flex;
align-items: center;
gap: 28px;
}
.l-gnav__btn {
display: none;
}
.l-gnav__list {
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
}
.l-gnav__actions {
flex: 1;
display: flex;
gap: 10px;
}
.l-gnav__button {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
min-width: 150px;
padding: 12px 28px;
border-radius: 10em;
color: #fff;
text-align: center;
}
.l-gnav__button--red {
background-color: #ED3E40;
}
.l-main:has(.l-pagetitle) {
padding-top: 100px;
}
.l-pagetitle {
padding-block: 40px;
background: url(../img/common/bg-texture.webp) repeat-y center top/max(1920px, 100%) auto;
}
.l-section {
padding-block: 60px 100px;
}
.l-footer {
margin-top: 60px;
padding-inline: 60px;
}
.l-footer__inner {
padding: 60px 0 20px;
border-top: 1px solid #6F6E6F;
}
.l-footer__logos {
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
gap: 60px;
}
.l-footer__logo-image {
height: 50px;
width: auto;
margin-bottom: 15px;
}
.l-footer__logo-caption {
font-size: 0.75rem;
font-weight: bold;
}
.hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
place-content: center;
min-height: calc(100vh - 52px);
margin-bottom: 72px;
padding-top: 100px;
background: url(../img/top/bg-mv.webp) no-repeat center bottom/cover;
}
@media (orientation: portrait) {
.hero {
min-height: 0;
}
}
.hero__content {
display: grid;
width: clamp(100%, 77.5vw, 1488px);
margin-inline: auto;
max-height: calc(100vh - 180px);
}
.hero__title {
max-height: calc(100vh - 150px);
}
.hero__title img {
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
}
.hero__button-group {
margin-top: 52px;
padding-left: 36px;
}
.hero__button {
min-width: min(366px, 100%);
box-shadow: 0.73px 4.37px 3.64px rgba(0, 0, 0, 0.3);
}
.circle-nav__list {
display: flex;
justify-content: center;
}
.circle-nav__item {
padding: 0 32px;
border-right: 1px solid #ddd;
}
.circle-nav__item:first-child {
border-left: 1px solid #ddd;
}
.circle-nav__image {
width: 150px;
height: 150px;
background-color: #eee;
border-radius: 50%;
border: 1px solid #333;
margin-bottom: 15px;
}
.circle-nav__text {
display: block;
font-weight: 700;
text-align: center;
}
.news {
padding-block: 80px;
}
.news-ticker {
position: absolute;
left: 0;
right: 0;
bottom: 0;
transform: translateY(50%);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 36px;
max-width: 736px;
margin-inline: auto;
padding: 20px 60px;
background-color: #fff;
border-radius: 50em;
box-shadow: -0.73px 3px 3.64px rgba(0, 0, 0, 0.26);
}
.news-ticker__label {
display: inline-flex;
align-items: center;
gap: 4px;
color: #003C7A;
font-weight: 700;
white-space: nowrap;
}
.news-ticker__label::before {
display: inline-block;
content: "";
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,') no-repeat center center/contain;
}
.news-ticker__content {
display: flex;
gap: 12px;
}
.news-ticker__date {
flex-shrink: 0;
}
.news-ticker__text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.news__header {
margin-bottom: 20px;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
text-align: center;
}
.news__title {
font-size: 2.25rem;
font-weight: 900;
}
.news-item {
border-bottom: 1px solid #D8D8D8;
max-width: 640px;
margin: 0 auto;
}
.news-item:first-child {
border-top: 1px solid #D8D8D8;
}
.news-item__link {
display: block;
padding: 18px 30px 18px 12px;
text-decoration: none;
color: #224D80;
position: relative;
}
.news-item__link:after {
position: absolute;
display: block;
content: "";
top: 50%;
right: 0;
transform: translateY(-50%);
width: 2em;
height: 2em;
border-radius: 50%;
background: url('data:image/svg+xml;utf8,') no-repeat center center/contain, radial-gradient(ellipse, #C2285C 0%, #C2285C 60%, #fff 60%, #fff 100%);
}
.news-item__meta {
display: flex;
align-items: center;
gap: 10px;
}
.news-item__tag {
background: #f8bbd0;
padding: 2px 8px 3px;
border-radius: 10em;
color: #fff;
font-size: 0.625rem;
list-style: none;
}
.news-item__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.news__button {
min-width: min(100%, 500px);
}
.intro {
padding: 80px 0;
}
.intro__column {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.intro__title {
margin-bottom: 30px;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 1.875rem;
font-weight: 700;
line-height: 1.4;
}
.intro__text {
font-size: 1.125rem;
line-height: 1.8;
}
.intro__visual {
text-align: center;
}
.about {
border-radius: 36vw 36vw 0 0;
padding-bottom: 120px;
background-color: #E3EFEA;
border-top: 1px solid transparent;
}
.about__header {
background-color: #64c9ac;
color: #fff;
width: fit-content;
margin: -80px auto 80px;
padding: 16px 120px 60px;
background: url(../img/top/bg-ribbon.svg) no-repeat center center/100% 100%;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
text-align: center;
}
.about__title {
font-size: 3.75rem;
font-weight: 900;
line-height: 1;
}
.about__subtitle {
font-size: 1.5rem;
}
.about__column {
display: grid;
grid-template-columns: 1fr;
gap: 60px;
}
.about__item {
display: flex;
align-items: center;
gap: 40px;
}
.about__item--reverse {
flex-direction: row-reverse;
}
.about__item-title {
margin-bottom: 20px;
color: #66CBB1;
font-size: 1.75rem;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}
.about__item-text {
font-size: 1.125rem;
line-height: 1.8;
}
.about__visual {
flex: 1;
}
.about__visual img {
width: 100%;
}
.about__body {
flex: 1;
}
.about__links {
display: grid;
gap: 16px;
margin-top: 40px;
}
.about__link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 68px 12px 10px;
border-radius: 8px;
box-shadow: 0.73px 0.73px 3.64px rgba(102, 198, 161, 0.75);
background: #fff;
font-size: 0.9375rem;
position: relative;
}
.about__link:after {
position: absolute;
display: block;
content: "";
top: 50%;
right: 24px;
transform: translateY(-50%);
width: 2em;
height: 2em;
border-radius: 50%;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
background-color: #66CBB1;
}
.about__link-icon {
flex-shrink: 0;
display: grid;
place-content: center;
width: 45px;
aspect-ratio: 1/1;
padding-bottom: 2px;
border-radius: 50%;
background-color: #66CBB1;
color: #fff;
font-size: 0.75rem;
line-height: 1.1;
text-align: center;
}
.about__link--registration {
box-shadow: 0.73px 0.73px 3.64px rgba(229, 97, 145, 0.75);
}
.about__link--registration .about__link-icon {
background-color: #ED3E40;
}
.about__link--registration::after {
background-color: #ED3E40;
}
.about__card {
position: relative;
padding: 20px 40px;
border-radius: 8px;
box-shadow: 0.73px 0.73px 3.64px rgba(102, 198, 161, 0.75);
background: #fff;
font-size: 1.125rem;
}
.about__card-icon {
position: absolute;
top: -8px;
left: -12px;
display: grid;
place-content: center;
width: 52px;
aspect-ratio: 1/1;
padding-bottom: 2px;
border-radius: 50%;
background-color: #66CBB1;
color: #fff;
font-size: 0.75rem;
line-height: 1.15;
text-align: center;
}
.about__card--registration {
box-shadow: 0.73px 0.73px 3.64px rgba(229, 97, 145, 0.75);
}
.about__card--registration .about__card-icon {
background-color: #ED3E40;
font-size: 0.525rem;
}
.about__card--registration::after {
background-color: #ED3E40;
}
.about__card .u-text-caution {
font-size: 0.9375rem;
}
.about__button-group {
margin-top: 24px;
}
.club__column {
display: flex;
align-items: center;
gap: 0 80px;
margin-bottom: 32px;
}
.club__body {
flex: 1;
padding-top: 60px;
}
.club__title {
margin-bottom: 28px;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 1.75rem;
font-weight: 700;
}
.club__text {
font-size: 1.125rem;
}
.club__visual {
flex: 1;
text-align: center;
margin-top: -20px;
}
.club-selection {
position: relative;
padding-block: 80px 100px;
background: url(../img/common/bg-texture.webp) repeat-y center top/max(1920px, 100%) auto;
}
.club-selection::before {
position: absolute;
content: "";
top: -1px;
left: 50%;
transform: translateX(-50%);
display: inline-block;
border-style: solid;
border-color: #fff transparent transparent;
border-width: 32px 36px 0;
}
.club-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 48px;
}
.club-list__item {
display: grid;
place-content: center;
border-radius: 16px;
border: 1px solid #2e363b;
background: #EAEAE4;
aspect-ratio: 220/150;
}
.club-event {
margin-top: 80px;
}
.club-event__title {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 40px;
color: #C2285C;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 700;
}
.club-event__title::before, .club-event__title::after {
flex: 1;
display: block;
content: "";
height: 1px;
background-color: #C2285C;
}
.club-event__column {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 52px;
}
.club-event__actions {
max-width: min(92vw, 1080px);
margin-inline: auto;
margin-top: 80px;
}
.club-event__actions .c-button {
flex: 1;
}
.club-tab__button-group {
margin-top: 80px;
}
.clublist-tab__header {
gap: 40px;
max-width: 1080px;
margin-inline: auto;
margin-bottom: 60px;
}
.clublist-tab__button {
padding-block: 40px;
border-radius: 6px;
border-color: transparent;
box-shadow: 6px 6px 0 0 #C2285C;
color: #C2285C;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 1.625rem;
font-weight: 900;
}
.clublist-tab__button.c-tab__button--active {
background-color: #FDEDE8;
}
.clublist-tab__box {
padding: 40px;
border-radius: 24px;
background-color: #C2285C;
}
.clublist-table__time {
display: grid;
gap: 8px;
}
.clublist-table__time :is(dt, dd) {
display: inline;
}
.clublist-table__time dt::after {
content: "▶";
margin-inline: 2px;
color: #C2285C;
}
.clublist-table--direct th:nth-child(1) {
width: 15%;
}
.clublist-table--direct th:nth-child(2) {
width: 25%;
}
.clublist-table--direct th:nth-child(3) {
width: 23%;
}
.clublist-table--direct th:nth-child(4) {
width: 10%;
}
.clublist-table--direct th:nth-child(5) {
width: 10%;
}
.clublist-table--region th:nth-child(1) {
width: 12%;
}
.clublist-table--region th:nth-child(2) {
width: 11%;
}
.clublist-table--region th:nth-child(3) {
width: 20%;
}
.clublist-table--region th:nth-child(4) {
width: 20%;
}
.clublist-table--region th:nth-child(5) {
width: 9%;
}
.clublist-table--region th:nth-child(6) {
width: 9.5%;
}
.club-info {
display: grid;
grid-template-columns: auto 53.85%;
align-items: center;
gap: 40px;
margin-bottom: 40px;
}
.club-info__tag {
margin-bottom: 32px;
color: #e46c93;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 500;
font-size: 0.875rem;
}
.club-info__condition-list {
display: grid;
gap: 6px;
padding: 20px;
border-radius: 8px;
background: #fff;
font-size: 0.875rem;
}
.club-info__condition-list > li {
padding-left: 1.8em;
line-height: 1.5;
position: relative;
}
.club-info__condition-list > li:before {
position: absolute;
display: block;
content: "";
top: 0.3em;
left: 0;
width: 14px;
aspect-ratio: 1/1;
background: url('data:image/svg+xml;utf8,') no-repeat center center/contain;
}
.club-prcard {
margin-bottom: 24px;
padding: 20px;
border-radius: 20px;
background: #fff;
}
.club-prcard__title {
margin-bottom: 16px;
color: #e46c93;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.4;
}
.club-prcard__text {
padding-left: 1em;
font-size: 1.0625rem;
}
.club-detailcard {
padding: 20px;
border-radius: 20px;
background: #fff;
}
.club-detailcard__list {
display: grid;
grid-template-columns: max-content 1fr;
max-width: 930px;
margin-inline: auto;
font-size: 1.0625rem;
}
.club-detailcard__item {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
gap: 0 40px;
padding-block: 28px;
border-bottom: 1px solid #595757;
}
.club-detailcard__item:last-child {
border-bottom: 0;
}
.club-detailcard__item dt {
font-weight: 500;
}
.club-detailcard__item [class*=icon-]::before {
margin-right: 8px;
color: #C2285C;
transform: scale(1.1) translateY(2px);
}
.club-detailcard__item :is(.icon-fee, .icon-coach, .icon-subject, .icon-bulb)::before {
transform: scale(1.3) translateY(2px);
}
.partnership {
padding: 80px 0;
}
.partnership__inner {
background: url(../img/top/bg-partnership.webp) no-repeat center bottom/contain;
}
.partnership__title {
margin-bottom: 20px;
color: #224D80;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 700;
line-height: 1.3;
text-align: center;
}
.partnership__title-en {
display: block;
font-size: 3.75rem;
font-weight: 900;
}
.partnership__title-jp {
font-size: 1.5rem;
}
.partnership__lead {
max-width: 720px;
margin-inline: auto;
font-size: 1.125rem;
text-align: center;
}
.partnership__content {
display: flex;
justify-content: center;
gap: 40px;
margin: 120px auto 0;
}
.partnership__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
width: 395px;
height: 395px;
padding: 186px 20px 40px;
border-radius: 50%;
color: #fff;
font-size: 0.875rem;
text-align: center;
}
.partnership__item--yellow {
background-color: #FEBF22;
}
.partnership__item--blue {
background-color: #12B4BE;
}
.partnership__item--blue .partnership__item-image {
margin-top: -10px;
}
.partnership__item-title {
margin-bottom: 12px;
font-size: 1.75rem;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 900;
line-height: 1.3;
}
.partnership__item-text {
padding-bottom: 28px;
}
.partnership__item-image {
position: absolute;
left: 0;
right: 0;
top: 10px;
margin-inline: auto;
max-width: 340px;
}
.partnership__card-title {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: bold;
}
.partnership__btn {
margin-top: 20px;
background: rgba(0, 0, 0, 0.2);
padding: 10px 30px;
border-radius: 30px;
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
.partnership__btn-icon {
background: #fff;
color: #333;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.banner-list {
background-color: #DDE4ED;
padding: 35px 0;
}
.banner-list__inner {
max-width: min(92vw, 1200px);
margin-inline: auto;
}
.banner-list__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px 15px;
}
.faq {
padding-block: 80px 0;
}
.faq__title {
margin-bottom: 30px;
color: #224D80;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 700;
line-height: 1.3;
text-align: center;
}
.faq__title-en {
display: block;
font-size: 3.75rem;
font-weight: 900;
}
.faq__title-jp {
font-size: 1.5rem;
}
.faq__header {
display: flex;
justify-content: center;
align-items: end;
text-align: center;
}
.faq__header-visual {
width: fit-content;
margin-right: -100px;
}
.faq__item {
border-bottom: 1px dashed #ddd;
padding-bottom: 30px;
margin-bottom: 30px;
}
.faq__question {
background-color: #ebf4ff;
padding: 15px 25px;
border-radius: 50px;
display: flex;
align-items: center;
font-weight: bold;
color: #2c5a93;
margin-bottom: 15px;
}
.faq__answer {
padding: 10px 25px;
display: flex;
align-items: flex-start;
color: #333;
}
.faq__icon {
flex-shrink: 0;
display: inline-grid;
place-content: center;
width: 38px;
height: 38px;
margin-right: 12px;
padding: 0 0 1px 0px;
border-radius: 50%;
font-size: 1.125rem;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 600;
}
.faq__icon::before {
content: none;
}
.faq__icon--q {
background-color: #224D80;
color: #fff;
}
.faq__icon--a {
border: 1px solid #224D80;
color: #224D80;
background-color: #fff;
}
.contact {
padding: 80px 0;
}
.contact__title {
margin-bottom: 30px;
color: #224D80;
font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 700;
line-height: 1.3;
text-align: center;
}
.contact__title-en {
display: block;
font-size: 3.75rem;
font-weight: 900;
}
.contact__title-jp {
font-size: 1.5rem;
}
.contact__text {
font-size: 1.125rem;
text-align: center;
}
.contact__nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin-top: 60px;
}
.contact__nav-item {
display: block;
min-width: min(100%, 360px);
text-align: center;
padding-left: 60px;
}
.contact__nav [class*=icon-]::before {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
width: 34px;
}
.scroll-hint__icon {
display: none;
}
@media screen and (max-width: 959.98px) {
.l-gnav__list {
gap: 12px 8px;
}
.circle-nav__item {
padding: 0 20px;
}
.partnership__content {
gap: 12px;
}
.partnership__item-title {
font-size: 1.45rem;
}
.partnership__item {
width: 350px;
height: 350px;
padding: 176px 20px 40px;
}
}
/* ▼タブレット用デザインとして付け足すデザイン */
@media print, screen and (min-width: 768px) {
.u-only-sp {
display: none;
}
.c-telLink {
pointer-events: none;
}
.c-filter__body {
display: block !important;
}
}
/* ▼モバイルのみ付け足すデザイン */
@media screen and (max-width: 767.98px) {
.u-only-pc {
display: none;
}
.c-title--pagetitle {
font-size: 1.5rem;
}
.c-title--skin01 {
margin-bottom: 12px;
font-size: 1.25rem;
}
.c-title--skin02 {
margin-bottom: 20px;
font-size: 1.5rem;
}
.c-title--skin03 {
margin-bottom: 20px;
font-size: 0.875rem;
}
.c-title--skin04 {
margin-bottom: 8px;
font-size: 1.375rem;
}
.c-title__en {
font-size: 1.5rem;
}
.c-intro {
padding-left: 0px;
}
.c-lead {
margin-bottom: 20px;
font-size: 1rem;
}
.c-club-card-container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px 32px;
}
.c-table :is(th, td) {
padding: 4px 10px;
}
.c-table th {
font-size: 0.9375rem;
}
.c-table td {
font-size: 0.875rem;
}
.c-tab__header {
margin-bottom: 20px;
}
.c-tab__button {
padding: 8px;
}
.c-filter__title {
cursor: pointer;
position: relative;
padding: 0px 40px 0px 20px;
}
.c-filter__title::after {
content: "";
position: absolute;
right: 20px;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #C2285C;
border-right: 2px solid #C2285C;
transform: translateY(-70%) rotate(135deg);
transition: transform 0.3s;
}
.c-filter__title.is-open::after {
transform: translateY(-30%) rotate(-45deg);
}
.c-filter__list {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 12px;
}
.c-filter__group:nth-child(n+2) {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #9D9D9E;
}
.c-filter__label {
font-size: 0.875rem;
}
.c-filter__footer {
margin-top: 12px;
padding-top: 12px;
}
.c-filter__body {
display: none;
padding: 15px 0;
}
.c-carousel {
padding-inline: 20px;
}
.c-carousel .swiper-button {
width: 40px;
height: 40px;
margin-top: -20px;
}
.c-carousel .swiper-button::after {
font-size: 20px;
}
.is-navOpen .l-header::after {
background-color: rgba(255, 255, 255, 0.9);
}
.l-header {
padding-right: 0;
}
.l-header__logo {
position: relative;
z-index: 10;
}
.l-header__logo-link {
width: 120px;
padding: 16px 12px 16px 8px;
}
.l-gnav {
position: fixed;
top: 61px;
right: 0;
bottom: 0;
overflow-y: auto;
width: 80%;
transform: translateX(100%);
display: block;
z-index: 9;
background-color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.l-gnav.is-open {
transform: translateX(0);
}
.l-gnav__btn {
position: relative;
display: block;
width: 60px;
height: 60px;
background-color: #fff;
border: 0;
}
.l-gnav__btn.is-open .l-gnav__bar:nth-child(1) {
top: 28px;
transform: rotate(45deg);
}
.l-gnav__btn.is-open .l-gnav__bar:nth-child(2) {
width: 0;
}
.l-gnav__btn.is-open .l-gnav__bar:nth-child(3) {
top: 28px;
transform: rotate(-45deg);
}
.l-gnav__bar {
position: absolute;
left: 15px;
display: block;
width: 30px;
height: 3px;
border-radius: 2px;
background-color: #C2285C;
transition: all 0.3s ease;
}
.l-gnav__bar:nth-child(1) {
top: 18px;
}
.l-gnav__bar:nth-child(2) {
top: 28px;
}
.l-gnav__bar:nth-child(3) {
top: 38px;
}
.l-gnav__list {
display: block;
margin-top: 16px;
}
.l-gnav__link {
display: block;
padding: 12px 20px;
}
.l-gnav__actions {
flex-direction: column;
gap: 16px;
padding: 20px 12px;
}
.l-main:has(.l-pagetitle) {
padding-top: 60px;
}
.l-pagetitle {
padding-block: 24px 20px;
}
.l-section {
padding-block: 40px;
}
.l-footer {
margin-top: 50px;
padding-inline: 20px;
}
.l-footer__inner {
padding: 30px 0 20px;
}
.l-footer__logos {
gap: 20px;
text-align: center;
}
.l-footer__logo-image {
margin-bottom: 4px;
}
.hero {
align-content: start;
margin-bottom: 60px;
padding-block: 120px 240px;
background: url(../img/top/img-mv.webp) no-repeat center bottom/cover;
}
.hero__button-group {
margin-top: 40px;
padding-left: 0;
}
.hero__content {
max-height: unset;
}
.hero__title {
max-width: min(92vw, 1080px);
max-height: unset;
margin-inline: auto;
transform: translateX(-5px);
}
.circle-nav__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 12px 0;
}
.circle-nav__item {
padding: 0 12px;
}
.circle-nav__image {
width: 100%;
height: auto;
aspect-ratio: 1/1;
}
.news {
padding-bottom: 40px;
}
.news-ticker {
left: 4vw;
right: 4vw;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding: 20px 32px;
}
.news-ticker__content {
flex-direction: column;
gap: 0;
}
.news-item__meta {
align-items: start;
flex-direction: column;
gap: 4px;
margin-bottom: 4px;
}
.intro {
padding-block: 40px;
}
.intro__column {
grid-template-columns: minmax(0, 1fr);
}
.intro__title {
margin-bottom: 16px;
}
.about {
padding-bottom: 40px;
}
.about__header {
margin: -20px auto 28px;
padding: 12px 20px 52px;
}
.about__title {
font-size: 2.5rem;
}
.about__subtitle {
font-size: 1rem;
line-height: 1.3;
}
.about__column {
gap: 40px;
}
.about__item {
flex-direction: column;
gap: 32px;
}
.about__item-title {
margin-bottom: 8px;
}
.about__item-text {
font-size: 1rem;
}
.about__link {
min-height: 40px;
}
.about__links {
margin-top: 16px;
font-size: 0.875rem;
}
.about__link::before {
width: 20px;
height: 20px;
}
.about__card {
padding: 20px 20px 20px 40px;
font-size: 0.9375rem;
}
.club {
padding-block: 40px 0;
}
.club__column {
flex-direction: column;
margin-bottom: 32px;
}
.club__title {
margin-bottom: 12px;
}
.club-list {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 16px;
}
.club-event {
margin-top: 40px;
}
.club-event__title {
gap: 8px;
margin-bottom: 20px;
text-align: center;
}
.club-event__title::before, .club-event__title::after {
min-width: 20px;
}
.club-event__column {
gap: 20px 32px;
}
.club-event__actions {
position: static;
transform: none;
margin-top: 40px;
}
.club__visual {
margin-top: 0;
}
.club-selection {
padding-bottom: 40px;
}
.club-tab__button-group {
margin-top: 40px;
}
.clublist-tab__header {
gap: 16px;
margin-bottom: 20px;
}
.clublist-tab__button {
padding-block: 8px;
border-radius: 4px;
box-shadow: 4px 4px 0 0 #C2285C;
font-size: 1rem;
}
.clublist-tab__box {
padding: 8px;
border-radius: 8px;
}
.club-info {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 20px;
}
.club-info__tag {
margin-bottom: 12px;
}
.club-prcard {
border-radius: 8px;
}
.club-prcard__title {
margin-bottom: 8px;
}
.club-prcard__text {
padding-left: 0;
font-size: 1rem;
}
.club-detailcard {
border-radius: 8px;
}
.club-detailcard__list {
font-size: 0.875rem;
}
.club-detailcard__item {
gap: 0 20px;
padding-block: 12px;
}
.partnership {
padding-block: 40px;
}
.partnership__title {
margin-bottom: 12px;
}
.partnership__title-en {
font-size: 2rem;
}
.partnership__title-jp {
font-size: 1rem;
}
.partnership__lead {
font-size: 1rem;
}
.partnership__content {
flex-direction: column;
gap: 90px 40px;
width: fit-content;
margin-top: 50px;
}
.partnership__item {
width: 100%;
max-width: 395px;
height: auto;
padding: 140px 20px 40px;
border-radius: 16px;
}
.partnership__item-image {
margin-top: -36px;
max-width: min(336px, 100%);
}
.partnership__item--blue .partnership__item-image {
margin-top: -48px;
}
.banner-list__grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.faq {
padding: 40px 0 0;
}
.faq__header-visual {
width: 60px;
margin-right: -40px;
}
.faq__title {
margin-bottom: 12px;
}
.faq__title-en {
font-size: 2rem;
}
.faq__title-jp {
font-size: 1rem;
}
.contact {
padding-block: 40px;
}
.contact__title {
margin-bottom: 12px;
}
.contact__title-en {
font-size: 2rem;
}
.contact__title-jp {
font-size: 1rem;
}
.contact__text {
font-size: 1rem;
}
.contact__nav {
margin-top: 20px;
}
.scroll-hint {
position: relative;
width: 100%;
overflow: hidden;
}
.scroll-hint .c-table {
width: 1080px;
}
.scroll-hint__container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scroll-hint__icon {
position: absolute;
top: min(20%, 160px);
right: 20px;
pointer-events: none;
transition: opacity 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
background: rgba(0, 0, 0, 0.5);
padding: 20px 10px;
border-radius: 8px;
}
.scroll-hint__icon.is-hidden {
opacity: 0;
display: block;
pointer-events: none;
}
.scroll-hint__arrow {
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
animation: arrow-move 1.5s infinite;
margin-top: 5px;
}
@keyframes arrow-move {
0% {
transform: translate(-5px, 0) rotate(45deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translate(5px, 0) rotate(45deg);
opacity: 0;
}
}
}
/* #Print Fixes */
@media print {
* {
box-shadow: none !important;
text-shadow: none !important;
}
@page {
margin: 1cm 1cm;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
thead {
display: table-header-group;
}
tr, img {
page-break-inside: avoid;
}
body {
width: auto;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}