@charset "UTF-8";
#page_content.otokono{
	padding:0px;
	background:#151515;
	background-image:url(../img/ttl_bg.png);
	background-repeat:no-repeat;
	background-position:left 120px;
}
#page_content.otokono h1{
	margin:0 auto;
}


#pankuzu{
    padding-top:10px;
}
#pankuzu ol li a {
    color: #fff;
}
#pankuzu ol li a:hover {
		color: #fff;
		opacity:0.7;
}



/*----------------------------------
.article_header
----------------------------------*/
#movie{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
#movie iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
@media screen and (max-width: 834px) {
	#content_wrapper{
		padding-top: 54px;
	}

}



/*----------------------------------
.article_header
----------------------------------*/
.otokono .article_header{
	max-width:980px;
	width:96%;
	margin:0 auto 24px;
	padding:0px 0 16px;
	overflow: hidden;
}
.otokono .article_header h1{
	max-width:520px;
	width:100%;
	float:left;
}
.otokono .article_header h1 img{
	max-width:470px;
	width:90%;
}
.otokono .article_header .txt{
	max-width:456px;
	width:90%;
	float:right;
}
.otokono .article_header .txt .subttl{
	margin-bottom:12px;
}
.otokono .article_header .txt .subttl img.line{
	margin-top:14px;
}
.otokono .article_header .txt .msg{
	line-height:1.8;
	color:#fff;
	font-size:16px;
}
	@media screen and (max-width: 834px) {
		.otokono .article_header h1{
			float:none;
			text-align:center;
			padding-top:40px;
		}
		.otokono .article_header .txt{
			float:none;
			text-align:center;
			margin:20px auto 0;
		}
		.otokono .article_header .txt .msg{
			padding-left:2%;
			padding-right:2%;
		}
		.otokono .article_header .txt .msg br.pc{
			display:none;
		}
	}




/*----------------------------------
#brown_conts
----------------------------------*/
.otokono #brown_conts{
	max-width:980px;
	width:100%;
	margin:0 auto 7%;
	padding:52px 50px 82px;
	padding:5.3% 5.1% 8.36%;
	box-sizing: border-box;
	background:url(../img/bg_brown.jpg);
	color:#fff;
}
.otokono #brown_conts > div{
	position:relative;
}
.otokono #brown_conts .header{
	position:absolute;
	z-index:2;
}
	@media screen and (max-width: 834px) {
		.otokono #brown_conts .header{
			position:relative;
		}
		.otokono #brown_conts .header img{
			width:auto;
		}
	}
.otokono #brown_conts header .txt{
	margin-bottom:18px;
}
.otokono #brown_conts .header .msg{
	text-shadow:0 0 2px rgba(30,30,30,0.7);
	line-height:2;
	letter-spacing: 1px;
	font-size:16px;
}
.otokono #brown_conts .studio .photoset{
	width:100%;
}
@media screen and (max-width: 834px) {
	.otokono #brown_conts .studio .photoset,
	.otokono #brown_conts .hobby .photoset,
	.otokono #brown_conts .shosai .photoset{
		position:relative;
	}
}

/*
.studio
*/
.otokono #brown_conts .studio{
	min-height:592px;
	margin-bottom:100px;
	margin-bottom:8.2%;
}
.otokono #brown_conts .studio .header{
	top:30px;
	left:10px;
}
.otokono #brown_conts .studio .header .txt{
	margin-left:20px;
	display:block;
}
.otokono #brown_conts .studio .header .msg{
	padding:32px 0 0 20px;
}
	@media screen and (max-width: 834px) {
		.otokono #brown_conts .studio .header{
			top:0px;
			left:0px;
			margin-bottom:5%;
		}
		.otokono #brown_conts .studio .header .txt{
			margin-left:0px;
		}
		.otokono #brown_conts .studio .header .msg{
			padding:16px 0 0 0;
		}
		.otokono #brown_conts .studio .header .msg br{
			display:none;
		}
	}
.otokono #brown_conts .studio .photoset .pic1{
	position:absolute;
	right:0;
	top:0;
	max-width:606px;
	width:100%;
	height:auto;
}
.otokono #brown_conts .studio .photoset .pic2{
	position:absolute;
	left:130px;
	top:332px;
	max-width:410px;
	width:100%;
	height:auto;
}
	@media screen and (max-width: 834px) {
		.otokono #brown_conts .studio{
			min-height: auto;
		}
		.otokono #brown_conts .studio .photoset .pic1{
			position:relative;
			margin-bottom:4%;
		}
		.otokono #brown_conts .studio .photoset .pic2{
			position: relative;
			max-width:320px;
			left:auto;
			top:auto;
		}

	}

/*
.shosai
*/
.otokono #brown_conts .shosai{
	margin-bottom:100px;
	margin-bottom:10.2%;
}
.otokono #brown_conts .shosai .header{
	top:238px;
	left:472px;
}
.otokono #brown_conts .shosai .header .txt{
	margin-left:48px;
	display:block;
}
.otokono #brown_conts .shosai .header .msg{
	padding:32px 0 0 48px;
}
	@media screen and (max-width: 834px) {
		.otokono #brown_conts .shosai .header{
			top:0px;
			left:0px;
			margin-bottom:5%;
		}
		.otokono #brown_conts .shosai .header .txt{
			margin-left:0px;
		}
		.otokono #brown_conts .shosai .header .msg{
			padding:16px 0 0 0;
		}
		.otokono #brown_conts .shosai .header .msg br{
			display:none;
		}
	}
.otokono #brown_conts .shosai .photoset .pic1{
	max-width:488px;
	width:100%;
	height:auto;
}

/*
.hobby
*/
.otokono #brown_conts .hobby{
	padding-bottom:82px;
}
.otokono #brown_conts .hobby .header{
	bottom:0;
	left:0;
}
.otokono #brown_conts .hobby .header .txt{
	margin-left:20px;
	display:block;
}
.otokono #brown_conts .hobby .header .msg{
	padding:32px 0 0 20px;
}
	@media screen and (max-width: 834px) {
		.otokono #brown_conts .hobby{
			padding-bottom:0;
		}
		.otokono #brown_conts .hobby .header{
			top:0px;
			left:0px;
			margin-bottom:5%;
		}
		.otokono #brown_conts .hobby .header .txt{
			margin-left:0px;
		}
		.otokono #brown_conts .hobby .header .msg{
			padding:16px 0 0 0;
		}
		.otokono #brown_conts .hobby .header .msg br{
			display:none;
		}
	}
.otokono #brown_conts .hobby .photoset .pic1{
	width:706px;
	height:auto;
	margin-left:176px;
}
	@media screen and (max-width: 834px) {
		.otokono #brown_conts .hobby{
			min-height: auto;
		}
		.otokono #brown_conts .hobby .photoset .pic1{
			position:relative;
			width:100%;
			margin-left:0;
		}
	}




/*----------------------------------
#reason
----------------------------------*/
#reason{
	background:url(../img/reason_bg.png);
	padding:62px 0 72px;
}
#reason header{
	text-align: center;
	margin-bottom:50px;
}
/*
#reason header img{
	width:80%;
	max-width: 460px;
}*/
#reason header h2{
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
	font-size:170%;
	text-align: center;
	font-weight:bold;
	padding-bottom:12px;
	position: relative;
	max-width:500px;
	width:90%;
	margin:0 auto;
}
#reason header h2:after{
	content:"";
	background:#333;
	height:3px;
	box-shadow:0 1px 2px rgba(40,40,40, 0.5);
	display:block;
	width:80%;
	position:absolute;
	bottom:3px;
	left:50%;
	transform:translate(-50%,0);
}
#reason header p{
	font-size:120%;
	font-weight:bold;
}
#reason header p span{
	font-size:190%;
}
#reason .rsn{
	width:980px;
	margin:0 auto 40px;
	background:#fff;
	padding:0 0 0 32px;
	box-sizing:border-box;
}

@media screen and (max-width: 834px) {
	#reason{
		padding-bottom:4%;
	}
	#reason .rsn{
		max-width:980px;
		width:94%;
		padding-left:4%;
		padding-right:4%;
	}
}

#reason .rsn .txt{
	display:inline-block;
	box-sizing:border-box;
	vertical-align: top;
}
#reason .rsn .txt h3.subttl{
	margin-top:-30px;
	margin-bottom:12px;
}
#reason .rsn .txt h3.subttl p{
	padding-left:10px;
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
	font-size:180%;
	font-weight: bold;
}
#reason .rsn .txt h3.subttl .icon{
	margin-bottom:12px;
	display:block;
	max-width:83px;
	width:20%;
}
#reason .rsn .txt h3.subttl .copy{
	padding-left:10px;
}
#reason .rsn .txt .msg{
	padding-left:10px;
	font-size:16px;
	line-height:1.8;
}
#reason .rsn .pic{
	display:inline-block;
	vertical-align: top;
}
#reason .rsn .pic img{
	width:100%;
}
	@media screen and (max-width: 834px) {
		#reason .rsn .pic{
			text-align:center;
		}
	}
/*
.r1
*/
#reason .rsn.r1{
	padding-bottom:20px;
}
#reason .rsn.r1 .txt{
	max-width:474px;
	width:100%;
}
#reason .rsn.r1 .txt h3.subttl .copy{
	max-width:396px;
	width:90%;
}
#reason .rsn.r1 .txt .link{
	padding-top:30px;
	text-align: right;
}
#reason .rsn.r1 .txt .link a{
	display:inline-block;
	padding-left:14px;
	background:url(../img/arrow_rsn1.png) no-repeat left top;
	line-height:1.1;
	color:#005c95;
}
#reason .rsn.r1 .pic{
	max-width:450px;
	width:100%;
	padding-top:38px;
	padding-left:10px;
}
@media screen and (max-width: 834px) {
	#reason .rsn.r1 .txt{
		max-width:100%;
	}
	#reason .rsn.r1 .pic{
		width:90%;
		display:block;
		margin-left:auto;
		margin-right:auto;
		padding:20px 0 0 0;
	}
}
/*
.r2
*/
#reason .rsn.r2{
	padding-bottom:36px;
}
#reason .rsn.r2 .txt{
	max-width:466px;
	width:100%;
}
#reason .rsn.r2 .txt h3.subttl .copy{
	max-width:396px;
	width:90%;
}
#reason .rsn.r2 .pic{
	width:448px;
	padding-top:64px;
	padding-left:20px;
}
@media screen and (max-width: 834px) {
	#reason .rsn.r2{
		padding-bottom:20px;
	}
	#reason .rsn.r2 .txt{
		max-width:100%;
	}
	#reason .rsn.r2 .pic{
		width:90%;
		display:block;
		margin-left:auto;
		margin-right:auto;
		padding:20px 0 0 0;
	}
}
/*
.r3
*/
#reason .rsn.r3{
	padding-bottom:20px;
}
#reason .rsn.r3 .txt{
	max-width:604px;
	width:100%;
}
#reason .rsn.r3 .txt h3.subttl .copy{
	max-width:406px;
	width:90%;
}
#reason .rsn.r3 .pic{
	max-width:252px;
	width:100%;
	padding-left:56px;
	padding-top:20px;
}
@media screen and (max-width: 834px) {
	#reason .rsn.r3 .txt{
		max-width:100%;
	}
	#reason .rsn.r3 .pic{
		width:90%;
		display:block;
		margin-left:auto;
		margin-right:auto;
		padding:20px 0 0 0;
	}
}




/*----------------------------------
#bnr
----------------------------------*/
#bnr{
	padding:50px 0;
	text-align: center;
}
#bnr img{
	max-width:540px;
	width:80%;
	cursor: pointer;
}
@media screen and (max-width: 834px) {
	#bnr{
		padding:5% 0;
}




@media screen and (max-width: 834px) {
}




@media screen and (max-width: 660px) {
}




@media screen and (max-width: 620px) {
}


@media screen and (max-width: 440px) {
}