@charset "UTF-8";

/**************************************************/
/* 構造 */
/**************************************************/
*,*::before,*::after {
	box-sizing:border-box;
	transition:.25s;
}
html {
	height:100%;
}
body {
	background:#fff;
	color:#111;
	font-size:1rem;
	font-family:/*-apple-system,BlinkMacSystemFont,*/"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO","Helvetica Neue",HelveticaNeue,YuGothic,"Yu Gothic Medium","Yu Gothic",Verdana,Meiryo,sans-serif;
	line-height:1.7rem;
}
h1,h2,h3,h4 {
	font-weight:bold;
}


/**************************************************/
/* ヘッダー・ナビゲーション */
/**************************************************/
/* メイン部分 */
header {
	text-align:right;
	position:absolute;
	z-index:6;
	top:1rem;
	left:1rem;
	width:calc(100vw - 3rem);
	height:calc(100vh - 3rem);
}

/* ロゴ */
header h1 {
	position:absolute;
	z-index:7;
	top:1.5rem;
	left:1.5rem;
}
header h1 img {
	width:150px;
	height:auto;
}

/* トグルボタン */
header .toggle-button {
	position:fixed;
	z-index:7;
	width:60px;
	height:60px;
	top:calc(1.5rem + 15px);
	right:calc(1.5rem + 15px);
	background:rgba(89, 87, 87,.25);
	cursor:pointer;
	transform:translateX(0);
}
header .toggle-button:hover {
	background:rgba(89, 87, 87,.75);
}
header .toggle-button span {
	position:absolute;
	left:10px;
	width:40px;
	height:4px;
	background-color:#fff;
}
header .toggle-button span:nth-of-type(1) {
	top:15px;
}
header .toggle-button span:nth-of-type(2) {
	top:28px;
	opacity:1;
}
header .toggle-button span:nth-of-type(3) {
	bottom:15px;
}
header .toggle-button.active span:nth-of-type(1) {
	transform:translateY(13px) rotate(-45deg);
}
header .toggle-button.active span:nth-of-type(2) {
	opacity:0;
}
header .toggle-button.active span:nth-of-type(3) {
	transform:translateY(-13px) rotate(45deg);
}

/* ナビゲーション */
header nav {
	position:fixed;
	z-index:6;
	top:0;
	right:0;
	width:100vw;
	height:100vh;
	background:rgba(255,255,255,0);
	transform:translateX(100vh);
}
header nav.active {
	background:rgba(255,255,255,.85);
	transform:translateX(0);
}
header nav ul {
	margin-top:150px;
	color:#595757;
}
header nav ul li {
	display:block;
	margin:0 1rem;
	font-size:1.1rem;
}
header nav ul li a {
	display:block;
	padding:.75rem 1.5rem .75rem 1rem;
	color:#595757;
	font-weight:bold;
}
header nav ul li:nth-child(1) a:hover,header nav ul li:nth-child(1) a:focus {
	background:#fff200;
}
header nav ul li:nth-child(2) a:hover,header nav ul li:nth-child(2) a:focus {
	background:#91d2e5;
}
header nav ul li:nth-child(3) a:hover,header nav ul li:nth-child(3) a:focus {
	background:#f6bcb8;
}
header nav ul li:nth-child(4) a:hover,header nav ul li:nth-child(4) a:focus {
	background:#b8d200;
}
#main {
	width:calc(100vw - 3rem);
	height:calc(100vh - 3rem);
	margin:1rem;
	position:relative;
	z-index:1;
	border:15px solid #595757;
}

/* 枠線の白い斜線 */
#main::before, #main::after {
	display:block;
	position:absolute;
	z-index:2;
	width:15px;
	height:30px;
	background:#fff;
	content:"";
}
#main::before {
	top:45%;
	right:-15px;
	transform:skewY(30deg);
}
#main::after {
	top:65%;
	left:-15px;
	transform:skewY(30deg);	
}
#main .inner {
	width:100%;
	height:100%;
}
#main .inner::before, #main .inner::after {
	display:block;
	position:absolute;
	z-index:1;
	width:30px;
	height:15px;
	background:#fff;
	content:"";
}
#main .inner::before {
	top:-15px;
	right:20%;
	transform:skewX(-30deg);
}
#main .inner::after {
	bottom:-15px;
	left:20%;
	transform:skewX(-30deg);	
}

/* がたひめ部分 */
#main .mainimg {
	width:calc(100vw - 100px - 2rem);
	height:calc(100vh - 2rem);
	position:absolute;
	top:-15px;
	left:calc(85px - 1.5rem);
	z-index:4;
	background:url(../img/gatahime.png) no-repeat center left;
	background-size:contain;
}
/* Cで〜部分 */
#main .maintxt {
	width:75px;
	height:300px;
	position:absolute;
	top:100px;
	left:29px;
	z-index:2;
	background:url(../img/maintxt.png) no-repeat;
	background-size:contain;
}


/**************************************************/
/* コンテンツ部分 */
/**************************************************/
/* 共通 */
#contents {
	margin:1rem;
	position:relative;
}
#contents .wrap {
	display:flex;
	flex-diretion:column;
	flex-wrap:wrap;
	border-top:8px solid #222;
	border-left:8px solid #222;
	border-right:8px solid #222;
}
#contents .wrapweb{
	border-bottom:8px solid #222;
}
#contents .wrap > .info {
	order:1;
	flex-basis:100%;
	align-self:flex-start;
	padding:1rem;
}
#contents .wrap > .info h2 {
	margin:0 0 .4rem;
	font-size:1.75rem;
}
#contents .wrap > .info h3 {
	margin:0 0 .5rem;
}
#contents .wrap > .info p {
	margin:.5rem 0;
}
#contents .wrap > .info ul li {
	display:inline-block;
	margin:.15rem;
	padding:0 0 0 1.05rem;
}
#contents .wrap > .info ul li::before{
	display:inline-block;
	width:.75rem;
	height:.75rem;
	padding:.25rem;
	margin-right:.35rem;
	margin-left:-1.05rem;
	background:#222;
	border-radius:50%;
	content:"";
}
#contents .wrap > .img {
	order:2;
	flex-basis:100%;
	align-self:center;
	/*background:#222;*/
}
#contents .wrap > .img img {
	width:100%;
	height:auto;
}

/* コンテンツごとに変更ある部分 */
#contents #comic.wrap, #contents #comic.wrap > .info {
	background:#fff200;
}
#contents #character.wrap,#contents #character.wrap > .info {
	background:#91d2e5;
}
#contents #application.wrap,#contents #application.wrap > .info {
	background:#f6bcb8;
}
#contents #web.wrap,#contents #web.wrap > .info {
	background:#b8d200;
}


/**************************************************/
/* フッター部分 */
/**************************************************/
footer {
	margin:5rem 0 0;
	padding:3rem;
	position:relative;
	color:#fff;
	background:#595757;
	text-align:center;
}
footer h2 {
	margin:0 0 .75rem;
}
footer h2 img {
	width:150px;
	height:auto;
}
footer dl {
	display:flex;
	flex-diretion:row;
	flex-wrap:wrap;
}
footer dl dt {
	flex-basis:7rem;
	color:#fff;
	padding:.25rem .5rem;
	background:#595757;
	border:1px solid #fff;
}
footer dl dd {
	flex-basis:calc(100% - 7rem);
	padding:.25rem .5rem;
	border:1px solid #fff;
}
footer ul {
	display:inline-block;
	margin:.75rem 0;
}
footer ul li {
	display:block;
	color:#fff
}
footer ul li a {
	color:#fff
}
footer p {
	font-size: 0.6em;
	letter-spacing:0.1em;
}

/**************************************************/
/* タブレット（481px〜） */
/**************************************************/
@media screen and (min-width: 481px) {
/* ロゴ */
header h1 {
	top:1.75rem;
	left:1.75rem;
}
header h1 img {
	width:200px;
	height:auto;
}
/* トグルボタン */
header .toggle-button {
	top:calc(1.75rem + 15px);
	right:calc(1.75rem + 15px);
}
/* ナビゲーション */
header nav {
	width:55vw;
}
header nav ul li {
	margin:0 1rem 0 0;
}

/* メイン部分 */
#main .mainimg {
	width:calc(100vw - 175px - 2rem);
	height:calc(100vh - 2rem);
	top:-15px;
	left:calc(160px - 1.5rem);
}
#main .maintxt {
	width:90px;
	height:350px;
	top:135px;
	left:45px;
}

/* コンテンツ部分（共通） */
#contents .wrap {
	display:flex;
	flex-diretion:row;
}
#contents .wrap > .info {
	order:1;
	flex-basis:45%;
	padding:1.25rem;
}
#contents .wrap .img {
	order:2;
	flex-basis:55%;
}
/* 偶数列の設定 */
#contents .wrap:nth-child(even) > .info {
	order:2;
}
#contents .wrap:nth-child(even) > .img {
	order:1;
}
}


/**************************************************/
/* PC（901px〜） */
/**************************************************/
@media screen and (min-width: 901px) {
/* ロゴ */
header h1 {
	top:2rem;
	left:2rem;
}
header h1 img {
	width:250px;
	height:auto;
}
/* トグルボタン */
header .toggle-button {
	top:calc(2rem + 15px);
	right:calc(2rem + 15px);
	transform:translateX(0);
}
header .toggle-button.is-fixed {
	transform:translateX(100vh);
}

/* ナビゲーション */
header nav {
	width:35vw;
}
header nav.is-fixed,header nav.active.is-fixed {
	background:rgba(255,255,255,0);
	transform:translateX(0);
}
header nav ul li {
	font-size:1.25rem;
}
header nav ul li a {
	padding:1rem 2rem 1rem 1rem;
}

/* メイン部分 */
#main .mainimg {
	width:calc(100vw - 315px - 2rem);
	height:calc(100vh - 2rem);
	top:-15px;
	left:calc(300px - 1.5rem);
}
#main .maintxt {
	width:120px;
	height:350px;
	top:170px;
	left:60px;
}

/* コンテンツ部分（共通） */
#contents .wrap > .info {
	flex-basis:40%;
	padding:2rem;
}
#contents .wrap > .info h2 {
	margin:0 0 .4rem;
	font-size:2rem;
}
#contents .wrap .img {
	flex-basis:60%;
}

}

/**************************************************/
/* PC（1281px〜） */
/**************************************************/
@media screen and (min-width: 1281px) {
/* ナビゲーション */
header nav {
	width:25vw;
}

/* メイン部分 */
#main .mainimg {
	width:calc(100vw - 330px - 2rem);
	height:calc(100vh - 2rem);
	top:-15px;
	left:calc(325px - 1.5rem);
}
#main .maintxt {
	width:120px;
	height:450px;
	top:170px;
	left:60px;
}


}