@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); 


/* ---------------------全体設定--------------------- テキスト#433B5D、リンク#D45836、アクセント#48B564、アクセント薄#DDf9f9　*/


/* デフォルトのpaddingとborderをリセットして隙間ができないようにする */
/* box-sizing:border-boxを指定するとpaddingとborderの幅を要素の幅と高さに含められるがdestyleに記載あるので省略 */

* {
	padding: 0;
	margin: 0;
}

html{
	height: 100%;
	overflow-y: scroll;	/* はみでる場合の処理。スクロールバーを常に表示してindex⇔contentsのガタつきを防ぐ */
	font-size: 62.5%;	/* ルートのフォントサイズを10pxに */
}

body{
	height:100%;
	margin: 0 auto;
	background: #ffffff;
	color: #433B5D;
	line-height: 1.8;
	font-size: 1.3rem;	/* デフォルトのフォントサイズを13pxに */
	font-family:'メイリオ','Meiryo','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}

img{
	max-width: 100%;
	height: auto;
}

/* ---------------------レイアウト設定--------------------- */


/* 全体コンテナ */
#container{
	width: auto;
}

/* レイアウト補助用　margin:autoでセンタリング */
.center{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

/* ヘッダ用 トップ絵あるときは0、ないときは上の余白100下の余白8*/
#header{
	padding: 0px 0px 0px 0px;
	background-color:#433B5D;
}

#headerpict{
	max-width: 850px;
	margin: 0 auto;
}


/* ヘッダナビゲーション用 */
#headernav{
	padding: 7px 0px 10px 0px;
	line-height: 1.2;
	font-size: 2.2rem;
	font-family: 'Share Tech Mono', monospace;
	background-color: rgba(191,221,193,0.9);
	position: -webkit-sticky; /* Safariに対応する */
	position: sticky;         /* 要素を固定/解除する */
	z-index: 1;        		 /* 重なりを前面に */
	top: 0;                   /* 縦方向の閾値 */
	left: 0;                  /* 横方向の閾値 */
	border-top: double 10px #48B564;
	border-bottom: double 10px #48B564;
}
.space-left{
	padding: 0px 0px 0px 25px;
}
.space-right{
	padding: 0px 15px 0px 0px;
}
.tsume1{
	letter-spacing: -0.01rem;
}
.tsume2{
	letter-spacing: -0.03rem;
}
.tsume3{
	letter-spacing:-0.08rem;
}
.ake{
	letter-spacing:0.05rem;
}

/* フッタ用 */
#footer{
	margin: 0px;
	padding: 30px 0px 30px 0px;
	background: #BFDDC1;
	border-top: double 10px #48B564;
}

/* フッタナビゲーション用フレックスボックス */
#footernav{
	padding: 10px 0px 0px 0px;
	display: flex;
	justify-content:center; /* 配置 */
	gap: 20px; /* 余白 */
}

/* メイン用　間はpaddingで調整 */
#main{
	width: 920px;
	margin: 0 auto;
	padding: 20px 35px 20px 35px;	/* border-boxだからpadding含めて920、中身は850 */
	text-align: left;
}

/* メインの中身用 */
.box{
	margin: 15px 0px 40px 0px;
	padding: 15px 20px 15px 20px;
	border-left: 5px dotted #BFDDC1;
	border-right: 5px dotted #BFDDC1;
	text-align: left;
}

.subbox{
	margin: 0px 0px 5px 0px;
}


/* memoの中身用 */
.memobox{
	margin: 15px 0px 40px 0px;
	padding: 15px 20px 15px 20px;
	border-left: 5px dotted #BFDDC1;
	border-right: 5px dotted #BFDDC1;
	text-align: left;
}

/* textの中身用 */
.textbox{
	margin: 0px 0px 30px 0px;
	padding:30px,0px,30px,0px;
}


/* ---------------------テキスト設定--------------------- */


/* メモ用h2テキスト装飾 */

.title{
	color: #FFF;
	font-size: 1.7rem;
	font-weight: bold;
}

/* h3用・フッタh2用テキスト装飾 */

.category{
	color: #fff;
	font-size: 1.9rem;
	font-weight: normal;
	font-family: 'Share Tech Mono', monospace;
	padding-top: 30px; /* ページ途中リンク調整 */
	margin-top:-30px; /* ページ途中リンク調整 */
}

.tag{
	margin: 10px 0px 5px 0px;
	padding: 7px 5px 5px 5px;
	background: #433B5D;
}

.tag2{
	margin: 5px;
	padding: 3px;
}

/* h4用テキスト装飾 */

.subcategory{
	margin: 0px 0px 5px 0px;
	color: #433B5D;
	font-size: 1.5rem;
	font-weight: bold;
}

.subtag{
	padding: 0px 3px 0px 0px;
	background: linear-gradient(transparent 65%, #BFDDC1 65%);
}

/* その他テキスト装飾 */

.point{
	font-weight:bold;
	background: linear-gradient(transparent 65%, #BFDDC1 65%);
}

.gray{
	color: #999;
}

.small{
	font-size: 1.15rem;
	line-height: 1.8;
}

.guide{
	font-family: 'Share Tech Mono', monospace;
	font-size: 1.7rem;
	line-height: 1.1;
}


/* ---------------------リンク設定--------------------- */

/* 通常リンク */
a:link{
	color: #D45836;
	text-decoration: underline;
}
a:visited{
	color:#D45836;
	text-decoration:underline;
}
a:hover{
	color: #48B564;
	text-decoration :none;
}
a:activ{
	color: #48B564;
	text-decoration :none;
}


/* ヘッダ・フッタメニューのリンク（下線なし処理） */

a.nav:link{
	color: #433B5D;
	text-decoration: none;
	position: relative;
}
a.nav:visited{
	color: #433B5D;
	text-decoration: none;
	position: relative;
}
a.nav:hover{
	color: #D45836;
	text-decoration: none;
	position: relative;
}
a.nav:activ{
	color: #D45836;
	text-decoration: none;
	position: relative;
}

/* ヘッダ・フッタメニューのリンク（下線処理） */

a.menu:before{
	content: '';
	position: absolute;
	display: inline-block;
	bottom: -1px; /*線の上下位置*/
	width: 100%; /*線の長さを要素にあわせる*/
	border-bottom: 2px solid #433B5D;
}
a.menu:hover:before{
	content: '';
	position: absolute;
	display: inline-block;
	bottom: -1px; /*線の上下位置*/
	width: 100%; /*線の長さを要素にあわせる*/
	border-bottom: 0px solid #fff;
}
a.menu-now:before{
	content: '';
	position: absolute;
	display: inline-block;
	bottom: -1px; /*線の上下位置*/
	width: 100%; /*線の長さを要素にあわせる*/
	border-bottom: 2px solid #D45836;
}
a.menu-now:hover:before{
	content: '';
	position: absolute;
	display: inline-block;
	bottom: -1px; /*線の上下位置*/
	width: 100%; /*線の長さを要素にあわせる*/
	border-bottom: 0px solid #fff;
}

/* ヘッダ・フッタメニューのリンク　oのスペース拡張処理 */

a.menu-o:before{
	content: '';
	position: absolute;
	display: inline-block;
	bottom: -1px; /*線の上下位置*/
	width: 0.6em; /*線の長さをひと文字分に*/
	border-bottom: 2px solid #433B5D;
}
a.menu-o:hover:before{
	content: '';
	position: absolute;
	display: inline-block;
	bottom: -1px; /*線の上下位置*/
	width: 0.6em; /*線の長さをひと文字分に*/
	border-bottom: 0px solid #fff;
}
a.menu-o-now:before{
	content: '';
	position: absolute;
	display: inline-block;
	bottom: -1px; /*線の上下位置*/
	width: 0.6em; /*線の長さをひと文字分に*/
	border-bottom: 2px solid #D45836;
}
a.menu-o-now:hover:before{
	content: '';
	position: absolute;
	display: inline-block;
	bottom: -1px; /*線の上下位置*/
	width: 0.6em; /*線の長さをひと文字分に*/
	border-bottom: 0px solid #fff;
}

/* フッタのページ途中リンク */

a.footernav:link{
	color: #433B5D;
}
a.footernav:visited{
	color: #433B5D;
}
a.footernav:hover{
	color: #D45836;
text-decoration: none;
}
a.footernav:activ{
	color: #D45836;
text-decoration: none;
}


/* ---------------------その他--------------------- */

/* いろいろ */

.bn{
	margin:0px 5px 5px 0px;
}

input,textarea,select{
	border: 1px solid;  
	border-color: #433B5D;
	color: #433B5D;
	background-color: #fff;}


/* リスト */

ul.list1 li{  /* インデント参考：https://www.acky.info/tips/css/00006.html */ 
	padding-left: 1.3em; /* リストマーカー以外を1文字分右にずらす */ 
	position: relative;
}

ul.list1 li::before{ /* list1クラスがついたulの中にあるli要素だけに適用 */
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0.5em;
	width: 0.3em;
	height: 0.3em;
	background-color: #48B564;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

ul.list2 li{  /* インデント参考：https://www.acky.info/tips/css/00006.html */ 
	padding-left: 1.3em; /* リストマーカー以外を1文字分右にずらす */ 
	position: relative;
}

ul.list2 li::before{ /* list2クラスがついたulの中にあるli要素だけに適用 */
	content: '\002D'; /* 002Dはハイフンの文字コード */
	margin-right: 5px;
	color: #48B564;
	position: absolute;
	z-index: 0; /* navとの重なりを調整 */
	left: 2px; /* リストマーカーの位置を初期化 */ 
	top: 0;
}


/* ---------------------レスポンシブ--------------------- */


/* 中くらい */
@media screen and (max-width: 920px)

{
#header{
	max-width: 100%;
	padding: 0px; /* トップ絵あるときは0、ないときは0px 10px 8px 10px */
}

#main {
	max-width: 100%;
	padding: 20px 10px 20px 10px;
}


}



/* 小さめ */
@media screen and (max-width: 600px)
{

#header{
	max-width: 100%;
	padding: 0px; /* トップ絵あるときは、ないときは0px 10px 8px 10px*/
}

#main {
	max-width: 100%;
	padding: 20px 10px 20px 10px;
}

input,textarea,select{
	max-width: 100%;
}

.box,memobox,textbox{
	margin: 0px 0px 30px 0px;
	padding: 20px 5px 20px 5px;
	border-left: none;
	border-right: none;
}



}