@charset "utf-8";

/* ======================================================
 * detail.css
 * ------------------------------------------------------
 * Base
 * - Reset
 * - Override
 * - Layout
 * - Parts
 * @media print, screen and (min-width: 768px)
 * - Override
 * - General Purpose
 * - Layout
 * - Diversion Parts
 * - Parts
 * PC Media Queries
 * @media only screen and (max-width: 767px)
 * - Override
 * - General Purpose
 * - Layout
 * - Diversion Parts
 * - Parts
 * SP Media Queries
 * Print
====================================================== */

/* ======================================================
 * Base
====================================================== */
/* ------------------------------------------------------
* Reset
------------------------------------------------------ */

/* ------------------------------------------------------
 * Override
------------------------------------------------------ */

/* ------------------------------------------------------
 * Layout
------------------------------------------------------ */

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px) {
	/* ------------------------------------------------------
	 * Override
	------------------------------------------------------ */

	/* ------------------------------------------------------
	 * Parts
	------------------------------------------------------ */
	/* --- case-study-related --- */
	.case-study-related {
		margin-bottom: 30px;
	}
	.case-study-related .case-study-related__title {
		color: #555566;
		font-size: 20px;
		font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		font-weight: 600;
		text-align: center;
		line-height: 1.4;
	}
	.case-study-related .case-study-related__carousel {
		margin-top: 8px;
		padding: 0 62px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__list {
		position: relative;
		margin: 0 -5px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__list .slick-track {
		display: flex;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__list .slick-arrow {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: 40px;
		height: 40px;
		margin-top: -20px;
		padding: 0;
		border: none;
		background: url('/extlib/corporate/sustainability/regional-initiative/img/cmn_ic02.png') no-repeat 0 0;
		background-size: contain;
		text-indent: -9999px;
		overflow: hidden;
		z-index: 1;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__list .slick-arrow:hover {
		opacity: .7;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__list .slick-prev {
		left: -46px;
		transform: rotate(180deg);
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__list .slick-next {
		right: -46px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__item {
		padding: 0 5px;
		height: auto;
	}
	.case-study-related .case-study-related__card {
		height: 100%;
	}
	.case-study-related .case-study-related__card > [class*="__type"] {
		position: relative;
		display: block;
		height: 100%;
		border: 1px solid #f1f2f6;
		border-radius: 7px;
		background-color: #fff;
		overflow: hidden;
		z-index: 1;
	}
	.case-study-related .case-study-related__card .case-study-related__card__head {
		position: relative;
		overflow: hidden;
	}
	.case-study-related .case-study-related__card .case-study-related__card__body {
		padding: 18px 15px 20px;
	}
	.case-study-related .case-study-related__card .case-study-related__card__body >:first-child {
		margin-top: 0;
	}
	.case-study-related .case-study-related__card .case-study-related__card__image > img {
		width: 100%;
		transition: transform .6s;
	}
	.case-study-related .case-study-related__card > [class*="__type"]:hover .case-study-related__card__image > img {
		transform: scale(1.1);
	}
	.case-study-related .case-study-related__card .case-study-related__card__category {
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: flex-end;
	}
	.case-study-related .case-study-related__card .case-study-related__card__category .case-study-related__card__category__icon {
		width: 35px;
		height: 35px;
		background-color: #44780c;
	}
	.case-study-related .case-study-related__card .case-study-related__card__category .case-study-related__card__category__icon > img {
		max-width: 100%;
	}
	.case-study-related .case-study-related__card .case-study-related__card__category .case-study-related__card__category__label {
		padding: 2px 10px;
		background-color: #44780c;
		color: #fff;
		font-size: 14px;
		font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		font-weight: 600;
		text-align: center;
	}
	.case-study-related .case-study-related__card .case-study-related__card__title {
		position: relative;
		display: inline-block;
		color: #0066aa;
		font-size: 14px;
		font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		font-weight: 600;
		line-height: 1.4;
	}
	.case-study-related .case-study-related__card > [class*="__type"]:hover .case-study-related__card__title {
		color: #1eace5;
	}
	.case-study-related .case-study-related__card .case-study-related__card__type--blank .case-study-related__card__title {
		padding-right: 15px;
	}
	.case-study-related .case-study-related__card .case-study-related__card__type--blank .case-study-related__card__title::after {
		content: "";
		position: absolute;
		top: 5px;
		right: 0;
		display: inline-block;
		width: 10px;
		height: 10px;
		background-image: url('/extlib/corporate/sustainability/regional-initiative/img/cmn_ic05_01.png'), url('/extlib/corporate/sustainability/regional-initiative/img/cmn_ic05_02.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain, 0 0;
	}
	.case-study-related .case-study-related__card .case-study-related__card__type--blank:hover .case-study-related__card__title::after {
		background-size: 0 0, contain;
	}
	.case-study-related .case-study-related__card .case-study-related__card__description {
		margin: 12px 0 0;
		color: #555566;
		font-size: 12px;
		font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__control {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__pager > .slick-dots {
		display: flex;
		align-items: center;
		margin: 0 -7px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__pager > .slick-dots > li {
		padding: 0 7px;
		line-height: 1;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__pager > .slick-dots > li > button {
		cursor: pointer;
		width: 14px;
		height: 14px;
		padding: 0;
		border: 2px solid #fff;
		border-radius: 50%;
		background-color: #fff;
		text-indent: -9999px;
		overflow: hidden;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__pager > .slick-dots > li.slick-active > button {
		background-color: #aab2be;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch {
		margin-left: 13px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__pause {
		cursor: pointer;
		position: relative;
		width: 14px;
		height: 16px;
		border: none;
		background: none;
		text-indent: -9999px;
		overflow: hidden;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__pause::before,
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__pause::after {
		content: "";
		position: absolute;
		top: 0;
		display: inline-block;
		width: 3px;
		height: 16px;
		background-color: #aab2be;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__pause::before {
		left: 2px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__pause::after {
		right: 2px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__play {
		cursor: pointer;
		position: relative;
		width: 14px;
		height: 16px;
		border: none;
		background: none;
		text-indent: -9999px;
		overflow: hidden;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__play::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		border-style: solid;
		border-width: 8px 0 8px 14px;
		border-color: transparent transparent transparent #aab2be;
	}

}
@media screen and (min-width: 768px) and (max-width: 1260px) {
}

/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 767px) {
	/* ------------------------------------------------------
	 * Override
	------------------------------------------------------ */

	/* ------------------------------------------------------
	 * Parts
	------------------------------------------------------ */
	/* --- case-study-related --- */
	.case-study-related {
		margin-bottom: 30px;
		padding: 0 12px;
	}
	.case-study-related .case-study-related__title {
		color: #555566;
		font-size: 20px;
		font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		font-weight: 600;
		text-align: center;
		line-height: 1.4;
	}
	.case-study-related .case-study-related__carousel {
		margin-top: 14px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__list {
		margin: 0 -5px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__list .slick-track {
		display: flex;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__item {
		padding: 0 5px;
		height: auto;
	}
	.case-study-related .case-study-related__card {
		height: 100%;
	}
	.case-study-related .case-study-related__card > [class*="__type"] {
		position: relative;
		display: block;
		height: 100%;
		border: 1px solid #f1f2f6;
		border-radius: 7px;
		background-color: #fff;
		overflow: hidden;
		z-index: 1;
	}
	.case-study-related .case-study-related__card .case-study-related__card__head {
		position: relative;
	}
	.case-study-related .case-study-related__card .case-study-related__card__body {
		padding: 12px 14px;
	}
	.case-study-related .case-study-related__card .case-study-related__card__body >:first-child {
		margin-top: 0;
	}
	.case-study-related .case-study-related__card .case-study-related__card__image > img {
		width: 100%;
	}
	.case-study-related .case-study-related__card .case-study-related__card__category {
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: flex-end;
	}
	.case-study-related .case-study-related__card .case-study-related__card__category .case-study-related__card__category__icon {
		width: 50px;
		height: 50px;
		background-color: #44780c;
	}
	.case-study-related .case-study-related__card .case-study-related__card__category .case-study-related__card__category__icon > img {
		max-width: 100%;
	}
	.case-study-related .case-study-related__card .case-study-related__card__category .case-study-related__card__category__label {
		padding: 3px 5px;
		background-color: #44780c;
		color: #fff;
		font-size: 12px;
		font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		font-weight: 600;
		text-align: center;
	}
	.case-study-related .case-study-related__card .case-study-related__card__title {
		position: relative;
		display: inline-block;
		color: #0066aa;
		font-size: 14px;
		font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		font-weight: 600;
		line-height: 1.4;
	}
	.case-study-related .case-study-related__card > [class*="__type"]:hover .case-study-related__card__title {
		color: #1eace5;
	}
	.case-study-related .case-study-related__card .case-study-related__card__type--blank .case-study-related__card__title {
		padding-right: 16px;
	}
	.case-study-related .case-study-related__card .case-study-related__card__type--blank .case-study-related__card__title::after {
		content: "";
		position: absolute;
		top: 5px;
		right: 0;
		display: inline-block;
		width: 10px;
		height: 10px;
		background-image: url('/extlib/corporate/sustainability/regional-initiative/img/cmn_ic05_01.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
	.case-study-related .case-study-related__card .case-study-related__card__description {
		margin: 9px 0 0;
		color: #555566;
		font-size: 12px;
		font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__control {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 15px;
		padding: 4px 20px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__control .slick-arrow {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: 16px;
		height: 24px;
		margin-top: -12px;
		padding: 0;
		border: none;
		background: url('//media3.kddi.com/extlib/module/btn_arrow_left_01.gif') no-repeat 0 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		text-indent: -9999px;
		overflow: hidden;
		z-index: 1;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__control .slick-prev {
		left: 0;
		background-image: url('/extlib/corporate/sustainability/regional-initiative/img/cmn_ic03_01.png');
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__control .slick-next {
		right: 0;
		background-image: url('/extlib/corporate/sustainability/regional-initiative/img/cmn_ic03_02.png');
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__pager > .slick-dots {
		display: flex;
		align-items: center;
		margin: 0 -7px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__pager > .slick-dots > li {
		display: flex;
		padding: 0 7px;
		line-height: 1;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__pager > .slick-dots > li > button {
		cursor: pointer;
		width: 14px;
		height: 14px;
		padding: 0;
		border: 2px solid #fff;
		border-radius: 50%;
		background-color: #fff;
		text-indent: -9999px;
		overflow: hidden;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__pager > .slick-dots > li.slick-active > button {
		background-color: #aab2be;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch {
		display: flex;
		margin-left: 13px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__pause {
		cursor: pointer;
		position: relative;
		width: 14px;
		height: 16px;
		border: none;
		background: none;
		text-indent: -9999px;
		overflow: hidden;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__pause::before,
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__pause::after {
		content: "";
		position: absolute;
		top: 0;
		display: inline-block;
		width: 3px;
		height: 16px;
		background-color: #aab2be;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__pause::before {
		left: 2px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__pause::after {
		right: 2px;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__play {
		cursor: pointer;
		position: relative;
		width: 14px;
		height: 16px;
		border: none;
		background: none;
		text-indent: -9999px;
		overflow: hidden;
	}
	.case-study-related .case-study-related__carousel .case-study-related__carousel__switch .case-study-related__carousel__switch__play::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		border-style: solid;
		border-width: 8px 0 8px 14px;
		border-color: transparent transparent transparent #aab2be;
	}
	
}

/* ======================================================
 * Print
====================================================== */
@media print {
}