@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&family=Stick&family=ZCOOL+KuaiLe&display=swap');

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}

body {
    color: #3A3A3A; /* 影墨 */
    font-size: 0.9em;
    font-family: 'RocknRoll One', sans-serif;
    line-height: 1.6;
    background: #E8E6E3 url(halloween-paper-bag.png) no-repeat right bottom/160px fixed; /* ミルクグレー */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

a {
    font-family: 'ZCOOL KuaiLe', 'Stick';
    text-decoration: none;
    margin: 2px;
    padding: 2px;
    color: #BCAACF; /* 薄紫 */
}
a:hover {
    color: #E8C1C5; /* くすみピンク */
    text-shadow: 0px 0px 2px #E8C1C5; /* くすみピンク */
}

header {
    font-size: 1.1em;
    text-align: right;
    margin: 50px auto 50px;
}
.title {
    height: 200px;
    padding-top: 70px;
    text-align: center;
    background: url(ghost.png) no-repeat center/contain; /* ゴースト画像そのまま */
}

header p {
    font-family: 'Stick', sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-shadow: none;
    margin: 0;
    line-height: 1.6;
}

header a {
    font-family: 'ZCOOL KuaiLe', cursive;
    font-size: 20px;
    text-decoration: none;
    color: #BCAACF; /* 薄紫 */
    padding: 0 10px;
}
header a:hover {
    color: #E8C1C5; /* くすみピンク */
    text-shadow: 1px 1px 2px #BCAACF, -1px -1px 2px #BCAACF; /* 薄紫 */
}

.wrp {
    width: 90%;
    max-width: 600px;
    margin: 10px auto;
}

h1 {
    font-family: 'ZCOOL KuaiLe', cursive;
    font-size: 35px;
    color: #E8C1C5; /* くすみピンク */
    text-shadow: -2px -2px 2px #BCAACF, 2px 2px 2px #BCAACF; /* 薄紫 */
}

h2 {
    font-family: 'ZCOOL KuaiLe', 'Stick';
    font-size: 25px;
    color: #BCAACF; /* 薄紫 */
}

h2 span {
    font-size: 15px;
}

/* 
section {
    margin: 0.3em 0 1em 0;
    padding: 0.5em;
}
 */
/* 可愛い枠をPCでも表示 */
section {
    margin: 2em auto;
    padding: 1em 1.5em;
    width: 90%;
    background-color: rgba(232, 230, 227, 0.7); /* ミルクグレーの薄い透明 */
    border: 4px solid #BCAACF; /* 薄紫 */
    border-radius: 3em .8em 3em .7em/.9em 2em .8em 3em;
}

p span {
    background: rgba(188, 170, 207, 0.5); /* 薄い薄紫 */
    margin: 2px 2px 2px -12px;
    padding: 2px;
}

p {
    margin: 1em;
}

footer {
    text-align: center;
    margin: 50px auto 20px;
}

.book {
    font-family: "Noto Serif JP", "Cormorant Garamond", serif;
    font-size: 16px;
    font-weight: normal;
    margin: 0 auto;
    max-width: 100%;
    width: 90%;
}

.book p {
    font-size: 16px;
    margin-bottom: 25px;
}

input[type], textarea {
    height: 80px;
    width: 95%;
    font-size: 12px;
    line-height: 180%;
    letter-spacing: 2px;
    color: #3A3A3A; /* 影墨 */
    background: rgba(232, 193, 197, 0.6); /* くすみピンクの薄い透明 */
    border: solid 1px #E8C1C5; /* くすみピンク */
    -webkit-appearance: none;
    border-radius: 3px;
    box-shadow: none;
    margin: 3px 0;
    padding: 3px;
}

input[type=text] {
    height: auto;
    width: 100px;
}

input[type=submit] {
    height: auto;
    width: 80px;
    cursor: pointer;
    text-shadow: none;
    background: #E8C1C5; /* くすみピンク */
    color: #3A3A3A; /* 影墨 */
    font-weight: 200;
}

summary {
  list-style: none; /* 三角を非表示 */
  cursor: pointer;
  position: relative;
  padding: 10px 35px 10px 20px;
}

summary::-webkit-details-marker {
  display: none;
}

.newiine_btn {
    height: auto !important;
    width: 50px !important;
    cursor: pointer !important;
    background: #E8C1C5 !important; /* くすみピンク */
    border: solid 1px #E8C1C5 !important;
    color: #3A3A3A !important; /* 影墨 */
    font-weight: 200 !important;
    font-family: 'Dosis', 'Noto Sans JP', 'メイリオ', sans-serif !important;
    padding: 5px 10px !important;
    margin: 3px 0 !important;
    text-align: center !important;
    display: inline-block !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
}

.newiine_btn:hover {
    background: #E8C1C5 !important; /* くすみピンク */
    color: #3A3A3A !important; /* 影墨 */
    transition: all 0.3s ease !important;
}

.newiine_btn,
.newiine_btn * {
    background: #E8C1C5 !important;
    border-color: #E8C1C5 !important;
    color: #3A3A3A !important;
}

@media screen and (max-width: 480px) {
    header {
        margin: 50px auto 100%;
    }

    section {
        margin: 2em auto;
        padding: 1em 1.5em;
        width: 90%;
        background-color: rgba(232, 230, 227, 0.7); /* ミルクグレーの薄い透明 */
        border: 4px solid #BCAACF; /* 薄紫 */
        border-radius: 3em .8em 3em .7em/.9em 2em .8em 3em;
    }
}

/* スクロールバーのカスタマイズ */
html {
  scrollbar-width: thin;
  scrollbar-color: #BCAACF #E8E6E3; /* サム: 薄紫、トラック: ミルクグレー */
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: #E8E6E3; /* ミルクグレー */
  border: none;
}

::-webkit-scrollbar-thumb {
  background: #BCAACF; /* 薄紫 */
  border-radius: 5px;
}