@charset "UTF-8";

/* ====================================
	jp.sharpトップ共通スタイル
 ==================================== */
.lineup-sub-title, .sub-title, .products-sub-title {
	font-weight: 300;
}

/* ポップアップ */
body {
	position: relative;
}

.popup-scroll-prevent {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

.lineup-popup {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	padding: 15vh 5% 5vh;
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11;
	display: none;
	box-sizing: border-box;
}

.lineup-popup-container {
	width: 100%;
	max-height: 100%;
	overflow: auto;
}

/* closeボタン */
.lineup-popup .btn-close {
	width: 100%;
	height: 15vh;
	line-height: 1;
	color: #eee;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
}

.lineup-popup .btn-close .fa-times {
	padding: 0.5rem;
	position: absolute;
	bottom: 0;
	right: 5%;
	font-size: 3rem;
}

.lineup-popup .result {
	background: #fff;
}

.lineup-popup .result .ttl {
	font-weight: 500;
	font-size: 1.2rem;
	display: block;
	flex-wrap: wrap;
	max-width: 600px;
	margin: 0 auto 20px auto;
	box-sizing: border-box;
}

.lineup-popup ul.list-lineup-item {
	display: block;
	flex-wrap: wrap;
	max-width: 600px;
	margin: 0 auto;
	box-sizing: border-box;
}

.lineup-popup ul.list-lineup-item li a {
	display: block;
	padding: 5px;
}

.list-lineup-item {display: none;}

.lineup-popup .result ul {
	background-color: #f9f9f9;
	border: 1px solid #dfdede;
	border-radius:4px;
	padding: 10px 30px;
	box-sizing: border-box;
}

.lineup-popup .result ul li {
	display: block;
	padding: 5px 0;
}

.fa-angle-right:before {
	content: "\f105";
	margin-right: 5px;
}
.fa-caret-right:before {
	content: "\f0da";
	margin-right: 5px;
}

.liD {
	background-color: #fff;
}

.liD a{
	width: 100%;
	display: table;
}

.liD a p{
	font-size: 1.2rem;
	padding: 37px 10px 37px 30px;
	display: table-cell;
	vertical-align: middle;
}

.liD a p img{
	vertical-align: bottom;
}


/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {
	.lineup-popup .result {
		padding: 10px;
	}
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print , screen and (min-width: 768px) {}

/* ====================================
	タブレット専用スタイル
===================================== */
@media screen and (min-width: 768px) and (max-width: 1079px) {
	.lineup-popup .result {
		padding: 20px;
	}
}

/* ====================================
	大画面PC専用スタイル
===================================== */
@media screen and (min-width: 1200px) {
	.lineup-popup .result {
		padding: 50px;
	}

}

/* ====================================
	IE印刷専用スタイル
===================================== */
@media print and (-ms-high-contrast: none) {}





/* ecobody__container for SP */
@media only screen and (max-width: 767px) {
.ecobody__container.-index { margin: 20px auto 45px; }
}
/* ecobody__container for PC */
@media print, screen and (min-width: 768px) {
 .ecobody__container.-index { margin: 40px auto 110px; }
}






/* メインイメージ ========================================== */
.topmv__container {
 position: relative;
 overflow: hidden;   
}

.topmv__wrapper {
 position: relative;
 z-index: 5;
 width: 100%;
 max-width: 1480px;
 margin-left:auto;
 margin-right: auto;
}
.topmv__wrapper .-photo {
 position: relative;
 z-index: 1;
 width: 100%;
}

.topmv__container video {
 position: absolute;
 z-index: 1;
 left: 50%;
 top:0;
 transform: translateX(-50%);
 object-fit: cover;
 opacity: 0;
 transition : opacity 0.4s ease 0s;
}
.topmv__container video.is-active {
 opacity: 1;
}



 .topmv__wrapper .-moviebutton {
  display: block;
  position: absolute;
  z-index: 4;
 }

.topmv__wrapper .-moviebutton { border: none; cursor: pointer; background-size: 100% auto; background-color: inherit; background-repeat: no-repeat; }
.topmv__wrapper .-moviebutton.-play { background-image: url("../images/common/icon_play.png" ); }
.topmv__wrapper .-moviebutton:not(.-play) { background-image: url("../images/common/icon_stop.png" ); }

 .topmv__wrapper .-report span:before { background-color: #FFF; }


/* メインイメージ for SP */
@media only screen and (max-width: 767px) {
.topmv__container {
 padding-top: 44%;
}  
.topmv__container:after {
 position: relative;
 z-index: 1;
 content: "";
 width: 100%;
 background-color: #000;
 padding-top: 44%;
}  
.topmv__container:before {
 position: relative;
 z-index: 2;
 content: "";
 width: 100%;
 background-image:url("../images/index/poster-image.jpg");
 background-color: #000;
 background-repeat: no-repeat;
 background-size: 100% auto;  
 padding-top: 44%;
 overflow: hidden;
}      
    
 .topmv__wrapper .-photo { aspect-ratio: 3.75 / 1.65; }
 .topmv__container video { z-index: 3; width: 100%; aspect-ratio: 3.75 / 1.65; }
 .topmv__wrapper .-moviebutton { width: 34px; height: 34px; left: 20px; top:-18%; }
 .topmv__wrapper .-headline {
  position: relative;
  width: 88%;
  margin: 1em auto 0;
  font-size: 1.071em;
 }
 .topmv__wrapper .-report {
  position: relative;
  width: 80%;
  margin: 2em auto 0;
  background-color: #000;
}
 .topmv__wrapper .-report img { box-shadow: 0 8px 12px 0 rgba(000, 000, 000, 0.2); }
 .topmv__wrapper .-report span {margin: 0 auto;padding: 1em 1em; text-align: center; background: #000; font-size: 12px; color: #FFF; }
}

/* メインイメージ for PC */
@media print, screen and (min-width: 768px) {
.topmv__container {
 background:url("/eco/images/index/poster-image.jpg") center center #000 no-repeat;
 background-size: cover;
 min-height: 650px;
}    
.topmv__wrapper { min-height: 650px; }
.topmv__wrapper .-photo { aspect-ratio: 1.48 / 0.651; }
 .topmv__container video {  width: 100%; height: 100%; }
.topmv__wrapper .-headline {
 position: absolute;
 left: 6%;
 top: 50%;
 transform: translateY(-50%);
 z-index: 2;
 color: #FFF;
text-shadow: 1px 2px 8px #000;

}
 .topmv__wrapper .-headline span {
  display: table;
  font-size: clamp(18px,34px,2.1vw);
 }
 .topmv__wrapper .-report {
 position: absolute;
 right: 0;
 bottom: 50px;
 z-index: 3;
 max-width: 33.3%;
}
 .topmv__wrapper .-report { transition : opacity 0.4s ease 0s; }
 .topmv__wrapper .-report:hover { opacity: .85; } 
 .topmv__wrapper .-report span { margin: .75em auto 0;  color: #FFF; }
 .topmv__wrapper .-report span:before:hover { opacity: .85; }
 .topmv__wrapper .-moviebutton { width: 51px; height: 51px; left: 6%; bottom: 50px; }
    
}


/* トップリンク ========================================== */
.toplink__wrapper { position: relative; }

.toplink__box:nth-child(odd) { background-color: #e9eced; } 
.toplink__box:nth-child(even) { background-color: #f0f5f9; } 

/* トップリンク for SP */
@media only screen and (max-width: 767px) {
.toplink__wrapper { width:100vw; left: 50%; top:0; transform: translateX(-50%); } 
.toplink__box:not(:first-child) { margin-top: 1em; } 
.toplink__box .link__item { padding: 1.25em 1.5em; margin-left: auto; margin-right: auto; }
}
/* トップリンク for PC */
@media print, screen and (min-width: 768px) {
.toplink__wrapper { with:100%; max-width: 1600px; } 
.toplink__wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.toplink__box { width:50%; text-align: center; } 
.toplink__box .link__item { margin: 1.25em auto; }

}


/* シャープのESG ========================================== */
 .esg__container .esg__item.-headline {
 padding-bottom: .5em;
 font-weight: 700;
 } 

.esg__block.-headline { position: relative; }
.esg__block.-headline .-thumb { position: relative; z-index: 1; }
.esg__block.-headline .-mark { position: absolute; z-index: 2; }

.esg__block.-list dt { padding-bottom: 1em; border-bottom: solid 3px var(--gray-border-color); }
.esg__block.-list dt a { padding-right: 1.5em; }

.esg__block.-list dd li { padding: .75em 0; font-weight: 700; }
.esg__block.-list dd li a { padding-right: 1.5em; }

/* esg__container for SP */
@media only screen and (max-width: 767px) {
 .esg__container { margin-top: 40px; }
 .esg__container .esg__item.-headline { font-size: var(--fs-is-22px); }
 .esg__box:not(:first-child) { margin-top: 30px; }
 .esg__block.-headline { padding-bottom: 50px; }
 .esg__block.-list dt { font-size: var(--fs-is-18px); }
}
/* esg__container PC */
@media print, screen and (min-width: 768px) {
 .esg__container { margin-top: 80px; }
 .esg__container .esg__item.-headline { font-size: var(--fs-is-34px); }  
 .esg__wrapper { display: flex; justify-content: flex-start; }
 .esg__box { width: 31.5%; }
 .esg__box:not(:last-child) { margin-right: 2.5%; }
 .esg__block.-headline { padding-bottom: 55px; }
.esg__block.-list dt { font-size: var(--fs-is-20px); }
.esg__block.-list dd { font-size: var(--fs-is-16px); }
.esg__block.-list dd ul { margin-top: 1em; }
}

@media only screen and (max-width: 767px) {
 .esg__block.-headline .-mark { right: -16px; bottom:10px; } 

}
@media only screen and (min-width: 768px) and (max-width: 1240px) {
 .esg__block.-headline .-mark { right: 0; bottom:0; } 
}
@media only screen and (min-width: 1241px) {
 .esg__block.-headline .-mark { right: -20px; bottom:20px; }

}




/* 開示情報 ========================================== */
 .release__container .-headline {
 padding-bottom: .5em;
 font-weight: 700;
 }    

 .release__wrapper .link__item { 
 width: 100%;
 padding-top:.75em; 
 padding-bottom: .75em; 
 box-sizing: border-box;
 line-height: 1.5;
}

 .release__wrapper a:after {
 position: absolute;
 bottom: 0;
 left: 0;
 content: "";
 height:4px;
 width: 100%;
 background-color: #e1e1e1;
}


/* release__wrapper for SP */
@media only screen and (max-width: 767px) {
 .release__container { margin-top: 60px; }
 .release__container .-headline { font-size: var(--fs-is-22px); }  
 .release__wrapper{ font-size: var(--fs-is-18px); }

}
/* release__wrapperfor PC */
@media print, screen and (min-width: 768px) {
 .release__container { margin-top: 100px; }
.release__container .-headline { font-size: var(--fs-is-34px); }    
.release__wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 35px;
grid-row-gap: 15px;
font-size: var(--fs-is-20px);
}
.release__box1 { grid-area: 1 / 1 / 2 / 2; }
.release__box2 { grid-area: 1 / 2 / 2 / 4; }
.release__box3 { grid-area: 2 / 1 / 3 / 2; }
.release__box4 { grid-area: 2 / 2 / 3 / 3; }
.release__box5 { grid-area: 2 / 3 / 3 / 4; }
}