@charset "UTF-8"; /*共通部分*/ html { font-size: 100%; visibility: hidden; opacity: 0; scroll-behavior: smooth; } html.wf-active { visibility: visible; opacity: 1; } body { font-family: "Noto Sans JP", sans-serif, apple-system, blinkMacSystemFont, "Helvetica Neue", "Segoe UI", YuGothicM, YuGothic, Meiryo, Arial, "Yu Gothic Medium", "ヒラギノ角ゴ Pro W3", sans-serif; line-height: 1.5; color: #333333; font-weight: 400; letter-spacing: 0; overflow: hidden; } @media screen and (max-width: 768px) { body { font-size: 0.875rem; } } @media screen and (max-width: 576px) { body { font-size: 0.75rem; } } body.fixed { width: 100%; position: fixed; overflow: hidden; } .max-extend { max-width: 1920px; margin: 0 auto; } .max-extend-inner { max-width: 1366px; width: 100%; margin: 0 auto; padding: 0 4%; } .content-l-extend { max-width: 1288px; width: calc(100% - 80px); margin: 0 auto; } @media screen and (max-width: 768px) { .content-l-extend { width: calc(100% - 32px); } } .content-extend { max-width: 1080px; width: calc(100% - 80px); margin: 0 auto; } @media screen and (max-width: 768px) { .content-extend { width: calc(100% - 32px); } } @media screen and (max-width: 768px) { .content-extend.sp-w-none { width: 100%; } } .wrapper { padding: 0 4%; } .content-wrapper { padding: 0 5%; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } p { font-size: 1rem; } @media screen and (max-width: 768px) { p { font-size: 0.875rem; } } @media screen and (max-width: 576px) { p { font-size: 0.75rem; } } a { text-decoration: none; } img { max-width: 100%; } button { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .sp-br { display: none; } @media screen and (max-width: 768px) { .sp-br { display: block; } } .pc-show { display: block; } @media screen and (max-width: 768px) { .pc-show { display: none; } } .m-show { display: none; } @media screen and (max-width: 992px) { .m-show { display: block; } } .ml-only { display: none; } @media screen and (max-width: 1150px) { .ml-only { display: block; } } @media screen and (max-width: 768px) { .ml-only { display: none; } } .sp-show { display: none; } @media screen and (max-width: 768px) { .sp-show { display: block; } } .sp-xs-none { display: none; } @media screen and (max-width: 768px) { .sp-xs-none { display: block; } } @media screen and (max-width: 576px) { .sp-xs-none { display: none; } } .sp-xs-show { display: none; } @media screen and (max-width: 576px) { .sp-xs-show { display: block; } } .xs-show { display: none; } @media screen and (max-width: 576px) { .xs-show { display: block; } } .xs-none { display: block; } @media screen and (max-width: 576px) { .xs-none { display: none; } } ul { list-style: none; } select { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } table { border-collapse: collapse; width: 100%; text-align: left; } @media screen and (max-width: 576px) { table th, table td { font-size: 0.875rem; } } ol { padding-left: 20px; } ul { list-style: none; } .back-inherit { background-color: inherit !important; } .text-align-center { text-align: center; } .content-center { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .no-warp { white-space: nowrap; } .pointer { cursor: pointer; } .vertical-font { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .position-right { text-align: right; } .position-left { text-align: left; } .medium { font-weight: 500; } .semi-bold { font-weight: 600; } .bold { font-weight: 700; } .link-transparent, .top-banner__grid__box__link, .top-link__btn, .top-pv__notice { -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .link-transparent:hover, .top-banner__grid__box__link:hover, .top-link__btn:hover, .top-pv__notice:hover { opacity: 0.5; } .backBlue { background: #F9FCFE; } .backimage-t-center { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); background-position: center center; background-repeat: no-repeat; background-size: cover; } .top-pv { padding: 13px 0 0px; } @media screen and (max-width: 768px) { .top-pv { padding: 10px 0 0; } } .top-pv__notice { max-width: 900px; width: calc(100% - 80px); margin: 0 auto 20px; position: relative; padding: 8px 20.4px 8px 12px; background: #F5F5F5; border-radius: 4px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #336CAF; } @media screen and (max-width: 768px) { .top-pv__notice { margin: 0 auto 10px; padding: 7px 33px 6px 12px; width: calc(100% - 32px); } } .top-pv__notice:before { content: ""; position: absolute; top: 50%; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("../../img/icon/arrow-right.png"); right: 10.4px; width: 6.5px; height: 13px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .top-pv__notice img { display: block; width: 16px; height: 16px; margin-right: 12px; } @media screen and (max-width: 768px) { .top-pv__notice img { margin-right: 10px; } } .top-pv__notice__title { overflow: hidden; line-height: 24px; font-size: 16px; font-weight: 500; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } @media screen and (max-width: 768px) { .top-pv__notice__title { font-size: 13px; } } @media screen and (max-width: 768px) { .top-pv__notice { width: calc(100% - 32px); } } .top-link { padding: 70px 0; } @media screen and (max-width: 768px) { .top-link { padding: 25px 0 40px; } } .top-link__btn { display: none; } @media screen and (max-width: 768px) { .top-link__btn { background-image: url("../../img/top/shop-back.png"); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.16); border-radius: 5px; font-size: 20px; font-weight: 700; color: #ffffff; padding: 10px 0; margin-top: 25px; } } .top-link__btn img { display: block; width: 25.69px; } .top-link__btn span { display: block; margin-left: 9.6px; } .top-guide__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 47px; } @media screen and (max-width: 1150px) { .top-guide__grid { gap: 16px; } } @media screen and (max-width: 768px) { .top-guide__grid { grid-template-columns: repeat(1, 1fr); gap: 20px; } } .top-guide__grid__list { border-radius: 10px; border: 5px solid #FC9810; -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.16); } @media screen and (max-width: 768px) { .top-guide__grid__list { border: 3px solid #FC9810; } } .top-guide__grid__list__title { background: #FC9810; color: #ffffff; text-align: center; font-size: 24px; font-weight: 700; padding: 6px 0 12px; } @media screen and (max-width: 992px) { .top-guide__grid__list__title { font-size: 20px; } } .top-guide__grid__list__content { background: rgba(252, 152, 16, 0.16); padding: 30px 28px 23px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: calc(100% - 54px); } @media screen and (max-width: 992px) { .top-guide__grid__list__content { height: calc(100% - 48px); padding: 28px 24px 26px; } } .top-guide__grid__list__content img { -o-object-fit: cover; object-fit: cover; } .top-guide__grid__list__content__btn { background-image: url("../../img/top/btn-back.png"); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; position: relative; text-align: center; font-size: 20px; color: #ffffff; padding: 18px 0; width: 100%; margin-top: 29px; -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.16); -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; border-radius: 10px; } @media screen and (max-width: 992px) { .top-guide__grid__list__content__btn { font-size: 16px; } } @media screen and (max-width: 768px) { .top-guide__grid__list__content__btn { margin-top: 18px; } } .top-guide__grid__list__content__btn .link-text { display: block; } .top-guide__grid__list__content__btn .triangle { position: absolute; right: 26px; top: 54%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); display: block; z-index: 2; width: 11.89px; height: 16.03px; } @media screen and (max-width: 1280px) { .top-guide__grid__list__content__btn .triangle { right: 12px; } } @media screen and (max-width: 992px) { .top-guide__grid__list__content__btn .triangle { width: 10.45px; height: 14.09px; } } @media screen and (max-width: 768px) { .top-guide__grid__list__content__btn .triangle { right: 26px; } } .top-guide__grid__list__content__btn .triangle:before { content: ""; position: absolute; z-index: -1; right: 0px; top: 1px; background-image: url("../../img/btn/triangle-black.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; } .top-guide__grid__list__content__btn .triangle:after { content: ""; position: absolute; z-index: 1; right: 0px; top: 0px; background-image: url("../../img/btn/triangle-white.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .top-guide__grid__list__content__btn:hover { opacity: 0.5; } .top-guide__grid__list__content__btn:hover .triangle:after { top: 1px; } .top-banner { padding: 40px 0 0; } @media screen and (max-width: 768px) { .top-banner { padding: 20px 0 0; } } .top-banner__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } @media screen and (max-width: 768px) { .top-banner__grid { grid-template-columns: repeat(1, 1fr); gap: 20px; } } .top-banner__grid__box__link { display: block; width: 100%; border-radius: 10px; border: 5px solid #FC9810; -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.16); } @media screen and (max-width: 768px) { .top-banner__grid__box__link { border: 3px solid #FC9810; } } .top-banner__grid__box__link img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .top-news { padding: 82px 0 80px; } @media screen and (max-width: 768px) { .top-news { padding: 27.5px 0 31px; } } .top-news__top { position: relative; text-align: center; } @media screen and (max-width: 768px) { .top-news__top { text-align: left; margin: 0 16px; } } .top-news__top__btn { position: absolute; right: 0; bottom: 0; } /*# sourceMappingURL=top.css.map */