@charset "UTF-8";


/* ======================================================
 * Toyota Tsusho Corporation.
 * ------------------------------------------------------
 * - Sustainability Top CSS
 * - DFF SIM 2025
 * - コンテンツ幅 1200px
 * - BreakPoint 768px
====================================================== */


/* ------------------------------------------------------
 * Sustainability Top contents01 (上段)
------------------------------------------------------ */

/* -- ヘッダー -- */
@media print, screen and (min-width: 768px) {
	.Header + .Main {
		margin-top: 80px;
	}
	.Header {
		background-color: #fff!important;
		transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s;
	}
}



/* -- トップメイン画像 -- */
.sus-top-head {
	width: 100%;
	position: relative;
}
.sus-top-head .sus-top-head__inner::after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	background-image: url(/sustainability/top/img/top_main_image_02.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -10;
}

/* -- トップメイン画像エリア -- */

@media screen and (min-width:1260px) { 
	.sus-top-head .sus-top-head__inner .sus-top-head__wrap {
		width: 1200px;
		margin: 0 auto;
		padding: 50px 0 80px;
	}
}
@media screen and (min-width:768px) and (max-width:1259.98px) {
	.sus-top-head .sus-top-head__inner .sus-top-head__wrap {
		width: 100%;
		margin: 0 auto;
		padding: 50px 0 80px;
	}
	.sus-top-head .sus-top-head__inner {
		width: 90%;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 767.98px) {
	.sus-top-head .sus-top-head__inner .sus-top-head__wrap {
		width: 100%;
		margin: 0 auto;
		padding: 20px 0 30px;
	}
	.sus-top-head .sus-top-head__inner {
		width: 90%;
		margin: 0 auto;
	}
	.sus-top-head__title h1.sustainability-top-heading__title {
		font-size: 2.5rem;
		padding: 0;
	}
	.sus-top-head__title::before {
		width: 100%!important;
	}
	.sus-top-head__text {
		margin-bottom: 40px;
	}
}

/* -- トップメインh1 -- */
.sus-top-head__title {
	position: relative;
}
.sus-top-head__title::before {
	position: absolute;
	bottom: -18px;
	left: 0;
	width: 450px;
	height: 8px;
	background: linear-gradient(90deg, #1544a5 0%, #0899eb 100%);
	content: "";
}
.sus-top-head__title h1.sustainability-top-heading__title {
	font-size: 3.5rem;
	color: #005ca2;
	line-height: 1.0;
	font-weight: 700;
	margin: 0;
}

/* -- トップメインリード -- */
.sus-top-head__lead {
	padding: 30px 0 40px;
}
.sus-top-head__lead .sus-top-head__text p {
	line-height: 1.8;
	font-weight: 700;
}
@media only screen and (max-width: 767.98px) {
	.sus-top-head__lead .sus-top-head__text p br {
		display: none;
	}
}

/* -- トップメイン3カラム -- */
.sus-top-head__3col {
	background-color: rgba(255,255,255,0.7);
	padding: 40px;
}
.sus-top-head__3col .card-wrap {
	margin: 0;
}


/* ------------------------------------------------------
 * Sustainability Top contents02 (下段)
------------------------------------------------------ */

.sus-content-top__02 {
	margin: 4em 0 6em;
}

/* -- 検索エリア -- */
.sus-search {
    width: 100%;
	background-color: #f0f3f5;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px 0 50px;
}
.sus-search .sus-search__inner {
    width: 1200px;
	margin: 0 auto;
}
.Selects-search-label {
    display: none
}
.sus-search .searchbox__form__input {
	border: 1px solid #ccc;
}
.sus-search .searchbox__form__submit {
	border: 1px solid #ccc;
}

@media screen and (min-width:768px) and (max-width:1259.98px) {
	.sus-search .sus-search__inner {
		width: 90%;
		margin: 0 auto;
	}
	.sus-search .searchbox__form {
		width: 100%;
		margin: 0 auto;
	}
}
@media screen and (min-width:1000px) and (max-width:1259.98px) {
	.sus-search .searchbox__form__input {
		width: calc(100% - 110px);
		margin: 0 auto;
	}
	.sus-search .searchbox__form__submit {
		width: 110px;
		margin: 0 auto;
		background-position: top 17px right 24px, top left;
	}
}
@media screen and (min-width:768px) and (max-width:999.98px) {
	.sus-search .searchbox__form__input {
		width: calc(100% - 110px);
		margin: 0 auto;
	}
	.sus-search .searchbox__form__submit {
		width: 110px;
		margin: 0 auto;
		background-position: top 17px right 24px, top left;
	}
}
@media only screen and (max-width: 767.98px) {
	.sus-search .sus-search__inner {
		width: 90%;
		margin: 0 auto;
	}
	.sus-search .searchbox__form {
		width: 100%;
		margin: 0 auto;
	}
	.sus-search .searchbox__form__input {
		width: calc(100% - 70px);
		margin: 0 auto;
	}
	.sus-search .searchbox__form__submit {
		width: 70px;
		margin: 0 auto;
		background-position: top 12px right 14px, top left;
	}
}

/* -- ESGエリア -- */
@media screen and (min-width:1260px) { 
	.esg-wrap {
		width: 1200px;
		margin: 80px auto 90px;
	}
}
@media screen and (min-width:1000px) and (max-width:1259.98px) { 
	.esg-wrap {
		width: 90%;
		margin: 80px auto 90px;
	}
}
@media screen and (min-width:768px) and ( max-width:999.98px) {
	.esg-wrap {
		width: 90%;
		margin: 80px auto 90px;
	}
	.esg-wrap .ir-top-column__list [data-col-sp="1"] > * {
		width: 100%;
	}
	.esg-wrap .ir-top-column-link-list[data-col-pc]:not([data-col-pc="auto"]) > * {
		margin-left: 0;
	}
}
@media only screen and (max-width: 767.98px) {
	.esg-wrap {
		width: 90%;
		margin: 80px auto 90px;
	}
}

.esg-wrap .ir-top-column {
	margin-top: 0;
}
.esg-wrap .ir-top-column__card__head {
	position: relative;
}
.esg-wrap .ir-top-column__card__head .column__card__description {
    bottom: 0;
    min-height: 50px;
	display: flex;
	position: absolute;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: rgba(8,153,235,0.7);
}
.esg-wrap .ir-top-column__card__head .column__card__description .card__item {
	position: absolute;
	color: #fff;
}
.esg-wrap .ir-top-column__card__head .column__card__description .card__item .card__name {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
}
.esg-wrap .ir-top-column__card .ir-top-column__card__type:hover .ir-top-column__card__head .column__card__description {
	background-color: rgba(8,153,235,0.6);
}

/* -- 社会貢献エリア -- */
.sub-content-column {
	background-color: #e1f2fc;
	width: 100%;
	padding: 40px 0 50px;
}
.sub-content-column .sub-content-column__inner {
	width: 1200px;
	margin: 0 auto;
}
@media only screen and (max-width: 1260px) {
	.sub-content-column .sub-content-column__inner {
		width: 90%;
		margin: 0 auto;
	}
}
.sub-column .media-wrap {
	display: flex;
	flex-flow: wrap;
	column-gap: 4%;
}
@media only screen and (max-width: 767.98px) {
	.sub-content-column .sub-column .media-wrap {
		display: flex;
		flex-flow: column;
		row-gap: 15px;
	}
	.sub-content-column .sub-column .media-wrap .media__head {
		width: 100%;
	}
	.sub-content-column .sub-column .media-wrap .media__body {
		width: 100%;
	}
}

.sub-content-column .sub-column {
	background-color: #fff;
	padding: 34px;
}
.sub-column .media-wrap .media__head {
	width: 34%;
}
.sub-column .media-wrap .media__body {
	width: 62%;
}
.sub-column .media-wrap .media__body .sub__lead p {
	font-weight: 700;
	margin-top: 0;
}
.sub-content-column .heading2--center {
	margin: 0;
	padding-bottom: 0;
}
.sub-content-column .heading2--center::before {
	content: none;
	height: 0;
}
.sub-content-column h2.heading2__title {
	font-size: 3.2rem;
	font-weight: 500;
}
.sub-content-column .heading2--center + * {
	margin-top: 1.2em !important;
}

/* -- トピックスエリア -- */
.sus-top-topics {
	padding: 30px 0 80px;
}
.sus-top-topics__inner {
	width: 1200px;
	margin: 0 auto;
}
@media only screen and (max-width: 1260px) {
	.sus-top-topics .sus-top-topics__inner {
		width: 90%;
		margin: 0 auto;
	}
}

/* -- サブナビ（ボタン）エリア -- */
.sub-nav-btn {
	width: 1200px;
	margin: 0 auto;
	padding: 20px 0 10px;
}
.sub-nav-btn [data-col-pc="auto"] > .button-v2 {
	margin-bottom: 0;
}
.sub-nav-btn .button-wrap {
	row-gap: 20px;
}
@media only screen and (max-width: 1260px) {
	.sub-nav-btn {
		width: 90%;
		margin: 0 auto;
	}
}

/* -- サブナビ（カード）エリア -- */
.sub-nav-card {
	width: 1200px;
	margin: 0 auto 40px;
}
.sub-nav-card .card-v2__body {
    padding: 1.2em 1.2em 1.3em;
}


/* ------------------------------------------------------
 * 検索結果ページ
------------------------------------------------------ */
.Main__sus .gsc-control-cse {
	width: 1200px;
	margin: 0 auto;
	padding: 0;
}
.Main__sus .gsc-selected-option-container {
	min-width: 110px;
}

/* ------------------------------------------------------
 * SP表示
------------------------------------------------------ */
@media only screen and (max-width: 767.98px) {
	.Main__sus {
		width: 100%;
	}
}

/* ------------------------------------------------------
 * スライダー
------------------------------------------------------ */
.slide_all {
	width: 100%;
	background-color: #eee;
}
.slide_container {
	width: 100%;
	margin: 0 auto;
	background-color: #eee;
	padding: 40px 0 20px;
}
.slide_container * {
  box-sizing: border-box;
}
.slide_innner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.slide_innner.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out 1.0s;
  opacity: 1.0;
}
.slick-slide .item_image a:hover {
	opacity: 0.6;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}

/* -- インジケーター -- */
.slide_container .slick-dots li button:before {
    font-size: 14px;
}
.slide_container .slick-dots li.slick-active button:before {
    color: #005ca2;
}
.slide_container .home-carousel__list > .slick-arrow.slick-prev {
	left: -50px;
}
.slide_container .home-carousel__list > .slick-arrow.slick-next {
	right: -50px;
}
.slide_all.en_slide .slick-dotted.slick-slider {
    padding-bottom: 20px;
}

/* -- 間隔 -- */
.slide_container .slick_item {
	margin: 0 14px;
}

/* -- 矢印 -- */
.slide_container .slick-prev:before, .slide_container .slick-next:before {
    opacity: 1;
}
.slide_container .home-carousel__list > .slick-arrow {
	width: 40px;
	height: 40px;
	top: 35%;
}

@media print, screen and (min-width: 768px) {
	.slide_container .home-carousel__list .slick-prev.slick-arrow:hover,
	.slide_container .home-carousel__list .slick-next.slick-arrow:hover {
		background: #fff;
	}
	.slide_container .slick-prev.slick-arrow:focus,
	.slide_container .slick-next.slick-arrow:focus {
		background: linear-gradient(90deg, #1544a5 0%, #0899eb 100%);
	}
}

@media only screen and (max-width: 767.98px) {
	.slide_container .home-carousel__list > .slick-prev.slick-arrow:before {
		-webkit-transform: translate(-50%, -50%);
		left: calc(50% - 1px);
				transform: translate(-50%, -50%);
		border-top: 4px solid transparent;
		border-right: 7px solid #fff;
		border-bottom: 4px solid transparent;
		border-left: 0;
	}
	.slide_container .home-carousel__list > .slick-next.slick-arrow:before {
		-webkit-transform: translate(50%, -50%);
		right: calc(50% - 1px);
				transform: translate(50%, -50%);
		border-top: 4px solid transparent;
		border-right: 0;
		border-bottom: 4px solid transparent;
		border-left: 7px solid #fff;
	}
	.slide_container .home-carousel__list .slick-prev.slick-arrow:hover,
	.slide_container .home-carousel__list .slick-next.slick-arrow:hover,
	.slide_container .slick-prev.slick-arrow:focus,
	.slide_container .slick-next.slick-arrow:focus {
		background: linear-gradient(90deg, #1544a5 0%, #0899eb 100%);
	}
	.slide_container {
		width: 100%;
		margin: 0 auto;
	}
	.slide_container .home-carousel__list > .slick-arrow.slick-prev {
		left: 10px;
	}
	.slide_container .home-carousel__list > .slick-arrow.slick-next {
		right: 10px;
	}
	.slide_container .home-carousel__list > .slick-arrow {
		top: 45%;
	}
}

/* -- リンクテキスト -- */
.item_text .link-list > li > [class*="__type"]:after {
	-webkit-backface-visibility: hidden;
	display: inline-block;
	position: relative;
	width: 10px;
	height: 10px;
	border-top: 1px solid #005ca2;
	border-right: 1px solid #005ca2;
	vertical-align: middle;
	content: "";
	top: -1px;
	margin-left: 4px;
	transform: rotate(45deg);
}
.item_text .link-list > li > [class*="__type"]:before {
	content: none;
	left: 0;
}
.item_text .link-list > li > [class*="__type"] {
	padding-left: 0;
}
.item_text .list-wrap {
	margin: 0.6em 0 0 0;
}
.slide_container .home-carousel__list > .slick-list > .slick-track > .slick-slide .item_text .link-list li {
	line-height: 1.4;
	font-size: 14px;
}

/* -- フッター -- */
@media only screen and (max-width: 1260px) {
	#footer.Footer {
		width: 100%;
		margin: 0 auto;
	}
	.Footer .Footer__inner {
		width: 90%;
		padding: 0;
		margin: 0 auto;
	}
}