@charset "UTF-8"; /* Theme Name: royl */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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 */ *: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; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 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; } /* 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; } /* CSS Document */ * { backface-visibility: hidden; /* animation時のにじみ防止 */ -webkit-backface-visibility: hidden; /* animation時のにじみ防止 */ -webkit-font-smoothing: antialiased; /* animation時の文字にじみ防止 */ -moz-osx-font-smoothing: grayscale; /* animation時の文字にじみ防止 */ } html { scroll-behavior: smooth; } body { font-family: YakuHanMP, "yu-mincho-pr6n", sans-serif; font-weight: 400; font-style: normal; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; word-break: break-word; overflow-wrap: break-word; background-color: #fefffd; line-height: 1.8; color: #231815; } input[type=checkbox] { border: 1px solid #231815; width: 16px; height: 16px; padding: 0; } ul, ol, dl, li, strong, dt, dd, p, div, span, a, article, label, input, select, textarea { font-size: calc(15px + (16 - 15) * (100vw - 414px) / (1280 - 414)); font-weight: normal; font-weight: 500; letter-spacing: 0.1rem; color: #05061b; font-feature-settings: "palt 1"; } @media (max-width: 768px) { ul, ol, dl, li, strong, dt, dd, p, div, span, a, article, label, input, select, textarea { line-height: 1.5; } } h1, h2, h3, h4, h5, h6 { font-weight: bold; } .bold { font-weight: bold !important; } .tal { text-align: left !important; } .tar { text-align: right !important; } .tac { text-align: center !important; } body { max-width: 1280px; margin: 0 auto; } header { position: fixed; top: 0; width: 320px; height: 100vh; background-color: #fefffd; overflow-y: auto; padding: 40px 24px; } header .header_inner { display: flex; flex-direction: column; gap: 40px; } header .header_inner .logo { display: flex; justify-content: center; } header .header_inner .logo img { width: 50px; } header .header_inner .header_nav { display: flex; flex-direction: column; width: -moz-fit-content; width: fit-content; margin: 0 auto; } header .header_inner .header_nav ul { display: flex; flex-direction: column; gap: 36px; max-width: 200px; justify-content: center; } header .header_inner .header_nav ul li a { font-weight: bold; } header .header_inner .header_nav ul li a img { margin-right: 8px; } header .header_inner .header_nav .contact_line { display: flex; justify-content: center; font-weight: 800; text-align: center; margin: 40px 16px 0; padding: 20px; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; border-radius: 40px; border: #231815 solid 2px; color: #231815; background-color: #FCFEFF; cursor: pointer; transition: color 0.3s ease; transition: background-color 0.3s ease; } header .header_inner .header_nav .contact_line:hover { color: #fff; background: #3DBCF5; border: #3DBCF5 solid 2px; } header .header_inner .header_nav .contact_line .line_logo { display: flex; justify-content: center; } header .header_inner .header_nav .contact_line img { width: 20px; margin-right: 8px; } header .header_inner .sns_area { display: flex; justify-content: space-around; margin: 20px auto 0; width: 270px; padding-top: 20px; border-top: 2px solid #231815; } header .header_inner .sns_area img { width: 60px; } @media (max-width: 1200px) { header { position: inherit; top: unset; width: 100%; height: auto; padding: 24px 24px 16px 24px; } header .header_inner { flex-direction: row; } header .header_inner .header_nav ul { flex-direction: row; } } @media (max-width: 1200px) { header .header_inner .logo img { width: 100px; } } .hero_outer { position: relative; max-width: 1350px; margin-left: 320px; margin-top: 60px; padding: 10px 10px 0 60px; display: flex; justify-content: center; align-items: center; } @media (max-width: 1200px) { .hero_outer { margin-left: auto; margin-top: 20px; padding: 0; } } .hero_outer .box_img { margin: 0 auto; max-width: 90vw; } .hero_outer .box_img > img { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); } @media (max-width: 1200px) { .hero_outer .box_img { margin: 0 auto; } .hero_outer .box_img img { max-width: 90vw; } } .hero_outer .tr01 { z-index: -1; position: absolute; top: 0%; left: 0%; } .hero_outer .tr02 { z-index: -1; position: absolute; bottom: -20%; right: 10%; } .hero_outer .tr03 { z-index: -1; position: absolute; bottom: -5%; right: 2%; } main { max-width: 1350px; margin-left: 320px; padding: 10px 10px 0 60px; } main .hero { margin-top: 16px; } @media (max-width: 1200px) { main { margin-left: auto; padding: 0px 24px; } } main h2 { font-size: clamp(1.625rem, 0.989rem + 3.18vw, 3.375rem); line-height: 1; text-align: center; } @media (max-width: 768px) { main h2 { letter-spacing: 0.2rem; } } main .subttl { font-weight: 700; font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem); letter-spacing: 0.1rem; margin-bottom: 12px; } @media (max-width: 768px) { main .subttl { line-height: 1.5; } } main .box_outer { display: flex; justify-content: center; gap: 40px; width: 100%; } @media (max-width: 768px) { main .box_outer { display: block; justify-content: flex-end; } } main .box_outer.odd { flex-direction: row-reverse; } main .txtbox { min-width: 388px; } main .box_img { display: flex; margin: 0 auto; width: -moz-fit-content; width: fit-content; max-width: 50%; min-width: 300px; } main .box_img img { box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2); border-radius: 10px; } @media (max-width: 1200px) { main .txtbox { min-width: unset; } main .box_img { min-width: 300px; max-width: unset; } } @media (max-width: 768px) { main .txtbox { margin-bottom: 16px; } } main .btn_area { margin: 20px auto 0; display: flex; background-color: #777777; padding: 8px 42px; border-radius: 50px; width: -moz-fit-content; width: fit-content; } main .btn_area .btn_inner p { font-weight: bold; font-size: 1.2rem; color: #fff; } main .btn_area .btn_box { display: flex; justify-content: center; align-items: center; color: #fff; } main .btn_area .btn_box .btn_icon { display: flex; justify-content: center; align-items: center; margin-left: 8px; } main .contact.btn_icon { margin-right: 16px; margin-left: 0; } main .btn_contact { display: flex; justify-content: center; align-items: center; max-width: 300px; font-weight: 800; text-align: center; margin: 40px auto 0; padding: 16px; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; border-radius: 40px; border: #231815 solid 2px; color: #231815; background-color: #FCFEFF; cursor: pointer; transition: color 0.3s ease; transition: background-color 0.3s ease; } main .btn_contact:hover { color: #fff; background: #231815; border: #231815 solid 2px; } @media (max-width: 768px) { main .btn_contact { font-size: 1rem; max-width: 260px; } } main .btn_contact .icon { display: flex; justify-content: center; } main .btn_contact img { margin-right: 16px; } @media (max-width: 768px) { main .btn_contact img { width: 28px; } } main .cform { cursor: pointer; transition: color 0.3s ease; transition: background-color 0, 3s ease; } main .cform .icon { color: #3DBCF5; width: 40px; margin-right: 16px; transition: color 0.3s ease; } main .cform:hover { color: #fff; background-color: #3DBCF5; } main .cform:hover .icon { color: #fff; } .sec07 .box_outer { display: block; } .sec07 .box_outer .txtbox h2 { margin: 0 auto; width: -moz-fit-content; width: fit-content; } .sec07 .box_outer .txtbox .subttl { margin: 0 auto 12px; width: -moz-fit-content; width: fit-content; } .sec07 .box_outer .txtbox .tac { margin: 0 auto; width: -moz-fit-content; width: fit-content; } .contact_area .box_outer { display: block; gap: unset; } .contact_area .box_outer .txtbox h2 { margin: 0 auto; width: -moz-fit-content; width: fit-content; } .contact_area .box_outer .txtbox .subttl { margin: 0 auto 12px; width: -moz-fit-content; width: fit-content; } .contact_area .contact.box_outer { display: flex; justify-content: space-around; gap: 16px; flex-flow: wrap; width: 100%; } .contact_area .contact.box_outer .contact_img.box_img { width: 46%; min-width: unset; } section { margin-top: 200px; position: relative; } section .tr01 { position: absolute; top: -20%; left: 60%; z-index: -1; } section .tr02 { position: absolute; top: 80%; left: 10%; z-index: -1; } @media (max-width: 768px) { section { margin-top: 100px; } section:first-of-type { margin-top: 60px; } section .tr01 { top: 10%; left: 70%; } section .tr02 { top: 90%; left: 10%; } section .tr02 img { width: 70%; } } section.sec01 .tr01, section.sec05 .tr01 { top: -20%; left: 0%; } section.sec01 .tr02, section.sec05 .tr02 { top: 90%; left: 40%; } @media (max-width: 768px) { section.sec01 .tr01, section.sec05 .tr01 { top: 70%; left: 70%; } section.sec01 .tr02, section.sec05 .tr02 { top: 90%; left: 40%; } } section.sec03 .tr01, section.sec06 .tr01 { top: -30%; left: 20%; } section.sec03 .tr02, section.sec06 .tr02 { top: 60%; left: 90%; } @media (max-width: 768px) { section.sec03 .tr01, section.sec06 .tr01 { top: -10%; left: 50%; } section.sec03 .tr02, section.sec06 .tr02 { top: 10%; left: 10%; } } .sec07 .tr01 { top: 0%; left: 10%; } .sec07 .tr02 { left: 60%; } .contact_area .tr01 { top: 10%; } .contact_area .tr02 { top: 70%; } footer { max-width: 1350px; margin-left: 350px; background-color: #fff; margin-top: 100px; } @media (max-width: 1200px) { footer { margin-left: 0; padding: 0; } } footer .footer_wrapper { padding: 100px 24px 0; max-width: 930px; margin: 0 auto; } @media (max-width: 768px) { footer .footer_wrapper { padding: 80px 8px 0; } footer .footer_wrapper p { font-size: 0.8rem; } } footer .box { display: flex; justify-content: center; } footer .box .sns_area { display: flex; justify-content: space-around; width: 240px; } footer .box .sns_area img { width: 60px; } footer .box.address { margin: 80px auto 60px; } @media (max-width: 768px) { footer .box.address { margin: 40px auto 0px; } } footer .box.add_inner { display: flex; flex-direction: column; gap: 16px; } footer .box.add_inner .name { font-size: 1.1em; padding-bottom: 8px; } @media (max-width: 768px) { footer .box.logoarea { display: block; margin: 0 auto 20px; gap: unset; width: -moz-fit-content; width: fit-content; } footer .box.logoarea .f_logo { margin-bottom: 16px; } footer .box.address { display: block; width: -moz-fit-content; width: fit-content; } footer .box.address .add_inner { gap: 8px; } footer .box.address .add_inner:first-child { margin-bottom: 32px; } } footer .footer_cr { margin-top: 100px; display: flex; justify-content: center; align-items: center; background-color: #231815; color: #fff; font-weight: 700; font-size: 0.8em; } @media (max-width: 768px) { footer .footer_cr { margin-top: 40px; } } .mob-show { display: none; } @media (max-width: 768px) { .mob-show { display: block !important; } } .mob-clear { display: block; } @media (max-width: 768px) { .mob-clear { display: none !important; } } .mob-hidden { visibility: visible; } @media (max-width: 768px) { .mob-hidden { visibility: hidden !important; } } .pad-show { display: none; } @media (min-width: 769px) and (max-width: 1024px) { .pad-show { display: block !important; } } .pad-clear { display: block; } @media (min-width: 769px) and (max-width: 1024px) { .pad-clear { display: none !important; } } .pad-hidden { visibility: visible; } @media (min-width: 769px) and (max-width: 1024px) { .pad-hidden { visibility: hidden !important; } } .web-show { display: none; } @media (min-width: 1025px) and (max-width: 1200px) { .web-show { display: block !important; } } .web-clear { display: block; } @media (min-width: 1025px) and (max-width: 1200px) { .web-clear { display: none !important; } } .web-hidden { visibility: visible; } @media (min-width: 1025px) and (max-width: 1200px) { .web-hidden { visibility: hidden !important; } } .max-show { display: none; } @media (min-width: 1201px) and (max-width: 1600px) { .max-show { display: block !important; } } .max-clear { display: block; } @media (min-width: 1201px) and (max-width: 1600px) { .max-clear { display: none !important; } } .max-hidden { visibility: visible; } @media (min-width: 1201px) and (max-width: 1600px) { .max-hidden { visibility: hidden !important; } } .mob-pad-show { display: none; } @media (max-width: 1024px) { .mob-pad-show { display: block !important; } } .mob-pad-clear { display: block; } @media (max-width: 1024px) { .mob-pad-clear { display: none !important; } } .mob-pad-hidden { visibility: visible; } @media (max-width: 1024px) { .mob-pad-hidden { visibility: hidden !important; } } .pad-web-show { display: none; } @media (min-width: 769px) and (max-width: 1200px) { .pad-web-show { display: block !important; } } .pad-web-clear { display: block; } @media (min-width: 769px) and (max-width: 1200px) { .pad-web-clear { display: none !important; } } .pad-web-hidden { visibility: visible; } @media (min-width: 769px) and (max-width: 1200px) { .pad-web-hidden { visibility: hidden !important; } } .web-max-show { display: none; } @media (min-width: 1025px) and (max-width: 1600px) { .web-max-show { display: block !important; } } .web-max-clear { display: block; } @media (min-width: 1025px) and (max-width: 1600px) { .web-max-clear { display: none !important; } } .web-max-hidden { visibility: visible; } @media (min-width: 1025px) and (max-width: 1600px) { .web-max-hidden { visibility: hidden !important; } } .mob-web-show { display: none; } @media (max-width: 1200px) { .mob-web-show { display: block !important; } } .mob-web-clear { display: block; } @media (max-width: 1200px) { .mob-web-clear { display: none !important; } } .mob-web-hidden { visibility: visible; } @media (max-width: 1200px) { .mob-web-hidden { visibility: hidden !important; } } .mob-max-show { display: none; } @media (max-width: 1600px) { .mob-max-show { display: block !important; } } .mob-max-clear { display: block; } @media (max-width: 1600px) { .mob-max-clear { display: none !important; } } .mob-max-hidden { visibility: visible; } @media (max-width: 1600px) { .mob-max-hidden { visibility: hidden !important; } } .pad-max-show { display: none; } @media (min-width: 769px) and (max-width: 1600px) { .pad-max-show { display: block !important; } } .pad-max-clear { display: block; } @media (min-width: 769px) and (max-width: 1600px) { .pad-max-clear { display: none !important; } } .pad-max-hidden { visibility: visible; } @media (min-width: 769px) and (max-width: 1600px) { .pad-max-hidden { visibility: hidden !important; } } .openbtn { position: fixed; z-index: 9999; top: 10px; right: 8px; cursor: pointer; width: 48px; height: 48px; border-radius: 5px; background-color: #231815; box-sizing: content-box; } .openbtn span { display: inline-block; transition: all 0.3s; position: absolute; left: 8px; height: 3px; border-radius: 2px; background-color: #fff; width: 32px; } .openbtn span:nth-of-type(1) { top: 16px; } .openbtn span:nth-of-type(2) { top: 24px; } .openbtn span:nth-of-type(3) { top: 32px; } .openbtn:hover span:nth-of-type(1) { top: 14px; } .openbtn:hover span:nth-of-type(3) { top: 34px; } .openbtn.active span:nth-of-type(1) { top: 18px; left: 8px; transform: translateY(6px) rotate(-45deg); width: 32px; } .openbtn.active span:nth-of-type(2) { opacity: 0; } .openbtn.active span:nth-of-type(3) { top: 30px; left: 8px; transform: translateY(-6px) rotate(45deg); width: 32px; } .no-scroll { overflow: hidden; height: 100%; } .header_nav_hum { position: fixed; z-index: 999; top: 0; right: -120%; width: 100%; height: 100vh; background: #fefffd; transition: all 0.6s; } .header_nav_hum.panelactive { right: 0; } .header_nav_hum.panelactive .header_nav_hum_wrapper { position: fixed; z-index: 999; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; } .header_nav_hum .header_nav_hum_block { position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 16px); text-align: center; } .header_nav_hum_block .header_logo_mob { margin-bottom: 40px; max-width: 180px; } .header_nav_hum_block li:not(:last-of-type) { padding-bottom: 20px; } .header_nav_hum_block a { font-weight: 700; } .header_nav_hum_block img { padding-right: 8px; } .header_nav_hum_block .btn_contact { display: flex; justify-content: center; align-items: center; max-width: 80%; font-weight: 800; text-align: center; margin: 40px auto 0; padding: 20px; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; border-radius: 40px; border: #777777 solid 2px; color: #777777; font-size: 1.2rem; background-color: #FCFEFF; cursor: pointer; transition: color 0.3s ease; transition: background-color 0.3s ease; } .header_nav_hum_block .btn_contact:hover { color: #fff; background: #3DBCF5; border: #3DBCF5 solid 2px; } @media (max-width: 768px) { .header_nav_hum_block .btn_contact { font-size: 1rem; max-width: 300px; } } .header_nav_hum_block .btn_contact .icon { display: flex; justify-content: center; } .header_nav_hum_block .btn_contact img { width: 32px; } @media (max-width: 768px) { .header_nav_hum_block .btn_contact img { width: 28px; } }/*# sourceMappingURL=style.css.map */