.tatete { writing-mode: vertical-rl; -ms-writing-mode: tb-rl; text-orientation: upright; } .hogehoge { padding-top: clamp(20px, 5.3333333333vw, 40.96px); } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hogehoge { padding-top: clamp(60px, 7.8125vw, 80px); } } @media only screen and (min-width: 1025px) { .hogehoge { padding-top: clamp(76.8px, 7.5vw, 120px); } } :root { /* Base font size */ --font-size-base: 13px; /* Type scale tokens */ --font-size-3xs: clamp(calc(var(--font-size-base) * 0.25), calc(var(--font-size-base) * 0.128 + 0.543vw), calc(var(--font-size-base) * 0.563)); --line-height-3xs: 1.8; --font-size-xs: clamp(calc(var(--font-size-base) * 0.313), calc(var(--font-size-base) * 0.117 + 0.87vw), calc(var(--font-size-base) * 0.813)); --line-height-xs: 1.8; --font-size-s: clamp(calc(var(--font-size-base) * 0.438), calc(var(--font-size-base) * 0.193 + 1.087vw), calc(var(--font-size-base) * 1.063)); --line-height-s: 1.8; --font-size-r: clamp(calc(var(--font-size-base) * 0.688), calc(var(--font-size-base) * 0.443 + 1.087vw), calc(var(--font-size-base) * 1.313)); --line-height-r: 1.8; --font-size-m: clamp(calc(var(--font-size-base) * 0.813), calc(var(--font-size-base) * 0.397 + 1.848vw), calc(var(--font-size-base) * 1.875)); --line-height-m: 1.7; --font-size-l: clamp(calc(var(--font-size-base) * 1.063), calc(var(--font-size-base) * 0.5 + 2.5vw), calc(var(--font-size-base) * 2.5)); --line-height-l: 1.5; --font-size-xl: clamp(calc(var(--font-size-base) * 1.438), calc(var(--font-size-base) * 0.704 + 3.261vw), calc(var(--font-size-base) * 3.313)); --line-height-xl: 1.4; } @media screen and (max-width: 767px) { :root { --font-size-base: 22px; } } /* Utility classes */ .text-3xs { font-size: var(--font-size-3xs); line-height: var(--line-height-3xs); } .text-xs { font-size: var(--font-size-xs); line-height: var(--line-height-xs); } .text-s { font-size: var(--font-size-s); line-height: var(--line-height-s); } .text-r { font-size: var(--font-size-r); line-height: var(--line-height-r); } .text-m, h3 { font-size: var(--font-size-m); line-height: var(--line-height-m); } .text-l, h2 { font-size: var(--font-size-l); line-height: var(--line-height-l); } .text-xl, h1 { font-size: var(--font-size-xl); line-height: var(--line-height-xl); } @media screen and (max-width: 767px) { .text-xl, h1 { font-size: 1.4rem; } } body { color: #0e0e0e; font-family: "Noto Serif JP", serif; font-size: var(--font-size-r); line-height: var(--line-height-r); } .gothic { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; } .en { font-family: "Bentham", serif; } /*** 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%; width: 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 { width: 100%; scrollbar-gutter: stable; } body { overflow-x: hidden; width: 100%; } body.fix { overflow: hidden; } br.sp { display: none; } @media screen and (max-width: 767px) { br.sp { display: block; } } a { text-decoration: none; color: #000; } img { vertical-align: bottom; line-height: 1; width: 100%; } .pc { display: block; } @media screen and (max-width: 767px) { .pc { display: none !important; } } .sp { display: none; } @media screen and (max-width: 767px) { .sp { display: block; } } img[src$=".svg"] { width: 100%; height: auto; } .tate { -o-writing-mode: vertical-rl; writing-mode: vertical-rl; } @media screen and (max-width: 767px) { .tate { writing-mode: horizontal-tb; } } .tatete { -o-writing-mode: vertical-rl; writing-mode: vertical-rl; } html.win.gecko .ro, html.win.gecko .la { transform: rotate(0.001deg); } a, img { outline: none !important; } a.txtlink { text-decoration: underline; transition: all 0.3s ease; } a.txtlink:hover { color: #4CA237; } * { -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .pc { display: block; } @media screen and (max-width: 767px) { .pc { display: none; } } .sp { display: none; } @media screen and (max-width: 767px) { .sp { display: block; } } .adelay01 { animation-delay: 0.1s !important; } @media screen and (max-width: 767px) { .adelay01 { animation-delay: 0s !important; } } .adelay02 { animation-delay: 0.2s !important; } @media screen and (max-width: 767px) { .adelay02 { animation-delay: 0s !important; } } .adelay03 { animation-delay: 0.3s !important; } @media screen and (max-width: 767px) { .adelay03 { animation-delay: 0s !important; } } .adelay04 { animation-delay: 0.4s !important; } @media screen and (max-width: 767px) { .adelay04 { animation-delay: 0s !important; } } .adelay05 { animation-delay: 0.5s !important; } @media screen and (max-width: 767px) { .adelay05 { animation-delay: 0s !important; } } .adelay06 { animation-delay: 0.6s !important; } @media screen and (max-width: 767px) { .adelay06 { animation-delay: 0s !important; } } .adelay07 { animation-delay: 0.7s !important; } @media screen and (max-width: 767px) { .adelay07 { animation-delay: 0s !important; } } .adelay08 { animation-delay: 0.8s !important; } @media screen and (max-width: 767px) { .adelay08 { animation-delay: 0s !important; } } .adelay09 { animation-delay: 0.9s !important; } @media screen and (max-width: 767px) { .adelay09 { animation-delay: 0s !important; } } .adelay10 { animation-delay: 1s !important; } @media screen and (max-width: 767px) { .adelay10 { animation-delay: 0s !important; } } .clearfix::after { content: ""; display: block; clear: both; } .inview.fadeInup03 { overflow: hidden; } .inview.fadeInup, .inview.fadeInup03 img, .inview.fadeInup03:after { opacity: 0; } .inview.fadeInup.active { animation: fadeInup 0.5s ease-out; animation-fill-mode: forwards; } .inview.fadeInup03.active img { animation: zoom02 2s cubic-bezier(0.61, 1, 0.88, 1); animation-fill-mode: forwards; } .inview.fadeInup03:after { transition: all 1s ease; transition-delay: 0.3s; } .inview.fadeInup03.active:after { opacity: 1; } .inview.leftright { opacity: 0; } @media screen and (max-width: 767px) { .inview.leftright { opacity: 1; } } .inview.leftright.active { animation: leftright_anim 0.5s ease; animation-fill-mode: forwards; } @media screen and (max-width: 767px) { .inview.leftright.active { animation: none; } } .inview.rightleft { opacity: 0; } .inview.rightleft.active { animation: rightleft_anim 0.5s ease-out; animation-fill-mode: forwards; } @media screen and (max-width: 767px) { .inview.rightleft.active { animation: none; } } .inview.show { opacity: 0; } .inview.show.active { animation: show 1s ease-out; animation-fill-mode: forwards; } @keyframes zoom02 { 0% { transform: scale(1.2); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .image-anime-mask { overflow: hidden; transform: translate3d(-100%, 0, 0); transition: all 0.5s ease; transform-origin: left; } .image-anime-mask.active { transform: translate3d(0, 0, 0); } .image-anime-main { display: block; transform: translate3d(100%, 0, 0); transition: all 0.5s ease; } .image-anime-main.active { transform: translate3d(0, 0, 0); } @keyframes fadeInup { 0% { transform: translateY(25px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes leftright_anim { 0% { transform: translatex(-30px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes rightleft_anim { 0% { transform: translatex(30px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } main { width: 100%; position: relative; overflow-x: hidden; overflow-y: visible; left: 0; min-height: 100vh; right: 0; } main:has(#sticky_cont) { overflow-x: visible; } @media screen and (max-width: 767px) { #faq { margin: 0 0 2rem 0; } } .faq_box { margin: 0 0 2rem 0; background: #F7F7F7; } .faq_box:last-child { margin: 0; } @media screen and (max-width: 767px) { .faq_box { margin: 0 0 0.5rem 0; } } .faq_box .question { display: flex; align-items: flex-start; margin: 0 0 1rem 0; cursor: pointer; padding: 2rem 3rem; } @media screen and (max-width: 767px) { .faq_box .question { padding: 1rem; margin: 0 0 0 0; } } .faq_box .question p.eng { color: #4CA237; width: 2em; font-size: var(--font-size-m); line-height: 1; } .faq_box .question p.txt { flex: 1; padding: 0 2rem 0 1rem; line-height: 1.6; color: #4CA237; } .faq_box .question .plusminus { position: relative; width: 25px; height: 25px; cursor: pointer; color: #4CA237; } @media screen and (max-width: 767px) { .faq_box .question .plusminus { width: 20px; height: 20px; } } .faq_box .question .plusminus.active:before { transform: translatey(-50%) rotate(-90deg); opacity: 0; } .faq_box .question .plusminus.active:after { transform: translatey(-50%) rotate(0); } .faq_box .question .plusminus:before, .faq_box .question .plusminus:after { content: ""; display: block; background-color: #4CA237; position: absolute; top: 50%; left: 0; transition: 0.35s; width: 100%; height: 2px; } @media screen and (max-width: 767px) { .faq_box .question .plusminus:before, .faq_box .question .plusminus:after { height: 1px; } } .faq_box .question .plusminus:before { transform: translatey(-50%); } .faq_box .question .plusminus:after { transform: translatey(-50%) rotate(90deg); } .faq_box .answer { display: flex; align-items: flex-start; margin: 1rem 0 0 0; padding: 0 3rem 3rem 3rem; } @media screen and (max-width: 767px) { .faq_box .answer { padding: 0 1rem 1rem 1rem; } } .faq_box .answer p.eng { color: #000; width: 2em; font-size: var(--font-size-m); line-height: 1; } .faq_box .answer p.txt { flex: 1; padding: 0 0 0 1rem; } #lead { padding: 8vw; max-width: 1600px; margin-inline: auto; } #lead .lead_grid { display: grid; grid-template-columns: 1.5fr 4fr; } @media screen and (max-width: 767px) { #lead .lead_grid { display: block; } } #lead .lead_grid h3 { font-size: var(--font-size-m); line-height: var(--line-height-m); } @media screen and (max-width: 767px) { #lead .lead_grid .left { margin: 0 0 1rem 0; font-size: 1.1rem; } } #lead .lead_grid.wide { display: block; } #lead .lead_grid.wide h3 { margin: 0 0 1rem 0; } #lead .lead_grid .right br { display: none; } .midimage { padding: 0 3vw; margin: 0 0 8rem 0; } @media screen and (max-width: 767px) { .midimage { padding: 0; margin: 0 0 3rem 0; } .midimage img { height: 200px; -o-object-fit: cover; object-fit: cover; -o-object-position: left center; object-position: left center; } } #rec_cont .inner { padding: 0 8vw; max-width: 1600px; margin-inline: auto; } #rec_cont .inner.short { max-width: 1600px; } #rec_cont.padT { padding: 8vw 0 0 0; } #rec_cont_bg, #rec_cont_nobg { background: #F7F7F7; } #rec_cont_bg .inner, #rec_cont_nobg .inner { padding: 4vw 8vw; max-width: 1600px; margin-inline: auto; } #rec_cont_bg .inner.short, #rec_cont_nobg .inner.short { max-width: 1600px; margin-inline: auto; } #rec_cont_bg .entry_blocks, #rec_cont_nobg .entry_blocks { text-align: center; border-top: 1px solid #ccc; padding: 5vw 0; } @media screen and (max-width: 767px) { #rec_cont_bg .entry_blocks, #rec_cont_nobg .entry_blocks { border-top: none; } } #rec_cont_bg .entry_blocks.noborder, #rec_cont_nobg .entry_blocks.noborder { border-top: none; } #rec_cont_bg .entry_blocks h3, #rec_cont_nobg .entry_blocks h3 { font-size: var(--font-size-l); line-height: var(--line-height-l); margin: 0 0 2rem 0; } @media screen and (max-width: 767px) { #rec_cont_bg .entry_blocks h3, #rec_cont_nobg .entry_blocks h3 { margin: 0 0 0 0; } } #rec_cont_bg .entry_blocks h4, #rec_cont_nobg .entry_blocks h4 { margin: 0 0 2rem 0; } #rec_cont_bg .entry_blocks p.normal, #rec_cont_nobg .entry_blocks p.normal { margin: 0 0 1em 0; } #rec_cont_bg .entry_blocks p.email, #rec_cont_nobg .entry_blocks p.email { text-decoration: underline; } #rec_cont_bg p.leads, #rec_cont_nobg p.leads { margin: 0 0 2rem 0; } #rec_cont_bg .bannerlink, #rec_cont_nobg .bannerlink { text-align: center; padding: 10rem 0; } @media screen and (max-width: 767px) { #rec_cont_bg .bannerlink, #rec_cont_nobg .bannerlink { padding: 2rem 0; } } #rec_cont_bg .bannerlink .panel, #rec_cont_nobg .bannerlink .panel { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem; } @media screen and (max-width: 1060px) { #rec_cont_bg .bannerlink .panel, #rec_cont_nobg .bannerlink .panel { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 767px) { #rec_cont_bg .bannerlink .panel, #rec_cont_nobg .bannerlink .panel { grid-template-columns: 1fr 1fr; display: block; } } #rec_cont_bg .bannerlink .panel a, #rec_cont_nobg .bannerlink .panel a { display: block; background: #ffffff; padding: 1rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; font-size: var(--font-size-s); } @media screen and (max-width: 767px) { #rec_cont_bg .bannerlink .panel a, #rec_cont_nobg .bannerlink .panel a { margin: 0 0 0.5rem 0; } } #rec_cont_bg .bannerlink .panel a:after, #rec_cont_nobg .bannerlink .panel a:after { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; z-index: 1; opacity: var(--after-opacity, 0); transition: opacity 0.3s ease; background: #98B9E0; } #rec_cont_bg .bannerlink .panel a::before, #rec_cont_nobg .bannerlink .panel a::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: -100%; background: transparent linear-gradient(269deg, #98B9E1 0%, #D8E0EA 100%) 0% 0% no-repeat padding-box; z-index: 1; transition: left 0.3s ease; } #rec_cont_bg .bannerlink .panel a:hover::before, #rec_cont_nobg .bannerlink .panel a:hover::before { left: 0; } #rec_cont_bg .bannerlink .panel a .txt, #rec_cont_nobg .bannerlink .panel a .txt { margin: 0 0 1rem 0; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; } @media screen and (max-width: 767px) { #rec_cont_bg .bannerlink .panel a .txt, #rec_cont_nobg .bannerlink .panel a .txt { font-size: 0.9rem; } } #rec_cont_bg .bannerlink .panel a .txt .icon, #rec_cont_nobg .bannerlink .panel a .txt .icon { font-size: 1.4em; line-height: 1; } #rec_cont_bg .bannerlink .panel a .txt .icon svg, #rec_cont_nobg .bannerlink .panel a .txt .icon svg { vertical-align: top; line-height: 1; } #rec_cont_bg .bannerlink .panel a .image, #rec_cont_nobg .bannerlink .panel a .image { width: 60%; position: relative; z-index: 2; } @media screen and (max-width: 767px) { #rec_cont_bg .bannerlink .panel a .image, #rec_cont_nobg .bannerlink .panel a .image { width: 100%; } #rec_cont_bg .bannerlink .panel a .image img, #rec_cont_nobg .bannerlink .panel a .image img { -o-object-fit: cover; object-fit: cover; height: 140px; -o-object-position: top center; object-position: top center; } } #rec_cont_nobg { background: none; } .rec_cont_grid { display: grid; grid-template-columns: 16% 1fr; margin: 0 0 4rem 0; padding: 0 0 4rem 0; border-bottom: 1px solid #ccc; } @media screen and (max-width: 767px) { .rec_cont_grid { display: block; margin: 0; padding: 0; } } .rec_cont_grid:first-child { border-top: 1px solid #ccc; padding: 4rem 0; } .rec_cont_grid .left h3 { position: relative; display: flex; align-items: center; font-size: var(--font-size-r); line-height: var(--line-height-r); } @media screen and (max-width: 767px) { .rec_cont_grid .left h3 { font-size: 1.1rem; padding: 1rem 0; } } .rec_cont_grid .right .lead { margin: 0 0 5rem 0; } @media screen and (max-width: 767px) { .rec_cont_grid .right .lead { margin: 0 0 3rem 0; } .rec_cont_grid .right .lead p br { display: none; } } .rec_cont_grid .right ul.greenbar li { background: #4CA237; color: #ffffff; padding: 1rem; margin: 0 0 0.3rem 0; display: block; } .rec_cont_grid .right .flowbox dl { background: #F7F7F7; padding: 1rem; display: grid; grid-template-columns: 1.5fr 4fr; margin: 0 0 2rem 0; } @media screen and (max-width: 767px) { .rec_cont_grid .right .flowbox dl { display: block; } } .rec_cont_grid .right .flowbox dl dt { place-content: center; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 767px) { .rec_cont_grid .right .flowbox dl dt { display: block; padding: 0 0 1rem 0; } } .rec_cont_grid .right .flowbox dl dt .text { width: 100%; max-width: 160px; } .rec_cont_grid .right .flowbox dl dt p.eng { font-size: 80%; } .rec_cont_grid .right .flowbox dl dt p.jp { color: #4CA237; } @media screen and (max-width: 767px) { .rec_cont_grid .right .flowbox dl dt p.jp { font-weight: 500; } } .rec_cont_grid .right .flowbox dl dd { border-left: 1px solid #ccc; padding: 2rem; } @media screen and (max-width: 767px) { .rec_cont_grid .right .flowbox dl dd { border-left: none; padding: 1rem 0 0 0; border-top: 1px solid #ccc; } } .entry_btn_flex { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } @media screen and (max-width: 767px) { .entry_btn_flex { display: block; } .entry_btn_flex a { margin: 0 0 0.5rem 0; } } .entry_btn_flex.one { grid-template-columns: 1fr; justify-items: center; } .entry_btn_flex.one > * { width: 50%; } @media screen and (max-width: 767px) { .entry_btn_flex.one > * { width: 100%; } } .right .groupment_wrap { padding: 4rem 0 0 0; border-top: 1px solid #ccc; } @media screen and (max-width: 767px) { .right .groupment_wrap { padding: 1rem 0 0 0; } } .right .groupment_wrap h2 { margin: 0 0 5rem 0; } @media screen and (max-width: 767px) { .right .groupment_wrap h2 { margin: 0 0 1rem 0; } } .right .block { margin: 0 0 5rem 0; } .right .block h3 { margin: 0 0 1rem 0; font-size: 1.3rem; } @media screen and (max-width: 767px) { .right .block h3 { font-size: 1rem; margin: 0 0 0.5rem 0; } } @media screen and (max-width: 767px) { .right .block { margin: 0 0 1.5rem 0; } } #rec_cont_table .inner { padding: 0 8vw; margin: 0 0 4rem 0; max-width: 1600px; margin-inline: auto; } @media screen and (max-width: 767px) { #rec_cont_table .inner { margin: 0; } } #rec_cont_table table { width: 100%; border-collapse: collapse; border: 1px solid #6280A3; margin: 0 0 5rem 0; } @media screen and (max-width: 767px) { #rec_cont_table table { margin: 0 0 1rem 0; } } #rec_cont_table table tr { border-bottom: 1px solid #6280A3; } #rec_cont_table table tr:last-child { border-bottom: none; } #rec_cont_table table th { width: 20%; padding: 2rem 2.5rem; background: #6280A3; color: #ffffff; border-right: 1px solid #6280A3; border-bottom: 1px solid #fff; vertical-align: top; font-weight: normal; } @media screen and (max-width: 767px) { #rec_cont_table table th { padding: 1rem; } } #rec_cont_table table td { padding: 2rem 2.5rem; vertical-align: top; } #rec_cont_table table td.bg01 { width: 20%; background: #EDF3F8; border-right: 1px solid #6280A3; } @media screen and (max-width: 767px) { #rec_cont_table table td { padding: 1rem; } } #rec_cont_table table dl { margin: 0; } #rec_cont_table table dl dt { font-weight: bold; margin: 0 0 0.8rem 0; font-size: var(--font-size-r); line-height: var(--line-height-r); } #rec_cont_table table dl dt:not(:first-child) { margin-top: 2rem; } #rec_cont_table table dl dd { margin: 0 0 0 0; line-height: 1.8; font-size: var(--font-size-r); } @media screen and (max-width: 767px) { #rec_cont_table .scroll_table { width: 100%; overflow: hidden; margin: 0 0 2rem 0; } #rec_cont_table .scroll_table .in { overflow-x: scroll; } #rec_cont_table .scroll_table .in table { width: 800px; } } .entry_banner_cont { background: #4CA237; right: 0; bottom: 5vh; z-index: 100; color: #ffffff; width: 320px; padding: 2rem; margin: auto; } @media screen and (max-width: 767px) { .entry_banner_cont { position: static; width: 100%; } } .entry_banner_cont.nobg { background: none; padding: 2rem 0; } @media screen and (max-width: 767px) { .entry_banner_cont.nobg { margin: auto; width: 86%; padding: 2rem 0 0 0; } } .entry_banner_cont.nobg a { border-radius: 5px; } .entry_banner_cont p.detail { font-size: var(--font-size-s); line-height: 1.5; } @media screen and (max-width: 767px) { .entry_banner_cont p.detail { font-size: 0.875rem; } } #challenged .entry_banner_cont { padding-bottom: 0; width: auto; } #challenged .entry_banner_cont .in { display: flex; justify-content: center; gap: 2rem; } @media screen and (max-width: 767px) { #challenged .entry_banner_cont .in { display: block; padding: 0 8vw; } } #challenged .entry_banner_cont .in .entry_btn { width: 100%; max-width: 300px; } @media screen and (max-width: 767px) { #challenged .entry_banner_cont .in .entry_btn { max-width: none; } } #challenged .entry_banner_cont .in .entry_btn a { width: 100%; padding: 1rem 3rem 1rem 1.5rem; } #mid-career-challenged .entry_banner_cont { margin: 2rem auto 0; width: auto; max-width: 650px; } #mid-career-challenged .entry_banner_cont .entry_btn { max-width: none; } #mid-career-challenged .entry_banner_cont .entry_btn a { text-align: center; } .entry_btn a { display: block; color: #4CA237; background: #ffffff; padding: 1rem; border-radius: 5px; margin: 0 0 1rem 0; position: relative; transition: all 0.3s ease; } @media screen and (max-width: 767px) { .entry_btn a { border-radius: 0; } } .entry_btn a:hover { background: #eee; } .entry_btn a:after { position: absolute; top: 50%; right: 3%; transform: translateX(-50%) translateY(-50%); content: ""; color: #4CA237; display: inline-block; width: 1.2em; height: 1.2em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='m10 17l5-5l-5-5' stroke-width='1'/%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .entry_btn.green a { background: #4CA237; color: #ffffff; } .entry_btn.green a:hover { background: #3F932A; } .entry_btn.green a:after { color: #ffffff; } .entry_btn.blue a { background: #6280A3; color: #ffffff; } .entry_btn.blue a:hover { background: #4b6788; } .entry_btn.blue a:after { color: #ffffff; } .c-messages h3 { color: #4CA237; margin: 0 0 5rem 0; } @media screen and (max-width: 767px) { .c-messages h3 { margin: 0 0 2rem 0; } .c-messages h3 br { display: none; } } .c-messages p { margin: 0 0 3rem 0; } @media screen and (max-width: 767px) { .c-messages p br { display: none; } } #mid-career-challenged #visual_header_midc { position: relative; padding: 170px 5% 0; max-width: 1600px; margin-inline: auto; } #mid-career-challenged #visual_header_midc .txt h1 { font-size: var(--font-size-xl); } #mid-career-challenged #visual_header_midc .image { max-width: 657px; margin: auto; } #mid-career-challenged .illust01 { width: 700px; margin: 0 auto 4rem; } @media screen and (max-width: 767px) { #mid-career-challenged .illust01 { width: 100%; } } #mid-career-challenged .midc-faq_box { margin: 0 0 5rem 0; } @media screen and (max-width: 767px) { #mid-career-challenged .midc-faq_box { margin: 0 0 2rem 0; } } #mid-career-challenged .midc-faq_box .questions { background: #F4A5AF; color: #ffffff; display: flex; align-items: center; padding: 2rem; } @media screen and (max-width: 767px) { #mid-career-challenged .midc-faq_box .questions { display: block; text-align: center; } } #mid-career-challenged .midc-faq_box .questions p.big { margin: 0 2rem 0 0; font-size: 120%; } @media screen and (max-width: 767px) { #mid-career-challenged .midc-faq_box .questions p.big { margin: 0; } } @media screen and (max-width: 767px) { #mid-career-challenged .midc-faq_box .questions p { font-size: 120%; } } #mid-career-challenged .midc-faq_box .answers { background: #FAF0F2; padding: 2rem; } @media screen and (max-width: 767px) { #mid-career-challenged .midc-faq_box .answers { padding: 1rem; } } #mid-career-challenged .midc-faq_box .answers .block { background: #ffffff; display: grid; grid-template-columns: 1fr 4fr; gap: 1rem; padding: 2rem; margin: 0 0 2rem 0; } @media screen and (max-width: 767px) { #mid-career-challenged .midc-faq_box .answers .block { display: block; } #mid-career-challenged .midc-faq_box .answers .block .icon { width: 70%; margin: 0 auto 1rem auto; } } #mid-career-challenged .midc-faq_box .answers .block .icon { padding: 0 1rem; } #mid-career-challenged .midc-faq_box#faq2 .questions { background: #98B9E0; } #mid-career-challenged .midc-faq_box#faq2 .answers { background: #EDF3F8; } #mid-career-challenged .midc-faq_box#faq3 .questions { background: #63C497; } #mid-career-challenged .midc-faq_box#faq3 .answers { background: #E7F4EE; } #mid-career-challenged .midc-faq_box#faq4 .questions { background: #F0AD4F; } #mid-career-challenged .midc-faq_box#faq4 .answers { background: #F7F4EF; } #mid-career-challenged .midc-faq_box#faq5 .questions { background: #BDA1CE; } #mid-career-challenged .midc-faq_box#faq5 .answers { background: #F2F0F4; } #mid-career-challenged .rec_cont_grid { gap: 3%; } #mid-career-challenged .wel_grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: stretch; } @media screen and (max-width: 1060px) { #mid-career-challenged .wel_grid { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 767px) { #mid-career-challenged .wel_grid { display: block; } } #mid-career-challenged .wel_grid .box { display: flex; flex-direction: column; } @media screen and (max-width: 767px) { #mid-career-challenged .wel_grid .box { margin: 0 0 0.5rem 0; } } #mid-career-challenged .wel_grid .box h3 { background: #98B9E0; color: #ffffff; padding: 1rem 1rem; display: flex; gap: 10px; align-items: center; font-size: var(--font-size-r); } #mid-career-challenged .wel_grid .box h3 .icon { width: 40px; line-height: 0; } #mid-career-challenged .wel_grid .box .txt { flex: 1; padding: 2rem; background: #EDF3F8; font-size: var(--font-size-s); } @media screen and (max-width: 767px) { #mid-career-challenged .wel_grid .box .txt { font-size: 0.875rem; } } #mid-career-challenged .wel_grid .box .txt p { margin: 0 0 0.5em 0; font-feature-settings: "palt"; letter-spacing: 0.05em; } #mid-career-challenged .wel_grid .box .txt p.detail { font-size: var(--font-size-xs); line-height: var(--line-height-xs); } @media screen and (max-width: 767px) { #mid-career-challenged .wel_grid .box .txt p.detail { font-size: 13px; } } .cl_panel { display: grid; grid-template-columns: 1fr 4fr; margin: 0 0 1rem 0; } @media screen and (max-width: 767px) { .cl_panel { display: block; } } .cl_panel.panel02 .left { background: #6280A3; } .cl_panel.panel02 .right { background: #EDF3F8; } .cl_panel .left { background: #4CA237; color: #ffffff; display: grid; padding: 3rem 0; } .cl_panel .left .con { width: 89%; margin: auto; text-align: center; } .cl_panel .left h3 { border: 1px solid #ffffff; display: block; width: 100%; text-align: center; border-radius: 3px; margin: 0 0 1rem 0; } .cl_panel .left p.small { margin: 0 0 1em 0; font-size: var(--font-size-s); line-height: var(--line-height-s); } @media screen and (max-width: 767px) { .cl_panel .left p.small { font-size: rem; } } .cl_panel .right { padding: 3rem; background: #EDF5ED; } .cl_panel .right .block { margin: 0 0 1em 0; } .cl_panel .right .block h4 { color: #4CA237; font-size: var(--font-size-m); line-height: var(--line-height-m); margin: 0 0 1rem 0; } .cl_panel .right .block p { margin: 0 0 1em 0; } .cl_panel .right .block p.detail { font-size: var(--font-size-s); line-height: var(--line-height-s); } @media screen and (max-width: 767px) { .cl_panel .right .block p.detail { font-size: 0.7rem; } } .sample-tab__list { display: flex; justify-content: space-between; margin-bottom: 10px; } @media screen and (max-width: 767px) { .sample-tab__list { margin: 0 0 3rem 0; } } .sample-tab__list li { width: 50%; } .sample-tab__list li button { width: 100%; text-align: center; font-feature-settings: "palt"; } .sample-tab__list-item:not(:first-child) { margin-left: 5px; } .sample-tab__button { border: none; padding: 5px 10px; cursor: pointer; border-bottom: 5px solid #ccc; } .sample-tab__button[aria-selected=true] { font-weight: bold; border-bottom: 5px solid #4CA237; } .sample-tab__panel[aria-hidden=true] { display: none; } .sample-tab__panel[aria-hidden=false] { display: block; } .tabcont { padding: 3rem 0; } @media screen and (max-width: 767px) { .tabcont { padding: 0; margin: 0 0 2rem 0; } } .tabcont h3 { margin: 0 0 3rem 0; padding: 0 0 3rem 0; border-bottom: 1px solid #ccc; font-size: var(--font-size-l); line-height: var(--line-height-l); } @media screen and (max-width: 767px) { .tabcont h3 { font-size: 1rem; margin: 0 0 1rem 0; padding: 0 0 1rem 0; } } .tabcont .rec_table_dl dl { display: flex; justify-content: space-between; } @media screen and (max-width: 767px) { .tabcont .rec_table_dl dl { display: block; } } .tabcont .rec_table_dl dl dt { width: 25%; padding: 2rem 0; color: #4CA237; border-bottom: 1px solid #4CA237; } @media screen and (max-width: 767px) { .tabcont .rec_table_dl dl dt { width: 100%; padding: 1rem 0; } .tabcont .rec_table_dl dl dt br { display: none; } } .tabcont .rec_table_dl dl dd { flex: 1; padding: 2rem; border-bottom: 1px solid #ccc; } @media screen and (max-width: 767px) { .tabcont .rec_table_dl dl dd { width: 100%; padding: 1rem 0; border-bottom: none; } } .tabcont .rec_table_dl dl dd p { margin: 0 0 1em 0; } .tabcont .rec_table_dl dl dd p:last-child { margin: 0; } .tabcont .rec_table_dl dl dd p.detail { font-size: var(--font-size-s); line-height: var(--line-height-s); } @media screen and (max-width: 767px) { .tabcont .rec_table_dl dl dd p.detail { font-size: 12px; } } .tabcont .rec_table { width: 100%; border-top: 1px solid #4CA237; border-left: 1px solid #4CA237; font-size: var(--font-size-s); line-height: var(--line-height-s); } @media screen and (max-width: 767px) { .tabcont .rec_table { font-size: 0.775rem; } .tabcont .rec_table.scrolls { border-top: none; border-left: none; } .tabcont .rec_table.scrolls .in table { border-top: 1px solid #4CA237; border-left: 1px solid #4CA237; margin: 0; } } .tabcont .rec_table table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 2rem 0; } .tabcont .rec_table tr.center { text-align: center; } .tabcont .rec_table tr.center td { text-align: center; } .tabcont .rec_table th, .tabcont .rec_table td { border-bottom: 1px solid #4CA237; border-right: 1px solid #4CA237; padding: 1rem; } @media screen and (max-width: 767px) { .tabcont .rec_table th, .tabcont .rec_table td { padding: 0.3rem; line-height: 1.6; } } .tabcont .rec_table th.t01, .tabcont .rec_table td.t01 { width: 20%; text-align: center; } .tabcont .rec_table th.t03, .tabcont .rec_table td.t03 { width: 10; } .tabcont .rec_table th.t05, .tabcont .rec_table td.t05 { width: 80%; } .tabcont .rec_table th.t02, .tabcont .rec_table td.t02 { width: 25%; } .tabcont .rec_table th { text-align: center; background: #F2FAF5; color: #4CA237; } .tabcont .rec_table th.t03 { width: 15%; } .tabcont .rec_table th.th_center { text-align: center; vertical-align: middle; } .tabcont .rec_table td.td_center { text-align: center; vertical-align: middle; } .tabcont .rec_table.tr_th_center th { text-align: center; vertical-align: middle; } .tabcont .rec_table.tr_th_center td { text-align: center; vertical-align: middle; } @media screen and (max-width: 767px) { .tabcont .scroll_table { width: 100%; overflow: hidden; margin: 0 0 2rem 0; } .tabcont .scroll_table .in { overflow-x: scroll; } .tabcont .scroll_table .in table { width: 600px; } } .sp_chui { display: none; } @media screen and (max-width: 767px) { .sp_chui { display: block; font-size: 0.775rem; margin: 0 0 1rem 0; color: #333; } }