@charset "UTF-8"; @import url("https://use.typekit.net/vgv7szk.css"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@700&display=swap"); /*** 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, input):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { font-size: 62.5%; } body { overflow-x: hidden; font-family: "Noto Sans JP", sans-serif; font-size: clamp(1.4rem, 1.2153846154rem + 0.2403846154vw, 1.6rem); font-size: clamp(1.4rem, 1.2153846154rem + 0.2403846154vw, 1.6rem); line-height: 2; font-weight: 500; letter-spacing: 1px; } @media screen and (max-width: 767px) { body { font-size: 1.6rem; } } @media screen and (max-width: 767px) { body { font-size: 1.6rem; } } .maru { font-family: "Zen Maru Gothic", serif; font-weight: 700; font-style: normal; } .en { font-family: "bree", sans-serif; font-weight: 200; font-style: italic; } a { transition: all 0.3s ease; } a img { transition: all 0.3s ease; } .ly_container { position: relative; } .inview { opacity: 0; } .inviewwrap { position: absolute; top: 0; width: 100%; height: 100%; } .inview.active { animation: fadeInup 1s ease-out; animation-fill-mode: forwards; } .inview.noanimation { opacity: 1; animation: none; } .inview.active.left { animation: fadeInLeft 1s ease-out; animation-fill-mode: forwards; } .inview.fade.active { animation: fadeIn 1s ease-out; animation-fill-mode: forwards; } .inview.clip { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); transition: -webkit-clip-path 0.4s ease-in; transition: clip-path 0.4s ease-in; transition: clip-path 0.4s ease-in, -webkit-clip-path 0.4s ease-in; transition-delay: 0.3s; opacity: 1; } .inview.active.clip { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); animation: none; } .inview.clip.delay01 { transition-delay: 0.6s; } .inview.clip.delay02 { transition-delay: 0.9s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeInup { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes fadeInLeft { 0% { transform: translateX(-50px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } .delay01 { animation-delay: 0.3s !important; } .delay02 { animation-delay: 0.6s !important; } .delay03 { animation-delay: 0.9s !important; } ._spShowImportant { display: none !important; } @media screen and (max-width: 767px) { .inviewwrap { position: static; } ._pcShowImportant { display: none !important; } ._spShowImportant { display: block !important; } } .slick-dots { position: absolute; bottom: -35px; right: 0; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: right; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background-color: #BFBFBF; } .slick-dots li.slick-active button:before { background-color: #133BA3; } .slash-title { display: inline-block; padding: 10px 50px 10px 20px; font-size: clamp(1.4rem, 1.2153846154rem + 0.2403846154vw, 1.6rem); font-size: clamp(1.4rem, 1.2153846154rem + 0.2403846154vw, 1.6rem); font-weight: bold; color: #fff; -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 33px) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 33px) 100%, 0 100%); background: linear-gradient(90deg, #133BA3 0%, #3865DB 100%); } @media screen and (max-width: 767px) { .slash-title { font-size: 1.6rem; } } @media screen and (max-width: 767px) { .slash-title { font-size: 1.6rem; } } .inner { max-width: calc(1140px + 6%); margin: auto; padding: 0 3%; } .inner.short { max-width: calc(960px + 6%); } a.zoom { display: block; position: relative; overflow: hidden; } a.zoom img { transform-origin: center; } a.zoom:hover img { transform: scale(1.05); opacity: 1; } .sp { display: none !important; } @media screen and (max-width: 767px) { .pc { display: none !important; } .sp { display: block !important; } } .cp_header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; background: #fff; border-bottom: 4px solid rgb(230, 0, 0); padding-bottom: 10px; } @media screen and (max-width: 767px) { .cp_header { padding-bottom: 0; position: fixed; background: #fff; z-index: 9998; width: 100%; height: 50px; } } .cp_header .inner { max-width: 1200px; margin: auto; display: flex; justify-content: space-between; align-items: center; } @media screen and (max-width: 767px) { .cp_header .inner { min-width: 0; padding-left: 0; height: 100%; } } .cp_header .inner .cp_logo { padding: 5px 0 0 0; display: flex; align-items: center; gap: 15px; } @media screen and (max-width: 767px) { .cp_header .inner .cp_logo.sp { padding: 0 0 0 0; display: flex !important; } .cp_header .inner .cp_logo.sp img { width: 80px; } } .cp_header .inner .cp_logo a { display: block; line-height: 0; } .cp_header .inner .cp_logo .backlink { padding-bottom: 2px; } @media screen and (max-width: 767px) { .cp_header .inner .cp_logo .backlink { font-size: 1rem; } } .cp_header .inner .cp_logo02 { padding: 5px 0 0 0; } @media screen and (max-width: 767px) { .cp_header .inner .cp_logo02 { width: 30%; padding: 0; margin: 0 0 0 auto; text-align: right; } .cp_header .inner .cp_logo02 img { width: 80px; } } .cp_header .inner .cp_logo02 a { display: block; line-height: 0; } footer { padding: 5rem 0 0 0; position: relative; z-index: 0; border-top: 4px solid rgb(230, 0, 0); background-color: #fff; } @media screen and (max-width: 767px) { footer { padding: 2rem 0; } } footer .f_up { max-width: 1300px; margin: auto; padding: 0 5rem; } @media screen and (max-width: 767px) { footer .f_up { display: block; padding: 0 2rem; } } footer .f_up ul { display: flex; justify-content: center; margin: 0 0 2rem 0; } @media screen and (max-width: 767px) { footer .f_up ul { justify-content: space-between; margin: 0 0 2rem 0; } } @media screen and (max-width: 767px) { footer .f_up ul li { width: 50%; text-align: center; } } footer .f_up ul li a { border-left: none; display: block; padding: 0 1rem; position: relative; font-size: 1.2rem; color: #0066aa; } footer .f_up ul li a:hover { color: #0066aa; text-decoration: underline; } footer .f_up ul li a:after { width: 8px; height: 7px; content: ""; position: absolute; display: block; right: 0; top: 50%; transform: translateY(-50%); background: url("/graduate/img/common/blank_icon.png") no-repeat left center; } @media screen and (max-width: 767px) { footer .f_up ul li a { padding: 0; font-size: clamp(0.9rem, 0.8076923077rem + 0.1201923077vw, 1rem); } } @media screen and (max-width: 767px) and (max-width: 767px) { footer .f_up ul li a { font-size: 1rem; } } footer .f_up ul li + li a { border-left: 1px solid #fff; } .copyright { text-align: center; font-size: clamp(0.9rem, 0.8076923077rem + 0.1201923077vw, 1rem); letter-spacing: 0.05em; margin-bottom: 5rem; } @media screen and (max-width: 767px) { .copyright { font-size: 1rem; } } @media screen and (max-width: 767px) { .copyright { margin: 0; } } #pagetop { width: 44px; height: 44px; background: rgb(230, 0, 0); position: fixed; bottom: 2rem; right: 2rem; z-index: 9997; cursor: pointer; transition: all 0.3s; opacity: 0; visibility: hidden; } @media screen and (max-width: 767px) { #pagetop { width: 34px; height: 34px; position: fixed; bottom: 2rem; border-radius: 0; } } #pagetop.active { opacity: 1; visibility: visible; } #pagetop:after { content: ""; display: block; width: 11px; height: 11px; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); } #pagetop:hover { background: rgb(210, 0, 0); } #pagetop .inner { width: 40px; height: 40px; position: absolute; content: ""; background: rgb(230, 0, 0); top: 0; left: 0; border-radius: 20px; z-index: 999; } @media screen and (max-width: 767px) { #pagetop .inner { display: none; } } main { padding-top: 76px; } @media screen and (max-width: 767px) { main { padding-top: 75px; } } main .inner { max-width: calc(1140px + 6%); margin: auto; padding: 0 3%; } #gnav { position: relative; } #gnav .humburger { position: fixed; width: 70px; height: 70px; background-color: #000; border-radius: 50%; top: 100px; right: 20px; z-index: 200; display: flex; justify-content: center; align-items: center; cursor: pointer; } @media screen and (max-width: 767px) { #gnav .humburger { width: 50px; height: 50px; right: 10px; top: 60px; } } #gnav .humburger:hover span::before { top: -12px; } #gnav .humburger:hover span::after { top: 12px; } #gnav .humburger::before { content: ""; display: block; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; position: absolute; top: -5px; left: -5px; z-index: -1; } #gnav .humburger span { display: block; width: 45%; height: 3px; background-color: #000; position: relative; z-index: 1; border-radius: 2px; left: -5px; top: -5px; } #gnav .humburger span::before, #gnav .humburger span::after { content: ""; display: block; width: 100%; height: 3px; background-color: #000; position: absolute; left: 0; z-index: -1; transition: all 0.2s ease; } #gnav .humburger span::before { top: -10px; } #gnav .humburger span::after { top: 10px; } #gnav .gnav-inner { display: none; position: fixed; background: #FFEEE5 url(/graduate/company/newgraduates/image/dot.png); width: 100%; height: calc(100vh - 74px); z-index: 199; bottom: 0; left: 0; } @media screen and (max-width: 767px) { #gnav .gnav-inner { height: calc(100% - 50px); overflow-y: auto; } } #gnav .gnav-inner .gnav-layout { display: flex; gap: 5%; padding: 5% 5vw; } @media screen and (max-width: 767px) { #gnav .gnav-inner .gnav-layout { display: block; } } #gnav .gnav-inner .gnav-layout .col { width: 50%; border-top: 1px solid #FF6F6F; } @media screen and (max-width: 767px) { #gnav .gnav-inner .gnav-layout .col { width: 100%; } } #gnav .gnav-inner .gnav-layout .col .row { border-bottom: 1px solid #FF6F6F; padding: 30px 0; } @media screen and (max-width: 767px) { #gnav .gnav-inner .gnav-layout .col .row { padding: 20px 0; } } #gnav .gnav-inner .gnav-layout .col .row .copy { color: #FF6F6F; font-size: clamp(1.2rem, 1.0153846154rem + 0.2403846154vw, 1.4rem); font-weight: 400; } @media screen and (max-width: 767px) { #gnav .gnav-inner .gnav-layout .col .row .copy { font-size: 1.4rem; } } #gnav .gnav-inner .gnav-layout .col .row .title { font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); font-weight: 400; margin-bottom: 10px; } @media screen and (max-width: 767px) { #gnav .gnav-inner .gnav-layout .col .row .title { font-size: 2rem; } } @media screen and (max-width: 767px) { #gnav .gnav-inner .gnav-layout .col .row .title { font-size: 1.6rem; line-height: 1.5; } } #gnav .gnav-inner .gnav-layout .col .row ul { display: flex; flex-wrap: wrap; } #gnav .gnav-inner .gnav-layout .col .row ul li { display: inline-block; margin-right: 20px; } #gnav .gnav-inner .gnav-layout .col .row ul li a { font-size: clamp(1.2rem, 1.0153846154rem + 0.2403846154vw, 1.4rem); } @media screen and (max-width: 767px) { #gnav .gnav-inner .gnav-layout .col .row ul li a { font-size: 1.4rem; } } #gnav .gnav-inner .gnav-layout .col .row ul li a::before { content: "●"; color: #FF6F6F; } #gnav.open .humburger span { background-color: transparent; } #gnav.open .humburger span::before { top: 0; transform: rotate(45deg); } #gnav.open .humburger span::after { top: 0; transform: rotate(-45deg); } #visual { position: relative; padding: 3%; } #visual .visual-layout { display: flex; flex-wrap: wrap; background-color: #FF6F6F; border-radius: 25px; color: #fff; padding: 40px 5%; } @media screen and (max-width: 767px) { #visual .visual-layout { display: block; } } #visual .visual-layout .left { flex: 1; } @media screen and (max-width: 767px) { #visual .visual-layout .left { width: 100%; } } #visual .visual-layout .left img { width: 85%; } #visual .visual-layout .right { width: 50%; } @media screen and (max-width: 767px) { #visual .visual-layout .right { width: 100%; } } #visual .visual-layout .right p { font-size: clamp(1.2rem, 1.2vw, 1.6rem); font-weight: 400; } @media screen and (max-width: 767px) { #visual .visual-layout .right p { font-size: 1.6rem; } } #top { background: #FFEEE5 url(/graduate/company/newgraduates/image/dot.png); } #top #visual { position: relative; padding: 3%; } #top #visual .visual-layout { padding: 40px 5% 15%; } @media screen and (max-width: 767px) { #top #visual .visual-layout .left img { width: 100%; max-width: none; } } #top #visual .visual-layout h1 { font-size: clamp(3.8rem, 4vw, 5.5rem); font-weight: bold; } #top #visual .visual-layout h1 span { font-size: clamp(2rem, 2vw, 3rem); font-weight: bold; padding-left: 20px; } #top #visual .visual-layout .visual-image { width: 100%; text-align: center; position: absolute; left: 0; bottom: -10%; } #top #visual .visual-layout .visual-image img { width: 50%; } @media screen and (max-width: 767px) { #top #visual .visual-layout .visual-image img { width: 60%; } } #top #contents-block h2 { text-align: center; font-size: clamp(3rem, 2.6307692308rem + 0.4807692308vw, 3.4rem); margin: 60px 0; font-weight: 200; } @media screen and (max-width: 767px) { #top #contents-block h2 { font-size: 3.4rem; } } #top #contents-block .contents-layout { display: flex; flex-wrap: wrap; justify-content: space-between; } #top #contents-block .contents-layout .box { position: relative; width: 32%; padding-top: 70px; margin-bottom: 60px; } @media screen and (max-width: 767px) { #top #contents-block .contents-layout .box { width: 100%; } } #top #contents-block .contents-layout .box.blank { padding: 0; margin: 0; } #top #contents-block .contents-layout .box .ill { line-height: 0; position: absolute; top: 0; z-index: 2; } #top #contents-block .contents-layout .box .ill#il1 { left: 30%; } #top #contents-block .contents-layout .box .ill#il2 { left: 40%; top: -1px; } #top #contents-block .contents-layout .box .ill#il3 { right: -4px; top: 2px; } #top #contents-block .contents-layout .box .ill#il4 { left: 20px; top: -7px; } #top #contents-block .contents-layout .box .ill#il5 { left: 50%; top: -2px; } #top #contents-block .contents-layout .box .ill#il6 { left: 10%; top: 2px; } #top #contents-block .contents-layout .box .image { display: block; position: relative; line-height: 0; overflow: hidden; border-radius: 10px; margin-bottom: 1rem; } #top #contents-block .contents-layout .box .image img { transition: all 0.2s ease; } #top #contents-block .contents-layout .box .tags { margin-bottom: 10px; } #top #contents-block .contents-layout .box .tags span { display: inline-block; margin-right: 15px; font-size: clamp(1.1rem, 0.9153846154rem + 0.2403846154vw, 1.3rem); font-weight: 400; } @media screen and (max-width: 767px) { #top #contents-block .contents-layout .box .tags span { font-size: 1.3rem; } } #top #contents-block .contents-layout .box .text { display: block; font-size: clamp(1.6rem, 1.6vw, 2.1rem); font-weight: 500; line-height: 1.6; margin-bottom: 20px; } @media screen and (max-width: 767px) { #top #contents-block .contents-layout .box .text { font-size: 1.8rem; height: auto !important; } } #top #contents-block .contents-layout .box .team { display: flex; align-items: center; } #top #contents-block .contents-layout .box .team .mark { width: 60px; line-height: 0; margin-right: 12px; } #top #contents-block .contents-layout .box .team span { display: inline-block; } #top #contents-block .contents-layout .box .image:hover img { transform: scale(1.05); } #top #contents-block .contents-layout .box .text:hover { color: #FF6F6F; } #team #visual .visual-layout { min-height: clamp(200px, 34vw, 440px); } #team #visual.visual1 .visual-layout { background-color: #19B2AC; } #team #visual.visual1 .visual-layout .left .visual-image { width: 100%; margin-left: -6vw; line-height: 0; overflow: hidden; border-radius: 25px; } @media screen and (max-width: 767px) { #team #visual.visual1 .visual-layout .left .visual-image { width: 100%; margin-left: auto; } } #team #visual.visual1 .visual-layout .left .visual-image img { width: 100%; } #team #visual.visual1 .visual-layout .subtitle { font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); font-weight: 400; } @media screen and (max-width: 767px) { #team #visual.visual1 .visual-layout .subtitle { font-size: 2rem; } } #team #visual.visual1 .visual-layout h1 { font-size: clamp(2.6rem, 2.6vw, 3.8rem); line-height: 1.4; margin-bottom: 20px; } @media screen and (max-width: 767px) { #team #visual.visual1 .visual-layout h1 { font-size: 6vw; } } #team #visual.visual2 .visual-layout { position: relative; background-color: #FBB159; } #team #visual.visual2 .visual-layout .left { width: 45%; } @media screen and (max-width: 767px) { #team #visual.visual2 .visual-layout .left { width: 100%; } } #team #visual.visual2 .visual-layout .left .illsut { position: absolute; bottom: -40px; max-width: 400px; width: 38%; } @media screen and (max-width: 767px) { #team #visual.visual2 .visual-layout .left .illsut { right: 5%; width: 60%; bottom: -30%; } } #team #visual.visual2 .visual-layout .left .illsut img { width: 100%; } #team #visual.visual2 .visual-layout .right { width: 55%; display: flex; align-items: center; height: 100%; } @media screen and (max-width: 767px) { #team #visual.visual2 .visual-layout .right { width: 100%; } } #team #visual.visual2 .visual-layout .subtitle { font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); font-weight: 400; } @media screen and (max-width: 767px) { #team #visual.visual2 .visual-layout .subtitle { font-size: 2rem; } } #team #visual.visual2 .visual-layout h1 { font-size: clamp(2.6rem, 2.6vw, 3.8rem); line-height: 1.4; margin-bottom: 20px; } #team .image { line-height: 0; overflow: hidden; border-radius: 10px; } #team a.btn { position: relative; background-color: #FBB159; display: inline-block; border-radius: 80px; text-align: center; line-height: 1; padding: 24px 80px 24px 60px; } #team a.btn::after { content: ""; position: absolute; display: block; width: 18px; height: 6px; background: url(/graduate/company/newgraduates/image/link-arrow.svg) no-repeat left center; right: 25px; top: 50%; transform: translateY(-50%); } #team a.btn:hover { background-color: #ff9b21; } #team .contents-layout { display: flex; justify-content: space-between; flex-wrap: wrap; } #team .contents-layout.rev { flex-direction: row-reverse; } #team .contents-layout .box { width: 49%; } @media screen and (max-width: 767px) { #team .contents-layout .box { width: 100%; } } #team .contents-layout .box .round-title { position: relative; background-color: #69B75F; border-radius: 80px; color: #fff; font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); font-weight: bold; line-height: 1.3; padding: 16px 40px; transform: translateY(20px); width: 90%; margin: auto; z-index: 1; text-align: center; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 767px) { #team .contents-layout .box .round-title { font-size: 2rem; } } #team .contents-layout .box .round-title span { position: relative; display: block; text-align: center; font-size: clamp(1.4rem, 1.2153846154rem + 0.2403846154vw, 1.6rem); margin-bottom: 10px; } @media screen and (max-width: 767px) { #team .contents-layout .box .round-title span { font-size: 1.6rem; } } #team .contents-layout .box .round-title span::before, #team .contents-layout .box .round-title span::after { content: ""; position: absolute; display: block; width: calc(50% - 4ex); height: 1px; background-color: #fff; top: 50%; } #team .contents-layout .box .round-title span::before { left: 0; } #team .contents-layout .box .round-title span::after { right: 0; } #team .contents-layout .box .round-title::after { content: ""; position: absolute; display: block; width: 26px; height: 16px; bottom: -15px; left: 50%; transform: translateX(-50%); background-color: #69B75F; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); } #team .contents-row { display: flex; margin-bottom: 100px; gap: 5%; justify-content: space-between; align-items: center; flex-wrap: nowrap; } #team .contents-row.rev { flex-direction: row-reverse; } @media screen and (max-width: 767px) { #team .contents-row { display: block; margin-bottom: 0px; } } #team .contents-row .image-wrap { position: relative; width: 55%; } @media screen and (max-width: 767px) { #team .contents-row .image-wrap { width: 100%; margin-bottom: 20px; } } #team .contents-row .image-wrap .image { border-radius: 25px; } #team .contents-row .image-wrap .illust { position: absolute; height: auto; } #team .contents-row .text { width: 45%; } @media screen and (max-width: 767px) { #team .contents-row .text { width: 100%; } } #team .contents-row .text h2 { text-align: left; margin-bottom: 20px; font-size: clamp(2.6rem, 2.6vw, 3.2rem); line-height: 1.4; } #team .contents-row .text p { margin-bottom: 40px; font-weight: 400; } #team .movie { position: relative; display: block; border-radius: 80px; overflow: hidden; border-radius: 20px 20px 0 0; line-height: 0; } #team .movie img { width: 100%; } #team .movie .play { width: 246px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; transition: all 0.2s ease; } @media screen and (max-width: 767px) { #team .movie .play { width: 40%; } } #team .movie:hover .play { transform: translate(-50%, -50%) scale(1.1); } #team.team01 { background: #D3EFEE url(/graduate/company/newgraduates/image/dot.png); } #team.team01 #contents-block { padding-bottom: 100px; } #team.team01 #contents-block h2 { text-align: center; margin-bottom: 30px; } #team.team01 #contents-block h2 .sub { font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); } @media screen and (max-width: 767px) { #team.team01 #contents-block h2 .sub { font-size: 2rem; } } #team.team01 #contents-block h2 .main { font-size: clamp(3.8rem, 3.4307692308rem + 0.4807692308vw, 4.2rem); } @media screen and (max-width: 767px) { #team.team01 #contents-block h2 .main { font-size: 4.2rem; } } @media screen and (max-width: 767px) { #team.team01 #contents-block h2 .main { font-size: 3rem; } } #team.team01 #contents-block .lead { text-align: center; font-weight: 400; margin-bottom: 40px; } #team.team01 .contents-layout .box { position: relative; margin-bottom: 40px; } #team.team01 .contents-layout .box .round-title { background-color: #19B2AC; } #team.team01 .contents-layout .box .round-title::after { background-color: #19B2AC; } #team.team01 .contents-layout .box.c2 .round-title { background-color: #0F85B1; } #team.team01 .contents-layout .box.c2 .round-title::after { background-color: #0F85B1; } #team.team01 .contents-layout .box .osusume { background-color: #fff; border-radius: 0 0 20px 20px; padding: 4%; } #team.team01 .contents-layout .box .osusume .osusume-head { position: relative; display: flex; margin-bottom: 30px; } #team.team01 .contents-layout .box .osusume .osusume-head .ill { position: relative; width: 100px; } #team.team01 .contents-layout .box .osusume .osusume-head .ill .illust { position: absolute; bottom: 0; left: 0; height: auto; } #team.team01 .contents-layout .box .osusume .osusume-head p { flex: 1; color: #19B2AC; padding-left: 20px; } #team.team01 .contents-layout .box .osusume .list { display: flex; flex-wrap: wrap; align-items: flex-start; } #team.team01 .contents-layout .box .osusume .list dt { width: 124px; background-color: #DBF2F2; border-radius: 20px; text-align: center; font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem); font-weight: 400; margin-bottom: 16px; padding: 2px 0 4px; } @media screen and (max-width: 767px) { #team.team01 .contents-layout .box .osusume .list dt { font-size: 1.5rem; } } #team.team01 .contents-layout .box .osusume .list dd { width: calc(100% - 124px); font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem); font-weight: 400; margin-bottom: 16px; padding-left: 15px; padding-top: 4px; line-height: 1.6; } @media screen and (max-width: 767px) { #team.team01 .contents-layout .box .osusume .list dd { font-size: 1.5rem; } } #team.team01 .contents-layout .box.c2 .text { background-color: #0F85B1; } #team.team01 .contents-layout .box.c2 .text::after { background-color: #0F85B1; } #team.team01 .contents-layout .box.c2 .osusume .osusume-head p { color: #0F85B1; } #team.team02 { background: #FFEFDB url(/graduate/company/newgraduates/image/dot.png); } #team.team02 #visual { margin-bottom: 100px; } #team.team02 #visual .visual-layout { padding: 70px 5%; } @media screen and (max-width: 767px) { #team.team02 #visual .visual-layout { padding: 20px 5% 70px; } } @media screen and (max-width: 767px) { #team.team02 #visual .visual-layout .left .illsut { max-width: 260px; bottom: -20%; width: 46%; } } #team.team02 #visual .visual-layout .right h1 { font-size: clamp(3.2rem, 3.2vw, 5rem); line-height: 1.4; margin-bottom: 20px; } @media screen and (max-width: 767px) { #team.team02 #row1 { margin-bottom: 8rem; } } #team.team02 #row1 .illust { top: -60px; right: -5px; } #team.team02 #row2 { padding-bottom: 8rem; margin-bottom: 0; } @media screen and (max-width: 767px) { #team.team02 #row2 { padding-bottom: 8rem; } } #team.team02 #row2 .illust { top: -60px; left: 20px; } #team.team02 #teach-block { background-color: #FBB159; border-radius: 60px 60px 0 0; padding: 150px 5%; } @media screen and (max-width: 767px) { #team.team02 #teach-block { padding: 50px 5%; border-radius: 20px 20px 0 0; } } #team.team02 #teach-block .teach-layout { display: flex; gap: 5%; color: #fff; flex-direction: row-reverse; } @media screen and (max-width: 767px) { #team.team02 #teach-block .teach-layout { display: block; } } #team.team02 #teach-block .teach-layout .image { width: 50%; border-radius: 20px; } @media screen and (max-width: 767px) { #team.team02 #teach-block .teach-layout .image { width: 100%; margin-bottom: 20px; } } #team.team02 #teach-block .teach-layout .text { width: 50%; } @media screen and (max-width: 767px) { #team.team02 #teach-block .teach-layout .text { width: 100%; } } #team.team02 #teach-block .teach-layout .text .subtitle { font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); font-weight: 400; } @media screen and (max-width: 767px) { #team.team02 #teach-block .teach-layout .text .subtitle { font-size: 2rem; } } #team.team02 #teach-block .teach-layout .text h2 { text-align: left; margin-bottom: 60px; font-size: clamp(2.6rem, 2.6vw, 3.8rem); line-height: 1.4; } @media screen and (max-width: 767px) { #team.team02 #teach-block .teach-layout .text h2 { margin-bottom: 20px; } } #team.team02 #teach-block .teach-layout .text p { font-weight: 400; } #team .page-nav { background-color: #fff; padding: 13px; } @media screen and (max-width: 767px) { #team .page-nav { display: none; } } #team .page-nav.fix { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; } @media screen and (max-width: 767px) { #team .page-nav.fix { position: relative; bottom: auto; left: auto; width: 100%; } } #team .page-nav .page-nav-layout { display: flex; } @media screen and (max-width: 767px) { #team .page-nav .page-nav-layout { display: block; } } #team .page-nav a { position: relative; width: 33.333%; padding: 0 70px 0 24px; } @media screen and (max-width: 767px) { #team .page-nav a { width: 100%; display: block; padding: 20px 50px 20px 0; } } #team .page-nav a.middle { border-left: 1px solid #FBB159; border-right: 1px solid #FBB159; } @media screen and (max-width: 767px) { #team .page-nav a.middle { border: none; border-top: 1px solid #FBB159; border-bottom: 1px solid #FBB159; } } #team .page-nav a:hover { color: #a55b00; } #team .page-nav a .main { display: block; font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem); font-weight: 500; margin-bottom: 10px; line-height: 1.6; } @media screen and (max-width: 767px) { #team .page-nav a .main { font-size: 1.5rem; } } #team .page-nav a .sub { display: block; font-size: clamp(1.1rem, 0.9153846154rem + 0.2403846154vw, 1.3rem); line-height: 1.6; } @media screen and (max-width: 767px) { #team .page-nav a .sub { font-size: 1.3rem; } } #team .page-nav a .arrow { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 767px) { #team .page-nav a .arrow { right: 0; } } #team.team02-1 { background: #FFEFDB url(/graduate/company/newgraduates/image/dot.png); } #team.team02-1 #visual .visual-layout { background-color: #FBB159; } #team.team02-1 #members { margin-bottom: 100px; } @media screen and (max-width: 767px) { #team.team02-1 #members { margin-bottom: 50px; } } #team.team02-1 #members h2 { text-align: center; position: relative; font-size: clamp(2rem, 1.6307692308rem + 0.4807692308vw, 2.4rem); font-weight: 500; } @media screen and (max-width: 767px) { #team.team02-1 #members h2 { font-size: 2.4rem; } } #team.team02-1 #members .line { text-align: center; margin-bottom: 60px; } #team.team02-1 #members .members-layout { display: flex; flex-wrap: wrap; justify-content: space-between; } #team.team02-1 #members .members-layout .member-box { position: relative; width: 48%; background-color: #fff; border-radius: 25px; padding: 0 5% 20px; margin-bottom: 20px; } @media screen and (max-width: 767px) { #team.team02-1 #members .members-layout .member-box { width: 100%; } } #team.team02-1 #members .members-layout .member-box .member-image { max-width: 180px; width: 40%; margin: -20px auto 0; } #team.team02-1 #members .members-layout .member-box .member-name { position: absolute; font-weight: 400; color: #FBB159; top: 20px; left: 10%; font-size: clamp(3.6rem, 3.2307692308rem + 0.4807692308vw, 4rem); } @media screen and (max-width: 767px) { #team.team02-1 #members .members-layout .member-box .member-name { font-size: 4rem; } } #team.team02-1 #members .members-layout .member-box .member-tag span { display: inline-block; margin-right: 5px; margin-bottom: 5px; font-size: clamp(1.1rem, 0.9153846154rem + 0.2403846154vw, 1.3rem); font-weight: 400; border: 1px solid #FBB159; border-radius: 50px; padding: 2px 10px; } @media screen and (max-width: 767px) { #team.team02-1 #members .members-layout .member-box .member-tag span { font-size: 1.3rem; } } #team.team02-1 #members .members-layout .member-box .member-text { font-size: clamp(1.2rem, 1.0153846154rem + 0.2403846154vw, 1.4rem); } @media screen and (max-width: 767px) { #team.team02-1 #members .members-layout .member-box .member-text { font-size: 1.4rem; } } #team.team02-1 .page-nav a { width: auto; } #team.team02-1 .page-nav .theme { font-size: clamp(1.1rem, 0.9153846154rem + 0.2403846154vw, 1.3rem); font-weight: 400; color: #FBB159; } @media screen and (max-width: 767px) { #team.team02-1 .page-nav .theme { font-size: 1.3rem; } } #team.team02-1 .page-nav .mr { border-right: 2px solid #FBB159; } @media screen and (max-width: 767px) { #team.team02-1 .page-nav .mr { border: none; border-bottom: 2px solid #FBB159; } } #team.team02-1 .content-block { padding-bottom: 80px; } @media screen and (max-width: 767px) { #team.team02-1 .content-block { padding-bottom: 40px; position: relative; } #team.team02-1 .content-block::after { content: ""; display: block; position: absolute; bottom: 20px; left: 50%; width: 13px; height: 13px; border-right: 5px solid #fff; border-bottom: 5px solid #fff; transform: translateX(-50%) rotate(45deg); } #team.team02-1 .content-block.open::after { transform: translateX(-50%) rotate(225deg); } } #team.team02-1 .content-block .content-head { text-align: center; padding: 80px 3%; color: #fff; } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-head { padding: 40px 3% 20px; cursor: pointer; } } #team.team02-1 .content-block .content-head .theme { font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); font-weight: 400; } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-head .theme { font-size: 2rem; } } #team.team02-1 .content-block .content-head h2 { font-size: clamp(2.6rem, 2.6vw, 3.8rem); line-height: 1.4; text-align: center; margin-bottom: 50px; } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-head h2 { margin-bottom: 20px; } } #team.team02-1 .content-block .content-head .lead { text-align: center; } #team.team02-1 .content-block .content-head .lead p { display: inline-block; position: relative; font-size: clamp(1.9rem, 1.6230769231rem + 0.3605769231vw, 2.2rem); background: url(/graduate/company/newgraduates/image/team02/line-dot2.png) repeat-x center bottom; padding-bottom: 15px; } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-head .lead p { font-size: 2.2rem; } } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-head .lead p { font-size: 1.6rem; } } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-wrap { display: none; } } #team.team02-1 .content-block .content-body { background-color: #fff; border-radius: 25px; padding: 40px 5% 40px; display: flex; gap: 5%; margin-bottom: 30px; } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-body { display: block; } } #team.team02-1 .content-block .content-body .left { width: 30%; } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-body .left { width: 100%; text-align: center; } } #team.team02-1 .content-block .content-body .left h3 { font-size: clamp(1.9rem, 1.6230769231rem + 0.3605769231vw, 2.2rem); font-weight: 500; color: #FB9159; margin-bottom: 30px; } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-body .left h3 { font-size: 2.2rem; } } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-body .left h3 { margin-bottom: 20px; line-height: 1.5; } } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-body .left .photo { margin-bottom: 30px; } } #team.team02-1 .content-block .content-body .left .photo img { display: inline-block; width: 65px; vertical-align: middle; } #team.team02-1 .content-block .content-body .left .photo .name { display: inline-block; font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem); padding-left: 15px; } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-body .left .photo .name { font-size: 1.8rem; } } #team.team02-1 .content-block .content-body p { flex: 1; } @media screen and (max-width: 767px) { #team.team02-1 .content-block .content-body p { font-size: 1.4rem; } } #team.team02-1 #sec3, #team.team02-1 #sec1 { background: #FBB159 url(/graduate/company/newgraduates/image/bg-square.png); } #team.team02-1 #sec2 { background: #FB9159 url(/graduate/company/newgraduates/image/bg-square.png); } #team.team02-1 #sec2 .voice-row { display: flex; margin-bottom: 24px; } @media screen and (max-width: 767px) { #team.team02-1 #sec2 .voice-row { display: block; } } #team.team02-1 #sec2 .voice-row:nth-child(odd) { flex-direction: row-reverse; } #team.team02-1 #sec2 .voice-row:nth-child(odd) p::before { left: auto; right: 1px; transform: translateX(100%); -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); clip-path: polygon(0 0, 100% 50%, 0 100%); } #team.team02-1 #sec2 .voice-row .photo { width: 132px; text-align: center; } @media screen and (max-width: 767px) { #team.team02-1 #sec2 .voice-row .photo { width: 100%; position: relative; top: 20px; z-index: 1; } } #team.team02-1 #sec2 .voice-row .photo img { width: 76px; } @media screen and (max-width: 767px) { #team.team02-1 #sec2 .voice-row .photo img { vertical-align: middle; } } #team.team02-1 #sec2 .voice-row .photo .name { color: #fff; text-align: center; font-weight: 400; line-height: 1; } @media screen and (max-width: 767px) { #team.team02-1 #sec2 .voice-row .photo .name { display: inline-block; padding-left: 15px; } } #team.team02-1 #sec2 .voice-row p { position: relative; flex: 1; background-color: #fff; border-radius: 20px; padding: 40px 64px; } @media screen and (max-width: 767px) { #team.team02-1 #sec2 .voice-row p { padding: 20px 8%; font-size: 1.4rem; } } #team.team02-1 #sec2 .voice-row p::before { content: ""; display: block; width: 9px; height: 15px; background-color: #fff; -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%); clip-path: polygon(0 50%, 100% 0, 100% 100%); position: absolute; top: 30px; left: 1px; transform: translateX(-100%); } @media screen and (max-width: 767px) { #team.team02-1 #sec2 .voice-row p::before { content: none; } } #team.team02-1 #column { padding: 100px 0; } @media screen and (max-width: 767px) { #team.team02-1 #column { padding: 50px 0; } #team.team02-1 #column .content-wrap { margin-top: 20px; } } #team.team02-1 #column::after { border-color: #000; } #team.team02-1 #column .column-head { display: flex; margin-bottom: 50px; } @media screen and (max-width: 767px) { #team.team02-1 #column .column-head { margin-bottom: 0px; display: block; } } #team.team02-1 #column .column-head .left { width: 50%; color: #FB9159; } @media screen and (max-width: 767px) { #team.team02-1 #column .column-head .left { width: 100%; } } #team.team02-1 #column .column-head .left .theme { font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); font-weight: 400; } @media screen and (max-width: 767px) { #team.team02-1 #column .column-head .left .theme { font-size: 2rem; } } #team.team02-1 #column .column-head .left h2 { font-size: clamp(2.6rem, 2.6vw, 3.8rem); line-height: 1.4; margin-bottom: 50px; } #team.team02-1 #column .column-head .right { width: 50%; display: flex; gap: 5%; } @media screen and (max-width: 767px) { #team.team02-1 #column .column-head .right { width: 100%; } } #team.team02-1 #column .column-head .right .image { max-width: 210px; width: 30%; } @media screen and (max-width: 767px) { #team.team02-1 #column .column-head .right .image { width: 40%; } } @media screen and (max-width: 767px) { #team.team02-1 #column .column-head .right .text { width: 55%; } } #team.team02-1 #column .column-head .right .name { color: #FB9159; font-size: clamp(2.6rem, 2.6vw, 3.8rem); font-weight: 400; line-height: 1.4; margin-bottom: 10px; } #team.team02-1 #column .column-head .right .tags span { display: inline-block; margin-right: 5px; margin-bottom: 5px; font-size: clamp(1.1rem, 0.9153846154rem + 0.2403846154vw, 1.3rem); font-weight: 400; border: 1px solid #FBB159; background-color: #fff; border-radius: 50px; padding: 2px 10px; } @media screen and (max-width: 767px) { #team.team02-1 #column .column-head .right .tags span { font-size: 1.3rem; } } #team.team02-1 #column .column-layout { display: flex; gap: 3%; } @media screen and (max-width: 767px) { #team.team02-1 #column .column-layout { display: block; } } #team.team02-1 #column .column-layout .column-box { width: 50%; background-color: #fff; border-radius: 25px; padding: 40px 5% 40px; } @media screen and (max-width: 767px) { #team.team02-1 #column .column-layout .column-box { width: 100%; margin-bottom: 20px; font-size: 1.4rem; } } #team.team02-1 #column .column-layout .column-box h3 { font-size: clamp(1.9rem, 1.6230769231rem + 0.3605769231vw, 2.2rem); font-weight: 500; color: #FB9159; text-align: center; font-size: 1.8rem; } @media screen and (max-width: 767px) { #team.team02-1 #column .column-layout .column-box h3 { font-size: 2.2rem; } } #team.team02-1 #column .column-layout .column-box .line { text-align: center; margin-bottom: 30px; } #team.team02-1 #column .column-layout .row { display: flex; padding: 2rem 0; border-top: 2px dotted #ccc; } #team.team02-1 #column .column-layout .row.bb { border-bottom: 2px dotted #ccc; } #team.team02-1 #column .column-layout .row .num { width: 40px; font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); font-weight: 400; color: #FB9159; } @media screen and (max-width: 767px) { #team.team02-1 #column .column-layout .row .num { font-size: 2rem; } } #team.team02-1 #column .column-layout .row p { flex: 1; } #team.team02-1 #column .column-layout .block p { margin-bottom: 2rem; } #team.team02-1 #last-message { text-align: center; padding: 50px 5% 80px; background-color: #fff; } @media screen and (max-width: 767px) { #team.team02-1 #last-message { padding: 50px 5% 20px; text-align: left; } } #team.team02-2 { background: #FFEFDB url(/graduate/company/newgraduates/image/dot.png); } #team.team02-2 #visual .visual-layout { background-color: #FBB159; } #team.team02-2 #members { margin-bottom: 100px; } #team.team02-2 #members h2 { text-align: center; position: relative; font-size: clamp(2rem, 1.6307692308rem + 0.4807692308vw, 2.4rem); font-weight: 500; } @media screen and (max-width: 767px) { #team.team02-2 #members h2 { font-size: 2.4rem; } } #team.team02-2 #members .line { text-align: center; margin-bottom: 60px; } #team.team02-2 #members .members-layout { display: flex; justify-content: space-between; gap: 3%; } @media screen and (max-width: 767px) { #team.team02-2 #members .members-layout { display: block; } } #team.team02-2 #members .members-layout .members-block { width: 50%; background-color: #fff; border-radius: 25px; padding: 0 5% 20px; } @media screen and (max-width: 767px) { #team.team02-2 #members .members-layout .members-block { width: 100%; margin-bottom: 15px; } } #team.team02-2 #members .members-layout .members-block h3 { text-align: center; transform: translateY(-50%); } #team.team02-2 #members .members-layout .members-block h3 span { display: inline-block; background-color: #FBB159; line-height: 1; padding: 8px 10px; border-radius: 40px; } #team.team02-2 #members .members-layout .members-block .subtitlte { text-align: center; margin-bottom: 10px; } #team.team02-2 #members .members-layout .members-block .members-photo { display: flex; gap: 20px; justify-content: center; } #team.team02-2 #members .members-layout .members-block .members-photo .photo { width: 76px; text-align: center; line-height: 1.5; } #team.team02-2 #members .members-layout .members-block .members-photo .photo .name { display: block; padding-left: 8px; } #team.team02-2 .content-block { padding-bottom: 80px; } @media screen and (max-width: 767px) { #team.team02-2 .content-block { padding-bottom: 50px; position: relative; } #team.team02-2 .content-block::after { content: ""; display: block; position: absolute; bottom: 20px; left: 50%; width: 13px; height: 13px; border-right: 5px solid #fff; border-bottom: 5px solid #fff; transform: translateX(-50%) rotate(45deg); } #team.team02-2 .content-block.open::after { transform: translateX(-50%) rotate(225deg); } } #team.team02-2 .content-block .content-head { padding: 80px 3%; color: #fff; display: flex; align-items: center; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-head { display: block; padding: 40px 3% 20px; cursor: pointer; } } #team.team02-2 .content-block .content-head h2 { width: 50%; font-size: clamp(2.6rem, 2.6vw, 3.8rem); line-height: 1.4; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-head h2 { width: 100%; font-size: 2rem; } } #team.team02-2 .content-block .content-head .theme { width: 50%; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-head .theme { width: 100%; } } #team.team02-2 .content-block .content-head .theme .number { font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); font-weight: 400; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-head .theme .number { font-size: 2rem; } } #team.team02-2 .content-block .content-head .theme p { font-size: clamp(2.2rem, 1.8307692308rem + 0.4807692308vw, 2.6rem); line-height: 1.7; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-head .theme p { font-size: 2.6rem; } } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-wrap { display: none; } } #team.team02-2 .content-block .content-body { background-color: #fff; border-radius: 25px; padding: 30px 5% 20px; margin-bottom: 30px; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body { display: block; } } #team.team02-2 .content-block .content-body.mb { margin-bottom: 100px; } #team.team02-2 .content-block .content-body h3 { text-align: center; font-size: clamp(2rem, 1.6307692308rem + 0.4807692308vw, 2.4rem); } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body h3 { font-size: 2.4rem; } } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body h3 { font-size: 2rem; } } #team.team02-2 .content-block .content-body .line { text-align: center; margin-bottom: 60px; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .line { margin-bottom: 50px; } } #team.team02-2 .content-block .content-body .question, #team.team02-2 .content-block .content-body .answer { display: flex; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .question, #team.team02-2 .content-block .content-body .answer { position: relative; display: block; } } #team.team02-2 .content-block .content-body .question .face, #team.team02-2 .content-block .content-body .answer .face { width: 132px; text-align: center; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .question .face, #team.team02-2 .content-block .content-body .answer .face { width: 100%; text-align: left; position: absolute; top: 0; left: 0; z-index: 1; transform: translateY(-80%); } } #team.team02-2 .content-block .content-body .question .face img, #team.team02-2 .content-block .content-body .answer .face img { width: 76px; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .question .face img, #team.team02-2 .content-block .content-body .answer .face img { width: 50px; vertical-align: middle; } } #team.team02-2 .content-block .content-body .question .face .name, #team.team02-2 .content-block .content-body .answer .face .name { display: block; padding-left: 8px; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .question .face .name, #team.team02-2 .content-block .content-body .answer .face .name { display: inline-block; } } #team.team02-2 .content-block .content-body .question .text, #team.team02-2 .content-block .content-body .answer .text { position: relative; flex: 1; } #team.team02-2 .content-block .content-body .question .text::before, #team.team02-2 .content-block .content-body .answer .text::before { content: ""; display: block; width: 15px; height: 15px; background-color: #FBB159; -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%); clip-path: polygon(0 50%, 100% 0, 100% 100%); position: absolute; top: 30px; left: 1px; transform: translateX(-100%); } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .question .text::before, #team.team02-2 .content-block .content-body .answer .text::before { content: none; } } #team.team02-2 .content-block .content-body .question .text .en, #team.team02-2 .content-block .content-body .answer .text .en { position: absolute; right: 0; top: 0; transform: translateY(-50%); font-size: clamp(3.2rem, 2.8307692308rem + 0.4807692308vw, 3.6rem); font-weight: 400; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .question .text .en, #team.team02-2 .content-block .content-body .answer .text .en { font-size: 3.6rem; } } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .question .text .en, #team.team02-2 .content-block .content-body .answer .text .en { font-size: 2.5rem; } } #team.team02-2 .content-block .content-body .question .text p, #team.team02-2 .content-block .content-body .answer .text p { background-color: #FBB159; padding: 40px 64px; border-radius: 20px; font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); line-height: 1.6; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .question .text p, #team.team02-2 .content-block .content-body .answer .text p { font-size: 2rem; } } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .question .text p, #team.team02-2 .content-block .content-body .answer .text p { padding: 20px 8%; font-size: 1.4rem; } } #team.team02-2 .content-block .content-body .question .text .note, #team.team02-2 .content-block .content-body .answer .text .note { display: block; margin-top: 1rem; font-size: clamp(1.1rem, 0.9153846154rem + 0.2403846154vw, 1.3rem); } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .question .text .note, #team.team02-2 .content-block .content-body .answer .text .note { font-size: 1.3rem; } } #team.team02-2 .content-block .content-body .question { margin-bottom: 50px; } #team.team02-2 .content-block .content-body .answer { display: flex; flex-direction: row-reverse; margin-bottom: 50px; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .answer { display: block; } } #team.team02-2 .content-block .content-body .answer .face { width: 132px; text-align: center; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .answer .face { width: 100%; text-align: right; position: absolute; top: 0; right: 0; z-index: 1; transform: translateY(-80%); } } #team.team02-2 .content-block .content-body .answer .face img { width: 76px; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .answer .face img { width: 50px; vertical-align: middle; } } #team.team02-2 .content-block .content-body .answer .text { position: relative; flex: 1; } #team.team02-2 .content-block .content-body .answer .text::before { background-color: #FFF7EE; -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); clip-path: polygon(0 0, 100% 50%, 0 100%); left: auto; right: 1px; transform: translateX(100%); } #team.team02-2 .content-block .content-body .answer .text .en { color: #FBB159; left: 30px; } #team.team02-2 .content-block .content-body .answer .text p { background-color: #FFF7EE; font-size: clamp(1.4rem, 1.2153846154rem + 0.2403846154vw, 1.6rem); font-weight: 400; line-height: 1.8; } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .answer .text p { font-size: 1.6rem; } } @media screen and (max-width: 767px) { #team.team02-2 .content-block .content-body .answer .text p { padding: 20px 8%; font-size: 1.4rem; } } #team.team02-2 .content-block .content-body .images { display: flex; gap: 20px; margin-top: -80px; transform: translateY(80px); } #team.team02-2 .content-block#sec1 { background: #FBB159 url(/graduate/company/newgraduates/image/bg-square.png); } #team.team02-2 .content-block#sec2 { background: #FB9159 url(/graduate/company/newgraduates/image/bg-square.png); } #team.team02-2 .content-block#sec2 .question .text p { background-color: #FB9159; } #team.team02-2 .content-block#sec2 .question .text::before { background-color: #FB9159; } #team.team02-2 .content-block#sec2 .answer .text p { background-color: #FFF7EE; } #team.team02-2 .content-block#sec3 { background: #FBB159 url(/graduate/company/newgraduates/image/bg-square.png); } #team.team02-2 #last-message { text-align: center; padding: 50px 3%; } #team.team02-2 #last-message p { position: relative; display: inline-block; background-color: #fff; border-radius: 25px; padding: 40px; text-align: center; font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); } @media screen and (max-width: 767px) { #team.team02-2 #last-message p { font-size: 2rem; } } @media screen and (max-width: 767px) { #team.team02-2 #last-message p { text-align: left; font-size: 5vw; } } #team.team02-2 #last-message p::after { position: absolute; content: ""; display: block; width: 15px; height: 15px; background-color: #fff; bottom: 1px; left: 50%; transform: translate(-50%, 100%); -webkit-clip-path: polygon(0 0%, 100% 0, 50% 100%); clip-path: polygon(0 0%, 100% 0, 50% 100%); } #team.team02-2 #last-message .members-photo { display: flex; gap: 20px; justify-content: center; margin-top: 20px; } #team.team02-2 #last-message .members-photo .photo { width: 76px; } #team.team03 { background: #E6F0FF url(/graduate/company/newgraduates/image/dot.png); } #team.team03 #visual { margin-bottom: 100px; } #team.team03 #visual .visual-layout { background-color: #5891ED; } #team.team03 #contents-block { padding-bottom: 50px; } #team.team03 #contents-block .contents-row .text a { background-color: #5891ED; } #team.team03 #contents-block #row1 .illust { top: -60px; right: -5px; } #team.team03 #contents-block #row2 .illust { top: -60px; left: 20px; } #team.team04 { background: #E2F5DF url(/graduate/company/newgraduates/image/dot.png); } #team.team04 #visual { position: relative; margin-bottom: 100px; } @media screen and (max-width: 767px) { #team.team04 #visual { margin-bottom: 0; } } #team.team04 #visual .illsut { position: absolute; left: 5%; bottom: 0; width: 38%; max-width: 400px; } @media screen and (max-width: 767px) { #team.team04 #visual .illsut { position: relative; margin-left: auto; margin-right: 5%; margin-top: -8%; width: 50%; max-width: 300px; left: 0; } } #team.team04 #visual .visual-layout { background-color: #69B75F; padding: 70px 5%; } @media screen and (max-width: 767px) { #team.team04 #visual .visual-layout { padding: 20px 5% 10%; } } @media screen and (max-width: 767px) { #team.team04 #visual .visual-layout .left .subtitle { text-align: right; } } #team.team04 #visual .visual-layout .right { padding-top: 5%; } #team.team04 #visual .visual-layout .right h1 { position: relative; font-size: clamp(3.2rem, 3.2vw, 5rem); line-height: 1.4; margin-bottom: 20px; } #team.team04 #visual .visual-layout .right h1 .fuki { position: absolute; top: 0; left: 0; transform: translate(-50%, -70%); } @media screen and (max-width: 767px) { #team.team04 #visual .visual-layout .right h1 .fuki { width: 20%; } } #team.team04 .contents-layout .box { position: relative; margin-bottom: 40px; } #team.team04 .contents-layout .osusume { background-color: #fff; border-radius: 0 0 20px 20px; padding: 5% 10%; font-weight: 400; } #team.team04 .contents-layout .round-title { display: block; } @media screen and (max-width: 767px) { #team.team04 .contents-layout .round-title { width: 100%; padding: 16px 10px; font-size: 4.5vw; } #team.team04 .contents-layout .round-title span { width: 50%; margin: 0 auto 5px; } } #team.team05 { background: #F0E7F7 url(/graduate/company/newgraduates/image/dot.png); } #team.team05 #visual .visual-layout { background-color: #9E7ABE; } #team.team05 #contents-block .contents-layout .box { margin-bottom: 40px; } #team.team05 #contents-block .contents-layout .box .round-title { background-color: #9E7ABE; } #team.team05 #contents-block .contents-layout .box .round-title::after { background-color: #9E7ABE; } @media screen and (max-width: 767px) { #team.team05 #contents-block .contents-layout .box .round-title { padding: 10px; font-size: 4.5vw; height: auto !important; } } #team.team05 #contents-block .contents-layout .box .osusume { background-color: #fff; border-radius: 0 0 20px 20px; padding: 4% 10%; } @media screen and (max-width: 767px) { #team.team05 #contents-block .contents-layout .box .osusume p { height: auto !important; } } #team.team05 #contents-block .contents-layout .box .link { text-align: center; padding-top: 20px; } #team.team05 #contents-block .contents-layout .box .btn { background-color: #9E7ABE; color: #fff; margin: auto; } #team.team05 #contents-block .contents-layout .box .btn::after { background: url(/graduate/company/newgraduates/image/link-arrow-w.svg) no-repeat left center; } #team.team05 #contents-block .contents-layout .box.c2 .round-title { background-color: #575EAF; } #team.team05 #contents-block .contents-layout .box.c2 .round-title::after { background-color: #575EAF; } #team.team05 #contents-block .contents-layout .box.c2 .btn { background-color: #575EAF; } #team.team06 { background: #DEEFF5 url(/graduate/company/newgraduates/image/dot.png); } #team.team06 #visual .visual-layout { background-color: #0F85B1; } #team.team06 #contents-block { padding-bottom: 50px; } #team.team06 #contents-block h2 { text-align: center; margin-bottom: 30px; font-size: clamp(2.6rem, 2.6vw, 3.8rem); } #team.team06 #contents-block .lead { text-align: center; font-weight: 400; margin-bottom: 40px; } #team.team06 #contents-block .contents-layout { justify-content: center; gap: 5%; } @media screen and (max-width: 767px) { #team.team06 #contents-block .contents-layout { gap: 4%; } } #team.team06 #contents-block .contents-layout .box { width: 30%; margin-bottom: 40px; padding-top: 50px; } @media screen and (max-width: 767px) { #team.team06 #contents-block .contents-layout .box { width: 48%; } } #team.team06 #contents-block .contents-layout .box .movie { border-radius: 20px; } #team.team06 #contents-block .contents-layout .box .round-title { background-color: #0F85B1; position: absolute; left: 50%; transform: translateX(-50%); top: 0; } #team.team06 #contents-block .contents-layout .box .round-title::after { background-color: #0F85B1; } @media screen and (max-width: 767px) { #team.team06 #contents-block .contents-layout .box .round-title { padding: 10px; font-size: 3.2vw; } } #team.team06 #contents-block .contents-layout .box:nth-child(2n) .round-title { background-color: #575EAF; } #team.team06 #contents-block .contents-layout .box:nth-child(2n) .round-title::after { background-color: #575EAF; }