/* CSS Document */

#footer{margin-bottom:0; width:100%; background-color:#000; padding-top:5%; padding-bottom:20%;}
#footer p{font-size:100%; line-height:130%; color:#fff; text-align:center;}
#footer a:link{color:#fff; text-decoration:none;}
#footer a:visited{color:#fff; text-decoration:none;}
#footer a:hover{color:#fff; text-decoration:underline;}
#footer a:active{color:#fff; text-decoration:none;}

section{margin:auto; width:100%;}


/* タイトル */
.harman_title{height:100%; width:100%; background:url(../img/harman_sp_title_bg1.jpg) repeat-x center; text-align:center;}
.harman_title h2{font-size:150%; line-height:160%; color:#fff; font-weight: normal; padding:1.5% 0 1.5% 0; text-align: center;}
.harman_title_2{height:100%; width:100%; background:url(../img/harman_sp_title_bg1.jpg) repeat-x center; text-align:center; margin-top: 5%;}
.harman_title_2 h2{font-size:150%; line-height:160%; color:#fff; font-weight: normal; padding:1.5% 0 1.5% 0; text-align: center;}
.harman_title_3{height:100%; width:100%; background:url(../img/harman_sp_title_bg2.jpg) repeat-x center; text-align:center; margin-top: 5%;}
.harman_title_3 h2{font-size:150%; line-height:160%; color:#fff; font-weight: normal; padding:1.5% 0 1.5% 0; text-align: center;}
.harman_title_4{height:100%; width:100%; background:url(../img/harman_sp_title2_bg1.jpg) repeat-x center; text-align:center; margin-top: 5%;}
.harman_title_4 h2{font-size:150%; line-height:160%; color:#fff; font-weight: normal; padding:1.5% 0 1.5% 0; text-align: center;}
.harman_title_5 h3{width: 94.5%; padding: 2%; color: #9e091e; font-size: 140%; background-color: #ececec; border-left: 5px solid #9e091e; margin-top: 5%; margin-left: auto; margin-right: auto; font-weight: normal;}
@media screen and (max-width: 320px) {.harman_title_5 h3{width: 94.5%; padding: 2%; color: #9e091e; font-size: 78%; background-color: #ececec; border-left: 5px solid #9e091e; margin-top: 5%; margin-left: auto; margin-right: auto; font-weight: normal;}}
.harman_title_6{height:100%; width:100%; background:url(../img/harman_sp_title2_bg2.jpg) repeat-x center; text-align:center; margin-top: 8%;}
.harman_title_6 h2{font-size:150%; line-height:160%; color:#fff; font-weight: normal; padding:1.5% 0 1.5% 0; text-align: center;}


/* 概要 */
#harman_summary .main{width: 100%; margin: 0; padding: 0;}
#harman_summary .main2{width: 100%; margin: 0; padding: 0;}
#harman_summary .box1{width: 100%; margin: 0 auto; padding: 0;}
#harman_summary .box1 .box1_t{width: 100%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_summary .box1 .box1_t .pict3{width: 65.33%; margin: 0 auto; padding: 0;}
#harman_summary .box1 .box1_b {width: 100%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_summary .box1 .box1_b p{width: 92.4%; text-align: left; font-size: 135%; color: #040707; margin: 0 auto; line-height: 180%;}
#harman_summary .box2{width: 100%; margin: 0 auto; padding: 0;}
#harman_summary .box2 .box2_t{width: 100%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_summary .box2 .box2_t .pict4{width: 65.33%; margin: 0 auto; padding: 0;}
#harman_summary .box2 .box2_b{width: 100%; margin-top: 3%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_summary .box2 .box2_b p{width: 92.4%; text-align: left; font-size: 135%; color: #040707; margin: 0 auto; line-height: 180%;}
#harman_summary .box3{width: 100%; margin: 0 auto; padding: 0;}
#harman_summary .box3 .box3_t{width: 88.4%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_summary .box3_t .box_t_l{float: left; width: 47.51%; margin: 0; padding: 0;}
#harman_summary .box3_t .box_t_l .pict5{float: left; width: 100%; padding: 0; margin: 0;}
#harman_summary .box3_t .box_t_r{float: left; width: 47.51%; margin-left: 4.9%; padding: 0;}
#harman_summary .box3_t .box_t_r .pict6{float: left; width: 100%; padding: 0; margin: 0;}
#harman_summary .box3 .box3_b{width: 95%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_summary .box3 .box3_b p{text-align: left; font-size: 135%; color: #040707; line-height: 180%;}

/* 特徴 */
#harman_feature .youtube{width: 100%; position: relative; padding-top: 56.25%;}
#harman_feature .youtube iframe{position:absolute; top: 0; right: 0; width:100% !important; height:100% !important;}
#harman_feature .pict7{width: 90%; margin: 0 auto;}
#harman_feature .system{width: 100%; margin: 0 auto; padding: 0;}
#harman_feature .system .system_t{width: 95%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .system .system_t .left{float: left; width: 55%; margin: 0 10% 0 0; padding: 0;}
#harman_feature .system .system_t .left p{text-align: left; font-size: 135%; color: #040707; line-height: 180%;}
#harman_feature .system .system_t .right{float: left; width: 30%; margin-right: 3%; padding: 0;}
#harman_feature .system .system_t .right .pict8{float: left; width: 100%; padding: 0; margin: 0;}
#harman_feature .system .system_b{width: 95%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .system .system_b p{text-align: left; font-size: 135%; color: #040707; line-height: 180%;}
#harman_feature .plot_box{width: 100%; margin: 0 auto; padding: 0;}
#harman_feature .plot_box .plot_1 .harman_plot1{width: 90.66%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .plot_box .plot_1 .harman_plot2{width: 63.2%; margin-top: 4%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .plot_box .plot_2{width: 86.4%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .plot_box .plot_2 .harman_plot3{float: left; width: 46.6%; margin: 0; padding: 0;}
#harman_feature .plot_box .plot_2 .harman_plot4{float: left; width: 46.6%; margin-left: 6.8%; padding: 0;}
#harman_feature .plot_box .plot_3{width: 86.4%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .plot_box .plot_3 .harman_plot5{float: left; width: 46.6%; margin: 0 auto; padding: 0;}
#harman_feature .plot_box .plot_3 .harman_plot6{float: left; width: 46.6%; margin-left: 6.8%; padding: 0;}
#harman_feature .plot_box .plot_4{width: 100%; margin-top: 10%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .plot_box .plot_4 .harman_plot7{width: 47.73%; margin: 0 auto; padding: 0;}
#harman_feature .plot_box .plot_4 p{font-size: 135%; color: #040707; width: 92.4%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0; line-height: 180%;}
#harman_feature .esp{width: 100%; margin: 0 auto; padding: 0;}
#harman_feature .esp .pict9{width: 64%; margin-top: 3%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .esp .txt{font-size: 135%; color: #040707; width: 92.4%; margin-top: 3%; margin-left: auto; margin-right: auto; padding: 0; line-height: 180%;}
#harman_feature .pellet_box{width: 100%; margin: 0 auto; padding: 0;}
#harman_feature .pellet_box .pellet{width: 74.53%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .pellet_box .pellet .pellet1{float: left; width: 28.44%; margin: 0 auto; padding: 0;}
#harman_feature .pellet_box .pellet .pellet2{float: left; width: 28.44%; margin-left: 7%; padding: 0;}
#harman_feature .pellet_box .pellet .pellet3{float: left; width: 28.44%; margin-left: 7%; margin-right: 0; padding: 0;}
#harman_feature .pellet_box p{font-size: 135%; color: #df363e; text-align: center; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0; font-weight: bold; line-height: 140%;}
#harman_feature .pellet_box .pellet4{width: 70.93%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .panel{width: 100%; margin: 0 auto; padding: 0;}
#harman_feature .panel .pict10{float: left; width: 38.93%; margin-top: 6%; margin-left: 5%; padding: 0;}
#harman_feature .panel .txt{float: left; width: 46%; font-size: 135%; color: #040707; text-align: left; margin-top: 5%; margin-left: 5%; padding: 0; line-height: 180%;}
#harman_feature .mirror_box{width: 100%; margin: 0 auto; padding: 0;}
#harman_feature .mirror_box .mirror{width: 66.93%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .mirror_box .mirror .pict11{float: left; width: 49.2%; margin: 0; padding: 0;}
#harman_feature .mirror_box .mirror .pict12{float: left; width: 49.2%; margin-left: 1.5%; padding: 0;}
#harman_feature .mirror_box .txt p{width: 92.4%; font-size: 135%; color: #040707; text-align: left; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0; line-height: 180%;}
#harman_feature .design_box{width: 100%; margin: 0 auto; padding: 0;}
#harman_feature .design_box .design{width: 83.73%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .design_box .design .pict13{float: left; width: 31.21%; margin: 0 auto; padding: 0;}
#harman_feature .design_box .design .pict14{float: left; width: 31.21%; margin-left: 3%; padding: 0;}
#harman_feature .design_box .design .pict15{float: left; width: 31.21%; margin-left: 3%; padding: 0;}
#harman_feature .design_box p{font-size: 135%; color: #040707; width: 92.4%; text-align: left; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0; line-height: 180%;}
#harman_feature .safety_box{width: 100%; margin: 0 auto; padding: 0;}
#harman_feature .safety_box .safety_t{width: 75.2%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .safety_box .safety_t .safety_t_l{float: left; width: 48.75%; margin: 0 auto; padding: 0;}
#harman_feature .safety_box .safety_t .safety_t_r{float: left; width: 47.87%; margin-left: 3%; padding: 0;}
#harman_feature .safety_box .safety_b{width: 75.2%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_feature .safety_box .safety_b .safety_b_l{float: left; width: 48.75%; margin: 0 auto; padding: 0;}
#harman_feature .safety_box .safety_b .safety_b_r{float: left; width: 47.87%; margin-left: 3%; padding: 0;}
#harman_feature .safety_box p{font-size: 135%; color: #040707; width: 92.4%; text-align: left; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0; line-height: 180%;}
#harman_feature .maintenance{width: 100%; margin: 0 auto; padding: 0;}
#harman_feature .maintenance ul{width: 88%; margin: 0 auto; padding: 0;}
#harman_feature .maintenance li{width: 98.5%; font-size: 135%; color: #040707; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0; list-style: none;}
#harman_feature .maintenance li::before{position: relative; top: -3px; left: -2%; display: inline-block; width: 3px; height: 3px;  content: ""; border-radius: 100%; background: #040707;}
#harman_feature .maintenance .txt_b{width: 98.5%; font-size: 135%; color: #040707; margin-top: 2%; margin-left: auto; margin-right: auto; padding: 0;}


/* xxv製品 */
#harman_xxv .xxv_box{width: 100%; margin: 0 auto; padding: 0;}
#harman_xxv .xxv_box .xxv1{width: 100%; margin: 2% 0 0 0; padding: 0;}
#harman_xxv .xxv_box p{width: 92.4%; font-size: 135%; color: #040707; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0; line-height: 180%;}
#harman_xxv .xxv_box .xxv2{width: 54.8%; margin-top: 8%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_xxv .xxv_box .xxv3{width: 54.8%; margin-top: 8%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_xxv .xxv_box .xxv4{width: 54.8%; margin-top: 8%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_xxv .xxv_box .center{font-size: 135%; text-align: center; margin-top: 3%; padding: 0;}
#harman_xxv .products_box{width: 100%; margin: 0 auto; padding: 0;}
#harman_xxv .products_box .products1{width: 41.33%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_xxv .products_box .txt{width: 80%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_xxv .products_box .txt .txt_l{float: left; width: 39%; font-size: 135%; color: #040707; text-align: right; margin: 0 auto; padding: 0; line-height: 200%;}
#harman_xxv .products_box .txt .txt_r{float: left; width: 60%; font-size: 135%; color: #040707; text-align: left; margin-left: 1%; padding: 0; line-height: 200%;}
#harman_xxv .products_box .tel{width: 74.66%; margin-top: 8%; margin-left: auto; margin-right: auto; margin-bottom: 10%; padding: 0;}
#harman_xxv .products_box .tel a:hover {filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}


/* その他の製品 */
#harman_other .other1_box{width: 100%; margin: 0 auto; padding: 0;}
#harman_other .other1_box .pict1{width: 30.93%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_other .other1_box .txt{width: 80%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_other .other1_box .txt .txt_l{float: left; width: 49%; font-size: 135%; color: #040707; text-align: right; margin: 0 auto; padding: 0; line-height: 200%;}
#harman_other .other1_box .txt .txt_r{float: left; width: 50%; font-size: 135%; color: #040707; text-align: left; margin-left: 1%; padding: 0; line-height: 200%;}
#harman_other .other1_box p{width: 92.4%; font-size: 135%; color: #040707; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0; line-height: 180%;}
#harman_other .other1_box .detail_btn{width: 55.33%; margin-top: 8%; margin-left: auto; margin-right: auto; margin-bottom: 10%; padding: 0;}
#harman_other .other1_box .detail_btn a:hover {filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
#harman_other .other2_box{width: 100%; margin: 0 auto; padding: 0;}
#harman_other .other2_box .pict2{width: 30.93%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_other .other2_box .txt{width: 80%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_other .other2_box .txt .txt_l{float: left; width: 49%; font-size: 135%; color: #040707; text-align: right; margin: 0 auto; padding: 0; line-height: 200%;}
#harman_other .other2_box .txt .txt_r{float: left; width: 50%; font-size: 135%; color: #040707; text-align: left; margin-left: 1%; padding: 0; line-height: 200%;}
#harman_other .other2_box p{width: 92.4%; font-size: 135%; color: #040707; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0; line-height: 180%;}
#harman_other .other2_box .detail_btn{width: 55.33%; margin-top: 8%; margin-left: auto; margin-right: auto; margin-bottom: 10%; padding: 0;}
#harman_other .other2_box .detail_btn a:hover {filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
#harman_other .other3_box{width: 100%; margin: 0 auto; padding: 0;}
#harman_other .other3_box .pict3{width: 30.93%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_other .other3_box .txt{width: 80%; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0;}
#harman_other .other3_box .txt .txt_l{float: left; width: 49%; font-size: 135%; color: #040707; text-align: right; margin: 0 auto; padding: 0; line-height: 200%;}
#harman_other .other3_box .txt .txt_r{float: left; width: 50%; font-size: 135%; color: #040707; text-align: left; margin-left: 1%; padding: 0; line-height: 200%;}
#harman_other .other3_box p{width: 92.4%; font-size: 135%; color: #040707; margin-top: 5%; margin-left: auto; margin-right: auto; padding: 0; line-height: 180%;}
#harman_other .other3_box .detail_btn{width: 55.33%; margin-top: 8%; margin-left: auto; margin-right: auto; margin-bottom: 10%; padding: 0;}
#harman_other .other3_box .detail_btn a:hover {filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}


.spt3{padding-top: 3%;}
.clearfix:after{content:"."; display:block; clear:both; height:0; visibility:hidden;}
* html .clearfix{height: 1px; /*¥*//*/ height: auto; overflow: hidden; /**/}
