@charset "utf-8";

/* clearfix
------------------------ */
.clearfix:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { display: inline-block; }
/*\*/
*html .clearfix { height: 1%; }
.clearfix { display: block; }
/* */


/* font
------------------------ */
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 300;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 500;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 700;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 900;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.otf) format('opentype');
 }

a { outline: none; }

/* loading */
/* loading */
#loading{width:100%; height:100%; background:#CDCDCD; position:fixed; left:0; top:0; z-index:9999}
.loader{font-size:10px; position:relative; text-indent:-9999em; border-top:0.8em solid rgba(255,255,255,0.5); border-right:0.8em solid rgba(255,255,255,0.5); border-bottom:0.8em solid rgba(255,255,255,0.5); border-left:0.8em solid #fff; -webkit-animation:load8 1.1s infinite linear; animation:load8 1.1s infinite linear; position:absolute; top:50%; left:50%; margin:-2em 0 0 -2em}
.loader, 
.loader:after{border-radius:50%; width:4em; height:4em}
@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg); transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg); transform:rotate(360deg)}
}
@keyframes load8{0%{-webkit-transform:rotate(0deg); transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg); transform:rotate(360deg)}
}




/* layout
----------------------- */
html,body { height:100%; }
#wrap {
	min-width:100px;
	background:#f5f5f5 url(../images/bg_kobukuro_book.jpg) no-repeat center center fixed;
	font-family:'Noto Sans Japanese',メイリオ,'ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',Meiryo,'MS P Gothic',sans-serif;
	font-size:14px;
	font-weight:500;
	word-break:break-all;
	position:relative;
	padding:70px 0 30px;
}
#header {
	height: 16px;
	background: #000;
	color: #FFF;
	position: relative;
	z-index: 1;
}
#header h1 {
	font-size: 10px;
	font-weight: bold;
	line-height: 16px;
	padding: 0 0 0 1em;
	text-align:left;
}
#header a {
	color: #FFF;
	font-size: 10px;
	line-height: 16px;
	display: block;
	position: absolute;
	right: 1em;
	top: 0;
}
#header a:hover {
	color: #aaa;
	text-decoration: none;
}
.section {
	width:540px;
	margin:0 auto;
	padding:0 440px 0 0;
	position:relative;
	z-index:2;
}
.sectionTit {
	color:#ec0088;
	font-size:20px;
	font-weight:700;
	margin:0 0 10px;
}

.copyright {
	width:540px;
	text-align:center;
	padding:0 440px 0 20px;
	margin:0 auto;
}
.copyright small {
	display:block;
	color:#555;
	font-size:12px;
	line-height:18px;
}

/* cover
----------------------- */
#cover {
/*
	width:1000px;
	height:100%;
	background:url(../images/ph_kobukuro_book.jpg) no-repeat right 70px;
	position:fixed;
	left:50%;
	top:0;
	z-index:1;
	margin-left:-500px;
*/
	width:400px;
	height:88%;
	text-align:center;
	padding:70px 0 0 600px;
	position:fixed;
	left:50%;
	top:0;
	z-index:1;
	margin-left:-500px;
}
#cover img {
	width:auto;
	height:100%;
	min-height:370px;
	max-width:400px;
	max-height:552px;
	box-shadow:0 0 3px rgba(150,150,150,0.5);
}
#cover .snsBtn {
	position:absolute;
	right:0;
	top:30px;
}
#cover .snsBtn li {
	float:right;
	margin:0 0 0 10px;
}
#cover .snsBtn .twitter {
	width:85px;
}
/* leadArea
----------------------- */
#leadArea {
	width:560px;
	padding:0 420px 0 0;
	margin:0 auto 50px;
}
#leadArea h1 {
	margin:0 0 20px;
}
#leadArea .lead {
	color:#231815;
	font-size:17px;
	font-weight:800;
	line-height:29px;
	padding:0 20px 0 0;
	margin:0 0 20px;
}
#leadArea .pageLink a {
	display:block;
	width:540px;
	background:#fff;
	color:#ec0088;
	font-size:20px;
	font-weight:700;
	text-align:center;
	text-decoration:none;
	border:2px solid #ec0088;
	box-shadow:0 0 3px rgba(150,150,150,0.5);
	padding:8px 0 0;
}
#leadArea .pageLink a:hover {
	background:#ffe2f2;
	color:#ff008c;
	border-color:#ff008c;
}
#leadArea .pageLink .subTxt {
	display:block;
	font-size:0.8em;
}

#leadArea .pageLink.sub a {
	color:#333;
	font-size:18px;
	border-color:#333;
	padding:8px 0;
	margin:15px 0 0;
}
#leadArea .pageLink.sub .icon-chevron-right {
	color:#999;
	font-size:0.8em;
	font-weight:normal;
	margin:0 0 0 5px;
}


/* videoArea
----------------------- */
#videoArea {
	margin:0 auto 30px;
}
#videoArea img {
	width:540px;
	box-shadow:0 0 2px rgba(150,150,150,0.5);
}
#videoArea .circle {
	width:120px;
	height:85px;
	background:url(../images/bg_circle_white.png);
	color:#333;
	font-weight:800;
	text-align:center;
	line-height:1.3em;
	padding:35px 0 0;
	position:absolute;
	left:-30px;
	top:-30px;
	z-index:2;
}
#videoArea .circle .subTxt {
	display:block;
	font-size:10px;
	letter-spacing:-0.02em;
}
#videoArea a:hover .circle { color:#ec0088; }
#videoArea a:hover img { opacity:0.8; }
#popup {
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:9999;

	display:none;
}
#popup #overlay {
	width:100%;
	height:100%;
	background:rgba(200,200,200,0.8);
	position:absolute;
	left:0;
	top:0;
	cursor:pointer;
}
#popup #video {
	width:800px;
	height:450px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-225px 0 0 -400px;
}
#popup #video .close {
	width:60px;
	height:60px;
	position:absolute;
	right:0;
	top:-65px;
	cursor:pointer;
}
#popup #video .close:hover { opacity:0.8; }

/* detailArea
----------------------- */
#detailArea {
}
#detailArea .detailList {
	margin:0 0 50px;
}
#detailArea .detailList dt {
	width:100px;
	clear:both;
	float:left;
	font-weight:700;
	text-align:right;
}
#detailArea .detailList dd {
	font-weight:500;
	padding:0 0 0 110px;
	margin:0 0 5px;
}

/* appendArea
----------------------- */
#appendArea .sectionTit {
}
#appendArea .txt {
	font-size:16px;
	font-weight:800;
	margin:0 0 40px;
}
#appendArea .txt .subTxt {
	display:block;
	font-size:14px;
	font-weight:500;
}

/* featureArea
----------------------- */
#featureArea {
	width:560px;
	padding:0 420px 0 0;
}
#featureArea .sectionTit {
	position:relative;
	z-index:2;
}
#featureArea .circle {
	width:100px;
	height: 56px;
	background:url(../images/bg_circle.png) no-repeat left top;
	color:#fff;
	font-size:14px;
	font-weight:900;
	text-align:center;
	position:absolute;
	padding: 22px 0;
	left:470px;
	top:-16px;
	transform: rotate(10deg);
}
#featureArea .featureList {

}
#featureArea .featureList li {
	font-size:17px;
	font-weight:800;
	padding:0 0 0 30px;
	margin:0 0 20px;
	position:relative;
}
#featureArea .featureList p {
	position:relative;
	z-index:1;
}
#featureArea .featureList .count {
	display:block;
	width:75px;
	height:75px;
	background:url(../images/icon_list.png) no-repeat left top;
	color:#ec0088;
	font-size:18px;
	font-weight:900;
	text-align:center;
	line-height:75px;
	position:absolute;
	left:-24px;
	top:-24px;
	z-index:0;
}
#featureArea .photoList {
	margin:0 0 5px;
}
#featureArea .photoList li {
	width:130px;
	height:100px;
	float:left;
	background:#fff;
	margin:0 7px 0 0;
}
#featureArea .photoList img {
	box-shadow:0 0 2px rgba(150,150,150,0.5);
}

/* buy
----------------------- */
#buy a {
	margin:0 0 8px;
	display:block;
	width:536px;
	height:36px;
	line-height:36px;
	background:#ec0088;
	color:#fff;
	font-size:20px;
	font-weight:700;
	text-align:center;
	text-decoration:none;
	border:3px solid #ec0088;
	box-shadow:0 0 3px rgba(150,150,150,0.5);
}
#buy a span{
	padding:0 5px 0 0;
	vertical-align: -0.1em;
}
#buy a:hover {
	background:#fff;
	color:#ff008c;
	border-color:#ff008c;
}

/* fansiteArea
----------------------- */
#fansiteArea { padding-top:20px; }
#fansiteArea .sectionTit {
	font-size:24px;
	font-weight:800;
}
#fansiteArea .inner {
	background:#fff;
	box-shadow:0 0 3px rgba(150,150,150,0.5);
	padding:20px;
	margin:0 0 40px;
}
#fansiteArea .lead {
	font-size:15px;
	font-weight:700;
	line-height:1.4em;
	margin:0 0 10px;
}

#fansiteArea .length {
	width:100%;
	border-collapse:collapse;
	font-size:15px;
	font-weight:700;
	border:3px solid #DF6DAC;
	border-left:none;
	margin:0 0 20px;

}
#fansiteArea .length th {
	width:80px;
	background:#DF6DAC;
	color:#fff;
	text-align:center;
}
#fansiteArea .length td {
	background:#FFFED3;
	color:#c00;
	text-align:center;
	letter-spacing:0.03em;
	font-weight:800;
	padding:0 0 8px;
}
#fansiteArea .length td em {
	font-size:26px;
	font-weight:800;
}
#fansiteArea .tokuten {
	margin:0 0 10px;
}
#fansiteArea .tokuten .tit {
	background:#E5007F;
	color:#fff;
	font-size:20px;
	font-weight:700;
	text-align:center;
	padding:10px 0 0;
}
#fansiteArea .txt {margin:0 0 20px; }
#fansiteArea .noteList {
	background:#eee;
	padding:10px;
	margin:0 0 20px;
}
#fansiteArea .noteList .tit {
	font-size:13px;
	font-weight:800;
	margin:0 0 10px;
}
#fansiteArea .noteList li {
	font-size:12px;
	padding:0 0 0 15px;
	margin:0 0 8px;
	position:relative;
}
#fansiteArea .noteList li:before {
	content: '\2713';
	color:#aaa;
	font-family: 'WebHostingHub-Glyphs';
	font-size:0.8em;
	position:absolute;
	left:0;
	top:1px;
}
#fansiteArea .btn {
	padding:10px 0;
}
#fansiteArea .btn a {
	display:block;
	width:80%;
	background:#E5007F;
	color:#fff;
	font-size:26px;
	font-weight:700;
	text-align:center;
	text-decoration:none;
	letter-spacing:0.1em;
	box-shadow:0 1px 3px rgba(150,150,150,0.5);
	border-radius:4px;
	border-bottom:2px solid #a6005b;
	padding:8px 0;
	margin:0 auto;
}
#fansiteArea .btn .icon-shopping-cart:before {
	font-size:0.8em;
	font-weight:normal;
	margin:0 5px 0 0;
}
#fansiteArea .btn a:hover {
	background:#ff008c;
	box-shadow:0 0 1px rgba(150,150,150,0.5);
	border-top:2px solid #fff;
	border-bottom:0;
}
#fansiteArea .end {
	color:#999;
	font-size:20px;
	font-weight:800;
	text-align:center;
	padding:20px 0;
}
/* shareArea
----------------------- */
#shareArea .snsBtn {
	margin:0 0 40px;
}
#shareArea  .snsBtn li {
	width:265px;
	float:left;
}
#shareArea  .snsBtn a {
	display:block;
	color:#fff;
	font-size:20px;
	font-weight:700;
	text-align:center;
	text-decoration:none;
	padding:10px;
	box-shadow:0 0 3px rgba(150,150,150,0.5);
}
#shareArea  .snsBtn a .icon:before {
	font-weight:normal;
	position:relative;
	left:-5px;
	top:1px;
}
#shareArea  .snsBtn .facebook { padding-right:5px; }
#shareArea  .snsBtn .facebook a { background:#336296; }
#shareArea  .snsBtn .facebook a:hover { background:#294e78; }
#shareArea  .snsBtn .twitter { padding-left:5px; }
#shareArea  .snsBtn .twitter a { background:#10A5DE; }
#shareArea  .snsBtn .twitter a:hover { background:#0e8fc2; }



/* attention
----------------------- */
#fansiteArea .attentionBox {
	background:#fcffab;
	padding:10px;
	margin:0 0 15px;
}
#fansiteArea .attentionBox .tit {
	font-size:18px;
	font-weight:800;
	text-align:center;
	border-bottom:1px solid #333;
	padding:0 0 5px;
	margin:0 0 15px;
}
#fansiteArea .attentionBox .txt {
	font-size:14px;
	margin:0;
}
#fansiteArea .attentionBox .txt span {
	color:#E5007F;
	font-weight:bold;
}