@charset "UTF-8";

.main {
    overflow: hidden;
}

/* =======================
mainVisual
======================== */
.cpImg__pc {
    display: none;
}

.mainVisual div {
    background-color: #E0EBE2;
}

.mainVisual audio {
    display: block;
    margin: 0 auto;
    width: 100%;
}

/* mainVisual tablet&pc 600px~ */
@media screen and (min-width: 600px) {
    .cpImg__sp {
        display: none;
    }

    .cpImg__pc {
        display: block;
        margin: 0 auto;
    }
    
}
/* mainVisual 600px~ */


/* =================
news
===================== */
.section--cpnews {
    padding: 56px 4.2%;
    background-color: #E0EBE2;
    z-index: 1;
    position: relative;
}

.section--cpnews::after {
    content: '';
    background-image: url(../img/calmplace-news-wave-sp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 102%;
    height: 112px;
    position: absolute;
    top: 100%;
    left: -1%;
}

.title {
    position: relative;
    text-align: left;
}

.section--cpnews .title::after {
    content: 'NEWS';
    font-family: 'Wittgenstein';
    position: absolute;
    top: -18px;
    left: -6%;
    color: #f5f5f5;
    opacity: 40%;
    font-size: 6.4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.03em;
    z-index: -10;
}

.news__txt {
    margin-top: 40px;
    padding: 40px 8px;
    background-color: #f5f5f5;
    border-radius: 25px;
}

.news__click {
    display: flex;
    gap: 24px;
    align-items: baseline;
    justify-content: flex-end;
    color: #4E9C6F;
    margin-top: 80px;
    transition: 0.4s;
    cursor: pointer;
}

.news__click:hover {
    opacity: 50%;
}

.news__btn {
    font-size: 2rem;
}

.news__click svg {
    fill: #4E9C6F;
    width: 80px;
    height: 8px;
    transition: 0.4s;
    cursor: pointer;
}

.news__list img {
    width: 280px;
    height: auto;
    margin-bottom: 8px;
}

.news__item {
    margin-top: 40px;
    font-size: 1.6rem;
    line-height: 1.5;
}

.day,
.place,
.start,
.pay__group,
.address,
.tel,
.host,
.hp,
.mail,
.blog {
    margin-top: 12px;
}

.news__item::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #E0EBE2;
    margin-top: 40px;
}

.news__item:last-of-type::after {
    display: none;
}

.news__item:first-of-type {
    margin-top: 0;
}

.new {
    background-color: #4E9C6F;
    color: #f5f5f5;
    border-radius: 4px;
    font-size: 1.4rem;
    padding: 0 8px 1px;
    margin-left: 4px;
}

.newsItem__txt {
    margin-bottom: 8px;
    font-size: 2rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-top: 4px;
}

.newsItem_day,
.newsItem__day {
    font-size: 1.4rem;
}

.place p:first-of-type {
    white-space: nowrap;
}

.day,
.place,
.start,
.pay__group,
.hostPlayer,
.address,
.host,
.player {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.tel {
    display: flex;
    gap: 22px;
}

.player {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.hostPlayer p {
    margin-top: 0;
}

.pay,
.address__title,
.start p:first-of-type,
.player p:first-of-type{
    white-space: nowrap;
}


.host__player {
    margin-left: 48px;
}


.hp p:last-of-type,
.mail p:last-of-type,
.tel p:first-of-type  {
    overflow-wrap: break-word;
}

.hp p:first-of-type,
.mail p:first-of-type,
.tel p:first-of-type {
    white-space: nowrap;
}

.hp__address,
.mail__address,
.blog__address {
    overflow-wrap: break-word;
    transition: 0.4s;
    cursor: pointer;
}

.newsItem__click {
    transition: 0.4s;
    cursor: pointer;
}

.hp__address:hover,
.mail__address:hover,
.blog__address:hover,
.newsItem__click:hover {
    color: #4E9C6F;
} 

.memo {
    margin-top: 12px;
}

.memo a {
    transition: 0.4s;
    cursor: pointer;
}

.memo a:hover {
    color: #4E9C6f;
}

/* news tablet 600px~ */
@media screen and (min-width: 600px) {
    .section--cpnews {
        padding:  56px 9.7%;
    }

    .section--cpnews .title::after {
        left: -13%;
    }

    .news__txt {
        margin-top: 64px;
        padding: 56px 40px 64px;
    }

    .hp,
    .mail,
    .blog {
        display: flex;
        gap: 16px;
    }
}
/* news 600px~ */



/* news pc 768px */
@media screen and (min-width: 768px) {
    .section--cpnews {
        padding: 80px 9.7% 80px;
    }
}

/* news pc 1024px */
@media screen and (min-width: 1024px) {
    .section--cpnews {
        padding:  120px 9.7% 56px;
    }

    .section--cpnews .title::after {
        font-size: 9.6rem;
        top: -30px;
        left: -13%;
    }

    .news__item {
        letter-spacing: 0.08em;
        line-height: 1.6;
    }

    .news__txt {
        padding: 80px 32px;
        max-width: 1160px;
        margin: 112px auto 0;
    }

    .host__group,
    .hp {
        display: flex;
        align-items: baseline;
        gap: 16px;
    }

    .pay__group {
        gap: 16px;
    }

    .host__player,
    .hp p:last-of-type {
        margin-left: 0;
    }

    .wp-pagenavi {
        margin-top: 96px;
    }

    .thumbnailandcontent {
        display: flex;
    }

    .newsItem_day,
    .newsItem__day,
    .newsItem__txt,
    .thumbnailandcontent {
        margin-left: 32px;
    }

    .thumbnail img {
        margin-right: 20px;
        margin-top: 4px;
        width: 280px;
        height: auto;
    }

    .newsItem__content div:first-of-type {
        margin-top: 0;
    }

    .news__click {
        margin-top: 120px;
    }
}
/* news 1024px */

/* news pc 1440px */
@media screen and (min-width: 1440px) {
    .thumbnail img {
        margin-right: 32px;
    }

    .newsItem_day,
    .newsItem__txt,
    .thumbnailandcontent {
        margin-left: 104px;
    }
}

/* news pc 1800px */
@media screen and (min-width: 1800px) {
    .section--cpnews .title {
        text-align: center;
    }

    .section--cpnews .title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .section--cpnews::after {
        background-size: cover;
        width: 100%;
        height: 154px;
        left: 0%;
    }
}

/* =============================
profile
=============================== */

.section--cpProfile {
    padding: 80px 4.2%;
}

.section--cpProfile .title {
    text-align: center;
}

.section--cpProfile .title::after {
    content: 'PROFILE';
    font-family: 'Wittgenstein';
    position: absolute;
    top: -75%;
    left: 50%;
    transform: translateX(-50%);
    color: #E0EBE2;
    opacity: 30%;
    font-size: 6.4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.03em;
    z-index: -10;
}

.profile__txt {
    margin-top: 88px;
}

.profile__content {
    position: relative;
}

.profile__content::after {
    content: '';
    position: absolute;
    width: 104%;
    height: 114%;
    background-color: #E0EBE2;
    border-radius: 0 48px 0 0;
    top: -17px;
    right: -4.2%;
    z-index: -10;
}

.profileImg__pc {
    display: none;
}

.profileImg__sp {
    margin: 0 calc(50% - 50vw);
    border-radius: 0 48px 0 0;
}

.cpName__e {
    font-family: 'Wittgenstein';
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    top: -30px;
    left: 0;
}

.cpName__j {
    font-family: 'Wittgenstein';
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    position: absolute;
    bottom: -11%;
    right: -4.2%;
}


.cp__txt {
    margin-top: 80px;
    font-size: 1.6rem;
    text-align: center;
    line-height: 2;
    letter-spacing: 0.05em;
}

.member__group {
    margin-top: 60px;
}

.member__title {
    font-family: 'Wittgenstein';
    font-size: 2.4rem;
    color: #4E9C6F;
    text-align: center;
    width: 112px;
    margin: 0 auto;
    position: relative;
}

.member__title::before {
    content: '';
    width: 80px;
    height: 1px;
    background-color: #4E9C6F;
    position: absolute;
    top: 16px;
    left: -72%;
}

.member__title::after {
    content: '';
    width: 80px;
    height: 1px;
    background-color: #4E9C6F;
    position: absolute;
    top: 16px;
    right: -72%;
}

.individual {
    max-width: 346px;
    margin: 40px auto 0;
}

.individual__group {
    position: relative;
    margin: 0 auto;
}

.individual__content {
    display: block;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    margin: 40px auto 0;
    transition: 0.4s;
    cursor: pointer;
}

.individual__content:hover {
    opacity: 0.5;
}

.img__cp {
    width: auto;
    object-fit: cover;
}

.part {
    position: absolute;
    top: 20px;
    left: 1px;
    font-size: 1.6rem;
}

.name {
    position: absolute;
    width: max-content;
    top: 40px;
    left: 0;
    font-size: 2rem;
    font-weight: 700;
    padding-right: 4px;
    background-color: #f5f5f5;
}

.profile__click {
    display: flex;
    gap: 24px;
    align-items: baseline;
    justify-content: flex-end;
    color: #4E9C6F;
    margin-top: 56px;
    transition: 0.4s;
    cursor: pointer;
}

.profile__click:hover {
    opacity: 50%;
}

.profile__btn {
    font-size: 2rem;
    font-weight: 700;
}

.profile__click svg {
    fill: #4E9C6F;
    width: 80px;
    height: 8px;
    transition: 0.4s;
    cursor: pointer;
}


/* profile ~320px */
@media screen and (max-width: 320px) {
    .individual__content {
        width: 80vw;
        height: 80vw;
    }
}
/* profile ~320px */

/* profile tablet 600px~ */
@media screen and (min-width: 600px) {
    .section--cpProfile {
        padding: 112px 9.7% 56px;
    }

    .profileImg__sp {
        display: none;
    }

    .profileImg__pc {
        display: block;
        margin-left: -12.8%;
        max-width: 112.8%;
        border-radius: 0 48px 0 0;
    }

    .cpName__e {
        top: -49px;
    }

    .cpName__j {
        bottom: -16%;
        right: -11.8%;
        font-size: 2rem;
    }

    .profile__content::after {
        width: 117%;
        height: 122%;
        top: -36px;
        right: -11.8%;
    }

    .cp__txt {
        max-width: 600px;
        margin: 100px auto 0;
        position: relative;
        line-height: 2.1;
        letter-spacing: 0.1em;
    }

    .member__group {
        margin-top: 64px;
    }
}

/* profile tablet 768px~ */
@media screen and (min-width: 768px) {
    .player__txt {
        letter-spacing: 0.15em;
        line-height: 2;
    }

    .cpName__e {
        font-size: 3.2rem;
        top: -50px;
    }
}

/* profile pc 1024px */
@media screen and (min-width: 1024px) {
    .profileImg__pc {
        display: block;
        border-radius: 0 48px 0 0;
        width: 105%;
        margin-left: -13.8%;
    }

    .section--cpProfile {
        padding: 160px 9.7% 240px;
    }

    .section--cpProfile .title::after {
        font-size: 9.6rem;
        top: -30px;
    }

    .profile__content::after {
        width: 105%;
        height: 102%;
        top: -44px;
        right: unset;
        left: -8%;
    }

    .profile__click {
        margin-top: 120px;
    }

    .cp__name {
        margin-top: 80px;
    }

    .cpName__j {
        line-height: 1.3;
        font-size: 2.4rem;
        bottom: 4%;
        right: 3%;
    }

    .cpName__e {
        font-size: 4.8rem;
        line-height: 1.3;
        top: -76px;
    }

    .cp__line {
        width: 300px;
        top: 78px;
    }

    .profile__txt {
        display: flex;
        margin-top: 160px;
    }

    .member__group {
        margin: 120px auto 0;
        max-width: 1160px;
    }

    .member__title {
        margin: 0;
        font-size: 3.2rem;
        width: 120px;
    }

    .member__title::before {
        top: 24px;
        left: -88%;
    }

    .member__title::after {
        top: 24px;
        right: -88%;
    }

    .cp__txt {
        writing-mode: vertical-rl;
        text-align: left;
        margin-top: 16px;
        letter-spacing: 0.3em;
    }

    .individual {
        margin: 96px auto 0;
        position: relative;
        height: 1000px;
        max-width: unset;
    }

    .individual__group:first-of-type {
        position: absolute;
        top: 325px;
        left: 34%;
    }

    .individual__group:nth-of-type(2) {
        position: absolute;
        top: 0;
        right: 0;
    }

    .individual__group:nth-of-type(3) {
        position: absolute;
        top: 0;
        left: 0;
    }

    .individual__group:nth-of-type(4) {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .individual__group:last-of-type {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .name {
        top: 0;
        left: 104px;
        transform: rotate(0deg);
        letter-spacing: 0.05em;
    }

    .part {
        top: -22px;
        left: 104px;
        transform: rotate(0deg);
        letter-spacing: 0.05em;
    }
}

/* profile pc 1300px  */
@media screen and (min-width: 1300px) {
    .individual__content {
    width: 360px;
    height: 360px;
    }
}

/* profile pc 1440px */
@media screen and (min-width: 1440px) {
    .profile__content::after {
        width: 100%;
        height: 102%;
        top: -44px;
        right: unset;
        left: -8%;
    }

    .profileImg__pc {
        margin-left: -13.8%;
        display: block;
        width: 100%;
    }

    .cp__txt {
        font-size: 2rem;
    }

    .cpName__j {
        bottom: 2%;
        right: 8%;
    }
}

/* profile pc 1800px */
@media screen and (min-width: 1800px) {
    .section--cpProfile {
        padding: 300px 17% 240px;
    }

    .profile__txt {
        max-width: 1160px;
        margin: 216px auto 0;
    }
}

/* =============================
fade in
============================== */
.fadeIn {
    transform: translate(0, 50px);
    opacity: 0;
    transition: 0.8s;
}

.fadeIn.animated {
    transform: translate(0, 0);
    opacity: 1;
}