/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) 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 { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-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; } /* 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; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-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; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* ------------------------------------- overwrite ------------------------------------- */ html { font-size: 62.5%; scroll-behavior: smooth; } @media screen and (max-width: 767px) { html { scroll-padding-top: 20px; } } body { font-family: "Zen Kaku Gothic New", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; font-weight: 400; color: #363636; line-height: 1.75; } img { display: block; width: 100%; height: auto; vertical-align: middle; } /* ------------------------------------- common ------------------------------------- */ .is-pc { display: block !important; } @media screen and (max-width: 767px) { .is-pc { display: none !important; } } .is-sp { display: block !important; } @media screen and (min-width: 768px) { .is-sp { display: none !important; } } .inner { max-width: 1200px; margin: 0 auto; padding: 0 3vw; -webkit-box-sizing: content-box; box-sizing: content-box; } @media screen and (max-width: 767px) { .inner { padding: 0 5.4vw; } } .inner-l { max-width: 1720px; margin: 0 auto; padding: 0 3vw; -webkit-box-sizing: content-box; box-sizing: content-box; } @media screen and (max-width: 767px) { .inner-l { padding: 0 5.4vw; } } .inner-s { max-width: 1000px; margin: 0 auto; padding: 0 3vw; -webkit-box-sizing: content-box; box-sizing: content-box; } @media screen and (max-width: 767px) { .inner-s { padding: 0 5.4vw; } } .open-sans { font-family: "Open Sans", sans-serif; } .more-btn { width: min(100%, 400px); height: 70px; margin: 0 auto; } .more-btn a { display: grid; width: 100%; height: 100%; place-items: center; font-size: 1.6rem; font-weight: 700; border-radius: 35px; border: 1px solid #363636; background: url(../images/common/b-arrow.svg) no-repeat right 30px center; -webkit-transition: all 0.3s; transition: all 0.3s; } @media (hover: hover) { .more-btn a:hover { background-position: right 22px center; } } @media screen and (max-width: 767px) { .more-btn { width: min(100%, 400px); height: 60px; margin: 0 auto; } .more-btn a { display: grid; width: 100%; height: 100%; place-items: center; font-size: 1.6rem; font-weight: 700; border-radius: 35px; border: 1px solid #363636; background: url(../images/common/b-arrow.svg) no-repeat right 30px center; -webkit-transition: all 0.3s; transition: all 0.3s; } } @media screen and (max-width: 767px) and (hover: hover) { .more-btn a:hover { background-position: right 22px center; } } @media screen and (max-width: 767px) { .more-btn a { background-size: 20px auto; background-position: right 20px center; } } @media (hover: hover) { .no-link:hover p { text-decoration: none; } } .breadcrumb { margin-top: 15px; } @media screen and (max-width: 767px) { .breadcrumb { margin-top: 8px; } } .breadcrumb .list { display: -webkit-box; display: -ms-flexbox; display: flex; } .breadcrumb .list li { position: relative; font-size: 1.4rem; } @media screen and (max-width: 767px) { .breadcrumb .list li { font-size: 1rem; } } .breadcrumb .list li:nth-of-type(n+2) { margin-left: 1.5em; } .breadcrumb .list li:nth-of-type(n+2)::before { position: absolute; top: -2px; left: -20px; display: inline-block; content: ">"; margin: 0 0.4em; } @media screen and (max-width: 767px) { .breadcrumb .list li:nth-of-type(n+2)::before { top: -1px; left: -14px; } } @media (hover: hover) { .breadcrumb .list li a:hover { text-decoration: underline; } } .sns-bnr { position: relative; padding-top: 70px; padding-bottom: 100px; } @media screen and (max-width: 767px) { .sns-bnr { padding: 45px 0 70px; } } .sns-bnr::before { position: absolute; content: ""; display: block; background: radial-gradient(ellipse at center, #363636 0%, #363636 25%, transparent 25%, transparent 100%) center 0 repeat-x; background-size: 8px 8px; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: min(1720px, 100% - 6vw); height: 8px; } .sns-bnr__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 767px) { .sns-bnr__content { display: block; } } .sns-bnr__item { width: 360px; margin: 30px 1.8% 0; } @media screen and (max-width: 767px) { .sns-bnr__item { width: min(335px, 100%); margin: 25px auto 0; } } .sns-bnr__item a { display: block; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } @media (hover: hover) { .sns-bnr__item a:hover { opacity: 0.7; } } /* ------------------------------------- header ------------------------------------- */ .header { width: 100%; background-color: #d8bf0b; padding-bottom: 8.8541666667vw; } @media screen and (max-width: 767px) { .header { position: fixed; top: 0; left: 0; height: 70px; padding: 0; z-index: 100; } } .header__top { position: relative; padding: 35px; background-color: #fff; } .header__top .main-logo { width: 48.2300884956%; margin: 0 auto; } .header__top-links { position: absolute; right: 2.6548672566%; bottom: 35px; width: 21.2389380531%; min-width: 160px; } .header__top-links a { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } @media (hover: hover) { .header__top-links a:hover { opacity: 0.7; } } @media screen and (max-width: 767px) { .header__top-links .contact { position: fixed; top: 12px; right: calc(55px + 5.4vw); width: 160px; z-index: 100; } } .header__top-links .sns { display: grid; place-items: center; margin-top: 20px; padding: 6.3%; background-color: #fff6cf; border-radius: 20px; } .header__top-links .sns-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .header__top-links .sns-links__item { width: 30px; margin: 0 8px; } .header__top-links .sns-links__item:first-of-type { width: 25px; } .header__nav-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 30px; } .header__nav-item { width: 14.2857142857%; height: 30px; text-align: center; border-left: 3px dotted #fff; } .header__nav-item:last-of-type { border-right: 3px dotted #fff; } .header__nav-item a { display: block; height: 100%; font-size: 1.6rem; font-weight: 700; color: #fff; -webkit-transition: color 0.3s; transition: color 0.3s; } @media (hover: hover) { .header__nav-item a:hover { color: #363636; } } .sp-header__nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #fff6cf; overflow-y: scroll; pointer-events: none; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; z-index: 90; } .sp-header__nav .wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .sp-header__nav .wrap .inner { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .sp-header__nav-logo { width: 75px; margin-top: 12px; } .sp-header__nav-list { margin: 20px 0; } .sp-header__nav-item { margin-bottom: 12px; } .sp-header__nav-item a { display: block; text-align: center; padding: 20px 0; background: url(../images/common/menu-arrow.svg) no-repeat right 12px center/10px auto; background-color: #fff; border-radius: 8px; } .sp-header__nav-item .main-ttl { display: block; font-size: 2.3rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.1em; } .sp-header__nav-item .sub-ttl { font-size: 1.5rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.1em; color: #6a3906; } .sp-header__nav-bottom { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 30px 0 70px; background-color: #fff; } .sp-header__nav-bottom img { width: 48.9333333333vw; margin: 0 auto; } .drawer-btn { position: fixed; top: 15px; right: 5.4vw; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; cursor: pointer; z-index: 100; } .drawer-btn span { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 15px; height: 2px; background-color: #44af35; border-radius: 5px; -webkit-transition: all 0.3s; transition: all 0.3s; } .drawer-btn span:nth-of-type(1) { top: 13px; } .drawer-btn span:nth-of-type(2) { top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .drawer-btn span:nth-of-type(3) { bottom: 13px; } #hamburger { display: none; } #hamburger:checked + .sp-header__nav { pointer-events: auto; opacity: 1; } #hamburger:checked ~ .drawer-btn span:nth-of-type(1) { top: 19px; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); } #hamburger:checked ~ .drawer-btn span:nth-of-type(2) { opacity: 0; } #hamburger:checked ~ .drawer-btn span:nth-of-type(3) { bottom: 19px; -webkit-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); } /* ------------------------------------- footer ------------------------------------- */ .footer { position: relative; background-color: #fff6cf; } .footer__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 50px 0; } @media screen and (max-width: 767px) { .footer__content { display: block; padding: 90px 0 35px; } } .footer__content .main-logo { width: 28.5%; margin-right: 30px; } @media screen and (max-width: 767px) { .footer__content .main-logo { width: 182px; margin: 0 auto 35px; } } .footer__links { position: relative; padding: 20px 0 0 14%; } @media screen and (max-width: 767px) { .footer__links { padding: 25px 0 0; } } .footer__links::before { position: absolute; content: ""; display: block; background: radial-gradient(ellipse at center, #363636 0%, #363636 25%, transparent 25%, transparent 100%) center 0 repeat-y; background-size: 8px 8px; width: 8px; height: 100%; top: 0; left: 0; } @media screen and (max-width: 767px) { .footer__links::before { position: absolute; content: ""; display: block; background: radial-gradient(ellipse at center, #363636 0%, #363636 25%, transparent 25%, transparent 100%) center 0 repeat-x; background-size: 8px 8px; width: 100%; height: 8px; } } .footer__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer__nav-item { font-size: 1.6rem; font-weight: 500; margin: 0 0 0.5em 2em; } .footer__nav-item a { -webkit-transition: all 0.3s; transition: all 0.3s; } @media (hover: hover) { .footer__nav-item a:hover { text-decoration: underline; } } .footer__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-top: 35px; } @media screen and (max-width: 767px) { .footer__bottom { display: block; margin-top: 0; } } .footer__bottom .txt p { font-size: 1.4rem; font-weight: 500; text-align: right; color: #6a3906; margin-top: 0.5em; } @media screen and (max-width: 767px) { .footer__bottom .txt p { text-align: center; } } @media (hover: hover) { .footer__bottom .txt a:hover { text-decoration: underline; } } .footer__bottom .logo { width: 150px; margin-left: 36px; } @media screen and (max-width: 767px) { .footer__bottom .logo { width: 140px; margin: 20px auto 0; } } #page-top { position: absolute; top: -2px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 170px; } /* ------------------------------------- top ------------------------------------- */ .sp-main-logo { margin-top: 90px; } .sp-main-logo .main-logo { width: 95%; margin: 0 auto; } .mv { margin-top: -5%; } @media screen and (max-width: 767px) { .mv { margin-top: 35px; } } .slider { display: none; position: relative; } .slider.slick-initialized { display: block; } .slider .slick-slide { margin-right: 0.4% !important; margin-left: 0.4% !important; } .slider__item { position: relative; } .slider__item .box { position: absolute; bottom: 0; left: 0; max-width: 420px; padding: 3% 4% 3% max(35px, 9%); border-top-right-radius: 40px; background-color: #fff; z-index: 1; } @media screen and (max-width: 767px) { .slider__item .box { width: 75%; padding-left: 13%; border-top-right-radius: 20px; } } .slider__item .box .tag { position: absolute; bottom: 15%; left: 4%; font-size: clamp(1rem, 1.0416666667vw, 2rem); font-weight: 700; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; color: #fff; height: 8.5em; padding: 1em 0.1em; background-color: #44af35; border-radius: 20px; } .slider__item .box .ttl { font-size: clamp(1rem, 1.3541666667vw, 2.6rem); font-weight: 700; line-height: 1.3; } @media screen and (max-width: 767px) { .slider__item .box .ttl { font-size: 1.4rem; } } .slider__item .box .profile { font-size: clamp(1rem, 1.0416666667vw, 2rem); font-weight: 500; text-align: right; color: #6a3906; } @media screen and (max-width: 767px) { .slider__item .box .profile { text-align: left; margin-top: 6px; } } .slider__item .box .profile::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em; background-color: #44af35; border-radius: 50%; } .slider__arrow { position: absolute; top: 50%; width: 5.2083333333vw; aspect-ratio: 100/200; background: url(../images/top/slide-arrow.svg) no-repeat center center/contain; background-color: transparent; cursor: pointer; z-index: 1; } @media screen and (max-width: 767px) { .slider__arrow { width: 9.0666666667vw; aspect-ratio: 68/120; background-image: url(../images/top/slide-arrow-sp.svg); } } .slider__arrow.prev { left: 27%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 767px) { .slider__arrow.prev { left: 8%; } } .slider__arrow.next { right: 27%; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } @media screen and (max-width: 767px) { .slider__arrow.next { right: 8%; } } .news { margin-top: 120px; } @media screen and (max-width: 767px) { .news { margin-top: 70px; } } .news__main-ttl { position: relative; text-align: center; } .news__main-ttl::before { position: absolute; content: ""; top: -20px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 278px; height: 67px; background: url(../images/top/news-ttl-bg.svg) no-repeat center center/contain; } @media screen and (max-width: 767px) { .news__main-ttl::before { width: 225px; height: 54px; } } .news__main-ttl .sub-ttl { display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: 0.1em; color: #6a3906; } @media screen and (max-width: 767px) { .news__main-ttl .sub-ttl { font-size: 1.4rem; line-height: 1.2; } } .news__main-ttl .main-ttl { display: block; font-size: 2.8rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.1em; } @media screen and (max-width: 767px) { .news__main-ttl .main-ttl { font-size: 2.2rem; } } .news__list { position: relative; margin-top: 20px; background-color: #fff6cf; border-top-left-radius: 20px; padding: 10px 70px 10px 30px; border-top-right-radius: 20px; border-bottom: 1px solid #363636; } @media screen and (max-width: 767px) { .news__list { margin-top: 10px; } } @media screen and (max-width: 767px) { .news__item { padding: 8px 0; } } .news__item a { display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (max-width: 767px) { .news__item a { display: block; } } @media (hover: hover) { .news__item a:hover .ttl { text-decoration: underline; } } @media (hover: hover) { .news__item a.no-link:hover .ttl { text-decoration: none; } } .news__item .date { font-size: 1.8rem; font-weight: 600; width: 120px; margin: 10px 0; } @media screen and (max-width: 767px) { .news__item .date { margin: 0; } } .news__item .ttl { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 1.4rem; font-weight: 500; margin: 10px 0; padding: 5px 0 5px 30px; border-left: 2px solid #fff; } @media screen and (max-width: 767px) { .news__item .ttl { margin: 0; padding: 0; border: none; } } .news .accordion-btn { position: absolute; top: 18px; right: 20px; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; cursor: pointer; } @media screen and (max-width: 767px) { .news .accordion-btn { top: 28px; } } .news .accordion-btn.is-open::after { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .news .accordion-btn::before, .news .accordion-btn::after { position: absolute; content: ""; top: 50%; left: 50%; width: 15px; height: 2px; background-color: #363636; border-radius: 2px; } .news .accordion-btn::before { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .news .accordion-btn::after { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .hidden-area { display: none; } .about { margin-top: 90px; padding-top: 8.8541666667vw; background: url(../images/top/about-ttl-bg.svg) no-repeat center top/62.5vw auto; overflow: hidden; } @media screen and (max-width: 767px) { .about { margin-top: 75px; padding-top: 65px; background-image: url(../images/top/about-ttl-bg-sp.svg); background-size: min(334px, 100%) auto; } } .about__main-ttl { position: relative; font-size: 3.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; } @media screen and (max-width: 767px) { .about__main-ttl { font-size: 2.2rem; line-height: 1.3; } } .about__main-ttl::before, .about__main-ttl::after { position: absolute; content: ""; display: block; background: radial-gradient(ellipse at center, #363636 0%, #363636 25%, transparent 25%, transparent 100%) center 0 repeat-x; background-size: 8px 8px; width: calc((100% - 534px) / 2); height: 8px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 767px) { .about__main-ttl::before, .about__main-ttl::after { width: calc((100% - 165px) / 2); } } .about__main-ttl::before { left: 0; } .about__main-ttl::after { right: 0; } .about__contents { padding: 8.3333333333% 0 20.8333333333%; background: url(../images/top/road-img.svg) no-repeat center bottom 7%/auto 82%; } @media screen and (max-width: 767px) { .about__contents { background-image: url(../images/top/road-img-sp.svg); background-size: auto 77%; } } .about__content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .about__content .desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 47.5%; } @media screen and (max-width: 767px) { .about__content .desc { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } } .about__content .main-ttl { text-align: center; width: 120px; height: 550px; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; } @media screen and (max-width: 767px) { .about__content .main-ttl { width: 60px; height: 275px; } } .about__content .main-ttl .num { display: inline-block; font-size: 9rem; color: #fff; } @media screen and (max-width: 960px) { .about__content .main-ttl .num { font-size: 7rem; } } @media screen and (max-width: 767px) { .about__content .main-ttl .num { font-size: 4.5rem; } } .about__content .main-ttl img { width: 50%; margin: -15px auto 0; } @media screen and (max-width: 767px) { .about__content .main-ttl img { width: 63%; margin-top: -10px; } } .about__content .txt-area { width: 75.7894736842%; min-width: 240px; } @media screen and (max-width: 767px) { .about__content .txt-area { display: contents; } } @media screen and (max-width: 767px) { .about__content .wrap { width: calc(100% - 80px); } .about__content .wrap > *:last-child { margin-bottom: 0; } } .about__content .txt { font-size: 1.6rem; margin-bottom: 1.5em; } .about__content .point { position: relative; font-size: 2rem; font-weight: 700; } .about__content .point::before { position: absolute; content: ""; left: 0; bottom: -3px; width: 100%; height: 1px; background-color: #363636; } .about__content .point span { font-size: 2.8rem; line-height: 1.2; } .about__content .list { font-size: 1.6rem; margin-bottom: 1.5em; } .about__content .list li { padding-left: 1em; text-indent: -1em; } .about__content .list li::before { display: inline-block; content: ""; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background-color: #363636; } .about__content .more-btn { margin-top: 15%; background-color: #fff; } @media screen and (max-width: 767px) { .about__content .more-btn { margin-top: 30px; } } .about__content .img { position: absolute; } .about__content .img02 { z-index: 1; } .about__content:nth-of-type(odd) .txt-area { margin-left: 8.8%; } @media screen and (max-width: 767px) { .about__content:nth-of-type(odd) .wrap { margin-left: auto; } } .about__content:nth-of-type(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .about__content:nth-of-type(even) .desc { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .about__content:nth-of-type(even) .txt-area { margin-right: 8.8%; } @media screen and (max-width: 767px) { .about__content:nth-of-type(even) .wrap { margin-right: auto; } } @media screen and (max-width: 767px) { .about__content.sec01 { padding: 16.4179104478% 0 135.8208955224%; } } .about__content.sec01 .img01 { width: 45.8333333333%; top: 0; right: 0; } @media screen and (max-width: 767px) { .about__content.sec01 .img01 { width: 100%; top: initial; bottom: 13%; } } .about__content.kotsu .main-ttl { background-color: #def1fb; } @media screen and (max-width: 767px) { .about__content.kotsu .main-ttl { height: 290px; } } .about__content.kotsu .point { color: #00aeeb; } .about__content.kotsu .img02 { width: 15.5833333333%; bottom: -15%; left: 26%; } @media screen and (max-width: 767px) { .about__content.kotsu .img02 { width: 34.9253731343%; bottom: 0; left: 40%; } } .about__content.sec02 { margin-top: 15%; } @media screen and (max-width: 767px) { .about__content.sec02 { padding: 68.6567164179% 0 40.2985074627%; } } .about__content.sec02 .img01 { top: 0; left: 50%; -webkit-transform: translateX(-105%); transform: translateX(-105%); width: 54.4791666667vw; } @media screen and (max-width: 767px) { .about__content.sec02 .img01 { -webkit-transform: translateX(-65%); transform: translateX(-65%); width: 102vw; } } .about__content.saigai .main-ttl { background-color: #fae5ee; } .about__content.saigai .point { color: #e50038; } .about__content.saigai .img02 { bottom: -10%; right: 21%; width: 17.6666666667%; } @media screen and (max-width: 960px) { .about__content.saigai .img02 { bottom: -18%; } } @media screen and (max-width: 767px) { .about__content.saigai .img02 { bottom: 2%; right: 6%; width: 42.3880597015%; } } .about__content.sec03 { margin-top: 10%; } @media screen and (max-width: 767px) { .about__content.sec03 { padding: 74.6268656716% 0 43.2835820896%; } } .about__content.sec03 .img01 { top: 0; right: 50%; -webkit-transform: translateX(105%); transform: translateX(105%); width: 58.0208333333vw; } @media screen and (max-width: 767px) { .about__content.sec03 .img01 { -webkit-transform: translateX(60%); transform: translateX(60%); width: 98.6666666667vw; } } .about__content.chian .main-ttl { background-color: #e0efe1; } .about__content.chian .point { color: #6fb92c; } .about__content.chian .img02 { bottom: -16%; left: 24%; width: 13.5%; } @media screen and (max-width: 767px) { .about__content.chian .img02 { bottom: 0; left: 20%; width: 34.328358209%; } } .about__content.sec04 { margin-top: 12.5%; } @media screen and (max-width: 767px) { .about__content.sec04 { padding: 68.6567164179% 0 44.776119403%; } } .about__content.sec04 .img01 { top: 6%; left: 50%; -webkit-transform: translateX(-105%); transform: translateX(-105%); width: 43.6458333333vw; } @media screen and (max-width: 767px) { .about__content.sec04 .img01 { top: 0; -webkit-transform: translateX(-65%); transform: translateX(-65%); width: 89.3333333333vw; } } .about__content.rekishi .main-ttl { background-color: #fdebd1; } @media screen and (max-width: 767px) { .about__content.rekishi .main-ttl { height: 335px; } } .about__content.rekishi .point { color: #ec6c00; } .about__content.rekishi .img02 { bottom: -20%; left: 38%; width: 10%; } @media screen and (max-width: 767px) { .about__content.rekishi .img02 { bottom: 0; left: 45%; width: 28.3582089552%; } } .about__content.sec05 { margin-top: 12.5%; } @media screen and (max-width: 767px) { .about__content.sec05 { padding: 65.671641791% 0 44.776119403%; } } .about__content.sec05 .img01 { top: 6%; right: 50%; -webkit-transform: translateX(105%); transform: translateX(105%); width: 54.4791666667vw; } @media screen and (max-width: 767px) { .about__content.sec05 .img01 { top: 0; -webkit-transform: translateX(65%); transform: translateX(65%); width: 102.6666666667vw; } } .about__content.kosodate .main-ttl { height: 580px; background-color: #e5f3f1; } @media screen and (max-width: 767px) { .about__content.kosodate .main-ttl { height: 350px; } } .about__content.kosodate .point { color: #248bb9; } .about__content.kosodate .img02 { bottom: -8%; right: 25%; width: 16.6666666667%; } @media screen and (max-width: 767px) { .about__content.kosodate .img02 { bottom: 4%; left: 45%; width: 37.3134328358%; } } .interview { padding-bottom: 120px; } @media screen and (max-width: 767px) { .interview { padding-bottom: 34.6666666667vw; } } .interview__body { padding-bottom: 60px; border-radius: 40px; background: #fff6cf url(../images/top/interview-bg.svg) no-repeat center top/614px auto; } @media screen and (max-width: 767px) { .interview__body { padding-bottom: 45px; background-image: url(../images/top/interview-bg-sp.svg); background-size: 273px auto; border-radius: 20px; } } .interview__main-ttl { text-align: center; } .interview__main-ttl .sub-ttl { display: block; font-size: 2.2rem; font-weight: 600; letter-spacing: 0.1em; color: #6a3906; } @media screen and (max-width: 767px) { .interview__main-ttl .sub-ttl { font-size: 1.4rem; line-height: 1.2; } } .interview__main-ttl .main-ttl { font-size: 3.6rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.1em; } @media screen and (max-width: 767px) { .interview__main-ttl .main-ttl { font-size: 2.2rem; } } .interview__content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 120px; } @media screen and (max-width: 767px) { .interview__content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; margin-top: 65px; padding: 0 8.4%; } } .interview__item { width: 30.8333333333%; } @media screen and (max-width: 767px) { .interview__item { width: 100%; } } .interview__item a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; background-color: #fff; border-radius: 20px; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } @media (hover: hover) { .interview__item a:hover { opacity: 0.7; } } .interview__item img { border-top-left-radius: 20px; border-top-right-radius: 20px; margin-bottom: 15px; } .interview__item .ttl { font-size: 2.4rem; font-weight: 700; line-height: 1.5; padding: 0 7%; } @media screen and (max-width: 767px) { .interview__item .ttl { font-size: 1.8rem; } } .interview__item .profile { font-size: 1.8rem; font-weight: 500; color: #6a3906; margin-top: auto; padding: 20px 7% 15px; } @media screen and (max-width: 767px) { .interview__item .profile { font-size: 1.4rem; padding-top: 15px; } } .interview__item .profile::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background-color: #44af35; border-radius: 50%; } @media screen and (max-width: 767px) { .interview__item .profile::before { width: 8px; height: 8px; margin: 0 5px 1px 0; } } .interview .more-btn { margin-top: 60px; } @media screen and (max-width: 767px) { .interview .more-btn { max-width: 280px; margin-top: 40px; } .interview .more-btn a { padding-right: 25px; } } .interview .img.img01 { position: absolute; bottom: -58%; right: -1%; aspect-ratio: 344/168; width: 26.2996941896%; background: url(../images/top/interview-img01.svg) no-repeat center center/contain; } @media screen and (max-width: 767px) { .interview .img.img01 { bottom: -19%; right: 9%; width: 45.8666666667vw; } } .movie { position: relative; padding: 120px 0; } @media screen and (max-width: 767px) { .movie { padding: 70px 0; } } .movie::before { position: absolute; content: ""; display: block; background: radial-gradient(ellipse at center, #363636 0%, #363636 25%, transparent 25%, transparent 100%) center 0 repeat-x; background-size: 8px 8px; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: min(1720px, 100% - 6vw); height: 8px; } .movie__ttl { text-align: center; background-image: url(../images/top/movie-bg01.svg), url(../images/top/movie-bg02.svg); background-repeat: no-repeat; background-size: 100px auto; background-position: left top, right bottom; padding: 0 30px; } @media screen and (max-width: 767px) { .movie__ttl { background-size: 50px auto; } } .movie__ttl .sub-ttl { display: block; font-size: 2.8rem; font-weight: 700; } @media screen and (max-width: 767px) { .movie__ttl .sub-ttl { font-size: 1.4rem; } } .movie__ttl .main-ttl { display: block; font-size: 5rem; line-height: 1.4; letter-spacing: 0.15em; color: #44af35; padding-bottom: 0.1em; } @media screen and (max-width: 767px) { .movie__ttl .main-ttl { font-size: 2.5rem; } } .movie__area { width: 100%; aspect-ratio: 16/9; margin-top: 80px; } @media screen and (max-width: 767px) { .movie__area { margin-top: 25px; } } .movie__area iframe { width: 100%; height: 100%; } .booklet-bnr { margin: 80px auto 0; max-width: 600px; } @media screen and (max-width: 767px) { .booklet-bnr { margin-top: 50px; } } .booklet-bnr a { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } @media (hover: hover) { .booklet-bnr a:hover { opacity: 0.7; } } /* ------------------------------------- sub ------------------------------------- */ @media screen and (max-width: 767px) { .sub-page main { margin-top: 70px; } } .sub-page .header { padding-bottom: 30px; } .sub-page .sub-sec .inner-s { position: relative; padding: 0; } .sub-page .more-btn { margin-top: 40px; } @media screen and (max-width: 767px) { .sub-page .more-btn { margin-top: 20px; } } .sub-page .more-btn.return { margin-top: 100px; } @media screen and (max-width: 767px) { .sub-page .more-btn.return { margin-top: 70px; } } .sub-page .sns-bnr { margin-top: 120px; } @media screen and (max-width: 767px) { .sub-page .sns-bnr { margin-top: 70px; } } .main-ttl-area { display: grid; place-items: center; width: 100%; height: 240px; background-color: #fff6cf; } @media screen and (max-width: 767px) { .main-ttl-area { height: 100px; } } .sub-main-ttl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sub-main-ttl .sub-ttl { position: relative; font-size: 2rem; font-weight: 600; letter-spacing: 0.1em; color: #6a3906; padding-left: 20px; } @media screen and (max-width: 767px) { .sub-main-ttl .sub-ttl { font-size: 1.4rem; } } .sub-main-ttl .sub-ttl::before { position: absolute; display: inline-block; content: ""; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 10px; height: 10px; background-color: #44af35; border-radius: 50%; } .sub-main-ttl .main-ttl { font-size: 3.6rem; font-weight: 700; letter-spacing: 0.1em; margin-left: 30px; } @media screen and (max-width: 767px) { .sub-main-ttl .main-ttl { font-size: 2.4rem; margin-left: 15px; } } .menu { margin-top: 60px; } @media screen and (max-width: 767px) { .menu { margin-top: 20px; } } .menu__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .menu__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; width: 16.8%; margin-bottom: 30px; border-bottom: 1px solid #363636; } @media screen and (max-width: 767px) { .menu__item { width: 47.5%; } } .menu__item:not(:nth-of-type(5n+1)) { margin-left: 4%; } @media screen and (max-width: 767px) { .menu__item:not(:nth-of-type(5n+1)) { margin-left: 0; } } @media screen and (max-width: 767px) { .menu__item:nth-of-type(even) { margin-left: 5%; } } .menu__item a { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; font-size: 1.6rem; font-weight: 700; text-align: left; line-height: 1.5; padding: 16px 0; } @media screen and (max-width: 767px) { .menu__item a { font-size: 1.2rem; padding: 8px 0; } } @media (hover: hover) { .menu__item a:hover:before { bottom: -25px; } } .menu__item a::before { position: absolute; content: ""; bottom: -20px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 20px; height: 10px; background: url(../images/common/g-arrow.svg) no-repeat center center/contain; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 767px) { .menu__item a::before { bottom: -15px; width: 15px; height: 8px; } } .sub-sec { padding-top: 130px; } @media screen and (max-width: 767px) { .sub-sec { padding-top: 60px; } } .sub-sec h3 { position: relative; font-size: 2.4rem; font-weight: 700; line-height: 1.5; margin-bottom: 40px; padding-bottom: 20px; } @media screen and (max-width: 767px) { .sub-sec h3 { font-size: 2rem; margin-bottom: 20px; } } .sub-sec h3::before { position: absolute; content: ""; display: block; background: radial-gradient(ellipse at center, #363636 0%, #363636 25%, transparent 25%, transparent 100%) center 0 repeat-x; background-size: 8px 8px; left: 0; bottom: 0; width: 100%; height: 8px; } .sub-sec h3::after { position: absolute; content: ""; top: -70px; left: -100px; width: 160px; height: 160px; background-color: #fff6cf; border-radius: 50%; z-index: -1; } @media screen and (max-width: 767px) { .sub-sec h3::after { width: 90px; height: 90px; top: -30px; left: -30px; } } .sub-sec h4 { font-size: 2rem; font-weight: 700; line-height: 1.5; color: #44af35; margin: 50px 0 10px; } @media screen and (max-width: 767px) { .sub-sec h4 { font-size: 1.8rem; margin-top: 30px; } } .sub-sec h5 { font-size: 1.8rem; font-weight: 700; margin: 30px 0 10px; } @media screen and (max-width: 767px) { .sub-sec h5 { font-size: 1.6rem; margin-top: 20px; } } .sub-sec p, .sub-sec li, .sub-sec dt, .sub-sec dd { font-size: 1.6rem; } .sub-sec ul li { position: relative; padding-left: 1em; } .sub-sec ul li::before { position: absolute; content: ""; top: 12px; left: 2px; width: 8px; height: 8px; background-color: #363636; border-radius: 50%; } .sub-sec dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 15px 0; } .sub-sec dl dt { font-weight: 700; color: #6a3906; padding: 0.3em 1.2em; background-color: #fff6cf; border-radius: 10px; } .sub-sec dl dd { font-weight: 700; margin-left: 15px; } .sub-sec table { margin-top: 30px; border-collapse: collapse; } .sub-sec table th, .sub-sec table td { font-size: 1.6rem; text-align: center; line-height: 1.5; padding: 0.4em 1em; border: 1px solid #363636; } @media screen and (max-width: 767px) { .sub-sec table th, .sub-sec table td { font-size: 1.4rem; } } .sub-sec table th { background-color: #eee; } .sub-sec .indent { padding-left: 1em; text-indent: -1em; } .sub-sec .img { position: absolute; right: 3%; z-index: -1; } .sub-sec .img img { aspect-ratio: 1/1; -o-object-fit: contain; object-fit: contain; -o-object-position: center top; object-position: center top; } .point-box { margin-top: 65px; padding: 0 50px 35px; border: 6px solid #e50038; border-radius: 40px; } @media screen and (max-width: 767px) { .point-box { margin-top: 45px; padding: 0 20px 10px; border-width: 3px; border-radius: 15px; } } .point-box .ttl { display: grid; place-items: center; width: 350px; height: 60px; margin: 0 auto; background-color: #e50038; border-radius: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 767px) { .point-box .ttl { width: unset; max-width: 260px; height: 40px; } } .point-box .ttl span { display: inline-block; font-size: 2.4rem; font-weight: 700; color: #fff; } @media screen and (max-width: 767px) { .point-box .ttl span { font-size: 2rem; } } .point-box ul li { font-size: 1.8rem; margin-bottom: 0.8em; padding-left: 45px; } @media screen and (max-width: 767px) { .point-box ul li { font-size: 1.6rem; padding-left: 30px; } } .point-box ul li::before { top: 5px; width: 28px; height: 20px; background: url(../images/common/check.svg) no-repeat center center/contain; } @media screen and (max-width: 767px) { .point-box ul li::before { top: 8px; width: 20px; height: 14px; } } .wrap-indent { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 16px; } .wrap-indent p:nth-of-type(1) { -ms-flex-negative: 0; flex-shrink: 0; } .wrap-indent li { padding-left: 1em; text-indent: -1em; } .wrap-indent li::before { display: none; } .page-parenting .sub-sec .img01 { top: 7%; width: 17%; } @media screen and (max-width: 767px) { .page-parenting .sub-sec .img01 { top: -15px; width: 60px; } } .page-parenting .sub-sec .img02 { top: 10%; width: 16%; } @media screen and (max-width: 767px) { .page-parenting .sub-sec .img02 { top: -14px; width: 65px; } } .page-parenting .sub-sec .img03 { top: 6.5%; width: 14%; } @media screen and (max-width: 767px) { .page-parenting .sub-sec .img03 { top: -20px; width: 60px; } } .page-parenting .sub-sec .img04 { top: 4%; width: 18%; } @media screen and (max-width: 767px) { .page-parenting .sub-sec .img04 { top: -25px; width: 90px; } } .page-parenting .sub-sec .img05 { width: min(100%, 700px); margin: 40px auto 0; } .page-living .sub-sec .img01 { top: 6%; width: 16%; } @media screen and (max-width: 767px) { .page-living .sub-sec .img01 { top: -10px; width: 60px; } } .page-living .sub-sec .img02 { top: 17%; width: 26%; } @media screen and (max-width: 767px) { .page-living .sub-sec .img02 { position: static; width: min(100%, 400px); margin: 20px auto 0; } .page-living .sub-sec .img02 img { aspect-ratio: auto; } } .page-living .sub-sec .img03 { top: 38%; width: 16%; } @media screen and (max-width: 767px) { .page-living .sub-sec .img03 { top: -8px; width: 60px; } } .page-living .sub-sec .img04 { top: 25%; width: 16%; } @media screen and (max-width: 767px) { .page-living .sub-sec .img04 { top: 10px; width: 60px; } } .page-living .sub-sec .img05 { top: 33%; width: 22%; } @media screen and (max-width: 767px) { .page-living .sub-sec .img05 { top: -16px; width: 90px; } } .page-subsidy .sub-sec .img01 { top: 60%; width: 17.5%; } @media screen and (max-width: 767px) { .page-subsidy .sub-sec .img01 { top: 26px; width: 58px; } } .page-subsidy .sub-sec .img02 { top: 20%; width: 13%; } @media screen and (max-width: 767px) { .page-subsidy .sub-sec .img02 { top: 15px; width: 55px; } } .page-subsidy .sub-sec .img03 { top: 45%; width: 19.6%; } @media screen and (max-width: 767px) { .page-subsidy .sub-sec .img03 { top: 0; width: 65px; } } .page-subsidy .sub-sec .img04 { top: 40%; width: 15%; } @media screen and (max-width: 767px) { .page-subsidy .sub-sec .img04 { top: -15px; width: 55px; } } .page-subsidy .sub-sec .img05 { top: 50%; width: 22%; } @media screen and (max-width: 767px) { .page-subsidy .sub-sec .img05 { top: 15px; width: 70px; } } .page-subsidy .sub-sec .img06 { top: 25%; width: 14%; } @media screen and (max-width: 767px) { .page-subsidy .sub-sec .img06 { top: 10px; width: 50px; } } .page-subsidy .sub-sec .img07 { top: 40%; width: 16%; } @media screen and (max-width: 767px) { .page-subsidy .sub-sec .img07 { top: 0; width: 55px; } } .page-subsidy .sub-sec .img08 { top: 55%; width: 15%; } @media screen and (max-width: 767px) { .page-subsidy .sub-sec .img08 { top: -15px; width: 55px; } } .page-subsidy .sub-sec .img09 { top: 70%; width: 15%; } @media screen and (max-width: 767px) { .page-subsidy .sub-sec .img09 { top: -15px; width: 55px; } } .page-subsidy .sub-sec .img10 { top: 60%; width: 17%; } @media screen and (max-width: 767px) { .page-subsidy .sub-sec .img10 { top: -15px; width: 60px; } } .page-data .sub-sec .img01 { top: 18%; width: 17%; } @media screen and (max-width: 767px) { .page-data .sub-sec .img01 { top: 6px; width: 60px; } } .page-data .sub-sec .img02 { top: 30%; width: 19%; } @media screen and (max-width: 767px) { .page-data .sub-sec .img02 { top: -8px; width: 80px; } } .page-data .sub-sec .img03 { top: 8%; width: 14%; } @media screen and (max-width: 767px) { .page-data .sub-sec .img03 { top: -24px; width: 65px; } } .page-data .sub-sec .img04 { top: 40%; width: 16%; } @media screen and (max-width: 767px) { .page-data .sub-sec .img04 { top: -15px; width: 55px; } } .page-data .sub-sec .img05 { top: 53%; width: 17%; } @media screen and (max-width: 767px) { .page-data .sub-sec .img05 { top: -15px; width: 55px; } } .page-work .sub-sec .img01 { top: 35%; width: 16%; } @media screen and (max-width: 767px) { .page-work .sub-sec .img01 { top: -18px; width: 60px; } } .page-work .sub-sec .img02 { top: 32%; width: 16%; } @media screen and (max-width: 767px) { .page-work .sub-sec .img02 { top: -18px; width: 60px; } } .interview-box { margin-top: 30px; } .interview-box a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff6cf; border-radius: 40px; } @media (hover: hover) { .interview-box a:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } } @media screen and (max-width: 767px) { .interview-box a { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; border-radius: 20px; } } .interview-box .desc { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 30px 25px; } @media screen and (max-width: 767px) { .interview-box .desc { padding: 20px; } } .interview-box .title { margin: 0 0 10px; } .interview-box .image { width: 40%; overflow: hidden; } @media screen and (max-width: 767px) { .interview-box .image { width: 100%; } } .interview-box .image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-top-right-radius: 40px; border-bottom-right-radius: 40px; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } @media screen and (max-width: 767px) { .interview-box .image img { border-top-right-radius: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 0; } } .page-news .sub-sec { padding-top: 70px; } @media screen and (max-width: 767px) { .page-news .sub-sec { padding-top: 20px; } } .news__content li a { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 30px 20px; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } @media screen and (max-width: 767px) { .news__content li a { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 15px; } } @media (hover: hover) { .news__content li a:hover { opacity: 0.7; } } .news__content .date { font-weight: 700; width: 100px; } @media screen and (max-width: 767px) { .news__content .date { margin-bottom: 0.4em; } } .news__content .title { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .sub-sec .news__content li { position: relative; padding: 0; } .sub-sec .news__content li::before { position: absolute; content: ""; display: block; background: radial-gradient(ellipse at center, #363636 0%, #363636 25%, transparent 25%, transparent 100%) center 0 repeat-x; background-size: 8px 8px; top: 98%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; height: 8px; } .faq-sec { padding-top: 120px; } @media screen and (max-width: 767px) { .faq-sec { padding-top: 60px; } } .faq-sec .sub-sec { padding-top: 100px; } @media screen and (max-width: 767px) { .faq-sec .sub-sec { padding-top: 50px; } } .faq-sec .inner-s { padding: 0; } .faq-sec h2 { font-size: 3rem; font-weight: 700; color: #44AF35; padding: 30px; border-top: 2px solid #44AF35; border-bottom: 2px solid #44AF35; } @media screen and (max-width: 767px) { .faq-sec h2 { font-size: 1.8rem; padding: 15px; } } .faq-sec h3 { display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (max-width: 767px) { .faq-sec h3 { font-size: 1.6rem; } } .faq-sec h3 span:nth-of-type(1) { margin-right: 0.5em; } .faq-sec a { text-decoration: underline; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } @media (hover: hover) { .faq-sec a:hover { opacity: 0.7; } } .faq-sec strong { font-weight: 700; } .interview__main-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; margin-top: 90px; padding: 50px 0; border-top: solid 2px #44AF35; border-bottom: solid 2px #44AF35; } @media screen and (max-width: 767px) { .interview__main-title { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 10px; margin-top: 30px; padding: 10px 0; } } .interview__main-title span:nth-of-type(1) { font-size: 3.2rem; font-weight: 700; color: #44AF35; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 767px) { .interview__main-title span:nth-of-type(1) { font-size: 2rem; } } .interview__main-title span:nth-of-type(2) { position: relative; font-size: 2rem; font-weight: 700; color: #6A3906; margin-right: 3.34%; padding-left: 20px; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 767px) { .interview__main-title span:nth-of-type(2) { font-size: 1.4rem; padding-left: 15px; } } .interview__main-title span:nth-of-type(2)::before { position: absolute; content: ""; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background-color: #44AF35; } @media screen and (max-width: 767px) { .interview__main-title span:nth-of-type(2)::before { top: 55%; width: 7px; height: 7px; } } .interview-lead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 100px; padding: 25px 20px; background-color: #FFF6CF; border-radius: 40px; } @media screen and (max-width: 767px) { .interview-lead { display: block; margin-top: 30px; padding: 20px; border-radius: 20px; } } .interview-lead .title { font-size: 2rem; font-weight: 700; text-align: center; width: 270px; } @media screen and (max-width: 767px) { .interview-lead .title { font-size: 1.8rem; width: auto; text-align: left; } } .interview-lead .text { position: relative; font-size: 1.6rem; padding: 1em 0 1em 6%; } @media screen and (max-width: 767px) { .interview-lead .text { font-size: 1.4rem; margin-top: 1em; padding: 1em 0 0; } } .interview-lead .text::before { position: absolute; content: ""; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 8px; height: 100%; background: radial-gradient(ellipse at center, #363636 0%, #363636 25%, transparent 25%, transparent 100%) center 0 repeat-y; background-size: 8px 8px; } @media screen and (max-width: 767px) { .interview-lead .text::before { top: 0; width: 100%; height: 8px; background: radial-gradient(ellipse at center, #363636 0%, #363636 25%, transparent 25%, transparent 100%) center 0 repeat-x; background-size: 8px 8px; } } .interview-article h4 { font-size: 1.6rem; font-weight: 700; color: #363636; margin: 2em 0 1em; } .interview-article .text { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 16px 0; } @media screen and (max-width: 767px) { .interview-article .text { display: block; } } .interview-article .text *:nth-child(1) { font-size: 1.6rem; font-weight: 700; -ms-flex-negative: 0; flex-shrink: 0; } .interview-article img { margin: 40px 0; border-radius: 40px; } @media screen and (max-width: 767px) { .interview-article img { margin: 20px 0; border-radius: 20px; } } .page-interview .interview-other { margin: 120px auto 0; padding: 70px 0 80px; background-color: #FFF6CF; border-radius: 40px; } @media screen and (max-width: 767px) { .page-interview .interview-other { margin-top: 70px; padding: 20px 0 30px; } } .page-interview .interview-other__title { position: relative; font-size: 3.2rem; font-weight: 700; text-align: center; } @media screen and (max-width: 767px) { .page-interview .interview-other__title { font-size: 2rem; } } .page-interview .interview-other__title::before, .page-interview .interview-other__title::after { position: absolute; content: ""; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: calc((100% - 13em) / 2); height: 8px; background: radial-gradient(ellipse at center, #363636 0%, #363636 25%, transparent 25%, transparent 100%) center 0 repeat-x; background-size: 8px 8px; } @media screen and (max-width: 767px) { .page-interview .interview-other__title::before, .page-interview .interview-other__title::after { display: none; } } .page-interview .interview-other__title::before { left: 0; } .page-interview .interview-other__title::after { right: 0; } .page-interview .interview__content { margin-top: 50px; } @media screen and (max-width: 767px) { .page-interview .interview__content { margin-top: 20px; } }