【電話受付時間】9:00~18:00 メール・LINEは24時間受付中!

リフォーム・リノベーション・不動産のことならジョイフルエーケーReハウジング

無料相談受付中!クリックで発信できます!

無料相談受付中!タップで発信できます!

【営業時間】9:00~18:00 【定休日】年中無休(1月1日・2日を除く) エクステリア・不動産事業部:毎週水曜

campaign-exterior-obihiro.css

.tc_campaign-exterior { max-width: none; } #campaign-exterior img { display: block; } /*fv section start*/ #campaign-exterior .section-fv { width: 100%; position: relative; } #campaign-exterior .section-fv .section-fv__contents { position: relative; box-sizing: border-box; //margin: 0 auto 30px; } #campaign-exterior .section-fv .section-fv__default { position: relative; width: 100%; box-sizing: border-box; text-align: center; } #campaign-exterior .section-fv .section-fv__default img { display: block; } @media (max-width: 1024px) { /*#campaign-exterior .section-fv .section-fv__contents { margin: 0 auto 3%; } #campaign-exterior .section-fv .section-fv__position-img { box-sizing: border-box; padding: 0 3%; }*/ } /*fv section end*/ /*button section start*/ #campaign-exterior .section-button { width: 100%; background: #d4f5ec; box-sizing: border-box; padding: 40px 0; position: relative; margin-bottom: 110px; } #campaign-exterior .section-button.m-cancel { margin-bottom: 0; } #campaign-exterior .section-button.margin-0 { margin-bottom: 0 !important; } #campaign-exterior .section-button .section-button__contents { width: 100%; max-width: 944px; margin: 0 auto; box-sizing: border-box; } #campaign-exterior .section-button .section-button__link { width: 100%; height: 105px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: linear-gradient(5deg, #b1ea5f, #2dc69d); color: #fff; font-size: 24px; line-height: 36px; box-sizing: border-box; font-weight: bold; border-radius: 30px; letter-spacing: 3px; box-shadow: #1a8365 0px 5px 0 0; } #campaign-exterior .section-button .section-button__link:hover { text-decoration: none; opacity: 0.6; transition: 0.3s; } #campaign-exterior .section-button .section-button__link br { display: none; } @media (max-width: 1024px) { #campaign-exterior .section-button { padding: 4% 0; margin-bottom: 11%; } #campaign-exterior .section-button .section-button__contents { padding: 0 3%; } #campaign-exterior .section-button .section-button__link { width: 100%; height: 90px; font-size: 18px; line-height: 27px; letter-spacing: 3px; } } @media (max-width: 640px) { #campaign-exterior .section-button { padding: 6% 0; margin-bottom: 11%; } #campaign-exterior .section-button .section-button__link { width: 100%; height: 70px; font-size: 15px; line-height: 20px; border-radius: 20px; text-align: center; box-shadow: #1a8365 0px 3px 0 0; } #campaign-exterior .section-button .section-button__link br { display: inline-block; } } /*button section end*/ /*voice section start*/ #campaign-exterior .section-voice_ex { width: 100%; box-sizing: border-box; position: relative; } #campaign-exterior .section-voice_ex .section-voice_ex__contents { width: 100%; background: linear-gradient(#1ec599, #d4f5ec); box-sizing: border-box; padding: 60px 0; } #campaign-exterior .section-voice_ex .section-voice_ex__list { width: 100%; max-width: 944px; margin: 0 auto; box-sizing: border-box; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item { width: 100%; background: #fff; border-radius: 30px 0 30px 0; box-sizing: border-box; padding: 40px 50px; position: relative; box-shadow: #1bc597 0px 10px 0 0; margin-bottom: 40px; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item:last-child { margin-bottom: 0; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__wrap { width: 100%; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__img { width: 140px; margin-right: 40px; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text { width: calc(100% - 180px); } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text__name { font-size: 16px; line-height: 24px; font-weight: bold; color: #000; margin-bottom: 20px; letter-spacing: 6px; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text__title { font-size: 20px; line-height: 30px; font-weight: bold; color: #1bc597; margin-bottom: 20px; letter-spacing: 6px; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text__description { font-size: 16px; line-height: 30px; font-weight: 400; color: #000; letter-spacing: 2px; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text__sp-description { font-size: 12px; line-height: 1.7em; font-weight: 400; color: #000; display: none; } #campaign-exterior .section-voice_ex .section-voice_ex__heading { width: 100%; max-width: 944px; margin: 0 auto 40px; box-sizing: border-box; } @media (max-width: 1024px) { #campaign-exterior .section-voice_ex .section-voice_ex__contents { padding: 6% 0; } #campaign-exterior .section-voice_ex .section-voice_ex__list { padding: 0 3%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item { border-radius: 20px 0 20px 0; padding: 5% 6%; margin-bottom: 4%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__img { width: 140px; margin-right: 4%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text { width: calc(96% - 140px); } #campaign-exterior .section-voice_ex .section-voice_ex__heading { margin: 0 auto 4%; padding: 0 3%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text__name { font-size: 13px; line-height: 21px; margin-bottom: 2%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text__title { font-size: 16px; line-height: 24px; margin-bottom: 2%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text__description { font-size: 13px; line-height: 21px; } } @media (max-width: 640px) { #campaign-exterior .section-voice_ex .section-voice_ex__contents { padding: 7% 0; } #campaign-exterior .section-voice_ex .section-voice_ex__heading { margin: 0 auto 6%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item { border-radius: 20px 0 20px 0; padding: 6.5% 5.5%; border-radius: 20px 0 20px 0; box-shadow: #1bc597 0px 5px 0 0; margin-bottom: 5%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__wrap { margin-bottom: 4%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__img { width: 28%; margin-right: 5%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text { width: 67%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text__name { font-size: 10px; line-height: 15px; margin-bottom: 3%; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text__title { font-size: 14px; line-height: 21px; margin-bottom: 0; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text__description { display: none; } #campaign-exterior .section-voice_ex .section-voice_ex__list__item__text__sp-description { display: block; } } /*voice section end*/ /*campaign section start*/ #campaign-exterior .section-campaign { width: 100%; box-sizing: border-box; position: relative; } #campaign-exterior .section-campaign .section-campaign__contents { width: 100%; max-width: 1024px; margin: 0 auto; } #campaign-exterior .section-campaign .section-campaign__heading { width: 100%; max-width: 944px; margin: 0 auto 40px; box-sizing: border-box; } #campaign-exterior .section-campaign .section-campaign__box-wrap { width: 100%; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; position: relative; margin-bottom: 60px; } #campaign-exterior .section-campaign .section-campaign__box__position-img { position: absolute; right: 0; z-index: 1; top: 50%; transform: translateY(-50%); } #campaign-exterior .section-campaign .section-campaign__box-wrap:nth-child(odd) { -webkit-box-pack: flex-end; -ms-flex-pack: flex-end; justify-content: flex-end; } #campaign-exterior .section-campaign .section-campaign__box-wrap:nth-child(odd) .section-campaign__box__position-img { right: auto; left: 0; } #campaign-exterior .section-campaign .section-campaign__box-wrap:nth-child(odd) .section-campaign__box__2col { margin-bottom: 0; } #campaign-exterior .section-campaign .section-campaign__box { width: 100%; max-width: 800px; box-shadow: #999999 10px 10px 0 0; border-radius: 0 30px 0 30px; overflow: hidden; position: relative; z-index: 2; } #campaign-exterior .section-campaign .section-campaign__box__img { width: 100%; } #campaign-exterior .section-campaign .section-campaign__box__img img { width: 100%; height: 350px; object-fit: cover; font-family: 'object-fit: cover;' !important; vertical-align: middle; display: inline-block; } #campaign-exterior .section-campaign .section-campaign__box h3 { width: 100%; background: #1bc597; height: 60px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 24px; line-height: 46px; font-weight: 900; color: #fff; font-family: 'Noto Sans JP', sans-serif; letter-spacing: 3px; } #campaign-exterior .section-campaign .section-campaign__box__bottom { box-sizing: border-box; padding-left: 30px; padding-bottom: 30px; background: #fff; &.v2 { padding-bottom: 0; @media screen and(max-width:767px) { padding-bottom: 4%; } } } #campaign-exterior .section-campaign .section-campaign__box__2col { width: 100%; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 25px; } #campaign-exterior .section-campaign .section-campaign__box__2col__text { width: calc(100% - 300px); border-bottom: 2px solid #999999; } #campaign-exterior .section-campaign .section-campaign__box__2col__text.no-border { border: none; } #campaign-exterior .section-campaign .section-campaign__box__2col__text h4 { width: 100%; font-size: 20px; line-height: 30px; color: #000; font-weight: bold; border-left: 10px solid #1bc597; padding-left: 25px; box-sizing: border-box; margin: 25px 0; letter-spacing: 2px; } #campaign-exterior .section-campaign .section-campaign__box__2col__text h4 .sp_only { display: none; } #campaign-exterior .section-campaign .section-campaign__box__2col__text__description { width: 100%; font-size: 1.7rem; line-height: 34px; color: #1bc597; font-weight: 500; letter-spacing: 0; } #campaign-exterior .section-campaign .section-campaign__box__2col__img { width: 280px; margin-left: 20px; } #campaign-exterior .section-campaign .section-campaign__box__text { width: 100%; box-sizing: border-box; padding-right: 25px; } #campaign-exterior .section-campaign .section-campaign__box__text.sp-only { display: none; } #campaign-exterior .section-campaign .section-campaign__box__text p { width: 100%; font-size: 16px; line-height: 26px; color: #000; font-weight: 400; letter-spacing: 1px; } #campaign-exterior .section-campaign .section-campaign__box__list { width: 100%; padding-right: 25px; margin-top: 25px; box-sizing: border-box; } #campaign-exterior .section-campaign .section-campaign__box__list__item { width: 100%; font-size: 16px; line-height: 34px; color: #000; font-weight: 400; margin-bottom: 10px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; letter-spacing: 1px; } #campaign-exterior .section-campaign .section-campaign__box__list__item__text { width: calc(100% - 100px); } #campaign-exterior .section-campaign .section-campaign__box__list__item__label { display: inline-block; margin-right: 15px; text-align: center; width: 80px; font-size: 16px; line-height: 16px; color: #fff; background: #1bc597; box-sizing: border-box; padding: 8px; font-weight: bold; } #campaign-exterior .section-campaign .section-campaign__option { width: 100%; background: #d4f5ec; box-sizing: border-box; padding: 35px; margin-bottom: 80px; margin-top: 90px; } #campaign-exterior .section-campaign .section-campaign__option__heading { margin-bottom: 30px; margin-top: -70px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #campaign-exterior .section-campaign .section-campaign__option__heading h3 { width: 400px; height: 70px; background: #1bc597; border-radius: 20px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 20px; line-height: 24px; font-weight: bold; color: #fff; letter-spacing: 3px; } #campaign-exterior .section-campaign .section-campaign__option__list { width: 100%; } #campaign-exterior .section-campaign .section-campaign__option__list__item { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; box-sizing: border-box; padding-top: 20px; margin-top: 20px; border-top: 1px solid #999999; } #campaign-exterior .section-campaign .section-campaign__option__list__item:first-child { padding-top: 0; margin-bottom: 0; border: none; } #campaign-exterior .section-campaign .section-campaign__option__list__item__img { width: 160px; margin-right: 40px; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text { width: calc(100% - 200px); } #campaign-exterior .section-campaign .section-campaign__option__list__item__text h4 { font-size: 20px; line-height: 30px; font-weight: bold; color: #000; margin-bottom: 15px; border-left: 10px solid #1bc597; padding-left: 20px; box-sizing: border-box; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text p { font-size: 16px; line-height: 34px; font-weight: 400; color: #000; margin-bottom: 3px; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text p.indent { padding-left: 48px; text-indent: -48px; box-sizing: border-box; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text-bold { font-weight: bold; } @media (max-width: 1024px) { #campaign-exterior .section-campaign .section-campaign__contents { box-sizing: border-box; padding: 0 3%; } #campaign-exterior .section-campaign .section-campaign__heading { padding: 0 3%; } #campaign-exterior .section-campaign .section-campaign__box-wrap { margin-bottom: 9%; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } #campaign-exterior .section-campaign .section-campaign__box__position-img { position: relative; right: auto; top: auto; transform: none; width: 25vw; margin-bottom: -5vw; } #campaign-exterior .section-campaign .section-campaign__box-wrap:nth-child(odd) .section-campaign__box__position-img { right: auto; left: auto; } #campaign-exterior .section-campaign .section-campaign__box { max-width: 800px; box-shadow: #999999 10px 10px 0 0; border-radius: 0 30px 0 30px; } #campaign-exterior .section-campaign .section-campaign__box__img img { height: 35vw; } #campaign-exterior .section-campaign .section-campaign__box h3 { height: 50px; font-size: 20px; line-height: 36px; } #campaign-exterior .section-campaign .section-campaign__box__bottom { padding-left: 3.5%; padding-bottom: 3.5%; } #campaign-exterior .section-campaign .section-campaign__box__2col { margin-bottom: 3%; } #campaign-exterior .section-campaign .section-campaign__box__2col__text { width: 65%; border-bottom: 2px solid #999999; } #campaign-exterior .section-campaign .section-campaign__box__2col__text { width: 65%; border-bottom: 2px solid #999999; } #campaign-exterior .section-campaign .section-campaign__box__2col__text h4 { font-size: 18px; line-height: 27px; border-left: 7px solid #1bc597; padding-left: 3%; margin: 3% 0; } #campaign-exterior .section-campaign .section-campaign__box__2col__text__description { font-size: 16px; line-height: 26px; } #campaign-exterior .section-campaign .section-campaign__box__2col__img { width: 32%; margin-left: 3%; } #campaign-exterior .section-campaign .section-campaign__box__text { padding-right: 3.5%; } #campaign-exterior .section-campaign .section-campaign__box__text p { font-size: 14px; line-height: 23px; } #campaign-exterior .section-campaign .section-campaign__box__list { width: 100%; padding-right: 3%; margin-top: 3.5%; } #campaign-exterior .section-campaign .section-campaign__box__list__item { font-size: 14px; line-height: 27px; margin-bottom: 1.5%; } #campaign-exterior .section-campaign .section-campaign__box__list__item__text { width: calc(100% - 7px); } #campaign-exterior .section-campaign .section-campaign__box__list__item__label { margin-right: 10px; font-size: 14px; line-height: 14px; padding: 7px; width: 60px; } #campaign-exterior .section-campaign .section-campaign__option { padding: 4%; margin-bottom: 8%; margin-top: 12%; } #campaign-exterior .section-campaign .section-campaign__option__heading { margin-bottom: 4%; margin-top: -60px; } #campaign-exterior .section-campaign .section-campaign__option__heading h3 { width: 300px; height: 60px; border-radius: 20px; font-size: 16px; line-height: 21px; } #campaign-exterior .section-campaign .section-campaign__option__list__item { padding-top: 2.5%; margin-top: 2.5%; } #campaign-exterior .section-campaign .section-campaign__option__list__item__img { width: 16%; margin-right: 4%; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text { width: 80%; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text h4 { font-size: 18px; line-height: 26px; margin-bottom: 2%; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text p { font-size: 14px; line-height: 30px; margin-bottom: 0.7%; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text p.indent { padding-left: 42px; text-indent: -42px; box-sizing: border-box; } } @media (max-width: 640px) { #campaign-exterior .section-campaign .section-campaign__box { box-shadow: #999999 5px 5px 0 0; border-radius: 0 20px 0 20px; } #campaign-exterior .section-campaign .section-campaign__box__img img { height: 40vw; } #campaign-exterior .section-campaign .section-campaign__box h3 { height: 35px; font-size: 15px; line-height: 23px; } #campaign-exterior .section-campaign .section-campaign__box__position-img { width: 24vw; margin-bottom: -6vw; } #campaign-exterior .section-campaign .section-campaign__box__bottom { padding-left: 4%; padding-bottom: 4%; } #campaign-exterior .section-campaign .section-campaign__box__2col { margin-bottom: 4%; } #campaign-exterior .section-campaign .section-campaign__box__2col__text { width: 55%; border-bottom: none; } #campaign-exterior .section-campaign .section-campaign__box__2col__text h4 { font-size: 12px; line-height: 1.7em; border-left: 5px solid #1bc597; padding-left: 4%; margin: 4% 0; } #campaign-exterior .section-campaign .section-campaign__box__2col__text h4 .pc_only { display: none; } #campaign-exterior .section-campaign .section-campaign__box__2col__text h4 .sp_only { display: inline-block; } #campaign-exterior .section-campaign .section-campaign__box__2col__text__description { font-size: 10px; line-height: 17px; } #campaign-exterior .section-campaign .section-campaign__box__2col__text__description br { display: none; } #campaign-exterior .section-campaign .section-campaign__box__2col__img { width: 42%; margin-left: 3%; } #campaign-exterior .section-campaign .section-campaign__box__text { padding-right: 4%; } #campaign-exterior .section-campaign .section-campaign__box__text.sp-only { display: block; } #campaign-exterior .section-campaign .section-campaign__box__text.pc-only { display: none; } #campaign-exterior .section-campaign .section-campaign__box__text p { font-size: 12px; line-height: 19px; padding-top: 4%; border-top: 1px solid #999999; box-sizing: border-box; } #campaign-exterior .section-campaign .section-campaign__box__text p.no-border { border: none !important; } #campaign-exterior .section-campaign .section-campaign__box__text .pc_only { display: none; } #campaign-exterior .section-campaign .section-campaign__box__list { width: 100%; padding-right: 4%; margin-top: 4%; } #campaign-exterior .section-campaign .section-campaign__box__list__item { font-size: 12px; line-height: 22px; margin-bottom: 3%; } #campaign-exterior .section-campaign .section-campaign__box__list__item__text { width: calc(100% - 65px); } #campaign-exterior .section-campaign .section-campaign__box__list__item__label { margin-right: 7px; font-size: 12px; line-height: 1.7em; padding: 4px 7px; width: 55px; } #campaign-exterior .section-campaign .section-campaign__heading { margin: 0 auto 6%; } #campaign-exterior .section-campaign .section-campaign__option__heading { margin-bottom: 6%; margin-top: -8%; } #campaign-exterior .section-campaign .section-campaign__option__heading h3 { width: 250px; height: 40px; border-radius: 15px; font-size: 15px; line-height: 1.7em; } #campaign-exterior .section-campaign .section-campaign__option { padding: 4%; margin-bottom: 6%; margin-top: 12%; } #campaign-exterior .section-campaign .section-campaign__option__list__item { padding-top: 3.5%; margin-top: 3.5%; } #campaign-exterior .section-campaign .section-campaign__option__list__item__img { width: 21%; margin-right: 4%; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text { width: 75%; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text h4 { font-size: 12px; line-height: 15px; margin-bottom: 2.5%; border-left: 5px solid #1bc597; padding-left: 10px; box-sizing: border-box; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text p { font-size: 10px; line-height: 17px; margin-bottom: 1.5%; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text p.indent { padding-left: 0; text-indent: 0; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text-bold { width: 100px; } #campaign-exterior .section-campaign .section-campaign__option__list__item__text-description { width: calc(100% - 100px); } } @media (max-width: 375px) { #campaign-exterior .section-campaign .section-campaign__box__2col__text h4 { font-size: 11px; line-height: 16px; } } /*campaign section end*/ /*works section start*/ #campaign-exterior .section-works { width: 100%; box-sizing: border-box; position: relative; margin-bottom: 60px; } #campaign-exterior .section-works .section-works__contents { width: 100%; max-width: 980px; margin: 0 auto; } #campaign-exterior .section-works .section-works__heading { width: 100%; max-width: 944px; margin: 0 auto 90px; box-sizing: border-box; } #campaign-exterior .section-works .section-works__case { background: #efefef; width: 100%; box-sizing: border-box; padding: 40px 30px; position: relative; margin-bottom: 90px; } #campaign-exterior .section-works .section-works__case.no-margin { margin-bottom: 0 !important; } #campaign-exterior .section-works .section-works__sub-heading { margin-bottom: 30px; margin-top: -70px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #campaign-exterior .section-works .section-works__sub-heading h3 { width: 400px; height: 70px; background: #1bc597; border-radius: 20px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 18px; line-height: 24px; font-weight: 400; color: #fff; letter-spacing: 3px; } #campaign-exterior .section-works .section-works__case h4 { font-size: 18px; font-weight: bold; color: #000; margin-bottom: 20px; text-align: center; letter-spacing: 3px; } #campaign-exterior .section-works .section-works__case__slider-wrap { width: 100%; box-sizing: border-box; padding: 0 40px; margin-bottom: 40px; } #campaign-exterior .section-works .section-works__case__slider { opacity: 0; width: 100%; } #campaign-exterior .section-works .section-works__case__slider.slick-initialized { opacity: 1; } #campaign-exterior .section-works .section-works__case__slider__item { position: relative; width: 100%; } #campaign-exterior .section-works .section-works__case__slider__item img { height: 475px; } #campaign-exterior .section-works .section-works__case__slider .slick-track { margin-bottom: 25px; } #campaign-exterior .section-works .section-works__case__slider .slick-dots { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; bottom: auto; } #campaign-exterior .section-works .section-works__case__slider .slick-dots li { width: 70px; height: 70px; margin-right: 15px; margin-bottom: 10px; } #campaign-exterior .section-works .section-works__case__slider .slick-dots li button:before { display: none; } #campaign-exterior .section-works .section-works__case__slider .slick-dots li:last-child { margin-right: 0; } #campaign-exterior .section-works .section-works__case__slider .slick-dots li button { border: none; background: none; display: inline-block; height: 70px; width: 70px; } #campaign-exterior .section-works .section-works__case__slider__thumb { width: 70px; height: 70px; display: inline-block; background-repeat: no-repeat; background-size: cover; background-position: center; } #campaign-exterior .section-works .slider01 .slick-dots li:nth-of-type(1) .section-works__case__slider__thumb { background-image: url('../../../../images/campaign-exterior/works_slider_img_01_pc.jpg'); } #campaign-exterior .section-works .slider01 .slick-dots li:nth-of-type(2) .section-works__case__slider__thumb { background-image: url('../../../../images/campaign-exterior/works_slider_img_02_pc.jpg'); } #campaign-exterior .section-works .slider01 .slick-dots li:nth-of-type(3) .section-works__case__slider__thumb { background-image: url('../../../../images/campaign-exterior/works_slider_img_03_pc.jpg'); } #campaign-exterior .section-works .slider01 .slick-dots li:nth-of-type(4) .section-works__case__slider__thumb { background-image: url('../../../../images/campaign-exterior/works_slider_img_04_pc.jpg'); } #campaign-exterior .section-works .slider02 .slick-dots li:nth-of-type(1) .section-works__case__slider__thumb { background-image: url('../../../../images/campaign-exterior/works_slider_img_05_pc.jpg'); } #campaign-exterior .section-works .slider02 .slick-dots li:nth-of-type(2) .section-works__case__slider__thumb { background-image: url('../../../../images/campaign-exterior/works_slider_img_06_pc.jpg'); } #campaign-exterior .section-works .slider02 .slick-dots li:nth-of-type(3) .section-works__case__slider__thumb { background-image: url('../../../../images/campaign-exterior/works_slider_img_07_pc.jpg'); } #campaign-exterior .section-works .slider02 .slick-dots li:nth-of-type(4) .section-works__case__slider__thumb { background-image: url('../../../../images/campaign-exterior/works_slider_img_08_pc.jpg'); } #campaign-exterior .section-works .slider03 .slick-dots li:nth-of-type(1) .section-works__case__slider__thumb { background-image: url('../../../../images/campaign-exterior-obihiro/works_slider_img_09_pc.jpg'); } #campaign-exterior .section-works .slider03 .slick-dots li:nth-of-type(2) .section-works__case__slider__thumb { background-image: url('../../../../images/campaign-exterior-obihiro/works_slider_img_10_pc.jpg'); } #campaign-exterior .section-works .slider03 .slick-dots li:nth-of-type(3) .section-works__case__slider__thumb { background-image: url('../../../../images/campaign-exterior-obihiro/works_slider_img_11_pc.jpg'); } #campaign-exterior .section-works .section-works__case__slider .slick-dots li.slick-active .section-works__case__slider__thumb { opacity: 0.6; } #campaign-exterior .section-works .section-works__case__slider .slick-arrow { width: 20px; height: 20px; position: absolute; z-index: 1; } #campaign-exterior .section-works .section-works__case__slider .slick-arrow::after { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(180deg); width: 20px; height: 20px; background: url('../../../../images/campaign-exterior/slide-arrow.png') no-repeat; background-size: contain; content: ''; display: inline-block; position: absolute; border: 2px solid #000; border-radius: 50%; } #campaign-exterior .section-works .section-works__case__slider .slick-arrow.prevbtn { bottom: 35px; left: -35px; } #campaign-exterior .section-works .section-works__case__slider .slick-arrow.nextbtn { bottom: 35px; right: -35px; } #campaign-exterior .section-works .section-works__case__slider .slick-arrow.prevbtn::after { transform: translate(-50%, -50%); } #campaign-exterior .section-works .section-works__case__concept { background: #fff; border-radius: 5px; box-sizing: border-box; padding: 30px; } #campaign-exterior .section-works .section-works__case__concept p { font-weight: 400; color: #000; font-size: 16px; line-height: 24px; text-align: left; } @media (max-width: 1024px) { #campaign-exterior .section-works { margin-bottom: 6%; } #campaign-exterior .section-works .section-works__heading { margin: 0 auto 8%; padding: 0 3%; box-sizing: border-box; } #campaign-exterior .section-works .section-works__heading img { margin-bottom: 2.5%; } #campaign-exterior .section-works .section-works__heading p { font-size: 18px; line-height: 22px; margin-top: 4%; } #campaign-exterior .section-works .section-works__sub-heading { margin-bottom: 4%; margin-top: -60px; } #campaign-exterior .section-works .section-works__sub-heading h3 { width: 300px; height: 60px; border-radius: 20px; font-size: 16px; line-height: 21px; } #campaign-exterior .section-works .section-works__case h4 { font-size: 16px; margin-bottom: 2.5%; } #campaign-exterior .section-works .section-works__case__slider-wrap { padding: 0 20px; margin-bottom: 4%; } #campaign-exterior .section-works .section-works__case__slider .slick-track { margin-bottom: 15px; } #campaign-exterior .section-works .section-works__case__slider .slick-dots li { width: 60px; height: 60px; margin-right: 10px; } #campaign-exterior .section-works .section-works__case__slider .slick-dots li:last-child { margin-right: 0; } #campaign-exterior .section-works .section-works__case__slider .slick-dots li button { height: 60px; width: 60px; } #campaign-exterior .section-works .section-works__case__slider__thumb { width: 60px; height: 60px; } #campaign-exterior .section-works .section-works__case { padding: 4% 3%; margin-bottom: 10%; } #campaign-exterior .section-works .section-works__case__slider__item img { height: 48vw; } #campaign-exterior .section-works .section-works__case__slider .slick-arrow.prevbtn { left: -30px; } #campaign-exterior .section-works .section-works__case__slider .slick-arrow.nextbtn { right: -30px; } #campaign-exterior .section-works .section-works__case__concept { padding: 3.5%; } #campaign-exterior .section-works .section-works__case__outline { padding: 3.5%; } #campaign-exterior .section-works .section-works__case__concept p { font-size: 14px; line-height: 21px; } #campaign-exterior .section-works .section-works__heading { margin: 0 auto 9%; } } @media (max-width: 640px) { #campaign-exterior .section-works { margin-bottom: 6%; } #campaign-exterior .section-works .section-works__heading { margin: 0 auto 11%; padding: 0 6%; box-sizing: border-box; } #campaign-exterior .section-works .section-works__heading img { margin-bottom: 3%; } #campaign-exterior .section-works .section-works__heading p { font-size: 14px; line-height: 21px; margin-top: 6%; } #campaign-exterior .section-works .section-works__sub-heading { margin-bottom: 4%; margin-top: -8%; } #campaign-exterior .section-works .section-works__sub-heading h3 { width: 200px; height: 40px; border-radius: 15px; font-size: 12px; line-height: 1.7em; } #campaign-exterior .section-works .section-works__case h4 { font-size: 13px; margin-bottom: 2%; } #campaign-exterior .section-works .section-works__heading p br { display: inline-block; } #campaign-exterior .section-works .section-works__case__slider-wrap { padding: 0 3%; box-sizing: border-box; margin-bottom: 3%; } #campaign-exterior .section-works .section-works__case { padding: 4% 3%; margin-bottom: 13%; } #campaign-exterior .section-works .section-works__case__slider__item img { height: 55vw; } #campaign-exterior .section-works .section-works__case__slider .slick-dots { box-sizing: border-box; padding: 0 25px; } #campaign-exterior .section-works .section-works__case__slider .slick-dots li { width: 40px; height: 40px; margin-right: 10px; } #campaign-exterior .section-works .section-works__case__slider .slick-dots li:last-child { margin-right: 0; } #campaign-exterior .section-works .section-works__case__slider .slick-dots li button { height: 40px; width: 40px; } #campaign-exterior .section-works .section-works__case__slider__thumb { width: 40px; height: 40px; } #campaign-exterior .section-works .section-works__case__slider .slick-arrow::after { width: 12px; height: 12px; background: url('../../../../images/campaign-exterior/slide-arrow.png') no-repeat; background-size: contain; border: 1px solid #000; background-color: #fff; border-radius: 50%; } #campaign-exterior .section-works .section-works__case__slider .slick-arrow.prevbtn { left: 0; bottom: 20px; } #campaign-exterior .section-works .section-works__case__slider .slick-arrow.nextbtn { right: 0; bottom: 20px; } #campaign-exterior .section-works .section-works__case__concept__wrap { box-sizing: border-box; padding: 0; } #campaign-exterior .section-works .section-works__case__concept { padding: 4.5%; text-align: center; } #campaign-exterior .section-works .section-works__heading { margin: 0 auto 10%; } #campaign-exterior .section-works .section-works__case__concept p { font-size: 12px; line-height: 1.7em; } } /*works section end*/ /*reason section start*/ #campaign-exterior .section-reason_ex { width: 100%; box-sizing: border-box; position: relative; } #campaign-exterior .section-reason_ex .section-reason_ex__contents { width: 100%; max-width: 900px; margin: 0 auto 0; } #campaign-exterior .section-reason_ex .section-reason_ex__heading { width: 100%; max-width: 944px; margin: 0 auto 40px; box-sizing: border-box; } #campaign-exterior .section-reason_ex .section-reason_ex__box { width: 100%; margin-bottom: 60px; } #campaign-exterior .section-reason_ex .section-reason_ex__box h3 { width: 100%; height: 120px; border-radius: 70px; background: #ffb901; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-size: 24px; line-height: 36px; font-weight: bold; color: #000; margin-bottom: 30px; letter-spacing: 6px; } #campaign-exterior .section-reason_ex .section-reason_ex__box h3 br.sp-only { display: none; } #campaign-exterior .section-reason_ex .section-reason_ex__3col { width: 100%; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; } #campaign-exterior .section-reason_ex .section-reason_ex__3col__item { width: calc(33.3% - 20px); margin-right: 30px; text-align: center; } #campaign-exterior .section-reason_ex .section-reason_ex__3col__item:nth-child(3) { margin-right: 0; } #campaign-exterior .section-reason_ex .section-reason_ex__text { width: 100%; box-sizing: border-box; padding: 0 45px; font-size: 18px; font-weight: 400; line-height: 27px; color: #000; letter-spacing: 3px; } @media (max-width: 1024px) { #campaign-exterior .section-reason_ex .section-reason_ex__heading { margin: 0 auto 4%; padding: 0 3%; } #campaign-exterior .section-reason_ex .section-reason_ex__contents { box-sizing: border-box; padding: 0 3%; } #campaign-exterior .section-reason_ex .section-reason_ex__box { margin-bottom: 6%; } #campaign-exterior .section-reason_ex .section-reason_ex__box h3 { height: 100px; border-radius: 70px; font-size: 18px; line-height: 30px; margin-bottom: 3%; } #campaign-exterior .section-reason_ex .section-reason_ex__3col { margin-bottom: 3%; } #campaign-exterior .section-reason_ex .section-reason_ex__3col__item { width: 31.3%; margin-right: 3%; } #campaign-exterior .section-reason_ex .section-reason_ex__text { padding: 0 4%; font-size: 16px; line-height: 24px; } } @media (max-width: 640px) { #campaign-exterior .section-reason_ex .section-reason_ex__heading { margin: 0 auto 6%; } #campaign-exterior .section-reason_ex .section-reason_ex__box { margin-bottom: 7%; } #campaign-exterior .section-reason_ex .section-reason_ex__box h3 { height: 90px; border-radius: 70px; font-size: 15px; line-height: 23px; margin-bottom: 3%; } #campaign-exterior .section-reason_ex .section-reason_ex__box h3 br.sp-only { display: inline-block; } #campaign-exterior .section-reason_ex .section-reason_ex__3col { margin-bottom: 4%; } #campaign-exterior .section-reason_ex .section-reason_ex__3col__item { width: 31.3%; margin-right: 3%; } #campaign-exterior .section-reason_ex .section-reason_ex__text { padding: 0 3%; font-size: 12px; line-height: 1.7em; } } @media (max-width: 375px) { #campaign-exterior .section-reason_ex .section-reason_ex__box h3 { letter-spacing: 3px; font-size: 13px; line-height: 19px; height: 70px; } } /*reason section end*/ /*qa section start*/ #campaign-exterior .section-qa { width: 100%; box-sizing: border-box; position: relative; } #campaign-exterior .section-qa .section-qa__contents { width: 100%; max-width: 980px; margin: 0 auto 60px; } #campaign-exterior .section-qa .section-qa__heading { width: 100%; max-width: 944px; margin: 0 auto 40px; box-sizing: border-box; } #campaign-exterior .section-qa .section-qa__box { width: 100%; background: #efefef; padding: 60px 40px; box-sizing: border-box; border-radius: 30px; } #campaign-exterior .section-qa .section-qa__box__item { margin-bottom: 60px; } #campaign-exterior .section-qa .section-qa__box__item:last-child { margin-bottom: 0; } #campaign-exterior .section-qa .section-qa__box h3 { width: 100%; height: 60px; border-radius: 70px; background: #1bc597; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-size: 18px; line-height: 24px; font-weight: bold; color: #fff; margin-bottom: 30px; } #campaign-exterior .section-qa .section-qa__box h3 br.sp-only { display: none; } #campaign-exterior .section-qa .section-qa__box__item__img-text { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } #campaign-exterior .section-qa .section-qa__box__item__img-text__img { text-align: center; width: 300px; margin-right: 30px; } #campaign-exterior .section-qa .section-qa__box__item__img-text__text { width: calc(100% - 330px); font-size: 16px; line-height: 30px; font-family: 'Noto Sans JP'; font-weight: 300; color: #000; } @media (max-width: 1024px) { #campaign-exterior .section-qa .section-qa__heading { margin: 0 auto 4%; padding: 0 3%; } #campaign-exterior .section-qa .section-qa__contents { box-sizing: border-box; padding: 0 3%; margin: 0 auto 6%; } #campaign-exterior .section-qa .section-qa__box { padding: 7% 5%; } #campaign-exterior .section-qa .section-qa__box__item { margin-bottom: 6%; } #campaign-exterior .section-qa .section-qa__box h3 { height: 50px; border-radius: 70px; font-size: 15px; line-height: 21px; margin-bottom: 3%; } #campaign-exterior .section-qa .section-qa__box__item__img-text { -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; } #campaign-exterior .section-qa .section-qa__box__item__img-text__img { text-align: center; width: 32%; margin-right: 3%; } #campaign-exterior .section-qa .section-qa__box__item__img-text__text { width: 65%; font-size: 13px; line-height: 25px; font-weight: 300; color: #000; } } @media (max-width: 640px) { #campaign-exterior .section-qa .section-qa__contents { padding: 0; margin: 0 auto 6%; } #campaign-exterior .section-qa .section-qa__heading { margin: 0 auto 6%; } #campaign-exterior .section-qa .section-qa__box { padding: 6% 3%; border-radius: 20px; } #campaign-exterior .section-qa .section-qa__box__item { margin-bottom: 7%; } #campaign-exterior .section-qa .section-qa__box h3 { height: auto; border-radius: 70px; font-size: 14px; line-height: 1.7em; margin-bottom: 4%; padding: 4%; box-sizing: border-box; } #campaign-exterior .section-qa .section-qa__box h3 br.sp-only { display: inline-block; } #campaign-exterior .section-qa .section-qa__box__item__img-text { box-sizing: border-box; padding: 0 3%; } #campaign-exterior .section-qa .section-qa__box__item__img-text__img { text-align: center; width: 100%; margin-right: 0; margin-bottom: 4%; padding: 0 10%; box-sizing: border-box; } #campaign-exterior .section-qa .section-qa__box__item__img-text__text { width: 100%; font-size: 11px; line-height: 21px; font-weight: 300; color: #000; } } /*qa section end*/ /* contact section start */ /*#campaign-exterior .section-contact { padding-top: 160px; margin-top: -80px; box-sizing: border-box; }*/ @media (max-width: 640px) { #campaign-exterior .section-contact { padding-top: 16vw; margin-top: -8vw; box-sizing: border-box; } } /* contact section end */ @media all and (-ms-high-contrast: none) { *::-ms-backdrop, .section-works__case__concept__button { display: none !important; } } /*scroll*/ @media (max-width: 640px) { .x-scroll { white-space: normal; overflow-x: scroll; overflow-y: hidden; } .x-scroll::-webkit-scrollbar { width: 5px; height: 10px; } .x-scroll::-webkit-scrollbar-button { width: 0px; height: 0px; } .x-scroll::-webkit-scrollbar-thumb { background: #999999; border-radius: 5px; } .x-scroll::-webkit-scrollbar-thumb:hover { background: #999999; } .x-scroll::-webkit-scrollbar-thumb:active { background: #999999; } .x-scroll::-webkit-scrollbar-track { background: #efefef; border: 0px none #efefef; border-radius: 5px; } .x-scroll::-webkit-scrollbar-track:hover { background: #efefef; } .x-scroll::-webkit-scrollbar-track:active { background: #efefef; } .x-scroll::-webkit-scrollbar-corner { background: transparent; } } /* scroll end */ /*20220318form*/ /*#campaign-exterior .wpcf7c-elm-step1 h4 { color: #000 !important; border: 0 solid #d2b200; border-left-width: 3px; background: #fff !important; font-size: 14px; text-align: left; padding: 0 2%; margin: 2%; box-sizing: border-box; }*/ /*form*/ /*#campaign-exterior .section-contact #layout02 { display: none; } #campaign-exterior .section-contact h3 { color: #000 !important; background: none !important; border-bottom: 4px dotted #ad8277 !important; font-size: 22px; font-weight: normal; padding: 2% !important; margin: 0 auto 2%; line-height: 1.1em; box-sizing: border-box; } #campaign-exterior .section-contact .form { max-width: 980px; } #campaign-exterior .section-contact .form * { border: 0; line-height: 1.6em; font-size: 16px; } #campaign-exterior .section-contact .form .scroll { border: solid 1px #d4d4d4 !important; } #campaign-exterior .section-contact .form img.wpcf7c-elm-step1 { display: none; } #campaign-exterior .section-contact .form .itemform2 { display: none; } #campaign-exterior .section-contact .form .itemname { font-size: 18px; font-weight: 800; float: none; background: none; border-top: 0; height: auto; width: 100%; min-height: auto; } #campaign-exterior .section-contact .wpcf7-text { width: 100%; } #campaign-exterior .section-contact .itemform { width: 100%; min-height: auto; height: auto; } #campaign-exterior .section-contact .wpcf7-form-control-wrap { max-width: 100%; } #campaign-exterior .section-contact .form ul.formlist li input { max-width: 100% !important; background: #fff89d !important; margin: 0 auto; padding: 10px; } #campaign-exterior .section-contact .form textarea { height: 200px; width: 100%; background: #fff89d; } #campaign-exterior .section-contact .item_required { border: 1px solid #ff3332 !important; color: #ff3332; padding: 0px 6px !important; border-radius: 0 !important; margin-right: 5px !important; margin-left: 1%; background: none; } #campaign-exterior .section-contact .item_unrequired { font-weight: normal; border: 1px solid #c4bfbf !important; color: #c4bfbf; background: none; padding: 0px 6px !important; border-radius: 0 !important; margin-right: 5px !important; margin-left: 1%; } #campaign-exterior .section-contact .form ul.formlist { margin: 10px auto 0; } #campaign-exterior .section-contact div.wpcf7c-elm-step1.form_description p { font-size: 16px; margin: 0 auto 20px; } #campaign-exterior .section-contact div.wpcf7c-elm-step1.form_description .wpcf7c-elm-step1.privacy { margin: 0 14px; } #campaign-exterior .section-contact strong { color: #222 !important; font-weight: bold !important; background: linear-gradient(transparent 60%, #f6bc5b 0%) !important; } #campaign-exterior input.form_btn01, #campaign-exterior input.form_btn02, #campaign-exterior input.form_btn03 { display: block; width: 96%; max-width: 320px; height: 60px; border: none; border-radius: 30px; background: #34bad7; margin: 4% auto; padding: 0; cursor: pointer; color: #fff; transition: all 0.4s; -moz-transition: all 0.4s; -webkit-transition: all 0.4s; text-indent: initial; } #campaign-exterior input.form_btn02 { max-width: 280px; height: 60px; background: #34bad7; float: left; margin: 0 0 0 20%; } #campaign-exterior input.form_btn03 { background: #f70d3e; max-width: 280px; height: 60px; float: right; margin: 0 20% 0 0; } @media screen and (max-width: 1024px) { #campaign-exterior .section-contact .itemform { width: 95%; } #campaign-exterior .section-contact div.wpcf7c-elm-step1.form_description p { margin: 0 auto 2%; } } @media screen and (max-width: 767px) { #campaign-exterior .section-contact .itemform { width: 92%; } }*/ .page-id-5816 { .cta-floating { display: none !important; } } /*20230424*/ #campaign-exterior { .section-campaign__list { margin: 40px auto; display: block; @media screen and (max-width: 1024px) { margin: 4% auto; padding: 0 2%; } @media screen and (max-width: 767px) { margin: 6% auto; padding: 0 4%; } &__inner { max-width: 1020px; margin: 0 auto; width: 100%; display: block; &__item { float: left; max-width: 500px; width: 100%; @media screen and (max-width: 1024px) { max-width: initial; width: 49%; } @media screen and (max-width: 767px) { width: 100%; } &:not(:last-of-type) { margin-right: 20px; @media screen and (max-width: 1024px) { margin-right: 2%; } @media screen and (max-width: 767px) { margin-right: 0; margin-bottom: 4%; } } img { margin: 0 auto; } } } } .section-campaign__heading03 { padding: 40px; margin: 0 auto 60px; @media screen and (max-width: 1024px) { padding: 4%; margin: 0 auto 6%; } @media screen and (max-width: 767px) { margin: 0 auto 8%; } &#start01 { background: #d5f4ec; } &#start02 { background: #fff4d5; } span { display: block; text-align: center; font-size: 3.2rem; @media screen and (max-width: 1024px) { font-size: 3rem; } @media screen and (max-width: 767px) { font-size: 1.8rem; } @media screen and (max-width: 350px) { font-size: 4vw; } } } .section-campaign__contents__price { display: block; margin: 0 auto 60px; @media screen and (max-width: 1024px) { margin: 0 auto 6%; } @media screen and (max-width: 767px) { margin: 0 auto 8%; } img { display: block; margin: 0 auto; } } .section-campaign.start02 .section-campaign__box h3 { background: #ffba00; } .section-campaign.start02 .section-campaign__box__list__item__label { background: #ffba00; } .section-campaign.start02 .section-campaign__box__2col__text h4 { border-left: 10px solid #ffba00; } .section-campaign.start02 .section-campaign__option__heading h3 { background: #ffba00; } .section-campaign.start02 .section-campaign__option { background: #fff4d5; } .section-campaign.start02 .section-campaign__box__2col__text__description { color: #ffba00; } .section-campaign.start02 .section-campaign__option__list__item__text h4 { border-left: 10px solid #ffba00; } }