@charset "utf-8";
/*ｾﾞｪﾊｧ…ｾﾞｪﾊｧ(ﾎｫﾝ!)…ｱｱｯ!ﾊｧｯ…ﾊｯ　ｲｷｽｷﾞｨ!(ﾎｫﾝ!)
ｩｸｩｸ…ｱｯﾊｯ(a-ha)、ﾝｱｯｰ!!ｱｧｯｱｯ…ｱｯ…ﾊ、ｯ!!…ｯ…ｯｯ………*/

@media(min-width:768px){
/* PC用ですね */
.container{
	width: 100%;
	max-width: 1128px;
	margin: 0 auto;
	padding: 0 20px; /* パディングを含めた幅計算にする */
    box-sizing: border-box;
}
.content-wrapper{
    box-shadow: 0px 4px 3px 0px gray inset;
}
/*前面の青い部分ですねぇ*/
.wrapper {
	/* display: flow-root;*/
	box-sizing: border-box;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
	
	position: relative;
	background-size: auto;
	background-color: #004488;
	padding: 20px;
	width: 100%;
    max-width: 1128px;
    margin: 0 auto;
	margin-top: 0px;
}
/*疑似要素(画像を埋め込むために使ってるナス)*/
.wrapper::before {
	content: "";
	position: absolute;
	left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image:url("/image/koko.webp"),
    url("/image/vine.webp");
	background-repeat:no-repeat;
	background-position:left bottom, 70px calc(100% - 300px);
    background-size: 300px, 150px 600px;
    filter: opacity(0.4); /*画像の透明度、すっげぇ透明になってる、はっきりわかんだね*/
    pointer-events: none; /*クリックを邪魔しない、淫夢厨の鑑*/
    z-index: 0; /*背景扱い、お前を背景にしてやるよ*/
}
.wrapper > * {
    position: relative;
    z-index: 1;
}
/*水色の背景部分(フォロワーさんの画像がいらっしゃる、quwaえて差し上げろ)*/
body {
	min-width: 15em;
	padding: 0;
	margin: 0;
	background-image:
	linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), 
	url("/image/image2.webp");
	background-repeat: repeat;
	background-size: 345px 345px;
	background-position: 0 0;
}
header, footer {
    width: 100%;
    max-width: 1128px;
    margin: 0 auto;
}
#page_content {
	/*margin: auto 0px;
	width: 890px;
	float: right;*/
	width: auto;
    flex: 1;
    min-width: 0;      /* これがないと、中の画像などが大きい時に縮まないことがある */
    margin: 0;         /* 余白は親のgapやpaddingで調整するので0に */
    margin-left: 20px; /* サイドバーとの間隔をここで空ける */
    border-radius: 3px;
}
#sidebar {
	flex-shrink: 0;    /* 画面が狭くなっても縮ませない */
    margin: 0;         /* 余白リセット */
    border-radius: 3px;
	width: 220px;
}
#page_content, #sidebar {
	border-radius: 3px;
}
#nav {
	box-shadow: 0 4px 0 #0d3864;
}
article, aside {
	margin-bottom:0
}
body {
    box-shadow: none;
}
header {
    /* 下にはみ出さないよう、上(-5px)にずらして、広がりを-3pxで抑える */
    box-shadow: 0 -5px 10px -3px gray;
    position: relative;
    z-index: 10; /* 重なり順：後ろ */
}
/* 影を少し下にずらす */
footer {
    /* 上にはみ出さないよう、下(5px)ずらす */
    box-shadow: 0 5px 10px -3px gray;
    position: relative;
    z-index: 1; /* 重なり順：後ろ */
}
.wrapper {
    /* 左右それぞれに影をつける（上下には影が出ない設定） */
    box-shadow: 8px 0 8px -6px gray, -8px 0 8px -6px gray;
    position: relative;
    z-index: 1; /* 重なり順：最前面（これでヘッダー・フッターとのつなぎ目を上書きして隠す） */
}
}