@charset "UTF-8";

/* ==================================================
section__craftsTitle
================================================== */
.topics__crafts img {
    width: 100%;
    height: 208px;
    object-fit: cover;
    margin-top: 52px;
}

.topics__craftsPC {
    background-color: #EDFFCB;
    height: 159px;
}

@media screen and (min-width: 650px) {
    .topics__crafts img {
        max-width: 891px;
        height: 354px;
        margin: 30px auto 0;
    }

    .topics__craftsPC {
        background-color: #EDFFCB;
        height: 281px;
    }
}
/* pc 769px */

@media screen and (min-width: 1230px) {
    .topics__crafts img {
        margin-top: 70px;
    }
}
/* ==================================================
section__about
================================================== */
.about__crafts {
    margin-top: 120px;
    padding: 0 9.8%;
}

@media screen and (min-width: 769px) {
    .about__crafts {
        margin: 75px auto 0;
        width: 632px;
        padding: 0;
        font-size: 1.6rem;
    }
}
/* pc 769px */

/* ==================================================
section__piece
================================================== */
.section__piece {
    margin-top: 66px;
}

.pieceAll__pc {
    display: none;
}

@media screen and (min-width: 769px) {
    .section__piece {
        padding: 0 8.3%;
    }

    .pieceAll {
        display: none;
    }

    .pieceAll__pc {
        display: block;
        width: 100%;
        max-width: 1224px;
        margin: 0 auto;
    }
}
/* pc 769px */

/* ==================================================
section__activity
================================================== */
.section__activity {
    margin-top: 50px;
    padding: 0 5.3%;
}

.topic__activity {
    width: 206px;
    margin: 0 auto;
}

.activity__item {
    margin-top: 45px;
    font-size: 20px;
}

.activity__item:first-of-type {
    margin-top: 30px;
}

.activity__txt {
    margin-left: 39px;
    font-size: 16px;
}

.activity__number {
    margin-right: 10px;
    display: inline-block;
    width: 27px;
    height: 27px;
    background-color: #33A65E;
    border-radius: 50%;
    text-align: center;

    color: #FFFFFF;
    font-family: "Gen Jyuu Gothic";
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.7;
}

.activity__img {
    margin-top: 20px;
    border-radius: 20px;
}

.activity__img1 {
    border: solid 5px #99D02B;
}

.activity__img2 {
    border: solid 5px #FF9914;
}

.activity__img3 {
    border: solid 5px #1D86AE;
}

.activity__img4 {
    border: solid 5px #DF4C94;
}

.skull {
    width: 138px;
    height: 156px;
    display: block;
    margin: 113px auto 0;
    animation: swing 1.5s ease-in-out infinite alternate;
}

.crafts__border {
    position: relative;
    width: 138px;
    height: 156px;
    margin: 0 auto;
}

.crafts__border::before {
    content: '';
    width: 30px;
    height: 30px;
    display: inline-block;
    background-image: url(../images/border.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -1px;
    right: 3px;
    transform: rotate(90deg);
}

.crafts__border::after {
    content: '';
    width: 144px;
    height: 72px;
    display: inline-block;
    background-image: url(../images/bubble2-4.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -64px;
    left: -46px;
    transform: rotate(-4deg);
}

.gallery__txt {
    margin: 28px auto 0;
    text-align: center;
}

.gallery__btn {
    width: 128px;
    position: relative;
    margin: 30px auto 0;
    display: block;
}

.gallery__btn::after {
    content: '';
    width: 150px;
    border: solid 1px #222222;
    display: inline-block;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease 0s;
    
}

.gallery__btn:hover:after {
    width: 0px;
    height: 0px;
    visibility: hidden;
}

.gallery__btn::before {
    content: '';
    width: 34px;
    height: 34px;
    display: inline-block;
    background-image: url(../images/brush.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -6px;
    left: -38px;
}

@media screen and (min-width: 769px) {
    .section__activity {
        display: grid;
        justify-content: center;
    }

    .topic__activity {
        width: 242px;
    }

    .activity__list {
        width: 720px;
    }

    .activity__item {
        position: relative;
        height: 260px;
        display: flex;
    }

    .activity__item:first-of-type {
        margin-top: 45px;
    }

    .activity__img {
        width: 335px;
    }

    .activity__pc {
        position: relative;
        display: block;
        font-size: 3rem;
    }

    .activity__number {
        margin: 12px 10px 0 0;
        width: 40px;
        height: 40px;
    
        font-size: 2.6rem;
        font-weight: 700;
        line-height: 1.5;
    }

    .activity__txt {
        position: relative;
        font-size: 1.6rem;
        margin: 0;
    }

    .activity__txt1::after {
        content: '';
        width: 50px;
        height: 50px;
        display: inline-block;
        background-image: url(../images/arrow.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        bottom: -75px;
        left: 103px;
    }

    .activity__pc1::after {
        content: '';
        width: 50px;
        height: 50px;
        display: inline-block;
        background-image: url(../images/arrow.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 132px;
        left: 103px;
    }

    .activity__img1,
    .activity__img2,
    .activity__img3,
    .activity__img4 {
        margin: 0;
        position: absolute;
        top: 0;
        right: 0;
    }

    .section__activity {
        position: relative;
        margin-top: 115px;
    }

    .crafts__border {
        position: relative;
        top: 100px;
        left: 300px;
    }

    .skull {
        margin: 0;
    }

    .gallery__txt {
        font-size: 1.6rem;
        margin: -30px auto 0;
    }
}
/* pc 769px */

/* ==================================================
class__price
================================================== */
.class__price {
    background: linear-gradient(270deg, rgba(217, 255, 144, 0.80) 0%, rgba(135, 250, 158, 0.80) 50%, rgba(161, 232, 113, 0.80) 100%);
    margin-top: 51px;
    padding: 30px 5.3%;
}

@media screen and (min-width: 769px) {
    .class__price {
        margin-top: 115px;
        display: flex;
        justify-content: center;
    } 
}
/* pc 769px */

/* ==================================================
section__class
================================================== */
.section__class {
    position: relative;
    background-color: #FFFFFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    padding: 26px 18px;
    text-align: center;
}

.topic__class {
    width: 132px;
    margin: 0 auto;
}

.class__txt1 {
    margin-top: 34px;
    display: inline-block;
    text-align: left;
}

.class__list {
    margin: 15px 0;
    gap: 17px;
}

.class__item {
    position: relative;
    z-index: 10;
}

.class__time {
    margin-bottom: 11px;
}

.class__time2 {
    margin: 0 auto;
    width: 258px;
    text-align: left;
}

.class__item,last-of-type {
    margin-top: 17px;
}

.class__item::before {
    content: '';
    width: 51px;
    height: 22px;
    background-color: #D9FF90;
    display: inline-block;
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -10;
}

.class__txt2 {
    font-size: 1.2rem;
    display: inline-block;
    text-align: left;
}

.class__txt3 {
    margin-top: 10px;
    display: inline-block;
    text-align: left;
    font-size: 1.6rem;
}

@media screen and (min-width: 769px) {
    .section__class {
        width: 580px;
        padding: 26px 4%;
    }

    .topic__class {
        width: 161px;
    }

    .class__txt1 {
        margin-top: 30px;
        text-align: center;
    }

    .class__list {
        width: 327px;
        margin: 0 auto;
    }

    .class__item {
        display: flex;
        margin-bottom: 0;
        text-align: left;
    }

    .class__item:last-of-type {
        margin-top: 0;
    }

    .class__time {
        font-size: 1.6rem;
        margin-right: 30px;
    }

    .class__item::before {
        top: 15px;
        left: 15px;
    }

    .class__txt2 {
        margin-top: 23px;
        font-size: 1.6rem;
    }

    .class__txt23 {
        text-align: left;
        margin: 0 auto;
        line-height: 1.5;
    }

}
/* pc 769px */

/* ==================================================
section__price
================================================== */
.section__price {
    position: relative;
    background-color: #FFFFFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    padding: 28px 0;
    text-align: center;
    margin-top: 23px;
}

.topic__price {
    width: 112px;
    margin: 0 auto;
}

.price__item1 {
    position: relative;
    margin-top: 18px;
    font-size: 2.2rem;
}

.price__item1::after {
    content: '';
    width: 195px;
    height: 1.5px;
    background-color: #222222;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.price__item2 {
    margin-top: 30px;
}

.price__item2 div {
    font-size: 1.4rem;
}

.price__item3 {
    margin-top: 30px;
    font-size: 1.4rem;
}

/* section__contact */
.section__contact {
    margin-top: 0;
}

@media screen and (min-width: 769px) {
    .section__price {
        width: 580px;
        margin: 0 0 0 36px;
        padding: 4.8% 4%;
    }

    .topic__price {
        width: 152px;
    }

    .price__item1 {
        margin-top: 32px;
        font-size: 2rem;
    }

    .price__item2 {
        margin-top: 50px;
        font-size: 1.8rem;
    }

    .price__item2 div {
        font-size: 1.6rem;
    }

    .price__item3 {
        margin-top: 40px;
        font-size: 1.6rem;
    }

    /* contact */
    .contact__div {
        margin-top: 0px;
    }
}

/* pc 769px */

/* ==================================================
section__voice
================================================== */
.voice__topic {
    margin: 36px auto 0;
    width: 205px;
}

.voice__list {
    margin: 20px 24px 0;
}

.voice__item {
    background-color: #FEF5B5;
    border-radius: 30px;
    margin: 0 10px;
    min-height: 557px;
}

.voice__picture {
    margin: 14px auto 0;
    width: 90%;
    border-radius: 20px;
}

.voice__txt1 {
    position: relative;
    margin-top: 34px;
    text-align: center;
    font-weight: 700;
    z-index: 10;
    line-height: 1.4;
}

.voice__txt1::before {
    content: '';
    width: 267px;
    height: 64px;
    background-image: url(../images/bubble4.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -10;
}

.voice__txt2 {
    margin: 24px 18px 0;
}

.voice__txt3 {
    margin: 10px 18px 20px;
}

.slick-prev:before, 
.slick-next:before {
    color: #FFE72E;
    font-size: 3rem;
}

.slick-next {
    right: -4px;
}

.slick-prev {
    left: -14px;
    z-index: 10;
}

.slick-prev, .slick-next {
    width: auto;
    height: auto;
}

.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #FFE72E;
    font-size: 1.4rem;
}

.slick-dots {
    left: 0;
    bottom: -32px;
}

.slick-dots li {
    width: 25px;
}

.slick-slide {
    width: 313px;
}

@media screen and (min-width: 769px) {
    .voice__topic {
        width: 244px;
        margin-top: 60px;
    }

    .voice__topic::before {
        top: -11px;
        left: -9px;
    }

    .voice__list {
        max-width: 1183px;
        margin: 36px auto;
        padding: 0 65px;
    }

    .voice__item {
        min-height: 594px;
    }

    .slick-prev {
        left: 10px;
    }

    .slick-next {
        right: 10px;
    }

    .slick-prev:before, .slick-next:before {
        font-size: 5rem;
    }

    .slick-dots li button:before,
    .slick-dots li.slick-active button:before {
        font-size: 1.9rem;
    }

    .slick-dots {
        bottom: -50px;
    }

    .slick-dots li {
        width: 35px;
    }
    
}
/* pc 769px */

@media screen and (min-width: 1100px) {
    .voice__item {
        min-height: 570px;
    }
}


/* ==================================================
section__faq
================================================== */
.section__faq {
    background: linear-gradient(270deg, rgba(217, 255, 144, 0.30) 0%, rgba(125, 255, 151, 0.30) 50%, rgba(161, 232, 113, 0.30) 100%);
    padding: 43px 5.3% 31px;
    margin-top: 50px;
}

.faq__topic {
    margin: 0 auto;
    width: 227px;
}

.faq__list {
    margin-top: 20px
}

.faq__itemQA {
    display: flex;
    align-items: center;
}

.faq__itemQA--Q {
    background-color: #FFFFFF;
    padding: 8px 20px;
    height: 45px;
    width: 100%;
    border-radius: 7px;
    margin-top: 10px;
}

.faq__qa,
.faq__txt1 {
    font-weight: 700;
}

.faq__txt1 {
    margin-left: 5px;
}

.faq__itemQA--A {
    margin-left: 22px;
    margin-top: 10px;
}

.faq__txt2 {
    margin-left: 6px;
}

.faq__itemQA--A {
    display: flex;
    align-items: start;
}

@media screen and (min-width: 769px) {
    .section__faq {
        padding: 43px 5.3% 56px;
        margin-top: 80px;
    }

    .faq__topic {
        width: 268px;
    }

    .faq__list {
        max-width: 750px;
        margin: 0 auto;
    }

    .faq__itemQA--Q {
        margin-top: 30px;
    }
}
/* pc 769px */

/* ==================================================
section__access
================================================== */
.section__access {
    margin-top: 47px;
}

.access__txt3 {
    margin-top: 44px;
    text-align: left;
}

.access__img {
    margin-top: 11px;
}

.footer {
    margin-top: 48px;
}



@media screen and (min-width: 769px) {
    .section__access {      
        max-width: 1280px;
        padding: 0 8.3%;
        margin: 67px auto 62px;
    }

    .access__div2{
        display: flex;
        margin: 40px auto;
        gap: 30px;
    }

    .access__txt3 {
        margin-top: 0;
    }

    .access__img {
        width: 65%;
        margin: 0;
    }
    
}
/* pc 769px */