:root {
--branding-blue: #0071b8;
--branding-vividblue: #29a7de;
--branding-lightblue: #daf0fc;
--branding-darkblue: #255484;
--branding-gray: #808080;
--branding-lightgray: #eeeeee;
--branding-red: #bd272d;
--branding-orange: #f38f1e;
--branding-green: #00a599;
--branding-font-sans:"Noto Sans", sans-serif;
--branding-font-serif:"Noto Serif", serif;
--branding-gradation:radial-gradient(circle at 0% 0%, #00eaff 0%, #0093d6 50%, #006ab6 100%);
--branding-gradation2:linear-gradient(to top, #00bdff 0%, #0093d6 70%, #006ab6 100%);
--branding-graybanner:linear-gradient( to top,#f7f7f7 0%,#e0e0e0 50%,#cfcfcf 100%);
} ::placeholder {
color: #cccccc;
}
#fly1 {
position: absolute;
width:40%;
animation-play-state: paused;
opacity: 0;
}
@keyframes fly-off { from {
bottom:-50%;
left:-40%;
opacity: 0;
} to {
bottom:0;
left:-10%;
opacity: 1;
}
}
#fly1 {
position: absolute;
width:40%;
animation-play-state: paused;
opacity: 0;
}
@keyframes fly-off {
from {
bottom:-50%;
left:-40%;
opacity: 0;
}
to {
bottom:0;
left:-10%;
opacity: 1;
}
}
#fly2{width:30%}
#fly3{width:7%}
#fly4{width:39%}
#fly5{width:43%}
#fly6{top:5%; left:15%; width:60%; mix-blend-mode: overlay;opacity: 1;}
@keyframes fly-off2 {
from {
top:0%;
left:-10%;
opacity: 0;
}
to {
top:3%;
left:10%;
opacity: 1;
}
}
@keyframes fly-off3 {
from {
top:-20%;
left:33%;
opacity: 0;
}
to {
top:25%;
left:33%;
opacity: 1;
}
}
@keyframes fly-off4 {
from {
top:15%;
right:-13%;
opacity: 0;
}
to {
top:15%;
right:13%;
opacity: 1;
}
}
@keyframes fly-off5 {
from {
right:-5%;
bottom:20%;
opacity: 0;
}
to {
right:5%;
bottom:20%;
opacity: 1;
}
}
@media (max-width: 600px) {
#fly2{top:7%;left:2%; width:37%}
#fly3{top:19%;left:30%; width:9%}
#fly4{top:16%;right:3%; width:48%}
#fly5{bottom:40%;right:2%; width:54%}
#fly6{top:5%; left:15%; width:80%; mix-blend-mode: overlay;}
@keyframes fly-off2 {
from {
top:3%;
left:-2%;
opacity: 0;
}
to {
top:3%;
left:2%;
opacity: 1;
}
}
@keyframes fly-off3 {
from {
top:-19%;
left:30%;
opacity: 0;
}
to {
top:19%;
left:30%;
opacity: 1;
}
}
@keyframes fly-off4 {
from {
top:16%;
right:-3%;
opacity: 0;
}
to {
top:16%;
right:3%;
opacity: 1;
}
}
@keyframes fly-off5 {
from {
bottom:40%;
right:-2%;
opacity: 0;
}
to {
bottom:40%;
right:2%;
opacity: 1;
}
}
}
@media (max-width: 600px) {
#fly1 {
position: absolute;
width:50%;
animation-play-state: paused;
}
@keyframes fly-off { from {
bottom:-25%;
left:-50%;
opacity: 0;
} to {
bottom:15%;
left:-20%;
opacity: 1;
}
}
} img[id^="fly"] {
position: absolute;
animation-play-state: paused;
opacity: 0;
}
#fly1.launch {
animation: fly-off 0.4s ease-out forwards;
}
#fly2.launch {
animation: fly-off2 0.4s ease-out forwards;
}
#fly3.launch {
animation: fly-off3 0.4s ease-out forwards;
}
#fly4.launch {
animation: fly-off4 0.4s ease-out forwards;
}
#fly5.launch {
animation: fly-off5 0.4s ease-out forwards;
} #top .inner{ width:98%; max-width:1200px; margin:0 auto;}
#top .global-nav ul{ display: flex; justify-content: space-between; max-width:1000px; margin:0 auto 2.5rem auto;}
#top .global-nav li{ position: relative;}
#top .global-nav li .submenu-panel{ display: none; opacity: 0; position: absolute; top:3.0rem; left:0; background-color: rgba(255,255,255,0.90); z-index: 10; box-shadow: 0.4rem 0.4rem 1.2rem rgba(0,0,0,0.2);}
#top .global-nav li:hover { height: auto;}
#top .global-nav li:hover .submenu-panel{ display: flex; opacity: 1; width:fit-content; width:60rem; padding:1.6rem}
#top .global-nav li:hover .submenu-panel dl{ padding:1.6rem; line-height: 1.8;}
#top .global-nav li:hover .submenu-panel:has(.flex-dl){ width:40rem}
#top .global-nav li:hover .submenu-panel dl.flex-dl{ display: flex; flex-wrap: wrap; justify-content: space-between;}
#top .global-nav li:hover .submenu-panel dl.flex-dl dt{width:40%}
#top .global-nav li:hover .submenu-panel dl.flex-dl dt:nth-child(odd){width:60%}
#top .global-nav li:hover .submenu-panel dt a{ font-size:1.4rem; font-weight: 600;}
#top .global-nav li:hover .submenu-panel dd a{ font-size:1.4rem; font-weight: 500; margin-left: 1.6rem;}
#top .global-nav li:hover .submenu-panel a:hover{ color: var(--branding-red);}
#top .global-nav li>a{ font-size:1.4rem; padding:0.75rem 1.5rem; border-radius:0.75rem; font-weight: 600;}
#top .global-nav li>a:hover{background-color: var(--branding-blue); color: white;}
#top .global-nav li:has(.submenu-panel)>a{border-radius:0.75rem 0.75rem 0 0}
#top h1 strong{ font-size:1.2rem;} #top a.logo{ width:fit-content; display: block; max-width:35.2rem; width:80%; margin: 1.5rem 0;}
.footer-nav-mega{ background-color: var(--branding-lightgray); padding: 5.0rem 0; position: relative;}
.footer-mega-inner{ max-width: 1000px; width:90%; margin: 0 auto; display: flex; justify-content: space-between;}
.footer-col p{ font-size:1.6rem; margin-bottom: 1.5rem;}
.footer-col p a{ font-weight: 600;}
.footer-col p i{ margin-left: 1.6rem; font-weight: 500; font-size:1.2rem}
.footer-col hr{ padding:0.8rem 0; display: block; border: none;}
.footer-col ul{ line-height: 2;}
.footer-col li{ font-size:1.4rem; font-weight: 500; color: #000000; padding-left: 0.75rem; }
.footer-col li.subitem a{ font-size:1.4rem; font-weight: 400; color: #808080;padding-left: 1.5rem; }
.footer-col a:hover{ color: var(--branding-red)!important;}
.footer-info{ padding:5.0rem 0}
.footer-info-inner{ max-width:750px; width:80%; margin: 0 auto; display: flex; justify-content: space-between;}
.footer-info-inner .footer-logo{ width:50%}
.footer-info-inner .footer-contact a{ font-size:2.8rem; font-weight: 600; display: flex; align-items: center;}
.footer-info-inner .footer-contact a::before{content: ''; width:2.0rem; height:2.3rem; display:block; background-image:url(//otsum10.com/kataokamd/wp-content/themes/kmd/images/icon_tel.webp); background-size:contain; background-position:center;  background-repeat: no-repeat;}
.footer-info-inner .footer-contact .hours{ font-size: 1.4rem; text-align: right; line-height: 1;}
.footer-social { margin: 0 1.5rem; display: flex; align-items: center;}
.footer-social a{ width:3.5rem; height:3.5rem; }
.footer-social a img{ object-fit: contain; object-position: center;}
.footer-copy{ text-align: center; font-size: 1.4rem; text-align: center; padding-bottom: 4.8rem;}
.scrolled-200px .top{ position: fixed; top:0; left:0; width:100%; background-color: rgba(255, 255, 255, 0.75); z-index: 15;}
.scrolled-200px #top .inner{ display: flex; align-items: flex-end;}
.scrolled-200px #top h1 a{ margin:0.8rem 0}
.scrolled-200px #top .global-nav ul{ margin:0.8rem 0} .hero-inner{ position: relative;}
.hero-inner .hero-cta{ position: absolute; position: absolute; bottom:5%; right:5%; z-index: 10; transition: 0.3s all;}
.hero-inner .hero-cta a{ width:28.7rem; height:5.5rem; display: flex; justify-content: center; align-items: center; background: var(--branding-gradation); color:white; font-size: 1.6rem; font-weight: 600; white-space: nowrap;}
.hero-inner .hero-cta a:hover{ opacity: 0.7;}
.hero-inner .hero-cta a:after{content: ''; width:11.4rem; height:0.8rem; display:block; background-image:url(//otsum10.com/kataokamd/wp-content/themes/kmd/images/arrow_cta.webp); background-size:cover; background-position:right;  background-repeat: no-repeat; margin-left: 1.5rem; transform: translateX(0); transition: 0.5s all;}
.hero-inner .hero-cta a:hover::after{ transform: translateX(1.5rem);}
.scrolled-200px .hero-inner .hero-cta{ position: fixed; bottom:1%; right:5%; border:0.2rem solid #ffffff; transition: 0.3s all;}
.hero-tagline{ text-align: center; font-family: var(--branding-font-serif); font-size:4.5rem; color: var(--branding-vividblue); text-align: center;}
.hero-tagline strong{ font-weight: 400; color: var(--branding-gray);}
section.top-concept{ padding:5.0rem 0}
section.top-concept .wrap{ max-width: 1000px; width:90%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
section.top-concept [class$="-text"]{ width:55%;}
section.top-concept [class$="-text"] h2{ font-size:10.0rem; color: var(--branding-gray); font-family: var(--branding-font-serif); font-weight: 500;}
section.top-concept [class$="-text"] h2 .jp{ font-size:2.0rem; font-weight: 300;}
section.top-concept [class$="-text"] h3 { font-size:2.1rem; font-family: var(--branding-font-serif); font-weight: 400; margin-bottom: 1.5rem;}
section.top-concept p{ font-size:1.4rem; line-height: 2;}
section.top-concept [class$="-visual"] {width:40% }
section.top-concept [class$="-visual"] img{ aspect-ratio: 1 / 1; object-fit: contain; object-position: center; width:66%}
section.top-concept .mission-visual img{ width:75%}
section.top-concept .vision-inner{ flex-direction: row-reverse;}
section.top-concept .vision-inner img{ margin: 0 0 0 auto;}
section.features { background-color: var(--branding-blue); padding:5.0rem 0 7.5rem 0}
section.features .features-inner{ max-width: 1000px; width:90%; margin: 0 auto;}
section.features h2{ font-size:10.0rem; color: white; font-family: var(--branding-font-serif); font-weight: 500;}
section.features h2 .jp{ font-size:2.0rem; font-weight: 300;}
section.features .features-list{  display: flex; justify-content: space-between;}
section.features .feature-item{ width:30%; margin-bottom: 5.0rem;}
section.features .feature-item img{ width:66%; margin:0 auto 1.5rem auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: bottom}
section.features .feature-item p{ width:90%; margin: 0 auto; color: white;}
section.features .features-cta{ display: flex; align-items: center; justify-content: center;}
section.features .features-cta a{ width:18rem; height:5.0rem; border-radius:0.75rem; position: relative; display: flex; align-items: center; justify-content: center; color: var(--branding-blue); background-color: var(--branding-lightgray);background: linear-gradient(to bottom, #e7e7e7, #fefefe);}
section.features .features-cta a:before{content:''; display: block; width:17.5rem; height:4.5rem; border-radius: 0.6rem; border: 1px solid var(--branding-blue); position: absolute;background: linear-gradient(to top, #e7e7e7, #fefefe);z-index: 1; transition: 0.5s all; opacity: 1;}
section.features .features-cta a:hover::before{ opacity: 0.5; transition: 0.5s all;}
section.features .features-cta a i{ position: relative; z-index: 2; font-weight: 500;}
section.achievements{ padding:5.0rem 0 7.5rem 0}
section.achievements .wrap{ max-width: 1000px; width:90%; margin: 0 auto;}
section.achievements h2{ font-size:10.0rem; color: var(--branding-blue); font-family: var(--branding-font-serif); font-weight: 500;}
section.achievements h2 .jp{ font-size:2.0rem; font-weight: 300;}
section.achievements ul{ display: flex; justify-content: space-between;}
section.achievements li{ width:47.8%; background-image: url(//otsum10.com/kataokamd/wp-content/themes/kmd/images/dec_top_achievements.webp); background-size: 90%; background-position: center center; color:white; font-size:4.2rem; text-align: center; font-family: var(--branding-font-serif); aspect-ratio: 478 / 292; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; line-height: 1.2;}
section.achievements .bg-blue{ background-color: var(--branding-darkblue); font-feature-settings: "palt";}
section.achievements .bg-red{ background-color: var(--branding-red);}
section.achievements li i{ transform: translateY(1.5rem);}
section.news{ padding:5.0rem 0; background-color: var(--branding-lightblue);}
section.news h2{ font-size:4.0rem; color: var(--branding-blue); font-family: var(--branding-font-serif); font-weight: 500; text-align: center; margin-bottom: 2.5rem;}
section.news h2 .jp{ font-size:2.0rem; font-weight: 300;}
section.news ul{ width:90%; max-width:75.0rem; margin:0 auto}
section.news li{ display: flex; margin-bottom: 1.5rem; font-family: var(--branding-font-serif); font-size: 1.4rem;}
section.news li a:hover{ color: var(--branding-red)!important;}
section.executives{ padding:5.0rem 0 7.5rem 0}
section.executives .wrap{ max-width: 1000px; width:90%; margin: 0 auto; display: flex; justify-content: space-between;}
section.executives .exec-card{ width:47.8%; color:white; position: relative; display: flex; justify-content: center; align-items: center;}
section.executives .exec-card__image{ }
section.executives .exec-card__content{ width:90%; position: absolute;}
section.executives .exec-card__content .exec-name{font-family: var(--branding-font-serif); padding:1.5rem 0; font-size:2.6rem;}
section.executives .exec-card__content .exec-name .en{ font-size:1.3rem;} .page-banner{ background: var(--branding-gradation); padding:5.0rem 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #ffffff;}
.page-banner .title{ font-size:2.5rem; font-weight: 500;}
.page-banner .subtitle{ font-size: 1.6rem;}
.breadcrumb{ width:95%; max-width:1100px; margin:0 auto; padding:1.5rem 0 5.0rem 0;font-size:1.2rem}
.breadcrumb a:hover{ color: var(--branding-red);}
.about-intro { width:90%; max-width: 1000px; margin:0 auto; padding: 5.0rem 0;}
.about-intro .about-title{ font-size:4.5rem; color: var(--branding-gray); line-height: 1.4; font-family: var(--branding-font-serif); margin-bottom: 2.5rem;}
.about-intro .about-title strong{ color: var(--branding-blue);}
.about-intro .about-text{ font-size:1.8rem; line-height: 2;}
.about-features { width:90%; max-width: 1000px; margin:0 auto; padding:5.0rem 0}
.about-features .features-heading{ text-align: center; font-size: 3.2rem; text-align: center; color: var(--branding-blue); font-family: var(--branding-font-serif); margin-bottom: 5.0rem;}
.about-features .feature-item{ display: flex; justify-content: space-between; margin-bottom: 5.0rem;}
.about-features .feature-item .feature-image{ width:20.5%;}
.about-features .feature-item .feature-body{ width:74.5%}
.about-features .feature-item h3{ font-size: 3.0rem; color: var(--branding-gray); font-family: var(--branding-font-serif); display: flex; line-height: 1.2; align-items: center; margin-bottom: 2.5rem;}
.about-features .feature-number{ font-size: 7.0rem; color: var(--branding-blue); margin-right: 1.5rem;}
.about-features .feature-item p{ font-size:1.4rem; line-height: 2;}
.company-info{ width:90%; max-width: 1000px; margin:0 auto; padding:5.0rem 0; display: flex; justify-content: space-between;}
.company-info .company-info__left{ width:27.3%;}
.company-info .company-info__right{ width:63.3%; line-height: 2;}
.company-info .company-info__right th{ color: var(--branding-blue); text-align: right; padding:1.5rem; border-bottom: 1px solid var(--branding-gray); white-space: nowrap;}
.company-info .company-info__right td{ padding:1.5rem; border-bottom: 1px solid var(--branding-gray);}
section.access{ padding:5.0rem 0}
section.access h2{text-align: center; font-size: 2.5rem; color: var(--branding-blue); margin-bottom: 1.5rem;}
section.access .access-desc{ text-align: center; margin-bottom: 5.0rem;}
section.access .access-maps{ display: flex; justify-content: center;}
section.access .access-maps .map{ width:31.7rem; margin:2.5rem; aspect-ratio: 1 / 1;}
section.access .access-maps .map iframe{ display: block; height: 100%;}
.privacy-policy .editor-content .inner{ padding:5.0rem 0; width:80%; max-width:800px; margin:0 auto}
.privacy-policy .editor-content .inner h2{ font-size:3.2rem; padding:2.5rem 0}
.privacy-policy .editor-content .inner h3{ font-size:2.4rem; padding:2.5rem 0}
.privacy-policy .editor-content .inner p{ font-size:1.6rem; margin-bottom:2.5rem; line-height: 2;}
.privacy-policy .editor-content .inner ul{ font-size:1.6rem; margin-bottom:2.5rem; padding-left: 2.5rem;;}
.privacy-policy .editor-content .inner li{ list-style-type: disc;} section.mailform .description{ text-align: center; margin-bottom: 2.5rem;}
section.mailform .note{ font-size: 1.6rem; text-align: center; margin-bottom: 5.0rem;}
section.mailform table{ border-top:0.1rem solid #ffffff; width:100%; max-width: 70rem; margin:0 auto 2.5rem auto; background-color: #ffffff; padding:7.5rem 0; position: relative;}
section.mailform th{ border-bottom:0.1rem solid #ffffff; padding: 2.5rem; background-color: #ffffff; white-space: nowrap; font-size:1.6rem; vertical-align: top; text-align: right;}
section.mailform td{ border-bottom:0.1rem solid #ffffff; padding: 2.5rem; font-size:1.6rem}
section.mailform th .required{font-size: 1.4rem; display: inline-block; line-height: 1; position: relative; top:-0.5rem; color: var(--branding-color); color: var(--branding-red);}
section.mailform td .line{ display: block; align-items: center;}
section.mailform td p>br{ display: none;}
section.mailform td .line:last-child{ margin-top:1.5rem}
section.mailform td .line i{ margin-right: 0.5rem;}
.wpcf7-form-control-wrap[data-name="your-zipcode"] input{ max-width:20rem}
section.mailform td input:not([type="checkbox"]),
section.mailform td textarea{ padding:0.75rem; width:calc( 100% - 1.5rem - 2px); font-size:1.6rem; background-color: var(--branding-lightgray); border: none;}
section.mailform td input[type="text"],
section.mailform td input[type="email"]{ padding:1.5rem 0.5rem; font-size:1.6rem; background-color: var(--branding-lightgray);}
section.mailform td select{ width:auto}
section.mailform td small{ font-size:1.4rem}
section.mailform .wpcf7-list-item{ display: block;}
section.mailform .acceptance{ text-align: center; margin-bottom:5.0rem}
section.mailform .acceptance label{ display: flex; font-size:1.6rem; justify-content: center;}
section.mailform .acceptance label input{ transform: scale(1.5); margin-right: 0.5rem;}
section.mailform .submit { text-align: center ; display: flex; flex-direction: column;}
section.mailform .submit input { background-color: var(--branding-gray); color: #ffffff; display: inline-flex; align-items: center; padding:1.5rem 5.0rem; line-height: 1; font-size:1.6rem; margin:0 auto; border:1px solid var(--branding-color); border-radius: 1.0rem; cursor: pointer;}
section.mailform .submit input:hover{ background-color: var(--branding-red); }
body.contact section.contact .mail{ display: none;}
section.mailform .submit p{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
.wpcf7-list-item{ margin-left: 0;}
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output{width:80%; max-width: var(--content-max-innerwidth); margin:0 auto; text-align: center; padding:1.5rem 0; font-size: 2.0rem;}
section.mailform .acceptance{ display: flex; justify-content: center; align-items: center; margin-bottom: 0;}
section.mailform .privacypolicy{ text-align: center; font-size:1.2rem; text-decoration: underline; margin-bottom: 5.0rem;} .preparation{ padding: 4.8rem 0; display: flex; justify-content: center; align-items: center; width:100%}
.preparation span{ font-size:2.8rem; font-weight: 300; display: block; color: #808080;}
.page-introduction{ padding:4.8rem 0;}
.page-introduction .inner{ max-width:1000px; width:90%; margin: 0 auto 4.8rem auto;}
.page-introduction h2{font-family: var(--branding-font-serif); font-weight: 500;}
.page-introduction h2 strong{ font-size:4.0rem; color: var(--branding-gray); font-feature-settings: "palt";}
.page-introduction h2 i{ font-size:2.4rem; color: var(--branding-blue); display: block;}
.page-introduction h2+p{ padding-top:2.4rem; font-size:1.8rem; line-height: 1.8;}
.item-section{ max-width:1000px; width:90%; margin: 0 auto 4.8rem auto; padding:2.4rem 0;}
.item-section a.section-banner{ display: flex; position: relative; align-items: center; margin-bottom: 1.2rem;}
.item-section a picture{ position: relative; overflow: hidden;}
.service .item-section a picture:after{content:''; width:200%; height:100%; position: absolute; top:0;background:linear-gradient(90deg, #ffffff 0%, #0071b8 50%, #ffffff 100%);}
.consulting .item-section a picture:after{content:''; width:200%; height:100%; position: absolute; top:0;background:linear-gradient(90deg, #ffffff 0%, #00a599 50%, #ffffff 100%);}
.item-section a picture:after{ opacity: 0; left:0; transition: opacity 0.5s ease 0s, left 0.25s ease 0.25s;}
.item-section a:hover picture:after{ opacity: 0.5; left:-100%;}
.item-section a h2{ position: absolute; color: var(--branding-blue);text-shadow: 2px 2px 10px #ffffff ,-2px 2px 10px #ffffff ,2px -2px 10px #ffffff ,-2px -2px 10px #ffffff; font-family: var(--branding-font-serif); font-weight: 500; font-size:4.0rem; line-height: 1; margin-left: 1.6rem;}
.item-section a span{ font-size:2.0rem; margin-left: 3.2rem;}
.item-section a.section-banner i{ margin-right: 3.2rem; position: relative; display: inline-block;}
.item-section a.section-banner i:after{ content:''; width:0.12rem; height:7.2rem; position: absolute; right:-1.2rem;top:0; transform: rotate(32deg); display: block; background-color: var(--branding-blue);}
.item-section a+p{ font-size:1.6rem; margin-left: 3.2rem; margin-bottom: 2.4rem; display: flex;}
.item-section a+p i{ white-space: nowrap;}
.item-section .service-items{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.item-section .service-items li{ width:31%; margin-bottom: 2.4rem;}
.item-section .service-items li a{ display: block;}
.item-section .service-items li a h3{ display: flex; width:100%; height:10.4rem; justify-content: center; align-items: center; text-align: center; background:var(--branding-graybanner); font-size:2.1rem; font-weight: 500; font-family: var(--branding-font-serif); background: var(--branding-gradation2); color: #ffffff; position: relative;}
.item-section .service-items li a h3:before{content:''; width:100%; height:100%; background-color: #00519e; opacity: 0; position: absolute; transition: 0.5s all; }
.item-section .service-items li a h3:hover::before{ opacity: 1;}
.item-section .service-items li a h3 i{ position: relative;}
.item-section .service-items li a p{ font-size:1.4rem; text-align: center;}
.consulting .page-introduction h2 i{ color: var(--branding-orange);}
.consulting .item-section a h2{ color: var(--branding-green);}
.item-section.title-banner{ width:95%; max-width:1000px; margin:0 auto;}
.item-section.title-banner h2{ color: var(--branding-blue);text-shadow: 2px 2px 10px #ffffff ,-2px 2px 10px #ffffff ,2px -2px 10px #ffffff ,-2px -2px 10px #ffffff; font-family: var(--branding-font-serif); font-weight: 500; font-size:4.0rem; line-height: 1; margin-bottom: 1.2rem;}
.item-section.title-banner.green h2{ color: var(--branding-green)}
.item-section.title-banner span{ font-size:2.0rem; margin-left: 3.2rem;}
.item-section.title-banner i{ margin-right: 3.2rem; position: relative; display: inline-block;}
.item-section.title-banner i:after{ content:''; width:0.12rem; height:7.2rem; position: absolute; right:-1.2rem;top:0; transform: rotate(32deg); display: block; background-color: var(--branding-blue);}
.item-section.title-banner.green i:after{ background-color: var(--branding-green);}
.item-section.title-banner .page-hero{ position: relative; display: flex; align-items: center;}
.item-section.title-banner .page-hero .hero-text{ position: absolute;}
.item-section.title-banner .page-hero .hero-text:has(br:nth-child(3)){ top:0}
.item-section.title-banner .page-hero .lead-text{ font-size:3.6rem; color: var(--branding-gray); line-height: 1.4; font-family: var(--branding-font-serif); font-weight:400;text-shadow: 2px 2px 10px #ffffff ,-2px 2px 10px #ffffff ,2px -2px 10px #ffffff ,-2px -2px 10px #ffffff;}
.pain-list{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.pain-list li{ width:32%; text-align: center; font-size:1.8rem; background-color: var(--branding-lightgray); margin-bottom: 2.0rem; height:10.0rem; display: flex; justify-content: center; align-items: center;}
.pain-list li.blank{ opacity: 0;}
.usp-section h2{ font-size:3.2rem;font-family: var(--branding-font-serif); color: var(--branding-blue); margin-bottom: 2.4rem; font-feature-settings: "palt";}
.green .usp-section h2{ color: var(--branding-green);}
.usp-section p{ font-size:1.8rem; line-height: 1.8; margin-bottom: 2.4rem; font-family: var(--branding-font-serif); font-feature-settings: "palt";}
.services-grid{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.services-grid .service-box{ width:31.5%; margin-bottom: 2.4rem; } .services-grid .service-box h3{ display: flex; width:100%; height:10.4rem; justify-content: center; align-items: center; text-align: center; background:var(--branding-graybanner); font-size:2.1rem; font-weight: 500; font-family: var(--branding-font-serif); background: var(--branding-gradation2); color: #ffffff; position: relative;}
.services-grid .service-box h3:before{content:''; width:100%; height:100%; background-color: #00519e; opacity: 0; position: absolute; transition: 0.5s all; }
.services-grid .service-box h3:hover:before{ opacity: 1;}
.services-grid .service-box h3 i{ z-index: 1;}
.green .services-grid .service-box h3{border: 0.12rem solid var(--branding-green);}
.strategy-section strong{ display: block; font-size:2.0rem; margin-bottom: 1.6rem; font-family: var(--branding-font-serif); font-weight: 500}
.process-section .steps{ display: flex; justify-content: space-between;}
.process-section .steps li{ width:25%;display: flex; align-items: center; justify-content: space-between;}
.process-section .steps li .step-box{ border: 0.12rem solid var(--branding-vividblue); text-align: center; height:12.8rem; display: flex; align-items: center; justify-content: center; position: relative; width:calc(100% - 4.8rem)}
.process-section .steps li::after{ content: ''; width:2.0rem; height:2.8rem; background-color: var(--branding-gray); display: block; clip-path: polygon(0 0, 100% 50%,0 100%); margin-left: 1.2rem; margin-right: 0.4rem;}
.process-section .steps li:last-child{ width:calc(25% - 4.8rem);}
.process-section .steps li:last-child .step-box{ width:100%;}
.process-section .steps li:last-child:after{ display: none;}
.process-section .steps .step-label{ display: block; position: absolute; background: var(--branding-gradation); color: #ffffff; font-weight: 600; font-size:2.0rem; width:fit-content; padding:0.8rem 2.4rem; border-radius:2.4rem; line-height: 1; top:-1.6rem; }
.content-sections .cta-section a{ display: block; background: var(--branding-gradation); color: yellow; text-align: center; padding:2.4rem 0; font-size:3.2rem; font-family: var(--branding-font-serif);}
.content-sections .cta-section a strong{ font-size: 4.8rem;}
.cases-section .case h3{ font-size:2.5rem; font-weight: 600;}
.cases-section .case .case-result{ font-size:2.5rem; font-weight: 600; font-family: var(--branding-font-serif);}
.cases-section .case .case-result .after{ color:var(--branding-red); font-weight: 600; }
.cases-section .case .case-result .after i{ font-size:4.0rem; font-weight: 600; }
.cases-section .case .description{ font-family: var(--branding-font-serif); font-size:1.6rem; margin-bottom: 2.4rem;}
.cases-section .case .case-points li{font-family: var(--branding-font-serif); font-size:1.6rem; margin-bottom: 2.4rem;}
.cases-section .case .case-points li strong{ font-size:2.2rem; color: var(--branding-green); }
.item-section-sub{ width:95%; max-width:1000px; margin:0 auto;}
.item-section-sub h2{color: var(--branding-blue); font-family: var(--branding-font-serif); font-weight: 500; font-size:3.2rem; line-height: 1.8; margin-bottom: 1.6rem;}
.item-section-sub .hero-wrap{ display: flex; justify-content: space-between;}
.item-section-sub .hero-wrap picture{ width:45%}
.item-section-sub .hero-wrap .hero-text{ width:50%; font-size:2.8rem; font-family: var(--branding-font-serif); color: var(--branding-gray); font-feature-settings: "palt";}
.reasons-list{ display: flex; justify-content: space-between;}
.reasons-list li{ width:calc(32% - 3.2rem); background-color: var(--branding-vividblue); display: flex; align-items: center; color: #ffffff; font-size:2.0rem; padding:1.2rem 1.6rem;}
.reasons-list li strong{ display: block; font-size:4.8rem; font-family: var(--branding-font-serif); margin-right: 0.4rem;}
.std-arrow{ font-size:2.4rem; font-family: var(--branding-font-serif); color: var(--branding-blue); width:fit-content; padding:1.6rem 3.6rem 1.2rem 3.6rem; border-bottom:0.12rem solid var(--branding-blue); line-height: 1; position: relative; margin-bottom: 4.8rem;}
.std-arrow::before{ content: ''; width:0.12rem; height:5.2rem; display: block; background-color: var(--branding-blue); transform: rotate(32deg); transform-origin: bottom left; position: absolute; bottom:0; left:0}
.green .std-arrow{color: var(--branding-green); border-bottom:0.12rem solid var(--branding-green);}
.green .std-arrow::before{background-color: var(--branding-green);}
.content-sections{ width:90%; max-width:1000px; margin:0 auto; padding:4.8rem 0}
.content-sections [class$="-section"]{ padding:4.8rem 0;} .single-post .title-box .std{ padding:5.0rem 0}
.single-post article { width:90%; margin:7.5rem auto; max-width:100rem; color: #000000; border:0.1rem solid #063271}
.single-post article h1 .date { font-size:1.6rem; display: block; text-align: center; padding:2.5rem}
.single-post article h1{ font-size:2.4rem; font-weight: bold; margin-bottom:5.0rem;}
.single-post article .main-eyecatch { margin-bottom:2.5rem}
.single-post .postcontent{ background-color: #ffffff; padding:5.0rem}
.single-post .postcontent h2{ font-size:2.0rem; font-weight:bold; color:#dddddd; margin-bottom:1.5rem}
.single-post .postcontent h3{ font-size:1.8rem; font-weight:bold; margin-bottom:1.0rem; border-bottom:0.1rem solid #dddddd}
.single-post .postcontent h4{ font-size:1.6rem; font-weight:bold; margin-bottom:0.5rem; border-left:1.0rem solid #dddddd; padding-left:0.5rem; }
.single-post .postcontent p{ font-size:1.6rem; margin-bottom:1.5rem; line-height: 1.8;}
.single-post .postcontent strong{ font-weight: bold;}
.single-post .postcontent em{ font-style: italic;}
.single-post .postcontent ul{ padding-left:1.5rem;margin-bottom:2.5rem}
.single-post .postcontent li{ font-size:1.6rem; list-style-type: disc;}
.single-post .postcontent table{ font-size:1.6rem}
.single-post .postcontent th{ font-weight: bold;}
.single-post .postcontent a{ color: #000000; text-decoration: underline;}
.single-post .postcontent a:hover{ color: #000000;}
.navi-single{ display: flex; justify-content: center; align-items: center; font-size:1.6rem; margin:5.0rem 0}
.navi-single p{ display: inline-flex; align-items: center;}
.navi-single a{ font-weight: bold; padding: 0.5rem; color: #000000;}
.navi-single a:hover{ color: #000000;}
.navi-single .list{ margin:0 2.5rem}
.single-post .postcontent .linkbox{ padding:2.5rem 0; text-align: center; font-size:1.8rem; margin-bottom:5.0rem; background-color: #eeeeee;}
.single-post .postcontent .linkbox a{ display: block;} section.play-flow>.wrap{ width:98%; max-width:100rem; margin:0 auto;}
.archive-wrap{ max-width:100rem; width:95%; margin:0 auto 7.5rem auto;}
.no-mv { width:95%; max-width:100rem; margin:0 auto; padding:7.5rem 0 0 0}
.archive-list {margin-bottom: 5.0rem; display: flex; flex-wrap: wrap; max-width:100rem; width:100%}
.archive-list li { width:calc(29.5% - 5.2rem); padding:2.5rem; margin:0 1.16% 2.5rem 1.16%; border:0.1rem solid #063271; background-color: #ffffff;}
.archive-list li .image{ width: 100%; height: auto; display: block; border:0.1rem solid #cbcccc; margin-bottom: 1.5rem;}
.archive-list li .image img{ width:100%; height: auto; display: block; object-fit: cover; object-position: center;aspect-ratio: 1 / 1;}
.archive-list li .text{ display: block; width:100%;}
.archive-list li .text i.date{ font-size:1.4rem; color: #000000; display: block;}
.archive-list li .button{ max-width:18.4rem; margin:0 auto; padding: 0;}
.archive-list li .text strong{ font-size:1.6rem; font-weight: bold; display: block; margin-bottom:2.5rem;} .blog-single .inner {display: flex; justify-content: space-between; max-width:100rem; margin:0 auto; padding-bottom:7.2rem}
.blog-single .inner article { width:75%; margin:0; border:none}
.blog-single .inner article .main-eyecatch img{ height:auto}
.widget-area{ width:22%}
.widget-area h3{ font-size:1.6rem; font-weight: 600; margin-bottom: 0.8rem; color: var(--branding-darkblue);}
.widget-area ul{ margin-bottom: 3.2rem;}
.widget-area li { margin-bottom: 0.8rem;}
.widget-area li a{ display: flex; align-items: center;}
.widget-area li a:before{ content:'';display: block; width:1.2rem; height:1.6rem; background-color: var(--branding-darkblue); clip-path: polygon(0 0,100% 50%, 0 100%); margin-right: 0.4rem;}
.blog-single .blogcontent h1{ font-size:2.7rem; margin-bottom: 2.4rem; font-weight: 600;}
.blog-single .blogcontent h1 .date{ display: block; font-size:1.5rem; color: var(--branding-darkblue);}
.blog-single .blogcontent h2 span{ font-size:2.4rem; font-weight: 600; margin-bottom: 2.4rem; display: block;}
.blog-single .blogcontent h3 span{ font-size:2.0rem; font-weight: 600; margin-bottom: 1.6rem; display: block;}
.blog-single .blogcontent p{ font-size:1.6rem; line-height: 2; margin-bottom: 4.8rem;}
.author-info{ background-color: var(--branding-lightgray); padding:2.4rem; border-radius: 1.2rem;}
.author-info .wrap{ display: flex; justify-content: space-between;}
.author-info .ttl{ font-size:1.6rem; font-weight: 600; margin-bottom: 1.2rem;}
.author-info .author-avatar{ width:14.2rem; height:14.2rem; border-radius:50%; overflow: hidden;}
.author-info .text{ width:calc(100% - 16.6rem)}
.author-info .text h2{ font-size:1.8rem; font-weight: 600; margin-bottom: 0.4rem;}
.author-info .text .author-qualification{ font-size:1.4rem; font-weight: 600; margin-bottom: 0.4rem;}
.author-info .text .author-position{ font-size:1.4rem; font-weight: 400; margin-bottom: 1.2rem;}
.author-info .text .author-profile{ font-size:1.2rem; font-weight: 400} #toc_container{ width:calc(100% - 6.4rem); background-color: var(--branding-lightgray); padding:2.4rem 3.2rem; margin: 4.8rem 0;}
#toc_container .toc_title{ font-weight: 500; font-size:1.6rem; margin-bottom: 1.6rem;}
#toc_container .toc_title .toc_number { display: none;}
#toc_container .toc_list li{ font-size:1.6rem; padding:0.8rem 0; margin:0.8rem; border-bottom:0.12rem solid #cccccc;}
#toc_container .toc_list li a{ display: flex;}
#toc_container .toc_list li .toc_number{ width:2.4rem; height:2.4rem; background-color: var(--branding-blue); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.2rem; margin-right: 1.2rem;}
.blog-archive-inner{display: flex; justify-content: space-between; max-width:100rem; margin:0 auto; padding-bottom:7.2rem}  
.blog-archive-inner article { width:75%; margin:0; border:none}
.blog-archive-inner .archive-list li{ border: none; margin:0 0 2.4rem 0}
.blog-archive-inner .archive-list li .image img{ aspect-ratio: 7 / 5;}
.blog-archive-inner .archive-list li{width:calc(33% - 4.8rem); padding:2.4rem}
.blog-archive-inner .archive-list li .image{ border:none}
.blog-archive-inner .archive-list li .outer{ display: none;}
.blog-archive-inner .archive-list li:not(:nth-child(3n)){ border-right:0.12rem solid var(--branding-gray)} .error-404 { padding:10.0rem 0}
.error-404 h1{ text-align: center; font-size: 3.2rem; color: #000000; margin-bottom:2.5rem;}
.error-404.not-found .button{ width:50%; max-width:40rem; margin:0 auto; color: #ffffff;} .sp{ display:none!important;} @media screen and (max-width:1100px){
html{ font-size:1vw}  
.home .otanoshimi .service-container .side-services .side-item{ padding:2.0rem}
} @media screen and (max-width:900px){
.pagehead .contact-box{ display: flex; max-width:42.0rem; justify-content: space-between;}
} @media screen and (max-width:600px){
body{ min-width:320px;}
img{
max-width: 100%;
height: auto;
width :auto;
}
html{ font-size:2.0vw}
.pc{ display:none!important;}
.sp{ display:block!important;}
#top .global-nav{ display: none;}
#top a.logo{ margin:0.25rem 0 0.75rem 0}
#top .inner{ padding-top: 0.75rem; width:95%}
.hero-inner { padding:2.5rem 0}
.hero-inner .hero-cta{ position: unset; display: flex; justify-content: center; padding:2.5rem 0}
.scrolled-200px #top .inner{ display: block;}
.scrolled-200px .hero-inner .hero-cta{ padding:0; right:0; left:0; margin:0 auto; bottom:2.5rem; width:fit-content}
.hero-tagline{ text-align: left; font-size:4.2rem; width:fit-content; margin: 0 auto 2.5rem auto;}
section.top-concept [class$="-text"] h2{ font-size:7.2rem; white-space:nowrap;}
section.top-concept .wrap{ width:75%; display: block;}
section.top-concept [class$="-text"]{ width:100%}
section.top-concept [class$="-visual"]{ width:50%; margin: 2.5rem auto;}
section.top-concept .vision-inner img{ margin:0}
section.top-concept [class$="-visual"] img{ width:100%;}
section.top-concept{ padding: 0;}
section.features{ margin-top: 5.0rem;}
section.features .features-inner{ width:75%}
section.features .features-inner h2{ font-size:7.2rem; white-space:nowrap;}
section.features .features-list{ flex-wrap: wrap; justify-content: space-around;}
section.features .features-list .feature-item{ width:100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;}
section.features .feature-item img{ width:30%; margin-right: 1.5rem;}
section.features .feature-item p{ width:calc(70% - 1.5rem)}
section.achievements .wrap{ width:75%; display: block;}
section.achievements .wrap h2{ font-size:5.2rem; white-space:nowrap; margin-bottom: 5.0rem;}
section.achievements ul{ display: block;}
section.achievements li{ width:100%; margin-bottom: 2.5rem;}
section.executives .wrap{ display: block; width:75%}
section.executives .exec-card{ width:100%; margin-bottom: 2.5rem;}
.footer-mega-inner{ flex-wrap: wrap; justify-content: space-between;}
.footer-mega-inner .footer-col{ width:48%; margin-bottom: 2.5rem;}
.footer-info-inner{ display: block;}
.footer-info-inner .footer-logo{ width:100%}
.footer-contact{ text-align: center;}
.footer-info-inner .footer-contact a{ justify-content: center;}
.footer-info-inner .footer-contact .hours{ text-align: center;}
.footer-social{ justify-content: center; padding: 2.5rem 0;}
.footer-copy{ padding-bottom: 0;}
.page-banner{ margin-top: 2.5rem;}
.about-intro .about-title{ font-size: 4.0rem;}
.about-features .features-heading{ font-size:2.8rem}
.about-features .feature-item{ width:90%; display: block; margin: 0 auto 5rem auto; position: relative;}
.about-features .feature-item .feature-body{ width:100%}
.about-features .feature-number{ position: absolute; opacity: 0.33; right:0; top:0; line-height: 1; font-size:12.5rem;}
.about-features .feature-item h3{ margin-bottom: 1.5rem;}
.about-features .feature-item .feature-image{ width:33%; aspect-ratio: 1 / 1; object-fit: contain;}
.company-info{ width:75%; display: block;}
.company-info .company-info__left {margin-bottom: 2.5rem; width:100%}
.company-info .company-info__right{ width:100%}
section.access .access-maps{ width:75%; margin: 0 auto; display: block;}
section.access .access-maps .map{ width:100%; margin:0}
section.access .access-maps .map iframe{ width:100%}
.wpcf7{ width:80%; margin:0 auto}
section.mailform th{ display: block; width:calc(100% - 5.0rem); padding:0; }
section.mailform td{ display: block; width:100%; padding:0 0 5.0rem 0;}
.wpcf7-list-item{ margin:0 0 1.5rem 0}
section.mailform th{ text-align: left;}
.item-section a h2{ font-size:3.2rem; font-feature-settings : "palt";}
.item-section .service-items li{ width:47.5%}
.item-section.title-banner h2{ font-size:3.2rem; font-feature-settings : "palt"; margin-top: 2.4rem;}
.item-section.title-banner .page-hero .hero-text{ position: relative; width:fit-content; margin: 0 auto;}
.item-section.title-banner .page-hero{ display: block;}
.item-section.title-banner .page-hero .lead-text{ font-size:2.8rem}
.pain-list li{ width:100%}
.pain-list li.blank{ display: none;}
.services-grid .service-box{ width:100%}
.process-section .steps{ display: block; width:80%; margin: 0 auto;}
.process-section .steps li{ width:100%; margin-bottom: 3.2rem; display: block;}
.process-section .steps li .step-box{ height:auto; padding:3.2rem 0 2.4rem 0; width:100%}
.process-section .steps li:last-child{ width:100%;}
.process-section .steps li br{ display: none;}
.process-section .steps li::after{ margin: 2.4rem auto 0 auto; transform: rotate(90deg);}
.item-section-sub .hero-wrap{ display: block; width:100%; margin:0 auto}
.item-section-sub .hero-wrap picture{ width:80%; margin:2.4rem auto; display: block;}
.item-section-sub .hero-wrap .hero-text{width: 100%; display: flex; justify-content: center;}
.item-section-sub .hero-wrap .hero-text p{ width: fit-content;}
.reasons-list{ display: block;}
.reasons-list li{ width:calc(100% - 2.4rem); margin-bottom: 1.2rem;}
.reasons-list li br{ display: none;}
.footer-info{ padding:5.0rem 0 0 0}
footer{ padding-bottom:10.8rem;}
} .globalMenuSp .wrap{ z-index:1000; overflow: scroll; height: 100vh; position: relative; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; align-items: center; }
.globalMenuSp .branding{ width:16.0rem; margin:2.5rem auto}
.globalMenuSp .branding img{ display: block; width:100%;}
.globalMenuSp .inner { padding:5rem;}
.globalMenuSp .inner dt{ width:80%; margin:0 auto 2.5rem auto}
.globalMenuSp .inner .global-nav{ width:fit-content; margin:0 auto; font-size:2.4rem; text-align: left;}
.globalMenuSp .inner .global-nav li{ padding:0.75rem}
.globalMenuSp .inner .footer-contact{ padding:2.5rem 0;}
.globalMenuSp .inner .footer-contact .phone{ font-size:3.2rem}
.globalMenuSp .inner .footer-social{ display: flex; justify-content: center; align-items: center;}
.globalMenuSp .inner .footer-social a{ width:4.8rem; height:4.8rem}
.globalMenuSp .submenu-panel{ display: none;}