@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
html {
    font-size: 62.5%;
}

body {
    background: linear-gradient(to right, #ee9ca7, #ffdde1);
}


/*チョコ*/

.chocoBOX {
    /* 大枠 */
    display: flex;
    flex-wrap: wrap;
    max-width: 400px;
    margin: 0 auto;
}

.chocoBOX>* {
    /* 要素自体の設定 */
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    display: block;
    width: 25%;
    max-width: 100px;
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 4px;
    border-width: 8px;
    border-style: solid;
    border-color: #804535 #3c1a11 #2c100a #6a3b2b;
    background-color: #6f3c2f;
    text-shadow: 0 1px rgba(255, 255, 255, 0.3), 0 -1px rgba(0, 0, 0, 0.4);
    box-shadow: -1px 4px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-family: 'Lobster', serif;
    font-size: 20px;
    line-height: 1em;
}

.chocoBOX>*::before,
.chocoBOX>*::after {
    /* 擬似要素共通設定 */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: block;
    border-style: solid;
    pointer-events: none;
}

.chocoBOX>*::before {
    /* before(擬似要素) */
    z-index: 1;
    border-width: 6px;
    border-color: #291617 #662e1f #99604c #65413b;
    color: rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 4px inset;
}

.chocoBOX>*::after {
    /* after(擬似要素) */
    z-index: 2;
    margin: -3px;
    border-radius: 4px;
    border-width: 5px;
    border-color: #985d4d #885041 #885041 #985d4d;
    color: rgba(255, 255, 255, 0.3);
    box-shadow: -1px -1px 1.4px, -1px -1px 1.4px inset;
}

.chocoBOX>a {
    text-decoration: none;
    color: #6a3a2d;
}

.chocoBOX>a:active {
    top: -2px;
    z-index: 2;
    transform: rotate(-30deg);
}


/*ピンク*/

.taste1 {
    /* 要素自体 */
    border-color: #f59a92 #e95760 #e1495e #f28986;
    /* 外側法面( 上右下左 ) */
    background-color: #ef8181;
    /* ベース背景 */
    color: #ea7c80 !important;
    /* 文字色 */
    text-shadow: 0 1px rgba(255, 255, 255, 0.3), 0 -1px rgba(120, 0, 0, 0.3);
    /* 文字影( ハイライト 影 ) */
}

.taste1::before {
    /* before(擬似要素) */
    border-color: #dc455a #f28986 #f59a92 #e95760;
    /* 内側法面( 上右下左 ) */
    color: rgba(255, 0, 0, 0.2);
    /* くぼみ部分にかかる影の色 */
}

.taste1::after {
    /* after(擬似要素) */
    border-color: #f7afa1 #f59a92 #f59a92 #f7afa1;
    /* 最上面( 上右下左 ) */
    color: rgba(255, 255, 255, 0.3);
    /* ハイライトの色 */
}


/*ミント*/

.taste2 {
    /* 要素自体 */
    border-color: #94f5c9 #58e9a8 #47e19c #87f2c2;
    /* 外側法面( 上右下左 ) */
    background-color: #81efbd;
    /* ベース背景 */
    color: #7beab8 !important;
    /* 文字色 */
    text-shadow: 0 1px rgba(255, 255, 255, 0.3), 0 -1px rgba(120, 0, 0, 0.3);
    /* 文字影( ハイライト 影 ) */
}

.taste2::before {
    /* before(擬似要素) */
    border-color: #47dc99 #87f2c2 #94f5c9 #58e9a8;
    /* 内側法面( 上右下左 ) */
    color: rgba(255, 0, 0, 0.2);
    /* くぼみ部分にかかる影の色 */
}

.taste2::after {
    /* after(擬似要素) */
    border-color: #a1f7d0 #94f5c9 #94f5c9 #a1f7d0;
    /* 最上面( 上右下左 ) */
    color: rgba(255, 255, 255, 0.3);
    /* ハイライトの色 */
}


/*ミルク*/

.taste3 {
    border-color: #cc8b60 #834126 #b3674c #b97e54;
    background-color: #bc733f;
    color: #ba703e !important;
    text-shadow: 0 1px rgba(255, 255, 255, 0.3), 0 -1px rgba(0, 0, 0, 0.4);
}

.taste3::before {
    border-color: #b3674c #b97e54 #cc8b60 #834126;
    color: rgba(0, 0, 0, 0.2);
}

.taste3::after {
    border-color: #b97e54;
    color: rgba(255, 255, 255, 0.3);
}


/*滑らかタイトル*/

.type {
    margin: 0 auto;
    width: 13em;
    font-size: 2.4rem;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 400;
    border-right: 2px solid transparent;
    animation: typing 3s steps(13), caret 0.3s steps(1) infinite;
    font-family: 'Yusei Magic', sans-serif;
}

@keyframes typing {
    from {
        width: 0;
    }
}

@keyframes caret {
    50% {
        border-right-color: currentColor;
    }
}


/*♥*/

.kotei {
    text-align: center;
}

.heart {
    animation: anime2 1s alternate infinite;
    display: inline-block;
    font-size: 8rem;
}

@keyframes anime2 {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}


/*リボン*/

ul.sample1 {
    padding: 0;
    font: 14px/1.6 'arial narrow', sans-serif;
    width: 60%;
    margin: 0 auto;
    list-style: none;
}

ul.sample1 li {
    position: relative;
    padding: 0.5em 1em 0.5em 2.3em;
    margin-bottom: 5px;
    color: #ffffff;
    font-weight: bold;
    border-bottom: 1px solid #ffffff;
}

ul.sample1 li:after,
ul.sample1 li:before {
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

ul.sample1 li:before {
    top: 0.7em;
    left: 0.2em;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

ul.sample1 li:after {
    top: 0.9em;
    left: 0.7em;
    width: 14px;
    height: 14px;
    background: rgba(255, 0, 0, 0.3);
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}


/*ぽよぽよ*/

.anim-box {
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
    border-radius: 5px;
    width: 50px;
    height: 50px;
}

.poyoyon3 {
    animation: poyoyon3 2s infinite;
    opacity: 1;
}

@keyframes poyoyon3 {
    0%,
    40% {
        transform: skew(0deg, 0deg);
    }
    5% {
        transform: skew(5deg, 5deg);
    }
    10% {
        transform: skew(-4deg, -4deg);
    }
    15% {
        transform: skew(3deg, 3deg);
    }
    20% {
        transform: skew(-2deg, -2deg);
    }
    25% {
        transform: skew(1deg, 1deg);
    }
    30% {
        transform: skew(-0.6deg, -0.6deg);
    }
    35% {
        transform: skew(0.3deg, 0.3deg);
    }
}


/*クッキー*/

.cookie-wrapper {
    display: flex;
    justify-content: center;
}

.cookie {
    position: relative;
    width: calc(165px * 0.5);
    height: calc(160px * 0.5);
    margin: 12px;
    border-radius: 50%;
    border-right: 6px solid #95713a;
    border-bottom: 6px solid #95713a;
    box-shadow: 6px 5px 6px 3px #cca07f, inset -5px -4px 3px 1px #9e793e;
    transform: rotate(-7deg);
    background-image: radial-gradient(closest-side at center, #c6974d 0 85%, #c5964d 86.8%, #c5964c 87.5725%, #c3954c 88.675%, #c0934b 90.25%, #ba8e49 92.5%, #9e793e);
}

.cookie::after {
    content: "";
    display: block;
    width: calc(165px * 0.5);
    height: calc(160px * 0.5);
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    border-right: 1px solid #594423;
    border-bottom: 1px solid #594423;
    filter: blur(2px);
}

.icing {
    width: calc(153px * 0.5);
    height: calc(150px * 0.5);
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 50%;
    background-image: radial-gradient(closest-side at center, #f5ea7e 0 90%, #f4e97e 91.2%, #f3e87d 91.715%, #f1e67c 92.45%, #eee37a 93.5%, #e6dc77 95%, #c4bb65);
}

.icing:after {
    content: "";
    width: calc(130px * 0.5);
    height: calc(130px * 0.5);
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 10px;
    border-bottom: 6px solid #fdfbe5;
    transform: rotate(117deg);
    filter: blur(3px);
}

.icing:before {
    content: "";
    width: calc(140px * 0.5);
    height: calc(140px * 0.5);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 3px;
    background-image: radial-gradient(farthest-side at 65% 30%, rgba(255, 255, 255, 0.6) 0 0%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.09) 65%, rgba(255, 255, 255, 0.045) 75.5%, rgba(255, 255, 255, 0.0222) 82.85%, rgba(255, 255, 255, 0.0114) 88%, rgba(255, 255, 255, 0));
    border-bottom: 6px solid #c4bb65;
    transform: rotate(-76deg);
    filter: blur(4px);
}

.eye {
    width: calc(12px * 0.5);
    height: calc(24px * 0.5);
    position: absolute;
    top: calc(40px * 0.5);
    border-radius: 50%;
    background-color: #342628;
    box-shadow: inset 0 0 2px 1px #2a1e20, 1px 0 2px 0 #958853;
}

.eyeLeft {
    left: calc(43px * 0.5);
}

.eyeRight {
    right: calc(47px * 0.5);
}

.eye:after {
    content: "";
    display: block;
    width: calc(8px * 0.5);
    height: calc(12px * 0.5);
    position: absolute;
    top: 2px;
    left: 1px;
    background-image: radial-gradient(closest-side at center, rgba(255, 255, 255, 0.8) 0 0%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0.12) 65%, rgba(255, 255, 255, 0.06) 75.5%, rgba(255, 255, 255, 0.0296) 82.85%, rgba(255, 255, 255, 0.0152) 88%, rgba(255, 255, 255, 0));
}

.mouth {
    width: calc(80px * 0.5);
    height: calc(80px * 0.5);
    position: absolute;
    top: calc(32px * 0.5);
    left: calc(30px * 0.6);
    border-radius: 50%;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 6px solid #342628;
}

.mouth:before {
    content: "";
    width: calc(80px * 0.5);
    height: calc(80px * 0.5);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid #5b4d39;
    filter: blur(1px);
}

.mouth:after {
    content: "";
    width: calc(80px * 0.5);
    height: calc(80px * 0.5);
    position: absolute;
    top: 1px;
    left: 0;
    border-radius: 50%;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid #c2bebf;
    filter: blur(1px);
}