@charset "utf-8";
@import url("all.min.css");
@import url("base.css");
/*------------------
editor.css
------------------*/

/* block editor 専用 */
html :where(.editor-styles-wrapper) p{
    margin:unset;
}

/* title */
.post-ttl{
    padding:.5em;
    border-top:2px solid var(--color-primary);
    border-bottom:2px solid var(--color-primary);
    background: var(--color-bg02);
    font-size:var(--text-3xl);
    line-height:1.4;
}
@media only screen and (max-width: 599px) {
    .post-ttl{
        padding:.5em;
        font-size:var(--text-2xl);
    }
}
.block-ttl01{
    margin-top:4em;
    border-bottom:3px solid var(--color-primary);
    padding:.3em;
    font-size:1.3em;
    line-height: 1.2;
}
.block-ttl02{
    margin-top:2.5em;
    font-size:1.2rem;
}
.block-ttl02:before{
    content:'';
    display: inline-block;
    width:10px;
    height:10px;
    background:var(--color-primary);
    margin-right:.2em;
}

/* btn */
.btn-01{
    padding:.8em 2em .8em 1em;
    background: var(--color-primary);
    position: relative;
    max-width:300px;
    border:2px solid var(--cl-black);
}
.btn-01:before{
    font-family: "Font Awesome 5 Free";
    content:'\f105';
    font-weight: 900;
    display: inline-block;
    position: absolute;
    right:1em;
    top: 50%;
    transform: translateY(-50%);
}

/* txt */
.block-txt{
    margin-top:4em;
}

/* img */
.block-img{
    margin-top:4em;
    text-align: center;
}
.block-img img{
    display: inline-block;
    border:10px solid var(--cl-white);
    box-shadow: var(--box-shadow);
    width:95%;
}

/* balloon */
.balloon{
    margin-top:4em;
    position: relative;
}
.balloon .balloon-icon{
    width:105px;
    height:100px;
    border-radius: 50%;
    position: relative;
    border:5px solid var(--cl-white);
    flex-basis: 105px!important;
    background-position: center;
    box-shadow: var(--box-shadow);
}
.balloon.mike .balloon-icon{
    background: url(../images/crew/mike.png) var(--color-bg01);
    background-size: cover;
}
.balloon.gary .balloon-icon{
    background: url(../images/crew/gary.png) var(--color-bg02);
    background-size: cover;
}
.balloon.sam .balloon-icon{
    background: url(../images/crew/sam.png) var(--color-bg03);
    background-size: cover;
}
.balloon.lenny .balloon-icon{
    background: url(../images/crew/lenny.png) var(--color-bg04);
    background-size: cover;
}
.balloon.pete .balloon-icon{
    background: url(../images/crew/pete.png) var(--color-bg05);
    background-size: cover;
}
.balloon.zombie .balloon-icon{
    background: url(../images/crew/zombie.png) var(--color-bg06);
    background-size: cover;
}
.balloon.skeleton .balloon-icon{
    background: url(../images/crew/skeleton.png) var(--color-bg06);
    background-size: cover;
}
.balloon.creeper .balloon-icon{
    background: url(../images/crew/creeper.png) var(--color-bg06);
    background-size: cover;
}
.balloon.enderman .balloon-icon{
    background: url(../images/crew/enderman.png) var(--color-bg06);
    background-size: cover;
}
.balloon.witch .balloon-icon{
    background: url(../images/crew/witch.png) var(--color-bg06);
    background-size: cover;
}
.balloon.pillager .balloon-icon{
    background: url(../images/crew/pillager.png) var(--color-bg06);
    background-size: cover;
}
.balloon .balloon-icon:after{
    display: block;
    bottom:0;
    position: absolute;
    bottom:-2.5em;
    left:50%;
    transform: translateX(-50%);
    font-size:.7rem;
    font-weight:bold;
    width: 100%;
    text-align: center;
}
.balloon.mike .balloon-icon:after{
    content:'マイク';
}
.balloon.gary .balloon-icon:after{
    content:'ゲイリー';
}
.balloon.sam .balloon-icon:after{
    content:'サム';
}
.balloon.lenny .balloon-icon:after{
    content:'レニー';
}
.balloon.pete .balloon-icon:after{
    content:'ピート';
}
.balloon.zombie .balloon-icon:after{
    content:'ゾンビ';
}
.balloon.skeleton .balloon-icon:after{
    content:'スケルトン';
}
.balloon.creeper .balloon-icon:after{
    content:'クリーパー';
}
.balloon.enderman .balloon-icon:after{
    content:'エンダーマン';
}
.balloon.witch .balloon-icon:after{
    content:'ウィッチ';
}
.balloon.pillager .balloon-icon:after{
    content:'襲撃者';
}
.balloon .balloon-icon:before{
    content:'';
    display: inline-block;
    z-index:2;
    position: absolute;
    top:-.5em;
    left:-1em;
    width:40px;
    height:40px;
}
.balloon.c-i .balloon-icon:before{
    left:auto;
    right:-1em;
}
.balloon.anger .balloon-icon:before{
    background: url(../images/feel/anger.png);
    background-size: cover;
}
.balloon.gaan .balloon-icon:before{
    background: url(../images/feel/gaan.png);
    background-size: cover;
}
.balloon.heartbreak .balloon-icon:before{
    background: url(../images/feel/heartbreak.png);
    background-size: cover;
}
.balloon.kirakira .balloon-icon:before{
    background: url(../images/feel/kirakira.png);
    background-size: cover;
}
.balloon.love .balloon-icon:before{
    background: url(../images/feel/love.png);
    background-size: cover;
}
.balloon.lovelove .balloon-icon:before{
    background: url(../images/feel/lovelove.png);
    background-size: cover;
}
.balloon.question .balloon-icon:before{
    background: url(../images/feel/question.png);
    background-size: cover;
}
.balloon.really .balloon-icon:before{
    background: url(../images/feel/really.png);
    background-size: cover;
}
.balloon.silent .balloon-icon:before{
    background: url(../images/feel/silent.png);
    background-size: cover;
}
.balloon.surprise .balloon-icon:before{
    background: url(../images/feel/surprise.png);
    background-size: cover;
}
.balloon.sweat .balloon-icon:before{
    background: url(../images/feel/sweat.png);
    background-size: cover;
}
.balloon.thought .balloon-icon:before{
    background: url(../images/feel/thought.png);
    background-size: cover;
}

.balloon .balloon-comment {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-basis: calc(100% - 105px)!important;
    padding:1em;
    border:2px solid var(--cl-black);
    border-radius: 6px;
    box-shadow: var(--box-shadow);
}
.balloon.mike .balloon-comment {
    background-color: var(--color-bg01);
}
.balloon.gary .balloon-comment {
    background-color: var(--color-bg02);
}
.balloon.sam .balloon-comment {
    background-color: var(--color-bg03);
}
.balloon.lenny .balloon-comment {
    background-color: var(--color-bg04);
}
.balloon.pete .balloon-comment {
    background-color: var(--color-bg05);
}
.balloon.zombie .balloon-comment,
.balloon.skeleton .balloon-comment,
.balloon.creeper .balloon-comment,
.balloon.enderman .balloon-comment,
.balloon.witch .balloon-comment,
.balloon.pillager .balloon-comment {
    background-color: var(--color-bg06);
}

.balloon .balloon-comment > p {
    width:100%;
}
.balloon .balloon-comment > p:last-child {
    margin-bottom:0;
}
.balloon .balloon-comment::before {
  content: "";
  position: absolute;
  top: 2.5em;
  left: 0;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: transparent var(--cl-black) transparent transparent;
  translate: -100% -50%;
}
.balloon .balloon-comment::after {
  content: "";
  position: absolute;
  top: 2.5em;
  left: 0;
  border-style: solid;
  border-width: 15.2px 15.2px 0 0;
  border-color: transparent var(--cl-white) transparent transparent;
  translate: -100% calc(-50% + 0.4px);
}
.balloon.mike .balloon-comment::after {
    border-color: transparent var(--color-bg01) transparent transparent;
}
.balloon.gary .balloon-comment::after {
    border-color: transparent var(--color-bg02) transparent transparent;
}
.balloon.sam .balloon-comment::after {
    border-color: transparent var(--color-bg03) transparent transparent;
}
.balloon.lenny .balloon-comment::after {
    border-color: transparent var(--color-bg04) transparent transparent;
}
.balloon.pete .balloon-comment::after {
    border-color: transparent var(--color-bg05) transparent transparent;
}
.balloon.zombie .balloon-comment::after,
.balloon.skeleton .balloon-comment::after,
.balloon.creeper .balloon-comment::after,
.balloon.enderman .balloon-comment::after,
.balloon.witch .balloon-comment::after,
.balloon.pillager .balloon-comment::after {
    border-color: transparent var(--color-bg06) transparent transparent;
}

.balloon.c-i .balloon-comment::before{
    left: auto;
    right:0;
    border-width: 20px 0 0 20px;
    border-color: transparent transparent transparent var(--cl-black);
    translate: 100% -50%;
}
.balloon.c-i .balloon-comment::after{
    left: auto;
    right:0;
    border-width: 15.2px 0 0 15.2px;
    border-color: transparent transparent transparent var(--color-bg-default);
    translate: 100% calc(-50% + 0.4px);
}
.balloon.c-i.mike .balloon-comment::after {
    border-color: transparent transparent transparent var(--color-bg01);
}
.balloon.c-i.gary .balloon-comment::after {
    border-color: transparent transparent transparent var(--color-bg02);
}
.balloon.c-i.sam .balloon-comment::after {
    border-color: transparent transparent transparent var(--color-bg03);
}
.balloon.c-i.lenny .balloon-comment::after {
    border-color: transparent transparent transparent var(--color-bg04);
}
.balloon.c-i.pete .balloon-comment::after {
    border-color: transparent transparent transparent var(--color-bg05);
}
.balloon.c-i.zombie .balloon-comment::after,
.balloon.c-i.skeleton .balloon-comment::after,
.balloon.c-i.creeper .balloon-comment::after,
.balloon.c-i.enderman .balloon-comment::after,
.balloon.c-i.witch .balloon-comment::after,
.balloon.c-i.pillager .balloon-comment::after {
    border-color: transparent transparent transparent var(--color-bg06);
}

@media only screen and (max-width: 1024px) {
    .balloon .balloon-icon{
        width: 70px;
        height: 70px;
        flex-basis: 79px !important;
    }
    .balloon .balloon-comment {
        flex-basis: calc(100% - 75px)!important;
    }
    .balloon .balloon-icon:after{
        font-size:1rem;
    }
    .balloon .balloon-icon:before{
        top:-1.2em;
        left:-1.7em;
    }
    .balloon.c-i .balloon-icon:before{
        left:auto;
        right:-1.7em;
    }
}

/* admin icon */
.balloon.big .balloon-icon{
    width:135px;
    height:130px;
}
.balloon.may .balloon-icon{
    background: url(../images/other/may.png) var(--cl-white);
    background-size: cover;
}
.balloon.may .balloon-icon:after{
    content:'may';
}
.balloon.may .balloon-comment {
    background-color: var(--color-bg04);
}
.balloon.may .balloon-comment::after {
    border-color: transparent var(--color-bg04) transparent transparent;
}
.balloon.c-i.may .balloon-comment::after {
    border-color: transparent transparent transparent var(--color-bg04);
}
.balloon.gemi .balloon-icon{
    background: url(../images/other/gemi.png) var(--cl-white);
    background-size: cover;
}
.balloon.gemi .balloon-icon:after{
    content:'ジェミ';
}
.balloon.gemi .balloon-comment {
    background-color: var(--color-bg02);
}
.balloon.gemi .balloon-comment::after {
    border-color: transparent var(--color-bg02) transparent transparent;
}
.balloon.c-i.gemi .balloon-comment::after {
    border-color: transparent transparent transparent var(--color-bg02);
}

/* member list */
.memebers-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap:2em;
    margin-bottom:4em;
}
.memebers-list > *{
    margin-top:2em;
}