@charset "utf-8";

.reveal-text01,
.reveal-text01::after {
	animation-delay: 0;
	animation-iteration-count: 1;
	animation-duration: 800ms;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text02,
.reveal-text02::after {
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-duration: 800ms;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text03,
.reveal-text03::after {
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-duration: 800ms;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text04,
.reveal-text04::after {
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-duration: 800ms;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text {
	animation-delay: 0;
	animation-iteration-count: 1;
	animation-duration: 800ms;
	position: relative;
	animation-name: clip-text;
	white-space: nowrap;
	cursor: default;
}
.reveal-text::after {
	content: "";
	position: absolute;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--mainColor);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
	animation-name: text-revealer;
}

@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes text-revealer {
  0%, 50% {
    transform-origin: 0 50%;
  }
  60%, 100% {
    transform-origin: 100% 50%;   
  }
  60% {
    transform: scaleX(1);
  }
  
  100% {
    transform: scaleX(0);
  }
}


.mainimage {
  animation: fadein 5s ease-out forwards;
}

@keyframes fadein {
  0% {
     opacity: 0
  }
  100% {
     opacity: 1
  }
}

.topContents {
    display: flex;
    align-items: stretch;
	position: relative;
}
.mainimage, .topStage {
    width: calc(100% - 125px);
}
.mainimage {
    position: relative;
}
.mainimage::before {
    content: "";
    background-image: url("../images/contents/index/mesh.webp");
    background-repeat: repeat;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    z-index: 5;
}
.mainimage img {
    width: 100%;
    vertical-align: bottom;
}
.topStage {
    top: 0;
    left: 0;
    height: 100%;
	padding: 50px;
    position: absolute;
	display: flex;
	align-items: center;
    color: #fff;
	z-index: 5;
    /*text-shadow: 0px 0px 7px #000;*/
}
.topStage .headline {
    font-size: 4.4rem;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 55px;
}
.topStage .headline-list {
    font-size: 2.0rem;
    position: relative;
	display: flex;
	flex-direction: column;
}
.topStage .headline-list li span::before {
    font-family: "Font Awesome 6 Free";
	content: "\f45c";
	font-weight: 900;
    transform: rotate(45deg);
    display: inline-block;
    font-size: 1.4rem;
    position: relative;
    top: -3px;
	padding-left: 5px;
    margin-right: 10px;
}
.mainimage-option {
    width: 125px;
    position: relative;
}
.mainimage-option::after {
    content: "";
    background-image: url("../images/contents/index/topinfo-bg.webp");
    background-repeat: no-repeat;
    background-position: center calc(100% - 50px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    position: absolute;
}
.mainimage-option div {
    padding: calc((100% - 60px) / 2);
    padding-bottom: 0;
    text-align: center;
}
.mainimage-option div img {
    width: 60px;
    height: auto;
    vertical-align: bottom;
}
.slick-dotted.slick-slider {
    margin-bottom: 0!important;
}
.slick-dots {
    z-index: 99;
    bottom: 50px!important;
}
.slick-dots li {
    margin: 0!important;
}
.slick-dots li button::before {
    font-family: unset!important;
    font-size: 3.0rem!important;
    font-weight: bold;
    content: "-"!important;
}
@media only screen and (max-width:999px) {
    .topContents {
        display: block;
    }
    .mainimage, .topStage, .mainimage-option {
        width: 100%;
    }
    .mainimage {
        width: 100%;
        height: 100vw;
    }
    .mainimage img {
        width: unset;
        height: 100vw;
        object-fit: cover;
    }
    .topStage {
        height: 100vw;
    }
    .topStage .headline {
        font-size: 2.5rem;
        line-height: 1.4;
        margin-bottom: 30px;
    }
    .topStage .headline-list {
        font-size: 1.5rem;
    }
    .topStage .headline-list li::before {
        font-size: 1.1rem;
    }
    .mainimage-option {
        display: flex;
        justify-content: center;
    }
    .mainimage-option::after {
        display: none;
    }
    .mainimage-option div {
        padding: 15px;
    }
    .slick-dots {
        bottom: 15px!important;
    }
}

/* おかげさまで */
/*.frontTopSection .frontTop-text {
    width: 455px;
}
.frontTopSection .sectionInner .flexBox1 div:nth-child(1) {
    margin-right: 45px;
}*/
.frontTop-text h2 {
    border-bottom: 2px solid var(--mainColor);
    margin-bottom: 50px;
    padding-bottom: 20px;
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1.5;
}
.frontTop-text h2 span {
    margin-right: 5px;
    font-size: 4.6rem;
    color: var(--mainColor);
}
.frontTop-text h3 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: var(--mainColor);
}
/*.frontTopSection .frontTop-map {
    width: calc(100% - 455px - 45px)
}*/
.frontTop-map img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
@media only screen and (max-width:999px) {
    .frontTop-text h2 {
        text-align: center;
    }
}

/* YACHIYOの倉庫について */
.aboutSection .sectionInner {
    width: 100%;
    max-width: 100%;
}
.aboutSection h2 {
    margin-bottom: 70px;
    font-size: 3.6rem;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.aboutSection h2 span {
    font-size: 2.0rem;
    display: block;
    color: var(--mainColor);
}
.aboutBox {
    display: flex;
    overflow: hidden;
}
.aboutBox > div {
    background: var(--mainColor);
    width: calc(100% / 3);
}
.aboutBox-img {
    background: #f5f5f5;
}
.aboutBox-img img {
    vertical-align: bottom;
}
.aboutBox > div > .aboutBox-text {
    border-right: 1px solid var(--mainColorDeep);
}
.aboutBox > div:nth-child(3) > .aboutBox-text {
    border-right: 0;
}
.aboutBox-text {
    height: 100%;
    padding: 35px;
    color: #fff;
}
.aboutBox-text h3 {
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 25px;
    line-height: 1.5;
}
.aboutBox-text ul {
    display: table;
    margin: 0 auto;
}
.aboutBox-text ul li {
    background: #fff;
    border-radius: 500px;
    width: 300px;
    margin-bottom: 10px;
    padding: 8px 30px 10px 30px;
    text-align: center;
    color: #000;
    font-size: 1.5rem;
}
.aboutBox-text ul li span {
    color: var(--mainColor);
    font-size: 2.0rem;
    font-weight: bold;
    padding: 0 4px;
}
@media only screen and (max-width:999px) {
    .aboutSection .sectionInner {
        padding: 0;
    }
    .aboutSection h2 {
        font-size: 2.8rem;
    }
    .aboutBox {
        display: block;
    }
    .aboutBox > div > .aboutBox-text {
        border-right: 0;
    }
    .aboutBox > div {
        width: 100%;
    }
    /*.aboutBox-img img {
        width: unset;
        height: 100vw;
        object-fit: cover;
    }*/
    .aboutBox-text {
        height: unset;
    }
    .aboutBox-text ul {
        display: block;
    }
    .aboutBox-text ul li {
        width: 100%;
    }
}

/* YACHIYO warehouse */
.warehouseSection {
    background: var(--mainColorThin);
    margin-top: 400px;
    padding-bottom: 100px;
}
.warehouseSection .sectionInner {
    position: relative;
}
.warehouseHead {
    position: relative;
    top: -300px;
    width: 100%;
    margin-bottom: -230px;
}
.warehouseSection h2 {
    margin-bottom: 25px;
    font-size: 9.5rem;
    font-weight: bold;
    color: var(--mainColorThin);
    text-align: center;
    line-height: 1;
}
.warehouseHead h2 + div {
    text-align: center;
}
.warehouseSection img {
    width: 1400px;
    vertical-align: bottom;
}
.warehouseList {
    max-width: 1115px;
	min-width: 1000px;
    margin: 0 auto 25px;
	padding: 0;
	clear: both;
}
.warehouseListImg {
    margin-bottom: 10px;
}
.warehouseList img {
    width: 100%;
    height: auto;
}
.warehouseListText {
    margin-bottom: 20px;
    padding-left: 25px;
    position: relative;
}
.warehouseListText::before {
    font-family: "Font Awesome 6 Free";
	content: "\f139";
	font-weight: 900;
    color: var(--mainColor);
    position: absolute;
    left: 0;
    top: 2px;
}
@media only screen and (max-width:999px) {
    .warehouseSection {
        margin-top: 350px;
        padding-bottom: 10px;
    }
    .warehouseSection h2 {
        margin-bottom: 25px;
        font-size: 5.5rem;
        font-weight: bold;
        color: var(--mainColorThin);
        text-align: center;
        line-height: 1;
    }
    .warehouseList {
        width: 100%;
        min-width: 100px;
    }
    .warehouseList li {
        padding: 0 25px;
    }
    .warehouseHead img {
        width: unset;
        height: 100vw;
        object-fit: cover;
    }
}

/* 環境・防災への取り組み */
.kankyoSection .sectionInner {
    border: 1px solid #e7e7e7;
    padding: 50px;
}
.kankyoSection h2 {
    margin-bottom: 25px;
    font-size: 3.6rem;
    font-weight: bold;
    position: relative;
}
.kankyoSection h2::before {
    font-family: "Font Awesome 6 Free";
	content: "\f0eb";
    font-size: 3.0rem;
    font-weight: 900;
    background: var(--mainColor);
    border-radius: 500px;
    padding: 11px 14px;
    color: #fff;
    position: relative;
    top: -3px;
    margin-right: 25px;
}
.kankyoSection h2::after {
    clip-path: polygon(0 100%, 0 0, 100% 50%);
    content: "";
    background-color: var(--mainColor);
    width: 10px;
    height: 15px;
    position: absolute;
    z-index: 1;
    left: 51px;
    top: 24px;
}
#main .kankyoSection p {
    margin-bottom: 40px;
    padding-left: 75px;
}
@media only screen and (max-width:999px) {
    .kankyoSection {
        padding: 0 15px;
    }
    .kankyoSection .sectionInner {
        padding: 25px;
    }
    .kankyoSection h2 {
        padding-top: 55px;
        font-size: 2.8rem;
        text-align: center;
    }
    .kankyoSection h2::before {
        margin-right: 0;
        position: absolute;
        font-size: 2.5rem;
        padding: 3px 14px;
        left: calc(50% - 2.5rem);
    }
    .kankyoSection h2::after {
        top: 43px;
        left: calc(50% - 5px);
        transform: rotate(90deg);
    }
    #main .kankyoSection p {
        padding-left: 0;
    }
}

/* 数字で見る */
.numberSection {
    padding-bottom: 100px;
}
.numberSection h2 {
    margin-bottom: 70px;
    font-size: 3.6rem;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.numberSection h2 span {
    font-size: 2.0rem;
    display: block;
    color: var(--mainColor);
}
.numberBoxImg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 67px;
}
.numberBoxImg::after {
    content: "";
    background-color: var(--grayColorThin);
    border-radius: 100%;
    width: 80%;
    height: 80%;
    display: block;
    position: absolute;
    top: 10%;
    left: 10%;
}
.numberBoxImg img {
    position: relative;
    z-index: 1;
}
.numberBoxText {
    text-align: center;
}
.numberBoxText div:nth-child(1) {
    font-size: 2.0rem;
    font-weight: bold;
}
.numberBoxText div:nth-child(2) {
    font-size: 4rem;
    font-weight: bold;
    color: var(--mainColor);
}
.numberBoxText div:nth-child(2) span {
    font-size: 3rem;
    font-weight: bold;
}
@media only screen and (max-width:999px) {
    .numberSection {
        padding-bottom: 40px;
    }
    .numberBoxImg {
        margin-bottom: 15px;
        padding: 40px;
    }
    .numberBoxImg::after {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .numberBoxText div:nth-child(1) {
        font-size: 1.8rem;
    }
    .numberBoxText div:nth-child(2) {
        font-size: 3rem;
    }
    .numberBoxText div:nth-child(2) span {
        font-size: 2rem;
    }
    .numberBoxText div:nth-child(3) {
        font-size: 1.3rem;
    }
}

/* 会社概要 */
.companySection {
    background: var(--grayColorThin);
}
.front #main section.companySection{
    margin-bottom: 60px;
}
.companySection .sectionInner {
    border-top: 5px solid var(--mainColor);
    padding-bottom: 120px;
    padding-top: 50px;
}
.companySection .sectionInner > div {
    display: flex;
}
.companyContent > div:nth-child(1),
.newsContent > div:nth-child(1) {
    width: 285px;
}
.companyContent > div:nth-child(2),
.newsContent > div:nth-child(2) {
    width: calc(100% - 285px);
}
.companySection h2 {
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.5;
}
.companySection h2 span {
    font-size: 2rem;
    display: block;
}
.companyContent table {
    border-bottom: 1px dashed #bbb;
}
.companyContent table tr {
    border-top: 1px dashed #bbb;
}
.companyContent table tr th,
.companyContent table tr td {
    padding: 25px 0;
}
.companyContent table tr th {
    width: 280px;
}
.companyContent table tr td {
    width: calc(100% - 280px);
}
@media only screen and (max-width:999px) {
    .companySection {
        padding: 0 30px 40px 30px;
    }
    .companySection .sectionInner {
        border: 0;
        padding: 0 0 30px 0;
    }
    .companySection .sectionInner > div {
        display: block;
    }
    .companyContent > div:nth-child(1),
    .newsContent > div:nth-child(1),
    .companyContent > div:nth-child(2),
    .newsContent > div:nth-child(2){
        width: 100%;
    }
    .companySection h2 {
        margin-bottom: 50px;
        text-align: center;
    }
    .companyContent table tr {
        border-top: 0;
    }
    .companyContent table tr th,
    .companyContent table tr td {
        text-align: left;
        width: 100%;
        display: block;
    }
    .companyContent table tr th {
        border-bottom: 1px solid #ccc;
        margin-bottom: 15px;
        padding: 0 0 5px 0;
        font-weight: bold;
        font-size: 1.8rem;
        position: relative
    }
    .companyContent table tr th::before {
        font-family: "Font Awesome 6 Free";
    	content: "\f0da";
        font-weight: 900;
        margin-right: 10px;
    }
    .companyContent table tr td {
        margin-bottom: 25px;
        padding: 0;
    }
}

/* SDGs */
.sdgs-saitama {
    display: flex;
}
.sdgs-saitama > div:nth-child(1) {
    width: 260px;
    margin-right: 65px;
}
.sdgs-saitama > div:nth-child(2) {
    width: calc(100% - 260px - 65px);
}
.sdgs-saitama h2 {
    margin-bottom: 25px;
    font-size: 2.0rem;
    font-weight: bold;
}
@media only screen and (max-width:999px) {
    .sdgs-saitama {
        display: block;
    }
    .sdgs-saitama > div:nth-child(1) {
        width: 100%;
        margin-right: 0;
        text-align: center;
    }
    .sdgs-saitama > div:nth-child(2) {
        width: 100%;
    }
    .sdgs-saitama h2 {
        text-align: center;
    }
}

.extraSection{
    margin-bottom: 50px !important;
    padding: 30px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

@media screen and (max-width:999px) {

}