@charset "UTF-8";
#page_content.otokono{
	padding:0px;
	background:#151515;
}
#page_content.otokono h1{
	margin:0 auto;
}
.otokono main{
	max-width:980px;
	margin:0 auto;
}
.otokono header{
	padding:20px 0 ;
}
.otokono header .otokono_eng{
	text-align: right;
	padding-right: 12px;
}
.otokono header h2{
	padding:0 0 0 26px;
	display: flex;
}
.otokono header h2 img{
	vertical-align: bottom;
}
.otokono header h2 p{
	font-size:118%;
	line-height: 1.6;
	color:#fff;
	padding:78px 0 0 44px;
}

.otokono section{
	background:#3c312d;
	color:#fff;
}

.otokono section .arc_profile{
	display: flex;
	flex-direction: row-reverse;
}
.otokono section .arc_profile .txt{
	width:571px;
	padding:40px 0 0 50px;
	box-sizing: border-box;
	background:url(../img/i_profile.gif) 254px 28px no-repeat;
}
.otokono section .arc_profile .txt .title{
	font-size:170%;
	margin-bottom: 20px;
	font-family: 'Noto Serif', serif;
}
.otokono section .arc_profile .txt .name{
	font-size:145%;
	margin-bottom: 8px;
}
.otokono section .arc_profile .txt .comment{
	width:472px;
	line-height: 1.7;
}


.otokono section .c_wrapper{
	padding:50px 50px;
	background:url(../img/bg_body.gif);
}
.otokono section .c_wrapper .conts_title{
	position: relative;
	font-family: 'Noto Serif', serif;
}
.otokono section .c_wrapper .conts_title .title{
	width:704px;
	height:124px;
	background: rgba(28,24,23,0.7);
	font-size:284%;
	line-height: 1;
	box-sizing: border-box;
	padding:42px 0 0 36px;
}
.otokono section .c_wrapper .conts_title .owner{
	width:204px;
	height:78px;
	background: rgba(3,2,2,0.7);
	font-size:120%;
	text-align: center;
	padding-top:30px;
	box-sizing: border-box;
	position: absolute;
	right:0px;
	top:60px;
}

.otokono section .c_wrapper .conts_copy{
	padding:32px 0 40px 36px;
	font-size:130%;
	line-height: 2;
	font-family: 'Noto Serif', serif;
}


#slider_wrapper{
	background: #3c312d;
	padding:5% 5% 4% 5%;
}
#slider_caption{
	width:100%;
	margin:0 auto 20px;
	line-height: 1.4;
}
#slider_caption li:not(:first-child){
	display: none;
}
#slider{
	margin:0 0 20px 0;
	box-sizing: border-box;
}
#slider li div{
	display: table;
	width:100%;
}
#slider li div p{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
#slider li div p img{
	width:100%;
	height: auto;
}
.slick-prev,
.slick-next{
	display: none!important;
}
#slider_title{
	text-align: center;
	font-size:130%;
	padding-bottom: 20px;
	font-family: 'Noto Serif', serif;
}
#slider_ctlr{
	width:100%;
	display: inline-block;
	text-align: center;
}
#slider_ctlr li{
	display: inline-block;
	padding:0 8px;
	margin:0 0 8px 0;
}
#slider_ctlr li img{
	border:solid 1px #3c312d;
	cursor: pointer;
}
#slider_ctlr li img:hover{
	opacity: 0.7;
}
#slider_ctlr li img.on{
	border:solid 1px #fff;
}


#slider_nav{
	width:100%;
	position: absolute;
	top:50%;
	left:0;
}
#slider_nav li{
	height:0px;
	background:red;
}
#slider_nav li img{
	cursor: pointer;
}
#slider_nav li.b_next img{
	margin:-25px 0 0 0;
}
#slider_nav li.b_prev img{
	margin:-25px 0 0 0;
}
#slider_nav li img:hover{
	opacity: 0.7;
}
#slider_nav li.b_next{
	float:right;
}
#slider_nav li.b_prev{
	float:left;
}

.otokono section .review{
	background:rgba(2,3,2,0.7);
	position: relative;
	padding:30px;
}





@media screen and (max-width: 834px) {
	#page_content.otokono{
		padding:60px 0 0;
	}
	#page_content.otokono h1{
		margin:0 auto;
	}
	.otokono main{
		max-width:96%;
	}
	.otokono header .otokono_eng img{
		width:auto;
	}
	.otokono header h2{
		padding-top:20px;
		display: block;
	}
	.otokono header h2 img{
		width:auto;
	}
	.otokono header h2 .pic_profile{
		text-align: right
	}
	.otokono header h2 .pic_profile img{
		width: auto;
	}
	.otokono header h2 p{
		padding:20px 0 0 0;
	}

	.otokono section .arc_profile{
		display: block;
		padding-bottom:20px;
	}
	.otokono section .arc_profile .pic{
		width: auto;
		text-align: center;
	}
	.otokono section .arc_profile .pic img{
		width: auto;
	}
	.otokono section .arc_profile .txt{
		width:auto;
		padding:20px 20px 0;
		background:url(../img/i_profile.gif) center 28px no-repeat;
	}
	.otokono section .arc_profile .txt .title,
	.otokono section .arc_profile .txt .name{
		text-align: center;
	}
	.otokono section .arc_profile .txt .name{
		padding-bottom:20px;
	}
	.otokono section .arc_profile .txt .comment{
		width:auto;
	}


	.otokono section .c_wrapper{
		padding:20px 20px;
		background:url(../img/bg_body.gif);
	}
	.otokono section .c_wrapper .conts_title{
		position: relative;
		font-family: 'Noto Serif', serif;
	}
	.otokono section .c_wrapper .conts_title .title{
		width:auto;
		height:auto;
		font-size:6vw;
		line-height: 1.4;
		box-sizing: border-box;
		padding:3vw 3vw;
	}
	.otokono section .c_wrapper .conts_title .owner{
		width:auto;
		height:auto;
		text-align: left;
		padding:2vw 3vw;
		position: relative;
		right:auto;
		top:auto;
	}

	.otokono section .c_wrapper .conts_copy{
		padding:3vw 3vw;
	}
	.otokono section .c_wrapper .conts_copy br:last-child{
		display: none;
	}




	.otokono section .review{
		background:rgba(2,3,2,0.7);
		position: relative;
		padding:80px 30px 30px;
	}
	.otokono section .review img{
		position: absolute;
		top:20px;
		left:30px;
		width: auto;
	}
	.otokono section .review .txt{
		padding-right:0;
		line-height:1.5;
	}
}




@media screen and (max-width: 830px) {
	#slider_ctlr li img{
		height:72px;
		width:auto;
	}
}



@media screen and (max-width: 660px) {
	#slider_ctlr li img{
		height:56px;
		width:auto;
	}
	#slider_ctlr li{
		padding:0 4px;
	}
}




@media screen and (max-width: 620px) {
	.otokono header .otokono_eng img {
	    width: 60%;
	}
	.otokono header h2{
		padding-left:10px;
	}
	.otokono header h2 img{
		width:62%;
	}
#slider_nav li img{
	width:32px;
	height:32px;
}
}


@media screen and (max-width: 440px) {
	.otokono section .arc_profile .pic img {
    	width: 100%;
	}
}