html,body,div,span,h1,h2,h3,img,a,hr,form,header,footer{
font-weight: normal;
}
*, *::before, *::after {
/* ブロックの幅・高さをボーダーと余白を含めた値で指定できるようにする */
-webkit-box-sizing: border-box;/* Android4.4.4以下でまだ必要 */
box-sizing: border-box;
}
/* リンクがアクティブなときに出現する枠線を消す */
a { outline: none; }
/* 画像が親要素からはみ出すこと（＝横スクロール発生）を防ぐ
「親要素の幅に対して100%の幅までしか画像が広がらない」という設定。値は100%以下厳守 */
img{ max-width: 100%; }
body{
padding: 0 20px 16px 20px;
font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;/* 全体フォント：ゴシック体 */
}
/* -----文字装飾-----
◆class="bold" …その要素だけ太字になる
◆class="torikesi" …取り消し線が引かれる
◆class="webf" …ウェブフォントになる
◆class="sans-serif" …ゴシック体になる
◆class="serif" …明朝体になる
------------------ */
.bold{ font-weight: bold; }
.torikesi{ text-decoration: line-through; }
.sans-serif{
font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
}
.serif{
font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}
mark,strong{ margin: 0 0.2em; }
/* -----メニューリンク余白 */
.menu a{ margin: 0 4px; }
/* -----見出し・メニュー・水平線設定----- */
hr{
margin: 8px -20px;
height: 0;
width: auto;
max-width: 150%;/* 以下デフォルトCSSの打ち消し */
max-width:100vw;
}
/* -----h1：スマホ・PC向け */
h1{ margin: 2em 1em; }
h1 span{
position: relative;
line-height: 1;
display: inline-block;
padding: 8px 12px;
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
max-width: 100%;
word-wrap: break-word;/* 英単語の途中だろうと改行する。長い単語を入れると横スクロールが発生しかねないため */
}
h1 span::after{
position: absolute;
top: 2px;
left: -5%;
content: "";
z-index: -1;
height: 90%;
width: 110%;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.stripe{ position: relative; }
.stripe::after{/* 白(#ffffff)と紫(#990099)ストライプ */
position: absolute;
z-index: -2;
content: '';
top: 40%;
width: 100%;
}
hr.stripe{/* 同じストライプ↑の水平線 */
border: none;
height: 28px;/* ストライプ水平線の縦幅 */
}
/* -----メニューと、h2 */
h2,
.menu{
text-align: center;
margin: 8px 0;
max-width: 400px;
width: 90%;
position: relative;
padding: 0 14px 0.2em;
}
h2::after,
.menu::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: '';
width: 50%;
height: 4px;
}
/* -----h3 */
h3{
margin: 8px 8px 8px 0;
text-align:left;
line-height:2;
}
h3 span{
padding: 4px 8px;
padding-left: 20px;
margin-right: 8px;
display: inline-block;
min-width: 4em;/* 背景色帯の横幅は最低でも4em */
}
/* -----見出しとメニューを左右ぴったりくっつける----- */
h2,h3,hr,footer,
div.stripe,
.menu{
margin-left: -20px;
margin-right: -20px;
}
/* -----背景色付きテキスト空間 */
.textblock{
margin: 4px -20px 4px -8px;
padding: 4px 8px;
}
/* …の中で見出しを使うとき用余白 */
.textblock h2,
.textblock div.menu,
.textblock h3{
margin: 8px -8px 8px -20px;
}
/* -----拍手
-----フォーム部品 */
input[type="submit"],input[type="text"],button,textarea,select {
outline: none;
-webkit-appearance: none;
appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
width: auto;
max-width: 95%;
border-radius: 0;
margin: 4px;
padding: 4px;
}
/* -----テキストエリアと一行テキストボックス */
textarea { display: inline-block; }
/* -----class="textblock"黒背景内でのフォーム配色 */
/* -----テキストエリアと一行テキストボックス */
.textblock input[type="text"],
.textblock textarea {
max-width: 94%;
}
/* -----PC・タブレット用の余白 */
@media all and (min-width: 1000px) {
body,h3 span{ padding-left: 100px; }
h1{ text-align:center; }
h2,h3,hr,footer,
div.stripe,
.menu,
.textblock h2,.textblock h3,
.textblock div.menu{ margin-left: -100px; }
}
/* -----ALICE+フッター表記
※