@charset "utf-8";
/* CSS Document */
body,p,dl,dt,dd,ul,li,p{margin:0; padding:0;}

/*clearfix*/
.cf:before,
.cf:after {content: " "; display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

/*拡大*/
#toku_content .item_box li a{display:block; position:relative; margin-bottom:5px; }
#toku_content .item_box li a:hover:after { content: url("https://dist.joshinweb.jp/img/system/PC/home/zoom40.gif"); position: absolute; opacity:0.65; right: 10px; bottom: 5px; }
#toku_content .item_box li a img{vertical-align:bottom;}

#toku_content .item_box li .matome a { content:none; display:inline;}
#toku_content .item_box li .matome a:hover:after { content:none; }


/*movie*/
.videoBox { position: relative; text-align:center;}
.videoBox a:after,
#toku_content .item_box .videoBox a:hover:after{content: url("https://dist.joshinweb.jp/contents/report/sound/piano2017/movie_on.png"); width:100px; height:100px; display: block; position: absolute; top:0; right:0; bottom:0; left:0; margin:auto;}

/* ライター表記 */
.writer{text-align:right;}
#toku_content .item_box .matome p:last-child{text-align:right;} 


/* コンテンツメイン */
#toku_content{width:100%; margin:0 auto; font-family:SF Pro JP,SF Pro Text,SF Pro Icons,AOS Icons,Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Helvetica Neue,Helvetica,Arial,sans-serif; line-height:145%; font-size:110%; text-align:left;}

/* ヘッダー */
header {
	color: #454545;
 	font-family: SF Pro JP,SF Pro Text,SF Pro Icons,AOS Icons,Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Helvetica Neue,Helvetica,Arial,sans-serif;
 	font-size: 16px;
	line-height: 22.4px;
    text-align: left;
}
header{
	width: 100%;
    border-bottom: 0;
    overflow: hidden;
	display: table;
	background: #454545;
}
header figure,
header .head {
	width: 50%;
	display: table-cell;
	vertical-align: middle;
}

header figure img { display: none; }
header figure {
	background: url(https://dist.joshinweb.jp/contents/report/toy/folo/034.jpg);
	height: 600px;
	background-repeat: no-repeat;
    background-position: center center; /* 見せたい位置を調節 */
	background-size: cover;
	margin: 0;
}

header .head {
	position: relative;
	padding: 2em;
    padding-bottom: 2.7em;
	color: #fff;
	box-sizing: border-box;
}
header .head h1 {
	font-size: 120%;
	margin: 0;
	font-weight: normal;
	line-height: 120%;
}
header .head h1 span {
	display: block;
	font-size:180%;
	line-height: 120%;
	font-weight:600;
	margin: 0 0 .5em;
	color:#FFCC00;
}
header .head h2 {
	font-size: 120%;
	font-weight: 600;
	margin: .3em 0;
	line-height: 120%;
}
header .head p {
	margin-top: 1em;
}

/*背景 */
#toku_content section{background-color:#fff; padding:4% 0 3%; margin:0 auto;}
#toku_content section:nth-child(even){background-color:#ededed;}

/* item_box */
#toku_content .item_box{width:100%; max-width:1280px; margin:0 auto 0; padding:0;}
#toku_content .item_box ul{max-width:1280px; width:100%;  margin:0 auto 2em; text-align:center;}
#toku_content .item_box li{float:left; list-style:none; box-sizing:border-box;}
#toku_content .item_box ul li img {width:100%;}
#toku_content .item_box ul li figure{font-size:90%; text-align:center; margin:0 0 1em 0; line-height:160%;}
#toku_content .item_box p{margin:0 0 1em; text-align:left;}


/*photo 縦2,3,4並び */
#toku_content .item_box .box2 li{width:49%; margin:0; padding:0;}
#toku_content .item_box .box2 li:last-child{margin:0 0 0 2%;}
#toku_content .item_box .box2t li{width:49%; margin:0; padding:0;}
#toku_content .item_box .box2t li:last-child{margin:0 0 0 2%;}
#toku_content .item_box .box3 li{width:32%; margin:0; padding:0;}
#toku_content .item_box .box3 li:nth-child(2){margin:0 2%; padding:0;}
#toku_content .item_box .box4 li{width:24%; margin:0 1.3% 0 0; padding:0;}
#toku_content .item_box .box4 li:last-child{margin:0;}
#toku_content .item_box .box5 li{width:19%; margin:0 1% 0 0; padding:0;}
#toku_content .item_box .box5 li:last-child{margin:0;}

#toku_content .item_box .box2 li ul{margin:0 auto 0;}
#toku_content .item_box .box2 li ul li{position:relative;}
#toku_content .item_box .box2 li ul li figure{margin:0 0 0 0; background:rgba(0,0,0,.4); color: #FFFFFF; position:absolute; bottom:.4em; display:block; padding:.1em .5em; box-sizing: border-box; width:100%; font-size:80%; text-align:left;}


/* 文章 */
#toku_content .item_box div{width:75%; margin:0 auto 4em;}
#toku_content .item_box div:last-child{margin:1em auto;}
#toku_content .item_box div p{margin-bottom:2em;}
#toku_content .item_box div p:last-child{margin-bottom:0;}

#toku_content .item_box .box2t div{width:100%; padding:1em 2em; box-sizing:border-box;}

/* h1 */
#toku_content section h1{text-align:center; font-weight:bold; font-size:180%; line-height:120%; margin:0; padding:0 0 2em; letter-spacing:2px;}
#toku_content section .box2t h1{text-align:left; padding:0 0 .5em;}


/* h2 & h3 */
#toku_content .item_box h2{text-align:center; font-weight:500; font-size:200%; line-height:120%; margin:0 0 2em;}
#toku_content .item_box h3{text-align:center; font-weight:500; font-size:120%; line-height:120%; margin:0 auto 2em; background-color:#000000; border-radius:60px; color:#FFFFFF; padding:.4em 1em; display:table;}



#toku_content .item_box .box2t h2{padding:0 0 .3em; text-align:left;}
#toku_content .item_box .box2t h3{text-align:left; font-weight:500; font-size:160%; line-height:120%; margin:0 0 1em; background-color:white; color:#000000; padding:0 0;}

/* スペック表 */
#toku_content .item_box dl{text-align:left; font-size:80%; margin:2em 0 0;}
#toku_content .item_box dl dt,
#toku_content .item_box dl dd{margin-bottom:.4em; border-bottom:dashed 1px #ccc; padding-bottom:.4em;}
#toku_content .item_box dl dt{float:left; width:35%;}

#toku_content .item_box .box2 dl{ text-align:left; font-size:80%; margin:2em 0 0;}
#toku_content .item_box dl dt,
#toku_content .item_box dl dd{margin-bottom:.4em; border-bottom:dashed 1px #ccc; padding-bottom:.4em;}
#toku_content .item_box dl dt{float:left; width:35%;}

#toku_content .item_box .kogu{ border:1px solid #ccc; padding:.7em 1em; margin:1em 0; display:table; box-sizing:border-box;}
#toku_content .item_box .point{ font-size:130%;}

@media screen and (max-width:480px) {
h3 br{display:block;}

header {
	height: auto;
	background: #454545;
	display: block;
}

header .head {
	background: none;
	color: #ffffff;
	padding: 1em;
}

header .head h1 span {
	color:#ffcc00;
	line-height: 120%;
	font-size:140%;
}

header .head h2{color:#ffffff;}

header figure,
header .head {
	display: block;
	width: 100%;
	height: auto;
	background: none;
}
header figure img {
	display: inline;
	width: 100%;
}
header h1,
header h2 { text-shadow: none; }

/* item_box */
#toku_content .item_box ul{margin:0 auto 2em;}
#toku_content .item_box ul li{max-width:420px; width:100%; margin:0 auto;}
#toku_content .item_box ul li figure{margin-bottom:1em;}

/*box */
#toku_content .item_box .box2 li,
#toku_content .item_box .box2 li:last-child,
#toku_content .item_box .box2t li,
#toku_content .item_box .box2t li:last-child,
#toku_content .item_box .box3 li,
#toku_content .item_box .box3 li:nth-child(2),
#toku_content .item_box .box4 li,
#toku_content .item_box .box4 li:last-child,
#toku_content .item_box .box5 li,
#toku_content .item_box .box5 li:last-child{max-width:480px; width:98%; margin:0 1%;}

#toku_content .item_box .box2t li div{padding:1em 1em; box-sizing:border-box; margin:0 0;}


/* h1 */
#toku_content .item_box h1{text-align:center; line-height:120%; font-size:140%; margin:1.5em auto 0;}
/* h2 */
#toku_content .item_box h2{text-align:center; line-height:120%; font-size:140%; margin:1.5em auto;}
#toku_content .item_box .box2t div{width:100%; padding:1em 2em; box-sizing:border-box;}

/* 文章 */
#toku_content .item_box div{width:90%; margin:1em auto 3em;}
#toku_content .item_box div p{margin-bottom:1em;}
#toku_content .item_box div p:last-child{ margin-bottom:0;}


}

@media screen and (min-width:481px) and (max-width:768px) {
header {
	height: auto;
	background: #454545;
	display: block;
}

header .head {
	background: none;
	color: #ffffff;
	padding: 1em;
}

header .head h1 span {
	color:#ffcc00;
}

header .head h2{color:#ffffff;}

header figure,
header .head {
	display: block;
	width: 100%;
	height: auto;
	background: none;
}
header figure img {
	display: inline;
	width: 100%;
}
header h1,
header h2 { text-shadow: none; }

/* item_box */
#toku_content .item_box ul{width:100%; margin-bottom:2em;}
#toku_content .item_box ul li{max-width:768px; width:100%; margin:0 auto; padding:10px; text-align:center;}
#toku_content .item_box ul li img{width:100%;}
#toku_content .item_box ul li figure{margin-bottom:1em;}

#toku_content .item_box .box2t li,
#toku_content .item_box .box2t li:last-child{max-width:768px; width:80%; margin:0 10%;}
#toku_content .item_box .box2t li h2{margin:0 0 .5em; font-size:160%;}
#toku_content .item_box .box2t li div{padding:1em 1em; box-sizing:border-box; margin:0 0;}

#toku_content .item_box .box4 li,
#toku_content .item_box .box4 li:last-child{max-width:768px; width:48%; margin:0 1%;}

#toku_content .item_box h1{text-align:center; line-height:140%; font-size:140%; margin:.5em auto 0;}


}