/* =====================================================
 * ゆけ！ぴよ丸 LP用CSS
 * ショートコード [yuke_piyomaru] と合わせて使用
 * ===================================================== */

/* タイトル */
h1.yp-title{
    text-align: center;
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0.5em 0;
    padding: 0;
    line-height: 1.6;
    border: none;
    background: none;
    color: inherit;
}
h1.yp-title .yp-title__sub{
    font-size: 0.7rem;
    font-weight: normal;
}

/* ゲームキャンバス */
#gameContainer canvas {
    display: block;
    background: #a18b7b;
}
#gameContainer {
    width: 100%;
    max-width: 370px;
    height: 460px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e2d8d0;
}

/* フォームコンテナ */
.formbox{
    position: relative;
    z-index: 10;
}

/* 上部ボタンボックス */
.top-buttonbox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.top-buttonbox .buttonbox-button .swell-block-button__link{
    height: 30px;
    padding: 4px 8px;
}

/* アンカーリンクボタン（夏カラー） */
.top-buttonbox a.btn-border {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    display: inline-block;
    user-select: none;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.5rem;
    padding: 6px 10px;
    color: #5aab10;
    border: 3px solid #5aab10;
    background: #f5ffef;
    overflow: hidden;
}
.top-buttonbox a.btn-border:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    top: 0;
    bottom: 0;
    left: -100%;
    margin: auto 0;
    z-index: 1;
    opacity: 0.4;
    transition: 0.2s;
}
.top-buttonbox a.btn-border:hover:before {
    left: 0;
}

/* BGMボタン */
.bgmselect{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 42px;
    cursor: pointer;
}
.bgmselect .bgmicon{
    width: 26px;
}
.bgmselect .bgmtext{
    font-size: 10px;
}

/* アコーディオン装飾 */
.acd01,
.acd02{
    position: relative;
}
.swell-block-accordion .swell-block-accordion__icon{
    color: #FACE75;
}

/* 隠れピヨ丸 */
.swell-block-accordion__item h4{
    margin-top: 0 !important;
}
.hide-piyomaru{
    position: absolute;
    right: 20px;
    width: 60px;
    transform: rotate(180deg);
    object-fit: contain;
    aspect-ratio: 1/1;
}
.swell-block-accordion__item.is-opened .hide-piyomaru{
    animation: 2s forwards hyoko;
}
@keyframes hyoko {
    0%   { top: -80px; }
    50%  { top: -80px; }
    90%  { top: -15px; }
    100% { top: -20px; }
}
.swell-block-accordion__body{
    position: relative;
    overflow: hidden;
}

/* 背景（夏カラー） */
body {
    background-color: #fff9d4;
    background-image: radial-gradient(#f9e710 30%, transparent 30%);
    background-size: 12px 12px;
    background-attachment: fixed;
}

/* 浮遊ツキモノ画像 */
.tukimonoimg{
    position: fixed;
    transform-origin: center center;
    z-index: 0;
}
.tukimonoimg.tukimonoimg01{ top: 5%; left: 10%; width: 200px; transform: rotate(15deg); }
.tukimonoimg.tukimonoimg02{ top: 77%; left: 65%; width: 220px; transform: rotate(-10deg); }
.tukimonoimg.tukimonoimg03{ top: 36%; left: 84%; width: 160px; transform: rotate(-8deg); }
.tukimonoimg.tukimonoimg04{ top: 10%; left: 86%; width: 180px; transform: rotate(4deg); }
.tukimonoimg.tukimonoimg05{ top: 19%; left: -3%; width: 180px; transform: rotate(30deg); }
.tukimonoimg.tukimonoimg06{ top: 30%; left: 63%; width: 180px; transform: rotate(22deg); }
.tukimonoimg.tukimonoimg07{ top: 70%; left: 23%; width: 220px; transform: rotate(-15deg); }
.tukimonoimg.tukimonoimg08{ top: 3%; left: 66%; width: 180px; transform: rotate(-15deg); }
.tukimonoimg.tukimonoimg09{ top: 84%; left: 83%; width: 100px; transform: rotate(22deg); }
.tukimonoimg.tukimonoimg10{ top: 20%; left: calc(100% - 27%); width: 100px; transform: rotate(-30deg) scale(-1, 1); }
.tukimonoimg.tukimonoimg11{ top: 66%; left: calc(100% - 85%); width: 100px; transform: rotate(20deg); }
.tukimonoimg.tukimonoimg12{ top: 43%; left: 68%; width: 280px; transform: rotate(0deg); }
.tukimonoimg.tukimonoimg13{ top: 56%; left: 85%; width: 260px; transform: rotate(-17deg); }
.tukimonoimg.tukimonoimg14{ top: 11%; left: calc(100% - 78%); width: 200px; transform: rotate(-5deg); }
.tukimonoimg.tukimonoimg15{ top: 27%; left: calc(100% - 106%); width: 380px; transform: rotate(-10deg); }
.tukimonoimg.tukimonoimg16{ top: 42%; left: calc(100% - 79%); width: 200px; transform: rotate(-25deg) scale(-1, 1); }
.tukimonoimg.tukimonoimg17{ top: 79%; left: calc(100% - 102%); width: 240px; transform: rotate(5deg); }
.tukimonoimg.tukimonoimg18{ top: 34%; left: calc(100% - 85%); width: 80px; transform: rotate(-12deg); }

/* メインボックス（夏カラー） */
.tsukimonolp-mainbox{
    position: relative;
    max-width: 500px;
    width: 100%;
    border-left: 10px solid #d59d1b;
    border-right: 10px solid #d59d1b;
    background-color: #ffffff !important;
    padding: 10px !important;
    margin: 0 auto;
    z-index: 1;
}

/* レスポンシブ */
@media screen and (max-width: 500px){
    #lp-content,
    .lp-content__postContent{
        padding: 0;
    }
    .top-buttonbox{
        width: 100%;
    }
    .acd01:before{
        position: absolute;
        content: "";
        background-image: url('/wp-content/uploads/piyomaru005-3.png');
        background-size: contain;
        background-position: center;
        width: 70px;
        height: 70px;
        bottom: -4px;
        left: 2%;
    }
    .acd01:after{
        position: absolute;
        content: "";
        background-image: url('/wp-content/uploads/tsukimono-mokkun01.png');
        background-size: contain;
        background-position: center;
        width: 50px;
        height: 50px;
        bottom: 10px;
        left: 28%;
    }
    .acd02:before{
        position: absolute;
        content: "";
        background-image: url('/wp-content/uploads/こけ.png');
        background-size: contain;
        background-position: center;
        width: 100px;
        height: 100px;
        bottom: -30px;
        right: 20%;
    }
    .acd02:after{
        position: absolute;
        content: "";
        background-image: url('/wp-content/uploads/tukimono_gure-01.png');
        background-size: contain;
        background-position: center;
        width: 55px;
        height: 55px;
        bottom: -9px;
        right: 2%;
    }
}