@charset "utf-8";

/* ========================================================
LINE.css => LINE用CSS
======================================================== */
.pc				{ display: block !important; }
.sp				{ display: none !important; }
img.pc			{ display: inline-block !important; }
img.sp			{ display: none !important; }
#piano, .pageup	{ font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; }
#piano .bgGray	{ background: #f8f8f8; }
#piano .inner	{ width: 960px; margin: 0 auto; overflow: hidden; }
#piano h3		{ margin: 20px 0; font-size: 158%; text-align: center; }
#piano h4		{ margin: 30px 0 5px; font-size: 158%; text-align: center; }
#piano .exp		{ margin-top: 15px; text-align: left; }

#piano #mainVis		{ height: 0; padding-top: 490px; background: url("../images/p_main_line_pc.jpg") no-repeat center 0; /*overflow: hidden;*/ }
#piano #mainVis img	{ display: none; }

#piano #section02			{/* margin-top: 17px;*/ padding:0 0 50px; }
#piano #section02 .add		{ position: relative; width: 866px; margin: 0 auto; }
#piano #section02 .add	.read {border: 7px solid #fff2de; padding: 10px; width: 100%; text-align: left;}
#piano #section02 .left		{ float: left; width: 366px; }
#piano #section02 .right		{ float: right; width: 366px; }
#piano #section02 .add	img	{ border: 1px solid #ff9900;}

#piano #section01				{padding: 0; }
#piano #section01 .flow			{ margin-top: 35px; }
#piano #section01 .flow li		{ float: left; width: 290px; margin-right: 3px; padding-right:42px; background: url("../images/bg_ar_flow.png") no-repeat right center; }
#piano #section01 .flow li.last	{ margin-right: 0; padding-right: 0; background: none; }
#piano #section01 .num			{ border-bottom: 1px solid #f90; }

#piano #section03	{ padding: 50px 0;}
#piano #section03 h4	{ color: #fff; background: #f90; margin: 0;}
#piano #section03 ul	{ width: 980px; }
#piano #section03 li	{ float: left; width: 444px; height: 180px; margin: 0 19px 20px 0; border: 1px solid #f90; padding: 10px; background: #fff;}

#piano #section04	{ padding: 50px 0; }
#piano #section04 ul	{ width: 978px; }
#piano #section04 li	{ float: left; width: 473px; margin-right: 16px; }
#piano #section04 dl	{ margin-top: 20px; padding: 15px 20px; border: 1px solid #d6d6d6; border-radius: 5px; }
#piano #section04 dt	{ float: left; width: 450px; margin-top: 25px; font-size: 129%; font-weight: bold; text-align: center; }
#piano #section04 dd	{ float: right; width: 451px; }

@media screen and (min-width: 0px) and (max-width: 667px){
.pc				{ display: none !important; }
.sp				{ display: block !important; }
img.pc			{ display: none !important; }
img.sp			{ display: inline-block !important; }
a				{ text-decoration: none !important; }
.order li		{ margin-top: 13px; margin-bottom: 0 !important; }
#piano .inner	{ width: auto; padding: 0 20px; text-align: center;}

#header_logo     { width: 37%; float: left; }
#header_inquiry  { width: 53%; float: right; }

#piano #mainVis		{ height: auto; padding-top: 0; background: none; }
#piano #mainVis img	{ display: block; width: 100%; height: auto; }

#piano #section01				{padding: 0; }

#piano #section02			{ margin-top: 0; padding:0 0 30px; }
#piano #section02 .add		{width: 100%; }
#piano #section02 .left		{ float: none; width: 100%;}
#piano #section02 .right		{ float: none; width: 100%;}
#piano #section02 .add	img	{ width: 100%;}

#piano #section01 .flow li		{ float: none; width: auto; margin: 0 0 17px; padding:30px 0 ; background: url("../images/bg_ar_flow_btm.png") no-repeat center bottom; background-size: 15px 15px; }
#piano #section01 .flow li.last	{ margin-bottom: 0; padding-bottom: 0; }
#piano #section01 .flow li p img	{ max-width: 100%; height: auto; }

#piano #section03			{ width: auto;padding:30px 0 ; }
#piano #section03 h4	{ font-size: 1.2rem;}
#piano #section03 ul			{ width: auto; }
#piano #section03 li			{ float: none; width: auto;height: auto; margin: 0 0 20px; }
#piano #section03 li p img	{ max-width: 100%; height: auto; }

#piano #section04		{ padding:30px 0 ; }
#piano #section04 ul		{ width: auto; margin-top: 0; }
#piano #section04 li		{ float: none; width: auto; margin: 20px 0 0; }
#piano #section04 li img	{ max-width: 100%; height: auto; }