@charset "utf-8"; /*accordion*/ .cpsec__detail{ display: none; height: 0; opacity: 0; } .acd-check{ display: none; } .acd-label{ box-shadow: 0px 8px 0px #f2f0eb; background: #008cd6; display: block; width: 50%; padding: 15px; text-align: center; margin: 0 auto; color: #ffffff; position: relative; border-radius: 3rem; cursor: pointer; margin-bottom: 1.0rem; } .acd-label::before{ content: ""; width: .8rem; height: .8rem; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(133deg); position: absolute; right: 1.35rem; top: 37%; } .acd-check:checked + .acd-label + .cpsec__detail { height: auto; opacity: 1; padding: 25px; display: block; } .acd-check:checked + .acd-label::before{ content: ""; width: .8rem; height: .8rem; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); position: absolute; right: 1.35rem; top: 42%; } /*cp*/ .cpsec{ padding-left: 0; padding-right: 0; margin-top: 1.0rem; margin-bottom: 2.0rem; border: solid 1px #6a6b6b; } .detail{ margin-top: 1.0rem; margin-bottom: 2.0rem; } .detail__title{ margin-bottom: 0.4rem; background: #f2f0eb; padding: .6rem; color: #6a6b6b; text-align: center; } .overview{ margin-bottom: 2.0rem; } .overview__title::before{ content: "▼"; } .overview__list::before{ content: "・"; } .overview__note::before{ content: "※"; } .overview__note{ margin-top: 1.0rem; } .overview__copy--bold{ font-weight: bold; } @media all and (max-width:568px){ .acd-label{ width: 85%; padding: 1.0rem; margin-top: 1.0rem; } .cpsec{ border: none; } .cpsec__detail{ background-color: #f6fcff; } }