@charset "utf-8";

:root {
    /* 変数の設定 */
    --sectionwidth: 55rem;
    --boxheight: 15rem;
}

html {
    /* スクロールの設定 */
	scroll-behavior: auto;
}

body {
    /* 要素の位置設定 */
    position: relative;
    /* 要素の幅 */
    width: 100%;
    /* 要素の最小の高さ */
    min-height: 100vh;
    /* フォント */
    font-family: "Arial", "Meiryo", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
    /* フォントの太さ */
    font-weight: 500;
    /* 文字間隔 */
    letter-spacing: 0.05em;
    /* 行間隔 */
    line-height: 1.5;
    /* 要素がはみ出した時の表示形式 */
    overflow-x: hidden;
    /* 文字色 */
    color: white;
    /* 背景画像 */
    background-image: url(./image/background.png);
    /* 背景画像を常に天地左右の中央に配置 */
    background-position: center;
    /* 背景画像を繰り返さない */
    background-repeat: no-repeat;
    /* 背景画像の位置を固定 */
    background-attachment: fixed;
    /* 背景画像を画面サイズいっぱいに表示 */
    background-size: cover;
    /* 背景色 */
    background-color:rgb(51, 102, 153);
}

/* main:before{ */
    /*中身(空)*/
    /* content: ""; */
    /*要素の指定*/
    /* display: block; */
    /*背景画像の位置を固定*/
    /* position: fixed; */
    /*背景画像の位置のズレをなくす*/
    /* top: 0; */
    /* left: 0; */
    /* right: 0; */
    /* bottom: 0; */
    /*背景画像の表示順位を下げる*/
    /* z-index: -1; */
/* } */

a {
	/* リンクの色 */
    color: white;
}

.textlink {
    /* リンクの左側余白 */
    padding-left: 0.3em;
}

p {
    /* 文章の左側余白 */
	padding-left: 0.3em;
}

section {
    /* 各コンテンツエリアの最大幅 */
	max-width: var(--sectionwidth);
    /* 各コンテンツエリアのマージン(四辺の空白) */
	margin: 2% 1%;
}

.title {
    /* サイト名のパディング(四辺の空白) */
    padding: 1%;
}

.title h1 {
    /* サイト名のフォントのサイズ */
	font-size: 2.5em;
    /* サイト名のフォントの太さ */
	font-weight: 900;
}

.title img {
    /* タイトル画像の横幅(ウィンドウ幅に合わせて可変にする) */
    width: 100%;
}

.item {
    /* 各コンテンツエリアのパディング(四辺の空白) */
    padding: 2% 1%;
    /* 各コンテンツエリアの背景色 */
    background:rgba(0,0,0,0.4);
    /* 各コンテンツエリアの角を丸くする */
    border-radius:  5px;
}

.item h2 {
    /* 各コンテンツ見出し下側のパディング */
	padding-bottom: 0.1em;
    /* 各コンテンツ見出し左側のパディング */
	padding-left: 0.3em;
    /* 各コンテンツ見出しのフォントのサイズ */
	font-size: 1.5em;
    /* 各コンテンツ見出しのフォントの太さ */
	font-weight: 600;
    /* 各コンテンツ見出しの下線 */
	border-bottom: solid 3px white;
}

.scrollbox {
    /* スクロールボックスの横幅 */
    max-width: calc(var(--sectionwidth) * 0.75);
    /* スクロールボックスの縦幅 */
    height: var(--boxheight);
    /* スクロールボックスの枠線 */
    border: 1px solid white;
    /* 縦方向にスクロール可能にする */
    overflow-y: scroll;
}

.scrollbox dl {
    /* リスト全体の左側余白 */
    margin-left: 3%;
}

.scrollbox dl :nth-child(1)::after {
    /* インラインボックス定義 */
    display: inline-block;
    /* 最終更新日の横に表示する文字 */
    content: "NEW";
    /* 最終更新日の横に表示する文字の色 */
    color: #FFCC4E;
    /* 最終更新日の横に表示する文字のサイズ */
    font-size: 0.5em;
    /* 最終更新日の横に表示する文字の位置 */
    vertical-align: baseline;
    /* 最終更新日の横に表示する文字の左側余白 */
    margin-left: 1.5%;
}

.hitokoto {
    /* ボックス定義 */
	display: block;
    /* テキストを左寄せにする */
	text-align: left;
    /* ひとことボックスの横幅 */
    max-width: calc(var(--sectionwidth) * 0.75);
    /* ひとことボックスの縦幅 */
    height: calc(var(--boxheight) * 1.5);
    /* ひとことボックスの枠線 */
    border: 1px solid white;
}

.hitokoto-frame {
    /* ひとことボックス内フレームのボックス定義 */
	display: block;
    /* ひとことボックス内フレームのテキストを左寄せにする */
	text-align: left;
    /* ひとことボックス内フレームの横幅 */
	width: 100%;
    /* ひとことボックス内フレームの縦幅 */
	height: 100%;
}

.hitokoto iframe {
    /* ひとことボックス内フレームの横幅 */
    width: calc(var(--sectionwidth) * 0.75);
    /* ひとことボックス内フレームの最大横幅 */
    max-width: 100%;
    /* ひとことボックス内フレームの縦幅 */
    height: 100%;
    /* ひとことボックス内フレームの要素がはみ出した時の表示形式 */
    overflow: hidden;
    /* ひとことボックス内フレームの枠線を消す */
    border: none;
}

dt {
    /* リストの日付のマージン(四辺の空白) */
	margin: 0% 1%;
    /* リストの日付のフォントのサイズ */
	font-size: 1.1em;
    /* リストの日付のフォントの太さ */
	font-weight: 550;
}

footer {
    /* フッターの文字の位置 */
    text-align: center;
    /* フッターの文字色 */
    color: white;
    /* フッターの背景色 */
    background:rgba(0,0,0,0.6);
}

footer iframe {
    /* アクセスカウンターの横幅 */
    width: 140px;
    /* アクセスカウンターの縦幅 */
    height: 50px;
    /* アクセスカウンターの枠線を消す */
    border: none;
}

.copyright {
    /* コピーライト表記の位置調整 */
    vertical-align: -50%;
}