.p-pageHeader--scan{ background-image: url(header-scan-pc.png); } .p-scan__movie { text-align: center; max-width: 100%; } .p-scan__movie iframe{ text-align: center; max-width: 100%; width: 600px; height: 100%; aspect-ratio: 16/9; margin: 0 auto; } .p-scan__movie iframe{ margin: 0 auto; } .p-scan__box-ttl{ font-size:22px; margin: 60px 0 50px; text-align: center; line-height: 1.6; } .p-scan__box-txt{ font-size:16px; text-align: center; line-height: 1.6; margin-bottom: 60px; } .p-scan__pagelink{ width: 100%; padding:20px 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border-top: solid 1px #154697; border-bottom: solid 1px #154697; margin-top:60px; gap: 30px; } .p-scan__pagelink a{ font-size:16px; padding: 0 0 0 30px; position: relative; color:#000; font-weight: bold; } .p-scan__pagelink a:after{ position: absolute; top:50%; left: 0; transform: translate(0 , -50%); content:""; width: 20px; height: 20px; background: url(arrow_img.png); background-size: cover; background-repeat: no-repeat; } #scan01{ margin: 90px 0 50px; } #scan02{ margin: 90px 0 50px; } #scan03{ padding: 90px 0 0; background: linear-gradient(180deg, #f0f3f8 0% , #f0f3f8 calc(100% - 100px) ,#fff calc(100% - 100px),#fff 100%); } #scan04{ margin: 90px 0 50px; } #scan05{ padding: 90px 0 60px; background:#f0f3f8; } #scan06{ margin: 90px 0 50px; } .p-scan__ttl01{ font-size: 38px; text-align: center; position: relative; padding-bottom: 30px; margin-bottom: 50px; font-weight: 200; } .p-scan__ttl01::after{ width: 60px; height: 5px; border-top: solid 1px #154697; border-bottom: solid 1px #154697; position: absolute; content:""; bottom:0; left:50%; transform: translate(-50% , 0); } .p-scan__flex{ display: flex; flex-wrap: wrap; justify-content: center; gap:30px; margin-bottom: 30px; } .p-scan__flex02{ display: flex; flex-wrap: wrap; justify-content: center; gap:30px; flex-direction: row-reverse; margin-bottom: 30px; } .p-scan__flex03{ display: flex; flex-wrap: wrap; justify-content: center; gap:10px; margin-bottom: 30px; } .p-scan__flex-split02{ width: calc(50% - 15px); } .p-scan__flex-split02 img{ width: 100%; } .p-scan__flex-split03{ width: calc(33.333% - 7px); } .p-scan__flex-split03-02{ width: calc(33.333% - 7px); } .p-scan__flex-split03 img{ width: 100%; } .p-scan__box-ttl02{ font-size:22px; line-height: 1.6; margin-bottom: 20px; } .p-scan__box-txt02{ font-size:16px; line-height: 1.6; } .p-scan__flex-split03-txt{ text-align: center; padding: 25px 0 20px; font-size: 22px; } .p-scan__box02{ margin:60px auto; width: 1000px; max-width: 100%; padding:30px; border:solid 1px #154697; } .p-scan__linkbox{ margin:30px auto; width: 700px; padding:50px; border:solid 1px #154697; background: #fff; text-align: center; } .p-scan__linkbox-txt{ font-size: 22px; text-align: center; font-weight: 500; color:#154697; line-height: 1.6; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; } .p-scan__linkbox a{ margin: 30px auto 0; background-image: url(https://koyoshoko.co.jp/admin/wp-content/themes/koyoshoko/img/common/icon/btn_arrow-white.png), linear-gradient(to right, #265BB3, #009DC2); background-size: 4vw, auto; background-repeat: no-repeat; background-position: center right 4.4vw, center; border: none; border-radius: 60px; transition: .3s; padding: 20px 50px 20px 20px; color:#fff; text-align: center; display: inline-block; } .p-scan__flex-split02-ttl{ font-size: 60px; color:#154697; padding:60px 0 30px } .p-scan__flex-split02-2{ width: calc(100% + 60px); margin-left: -60px; padding: 30px 30px 30px 90px; background: #f7f7f7; position: relative; z-index: -1; } .p-scan__flex-split02-3{ width: calc(100% + 60px); margin-right: -60px; padding: 30px 90px 30px 30px; background: #f7f7f7; position: relative; z-index: -1; } .p-scan__img02{ padding-bottom: 10px; } .p-scan__img02 img{ width: 100%; } .p-scan__flex-split03-movie { width: 100%; } .p-scan__flex-split03-movie iframe{ width: 100%; height: 100%; aspect-ratio: 16/9; } .p-scan__iconbox{ display: flex; gap: 15px; margin-bottom: 30px; align-items: center; } .p-scan__iconbox-img{ width: 80px; } .p-scan__txt03{ font-size: 16px; text-align: center; line-height: 1.6; margin-bottom: 60px; } .p-scan__txt04{ font-size: 12px; text-align: center; line-height: 1.6; margin-bottom: 60px; } .p-scan__txt05{ font-size: 16px; text-align: center; line-height: 1.6; color:#1c4c8c; } .p-scan__linkbox02{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 30px auto; width: 1000px; padding: 50px; border: solid 1px #154697; background: #fff; text-align: center; } .p-scan__linkbox-tel{ text-align: center; justify-content: center; } .p-scan__linkbox-tel a{ display: block; text-align: center; font-weight: 100; } .p-scan__flex-split02-txt{ font-size: 16px; line-height: 1.6; width: 100%; } .p-scan__linkbox-tel{ display: block; text-align: center; } .p-scan__linkbox-tel a{ margin: 30px auto 5px; background-size: auto; background-image: linear-gradient(to right, #265BB3, #009DC2); background-repeat: no-repeat; background-position: center; border: none; border-radius: 60px; transition: .3s; padding: 8px 40px 10px 40px; color: #fff; text-align: center; display: inline-block; font-size: 32px; line-height: 1; } .p-scan__linkbox-contact a{ margin: 30px auto 0; background-image: url(https://koyoshoko.co.jp/admin/wp-content/themes/koyoshoko/img/common/icon/btn_arrow-white.png), linear-gradient(to right, #265BB3, #009DC2); background-size: 4vw, auto; background-repeat: no-repeat; background-position: center right 4.4vw, center; border: none; border-radius: 60px; transition: .3s; color: #fff; font-size: text-align: center; display: inline-block; width: 350px; height: 65px; border-radius: 50px; transition: .3s; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-weight: 700; cursor: pointer; } .p-scan__linkbox02 a:hover{ opacity: 0.6; } .p-scan__linkbox02-02, .p-scan__linkbox-contact{ width: 50%; height: 100%; } .scan-bg_line{ width: 100%; height: 20px; background: linear-gradient(90deg, #fff 0%,#1c4c8c 100%); margin-top: 90px; } .sp{ display: none; } .pc{ display:block; } @media (min-width: 768px) { .p-scan__linkbox a, .p-scan__linkbox-contact a{ background-size:18px, auto; background-position: center right 19px, center } } @media (max-width: 767px) { .p-pageHeader--scan{ background-image: url(header-scan-sp.png); } .p-scan__box-ttl{ margin: 40px 0 30px; font-size: 17px; } .p-scan__box-txt{ margin-bottom: 40px; font-size: 13px; } .p-scan__pagelink{ margin-top:40px; gap: 20px; } .p-scan__pagelink a{ font-size: 13px; padding: 0 0 0 30px; position: relative; color: #000; font-weight: bold; } .p-scan__pagelink a:after { position: absolute; width: 15px; height: 15px; } #scan01{ margin: 60px 0 50px; } #scan02{ margin: 60px 0 50px; } #scan03{ padding: 60px 0 0; background: linear-gradient(180deg, #f0f3f8 0% , #f0f3f8 calc(100% - 100px) ,#fff calc(100% - 100px),#fff 100%); } #scan04{ margin: 60px 0 50px; } #scan05{ padding: 60px 0 20px; background:#f0f3f8; } #scan06{ margin: 60px 0 0; } .p-scan__ttl01{ font-size: 24px; margin-bottom: 35px; } .p-scan__flex{ gap:20px; margin-bottom: 30px; } .p-scan__flex02{ gap:20px; margin-bottom: 30px; } .p-scan__flex03{ gap:20px; margin-bottom: 30px; } .p-scan__flex + .p-scan__flex, .p-scan__flex02 + .p-scan__flex, .p-scan__flex + .p-scan__flex02{ margin-top: 60px; } .p-scan__flex-split02{ width: 100%; } .p-scan__flex-split03{ width: calc(50% - 10px); } .p-scan__flex-split03-02{ width: 100%; } .p-scan__box-ttl02{ font-size:17px; } .p-scan__box-txt02{ font-size:13px; line-height: 1.6; } .p-scan__flex-split03-txt{ padding: 15px 0 20px; font-size: 17px; } .p-scan__box02{ margin:60px auto; width: 1000px; max-width: 100%; padding:30px; border:solid 1px #154697; } .p-scan__linkbox{ margin:30px auto; width: 700px; max-width: 100%; padding:30px 20px; border:solid 1px #154697; background: #fff; text-align: center; } .p-scan__linkbox a{ margin: 10px auto 0; font-size: 13px; background-image: url(https://koyoshoko.co.jp/admin/wp-content/themes/koyoshoko/img/common/icon/btn_arrow-white.png), linear-gradient(to right, #265BB3, #009DC2); background-size: 3.5vw, auto; background-repeat: no-repeat; background-position: center right 4.1vw, center; border: none; padding: 15px 40px 15px 20px; } .p-scan__flex-split02-ttl{ font-size: 30px; padding:0 0 15px; text-align: center; } .p-scan__flex-split02-2{ width: 100%; margin: -20px 0 0 0; padding: 20px; background: #f7f7f7; position: relative; z-index: -1; } .p-scan__flex-split02-3{ width: 100%; margin: -20px 0 0 0; padding: 20px; background: #f7f7f7; position: relative; z-index: -1; } .p-scan__img02 img{ width: 100%; } .p-scan__flex-split03-movie { width: 100%; } .p-scan__flex-split03-movie iframe{ width: 100%; height: 100%; aspect-ratio: 16/9; } .p-scan__iconbox{ display: block; text-align: center; } .p-scan__iconbox-img { width: 60px; margin: 20px auto; } .p-scan__txt03{ font-size: 13px; text-align: center; line-height: 1.6; margin:30px 0; } .p-scan__txt04{ font-size: 10px; text-align: left; line-height: 1.6; margin-bottom: 60px; } .p-scan__txt05{ font-size: 12px; text-align: center; line-height: 1.6; } .p-scan__linkbox02{ display: block; margin: 0 auto; padding: 20px 10px; } .p-scan__linkbox-txt{ font-size: 17px; color:#154697; width: 100%; } .p-scan__linkbox-tel{ text-align: center; justify-content: center; } .p-scan__linkbox-tel a{ display: block; text-align: center; } .p-scan__flex-split02-txt{ font-size: 13px; line-height: 1.6; width: 100%; } .p-scan__linkbox-tel{ display: block; text-align: center; } .p-scan__linkbox-tel a{ margin: 10px auto 0; display: flex; padding: 0; justify-content: center; align-items: center; width: 230px; height: 50px; font-size: 27px; margin-bottom: 10px ; } .p-scan__linkbox-contact a{ margin: 20px auto 0; background-image: url(https://koyoshoko.co.jp/admin/wp-content/themes/koyoshoko/img/common/icon/btn_arrow-white.png), linear-gradient(to right, #265BB3, #009DC2); background-size: 3.5vw, auto; background-repeat: no-repeat; background-position: center right 4.1vw, center; padding: 0; justify-content: center; align-items: center; width: 230px; height: 50px; } .p-scan__linkbox02 a:hover{ opacity: 0.6; } .p-scan__linkbox02-02, .p-scan__linkbox-contact{ width: 100%; height: auto; } .scan-bg_line{ margin-top: 30px; } .sp{ display: block; } .pc{ display: none; } } .p-product { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap:0 30px; } @media (min-width: 768px) { .p-product__item { width: calc(50% - 15px); margin: 0 0 60px; } }