*,
::before,
::after {
box-sizing: border-box; background-repeat: no-repeat; } ::before,
::after {
text-decoration: inherit; vertical-align: inherit; } :where(:root) {
overflow-wrap: break-word; -moz-tab-size: 4; -o-tab-size: 4;
tab-size: 4; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
text-size-adjust: 100%; }  :where(body) {
margin: 0;
}    :where(hr) {
color: inherit; height: 0; }   :where(pre) {
font-family: monospace, monospace; font-size: 1em; overflow: auto; }  :where(abbr[title]) {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
} :where(b, strong) {
font-weight: bolder;
} :where(code, kbd, samp) {
font-family: monospace, monospace; font-size: 1em; } :where(small) {
font-size: 80%;
}  :where(audio, canvas, iframe, img, svg, video) {
vertical-align: middle;
} :where(iframe) {
border-style: none;
} :where(svg:not([fill])) {
fill: currentColor;
}  :where(table) {
border-collapse: collapse; border-color: currentColor; text-indent: 0; }  :where(button, input, select) {
margin: 0;
} :where(button, [type=button i], [type=reset i], [type=submit i]) {
-webkit-appearance: button;
} :where(fieldset) {
border: 1px solid #a0a0a0;
} :where(progress) {
vertical-align: baseline;
} :where(textarea) {
margin: 0; resize: vertical; } :where([type=search i]) {
-webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
} ::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
} ::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; }  :where(dialog) {
background-color: white;
border: solid;
color: black;
height: -moz-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: fit-content;
}
:where(dialog:not([open])) {
display: none;
} :where(details > summary:first-of-type) {
display: list-item;
}  :where([aria-busy=true i]) {
cursor: progress;
} :where([aria-disabled=true i], [disabled]) {
cursor: not-allowed;
} :where([aria-hidden=false i][hidden]) {
display: initial;
}
:where([aria-hidden=false i][hidden]:not(:focus)) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
:where(:root) {
line-height: 1;
overflow-wrap: break-word;
}
@media (prefers-reduced-motion: no-preference) {
:where(html:focus-within) {
scroll-behavior: smooth;
}
}
:where(body) {
font-family: sans-serif;
}
:where(h1, h2, h3, h4, h5, h6) {
margin: 0;
font: inherit;
}
:where(ul, ol) {
margin: 0;
padding-left: 0;
list-style: none;
}
:where(dl, dd) {
margin: 0;
}
:where(p) {
margin: 0;
}
:where(blockquote) {
margin: 0;
}
:where(hr) {
margin: 0;
border: none;
border-top: 1px solid currentColor;
}
:where(pre) {
margin: 0;
}
:where(a) {
color: inherit;
text-decoration: none;
text-underline-offset: 0.1375em;
}
:where(figure) {
max-width: 100%;
margin: 0;
}
:where(img, picture, svg, video) {
max-width: 100%;
height: auto;
}
:where(iframe){
max-width: 100%;
}
:where(table) {
width: 100%;
table-layout: fixed;
}
:where(tbody, thead) {
vertical-align: inherit;
}
:where(th) {
margin: 0;
text-align: inherit;
text-align: -webkit-match-parent;
}
:where(td) {
padding: 0;
}
:where(label) {
display: inline-block;
}
:where(button, input, optgroup, select, textarea) {
font: inherit;
line-height: inherit;
letter-spacing: inherit;
}
:where(button, [role=button], [type=button], [type=reset], [type=submit]):not(:disabled) {
cursor: pointer;
}
:root {
--icon-arrow-right: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2231%22%20height%3D%2225%22%20viewBox%3D%220%200%2031%2025%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_261%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20261%22%20transform%3D%22translate(-1365%20-1863)%22%3E%20%3Cg%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_1%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%201%22%20transform%3D%22translate(1371%201863)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%3E%20%3Ccircle%20cx%3D%2212.5%22%20cy%3D%2212.5%22%20r%3D%2212.5%22%20stroke%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%2212.5%22%20cy%3D%2212.5%22%20r%3D%2212%22%20fill%3D%22none%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_241%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20241%22%20transform%3D%22translate(-17%205)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_83%22%20data-name%3D%22%E3%83%91%E3%82%B9%2083%22%20d%3D%22M18.5%2C23.717H40.33L33.613%2C17%22%20transform%3D%22translate(1364%201848.822)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
--icon-arrow-right02: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22m11.8%208-5-5-1.5%201.5L8.8%208l-3.5%203.5L6.8%2013z%22%2F%3E%3C%2Fsvg%3E");
--icon-arrow-right03: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222.83%22%20height%3D%227.924%22%20viewBox%3D%220%200%2022.83%207.924%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_336%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20336%22%20transform%3D%22translate(-1365%20-1870.115)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_241%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20241%22%20transform%3D%22translate(1365.5%201870.822)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_83%22%20data-name%3D%22%E3%83%91%E3%82%B9%2083%22%20d%3D%22M18.5%2C23.717H40.33L33.613%2C17%22%20transform%3D%22translate(-18.5%20-17)%22%20fill%3D%22none%22%20stroke%3D%22%234ba635%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
--icon-arrow-right04: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222.83%22%20height%3D%227.924%22%20viewBox%3D%220%200%2022.83%207.924%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_241%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20241%22%20transform%3D%22translate(0.5%200.707)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_83%22%20data-name%3D%22%E3%83%91%E3%82%B9%2083%22%20d%3D%22M40.33%2C23.717H18.5L25.217%2C17%22%20transform%3D%22translate(-18.5%20-17)%22%20fill%3D%22none%22%20stroke%3D%22%234ba635%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
--icon-arrow-left: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M8%2016c4.42%200%208-3.58%208-8s-3.58-8-8-8-8%203.58-8%208%203.58%208%208%208zm0-1.2c-3.76%200-6.8-3.04-6.8-6.8S4.24%201.2%208%201.2s6.8%203.04%206.8%206.8A6.8%206.8%200%200%201%208%2014.8zm-1.22-3.77s-1.2-1.2-2.6-2.61a.61.61%200%200%201%200-.85c1.4-1.4%202.6-2.61%202.6-2.61a.602.602%200%200%201%20.85.85L6.04%207.39h5.36c.33.01.59.29.58.62-.01.32-.26.57-.58.58H6.04l1.58%201.58a.598.598%200%200%201-.42%201.02.58.58%200%200%201-.42-.16z%22%2F%3E%3C%2Fsvg%3E");
--icon-arrow-b-right: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M12.23%207.34c.37.37.37.96%200%201.33L6.6%2014.29c-.37.37-.96.37-1.33%200s-.37-.96%200-1.33L10.24%208%205.28%203.04c-.37-.37-.37-.96%200-1.33s.96-.37%201.33%200l5.62%205.63z%22%2F%3E%3C%2Fsvg%3E");
--icon-arrow-b-left: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M3.77%208.66a.936.936%200%200%201%200-1.33L9.4%201.71c.37-.37.96-.37%201.33%200s.37.96%200%201.33L5.76%208l4.96%204.96c.37.37.37.96%200%201.33s-.96.37-1.33%200L3.77%208.66z%22%2F%3E%3C%2Fsvg%3E");
--icon-arrow-b-up: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M7.34%203.77c.37-.37.96-.37%201.33%200l5.62%205.62c.37.37.37.96%200%201.33s-.96.37-1.33%200L8%205.76l-4.96%204.96c-.37.37-.96.37-1.33%200s-.37-.96%200-1.33l5.63-5.62z%22%2F%3E%3C%2Fsvg%3E");
--icon-arrow:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-miterlimit='10' d='M6 3.5l5 4.5-5 4.5'/%3e%3c/svg%3e");
--color-white: #fff;
--color-white-40: rgba(255, 255, 255, 0.4);
--color-black: #111111;
--color-black-b: #000000;
--color-gray: #EEEEEE;
--color-gray-light: #E1E1E1;
--color-gray-pale: #F5F5F5;
--color-gray-pale-b: #FAFAFA;
--color-green: #4BA635;
--color-green-40: #f8fcf7;
--color-orange: #F28D00;
--color-yellow: #FABF0A;
--font-sans: 'Noto Sans JP', sans-serif;
--font-sans-b: 'Raleway', sans-serif;;
--font-en: 'Roboto Condensed', sans-serif;
--transition-duration: 0.15s;
--transition-opacity: 0.65;
--z-index-c-loader: 1000;
--z-index-site-wrap-drawerBtn: 550;
--z-index-c-drawer: 500;
--z-index-site-wrap-sideNav: 150;
--z-index-site-header: 100;
--border-radius-small: 4px;
--border-radius: clamp(5px, 0.6060606061vw, 8px);
--border-radius-large: clamp(10px, 1.2121212121vw, 16px);
--box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
--text-shadow: 0 0 6px rgba(0, 0, 0, .7);
--content-width-medium: 86vw;
--content-width-large: 92vw;
--content-width-xlarge: 92vw;
--font-10: 10px;
--font-11: 11px;
--font-12: 11px;
--font-13: 12px;
--font-14: 13px;
--font-15: 13px;
--font-16: 14px;
--font-17: 14px;
--font-18: 15px;
--font-19: 16px;
--font-20: 16px;
--font-21: 17px;
--font-22: 18px;
--font-23: 18px;
--font-24: 19px;
--font-25: 19px;
--font-26: 20px;
--font-27: 21px;
--font-28: 21px;
--font-29: 22px;
--font-30: 23px;
--font-31: 23px;
--font-32: 24px;
--font-33: 24px;
--font-34: 25px;
--font-35: 26px;
--font-36: 26px;
--font-37: 27px;
--font-38: 28px;
--font-39: 28px;
--font-40: 29px;
--leading-xsmall: 1.4;
--leading-small: 1.6;
--leading-medium: 1.8;
}
@media (min-width: 768px) {
:root {
--content-width-medium: clamp(0px, 67.8787878788vw, 896px);
--content-width-large: clamp(0px, 81.3953488372vw, 1400px);
--content-width-xlarge: clamp(0px, 87.2093023256vw, 1500px);
}
}
@media (min-width: 960px) {
:root {
--font-10: 10px;
--font-11: 11px;
--font-12: 12px;
--font-13: 13px;
--font-14: 14px;
--font-15: 15px;
--font-16: 16px;
--font-17: 17px;
--font-18: 18px;
--font-19: 19px;
--font-20: 20px;
--font-21: 21px;
--font-22: 22px;
--font-23: 23px;
--font-24: 24px;
--font-25: 25px;
--font-26: 26px;
--font-27: 27px;
--font-28: 28px;
--font-29: 29px;
--font-30: 30px;
--font-31: 31px;
--font-32: 32px;
--font-33: 33px;
--font-34: 34px;
--font-35: 35px;
--font-36: 36px;
--font-37: 37px;
--font-38: 38px;
--font-39: 39px;
--font-40: 40px;
}
}
@media (min-width: 1200px) {
:root {
--font-10: calc(10px * 1.2);
--font-11: calc(11px * 1.2);
--font-12: calc(12px * 1.2);
--font-13: calc(13px * 1.2);
--font-14: calc(14px * 1.2);
--font-15: calc(15px * 1.18);
--font-16: calc(16px * 1.18);
--font-17: calc(17px * 1.18);
--font-18: calc(18px * 1.18);
--font-19: calc(19px * 1.18);
--font-20: calc(20px * 1.18);
--font-21: calc(21px * 1.18);
--font-22: calc(22px * 1.18);
--font-23: calc(23px * 1.18);
--font-24: calc(24px * 1.18);
--font-25: calc(25px * 1.18);
--font-26: calc(26px * 1.18);
--font-27: calc(27px * 1.18);
--font-28: calc(28px * 1.18);
--font-29: calc(29px * 1.18);
--font-30: calc(30px * 1.18);
--font-31: calc(31px * 1.18);
--font-32: calc(32px * 1.18);
--font-33: calc(33px * 1.18);
--font-34: calc(34px * 1.18);
--font-35: calc(35px * 1.18);
--font-36: calc(36px * 1.18);
--font-37: calc(37px * 1.18);
--font-38: calc(38px * 1.18);
--font-39: calc(39px * 1.18);
--font-40: calc(40px * 1.18);
}
}
._d-none {
display: none !important;
}
._d-block {
display: block !important;
}
._d-inline-block {
display: inline-block !important;
}
._d-inline {
display: inline !important;
}
._d-flex {
display: flex !important;
}
._d-inline-flex {
display: inline-flex !important;
}
@media (min-width: 560px) {
._d-sm-none {
display: none !important;
}
._d-sm-block {
display: block !important;
}
._d-sm-inline-block {
display: inline-block !important;
}
._d-sm-inline {
display: inline !important;
}
._d-sm-flex {
display: flex !important;
}
._d-sm-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 768px) {
._d-md-none {
display: none !important;
}
._d-md-block {
display: block !important;
}
._d-md-inline-block {
display: inline-block !important;
}
._d-md-inline {
display: inline !important;
}
._d-md-flex {
display: flex !important;
}
._d-md-inline-flex {
display: inline-flex !important;
}
}
@media (max-width: 767px) {
._sp-none {
display: none !important;
}
}
@media (min-width: 960px) {
._d-lg-none {
display: none !important;
}
._d-lg-block {
display: block !important;
}
._d-lg-inline-block {
display: inline-block !important;
}
._d-lg-inline {
display: inline !important;
}
._d-lg-flex {
display: flex !important;
}
._d-lg-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1200px) {
._d-xl-none {
display: none !important;
}
._d-xl-block {
display: block !important;
}
._d-xl-inline-block {
display: inline-block !important;
}
._d-xl-inline {
display: inline !important;
}
._d-xl-flex {
display: flex !important;
}
._d-xl-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1400px) {
._d-xxl-none {
display: none !important;
}
._d-xxl-block {
display: block !important;
}
._d-xxl-inline-block {
display: inline-block !important;
}
._d-xxl-inline {
display: inline !important;
}
._d-xxl-flex {
display: flex !important;
}
._d-xxl-inline-flex {
display: inline-flex !important;
}
}
body {
background: var(--color-white);
font-family: var(--font-sans);
font-feature-settings: "palt";
font-weight: 400;
letter-spacing: 0.05em;
color: var(--color-black);
}
a,
button,
[type=button],
[type=reset],
[type=submit] {
transition-property: opacity;
transition-duration: var(--transition-duration);
transition-timing-function: ease;
}
body:not(.-is-sp) a:hover,
body:not(.-is-sp) button:hover,
body:not(.-is-sp) [type=button]:hover,
body:not(.-is-sp) [type=reset]:hover,
body:not(.-is-sp) [type=submit]:hover {
opacity: var(--transition-opacity);
}
@media (max-width:767px) {
main{
padding: 70px 0 0;
}
} #splash{
position: fixed;
z-index: 99999;
width: 100%;
height: 100%;
background: var(--color-white);
text-align:center;
color: var(--color-orange);
}
#splash_text{
position: absolute;
top: 50%;
left: 50%;
z-index: 99999;
width: 100%;
transform: translate(-50%, -50%);
color: var(--color-orange);
}
#splash.is-active{
opacity: 0;
visibility: hidden;
}
#splash_text.is-active{
opacity: 1;
visibility: visible;
} .splashbg{
display: none;
}
body.appear .splashbg{
display:block;
animation-name:PageAnime;
animation-duration:1.2s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
content: "";
position:fixed;
z-index: 999;
width: 50%;
height: 100vh;
top: 0;
left: 0;
transform: translateX(-300%) skewX(-45deg);
background-color: #dfecdc;
}
@keyframes PageAnime{
0% {
transform-origin:left;
transform:translateX(-200%) skewX(-45deg);
}
100% {
transform-origin:left;
transform:translateX(500%) skewX(-45deg);
}
} #container{
opacity: 0;
}
body.appear #container{
animation-name:PageAnimeAppear;
animation-duration:1s;
animation-delay: 0.6s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes PageAnimeAppear{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} main.site-main{
margin-bottom: 90px;
} main.page_main{
margin-bottom: 80px;
} #g-nav{
position:fixed;
z-index: 999;
top:0;
width:350px;
right: -120%;
height: 100vh;
background: #92a0a0; 
transition: all 0.6s;
}
#g-nav.panelactive{
right: 0;
}
#g-nav.panelactive #g-nav-list{
position: fixed;
z-index: 999; 
width:350px;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width:767px) {
#g-nav{
width: 300px;
right : -120%;
}
#g-nav.panelactive #g-nav-list{
width: 300px;
}
}
#g-nav ul {
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#g-nav li{
list-style: none;
text-align: center;
}
#g-nav li a{
color: var(--color-white);
text-decoration: none;
padding:10px 0 0;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold; line-height: 2;
}@media (max-width:767px) {
#g-nav li a{
font-size: 14px;
}
}
.g_nav > .g_nav--container > .head_btn{
display: block;
}
@media (max-width:767px) {
.g_nav > .g_nav--container > .head_btn{
display: none;
}
}
.g_nav > .g_nav--container > .head_btn > .my_page {
position: fixed;
top: 0;
right: 211px;
z-index: 9999;
background: var(--color-green);
cursor: pointer;
}
.g_nav > .g_nav--container > .head_btn > .my_page > .action{
position: relative;
top:0;
color: var(--color-white);
height: 70px;
padding: 23px 29px;
display: inline-block;
width: auto;
}
.g_nav > .g_nav--container > .head_btn > .headContact{
position: fixed;
top: 0;
right: 70px;
z-index: 9999;
background: var(--color-orange);
cursor: pointer;
}
.g_nav > .g_nav--container > .head_btn > .headContact > .action{
color: var(--color-white);
height: 70px;
padding: 23px 21px;
display: inline-block;
width: auto;
}
.g_nav > .g_nav--container > .head_btn > .btn > .action:hover{
opacity: 1;
}
.g_nav > .g_nav--container > .head_btn > .btn > .action > span{
position: relative;
transition: all .6s;
}
.g_nav > .g_nav--container > .head_btn > .btn > .action:hover > span{
color: var(--color-green);
z-index: 3;
transition: all .6s;
}
.g_nav > .g_nav--container > .head_btn > .btn.headContact > .action:hover > span{
color: var(--color-orange);
}
.g_nav > .g_nav--container > .head_btn > .btn > .bgleft:before{
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: var(--color-white);
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
.g_nav > .g_nav--container > .head_btn > .btn > .bgleft:hover:before{
transform-origin:left top;
transform:scale(1, 1);
}
@media (min-width:768px) {
#header > .g_nav--container > .flx > .sp_log{
display: none !important;
}
}
@media (max-width:767px) {
#header > .g_nav--container > .flx{
display: block;
position: fixed;
display: -webkit-box !important;
display: -ms-flexbox !important;
background: #fff;
width: 100%;
height: 70px;
z-index: 100;
transition: all .4s;
}
#header > .g_nav--container > .flx.-clear{
background: transparent;
transition: all .4s;
}
#header > .g_nav--container > .flx > .sp_log{
display: block;
padding: clamp(22px, 2.0860495437vw, 16px) 0 0 1em;
}
#header > .g_nav--container > .flx > .sp_log > h1 > a > img{
display: block;
width: clamp(200px, 15.625vw, 300px);
}
} .fadeDown{
animation-name: fadeDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeDownAnime{
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .smooth{
animation-name: smoothAnime;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes smoothAnime{
from {
transform: translate3d(0, 5%, 0) skewY(0);
opacity:0;
}
to {
transform: translate3d(0, 0, 0) skewY(0);
opacity:1;
}
}
.fadeDownTrigger,
.smoothTrigger{
opacity: 0;
} .smooth_left{
animation-name: smoothAnime_left;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes smoothAnime_left{
from {
transform: translate3d(-15%, 0%, 0) skewY(0);
opacity:0;
}
to {
transform: translateX(0);
opacity:1;
}
}
.smoothTrigger_left{
opacity: 0;
} .smooth_right{
animation-name: smoothAnime_right;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes smoothAnime_right{
from {
transform: translate3d(15%, 0%, 0) skewY(0);
opacity:0;
}
to {
transform: translateX(0);
opacity:1;
}
}
.smoothTrigger_right{
opacity: 0;
}
#g-nav li:nth-of-type(1) {
animation-delay: 0.2s;
}
#g-nav li:nth-of-type(2) {
animation-delay: 0.3s;
}
#g-nav li:nth-of-type(3) {
animation-delay: 0.4s;
}
#g-nav li:nth-of-type(4) {
animation-delay: 0.5s;
}
#g-nav li:nth-of-type(5) {
animation-delay: .6s;
}
#g-nav li:nth-of-type(6) {
animation-delay: .7s;
}
#g-nav li:nth-of-type(7) {
animation-delay: .8s;
}
#g-nav li:nth-of-type(8) {
animation-delay: .9s;
}
.openbtn{
position: fixed;
top: 0;
right: 0;
z-index: 9999;
background:var(--color-white);
cursor: pointer;
width: 70px;
height:70px;
}
.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 30%;
height: 2px;
border-radius: 5px;
background: var(--color-black-b);
width: 45%;
}
.openbtn span:nth-of-type(1) {
top:15px;	
}
.openbtn span:nth-of-type(2) {
top:21px;
}
.openbtn span:nth-of-type(3) {
top:28px;
}
.openbtn span:nth-of-type(3)::after {
content:"Menu";
position: absolute;
top:15px;
left:-4px;
color: var(--color-black-b);
font-size: 13px;
text-transform: uppercase;
width: 44px;
}
.openbtn.active span.line:nth-of-type(1) {
top: 20px;
left: 27px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn.active span.line:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span.line:nth-of-type(3){
top: 32px;
left: 27px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
.openbtn.active span.line:nth-of-type(3)::after {
content:"Close";
transform: translateY(0) rotate(-45deg);
top:10px;
left:5px;
width: 50px;
}
@media (max-width:767px) {
.openbtn{
background:var(--color-green);
}
.openbtn span{
background: var(--color-white);
}
.openbtn span:nth-of-type(3)::after {
color: var(--color-white);
}
} .site-main > #top_wrap > .home_intro {
position: relative;
}
.site-main > #top_wrap > .home_intro > .kv_tlt{
position: absolute;
top: 15%;
right: 15%;
writing-mode: vertical-rl;
font-size: var(--font-30);
line-height: 1.8;
letter-spacing: 10px;
text-decoration: underline;
color: #fff;
text-underline-offset: 8px;
text-decoration-thickness: 1px;
text-shadow: 1px 2px 3px #808080;
}
.site-main > #top_wrap > .home_intro > picture > .kv_pc{
height: 90vh;
width: 100%;
object-fit: cover;
}
@media (max-width:1170px) {
.site-main > #top_wrap > .home_intro > .kv_tlt{
font-size: 24px;
top: 18%;
}
}
@media (max-width:900px) {
.site-main > #top_wrap > .home_intro > .kv_tlt{
font-size: 20px;
top: 20%;
}
}
@media (max-width:767px) {
.site-main > #top_wrap > .home_intro > .kv_tlt{
top: 12%;
right: 42%;
padding: 17px 20px 17px 20px;
background-color: #3E3E3E40;
}
.site-main > #top_wrap > .home_intro > picture > .kv_pc{
height: 60vh;
object-position: 35% 50%;
width: 100vw;
object-fit: cover;
}
}
@media (max-width:767px) {
.site-main > #top_wrap > .home_intro > picture > .kv_pc{
height: 50vh;
object-position: 35% 50%;
width: 100vw;
object-fit: cover;
}
}
@media (max-width:560px) {
.site-main > #top_wrap > .home_intro > picture > .kv_pc{
height: 50vh;
object-position: 30% 72%;
width: 100vw;
object-fit: cover;
}
.site-main > #top_wrap > .home_intro > .kv_tlt{
right: 40%;
}
}
@media (max-width:460px){
.site-main > #top_wrap > .home_intro > .kv_tlt{
right: 35%;
font-size: 16px;
top: 10%;
}
} .head{
position: relative;
}
.head > .top{
position: absolute;
top: -45px;
left: 6%;
max-width: 90%;
width: 100%;
margin: 0 auto;
background: var(--color-white);
}
.head > .top > .flx{
display: flex;
justify-content: center;
align-items: center;
padding: 20px .5em;
box-shadow: 0px 0px 50px -10px #000000;
}
.head > .top > .flx > .head_logo{
margin-right: clamp(0px, 4.6511627907vw, 80px);
}
.head > .top > .flx > .head_logo > h1 > a > img{
width: clamp(120px, 17.7151162791vw, 304.7px);
}
.head > .top > .flx > .head_menu > ul{
display: flex;
}
.head > .top > .flx > .head_menu > ul > li + li{
margin-left: clamp(0px, 2.0348837209vw, 35px);
}
.head > .top > .flx > .head_menu > ul > li  > a{
font-size: var(--font-16);
}
@media (max-width:960px) {
.head > .top{
display: none;
}
} #hoge{
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
}
#top_wrap{
position: relative;
z-index: 1; } .top_about{
max-width: var(--content-width-large);
margin: clamp(100px, 10.4651162791vw, 180px) auto;
position: relative;
}
@media (max-width:960px) {
.top_about{
margin-top: 50px;
}
}
@media (max-width:767px) {
.top_about{
margin-top: 30px;
}
}
.top_about > .scrolldown{
position:absolute;
top: 70px;
right: 0;
}
.top_about > .scrolldown > span{
position: absolute;
left: -4px;
bottom: -60px;
color: var(--color-green);
font-size: 0.7rem;
letter-spacing: 0.05em;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
margin-left: 10px;
}
.top_about > .scrolldown::before{
content:"";
position: absolute;
bottom: 10px;
left: 0;
width:1px;
height: 60px;
background: var(--color-green);
margin-left: 10px;
}
.top_about > .layer{
position: absolute;
bottom: -15%;
left: -3%;
z-index: -1;
}
.top_about > .wrap{
display: flex;
align-items: flex-end;
position: relative;
}
.top_about > .wrap > .img{
position: relative;
margin-left: clamp(0px, 3.488372093vw, 60px);
}
.top_about > .wrap > .img > .item{
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
@media (max-width:900px) {
.top_about > .wrap{
flex-direction: column;
}
.top_about > .wrap > .img{
margin-left: 0;
}
.top_about > .layer{
bottom: 0;
height: 100%;
}
}
.top_about > .wrap > .content{
width: 470px;
max-width: 100%;
position: absolute;
bottom: -30px;
right: 0;
background: var(--color-white);
padding: 50px 75px 120px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
@media (max-width:1230px) {
.top_about > .wrap > .content{
bottom: -135px;
}
}
@media (max-width:900px) {
.top_about > .wrap > .content{
position: inherit;
bottom: 0;
padding: 50px 1em 100px;
width: 100%;
}
}
.top_about > .wrap > .content > .txt{
font-size: 63px;
color: var(--color-gray);
font-weight: bold;
font-family: var(--font-en);
text-align: center;
}
.top_about > .wrap > .content > .tlt{
font-size: 18px;
color: var(--color-green);
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.top_about > .wrap > .content > .tlt::after{
content: "";
display: inline-block;
position: absolute;
top: 65%;
width: 20px;
border: 2px solid var(--color-green);
}
.top_about > .wrap > .content > .btn{
display: inline-block;
text-align: center;
position: absolute;
bottom: 0;
right: 0;
}
.top_about > .wrap > .content > .btn > .action{
position: relative;
background: var(--color-green);
color: var(--color-white);
padding: 26px 107px;
font-size: 14px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
outline: none;
transition: ease .2s;
font-weight: 500;
}
.top_about > .wrap > .content > .btn > .action:hover{
opacity: 1;
}
.top_about > .wrap > .content > .btn > .action > span{
position: relative;
transition: all .6s;
}
.top_about > .wrap > .content > .btn > .action:hover > span{
color: var(--color-green);
z-index: 3;
transition: all .6s;
}
.top_about > .wrap > .content > .btn > .action::after{
content: "";
position: absolute;
top: 50%;
right: 12%;
width: 2em;
aspect-ratio: 1/1;
background: var(--color-white);
-webkit-mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
transform: translateY(-50%);
transition: all .6s;
}
.top_about > .wrap > .content > .btn > .action:hover:after{
background: var(--color-green);
z-index: 3;
}
.top_about > .wrap > .content > .btn > .bgleft:before{
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: var(--color-white);
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
.top_about > .wrap > .content > .btn > .bgleft:hover:before{
transform-origin:left top;
transform:scale(1, 1);
} .top_telomere{
max-width: var(--content-width-large);
margin: 180px auto;
padding-top: 50px;
position: relative;
}
@media (max-width:767px) {
.top_telomere{
margin: 100px auto;
padding-top: 0;
}
}
.top_telomere > .layer{
position: absolute;
bottom: -15%;
right: -3%;
z-index: -1;
}
.top_telomere > .wrap{
display: flex;
align-items: flex-end;
flex-direction: row-reverse;
position: relative;
}
.top_telomere > .wrap > .img{
position: relative;
margin-right: clamp(0px, 3.488372093vw, 60px);
}
.top_telomere > .wrap > .img > .item{
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
@media (max-width:900px) {
.top_telomere > .wrap{
flex-direction: column;
align-items:flex-start;
}
.top_telomere > .wrap > .img{
margin-right: 0;
}
.top_telomere > .layer{
bottom: 0;
height: 100%;
}
}
.top_telomere > .wrap > .content{
width: 470px;
max-width: 100%;
position: absolute;
bottom: -30px;
left: 0;
background: var(--color-white);
padding: 50px 75px 65px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
@media (max-width:1230px) {
.top_telomere > .wrap > .content{
bottom: -135px;
}
}
@media (max-width:900px) {
.top_telomere > .wrap > .content{
position: inherit;
bottom: 0;
padding: 50px 1em 65px;
width: 100%;
}
}
.top_telomere > .wrap > .content > .txt{
font-size: 63px;
color: var(--color-gray);
font-weight: bold;
font-family: var(--font-en);
text-align: center;
}
.top_telomere > .wrap > .content > .tlt{
position: relative;
font-size: 18px;
color: var(--color-green);
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 50px;
}
.top_telomere > .wrap > .content > .txt02{
font-size: var(--font-16);
line-height: 1.8;
letter-spacing: 2px;
}
.top_telomere > .wrap > .content > .tlt::after{
content: "";
display: inline-block;
position: absolute;
top: 40px;
width: 20px;
border: 2px solid var(--color-green);
}
.top_telomere > .wrap > .content > .btn{
display: inline-block;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
@media (max-width:900px) {
.top_telomere > .wrap > .content > .btn{
right: 0;
left: initial;
}
}
.top_telomere > .wrap > .content > .btn > .action{
position: relative;
background: var(--color-green);
color: var(--color-white);
padding: 26px 100px;
font-size: 14px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
font-weight: 500;
}
.top_telomere > .wrap > .content > .btn > .action:hover{
opacity: 1;
}
.top_telomere > .wrap > .content > .btn > .action > span{
position: relative;
transition: all .6s;
}
.top_telomere > .wrap > .content > .btn > .action:hover > span{
color: var(--color-green);
z-index: 3;
transition: all .6s;
}
.top_telomere > .wrap > .content > .btn > .action::after{
content: "";
position: absolute;
top: 50%;
right: 12%;
width: 2em;
aspect-ratio: 1/1;
background: var(--color-white);
-webkit-mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
transform: translateY(-50%);
transition: all .6s;
}
.top_telomere > .wrap > .content > .btn > .action:hover:after{
background: var(--color-green);
z-index: 3;
}
.top_telomere > .wrap > .content > .btn > .bgleft:before{
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: var(--color-white);
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
.top_telomere > .wrap > .content > .btn > .bgleft:hover:before{
transform-origin:left top;
transform:scale(1, 1);
} .top_service{
max-width: var(--content-width-large);
margin: 220px auto;
padding-top: 50px;
position: relative;
}
@media (max-width:767px) {
.top_service{
margin: 50px auto;
}
}
.top_service > .wrap{
background: var(--color-gray-pale-b);
padding: 16px 1em 90px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.top_service > .wrap > .tlt > h2{
position: relative;
font-size: 18px;
font-weight: bold;
color: var(--color-green);
text-align: center;
}
.top_service > .wrap > .tlt > h2::before{
content: attr(data-text);
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-en);
font-weight: bold;
font-size: 63px;
color: var(--color-gray);
}
.top_service > .wrap > .tlt > h2::after{
content: "";
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
border: 2px solid var(--color-green);
width: 22px;
}
.top_service > .wrap > .flx{
display: flex;
justify-content: center;
gap: 60px;
margin-top: 50px;
}
@media (max-width:767px) {
.top_service > .wrap > .flx{
gap: 10px;
}
}
@media (max-width:570px) {
.top_service > .wrap > .flx{
flex-direction: column;
gap: 30px;
}
}
.top_service > .wrap > .flx > .item{
text-align: center;
width: 300px;
max-width: 100%;
}
@media (max-width:570px) {
.top_service > .wrap > .flx > .item{
margin: 0 auto;
}
}
.top_service > .wrap > .flx > .item > .action{
position: relative;
display: block;
padding: 30px 0 86px;
border: 1px solid var(--color-green);
background: var(--color-white);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
outline: none;
transition: ease .2s;
}
.top_service > .wrap > .flx > .item.-item02 > .action{
padding: 46px 0 72px;
}
@media (max-width:767px) {
.top_service > .wrap > .flx > .item.-item02 > .action{
padding: 46px 0 76px;
}
}
.top_service > .wrap > .flx > .item > .action::after{
content: "";
position: absolute;
bottom: 10%;
left: 50%;
width: 2em;
aspect-ratio: 1/1;
background: var(--color-green);
color: var(--color-white);
-webkit-mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
transform: translateX(-50%);
transition: all .6s;
}
.top_service > .wrap > .flx > .item > .action:hover{
opacity: 1;
}
.top_service > .wrap > .flx > .item > .action:hover::after{
background: var(--color-white);
z-index: 3;
}
.top_service > .wrap > .flx > .item > .action > span{
position: relative;
transition: all .6s;
}
.top_service > .wrap > .flx > .item > .action:hover > span{
color: var(--color-white);
z-index: 3;
transition: all .6s;
}
.top_service > .wrap > .flx > .item > .bgleft:before{
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: var(--color-green);
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
.top_service > .wrap > .flx > .item > .bgleft:hover::before{
transform-origin:left top;
transform:scale(1, 1);
}
.top_service > .wrap > .flx > .item > .action > span > .txt{
margin-top: 30px;
line-height: 2;
}
.top_service > .wrap > .flx > .item.-item02 > .action > span > .txt{
margin-top: 18px;
}
@media (max-width:767px) {
.top_service > .wrap > .flx > .item > .action > span > .txt{
font-size: var(--font-16);
}
} #base {
width: 118px;
transition: all 0.4s ease 0s;
}
#service_icon path {
fill-opacity: 0;
transition: fill-opacity .5s;
fill: var(--color-green);
stroke: #000;
}
.top_service > .wrap > .flx > .item > .action:hover > span > #base > #service_icon > path{
stroke: var(--color-white); 
transition: all 0.4s ease 0s;
}
.item_service > .wrap > .flx > .item > .action:hover > span > #base > #service_icon > path{
stroke: var(--color-white); 
transition: all 0.4s ease 0s;
}
#service_icon02 path {
fill-opacity: 0;
transition: fill-opacity .5s;
fill: none;
stroke: #000;
}
.top_service > .wrap > .flx > .item > .action:hover > span > #base > #service_icon02 > path{
stroke: var(--color-white); 
transition: all 0.4s ease 0s;
}
.item_service > .wrap > .flx > .item > .action:hover > span > #base > #service_icon02 > path{
stroke: var(--color-white); 
transition: all 0.4s ease 0s;
}
#service_icon03 path {
fill-opacity: 0;
transition: fill-opacity .5s;
fill: none;
stroke: #000;
}
.item_service > .wrap > .flx > .item > .action:hover > span > #base > #service_icon03 > path{
stroke: var(--color-white); 
transition: all 0.4s ease 0s;
} .top_news{
max-width: var(--content-width-large);
margin: 180px auto;
padding-top: 50px;
position: relative;
}
@media (max-width:767px) {
.top_news{
margin: 50px auto;
}
}
.top_news > .layer{
position: absolute;
bottom: 10%;
left: -10%;
z-index: -1;
}
@media (max-width:560px) {
.top_news > .layer{
bottom: 20%;
}
}
.top_news > .wrap{
background: var(--color-gray-pale-b);
padding: 16px 1em 95px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.top_news > .wrap > .tlt > h2{
position: relative;
font-size: 18px;
font-weight: bold;
color: var(--color-green);
text-align: center;
}
.top_news > .wrap > .tlt > h2::before{
content: attr(data-text);
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-en);
font-weight: bold;
font-size: 63px;
color: var(--color-gray);
}
.top_news > .wrap > .tlt > h2::after{
content: "";
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
border: 2px solid var(--color-green);
width: 22px;
}
.top_news > .wrap > .news_body{
flex-direction: column;
display: flex;
align-items: center;
}
.top_news > .wrap > .news_body > .archiveList{
width: 860px;
max-width: 100%;
margin-top: 50px;
}
.top_news > .wrap > .news_body > .archiveList > .item{
border-bottom: 1px solid var(--color-gray-light);
}
.top_news > .wrap > .news_body > .archiveList > .item > .article{
display: flex;
align-items: center;
flex-direction: row;
gap: 0.5em 2em;
padding: 1.125em 0;
}
@media (max-width:560px) {
.top_news > .wrap > .news_body > .archiveList > .item > .article{
flex-direction: column;
align-items: flex-start;
}
}
.top_news > .wrap > .news_body > .archiveList > .item > .article > .date{
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 1em;
letter-spacing: 0;
}
.top_news > .wrap > .news_body > .archiveList > .item > .article > .date > .term{
min-width: 7em;
padding: 0.5em clamp(0px, 2.6041666667vw, 50px);
border: 1px solid var(--color-green);
background: var(--color-green);
color: var(--color-white);
font-size: var(--font-12);
text-align: center;
}
.top_news > .wrap > .news_body > .archiveList > .item > .article > .title{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.top_news > .wrap > .btn{
display: inline-block;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.top_news > .wrap > .btn > .action{
position: relative;
background: var(--color-green);
color: var(--color-white);
padding: 26px 100px;
font-size: 14px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
font-weight: 500;
}
@media (max-width:627px) {
.top_news > .wrap > .btn{
width: 90%;
bottom: -5%;
}
.top_news > .wrap > .btn > .action{
display: block;
width: 90%;
margin: 0 auto;
padding: 26px 90px;
}
}
.top_news > .wrap > .btn > .action:hover{
opacity: 1;
}
.top_news > .wrap > .btn > .action > span{
position: relative;
transition: all .6s;
}
.top_news > .wrap > .btn > .action:hover > span{
color: var(--color-green);
z-index: 3;
transition: all .6s;
}
.top_news > .wrap > .btn > .action::after{
content: "";
position: absolute;
top: 50%;
right: 12%;
width: 2em;
aspect-ratio: 1/1;
background: var(--color-white);
-webkit-mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
transform: translateY(-50%);
transition: all .6s;
}
.top_news > .wrap > .btn > .action:hover::after{
background: var(--color-green);
z-index: 3;
}
.top_news > .wrap > .btn > .bgleft:before{
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: var(--color-white);
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
.top_news > .wrap > .btn > .bgleft:hover::before{
transform-origin:left top;
transform:scale(1, 1);
} .noContent {
margin-top: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.noContent > .text {
text-align: center;
}
.noContent {
font-size: var(--font-15);
line-height: var(--leading-medium);
} .scrolldown_right{
position:absolute;
top: 70px;
right: -5%;
}
@media (max-width:767px) {
.scrolldown_right{
right: 0;
}
}
.scrolldown_right > span{
position: absolute;
left: -4px;
bottom: -60px;
color: var(--color-green);
font-size: 0.7rem;
letter-spacing: 0.05em;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
margin-left: 10px;
}
.scrolldown_right::before{
content:"";
position: absolute;
bottom: 10px;
left: 0;
width:1px;
height: 60px;
background: var(--color-green);
margin-left: 10px;
}
.scrolldown_left{
position:absolute;
top: 120px;
left: -5%;
}
@media (max-width:767px) {
.scrolldown_left{
left: -10px;
}
.scrolldown_left.-telomere{
top: 70px;
left: -10px;
}
}
.scrolldown_left > span{
position: absolute;
left: -4px;
bottom: -60px;
color: var(--color-green);
font-size: 0.7rem;
letter-spacing: 0.05em;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
margin-right: 10px;
}
.scrolldown_left::before{
content:"";
position: absolute;
bottom: 10px;
left: 0;
width:1px;
height: 60px;
background: var(--color-green);
margin-right: 10px;
} footer > .footer{
background: #EFEFEF;
position: relative;
}
footer > .footer > .content > .brand{
text-align: center;
padding: 30px 1em 0;
}
footer > .footer > .menu > .nav{
display: flex;
justify-content: center;
gap: clamp(90px, 7.8125vw, 150px);
margin-top: 40px;
padding: 0 0 90px;
}
@media (max-width:767px) {
footer > .footer > .menu > .nav{
padding: 0 1em 70px;
}
}
@media (max-width:560px) {
footer > .footer > .content > .brand{ }
footer > .footer > .content > .brand > a > img{
width: 70%;
}
footer > .footer > .menu > .nav{
flex-direction: column;
gap: 0;
margin-left: 2em;
}
}
footer > .footer > .menu > .nav > .item > .list{
position: relative;
}
footer > .footer > .menu > .nav > .item > .list > .action{
color: #3E3E3E;
font-size: var(--font-13);
font-weight: 500;
line-height: 2.2;
transition: all .4s;
}
@media (max-width:767px) {
footer > .footer > .menu > .nav > .item > .list > .action{
line-height: 2.7;
}
}
@media (max-width:560px) {
footer > .footer > .menu > .nav > .item > .list > .action{
font-size: 16px;
}
}
footer > .footer > .menu > .nav > .item > .list > .action:hover{
opacity: 1;
color: var(--color-orange);
}
footer > .footer > .menu > .nav > .item > .list > .action::before{
content: "ー";
position: absolute;
color: #3E3E3E;
top: 0;
left: -35px;
transition: all .4s;
}
@media (max-width:767px) {
footer > .footer > .menu > .nav > .item > .list > .action::before{
left: -25px;
}
}
footer > .footer > .menu > .nav > .item > .list > .action:hover:before{
left: -30px;
color: var(--color-orange);
}
footer > .copy{
background: var(--color-black);
color: var(--color-white);
text-align: center;
padding: 16px 0; }
@media (max-width:767px) {
footer > .copy{
margin-bottom: 4em;
}
} #page-top{
margin: 0 auto 150px auto;
display: block;
width: 30px;
height: 30px;
border: 2px solid;
border-radius: 2px;
border-color: #999 #999 transparent transparent;
transform: rotate(-45deg);
cursor: pointer;
} .wave{
position: relative;
}
#waveCanvas{
position: absolute;
bottom: -5px;
left:0;
width: 100%;
z-index: -1;
} .sp_footer{
display: none;
}
@media (max-width:767px) {
.sp_footer{
display: block;
position: fixed;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 72px;
z-index: 100000;
align-items: flex-end;
}
.sp_footer-contact {
background-color: var(--color-orange);
width: 50%;
padding: 26px 0;
color: #fff;
text-align: center;
}
.sp_footer-contact > a {
color: #fff;
font-size: var(--font-20);
font-weight: bold;
position: relative;
padding-left: 40px;
}
.sp_footer-contact > a > img {
position: absolute;
width: 30px;
height: auto;
left: 0;
top: 2px;
}
.sp_footer-tel {
background: var(--color-green);
width: 50%;
padding: 26px 0;
color: #fff;
text-align: center;
}
.sp_footer-tel > a {
color: #fff;
font-size: var(--font-20);
font-weight: bold;
position: relative; }
.sp_footer-tel > a > img {
position: absolute;
width: 20px;
height: auto;
left: 5px;
top: 2px;
}
} .page-container > .title { position: relative;
}
.page-container > .title > img{
height: clamp(300px, 20.3488372093vw, 350px);
width: 100%;
object-fit: cover;
}
.page-container > .title > .media{
height: 100%;
margin: 0;
padding-left: clamp(140px, 16.6666666667vw, 320px);
background: var(--color-green);
}
.page-container > .title > .media > .img{
width: 100%;
max-height: 100%;
}
.page-container > .title > .media > .img > img{
height: 462px;
object-fit: cover;
}
.page-container > .title > .media > .img > img.minH{
height: 300px;
}
@media (max-width:767px) {
.page-container > .title > .media > .img > img{
height: 300px;
}
.page-container > .title > .media > .img > img.minH{
height: 200px;
}
}
.page-container > .title > .content{
position: absolute;
top: 25%;
left: 10%;
}
@media (max-width:960px) {
.page-container > .title > .content{
top: 33%;
left: 15%;
}
}
.page-container > .title > .content > .heading{
color: var(--color-white);
font-size: var(--font-18);
font-weight: bold;
}
.page-container > .title > .content > .heading.-typeA{
display: flex;
flex-direction: column;
}
.page-container > .title > .content > .heading.-typeA::before{
content: attr(data-text);
font-weight: bold;
font-size: 63px;
font-family: var(--font-en);
line-height: 1.5;
color: var(--color-white);
}
@media (max-width:767px) {
.page-container > .title > .content > .heading.-typeA::before{
font-size: 50px;
line-height: 1;
}
}
.page-container > .breadcrumb {
max-width: var(--content-width-xlarge);
margin: 0 auto;
padding-top: 70px
}
@media (max-width:960px) {
.page-container > .breadcrumb {
padding-top: 50px;
}
}
.page-container > .body {
padding: 60px 0 0;
}
@media (max-width:767px) {
.page-container > .body{
padding: 30px 0 0;
}
}
.page-container > .body > .archive_bg {
position: relative;
}
.archive-container {
max-width: var(--content-width-large);
margin: 0 auto;
background: var(--color-white);
padding: 60px 40px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.archive-container > .archive-category {
margin-bottom: clamp(25px, 2.9411764706vw, 40px);
}
.archive-container > .news_body{
flex-direction: column;
display: flex;
align-items: center;
}
.archive-container > .news_body > .archiveList{
width: 860px;
max-width: 100%;
margin-top: clamp(25px, 2.6041666667vw, 50px);
}
.archive-container > .news_body > .archiveList > .item{
border-bottom: 1px solid var(--color-gray-light);
}
.archive-container > .news_body > .archiveList > .item:first-of-type{
border-top: 1px solid var(--color-gray-light);
}
.archive-container > .news_body > .archiveList > .item > .article{
display: flex;
align-items: center;
flex-direction: row;
gap: 0.5em 2em;
padding: 2em 0;
}
@media (max-width:560px) {
.archive-container > .news_body > .archiveList > .item > .article{
flex-direction: column;
align-items: flex-start;
}
}
.archive-container > .news_body > .archiveList > .item > .article > .date{
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 1em;
letter-spacing: 0;
}
.archive-container > .news_body > .archiveList > .item > .article > .date > .term{
min-width: 7em;
padding: 0.5em clamp(0px, 2.6041666667vw, 50px);
border: 1px solid var(--color-green);
background: var(--color-green);
color: var(--color-white);
font-size: var(--font-12);
text-align: center;
}
.archive-container > .news_body > .archiveList > .item > .article > .title{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.archive-container > .news_body > .layer{
width: 100%;
height: 404px;
max-height: 100%;
background: var(--color-green-40);
position: absolute;
bottom: -10%;
left: 0;
z-index: -1;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.archive-container > .pagination {
margin-top: clamp(47px, 5.5147058824vw, 75px);
text-align: center;
}
.archive-container > .pagination > .wp-pagenavi > .current{
border-bottom: 1px solid var(--color-green);
color: var(--color-green);
padding: 5px 8px;
margin-right: 5px;
}
.archive-container > .pagination > .wp-pagenavi > .page{
color: var(--color-green);
padding: 5px 8px;
margin-right: 5px;
}
.archive-container > .pagination > .wp-pagenavi > .nextpostslink,
.archive-container > .pagination > .wp-pagenavi > .previouspostslink{
color: var(--color-green);
padding: 5px 8px;
margin-right: 5px;
}
.archive-category {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2em;
font-size: var(--font-13);
line-height: 1.25;
}
@media (max-width:767px) {
.archive-category{
gap: 1em;
}
}
.archive-category > li > a {
display: block;
padding: 0.5em 3.5em 0.5em 3em;
border: 2px solid var(--color-green);
color: var(--color-green);
position: relative;
}
.archive-category > li > a::after{
content: "";
position: absolute;
bottom: 20%;
right: 0;
width: 1.5em;
aspect-ratio: 1/1;
background: var(--color-green);
-webkit-mask: var(--icon-arrow-right03) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-right03) no-repeat 50% 50%/contain;
transform: translateX(-50%);
transition: all .4s;
}
.archive-category > li > a:hover{
opacity: 1;
}
.archive-category > li > a:hover:after{
right: -5px;
transition: all .4s;
}
.archive-category > li > a.-current {
background: var(--color-green);
color: var(--color-white);
}
.archive-category > li > a.-current::after{
content: "";
position: absolute;
bottom: 20%;
right: 0;
width: 1.5em;
aspect-ratio: 1/1;
background: var(--color-white);
-webkit-mask: var(--icon-arrow-right03) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-right03) no-repeat 50% 50%/contain;
transform: translateX(-50%);
transition: all .4s;
}
.archive-category > li > a.-current:hover{
opacity: 1;
}
.archive-category > li > a.-current:hover:after{
right: -5px;
transition: all .4s;
}
@media (max-width:767px) { .archive-category > li > a {
padding: 1em 15px;
}
.archive-category > li > a::after,
.archive-category > li > a.-current::after{
display: none;
}
}
.single-container {
max-width: var(--content-width-large);
margin: 0 auto;
background: var(--color-white);
padding: clamp(50px, 6.25vw, 120px) 0;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
@media (max-width:767px) {
.single-container{
padding: clamp(50px, 6.25vw, 120px) 1em clamp(50px, 6.25vw, 120px);
}
}
.single-article {
padding: 0 clamp(63px, 7.3529411765vw, 100px) 0; color: var(--color-black);
}
@media (max-width: 768px) {
.single-article {
padding: 0;
}
}
.single-container > .layer{
width: 100%;
height: 404px;
max-height: 100%;
background: var(--color-green-40);
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.single-article > .single-header {
padding-bottom: clamp(16px, 1.8382352941vw, 25px);
}
.single-article > .single-header > .heading {
font: 700 var(--font-27)/1.5 var(--font-sans-b);
font-size: 27px;
text-align: justify;
word-break: break-all;
position: relative;
}
.single-article > .single-header > .heading::after{
content: "";
position: absolute;
bottom: -20px;
left: 0;
border-bottom: 2px solid var(--color-green);
width: 20%;
}
.single-article > .single-header > .single-headerData {
margin-bottom: 20px;
}
.single-article > .body {
margin-top: clamp(38px, 4.4117647059vw, 60px);
}
.single-article > .single-footer {
margin-top: clamp(44px, 5.1470588235vw, 70px);
}
.page-container > .body > .archive_bg > .c-pager {
max-width: var(--content-width-large);
margin: clamp(25px, 4.4791666667vw, 86px) auto;
}
.single-headerData {
display: flex;
flex-wrap: wrap;
font-size: 16px;
line-height: 1.25;
align-items: center;
gap: 2em;
letter-spacing: 0;
} .single-headerCategory {
display: flex;
flex-wrap: wrap;
}
.single-headerData > .term{
min-width: 7em;
padding: .4em 4em;
border: 1px solid var(--color-green);
background: var(--color-green);
color: var(--color-white);
font-size: var(--font-12);
text-align: center;
}
.single-headerCategory > li:not(:last-child)::after {
margin: 0 0.25em 0 0.125em;
content: ",";
}
.single-footerShare {
padding: clamp(19px, 2.2058823529vw, 30px);
background: var(--color-green-40);
text-align: center;
}
.single-footerShare > .heading {
margin-bottom: 0.75em;
font-weight: 700;
font-size: var(--font-15);
}
.c-pager {
--c-pager-gap: 2em;
--c-pager-font-weight: 500;
--c-pager-font-size: var(--font-14);
--c-pager-font-family: var(--font-sans);
--c-pager-line-height: 1.5;
--c-pager-color: var(--color-green);
--c-pager-a-text-decoration: underline;
}
.c-pager {
display: flex;
justify-content: center;
align-items: center;
gap: var(--c-pager-gap);
line-height: var(--c-pager-line-height);
font-weight: var(--c-pager-font-weight);
font-size: var(--c-pager-font-size);
font-family: var(--c-pager-font-family);
color: var(--c-pager-color);
}
.c-pager > .prev,
.c-pager > .next {
flex: 1 1 0%;
}
.c-pager > .next {
text-align: right;
}
.c-pager > .back {
flex: 0 0 auto;
}
.c-pager > .prev a,
.c-pager > .next a {
display: inline-flex;
align-items: center;
-webkit-text-decoration: var(--c-pager-a-text-decoration);
text-decoration: var(--c-pager-a-text-decoration);
text-underline-offset: 5px;
}
.c-pager > .prev a::before {
flex: 0 0 auto;
}
.c-pager > .back a {
text-align: center;
}
.c-pager > .next a {
text-align: right;
}
.c-pager > .next a::after {
flex: 0 0 auto;
}
.c-pager .prev > a,
.c-pager .next > a {
gap: 0.5em;
}
.c-pager .prev > a::before {
content: "";
height: 7.32px;
width: 23.23px;
background: currentColor;
-webkit-mask: var(--icon-arrow-right04) no-repeat center/cover;
mask: var(--icon-arrow-right04) no-repeat center/cover;
}
.c-pager .next > a::after{
content: "";
height: 7.32px;
width: 23.23px;
background: currentColor;
-webkit-mask: var(--icon-arrow-right03) no-repeat center/cover;
mask: var(--icon-arrow-right03) no-repeat center/cover;
} .archive_btn{
height: 45px;
max-height: 100%;
width: 100%;
}
@media (max-width:560px) {
.archive_btn{
height: 60px;
}
}
.archive_btn > .btn{
display: inline-block;
position: absolute;
text-align: center;
width: 100%;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.archive_btn > .btn > .action{
position: relative;
background: var(--color-green);
color: var(--color-white);
padding: 26px 107px;
font-size: 14px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
outline: none;
transition: ease .2s;
font-weight: 500;
}
.archive_btn > .btn > .action:hover{
opacity: 1;
}
.archive_btn > .btn > .action > span{
position: relative;
transition: all .6s;
}
.archive_btn > .btn > .action:hover > span{
color: var(--color-green);
z-index: 3;
transition: all .6s;
}
.archive_btn > .btn > .action::after{
content: "";
position: absolute;
top: 50%;
right: 12%;
width: 2em;
aspect-ratio: 1/1;
background: var(--color-white);
-webkit-mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
transform: translateY(-50%);
transition: all .6s;
}
.archive_btn > .btn > .action:hover:after{
background: var(--color-green);
z-index: 3;
}
.archive_btn > .btn > .bgleft:before{
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: var(--color-white);
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
.archive_btn > .btn > .bgleft:hover:before{
transform-origin:left top;
transform:scale(1, 1);
} .c-breadcrumb {
--c-breadcrumb-line-height: 1.375;
--c-breadcrumb-divider-size: .875em;
--c-breadcrumb-divider-margin-x: .75em;
--c-breadcrumb-divider-color: currentColor;
--c-breadcrumb-divider-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-miterlimit='10' d='M6 3.5l5 4.5-5 4.5'/%3e%3c/svg%3e");
}
.c-breadcrumb {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
line-height: var(--c-breadcrumb-line-height);
}
@media (max-width:767px) {
.c-breadcrumb{
font-size: 15px;
line-height: 2;
}
}
.c-breadcrumb > li {
display: flex;
align-items: center;
padding-right: var(--c-breadcrumb-divider-margin-x);
font-size: var(--font-13);
}
.c-breadcrumb > li:not(:last-child)::after {
content: "";
flex: 0 0 auto;
width: var(--c-breadcrumb-divider-size);
height: var(--c-breadcrumb-divider-size);
background-color: var(--c-breadcrumb-divider-color);
margin-left: var(--c-breadcrumb-divider-margin-x);
-webkit-mask: var(--c-breadcrumb-divider-image) no-repeat center center/contain;
mask: var(--c-breadcrumb-divider-image) no-repeat center center/contain;
} .archive_category{
display: flex;
margin-top: 10px;
}
.archive_category > li{
border: 1px solid var(--color-brown);
color: var(--color-brown);
font-size: var(--font-15);
padding: 0.375em 1em;
}
.archive_category > li + li{
margin-left: 5px;
}
.archive_category > li:first-of-type{
display: none;
}
.c-card.-archive-list > .body > .date{
margin-top: 10px;
} .c-typography {
--c-typography-font-size: 18px;
--c-typography-font-family: inherit;
--c-typography-font-weight: inherit;
--c-typography-line-height: 2.125;
--c-typography-color: inherit;
--c-typography-space: 1.75em;
--c-typography-h-margin-top: 2.5em;
--c-typography-h-margin-bottom: 0;
--c-typography-h-font-weight: bold;
--c-typography-h-font-family: inherit;
--c-typography-h-line-height: 1.5;
--c-typography-h-color: inherit;
--c-typography-h1-font-size: 1em;
--c-typography-h2-font-size: 1.5em;
--c-typography-h3-font-size: 1.25em;
--c-typography-h4-font-size: 1.125em;
--c-typography-h5-font-size: 1em;
--c-typography-h6-font-size: 1em;
--c-typography-table-line-height: 1.75;
--c-typography-table-font-size: .9em;
--c-typography-list-line-height: 1.75;
--c-typography-list-li-margin-bottom: .375em;
--c-typography-dt-font-weight: inherit;
--c-typography-dt-font-family: inherit;
--c-typography-strong-font-weight: bold;
--c-typography-strong-font-family: inherit;
--c-typography-a-color: var(--color-red);
}
.c-typography {
font-size: var(--c-typography-font-size);
font-family: var(--c-typography-font-family);
font-weight: var(--c-typography-font-weight);
line-height: var(--c-typography-line-height);
color: var(--c-typography-color);
text-align: justify;
word-break: break-all;
}
.c-typography h1,
.c-typography h2,
.c-typography h3,
.c-typography h4,
.c-typography h5,
.c-typography h6 {
margin: var(--c-typography-h-margin-top) 0 var(--c-typography-h-margin-bottom);
font-weight: var(--c-typography-h-font-weight);
font-family: var(--c-typography-h-font-family);
line-height: var(--c-typography-h-line-height);
}
.c-typography h1:first-child,
.c-typography h2:first-child,
.c-typography h3:first-child,
.c-typography h4:first-child,
.c-typography h5:first-child,
.c-typography h6:first-child {
margin-top: 0;
}
.c-typography h1:last-child,
.c-typography h2:last-child,
.c-typography h3:last-child,
.c-typography h4:last-child,
.c-typography h5:last-child,
.c-typography h6:last-child {
margin-bottom: 0;
}
.c-typography :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
margin-top: 0;
}
.c-typography h1 {
font-size: var(--c-typography-h1-font-size);
}
.c-typography h2 {
font-size: var(--c-typography-h2-font-size);
}
.c-typography h3 {
font-size: var(--c-typography-h3-font-size);
}
.c-typography h4 {
font-size: var(--c-typography-h4-font-size);
}
.c-typography h5 {
font-size: var(--c-typography-h5-font-size);
}
.c-typography h6 {
font-size: var(--c-typography-h6-font-size);
}
.c-typography p,
.c-typography dl,
.c-typography ol,
.c-typography ul,
.c-typography blockquote,
.c-typography pre,
.c-typography table,
.c-typography figure,
.c-typography hr,
.c-typography .c-embed,
.c-typography .wp-block-image,
.c-typography .wp-block-embed {
margin-top: var(--c-typography-space);
}
.c-typography p:first-child,
.c-typography dl:first-child,
.c-typography ol:first-child,
.c-typography ul:first-child,
.c-typography blockquote:first-child,
.c-typography pre:first-child,
.c-typography table:first-child,
.c-typography figure:first-child,
.c-typography hr:first-child,
.c-typography .c-embed:first-child,
.c-typography .wp-block-image:first-child,
.c-typography .wp-block-embed:first-child {
margin-top: 0;
}
.c-typography ol:first-of-type, .c-typography ul:first-of-type {
margin-top: var(--c-typography-list-li-margin-bottom);
}
.c-typography :is(ol, ul) + :is(ol, ul) {
margin: 0;
}
.c-typography table {
line-height: var(--c-typography-table-line-height);
font-size: var(--c-typography-table-font-size);
}
.c-typography dt {
font-weight: var(--c-typography-dt-font-weight);
font-family: var(--c-typography-dt-font-family);
}
.c-typography dd {
line-height: var(--c-typography-list-line-height);
}
.c-typography ul, .c-typography ol {
padding-left: 1.25em;
line-height: var(--c-typography-list-line-height);
}
.c-typography ul {
list-style: disc;
}
.c-typography ol {
list-style: decimal;
}
.c-typography li {
margin: 0 0 var(--c-typography-list-li-margin-bottom);
}
.c-typography strong {
font-weight: var(--c-typography-strong-font-weight);
font-family: var(--c-typography-strong-font-family);
}
.c-typography a:not(.c-btn) {
text-decoration: underline;
color: var(--color-orange);
}
.wp-block-image figcaption,.wp-block-embed figcaption{
text-align: left !important;
}
div.pdfemb-viewer{
max-width: 100%;
} .item_service{
max-width: var(--content-width-large);
margin: 0 auto;
position: relative;
}
@media (max-width:767px) {
.item_service{
margin: 50px auto;
}
}
.item_service > .wrap{
padding: 0 0 90px;
}
.item_service > .wrap > .flx{
display: flex;
justify-content: center;
gap: clamp(0px, 3.125vw, 60px);
margin-top: clamp(110px, 7.8125vw, 150px);
}
@media (max-width:767px) {
.item_service > .wrap > .flx{
flex-direction: column;
gap: 30px;
}
}
.item_service > .wrap > .flx > .item{
text-align: center;
width: 300px;
max-width: 100%;
}
@media (max-width:767px) {
.item_service > .wrap > .flx > .item{
margin: 0 auto;
}
}
.item_service > .wrap > .flx > .item > .action{
position: relative;
display: block;
padding: 30px 0 86px;
border: 1px solid var(--color-green);
background: var(--color-white);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
outline: none;
transition: ease .2s;
}
.item_service > .wrap > .flx > .item.-item02 > .action{
padding: 46px 0 72px;
}
@media (max-width:767px) {
.item_service > .wrap > .flx > .item.-item02 > .action{
padding: 46px 0 76px;
}
}
.item_service > .wrap > .flx > .item > .action::after{
content: "";
position: absolute;
bottom: 10%;
left: 50%;
width: 2em;
aspect-ratio: 1/1;
background: var(--color-green);
color: var(--color-white);
-webkit-mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
transform: translateX(-50%);
transition: all .6s;
}
.item_service > .wrap > .flx > .item > .action:hover{
opacity: 1;
}
.item_service > .wrap > .flx > .item > .action:hover::after{
background: var(--color-white);
z-index: 3;
}
.item_service > .wrap > .flx > .item > .action > span{
position: relative;
transition: all .6s;
}
.item_service > .wrap > .flx > .item > .action:hover > span{
color: var(--color-white);
z-index: 3;
transition: all .6s;
}
.item_service > .wrap > .flx > .item > .bgleft:before{
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: var(--color-green);
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
.item_service > .wrap > .flx > .item > .bgleft:hover::before{
transform-origin:left top;
transform:scale(1, 1);
}
.item_service > .wrap > .flx > .item > .action > span > .txt{
margin-top: 30px;
line-height: 2;
}
.item_service > .wrap > .flx > .item.-item02 > .action > span > .txt{
margin-top: 18px;
}
@media (max-width:767px) {
.item_service > .wrap > .flx > .item > .action > span > .txt{
font-size: var(--font-16);
}
} .page-container > .body > .page_telomere > .group > .tlt{
text-align: center;
}
.page-container > .body > .page_telomere > .group > .tlt > .tlt_en{
position: relative;
font-size: 18px;
font-weight: bold;
color: var(--color-green);
text-align: center;
margin-bottom: 60px;
}
.page-container > .body > .page_telomere > .group{
max-width: var(--content-width-large);
margin: 30px auto clamp(50px, 9.375vw, 180px);
} .page-container > .body > .page_telomere > .group > .tlt > .tlt_en::before{
content: attr(data-text);
position: absolute;
bottom: -20%;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-en);
font-weight: bold;
font-size: 63px;
color: var(--color-gray);
z-index: -1;
}
.page-container > .body > .page_telomere > .group > .tlt > .tlt_en::after{
content: "";
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
border: 2px solid var(--color-green);
width: 22px;
}
.page-container > .body > .page_telomere > .group > .wrap > .intro{
display: flex;
align-items: flex-end;
position: relative;
margin-top: 30px;
}
@media (max-width:900px) {
.page-container > .body > .page_telomere > .group > .wrap > .intro{
flex-direction: column;
}
}
.page-container > .body > .page_telomere > .group > .wrap > .intro > .img > .item{
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.page-container > .body > .page_telomere > .group > .wrap > .intro > .content{
width: 711px;
max-width: 100%;
position: absolute;
right: -5%;
bottom: 20%;
background: var(--color-white);
padding: 65px 70px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
@media (max-width:1300px){
.page-container > .body > .page_telomere > .group > .wrap > .intro > .content{
bottom: clamp(-200px, -7.2916666667vw, -140px);
}
} 
@media (max-width:900px) {
.page-container > .body > .page_telomere > .group > .wrap > .intro > .content{
position: inherit;
bottom: 0;
right: 0;
padding: 30px 1em;
width: 100%;
}
} .page-container > .body > .page_telomere > .group > .wrap > .intro > .content > .txt{
line-height: 2.2;
font-size: 16px;
}
.page-container > .body > .page_telomere > .group > .wrap > .graph{
background: #fff;
padding: 67px clamp(10px, 4.1666666667vw, 80px);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
margin: 60px auto 0;
width: 1008px;
max-width: 100%;
}
@media (max-width:1300px) {
.page-container > .body > .page_telomere > .group > .wrap > .graph{
margin-top: 200px;
}
}
@media (max-width:900px) {
.page-container > .body > .page_telomere > .group > .wrap > .graph{
margin-top: 60px;
}
}
@media (max-width:767px) {
.page-container > .body > .page_telomere > .group > .wrap > .graph{
margin-top: 30px;
}
}
.page-container > .body > .page_telomere > .group > .wrap > .graph > .item{
display: block;
margin: 0 auto;
}
.page-container > .body > .page_telomere{
position: relative;
}
.page-container > .body > .page_telomere > .layer{
width: clamp(300px, 74.4270833333vw, 1429px);
max-width: 100%;
height: 956px;
max-height: 100%;
background: var(--color-green-40);
position: absolute;
bottom: -5%;
right: 0;
z-index: -1;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.page-container > .body > .page_telomere > .detail{
margin: 60px auto 0;
width: 1008px;
max-width: var(--content-width-large);
}
.page_telomere > .detail > .tlt{
background: var(--color-green);
padding: 10px 1em;
}
.page_telomere > .detail > .tlt.-first{
max-width: 1008px;
margin: 0 auto;
}
.page_telomere > .detail > .tlt > h2{
color: var(--color-white);
text-align: center;
font-size: var(--font-24);
font-weight: bold;
line-height: 1.5;
}
@media (max-width:767px) {
.page_telomere > .detail > .tlt > h2{
text-align: left;
}
}
.page-container > .body > .page_telomere > .detail > .telomere_img{
background: var(--color-white);
margin-top: 32px;
padding: 27px 0 40px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.page-container > .body > .page_telomere > .detail > .telomere_img.-spNo{
display: block;
}
.page-container > .body > .page_telomere > .detail > .telomere_img.-pcNo{
display: none;
}
@media (max-width:560px) {
.page-container > .body > .page_telomere > .detail > .telomere_img.-spNo{
display: none;
}
.page-container > .body > .page_telomere > .detail > .telomere_img.-pcNo{
display: block;
}
}
.page-container > .body > .page_telomere > .detail > .telomere_img > .txt{
line-height: 2.2;
font-size: 16px;
text-align: left;
padding: 0 clamp(20px, 4.1666666667vw, 80px);
}
.page-container > .body > .page_telomere > .detail > .telomere_img > .img_flx{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 20px 0;
}
.page-container > .body > .page_telomere > .detail > .telomere_img > .img_flx > img + img{
margin-left: 1em;
}
@media (max-width:560px) {
.page-container > .body > .page_telomere > .detail > .telomere_img > .img_flx{
flex-direction:column;
}
.page-container > .body > .page_telomere > .detail > .telomere_img > .img_flx > img{
width: 50%;
}
.page-container > .body > .page_telomere > .detail > .telomere_img > .img_flx > img + img{
margin-left: 0;
margin-top: 1em;
}
} .box{
opacity: 0;
}
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.page_telomere > .detail > .telomere_img > .btn{
display: flex;
justify-content: center;
gap: clamp(0px, 3.125vw, 60px);
}
@media (max-width:560px) {
.page_telomere > .detail > .telomere_img > .btn{
flex-direction: column;
flex-wrap: wrap;
align-content: center;
}
}
.page_telomere > .detail > .telomere_img > .btn > .item{
-webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}
.page_telomere > .detail > .telomere_img.-pcNo > .btn > .item{
-webkit-clip-path: polygon(-100% 0%,50% 100%,200% 0%);
clip-path: polygon(-100% 0%,50% 100%,200% 0%);
}
.page_telomere > .detail > .telomere_img > .btn > .item.-black{
background: var(--color-black);
letter-spacing: 2px;
}
.page_telomere > .detail > .telomere_img > .btn > .item.-yellow{
background: var(--color-yellow);
display: flex;
align-items: center;
}
.page_telomere > .detail > .telomere_img > .btn > .item > p{
color: var(--color-white);
padding: 10px 58px 10px 30px;
font-size: var(--font-16);
font-weight: bold;
line-height: 1.5;
}
.page_telomere > .detail > .telomere_img.-pcNo > .btn > .item > p{
padding: 20px 30px 40px 30px;
}
.page_telomere > .detail > .telomere_img.-pcNo > .btn > .item.item.-yellow > p{
padding: 20px 30px 40px 30px;
}
.page-container > .body > .page_telomere > .detail_02{
margin: clamp(50px, 7.2916666667vw, 140px) auto 0;
width: 1008px;
max-width: var(--content-width-large);
}
.page-container > .body > .page_telomere > .detail_02 > .tlt{
background: var(--color-green);
padding: 10px 1em;
}
.page-container > .body > .page_telomere > .detail_02 > .tlt > h2{
color: var(--color-white);
text-align: center;
font-size: var(--font-24);
font-weight: bold;
line-height: 1.8;
}
@media (max-width:767px) {
.page-container > .body > .page_telomere > .detail_02 > .tlt > h2{
text-align: left;
}
}
.page-container > .body > .page_telomere.-layerTop > .layer{
width: clamp(300px, 74.4270833333vw, 1429px);
max-width: 100%;
height: 1304px;
max-height: 100%;
background: var(--color-green-40);
position: absolute;
bottom: -20%;
left: 0;
z-index: -1;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.page-container > .body > .page_telomere > .detail_02 > .flx{
background: var(--color-white);
display: flex;
justify-content: flex-start;
align-items: center;
gap:  clamp(15px, 2.6041666667vw, 50px);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
margin-top: 32px;
padding: 27px clamp(20px, 4.1666666667vw, 80px) 40px;
}
.page-container > .body > .page_telomere > .detail_02 > .flx{
position: relative;
} .page-container > .body > .page_telomere > .detail_02 > .flx > .content{
width: 55%;
margin: clamp(20px, 4.1666666667vw, 80px) 0;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .content > h3{
font-size: 27px;
font-weight: bold;
color: var(--color-green);
padding-bottom: 30px;
line-height: 1.5;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .content > p{
line-height: 2.2;
font-size: 16px;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list{
width: 45%; }
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item{
--c-row-gutter-x: 10px;
--c-row-gutter-y: 10px;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item{
display: flex;
flex-wrap: wrap;
margin: calc(var(--c-row-gutter-y) / 2 * -1) calc(var(--c-row-gutter-x) / 2 * -1);
padding: 0;
list-style: none;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li{
flex: 1 1 0%;
display: flex;
flex-direction: column;
margin: calc(var(--c-row-gutter-y, 0) / 2) calc(var(--c-row-gutter-x, 0) / 2);
z-index: 10;
text-align: center;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li{
flex-basis: 45%;
max-width: 45%;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li{
padding: 30px 5px;
color: var(--color-white);
font-weight: bold;
border-radius: 15px;
font-size: 22px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li.-orange{
background-color: #ED7D31;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li.-green{
background-color: #70AD47;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li.-gray{
background-color: #A5A5A5;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li.-blue{
background-color: #5B9BD5;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li.-yellow{
background-color: #FFC000;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li.-black{
background-color: #3E3E3E;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li.-color01{
background-color: #A64598;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li.-color02{
background-color: #B4D337;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li.-color03{
background-color: #0573BA;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li.-color04{
background-color: #5163AD;
}
.page-container > .body > .page_telomere > .detail_03 > .img{
background: var(--color-white);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
margin-top: 32px;
text-align: center;
}
.page-container > .body > .page_telomere > .detail_03 > .img > img{
margin: 40px auto;
padding: 0 1em;
}
.page-container > .body > .page_telomere > .detail_03 > .img > .txt {
line-height: 2.2;
font-size: 16px;
text-align: left;
padding: 40px clamp(20px, 4.1666666667vw, 80px) 0;
}
@media (max-width:900px) {
.page-container > .body > .page_telomere > .detail_02 > .flx{
flex-direction: column;
gap: 0;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .content{
width: 100%;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list{
width: 100%;
}
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li{
flex-basis: 50%;
max-width: 48%;
}
}
@media (max-width:580px) {
.page-container > .body > .page_telomere > .detail_02 > .flx > .list > .item > li{
flex-basis: 37%;
max-width: 47%;
}
} .page-faq > .accordion-area{
list-style: none;
width: 95%;
max-width: 960px;
margin:0 auto;
}
.accordion-area p.faq_txt{
text-align: center;
margin-bottom: 80px;
font-size: 20px;
line-height: 2;
}
@media (max-width:767px) {
.accordion-area p.faq_txt{
font-size: 16px;
text-align: left;
margin-bottom: 50px;
}
}
.accordion-area li{
margin: 10px 0;
}
.accordion-area section {
border: 1px solid var(--color-green);
background-color: var(--color-white);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.faq_title {
position: relative;
cursor: pointer;
padding: 3% 3% 3% 50px;
transition: all .5s ease;
font-size: 18px;
font-weight: bold;
line-height: 2;
}
.faq_title::before,
.faq_title::after{
position: absolute;
content:'';
width: 15px;
height: 2px;
background-color: var(--color-green);
}
.faq_title::before{
top:48%;
left: 15px;
transform: rotate(0deg);
}
.faq_title::after{    
top:48%;
left: 15px;
transform: rotate(90deg);
}
.faq_title.close::before{
transform: rotate(45deg);
}
.faq_title.close::after{
transform: rotate(-45deg);
}
.faq_box {
display: none;
background: var(--color-green-40);
margin:0 3% 3% 3%;
padding: 3%;
color: #333;
line-height: 2;
} .page_telomere > .measuring > .wrap{
max-width: var(--content-width-large);
margin: 30px auto clamp(80px, 10.4166666667vw, 200px);
}
.page_telomere > .measuring > .wrap > .tlt{
text-align: left;
}
.page_telomere > .measuring > .wrap > .tlt > h2{
font-size: var(--font-30);
font-weight: bold;
display: flex;
flex-direction: column;
line-height: 1.5;
}
.page_telomere > .measuring > .wrap > .tlt > h2::before{
content: attr(data-text);
font-size: 14px;
color: var(--color-green);
}
.page_telomere > .measuring > .wrap > .top_telomere.-rev{
max-width: 100%;
margin: 0 auto;
}
.page_telomere > .measuring > .wrap > .top_telomere.-rev > .wrap{
flex-direction: unset;
}
.page_telomere > .measuring > .wrap > .top_telomere.-rev > .wrap > .content{
right: clamp(0px, 2.6041666667vw, 50px);
bottom: 0;
left: auto;
}
.page_telomere > .measuring > .wrap > .top_telomere.-rev > .layer{
bottom: -10%;
}
.page_telomere > .measuring > .wrap > .top_telomere.-rev > .wrap > .img > .item{
transform: scale(-1, 1);
}
@media (max-width:900px) {
.page_telomere > .measuring > .wrap > .top_telomere.-rev{
padding-top: 30px;
}
.page_telomere > .measuring > .wrap > .top_telomere.-rev > .wrap{
flex-direction: column;
align-items: flex-start;
}
.page_telomere > .measuring > .wrap > .top_telomere.-rev > .wrap > .content{
right: 0;
}
}
.page_telomere > .features > .detail{
margin: clamp(50px, 6.25vw, 120px) auto 0;
width: 1008px;
max-width: var(--content-width-large);
}
.page_telomere > .features > .detail > .tlt{
background: var(--color-green);
padding: 10px 1em;
}
.page_telomere > .features > .detail > .tlt > h2{
color: var(--color-white);
text-align: center;
font-size: var(--font-24);
font-weight: bold;
line-height: 1.5;
}
@media (max-width:767px) {
.page_telomere > .features > .detail > .tlt > h2{
text-align: left;
}
}
.page_telomere > .features > .detail > .content{
background: var(--color-white);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
margin-top: 32px;
padding: clamp(30px, 3.125vw, 60px) clamp(20px, 4.1666666667vw, 80px);
}
.page_telomere > .features > .detail > .content > .txt > p{
line-height: 2.2;
}
.page_telomere > .features > .detail > .content > .meaImg{
margin-top: 44px;
}
.page_telomere > .features > .detail > .content > .meaImg > .meaImg_flx{
display: flex;
justify-content: center;
align-items: center;
gap: clamp(0px, 3.125vw, 60px);
}
.page_telomere > .features > .detail > .content > .meaImg > .meaImg_flx > .item{
width: 45%;
height: 100%;
}
@media (max-width:560px) {
.page_telomere > .features > .detail > .content > .meaImg > .meaImg_flx{
flex-direction: column;
}
.page_telomere > .features > .detail > .content > .meaImg > .meaImg_flx > .item{
width: 100%;
}
}
.page_telomere > .features > .detail > .content > .meaImg > .btn{
background: var(--color-green);
border-radius: 17px;
display: inline-block;
padding: 5px 20px;
margin-bottom: 15px;
}
.page_telomere > .features > .detail > .content > .meaImg > .btn > p{
font-size: 18px;
font-weight: bold;
color: var(--color-white);
}
.page_telomere > .features > .detail > .content > .meaImg_02{
display: flex;
justify-content: flex-start;
margin-top: 44px;
gap: clamp(0px, 3.125vw, 60px);
}
@media (max-width:767px) {
.page_telomere > .features > .detail > .content > .meaImg_02{
flex-direction: column;
}
}
.page_telomere > .features{
position: relative;
}
.page_telomere > .features > .layer{
width: clamp(300px, 74.4270833333vw, 1429px);
max-width: 100%;
height: 900px;
max-height: 100%;
background: var(--color-green-40);
position: absolute;
top: -3%;
left: 0;
z-index: -1;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.page_telomere > .features > .layer.-right{
width: clamp(300px, 74.4270833333vw, 1429px);
max-width: 100%;
height: 900px;
max-height: 100%;
background: var(--color-green-40);
position: absolute;
top: -3%;
right: 0;
left: auto;
z-index: -1;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
@media (max-width:900px) {
.page_telomere > .features > .layer,
.page_telomere > .features > .layer.-right{
top: 10%;
}
}
.page_telomere > .features > .detail > .content > .meaImg_02 > .age > .btn{
background: var(--color-green);
border-radius: 17px;
display: inline-block;
padding: 5px 20px;
margin-bottom: 15px;
}
@media (max-width:767px) {
.page_telomere > .features > .detail > .content > .meaImg_02 > .age > .meaImg_img > .item{
width: 100%;
}
}
.page_telomere > .features > .detail > .content > .meaImg_02 > .age > .btn > p{
font-size: 18px;
font-weight: bold;
color: var(--color-white);
}
.page_telomere > .features > .detail > .content > .diff{
display: flex;
justify-content: center;
gap: clamp(20px, 2.0833333333vw, 40px);
}
.page_telomere > .features > .detail > .content > .diff > .age{
display: flex;
width: 50%;
text-align: center;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
}
@media (max-width:767px) {
.page_telomere > .features > .detail > .content > .diff{
flex-direction: column;
}
.page_telomere > .features > .detail > .content > .diff > .age{
width: 100%;
}
.page_telomere > .features > .detail > .content > .diff > .age.-marg{
margin-top: 60px;
}
}
.page_telomere > .features > .detail > .content > .diff > .age > .btn{
background: #ED7D31;
display: inline-block;
padding: 10px 50px;
border-radius: 17px;
}
.page_telomere > .features > .detail > .content > .diff > .age > .btn.-green{
background: var(--color-green);
}
.page_telomere > .features > .detail > .content > .diff > .age > .btn > p{
color: var(--color-white);
font-size: 18px;
font-weight: bold;
}
.page_telomere > .features > .detail > .content > .diff > .age > .meaImg_img > p{
margin: 30px 0;
line-height: 1.8;
}
.page_telomere > .features > .detail > .content > .diff > .age > .meaImg_img > .txt{
margin: 0 0 50px;
}
.page_telomere > .features > .detail > .content > .diff > .age > .meaImg_img > .item{
margin-bottom: 25px;
}
@media (max-width:767px) {
.page_telomere > .features > .detail > .content > .diff > .age > .meaImg_img > .item{
width: 100%;
}
.page_telomere > .features > .detail > .content > .diff > .age > .meaImg_img > .txt{
margin: 30px 0;
}
}
.page_telomere > .features > .detail > .content > .diff > .age > .txt_btn{
font-size: var(--font-24);
font-weight: bold;
color: #ED7D31;
border: 2px solid #ED7D31;
border-radius: 15px;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
padding: 28px 0 27px;
line-height: 1.5;
}
.page_telomere > .features > .detail > .content > .diff > .age > .txt_btn.-green{
color: #70AD47;
border: 2px solid #70AD47;
}
.page_telomere > .features > .detail > .content > .diff > .age > .txt_btn > span{
font-size: var(--font-30);
} .page_telomere > .flow{
margin:  clamp(120px, 9.375vw, 180px) auto 0;
max-width: var(--content-width-large);
}
.page_telomere > .flow > .wrap > .tlt > h2{
position: relative;
font-size: 18px;
font-weight: bold;
color: var(--color-green);
text-align: center;
}
.page_telomere > .flow > .wrap > .tlt > h2::before{
content: attr(data-text);
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-en);
font-weight: bold;
font-size: 63px;
color: var(--color-gray);
}
.page_telomere > .flow > .wrap > .tlt > h2::after{
content: "";
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
border: 2px solid var(--color-green);
width: 22px;
}
.page_telomere > .flow > .txt{
padding: 60px clamp(20px, 4.1666666667vw, 80px) 0px;
line-height: 2;
max-width: 1008px;
margin: 0 auto;
}
.page_telomere > .flow > .flx{
display: flex;
justify-content: center;
gap: 60px;
margin-top: 60px;
}
@media (max-width:767px) {
.page_telomere > .flow > .flx{
gap: 10px;
}
}
@media (max-width:560px) {
.page_telomere > .flow > .flx{
flex-direction: column;
gap: 30px;
}
.page_telomere > .flow > .txt{
padding: 60px 0 0;
}
}
.page_telomere > .flow > .flx > .item{
text-align: center;
width: 300px;
max-width: 100%;
}
@media (max-width:560px) {
.page_telomere > .flow > .flx > .item{
margin: 0 auto;
}
}
.page_telomere > .flow > .flx > .item > .action{
position: relative;
display: block;
padding: 30px 0 86px;
border: 1px solid var(--color-green);
background: var(--color-white);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
outline: none;
transition: ease .2s;
}
.page_telomere > .flow > .flx > .item > .action{
padding: 46px 0 72px;
}
@media (max-width:767px) {
.page_telomere > .flow > .flx > .item > .action{
padding: 46px 0 76px;
}
}
.page_telomere > .flow > .flx > .item > .action::after{
content: "";
position: absolute;
bottom: 10%;
left: 50%;
width: 2em;
aspect-ratio: 1/1;
background: var(--color-green);
color: var(--color-white);
-webkit-mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
transform: translate(-50%, 0px) rotate(90deg);
transition: all .6s;
}
.page_telomere > .flow > .flx > .item > .action:hover{
opacity: 1;
}
.page_telomere > .flow > .flx > .item > .action:hover::after{
background: var(--color-white);
z-index: 3;
}
.page_telomere > .flow > .flx > .item > .action > span{
position: relative;
transition: all .6s;
}
.page_telomere > .flow > .flx > .item > .action:hover > span{
color: var(--color-white);
z-index: 3;
transition: all .6s;
}
.page_telomere > .flow > .flx > .item > .bgleft:before{
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: var(--color-green);
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
.page_telomere > .flow > .flx > .item > .bgleft:hover::before{
transform-origin:left top;
transform:scale(1, 1);
}
.page_telomere > .flow > .flx > .item > .action > span > .txt{
font-size: 18px;
line-height: 2;
} .page_telomere > .toUs{
position: relative;
}
.page_telomere > .toUs > .wrap{
margin: clamp(50px, 9.375vw, 180px) auto 0;
max-width: var(--content-width-large);
width: 960px;
}
.page_telomere > .toUs > .layer{
width: clamp(300px, 71.875vw, 1380px);
max-width: 100%;
height: 1386px;
max-height: 100%;
background: var(--color-green-40);
position: absolute;
top: 3.5%;
right: 0;
z-index: -1;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.page_telomere > .toUs > .layer.-left{
right: auto;
left: 0;
height: 1033px;
}
@media (max-width:767px) {
.page_telomere > .toUs > .layer{
top: 1%;
}
}
.page_telomere > .toUs > .wrap > .tlt > h2{
text-align: center;
font-size: var(--font-30);
font-weight: bold;
display: flex;
flex-direction: column;
line-height: 1.5;
}
.page_telomere > .toUs > .wrap > .tlt > h2::before{
content: attr(data-text);
font-size: 14px;
color: var(--color-green);
}
@media (max-width:767px) {
.page_telomere > .toUs > .wrap > .tlt > h2{
text-align: left;
}  
}
.page_telomere > .toUs > .wrap > .content{
background: var(--color-white);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
margin-top: clamp(30px, 3.125vw, 60px);
padding: 10px 0;
}
.page_telomere > .toUs > .wrap > .content > .flx{
display: flex;
justify-content: center;
align-items: center;
position: relative;
gap: clamp(10px, 2.0833333333vw, 40px);
padding: 20px clamp(10px, 2.34375vw, 45px);
border-bottom: 1px solid var(--color-green);
}
.page_telomere > .toUs > .wrap > .content > .flx.-bbNo{
border: none;
}
.page_telomere > .toUs > .wrap > .content > .flx.-bbNo::before,
.page_telomere > .toUs > .wrap > .content > .flx.-bbNo::after{
content: none;
}
.page_telomere > .toUs > .wrap > .content > .flx::before{
position: absolute;
content: '';
display: inline-block;
top: 100%;
left: 50%;
width: 0;
height: 0;
border-width: 20px 20px 0 20px;
border-style: solid;
border-color: var(--color-green) transparent transparent transparent;
transform: translate(-50%, 0px);
}
.page_telomere > .toUs > .wrap > .content > .flx::after{
position: absolute;
content: '';
display: inline-block;
top: 100%;
left: 50%;
width: 0;
height: 0;
border-width: 18px 18px 0px 18px;
border-style: solid;
border-color: #fff transparent transparent transparent;
transform: translate(-50%, 0px);
}
@media (max-width:767px) {
.page_telomere > .toUs > .wrap > .content > .flx{
flex-direction: column;
align-items: flex-start;
}  
}
.page_telomere > .toUs > .wrap > .content > .flx > .sp_flx{
display: flex;
gap: clamp(10px, 2.0833333333vw, 40px);
}
@media (max-width:960px) {
.page_telomere > .toUs > .wrap > .content > .flx > .sp_flx{
flex-direction: column;
align-items: flex-start;
}
}
.page_telomere > .toUs > .wrap > .content > .flx > .sp_flx > .step{
display: flex;
flex-direction: column;
align-items: center;
}
.page_telomere > .toUs > .wrap > .content > .flx > .sp_flx > .step > p{
color: var(--color-green);
font-size: 24px;
font-family: var(--font-en);
}
.page_telomere > .toUs > .wrap > .content > .flx > .sp_flx > .step > p > span{
font-size: 60px;
font-weight: bold;
}
.page_telomere > .toUs > .wrap > .content > .flx > .sp_flx > .item{
width:clamp(300px, 27.03125vw, 519px);
max-width: 100%;
}
@media (max-width:767px) {
.page_telomere > .toUs > .wrap > .content > .flx > .sp_flx > .item{
width: 100%;
}
}
.page_telomere > .toUs > .wrap > .content > .flx > .sp_flx > .item > h3{
font-size: 20px;
color: var(--color-green);
font-weight: bold;
margin-bottom: 15px;
}
.page_telomere > .toUs > .wrap > .content > .flx > .sp_flx > .item > p{
line-height: 2;
}
.page_telomere > .toUs > .wrap > .content > .flx > .sp_flx > .item > p > a{
text-decoration: underline;
color: var(--color-orange);
font-size: 15px;
}
@media (max-width:767px) {
.page_telomere > .toUs > .wrap > .content > .flx > .img{
margin: 0 auto;
}
.page_telomere > .toUs > .wrap > .content > .flx > .img > img{
width: 100%;
}
} .fee > .wrap{
margin: clamp(50px, 6.25vw, 120px) auto 0;
max-width: var(--content-width-large);
width: 815px;
text-align: center;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.fee > .wrap > h2{
color: var(--color-white);
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
background: var(--color-green);
padding: 16px 1em;
}
.fee > .wrap > p{
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
gap: 10px;
background: var(--color-white);
font-size: 26px;
color: var(--color-green);
padding: 30px 1em 50px;
}
.fee > .wrap > p > .-f45{
font-size: 45px;
font-weight: bold;
}
.fee > .wrap > p > .-f14{
font-size: 14px;
font-weight: bold;
}
@media (max-width:565px) {
.fee > .wrap > p{
flex-direction: column;
align-items: center;
}
} .contact_btn{
position: relative;
margin: clamp(60px, 7.2916666667vw, 140px) auto 0;
max-width: var(--content-width-large);
text-align: center;
height: 10vh;
}
.contact_btn > .btn{
display: inline-block;
text-align: center;
position: absolute;
transform: translate(-50%, -50%);
}
.contact_btn > .btn > .action{
display: block;
width: 514px;
max-width: 100%;
position: relative;
background: var(--color-orange);
color: var(--color-white);
padding: 26px 40px;
font-size: 24px;
font-weight: bold;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
outline: none;
transition: ease .2s;
font-weight: 500;
}
@media (max-width:560px) {
.contact_btn > .btn > .action{
width: 340px;
}
}
.contact_btn > .btn > .action:hover{
opacity: 1;
}
.contact_btn > .btn > .action > span{
position: relative;
transition: all .6s;
}
.contact_btn > .btn > .action:hover > span{
color: var(--color-orange);
z-index: 3;
transition: all .6s;
}
.contact_btn > .btn > .action::after{
content: "";
position: absolute;
top: 50%;
right: 12%;
width: 2em;
aspect-ratio: 1/1;
background: var(--color-white);
-webkit-mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-right) no-repeat 50% 50%/contain;
transform: translateY(-50%);
transition: all .6s;
font-size: 14px;
}
@media (max-width:560px) {
.contact_btn > .btn > .action::after{
right: 5%;
}
}
.contact_btn > .btn > .action:hover:after{
background: var(--color-orange);
z-index: 3;
}
.contact_btn > .btn > .bgleft:before{
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: var(--color-white);
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
.contact_btn > .btn > .bgleft:hover:before{
transform-origin:left top;
transform:scale(1, 1);
} .page_telomere > .partner{
margin: clamp(50px, 6.25vw, 120px) auto 0;
max-width: var(--content-width-large);
}
.page_telomere > .partner > .wrap{
background-color: var(--color-gray-pale-b);
}
.page_telomere > .partner > .wrap > .tlt{
position: relative;
top: -45px;
}
@media (max-width:900px) {
.page_telomere > .partner > .wrap > .tlt{
top: -35px;
}  
}
.page_telomere > .partner > .wrap > .tlt > h2{
text-align: center;
font-size: var(--font-30);
font-weight: bold;
display: flex;
flex-direction: column;
line-height: 1.5;
}
.page_telomere > .partner > .wrap > .tlt > h2::before{
content: attr(data-text);
font-size: 14px;
color: var(--color-green);
}
.page_telomere > .partner > .wrap > .item{
padding: 49px clamp(0px, 6.25vw, 120px) clamp(50px, 6.25vw, 120px);
}
.page_telomere > .partner > .wrap > .item > .noList{
text-align: center;
font-size: 20px;
}
.page_telomere > .partner > .wrap > .item > .prefecture{
font-size: 24px;
padding-bottom: 11px;
border-bottom: 1px solid var(--color-green);
letter-spacing:2px;
}
.page_telomere > .partner > .wrap > .item > .list{
margin-left: 2em; 
}
.page_telomere > .partner > .wrap > .item > .list > .area{
font-size: 18px;
padding: 11px 0;
border-bottom: 1px solid var(--color-gray-light);
letter-spacing: 1px;
}
.page_telomere > .partner > .wrap > .item > .list > .link{
display: flex;
gap: 3em;
margin-top: 30px;
}
.page_telomere > .partner > .wrap > .item > .list > .link > .btn{
position: relative;
background: var(--color-green);
border-radius: 24px;
padding: 10px 0 12px;
margin-bottom: clamp(30px, 3.125vw, 60px);
width: 500px;
max-width: 100%;
color: var(--color-white);
text-align: center;
}
.page_telomere > .partner > .wrap > .item > .list > .link > .btn::after{
content: "";
flex: 0 0 auto;
position: absolute;
top: 7.5px;
right: 30px;
width: 16px;
height: 24px;
background-color: var(--color-white);
-webkit-mask: var(--icon-arrow) no-repeat center center/contain;
mask: var(--icon-arrow) no-repeat center center/contain;
transition: all .4s;
}
.page_telomere > .partner > .wrap > .item > .list > .link > .btn:hover{
opacity: 1;
}
.page_telomere > .partner > .wrap > .item > .list > .link > .btn:hover::after{
right: 25px;
transition: all .4s;
}
@media (max-width:900px) {
.page_telomere > .partner > .wrap > .item > .list > .link{
flex-direction: column;
gap: 0;
}
.page_telomere > .partner > .wrap > .item > .list{
margin-left: 0;
}
} .page-jutaku > .partner{
margin: clamp(50px, 6.25vw, 120px) auto 0;
max-width: var(--content-width-large);
}
.page-jutaku > .partner > .wrap{
background-color: var(--color-gray-pale-b);
padding-bottom: clamp(30px, 3.125vw, 60px);
}
.page-jutaku > .partner > .wrap > .tlt{
position: relative;
top: -45px;
}
@media (max-width:900px) {
.page-jutaku > .partner > .wrap > .tlt{
top: -35px;
}  
}
.page-jutaku > .partner > .wrap > .tlt > h2{
text-align: center;
font-size: var(--font-30);
font-weight: bold;
display: flex;
flex-direction: column;
line-height: 1.5;
}
.page-jutaku > .partner > .wrap > .tlt > h2::before{
content: attr(data-text);
font-size: 14px;
color: var(--color-green);
}
.page-jutaku > .partner > .wrap > .item{
padding: 30px clamp(0px, 6.25vw, 120px) 0;
}
.page-jutaku > .partner > .wrap > .item > .prefecture{
font-size: 20px;
padding-bottom: 15px;
color: var(--color-green);
border-bottom: 1px solid var(--color-green);
}
.page-jutaku > .partner > .wrap > .item > .list > .area{
font-size: 16px;
padding: 15px 0;
line-height: 2;
} .page-jutaku > .contact_btn{
height: 5vh;
margin: clamp(100px, 7.8125vw, 150px) auto 0;
} .page-about > .about{
position: relative; 
}
.page-about > .about > .layer{
width: clamp(300px, 72.0833333333vw, 1384px);
max-width: 100%;
height: 512.47px;
max-height: 100%;
background: var(--color-green-40);
position: absolute;
top: 7%;
left: 0;
z-index: -1;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.page-about > .about > .layer.-right{
left: auto;
right: 0;
}
.page-about > .about > .wrap{
margin: 0 auto;
max-width: var(--content-width-large);
}
.page-about > .about > .wrap > .flx{
display: flex;
justify-content: center;
align-items:center;
gap:  clamp(0px, 4.1666666667vw, 80px);
}
@media (max-width:960px) {
.page-about > .about > .wrap > .flx{
flex-direction: column-reverse;
}  
.page-about > .about > .layer{
top: 4%;
width: 100%;
height: 100%;
}
}
.page-about > .about > .wrap > .flx > .txt_item{
width: 605px;
max-width: 100%;
}
.page-about > .about > .wrap > .flx > .item > .tlt{
margin-bottom: 50px;
text-align: center;
}
.page-about > .about > .wrap > .flx > .item > .tlt > .en{
font-size: 62px;
color: var(--color-gray);
font-weight: bold;
font-family: var(--font-en);
}
.page-about > .about > .wrap > .flx > .item > .tlt > .txt{
font-size: 18px;
color: var(--color-green);
font-weight: bold;
display: flex;
position: relative;
justify-content: center;
}
.page-about > .about > .wrap > .flx > .item > .tlt > .txt::after{
content: "";
display: inline-block;
position: absolute;
top: 40px;
width: 20px;
border: 2px solid var(--color-green);
}
.page-about > .about > .wrap > .flx > .item > p{
line-height: 2.2;
margin-bottom: 15px;
} .page-about > .policy{
position: relative;
} .page-about > .policy > .wrap{
margin: clamp(130px, 9.375vw, 180px) auto 0;
max-width: var(--content-width-large);
}
.page-about > .policy > .wrap > .flx{
display: flex;
justify-content: center;
align-items:center;
flex-direction: row-reverse;
gap:  clamp(0px, 4.1666666667vw, 80px);
}
@media (max-width:960px) {
.page-about > .policy > .wrap > .flx{
flex-direction: column-reverse;
} }
.page-about > .policy > .wrap > .flx > .txt_item{
width: 600px;
max-width: 100%;
}
.page-about > .policy > .wrap > .flx > .item > .tlt{
margin-bottom: 50px;
text-align: center;
}
.page-about > .policy > .wrap > .flx > .item > .tlt > .en{
font-size: 62px;
color: var(--color-gray);
font-weight: bold;
font-family: var(--font-en);
}
.page-about > .policy > .wrap > .flx > .item > .tlt > .txt{
font-size: 18px;
color: var(--color-green);
font-weight: bold;
display: flex;
position: relative;
justify-content: center;
}
.page-about > .policy > .wrap > .flx > .item > .tlt > .txt::after{
content: "";
display: inline-block;
position: absolute;
top: 40px;
width: 20px;
border: 2px solid var(--color-green);
}
.page-about > .policy > .wrap > .flx > .item > p{
line-height: 2.2;
margin-bottom: 15px;
} .page-about > .message{
position: relative;
}
.page-about > .message > .layer.-right{
width: clamp(300px, 72.0833333333vw, 1384px);
max-width: 100%;
height: 792px;
max-height: 100%;
background: var(--color-green-40);
position: absolute;
top: -3%;
right: 0;
z-index: -1;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.page-about > .message > .wrap{
margin: clamp(130px, 9.375vw, 180px) auto 0;
max-width: var(--content-width-large);
}
.page-about > .message > .wrap > .tlt > h2{
position: relative;
font-size: 18px;
font-weight: bold;
color: var(--color-green);
text-align: center;
}
.page-about > .message > .wrap > .tlt > h2::before{
content: attr(data-text);
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-en);
font-weight: bold;
font-size: 63px;
color: var(--color-gray);
}
.page-about > .message > .wrap > .tlt > h2::after{
content: "";
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
border: 2px solid var(--color-green);
width: 22px;
}
.page-about > .message > .wrap > .flx{
display: flex;
justify-content: center;
margin-top: 51px;
}
.page-about > .message > .wrap > .flx > .img{
width: 640px;
max-width: 100%;
}
.page-about > .message > .wrap > .flx > .content{
width: 713px;
max-width: 100%;
padding: clamp(30px, 3.125vw, 60px) clamp(10px, 3.75vw, 72px);
background: var(--color-white);
position: relative;
top: clamp(10px, 2.0833333333vw, 40px);
right: clamp(0px, 3.90625vw, 75px);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
@media (max-width:1280px){
.page-about > .message > .wrap > .flx > .content{
top: 0;
right: 0;
}
} 
@media (max-width:960px) {
.page-about > .message > .wrap > .flx{
flex-direction: column;
align-items: center;
gap: 10px;
}
.page-about > .message > .wrap > .flx > .img{
width: 400px;
}
.page-about > .message > .wrap > .flx > .content{
width: 100%;
}
.page-about > .message > .layer.-right{
width: 100%;
height: 100%;
top: -2%;
}
}
.page-about > .message > .wrap > .flx > .content > h3{
font-size: var(--font-30);
font-weight: bold;
line-height: 1.5;
}
.page-about > .message > .wrap > .flx > .content > p{
margin-top: clamp(15px, 1.5625vw, 30px);
font-size: 16px;
line-height: 2;
letter-spacing: 0.14em;
}
.page-about > .message > .wrap > .flx > .content > p.name{
text-align: right;
} .page-about > .profile{
position: relative;
}
.page-about > .profile > .layer{
width: clamp(300px, 71.6666666667vw, 1376px);
max-width: 100%;
height: 945px;
max-height: 100%;
background: var(--color-green-40);
position: absolute;
top: -2%;
left: 0;
z-index: -1;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
}
.page-about > .profile > .layer.-right{
left: auto;
right: 0;
height: 977px;
}
.page-about > .profile > .wrap{
margin: clamp(150px, 10.4166666667vw, 200px) auto 0;
max-width: var(--content-width-large);
}
.page-about > .profile > .wrap > .tlt > h2{
position: relative;
font-size: 18px;
font-weight: bold;
color: var(--color-green);
text-align: center;
}
.page-about > .profile > .wrap > .tlt > h2::before{
content: attr(data-text);
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-en);
font-weight: bold;
font-size: 63px;
color: var(--color-gray);
}
.page-about > .profile > .wrap > .tlt > h2::after{
content: "";
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
border: 2px solid var(--color-green);
width: 22px;
}
.page-about > .profile > .wrap > .content{
background: var(--color-white);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
padding: clamp(30px, 5.2083333333vw, 60px) clamp(10px, 7.2395833333vw, 139px) clamp(30px, 5.2083333333vw, 100px);
margin-top: 51px;
}
.page-about > .profile > .wrap > .content > .ttl{
text-align: center;
margin-bottom: 1.5em;
font-size: 20px;
color: var(--color-green);
font-weight: 500;
}
.page-about > .profile > .wrap > .content > .list > .flx{
display: flex;
align-items: baseline;
padding: 30px 0;
border-top: 1px solid #4ba63554;
}
.page-about > .profile > .wrap > .content > .list > .flx.-column{
flex-direction: column;
}
.page-about > .profile > .wrap > .content > .list > .flx:last-of-type{
border-bottom: 1px solid #4ba63554;
}
.page-about > .profile > .wrap > .content > .list > .flx > dt{
width: 20%;
color: #8F8F8F;
} 
.page-about > .profile > .wrap > .content > .list > .flx > dd{
line-height: 1.5;
width: 80%;
}
@media (max-width:900px) {
.page-about > .profile > .wrap > .content > .list > .flx{
flex-direction: column;
gap: 15px;
padding: 20px 0;
}
.page-about > .profile > .wrap > .content > .list > .flx > dt{
width: 100%;
}
.page-about > .profile > .wrap > .content > .list > .flx > dd{
width: 100%;
}
.page-about > .profile > .wrap > .content{
padding: 3em 1em;
}
} .privacy{
max-width: var(--container-width-medium); margin: 0 clamp(0px, 14.5348837209vw, 250px);
line-height: 1.6;
}
.privacy_wrap > h2{
position: relative;
font-size: var(--font-30);
font-weight: bold;
border-bottom: 1px solid #CECACA;
margin-bottom: 0.5em;
}
.privacy_wrap > h2::after{
content: "";
position: absolute;
bottom: -1%;
left: 0;
width: 20%;
border-top: 2px solid var(--color-orange);
}
.privacy_wrap > p{
line-height: 2.2;
}
@media (max-width:767px) {
.privacy{
margin: 0 1em;
}
}
.privacy_wrap{
margin: 2em 0;
}
.privacy_wrap > p{
font-size: var(--font-16);
} .sitemap{
max-width: var(--content-width-medium);
margin: 0 auto;
line-height: 2.2;
background-color: var(--color-white);
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
padding: 30px 50px;
}
.sitemap > h2{
position: relative;
font-size: var(--font-30);
font-weight: bold;
border-bottom: 1px solid #CECACA;
}
.sitemap > h2::after{
content: "";
position: absolute;
bottom: -1%;
left: 0;
width: 20%;
border-top: 2px solid var(--color-orange);
}
@media (max-width:767px) {
.sitemap{
padding: 20px 1em;
}
}
.sitemap > .sitemap_ul{
padding: 2em;
}
.sitemap ul.child{
padding-left: 2em;
} .contact_inner{
max-width: var(--content-width-large);
margin: 0 auto;
}
.contact-container {
max-width: var(--content-width-large);
margin: 0 auto; }
.contact_inner > .lead {
font-size: 16px;
line-height: 2;
text-align: justify;
word-break: break-all;
}
@media (min-width: 560px) {
.contact_inner > .lead {
text-align: center;
}
} .contact_inner > .lead > .heading.-error {
color: var(--color-red);
}
.contact_inner > .form {
margin-top: clamp(31px,3.6764705882vw,50px);
}
@media (min-width: 768px) {
.contact_inner > .form {
padding: clamp(47px,5.5147058824vw,75px) clamp(63px,7.3529411765vw,100px);
}
}
.contact-flow {
position: relative;
display: flex;
justify-content: space-between;
max-width: clamp(188px, 25.0836120401vw, 300px);
margin: 0 auto;
font-size: 15px;
}
@media (max-width: 767px) {
.contact-flow {
font-size: 13px;
}
}
.contact-flow::before {
content: "";
position: absolute;
top: calc(0.4375em - 1px);
right: 2.25em;
left: 2.25em;
border-top: 2px solid var(--color-gray-light);
}
.contact-flow > li {
z-index: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.875em;
width: 4.5em;
text-align: center;
color: var(--color-gray-light);
white-space: nowrap;
}
.contact-flow > li::before {
content: "";
width: 0.875em;
height: 0.875em;
background: currentColor;
border-radius: 100%;
}
.contact-flow > li.-current {
color: var(--color-black);
}
.contact-form {
margin-top: clamp(47px, 6.27090301vw, 75px);
}
.contact-form > div + div {
margin-top: clamp(19px, 2.508361204vw, 30px);
}
.contact-form > div > dt {
font-size: 16px;
line-height: 1.625;
}
.contact-form > div > dd {
flex: 1 1 0%;
margin-top: clamp(5px, 0.6688963211vw, 8px);
font-size: 16px;
line-height: 1.5;
}
.contact-form > .contact_privacy {
margin-top: clamp(38px, 5.016722408vw, 60px);
margin-bottom: clamp(31px,3.6764705882vw,50px);
text-align: center;
line-height: 2;
}
.mw_wp_form_confirm .contact-form > .privacy > dd, .mw_wp_form_preview .contact-form > .privacy > dd {
display: none;
}
.contact-form > .submit > dd {
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(13px, 1.6722408027vw, 20px);
}
@media (min-width: 560px) {
.contact-form > .submit > dd {
flex-direction: row-reverse;
}
}
.contact-form a {
color: var(--color-orange);
text-decoration: underline;
}
.contact-form .required {
margin-left: 0.25em;
color: red;
}
.c-form-control {
--c-form-control-border: 1px solid var(--color-gray-light);
--c-form-control-border-radius: 5px;
--c-form-control-padding: .75em 1em;
--c-form-control-background: var(--color-gray-pale);
--c-form-control-line-height: 1.625;
--c-form-control-font-size: 16px;
--c-form-control-font-color: inherit;
--c-form-control-textarea-padding: 1em;
}
@media (min-width: 768px) {
.c-form-control {
--c-form-control-padding: 1.125em;
--c-form-control-font-size: var(--font-17);
}
}
.c-form-control {
box-sizing: border-box;
display: block;
width: 100%;
margin: 0;
padding: var(--c-form-control-padding, 0);
border: var(--c-form-control-border, none);
border-radius: var(--c-form-control-border-radius, 0);
background: var(--c-form-control-background, transparent);
font: inherit;
font-size: var(--c-form-control-font-size, inherit);
line-height: var(--c-form-control-line-height, inherit);
color: var(--c-form-control-font-color, inherit);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c-form-control:disabled {
cursor: not-allowed;
}
textarea.c-form-control {
padding: var(--c-form-control-textarea-padding, 0);
resize: vertical;
}
select.c-form-control {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22'%3e%3cpath fill='%23343a40' d='M15 22L0 0h30z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: calc(100% - 0.75em) 50%;
background-size: 0.5em auto;
}
select.c-form-control[multiple], select.c-form-control[size]:not([size="1"]) {
background-image: none;
}
.c-form-control.-auto {
display: inline-block;
width: auto;
}
.c-btn.-contactAction {
justify-content: center;
min-width: clamp(175px, 23.4113712375vw, 280px);
padding: 1.125em 3.25em;
font-size: 16px;
text-align: center;
}
.c-btn.-contactAction.-submit {
background: var(--color-orange);
border: 3px solid var(--color-orange);
color: var(--color-white);
font-weight: 500;
}
.c-btn.-contactAction.-back {
background: var(--color-white);
border: 3px solid var(--color-orange);
color: var(--color-orange);
}
.contact-captcha{
text-align: center;
margin-bottom: clamp(30px, 3.488372093vw, 60px);
}
.contact-captcha > img{
margin: 0 auto 1em;
}
.contact-captcha > input{
padding: 5px 10px;
margin-top: 1em;
} .notfound-container {
max-width: var(--content-width-large);
margin: 0px auto 100px;
text-align: center;
}
.notfound-container > .text {
font-size: var(--font-16);
line-height: 2.25;
text-align: justify;
word-break: break-all;
}
@media (min-width: 560px) {
.notfound-container > .text {
text-align: center;
}
}
.notfound-container > .btn {
display: inline-block;
text-align: center;
}
.notfound-container > .btn > .action{
display: block;
max-width: 100%;
position: relative;
background: var(--color-orange);
color: var(--color-white);
padding: 26px 40px;
font-weight: bold;
box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.1);
margin-top: 1em;
font-weight: 500;
}