@charset "utf-8";


/*--------------------------------------------------------------

common

--------------------------------------------------------------*/

/* 取組事例 */
.supplier-example { position: relative; border-left: var(--cl-key) 1px solid;}
.supplier-example + .supplier-example { margin-top: 2rem;}
.supplier-example > * { padding: 2rem 0 4rem 1.5rem; }
.supplier-example-title { display: grid; margin-bottom: 2rem; align-items: center; }
.supplier-example-title-num { margin-bottom: 1rem; font-weight: 100; font-size: 4rem; line-height: 1;}
.supplier-example-title .u-title-m { margin-bottom: 0; color: var(--cl-key); line-height: 1.6;}
.supplier-example-title .u-title-m span { display: block; font-size: 1rem; color: var(--cl-txt);}
.supplier-example-inner { display: grid; gap: 1.5rem;}
.supplier-example-inner + .supplier-example-inner { margin-top: 3rem;}
.supplier-example-inner.clbox.clbox-3 { }
.supplier-example-inner.clbox.clbox-3 .clbox-item { display: grid; gap: 1rem; grid-template-columns: 1fr 1.5fr; }
.supplier-example-inner.clbox.clbox-3 .clbox-item-title { font-weight: bold;}
.supplier-example-inner.clbox.clbox-3 .clbox-item-title + p { font-size: 1.2rem;}
.supplier-example-inner.c-wrapBg .u-title-s { margin-bottom: 0;}
.supplier-example-btn { margin-top: 4rem;}

@media print, screen and (min-width: 640px) {
.supplier-example { padding: 6rem 4rem; border: var(--cl-gr) 1px solid; border-left: var(--cl-key) 1px solid;}
.supplier-example + .supplier-example { margin-top: 4rem;}
.supplier-example > * { padding: 0; }
.supplier-example-inner + .supplier-example-inner { margin-top: 6rem;}
.supplier-example-title { grid-template-columns: 11.4rem 1fr; margin-bottom: 4rem; }
.supplier-example-title-num { font-size: 7rem; margin-bottom: 0; }
.supplier-example-title .u-title-m { }
.supplier-example-title .u-title-m span { font-size: 1.4rem; }
.supplier-example-inner._grid { grid-template-columns: 1fr 35rem; grid-template-rows: 19.6rem 1fr; gap: 2rem 4rem;}
.supplier-example-inner._grid > *:nth-child(3) { grid-column-start: 1;  grid-column-end: 3;}
.supplier-example-inner._grid > *:nth-child(4) { grid-column-start: 1;  grid-column-end: 3;}

.supplier-example-inner.clbox.clbox-3 { gap: 4rem; }
.supplier-example-inner.clbox.clbox-3 .clbox-item { grid-template-columns: initial; display: block; }
.supplier-example-inner.clbox.clbox-3 .clbox-item-title { margin-top: 1.5rem; }
.supplier-example-inner.clbox.clbox-3 .clbox-item-title + p { margin-top: 0.5rem; font-size: 1.4rem; line-height: 1.6;}
.supplier-example-inner.clbox.clbox-3 .u-title-s { margin-bottom: 0;}

}

/* 続きを見る cssonly */
.readmore-box { position: relative; }
.readmore-box-item { position: relative; max-height: 40rem; margin-bottom: 0; overflow: hidden; transition: max-height 1s;}
.readmore-box:has(:checked) .readmore-box-item { max-height: 200rem; }
.readmore-box-item::after { display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 50%, hsla(0, 0%, 100%, .9) 0, #fff); content: ''; transition: 0.3s;}
.readmore-box:has(:checked) .readmore-box-item::after { opacity: 0; visibility: hidden; }
.readmore-box .readmore-box-btn { display: flex; align-items: center; gap: 0 4px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: var(--cl-key); font-size: 1.2rem; transition: 0.3s; }
.readmore-box .readmore-box-btn:hover { cursor: pointer; }
.readmore-box .readmore-box-btn::before { content: "VIEW MORE"; }
.readmore-box .readmore-box-btn::after { content: ""; display: inline-block; width: 2rem; height: 2rem; background: url(/assets/images/common/ico_ar_bl.svg) no-repeat center / contain; transform: rotate(90deg); transition: 0.3s; }
.readmore-box input { display: none; }
.readmore-box:has(:checked)  .readmore-box-btn { left: auto; right: 2rem; transform: translateX(0); }
.readmore-box:has(:checked) .readmore-box-btn::before { content: "CLOSE"; }
.readmore-box:has(:checked) .readmore-box-btn::after { transform: rotate(-90deg);  }

@media print, screen and (min-width: 640px) {
.readmore-box { padding-bottom: 4rem; }
.readmore-box .readmore-box-btn { font-size: 1.4rem;  }
}






/* テーブル */
.tableWrap { display: grid; grid-template-columns: repeat(4,1fr); border-top: var(--cl-gr) 1px solid; border-left: var(--cl-gr) 1px solid;}
.tableWrap > * { padding: 0.5rem 1rem; font-size: 1.1rem; border-bottom: var(--cl-gr) 1px solid; border-right: var(--cl-gr) 1px solid;}
.tableWrap .tableWrap-title { background-color: var(--cl-bggr);}

/* by language */
.tableWrap:lang(en) {  grid-template-columns: 0.5fr 1fr 1fr 1fr; }


@media print, screen and (min-width: 640px) {
.tableWrap { grid-template-columns: 1fr 1.5fr 1fr 3fr;}
.tableWrap > * { padding: 1.5rem 3rem; font-size: 1.4rem; }
/* by language */
.tableWrap:lang(en) {  grid-template-columns: 1fr 2fr 1.5fr 4fr; }

}

/* 補足 */
.u-txt-note { margin-top: 1rem; font-size: 1.2rem;}
.u-txt-note + .u-txt-note { margin-top: 1rem;}

@media print, screen and (min-width: 640px) {
.u-txt-note { margin-top: 2rem; font-size: 1.3rem;}
}




/*--------------------------------------------------------------

index

--------------------------------------------------------------*/

.index-pickup {}
.index-pickup .clbox { gap: 2rem;}
.index-pickup .u-title-m { margin-bottom: 1rem;}
.index-pickup .u-btn { margin-top: 2rem;}

@media print, screen and (min-width: 640px) {
.index-pickup .clbox { gap: 6rem; align-items: center;}

}


/*--------------------------------------------------------------

〜ともに共通

--------------------------------------------------------------*/

.outlineWrap { margin-top: 2rem; border-top: var(--cl-gr) 1px solid;  border-bottom: var(--cl-gr) 1px solid;}
.outlineWrap-item { padding: 2rem 0; }

@media print, screen and (min-width: 640px) {
.outlineWrap { margin-top: 4rem;}
.outlineWrap-item { padding: 3rem 0; }

}

/* supplier */
.page-sustainability-supplier {}
.supplier-picBox { grid-template-columns: 1fr 40rem;}
.supplier-picBox > * { }
.supplier-picBox > *:nth-child(1) { order: 2; }
.supplier-picBox > *:nth-child(2) { order: 1; }

@media print, screen and (min-width: 640px) {
.page-sustainability-supplier .sec-lead { gap: 1.5rem; margin-bottom: 5rem; }
}

.supplier-note { margin-top: 3rem;}
.supplier-note-title { display: inline-block; margin-bottom: 1rem; padding: 0.5rem 1rem; background-color: var(--cl-bggr); color: var(--cl-key);}
.supplier-note-list + .supplier-note-list { margin-top: 0.5rem;  }
.supplier-note-list-item + .supplier-note-list-item { margin-top: 0.5rem;  }

@media print, screen and (min-width: 640px) {
.supplier-note { margin-top: 5rem;}
.supplier-note-title { margin-bottom: 2rem;}
.supplier-note-grid { display: flex; gap: 14rem;  }
.supplier-note-list {  }
.supplier-note-list-item span { display: inline-block; margin-right: 1rem; color: var(--cl-key);  }
}


/* environment */
.page-sustainability-environment .sec03-grid { display: grid; gap: 2rem;}
.page-sustainability-environment .u-title-m + span { display: block; margin: -1.5rem 0 2rem calc(1em + 2rem); font-weight: bold; }

/* by language */
.page-sustainability-environment .tableWrap:lang(en) { grid-template-columns: 1fr 1.2fr 1fr 1.2fr; }

@media print, screen and (min-width: 640px) {
.page-sustainability-environment .sec03-grid { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 2rem 4rem;}
.page-sustainability-environment .sec03-grid >*:nth-child(3) { grid-column-start: 1; grid-column-end: 3; }

/* by language */
.page-sustainability-environment .tableWrap:lang(en) {  grid-template-columns: 1fr 1fr 1fr 2fr; }

}


/* employee */
.page-sustainability-employee {}
.page-sustainability-employee .sec01-contents { padding: 0 2rem; border: var(--cl-gr) 1px solid;}
.page-sustainability-employee .sec01-contents .u-title-m { margin-bottom: 1rem;}
.page-sustainability-employee .sec01-contents > * { padding: 2rem 0;}
.page-sustainability-employee .sec01-contents > * + div { border-top: var(--cl-gr) 1px solid;}
.page-sustainability-employee .sec01-contents > * p + p { margin-top: 1rem;}
.page-sustainability-employee .sec01-contents > * span { font-weight: bold;}

@media print, screen and (min-width: 640px) {
.page-sustainability-employee .sec01-contents { padding: 0 4rem; }
.page-sustainability-employee .sec01-contents .u-title-m { margin-bottom: 2rem;}
.page-sustainability-employee .sec01-contents > * { padding: 4rem 0;}
.page-sustainability-employee .sec01-contents > * p + p { margin-top: 1.5rem;}

}



/* healthmanagemen */
.page-sustainability-healthmanagement #sec01 {}
.page-sustainability-healthmanagement #sec01 .u-title-m { text-align: center;}
.page-sustainability-healthmanagement #sec01 .sec01-lead { padding-top: 2rem; border-top: var(--cl-gr) 1px solid;}
.page-sustainability-healthmanagement #sec01 .sec01-lead p + p { margin-top: 1rem;}
.page-sustainability-healthmanagement #sec01 .sec01-lead p:last-child { margin-top: 2rem; text-align: right;}
.page-sustainability-healthmanagement #sec04 .tableWrap { grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr 1fr;}
.page-sustainability-healthmanagement #sec04 .tableWrap p span { width: 1.2rem;}
.page-sustainability-healthmanagement #sec05 .tableWrap { grid-template-columns: initial;}
.page-sustainability-healthmanagement #sec05 .tableWrap > * { padding: 1rem; font-size: 1.3rem; }

@media print, screen and (min-width: 640px) {
.page-sustainability-healthmanagement #sec01 .c-wrapBg { padding: 6rem;}
.page-sustainability-healthmanagement #sec01 .sec01-lead { margin-top: 4rem; padding-top: 4rem; }
.page-sustainability-healthmanagement #sec01 .sec01-lead p:last-child { margin-top: 4rem; }
.page-sustainability-healthmanagement #sec05 .tableWrap { grid-template-columns: 1fr 3fr;}
.page-sustainability-healthmanagement #sec05 .tableWrap > * { padding: 1.5rem 3rem; font-size: 1.4rem; }
}



/* human-rights */
.page-sustainability-human-rights #sec01 {}
.page-sustainability-human-rights #sec01 .u-title-m { text-align: center;}
.page-sustainability-human-rights #sec01 .sec01-lead { }
.page-sustainability-human-rights #sec01 .sec01-lead p + p { margin-top: 1rem;}
.page-sustainability-human-rights #sec01 .sec01-lead p:last-child { margin-top: 2rem; text-align: right;}
.page-sustainability-human-rights #sec01 .sec01-lead dl { margin-top: 3rem;}
.page-sustainability-human-rights #sec01 .sec01-lead dl .u-title-s { margin-bottom: 1rem;}

@media print, screen and (min-width: 640px) {
.page-sustainability-human-rights #sec01 .c-wrapBg { padding: 6rem;}
.page-sustainability-human-rights #sec01 .sec01-lead { margin-top: 4rem; }
.page-sustainability-human-rights #sec01 .sec01-lead p:last-child { margin-top: 4rem; }
.page-sustainability-human-rights #sec01 .sec01-lead dl { margin-top: 4rem;}
}




/*--------------------------------------------------------------

sdgs

--------------------------------------------------------------*/

/* top-nav */
.sdgsNav { display: grid; grid-template-columns: repeat(3,1fr); border-radius: 0.5rem; background-color: var(--cl-bggr); overflow: hidden;}
.sdgsNav-item { text-align: center;}
.sdgsNav-item br { display: none;}
.sdgsNav-item a { display: block; padding: 1rem; color: var(--cl-key);}
.sdgsNav-item span { display: block;}
.sdgsNav-item.is-active a { background-color: var(--cl-key); color: var(--cl-wh);}

/* by language */
.sdgsNav:lang(en) { display: block; }

@media print, screen and (min-width: 640px) {
.sdgsNav-item a { display: flex; justify-content: center; align-items: center; padding: 1.5rem;}
.sdgsNav-item span { margin-right: 0.5rem;}
/* by language */
.sdgsNav:lang(en) { display: grid; grid-template-columns: repeat(3,1fr); }

}

/* next-btn */
.sdgs-btn { margin-top: 2rem; border-top: var(--cl-key) 1px solid; border-bottom: var(--cl-key) 1px solid;}
.sdgs-btn a { display: block;  padding: 2rem; }
.sdgs-btn a > span { display: flex; align-items: center; justify-content: center; color: var(--cl-key);}
.sdgs-btn a > span::after { content: "";display: block; width: 1.5em; height: 1.5em; background: url(/assets/images/common/ico_ar_bl.svg) no-repeat center / contain;}
.sdgs-btn span.u-ff01-b { display: inline-block; margin-right: 0.5rem; line-height: 1;}

@media print, screen and (min-width: 640px) {
.sdgs-btn { margin-top: 12rem; }
.sdgs-btn a { font-size: 2rem; padding: 4rem;}
.sdgs-btn a > span::after { margin-left: 0.5rem;}
.sdgs-btn span.u-ff01-b { margin-right: 1rem; }

}

/* idx */
.sdgsIdx-logo { max-width: 41.8rem; margin: 0 auto;}
.sdgsIdx-lead {}

@media print, screen and (min-width: 640px) {
.sdgsIdx-lead { text-align: center;}
}
.sdgsIdx-info-txt { margin-top: 2rem;}
.sdgsIdx-info-txt + .sdgsIdx-info-pic { margin-top: 3rem;}
.sdgsIdx-info-num { text-align: center; color: var(--cl-key);}
.sdgsIdx-info-num span { display: inline-block; margin-right: 0.5rem; }
.sdgsIdx-info-num + .u-title-s { margin: 0.5rem 0 1rem; text-align: center; }

@media print, screen and (min-width: 640px) {
.sdgsIdx-info { display: grid; grid-template-columns: 56rem 1fr; gap: 3rem 4rem; margin-top: 6rem;}
.sdgsIdx-info-txt { margin-top: 0;}
.sdgsIdx-info-txt + .sdgsIdx-info-pic { margin-top: 0;}
.sdgsIdx-info-txt:nth-of-type(2) { margin-top: -8rem;}
.sdgsIdx-info-txt:nth-of-type(3) { margin-top: -5rem;}
.sdgsIdx-info-num { text-align: left; }
.sdgsIdx-info-num + .u-title-s { margin: 0.5rem 0 1rem; text-align: left; }
.sdgsIdx-info-num + .u-title-s + p { font-size: 1.4rem;}

/* by language */
.sdgsIdx-info-txt:nth-of-type(2):lang(en) { margin-top: -4rem; }
.sdgsIdx-info-txt:nth-of-type(3):lang(en) { margin-top: 0; }

}


/* mission */
.page-sustainability-mission {}
.page-sustainability-mission .sec01 {}
.page-sustainability-mission .sec01 .img-menu-wrap { position: relative;}
.page-sustainability-mission .sec01 .img-menu { position: relative; width: 100%; height: 35rem; margin: 0 auto; background: url(/assets/images/sustainability/sdgs/mission_sec01_bg.svg) no-repeat center / 80%;}
.page-sustainability-mission .sec01 .img-menu:lang(en) { background-image: url(/assets/images/sustainability/sdgs/mission_sec01_bg_en.svg) }
.page-sustainability-mission .sec01 .img-menu > * { position: absolute; width: 10rem; height: 10rem; }
.page-sustainability-mission .sec01 .img-menu > *:nth-child(1) { top: 0; right: 0; left: 0; margin: 0 auto; }
.page-sustainability-mission .sec01 .img-menu > *:nth-child(2) { top: 24%; left: 0;}
.page-sustainability-mission .sec01 .img-menu > *:nth-child(3) { top: 24%; right: 0; }
.page-sustainability-mission .sec01 .img-menu > *:nth-child(4) { bottom: 0; left: 10%; }
.page-sustainability-mission .sec01 .img-menu > *:nth-child(5) { bottom: 0; right: 10%; }

.page-sustainability-mission .sec01 .img-menu-txt { display: none; }
.page-sustainability-mission .sec02 { padding: 4rem 0; background-color: var(--cl-bggr);}
.page-sustainability-mission .sec02-logo { width: 50%; margin: 0 auto 2rem;}

@media print, screen and (min-width: 640px) {
.page-sustainability-mission .sec01 .img-menu { position: relative; width: 64rem; height: 62rem; margin: 0 auto; background: url(/assets/images/sustainability/sdgs/mission_sec01_bg.svg) no-repeat center / 35.2rem;}
.page-sustainability-mission .sec01 .img-menu > * { width: 18rem; height: 18rem; z-index: 5; }
.page-sustainability-mission .sec01 .img-menu > *:nth-child(2) { top: 28%; left: 0; }
.page-sustainability-mission .sec01 .img-menu > *:nth-child(3) { top: 28%; right: 0; }
.page-sustainability-mission .sec01 .img-menu > *:nth-child(4) { bottom: 0; left: 14%; }
.page-sustainability-mission .sec01 .img-menu > *:nth-child(5) { bottom: 0; right: 14%; }
.page-sustainability-mission .sec01 .img-menu-txt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 2;}
.page-sustainability-mission .sec01 .img-menu-txt li { position: absolute;}
.page-sustainability-mission .sec01 .img-menu-txt li p { text-indent: -1.3em; margin-left: 1.3em; font-size: 1.3rem;}
.page-sustainability-mission .sec01 .img-menu-txt li p + p { margin-top: 0.5rem;}
.page-sustainability-mission .sec01 .img-menu-txt li p::before { content: "●"; margin-right: 0.5rem;}
.page-sustainability-mission .sec01 .img-menu-txt li:nth-child(1) { top: 5%; left: 62%; }
.page-sustainability-mission .sec01 .img-menu-txt li:nth-child(1) p::before { color: #2870BA;}
.page-sustainability-mission .sec01 .img-menu-txt li:nth-child(2) { top: 30%; left: 0; max-width: 26rem;}
.page-sustainability-mission .sec01 .img-menu-txt li:nth-child(2) p::before { color: #2870BA;}
.page-sustainability-mission .sec01 .img-menu-txt li:nth-child(3) { top: 30%; left: 80%;}
.page-sustainability-mission .sec01 .img-menu-txt li:nth-child(3) p::before { color: #2870BA;}
.page-sustainability-mission .sec01 .img-menu-txt li:nth-child(4) { bottom: 0; left: 5%; max-width: 26rem;}
.page-sustainability-mission .sec01 .img-menu-txt li:nth-child(4) p::before { color: #13416C;}
.page-sustainability-mission .sec01 .img-menu-txt li:nth-child(5) { bottom: 10%; left: 72%;}
.page-sustainability-mission .sec01 .img-menu-txt li:nth-child(5) p::before { color: #13416C;}


.page-sustainability-mission .sec02 { padding: 8rem 0; }
.page-sustainability-mission .sec02-grid { display: grid; grid-template-columns: 24rem 1fr; gap: 6rem;}
.page-sustainability-mission .sec02-logo { width: auto; margin: 0 auto;}

}


.page-sustainability-mission .sec03 .c-boxwrap > * { position: relative;}
.page-sustainability-mission .sec03-sdgsItem { display: grid; grid-template-columns: repeat(7,4rem); gap: 1rem;}

.page-sustainability-mission .sec03-example {}
.page-sustainability-mission .sec03-example-item { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem 1.5rem; align-items: center;}
.page-sustainability-mission .sec03-example-pic { order: 1; }
.page-sustainability-mission .sec03-example-title { order: 2; font-size: 1.5rem;}
.page-sustainability-mission .sec03-example-txt { order: 3; grid-column-start: 1; grid-column-end: 3;}

@media print, screen and (min-width: 640px) {
.page-sustainability-mission .sec03-sdgsItem { position: absolute; top: 0; right: 0; display: flex; gap: 1rem;}
.page-sustainability-mission .sec03-example-item { display: block;}
.page-sustainability-mission .sec03-example-title { font-size: 1.7rem; text-align: center;}
.page-sustainability-mission .sec03-example-pic { margin-top: 1rem; }
.page-sustainability-mission .sec03-example-txt { margin-top: 1.5rem; grid-column-start: initial; grid-column-end: initial; font-size: 1.4rem;}


}


/* vision */
.page-sustainability-vision figure { border-radius: 0.5rem; overflow: hidden;}
.page-sustainability-vision .clbox { align-items: center;}



/* message */
.greeting-top { display: grid; gap: 2rem;}
.greeting-top > *:nth-child(1) { order: 2;}
.greeting-pic { order: 1; width: 60%; margin: 0 0 0 auto;}
.page-sustainability-message picture { border-radius: 0.5rem; overflow: hidden;}

@media print, screen and (min-width: 640px) {
.greeting-top { display: grid; gap: 3rem; align-items: center; grid-template-columns: 1fr 30rem;}
.greeting-top > *:nth-child(1) { order: 1;}
.greeting-pic { order: 2; width: auto; margin: 0;}
.greeting-catch + p { margin-top: 1rem;}

}


