@charset "euc-jp";
@import url("column.css");

/** サイドバー ============================================================================================**/
aside > div { margin: 0 0 25px;}
aside strong { display: block;}

/* ショッピングサイトのご案内 */
aside .shopinfo strong { margin: 0 0 10px; font-size: 12px;}

aside .shopinfo p:nth-of-type(1) { 
    padding: 5px; 
    border-radius: 5px 5px 0 0; background: #6699ff;
    color: #fff; font-size: 15px; font-weight: bold;}
aside .shopinfo p:nth-of-type(2) {
    padding: 5px; 
    border: solid 1px #6699ff; border-radius: 0 0 5px 5px;
    font-size: 12px;}
    
@media screen and (max-width:999px){
    aside .shopinfo,
    aside .links { display: none;}
}

/* 目次 */
aside .index p { margin: 0 0 5px 1em; text-indent: -1em;

}
/**============================================================================================ サイドバー **/

/** メインコンテンツ ============================================================================================**/

main { font-size: 16px; line-height: 1.6em;}
article section { margin: 0 0 40px;}

main h3 {
    margin: 0 0 15px; padding: 5px 7px 3px 7px;
    background: #c6e5f9;
    color: #004885; font-size: 16px; font-weight: 600; line-height: 1.8em;}

main h4  {
    margin: 0 0 10px; padding: 0 0 3px 5px;
    border-bottom: double 3px #408fc7;
    color: #00487B; font-size: 16px; font-weight: 600; line-height: 1.8em;}

main h5 {
    margin: 0 0 10px;
    border-bottom: dotted 1px #e66700;
    color: #e66700; font-size: 16px; font-weight: 600; line-height: 1.8em;}

/* flex */
main .flex {
    display: -webkit-flex;
    display: flex;}

/* グラデーションリンク */
main a.dis-ilblk {
    position: relative; 
    box-sizing: border-box; width: 100%; max-width: 380px; padding: 12px 40px 12px 15px;
    border: solid 2px #d93766; border-radius: 8px;
    background: linear-gradient(#fd92ae, #ff0049);
    color: #fff; font-size: 16px; font-weight: bold; text-align: center; line-height: 1.0em;
    text-decoration: none;}

main a.dis-ilblk:hover { opacity: 0.7;}

main a.dis-ilblk::before,
main a.dis-ilblk::after {
    content: '';
    display: block; position: absolute;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;}
    
main a.dis-ilblk::before {
    top: 16px; right: 19px;
    width: 5px; height: 5px;
    border: solid #fff; border-width: 3px 3px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}

main a.dis-ilblk::after {
    top: 10px; right: 12px;
    width: 16px; height: 16px;
    border: solid 2px #fff; border-radius: 50%;}

/**========================================**/
/* トーイングチューブの修理方法 */
#tube-mainte {
    padding: 10px 15px;
    border: solid 3px #6091d3; border-radius: 10px;}

/**========================================**/
/* 準備するもの */
#tube-mainte1 .dis-tbl_tab { width: 100%;}
#tube-mainte1 .dis-tbl_tab > * { display: table-cell; vertical-align: top;}
#tube-mainte1 .dis-tbl_tab > p { padding: 0 20px 0 0;}

#tube-mainte1 li { margin: 0 0 15px;}

@media screen and (max-width:699px){
    #tube-mainte1 .dis-tbl_tab,
    #tube-mainte1 .dis-tbl_tab > * { display: block;}
    
    #tube-mainte1 .dis-tbl_tab > p { max-width: 373px; margin: 0 auto 10px;}
}

/**========================================**/
/* 作業手順・作業完了・関連おすすめ商品 */
#tube-mainte2 .flex p,
#tube-mainte3 .flex p { box-sizing: border-box; width: 50%; padding: 0 10px;}

#tube-mainte2 .p_10,
#tube-mainte3 .p_10,
#tube-mainte5 .p_10 {
    margin: 20px 0;
    border: solid 1px #FFCC00;
    background: #FCF5D7;}

#tube-mainte5 .dis-tbl_tab { width: 100%;}
#tube-mainte5 .dis-tbl_tab p { display: table-cell; vertical-align: top;}
#tube-mainte5 .dis-tbl_tab p:nth-of-type(1) { width: 300px; padding: 0 20px 0 0;}
#tube-mainte5 strong { display: block; margin: 0 0 15px;}

@media screen and (max-width:599px){
    #tube-mainte5 .dis-tbl_tab,
    #tube-mainte5 .dis-tbl_tab p { display: block;}
    #tube-mainte5 .dis-tbl_tab p:nth-of-type(1) { width: auto; max-width: 300px; margin: 0 auto 10px; padding:0;}

    #tube-mainte5 .dis-tbl_tab a { display: block; max-width: 270px; margin: 0 auto;}
}

@media screen and (max-width:399px){
    #tube-mainte2 .flex,
    #tube-mainte3 .flex {
        -webkit-flex-direction: column;
        flex-direction: column;}

    #tube-mainte2 .flex p,
    #tube-mainte3 .flex p { width: 100%;}
}


/**========================================**/
/* 注意点 */
#tube-mainte4 li {position: relative; margin: 0 0 15px; padding: 0 0 0 20px;}
#tube-mainte4 li::before {content:'※'; position: absolute; top: 0; left: 0;}

/**============================================================================================ メインコンテンツ **/
/* LastUp2024.12.02_shinkai */