@charset "utf-8";

@font-face {
font-family: 'Rockwell Extra Bold';
src: url(//ff.t-denso.com/wp-content/themes/ff-202508/font/rockwell-extra-bold.ttf) ;
}
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Roboto:ital,wght@0,400;0,700;0,solution-card-base900;1,400;1,700;1,900&display=swap");
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css);
@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); .material-symbols-outlined {
font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
font-size: 1.7em;
vertical-align: middle;
}                             a{color: #2448be;}
a:hover{color: #657ed1;}
a.pointer-none{pointer-events: none;}
.frame-white{ border: 0.0625em solid #ffffff;}
.frame-lgray{ border: 0.0625em solid #f2f2f7;}
.frame-gray{ border: 0.0625em solid #6f6f6f;}
.frame-black{ border: 0.0625em solid #010101;}
.frame-base{ border: 0.0625em solid #162144;}
.frame-lblue{ border: 0.0625em solid #F8FBFF;}
.frame-blue{ border: 0.0625em solid #65C3FF;}
.frame-orange{ border: 0.0625em solid #FFB200;}
.frame-anchor{ border: 0.0625em solid #2448be;}
.frame-red{ border: 0.0625em solid #BE2448;}
.bg-white{ background-color: #FFFFFF;}
.bg-lgray{ background-color: #f2f2f7;}
.bg-gray{ background-color: #6f6f6f;}
.bg-black{ background-color: #010101;}
.bg-base{ background-color: #162144;}
.bg-lblue{ background-color: #F8FBFF;}
.bg-blue{ background-color: #65C3FF;}
.bg-orange{ background-color: #FFB200;}
.bg-anchor{ background-color: #2448be;}
.bg-red{ background-color: #BE2448;}
.c-white{ color: #FFFFFF;}
.c-lgray{ color: #f2f2f7;}
.c-gray{ color: #6f6f6f;}
.c-black{ color: #010101;}
.c-base{ color: #162144;}
.c-lblue{ color: #F8FBFF;}
.c-blue{ color: #65C3FF;}
.c-orange{ color: #FFB200;}
.c-anchor{ color: #2448be;}
.c-red{ color: #BE2448;}
.hover-op07:hover,
.hover-op07:hover img{opacity: .7;}
.cc-message{ font-size: 0.8em;}
.cc-compliance .cc-btn.cc-deny {display:none;}
.marker_yellow {background: linear-gradient(transparent 60%, #ffff66 60%);}
.marker_lime {background: linear-gradient(transparent 60%, #c4ffeb 60%);}
.marker_blue {background: linear-gradient(transparent 60%, #c2d4ff 60%);}
.marker_pink {background: linear-gradient(transparent 60%, #ffbfff 60%);}
.nutshell{
border: .5em solid #a96116;
padding: 0 1.2em;
background-color: #f5f5f5;
margin-bottom: 2em;
color: #333;
}
.nutshell h4 span{
color: #fff;
background-color: #013a23;
padding: .3em .6em;
border-radius: 0.125em;
}
img{display: block;max-width: 100%;}  body {
font-family: 'Roboto', 'Noto Sans JP', sans-serif, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #010101;
}
.ff-serif{font-family: 'Noto Serif JP', serif, "MS Serif", "New York", "serif";}
.ff-roboto{font-family: 'Roboto', sans-serif;} h1{font-size: 2.8em; line-height: 1.1em; padding-top: 0.625em; padding-bottom: 0.625em; margin-bottom: 0.625em;}
h2{font-size: 1.75em; line-height: 1.3em; padding-top: 0.625em; padding-bottom: 0.625em; margin-bottom: 0.625em;}
h3{font-size: 1.5em; line-height: 1.3em; padding-top: 0.625em; padding-bottom: 0.625em; margin-bottom: 0.625em;}
h4{font-size: 1em; line-height: 1.3em; padding-top: 0.625em; padding-bottom: 0.625em; margin-bottom: 0.625em;}
h5{font-size: .825em; line-height: 1.3em; padding-top: 0.625em; padding-bottom: 0.625em; margin-bottom: 0.625em;}
h6{font-size: .75em; line-height: 1.3em; padding-top: 0.625em; padding-bottom: 0.625em; margin-bottom: 0.625em;}
p{line-height: 2;}
h1,h2,h3,h4,h5,h6{ clear: both;}
.overlay {
content: "";
display: block;
width: 0;
height: 0;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
transition: opacity .5s;
}
.overlay.open {
width: 100%;
height: 100%;
opacity: 1;
}
body{	height: auto;}
@media (min-width: 960px){
a.tel{pointer-events: none;text-decoration: none;color: #3C3C3C;}
h1{font-size: 3em; }
h2{font-size: 2em; }
h3{font-size: 1.7em; }
h4{font-size: 1.14em; }
h5{font-size: .94em; }
h6{font-size: .85em; }
} header{
margin: 0;
padding: 0;
height: 4.5em;
background-color: rgba(255,255,255,0.6);
backdrop-filter: blur(2em);
width: 100%;
font-family: 'Roboto', sans-serif;
position: fixed;
z-index: 998;
top: 0;
}
header .out-wrap{
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.header-menu,header div.contact{display: none;}
.header-logo{
width: 8.56em;
height: 100%;
margin: 0 0;
}
.header-logo a{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.header-logo a img{
width: 100%;
height: auto;
box-sizing: border-box;
}
.header-logo a:hover img{	opacity: .7;}
.main {
background-color: #fff;
padding: 0;
margin: 0;
padding-top: 4.5em;
position: relative;
}
.link-container{padding-top: 4.5em;	margin-top: -4.5em; z-index: 0;}
.container{padding-top: 3em;padding-bottom: 3em;} .menu-trigger{
display: block;
background: none;
border: none;
padding: 0;
width: 4.5em;
height: 4.5em;
color: #162144;
letter-spacing: 0.1em;
cursor: pointer;
position: fixed;
top: 0;
right: 0;
z-index: 3000;
text-align: center;
outline: none;
transform: translateX(0);
transition: all .5s;
} .menu-trigger::after{
font-family: "Material Icons";
content:'\e5d2';
transition: all 2s ease-out;
font-size: 2em;
top: 50%;left: 50%;
position: fixed;
transform: translate(-50% , -50%);
} .menu-trigger.active::after {
content:'\e5cd';
transition: all .5s;
}
nav.drawer-innner{
width: 76.7vw;
height: 100%;
box-sizing: border-box;
padding: 4.5em 0 2.5em;
background-color: #FFFFFF;
position: fixed;
top: 0;
right: 0;
z-index: 10;
transform: translate(100%);
transition: all .5s;
}
nav.drawer-innner.open {
transform: translateZ(0);
z-index: 1000;
}
nav.drawer-innner ul.page-menu{
list-style-type: none;
font-size: 1em;
line-height: 1;
padding: 0;
margin: 1.25em 1.25em 3em;
}
nav.drawer-innner ul.page-menu a{
box-sizing: border-box;
display: block;
color: #162144;
padding: 1.5em 0;
text-decoration: none;
border-bottom: .06em solid #E9E9E9;
}
nav.drawer-innner ul.page-menu li:first-child a{border-top: .06em solid #E9E9E9;}
nav.drawer-innner ul.page-menu a:hover,
nav.drawer-innner ul.page-menu a:active{background-color: #162144;color: #fff;}
nav.drawer-innner .contact{
bottom: 2.5em;left: 0;width: 100%;
text-align: center;
}
nav.drawer-innner .contact a{
display: inline-block;
line-height: 1;
padding: 1em 1.2em;
border-radius: 100vw;
text-decoration: none;
color: #FFFFFF;
background-color: #65C3FF;
}
nav.drawer-innner .contact a::after{
padding-left: 1em;
font-family: "Material Icons";
content: "\e5e1";
vertical-align: bottom;
}
nav.drawer-innner .contact a:hover{background-color: #FFB200;}
@media (min-width: 768px){
.header-logo{width: 12em;}
nav.drawer-innner{width: 44.49vw;}
.menu-trigger{right: 4.5%;}
}
@media (min-width: 960px){
.header-logo{width: 11.5em;}
.menu-trigger{display: none;}
header{height: 5.6em;}
header a{text-decoration: none;	color: #162144;}
header a:hover{	color: #464646;}
.main{padding-top: 5.6em;}
.link-container{padding-top: 5.6em;	margin-top: -5.6em;}
.container{padding-top: 5em;padding-bottom: 5em;}
.header-menu{
height: 100%;
display: flex;
-ms-align-items: center;
align-items: center;
font-size: .75em;
line-height: 1;
}
ul.global-nav{
height: 100%;
padding: 0;
list-style-type: none;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 0;
margin-bottom: 0;
}
ul.global-nav > li{
height: 100%;
margin: 0;
margin-right: 1em;
font-weight: bold;
position: relative;
}
ul.global-nav > li:last-child{margin-right: 0;}
ul.global-nav > li > a{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
box-sizing: border-box;
}
ul.global-nav > li > a:hover{color: #909090;}
ul.global-nav > li.current{text-decoration: underline;}
ul.global-nav ul.sub-list{
position: absolute;
width: 18em;
height: 0;
left: 1em;
top:5.5em;
overflow: hidden;
margin:0;
}
ul.global-nav > li:hover ul.sub-list{
overflow: visible;
width: 18em;
height: auto;
padding: .714rem;
border-radius: .4rem;
background-color: #fff;
box-shadow: 0 0 .285rem rgba(0, 0, 0, 0.25);
display: flex;
justify-content: center;
flex-direction: column;
font-weight: bold;
}
ul.global-nav ul.sub-list li {
margin: 0;
font-size: 1em;
list-style-type: none;
padding: .5em 0;
}
ul.global-nav ul.sub-list li a{
width: 100%;
height: 100%;
padding: .5em 1em;
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
text-decoration: none;
color: #515151;
}
ul.global-nav ul.sub-list li a:hover{color: #909090;}
header div.contact{display: block;}
header div.contact a{
display: inline-block;
color: #fff;
background-color: #65C3FF;
font-size: .75em;
border-radius: 100vw;
padding: 1em 2.5em;
line-height: 1;
font-weight: bold;
}
header div.contact a::after{
padding-left: 1em;
font-family: "Material Icons";
content: "\e5e1";
vertical-align: bottom;
}
header div.contact a:hover{	background-color: #FFB200;}
} footer {
border-top: .1em solid #f2f2f7;
position: relative;
width: 100%;
padding: 6em 0 1em;
line-height: 1.3;
}
footer a{color: #142042;text-decoration: none;}
footer a:hover{	color: #E5E5E5;}
footer .to-top{width: 10em;}
footer .page-menu,footer .page-menu ul{
list-style-type: none;
padding-left: 0;
}
footer .page-menu{padding: 1em 0;}
footer .page-menu a{
display: block;
font-weight: 700;
padding: 1rem 0;
border-bottom: .1rem solid #f2f2f7;
}
footer .page-menu ul a{font-size: .625em;}
footer .foot{
padding-top: 2em;
border-top: .1em solid #f2f2f7;
color: #010101;
}
footer .logo:hover img{opacity: .7;}
footer .to-corp .logo{width: 10em;}
footer .to-corp p {font-size: .625em;font-weight: 700;}
footer .to-corp dl{margin-bottom: 1em;font-size: .625em;line-height: normal;}
footer .to-corp dt{font-weight: bold;}
footer .to-corp dd{margin-left: 0;}
footer .foot .sns-list{
padding-top: 2rem;
padding-bottom: 2rem;
list-style-type: none;
padding-left: 0px;
display: flex;
justify-content: flex-end;
align-items: center;
}
footer .foot .sns-list a{
display: inline-block;
width: 1.8em;
height: 1.8em;
margin-right: 1rem;
}
footer .foot .sns-list li:last-child a{margin-right: 0;}
footer .foot .sns-list a:hover{opacity: .7;}
footer .foot .sns-list a img{width: 100%;}
footer .copy{
font-size: .75em;
color: #C4C4CC;
font-weight: bold;
text-align: right;
}
@media (min-width: 768px){
footer .to-corp .logo{width: 15.75em;}
footer .page-list{
display: flex;
justify-content: space-between;
}
footer .page-menu{width: 30%;}
footer .page-menu a{border-bottom: none;}
footer .sitemap{padding: 3em 0;}
footer .foot{padding: 3em 0 1em;}
}
@media (min-width: 960px){
footer .foot{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
footer .foot .sns-list{padding-bottom: 0;}
} .scrollTop {
position: fixed;
right: 1em;
bottom:  1em;
opacity: 0;
z-index: 1000;
transition: all 0.4s ease-in-out 0s;
}
.scrollTop a {
box-sizing: border-box;
border: .12em solid #D3DAF0;
background-color: #162144;
color: #FFFFFF;
width: 2.5em;
height: 2.5em;
display: flex;
justify-content: center;
align-items: center;
border-radius: 1.5em;
text-decoration: none;
}
.scrollTop a i{font-size: 1.5em;}
.scrollTop a:hover{
border: .24em solid #162144;
color: #162144;
background-color: #FFFFFF;
} a.blank{position: relative;}
a.blank::after{
position: absolute;
font-size: .8em;
display: block;
right: 0;	top: 50%;
font-family: "Material Icons";
content:"\e89e";
font-weight: 400;
opacity: .6;
}
.link-btn{
padding-top: 2em;
padding-bottom: 2em;
}
.link-btn a{
display: inline-block;
line-height: 1;
padding: 1em 1.2em;
border-radius: 100vw;
text-decoration: none;
color: #FFFFFF;
background-color: #65C3FF;
}
.link-btn a::after{
padding-left: 1em;
font-family: "Material Icons";
content: "\e5e1";
vertical-align: bottom;
}
.link-btn a:hover{background-color: #FFB200;}    #top-hero{
position: relative;
background-color: #fff;
height: calc(100vh - 10em);
min-height: 30em;
color: #000000;
}
#top-hero .wrap{
position: relative;
height: 100%;
border-bottom: .1em solid #f2f2f7;
}
#top-hero h1{
width: 100%;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform:translateX(-50%) translateY(-60%);
line-height: 1.2;
font-size: 1.5em;
text-align: center;
}
#top-hero h1 img{
display: inline-block;
width: 10em;
padding: 4em 0;
}
#top-hero p{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(5em);
font-weight: 700;
}
@media (min-width: 768px){
#top-hero{height: 36em;}
#top-hero h1{font-size: 2.5em;}
#top-hero h1 img{
width: 15em;
padding: 2em 0;
}
}
@media (min-width: 960px){
#top-hero{height: 41em;}
#top-hero h1 img{
width: 18em;
padding: 1.5em 0;
}
#top-hero p{
font-size: 1.4em;
transform: translateY(3em);
}
}
h2.en-sub_big{
position: relative;
color: #010101;
font-size: .625em;
padding-top: 0;
padding-bottom: 4.5rem;
font-weight: 400;
}
h2.en-sub_big::before{
position: absolute;
content:attr(date-lang);
font-size: 2.5rem;
line-height: 1em;
top: 2rem;
font-weight: 600;
}
h2.en-sub_big ~ p{color: #6F6F6F;}
@media (min-width: 768px){
h2.en-sub_big{font-size: .68em;	padding-bottom: 6.5rem;}
h2.en-sub_big::before{font-size: 3.3rem;top: 3rem;}
}
@media (min-width: 960px){
h2.en-sub_big{font-size: .75em;	padding-bottom: 8rem;}
h2.en-sub_big::before{font-size: 3.75rem;top: 3.5rem;}
} #top-about p{	color: #6F6F6F;} .service-card-base{}
.service-card-base .card-item{border-top: .1em solid #f2f2f7;}
.service-card-base .card-item a{
position: relative;
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2.5em 4em 2.5em 0;
}
.service-card-base .card-item .image{width: 3.3em;}
.service-card-base .card-item .image img{width: 100%;}
.service-card-base .card-item .text{width: 13em;}
.service-card-base .card-item .text h4{color: #010101;font-size: 1.1em;	padding: 0;	margin: 0;}
.service-card-base .card-item .text p{display: none;color: #6F6F6F;line-height: 1.5;}
.service-card-base .card-item a::after{
position: absolute;
display: flex;
justify-content: center;align-items: center;
font-family: "Material Icons";
content: "\e315";
width: 1.25em;height: 1.25em;
border-radius: 100vw;
background-color: #FFB200;
color: #1c1b1f;
right: 1.25em;top: 50%;
transform: translateY(-50%);
}
.service-card-base .card-item a:hover .image img{opacity: .7;}
.service-card-base .card-item a:hover .text h4{color: #646464;}
.service-card-base .card-item a:hover .text p{color: #BABABA;}
.service-card-base .card-item a:hover::after{background-color: #FFD370;color: #676372;}
@media (min-width: 768px){
.service-card-base{
margin-right: -1.25em;
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
.service-card-base .card-item{
margin-right: 1.25em;
margin-bottom: 1.25em;
width: calc(50% - 1.25em);
}
.service-card-base .card-item a{
display: block;
height: 100%;
padding: 1.25em 0;
}
.service-card-base .card-item .image{width: 73%;margin: 0 auto 1.25em;}
.service-card-base .card-item .text{width: auto;}
.service-card-base .card-item .text h4{margin-bottom: 1.25rem;}
.service-card-base .card-item .text p{display: block;}
.service-card-base .card-item a::after{
right: 0;top: auto;bottom: 0;
transform: translateY(0);
}
}
@media (min-width: 960px){
.service-card-base .card-item{width: calc(25% - 1.25em);}
.service-card-base .card-item a{padding: 2.5em 0;}
.service-card-base .card-item .image{width: 93%;margin-bottom: 1.5em;}
.service-card-base .card-item .text p{margin-right: 1.25rem;}
.service-card-base .card-item a::after{bottom: 2.5em;right: 1.25rem;}
} .solution-card-base{}
.solution-card-base .card-item{	margin-bottom: 1.25em;}
.solution-card-base .card-item a{
position: relative;
display: block;
text-decoration: none;
padding: 1em;padding-top: 3.5em;
background-color: #F2F2F7;
border-radius: .5em;
color: #1c1b1f;
}
.solution-card-base .card-item a::before{
position: absolute;
display: block;
font-family: "Material Icons";
content: "\e000";
font-size: 1.4em;
top: 1rem;left: 1rem;
}
.solution-card-base .card-item a::after{
position: absolute;
display: flex;
justify-content: center;align-items: center;
font-family: "Material Icons";
content: "\e315";
width: 1.25em;height: 1.25em;
border-radius: 100vw;
background-color: #FFB200;
right: 1em;bottom: 1em;
}
.solution-card-base .card-item p{
font-size: 1.125em;
font-weight: 600;
line-height: normal;
padding: 0;margin: 0;margin-right: 1.25rem;
}
.solution-card-base .card-item a:hover{background-color: #65C3FF;}
.solution-card-base .card-item a:hover::after{background-color: #FFFFFF;}
@media (min-width: 768px){
.solution-card-base{
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin-right: -1.25em;
}
.solution-card-base .card-item{
width: calc(50% - 1.25em);
margin-right: 1.25em;
}
.solution-card-base .card-item a{height: 100%;}
} #top-news{border-top: .1em solid #E9E9E9;}
.news-list .item{
border-top: .1em solid #E9E9E9;
margin-bottom: 1.25em;
}
.news-list .item a{
display: flex;
justify-content: space-between;
align-items: center;
padding: 3.75em 0 1.25em;
text-decoration: none;
}
.news-list .item time{color: #CECECE;}
.news-list .item time span{display: block;line-height: normal;font-family: "DM Sans", sans-serif;}
.news-list .item time .year{font-size: .625em;letter-spacing: .04em;font-weight: 700;}
.news-list .item time .day{font-size: 4em;}
.news-list .item .text{	width: 12.5em;padding-right: 1.8em;}
.news-list .item .text .cat{
width: 7.8rem;
font-size: .6em;
font-weight: 700;
text-align: center;
color: #6F6F6F;
background-color: #F2F2F7;
margin-bottom: 1.25rem;
}
.news-list .item .text h4{
font-size: 1em;
padding: 0;margin: 0;margin-bottom: 1.25rem;
color: #010101;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.news-list .item .text p{
font-size: .8em;
padding: 0;margin: 0;
color: #6F6F6F;
line-height: 1.5;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.news-list .item a:hover time{color: #ECECEC;}
.news-list .item a:hover .text .cat{color: #BABABA;background-color: #FBFBFC;}
.news-list .item a:hover .text h4{color: #606060;}
.news-list .item a:hover .text p{	color: #BABABA;}
@media (min-width: 768px){
.news-list .item .text{	width: 77%;}
.news-list .item .text .cat{font-size: .6em;}
.news-list .item .text h4{font-size: 1.125em;}
.news-list .item .text p{font-size: 1em;}
#top-news .link-btn{text-align: right;width: 100%;}
}
@media (min-width: 960px){
#top-news .wrap{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.col-title{width: 30%;}
.news-list{width: 56%;}
} #top-note{border-top: .1em solid #E9E9E9;}
.note-list .item{border-bottom: .125em solid #f2f2f2;}
.note-list .item a{
display: block;
text-decoration: none;
border-radius: .2em;
background-color: #FFF;
color: #142042;
transition: all .2s linear;
height: 100%;
padding: 1em;
}
.note-list .item .image{
position: relative;
overflow: hidden;
width: 100%;
height: 0;
padding: 0;
padding-top: 52.34%;
border-radius: .2em;
background-color: #f3f3f3;
margin-bottom: 1em;
}
.note-list .item img{
position: absolute;
top: 50%; left: 50%;
width: 100.1%; height: 100.1%;
transform: translate(-50%, -50%);
object-fit: cover;
transition: all .2s linear;
}
.note-list .item .title{
font-size: 1.125em;
line-height: 1.5;
font-weight: 600;
margin: 0;
}
.note-list .item .time{
font-size: .875em;
margin: 0;padding: 0;
}
.note-list .item a:hover{background-color: #f2f2f7;}
@media (min-width: 768px){
.note-list .item a{
display: flex;
justify-content: space-between;
-ms-align-items: stretch;
align-items: stretch;
flex-wrap: wrap;
}
.note-list .item .image{
width: 48%;
padding-top: 25%;
margin-bottom: 0;
}
.note-list .item .text{	width: 50%;}
#top-note .link-btn{text-align: right;}
}
@media (min-width: 960px){
#top-note .wrap{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.col-title{width: 30%;}
.note-list{width: 56%;}
} #top-cta{text-align: center;border-top: .1em solid #E9E9E9;}
#top-cta h2{font-size: 2.8em;margin: 0;padding: 0;margin-bottom: 2.5rem;}
#top-cta p{color: #6F6F6F;margin: 0;padding: 0;}
@media (min-width: 768px){
#top-cta h2{font-size: 3em;}
}
@media (min-width: 960px){
}
.scroll-box {
width:100%;
overflow-x: auto;
padding-bottom: 1em;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
} .scroll-box::-webkit-scrollbar {height: .2em;} .scroll-box::-webkit-scrollbar-track {background: #eee;} .scroll-box::-webkit-scrollbar-thumb {background: #aaa; border: none;} .scroll-box::-webkit-scrollbar-thumb:hover {background: #999;}
.approach-flow h2.tac img{width: 7em;}
.approach-flow-table{
display: flex;
align-items: stretch;
position: relative;
width: 270vw;
height: 40em;
}
.approach-flow-table::before{
position: absolute;
display: block;
content: "";
width: 100%;
height: 1.06em;
box-sizing: border-box;
background-color: #fff;
top: 45%;
left: 0;
transform: translateY(-50%);
}
@media (min-width: 768px){
}
@media (min-width: 960px){
.scroll-box {
overflow-x: inherit;
white-space: normal;
}
}   .child-title{padding: 7.5em 0;}
.child-title h1{
position: relative;
color: #010101;
font-size: 1.125em;
padding-top: 0;
padding-bottom: 8.5rem;
font-weight: 600;
text-align: center;
}
.child-title h1::before{
position: absolute;
display: block;
content:attr(date-lang);
font-size: 2.8rem;
font-family: "Noto Sans","Noto Sans JP", sans-serif;
line-height: 1em;
top: 2.7rem;
width: 100%;
font-weight: 600;
}
@media (min-width: 768px){
.child-title h1{padding-bottom: 5.5rem;}
}
.sol-link-btn{
padding-top: 2em;
padding-bottom: 2em;
text-align: center;
}
.sol-link-btn a{
display: inline-block;
line-height: 1;
padding: 1em 1.2em;
border-radius: 100vw;
text-decoration: none;
color: #FFFFFF;
font-size: 1.2em;
font-weight: bold;
background-color: #65C3FF;
}
.sol-link-btn a::after{
padding-left: 1em;
font-weight: normal;
font-family: "Material Icons";
content: "\e89e";
vertical-align: bottom;
}
.sol-link-btn a:hover{background-color: #FFB200;} h2.en-sub_small{
position: relative;
color: #010101;
margin: 1em 0;
font-size: 2rem;
padding-top: 2.5rem;
padding-bottom: 0;
font-weight: 600;
}
h2.en-sub_small::before{
position: absolute;
content:attr(date-lang);
font-size: .68rem;
line-height: 1em;
top: 0;
font-weight: 400;
}
dl.mission{color: #6F6F6F;}
dl.mission dt{line-height: normal;font-size: 2.2rem;font-weight: 600;margin-bottom: 1rem;}
dl.mission dd{margin-left: 0;}
ul.action-list{list-style-type: none;	padding-left: 0;}
ul.action-list .item{
margin-bottom: 1.8rem;
padding: 2rem 3rem;
border-top-right-radius: 2rem;
border-bottom-left-radius: 2rem;
background-color: #F2F2F7;
color: #6F6F6F;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Noto Sans JP", "sans-serif";
line-height: 1.5;
}
ul.action-list .item strong{font-size: 1.5rem;margin-bottom: 1.8rem;font-weight:600;}
ul.action-list .item strong b{font-size: 2.8rem;font-weight:600;}
ul.action-list .item span{}
@media (min-width: 768px){
ul.action-list .item strong{font-size: 2rem;}
ul.action-list .item strong b{font-size: 2.8rem;}
}
@media (min-width: 960px){
h2.en-sub_small::before{font-size: .75rem;}
dl.mission dt{font-size: 2.8rem;text-align: center;}
dl.mission dd{width: 65%;margin: 0 auto;}
ul.action-list{
margin-right: -3rem;
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
ul.action-list .item{
margin-right: 3rem;
margin-bottom: 3rem;
width: calc(50% - 3rem);
}
ul.action-list .item:nth-child(1) {order: 1;}
ul.action-list .item:nth-child(2) {order: 2;}
ul.action-list .item:nth-child(3) {order: 3;width: 100%;}
ul.action-list .item:nth-child(4) {order: 2;}
ul.action-list .item:nth-child(5) {order: 1;}
} h2.company-title{
position: relative;
color: #142042;
font-size: 1.5rem;
margin: 1.5em 0;
text-align: center;
font-weight: 600;
padding-top: 1.7rem;
padding-bottom: 0;
line-height: 1.5;
}
h2.company-title::before{
position: absolute;
content:attr(date-lang);
font-size: 1rem;
color: #4AAFEE;
line-height: 1em;
top: 0;left: 0;
width: 100%;
}
h2.company-title ~ p{
color: #6F6F6F;
text-align: center;
margin: 0;
line-height: 1.5;
}
dl.company-table{
display: grid;
grid-template-columns: 1fr;
}
dl.company-table dt{padding: 1em 1em 0;font-weight: bold;}
dl.company-table dt:first-child{border-top: .1em solid #B9B9B9;}
dl.company-table dd{padding: 0 1em 1em;margin: 0;border-bottom: .1em solid #B9B9B9;color: #515151;}
.company-links {padding: 2rem 0 1rem;}
.company-links .item{margin-bottom: 3em;}
.company-links .item a{text-decoration: none;}
.company-links .item .image{
position: relative;
overflow: hidden;
width: 100%;
height: 0;
padding: 0;
padding-top: 58.3%;
border-radius: .7rem;
border: .1em solid #F2F2F7;
}
.company-links .item .image img{
position: absolute;
top: 50%; left: 50%;
width: 100.1%; height: 100.1%;
transform: translate(-50%, -50%);
object-fit: cover;
transition: all .2s linear;
}
.company-links .item .title{position: relative;}
.company-links .item .title p{
position: relative;
padding-top: 1.4rem;
font-size: 1.4em;
line-height: 1;
color: #515151;
font-weight: bold;
text-decoration: none;
transition: all .2s linear;
}
.company-links .item .title p::before{
position: absolute;
content:attr(date-lang);
font-size: 1rem;
color: #d8d8d8;
line-height: 1em;
top: 0;
transition: all .2s linear;
}
.company-links .item .title .link-icon{
position: absolute;
width: 2.7rem;height: 2.7rem;
border-radius: 50vw;
background-color: #515151;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
right: 0;
top: 50%;
transform: translateY(-50%);
transition: all .2s linear;
}
.company-links .item a:hover .image img{height: 120%;}
.company-links .item a:hover .title p{color: #65C3FF;}
.company-links .item a:hover .title p::before{color: #AADEFF;}
.company-links .item a:hover .link-icon{background-color: #65C3FF;}
@media (min-width: 768px){
dl.company-table{	grid-template-columns: 10em 1fr;}
dl.company-table dt{padding: 1em;border-bottom: .1em solid #B9B9B9;text-align: right;}
dl.company-table dd:nth-child(2){border-top: .1em solid #B9B9B9;}
dl.company-table dd{padding: 1em;}
.company-links {
display: flex;
flex-wrap: wrap;
margin-left: -.78rem;
margin-right: -.78rem;
}
.company-links .item{
width: 50%;
padding-left: .78rem;
padding-right: .78rem;
margin-bottom: 3em;
}
}
@media (min-width: 960px){
dl.company-table{grid-template-columns: 15em 1fr;width: 76%;margin: auto;}
.company-links {
margin-left: -1.7rem;
margin-right: -1.7rem;
}
.company-links .item{
width: calc(100% / 3);
padding-left: 1.7rem;
padding-right: 1.7rem;
}
} .formWrap{
background-color: #F2F2F7;
padding: 5em 1.5em;
border-radius: .6em;
margin: 0 auto 5em;
}
.formWrap dt{color: #142042;font-weight: 700;}
.formWrap dt .required{
display: block;
font-size: .8em;
color: #f00;
}
.formWrap dt .required::before{content:"*";}
.formWrap dd{margin-left: 0;padding-bottom: 1em;}
.formWrap .fields input,.formWrap .fields button{cursor: pointer;}
.formWrap .fields input[type="text"],
.formWrap .fields input[type="email"],
.formWrap .fields input[type="tel"],
.formWrap .fields input[type="date"],
.formWrap .fields select,
.formWrap .fields textarea{
background-color: #fff;
border-radius: .12em;
padding: .8em;
border: .06em solid #fff;
width: 100%;
}
[class*="radio"] label,
[class*="checkbox"] label{
border-radius: .12em;
padding: .8em;
display: flex;
-ms-align-items: center;
align-items: center;
margin-bottom: .7em;
}
.formWrap .fields input[type="text"]:hover,
.formWrap .fields input[type="email"]:hover,
.formWrap .fields input[type="date"]:hover,
.formWrap .fields select:hover,
.formWrap .fields textarea:hover{
border: .06em solid #142042;
}
[class*="radio"] label:hover,
[class*="checkbox"] label:hover{
background-color: #efefef;
}
.formWrap .fields input[type="text"]::placeholder,
.formWrap .fields input[type="email"]::placeholder,
.formWrap .fields input[type="tel"]::placeholder,
.formWrap .fields input[type="date"]::placeholder,
.formWrap .fields select:has(option:checked[value=""]),
.formWrap .fields textarea::placeholder{color: #D1D3D4;}
.formWrap .fields .checkbox,.formWrap .fields .radio{
display: flex;
flex-wrap: wrap;
}
.formWrap .fields input[type="checkbox"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 1em;
position: relative;
width: 2em;height: 2em;
margin-right: .5em;
border: .1rem solid #4AAFEE;
background-color: #fff;
border-radius: .12em;
}
.formWrap .fields input[type="checkbox"]:checked::before{
position: absolute;
content:"";
top: .2em;
left: .6em;
transform: rotate(50deg);
width: .5em;
height: 1em;
border-right: .2em solid #142042;
border-bottom: .2em solid #142042;
}
.formWrap .fields input[type="radio"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 1em;
position: relative;
width: 2rem;height: 2rem;
margin-right: .5rem;
border: .1rem solid #4AAFEE;
background-color: #fff;
border-radius: 100vw;
}
.formWrap .fields input[type="radio"]:checked::before{
position: absolute;
content:"";
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
width: 1.3rem;
height: 1.3rem;
background-color: #142042;
border-radius: 100vw;
}
.formWrap input[type="submit"],.formWrap input[type="reset"],.formWrap button[type="button"]{
font-size: 1.2rem;
margin: 1rem;
letter-spacing: .2em;
display: inline-block;
text-decoration: none;
border-radius: 100vw;
width: 6em;
text-align: center;
line-height: normal;
font-weight: bold;
background-color: #142042;
color: #fff;
padding: .66em;
transition: all .5s;
border: none;
cursor: pointer;
}
.formWrap input[type="submit"]{display: block;width: 100%;}
.formWrap input[type="submit"]::after{font-family: "Material Icons";content:'\e163';}
.formWrap input[type="reset"]{
color: #3b3c3c;
background-color: #cdcdcd;
}
.formWrap button[type="button"]{
border:.1em solid #515151;
background-color: #fff;
color: #515151;
}
.formWrap .example-message{
color: #8A8A8A;
font-size: .8em;
font-weight: 400;
text-align: left;
margin-top: .1rem;
margin-bottom: .1rem;
width: 100%;
}
.formWrap .fields input[type="text"].name-text,
.formWrap .fields input[type="text"].p-postal-code,
.formWrap .fields input[type="text"].p-region{width: 8.5em;}
.formWrap .fields input[type="tel"]{width: 11em;}
.formWrap .fields input[type="text"].p-locality{width: 15em;}
.formWrap .fields input[type="text"].number_of_cars{width: 5em;}
.formWrap .fields input[type="text"].p-postal-code,
.formWrap .fields input[type="text"].p-region,
.formWrap .fields input[type="text"].p-locality{margin-bottom: .5em;}
.formWrap .fields .agreement{justify-content: center;font-size: .8rem;}
@media (min-width: 768px){
.formWrap{padding: 5em 6em;}
.formWrap .fields input[type="text"].name-text,
.formWrap .fields input[type="text"].p-postal-code,
.formWrap .fields input[type="text"].p-region{width: 10em;}
}
@media (min-width: 960px){
.formWrap{width: 65.5%;}
}    .case-list{padding: 0 0 5em;}
.case-list .item{
margin-bottom: 2em;
width: 100%;
}
.case-list .item a{
display: block;
background-color: #FFFFFF;
text-decoration: none;
color: #162143;
border-radius: .7em;
transition: all .2s linear;
}
.case-list .item .image{
background-color: #EDEDED;
border: .1em solid #EDEDED;
position: relative;
overflow: hidden;
width: 100%;height: 0;
margin: 0;
padding-bottom: 52.2%;
border-radius: .7em;
}
.case-list .item .image img{
position: absolute;
top: 50%;left: 50%;
transform: translate(-50% ,-50%);
width: 100.5%;height: 100.5%;
object-fit: cover;
transition: all .2s linear;
}
.case-list .item h4{
padding: 0;
margin: 1rem 0 .5rem;
font-size: 1.125em;
}
.case-list .item ul.case-tag{
list-style-type: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
font-size: .8em;
}
.case-list .item ul.case-tag li{
margin-right: .7em;
margin-bottom: .5em;
line-height: 1;
padding: .5em .7em;
background-color: #d9d9d9;
}
.case-list .item a:hover{color: #D9D9D9;}
.case-list .item a:hover .image img{width: 120%;height: 120%;}
.case-list .item a:hover ul.case-tag li{background-color: #EFEFEF;}
@media (min-width: 768px){
.case-list{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2em 2em;
padding: 0 0 6em;
}
.case-list .item a{width: 100%;height: 100%;}
.case-list .item .image{padding-bottom: 96.15%;}
}
@media (min-width: 960px){
.case-list{padding: 0 0 7.5em;}
.case-list .item .image{padding-bottom: 89.28%;}
.case-list .item h4{font-size: 1.5em;}
.case-list .item ul{font-size: 1em;}
} .case-article{color: #162143;}
.case-hero{padding: 0 0 5em;}
.case-hero h2{font-size: 1.5em;line-height: 1.2;}
.case-hero .eyecatch{
background-color: #EDEDED;
border: .1em solid #EDEDED;
position: relative;
overflow: hidden;
width: 100%;height: 0;
margin: 0;
padding-bottom: 52.2%;
border-radius: .7em;
}
.case-hero .eyecatch img{
position: absolute;
top: 50%;left: 50%;
transform: translate(-50% ,-50%);
width: 100.5%;height: 100.5%;
object-fit: cover;
transition: all .2s linear;
}
.case-hero ul.case-tag{
list-style-type: none;
padding: 1.5em 0;
display: flex;
flex-wrap: wrap;
font-size: .8em;
}
.case-hero ul.case-tag li{
margin-right: .7em;
margin-bottom: .5em;
line-height: 1;
}
.case-hero ul.case-tag li a{
padding: .5em .7em;
background-color: #d9d9d9;
text-decoration: none;
color: #162143;
transition: all .2s linear;
}
.case-hero ul.case-tag li a:hover{background-color: #EFEFEF;}
.case-hero .comp-logo{height: 7.5em;width: auto;margin-bottom: 1.5rem;}
.case-hero .comp-logo img{display: block;height: 100%;width: auto;}
.case-hero p.comp-name{
font-size: 1.125em;
font-weight: 700;
line-height: 1.2;
padding: 0;margin: 0;
margin-bottom: 1rem;
}
.case-hero p.add{padding: 0;margin: 0;line-height: 1.5;}
.case-hero p.comp-link a{
display: inline-block;
background-color: #65C3FF;
padding: .25em 1em;
color: #162143;
text-decoration: none;
border-radius: 100vw;
font-size: .8em;
}
.case-hero p.comp-link a:hover{background-color: #FFB200;}
.case-article h3{font-size: 1.5em;}
.TtoS{
display: grid;
grid-template-rows: auto 5em auto;
gap: 1.5em;
margin:3em 0;
}
.TtoS .task,.TtoS .solution{
padding: 2em;
background-color: #F2F2F7;
border: .4em solid #000;
border-radius: 1em;
}
.TtoS .task{border-color: #162143;}
.TtoS .solution{border-color: #FFB200;}
.TtoS .arrow{position: relative;}
.TtoS .arrow::before{
position: absolute;
display: block;
content: "";
background-color: #65C3FF;
clip-path: polygon(50% 100%, 0 0, 100% 0);
width: 4.6em;height: 2.4em;
top: 50%;left: 50%;
transform: translate(-50% , -50%);
}
.TtoS h4{padding: 0;margin: 0;margin-bottom: 1em;font-size: 1.1em;}
.TtoS .solution h4{color: #FFB200;}
.TtoS ul{padding-left: 1em;}
.testimonials{
background-color: #65C3FF;
padding: 2em;
border-radius: 1em;
}
.testimonials h3{font-size: 1.125em;color: #fff;padding: 0;margin: 0;margin-bottom: 2rem;}
.testimonials .text{
padding: 3em 1em;
background-color: #fff;
border-radius: 1em;
}
.testimonials .text ul{padding-left: 1em;}
.testimonials .text figure{margin-bottom: 1em;}
.testimonials .text figure img{width: 8em; padding: 0.5em;}
.testimonials .text figure figcaption{font-size: 0.9em;line-height: 1.3;}
.testimonials .text .conversation dt{font-weight: 600;}
.testimonials .text .conversation dt::before{content:"ー ";}
.testimonials .text .conversation dd{margin-left: 0;padding-bottom: .7em;}
.to-interview{padding-top: 1em;padding-bottom: 1em;}
.to-interview a{
display: inline-block;
box-sizing: border-box;
padding: .5em 1.2em;
background-color: #65C3FF;
color: #fff;
text-decoration: none;
border-radius: 100vw;
font-weight: 600;
letter-spacing: .03em;
}
.to-interview a:hover{	background-color: #FFB200;}
.service-link img{
display: block;
width: 85.6%;
height: auto;
margin: 2.5em auto;
}
.service-link figcaption{text-align: center;}
.service-link a{
display: inline-block;
padding: 1em 2em;
text-decoration: none;
color: #162143;
background-color: #fff;
border: .15em solid #162143;
border-radius: 100vw;
font-size: 1.125em;
}
.service-link a:hover{
color: #fff;
background-color: #162143;
border: .15em solid #fff;
}
@media (min-width: 768px){
.case-hero{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 0 6em;
}
.case-hero h2{font-size: 2em;width: 100%;}
.case-hero .eyecatch{
width: 48%;
padding-bottom: 49.9%;
}
.case-hero .comp-info{width: 48%;}
.case-article h3{font-size: 2em;}
.testimonials h3{font-size: 1.125em;}
.testimonials .text{padding: 3em 2.5em;}
.testimonials .text figure{margin-right: 1em;width: 13em;float: left;}
.testimonials .text figure img{width: 13em; padding: 0.5em;}
.testimonials .text figure figcaption{font-size: 0.9em;line-height: 1.3; padding: 0.5em;}
}
@media (min-width: 960px){
.case-hero{padding: 0 0 7.5em;}
.case-hero h2{font-size: 2.5em;}
.case-hero .comp-info{font-size: 1.1em;}
.case-article h3{font-size: 2.5em;}
.TtoS{grid-template-rows: auto;grid-template-columns: auto 3em auto;}
.TtoS .arrow::before{
clip-path: polygon(100% 50%, 0 100%, 0 0);
width: 2.4em;height: 4.6em;
}
.TtoS h4{font-size: 1.5em;}
.testimonials h3{font-size: 1.125em;}
.service-link img{width: 80%;}
} .service-article{color: #162144;}
.service-hero{color: #010101;text-align: center;}
.service-hero p{padding: 0;margin: 0;}
.service-hero .subtitle{
font-size: 1.125em;
font-weight: 600;
text-align: center;
line-height: normal;
margin-bottom: 3rem;
}
.service-hero h1{
font-size: 2.8em;
padding: 0;margin: 0;
}
.service-hero .title-sub{
font-size: .6em;
font-weight: 700;
margin-bottom: 3rem;
}
.service-hero .links{
margin-bottom: 3rem;
display: flex;
justify-content: space-evenly;
}
.service-hero .links a{
text-decoration: none;
font-size: .6em;
padding: 1em 2em;
border-radius: 100vw;
border: .15em solid #65C3FF;
}
.service-hero .links a::after{
padding-left: 1em;
font-family: "Material Icons";
content: "\e5e1";
vertical-align: bottom;
}
.service-hero .links a.download{background-color: #65C3FF;color: #fff;}
.service-hero .links a.contact{background-color: #FFFFFF;color: #65C3FF;}
.service-hero .links a:hover{background-color: #FFB200;color: #FFFFFF;border-color: #FFB200;}
.service-hero .discription{line-height: 1.5;}
.service-article.consulting .service-hero .discription{font-size: 1.1em;padding: 1em 0;font-weight: 600;}
.service-hero .hero-image{
width: 100%;
margin: 2em auto;
}
.service-hero .hero-image img{width: 100%;}
.service-hero .soldout{
display: inline-block;
padding: .7em 2em;
margin: 1em;
border: .2em solid #f00;
font-size: 1.1em;
font-weight: 600;
color: #f00;
}
h2.note-heading span{
display: block;
font-size: 1rem;
color: #4aafee;
font-weight: 600;
}
h3.note-heading{
position: relative;
font-size: 1.5em;
background-color: #ffb200;
color: #fff;
border-radius: 100vw;
padding: 1rem 2rem;
margin-top: 2em;
}
h3.note-heading span{
font-size: .8em;
position: absolute;
display: inline-block;
background-color: #ffb200;
color: #fff;
border-radius: 100vw;
top: -1.8em;left: 0;
padding: .5rem 1rem;
font-family: "MuseoModerno", sans-serif;
}
.feature .card{margin-bottom: 1rem;}
.feature .card .image{padding: 1rem 0;}
.to-contact a{
display: inline-block;
box-sizing: border-box;
padding: .5em 1.2em;
background-color: #142042;
color: #fff;
text-decoration: none;
border: .12em solid #fff;
border-radius: 100vw;
font-weight: 600;
letter-spacing: .03em;
}
.to-contact a:hover{
border: .12em solid #142042;
background-color: #FFFFFF;
color: #142042;
}
.more-link a{
display: inline-block;
box-sizing: border-box;
padding: .5em 1.2em;
background-color: #65C3FF;
color: #fff;
text-decoration: none;
border-radius: 100vw;
font-weight: 600;
letter-spacing: .03em;
}
.more-link a:hover{	background-color: #FFB200;}
.feature.FabrikNavi .card{
margin-bottom: 2.5rem;
background-color: #F2F2F7;
padding: 1.2em 2em;
border-radius: 1em;
}
.feature.FabrikNavi .card img{
display: block;
width: 100%;
padding: 1rem 0;
}
.feature.FabrikNavi h3.note-heading{
background-color: transparent;
color: #162144;
border-radius: 0;
padding: 1rem 0;
margin-top: 2em;
text-align: center;
}
.feature.FabrikNavi h3.note-heading span{
background-color: #65C3FF;
left: 50%;transform: translateX(-50%);
font-size: 1em;
padding: .5rem 2rem;
top: -2em;
}
ruby rt{font-weight: normal;font-size: .4em;}
@media (min-width: 768px){
.service-hero .hero-image{
width: 100%;
margin: 1em auto;
}
.service-hero .links a{font-size: 1em;}
h2.note-heading{font-size: 2em;}
h3.note-heading{font-size: 1.8em;display: inline-block;}
.feature.FabrikNavi h3.note-heading{display: block;margin: 2em auto 0;}
.feature .card .image{
width: 60%;
margin: 1em auto;
}
}
@media (min-width: 960px){
.service-hero .hero-image{width: 80%;}
.service-hero .links{width: 80%;margin: 0 auto 3em;}
.feature .card{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.feature .card .image{width: 35.6%;margin: 0;order: 2;}
.feature .card .text{width: 62%;order: 1;}
.feature .card:nth-child(odd) .image{order: 1;}
.feature .card:nth-child(odd) .text{order: 2;}
}
.syllabus-list{
display: grid;
grid-template-columns:1fr;
gap:2.5em;
}
.syllabus-list .item{
background-color: #FFFFFF;
border-radius: .5rem;
padding: 1.5em;
}
.syllabus-list .item dt{
font-size: 1.125em;
font-weight: 600;
}
.syllabus-list .item dt span{
display: block;
color: #4aafee;
}
.syllabus-list .item dd{
margin-left: 0;
min-height: 4em;
padding: .5em 0;
font-size: .875em;
}
.syllabus-list .item .brief{
text-align: center;
font-size: .875em;
font-weight: 700;
padding: 1rem .5rem;
background-color: #f2f2f7;
}
.completion{
background-color: #FFFFFF;
border-radius: .5rem;
padding: 1.5em;
margin-bottom: 5em;
}
.completion dt{
font-size: 1.125em;
font-weight: 600;
color: #4aafee;
}
.completion dd{
font-size: 1.125em;
font-weight: 600;
margin-left: 0;
}
@media (min-width: 768px){
.syllabus-list{grid-template-columns: 1fr 1fr;}
.syllabus-list .item{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.completion{
width: 35em;
margin: auto auto 5em;
}
}
@media (min-width: 960px){
.syllabus-list{grid-template-columns: 1fr 1fr 1fr 1fr;}
}
.abridgement-list{
display: grid;
grid-template-columns:1fr 1fr;
gap:2.5em;
}
.abridgement-list .item a{
display: block;
width: 100%;height: 100%;
box-sizing: border-box;
background-color: #ffffff;
text-decoration: none;
color: #162144;
padding: 1.2em;
border-radius: .5em;
}
.abridgement-list .item img{
display: block;
width: 4.6em;
height: auto;
margin: auto;
}
.abridgement-list .item dt{font-weight: 600; text-align: center;}
.abridgement-list .item dd{margin-left: 0;display: none;}
.abridgement-list .item a:hover dl,.abridgement-list .item a:hover img{opacity: .7}
@media (min-width: 768px){
.abridgement-list .item img{margin-left: 0;}
.abridgement-list .item dt{font-size: 1.2em;text-align: left;}
.abridgement-list .item dd{display: block;line-height: 1.5;}
}
@media (min-width: 960px){
.abridgement-list{grid-template-columns:1fr 1fr 1fr 1fr;gap:2em;}
}
.abridgement-detail.FDiMpm{
position: relative;
padding-top: 14.7em;
margin:2em 0;
}
.abridgement-detail.FDiMpm .bg-screen{
position: absolute;
width: 125%;
top: 0;left: 50%;transform: translateX(-50%);
}
.abridgement-detail.FDiMpm .frame{
position: relative;
background-color: #FFFFFF;
padding: 1.2em;
border-radius: .5em;
box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, 0.25);
}
.abridgement-detail.FDiMpm .frame .icon{
display: block;
width: 4.6em;
}
.abridgement-detail.FDiMpm h3{font-size: 1.125em;}
.abridgement-detail.FDiMpm h3 span{display: block;font-size: .58em;color: #ffb200;}
.abridgement-detail.FDiMpm dl{font-weight: 600;margin-bottom: 1em}
.abridgement-detail.FDiMpm dt{font-size: .8em;color: #ffb200;}
.abridgement-detail.FDiMpm dd{margin-left: 0;}
.abridgement-detail.FDiMpm dd ul{
padding-left: 0;
list-style-type: none;
display: flex;
font-size: 1.1em;
}
.abridgement-detail.FDiMpm ul li{
padding-right: 1em;
}
.abridgement-detail.FDiMpm .links{
display: flex;
flex-wrap: wrap;
}
.abridgement-detail.FDiMpm .links a{
text-decoration: none;
font-size: .6em;
padding: 1em 2em;
border-radius: 100vw;
border: .15em solid #65C3FF;
margin-bottom: .5em;
}
.abridgement-detail.FDiMpm .links a::after{
padding-left: 1em;
font-family: "Material Icons";
content: "\e5e1";
vertical-align: bottom;
}
.abridgement-detail.FDiMpm .links a.download{background-color: #65C3FF;color: #fff;}
.abridgement-detail.FDiMpm .links a.seemore{background-color: #FFFFFF;color: #65C3FF;}
.abridgement-detail.FDiMpm .links a:hover{background-color: #FFB200;color: #FFFFFF;border-color: #FFB200;}
@media (min-width: 768px){
.abridgement-detail.FDiMpm{padding-top: 25em;}
.abridgement-detail.FDiMpm h3{font-size: 1.5em;}
.abridgement-detail.FDiMpm .frame { margin: auto; width: 70%;}
.abridgement-detail.FDiMpm .links{justify-content: space-evenly;}
}
@media (min-width: 960px){
.abridgement-detail.FDiMpm{padding-top: 0;}
.abridgement-detail.FDiMpm .bg-screen {
width: 75%;
top: 50%;left: -10%;
transform: translateY(-59%);
}
.abridgement-detail.FDiMpm .frame {
margin: 8.5em 0 8.5em 50.5%;
width: 50%;
}
}
.details-container.consulting{
padding: 3em 0;
display: grid;
grid-template-columns: 1fr;
gap:2.5em;
}
.abridgement-detail.consulting{
background-color: #fff;
padding: 1.5em;
border-radius: .5em;
}
.abridgement-detail.consulting h3{
font-size: 1.5em;
padding: 0;margin: 0;margin-bottom: 1rem;
}
.abridgement-detail.consulting h3 span{
display: block;
font-size: .6em;
color: #65c3ff;
}
.abridgement-detail.consulting img{
display: block;
padding: 1em 0;
margin: 0 auto;
width: 100%;
}
.abridgement-detail.consulting .download{text-align: center;}
.abridgement-detail.consulting .download a{
display: inline-block;
line-height: 1;
padding: 1em 1.2em;
border-radius: 100vw;
text-decoration: none;
color: #FFFFFF;
background-color: #65C3FF;
}
.abridgement-detail.consulting .download a::after{
padding-left: 1em;
font-family: "Material Icons";
content: "\f090";
vertical-align: bottom;
}
.abridgement-detail.consulting .download a:hover{background-color: #FFB200;}
@media (min-width: 768px){
.abridgement-detail.consulting h3{font-size: 2em;}
.abridgement-detail.consulting img{width: 90%;}
}
@media (min-width: 960px){
.details-container.consulting{grid-template-columns:1fr 1fr;}
.abridgement-detail.consulting p{height: 8.5em;}
}
.service-article .case-list{padding: 0;}
.service-article .case-list .item a{
border-radius: .5em;
box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, 0.25);
height: 100%;
padding: 1em;
}
.service-article .case-list .item .image{
padding-bottom: 62.5%;
border-radius: .5em;
margin-bottom: 1em;
}
.subsidy-cta{
border-radius: 1em;
background-color: #FFF;
box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, 0.25);
padding: 1em;
}
.subsidy-cta dl{
font-weight: 600;
margin-bottom: 2em;
}
.subsidy-cta dt{
font-size: 1.5em;
text-align: center;
margin-bottom: .8em;
}
.subsidy-cta dd{margin-left: 0;}
.subsidy-cta .to-contact{padding: 1em 0;}
@media (min-width: 768px){
.subsidy-cta{padding: 1em 2em 2em;}
}
@media (min-width: 960px){
.subsidy-cta{
width: 86.2%;
margin: auto;
padding: 1em 3.75em 4em;
}
.subsidy-cta dd{
margin: auto;
width: 75%;
}
}
.plan-content{
margin: 1em 0;
padding-left: 1em;
border-left: .125em solid #65C3FF;
}
.plan-content.FDiMpm,.plan-content.FavrikNavi{
padding-left: 0;
border-left: none;
}
.plan-content .plan-cost,.cost-frame{font-weight: 600;}
.plan-content.academy .plan-cost,.plan-content.FDiMpm .plan-cost{
display: grid;
grid-template-columns: 1fr;
gap:2.5em;
}
.plan-content.FDiMpm .plan-cost section,.plan-content.FDiMpm .cost-frame{
background-color: #fff;
padding: 1.2em 1em;
border-radius: .5em;
box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, 0.25);
}
.plan-content.FDiMpm .plan-cost,.plan-content.FDiMpm .cost-frame{margin-bottom: 2em;}
.plan-content.FDiMpm h3{
font-size: 1.5em;
text-align: center;
padding: 1.5em 0;
}
.plan-content.FDiMpm h3 span{
font-size: 1rem;
display: block;
color: #65C3FF;
}
.plan-content .plan-cost h5,.plan-content .plan-cost p,.cost-frame h5,.cost-frame p{padding: 0;margin: 0;}
.plan-content .plan-cost h5,.cost-frame h5{font-size: 1.1em;}
.plan-content .plan-cost p,.plan-content .plan-cost p span,.cost-frame p,.cost-frame p span{font-size: 2em;}
.plan-content .plan-cost p.sub,.cost-frame p.sub{font-size: 1em;margin-top: -1em;margin-bottom: 1em;}
.cost-frame dd{margin-left: 0;}
.plan-content.FDiMpm .cost-frame dd{font-weight: 400;color: #515151;}
.plan-content .plan-cost .off-arrow{
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 1.1em;
line-height: 1.5;
color: #fff;
height: 4em;
z-index: 1;
}
.plan-content .plan-cost .off-arrow::before{
position: absolute;
display: block;
content: "";
width: 4em;height: 10em;
background-color: #65c3ff;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
top: 50%;left: 50%;transform: translate(-50% , -50%) rotate(0.25turn);
z-index: -1;
}
.plan-content .plan-cost .plus{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.plan-content ul{padding-left: 0;}
.plan-content ul li{
list-style-type: none;
color: #1C1B1F;
font-weight: 600;
margin-bottom: 1em;
position: relative;
padding-left: 1.5em;
}
.plan-content ul li::before{
content: '\f00c';
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
font-size: 1.2em;
top: -.2em;
left: 0;
}
.plan-content.FavrikNavi .dropshadow-frame{
background-color: #fff;
padding: 2.5em 1.5em;
border-radius: 1em;
box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, 0.25);
margin-bottom: 3em;
}
.plan-content.FavrikNavi .dropshadow-frame p{
margin: 0;
text-align: center;
font-weight: 700;
font-size: 1.3em;
line-height: 1.5;
}
.plan-content.FDiMpm .to-contact,.plan-content.FDiMpm .more-link,.plan-content.FavrikNavi .more-link{text-align: center;}
.plan-content.FDiMpm .to-contact a,.plan-content.FDiMpm .more-link a,.plan-content.FavrikNavi .more-link a{font-size: 1.2em;border-radius: .5em;}
.plan-content.FDiMpm .cost-frame p,.plan-content.FDiMpm .cost-frame p span{font-size: 1.8em;}
.plan-content.FDiMpm .cost-frame p.sub{font-size: 1em;}
@media (min-width: 768px){
.plan-content .plan-cost{font-size: .9em;}
.plan-content.academy .plan-cost{
grid-template-columns: 1fr 6em 1fr;
gap:2.5em 2em;
}
.plan-content.FDiMpm .plan-cost{
grid-template-columns: 1fr 1em 1fr;
gap:2.5em 2em;
}
.plan-content .plan-cost .off-arrow{width: 100%;height: 100%;}
.plan-content .plan-cost .off-arrow::before{
width: 6em;height: 6em;
transform: translate(-45% , -50%) rotate(0turn);
z-index: -1;
}
.plan-content.FDiMpm .grid-wrap_2col{
display: grid;
grid-template-columns: 1fr 1fr;
gap:2em;
}
.plan-content.FavrikNavi .dropshadow-frame{width: 60%;margin: 0 auto 3em;}
.plan-content.FavrikNavi .dropshadow-frame p{font-size: 1.5em;}
}
@media (min-width: 960px){
.plan-content.academy{
margin: 1em auto;
width: 80%;
padding-left: 1.5em;
}
.plan-content .plan-cost{font-size: 1em;}
.plan-content.academy .plan-cost{
grid-template-columns: 1fr 10em 1fr;
gap:2.5em;
}
.plan-content.FDiMpm .plan-cost{grid-template-columns: 1fr 3em 1fr;	}
.plan-content .plan-cost .off-arrow{padding-right: 1em;}
.plan-content .plan-cost .off-arrow::before{width: 10em;transform: translate(-50% , -50%) }
}
.FabrikNavi-hr{
width: 100%;
height: 21em;
background-color: #65C3FF;
background-image: url(//ff.t-denso.com/wp-content/themes/ff-202508/img/FabrikNavi-hr-bg.png);
background-size: auto 120%;
background-position: center center;
}
.FabrikNavi-hr .wrap{height: 100%; position:relative;}
.FabrikNavi-hr .FabrikNavi-hr-inner{
position: absolute;
width: 100%;
background-color: #fff;
border-radius: .7em;
top: 50%;
transform: translateY(-50%);
}
.FabrikNavi-hr .FabrikNavi-hr-inner p{
text-align: center;
font-weight: bold;
font-size: 1.2em;
line-height: 1.5;
}
.FabrikNavi-hr .FabrikNavi-hr-inner .more-link a{border-radius: .7em;}
.proposal-flow{
display:grid;
grid-temprate-colums:1fr;
gap:5em;
padding: 3em 0;
}
.proposal-flow .item{
position: relative;
background-color: #F2F2F7;
padding: 1.2em 2em;
border-radius:1em;
text-align: center;
}
.proposal-flow .item::after{
position: absolute;
display: block;
content:"";
width: 2em;height: 2em;
background-color: #f2f2f7;
clip-path: polygon(50% 100%, 0 0, 100% 0);
bottom: -3.5em;left: 50%;transform:translateX(-50%);
}
.proposal-flow .item:last-child::after{display:none;}
.proposal-flow .item h4{
position: relative;
font-size: 1.25em;
margin: 0;
padding: 1em 0 1em 5em;
}
.proposal-flow .item h4 span{
display: inline-block;
font-family: "MuseoModerno", sans-serif;
position: absolute;
font-size: 1.1em;
border-radius: 100vw;
padding: .3em 1em;
background-color: #ffb200;
color: #fff;
left: 0;top: 50%;transform: translateY(-50%);
}
@media (min-width: 768px){
.proposal-flow .item{padding: 1.2em 4em;}
.proposal-flow .item h4{font-size: 2em;padding: .5em 0 .5em 5em;}
.proposal-flow .item h4 span{left: 2em;}
.proposal-flow .item p{font-size: 1.125em;}
}
@media (min-width: 960px){
.proposal-flow{
width: 75%;
margin: auto;
}
.proposal-flow .item h4{width: 90%;margin: 0 auto;}
}
.case-report{
background-color: #fff;
padding: 2.5em 1.5em;
border-radius: 1em;
box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, 0.25);
}
.case-report .subtitle{
font-size: 1.1em;
font-weight: 600;
text-align: center;
line-height: 1.2;
padding: 1rem 0;
margin: 0 0 1rem;
border-top: .2em solid #162144;
border-bottom: .2em solid #162144;
}
.case-report h3{text-align: center;}
.case-report section.task{
background-color: #F2F2F7;
border: .45em solid #162144;
padding: 2em;
border-radius: 1em;
}
.case-report section.task h4{font-size: 1.3em;padding: 0;margin: 0;margin-bottom: 1em;}
.case-report section.task dt{font-weight: 600;font-size: 1.1em;}
.case-report section.task dd{line-height: 1.3;margin-left: 0;margin-bottom: 1em;}
.case-report .BAsummary{
display: grid;
grid-template-columns: 1fr;
gap:1.5em;
padding: 1em 0 0;
}
.case-report .BAsummary .item{
text-align: center;
line-height: 1.5;
font-weight: 600;
}
.case-report .BAsummary .item .before-cost{
background-color: #162144;
color: #fff;
text-align: center;
padding: .5em;
margin-bottom: 1rem;
}
.case-report .BAsummary .item .arrow{
position: relative;
width: 100%;height: 1.8em;
margin-bottom: 1rem;
}
.case-report .BAsummary .item .arrow::before{
position: absolute;
display: block;
content: "";
width: 1.8em;height: 1.56em;
background-color: #65c3ff;
clip-path: polygon(50% 100%, 0 0, 100% 0);
top: 50%;left: 50%;transform: translate(-50% , -50%);
}
.case-report .BAsummary .item p{padding: 0;margin: 0;}
.case-report .BAsummary .item .hawhas{
font-size: 1.1em;
margin-bottom: 1rem;
}
.case-report .BAsummary .item .hawhas strong{font-size: 1.2em;}
.case-report .BAsummary .item .hawmuch{
padding: .5em;
background-color: #ffb200;
color: #fff;
border-radius: 100vw;
}
@media (min-width: 768px){
.case-report{	padding: 2.5em 3.75em;}
.case-report .subtitle{font-size: 1.125em;}
.case-report h3{font-size: 2em;}
.case-report section.task h4{font-size: 1.5em;}
.case-report .BAsummary{
grid-template-columns: 1fr 1fr;
gap:2em 1em;
}
.case-report .BAsummary .item .arrow{height: 3em;}
.case-report .BAsummary .item .arrow::before{	width: 2.8em;height: 2.3em;}
.case-report .BAsummary .item .hawhas strong{font-size: 1.7em;}
}
@media (min-width: 960px){
.case-report section.task dl{
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(4, auto);
}
.case-report .BAsummary{grid-template-columns: 1fr 1fr 1fr 1fr;}
}
details.faqs {
padding: 1rem;
border-radius: 1rem;
margin-bottom: .5em;
border: .125rem solid transparent;
}
details.faqs summary{display: block;}
details.faqs summary .inner{
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: 2.2em;
position: relative;
}
details.faqs summary .inner::before{
position: absolute;
display: block;
content:"Q";
font-size: 2em;
font-weight: 600;
line-height: 1;
left: 0;
top: 50%;
transform: translateY(-50%);
font-family: "Gill Sans";
}
details.faqs summary .inner p{
position: relative;
margin: 0;
font-size: 1.125em;
line-height: 1.3;
font-weight: bold;
text-decoration: none;
}
details.faqs summary .inner .material-symbols-outlined{	font-size: 3em;}
details.faqs:hover,details.faqs[open]{border: .125rem solid #f2f2f7;}
details.faqs[open] summary .inner .material-symbols-outlined{ transform: rotate(180deg);}
details.faqs .content{padding: 1rem 0;}
details.faqs .content p{line-height: 1.7}
@media (min-width: 960px){
.col_2{
display: flex;
}
.col_2 h2{width: 40%;margin-top: 0;padding-top: 0;}
.col_2 .col_2-main{width: 49%;}
}
.demo-servise-cta .wrap{
position: relative;
overflow: hidden;
border-radius: 1.1em;
padding: 2em .85em;
}
.demo-servise-cta .bg-image{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100.5%;
height: 100.5%;
object-fit: cover;
}
.demo-servise-cta h3{position: relative;font-size: 1.5em;color: #fff;padding: 0;margin: 0;margin-bottom: 1.5em;}
.demo-servise-cta h3 span{font-size: .8em;display: block;margin-bottom: .5em;}
.demo-servise-cta .frame{
position: relative;
background-color: #fff;
padding: 1.5em;
border-radius: 1em;
text-align: center;
}
.demo-servise-cta .frame .icon{width: 5em;height: auto;}
.demo-servise-cta .frame dl{margin-bottom: 1em;}
.demo-servise-cta .frame dt{font-size: 1.125em;font-weight: 600;}
.demo-servise-cta .frame dd{margin-left: 0;}
@media (min-width: 768px){
.demo-servise-cta .wrap{padding: 2em;}
.demo-servise-cta h3{font-size: 2em;}
.demo-servise-cta h3 span{font-size: .7em;}
.demo-servise-cta .frame{margin: auto;width: 60%;}
}
@media (min-width: 960px){
.demo-servise-cta .wrap{
display: flex;
justify-content: space-between;
align-items: center;
padding: 6em 6em;
}
.demo-servise-cta h3{font-size: 2.5em;margin-bottom: 0;}
.demo-servise-cta .frame{margin: 0;width: 30%;}
}    .search-list{width: 100%;margin: 3rem auto;}
.page-list-item{
padding: 1rem .2rem;
margin-bottom: 1rem;
border-bottom: .12rem solid #D8D8D8;
}
.page-list-item a{
display: block;
box-sizing: border-box;
color: #515151;
text-decoration: none;
padding: .2rem 1rem;
transition: all .2s linear;
}
.page-list-item a:hover{color: #D8D8D8;}
.page-list-item dt{
font-size: 1.2em;
font-weight: bold;
margin-bottom: .5rem;
}
.page-list-item dd{
margin-left: 0;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-height: 1.5;
} @media (min-width: 960px){
.two-col{
display: flex;
justify-content: space-between;
-ms-align-items: flex-start;
align-items: flex-start;
}
.two-col .main-col{width: 71.4%;}
.two-col .sidebar{
width: 25%;
position: sticky;
top: calc(8.14em + 4.2em + 1em);
}
} .navigation.pagination{
width: 100%;
padding: 1em 0 3em;
}
.navigation.pagination .screen-reader-text{display: none;}
.navigation.pagination ul.page-numbers {
margin-top: 1.25em;
text-align: center;
padding-left: 0;
}
.navigation.pagination ul.page-numbers li {
display: inline;
list-style: none outside none;
}
.navigation.pagination ul.page-numbers li a.page-numbers,
.navigation.pagination ul.page-numbers li span.page-numbers {
padding: 0.25em 0.8em;
display: inline-block;
position:relative;
}
.navigation.pagination ul.page-numbers li a.page-numbers {
border: .0625em solid #d9d9d9;
color: #515151;
text-decoration: none;
border-radius: .18em;
}
.navigation.pagination ul.page-numbers li a:hover {
background-color: #515151;
color: #fff;
}
.navigation.pagination ul.page-numbers li a:active {
box-shadow: 0 0 .18em rgba(0,0,0,0.2) inset;
top: .0625em;
}
.navigation.pagination ul.page-numbers li span.page-numbers {
background: rgb(248,248,248);
border: .0625em solid rgb(230,230,230);
color: rgb(180,180,180);
text-decoration: none;
border-radius: .18em;
}
.navigation.pagination ul.page-numbers li span.current {
border: .0625em solid #3cb9ff;
color: #3cb9ff;
font-weight: bold;
border-radius: .18em;
}
.navigation.pagination ul.page-numbers li span.dots{
background: transparent;
border:none;
padding: 0.25em;
} .navigation.post-navigation{
width: 100%;
padding: 1em 0 3em;
}
.navigation.post-navigation .screen-reader-text{display: none;}
.navigation.post-navigation .nav-links{
width: 100%;
}
.navigation.post-navigation .nav-links::after{content: ".";display: block;visibility: hidden;height: 0;font-size: 0;clear: both;}
.navigation.post-navigation .nav-links > div{width: 50%;}
.navigation.post-navigation .nav-links a{
padding: .2em 1em;
line-height: 1.5;
text-decoration: none;
color: #515151;
position: relative;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.navigation.post-navigation .nav-links a span{font-size: .8em;}
.navigation.post-navigation .nav-links .nav-previous{float: left;}
.navigation.post-navigation .nav-links .nav-next {float: right;}
.navigation.post-navigation .nav-links .nav-previous a{padding-left: 1.5em;}
.navigation.post-navigation .nav-links .nav-next a{padding-right: 1.5em;}
.navigation.post-navigation .nav-links a::before{
position: absolute;
display: block;
font-size: 1.2em;
color: #D9D9D9;
top: 50%;
transform: translateY(-50%);
font-family: "Font awesome 6 Free";
font-weight: bold;
}
.navigation.post-navigation .nav-links .nav-previous a::before{
content:"\f053";
left: 0;
}
.navigation.post-navigation .nav-links .nav-next a::before{
content:"\f054";
right: 0;
}
.navigation.post-navigation .nav-links a:hover{color: #c9c9c9;}
@media (min-width: 960px){
.navigation.post-navigation .nav-links a{
padding: .2em 1.5em;
margin: 1em 0;
}
.navigation.post-navigation .nav-links .nav-previous a{padding-left: 2.5em;}
.navigation.post-navigation .nav-links .nav-next a{padding-right: 2.5em;}
.navigation.post-navigation .nav-links a::before{font-size: 1.5em;}
}
dl.article-list{
background-color: #F8FBFF;
padding: 1.4em;
margin-bottom: 2em;
border-radius: .8em;
}
dl.article-list dt{
color: #010101;
font-size: 1.143em;
font-weight: 700;
text-align: center;
padding: 1em;
}
dl.article-list dd{margin: 0;}
dl.article-list ol{
margin: 0;padding: 0;
counter-reset: my-counter;
}
dl.article-list ol li{
font-size: .857em;
list-style-type: none;
padding: .2em 0 .2em 2.5em;
border-bottom: .1em solid #515151;
position: relative;
}
dl.article-list ol li:last-child{border-bottom: none;}
dl.article-list ol li a{
display: inline-block;
box-sizing: border-box;
width: 100%;
padding: 1em .2em;
color: #515151;
text-decoration: none;
border-radius: .2em;
}
dl.article-list ol li a:hover{background-color: #d9d9d9;}
dl.article-list ol li:before {
content: counter(my-counter);
counter-increment: my-counter;
background-color: #65c3ff;
color: #FFFFFF;
font-size: 1em;
display: block;
position: absolute;
text-align: center;
height: 2em;
line-height: 2;
width: 2em;
border-radius: 100vw;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.sidebar ul.tag-list{
font-size: .9rem;
list-style-type: none;
padding:1em 0 2rem;
display: flex;
flex-wrap: wrap;
}
.sidebar ul.tag-list li{
margin-right: .7em;
margin-bottom: .5em;
}
.sidebar ul.tag-list a{
text-decoration: none;
display: inline-block;
line-height: 1;
padding: .5em .7em;
background-color: #65c3ff;
color: #515151;
border-radius: .3em;
}
.sidebar ul.tag-list a::before{content:"# ";}
.sidebar ul.tag-list a:hover{color: #65c3ff;background-color: #515151;}
.archive-card.blog{
padding: 1em;
margin-bottom: 2em;
background-color: #F2F2F7;
border-radius: 1em;
}
.archive-card.blog .title{
font-weight: 700;
font-size: 1.7em;
line-height: 1.5;
margin: 0;
}
.archive-card.blog .eyecatch{border-radius: 1em; margin: 1em 0;}
.archive-card.blog .eyecatch img{width: 100%; display: block;border-radius: 1em;}
.archive-card.blog .text p{margin: 0;}
.archive-card.blog ul.cat-list{
font-size: .9rem;
list-style-type: none;
padding:.5em 0;
display: flex;
flex-wrap: wrap;
}
.archive-card.blog ul.cat-list li{margin-right: .7em;}
.archive-card.blog ul.cat-list a{
text-decoration: none;
display: inline-block;
line-height: 1;
padding: .5em .7em;
background-color: #3CB9FF;
color: #fff;
}
.archive-card.blog ul.cat-list a::before{
font-family: "Font awesome 6 Free";
content:"\f02b";
font-weight: bold;
padding-right: .5em;
font-size: 1.1em;
}
.archive-card.blog ul.cat-list a:hover{background-color: #9ddcff;}
.archive-card.blog ul.tag-list{
font-size: .9rem;
list-style-type: none;
padding:.5em 0;
display: flex;
flex-wrap: wrap;
}
.archive-card.blog ul.tag-list li{
margin-right: .7em;
margin-bottom: .5em;
}
.archive-card.blog ul.tag-list a{
text-decoration: none;
display: inline-block;
line-height: 1;
padding: .5em .7em;
background-color: #65C3FF;
color: #515151;
border-radius: .3em;
}
.archive-card.blog ul.tag-list a::before{content:"# ";}
.archive-card.blog ul.tag-list a:hover{color: #65c3ff;background-color: #515151;}
.archive-more-btn{padding-top: 1rem; text-align:right;}
.archive-more-btn a{
display: inline-block;
text-decoration: none;
border-radius: 100vw;
font-size: 1.143rem;
line-height: 1;
font-weight: bold;
background-color: #FFFFFF;
border: .15em solid #65c3ff;
color: #65c3ff;
padding: 1em 2.286em;
transition: all .5s;
}
.archive-more-btn a::after{
font-family: "Font awesome 6 Free";
content:"\f054";
font-weight: bold;
padding-left: 1em;
}
.archive-more-btn a:hover{
background-color: #65c3ff;
color: #fff;
}
@media (min-width: 768px){
.archive-card.blog{padding: 2em;}
.archive-card.blog > div{
display: flex;
justify-content: space-between;
}
.archive-card.blog .eyecatch{
background-color: #EDEDED;
position: relative;
overflow: hidden;
width: 50%;height: 0;
margin: 0;
padding-bottom: 50%;
}
.archive-card.blog .eyecatch img{
position: absolute;
top: 50%;left: 50%;
transform: translate(-50% ,-50%);
width: 100.5%;height: 100.5%;
object-fit: cover;
}
.archive-card.blog .text{width: calc(50% - 2em);}
.archive-card.blog .text p{
height: 12.5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
}
}
@media (min-width: 960px){
.archive-card.blog{padding: 1.5em;}
.archive-card.blog .eyecatch{width: 65%;padding-bottom: 45%;}
.archive-card.blog .text{width: calc(35% - 2em);}
} .blog-hero {margin-bottom: 2em;}
.blog-hero h1{font-size: 1.25em; line-height: 1.5; color:#010101;}
.blog-hero ul.cat-list{
font-size: .9rem;
list-style-type: none;
padding:.5em 0;
display: flex;
flex-wrap: wrap;
}
.blog-hero ul.cat-list li{margin-right: .7em;}
.blog-hero ul.cat-list a{
text-decoration: none;
display: inline-block;
line-height: 1;
padding: .5em .7em;
background-color: #3CB9FF;
color: #fff;
}
.blog-hero ul.cat-list a::before{
font-family: "Font awesome 6 Free";
content:"\f02b";
font-weight: bold;
padding-right: .5em;
font-size: 1.1em;
}
.blog-hero ul.cat-list a:hover{background-color: #9ddcff;}
.blog-hero ul.tag-list{
font-size: .9rem;
list-style-type: none;
padding:.5em 0;
display: flex;
flex-wrap: wrap;
}
.blog-hero ul.tag-list li{margin-right: .7em;margin-bottom: .5em;}
.blog-hero ul.tag-list a{
text-decoration: none;
display: inline-block;
line-height: 1;
padding: .5em .7em;
background-color: #65c3ff;
color: #515151;
border-radius: .3em;
}
.blog-hero ul.tag-list a::before{content:"# ";}
.blog-hero ul.tag-list a:hover{color: #65c3ff;background-color: #515151;}
.blog article h2{font-size: 1.25em;}
.blog article h3{font-size: 1.125em;}
.blog article p{line-height: 2;}
@media (min-width: 768px){
.blog-hero h1{font-size: 2em;}
.blog article h2{font-size: 1.7em;}
.blog article h3{font-size: 1.5em;}
}
@media (min-width: 960px){
.blog article{font-size: 1.143em;}
}
details.article-menu{
background-color: #f0f0f0;
border: .06em solid #6e6e6e;
border-radius: .12em;
margin-bottom: 1em;
line-height: 2;
}
details.article-menu summary{
list-style-type: none;
position: relative;
display: block;
cursor:pointer;
width: 100%;
padding: .5em;
text-align: center;
border-radius: .12em;
background-color: #fff;
box-sizing: border-box;
font-weight: bold;
letter-spacing: .36em;
}
details.article-menu[open] summary{
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
details.article-menu .content{
background-color: #f0f0f0;
padding: 1.5em 3.5em 1.5em 1.5em;
font-size: .8em;
line-height: 1.3;
}
details.article-menu .content ul li{
list-style-type: none;
padding: 0.125em;
border-bottom: 0.0625em dotted #b3b3b3;
}
details.article-menu .content ul li:last-child{
border-bottom: none;
}
details.article-menu .content ul li li:first-child{border-top: 0.0625em dotted #b3b3b3;}
details.article-menu .content ul li a{
display: block;
box-sizing: border-box;
margin: 0;
margin-left: 1em;
padding: 1em 0.5em;
color: #1a1a1a;
position: relative;
}
details.article-menu .content ul li a:before{
position: absolute;
content:"";
background-color: #b3b3b3;
width: .5em;
height: 1em;
clip-path: polygon(0 0, 100% 50%, 0 100%);
left: -.5em;
top: 1em;
}
details.article-menu .content ul li a:hover{background-color: #dcdddd;}
details.article-menu .content ul li a:active{
background-color: #dcdddd;
font-weight: bold;
}
.share-container{width: 100%;padding: 1em 0;}
.share-container p{
text-align: center;
color: #000;
font-size: 16px;
}
.share-container ul{
padding-left: 0;
list-style-type: none;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
.share-container li{padding:0 .7em 1em;}
.share-container li button{
cursor: pointer;
background-color: transparent;
border: none;
padding: 0;
}
.share-container li img{width: 2.5em;height: auto;}
.share-container li button:hover img,.share-container li a:hover img{opacity: .7;}
details.article-menu{
background-color: #f0f0f0;
border: .06em solid #6e6e6e;
border-radius: .12em;
margin-bottom: 1em;
line-height: 2;
}
details.article-menu summary{
list-style-type: none;
position: relative;
display: block;
cursor:pointer;
width: 100%;
padding: .5em;
text-align: center;
border-radius: .12em;
background-color: #fff;
box-sizing: border-box;
font-weight: bold;
letter-spacing: .36em;
}
details.article-menu[open] summary{
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
details.article-menu .content{
background-color: #f0f0f0;
padding: 1.5em 3.5em 1.5em 1.5em;
font-size: .8em;
line-height: 1.3;
}
details.article-menu .content ul li{
list-style-type: none;
padding: 0.125em;
border-bottom: 0.0625em dotted #b3b3b3;
}
details.article-menu .content ul li:last-child{
border-bottom: none;
}
details.article-menu .content ul li li:first-child{border-top: 0.0625em dotted #b3b3b3;}
details.article-menu .content ul li a{
display: block;
box-sizing: border-box;
margin: 0;
margin-left: 1em;
padding: 1em 0.5em;
color: #1a1a1a;
position: relative;
}
details.article-menu .content ul li a:before{
position: absolute;
content:"";
background-color: #b3b3b3;
width: .5em;
height: 1em;
clip-path: polygon(0 0, 100% 50%, 0 100%);
left: -.5em;
top: 1em;
}
details.article-menu .content ul li a:hover{background-color: #dcdddd;}
details.article-menu .content ul li a:active{
background-color: #dcdddd;
font-weight: bold;
}
.share-container{width: 100%;padding: 1em 0;}
.share-container p{
text-align: center;
color: #000;
font-size: 16px;
}
.share-container ul{
padding-left: 0;
list-style-type: none;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
.share-container li{padding:0 .7em 1em;}
.share-container li button{
cursor: pointer;
background-color: transparent;
border: none;
padding: 0;
}
.share-container li img{width: 2.5em;height: auto;}
.share-container li button:hover img,.share-container li a:hover img{opacity: .7;}
.scroll-box {
width:100%;
overflow-x: auto;
padding-bottom: 1em;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
} .scroll-box::-webkit-scrollbar { height: .2em;} .scroll-box::-webkit-scrollbar-track { background: #eee;} .scroll-box::-webkit-scrollbar-thumb { background: #aaa; border: none;} .scroll-box::-webkit-scrollbar-thumb:hover { background: #999;}
@media(min-width: 960px){
.scroll-box {
overflow-x: infinite;
white-space: normal;
}
}
div.more-link{
padding-top: 2rem;
padding-bottom: 2rem;
}
div.more-link a{
display: inline-block;
text-decoration: none;
border-radius: 100vw;
line-height: normal;
font-weight: bold;
background-color: #515151;
color: #fff;
padding: 1em 2.286em;
transition: all .5s;
}
div.more-link a.pointer-none{
pointer-events: none;
background-color: #e3e3e3;
}
div.more-link a:hover{
background-color: #FFCA42;
}
a.more-link{
display: inline-block;
text-decoration: none;
border-radius: 100vw;
line-height: normal;
font-weight: bold;
background-color: #3CB9FF;
color: #fff;
padding: 1em 2.286em;
transition: all .5s;
margin: 1em 0;
}
a.more-link.pointer-none{
pointer-events: none;
background-color: #e3e3e3;
}
a.more-link:hover{background-color: #515151;}
a.more-link.gray{background-color: #515151;}
a.more-link.gray:hover{background-color: #3CB9FF;}
table{
border-collapse: collapse;
width: 100%;
}
table.default{
width: 100%;
border-collapse: collapse;
margin-bottom: 1em;
}
table.default th,table.default td{
padding: .5em;
border: 1px solid #333;
}
table.type00 th,
table.type00 td{
padding: .2em .5em;
font-size: .9em;
border: 0.06em solid #f2f2f2;
}
table.type01{
width: 100%;
}
table.type01 th,
table.type01 td{
text-align: left;
padding: .2em .5em;
font-size: .9em;
}
table.type01 th{
font-weight: normal;
min-width: 8em;
}
table.type01 tr:nth-child(odd) th,
table.type01 tr:nth-child(odd) td{
background-color: #f2f2f2;
}
table.type01 tr:nth-child(even) th,
table.type01 tr:nth-child(even) td{
background-color: #FFFFFF;
}
table.type02{
width: 100%;
}
table.type02 th,
table.type02 td{
padding: .2em .5em;
font-size: .9em;
border: 0.125em solid #f2f2f2;
}
table.type02 th{
background-color: #DCDCDC;
width: 5em;
}