@charset "UTF-8"; /* ID1 アクアクララについて ================================================== */ /* .about-intro --------------------------------------------------*/ #about.about .about-intro { padding: 50px 0 60px; } #about.about .about-intro__txt { margin-bottom: 30px; } @media all and (min-width: 768px) { #about.about .about-intro { padding: 50px 0 100px; } #about.about .about-intro__txt { margin-bottom: 37px; text-align: center; } } /* .about-water --------------------------------------------------*/ #about.about .about-water { padding: 62px 0 60px; } #about.about .about-water-intro { margin-bottom: 30px; } #about.about .about-water-intro__img { margin: 0 -15px 25px; } #about.about .about-water-intro__head { font-size: 2rem; margin-bottom: 13px; color: #65bbb1; line-height: 1.5; } #about.about .about-water-quality__area-img { margin-bottom: 15px; } #about.about .about-water-quality-relief { margin-top: 20px; padding: 16px 20px 20px; background: #eef7f6; border-radius: 3px; } @media all and (min-width: 768px) { #about.about .about-water { padding: 110px 0 111px; } #about.about .about-water-intro { margin-bottom: 43px; } #about.about .about-water-intro__img { margin: 0 0 30px; overflow: hidden; } #about.about .about-water-intro__head { font-size: 2.4rem; margin-bottom: 15px; letter-spacing: 0.08em; } #about.about .about-water-quality__area-img { width: 41%; margin: 0 34px 0 0; } #about.about .about-water-quality__area-txt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } #about.about .about-water-quality-relief { margin-top: 20px; padding: 25px 30px 30px; background: #eef7f6; border-radius: 6px; } #about.about .about-water-quality__content-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } /* .about-sec --------------------------------------------------*/ #about.about .about-sec { padding: 62px 0 60px; } #about.about .about-sec__img { margin: 0 -15px 15px; } @media all and (min-width: 768px) { #about.about .about-sec { padding: 110px 0; } #about.about .about-sec__img { margin: 0 0 30px; overflow: hidden; } } /* .about-sec-sub ================================================== */ #about.about .about-sec-sub { margin-top: 30px; } @media all and (min-width: 768px) { #about.about .about-sec-sub { margin-top: 45px; } } /* .about-sec-commit ================================================== */ #about.about .about-sec-commit { margin-top: 30px; padding: 25px; border-radius: 15px; } #about.about .about-sec-commit__toggle { margin-top: 30px; } #about.about .about-sec-commit__content { padding: 15px; } #about.about .about-sec-commit__content-txt { font-size: 1.3rem; } #about.about .about-sec-commit__content-note { margin-top: 30px; } #about.about .about-sec-commit__item-head { margin-top: 15px; } #about.about .about-sec-commit__note { margin-top: 20px; } #about.about .about-sec-commit-attention-list__txt { font-size: 1.2rem; text-align: center; margin-top: 3px; } #about.about .about-sec-commit-attention-list__item + .about-sec-commit-attention-list__item { margin-top: 12px; } #about.about .about-sec-commit__attention-ico { width: 18px; margin-right: 5px; } #about.about .about-sec-commit__attention-txt { margin-bottom: 10px; color: #E26732; font-size: 1.1rem; font-weight: bold; } #about.about .about-sec-commit__attention-box { padding: 10px; margin-bottom: 10px; } @media all and (min-width: 768px) { #about.about .about-sec-commit { margin-top: 50px; padding: 45px 50px; border-radius: 15px; } #about.about .about-sec-commit__toggle { margin-top: 20px; } #about.about .about-sec-commit__content { padding: 30px; } #about.about .about-sec-commit__content-txt { font-size: 1.5rem; } #about.about .about-sec-commit__content-note { margin-top: 20px; } #about.about .about-sec-commit__item-head { margin-top: 30px; } #about.about .about-sec-commit__note { margin-top: 20px; } #about.about .about-sec-commit__btn { margin-top: 30px; } #about.about .about-sec-commit-attention-list__txt { font-size: 1.3rem; margin-top: 5px; } #about.about .about-sec-commit-attention-list__item + .about-sec-commit-attention-list__item { margin-top: 20px; } #about.about .about-sec-commit__attention-area-txt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #about.about .about-sec-commit__attention-txt { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-top: 10px; font-size: 1.3rem; } #about.about .about-sec-commit__attention-box { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-bottom: 0; } } /* ID2 RO膜(逆浸透膜)でろ過した安心安全な軟水 ================================================== */ /* .about-water-intro --------------------------------------------------*/ #water.about .about-water-intro { padding: 10px 0 50px; } #water.about .about-water-intro__txt { margin-bottom: 30px; } @media all and (min-width: 768px) { #water.about .about-water-intro { padding: 50px 0 100px; } #water.about .about-water-intro__txt { margin-bottom: 63px; text-align: center; } } /* .about-water-intro --------------------------------------------------*/ #water.about .about-water-ro-head:before { width: 90px; } @media all and (min-width: 768px) { #water.about .about-water-ro-head:before { width: 127px; } } /* .about-water-relief --------------------------------------------------*/ #water.about .about-water-relief { padding: 50px 0 60px; } #water.about .about-water-relief__txt { margin-bottom: 40px; } #water.about .about-water-relief-commitment { margin-top: 30px; } @media all and (min-width: 768px) { #water.about .about-water-relief { padding: 103px 0 111px; } #water.about .about-water-relief__txt { margin-bottom: 68px; } #water.about .about-water-relief-commitment { margin-top: 38px; } } /* .about-water-reason --------------------------------------------------*/ #water.about .about-water-reason { padding: 55px 0 60px; } #water.about .about-water-reason-sub-head { font-size: 1.7rem; } #water.about .about-water-reason__txt + #water.about .about-water-reason__txt { margin-top: 22px; } #water.about .about-water-reason-info { margin: 30px 0 40px; } #water.about .about-water-reason-info__txt { margin-bottom: 16px; } #water.about .about-water-reason-info-message-top { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 15px; } #water.about .about-water-reason-info-message-top__img { width: 80px; height: 80px; } #water.about .about-water-reason-info-message-top__area-name { margin-left: 12px; padding-top: 3px; } #water.about .about-water-reason-info-message-top__position { line-height: 1.5; font-size: 1.2rem; } #water.about .about-water-reason-info-message-top__name { font-weight: bold; font-size: 1.8rem; } #water.about .about-water-reason-system__info { margin-bottom: 47px; } #water.about .about-water-reason-system__info-img { margin-bottom: 20px; } #water.about .about-water-reason-system__img { margin-bottom: 20px; } #water.about .about-water-reason-system__txt { margin-bottom: 40px; } #water.about .about-water-reason-excellent { margin-bottom: 40px; } @media all and (min-width: 768px) { #water.about .about-water-reason { padding: 103px 0 111px; } #water.about .about-water-reason__txt + #water.about .about-water-reason__txt { margin-top: 30px; } #water.about .about-water-reason-info { margin: 80px 0; } #water.about .about-water-reason-info__txt { margin-bottom: 30px; } #water.about .about-water-reason-info-message { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #water.about .about-water-reason-info-message-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; width: 293px; margin-right: 40px; margin-bottom: 0; padding: 15px 0 0; border-right: 1px solid #DEDFE9; } #water.about .about-water-reason-info-message-top__img { width: 80px; height: 80px; } #water.about .about-water-reason-info-message-top__area-name { margin-left: 18px; padding-top: 7px; } #water.about .about-water-reason-info-message__area-txt { width: calc(100% - 333px); font-size: 1.5rem; } #water.about .about-water-reason-system__info { margin-bottom: 75px; } #water.about .about-water-reason-system__info-img { margin-bottom: 26px; } #water.about .about-water-reason-system__img { margin-bottom: 0; } #water.about .about-water-reason-system__txt { margin-bottom: 0; } #water.about .about-water-reason-excellent { margin-bottom: 50px; } } /* .about-water-delicious --------------------------------------------------*/ #water.about .about-water-delicious { padding: 55px 0 60px; } #water.about .about-water-delicious-info { margin-bottom: 40px; } #water.about .about-water-delicious-info__img { margin-bottom: 16px; } #water.about .about-water-delicious-safety { margin-bottom: 30px; } #water.about .about-water-delicious-cleanliness__txt { margin-bottom: 48px; } #water.about .about-water-delicious-cleanliness-toggle__content { padding: 20px 25px 25px; } #water.about .about-water-delicious-cleanliness-toggle__notes { margin-bottom: 15px; } #water.about .about-water-delicious-cleanliness-toggle__txt:not(:last-of-type) { margin-bottom: 18px; } #water.about .about-water-delicious-cleanliness-toggle__sub { margin-top: 18px; font-size: 1.4rem; } #water.about .about-water-delicious-cleanliness-toggle__lead { font-weight: bold; } #water.about .about-water-delicious-cleanliness-toggle-list__item { padding: 37px 0 22px; } #water.about .about-water-delicious-cleanliness-toggle-list__item:not(:last-child) { border-bottom: 1px solid #DEDFE9; } #water.about .about-water-delicious-cleanliness-toggle-list__item.is-n .about-water-delicious-cleanliness-toggle-list__head:before { background: url(../img/common/icon/ico_element04.png) no-repeat center/contain; } #water.about .about-water-delicious-cleanliness-toggle-list__item.is-k .about-water-delicious-cleanliness-toggle-list__head:before { background: url(../img/common/icon/ico_element03.png) no-repeat center/contain; } #water.about .about-water-delicious-cleanliness-toggle-list__item.is-mg .about-water-delicious-cleanliness-toggle-list__head:before { background: url(../img/common/icon/ico_element02.png) no-repeat center/contain; } #water.about .about-water-delicious-cleanliness-toggle-list__head { position: relative; padding-left: 63px; margin-bottom: 27px; } #water.about .about-water-delicious-cleanliness-toggle-list__head:before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 55px; height: 55px; content: ''; background: url(../img/common/icon/ico_element01.png) no-repeat center/contain; } #water.about .about-water-delicious-cleanliness-list__item { position: relative; } #water.about .about-water-delicious-cleanliness-list__item:not(:last-of-type) { margin-bottom: 36px; } #water.about .about-water-delicious-cleanliness-list__item:not(:last-of-type)::after { content: ''; position: absolute; bottom: -30px; left: 50%; width: 60px; height: 20px; background: url(../img/about/water/ico_pic_delicious01.jpg) no-repeat center top/60px auto; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #water.about .about-water-delicious-cleanliness-list__area-img { overflow: hidden; border-radius: 10px; } #water.about .about-water-delicious-cleanliness-list__txt { padding: 5px; background: #65bbb1; color: #fff; font-weight: bold; text-align: center; } #water.about .about-water-delicious-cleanliness__movie { padding-top: 60px; padding-bottom: 43px; } @media all and (min-width: 768px) { #water.about .about-water-delicious { padding: 130px 0 111px; } #water.about .about-water-delicious-info { margin-bottom: 75px; } #water.about .about-water-delicious-info__img { margin-bottom: 15px; } #water.about .about-water-delicious-safety { margin-bottom: 65px; } #water.about .about-water-delicious-cleanliness__txt { margin-bottom: 25px; } #water.about .about-water-delicious-cleanliness-toggle__content { padding: 45px 45px 50px; } #water.about .about-water-delicious-cleanliness-toggle__notes { margin-bottom: 15px; } #water.about .about-water-delicious-cleanliness-toggle__txt:not(:last-of-type) { margin-bottom: 34px; } #water.about .about-water-delicious-cleanliness-toggle__sub { margin-top: 27px; font-size: 1.6rem; } #water.about .about-water-delicious-cleanliness-toggle__lead { font-weight: bold; } #water.about .about-water-delicious-cleanliness-toggle-list__item { position: relative; padding: 30px 0 30px 82px; } #water.about .about-water-delicious-cleanliness-toggle-list__item:before { position: absolute; top: 32px; left: 0; width: 66px; height: 66px; content: ''; background: url(../img/common/icon/ico_element01.png) no-repeat center/contain; } #water.about .about-water-delicious-cleanliness-toggle-list__item.is-n:before { background: url(../img/common/icon/ico_element04.png) no-repeat center/contain; } #water.about .about-water-delicious-cleanliness-toggle-list__item.is-k:before { background: url(../img/common/icon/ico_element03.png) no-repeat center/contain; } #water.about .about-water-delicious-cleanliness-toggle-list__item.is-mg:before { background: url(../img/common/icon/ico_element02.png) no-repeat center/contain; } #water.about .about-water-delicious-cleanliness-toggle-list__head { padding-left: 0; margin-bottom: 10px; } #water.about .about-water-delicious-cleanliness-toggle-list__head:before { content: none; } #water.about .about-water-delicious-cleanliness-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #water.about .about-water-delicious-cleanliness-list__item { width: 220px; margin-right: 35px; } #water.about .about-water-delicious-cleanliness-list__item:nth-of-type(4n) { margin-right: 0; } #water.about .about-water-delicious-cleanliness-list__item:not(:last-of-type) { margin-bottom: 30px; } #water.about .about-water-delicious-cleanliness-list__item:not(:last-of-type)::after { right: -20px; bottom: 52%; left: auto; width: 40px; height: 15px; background-size: 40px auto; -webkit-transform: rotate(-90deg) translate(0, -50%); transform: rotate(-90deg) translate(0, -50%); -webkit-transform-origin: right top; transform-origin: right top; } #water.about .about-water-delicious-cleanliness-list__item:nth-last-of-type(-n + 4) { margin-bottom: 0; } #water.about .about-water-delicious-cleanliness-list__txt { padding: 7px; } #water.about .about-water-delicious-cleanliness__movie { padding-top: 56px; padding-bottom: 60px; } } /* .about-water-risk --------------------------------------------------*/ #water.about .about-water-risk { padding: 55px 0 60px; } #water.about .about-water-risk-info { margin-bottom: 35px; } #water.about .about-water-risk-info__txt + .about-water-risk-info__txt { margin-top: 26px; } #water.about .about-water-risk-info-toggle__content { padding: 20px 25px 25px; background: #eef7f6; } #water.about .about-water-risk-info-toggle__txt + .about-water-risk-info-toggle__txt { margin-top: 26px; } #water.about .about-water-risk-info-toggle__notes { margin-top: 5px; margin-bottom: 25px; } @media all and (min-width: 768px) { #water.about .about-water-risk { padding: 103px 0 111px; } #water.about .about-water-risk-info { margin-bottom: 35px; } #water.about .about-water-risk-info__txt + .about-water-risk-info__txt { margin-top: 30px; } #water.about .about-water-risk-info-toggle__content { padding: 45px 45px 50px; } #water.about .about-water-risk-info-toggle__txt + .about-water-risk-info-toggle__txt { margin-top: 30px; } #water.about .about-water-risk-info-toggle__notes { margin-top: 14px; margin-bottom: 38px; } } /* .about-water-summary --------------------------------------------------*/ #water.about .about-water-summary { padding: 60px 0 0; } #water.about .about-water-summary-toggle__content { padding: 25px; } #water.about .about-water-summary-toggle__txt:not(:last-of-type) { margin-bottom: 15px; } @media all and (min-width: 768px) { #water.about .about-water-summary { padding: 120px 0 0; } #water.about .about-water-summary-toggle__content { padding: 45px 45px 50px; } #water.about .about-water-summary-toggle__txt:not(:last-of-type) { margin-bottom: 30px; } } /* ID3 アクアクララがおいしいお水を誕生させるまで ================================================== */ /* .about-production-intro --------------------------------------------------*/ #production.about .about-production-intro { padding: 10px 0 50px; } #production.about .about-production-intro__txt { margin-bottom: 45px; } @media all and (min-width: 768px) { #production.about .about-production-intro { padding: 50px 0 100px; } #production.about .about-production-intro__txt { margin-bottom: 25px; text-align: center; } } /* .about-production-info --------------------------------------------------*/ #production.about .about-production-info { padding: 50px 0 60px; } #production.about .about-production-info__txt { margin-bottom: 25px; } #production.about .about-production-info__set { margin-bottom: 35px; } #production.about .about-production-info-design__txt + .about-production-info-design__txt { margin-top: 18px; } #production.about .about-production-info-design__lead { margin-top: 35px; } #production.about .about-production-info-design__table { background: #fff; } #production.about .about-production-info-design-element { margin-top: 30px; } #production.about .about-production-info-design-element-list { margin-top: -20px; } #production.about .about-production-info-design-element-list__item { padding: 34px 0 17px; } #production.about .about-production-info-design-element-list__item:not(:last-child) { border-bottom: 1px solid #DEDFE9; } #production.about .about-production-info-design-element-list__item:last-child { padding-bottom: 0; } #production.about .about-production-info-design-element-list__item.is-n .about-production-info-design-element-list__head:before { background: url(../img/common/icon/ico_element04.png) no-repeat center/contain; } #production.about .about-production-info-design-element-list__item.is-k .about-production-info-design-element-list__head:before { background: url(../img/common/icon/ico_element03.png) no-repeat center/contain; } #production.about .about-production-info-design-element-list__item.is-mg .about-production-info-design-element-list__head:before { background: url(../img/common/icon/ico_element02.png) no-repeat center/contain; } #production.about .about-production-info-design-element-list__head { position: relative; padding-left: 63px; margin-bottom: 27px; } #production.about .about-production-info-design-element-list__head:before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 55px; height: 55px; content: ''; background: url(../img/common/icon/ico_element01.png) no-repeat center/contain; } @media all and (min-width: 768px) { #production.about .about-production-info { padding: 103px 0 111px; } #production.about .about-production-info__txt { margin-bottom: 35px; text-align: center; } #production.about .about-production-info__set { margin-bottom: 65px; } #production.about .about-production-info-design__txt + .about-production-info-design__txt { margin-top: 30px; } #production.about .about-production-info-design__lead { margin-top: 50px; } #production.about .about-production-info-design-element { margin-top: 30px; } #production.about .about-production-info-design-element-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 35px -25px 0; } #production.about .about-production-info-design-element-list__item { width: 25%; padding: 0 25px; -webkit-box-sizing: border-box; box-sizing: border-box; } #production.about .about-production-info-design-element-list__item:not(:last-child) { border-bottom: none; border-right: 1px solid #DEDFE9; } #production.about .about-production-info-design-element-list__head { padding: 75px 0 0; margin-bottom: 13px; text-align: center; } #production.about .about-production-info-design-element-list__head:before { top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 66px; height: 66px; } } /* .about-production-works --------------------------------------------------*/ #production.about .about-production-works { padding: 50px 0 60px; } #production.about .about-production-works-info__txt + .about-production-works-info__txt { margin-top: 25px; } @media all and (min-width: 768px) { #production.about .about-production-works { padding: 103px 0 111px; } #production.about .about-production-works-set { margin-bottom: 30px; } #production.about .about-production-works-info__txt + .about-production-works-info__txt { margin-top: 30px; } } /* .about-production-inspection --------------------------------------------------*/ #production.about .about-production-inspection { padding: 50px 0 0; } #production.about .about-production-inspection-tasting { padding-top: 25px; } #production.about .about-production-inspection-tasting__txt { margin-bottom: 15px; } #production.about .about-production-inspection-tasting-set__txt + .about-production-inspection-tasting-set__txt { margin-top: 25px; } @media all and (min-width: 768px) { #production.about .about-production-inspection { padding: 103px 0 0; } #production.about .about-production-inspection-tasting { padding-top: 50px; } #production.about .about-production-inspection-tasting__txt { margin-bottom: 40px; } #production.about .about-production-inspection-tasting-set__txt + .about-production-inspection-tasting-set__txt { margin-top: 25px; } } /* ID4 安心・安全への取り組み ================================================== */ /* .about-safe-secure-intro --------------------------------------------------*/ #safe-secure.about .about-safe-secure-intro { padding: 15px 0 50px; } #safe-secure.about .about-safe-secure-intro__txt { margin-bottom: 25px; } @media all and (min-width: 768px) { #safe-secure.about .about-safe-secure-intro { padding: 50px 0 100px; } #safe-secure.about .about-safe-secure-intro__txt { margin-bottom: 50px; text-align: center; } } /* .about-safe-secure-reason .about-safe-secure-management .about-safe-secure-production .about-safe-secure-research .about-safe-secure-plan .about-safe-secure-safety .about-safe-secure-disaster --------------------------------------------------*/ #safe-secure.about .about-safe-secure-reason, #safe-secure.about .about-safe-secure-management, #safe-secure.about .about-safe-secure-production, #safe-secure.about .about-safe-secure-research, #safe-secure.about .about-safe-secure-plan, #safe-secure.about .about-safe-secure-safety, #safe-secure.about .about-safe-secure-disaster { padding: 60px 0; } #safe-secure.about .about-safe-secure-reason__img, #safe-secure.about .about-safe-secure-management__img, #safe-secure.about .about-safe-secure-production__img, #safe-secure.about .about-safe-secure-research__img, #safe-secure.about .about-safe-secure-plan__img, #safe-secure.about .about-safe-secure-safety__img, #safe-secure.about .about-safe-secure-disaster__img { margin-top: 20px; } #safe-secure.about .about-safe-secure-reason-note, #safe-secure.about .about-safe-secure-management-note, #safe-secure.about .about-safe-secure-production-note, #safe-secure.about .about-safe-secure-research-note, #safe-secure.about .about-safe-secure-plan-note, #safe-secure.about .about-safe-secure-safety-note, #safe-secure.about .about-safe-secure-disaster-note { position: relative; top: -10px; font-size: 1.3rem; } @media all and (min-width: 768px) { #safe-secure.about .about-safe-secure-reason, #safe-secure.about .about-safe-secure-management, #safe-secure.about .about-safe-secure-production, #safe-secure.about .about-safe-secure-research, #safe-secure.about .about-safe-secure-plan, #safe-secure.about .about-safe-secure-safety, #safe-secure.about .about-safe-secure-disaster { padding: 120px 0; } #safe-secure.about .about-safe-secure-reason__txt, #safe-secure.about .about-safe-secure-management__txt, #safe-secure.about .about-safe-secure-production__txt, #safe-secure.about .about-safe-secure-research__txt, #safe-secure.about .about-safe-secure-plan__txt, #safe-secure.about .about-safe-secure-safety__txt, #safe-secure.about .about-safe-secure-disaster__txt { text-align: center; } #safe-secure.about .about-safe-secure-reason__set-img, #safe-secure.about .about-safe-secure-management__set-img, #safe-secure.about .about-safe-secure-production__set-img, #safe-secure.about .about-safe-secure-research__set-img, #safe-secure.about .about-safe-secure-plan__set-img, #safe-secure.about .about-safe-secure-safety__set-img, #safe-secure.about .about-safe-secure-disaster__set-img { width: 39%; } #safe-secure.about .about-safe-secure-reason__img, #safe-secure.about .about-safe-secure-management__img, #safe-secure.about .about-safe-secure-production__img, #safe-secure.about .about-safe-secure-research__img, #safe-secure.about .about-safe-secure-plan__img, #safe-secure.about .about-safe-secure-safety__img, #safe-secure.about .about-safe-secure-disaster__img { margin-top: 40px; } #safe-secure.about .about-safe-secure-reason-note, #safe-secure.about .about-safe-secure-management-note, #safe-secure.about .about-safe-secure-production-note, #safe-secure.about .about-safe-secure-research-note, #safe-secure.about .about-safe-secure-plan-note, #safe-secure.about .about-safe-secure-safety-note, #safe-secure.about .about-safe-secure-disaster-note { top: -14px; } } /* .about-safe-secure-reason-relief, .about-safe-secure-reason-safety, .about-safe-secure-production --------------------------------------------------*/ #safe-secure.about .about-safe-secure-reason-relief, #safe-secure.about .about-safe-secure-reason-safety { margin-top: 30px; padding: 25px 25px; background: #fff; border-radius: 10px; } #safe-secure.about .about-safe-secure-reason-relief__item-img, #safe-secure.about .about-safe-secure-reason-safety__item-img { margin-bottom: 5px; } #safe-secure.about .about-safe-secure-reason-relief__item-set, #safe-secure.about .about-safe-secure-reason-safety__item-set { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #safe-secure.about .about-safe-secure-reason-relief__item-ico, #safe-secure.about .about-safe-secure-reason-safety__item-ico { width: 86px; margin-left: -5px; } #safe-secure.about .about-safe-secure-reason-relief__item-lead, #safe-secure.about .about-safe-secure-reason-safety__item-lead { color: #65bbb1; font-weight: bold; font-size: 1.5rem; line-height: 1.5; } #safe-secure.about .about-safe-secure-reason-relief__item + .about-safe-secure-reason-relief__item, #safe-secure.about .about-safe-secure-reason-relief__item .about-safe-secure-reason-safety__item, #safe-secure.about .about-safe-secure-reason-safety__item + .about-safe-secure-reason-relief__item, #safe-secure.about .about-safe-secure-reason-safety__item .about-safe-secure-reason-safety__item { margin-top: 25px; } @media all and (min-width: 768px) { #safe-secure.about .about-safe-secure-reason-relief, #safe-secure.about .about-safe-secure-reason-safety { margin-top: 40px; padding: 50px; border-radius: 20px; } #safe-secure.about .about-safe-secure-reason-relief__list, #safe-secure.about .about-safe-secure-reason-safety__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -15px; } #safe-secure.about .about-safe-secure-reason-relief__item, #safe-secure.about .about-safe-secure-reason-safety__item { width: calc(50% - 30px); margin: 0 15px; } #safe-secure.about .about-safe-secure-reason-relief__item-img, #safe-secure.about .about-safe-secure-reason-safety__item-img { margin-bottom: 10px; } #safe-secure.about .about-safe-secure-reason-relief__item-ico, #safe-secure.about .about-safe-secure-reason-safety__item-ico { width: 81px; margin-left: -5px; } #safe-secure.about .about-safe-secure-reason-relief__item-lead, #safe-secure.about .about-safe-secure-reason-safety__item-lead { font-size: 1.8rem; } #safe-secure.about .about-safe-secure-reason-relief__item + .about-safe-secure-reason-relief__item, #safe-secure.about .about-safe-secure-reason-relief__item .about-safe-secure-reason-safety__item, #safe-secure.about .about-safe-secure-reason-safety__item + .about-safe-secure-reason-relief__item, #safe-secure.about .about-safe-secure-reason-safety__item .about-safe-secure-reason-safety__item { margin-top: 0; } } /* .about-safe-secure-management-sec --------------------------------------------------*/ #safe-secure.about .about-safe-secure-management-sec { margin-top: 25px; } #safe-secure.about .about-safe-secure-management-sec__box { margin-top: 30px; } #safe-secure.about .about-safe-secure-management-sec-num-list__item { padding-top: 10px; padding-bottom: 10px; padding-left: 30px; font-size: 1.3rem; } #safe-secure.about .about-safe-secure-management-sec-num-list__item:before { width: 22px; height: 22px; margin-top: 0; } #safe-secure.about .about-safe-secure-management-sec-num-list__item:last-child { padding-bottom: 0; } @media all and (min-width: 768px) { #safe-secure.about .about-safe-secure-management-sec { margin-top: 50px; } #safe-secure.about .about-safe-secure-management-sec + .about-safe-secure-management-sec { margin-top: 70px; } #safe-secure.about .about-safe-secure-management-sec__box { margin-top: 30px; } #safe-secure.about .about-safe-secure-management-sec__img { width: 39%; } #safe-secure.about .about-safe-secure-management-sec-num-list__item { padding-top: 15px; padding-bottom: 15px; padding-left: 35px; font-size: 1.5rem; } #safe-secure.about .about-safe-secure-management-sec-num-list__item:before { width: 27px; height: 27px; margin-top: -3px; } } /* .about-safe-secure-production-sec --------------------------------------------------*/ #safe-secure.about .about-safe-secure-production-sec { margin-top: 50px; } #safe-secure.about .about-safe-secure-production-sec__youtube { position: relative; width: 100%; height: 0; margin-top: 20px; padding-top: 56%; } #safe-secure.about .about-safe-secure-production-sec__youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #safe-secure.about .about-safe-secure-production-sec__movie-head { margin-top: 15px; line-height: 1.6; color: #65bbb1; font-weight: bold; font-size: 1.5rem; text-align: center; } #safe-secure.about .about-safe-secure-production-sec__btn { margin-top: 30px; } @media all and (min-width: 768px) { #safe-secure.about .about-safe-secure-production-sec { margin-top: 70px; } #safe-secure.about .about-safe-secure-production-sec__youtube { width: 62%; margin: 20px auto 0; padding-top: 35%; } #safe-secure.about .about-safe-secure-production-sec__movie-head { font-size: 1.8rem; } } /* .about-safe-secure-safety --------------------------------------------------*/ #safe-secure.about .about-safe-secure-safety__box { margin-top: 20px; } #safe-secure.about .about-safe-secure-safety__box + .about-safe-secure-safety__box { margin-top: 10px; } @media all and (min-width: 768px) { #safe-secure.about .about-safe-secure-safety__box { margin-top: 45px; } #safe-secure.about .about-safe-secure-safety__box + .about-safe-secure-safety__box { margin-top: 40px; } #safe-secure.about .about-safe-secure-safety__btn { margin: 15px 0 0; } } /* .about-safe-secure-plan-sec --------------------------------------------------*/ #safe-secure.about .about-safe-secure-plan-sec { margin-top: 30px; } #safe-secure.about .about-safe-secure-plan-sec__note { margin-top: 10px; } @media all and (min-width: 768px) { #safe-secure.about .about-safe-secure-plan-sec { margin-top: 45px; } #safe-secure.about .about-safe-secure-plan-sec + .about-safe-secure-plan-sec { margin-top: 65px; } #safe-secure.about .about-safe-secure-plan-sec__btn { margin: 40px auto 0; } } /* .about-safe-secure-disaster-sec --------------------------------------------------*/ #safe-secure.about .about-safe-secure-disaster-sec { margin-top: 30px; } #safe-secure.about .about-safe-secure-disaster-sec__note { margin-top: 5px; } @media all and (min-width: 768px) { #safe-secure.about .about-safe-secure-disaster-sec { margin-top: 45px; } #safe-secure.about .about-safe-secure-disaster-sec__note { margin-top: 5px; } } /* .about-safe-secure-disaster-voice --------------------------------------------------*/ #safe-secure.about .about-safe-secure-disaster-voice { margin-top: 30px; } #safe-secure.about .about-safe-secure-disaster-voice__list { margin-top: 10px; } #safe-secure.about .about-safe-secure-disaster-voice__item + .about-safe-secure-disaster-voice__item { margin-top: 10px; } #safe-secure.about .about-safe-secure-disaster-voice__item-name { text-align: right; color: #ADAEB7; font-size: 1.3rem; } #safe-secure.about .about-safe-secure-disaster-voice__item-note { margin-top: 10px; } #safe-secure.about .about-safe-secure-disaster-voice__btn { margin-top: 30px !important; } @media all and (min-width: 768px) { #safe-secure.about .about-safe-secure-disaster-voice { margin-top: 48px; } #safe-secure.about .about-safe-secure-disaster-voice__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 30px -7px; } #safe-secure.about .about-safe-secure-disaster-voice__item { width: calc(33.3% - 14px); margin: 0 7px; -webkit-box-sizing: border-box; box-sizing: border-box; } #safe-secure.about .about-safe-secure-disaster-voice__item + .about-safe-secure-disaster-voice__item { margin-top: 0; } #safe-secure.about .about-safe-secure-disaster-voice__item-box { position: relative; min-height: 255px; } #safe-secure.about .about-safe-secure-disaster-voice__item-name { position: absolute; bottom: 25px; right: 25px; width: 100%; font-size: 1.3rem; } #safe-secure.about .about-safe-secure-disaster-voice__item-note { margin-top: 15px; } #safe-secure.about .about-safe-secure-disaster-voice__btn { margin-top: 60px !important; } } /* ID5 徹底比較！アクアクララをおすすめする理由 ================================================== */ /* .about-competition-intro --------------------------------------------------*/ #competition.about .about-competition-intro { padding: 15px 0 50px; } #competition.about .about-competition-intro__txt { margin-bottom: 25px; } @media all and (min-width: 768px) { #competition.about .about-competition-intro { padding: 50px 0 100px; } #competition.about .about-competition-intro__txt { margin-bottom: 50px; text-align: center; } } /* .about-competition-price --------------------------------------------------*/ #competition.about .about-competition-price { padding: 60px 0; } #competition.about .about-competition-price__txt { margin-bottom: 30px; } #competition.about .about-competition-price__small { color: #ADAEB7; font-size: 1.2rem; } #competition.about .about-competition-price__sub { margin-top: 20px; } #competition.about .about-competition-price__note { margin-top: 28px; } @media all and (min-width: 768px) { #competition.about .about-competition-price { padding: 108px 0 120px; } #competition.about .about-competition-price__txt { margin-bottom: 50px; text-align: center; } #competition.about .about-competition-price__small { font-size: 1.3rem; } } /* .about-competition-month --------------------------------------------------*/ #competition.about .about-competition-month { padding: 60px 0; } #competition.about .about-competition-month__txt { margin-bottom: 28px; } #competition.about .about-competition-month__sub { margin-top: 20px; } #competition.about .about-competition-month__note { margin-top: 28px; } @media all and (min-width: 768px) { #competition.about .about-competition-month { padding: 97px 0 120px; } #competition.about .about-competition-month__txt { margin-bottom: 50px; text-align: center; } } /* .about-competition-server --------------------------------------------------*/ #competition.about .about-competition-server { padding: 60px 0; } #competition.about .about-competition-server__txt { margin-bottom: 28px; } @media all and (min-width: 768px) { #competition.about .about-competition-server { padding: 108px 0 120px; } #competition.about .about-competition-server__txt { margin-bottom: 50px; text-align: center; } } /* .about-competition-deliver --------------------------------------------------*/ #competition.about .about-competition-deliver { padding: 60px 0; } #competition.about .about-competition-deliver__txt { margin-bottom: 28px; } #competition.about .about-competition-deliver-info { margin-top: 28px; } #competition.about .about-competition-deliver-info__txt + .about-competition-deliver__txt { margin-top: 18px; } @media all and (min-width: 768px) { #competition.about .about-competition-deliver { padding: 108px 0 120px; } #competition.about .about-competition-deliver__txt { margin-bottom: 50px; text-align: center; } } /* .about-competition-reason --------------------------------------------------*/ #competition.about .about-competition-reason { padding: 60px 0 0; } #competition.about .about-competition-reason__txt { margin-bottom: 15px; } @media all and (min-width: 768px) { #competition.about .about-competition-reason { padding: 120px 0 0; } #competition.about .about-competition-reason__txt { margin-bottom: 20px; } } /* ID6 ご不在時でもお届け！宅配について ================================================== */ /* .about-deliver-intro --------------------------------------------------*/ #deliver.about .about-deliver-intro { padding: 10px 0 50px; } #deliver.about .about-deliver-intro__txt { margin-bottom: 25px; } @media all and (min-width: 768px) { #deliver.about .about-deliver-intro { padding: 50px 0 100px; } #deliver.about .about-deliver-intro__txt { margin-bottom: 63px; text-align: center; } } /* .about-deliver-info --------------------------------------------------*/ #deliver.about .about-deliver-info { padding: 45px 0; } #deliver.about .about-deliver-info__txt { margin-bottom: 40px; } @media all and (min-width: 768px) { #deliver.about .about-deliver-info { padding: 95px 0 85px; } #deliver.about .about-deliver-info__txt { margin-bottom: 68px; } } /* .about-deliver-convenient --------------------------------------------------*/ #deliver.about .about-deliver-convenient { padding: 50px 0; } #deliver.about .about-deliver-convenient__txt { margin-bottom: 40px; } @media all and (min-width: 768px) { #deliver.about .about-deliver-convenient { padding: 95px 0 100px; } #deliver.about .about-deliver-convenient__txt { margin-bottom: 0; } } /* .about-deliver-point --------------------------------------------------*/ #deliver.about .about-deliver-point { padding: 60px 0; } #deliver.about .about-deliver-point-section { padding: 20px 25px 25px; background: #fff; border-radius: 10px; } #deliver.about .about-deliver-point-section + .about-deliver-point-section { margin-top: 15px; } #deliver.about .about-deliver-point-section-head { position: relative; line-height: 1.6; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid #DEDFE9; } #deliver.about .about-deliver-point-section-head__ico { position: absolute; top: -7px; left: -5px; width: 54px; } #deliver.about .about-deliver-point-section-head__txt { padding-left: 53px; font-weight: bold; font-size: 1.6rem; } #deliver.about .about-deliver-point-section__set + .about-deliver-point-section__set { margin-top: 17px; } #deliver.about .about-deliver-point-section__set-head { font-size: 1.6rem; } #deliver.about .about-deliver-point-section__notes { margin-top: 7px; } #deliver.about .about-deliver-point-section-list__item { position: relative; } #deliver.about .about-deliver-point-section-list__item:not(:last-child) { margin-bottom: 50px; } #deliver.about .about-deliver-point-section-list__item:not(:last-child):before { position: absolute; bottom: -35px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 24px 21px 0 21px; border-color: #65bbb1 transparent transparent transparent; content: ''; } #deliver.about .about-deliver-point-section-list__area-txt { margin-top: 13px; } #deliver.about .about-deliver-point-section-list__head { font-size: 1.5rem; text-align: center; } #deliver.about .about-deliver-point-section-list__head-num { padding-right: 5px; font-size: 1.6rem; } #deliver.about .about-deliver-point-section-list__txt { margin-top: 2px; } #deliver.about .about-deliver-point-section__area-txt { margin-top: 15px; } #deliver.about .about-deliver-point-section__txt { margin-bottom: 5px; } @media all and (min-width: 768px) { #deliver.about .about-deliver-point { padding: 120px 0; } #deliver.about .about-deliver-point-section { padding: 25px 40px 40px; } #deliver.about .about-deliver-point-section + .about-deliver-point-section { margin-top: 20px; } #deliver.about .about-deliver-point-section-head { margin-bottom: 30px; padding-bottom: 36px; } #deliver.about .about-deliver-point-section-head__ico { width: 80px; } #deliver.about .about-deliver-point-section-head__txt { padding: 25px 10px 0 75px; font-size: 2.2rem; } #deliver.about .about-deliver-point-section__set + .about-deliver-point-section__set { margin-top: 38px; } #deliver.about .about-deliver-point-section__set-head { font-size: 1.8rem; } #deliver.about .about-deliver-point-section__notes { margin-top: 13px; } #deliver.about .about-deliver-point-section-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } #deliver.about .about-deliver-point-section-list__item { width: 29.5%; -webkit-box-sizing: border-box; box-sizing: border-box; } #deliver.about .about-deliver-point-section-list__item:not(:last-child) { margin-bottom: 0; } #deliver.about .about-deliver-point-section-list__item:not(:last-child):before { top: 73px; bottom: auto; left: auto; right: -14%; -webkit-transform: none; transform: none; border-width: 19px 0 19px 25px; border-color: transparent transparent transparent #65bbb1; } #deliver.about .about-deliver-point-section-list__area-txt { margin-top: 16px; } #deliver.about .about-deliver-point-section-list__head { font-size: 1.8rem; } #deliver.about .about-deliver-point-section-list__head-num { padding-right: 5px; font-size: 1.9rem; } #deliver.about .about-deliver-point-section-list__txt { margin-top: 2px; } #deliver.about .about-deliver-point-section__area-txt { margin-top: 40px; } #deliver.about .about-deliver-point-section__txt { margin-bottom: 13px; } } /* .about-deliver-supporter --------------------------------------------------*/ #deliver.about .about-deliver-supporter { padding: 50px 0 60px; } #deliver.about .about-deliver-supporter-top { margin-bottom: 35px; } #deliver.about .about-deliver-supporter-top__movie { margin-bottom: 3px; } @media all and (min-width: 768px) { #deliver.about .about-deliver-supporter { padding: 120px 0; } #deliver.about .about-deliver-supporter-top { margin-bottom: 70px; } #deliver.about .about-deliver-supporter-top__info { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #deliver.about .about-deliver-supporter-top__movie { width: 48.5%; margin-bottom: 0; } #deliver.about .about-deliver-supporter-top__txt { -webkit-box-sizing: border-box; box-sizing: border-box; width: 51.5%; padding-left: 30px; } #deliver.about .about-deliver-supporter-pro__movie { margin-bottom: 30px; } } /* .about-deliver-franchise --------------------------------------------------*/ #deliver.about .about-deliver-franchise { position: relative; padding: 200px 0 0; } #deliver.about .about-deliver-franchise::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 140px; background: url(../img/about/deliver/bg_franchise01_sp.jpg) no-repeat center top/cover; } #deliver.about .about-deliver-franchise__txt { margin-bottom: 23px; } @media all and (min-width: 768px) { #deliver.about .about-deliver-franchise { padding: 470px 0 0; } #deliver.about .about-deliver-franchise::before { height: 350px; background: url(../img/about/deliver/bg_franchise01_pc.jpg) no-repeat center top/cover; } #deliver.about .about-deliver-franchise__txt { margin-bottom: 50px; } } /* ID7 お客様の安心・安全・満足のために！アクアクララの教育システム ================================================== */ /* .l-sub-img --------------------------------------------------*/ #porter-manual.about .about-porter-manual .l-sub-img__head-ja__small { font-size: 1.6rem; } @media all and (min-width: 768px) { #porter-manual.about .about-porter-manual .l-sub-img__head-ja__small { font-size: 2.6rem; } } /* .about-porter-manual-intro --------------------------------------------------*/ #porter-manual.about .about-porter-manual-intro { padding: 20px 0 50px; } #porter-manual.about .about-porter-manual-intro__txt { margin-bottom: 25px; } @media all and (min-width: 768px) { #porter-manual.about .about-porter-manual-intro { padding: 50px 0 100px; } #porter-manual.about .about-porter-manual-intro__txt { margin-bottom: 70px; text-align: center; } } /* .about-porter-manual-education --------------------------------------------------*/ #porter-manual.about .about-porter-manual-education { padding: 60px 0; } #porter-manual.about .about-porter-manual-education__img { margin: 0 -15px 20px; } #porter-manual.about .about-porter-manual-education__txt:last-of-type { margin-bottom: 28px; } #porter-manual.about .about-porter-manual-education-info { padding: 25px 25px; background: #fff; border-radius: 10px; } #porter-manual.about .about-porter-manual-education-info-list__item { padding: 20px; background: #eef7f6; border-radius: 10px; } #porter-manual.about .about-porter-manual-education-info-list__item + .about-porter-manual-education-info-list__item { margin-top: 10px; } #porter-manual.about .about-porter-manual-education-info-list__head { line-height: 1.6; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #DEDFE9; font-weight: bold; font-size: 1.6rem; } #porter-manual.about .about-porter-manual-education-info-list__num { color: #E26732; } @media all and (max-width: 360px) { #porter-manual.about .about-porter-manual-education-info { padding: 25px 15px; } #porter-manual.about .about-porter-manual-education-info-list__item { padding: 15px; } } @media all and (min-width: 768px) { #porter-manual.about .about-porter-manual-education { padding: 120px 0; } #porter-manual.about .about-porter-manual-education__img { overflow: hidden; margin: 0 0 28px; } #porter-manual.about .about-porter-manual-education__txt + .about-porter-manual-education__txt { margin-top: 32px; } #porter-manual.about .about-porter-manual-education__txt:last-of-type { margin-bottom: 75px; } #porter-manual.about .about-porter-manual-education-info { padding: 50px; } #porter-manual.about .about-porter-manual-education-info-list__item { padding: 33px 42px; } #porter-manual.about .about-porter-manual-education-info-list__item + .about-porter-manual-education-info-list__item { margin-top: 20px; } #porter-manual.about .about-porter-manual-education-info-list__head { margin-bottom: 22px; padding-bottom: 12px; font-size: 2rem; } } /* .about-porter-manual-grandprix --------------------------------------------------*/ #porter-manual.about .about-porter-manual-grandprix { padding: 55px 0 60px; } #porter-manual.about .about-porter-manual-grandprix__txt { margin-bottom: 23px; } #porter-manual.about .about-porter-manual-grandprix-section + .about-porter-manual-grandprix-section { margin-top: 65px; } #porter-manual.about .about-porter-manual-grandprix-section__txt { margin-bottom: 20px; } #porter-manual.about .about-porter-manual-grandprix-section-list__item + .about-porter-manual-grandprix-section-list__item { margin-top: 20px; } #porter-manual.about .about-porter-manual-grandprix-section-list__item.is-full { margin-top: 38px; } #porter-manual.about .about-porter-manual-grandprix-section-list__item.is-full .about-porter-manual-grandprix-section-list__img { margin: 0 -15px 13px; } #porter-manual.about .about-porter-manual-grandprix-section-list__img { margin-bottom: 15px; } #porter-manual.about .about-porter-manual-grandprix-section-list__head { line-height: 1.6; margin-bottom: 5px; color: #65bbb1; font-weight: bold; font-size: 1.5rem; text-align: center; } #porter-manual.about .about-porter-manual-grandprix-section-list__txt { font-size: 1.3rem; text-align: center; } @media all and (min-width: 768px) { #porter-manual.about .about-porter-manual-grandprix { padding: 113px 0 118px; } #porter-manual.about .about-porter-manual-grandprix__txt { margin-bottom: 50px; text-align: center; } #porter-manual.about .about-porter-manual-grandprix-section + .about-porter-manual-grandprix-section { margin-top: 70px; } #porter-manual.about .about-porter-manual-grandprix-section__movie { max-width: 530px; margin: 0 auto; } #porter-manual.about .about-porter-manual-grandprix-section__txt { margin-bottom: 28px; } #porter-manual.about .about-porter-manual-grandprix-section-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #porter-manual.about .about-porter-manual-grandprix-section-list__item { width: calc(50% - 20px); margin-right: 40px; } #porter-manual.about .about-porter-manual-grandprix-section-list__item:nth-of-type(2n) { margin-right: 0; } #porter-manual.about .about-porter-manual-grandprix-section-list__item + .about-porter-manual-grandprix-section-list__item { margin-top: 0; } #porter-manual.about .about-porter-manual-grandprix-section-list__item.is-full { width: 100%; margin: 38px 0 0; } #porter-manual.about .about-porter-manual-grandprix-section-list__item.is-full .about-porter-manual-grandprix-section-list__img { overflow: hidden; margin: 0 0 20px; } #porter-manual.about .about-porter-manual-grandprix-section-list__item.is-full .about-porter-manual-grandprix-section-list__txt { text-align: left; } #porter-manual.about .about-porter-manual-grandprix-section-list__item.is-full .about-porter-manual-grandprix-section-list__notes { margin-top: 12px; } #porter-manual.about .about-porter-manual-grandprix-section-list__img { margin-bottom: 18px; } #porter-manual.about .about-porter-manual-grandprix-section-list__head { margin-bottom: 7px; font-size: 1.8rem; } #porter-manual.about .about-porter-manual-grandprix-section-list__txt { font-size: 1.6rem; } } /* ID8 アクアクララの実績 ================================================== */ /* .about-results-intro --------------------------------------------------*/ #results.about .about-results-intro { padding: 20px 0 50px; } #results.about .about-results-intro__txt { margin-bottom: 25px; } @media all and (min-width: 768px) { #results.about .about-results-intro { padding: 50px 0 100px; } #results.about .about-results-intro__txt { margin-bottom: 70px; text-align: center; } } /* .about-results-pride --------------------------------------------------*/ #results.about .about-results-pride { padding: 50px 0; } @media all and (min-width: 768px) { #results.about .about-results-pride { padding: 95px 0 100px; } #results.about .about-results-pride__txt { text-align: center; } } /* .about-results-initiative --------------------------------------------------*/ #results.about .about-results-initiative { padding: 60px 0; } #results.about .about-results-initiative__img { margin: 0 -15px 20px; } #results.about .about-results-initiative__txt { margin-bottom: 17px; } @media all and (min-width: 768px) { #results.about .about-results-initiative { padding: 120px 0; } #results.about .about-results-initiative__img { overflow: hidden; margin: 0 0 30px; } #results.about .about-results-initiative__txt { margin-bottom: 40px; } } /* .about-results-supply --------------------------------------------------*/ #results.about .about-results-supply { padding: 60px 0; } @media all and (min-width: 768px) { #results.about .about-results-supply { padding: 120px 0; } #results.about .about-results-supply__txt { margin-bottom: 70px; text-align: center; } } /* .about-results-award --------------------------------------------------*/ #results.about .about-results-award { padding: 60px 0; } #results.about .about-results-award__img { margin: 0 -15px 20px; } #results.about .about-results-award__txt { margin-bottom: 17px; } @media all and (min-width: 768px) { #results.about .about-results-award { padding: 120px 0; } #results.about .about-results-award__img { overflow: hidden; margin: 0 0 30px; } #results.about .about-results-award__txt { margin-bottom: 40px; } } /* .about-results-childcare --------------------------------------------------*/ #results.about .about-results-childcare { padding: 60px 0; } #results.about .about-results-childcare__txt { margin-bottom: 17px; } #results.about .about-results-childcare__content { padding-left: 0; } #results.about .about-results-childcare__tit { margin-bottom: 5px; line-height: 1.6; color: #65bbb1; font-size: 1.5rem; font-weight: 700; } @media all and (min-width: 768px) { #results.about .about-results-childcare { padding: 120px 0; } #results.about .about-results-childcare__txt { margin-bottom: 40px; } #results.about .about-results-childcare__tit { margin-bottom: 10px; font-size: 1.8rem; } } /* .about-results-development --------------------------------------------------*/ #results.about .about-results-development { padding: 60px 0; } #results.about .about-results-development__img { margin: 0 -15px 20px; } #results.about .about-results-development__txt { margin-bottom: 25px; } #results.about .about-results-development__box + .about-results-development__box { margin-top: 15px; } @media all and (min-width: 768px) { #results.about .about-results-development { padding: 120px 0; } #results.about .about-results-development__img { overflow: hidden; margin: 0 0 30px; } #results.about .about-results-development__txt { margin-bottom: 50px; } #results.about .about-results-development__box + .about-results-development__box { margin-top: 40px; } } /* .about-results-campaign --------------------------------------------------*/ #results.about .about-results-campaign { padding-top: 60px; } #results.about .about-results-campaign__txt { margin-bottom: 17px; } @media all and (min-width: 768px) { #results.about .about-results-campaign { padding-top: 120px; } #results.about .about-results-campaign__txt { margin-bottom: 45px; text-align: center; } } /* ID9 動画・CMでわかるアクアクララ ================================================== */ /* .about-movie-intro --------------------------------------------------*/ #movie.about .about-movie-intro { padding: 20px 0 50px; } #movie.about .about-movie-intro__txt { margin-bottom: 25px; } @media all and (min-width: 768px) { #movie.about .about-movie-intro { padding: 50px 0 100px; } #movie.about .about-movie-intro__txt { margin-bottom: 70px; text-align: center; } } /* .about-movie-latest --------------------------------------------------*/ #movie.about .about-movie-latest { padding: 60px 0 50px; } #movie.about .about-movie-latest__movie { margin-bottom: 10px; } @media all and (min-width: 768px) { #movie.about .about-movie-latest { padding: 120px 0 105px; } #movie.about .about-movie-latest__movie { max-width: 530px; margin: 0 auto 15px; } } /* .about-movie-cm --------------------------------------------------*/ #movie.about .about-movie-cm { padding: 60px 0; } #movie.about .about-movie-cm__txt { margin-bottom: 20px; } #movie.about .about-movie-cm__btn { margin-bottom: 30px; } #movie.about .about-movie-cm-other-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #movie.about .about-movie-cm-other-list__img { margin-bottom: 10px; } #movie.about .about-movie-cm-other-list__head { font-weight: bold; line-height: 1.6; color: #65bbb1; text-align: center; margin-bottom: 5px; } #movie.about .about-movie-cm-other-list__txt { font-size: 1.2rem; } @media all and (max-width: 767px) { #movie.about .about-movie-cm-other-list__item { width: calc(50% - 5px); margin: 15px 10px 0 0; } #movie.about .about-movie-cm-other-list__item:nth-of-type(-n + 2) { margin-top: 0; } #movie.about .about-movie-cm-other-list__item:nth-of-type(2n) { margin-right: 0; } } @media all and (max-width: 360px) { #movie.about .about-movie-cm-other-list__head { font-size: 1.3rem; } #movie.about .about-movie-cm-other-list__txt { font-size: 1.1rem; } } @media all and (min-width: 768px) { #movie.about .about-movie-cm { padding: 100px 0 120px; } #movie.about .about-movie-cm__txt { margin-bottom: 48px; text-align: center; } #movie.about .about-movie-cm__btn { margin-bottom: 60px; } #movie.about .about-movie-cm-other-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #movie.about .about-movie-cm-other-list__item { width: calc(25% - 20px * 3 / 4); margin: 30px 20px 0 0; } #movie.about .about-movie-cm-other-list__item:nth-of-type(-n + 4) { margin-top: 0; } #movie.about .about-movie-cm-other-list__item:nth-of-type(4n) { margin-right: 0; } #movie.about .about-movie-cm-other-list__img { margin-bottom: 18px; } #movie.about .about-movie-cm-other-list__head { margin-bottom: 6px; font-size: 1.7rem; } #movie.about .about-movie-cm-other-list__txt { font-size: 1.4rem; } } /* ID10 アクアクララ会員様サービス（マイアクア） ================================================== */ /* .about-myaqua-intro --------------------------------------------------*/ #myaqua.about .about-myaqua-intro { padding: 20px 0 50px; } #myaqua.about .about-myaqua-intro__txt { margin-bottom: 30px; } @media all and (min-width: 768px) { #myaqua.about .about-myaqua-intro { padding: 50px 0 100px; } #myaqua.about .about-myaqua-intro__txt { margin-bottom: 63px; text-align: center; } } /* .about-myaqua-info --------------------------------------------------*/ #myaqua.about .about-myaqua-info { padding: 60px 0; } #myaqua.about .about-myaqua-info-head { width: 200px; max-width: 100%; margin: 0 auto 26px; } #myaqua.about .about-myaqua-info__txt { margin-bottom: 40px; } #myaqua.about .about-myaqua-info-use { position: relative; padding: 65px 20px 20px; background: #fff; border-radius: 10px; } #myaqua.about .about-myaqua-info-use__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: -17px; left: 50%; width: 260px; height: 58px; line-height: 1.5; background: #E26732; color: #fff; font-weight: bold; font-size: 1.4rem; text-align: center; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 30px; } #myaqua.about .about-myaqua-info-use__txt { margin-bottom: 10px; } #myaqua.about .about-myaqua-info-use__area-img { padding: 20px; background: #eef7f6; border-radius: 10px; } #myaqua.about .about-myaqua-info-use__img { width: 220px; margin: 0 auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (min-width: 768px) { #myaqua.about .about-myaqua-info { padding: 120px 0; } #myaqua.about .about-myaqua-info-head { width: 280px; margin: 0 auto 40px; } #myaqua.about .about-myaqua-info__txt { margin-bottom: 72px; text-align: center; } #myaqua.about .about-myaqua-info-use { position: relative; padding: 50px; background: #fff; border-radius: 20px; } #myaqua.about .about-myaqua-info-use__head { top: -25px; width: 440px; height: 48px; font-size: 1.8rem; } #myaqua.about .about-myaqua-info-use__txt { margin-bottom: 20px; text-align: center; } #myaqua.about .about-myaqua-info-use__area-img { padding: 28px; border-radius: 20px; } #myaqua.about .about-myaqua-info-use__img { width: 300px; } } /* .about-myaqua-service --------------------------------------------------*/ #myaqua.about .about-myaqua-service { padding: 60px 0 60px; } #myaqua.about .about-myaqua-service-list { margin-bottom: 10px; } #myaqua.about .about-myaqua-service-list__item { position: relative; padding: 86px 25px 20px; } #myaqua.about .about-myaqua-service-list__item.is-order { background: url(../img/about/myaqua/ico_service01.png) no-repeat #eef7f6 center top 22px/53px auto; } #myaqua.about .about-myaqua-service-list__item.is-cooperation { background: url(../img/about/myaqua/ico_service02.png) no-repeat #eef7f6 center top 20px/31px auto; } #myaqua.about .about-myaqua-service-list__item.is-history { background: url(../img/about/myaqua/ico_service03.png) no-repeat #eef7f6 center top 22px/53px auto; } #myaqua.about .about-myaqua-service-list__item.is-verifi { background: url(../img/about/myaqua/ico_service04.png) no-repeat #eef7f6 center top 18px/61px auto; } #myaqua.about .about-myaqua-service-list__item.is-payment { background: url(../img/about/myaqua/ico_service05.png) no-repeat #eef7f6 center top 29px/53px auto; } #myaqua.about .about-myaqua-service-list__item.is-moving { background: url(../img/about/myaqua/ico_service06.png) no-repeat #eef7f6 center top 34px/47px auto; } #myaqua.about .about-myaqua-service-list__item.is-campaign { background: url(../img/about/myaqua/ico_service07.png) no-repeat #eef7f6 center top 17px/46px auto; } #myaqua.about .about-myaqua-service-list__item.is-notice { background: url(../img/about/myaqua/ico_service08.png) no-repeat #eef7f6 center top 19px/52px auto; } #myaqua.about .about-myaqua-service-list__item + .about-myaqua-service-list__item { margin-top: 20px; } #myaqua.about .about-myaqua-service-list__head { font-weight: bold; font-size: 1.8rem; text-align: center; } #myaqua.about .about-myaqua-service-list__span { color: #ADAEB7; font-size: 1.2rem; } @media all and (min-width: 768px) { #myaqua.about .about-myaqua-service { padding: 120px 0; } #myaqua.about .about-myaqua-service-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 18px; } #myaqua.about .about-myaqua-service-list__item { -webkit-box-sizing: border-box; box-sizing: border-box; width: calc(33.33% - 32px * 2 / 3); margin: 31px 32px 0 0; padding: 95px 35px 30px; } #myaqua.about .about-myaqua-service-list__item + .about-myaqua-service-list__item { margin-top: 31px; } #myaqua.about .about-myaqua-service-list__item:nth-of-type(3n) { margin-right: 0; } #myaqua.about .about-myaqua-service-list__item:nth-of-type(-n + 3) { margin-top: 0; } #myaqua.about .about-myaqua-service-list__item.is-order { background-position: center top 30px; } #myaqua.about .about-myaqua-service-list__item.is-cooperation { background-position: center top 30px; } #myaqua.about .about-myaqua-service-list__item.is-history { background-position: center top 33px; } #myaqua.about .about-myaqua-service-list__item.is-verifi { background-position: center top 30px; } #myaqua.about .about-myaqua-service-list__item.is-payment { background-position: center top 40px; } #myaqua.about .about-myaqua-service-list__item.is-moving { background-position: center top 38px; } #myaqua.about .about-myaqua-service-list__item.is-campaign { background-position: center top 30px; } #myaqua.about .about-myaqua-service-list__item.is-notice { background-position: center top 30px; } #myaqua.about .about-myaqua-service-list__head { font-weight: bold; font-size: 1.8rem; text-align: center; } #myaqua.about .about-myaqua-service-list__span { color: #ADAEB7; font-size: 1.2rem; } } /* .about-myaqua-other --------------------------------------------------*/ #myaqua.about .about-myaqua-other { padding: 60px 0 0; } #myaqua.about .about-myaqua-other__txt { margin-bottom: 20px; } @media all and (min-width: 768px) { #myaqua.about .about-myaqua-other { padding: 120px 0 0; } #myaqua.about .about-myaqua-other__txt { margin-bottom: 48px; text-align: center; } } /* ID11 災害時、水はどうなる？ 熊本地震の事例から見る水事情と宅配について ================================================== */ /* .about-disaster-intro --------------------------------------------------*/ #disaster.about .about-disaster-intro { padding: 20px 0 50px; } #disaster.about .about-disaster-intro__txt { margin-bottom: 25px; } @media all and (min-width: 768px) { #disaster.about .about-disaster-intro { padding: 50px 0 100px; } #disaster.about .about-disaster-intro__txt { margin-bottom: 63px; text-align: center; } } /* .about-disaster-info --------------------------------------------------*/ #disaster.about .about-disaster-info { padding: 60px 0; } #disaster.about .about-disaster-info__txt { margin-bottom: 20px; } #disaster.about .about-disaster-info__set { margin-bottom: 20px; } @media all and (min-width: 768px) { #disaster.about .about-disaster-info { padding: 120px 0; } #disaster.about .about-disaster-info__txt { margin-bottom: 50px; text-align: center; } #disaster.about .about-disaster-info__set { margin-bottom: 40px; } } /* .about-disaster-occurrence --------------------------------------------------*/ #disaster.about .about-disaster-occurrence { padding: 60px 0; } #disaster.about .about-disaster-occurrence__txt { margin-bottom: 20px; } @media all and (min-width: 768px) { #disaster.about .about-disaster-occurrence { padding: 120px 0; } #disaster.about .about-disaster-occurrence__txt { margin-bottom: 50px; text-align: center; } } /* .about-disaster-case --------------------------------------------------*/ #disaster.about .about-disaster-case { padding: 60px 0; } #disaster.about .about-disaster-case__txt { margin-bottom: 20px; } #disaster.about .about-disaster-case-section { padding: 30px 25px 25px; background: #fff; border-radius: 10px; } #disaster.about .about-disaster-case-section-list__item { padding: 20px; background: #eef7f6; border-radius: 10px; } #disaster.about .about-disaster-case-section-list__item + .about-disaster-case-section-list__item { margin-top: 10px; } #disaster.about .about-disaster-case-section-list__note { color: #ADAEB7; font-size: 1.2rem; } @media all and (min-width: 768px) { #disaster.about .about-disaster-case { padding: 120px 0; } #disaster.about .about-disaster-case__txt { margin-bottom: 48px; text-align: center; } #disaster.about .about-disaster-case-section { padding: 50px; border-radius: 20px; } #disaster.about .about-disaster-case-section-list__item { padding: 35px 40px; background: #eef7f6; border-radius: 20px; } #disaster.about .about-disaster-case-section-list__item + .about-disaster-case-section-list__item { margin-top: 20px; } #disaster.about .about-disaster-case-section-list__note { font-size: 1.3rem; } } /* .about-disaster-voice --------------------------------------------------*/ #disaster.about .about-disaster-voice { padding: 60px 0; } #disaster.about .about-disaster-voice-box { margin-bottom: 40px; } #disaster.about .about-disaster-voice-box__name { margin-top: 15px; margin-bottom: 8px; color: #65bbb1; font-weight: bold; font-size: 1.5rem; text-align: center; } #disaster.about .about-disaster-voice-box__txt + .about-disaster-voice-box__txt { margin-top: 18px; } @media all and (min-width: 768px) { #disaster.about .about-disaster-voice { padding: 120px 0; } #disaster.about .about-disaster-voice-box { margin-bottom: 70px; } #disaster.about .about-disaster-voice-box__img { max-width: 410px; margin: 0 auto; } #disaster.about .about-disaster-voice-box__name { margin-top: 15px; margin-bottom: 33px; font-size: 1.8rem; } #disaster.about .about-disaster-voice-box__txt + .about-disaster-voice-box__txt { margin-top: 24px; } } /* .about-disaster-faq --------------------------------------------------*/ #disaster.about .about-disaster-faq { padding: 60px 0 50px; } #disaster.about .about-disaster-faq__txt { margin-bottom: 20px; } #disaster.about .about-disaster-faq + .c-return01 { padding-top: 0; } @media all and (min-width: 768px) { #disaster.about .about-disaster-faq { padding: 120px 0 60px; } #disaster.about .about-disaster-faq__txt { margin-bottom: 48px; text-align: center; } }