.repairPageList{ padding: 20px; margin-top: 50px; background: #F6F6F6; h3{ padding: 0 0 10px 0; margin: 0 0 10px 0; font-size: 20px; border-bottom: 1px solid #999; } ul{ margin-bottom: 20px; list-style: none; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; &:last-child{ margin-bottom: 0; } li{ display: inline-block; &:after{ content: "/"; padding: 0 10px; display: inline-block; } &:last-child{ padding-bottom: 0; margin-bottom: 0; &:after{ content: none; } } } } } #repairParts{ padding: 100px 0 0 0; -ms-display: flex; display: flex; .inNav{ padding: 0; width: 250px; margin-right: 50px; position: relative; ul{ padding: 30px 20px; margin-bottom: 0; position: sticky; top: 0; border: 1px solid #CCC; border-radius: 10px; li{ padding-bottom: 0; margin-bottom: 10px; border-bottom: none; &:last-child{ margin-bottom: 0; } a{ position: relative; color: #000; font-size: 14px; display: inline-block; &:after{ content: ""; width: 0; height: 2px; display: block; background: #000; position: absolute; left: 0; bottom: -5px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } &:hover{ &:after{ width: 100%; } } } } } } .contentsWrapper{ -ms-flex: 1; flex: 1; h2 { line-height: 1.6; } } @media screen and (max-width: 1199px) { padding: 50px 0 0 0; display: block; .inNav{ width: 100%; margin: 0 0 100px 0; ul{ position: inherit; top: inherit; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; li{ margin: 0 20px 10px 0; } } } } /* 余白 ----------------------------------------------- */ .pb0{padding-bottom:0;} .pb5{padding-bottom:5px;} .pb10{padding-bottom:10px;} .pb15{padding-bottom:15px;} .pb20{padding-bottom:20px;} .pb25{padding-bottom:25px;} .pb30{padding-bottom:30px;} .pb35{padding-bottom:35px;} .pb40{padding-bottom:40px;} .pb45{padding-bottom:54px;} .pb50{padding-bottom:50px;} .pb100{padding-bottom:100px;} .pt0{padding-top:0;} .pt5{padding-top:5px;} .pt10{padding-top:10px;} .pt15{padding-top:15px;} .pt20{padding-top:20px;} .pt25{padding-top:25px;} .pt30{padding-top:30px;} .pt35{padding-top:35px;} .pt40{padding-top:40px;} .pt45{padding-top:54px;} .pt50{padding-top:50px;} .pt100{padding-top:100px;} .mb0{margin-bottom:0;} .mb5{margin-bottom:5px;} .mb10{margin-bottom:10px;} .mb15{margin-bottom:15px;} .mb20{margin-bottom:20px;} .mb25{margin-bottom:25px;} .mb30{margin-bottom:30px;} .mb35{margin-bottom:35px;} .mb40{margin-bottom:40px;} .mb45{margin-bottom:54px;} .mb50{margin-bottom:50px;} .mb100{margin-bottom:100px;} .mt0{margin-top:0;} .mt5{margin-top:5px;} .mt10{margin-top:10px;} .mt15{margin-top:15px;} .mt20{margin-top:20px;} .mt25{margin-top:25px;} .mt30{margin-top:30px;} .mt35{margin-top:35px;} .mt40{margin-top:40px;} .mt45{margin-top:54px;} .mt50{margin-top:50px;} .mt100{margin-top:100px;} h3{ margin: 0 0 40px 0; font-weight: 700; } h4{ margin: 0 0 20px 0; font-size: 20px; font-weight: 700; } .tableTtl{ margin: 0 0 30px 0; font-size: 20px; text-align: center; } p{ margin-bottom: 50px; } table, tr, th, td{ border-collapse: collapse; border: 1px solid #CCC; padding: 10px; } table.type_01{ margin-bottom: 50px; thead{ background: #333; color: #FFF; th{ text-align: center; } } tbody{ font-size: 14px; tr:nth-child(even) td{ background: #F6F6F6; } } } ul{ margin-bottom: 100px; list-style: none; li{ padding-left: 20px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dotted #CCC; position: relative; &:before{ content: "●"; position: absolute; left: 0; top: 0; } >ul{ margin-bottom: 0; >li:last-child{ margin-bottom: 0; padding-bottom: 0; } } } &.noStyle{ li{ padding-left: 0; border-bottom: none; &:before{ content: none; } } } &.numList{ list-style: decimal; padding-left: 20px; li{ padding-left: 0; border-bottom: none; &:before{ content: none; } } } } img{ max-width: 100%; } .img-responsive{ display: inline-block; } .max-{ &500{ max-width: 500px; } } @media screen and (max-width: 768px) { img{ width: 100%; } } .imgLR{ display: -ms-flex; display: flex; -ms-justify-content: space-between; justify-content: space-between; &.img-left{ -ms-justify-content: flex-start; justify-content: flex-start; } } .boxLRFlex{ display: -ms-flex; display: flex; &.ac{ -ms-align-items: center; align-items: center; } &.fww{ -ms-flex-wrap: wrap; flex-wrap: wrap; } .f1{ -ms-flex: 1; flex: 1; } .asc{ -ms-align-self: center; align-self: center; } } .repair_contents_01, .repair_contents_02, .repair_contents_03, .repair_contents_04, .repair_contents_05, .repair_contents_06, .repair_contents_07, .repair_contents_08, .repair_contents_09, .repair_contents_10, .repair_contents_11, .repair_contents_13, .repair_contents_14, .repair_contents_15, .repair_contents_17, .repair_contents_18, .repair_contents_19, .repair_contents_20{ margin-bottom: 100px; padding-bottom: 100px; border-bottom: 2px solid #999; } .repair_contents_01{ ul{ margin-bottom: 50px; } .box_01{ padding: 40px; background: #F6F6F6; h3{ text-align: center; } .numList{ margin-bottom: 0; padding-bottom: 0; li:last-child{ padding-bottom: 0; margin-bottom: 0; } } .imgBox{ padding: 20px 0; text-align: center; background: #FFF; border-radius: 10px; } } @media screen and (max-width: 768px) { .box_01{ padding: 40px 5%; } } } .repair_contents_02{ p{ margin-bottom: 30px; } .box_01{ padding: 40px; background: #F6F6F6; h3{ text-align: center; } .numList{ margin-bottom: 0; padding-bottom: 0; } .imgBox{ padding: 20px 0; text-align: center; background: #FFF; border-radius: 10px; } } @media screen and (max-width: 768px) { .box_01{ padding: 40px 5%; } } } .repair_contents_03{ p{ margin-bottom: 30px; } @media screen and (max-width: 768px) { p{ &:after{ content: "画像をクリックで別ウィンドウ表示します。"; padding: 10px 0 0 0; display: block; } } } } .repair_contents_04{ .tableWrapper{ table{ table-layout: fixed; thead{ tr{ th{ position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background: #333; } } tr{ th:nth-child(1){ width: 130px; } th:nth-child(5){ width: 250px; } } .sTxt{ font-size: 12px; } } tbody{ tr{ td:nth-child(1), td:nth-child(2), td:nth-child(3){ text-align: center; } } } } &:last-child{ table{ margin-bottom: 0; } } } } .repair_contents_05{ p{ margin-bottom: 30px; } >.numList{ margin-bottom: 0; } .box_01{ padding: 40px; margin-bottom: 40px; background: #F6F6F6; &:last-child{ margin-bottom: 0; ul{ margin-bottom: 0; } p{ margin-bottom: 0; } } h3{ text-align: center; } .numList{ margin-bottom: 0; padding-bottom: 0; } .imgLR{ padding: 20px 0; background: #FFF; border-radius: 10px; -ms-justify-content: center; justify-content: center; } } @media screen and (max-width: 768px) { .box_01{ padding: 40px 5%; .imgLR{ padding: 20px 5%; img.max-500{ max-width: 200px; } } } } } .repair_contents_06{ .tableWrapper{ table{ table-layout: fixed; margin-bottom: 0; thead{ tr{ th{ position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background: #333; } } } tbody{ tr{ td:last-child{ text-align: center; } } } } } @media screen and (max-width: 768px) { .boxLRFlex{ .imgBox{ text-align: center; img{ max-width: 200px; } } } } } .repair_contents_07{ .tableWrapper{ table{ table-layout: fixed; thead{ tr{ th{ position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background: #333; } } } tbody{ tr{ td:last-child{ text-align: center; } } } } } .box_01{ padding: 40px; background: #F6F6F6; .noStyle{ margin-bottom: 0; li{ margin-bottom: 30px; &:last-child{ padding-bottom: 0; margin-bottom: 0; } } } .imgBox{ padding: 20px 0; border-radius: 10px; text-align: center; background: #FFF; } } @media screen and (max-width: 768px) { .box_01{ padding: 40px 5%; } } } .repair_contents_08{ .box_01{ padding: 40px; background: #F6F6F6; .imgBox{ width: 400px; margin-right: 20px; border-radius: 10px; img{ border-radius: 10px; } } .numList{ margin-bottom: 0; list-style: none; padding: 0; li{ padding-left: 1.2em; position: relative; &:before{ position: absolute; left: 0; top: 0; color: #aa2f36; } &:nth-child(1):before{ content: "①"; } &:nth-child(2):before{ content: "②"; } &:nth-child(3):before{ content: "③"; } &:nth-child(4):before{ content: "④"; } } } } @media screen and (max-width: 768px) { .box_01{ padding: 40px 5%; .boxLRFlex{ display: block; } .imgBox{ width: 100%; text-align: center; margin-bottom: 20px; img{ max-width: 400px; } } .numList{ margin-bottom: 0; list-style: none; padding: 0; li{ padding-left: 1.2em; padding-bottom: 0; margin-bottom: 10px; &:last-child{ margin-bottom: 0; } } } } } } .repair_contents_09{ ul{ margin-bottom: 0; li:last-child{ margin-bottom: 0; } } } .repair_contents_10{ .box_01{ padding: 40px; background: #F6F6F6; .imgBox{ padding: 20px; margin-right: 20px; border-radius: 10px; background: #FFF; } } @media screen and (max-width: 768px) { .box_01{ padding: 40px 5%; } } } .repair_contents_11{ .box_01{ padding: 40px; background: #F6F6F6; .imgBox{ margin-bottom: 20px; border-radius: 10px; img{ border-radius: 10px; } } p{ margin-bottom: 0; } } @media screen and (max-width: 768px) { .box_01{ padding: 40px 5%; text-align: center; } } } .repair_contents_12{ ul{ margin-bottom: 30px; } .imgBox{ text-align: center; } } .repair_contents_13{ .box_moter_01, .box_moter_02, .box_moter_03, .box_moter_04{ padding-bottom: 50px; margin-bottom: 50px; border-bottom: 1px solid #CCC; } .box_moter_01{ p{ margin-bottom: 0; } } .box_moter_02{ dl{ margin-bottom: 0; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; dt{ width: 100%; margin-bottom: 10px; } dd{ width: 50%; margin-bottom: 5px; padding-left: 1em; position: relative; &:last-child{ margin-bottom: 0; } &:before{ content: "・"; position: absolute; left: 0; top: 0; } } } } .box_moter_03{ ul{ margin-bottom: 20px; } } .box_moter_04{ .box_01{ padding: 40px; background: #F6F6F6; dl{ dt{ margin-bottom: 5px; } dd{ margin-bottom: 20px; &:last-child{ margin-bottom: 0; } } } .imgBox{ padding: 20px 0; border-radius: 10px; background: #FFF; text-align: center; img{ border-radius: 10px; } } } } .box_moter_05{ ul{ margin-bottom: 20px; } .box_01{ padding: 40px; background: #F6F6F6; dl{ margin-bottom: 0; dt{ margin-bottom: 5px; } dd{ margin-bottom: 20px; &:last-child{ margin-bottom: 0; } } } .imgBox{ padding: 20px 0; margin-top: 10px; border-radius: 10px; background: #FFF; text-align: center; img{ border-radius: 10px; } } } } @media screen and (max-width: 768px) { .box_moter_03{ .imgBox{ text-align: center; img{ max-width: 550px; } } } .box_moter_04{ .box_01{ padding: 40px 5%; dl{ dt{ span{ display: inline-block; } } } .imgBox{ padding: 20px 5%; img{ max-width: 400px; } } } } .box_moter_05{ .box_01{ padding: 40px 5%; .imgBox{ padding: 20px 5%; img{ border-radius: 5px; max-width: 500px; } } } } } } .repair_contents_14{ ul{ margin-bottom: 30px; display: -ms-flex; display: flex; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; li{ width: 49%; margin: 0 2% 2% 0; padding: 0; border: 1px solid #CCC; border-radius: 10px; position: relative; &:nth-child(2n){ margin-right: 0; } &:before{ position: absolute; left: 20px; top: 20px; font-size: 30px; } &:nth-child(1){ &:before{ content: "①"; } } &:nth-child(2){ &:before{ content: "②"; } } &:nth-child(3){ &:before{ content: "③"; } } &:nth-child(4){ &:before{ content: "④"; } } .imgBox{ padding: 20px 0; text-align: center; } .txtBox{ p{ padding: 0 20px 20px 20px; margin-bottom: 0; } } } &.vsList{ margin-bottom: 0; li{ margin-bottom: 0; } } } @media screen and (max-width: 768px) { ul{ display: block; li{ width: 100%; margin: 0 0 2% 0; &:before{ position: absolute; left: 10px; top: 10px; font-size: 30px; } .imgBox{ padding: 20px 5%; img{ max-width: 300px; } } } } } } .repair_contents_15{ ul{ margin-bottom: 20px; } .box_01{ padding: 40px; margin-bottom: 30px; background: #F6F6F6; &:last-child{ margin-bottom: 0; } h3{ text-align: center; } .imgBox{ padding: 20px 0; margin-bottom: 20px; border-radius: 10px; background: #FFF; text-align: center; img{ border-radius: 10px; } } dl{ display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0; dt{ width: 100%; margin-bottom: 10px; } dd{ width: 50%; padding: 0 0 5px 1em; position: relative; &:before{ position: absolute; left: 0; top: 0; } &:nth-child(2):before{ content: "①"; } &:nth-child(3):before{ content: "②"; } &:nth-child(4):before{ content: "③"; } &:nth-child(5):before{ content: "④"; } &:nth-child(6):before{ content: "⑤"; } &:nth-child(7):before{ content: "⑥"; } &:nth-child(8):before{ content: "⑦"; } &:nth-child(9):before{ content: "⑧"; } &:nth-child(10):before{ content: "⑨"; } &:nth-child(11):before{ content: "⑩"; } &:nth-child(12):before{ content: "⑪"; } &:nth-child(13):before{ content: "⑫"; } &:nth-child(14):before{ content: "⑬"; } &:nth-child(15):before{ content: "⑭"; } &:nth-child(16):before{ content: "⑮"; } &:nth-child(17):before{ content: "⑯"; } &:nth-child(18):before{ content: "⑰"; } &:nth-child(19):before{ content: "⑱"; } &:nth-child(20):before{ content: "⑲"; } &:nth-child(21):before{ content: "⑳"; } } } } @media screen and (max-width: 768px) { ul{ margin-bottom: 20px; } .box_01{ padding: 40px 5%; .imgBox{ &:after{ content: "画像をクリックで別ウィンドウ表示します。"; display: block; padding: 10px 0 0 0; } } dl{ display: block; margin-bottom: 0; dd{ width: 100%; padding: 0 0 5px 1.2em; } } } } } .repair_contents_16{ .tableTtl{ span{ font-size: 14px; } } table.type_01{ margin-bottom: 20px; table-layout: fixed; thead{ tr{ th{ position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background: #333; } } tr{ th:nth-child(1){ width: 3em; } th:nth-child(3){ width: 9em; } th:nth-child(5){ width: 10em; } } } tbody{ tr{ td:nth-child(1), td:nth-child(3){ text-align: center; } td:nth-child(5){ text-align: right; } } } } p{ margin-bottom: 20px; } .imgBox{ text-align: center; margin-bottom: 100px; img{ max-width: 400px; } } @media screen and (max-width: 768px) { .tableTtl{ span{ display: inline-block; line-height: 1.5; } } .tableWrapper{ table.type_01{ margin-bottom: 20px; } } } } .repair_contents_17{ .box_01{ padding: 40px; background: #F6F6F6; .imgBox{ padding: 20px; margin-bottom: 20px; background: #FFF; border-radius: 10px; } .numList{ padding-left: 0; margin-bottom: 20px; list-style: none; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; box-shadow: 0 0 10px rgba(0,0,0,0.05); border-radius: 10px; >li{ width: 50%; padding: 30px 30px 30px 50px; margin: 0; position: relative; background: rgba(255,255,255,0.9); @media screen and (min-width: 769px) { &:nth-child(2), &:nth-child(3), &:nth-child(6), &:nth-child(7), &:nth-child(10), &:nth-child(11){ background: rgba(255,255,255,0.5); } &:nth-child(1){ border-radius: 10px 0 0 0; } &:nth-child(2){ border-radius: 0 10px 0 0; } &:nth-last-child(1){ border-radius: 0 0 10px 0; } &:nth-last-child(2){ border-radius: 0 0 0 10px; } } &:before{ position: absolute; left: 10px; top: 10px; color: #aa2f36; font-size: 20px; } &:nth-child(1):before{ content: "①"; } &:nth-child(2):before{ content: "②"; } &:nth-child(3):before{ content: "③"; } &:nth-child(4):before{ content: "④"; } &:nth-child(5):before{ content: "⑤"; } &:nth-child(6):before{ content: "⑥"; } &:nth-child(7):before{ content: "⑦"; } &:nth-child(8):before{ content: "⑧"; } &:nth-child(9):before{ content: "⑨"; } &:nth-child(10):before{ content: "⑩"; } &:nth-child(11):before{ content: "⑪"; } &:nth-child(12):before{ content: "⑫"; } >ul{ li{ padding-bottom: 0; margin-bottom: 5px; &:last-child{ margin-bottom: 0; } } } } } p{ margin-bottom: 0; } } @media screen and (max-width: 768px) { .box_01{ padding: 40px 5%; .imgBox{ padding: 20px 5%; text-align: center; &:after{ content: "画像をクリックで別ウィンドウ表示します。"; display: block; padding: 10px 0 0 0; } img{ max-width: 500px; } } .numList{ padding-left: 0; margin-bottom: 20px; list-style: none; display: block; >li{ width: 100%; padding: 30px 5% 30px 40px; background: rgba(255,255,255,0.9); &:nth-child(even){ background: rgba(255,255,255,0.5); } &:nth-child(1){ border-radius: 10px 10px 0 0; } &:nth-last-child(1){ border-radius: 0 0 10px 10px; } } } } } } .repair_contents_18{ p{ margin-bottom: 0; } } .repair_contents_19{ } .repair_contents_20{ p{ margin-bottom: 0; } } .repair_contents_21{ p{ margin-bottom: 0; } } .repair_contents_22{ .good{ color: #1A2CD6; font-weight: 700; } .bad{ color: #aa2f36; } table{ table-layout: fixed; thead{ tr{ th{ position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background: #333; } } } tbody{ tr{ td:nth-last-child(1), td:nth-last-child(2), td:nth-last-child(3), td:nth-last-child(4), td:nth-last-child(5){ text-align: center; } } } } } .repair_contents_23{ table{ table-layout: fixed; thead{ tr{ th{ position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background: #333; } } } } @media screen and (max-width: 768px) { .tableWrapper{ &:before{ content: none; } table.type_01{ width: 100%; } } } } @media screen and (max-width: 768px) { .tableWrapper{ width: 100%; overflow-x: scroll; &:before{ content: "← SCROLL →"; display: block; text-align: center; } table.type_01{ width: 700px; margin-bottom: 50px; thead{ background: #333; color: #FFF; th{ text-align: center; } } tbody{ font-size: 14px; tr:nth-child(even) td{ background: #F6F6F6; } } } } } } .repair_content{ .pager{ margin-top: 100px; .active{ span{ font-weight: 700; color: #000; } } } } .repairDetail{ #page-top{ bottom: 70px; } footer{ padding-bottom: 60px; } }