/********************************

	INIT

********************************/

body{
word-wrap: break-word;
}
/* body sets word-break: break-all for Japanese. Every Latin-script language
   has to opt back out or its prose breaks mid-word. Portuguese was missing
   from this list, so every pt page wrapped as "os fund / os". Matched on
   :lang(pt) rather than the full locale because Polylang serves it as
   pt-PT-ao90, and :lang(pt) covers that and any later pt-* locale. */
:lang(en) body,
:lang(es-ES) body,
:lang(fr-FR) body,
:lang(pt) body,
:lang(ru) body{
word-break: normal;
}

font{
font-family: 'Noto Sans', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
}
a{
text-decoration: none;
color: rgba(34,83,145,1);
}
a:hover{
text-decoration: none;
color: #27a0dc;
}

.sp{display: none;}
@media(max-width:600px){
.pc{display: none;}
.sp{display: inline-block;}
}
.bg-light{
background-color: transparent !important;
}

.btn, .woocommerce-info a.button,
.wpcf7 input[type=submit] {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-primary {
color: #000;
background-color: #fff;
border-color: #111;
border-radius: 0;
}
.btn-group-sm>.btn,
.btn-sm,
.wpcf7 .btn-group-sm>input[type=submit] {
padding: .25rem .75rem;
font-size: .875rem;
line-height: 1.5;
border-radius: 0;
}
.btn:hover,
.wpcf7 input[type=submit]:hover {
color: #212529;
text-decoration: none;
}
.btn-primary:hover {
color: #fff;
background-color: #350dff;
border-color: #2b00ff;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #11a0d7;
border-color: #11a0d7;
}

.page-item.active .page-link {
z-index: 3;
color: #fff;
background-color: rgba(34,83,145,1);
border-color: rgba(34,83,145,1);
}
.page-link{
color: rgba(34,83,145,1);
}
.page-link:hover {
z-index: 2;
color: rgba(34,83,145,1);
background-color: #e9ecef;
border-color: #dee2e6;
}

/********************************

	COMMON

********************************/
@media (min-width: 769px) {
.row-0			{margin-left:0px;	margin-right:0px;}
.row-0>div	{padding-right:0px;	padding-left:0px;}
.row-10			{margin-left:-5px;	margin-right:-5px;}
.row-10>div	{padding-right:5px;	padding-left:5px;}
.row-20			{margin-left:-10px;	margin-right:-10px;}
.row-20>div	{padding-right:10px;padding-left:10px;}
.row-30			{margin-left:-15px;	margin-right:-15px;}
.row-30>div	{padding-right:15px;padding-left:15px;}
.row-40			{margin-left:-20px;	margin-right:-20px;}
.row-40>div	{padding-right:20px;padding-left:20px;}
.row-50			{margin-left:-25px;	margin-right:-25px;}
.row-50>div	{padding-right:25px;padding-left:25px;}
.row-60			{margin-left:-30px;	margin-right:-30px;}
.row-60>div	{padding-right:30px;padding-left:30px;}
.row-70			{margin-left:-35px;	margin-right:-35px;}
.row-70>div	{padding-right:35px;padding-left:35px;}
.row-80			{margin-left:-40px;	margin-right:-40px;}
.row-80>div	{padding-right:40px;padding-left:40px;}
.row-90			{margin-left:-45px;	margin-right:-45px;}
.row-90>div	{padding-right:45px;padding-left:45px;}
.row-100		{margin-left:-50px;	margin-right:-50px;}
.row-100>div{padding-right:50px;padding-left:50px;}
.row-110		{margin-left:-55px;	margin-right:-55px;}
.row-110>div{padding-right:55px;padding-left:55px;}
.row-120		{margin-left:-60px;	margin-right:-60px;}
.row-120>div{padding-right:60px;padding-left:60px;}
}

.mb-5, .my-5 {margin-bottom:2rem}
.mb-6, .my-6 {margin-bottom:2.5rem}
.mb-7, .my-7 {margin-bottom:3rem}
.mb-8, .my-8 {margin-bottom:3.5rem}
.mb-9, .my-9 {margin-bottom:4rem}

.section_front-gallery .row-0{margin-left:0px;	margin-right:0px;}
.section_front-gallery .row-0>div{padding-right:0px;	padding-left:0px;}


.animate{
opacity: 0;
animation-fill-mode: forwards;
}
.animated {
opacity: 1;
animation-fill-mode: backwards;
}

h1,h2,h3,h4,h5,h6{
font-family: 'Noto Sans', sans-serif;
}
.roboto{
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
}

/********************************

LAYOUT

********************************/
.section{
position: relative;
margin: 0 0 2rem;
padding: 1rem 0 2rem;
}
.home .section{
position: relative;
margin: 0;
/* was 8rem: two adjacent sections produced 16rem of empty page between the
   previous block and the next heading. The heading's ring already carries
   44px of visual lead-in above the text. */
padding: 4.5rem 0;
}
html, body { height: 100%;}
body > #wrapper-footer {
position: sticky;
z-index: 9999999999;
top: 100vh;
}

.center-center {
display: grid;
place-content: center;
gap: 1ch;
}


/********************************

HEADER

********************************/
.navbar-light .navbar-toggler {
color: rgba(0,0,0,1);
/*background-color: rgba(255,255,255,.55);*/
border-color: rgba(0,0,0,.2);
box-shadow: none;
transition: .3s;
}
.navbar-light .navbar-toggler:hover {
color: rgba(0,0,0,1);
background-color: rgba(255,255,255,1);
background-color: rgb(255 255 255 /0);
border-color: rgb(0 0 0 /0);
}
.navbar-light .navbar-toggler{
position: relative;
}
.navbar-light .navbar-toggler:after{
position: absolute;
left: 0;
right: 0;
bottom: -10px;
margin: 0 auto;
content: "MENU";
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 10px;
}
.home .navbar-light .navbar-toggler:after,
.about .navbar-light .navbar-toggler:after,
.page-id-4067 .navbar-light .navbar-toggler:after,
.page-id-4093 .navbar-light .navbar-toggler:after,
.o-kompanii .navbar-light .navbar-toggler:after,
.page-id-6195 .navbar-light .navbar-toggler:after,
.page-id-4093 .navbar-light .navbar-toggler:after,
.service .navbar-light .navbar-toggler:after,
.services .navbar-light .navbar-toggler:after,
.servicios .navbar-light .navbar-toggler:after,
.services-es .navbar-light .navbar-toggler:after,
.services-fr .navbar-light .navbar-toggler:after,
.yard .navbar-light .navbar-toggler:after,
.recruit-jp .navbar-light .navbar-toggler:after,
.how-it-works .navbar-light .navbar-toggler:after,
.post-type-archive-usedtire_export .navbar-light .navbar-toggler:after,
.category-blog-jp  .navbar-light .navbar-toggler:after,
.category-blog-en .navbar-light .navbar-toggler:after,
.category-blog-es .navbar-light .navbar-toggler:after,
.category-blog-fr .navbar-light .navbar-toggler:after{
color: rgb(255 255 255 /.55);
}
.home .is-animation .navbar-light .navbar-toggler:after,
.about .is-animation .navbar-light .navbar-toggler:after,
.page-id-4067 .is-animation .navbar-light .navbar-toggler:after,
.page-id-4093 .is-animation .navbar-light .navbar-toggler:after,
.o-kompanii .is-animation .navbar-light .navbar-toggler:after,
.page-id-6195 .is-animation .navbar-light .navbar-toggler:after,
.page-id-4093 .is-animation .navbar-light .navbar-toggler:after,
.service .is-animation .navbar-light .navbar-toggler:after,
.services .is-animation .navbar-light .navbar-toggler:after,
.servicios .is-animation .navbar-light .navbar-toggler:after,
.services-es .is-animation .navbar-light .navbar-toggler:after,
.services-fr .is-animation .navbar-light .navbar-toggler:after,
.yard .is-animation .navbar-light .navbar-toggler:after,
.recruit-jp .is-animation .navbar-light .navbar-toggler:after,
.how-it-works .is-animation .navbar-light .navbar-toggler:after,
.post-type-archive-usedtire_export .is-animation .navbar-light .navbar-toggler:after,
.category-blog-jp .is-animation .navbar-light .navbar-toggler:after,
.category-blog-en .is-animation .navbar-light .navbar-toggler:after,
.category-blog-es .is-animation .navbar-light .navbar-toggler:after,
.category-blog-fr .is-animation .navbar-light .navbar-toggler:after{
color: rgb(0 0 0 /.55);
}

.home .navbar-light .navbar-toggler:hover:after,
.about .navbar-light .navbar-toggler:hover:after,
.page-id-4067 .navbar-light .navbar-toggler:hover:after,
.page-id-4093 .navbar-light .navbar-toggler:hover:after,
.o-kompanii .navbar-light .navbar-toggler:hover:after,
.page-id-6195 .navbar-light .navbar-toggler:hover:after,
.page-id-4093 .navbar-light .navbar-toggler:hover:after,
.services .navbar-light .navbar-toggler:hover:after,
.servicios .navbar-light .navbar-toggler:hover:after,
.services-es .navbar-light .navbar-toggler:hover:after,
.services-fr .navbar-light .navbar-toggler:hover:after,
.yard .navbar-light .navbar-toggler:hover:after,
.recruit-jp .navbar-light .navbar-toggler:hover:after,
.category-blog-en .navbar-light .navbar-toggler:hover:after,
.category-blog-es .navbar-light .navbar-toggler:hover:after,
.category-blog-fr .navbar-light .navbar-toggler:hover:after{
color: rgb(255 255 255 /.55);
transition: .3s;
}
.home .is-animation .navbar-light .navbar-toggler:hover:after,
.about .is-animation .navbar-light .navbar-toggler:hover:after,
.page-id-4067 .is-animation .navbar-light .navbar-toggler:hover:after,
.page-id-4093 .is-animation .navbar-light .navbar-toggler:hover:after,
.o-kompanii .is-animation .navbar-light .navbar-toggler:hover:after,
.page-id-6195 .is-animation .navbar-light .navbar-toggler:hover:after,
.page-id-4093 .is-animation .navbar-light .navbar-toggler:hover:after,
.services .is-animation .navbar-light .navbar-toggler:hover:after,
.servicios .is-animation .navbar-light .navbar-toggler:hover:after,
.services-es .is-animation .navbar-light .navbar-toggler:hover:after,
.services-fr .is-animation .navbar-light .navbar-toggler:hover:after,
.recruit-jp .is-animation .navbar-light .navbar-toggler:hover:after,
.category-blog-en .is-animation .navbar-light .navbar-toggler:hover:after,
.category-blog-es .is-animation .navbar-light .navbar-toggler:hover:after,
.category-blog-fr .is-animation .navbar-light .navbar-toggler:hover:after{
color: rgba(0,0,0,.55);
}
.navbar-light .navbar-toggler-icon{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.btn-close{
opacity: 1;
}
.offcanvas-header .btn-close{
margin-top: .5rem;
margin-right: .5rem;
}


.link_form{
position: fixed;
top: 0;
z-index: 3;
width: 100%;
}
.link_form img{
position: absolute;
left: 0;
right: 0;
width: 200px;
margin: 0 auto;
padding: .5rem;
background-color: rgba(255,255,255,0);
border-style: solid;
border-color: #000;
border-width: 0 0 1px;
transition: .3s;
}
.link_form img:hover{
background-color: rgba(255,255,255,1);
}

#wrapper-navbar {
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
padding: .5rem 0;
background: #fff;
transition: .3s;
}
#wrapper-navbar{
background: transparent;
}
#wrapper-navbar h1 {
color: #fff;
transition: .3s;
}

#wrapper-navbar.is-animation {
padding: .5rem 0;
background-color: #fff;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.is-animation h1 {
color: #000;
}
#wrapper-navbar.is-animation .navbar-toggler{
border: none;
}

.navbar-light{
background-color: #fff;
}
.nav-item,
.nav-link{
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
}

@media (min-width:769px) {
.dropdown-item{
transition: .5s;
}
.dropdown-item.active{
background-color: rgba(0,123,255,1);
}
.dropdown-item:hover{
color: #000;
background-color: rgba(0,123,255,.25);
}
.dropdown-item.active{
color: #fff;
}
.dropdown-item.active:hover{
color: #000;
}
.nav-item,
.nav-link{
position: relative;
}
/*NAV DEPTH3*/
.dropdown:hover .dropdown-menu .dropdown-menu{
display: none;
}
.dropdown:hover .dropdown-menu li:hover .dropdown-menu{
display: block;
left: 100%;
top: -.5rem;
}
.dropdown-menu{
top: 90%;
}
.dropdown-menu:before {
content: "";
position: absolute;
top: -10px;
left: 10%;
margin-left: -5px;
border: 5px solid transparent;
border-bottom: 5px solid #e0edff;
}
.dropdown:hover .dropdown-menu {
display: block;
animation: fadeIn 1s ease 0s 1 normal;
-webkit-animation: fadeIn2 1s ease 0s 1 normal;
}
}
@keyframes fadeIn2 {
0% {opacity: 0;top:-20px;}
100% {opacity: 1;}
}



@media screen and (max-width: 768px){
.toggle {
display: none;
}
.navbar-toggler{
padding: .2rem;
margin-right: .5rem;
}
.toggle-label {
cursor: pointer;
display: block;
margin: 0;
width: 45px;
height: 45px;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.toggle-label:active {
-webkit-tap-highlight-color: transparent;
}
.toggle-label {
cursor: pointer;
}
.toggle-label .toggle-icon,
.toggle-label .toggle-icon:before,
.toggle-label .toggle-icon:after {
position: relative;
display: block;
top: 50%;
left: 50%;
height: 3px;
width: 32px;
background: #000;
content: '';
transition: all 500ms ease-in-out;
}
.toggle-label .toggle-text {
position: relative;
display: block;
top: calc(100% - 15px);
height: 14px;
font-size: 8px;
font-size: 0.8rem;
color: #50861c;
text-align: center;
}
.toggle-label .toggle-text:before {
position: absolute;
width: 100%;
left: 0;
content: '';
transition: all 500ms ease-in-out;
visibility: visible;
opacity: 1;
}
.toggle-label .toggle-text:after {
position: absolute;
width: 100%;
left: 0;
content: '';
transition: all 500ms ease-in-out;
visibility: hidden;
opacity: 0;
}
.toggle-label .toggle-icon {
transform: translate3d(-50%, 0, 0);
}
.toggle-label .toggle-icon:before {
transform: translate3d(-50%, -12px, 0);
}
.toggle-label .toggle-icon:after {
transform: translate3d(-50%, 6px, 0);
}
.toggle:checked ~ .toggle-label .toggle-icon {
background-color: transparent;
}
.toggle:checked ~ .toggle-label .toggle-icon:before,
.toggle:checked ~ .toggle-label .toggle-icon:after {
top: 0;
}
.toggle:checked ~ .toggle-label .toggle-icon:before {
transform: translateX(-50%) rotate(45deg);
top: 1.5px;
}
.toggle:checked ~ .toggle-label .toggle-icon:after {
transform: translateX(-50%) translateY(-10px) rotate(-45deg);
top: 8.5px;
}
.toggle:checked ~ .toggle-label .toggle-text:before {
visibility: hidden;
opacity: 0;
}
.toggle:checked ~ .toggle-label .toggle-text:after {
visibility: visible;
opacity: 1;
}

/*NAV DEPTH3*/
.dropdown .dropdown-menu .dropdown-menu{
display: block;
left: 0;
top: -.5rem;
}

}


.navbar{
padding: 0;
}
nav.fade:not(.show){
opacity: 1;
}
.navbar-brand img {
padding: .5rem;
}

@media screen and (max-width: 768px) {
.nav-item{
padding: .5rem 1rem;
}
}

.nav-link{
transition: .3s;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255,255,255,.65);
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
color: rgba(255,255,255,1);
}

.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link {
font-size: 1.5rem;
color: rgba(0,0,0,1);
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: rgba(0,0,0,.5);
}
.btn-close-black{
background-color: #fff;
border-radius: 60px;
}

.ul_gtranslate{
margin:2rem 0 0;
padding:0;
list-style: none;
display:flex;
justify-content: flex-start;
}

.ul_gtranslate li{
margin-left: .25rem;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
letter-spacing: -.05rem;
}
.ul_gtranslate li a{
color: #000;
}
.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link,
.ul_gtranslate li a {
position: relative;
display: inline-block;
padding: .4em;
text-decoration: none;
}
.navbar-light .navbar-nav .nav-link::after,
.navbar-light .navbar-nav .nav-link::after,
.ul_gtranslate li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: #225391;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.navbar-light .navbar-nav .nav-link:hover::after,
.navbar-light .navbar-nav .nav-link:hover::after,
.ul_gtranslate li a:hover::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}

.ul_gtranslate li:not(:last-child) {
margin-right: .55rem;
}

.gtranslate-wrap{
position: relative;
}
.switcher{
position: absolute;
right: 0;
top: 0;
}

#menu-item-1472{
margin-bottom: 1rem;
border: none !important;
}
#menu-item-1472 a::before,
#menu-item-1472 a::after{
content: none;
}
#menu-item-1472 a{
padding: .5rem 2rem;
display: inline-block;
color: #000 !important;
background-color: #fff;
border: 1px solid #000 !important;
}
#menu-item-1472 a:hover{
color: #fff !important;
background-color: #000;
}

/*.navbar-brand{
display: none;
}*/
.navbar-brand2 {
display: block;
}
.home .navbar-brand{
display: block;
}
.home .navbar-brand2,
.home .is-animation .navbar-brand{
display: none;
}
.is-animation .navbar-brand2 {
display: block !important;
}

/********************************

	FOOTER

********************************/
#wrapper-footer-full{
display: none;
padding-bottom: 0;
}
.footer-nav{
margin:0;
padding:0;
list-style: none;
display:flex;
justify-content: flex-end;
}
.footer-nav li{
margin: 0 .5rem;
font-size: .875rem;
}
.footer-nav li a{
margin: 0;
padding: .5rem;
color: #333;
}
.site-info{
text-align: center;
font-size: .75rem;
letter-spacing: .1rem;
}
.float-button__wrap {
display: none;
position: fixed !important;
bottom: 19vh !important;
right: 0;
z-index: 1;
}
.float-button__wrap img{
width: 48px;
padding: 30px 15px;
background-color: #27a0dc;
border-radius: 10px 0 0 10px;
transform-origin: right center;
transition: .3s;
}
.float-button__wrap img:hover{
transform: scale(1.2);
background-color: #db2739;
}
.line-float__wrap{
position: fixed;
right: 16px;
bottom: 20px;
z-index: 9999;
}
.line-float__wrap a{
display: flex;
align-items: center;
gap: 8px;
padding: 6px 16px 6px 6px;
background-color: #06C755;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
color: #fff;
font-size: 15px;
font-weight: bold;
transition: .3s;
}
.line-float__wrap a:hover{
transform: scale(1.05);
color: #fff;
}
.line-float__wrap img{
display: block;
width: 40px;
height: 40px;
}
@media(max-width:600px){
.line-float__wrap{
right: 12px;
bottom: 16px;
}
.line-float__wrap a{
gap: 6px;
padding: 5px 12px 5px 5px;
font-size: 13px;
}
.line-float__wrap img{
width: 34px;
height: 34px;
}
}

/********************************

	FRONT PAGE

********************************/
#keyvisual {
position:relative;
top:0;
width: 100%;
height: 100vh;
display: grid;
place-content: center;
gap: 1ch;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
#keyvisual::before {
content: "";
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url("images/dummy_tire.png") no-repeat center;
background-size: cover;
}
#keyvisual::after {
position: absolute;
left: 0;
top: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,1);
animation: hero-tire 1s ease-in 0.3s both;
}
@keyframes hero-tire{
0%{ opacity: 1; }
100%{ opacity: 0; }
}

/*.keyvisual::after{
content:"";
position:fixed;
top:100px;
right: -40px;
z-index:0;
width:600px;
height: 600px;
background-image: url(images/worldmap.svg);
opacity: 1;
}*/
@media(max-width:520px){
.keyvisual::after{
display: none;
}
}

.bg_pcr,
.bg_ltr,
.bg_tbr{
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
}
.bg_pcr{background-image: url(images/bg_pcr-8.png);}
.bg_ltr{background-image: url(images/bg_ltr-8.png);}
.bg_tbr{background-image: url(images/bg_tbr-8.png);}

.home .contents{
position: relative;
z-index:1;
background:#fff;
padding:0 0;
background-image: url(images/bg_halftire.svg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
.interlude{
text-align: center;
}
.interlude p{
font-family: 'Roboto Condensed', sans-serif;
font-size: 2.5rem;
font-weight: 600;
color: #fff;
}
@media(max-width:520px){
/* .interlude{
z-index: -1;
} */
.wp-image-1767{
max-width: 120px;
}
}
.slick-initialized .slick-slide{
margin:0 1rem;
width:100%;
height:100%;
display: flex; /* 子要素をflexboxで揃える */
flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
justify-content: center; /* 子要素をflexboxにより中央に配置する */
align-items: center;  /* 子要素をflexboxにより中央に配置する */
}

.slick-slide img {
display:block;
width: auto;
max-height:60px;
height: 60px;
}

.home .interlude h1{
font-family: 'Noto Sans', sans-serif;
font-size: 4.5rem;
font-weight: 700;
letter-spacing: .1rem;
text-transform: uppercase;
color: #fff;
}
.home .interlude h1 small{
display: block;
font-size: 2.5rem;
font-weight: 400;
letter-spacing: .25rem;
}
.home .interlude h1 span.yellow{
color: #fec013;
}
.home .interlude h1 span.red{
color: #bc002d;
}

.section_tire-interlude{
position: relative;
z-index: 3;
background-color: rgba(255,255,255,1);
}
.section_light-gray{
background-color: rgba(0,0,0,.025);
}

.nmt-8{
margin-top: -12rem;
}
.home .nmt-8 figure{
position: relative;
padding: 1rem;
}
.home .nmt-8 figure::after{
content: "";
position: absolute;
left: 1rem;
bottom: 0;
display: block;
width: 45px;
height: 1px;
background-color: #225391;
}

.home .nmt-8 figure img{
margin-bottom: .5rem;
filter: drop-shadow(5px 10px 20px rgba(0,0,0,.3));
}
.home .nmt-8 figcaption dt{
margin: 0 0 1rem;
font-size: 2rem;
line-height: 1;
color: #225391;
}
.home .nmt-8 figcaption dt strong{
position: relative;
top: 0.5rem;
display: block;
margin: 0 0 1rem;
font-size: 4rem;
color: #000;
}
.home .nmt-8 figcaption dd{
margin: 0 0 1rem;
font-size: 1.125rem;
word-break: break-word;
letter-spacing: .05rem;
}

.worldmap{
background-image: url(images/worldmap.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center bottom;
}
.worldmap h2{
margin: 0 0 2rem;
padding: 0;
font-weight: 700;
line-height: 1.5;
}
.worldmap p{
font-size: 1.125rem;
line-height: 2;
}

.wp-image-1767.animated{
animation: tire-track-circle linear 8s 0s infinite;
}
@keyframes tire-track-circle{
0%{ transform:rotateZ(0);}
100%{ transform:rotateZ(360deg); }
}

.brandslider{
padding: 2rem 0;
background-color: rgba(0,0,0,0);
border-style: solid;
border-color: rgba(0,0,0,.05);
border-width: 1px 0;
}
.section_latest-blog h2{
margin: 0 0 2rem;
}
.section_latest-blog p{
margin: 0;
padding: 0;
font-size: .875rem;
letter-spacing: .05rem;
line-height: 1.75;
}
.section_we-can{
color: #fff;
background-color: #225391;
background-image: url(images/bg_we-can.webp);
background-repeat: no-repeat;
background-size: cover;
}
.section_we-can h3{
margin: 0 0 1rem;
color: rgba(255,255,255,.5);
letter-spacing: .25rem;
}
.section_we-can h4{
margin: 0 0 2rem;
letter-spacing: .035rem;
}
.section_we-can p{
position: relative;
z-index: 2;
line-height: 1.75;
letter-spacing: .05rem;
color: rgba(255,255,255,.75);
}
.section_we-can p::after{
content: "";
position: absolute;
z-index: -1;
left: 0;
bottom: 0;
display: block;
width: 107.5%;
height: 100%;
/*background-color: #225391;*/
}
.section_we-can span{
position: relative;
display: block;
overflow: hidden;
}
.section_we-can span::after{
/*content: "";*/
position: absolute;
z-index: 2;
left: 0;
bottom: 0;
display: block;
width: 150px;
height: 30px;
background-color: #225391;
}
.section_we-can span img{
transition: 1s;
}
.section_we-can span img:hover{
transform: scale(1.1);
}

.mask img {
aspect-ratio: 1 / 1;
object-fit: cover;
transition: 1s;
}
.section_front-gallery{
overflow: hidden;
}
.section_front-gallery .container-fluid{
padding-left: 0;
padding-right: 0;
}
.national-flag{
display: flex;
list-style: none;
justify-content: center;
gap: 15px;
}
.section_aig img{
border: 1px solid #021871;
border-radius: 4px;
box-shadow: rgba(2, 24, 113, 0.2) 0px 8px 24px;
}

/********************************

	2nd Page

********************************/
.heading {
position: relative;
overflow: hidden;
min-height: 250px;
}
.heading h1{
position: absolute;
left: 0;
right: 0;
top: 45%;
margin: 0 auto;
color: #fff;
}
.heading h1 span{
padding: .5rem 2.5rem;
/*background-color: #fff;*/
text-transform: uppercase;
}
.mv{
position: absolute;
z-index: -1;
right: 0;
top: 0;
width: 100%;
max-width: 100%;
}
.skewed {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100px;
background: #fff;
z-index: 0;
transform: skewY(2deg);
transform-origin: top right;
}

.page .section h2{
font-family: 'Roboto Condensed', sans-serif;
font-size: 3rem;
font-weight: 700;
}


/********************************

	HOW IT WORKS

********************************/

.howitworks .section h2{
font-family: 'Roboto Condensed', sans-serif;
}
.howitworks .section h2 small{
display: block;
font-size: 1rem;
}
.howitworks .section_step figure{
position: relative;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
overflow: hidden;
}
.howitworks .section_step figure img{
margin: 0;
padding: 0;
display: block;
mix-blend-mode: multiply;
background-color: #fafafa;
}
.howitworks .section_step figcaption{
padding: 0 .5rem .5rem;
}
.howitworks .section_step figcaption dt{
display: inline-block;
margin-left: -.5rem;
padding: .5rem;
color: #fff;
background-color: #000;
transform: translateY(-15px);
}
.howitworks .section_step figcaption a.btn{
font-family: 'Roboto Condensed', sans-serif;
font-size: .937rem;
}
.section_payable ul{
list-style: none;
}
.section_payable li{
position: relative;
display: block;
padding: .5rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.25rem;
font-weight: 700;
}
.section_payable li:before {
margin-right: .5rem;
content: "\f00c";
font-family: FontAwesome;
color: #82bfe0;
}
.section_payable li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
.section_faq dt{
margin: 0 0 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
}
.section_faq dd{
color: #5f5f5f;
}
.section_faq dd:not(:last-child) {
margin-bottom: 2rem;
}
.howitworks .section_step a.btn,
.howitworks .section_contact a.btn{
background-color: #27a0dc;
border-color: #27a0dc;
}
.howitworks .section_step a.btn:hover,
.howitworks .section_contact a.btn:hover{
color: #27a0dc;
background-color: #fff;
}


/********************************

	About Us

********************************/

.services .section_01{
background-color: rgba(0,0,0,.02);
}

.services .section .services-description h2{
font-size: 2.5rem;
}
.services .section .services-description p{
padding-left: 3rem;
font-size: 1.125rem;
line-height: 1.75;
letter-spacing: .05rem;
border-left: 1px solid #000;
}
.services .section .card ul{
margin: 0;
padding: 0;
list-style: none;
}
.services .section .card ul li{
font-family: 'Roboto Condensed', sans-serif;
font-size: 1rem;
font-weight: 700;
}
.services .section .card ul li:before {
margin-right: .5rem;
content: "\f10c";
font-family: FontAwesome;
color: #999;
}
.services .section .card .card-img-top{
margin-bottom: 1rem;
}
.services .section .card .card-title{
margin: 0 0 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.625rem;
text-transform: uppercase;
font-weight: 700;
color: rgba(48,83,141,1);
}
.services .section .card .card-text{
line-height: 1.5;
letter-spacing: .05rem;
}
.section_certificate img{
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}


/********************************

	About Us

********************************/
.section_mvv{
background-color: rgba(255,255,255);
}
.section_mvv h2{
margin: 0 0 2rem;
}
.section_mvv p{
margin: 0 0 2rem;
padding: 0 0 0 5rem;
}
.section_mvv ul{
margin: 0;
padding: 0 0 0 6rem;
}
.section_mvv ul li{
margin: 0;
padding: .5rem 0;
border-bottom: 1px solid rgba(255,255,255);
}


/********************************

	Movies

********************************/
.youtube {
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube iframe {
width: 100%;
height: 100%;
}
.youtube a {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.youtube a::before {
position: absolute;
z-index: 2;
content: "\f04b";
font-family: FontAwesome;
font-size: 2.5rem;
color: rgba(255,255,255,.75);
text-shadow: 1px 1px 12px rgba(0,0,0,.5);
}
figure.youtube img{
display: block;
margin: 0 0 1rem;
filter: grayscale(70%);
transition: .3s;
}
figure.youtube img:hover{
filter: grayscale(0%);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
figure.youtube figcaption{
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
letter-spacing: -.025rem;
}
figure.youtube figcaption i{
margin-right: .5rem;
color: #ea3323;
}
h2.roboto{
margin: 0 auto 2rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 3rem;
font-weight: 700;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 2em;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper-short {
position: relative;
padding-bottom: 177.77%; /* 9:16 */
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 2em;
}
.video-wrapper-short iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/********************************

	Used Tire Size Survey Form

********************************/
.tire-size-survey-form .wpcf7{
width: 100%;
max-width: 100%;
}
.please_usedtire{
margin: 0 0 2rem;
padding: 1rem;
background-color: rgba(48,83,141,.1);
border: 1px solid #000;
border-radius: 3px;
}
.please_usedtire .lead{
font-weight: 700;
}

.tire-size-survey-form .wpcf7 dl,.tire-size-survey-form .wpcf7 dt,.tire-size-survey-form .wpcf7 dd{
margin: 0;
padding: 0;
}
.tire-size-survey-form .wpcf7 dl{
margin: 0;
padding: 0;
}
.tire-size-survey-form .wpcf7 dt{
display: block;
margin: 0;
padding: 0;
transition: .2s;
}
.tire-size-survey-form .wpcf7 dt:hover{
background-color: rgba(34,83,145,.25);
}
.tire-size-survey-form .wpcf7 dt label{
padding: .5rem;
cursor: pointer;
}
.tire-size-survey-form .wpcf7 dd{
margin: 0 0 1rem;
padding: .5rem 1.5rem;
background-color: #fff;
border: 1px solid #ddd;
}

.tire-size-survey-form .wpcf7-list-item {
display: inline-block;
margin: 0 .5em 0 0;
}
.contact .wpcf7 .submit input,
.tire-size-survey-form .wpcf7 .submit input{
width: 100%;
padding: 1rem 0;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: .75rem;
text-transform: uppercase;
background-color: rgba(48,83,141,1);
border:2px solid rgba(48,83,141,1);
border-radius: 60px;
}
.contact .wpcf7 .submit input:hover,
.tire-size-survey-form .wpcf7 .submit input:hover{
color: rgba(48,83,141,1);
background-color: rgba(255,255,255,1);
}


/*Checkboxes styles*/
.tire-size-survey-form .wpcf7 dt input[type="checkbox"] { display: none; }

.tire-size-survey-form .wpcf7 dt input[type="checkbox"] + span {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
  font: 16px/20px 'Open Sans', Arial, sans-serif;
  color: #000;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tire-size-survey-form .wpcf7 dt input[type="checkbox"] + span:last-child { margin-bottom: 0; }

.tire-size-survey-form .wpcf7 dt input[type="checkbox"] + span:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #0000e5;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.tire-size-survey-form .wpcf7 dt input[type="checkbox"]:checked + span:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/********************************

	About Us

********************************/
.tire-mark_02{
position: fixed;
z-index: -1;
right: -60px;
top: 100px;
}
.about .section h2,
.page-id-4067 .section h2,
.page-id-4093 .section h2,
.o-kompanii .section h2,
.page-id-6195 .section h2{
margin: 0 0 2rem;
font-weight: 700;
letter-spacing: .05rem;
}
.about .section dl,
.page-id-4067 .section dl,
.page-id-4093 .section dl,
.o-kompanii .section dl,
.page-id-6195 .section dl{
margin: 0 0 4rem;
}
.about .section dt,
.page-id-4067 .section dt,
.page-id-4093 .section dt,
.o-kompanii .section dt,
.page-id-6195 .section dt{
display: inline-block;
margin: 0 0 1rem;
padding: 0 0 .5rem;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: .05rem;
color: rgba(48,83,141,1);
border-bottom: 1px solid #000;
}
/* Matches the line spacing the Japanese company page already sets in
   .company .section dd:lang(ja) (2.5rem gap between entries, same line-height),
   and bumps the type size up a step on request - the block reads small next
   to the rest of the page at the plain 1rem body size.
   The .1rem letter-spacing from that rule is deliberately not carried over:
   it is there for CJK and looks stretched on Latin text. */
.about .section dd,
.page-id-4067 .section dd,
.page-id-4093 .section dd,
.o-kompanii .section dd,
.page-id-6195 .section dd{
font-size: 1.1rem;
line-height: 2;
}
.about .section dd:not(:last-child),
.page-id-4067 .section dd:not(:last-child),
.page-id-4093 .section dd:not(:last-child),
.o-kompanii .section dd:not(:last-child),
.page-id-6195 .section dd:not(:last-child) {
margin-bottom: 2.5rem;
}

/* The pair of photos above the profile - the office exterior and the meeting
   room - come from different cameras and crops, so side by side their bottom
   edges did not line up. A fixed aspect box with object-fit: cover trims each
   to the same height instead of letterboxing either one. Below the md
   breakpoint they stack and can keep their own proportions. */
@media (min-width: 768px) {
.utj-company-photos img {
width: 100%;
height: 100%;
object-fit: cover;
}
.utj-company-photos > [class*="col-"] {
aspect-ratio: 4 / 3;
}
}

/********************************

	Privacy Policy

********************************/
.tire-mark_01{
position: fixed;
z-index: -1;
left: 60px;
top: 0;
}
.privacy-policy .section dl{
margin: 0 0 3rem;}
.privacy-policy .section dt{
display: inline-block;
margin: 0 0 1rem;
padding: 0 0 .5rem;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: .05rem;
border-bottom: 1px solid #000;
}
.privacy-policy .section dd{
margin: 0 0 1rem;
padding: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.75;
letter-spacing: .05rem;
}
.privacy-policy .section dd:not(:last-child) {
margin-bottom: 1rem;
}



/********************************

	ARCHIVE

********************************/

.archive{
background-color: rgba(0,0,0,.01);
}
.archive .post{
padding: 1rem;
background-color: rgba(255,255,255,1);
border: 1px solid rgba(0,0,0,.2);
/* Was http://usjen.local/... - a dev host that no longer resolves, so every
   archive page stalled on a DNS failure and the decoration never appeared.
   Same file, served from this install's own uploads. */
background-image: url(/wp-content/uploads/2022/07/tire-mark_01.webp);
background-repeat: no-repeat;
background-position: right bottom;
background-size: auto 100%;
}
.archive .post .mask{
position: relative;
}
.archive .post .mask:hover{
overflow: hidden;
}

.archive .post .mask img{
/* .mask img is 1/1 globally, which square-crops these thumbnails. Every
   featured image on the blog is 4:3 - the shipping photos and the article
   graphics alike - and the graphics carry text that the square crop cut off
   at both edges. 4/3 shows all of them whole and crops none of the photos. */
aspect-ratio: 4 / 3;
transition: .5s;
}
.archive .post .mask img:hover{
transform: rotate(-5deg) scale(1.2);
}

.archive .page-header,
.single .entry-header{
margin: 0 0 2rem;
}
.archive .page-header h1.page-title{
margin: 0 0 2rem;
font-family: 'Noto Sans', sans-serif;
font-size: 4.5rem;
font-weight: 700;
}
.archive .post{
margin: 0 0 4rem;
}
.archive .post .entry-title{
font-size: 1.5rem;
letter-spacing: .05rem;
}
.archive .post .entry-meta,
.single .post .entry-meta{
margin: 0 0 1rem;
padding: .25rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: .875rem;
letter-spacing: .05rem;
border-top: 1px solid rgba(0,0,0,.2);
border-bottom: 1px solid rgba(0,0,0,.2);
}
.archive .post .entry-content{
margin: 0 0 1rem;
padding: .25rem;
font-size: .875rem;
line-height: 1.75;
letter-spacing: .05rem;
}
.archive .post .entry-footer{
margin: 0 0 1rem;
padding: .25rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: .875rem;
letter-spacing: .05rem;
border-top: 1px solid rgba(0,0,0,.2);
}
.archive .post .entry-content .btn-secondary{
border: 1px solid rgba(0,0,0,1);
}
.archive .post .entry-content .btn-secondary:hover{
color: #fff;
}

.single {
background-color: rgba(0,0,0,.01);
}
.single .kv{
position: relative;
margin: 0 0 4rem;
background-repeat: no-repeat;
background-image: url(images/bg_we-can.webp);
background-position: left center;
background-size: cover;
}
.single .kv::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2rem;
margin: 0 auto;
display: block;
width: 60px;
height: 2px;
background-color:rgba(48,83,141,1) ;
}
.single .kv img{
display: block;
margin: 0 auto;
width: auto;
max-height: 350px;
aspect-ratio:16 / 9;
object-fit: cover;
}

.single .entry-header h1.entry-title{
font-size: 2rem;
letter-spacing: .05rem;
}





/********************************

	RWD

********************************/
@media(min-width:769px){
.home .navbar-light,
.home .bg-light{
background-color: transparent !important;
}
.home .navbar-light .navbar-nav .nav-link,
.home .navbar-light .navbar-nav .nav-link{
color: #fff;
}
.home .is-animation .navbar-light .navbar-nav .nav-link,
.home .is-animation .navbar-light .navbar-nav .nav-link{
color: #fff;
}
.home .navbar-light .navbar-nav .nav-link:focus,
.home .navbar-light .navbar-nav .nav-link:hover{
color: #fff;
}
.home .is-animation .navbar-light .navbar-nav .nav-link:focus,
.home .is-animation .navbar-light .navbar-nav .nav-link:hover{
color: #000;
}
}
@media(max-width:768px){

.navbar-light .navbar-toggler {
/*color: rgba(255,255,255,1);
border-color: rgba(0,0,0,1);
background-color: rgba(0,0,0,1);
border-radius: 120px; */
border: none;
}
.offcanvas-backdrop.show{
opacity: .5;
}
.offcanvas.show.bg-light{
background-color: #333 !important;
}
.navbar-light .navbar-nav .nav-link {
font-size: 2rem;
color: rgba(255,255,255,1);
}
.navbar-light .navbar-nav .nav-link:hover {
color: rgba(255,255,255,1);
}
.mv {
max-width: 75vw;
}
}

@media(max-width:520px){
.home .interlude h1{
font-size: 2rem;
letter-spacing: normal;
}
.home .interlude h1 small{
display: block;
margin-top: 2rem;
font-size: 1.5rem;
line-height: 1.5;
font-weight: 400;
letter-spacing: .25rem;
}
.tire-mark_02{
display: none;
}
}
@media(max-width:320px){
.navbar-brand{
max-width: 200px;
}
}



.offcanvas-end {
top: 0;
right: 0;
border-left: 1px solid rgba(0,0,0,.2);
transform: translateX(100%);
/*padding-left: calc(100% - 400px);*/
background-color: transparent;
background-image: url(images/bg_we-can.webp);
background-repeat: no-repeat;
background-position: left center;
background-size: cover;
filter: brightness(150%);
}

.menu-item-gtranslate{
display: block;
padding: .25rem .75rem;
}
a.glink img{
margin-right: .5rem;
}
a.glink span {
margin-right: 5px;
font-size: 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
vertical-align: middle;
}
.navbar-nav li:nth-child(8){
margin-bottom: 3rem;
}


/* One hero design for the whole site. This was centred with no padding and no
   scrim, which was survivable while it held nothing but an H1. Now that every
   page carries a sub line and a breadcrumb under that title, centred text with
   no contrast behind it was unreadable over the busier photographs, and long
   titles ran into the left edge. The geometry below is what the destination
   pages already used; --dest no longer needs to differ.

   Top-anchored with fixed padding rather than centred: centring lets the
   hero's own height, which scales with viewport width, dump its leftover space
   as a gap above the H1. padding-top also has to absorb the -60px translate
   that pulls the hero flush under the header before it reads as clearance. */
.secondary-mv{
position: relative;
min-height: clamp(240px, 22vw, 300px);
margin: 0 0 1.5rem;
display: grid;
place-content: start start;
/* justify-content: start sizes the single implicit column to its widest
   child, and .secondary-mv__sub caps at 68ch - wider than a phone. The column
   then ran past the hero and overflow: hidden clipped the sentence mid-word.
   An explicit minmax(0,1fr) column tracks the hero's own width instead, so
   the text wraps. No effect above phone widths: the children keep their own
   max-width and stay left-aligned. */
grid-template-columns: minmax(0, 1fr);
gap: 1ch;
padding: 6rem clamp(1.25rem, 7vw, 7rem) 1.5rem;
background-position: center center;
background-size: cover;
overflow: hidden;
transform: translate(0,-60px);
}
/* Sits above the photograph and below the text. Without it the white type had
   nothing to hold it up on the lighter images. */
.secondary-mv::after{
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(100deg, rgba(22,39,63,.88) 0%, rgba(22,39,63,.5) 55%, rgba(22,39,63,.14) 100%);
}
.secondary-mv h1,
.secondary-mv .mv-label,
.secondary-mv__sub,
.utj-dest-breadcrumb{
position: relative;
z-index: 1;
}
/* The sub line is a sentence rather than a label, so it is set at body size
   and capped before it turns into a paragraph across a wide screen. */
.secondary-mv__sub{
max-width: 68ch;
margin: .9rem 0 0;
color: rgba(255,255,255,.92);
font-size: clamp(.95rem, .88rem + .3vw, 1.125rem);
line-height: 1.7;
text-align: left;
text-transform: none;
letter-spacing: normal;
text-shadow: 0 1px 10px rgba(0,0,0,.4);
word-break: normal;
overflow-wrap: break-word;
}
/* The hero used to end in a curve (images/curve.svg, grown from 0 to 60px by
   an @keyframes on load). The destination pages already dropped it because a
   straight edge reads cleaner against a wide left-aligned hero; it is now off
   everywhere for the same reason. The rules are removed rather than disabled
   so nothing is left drawing an invisible 60px band over the foot of the
   image. curve.svg and @keyframes name had no other user. */
.secondary-mv h1,
.secondary-mv .mv-label{
color: #fff;
text-transform: uppercase;
letter-spacing: .2rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 3rem;
font-weight: 700;
text-shadow: 1px 1px 12px rgba(0,0,0,.5);
}

#single-wrapper{
margin-top: 4rem;
}
.widget-area .widget_nav_menu{
margin: 0 0 3rem;
}
.widget-area .widget_nav_menu ul{
margin: 0;
padding: 0;
list-style: none;
}
.widget-area .widget_nav_menu ul li{
margin: 0;
padding: .1rem 0;
}
.widget-area .widget_nav_menu ul li a{
position: relative;
display: block;
margin: 0;
padding: .25rem;
color: #000;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.25rem;
font-weight: 700;
}

.widget-area .widget_nav_menu ul li:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,.1);
}
.widget-area .widget_nav_menu ul li:first-child{
margin:0 0 1rem;
padding: 0;
border: 1px solid #000;
}
.widget-area .widget_nav_menu ul li:first-child a{
transition: .3s;
}
.widget-area .widget_nav_menu ul li:first-child a:hover{
color: #fff;
background-color: #000;
}

.widget-area .widget_nav_menu ul li a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: #225391;
-webkit-transition: all .3s ease;
transition: all .3s ease;
transform-origin: left;
}
.widget-area .widget_nav_menu ul li a:hover::after{
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}

.widget-area .widget-title{
position: relative;
margin: 0 0 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
}
.widget-area .widget-title::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 1px;
background-color: #000;
}

.rpwe-li .rpwe-title {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 500;
font-size: 1.125rem !important;
line-height: 1.5em;
}
.rpwe-time{
font-family: 'Roboto Condensed', sans-serif;
color: #000 !important;
font-weight: 500;
letter-spacing: .05rem;
}

@media(min-width:768px){
.offcanvas,
.offcanvas.show{
transform: none !important;
}
.offcanvas{
opacity: 0;
transition: .6s;
}
.offcanvas.show{
opacity: .9;
}
.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link {
color: rgba(255,255,255,.75);
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
color: rgba(255,255,255,1);
}
.navbar-nav.justify-content-end{
text-align: center;
}
a.glink span{
color: rgba(255,255,255,.75);
}

}


.rpwe-block li {
display: block !important;
}

/* SP時ヘッダー、フッターの画面揺れ、デザイン修正 2023/1/16 */
#archive-wrapper, #single-wrapper {
  padding: 1.5rem 0 2rem;
  margin-top: 0;
}
#page-wrapper {
  padding: 2rem 0 2rem;
  margin-top: 0;
}
#search-wrapper {
  padding: 8rem 0 2rem;
}
.navbar-light {
  background-color: transparent!important;
}

.single .kv {
  display: none;
}
@media(max-width:768px){
  #page-wrapper, #archive-wrapper, #single-wrapper {
    padding: 0 0 2rem;
    margin-top: 0;
  }
  #search-wrapper {
    padding: 6rem 0 2rem;
  }
  #wrapper-navbar {
    max-width: 100%;
    width: 100%;
  }
  .navbar-brand {
    margin-right: 0;
  }
  .navbar-toggler, .navbar-light .navbar-toggler {
    padding: 0;
    position: relative;
    margin-right: 0;
    right: 0;
  }
  .navbar-light .navbar-toggler {
    color: rgba(0,0,0,1);
    background-color: transparent;
    border-color: rgba(0,0,0,.2);
    box-shadow: none;
    transition: .3s;
  }
  .secondary-mv {
    position: relative;
    /* Was 450px, which acted as a floor rather than a floor-of-last-resort:
       measured on a 375px viewport the breadcrumb finished at 333px on
       /ja/company/ and 307px on /ja/used-tire-products-jp/, so the hero was
       carrying 117-143px of empty photo below the text. 300px only backstops
       a hero with almost no copy in it; every other page now hugs its own
       content. Kept as min-height (not height) precisely so the box still
       grows for the long ones - /about/ runs to 443px on its own and its
       breadcrumb must not be clipped by overflow: hidden. */
    min-height: 300px;
    margin: 0;
    /* #page-wrapper drops its top padding at this width, so the only thing
       holding the hero clear of the header was the 6rem in the base rule -
       and the hero is pulled up 60px to tuck under it, leaving 36px. The logo
       sits across roughly 14-48px, so every H1 on the site landed on top of
       it. 8rem restores the clearance without giving up the tuck. Do not trim
       this to shorten the hero - that is what puts the H1 back on the logo. */
    padding-top: 8rem;
  }
  .secondary-mv h1,
  .secondary-mv .mv-label {
    font-size: 2.5rem;
  }
  .footer-nav {
    margin: 20px auto;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
  }
}

.dl_blog-others,.dl_blog-others dt,.dl_blog-others dd{
margin: 0;
padding: 0;
}
.dl_blog-others{
background-color: #fff;
margin: 0 0 1rem;
padding: .5rem;
width: 100%;
display: flex;
flex-wrap: wrap;
border-radius: 3px;
}

.dl_blog-others dt,
.dl_blog-others dd{
padding: .5rem;
box-sizing: border-box;
border-bottom: 1px solid #E4E4E4;
}
.dl_blog-others dt{
width: 60px;
}
.dl_blog-others dd{
width: calc(100% - 60px);
}


/*FOOTER 20240514*/

.breadcrumbs-wrapper{
margin: 0 0 1rem;
padding: .5rem 0;
background-color: #000;
}
.breadcrumbs-wrapper p{
margin: 0 !important;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1rem;
font-weight: 600;
color: rgb(255 255 255 / .75);
letter-spacing: .02em;
}
.breadcrumbs-wrapper p a{
color: rgb(255 255 255 / 1);
}

.site-lang p{
font-family: 'Roboto Condensed', sans-serif;
font-size: .937rem;
line-height: 1;
letter-spacing: .1em;
color: rgb(255 255 255 / .75);
}

.site-lang dl,.site-lang dt,.site-lang dd{
margin: 0;
padding: 0;
}
.site-lang dl{
margin: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.site-lang dt,
.site-lang dd{
padding: .5rem;
box-sizing: border-box;
}
.site-lang dt{
font-family: 'Roboto Condensed', sans-serif;
font-size: 2rem;
line-height: 1;
width: 2em;
}
.site-lang dd{
font-family: 'Roboto Condensed', sans-serif;
font-size: 1rem;
letter-spacing: .1em;
width: calc(100% - 4em);
}
.site-lang dt a{
color: rgba(255 255 255 / .8);
transition: .3s;
}
.site-lang dt a:hover{
color: rgba(255 255 255 / 1);
}
.site-lang dd a{
color: rgba(255 255 255 / .25);
transition: .3s;
}
.site-lang dd a:hover{
color: rgba(255 255 255 / 1);
}
.site-info{
padding: 3rem 0;
font-family: 'Roboto Condensed', sans-serif;
font-size: .75rem;
line-height: 1;
letter-spacing: .1em;
text-align: center;
}

/* 20240628 */
body.page-id-1986 h1.entry-title{
display:none;
}
/*single page-nav*/
 .single-post #single-wrapper 

.category-blog .entry-footer{
margin: 0 0 2rem;
}
.category-blog .entry-footer .cat-links{
font-family: 'Roboto Condensed', sans-serif;
}
.category-blog .entry-footer .cat-links a{
display: inline-block;
margin: 0 .25rem;
padding: .25rem;
font-family: 'Roboto Condensed', sans-serif;
line-height: 1;
text-transform: uppercase;
font-weight: 700;
font-size: 1.125rem;
border: 1px solid rgba(34,83,145,1);
border-radius: 3px;
}

.nav-ba .inner{
padding: 1.5rem;
background-color: rgb(0 0 0 / .05);
border-radius: 3px;
}
.nav-prev-link,
.nav-next-link{
display: flex;
gap: 30px;
align-items: center;
}
.nav-prev-link img,
.nav-next-link img{
border-radius: 50%;
max-width: 90px;
height: auto;
}
.nav-prev-link h4,
.nav-next-link h4{
font-size: 1rem;
}





/********************************

	INIT

********************************/

body{
word-break: break-all;
}


.btn, .woocommerce-info a.button,
.wpcf7 input[type=submit] {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
color: #fff;
background-color: #000;
border-color: #000;
}
.btn-group-sm>.btn,
.btn-sm,
.wpcf7 .btn-group-sm>input[type=submit] {
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
}
.btn:hover,
.wpcf7 input[type=submit]:hover {
color: #212529;
text-decoration: none;
}
.btn-primary:hover {
color: #212529;
background-color: #fff;
border-color: #212529;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #11a0d7;
border-color: #11a0d7;
}

.bg-dark {
background-color: rgba(0,0,0,1)!important;
}

.center-center {
display: grid;
place-content: center;
gap: 1ch;
}


/********************************

HEADER

********************************/

.navbar-light.bg-light{
background-color: transparent !important;
}

@media (min-width:769px) {
.dropdown-item{
transition: .5s;
}
.dropdown-item.active{
background-color: rgba(0,123,255,1);
}
.dropdown-item:hover{
color: #000;
background-color: rgba(0,123,255,.25);
}
.dropdown-item.active{
color: #fff;
}
.dropdown-item.active:hover{
color: #000;
}
.nav-item,
.nav-link{
position: relative;
font-size: 1.5rem;
}
/*NAV DEPTH3*/
.dropdown:hover .dropdown-menu .dropdown-menu{
display: none;
}
.dropdown:hover .dropdown-menu li:hover .dropdown-menu{
display: block;
left: 100%;
top: -.5rem;
}
.dropdown-menu{
top: 90%;
}
.dropdown-menu:before {
content: "";
position: absolute;
top: -10px;
left: 10%;
margin-left: -5px;
border: 5px solid transparent;
border-bottom: 5px solid #e0edff;
}
.dropdown:hover .dropdown-menu {
display: block;
animation: fadeIn3 1s ease 0s 1 normal;
-webkit-animation: fadeIn 1s ease 0s 1 normal;
}
}
@keyframes fadeIn3 {
0% {opacity: 0;top:-20px;}
100% {opacity: 1;}
}



@media screen and (max-width: 768px){
/*NAV DEPTH3*/
.dropdown .dropdown-menu .dropdown-menu{
display: block;
left: 0;
top: -.5rem;
}
}


.navbar{
padding: 0;
}
nav.fade:not(.show){
opacity: 1;
}
.navbar-brand img {
padding: .5rem;
}

@media screen and (max-width: 768px) {
.nav-item{
padding: .5rem 1rem;
}
}

.nav-link{
transition: .3s;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255,255,255,.65);
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
color: rgba(255,255,255,1);
}

.offcanvas-end {
top: 0;
right: 0;
border-left: 1px solid rgba(0,0,0,.2);
transform: translateX(100%);
/* padding-left: calc(100% - 400px); */
background-color: transparent;
background-image: url(images/bg_we-can.webp);
background-repeat: no-repeat;
background-position: left center;
background-size: cover;
}

.offcanvas,
.offcanvas.show{
transform: none !important;
}
.offcanvas{
opacity: 0;
transition: .6s;
}
.offcanvas.show{
opacity: .9;
}
.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link {
color: rgba(255,255,255,.75);
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
color: rgba(255,255,255,1);
}
.navbar-nav.justify-content-end{
text-align: center;
}

.navbar-brand-dark{
display: none;
}
.is-animation .navbar-brand{
display: none;
}
.is-animation .navbar-brand-dark{
display: block;
}
.navbar-light .navbar-toggler{
color: rgba(255,255,255,.55);
color: rgb(0 0 0 /1);
border-color: rgb(255 255 255 /0);
}
.is-animation .navbar-light .navbar-toggler {
color: rgba(0,0,0,.55);
border-color: rgba(0,0,0,.1);
}
.home .navbar-light .navbar-toggler-icon,
.about .navbar-light .navbar-toggler-icon,
.page-id-4067 .navbar-light .navbar-toggler-icon,
.page-id-4093 .navbar-light .navbar-toggler-icon,
.service .navbar-light .navbar-toggler-icon,
.servicios .navbar-light .navbar-toggler-icon,
.services .navbar-light .navbar-toggler-icon,
.services-es .navbar-light .navbar-toggler-icon,
.services-fr .navbar-light .navbar-toggler-icon,
.yard .navbar-light .navbar-toggler-icon,
.recruit-jp .navbar-light .navbar-toggler-icon,
.how-it-works .navbar-light .navbar-toggler-icon,
.post-type-archive-usedtire_export .navbar-light .navbar-toggler-icon,
.category-blog-en .navbar-light .navbar-toggler-icon,
.category-blog-es .navbar-light .navbar-toggler-icon,
.category-blog-fr .navbar-light .navbar-toggler-icon,
.category-blog-jp .navbar-light .navbar-toggler-icon{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.is-animation .navbar-light .navbar-toggler-icon{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/********************************

RESET

********************************/

.wrapper:lang(ja) {
padding: 0 0 1.5rem;
}

/********************************

COMMON

********************************/
font:lang(ja){
font-family: 'BIZ UDPGothic', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
}
@media (min-width: 769px) {
.row-0			{margin-left:0px;	margin-right:0px;}
.row-0>div		{padding-right:0px;	padding-left:0px;}
.row-10			{margin-left:-5px;	margin-right:-5px;}
.row-10>div		{padding-right:5px;	padding-left:5px;}
.row-20			{margin-left:-10px;	margin-right:-10px;}
.row-20>div		{padding-right:10px;padding-left:10px;}
.row-30			{margin-left:-15px;	margin-right:-15px;}
.row-30>div		{padding-right:15px;padding-left:15px;}
.row-40			{margin-left:-20px;	margin-right:-20px;}
.row-40>div		{padding-right:20px;padding-left:20px;}
.row-50			{margin-left:-25px;	margin-right:-25px;}
.row-50>div		{padding-right:25px;padding-left:25px;}
.row-60			{margin-left:-30px;	margin-right:-30px;}
.row-60>div		{padding-right:30px;padding-left:30px;}
.row-70			{margin-left:-35px;	margin-right:-35px;}
.row-70>div		{padding-right:35px;padding-left:35px;}
.row-80			{margin-left:-40px;	margin-right:-40px;}
.row-80>div		{padding-right:40px;padding-left:40px;}
.row-90			{margin-left:-45px;	margin-right:-45px;}
.row-90>div		{padding-right:45px;padding-left:45px;}
.row-100		{margin-left:-50px;	margin-right:-50px;}
.row-100>div	{padding-right:50px;padding-left:50px;}
.row-110		{margin-left:-55px;	margin-right:-55px;}
.row-110>div	{padding-right:55px;padding-left:55px;}
.row-120		{margin-left:-60px;	margin-right:-60px;}
.row-120>div	{padding-right:60px;padding-left:60px;}
}

.mb-5, .my-5 {margin-bottom:2rem}
.mb-6, .my-6 {margin-bottom:2.5rem}
.mb-7, .my-7 {margin-bottom:3rem}
.mb-8, .my-8 {margin-bottom:3.5rem}
.mb-9, .my-9 {margin-bottom:4rem}

.animate:lang(ja){
opacity: 0;
animation-fill-mode: forwards;
}
.animated:lang(ja) {
opacity: 1;
animation-fill-mode: backwards;
}


/********************************

TEXT

********************************/
.section p:lang(ja){
line-height: 1.75;
letter-spacing: .1rem;
}
.services .heading .container h1:lang(ja),
.yard .heading .container h1:lang(ja),
.company .heading .container h1:lang(ja),
.post-type-archive-usedtire_export .container h1:lang(ja),
.privacy-policy .container h1:lang(ja),
.archive .container h1:lang(ja){
color: #fff;
text-shadow: 0 0 12px rgba(0,0,0,.9);
}

/********************************

LAUOUT

********************************/

.section:lang(ja){
padding: 4rem 0;
}
.site{
background-image: url(images/bg_halftire.svg);
background-position: left center;
background-repeat: no-repeat;
background-size: 30vw auto;
}
@media(min-width:769px){
.site{
background-attachment: fixed;
}
}

.heading:lang(ja){
position: relative;
}
.heading img:lang(ja){
width: 100%;
}
.heading .container:lang(ja){
position: absolute;
left: 0;
right: 0;
top: 33%;
}
.heading .container h1:lang(ja){
font-family: 'Roboto Condensed', sans-serif;
font-size: 8rem;
}
@media(max-width:1200px){
.heading .container h1:lang(ja){
font-size: 6rem;
}
}
@media(max-width:768px){
.heading .container h1:lang(ja){
font-size: 4rem;
}

}

.heading .container h1 span:lang(ja){

font-family: 'BIZ UDPGothic', sans-serif;
font-size: 1.5rem;
letter-spacing: .2rem;
}
.heading .container h1 span:lang(ja) {
display: flex;
align-items: center;
}
.heading .container h1 span::before:lang(ja),
.heading .container h1 span::after:lang(ja) {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.heading .container h1 span::before:lang(ja) {
margin-right: 1rem;
}
.heading .container h1 span::after:lang(ja) {
margin-left: 1rem;
}
.post-type-archive-usedtire_export .heading:lang(ja){
margin-bottom: 4rem;
}

/********************************

WIDGET

********************************/
#right-sidebar .widget:lang(ja){
margin: 0 0 4rem;
}
#right-sidebar .widget h3.widget-title:lang(ja){
position: relative;
margin: 0 0 2rem;
}
#right-sidebar .widget h3.widget-title::before:lang(ja){
position: absolute;
left: 0;
bottom: -.5rem;
display: block;
content: "";
width: 100%;
height: 1px;
background-color: rgba(0,0,0,.2);
}
#right-sidebar .widget h3.widget-title::after:lang(ja){
position: absolute;
left: 0;
bottom: -.5rem;
display: block;
content: "";
width: 60px;
height: 3px;
background-color: rgba(0,0,0,1);
}
.mc4wp-form-fields input[type="email"]:lang(ja){
margin-top: .5rem;
padding: .25rem;
width: 100%;
font-size: 1.25rem;
}

/********************************

HEADER

********************************/
.default-menu ul{
margin: 0;
display: flex;
list-style: none;
}
.default-menu ul li{
margin: 0 .25rem;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
letter-spacing: normal;
text-transform: uppercase;
}
.default-menu ul li:first-child{
display: none;
}
.default-menu ul li a{
display: block;
padding: .5rem;
color: #fff;
text-shadow: 0px 0px 4px rgb(0 0 0 /1);
}
.is-animation .default-menu{
display: none;
}
@media (max-width:1039px) {
.default-menu{
display: none;
}
}

#menu-item-924 a:lang(ja){
position: relative;
display: inline-block;
padding: .5rem 2rem;
color: #fff !important;
background-color: #000;
border-radius: 3px;
}
.gm-navbar:lang(ja) {
position: fixed !important;
top: 0;
left: 0;
z-index: 3;
width: 100%;
padding: 0;
background: #fff;
transition: .3s;
}
#wrapper-navbar:lang(ja){
background: transparent;
}
#wrapper-navbar h1:lang(ja) {
color: #fff;
transition: .3s;
}

#wrapper-navbar.is-animation:lang(ja) {
padding: 0;
}
.is-animation h1:lang(ja){
color: #000;
}
#wrapper-navbar.is-animation .navbar-toggler:lang(ja){
border: none;
}

#wrapper-navbar.is-animation:lang(ja) {
padding: .5rem 0;
background-color: #fff;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

/********************************

FOOTER

********************************/
#wrapper-footer:lang(ja){
padding-top: 2rem;
}

.footer-nav{
margin:0 0 2rem;
padding:0;
list-style: none;
display:flex;
justify-content: flex-end;
}
.footer-nav li:lang(ja){
margin:0;
padding:0 .5rem;
font-size: .875rem;
letter-spacing: .1rem;
}
.footer-nav li:not(:last-child):lang(ja) {
margin: 0;
border-right: 1px solid rgba(255,255,255,.5);
}
.footer-nav li a:lang(ja){
padding:.5rem 1rem;
color: #000;
}
.home .footer-nav li a:lang(ja){
color: #fff;
}
.home .site-info:lang(ja){
color: rgba(255,255,255,.75);
}

/********************************

SHORTCODE

********************************/
.mask:lang(ja){
width: 100%;
height: 200px;
overflow: hidden;
}
.mask img:lang(ja){
width: 100%;
height: 100%;
object-fit: cover;
transition: .3s;
}
.mask img:hover:lang(ja){
transform: rotate(-5deg) scale(1.2);
}
.section_trading-performance h2:lang(ja),
.section_trading-performance p:lang(ja){
position: relative;
z-index: 2;
top: -2rem;
}
.section_trading-performance h2:lang(ja){
margin-top: 2rem;
font-size: 5rem;
color: rgba(0,0,0,.9);
mix-blend-mode:multiply;
}
.section_trading-performance h2 span:lang(ja){
padding: .5rem 1rem;
}

.section_trading-performance .card h5:lang(ja){
font-size: 1rem;
font-feature-settings:"palt";
}
.card-body:lang(ja){
display: flex;
flex-direction: column;
}
.card-body .btn:lang(ja){
margin: auto auto 0 0;
display: inline-block;
width: max-content;
}
.post-date:lang(ja){
font-size: .875rem;
}

/********************************

FRONT PAGE

********************************/

#hero:lang(ja){
/*headerを全画面で見せる*/
width:100%;
height: 100vh;
position: relative;
}

#hero::before{
/*headerの疑似要素に背景画像を指定*/
content:"";
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height: 100vh;
background:url("images/dummy_tire.png") no-repeat center;/*背景画像設定※オリジナル画像を設定してください*/
background-size:cover;
}

#container:lang(ja){
/*下のかぶさるエリアの指定*/
position: relative;
z-index:1;
/*以下はレイアウトのための記述。削除可能*/
background:#fff;
/*padding:200px 0;*/
}
.section_first-view:lang(ja){
padding:4rem 0 2rem;
background:#fff;
}
#hero:lang(ja) {
display: grid;
place-content: center;
gap: 1ch;
}
#hero:lang(ja){
position: relative;
}
#hero::after:lang(ja){
position: absolute;
left: 0;
top: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,1);
animation: hero-tire 1s ease-in 0.3s both;
}
@keyframes hero-tire{
0%{ opacity: 1; }
100%{ opacity: 0; }
}
#hero p:lang(ja){
color: #fff;
letter-spacing: .5rem;
text-transform: uppercase;
text-align: center;
}
.hero-text1:lang(ja){font-size: 6rem;}
.hero-text2:lang(ja){font-size: 1.25rem;}

.front_feature dl:lang(ja){
position: relative;
overflow: hidden;
text-align: center;
padding: 2rem 1rem;
background-color: rgba(255,255,255,1);
border-radius: 4px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
transform: translateY(-6rem);
}
.front_feature dt:lang(ja){
font-size: 4rem;
}
.front_feature dd:lang(ja){
font-size: 2rem;
letter-spacing: .1rem;
}
.front_feature dl::before:lang(ja){
position: absolute;
left: 0;
top: 0;
display: block;
content: "";
width: 100%;
height: 10px;
background-color: #000000;
}
.front_feature dl::after:lang(ja){
position: absolute;
right: 0;
bottom: 0;
display: block;
content: "";
width: 50%;
height: 1px;
background-color: #000000;
}
.front_brand:lang(ja){
background-color: #fafafa;
}

.section_scheduled-matter:lang(ja){
padding-top: 6rem;
background-color: #fafafa;
}
.section_scheduled-matter h2:lang(ja){
margin: 0 0 2rem;
}
.section .section_scheduled-matter_p:lang(ja){
line-height: 2;
letter-spacing: .05rem;
}
.section_trading-performance:lang(ja){
background-color: #fafafa;
}
.section_font-contact:lang(ja){
background-color: #fefec6;
}
.section_font-contact h2:lang(ja){
margin: 0;
font-size: 5rem;
line-height: 1;
}
.front-bridge h3:lang(ja){
transform: translate(60px ,60px);
line-height: 1.5;
}

.parallax-wrap:lang(ja){
position: relative;
margin: 0 0 2rem;
height: 240px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.parallax-wrap .simpleParallax:lang(ja){
position: absolute;
}
.parallax-wrap h3:lang(ja){
position: relative;
margin: 0;
padding: 0;
z-index: 9;
color: #fff;
width: calc(100% - 60px);
}

.section_tire-class:lang(ja){
color: #fff;
background-color: #000;
}

.section_front-brand:lang(ja){
background-color: #fff;
}



/********************************

	サービス

********************************/

.section_domestic-service:lang(ja){
background-color: rgba(255,255,255,.8);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.section_domestic-service figure:lang(ja){
background-color: rgba(0,0,0,.75);
border-radius: 3px;
color: #fff;
padding: 1rem 2rem;
}
.section_domestic-service figure img:lang(ja){
display: block;
margin: 0 auto 1rem;
padding: 1rem;
background-color: #fff;
border-radius: 50%;
margin-top: -2rem;
}
.section_domestic-service figcaption dt:lang(ja){
margin: 0 0 1rem;
padding: 0;
font-size: 1.5rem;
text-align: center;
letter-spacing: .1rem;
}
.section_domestic-service figcaption dt em:lang(ja){
font-style: normal;
font-size: 4rem;
}
.section_domestic-service figcaption dd:lang(ja){
font-size: 1.125rem;
letter-spacing: .1rem;
text-align: justify;
}
.section_tire-types-export:lang(ja){
color: #fff;
background-color: rgba(0,0,0,.8);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.section_tire-types-export figure img:lang(ja),
.section_loadingimage figure img:lang(ja){
display: block;
margin: 0 auto 2rem;
border-radius: 50%;
}
.section_tire-types-export figcaption dt:lang(ja),
.section_loadingimage figcaption dt:lang(ja){
margin: 0 0 1rem;
padding: 0;
font-size: 1.5rem;
text-align: center;
}
.section_tire-types-export figcaption dt em:lang(ja),
.section_loadingimage figcaption dt em:lang(ja){
font-style: normal;
font-size: 4rem;
}
.section_tire-types-export figcaption dd:lang(ja),
.section_loadingimage figcaption dd:lang(ja){
font-size: 1.125rem;
letter-spacing: .1rem;
text-align: justify;
}


/********************************

会社情報

********************************/
:lang(ja) .section_results p strong{
font-size: 4rem;
}
:lang(ja) ol.ol-num{
counter-reset: my-counter;
list-style: none;
padding: 0;
}
:lang(ja) ol.ol-num li{
font-size: 16px;
line-height: 1.6;
margin-bottom: 1em;
padding-left: 30px;
position: relative;
}
:lang(ja) ol.ol-num li:before{
content: counter(my-counter);
counter-increment: my-counter;
background-color: #007c64;
color: #fff;
display: block;
float: left;
font-size: 11px;
line-height: 22px;
margin-left: -30px;
text-align: center;
height: 22px;
width: 22px;
border-radius: 50%;
}
.company .section dt:lang(ja){
margin: 0 0 .5rem;
font-size: .87rem;
color: rgba(0,0,0,.7);
}
.company .section dd:lang(ja){
margin: 0 0 2.5rem;
/* Kept in step with the same rule on the other languages further up, so the
   profile reads the same in every one. */
line-height: 2;
letter-spacing: .1rem;
}

/********************************

案件申請フォームページ

********************************/

.mattersubmitform #page-wrapper:lang(ja){
padding-top: 8rem;
}

/********************************

ARCHIVE / SINGLE

********************************/

.single .heading h1:lang(ja){
/*font-size: 2.5rem;*/
color: #fff;
}

.post-type-archive-usedtire_export .mask:lang(ja){
margin: 0 auto 2rem;
}

.post-type-archive-usedtire_export .entry-content p:lang(ja){
font-size: .875rem;
line-height: 1.75;
text-align: justify;
}
.post-type-archive-usedtire_export .h-100:lang(ja){
display: flex;
flex-direction: column;
}
.post-type-archive-usedtire_export .h-100 .entry-footer:lang(ja){
margin: auto auto 0 0;
display: inline-block;
width: max-content;
}

.export-form:lang(ja){
background-color: rgba(0,0,0,.1);
}

.single-usedtire_export #single-wrapper:lang(ja){
padding-top: 6rem;
}
.single-usedtire_export #single-wrapper .entry-header:lang(ja){
margin: 0 0 2rem;
}
.single-usedtire_export #single-wrapper .entry-meta:lang(ja){
padding: 1rem 0;
border-top: 1px solid rgba(0,0,0,.25);
border-bottom: 1px solid rgba(0,0,0,.25);
}
.single-usedtire_export #single-wrapper .hentry .attachment-large.size-large.wp-post-image:lang(ja){
display: block;
margin: 0 auto 4rem;
}
.single-post #single-wrapper .entry-header:lang(ja){
margin: 0 0 2rem;
}


/********************************

	アニメーション

********************************/
h2.animated:lang(ja){
position: relative;
display: inline-block;
}
h2.animated span:lang(ja) {
animation: fadeIn4 0s 0.3s backwards;
}
@keyframes fadeIn4 {
0% {opacity: 0;}
}

h2.animated:after:lang(ja) {
position: absolute;
top: 0;
left: 0;
/*content: '';-*/
display: block;
width: 100%;
height: 100%;
background: #333;
transform: scaleX(0);
animation: labelIn 0.3s 0s ease, labelOut 0.3s 0.3s ease;
animation-fill-mode: forwards;
}
@keyframes labelIn {
0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  100% {
    transform-origin: left;
    transform: scaleX(1);
  }
}
@keyframes labelOut {
  0% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

.hero-text1 br:lang(ja){
display: none;
}


/********************************

	RECRUIT

********************************/

.recruit .section_workflow dl:lang(ja),
.recruit .section_workflow dt:lang(ja),
.recruit .section_workflow dd:lang(ja){
margin: 0;
padding: 0;
}
.recruit .section_workflow dl:lang(ja){
background-color: #FFF;
border-top: 1px solid #225391;
border-left: 1px solid #225391;
margin: 0 0 1rem;
width: 100%;
display: flex;
flex-wrap: wrap;
border-radius: 100px;
}
.recruit .section_workflow dt:lang(ja){
color: #fff;
background-color: #225391;
font-weight: bold;
}
.recruit .section_workflow dt:lang(ja),
.recruit .section_workflow dd:lang(ja){
padding: 1rem;
box-sizing: border-box;
border-right:  1px solid #225391;
border-bottom: 1px solid #225391;
}
.recruit .section_workflow dt:lang(ja){
border-radius: 100px 0 0 100px;
width: 10em;
}
.recruit .section_workflow dd:lang(ja){
border-radius: 0 100px 100px 0;
width: calc(100% - 10em);
}


.recruit .section_recruit-detail dl:lang(ja),
.recruit .section_recruit-detail dt:lang(ja),
.recruit .section_recruit-detail dd:lang(ja){
margin: 0;
padding: 0;
}
.recruit .section_recruit-detail dl:lang(ja){
background-color: #FFF;
border-top: 1px solid #E4E4E4;
border-left: 1px solid #E4E4E4;
margin: 0 0 1rem;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.recruit .section_recruit-detail dt:lang(ja){
background-color: #FBFBFB;
font-weight: bold;
}
.recruit .section_recruit-detail dt:lang(ja),
.recruit .section_recruit-detail dd:lang(ja){
padding: 1rem;
box-sizing: border-box;
border-right:  1px solid #E4E4E4;
border-bottom: 1px solid #E4E4E4;
}
.recruit .section_recruit-detail dt:lang(ja){
width: 12em;
}
.recruit .section_recruit-detail dd:lang(ja){
width: calc(100% - 12em);
}
.section_recruit-entry{
background-color: #225391;
}
.section_recruit-entry h2:lang(ja),
.section_recruit-entry p:lang(ja){
margin: 0 auto 3rem;
color: #fff;
}
.section_recruit-entry h2:lang(ja) {
display: flex;
align-items: center;
}
.section_recruit-entry h2::before:lang(ja),
.section_recruit-entry h2::after:lang(ja) {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.section_recruit-entry h2::before:lang(ja) {
margin-right: 1rem;
}
.section_recruit-entry h2::after:lang(ja) {
margin-left: 1rem;
}

.section_recruit-entry dl:lang(ja){
margin: 0 0 2rem;
}
.section_recruit-entry dt:lang(ja){
margin: 0 0 .5rem;
color: #fff;
font-weight: 500;
}
.section_recruit-entry dd:not(:last-child):lang(ja) {
margin-bottom: 2rem;
}

.recruit .section input[type="submit"]:lang(ja){
color: #fff;
background-color: #1c1c1c;
border: 2px solid #1c1c1c;
}
.recruit .section input[type="submit"]:hover:lang(ja){
color: #1c1c1c;
background-color: #fff;
border: 2px solid #1c1c1c;
}


/********************************

	RWD

********************************/
@media (max-width:519px){
.section:lang(ja){
padding: 2rem 0;
}
#menu-item-924:lang(ja) {
margin-left: 0 !important;
}
#menu-item-924 a:lang(ja){
padding-left: 1rem;
}
.navbar-brand img:lang(ja){
max-width: 200px;
}
#right-sidebar:lang(ja){
margin-top: 4rem;
padding-top: 4rem;
/*background-color: rgba(0,0,0,.1);*/
}
.footer-nav li:lang(ja) {
margin: 0;
padding: 0 .2rem;
font-size: .812rem;
letter-spacing: normal;
font-feature-settings:"palt";
}
.footer-nav li a:lang(ja) {
padding: .5rem .2rem;
}
.site-info:lang(ja){
text-align: center;
font-size: .75rem;
}


.parallax-wrap:lang(ja) {
height: 180px;
}
.heading .container h1:lang(ja) {
font-size: 4rem;
}
.privacy-policy .heading .container h1:lang(ja) {
font-size: 3rem;
}
.heading .container h1 span:lang(ja) {
font-size: 1rem;
letter-spacing: .2rem;
}
.hero-text1:lang(ja) {
font-size: 4rem;
}
.hero-text1 br:lang(ja){
display: inherit;
}
.section_front-brand:lang(ja){
padding: .5rem 0;
}
.section_trading-performance h2:lang(ja) {
font-size: 2rem;
}
.section_font-contact h2:lang(ja) {
font-size: 4rem;
}
.front-bridge h3:lang(ja){
transform: translate(15px ,15px);
line-height: 1.5;
}

.recruit .section_workflow:lang(ja){
padding-top: 6rem;
}
.recruit .section_workflow dl:lang(ja),
.recruit .section_workflow dt:lang(ja){
margin: 0;
padding: 0;
}
.recruit .section_workflow dd:lang(ja){
margin: 0 0 1rem;
}
.recruit .section_workflow dl:lang(ja){
background-color: #FFF;
border: none;
display: block;
border-radius: 4px 4px 0 0;
}
.recruit .section_workflow dt:lang(ja){
color: #fff;
background-color: #225391;
font-weight: bold;
}
.recruit .section_workflow dt:lang(ja),
.recruit .section_workflow dd:lang(ja){
padding: .25rem;
box-sizing: border-box;
border-right:  none;
border-bottom: none;
}
.recruit .section_workflow dt:lang(ja){
border: 2px solid #225391;
border-radius: 4px 4px 0 0;
width: 100%;
}
.recruit .section_workflow dd:lang(ja){
border-radius: 0 0 4px 4px;
width: 100%;
border: 2px solid #225391;
}


.recruit .section_recruit-detail dl:lang(ja),
.recruit .section_recruit-detail dt:lang(ja),
.recruit .section_recruit-detail dd:lang(ja){
margin: 0;
padding: 0;
}
.recruit .section_recruit-detail dl:lang(ja){
background-color: #FFF;
border: none;
margin: 0 0 1rem;
width: 100%;
display: block;
}
.recruit .section_recruit-detail dt:lang(ja){
background-color: #fff;
font-weight: bold;
}
.recruit .section_recruit-detail dt:lang(ja),
.recruit .section_recruit-detail dd:lang(ja){
padding: .25rem;
box-sizing: border-box;
border-right:  none;
border-bottom: none;
}
.recruit .section_recruit-detail dt:lang(ja){
width: 100%;
border-bottom: 1px solid #225391;
}
.recruit .section_recruit-detail dd:lang(ja){
width: 100%;
}

}

@media (max-width:320px){
.heading .container h1:lang(ja) {
font-size: 3rem;
}
.privacy-policy .heading .container h1:lang(ja) {
font-size: 2.5rem;
}
}

.mc4wp_lists:lang(ja){
display: none;
}
.qr_whatsapp:lang(ja){
padding: 7px;
background-color: #fff;
border: 3px solid #000;
}
.mc4wp-form-fields input[type="email"]:lang(ja){
border: 2px solid #000;
border-radius: 3px;
}

.mattersubmitform .wpcf7:lang(ja){
margin: 2rem 0;
padding: 2rem 0 0;
max-width: 100%;
}

.mattersubmitform.wpcf7 dt:lang(ja){
margin: 0 0 1rem;
}
.mattersubmitform .wpcf7 dt span:lang(ja){
margin-left: 1rem;
font-size: .75rem;
}
.mattersubmitform .wpcf7 dd:lang(ja){
margin: 0 0 2rem;
}

.mattersubmitform .wpcf7 input[type=submit]:lang(ja),
.contact .wpcf7 input[type=submit]:lang(ja){
border: 2px solid #000 !important;
}
.mattersubmitform .wpcf7 input[type=submit]:hover:lang(ja),
.contact .wpcf7 input[type=submit]:hover:lang(ja){
color: #fff;
background-color: #000;
border: 2px solid #000;
}

.line-contact:lang(ja){
margin: 2rem 0;
text-align: center;
}
.rpwe-block li:lang(ja) {
display: block !important;
}

.category-blog .heading .container h1:lang(ja),
.post-type-archive-new-arrival .heading .container h1:lang(ja){
/*font-size: 2.5rem;*/
color: #fff;
}
.category-blog .site-main .mask:lang(ja){
margin-bottom: 1rem;
}
.post-type-archive .site-main .entry-title:lang(ja){
font-size: 1.25rem;
}
.category-blog .site-main .entry-title:lang(ja){
font-size: 1.125rem;
}
.category-blog .site-main .entry-meta:lang(ja){
margin-bottom: 1rem;
font-size: .75rem;
}
.category-blog .site-main .entry-content p:lang(ja){
font-size: .812rem;
text-align: justify;
}
.category-blog .site-main .cat-links:lang(ja){
font-size: .75rem;
}

.section_new-arrival:lang(ja){
margin-top: 6rem;
margin-bottom: -6rem;
}
.inner_new-arrival:lang(ja){
padding: 2rem;
background-color: rgba(255,255,255,0.75);
border-radius: 3px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.inner_new-arrival h3:lang(ja){
margin: 0 0 1.5rem;
padding: 0;
font-size: 1.125rem;
}
.inner_new-arrival h3 a:lang(ja){
transition: .3s;
}
.inner_new-arrival h3 a:hover:lang(ja){
color: #bc002d;
}
.inner_new-arrival .frontpage-news__date:lang(ja){
display: block;
margin: 0 0 1rem;
}

@media (max-width:520px) {
.section_scheduled-matter:lang(ja){
padding-top: 6rem;
}
.section_new-arrival:lang(ja) {
margin-bottom: -3rem;
}
}

.section_recent-usedtire_export:lang(ja){
background-color: rgba(255,255,255,.95);
}

.post-type-archive-new-arrival .hentry:lang(ja){
margin: 0 0 2rem;
padding: 1rem;
background-color: rgba(255,255,255,.95);
border: 1px solid #d0d0d0;
}
.post-type-archive-new-arrival .hentry h2:lang(ja){
margin: 0 0 1rem;
padding: 0;
}

.single .entry-title:lang(ja){
margin: 0 0 2rem;
font-size: 1.5rem;
}
.single .hentry .wp-post-image:lang(ja){
margin: 0 auto 2rem;
}
.single .hentry .entry-content p:lang(ja){
margin: 0 0 4rem;
line-height: 1.75;
letter-spacing: .1em;
}
.single .hentry .entry-footer:lang(ja){
margin: 0 0 2rem;
padding: 1rem;
background-color: rgba(0,0,0,.05);
border-radius: 4px;
}
.nav-previous a:lang(ja),
.nav-next a:lang(ja){
display: block;
padding: 1rem;
}


/* NAVI NEW */
.navbar-light .navbar-toggler:lang(ja) {
color: rgba(0,0,0,1);
/*background-color: rgba(255,255,255,.55);
border-color: rgba(0,0,0,.2);*/
box-shadow: none;
transition: .3s;
}

.btn-close:lang(ja){
opacity: 1;
}

.link_form:lang(ja){
position: fixed;
top: 0;
z-index: 3;
width: 100%;
}
.link_form img:lang(ja){
position: absolute;
left: 0;
right: 0;
width: 200px;
margin: 0 auto;
padding: .5rem;
background-color: rgba(255,255,255,0);
border-style: solid;
border-color: #000;
border-width: 0 0 1px;
transition: .3s;
}
.link_form img:hover:lang(ja){
background-color: rgba(255,255,255,1);
}

#wrapper-navbar:lang(ja) {
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
padding: .5rem 0;
background: #fff;
transition: .3s;
}
#wrapper-navbar:lang(ja){
background: transparent;
}
#wrapper-navbar h1:lang(ja) {
color: #fff;
transition: .3s;
}

#wrapper-navbar.is-animation:lang(ja) {
padding: .5rem 0;
background-color: #fff;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.is-animation h1:lang(ja) {
color: #000;
}
#wrapper-navbar.is-animation .navbar-toggler{
border: none;
}

.navbar-light:lang(ja){
background-color: #fff;
}
.nav-item:lang(ja),
.nav-link:lang(ja){
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
}

@media (min-width:769px) {
.dropdown-item:lang(ja){
transition: .5s;
}
.dropdown-item.active:lang(ja){
background-color: rgba(0,123,255,1);
}
.dropdown-item:hover:lang(ja){
color: #000;
background-color: rgba(0,123,255,.25);
}
.dropdown-item.active:lang(ja){
color: #fff;
}
.dropdown-item.active:hover:lang(ja){
color: #000;
}
.nav-item,
.nav-link{
position: relative;
}
}

#menu-item-1472:lang(ja){
margin-bottom: 1rem;
border: none !important;
}
#menu-item-1472 a::before:lang(ja),
#menu-item-1472 a::after:lang(ja){
content: none;
}
#menu-item-1472 a:lang(ja){
padding: .5rem 2rem;
display: inline-block;
color: #000 !important;
background-color: #fff;
border: 1px solid #000 !important;
}
#menu-item-1472 a:hover:lang(ja){
color: #fff !important;
background-color: #000;
}


/********************************

	RWD

********************************/

@media(max-width:520px){
.interlude:lang(ja) {
top: 55%;
left: 10%;
right: 10%;
transform: inherit;
transform: translateY(-50%);
}
.home .interlude h1:lang(ja){
font-size: 2rem;
letter-spacing: normal;
}
.home .interlude h1 small:lang(ja){
display: block;
margin-top: 2rem;
font-size: 1.5rem;
line-height: 1.5;
font-weight: 400;
letter-spacing: .25rem;
}
.tire-mark_02:lang(ja){
display: none;
}
}


/*.float-button__wrap:lang(ja) {
display: none;
position: fixed !important;
bottom: 50% !important;
right: 0;
z-index: 9999;
}
.float-button__wrap img:lang(ja){
width: 48px;
padding: 30px 15px;
background-color: #27a0dc;
border-radius: 10px 0 0 10px;
transform-origin: right center;
transition: .3s;
}
.float-button__wrap img:hover:lang(ja){
transform: scale(1.2);
background-color: #db2739;
}*/

/*20240719*/

.single.group-blog .site-main h2:lang(ja){
padding: .5rem;
font-size: 1.5rem;
border: 1px solid #000;
}

.dl_blog-contact,.dl_blog-contact dt:lang(ja),
.dl_blog-contact dd:lang(ja){
margin: 0;
padding: 0;
}
.dl_blog-contact:lang(ja){
background-color: #FFF;
border-top: 1px solid #000;
border-left: 1px solid #000;
margin: 0 0 2.5rem;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.dl_blog-contact dt:lang(ja){
color: #fff;
background-color: #000;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.dl_blog-contact dd:lang(ja){
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.dl_blog-contact dt:lang(ja),
.dl_blog-contact dd:lang(ja){
padding: 1rem;
box-sizing: border-box;
border-right:  1px solid #000;
border-bottom: 1px solid #000;
}
.dl_blog-contact dt:lang(ja){
width: 70%;
}
.dl_blog-contact dd:lang(ja){
width: 30%;
}


.tabs {
display: flex;
flex-wrap: wrap;
}
.tab_label {
color: #225391;
font-weight: 600;
text-align: center;
border: solid 1px #225391;
position: relative;
z-index: 1;
cursor: pointer;
flex: 1;
padding: .5rem;
margin: 0 1rem 1.5rem; 
}
.tab_label:hover {
opacity: 0.75;
}
.tab_content {
flex: 100%;
display: none;
overflow: hidden;
}

input[name="tab_switch"] {
display: none;
}

.tabs input:checked + .tab_label {
color: #fff;
background-color: #225391;
}
.tabs input:checked + .tab_label::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #225391 transparent transparent transparent;
display: block;
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
transition: all 0.3s ease 0s;
}

#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content {
display: block;
}

.tab_content{
position: relative;
animation: fadeIn5 1s ease;
}
@keyframes fadeIn5 {
0% {opacity: 0; top: 50px;}
100% {opacity: 1; top: 0; }
}


/*HOW IT WORKS*/
/* The top padding was zeroed here, from when this page opened with its own
   full-bleed block. It now opens with .secondary-mv, which is pulled up 60px
   to tuck under the header and relies on the wrapper's usual 2rem sitting
   above it. With that removed the hero rose by the same 32px and the H1 came
   up level with the logo - visible wherever the title wraps to two lines, so
   EN, ES and FR. Japanese escaped it only because its slug (how-it-works-jp)
   is not one of the three class names below. Now left to inherit
   #page-wrapper's own 2rem 0 2rem, the same as every other page. */


.header-controls select {
appearance: none;         /* デフォルト矢印を消す */
-webkit-appearance: none; /* Safari対策 */
-moz-appearance: none;    /* Firefox対策 */
color: #fff;
background-color: transparent;
border: 1px solid rgb(255 255 255 /.25);
padding: 0.4rem 2rem 0.4rem 0.8rem;
font-size: 1rem;
border-radius: 4px;
line-height: 1.4;
background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
background-repeat: no-repeat;
background-position: right 0.6rem center;
background-size: 1rem;
cursor: pointer;
}
.header-controls select:hover,
.header-controls select:focus  {
color: #fff;
background-color: #000;
border: 1px solid rgb(255 255 255 /.5);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
outline: none;
}


/********************************

	HOW IT WORKS

********************************/

.section_step{
padding: 4rem 0 8rem;
background: #f2f2f2;
}
.section_incoterms,
.section_swift,
.section_money{
padding: 4rem 0;
}
.section_incoterms{
background-color: #fff;
}
.section_step h2,
.section_incoterms h2,
.section_swift h2,
.section_money h2{
margin: 0 auto 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 4rem;
font-weight: 700;
line-height: 1;
text-align: center;
}
.section_step p.lead,
.section_incoterms p.lead,
.section_swift p.lead{
margin: 0 auto 4rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.75;
letter-spacing: .05em;
}
.section_step .you h3,
.section_step .our h3{
margin: 0 0 1rem;
padding: 1rem 2rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1;
border-radius: 100px;
}
.section_step .you h3{
position: relative;
z-index: 2;
text-align: center;
color: #fff;
background-color: #0078bf;
border: 2px solid #0078bf;
}
.section_step .our h3{
position: relative;
z-index: 2;
text-align: center;
color: #000;
background-color: #fff;
border: 2px solid #000;
}
.section_step_contents{
position: relative;
}
.section_step_contents::after{
content: "";
position: absolute;
z-index: 0;
left: 0;
right: 0;
margin: 0 auto;
top: -30px;
display: block;
width: 75%;
height: calc(100% + 90px);
background: linear-gradient(to right, #194895 0%, #194895 50%, #ffffff 50%, #ffffff 100%);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 40px;
}
.section_step_contents ul {
position: relative;
z-index: 2;
list-style: none;
padding: 0;
}
.section_step_contents ul li{
margin: 0 0 5rem;
}
.you,
.our{
position: relative;
}
.section_step_contents .you ul {
padding: 0;
text-align: right;
}
.section_step_contents .our ul {
padding: 4.5rem 0 0;
text-align: left;
}
.section_step_contents ul li {
position: relative;
font-family: 'Roboto Condensed', sans-serif;
font-size: clamp(1rem, 2vw + 1rem, 2.375rem);
font-weight: 700;
line-height: 1;
border: none;
background-color: transparent;
}
.section_step_contents .you ul li {
padding-right: 5rem;
color: #0078bf;
}
.section_step_contents .you ul li:nth-child(3) {
margin-bottom: 9rem;
}
.section_step_contents .our ul li:nth-child(3) {
margin-bottom: 2.25rem;
}

.section_step_contents .you ul li:first-child {
padding-top: 2rem;
}
.section_step_contents .our ul li {
padding-left: 5rem;
}
.you::before {
content: "";
position: absolute;
z-index: 2;
right: 2.875rem;
top: 0;
bottom: -2rem;
width: 10px;
background-color: #70b8de;
}
.you .list-group-item::after {
content: "";
position: absolute;
right: 0.875rem;
top: -10px;
display: block;
width: 50px;
height: 50px;
background-image: url(https://usedtirejapan.com/cms/wp-content/uploads/2025/06/hiw_tire_after.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
background-color: #e0f9fe;
animation: tire1 3s linear 0s infinite;
}
@keyframes tire1{
0%{ transform: rotate(0deg) }
100%{ transform: rotate(360deg) }
}
.you .list-group-item:first-child::after {
top: 20px;
}

.our::before {
content: "";
position: absolute;
z-index: 2;
left: 2.875rem;
top: 0;
bottom: -2rem;
width: 10px;
background-color: #000;
}
.our .list-group-item::after {
content: "";
position: absolute;
left: .875rem;
top: -5px;
display: block;
width: 50px;
height: 50px;
background-image: url(https://usedtirejapan.com/cms/wp-content/uploads/2025/06/hiw_tire_after.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
background-color: #fff;
animation: tire2 3s linear 0s infinite;
}
@keyframes tire2{
0%{ transform: rotate(0deg) }
100%{ transform: rotate(-360deg) }
}
.our .list-group-item:first-child::after {
top: -10px;
}

.done{
position: relative;
z-index: 2;

text-align: center;
}
.done span{
position: relative;
display: inline-block;
padding:  .75rem 4.5rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2.5rem;
font-weight: 700;
text-align: center;
background-color: #fff;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border: 1px solid #000;
}
.done span img{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: -40px;
max-width: 60px;
}
.done {
margin-top: 2rem;
font-size: 1.2rem;
font-weight: bold;
}
.incoterms-center {
display: grid;
place-content: center;
gap: 1ch;
}
.cif-block {
position: relative;
display: flex;
}
.cif-block::before {
content: "";
position: absolute;
z-index: 2;
right: -20px;
top: 0;
display: block;
width: 45px;
height: 100%;
background-color: #fff;
transform: rotate(10deg);
}
.cif-circle {
position: relative;
z-index: 4;
width: 300px;
height: 300px;
background-color: #fff;
border: 10px solid #112244;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #112244;
}
.cif-circle span{
font-family: 'Roboto Condensed', sans-serif;
font-size: 6rem;
font-weight: 700;
}
.cif-list {
position: relative;
z-index: 1;
}
.cif-list .cif-item{
margin-bottom: 1.5rem;
padding: 1rem 2.5rem;
display: flex;
align-items: center;
gap: 4rem 0;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1;
color: white;
background: #112244;
}
.cif-list .cif-item:nth-of-type(1){transform: translateX(-5rem);padding-left: 9rem;}
.cif-list .cif-item:nth-of-type(2) {transform: translateX(-1rem);padding-left: 7.5rem;}
.cif-list .cif-item:nth-of-type(3) {transform: translateX(-5rem);padding-left: 9rem;}
.cif-list .cif-item:nth-of-type(1){width: calc(100% + 5rem)}
.cif-list .cif-item:nth-of-type(3) {width: calc(100% + 5rem)}
.cif-item img {
position: absolute;
display: block;
padding: 5px;
width: 80px;
height: 80px;
background-color: #fff;
border: 5px solid #182752;
border-radius: 50%;
}
.cif-list .cif-item:nth-of-type(1) img{left: 60px;}
.cif-list .cif-item:nth-of-type(2) img{left: 30px;}
.cif-list .cif-item:nth-of-type(3) img{left: 60px;}
.coin img{
display: block;
margin: 0 auto 1rem;
}
.coin figcaption{
font-family: 'Roboto Condensed', sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1;
text-align: center;
}
.swift-grid{
background-color: #e5f8fd;
border-radius: 40px;
display: grid;
place-content: center;
gap: 1ch;
}
.swift-grid img{
display: block;
}
.swift-grid img:nth-child(1) {grid-column:1 / 2;grid-row:1 / 2;}
.swift-grid img:nth-child(2) {grid-column:2 / 3;grid-row:1 / 2;}
.swift-grid img:nth-child(3) {grid-column:3 / 4;grid-row:1 / 2;}
.swift-grid img:nth-child(4) {grid-column:4 / 5;grid-row:1 / 2;}
.swift-grid img:nth-child(5) {grid-column:5 / 6;grid-row:1 / 2;}
.swift-grid img:nth-child(6) {grid-column:1 / 2;grid-row:2 / 3;}
.swift-grid img:nth-child(7) {grid-column:5 / 6;grid-row:2 / 3;}
.swift-grid img:nth-child(8) {grid-column:1 / 2;grid-row:3 / 4;}
.swift-grid img:nth-child(9) {grid-column:5 / 6;grid-row:3 / 4;}
.swift-grid span:nth-of-type(1) {grid-column:2 / 3;grid-row:1 / 2;}
.swift-grid span:nth-of-type(2) {grid-column:5 / 6;grid-row:2 / 3;}
.swift-grid span:nth-of-type(3) {grid-column:1 / 2;grid-row:4 / 5;}
.swift-grid span:nth-of-type(4) {grid-column:5 / 6;grid-row:4 / 5;}
.swift-grid img:nth-child(1){display: grid;place-items: center;}
.swift-grid img:nth-child(3){display: grid;place-items: center;}
.swift-grid span.swift-you{
display: block;
padding: .375rem 2.5rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2rem;
font-weight: 700;
text-align: center;
line-height: 1;
color: #fff;
background-color: #000;
border: 2px solid #000;
border-radius: 60px;
}
.swift-grid span.swift-our{
display: block;
padding: .375rem 1.25rem;
text-align: center;
background-color: #fff;
border: 2px solid #000;
border-radius: 60px;
transform: scale(2);
}
.span_send{
position: relative;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1;
}
.span_send img{
display: block;
margin: 0 auto .5rem;
}

.span_release{
display: flex;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1;
}
.span_release img{
position: relative;
top: -10px;
display: inline-block;
margin-right: .75rem;
}
@media(max-width:800px){
.section_step_contents::after{
width: 100%;
}
.swift-grid {
grid-template-columns:
clamp(40px, 8vw, 80px)
clamp(30px, 5vw, 60px)
minmax(0, 1fr)
clamp(30px, 5vw, 60px)
clamp(40px, 8vw, 80px);
}
}



 :lang(ja) .recruit-2 .wpcf7 input[type=submit],
 :lang(ja) .contact-2 .wpcf7 input[type=submit]{
color: #fff;
background-color: #27a0dc;
cursor: pointer;
}
:lang(ja) .recruit-2 .wpcf7 input[type=submit]:hover,
:lang(ja) .contact-2 .wpcf7 input[type=submit]:hover{
color: #27a0dc;
background-color: #fff;
}

/* single.php used to print one prev/next block per language and hide all but
   the matching one here. That is now a single .utj-pager built from
   get_permalink(), so there is nothing to switch between - and the switch was
   incomplete anyway: there was no :lang() rule for Portuguese, so Portuguese
   articles displayed no prev/next links at all. .utj-pager inherits .row's
   flex, so it needs no display of its own. */

/* text-align was centre here. The hero is left-aligned site-wide now, and this
   rule was the one thing still pulling the Japanese title back to the middle. */
:lang(ja) .secondary-mv h1,
:lang(ja) .secondary-mv .mv-label{
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
/* CJK glyphs sit higher inside the line box than Latin ones, so at the same
   box position the Japanese title started 6-7px above the English one and read
   as crowding the logo. Measured at 1280px: ink top y=72 against y=79. */
padding-top: .16em;
/* Japanese wraps between almost any two characters by default, and at this
   size that was cutting compound words in half: 中古 split across two lines,
   コートジボワール broken mid-katakana, 共和国 and 合衆国 likewise. auto-phrase
   breaks at phrase boundaries instead. Chrome and Edge honour it; anywhere
   else the wrap falls back to the old behaviour, so this is an improvement
   rather than a dependency. */
word-break: auto-phrase;
}
:lang(ja) .secondary-mv h1 span,
:lang(ja) .secondary-mv .mv-label span{
display: block;
font-family: inherit;
font-size: 1.125rem;
}

:lang(en) .footer-navigation_us,
:lang(es-ES) .footer-navigation_es,
:lang(fr-FR) .footer-navigation_fr,
:lang(ja) .footer-navigation_ja{
display: block;
}

@media(max-width: 600px){
:lang(en) .interlude p,
:lang(es) .interlude p,
:lang(fr) .interlude p,
:lang(pt-PT-ao90) .interlude p{
font-size: 1.375rem;
}
:lang(en) .worldmap h2{
font-size: 2rem;
}

}

/*Facebook Icon*/
:lang(en) .fb-fr{display: none;}
:lang(en) .fb-es{display: none;}
:lang(en) .fb-pt{display: none;}
:lang(es-ES) .fb-fr{display: none;}
:lang(fr-FR) .fb-es{display: none;}
:lang(ja) .fb-es{display: none;}
:lang(ja) .fb-fr{display: none;}
:lang(es-ES) .fb-es{display: block;}
:lang(es-ES) .fb-all{display: none;}
:lang(fr-FR) .fb-fr{display: block;}
:lang(fr-FR) .fb-all{display: none;}
.fb-pt{display: none;}
:lang(pt-PT-ao90) .fb-pt{display: block;}
:lang(pt-PT-ao90) .fb-fr,
:lang(pt-PT-ao90) .fb-all,
:lang(pt-PT-ao90) .fb-es{display: none;}
/* ロシア語には専用の Facebook ページが無いので本体アカウント(.fb-all)だけ残す。
   ここを書かないと、どの :lang() にも当たらず es と fr が並んで3つ出る。 */
:lang(ru) .fb-es,
:lang(ru) .fb-fr{display: none;}

:lang(es-ES) .footer-navigation_es,
:lang(fr-FR) .footer-navigation_fr,
:lang(ja) .footer-navigation_ja{
display: block;
}

.is-animation .header-controls select{
color: rgb(0 0 0 /.75);
background-color: transparent;
}

:lang(es-ES) .section_step_contents ul li {
font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}
:lang(fr-FR) .section_step_contents ul li {
font-size: clamp(1.25rem, 2vw + 1rem, 2.5rem);
}
:lang(es-ES) .section_step_contents::after,
:lang(fr-FR) .section_step_contents::after {
width: 90%;
}
@media(max-width:834px){
:lang(en) .section_step_contents::after,
:lang(es-ES) .section_step_contents::after,
:lang(fr-FR) .section_step_contents::after {
width: 100%;
}
}

@media(max-width:600px){
.section_step h2, .section_incoterms h2, .section_swift h2, .section_money h2 {
font-size: 2.5rem;
}
.section_step .you h3, .section_step .our h3 {
padding: .5rem .5rem;
}
.our::before {
left: 1.5rem;
top: .25rem;
width: 6px;
}
.you::before {
right: 1.5rem;
top: .25rem;
width: 6px;
}
.our .list-group-item::after{
left: 0;
width: 30px;
height: 30px;
}
.section_step_contents .our ul li {
padding-left: 2rem;
}
.you .list-group-item::after {
right: 0;
width: 30px;
height: 30px;
}
.section_step_contents ul li {
margin: 0 0 2rem;
}
.section_step_contents .you ul li {
padding-right: 2rem;
}
.section_step_contents .you ul li:first-child {
padding-top: 1rem;
}
.you .list-group-item:first-child::after {
top: 17.5px;
}
.our .list-group-item:first-child::after {
top: 10px;
}
.you .list-group-item::after{
top: 10px;
}
.our .list-group-item::after{
top: 10px;
}
.cif-block{
transform: scale(.6);
}
.section_money .d-flex.justify-content-center.gap-4{
max-width: 90%;
margin: 0 auto;
}
.span_send p,
.span_release p{
font-size: 1rem;
}

}

.how-it-works .modal ul{
margin-bottom: 0;
}


/*FOOTER*/

#wrapper-footer{
position: relative;
padding: 0;
color: #fff;
background-color: #101010;
background-image: url(images/dummy_tire.png);
background-repeat: no-repeat;
background-position: center center;
}
.footer{
padding: 30px 0;
}
.footer h3{
    margin: 0 auto 46px;
    text-align: center;
}
.footer ul.menu{
display: flex;
margin-bottom: 32px;
list-style: none;
justify-content: center;
gap: 16px;
}
@media(max-width:600px){
.footer ul.menu{
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 32px;
gap: 12px;
margin-right: 120px;
}
#language-switcher {
right: 30px;
top: 120px;
}
}
.footer ul.menu li{
font-family: 'Roboto Condensed', sans-serif;
font-size: clamp(13px, 1.4vw, 16px);
text-transform: uppercase;
}
.footer ul.menu li a{
  color: #fff;
}
.footer_sns ul{
  list-style: none;
  display: flex;
  margin-bottom: 32px;
  justify-content: center;
  gap: 16px;
}
.copyright{
    display: block;
    margin: 0 auto;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    font-size: 10px;
    letter-spacing: .1em;
}

#language-switcher {
    position: absolute;
    z-index: 2147483647;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
}

#language-switcher img {
    width: 30px;
    height: 30px;
}

#language-switcher #language-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

#language-switcher #language-selector .label {
    margin-right: 10px;
    letter-spacing: normal;
    font-weight: 700;
    transition: color 0.3s ease, border-color 0.3s ease;
}

#language-switcher #language-selector .arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    position: relative;
    top: -2.5px;
}

#language-switcher.open #language-selector .arrow {
    transform: rotate(-135deg);
}

#language-switcher #language-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: -55px;
    transform: translateX(-50%);
    background-color: rgb(255 255 255 /.1);
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    width: 100%;
    text-align: center;
    transition: 0.2s ease-in-out;
    width: 12ch;
}

#language-switcher.open #language-menu {
    display: block;
    animation: slideUp 0.4s ease-in-out forwards;
}

@keyframes slideUp {
    0% {
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

#language-switcher #language-menu a {
    display: block;
    padding: 10px 8px;
    font-size: var(--font-size-sm-fixed);
    color: #fff;
}

#language-switcher #language-menu a:hover {
    background-color: #000;
}

#language-selector span{
  display: none;
}
:lang(en) #language-selector span.label-en{display: block;}
:lang(es) #language-selector span.label-es{display: block;}
:lang(fr) #language-selector span.label-fr{display: block;}
:lang(pt) #language-selector span.label-pt{display: block;}
:lang(ja) #language-selector span.label-ja{display: block;}

:lang(en) #language-switcher.open #language-menu a:nth-child(1){display: none;}
:lang(es) #language-switcher.open #language-menu a:nth-child(2){display: none;}
:lang(fr) #language-switcher.open #language-menu a:nth-child(3){display: none;}
:lang(pt) #language-switcher.open #language-menu a:nth-child(4){display: none;}
:lang(ja) #language-switcher.open #language-menu a:nth-child(5){display: none;}

@media(max-width:600px){
  #wrapper-footer{
    background-size: 200%;
  }
}



.carousel {
overflow-x: auto;
position: relative;
scroll-snap-type: x mandatory;
-ms-overflow-style: none; /* IE, Edge */
scrollbar-width: none; /* Firefox */
}
.track {
display: flex;
gap: 20px;
transition: transform .4s ease;
will-change: transform;
scroll-snap-type: x mandatory;
}
.card_blog {
flex: 0 0 calc((100% - 40px) / 3);
scroll-snap-align: start;
/* Titles run to one or two lines. Without this the READ MORE link sits
   directly under the title and drops out of line with the neighbouring cards. */
display: flex;
flex-direction: column;
}
.card_blog figcaption {
display: flex;
flex-direction: column;
flex: 1;
}
.card_blog figcaption .btn-readmore_simple {
margin-top: auto;
}
.card_blog img{
  display:block;
  margin:0 auto 15px;
aspect-ratio:800 / 566;
overflow:hidden;
}
.card_blog p.posted-date{
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  }
.card_blog h3{
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  }

.card_blog h3 a{
  color:#000;
  }
.btn-readmore_simple{
  position: relative;
  display:block;
  padding: .5rem 1rem .5rem .5rem;
  margin-left:auto;
  text-align:right;
color:#000;
}
.btn-readmore_simple::before{
  content: "";
  position: absolute;
  right: 1px;
  bottom: 3px;
  display: block;
  height: 8px;
  width: 1px;
  background-color: #000;
  transform: rotate(-45deg);
}
.btn-readmore_simple::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  display: block;
  height: 1px;
  width: 14ch;
  background-color: #000;
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform .35s ease;
}
.btn-readmore_simple span{
  position: relative;
  z-index: 2;
}
.btn-readmore_simple::before{
  content: "";
  position: absolute;
  right: 1px;
  bottom: 3px;
  display: block;
  width: 1px;
  height: 8px;
  background-color: #000;
  transform: rotate(-45deg) translateX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}

.btn-readmore_simple:hover::after{
  transform: scaleX(.5) translateX(3px);
}
.btn-readmore_simple:hover::before{
  transform: rotate(-405deg) ;
}

.carousel-wrap span.carousel-back,
.carousel-wrap span.carousel-next{
  position: absolute;
  z-index: 5;
  top: calc(50% - 10px);
  display: block;
  background-color: #000;
  width: 50px;
  height: 50px;
  transition: .3s;
}
.carousel-wrap span.carousel-back{
  left: 0;
}
.carousel-wrap span.carousel-next{
  right: 0;
}

.carousel-wrap span.carousel-back::before,
.carousel-wrap span.carousel-back::after,
.carousel-wrap span.carousel-next::before,
.carousel-wrap span.carousel-next::after {
  content: "";
  position: absolute;
  right: 23px;
  width: 1px;
  height: 6px;
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: calc(100% - 2px) 50%;
}
.carousel-wrap span.carousel-back::before,
.carousel-wrap span.carousel-next::before{
  transform: rotate(45deg);
}
.carousel-wrap span.carousel-back::after,
.carousel-wrap span.carousel-next::after{
  transform: rotate(-45deg);
}
.carousel-wrap span.carousel-back::before{
  top: 23px;
}
.carousel-wrap span.carousel-back::after {
  top: 21px;
}
.carousel-wrap span.carousel-next::before{
  top: 18px;
}
.carousel-wrap span.carousel-next::after {
  top: 24px;
}

.btn-readmore{
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 auto;
  padding: 0 6rem;
  color: #000;
  background-color: #fff;
  width:fit-content;
  height: 40px;
  line-height: 40px;
  transition: .3s;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.btn-readmore:hover{
  color: #fff;
  background-color: #000;
}
.btn-readmore span{
  position: absolute;
  right: 10px;
  top: 10px;
  display: block;
  background-color: #000;
  width: 20px;
  height: 20px;
  transition: .3s;
}
.btn-readmore span::before,
.btn-readmore span::after {
  content: "";
  position: absolute;
  right: 8px;
  width: 1px;
  height: 6px;
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: calc(100% - 2px) 50%;
}
.btn-readmore span::before {
    top: 8px;
  transform: rotate(45deg);
}

.btn-readmore span::after {
    top: 6px;
  transform: rotate(-45deg);
}
.btn-readmore:hover span{
  right: 2px;
}

.home h2{
position: relative;
/* The decorative ring starts 44px above the heading and is 148px tall, so it
   reaches ~46px past the text. 50px left almost no clearance below it and read
   as cramped; 72px puts a visible gap between the ring and the content. */
margin: 0 0 72px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 3rem;
font-weight: 700;
text-align: center;
letter-spacing: -.01em;
text-transform: uppercase;
}
/* Decorative ring behind every home heading. Same flat tone as the half-tyre
   arc in .site (black at .05), so it reads as part of the background rather
   than as a second tyre illustration.
   The centre must stay transparent, not white: these headings sit on a white
   section in some places and on the dark blue PRODUCT band in others, and a
   white fill turns into a bright disc there.
   No z-index, so the ring paints in front of the section background (on the
   PRODUCT band that background is a photo, and a ring behind it disappears).
   Safe over the heading because the centre is transparent and the band itself
   is only 5% black - letters crossing it stay legible. */
.home h2::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: -44px;
margin: 0 auto;
display: block;
box-sizing: border-box;
width: 148px;
height: 148px;
background: transparent;
border: 32px solid rgba(0,0,0,.05);
border-radius: 50%;
}
/* PRODUCT is the one home heading over a dark photo, where a black ring is
   invisible. The YouTube section's #212519 panel sits below its heading, not
   behind it, so that heading keeps the default dark ring. */
.home .section_service h2::after {
border-color: rgba(255,255,255,.14);
}

.home .marquee  {
  padding-top: 2rem;
overflow: hidden;
}
.home .marquee .track {
display: flex;
will-change: transform;
}
.home .marquee .track img {
height: 48px;
width: auto;
max-width: none !important;
flex-shrink: 0;
}

.tire-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
font-family: "Roboto Condensed", sans-serif;
}
@media (max-width: 768px) {
.tire-list {
grid-template-columns: 1fr;
gap: 24px;
}
}

.tire-card {
background: #1f252b;
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
}
/* Was .home-scoped, which left the same component looking different the moment
   it appeared anywhere else - the How it works cards came out left-aligned
   against the centred ones on the front page. The card carries its own look. */
h3.tire-card__title {
margin: 0;
padding: 20px;
font-size: 24px;
font-weight: 700;
letter-spacing: .05em;
text-align: center;
}
/* The card crops, not the file. These four images used to have to be prepared
   at 760x378 or the card grew taller than its neighbours; now any photo can be
   dropped in from the media library at whatever size it was shot. */
/* The cards now point at the full photos rather than the 760x378 crops, so the
   box can be this tall and still be cropping the source rather than scaling it
   up. Card width is around 300px against 480-760px sources. */
.tire-card__image {
aspect-ratio: 4 / 3;
overflow: hidden;
}

/* Same treatment for the Bootstrap card grids on the product and how-it-works
   pages. Those photos are a mix of 2:1 crops, squares and portraits, so with
   height:auto every card in a row ended up a different height.
   SVGs are excluded: the flow cards use line-art icons, and cropping those to
   4:3 blew them up and cut their edges off. */
.card > .card-img-top:not([src$=".svg"]) {
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
height: auto;
}

/* ---- Flow cards (JA home): compact ----
   The icons were running about 200px tall inside cards with the default
   padding, which made a four-step summary as tall as the sections around it. */
.section_hiw_innner .card {
border: 1px solid #e6e6e6;
border-radius: 8px;
}
.section_hiw_innner .card-img-top {
width: auto;
max-width: 120px;
height: 96px;
object-fit: contain;
margin: 1.4rem auto .35rem;
}
.section_hiw_innner .card-body {
padding: .5rem 1.1rem 1.25rem;
}
.section_hiw_innner .card-title {
font-size: 1.05rem;
margin-bottom: .4rem;
word-break: normal;
overflow-wrap: break-word;
}
.section_hiw_innner .card-text {
font-size: .9rem;
line-height: 1.65;
margin-bottom: 0;
}

/* ---- STEP cards: inline icons ----
   The eight step icons are SVG in the content rather than uploaded files, so
   they inherit the card's colour and ship with the page. This box gives them
   the same footprint the old flow_fig images had. */
/* Stacked one per row, so each card runs horizontally: icon on the left, the
   step and its explanation on the right. Held well short of the container -
   full width made single-line steps like "バン詰め" look almost empty. */
.step-cards {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.step-cards .card {
flex-direction: row;
align-items: center;
gap: 1.5rem;
padding: .5rem 1.5rem;
}
.step-figure {
flex: 0 0 132px;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 0;
color: #111;
}
.step-icon {
width: 100%;
max-width: 132px;
height: auto;
}
.step-cards .card-body {
padding-left: 0;
/* The home section centres its text; these cards read as a list and want to
   stay left, the same as on how-it-works. */
text-align: left;
}
.step-cards .card-title {
word-break: normal;
overflow-wrap: break-word;
}
.step-cards .card-text {
margin-bottom: 0;
}

@media (max-width: 575px) {
	.step-cards .card { gap: 1rem; padding: .5rem 1rem; }
	.step-figure { flex-basis: 84px; }
	.step-icon { max-width: 84px; }
}

/* ---- STEP on the home page: square tiles, read clockwise ----
   How it Works lists the eight steps down the page; the home page only
   summarises them, so they go into a 4x2 block of squares that takes about
   half the height. The bottom row runs right to left, so the eye travels
   01-04 across the top, down at 04, then 05-08 back along the bottom. Source
   order stays 01-08 - only the placement is reversed. */
.home .step-cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	/* Full width of .hiw_contents, which is the same box as the PRODUCT and
	   YouTube panels, so the tiles line up with the sections around them. */
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* The path the eye is meant to take, drawn behind the tiles: a U on its side,
   open to the left. It runs along the top row, turns down the right-hand end
   and comes back along the bottom row, which is the order the tiles are placed
   in. Ends at the centre of the first and last columns, so the line appears to
   start at 01 and finish at 08. */
.home .step-cards::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 12.5%;
	right: 12.5%;
	top: 25%;
	bottom: 25%;
	border: 10px solid #c9d4e2;
	border-left: 0;
	border-radius: 0 200px 200px 0;
}
.home .step-cards > [class*="col-"] {
	position: relative;
	z-index: 1;
}
.home .step-cards > [class*="col-"] {
	width: auto;
	max-width: none;
	padding: 0;
	margin: 0;
}
.home .step-cards > *:nth-child(5) { grid-column: 4; grid-row: 2; }
.home .step-cards > *:nth-child(6) { grid-column: 3; grid-row: 2; }
.home .step-cards > *:nth-child(7) { grid-column: 2; grid-row: 2; }
.home .step-cards > *:nth-child(8) { grid-column: 1; grid-row: 2; }

.home .step-cards .card {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	gap: 0;
	padding: 1rem .9rem;
	text-align: center;
}
.home .step-cards .step-figure {
	flex: 0 0 auto;
	padding: 0 0 .9rem;
}
.home .step-cards .step-icon { max-width: 150px; }
.home .step-cards .card-body {
	padding: 0;
	text-align: center;
}
.home .step-cards .card-title {
	font-size: 1.25rem;
	margin-bottom: .5rem;
}
.home .step-cards .card-text {
	font-size: 1rem;
	line-height: 1.7;
}

/* Two across on phones, and the clockwise placement is dropped - at this size
   it would only scramble the order. */
@media (max-width: 767px) {
	.home .step-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	/* Four rows of two - the U no longer describes the order, so it goes. */
	.home .step-cards::before { display: none; }
	.home .step-cards > *:nth-child(n) { grid-column: auto; grid-row: auto; }
	.home .step-cards .step-icon { max-width: 60px; }
	.home .step-cards .card-title { font-size: .88rem; }
	.home .step-cards .card-text { font-size: .74rem; }
}
.tire-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* body sets word-break: break-all for Japanese; in these narrow cards it split
   the English copy mid-word ("tire s", "st udless"). */
.tire-card__title,
.tire-card__text,
.tire-card__sizes li {
word-break: normal;
overflow-wrap: break-word;
}

/* .section_mvv paints a white panel. The 営業所 row and the rebuilt MVV block
   both use that class and both sit on the page's own background, so the panel
   only showed up as a hard white box behind them. */
.section_mvv {
background-color: transparent;
}
/* The old MVV markup indented its copy to clear the SVG headings; the new
   cards handle their own padding. */
.utj-mvv p,
.utj-mvv ul {
padding-left: 0;
margin-bottom: 0;
}

/* MVV is the first thing under the key visual, so the run-in is tightened:
   the hero's own 64px bottom margin plus the section's 4rem padding left about
   190px of empty page before the heading. */
.page-id-4018 .secondary-mv {
margin-bottom: 1.5rem;
}
.section.utj-mvv {
padding-top: 1rem;
padding-bottom: 2rem;
}
.utj-mvv__heading {
margin-top: 0;
margin-bottom: .35rem;
}
.utj-mvv__sub {
margin: 0 0 2.4rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.05rem;
letter-spacing: .18em;
color: #205392;
}

/* ---- Mission / Vision / Values (ja company) ----
   Was three SVG headings with the words drawn into them. Now real text, set
   like the rest of the site: Roboto Condensed labels, brand blue, one panel
   carrying the statement and one the supporting line. */
.utj-mvv__card {
height: 100%;
padding: 2.2rem 2rem;
border-radius: 18px;
background: #f1f3f6;
}
.utj-mvv__card--lead {
background: #205392;
color: #fff;
}
.utj-mvv__card--values {
background: #fff;
border: 2px solid #e3e7ed;
}
/* Filled badges. The outlined version sat too tight to the text - the letters
   touched the ring - so these are solid, with room around the word. The extra
   right padding balances the tracking, which otherwise leaves a gap after the
   last letter. */
.utj-mvv__label {
display: inline-block;
margin: 0 0 1.4rem;
padding: 0;
border: 0;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: .2em;
line-height: 1.15;
/* Plain text, no pill: the label takes the card's own colour. */
background: none;
color: #205392;
}
.utj-mvv__card--lead .utj-mvv__label,
.utj-mvv__card--vision .utj-mvv__label { color: #7fb2f0; }
.utj-mvv__statement {
margin: 0 0 1.1rem;
font-size: 1.9rem;
font-weight: 700;
line-height: 1.45;
letter-spacing: .01em;
word-break: normal;
overflow-wrap: break-word;
}
.utj-mvv__text {
margin: 0;
font-size: 1rem;
line-height: 1.9;
opacity: .92;
word-break: normal;
overflow-wrap: break-word;
}
.utj-mvv__card--vision {
background: #16273f;
color: #fff;
}
.utj-mvv__card--vision .utj-mvv__label { color: #7fb2f0; }

/* VALUE on white, so the nine tiles sit against the page rather than in a dark
   slab - Mission and Vision carry the colour above it. */
.utj-mvv__card--values {
position: relative;
overflow: hidden;
background: #fff;
border: 1px solid #e3e7ed;
color: #16273f;
padding: 2.6rem 2.4rem 2.8rem;
}
.utj-mvv__card--values > * {
position: relative;
z-index: 1;
}

.utj-mvv__vlead {
margin: -.5rem 0 2.2rem;
font-size: .95rem;
letter-spacing: .12em;
color: #6b7a8d;
}

/* Three across, three down - the nine words in a fixed block. */
.utj-mvv__values {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 991px) {
	.utj-mvv__values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
	.utj-mvv__values { grid-template-columns: 1fr; }
}

/* Each value is a tile with its number set large and faint behind the text -
   the number is decoration here, the words carry the meaning. */
.utj-mvv__value {
position: relative;
overflow: hidden;
padding: 1.5rem 1.5rem 1.6rem;
border-radius: 12px;
background: #f4f6f9;
border: 1px solid #e3e7ed;
word-break: normal;
overflow-wrap: break-word;
transition: box-shadow .2s ease, transform .2s ease;
}
.utj-mvv__value:hover {
box-shadow: rgba(22, 39, 63, .12) 0 8px 24px;
transform: translateY(-2px);
}
.utj-mvv__no {
position: absolute;
right: .6rem;
top: -.6rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 4.6rem;
font-weight: 700;
line-height: 1;
letter-spacing: -.02em;
color: rgba(32, 83, 146, .1);
pointer-events: none;
}
.utj-mvv__vtitle {
position: relative;
display: block;
font-size: 1.2rem;
font-weight: 700;
color: #16273f;
margin-bottom: .5rem;
padding-bottom: .5rem;
}
/* Short accent rule under each title, in the brand blue. */
.utj-mvv__vtitle::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 34px;
height: 3px;
border-radius: 2px;
background: #205392;
}
.utj-mvv__vtext {
display: block;
font-size: .92rem;
line-height: 1.9;
color: #46536a;
}

@media (prefers-reduced-motion: reduce) {
	.utj-mvv__value { transition: none; }
	.utj-mvv__value:hover { transform: none; }
}
@media (max-width: 767px) {
	.utj-mvv__card { padding: 1.6rem 1.3rem; }
	.utj-mvv__statement { font-size: 1.45rem; }
}

/* ---- SK株式会社について (ja home) ----
   Reuses .tire-card, but as a pair of link panels rather than product cards:
   the brand blue the YouTube panel uses, rounded, and closer to its heading. */
.utj-about h2 {
margin-bottom: 2rem;
}
.utj-about .tire-card {
background-color: #205392;
border-radius: 18px;
overflow: hidden;
}
.utj-about .tire-card__title {
background-color: transparent;
padding-top: 1.6rem;
}
.utj-about .tire-card__body {
padding-bottom: 1.8rem;
}
.tire-card__body {
display: flex;
flex-direction: column;
padding: 24px;
flex: 1;
}
.tire-card__text {
font-family: "Roboto", sans-serif;
font-size: 16px;
line-height: 1.6;
letter-spacing: .01em;
margin-bottom: 20px;
text-align: left;
}
.tire-card__sizes {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
padding: 0;
margin: 0 0 30px;
}
.tire-card__sizes li {
background: #fff;
color: #000;
padding: 3px 14px;
border-radius: 999px;
font-family: "Roboto Condensed", sans-serif;
font-size: 14px;
white-space: nowrap;
}
.tire-card__btn {
display: inline-block;
align-self: center;
margin-top: auto;
padding: 14px 48px;
background: #fff;
color: #000;
text-decoration: none;
font-family: "Roboto Condensed", sans-serif;
font-weight: 600;
letter-spacing: .05em;
position: relative;
}
.tire-card__btn::after {
content: "";
position: absolute;
top: 100%;
left: 5px;
width: 100%;
height: 6px;
background: rgba(0,0,0,0.3);
}
.tire-card__btn:hover {
transform: translateY(2px);
}
.tire-card__btn:hover::after {
top: calc(100% - 2px);
}



/* A panel on the same edges as .youtube_inner and the HOW IT WORKS columns,
   rather than a full-bleed strip. The photo used to sit on the section itself
   with a separate 50%-black overlay on ::before; both are on the container's
   ::before now, so the dim travels with the photo and the panel can round its
   corners without the overlay squaring them off again. */
.section_service{
    position: relative;
    padding: 0;
}
.section_service > .container{
    position: relative;
    padding: 4rem;
}
.section_service > .container::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--bs-gutter-x, 1.5rem) / 2);
    right: calc(var(--bs-gutter-x, 1.5rem) / 2);
    border-radius: 18px;
    background-image:
        linear-gradient(rgb(0 0 0 /.5), rgb(0 0 0 /.5)),
        url(images/bg_section_service.webp);
    background-size: auto, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
}
.section_service > .container > *{
    position: relative;
    z-index: 1;
}
/* body sets word-break: break-all for Japanese. In a half-width column it
   chopped the English copy mid-word ("contai ner", "sell s"). Same scoped
   override as the trust band. */
.section_service h2,
.section_service p,
.section_service li{
    word-break: normal;
    overflow-wrap: break-word;
}
.section_service h2,
.section_service p,
.section_service img{
  position: relative;
  z-index: 2;
}
.section_service h2{
  color: rgb(255 255 255 /1);
}
.section_service p{
  color: rgb(255 255 255 /.9);
}
.section_service p.lead{
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: clamp(1rem, 0.82rem + 0.91vw, 2.5rem);
}


.section_hiw_innner{
  margin: 0;
padding: 0;
}
/* No photo behind the flow any more: the two tinted panels carry the left/right
   split on their own, so a background image would only compete with them. */
.section_hiw_innner > .container{
position: relative;
padding-top: 1rem;
padding-bottom: 3rem;
}
/* Clears the panels before the READ MORE button. */
.section_hiw_innner .hiw_contents + .row {
margin-top: 2.5rem;
}


/* ---- HOW IT WORKS flow, built in markup ----
   Replaces the pair of outlined SVGs this section used to ship (hiw_01_xx.svg
   and its _sp variant). Those carried every step label as vector outlines with
   an empty alt, so the whole buying process was invisible to search engines and
   to anything reading the page as text - on the one section that answers "how
   do I actually buy from you". As markup it is also translatable and it scales
   without a second mobile asset.

   Laid out as two tinted panels either side of a gap, after the STEP diagram on
   oceanfreight.jp: the buyer's column on the left, ours on the right, each with
   its own track of nodes. The ten steps share one row grid, so a step on either
   side still sits below the step before it and the reading order is the real
   order of the transaction. */

.utj-flow {
	position: relative;
	/* No cap: .hiw_contents is the .col-12 content box, which is the same width
	   as .youtube_inner further down the page, so the two panels line up with
	   the YouTube panel without hardcoding a number. */
	max-width: none;
	margin: 0;
	font-family: 'Roboto Condensed', sans-serif;
	--utj-flow-gap: 40px;
	--utj-flow-track: 30px; /* track inset from a panel's inner edge */
	--utj-flow-headgap: 1.6rem; /* space under the pills; the tracks run up into it */
	--utj-flow-footgap: 1.4rem; /* space above DONE; the tracks run down into it */
}

/* The two panels. Drawn behind everything so the heading pills, the nodes and
   the labels can all sit on top without being nested inside them. */
.utj-flow__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 18px;
	overflow: hidden;
	z-index: 0;
}
.utj-flow__panel--you {
	left: 0;
	right: calc(50% + var(--utj-flow-gap) / 2);
	background: #e9f1fa;
}
.utj-flow__panel--utj {
	left: calc(50% + var(--utj-flow-gap) / 2);
	right: 0;
	background: #f1f2f4;
}

/* The tyre track used elsewhere on the site, as a watermark low in each panel.
   Its own artwork is already pale grey on transparent, so it only needs to be
   held back a little; the two are mirrored so the pair reads as one spread. */
.utj-flow__panel::after {
	content: "";
	position: absolute;
	right: -30px;
	bottom: -40px;
	width: 300px;
	height: 356px;
	background: url(images/tire-mark_01.webp) no-repeat right bottom;
	background-size: contain;
	opacity: .5;
	pointer-events: none;
}
.utj-flow__panel--you::after {
	right: auto;
	left: -30px;
	transform: scaleX(-1);
}

.utj-flow__heads {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--utj-flow-gap);
	padding: 2.2rem 0 var(--utj-flow-headgap);
}

.utj-flow__head {
	margin: 0 auto;
	padding: .55rem 1.8rem;
	border-radius: 999px;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	line-height: 1.25;
}
.utj-flow__head--you { background: #205392; color: #fff; }
.utj-flow__head--utj { background: #fff; border: 2px solid #205392; color: #16273f; }

/* Each pill moves to its own side so it meets the head of its track: YOU to
   the right of the buyer's panel, USED TIRE JAPAN to the left of ours. The
   pill ends just past the track rather than centred on it - the two tracks are
   only about 100px apart, so centred pills of this width would overlap in the
   gap. */
.utj-flow__head--you {
	justify-self: end;
	margin-right: calc(var(--utj-flow-track) - 14px);
}
.utj-flow__head--utj {
	justify-self: start;
	margin-left: calc(var(--utj-flow-track) - 14px);
}

/* The real lockup, not the words repeated. assets/images/utj.svg is drawn in
   white for the dark header and footer, so it is inverted to black here to sit
   on the pale panel. */
.utj-flow__head--utj img {
	display: block;
	width: auto;
	height: 1.5rem;
	margin: .15rem auto;
	filter: brightness(0);
}

.utj-flow__list {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0 0 1rem;
	list-style: none;
}

/* One track per panel, each set in from the panel's inner edge. Behind the
   steps: the list is a stacking context, so -1 keeps the tracks under the nodes
   while still painting above the panels. Without this the track covered the
   inner half of every node. */
.utj-flow__list::before,
.utj-flow__list::after {
	content: "";
	position: absolute;
	z-index: -1;
	/* Runs the full height of the flow: up into the gap under the heading pills
	   and down into the gap above DONE, so both ends meet a pill. */
	top: calc(-1 * var(--utj-flow-headgap));
	bottom: calc(-1 * var(--utj-flow-footgap));
	width: 6px;
	border-radius: 3px;
}
.utj-flow__list::before {
	right: calc(50% + var(--utj-flow-gap) / 2 + var(--utj-flow-track));
	background: #cfe0f2;
}
.utj-flow__list::after {
	left: calc(50% + var(--utj-flow-gap) / 2 + var(--utj-flow-track));
	background: #dcdee2;
}

.utj-flow__step {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--utj-flow-gap);
	align-items: center;
	min-height: 70px;
}

/* The node, on whichever track the step belongs to. A black ring rather than a
   filled dot - the same tyre mark the logo and the old artwork use. */
.utj-flow__step::before {
	content: "";
	position: absolute;
	top: 50%;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border: 8px solid #111;
	border-radius: 50%;
	background: #fff;
}
.utj-flow__step--you::before {
	right: calc(50% + var(--utj-flow-gap) / 2 + var(--utj-flow-track) - 12px);
}
.utj-flow__step--utj::before {
	left: calc(50% + var(--utj-flow-gap) / 2 + var(--utj-flow-track) - 12px);
}

.utj-flow__label {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.25;
}
.utj-flow__label--you {
	grid-column: 1;
	justify-self: end;
	text-align: right;
	padding-right: calc(var(--utj-flow-track) + 26px);
	color: #205392;
}
.utj-flow__label--utj {
	grid-column: 2;
	justify-self: start;
	text-align: left;
	padding-left: calc(var(--utj-flow-track) + 26px);
	color: #2b3442;
}

/* Closing pill. Centred on the whole flow rather than sitting inside the
   buyer's panel: the last step belongs to both sides. */
.utj-flow__done {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: .4rem 0 2.4rem;
	text-align: center;
}
.utj-flow__done span {
	display: inline-block;
	min-width: 300px;
	padding: .65rem 2.4rem;
	border-radius: 999px;
	background: #205392;
	color: #fff;
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: .06em;
}

/* One column on phones: the panels stack, each keeping its own track on the
   left, which is what the separate _sp artwork used to do. */
@media (max-width: 767px) {
	.utj-flow { --utj-flow-gap: 0px; --utj-flow-track: 22px; }

	.utj-flow__panel--you,
	.utj-flow__panel--utj { left: 0; right: 0; }
	/* Stacked, the two tints would fight; the panel tint is dropped and the
	   node colour carries which side a step belongs to. */
	.utj-flow__panel--utj { background: transparent; }

	.utj-flow__heads { grid-template-columns: 1fr; gap: 10px; padding: 1.4rem 16px 1rem; }
	.utj-flow__head { font-size: 1.05rem; width: 100%; }
	/* One column here, so there is no track to sit over. */
	.utj-flow__head--you,
	.utj-flow__head--utj {
		justify-self: stretch;
		margin-left: 0;
		margin-right: 0;
		transform: none;
	}
	.utj-flow__head--utj img { height: 1.25rem; }

	.utj-flow__list::before { right: auto; left: var(--utj-flow-track); width: 5px; }
	.utj-flow__list::after { display: none; }

	.utj-flow__step { grid-template-columns: 1fr; min-height: 54px; }
	.utj-flow__step--you::before,
	.utj-flow__step--utj::before {
		right: auto;
		left: calc(var(--utj-flow-track) - 9px);
		width: 21px; height: 21px; margin-top: -10px; border-width: 6px;
	}

	.utj-flow__label--you,
	.utj-flow__label--utj {
		grid-column: 1;
		justify-self: start;
		text-align: left;
		padding: 0 16px 0 calc(var(--utj-flow-track) + 26px);
		font-size: 1.15rem;
	}

	.utj-flow__done { padding-bottom: 1.6rem; }
	.utj-flow__done span { min-width: 0; width: calc(100% - 32px); padding: .55rem 1rem; font-size: 1.15rem; }
}

.section_hiw_innner ul{
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.section_hiw_innner ul li{
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.section_hiw_innner h3{
  display: block;
  margin: 0 0 30px;
  padding: .5rem;
  text-align: center;
  border: 1px solid #000;
}  
.hiw-1{
 color: #fff; 
}
.hiw-1 h3{
  color: #000;
  background-color: #fff;
  border: 1px solid #fff;
}
.section_hiw_innner ul.hiw_tire{
 margin: 75px 0 0;
}
.section_hiw_innner ul.hiw_tire li{
 margin:0 0 20px;
 line-height: 1;
}
.section_hiw_innner ul.hiw_tire img{
  filter: drop-shadow(-2px 0px 3px rgb(255 255 255 /.5));
}

.section_hiw_innner .hiw-1 ul li{
  position: relative;
  text-shadow: 1px 1px 6px rgb(0 0 0 /.5);
}

.section_hiw_innner .hiw-1 ul li,
.section_hiw_innner .hiw-2 ul li {
display: flex;
align-items: center;
}
.section_hiw_innner .hiw-1 ul li::before,
.section_hiw_innner .hiw-1 ul li::after,
.section_hiw_innner .hiw-2 ul li::before,
.section_hiw_innner .hiw-2 ul li::after {
content: "";
flex-grow: 1;
}
.section_hiw_innner .hiw-1 ul li::before{
border-top: 1px solid rgb(255 255 255 /0);
}
.section_hiw_innner .hiw-1 ul li::after {
border-top: 1px solid #fff;
}
.section_hiw_innner .hiw-2 ul li::before{
border-top: 1px solid #000;
}
.section_hiw_innner .hiw-2 ul li::after {
border-top: 1px solid rgb(255 255 255 /0);
}
.section_hiw_innner .hiw-1 ul li::before,
.section_hiw_innner .hiw-2 ul li::before{
margin-right: 1rem;
}
.section_hiw_innner .hiw-1 ul li::after,
.section_hiw_innner .hiw-2 ul li::after {
margin-left: 1rem;
}
.hiw-1 li:nth-child(1),
.hiw-1 li:nth-child(2),
.hiw-1 li:nth-child(4){
margin-bottom: 86px; 
}
.hiw-1 li:nth-child(3){
margin-bottom: 150px; 
}
.hiw-2 li:nth-child(1){
margin-top: 86px;
}
.hiw-2 li:nth-child(1),
.hiw-2 li:nth-child(2),
.hiw-2 li:nth-child(4){
margin-bottom: 88px; 
}
.section_hiw_innner{
  text-align: center;
}
.section_hiw_innner picture img{
  display: block;
  margin: 0 auto 2rem;
}

.done{
  margin: 0px 0px 50px 25px;
  text-align: center;
}
.done span{
  display: inline-block;
  padding: .25rem .5rem;
  color: #fff;
  background-color: #000;
}
.section_youtube{
  padding-bottom: 90px;
}
.youtube_inner{
    /* Was 6rem all round, which left the thumbnails floating in the middle of
       the panel. Tightened so they run closer to the edge. */
    padding: 2.5rem;
    /* Was #212519, an olive that matched nothing else. Same brand blue as the
       DONE pill in the flow above. */
    background-color: #205392;
    /* Same radius as the two flow panels above it. */
    border-radius: 18px;
}
.youtube_inner figure{
    margin: 0;
}
.youtube_inner figure img{
    margin-bottom: 10px;
    border-radius: 10px;
}
.youtube_inner figure{
    margin: 0;
}
.youtube_inner figcaption{
    margin: 0;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
}
@media(max-width:600px){
  .section_hiw_innner{
    background-size: auto 100%;
  }
  .youtube_inner {
  padding: 6rem 2rem;
  }
  .card_blog {
  flex: 0 0 100%;
  }
  .float-button__wrap {
  bottom: 20vh !important;
}
.home .contents{
  background-size: 50vw auto;
}
}

.loading-gallery{
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(4 ,1fr);
  gap: 30px;
}
.loading-comment0,
.loading-comment_top,
.loading-comment_bottom{
  font-family: 'Roboto Condensed', sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.23vw, 1.13rem);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .05em;
}
.loading-comment0{
  margin: 0 0 4rem;
}
.loading-comment_top{
    margin: 0 0 2rem;
}
.loading-comment_bottom{
    margin: 0 0 4rem;
}

.instagram-pt{  display: none;}

:lang(pt-PT-ao90) .instagram-all{  display: none;}
:lang(pt-PT-ao90) .instagram-pt{  display: block;}



.cta-section{
padding: 80px 0;
}
.dl_blog-contact{
display:grid;
grid-template-columns: 320px 1fr auto;
align-items:center;
background:#f5f5f5;
padding:48px 60px;
gap:60px;
font-family: 'Roboto Condensed', sans-serif;
}

.dl_blog-contact dt{
font-size:clamp(1rem, 0.82rem + 0.91vw, 2rem);
font-weight:700;
line-height:1.2;
border-right:3px solid #111;
padding-right:60px;
}

.dl_blog-contact dd{
margin:0;
}
.dl_blog-contact dd:first-of-type{
font-size:1rem;
font-weight:500;
line-height:1.5;
}



@media (max-width:834px){

	.dl_blog-contact{
		grid-template-columns:1fr;
		padding:40px 30px;
		gap:32px;
		text-align:center;
	}

	.dl_blog-contact dt{
		border-right:none;
		border-bottom:3px solid #111;
		padding:0 0 24px;
		font-size:3rem;
	}

	.dl_blog-contact .btn-readmore{
		width:100%;
		max-width:360px;
		margin:auto;
	}
}
/* ==========================================================================
   Footer  (2026-08)

   Three columns: company details left, the logo block centred over the tyre
   graphic's hub, the menu right. The menu grew to 11 items when the product
   category pages were added, so it no longer fits on one centred row.

   Tuning: only the custom properties below need changing.
     --footer-width     width of the row; wider than the .container, capped so
                        it never reaches the window edge
     --footer-shift     sideways nudge of the whole row
     --footer-logo-drop lowers the logo column so the LOGO - not the whole
                        stack - sits on the hub's centre line. It equals
                        (icon margin + icon height + copyright margin +
                        copyright height) / 2, so it moves with those.
     --footer-logo-x/y  fine nudge of the logo alone; the hub is photographed
                        slightly off centre.
   ========================================================================== */

/* The tyre PNG's own backdrop is pure black; the wrapper was #101010, so the
   edge of the image showed as a seam wherever it did not cover the footer. */
#wrapper-footer {
	background-color: #000;
}

.footer {
	padding: 70px 0 80px;
}

/* Language switcher is absolutely positioned against #wrapper-footer, so this
   is measured from the top of the black band. */
@media (min-width: 901px) {
	#language-switcher {
		top: 30px;
	}
}

.footer-main {
	/* Negative margins widen the row past the Bootstrap .container (1140px).
	   vw is deliberately avoided: it counts the scrollbar, which throws the
	   row a few pixels off centre. */
	/* Widen past the .container, but never past the window. Deriving the bleed
	   from a fixed container width does not work: Bootstrap's .container is
	   1140px at xl and jumps to 1320px at xxl (>=1400px), so a bleed tuned for
	   1140 ran the company column off the left edge on a 1440px screen. Setting
	   an explicit width and centring it on the container instead is correct at
	   every breakpoint - 100% here is whatever the container currently is, so
	   the margin goes negative by exactly the right amount. */
	--footer-width: min(100vw - 24px, 1400px);
	--footer-shift: 0px;

	display: grid;
	/* Equal 1fr side columns keep the centre column on the page's centre line
	   even in languages where the footer menu is empty (ja). */
	grid-template-columns: 1fr auto 1fr;
	gap: 40px;
	align-items: center;

	width: var(--footer-width);
	max-width: none;
	margin-left: calc((100% - var(--footer-width)) / 2 + var(--footer-shift));
	margin-right: 0;
	/* Clears the absolutely positioned #language-switcher. */
	margin-top: 54px;
	margin-bottom: 60px;
	padding: 8px 0 0;
}

.footer-company { justify-self: start; }
.footer-menu    { justify-self: end; }

/* ---- Left: company name and address ---- */

.footer-company__name {
	margin: 0 0 14px;
	line-height: 1;
}

.footer-company__name img {
	display: block;
	height: 28px;
	width: auto;
}

.footer-company__name::after {
	content: "";
	display: block;
	width: 34px;
	height: 2px;
	margin-top: 14px;
	background: rgba(255, 255, 255, .5);
}

.footer-company__address {
	margin: 0;
	font-style: normal;
	font-size: 13px;
	line-height: 2;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .68);
}

/* ---- Centre: logo in the hub, icons and copyright below ---- */

.footer-center {
	--footer-logo-drop: 78px;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
	transform: translateY(var(--footer-logo-drop));
}

/* Overrides the older `.footer h3 { margin: 0 auto 46px }`. */
.footer-center h3 {
	--footer-logo-x: 12px;
	--footer-logo-y: 24px;

	margin: 0;
	line-height: 0;
	/* Transform only, so the icons and copyright below keep their positions. */
	transform: translate(var(--footer-logo-x), var(--footer-logo-y));
}

.footer-center h3 img {
	display: block;
	width: min(320px, 100%);
	height: auto;
	background: none;
}

.footer-center .footer_sns {
	width: 100%;
	margin-top: 95px;
}

.footer-center .copyright {
	margin: 16px 0 0;
}

/* The social list keeps the browser's default ul padding, which pushes the
   icons off true centre. */
.footer_sns ul {
	padding-left: 0;
	margin-left: auto;
	margin-right: auto;
}

.footer-center .footer_sns ul {
	margin-bottom: 0;
	gap: 22px;
}

/* ---- Right: two-column menu ---- */

/* Multi-column flow rather than grid, so it adapts to the differing item
   counts across languages (EN has 11, FR 8, ES 8). */
.footer-main .footer-menu ul.menu {
	display: block;
	columns: 2;
	/* Capped and tightened so the menu clears the tyre graphic. The tyre is a
	   1600px image centred on the window, and its disc reaches about 310px
	   either side of centre. The menu is right-aligned inside .footer-main, so
	   its left edge sits at (--footer-width / 2 - this width) from centre -
	   360px keeps that clear of the disc once the row reaches its full width. */
	width: 360px;
	column-gap: 24px;
	margin: 0;
	padding: 0;
}

.footer-main .footer-menu ul.menu li {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: clamp(13px, 1.4vw, 15px);
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.3;
	margin-bottom: 12px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.footer-main .footer-menu ul.menu li a {
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
	transition: color .2s ease;
}

.footer-main .footer-menu ul.menu li a:hover,
.footer-main .footer-menu ul.menu li a:focus-visible {
	color: #fff;
}

/* Japanese menu labels are not uppercase words - keep them as written. */
.footer-main .footer-menu ul.menu li:lang(ja) {
	font-family: inherit;
	text-transform: none;
	letter-spacing: .04em;
}

/* ---- Narrow screens: single column, no overlaying the tyre ---- */

@media (max-width: 1240px) {
	.footer-main {
		/* 100% is the .container, so the row stops widening past it. */
		--footer-width: 100%;
		--footer-shift: 0px;
	}
}

@media (max-width: 900px) {
	/* The logo block comes first here, where the earlier rule parks
	   #language-switcher at top:120px - move the switcher into its own band. */
	#language-switcher { top: 24px; }

	.footer-main {
		grid-template-columns: 1fr;
		justify-content: start;
		gap: 32px;
		width: min(1360px, 88vw);
		margin-top: 84px;
		padding: 8px 70px 0 0;
	}

	.footer-company,
	.footer-menu { justify-self: start; }

	.footer-center {
		--footer-logo-drop: 0px;
		grid-row: 1;
		transform: none;
	}

	.footer-center h3 {
		--footer-logo-x: 0px;
		--footer-logo-y: 0px;
	}

	.footer-center .footer_sns { margin-top: 24px; }
	.footer-center .copyright { margin-top: 14px; }
}

@media (max-width: 600px) {
	/* Overrides the two-column grid the earlier rule sets at this width. */
	.footer-main .footer-menu ul.menu {
		display: block;
		grid-template-columns: none;
		margin-right: 0;
		column-gap: 24px;
	}
}

@media (max-width: 400px) {
	.footer-main .footer-menu ul.menu {
		columns: 1;
	}
}

/* ==========================================================================
   Burger (offcanvas) menu  (2026-08)
   #main-nav has no navbar-expand-* class, so the offcanvas panel is the
   navigation at every width.

   The Product submenu used to live here as a dropdown held open with CSS.
   The toggle stayed live underneath and flickered on press, so the five tyre
   pages were promoted to top-level menu items instead (see
   deploy/flatten-product-menu.php). There is no submenu left to style: every
   row in the panel is a plain .nav-link and picks up the theme's own rules.
   ========================================================================== */

#navbarNavOffcanvas .offcanvas-body {
	padding-top: 0;
}

/* Panel background.

   bg_we-can.webp is 1600x1066 stored in 81KB - little detail to begin with -
   and `cover` on a panel this narrow and tall enlarged it well past that,
   which is what read as smeared. brightness(150%) then sat on the element
   rather than the image, so it lifted the menu text along with the photo and
   flattened the contrast of both.

   The yard photo is 1920x1440 at 318KB: on a ~420x1200 panel `cover` scales
   it down rather than up, so it stays sharp even on a 2x screen. A dark wash
   over it carries the white type, which is what the filter was standing in
   for. The ID beats both copies of the .offcanvas-end rule, which live in
   different media queries.

   Opacity goes to 1 on open: at .9 the page showed through the panel and took
   the edge off the text as well as the photo. */
#navbarNavOffcanvas.offcanvas-end {
	background-image:
		linear-gradient(180deg, rgba(14,24,40,.90) 0%, rgba(14,24,40,.72) 42%, rgba(14,24,40,.93) 100%),
		url(images/bg_section_service.webp);
	background-repeat: no-repeat, no-repeat;
	background-position: center center, center bottom;
	background-size: cover, cover;
	filter: none;
}

#navbarNavOffcanvas.offcanvas.show {
	opacity: 1;
}

/* The list carries Bootstrap's flex-grow-1 and justify-content-end, so it
   stretched to the height of the panel rather than being sized by its own
   content. */
#navbarNavOffcanvas #main-menu {
	flex-grow: 0 !important;
	justify-content: flex-start !important;
}

/* The last item sat about 50px lower than the rest, opening a gap between
   Blog and Contact. Rather than chase which of the theme's several .nav-item
   rules put it there, the spacing is set once here: nothing on the li, all of
   it on the link, so every row in the panel is the same height and the gaps
   between them are equal. */
#navbarNavOffcanvas #main-menu > .nav-item {
	margin: 0 !important;
	padding: 0 !important;
}

#navbarNavOffcanvas #main-menu > .nav-item > .nav-link {
	padding: .55em .4em !important;
}


/* Card images on the product / how-it-works pages come from photos with
   different aspect ratios, so the cards used to end at different heights and
   the titles did not line up. Crop them all to a common 4:3 frame. */
.section .card > .card-img-top {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

/* Full product name under the abbreviation in the card headings. */
.section .card .card-title__full {
	display: block;
	margin-top: .35em;
	font-size: .62em;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: none;
	color: #5c6672;
}

/* Full product name under the abbreviation on the home page tire cards. */
.tire-card__title .tire-card__full {
	display: block;
	margin-top: .4em;
	font-size: .58em;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: none;
	opacity: .75;
}

/* ---- Category page: brand strip, figures, FAQ accordion ---- */

.utj-brandstrip {
	overflow-x: auto;
	padding: 1rem 0;
}

.utj-brandstrip img {
	display: block;
	max-width: none;
	width: 100%;
	min-width: 900px;
	height: auto;
}

.utj-figure {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
}

/* Native <details> accordion: no JavaScript, and the answers stay in the DOM
   so search engines and the FAQ structured data still read them. */
.utj-accordion details {
	border-bottom: 1px solid #ddd;
}

.utj-accordion summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.4;
}

.utj-accordion summary::-webkit-details-marker { display: none; }

.utj-accordion summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: .45em;
	border-right: 2px solid #205392;
	border-bottom: 2px solid #205392;
	transform: rotate(45deg);
	transition: transform .25s ease;
}

.utj-accordion details[open] summary::after {
	transform: rotate(-135deg);
}

.utj-accordion details > *:not(summary) {
	margin: 0 0 1.2rem;
	color: #5f5f5f;
}

.utj-accordion summary:hover,
.utj-accordion summary:focus-visible {
	color: #205392;
}

@media (prefers-reduced-motion: reduce) {
	.utj-accordion summary::after { transition: none; }
}

/* ---- Whole-card links ---- */

/* .stretched-link needs a positioned ancestor; Bootstrap's .card supplies it,
   but state it here so the hit area cannot silently collapse if the card
   styling changes. */
.section .card:has(.stretched-link) {
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease;
}

.section .card:has(.stretched-link):hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.section .card .stretched-link {
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.section .card:has(.stretched-link) { transition: none; }
	.section .card:has(.stretched-link):hover { transform: none; }
}

/* ---- Brand logos: four on the first row, the rest centred below ---- */

.utj-brands {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 28px 40px;
	list-style: none;
	margin: 0;
	padding: 1rem 0 0;
}

/* A fixed quarter-width forces exactly four per row, so the remaining three
   wrap and are centred by justify-content. */
.utj-brands li {
	flex: 0 0 calc(25% - 30px);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.utj-brands img {
	max-width: 100%;
	max-height: 42px;
	width: auto;
	height: auto;
}

@media (max-width: 768px) {
	.utj-brands {
		gap: 20px 24px;
	}
	.utj-brands li {
		flex: 0 0 calc(33.333% - 16px);
	}
	.utj-brands img {
		max-height: 32px;
	}
}

/* Every logo gets an identical box and is scaled to fit inside it, so wide
   wordmarks and square marks read at the same visual weight. */
.utj-brands li {
	height: 56px;
}

.utj-brands img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 768px) {
	.utj-brands li { height: 40px; }
	.utj-brands img { max-height: none; }
}

/* The Continental PNG carries more transparent padding than the other logos,
   so it lands visually smaller in an equal box. Scale it up without changing
   the box, keeping the grid alignment intact. */
.utj-brands img[alt="Continental"] {
	transform: scale(1.2);
}

/* How it Works: drop the section background panels so the page reads as one
   continuous white surface. .section_step was #f2f2f2 and .section_incoterms
   sat on top of it as a white block, which showed up as a hard-edged box. */
.section_step {
	background: transparent;
}

.section_incoterms {
	background-color: transparent;
}

/* The SWIFT block carried a Bootstrap bg-info-subtle panel, which was the last
   coloured band left on How it Works after the STEP and Incoterms panels came
   off. Flatten it too so the page is one continuous surface. */
.section_swift.bg-info-subtle {
	background-color: transparent !important;
}

/* The blue panel is .swift-grid's own background, not the section's. */
.swift-grid {
	background-color: transparent;
}

/* Text-based SWIFT flow, used where no localised diagram artwork exists.
   The original SVG has every word outlined as paths, so it cannot be
   translated; this version is plain markup. */
.utj-swift-flow {
	max-width: 960px;
	margin: 0 auto;
}

.utj-swift-flow__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 8px;
}

.utj-swift-flow__node {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .7em 1.1em;
	border: 2px solid #1b2a4a;
	border-radius: 999px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: clamp(13px, 1.1vw, 16px);
	line-height: 1.2;
	color: #1b2a4a;
	background: #fff;
	white-space: nowrap;
}

.utj-swift-flow__node--you,
.utj-swift-flow__node--utj {
	background: #1b2a4a;
	color: #fff;
}

.utj-swift-flow__node--swift {
	border-width: 3px;
	letter-spacing: .06em;
}

.utj-swift-flow__arrow {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 10px solid #5a6b86;
}

.utj-swift-flow__note {
	margin: 1.6rem auto 0;
	max-width: 60ch;
	text-align: center;
	color: #5f5f5f;
}

@media (max-width: 640px) {
	.utj-swift-flow__row {
		flex-direction: column;
	}
	.utj-swift-flow__arrow {
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 10px solid #5a6b86;
		border-bottom: 0;
	}
}

/* ---- Home page trust band: icon cards ---- */

/* .home .section is 8rem top and bottom, so this band and the TYPE OF TIRES
   heading below it were separated by 16rem of empty page. Tightened from below
   only - the space above still separates the band from the key visual. */
.home .section.utj-trust {
	padding-bottom: 3rem;
}

/* body sets word-break: break-all, which suits Japanese but chops Latin words
   mid-word - "Wolof" became "Wol of" and the Spanish heading split "LICENCIA".
   The band is narrow-columned and now sets larger text, so it hit that on every
   European language. Scoped here rather than fixed on body: the rest of the
   site is laid out around the global setting. */
.utj-trust,
.utj-trust h2,
.utj-trust p {
	word-break: normal;
	overflow-wrap: break-word;
}

.utj-trust__grid {
	text-align: center;
}

.utj-trust__card {
	height: 100%;
	padding: 1.75rem 1.25rem;
	border: 1px solid rgba(32, 83, 146, .16);
	border-radius: 6px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: box-shadow .2s ease, transform .2s ease;
}

.utj-trust__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .07);
}

.utj-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: rgba(32, 83, 146, .08);
	color: #205392;
}

.utj-trust__icon svg {
	width: 26px;
	height: 26px;
}

.utj-trust__num {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: clamp(1.9rem, 2.6vw, 2.4rem);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: .02em;
	color: #205392;
	margin: 0 0 .5rem;
}

/* The lead line under the heading. Sized here rather than left to .section p
   so it stays in step with the card text below it. */
.utj-trust h2 + p {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.utj-trust__label {
	/* Was .875rem. Everything below the heading read small next to the big
	   figures, and it is the part carrying the actual credentials - the
	   translated labels run longer than the English, so they need the room. */
	font-size: 1rem;
	line-height: 1.65;
	margin: 0;
	opacity: .85;
}

.utj-trust__more {
	margin: .9rem 0 0;
	font-size: .9375rem;
}

.utj-trust__more a {
	color: #205392;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.utj-trust__ids {
	font-size: .9375rem;
	opacity: .8;
	margin-top: 1.5em;
}

@media (max-width: 767px) {
	.utj-trust__card { padding: 1.25rem .9rem; }
	.utj-trust__icon { width: 42px; height: 42px; margin-bottom: .7rem; }
	.utj-trust__icon svg { width: 21px; height: 21px; }
	.utj-trust h2 + p { font-size: 1rem; }
	.utj-trust__label { font-size: .9rem; }
	.utj-trust__ids { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
	.utj-trust__card { transition: none; }
	.utj-trust__card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Leaflet maps and the fixed header

   Leaflet numbers its own layers up to z-index 1000 (.leaflet-top and
   .leaflet-bottom), while #wrapper-navbar sits at 3. .leaflet-container is
   position:relative with z-index auto, so it forms no stacking context and
   those numbers compete with the header directly - the map paints straight
   over the logo and the menu.

   z-index: 0 makes the container a stacking context, which confines every
   value Leaflet sets inside it. The header keeps its 3 and stays on top, and
   nothing else on the page has to move.
   -------------------------------------------------------------------------- */
.leaflet-container {
position: relative;
z-index: 0;
}


/* --------------------------------------------------------------------------
   Destination pages
   /used-tires-japan-to-… and /pneus-occasion-japon-…

   The layout follows the group's freight site (hub.oceanfreight.jp/routes/):
   a hero with the title over a gradient, a strip of figures, then the body as
   bordered white cards rather than one long column.

   What is different here is the accent. That site marks headings with an
   orange bar; this one is a tire exporter, so the marker is a black tread
   block and the figures sit on a faint tire-mark. Same structure, own subject.
   -------------------------------------------------------------------------- */


.utj-dest {
--dest-navy: #16273f;
--dest-accent: #205392;
--dest-border: #dfe4ea;
--dest-radius: 12px;
--dest-ink: #3d4753;
margin: 0;
padding: 0 0 4rem;
word-break: normal;
overflow-wrap: break-word;
}

/* --- hero ---------------------------------------------------------------- */
/* Sits under the sub line, on the same gradient the title uses for contrast,
   so it needs no background of its own. Only ever populated on destination
   pages - see secondary-page.php - so this never shows on the rest of the site. */
.utj-dest-breadcrumb {
position: relative;
z-index: 1;
display: block;
margin: 1rem 0 0;
font-family: 'Noto Sans JP', sans-serif;
font-size: .8rem;
letter-spacing: .02em;
color: rgba(255,255,255,.68);
text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.utj-dest-breadcrumb a { color: rgba(255,255,255,.86); text-decoration: none; }
.utj-dest-breadcrumb a:hover { color: #fff; text-decoration: underline; }
/* Several pages carry their own inline <style> in post_content with
   a:link{color:#205392} - same specificity as the rule above (0,1,1) but later
   in the document, so it won. The breadcrumb's "ホーム" was rendering in dark
   brand blue on the dark hero photo and was effectively unreadable. Stated at
   three classes so the page-level block cannot outrank it. */
.secondary-mv .utj-dest-breadcrumb a:link,
.secondary-mv .utj-dest-breadcrumb a:visited {
color: rgba(255,255,255,.86);
border-bottom: 0;
background-color: transparent;
}
.secondary-mv .utj-dest-breadcrumb a:hover { color: #fff; border-bottom: 0; }
.utj-dest-breadcrumb__sep { margin: 0 .5em; opacity: .6; }

.secondary-mv h1 {
position: relative;
z-index: 1;
max-width: 22ch;
margin: 0;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: clamp(1.7rem, 1.05rem + 2.2vw, 3rem);
line-height: 1.24;
text-align: left;
text-shadow: 0 2px 14px rgba(0,0,0,.32);
word-break: normal;
overflow-wrap: break-word;
}

.secondary-mv__sub strong { color: #fff; font-weight: 700; }

/* --- lead ---------------------------------------------------------------- */

.utj-dest-lead { margin: 0 0 2rem; }
.utj-dest-lead p {
max-width: 68ch;
margin: 0 0 .8rem;
font-size: 1.0625rem;
line-height: 1.9;
color: var(--dest-ink);
}
.utj-dest-lead p:last-child { margin-bottom: 0; }

/* --- the figures --------------------------------------------------------- */

.utj-dest-stats {
position: relative;
display: grid;
/* Was a fixed four columns, which broke when LTR was added as a fifth stat.
   auto-fit lets the row hold as many as will sit at a readable width and wrap
   the rest, so the count can change without touching this again. */
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
margin: 0 0 2rem;
padding: 1.6rem;
overflow: hidden;
background-color: #f4f7f9;
background-image: url(images/tire-mark_01.webp);
background-position: right -60px bottom -40px;
background-repeat: no-repeat;
background-size: 320px auto;
border: 1px solid var(--dest-border);
border-radius: var(--dest-radius);
}
.utj-dest-stat {
position: relative;
padding: .2rem .4rem;
}
.utj-dest-stat + .utj-dest-stat {
border-left: 1px solid var(--dest-border);
padding-left: 1.2rem;
}
.utj-dest-stat__k {
display: block;
margin-bottom: .4rem;
font-size: .78rem;
font-weight: 600;
letter-spacing: .04em;
color: #6b7885;
}
.utj-dest-stat__v {
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.9rem;
font-weight: 700;
line-height: 1.1;
color: var(--dest-navy);
}
.utj-dest-stat__v small {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.45;
color: var(--dest-navy);
}
.utj-dest-stat__sub {
display: block;
margin-top: .35rem;
font-size: .78rem;
line-height: 1.5;
color: #6b7885;
}

/* --- the one fact that decides whether an order is possible -------------- */

.utj-dest-note {
margin: 0 0 2rem;
padding: 1.5rem 1.6rem;
background-color: #fff;
border: 1px solid var(--dest-border);
border-left: 6px solid #16273f;
border-radius: 0 var(--dest-radius) var(--dest-radius) 0;
box-shadow: rgba(149,157,165,.14) 0 6px 18px;
}
.utj-dest-note p { margin-bottom: .8rem; line-height: 1.85; }
.utj-dest-note p:last-child { margin-bottom: 0; }

/* --- body cards ---------------------------------------------------------- */

.utj-dest-block {
margin: 0 0 1.4rem;
padding: 1.8rem 1.9rem;
background-color: #fff;
border: 1px solid var(--dest-border);
border-radius: var(--dest-radius);
}
.utj-dest-block:last-child { margin-bottom: 0; }
.utj-dest-block p,
.utj-dest-block li { line-height: 1.9; color: var(--dest-ink); }
.utj-dest-block ul { padding-left: 1.2rem; }
.utj-dest-block li { margin-bottom: .5rem; }

/* The bar is a tread block, not a rule. Rounded on the short sides only, so
   it reads as a piece of tread rather than a generic accent. */
.utj-dest-h2 {
display: flex;
align-items: center;
gap: .75rem;
margin: 0 0 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.5;
color: var(--dest-navy);
text-align: left;
}
.utj-dest-h2::before {
content: "";
flex-shrink: 0;
width: 7px;
height: 24px;
border-radius: 3px;
background-color: #16273f;
box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(22,39,63,.18);
}

/* --- figure and map ------------------------------------------------------ */

.utj-dest-fig {
margin: 0;
overflow: hidden;
border-radius: 10px;
border: 1px solid var(--dest-border);
}
.utj-dest-fig img { display: block; width: 100%; height: auto; }
.utj-dest-fig figcaption {
padding: .7rem .9rem;
font-size: .82rem;
line-height: 1.6;
color: #6b7885;
background-color: #f4f7f9;
}

/* A 2x2 set of real photos in the space one figure used to fill - each tile
   smaller than the old single image, cropped square so mixed portrait/
   landscape source photos still line up. One caption serves the whole set. */
.utj-dest-gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .6rem;
}
.utj-dest-gallery figure {
margin: 0;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 8px;
border: 1px solid var(--dest-border);
}
.utj-dest-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.utj-dest-gallery figcaption {
grid-column: 1 / -1;
margin-top: .2rem;
font-size: .82rem;
line-height: 1.6;
color: #6b7885;
}

/* Leaflet numbers its panes up to 1000, well above the fixed header. z-index 0
   makes this a stacking context so those numbers stay inside the map. */
.utj-dest-map {
position: relative;
z-index: 0;
margin: 1.2rem 0 0;
overflow: hidden;
border-radius: 10px;
border: 1px solid var(--dest-border);
}

/* --- closing call to action ---------------------------------------------- */

.utj-dest-cta {
margin: 2rem 0 0;
padding: 2.2rem 2rem;
text-align: center;
color: #fff;
background: linear-gradient(100deg, #25406a 0%, #1b3054 55%, #16273f 100%);
border-radius: var(--dest-radius);
}
.utj-dest-cta h2 {
margin: 0 0 .6rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.6rem;
font-weight: 700;
color: #fff;
}
.utj-dest-cta p { margin: 0 auto 1.4rem; max-width: 60ch; line-height: 1.85; color: rgba(255,255,255,.86); }
.utj-dest-cta .btn {
padding: .8rem 2.4rem;
font-weight: 700;
color: #16273f;
background-color: #fff;
border-color: #fff;
border-radius: 100px;
}
.utj-dest-cta .btn:hover { color: #fff; background-color: transparent; border-color: #fff; }
.utj-dest-cta a:not(.btn) { color: #fff; text-decoration: underline; }

/* --- destination index (parent page) cards ------------------------------- */

.utj-dest-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.utj-dest-card {
display: block;
padding: 1.1rem 1.3rem;
background-color: #f9fafb;
border: 1px solid var(--dest-border);
border-radius: 8px;
text-decoration: none;
transition: border-color .15s, background-color .15s;
}
.utj-dest-card:hover { border-color: var(--dest-accent); background-color: #fff; }
.utj-dest-card__name {
display: block;
margin-bottom: .3rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--dest-navy);
}
.utj-dest-card__sub { display: block; font-size: .92rem; line-height: 1.6; color: var(--dest-ink); }

@media (max-width: 991px) {
.utj-dest-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.utj-dest-stat + .utj-dest-stat { border-left: 0; padding-left: .4rem; }
.utj-dest-stat:nth-child(n+3) { border-top: 1px solid var(--dest-border); padding-top: 1.1rem; }
}
@media (max-width: 575px) {
.utj-dest-block { padding: 1.4rem 1.2rem; }
.utj-dest-stat__v { font-size: 1.6rem; }
}

/* --- label/value table (company page) ------------------------------------
   The company page's profile used to be a bare <dl> with no border, no row
   separation - oceanfreight.jp's equivalent page is a proper table with a
   border-bottom under every row. This is that, built on the same --dest-*
   variables as the rest of .utj-dest rather than new colours, so it sits
   next to .utj-dest-block without looking like a different component. */

.utj-dest-table {
width: 100%;
border-collapse: collapse;
}
.utj-dest-table th,
.utj-dest-table td {
padding: .9rem 0;
text-align: left;
font-weight: 400;
line-height: 1.85;
color: var(--dest-ink);
border-bottom: 1px solid var(--dest-border);
vertical-align: top;
}
.utj-dest-table th {
width: 11rem;
padding-right: 1.5rem;
font-weight: 700;
color: var(--dest-navy);
white-space: nowrap;
}
.utj-dest-table tr:last-child th,
.utj-dest-table tr:last-child td {
border-bottom: 0;
}
.utj-dest-table td a { color: var(--dest-accent); }
@media (max-width: 575px) {
.utj-dest-table th,
.utj-dest-table td {
display: block;
width: auto;
white-space: normal;
padding: 0;
border-bottom: 0;
}
.utj-dest-table th {
margin-top: 1.2rem;
padding-bottom: .3rem;
}
.utj-dest-table tr {
display: block;
padding-bottom: .6rem;
border-bottom: 1px solid var(--dest-border);
}
.utj-dest-table tr:first-child th { margin-top: 0; }
}

/* --- company/about pages: match oceanfreight.jp's /company/ type scale ---
   The .utj-dest-* family above uses the larger type the destination guides
   were designed with. On request the company page itself follows
   oceanfreight's actual sizes instead (.route-h2 / .route-block p /
   .route-table / .route-linkcard / .route-finalcta in oceanfreight.jp's
   theme CSS), so everything here is scoped to the five language company/about
   pages' own body classes (.company=ja /company/, .about=en /about/,
   .page-id-4067=es /about-es/, .page-id-4093=fr /qui-sommes-nous/,
   .page-id-6195=pt /about-us/ - this theme adds a page-id-N body class per
   post rather than a shared one for these, unlike .company/.about) rather
   than changed on the shared .utj-dest-* rules themselves - the destination
   guide pages keep their own scale untouched. */

/* ".page .section h2{font-size:3rem}" (this theme's generic page-heading
   rule, up near the top of this file) beats a plain ".company .utj-dest-h2"
   on specificity (0,2,1 vs 0,2,0) because this page's post type is "page" -
   the destination guides are a custom post type with no ".page" body class,
   so they never hit that rule and never needed this extra .section. */
.company .section .utj-dest-h2,
.about .section .utj-dest-h2,
.page-id-4067 .section .utj-dest-h2,
.page-id-4093 .section .utj-dest-h2,
.o-kompanii .section .utj-dest-h2,
.page-id-6195 .section .utj-dest-h2 {
font-size: 1.22rem;
margin-bottom: 14px;
line-height: 1.5;
}
.company .utj-dest-block,
.about .utj-dest-block,
.page-id-4067 .utj-dest-block,
.page-id-4093 .utj-dest-block,
.o-kompanii .utj-dest-block,
.page-id-6195 .utj-dest-block { padding: 28px 30px; margin-bottom: 22px; }
.company .utj-dest-block p,
.about .utj-dest-block p,
.page-id-4067 .utj-dest-block p,
.page-id-4093 .utj-dest-block p,
.o-kompanii .utj-dest-block p,
.page-id-6195 .utj-dest-block p { font-size: 1rem; line-height: 2; margin-bottom: 12px; }
.company .utj-dest-block p:last-child,
.about .utj-dest-block p:last-child,
.page-id-4067 .utj-dest-block p:last-child,
.page-id-4093 .utj-dest-block p:last-child,
.o-kompanii .utj-dest-block p:last-child,
.page-id-6195 .utj-dest-block p:last-child { margin-bottom: 0; }

.company .utj-dest-table,
.about .utj-dest-table,
.page-id-4067 .utj-dest-table,
.page-id-4093 .utj-dest-table,
.o-kompanii .utj-dest-table,
.page-id-6195 .utj-dest-table { font-size: .98rem; margin: 8px 0 14px; }
.company .utj-dest-table th,
.about .utj-dest-table th,
.page-id-4067 .utj-dest-table th,
.page-id-4093 .utj-dest-table th,
.o-kompanii .utj-dest-table th,
.page-id-6195 .utj-dest-table th,
.company .utj-dest-table td,
.about .utj-dest-table td,
.page-id-4067 .utj-dest-table td,
.page-id-4093 .utj-dest-table td,
.o-kompanii .utj-dest-table td,
.page-id-6195 .utj-dest-table td {
padding: 11px 14px;
line-height: 1.7;
border: 1px solid var(--dest-border);
border-bottom: 1px solid var(--dest-border);
}
.company .utj-dest-table th,
.about .utj-dest-table th,
.page-id-4067 .utj-dest-table th,
.page-id-4093 .utj-dest-table th,
.o-kompanii .utj-dest-table th,
.page-id-6195 .utj-dest-table th {
width: 38%;
background: #f4f7f9;
white-space: normal;
}
/* .utj-dest-table tr:last-child th/td zeroes border-bottom (0,2,2) - meant
   for the borderless route-table look elsewhere, but it outranks the plain
   border rule above (0,2,1) and left the last row of every table on this
   page looking like its bottom line had been erased. */
.company .utj-dest-table tr:last-child th,
.about .utj-dest-table tr:last-child th,
.page-id-4067 .utj-dest-table tr:last-child th,
.page-id-4093 .utj-dest-table tr:last-child th,
.o-kompanii .utj-dest-table tr:last-child th,
.page-id-6195 .utj-dest-table tr:last-child th,
.company .utj-dest-table tr:last-child td,
.about .utj-dest-table tr:last-child td,
.page-id-4067 .utj-dest-table tr:last-child td,
.page-id-4093 .utj-dest-table tr:last-child td,
.o-kompanii .utj-dest-table tr:last-child td,
.page-id-6195 .utj-dest-table tr:last-child td {
border-bottom: 1px solid var(--dest-border);
}
@media (max-width: 575px) {
.company .utj-dest-table th,
.about .utj-dest-table th,
.page-id-4067 .utj-dest-table th,
.page-id-4093 .utj-dest-table th,
.o-kompanii .utj-dest-table th,
.page-id-6195 .utj-dest-table th,
.company .utj-dest-table td,
.about .utj-dest-table td,
.page-id-4067 .utj-dest-table td,
.page-id-4093 .utj-dest-table td,
.o-kompanii .utj-dest-table td,
.page-id-6195 .utj-dest-table td {
display: block;
width: auto;
padding: 8px 12px;
border: 1px solid var(--dest-border);
}
.company .utj-dest-table th,
.about .utj-dest-table th,
.page-id-4067 .utj-dest-table th,
.page-id-4093 .utj-dest-table th,
.o-kompanii .utj-dest-table th,
.page-id-6195 .utj-dest-table th { margin-top: 0; padding-bottom: 8px; }
.company .utj-dest-table tr,
.about .utj-dest-table tr,
.page-id-4067 .utj-dest-table tr,
.page-id-4093 .utj-dest-table tr,
.o-kompanii .utj-dest-table tr,
.page-id-6195 .utj-dest-table tr { border-bottom: 0; }
}

.company .utj-dest-card__name,
.about .utj-dest-card__name,
.page-id-4067 .utj-dest-card__name,
.page-id-4093 .utj-dest-card__name,
.o-kompanii .utj-dest-card__name,
.page-id-6195 .utj-dest-card__name { font-size: .94rem; }
.company .utj-dest-card__sub,
.about .utj-dest-card__sub,
.page-id-4067 .utj-dest-card__sub,
.page-id-4093 .utj-dest-card__sub,
.o-kompanii .utj-dest-card__sub,
.page-id-6195 .utj-dest-card__sub { font-size: .8rem; line-height: 1.7; }
/* This page's own inline <style> block (top of post_content) sets a global
   a:visited/a:hover { border-bottom: 1px solid #205392 } for plain text
   links. a:visited (0,1,1) outranks .utj-dest-card's own border (0,1,0), so
   any card whose link had already been visited grew a second, mismatched
   bottom edge - the "取扱タイヤ種類" vs "お取引の流れ" cards looked like
   different-sized frames because the visited one carried this extra line. */
.company .utj-dest-card:link,
.about .utj-dest-card:link,
.page-id-4067 .utj-dest-card:link,
.page-id-4093 .utj-dest-card:link,
.o-kompanii .utj-dest-card:link,
.page-id-6195 .utj-dest-card:link,
.company .utj-dest-card:visited,
.about .utj-dest-card:visited,
.page-id-4067 .utj-dest-card:visited,
.page-id-4093 .utj-dest-card:visited,
.o-kompanii .utj-dest-card:visited,
.page-id-6195 .utj-dest-card:visited,
.company .utj-dest-card:hover,
.about .utj-dest-card:hover,
.page-id-4067 .utj-dest-card:hover,
.page-id-4093 .utj-dest-card:hover,
.o-kompanii .utj-dest-card:hover,
.page-id-6195 .utj-dest-card:hover {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--dest-border);
}
.company .utj-dest-card:hover,
.about .utj-dest-card:hover,
.page-id-4067 .utj-dest-card:hover,
.page-id-4093 .utj-dest-card:hover,
.o-kompanii .utj-dest-card:hover,
.page-id-6195 .utj-dest-card:hover { border-bottom-color: var(--dest-accent); }

.company .section .utj-dest-cta h2,
.about .section .utj-dest-cta h2,
.page-id-4067 .section .utj-dest-cta h2,
.page-id-4093 .section .utj-dest-cta h2,
.o-kompanii .section .utj-dest-cta h2,
.page-id-6195 .section .utj-dest-cta h2 { font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.5rem); line-height: 1.6; margin-bottom: 10px; }
.company .utj-dest-cta p,
.about .utj-dest-cta p,
.page-id-4067 .utj-dest-cta p,
.page-id-4093 .utj-dest-cta p,
.o-kompanii .utj-dest-cta p,
.page-id-6195 .utj-dest-cta p { font-size: .88rem; line-height: 1.9; }

/* This page is several separate <section class="section utj-dest"> blocks in
   a row (company facts / office+access+MVV / recent cases / related+CTA).
   .section alone contributes 2rem bottom margin + spacing of its own, and
   .utj-dest adds a further 4rem bottom padding on the same element - the two
   compounding at every section boundary read as a dead gap, e.g. between the
   MVV card and the 輸出事例 grid below it. Flattened to one consistent gap. */
.company .section,
.about .section,
.page-id-4067 .section,
.page-id-4093 .section,
.o-kompanii .section,
.page-id-6195 .section { margin: 0; padding: 0; }
/* Matches .utj-dest-block's own 22px margin-bottom (the gap already used
   between blocks inside one section), so the boundary between two adjacent
   <section class="section utj-dest"> blocks - e.g. 体制 and オフィス, each
   its own section - reads the same as every other gap on the page instead
   of noticeably larger. */
.company .section.utj-dest,
.about .section.utj-dest,
.page-id-4067 .section.utj-dest,
.page-id-4093 .section.utj-dest,
.o-kompanii .section.utj-dest,
.page-id-6195 .section.utj-dest { padding: 0 0 22px; }

/* .utj-dest-block p{color:var(--dest-ink)} (dark grey, meant for the white
   .utj-dest-block cards elsewhere on the site) now also matches every <p> in
   the MVV block since MVV became one more .utj-dest-block. An explicit color
   on a descendant always wins over an inherited one regardless of
   specificity, so it silently overrode the white text
   .utj-mvv__card--lead/--vision set on themselves for MISSION/VISION - dark
   grey on navy blue, unreadable. Restored by inheriting again so each
   .utj-mvv__card variant's own colour (white on navy, dark on the white
   VALUE card) applies as it did before MVV had a .utj-dest-block wrapper. */
.company .utj-dest-block.utj-mvv p,
.about .utj-dest-block.utj-mvv p,
.page-id-4067 .utj-dest-block.utj-mvv p,
.page-id-4093 .utj-dest-block.utj-mvv p,
.o-kompanii .utj-dest-block.utj-mvv p,
.page-id-6195 .utj-dest-block.utj-mvv p { color: inherit; }

/* MVV, sized and coloured to match oceanfreight.jp's own MVV block
   (.ofj-mvv-*) on request - smaller, denser type than the original full-width
   hero treatment this component was built for, the VALUE tiles' light/white
   swapped back to gray box / white tile (oceanfreight has it that way; this
   page had it inverted), and the title underline in oceanfreight's orange
   accent instead of the brand blue used everywhere else on this page. Scoped
   to the five company/about pages (.company=ja, .about=en, .page-id-4067=es,
   .page-id-4093=fr, .page-id-6195=pt) - .utj-mvv itself is shared more
   broadly across the theme, so this stays off any other use of it. */
.company .utj-dest-block .utj-mvv__sub,
.about .utj-dest-block .utj-mvv__sub,
.page-id-4067 .utj-dest-block .utj-mvv__sub,
.page-id-4093 .utj-dest-block .utj-mvv__sub,
.o-kompanii .utj-dest-block .utj-mvv__sub,
.page-id-6195 .utj-dest-block .utj-mvv__sub { margin: -8px 0 22px; font-size: .95rem; letter-spacing: .16em; }
.company .utj-dest-block .utj-mvv__label,
.about .utj-dest-block .utj-mvv__label,
.page-id-4067 .utj-dest-block .utj-mvv__label,
.page-id-4093 .utj-dest-block .utj-mvv__label,
.o-kompanii .utj-dest-block .utj-mvv__label,
.page-id-6195 .utj-dest-block .utj-mvv__label { font-size: 1.15rem; letter-spacing: .2em; }
.company .utj-dest-block .utj-mvv__statement,
.about .utj-dest-block .utj-mvv__statement,
.page-id-4067 .utj-dest-block .utj-mvv__statement,
.page-id-4093 .utj-dest-block .utj-mvv__statement,
.o-kompanii .utj-dest-block .utj-mvv__statement,
.page-id-6195 .utj-dest-block .utj-mvv__statement { font-size: 2.05rem; line-height: 1.4; }
.company .utj-mvv__card--values,
.about .utj-mvv__card--values,
.page-id-4067 .utj-mvv__card--values,
.page-id-4093 .utj-mvv__card--values,
.o-kompanii .utj-mvv__card--values,
.page-id-6195 .utj-mvv__card--values { background: #eaf1f4; border-color: #dbe4ea; padding: 1.6rem 1.75rem 1.75rem; }
.company .utj-dest-block .utj-mvv__vlead,
.about .utj-dest-block .utj-mvv__vlead,
.page-id-4067 .utj-dest-block .utj-mvv__vlead,
.page-id-4093 .utj-dest-block .utj-mvv__vlead,
.o-kompanii .utj-dest-block .utj-mvv__vlead,
.page-id-6195 .utj-dest-block .utj-mvv__vlead { font-size: .85rem; letter-spacing: .1em; }
.company .utj-mvv__value,
.about .utj-mvv__value,
.page-id-4067 .utj-mvv__value,
.page-id-4093 .utj-mvv__value,
.o-kompanii .utj-mvv__value,
.page-id-6195 .utj-mvv__value { background: #fff; border-color: #dbe4ea; }
.company .utj-mvv__no,
.about .utj-mvv__no,
.page-id-4067 .utj-mvv__no,
.page-id-4093 .utj-mvv__no,
.o-kompanii .utj-mvv__no,
.page-id-6195 .utj-mvv__no { font-size: 3.8rem; }
.company .utj-mvv__vtitle,
.about .utj-mvv__vtitle,
.page-id-4067 .utj-mvv__vtitle,
.page-id-4093 .utj-mvv__vtitle,
.o-kompanii .utj-mvv__vtitle,
.page-id-6195 .utj-mvv__vtitle { font-size: 1.02rem; }
.company .utj-mvv__vtitle::after,
.about .utj-mvv__vtitle::after,
.page-id-4067 .utj-mvv__vtitle::after,
.page-id-4093 .utj-mvv__vtitle::after,
.o-kompanii .utj-mvv__vtitle::after,
.page-id-6195 .utj-mvv__vtitle::after { background: #e67e2a; }
.company .utj-mvv__vtext,
.about .utj-mvv__vtext,
.page-id-4067 .utj-mvv__vtext,
.page-id-4093 .utj-mvv__vtext,
.o-kompanii .utj-mvv__vtext,
.page-id-6195 .utj-mvv__vtext { font-size: .85rem; line-height: 1.95; }
@media (max-width: 767px) {
.company .utj-dest-block .utj-mvv__statement,
.about .utj-dest-block .utj-mvv__statement,
.page-id-4067 .utj-dest-block .utj-mvv__statement,
.page-id-4093 .utj-dest-block .utj-mvv__statement,
.o-kompanii .utj-dest-block .utj-mvv__statement,
.page-id-6195 .utj-dest-block .utj-mvv__statement { font-size: 1.4rem; }
}

/* MVV colours taken from oceanfreight.jp's own palette on request (the owner
   sent that block as the reference): its --color-deep-blue #0458B1 for the
   MISSION card, --color-navy-blue #0E2F7A for VISION, #8fbbea for the labels
   on both, and --color-orange #E67E2A for the heading marker. UTJ's own
   #205392 / #16273f / #7fb2f0 stay in place everywhere else on the site -
   only these five pages follow oceanfreight's colours. */
.company .utj-mvv__card--lead,
.about .utj-mvv__card--lead,
.page-id-4067 .utj-mvv__card--lead,
.page-id-4093 .utj-mvv__card--lead,
.o-kompanii .utj-mvv__card--lead,
.page-id-6195 .utj-mvv__card--lead { background: #0458b1; }
.company .utj-mvv__card--vision,
.about .utj-mvv__card--vision,
.page-id-4067 .utj-mvv__card--vision,
.page-id-4093 .utj-mvv__card--vision,
.o-kompanii .utj-mvv__card--vision,
.page-id-6195 .utj-mvv__card--vision { background: #0e2f7a; }
.company .utj-mvv__card--lead .utj-mvv__label,
.about .utj-mvv__card--lead .utj-mvv__label,
.page-id-4067 .utj-mvv__card--lead .utj-mvv__label,
.page-id-4093 .utj-mvv__card--lead .utj-mvv__label,
.o-kompanii .utj-mvv__card--lead .utj-mvv__label,
.page-id-6195 .utj-mvv__card--lead .utj-mvv__label,
.company .utj-mvv__card--vision .utj-mvv__label,
.about .utj-mvv__card--vision .utj-mvv__label,
.page-id-4067 .utj-mvv__card--vision .utj-mvv__label,
.page-id-4093 .utj-mvv__card--vision .utj-mvv__label,
.o-kompanii .utj-mvv__card--vision .utj-mvv__label,
.page-id-6195 .utj-mvv__card--vision .utj-mvv__label { color: #8fbbea; }
.company .utj-dest-h2::before,
.about .utj-dest-h2::before,
.page-id-4067 .utj-dest-h2::before,
.page-id-4093 .utj-dest-h2::before,
.o-kompanii .utj-dest-h2::before,
.page-id-6195 .utj-dest-h2::before {
background-color: #e67e2a;
box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(230, 126, 42, .18);
}

/* NEW TIRE JAPAN banner above the closing CTA. The image is a 1200x150 wide
   strip, so it only stays legible at desktop widths - capped at its native
   1200px and centred rather than stretched.

   The border-bottom pinning is not cosmetic: these pages carry their own
   inline <style> with a:visited/a:hover{border-bottom:1px solid #205392}
   (0,1,1), which outranks a plain .utj-ntj-banner (0,1,0) and drew a stray
   blue line under the banner once the link had been visited - the same trap
   .utj-dest-card needed pinning for. */
.company .utj-ntj-banner,
.about .utj-ntj-banner,
.page-id-4067 .utj-ntj-banner,
.page-id-4093 .utj-ntj-banner,
.o-kompanii .utj-ntj-banner,
.page-id-6195 .utj-ntj-banner {
display: block;
max-width: 1200px;
margin: 0 auto 22px;
overflow: hidden;
border-radius: 12px;
line-height: 0;
}
.company .utj-ntj-banner:link,
.about .utj-ntj-banner:link,
.page-id-4067 .utj-ntj-banner:link,
.page-id-4093 .utj-ntj-banner:link,
.o-kompanii .utj-ntj-banner:link,
.page-id-6195 .utj-ntj-banner:link,
.company .utj-ntj-banner:visited,
.about .utj-ntj-banner:visited,
.page-id-4067 .utj-ntj-banner:visited,
.page-id-4093 .utj-ntj-banner:visited,
.o-kompanii .utj-ntj-banner:visited,
.page-id-6195 .utj-ntj-banner:visited,
.company .utj-ntj-banner:hover,
.about .utj-ntj-banner:hover,
.page-id-4067 .utj-ntj-banner:hover,
.page-id-4093 .utj-ntj-banner:hover,
.o-kompanii .utj-ntj-banner:hover,
.page-id-6195 .utj-ntj-banner:hover { border-bottom: 0; background-color: transparent; }
.company .utj-ntj-banner__pc,
.about .utj-ntj-banner__pc,
.page-id-4067 .utj-ntj-banner__pc,
.page-id-4093 .utj-ntj-banner__pc,
.o-kompanii .utj-ntj-banner__pc,
.page-id-6195 .utj-ntj-banner__pc { display: block; width: 100%; height: auto; }
.company .utj-ntj-banner__sp,
.about .utj-ntj-banner__sp,
.page-id-4067 .utj-ntj-banner__sp,
.page-id-4093 .utj-ntj-banner__sp,
.o-kompanii .utj-ntj-banner__sp,
.page-id-6195 .utj-ntj-banner__sp { display: none; }

/* Under 601px the designed 1200x150 strip scales to about 327x41 and its
   tagline lands near 4px tall, so the same banner is rebuilt from real text in
   two rows instead. Only the wordmark stays an image - it is a custom display
   face, keyed off the strip's own navy so it sits on this gradient without a
   seam. Gradient stops are sampled from the strip itself. */
@media (max-width: 600px) {
.company .utj-ntj-banner,
.about .utj-ntj-banner,
.page-id-4067 .utj-ntj-banner,
.page-id-4093 .utj-ntj-banner,
.o-kompanii .utj-ntj-banner,
.page-id-6195 .utj-ntj-banner {
background: linear-gradient(105deg, #1c2b47 0%, #293e62 55%, #192742 100%);
padding: 18px 20px 20px;
line-height: normal;
}
.company .utj-ntj-banner__pc,
.about .utj-ntj-banner__pc,
.page-id-4067 .utj-ntj-banner__pc,
.page-id-4093 .utj-ntj-banner__pc,
.o-kompanii .utj-ntj-banner__pc,
.page-id-6195 .utj-ntj-banner__pc { display: none; }
.company .utj-ntj-banner__sp,
.about .utj-ntj-banner__sp,
.page-id-4067 .utj-ntj-banner__sp,
.page-id-4093 .utj-ntj-banner__sp,
.o-kompanii .utj-ntj-banner__sp,
.page-id-6195 .utj-ntj-banner__sp { display: block; }
.company .utj-ntj-banner__row,
.about .utj-ntj-banner__row,
.page-id-4067 .utj-ntj-banner__row,
.page-id-4093 .utj-ntj-banner__row,
.o-kompanii .utj-ntj-banner__row,
.page-id-6195 .utj-ntj-banner__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.company .utj-ntj-banner__mark,
.about .utj-ntj-banner__mark,
.page-id-4067 .utj-ntj-banner__mark,
.page-id-4093 .utj-ntj-banner__mark,
.o-kompanii .utj-ntj-banner__mark,
.page-id-6195 .utj-ntj-banner__mark { display: block; width: 168px; height: auto; flex: 0 0 auto; }
.company .utj-ntj-banner__web,
.about .utj-ntj-banner__web,
.page-id-4067 .utj-ntj-banner__web,
.page-id-4093 .utj-ntj-banner__web,
.o-kompanii .utj-ntj-banner__web,
.page-id-6195 .utj-ntj-banner__web { text-align: right; flex: 0 0 auto; }
.company .utj-ntj-banner__web b,
.about .utj-ntj-banner__web b,
.page-id-4067 .utj-ntj-banner__web b,
.page-id-4093 .utj-ntj-banner__web b,
.o-kompanii .utj-ntj-banner__web b,
.page-id-6195 .utj-ntj-banner__web b {
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-size: .95rem;
font-weight: 700;
letter-spacing: .02em;
color: #e67e2a;
}
.company .utj-ntj-banner__web em,
.about .utj-ntj-banner__web em,
.page-id-4067 .utj-ntj-banner__web em,
.page-id-4093 .utj-ntj-banner__web em,
.o-kompanii .utj-ntj-banner__web em,
.page-id-6195 .utj-ntj-banner__web em {
display: block;
margin-top: 2px;
font-family: 'Roboto Condensed', sans-serif;
font-size: .8rem;
font-style: normal;
font-weight: 700;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,.85);
}
.company .utj-ntj-banner__tag,
.about .utj-ntj-banner__tag,
.page-id-4067 .utj-ntj-banner__tag,
.page-id-4093 .utj-ntj-banner__tag,
.o-kompanii .utj-ntj-banner__tag,
.page-id-6195 .utj-ntj-banner__tag {
display: block;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.5;
color: #fff;
}
}

/* Closing CTA, toned down on request. The NEW TIRE JAPAN banner that now sits
   directly above it is itself dark navy, and two near-black blocks stacked
   read as one heavy mass - this lifts the CTA a few steps so the two separate.
   Kept dark enough for white type: white on the lightest stop (#3b5f96) is
   about 5.9:1, and the lead paragraph's opacity is raised from .86 to .92 so
   it does not fall under AA on the lighter ground. */
.company .utj-dest-cta,
.about .utj-dest-cta,
.page-id-4067 .utj-dest-cta,
.page-id-4093 .utj-dest-cta,
.o-kompanii .utj-dest-cta,
.page-id-6195 .utj-dest-cta {
background: linear-gradient(100deg, #3b5f96 0%, #305080 55%, #294670 100%);
}
.company .utj-dest-cta p,
.about .utj-dest-cta p,
.page-id-4067 .utj-dest-cta p,
.page-id-4093 .utj-dest-cta p,
.o-kompanii .utj-dest-cta p,
.page-id-6195 .utj-dest-cta p { color: rgba(255, 255, 255, .92); }

/* ==========================================================================
   Home: where we ship
   ==========================================================================
   An index of the destination guides for the front page. Deliberately not the
   card grid the guides index uses: on the home page this section competes with
   five others, so it stays a dense list of country names.

   The country names are the point. Those pages rank on their own country name,
   and a nav entry can only ever offer one generic "Destinations" label - this
   is where the twenty-eight specific anchors come from. It also lets a buyer
   self-identify by market, which is the first thing they do.

   The variables are redeclared rather than shared with .utj-dest: those are
   scoped to that class, and this block sits outside it. */

.utj-ship {
--ship-navy: #16273f;
--ship-accent: #205392;
--ship-border: #dfe4ea;
--ship-ink: #3d4753;
}
.utj-ship__lead {
max-width: 44rem;
margin: 0 auto 2.6rem;
text-align: center;
line-height: 1.9;
color: var(--ship-ink);
}
.utj-ship__regions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.8rem 1.5rem;
margin-bottom: 2.4rem;
text-align: left;
}
.utj-ship__region { min-width: 0; }
.utj-ship__region h3 {
margin: 0 0 .75rem;
padding-bottom: .5rem;
border-bottom: 1px solid var(--ship-border);
font-family: 'Roboto Condensed', sans-serif;
font-size: .95rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ship-navy);
}
.utj-ship__region ul { margin: 0; padding: 0; list-style: none; }
.utj-ship__region li { margin-bottom: .4rem; }
.utj-ship__region a {
font-size: .97rem;
line-height: 1.6;
color: var(--ship-ink);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color .15s, border-color .15s;
}
.utj-ship__region a:hover {
color: var(--ship-accent);
border-bottom-color: currentColor;
}

@media (max-width: 991px) {
.utj-ship__regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
.utj-ship__regions { grid-template-columns: 1fr; gap: 1.4rem; }
}


/* ---------------------------------------------------------------------------
 * Export-evidence hub - /blog-en/loading-en/
 *
 * The introduction and the year index added to category-loading-en.php. Both
 * sit inside <main> alongside the existing report cards, so the type sizes
 * here follow .entry-content rather than introducing a new scale.
 * ------------------------------------------------------------------------ */

.utj-evidence-intro {
	margin: 0 0 3rem;
	padding: 1.6rem 1.8rem;
	border-left: 4px solid #205392;
	background: #f5f7fa;
}

.utj-evidence-intro p {
	margin: 0 0 .9rem;
	font-size: 1rem;
	line-height: 1.85;
}

.utj-evidence-intro p:last-child {
	margin-bottom: 0;
}

.utj-evidence-lead {
	font-size: 1.06rem !important;
}

.utj-evidence-index {
	margin: 3.5rem 0 0;
	padding: 2rem 0 0;
	border-top: 1px solid #dde2e8;
}

.utj-evidence-index h2 {
	margin: 0 0 .4rem;
	font-size: 1.35rem;
	line-height: 1.4;
}

.utj-evidence-index__note {
	margin: 0 0 1.6rem;
	font-size: .92rem;
	color: #5a6672;
}

.utj-evidence-year {
	margin-bottom: 1.6rem;
}

.utj-evidence-year h3 {
	margin: 0 0 .6rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: #205392;
}

.utj-evidence-year ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .35rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.utj-evidence-year li {
	font-size: .95rem;
	line-height: 1.6;
}

@media (max-width: 767px) {
	.utj-evidence-intro {
		padding: 1.2rem 1.2rem;
	}
	.utj-evidence-year ul {
		grid-template-columns: 1fr;
	}
}

/* One line of plain-text company identity under the footer address (English
 * only - see footer.php). Deliberately quiet: it is there to be read, not to
 * compete with the logos above it. */
.footer-company__entity {
	margin: 1rem 0 0;
	max-width: 34em;
	font-size: .8rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, .72);
}

.footer-company__entity strong {
	font-weight: 600;
	color: rgba(255, 255, 255, .92);
}

.footer-company__entity a {
	color: rgba(255, 255, 255, .82);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.footer-company__entity a:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Phase 8 - "What USED TIRE JAPAN does" on /about/ and the company block on
 * /contact/.
 *
 * The About page already styles dt/dd generically (.about .section dt), so the
 * facts list there inherits the look of the company profile below it and needs
 * nothing but the lede treatment. The Contact page has no such rules, so its
 * block brings its own.
 * ------------------------------------------------------------------------ */

.utj-about-what__lede {
	font-size: 1.12rem;
	line-height: 1.9;
	margin-bottom: 2.5rem;
}

.utj-contact-company {
	padding-top: 0;
}

.utj-contact-company h2 {
	margin: 0 0 1.5rem;
	font-weight: 700;
	letter-spacing: .05rem;
}

.utj-contact-company__facts {
	display: grid;
	grid-template-columns: minmax(9rem, max-content) 1fr;
	gap: .85rem 2rem;
	margin: 2rem 0;
	padding: 1.5rem 1.8rem;
	background: #f5f7fa;
	border-left: 4px solid #205392;
}

.utj-contact-company__facts dt {
	margin: 0;
	font-weight: 700;
	color: #205392;
}

.utj-contact-company__facts dd {
	margin: 0;
	line-height: 1.8;
}

@media (max-width: 575px) {
	.utj-contact-company__facts {
		grid-template-columns: 1fr;
		gap: .2rem;
		padding: 1.2rem;
	}
	.utj-contact-company__facts dd {
		margin-bottom: 1rem;
	}
}

/* ---------------------------------------------------------------------------
 * /contact-jp/ - LINE-only contact page.
 *
 * Joins the same smaller type-scale group used on /company/ and the other
 * .utj-dest-* pages (see the .company/.about/.page-id-NNNN selector group
 * above) for the one .utj-dest-h2/.utj-dest-block card this page has, kept
 * as its own scoped block rather than threaded into that shared selector
 * list so this page's rules stay easy to find in one place.
 * ------------------------------------------------------------------------ */
.contact-jp .section .utj-dest-h2 { font-size: 1.22rem; margin-bottom: 14px; line-height: 1.5; }
.contact-jp .utj-dest-block { padding: 28px 30px; margin-bottom: 22px; }
.contact-jp .utj-dest-block p { font-size: 1rem; line-height: 2; margin-bottom: 12px; }
.contact-jp .utj-dest-block p:last-child { margin-bottom: 0; }

/* The page's one job is getting a visitor to add the LINE account, so it is
   built as a single oversized CTA card rather than a form: a scannable QR
   tile on one side, the add-friend button and instructions on the other.
   Same navy gradient as .utj-dest-cta for visual consistency with the rest
   of the site's CTA language, but needs its own class because the QR tile
   and two-column layout are unique to this page. */
.utj-line-cta {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 2.4rem;
	align-items: center;
	margin: 0 0 1.4rem;
	padding: 2.4rem 2.6rem;
	color: #fff;
	background: linear-gradient(100deg, #25406a 0%, #1b3054 55%, #16273f 100%);
	border-radius: var(--dest-radius);
}
.utj-line-cta__qr {
	padding: .9rem;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, .18) 0 10px 26px;
}
.utj-line-cta__qr img { display: block; width: 100%; height: auto; }
.utj-line-cta__body { text-align: left; }
.utj-line-cta__h2 {
	margin: 0 0 .6rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}
.utj-line-cta__body p { margin: 0 0 1.2rem; line-height: 1.85; color: rgba(255, 255, 255, .86); }
.utj-line-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 2rem;
	font-weight: 700;
	font-size: 1.05rem;
	color: #fff;
	background-color: #06c755;
	border-radius: 100px;
	transition: background-color .15s ease;
}
.utj-line-cta__btn:link,
.utj-line-cta__btn:visited { color: #fff; }
.utj-line-cta__btn:hover,
.utj-line-cta__btn:focus { background-color: #05a84a; color: #fff; }
.utj-line-cta__icon { flex-shrink: 0; }
.utj-line-cta__hint { margin: 1rem 0 0 !important; font-size: .82rem; color: rgba(255, 255, 255, .6) !important; }

@media (max-width: 767px) {
	.utj-line-cta {
		grid-template-columns: 1fr;
		justify-items: center;
		padding: 2.2rem 1.7rem;
		text-align: center;
	}
	.utj-line-cta__qr { width: 200px; }
	.utj-line-cta__body { text-align: center; }
}