@charset "utf-8";

/*
 * Author Toshi Tamamori
 *
 * このCSSでは、いろんなページで共通的に使用する（使用するであろう）classとスタイルを定義する。
 * 個別のページに固有と思しきものは、別ファイルで定義することとする。
 *
 * class名は、長からず、短からず、できるだけHTMLに書いたときに、何を指定してくれるクラスなのかが
 * ある程度想定しやすい命名にこころがける。
 */

/*------------------------------------------------
  テキストのアライン（水平位置）
-------------------------------------------------*/
.taleft    { text-align: left; }
.tacenter  { text-align: center; }
.taright   { text-align: right; }

/*------------------------------------------------
  ボックス（ボックスモデルでいうところのボックス）のフロート制御
-------------------------------------------------*/
.fleft     { float: left; }
.fright    { float: right; }

/*------------------------------------------------
  インライン要素の垂直位置　（インライン要素、インラインブロック要素、表のセル要素にのみ有効）
-------------------------------------------------*/
.vatop     { vertical-align: top; }
.vamiddle  { vertical-align: middle; }
.vabottom  { vertical-align: bottom; }


/*================================================
  HTMLタグに当てるスタイル（Toshiの中で共通を維持したいもの)
================================================*/
html { scroll-behavior: smooth; }

body { 
	font-family: "Helvetica Neue",            /* macOS/iOS/iPadOS 欧文 */
	             "Arial",                     /* Windows 欧文 */
	             "Hiragino Kaku Gothic ProN", /* macOS/iOS/iPadOS 和文 */
	             "Hiragino Sans",             /* macOS/iOS/iPadOS 和文 フォールバック */
	             "BIZ UDPGothic",             /* Windows 和文 */
	             "Meiryo",                    /* Windows 和文 フォールバック*/
	             sans-serif;                  /* 総称フォント Note that the generic name should not be quoted. */
	line-height: 1.4; /*行間*/
	text-size-adjust: 100%;         /* スマホ横持ちでのフォント拡大の抑止 */
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

summary,
button  { cursor: pointer; }

.toggle + label { cursor: pointer; }

a {
	color: #03F;
	transition: 0.5s;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

a:hover { /* マウスオーバしたとき「赤」、ブラウザがつけている下線を表示しない。*/
	color: #F00;
	text-decoration: none;
}

a[href*="http"] { /*外部リンク(httpを含むURLを外部リンクとみなす)にアイコンを追加する*/
	background: url("../images/open_in_new_FILL0_wght400_GRAD0_opsz24.png") no-repeat 100% 0;
	background-size: 20px 20px;
	padding-right: 24px;
}

pre { /* 枠をつけて灰色背景で */
	background: #888;
	color: #8F8;
	padding: 0 0.5em;
	white-space: pre-wrap;
	overflow-x: auto;
}

kbd { /* keyboard風に黒地に白字で */
	background: #333;
	border-radius: 10%;
	color: #FFF;
	padding: 0.5em;
	margin: 0 0.5em;
}

blockquote { /* 引用をつたえるように枠をつけて */
	border: 2px dashed #000;
	padding: 0.5em;
}

button { /* 英字のみでも高さは維持。幅もある程度欲しい */
	font-size: 1em;
	line-height: 2em;
	min-width: 6em;
	vertical-align: middle;
	margin: 0 1em 0 0;
}

table { /* 枠線・境界線の間はあけない */
	border-collapse: collapse;
}

/*------------------------------------------------
  ページTOPボタン（風）（pタグで、「△」などの文字は必要）
-------------------------------------------------*/
.pagetop {
	cursor: pointer;
	display: flex;
	text-decoration: none;
	position: fixed;		/*右下に固定*/
	right: 5px;				/*　〃　*/
	bottom: 5px;			/*　〃　*/
	z-index: 100;
	
	height: 100px;
	width: 100px;
	font-size: 2em;
	
	background: rgba(160, 240, 160, 0.3); /*30%不透明＝70%透明*/
	border: 1px solid #FFF;
	border-radius: 50%;
	
	justify-content: center;
	align-items: center;
	
	opacity: 0; /*初期表示なし。javascriptにて条件満たしたら表示*/
}

.pagetop:hover {
	background: rgba(160, 160, 160, 0.3); /*30%不透明＝70%透明*/
}