@charset "utf-8"; /* ================================================== pc, ipad ================================================== */ @media screen and (min-width:835px) { /* -------------------------------------------------- #sec01 -------------------------------------------------- */ #sec01 { text-align: center; width: 100%; height: 550px; background: url(/uploads/image/acrimg/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; } /* -------------------------------------------------- #sec02 -------------------------------------------------- */ #sec02 { margin-top: 80px; } #sec02 .sec02_inner { width: 1040px; margin: 0 auto; } #sec02 .sec02_box { width: 510px; float: right; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } #sec02 .sec02_inner .sec02_inner_txt01 { width: 490px; line-height: 1.8; float: left; } } /* ================================================== ipad ================================================== */ @media screen and (min-width: 835px) and (max-width: 1100px) { /* -------------------------------------------------- #sec01 -------------------------------------------------- */ #sec01 { height: 500px; } /* -------------------------------------------------- #sec02 -------------------------------------------------- */ #sec02 .sec02_inner { width: auto; margin: 0 40px; } #sec02 .sec02_box { width: 49%; } #sec02 .sec02_box p:first-child { width: 29%; } #sec02 .sec02_box p:last-child { width: 65%; } #sec02 .sec02_inner .sec02_inner_txt01 { width: 47%; } } /* ================================================== sp ================================================== */ @media screen and (max-width:834px) { /* -------------------------------------------------- #sec01 -------------------------------------------------- */ #sec01 { text-align: center; width: 100%; background: url(/uploads/image/acrimg/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; } /* -------------------------------------------------- #sec02 -------------------------------------------------- */ #sec02 { margin: 9% 5.3%; } #sec02 .sec02_box { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } #sec02 .sec02_box p:first-child { width: 26%; margin-left: 5%; } #sec02 .sec02_box p:first-child img { width: 100%; } #sec02 .sec02_box p:last-child { width: 58%; margin-right: 5%; } #sec02 .sec02_box p:last-child img { width: 100%; } #sec02 .sec02_inner .sec02_inner_txt01 { line-height: 1.9; margin-top: 5%; } }