*,
::before,
::after {
box-sizing: border-box; background-repeat: no-repeat; } ::before,
::after {
text-decoration: inherit; vertical-align: inherit; } :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%; }  body {
min-height: 100vh;
margin: 0;
position: relative;
}    hr {
color: inherit; height: 0; }   pre {
font-family: monospace, monospace; font-size: 1em; overflow: auto; }  abbr[title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
} b, strong {
font-weight: bolder;
} code, kbd, samp {
font-family: monospace, monospace; font-size: 1em; } small {
font-size: 80%;
}  audio, canvas, iframe, img, svg, video {
vertical-align: middle;
} iframe {
border-style: none;
} svg:not([fill]) {
fill: currentColor;
}  table {
border-collapse: collapse; border-color: currentColor; text-indent: 0; }  button, input, select {
margin: 0;
} button, [type=button i], [type=reset i], [type=submit i] {
-webkit-appearance: button;
} fieldset {
border: 1px solid #a0a0a0;
} progress {
vertical-align: baseline;
} textarea {
margin: 0; resize: vertical; } [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; }  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;
}
dialog:not([open]) {
display: none;
} details > summary:first-of-type {
display: list-item;
}  [aria-busy=true i] {
cursor: progress;
} [aria-disabled=true i], [disabled] {
cursor: not-allowed;
} [aria-hidden=false i][hidden] {
display: initial;
}
[aria-hidden=false i][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
} 
:root {
line-height: 1;
overflow-wrap: break-word;
}
@media (prefers-reduced-motion: no-preference) {
html:focus-within {
scroll-behavior: smooth;
}
}
html:focus-within {
scroll-behavior: smooth;
}
body {
font-family: "Noto Sans JP", "Noto Sans Japanese", 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
background: var(--color-white);
font-weight: 400;
font-feature-settings: revert;
letter-spacing: 0.1em;
color: var(--color-black);
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font: inherit;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
dl, dd {
margin: 0;
}
p {
margin: 0;
}
blockquote {
margin: 0;
}
hr {
margin: 0;
border: none;
border-top: 1px solid currentColor;
}
pre {
margin: 0;
}
a {
color: inherit;
text-decoration: none;
text-underline-offset: 0.1375em;
transition: var(--transition-duration) var(--transition-timing-function);
}
a.-tel{
pointer-events: none; 
}
@media (max-width:767px) {
a.-tel{
pointer-events: auto; 
}
}
figure {
max-width: 100%;
margin: 0;
}
img, picture, svg, iframe, video {
max-width: 100%; }
img, picture, svg, video {
height: auto;
}
table {
width: 100%;
table-layout: fixed;
}
tbody, thead {
vertical-align: inherit;
}
th {
margin: 0;
text-align: inherit;
text-align: -webkit-match-parent;
}
td {
padding: 0;
}
label {
display: inline-block;
}
button, input, optgroup, select, textarea {
font: inherit;
line-height: inherit;
letter-spacing: inherit;
}
button, [role=button], [type=button], [type=reset], [type=submit]:not(:disabled) {
cursor: pointer;
transition-property: opacity;
transition-duration: var(--transition-duration);
transition-timing-function: ease;
}
:root {
--icon-newWindow: 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.5%2014.5h-10v-10h1v9h9z%22%2F%3E%3Cpath%20d%3D%22M14.5%2012H4V1.5h10.5V12zM5%2011h8.5V2.5H5V11z%22%2F%3E%3Cpath%20d%3D%22M7.5%204.5v1h2.29L6.63%208.66l.71.71%203.16-3.16V8.5h1v-4z%22%2F%3E%3C%2Fsvg%3E');
--icon-scroll: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2216%22%20viewBox%3D%220%200%2030%2016%22%20fill%3D%22none%22%3E%20%3Cg%20clip-path%3D%22url(%23clip0_587_843)%22%3E%20%3Cpath%20d%3D%22M15.0012%2016L0%202.04675L1.85521%200L15.0012%2012.2274L28.1473%200L30%202.04675L15.0012%2016Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fg%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip0_587_843%22%3E%20%3Crect%20width%3D%2230%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%3C%2Fsvg%3E');
--icon-arrow: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M25%2020.0024L18.8955%2026.0029L18%2025.2608L23.3495%2020.0024L18%2014.744L18.8955%2014.0029L25%2020.0024Z%22%20fill%3D%22white%22%2F%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2219.575%22%20stroke%3D%22white%22%20stroke-width%3D%220.85%22%2F%3E%3C%2Fsvg%3E');
--icon-right-arrow: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%220%200%206%2010%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M6%204.99958L0.76753%2010L-3.75323e-08%209.3816L4.58528%204.99958L-5.69442e-07%200.617572L0.767529%20-2.4163e-08L6%204.99958Z%22%20fill%3D%22%23222222%22%2F%3E%3C%2Fsvg%3E');
--color-white: #fff;
--color-black: #000;
--color-black-b: #222;
--color-black-light: #1E1E1E;
--color-blue: #15126F;
--color-navy: #003168;
--color-navy-b: #001935;
--color-gray: #525252;
--color-gray-b: #555555;
--color-gray-c: #605F82;
--color-gray-light: #fbfbfb;
--font-sans:  "century-gothic-pro", "Noto Sans Japanese", source-han-sans-japanese, sans-serif;
--font-zen:  "century-gothic-pro", "Zen Kaku Gothic Antique", "Century Gothic Pro", sans-serif;
--font-pop: "Poppins", "Noto Sans Japanese", sans-serif;
--font-Century: "Century Gothic Pro", sans-serif;
--font-bah: bahnschrift, sans-serif;
--transition-duration: 0.4s;
--transition-opacity: 0.65;
--transition-timing-function: ease;
--z-index-c-loader: 1000;
--z-index-site-wrap-drawerBtn: 600;
--z-index-c-drawer: 550;
--z-index-site-wrap-header: 150;
--z-index-site-wrap-sideNav: 150;
--z-index-site-pagetop: 750;
--z-index-site-sideNav: 700;
--z-index-page-fixedToc: 80;
--px-10: calc(10px * .65);
--px-20: calc(20px * .65);
--px-30: calc(30px * .65);
--px-40: calc(40px * .65);
--px-46: calc(46px * .65);
--px-50: calc(50px * .65);
--px-55: calc(55px * .65);
--px-60: calc(60px * .65);
--px-70: calc(70px * .65);
--px-80: calc(80px * .65);
--px-90: calc(90px * .65);
--px-100: calc(100px * .65);
--px-110: calc(110px * .65);
--px-120: calc(120px * .65);
--px-130: calc(130px * .65);
--px-140: calc(140px * .65);
--px-150: calc(150px * .65);
--px-200: calc(200px * .65);
--px-250: calc(250px * .65);
--px-300: calc(300px * .65);
--px-350: calc(350px * .65);
--px-400: calc(400px * .65);
--px-450: calc(450px * .65);
--px-500: calc(500px * .65);
--px-550: calc(550px * .65);
--px-600: calc(600px * .65);
--px-650: calc(650px * .65);
--px-700: calc(700px * .65);
--px-750: calc(750px * .65);
--px-800: calc(800px * .65);
--leading-trim: calc((1em - 1lh) / 2);
--content-gutter-medium: 5vw;
--content-gutter: 6vw;
--text-shadow-opacity50: 0 0 10px rgba(0, 0, 0, .5);
--shadow-opacity50: 0 0 10px 0 rgba(0, 0, 0, .5);
--shadow-opacity25: 0px 4px 4px 0 rgba(0, 0, 0, .25);
--site-header-height: 90px;
--site-header-scrolled-height: 90px;
--site-wrap-border-width: 0px;
--c-iconBtn-site-wrap-drawerBtn-width: clamp(67px, 11.4285714286vw, 160px);
--font-10: 10px;
--font-11: 11px;
--font-12: 11px;
--font-13: 12px;
--font-14: 13px;
--font-15: 13px;
--font-16: 15px;
--font-17: 15px;
--font-18: 16px;
--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;
--font-41: 29px;
--font-42: 30px;
--font-43: 31px;
--font-44: 31px;
--font-45: 32px;
--font-46: 33px;
--font-47: 33px;
--font-48: 34px;
--font-49: 34px;
--font-50: 35px;
--font-60: 41px;
--font-64: 45px;
--font-70: 48px;
--font-80: 54px;
--font-90: 60px;
}
@media (min-width: 960px) {
:root {
--px-10: 10px;
--px-20: 20px;
--px-30: 30px;
--px-40: 40px;
--px-46: 46px;
--px-50: 50px;
--px-55: 55px;
--px-60: 60px;
--px-70: 70px;
--px-80: 80px;
--px-90: 90px;
--px-100: 100px;
--px-110: 110px;
--px-120: 120px;
--px-130: 130px;
--px-140: 140px;
--px-150: 150px;
--px-200: 200px;
--px-250: 250px;
--px-300: 300px;
--px-350: 350px;
--px-400: 400px;
--px-450: 450px;
--px-500: 500px;
--px-550: 550px;
--px-600: 600px;
--px-650: 650px;
--px-700: 700px;
--px-750: 750px;
--px-800: 800px;
}
}
@media (min-width: 960px) {
:root {
--site-header-height: 100px;
--site-wrap-border-width: clamp(10px, 1.1428571429vw, 16px);
}
}
@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;
--font-41: 41px;
--font-43: 43px;
--font-44: 44px;
--font-45: 45px;
--font-46: 46px;
--font-47: 47px;
--font-48: 48px;
--font-49: 49px;
--font-50: 50px;
--font-60: 60px;
--font-64: 64px;
--font-70: 70px;
--font-80: 80px;
--font-90: 90px;
}
}
._d-none {
display: none !important;
}
._d-block {
display: block !important;
}
@media (min-width: 460px) {
._d-ssm-none {
display: none !important;
}
._d-ssm-block {
display: block !important;
}
}
@media (min-width: 560px) {
._d-sm-none {
display: none !important;
}
._d-sm-block {
display: block !important;
}
}
@media (min-width: 768px) {
._d-md-none {
display: none !important;
}
._d-md-block {
display: block !important;
}
}
@media (min-width: 960px) {
._d-lg-none {
display: none !important;
}
._d-lg-block {
display: block !important;
}
}
@media (min-width: 1200px) {
._d-xl-none {
display: none !important;
}
._d-xl-block {
display: block !important;
}
}
@media (min-width: 1300px) {
._d-xxl-none {
display: none !important;
}
._d-xxl-block {
display: block !important;
}
}
.-flx{
display: flex;
}
.-flx.-center{
justify-content: center;
align-items:center;
} .c-loader {
--c-loader-z-index: var(--z-index-c-loader);
--c-loader-background: var(--color-white);
}
.c-loader {
z-index: var(--c-loader-z-index);
opacity: 1;
visibility: visible;
position: fixed;
inset: 0;
display: grid;
place-items: center;
margin: 0;
padding: 0;
background: var(--c-loader-background);
line-height: 1.4;
}
.c-loader {
background: rgba(255, 255, 255, 0.6);
}
.c-loader::after {
z-index: -1;
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--c-loader-background);
}
.c-loader.-is-loaded {
animation: c-loader-curtain 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 both;
}
.c-loader.-is-loaded::after {
animation: c-loader-curtain 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both;
}
@keyframes c-loader-curtain {
0% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(0 0 0 100%);
}
} .c-icon{
display: inline-grid;
place-items: center;
padding: 0;
vertical-align: bottom;
font-style: normal;
transition: var(--transition-duration) var(--transition-timing-function);
}
.c-icon::before{
content: "";
display: block;
width: 1lh;
height: 1lh;
background-color: var(--color-white);
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
transition: var(--transition-duration) var(--transition-timing-function);
}
.c-icon.-arrow::before{
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
background-color: var(--color-white);
}
.c-icon.-newWindow::before{
-webkit-mask-image: var(--icon-newWindow);
mask-image: var(--icon-newWindow);
background-color: var(--color-blue);
width: 20px;
height: 20px;
} .c-heading.-typeA{
display: flex;
flex-direction: column;
}
.c-heading.-typeA>.en-ttl{
color: var(--color-blue);
font-family: var(--font-Century);
font-size: var(--font-60);
font-weight: 300;
margin-bottom: .2em;
}
.c-heading.-typeA>.ttl{
color: var(--color-gray-c);
font-family: var(--font-zen);
font-size: var(--font-16);
font-weight: 500;
}
.c-heading.-typeB{
display: inline-flex;
flex-direction: column;
margin-top: var(--px-100);
border-left: 4px solid var(--color-blue);
}
.c-heading.-typeB>.ttl{
display: inline;
overflow: hidden;
}
.c-heading.-typeB>.ttl>.bg{
color: var(--color-white);
font-family: var(--font-zen);
font-size: var(--font-30);
font-weight: 600;
background-color: var(--color-blue);
padding-inline: 28px 16px;
padding-block: 0.09em .2em;
line-height: 1.6;
display: inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
position: relative;
overflow: hidden;
}
.c-heading.-typeB>.txt{
color: var(--color-black-b);
font-family: var(--font-pop);
font-size: var(--font-18);
font-weight: 400;
line-height: 2;
padding-block: 17px;
padding-inline: 24px;
}
.c-heading.-typeB>.txt.-margB0{
padding-block: 0;
}
@media (max-width:767px) {
.c-heading.-typeB>.ttl>.bg{
padding-inline: .5em;
}
.c-heading.-typeB>.txt{
padding-inline: .5em;
}
} .action>.link{
background-color: var(--color-navy);
color: var(--color-white);
padding-block: 15px;
padding-inline: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--px-30);
width: 360px;
max-width: 100%;
margin-inline: auto;
}
.action>.link>.c-icon.-arrow::before{
width: 40px;
height: 40px;
}
@media (hover : hover) {
.action>.link:hover>.c-icon.-arrow::before{
transform: translateX(5px);
}
}
@media (max-width:560px) {
.action>.link{
width: 100%;
}
} #header{
z-index: var(--z-index-site-wrap-header);
position: fixed;
width: 100%;
}
#header::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
z-index: -1;
opacity: 0;
transition: .25s ease-in-out;
pointer-events: none;
}
#header.-is-scrolled::after{
opacity: .9;
}
#header.low::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to bottom, rgba(21, 18, 111, 1) 100%, rgba(21, 18, 111, 1) 100%);
z-index: -1;
opacity: 1;
transition: .25s ease-in-out;
pointer-events: none;
}
#header.low.-is-scrolled::after{
opacity: .9;
background: linear-gradient(to bottom, rgba(21, 18, 111, 1) 90%, rgba(21, 18, 111, 0) 100%);
}
@media (max-width:960px) {
#header.-is-scrolled::after{
opacity: 0;
}
#header.low.-is-scrolled::after{
opacity: 0;
}
}
.site-header{
height: auto;
padding-block: 1em;
padding-inline: calc(var(--content-gutter-medium) / 2);
display: flex;
justify-content: space-between;
align-items: center;
gap: 2vw;
}
.site-header>.brand{
display: inline-block;
}
.brand > .link > .logo{
flex: 0 1 auto;
opacity: 1;
width: 330px;
transition: all .4s ease-in-out;
}
.brand > .link.-is-scrolled > .logo{
width: 270px;
}
@media (max-width:1200px) {
.brand > .link > .logo{
width: 290px;
}
}
@media (max-width:960px) {
.brand > .link > .logo{
width: 200px;
}
.brand > .link.-is-scrolled {
opacity: 0;
pointer-events: none;
}
.brand > .link.-is-scrolled > .logo{
width: 200px;
}
}
.site-header>.nav{
display: flex;
flex-direction: row;
align-items: center;
gap: var(--px-20) 4vw;
margin-left: auto;
}
.site-header>.nav>.item{
display: flex;
margin: 0;
padding: 0;
list-style: none;
font: inherit;
line-height: 1;
white-space: nowrap;
color: inherit;
justify-content: flex-end;
gap: 2vw;
}
.site-header>.nav>.item>.list>.link{
font-size: 16px;
color: var(--color-white);
font-family: var(--font-pop); font-weight: 500;
line-height: 1.8;
text-decoration: none;
}
#header.-is-scrolled>.site-header>.nav>.item>.list>.link{
color: var(--color-blue);
}
@media (hover : hover) {
#header>.site-header>.nav>.item>.list>.link{
background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
transition: background-size .4s ease-out;
}
#header>.site-header>.nav>.item>.list>.link:hover{
background-position: 0 100%;
background-size: 100% 1px;
}
}
@media (max-width:1200px) {
.site-header>.nav>.item{
gap: 1.5vw;
}
}
@media (max-width:960px) {
.site-header>.nav{
display: none;
}
} .hero{
position: relative;
width: 100%;
min-height: 100vh;
height: 100%;
}
.hero>.inner>.grid{
position: relative;
display: grid;
justify-items: center;
grid-template-columns: min(1100px, calc(1100 / 1920 * 100 * 1vw)) 1fr;
}
.hero>.inner>.grid>.movie-box{
width: 100%;
height: 100vh;
max-height: 100%;
position: sticky;
top: 0;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 15% 50%);
}
.hero>.inner>.grid>.movie-box>.movie{
width: 100%;
height: 100vh;
max-height: 100%;
object-fit: cover;
}
.hero>.inner>.grid>.content-box{
width: min(1000px,100%);
height: auto;
min-height: 100vh;
position: relative;
z-index: 1;
background: var(--color-white);
padding-block: var(--px-200) var(--px-130);
padding-inline: clamp(10px, 3.3333333333vw, 60px) 0;
}
.hero>.inner>.grid>.content-box>.main-ttl{
color: var(--color-blue);
font-family: var(--font-sans);
font-size: var(--font-50);
line-height: 1.4;
letter-spacing: 0.09em;
font-weight: 600;
margin-bottom: var(--px-40);
}
.hero>.inner>.grid>.content-box>.main-txt{
font-size: var(--font-20);
font-family: var(--font-pop);
color: var(--color-blue);
font-weight: 500;
line-height: 1.8;
margin-bottom: var(--px-46);
}
.hero>.inner>.grid>.content-box>.badge-media{
width: min(602px,100%);
height: auto;
padding-bottom: var(--px-120);
}
.hero>.inner>.grid>.content-box>.badge-media.-second{
padding-bottom: var(--px-50);
}
.hero>.inner>.grid>.content-box>.badge-media>.badge-note{
font-size: var(--font-14);
font-family: var(--font-pop);
line-height: 1.8;
color: var(--color-gray-b);
}
.hero>.inner>.grid>.content-box>.section-ttl{
font-size: var(--font-32);
font-family: var(--font-zen);
color: var(--color-white);
background: var(--color-blue);
font-weight: 700;
padding: var(--px-10);
margin-block: var(--px-120) var(--px-40);
display: inline-block;
line-height: 1.4;
}
.hero>.inner>.grid>.content-box>.wrap>.section-txt{
font-size: var(--font-20);
font-family: var(--font-pop);
color: var(--color-blue);
margin-bottom: var(--px-20);
line-height: 2;
}
.hero>.inner>.grid>.content-box>.wrap>.section-txt:first-of-type{
margin-bottom: 0;
}
.hero>.inner>.grid>.content-box>.wrap>.section-txt.-small{
font-size: var(--font-14);
line-height: 1.2;
}
.hero>.inner>.grid>.content-box>.wrap>.section-txt>span{
font-size: var(--font-14);
} .hero.-sp>.home-hero{
position: relative;
}
.hero.-sp>.home-hero>.media{
height: 100vh;
max-height: 100%;
width: 100%;
position: sticky;
top: 0;
}
.hero.-sp>.home-hero>.media>.img-wrap{
object-fit: cover;
opacity: 0;
transition: opacity 0.8s ease-in-out;
position: relative;
}
.hero.-sp>.home-hero>.media>.img-wrap::before{
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.15);
}
.hero.-sp>.home-hero>.media>.img-wrap>.movie{
width: 100%;
height: 100vh;
object-fit: cover;
display: block;
}
.hero.-sp>.home-hero>.media>.img-wrap.fade-in {
opacity: 1;
}
.hero.-sp>.home-hero>.deco{
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 95%;
}
.hero.-sp>.home-hero>.deco>.content-box {
transition: filter 1s ease-in-out, transform 1s ease-in-out;
}
.hero.-sp>.home-hero>.deco>.content-box.shadow-on {
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
transform: translateY(-5px);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
.hero.-sp>.home-hero>.deco>.content-box.fade-out {
opacity: 0;
transform: translateY(-10px);
}
.hero.-sp>.home-hero>.deco>.content-box>.main-ttl{
font-family: var(--font-sans);
line-height: 1.4;
letter-spacing: 0.09em;
font-weight: 600;
margin-bottom: var(--px-40);
text-align: center;
color: var(--color-white);
font-size: 34px;
}
.hero.-sp>.home-hero>.deco>.content-box>.main-txt{
font-size: var(--font-20);
font-family: var(--font-pop);
font-weight: 500;
line-height: 1.8;
margin-bottom: var(--px-46);
color: var(--color-white);
text-align: center;
}
.hero.-sp>.home-hero>.deco>.content-box>.badge-media{
width: min(602px,100%);
height: auto;
padding-bottom: var(--px-120);
margin-inline: auto;
}
.hero.-sp>.home-hero>.deco>.content-box>.badge-media.-second{
padding-bottom: var(--px-50);
}
.hero.-sp>.home-hero>.deco>.content-box>.badge-media>.badge-note{
font-size: var(--font-14);
font-family: var(--font-pop);
line-height: 1.8;
color: var(--color-white);
}
.hero.-sp>.home-hero>.content-box>.wrap>.section-ttl{
font-size: var(--font-32);
font-family: var(--font-zen);
font-weight: 700;
padding: var(--px-10);
margin-block: var(--px-120) var(--px-40);
display: inline-block;
line-height: 1.4;
background-color: var(--color-white);
color: var(--color-blue);
position: relative;
left: 50%;
transform: translateX(-50%);
}
.hero.-sp>.home-hero>.content-box>.wrap>.section-txt{
font-size: var(--font-20);
font-family: var(--font-pop);
margin-bottom: var(--px-20);
line-height: 2;
color: var(--color-white);
text-align: center;
}
.hero.-sp>.home-hero>.content-box>.wrap>.section-txt:first-of-type{
margin-bottom: 0;
}
.hero.-sp>.home-hero>.content-box>.wrap>.section-txt.-small{
font-size: var(--font-14);
line-height: 1.2;
}
.hero.-sp>.home-hero>.content-box>.wrap>.section-txt>span{
font-size: var(--font-14);
}
.hero.-sp>.home-hero>.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(5, 21, 64, 0.75);
opacity: var(--overlay-opacity, 0);
transition: opacity 0.1s ease-out;
}
.hero.-sp>.home-hero>.content>.wrap{
padding-block: var(--px-200);
padding-inline: 3%;
}
.hero.-sp>.home-hero>.content>.wrap {
opacity: 0;
transform: translateY(20px);
transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
.hero.-sp>.home-hero>.content>.wrap.show-after-logo {
opacity: 1;
transform: translateY(0);
}
.hero.-sp>.home-hero>.content>.wrap.appear {
opacity: 1;
transform: translateY(0);
}
.hero.-sp>.home-hero>.content>.wrap>.section-ttl{
font-size: var(--font-32);
font-family: var(--font-zen);
font-weight: 700;
padding: var(--px-10);
margin-block: var(--px-120) var(--px-40);
display: inline-block;
line-height: 1.4;
background-color: var(--color-white);
color: var(--color-blue);
position: relative;
left: 50%;
transform: translateX(-50%);
}
.hero.-sp>.home-hero>.content>.wrap>.section-txt{
font-size: var(--font-20);
font-family: var(--font-pop);
margin-bottom: var(--px-20);
line-height: 2;
color: var(--color-white);
text-align: center;
}
.hero.-sp>.home-hero>.content>.wrap>.section-txt:first-of-type{
margin-bottom: 0;
}
.hero.-sp>.home-hero>.content>.wrap>.section-txt.-small{
font-size: var(--font-14);
line-height: 1.2;
}
.hero.-sp>.home-hero>.content>.wrap>.section-txt>span{
font-size: var(--font-14);
}
.hero.-sp>.home-hero>.content>.wrap>.badge-media{
width: min(602px,100%);
height: auto;
padding-bottom: var(--px-120);
margin-inline: auto;
}
.hero.-sp>.home-hero>.content>.wrap>.badge-media.-second{
padding-bottom: var(--px-50);
}
.hero.-sp>.home-hero>.content>.wrap>.badge-media>.badge-note{
font-size: var(--font-14);
font-family: var(--font-pop);
line-height: 1.8;
color: var(--color-white);
}
@media (max-width:560px) {
.hero.-sp>.home-hero>.deco>.content-box>.main-ttl{
font-size: 25px;
}
} .chosen>.inner{
padding-inline: clamp(10px, 5.5555555556vw, 100px) 0;
padding-block: var(--px-120) var(--px-200);
}
.chosen>.inner>.body{
margin-top: var(--px-70);
}
.chosen>.inner>.body>.item{
position: relative;
z-index: 1;
}
.chosen>.inner>.body>.item+.item{
margin-top: var(--px-100);
}
.chosen>.inner>.body>.item>.media{
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.chosen>.inner>.body>.item>.media::before{
content: "";
display: block;
width: calc(100% - 538px);
height: 100%;
background-color: var(--color-gray-light);
opacity: 0.9;
position: absolute;
top: 0;
left: 0;
}
.chosen>.inner>.body>.item>.media>img{
width: 100%;
max-width: 1208px;
height: 100%;
min-height: 325px;
object-fit: cover;
}
.chosen>.inner>.body>.item>.content{
width: min(1126px,100%);
padding-top: var(--px-30);
}
.chosen>.inner>.body>.item>.content>.head{
border-left: 4px solid var(--color-blue);
}
.chosen>.inner>.body>.item>.content>.head>.ttl{
color: var(--color-blue);
font-family: var(--font-zen);
font-size: var(--font-40);
line-height: 1.8;
font-weight: 600;
display: flex;
align-items: center;
gap: 34px;
padding-left: 0.35em;
}
.chosen>.inner>.body>.item>.content>.head>.ttl>span{
font-size: var(--font-30);
font-weight: 400;
}
.chosen>.inner>.body>.item>.content>.head>.txt{
display: inline-block;
background-color: var(--color-blue);
color: var(--color-white);
font-family: var(--font-zen);
font-size: var(--font-20);
font-weight: 500;
line-height: 1.8;
padding-inline: clamp(10px, 4.6666666667vw, 84px) clamp(10px, 4.5555555556vw, 82px);
}
.chosen>.inner>.body>.item>.content>.txt{
padding-left: clamp(10px, 4.6666666667vw, 84px);
color: var(--color-black-b);
font-family: var(--font-pop);
font-size: var(--font-18);
font-weight: 400;
line-height: 2;
margin-top: var(--px-30);
}
@media (max-width:1440px) {
.chosen>.inner>.body>.item>.media::before{
width: 80%;
}
}
@media (max-width:1100px) {
.chosen>.inner>.body>.item>.media::before{
width: 90%;
}
}
@media (max-width:960px) {
.chosen>.inner{
padding-inline: 1em;
padding-bottom: 80px;
}
.chosen>.inner>.body>.item>.media{
position: unset;
}
.chosen>.inner>.body>.item>.media::before{
position: unset;
content: none;
}
.chosen>.inner>.body>.item>.media>img{
width: 100vw;
margin-inline: calc(50% - 50vw);
min-height: 127px;
}
.chosen>.inner>.body>.item>.content>.txt{
margin-bottom: var(--px-40);
padding-left: 0;
}
}
@media (max-width:767px) {
.chosen>.inner>.body>.item>.content>.head>.ttl{
flex-direction: column;
align-items: flex-start;
gap:0;
line-height: 1.4;
padding-bottom: 0.5em;
}
} .copy{
position: relative;
z-index: 1;
overflow: hidden;
}
.copy::before{
content: "";
position: absolute;
top: 0;
left: 0;
background-color: #efefef;
width: 25%;
max-width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
z-index: -1;
}
.copy>.inner{
padding-block: var(--px-60);
margin-inline: auto;
max-width: 750px;
width: 100%;
}
.copy>.inner>.ttl{
color: var(--color-blue);
font-family: var(--font-zen);
font-size: var(--font-40);
font-weight: 700;
line-height: 1.4;
margin-bottom: var(--px-40);
}
.copy>.inner>.txt{
color: var(--color-black-b);
font-family: var(--font-pop);
font-size: var(--font-18);
font-weight: 400;
line-height: 2;
}
@media (max-width:960px) {
.copy>.inner{
width: 80%;
}
} .comparison>.inner{
padding-block: var(--px-100);
padding-inline: clamp(10px, 5.5555555556vw, 100px);
}
@media (max-width:960px) {
.comparison>.inner{
padding-inline: 1em;
}
} .fee>.inner{
width: 100%;
margin-inline: auto;
padding-inline: 1em;
text-align: center;
position: relative;
z-index: 1;
}
.fee>.inner::before{
content: "";
position: absolute;
top: 0;
left: 0;
background-color: #efefef;
width: 15%;
max-width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
z-index: -1;
opacity: 0;
}
.fee>.inner::after{
content: "";
position: absolute;
top: 0;
right: 0;
background-color: #efefef;
width: 15%;
max-width: 100%;
height: 100%;
clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
z-index: -1;
opacity: 0;
}
@media (max-width:767px) {
.fee>.inner::after{
content: none;
}
.fee>.inner::before{
content: none;
}
} .bnr>.inner{
padding-block: var(--px-200) var(--px-30);
padding-inline: 1em;
text-align: center;
}
.bnr>.inner>.link{
opacity: 1;
}
@media (hover : hover) {
.bnr>.inner>.link:hover{
opacity: 0.65;
} 
}
@media (max-width:960px) {
.bnr>.inner{
padding-top: 80px;
}
} .customer>.inner{
padding-block: var(--px-100);
padding-inline: clamp(10px, 5.5555555556vw, 100px);
} .pie-chart>.inner{
padding-left: clamp(10px, 16.6666666667vw, 300px);
position: relative;
z-index: 5;
}
.pie-chart>.inner::before{
content: "";
position: absolute;
top: 0;
right: 0;
background-color: #efefef;
width: 25%;
max-width: 100%;
height: 100%;
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
z-index: -2;
overflow: hidden;
opacity: 0;
}
.pie-chart>.inner::after{
content: "";
position: absolute;
top: 0;
right: 0;
background-image: url(//preporesearch.jp/wp-content/themes/purepo/img/arrow-bg.png);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
width: 25%;
max-width: 100%;
height: 100%;
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
z-index: -1;
opacity: 0;
}
.pie-chart>.inner>.media{
padding-bottom: var(--px-80);
}
@media (max-width:1240px) {
.pie-chart>.inner{
padding-left: 1em;
}
}
@media (max-width:767px) {
.pie-chart>.inner::after{
clip-path: polygon(25% 50%, 100% 50%, 100% 100%, 25% 100%, 0 75%);
}
.pie-chart>.inner::before{
clip-path: polygon(25% 50%, 100% 50%, 100% 100%, 25% 100%, 0 75%);
}
} .customer-content>.inner{
padding-inline: 1em clamp(10px, 11.1111111111vw, 200px);
padding-block: var(--px-70);
position: relative;
z-index: 5;
overflow: hidden;
}
.customer-content>.inner::before{
content: "";
position: absolute;
top: 0;
left: 0;
background-color: #efefef;
width: 30%;
max-width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
z-index: -2;
overflow: hidden;
opacity: 0;
}
.customer-content>.inner::after{
content: "";
position: absolute;
top: 0;
left: 0;
background-image: url(//preporesearch.jp/wp-content/themes/purepo/img/arrow-bg-02.png);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
width: 30%;
max-width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
z-index: -1;
opacity: 0;
}
.customer-content>.inner>.content{
max-width: 832px;
margin-left: auto;
}
.customer-content>.inner>.content>.txt,
.customer-content>.inner>.content>.second-txt{
color: var(--color-black-b);
font-family: var(--font-pop);
font-size: var(--font-18);
line-height: 2;
}
.customer-content>.inner>.content>.txt{
margin-bottom: var(--px-30);
}
.customer-content>.inner>.content>.second-txt{
margin-top: var(--px-30);
}
.customer-content>.inner>.content>.ttl{
color: var(--color-blue);
font-family: var(--font-zen);
font-size: var(--font-40);
font-weight: 700;
line-height: 1.6;
}
@media (max-width:960px) {
.customer-content>.inner{
padding-right: 1em;
}
}
@media (max-width:767px) {
.customer-content>.inner::after,
.customer-content>.inner::before{
clip-path: polygon(0% 0%, 55% 0, 100% 50%, 55% 100%, 0% 100%);
}
} .flow{
padding-block: var(--px-100) var(--px-80);
}
.flow>.inner{
padding-block: 0 var(--px-80);
padding-inline: clamp(10px, 5.5555555556vw, 100px);
}
.flow>.content-inner{
width: min(1100px,95vw);
margin-inline: auto;
}
.flow>.content-inner>.item>.list{
display: flex;
border: 1px solid #B7CADA;
}
.flow>.content-inner>.item>.list+.list{
border-top: none;
}
.flow>.content-inner>.item>.list>.flow-left{
position: relative;
width: 100%;
min-width: 110px;
max-width: 200px;
min-height: 250px;
background-color: var(--color-blue);
display: flex;
justify-content: center;
align-items: center;
}
.flow>.content-inner>.item>.list>.flow-left>.number{
color: var(--color-white);
text-align: center;
font-family: var(--font-bah);
font-size: var(--font-26);
font-weight: 500;
line-height: 1.8;
}
.flow>.content-inner>.item>.list>.flow-left>.deco{
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
display: block;
width: 30px;
height: 16px;
background-color: var(--color-white);
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
transition: var(--transition-duration) var(--transition-timing-function);
-webkit-mask-image: var(--icon-scroll);
mask-image: var(--icon-scroll);
}
.scroll-anime{
animation: arrowDropLoop 2s ease-in-out infinite;
}
@keyframes arrowDropLoop{
0%{
transform: translateY(-15px) translateX(-50%);
opacity: 0;
}
10%{
opacity: 1;
}
40%{
transform: translateY(0) translateX(-50%);
opacity: 1;
}
60%{
transform: translateY(15px) translateX(-50%);
opacity: 0;
}
100%{
transform: translateY(-15px) translateX(-50%);
opacity: 0;
}
}
.flow>.content-inner>.item>.list>.flow-right{
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
gap: clamp(10px, 5.5555555556vw, 100px);
padding-block: var(--px-40) var(--px-50);
padding-inline: clamp(10px, 5.5555555556vw, 100px);
}
.flow>.content-inner>.item>.list>.flow-right>.content{
width: 80%;
}
.flow>.content-inner>.item>.list>.flow-right>.content>.ttl{
color: var(--color-navy-b);
font-family: var(--font-zen);
font-size: var(--font-22);
font-weight: 600;
line-height: 2;
margin-bottom: var(--px-20);
letter-spacing: 0;
}
.flow>.content-inner>.item>.list>.flow-right>.content>.txt{
color: var(--color-black-b);
font-family: var(--font-pop);
font-size: var(--font-15);
line-height: 2;
letter-spacing: 0;
}
@media (max-width:767px) {
.flow>.content-inner>.item>.list>.flow-left{
width: auto;
min-width: 95px;
}
.flow>.content-inner>.item>.list>.flow-right{
padding-inline: 1em;
}
.flow>.content-inner>.item>.list>.flow-right>.content{
width: 100%;
}
.flow>.content-inner>.item>.list>.flow-right>.content>.ttl{
display: flex;
align-items: center;
gap: 17px;
}
} .faq{
position: relative;
z-index: 1;
margin-top: var(--px-80);
overflow: hidden;
}
.faq::before{
content: "";
background-color: #efefef;
clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
width: 45%;
height: 100%;
background-color: #efefef;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.faq::after{
content: "";
background-image: url(//preporesearch.jp/wp-content/themes/purepo/img/faq-img.jpg);
background-position: bottom right;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.5;
width: 60%;
height: 100%;
z-index: -2;
position: absolute;
top: 0;
right: 0;
}
.faq>.inner{
width: min(700px,95vw);
margin-inline: auto;
padding-block: var(--px-80) var(--px-70);
}
.faq>.inner>.flx{
display: flex;
align-items: center;
justify-content: space-between;
}
.faq>.inner>.flx>.content{
display: flex;
align-items: center;
flex-direction: column;
gap: 10px;
}
.faq>.inner>.flx>.content>.ttl{
color: var(--color-blue);
font-family: var(--font-zen);
font-size: var(--font-60);
font-weight: 300;
}
.faq>.inner>.flx>.content>.txt{
color: var(--color-gray-c);
font-family: var(--font-zen);
font-size: var(--font-16);
font-weight: 500;
}
@media (max-width:560px) {
.faq>.inner>.flx{
display: block;
}
.faq>.inner>.flx>.content{
align-items: flex-start;
margin-bottom: 50px;
}
.faq::after{
background-image: url(//preporesearch.jp/wp-content/themes/purepo/img/faq-sp-img.jpg);
}
} .price>.inner{
padding-block: var(--px-120) var(--px-80);
padding-inline: clamp(10px, 5.5555555556vw, 100px);
}
.price>.inner.-second{
padding-top: 0;
}
.price>.content-inner{
position: relative;
}
.price>.content-inner::before{
content: "";
position: absolute;
top: 0;
left: 0;
background-color: #efefef;
width: clamp(100px, 16.6666666667vw, 300px);
max-width: 100%;
height: 100%;
clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
z-index: -1;
opacity: 0;
}
.price>.content-inner::after{
content: "";
position: absolute;
top: 0;
right: 0;
background-color: #efefef;
width: clamp(100px, 16.6666666667vw, 300px);
max-width: 100%;
height: 100%;
clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
z-index: -1;
}
.price>.content-inner>.media{
padding-block: 1em 2em;
text-align: center;
}
.price>.content-inner>.media>img{
width: min(838px,90%);
margin-inline: auto;
}
@media (max-width:767px) {
.price>.content-inner::after{
width: 10%;
clip-path: polygon(80% 0, 100% 0%, 100% 100%, 0% 100%);
}
.price>.content-inner::before{
width: 10%;
clip-path: polygon(0 0, 100% 0%, 25% 100%, 0% 100%);
}
.price>.content-inner>.media{
text-align: center;
}
.price>.content-inner>.media>img{
width: 70%;
}
} .contact{
position: relative;
overflow: hidden;
z-index: 1;
margin-block: var(--px-120) 0;
}
.contact::before{
content: "";
position: absolute;
top: 0;
right: 0;
background-color: #efefef;
width: 840px;
max-width: 65%;
height: 100%;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 8% 50%);
z-index: -2;
}
.contact::after{
content: "";
position: absolute;
top: 0;
right: 0;
background-image: url(//preporesearch.jp/wp-content/themes/purepo/img/contact-bg.png);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 8% 50%);
opacity: 0.15;
width: 840px;
max-width: 65%;
height: 100%;
z-index: -1;
}
.contact>.inner{
width: min(1611px,95vw);
margin-inline: auto;
padding-block: var(--px-30);
}
.contact>.inner>.flx{
display: flex;
justify-content: space-between;
align-items: center;
gap: 2.5em;
}
@media (max-width:960px) {
.contact{
margin-top: 0;
}
}
@media (max-width:767px) {
.contact>.inner>.flx{
flex-direction: column;
gap: 1.5em;
}
.contact>.inner>.flx>.item.content{
text-align: center;
}
.contact>.inner>.flx>.item.media,
.contact>.inner>.flx>.item.media>.action>.link{
width: 100%;
}
.contact>.inner>.flx>.item>img{
width: 80%;
}
}
@media (max-width:560px) {
.contact>.inner>.flx>.item>img{
width: 100%;
}
} .footer>.inner{
background-color: var(--color-blue);
padding-block: var(--px-40);
padding-inline: var(--px-110) 1em;
}
.footer>.inner>.flx{
display: flex;
gap: 10px;
}
.footer>.inner>.flx>.item{
color: var(--color-white);
}
.footer>.inner>.flx>.item>.first-name{
color: #efefef;
font-family: var(--font-sans);
font-size: var(--font-15);
line-height: 1.8;
}
.footer>.inner>.flx>.item>.name{
font-family: var(--font-pop);
font-size: var(--font-17);
font-weight: 600;
line-height: 2;
}
.footer>.inner>.flx>.item>.info{
display: flex;
align-items: center;
gap: .3em 1em;
flex-wrap: wrap;
}
.footer>.inner>.flx>.item>.info>.addr,
.footer>.inner>.flx>.item>.info>.tel{
font-family: var(--font-pop);
font-size: var(--font-15);
line-height: 2;
}
.footer>.nav{
display: flex;
gap: var(--px-40);
padding-block: var(--px-30);
padding-inline: var(--px-110) 1em;
}
.footer>.nav>.menu{
color: var(--color-navy-b);
font-family: var(--font-pop);
font-size: var(--font-14);
line-height: 2;
}
.footer>.nav>.menu>.link{
color: var(--color-navy-b);
font-family: var(--font-sans);
font-size: var(--font-14);
line-height: 2;
text-decoration-line: underline;
}
@media (hover : hover) {
.footer>.nav>.menu>.link:hover{
opacity: 0.65;
}
}
@media (max-width:960px) {
.footer>.inner{
padding-left: 1em;
}
.footer>.nav{
padding-left: 1em;
}
}
@media (max-width:767px) {
.footer>.inner>.flx{
flex-direction: column;
}
.footer>.inner>.flx>.item>.info{
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.footer>.nav{
flex-direction: column;
gap: 0;
}
} .c-breadcrumb {
--c-breadcrumb-list-gutter-x: 1em;
--c-breadcrumb-list-gutter-y: .4em;
}
.c-breadcrumb {
font: inherit;
line-height: 1;
}
.c-breadcrumb > .list {
display: flex;
flex-wrap: wrap;
gap: var(--c-breadcrumb-list-gutter-y) var(--c-breadcrumb-list-gutter-x);
margin: 0;
padding: 0;
list-style: none;
}
.c-breadcrumb > .list > .item {
display: flex;
align-items: center;
}
.c-breadcrumb > .list > .item::after {
content: "";
flex: 0 0 auto;
margin-left: var(--c-breadcrumb-list-gutter-x);
}
.c-breadcrumb > .list > .item:last-child::after {
display: none;
}
.c-breadcrumb > .list.-right {
justify-content: right;
text-align: right;
}
.c-breadcrumb {
font-size: 14px;
line-height: 1.4;
color: var(--color-gray-c);
}
.c-breadcrumb > .list {
align-items: center;
min-height: 3.4em;
padding: 0.6em 0;
}
.c-breadcrumb > .list > .item::after {
content: "";
display: block;
width: 10px;
height: 6px;
background-color: var(--color-black);
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
transition: var(--transition-duration) var(--transition-timing-function);
-webkit-mask-image: var(--icon-right-arrow);
mask-image: var(--icon-right-arrow);
}
.c-breadcrumb > .list > .item > .link{
color: var(--color-black-b);
}
@media (hover : hover) {
.c-breadcrumb > .list > .item > .link:hover {
text-decoration: underline;
opacity: 1;
}
}
@media (min-width: 960px) {
.c-breadcrumb {
width: 100%;
}
} .page-container{
padding-block: var(--px-130) var(--px-200);
width: min(1300px,95%);
margin-inline: auto;
}
.page-container.-contact{
width: min(972px,95%);
margin-inline: auto;
}
.page-header{
margin-top: var(--px-80);
}
.section{
margin-top: var(--px-60);
} .privacy{
line-height: 2.2;
}
.privacy_wrap > h2{
position: relative;
font-size: var(--font-28);
font-weight: bold;
border-bottom: 1px solid #CECACA;
margin-bottom: 0.5em;
font-family: var(--font-zen);
}
.privacy_wrap > h2::after{
content: "";
position: absolute;
bottom: -1%;
left: 0;
width: 20%;
border-top: 2px solid var(--color-blue);
}
.privacy_wrap{
margin: 2em 0;
}
.privacy_wrap > p{
font-size: var(--font-16);
}
.privacy_wrap>.list{
padding-left: 1em;
margin-left: 1em;
text-indent: -1em;
}
@media (max-width:767px) {
.privacy_wrap>.list{
padding: 0.5em;
}
.privacy_wrap > h2{
line-height: 1.6;
}
} .c-contactForm {
font-size: 15px;
line-height: 1.6;
}
.other-container.-contact .note{
display: block;
}
.other-container .note{
display: none;
}
.c-contactForm>.note{
text-align: center;
margin-top: var(--px-60);
}
.c-contactForm>.note>.txt{
color: var(--color-black-b);
font-size: 16px;
line-height: 2;
}
.c-contactForm>.note>.txt>.link{
color: var(--color-blue);
font-size: 16px;
line-height: 2;
text-decoration-line: underline;
display: inline-flex;
align-items: center;
}
@media (hover : hover) {  
.c-contactForm>.note>.txt>.link:hover{
opacity: 0.65;
}
}
.c-contactForm > .list{
margin-top: var(--px-80);
}
.c-contactForm > .list > .item {
display: flex;
flex-direction: column;
gap: 1em 0;
padding: 1.2em 0;
border-bottom: 1px solid #BBBBBB;
}
@media (min-width: 768px) {
.c-contactForm > .list > .item {
flex-direction: row;
align-items: center;
}
}
.c-contactForm > .list > .item > .label {
display: flex;
align-items: center;
font-weight: 500;
color: var(--color-black-b);
font-feature-settings: "palt";
}
@media (min-width: 768px) {
.c-contactForm > .list > .item > .label {
flex: 0 0 auto;
width: 20em;
padding: calc(0.8em + 1px) 0;
}
}
.c-contactForm > .list > .item > .label > .-required {
color: #D0000C;
font-size: 13px;
}
.other-container.-contact .entry-form-field__privacy-check{
display: block;
}
.other-container .entry-form-field__privacy-check{
display: none;
}
.entry-form-field__privacy-check>.entry-form-field__privacy-check-inner{
margin-top: var(--px-40);
text-align: center;
}
.mwform-checkbox-field-text{
color: var(--color-black-b);
font-size: 16px;
line-height: 1.4;
}
.entry-form-field__privacy-check-inner>.-required {
color: #D0000C;
font-size: 13px;
}
.c-contactForm > .list > .item > .control {
flex: 1 1 0%;
}
.c-contactForm > .list > .item > .control.-grid{
display: grid;
grid-template-columns: repeat(1,1fr);
gap: 8px;
}
.mw_wp_form .horizontal-item + .horizontal-item{
margin-left: 0 !important;
}
.c-contactForm > .attention {
margin-top: 3em;
font-size: var(--font-14);
text-align: center;
}
.c-contactForm > .attention > .link {
text-decoration: underline;
color: var(--color-blue);
}
.c-contactForm > .action {
margin-top: var(--px-50);
text-align: center;
}
@media (min-width: 768px) {
.c-contactForm > .list > .item > .control.-radio {
align-self: center;
}
}
.mw_wp_form_confirm .c-contactForm > .list > .item > .control {
padding-block: calc(0.8em + 1px);
}
@media (max-width:560px) {
.mw_wp_form_confirm .c-contactForm > .list > .item > .control{
padding-block: 0;
}
}
.other-container>.read{
margin-top: var(--px-60);
}
.other-container>.read>.txt{
color: var(--color-black-b);
font-size: 16px;
line-height: 2;
}
.other-container>.read>.txt>span{
color: #D0000C;
}
.c-formControl {
box-sizing: border-box;
display: block;
width: 100%;
margin: 0;
margin-top: 5px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
line-height: inherit;
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c-formControl:disabled {
cursor: not-allowed;
}
.c-formControl::-moz-placeholder {
opacity: 0.25;
}
.c-formControl::placeholder {
opacity: 0.25;
}
textarea.c-formControl {
resize: vertical;
}
select.c-formControl {
padding-right: 2em;
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-formControl[multiple], select.c-formControl[size]:not([size="1"]) {
background-image: none;
}
.c-formControl.-auto {
display: inline-block;
width: auto;
}
.c-formControl {
padding: 0.8em 1em;
border: 1px solid #B8B8B8;
background: #F7FBFD;
font-size: 16px;
line-height: 1.6;
}
@media (min-width: 960px) {
.c-formControl {
font-size: var(--font-15);
}
}
.c-formControl.-typeArchive {
width: 15em;
}
.submit{
position: relative;
display: inline-block;
}
.c-btn.-c-contactForm-submit {
padding: 1em;
background: var(--color-blue);
border: 1px solid var(--color-blue);
text-align: center;
font-size: var(--font-18);
color: var(--color-white);
transition-property: background-color, color;
transition-duration: var(--transition-duration);
width: 360px;
max-width: 100%;
}
.submit::after{
content: "";
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
display: block;
width: 40px;
height: 40px;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
transition: var(--transition-duration) var(--transition-timing-function);
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
background-color: var(--color-white);
}
@media (hover : hover) { 
.submit:hover::after{
transform: translateY(-50%) translateX(5px);
}
}
@media (max-width:767px) {
.c-contactForm>.note>.txt{
text-align: left;
}
}
@media (max-width:560px) {
.c-btn.-c-contactForm-submit{
width: 100%;
}
.submit{
display: block;
}
} .c-typography.-contact{
margin-block: var(--px-60) var(--px-30);
text-align: center;
}
.c-typography.-contact > h2{
color: #D0000C;
}
.c-typography.-contact > h2.-complete{
text-align: center;
}
.c-typography.-contact > .action{
text-align: center;
display: block;
}
.c-typography.-contact > .action>.link{
text-decoration: none;
}
@media (max-width:560px) {
.c-typography.-contact{
text-align: left;
}
}
.c-typography {
--c-typography-elem-gap: 1lh;
--c-typography-a-color: var(--color-blue);
}
.c-typography {
display: block;
margin: 0;
padding: 0;
font: inherit;
line-height: 1;
text-align: justify;
word-break: break-all;
overflow-wrap: break-word;
color: inherit;
}
.c-typography :where(hr) {
border: none;
border-top: 1px solid currentColor;
color: inherit;
}
.c-typography :where(h1, h2, h3, h4, h5, h6) {
margin: 0;
}
.c-typography :where(h1:not(.c-heading), h2:not(.c-heading), h3:not(.c-heading), h4:not(.c-heading), h5:not(.c-heading), h6:not(.c-heading)) {
font: inherit;
line-height: inherit;
color: inherit;
}
.c-typography :where(ul:not(.c-list, .c-row), ol:not(.c-list, .c-row)) {
padding-left: 1.25em;
list-style: revert;
}
.c-typography strong {
font-weight: bolder;
}
.c-typography :where(a:-moz-any-link:not(.c-btn)) {
text-decoration: underline;
color: var(--c-typography-a-color);
}
.c-typography :where(a:any-link:not(.c-btn)) {
text-decoration: underline;
color: var(--color-red);
}
.c-typography :where(hr, dl, ol, ul, p, blockquote, figure, table, div:not(.c-row > .col)) {
margin-bottom: var(--c-typography-elem-gap);
}
.c-typography :where(hr, dl, ol, ul, p, blockquote, figure, table, div:not(.c-row > .col)):last-child {
margin-bottom: 0;
}
.c-typography :where(h1, h2, h3, h4, h5, h6) :first-child {
margin-top: 0;
}
.c-typography {
font-size: var(--font-15);
line-height: 2;
}
.c-typography h1, .c-typography h2, .c-typography h3, .c-typography h4, .c-typography h5, .c-typography h6 {
margin: 2em 0 1em;
}
.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 + :is(h2, h3, h4, h5, h6),
.c-typography h2 + :is(h3, h4, h5, h6),
.c-typography h3 + :is(h4, h5, h6),
.c-typography h4 + :is(h5, h6),
.c-typography h5 + h6 {
margin-top: 0;
}
.c-typography h2:not(.c-heading) {
font-weight: 500;
font-size: 1.4em;
line-height: 1.6;
}
.c-typography h3:not(.c-heading) {
font-weight: 500;
font-size: 1.2em;
line-height: 1.6;
}
.c-typography h4:not(.c-heading) {
font-weight: 500;
font-size: 1.1em;
line-height: 1.6;
}
.c-typography h5:not(.c-heading),
.c-typography h6:not(.c-heading) {
font-weight: 500;
line-height: 1.6;
}
.c-typography hr {
border-color: var(--color-gray-pale-b);
}
.c-typography .c-dataList > .item {
margin: 0;
}
.c-typography strong {
font-weight: 600;
} .top-fade {
opacity: 0;
}
.top-fade.active {
animation: fadeIn 1s ease-in-out forwards;
}
@media (max-width:960px) {
.top-fade.active {
animation: fadeIn 3s ease-in-out forwards;
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
}
.fade-in.active {
animation: fadeIn 1s ease-in-out forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.slide-in-up {
transform: translateY(100px);
opacity: 0;
}
.slide-in-up.active {
animation: slideInUp 1s ease-out forwards;
}
@keyframes slideInUp {
to {
transform: translateY(0);
opacity: 1;
}
}
.slide-left-in-up {
transform: translateX(100px);
opacity: 0;
}
.slide-left-in-up.active {
animation: slideLeft 1s ease-out forwards;
}
@keyframes slideLeft {
to {
transform: translateX(0);
opacity: 1;
}
}
.animation-delay-1{
animation-delay: 0.1s;
}
.animation-delay-2{
animation-delay: 0.3s;
}
.animation-delay-3{
animation-delay: 0.6s;
}
.animation-delay-4{
animation-delay: 0.9s;
}
.animation-delay-5{
animation-delay: 1.2s;
}
.-left-anime::before{
transform: translateX(-100px);
opacity: 0;
}
.-left-anime.active::before {
animation: slideLeft 1s ease-out forwards;
}
@keyframes slideLeft {
to {
transform: translateX(0);
opacity: 1;
}
}
.customer-content>.inner.-left-anime::after{
transform: translateX(-100px);
opacity: 0;
}
.customer-content>.inner.-left-anime.active::after {
animation: slideLeftOP 1s ease-out forwards;
}
@keyframes slideLeftOP {
to {
transform: translateX(0);
opacity: .15;
}
}
.-right-anime::after{
transform: translateX(100px);
opacity: 0;
}
.-right-anime.active::after {
animation: slideRight 1s ease-out forwards;
}
.pie-chart>.inner.-right-anime::before{
transform: translateX(100px);
opacity: 0;
}
.pie-chart>.inner.-right-anime.active::before {
animation: slideRight 1s ease-out forwards;
}
@keyframes slideRight {
to {
transform: translateX(0);
opacity: 1;
}
}
.pie-chart>.inner.-right-anime::after{
transform: translateX(100px);
}
.pie-chart>.inner.-right-anime.active::after {
animation: slideRightOP 1s ease-out forwards;
}
@keyframes slideRightOP {
to {
transform: translateX(0);
opacity: .15;
}
}
.text-animate .char.space {
width: 0.25em;
}
.text-animate {
display: inline-block;
opacity: 0;
} .text-animate[data-animated] {
opacity: 1;
}
.text-animate.text-animate .char {
display: inline-block;
opacity: 0;
animation: fadeInCharBottom 0.5s ease-in-out forwards;
}
@keyframes fadeInCharBottom {
from {
transform: translateY(20px);
opacity: 0;
}
to {
opacity: 1;
transform: translateY(0);
}
}