@charset "utf-8";

.navigator_area .left{
    width: 48%;
    padding-right: 13%;
}
.navigator_area .left img{
    bottom: -28px;
    right: 0;
}
.navigator_area .right{
    width: 48%;
    padding-right: 13%;
}
.navigator_area .right img{
    bottom: -28px;
    right: 0;
}
.part_title_cover{
    padding-right: 51%;
}
.recommend_area_cover{
    width: 54%;
}
.recommend_area_navigator{
	left: -45px;
}
#block1{
    margin-bottom: 30px;
}
#block1 .left{
    width: 50%;
    padding-right: 30px;
}
#block1 .right{
    width: 50%;
}
#block2{
    margin-bottom: 10px;
}
#block2 .left{
    width: 64.5%;
}
#block2 .right{
    width: 35.5%;
    padding-left: 30px;
}
#block3{
    background: url(../img/img4.jpg) no-repeat right top;
    background-size: 27.2%;
    min-height: 280px;
    margin-bottom: 60px;
}
#spec1{
    margin-bottom: 90px;
}
.img3{
    margin-bottom: 20px;
    width: 76%;
}
.block3_text{
    width: 100%;
    padding-right: 30%;
}
.spec_area{
    width: 100%;
}
.store_spec{
    width: 62%;
}
.orner_comment{
    width: 35%;
}
.spec_text .left{
	width: 48%;
}
.spec_text .right{
	width: 48%;
}

#block4{
    margin-bottom: 30px;
}
#block4 .left{
    width: 35%;
}
#block4 .right{
    width: 65%;
    padding-left: 30px;
}
.img7{
    margin-bottom: 30px;
}
#block5{
    margin-bottom: 30px;
}

.orange_area{
    background: #fce2c4;
    width: 63%;
    float: right;
    padding: 20px;
}
.orange_area .left{
    width: 66%;
    padding-right: 20px;
}
.orange_area .right{
    width: 34%;
}
#block6{
    margin-bottom: 30px;
}

.titleimg1{
    margin-bottom: 10px;
    display: block;
}
.grayline{
    border: 1px solid #aaa;
    box-sizing: border-box;
}
.img8{
    position: absolute;
    width: 30.4%;
    top: 75px;
    left: 0;
}
.blue_area{
    width: 58%;
    border: 3px solid #6699ba;
    box-sizing: border-box;
    background: url(../img/pattern_bg.gif);
    padding: 30px;
    position: relative;
}
.staff_photo{
    width: 42%;
    padding-left: 25px;
}
.blue_area .left{
    width: 70%;
    padding-right: 20px;
}
.blue_area .right{
    width: 30%;
}
.purple_text{
    font-size: 22px;
    font-weight: bold;
    color: #b83d79;
    line-height: 1.5;
    margin-bottom: 10px;
}
.img10{
    margin-bottom: 5px;
}
.corner_tl,.corner_tr,.corner_bl,.corner_br{
    position: absolute;
    width: 30px;
    height: 30px;
}
.corner_tl{
    top: 0;
    left: 0;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}
.corner_tr{
    top: 0;
    right: 0;
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
}
.corner_bl{
    bottom: 0;
    left: 0;
}
.corner_br{
    bottom: 0;
    right: 0;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}
.spec_table{
    margin-bottom: 15px;
}
.spec_table_block{
  margin-bottom: 15px;
}
.spec2_th {
    font-size: 13px;
    color: #fff;
    background: #248a67;
    padding: 0px 10px;
    text-align: center;
    margin: 7px 10px 0 0;
    display: inline-block;
    width: 60px;
    letter-spacing: 1px;
}
@media only screen and (max-width: 1040px) {
    .navigator_area .left{
		padding-right: 125px;
	}
	.navigator_area .right {
	    padding-right: 118px;
	}
    .recommend_area_navigator {
        left: -11%;
        width: 30%;
    }
    .recommend_area {
        border-radius: 10px;
        padding: 20px 20px 20px 20%;
        line-height: 1.5;
    }
    .recommend_area p{
        display: table;
    }
    .recommend_area_cover {
        width: 48%;
        bottom: 0;
    }
    .part_title_cover {
        padding-right: 48%;
    }
    .store_spec {
        width: 100%;
    }
    .spec_spleft{
        float: left;
        width: 48%;
    }
    .spec_text{
        width: 50%;
        float: right;
    }
    .orner_comment{
        width: 100%;
        margin-top: 20px;
        padding: 15px;
    }
    .orner_comment .absolute {
        position: static;
        float: right;
        margin-bottom: -15px;
        width: 15%;
    }
}
@media only screen and (max-width: 768px) {
    .navigator_area .right{
        width: 100%;
        margin-top: 20px;
        min-height: 136px;
    }
    .navigator_area .left{
        width: 100%;
    }
    .navigator_area_whiteline{
        padding: 20px;
    }
    .navigator_title{
        left: 25px;
    }
    .navigator_area .left img{
        bottom: 0;
    }
    .recommend_area_cover {
        width: 100%;
        position: static;
        margin-top: 15px;
    }
    .recommend_area_navigator {
        width: 120px;
        position: static;
        float: left;
        margin: 0 10px -20px 0;
    }
    .recommend_area{
        padding: 20px;
    }
    .recommend_area_title{
        position: static;
        margin-bottom: 7px;
    }
    .part_title_cover {
        padding-right: 0;
        min-height: 68px;
        background: url(../img/leaf_sp.gif) no-repeat top left;
        background-size: 65px;
        border-bottom: 2px #ea5548 solid;
        box-sizing: border-box;
        padding: 0 0 10px 80px;
    }
    .part_title_text{
        display: inline-block;
        margin-right: 5px;
        font-size: 24px;
    }
    .part_title_ruby{
        display: inline-block;
        font-size: 12px;
        letter-spacing: normal;
    }
    .part_title_area .lead{
        font-size: 14px;
        letter-spacing: normal;
    }
    .orner_comment .absolute{
        width: 20%;
    }
    .spec_area{
        padding: 15px;
    }
    .orner_comment{
        border-radius: 10px;
    }
    #block1 .left {
        width: 100%;
        padding-right: 0;
    }
    #block1 .right {
        width: 100%;
        margin-top: 20px;
    }
    #block2 .right {
        width: 100%;
        padding-left: 0;
        margin: 20px 0;
    }
    #block2 .left {
        width: 100%;
    }
    #block1 {
        margin-bottom: 20px;
    }
    .img3 {
        width: 100%;
    }
    .block3_text {
        padding-right: 0;
    }
    #block3 {
        background: none;
        min-height: 0;
        margin-bottom: 40px;
    }
    .h3_title {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .spec_text {
        width: 100%;
        max-width: 500px;
        float: none;
    }
    .spec_spleft {
        width: 100%;
    }
    #block4 .right {
        width: 100%;
        padding-left: 0;
    }
    .img6{
        width: 45%;
        float: left;
        margin: 0 30px 10px 0;
    }
    .navigator_area {
        margin-bottom: 40px;
    }
}
@media only screen and (max-width: 640px) {
    .recommend_area_navigator{
        margin: 0 10px 0 0;
    }
    .orner_comment .absolute {
        position: absolute;
        margin-bottom: 0;
    }
    .orner_comment {
        padding-right: 25%;
    }
    #spec1 {
        margin-bottom: 50px;
    }
    .img7 {
        margin-bottom: 20px;
    }
    .img8{
      width: 25%;
        top: 10px;
    }
    .orange_area {
        width: 100%;
        padding: 20px;
    }
    #block5 {
        margin-bottom: 20px;
    }
    #block4 {
        margin-bottom: 20px;
    }
    .blue_area {
        width: 100%;
        padding: 20px;
    }
    .purple_text {
        font-size: 20px;
        margin-bottom: 5px;
    }
    .corner_tl, .corner_tr, .corner_bl, .corner_br {
        width: 20px;
        height: 20px;
    }
    .staff_photo {
        width: 100%;
        padding-left: 0;
        text-align: center;
        margin-top: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .navigator_area .right img,.navigator_area .left img{
        width: 90px;
    }
    .navigator_area .right{
        min-height: 125px;
    }
    .navigator_area .left,.navigator_area .right {
        padding-right: 100px;
    }
    .navigator_area .right{
        margin-top: 10px;
    }
    .navigator_name{
        width: calc(100% + 100px);
    }
    .part_title_ruby{
        margin-top: 0;
    }
    .recommend_area{
        padding: 15px;
    }
    .orner_comment {
        padding: 15px 15px 50px 15px;
    }
    .orner_comment .absolute {
        width: 27%;
    }
    .spec_text .right {
        width: 100%;
    }
    .spec_table td{
        width: 100%;
        display: block;
    }
    .spec_table td a{
        display: inline-block;
    }
    .blue_area .left {
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
    }
    .blue_area .right {
        width: 100%;
    }
    .blue_area .right img{
        width: 48%;
        float: left;
        margin-left: 4%;
    }
    .img10{
        margin-left: 0!important;
    }
}