@charset "UTF-8";
/* CSS Document */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans JP', sans-serif !important;
	color: #4C4C4D;
	font-size:16px;
  background:#fff;
}

/* --------------- 見出し画像 --------------- */
.main-img-wrapper {
  background-image: url('../image/sustainability.jpg');
}



/* --------------- 共通（見出しなど） --------------- */
h3 {
  font-size: 28px;
  margin-bottom: 40px;
  color: #00275B;
  border-left: 8px solid #DACA4D;
  height:50px;
  padding-left: 15px;
  padding-top:5px;
}
@media screen and (max-width:1030px) {/* sp */
	h3 { 
    font-size:21px;
    height:40px;
   }
}

.wrap-gray {
  background-color:#ECECEF;
}

.wrap-white {
  background-color:#fff;
  padding-bottom:40px;
}

.wrap-1000 {
  width:100%;
  max-width:1000px;
  margin: 0 auto;
  padding-top:50px;
}

.wrap-1100 {
  width:100%;
  max-width:1100px;
  margin: 0 auto;
  padding-top:50px;
}


/* --------------- 冒頭 --------------- */
.copy {
  padding-top:30px;
  padding-bottom:30px;
}
@media screen and (max-width:1030px) {/* sp */
	.copy { width:90%; margin-left:5%; margin-right:5%; padding-top:10px; }
}

.copy-moji-1 {
  font-size:42px;
  font-weight: bold;
  color:#00275B;
  margin-bottom:30px;
  text-align: justify;
}
@media screen and (max-width:1030px) {/* sp */
	.copy-moji-1 { 
    font-size:25px;
   }
}

.copy-moji-2 {
  font-size:18px;
  font-weight: bold;
  color:#00275B;
  line-height: 40px;
  text-align: justify;
}
@media screen and (max-width:1030px) {/* sp */
	.copy-moji-2 { font-size:16px; line-height: 35px; }
}

.case {
  padding-top:50px;
  padding-bottom:100px;
}
@media screen and (max-width:1030px) {/* sp */
	.case { width:90%; margin-left:5%; margin-right:5%;padding-top:30px; padding-bottom:70px; }
}


.card-list {
  display: flex;
  gap: 50px;
  background-color: #ECECEF;
  padding: 0px;
  justify-content: center;
  flex-wrap: wrap;
}
@media screen and (max-width:1030px) {
	.card-list { gap: 5%;}
}
@media screen and (max-width:757px) {
	.card-list { gap: 50px;}
}

.card {
  display: block;
  width: 525px;
  text-align: center;
  text-decoration: none;
  color: #00275B;
}
@media screen and (max-width:1030px) {
	.card { width:47%; }
}
@media screen and (max-width:757px) {
	.card { width:100%; }
}

.card:hover {
  opacity: 0.8;
}

.card img {
  border-radius: 20px;
}

.card-title {
  margin-top: 12px;
  font-size:18px;
  font-weight: bold;
  color:#00275B;
  text-align: justify;
}





/* --------------- 基本方針 --------------- */
.case-2 {
  padding-top:20px;
}
@media screen and (max-width:1030px) {/* sp */
	.case-2 { padding-top:0px; }
}

.accordion {
  width:100%;
  max-width: 1100px;
  border-bottom: 2px solid #00275B;
}

.accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0.8em 2em;
  height: 80px;
  line-height: 1;
  color: #00275B;
  font-weight: bold;
  cursor: pointer;
  font-size: 21px;
  list-style: none;                  
  -webkit-appearance: none;    
}
@media screen and (max-width:1030px) {/* sp */
	.accordion summary { height: 70px; font-size: 18px; padding: 0.8em 1em; }
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::before,
.accordion summary::after {
  width: 2px;
  height: .9em;
  border-radius: 5px;
  background-color: #00275B;
  content: '';
}

.accordion summary::before {
  position: absolute;
  right: 2em;
  rotate: 90deg;
}
@media screen and (max-width:1030px) {/* sp */
	.accordion summary::before { right: 1em; }
}

.accordion summary::after {
  transition: rotate .3s;
}

.accordion[open] summary::after {
  rotate: 90deg;
}

.accordion-moji {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 2em 1.5em;
  padding-left:80px;
  transition: transform .5s, opacity .5s;

  color: #4C4C4D;
  font-size: 16px;
  line-height: 32px;
  margin-bottom:40px;
}
@media screen and (max-width:1030px) {/* sp */
	.accordion-moji { padding-right:0px; padding-left:20px; }
}

.accordion-moji span {
  font-weight: bold;
  line-height: 42px;
  margin-top:20px;
  display: inline-block;
}

.accordion-moji .span-2 {
  font-weight: normal;
  line-height:28px;
  margin-top:0px;
  margin-bottom:20px;
  display: inline-block;
}

.accordion[open] p {
  transform: none;
  opacity: 1;
}