@charset "utf-8"; .mod-imgset { display: flex; flex-wrap: wrap; justify-content: center; margin-left: -20px; margin-bottom: -20px; } .mod-imgset > figure { margin-left: 20px; margin-bottom: 20px; } .mod-imgset > figure > figcaption { margin-top:10px; font-size: 12px; font-size: 1.2rem; } .ml1em { margin-left: 1em; } .mt10 { margin-top: 10px; } .lead dl dd.lead_imgset { display: flex; flex-wrap: wrap; justify-content: center; margin-left: -20px; } .lead dl dd.lead_imgset figure { margin-top: 10px; margin-left: 20px; background-color: #fff; } .lead dl dd.lead_imgset figcaption { padding: 10px 5px; color: #000; font-size: 11px; font-size: 1.1rem; text-align: center; } #sec03 .sec03_txt01 p p { margin-top: 1.5em; } /* ================================================== pc, ipad ================================================== */ @media screen and (min-width:835px) { /* -------------------------------------------------- #sec01 -------------------------------------------------- */ #sec01 { text-align: center; width: 100%; height: 550px; background: url(/uploads/image/acci/06/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; } .lead > p { width: 860px; margin: 0 auto; } .lead dl { width: 860px; margin: 20px auto 0; border: 1px solid #ffffff; padding: 15px 40px; } .lead dl dd { margin-top: 3px; } /* -------------------------------------------------- #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; margin: 0 auto; } #sec02 ol .ex ul li div > p:first-child { text-align: left; text-indent: -16px; margin-left: 16px; } #sec02 ol .ex ul li div p:last-child { margin: 10px 0 0 16px; } #sec02 ol .ex ul li > p:last-child { float: right; } #sec02 ol .ex:nth-child(3) ul li > p:last-child { margin-right: 20px; } #sec02 ol .ex:nth-child(4) ul li > p:last-child { margin-right: 80px; } #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; } /* -------------------------------------------------- .lead -------------------------------------------------- */ .lead dl { width: auto; } /* -------------------------------------------------- #sec02 -------------------------------------------------- */ #sec02 ol .ex .ex_inner { padding-right: 40px; padding-left: 40px; } #sec02 ol .ex ul { width: auto; } #sec02 ol .ex:nth-child(3) ul li div { width: 70%; } #sec02 ol .ex:nth-child(4) ul li div { width: 50%; } #sec02 ol .ex:nth-child(5) ul li div { width: 58%; } #sec02 ol .ex:nth-child(3) ul li > p:last-child { width: 23%; } #sec02 ol .ex:nth-child(4) ul li > p:last-child { width: 37%; } #sec02 ol .ex:nth-child(5) ul li > p:last-child { width: 39%; } #sec02 ol .ex:nth-child(5) ul li p:last-child img { width: 100%; } /* -------------------------------------------------- #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/06/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; } .lead dl { margin-top: 2%; border: 1px solid #ffffff; padding: 2% 3%; } .lead dl dt { text-align:center; } /* -------------------------------------------------- #sec02 -------------------------------------------------- */ #sec02 { margin-top: 9%; } #sec02 h3 { text-align: center; margin: 0 5.3%; } #sec02 ol { margin-top: 4%; } #sec02 ol > li { margin: 4% 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: 4% 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 { margin: 0 5.3%; } #sec02 ol .ex ul li > div p:first-child { text-align: left; text-indent: -14px; margin-left: 14px; } #sec02 ol .ex ul li p:last-child { margin: 3% 0 0 14px; } /* -------------------------------------------------- #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; } }