@charset "UTF-8";
/* Sass Document */
.p-content__ttl {
font-size: 4rem;
text-align: center;
font-weight: 700;
}
@media screen and (max-width: 767.98px) {
.p-content__ttl {
font-size: 2rem;
line-height: 1.75;
}
}
.p-top {
background-color: #faf9f7;
}
.p-top #l-header {
padding-block: 6.2rem;
}
@media screen and (max-width: 767.98px) {
.p-top #l-header {
padding-block: 2rem 1.33rem;
}
}
/* ----------------------------------------------------------------------------------------------------
* MV
* --------------------------------------------------------------------------------------------------*/
.p-mv img {
width: 100%;
height: auto;
}
/* ----------------------------------------------------------------------------------------------------
*
* --------------------------------------------------------------------------------------------------*/
.p-top-greeting {
min-height: 92rem;
position: relative;
padding-block: 17.7rem 20rem;
margin-top: 3.5rem;
}
@media screen and (max-width: 767.98px) {
.p-top-greeting {
min-height: inherit;
padding-block: 9.7rem 19rem;
margin-top: 2rem;
}
}
.p-top-greeting .l-content__inner {
z-index: 10;
}
.p-top-greeting .-deco01 {
top: 7.4rem;
z-index: 10;
width: 16.5rem;
left: calc(50% - 20.5rem);
}
@media screen and (max-width: 767.98px) {
.p-top-greeting .-deco01 {
width: 8rem;
top: 4rem;
left: 0;
}
}
.p-top-greeting .-deco02 {
z-index: 10;
width: 11.6rem;
right: 8rem;
bottom: 6rem;
}
@media screen and (max-width: 767.98px) {
.p-top-greeting .-deco02 {
width: 6rem;
right: 3rem;
}
}
.p-top-greeting::before {
position: absolute;
z-index: 2;
top: 14.6rem;
left: 0;
content: "";
width: 48.4375%;
height: 77.4rem;
background: url(../img/top/bg_greeting.jpg) no-repeat center center/cover;
mask: url('data:image/svg+xml;utf-8,');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 100% 100%;
}
@media screen and (max-width: 767.98px) {
.p-top-greeting::before {
width: 26.2rem;
height: 16.7rem;
background: url(../img/top/bg_greeting_sp.png) no-repeat center/cover;
mask: inherit;
top: auto;
bottom: 0;
}
}
.p-top-greeting::after {
position: absolute;
content: "";
right: 0;
top: 0;
width: 66.09375%;
background-color: #fff;
height: 84.5rem;
mask: url('data:image/svg+xml;utf-8,');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 100% 100%;
}
@media screen and (max-width: 767.98px) {
.p-top-greeting::after {
width: 46rem;
height: 48rem;
}
}
.p-top-greeting__inner {
width: 51%;
margin-left: auto;
}
@media screen and (max-width: 767.98px) {
.p-top-greeting__inner {
width: auto;
}
}
.p-top-greeting__inner .c-catch {
text-align: center;
font-size: 3.6rem;
line-height: 1.7777777778;
font-weight: 700;
}
@media screen and (max-width: 767.98px) {
.p-top-greeting__inner .c-catch {
font-size: 1.8rem;
}
}
.p-top-greeting__inner .c-txt {
margin-top: 9rem;
font-weight: 500;
font-size: 2.2rem;
text-align: center;
}
@media screen and (max-width: 767.98px) {
.p-top-greeting__inner .c-txt {
margin-top: 4rem;
font-size: 1.4rem;
}
}
/* ----------------------------------------------------------------------------------------------------
*
* --------------------------------------------------------------------------------------------------*/
.p-top-pickup {
margin-top: 20rem;
padding-block: 6.31rem 22rem;
}
@media screen and (max-width: 767.98px) {
.p-top-pickup {
margin-top: 13rem;
padding: 2rem 1.5rem 13rem;
overflow: hidden;
}
}
.p-top-pickup .c-section__ttl {
font-weight: 900;
}
@media screen and (max-width: 767.98px) {
.p-top-pickup .c-section__ttl {
padding-left: 0;
}
.p-top-pickup .c-section__ttl .c-ttl::before {
left: -4.5rem !important;
top: -2.4rem !important;
}
}
.p-top-pcikup__content-wrapper {
position: relative;
width: fit-content;
margin-inline: auto;
}
@media screen and (max-width: 767.98px) {
.p-top-pcikup__content-wrapper {
width: 100%;
}
}
.p-top-pcikup__content-wrapper::before, .p-top-pcikup__content-wrapper::after {
content: "";
position: absolute;
width: 7rem;
height: 7rem;
z-index: 1;
background: url(../img/common/deco_dots_yellow_sp.png) no-repeat center/100% 100%;
animation: upDonw 3s ease-in-out infinite;
}
.p-top-pcikup__content-wrapper::before {
left: -4rem;
top: -2rem;
animation-delay: 0.5s;
}
@media screen and (max-width: 767.98px) {
.p-top-pcikup__content-wrapper::before {
top: -1rem;
}
}
.p-top-pcikup__content-wrapper::after {
bottom: -3rem;
right: -4rem;
}
.p-top-pcikup__content {
position: relative;
margin: 9.9rem auto 0;
width: 116.6rem;
z-index: 10;
background-color: #fff;
border-radius: 4rem;
padding-top: 11.1rem;
padding-bottom: 2rem;
}
@media screen and (max-width: 767.98px) {
.p-top-pcikup__content {
padding-top: 7rem;
margin-top: 6.9rem;
width: auto;
}
}
.splide {
max-width: 110rem;
margin-inline: auto;
padding-bottom: 7rem;
}
@media screen and (max-width: 767.98px) {
.splide {
/* padding-bottom: 14rem;*/
}
}
.splide:not(.is-overflow) .splide__pagination {
display: flex !important;
}
.splide__pagination {
justify-content: center;
}
@media screen and (max-width: 767.98px) {
.splide__pagination {
bottom: -0.2em;
}
}
.splide__pagination__page {
width: 1.2rem;
height: 1.2rem;
opacity: 1;
background-color: #efdeb9;
margin-inline: 0.4rem;
}
.splide__pagination__page.is-active {
transform: scale(1) !important;
background-color: #5ba938;
}
.splide__arrow {
width: 6.2rem;
height: 6.2rem;
opacity: 1;
top: 14rem;
transform: translateY(0);
}
@media screen and (max-width: 767.98px) {
.splide__arrow {
width: 5.6rem;
height: 5.6rem;
}
}
.splide__arrow--prev {
left: -1.3rem;
}
@media screen and (max-width: 767.98px) {
.splide__arrow--prev {
left: 0.7rem;
}
}
.splide__arrow--next {
right: -1.3rem;
}
@media screen and (max-width: 767.98px) {
.splide__arrow--next {
right: 0.7rem;
}
}
.p-pickup__item {
position: relative;
padding-top: 1.2rem;
height: 100%;
}
.p-pickup__item a {
height: 100%;
display: block;
text-decoration: none;
color: currentColor;
}
@media (any-hover: hover) {
.p-pickup__item a:hover .p-pickup__inner .p-img-wrapper img {
transform: scale(1.1);
}
}
.p-pickup__item::after {
content: "";
position: absolute;
width: 34.6rem;
height: 34.6rem;
left: 50%;
transform: translateX(-50%);
background: url(../img/top/bg_pickup_item.png) no-repeat center/100% 100%;
top: 0;
}
@media screen and (max-width: 767.98px) {
.p-pickup__item::after {
width: 31.6rem;
height: 34.4rem;
}
}
.p-pickup__inner {
position: relative;
z-index: 1;
}
.p-pickup__inner .p-img-wrapper {
width: 31.8rem;
height: 31.8rem;
border-radius: var(--radius);
overflow: hidden;
}
@media screen and (max-width: 767.98px) {
.p-pickup__inner .p-img-wrapper {
width: auto;
appearance: 1/1;
}
}
.p-pickup__inner .p-img-wrapper img {
transition: 0.3s transform;
width: 100%;
height: 100%;
object-fit: cover;
}
.p-pickup__body {
padding-top: 1.4rem;
}
@media screen and (max-width: 767.98px) {
.p-pickup__body {
padding-top: 2.1rem;
}
}
.p-pickup__body time {
display: block;
font-size: 1.6rem;
font-weight: 700;
margin-top: 1rem;
}
@media screen and (max-width: 767.98px) {
.p-pickup__body time {
font-size: 1.2rem;
}
}
.p-pickup__body .c-ttl {
font-size: 1.8rem;
line-height: 1.7222222222;
margin-top: 0.5rem;
}
@media screen and (max-width: 767.98px) {
.p-pickup__body .c-ttl {
font-size: 1.4rem;
margin-top: 1rem;
}
}
/* ----------------------------------------------------------------------------------------------------
* 教室・イベントセクション
* --------------------------------------------------------------------------------------------------*/
:root {
--radius: 2.5rem;
}
.p-top-classevent {
padding-top: 23.4rem;
padding-bottom: 3rem;
position: relative;
}
.p-top-classevent .-deco01 {
width: 13.2rem;
z-index: 2;
top: -5.8rem;
left: calc(50% + 27.3rem);
}
@media screen and (max-width: 767.98px) {
.p-top-classevent .-deco01 {
width: 6.8rem;
left: auto;
right: 5rem;
top: -2.8rem;
}
}
.p-top-classevent .-deco02 {
width: 9.4rem;
top: -4.4rem;
left: calc(50% + 39.3rem);
}
@media screen and (max-width: 767.98px) {
.p-top-classevent .-deco02 {
width: 4.8rem;
left: auto;
right: 1rem;
top: -1.4rem;
}
}
@media screen and (max-width: 767.98px) {
.p-top-classevent {
padding-top: 12.4rem;
padding-bottom: 8rem;
}
}
.p-top-classevent .p-link-list {
margin-top: 10rem;
}
@media screen and (max-width: 767.98px) {
.p-top-classevent .p-link-list {
margin-top: 5rem;
}
}
.p-class__list {
margin-top: 6rem;
display: flex;
flex-wrap: wrap;
gap: 3.6rem;
}
@media screen and (max-width: 767.98px) {
.p-class__list {
margin-top: 5rem;
justify-content: space-between;
gap: 2rem 1rem;
}
}
.p-class__item {
width: 33.8rem;
overflow: hidden;
}
@media screen and (max-width: 767.98px) {
.p-class__item {
width: 17.5rem;
}
}
.p-class__item a {
color: currentColor;
text-decoration: none;
}
@media (any-hover: hover) {
.p-class__item a:hover .p-img-wrapper img {
transform: scale(1.1);
}
}
.p-class__inner .p-img-wrapper {
border-radius: var(--radius) var(--radius) 0 0;
overflow: hidden;
margin-bottom: 0;
}
@media screen and (max-width: 767.98px) {
.p-class__inner .p-img-wrapper {
aspect-ratio: 175/130;
}
}
.p-class__inner .p-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.3s transform;
}
.p-class__body {
margin-top: -5.2rem;
position: relative;
z-index: 1;
}
@media screen and (max-width: 767.98px) {
.p-class__body {
margin-top: -2.6rem;
}
}
.p-class__body .c-category {
border-radius: 0.5rem;
}
@media screen and (max-width: 767.98px) {
.p-class__body .c-category {
font-size: 1.2rem;
padding: 0.5rem;
}
}
.p-class__ttl {
height: 12rem;
background-color: #fff;
display: grid;
place-content: center;
border-radius: 100% 100% var(--radius) var(--radius);
padding-top: 1.5rem;
}
@media screen and (max-width: 767.98px) {
.p-class__ttl {
border-radius: 70% 70% var(--radius) var(--radius);
height: 6.4rem;
padding-top: 0.4rem;
}
}
.p-class__ttl img {
height: 7.5rem;
width: auto;
}
@media screen and (max-width: 767.98px) {
.p-class__ttl img {
height: 4rem;
}
}
.p-link-list {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
@media screen and (max-width: 767.98px) {
.p-link-list {
justify-content: space-between;
gap: 1rem;
}
}
.p-link-item {
min-width: 25.6rem;
}
@media screen and (max-width: 767.98px) {
.p-link-item {
min-width: 17.5rem;
}
}
.p-link-item.-pink a {
border-color: #f093a5;
}
@media (any-hover: hover) {
.p-link-item.-pink a:hover {
background-color: #f093a5;
}
}
.p-link-item.-green a {
border-color: #5ba938;
}
@media (any-hover: hover) {
.p-link-item.-green a:hover {
background-color: #5ba938;
}
}
.p-link-item.-blue a {
border-color: #689bc2;
}
@media (any-hover: hover) {
.p-link-item.-blue a:hover {
background-color: #689bc2;
}
}
.p-link-item.-yellow a {
border-color: #fdd000;
}
@media (any-hover: hover) {
.p-link-item.-yellow a:hover {
background-color: #fdd000;
}
}
.p-link-item a {
transition: 0.3s color, 0.3s background-color;
border-radius: 1000px;
display: grid;
place-content: center;
font-size: 2rem;
min-height: 5rem;
border-width: 0.3rem;
border-style: solid;
background-color: #fff;
text-decoration: none;
color: currentColor;
width: 100%;
font-weight: 500;
}
@media (any-hover: hover) {
.p-link-item a:hover {
color: #fff;
}
}
@media screen and (max-width: 767.98px) {
.p-link-item a {
font-size: 1.4rem;
min-height: 3.4rem;
}
}
/* ----------------------------------------------------------------------------------------------------
* 支援者・保護者向け
* --------------------------------------------------------------------------------------------------*/
.p-top-guardian {
padding-block: 29.6rem 20rem;
}
@media screen and (max-width: 767.98px) {
.p-top-guardian {
padding-block: 13rem 2rem;
}
}
.p-media__list {
display: flex;
flex-wrap: wrap;
max-width: 98.6rem;
justify-content: space-between;
gap: 4rem;
margin: 10rem auto 0;
}
@media screen and (max-width: 767.98px) {
.p-media__list {
margin-top: 4.9rem;
display: block;
}
}
.p-media__item {
width: 46.8rem;
height: 18.5rem;
filter: drop-shadow(10px 10px 0px #fdd000);
will-change: filter;
}
@media screen and (max-width: 767.98px) {
.p-media__item {
width: 35.5rem;
height: 14.3rem;
filter: drop-shadow(4px 4px 0px #fdd000);
}
.p-media__item + .p-media__item {
margin-top: 2.4rem;
}
}
.p-media__item a {
color: currentColor;
text-decoration: none;
}
@media (any-hover: hover) {
.p-media__item a:hover .p-img-wrapper img {
transform: scale(1.1);
}
}
.p-media__inner {
display: grid;
}
.p-media__inner .p-img-wrapper {
grid-column: 1;
grid-row: 1;
overflow: hidden;
margin-left: auto;
border-radius: 0 var(--radius) var(--radius) 0;
margin-bottom: 0;
}
.p-media__inner .p-img-wrapper img {
transition: 0.3s transform;
width: 100%;
height: 100%;
object-fit: cover;
}
.p-media__body {
width: 23.4rem;
background-color: #fff;
grid-column: 1;
grid-row: 1;
position: relative;
z-index: 1;
clip-path: polygon(0 0, 100% 0, calc(100% - 9rem) 100%, 0% 100%);
display: grid;
align-items: center;
padding-left: 1.8rem;
border-radius: var(--radius) 0 0 var(--radius);
padding-bottom: 1.3rem;
}
@media screen and (max-width: 767.98px) {
.p-media__body {
width: 18.5rem;
clip-path: polygon(0 0, 100% 0, calc(100% - 7rem) 100%, 0% 100%);
}
}
.p-media__ttl {
font-size: 2.8rem;
font-weight: 700;
line-height: 1.0285714286;
}
@media screen and (max-width: 767.98px) {
.p-media__ttl {
font-size: 2.1rem;
}
}
/* ----------------------------------------------------------------------------------------------------
* ちあーずの日々～ブログ～
* --------------------------------------------------------------------------------------------------*/
.p-top-blog {
padding-block: 15.5rem 21.1rem;
}
@media screen and (max-width: 767.98px) {
.p-top-blog {
padding-block: 9.5rem 10rem;
}
}
@media screen and (max-width: 767.98px) {
.p-top-blog .c-section__ttl .c-ttl::before {
left: -3.4rem;
top: -2.1rem;
}
}
.p-top-blog .l-card__list {
margin-top: 11rem;
}
@media screen and (max-width: 767.98px) {
.p-top-blog .l-card__list {
margin-top: 5rem;
}
}
.p-top-blog .p-btn-wrapper {
width: 18.1rem;
margin: 7.5rem 1rem 0 auto;
}
@media screen and (max-width: 767.98px) {
.p-top-blog .p-btn-wrapper {
width: 13.4rem;
margin: 5rem 0 0 auto;
}
}
@media (any-hover) {
.p-top-blog .p-btn-wrapper a {
transition: 0.3s opacity;
}
.p-top-blog .p-btn-wrapper a:hover {
opacity: 0.7;
}
}
@media screen and (max-width: 767.98px) {
.p-top-blog .l-card__item:nth-child(n+3) {
display: none;
}
}
.p-link-item__program {
margin-top: 1rem;
}
.p-link-item__program li {
position: relative;
padding: 0 0 0 2.4rem;
line-height: 2.8rem;
margin-left: 2.4rem;
}
.p-link-item__program li::before {
content: "";
position: absolute;
top: 1.1rem;
left: 0;
width: 1.0rem;
height: 1.0rem;
border-radius: 100%;
background: #5BA938;
}
@media screen and (max-width: 767.98px) {
.p-link-item__program li::before {
top: .9rem;
}
}