@charset "UTF-8";
@import url(reset.css);
.ovr-hdn {
    overflow: hidden;
}

.layput01 p{
	width: 400px;
	float: left;

}


@media screen and (max-width: 768px) {
    .pc {
        display: none;
    }
}

.sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .sp {
        display: block;
    }
}

html,
body {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    color: #222;
}

img {
    max-width: 100%;
}

.contents {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}

h2 {
    margin: 30px 0;
    height: 23px;
    font-size: 180%;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.col {
    float: left;
}




/*===#air
=================================================*/
.left_text span,p.left span{
    font-size: 18px;
    font-weight: bold;
    color: #005086;
}
#knowledge #main .row .con_case,
#knowledge #main .row .point1,
#knowledge #main .row .point2{
    width: 98%;
    margin: 40px 0 40px 2%;
    overflow:hidden;
}
#knowledge #main .row .left_text{
    width: 70%;
    float: left;
    margin-bottom: 20px;
}
#knowledge #main .row .left_text_a{
    width: 100%;
    float: left;
    margin-bottom: 20px;
}

#knowledge #main .row .con_case img{
    float: right;
}
h4{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
}
#knowledge #main .row .point_case{
    width: 40%;
    float: left;
}
#knowledge #main .row .point_case_a{
    width: 60%;
    float: left;
}
@media screen and (max-width: 768px) {
#knowledge #main .row .point_case_a{
    width: 100%;
}

}

#knowledge #main .row .case_mr{
    margin-right: 2%;
}
#knowledge #main .row .point1 p{
    margin-bottom: 20px;
}
#knowledge #main .row .img_left{
    display: inline;
    margin: 0;
}
#knowledge #main .row .img_right{
    display: inline;
    margin: 0;
    float: right;
}
#knowledge #main .row .point_case img{
    margin: 0;
}
#knowledge #main .row .point_case2{
    width: 100%;
    display: block;
}
#knowledge #main .row .point_case3{
    width: 50%;
    float: left;
}


/*===#decrease
=================================================*/
#knowledge #main #decrease .con_case{
   margin: 40px 0 0 2%;
}

.decrease_left_img{
    float: left;
}
#knowledge #decrease .point1 .point_case {
    width: 48%;
    float: left;
    margin-right: 5%;
}
#knowledge #decrease .point1 .point_case_img {
    width: auto;
}
#knowledge #decrease .point1 .point_case_img .decrease_left_img {
    margin-right: 1%;
}
#knowledge #decrease .point1 .point_case_img .decrease_right_img {
    display: inline;
}


/*===#wear
=================================================*/
#knowledge #main #wear .con_case{
    margin: 40px 0 0 2%;
}

.wear_left_img{
    float: left;
}
#knowledge #wear .point1 .point_case {
    width: 100%;
    float: left;
    margin-right: 5%;
}
#knowledge #main #wear .left_text{
    width: 40%;
    float: left;
    margin-bottom: 20px;
}

/*===#scratch
=================================================*/

#knowledge #main .row .left_text2{
    width: 55%;
    float: left;
    margin-bottom: 20px;
}
#knowledge #main .row .case_mr2{
    margin-right: 2%;
}
#knowledge #scratch .point1 .point_case_img {
    width: auto;
}
#knowledge #scratch .point1 .scratch_left_img {
    display: inline;
    margin-right: 1%;
}
#knowledge #scratch .point1 .scratch_right_img {
    display: inline;
}



/*===#crack
=================================================*/
#knowledge #main .row .attention{
    font-size: 14px;
    line-height: 1.5em;
    list-style-type: none;
}
#knowledge #wheel .point1 .point_case4,
#knowledge #crack .point1 .point_case4{
    width: 100%;
}
/*===#wheel
=================================================*/
#knowledge #wheel .point1 .point_case4 img.img_left{
    width: 60%;
}

/*==============================================================*/


@media screen and (max-width: 768px) {
    .col {
        float: none;
    }
}

.col#main {
    width: 716px;
}

@media screen and (max-width: 768px) {
    .col#main {
        width: 96%;
        margin: 30px auto;
    }
}

.col#sidebar {
    width: 235px;
    margin-left: 45px;
}

@media screen and (max-width: 768px) {
    .col#sidebar {
        width: 96%;
        max-width: 602px;
        margin-left: 0px;
        margin: 0 auto 50px;
    }
}

#main #main_img {
    display: block;
    margin: 0 auto;
}

#main h3 {
    font-size: 130%;
    letter-spacing: 0.2em;
    color: #FFF;
    background-color: #000;
    padding: 15px;
    margin-bottom: 20px;
}

#main .link-btn {
    width: 668px;
    margin: 20px auto;
}

@media screen and (max-width: 768px) {
    #main .link-btn {
        width: 100%;
    }
}

#sidebar .side_title {
    vertical-align: bottom;
}

#sidebar .side_content {
    border: 1px solid #d3d3d3;
    padding: 30px 10px;
}

#sidebar .side_content .row {
    margin-bottom: 30px;
}

#sidebar .side_content .row:nth-child(3) {
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
    #sidebar .side_content .row {
        width: 80%;
        margin: 0 auto 50px;
    }
}

@media screen and (max-width: 550px) {
    #sidebar .side_content .row {
        width: 95%;
    }
}

#sidebar .side_content h3 {
    font-size: 130%;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
    #sidebar .side_content h3 {
        font-size: 140%;
    }
}

#sidebar .side_content ul li {
    list-style: none;
    overflow: hidden;
    margin-bottom: 8px;
}

@media screen and (max-width: 768px) {
    #sidebar .side_content ul li {
        margin-bottom: 16px;
    }
}

#sidebar .side_content ul li img {
    float: left;
    width: 5%;
    margin-right: 5px;
}

#sidebar .side_content ul li img.sp {
    width: 5%;
    max-width: 17px;
}

#sidebar .side_content ul li a {
    float: left;
    width: 92%;
    font-size: 110%;
    color: #222;
    letter-spacing: 0.1em;
    text-decoration: none;
}

#sidebar .side_content ul li a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    #sidebar .side_content ul li a {
        font-size: 120%;
        padding-top: 3px;
    }
}


/*タイヤ基礎知識*/

#knowledge #main .row {
    margin-bottom: 30px;
}

#knowledge #main .row div {
    width: 95%;
    margin: 0 auto;
}

#knowledge #main p {
    font-size: 110%;
    line-height: 1.9;
}

#knowledge #main p.left {
    width: 85%;
    margin-right: 15px;
}

@media screen and (max-width: 768px) {
    #knowledge #main p.left {
        float: none;
        width: 100%;
    }
}

#knowledge #main img {
    display: block;
    margin: 0 auto;
}

#knowledge #main img.left {
    width: 11%;
}

@media screen and (max-width: 768px) {
    #knowledge #main img.left {
        float: none;
        width: auto;
        margin-top: 20px;
    }
}

#attention #main .row {
    margin-bottom: 30px;
}

#attention #main .row .ovr-hdn {
    width: 95%;
    margin: 0 auto;
}

#attention #main p {
    float: left;
    font-size: 110%;
    line-height: 1.9;
}

#attention #main p.att {
    width: 10%;
    margin-right: 8px;
}

@media screen and (max-width: 640px) {
    #attention #main p.att {
        width: 17%;
    }
}

#attention #main p.att img {
    vertical-align: middle;
    margin-right: 3px;
}

#attention #main p.stc {
    width: 80%;
}

#attention #main table {
    width: 100%;
    text-align: center;
    margin: 10px 0;
}

#attention #main table th {
    vertical-align: middle;
    background-color: #eeeeee;
    border: 1px solid #000;
    padding: 5px;
}

#attention #main table td {
    border: 1px solid #000;
    padding: 5px;
}

#guide #main .row {
    margin-bottom: 30px;
}

#guide #main .row .ovr-hdn {
    width: 95%;
    margin: 0 auto;
}

#guide #main #formula img {
    display: block;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #guide #main #size .ovr-hdn {
        margin-bottom: 30px;
    }
}

#guide #main #size .view_img {
    float: left;
    width: 52%;
    margin-right: 15px;
}

@media screen and (max-width: 768px) {
    #guide #main #size .view_img {
        float: none;
        width: 100%;
        margin-right: 0px;
    }
}

#guide #main #size .stc {
    float: left;
    width: 43%;
    font-size: 120%;
    line-height: 2.7;
}

@media screen and (max-width: 768px) {
    #guide #main #size .stc {
        float: none;
        width: 100%;
        font-size: 130%;
        letter-spacing: 0.1em;
        line-height: 2.2;
    }
}

#guide #main #size .stc#row-1 {
    line-height: 1.8;
}

#guide #main table {
    text-align: center;
    margin: 20px 0;
}

#guide #main table th {
    vertical-align: middle;
    background-color: #eeeeee;
    border: 1px solid #000;
    padding: 5px;
}

#guide #main table td {
    border: 1px solid #000;
    padding: 5px;
}

#guide #main #wheel #table-content {
    text-align: center;
}

#guide #main #wheel #table-content table {
    width: 100%;
}

#guide #main #wheel #table-content table.sp {
    width: 250px;
    margin: 20px auto;
}

#guide #main #wheel #table-content table.sp th {
    padding: 5px 10px;
}

#guide #main #wheel #table-content table.sp td {
    padding: 5px 10px;
}

#guide #main #road #table-content {
    width: 100%;
    text-align: center;
}

#guide #main #road table {
    display: inline-table;
    width: 21%;
    margin-right: 23px;
}

@media screen and (max-width: 768px) {
    #guide #main #road table {
        width: 27%;
    }
    h2{
        margin: 30px 10px;
    }
/*===
=================================================*/
    #knowledge #main .row .con_case, #knowledge #main .row .point1, #knowledge #main .row .point2 {
        width: 98%;
        margin: 20px 0 40px 2%;
        overflow: hidden;
    }
    #knowledge #main .row .left_text{
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
    #knowledge #main .row .point_case{
        width: 100%;
        float: none;
    }
    #knowledge #main .row .point_case img{
        margin: 0 auto 20px;
    }
    #knowledge #main .row .img_right{
        display: block;
        margin: 0 auto;
        float: none;
    }
    #knowledge #main .row .img_left {
        display: block;
        margin: 0 auto;
    }

    #knowledge #main #decrease .left_text{
        width: 100%;
        float: left;
        margin-bottom: 20px;
    }
    .left_text span,p.left span{
        font-size: 16px;
        font-weight: bold;
        color: #005086;
    }
    #knowledge #main #wear .left_text{
        width: 100%;
        float: left;
        margin-bottom: 20px;
    }
    #knowledge #main .row .left_text2{
        width: 100%;
        float: left;
        margin-bottom: 20px;
    }
    #knowledge #main .row .con_case img {
        float: none;
    }
    #knowledge #scratch .point1 .point_case_img {
        text-align: center;
        display: block;
    }
    #knowledge #wheel .point1 .point_case4 img.img_left {
        width: 100%;
    }
    #knowledge #decrease .point1 .point_case_img {
        display: block;
        text-align: center;
    }
    #knowledge #decrease .point1 .point_case_img .decrease_left_img {
        display:inline;
    }
    .decrease_left_img {
        float: none;
    }
    #knowledge #main .row .point_case3 {
        width: 100%;
        float: left;
    }
    
/*===
=================================================*/
}


/*# sourceMappingURL=tire_learning.css.map */