.h2box { width:100%; justify-content: flex-start; -webkit-justify-content:flex-start; /* Safari */ align-items: center; -webkit-align-items: center; margin:30px 0px 20px; } .h2box_a { min-width:70px; padding:40px 5px; background-color:#585991; color:#fff; font-size: 16px; font-size: 1.6rem; text-align:center; } .h2box_b, .h2box_b2 { padding:0 0 0 30px; } .irobox2 { background-color:#589169; } .irobox3 { background-color:#d78787; } .irobox4 { background-color:#be9bc5; } h2 { font-size: 35px; font-size: 3.5rem; padding:0px 0px 0px; font-weight:500; } .home_box { margin:20px 0px 50px; } .home_box1 { float:left; width:60%; margin:0px 0px 15px; } .home_box2 { float:right; width:35%; } .home_box3 { width:35%; float:right; } .home_box3 p { font-size: 14px; font-size: 1.4rem; } .partstitle { display:block; font-size: 14px; font-size: 1.4rem; font-weight:700; text-align:center; padding-bottom:5px; } .houseflex { -webkit-flex-wrap:wrap; flex-wrap: wrap; } .house0 { width: calc(50% - 20px); float:left; display:block; margin:0px 20px 0px 0px; padding-bottom:25px; } .imgboxfloat1 { float:right; width:30%; margin:0px 0px 10px 20px; } .imgboxfloat2 { float:left; width:30%; margin:0px 20px 20px 0px; } .house2 { padding:26px; border:1px solid #ccc; margin-bottom:30px; } .house2 p { font-size: 14px; font-size: 1.4rem; line-height:1.6; } .housecolorbox { background-color:#f2f7e8; } .housecolor { align-self: center; } .h3house { font-size: 16px; font-size: 1.6rem; color:#91bc2a; padding:0px 0px 5px; } .house_h3 { border-bottom:1px dashed #ccc; margin:45px auto 25px; text-align:center; } .box3 p.sekolink { width:100%; text-align:right; border-bottom:1px solid #ccc; padding:0px 0px 10px; margin-bottom:30px; } .box3 p.sekolink a { font-size: 12px; font-size: 1.2rem; } .js3cate p{ height: auto; max-height: 200px; margin-bottom:20px; text-align:center; } .js3cate p img{ display:block; width: 100%; height: 100%; object-fit: cover; object-position:center; } .js3cate p:last-of-type{ display:none; } .js3catelink { margin-top:20px; width:100%; text-align:center; } .js3catelink a span { display:inline-block; } .arrow2 { display:inline-block; padding:5px 25px; margin:5px 0px 0px; border:1px solid #a2c5ff; border-radius:8px; text-decoration:none; color:#4285f4; } .arrow2:hover { color:#a2c5ff; text-decoration:none; } .arrow2:hover:after { border-color: #a2c5ff #a2c5ff transparent transparent; } .arrow2:after{ content:""; display:inline-block; margin-left:5px; width: 12px; height: 12px; border: 2px solid; border-color: #4285f4 #4285f4 transparent transparent; transform: rotate(45deg); } @media only screen and (max-width: 1200px) { .partstitle { text-align:left; } .home_box3 { float:left; width:100%; text-align:left; } } @media only screen and (max-width: 800px) { .h2box_a { padding:40px 5px; font-size: 14px; font-size: 1.4rem; } h2 { font-size: 26px; font-size: 2.6rem; padding:0px 0px 0px; } .home_box1 { float:none; width:100%; } .home_box2 { float:none; width:100%; } .home_box3 { float:none; width:100%; } .h3house { font-size: 14px; font-size: 1.4rem; } } @media only screen and (max-width: 550px) { .h2box_a { font-size: 11px; font-size: 1.1rem; } .h2box_b, .h2box_b2 { padding:0 0 0 15px; } .partstitle { font-size: 12px; font-size: 1.2rem; text-align:center; } .home_box { margin:20px 0px 15px; } . .house2 { padding:16px; } .h3house { font-size: 14px; font-size: 1.4rem; text-align:center; margin-top:50px; } .house0 { width: 100%; float:none; margin:0px 0px 0px 0px; background:none; text-align:center; line-height:1.8em; } .imgboxfloat1 { width: 50%; } .imgboxfloat2 { width:50%; } h2 { font-size: 20px; font-size: 2.0rem; } .box3 p.sekolink { margin:auto 0px; height:100%; width:48%; text-align:center; border-bottom:none; } .box3 p.sekolink:before { content:"> "; } .js3cate p{ max-height: 140px; } .js3cate p:last-of-type{ display:block; } } @media only screen and (max-width: 360px) { .h2box { display:block; } .h2box_a { width:auto; padding:2px 5px; margin-bottom:10px; text-align:left; font-size: 14px; font-size: 1.4rem; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; } .h2box_a::before{ content:'01 '; } .irobox2::before{ content:'02 '; } .irobox3::before{ content:'03 '; } .irobox4::before{ content:'04 '; } .h2box_b { padding:0; } .h2box_b2 { padding:0; } h2 { font-size: 22px; font-size: 2.2rem; } }