Trick or Treat!

-はなまる荘ジャック・オー・ランタン選手権-

配布ページ☆

↓HEAD編集にコピペしてね↓

*,::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: #000;
font-size: 0.85em;
font-family: 'Zen Maru Gothic', sans-serif;
line-height: 1.8;
background: linear-gradient(0deg, rgba(226, 207, 255, 1), rgba(251, 251, 251, 1) 50%, rgba(255, 255, 255, 1)) fixed;
}

body::before, body::after{
content: '';
background: url(★ライン画像URL★) repeat-x fixed;
position: fixed;
width: 100%;
height: 50px;
}

body::before{
top: 0;
left: 0;}

body::after {
background-position: bottom left;
bottom: 0;
right: 0;}

.wrp{
width: 95%;
max-width: 600px;
margin: 0 auto;
}

header{
margin: 60px 0 50px;
font-family: 'Stick', sans-serif;
text-align: center;
}

h1, h2, h3, a{
font-family: 'Stick', sans-serif;
}

h1{
font-size: 2em;
}

h2{
font-size: 1.3em;
}

a{
color: #841a75;
}

.gradation {
background: linear-gradient(135deg, #fed878 0%, #fa505e 100%);
background: -webkit-linear-gradient(-45deg, #fed878 0%, #fa505e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

hr {
border-top: 4px dashed #6c2463;
background-color: #f3981d;
margin: 50px 15px;
}

p{
padding: 0 1em;
margin: 5px 10px 20px;
}

.red{
font-weight: bold;
color: #e8383d;
}

em{
font-size: 1.1em;
font-style: normal;
font-weight: bold;
padding: 0 2px 0;
background: linear-gradient(135deg, #fed878 0%, #fa505e 100%);
background: -webkit-linear-gradient(-45deg, #fed878 0%, #fa505e 100%);
}

.box{
border-radius: 8px;
padding: 1em;
margin: 20px 10px 50px;
position: relative;
border: double 3px #fff9f5;
}
.box h3 {
position: absolute;
display: inline-block;
top: -10px;
left: 8px;
padding: 0 9px;
line-height: 1;
}

/* １色目：パンプキン */
.orange{background: #e5a323;
box-shadow: 0px 0px 0px 10px #e5a323;}

.orange h3{background: #e5a323;}

/* ２色目：ネープルスイエロー */
.yellow{background: #fdd35c;
box-shadow: 0px 0px 0px 10px #fdd35c;}

.yellow h3{background: #fdd35c;}

/* ３色目：シトロングリーン */
.green{background: #618e34;
box-shadow: 0px 0px 0px 10px #618e34;}

.green h3{background: #618e34;}

/* ４色目：オイスターホワイト */
.white{background: #eae8e1;
box-shadow: 0px 0px 0px 10px #eae8e1;}

.white h3{background: #eae8e1;}

/*チェックボックスを非表示にする*/
.box input {
    display: none; 
}
/*中身を非表示にしておく*/
.kakusu div {
    height: 0;
    overflow-y: hidden;
    transition: 0.8s;/*ゆっくり表示させる*/
    opacity: 0;
}
/*クリックで中身を表示*/
.kakusu input:checked + label + div {
    height: auto;
    opacity: 1;
}

.first {
font-family: 'Stick', sans-serif;
font-size:2em;
font-weight: bold;
color: #ffd700;
}

.second{
font-family: 'Stick', sans-serif;
font-size:1.5em;
font-weight: bold;
color: #c0c0c0;
}

.third{
font-family: 'Stick', sans-serif;
font-size:1.3em;
font-weight: bold;
color: #ac6b25;
}

.others{
font-family: 'Stick', sans-serif;
font-size:1.1em;
font-weight: bold;
}

.trick {
font-family: 'Stick', sans-serif;
font-size:2em;
font-weight: bold;
color: #8b008b;
}

.ranking{
text-align: center;
}

footer{
text-align: center ;
margin:px 50px auto 20px;
}
</style>

↓ページ編集にコピペしてね↓

<div class="wrp">
<header>
<h1><span class="gradation">Trick or Treat!</span></h1>
<p><span class="gradation">-はなまる荘 ジャック・オー・ランタン選手権-</span></p>
</header>
<p>かぼちゃの詳細をクリックで詳細が開きます。</p>
<hr>

<div class="box orange kakusu">
<input type="checkbox" id="label1" />
    <label for="label1"><h3>① 50cm／オレンジ／縦長のカボチャ</h3></label>
<div class="inbox">
まだかぼちゃのままのようだ。。。。。
</div>
</div>

<div class="box yellow kakusu">
<input type="checkbox" id="label2" />
    <label for="label2"><h3>② 50cm／オレンジ／縦長のカボチャ</h3></label>
<div class="inbox">
まだかぼちゃのままのようだ。。。。。
</div>
</div>

<div class="box green kakusu">
<input type="checkbox" id="label3" />
    <label for="label3"><h3>③ 50cm／オレンジ／縦長のカボチャ</h3></label>
<div class="inbox">
まだかぼちゃのままのようだ。。。。。
</div>
</div>

<div class="box white kakusu">
<input type="checkbox" id="label4" />
    <label for="label4"><h3>④ 50cm／オレンジ／縦長のカボチャ</h3></label>
<div class="inbox">
まだかぼちゃのままのようだ。。。。。
</div>
</div>

<div class="box yellow kakusu">
<input type="checkbox" id="label5" />
    <label for="label5"><h3>⑤ 50cm／オレンジ／縦長のカボチャ</h3></label>
<div class="inbox">
まだかぼちゃのままのようだ。。。。。
</div>
</div>

<div class="box green kakusu">
<input type="checkbox" id="label6" />
    <label for="label6"><h3>⑥ 50cm／オレンジ／縦長のカボチャ</h3></label>
<div class="inbox">
まだかぼちゃのままのようだ。。。。。
</div>
</div>

<div class="box white kakusu">
<input type="checkbox" id="label7" />
    <label for="label7"><h3>⑦ 50cm／オレンジ／縦長のカボチャ</h3></label>
<div class="inbox">
まだかぼちゃのままのようだ。。。。。
</div>
</div>

<div class="box orange kakusu">
<input type="checkbox" id="label8" />
    <label for="label8"><h3>⑧ 50cm／オレンジ／縦長のカボチャ</h3></label>
<div class="inbox">
まだかぼちゃのままのようだ。。。。。
</div>
</div>

<hr>

<h2><span class="gradation">Ranking</span></h2>
<div class="ranking">
<span class="first">１位</span> ○○pt ―― ① ○○＆○○ペア<br>

＜div class="box orange kakusu"＞の、「orange」の部分を変更すると色が変わります。
「orange」「yellow」「green」「white」の好きな色を入れてください。

ここから下は確認用見本

かぼちゃの詳細をクリックで詳細が開きます。

① 50cm／オレンジ／縦長のカボチャ

まだかぼちゃのままのようだ。。。。。

② 50cm／オレンジ／縦長のカボチャ

まだかぼちゃのままのようだ。。。。。

③ 50cm／オレンジ／縦長のカボチャ

まだかぼちゃのままのようだ。。。。。

④ 50cm／オレンジ／縦長のカボチャ

まだかぼちゃのままのようだ。。。。。

⑤ 50cm／オレンジ／縦長のカボチャ

まだかぼちゃのままのようだ。。。。。

⑥ 50cm／オレンジ／縦長のカボチャ

まだかぼちゃのままのようだ。。。。。

⑦ 50cm／オレンジ／縦長のカボチャ

まだかぼちゃのままのようだ。。。。。

⑧ 50cm／オレンジ／縦長のカボチャ

まだかぼちゃのままのようだ。。。。。

Ranking

１位 ○○pt ―― ① ○○＆○○ペア
２位 ○○pt ―― ③ ○○＆○○ペア
３位 ○○pt ―― ⑥ ○○＆○○ペア
４位 ○○pt ―― ⑦ ○○＆○○ペア
５位 ○○pt ―― ② ○○＆○○ペア
６位 ○○pt ―― ④ ○○＆○○ペア
７位 ○○pt ―― ⑧ ○○＆○○ペア
８位 ○○pt ―― ⑤ ○○＆○○ペア