main.css

/*ダークモード対応系*/
:root {
    color-scheme: light dark;
}

/*スクロールバーのカスタマイズ関係*/
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background-color: light-dark(#c0c0c0,#535353);
	box-shadow: inset light-dark(#7b7b7b,#020202) 0 0 5px 1px;
	border-radius: 20px;
}

::-webkit-scrollbar-thumb {
	background-color: #006600;
	border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #339900;
}



/* ボタンは画像がないので分かりにくくなりそう
::-webkit-scrollbar-button {
	background-color: yellow;
}
*/

/*画面遷移時のフェードアニメーション*/
@view-transition {
	  navigation: auto;
	}
	

/*body全体のスタイル*/
body {

	/*余白を消しゴムマジックで消して殺るのさ！*/
	/*margin: 0;*/
	/*color: #575e7;*/

	/*LINE Seed JPフォント*/
	font-family: "LINE_Rg","Roboto","Noto Sans JP","SF Pro","Helvetica","Arial","メイリオ",sans-serif;

	/*ダークモード対応系*/
	background-color: light-dark(#ffffff,#1f1f1f);
	color: light-dark(#000000,#bbbbbb);
}

/*文字選択色*/
body ::selection {
	background-color : rgba(153, 153, 153, 0.60);      /* 選択時の背景色 */
}
/*FireFox対応*/
body ::-moz-selection {
	background-color : rgba(153, 153, 153, 0.60);      /* 選択時の背景色 */
}


/* フォント設定 */
@font-face {
 font-family: "LINE_Rg";
 font-weight: 400;
 src: url(fonts/LINESeed_JP/LINESeedJP_OTF_Rg.woff) format("woff");
}

@font-face {
	font-family: "Mario_U";
	font-weight: 400;
	src: url(fonts/NewSuperMarioFontU.ttf) format("truetype");
   }

/*ヘッダー部分*/
.header {

	background-color: black;
	overflow: hidden;
	border-radius: 15px;
	box-shadow: light-dark(rgba(0,0,0,0.7),#bbbbbb) 3px 3px 10px;
}

.header h2 {
	
	color: white;
	display: block;
	float: left;
	text-align: center;
}

.header a {
	
	font-weight: bold; 
	font-size: large;
	line-height: 150%;
	color: white;
	display: block;
	cursor: pointer;
	float: left;
	padding: 1em 1.5em;
	text-align: center;
	text-decoration: none;
}

.header a:hover {

	background-color: gold;
	color: black;
}

/*通常aタグ*/
a {
    text-decoration: none;
    color: #339900;
    font-weight: bold;
}

.header img {
	transition: transform .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.header img:hover {
	transform: scale(1.5);
}


iframe {
	border: none;
}


/*通常カーソルが来たゾ*/
a:hover {
    text-decoration: none;
    color: #006600;
}

/*content内h2タグ*/
.content h2 {
	font-weight: bold; 
	font-size: x-large;
	color: light-dark(Black,#bbbbbb);
	text-align: center;
}

/*content-img*/
.content-img {
	position: relative;/*親要素にrelative*/
	border-radius: 20px;
	box-shadow: rgb(194 231 255 / 50%) 1px 3px 12px 7px;
	cursor: pointer;
}

.content-img p{
	position: absolute; /*子要素にabsolute*/
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.8rem;
    margin: 0 !important;
    padding: 0 !important;
    background: rgb(211 215 218 / 50%);
	border: 1px solid rgb(179 181 182 / 80%);
    border-radius: 12px;
    box-shadow: rgb(148 148 148 / 50%) 0px 0px 10px 3px;
    backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
  }


/*.top-titleの部分*/
.top-title  h1 {
	font-family: "Mario_U","LINE_Rg";
	/*とりま追加*/
	font-size: xx-large;
}

/*.top-titleの部分*/
.top-title  video {
	border-radius: 20px;
	box-shadow: light-dark(rgba(0, 0, 0, 0.7),#bbbbbb) 3px 3px 10px;
}


/*Made by部分*/
.madeby { 
	font-size: x-small;
	color: gray;
	text-align: center;
	float: center;
}

/*Googleカスタム検索なぜかできない、、、*/

/*https://hidari-ni-usetu.com/google-custom-search-memo/の方法*/

.gcse-search {
	box-sizing:content-box;
}

/*https://saruwakakun.com/sango/comments?id=2601/の方法*/
.gsc-search-box-tools .gsc-search-box .gsc-input {
    font-size: 15px;
}

/*https://debuyoko.com/581/の方法*/
#gsc-iw-id1 input[type="text"] {
    border: none;
    box-shadow: none;
    line-height: normal;
}

/*Googleカスタム検索の親要素*/
.search-parent  {
	width: 100% !important;
	max-width: 500px !important;
	margin: 0 auto !important;
}


/* 上に戻るボタン
   https://webparts.cman.jp/button/gotop/ を参考に作成しました
*/
.topIcon {
	display       : inline-block;
	position      : fixed;       /* ボタン固定 */
	bottom        : 20px;        /* 下から位置 */
	right         : 19px;        /* 右から位置 */
	padding       : 21px 21px;   /* 余白       */
	background    : light-dark(rgba(0, 51, 0, 0.3), rgba(51, 153, 0, 0.3));     /* 背景色     */
	color         : light-dark(#ffffff,#bbbbbb);     /* 文字色     */
	/* opacity       : 0.5;          透明度     */
	border-radius : 33%;        /* 角丸       */
	font-size     : 12pt;        /* 文字サイズ */
	font-weight   : bold;        /* 太字       */
	line-height   : 1.2em;       /* 行の高さ   */
	letter-spacing: 2px;         /* 文字間隔   */
	text-align    : center;      /* 文字位置   */
	cursor        : pointer;     /* カーソル   */
	z-index       : 999;         /* 重ね順位   */
	backdrop-filter: blur(4px); /*ブラー効果（修正済み）*/
	-webkit-backdrop-filter: blur(4px); /*safariなど対応*/
	box-shadow: light-dark(rgba(0, 51, 0, 0.3), rgba(51, 153, 0, 0.3)) 0px 1px 10px 0px; /*ちょっと影*/
  }
  
  .topIcon:hover {
	background    : light-dark(rgba(0, 51, 0, 0.5),rgba(51, 153, 0, 0.5));     /* カーソル時背景色 */
	/* opacity       : 0.9;    カーソル時透明度 */
  }