@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&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%; vertical-align: top; } /* 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.168rem + 0.3vw, 1.6rem); line-height: 1.75; font-weight: 400; color: #333; scrollbar-gutter: stable; } #bg { position: relative; z-index: 0; } img[src$=".svg"], img { width: 100%; } .mincho { font-family: "Noto Serif JP", serif; } .en { font-family: "Lato", serif; } .en-b { font-family: "bree", sans-serif; } a { transition: all 0.3s ease; } a img { transition: all 0.3s ease; } sub { font-size: 60%; vertical-align: sub; } .ly_container { position: relative; } .inview { opacity: 0; } .inviewwrap { position: absolute; top: 0; width: 100%; height: 100%; } .inview.active { animation: fadeInup 1s cubic-bezier(0.19, 1, 0.22, 1); 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 { clip-path: inset(0 100% 0 0); transition: clip-path 0.4s ease-in; transition-delay: 0.3s; opacity: 1; } .inview.active.clip { 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 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; } } a.zoom { display: block; position: relative; overflow: hidden; } a.zoom img { transform-origin: center; } a.zoom:hover img { transform: scale(1.1); opacity: 1; } .sp { display: none !important; } @media screen and (max-width: 767px) { .pc { display: none !important; } .sp { display: block !important; } } #bg { overflow: hidden; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; } .blank { display: inline-block; width: 13px; height: 10px; background: url(/assets/image/common/blank.svg) no-repeat center center/cover; margin-left: 5px; } .blank.white { background: url(/assets/image/common/blank-w.svg) no-repeat center center/cover; } main { position: relative; } @media screen and (max-width: 767px) { main { padding-top: 80px; } } main.inpage { padding-top: 86px; } main .inner-out { padding: 0 5rem; } @media screen and (max-width: 767px) { main .inner-out { padding: 0 1rem; } } main .inner-in { max-width: calc(1030px + 6rem); margin: 0 auto; padding: 0 3rem; } @media screen and (max-width: 767px) { main .inner-in { padding: 0 1rem; } } #bg { width: 100%; height: 100%; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 0; --gradient-color-1: #74ADFF; --gradient-color-2: #89C5FF; --gradient-color-3: #DDFAFF; --gradient-color-4: #D9C6FF; --gradient-color-5: #F1BFFF; } .bgover { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; z-index: 1; position: fixed; width: 100%; height: 100%; background: rgba(70, 118, 214, 0.35); } span.c-icon { display: inline-block; position: relative; width: 0.4em; height: 0.6em; line-height: 1; margin: 0 0.5em 0.2em; vertical-align: middle; } /* HEADER ================================================== */ header { position: fixed; top: 0; left: 0; width: 100%; background: #ffffff; z-index: 3000; } .header-layout-main { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem 0.5rem 1rem; } .header-logo { width: 240px; } .header-logo.recruit { width: 300px; } .header-logo.corporate .txt { font-size: clamp(1.4rem, 0.936rem + 0.6vw, 1.8rem); } @media screen and (max-width: 767px) { .header-logo.corporate .txt { font-size: 11px; } } .header-logo h1 { display: flex; align-items: center; line-height: 1; } .header-logo .images { width: 88px; margin: 0 1rem 0 0; } @media screen and (max-width: 767px) { .header-logo .images { width: 70px; margin-bottom: 0.5rem; } } .header-logo .txt { line-height: 1; margin: 0; padding: 0; font-size: clamp(1.2rem, 0.924rem + 0.4vw, 1.5rem); white-space: nowrap; } .header-nav { flex: 1; display: flex; justify-content: flex-end; margin-right: clamp(5px, 1vw, 20px); padding-left: 25px; } .header-nav .tab { display: none; } @media screen and (max-width: 1400px) { .header-nav .tab { display: block; } } #pc_gnav { margin: 0 0 0 0; } #pc_gnav ul { display: flex; gap: 2rem; } #pc_gnav ul li { margin: 0 0 0 0; } #pc_gnav ul li a { display: block; font-feature-settings: "palt"; font-size: clamp(1.2rem, 0.736rem + 0.6vw, 1.6rem); letter-spacing: 0.05em; font-weight: 500; color: #333; font-size: clamp(1.1rem, 0.868rem + 0.3vw, 1.3rem); position: relative; padding-block: 0; height: 76px; display: flex; align-items: center; justify-content: center; line-height: 1.5; } #pc_gnav ul li a:after { content: ""; width: 100%; height: 2px; background: #005BAC; display: block; position: absolute; bottom: 0; opacity: 0; z-index: 3; } #pc_gnav ul li a:hover, #pc_gnav ul li a.active { color: #005BAC; } #pc_gnav ul li a:hover:after, #pc_gnav ul li a.active:after { opacity: 1; } #entry_mypage { display: flex; margin: 0 0 0 auto; } @media screen and (max-width: 767px) { #entry_mypage { width: 100%; } } @media screen and (max-width: 767px) { #entry_mypage.sp { display: flex !important; justify-content: space-between; margin: 0 0 3rem 0; } } #entry_mypage .btn { margin: 0 3px 0; width: 100%; } @media screen and (max-width: 767px) { #entry_mypage .btn { width: 50%; } } #entry_mypage .btn a { color: #ffffff; border-radius: 3px; padding: 1rem 0; font-size: 12px; font-feature-settings: "palt"; letter-spacing: 0; max-width: 150px; min-width: 110px; width: 100%; text-align: center; } @media screen and (max-width: 767px) { #entry_mypage .btn a { width: 100%; } } #entry_mypage .btn.btn04 a { background: #1f93ff; display: block; } #entry_mypage .btn.btn04 a:hover { background: #0f7be0; } #entry_mypage .btn.btn01 a { background: #0079EA; display: block; } #entry_mypage .btn.btn01 a:hover { background: #0060ba; } #entry_mypage .btn.btn02 a { background: #005BAC; display: block; } #entry_mypage .btn.btn02 a:hover { background: #004989; } #entry_mypage .btn.btn03 a { background: #004383; display: block; } #entry_mypage .btn.btn03 a:hover { background: #003465; } #entry_mypage .btn.btn04 a { background: #1E71BB; display: block; } #entry_mypage .btn.btn04 a:hover { background: #155a8e; } .en_jp_btn { margin: 0 0 0 1rem; width: 20px; } @media screen and (max-width: 767px) { .en_jp_btn { margin: 0 0.5rem 0 auto; } } .en_jp_btn ul li { margin: 0; line-height: 1.2; } .en_jp_btn span { font-size: 14px; transition: all 0.3s ease; color: #aaa; } .en_jp_btn a { font-size: 14px; transition: all 0.3s ease; } .en_jp_btn a:hover { color: #999; } .drawer_menu, #tagsearch { position: absolute; top: 80px; left: 0; width: 100%; width: 100%; display: block; padding: 3rem 5rem; border-top: 1px solid #eee; z-index: 0; } .drawer_menu .bg { display: block; position: absolute; width: 100%; height: 0; top: 0; left: 0; content: ""; z-index: 0; background: #ffffff; max-height: 0; transition: all 0.5s ease; } .drawer_menu .inner { max-width: 100%; position: relative; z-index: 10; opacity: 0; transition: all 0.3s ease; transition-delay: 0s; display: block; height: 100%; display: flex; justify-content: space-between; } .drawer_menu .inner .title { width: 20vw; max-width: 220px; border-right: 1px solid #E2E2E2; } .drawer_menu .inner .title p.en { font-size: 1.8rem; margin: 0 1em 0 0; } .drawer_menu .inner .title p.jp { font-weight: 500; margin: 0 1rem 0 0; color: #005BAC; } .drawer_menu .inner .title { margin: 0 0 1rem 0; } .drawer_menu { visibility: hidden; } .drawer_menu.is-open { visibility: visible; } .drawer_menu.is-open .inner { opacity: 1; transition-delay: 0.3s; } .drawer_menu.is-open .bg { height: 100%; max-height: 100%; } .drawer_flex { display: grid; gap: 3%; padding: 0 0 0 1em; flex: 1; grid-template-columns: repeat(5, 1fr); } .drawer_flex.four { grid-template-columns: repeat(4, 1fr); } .drawer_flex a { margin: 0 0 1em 0; font-feature-settings: "palt"; font-size: clamp(1.3rem, 1.256rem + 0.1vw, 1.4rem); } .drawer_flex a:hover { color: #005BAC; } .drawer_flex a .image { margin: 0 0 0.5rem 0; } .drawer_flex .image { position: relative; } .drawer_flex .image .icons { position: absolute; top: 0; right: 0; z-index: 30; line-height: 2; width: 80px; } .drawer_flex .image .icons p { display: block; background: #005BAC; color: #ffffff; text-align: center; font-size: 11px; } .drawer_flex .image .icons2 { position: absolute; top: 1.5em; right: 0; z-index: 30; line-height: 2; width: 80px; } .drawer_flex .image .icons2 p { display: block; background: #321a7b; color: #ffffff; text-align: center; font-size: 11px; } .drawer_flex.mbs .box { margin: 0 0 2rem 0; } .slide_menu_mains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4%; padding: 3vw 5vw; } @media (max-width: 960px) { .slide_menu_mains { grid-template-columns: 1fr; } } @media screen and (max-width: 767px) { .slide_menu_mains { padding-bottom: 100px; } .slide_menu_mains #entry_mypage { display: flex !important; padding: 0 0 2rem 0; flex-wrap: wrap; margin-top: 2rem; } } .slide_menu_mains .titles { display: flex; align-items: center; margin: 0 0 0.8rem 0; } @media screen and (max-width: 767px) { .slide_menu_mains .titles { position: relative; align-items: center; } .slide_menu_mains .titles span.c-icon { margin: 0 0 0 1rem; position: absolute; top: 1.1em; right: 0; } } .slide_menu_mains .titles p.en { color: #005BAC; font-size: clamp(14px, 1.3vw, 24px); margin: 0 1rem 0 0; font-weight: 500; } @media screen and (max-width: 767px) { .slide_menu_mains .titles p.en { font-size: clamp(16px, 1.8vw, 24px); } } .slide_menu_mains .titles p.jp { font-size: clamp(14px, 1vw, 20px); } @media screen and (max-width: 767px) { .slide_menu_mains .titles p.jp { font-size: clamp(13px, 0.9vw, 18px); } } .slide_menu_mains .smflex { display: flex; justify-content: space-between; flex-wrap: wrap; } .slide_menu_mains .smflex.three .box { width: 32%; margin: 0 0 2rem 0; } @media screen and (max-width: 767px) { .slide_menu_mains .smflex.three .box { width: 48%; margin: 0 0 1rem 0; } } .slide_menu_mains .smflex a { width: 48%; font-size: clamp(13px, 0.8vw, 16px); margin-bottom: 1rem; } @media screen and (max-width: 767px) { .slide_menu_mains .smflex a { font-size: clamp(12px, 0.8vw, 16px); } } .slide_menu_mains .smflex a .image { margin: 0 0 0.5rem 0; } .slide_menu_mains .smflex a .txt { font-feature-settings: "palt"; } .slide_menu_mains .smflex a:hover { color: #005BAC; } .slide_menu_mains .smlist { display: flex; justify-content: space-between; } @media screen and (max-width: 767px) { .slide_menu_mains .smlist { display: block; } } .slide_menu_mains .smlist ul { width: 48%; } @media screen and (max-width: 767px) { .slide_menu_mains .smlist ul { width: 100%; } } .slide_menu_mains .smlist ul li a { display: inline-block; padding: 0.5em 0; font-size: clamp(13px, 0.8vw, 16px); } .slide_menu_mains .smlist ul li a span.c-icon { transition: all 0.3s ease; } @media screen and (max-width: 767px) { .slide_menu_mains .smlist ul li a { display: block; width: 100%; position: relative; padding: 1em 0; } .slide_menu_mains .smlist ul li a span.c-icon { position: absolute; top: 1.1em; right: 0; } } .slide_menu_mains .smlist ul li a:hover { color: #005BAC; } .slide_menu_mains .smlist ul li a:hover span.c-icon { transform: translateX(2px); } .slide_menu_mains #entry_mypage { width: 100%; justify-content: space-between; } .slide_menu_mains #entry_mypage .btn { width: 33%; } @media screen and (max-width: 767px) { .slide_menu_mains #entry_mypage .btn { width: 48%; margin-bottom: 6px; } } .slide_menu_mains #entry_mypage .btn a { display: block; width: 100%; } @media screen and (max-width: 767px) { .slide_menu_mains #entry_mypage .btn a { max-width: none; } } .slide_menu_mains .block { margin: 0 0 2rem 0; } @media screen and (max-width: 767px) { .slide_menu_mains .block { margin-bottom: 0; } } @media screen and (max-width: 767px) { .slide_menu_mains .right .block { margin-bottom: 3rem; } } /*============ #spmenu =============*/ #spmenu { transition: all 0.5s; cursor: pointer; z-index: 101; width: 70px; height: 70px; position: relative; display: flex; align-items: flex-start; } @media screen and (max-width: 767px) { #spmenu { display: block; right: 0; top: 0; width: 40px; height: 40px; } } @media screen and (max-width: 767px) { #spmenu.fixed .circle { background: none; } } #spmenu .circle { position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; background: #fff; } @media screen and (max-width: 767px) { #spmenu .circle { top: calc(50% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; } } @media screen and (max-width: 767px) { #spmenu { width: 60px; height: 60px; } } #spmenu .ins { position: relative; width: 30px; height: 30px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } #spmenu span { display: block; position: absolute; left: 5px; width: 20px; height: 1px; background-color: #333; border-radius: 4px; transition: all 0.5s; } #spmenu span:nth-child(1) { top: 6px; } #spmenu span:nth-child(2) { top: 13px; } #spmenu span:nth-child(3) { top: 20px; } #spmenu.active span:nth-child(1) { transform: translateY(7px) rotate(-315deg); } #spmenu.active span:nth-child(2) { opacity: 0; } #spmenu.active span:nth-child(3) { transform: translateY(-7px) rotate(315deg); } /* FOOTER ================================================== */ #bottom-menu { background-color: #d1d1d1; padding: 1rem 5rem 1.5rem; } @media screen and (max-width: 767px) { #bottom-menu { padding: 1rem 5%; } } #bottom-menu ul { display: flex; } @media screen and (max-width: 767px) { #bottom-menu ul { flex-wrap: wrap; } } #bottom-menu ul li::after { content: "｜"; } #bottom-menu ul li:last-child::after { content: ""; } #bottom-menu ul li a { position: relative; font-size: clamp(1.1rem, 1.056rem + 0.1vw, 1.2rem); } #bottom-menu ul li a:hover { text-decoration: underline; } footer { z-index: 10; position: relative; background: #FFFFFF; } @media screen and (max-width: 767px) { footer #footer_menu { display: none !important; } } footer.recruit { background: #1E71BB; color: #ffffff; z-index: 1000; } #footer-bottom { padding: 5rem; display: flex; align-items: center; } @media screen and (max-width: 767px) { #footer-bottom { display: block; padding: 3rem 5%; } } #footer-bottom .address { font-size: 1rem; margin: 0 0 0 2rem; } @media screen and (max-width: 767px) { #footer-bottom .address { margin: 1rem 0 0 0; } } .copyright { text-align: right; font-size: 1rem; padding: 2rem; } #pagetop { position: fixed; right: 2%; bottom: 5%; cursor: pointer; transition: all 0.3s ease; z-index: 51; width: 44px; } @media screen and (max-width: 767px) { #pagetop { bottom: 44px; width: 44px; } } #pagetop:hover::after { animation: pagetop 0.3s ease infinite; animation-duration: 1s; } @keyframes pagetop { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); } } .tatete { /* vertical-rl を基準 */ writing-mode: vertical-rl; /* mixed */ text-orientation: mixed; /* upright */ text-orientation: upright; /* sideways */ text-orientation: sideways; } .grbg { background: transparent linear-gradient(52deg, #938BC3 0%, #D37EBE 100%) 0% 0% no-repeat padding-box; } .bor { overflow: hidden; } .bor img { border-radius: 0 0 30px 0; } .bor2 { overflow: hidden; } .bor2 img { border-radius: 0 0 30px 30px; } #footer_menu { padding: 5rem 0 0 0; } #footer_menu .logos { display: flex; justify-content: center; align-items: center; margin: 0 0 3rem 0; } #footer_menu .logos img { width: 50px; line-height: 0; } #footer_menu .logos .txt { font-size: 3rem; margin: 0 0 0.2em 0; font-weight: 400; } #footer_menu .logos p.sub { line-height: 1.4; margin: 0 2rem 0 2rem; color: #8B8B8B; font-size: 1rem; } @media screen and (max-width: 767px) { .submenus { display: none; } .submenus ul.indexlinks { display: block !important; padding: 2rem 2rem 0 2rem !important; } .submenus .people_nav_flex ul.lasts li:last-child { padding: 0 0 2rem 0 !important; } } .mainoverlay { display: block; width: 100%; height: 100%; top: 0; left: 0; content: ""; z-index: 999; background: rgba(0, 91, 172, 0.5); position: fixed; display: none; } .mainoverlay.is-open { display: block; } #visual_header { position: relative; } #visual_header.noimg { min-height: 500px; } @media screen and (max-width: 767px) { #visual_header.noimg { min-height: 200px; } #visual_header.noimg.long { min-height: 300px; } #visual_header.noimg.long .title { top: 20%; } #visual_header.noimg .title { top: 35%; } } #visual_header .image { position: relative; line-height: 1; } #visual_header .image::after { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; z-index: 2; background: rgba(0, 0, 0, 0.25); } #visual_header .title { position: absolute; top: 50%; right: 5%; transform: translateY(-50%); z-index: 10; color: #ffffff; text-align: right; } @media screen and (max-width: 767px) { #visual_header .title { text-align: center; right: 50%; width: 100%; transform: translateY(-50%) translateX(50%); } } #visual_header .title p.cat { font-size: 1.8rem; } @media screen and (max-width: 767px) { #visual_header .title p.cat { font-size: 1.4rem; } } #visual_header .title h1 { font-size: 3.6rem; font-weight: 500; letter-spacing: 0.1em; font-feature-settings: "palt"; } @media screen and (max-width: 767px) { #visual_header .title h1 { font-size: 4vw; line-height: 1.5; } } #visual_header .top_name { position: absolute; bottom: 5rem; left: 5rem; color: #ffffff; z-index: 30; } @media screen and (max-width: 767px) { #visual_header .top_name { position: static; text-align: center; margin: 2rem 0 0 0; } } .hi .image { overflow: hidden !important; line-height: 1; } .hi .image img { transition: all 0.5s ease; will-change: transform; } .hi:hover .image img { transform: scale(1.05); } .tatetes { writing-mode: vertical-rl; line-height: 1.4; } .tatetes span.numbers { text-combine-upright: all; } @media screen and (max-width: 767px) { .tatetes { writing-mode: horizontal-tb; } } section.recommend { padding: 10vw; color: #ffffff; background: rgba(0, 0, 0, 0.7); border-radius: 30px 30px 0 0; margin: 5rem 0; } section.recommend .title { text-align: center; margin: 0 0 5rem 0; } @media screen and (max-width: 767px) { section.recommend .title { margin: 0 0 2rem 0; } } section.recommend .title p.en { font-size: 5rem; line-height: 1.2; } @media screen and (max-width: 767px) { section.recommend .title p.en { font-size: 1.6rem; } } section.recommend .recommend_flex { display: flex; justify-content: space-between; } @media screen and (max-width: 767px) { section.recommend .recommend_flex { display: block; } } section.recommend .recommend_flex .box { width: 48%; position: relative; } @media screen and (max-width: 767px) { section.recommend .recommend_flex .box { width: 100%; margin: 0 0 1rem 0; } } section.recommend .recommend_flex .box .btns { position: absolute; bottom: 3rem; left: 2rem; background: #000; color: #ffffff; border-radius: 30px; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 10rem 1.5rem 2rem; } @media screen and (max-width: 767px) { section.recommend .recommend_flex .box .btns { font-size: 1.3rem; padding: 1rem 5rem 1rem 2rem; bottom: 1em; left: 1em; } } section.recommend .recommend_flex .box .btns .icon { width: 30px; height: 20px; background: #ffffff; border-radius: 30px; text-align: center; line-height: 1; margin: 0 0 0 0; position: absolute; top: 50%; right: 5%; transform: translateY(-50%); } section.recommend .recommend_flex .box .btns .icon img[src$=".svg"], section.recommend .recommend_flex .box .btns .icon img { width: 10px; margin: auto; } section.recommend .recommend_flex .box:hover .btns { background: #301BB4; } .dummy { width: 18%; } #slide-menu { display: none; position: fixed; overflow-y: auto; top: 0; left: 0; width: 100%; height: 100vh; background-color: #fff; z-index: 9900; scrollbar-gutter: stable; } @media screen and (max-width: 767px) { #slide-menu { padding-bottom: 50px; } } #slide-menu .slide-menu-top { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; height: 86px; padding: 0.5rem 1rem 0.5rem 1rem; } #slide-menu .slide-menu-top .logo { display: flex; align-items: center; } #slide-menu .slide-menu-top .logo a { display: flex; align-items: center; } #slide-menu .slide-menu-top .logo a .images { width: 40px; margin: 0.5em 0 0 0; } #slide-menu .slide-menu-top .logo a { font-size: 2.4rem; font-weight: 400; font-size: clamp(1.8rem, 1.6vw, 2.4rem); white-space: nowrap; } #slide-menu .slide-menu-top .logo a img { line-height: 0; } #slide-menu .slide-menu-top .logo .sub { font-size: 1rem; line-height: 1.2; margin: 0 0 0 1rem; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-top .logo .sub { font-size: 0.8rem; } } @media screen and (max-width: 767px) { #slide-menu .slide-menu-top .logo { width: 200px; margin: 2px 0 0 6%; } } #slide-menu .slide-menu-top .entry-menu { flex: 1; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-top { align-items: flex-start; } } #slide-menu .slide-menu-top-menu { flex: 1; display: flex; align-items: center; justify-content: space-between; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-top-menu { display: block; width: 100%; } #slide-menu .slide-menu-top-menu h1 { padding-top: 4px; } } @media screen and (max-width: 767px) { #slide-menu #sp-mm-close { position: absolute; top: 1rem; right: 1rem; } } #slide-menu #sp-mm-close .sp-mm-btn { position: relative; width: 60px; height: 60px; background-color: #fff; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; margin: 0 0 0 1rem; } @media screen and (max-width: 767px) { #slide-menu #sp-mm-close .sp-mm-btn { width: 40px; height: 40px; } } #slide-menu #sp-mm-close .sp-mm-btn span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); display: block; width: 21px; height: 21px; } #slide-menu #sp-mm-close .sp-mm-btn span:before, #slide-menu #sp-mm-close .sp-mm-btn span:after { content: ""; display: block; position: absolute; transition: all 0.3s ease; } #slide-menu #sp-mm-close .sp-mm-btn span:before { background-color: #3e3e3e; width: 100%; height: 1px; top: 50%; margin-top: -1px; } #slide-menu #sp-mm-close .sp-mm-btn span:after { background-color: #3e3e3e; height: 100%; width: 1px; left: 50%; margin-left: -1px; } #slide-menu #sp-mm-close .sp-mm-btn:hover { background-color: #3e3e3e; } #slide-menu #sp-mm-close .sp-mm-btn:hover span:before { background-color: #fff; } #slide-menu #sp-mm-close .sp-mm-btn:hover span:after { background-color: #fff; } #slide-menu .slide-menu-nav-layout { padding: 5rem 5vw 0 5vw; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout { display: block; padding: 1rem 5vw 1rem 5vw; } } #slide-menu .slide-menu-nav-layout .menu_in { display: flex; flex-wrap: wrap; gap: 0; justify-content: space-between; } #slide-menu .slide-menu-nav-layout .titles { border-bottom: 1px solid #eee; margin: 0 0 2rem 0; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .titles { margin: 0 0 0 0; position: relative; padding: 0 0 1rem 0; } #slide-menu .slide-menu-nav-layout .titles .icon { width: 7px; position: absolute; right: 5%; top: 3px; transform-origin: center 3px; } #slide-menu .slide-menu-nav-layout .titles .icon.down { width: 13px; right: 4%; } #slide-menu .slide-menu-nav-layout .titles.active .icon { transform: rotate(180deg); } } #slide-menu .slide-menu-nav-layout .titles p.jp, #slide-menu .slide-menu-nav-layout .titles a.jp { font-weight: 500; font-size: 1.2rem; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .titles p.jp, #slide-menu .slide-menu-nav-layout .titles a.jp { font-size: 1rem; line-height: 1; } } #slide-menu .slide-menu-nav-layout .titles a.jp { display: block; } #slide-menu .slide-menu-nav-layout .titles a.jp:hover { color: #005BAC; } #slide-menu .slide-menu-nav-layout .titles p.en { font-size: 1rem; color: #555; } #slide-menu .slide-menu-nav-layout .people_nav_flex { display: flex; justify-content: space-between; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .people_nav_flex { display: block; } } #slide-menu .slide-menu-nav-layout .people_nav_flex ul { width: 50%; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .people_nav_flex ul { width: 100%; display: block !important; padding: 0 2rem !important; } } #slide-menu .slide-menu-nav-layout .block { margin: 0 0 5rem 0; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .block { margin: 0 0 2rem 0; } } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .block ul { display: none; padding: 2rem 0 0 0; background: #005BAC; padding: 2rem 2rem 2rem 2rem; } } #slide-menu .slide-menu-nav-layout .block ul li { font-feature-settings: "palt"; } #slide-menu .slide-menu-nav-layout .block ul li a { display: block; padding: 5px 0; color: #555; } #slide-menu .slide-menu-nav-layout .block ul li a span { font-size: 1.2rem; display: inline-block; line-height: 1.4; } #slide-menu .slide-menu-nav-layout .block ul li a p.name { line-height: 1.2; } #slide-menu .slide-menu-nav-layout .block ul li a:hover { color: #005BAC; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .block ul li a { font-size: 1rem; padding: 0.5em 0; color: #ffffff; position: relative; } #slide-menu .slide-menu-nav-layout .block ul li a::after { position: absolute; top: 50%; right: -0.8em; transform: translateY(-50%); display: block; width: 20px; height: 10px; content: ""; background: url(/recruit/assets/image/common/yaji_white.svg) no-repeat; } } #slide-menu .slide-menu-nav-layout .col { width: 22%; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .col { width: 100%; } } #slide-menu .slide-menu-nav-layout .col .parent-menu { margin-bottom: 35px; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .col .parent-menu { margin-bottom: 0; } } #slide-menu .slide-menu-nav-layout .col .parent-menu .parent-title { position: relative; display: block; color: #3e3e3e; border-bottom: 1px solid #3e3e3e; padding-bottom: 10px; margin-bottom: 10px; } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .col .parent-menu .parent-title { font-size: 1.6rem; padding: 12px 0; margin-bottom: 0; } #slide-menu .slide-menu-nav-layout .col .parent-menu .parent-title i { position: absolute; display: block; width: 19px; height: 19px; right: 10px; top: 50%; transform: translateY(-50%); } #slide-menu .slide-menu-nav-layout .col .parent-menu .parent-title i::before { content: ""; display: block; position: absolute; width: 100%; height: 1px; background-color: #3e3e3e; top: calc(50% - 1px); left: 0; } #slide-menu .slide-menu-nav-layout .col .parent-menu .parent-title i::after { content: ""; display: block; position: absolute; width: 1px; height: 100%; background-color: #3e3e3e; top: 0; left: calc(50% - 1px); } } @media screen and (max-width: 767px) { #slide-menu .slide-menu-nav-layout .col .parent-menu.open .parent-title i { transform: translateY(-50%) rotate(45deg); } } #slide-menu .special { margin-top: 50px; } @media screen and (max-width: 767px) { #slide-menu .special { text-align: center; } } #recruit_footer { padding: 5vw; } #recruit_footer .in { display: flex; justify-content: space-between; } #recruit_footer .in .left { width: 25%; } @media screen and (max-width: 767px) { #recruit_footer .in .left { width: 100%; } } #recruit_footer .in .left .logo { width: 100px; margin: 0 0 2rem 0; } #recruit_footer .in .left .tagline { letter-spacing: 0.12em; font-weight: 300; } @media screen and (max-width: 767px) { #recruit_footer .in .left .tagline { font-size: 1rem; } } #recruit_footer .in .right { flex: 1; } @media screen and (max-width: 767px) { #recruit_footer .in .right { display: none; } } #recruit_footer .in .right .right_flex { display: flex; justify-content: space-between; margin: 0 0 10rem 0; } #recruit_footer .in .right .right_flex .footer_menu { width: 75%; } #recruit_footer .in .right .right_flex .footer_menu .row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 5%; } #recruit_footer .in .right .right_flex .footer_menu .row .fmenu { margin: 0 0 2em 0; } #recruit_footer .in .right .right_flex .footer_menu .row ul li a { display: block; font-size: 1.2rem; padding: 0.2em 0; } #recruit_footer .in .right .right_flex .footer_menu .row ul li a:hover { color: #ccc; } #recruit_footer .in .right .right_flex .footer_menu h4 { border-bottom: 1px solid #fff; margin: 0 0 1rem 0; padding: 0 0 1rem 0; } #recruit_footer .in .right .right_flex .entry_btn { width: 15%; min-width: 160px; } #recruit_footer .in .right .right_flex .entry_btn a { display: block; border-radius: 50px; background: #52A0E6; text-align: center; padding: 1rem 0; transition: all 0.3s ease; font-size: 14px; } #recruit_footer .in .right .right_flex .entry_btn a:hover { background: rgb(104.2803030303, 172.2348484848, 233.2196969697); } #recruit_footer .in .right .copyright { text-align: left; padding: 0; border-top: 1px solid #fff; padding: 1em 0 0 0; font-size: 12px; letter-spacing: 0.1em; display: flex; gap: 30px; } #recruiting { position: relative; min-height: 400px; display: flex; overflow: hidden; } .recruiting-left { width: 50%; background: #005BAC; display: flex; align-items: center; justify-content: center; padding: 4rem 3rem; } .recruiting-left .recruiting-content { text-align: left; color: #ffffff; max-width: 400px; } @media screen and (max-width: 767px) { .recruiting-left .recruiting-content { text-align: center; } } .recruiting-left .recruiting-content .recruiting-title { font-size: clamp(4rem, 2.84rem + 1.5vw, 5rem); line-height: 1.1; letter-spacing: 0.1em; margin-bottom: 2rem; } @media screen and (max-width: 767px) { .recruiting-left .recruiting-content .recruiting-title { font-size: 2rem; } } .recruiting-left .recruiting-content .recruiting-subtitle { font-size: 1.8rem; margin-bottom: 2rem; font-weight: 300; } @media screen and (max-width: 767px) { .recruiting-left .recruiting-content .recruiting-subtitle { font-size: 1.2rem; } } .recruiting-left .recruiting-content .recruiting-description { line-height: 1.8; margin-bottom: 3rem; } .recruiting-left .recruiting-content .recruiting-btn { display: inline-block; background: #ffffff; color: #005BAC; padding: 1rem 2.5rem; border-radius: 30px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; } .recruiting-left .recruiting-content .recruiting-btn:hover { background: #f0f0f0; transform: translateY(-2px); } @media screen and (max-width: 767px) { .recruiting-left .recruiting-content .recruiting-btn { padding: 0.8rem 2rem; } } .recruiting-right { width: 50%; position: relative; } .recruiting-right .recruiting-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .recruiting-right .recruiting-bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .recruiting-right .recruiting-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1; } @media screen and (max-width: 767px) { #recruiting { flex-direction: column; min-height: auto; } #recruiting .recruiting-left, #recruiting .recruiting-right { width: 100%; } #recruiting .recruiting-left { padding: 3rem 2rem; } #recruiting .recruiting-right { min-height: 40vh; } } #related { background-color: #005BAC; padding-block: 80px; } @media screen and (max-width: 767px) { #related { padding-block: 30px; } } #related h2 { color: #fff; margin-bottom: 50px; } @media screen and (max-width: 767px) { #related h2 { margin-bottom: 20px; } } #related h2 .en { display: block; font-size: 5rem; font-weight: 600; } @media screen and (max-width: 767px) { #related h2 .en { font-size: 3rem; } } #related h2 .jp { display: block; font-size: 1.8rem; } #related #related-header { position: relative; display: flex; justify-content: space-between; max-width: calc(1300px + 6rem); padding: 0 3vw; margin: auto; } #related #related-header #pager { position: relative; width: 110px; display: flex; align-items: center; justify-content: space-between; display: none !important; } #related #related-header #pager .swiper-button { width: 47px; height: 47px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); cursor: pointer; } #related #related-header #pager .swiper-prev { transform: rotate(-135deg); } #related #slider { max-width: calc(1300px + 6rem); padding: 0 3vw; margin: auto; } #related #slider .swiper-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 26px; } @media screen and (max-width: 1060px) { #related #slider .swiper-wrapper { grid-template-columns: repeat(2, 1fr); gap: 0 3%; } } #related #slider .swiper-wrapper .swiper-slide { margin-bottom: 4rem; } @media screen and (max-width: 767px) { #related #slider .swiper-wrapper .swiper-slide { width: 100%; margin-right: 0; margin-bottom: 1rem; } } #related #slider .swiper-wrapper .swiper-slide .image { position: relative; } #related #slider .swiper-wrapper .swiper-slide .image span { position: absolute; background-color: #005BAC; color: #fff; line-height: 1; padding: 8px 47px 6px 20px; left: 0; bottom: 0; } @media screen and (max-width: 767px) { #related #slider .swiper-wrapper .swiper-slide .image span { position: relative; background: transparent; padding: 6px 10px 4px 0; font-size: 1.2rem; line-height: 1.3; display: block; } } #related #slider .swiper-wrapper .swiper-slide .image span::after { content: ""; display: block; position: absolute; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); right: 15px; top: 50%; margin-top: 0px; } @media screen and (max-width: 767px) { #related #slider .swiper-wrapper .swiper-slide .image span::after { display: none; right: 0; margin-top: -1px; } } #related #slider .swiper-wrapper .swiper-slide p { margin-top: 1rem; color: #fff; font-size: 1.4rem; } @media screen and (max-width: 1270px) { #main_header .header-nav { display: none; } } @media screen and (max-width: 1060px) { #main_header_recuit .header-nav { display: none; } } #main_header_recuit .drawer_flex { justify-content: left; } #main_header_recuit .drawer_flex a:last-child { margin-right: 0; } #main_header_recuit .drawer_flex a .image { display: block; overflow: hidden; line-height: 1; border-radius: 6px; } #main_header_recuit .drawer_flex a .txt { font-size: clamp(1.2rem, 0.968rem + 0.3vw, 1.4rem); } #main_header_recuit #entry_mypage { width: 160px; } #policy #first { padding: 50px 0 0; } @media screen and (max-width: 767px) { #policy #first { padding: 25px 0 0; } } #policy #first .page-title h1 { font-size: 2.4rem; font-weight: 500; color: #005BAC; } @media screen and (max-width: 767px) { #policy #first .page-title h1 { font-size: 2rem; } } #policy #first .page-title .en { font-size: clamp(6rem, 4.608rem + 1.8vw, 7.2rem); } @media screen and (max-width: 767px) { #policy #first .page-title .en { font-size: 3rem; } } #policy #content-wrap .inner { max-width: 1100px; margin: auto; padding: 5rem 5rem; } @media screen and (max-width: 767px) { #policy #content-wrap .inner { padding: 2rem 2rem; } } #policy #content-wrap .pcont h2 { position: relative; margin-top: 8rem; margin-bottom: 2rem; padding-bottom: 2rem; font-size: 2.4rem; font-weight: 500; line-height: 1.3; } @media screen and (max-width: 767px) { #policy #content-wrap .pcont h2 { font-size: 2rem; margin-top: 4rem; } } #policy #content-wrap .pcont h2::after { content: ""; display: block; position: absolute; width: 60px; height: 4px; background-color: #005BAC; bottom: 0; left: 0; } #policy #content-wrap .pcont h3 { font-size: 2rem; font-weight: 500; } @media screen and (max-width: 767px) { #policy #content-wrap .pcont h3 { font-size: 1.6rem; } } #policy #content-wrap .pcont p { margin-bottom: 3rem; } #contact #first { padding: 50px 0 0; } @media screen and (max-width: 767px) { #contact #first { padding: 25px 0 0; } } #contact #first .page-title h1 { font-size: 2.4rem; font-weight: 500; color: #005BAC; } @media screen and (max-width: 767px) { #contact #first .page-title h1 { font-size: 2rem; } } #contact #first .page-title .en { font-size: clamp(6rem, 4.608rem + 1.8vw, 7.2rem); } @media screen and (max-width: 767px) { #contact #first .page-title .en { font-size: 3rem; } } #contact #content-wrap .inner { max-width: 1100px; margin: auto; padding: 5rem 5rem; } @media screen and (max-width: 767px) { #contact #content-wrap .inner { padding: 2rem 2rem; } } #contact #content-wrap .attention { margin-bottom: 5rem; } #contact #content-wrap .attention .chui { margin-left: 0; } #contact #content-wrap .chui { display: inline-block; background-color: #c00; color: #fff; line-height: 1; padding: 4px 8px; margin-left: 10px; } #contact #content-wrap input, #contact #content-wrap button, #contact #content-wrap textarea, #contact #content-wrap select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #contact #content-wrap section.contact_form { max-width: 800px; margin: auto; } #contact #content-wrap section.contact_form .c_row { display: flex; justify-content: space-between; margin: 0 0 2rem 0; padding: 0 0 2rem 0; border-bottom: 1px solid #eee; } @media screen and (max-width: 767px) { #contact #content-wrap section.contact_form .c_row { display: block; margin: 0 0 1rem 0; padding: 0 0 1rem 0; } } #contact #content-wrap section.contact_form .c_row .left { width: 30%; } @media screen and (max-width: 767px) { #contact #content-wrap section.contact_form .c_row .left { width: 100%; } } @media screen and (max-width: 767px) { #contact #content-wrap section.contact_form .c_row .left p { padding: 1rem 0; border-bottom: 1px solid #ccc; margin: 0 0 2rem 0; } } #contact #content-wrap section.contact_form .c_row .right { width: 65%; } @media screen and (max-width: 767px) { #contact #content-wrap section.contact_form .c_row .right { width: 100%; margin: 0.5rem 0 0 0; } } #contact #content-wrap section.contact_form textarea { width: 100% !important; font-size: 16px; font-size: 1.6rem; border: 1px solid #ccc; padding: 1rem; font-weight: normal; font-family: BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; } #contact #content-wrap section.contact_form input[type=text] { property: value; border: 1px solid #ccc; padding: 1rem; font-size: 16px; font-size: 1.6rem; width: 100%; font-weight: normal; font-family: BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; } #contact #content-wrap section.contact_form ul.radio li { margin: 0 0 1rem 0; cursor: pointer; } #contact #content-wrap section.contact_form ul.radio li input[type=radio] { position: absolute; opacity: 0; } #contact #content-wrap section.contact_form ul.radio li input[type=radio] + .radio-label { padding: 1.5rem; cursor: pointer; display: flex; } @media screen and (max-width: 767px) { #contact #content-wrap section.contact_form ul.radio li input[type=radio] + .radio-label { display: flex; padding: 1rem; } #contact #content-wrap section.contact_form ul.radio li input[type=radio] + .radio-label p { flex: 1; } } #contact #content-wrap section.contact_form ul.radio li input[type=radio] + .radio-label::before { content: ""; background: #f4f4f4; border-radius: 100%; border: 1px solid #b4b4b4; display: inline-block; width: 1.4em; height: 1.4em; position: relative; top: 0.1em; margin-right: 1em; vertical-align: top; cursor: pointer; text-align: center; transition: all 250ms ease; } #contact #content-wrap section.contact_form ul.radio li input[type=radio]:checked + .radio-label { box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.1); border-radius: 10px; } #contact #content-wrap section.contact_form ul.radio li input[type=radio]:checked + .radio-label:before { background-color: #0D459D; box-shadow: inset 0 0 0 4px #f4f4f4; } #contact #content-wrap section.contact_form ul.radio li input[type=radio]:checked + .radio-label:empty:before { margin-right: 0; } #contact #content-wrap section.contact_form ul.radio li input[type=radio]:focus + .radio-label:before { outline: none; border-color: #0D459D; } #contact #content-wrap section.contact_form ul.radio li input[type=radio]:disabled + .radio-label:before { box-shadow: inset 0 0 0 4px #f4f4f4; border-color: #b4b4b4; background: #b4b4b4; } #contact #content-wrap section.contact_form .privacy { margin: 0 0 3rem 0; text-align: center; font-weight: bold; padding: 2rem 0; } #contact #content-wrap section.contact_form .privacy a { text-decoration: underline; } #contact #content-wrap section.contact_form .submit_box input[type=checkbox] { display: none; } #contact #content-wrap section.contact_form .submit_box label { position: relative; display: inline-block; padding: 3px 3px 3px 22px; cursor: pointer; transition: all 0.2s; } @media screen and (max-width: 767px) { #contact #content-wrap section.contact_form .submit_box label { text-align: left; } } #contact #content-wrap section.contact_form .submit_box label::before, #contact #content-wrap section.contact_form .submit_box label::after { position: absolute; content: ""; transition: all 0.2s; } #contact #content-wrap section.contact_form .submit_box label::before { top: 50%; left: 0; width: 14px; height: 14px; margin-top: -8px; background: #f4f4f4; border: 1px solid #ccc; border-radius: 3px; } #contact #content-wrap section.contact_form .submit_box label::after { opacity: 0; top: 50%; left: 3px; width: 8px; height: 4px; margin-top: -4px; border-left: 2px solid #0D459D; border-bottom: 2px solid #0D459D; transform: rotate(-45deg) scale(0.5); } #contact #content-wrap section.contact_form .submit_box label::hover::before { background: #fff; } #contact #content-wrap section.contact_form .submit_box input[type=checkbox]:checked + label::before { background: #fff; border: 1px solid #0D459D; } #contact #content-wrap section.contact_form .submit_box input[type=checkbox]:checked + label::after { opacity: 1; transform: rotate(-45deg) scale(1); } #contact #content-wrap section.contact_form .submit_box button.submit_btn { display: block; padding: 2rem 5rem; font-size: 16px; font-size: 1.6rem; background: #0D459D; color: #fff; margin: auto; cursor: pointer; text-align: center; font-weight: bold; } #contact #content-wrap section.contact_form .submit_box button.submit_btn:hover { background: #0f4fb5; } #contact #content-wrap section.contact_form .submit_box button.submit_btn:disabled { background: #ccc; cursor: default; } #contact #content-wrap section.contact_form .submit_box button.edit_btn { display: block; padding: 2rem 5rem; font-size: 16px; font-size: 1.6rem; background: #333; color: #fff; margin: auto; cursor: pointer; text-align: center; font-weight: bold; } #contact #content-wrap section.contact_form .submit_box button.edit_btn:hover { background: #404040; } #contact #content-wrap section.contact_form .submit_box button.edit_btn:disabled { background: #ccc; cursor: default; } #contact .thanks_box { text-align: center; margin: 0 0 5rem 0; } #contact .thanks_box .title { margin: 0 0 3rem 0; } #contact .thanks_box .title h2 { font-weight: bold; font-size: 24px; font-size: 2.4rem; margin: 0; padding: 0; } #contact .thanks_box .title p { font-weight: bold; font-size: 24px; font-size: 2.4rem; } #contact .thanks_box .txt p { margin: 0 0 2rem 0; } #contact .button_flex { display: flex; justify-content: center; margin: 5rem 0 0 0; } @media screen and (max-width: 767px) { #contact .button_flex { flex-wrap: wrap; } } #contact .button_flex button { margin: 0 1rem !important; } @media screen and (max-width: 767px) { #contact .button_flex button { margin: 0 auto 1rem auto !important; } } #contact .button_flex button.edit_btn { order: 2; } #contact .button_flex button.submit_btn { order: 1; } #news #first { padding: 50px 0 0; } @media screen and (max-width: 767px) { #news #first { padding: 25px 0 0; } } #news #first .page-title h1 { font-size: 2.4rem; font-weight: 500; color: #005BAC; } @media screen and (max-width: 767px) { #news #first .page-title h1 { font-size: 2rem; } } #news #first .page-title .en { font-size: clamp(6rem, 4.608rem + 1.8vw, 7.2rem); } @media screen and (max-width: 767px) { #news #first .page-title .en { font-size: 3rem; } } #news #content-wrap .inner { max-width: 1100px; margin: auto; padding: 5rem 5rem; } @media screen and (max-width: 767px) { #news #content-wrap .inner { padding: 2rem 2rem; } } #news #content-wrap .news_cont_box dl { border-bottom: 1px solid #ccc; padding: 2rem 0; } #news #content-wrap .news_cont_box dl dt .cat { color: #1E71BB; font-weight: bold; } #news #content-wrap .news_cont_box dl dd p { margin-bottom: 1rem; } #news #content-wrap .news_cont_box dl dd .txt { font-weight: bold; font-size: clamp(1.6rem, 1.136rem + 0.6vw, 2rem); margin-bottom: 1rem; } #news #content-wrap .news_cont_box dl dd .pdf_link { position: relative; background-color: #1E71BB; color: #fff; line-height: 1; padding: 6px 30px 6px 20px; } #news #content-wrap .news_cont_box dl dd .pdf_link::after { content: ""; display: block; position: absolute; width: 7px; height: 7px; top: 50%; right: 16px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg) translateY(-50%); } #news #content-wrap .news_cont_box dl dd .pdf_link[href*="?pdffilelink="]::after { content: none; } #news #content-wrap .news_cont_box dl dd .pdf_link[href*="?pdffilelink="]::before { content: ""; display: block; position: absolute; width: 12px; height: 24px; background: url(/assets/image/common/icon-pdf-w.svg) no-repeat center center/100% auto; right: 10px; top: 50%; transform: translateY(-50%); }