@charset "UTF-8";

html { font-size: 20px;

}

/* 背景画像 */
body { 
	background-image: url(../images/main-bg.gif);
	background-repeat: repeat;

}

/* main 背景の上に青白っぽいのを乗せる */
main {

	background-color: rgba(90,170,255,0.15);
	/* background-color: rgba(91,255,130,0.2); */

}

/* div conteiner-main-aside */
div.conteiner-main-aside {

	display: flex;
	

}

/* main 幅 */
main {

	width: 70%;
	margin: 10px;
	padding: 10px;
	border: solid rgb(90,170,255) 1px;

}

/* aside 幅 追従 */
aside {

	width: 25%;
	position: fixed;
	top: 5px;
	right: 5px;
	background: #dff4ff;
	border: 5px solid #1888c4;
	border-radius: 30px;


}

/* aside ul リストマーカーなし */
aside ul {
	width: 90%;
	position: center;
	list-style: none;
	list-style-position: inside;
	padding: 0px 0px 0px 15px;


}

/* btn-back-top ページトップに戻る */
button.btn-back-top{

	font-weight: bold;
	position: fixed;
	bottom: 25px;
	right: 5px;
	margin: 15px;
	padding: 15px;
}

/* ヘッダーの要素の大きさ 画面幅で変動*/
.header-wrapper {
	
	/*
	 max-width: 750px;
	min-width: 400vw; */
	width: 95vw;
	/* margin: auto;
	padding: 10px 20px 0 20px; */

}

/* div.big-logo の大きさを決定
	親要素 header-wrapperを基に最大最小の範囲で変動*/

div.big-logo {
	width: 90%;
	/* background: #fff; */
	max-width: 750px;
	min-width: 400px;
	margin: auto;
	text-align: center; 

}

/* div.big-logo にロゴ画像の大きさを合わせる*/
.big-logo img {

	width: 100%;



}


/* img.thumbnail サムネイル画像 画面幅によって大きさを変える*/
img.thumbnail {

	width: 20vw;
	max-width: 300px;
	min-width: 80px;

}

/*  img.thumbnail-mid 中くらいの大きさ */
img.thumbnail-mid {

	width: 20vw;
	max-width: 300px;
	min-width: 180px;

}

/* img.btn-mv-info 動画情報ボタン 画面幅によって大きさを変える*/
img.btn-mv-info {

	width: 20vw;
	max-width: 120px;
	min-width: 70px;

}

/* h1タグの大きさ調整*/

h1 {

	font-size: 1.5rem;
	color: #116635;

}


/* h2タグの大きさ調整 */
h2 {	font-size: 1.3rem; color: #116635	}

/* h3タグの大きさ調整 */
h3{	font-size: 1.15rem; /*color: #116635;  font-weight: bold; */	}

/* リンクを太文字に */

a {

	font-weight: bold;

}

/* 目次のリンクは通常の太さで */
div a {

	font-weight: normal;
	color: #000;

}

/* table 表 周りに余白 */
table {

	margin: 20px;

}

/*加代子動画表 背景 透明度指定*/
table.movie-list-table-bg {

	background: rgba(255,150,195,0.15);

}

/* div point ポイント */

div.point {

	background: #dff4ff;
	border: 20px ridge rgb(110,230,255);
	border-radius: 40px;
	margin: 20px;
	padding: 20px;
}

/* div koneta 小ネタ */
div.koneta {

	background: #dff4ff;
	border: 10px solid #1888c4;
	border-radius: 50px;
	margin: 20px;
	padding: 20px;
}

/* もくじ　div contents-list */
div.contents-list {

	margin: 20px 0px 20px 20px;
	padding: 10px 20px 10px 20px;
	background: #eee;
	border: 10px groove #1daa59;

}

/* div positioning-1 加代子リンク集の枠 位置調整 */

.positioning-1 {

	margin: 15px;
	padding: 0px 20px 5px 20px;
	border: 2px solid #1888c4;
	background: #e3f5ff;
	border-radius: 10px;

}

.positioning-1 a {

	font-weight: bold;

}

/* span center 真ん中に寄せたいだけ */

span.positioning-center {

	display: block;
	text-align: center;

}

/* span bold 太字にしたいだけ。 */

span.bold {	font-weight: bold;	}

/* span 赤い下線つけたいだけ。 */

span.underline {
	
	text-decoration: underline;
	text-decoration-color: rgb(200,40,40);
/*	display: block;
	border-bottom: 10px rgb(200,40,40); */

}

/* div page-list ホーム画面のページ一覧 */
.page-list {

	text-align: center;

}

.page-list ul {
	list-style-type: none;

}

/* 加代子の動画一覧リンク */

.kayoko-list-link {

	margin: 40px;

}

/* 加代子動画一覧の下に置くページボタン配置、page-number-button-list */
.page-number-button-list {

	margin: 20px;
	display: flex; 
	flex-wrap: wrap;
	justify-content: center;
}

/* .conteiner-wrap flex 狭いときは改行*/
.conteiner-wrap {

	display: flex;
	margin: 5px;
	flex-wrap: wrap;

}

div .item {

	margin: 10px;

}

/* class img-minwidth 解説スクショ 画面幅に合わせて縮小 */
.img-minwidth{

	max-width: 90%;
	min-width: 300px;

}

/* CSSボタン 加代子動画一覧 ページへ飛ぶ用*/
.page-number-button1 {

	width: 20px;
	height:20px;
	font-size: 1.5rem;
	font-weight: bold;
	background: #fff;
	color: #000;
	border: 2px solid #000;
	padding: 10px;

}

/* CSS 今いるページ番号ボタン 加代子動画一覧 */
.page-number-button-now {

	width: 20px;
	height:20px;
	font-size: 1.5rem;
	font-weight: bold;
	background: #0090aa;
	color: #fff;
	border: 2px solid #000;
	padding: 10px;

}

/* 文字起こし部分 class= transcribe-1 */

.transcribe-1 {

	font-family: serif;
	width: 80vw;
	/* font-weight: bold; */
	margin: 20px 0px 35px 20px;
	padding: 10px 20px 10px 20px;
	background: #eee;
	border: 16px groove #1daa59;
	

}

/* 引用部分 class= quote-1 */

.quote-1 {

	font-size: 0.9rem;
	font-family: serif;
	/* width: 95vw; */

	margin: 15px 15px 15px 15px;
	padding: 10px 0px 10px 0px;
	background: #f2f2f2;
	border: 6px groove #1daa59;

}

/* 加代子の動画情報23 ol.saihyouji-houhou
の手順画像の最大幅決定*/
ol.saihyouji-houhou img {

	max-width: 800px;
	width: 90vw;

}

/* 加代子の動画情報23 ol.saihyouji-houhou-tatenaga
の手順画像の最大幅決定 */
ol.saihyouji-houhou-tatenaga img {

	max-width:300px;
	width: 90vw;

}

/* ボタンによる非表示関連 */

/* id chrome-install 非表示 */

#chrome-install {	display: none;	}

/* id file-path-notes-1 非表示 */

#file-path-notes-1 {	display: none;	}

/* div.update-info */
div.update-info {

	text-align: center;

}

.update-info ul {
	list-style-type: none;


}

/* span.new-info-index 更新情報 Newを目立たせる */
span.new-info-index {

	color: #c00;
	font-weight: bold;

}