@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; } body{ color: #333; font-family: "Noto Sans JP"; font-size: 16px; line-height: 1.6; } .wrap{ width: 1000px; padding-right: 20px; padding-left: 20px; box-sizing: content-box; margin-right: auto; margin-left: auto; } .wrap.mw1200{ width: 1200px; } .din{ font-family: "din-2014", sans-serif; } .ttl01{ text-align: center; font-size: 44px; font-weight: 700; position: relative; padding-bottom: 35px; } .ttl01:after{ content: ""; position: absolute; right: 0; bottom: 0; left: 0; display: block; margin: 0 auto; width: 60px; height: 6px; background: #008080; } .marker{ color: #008080; background:linear-gradient(transparent 70%, #feef90 70%); } .btn{ font-size: 20px; font-weight: 700; text-align: center; display: inline-block; width: 100%; max-width: 560px; padding: 12px; border-radius: 300px; transition: background 0.3s ,color 0.3s ; } .btn.btn-orange{ color: #fff; background: #FF9000; border: 2px solid #FF9000; } .btn.btn-lightgreen{ color: #008080; background: rgba(47, 163, 163, 0.30); border: 2px solid rgba(47, 163, 163, 0.30); } .btn.btn-green{ color: #fff; font-size: 18px; padding: 20px 50px; background: url(images/common/ic-arrow-bottom-white.svg) right 20px center no-repeat #2FA3A3; } .btn.btn-green small{ color: #FFF064; font-size: 16px; } .btn.btn-more{ color: #008080; border: 2px solid #2FA3A3; background: url(images/common/ic-arrow-bottom-green.svg) right 20px center no-repeat #FFF; max-width: 490px; } .open.btn.btn-more{ background: url(images/common/ic-arrow-top-green.svg) right 20px center no-repeat #FFF; } .t-center{ text-align: center;} .t-left{ text-align: left;} .t-right{ text-align: right;} img{ vertical-align: bottom;} @media screen and (max-width: 1000px) { .wrap{ padding-right: 24px; padding-left: 24px; width: auto; } .wrap.mw1200{ width: auto; } .ttl01{ font-size: 32px; } .ttl01:after{ width: 50px; } } /* none */ @media screen and (min-width: 1001px) { .sp{ display:none!important;}} @media screen and (max-width: 1000px) { .pc{ display:none!important;}} #wrapper{ padding-top: 80px; } @media screen and (max-width: 1000px) { #wrapper{ padding-top: 63px; } } /*---------------------------------------------- header -----------------------------------------------*/ header{ width: 100%; height: 80px; padding: 10px; position: fixed; z-index: 99; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; background: #fff; } header .headerwrap{ display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 99; } header .logo{ padding-left: 20px; } header .spmenu{ display: none;} header nav{ font-weight: 700; } header nav ul{ display: flex;} header nav ul li a{ padding: 14px 26px; display: inline-block; } header nav ul li.header-contact a{ color: #fff; border-radius: 5px; background: #FF9000; margin-left: 10px; border: 2px solid #FF9000; transition: background 0.3s ,color 0.3s ; } /*------------------------------ responsive ------------------------------*/ @media screen and (max-width: 1375px) { header nav ul li a{ padding: 18px 20px; } } @media screen and (max-width: 1275px) { header{ width: 1260px; } } @media screen and (max-width: 1000px) { header{ width: 100%; height: 63px; padding: 20px 40px; display: block; } header .logo{ width: 200px; padding-left: 0; } header .spmenu{ color: #fff; font-size: 1.6rem; display: block; float: right; width: 30px; height: 33px; cursor: pointer; z-index: 101; position: relative; } header .spmenu span, header .spmenu span:before, header .spmenu span:after{ position: absolute; display: block; background: #000; width: 30px; height: 3px; transition: all .3s; } header .spmenu span{ top: 6px; left: 0; } header .spmenu span:before,header .spmenu span:after{ content: ""; left: 0; } header .spmenu span:before{ top: 9px; } header .spmenu span:after{ top: 18px; } header.open .spmenu span{ top: -5px; -webkit-transform: translateY(20px) rotate(-45deg); transform: translateY(20px) rotate(-45deg); } header.open .spmenu span:before{ opacity: 0; } header.open .spmenu span:after{ -webkit-transform: translateY(-20px) rotate(90deg); transform: translateY(-20px) rotate(90deg); top: 20px; } header nav{ top: 0; right: 0; width: 100%; background: #fff; text-align: center; } header nav{ overflow: auto; display: block; position: absolute; z-index: 1; top: 80px; width: 100%; left: 0; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: center top; transform-origin: center top; opacity: 0; box-shadow: 0 0 0 100vh #fff; background: #fff; height: calc(100vh - 80px); } header.open nav{ -webkit-transform: scale(1); transform: scale(1); opacity: 1; transition-delay: 0s, 0s, 0s; } header nav ul{ display: block;} header nav ul li.header-contact a{ margin-left: 0; } } /* mv */ #mv{ padding: 35px 30px 40px 0; display: flex; justify-content: flex-end; flex-direction: row-reverse; align-items: center; background: url(images/mv/mv-bg.svg) right -20px top / auto 100% no-repeat #eef5f5; min-width: 1310px; } #mv figure{ width: 41.388%; max-width: 596px; margin-left: 30px; } #mv .mv-cont{ padding-left: calc(50% - 580px); flex: 1; } #mv .mv-ttl{ position: relative; } #mv .mv-ttl h1{ font-size: 90px; font-weight: 700; line-height: 120%; margin-bottom: 30px; } #mv .mv-ttl h1 span{ color: #008080; } #mv .mv-ttl h1 small{ font-size: 64px; font-weight: 400; } #mv .mv-ttl p{ font-size: 17px; font-weight: 700; line-height: 150%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: -35px; left: 450px; background: #fff; width: 164px; height: 164px; border-radius: 50%; } #mv .mv-ttl p span{ color: #FA7627; font-family: "din-2014", sans-serif; font-size: 33px; font-weight: 700; line-height: 110%; } #mv .mv-ttl p span small{ font-size: 18px; font-family: "Noto Sans JP"; } #mv .mv-lead{ font-size: 20px; font-weight: 700; line-height: 170%; margin-bottom: 30px; } #mv .mv-tag-cont{ display: flex; flex-wrap: wrap; margin-bottom: 40px; } #mv .mv-tag-cont span{ color: #008080; text-align: center; font-size: 14px; font-weight: 700; line-height: 150%; display: block; padding: 8px 18px; border-radius: 300px; border: 2px solid #008080; background: #FFF; margin: 0 10px 10px 0; } /*------------------------------ responsive ------------------------------*/ @media screen and (max-width: 1000px) { #mv{ padding: 0 0 40px; display: block; background: url(images/mv/mv-bg.svg) right -20px top / 95% auto no-repeat #eef5f5; min-width: inherit; } #mv figure{ width: 100%; padding-left: 17.5%; max-width: inherit; margin: 0 0 15%; } #mv .mv-cont{ padding: 0 24px; } #mv .mv-ttl{ position: relative; } #mv .mv-ttl h1{ font-size: 52px; margin-bottom: 20px; } #mv .mv-ttl h1 small{ font-size: 36px; } #mv .mv-ttl p{ font-size: 12.5px; line-height: 150%; top: -50px; right: 0; left: inherit; width: 100px; height: 100px; } #mv .mv-ttl p span{ font-size: 24.265px; } #mv .mv-ttl p span small{ font-size: 12.5px; } #mv .mv-tag-cont{ display: block; margin-bottom: 20px; } #mv .mv-tag-cont span{ padding: 10px; margin: 0 0 5px; } } /* intro */ #intro{ text-align: center; padding: 140px 0 120px; background: url(images/intro/intro-bg.svg) left -36px top no-repeat; position: relative; } #intro:after{ content: ""; position: absolute; top: 100%; right: 0; left: 0; margin: 0 auto; width: 431px; height: 82px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); } #intro .ttl01{ margin-bottom: 60px; } #intro .intro-lead01{ font-size: 18px; margin-bottom: 40px; } #intro ul{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2%; margin-bottom: 30px; } #intro ul li{ width: 49%; border-radius: 10px; padding: 30px; background: #F5F2EA; margin-bottom: 20px; } #intro ul li figure{ width: 140px; height: 140px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 20px; } #intro ul li p{ text-align: center; font-size: 20px; font-weight: 700; line-height: 170%; } #intro ul li p span{ color: #FFF; line-height: 1.3; background: #008080; display: inline-block; padding: 0 3px; margin: 0 3px; } #intro .intro-lead02{ font-size: 20px; font-weight: 700; margin-bottom: 20px; } #intro .intro-lead03{ font-size: 30px; font-weight: 700; } /*------------------------------ responsive ------------------------------*/ @media screen and (max-width: 1000px) { #intro{ padding: 80px 0 77px; background: url(images/intro/intro-bg.svg) left -5% top / 30% auto no-repeat; } #intro:after{ top: 99.9%; width: 220px; height: 49px; } #intro .intro-lead01{ text-align: left; } #intro .ttl01{ margin-bottom: 50px; } #intro ul{ display: block; margin-bottom: 40px; } #intro ul li{ width: 100%; margin-bottom: 10px; } #intro ul li figure{ width: 126px; height: 126px; } #intro ul li:nth-child(1) figure img{ width: 98.15px; } #intro ul li:nth-child(2) figure img{ width: 78.3px; } #intro ul li:nth-child(3) figure img{ width: 80.6px; } #intro ul li:nth-child(4) figure img{ width: 44.44px; } #intro .intro-lead03{ font-size: 26px; } } /* design */ #design{ padding: 200px 0 100px; background: url(images/design/design-bg.svg) right -26px top no-repeat #EEF5F5; } #design .design-lead01{ text-align: center; font-size: 34px; font-weight: 700; margin-bottom: 20px; } #design h3{ margin-bottom: 60px; } #design .design-lead02{ text-align: center; font-size: 18px; font-weight: 400; margin-bottom: 40px; } #design .design-clm2{ display: flex; justify-content: space-between; margin-bottom: 160px; } #design .design-clm2 dl{ width: 49%; background: #fff; border-radius: 20px; } #design .design-clm2 dl dt{ color: #fff; text-align: center; font-size: 20px; font-weight: 700; padding: 20px; border-radius: 20px 20px 0 0; } #design .design-clm2 dl dt.design-bg-blue{ background: #008080; } #design .design-clm2 dl dt.design-bg-green{ background: #4BA74E; } #design .design-clm2 dl dd{ padding: 30px 40px; } #design h4{ margin-bottom: 100px; } #design .design-arrow-box{ width: 1000px; display: flex; justify-content: space-between; } #design .design-arrow-box div{ text-align: center; font-size: 20px; font-weight: 700; width: 425px; border-radius: 20px; background: #fff; position: relative; padding: 68px 30px 30px; margin-bottom: 60px; } #design .design-arrow-box div figure{ position: absolute; top: -60px; right: 0; left: 0; margin: 0 auto; width: 116px; height: 116px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } #design .design-arrow-box div.design-box-blue figure{ background: #008080; } #design .design-arrow-box div.design-box-green figure{ background: #4BA74E; } #design .design-arrow-box div p{ margin-bottom: 20px; } #design .design-arrow-box div ul li{ padding: 10px 0; border-radius: 300px; margin-bottom: 10px; } #design .design-arrow-box div.design-box-blue ul li{ color: #008080; border: 1px solid #008080; background: #F4FBFB; } #design .design-arrow-box div.design-box-green ul li{ color: #4BA74E; border: 1px solid #4BA74E; background: #FAFFFA; } #design .design-arrow-box div p.design-arrow{ color: #fff; font-size: 24px; line-height: 1.3; position: absolute; width: 150px; height: 159px; display: flex; align-items: center; } #design .design-arrow-box div.design-box-blue p.design-arrow{ top: 0; left: 100%; background: url(images/design/design-arrow-right.svg) center no-repeat; padding-left: 13px; } #design .design-arrow-box div.design-box-green p.design-arrow{ bottom: -10px; right: 100%; background: url(images/design/design-arrow-left.svg) center no-repeat; padding-left: 64px; } #design .design-box{ text-align: center; border-radius: 40px; background: #fff; margin-bottom: 40px; } #design .design-box h5{ color: #FFEF91; text-align: center; font-size: 30px; font-weight: 700; padding: 30px; border-radius: 40px 40px 0 0; background: #008080; } #design .design-box .design-inner{ padding: 50px 100px 60px; } #design .design-box .design-inner .design-plus{ display: flex; justify-content: center; } #design .design-box .design-inner .design-plus div{ width: 320px; height: 320px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0 55px 40px; } #design .design-box .design-inner .design-plus div.design-circle-blue{ border: 1px solid #008080; background: radial-gradient(81.88% 81.88% at 50% 50%, #FFF 0%, #EDF8F8 100%); position: relative; } #design .design-box .design-inner .design-plus div.design-circle-blue:after{ content: ""; position: absolute; top: 0; right: -88px; bottom: 0; margin: auto 0; display: block; background: url(images/design/design-plus.svg) center no-repeat; width: 62px; height: 62px; } #design .design-box .design-inner .design-plus div.design-circle-green{ border: 1px solid #4BA74E; background: radial-gradient(81.88% 81.88% at 50% 50%, #FFF 0%, #FAFFFA 100%); } #design .design-box .design-inner .design-plus div h6{ text-align: center; font-size: 30px; font-weight: 700; margin-bottom: 20px; } #design .design-box .design-inner .design-plus div.design-circle-blue h6{ color: #008080; } #design .design-box .design-inner .design-plus div.design-circle-green h6{ color: #4BA74E; } #design .design-box .marker{ color: #333; font-size: 24px; font-weight: 700; display: inline-block; margin-bottom: 20px; } #design .design-box .design-caution{ text-align: right; font-size: 12px; } #design .design-box .design-pyramid{ background: url(images/design/design-pyramid.svg) center no-repeat; height: 448px; margin-bottom: 30px; } #design .design-box .design-pyramid dl{ display: flex; align-items: center; height: 109px; margin: 0 40px 5px 400px; } #design .design-box .design-pyramid dl dt{ width: 9.5em; margin-right: 1.5em; text-align: center; font-size: 20px; font-weight: 700; } #design .design-box .design-pyramid dl.design-pyramid04 dt{ color: #4B66C9; } #design .design-box .design-pyramid dl.design-pyramid03 dt{ color: #3B78C9; } #design .design-box .design-pyramid dl.design-pyramid02 dt{ color: #2F8FB8; } #design .design-box .design-pyramid dl.design-pyramid01 dt{ color: #2FA3A3; } #design .design-box .design-pyramid dl dd{ font-size: 15px; text-align: left; flex: 1; } #design .design-box .design-box2{ text-align: left; padding: 40px; border-radius: 10px; background: #F5F2EA; } /*------------------------------ responsive ------------------------------*/ @media screen and (max-width: 1000px) { #design{ padding: 100px 0 60px; background: url(images/design/design-bg.svg) right -5% top / 15% auto no-repeat #EEF5F5; } #design .design-lead01{ font-size: 30px; margin-bottom: 15px; } #design h3{ margin-bottom: 50px; } #design .design-lead02{ text-align: left; } #design .design-clm2{ display: block; margin-bottom: 100px; } #design .design-clm2 dl{ width: 100%; border-radius: 10px; margin-bottom: 20px; } #design .design-clm2 dl dt{ padding: 15px; border-radius: 10px 10px 0 0; } #design .design-clm2 dl dd{ padding: 24px; } #design .design-arrow-box{ width: auto; display: block; } #design .design-arrow-box div{ font-size: 16px; width: auto; border-radius: 10px; padding: 62px 25px 20px; margin-bottom: 40px; } #design .design-arrow-box div:first-child{ margin-bottom: 130px; } #design .design-arrow-box div figure{ top: -55px; width: 104px; height: 104px; } #design .design-arrow-box div:nth-child(1) figure img{ width: 47.49px; } #design .design-arrow-box div:nth-child(2) figure img{ width: 37.46px; } #design .design-arrow-box div p{ font-size: 20px; margin-bottom: 12px; } #design .design-arrow-box div ul li{ padding: 5px 0; } #design .design-arrow-box div p.design-arrow{ justify-content: center; font-size: 20px; width: 140px; height: 130px; } #design .design-arrow-box div.design-box-blue p.design-arrow{ top: inherit; bottom: -142px; left: 0; background: url(images/design/design-arrow-bottom.svg) center no-repeat; padding: 20px 0 0; align-items: flex-start; } #design .design-arrow-box div.design-box-green p.design-arrow{ top: -130px; bottom: inherit; right: 0; background: url(images/design/design-arrow-top.svg) center no-repeat; padding: 20px 0 0px; } #design .design-box{ border-radius: 20px; margin-bottom: 20px; } #design .design-box h5{ font-size: 26px; padding: 20px; border-radius: 20px 20px 0 0; } #design .design-box .design-inner{ padding: 30px 24px 40px; } #design .design-box .design-inner .design-plus{ display: block; margin: 0 auto; } #design .design-box .design-inner .design-plus div{ width: 260px; height: 260px; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0 auto 30px; } #design .design-box .design-inner .design-plus div.design-circle-blue{ margin-bottom: 62px; } #design .design-box .design-inner .design-plus div.design-circle-blue:after{ top: inherit; right: 0; bottom: -53px; left: 0; margin: 0 auto; background: url(images/design/design-plus.svg) center / 42px auto no-repeat; width: 42px; height: 42px; } #design .design-box .design-inner .design-plus div h6{ font-size: 24px; margin-bottom: 10px; } #design .design-box .marker{ font-size: 22px; display: inline; } #design .design-box .design-caution{ padding-top: 20px; text-align: center; } #design .design-box .design-pyramid{ background: none; height: auto; margin-bottom: 40px; } #design .design-box .design-pyramid figure{ margin-bottom: 30px; } #design .design-box .design-pyramid dl{ display: block; height: inherit; padding: 20px 24px; margin: 0 0 10px; } #design .design-box .design-pyramid dl.design-pyramid04{ background: #F1F2FA; } #design .design-box .design-pyramid dl.design-pyramid03{ background: #EEF4FA; } #design .design-box .design-pyramid dl.design-pyramid02{ background: #EAF3F8; } #design .design-box .design-pyramid dl.design-pyramid01{ background: #EAF7F7; } #design .design-box .design-pyramid dl dt{ width: auto; margin: 0 0 10px; } #design .design-box .design-box2{ padding: 24px; } } /* faq */ .faq{ position: relative; background: #F2EDE1; padding: 100px 0 80px; } .faq .wrap{ position: relative; z-index: 2; display: flex; justify-content: space-between; } .faq h2{ transform: rotate(90deg); transform-origin: left bottom 0; position: absolute; z-index: 0; top: -.85em; left: -.13em; color: #E9E3D5; font-family: "din-2014", sans-serif; font-size: 300px; font-weight: 500; line-height: 100%; } .faq h3{ color: #008080; font-family: Bahnschrift, 'DIN Alternate', sans-serif; font-size: 44px; font-style: normal; font-weight: 700; line-height: 130%; width: 1em; } .faq .wrap div{ width: 83%; } .faq div dl{ margin-bottom: 20px; } .faq div dl dt{ color: #FFF; font-size: 20px; font-weight: 700; padding: 20px 30px 20px 65px; position: relative; border-radius: 15px 15px 0 0; background: #008080; } .faq div dl dt:before,.faq div dl dd:before{ position: absolute; left: 30px; font-family: "din-2014", sans-serif; font-size: 26px; font-weight: 700; } .faq div dl dt:before{ color: #FFEF91; content: "Q."; top: 19px; } .faq div dl dd{ padding: 20px 30px 30px 65px; border-radius: 0 0 15px 15px; background: #fff; position: relative; } .faq div dl dd:before{ color: #FF9000; content: "A."; top: 12px; } /*------------------------------ responsive ------------------------------*/ @media screen and (max-width: 1000px) { .faq{ padding: 80px 0 60px; } .faq .wrap{ display: block; } .faq h2{ text-align: center; transform: rotate(0deg); top: 0; right: 0; left: 0; margin: 0 auto; font-size: 170px; line-height: 125%; } .faq h3{ text-align: center; font-size: 32px; line-height: 130%; width: auto; margin-bottom: 40px; } .faq .wrap div{ width: 100%; } .faq div dl dt{ color: #FFF; font-size: 20px; font-weight: 700; padding: 15px 24px 15px 65px; } .faq div dl dt:before,.faq div dl dd:before{ font-size: 24px; } .faq div dl dt:before{ top: 13px; } .faq div dl dd{ padding: 20px 24px 20px 65px; } .faq div dl dd:before{ top: 13px; } } /* contact */ .contact{ text-align: center; padding: 100px 0; background: url(images/contact/contact-bg.webp) center / cover no-repeat; } .contact h2{ color: #FFF7B1; font-size: 34px; font-weight: 700; padding-bottom: 54px; position: relative; } .contact h2:before, .contact h2:after{ content: ""; position: absolute; display: block; } .contact h2:before{ left: 60px; bottom: -5px; background: url(images/contact/contact-fig01.svg) center no-repeat; width: 123px; height: 127px; } .contact h2:after{ right: 60px; bottom: -2px; background: url(images/contact/contact-fig02.svg) center no-repeat; width: 123px; height: 124px; } .contact .contact-clm2{ display: flex; justify-content: space-between; } .contact .contact-clm2 div{ width: 49%; padding: 40px 45px 124px; border-radius: 20px; background: #FFF; position: relative; } .contact h3{ text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 20px; } .contact a.btn{ position: absolute; bottom: 40px; left: 45px; width: 82%; } /*------------------------------ responsive ------------------------------*/ @media screen and (max-width: 1000px) { .contact{ padding: 60px 0 40px; background: url(images/contact/contact-bg-sp.webp) center / cover no-repeat; } .contact h2{ font-size: 30px; padding-bottom: 40px; } .contact h2:before{ left: 6px; bottom: -5px; background: url(images/contact/contact-fig01.svg) center / 75.85px auto no-repeat; width: 75.85px; height: 80px; } .contact h2:after{ right: 6px; bottom: -2px; background: url(images/contact/contact-fig02.svg) center / 75.85px auto no-repeat; width: 75.28px; height: 76.2px; } .contact .contact-clm2{ display: block; } .contact .contact-clm2 div{ width: 100%; padding: 40px 24px 30px; border-radius: 10px; margin-bottom: 20px; } .contact a.btn{ margin-top: 20px; position: static; width: 100%; border: none !important; } } /* competitiveness */ #competitiveness{ padding: 140px 0; } #competitiveness .ttl01{ margin-bottom: 60px; } #competitiveness .competitiveness-box01{ margin-bottom: 20px; } #competitiveness .competitiveness-box01.competitiveness-imgleft{ background: linear-gradient(90deg, #fff 0%, #fff 50%, #F5FAFF 50%, #F5FAFF 100%); } #competitiveness .competitiveness-box01.competitiveness-imgright{ background: linear-gradient(90deg, #F5FAFF 0%, #F5FAFF 50%, #fff 50%, #fff 100%); } #competitiveness .competitiveness-box01 .competitiveness-cont{ background: #F5FAFF; border-radius: 40px; padding: 80px 100px 0; display: flex; justify-content: space-between; } #competitiveness .competitiveness-box01.competitiveness-imgleft .competitiveness-cont{ flex-direction: row-reverse; } #competitiveness .competitiveness-box01 .competitiveness-cont div{ width: 490px; } #competitiveness .competitiveness-box01 .competitiveness-cont figure{ width: 490px; } #competitiveness .competitiveness-box01 .competitiveness-cont div h3{ color: #008080; font-size: 30px; font-weight: 700; margin-bottom: 30px; } #competitiveness .competitiveness-box01.competitiveness-imgright .competitiveness-cont figure{ text-align: right; } #competitiveness .competitiveness-box02{ margin-top: 70px; border-radius: 30px; background: #2FA3A3; padding: 40px 65px; display: flex; align-items: center; } #competitiveness .competitiveness-box02 figure{ width: 190px; margin-right: 45px; } #competitiveness .competitiveness-box02 div{ flex: 1; color: #FFF; font-size: 20px; font-weight: 700; display: flex; flex-direction: column; gap: 20px; } #competitiveness .competitiveness-box02 div p span{ color: #FFF064; } #competitiveness .competitiveness-box02 div p small{ font-size: 15px; } /*------------------------------ responsive ------------------------------*/ @media screen and (max-width: 1000px) { #competitiveness{ padding: 80px 0; } #competitiveness .ttl01{ margin: 0 24px 50px; } #competitiveness .competitiveness-box01{ margin-bottom: 30px; } #competitiveness .competitiveness-box01 .competitiveness-cont{ border-radius: 20px; padding: 40px 24px 0; display: block; } #competitiveness .competitiveness-box01.competitiveness-imgleft .competitiveness-cont{ padding-right: 0; } #competitiveness .competitiveness-box01.competitiveness-imgright .competitiveness-cont{ padding-left: 0; } #competitiveness .competitiveness-box01 .competitiveness-cont div{ width: auto; margin-bottom: 30px; } #competitiveness .competitiveness-box01 .competitiveness-cont figure{ text-align: center; width: auto; } #competitiveness .competitiveness-box01.competitiveness-imgright .competitiveness-cont figure{ text-align: center; } #competitiveness .competitiveness-box01 .competitiveness-cont.cont1 figure img{ width: 260px; } #competitiveness .competitiveness-box01 .competitiveness-cont.cont2 figure img{ width: 233px; } #competitiveness .competitiveness-box01 .competitiveness-cont.cont3 figure img{ width: 283px; } #competitiveness .competitiveness-box01 .competitiveness-cont div h3{ font-size: 26px; margin-bottom: 20px; } #competitiveness .competitiveness-box02{ margin-top: 50px; border-radius: 10px; padding: 40px 24px; display: block; } #competitiveness .competitiveness-box02 figure{ margin: 0 auto 30px; } #competitiveness .competitiveness-box02 div p small{ line-height: 160%; display: block; } } /* numeral */ #numeral{ text-align: center; padding: 140px 0; background: url(images/numeral/numeral-bg.svg) left -36px top no-repeat #EEF5F5; } #numeral .ttl01{ margin-bottom: 60px; } #numeral .numeral-lead01{ font-size: 18px; margin-bottom: 40px; } #numeral .numeral-box{ padding: 60px 100px; border-radius: 40px; background: #fff; display: flex; margin-bottom: 20px; } #numeral .numeral-box figure{ width: 425px; margin-right: 65px; } #numeral .numeral-box div{ text-align: left; flex: 1; } #numeral .numeral-box div h3{ font-size: 30px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; } #numeral .numeral-lead02{ color: #999; margin-bottom: 30px; } #numeral .numeral-box div dl{ text-align: center; font-weight: 700; border-radius: 10px; border: 2px solid #3B78C9; background: #FFF; margin-bottom: 15px; } #numeral .numeral-box div dl dt{ color: #FFF; font-size: 20px; padding: 10px; position: relative; background: #3B78C9; } #numeral .numeral-box div dl dt:after{ content: ""; position: absolute; top: 99%; right: 0; left: 0; margin: 0 auto; display: block; background: #3B78C9; width: 22px; height: 10px; clip-path: polygon(0 0, 100% 0, 50% 100%); } #numeral .numeral-box div dl dd{ color: #3B78C9; font-size: 18px; padding: 20px; } #numeral .numeral-box .numeral-tag-cont{ display: flex; flex-wrap: wrap; margin-bottom: 20px; } #numeral .numeral-box .numeral-tag-cont span{ color: #2FA3A3; font-size: 14px; font-weight: 700; padding: 5px 14px; line-height: 1.2; display: inline-block; border-radius: 300px; border: 1px solid #2FA3A3; margin: 0 6px 5px 0; } #numeral .numeral-ac-box{ display: none; } #numeral .numeral-btn-cont{ margin-top: 60px; } #numeral .btn-more{ cursor: pointer; } #numeral .btn-more em.off{ display: none; } #numeral .btn-more.open em.off{ display: inline-block; } #numeral .btn-more.open em.on{ display: none; } /*------------------------------ responsive ------------------------------*/ @media screen and (max-width: 1000px) { #numeral{ text-align: center; padding: 80px 0; background: url(images/numeral/numeral-bg.svg) left -2% top / 24% auto no-repeat #EEF5F5; } #numeral .ttl01{ margin-bottom: 50px; } #numeral .numeral-box{ padding: 24px 24px 30px; border-radius: 20px; display: block; } #numeral .numeral-box figure{ width: auto; margin: 0 0 20px; } #numeral .numeral-box div h3{ font-size: 26px; margin-bottom: 15px; } #numeral .numeral-lead02{ margin-bottom: 20px; } #numeral .numeral-box div dl dt:after{ width: 14px; height: 11px; } #numeral .numeral-box .numeral-tag-cont{ margin-bottom: 15px; } #numeral .numeral-box .numeral-tag-cont span{ margin: 0 5px 5px 0; } #numeral .numeral-btn-cont{ margin-top: 40px; } } /* need */ #need{ text-align: center; padding: 100px 0 140px; background: url(images/need/need-bg.png) left top / 20px auto repeat; } #need .ttl01{ margin-bottom: 60px; } #need .need-lead01{ text-align: center; font-size: 18px; margin-bottom: 40px; } #need ol li{ padding-bottom: 152px; background: url(images/need/need-yes-no.svg) right 560px bottom no-repeat; position: relative; } #need ol li p.need-faq{ text-align: left; font-size: 20px; font-weight: 700; padding: 30px 40px; border-radius: 10px; border: 1px solid #DDD; background: #F8F8F8; } #need ol li a.btn-green{ position: absolute; right: 0; bottom: 40px; } /*------------------------------ responsive ------------------------------*/ @media screen and (max-width: 1000px) { #need{ text-align: left; padding: 80px 0; } #need .ttl01{ margin-bottom: 50px; } #need .need-lead01{ text-align: left; margin-bottom: 50px; } #need ol li{ padding-bottom: 224px; background: url(images/need/need-yes-no-sp.svg) left bottom no-repeat; } #need ol li p.need-faq{ padding: 20px 24px; } #need a.btn-green{ text-align: left; padding: 6px 40px 8px 20px; max-height: 126px; width: 100%; border-radius: 10px; } #need ol li a.btn-green{ width: calc(100% - 80px); bottom: 30px; } #need ol li:nth-child(3) a.btn-green{ bottom: 55px; } } /* offer */ #offer{ padding: 140px 0 120px; background: url(images/offer/offer-bg.svg) right -26px top no-repeat #EEF5F5; } #offer .ttl01{ margin-bottom: 60px; } #offer .offer-lead01{ text-align: center; font-size: 18px; margin-bottom: 40px; } #offer .offer-box01{ margin-bottom: 20px; } #offer .offer-box01.offer-imgright{ background: linear-gradient(90deg, #fff 0%, #fff 50%, #EEF5F5 50%, #EEF5F5 100%); } #offer .offer-box01.offer-imgleft{ background: linear-gradient(90deg, #EEF5F5 0%, #EEF5F5 50%, #fff 50%, #fff 100%); } #offer .offer-box01 .offer-cont{ background: #fff; border-radius: 40px; padding: 70px 100px; display: flex; justify-content: space-between; align-items: center; } #offer .offer-box01.offer-imgleft .offer-cont{ flex-direction: row-reverse; } #offer .offer-box01 .offer-cont div{ width: 510px; } #offer .offer-box01 .offer-cont figure{ width: 425px; } #offer .offer-box01 .offer-cont div .offer-step{ font-family: "din-2014", sans-serif; font-size: 20px; font-weight: 700; padding-bottom: 10px; width: fit-content; border-bottom: 3px solid #008080; margin-bottom: 40px; } #offer .offer-box01 .offer-cont div h3{ color: #008080; font-size: 30px; font-weight: 700; margin-bottom: 20px; } #offer .box01.offer-imgright .offer-cont figure{ text-align: right; } /*------------------------------ responsive ------------------------------*/ @media screen and (max-width: 1000px) { #offer{ padding: 80px 0; background: url(images/offer/offer-bg.svg) right top / 15% auto no-repeat #EEF5F5; } #offer .ttl01{ padding-right: 24px; padding-left: 24px; margin-bottom: 50px; } #offer .offer-lead01{ padding: 0 24px; text-align: left; } #offer .offer-box01{ margin-bottom: 30px; } #offer .offer-box01 .offer-cont{ border-radius: 20px; padding: 40px 24px; display: block; } #offer .offer-box01.offer-imgright .offer-cont{ padding-left: 0; } #offer .offer-box01.offer-imgleft .offer-cont{ padding-right: 0; } #offer .offer-box01 .offer-cont div{ width: auto; margin-bottom: 30px; } #offer .offer-box01 .offer-cont figure{ width: auto; } #offer .offer-box01 .offer-cont div .offer-step{ margin-bottom: 30px; } #offer .offer-box01 .offer-cont div h3{ font-size: 26px; } } /* professional */ #professional{ padding: 140px 0 120px; background: #FFF7ED; } #professional .ttl01{ margin-bottom: 60px; } #professional .ttl01:after{ background: #F8A836; } #professional .professional-lead01{ text-align: center; font-size: 18px; margin-bottom: 40px; } #professional ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #professional ul li{ width: 49%; margin-bottom: 20px; } #professional ul li .professional-bg-orange{ color: #fff; border-radius: 20px 20px 0 0; background: #F8A836; padding: 40px; display: flex; align-items: center; } #professional ul li .professional-bg-orange figure{ width: 225px; margin: 0 30px -90px 0; } #professional ul li .professional-bg-orange figure img{ border-radius: 10px; } #professional ul li .professional-bg-orange dl{ font-weight: 700; flex: 1; } #professional ul li .professional-bg-orange dl dt{ font-size: 30px; margin-bottom: 10px; } #professional ul li .professional-bg-orange dl dd{ line-height: 240%; } #professional ul li .professional-bg-orange dl dd span{ border-bottom: 1px solid #FFF064; } #professional ul li .professional-bg-white{ border-radius: 0 0 20px 20px; background: #fff; padding: 70px 40px 40px; } /*------------------------------ responsive ------------------------------*/ @media screen and (max-width: 1000px) { #professional{ padding: 80px 0 60px; } #professional .ttl01{ margin-bottom: 50px; } #professional .professional-lead01{ text-align: left; } #professional ul{ display: block; } #professional ul li{ width: 100%; } #professional ul li .professional-bg-orange{ padding: 24px; display: block; } #professional ul li .professional-bg-orange figure{ width: auto; margin: 0 0 20px; } #professional ul li .professional-bg-white{ padding: 20px 24px; } } footer { border-top: 1px solid #D9D9D9; padding: 80px 0 40px; } footer ul { display: flex; justify-content: center; gap: 0px; } footer ul li { font-size: 14px; border-right: 1px solid #333333; padding: 0 30px; } footer ul li:last-child { border: none; } footer ul li a { color: #333333; } footer .logo { margin: 60px auto 0; width: 247px; } footer .logo img { width: 100%; } footer p { font-size: 12px; text-align: center; margin: 40px 0 0; } @media screen and (max-width: 1000px) { footer { padding: 30px 5%; } footer ul { flex-wrap: wrap; } footer ul li { width: 100%; text-align: center; border: none; border-bottom: 1px solid #D9D9D9; margin: 0 0 10px; padding: 0 0 10px; } footer ul li:last-child { margin: 0; } footer .logo { margin: 30px auto 0; width: 160px; } footer p { font-size: 10px; text-align: center; margin: 20px 0 0; } } @media screen and (min-width: 1000px) { header nav ul li.header-contact a:hover { background-color: #fff; color: #FF9000; } .btn.btn-orange:hover { color: #FF9000; background: #fff; border: 2px solid #FF9000; } .btn.btn-lightgreen:hover { color: #fff; background: #008080; border: 2px solid rgba(47, 163, 163, 0.30); } .btn.btn-green { transition: opacity 0.3s ; } .btn.btn-green:hover { opacity: 0.7; } }