@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; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir=rtl] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Slider */ .slick-loading .slick-list { background: #fff url("././images/ajax-loader.gif") center center no-repeat; } /* Icons */ @font-face { font-family: "slick"; src: url("./fonts/slick.eot"); src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; transform: translate(0, -50%); padding: 0; border: none; outline: none; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir=rtl] .slick-prev { left: auto; right: -25px; } .slick-prev:before { content: "←"; } [dir=rtl] .slick-prev:before { content: "→"; } .slick-next { right: -25px; } [dir=rtl] .slick-next { left: -25px; right: auto; } .slick-next:before { content: "→"; } [dir=rtl] .slick-next:before { content: "←"; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { color: black; opacity: 0.75; } body { font-family: "Noto Sans JP", sans-serif; line-height: 1.75; } body.is-nav-open { overflow: hidden; } header { background: #FFFFFF; position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; } header .header-container { max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; } header .header-container .logo { width: 300px; height: auto; } header .header-container .logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } header .header-container .header-nav ul { display: flex; gap: 25px; } header .header-container .header-nav ul li a { color: #333333; font-weight: bold; font-size: 15px; } header .header-container .hamburger-button { display: none; } @media screen and (max-width: 1100px) { header .header-container .logo { width: 200px; } header .header-container .header-nav ul { gap: 20px; } header .header-container .header-nav ul li a { font-size: 14px; } } @media screen and (max-width: 1000px) { header .header-container .header-nav { display: none; } header .header-container .header-nav.is-open { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 0.95); } header .header-container .header-nav.is-open ul { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; gap: 30px; } header .header-container .header-nav.is-open ul li a { font-size: 18px; } header .header-container .hamburger-button { display: block; background: none; border: none; cursor: pointer; z-index: 1001; } header .header-container .hamburger-button span { display: block; width: 30px; height: 3px; background-color: #333333; margin: 6px 0; transition: 0.4s; } header .header-container .hamburger-button.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); } header .header-container .hamburger-button.is-open span:nth-child(2) { opacity: 0; } header .header-container .hamburger-button.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } } #mv { padding-top: 80px; background: url(./images/mv/bg.jpg) no-repeat center center/cover #FEBA5F; min-height: 550px; } #mv .mv-sp { display: none; } #mv .mv-container { max-width: 850px; margin: 0 auto; padding: 60px 0 30px; text-align: center; position: relative; height: 100%; } #mv .mv-container ul.badges { display: flex; justify-content: center; align-items: center; gap: 10px; padding-bottom: 30px; } #mv .mv-container ul.badges li { background-color: #FFFFFF; border: 2px solid #FF9900; border-radius: 300px; padding: 10px 20px; color: #F0810B; font-weight: 700; font-size: 16px; line-height: 1.45; white-space: nowrap; position: relative; } #mv .mv-container ul.badges li:after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #FFFFFF; z-index: 2; } #mv .mv-container ul.badges li:before { content: ""; position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 13px solid #FF9900; z-index: 1; } #mv .mv-container ul.badges li:after, #mv .mv-container ul.badges li:before { pointer-events: none; } #mv .mv-container p.sub-copy { display: inline-block; color: #333333; font-weight: bold; font-size: 26px; padding: 0.5em; background: #FFFFFF; margin-bottom: 30px; } #mv .mv-container h1 { color: #00097B; font-weight: bold; font-size: 60px; line-height: 1.25; margin-bottom: 50px; } #mv .mv-container .issues-container { display: flex; width: 835px; height: 70px; border: 3px solid #4DB9B9; border-radius: 10px; background: #FFFFFF; overflow: hidden; margin: 0 auto; } #mv .mv-container .issues-container .issues-header { width: 180px; height: 100%; background: #4DB9B9; border-radius: 10px 0px 0px 10px; display: flex; align-items: center; justify-content: center; padding: 10px; } #mv .mv-container .issues-container .issues-title { color: #FFFFFF; font-weight: 700; font-size: 17px; line-height: 1.47; text-align: center; white-space: nowrap; } #mv .mv-container .issues-container ul { flex: 1; display: flex; align-items: center; padding: 0 30px; gap: 17px; } #mv .mv-container .issues-container ul li { color: #333333; font-weight: 700; font-size: 16px; line-height: 1.2; white-space: nowrap; } #mv .mv-container .issues-container ul li + li:before { content: "/"; color: #4DB9B9; font-weight: bold; font-size: 16px; line-height: 1.2; margin-right: 10px; } @media screen and (max-width: 1000px) { #mv { padding-top: 70px; } } @media screen and (max-width: 900px) { #mv .mv-sp { display: block; } #mv .mv-sp img { width: 100%; height: auto; } #mv .mv-container { display: none; } } #mv-slider { width: 100%; background-color: #FFF8EC; } #mv-slider .mv-slider-list li { width: 270px; margin: 0 10px 10px 0; padding: 10px; border-radius: 10px; background: #FFFFFF; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1); } #mv-slider .mv-slider-list li img { width: 100%; height: 150px; -o-object-fit: cover; object-fit: cover; border-radius: 10px; margin-bottom: 10px; } #mv-slider .mv-slider-list li p { font-size: 14px; font-weight: bold; text-align: center; } #pickup { background: #FFF8EC; } #pickup .pickup-container { max-width: 1000px; margin: 0 auto; padding: 140px 0px 80px; position: relative; } #pickup .pickup-container h2 { display: none; } #pickup .pattern-object .svg-01 { position: absolute; top: 90px; left: -90px; } #pickup .pattern-object .svg-02 { position: absolute; bottom: -150px; right: -100px; } #pickup .grid-box { position: relative; z-index: 999; display: grid; grid-template-columns: 1fr 520px; gap: 60px; } #pickup .grid-box .grid-box-image { padding-top: 80px; } #pickup .grid-box .grid-box-image img { width: 100%; height: auto; } #pickup .grid-box .grid-box-text p.post-title { font-size: 14px; margin-bottom: 1em; } #pickup .grid-box .grid-box-text h3 { font-size: 30px; line-height: 50px; color: #00097B; margin-bottom: 0.5em; font-weight: bold; } #pickup .grid-box .grid-box-text .participants { background: #FFFFFF; padding: 20px; border-radius: 10px; } #pickup .grid-box .grid-box-text .participants h4 { font-size: 16px; margin-bottom: 0.5em; font-weight: bold; } #pickup .grid-box .grid-box-text .participants ul li { font-size: 14px; margin-bottom: 0.25em; } #pickup .card-button { display: block; width: 650px; height: 80px; background-color: #F0810B; border-radius: 5px; color: #FFFFFF; font-size: 20px; font-weight: 700; text-align: center; line-height: 80px; margin: 40px auto 0; position: relative; text-decoration: none; } #pickup .card-button:after { content: ""; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); width: 10px; height: 10px; border-top: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; transform: rotate(45deg); } #pickup .card-button:hover { transform: translateY(-3px); transition: transform 0.3s ease; } @media screen and (max-width: 1000px) { #pickup .pickup-container { padding: 80px 5% 60px; } #pickup .pattern-object { display: none; } #pickup .grid-box { grid-template-columns: 1fr; gap: 30px; } #pickup .grid-box .grid-box-image { padding-top: 0; text-align: center; } #pickup .grid-box .grid-box-image img { max-width: 800px; margin: 0 auto; } #pickup .grid-box .grid-box-text h3 { font-size: 22px; line-height: 1.6; } #pickup .card-button { width: 90%; height: 70px; line-height: 70px; font-size: 18px; } } #approach { position: relative; padding: 60px 20px 60px; background: #49B1B1; } #approach:before { content: ""; position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 80px solid #49B1B1; z-index: 2; } #approach .people-icon-pattern { position: absolute; top: 35px; left: 0; width: 100%; height: 100%; z-index: 0; } #approach .people-icon-pattern .people-grid { display: flex; justify-content: space-between; width: 100%; } #approach .people-icon-pattern .people-grid .person-icon { width: auto; height: auto; } #approach .people-icon-pattern .people-grid .person-icon.person-1 { margin-right: 60px; } #approach .people-icon-pattern .people-grid .person-icon.person-2 { margin-left: 60px; } #approach .approach-container { position: relative; max-width: 1000px; margin: 0 auto; z-index: 2; } #approach .approach-container h2 { font-size: 36px; color: #fff; font-weight: bold; text-align: center; margin-bottom: 50px; } #approach .approach-container ul { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } #approach .approach-container ul li { position: relative; background: #FFFFFF; padding: 40px 30px 30px; border-radius: 20px; } #approach .approach-container ul li:before { content: " "; background: url(./images/approach/bg-border.svg) no-repeat center center/contain; position: absolute; top: 0; right: 30px; width: 70px; height: 70px; z-index: 0; } #approach .approach-container ul li h3 { font-size: 24px; color: #333333; margin-bottom: 0.75em; font-weight: bold; position: relative; display: inline-block; z-index: 1; } #approach .approach-container ul li h3:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background-color: yellow; z-index: -1; } #approach .approach-container ul li p { font-size: 16px; line-height: 30px; } @media screen and (max-width: 1000px) { #approach { padding: 60px 5%; } #approach .people-icon-pattern { display: none; } #approach .approach-container h2 { font-size: 28px; margin-bottom: 30px; } #approach .approach-container ul { grid-template-columns: 1fr; gap: 25px; } #approach .approach-container ul li { padding: 30px 25px; } #approach .approach-container ul li h3 { font-size: 20px; } #approach .approach-container ul li p { line-height: 1.8; } } #case { background: url(./images/case/bg.svg) no-repeat top right/contain #FFF8EC; padding: 160px 0 100px; } #case .case-container { max-width: 1000px; margin: 0 auto; } #case .case-container .case-header { text-align: center; margin-bottom: 80px; } #case .case-container .case-header .case-header-lead { font-size: 24px; font-weight: bold; line-height: 1.9; margin-bottom: 30px; display: inline-block; } #case .case-container .case-header .case-header-lead span { background: linear-gradient(transparent 70%, #fff000 70%); } #case .case-container .case-header .case-header-headline { font-size: 44px; font-weight: bold; color: #FF4C01; display: inline-block; } #case .case-container .case-grid { display: grid; grid-template-columns: 190px 1fr; gap: 40px; } #case .case-container .case-grid .case-grid-category ul { display: flex; flex-direction: column; gap: 10px; } #case .case-container .case-grid .case-grid-category ul li a { display: block; padding: 22px 10px; background-color: #fff; border-radius: 300px; text-align: center; border: 2px solid #F0810B; color: #F0810B; font-weight: 700; font-size: 18px; text-decoration: none; transition: all 0.3s; line-height: 1.2; } #case .case-container .case-grid .case-grid-category ul li a.is-active, #case .case-container .case-grid .case-grid-category ul li a:hover { background-color: #F0810B; color: #fff; } #case .case-container .case-grid .case-grid-content { display: none; background-color: #fff; padding: 0px; border-radius: 20px; border: 2px solid #F0810B; } #case .case-container .case-grid .case-grid-content.is-active { display: block; } #case .case-container .case-grid .case-grid-content .case-main-content { padding: 34px; } #case .case-container .case-grid .case-grid-content .case-main-content-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; } #case .case-container .case-grid .case-grid-content .case-main-content-header .case-headline { font-size: 24px; font-weight: bold; line-height: 1.6; flex: 1; } #case .case-container .case-grid .case-grid-content .case-main-content-header .case-logo img { width: 170px; } #case .case-container .case-grid .case-grid-content .case-company-name { font-size: 18px; font-weight: bold; margin-bottom: 20px; } #case .case-container .case-grid .case-grid-content hr { border: none; border-top: 1px solid #ccc; margin-bottom: 30px; } #case .case-container .case-grid .case-grid-content .case-main-content-body { display: grid; grid-template-columns: 290px 1fr; gap: 40px; } #case .case-container .case-grid .case-grid-content .case-main-content-body .case-main-text .case-lead { font-size: 20px; font-weight: bold; line-height: 1.7; margin-bottom: 20px; } #case .case-container .case-grid .case-grid-content .case-main-content-body .case-main-text p { font-size: 16px; line-height: 1.75; margin-bottom: 20px; } #case .case-container .case-grid .case-grid-content .case-main-content-body .case-main-text .button { display: inline-block; background-color: #F0810B; color: #fff; padding: 15px; text-align: center; border-radius: 5px; text-decoration: none; font-weight: bold; width: 100%; max-width: 390px; margin: 0 auto; position: relative; } #case .case-container .case-grid .case-grid-content .case-main-content-body .case-main-text .button::after { content: ""; display: inline-block; width: 8px; height: 13px; background-image: url(./images/case/arrow-right-white.svg); background-size: contain; background-repeat: no-repeat; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } #case .case-container .case-grid .case-grid-content .case-main-content-body .case-main-text .button:hover { transform: translateY(-3px); transition: transform 0.3s ease; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper { margin-top: 20px; background-color: #f9f9f9; padding: 34px; border-radius: 0 0 20px 20px; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li { display: block; text-decoration: none; color: #333333; background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body { display: grid; grid-template-rows: 1fr 0.5fr auto; gap: 10px; height: 100%; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body .case-sub-card-heightline { padding: 15px 15px 0; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body .case-sub-card-img { margin-bottom: 15px; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body .case-sub-card-img img { width: 100%; height: 120px; -o-object-fit: cover; object-fit: cover; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body .case-sub-card-company { font-weight: bold; font-size: 16px; margin-bottom: 10px; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body .case-sub-card-headline { font-size: 14px; line-height: 1.5; margin-bottom: 20px; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body .case-sub-card-achieved { padding: 0 15px; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body .case-sub-card-achieved .case-sub-card-achieved-title { background-color: #fff; color: #42ABAB; border: 2px solid #42ABAB; border-radius: 50px; font-weight: bold; font-size: 14px; text-align: center; padding: 3px 0; margin-bottom: 10px; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body .case-sub-card-achieved ul { display: block; margin-bottom: 20px; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body .case-sub-card-achieved ul li { font-size: 12px; line-height: 1.5; margin-bottom: 0.5em; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-footer { background-color: #F0810B; color: #fff; text-align: center; font-weight: bold; position: relative; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-footer a { padding: 15px; display: block; width: 100%; height: 100%; text-decoration: none; color: #fff; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-footer::after { content: ""; display: inline-block; width: 8px; height: 13px; background-image: url(./images/case/arrow-right-white.svg); background-size: contain; background-repeat: no-repeat; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 1000px) { #case { background: #FFF8EC; padding: 120px 5% 60px; } #case .case-container .case-header { margin-bottom: 40px; } #case .case-container .case-header .case-header-lead { font-size: 18px; line-height: 1.7; margin-bottom: 20px; } #case .case-container .case-header .case-header-headline { font-size: 30px; line-height: 1.5; } #case .case-container .case-grid { grid-template-columns: 1fr; gap: 20px; } #case .case-container .case-grid .case-grid-category ul { flex-direction: row; flex-wrap: wrap; justify-content: center; padding-bottom: 10px; } #case .case-container .case-grid .case-grid-category ul li { flex-shrink: 0; } #case .case-container .case-grid .case-grid-category ul li a { padding: 12px 20px; font-size: 14px; white-space: nowrap; } #case .case-container .case-grid .case-grid-content .case-main-content { padding: 20px; } #case .case-container .case-grid .case-grid-content .case-main-content-header { flex-direction: column; } #case .case-container .case-grid .case-grid-content .case-main-content-header .case-headline { font-size: 20px; } #case .case-container .case-grid .case-grid-content .case-main-content-header .case-logo { margin: 0 auto; } #case .case-container .case-grid .case-grid-content .case-main-content-header .case-logo img { width: 150px; } #case .case-container .case-grid .case-grid-content .case-company-name { text-align: center; font-size: 16px; } #case .case-container .case-grid .case-grid-content .case-main-content-body { grid-template-columns: 1fr; gap: 25px; } #case .case-container .case-grid .case-grid-content .case-main-content-body .case-main-text .case-lead { font-size: 18px; } #case .case-container .case-grid .case-grid-content .case-main-content-body .case-main-text p { font-size: 15px; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper { padding: 20px; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul { grid-template-columns: 1fr; gap: 20px; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body .case-sub-card-headline { margin-bottom: 10px; } #case .case-container .case-grid .case-grid-content .case-sub-content-wrapper > ul > li .case-sub-card-body .case-sub-card-achieved ul { margin-bottom: 10px; } } .cv { position: relative; background: url(./images/cv/bg.svg) no-repeat center center/cover #FEBA5F; padding: 100px 0; } .cv .cv-container { position: relative; max-width: 1000px; margin: 0 auto; } .cv .cv-container h2 { font-size: 36px; font-weight: bold; color: #FFFFFF; text-align: center; margin-bottom: 50px; } .cv .cv-container ul { position: relative; z-index: 1; display: grid; background-color: #fff; padding: 50px 0 20px; border-radius: 30px; grid-template-columns: 1fr 1fr 1fr; gap: 0; position: relative; } .cv .cv-container ul li { width: 100%; padding: 0 40px; border-left: 1px solid #D9D9D9; } .cv .cv-container ul li:first-child { border-left: 0; } .cv .cv-container ul li h3 { font-size: 20px; font-weight: bold; text-align: center; color: #333333; margin-bottom: 20px; } .cv .cv-container ul li div { text-align: center; margin-bottom: 20px; } .cv .cv-container ul li div img { margin: 0 auto; width: 70%; height: auto; } .cv .cv-container ul li p { font-size: 16px; color: #333333; margin-bottom: 30px; } .cv .cv-container ul li .cv-btn { text-align: center; } .cv .cv-container ul li .cv-btn a { display: block; text-align: center; font-size: 18px; color: #fff; text-decoration: none; font-weight: bold; border-radius: 100px; background: #F0810B; padding: 0.5em 0; } .cv .cv-container ul li .cv-btn a:hover { transform: translateY(-3px); transition: transform 0.3s ease; } .cv .people-icon-pattern { position: absolute; top: 30px; left: 0; width: 100%; height: 100%; z-index: 0; } .cv .people-icon-pattern .people-grid { display: flex; justify-content: space-between; width: 100%; } .cv .people-icon-pattern .people-grid .person-icon { height: auto; } .cv .people-icon-pattern .people-grid .person-icon.person-1 { width: 150px; margin-left: 50px; } .cv .people-icon-pattern .people-grid .person-icon.person-2 { position: relative; top: -20px; width: 90px; margin-right: 50px; } @media screen and (max-width: 1000px) { .cv { padding: 60px 5%; } .cv .people-icon-pattern { display: none; } .cv .cv-container h2 { font-size: 28px; margin-bottom: 30px; } .cv .cv-container ul { grid-template-columns: 1fr; gap: 30px; padding: 30px 20px; } .cv .cv-container ul li { padding: 0 20px 30px; border-left: 0; border-bottom: 1px solid #D9D9D9; } .cv .cv-container ul li:last-child { border-bottom: 0; padding-bottom: 0; } .cv .cv-container ul li h3 { font-size: 18px; } .cv .cv-container ul li p { margin-bottom: 20px; } .cv .cv-container ul li div img { width: 50%; max-width: 200px; } } #reason { background: url(./images/reason/bg.svg) no-repeat top right/contain #fff; padding-top: 100px; } #reason .reason-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; } #reason .reason-container h2 { font-size: 44px; font-weight: bold; text-align: center; margin-bottom: 100px; position: relative; } #reason .reason-container h2::after { content: ""; display: block; width: 70px; height: 8px; background-color: #F0810B; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px; } #reason .reason-headline-lead { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 20px; } #reason .reason-lead-content { max-width: 1000px; display: grid; grid-template-columns: 1fr 430px; margin: 0 auto 150px; align-items: center; gap: 50px; } #reason .reason-lead-content .reason-lead-text-area .reason-content-headline { font-size: 24px; font-weight: bold; line-height: 1.66; margin-bottom: 40px; } #reason .reason-lead-content .reason-lead-text-area .reason-content-text { font-size: 16px; line-height: 1.75; } #reason .reason-lead-content .reason-lead-image img { width: 100%; height: auto; } #reason .reason-company-result-section { margin-bottom: 80px; } #reason .reason-company-result-section .reason-company-result-inner { position: relative; max-width: 1200px; padding: 80px 0 60px; margin: 0 auto; border: 2px solid #F0810B; border-radius: 40px; background: #fff; } #reason .reason-company-result-section .reason-company-result-headline { font-size: 20px; font-weight: bold; line-height: 1.7; text-align: center; color: #F0810B; max-width: 900px; width: 900px; margin: 0 auto; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); z-index: 2; background: #fff; padding: 0 10px; } #reason .reason-company-result-section .reason-company-result-items { display: flex; justify-content: center; gap: 40px; margin-top: -10px; padding: 0 40px; } #reason .reason-company-result-section .reason-company-result-items li { width: 33.333%; max-width: 300px; } #reason .reason-company-result-section .reason-company-result-items li a { display: block; text-decoration: none; color: #000; } #reason .reason-company-result-section .reason-company-result-items li a:hover { opacity: 0.8; transform: translateY(-3px); transition: all 0.3s ease; } #reason .reason-company-result-section .reason-company-result-items li div img { width: 100%; height: 200px; -o-object-fit: cover; object-fit: cover; } #reason .reason-company-result-section .reason-company-result-caption { margin-top: 20px; font-size: 14px; line-height: 1.71; color: #333; } #reason .reason-consultant-section { padding: 100px 0; } #reason .reason-consultant-headline { font-size: 36px; font-weight: 700; text-align: center; line-height: 1.72; margin-bottom: 60px; } #reason .reason-consultant-profile-hamada { background: #FFF7ED; border-radius: 40px; padding: 60px 40px; margin-bottom: 20px; } #reason .reason-consultant-profile-hamada-grid-inner { display: grid; grid-template-columns: 430px 1fr; gap: 50px; max-width: 1000px; margin: 0 auto 60px; } #reason .reason-consultant-profile-hamada-grid-inner .grid-left img { width: 100%; height: auto; } #reason .reason-consultant-profile-hamada-grid-inner .grid-right h4 { font-size: 30px; font-weight: bold; margin-bottom: 20px; } #reason .reason-consultant-hamada-badges li { margin-bottom: 0.5em; } #reason .reason-consultant-hamada-badges li span { display: inline; background-color: #fff; border: 1px solid #F0810B; padding: 3px 10px; font-size: 14px; color: #F0810B; border-radius: 3px; } #reason .reason-consultant-hamada-bio { margin-top: 30px; font-size: 16px; line-height: 1.875; } #reason .reason-consultant-hamada-media { background-color: #fff; margin-top: 30px; border: 2px solid #FF9900; border-radius: 10px; } #reason .reason-consultant-hamada-media h5 { font-size: 18px; font-weight: 700; padding: 20px 20px 10px; } #reason .reason-consultant-hamada-media ul { padding: 0 20px 20px; list-style-position: inside; } #reason .reason-consultant-hamada-media ul li { font-size: 14px; line-height: 1.71; } #reason .reason-consultant-hamada-media .all-list-link { background: #FF9900; text-align: center; border-radius: 0 0 8px 8px; } #reason .reason-consultant-hamada-media .all-list-link a { display: block; padding: 10px; color: #fff; font-weight: 700; text-decoration: none; } #reason .reason-consultant-hamada-clients, #reason .reason-consultant-hamada-voice { background: #fff; border-radius: 20px; padding: 30px; margin-top: 20px; } #reason .reason-consultant-hamada-clients h5, #reason .reason-consultant-hamada-voice h5 { font-size: 18px; font-weight: 700; } #reason .reason-consultant-hamada-clients ul, #reason .reason-consultant-hamada-clients p, #reason .reason-consultant-hamada-voice ul, #reason .reason-consultant-hamada-voice p { margin-top: 15px; font-size: 16px; line-height: 1.875; } #reason .reason-consultant-hamada-clients ul li { display: inline; margin-right: 10px; } #reason .reason-consultant-hamada-clients ul li:after { content: "|"; margin-left: 10px; } #reason .reason-consultant-hamada-clients ul li:last-of-type { content: ""; margin-right: 0; } #reason .reason-consultant-hamada-voice p:last-of-type { text-align: right; font-size: 14px; } #reason .reason-other-consultant-list { background: #FFF8EC; border-radius: 40px; } #reason .reason-other-consultant-list .reason-other-consultant-list-inner { max-width: 1000px; margin: 0 auto; padding: 60px 40px; } #reason .reason-other-consultant-list ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0px; } #reason .reason-other-consultant-list ul li div { width: 100%; height: auto; overflow: hidden; margin-bottom: 10px; } #reason .reason-other-consultant-list ul li div img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } #reason .reason-other-consultant-list ul li .consultant-list-name { font-size: 16px; font-weight: bold; text-align: center; } #reason .reason-other-consultant-result-companies { margin-top: 60px; background-color: #fff; border: 1px solid #F39518; border-radius: 20px; } #reason .reason-other-consultant-result-companies .result-header { background: #F39518; padding: 20px; border-radius: 18px 18px 0 0; } #reason .reason-other-consultant-result-companies .result-header .result-title { font-size: 20px; font-weight: 700; color: #fff; text-align: center; } #reason .reason-other-consultant-result-companies ul { padding: 30px; display: block; } #reason .reason-other-consultant-result-companies ul li { display: inline; font-size: 16px; line-height: 1.875; } #reason .reason-other-consultant-result-companies ul li:after { content: "、"; } #reason .reason-other-consultant-result-companies ul li:last-of-type:after { content: ""; } @media screen and (max-width: 1000px) { #reason { padding-top: 60px; } #reason .reason-container { padding: 0 5%; } #reason .reason-headline-lead { font-size: 18px; } #reason .reason-lead-content { grid-template-columns: 1fr; margin-bottom: 80px; gap: 30px; } #reason .reason-lead-content .reason-lead-image { text-align: center; } #reason .reason-lead-content .reason-lead-image img { max-width: 500px; width: 100%; } #reason .reason-lead-content .reason-lead-text-area .reason-content-headline { font-size: 20px; margin-bottom: 20px; } #reason .reason-company-result-section { margin-bottom: 60px; } #reason .reason-company-result-section .reason-company-result-inner { padding: 40px 5%; border-radius: 20px; } #reason .reason-company-result-section .reason-company-result-headline { font-size: 18px; width: auto; position: static; transform: none; background: none; padding: 0 0 30px; color: #F0810B; } #reason .reason-company-result-section .reason-company-result-items { flex-direction: column; gap: 30px; padding: 0; margin-top: 0; } #reason .reason-company-result-section .reason-company-result-items li { width: 100%; max-width: 100%; } #reason .reason-consultant-section { padding: 60px 0; } #reason .reason-consultant-headline { font-size: 28px; line-height: 1.6; margin-bottom: 40px; } #reason .reason-consultant-profile-hamada { padding: 30px 5%; border-radius: 20px; } #reason .reason-consultant-profile-hamada-grid-inner { grid-template-columns: 1fr; gap: 30px; margin-bottom: 30px; } #reason .reason-consultant-profile-hamada-grid-inner .grid-left { text-align: center; } #reason .reason-consultant-profile-hamada-grid-inner .grid-left img { max-width: 500px; } #reason .reason-consultant-profile-hamada-grid-inner .grid-right h4 { font-size: 24px; } } #service { background-color: #FFF8EC; padding: 100px 0; } #service .service-container h2 { font-size: 44px; font-weight: bold; text-align: center; margin-bottom: 100px; position: relative; } #service .service-container h2::after { content: ""; display: block; width: 70px; height: 8px; background-color: #F0810B; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px; } #service .service-container .service-lead { max-width: 600px; text-align: center; margin: 0 auto 40px; } #service .service-container .service-lead p { font-size: 18px; line-height: 1.75; } #service .service-item { margin-bottom: 60px; } #service .service-item:last-child { margin-bottom: 0; } #service .service-item .service-item-container { background-color: #fff; padding: 60px 0px 60px 0px; border-radius: 40px 0 0 40px; min-width: 800px; margin-left: 7%; position: relative; z-index: 1; } #service .service-item .service-item-inner { position: relative; max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 40px; } #service .service-item .service-item-number { position: absolute; top: -20px; right: -60px; font-weight: bold; font-size: 16px; color: #FF4C01; writing-mode: vertical-rl; z-index: 99; } #service .service-item .service-item-image { width: 45%; } #service .service-item .service-item-image img { width: 100%; height: auto; } #service .service-item .service-item-content { width: 55%; } #service .service-item .service-item-content .service-item-title { font-size: 36px; font-weight: 700; line-height: 1.6; margin-bottom: 10px; color: #F0810B; } #service .service-item .service-item-content .service-item-info { font-size: 18px; font-weight: 700; margin-bottom: 20px; } #service .service-item .service-item-content .service-item-text { font-size: 16px; line-height: 1.875; margin-bottom: 30px; } #service .service-item .service-item-point { max-width: 1000px; margin: 0 auto; background-color: #FFFBF5; padding: 30px; margin-top: 40px; border-radius: 20px; position: relative; } #service .service-item .service-item-point .point-header { position: absolute; top: -28px; left: 50px; font-size: 34px; font-weight: bold; color: transparent; font-family: "Futura PT", sans-serif; -webkit-text-stroke: 1px #F0810B; text-stroke: 1px #F0810B; letter-spacing: 0.04em; } #service .service-item .service-item-point .point-content { display: flex; align-items: center; gap: 40px; } #service .service-item .service-item-point .point-content .point-image { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } #service .service-item .service-item-point .point-content .point-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } #service .service-item .service-item-point .point-content .point-text .point-headline { font-size: 20px; font-weight: 700; line-height: 1.7; margin-bottom: 15px; } #service .service-item .service-item-point .point-content .point-text .point-name { font-size: 14px; font-weight: 700; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #CCCCCC; } #service .service-item .service-item-point .point-content .point-text .point-client-info .client-title { font-size: 14px; font-weight: 700; margin-bottom: 5px; } #service .service-item .service-item-point .point-content .point-text .point-client-info .client-list { font-size: 14px; line-height: 1.4; } #service .service-item:nth-child(even) .service-item-number { right: auto; left: -100px; writing-mode: vertical-rl; } #service .service-item:nth-child(even) .service-item-container { padding: 60px 0px 60px 60px; margin-left: 0; margin-right: 7%; border-radius: 0 40px 40px 0; } #service .note { font-size: 24px; padding: 60px; text-align: center; } #service .note p { margin-bottom: 1em; } #service .note .bold { font-size: 30px; font-weight: bold; position: relative; display: inline-block; z-index: 1; } #service .note .bold:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background-color: yellow; z-index: -1; } @media screen and (max-width: 1000px) { #service { padding: 60px 5%; } #service .service-container .service-lead p { font-size: 16px; } #service .service-item { margin-bottom: 40px; } #service .service-item .service-item-container { min-width: auto; margin-left: 0; padding: 40px 20px; border-radius: 20px; } #service .service-item .service-item-inner { flex-direction: column; gap: 30px; } #service .service-item .service-item-number { position: static; writing-mode: horizontal-tb; text-align: left; margin-bottom: 15px; } #service .service-item .service-item-image, #service .service-item .service-item-content { width: 100%; } #service .service-item .service-item-content .service-item-title { font-size: 24px; } #service .service-item .service-item-content .service-item-info { font-size: 16px; } #service .service-item .service-item-content .service-item-text { font-size: 15px; } #service .service-item .service-item-point { padding: 20px; margin-top: 30px; } #service .service-item .service-item-point .point-header { display: none; } #service .service-item .service-item-point .point-content { flex-direction: column; text-align: left; gap: 20px; } #service .service-item .service-item-point .point-content .point-image { width: 120px; height: 120px; } #service .service-item .service-item-point .point-content .point-text .point-headline { font-size: 18px; margin-bottom: 10px; } #service .service-item .service-item-point .point-content .point-text .point-name { margin-bottom: 10px; padding-bottom: 10px; } #service .service-item:nth-child(even) .service-item-container { margin-right: 0; padding: 40px 20px; border-radius: 20px; } #service .service-item:nth-child(even) .service-item-number { left: auto; writing-mode: horizontal-tb; } #service .note { font-size: 18px; padding: 40px 20px; } #service .note .bold { font-size: 22px; } #service .note .bold:after { height: 12px; } } #result { padding: 100px 0; background-color: #fff; } #result .result-container { max-width: 1000px; margin: 0 auto; } #result .result-container h2 { font-size: 44px; font-weight: bold; text-align: center; margin-bottom: 100px; position: relative; } #result .result-container h2::after { content: ""; display: block; width: 70px; height: 8px; background-color: #F0810B; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px; } #result .result-container div > img { width: 100%; height: auto; margin: 0 auto; text-align: center; } @media screen and (max-width: 1000px) { #result { padding: 60px 5%; } #result .result-container h2 { font-size: 28px; } #result .result-container div > img { max-width: 100%; } } #voice { background-color: #fff7ed; padding: 80px 0; } #voice .voice-container { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align: center; } #voice .voice-container h2 { font-size: 44px; font-weight: bold; text-align: center; margin-bottom: 100px; position: relative; } #voice .voice-container h2::after { content: ""; display: block; width: 70px; height: 8px; background-color: #F0810B; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px; } #voice .voice-container .voice-headline-lead { font-size: 24px; font-weight: bold; margin-bottom: 15px; } #voice .voice-container .voice-lead { max-width: 650px; margin: 0 auto 0; font-size: 16px; line-height: 1.8; text-align: left; margin-bottom: 40px; } #voice .voice-container .pickup-voice-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } #voice .voice-container .pickup-voice-list li { background: url(./images/voice/babble.svg) no-repeat center center/contain; padding: 20px 34px 40px; width: 100%; min-height: 140px; font-size: 15px; font-weight: bold; line-height: 28px; position: relative; text-align: justify; display: flex; align-items: center; } #voice .voice-container .pickup-voice-list li span { display: inline; background-color: #fff; padding: 2.5px; margin-right: 0.5em; } #voice .voice-container .voice-card-list { max-width: 1000px; margin: 60px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } #voice .voice-container .voice-card-list .voice-card-item { background-color: #fff; padding: 40px; border-radius: 20px; text-align: left; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-item-inner { display: grid; grid-template-columns: 160px 1fr; gap: 30px; align-items: center; margin-bottom: 30px; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-item-inner .voice-card-image { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-item-inner .voice-card-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-item-inner .voice-card-profile .voice-card-company { font-size: 20px; font-weight: bold; margin-bottom: 1em; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-item-inner .voice-card-profile .voice-card-departure { font-size: 14px; margin-bottom: 0.5em; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-item-inner .voice-card-profile .voice-card-name { font-size: 18px; font-weight: bold; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-text { font-size: 16px; line-height: 1.75; text-align: justify; } #voice .voice-icon-pattern { position: absolute; top: 240px; left: 0; width: 100%; height: 100%; z-index: 0; } #voice .voice-icon-pattern .person-grid { display: flex; justify-content: space-between; width: 100%; } #voice .voice-icon-pattern .person-grid .person-icon { height: auto; } #voice .voice-icon-pattern .person-grid .person-icon.person-1 { width: 180px; margin-left: 120px; } #voice .voice-icon-pattern .person-grid .person-icon.person-2 { position: relative; width: 140px; margin-right: 120px; } @media screen and (max-width: 1200px) { #voice .voice-container .pickup-voice-list { grid-template-columns: repeat(2, 1fr); gap: 50px; margin: 0 50px; } #voice .voice-container .pickup-voice-list li { padding: 40px 34px 60px; background-size: 100% auto; } } @media screen and (max-width: 1000px) { #voice { padding: 60px 5%; } #voice .voice-icon-pattern { display: none; } #voice .voice-container { padding: 0; } #voice .voice-container .voice-headline-lead { font-size: 20px; } #voice .voice-container .voice-lead { font-size: 15px; } #voice .voice-container .pickup-voice-list { grid-template-columns: 1fr; gap: 20px; } #voice .voice-container .pickup-voice-list li { background-size: 100% auto; width: 100%; min-height: auto; padding: 20px 25px; line-height: 1.8; text-align: left; } #voice .voice-container .voice-card-list { margin-top: 40px; grid-template-columns: 1fr; gap: 25px; } #voice .voice-container .voice-card-list .voice-card-item { padding: 30px 20px; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-item-inner { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-item-inner .voice-card-image { width: 120px; height: 120px; margin: 0 auto; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-item-inner .voice-card-profile { text-align: center; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-item-inner .voice-card-profile .voice-card-company { font-size: 18px; } #voice .voice-container .voice-card-list .voice-card-item .voice-card-text { text-align: left; } } #workshop { background: url(./images/workshop/bg.svg) no-repeat top right/contain #fff; padding: 80px 0; } #workshop .workshop-container { max-width: 1000px; margin: 0 auto; } #workshop .workshop-container h2 { font-size: 44px; font-weight: bold; text-align: center; margin-bottom: 100px; position: relative; } #workshop .workshop-container h2::after { content: ""; display: block; width: 70px; height: 8px; background-color: #F0810B; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px; } #workshop .workshop-container .workshop-lead { margin-bottom: 60px; } #workshop .workshop-container .workshop-lead p { font-size: 18px; line-height: 1.8; text-align: center; } #workshop .workshop-container .workshop-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; } #workshop .workshop-container .workshop-list .workshop-item { display: block; text-decoration: none; color: #000; transition: all 0.3s ease; } #workshop .workshop-container .workshop-list .workshop-item:hover { background-color: #f5f5f5; transform: translateY(-2px); } #workshop .workshop-container .workshop-list .workshop-item div { width: 100%; height: 270px; display: flex; justify-content: center; align-items: center; background-color: #fff; margin-bottom: 20px; } #workshop .workshop-container .workshop-list .workshop-item div img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; border: 1px solid #ccc; } #workshop .workshop-container .workshop-list .workshop-item p { font-size: 16px; line-height: 1.7; } @media screen and (max-width: 1000px) { #workshop { padding: 60px 5%; background: #fff; } #workshop .workshop-container .workshop-lead { margin-bottom: 40px; } #workshop .workshop-container .workshop-lead p { font-size: 16px; } #workshop .workshop-container .workshop-list { grid-template-columns: 1fr; gap: 40px; } #workshop .workshop-container .workshop-list .workshop-item { text-align: center; padding-bottom: 40px; border-bottom: 1px solid #D9D9D9; } #workshop .workshop-container .workshop-list .workshop-item:last-child { border-bottom: none; } #workshop .workshop-container .workshop-list .workshop-item div { width: 80%; margin: 0 auto 20px; height: 270px; } #workshop .workshop-container .workshop-list .workshop-item div img { border: none; } #workshop .workshop-container .workshop-list .workshop-item p { font-size: 15px; } } #flow { background-color: #FFF7ED; padding: 120px 0 100px; } #flow .flow-container { max-width: 1000px; margin: 0 auto; } #flow .flow-container h2 { font-size: 44px; font-weight: bold; text-align: center; margin-bottom: 100px; position: relative; } #flow .flow-container h2::after { content: ""; display: block; width: 70px; height: 8px; background-color: #F0810B; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px; } #flow .flow-container .flow-list { list-style: none; padding: 0; } #flow .flow-container .flow-list .flow-item { background-color: #fff; padding: 30px 60px 30px 30px; margin-bottom: 20px; border-radius: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); display: grid; grid-template-columns: 100px 1fr; gap: 40px; align-items: center; } #flow .flow-container .flow-list .flow-item .flow-item-icon { width: 100px; height: 100px; background-color: #F39518; border-radius: 50%; display: flex; justify-content: center; align-items: center; } #flow .flow-container .flow-list .flow-item .flow-item-icon img { max-width: 40px; max-height: 40px; } #flow .flow-container .flow-list .flow-item .flow-item-text h3 { font-size: 20px; font-weight: bold; line-height: 2; margin-bottom: 10px; } #flow .flow-container .flow-list .flow-item .flow-item-text p { font-size: 16px; line-height: 1.75; } @media screen and (max-width: 768px) { #flow .flow-container { width: 90%; } #flow .flow-container .flow-list { grid-template-columns: 1fr; } } #faq { padding: 80px 0; } #faq .faq-container { max-width: 1000px; margin: 0 auto; padding: 0 40px; } #faq .faq-container h2 { font-size: 44px; font-weight: bold; text-align: center; margin-bottom: 100px; position: relative; } #faq .faq-container h2::after { content: ""; display: block; width: 70px; height: 8px; background-color: #F0810B; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px; } #faq .faq-item { border-radius: 20px; margin-top: 50px; } #faq .faq-item .faq-question, #faq .faq-item .faq-answer { display: grid; grid-template-columns: 50px 1fr; gap: 20px; align-items: center; border-radius: 20px; } #faq .faq-item .faq-question { padding: 30px 50px 30px 30px; background-color: #F9F9F9; font-weight: bold; font-size: 20px; position: relative; padding-bottom: 30px; } #faq .faq-item .faq-question::after { content: ""; display: block; width: 20px; height: 4px; background-color: #F0810B; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; } #faq .faq-item .faq-question::before { content: ""; display: block; width: 4px; height: 20px; background-color: #F0810B; position: absolute; right: 28px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; } #faq .faq-item .faq-question.is-open::after { transform: translateY(-50%) rotate(180deg); } #faq .faq-item .faq-question.is-open::before { transform: translateY(-50%) rotate(90deg); } #faq .faq-item .faq-answer { padding: 30px; display: none; font-size: 18px; background-color: #fff; } #faq .faq-item .faq-q-mark, #faq .faq-item .faq-a-mark { font-weight: bold; font-size: 34px; color: #F0810B; line-height: 1.2; } 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; } }