@charset "utf-8";
* { box-sizing: border-box; }
body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	letter-spacing: 1px;
	color: #3d3d3d;
	background-color: #f5f5f5;
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
	color: #3f5671;
	border-bottom: dashed 1px;
}
/*a:visited { color: #778899; }*/
a:hover { color: #6cb9e6; border-bottom: dashed 1px;}
main { margin: 0; padding: 0; }
header {
	left:0;
	top:0;
	right: 0;
	width: 100%;
	/*height: 40px;*/
	margin-bottom: 80px;
	padding: 0;
	border-bottom: 1px solid #d7e3ef;
	background-color: #fff;
}

.done::before { content:'✔'; margin-right:2px; color: #a9a9a9;}
/* サイドバーんとこ */
/*nav { font-size: 14px; padding: 0; margin: 0; }
nav a:hover { color: #6cb9e6; background-color: #fff; }
nav ul { list-style: none; padding: 0; margin: 0 0 2px 0; }
nav ul li {
	display: block;
	padding-left: 24px;
	line-height: 1.8;
	background-size: 16px 16px !important;
	background-position: left center !important;
	background-repeat: no-repeat !important;
}*/
nav ul li ~ li { margin-top: 16px; }
nav ul li:nth-child(1) { background: url("https://s3-ap-northeast-1.amazonaws.com/maimaio.com/sysco/sys_fkg.svg"); }
nav ul li:nth-child(2) { background: url("https://s3-ap-northeast-1.amazonaws.com/maimaio.com/sysco/sys_dmm.svg"); }
nav ul li:nth-child(3) { background: url("https://s3-ap-northeast-1.amazonaws.com/maimaio.com/sysco/sys_gg.svg"); }
nav ul li:nth-child(4) { background: url("https://s3-ap-northeast-1.amazonaws.com/maimaio.com/sysco/sys_pso2.svg"); }
nav ul li:nth-child(5) { background: url("https://s3-ap-northeast-1.amazonaws.com/maimaio.com/sysco/sys_social.svg"); }
nav ul li:nth-child(6) { background: url("https://s3-ap-northeast-1.amazonaws.com/maimaio.com/sysco/sys_game.svg"); }
nav ul li:nth-child(7) { background: url("https://s3-ap-northeast-1.amazonaws.com/maimaio.com/sysco/sys_comic.svg"); }

nav p { font-size:14px; font-weight: bold; padding: 0 0 4px 0; margin: 0 0 20px; border-bottom: 1px solid #d7e3ef; text-decoration: none; }
nav p a { border: none; }
nav p a:hover { border: none; }


nav {}
nav > * { display: inline-block; }
nav > div { display: flex; align-items: baseline; justify-content: space-between; }
/*nav > div > a > h2 { width: 40px; margin: 0; align-items: center; height: 40px; overflow: hidden; text-indent: 60px; background: url(./img/.svg) center / 40px auto no-repeat; }*/
nav > div > ul { display: flex; }
nav > div > ul > li { border-bottom: 4px solid #fff; }
nav > div > ul > li:hover { border-color: #dcd2dc; }
nav > div > ul > li ~ li { margin-left: 40px; }
nav > div > ul > li > a { color: #786e78; letter-spacing: 0.02em; text-decoration: none; }
nav > span {}

nav { margin-top: -40px; padding-top: 40px; display: flex; justify-content: flex-end; position: sticky; top: 0; z-index: 9; padding: 10px 20px; /*background: #;*/ }
nav > div:first-child { display: none; }
nav > div#nav-drawer { position: relative; }
nav > div#nav-drawer > .nav-unshown { display: none; }
nav > div#nav-drawer > #nav-open { display: inline-block; width: 30px; height: 22px; vertical-align: middle; }
nav > div#nav-drawer > #nav-open span {}
nav > div#nav-drawer > #nav-open span::before { bottom: -8px; }
nav > div#nav-drawer > #nav-open span::after { bottom: -16px; }
nav > div#nav-drawer > #nav-open span,
nav > div#nav-drawer > #nav-open span::before,
nav > div#nav-drawer > #nav-open span::after { position: absolute; height: 4px;/*線の太さ*/ width: 28px;/*長さ*/ border-radius: 3px; background: #fff; display: block; content: ""; cursor: pointer; box-shadow: 0 1px 2px #ff7272; }
nav > div#nav-drawer > #nav-close { display: none;/*はじめは隠しておく*/ position: fixed; z-index: 99; top: 0;/*全体に広がるように*/ left: 0; width: 100%; height: 100%; background: #786e78; opacity: 0; transition: .3s ease-in-out; }
nav > div#nav-drawer > input {}
nav > div#nav-drawer > label {}
nav > div#nav-drawer > label.nav-shown {}
nav > div#nav-drawer > div#nav-content { overflow: auto; position: fixed; top: 0; left: 0; z-index: 9999;/*最前面に*/ width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/ max-width: 400px;/*最大幅（調整してください）*/ height: 100%; background: rgba(250, 250, 250, 0.9);;/*背景色*/ transition: .3s ease-in-out;/*滑らかに表示*/ -webkit-transform: translateX(-105%); transform: translateX(-105%);/*左に隠しておく*/ }
nav > div#nav-drawer > div#nav-content > div { padding: 40px; }
nav > div#nav-drawer > div#nav-content > div > a {}
nav > div#nav-drawer > div#nav-content > div > h2 { color: #786e78; font-size: 20px; font-weight: 400; }
nav > div#nav-drawer > div#nav-content > div > ul { margin: 20px 0; padding: 0; border-bottom: 1px solid #786e78; border-top: 1px solid #786e78; }
nav > div#nav-drawer > div#nav-content > div > ul > li { font-size: 30px; font-weight: 700; padding: 8px 0; }
nav > div#nav-drawer > div#nav-content > div > ul > li ~ li { border-top: 1px dashed #786e78; }
nav > div#nav-drawer > div#nav-content > div > ul > li > a { display: block; color: #786e78; letter-spacing: 0.04em; padding: 12px 0; text-decoration: none; }
nav > div#nav-drawer > div#nav-content > div > ul > li > a:hover {}
nav > div#nav-drawer > #nav-input:checked ~ #nav-close { display: block;/*カバーを表示*/ opacity: .5; }
nav > div#nav-drawer > #nav-input:checked ~ #nav-content { -webkit-transform: translateX(0%); transform: translateX(0%);/*中身を表示（右へスライド）*/ box-shadow: 6px 0 25px rgba(0,0,0,.15); }




.kakomee {
	width: 1200px;
	display: -webkit-flex;
	display: flex;
	margin: 0 auto;
}
.hidarigawa {
	display: block;
	width: 1200px;
	margin-right: 20px;
}
.sidebar { width: 200px; }
/*.sidebar__item { margin-bottom: 20px; }*/
.sidebar__item--fixed {
	position: -webkit-sticky;
	position: sticky;
	margin-bottom: 0;
	top: 40px;
	z-index: 1;
}
/* サイドバここまで */

h1 {
	font: normal 20px 'Noto Sans JP', Myriad, Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
}
h1 p { width: 200px; padding-bottom: 8px; border-bottom: 1px solid; }
h2 {
	font: normal 16px 'Noto Sans JP', Myriad, Verdana, Arial, Helvetica, sans-serif;
	margin: 40px 0 8px 40px;
	/*border-left: 1px solid #708090;*/
	padding: 0;
}
.sllog h2 {
	width: 1100px;
	font: normal 20px 'Noto Sans JP', Myriad, Verdana, Arial, Helvetica, sans-serif;
	border-bottom: 1px solid;
	margin: 0 0 20px 0;
	/*border-left: 1px solid #708090;*/
	padding: 0 ;
}
.sllog h2:hover { color: #3f5671; }
.pankz {
	/*background-color: #203744;*/
	/*height: 20px; */
	display: flex; justify-content: space-between; align-items: center;
	font-size:12px;
	width: 1200px;
	padding: 8px 0;
	margin: 0 auto;
	position: relative;
}
.pankz > ul { list-style: none; margin: 0 0 2px 0; padding: 0; }
.pankz > ul > li { display: inline; }
.pankz > ul > li ~ li::before { content: ">"; margin: 0 8px; }
.pankz a { color: #243e4d; }
.pankz a:hover { color: #6cb9e6; }
/*.pankz img {
	margin: 8px 0 0 120px;
	height: 28px;
}*/
/*{ width: 750px; padding-right: 40px; padding: 4px 0 8px 40px; }*/
.pankz > a.webclap { padding: 2px 8px; border: solid 1px #3f5671; border-radius: 1em; }

section#about { width: 1200px; margin: 0 auto 120px; }
section#about p{
	padding-bottom: 8px;
	font: 12px normal;
	border-bottom: 1px solid; }

section#about img { width: 200px; height: 40px; }
section#about a { border: 0; }
.e {
	margin: 50px 0 200px 50px;
	font-size: 12px;
}
.feature {
	line-height: 130%;
	letter-spacing: 0.2em;
	font-size: 12px;
}
.ouchi { margin: 50px 50px 100px; }
.sllog { width: 1200px; margin: 0 auto; }
.narabi {}
.narabi~.narabi { margin-top: 200px; }
.narabi:last-child { margin-bottom: 0px; }
.narabi li {
	display: inline-block;
	vertical-align: top;
	margin: 0 28px 80px 0;
	list-style-type: none;
}
.narabi img {
	display: block;
	object-fit: contain;
	max-width: 1000px;
	max-height: 600px;
	height: auto;
	border: solid 1px #e3e9ef;
}
img { vertical-align:top; }
.narabi a {}
.narabi a img { border: solid 1px #6cb9e6; }
.narabi a:hover img { border-color: #e3e9ef; }
.narabi > ul { padding: 0; }
.narabi > ul > li { display: inline-block; }
.narabi > ul > li > p.date { margin: 0; padding: 8px 16px; font: bold 12px "Helvetica", sans-serif; border-left: 2px solid #426579; background: linear-gradient(transparent 0%, #fff 0%); }
.narabi > ul > li > p.date > span { font-weight: normal; /*color: #513743;*/ }
.narabi > ul > li > p.date > span:nth-of-type(1) { color: rgba(93, 86, 93, 0.8); }
.narabi > ul > li > p.date > span:nth-of-type(1)::before { content: "["; margin-right: 4px; margin-left: 12px; }
.narabi > ul > li > p.date > span:nth-of-type(1)::after { content: "]"; margin-left: 4px; }
.narabi > ul > li > p.date > span:nth-of-type(2){ /*border-bottom: dotted 1px;*/ margin-left: 8px; }


.poipoi {}
.poipoi img { max-height: 400px; height: auto; }
.poipoi > ul { display: flex; flex-wrap: wrap; }
.poipoi > ul > li { display: flex; flex-direction: column; max-width: min-content; }
.poipoi > ul > li > p.date {}
.poipoi > ul > li > p.date > span:nth-of-type(1) { margin-left: 8px; padding: 0 8px; border-radius: 1em; background-color: #e3e9ef; }
.poipoi > ul > li > p.date > span:nth-of-type(1)::before { content: ""; margin: 0; }
.poipoi > ul > li > p.date > span:nth-of-type(1)::after { content: ""; margin: 0; }

/*
section.sllog > div.poipoi > ul > li > div.date { display: inline; padding: 8px; font-size: 12px; border-left: 2px solid #426579; background-color: #fff; }
section.sllog > div.poipoi > ul > li > div.date > time { font: bold 12px sans-serif; }
section.sllog > div.poipoi > ul > li > div.date > span { margin: 0 8px; padding: 0 8px; border-radius: 1em; font-size: 11px; background-color: #e3e9ef; }
*/

/*
.narabi a::after {
	content: "^";
	position: absolute;
	top: 0;
	right: 0;
	padding: 20px 80px 40px;
	color: #fff;
	border: solid 1px #6cb9e6;
	background-color: rgb(32,55,68,0.8);
	transform: rotate(220deg) translate(-38px, 64px);
	overflow: hidden;
}*/
/*.narabi a:hover::after { background-color: rgb(207,221,230,0.5); border-color: #e3e9ef; }*/
.narabi .narabill img{
	max-width: 1180px;
	height: 100%;
}
.linel {
	border-bottom:solid 1px #3F5671;
	width: 350px;
	font: normal 12px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.2;
	margin: 0 0 10px 0;
	padding-bottom: 3px;
}
.td, th {
padding: 5px 20px 0px 0px ;
}

.zoom-img, .zoom-img-wrap {
	position: relative;
	z-index: 666;
	transition: all .3s;
}
.zoom-overlay-open .zoom-overlay {
	opacity: .95;
}
.zoom-overlay {
	z-index: 420;
	background: #d3d3d3;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	transition-duration: 2s;
}
/*.zoom-overlay-transitioning{
	background: initial;
	z-index: initial;
   	transition: all .2s;
}*/


/* ひっこしまえ */
#wrap{
	width: 800px;
	align: center;
}
#title{
	margin: 0 0 50px 0;
	border: 0;
}
#menunu{
	width: 693px;
	margin-bottom: 100px;
	border-bottom: double 3px #ccc;
	padding-bottom: 10px;
}
#tehepero{
	text-align: center;
	font: bold 100px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	margin: 300px 0 30px 0;
}
.owabi{
	width: 500px;
	padding-left: 100px;
	margin-bottom: 200px;
	text-align: left;
	font-size: 13px;
	line-height: 130%;
	letter-spacing: 0.1em;
}
.info{
	line-height: 120%;
}

footer {
	bottom: 0;
	right: 0;
	width: 100%;
	/*height: 40px;*/
	padding: 0;
	border-top: 1px solid #d7e3ef;
	margin-top: 80px;
	background-color: #fff; }


/* アウトライン上いるけど、出んでよい */
.visuallyhidden { width: 1px; height: 1px; margin: -1px; overflow: hidden; position: absolute; clip: rect(0 0 0 0); }

@media only screen and (min-width: 320px) and (max-width: 600px) {
	body { }
	main { width: 100%; margin-left: 0; padding: 0; }
	header { padding: 0; margin-bottom: 40px; }
	header img { margin-left: 10px; }
	.pankz { padding:  2px 0 2px 10px; }
	.pankz > ul { padding: 0; }
	.pankz > ul > li { margin-right: 2px; font-size: 12px; }
	.pankz > ul > li ~ li::before { content: ">"; margin-right: 2px; }
	section#about > h1 { margin-left: 40px; }
	section#about > h1 > p { letter-spacing: 0.05em; }
	.sllog { width: 100%; margin-left: 10px; }
	.sllog > .narabi { margin: 0; }
	.sllog h2 {	width: 100%; margin: 0 0 8px 0; }
	.narabi { width: 100%; }
	.narabi:nth-child(n+2) { margin-bottom: 40px; }
	.narabi li { margin: 0 20px 20px 0; }
	.narabi img { max-width: 320px; height: auto; }
	.narabi > p { letter-spacing: 0.05em; }
	.narabi > p > span { font-size: 12px; margin-right: 8px; }
	.hidarigawa { width: 100%; margin: 0; }
	.sidebar { visibility: hidden; }
	footer { margin-top: 20px; padding: 0; }
}