/* ===============================================
  修理申込のご案内 repair スマホ対応
=============================================== */

@media screen and (max-width: 768px) {
	.headbox{
		z-index: 1;
	}
    #navi,#category_menu *,
    #toiawase_waku,
    #corp_waku,
    #main-contents,
    #main-contents *{
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
             -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
                box-sizing: border-box;
    }
    #navi,#category_menu,#main-contents{
        width:100%;
        float:none;
    }
    #category_menu ul li a{
        width: auto;
    }
    #toiawase_waku, #corp_waku{
        width: 100%;
        padding: 0 10px;
    }
    #navi{
        margin-top: 40px;
    }
    #category_menu {
        padding: 0;
    }
    #category_menu dt {
        padding:10px 15px;
        font-size: 15px;
    }

    #category_menu ul li a{
        width: auto;
        padding: 10px 15px;
        font-size:15px;
    }

    #category_menu ul li ul {
        font-size:15px;
    }

    #category_menu ul li.here ul li a{
        background-position: 0 50% !important;
        padding: 5px 0 5px 12px;
    }

    #category_menu #submenu a.current,
    #category_menu a.ayumi {
        background-position: 0 50% !important;
    }

    /* ========= メインコンテンツ ========= */
    #main-contents {
        width: 100%;
    }
    #main-contents > *:first-child{
        margin-top: 20px;
    }

    /* ========= 汎用 ========= */
    .pcShow{
        display: none;
    }
    img{
        width: auto;
        max-width: 100%;
        height: auto;
    }

    .sp_block{display: block;}
    .sp_inline-block{display: inline-block;}
    .sp_inline{display: inline;}

    .sp_wmax{width: 100%;}
    .sp_mauto{margin: auto;}

    .sp_tl{text-align: left;}
    .sp_tr{text-align: right;}
    .sp_tc{text-align: center;}
    .sp_fn{float: none;}

	/* ========= コンテンツ ========= */
	p.btn{margin:0 0 12px 0;}
	.btn a{
	    border-radius: 0;
	}
	.btn_box a{
		display: block;
		text-decoration: none;
		position: relative;
	}
	a .faq,
	a .manual,
	a .purchase,
	a .repair,
	a .contact,
	a .information{
		width:100%;
		height:auto;
		border: 4px solid transparent;
		margin: 0 auto 12px;
		float:none;
		display:block;
	}
	a .faq:before,
	a .manual:before,
	a .purchase:before,
	a .repair:before,
	a .contact:before{
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		background: url("../../img/ico_arw_1.gif") no-repeat center center;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	a .faq:after,
	a .manual:after,
	a .purchase:after,
	a .repair:after,
	a .contact:after{
		content: "";
		display: block;
		width: 0;
		height: 0;
		border: 15px solid transparent;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	a .faq{
		background: #e2eefe url("../../img/icon_faq.png") no-repeat right 15px top 10px;
	}
	a .faq:after{
		border-right-color: #88b0eb;
		border-bottom-color: #88b0eb;
	}
	a .manual{
		background: #ecf6d3 url("../../img/icon_manual.png") no-repeat right 15px top 10px;
	}
	a .manual:after{
		border-right-color: #a6d575;
		border-bottom-color: #a6d575;
	}
	a .purchase {
		background: #f7e0e6 url("../../img/icon_purchase.png") no-repeat right 15px top 10px;
	}
	a .purchase:after{
		border-right-color: #ee95ab;
		border-bottom-color: #ee95ab;
	}
	a .repair {
		background: #ebe3d9 url("../../img/icon_repair.png") no-repeat right 15px top 10px;
	}
	a .repair:after{
		border-right-color: #d4b699;
		border-bottom-color: #d4b699;
	}
	a .contact {
		background: #d9f1eb url("../../img/icon_contact.png") no-repeat right 15px top 10px;
	}
	a .contact:after{
		border-right-color: #84d3be;
		border-bottom-color: #84d3be;
	}


	a:hover .faq,
	a:hover .manual,
	a:hover .purchase,
	a:hover .repair,
	a:hover .contact {
		background-image: none;
	}
	a:hover .faq{
		border-color: #e2eefe;
		background-image: none;
		box-shadow: 0 0 0 1px #87afea inset;
	}
	a:hover .manual{
		border-color: #ecf6d3;
		box-shadow: 0 0 0 1px #a4d471 inset;
	}
	a:hover .purchase {
		border-color: #f7e0e6;
		box-shadow: 0 0 0 1px #edb9c7 inset;
	}
	a:hover .repair {
		border-color: #ebe3d9;
		box-shadow: 0 0 0 1px #d9c9b8 inset;
	}
	a:hover .contact {
		border-color: #d9f1eb;
		box-shadow: 0 0 0 1px #a3d6c7 inset;
	}

	/* ========= 修理サービスご案内１ ========= */
	.btn_box{
		width:100%;
		margin:0 auto 12px;
	}
	.btn_box dl {
		width:100%;
		height:auto;
		margin-bottom:12px;
	}
	.iconph{
		padding-top:8px;
		padding-bottom:8px;
		background-position: 2px center;
	}
	.onlineBox{
		border: none;
	}
	.onlineBox h4{
		margin-top:2em;
		font-size: 15px;
	}
	.onlineBox,
	.attentionBox{
		margin: 0 auto 40px;
		padding:0;
	}
	.attentionBox ol{
		list-style:outside decimal;
		padding-left:20px;
	}

	#popup-contents{
		width:100%;
		margin:0 auto;
	}
	#popup-contents:not(.syurikiyaku_contents) *:first-child{
		margin-top: 20px;
	}
	#popup-contents h2{
		width:auto;
		padding-top: 20px;
	}
	#popup-contents table {
		border-collapse:collapse;
		border-spacing:0;
		margin-bottom:1em;
	}
	.w700 {
		width:100%;
	}
    
    /* ========= 修理料金の目安 ========= */
    
    #syuri_fee br.pcOnly{
        display: none;
    }
    
    #syuri_fee .products{
        display: block;
    }
    
    #syuri_fee .products .product-list{
        width: 100%;
    }
    
    #syuri_fee_product .syuri_fee_table{
        width: 100%;
    }
  .kyugyoBox table {
        width:100%;
    }
    
}
@media screen and (max-width: 720px) {
    #popup-contents .flow{
		margin-left: 5px;
        width: 100%;
        text-align: inherit;
    }
    #popup-contents .flow span {
        display: block;
    }
    #popup-contents .flow span:nth-child(1){
        text-align: left;
        margin: 0 20px 0 10px;
    }
    #popup-contents .flow span:nth-child(2){
        text-align: right;
        margin: 0 10px 0 20px;
    }
	#popup-contents .flow span img{
		margin-top: 5px !important;
		margin-left: -5px;
        width: 33%;
        max-width: 121px;
	}
}
@media screen and (max-width: 460px) {
    #popup-contents .flow span:nth-child(1){
        margin: 0 20px 0 0;
    }
    #popup-contents .flow span:nth-child(2){
        margin: 0 0 0 20px;
    }
}