@charset "utf-8";

/* ===========================================================

   Elements

=========================================================== */
body{
	background:#FFFFFF;
	font-family:ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
	font-size:14px;
	line-height:1.4;
	-webkit-text-size-adjust:none; /* フォントサイズ自動調整 */
	color:#333;
}

a{
	-webkit-tap-highlight-color:rgba(200,200,555,.6);
}

a:link{
	text-decoration:none;
}

a:visited{
	text-decoration:none;
}

img{
	vertical-align:top;
	line-height:1;
}

img:not([width]){
	zoom:.5; /* Retinaディスプレイ対応のためimg要素は半分の大きさに */
}

sub{
	font-size:9px;
	color:#e2154a;
}

.clear{
	clear:both;
}

.annotation01{
	padding-left:1em;
	text-indent:-1em;
}

.annotation01 li{
	font-size:69%;
}

.annotation01 li em{
	color:#ec4a93;
}



/* ===========================================================

   #page

=========================================================== */
#page{
}

#page .pageTop{
	margin:7px 0;
	padding:0 8px;
	text-align:right;
	clear:both;
}



/* ===========================================================

   Header

=========================================================== */
header{
}

header h1{
	padding:8px;
}

header h2{
	padding:6px 0 8px;
	background-color:#f287b7;
	text-align:center;
}

header h2 img{
	vertical-align:middle;
}


/* ===========================================================
   ランドスケープ表示
=========================================================== */
@media all and (orientation:landscape) {
	#mainVis img{
		zoom:.75;
	}
}


/* ===========================================================

   Footer

=========================================================== */
footer{
	padding:15px 0;
	border-top:2px solid #e6e6e6;
}

footer .copyright{
	text-align:center;
}



/* ===========================================================

   #mainVis

=========================================================== */
#mainVis{
	margin:1px 0 18px;
}



/* ===========================================================

   .infoLink

=========================================================== */
.infoLink{
	margin-bottom:25px;
}

.infoLink .reed{
	margin-bottom:20px;
	text-align:center;
}

.infoLink .btn{
	text-align:center;
}



/* ===========================================================

   .main

=========================================================== */
.main{
	margin-bottom:25px;
	border-top:2px solid #d3d3d3;
	border-bottom:2px solid #808080;
}

.main h1{
	padding:10px 8px;
	border-top:2px solid #808080;
	background:-webkit-gradient(
		linear, left top, left bottom,
		color-stop(1.00, #f7f7f7),
		color-stop(0.00, #f2f2f2));
	background:-webkit-linear-gradient(top, #f7f7f7 0%, #f2f2f2 100%);
	background:-moz-linear-gradient(top, #f7f7f7 0%, #f2f2f2 100%);
	background:-o-linear-gradient(top, #f7f7f7 0%, #f2f2f2 100%);
	background:-ms-linear-gradient(top, #f7f7f7 0%, #f2f2f2 100%);
	background:linear-gradient(top, #f7f7f7 0%, #f2f2f2 100%);
}

.main h1{
}

.main .inner{
	padding:15px 8px 0;
	border-top:2px solid #f3cfdf;
	border-bottom:2px solid #d9d9d9;
}

.main .inner .reed{
	padding:0 0 15px;
}


/* ===========================================================
   .main.firstHalf
=========================================================== */
.main.firstHalf{
	border-bottom:none;
}

.main.firstHalf h1{
}

.main.firstHalf .inner{
	border-bottom:none;
}


/* ===========================================================
   .main.secondHalf
=========================================================== */
.main.secondHalf{
	border-top:none;
}

.main.secondHalf h1{
	border-top:none;
	background:none;
}

.main.secondHalf .inner{
}


/* ===========================================================
   #charmContent
=========================================================== */
#charmContent{
}

#charmContent .charmList{
}

#charmContent .charmList ul{
}

#charmContent .charmList ul li{
	position:relative;
	min-height:85px;
	margin-bottom:10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius:3px;
	-webkit-box-shadow: 0px 0px 2px #c7c7c7;
	-moz-box-shadow: 0px 0px 2px #c7c7c7;
	box-shadow: 0px 0px 2px #c7c7c7;
	background-color:#8a7a9c;
	overflow:hidden;
}

#charmContent .charmList ul li div{
	margin-top:6px;
	padding-bottom:10px;
	background-color:#fdfaf9;
}

#charmContent .charmList ul li .title{
	position:relative;
	padding:13px 0 14px 6px;
	z-index:5;
}

#charmContent .charmList ul li .img{
	position:absolute;
	right:7px;
	z-index:1;
}

#charmContent .charmList ul li .text{
	padding:0 95px 0 6px;
}


/* .item01
=========================================================== */
#charmContent .charmList ul li.item01 .img{
	top:28px;
}


/* .item02
=========================================================== */
#charmContent .charmList ul li.item02 .img{
	top:45px;
}


/* .item03
=========================================================== */
#charmContent .charmList ul li.item03 .img{
	top:19px;
}


/* .item04
=========================================================== */
#charmContent .charmList ul li.item04 .img{
	top:32px;
}


/* .item05
=========================================================== */
#charmContent .charmList ul li.item05 .img{
	top:10px;
}


/* .item06
=========================================================== */
#charmContent .charmList ul li.item06 .img{
	top:10px;
}


/* ===========================================================
   ランドスケープ表示
=========================================================== */
@media all and (orientation:landscape) {
	#charmContent .charmList ul li .text{
	}
}


/* ===========================================================
   #workContent
=========================================================== */
#workContent{
}

#workContent .flow{
}

#workContent .flow ol{
}

#workContent .flow ol li{
	text-align:center;
}

#workContent .flow ol li img{
	vertical-align:bottom;
}


/* ===========================================================
   #entryContent
=========================================================== */
#entryContent{
	margin-bottom:25px;
}

#entryContent .flow{
}

#entryContent .flow ol{
}

#entryContent .flow ol li{
	margin-bottom:2px;
	padding-top:25px;
	background:url(../img/entry_flow_bg.png) center top no-repeat;
	background-size:6% auto;
	text-align:center;
}
#entryContent .flow ol li:first-child{
	padding-top:0;
	background:none;
}

#entryContent .flow ol li img{
	vertical-align:bottom;
}


/* ===========================================================
   ランドスケープ表示
=========================================================== */
@media all and (orientation:landscape) {
	#entryContent .flow ol li{
		background-size:4% auto;
	}
}



/* ===========================================================
   #questionContent
=========================================================== */
#questionContent{
	margin-bottom:20px;
	padding-top:10px;
}

#questionContent .questionList{
}

#questionContent .questionList ul{
}
#questionContent .questionList ul:after{
	height:0;
	visibility:hidden;
	content:".";
	display:block;
	clear:both;
}

#questionContent .questionList ul li{
	position:relative;
}


/* .item01
=========================================================== */
#questionContent .questionList ul li.item01{
	max-width:400px;
	min-height:244px;
	margin:0 auto;
}

#questionContent .questionList ul li.item01 .question{
	padding-left:8px;
}

#questionContent .questionList ul li.item01 .answer{
	position:absolute;
	right:13px;
	top:47px;
}


/* .item02
=========================================================== */
#questionContent .questionList ul li.item02{
	max-width:400px;
	min-height:213px;
	margin:0 auto 11px;
}

#questionContent .questionList ul li.item02 .question{
	position:absolute;
	left:8px;
	top:-31px;
}

#questionContent .questionList ul li.item02 .answer{
	position:absolute;
	right:13px;
	top:16px;
}


/* .item03
=========================================================== */
#questionContent .questionList ul li.item03{
	float:left;
	min-width:152px;
	min-height:208px;
	margin-bottom:10px;
}

#questionContent .questionList ul li.item03 .question{
	padding-left:3px;
}

#questionContent .questionList ul li.item03 .answer{
	position:absolute;
	right:0;
	top:62px;
}


/* .item04
=========================================================== */
#questionContent .questionList ul li.item04{
	float:right;
	min-width:152px;
	min-height:208px;
	margin-bottom:10px;
}

#questionContent .questionList ul li.item04 .question{
	padding-right:11px;
}

#questionContent .questionList ul li.item04 .answer{
	position:absolute;
	right:-3px;
	top:62px;
}


/* .item05
=========================================================== */
#questionContent .questionList ul li.item05{
	float:left;
	min-width:152px;
	min-height:211px;
}

#questionContent .questionList ul li.item05 .question{
}

#questionContent .questionList ul li.item05 .answer{
	position:absolute;
	right:0;
	top:62px;
}


/* .item06
=========================================================== */
#questionContent .questionList ul li.item06{
	float:right;
	min-width:152px;
	min-height:211px;
}

#questionContent .questionList ul li.item06 .question{
	padding-right:5px;
}

#questionContent .questionList ul li.item06 .answer{
	position:absolute;
	right:-3px;
	top:63px;
}


/* ===========================================================
   ランドスケープ表示
=========================================================== */
@media all and (orientation:landscape) {
	.questionList{
		max-width:70%;
		margin:0 auto;
	}
}


/* ===========================================================
   #discussionContent
=========================================================== */
#discussionContent{
}

#discussionContent .discussionList{
}

#discussionContent .discussionList ul{
}

#discussionContent .discussionList ul li{
	margin-bottom:10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 2px #C7C7C7;
	-moz-box-shadow: 0px 0px 2px #C7C7C7;
	box-shadow: 0px 0px 2px #C7C7C7;
	background-color:#e76590;
	overflow:hidden;
}

#discussionContent .discussionList ul li div{
	margin-top:6px;
	padding:10px;
	background-color: #fdfaf9;
}