@charset "UTF-8"; /* Reset style */ /*** The new CSS reset - version 1.7.3 (lasdt 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; } html { font-size: 62.5%; scroll-behavior: smooth; } @media screen and (max-width: 768px) { html { font-size: 54.6%; } } :root{ scroll-padding: 80px; } @media screen and (max-width: 768px) { :root{ scroll-padding: 60px; } } body { width: 100%; margin: 0 auto; font-family: "Zen Old Mincho", serif; color: #3c3c3c; font-size: 1.6rem; overflow-x: hidden; } .gothic { font-family: "Gothic A1", sans-serif; } .zen-anti { font-family: "Zen Antique Soft", serif; } .whisper { font-family: "Whisper", cursive; } .penletter { font-family: "vdl-penletter", sans-serif; } .caveat { font-family: "Caveat", cursive; } /*==============================*/ .fo12 { font-size: max(0.94vw, 1.2rem); } .fo14 { font-size: max(1.09vw, 1.4rem); } .fo16 { font-size: max(1.25vw, 1.6rem); } .fo18 { font-size: max(1.41vw, 1.8rem); } .fo18 { font-size: max(1.41vw, 1.8rem); } .fo20 { font-size: max(1.56vw, 2rem); } .fo22 { font-size: max(1.72vw, 2.2rem); } .fo24 { font-size: max(1.88vw, 2.4rem); } .fo26 { font-size: max(2.03vw, 2.6rem); } .fo28 { font-size: max(2.19vw, 2.8rem); } .fo30 { font-size: max(2.34vw, 3rem); } .fo34 { font-size: max(2.66vw, 3.4rem); } .fo38 { font-size: max(2.97vw, 3.8rem); } .fo40 { font-size: max(3.13vw, 4rem); } .fo50 { font-size: max(3.91vw, 5rem); } .fo60 { font-size: max(4.69vw, 6rem); } .fo100 { font-size: max(7.81vw, 10rem); } @media screen and (min-width: 1281px) { .fo12 { font-size: min(0.94vw, 1.2rem); } .fo14 { font-size: min(1.09vw, 1.4rem); } .fo16 { font-size: min(1.25vw, 1.6rem); } .fo18 { font-size: min(1.41vw, 1.8rem); } .fo18 { font-size: min(1.41vw, 1.8rem); } .fo20 { font-size: min(1.56vw, 2rem); } .fo22 { font-size: min(1.72vw, 2.2rem); } .fo24 { font-size: min(1.88vw, 2.4rem); } .fo26 { font-size: min(2.03vw, 2.6rem); } .fo28 { font-size: min(2.19vw, 2.8rem); } .fo30 { font-size: min(2.34vw, 3rem); } .fo34 { font-size: min(2.66vw, 3.4rem); } .fo38 { font-size: min(2.97vw, 3.8rem); } .fo40 { font-size: min(3.13vw, 4rem); } .fo50 { font-size: min(3.91vw, 5rem); } .fo60 { font-size: min(4.69vw, 6rem); } .fo100 { font-size: min(7.81vw, 10rem); } } @media screen and (max-width: 768px) { .fo12 { font-size: max(0.94vw, 1.2rem); } .fo14 { font-size: max(1.09vw, 1.4rem); } .fo16 { font-size: max(1.25vw, 1.6rem); } .fo18 { font-size: max(1.41vw, 1.8rem); } .fo18 { font-size: max(1.41vw, 1.8rem); } .fo20 { font-size: max(1.56vw, 2rem); } .fo22 { font-size: max(1.72vw, 2.2rem); } .fo24 { font-size: max(1.88vw, 2.4rem); } .fo26 { font-size: max(2.03vw, 2.6rem); } .fo28 { font-size: max(2.19vw, 2.8rem); } .fo30 { font-size: 3vw; } .fo34 { font-size: 3.4vw; } .fo38 { font-size: max(2.97vw, 3.8rem); } .fo40 { font-size: 4vw; } .fo50 { font-size: 5.5vw; } .fo60 { font-size: 7vw; } .fo100 { font-size: max(7.81vw, 10rem); } } @media screen and (max-width: 480px) { .fo12 { font-size: max(0.94vw, 1.2rem); } .fo14 { font-size: max(1.09vw, 1.4rem); } .fo16 { font-size: max(1.25vw, 1.6rem); } .fo18 { font-size: max(1.41vw, 1.8rem); } .fo18 { font-size: max(1.41vw, 1.8rem); } .fo20 { font-size: max(1.56vw, 2rem); } .fo22 { font-size: max(1.72vw, 2.2rem); } .fo24 { font-size: 2.2rem; } .fo26 { font-size: max(2.03vw, 2.6rem); } .fo28 { font-size: max(2.19vw, 2.8rem); } .fo30 { font-size: 3vw; } .fo34 { font-size: 3.4vw; } .fo38 { font-size: max(2.97vw, 3.8rem); } .fo40 { font-size: 4vw; } .fo50 { font-size: 5.5vw; } .fo60 { font-size: 7vw; } .fo100 { font-size: max(7.81vw, 10rem); } } .wh { color: #fff; } .red { color: #ff0000; } img { display: block; width: 100%; -o-object-fit: contain; object-fit: contain; } a { display: block; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; } a:hover { opacity: 0.8; } .inner { max-width: 1280px; width: 100%; margin: 0 auto; } h2 { font-size: 4.8rem; font-weight: bold; } h3 { font-size: 3.6rem; font-weight: bold; } .h2-bg { position: absolute; width: 27.4rem; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } @media screen and (max-width: 768px) { .pc { display: none; } } .sp { display: none; } @media screen and (max-width: 768px) { .sp { display: block; } } .br-sp_1800 { display: none; } @media screen and (max-width: 1800px) { .br-sp_1800 { display: block; } } .br-sp_1280 { display: none; } @media screen and (max-width: 1280px) { .br-sp_1280 { display: block; } } .br-sp_1280-580 { display: none; } @media screen and (max-width: 1280px) { .br-sp_1280-580 { display: block; } } @media screen and (max-width: 580px) { .br-sp_1280-580 { display: none; } } .br-sp_1180 { display: none; } @media screen and (max-width: 1180px) { .br-sp_1180 { display: block; } } .br-sp_1080 { display: none; } @media screen and (max-width: 1080px) { .br-sp_1080 { display: block; } } .br-sp_1080-580 { display: none; } @media screen and (max-width: 1080px) { .br-sp_1080-580 { display: block; } } @media screen and (max-width: 580px) { .br-sp_1080-580 { display: none; } } .br-sp_900 { display: none; } @media screen and (max-width: 900px) { .br-sp_900 { display: block; } } .br-sp_580 { display: none; } @media screen and (max-width: 580px) { .br-sp_580 { display: block; } } .br-sp_480 { display: none; } @media screen and (max-width: 480px) { .br-sp_480 { display: block; } } .br-pc_1280 { display: block; } @media screen and (max-width: 1280px) { .br-pc_1280 { display: none; } } .br-pc_1080 { display: block; } @media screen and (max-width: 1080px) { .br-pc_1080 { display: none; } } .br-pc_580 { display: block; } @media screen and (max-width: 580px) { .br-pc_580 { display: none; } } .br-pc_380 { display: block; } @media screen and (max-width: 380px) { .br-pc_380 { display: none; } } .btn { width: 100%; } .btn a { font-size: 1.6rem; border-radius: 4rem; display: flex; align-items: center; justify-content: center; height: 4rem; background-color: #65c3d6; background-image: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); position: relative; width: 26rem; margin-right: auto; } .btn a p { display: flex; align-items: center; justify-content: center; height: 3.6rem; position: relative; z-index: 3; margin-bottom: 0; color: #67b94f; background: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); background: -webkit-linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .btn a::before { content: ""; width: 25.3rem; height: 3.6rem; background-color: #fff; border-radius: 4rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; } .btn a::after { content: ">"; color: #000; position: absolute; display: inline-block; width: 4.5px; line-height: 1; top: 50%; right: 3rem; transform: translateY(-50%); /*background-image: url("../img/arrow-right-mini.png");*/ background-repeat: no-repeat; background-size: contain; } .btn a:hover { opacity: 1; } .btn a:hover p { color: #fff !important; -webkit-text-fill-color: white !important; } .btn a:hover::before { opacity: 0; } .no-rec { pointer-events: none!important; background-color: #beb9b9!important; position: relative; } no-rec::after { content: "現在、募集はしておりません。"; display: inline-block; font-size: 1.2rem; color: #000; position: absolute; top: 50%; right: 0; transform: translate(-10% , -50%); padding: 2px 4px; width: fit-content; text-align: center; background-color: #0006; } .sw-rec01 { display: block!important; text-align: center; margin: 4rem auto; } .sw-rec02 { display: none!important; } /*=================================== 追従ボタン ===================================*/ .follow-wrapper { position: fixed; top: 0; right: 0; width: 100%; height: 1px; margin-inline: auto; } .follow { position: relative; top: 250px; right: 0; opacity: 0; transition: all 1s; } .follow a { position: absolute; top: 0; right: 0; width: 7.5rem; height: auto; } @media screen and (max-width: 768px) { .follow { top: 150px; } } @media screen and (max-width: 480px) { .follow-wrapper { right: 0; transform: translateX(0); } .follow a { width: 5.5rem; } } /*=================================== スライダー slick ===================================*/ span.aks { display: inline-block; } .slick-slide img,.slick-slide video { width: 100%; height: auto; object-position: center; object-fit: cover; } .slick-prev, .slick-next { z-index: 100; display: none !important; } .slider div { overflow: hidden; } @keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.15); /* 拡大率 */ } } .add-animation { animation: zoomUp 10s linear 0s normal both; } @media screen and (max-width: 1000px) { .slider-wrap { top: -460px; } } @media screen and (max-width: 768px) { .slider-wrap { top: -335px; height: -moz-fit-content; height: fit-content; } } @media screen and (max-width: 480px) { .slider-wrap { top: -240px; } } /*========================================= ハンバーガー ===========================================*/ .sp-menu { background-color: #65c3d6; background-image: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); cursor: pointer; } .sp-menu:hover .list .item button span:nth-child(3) { width: 100%; left: 0; } @media screen and (max-width: 1180px) { .sp-menu { display: block; } } .list { display: flex; flex-wrap: wrap; } .item { position: relative; width: 80px; height: 80px; text-align: center; box-sizing: border-box; counter-increment: item; display: flex; align-items: center; justify-content: center; z-index: 21; } @media screen and (max-width: 580px) { .sp-menu { top: -12px; } } @media only screen and (max-width: 1180px) { .list { display: block; } } .menu-trigger, .menu-trigger span { display: inline-block; transition: all 0.4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 30px; height: 30px; background: none; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 4px; } .menu-trigger.active span { background-color: #fff; } .menu-trigger span:nth-of-type(1) { top: 3.5px; } .menu-trigger span:nth-of-type(2) { top: 50%; transform: translate(0, -50%); } .menu-trigger span:nth-of-type(3) { bottom: 3.5px; width: 50%; left: 50%; transition: all 0.3s; } #menu07 span:nth-of-type(1) { animation: menu07-bar01 0.75s forwards; } @keyframes menu07-bar01 { 0% { transform: translateY(1.4rem) rotate(45deg); } 50% { transform: translateY(1.4rem) rotate(0); } 100% { transform: translateY(0) rotate(0); } } #menu07 span:nth-of-type(2) { transition: all 0.25s 0.25s; opacity: 1; } #menu07 span:nth-of-type(3) { animation: menu07-bar03 0.75s forwards; } @keyframes menu07-bar03 { 0% { transform: translateY(-1.4rem) rotate(-45deg); } 50% { transform: translateY(-1.4rem) rotate(0); } 100% { transform: translateY(0) rotate(0); } } #menu07.active span:nth-of-type(1) { animation: active-menu07-bar01 0.75s forwards; } @keyframes active-menu07-bar01 { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(0, 1rem) rotate(0); } 100% { transform: translate(0px, 1rem) rotate(45deg); } } #menu07.active span:nth-of-type(2) { opacity: 0; } #menu07.active span:nth-of-type(3) { animation: active-menu07-bar03 0.75s forwards; width: 100%; left: 0; bottom: 4px; } @keyframes active-menu07-bar03 { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(0, -10px) rotate(0); } 100% { transform: translate(0px, -10px) rotate(-45deg); } } /*========================================= ハンバーガー/SPメニュー ===========================================*/ .sp-nav { width: 100%; height: calc(100vh - 80px); color: #000; text-align: center; display: none; position: fixed; top: 80px; left: 0; z-index: 20; display: none; } .sp-nav .box { display: flex; align-items: center; justify-content: center; } .sp-nav .box .left { width: calc(100% - 580px); height: calc(100vh - 80px); background-image: url("../img/bg07.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; display: flex; align-items: center; justify-content: center; text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6); } .sp-nav .box .left::after { content: ""; display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.3); } .sp-nav .box .right { background-color: #fff; width: 580px; height: calc(100vh - 80px); overflow: scroll; } .sp-nav .box .right .btn a { margin: 10px auto; font-size: 14px; height: 40px; width: 260px; } .sp-nav .box .right .btn a::before { width: 253px; height: 36px; } .sp-nav .box .right .ul01 { width: 100%; padding: 0; gap: 0; display: flex; flex-wrap: wrap; } .sp-nav .box .right .ul01 li { width: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; transition: all 0.5s; margin-bottom: 0; } .sp-nav .box .right .ul01 li a { font-size: 14px; width: 100%; padding: 15px 0; display: flex; flex-direction: column; justify-content: center; color: #67b94f; display: inline-block; background: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); background: -webkit-linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.5s; } .sp-nav .box .right .ul01 li a div { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin-inline: auto; row-gap: 14px; } .sp-nav .box .right .ul01 li a div img { width: 40px; } .sp-nav .box .right .ul01 li a div .hover-b { display: none; } .sp-nav .box .right .ul01 li a:hover { opacity: 1; -webkit-text-fill-color: white; } .sp-nav .box .right .ul01 li a:hover div .hover-n { display: none; } .sp-nav .box .right .ul01 li a:hover div .hover-b { display: block; } .sp-nav .box .right .ul01 li:nth-child(2) a div img { width: 50px; } .sp-nav .box .right .ul01 li:hover { background-color: #65c3d6; background-image: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); } .sp-nav .ul01 { padding: 20px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 3%; margin-bottom: 2rem; } @media screen and (max-width: 768px) { .sp-nav { top: 60px; height: calc(100vh - 60px); } .sp-nav .box .left { display: none; } .sp-nav .box .right { width: 100%; height: calc(100vh - 60px); } } .sp-nav .ul01 li { width: 30%; margin-bottom: 20px; } /*.sp-nav ul li:nth-child(1) { width: 60%; margin-inline: auto; }*/ .sp-nav .ul01 li a { padding: 5px 0; font-size: 20px; display: block; } @media screen and (max-width: 1180px) { .sp-nav .ul01 li { width: 48%; } .sp-nav .ul01 li a { font-size: 14px; } } .sp-nav .ul01 li a:hover { transition: 0.5s; } .sp-nav .ul01 li a { width: 100%; height: auto; display: block; cursor: pointer; } .sp-nav .ul02 { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; padding-inline: 1rem; } .sp-nav .ul02 li { width: 48%; } .sp-nav .ul02 li a { width: 100%; padding: 2rem 1rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dotted #8CC76A; } .sp-nav .ul02 li a img { width: 1rem; transition: all .5s; } .sp-nav .ul02 li a:hover img { transform: translateX(0.5rem); } .sp-nav .support { margin-top: 3rem; margin-bottom: 4rem; } .sp-nav .support .ttl { color: #3C3C3C; font-weight: bold; text-align: center; background-color: #E4E4E4; width: 300px; margin-inline: auto; padding-top: min(0.39vw, 0.5rem); padding-bottom: min(0.39vw, 0.5rem); border-radius: 4rem; } .sp-nav .support a { color: #67b94f; display: inline-block; background: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); background: -webkit-linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; justify-content: center; letter-spacing: 0.16em; line-height: 1.2; width: 100%; } .sp-nav .support a img { width: 3.6rem; } .sp-nav .support .time { text-align: center; } @media screen and (max-width: 580px) { .sp-nav > .header-contact { width: 80%; } } .wave { position: absolute; width: 100vw; height: -moz-fit-content; height: fit-content; top: 0; left: 50%; transform: translate(-50%, -5rem); z-index: 10; } /*============================= フェイドアニメーション =============================*/ /* 下から */ .fadeUp { animation-name: fadeUpAnime; animation-duration: 1.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fadeUp02 { animation-name: fadeUpAnime02; animation-duration: 1.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime02 { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } } @media screen and (max-width: 900px) { @keyframes fadeUpAnime02 { from { opacity: 0; transform: translate(0%, 10%); } to { opacity: 1; transform: translate(0%, 0%); } } } /* 左から */ .fadeLeft { animation-name: fadeLeftAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } .fadeLeft02 { animation-name: fadeLeftAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; animation-delay: 0.5s; } .fadeLeft03 { animation-name: fadeLeftAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; animation-delay: 1s; } @keyframes fadeLeftAnime { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } /* 右から */ .fadeRight { animation-name: fadeRightAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } .fadeRight02 { animation-name: fadeRight02Anime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeRightAnime { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeRight02Anime { from { opacity: 0; transform: translateX(80vw); } to { opacity: 1; transform: translateX(0); } } /* 上から */ .fadeDown { animation-name: fadeDownAnime; animation-duration: 1.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeDownAnime { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* スクロールをしたら出現する要素にはじめに透過0を指定　*/ .fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger { opacity: 0; } /*======================================= ヘッダー =======================================*/ #header { background-color: #fff; width: 100%; height: 8rem; position: fixed; top: 0; z-index: 99; } .header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); max-width: 1280px; width: 100%; background-color: #fff; z-index: 100; } .header .inner { display: flex; align-items: center; justify-content: space-between; } .header .inner .header-logo { padding: 1rem 0; } .header .inner .header-logo a { width: 20rem; } .header .inner .header-right .header-nav ul { display: flex; align-items: center; justify-content: end; -moz-column-gap: min(2.81vw, 3.6rem); column-gap: min(2.81vw, 3.6rem); } .header .inner .header-right .header-nav ul li.current a { border-bottom: 2px solid #8CC76A; } .header .inner .header-right .header-nav ul li a { color: #000; } .header .inner .header-right .header-nav ul li .sp-menu { margin-left: min(1.17vw, 1.5rem); } @media screen and (max-width: 1080px) { .header .inner .header-right .header-nav ul li { display: none; } .header .inner .header-right .header-nav ul li:last-child { display: block; } } @media screen and (max-width: 768px) { #header { height: 60px; } .header .inner .header-logo a { width: 15rem; } .header .inner .header-right .header-nav ul li .sp-menu .item { width: 60px; height: 60px; } } /*======================================= メインビジュアル =======================================*/ .mv { width: 100%; aspect-ratio: 1280/620; position: relative; margin-top: 79px; min-height: 70rem; } .mv video { width: 100%; height: 100%; object-fit: cover; object-position: center; } .mv::after { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.0862745098); z-index: 3; } .mv .slider .slick-slide { height: calc(100vh - (60px + 88px + 138px)); } .slick-slide img,.slick-slide video { height: calc(100vh - (60px + 88px + 138px)); } .mv .slider .slick-dots { /*top: 38rem; top: 70vh;*/ } .mv .slider .slick-dots { width: -moz-fit-content; width: fit-content; height: 3px; position: absolute; /*top: 31.4vw; top: 51.4vw;*/ bottom: 16rem; left: 12vw; z-index: 5; display: flex; align-items: center; } .mv .slider .slick-dots::after { content: ""; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-100%); width: 100%; height: 2px; background-color: #fff; } .mv .slider .slick-dots li { margin-inline: 0 6rem; width: 8px; height: 8px; position: relative; z-index: 3; } .mv .slider .slick-dots li:nth-child(4) { margin-inline: 0; } .mv .slider .slick-dots li:nth-child(4)::after { display: none; } .mv .slider .slick-dots li button { width: 8px; height: 8px; padding: 0; } .mv .slider .slick-dots li button::before { color: #fff; font-size: 8px; opacity: 1; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; z-index: -1; line-height: 1; } .mv .slider .slick-dots .slick-active button::before { color: #8CC76A; } .mv .txtbox { position: absolute; top: 9%; left: 8vw; z-index: 5; } .mv .important { display: flex; align-items: center; justify-content: end; position: absolute; /*top: 42.97vw;*/ bottom: 18.5rem; right: 0; z-index: 5; } .mv .important p { background-color: #F6AD4A; background-image: linear-gradient(45deg, #F6AD4A 0%, #F0C828 100%); width: 18rem; height: 5rem; display: flex; align-items: center; justify-content: center; } .mv .important a { background-color: #fff; width: 52rem; height: 5rem; padding-left: min(2.34vw, 3rem); display: flex; align-items: center; justify-content: left; position: relative; } .mv .important a::after { content: ">"; font-size: 10px; display: inline-block; color: #8CC76A; background: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); background: -webkit-linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; top: 50%; right: 2.2rem; transform: translateY(-50%); } @media screen and (min-width: 1281px) { /*.mv { height: calc(100vh - 200px); }*/ .mv .slider .slick-slide { height: calc(100vh - 200px); } .slick-slide img,.slick-slide video { height: calc(100vh - 200px); } .mv .slider .slick-dots { /*top: 38rem; top: 70vh;*/ } .mv .txtbox { top: 24rem; top: 12vh; } .mv .important { /*top: 55rem; top: 60vh;*/ bottom: 22.5rem; } } @media screen and (max-width: 1080px) { /*.mv .slider .slick-dots { top: 19.4vw; top: 7.4vw; }*/ .mv .txtbox { top: 8vw; left: 6vw; } .mv { width: 100%; aspect-ratio: 1280 / 620; position: relative; margin-top: 79px; /*height: 90vh;*/ } .mv .important { bottom: 15.5rem; } } @media screen and (max-width: 768px) { .mv { margin-top: 0; /*height: 100vh ;*/ min-height: 80vh; } .mv .slider .slick-dots { bottom: 18.5rem; } .mv .important { width: 100%; margin-top: -4vw; bottom: 22.5rem; } .mv .important a { width: calc(100vw - 18rem); } .mv .txtbox { top: 23vw; left: 6vw; } } @media screen and (max-width: 480px) { .mv .important { flex-direction: column; bottom: 1.5rem; } .mv .slider .slick-dots { bottom: 13rem; } .mv .important p { width: 100%; } .mv .important a { width: 100%; } .mv .txtbox { top: 50vw; left: 6vw; } .mv .fo40 { font-size: 20px; } .mv .fo34 { font-size: 20px; } } /*======================================= sec01 =======================================*/ #sec01 { position: relative; padding-bottom: min(7.81vw, 10rem); background-image: url("../img/bg08.png"); background-repeat: no-repeat; background-size: cover; width: 100%; margin-top: -5rem; z-index: 10; } .sec01 { position: relative; max-width: 1000px; width: 100%; margin-inline: auto; padding-top: min(9.38vw, 12rem); } .sec01 .menu { max-width: 1000px; width: 100%; margin-inline: auto; position: absolute; z-index: 10; background-color: rgba(255, 255, 255, 0.9); top: -5vw; left: 50%; transform: translateX(-50%); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.16); } .sec01 .menu ul { display: flex; align-items: center; justify-content: center; } .sec01 .menu ul li { width: 16.6666666667%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; border-right: 2px solid rgba(140, 199, 106, 0.22); transition: all 0.5s; } .sec01 .menu ul li a { width: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: min(1.88vw, 2.4rem); padding-bottom: min(1.56vw, 2rem); /*color: #67b94f; display: inline-block; background: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); background: -webkit-linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ transition: all 0.5s; } .sec01 .menu ul li a div { width: min(3.91vw, 5rem); height: min(3.91vw, 5rem); display: flex; align-items: center; justify-content: center; margin-inline: auto; row-gap: min(1.09vw, 1.4rem); } .sec01 .menu ul li a div img { width: min(3.13vw, 4rem); } .sec01 .menu ul li a div .hover-b { display: none; } .sec01 .menu ul li a:hover { opacity: 1; -webkit-text-fill-color: white; } .sec01 .menu ul li a:hover div .hover-n { display: none; } .sec01 .menu ul li a:hover div .hover-b { display: block; } .sec01 .menu ul li:nth-child(2) a div img { width: min(3.91vw, 5rem); } .sec01 .menu ul li:nth-child(6) { border-right: none; } .sec01 .menu ul li:hover { background-color: #65c3d6; background-image: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); } .sec01 .box { max-width: 1000px; width: 100%; margin-inline: auto; display: flex; align-items: start; justify-content: center; -moz-column-gap: 5.31vw; column-gap: 5.31vw; } .sec01 .box h2 { color: #67b94f; display: inline-block; background: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); background: -webkit-linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; margin-bottom: min(2.34vw, 3rem); letter-spacing: 0.1em; } .sec01 .box .left { width: min(24.77vw, 31.7rem); width: 32rem; } .sec01 .box .left .support { margin-bottom: min(1.72vw, 2.2rem); } .sec01 .box .left .support .ttl { color: #3C3C3C; font-weight: bold; text-align: center; background-color: #E4E4E4; width: 100%; padding-top: min(0.39vw, 0.5rem); padding-bottom: min(0.39vw, 0.5rem); border-radius: 4rem; } .sec01 .box .left .support a { color: #67b94f; display: inline-block; background: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); background: -webkit-linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; justify-content: space-between; letter-spacing: 0.16em; line-height: 1.2; width: 100%; } .sec01 .box .left .support a img { width: 3.6rem; } .sec01 .box .left .support .time { text-align: center; } .sec01 .box .left ul li { line-height: 2; } .sec01 .box .left ul li::before { content: "※"; display: inline-block; margin-right: 5px; } .sec01 .box .right table { border-top: 1px solid #E1F0F5; border-left: 1px solid #E1F0F5; text-align: center; } .sec01 .box .right table tbody tr th, .sec01 .box .right table tbody tr td { border-right: 1px solid #E1F0F5; border-bottom: 1px solid #E1F0F5; width: min(11.72vw, 15rem); height: min(3.52vw, 4.5rem); vertical-align: middle; font-size: max(1.09vw, 1.4rem); padding-top: min(0.78vw, 10px); padding-bottom: min(0.47vw, 6px); padding-inline: min(0.55vw, 7px); line-height: 1; } .sec01 .box .right table tbody tr:nth-child(4) td { width: 16rem; } .sec01 .box .right table tbody tr th { background-color: #F0F5FA; color: #1085a5; } .sec01 .box .right table tbody tr td { font-family: "Gothic A1", sans-serif; } .sec01 .box .right table tbody tr td span { font-size: min(0.94vw, 1.2rem); } .sec01 .box .right table tbody tr:nth-child(1) th { padding: 5px; height: min(2.34vw, 3rem); } .sec01 .box .right .table-pc { display: table; } .sec01 .box .right .table-sp { display: none; } @media screen and (min-width: 1281px) { .wave { transform: translate(-50%, -5rem); } .sec01 .menu { top: -7rem; } .sec01 .box .left { width: 34rem; } .sec01 .box .right table tbody tr th, .sec01 .box .right table tbody tr td { font-size: 1.4rem; } } @media screen and (max-width: 1080px) { #sec01 { transform: translateX(0); } .sec01 .box { flex-direction: column; } .sec01 .box h2 { width: 100%; text-align: center; } .sec01 .box .left, .sec01 .box .right { width: 100%; } .sec01 .box .left { margin-bottom: 4rem; } .sec01 .box .left .support .ttl { width: 35rem; margin-inline: auto; } .sec01 .box .left .support a { justify-content: center; } .sec01 .box .left ul { width: -moz-fit-content; width: fit-content; margin-inline: auto; } .sec01 .box .right table { margin-inline: auto; } .sec01 .box .right table tbody tr th, .sec01 .box .right table tbody tr td { width: 18rem; height: 4.5rem; padding-inline: 7px; padding: 10px 7px 6px; } .sec01 .box .right table tbody tr:nth-child(1) th { height: 3rem; } } @media screen and (max-width: 768px) { .sec01 { padding-top: 14vw; } .sec01 .menu { top: calc(-17.3vw + 43.67px); } .sec01 .menu ul { flex-wrap: wrap; } .sec01 .menu ul li { width: 33.3333333333%; } } @media screen and (max-width: 580px) { .sec01 .box { margin-top: 5rem; } .sec01 .box .right .table-pc { display: none; } .sec01 .box .right .table-sp { display: table; width: -moz-fit-content; width: fit-content; margin-bottom: 3rem; } .sec01 .box .right .table-sp tbody tr th, .sec01 .box .right .table-sp tbody tr td { font-size: 14px; } .sec01 .box .right .table-sp tbody tr td span { font-size: 11px; } .sec01 .box .right .table-sp.last tbody tr th, .sec01 .box .right .table-sp.last tbody tr td { width: 36rem; } } @media screen and (max-width: 480px) { .sec01 { padding-top: 9vw; } .sec01 .menu { position: relative; left: 0; transform: translate(0, 0); top: unset; } .sec01 .menu ul { flex-wrap: wrap; } .sec01 .menu ul li { width: 50%; } .sec01 .menu ul li:nth-child(even) { border-right: none; } } /*======================================= sec02 =======================================*/ .sec02 { padding-top: min(10.94vw, 14rem); padding-bottom: min(7.81vw, 10rem); position: relative; background-image: url("../img/bg03.png"); background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; } .sec02 h2 { color: #8CC76A; text-align: center; margin-bottom: min(3.13vw, 4rem); } .sec02 ul { display: flex; align-items: center; justify-content: center; -moz-column-gap: min(1.41vw, 1.8rem); column-gap: min(1.41vw, 1.8rem); max-width: 1000px; width: fit-content; margin-inline: auto; position: relative } .sec02 ul::after { content: ""; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 3px; background-color: #65c3d6; background-image: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); z-index: 1; } .sec02 ul li { width: min(23.44vw, 30rem); position: relative; z-index: 3; } .sec02 ul li h3 { color: #fff; padding-top: min(0.94vw, 1.2rem); padding-bottom: min(0.94vw, 1.2rem); border-radius: 1rem 1rem 0 0; text-align: center; } .sec02 ul li p { background-color: #fff; display: flex; align-items: center; justify-content: center; height: 10rem; border-radius: 0 0 1rem 1rem; } .sec02 ul li:nth-child(1) h3 { background-color: #6EC8E1; } .sec02 ul li:nth-child(1) p { border: 3px solid #6EC8E1; } .sec02 ul li:nth-child(2) h3 { background-color: #6ED7BE; } .sec02 ul li:nth-child(2) p { border: 3px solid #6ED7BE; } .sec02 ul li:nth-child(3) h3 { background-color: #8CC76A; } .sec02 ul li:nth-child(3) p { border: 3px solid #8CC76A; } @media screen and (max-width: 1080px) { .sec02 { padding-top: 18vw; } .sec02 h2 { margin-bottom: 7vw; } .sec02 ul { flex-direction: column; gap: 2rem; } .sec02 ul::after { width: 3px; height: 100%; top: 0; left: 50%; transform: translate(-50% , 0); } .sec02 ul li { width: 35rem; } } /*======================================= sec03 =======================================*/ .sec03 { width: 100%; padding-top: min(15vw, 20rem); padding-bottom: min(11.5vw, 18rem); background-image: url("../img/bg04.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; text-align: center; color: #fff; } .sec03 h2 { margin-bottom: min(3.13vw, 4rem); line-height: 1.5; } .sec03 p { margin-bottom: min(3.13vw, 4rem); line-height: 2; } .sec03 .btn a { margin-inline: auto; } .sec03 .btn a p { margin-bottom: 0; color: #67b94f; display: inline-block; background: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); background: -webkit-linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /*======================================= sec04 =======================================*/ .sec04 { padding-bottom: 9.38vw, 12rem; } .sec04 h2 { width: 32rem; margin-inline: auto; margin-top: min(9.38vw, 12rem); margin-bottom: min(4.69vw, 6rem); } .sec04 .box ul li { margin-bottom: min(3.13vw, 4rem); position: relative; overflow: hidden; } .sec04 .box ul li img { width: 60vw; } .sec04 .box ul li::after { content: ""; display: inline-block; position: absolute; top: 0; width: 65%; height: 100%; background-color: #fff; transition: all 0.8s; } .sec04 .box ul li.scroll::after { transform: translateX(-100%); } .sec04 .box ul li .inbox { max-width: 1000px; width: 100%; margin-inline: auto; padding-top: min(3.13vw, 4rem); padding-left: min(4.06vw, 5.2rem); position: absolute; top: 50%; transform: translate(-50%, -50%); width: min(38.28vw, 49rem); aspect-ratio: 68/30; background-color: #fff; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.16); z-index: 3; } .sec04 .box ul li .inbox .number { position: absolute; bottom: min(0.63vw, 0.8rem); right: min(1.56vw, 2rem); color: #E6F5DC; } .sec04 .box ul li .inbox h3 { letter-spacing: 0.1em; line-height: 1.2; margin-bottom: min(1.56vw, 2rem); } .sec04 .box ul li .inbox .fo14 { letter-spacing: 0.05em; line-height: 1.5; margin-bottom: min(2.73vw, 3.5rem); padding-right: min(8.91vw, 11.4rem); } .sec04 .box ul li .inbox .btn { position: absolute; bottom: min(2.34vw, 3rem); left: min(4.06vw, 5.2rem); } .sec04 .box ul li:nth-child(odd) img { margin-right: auto; } .sec04 .box ul li:nth-child(odd) .inbox { left: 65vw; border-left: 8px solid #8CC76A; } .sec04 .box ul li:nth-child(odd) .inbox h3 { color: #8CC76A; } .sec04 .box ul li:nth-child(odd)::after { left: 0; } .sec04 .box ul li:nth-child(even) img { margin-left: auto; } .sec04 .box ul li:nth-child(even) .inbox { left: 30vw; border-left: 8px solid #6EC8E1; } .sec04 .box ul li:nth-child(even) .inbox h3 { color: #6EC8E1; } .sec04 .box ul li:nth-child(even)::after { right: 0; } .sec04 .box ul li:nth-child(even).scroll::after { transform: translateX(100%); } @media screen and (min-width: 1581px) { .sec04 .box ul li img { width: 80vw; } } @media screen and (max-width: 1180px) { .sec04 .box ul li { margin-bottom: 6rem; } .sec04 .box ul li .inbox { width: 47rem; } } @media screen and (max-width: 900px) { .sec04 .box ul li img { width: 100%; } .sec04 .box ul li .inbox { position: static; transform: translate(0, 0); width: 90%; aspect-ratio: 0; padding: 4rem; } .sec04 .box ul li .inbox .number { right: 4vw; } .sec04 .box ul li .inbox .btn { position: static; } .sec04 .box ul li::after { width: 100%; } } @media screen and (max-width: 580px) { .sec04 h2 { width: 30rem; } .sec04 .box ul li .inbox { padding: 2rem; } } /*======================================= sec05 =======================================*/ .sec05 { padding-top: min(6.25vw, 8rem); padding-bottom: min(9.38vw, 12rem); background-image: url("../img/bg05.png"); background-repeat: no-repeat; background-size: contain; } .sec05 h2 { width: 32rem; margin-inline: auto; margin-top: min(9.38vw, 12rem); margin-bottom: min(4.69vw, 6rem); } .sec05 .box { max-width: 1000px; width: 100%; margin-inline: auto; } .sec05 .box ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3rem; } .sec05 .box ul li { width: calc((100% - 6rem) / 3); } .sec05 .box ul li a { width: 100%; position: relative; overflow: hidden; } .sec05 .box ul li:nth-child(6) a { border:solid 1px #ccc; } .sec05 .box ul li a img { width: 100%; transition: all 0.3s; -o-object-fit: cover; object-fit: cover; } .sec05 .box ul li a h3 { position: absolute; color: #fff; line-height: 1.8; padding-top: min(0.39vw, 0.5rem); padding-bottom: min(0.39vw, 0.5rem); padding-left: min(1.56vw, 2rem); width: min(22.19vw, 28.4rem); aspect-ratio: 284/40; background-color: #65c3d6; background-image: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); bottom: min(2.34vw, 3rem); } .sec05 .box ul li a p { background-color: #fff; color: #A08C78; padding-top: min(0.39vw, 0.5rem); padding-bottom: min(0.39vw, 0.5rem); padding-left: min(1.56vw, 2rem); width: min(22.19vw, 28.4rem); aspect-ratio: 284/30; bottom: min(7.27vw, 9.3rem); position: absolute; } .sec05 .box ul li a:hover { opacity: 1; } .sec05 .box ul li a:hover img { transform: scale(1.1); } @media screen and (max-width: 1080px) { .sec05 .box { padding-inline: 5%; } .sec05 .box ul li { width: calc((100% - 3rem) / 2); } .sec05 .box ul li a h3 { width: 90%; } .sec05 .box ul li a p { width: 90%; } } @media screen and (max-width: 768px) { .sec05 h2 { margin-bottom: 12rem; width: 30rem; } .sec05 .box ul { justify-content: center; } .sec05 .box ul li { width: 100%; } .sec05 .box ul li a img { aspect-ratio: 4/3; } .sec05 .box ul li a h3 { aspect-ratio: 0; } .sec05 .box ul li a p { aspect-ratio: 0; bottom: 8rem; } } /*======================================= sec06 =======================================*/ .sec06 { padding-bottom: 9.38rem; } .sec06 .box { max-width: 1000px; width: 100%; margin-inline: auto; background-color: #E6F5DC; padding-top: min(6.25vw, 8rem); padding-bottom: min(6.25vw, 8rem); padding-inline: min(6.25vw, 8rem); display: flex; justify-content: space-between; -moz-column-gap: min(5.63vw, 7.2rem); column-gap: min(5.63vw, 7.2rem); } .sec06 .box .left h2 { width: 22rem; margin-bottom: min(4.69vw, 6rem); } .sec06 .box .left ul { margin-bottom: min(3.36vw, 4.3rem); } .sec06 .box .left ul .tabBtn { width: 14rem; aspect-ratio: 14/3; display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 4rem; transition: all 0.5s; cursor: pointer; margin-bottom: min(2.34vw, 3rem); } .sec06 .box .left ul .tabBtn.active { background-color: #65c3d6; background-image: linear-gradient(45deg, #65c3d6 0%, #67b94f 100%); color: #fff; } .sec06 .box .right ul li { border-bottom: 1px dotted #C8C8C8; } .sec06 .box .right ul li ul { display: flex; flex-wrap: wrap; width: 50rem; } .sec06 .box .right ul li ul li:nth-child(1) { margin-right: min(1.09vw, 1.4rem); margin-top: min(1.56vw, 2rem); border-bottom: none; width: 14rem; } .sec06 .box .right ul li ul li:nth-child(2) { color: #fff; display: flex; align-items: center; justify-content: center; width: 10rem; /*aspect-ratio: 97/22;*/ height: 32px; border-radius: 4rem; margin-top: min(1.56vw, 2rem); } .sec06 .box .right ul li ul li:nth-child(2) a { pointer-events: none; } .sec06 .box .right ul li ul li:nth-child(2).important { background-color: #e67777; } .sec06 .box .right ul li ul li:nth-child(2).news { background-color: #F6AD4A; } .sec06 .box .right ul li ul li:nth-child(2).recruit { background-color: #6EC8E1; } .sec06 .box .right ul li ul li:nth-child(2).medical { background-color: #8CC76A; } .sec06 .box .right ul li ul li:nth-child(3) { width: 100%; margin-top: min(0.63vw, 0.8rem); border-bottom: 1px solid #000; margin-bottom: min(1.56vw, 2rem); } .sec06 .box .right ul li:nth-child(5) { border-bottom: none; } .panel { display: none; } .panel.active { display: block; } @media screen and (max-width: 900px) { .sec06 .box .right ul li ul { width: 38rem; } } @media screen and (max-width: 768px) { .sec06 .box { flex-direction: column; justify-content: center; } .sec06 .box .left h2 { margin-inline: auto; } .sec06 .box .left ul { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .sec06 .box .left .btn a { margin-inline: auto; margin-bottom: 3rem; } .sec06 .box .right ul li ul li:nth-child(2){ height: 20px; } .sec06 .box .right ul li ul li a:nth-child(3) { width: 100%; } .sec06 .box .right ul li ul { width: 100%; } } @media screen and (max-width: 600px) { .sec06 .box .left h2 { width: 30rem; margin-bottom: 5rem; } .sec06 .box .left ul { gap: 2rem; } .sec06 .box .left ul .tabBtn { width: calc((100% - 2rem) / 2); aspect-ratio: 0; padding: 0.5rem 0; } .sec06 .box .right ul li ul li:nth-child(1) { margin-top: 0.5rem; margin-bottom: 0.5rem; } .sec06 .box .right ul li ul li:nth-child(3) { margin-bottom: 2rem; padding-bottom: 1rem; } } /*======================================= sec07 =======================================*/ .sec07 { background-color: #F0F5FA; } .sec07 .box { max-width: 1280px; width: 100%; margin-inline: auto; display: flex; } .sec07 .box .left { padding-top: min(4.53vw, 5.8rem); padding-bottom: min(4.53vw, 5.8rem); padding-left: min(10.94vw, 14rem); padding-right: min(5.23vw, 6.7rem); } .sec07 .box .left h2 { width: 27.9rem; margin-bottom: min(2.34vw, 3rem); } .sec07 .box .left .txt01 { line-height: 1.2; margin-bottom: min(2.73vw, 3.5rem); } .sec07 .box .left .txt02 { margin-bottom: min(1.56vw, 2rem); } .sec07 .box .left .btn a { width: 32rem; } .sec07 .box .left .btn a::before { width: 31.6rem; } .sec07 .box .right { width: min(54.69vw, 70rem); position: relative; overflow: hidden; } .sec07 .box .right img { -o-object-fit: cover; object-fit: cover; height: 100%; } .sec07 .box .right::after { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F0F5FA; transition: all 0.8s; } .sec07 .box .right.scroll::after { transform: translateX(100%); } @media screen and (max-width: 1180px) { .sec07 .box .left { padding: 2rem 2rem 2rem 3rem; } .sec07 .box .right { width: 64vw; } } @media screen and (max-width: 1080px) { .sec07 .box { flex-direction: column; } .sec07 .box .left { width: 100%; text-align: center; } .sec07 .box .left h2 { margin-inline: auto; } .sec07 .box .left .btn a { margin-inline: auto; } .sec07 .box .right { width: 100%; height: 42rem; } .sec07 .box .right img { -o-object-position: 0 -93px; object-position: 0 -93px; } } @media screen and (max-width: 768px) { .sec07 .box .left h2 { width: 30rem; margin-bottom: 4rem; } .sec07 .box .left .btn { margin: 3rem 0; } .sec07 .box .right img { -o-object-position: top; object-position: top; } } /*======================================= sec08 =======================================*/ .sec08 { margin-top: min(9.38vw, 12rem); background-image: url("../img/bg06.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } .sec08 .box { max-width: 1280px; width: 100%; margin-inline: auto; display: flex; justify-content: center; } .sec08 .box h3 { font-weight: bold; } .sec08 .box .left, .sec08 .box .right { width: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; text-align: center; } .sec08 .box .left { padding-top: min(5.47vw, 7rem); padding-bottom: min(5.47vw, 7rem); } .sec08 .box .left h3 { margin-bottom: min(0.78vw, 1rem); } .sec08 .box .left p { margin-bottom: min(2.34vw, 3rem); } .sec08 .box .left .btn a { margin-inline: auto; } .sec08 .box .left .btn a p { margin-bottom: 0; } .sec08 .box .right { padding-top: min(5.47vw, 7rem); padding-bottom: min(5.94vw, 7.6rem); } .sec08 .box .right h3 { margin-bottom: min(1.56vw, 2rem); } .sec08 .box .right .fo18 { color: #8CC76A; background-color: #fff; border-radius: 4rem; display: flex; align-items: center; justify-content: center; width: min(24.38vw, 31.2rem); aspect-ratio: 312/30; } .sec08 .box .right a { display: flex; align-items: center; justify-content: center; gap: 1rem; } .sec08 .box .right a img { width: min(2.81vw, 3.6rem); } @media screen and (max-width: 768px) { .sec08 { background-image: ""; } .sec08 .box { flex-direction: column; } .sec08 .box .left, .sec08 .box .right { background-repeat: no-repeat; background-size: cover; background-position: center; } .sec08 .box .left { background-image: url("../img/sec08-01.jpg"); width: 100%; } .sec08 .box .right { background-image: url("../img/sec08-02.jpg"); width: 100%; } .sec08 .box .right .fo18 { width: 31rem; } .sec08 .box .right a img { width: 3.6rem; } } /*======================================= フッター =======================================*/ .footer { text-align: center; padding-top: min(3.91vw, 5rem); } .footer .box { max-width: 1058px; width: 100%; margin-inline: auto; display: flex; justify-content: space-between; margin-bottom: min(4.69vw, 6rem); } .footer .box .left { font-family: "Gothic A1", sans-serif; text-align: left; margin-right: min(3.91vw, 5rem); } .footer .box .left img { width: min(27.27vw, 34.9rem); margin-bottom: min(0.78vw, 1rem); } .footer .box .left .add { margin-bottom: min(0.78vw, 1rem); } .footer .box .left .tel { margin-bottom: min(2.03vw, 2.6rem); } .footer .box .left .tel a { display: inline; } .footer .box .left ul { display: flex; align-items: center; -moz-column-gap: min(1.56vw, 2rem); column-gap: min(1.56vw, 2rem); } .footer .box .left ul li a { color: #3C3C3C; border-bottom: 1px solid #000; } .footer .box .center { width: 32rem; } .footer .box .center ul { display: flex; align-items: center; flex-wrap: wrap; position: relative; } .footer .box .center ul li { width: 50%; display: flex; cursor: pointer; } .footer .box .center ul li a { text-align: left; width: 100%; margin-bottom: min(2.03vw, 2.6rem); } .footer .box .center ul li::before { content: "＞"; display: inline-block; color: #8CC76A; margin-right: 5px; transition: all 0.5s; } .footer .box .center ul li:hover::before { transform: translateX(4px); } .footer .box .right ul li a { display: flex; align-items: center; justify-content: center; width: 24rem; aspect-ratio: 6/1; color: #fff; margin-bottom: min(0.78vw, 1rem); } .footer .box .right ul li:nth-child(1) a { background-color: #A08C78; } .footer .box .right ul li:nth-child(2) a { background-color: #376092; } .footer .box .right ul li:nth-child(3) a { background-color: #8CC76A; margin-bottom: min(1.41vw, 1.8rem); aspect-ratio: 24/5; } .footer .box .right .snsbox { display: flex; align-items: center; justify-content: end; -moz-column-gap: 1.4rem; column-gap: 1.4rem; } .footer .box .right .snsbox a { width: 4rem; aspect-ratio: 1/1; } .footer .copy { text-align: center; color: #fff; background-color: #8CC76A; padding: 1.2rem 0; font-family: "Gothic A1", sans-serif; } @media screen and (max-width: 1200px) { .footer .box .left { margin-right: 0; } } @media screen and (max-width: 1080px) { .footer .box { flex-wrap: wrap; justify-content: center; } .footer .box .left { width: 100%; text-align: center; margin-bottom: 3rem; } .footer .box .left img { margin-inline: auto; margin-bottom: 5rem; } .footer .box .left ul { justify-content: center; } .footer .box .center, .footer .box .right { width: calc(50% - 1rem); } .footer .box .center ul { width: 30rem; margin-inline: auto; } .footer .box .center ul li { width: 15rem; } .footer .box .right ul { margin-inline: auto; width: -moz-fit-content; width: fit-content; } .footer .box .right .snsbox { justify-content: center; } } @media screen and (max-width: 580px) { .footer .box .center, .footer .box .right { width: 100%; } .footer .box .left img { width: 33rem; } .footer .box .center { margin-bottom: 5rem; } .footer .box .center ul li a { margin-bottom: 1.5rem; } .footer .box .right ul { margin-bottom: 3rem; } .footer .box .right ul li { margin-bottom: 1.5rem; } } /*========================== ヘッダー・採用 Ver. ===========================*/ .body-rec #header { background-color: #fff0; } .recruit-h { background-color: #fff; border-radius: 15px; box-shadow: 0px 0px 5px 2px #3335; } .recruit-h { top: 15px; } .recruit-nav .box .right { padding: 3rem 0; } .recruit-h .inner .header-logo { padding: 0; } .recruit-h .inner .header-logo a { display: flex; align-items: center; width: fit-content; gap: 1rem; padding-left: 15px; } .recruit-h .header-logo a img { width: 6rem; } .recruit-h .sp-menu { border-radius: 0 15px 15px 0; } .recruit-h .item { width: 60px; height: 60px; } .re-txt { padding: 0.5rem; width: fit-content; color: #fff; background-color: #8CC76A; width: 12rem; text-align: center; border-radius: 5px; } .telbox { padding: 3rem 0; } .telbox .bar-gray { width: 34rem; margin-inline: auto; } .telbox a { display: flex; align-items: center; gap: 2rem; margin-inline: auto; } .telbox a img { width: 3rem; object-fit: contain; } .telbox ul { width: fit-content; margin-inline: auto; text-align: left; } .telbox ul li { line-height: 2; } @media screen and (max-width: 1080px) { .recruit-f .box .left { flex-direction: column; } .recruit-f .box { gap: 3rem; } .recruit-f .re-txt { margin-inline: auto; } } /*========================== フッター・採用 Ver. ===========================*/ .recruit-f .box .left img { width: 8rem; } .recruit-f .box .left .inbox { display: flex; align-items: center; gap: 1rem; width: 100%; } .recruit-f .box .center a { margin-inline: auto; display: inline-block; } .rec-f { background-image: url("../img/page/recruit/spnav/4.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center bottom; width: 100%; height: 100%; padding: 8rem 0; } .rec-f h2 { width: fit-content; margin-inline: auto; text-align: center; background-color: #fff; padding: 0.5rem 2rem; color: #A08C78; } .rec-f .gra-bg { height: 0.8rem; } .rec-f p { text-align: center; margin: 3rem 0 1rem; line-height: 2; color: #fff; } .re-08 { margin-top: 8rem; background-image: none; } .re-08 .box { gap: 2rem; } .rec-f .left, .re-08 .box .right { color: #000; padding: 2rem 0; margin: 3rem 0; width: 44rem; color: #fff; border-radius: 2rem; } @media screen and (max-width: 768px) { .rec-f .left { width: 90vw; } } .re-08 .box .left { } .re-08 .box .right h3 { margin-bottom: 0; } .re-08 .box .right .inbox a { background-color: #fff; padding: 0.5rem 2rem; color: #000; border-radius: 4rem; margin: 1rem 0; } .re-08 .box .right .inbox a p { display: flex; align-items: center; line-height: 3rem; } .re-08 .box .right .inbox a p .span01 { font-size: 1.4rem; text-align: center; display: inline-block; width: 3rem; aspect-ratio: 1; color: #fff; position: relative; z-index: 3; } .re-08 .box .right .inbox a p .span01::after { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 3rem; aspect-ratio: 1; background-color: #8CC76A; color: #fff; border-radius: 50%; z-index: -1; } .recruit-f .box { max-width: 1280px; align-items: center; } .rec-f .left { display: flex; align-items: center; gap: 2rem; flex-direction: column; justify-content: center; margin-inline: auto; } .recruit-f .box .center { width: 47rem; } .recruit-f .box .right ul li a .image { width: 10rem; aspect-ratio: 4 / 3; overflow: hidden; } .rec-f .left .btn a { background-color: #91E2F8; background-image: linear-gradient(45deg, #91E2F8 0%, #4CB6EC 100%); margin-inline: auto; } .rec-f .left .btn a p { color: #6EC8E1; -webkit-text-fill-color: unset; margin-top: 0; } .recruit-f .box .right ul li:nth-child(1) a { background-color: #fff; } .recruit-f .box .right ul li:nth-child(2) a { background-color: #fff; } .recruit-f .box .right ul li:nth-child(1) a .txt { background-color: #8CC76A; } .recruit-f .box .right ul li:nth-child(2) a .txt { background-color: #376092; } .recruit-f .box .right ul li a { justify-content: left; align-items: stretch; aspect-ratio: unset; } .recruit-f .box .right ul li a .image img { transition: all .3s; } .recruit-f .box .right ul li a:hover .image img { transform: scale(1.1); } .recruit-f .box .right ul li a .txt { width: calc(100% - 10rem); display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1280px) { .recruit-f .box { padding-inline: 5%; } } @media screen and (max-width: 1080px) { .rec-f p { padding-inline: 5%; } .recruit-f .box .left .inbox { width: fit-content; margin-inline: auto; } .recruit-f .box .left .inbox img { margin: 0; } .re-08 .box .left, .re-08 .box .right { width: 34rem; } } @media screen and (max-width: 768px) { .re-08 .box .left, .re-08 .box .right { background-image: none; } .re-08 .box .left { border-right: none; } .re-08 .box .left, .re-08 .box .right { margin-inline: auto; } }