@charset "utf-8"; /* ================================================== pc, ipad ================================================== */ @media screen and (min-width:835px) { /* -------------------------------------------------- #sec01 -------------------------------------------------- */ #sec01 { text-align: center; width: 100%; height: 550px; background: url(/uploads/image/acci/01/sec01_img01.jpg) no-repeat; display: table; background-size: cover; } #sec01 .sec01_inner { vertical-align: middle; padding: 0 40px; margin: 0 auto; display: table-cell; } #sec01 .title { color: #ffffff; text-shadow: 1px 1px 6px #000000; } /* -------------------------------------------------- .lead -------------------------------------------------- */ .lead { text-align: center; color: #ffffff; padding: 30px 40px; background: #41bdce; } /* -------------------------------------------------- #sec02 -------------------------------------------------- */ #sec02 { margin: 80px auto 0; } #sec02 h3 { text-align: center; } #sec02 ol { margin-top: 25px; } #sec02 ol > li { margin-top: 25px; } #sec02 ol > li:first-child { margin-top: 0; } #sec02 ol li h4 { color: #218f74; margin-top: 25px; text-align: center; } #sec02 ol li:first-child h4 { margin-top: 0; } #sec02 ol li .img { text-align: center; margin-top: 20px; } #sec02 ol li .arrow { text-align: center; } #sec02 ol .ex .ex_inner { padding: 30px 0 50px; background: #e9f5f2; margin-top: 20px; } #sec02 ol .ex ul { width: 956px; background: url(/uploads/image/acb/img/common_bg_line01.png) center repeat-y; margin: 0 auto; } #sec02 ol .ex ul li:first-child { width: 440px; float: left; } #sec02 ol .ex ul li:last-child { width: 440px; float: right; } #sec02 ol .ex ul li > p:first-child { text-indent: -16px; margin-left: 16px; } #sec02 ol .ex ul li div { margin-top: 10px; } #sec02 ol .ex ul li div p:first-child { width: 215px; margin-left: 16px; float: left; } #sec02 ol .ex ul li div p:last-child { float: right; } #sec02 ol .ex ul li:last-child p:nth-child(2) { margin: 30px 0 0 16px; } #sec02 ol .ex ul li:last-child p:last-child { margin: 30px 0 0 16px; } #sec02 .notice { text-align: right; width: 1040px; margin: 15px auto 0; } /* -------------------------------------------------- #sec03 -------------------------------------------------- */ #sec03 { width: 956px; margin: 80px auto 0; } #sec03 h3 { text-align: center; } #sec03 .sec03_inner { margin-top: 30px; } #sec03 .sec03_box { width: 395px; float: left; } #sec03 .sec03_inner dl { margin-top: 15px; } #sec03 .sec03_txt01 { width: 520px; line-height: 1.8; float: right; } } /* ================================================== ipad ================================================== */ @media screen and (min-width: 835px) and (max-width: 1100px) { /* -------------------------------------------------- #sec01 -------------------------------------------------- */ #sec01 { height: 500px; } /* -------------------------------------------------- #sec02 -------------------------------------------------- */ #sec02 ol .ex .ex_inner { padding-right: 40px; padding-left: 40px; } #sec02 ol .ex ul { width: auto; } #sec02 ol .ex ul li:first-child { width: 46%; } #sec02 ol .ex ul li:last-child { width: 46%; } #sec02 ol .ex ul li div p:first-child { width: 49%; } #sec02 ol .ex ul li div p:last-child { width: 45%; } #sec02 ol .ex ul li div p:last-child img { width: 100%; } #sec02 .notice { width: auto; text-align: right; margin: 15px 40px 0; } /* -------------------------------------------------- #sec03 -------------------------------------------------- */ #sec03 { width: auto; margin-right: 40px; margin-left: 40px; } #sec03 .sec03_box { width: 41%; float: left; } #sec03 .sec03_box img { width: 100%; } #sec03 .sec03_txt01 { width: 54%; float: right; } } /* ================================================== sp ================================================== */ @media screen and (max-width:834px) { /* -------------------------------------------------- #sec01 -------------------------------------------------- */ #sec01 { text-align: center; width: 100%; background: url(/uploads/image/acci/01/sec01_img01-sp.jpg) no-repeat; background-size: cover; } #sec01 .sec01_inner { padding: 22% 5.3%; margin: 0 auto; } #sec01 .title { color: #ffffff; text-shadow: 1px 1px 3px #000000; } /* -------------------------------------------------- .lead -------------------------------------------------- */ .lead { color: #ffffff; padding: 3% 5.3%; background: #41bdce; line-height: 1.8; } /* -------------------------------------------------- #sec02 -------------------------------------------------- */ #sec02 { margin-top: 9%; } #sec02 h3 { text-align: center; margin: 0 5.3%; } #sec02 ol { margin-top: 2%; } #sec02 ol > li { margin: 2% 5.3% 0; } #sec02 ol > li:first-child { margin-top: 0; } #sec02 ol > .ex { margin-right: 0; margin-left: 0; } #sec02 ol li h4 { color: #218f74; margin: 2% 14px 0; text-indent: -14px; } #sec02 ol li:first-child h4 { margin-top: 0; } #sec02 ol li .img { margin-top: 3%; text-align: center; } #sec02 ol li .arrow { margin-top: 3%; text-align: center; } #sec02 ol li .arrow img { width: 20%; } #sec02 ol li .title { margin-right: 5.3%; margin-left: 5.3%; } #sec02 ol .ex .ex_inner { padding: 5% 0; background: #e9f5f2; margin-top: 3%; } #sec02 ol .ex ul { padding: 0 5.3%; } #sec02 ol .ex ul li:first-child { width: 46%; float: left; } #sec02 ol .ex ul li:last-child { width: 46%; float: right; } #sec02 ol .ex ul li > p:first-child { text-align: left; text-indent: -14px; margin-left: 14px; } #sec02 ol .ex ul li div { margin-top: 3%; } #sec02 ol .ex ul li div p:first-child { margin-left: 14px; } #sec02 ol .ex ul li div p:last-child { margin-top: 3%; text-align: center; } #sec02 ol .ex ul li div p:last-child img { width: 60%; } #sec02 ol .ex ul li:last-child p:nth-child(2) { margin: 3% 0 0 14px; } #sec02 ol .ex ul li:last-child p:last-child { margin: 3% 0 0 14px; } #sec02 .notice { text-align: right; margin: 2% 5.3% 0; } /* -------------------------------------------------- #sec03 -------------------------------------------------- */ #sec03 { margin: 9% 5.3%; } #sec03 h3 { text-align: center; } #sec03 .sec03_inner { margin-top: 4%; } #sec03 .sec03_box { width: 41%; float: left; } #sec03 .sec03_box img { width: 100%; } #sec03 .sec03_box dl { margin-top: 4%; } #sec03 .sec03_txt01 { width: 54%; line-height: 1.8; float: right; } }