@charset "UTF-8"; /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } body { font-family: "Lato", "Noto Sans JP", sans-serif; font-size: 1.6rem; font-weight: 400; background-color: #F9F9F9; } a { cursor: pointer; text-decoration: none; } input { cursor: pointer; } img { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .c-hamburger { flex-direction: column; justify-content: space-between; } .c-hamburger span { display: block; width: 100%; height: 2px; background-color: #333333; transition: all 0.3s ease-in; } .c-hamburger span:nth-child(1) { transform-origin: right top; } .c-hamburger span:nth-child(3) { transform-origin: right bottom; } .c-hamburger.active span:nth-child(1) { rotate: -45deg; } .c-hamburger.active span:nth-child(2) { opacity: 0; } .c-hamburger.active span:nth-child(3) { rotate: 45deg; } .c-cta { display: flex; justify-content: center; align-items: center; gap: 8px; background-color: #ffffff; border-radius: 100px; padding: 16px 24px; width: 100%; height: 68px; font-size: 2rem; font-weight: bold; } .c-cta--tel { border: 4px solid #06C755; } .c-cta--tel::before { font-family: "Font Awesome 6 Free"; content: "\f095"; font-weight: 900; font-size: 28px; animation: bellShake 3.4s ease-in-out infinite; } .c-cta--tel-header { border: initial; background-color: initial; padding: 16px 0; width: 300px; } .c-cta--line { background-color: #06C755; color: #ffffff; position: relative; border: 2px solid transparent; transition: all 0.3s ease-in-out; } .c-cta--line::before { font-family: "Font Awesome 6 Free"; content: "\f3cd"; font-weight: 900; font-size: 28px; } .c-cta--line::after { font-family: "Font Awesome 6 Free"; content: "\f0da"; font-weight: 900; font-size: 24px; } .c-cta__info { display: flex; flex-direction: column; align-items: center; font-size: 2rem; font-weight: bold; } .c-cta__time { font-size: 1.4rem; } .c-cta__subtext { position: absolute; font-size: 1.4rem; color: #333333; padding: 5px 40px; background-color: #FFEB3B; border-radius: 100px; top: -14px; } .c-cta__subtext::after { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%); font-family: "Font Awesome 6 Free"; content: "\f0d7"; color: #FFEB3B; font-weight: 900; font-size: 2rem; } @media (max-width: 375px) { .c-cta { font-size: 1.6rem; white-space: nowrap; } .c-cta--line::before { font-size: 20px; } } @media (min-width: 1200px) { .c-cta__info { font-size: 2.8rem; } } .c-cta--line:hover { color: #06C755; background-color: #ffffff; border: 4px solid #06C755; } @keyframes bellShake { 0% { transform: rotate(0deg); } 4% { transform: rotate(15deg); } 8% { transform: rotate(0deg); } 12% { transform: rotate(-15deg); } 16% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .c-under-line { position: relative; } .c-under-line::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 5px; background-color: #FFEB3B; z-index: -1; } .c-strong-15 { font-size: 1.25em; } .c-punct { letter-spacing: -0.4em; /* 句読点の余白を詰める例 */ font-size: 0.9em; /* 小さくする例 */ } .c-red { color: #E53935; } .c-desc { line-height: 1.5; } .c-border-yellow::after { content: ""; z-index: -1; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background-color: #FFEB3B; } .c-wavy-yellow { position: relative; -webkit-text-decoration: underline wavy #FFEB3B; text-decoration: underline wavy #FFEB3B; } .c-hover { position: relative; } .c-hover::after { position: absolute; bottom: 0; left: 0; content: ""; width: 0%; height: 1px; background-color: #333333; transition: all 0.3s ease; } .c-hover:hover::after { width: 100%; } @media (min-width: 1200px) { .c-hover--pc::after { position: absolute; bottom: 0; left: 0; content: ""; width: 0%; height: 1px; background-color: #333333; transition: all 0.3s ease; } .c-hover--pc:hover::after { width: 100%; } } .p-header-hamburger { width: 50px; height: 50px; padding: 12.5px 8px; } .p-header-list { display: flex; flex-direction: column; gap: 8px; padding: 32px 20px; } .p-header-list__item { display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.95); width: 100%; height: 60px; border-radius: 5px; box-shadow: -4px 4px 4px rgba(51, 51, 51, 0.5); transition: all 0.3s ease-in-out; transform: translate(1px, -1px); } .p-header-list__item:hover { box-shadow: initial; transform: translate(0px, 0px); } .p-header-list__link { width: 100%; height: 100%; padding: 0 16px; line-height: 60px; } .p-header-list__link::after { font-family: "Font Awesome 6 Free"; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); content: "\f054"; font-weight: 900; font-size: 20px; margin-left: auto; } .p-header-list__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; } @media (min-width: 1200px) { .p-header-list { flex-direction: row; justify-content: center; padding: 8px; } .p-header-list__item { background-color: initial; height: initial; border-radius: initial; box-shadow: initial; transform: initial; display: block; width: initial; border-left: 1px solid #333333; } .p-header-list__item:first-child { border-left: none; } .p-header-list__item::after { content: ""; } .p-header-list__btns { display: none; } .p-header-list__link { line-height: 20px; } .p-header-list__link::after { content: ""; } } .p-footer-list { display: flex; flex-direction: column; gap: 16px; width: -moz-fit-content; width: fit-content; } .p-footer-btns { display: flex; flex-direction: column; gap: 24px; } .p-nav-wrapper { display: flex; flex-wrap: wrap; gap: 32px; width: 100%; max-width: 320px; margin: 0 auto; } @media (min-width: 768px) { .p-nav-wrapper { justify-content: center; flex-wrap: nowrap; max-width: 600px; gap: 40px; } } @media (min-width: 1200px) { .p-nav-wrapper { gap: 64px; justify-content: start; margin: initial; } } .p-kv { position: relative; width: 100%; height: 100%; display: flex; overflow: hidden; } .p-kv__bg { flex: 6 1 0; min-width: 0; position: relative; z-index: 20; width: 100%; height: 100%; background: url("../images/kv/kv.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; } .p-kv__img { position: absolute; z-index: 30; bottom: 0%; left: 0; width: 310px; height: 430px; transform: translateX(-10%); background: url("../images/kv/kv-main.png") center/cover no-repeat; } .p-kv__slider { flex: 4 1 0; position: relative; top: 0; z-index: 30; width: 100%; max-width: 40vh; height: 100vh; background-color: #ffffff; padding: 64px 0px; transform: rotate(8deg); } .p-kv__slider::before { content: ""; z-index: 50; display: block; position: absolute; left: -20%; top: 50%; transform: translateY(-50%); background-color: #ffffff; width: 100px; height: 200vh; pointer-events: none; } .p-kv__slider::after { content: ""; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #ffffff; width: 150%; height: 200vh; pointer-events: none; } .p-kv__tagline { position: absolute; z-index: 35; bottom: 0%; left: 50%; transform: translate(-50%, 30%); display: flex; flex-direction: column; align-items: center; background-color: rgba(255, 255, 255, 0.9); border-radius: 10px; width: calc(100% - 40px); max-width: 480px; height: -moz-fit-content; height: fit-content; padding: 16px; } .p-kv__copy { font-weight: bold; display: flex; flex-direction: column; align-items: end; } .p-kv__copy span { margin-left: auto; } .p-kv__copy-strong { font-size: 2.4rem; font-weight: 900; color: #0073CE; } .p-kv__subcopy { display: flex; flex-wrap: wrap; font-size: 1.4rem; font-weight: bold; } .p-kv__logo { width: 280px; margin-bottom: 16px; } .p-kv__emblems { display: flex; justify-content: center; gap: 16px; } .p-kv__emblem { width: 80px; } @media (min-width: 768px) { .p-kv__slider { padding: 64px 32px; max-width: 60vw; } .p-kv__slider::before { left: -10%; } .p-kv__img { width: 370px; height: 520px; transform: translateX(20%); } .p-kv__tagline { max-width: 450px; top: 50%; left: initial; right: 32px; transform: translate(-10%, -30%); } .p-kv__copy { font-size: 2.4rem; letter-spacing: -0.08em; } .p-kv__copy-strong { font-size: 2.8rem; } .p-kv__subcopy { font-size: 1.6rem; letter-spacing: -0.08em; } .p-kv__logo { width: 350px; } .p-kv__emblem { width: 100px; } } @media (min-width: 1200px) { .p-kv__copy { font-size: 2.8rem; } .p-kv__copy-strong { font-size: 4.8rem; } .p-kv__subcopy { font-size: 2rem; } .p-kv__img { z-index: 40; width: 440px; height: 600px; transform: translateX(30%); } .p-kv__logo { width: 560px; } .p-kv__tagline { max-width: 700px; right: 2%; transform: translate(0%, -30%); } .p-kv__emblem { width: 150px; gap: 24px; } } @media (min-width: 1440px) { .p-kv__tagline { right: 10%; transform: translate(0%, -40%); } .p-kv__img { transform: translateX(40%); } } .p-contact { background-color: #ffffff; box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.25); position: relative; width: 100%; max-width: 400px; padding: 32px 12px 12px; border-radius: 10px; margin: 0 auto; } .p-contact__discount { position: absolute; z-index: 100; top: -40%; left: 0%; display: flex; justify-content: center; align-items: center; flex-direction: column; line-height: 1; width: 70px; height: 70px; border-radius: 50%; background-color: #E53935; border: 3px solid #ffffff; color: #ffffff; text-align: center; transform: rotate(-5deg); font-weight: bold; } .p-contact__discount strong { font-size: 2rem; } .p-contact__ribbon { position: absolute; width: 100%; max-width: 320px; height: 100%; z-index: 20; top: -20%; left: 50%; transform: translateX(-50%); } .p-contact__ribbon span { position: relative; z-index: 10; display: block; text-align: center; font-weight: bold; text-shadow: -1px 1px 0 #ffffff, -1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff; } .p-contact__ribbon span::before { content: "\\"; left: 9%; } .p-contact__ribbon span::after { content: "/"; right: 9%; } .p-contact__ribbon span::before, .p-contact__ribbon span::after { position: absolute; top: 37%; font-size: 2.8rem; font-weight: normal; } .p-contact__ribbon span strong { font-size: 1.8rem; color: #E53935; } .p-contact__ribbon picture { position: absolute; width: 100%; height: 100%; top: 0; left: 50%; transform: translateX(-50%); } .p-contact__img { position: absolute; top: -65%; right: -2%; z-index: 10; width: 140px; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .p-contact__btns { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; } .p-contact__btns a { position: relative; z-index: 30; max-width: 400px; } @media (max-width: 375px) { .p-contact__ribbon { font-size: 1.4rem !important; } .p-contact__ribbon span { font-size: 1.4rem !important; } .p-contact__ribbon span::before, .p-contact__ribbon span::after { font-size: 2rem !important; top: 45%; } .p-contact__ribbon strong { font-size: 1.6rem !important; } } @media (min-width: 768px) { .p-contact { max-width: 700px; padding: 64px 12px 24px; } .p-contact__discount { transform: rotate(-5deg) scale(1.4); top: -15%; } .p-contact__ribbon { max-width: 540px; top: -15%; } .p-contact__ribbon span { font-size: 2rem; } .p-contact__ribbon span::before { content: "\\"; left: 10%; } .p-contact__ribbon span::after { content: "/"; right: 10%; } .p-contact__ribbon span::before, .p-contact__ribbon span::after { top: 10%; font-size: 2.8rem; } .p-contact__ribbon span strong { font-size: 2.4rem; } .p-contact__ribbon picture { top: -1%; } .p-contact__img { width: 160px; top: -95%; right: 0%; } .p-contact__btns { position: relative; flex-direction: row; justify-content: center; gap: 24px; } } @media (min-width: 1200px) { .p-contact { max-width: 1000px; } .p-contact__ribbon { max-width: 680px; top: -20%; } .p-contact__ribbon span { font-size: 2.4rem; } .p-contact__ribbon span::before { content: "\\"; left: 13%; } .p-contact__ribbon span::after { content: "/"; right: 13%; } .p-contact__ribbon span strong { font-size: 2.8rem; } .p-contact__img { width: 180px; top: -110%; right: 7%; } .p-contact__discount { top: -20%; left: 5%; transform: rotate(-5deg) scale(1.6); } } .p-about { overflow: hidden; padding-top: 64px; } .p-about__leading { position: relative; display: flex; flex-direction: column; gap: 8px; font-weight: bold; width: -moz-fit-content; width: fit-content; margin: 0 auto 24px; text-align: center; } .p-about__leading::before { content: ""; position: absolute; z-index: 0; background: url("../images/about/tool1.png") center/cover no-repeat; width: 25px; height: 80px; top: -30px; left: -10%; rotate: -15deg; } .p-about__leading::after { content: ""; position: absolute; z-index: 0; background: url("../images/about/tool2.png") center/cover no-repeat; width: 64px; height: 70px; top: -15px; right: -15%; } .p-about__leading div { text-align: center; } .p-about__leading div strong { position: relative; font-size: 2rem; color: #0073CE; text-shadow: -1px 1px 0 #aaff93, -1px 1px 0 #aaff93, 1px -1px 0 #aaff93, -1px -1px 0 #aaff93; } .p-about__leading div strong::before, .p-about__leading div strong::after { content: ""; position: absolute; z-index: 10; background: url("../images/about/kira.png") center/cover no-repeat; width: 10px; height: 20px; } .p-about__leading div strong::before { top: -10px; left: -4px; animation: scaleLoop 2.5s ease-in-out infinite; } .p-about__leading div strong::after { bottom: -11px; right: -5px; animation: scaleLoop 2.5s ease-in-out infinite; animation-delay: 1.25s; } .p-about__gallery { margin-bottom: 64px; pointer-events: none; } .p-about__sec-leading { text-align: center; font-size: 2rem; font-weight: bold; margin-bottom: 24px; } .p-about__sec-leading strong { font-size: 2.4rem; color: #E53935; } .p-about__menu { max-width: 1200px; margin: 0 auto; padding: 0 20px; } @media (min-width: 768px) { .p-about__leading { margin: 0 auto 32px; } .p-about__leading::before { content: ""; width: 33px; height: 94px; left: -10%; rotate: -15deg; scale: 1.4; } .p-about__leading::after { content: ""; width: 84px; height: 100px; right: -15%; scale: 1.4; } .p-about__leading div { font-size: 2.4rem; } .p-about__leading div strong { font-size: 2.8rem; } .p-about__sec-leading { font-size: 2.8rem; margin-bottom: 32px; } .p-about__sec-leading strong { font-size: 3.2rem; } .p-about__menu { max-width: 1200px; margin: 0 auto; padding: 0 32px; } } @media (min-width: 1200px) { .p-about { padding-top: 80px; } .p-about__leading { margin: 0 auto 40px; } .p-about__leading::before { scale: 1.4; left: -70px; } .p-about__leading::after { scale: 1.4; right: -100px; } .p-about__leading div { font-size: 2.8rem; } .p-about__leading div strong { font-size: 3.2rem; } .p-about__gallery { margin-bottom: 80px; } .p-about__sec-leading { font-size: 4rem; margin-bottom: 40px; } .p-about__sec-leading strong { font-size: 4.8rem; } } @keyframes scaleLoop { 0% { transform: scale(1); } 25% { transform: scale(1.2); } 50% { transform: scale(1.4); } 75% { transform: scale(1.2); } 100% { transform: scale(1); } } .p-about-menu { padding-bottom: 8px; } .p-about-menu__tabs { display: flex; gap: 4px; } .p-about-menu__tab { position: relative; background-color: #FAFAFA; width: 100%; height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #c0c0c0; font-weight: 600; } .p-about-menu__tab img { width: 20px; aspect-ratio: 1/1; filter: invert(78%) sepia(0%) saturate(0%) hue-rotate(167deg) brightness(91%) contrast(87%); } .p-about-menu__tab[aria-selected=true] { background-color: #FFEB3B; border-top: 4px solid #FF6F00; color: #333333; box-shadow: 3px 4px 4px rgba(51, 51, 51, 0.25); } .p-about-menu__tab[aria-selected=true] img { filter: invert(4%) sepia(2%) saturate(4542%) hue-rotate(321deg) brightness(91%) contrast(93%); } .p-about-menu__panels { position: relative; z-index: 10; background-color: #FFEB3B; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 3px 4px 4px rgba(51, 51, 51, 0.25); padding: 24px 16px; } .p-about-menu__ribbon { position: relative; background: #E53935; color: #fff; font-weight: bold; text-align: center; display: block; font-size: 2rem; margin: 0 auto; width: 80%; height: 40px; line-height: 40px; margin-bottom: 24px; animation: scaleUp 3s ease-in-out infinite; } .p-about-menu__ribbon::before, .p-about-menu__ribbon::after { content: ""; position: absolute; top: 0; width: 0; height: 100%; border-top: 20px solid #E53935; border-bottom: 20px solid #E53935; } .p-about-menu__ribbon::before { left: -9px; border-right: 10px solid transparent; border-radius: 2px; rotate: 180deg; } .p-about-menu__ribbon::after { right: -9px; border-left: 10px solid transparent; border-radius: 2px; rotate: 180deg; } @media (min-width: 768px) { .p-about-menu__ribbon { font-size: 2.4rem; width: 100%; max-width: 600px; } } @media (min-width: 1200px) { .p-about-menu__ribbon { font-size: 2.8rem; height: 50px; line-height: 50px; } .p-about-menu__ribbon::before, .p-about-menu__ribbon::after { border-top: 25px solid #E53935; border-bottom: 24px solid #E53935; } } .p-about-menu__note { background-color: #fbfbfb; box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.25); border-radius: 5px; text-align: center; padding: 8px; margin: 0 auto 16px; max-width: 740px; font-size: 1.4rem; } .p-about-menu__btns { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; margin-top: 32px; } .p-about-menu__btns a { max-width: 315px; } .p-about-menu__btns a .c-cta__subtext { background-color: #ffffff; } .p-about-menu__btns a .c-cta__subtext::after { color: #ffffff; } @media (min-width: 768px) { .p-about-menu__tab { font-size: 2rem; flex-direction: row; gap: 8px; } .p-about-menu__tab img { width: 30px; } .p-about-menu__note { font-size: 1.6rem; } .p-about-menu__btns { flex-direction: row; gap: 24px; } } .p-menu-card { background-color: #fbfbfb; border-radius: 10px; padding: 16px; box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.25); width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; flex: 1; } .p-menu-card__heading { font-size: 2.4rem; font-weight: bold; margin-bottom: 8px; } .p-menu-card__heading span { font-size: 1.4rem; white-space: nowrap; } .p-menu-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .p-menu-card__tag { color: #ffffff; background-color: #0073CE; padding: 4px 8px; text-align: center; white-space: nowrap; } .p-menu-card__work-time { width: -moz-fit-content; width: fit-content; display: flex; margin-bottom: 24px; margin-top: auto; } .p-menu-card__work-time-label { display: block; color: #ffffff; background-color: #06C755; padding: 4px 8px; } .p-menu-card__work-time-val { display: block; color: #06C755; background-color: #ffffff; border: 1px solid #06C755; padding: 4px 8px; } .p-menu-card__compare-price { display: flex; width: 100%; margin-bottom: 32px; } .p-menu-card__price-cel { display: flex; flex: 1; flex-direction: column; align-items: center; border: 1px solid #e0e0e0; } .p-menu-card__price-label { display: block; width: 100%; text-align: center; background-color: #A8E1FF; padding: 4px 8px; } .p-menu-card__price-val { padding: 4px 0; font-size: 2rem; font-family: "Bebas Neue", "Lato", "Noto Sans JP"; letter-spacing: 0.1rem; } .p-menu-card__special-price { display: flex; justify-content: center; align-items: center; gap: 4px; } .p-menu-card__discount { display: flex; justify-content: center; align-items: center; flex-direction: column; line-height: 1; width: 60px; height: 60px; border-radius: 50%; background-color: #E53935; color: #ffffff; text-align: center; transform: rotate(-5deg); font-weight: bold; } .p-menu-card__discount strong { font-size: 2rem; } .p-menu-card__special-price-val { font-size: 6.4rem; line-height: 50%; color: #E53935; font-family: "Bebas Neue", "Lato", "Noto Sans JP"; } @media (min-width: 768px) { .p-menu-card__special-price { gap: 8px; } .p-menu-card__discount { width: 80px; height: 80px; font-size: 2.4rem; } .p-menu-card__discount strong { font-size: 2.8rem; } .p-menu-card__special-price-val { font-size: 8rem; } } @keyframes scaleUp { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .p-problem { display: flex; flex-direction: column; gap: 40px; align-items: center; } .p-problem__heading { font-size: 2rem; } .p-problem__heading strong { position: relative; font-size: 2.4rem; font-weight: bold; color: #0073CE; } .p-problem__heading strong::before { content: "・・・"; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); } .p-problem__cards { display: flex; flex-direction: column; gap: 24px; } .p-problem__leading { text-align: center; } .p-problem__leading strong { color: #E53935; font-size: 2rem; font-weight: bold; } .p-problem__scroll { position: absolute; z-index: 20; top: 103%; left: 50%; transform: translate(-50%, -50%); } @media (min-width: 768px) { .p-problem__heading { font-size: 3.2rem; } .p-problem__heading strong { font-size: 4rem; } .p-problem__heading strong::before { top: -30px; font-size: 3.2rem; } .p-problem__scroll { top: 105%; } } @media (min-width: 1200px) { .p-problem__cards { flex-direction: row; } .p-problem__leading { font-size: 2rem; } .p-problem__leading strong { font-size: 2.4rem; } .p-problem__scroll { top: 110%; } } .p-problem-card { position: relative; width: 100%; max-width: 400px; display: flex; flex-direction: column; border-radius: 10px; } .p-problem-card::before { display: block; padding: 4px 24px; font-weight: bold; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); border-radius: 20px; color: #ffffff; } .p-problem-card__head { padding: 24px 16px 8px; background-color: #ffffff; border-top-left-radius: 10px; border-top-right-radius: 10px; flex: 1; } .p-problem-card__title { text-align: center; font-size: 2rem; font-weight: 500; margin-bottom: 8px; } .p-problem-card__thumb { display: flex; align-items: center; gap: 8px; } .p-problem-card__img { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 1px solid #06C755; } .p-problem-card__img img { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; scale: 0.9; } .p-problem-card__voice { flex: 1; font-size: 1.4rem; border: 1px solid #06C755; padding: 8px; border-radius: 5px; font-family: "Zen Maru Gothic", sans-serif; } .p-problem-card__body { position: relative; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 20px 16px 16px; background-color: #06C755; color: #ffffff; } .p-problem-card__body::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; /* 横サイズ */ border-right: 10px solid transparent; border-top: 10px solid #ffffff; } @media (min-width: 1200px) { .p-problem-card { max-width: 400px; } } .p-problem-card:nth-child(1) .p-problem-card::before { content: "CASE01"; background-color: #06C755; } .p-problem-card:nth-child(2) .p-problem-card::before { content: "CASE02"; background-color: #4db3ed; } .p-problem-card:nth-child(2) .p-problem-card__body { padding: 20px 16px 16px; background-color: #4db3ed; } .p-problem-card:nth-child(2) .p-problem-card__img { border: 1px solid #4db3ed; } .p-problem-card:nth-child(2) .p-problem-card__voice { border: 1px solid #4db3ed; } .p-problem-card:nth-child(3) .p-problem-card::before { content: "CASE03"; background-color: #06C755; } .p-problem-scroll { width: 2px; height: 130px; background-color: #0073CE; } .p-problem-scroll::before { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); content: ""; display: block; width: 10px; height: 10px; background-color: #0073CE; border-radius: 50%; animation: move-dot 4s ease-in-out infinite; } @media (min-width: 768px) { .p-problem-scroll { height: 150px; } } @keyframes move-dot { 0% { top: 24px; opacity: 0; } 50% { top: calc(100% - 24px); opacity: 1; } 100% { top: 24px; opacity: 0; } } .p-message { position: relative; display: flex; flex-direction: column; align-items: start; gap: 16px; background-color: #ffffff; padding: 16px; margin: 0 auto; max-width: 800px; box-shadow: 0 4px 4px rgba(51, 51, 51, 0.25); } .p-message__heading span { font-size: 1.4rem; } .p-message__heading h2 { font-size: 2.4rem; } .p-message__img { width: 100%; max-width: 400px; aspect-ratio: 3/2; background: url("../images/message/owner.jpg") center/cover no-repeat; border: 3px solid #ffffff; box-shadow: 0 4px 4px rgba(51, 51, 51, 0.25); } .p-message__message { display: flex; flex-direction: column; gap: 8px; } .p-message__message h3 { font-weight: bold; font-size: 2rem; } .p-message__desc--main strong { color: #0073CE; font-size: 1.8rem; font-weight: bold; } .p-message__desc--offer { font-size: 2rem; font-weight: bold; position: relative; z-index: 20; } .p-message__desc--offer strong { position: relative; font-size: 2.4rem; color: #E53935; letter-spacing: 0.05em; } .p-message__desc--appeal { position: relative; z-index: 20; } .p-message__desc--appeal strong { position: relative; font-weight: bold; } @media (min-width: 768px) { .p-message__img { position: absolute; top: -10%; right: -3%; max-width: 300px; height: 250px; } .p-message__heading span { font-size: 1.6rem; } .p-message__heading h2 { font-size: 2.8rem; } .p-message__message { max-width: 600px; } } .p-works { display: flex; flex-direction: column; align-items: center; gap: 24px; } .p-works__heading { padding: 16px 0; width: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; background-color: rgba(255, 255, 255, 0.8); } .p-works__heading h2 { font-size: 2.4rem; font-weight: bold; } .p-works__cards { width: 100%; } @media (min-width: 768px) { .p-works { gap: 32px; } .p-works__heading h2 { font-size: 2.8rem; } .p-works__cards { max-width: 694px; } } @media (min-width: 1200px) { .p-works { gap: 40px; } .p-works__heading h2 { font-size: 3.2rem; } .p-works__cards { max-width: 1053px; } } .p-works-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 8px; width: 100%; max-width: 335px; background-color: #ffffff; margin: 0 auto; border: 1px dotted #333333; } .p-works-card__tag { position: absolute; top: 0; right: 0; z-index: 10; display: block; width: -moz-fit-content; width: fit-content; padding: 4px 16px; background-color: #0073CE; font-size: 1.4rem; font-weight: bold; color: #ffffff; } .p-works-card__arrow { position: absolute; z-index: 30; width: 60px; height: 60px; top: 130px; left: 50%; transform: translateX(-50%) rotate(30deg); } .p-works-card__media { display: flex; flex-direction: column; gap: 16px; } .p-works-card__imgs { display: flex; gap: 8px; } .p-works-card__img { width: 100%; height: 200px; background-position: center; background-size: contain; background-repeat: no-repeat; border: 3px solid #ffffff; position: relative; } .p-works-card__img--before::after { content: "BEFORE"; position: absolute; font-family: "Bebas Neue", "Lato", "Noto Sans JP"; padding: 4px 8px; background-color: #ffffff; box-shadow: 0 4px 4px rgba(51, 51, 51, 0.25); bottom: -12px; left: 50%; transform: translateX(-50%); border-radius: 5px; } .p-works-card__img--after::after { content: "AFTER"; position: absolute; font-family: "Bebas Neue", "Lato", "Noto Sans JP"; padding: 4px 8px; background-color: #ffffff; box-shadow: 0 4px 4px rgba(51, 51, 51, 0.25); bottom: -12px; left: 50%; transform: translateX(-50%); border-radius: 5px; } .p-works-card__desc { padding: 0 8px; } @media (min-width: 1200px) { .p-works-card { margin: initial; } } .p-uservoice { display: flex; flex-direction: column; align-items: center; gap: 24px; } .p-uservoice__heading { width: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; } .p-uservoice__heading h2 { font-size: 2.4rem; font-weight: bold; } .p-uservoice__cards { width: 100%; display: grid; gap: 24px; } @media (min-width: 768px) { .p-uservoice { gap: 32px; } .p-uservoice__heading h2 { font-size: 2.8rem; } .p-uservoice__cards { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); } } @media (min-width: 1200px) { .p-uservoice { gap: 40px; } .p-uservoice__heading h2 { font-size: 3.2rem; } .p-uservoice__cards { display: flex; gap: initial; max-width: 1053px; } } .p-uservoice-card { background-color: #ffffff; box-shadow: 0 4px 4px rgba(51, 51, 51, 0.25); padding: 16px; width: 100%; max-width: 335px; display: flex; gap: 16px; } .p-uservoice-card__img { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #FFEB3B; overflow: hidden; } .p-uservoice-card__img img { -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; scale: 0.9; } .p-uservoice-card__profile { font-size: 1.2rem; text-align: center; display: flex; flex-direction: column; align-items: center; } .p-uservoice-card__area { margin-bottom: 4px; } .p-uservoice-card__plan { display: flex; flex-direction: column; } .p-uservoice-card__plan span { display: block; padding: 2px 4px; } .p-uservoice-card__plan span:first-child { display: block; background-color: #FFEB3B; } .p-uservoice-card__plan span:last-child { display: block; background-color: #fffac7; } .p-uservoice-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; } .p-uservoice-card__title { color: #0073CE; font-weight: bold; text-align: center; } .p-uservoice-card__text { font-size: 1.4rem; } .p-faq { display: flex; flex-direction: column; align-items: center; gap: 24px; } .p-faq__heading { width: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; } .p-faq__heading h2 { font-size: 2.4rem; font-weight: bold; } .p-faq__list { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; } .p-faq__item { width: 100%; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.25); padding: 8px 16px; } .p-faq__item details[open] summary::after { content: ""; background: url("../images/faq/minus.svg") center/cover no-repeat; display: block; margin-left: auto; } .p-faq__item summary { display: inline-flex; align-items: center; width: 100%; } .p-faq__item summary::before { content: "Q"; color: #0073CE; font-size: 2.8rem; font-weight: bold; padding: 4px 16px 4px 0; line-height: 1; margin-bottom: 8px; } .p-faq__item summary::after { content: ""; width: 35px; height: 35px; background: url("../images/faq/plus.svg") center/cover no-repeat; display: block; margin-left: auto; } .p-faq__item p { display: inline-flex; align-items: start; } .p-faq__item p::before { content: "A"; color: #E53935; font-size: 2.8rem; font-weight: bold; padding: 0px 16px 4px 0; line-height: 1; } @media (min-width: 768px) { .p-faq { gap: 32px; } .p-faq__heading h2 { font-size: 2.8rem; } .p-faq__list { max-width: 800px; } } @media (min-width: 1200px) { .p-faq { gap: 40px; } .p-faq__heading h2 { font-size: 3.2rem; } } .p-area { display: flex; flex-direction: column; align-items: center; gap: 24px; } .p-area__heading { width: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; } .p-area__heading h2 { font-size: 2.4rem; font-weight: bold; } .p-area__list { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; align-items: stretch; } .p-area__item { display: flex; flex-direction: column; gap: 12px; width: 100%; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.25); padding: 16px 16px; } .p-area__prefecture { font-size: 2rem; font-weight: 500; border-bottom: 2px solid #333333; padding-bottom: 4px; } .p-area__city { display: flex; flex-wrap: wrap; gap: 8px; white-space: nowrap; } .p-area__city span::before { content: "-"; } @media (min-width: 768px) { .p-area { gap: 32px; } .p-area__heading h2 { font-size: 2.8rem; } .p-area__list { max-width: 800px; } } @media (min-width: 1200px) { .p-area { gap: 40px; } .p-area__heading h2 { font-size: 3.2rem; } .p-area__list { flex-direction: row; justify-content: center; max-width: initial; } .p-area__item { max-width: 335px; } } .p-company { display: flex; flex-direction: column; align-items: center; } .p-company tbody { width: 100%; max-width: 550px; } .p-company caption { font-size: 2.4rem; font-weight: 500; margin-bottom: 24px; } .p-company th { width: 120px; } .p-company tr { display: block; border-bottom: 1px solid #c0c0c0; padding: 4px; } @media (min-width: 768px) { .p-company td { font-size: 2rem; } } @media (min-width: 1200px) { .p-company { width: -moz-fit-content; width: fit-content; align-items: start; margin-left: auto; } } .kv-swiper-wrapper { position: relative; z-index: 50; display: flex; gap: 40px; align-items: center; justify-content: center; width: 100%; height: 100%; margin-left: auto; transform: translateX(-10%); } @media (min-width: 768px) { .kv-swiper-wrapper { transform: translateX(0%); } } .kv-left-swiper, .kv-right-swiper { min-width: 0; width: 70%; height: 100%; } .kv-left-swiper .swiper-slide, .kv-right-swiper .swiper-slide { width: 100%; aspect-ratio: 1/1; border: 2px solid #ffffff; border-radius: 10px; flex-shrink: initial; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.25); } .kv-right-swiper { margin-top: 100px; display: none; } @media (min-width: 768px) { .kv-right-swiper { display: flex; } } .gallery-swiper .swiper-slide { width: 200px; aspect-ratio: 1/1; border: 5px solid #ffffff; background-position: center; background-size: cover; background-repeat: no-repeat; } @media (min-width: 1200px) { .gallery-swiper .swiper-slide { width: 250px; } } .menu-tab1-swiper, .menu-tab2-swiper, .menu-tab3-swiper, .menu-tab4-swiper { overflow: hidden; padding-bottom: 16px; } .menu-tab1-swiper .swiper-pagination, .menu-tab2-swiper .swiper-pagination, .menu-tab3-swiper .swiper-pagination, .menu-tab4-swiper .swiper-pagination { position: relative; bottom: -16px !important; } .menu-tab1-swiper .swiper-button-prev, .menu-tab1-swiper .swiper-button-next, .menu-tab2-swiper .swiper-button-prev, .menu-tab2-swiper .swiper-button-next, .menu-tab3-swiper .swiper-button-prev, .menu-tab3-swiper .swiper-button-next, .menu-tab4-swiper .swiper-button-prev, .menu-tab4-swiper .swiper-button-next { top: 40% !important; } @media (min-width: 1200px) { .menu-tab2-swiper .swiper-wrapper, .menu-tab3-swiper .swiper-wrapper, .menu-tab4-swiper .swiper-wrapper { justify-content: center; } } .works-swiper { overflow: hidden; padding-bottom: 16px; position: relative; } .works-swiper .swiper-wrapper { align-items: stretch; } .works-swiper .swiper-slide { display: flex; height: auto !important; } .works-swiper .swiper-pagination { position: relative; bottom: -16px !important; } .works-swiper .swiper-button-prev, .works-swiper .swiper-button-next { top: 40% !important; } .uservoice-swiper .swiper-pagination { display: none; position: relative; bottom: -16px !important; } .uservoice-swiper .swiper-button-prev, .uservoice-swiper .swiper-button-next { display: none; top: 40% !important; } @media (min-width: 1200px) { .uservoice-swiper { overflow: hidden; padding-bottom: 16px; position: relative; width: 100%; max-width: 1069px; } .uservoice-swiper .swiper-wrapper { align-items: stretch; } .uservoice-swiper .swiper-slide { display: flex; height: auto !important; } .uservoice-swiper .swiper-pagination { display: block; } .uservoice-swiper .swiper-button-prev, .uservoice-swiper .swiper-button-next { display: flex; } } .swiper-button-prev, .swiper-button-next { background-color: rgba(0, 115, 206, 0.8); width: -moz-fit-content; width: fit-content; aspect-ratio: 1/1; border-radius: 50%; } .swiper-button-prev::after, .swiper-button-next::after { font-size: 20px; color: #ffffff; } .u-sp-br { display: inline; } .u-tablet-br { display: inline; } .u-tablet-hidden { display: none; } @media (min-width: 1200px) { .u-tablet-hidden { display: block; } } @media (max-width: 767px) { .u-tablet-br { display: none; } } @media (min-width: 768px) { .u-sp-br { display: none; } } .l-header { position: fixed; z-index: 1000; display: grid; grid-template-areas: "logo btns" "navi navi"; background-color: rgba(255, 255, 255, 0.9); align-items: center; width: 100%; padding: 12px 0; } .l-header__logo { grid-area: logo; display: flex; width: 200px; padding-left: 20px; } .l-header__btns { grid-area: btns; display: flex; margin-left: auto; padding-right: 20px; gap: 16px; } .l-header__btns a { width: 100%; display: none; } .l-header__hamburger { display: flex; } .l-header__nav { grid-area: navi; background-color: rgba(0, 115, 206, 0.9); max-height: 0; overflow: hidden; transition: all 0.7s ease-out; } .l-header__nav.active { max-height: 90lvh; overflow: scroll; } @media (min-width: 1200px) { .l-header { padding-top: 16px; } .l-header__logo { width: 300px; } .l-header__hamburger { display: none; } .l-header__btns { width: 100%; max-width: 700px; } .l-header__btns a { display: flex; gap: 16px; } .l-header__nav { background-color: initial; padding: initial; max-height: initial; margin-top: 16px; } } .l-main { overflow: hidden; } .l-main__kv { position: relative; width: 100%; height: 80svh; } .l-main__contact { margin-top: 200px; margin-bottom: 64px; padding: 0 20px; } .l-main__contact--first { margin-top: 240px; } .l-main__about { position: relative; z-index: 10; padding-bottom: 40px; background: url("../images/about/bg.jpg") center/cover no-repeat; } .l-main__problem { transform: translateY(-50px); position: relative; padding: 128px 20px 64px; background: url("../images/problem/bg.png") center/cover no-repeat; background-color: #ededed; } .l-main__problem::after { content: ""; position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); border-left: 50vw solid transparent; border-right: 50vw solid transparent; border-top: 50px solid #ededed; } .l-main__message { padding: 80px 20px 0; } .l-main__works { padding: 64px 20px; background: url("../images/works/bg.png") center/cover no-repeat; } .l-main__uservoice { padding: 64px 20px; background-color: #fffdf8; } .l-main__faq { padding: 64px 20px; background-color: #f5faff; } .l-main__area { position: relative; padding: 64px 20px; background: url("../images/about/bg.jpg") center/cover no-repeat; background-color: #ededed; } @media (min-width: 768px) { .l-main__kv { height: 600px; } .l-main__contact--first { margin-top: 180px; } .l-main__problem { padding: 128px 32px 64px; } .l-main__message { padding: 120px 32px 0; } .l-main__works { padding: 64px 32px; } .l-main__uservoice { padding: 64px 32px; } .l-main__faq { padding: 64px 32px; } .l-main__area { padding: 64px 32px; } } @media (min-width: 1200px) { .l-main__kv { height: 800px; } .l-main__problem { padding: 180px 120px 40px; } .l-main__message { padding: 120px 120px 0; } .l-main__works { padding: 80px 32px; } .l-main__uservoice { padding: 80px 120px; } .l-main__faq { padding: 80px 120px; } .l-main__area { padding: 80px 120px; } } .l-footer { display: grid; grid-template-columns: 1fr; } .l-footer__company { background-color: #ffffff; padding: 64px 20px; } .l-footer__nav { background-color: #FFEB3B; padding: 64px 20px; } .l-footer__btns { width: 100%; max-width: 320px; } .l-footer__rights { background-color: #0073CE; color: #ffffff; font-size: 1.4rem; text-align: center; padding: 12px; } @media (min-width: 768px) { .l-footer__nav { padding: 64px 120px; } } @media (min-width: 1200px) { .l-footer { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "company navi" "rights rights"; } .l-footer__company { grid-area: company; padding: 80px 64px 80px 0; } .l-footer__nav { grid-area: navi; padding: 80px 0 80px 64px; } .l-footer__rights { grid-area: rights; } } @media (min-width: 1440px) { .l-footer__company { grid-area: company; padding: 80px 120px 80px 0; } .l-footer__nav { grid-area: navi; padding: 80px 0 80px 120px; } }/*# sourceMappingURL=style.css.map */