/* ==========================================================================
Media Queries (Mobile - Max: 767px)

CSS grouping order (PC/SP shared)
1. Base / Layout / Component
2. Header / Navigation / Footer
3. TOP
4. Lower page common
5. Products index / Products detail common / Products detail variants
6. Company
7. Materials
8. Contact
9. Privacy Policy
10. News / Blog
11. Utility / page-specific final overrides
========================================================================== */
@media (max-width: 767px) {
html {
--header-offset: 80px;
font-size: 16px;
font-size: clamp(12.8px, calc(6.53px + 2.41vw), 22.4px);
}

.u-spbr {
display: block;
}

/* ----- Base ----- */
.c-pconly {
display: none;
}
.c-sponly {
display: inherit;
}

/* ----- Layout ----- */
.l-container {
max-width: 100%;
}
.l-main {
padding: 0 0 0 0;
}
.l-footer {
padding: 15.5vw 5%;
}

/* ----- c-sectionHeader ----- */
.c-sectionHeader {
margin-bottom: 8%;
}
.c-sectionHeader__title {
font-size: 30px;
font-size: 1.875rem;
margin: 0 0 7% 0;
}
.c-sectionHeader__description {
font-size:14px;
font-size:0.875rem;
}
.c-sectionHeader__inner {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.c-sectionFooter {
justify-content: center;
margin-top: 9%;
margin-bottom: 0;
}
.c-sectionFooter .c-button {
width: 78%;
max-width: 530px;
padding: 8.5%;
border-radius: 999px;
background: #008BD2;
color: #ffffff;
justify-content: center;
font-size: 16px;
font-size: 1rem;
}

/* ----- c-label ----- */
.c-label {
margin-bottom: 3px;
}
.c-label::before {
width: 5vw;
height: 1.5vw;
margin-right: 7px;
background-size: 5vw 1.5vw;
}

/* ----- c-button ----- */
.c-button--secondary::after {
right: 4px;
width: 9%;
height: 18%;
}
.c-button--tertiary {
margin-bottom: 3px;
font-size: 16px;
font-size: 1rem;
letter-spacing: 0;
}
.c-button--tertiary::after {
right: 4px;
width: 9%;
height: 18%;
}
.c-overviewContent .c-button--tertiary {
width: 78%;
max-width: 530px;
padding: 8.5%;
font-size: 16px;
font-size: 1rem;
}
.c-button--contactForm {
width: 94%;
padding: 14px;
font-size: 18px;
font-size: 1.125rem;
height: auto;
min-height: 80px;
margin: 0 3%;
text-align: center;
}

/* ----- c-card / top product grid ----- */
.p-products__grid {
--product-card-gap: clamp(16px, 5.128vw, 28px);
grid-template-columns: repeat(2, minmax(0, calc((100% - var(--product-card-gap)) / 2)));
gap: var(--product-card-gap);
margin-bottom: 0;
}
.p-products .c-sectionFooter {
margin-top: 10%;
}
.p-products__grid .c-card {
aspect-ratio: 1 / 1;
}
.c-card--image {
border-radius: 10%;
}
.c-card__body {
padding: 0;
}
.c-card__eyebrow {
font-size: 20px;
font-size: 1.25rem;
margin-bottom: 0;
}
.c-card__text {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.4;
}

/* ----- c-overview ----- */
.l-section--accent::before {
left:0;
width:300px;
width:18.75rem;
max-width:300px;
height:300px;
height:18.75rem;
}
.c-overview {
grid-template-columns: 1fr;
gap: 0;
flex-direction: column;
}
.c-overviewHeader,
.c-overviewContent {
width: 100%;
}
.c-overviewContent {
flex-direction: column;
align-items: center;
}
.c-overviewImage {
border-radius: 20px;
margin-bottom: 10%;
}

/* ----- c-materialCard / top material grid ----- */
.p-materials__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 3% 5%;
}
.c-materialCard {
border-radius: 20px;
height: 102%;
margin-bottom: 10%;
}
.c-materialCard__body {
padding: 0;
height: 38%;
}
.c-materialCard__title {
font-size: 20px;
font-size: 1.25rem;
margin-bottom: 4px;
}
.c-materialCard__text {
font-size: 12px;
font-size: 0.75rem;
}
.c-materialCard.c-materialCard--large {
height: 96%;
aspect-ratio: calc(2 / 1);
padding-bottom: calc(50% - 17px);
position: relative;
margin-bottom: 0;
}
.c-materialCard.c-materialCard--large .c-materialCard__body {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

/* ----- c-partnerBanner ----- */
.c-partnerBanner {
padding: 7% 3% 6% 3%;
border-radius: 120px;
min-height: auto;
}
.c-partnerBanner__content {
gap: 0;
width: 100%;
flex-direction: column;
}
.c-partnerBanner__logo {
max-width: 767px;
padding-bottom: 5%;
width: 44%;
}
.c-partnerBanner__text {
font-size: 16px;
font-size: 1rem;
padding-left: 0.4em;
padding-right: 0;
}

/* ----- c-newsList ----- */
.c-newsItem {
padding: 5% 5.5%;
margin-bottom: 11%;
border-radius: 0 0 16px 16px;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
gap: 0;
}
.c-newsItem__head {
margin-bottom: 5%;
gap: 12px;
}
.c-newsItem__date {
font-size: 16px;
font-size: 1rem;
}
.c-newsItem__tag {
padding: 0.5% 4.5%;
font-size: 12px;
font-size: 0.75rem;
margin-left: 3%;
min-width: 80px;
}
.c-newsItem__text {
font-size: 14px;
font-size: 0.875rem;
}

/* ----- c-contact ----- */
.c-contactCard {
padding: 0 0;
border-radius: 24px;
}
.c-contactCard__title {
font-size: 30px;
font-size: 1.875rem;
margin: 1% 0 5% 0;
}
.c-contactCard__box {
background: #ffffff;
color: #0d1a2d;
padding: 9.5% 3%;
border-radius: 20px;
margin-top: 4%;
}
.c-contactCard__boxTitle {
font-size: 30px;
font-size: 1.875rem;
margin: 0 0 4.25% 0;
}
.c-contactCard__boxText {
font-size: 14px;
font-size: 0.875rem;
margin-bottom: 7.5%;
}

/* ----- c-footer ----- */
.c-footerBrand {
gap: 0;
}
.c-footerBrand__logoLink {
width: 55%;
max-width: 380px;
}
.c-footerBrand__address strong {
margin-top: 9%;
margin-bottom: 3%;
font-size: 16px;
font-size: 1rem;
}
.c-footerBrand__address {
font-size: 14px;
font-size: 0.875rem;
}
.c-footerColumn {
display: none;
}
.c-footerGrid {
grid-template-columns: 1fr;
margin-bottom: 24px;
}
.c-footerBottom {
padding-top: 9%;
margin-top: 7%;
}
.c-footerBottom__manufacture {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
margin-bottom: 12% !important;
}
.c-footerCopyright {
font-size: 12px;
font-size: 0.75rem;
}

/* ----- 01 TOP: page sections ----- */
.p-products {
padding-top: 0;
padding-bottom: 0;
}
.p-overview {
padding-top: 0;
padding-bottom: 0;
}
.p-materials {
padding-top: 0;
padding-bottom: 0;
}
.p-partner {
padding-top: 0;
padding-bottom: 0;
}
.p-news {
padding-top: 0;
padding-bottom: 0;
}
.p-news__left {
width: 100%;
}
.p-news__right {
width: 100%;
}
.p-news__container {
display: flex;
flex-direction: column;
gap: 0;
}
.p-contact {
padding-top: 0;
padding-bottom: 0;
}
.c-contactSection {
background: url('../../assets/images/common/bg_contact_sp.png') no-repeat top center / cover !important;
}
.p-hero {
overflow: visible;
padding: 0;
border-top: 0;
border-radius: 0;
}
.p-hero__slider {
overflow: hidden;
border-top: 4px solid #008BD2;
border-radius: 0 0 0 90px;
background-color: #EFEFEF;
}
.p-hero__slide {
--hero-image-gap-left: clamp(24px, 7.692vw, 42px);
height: clamp(381px, 122.05vw, 666px);
min-height: clamp(381px, 122.05vw, 666px);
padding: clamp(46px, 13.34vw, 75px) 0 clamp(32px, 10.256vw, 56px) 0;
background-image: url('../images/top/agrumark_slide.png');
background-repeat: no-repeat;
background-position: clamp(-26px, -4.63vw, -11px) 0;
background-size: clamp(164px, 51.96vw, 292px) auto;
}
.p-hero__inner {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: clamp(13px, 4.103vw, 24px);
}
.p-hero__slide:nth-child(4) .p-hero__inner {
gap: clamp(13px, 4.103vw, 24px);
}
.p-hero__slide:nth-child(4) .p-hero__visual {
transform: none;
}
.p-hero__panel {
display: block;
overflow: visible;
width: 100%;
height: clamp(108px, 28.718vw, 156px);
min-height: 0;
padding: 0 clamp(20px, 8.5%, 48px);
border-radius: 0;
background: transparent;
transform: translateY(calc(clamp(1px, 0.513vw, 3px) * -1));
}
.p-hero__slide:nth-child(3) .p-hero__panel {
transform: translateY(calc(clamp(1px, 0.513vw, 3px) * -1));
}
.p-hero__slide:nth-child(4) .p-hero__panel {
transform: translateY(calc(clamp(1px, 0.513vw, 3px) * -1));
}
.p-hero__title {
display: flex;
align-items: flex-start;
margin: 0;
font-size: 48px;
font-size: 3rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
}
.p-hero__slide:nth-child(3) .p-hero__title,
.p-hero__slide:nth-child(4) .p-hero__title {
margin: 0;
font-size: 48px;
font-size: 3rem;
}
.p-hero__subtitle {
display: inline-flex;
align-items: center;
width: auto;
max-width: 100%;
min-height: clamp(30px, 8.54vw, 48px);
margin: clamp(24px, 7.692vw, 42px) 0 0 0;
padding: 7px clamp(10px, 2.67vw, 15px) 8px;
border-radius: 999px;
background: #008BD2;
color: #ffffff;
font-size: 16px;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
}
.p-hero__slide:nth-child(3) .p-hero__subtitle {
margin-top: clamp(16px, 5.128vw, 28px);
}
.p-hero__slide:nth-child(4) .p-hero__subtitle {
margin-top: clamp(16px, 5.128vw, 28px);
}
.p-hero__visual {
display: block;
width: calc(100% - var(--hero-image-gap-left));
max-width: none;
margin-left: var(--hero-image-gap-left);
padding-left: 0;
}
.p-hero__visual img {
display: block;
width: 100%;
max-width: none;
height: auto;
}
.c-sliderDots {
gap: clamp(10px, 3.91vw, 22px);
margin-top: clamp(12px, 3.56vw, 20px);
padding: 16px 0 0;
}
.c-sliderDots__dot {
width: clamp(9px, 3.02vw, 17px);
height: clamp(9px, 3.02vw, 17px);
background: #999999;
}

/* ----- Lower page common: hero / breadcrumb ----- */
.p-pageHero {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 350 / 364;
max-height: none;
overflow: hidden;
border-radius: 20px;
}
.p-pageHero__body {
flex: 0 0 47.8%;
min-height: 0;
padding-top: 0;
padding-right: 11%;
padding-bottom: 0;
padding-left: 11%;
}
.p-pageHero__title {
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
font-size: 46px;
font-size: 2.875rem;
line-height: 1;
}
.p-pageHero__subtitle {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.35;
}
.p-pageHero__visual {
flex: 1 1 auto;
min-height: 0;
}
.p-pageHero__visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-breadcrumb {
margin-top: 14px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.c-breadcrumb__list {
gap: 8px;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.4;
}
.c-breadcrumb__item {
gap: 8px;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
width: 5px;
height: 8px;
}

/* ----- 02 Products: index ----- */
.p-productsPage {
padding-top: 6%;
padding-bottom: 0;
}
.p-productsPage__header {
margin-bottom: 25px;
}
.p-productsPage__header .c-sectionHeader__title {
font-size: 30px;
font-size: 1.875rem;
margin-top: 0;
margin-right: 0;
margin-bottom: 4px;
margin-left: 0;
line-height: 1.6;
}
.p-productsPage__header .c-sectionHeader__description {

font-size:14px;
font-size:0.875rem;
line-height: 2;
}
.p-productList {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
gap: 2.5rem;
}
.p-productItem__imageLink {
border-radius: 10px;
}
.p-productItem__image {
aspect-ratio: 350 / 180;
}
.p-productItem__overlay {
width: 82%;
}
.p-productItem__name {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.12;
}
.p-productItem__kana {
margin-top: 5px;
font-size:14px;
font-size:0.875rem;
line-height: 1.25;
}
.p-productItem__arrow {
right: 12px;
width: 8px;
height: 14px;
}
.p-productItem__title {
margin-top: 6%;
margin-right: 0;
margin-bottom: 3%;
margin-left: 0;
font-size:20px;
font-size:1.25rem;
line-height: 1.5;
}
.p-productItem__text {
font-size:14px;
font-size:0.875rem;
line-height: 2;
}
.p-gehrBanner {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
min-height: auto;
margin-top: 9%;
padding-top: 6%;
padding-right: 6%;
padding-bottom: 6%;
padding-left: 6%;
border: 1px solid #e5e5e5;
background: #ffffff;
box-sizing: border-box;
}
.p-gehrBanner__logoArea {
width: 100%;
height: 148px;
}
.p-gehrBanner__logo {
width: 150px;
margin-bottom: 14px;
}
.p-gehrBanner__label {
margin-bottom: 5px;
font-size: 22px;
font-size: 1.375rem;
}
.p-gehrBanner__sub {
font-size: 10px;
font-size: 0.625rem;
}
.p-gehrBanner__textArea {
width: 100%;
}
.p-gehrBanner__title {
margin-top: 0;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 0;
font-size:20px;
font-size:1.25rem;
line-height: 1.55;
}
.p-gehrBanner__title span{
font-size:16px;
font-size:1rem;
}
.p-gehrBanner__text {
font-size:14px;
font-size:0.875rem;
line-height: 1.85;
}
.p-gehrBanner__arrow {
display: none;
}

/* ----- 02 Products: catalog download ----- */
.l-sectionBand.p-catalogDownload {
padding-top: 54px;
padding-right: 5%;
padding-bottom: 58px;
padding-left: 5%;
}
.p-catalogDownload__card {
display: flex;
flex-direction: column;
align-items: center;
min-height: auto;
padding-top: 34px;
padding-right: 26px;
padding-bottom: 32px;
padding-left: 26px;
border-radius: 20px;
}
.p-catalogDownload__content {
display: contents;
text-align: center;
}
.p-catalogDownload__title {
order: 1;
width: 100%;
margin-top: 0;
margin-right: 0;
margin-bottom: 20px;
margin-left: 0;
font-size: 30px;
font-size: 1.875rem;
line-height: 1.45;
}
.p-catalogDownload__text {
order: 2;
width: 100%;
margin-top: 0;
margin-right: 0;
margin-bottom: 24px;
margin-left: 0;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.95;
}
.p-catalogDownload__button {
order: 4;
gap: 9px;
width: 100%;
max-width: none;
height: auto;
min-height: 0;
margin-top: 32px;
margin-top: 2rem;
margin-right: auto;
margin-bottom: 20px;
margin-bottom: 1.25rem;
margin-left: auto;
padding-top: 32px;
padding-top: 2rem;
padding-right: 32px;
padding-right: 2rem;
padding-bottom: 32px;
padding-bottom: 2rem;
padding-left: 32px;
padding-left: 2rem;
font-size: 18px;
font-size: 1.125rem;
white-space: nowrap;
}
.p-catalogDownload__icon {
width: 18px;
width: 1.125rem;
}
.p-catalogDownload__image {
order: 3;
align-self: center;
width: 240px;
width: 15rem;
margin-top: 0;
}

/* ----- 02 Products: detail common ----- */
.p-detailHero {
--sp-hero-text-x: 0px;
--sp-hero-text-y: 0px;
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
height: auto;
max-height: none;
min-height: 0;
aspect-ratio: auto;
overflow: hidden;
border-radius: 20px;
}
.p-detailHero .p-detailHero__body {
position: relative;
display: flex;
flex: 0 0 180px;
flex-basis: 11.25rem;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 0;
padding-top: 0;
padding-right: 6%;
padding-bottom: 0;
padding-left: 6%;
border-radius: 20px 20px 0 0;
transform: translate(var(--sp-hero-text-x), var(--sp-hero-text-y));
}
.p-detailHero .p-detailHero__kana {
margin-top: 0;
margin-right: 0;
margin-bottom: 8px;
margin-left: 0;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.35;
}
.p-detailHero .p-detailHero__title {
margin-top: 0;
margin-right: 0;
margin-bottom: 8px;
margin-left: 0;
font-size: 36px;
font-size: 2.25rem;
line-height: 1.1;
}
.p-detailHero .p-detailHero__subtitle {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.35;
}
.p-detailHero--customized .p-detailHero__title,
.p-detailHero--semifinished .p-detailHero__title,
.p-detailHero--concrete .p-detailHero__title {
line-height: 1.05;
}
.p-detailHero:not(.p-detailHero--customized):not(.p-detailHero--semifinished):not(.p-detailHero--concrete) .p-detailHero__title {
white-space: nowrap;
}
.p-detailHero--concrete .p-detailHero__title {
white-space: normal;
}
.p-detailHero .p-detailHero__visual {
position: static;
display: block;
flex: 0 0 190px;
flex-basis: 11.875rem;
width: 100%;
min-height: 0;
height: auto;
aspect-ratio: auto;
overflow: hidden;
border-radius: 0 0 20px 20px;
}
.p-detailHero .p-detailHero__visual img {
display: block;
width: 100%;
height: 100%;
border-radius: 0;
object-fit: cover;
}
.p-detailOutline {
display: flex;
flex-direction: column;
gap: 8%;
padding-top: 0;
padding-bottom: 0;
}
.p-detailOutline__header {
margin-bottom: 17px;
}
.p-detailOutline__header .c-sectionHeader__title,
.p-detailFeature__header .c-sectionHeader__title,
.p-detailApplication__header .c-sectionHeader__title,
.p-detailSpec__header .c-sectionHeader__title {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.6;
}
.p-detailOutline__textGroup p {
margin-top: 0;
margin-right: 0;
margin-bottom: 18px;
margin-left: 0;
font-size: 12px;
font-size: 0.75rem;
line-height: 2.05;
}
.p-detailOutline__imageWrap {
margin-top: 32px;
margin-top: 2rem;
border-radius: 10px;
}
.p-detailFeatureSection::before {
top: 0;
left: 0;
width: 210px;
width: 13.125rem;
height: 210px;
height: 13.125rem;
}
.p-detailFeature {
padding-top: 0;
padding-bottom: 0;
}
.p-detailFeature__header,
.p-detailApplication__header,
.p-detailSpec__header {
margin-bottom: 8%;
}
.c-sectionHeader.p-detailFeature__header {
margin-bottom: 12%;
}
.p-detailFeatureGrid {
grid-template-columns: 1fr;
gap: 26px;
}
.p-detailFeatureCard {
padding-top: 7%;
padding-right: 5.7%;
padding-bottom: 7.2%;
padding-left: 5.7%;
border-top-width: 4px;
border-radius: 0 0 20px 20px;
}
.p-detailFeatureCard__title {
margin-bottom: 18px;
font-size: 22px;
font-size: 1.375rem;
line-height: 1.45;
}
.p-detailFeatureCard__title span {
margin-left: 6px;
font-size: 10px;
font-size: 0.625rem;
}
.p-detailFeatureCard--life .p-detailFeatureCard__title {
flex-direction: column;
align-items: flex-start;
gap: 0.55em;
}
.p-detailFeatureCard--life .p-detailFeatureCard__title span {
gap: 0.4em;
margin-left: 0;
font-size: 14px;
font-size: 0.875rem;
}
.p-detailFeatureCard__image {
aspect-ratio: 314 / 198;
border-radius: 8px;
}
.p-semifinishedLineups .p-detailFeatureCard__image {
aspect-ratio: 580 / 400;
}
.p-semifinishedLineups .p-detailFeatureCard__title {
margin-bottom:0;
}
.p-detailFeatureCard__text {
margin-top: 18px;
font-size: 14px;
font-size: 0.875rem;
}
.p-detailApplication {
padding-top: 0;
padding-bottom: 0;
}
.p-applicationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 23px 14px;
}
.p-applicationItem__image {
aspect-ratio: 162 / 121;
border-radius: 8px;
}
.p-applicationItem__caption {
margin-top: 10px;
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
.p-detailSpec {
display: flex;
flex-direction: column;
gap: 0;
padding-top: 0;
padding-bottom: 0;
}
.p-specTable {
max-width: none;
padding-top: 7.4%;
padding-right: 5.33%;
padding-bottom: 7.4%;
padding-left: 5.33%;
border-radius: 10px;
}
.p-specTable__row {
display: grid;
grid-template-columns: 96px 1fr;
gap: 12px;
margin-bottom: 12px;
font-size: 14px;
font-size: 0.875rem;
}
.p-specTable__label {
flex-basis: auto;
width: 100%;
min-height: 40px;
border-radius: 5px;
font-size: 14px;
font-size: 0.875rem;
}
.p-specTable__value {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.5;
}

/* ----- 02 Products: agruwelding ----- */
.p-weldingProcessing {
padding-top: 0;
padding-bottom: 0;
}
.p-weldingMethod {
padding-top: 7%;
padding-bottom: 8%;
}
.p-weldingMethod:first-of-type {
padding-top: 0;
}
.p-weldingMethod + .p-weldingMethod {
padding-top: 0;
}
.p-weldingMethod + .p-weldingMethod .p-weldingMethod__title {
margin-top: 64px;
margin-top: 4rem;
}
.p-weldingMethod__title {
font-size: 26px;
font-size: 1.625rem;
line-height: 1.35;
}
.p-weldingMethod__title span {
margin-top: 0;
margin-left: 8px;
font-size:14px;
font-size:0.875rem;
}
.p-weldingMethod__text {
margin-bottom: 20px;
font-size: 14px;
font-size: 0.875rem;
}
.p-weldingMethod__diagrams {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 16px;
}
.p-weldingDiagram {
margin:0;
}
.p-weldingDiagram__title {
margin-top:24px;
margin-right:0;
margin-bottom:12px;
margin-left:0;
font-size:22px;
font-size:1.375rem;
}
.p-weldingMethod__mediaGrid {
grid-template-columns: 1fr;
gap: 12px;
margin-top: 0;
margin-right: 0;
margin-bottom: 16px;
margin-left: 0;
}
.p-weldingMethod__mediaGrid .p-weldingMethod__diagrams,
.p-weldingMethod__mediaGrid .p-weldingMethod__media {
margin-bottom: 0;
}
.p-mediaEmbed__video,
.p-mediaEmbed__image {
height: auto;
}
.p-weldingMethod__media,
.p-weldingMethod__media.p-mediaEmbed,
.p-weldingMethod__media .p-mediaEmbed__video,
.p-weldingMethod__media .p-mediaEmbed__image {
border-radius:0;
}
.p-customizedMovie__link,
.p-customizedMovie__link .p-mediaEmbed__image {
border-radius:0;
}
.p-mediaEmbed--video .p-mediaEmbed__video {
border-radius:0;
}
.p-weldingMethod__diagrams img:only-child {
grid-column: auto;
}
.p-weldingProductList {
gap: 30px;
}
.p-weldingSpecHeader {
justify-content:center;
min-height:42px;
margin-top:20px;
margin-right:0;
margin-bottom:24px;
margin-left:0;
padding-top:2px;
padding-top:0.125rem;
padding-right:calc(100% - 5.375rem);
padding-bottom:0;
padding-left:0;
border-radius:0;
background:transparent;
font-size:16px;
font-size:1rem;
}
.p-weldingSpecHeader::before {
width:86px;
width:5.375rem;
border-radius:10px 10px 0 0;
}
.p-weldingProduct {
display: flex;
flex-direction: column;
gap: 18px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
border-radius: 0;
}
.p-weldingProduct__body {
width: 100%;
}
.p-weldingProduct__name {
margin-bottom: 16px;
font-size: 22px;
font-size:1.375rem;
line-height:1.35;
}
.p-weldingProduct__spec {
grid-template-columns: 86px 1fr;
grid-template-columns: 5.375rem 1fr;
gap: 10px 12px;
}
.p-weldingProduct__spec dt {
min-height: 34px;
border-radius: 10px;
font-size: 14px;
font-size:0.875rem;
}
.p-weldingProduct__spec dd {
margin: 0;
font-size: 14px;
font-size:0.875rem;
line-height: 1.65;
}
.p-weldingMethod__media {
margin-top: 0;
margin-right: 0;
margin-bottom: 16px;
margin-left: 0;
border-radius: 0;
}
/* ----- Utility ----- */
.l-sectionBand {
padding-left: 5%;
padding-right: 5%;
padding-top: 16.5vw;
padding-bottom: 16.5vw;
}
.l-main > .l-main-inner > .l-sectionBand:first-child {
padding-top: clamp(18px, 4.98vw, 28px);
padding-right: clamp(20px, 6.76vw, 38px);
padding-bottom: clamp(22px, 5.69vw, 32px);
padding-left: clamp(20px, 6.76vw, 38px);
}

/* ----- Unique SP Classes ----- */
.u-borderTop--light {
position: relative;
}
.u-borderTop--light::before {
content: "";
position: absolute;
top: 0;
left: 5%;
right: 5%;
height: 2px;
background-color: #EFEFEF;
}
.u-borderTop--light .p-partner {
border-top:0;
}
}


/* --- ハンバーガーメニュー SP設定 --- */
@media screen and (max-width: 767px) {
/* ----- l-header / c-header ----- */
.l-header {
position: sticky;
top: 0;
z-index: 9999;
height: 60px;
padding: 0;
border-bottom: none;
background: #ffffff;
}

.c-header {
position: relative;
z-index: 2;
height: 60px;
padding: 0 60px 0 clamp(24px, 8.2vw, 32px);
background: #ffffff;
}

.c-header__brand {
gap: clamp(8px, 2.56vw, 10px);
}

.c-header__logoLink {
flex: 0 0 140px;
flex-basis: clamp(130px, 35.9vw, 140px);
flex-shrink: 0;
width: 140px;
width: clamp(130px, 35.9vw, 140px);
max-width: 140px;
height: 60px;
}

.c-header__logoImage {
width: 100%;
max-width: 100%;
height: auto;
object-fit: contain;
transform: translate(-11px, 2px);
}

.c-header__actions {
display: none;
}

.c-globalNav {
display: none;
}

.c-header__brandText {
display: flex;
height: auto;
transform: translate(-12px, 2px);
}

.c-header__company {
font-size: 12px;
font-size:0.75rem;
line-height: 1.45;
}

body.is-spMenu-open .c-header__brandText {
display: none;
}

.c-header__hamburger {
position: absolute;
top: 0;
right: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
padding: 0;
border: 0;
background: #008BD2;
cursor: pointer;
}

/* ----- c-hamburgerLine ----- */
.c-hamburgerLine,
.c-hamburgerLine::before,
.c-hamburgerLine::after {
position: absolute;
display: block;
width: 33px;
height: 2px;
border-radius: 999px;
background: #ffffff;
transition: transform 0.25s ease, opacity 0.25s ease;
}

.c-hamburgerLine {
position: relative;
}

.c-hamburgerLine::before,
.c-hamburgerLine::after {
left: 0;
content: "";
}

.c-hamburgerLine::before {
top: -10px;
}

.c-hamburgerLine::after {
top: 10px;
}

.js-hamburger.is-active .c-hamburgerLine {
background: transparent;
}

.js-hamburger.is-active .c-hamburgerLine::before {
top: 0;
transform: rotate(45deg);
}

.js-hamburger.is-active .c-hamburgerLine::after {
top: 0;
transform: rotate(-45deg);
}

/* ----- c-spMenu ----- */
.c-spMenu {
position: fixed;
top: 60px;
left: 0;
z-index: 9998;
display: block;
overflow-y: auto;
width: 100%;
height: calc(100vh - 60px);
height: calc(100dvh - 60px);
border-top: 4px solid #008BD2;
background: #ffffff;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-12px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.c-spMenu.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}

.c-spMenu__nav {
min-height: 100%;
padding: 43px 30px 46px;
border-bottom: 4px solid #008BD2;
}

.c-spMenu__list,
.c-spMenu__childList {
margin: 0;
padding: 0;
list-style: none;
}

.c-spMenu__item {
margin: 0 0 28px;
}

.c-spMenu__item--hasChildren {
margin-bottom: 38px;
}

.c-spMenu__item--contact {
margin-bottom: 0;
}

.c-spMenu__heading,
.c-spMenu__childLink {
display: flex;
align-items: center;
color: #2D2E2F;
text-decoration: none;
line-height: 1.5;
}

.c-spMenu__heading {
justify-content: space-between;
gap: 18px;
font-size: 18px;
font-size:1.125rem;
font-weight: 700;
}

.c-spMenu__heading::after {
flex: 0 0 auto;
width: 10px;
height: 10px;
background-image: url('../images/common/icon_arrow_blue.png');
background-repeat:no-repeat;
background-position:center;
background-size:contain;
content: "";
}

.c-spMenu__childList {
padding-top: 19px;
padding-left: 20px;
}

.c-spMenu__childLink {
position: relative;
min-height: 44px;
padding: 6px 0 6px 14px;
font-size: 16px;
font-size:1rem;
font-weight: 400;
}

.c-spMenu__childLink::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #008BD2;
transform: translateY(-50%);
}

.c-spMenu__childItem--border {
margin-top: 11px !important;
padding-top: 17px;
border-top: 2px solid #e6e6e6;
}
}

/* ==========================================================================
Additional lower pages SP
========================================================================== */
@media screen and (max-width: 767px) {
/* ----- p-pageAnchor: lower page common ----- */
.p-pageAnchor a {
font-size:14px;
font-size:0.875rem;
}

/* ----- p-company / p-material: lower page layout reset ----- */
.p-companyMessage,
.p-companyPhilosophy,
.p-companyOutline,
.p-materialOutline,
.p-companyGroup__flex {
grid-template-columns:1fr;
}
.p-subpageHeader {
min-width:0;
}
.p-companyMessage__body p,
.p-companyGroup > p {
font-size:14px;
font-size:0.875rem;
}

.p-companyGroup > p span{
margin-bottom: 3%;
}
.p-companyGroup__flex {
margin-bottom:34px;
}
}

/* ==========================================================================
SP lower page refinements
390px comp base / min 80% / max 140%
========================================================================== */
@media screen and (max-width: 767px) {
/* ----- base / lower page common ----- */
body {
overflow-x:hidden;
}
.l-main {
overflow:hidden;
}
.l-sectionBand {
padding-top:14%;
padding-right:5.33%;
padding-bottom:14%;
padding-left:5.33%;
}
.l-main > .l-main-inner > .l-sectionBand:first-child {
padding-top:5.33%;
padding-right:5.33%;
padding-left:5.33%;
}
.c-label {
font-size:18px;
font-size:1.125rem;
line-height:1.3;
}
.c-label::before {
width:20px;
height:6px;
margin-right:8px;
background-size:20px 6px;
}
.c-sectionHeader {
margin-bottom:7%;
}
.c-sectionHeader__title {
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:0;
font-size: 30px;
font-size: 1.875rem;
line-height:1.6;
}
.p-products .c-sectionHeader__title,
.c-overview .c-sectionHeader__title,
.p-materials .c-sectionHeader__title,
.p-news .c-sectionHeader__title {
margin-bottom:7%;
}
.c-sectionHeader__description,
.p-detailOutline__textGroup p,
.p-companyMessage__body p,
.p-materialOutline__body p,
.p-companyGroup > p {
font-size:14px;
font-size:0.875rem;
line-height:2;
margin-bottom: 3%;
}

/* ----- c-breadcrumb ----- */
.c-breadcrumb {
margin-top:14px;
margin-bottom:0;
}
.c-breadcrumb__list {
display:flex;
align-items:flex-start;
flex-wrap:nowrap;
gap:8px;
font-size:14px;
font-size:0.875rem;
line-height:1.35;
}
.c-breadcrumb__item {
align-items:flex-start;
min-width:0;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
flex-shrink:0;
margin-top:0.35em;
}
.c-breadcrumb__item:not(:last-child) {
flex:0 0 auto;
white-space:nowrap;
}
.c-breadcrumb__item:last-child {
flex:1 1 auto;
padding-right:3%;
}
.l-main > .l-main-inner > .l-sectionBand:first-child {
padding-bottom:3.2%;
}
.l-main > .l-main-inner > .l-sectionBand:first-child + .l-sectionBand {
margin-top:0;
padding-top:14%;
}
.l-main > .l-main-inner > .l-sectionBand:first-child + .l-sectionBand.p-newsBand {
padding-top:11%;
}
.l-main > .l-main-inner > .l-sectionBand:first-child + .l-sectionBand.p-contactFormSection {
padding-top:16%;
}

.p-detailOutline__header,
.p-detailApplication__header,
.p-detailSpec__header,
.p-productsPage__header,
.p-subpageHeader {
margin-bottom:6.4%;
}
.p-detailOutline__header .c-sectionHeader__title,
.p-detailFeature__header .c-sectionHeader__title,
.p-detailApplication__header .c-sectionHeader__title,
.p-detailSpec__header .c-sectionHeader__title,
.p-productsPage__header .c-sectionHeader__title {
font-size:30px;
font-size:1.875rem;
line-height:1.38;
margin-bottom: 5%;
}
.p-detailFeatureSection::before,
.p-materialsSection::before {
left:0;
width:300px;
width:18.75rem;
max-width:300px;
height:300px;
height:18.75rem;
}
.p-detailFeatureSection::before {
top:0;
left:0;
width:300px;
width:18.75rem;
max-width:300px;
height:300px;
height:18.75rem;
}
.p-semifinishedLineups .p-detailFeatureCard__text {
margin-top:5px;
margin-top:0.3125rem;
}

.p-pageAnchorBand {
padding-top:8.2%;
padding-bottom:8.2%;
}
.l-main > .l-main-inner > .l-sectionBand:first-child + .p-pageAnchorBand {
padding-top:8.2%;
padding-bottom:8.2%;
}
.p-pageAnchor,
.p-pageAnchor--materials {
display:grid;
grid-template-columns:1fr !important;
gap:10px;
}
.p-pageAnchor a {
width:100% !important;
max-width:100%;
margin-right:0 !important;
margin-bottom:0 !important;
flex-direction:row;
font-size:14px;
font-size:0.875rem;
line-height:1.35;
}
/* ----- 02 Products: customized / GEHR shared ----- */
.p-customizedOutline,
.p-gehrOutline,
.p-customFeature,
.p-customizedExample {
grid-template-columns:1fr;
gap:26px;
}
.p-customizedExample__inner {
grid-template-columns:1fr;
gap:26px;
}
.p-customizedOutline p,
.p-gehrOutline p,
.p-gehrCertification p,
.p-customFeature p,
.p-customizedExample p,
.p-gehrProduct p {
font-size:14px;
font-size:0.875rem;
line-height:1.95;
}
.p-customizedOutline {
gap:0;
}
.p-customizedOutline__content {
padding-bottom:0;
}
.p-customizedMovie__link {
aspect-ratio:350 / 190;
margin-top:32px;
margin-top:2rem;
border-radius:0;
}
.p-gehrOutline__image,
.p-customFeature img,
.p-customizedExample__image {
border-radius:20px;
}
.p-customizedMovie__link img {
border-radius:0;
}
.p-gehrOutline__image {
aspect-ratio:350 / 220;
height:min(56vw,220px);
}
/* ----- 02 Products: customized parts ----- */
.p-customFlow {
margin-top:9%;
margin-bottom:14%;
}
.p-customFlow__title,
.p-gehrCertification h3,
.p-customFeature h3,
.p-customizedExample h3,
.p-gehrProduct h3 {
margin-bottom:14px;
font-size:22px;
font-size:1.375rem;
}
.p-customFlow__title {
font-size:28px;
font-size:1.75rem;
}
.p-customFeature h3 {
margin-bottom:14px;
}
.p-customFlow__list {
grid-template-columns:1fr;
gap:10px;
margin-top:5%;
}
.p-customFlow__list li {
min-height:58px;
padding:0 16px;
font-size:18px;
font-size:1.125rem;
}
.p-customFlow__list li:not(:last-child)::after {
top:auto;
right:auto;
bottom:-8px;
left:50%;
border-top:8px solid #008BD2;
border-right:6px solid transparent;
border-bottom:0;
border-left:6px solid transparent;
transform:translateX(-50%);
}
.p-customFlow__list span {
font-size:28px;
font-size:1.75rem;
}
.p-customizedFeaturesSection,
.p-gehrLineupSection,
.p-customizedExampleSection,
.p-customizedRelatedSection {
padding-top:14%;
padding-bottom:14%;
}
.p-customizedFeaturesSection::before {
left:0;
width:250px;
width:15.625rem;
max-width:250px;
height:250px;
height:15.625rem;
}
.p-customFeatureList {
gap:38px;
}
.p-customFeature__button {
display:flex;
width:70%;
min-width:0;
max-width:270px;
max-width:16.875rem;
min-height:60px;
min-height:3.75rem;
margin-top:18px;
margin-right:auto;
margin-left:auto;
padding-top:0;
padding-right:10%;
padding-bottom:0;
padding-left:6%;
font-size:16px;
font-size:1rem;
white-space:nowrap;
}
.p-customizedExample dl {
grid-template-columns:82px 1fr;
gap:10px;
margin-top:18px;
margin-bottom:18px;
}
.p-customizedExample dt,
.p-customizedExample dd {
min-height:38px;
font-size:14px;
font-size:0.875rem;
}
.p-customizedExample dt {
border-radius:5px;
}
.p-relatedServiceGrid {
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:3% 5%;
}
.p-relatedServiceGrid a {
aspect-ratio:1 / 1;
border-radius:10%;
}
.p-relatedServiceGrid__item--purad {
margin-top:20px;
margin-top:1.25rem;
}
.p-relatedServiceGrid span {
padding:0;
font-size:20px;
font-size:1.25rem;
}
.p-relatedServiceGrid small {
margin-top:0;
font-size:14px;
font-size:0.875rem;
}

/* ----- 02 Products: GEHR ----- */
.p-gehrCertification {
margin-top:12%;
}
.p-gehrCertification h3 {
margin-bottom:24px;
}
.p-gehrCertification ul {
grid-template-columns:repeat(2,1fr);
gap:20px 12px;
margin-top:5%;
padding:8% 7%;
border-radius:20px;
}
.p-gehrCertification li {
font-size:11px;
font-size:0.6875rem;
}
.p-gehrCertification img {
width:100px;
width:6.25rem;
height:100px;
height:6.25rem;
margin-bottom:12px;
}
.p-gehrCertification small {
font-size:10px;
font-size:0.625rem;
}
.p-gehrProductList {
gap:40px;
}
.p-gehrProduct {
grid-template-columns:1fr;
gap:16px;
}
.p-gehrProduct__text {
grid-column:auto;
}
.p-gehrProduct h3 {
font-size:28px;
font-size:1.75rem;
}
.p-gehrProduct > img {
grid-row:auto;
grid-column:auto;
width:270px;
width:16.875rem;
max-width:100%;
margin-top:32px;
margin-top:2rem;
margin-bottom:32px;
margin-bottom:2rem;
justify-self:center;
border-radius:12px;
}
.p-gehrProduct__lists {
grid-column:auto;
grid-template-columns:1fr;
gap:16px;
}
.p-gehrProduct__lists h4 {
min-width:96px;
min-height:30px;
padding-top:2px;
padding-top:0.125rem;
border-radius:10px 10px 0 0;
font-size:14px;
font-size:0.875rem;
}
.p-gehrProduct__lists div {
padding-top:42px;
}
.p-gehrProduct__lists div::before {
top:30px;
}
.p-gehrProduct__lists ul {
gap:8px;
}
.p-gehrProduct__lists li {
padding-left:16px;
font-size:14px;
font-size:0.875rem;
line-height:1.65;
}
.p-gehrProduct__lists li::before {
top:.72em;
width:5px;
height:5px;
}
.p-gehrBannerList {
grid-template-columns:1fr;
gap:30px;
gap:1.875rem;
margin-top:13%;
}
.p-gehrBannerList a {
align-items:flex-start;
justify-content:center;
justify-self:center;
width:350px;
width:21.875rem;
max-width:100%;
min-height:112px;
min-height:7rem;
height:112px;
height:7rem;
padding-top:16px;
padding-top:1rem;
padding-right:40px;
padding-right:2.5rem;
padding-bottom:14px;
padding-bottom:0.875rem;
padding-left:16px;
padding-left:1rem;
background-position:right 30px center;
background-position:right 1.875rem center;
background-size:123px 112px;
background-size:7.6875rem 7rem;
font-size:22px;
font-size:1.375rem;
}
.p-gehrBannerList img {
width:93px;
width:5.8125rem;
height:auto;
margin-bottom:12px;
margin-bottom:0.75rem;
}
.p-gehrBannerList a::after {
right:10px;
right:0.625rem;
width:10px;
width:0.625rem;
height:14px;
height:0.875rem;
}

/* ----- Lower pages: company / materials / contact spacing reset ----- */
.p-companyMessage,
.p-companyPhilosophy,
.p-companyOutline,
.p-access,
.p-companyGroup,
.p-materialOutline,
.p-materialsPage,
.p-contactPage {
padding-top:0;
padding-bottom:0;
}
.p-companyMessage,
.p-companyOutline {
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
}
.p-companyPhilosophySection::before {
position:absolute;
top:0;
left:0;
z-index:0;
width:300px;
width:18.75rem;
max-width:300px;
height:300px;
height:18.75rem;
background-image:url('../images/common/bg_agrumark_body.png');
background-repeat:no-repeat;
background-position:left top;
background-size:contain;
pointer-events:none;
content:"";
}
.p-companyPhilosophySection .l-container {
position:relative;
z-index:1;
}

/* ----- 03 Company: message / philosophy / outline ----- */
.p-companyMessage__body,
.p-infoTable {
width:100%;
max-width:100%;
}
/* ----- 04 Materials: outline ----- */
.p-materialOutline {
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
}
.p-materialOutline__body,
.p-materialOutline__image,
.p-materialOutline__image img {
width:100%;
max-width:100%;
}
.p-materialOutline__image{
margin: 5% 0 5% 0;
}
/* ----- 03/04 Company / Materials: shared stacked layout ----- */
.p-companyMessage,
.p-companyPhilosophy,
.p-companyOutline,
.p-materialOutline,
.p-companyGroup__flex {
gap:6.4%;
}
.p-companyMessage__signature {
margin-top:6%;
font-size:12px;
font-size:0.75rem;
}
.p-companyMessage__signature strong{
font-size:18px;
font-size:1.125rem;
}

.p-philosophyList {
gap:10px;
}
.p-philosophyList li {
grid-template-columns:54px 1fr;
font-size:18px;
font-size:1.125rem;
line-height:1.65;
}
.p-philosophyList span {
margin-right: 3%;
font-size:50px;
font-size:3.125rem;
}
.p-infoTable__row {
grid-template-columns:92px 1fr;
}
.p-infoTable__row dt,
.p-infoTable__row dd {
font-size:12px;
font-size:0.75rem;
}
.p-mapEmbed {
aspect-ratio:335 / 600;
}
.p-companyGroup h3 {
font-size:28px;
font-size:1.75rem;
}
.p-companyGroup p {
margin-bottom: 10%;
}
.p-companyGroup__flex {
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
}
.p-companyGroup__flex > div {
width:100%;
max-width:100%;
padding:6%;
margin-bottom: 10%;
}
.p-companyGroup__flex img,
.p-companyGroup__flex > img {
width:100%;
max-width:100%;
}
.p-companyGroup__flex h4,
.p-certList li,
.p-companyGroup__flex p {
font-size:14px;
font-size:0.875rem;
line-height:1.75;
}

.p-certList {
margin-top: 0;
}
.p-companyGroup__flex .p-certList h4 {
font-size:14px;
font-size:0.875rem;
}
.p-companyGroup__flex .p-certList p{
margin: 5% 5% 20% 5%;
}
.p-companyGroup__flex .p-certList p:last-child{
margin: 5% 5% 0 5%;
}
.p-companyGroup__flex .p-certList p span{
width: auto;
min-width: 7rem;
height: 1.5rem;
padding: 0 0.625rem;
box-sizing: border-box;
line-height: 1;
white-space: nowrap;
}
.p-companyGroup__flex .p-certList p span a{
transform: none;
}
.p-companyGroup__flex p {
margin-bottom: 0;
}
.p-companyGroup__flex p span{
margin-bottom: 5%;
}
.p-companyGroup__flex h4{
font-size:22px;
font-size:1.375rem;
margin-top: 0;
}

/* ----- 04 Materials ----- */
.p-materialLead {
margin-top:8%;
margin-bottom:3%;
padding-top:3%;
padding-bottom:3%;
font-size:24px;
font-size:1.5rem;
line-height:1.55;
}

/* ----- Lower pages: page anchor shared / materials variant ----- */
.p-pageAnchor a,
.p-pageAnchor--materials a {
min-height:60px;
border-radius:5px;
padding-top:12px;
padding-right:44px;
padding-bottom:12px;
padding-left:16px;
justify-content:center;
text-align:center;
max-height: 60px;
}
.p-pageAnchor a::after,
.p-pageAnchor--materials a::after {
width:28px;
border-radius:0 5px 5px 0;
}
.p-pageAnchor--materials {
margin-bottom:10px;
}
.p-pageAnchor--materials:last-child {
margin-bottom:0;
}
.p-pageAnchor--materials a {
flex-direction:column;
gap:4px;
font-size:16px;
font-size:1rem;
line-height:1.35;
}
.p-pageAnchor--materials span {
font-size:14px;
font-size:0.875rem;
line-height:1.35;
}
/* ----- Lower pages: shared rounded media/card elements ----- */
.p-pageHero,
.p-productItem__imageLink,
.p-productItem__image,
.p-detailOutline__imageWrap,
.p-detailOutline__image,
.p-detailFeatureCard__image,
.p-materialOutline__image,
.p-materialOutline__image img,
.p-materialsSection .p-materialItem__image,
.p-companyGroup__flex > div,
.p-companyGroup__flex img,
.p-companyGroup__flex > img,
.p-certList li {
border-radius:20px;
}
/* ----- 03 Company: info table ----- */
.p-infoTable {
display:flex;
flex-direction:column;
gap:16px;
}
.p-infoTable__row {
display:flex;
flex-direction:column;
overflow:hidden;
border-radius:20px;
background:#EFF4F7;
}
.p-infoTable__row dt,
.p-infoTable__row dd {
width:100%;
max-width:none;
flex:none;
box-sizing:border-box;
min-height:0;
border-radius:0;
font-size:14px;
font-size:0.875rem;
line-height:2;
}
.p-infoTable__row dt {
display:flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:9px 16px;
background:#008BD2;
color:#ffffff;
text-align:center;
font-size:16px;
font-size:1rem;
}
.p-infoTable__row dd {
padding-top:18px;
padding-right:20px;
padding-bottom:18px;
padding-left:20px;
background:#EFF4F7;
}
.p-infoTable__row dd.p-infoTable__privacyText {
display:block;
}
.p-infoTable__row dd.p-infoTable__member,
.p-infoTable__row .p-infoTable__member {
line-height:2.1;
}
.p-infoTable__row .p-infoTable__member span {
margin-right: 5%;
}
.p-materialsSection .p-materialsPage {
max-width:100%;
padding-top:14%;
padding-bottom:12%;
}
.p-materialsSection .p-subpageHeader {
margin-bottom:8%;
}
.p-materialOutline__body > p {
font-size:14px;
font-size:0.875rem;
}
.p-materialsSection .p-materialItem {
display:grid;
grid-template-columns:1fr;
gap:30px;
margin-bottom:5%;
}
.p-materialsSection .p-materialItem__head {
display:flex;
flex-wrap:wrap;
gap:4px 4px;
align-items:flex-start;
margin:0;
}
.p-materialsSection .p-materialItem__head span {
margin-right:0;
color:#B5DFF4;
font-size:50px;
font-size:3.125rem;
line-height:0.82;
}
.p-materialsSection .p-materialItem__head h3 {
margin-right:2%;
margin-left:16px;
margin-left:1rem;
padding-top:6px;
font-size:28px;
font-size:1.75rem;
line-height:1.15;
}
.p-materialsSection .p-materialItem__head p {
position:relative;
width:100%;
margin:0;
padding-left:32px;
padding-left:2rem;
color:#008BD2;
font-size:18px;
font-size:1.125rem;
line-height:1.65;
}
.p-materialsSection .p-materialItem__head p::before {
position:absolute;
top:0.5em;
left:0;
display:block;
width:22px;
width:1.375rem;
height:5px;
height:0.3125rem;
margin:0;
background:url('../images/common/icon_heading_line.png') no-repeat center / contain;
content:"";
}
.p-materialsSection .p-materialItem__head p span {
display:inline;
margin-top:1%;
color:#008BD2;
font-size:18px;
font-size:1.125rem;
line-height:1.5;
}
.p-materialsSection .p-materialItem__image {
width:100%;
aspect-ratio:460 / 300;
}
.p-materialsSection #conductive .p-materialItem__head {
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap:1.4% 2.4%;
}
.p-materialsSection #conductive .p-materialItem__head > span {
grid-row:1;
grid-column:1;
font-size:50px;
font-size:3.125rem;
}
.p-materialsSection #conductive .p-materialItem__head h3 {
grid-column:2;
margin-right:0;
font-size:28px;
font-size:1.75rem;
line-height:1.15;
}
.p-materialsSection #conductive .p-materialItem__head p {
grid-column:1 / -1;
font-size:18px;
font-size:1.125rem;
line-height:1.5;
}
.p-materialsSection #conductive .p-materialItem__head p span {
display:block;
width:100%;
margin-top:0;
margin-left:0;
font-size:16px;
font-size:1rem;
line-height:1.45;
overflow-wrap:anywhere;
}
.p-materialsSection .p-materialItem__content {
padding-top:10px;
}
.p-materialsSection .p-materialItem__content h4 {
min-width:165px;
min-height:40px;
margin-bottom:0;
border-radius:8px 8px 0 0;
font-size:18px;
font-size:1.125rem;
letter-spacing:0.16em;
padding-top: 1%;
}
.p-materialsSection .p-materialItem__content h4:not(:first-child) {
margin-top:6.5%;
}
.p-materialsSection .p-materialItem__content ul {
gap:10px;
padding-top:5%;
padding-bottom:5%;
}
.p-materialsSection .p-materialItem__content li,
.p-materialsSection .p-materialItem__content p {
padding-left:5%;
font-size:14px;
font-size:0.875rem;
line-height:1.9;
padding-bottom: 0;
}
.p-materialsSection .p-materialItem__content li::before,
.p-materialsSection .p-materialItem__content p::before {
top:0.65em;
}
.p-materialsSection .p-materialItem + .p-materialItem .p-materialItem__head {
margin-top: 0;
}

/* ----- 05 Contact ----- */
.p-contactPage__lead {
margin-bottom:3%;
font-size:14px;
font-size:0.875rem;
line-height:2;
}
.p-contactPage h3 {
display: none;
margin-bottom:5.33%;
font-size:20px;
font-size:1.25rem;
}
.p-contactMethod {
grid-template-columns:1fr;
gap:20px;
}
.p-contactMethod div {
margin: 6% 0 0 0;
}
.p-contactMethod h4 {
padding-top:3%;
padding-bottom:3%;
font-size:20px;
font-size:1.25rem;
}
.p-contactMethod p {
font-size:14px;
font-size:0.875rem;
padding: 4.5% 6% 5% 6%;
}
.p-contactMethod li {
font-size:14px;
font-size:0.875rem;
}
.p-contactNotes {
margin-bottom:18.5%;
}
.p-contactNotes li {
font-size:14px;
font-size:0.875rem;
}
.p-contactForm {
grid-template-columns:minmax(0, 1fr);
gap:26px;
padding-top:5.46%;
padding-right:5.33%;
padding-bottom:12%;
padding-left:5.33%;
border-radius:10px;
}
.p-formRow,
.p-formSplit,
.p-checkGrid {
grid-template-columns:1fr;
}
.p-formRow {
width:100%;
max-width:100%;
min-width:0;
gap:8px;
}
.p-formRow > *,
.p-formSplit,
.p-checkGrid {
width:100%;
max-width:100%;
min-width:0;
}
.p-checkGrid {
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.p-checkGrid .wpcf7-form-control-wrap,
.p-checkGrid .wpcf7-checkbox {
display:block;
width:100%;
}
.p-checkGrid .wpcf7-checkbox {
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.p-checkGrid .wpcf7-list-item {
display:block;
margin:0;
}
.p-checkGrid label {
display:flex;
align-items:flex-start;
justify-content:flex-start;
width:100%;
}
.p-checkGrid .wpcf7-list-item label {
display:flex;
align-items:flex-start;
justify-content:flex-start;
width:100%;
}
.p-checkGrid input[type="checkbox"] {
margin-top:0.35em;
}
.p-checkGrid--products input[type="checkbox"],
.p-checkGrid--materials input[type="checkbox"] {
position:relative;
top:3px;
top:2px;
top:0.125rem;
margin-top:0;
}
.p-privacyAgree {
align-items:center;
min-height:60px;
min-height:3.75rem;
margin-top:8px;
padding:14px;
font-size:12px;
font-size:0.75rem;
line-height:1.75;
}
.p-privacyAgree .wpcf7-form-control-wrap,
.p-privacyAgree .wpcf7-acceptance,
.p-privacyAgree .wpcf7-list-item {
display:flex;
align-items:center;
justify-content:center;
}
.p-privacyAgree label {
align-items:center;
line-height:inherit;
}
.p-formRow label {
font-size:18px;
font-size:1.125rem;
line-height:1.75;
}
.p-formRow .p-checkGrid label {
font-size:14px;
font-size:0.875rem;
line-height:1.75;
}
.p-formRow label span,
.p-formRow select {
font-size:14px;
font-size:0.875rem;
margin-top: 0;
}
.p-formRow .p-checkGrid label span,
.p-privacyAgree label span {
display:inline;
margin-top:0;
color:inherit;
font-size:inherit;
font-weight:inherit;
}
.p-formNameField {
gap: 1rem;
}
.p-formRow input[type="text"],
.p-formRow input[type="tel"],
.p-formRow input[type="email"],
.p-formRow textarea {
box-sizing:border-box;
min-height:42px;
font-size:16px;
font-size:1rem;
padding: 1%;
padding-right:10px;
padding-right:0.625rem;
padding-left:10px;
padding-left:0.625rem;
}
.p-contactForm__submit {
width:100%;
max-width:260px;
min-height:54px;
margin-top:2%;
font-size:14px;
font-size:0.875rem;
}
.p-contactForm__submitWrap {
max-width:260px;
margin-top:2%;
}
.p-contactForm__submitWrap .p-contactForm__submit {
max-width:none;
margin-top:0;
}

.p-formSelectGroup {
gap: 0.5rem;
}
.p-formSelectGroup select {
width: 100%;
padding-right:34px;
border-radius:0;
background-color:#ffffff;
font-size:16px;
font-size:1rem;
-webkit-appearance:none;
appearance:none;
}
.p-formSelect {
position:relative;
width:100%;
}
.p-formSelect::after {
position:absolute;
top:50%;
right:10px;
right:0.625rem;
width:10px;
width:0.625rem;
height:6px;
height:0.375rem;
background-image:linear-gradient(45deg, transparent 38%, #999999 38%, #999999 62%, transparent 62%), linear-gradient(-45deg, transparent 38%, #999999 38%, #999999 62%, transparent 62%);
background-repeat:no-repeat;
background-position:left center, right center;
background-size:50% 100%, 50% 100%;
content:"";
pointer-events:none;
transform:translateY(-50%);
}
.p-formOtherField input,
.p-formOtherField input::placeholder,
.p-formRow label em {
font-size:14px;
font-size:0.875rem;
}
.p-formRow .p-formOtherField input[type="text"],
.p-formOtherField input {
box-sizing:border-box;
padding-left:10px;
padding-left:0.625rem;
padding-right:10px;
padding-right:0.625rem;
}

/* ----- 06 Privacy Policy ----- */
.p-privacyPage {
padding-top:0;
padding-bottom:0;
}
.p-privacyBlock {
margin-bottom:8%;
}
.p-privacyBlock h2 {
margin-bottom:2.5%;
font-size:30px;
font-size:1.875rem;
line-height:1.5;
}
.p-privacyBlock h3 {
margin-bottom:3%;
font-size:28px;
font-size:1.75rem;
line-height:1.5;
}
.p-privacyBlock p {
margin-bottom:3%;
font-size:14px;
font-size:0.875rem;
line-height:2;
}

/* ----- 07 News / Blog ----- */
/* News / Blog: page hero */
.p-pageHero--news {
display:flex;
flex-direction:column;
aspect-ratio:auto;
overflow:hidden;
border-radius:20px;
background:#008BD2;
}
.p-pageHero--news .p-pageHero__body {
flex:0 0 180px;
flex-basis:11.25rem;
width:100%;
min-height:0;
padding-top:0;
padding-right:6%;
padding-bottom:0;
padding-left:6%;
}
.p-pageHero--news .p-pageHero__title {
font-size:36px;
font-size:2.25rem;
line-height:1.1;
transform:translateY(10px);
}
.p-pageHero--news .p-pageHero__subtitle {
margin-top:8px;
font-size:16px;
font-size:1rem;
line-height:1.35;
transform:translateY(-4px);
}
.p-pageHero--news .p-pageHero__visual {
position:static;
flex:0 0 190px;
flex-basis:11.875rem;
width:100%;
min-height:0;
height:auto;
}
.p-pageHero--news .p-pageHero__visual img {
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
}

/* News / Blog: archive list */
.p-newsArchive {
padding-top:0;
padding-bottom:11.2%;
}
.p-newsArchive__list {
gap:7.46vw;
}
.p-newsCard {
border-top:4px solid #008BD2;
border-radius:0 0 8px 8px;
}
.p-newsCard__link {
display:block;
min-height:106px;
padding-top:6.1%;
padding-right:13%;
padding-bottom:6.1%;
padding-left:6.1%;
}
.p-newsCard__meta,
.p-newsSingle__meta {
gap:22px;
}
.p-newsCard__date,
.p-newsSingle__date {
font-size:16px;
font-size:1rem;
}
.p-newsCard__category,
.p-newsSingle__category {
min-width:64px;
min-height:20px;
padding-right:5%;
padding-left:5%;
border-radius:4px;
font-size:12px;
font-size:0.75rem;
}
.p-newsCard__title {
margin-top:5.8%;
font-size:14px;
font-size:0.875rem;
line-height:1.65;
}
.p-newsCard__arrow {
position:absolute;
top:50%;
right:6.1%;
font-size:16px;
font-size:1rem;
transform:translateY(-50%);
}

/* News / Blog: archive pagination */
.p-newsPagination {
gap:23px;
margin-top:11.2%;
font-size:14px;
font-size:0.875rem;
}
.p-newsPagination a,
.p-newsPagination span {
min-width:10px;
}

/* News / Blog: single article */
.p-newsSingle {
padding-top:5.33%;
padding-right:5%;
padding-bottom:8.6%;
padding-left:5%;
border-top:4px solid #008BD2;
border-radius:0 0 8px 8px;
margin-top: 0;
}
.p-newsSingle__header {
margin-bottom:7.2%;
}
.p-newsSingle__title {
margin-top:10.5%;
margin-bottom:0;
font-size:22px;
font-size:1.375rem;
}
.p-newsSingle__body {
font-size:14px;
font-size:0.875rem;
line-height:2.05;
font-weight:500;
}
.p-newsSingle__body p {
margin-bottom:10%;
font-size:14px;
font-size:0.875rem;
line-height:2;
}
.p-newsSingle__body ul {
gap:0;
margin-bottom:8.6%;
}
.p-newsSingle__body li {
padding-left:6%;
font-size:14px;
font-size:0.875rem;
margin-bottom: 2%;
}
.p-newsSingle__body li::before {
top:0.85em;
width:5px;
height:5px;
}
.p-newsSingle__body figure {
margin-bottom:7.2%;
}
.p-newsSingle__body a {
font-size:14px;
font-size:0.875rem;
font-weight:400;
}

/* News / Blog: single article navigation */
.p-newsSingleNav {
grid-template-columns:42px 1fr 42px;
gap:18px;
margin-top:8.6%;
margin-right:0;
margin-bottom:11.2%;
margin-left:0;
text-align:center;
}
.p-newsSingleNav__prev,
.p-newsSingleNav__next {
flex:0 0 42px;
width:42px;
min-width:42px;
height:42px;
min-height:42px;
aspect-ratio:1 / 1;
border-radius:50%;
color:#ffffff;
font-size:0;
}
.p-newsSingleNav__back {
color:#008BD2;
}
.p-newsSingleNav__prev::before,
.p-newsSingleNav__next::after {
top:50%;
right:auto;
left:50%;
width:10px;
width:0.625rem;
height:10px;
height:0.625rem;
margin:0;
background:url('../images/common/icon_arrow_white_01.png') no-repeat center / contain;
content:"";
transform:translate(-50%, -50%);
}
.p-newsSingleNav__prev::before {
transform:translate(-50%, -50%) rotate(180deg);
}
.c-button:hover,
.c-button--contactForm:hover {
background:#2b6699;
}

/* ----- Shared final hero sizing: image pages ----- */
.p-pageHero--products,
.p-pageHero--company,
.p-pageHero--materials {
--sp-hero-text-x:0px;
--sp-hero-text-y:0px;
display:flex;
flex-direction:column;
aspect-ratio:auto;
min-height:0;
overflow:hidden;
border-radius:20px;
}
.p-pageHero--products .p-pageHero__body,
.p-pageHero--company .p-pageHero__body,
.p-pageHero--materials .p-pageHero__body {
position:relative;
display:flex;
flex:0 0 180px;
flex-basis:11.25rem;
flex-direction:column;
justify-content:center;
width:100%;
min-height:0;
padding-top:0;
padding-right:6%;
padding-bottom:0;
padding-left:6%;
transform:translate(var(--sp-hero-text-x), var(--sp-hero-text-y));
}
.p-pageHero--products .p-pageHero__body::before,
.p-pageHero--company .p-pageHero__body::before,
.p-pageHero--materials .p-pageHero__body::before {
display:block;
flex:0 0 1.35em;
margin-bottom:8px;
font-size:14px;
font-size:0.875rem;
content:"";
}
.p-pageHero--products .p-pageHero__visual,
.p-pageHero--company .p-pageHero__visual,
.p-pageHero--materials .p-pageHero__visual {
position:static;
flex:0 0 190px;
flex-basis:11.875rem;
width:100%;
min-height:0;
height:auto;
aspect-ratio:auto;
}
.p-pageHero--products .p-pageHero__visual img,
.p-pageHero--company .p-pageHero__visual img,
.p-pageHero--materials .p-pageHero__visual img {
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.p-pageHero--products .p-pageHero__title,
.p-pageHero--company .p-pageHero__title,
.p-pageHero--materials .p-pageHero__title {
margin-top:0;
margin-right:0;
margin-bottom:8px;
margin-left:0;
font-size:36px;
font-size:2.25rem;
line-height:1.1;
white-space:nowrap;
}
.p-pageHero--company .p-pageHero__title {
line-height:1.05;
white-space:normal;
}
.p-pageHero--products .p-pageHero__subtitle,
.p-pageHero--company .p-pageHero__subtitle,
.p-pageHero--materials .p-pageHero__subtitle {
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:0;
font-size:16px;
font-size:1rem;
line-height:1.35;
}

/* ----- Shared final hero sizing: no-image pages ----- */
.p-pageHero--contact,
.p-pageHero--privacy {
--sp-hero-text-x:0px;
--sp-hero-text-y:0px;
display:flex;
flex-direction:column;
width:100%;
max-width:100%;
max-height:none;
min-height:0;
aspect-ratio:auto;
overflow:hidden;
border-radius:20px;
}
.p-pageHero--contact .p-pageHero__body,
.p-pageHero--privacy .p-pageHero__body {
position:relative;
display:flex;
flex:0 0 180px;
flex-basis:11.25rem;
flex-direction:column;
justify-content:center;
width:100%;
min-height:0;
padding-top:0;
padding-right:6%;
padding-bottom:0;
padding-left:6%;
transform:translate(var(--sp-hero-text-x), var(--sp-hero-text-y));
}
.p-pageHero--contact .p-pageHero__title,
.p-pageHero--privacy .p-pageHero__title {
margin-top:0;
margin-right:0;
margin-bottom:8px;
margin-left:0;
font-size:36px;
font-size:2.25rem;
line-height:1.1;
white-space:nowrap;
transform:none;
}
.p-pageHero--contact .p-pageHero__subtitle,
.p-pageHero--privacy .p-pageHero__subtitle {
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:0;
font-size:16px;
font-size:1rem;
line-height:1.35;
transform:none;
}

/* ----- 01 TOP: hero final alignment ----- */
.p-hero .p-hero__slider {
border-radius:0 0 0 clamp(56px, 17.949vw, 70px);
}
.p-hero .p-hero__slide {
padding-top:clamp(72px, 23.077vw, 126px);
height:clamp(412px, 132.051vw, 721px);
min-height:clamp(412px, 132.051vw, 721px);
}
.p-hero .p-hero__inner,
.p-hero .p-hero__slide:nth-child(4) .p-hero__inner {
gap:clamp(24px, 7.692vw, 42px);
}
.p-hero .p-hero__panel,
.p-hero .p-hero__slide:nth-child(3) .p-hero__panel,
.p-hero .p-hero__slide:nth-child(4) .p-hero__panel {
height:clamp(104px, 33.333vw, 182px);
transform:none;
}
.p-hero .p-hero__subtitle,
.p-hero .p-hero__slide:nth-child(3) .p-hero__subtitle,
.p-hero .p-hero__slide:nth-child(4) .p-hero__subtitle {
margin-top:clamp(16px, 5.128vw, 28px);
}
.p-hero .p-hero__title {
transform:translate(calc(clamp(0.8px, 0.256vw, 1.4px) * -1), calc(clamp(4px, 1.282vw, 7px) * -1));
}
.p-hero .p-hero__subtitle {
transform:translateX(calc(clamp(3.2px, 1.026vw, 5.6px) * -1));
}
.p-hero .p-hero__visual,
.p-hero .p-hero__slide:nth-child(4) .p-hero__visual {
transform:translateY(clamp(6px, 2.051vw, 11px));
}

@media screen and (min-width:620px) and (max-width:767px) {
.p-hero .p-hero__slide {
height:clamp(760px, 118.64vw, 910px);
min-height:clamp(760px, 118.64vw, 910px);
}
}

/* ----- iOS 13 fallback ----- */
@supports not (width: clamp(1px, 2vw, 3px)) {
.c-header {
padding:0 60px 0 32px;
}
.c-header__logoImage {
transform:translate(-16px, 2px);
}
.p-hero .p-hero__slider {
border-radius:0 0 0 62px;
}
.p-hero .p-hero__slide {
height:535px;
min-height:535px;
padding-top:90px;
background-position:-18px 0;
background-size:202px auto;
}
.p-hero .p-hero__inner,
.p-hero .p-hero__slide:nth-child(4) .p-hero__inner {
gap:30px;
}
.p-hero .p-hero__panel,
.p-hero .p-hero__slide:nth-child(3) .p-hero__panel,
.p-hero .p-hero__slide:nth-child(4) .p-hero__panel {
height:130px;
padding:0 32px;
transform:none;
}
.p-hero .p-hero__subtitle,
.p-hero .p-hero__slide:nth-child(3) .p-hero__subtitle,
.p-hero .p-hero__slide:nth-child(4) .p-hero__subtitle {
min-height:34px;
margin-top:20px;
padding-right:12px;
padding-left:12px;
}
.p-hero .p-hero__title {
transform:translate(-1px, -5px);
}
.p-hero .p-hero__subtitle {
transform:translateX(-4px);
}
.p-hero .p-hero__visual,
.p-hero .p-hero__slide:nth-child(4) .p-hero__visual {
width:calc(100% - 30px);
margin-left:30px;
transform:translateY(18px);
}
.p-hero .p-hero__slide:nth-child(4) .p-hero__subtitle {
font-size:14px;
line-height:1.25;
white-space:normal;
transform:translateX(-18px);
}
.p-hero .p-hero__slide:nth-child(4) .p-hero__title {
transform:translate(-19px, -5px);
}
.p-hero .p-hero__slide:nth-child(4) .p-hero__visual {
width:calc(100% - 18px);
margin-left:18px;
transform:translateY(28px);
}
.p-pageHero--products .p-pageHero__visual,
.p-pageHero--company .p-pageHero__visual,
.p-pageHero--materials .p-pageHero__visual,
.p-detailHero .p-detailHero__visual {
height:190px;
min-height:190px;
background:transparent;
}
.p-pageHero--products .p-pageHero__visual img,
.p-pageHero--company .p-pageHero__visual img,
.p-pageHero--materials .p-pageHero__visual img,
.p-detailHero .p-detailHero__visual img {
display:block;
height:100%;
min-height:100%;
object-fit:cover;
object-position:center center;
}
.p-contactForm {
gap:0;
}
.p-formRow {
display:block;
margin-bottom:26px;
}
.p-formRow > label {
display:block;
margin-bottom:12px;
}
.p-formRow > label + * {
display:block;
margin-top:12px;
}
.p-formSplit,
.p-formNameField,
.p-formSelectGroup {
display:block;
}
.p-formSplit > * + *,
.p-formNameField + .p-formNameField,
.p-formSelectGroup > * + * {
margin-top:12px;
}
.p-formNameField__label {
display:block;
margin-bottom:8px;
}
.c-sliderDots {
gap:0;
}
.c-sliderDots__dot {
width:12px;
height:12px;
margin:0 6px;
}
.p-products__grid {
display:flex;
flex-wrap:wrap;
gap:0;
margin:-10px -10px 0;
}
.p-products__grid .c-card {
flex:0 0 calc(50% - 20px);
width:calc(50% - 20px);
margin:10px;
}
.p-products__grid .c-card::before {
content:"";
display:block;
padding-top:100%;
}
.p-products__grid .c-card {
position:relative;
overflow:hidden;
}
.p-products__grid .c-card > * {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
.p-products__grid .c-card__image {
width:100%;
height:100%;
object-fit:cover;
}
.p-materials__grid {
display:flex;
flex-wrap:wrap;
gap:0;
margin:-6px -8px 0;
}
.p-materials__grid .c-materialCard {
flex:0 0 calc(50% - 16px);
width:calc(50% - 16px);
height:auto;
margin:6px 8px 12px;
}
.p-materials__grid .c-materialCard:not(.c-materialCard--large)::before {
content:"";
display:block;
padding-top:76%;
}
.p-materials__grid .c-materialCard {
position:relative;
overflow:hidden;
}
.p-materials__grid .c-materialCard:not(.c-materialCard--large) > * {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
.p-materials__grid .c-materialCard:not(.c-materialCard--large) .c-materialCard__body {
top:auto;
height:38%;
}
.p-materials__grid .c-materialCard--large {
flex-basis:calc(100% - 16px);
width:calc(100% - 16px);
height:148px;
padding-bottom:0;
}
.p-materials__grid .c-materialCard--large .c-materialCard__image {
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.p-materials__grid .c-materialCard--large .c-materialCard__body {
height:auto;
}
.c-spMenu {
overflow-y:scroll;
height:calc(100vh - 60px);
max-height:calc(100vh - 60px);
-webkit-overflow-scrolling:touch;
}
}

}

@media screen and (max-width:319px) {
.c-header__company {
display:none;
}
}

@media screen and (max-width:200px) {
.c-header__logoImage {
width:80%;
max-width:120px;
}
}