@charset "utf-8"; /* ================================================== pc, ipad ================================================== */ @media screen and (min-width:835px) { /* -------------------------------------------------- .modal -------------------------------------------------- */ .modal { text-align: center; color: #ffffff; padding: 8px 0 10px; background: #00bfce; margin: 0 auto; position: relative; display: block; border-radius: 50px; } .modal:after { width: 6px; height: 6px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; margin-top: -3px; position: absolute; top: 50%; right: 13px; display: block; content: ""; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .modal:link, .modal:visited, .modal:hover { text-decoration: none; color: #ffffff; } /* -------------------------------------------------- #sec01 -------------------------------------------------- */ #sec01 img { width: 100%; } /* -------------------------------------------------- #sec02 -------------------------------------------------- */ #sec02 { width: 1040px; margin: 80px auto 0; } #sec02 h3 { text-align: center; } #sec02 .font22_34 { font-size: 3.4rem; } #sec02 .sec02_inner { margin-top: 30px; } #sec02 .sec02_box01 { margin-top: 10px; width: 320px; float: left; } #sec02 .sec02_box01 p:nth-child(2), #sec02 .sec02_box01 p:last-child { margin-top: 25px; } #sec02 .sec02_box01 .modal { width: 285px; } #sec02 .sec02_box02 { width: 660px; float: right; } #sec02 .sec02_box02 p { line-height: 1.8; margin-top: 15px; } #sec02 .sec02_box02 p:first-child { margin-top: 0; } #sec02 .sec02_box02 p span { vertical-align: 5px; } /* -------------------------------------------------- #sec03 -------------------------------------------------- */ #sec03 { width: 880px; margin: 80px auto 0; } #sec03 h3 { text-align: center; } #sec03 .sec03_inner { margin-top: 30px; display: flex; justify-content: space-between; flex-wrap: wrap; } #sec03 article { width: 420px; } #sec03 article:nth-child(n 3) { margin-top: 40px; } #sec03 article h4 { margin-top: 15px; } #sec03 div { margin-top: 15px; display: flex; justify-content: space-between; flex-wrap: wrap; } #sec03 div .modal { width: 205px; } /* -------------------------------------------------- #sec04 -------------------------------------------------- */ #sec04 { width: 880px; margin: 80px auto 0; } #sec04 h3 { text-align: center; } #sec04 .sec04_inner { margin-top: 30px; display: flex; justify-content: space-between; flex-wrap: wrap; } #sec04 .sec04_bn { width: 336px; } #sec04 .sec04_bn img{ border: 1px solid #bababa; } #sec04 .sec04_box { width: 505px; } #sec04 .sec04_box dt { margin-bottom: 16px; } #sec04 .sec04_box dt a { text-decoration: underline; } #sec04 .sec04_box dt a:hover { text-decoration: none; } } /* ================================================== ipad ================================================== */ @media screen and (min-width: 835px) and (max-width: 1100px) { /* -------------------------------------------------- #sec02 -------------------------------------------------- */ #sec02 { width: auto; margin-right: 40px; margin-left: 40px; } #sec02 .sec02_box01 { width: 40%; } #sec02 .sec02_box01 p:first-child { text-align: center; } #sec02 .sec02_box01 p:first-child img { width: 90%; } #sec02 .sec02_box01 .modal { width: 100%; } #sec02 .sec02_box02 { width: 56%; } /* -------------------------------------------------- #sec03 -------------------------------------------------- */ #sec03 { width: auto; margin: 80px 40px 0; } #sec03 article { width: 48%; } #sec03 article > p img { width: 100%; } #sec03 article div p { width: 49%; } #sec03 div .modal { width: 100%; } /* -------------------------------------------------- #sec04 -------------------------------------------------- */ #sec04 { width: auto; margin: 80px 40px 0; } #sec04 .sec04_bn { width: 280px; } #sec04 .sec04_box { width: calc(100% - 320px); } } /* ================================================== sp ================================================== */ @media screen and (max-width:834px) { /* -------------------------------------------------- .modal -------------------------------------------------- */ #modal #modaloverlay { max-width: none; } #modal .pdf { text-align: center; } #modal .pdf a:link, #modal .pdf a:visited { text-decoration:underline; color: #ffffff; } #modal .pdf a:hover { text-decoration:none; color: #ffffff; } #modal .pdf img { width: auto; height: 18px; vertical-align: -4px; margin-right: 15px; } .modal { text-align: center; color: #ffffff; width: 100%; padding: 8px 0 8px; background: #00bfce; margin: 0 auto; position: relative; display: block; border-radius: 50px; } .modal:after { width: 6px; height: 6px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; margin-top: -3px; position: absolute; top: 50%; right: 13px; display: block; content: ""; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .modal:link, .modal:visited, .modal:hover { text-decoration: none; color: #ffffff; } /* -------------------------------------------------- #sec01 -------------------------------------------------- */ #sec01 p img { width: 100%; } /* -------------------------------------------------- #sec02 -------------------------------------------------- */ #sec02 { margin: 9% 5.3% 0; } #sec02 h3 { text-align: center; } #sec02 .font22_34 { font-size: 2.2rem; } #sec02 .sec02_inner { margin-top: 4%; } #sec02 .sec02_box01 { width: 90%; margin: 0 auto; } #sec02 .sec02_box01 p:first-child { text-align: center; } #sec02 .sec02_box01 p:first-child img { width: 80%; } #sec02 .sec02_box01 p:nth-child(3), #sec02 .sec02_box01 p:last-child { margin-top: 5%; } #sec02 .sec02_box02 { margin-top: 5%; } #sec02 .sec02_box02 p { line-height: 1.8; margin-top: 2%; } #sec02 .sec02_box02 p:first-child { margin-top: 0; } #sec02 .sec02_box02 p:last-child { text-indent: -10px; line-height: 1.6; margin-left: 10px; } #sec02 .sec02_box02 p span { vertical-align: 5px; } /* -------------------------------------------------- #sec03 -------------------------------------------------- */ #sec03 { margin: 9% 5.3%; } #sec03 h3 { text-align: center; } #sec03 .sec03_inner { margin-top: 4%; display: flex; justify-content: space-between; flex-wrap: wrap; } #sec03 article { width: 48%; } #sec03 article h4 { margin-top: 5%; } #sec03 article:nth-child(n 3) { margin-top: 5%; } #sec03 article p img { width: 100%; } #sec03 div { margin-top: 5%; display: flex; justify-content: space-between; flex-wrap: wrap; } #sec03 div p { width: 100%; } #sec03 div p:nth-child(2) { margin-top: 3%; } /* -------------------------------------------------- #sec04 -------------------------------------------------- */ #sec04 { margin: 9% 5.3%; } #sec04 h3 { text-align: center; } #sec04 .sec04_inner { margin-top: 4%; } #sec04 .sec04_bn { max-width: 61%; } #sec04 .sec04_bn img{ border: 1px solid #bababa; } #sec04 .sec04_box dt { margin: 10px 0; } #sec04 .sec04_box dt a { text-decoration: underline; } #sec04 .sec04_box dt a:hover { text-decoration: none; } }