@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root {
	scroll-padding-top: 171px;
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	font-size: 1.6rem;
}

object {
	pointer-events: none;
}

.sp {
	display: none !important;
}

a[href^="tel:"] {
	pointer-events: none;
}

a {
	text-decoration: none;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

a:hover {
	opacity: .7
}

.pcFlex {
	display: flex;
}

.pcFlex.half {
	justify-content: space-between;
}

.pcFlex.half>* {
	width: 47.6%;
}

.img_r {
	overflow: hidden;
}

.img_r>img {
	float: right;
	width: 33%;
	margin-left: 15px;
	margin-bottom: 15px;
}

p,
li,
dt,
dd,
th,
td,
input {
	font-size: 1.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1.6rem;
}

section {
	padding: 100px 0;
}

/*タイトル
========================================== */
#top .h2Tit {
	font-size: min(2.1vw, 2.8rem);
}

#top .h3Tit {
	font-size: min(2.1vw, 2.8rem);
}

.h2Tit {
	font-size: min(2.27vw, 3.1rem);
}

.h3Tit {
	font-size: min(2.1vw, 2.8rem);
	margin-bottom: 1.5em;
}

.h4Tit {
	font-size: min(1.8vw, 2.4rem);
}

.h5Tit {}

.h6Tit {}

.mainTitle h1 {
	font-size: 4.2rem;
}

p.strong {
	font-size: min(2.1vw, 2.8rem);
}


/*
　テキスト
========================================== */
.note {
	font-size: 1.2rem;
}

/*		leadTxt
-----------------------------*/
.leadTxt {}

/*
　ボタン
========================================== */
.btn {
	font-size: 1.6rem;
	padding: 15px 50px 15px 21px;
	min-width: 260px;
	height: 59px;
}

.btn:not(.icOther)::before {
	width: 21px;
	height: 21px;
	top: calc(50% - 9px);
	right: 6%;
}

.btn:not(.icOther)::after {
	width: 6px;
	height: 6px;
	top: calc(50% + 1.5px);
	right: calc(8px + 6%);
}


/*-- table --*/
.basicTable>dt {
	padding: 15px 2.5%;
	width: 30%;
}

.basicTable>dd {
	padding: 15px 2.5%;
	width: 70%;
}

.basicTable.dtWide dt {
	width: 80%;
}

.basicTable.dtWide dd {
	width: 20%;
}

.basicTable>dt:last-of-type {
	border-bottom: 1px solid var(--gray);
}

table.basicTable thead th {
	font-size: 1.8rem;
}

/*
　ボックス、リスト
========================================== */
.txtImgBox.pcFlex.half>*,
.txtImgBox.flex.half>*,
.txtImgBox.flexWrap.half>*,
.txtImgBox.pcFlex>.txts,
.txtImgBox.flex>.txts,
.txtImgBox.flexWrap>.txts {
	flex: 1;
}

.flowList li .txts {
	margin: 0 -10px;
}


/* =======================================
	header
========================================== */
header {
	height: 109px;
}

#headerInner {
	align-items: flex-start;
	gap: 0 3%;
	padding-top: 37px;
}

.headerContact {
	position: absolute;
	bottom: min(4.5vw, 63px);
	right: 0;
}

.headerContact .tel {
	font-size: 2.4rem;
	font-weight: 400;
}

.headerContact .tel a {
	color: var(--base);
}

.headerContact .tel .time {
	margin-left: 8px;
	font-size: 1.4rem;
	color: var(--gray);
}

.headerContact .tel .time .fontS {
	font-size: 1.2rem;
}

/* =======================================
	gnavi
========================================== */
.gnavi {
	flex: 1;
}

.gnaviContainer {
	position: relative;
}

.gnaviList2 {
	gap: 0 29px;
	position: absolute;
	bottom: 111px;
	right: 0;
}

.gnaviList2 li {
	font-size: 1.4rem;
	font-weight: 700;
}

.gnaviList2 a {
	color: var(--greige);
}

#gnaviList {
	background: var(--green);
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	margin-right: 0;
	margin-left: auto;
	margin-top: 31px;
	/* max-width: 705px; */
	height: 87px;
}

#gnaviList>li {
	font-size: min(1.25vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	padding: 1px 2.5%;
	text-align: center;
}

#gnaviList>li+li {
	border-left: 1px solid var(--Lgreen);
}

#gnaviList a {
	color: var(--wh);
}

#gnaviList>li,
#gnaviList .hasSub>a {
	position: relative;
}

#gnaviList .hasSub:hover .sub {
	display: block;
	visibility: visible;
}

#gnaviList .sub {
	display: none;
	visibility: hidden;
	position: absolute;
	top: calc(100% + 1px);
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 2;
	transition: all 0.6s ease-in-out;
	min-width: 100px;
}

#gnaviList .sub li {
	font-size: min(1.2vw, 1.4rem);
}

#gnaviList .sub li+li {
	border-top: 1px solid var(--green);
}

#gnaviList .sub li a {
	background: rgba(255, 255, 255, 1);
	display: block;
	padding: 8px 10px 10px;
	color: var(--green);
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}

#gnaviList li a:hover {
	opacity: .7;
}

#gnaviList .sub li a:hover {
	background: rgba(13, 64, 29, 1);
	color: var(--wh);
	opacity: 1;
}

/* =======================================
	footer/#footBottom
========================================== */
footer {
	margin-top: -154px;
}

footer a:hover {
	opacity: 0.7;
}

#footBottom {
	padding-bottom: 44px;
}

#footBottom>.pcFlex {
	justify-content: space-between;
}

#footBottom .btn {
	margin-top: 38px;
	width: min(100%, 309px);
}

.footerRight {
	display: flex;
	justify-content: end;
	gap: 0 min(3.1vw, 46px);
	line-height: 1.4;
	margin-top: 74px;
}

.footerNavi>li+li {
	margin-top: 27px;
}

.footerNavi li.hasSub+li.hasSub {
	margin-top: 35px;
}

.footerNavi .sub li {
	margin-top: 6px;
}

.footerNavi li a {
	font-size: 1.4rem;
	line-height: normal;
	letter-spacing: 0.04em;
	color: var(--base);
}

.footerNavi li a {
	display: block;
}

.footerNavi .sub li a {
	font-size: 1.2rem;
}

.footerNavi .sub li span {
	display: inline-block;
	margin-left: 10px;
	padding-left: 1.3em;
	position: relative;
}

.footerNavi .sub li span::before {
	content: "";
	background: url("../images/footer_ic.svg") no-repeat left top / 100% auto;
	display: inline-block;
	width: 8px;
	height: 2px;
	position: absolute;
	left: 0;
	top: calc(0.5em + 2px);
}

#pageTop {
	right: 7.1vw;
	bottom: 56px;
}

#pageTop a {
	font-size: 1.4rem;
	width: 80px;
	height: 80px;
}

#pageTop a::before {
	top: 22px;
}

#footBottomCopy .copy {
	font-size: 1.3rem;
}

/* =======================================
	pgs common
========================================== */
/*		anchorLink
-----------------------------*/
.anchorLink {
	padding: 50px 0;
	gap: 0 1.8%;
	justify-content: center;
}

.anchorLink ul {
	padding: 35px 0;
	gap: 15px 20px;
}

/* .pageLinks{
	gap:15px 30px;
	padding: 35px 0 ;
} */
.pageLinks ul {
	gap: 15px 20px;
}

/*hover action*/
.pageLinks li a::before,
.pageLinks li a::after {
	background-color: var(--wh);
}

.pageLinks li a span::before,
.pageLinks li a span::after {
	content: "";
	display: block;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	-webkit-transform-origin: center;
	transform-origin: center;
	box-sizing: inherit;
	position: absolute;
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	transform: scale3d(1, 1, 1);
}

.pageLinks li a::before,
.pageLinks li a::after {
	background-color: var(--wh);
	transform: scale3d(0, 1, 1);
}

.pageLinks li a span::before {
	border: solid var(--Lgray);
	border-width: 1px 0 1px 0;
}

.pageLinks li a span::after {
	border: solid var(--Lgray);
	border-width: 0 1px 0 1px;
}

.pageLinks li a:hover::before,
.pageLinks li a:hover::after {
	transform: scale3d(1, 1, 1);
}

.pageLinks li a span:hover::before {
	transform: scale3d(0, 1, 1);
}

.pageLinks li a span:hover::after {
	transform: scale3d(1, 0, 1);
}

.anchorLink li,
.pageLinks li {
	flex: 1;
	height: 50px;
}

.anchorLink a,
.pageLinks li a {
	padding: 8px 10px;
}

.anchorLink+section {
	padding-top: 65px;
}

main .pageLinks:last-of-type li {
	height: 70px;
}

/* =======================================
	top PC
========================================== */
/*		#mv
-----------------------------*/
#mv {
	height: 585px;
}

#mvTxts h2 {
	font-size: min(6.4vw, 4rem);
}

#mvTxts p {
	font-size: min(6.4vw, 1.8rem);
	line-height: 1.5em;
	margin-top: 23px;
	padding: 0 50px 17px 65px;
}

#mvTxts p::after {
	width: 520px;
	height: 52px;
}

/*		#topSdgs
----------------------------------*/
#topSdgs {
	padding-top: 130px;
}

#topSdgs .pcFlex {
	gap: 100px;
	align-items: flex-start;
}

#topSdgs .pcFlex figure {
	width: 500px;
}

#topSdgs .pcFlex .txts {
	width: calc(100% - 540px);
}

#topSdgs .pcFlex .txts h2 {
	margin-left: -260px;
	margin-right: 24px;
	margin-bottom: 55px;
	z-index: 10;
	position: relative;
	margin-top: -2.2em;
}

#topSdgs .pcFlex .txts h2::after {
	width: 76px;
	height: 108px;
	right: -76px;
	top: -57px;
}

#topSdgs .pcFlex .txts p {
	margin-bottom: 36px;
	font-size: 2rem;
	font-weight: bold;
}

/*		#topSustainability
----------------------------------*/
#topSustainability {
	padding-bottom: 155px;
}

#topSustainability>div::before {
	width: 132px;
	height: 95px;
	left: -45px;
	top: -133px;
}

#topSustainability::after {
	width: 176px;
	height: 164px;
	right: 0;
	bottom: 123px;
}

#topSustainability .pcFlex {
	gap: 40px
}

#topSustainability .pcFlex figure {
	width: 470px
}

#topSustainability .pcFlex .txts {
	width: 550px
}

#topSustainability .pcFlex .txts h2 {
	font-size: min(2.54vw, 36px);
	margin-bottom: 18px;
}

#topSustainability .pcFlex .txts p {
	font-size: 1.8rem;
	margin-bottom: 3.5rem;
}

/*		#topEsg
----------------------------------*/
#topEsg {
	margin-top: min(-4vw, -56px);
}

#topEsg>div::before {
	width: 96px;
	height: 102px;
	left: -49px;
	top: -133px;
}

#topEsg h2 {
	margin-bottom: 30px
}

#topEsg h2 img {
	max-width: 638px;
	margin: auto;
}

#topEsg p {
	font-size: 2.4rem;
	margin-bottom: 70px
}

#topEsg .pcFlex {
	gap: 20px;
}

#topEsg .pcFlex li a {
	padding: 40px 60px 40px 15px;
}

#topEsg .pcFlex li a::before {
	width: 50px;
	height: 50px;
	top: calc(50% - 25px);
	right: 3%;
	border-radius: 25px
}

#topEsg .pcFlex li a::after {
	width: 10px;
	height: 10px;
	top: calc(50% - 0px);
	right: calc(20px + 3.25%);
}

#topEsg .pcFlex li a img {
	margin-right: 10px
}

/*		#topReport
----------------------------------*/
#topReport>div {
	background: url("../images/top_report_bg.jpg") no-repeat left top / cover;
	padding: 52px min(6.6%, 73px) 51px min(51.5%, 645px);
}

#topReport>div::after {
	width: 132px;
	height: 95px;
	bottom: 75px;
	right: -102px;
}

#topReport .h2Tit {
	font-size: 3rem;
	margin-bottom: 25px;
}

#topReport .h2Tit .en {
	height: 22px;
}

#topReport p {
	font-size: 1.8rem;
	margin-bottom: 37px;
	max-width: 382px;
}


/* =======================================
   Page common
========================================== */
/*		.cmnEffortsArea
-----------------------------*/
.cmnEffortsArea {
	padding-bottom: 150px;
}

.cmnEffortsArea .cmnEffortList {
	gap: 30px 20px;
}

.cmnEffortsArea .cmnEffortList li {
	width: min(calc((100% - 20px*3)/4), 230px);
}

.cmnEffortsArea .cmnEffortList li figure.imgS {
	margin-top: 35px;
	margin-bottom: 30px;
}

/*		.cmnBorderBox
-----------------------------*/
.cmnBorderBox {
	padding: 20px 40px 40px;
}

/* =======================================
   sdgs
========================================== */
#sdgs footer {
	margin-top: 0;
}

#sdgs #footBottom {
	padding-top: 55px;
}

#sdgsSocotec h3 {
	font-size: min(1.8vw, 2.2rem);
}

#sdgsSocotec .pcFlex {
	gap: 5%;
}

#sdgsSocotec .imgs {
	width: 40%;
}

#sdgsSocotec .txts {
	width: 55%;
}

#sdgsPurpose ul.flexWrap {
	gap: 40px;
	justify-content: center;
}

#sdgsPurpose ul.flexWrap li {
	flex: 1;
}

#sdgsPurpose ul.flexWrap li figure {
	width: min(71%, 90px);
}

#sdgsReport ul.pcFlex {
	gap: 0 40px;
}

#sdgsGuideline ul {
	gap: 0 40px;
}

#sdgsGuideline ul li {
	width: 200px;
	height: 200px;
}

#sdgsPromise ul {
	padding: 30px 30px 30px 10%;
}

#sdgsPromise ul li {
	font-size: min(1.47vw, 1.8rem);
}

#sdgsPromise ul li::before {
	width: 30px;
	height: 23.8px;
	left: -40px;
	top: calc((50% - 11.9px));
}

#sdgsReport .btn {
	padding-right: 60px;
}

/* =======================================
   sustainability
========================================== */
#sustainability footer {
	margin-top: 0;
}

#sustainability #footBottom {
	padding-top: 55px;
}

#sustainabilityAction ul {
	gap: 30px;
}

#sustainabilityAction ul li {
	padding: 30px 10px 35px;
	width: calc((100% - 80px) / 3);
}

#sustainabilityAction h3 {
	font-size: min(1.65vw, 2rem);
}

#sustainabilityAction p {
	font-size: 5rem;
}

#sustainabilityAction p span:not(.note) {
	font-size: 1.6rem;
}

#sustainabilityAction p span.txtS {
	font-size: 3rem;
}

#sustainabilityEcoVadis .h3Tit,
#companyShigaFactory .h3Tit {
	margin-top: 50px;
}

#sustainabilityEcoVadis .btnWrap {
	justify-content: center;
	gap: 40px;
	margin-top: 50px;
}

#sustainabilityEcoVadis .btnWrap .btn {
	min-width: 350px;
}

#sustainabilityEcoVadis .pcFlex {
	align-items: center;
}

#sustainabilityEcoVadis .bronzemedalBox {
	gap: 5%;
}

#sustainabilityEcoVadis .bronzemedalBox .imgs {
	width: 35%;
}

#sustainabilityEcoVadis .bronzemedalBox .txts {
	width: 60%;
}

#sustainabilityEcoVadis .radarchartBox p {
	font-size: min(1.8vw, 2.4rem);
	margin-bottom: 30px;
}

#sustainabilityEcoVadis .managementLevelBox p:not(.note) {
	font-size: min(1.5vw, 1.8rem);
}

#sustainabilityEcoVadis .managementLevelBox p span {
	font-size: 6rem;
}

#sustainabilityEcoVadis .scorecardBox {
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
}

#sustainabilityEcoVadis .scorecardBox li a {
	width: 100%;
}

#companyShigaFactory .reductionTarget {
	justify-content: center;
	align-items: center;
	gap: 0 100px;
}

#companyShigaFactory .reductionTarget dl {
	width: 250px;
	height: 250px;
}

#companyShigaFactory .reductionTarget dl:nth-of-type(1)::before,
#companyShigaFactory .reductionTarget dl:nth-of-type(1)::after {
	width: 20px;
	height: 22px;
	top: calc(50% - 11px);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#companyShigaFactory .reductionTarget dl:nth-of-type(1)::before {
	right: -45px;
}

#companyShigaFactory .reductionTarget dl:nth-of-type(1)::after {
	right: -80px;
}

#companyShigaFactory .reductionTarget dl dt {
	font-size: min(1.8vw, 2.4rem);
}

#companyShigaFactory .reductionTarget dl dd {
	font-size: min(2.45vw, 3rem);
}

#companyShigaFactory .reductionTarget dl dd span {
	font-size: 4.5rem;
	line-height: 1.4;
}

#companyShigaFactory .reductionTarget dl dd span.notice {
	font-size: 1.4rem;
	line-height: 1.1;
	display: block;
}

#companyShigaFactory figure {
	margin: 20px auto 0;
	width: 75%;
}

#sustainabilityEcoVadis .h3Tit+p,
#sustainabilityEcoVadis .h3Tit+p+p,
#companyShigaFactory .h2Tit+p,
#sdgsResourceReduction .h2Tit+p {
	text-align: center;
}

#sdgsResourceReduction {
	padding-bottom: 150px;
}

#sdgsResourceReduction div.pcFlex {
	margin-top: 30px;
	padding: 20px 4% 30px;
}

#sdgsResourceReduction div.pcFlex dl dt {
	font-size: 2rem;
}

#sdgsResourceReduction div.pcFlex dl dd {
	font-size: 2.4rem;
	padding: 30px 20px 40px;
}

#sdgsResourceReduction div.pcFlex dl dd .txtL {
	font-size: min(4.9vw, 6rem);
}

#sdgsResourceReduction div.pcFlex dl dd li {
	font-size: 2.4rem;
}

#sdgsResourceReduction div.pcFlex h3 {
	font-size: 2rem;
	margin-bottom: 15px;
}


/* =======================================
   enviroment
========================================== */
#enviroment main .txtImgBox {
	margin-top: 60px;
}

#enviromentDeveloping .txtImgBox .h4Tit span {
	width: 50px;
	height: 50px;
}

#enviromentDeveloping .challenges {
	gap: 0 100px;
	margin-top: 30px;
}

#enviromentDeveloping .challenges>div:nth-of-type(1)::before,
#enviromentDeveloping .challenges>div:nth-of-type(1)::after {
	width: 20px;
	height: 22px;
	top: calc(50% - 11px);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#enviromentDeveloping .challenges>div:nth-of-type(1)::before {
	right: -45px;
}

#enviromentDeveloping .challenges>div:nth-of-type(1)::after {
	right: -80px;
}

#enviromentDeveloping .challenges>div ul {
	margin: 0 10% 15px;
}

#enviromentDeveloping .h3Tit+p,
#enviromentResourceReduction .h3Tit+p {
	text-align: center;
}

#enviromentResourceReduction ul li figure img {
	width: 90px;
}

#enviromentResourceReduction ul li:nth-child(3) figure img {
	width: 150px;
}

#enviromentCertification .btn {
	height: 80px;
}

/* =======================================
   combine_shipping
========================================== */
#social-issues .pcFlex,
#points .pcFlex {
	gap: 40px
}

#social-issues .pcFlex li,
#points .pcFlex li,
#shippingSdgs .pcFlex figure {
	flex: 1
}

#social-issues .pcFlex h4,
#points .pcFlex h4 {
	font-size: min(3.6vw, 1.8rem);
}

#white-logistics .pcFlex {
	gap: 5%;
}

#white-logistics .pcFlex figure {
	width: 40%;
}

#white-logistics .pcFlex .txts {
	width: 55%;
}

#shippingSdgs .pcFlex {
	gap: 30px
}

#social-issues ul.pcFlex figure,
#points ul.pcFlex figure {
	width: 240px;
	height: 240px;
}

#social-issues ul.pcFlex li:nth-child(2) figure img {
	max-width: 135px;
}

.compare {
	gap: 80px;
	margin-bottom: 50px
}

.compare li {
	flex: 1;
}

.compare li:first-child:after {
	height: calc(tan(60deg) * 60px / 2);
	width: 30px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	right: -60px;
	top: calc(50% - 15px);
}

/* =======================================
   governance
========================================== */
/*		#governanceSecurity
-----------------------------*/
#governanceSecurity .txtImgBox .img {
	width: 33%;
}

#governanceSecurity .txtImgBox .txts {
	flex: 1;
}

#governanceSecurity .safetyBox h5 {
	font-size: min(1.8vw, 2.4rem);
}

/* =======================================
   governance / bcp
========================================== */
/*		#bcpPlan
-----------------------------*/
#bcpPlan .txtImgBox .txts {
	margin-bottom: 80px;
}

/* =======================================
   social / health
========================================== */
/*		#healthInitiatives PC
-----------------------------*/
#healthInitiativesList>* {
	width: calc(97%/2);
}

#healthInitiativesList dt:hover {
	cursor: pointer;
}

/* =======================================
   social / well-being
========================================== */
/*		#well-beingAbout PC
-----------------------------*/
#well-beingAboutList {
	gap: 40px;
}

#well-beingAboutList li {
	flex: 1;
}

#well-beingAboutList li>figure {
	width: 240px;
	height: 240px;
}

#well-beingAboutList li>h4 {
	font-size: min(3.6vw, 1.8rem);
}

/*		#well-beingSurveyReport PC
-----------------------------*/
#well-beingSurveyReport .bgLyellow h4.strong.bgLgreen {
	font-size: min(2.1vw, 2.8rem);
}

.latestReportCont.pcFlex {
	gap: 20px;
}

.latestReportCont .box {
	flex: 1;
}