@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400..700&family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i,em{font-style:normal}
figure { margin: 0;}
a { color: #000; transition: all .2s ease-out; text-decoration: none;}
a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-size: 1.6rem; font-weight: 500; line-height: 1.8; letter-spacing: 0.02em; word-break: break-all; color: #000;}
#container { width: 100%; overflow: hidden;}
i, .archivo-narrow { font-family: "Archivo Narrow", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 700; vertical-align: baseline;}


/*HEADER*/
/*******************************************************************/
#nav { position: fixed; top: 0; left: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; width: 100%; min-height: 72px; padding: 10px 20px 10px 150px; background: #FFF; box-shadow: 0 4px 5px rgba(4,0,0,.1); font-weight: 700; white-space: nowrap; z-index: 1000; transition: .4s cubic-bezier(.645,.045,.355,1);}
#logo { position: fixed; top: 0; left: 0; z-index: 2000;}
#logo a { display: flex; justify-content: center; align-items: center; width: 150px; height: 72px; background: #FFF;}
@media only screen and (min-width: 1201px){
#header.hideheader:not(.is-fixed) #nav { transform: translateY(-100%); opacity: 0;}
#nav > ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 48px; margin-right: 38px; white-space: nowrap;}
#open { display: none;}
}


/*FOOTER*/
/*******************************************************************/
#footer { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px; width: 86%; max-width: 1200px; margin: 0 auto; padding: 40px 0;}
#footer::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 1px; background: #AAAAAA;}
#footer ul { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 1.4rem; font-weight: 500;}
.copyright { align-self: flex-end; margin-left: auto; font-weight: 500;}


/*CONTENTS*/
/*******************************************************************/
article { position: relative; padding: 160px 0;}
article header, article nav { position: relative; width: 86%; max-width: 1200px; margin: 0 auto 32px; text-align: center; z-index: 10;}
article header h1 { margin-bottom: 56px; font-size: 4.8rem;}
article header h2 { font-size: 4.6rem;}
section { position: relative; width: 86%; max-width: 1200px; margin: 0 auto; z-index: 10;}
section + header, section + section { margin-top: 56px;}
section p + p { margin-top: 1em;}
.center { text-align: center!important;}
.right { text-align: right!important;}
.left { text-align: left!important;}
.demo-btn, .dl-btn { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px 32px; text-align: center; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(88,88,88,1) 100%); border-radius: 80px; font-weight: 700; line-height: 1; color: #FFF;}
.dl-btn { background: rgb(5,114,171); background: linear-gradient(0deg, rgba(5,114,171,1) 0%, rgba(46,180,211,1) 100%); box-shadow: 0 4px 6px rgba(0,0,0,.15);}
.dl-btn-flex { display: flex; flex-direction: column; gap:8px;}
.demo-btn::after, .dl-btn::after { font: var(--fa-font-solid); content: ''; content: "\f054"; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block;}
.fs14 { font-size: 1.4rem;}
.fs18 { font-size: 1.8rem;}
.fs20 { font-size: 2.0rem;}
.fs24 { font-size: 2.4rem;}
.fs32 { font-size: 3.2rem;}
.medium { font-weight: 500;}
.bold { font-weight: 700;}
.red { color: #BE1920;}
.white { color: #FFF;}
.marker { display: inline; padding-bottom: 4px; background: linear-gradient(transparent 94%, #2EB4D3 0);}
.note { font-size: 1.2rem; font-weight: 500; color: #A0A0A0;}
.underline { text-decoration: underline;}
.sp { display: none;}
.fadeInUp{ animation-name: fadeInUp;}
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0);} to { opacity: 1; transform: translate3d(0, 0, 0);}}
@keyframes crossfade { 0% { opacity: 0;} 10% { opacity: 1;} 50% { opacity: 1;} 60% { opacity: 0;} 100% { opacity: 0;}}
.animated { opacity: 0; animation-duration: 0.4s; animation-delay: 0.1s; animation-fill-mode: both;}
.deco { position: absolute; font-size: 28rem; line-height: 1; color: #FFF; opacity: 0.12; white-space: nowrap; pointer-events: none;}


/*TOP*/
#mv { text-align: center; background: url("../img/top/mv01.jpg") right top no-repeat, url("../img/top/mv02.jpg") left center no-repeat; background-size: 50% auto, 42% auto;}
#mv::before { content: ''; position: absolute; top: -32%; left: 50%; width: 150vw; height: 414px; transform: translateX(-50%) rotate(-10deg); background: #BE1920;}
#mv::after { content: ''; position: absolute; top: 82%; left: 50%; width: 150vw; height: 800px; transform: translateX(-50%) rotate(-10deg); background: #BE1920; z-index: 0;}
.title { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; line-height: 1; white-space: nowrap;}
.title p { font-size: 3rem; line-height: 1.8;}
.title .tbox { width: 100%;}
.title .tbox span { display: inline-block; padding: 4px 8px 6px; background: #000; font-size: 3.5rem; color: #FFF;}
.title .tmain { display: flex; align-items: center; font-size: 5.8rem;}
.title .ng { margin-right: 8px; padding: 0 4px; border-left: 2px solid #000; border-right: 2px solid #000; font-size: 1.8rem; writing-mode: vertical-rl;}
.title i { font-size: 7.2rem;}
.title .sub { font-size: 5.1rem;}
.title .br { font-size: 4.6rem;}
#mv .title .tbox { font-size: 3.5rem;}
#mv .title .tbox em { font-size: 4rem;}
#mv .title .tmain { font-size: clamp(4rem,8vw,10rem);}
#mv .title .ng { font-size: 3.2rem;}
#mv .title i { font-size: clamp(4.25rem,10.5vw,12.5rem); text-shadow: 0 0 20px #FFF;}
.kv { display: grid; grid-template-columns: 40% 1fr; align-items: center; gap: 0 32px;}
.kv .title { grid-column: 1 / 3; grid-row: 1 / 2; margin-bottom: 32px;}
.kv figure { grid-row: 2 / 4;}
.kv ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 0 32px; white-space: nowrap;}
.kv li { display: flex; justify-content: center; align-items: center; padding: 16px; text-align: center; background: #BE1920; border-radius: 10px; font-size: 2.4rem; font-weight: 700; color: #FFF;}
.kv .dl-btn { padding-top: 24px; padding-bottom: 24px;}
.result { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px;}
.result ul { display: grid; grid-template-columns: repeat(3,146px); gap: 24px;}
.result p { width: 100%; font-size: 1.2rem; font-weight: 500;}
.result figcaption { position: relative; display: block; margin-bottom: 16px; padding-bottom: 4px; border-bottom: 2px solid #BE1920; font-size: 1.4rem; font-weight: 700;}
.result figcaption::before, .result figcaption::after { content: ''; position: absolute; top: 100%; left: calc(50% - 5px); display: block; width: 10px; height: 2px; z-index: 1;}
.result figcaption::before { background: #FFF;}
.result figcaption::after { transform-origin: left top; transform: rotate(45deg); background: #BE1920;}
.result figure img { width: 175px;}

#future { padding-top: 0;}
#future::before { content: ''; position: absolute; top: 20%; left: 50%; width: 150vw; height: 800px; transform: translateX(-50%) rotate(-10deg); background: #BE1920; z-index: 0;}
#future .deco1 { top: -0.4em; left: 50%;}
#future .deco2 { top: 40%; right: 100%;}
.problem { position: relative; max-width: 695px; padding: 24px 40px; text-align: center; background: #EEEEEE; border-radius: 10px;}
.problem::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translate(-50%,24px); width: 0; height: 0; border-style: solid; border-color: #ffffff transparent transparent transparent; border-width: 25px 30px 0px 30px;}
.problem h3 { display: inline-block; margin-bottom: 24px;}
.problem h3::after { content: ''; display: block; width: 202px; height: 1px; margin: 16px auto 0; background: #000;}
.problem ul { display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; text-align: left;}
.problem li { position: relative; padding-left: 32px; font-size: 2rem; font-weight: 700;}
.problem li::before { content: ''; position: absolute; top: 8px; left: 0; width: 18px; height: 18px; background: #C7C7C7; border-radius: 2px;}
.problem li::after { position: absolute; top: 6px; left: 4px; font: var(--fa-font-solid); content: "\f00c"; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; color: #BE1920;}
.problem figure { position: absolute; top: 40px; right: -56px;}
.solution ul { display: grid; grid-template-columns: 57% auto; gap: 40px 48px; margin-top: 16px;}
.solution li { padding: 24px; background: #FFF; border-radius: 10px;}
.solution01, .solution02 { text-align: center;}
.solution01 h4, .solution02 h4 { display: inline-block; margin-bottom: 16px; padding: 4px 32px; background: #000; border-radius: 40px; color: #FFF;}
.solution01 h4 { margin-bottom: -24px;}
.solution .solution03 { position: relative; grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr 4%; gap: 0 32px; border: 4px solid #BE1920; border-radius: 10px;}
.solution03 h4 { font-size: 5rem; line-height: 1.2;}
.solution03 h4 span { padding: 0 8px; border-left: 1px solid #000; border-right: 1px solid #000; font-size: 2.5rem;}
.solution03 h4 i { font-size: 6.2rem;}
.solution03 .solution-text { align-self: center; grid-column: 2 / 3; grid-row: 1 / 3;}
.solution03 figure { grid-column: 3 / 4; grid-row: 1 / 3; margin: -56px calc(50% - 50vw) -96px -64px;}
.solution03 .note { margin-top: -2em;}
.solution03 .dl-btn { align-self: flex-start; width: 100%; max-width: 450px; margin: 0 auto; padding: 24px;}

#strengths { padding-top: 0;}
#strengths .deco1 { top: -0.4em; left: 50%; transform: translateX(-50%); font-size: 39.7rem; color: #1b1b1b; opacity: 0.06;}
#strengths nav ul { display: flex; gap: 40px; margin-top: 120px;}
#strengths nav a { position: relative; display: flex; flex-direction: column; align-items: center; padding: 32px 0; background: #EEEEEE; border-radius: 10px; overflow: hidden;}
#strengths nav i { position: absolute; top: -0.2em; right: 0; font-size: 13rem; line-height: 1; color: #FFF;}
#strengths nav h3 { position: relative; padding-bottom: 4px; border-bottom: 2px solid #BE1920; font-size: 2.2rem; color: #BE1920;}
#strengths nav p { position: relative; padding: 16px 16px 24px; font-size: 1.8rem; font-weight: 700;}
.strengths { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 80px; margin-top: 120px;}
.strengths-text { position: relative;}
.strengths-text i { position: absolute; top: -0.1em; right: 0; font-size: 21.3rem; line-height: 1; opacity: 0.06; z-index: -1;}
.strengths-text h3 { margin-bottom: 40px; font-size: 3rem;}
.strengths-text h3 .red { font-size: 4rem;}
.strengths-text .box { display: grid; grid-template-columns: 1fr auto; gap: 16px; margin: 24px 0 8px; padding: 24px; text-align: center; background: #FFF; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.2);}
.strengths-text .box h4 { text-align: center; font-size: 2rem; color: #BE1920;}
.strengths-text .box figure { grid-column: 2 / 3; grid-row: 1 / 3;}
.strengths-text .box p { font-size: 1.4rem; font-weight: 700;}
.strengths-img { position: relative; margin-right: calc(100% - 50vw);}
.strengths-text2 { grid-column: 1 / 3; text-align: center;}
.strengths-text2 h4 { margin-bottom: 32px; font-size: 2.6rem;}
.strengths-text2 ul { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; white-space: nowrap;}
.strengths-text2 li { flex: 1; display: flex; justify-content: center; align-items: center; padding: 24px; background: #FFF; border: 4px solid #BE1920; border-radius: 10px; font-size: 1.8rem; font-weight: 700; color: #BE1920;}
.report { display: grid; grid-template-columns: 35% auto 1fr; align-items: center; gap: 32px;}
.report ul { grid-template-columns: repeat(2,1fr);}
.report li { padding: 8px;}
.report .arrow { position: relative; display: flex; justify-content: center; align-items: center; height: 60px; padding: 8px 16px; background: #BE1920; font-size: 1.8rem; font-weight: 700; color: #FFF;}
.report .arrow::after { content: ''; position: absolute; top: 50%; left: 100%; transform: translate(-30%,-50%); width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #be1920; border-width: 42px 0px 42px 36px;}
#strengths01 .strengths-img { display: flex; gap: 40px; background: url("../img/top/strengths01_bg.jpg") left center no-repeat; background-size: 100% auto;}
#strengths01 .strengths-img figure { max-width: 239px;}
#strengths01 .strengths-img figure:first-child { margin-top: 88px;}
#strengths01::before, #strengths02::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 150vw; height: 391px; transform: translateX(-50%) rotate(-10deg); background: #EEEEEE; z-index: -1;}
#strengths02 .strengths-text .box { grid-template-columns: auto 1fr;}
#strengths02 .strengths-text .box figure { grid-column: 1 / 2;}
#strengths02 .strengths-img { order: -1; margin-right: 0; margin-left: calc(100% - 50vw); text-align: right; background: url("../img/top/strengths02_bg.jpg") right center no-repeat; background-size: 100% auto;}
#strengths03 .strengths-text .box { grid-template-columns: 1fr;}
#strengths03 .strengths-img::before { content: ''; position: absolute; top: 50%; right: 0; width: 46vw; height: 1137px; background: url("../img/top/strengths03_bg.jpg") right top no-repeat; background-size: contain; z-index: -1;}
.strengths-end .title { gap: 16px;}
.strengths-end::before { content: ''; position: absolute; bottom: -20%; left: 50%; width: 150vw; height: 800px; transform: translateX(-50%) rotate(-10deg); background: #BE1920; z-index: -1;}
.strengths-end .problem::after { display: none;}
.strengths-end .problem ul { grid-template-columns: 1fr;}
.cta { display: grid; grid-template-columns: 57% 1fr; align-items: center; gap: 40px; margin-top: 40px;}
.cta-box { position: relative; grid-column: 1 / 3; display: grid; grid-template-columns: 37.5% 1fr; gap: 40px; padding: 40px; background: #FFF; border-radius: 10px;}
.cta-box h3 { display: inline; padding-bottom: 4px; background: linear-gradient(transparent 90%, #2EB4D3 0); font-size: 1.8rem;}
.cta-box .pdf { position: absolute; top: -16px; right: 40px;}
.cta-box .dl-btn { max-width: 450px; margin: 24px auto; padding-top: 24px; padding-bottom: 24px;}
.cta-txtlink {
	text-align: center;
}
.cta-txtlink a {
	text-decoration: underline;
}
.demo { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px 40px; background: #CEE0E4; border-radius: 10px;}
.demo p { font-size: 1.4rem; font-weight: 700;}
.movie figcaption { display: flex; justify-content: center; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 2.2rem; font-weight: 700; white-space: nowrap;}
.movie figcaption::before, .movie figcaption::after { content: ''; width: 100%; height: 2px; background: #000;}
.video video { width: 100%; border-radius: 10px; overflow: hidden;}

#function .deco1 { top: -0.4em; left: 0; z-index: 10;}
#function h3 { margin-bottom: 16px; font-size: 2.4rem;}
#function h3.center { margin-top: 40px; font-size: 3rem;}
#function ul { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px;}
#function li { position: relative; padding: 12px; background: #FFF; border: 2px solid #BE1920; border-radius: 10px; font-size: 1.8rem; font-weight: 700; color: #BE1920;}
#function li span { position: absolute; top: -16px; right: -16px; display: flex; justify-content: center; align-items: center; transform: rotate(10deg); width: 56px; height: 56px; background: #898989; border-radius: 50%; font-size: 1.4rem; font-weight: 700; color: #FFF;}
#function li p {
	color: #000;
    font-size: 1.4rem;
    font-weight: 500;
    margin: 10px 0 0 0;
}

#case { padding-top: 0;}
#case .deco1 { top: -0.4em; left: 50%; font-size: 39.7rem; color: #1b1b1b; opacity: 0.06;}
#case p { margin-bottom: 32px;}
#case figure { margin-bottom: 8px;}
.casetext { position: relative;}
.casetext span { position: absolute; bottom: 0; right: 0;}
.interview { display: grid; grid-template-columns: 46% 1fr; gap: 40px;}
.interview h3 { border-bottom: 2px solid #BE1920; font-size: 2rem; color: #BE1920;}
.interview ul { margin: 16px 0 24px 1em; list-style: disc; font-weight: 700; line-height: 1.8;}

#support { padding-top: 0; text-align: center;}
#support::before { content: ''; position: absolute; top: 0; left: 50%; width: 150vw; height: 800px; transform: translateX(-50%) rotate(-10deg); background: #CEE0E4; z-index: 0;}
#support ul { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; margin-bottom: 32px;}
#support li { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px 8px; background: #FFF; border-radius: 10px; text-align: center; box-shadow: 0 4px 27px rgba(0,0,0,.1);}
#support li p { font-size: 1.8rem; font-weight: 700;}
#support section > p { display: inline; padding-bottom: 4px; background: linear-gradient(transparent 94%, #000 0);}

#request { padding-top: 80px; color: #FFF;}
#request::before { content: ''; position: absolute; top: 0; left: 50%; width: 150vw; height: 800px; transform: translateX(-50%) rotate(-10deg); background: #BE1920; z-index: 0;}
#request::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: #BE1920; z-index: 0;}
#request header { margin-bottom: 120px;}
#request .deco1 { top: -0.35em; left: 50%; transform: translateX(-50%);}
#request .title .ng { border-color: #FFF;}
.request .title .br { font-size: 4.6rem;}
#request .request-text h3::before, #request .request-text h3::after { background: #FFF;}
.request .movie figcaption { margin-bottom: 16px;}
#request .movie figcaption::before, #request .movie figcaption::after { background: #FFF;}
.request .demo { margin-top: 40px; color: #000;}
.request { display: grid; grid-template-columns: 605px 1fr; grid-template-rows: auto 1fr; gap: 0 80px;}
.request-text .title { justify-content: flex-start; gap: 14px;}
.request-text .title .tmain {font-size: 5.4rem;}
.request-text h3 { display: flex; justify-content: center; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 3rem; white-space: nowrap;}
.request-text h3::before, .request-text h3::after { content: ''; width: 100%; height: 2px; background: #000;}
.request-text .problem { display: grid; grid-template-columns: 1fr 50%; align-items: center; gap: 24px; margin: 24px 0 40px; background: #FFF; color: #222; box-shadow: 0 4px 27px rgba(0,0,0,.1);}
.request-text .problem::after { display: none;}
.request-text .problem ul { grid-template-columns: 1fr; gap: 0;}
.request-text .problem li { font-size: 1.8rem; line-height: 1.8;}
.request-text .problem li::before { background: #E5E5E5;}
.request-text .problem figure { position: relative; top: 0; left: 0;}
.request-form { grid-column: 2 / 3; grid-row: 1 / 3;}
#request .request-form { padding: 32px 16px; background: #FFF; border-radius: 10px;}
.demonstration .request-text .problem { grid-template-columns: 1fr 45%; padding-left: 24px; padding-right: 24px;}


/*PAGE*/
.thanks section { max-width: 756px; padding: 40px; text-align: center; background: #F1E1E2;}
.dl section { max-width: 756px; padding: 40px; text-align: center; background: #CEE0E4;}
.dl .dl-btn { max-width: 400px; margin: 40px auto 0;}
.back { margin-top: 56px; text-align: center;}
.back a { text-decoration: underline;}





@media only screen and (max-width: 1200px){
#logo { position: absolute; z-index: 500;}
#logo a { width: 100px; height: 50px; padding: 0 20px;}
#nav { pointer-events: none; opacity: 0; top: -24px; right: 0; flex-direction: column; justify-content: center; align-items: stretch; height: 100vh; height: 100svh; padding: 80px 40px 64px; text-align: center; overflow-y: auto; overscroll-behavior: contain;}
#nav ul { width: 100%; margin: 24px 0; border-bottom: 1px solid #AAAAAA;}
#nav li { padding: 16px 0; border-top: 1px solid #AAAAAA;}
#nav .demo-btn, #nav .dl-btn { width: 100%; max-width: 450px; margin-left: auto; margin-right: auto;}
#nav .demo-btn { order: 1;}
#open { position: fixed; top: 10px; right: 10px; display: block; width: 56px; height: 56px; background: #FFF; border-radius: 10px; box-shadow: 0 4px 27px rgba(0,0,0,.1); cursor: pointer; z-index: 9999;}
#open span { position: absolute; left: 13px; display: block; width: 30px; height: 2px; background: #BE1920; transition: .2s linear;}
#open span:nth-child(1) { top: 17px;}
#open span:nth-child(2) { top: 27px;}
#open span:nth-child(3) { top: 37px;}
.open #open span:nth-child(1) { top: 27px; transform: rotate(30deg);}
.open #open span:nth-child(2) { width: 0; left: -26px;}
.open #open span:nth-child(3) { top: 27px; transform: rotate(-30deg);}
.open #nav { pointer-events: auto; opacity: 1; top: 0;}
#footer { flex-direction: column;}
#footer ul { order: -1;}
.copyright { align-self: center; margin-left: 0; font-size: 1.2rem;}


/*CONTENTS*/
/*******************************************************************/
article { padding: 56px 0;}
article header h1 { margin: 56px 0 0; font-size: 2.6rem;}
article header h2 { font-size: 2.6rem;}
.demo-btn, .dl-btn { padding: 16px 20px 20px!important; font-size: 1.8rem!important;}
.demo-btn::after, .dl-btn::after { margin: 4px 8px 0 -16px;}
.fs18 { font-size: 1.8rem;}
.fs20 { font-size: 1.8rem;}
.fs24 { font-size: 1.8rem;}
.fs32 { font-size: 2.2rem;}
.sp { display: block;}
.pc { display: none!important;}
.deco { font-size: 12.4rem;}


/*TOP*/
#mv { padding-top: 30%; background-size: 80% auto, 70% auto;}
#mv::before { top: auto; bottom: calc(100% - 30px);}
#mv::after { top: 70%;}
.title p { font-size: 2rem; white-space: normal;}
.title .tbox span { font-size: clamp(1.5rem,3vw,3rem);}
.title .tmain { display: grid; grid-template-columns: 1fr auto; gap: 0 4px; font-size: clamp(2.6rem,5.6vw,5.6rem);}
.title .ng { align-self: flex-end; display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; border: none; font-size: clamp(1.5rem,3vw,3rem); writing-mode: horizontal-tb;}
.title .ng::before, .title .ng::after { content: ''; width: 100%; height: 2px; background: #000;}
.title i { grid-column: 2 / 3; grid-row: 1 / 3; font-size: clamp(7rem,14vw,14rem);}
.title .sub { font-size: clamp(2.6rem,5.2vw,5.2rem);}
.title .br { font-size: clamp(2.3rem,4.6vw,4.6rem);}
#mv .title .tbox span { font-size: clamp(1.5rem,3vw,3rem);}
#mv .title .tbox em { font-size: clamp(1.6rem,3.2vw,3.2rem);}
#mv .title .tmain { font-size: clamp(2.6rem,5.6vw,5.6rem);}
#mv .title .ng { font-size: clamp(1.5rem,3vw,3rem);}
#mv .title i { font-size: clamp(7rem,14vw,14rem);}
.kv { grid-template-columns: 1fr; gap: 16px;}
.kv .title { grid-column: auto; grid-row: auto; margin-bottom: 0;}
.kv figure { grid-row: auto; width: 60%; margin: 0 auto;}
.kv ul { order: -1; gap: 10px; margin: 0;}
.kv li { padding: 8px; font-size: 1.5rem;}
.result { flex-direction: column;}
.result ul { grid-template-columns: repeat(3,1fr); gap: 0;}
.result p { text-align: left; font-size: 1.1rem;}
.result figcaption { border-bottom-color: #FFF; font-size: 1.6rem; color: #FFF;}
.result figcaption::before { background: #BE1920;}
.result figcaption::after { background: #FFF;}

#future { background: #BE1920;}
#future::before { top: auto; bottom: -4%; height: 400px; background: #FFF;}
#future .deco1 { top: 50%; left: 50%; transform: translate(-50%,-50%);}
#future .deco2 { top: 0; right: auto; left: 50%; transform: translate(-50%,-16%);}
.problem { padding: 24px;}
.problem h3 { font-size: 1.8rem;}
.problem h3::after { width: 101px;}
.problem ul { grid-template-columns: 1fr; gap: 8px;}
#future .problem ul { padding-right: 30%;}
.problem li { font-size: 1.6rem;}
.problem figure { top: auto; bottom: -10px; right: 8px; width: 30%;}
.solution ul { grid-template-columns: 1fr; gap: 24px;}
.solution li { padding: 16px;}
.solution01 h4, .solution02 h4 { padding: 4px 16px; font-size: 1.4rem;}
.solution01 h4 { margin-bottom: 0;}
.solution01 figure { margin: -16px -48px 0;}
.solution02 figure { margin-left: -24px;}
.solution .solution03 { grid-column: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; border-width: 3px;}
.solution03 h4 { display: grid; grid-template-columns: 1fr auto; gap: 4px; text-align: center; font-size: 2.2rem;}
.solution03 h4 span { align-self: flex-end; display: flex; align-items: center; gap: 16px; margin: 0; padding: 0; border: none; font-size: 1.6rem; white-space: nowrap;}
.solution03 h4 span::before, .solution03 h4 span::after { content: ''; width: 100%; height: 2px; background: #000;}
.solution03 h4 i { grid-column: 2 / 3; grid-row: 1 / 3; font-size: 5.6rem; line-height: 1;}
.solution03 h4 br { display: none;}
.solution03 .solution-text { align-self: center; grid-column: auto; grid-row: auto;}
.solution03 .solution-text p.red { margin: 16px 0 24px; text-align: center; letter-spacing: -0.05em;}
.solution03 figure { grid-column: auto; grid-row: auto; display: none;}
.solution03 .note { position: absolute; bottom: -2em; right: 0; margin-top: 0;}
.solution03 .dl-btn { order: 1; font-size: 1.7rem;}

#strengths .deco1 { top: 50%; transform: translate(-50%,-50%); font-size: 11.8rem;}
#strengths .title .tbox span { font-size: 2rem;}
#strengths nav ul { flex-direction: column; gap: 32px; margin-top: 40px;}
#strengths nav a { padding: 24px 0;}
#strengths nav i { font-size: 11rem;}
#strengths nav h3 {font-size: 2rem;}
#strengths nav p { padding: 16px 16px 0; font-size: 1.6rem;}
#strengths nav figure { display: none;}
.strengths { grid-template-columns: 1fr; gap: 16px; margin-top: 56px;}
.strengths-text { padding-top: 56px;}
.strengths-text i { right: -8%;}
.strengths-text h3 { margin-bottom: 24px; text-align: center; font-size: 2rem;}
.strengths-text h3 .red { font-size: 2.4rem; letter-spacing: -0.05em;}
.strengths-text .box { grid-template-columns: auto 1fr; align-items: center; padding-left: 16px; padding-right: 16px;}
.strengths-text .box h4 { grid-column: 1 / 3; grid-row: 1 / 2; font-size: 1.6rem;}
.strengths-text .box figure { grid-column: 2 / 3; grid-row: 2 / 3;}
.strengths-text .box p { font-size: 1.4rem; font-weight: 700;}
.strengths-text .note.right { text-align: left!important;}
.strengths-img { margin-right: 0;}
.strengths-text2 { grid-column: auto;}
.strengths-text2 h4 { margin-bottom: 24px; font-size: 2.4rem;}
.strengths-text2 ul { grid-template-columns: 1fr; gap: 16px; white-space: normal;}
.strengths-text2 li { padding: 16px;}
.report { grid-template-columns: 1fr; justify-content: center;}
.report ul { grid-template-columns: repeat(2,1fr);}
.report .arrow { width: 130px; margin: 0 auto; padding: 8px;}
.report .arrow::after { top: 100%; left: 50%; transform: translate(-50%,0%); border-color: #be1920 transparent transparent transparent; border-width: 25px 80px 0px 80px;}
#strengths01 .strengths-img { position: relative; justify-content: center; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 24px 0; background: url("../img/top/strengths01_bg_sp.jpg") center no-repeat; background-size: 100% auto;}
#strengths01 .strengths-img figure { max-width: initial;}
#strengths01 .strengths-img figure:first-child { position: absolute; margin-top: 0; animation: 6s linear infinite crossfade;}
#strengths01::before { bottom: 4%; height: 450px;}
#strengths02::before { height: 700px;}
#strengths02 .strengths-img { order: 0; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); text-align: center; background: url("../img/top/strengths02_bg_sp.jpg") center no-repeat; background-size: 100% auto;}
#strengths02 .strengths-img figure { max-width: 400px; margin: 24px auto;}
#strengths03 .strengths-img { margin-top: 32px; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); text-align: center;}
#strengths03 .strengths-img::before { top: 90%; right: 0; width: 60vw;}
#strengths03 .strengths-img figure img { width: 100%;}

.strengths-end::before { bottom: -5%;}
.strengths-end::after { content: ''; position: absolute; top: 40%; left: 50%; width: 150vw; height: 800px; transform: translateX(-50%) rotate(-10deg); background: #BE1920; z-index: -1;}
.cta { grid-template-columns: 1fr; align-items: center; gap: 40px; margin-top: 40px;}
.cta figure { order: -1;}
.cta-box { grid-column: auto; grid-template-columns: 1fr; gap: 24px; padding: 24px 16px;}
.cta-box h3 { font-size: 1.5rem;}
.cta-box .pdf { position: relative; top: 0; right: 0; margin-top: 24px;}
.cta-txtlink { margin-bottom: 1em;}
.demo { grid-template-columns: 1fr; padding: 32px 20px; text-align: center; letter-spacing: -0.02em;}
.movie figcaption { font-size: 2rem;}

#function .deco1 { top: -0.4em; left: 50%; transform: translateX(-50%);}
#function h3 { font-size: 2rem;}
#function h3.center { font-size: 2rem;}
#function ul { grid-template-columns: repeat(2,1fr); gap: 8px;}
#function .dispatch li { display: flex; align-items: flex-start; min-height: 55px; padding: 8px; font-size: 1.2rem; line-height: 1.4; letter-spacing: 0; flex-direction: column; }
#function li { display: flex; align-items: center; min-height: 55px; padding: 8px; font-size: 1.2rem; line-height: 1.4; letter-spacing: 0;}
#function li span { position: absolute; top: -8px; right: -8px; width: 42px; height: 42px; font-size: 1.2rem;}
#function li p { font-size: 1.1rem;}

#case { padding-top: 0;}
#case .deco1 { transform: translateX(-50%); font-size: 19.8rem;}
#case p { margin-bottom: 32px;}
#case figure { max-width: 400px; margin: 0 auto 8px;}
.interview { grid-template-columns: 1fr; gap: 24px;}

#support ul { grid-template-columns: repeat(2,1fr); gap: 24px 8px;}
#support li { padding-top: 16px; padding-bottom: 16px;}
#support li p { font-size: 1.3rem;}
#support section > p { font-size: 1.7rem;}

#request header { margin-bottom: 40px;}
#request header h2 { font-size: 2.4rem;}
.request .title .tmain { display: flex; font-size: clamp(2.6rem,5.2vw,5.2rem);}
.request .title .ng { margin-right: 4px; padding: 0 2px; border-left: 2px solid #000; border-right: 2px solid #000; font-size: clamp(1.2rem,2.4vw,2rem); writing-mode: vertical-rl;}
#request .title .ng { border-color: #FFF;}
.request .title .ng::before, .request .title .ng::after { display: none;}
.request .title i { font-size: clamp(3.4rem,6.8vw,6.8rem);}
.request .title .br { font-size: clamp(2.3rem,4.6vw,4.6rem);}
.request .problem { max-width: initial; margin-bottom: 0;}
.request { grid-template-columns: 1fr; gap: 40px;}
.request-text .title { justify-content: flex-start;}
.request-text h3 { font-size: 1.6rem;}
.request-text h3::before, .request-text h3::after { content: ''; width: 100%; height: 2px; background: #000;}
.request-text .problem { grid-template-columns: 1fr; gap: 16px;}
.request-text .problem li { font-size: 1.6rem;}
.request-text .problem figure { bottom: auto; right: auto; width: auto;}
.request-movie { order: 1;}
.request-form { grid-column: auto; grid-row: auto;}


/*PAGE*/
.thanks section, .dl section { padding: 32px 16px;}
.back { margin-top: 32px;}
.demonstration .request-text .problem { grid-template-columns: 1fr;}
}





@media print {
#container { width: 1024px;}
.animated { opacity: 1;}
}



/*------- rn-mv -------*/
#rn-mv {
  background: url("../img/top/mv01.png") right top no-repeat, url("../img/top/mv02.png") left center no-repeat;
  background-size: 40% auto, auto 100%;
  padding: 100px 0 180px;
}
#rn-mv::after {content: ''; position: absolute; top: 82%; left: 50%; width: 150vw; height: 800px; transform: translateX(-50%) rotate(-10deg); background: #BE1920; z-index: 0;}
#rn-mv::before {
  content: '';
  display: block;
  width: 40%;
  height: 140px;
  clip-path: polygon(100% 0, 0 0, 0 100%);
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.rn-mv-inner {
  position: relative;
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 10;
  display: flex;
  justify-content: space-between;
}
.rn-mv-main {
  width: 55%;
}
.rn-mv-kv-title {
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
.rn-mv-kv-title .tbox {
  font-size: 3.1rem;
  line-height: 1.5;
  display: block;
  margin-bottom: 20px;
}
.rn-mv-kv-title .tmain {
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.rn-mv-kv-title .ng {
  font-size: 1.5rem;
  margin-right: 10px;
  padding: 0 10px;
  border: 2px solid #000;
  border-style: none solid;
  writing-mode: vertical-rl;
}
.rn-mv-kv-title i {
  font-size: 167%;
  line-height: 0.75;
  vertical-align: baseline;
}
.rn-mv-kv-air {
  width: 70%;
  max-width: 417px;
  margin: auto;
}

.rn-mv-kv-point {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto 10px;
}
.rn-mv-kv-point .point-ttl {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 2;
  margin-left: 15px;
}
.rn-mv-kv-point .point-marker {
  background: linear-gradient(transparent 70%, #fff001 70%);
}
.rn-mv-kv-point .point-circle {
  width: 30%;
  max-width: 158px;
}

.rn-mv-result {
  max-width: 640px;
  margin: 30px auto 0;
}
.rn-mv-result-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.rn-mv-result .note {
  color: #b5b5b5;
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: 15px;
}
.rn-mv-form {
  flex: 1;
  max-width: 500px;
  height: 100%;
  margin-left: 5%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 2.571px 3.064px 35px 0px rgba(0,0,0,.15);
  padding: 30px
}
.rn-mv-form .request-form-ttl {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px
}


@media only screen and (max-width: 1200px){

  #rn-mv {
    padding: 120px 0 100px;
    background: url(../img/top/mv01.jpg) right top no-repeat, url(../img/top/mv02.png) left 60% no-repeat;
    background-size: 280px auto, 80% auto;
  }
  #rn-mv::before {
    width: 60%;
    height: 80px;
  }
  #rn-mv::after {
    top: 70%;
  }
  .rn-mv-inner {
    width: 86%;
    display: block;
  }
  .rn-mv-main,
  .rn-mv-form {
    width: 100%;
  }

  .rn-mv-kv-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    grid-column: auto;
    grid-row: auto;
    margin-bottom: 0;
  }
  .rn-mv-kv-title .tbox {
    font-size: min(4.6vw, 3.1rem);
    margin-bottom: 10px;
  }
  .rn-mv-kv-title .tmain {
    font-size: min(8vw, 4.8rem);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 4px;
  }
  .rn-mv-kv-title .ng {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    border: none;
    font-size: min(4vw, 2rem);
    writing-mode: horizontal-tb;
    margin-bottom: 0.4em;
  }
  .rn-mv-kv-title .ng::before,
  .rn-mv-kv-title .ng::after {
    content: '';
    width: 100%;
    height: 2px;
    background: #000;
  }
  .rn-mv-kv-title i {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    font-size: 210%;
  }

  .rn-mv-kv-point {
    max-width: 600px;
    margin: 30px auto 10px;
    position: relative;
  }
  .rn-mv-kv-point .point-ttl {
    font-size: min(4.2vw, 2.2rem);
    text-align: center;
    margin: 0;
    padding-bottom: 20px;
  }
  .rn-mv-kv-point .point-circle {
    width: 24%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    transform: translateY(95%);
  }

  .rn-mv-result {
    margin-top: 20px;
  }
  .rn-mv-result-row {
    gap: 5px;
  }
  .rn-mv-result .note {
    font-size: 1rem;
  }

  .rn-mv-form {
    padding: 30px 15px;
    margin: 30px auto 0;
  }
  .rn-mv-form .request-form-ttl {
    font-size: 1.6rem;
  }
	
  .fs14 { 
	  font-size: 1.1rem;
	}
}