/* ==========================================================================
CSS architecture (FLOCSS)
- Base:要素そのもののスタイルの初期化やリセット
- Layout:ページ全体のヘッダー、フッター、メインなどの大枠レイアウト
- Component :汎用性の高い（下層でも使い回す）小さな独立した部品
- Project :TOP固有、あるいは下層の特定画面固有の複合的なパーツ
- Utility :1つの役割だけを持つ補助クラス（必要に応じて追記してください）

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
========================================================================== */

/* ==========================================================================
Base
========================================================================== */
*, *::before, *::after{
box-sizing:border-box;
}
html{
--header-offset:120px;
font-size:16px;
font-size:clamp(12px, calc(0.59524vw + 7.43px), 16px);
line-height:1.6;
scroll-behavior:smooth;
scroll-padding-top:var(--header-offset);
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, object, ruby, section, summary, time, mark, audio, video{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border:0;
vertical-align:baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
display:block;
}
body{
min-height:100vh;
background:#ffffff;
color:#2D2E2F;
font-size:16px;
font-size:1rem;
line-height:1.6;
font-family: 'Roboto', 'Noto Sans JP', sans-serif;
font-weight:400;
font-optical-sizing:auto;
font-style:normal;
}
ol, ul{
list-style:none;
}
blockquote, q{
quotes:none;
}
blockquote::before, blockquote::after,
q::before, q::after{
content:'';
content:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}
img{
display:block;
max-width:100%;
height:auto;
}
a{
color:inherit;
text-decoration:none;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
button, input, textarea{
font:inherit;
}
h2, h3, h4, h5, h6{
line-height:1.5;
}
p{
line-height:1.6;
}
.c-pconly{
display:inherit;
}
.c-sponly{
display:none;
}
.c-nowrap{
white-space:nowrap;
}

  .u-spbr {
    display: none;
  }

/* ==========================================================================
Layout
========================================================================== */
.l-container{
width:100%;
max-width:1360px;
margin:auto;
}
.l-page{
min-height:100vh;
}
.l-header{
position:sticky;
top:0;
z-index:20;
display:flex;
height:100px;
padding: 0 20px;
border-bottom:none;
background:#ffffff;
box-sizing: border-box;
}
.l-main{
width:100%;
max-width:100%;
}
.l-main-inner{
width:100%;
margin:0px auto 0px auto;
}
.l-section{
width:100%;
max-width:1200px;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
padding-top:0px;
padding-right:0px;
padding-bottom:6%;
padding-left:0px;
}
.l-sectionBand{
padding-right:20px;
padding-left:20px;
box-sizing:border-box;
}
.l-section--accent {
position:relative;
overflow:hidden;
width:100%;
background:#EFF4F7;
}
.l-section--accent .l-container {
position:relative;
z-index:1;
overflow:hidden;
}
.l-section--accent::before {
position:absolute;
top:0px;
left:max(0px, calc((100% - 1360px) / 2));
z-index:0;
width:400px;
width:25rem;
max-width:60%;
height:400px;
height:25rem;
background-image:url('../images/common/bg_agrumark_body.png');
background-repeat:no-repeat;
background-position:left top;
background-size:contain;
pointer-events:none;
content:"";
}
.l-footer__bg{
width:100%;
background:#2D2E2F;
border-bottom: 6px #008BD2 solid;
}
.l-footer {
padding:3.35% 3.35% 3.35% 3.35%;
}
.l-footer p {
margin:0px 0px 0px 0px;
color:#ffffff;
}

/* ==========================================================================
Component
========================================================================== */
/* ----- c-header ----- */
.c-header{
display:flex;
align-items:center;
justify-content:flex-start;
width:100%;
max-width:1360px;
margin:0px auto 0px auto;
}
.c-header__brand{
display:flex;
align-items:center;
gap:clamp(12px, calc(0.89286vw + 5.14px), 18px);
}
.c-header__logoLink{
display:inline-flex;
align-items:center;
margin:0;
}
.c-header__logoImage{
display:block;
width:170px;
width:clamp(132px, calc(5.65476vw + 88.57px), 170px);
height:auto;
}
.c-header__brandText{
display:flex;
flex-direction:column;
justify-content:center;
height:40px;
}
.c-header__company{
margin:0px 0px 0px 0px;
font-size:14px;
font-size:0.875rem;
font-weight:700;
}
.c-header__actions{
display:flex;
align-items:center;
flex-shrink:0;
gap:14px;
}
.c-header__hamburger,
.c-spMenu{
display:none;
}

/* ----- c-globalNav ----- */
.c-globalNav{
display:flex;
align-items:center;
justify-content: space-between;
flex-wrap:wrap;
width:39%;
width:clamp(287px, 39%, 530px);
margin-top:0px;
margin-right:2.35%;
margin-right:clamp(18px, 2.35%, 32px);
margin-bottom:0px;
margin-left:auto;
font-size:14px;
font-size:0.875rem;
}
.c-globalNav__link{
padding:0;
font-weight:700;
line-height:1.4;
white-space:nowrap;
}
.c-globalNav__link:hover{
color:#008BD2;
}

.c-sliderDots{
display:flex;
justify-content:center;
gap:21px;
padding:20px 0px 0px 0px;
margin-top:22px;
}
.c-sliderDots__dot{
width:12px;
height:12px;
border-radius:50%;
background:#999999;
cursor:pointer;
transition:background 0.3s ease;
}
.c-sliderDots__dot.is-active{
background:#008BD2;
}

/* ----- c-sectionHeader ----- */
.c-sectionHeader{
margin-top:0px;
margin-right:0px;
margin-bottom:3.7%;
margin-left:0px;
}
.c-sectionHeader__title{
font-size:36px;
font-size:2.25rem;
}
.c-sectionHeader__description{
margin:0px 0px 0px 0px;
font-size:16px;
font-size:1rem;
line-height:2;
}
.c-sectionHeader__inner{
display:flex;
flex-direction:row;
align-items:center;
gap:22px;
}
.c-sectionFooter{
display:flex;
justify-content:flex-end;
margin-top:3.5%;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}

/* ----- c-label ----- */
.c-label{
display:inline-block;
margin-top:0px;
margin-right:0px;
margin-bottom:7px;
margin-left:0px;
color:#008BD2;
font-size:20px;
font-size:1.25rem;
font-weight:700;
letter-spacing:0;
}
.c-label::before {
display:inline-block;
width:22px;
height:6px;
margin-top:0px;
margin-right:12px;
margin-bottom:3px;
margin-left:0px;
background-image:url('../images/common/icon_heading_line.png');
background-repeat:no-repeat;
background-size:22px 6px;
vertical-align:middle;
content:"";
}
.c-label--inverse{
color:rgba(255, 255, 255, 0.85);
}

/* ----- c-button ----- */
.c-button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 20px 12px 20px;
border-radius:999px;
transition:background-color 0.8s ease, box-shadow 0.8s ease, color 0.8s ease;
font-weight: 700;
}
.c-button:hover{
background:#2b6699;
}
.c-button--primary {
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
gap:clamp(8px, calc(0.29762vw + 5.71px), 10px);
width:100%;
max-width:160px;
max-width:clamp(132px, calc(4.16667vw + 100px), 160px);
height:40px;
height:clamp(38px, calc(0.29762vw + 35.71px), 40px);
padding:0px 24px 0px 24px;
padding:0px clamp(18px, calc(0.89286vw + 11.14px), 24px) 0px clamp(18px, calc(0.89286vw + 11.14px), 24px);
border-radius:30px;
background:#008BD2;
color:#ffffff;
font-size:14px;
font-size:0.875rem;
font-weight:700;
white-space:nowrap;
box-sizing:border-box;
transition:background-color 0.8s ease, box-shadow 0.8s ease, color 0.8s ease;
}
.c-button--primary .c-button__icon {
display:block;
flex-shrink:0;
width:18px;
width:clamp(16px, calc(0.29762vw + 13.71px), 18px);
height:auto;
margin: 0;
padding:0px 0px 0px 0px;
}
.c-button--secondary{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
max-width:270px;
height:60px;
padding:1.75% 5% 1.75% 5%;
border-radius:999px;
background:#008BD2;
color:#ffffff;
box-sizing:border-box;
transition:background-color 0.8s ease, box-shadow 0.8s ease, color 0.8s ease;
}
.c-button--secondary::after {
position:absolute;
top:50%;
right:12px;
width:10px;
height:10px;
background:url('../images/common/icon_arrow_white_01.png') no-repeat center / contain;
content:"";
transform:translateY(-50%);
}
.c-button--tertiary{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
max-width:270px;
height:60px;
padding:1.75% 5% 1.75% 5%;
border-radius:999px;
background:#008BD2;
color:#ffffff;
box-sizing:border-box;
transition:background-color 0.8s ease, box-shadow 0.8s ease, color 0.8s ease;
}
.c-button--tertiary::after {
position:absolute;
top:50%;
right:12px;
width:10px;
height:10px;
background:url('../images/common/icon_arrow_white_01.png') no-repeat center / contain;
content:"";
transform:translateY(-50%);
}
.c-button__icon{
display:inline-block;
width:16px;
height:auto;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:10px;
}
.c-button--contactForm {
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
width:100%;
max-width:420px;
height:120px;
border-radius:999px;
background:#008BD2;
color:#ffffff;
font-size:24px;
font-size:1.5rem;
font-weight:700;
box-shadow:none;
transition:background-color 0.8s ease, color 0.8s ease;
}
.c-button--contactForm:hover {
background:#2b6699;
box-shadow:none;
}
.c-button--contactForm::before {
content:"";
flex-shrink:0;
display:inline-block;
width:1.25em;
height:1em;
background-image:url("../images/common/icon_mail.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
transition:transform 0.3s ease;
}
.c-button--contactForm:hover::before {
transform:scale(1.05);
}

/* ----- c-card ----- */
.c-cardGrid{
display:grid;
gap:40px;
}
.p-products__grid{
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:clamp(24px, 2.78vw, 40px);
}
.p-materials__grid{
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:24px;
}
.c-card{
position:relative;
overflow:hidden;
min-height:auto;
border-radius:22px;
color:#ffffff;
-webkit-clip-path:inset(0 round 22px);
clip-path:inset(0 round 22px);
-webkit-mask-image:-webkit-radial-gradient(#ffffff, #000000);
transform:translateZ(0);
}
.c-card--image{
min-height:auto;
}
.c-card__image{
display:block;
width:100%;
height:100%;
object-fit:cover;
border-radius:inherit;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.p-products__grid .c-card__image {
transform:scale(1);
transition:transform 0.8s ease;
}
.p-products__grid .c-card:hover .c-card__image {
transform:scale(1.2);
}
.c-card__body{
position:absolute;
right:0px;
bottom:0px;
left:0px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:100%;
padding:24px 3% 24px 3%;
text-align:center;
}
.c-card__eyebrow{
margin:10px 0px 14px 0px;
font-size:30px;
font-size:1.875rem;
line-height:1.2;
font-weight:700;
}
.c-card__text{
margin:0px 0px 0px 0px;
font-size:16px;
font-size:1rem;
font-weight: 700;
}

/* ----- c-overview ----- */
.c-overview{
display:flex;
align-items:start;
justify-content:space-between;
}
.c-overviewHeader .c-sectionHeader__title{
margin-top:0px;
margin-right:0px;
margin-bottom:7%;
margin-left:0px;
}
.c-overviewContent{
display:flex;
flex-direction:column;
align-items:flex-end;
}
.c-overviewHeader, .c-overviewContent{
width:48.5%;
}
.c-overviewImage{
overflow:hidden;
margin-top:0px;
margin-right:0px;
margin-bottom:5.5%;
margin-left:0px;
border-radius:32px;
}
.c-overviewImage img{
display:block;
width:100%;
}

/* ----- c-materialCard ----- */
.c-materialCard {
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
overflow:hidden;
width:100%;
aspect-ratio:1 / 1;
border:1px solid rgba(0, 115, 201, 0.08);
border-radius:28px;
background:#ffffff;
text-decoration:none;
box-sizing:border-box;
-webkit-clip-path:inset(0 round 28px);
clip-path:inset(0 round 28px);
-webkit-mask-image:-webkit-radial-gradient(#ffffff, #000000);
transform:translateZ(0);
}
.c-materialCard__image {
position:absolute;
inset:0;
z-index:1;
display:block;
width:100%;
height:100%;
object-fit:cover;
border-radius:inherit;
transform:scale(1);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transition:transform 0.8s ease;
}
.c-materialCard:hover .c-materialCard__image {
transform:scale(1.2);
}
.c-materialCard__body {
position:relative;
z-index:2;
display:flex;
flex-direction:column;
justify-content:center;
width:100%;
height:33%;
padding:0 8px;
background:rgba(0, 139, 210, 0.7);
text-align:center;
box-sizing:border-box;
}
.c-materialCard__title {
margin:0 0 2px 0;
color:#ffffff;
font-size:24px;
font-size:1.5rem;
line-height:1.1;
font-weight:700;
}
.c-materialCard__text {
margin:0;
color:#ffffff;
font-size:13px;
font-size:0.8125rem;
line-height:1.2;
font-weight:700;
}
.c-materialCard.c-materialCard--large {
grid-column:span 2;
width:100%;
max-width:none;
height:100%;
aspect-ratio:auto;
}

/* ----- c-partnerBanner ----- */
.c-partnerBanner {
display:block;
width:100%;
max-width:900px;
margin:0px auto 0px auto;
padding:2.5% 3% 2.5% 3%;
border:1px solid #e2e8f0;
border-radius:999px;
background:#ffffff;
opacity:1;
transition:opacity 0.8s ease, background-color 0.8s ease, border-color 0.8s ease;
}
.c-partnerBanner:hover {
border-color:#cbd5e1;
background-color:#f8fafc;
opacity:0.8;
}
.c-partnerBanner__content {
display:flex;
align-items:center;
justify-content:center;
gap:24px;
}
.c-partnerBanner__logo {
display:block;
width:100%;
max-width:180px;
object-fit:contain;
}
.c-partnerBanner__text {
display:inline-flex;
align-items:center;
margin:0px 0px 0px 0px;
font-size:20px;
font-size:1.25rem;
font-weight:700;
}
.c-partnerBanner__text::after {
content:"";
display:inline-block;
flex-shrink:0;
width:0.7em;
height:0.7em;
margin-left:1.2em;
background-image:url("../images/common/icon_arrow_black_01.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}

/* ----- c-newsList ----- */
.c-newsList {
display:flex;
flex-direction:column;
border-top:none;
}
.c-newsItem {
display:flex;
align-items:center;
justify-content:flex-start;
gap:32px;
padding:4.25% 3% 4.25% 4.5%;
margin-top:0px;
margin-right:0px;
margin-bottom:4.85%;
margin-left:0px;
border:none;
border-top:4px solid #008BD2;
border-radius:0px 0px 20px 20px;
background:#ffffff;
box-shadow:0px 4px 20px rgba(13, 26, 45, 0.04);
}
.c-newsItem:last-child {
margin-top:0px;
margin-right:0px;
margin-bottom:2.425%;
margin-left:0px;
}
.c-newsItem__head {
display:flex;
align-items:center;
gap:16px;
flex-shrink:0;
width:240px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}
.c-newsItem__date {
color:#2D2E2F;
font-size:16px;
font-size:1rem;
font-weight:700;
}
.c-newsItem__tag {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:100px;
padding:6px 12px 6px 12px;
border-radius:6px;
background:#008BD2;
color:#ffffff;
font-size:13px;
font-size:0.8125rem;
font-weight:700;
}
.c-newsItem__text {
margin:0px 0px 0px 0px;
color:#2D2E2F;
font-size:15px;
font-size:0.9375rem;
line-height:1.7;
font-weight:400;
}

/* ----- c-contact ----- */
.c-contactCard {
color:#ffffff;
text-align:center;
}
.c-contactCard__header {
margin-top:0px;
margin-right:0px;
margin-bottom:0.75%;
margin-left:0px;
}
.c-contactCard__title {
margin:1% 0px 0px 0px;
font-size:36px;
font-size:2.25rem;
font-weight:700;
letter-spacing:-0.01em;
}
.c-contactCard__subImageWrap {
margin-top:1%;
margin-bottom:1%;
}
.c-contactCard__subImage {
display:inline-block;
width:6px;
height:60px;
object-fit:contain;
}
.c-contactCard__box {
width:100%;
max-width:880px;
margin:0px auto 0px auto;
padding:3% 3% 3% 3%;
border-radius:24px;
background:#f7fafc;
color:#2D2E2F;
box-shadow:0px 20px 45px rgba(0, 0, 0, 0.2);
}
.c-contactCard__boxTitle {
margin-top:0px;
margin-right:0px;
margin-bottom:28px;
margin-left:0px;
color:#008BD2;
font-size:36px;
font-size:2.25rem;
font-weight:700;
}
.c-contactCard__boxText {
margin-top:0px;
margin-right:0px;
margin-bottom:4.5%;
color:#2D2E2F;
font-size:16px;
font-size:1rem;
line-height:1.9;
}

/* ----- c-footer ----- */
.c-footerGrid {
display:grid;
grid-template-columns:1.15fr 1.2fr 1.2fr 1fr;
margin-top:0px;
margin-right:0px;
margin-bottom:60px;
margin-left:0px;
}
.c-footerBrand {
display:flex;
flex-direction:column;
gap:34px;
min-width:0;
padding-right:50px;
padding-right:clamp(28px, 3.47vw, 50px);
}
.c-footerBrand__logoLink {
display:inline-block;
width:100%;
max-width:220px;
max-width:clamp(150px, 15.28vw, 220px);
}
.c-footerBrand__logoImage {
display:block;
width:100%;
height:auto;
}
.c-footerBrand__address {
margin-top:0px;
margin-right:0px;
margin-bottom:5%;
margin-left:0px;
font-size:16px;
font-size:1rem;
line-height:1.9;
letter-spacing:0.03em;
}
.c-footerBrand__address strong {
display:flex;
flex-wrap:wrap;
margin-top:0px;
margin-right:0px;
margin-bottom:5%;
margin-left:0px;
font-size:18px;
font-size:1.125rem;
white-space:normal;
}
.c-footerBrand__address strong span {
white-space:nowrap;
}
.c-footerBlock {
margin-top:0px;
margin-right:0px;
margin-bottom:35px;
margin-left:0px;
}
.c-footerBlock:last-child {
margin-bottom:0px;
}
.c-footerColumn{
padding-top:0px;
padding-right:15%;
padding-bottom:0px;
padding-left:0px;
}
.c-footerColumn h3 {
margin:0px 0px 20px 0px;
color:#ffffff;
font-size:18px;
font-size:1.125rem;
font-weight:700;
letter-spacing:0.05em;
}
.c-footerColumn a {
position:relative;
display:block;
margin-top:0px;
margin-right:0px;
margin-bottom:22px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:18px;
color:#ffffff;
font-size:16px;
font-size:1rem;
line-height:1.4;
text-decoration:none;
transition:color 0.2s ease;
}
.c-footerColumn a::before {
position:absolute;
top:2px;
left:0px;
color:#008BD2;
font-size:11px;
font-size:0.6875rem;
content:"▶";
}
.c-footerColumn a span {
display:block;
margin-top:4px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
color:rgba(255, 255, 255, 0.9);
font-size:12px;
font-size:0.75rem;
font-weight:400;
}
.c-footerColumn a:hover {
color:#008BD2;
}
.c-footerColumn a:hover span {
color:rgba(255, 255, 255, 0.7);
}
.c-footerColumn h3 .c-footerColumn__headingLink {
position:static;
display:inline;
margin:0;
padding:0;
color:#ffffff;
font-size:inherit;
line-height:inherit;
font-weight:inherit;
letter-spacing:inherit;
text-decoration:none;
transition:opacity 0.2s ease;
}
.c-footerColumn h3 .c-footerColumn__headingLink::before {
content:none;
}
.c-footerColumn h3 .c-footerColumn__headingLink:hover {
color:#ffffff;
opacity:0.8;
}
.c-footerColumn__divider {
height:1px;
margin:25px 0px 25px 0px;
background:#ffffff;
}
.c-footerBottom {
padding-top:30px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
text-align:center;
}
.c-footerBottom__manufacture {
margin-top:0px;
margin-right:0px;
margin-bottom:1.7% !important;
margin-left:0px;
color:#ffffff;
font-size:14px;
font-size:0.875rem;
font-family:"Roboto", sans-serif;
}
.c-footerCopyright {
color:#ffffff;
font-size:14px;
font-size:0.875rem;
font-family:"Roboto", sans-serif;
text-align:center;
}

/* ==========================================================================
Project
========================================================================= */
.p-products{
padding-top:6.5%;
}
.p-overview{
position:relative;
z-index:1;
padding-top:6%;
}
.p-materials{
padding-top:6%;
}
.p-partner{
padding-top:6%;
padding-bottom:6%;
    border-top: 2px solid #EFEFEF;
}
.p-news{
padding-top:6%;
}
.p-contact{
padding-top:4%;
}

/* ----- 01 TOP: hero ----- */
.p-hero{
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px;
border-bottom-left-radius:32px;
    border-top: 6px solid #008BD2;
}
.p-hero__slider{
position:relative;
border-radius:0px 0px 0px 120px;
background-color:#EFEFEF;
}
.p-hero__slide{
position:absolute;
top:0px;
left:0px;
width:100%;
padding:2.5% 0% 2.5% 6%;
background-image:url('../images/top/agrumark_slide.png');
background-repeat:no-repeat;
background-position:0px 0px;
background-size:18% auto;
opacity:0;
visibility:hidden;
transition:opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}
.p-hero__slide.is-active{
position:relative;
z-index:2;
opacity:1;
visibility:visible;
}
.p-hero__inner{
display:flex;
align-items:center;
justify-content:space-between;
}
.p-hero__panel{
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
overflow:visible;
width:40%;
height:320px;
height:clamp(230px, calc(13.3929vw + 127.14px), 320px);
padding:0px 0px 0px 0px;
background:transparent;
}
.p-hero__panel::before{
display:none;
}
.p-hero__title{
margin-top:61px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
margin-top:clamp(58px, calc(0.4464vw + 54.57px), 61px);
font-size:80px;
font-size:clamp(48px, calc(4.7619vw + 11.43px), 80px);
line-height:1;
font-weight:600;
}
.p-hero__slide:nth-child(4) .p-hero__title{
margin-top:36px;
margin-top:clamp(32px, calc(0.5952vw + 27.43px), 36px);
font-size:80px;
font-size:clamp(42px, calc(5.6548vw - 1.43px), 80px);
}
.p-hero__slide:nth-child(3) .p-hero__title{
margin-top:48px;
margin-top:clamp(42px, calc(0.8929vw + 35.14px), 48px);
}
.p-hero__subtitle{
display:inline-flex;
align-items:center;
margin-top:31px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
margin-top:clamp(18px, 2.15vw, 31px);
padding:3% 5% 3.5% 5%;
border-radius:100px;
background:#008BD2;
color:#ffffff;
font-size:32px;
font-size:clamp(16.8px, calc(2.2619vw - 0.57px), 32px);
line-height:1.4;
font-weight:700;
}
.p-hero__subtitle a{
color:inherit;
text-decoration:none;
}
.p-hero__slide:nth-child(3) .p-hero__subtitle{
padding-right:7%;
padding-left:7%;
}
.p-hero__visual{
display:grid;
place-items:center;
width:59.5%;
max-width:760px;
}

/* ----- 01 TOP: news ----- */
.p-topNewsBand {
background:#EFEFEF;
}
.p-news__container {
display:flex;
align-items:flex-start;
justify-content:space-between;
}
.p-news__left {
width:25%;
}
.p-news__right {
width:74%;
}
.p-news__header {
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}
.p-news__footer {
display:flex;
justify-content:flex-end;
margin-top:32px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}

/* ----- 01 TOP: contact CTA ----- */
/* ----- c-contactSection: contact CTA section ----- */
.c-contactSection {
padding-top:1%;
padding-right:max(20px, 5.33%);
padding-bottom:3.25%;
padding-left:max(20px, 5.33%);
background:url('../../assets/images/common/contact_bg.png') no-repeat center center / cover !important;
}
.c-contactSection .c-label--inverse::before {
display:none;
}

/* ----- p-pageHero ----- */
.p-pageHero {
display:grid;
grid-template-columns:51.5% 48.5%;
align-items:stretch;
height:360px;
height:clamp(300px, calc(8.9286vw + 231.43px), 360px);
overflow:hidden;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
border-radius:30px;
background:#008BD2;
}
.p-pageHero__body {
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
height:100%;
padding-top:0;
padding-right:11.5%;
padding-bottom:0px;
padding-left:11.5%;
color:#ffffff;
}
.p-pageHero__title {
margin-top:2%;
margin-right:0px;
margin-bottom:0;
margin-left:0px;
font-size:72px;
font-size:4.5rem;
line-height:1.2;
font-weight:700;
}
.p-pageHero__subtitle {
margin-top:1.5%;
margin-right:0px;
margin-bottom:0;
margin-left:0px;
font-size:24px;
font-size:1.5rem;
line-height:1.3;
font-weight:700;
}
.p-pageHero__visual {
min-width:0;
height:100%;
overflow:hidden;
}
.p-pageHero__visual img {
display:block;
width:100%;
height:100%;
object-fit:cover;
}

/* ----- c-breadcrumb: lower page breadcrumb ----- */
.c-breadcrumb {
width:100%;
max-width:1200px;
margin-top:16px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
}
.c-breadcrumb__list {
display:flex;
align-items:center;
gap:8px;
color:#2D2E2F;
font-size:16px;
font-size:1rem;
font-weight:700;
}
.c-breadcrumb__item {
display:flex;
align-items:center;
gap:12px;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
display:block;
width:6px;
height:10px;
background:url('../images/common/icon_arrow_breadcrumb.png') no-repeat center / contain;
content:"";
}

/* ----- 02 Products: index ----- */
.p-productsPage {
padding-top:5.5%;
padding-bottom:6%;
}
.p-productsPage__header {
margin-bottom:1.5%;
}
.p-productList {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
column-gap:40px;
row-gap:42px;
}
.p-productItem__imageLink {
position:relative;
display:block;
overflow:hidden;
border-radius:20px;
background:#2D2E2F;
-webkit-clip-path:inset(0 round 20px);
clip-path:inset(0 round 20px);
-webkit-mask-image:-webkit-radial-gradient(#ffffff, #000000);
transform:translateZ(0);
}
.p-productItem__image {
display:block;
width:100%;
aspect-ratio:580 / 270;
object-fit:cover;
border-radius:inherit;
transform:scale(1);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transition:transform 0.8s ease;
}
.p-productItem__imageLink:hover .p-productItem__image {
transform:scale(1.2);
}
.p-productItem__overlay {
position:absolute;
top:50%;
left:50%;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
width:88%;
color:#ffffff;
text-align:center;
transform:translate(-50%, -50%);
}
.p-productItem__name {
font-size:34px;
font-size:2.125rem;
line-height:1.1;
font-weight:700;
}
.p-productItem__kana {
margin-top:8px;
font-size:16px;
font-size:1rem;
line-height:1.2;
font-weight:700;
}
.p-productItem__arrow {
position:absolute;
top:50%;
right:18px;
z-index:3;
width:12px;
height:20px;
background:url('../images/common/icon_arrow_white_02.png') no-repeat center / contain;
transform:translateY(-50%);
}
.p-productItem__title {
margin-top:22px;
margin-right:0px;
margin-bottom:18px;
margin-left:0px;
font-size:22px;
font-size:1.375rem;
line-height:1.55;
font-weight:700;
}
.p-productItem__text {
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
color:#2D2E2F;
font-size:16px;
font-size:1rem;
line-height:2;
font-weight:400;
}

/* ----- p-gehrBanner ----- */
.p-gehrBanner {
position:relative;
display:grid;
grid-template-columns:42% 1fr;
align-items:center;
gap:56px;
min-height:260px;
margin-top:58px;
padding-top:40px;
padding-top:2.5rem;
padding-right:40px;
padding-right:2.5rem;
padding-bottom:40px;
padding-bottom:2.5rem;
padding-left:40px;
padding-left:2.5rem;
border:1px solid #e2e2e2;
background:#ffffff;
}
.p-gehrBanner__logoArea {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:auto;
background:#f0f0f0;
text-align:center;
padding: 40px 0;
padding: 2.5rem 0;
}
.p-gehrBanner__logo {
width:210px;
margin-bottom:22px;
}
.p-gehrBanner__label {
margin-top:0px;
margin-right:0px;
margin-bottom:6px;
margin-left:0px;
font-size:29px;
font-size:1.8125rem;
line-height:1;
font-weight:700;
}
.p-gehrBanner__sub {
margin:0px 0px 0px 0px;
font-size:16px;
font-size:1rem;
font-weight:700;
}
.p-gehrBanner__textArea {
min-width:0;
padding-right:48px;
padding-right:clamp(30px, 3.33vw, 48px);
}
.p-gehrBanner__title {
margin-top:0px;
margin-right:0px;
margin-bottom:18px;
margin-left:0px;
font-size:22px;
font-size:1.375rem;
line-height:1.6;
font-weight:700;
}
.p-gehrBanner__title span{
font-size:18px;
font-size:1.125rem;
}
.p-gehrBanner__text {
margin:0px 0px 0px 0px;
font-size:16px;
font-size:1rem;
line-height:2;
}
.p-gehrBanner__arrow {
position:absolute;
top:50%;
right:30px;
right:clamp(12px, 2.08vw, 30px);
width:0.875em;
height:1.25em;
background:url('../images/common/icon_arrow_black_02.png') no-repeat center / contain;
transform:translateY(-50%);
}

/* ----- 02 Products: catalog download ----- */
.p-catalogDownload {
padding-top:5%;
padding-right:20px;
padding-bottom:5%;
padding-left:20px;
background:url('../images/common/bg_catalog.png') no-repeat center / cover;
}
.p-catalogDownload__card {
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
max-width:880px;
min-height:330px;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
padding-top:3.5%;
padding-right:2%;
padding-bottom:3%;
padding-left:4.5%;
border-radius:24px;
background:#ffffff;
font-size:24px;
font-size:1.5rem;
}
.p-catalogDownload__title {
margin-top:0px;
margin-right:0px;
margin-bottom:7%;
margin-left:0px;
font-size:36px;
font-size:2.25rem;
line-height:1.4;
font-weight:700;
}
.p-catalogDownload__text {
margin-top:0px;
margin-right:0px;
margin-bottom:7%;
margin-left:0px;
font-size:16px;
font-size:1rem;
line-height:2;
}
.p-catalogDownload__button {
gap:12px;
width:100%;
max-width:420px;
height:100%;
min-height: 120px;
border-radius:16px;
background-color:#2D2E2F;
color:#ffffff;
font-size:24px;
font-size:1.5rem;
font-weight:700;
}

.c-button.p-catalogDownload__button:hover,
.p-catalogDownload__button:hover {
background-color:#444444;
}
.p-catalogDownload__icon {
width:18px;
height:auto;
}
.p-catalogDownload__image {
flex-shrink:0;
width:40%;
max-width: 314px;
}

/* ----- 02 Products: detail hero ----- */
.p-detailHero {
display:grid;
grid-template-columns:51.5% 48.5%;
align-items:stretch;
height:360px;
height:clamp(300px, calc(8.9286vw + 231.43px), 360px);
overflow:hidden;
border-radius:30px;
}
.p-detailHero__body {
display:flex;
flex-direction:column;
justify-content: center;
min-width:0;
height:100%;
padding-top:0px;
padding-right:11.5%;
padding-bottom:3%;
padding-left:11.5%;
color:#ffffff;
}
.p-detailHero--agruline .p-detailHero__body {
background:#F6C900;
}
.p-detailHero--agruchem .p-detailHero__body {
background:#005091;
}
.p-detailHero--agruwelding .p-detailHero__body {
background:#83929B;
}
.p-detailHero--semifinished .p-detailHero__body {
background:#0092AE;
}
.p-detailHero--purad .p-detailHero__body {
background:#4E3684;
}
.p-detailHero--concrete .p-detailHero__body {
background:#CE1039;
}
.p-detailHero--lining .p-detailHero__body {
background:#008458;
}
.p-detailHero--gehr .p-detailHero__body {
background:#C10E1A;
}
.p-detailHero__kana {
margin-top:4%;
margin-right:0;
margin-bottom:0;
margin-left:0;
font-size:18px;
font-size:1.125rem;
line-height:1.3;
font-weight:700;
}
.p-detailHero__title {
margin-top:3%;
margin-right:0;
margin-bottom:4%;
margin-left:0;
font-size:72px;
font-size:4.5rem;
line-height:1;
font-weight:700;
}
.p-detailHero__subtitle {
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:0;
font-size:20px;
font-size:1.25rem;
line-height:1.3;
font-weight:700;
}
.p-detailHero__visual {
min-width:0;
height:100%;
overflow:hidden;
}
.p-detailHero__visual img {
display:block;
width:100%;
height:100%;
object-fit:cover;
}

/* ----- 02 Products: detail outline ----- */
.p-detailOutline {
display:grid;
grid-template-columns:1fr 48.4%;
align-items: start;
gap:40px;
padding-top:5.15%;
padding-bottom:5.85%;
}
.p-detailOutline__header {
margin-bottom:5.5%;
}
.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:36px;
font-size:2.25rem;
line-height:1.7;
font-weight:700;
}
.p-detailOutline__header .p-semifinishedOutline__title {
font-size:30px;
font-size:1.875rem;
}
.p-detailOutline__textGroup p {
margin-top:0px;
margin-right:0px;
margin-bottom:2%;
margin-left:0px;
font-size:16px;
font-size:1rem;
line-height:2;
}
.p-detailOutline__textGroup p:last-child {
margin-bottom:0px;
}
.p-detailOutline__imageWrap {
overflow:hidden;
border-radius:20px;
}
.p-detailOutline__image {
width:100%;
height:100%;
object-fit:cover;
}

/* ----- 02 Products: detail features ----- */
.p-detailFeatureSection {
position:relative;
overflow:hidden;
background:#EFF4F7;
}
.p-detailFeatureSection::before {
position:absolute;
top:0px;
left:max(0px, calc((100% - 1360px) / 2));
z-index:0;
width:400px;
width:25rem;
max-width:60%;
height:400px;
height:25rem;
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-detailFeature {
position:relative;
z-index:1;
padding-top:5.65%;
padding-bottom:5.95%;
}
.p-detailFeature__header {
margin-bottom:31px;
}
.p-detailFeatureGrid {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:34px 40px;
}
.p-detailFeatureCard {
overflow:hidden;
padding-top: 8%;
padding-right: 7%;
padding-bottom: 8%;
padding-left: 7%;
border-top:6px solid #F6C900;
border-radius:0px 0px 10px 10px;
background:#ffffff;
}
.p-productDetailPage--agruchem .p-detailFeatureCard {
border-top-color:#005091;
}
.p-productDetailPage--agruchem .p-detailFeatureCard__title span {
color:#005091;
}
.p-productDetailPage--purad .p-detailFeatureCard {
border-top-color:#4E3684;
}
.p-productDetailPage--purad .p-detailFeatureCard__title span {
color:#4E3684;
}
.p-productDetailPage--concrete .p-detailFeatureCard {
border-top-color:#C10E1A;
}
.p-productDetailPage--concrete .p-detailFeatureCard__title span {
color:#C10E1A;
}
.p-productDetailPage--lining .p-detailFeatureCard {
border-top-color:#008458;
}
.p-productDetailPage--lining .p-detailFeatureCard__title span {
color:#008458;
}


.p-detailFeatureCard__title {
margin-top:0px;
margin-right:0px;
margin-bottom:20px;
margin-left:0px;
font-size:24px;
font-size:1.5rem;
line-height:1.42;
font-weight:700;
}
.p-detailFeatureCard__title span {
display:inline-block;
margin-left:8px;
color:#F6C900;
font-size:14px;
font-size:0.875rem;
vertical-align:middle;
}
.p-detailFeatureCard--life .p-detailFeatureCard__title {
display:flex;
align-items:center;
gap:0.7em;
}
.p-detailFeatureCard--life .p-detailFeatureCard__title span {
display:inline-flex;
align-items:center;
gap:0.45em;
margin-left:0px;
color:#2D2E2F;
font-size:16px;
font-size:1rem;
line-height:1.2;
}
.p-detailFeatureCard--life .p-detailFeatureCard__title span::before {
content:"";
display:inline-block;
flex-shrink:0;
width:0px;
height:0px;
border-top:0.38em solid transparent;
border-bottom:0.38em solid transparent;
border-left:0.58em solid #F6C900;
}
.p-detailFeatureCard__image {
width:100%;
aspect-ratio:500 / 280;
border-radius:18px;
object-fit:cover;
}
.p-detailFeatureCard__text {
margin-top:3%;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
font-size:16px;
font-size:1rem;
line-height:2;
}
.p-semifinishedLineups .p-detailFeature__header {
margin-bottom:40px;
margin-bottom:2.5rem;
}
.p-semifinishedLineups .p-detailFeatureGrid {
gap:40px;
gap:2.5rem;
}
.p-semifinishedLineups .p-detailFeatureCard {
display:flex;
flex-direction:column;
overflow:visible;
padding:0;
border-top:0;
border-radius:0;
background:transparent;
}
.p-semifinishedLineups .p-detailFeatureCard__image {
order:1;
aspect-ratio:580 / 400;
border-radius:14px;
}
.p-semifinishedLineups .p-detailFeatureCard__title {
order:2;
margin-top:22px;
margin-top:1.375rem;
margin-bottom:5px;
margin-bottom:0.3125rem;
font-size:24px;
font-size:1.5rem;
line-height:1.45;
}
.p-semifinishedLineups .p-detailFeatureCard__text {
position:relative;
order:3;
margin-top:0;
padding-left:16px;
padding-left:1rem;
font-size:16px;
font-size:1rem;
font-weight: 700;
line-height:1.8;
}
.p-semifinishedLineups .p-detailFeatureCard__text::before {
position:absolute;
top:0.72em;
left:0;
width:0;
height:0;
border-top:4px solid transparent;
border-top:0.25rem solid transparent;
border-bottom:4px solid transparent;
border-bottom:0.25rem solid transparent;
border-left:6px solid #008BD2;
border-left:0.375rem solid #008BD2;
content:"";
}

/* ----- 02 Products: applications ----- */
.p-detailApplication {
padding-top:5.55%;
padding-bottom:5.65%;
}
.p-detailApplication__header {
margin-bottom:30px;
}
.p-applicationGrid {
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:32px 40px;
}
.p-applicationItem {
margin:0px 0px 0px 0px;
}
.p-applicationItem__image {
width:100%;
aspect-ratio:374 / 280;
border-radius:20px;
object-fit:cover;
}
.p-applicationItem__caption {
margin-top:7%;
font-size:24px;
font-size:1.5rem;
line-height:1.5;
font-weight:700;
text-align:center;
}

/* ----- 02 Products: specifications ----- */
.p-detailSpecSection {
background:#EFF4F7;
}
.p-detailSpec {
display:grid;
grid-template-columns: 280px 1fr;
align-items: start;
gap: 30px;
padding-top: 6.5%;
padding-bottom: 6.5%;
}
.p-detailSpec__header {
margin-bottom:0px;
}
.p-specTable {
width: 100%;
max-width: 100%;
padding-top: 4.5%;
padding-right: 4.5%;
padding-bottom: 4.5%;
padding-left: 4.5%;
background:#ffffff;
font-size:16px;
font-size:1rem;
border-radius: 20px;
}
.p-specTable__row {
display:flex;
align-items:center;
margin-bottom:14px;
}
.p-specTable__row:last-child {
margin-bottom:0px;
}
.p-specTable__label {
display:flex;
align-items:center;
justify-content:center;
flex:0 0 29.6333%;
width:29.6333%;
height: 100%;
min-height:78px;
border-radius:6px;
background:#008BD2;
color:#ffffff;
font-size:16px;
font-size:1rem;
font-weight:700;
}
.p-specTable__value {
flex: 1;
min-width: 0;
padding-left: 4%;
font-size:16px;
font-size:1rem;
line-height:1.6;
}

/* ----- 02 Products: agruwelding ----- */
.p-weldingProcessing {
position:relative;
z-index:1;
padding-top:6%;
padding-bottom:6%;
}
.p-weldingMethod {
padding-top:80px;
padding-top:5rem;
padding-bottom:40px;
border-bottom:2px solid #008BD2;
}
.p-weldingMethod:first-of-type {
padding-top:0px;
}
.p-weldingMethod__title {
margin-top:0px;
margin-right:0px;
margin-bottom:18px;
margin-left:0px;
font-size:32px;
font-size:2rem;
line-height:1.45;
font-weight:700;
}
.p-weldingMethod__title span {
display:inline-block;
margin-left:20px;
color:#008BD2;
font-size:16px;
font-size:1rem;
vertical-align:middle;
}
.p-weldingMethod__text {
margin-top:0px;
margin-right:0px;
margin-bottom:24px;
margin-left:0px;
font-size:15px;
font-size:0.9375rem;
line-height:1.9;
}
.p-weldingMethod__diagrams {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:28px;
margin-bottom:24px;
}
.p-weldingMethod__diagrams img {
width:100%;
border-radius:20px;
object-fit:cover;
}
.p-weldingDiagram {
margin:0px 0px 0px 0px;
}
.p-weldingDiagram__title {
margin-top:40px;
margin-top:2.5rem;
margin-right:0px;
margin-bottom:20px;
margin-bottom:1.25rem;
margin-left:0px;
font-size:24px;
font-size:1.5rem;
line-height:1.4;
font-weight:700;
text-align:left;
}
.p-weldingMethod__diagrams img:only-child {
grid-column:span 2;
}
.p-weldingMethod__mediaGrid {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
align-items:stretch;
gap:28px;
margin-top:0px;
margin-right:0px;
margin-bottom:24px;
margin-left:0px;
}
.p-weldingMethod__mediaGrid .p-weldingMethod__diagrams,
.p-weldingMethod__mediaGrid .p-weldingMethod__media {
margin-bottom:0px;
}
.p-weldingMethod__mediaGrid .p-weldingMethod__diagrams {
grid-template-columns:1fr;
}
.p-weldingMethod__mediaGrid .p-weldingMethod__diagrams img:only-child {
grid-column:auto;
}
.p-weldingProductList {
display:grid;
gap:42px;
}
.p-weldingSpecHeader {
position:relative;
z-index:0;
display:flex;
align-items:center;
width:100%;
min-height:60px;
min-height:3.75rem;
margin-top:4.8%;
margin-right:0px;
margin-bottom:4.2%;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:44px;
padding-left:2.75rem;
border-bottom:2px solid #008BD2;
color:#ffffff;
box-sizing:border-box;
font-size:24px;
font-size:1.5rem;
line-height:1;
font-weight:700;
padding-top:2px;
}
.p-weldingSpecHeader::before {
position:absolute;
top:0px;
left:0px;
z-index:-1;
width:180px;
width:11.25rem;
height:100%;
border-radius:20px 20px 0px 0px;
border-radius:1.25rem 1.25rem 0px 0px;
background:#008BD2;
content:"";
}
.p-weldingProduct {
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(360px, 33.5%);
align-items:start;
gap:7%;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
border-radius:0px;
background:transparent;
}
.p-weldingProduct__name {
margin-top:0px;
margin-right:0px;
margin-bottom:32px;
margin-left:0px;
font-size:32px;
font-size:2rem;
font-weight:700;
}
.p-weldingProduct__spec {
display:grid;
grid-template-columns:minmax(0, 180px) minmax(0, 1fr);
grid-template-columns:minmax(0, 11.25rem) minmax(0, 1fr);
gap:18px 28px;
}
.p-weldingProduct__spec dt {
display:flex;
align-items:center;
justify-content:center;
min-height:60px;
border-radius:8px;
background:#008BD2;
color:#ffffff;
font-size:18px;
font-size:1.125rem;
font-weight:700;
}
.p-weldingProduct__spec dd {
display:flex;
align-items:center;
margin:0px 0px 0px 0px;
font-size:16px;
font-size:1rem;
line-height:1.5;
}
.p-weldingProduct__image {
width:100%;
border-radius:20px;
}
.p-weldingMethod__media {
display:block;
margin-top:0px;
margin-right:0px;
margin-bottom:24px;
margin-left:0px;
}
.p-mediaEmbed {
position:relative;
overflow:hidden;
background:#000000;
}
.p-mediaEmbed__video,
.p-mediaEmbed__image {
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.p-weldingMethod__media,
.p-weldingMethod__media.p-mediaEmbed,
.p-weldingMethod__media .p-mediaEmbed__video,
.p-weldingMethod__media .p-mediaEmbed__image {
border-radius:0;
}
.p-mediaEmbed--video .p-mediaEmbed__video {
aspect-ratio:16 / 9;
object-fit:cover;
}
.p-mediaEmbed--youtube::before {
content:"";
position:absolute;
top:50%;
left:50%;
z-index:1;
width:48px;
height:48px;
border-radius:10px;
background:rgba(0, 0, 0, 0.9);
transform:translate(-50%, -50%);
transition:background 0.3s ease, opacity 0.3s ease;
}
.p-mediaEmbed--youtube::after {
content:"";
position:absolute;
top:50%;
left:50%;
z-index:2;
width:0px;
height:0px;
margin-left:2px;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-left:15px solid #ffffff;
transform:translate(-50%, -50%);
}
.p-mediaEmbed--youtube:hover::before {
background:#2b6699;
}

/* ==========================================================================
02 Products: Customized / GEHR
========================================================================== */
/* ----- p-detailHero: customized / gehr variants ----- */
.p-detailHero--customized .p-detailHero__body {
background:#89CFBC;
}
.p-detailHero--customized .p-detailHero__title,
.p-detailHero--concrete .p-detailHero__title,
.p-detailHero--agruwelding .p-detailHero__title,
.p-detailHero--semifinished .p-detailHero__title {
font-size:60.8px;
font-size:3.8rem;
}
.p-detailHero--gehr .p-detailHero__visual {
display:flex;
align-items:center;
justify-content:center;
background:#eeeeee;
}
.p-detailHero--gehr .p-detailHero__visual img {
width:100%;
height:100%;
max-width:none;
object-fit:contain;
object-position:center center;
}

/* ----- c-label--red: GEHR heading label variant ----- */
.c-label--red {
color:#D10017;
}
.c-label--red::before {
width:22px;
width:1.375rem;
height:5px;
height:0.3125rem;
background-image:url('../images/products-gehr/gehr_icon_line_h3.png');
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.p-productDetailPage--customized .l-section,
.p-productDetailPage--gehr .l-section {
padding-bottom:0;
}

/* ----- p-customized: customized parts page ----- */
.p-customizedOutline {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,48.5%);
gap:6%;
align-items:start;
}
.p-customizedOutline__content {
padding-bottom:36px;
}
.p-customizedMovie {
min-width:0;
}
.p-customizedOutline p,
.p-customFeature p,
.p-customizedExample p {
font-size:16px;
font-size:1rem;
line-height:2;
}
.p-customizedMovie__link {
position:relative;
display:block;
overflow:hidden;
width:100%;
min-width:0;
aspect-ratio:580 / 326;
max-width:100%;
border-radius:0;
}

.p-customizedMovie__link img{
width:100%;
height:100%;
object-fit:cover;
}
.p-gehrOutline__image,
.p-customFeature img,
.p-customizedExample__image {
width:100%;
height:auto;
border-radius:16px;
object-fit:cover;
}
.p-gehrOutline__image {
aspect-ratio:580 / 440;
height:min(32vw,440px);
}
.p-customFlow {
max-width:1200px;
margin-top:4.2%;
margin-right:auto;
margin-bottom:7.2%;
margin-left:auto;
}
.p-customFlow__title,
.p-gehrCertification h3,
.p-customFeature h3,
.p-customizedExample h3 {
margin-top:0;
color:#333333;
font-size:28px;
font-size:1.75rem;
line-height:1.45;
font-weight:700;
}
.p-gehrCertification h3 {
margin-bottom:40px;
margin-bottom:2.5rem;
}
.p-gehrProduct h3 {
margin-top:0;
margin-bottom:30px;
margin-bottom:1.875rem;
color:#333333;
font-size:28px;
font-size:1.75rem;
line-height:1.45;
font-weight:700;
}
.p-gehrProduct h3 sup,
.p-gehrBannerList sup {
    position: relative;
    top: -0.8em;
    font-size: 0.5em;
    line-height: 0;
    vertical-align: baseline;
    margin-left: 0.1em;
}
.p-customFlow__list {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-top:3%;
counter-reset:none;
}
.p-customFlow__list li {
position:relative;
display:flex;
align-items:center;
min-height:78px;
padding:20px;
border:2px solid #008BD2;
background:#ffffff;
color:#008BD2;
font-size:18px;
font-size:1.125rem;
line-height:1.35;
font-weight:700;
box-sizing:border-box;
}
.p-customFlow__list li:not(:last-child)::after {
position:absolute;
top:50%;
right:-18px;
width:0;
height:0;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
border-left:8px solid #008BD2;
content:"";
transform:translateY(-50%);
}
.p-customFlow__list span {
margin-right:14px;
font-size:24px;
font-size:1.5rem;
font-family:'Roboto','Noto Sans JP',sans-serif;
font-weight:700;
}
.p-customizedFeaturesSection {
position:relative;
overflow:hidden;
padding-top:6.4%;
padding-bottom:7.2%;
background:#EFF4F7;
}
.p-customizedExampleSection {
padding-top:7.2%;
padding-bottom:7.2%;
}
.p-customizedRelatedSection {
padding-top:7.2%;
padding-bottom:7.2%;
background:#EFF4F7;
}
.p-gehrLineupSection {
padding-top:7.2%;
padding-bottom:7.2%;
background:#EFEFEF;
}
.p-customizedFeaturesSection::before {
position:absolute;
top:0;
left:max(0px, calc((100% - 1360px) / 2));
width:460px;
width:28.75rem;
max-width:60%;
height:460px;
height:28.75rem;
background-image:url('../images/common/bg_agrumark_body.png');
background-repeat:no-repeat;
background-position:left top;
background-size:contain;
content:"";
}
.p-customizedFeatures,
.p-customizedFeatures .l-container {
position:relative;
z-index:1;
}
.p-customFeatureList {
display:grid;
gap:74px;
}
.p-customFeature {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(420px,46%);
gap:7.5%;
align-items:start;
}
.p-customFeature h3 {
margin-bottom:20px;
margin-bottom:1.25rem;
font-size:32px;
font-size:2rem;
}
.p-customFeature__button {
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
max-width:270px;
height:60px;
height:3.75rem;
margin-top:24px;
padding:1.75% 5% 1.75% 5%;
border-radius:999px;
background:#008BD2;
color:#ffffff;
box-sizing:border-box;
font-size:16px;
font-size:1rem;
font-weight:700;
}
.p-customFeature__button::after {
position:absolute;
top:50%;
right:12px;
width:10px;
height:10px;
background:url('../images/common/icon_arrow_white_01.png') no-repeat center / contain;
content:"";
transform:translateY(-50%);
}
.p-customizedExample {
display:block;
}
.p-customizedExample__inner {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(420px,46%);
gap:7.5%;
align-items:start;
}
.p-customizedExample dl {
display:grid;
grid-template-columns:minmax(0, 180px) minmax(0, 1fr);
grid-template-columns:minmax(0, 11.25rem) minmax(0, 1fr);
gap:12px;
max-width:420px;
margin-top:24px;
margin-bottom:24px;
}
.p-customizedExample dt {
display:flex;
align-items:center;
min-height:60px;
margin:0;
font-size:14px;
font-size:0.875rem;
font-weight:700;
justify-content:center;
border-radius:6px;
background:#008BD2;
color:#ffffff;
}
.p-customizedExample dd {
    display: flex;
justify-content:flex-start;
align-items:center;
min-height:60px;
margin:0;
font-size:14px;
font-size:0.875rem;
font-weight:400;
}
.p-relatedServiceGrid {
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:40px;
max-width:100%;
}
.p-relatedServiceGrid a {
position:relative;
display:block;
overflow:hidden;
aspect-ratio:280 / 280;
border-radius:22px;
color:#ffffff;
-webkit-clip-path:inset(0 round 22px);
clip-path:inset(0 round 22px);
-webkit-mask-image:-webkit-radial-gradient(#ffffff, #000000);
transform:translateZ(0);
}
.p-relatedServiceGrid img {
display:block;
width:100%;
height:100%;
object-fit:cover;
border-radius:inherit;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transition:transform .8s ease;
}
.p-relatedServiceGrid a:hover img {
transform:scale(1.2);
}
.p-relatedServiceGrid span {
position:absolute;
top:50%;
left:0;
width:100%;
padding:24px 3% 24px 3%;
font-size:30px;
font-size:1.875rem;
line-height:1.2;
font-family:'Roboto','Noto Sans JP',sans-serif;
font-weight:700;
text-align:center;
transform:translateY(-50%);
}
.p-relatedServiceGrid small {
display:block;
margin-top:14px;
font-size:16px;
font-size:1rem;
font-family:'Noto Sans JP',sans-serif;
line-height:1.35;
}
.p-relatedServiceGrid small em {
font-style:normal;
}

/* ----- p-gehr: GEHR page ----- */
.p-gehrOutline {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(420px,48%);
gap:7.5%;
align-items:start;
}
.p-gehrOutline p,
.p-gehrCertification p,
.p-gehrProduct p {
font-size:16px;
font-size:1rem;
line-height:2;
}
.p-gehrCertification {
max-width:1200px;
margin-top:5%;
margin-right:auto;
margin-bottom:6%;
margin-left:auto;
}
.p-gehrCertification ul {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:24px;
margin-top:3%;
padding:4.2% 5%;
border-radius:16px;
background:#EFEFEF;
}
.p-gehrCertification li {
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
text-align:center;
font-size:14px;
font-size:0.875rem;
line-height:1.45;
font-weight:700;
}
.p-gehrCertification img {
width:140px;
width:8.75rem;
height:140px;
height:8.75rem;
object-fit:contain;
margin-bottom:18px;
}
.p-gehrCertification small {
font-size:12px;
font-size:0.75rem;
font-weight:700;
}
.p-gehrProductList {
display:grid;
gap:80px;
}
.p-gehrProduct {
display:grid;
grid-template-columns:minmax(0,1fr) 270px;
gap:46px 7%;
align-items:start;
}
.p-gehrProduct > img {
grid-row:1;
grid-column:2;
width:100%;
border-radius:14px;
}
.p-gehrProduct__lists {
grid-column:1 / -1;
display:grid;
grid-template-columns:1fr 1fr;
gap:7%;
}
.p-gehrProduct__lists h4 {
position:absolute;
top:0;
left:0;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:180px;
min-height:44px;
margin:0;
border-radius:20px 20px 0 0;
background:#C10E1A;
color:#ffffff;
font-size:18px;
font-size:1.125rem;
letter-spacing:.16em;
}
.p-gehrProduct__lists div {
position:relative;
padding-top:64px;
border-top:0;
}
.p-gehrProduct__lists div::before {
position:absolute;
top:44px;
right:0;
left:0;
height:2px;
background:#C10E1A;
content:"";
}
.p-gehrProduct__lists ul {
display:grid;
gap:12px;
padding-top:0;
}
.p-gehrProduct__lists li {
position:relative;
padding-left:18px;
font-size:14px;
font-size:0.875rem;
line-height:1.6;
}
.p-gehrProduct__lists li::before {
position:absolute;
top:.7em;
left:0;
width:6px;
height:6px;
border-radius:50%;
background:#C10E1A;
content:"";
}
.p-gehrBannerList {
display:grid;
grid-template-columns:repeat(3, minmax(0, 373px));
gap:28px;
margin-top:7%;
}
.p-gehrBannerList a {
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
min-height:120px;
min-height:7.5rem;
height:120px;
height:7.5rem;
padding:20px 52px 18px 20px;
padding:1.25rem 3.25rem 1.125rem 1.25rem;
border:1px solid #DDDDDD;
background-color:#ffffff;
background-image:url('../images/products-gehr/gehr_bn_bg.png');
background-repeat:no-repeat;
background-position:right 32px center;
background-size:132px 120px;
background-size:8.25rem 7.5rem;
color:#333333;
font-size:24px;
font-size:1.5rem;
font-family:'Roboto','Noto Sans JP',sans-serif;
font-weight:700;
line-height:1;
box-sizing:border-box;
transition:opacity 0.8s ease;
}
.p-gehrBannerList a:hover {
opacity:0.5;
}
.p-gehrBannerList img {
width:100px;
width:6.25rem;
height:31px;
height:1.9375rem;
margin-bottom:20px;
margin-bottom:1.25rem;
object-fit:contain;
}
.p-gehrBannerList span {
display:block;
line-height:1;
}
.p-gehrBannerList a::after {
position:absolute;
top:50%;
right:9px;
right:0.5625rem;
width:9px;
width:0.5625rem;
height:14px;
height:0.875rem;
background:url('../images/common/icon_arrow_black_02.png') no-repeat center / contain;
transform:translateY(-50%);
content:"";
}

/* ==========================================================================
Utility
========================================================================== */
.font-english{
font-family:"Roboto", sans-serif;
font-weight:700;
font-optical-sizing:auto;
font-style:normal;
font-variation-settings:"wdth" 100;
}
.u-bg--gray{
width:100%;
background:#EFF4F7;
}
.u-bg--white{
width:100%;
background:#ffffff;
}
.p-productItem__title--concrete{
margin-bottom: 50px;
margin-bottom: 3.125rem;
}

/* ==========================================================================
Additional lower pages
========================================================================== */
/* ----- p-pageHero / p-pageAnchor: lower page common ----- */
.p-pageHero--sub {
overflow:hidden;
border-radius:30px;
background:#008BD2;
}
.p-pageHero--sub .p-pageHero__title,
.p-pageHero--sub .p-pageHero__subtitle {
color:#ffffff;
}
.p-pageHero--sub .p-pageHero__visual {
height:100%;
}
.p-pageHero--sub .p-pageHero__visual img {
width:100%;
height:100%;
object-fit:cover;
}
.p-pageHero--plain {
display:flex;
align-items:center;
min-height:330px;
}
.p-pageHero--plain .p-pageHero__body {
width:100%;
padding-right:5.9225%;
padding-left:5.9225%;
}
.p-pageHero--plain .p-pageHero__title {
margin-top:calc(1.5% - 2px);
margin-left:0;
transform:translateY(-2px);
}
.p-pageHero--plain .p-pageHero__subtitle {
margin-top:calc(1% - 2px);
}
.l-main-inner > .l-sectionBand:first-child + .l-sectionBand {
margin-top:2.6%;
}
.p-pageAnchorBand {
margin-top: 1%;
padding-top:2.8%;
padding-bottom:2.8%;
background:#EFF4F7;
}
.p-pageAnchor {
display:flex;
max-width:1200px;
margin:auto;
}
.p-pageAnchor a {
position:relative;
display:flex;
align-items:center;
justify-content:center;
width: 210px;
max-width: 100%;
height: 100%;
min-height:60px;
padding:0 4% 0 2%;
margin-right: 2.75%;
border-radius:10px;
background:#ffffff;
color:#008BD2;
font-size:14px;
font-size:0.875rem;
line-height:1.35;
font-weight:700;
text-align:center;
}
.p-pageAnchor a:last-child {
margin-right: 0;
}
.p-pageAnchor a::after {
position:absolute;
top:0;
right:0;
width:9%;
height:100%;
border-radius:0 10px 10px 0;
background-color:#008BD2;
background-image:url('../images/common/icon_arrow_pagedown.png');
background-repeat:no-repeat;
background-position:center;
background-size:10px 10px;
content:"";
}
.p-pageAnchor--materials {
grid-template-columns:repeat(4, minmax(0, 1fr));
}
.p-pageAnchor--materials a{
    width: 22.8%;
    flex-direction: column;
    margin-bottom: 3%;
    margin-right: 3%;
    font-size:18px;
    font-size:1.125rem;
    padding: 1.5% 2% 1.5% 0;
    height: 80px;
    line-height: 1.3;
}
.p-pageAnchor--materials span {
font-size:16px;
font-size:1rem;
font-weight:700;
}
.p-subpageHeader {
min-width:190px;
}

/* ----- 03 Company ----- */
.p-companyMessage {
display: flex;
justify-content: space-between;
width:100%;
padding-top: 5.6%;
padding-bottom: 4.5%;
}
.p-companyMessage__body {
width: 80%;
max-width: 890px;
}
.p-companyMessage__body p {
margin-bottom:1.425%;
font-size:16px;
font-size:1rem;
line-height:2;
}
.p-companyMessage__signature {
margin-top:3.25%;
text-align:right;
}
.p-companyMessage__signature strong{
font-size: 1.2em;
}
.p-companyPhilosophySection,
.p-accessSection,
.p-materialsSection,
.p-contactFormSection {
background:#EFF4F7;
}
.p-companyPhilosophySection {
position:relative;
overflow:hidden;
}
.p-companyPhilosophySection::before {
position:absolute;
top:0px;
left:max(0px, calc((100% - 1360px) / 2));
z-index:0;
width:400px;
width:25rem;
max-width:60%;
height:400px;
height:25rem;
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;
}
.p-companyPhilosophy {
display:flex;
flex-direction: column;
align-items: flex-start;
padding-top:6%;
padding-bottom:2.5%;
}
.p-philosophyList {
display:flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.p-philosophyList li {
display:flex;
align-items: center;
width: 100%;
margin-bottom: 3.8%;
font-size:20px;
font-size:1.25rem;
font-weight:700;
}
.p-philosophyList span {
margin-right: 1.75%;
color:#B5DFF4;
font-size:60px;
font-size:3.75rem;
line-height:1;
font-weight:700;
}
.p-companyOutline {
display:flex;
justify-content: space-between;
padding-top:5.7%;
padding-bottom:6%;
}
.p-infoTable {
display: flex;
flex-direction: column;
width: 74%;
}
.p-infoTable__row {
display:flex;
margin-bottom: 1%;
}
.p-infoTable__row dt {
display:flex;
align-items:center;
justify-content:center;
width: 30%;
max-width: 300px;
min-height:60px;
border-radius:20px 0 0 20px;
background:#008BD2;
color:#ffffff;
font-size: 18px;
font-size:1.125rem;
font-weight:700;
}
.p-infoTable__row dd {
display: flex;
align-items: center;
width: 70%;
min-height: 60px;
padding: 2% 5%;
border-radius: 0 20px 20px 0;
background: #EFF4F7;
font-size: 16px;
font-size:1rem;
line-height: 2;
}
.p-infoTable__row a {
color:#008BD2;
font-weight:400;
text-decoration:underline;
}
.p-infoTable__privacyLink {
white-space: nowrap;
word-break: keep-all;
overflow-wrap: normal;
}
.p-infoTable__row dd.p-infoTable__privacyText {
display: block;
word-break: normal;
overflow-wrap: normal;
}
.p-infoTable__row dd.p-infoTable__member{
display: block;
line-height: 2.6 !important;
}
.p-infoTable__member span{
margin-right: 2%;
}
.p-access {
padding-top:6%;
padding-bottom:6%;
}
.p-mapEmbed {
overflow:hidden;
width:100%;
aspect-ratio:1200 / 700;
border-radius:0;
background:#ffffff;
}
.p-mapEmbed iframe {
width:100%;
height:100%;
border:0;
}
.p-companyGroup {
padding-top:6%;
padding-bottom:6%;
}
.p-companyGroup > p {
margin-bottom:44px;
font-size:16px;
font-size:1rem;
line-height:1.9;
}
.p-companyGroup > p span {
display: block;
margin-bottom: 1%;
}
.p-companyGroup h3 {
margin-bottom:2%;
font-size:32px;
font-size:2rem;
}
.p-companyGroup__flex {
display: flex;
align-items: stretch;
justify-content: space-between;
gap:clamp(32px, 3.333vw, 40px);
margin-bottom: 46px;
}
.p-companyGroup__flex > div {
display: flex;
flex-direction: column;
justify-content: center;
width:calc((100% - clamp(32px, 3.333vw, 40px)) / 2);
max-width: 580px;
min-width:0;
padding: 0 3.5%;
border-radius: 20px;
background: #EFF4F7;
}
.p-companyGroup__flex h4 {
margin-top: 0;
margin-bottom: 3%;
font-size: 24px;
font-size:1.5rem;
}
.p-companyGroup__flex p{
font-size: 16px;
font-size:1rem;
line-height: 2;
}
.p-certList {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
max-width: 100%;
margin-top: 0;
}
.p-certList li {
width: 100%;
max-width: 100%;
padding-right: 9%;
line-height: clamp(1.55, calc(1.05 + 0.066vw), 2);
}
.p-certList h4 {
display: block;
margin-bottom: clamp(-2px, calc(1.7857vw - 15.714px), 10px);
font-size: 16px;
font-size:1rem;
}
.p-certList p {
width: 100%;
max-width: 100%;
margin-bottom: clamp(10px, 2.014vw, 29px);
margin-left: clamp(0px, 1.25vw, 18px);
line-height: clamp(1.55, calc(1.05 + 0.066vw), 2);
}
.p-certList p span {
display: flex !important;
align-items: center;
justify-content: center;
width: auto;
min-width: clamp(104px, 7.5vw, 108px);
max-width: 100%;
height: clamp(22px, 1.667vw, 24px);
padding: 0 clamp(8px, 0.694vw, 10px);
margin-left: clamp(4px, 2.083vw, 30px);
border-radius: 30px;
box-sizing: border-box;
background: #008BD2;
color: #fff;
font-size:14px;
font-size:0.875rem;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
float: right;
}
.p-certList p span a {
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
color:#ffffff;
font-weight:700;
line-height:1;
white-space:nowrap;
text-decoration:none;
transform: translateY(0.5px);
}
.p-companyGroup__flex p span {
display: block;
margin-bottom: 2%;
}
.p-companyGroup__flex img {
width:calc((100% - clamp(32px, 3.333vw, 40px)) / 2);
max-width: 580px;
min-width:0;
border-radius:20px;
object-fit:cover;
}

/* ----- 04 Materials: outline ----- */
.p-materialOutline {
display:flex;
grid-template-columns:1fr 480px;
align-items:flex-start;
justify-content: space-between;
gap:clamp(32px, 3.333vw, 48px);
padding-top:6%;
padding-bottom:28px;
}
.p-materialOutline__body {
display: flex;
flex-direction: column;
justify-content: flex-start;
width:calc((100% - clamp(32px, 3.333vw, 48px)) / 2);
max-width: 580px;
}
.p-materialOutline__body p {
margin-bottom:16px;
font-size:15px;
font-size:0.9375rem;
line-height:1.9;
}
.p-materialOutline__image {
width:calc((100% - clamp(32px, 3.333vw, 48px)) / 2);
max-width:580px;
}
.p-materialOutline__image img {
width:100%;
max-width: 580px;
border-radius: 20px;
}
.p-materialLead {
        max-width: 900px;
    margin: 2.5% auto 6%;
    padding: 1% 0 0.75% 0;
    border-top: 2px solid #008BD2;
    border-bottom: 2px solid #008BD2;
    color: #008BD2;
    font-size: 28px;
    font-size:1.75rem;
    font-weight: 700;
    text-align: center;
}

/* ==========================================================================
04 Materials: item details
========================================================================== */
.p-materialsSection {
position:relative;
overflow:hidden;
}
.p-materialsSection::before {
position:absolute;
top:0px;
left:max(0px, calc((100% - 1360px) / 2));
z-index:0;
width:400px;
width:25rem;
max-width:60%;
height:400px;
height:25rem;
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-materialsSection .l-container {
position:relative;
z-index:1;
}
.p-materialsSection .p-materialsPage {
position:relative;
z-index:1;
max-width:1040px;
padding-top:5.2%;
padding-bottom:5.5%;
}
.p-materialsSection .p-subpageHeader {
margin-bottom:3.2%;
}
.p-materialsSection .p-materialItem {
display:grid;
grid-template-columns:44% 1fr;
align-items:start;
gap:2.2% clamp(48px, 6%, 64px);
row-gap:0;
margin-bottom:0;
}
.p-materialsSection .p-materialItem:last-child {
margin-bottom:0;
}
.p-materialsSection .p-materialItem + .p-materialItem .p-materialItem__head {
margin-top:50px;
margin-top:3.125rem;
}
.p-materialsSection .p-materialItem__head {
grid-column:1 / -1;
display:grid;
grid-template-columns:auto 1fr;
align-items:start;
column-gap:20px;
column-gap:1.25rem;
row-gap:0;
margin-top:60px;
margin-top:3.75rem;
margin-bottom:40px;
margin-bottom:2.5rem;
}
.p-materialsSection .p-materialItem__head span {
display:block;
grid-row:1 / 3;
grid-column:1;
margin-right:0;
color:#B5DFF4;
font-size:100px;
font-size:6.25rem;
line-height:0.9;
font-weight:700;
}
.p-materialsSection .p-materialItem__head h3 {
display:block;
grid-column:2;
margin:0 1.2% 10px 0;
margin:0 1.2% 0.625rem 0;
font-size:32px;
font-size:2rem;
line-height:1.15;
font-weight:700;
}
.p-materialsSection .p-materialItem__head p {
grid-column:2;
margin-top:0;
padding-left:0;
color:#008BD2;
font-size:20px;
font-size:1.25rem;
line-height:1.5;
font-weight:700;
}
.p-materialsSection .p-materialItem__head p::before {
display:inline-block;
width:22px;
width:1.375rem;
height:5px;
height:0.3125rem;
margin-right:10px;
margin-right:0.625rem;
background:url('../images/common/icon_heading_line.png') no-repeat center / contain;
vertical-align:middle;
content:"";
}
.p-materialsSection .p-materialItem__head p span {
display:block;
margin-top:0.4%;
color:#008BD2;
font-size:14px;
font-size:0.875rem;
line-height:1.55;
}
.p-materialsSection .p-materialItem__image {
width:100%;
aspect-ratio:460 / 300;
border-radius:14px;
object-fit:cover;
}
.p-materialsSection .p-materialItem__content {
padding-top:0.4%;
}
.p-materialsSection .p-materialItem__content h4 {
display:flex;
align-items:center;
justify-content:center;
width:100%;
max-width:180px;
max-width:11.25rem;
min-height:50px;
min-height:3.125rem;
margin-bottom:0;
border-radius:20px 20px 0 0;
background:#008BD2;
color:#ffffff;
font-size:20px;
font-size:1.25rem;
line-height:1.2;
font-weight:700;
text-align:center;
}
.p-materialsSection .p-materialItem__content h4:not(:first-child) {
margin-top:0;
}
.p-materialsSection .p-materialItem__content ul {
display:grid;
gap:0;
padding-top:20px;
padding-top:1.25rem;
padding-bottom:40px;
padding-bottom:2.5rem;
border-top:2px solid #008BD2;
}
.p-materialsSection .p-materialItem__content li,
.p-materialsSection .p-materialItem__content p {
position:relative;
padding-bottom:20px;
padding-bottom:1.25rem;
padding-left:16px;
padding-left:1rem;
font-size:16px;
font-size:1rem;
line-height:1.85;
}
.p-materialsSection .p-materialItem__content li:last-child,
.p-materialsSection .p-materialItem__content p:last-child {
padding-bottom:0;
}
.p-materialsSection .p-materialItem__content li::before,
.p-materialsSection .p-materialItem__content p::before {
position:absolute;
top:0.8em;
left:0;
width:6px;
height:6px;
border-radius:50%;
background:#008BD2;
content:"";
}
.p-materialsSection #conductive .p-materialItem__head {
column-gap:20px;
column-gap:1.25rem;
}
.p-materialsSection #conductive .p-materialItem__head > span {
font-size:100px;
font-size:6.25rem;
}
.p-materialsSection #conductive .p-materialItem__head h3 {
margin-right:0;
font-size:32px;
font-size:2rem;
line-height:1.15;
}
.p-materialsSection #conductive .p-materialItem__head p {
font-size:20px;
font-size:1.25rem;
line-height:1.45;
}
.p-materialsSection #conductive .p-materialItem__head p span {
margin-top:0.6%;
margin-left:32px;
margin-left:2rem;
font-size:16px;
font-size:1rem;
line-height:1.45;
}

/* ----- 05 Contact ----- */
.p-contactPage {
padding-top:6%;
padding-bottom:6%;
}
.p-contactPage__lead {
margin-bottom:42px;
font-size:16px;
font-size:1rem;
line-height:1.9;
}
.p-contactPage h3 {
margin-bottom:24px;
font-size:30px;
font-size:1.875rem;
}
.p-contactMethod {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:36px;
margin-bottom:30px;
}
.p-contactMethod div {
background:#ffffff;
}
.p-contactMethod h4 {
padding:14px 20px;
background:#008BD2;
color:#ffffff;
font-size:22px;
font-size:1.375rem;
text-align:center;
}
.p-contactMethod p {
padding:24px 28px;
font-size:16px;
font-size:1rem;
line-height:1.8;
}
.p-contactNotes {
display:grid;
gap:12px;
margin-bottom:56px;
}
.p-contactNotes li {
position:relative;
padding-left:18px;
font-size:16px;
font-size:1rem;
}
.p-contactNotes li::before {
position:absolute;
top:0.65em;
left:0;
width:6px;
height:6px;
border-radius:50%;
background:#008BD2;
content:"";
}
.p-contactNotes a {
color:#008BD2;
font-weight:400;
text-decoration:underline;
}
.p-contactForm {
display:grid;
gap:26px;
width:100%;
max-width:none;
margin:0;
padding:80px;
padding:5rem;
border-radius:14px;
background:#ffffff;
}
.p-formRow {
display:grid;
grid-template-columns:minmax(0, 260px) minmax(0, 1fr);
align-items:start;
gap:10px;
gap:0.625rem;
}
.p-formRow > * {
min-width:0;
}
.p-formRow > label {
font-size:20px;
font-size:1.25rem;
font-weight:700;
}
.p-formRow label span {
display:block;
margin-top:4px;
color:#CE1039;
font-size:16px;
font-size:1rem;
font-weight:400;
}
.p-formRow label em {
display:block;
margin-top:4px;
color:#777;
font-size:16px;
font-size:1rem;
font-weight:400;
font-style:normal;
}
.p-formRow input[type="text"],
.p-formRow input[type="tel"],
.p-formRow input[type="email"],
.p-formRow select,
.p-formRow textarea {
box-sizing:border-box;
width:100%;
min-height:42px;
padding:8px 12px;
border:1px solid #d5dce0;
border-radius:0;
background:#ffffff;
font-size:16px;
font-size:1rem;
font-weight:400;
}
.p-formRow select {
padding-right:34px;
padding-right:2.125rem;
-webkit-appearance:none;
appearance:none;
}
.p-formRow .wpcf7-form-control-wrap {
display:block;
width:100%;
min-width:0;
}
.p-formSplit {
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
max-width:430px;
}
.p-formNameField {
display:flex;
align-items:center;
gap:10px;
gap:0.625rem;
}
.p-formNameField__label {
flex-shrink:0;
font-size:16px;
font-size:1rem;
font-weight:400;
}
.p-formNameField input {
min-width:0;
}
.p-formNameField .wpcf7-form-control-wrap {
flex:1;
width:100%;
min-width:0;
}
.p-formSelectGroup {
display:grid;
gap:20px;
gap:1.25rem;
width:100%;
}
.p-formSelectGroup select {
width:max-content;
min-width:260px;
min-width:16.25rem;
max-width:100%;
}
.p-formSelect {
position:relative;
width:max-content;
max-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[hidden] {
display:none;
}
.p-formOtherField input {
width:100%;
}
.p-checkGrid {
display:flex;
flex-wrap:wrap;
align-items:flex-start;
gap:20px 34px;
gap:1.25rem 2.125rem;
}
.p-checkGrid label {
display:inline-flex;
align-items:center;
gap:10px;
gap:0.625rem;
font-size:16px;
font-size:1rem;
font-weight:400;
}
.p-checkGrid input[type="checkbox"] {
position:relative;
display:inline-block;
flex-shrink:0;
box-sizing:border-box;
width:20px;
width:1.25rem;
height:20px;
height:1.25rem;
margin:0;
border:1px solid #777777;
border-radius:2px;
background:#ffffff;
-webkit-appearance:none;
appearance:none;
}
.p-checkGrid input[type="checkbox"]:checked {
border-color:#0075ff;
background:#0075ff;
}
.p-checkGrid input[type="checkbox"]:checked::after {
position:absolute;
top:45%;
left:55%;
width:14.4px;
width:0.9rem;
height:7px;
height:0.4375rem;
border-bottom:2.75px solid #ffffff;
border-left:2.75px solid #ffffff;
content:"";
transform:translate(calc(-50% - 1px), calc(-76% + 1px)) rotate(-50deg);
}
.p-checkGrid .wpcf7-form-control-wrap,
.p-checkGrid .wpcf7-checkbox {
display:block;
width:100%;
}
.p-checkGrid .wpcf7-list-item {
display:inline-block;
margin:0;
}
.p-checkGrid .wpcf7-list-item label {
display:inline-flex;
align-items:center;
gap:10px;
gap:0.625rem;
font-size:16px;
font-size:1rem;
font-weight:400;
}
.p-formRow .p-checkGrid label span,
.p-privacyAgree label span {
display:inline;
margin-top:0;
color:inherit;
font-size:inherit;
font-weight:inherit;
}
.p-checkGrid--products {
display:grid;
grid-template-columns:max-content max-content;
align-items:start;
column-gap:34px;
column-gap:2.125rem;
row-gap:20px;
row-gap:1.25rem;
}
.p-checkGrid--products .wpcf7-checkbox {
display:grid;
grid-template-columns:max-content max-content;
align-items:start;
column-gap:34px;
column-gap:2.125rem;
row-gap:20px;
row-gap:1.25rem;
}
.p-checkGrid--products label:nth-child(3),
.p-checkGrid--products label:nth-child(4),
.p-checkGrid--products .wpcf7-list-item:nth-child(3),
.p-checkGrid--products .wpcf7-list-item:nth-child(4) {
grid-column:1 / -1;
}
.p-checkGrid--materials .wpcf7-checkbox {
display:flex;
flex-wrap:wrap;
align-items:flex-start;
gap:20px 34px;
gap:1.25rem 2.125rem;
}
.p-privacyAgree {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:540px;
max-width:100%;
margin:24px auto 0;
padding:20px;
background:#EFF4F7;
font-size:16px;
font-size:1rem;
font-weight:400;
}
.p-privacyAgree .wpcf7-form-control-wrap,
.p-privacyAgree .wpcf7-acceptance,
.p-privacyAgree .wpcf7-list-item {
display:block;
margin:0;
}
.p-privacyAgree label {
display:inline-flex;
align-items:center;
gap:8px;
margin:0;
font:inherit;
}
.p-privacyAgree input[type="checkbox"] {
position:relative;
display:inline-block;
flex-shrink:0;
box-sizing:border-box;
width:20px;
width:1.25rem;
height:20px;
height:1.25rem;
margin:0;
border:1px solid #777777;
border-radius:2px;
background:#ffffff;
-webkit-appearance:none;
appearance:none;
}
.p-privacyAgree input[type="checkbox"]:checked {
border-color:#0075ff;
background:#0075ff;
}
.p-privacyAgree input[type="checkbox"]:checked::after {
position:absolute;
top:45%;
left:55%;
width:14.4px;
width:0.9rem;
height:7px;
height:0.4375rem;
border-bottom:2.75px solid #ffffff;
border-left:2.75px solid #ffffff;
content:"";
transform:translate(calc(-50% - 1px), calc(-76% + 1px)) rotate(-50deg);
}
.p-privacyAgree a {
color:#008BD2;
font-weight:400;
text-decoration:underline;
}
.p-contactForm__submit {
width:100%;
max-width:270px;
margin:22px auto 0;
border:0;
cursor:pointer;
}
.p-contactForm__submitWrap {
position:relative;
display:block;
width:100%;
max-width:270px;
margin:22px auto 0;
}
.p-contactForm__submitWrap::after {
position:absolute;
top:50%;
right:12px;
width:10px;
height:10px;
background:url('../images/common/icon_arrow_white_01.png') no-repeat center / contain;
content:"";
pointer-events:none;
transform:translateY(-50%);
}
.p-contactForm__submitWrap .p-contactForm__submit {
display:flex;
max-width:none;
margin:0;
border:0;
color:#ffffff;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
}
.p-contactForm__submit:disabled,
.p-contactForm__submit.is-disabled {
background:#008BD2;
color:#ffffff;
opacity:1;
cursor:not-allowed;
pointer-events:none;
-webkit-text-fill-color:#ffffff;
}
.p-contactForm__submit:disabled:hover,
.p-contactForm__submit.is-disabled:hover {
background:#008BD2;
box-shadow:none;
}
.p-contactForm__submitWrap.is-disabled::after {
opacity:1;
}
.p-contactForm .wpcf7-spinner {
position:absolute;
right:-36px;
bottom:50%;
margin:0;
transform:translateY(50%);
}
.p-contactForm--cf7Notice {
display:block;
color:#333333;
font-size:16px;
font-size:1rem;
font-weight:400;
}
.p-contactForm .wpcf7-not-valid-tip {
margin-top:6px;
color:#CE1039;
font-size:14px;
font-size:0.875rem;
font-weight:400;
}
.p-contactForm .wpcf7-response-output {
grid-column:1 / -1;
margin:0;
padding:12px 16px;
border-width:1px;
font-size:16px;
font-size:1rem;
font-weight:400;
}

/* ----- 06 Privacy Policy ----- */
.p-privacyPage {
max-width:1200px;
padding-top:80px;
padding-top:5rem;
padding-bottom:80px;
padding-bottom:5rem;
}
.p-privacyBlock {
margin-bottom:40px;
margin-bottom:2.5rem;
}
.p-privacyBlock:last-child {
margin-bottom:0;
}
.p-privacyBlock h2 {
margin-bottom:20px;
margin-bottom:1.25rem;
font-size:36px;
font-size:2.25rem;
font-weight:700;
}
.p-privacyBlock h3 {
margin-bottom:20px;
margin-bottom:1.25rem;
font-size:32px;
font-size:2rem;
font-weight:700;
}
.p-privacyBlock p {
font-size:16px;
font-size:1rem;
line-height:2;
font-weight:400;
}

/* ==========================================================================
07 News / Blog
========================================================================== */
.p-pageHero--news .p-pageHero__visual img {
object-position:center center;
}
.p-newsBand {
overflow:hidden;
background:#EEF6FA;
}
.p-newsArchive {
max-width:1200px;
padding-top:6.5%;
padding-right:0;
padding-bottom:6.2%;
padding-left:0;
}
.p-newsArchive__list {
display:flex;
flex-direction:column;
gap:34px;
}
.p-newsCard {
overflow:hidden;
border-top:5px solid #008BD2;
border-radius:0 0 12px 12px;
background:#ffffff;
}
.p-newsCard__link {
position:relative;
display:grid;
grid-template-columns:255px 1fr 34px;
align-items:center;
min-height:105px;
padding-top:0;
padding-right:22px;
padding-bottom:0;
padding-left:36px;
}
.p-newsCard__meta {
display:flex;
align-items:center;
gap:18px;
}
.p-newsCard__date {
color:#333333;
font-size:14px;
font-size:0.875rem;
line-height:1.4;
font-family:'Roboto', 'Noto Sans JP', sans-serif;
font-weight:700;
}
.p-newsCard__category {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:72px;
min-height:23px;
padding-top:2px;
padding-right:10px;
padding-bottom:2px;
padding-left:10px;
border-radius:5px;
background:#008BD2;
color:#ffffff;
font-size:11px;
font-size:0.6875rem;
line-height:1.2;
font-weight:700;
text-align:center;
}
.p-newsCard__title {
color:#333333;
font-size:15px;
font-size:0.9375rem;
line-height:1.7;
font-weight:500;
}
.p-newsCard__arrow {
display:flex;
align-items:center;
justify-content:center;
color:#008BD2;
font-size:18px;
font-size:1.125rem;
line-height:1;
font-weight:700;
}
.p-newsPagination {
display:flex;
align-items:center;
justify-content:center;
gap:32px;
margin-top:5%;
color:#333333;
font-size:13px;
font-size:0.8125rem;
line-height:1.4;
}
.p-newsPagination a,
.p-newsPagination span {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:12px;
color:#333333;
}
.p-newsPagination__current {
color:#008BD2 !important;
font-weight:700;
}
.p-newsSingle {
max-width:1230px;
margin-top:100px;
margin-top:6.25rem;
margin-bottom:40px;
margin-bottom:2.5rem;
padding-top:80px;
padding-top:5rem;
padding-right:80px;
padding-right:5rem;
padding-bottom:80px;
padding-bottom:5rem;
padding-left:80px;
padding-left:5rem;
border-top:5px solid #008BD2;
background:#ffffff;
}
.p-newsSingle__header {
margin-bottom:0;
}
.p-newsSingle__meta {
display:flex;
align-items:center;
gap:18px;
font-size:18px;
font-size:1.125rem;
font-weight:700;
}
.p-newsSingle__date {
color:#333333;
font-size:18px;
font-size:1.125rem;
line-height:1.4;
font-family:'Roboto', 'Noto Sans JP', sans-serif;
font-weight:700;
}
.p-newsSingle__category {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:72px;
min-height:23px;
padding-top:2px;
padding-right:10px;
padding-bottom:2px;
padding-left:10px;
border-radius:5px;
background:#008BD2;
color:#ffffff;
font-size:14px;
font-size:0.875rem;
line-height:1.2;
font-weight:700;
text-align:center;
}
.p-newsSingle__title {
margin-top:40px;
margin-top:2.5rem;
margin-right:0;
margin-bottom:40px;
margin-bottom:2.5rem;
margin-left:0;
color:#333333;
font-size:35px;
font-size:2.1875rem;
line-height:1.6;
font-weight:700;
}
.p-newsSingle__body {
color:#333333;
font-size:16px;
font-size:1rem;
line-height:2.15;
font-weight:400;
}
.p-newsSingle__body p {
margin-top:0;
margin-right:0;
margin-bottom:40px;
margin-bottom:2.5rem;
margin-left:0;
line-height:2.15;
font-size:16px;
font-size:1rem;
font-weight:400;
}
.p-newsSingle__body ul {
display:flex;
flex-direction:column;
gap:0;
margin-top:0;
margin-right:0;
margin-bottom:40px;
margin-bottom:2.5rem;
margin-left:0;
}
.p-newsSingle__body li {
position:relative;
margin-bottom:20px;
margin-bottom:1.25rem;
padding-left:18px;
font-size:16px;
font-size:1rem;
font-weight:400;
}
.p-newsSingle__body li:last-child {
margin-bottom:0;
}
.p-newsSingle__body li::before {
content:"";
position:absolute;
top:0.92em;
left:0;
width:7px;
height:7px;
border-radius:50%;
background:#008BD2;
}
.p-newsSingle__body figure {
margin-top:0;
margin-right:0;
margin-bottom:40px;
margin-bottom:2.5rem;
margin-left:0;
}
.p-newsSingle__body img {
width:100%;
height:auto;
margin-bottom:40px;
margin-bottom:2.5rem;
}
.p-newsSingle__body figure img {
margin-bottom:0;
}
.p-newsSingle__body a {
color:#008BD2;
font-size:16px;
font-size:1rem;
font-weight:400;
text-decoration:none;
}
.p-newsSingleNav {
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:24px;
max-width:1230px;
margin-top:2.5%;
margin-right:auto;
margin-bottom:40px;
margin-bottom:2.5rem;
margin-left:auto;
font-size:14px;
font-size:0.875rem;
line-height:1.4;
font-weight:700;
}
.p-newsSingleNav a {
color:#008BD2;
}
.p-newsSingleNav__prev,
.p-newsSingleNav__next {
    position: relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:200px;
width:12.5rem;
height:40px;
height:2.5rem;
min-height:40px;
min-height:2.5rem;
border-radius:999px;
background:#008BD2;
color:#ffffff !important;
font-size:12px;
font-size:0.75rem;
transition:background-color 0.8s ease, color 0.8s ease;
}
.p-newsSingleNav__prev:hover,
.p-newsSingleNav__next:hover {
background:#2b6699;
}
.p-newsSingleNav__prev {
justify-self:start;
}
.p-newsSingleNav__next {
justify-self:end;
}
.p-newsSingleNav__placeholder {
visibility:hidden;
pointer-events:none;
}
.p-newsSingleNav__prev::before {
position:absolute;
left:10px;
width:10px;
width:0.625rem;
height:10px;
height:0.625rem;
margin-right:8px;
background:url('../images/common/icon_arrow_white_01.png') no-repeat center / contain;
content:"";
transform:rotate(180deg);
}
.p-newsSingleNav__next::after {
position:absolute;
right:10px;
width:10px;
width:0.625rem;
height:10px;
height:0.625rem;
margin-left:8px;
background:url('../images/common/icon_arrow_white_01.png') no-repeat center / contain;
content:"";
}