@charset "utf-8";
/*Ver1.240705_1*/
.site-menu-htop {
  display: block;
  flex-direction: column;
  text-align: center;
  white-space: nowrap;
  background-color: #cccca370;
  border-radius: 3px;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
}

.site-menu-ftop {
  display: block;
  flex-direction: column;
  text-align: center;
  white-space: nowrap;
  background-color: #cccca396;
  border-radius: 3px;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
}

.first-view1 {

  height: calc(100vh + 310px);
  background-image: url(../images/index/bg-main1.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
}

.first-view1-txt h1 {
  display: flex;
  width: 100%;
  width: 1000px;
  padding-left: 10%;
  padding-bottom: 300px;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 1px 1px 20px #4b2c14;
  filter: drop-shadow(3px 3px 1px #000000);
  font-family: 'Shippori Mincho', serif;
  font-size: 1.8em;
  line-height: 1.7;
}

.fv-message-bkimage {
  width: 100%;
  background: linear-gradient(to bottom, transparent 0%, transparent 90%, #fff 100%), url(../images/index/fv-message-bkimage.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;

}

.fv-message {
  height: 350px;
  background-size: cover;
  display: flex;
  align-items: center;
}

.fv-message-txt {
  display: flex;
  width: 100%;
  text-align: center;
  font-weight: bold;
  filter: drop-shadow(3px 3px 2px #ffffff);
  font-family: 'Noto Serif JP', serif;
  font-size: 1.4em;
  line-height: 1.7;
  justify-content: center;
}


.top-service-backimage {
  width: 100%;
  background-image: url(../images/index/top-service-backimage.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.top-service {
  height: 310px;
  background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  max-width: 100%;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
}

.top-service-txt {
  width: 500px;
  max-width: 500px;
  justify-content: center;

  margin-right: 0px;
  padding-top: 20px;
  padding-left: 0px;
}


.top-service-txt h2 {
  font-family: 'Roboto', sans-serif;

  margin-top: 0px;
}

.top-service h2 {
  padding: 0.8rem 0;
  background-image: linear-gradient(90deg, #46aadc 0 20%, #dedede 20%);
  background-repeat: no-repeat;
  background-size: 100% 10%;
  background-position: bottom;
  color: #323232;
  font-weight: bold;
}

.top-service-txt h5 {
  font-family: 'Noto Serif JP', serif;

  margin-top: 8px;
  margin-left: 5px;
}

.top-service-txt p {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 18px;
  line-height: 1.7;

  margin-top: 40px;
  margin-left: 5px;
}

.top-service img {
  height: 270px;
  width: auto;

  margin-top: 20px;
  margin-right: 0px;
  margin-left: 200px;
  text-align: center;
}

.link-button-service-all {
  text-align: center;
  margin-top: 35px;
  margin-left: 80px;
  margin-bottom: 15px;
}

.link-button-service-details-txt {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  background-color: #04AF7C;

  display: inline-block;
  min-width: 180px;
  line-height: 48px;
  border-radius: 24px;
}

.link-button-service-details-txt:hover {
  background-color: #04af7f;
  color: #FFFFFF;
  font-weight: bold;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.top-service-container {
  height: auto;
  display: grid;
  grid-template-columns: 280px 280px 280px;
  grid-template-columns: repeat(auto-fit, 280px);
  grid-template-rows: 310px 310px;
  column-gap: 50px;
  row-gap: 10px;
  width: 940px;
  justify-content: center;

  max-width: 90%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
}

.top-service-container img {
  height: 200px;
}

.top-service-container dt {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.7;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  padding-top: 10px;
  padding-left: 20px;
}

.top-service-container dd {
  font-size: 12px;
  font-family: 'Kaisei HarunoUmi', serif;
  padding-left: 20px;
}

.top-service-container p {
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0.5px 0.5px 0.5px #4b2c14;
  font-family: 'Kaisei HarunoUmi', serif;
  color: #04AF7C;
  text-align: right;
  padding-right: 20px;
  padding-top: 6px;
}

.top-service-container-pur {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-service-container-pur:hover {
  background-color: #04AF7C;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-service-container-pur:hover p {
  color: #ffffff;
}

.top-service-container-logi {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-service-container-logi:hover {
  background-color: #04AF7C;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-service-container-logi:hover p {
  color: #ffffff;
}

.top-service-container-trans {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-service-container-trans:hover {
  background-color: #04AF7C;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-service-container-trans:hover p {
  color: #ffffff;
}

.top-service-container-erase {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-service-container-erase:hover {
  background-color: #04AF7C;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-service-container-erase:hover p {
  color: #ffffff;
}

.top-service-container-reuse {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-service-container-reuse:hover {
  background-color: #04AF7C;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-service-container-reuse:hover p {
  color: #ffffff;
}

.top-company-backimage {
  width: 100%;
  background-image: url(../images/index/top-company-backimage.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.top-company {
  height: 310px;
  background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  max-width: 100%;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
}

.top-company-txt {
  width: 500px;
  max-width: 500px;
  justify-content: center;

  margin-right: 0px;
  padding-top: 20px;
  padding-left: 0px;

}

.top-company-txt h2 {
  font-family: 'Roboto', sans-serif;
  margin-top: 0px;
}

.top-company h2 {
  padding: 0.8rem 0;
  background-image: linear-gradient(90deg, #46aadc 0 20%, #dedede 20%);
  background-repeat: no-repeat;
  background-size: 100% 10%;
  background-position: bottom;
  color: #323232;
  font-weight: bold;
}

.top-company-txt h5 {
  font-family: 'Noto Serif JP', serif;
  margin-top: 8px;
  margin-left: 5px;
}

.top-company-txt p {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  margin-left: 5px;
}

.link-button-company-etc {
  text-align: center;
  margin-top: 70px;
  margin-left: 80px;
}

.link-button-company-etc-txt {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  background-color: #04AF7C;

  display: inline-block;
  min-width: 180px;
  line-height: 48px;
  border-radius: 24px;

}

.link-button-company-etc-txt:hover {
  background-color: #04af7f;
  color: #FFFFFF;
  font-weight: bold;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.top-company img {
  height: 270px;
  width: auto;
  margin-top: 20px;
  margin-right: 0px;
  margin-left: 290px;
  text-align: center;
}

.top-company-container {
  width: 650px;
  max-width: 90%;


  display: grid;
  grid-template-columns: 280px 280px;
  grid-template-columns: repeat(auto-fit, 280px);
  grid-template-rows: 290px 290px;
  column-gap: 50px;
  row-gap: 10px;

  justify-content: center;

  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
}

.top-company-container img {
  height: 200px;
}

.top-company-container dt {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.7;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  padding-top: 10px;
  padding-left: 20px;
}

.top-company-container dd {
  font-size: 12px;
  font-family: 'Kaisei HarunoUmi', serif;
  padding-left: 20px;
}

.top-company-container p {
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0.5px 0.5px 0.5px #4b2c14;
  font-family: 'Kaisei HarunoUmi', serif;
  color: #04AF7C;
  text-align: right;
  padding-right: 20px;
  padding-top: 6px;
}

.top-company-container-profile {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-company-container-profile:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-company-container-profile:hover p {
  color: #ffffff;
}

.top-company-container-message {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-company-container-message:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-company-container-message:hover p {
  color: #ffffff;
}

.top-csr-backimage {
  width: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.479) 0%, rgb(255, 255, 255, 0.479) 100%), url(../images/index/top-csr-backimage.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.top-csr {
  height: 310px;
  background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  max-width: 100%;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
}

.top-csr-txt {
  width: 500px;
  max-width: 500px;
  justify-content: center;

  margin-right: 0px;
  padding-top: 20px;
  padding-left: 0px;
}

.top-csr-txt h2 {
  font-family: 'Roboto', sans-serif;

  margin-top: 0px;

  padding: 0.8rem 0;
  background-image: linear-gradient(90deg, #46aadc 0 20%, #dedede 20%);
  background-repeat: no-repeat;
  background-size: 100% 10%;
  background-position: bottom;
  color: #323232;
  font-weight: bold;
}

.top-csr-txt h5 {
  font-family: 'Noto Serif JP', serif;
  margin-top: 8px;
  margin-left: 5px;
}

.top-csr-txt p {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  margin-top: 30px;
  margin-left: 5px;
}


.top-csr img {
  height: 270px;
  width: auto;
  margin-top: 20px;
  margin-left: 290px;
  text-align: center;
}

.link-button-csr-all {
  text-align: center;
  margin-top: 10px;
  margin-left: 0px;
}

.link-button-csr-details-txt {
  /*.link-button-csr-all{*/
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  background-color: #04AF7C;

  display: inline-block;
  min-width: 180px;
  line-height: 48px;
  border-radius: 24px;
}

.link-button-csr-details-txt:hover {
  /*.link-button-csr-all{*/
  background-color: #04af7f;
  color: #FFFFFF;
  font-weight: bold;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.top-csr-container {
  height: auto;
  width: 650px;
  max-width: 90%;

  display: grid;
  grid-template-columns: 280px 280px;
  grid-template-columns: repeat(auto-fit, 280px);
  grid-template-rows: 290px 290px;
  column-gap: 50px;
  row-gap: 10px;

  justify-content: center;


  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;


}

.top-csr-container img {
  height: 200px;
}

.top-csr-container dt {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.7;

  padding-top: 10px;
  padding-left: 20px;
}

.top-csr-container dd {
  font-family: 'Kaisei HarunoUmi', serif;
  font-size: 12px;

  padding-left: 20px;
}

.top-csr-container p {
  font-family: 'Kaisei HarunoUmi', serif;
  font-size: 14px;
  font-weight: bold;
  color: #04AF7C;
  text-align: right;
  text-shadow: 0.5px 0.5px 0.5px #4b2c14;
  padding-right: 20px;
  padding-top: 6px;
}

.top-csr-container-qual {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
  text-align: center;
  padding-top: 5px;

}

.top-csr-container-qual dt,
dd {
  text-align: left;
}

.top-csr-container-qual img {
  margin-left: 0px;
}

.top-csr-container-qual:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-csr-container-qual:hover p {
  color: #FFFFFF;
}

.top-csr-container-envi {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
  text-align: center;
  padding-top: 5px;
}

.top-csr-container-envi dt,
dd {
  text-align: left;
}

.top-csr-container-envi:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-csr-container-envi:hover p {
  color: #ffffff;
}

.top-csr-container-infosec {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
  text-align: center;
  padding-top: 5px;
}

.top-csr-container-infosec img {
  margin-left: 0px;
}

.top-csr-container-infosec dt,
dd {
  text-align: left;
}

.top-csr-container-infosec:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-csr-container-infosec:hover p {
  color: #FFFFFF;
}

.top-csr-container-itlsec {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-csr-container-itlsec img {
  margin-left: 0px;
}

.top-csr-container-itlsec:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-csr-container-itlsec:hover p {
  color: #ffffff;
}

.top-csr-container-privacy {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-csr-container-privacy img {
  margin-left: 0px;
}

.top-csr-container-privacy:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-csr-container-privacy:hover p {
  color: #ffffff;
}

.top-csr-container-snspol {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-csr-container-snspol:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-csr-container-snspol:hover p {
  color: #ffffff;
}

.top-sns-backimage {
  width: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.479) 0%, rgb(255, 255, 255, 0.479) 100%), url(../images/index/top-sns-backimage.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.top-sns {
  height: 310px;
  background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
}

.top-sns-txt {
  width: 500px;
  max-width: 500px;
  justify-content: center;

  margin-right: 0px;
  padding-top: 20px;
  padding-left: 0;
}

.top-sns-txt h2 {
  font-family: 'Roboto', sans-serif;
  margin-top: 0px;
}

.top-sns-txt h2 {
  padding: 0.8rem 0;
  background-image: linear-gradient(90deg, #46aadc 0 20%, #dedede 20%);
  background-repeat: no-repeat;
  background-size: 100% 10%;
  background-position: bottom;
  color: #323232;
  font-weight: bold;
}

.top-sns-txt h5 {
  font-family: 'Noto Serif JP', serif;
  margin-top: 8px;
  margin-left: 5px;
}

.top-sns-txt p {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 18px;
  line-height: 1.7;

  width: 270px;

  margin-top: 40px;
  margin-left: 5px;
}

.link-button-sns-etc {
  text-align: center;
  margin-top: 70px;
  margin-left: 80px;
}

.link-button-sns-etc-txt {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  background-color: #04AF7C;

  display: inline-block;
  min-width: 180px;
  line-height: 48px;
  border-radius: 24px;
}

.link-button-sns-etc-txt:hover {
  background-color: #04af7f;
  color: #FFFFFF;
  font-weight: bold;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.top-sns img {
  height: 270px;
  width: auto;

  margin-top: 20px;
  margin-right: 0px;
  margin-left: 290px;
  text-align: center;
}

.top-sns-container {
  height: 400px;
  width: 940px;
  max-width: 90%;

  display: grid;
  grid-template-columns: 280px 280px;
  grid-template-columns: repeat(auto-fit, 280px);
  grid-template-rows: 290px 290px;
  column-gap: 50px;
  row-gap: 10px;

  justify-content: center;
  text-align: center;

  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 100px;
}

.top-sns-container img {
  height: 200px;
}

.top-sns-container dt {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.7;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  padding-top: 10px;
}

.top-sns-container dd {
  font-size: 12px;
  font-family: 'Kaisei HarunoUmi', serif;
}

.top-sns-container p {
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0.5px 0.5px 0.5px #4b2c14;
  font-family: 'Kaisei HarunoUmi', serif;
  color: #04AF7C;
  text-align: right;
  padding-right: 20px;
}

.top-sns-container-xtwitter {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
  text-align: center;
  padding-top: 5px;
}

.top-sns-container-xtwitter dd {
  text-align: center;
}

.top-sns-container-xtwitter:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-sns-container-xtwitter:hover p {
  color: #FFFFFF;
}

.top-sns-container-instagram {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
  text-align: center;
  padding-top: 5px;
}

.top-sns-container-instagram dt,
.top-sns-container-instagram dd {
  text-align: center;
}

.top-sns-container-instagram:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-sns-container-instagram:hover p {
  color: #FFFFFF;
}

.top-sns-container-facebook dd {
  text-align: center;
}

.top-sns-container-facebook {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-sns-container-facebook:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-sns-container-facebook:hover p {
  color: #FFFFFF;
}

.top-store-backimage {
  width: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.479) 0%, rgb(255, 255, 255, 0.479) 100%), url(../images/index/top-store-backimage.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.top-store {
  height: 310px;
  background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.top-store-txt {
  width: 500px;
  max-width: 500px;
  justify-content: center;

  margin-right: 0px;
  padding-top: 20px;
  padding-left: 0px;
}

.top-store-txt h2 {
  font-family: 'Roboto', sans-serif;
  margin-top: 0px;
}

.top-store-txt h2 {
  padding: 0.8rem 0;
  background-image: linear-gradient(90deg, #46aadc 0 20%, #dedede 20%);
  background-repeat: no-repeat;
  background-size: 100% 10%;
  background-position: bottom;
  color: #323232;
  font-weight: bold;
}

.top-store-txt h5 {
  font-family: 'Noto Serif JP', serif;
  margin-top: 8px;
  margin-left: 5px;
}

.top-store-txt p {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  margin-top: 40px;
  margin-left: 5px;
}

.link-button-store-etc {
  text-align: center;
  margin-top: 35px;
  margin-left: 80px;
}

.link-button-store-etc-txt {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  background-color: #04AF7C;

  display: inline-block;
  min-width: 180px;
  line-height: 48px;
  border-radius: 24px;

}

.link-button-store-etc-txt:hover {
  background-color: #04af7f;
  color: #FFFFFF;
  font-weight: bold;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.top-store img {
  height: 270px;
  width: auto;

  margin-top: 20px;
  margin-right: 0px;
  margin-left: 290px;
  text-align: center;
}

.top-store-container {
  height: auto;
  /**/
  width: 940px;
  max-width: 90%;

  display: grid;
  grid-template-columns: 280px 280px 280px;
  grid-template-columns: repeat(auto-fit, 280px);
  grid-template-rows: 290px;
  column-gap: 50px;
  row-gap: 10px;

  justify-content: center;
  text-align: center;

  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 100px;
}

.top-store-container img {
  height: 200px;
}

.top-store-container dt {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.7;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  padding-top: 0px;
  padding-left: 0px;

}

.top-store-container dd {
  font-size: 12px;
  font-family: 'Kaisei HarunoUmi', serif;
  text-align: center;
}

.top-store-container p {
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0.5px 0.5px 0.5px #4b2c14;
  font-family: 'Kaisei HarunoUmi', serif;
  color: #04AF7C;
  text-align: right;
  padding-top: 12px;
  padding-right: 20px;
}

.top-store-container-yahuoku {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-store-container-yahuoku:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-store-container-yahuoku:hover p {
  color: #FFFFFF;
}

.top-store-container-yahooshopping {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-store-container-yahooshopping:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-store-container-yahooshopping:hover p {
  color: #FFFFFF;
}

.top-store-container-rakutenichiba {
  background-color: #ccebff;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-store-container-rakutenichiba:hover {
  background-color: #04af7c;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 1.0);
}

.top-store-container-rakutenichiba:hover p {
  color: #FFFFFF;
}




.top-access-backimage {
  width: 100%;
  background-image: url(../images/index/top-access-backimage.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  padding-bottom: 20px;
}

.top-access {
  height: 310px;
  background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
}

.top-access-txt {
  width: 500px;
  max-width: 500px;
  justify-content: center;

  margin-right: 0px;
  padding-top: 20px;
  padding-left: 0px;
}

.top-access-txt h2 {
  font-family: 'Roboto', sans-serif;
  width: auto;
  margin-top: 0px;
}

.top-access-txt h2 {
  padding: 0.8rem 0;
  background-image: linear-gradient(90deg, #46aadc 0 20%, #dedede 20%);
  background-repeat: no-repeat;
  background-size: 100% 10%;
  background-position: bottom;
  color: #323232;
  font-weight: bold;
}

.top-access-txt h5 {
  font-family: 'Noto Serif JP', serif;
  margin-top: 8px;
  margin-left: 5px;
}

.top-access-txt p {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  margin-top: 40px;
  margin-left: 5px;
}

.link-button-access-etc {
  text-align: center;
  margin-top: 30px;
  margin-left: 180px;
}

.link-button-access-etc-txt {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  background-color: #04AF7C;

  display: inline-block;
  min-width: 180px;
  line-height: 48px;
  border-radius: 24px;

}

.link-button-access-etc-txt:hover {
  background-color: #04af7f;
  color: #FFFFFF;
  font-weight: bold;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.top-access img {
  height: 310px;
  width: auto;
  margin-top: 0px;
  margin-left: 290px;
}

.top-access-container {
  height: auto;
  /*465*/
  width: 1050px;
  max-width: 90%;

  display: grid;
  grid-template-columns: 600px 600px;
  grid-template-columns: repeat(auto-fit, 510px);
  column-gap: 0px;
  row-gap: 10px;

  justify-content: center;

  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.top-access-container {
  background-color: #ffffffee;
  border-radius: 5px;
  border: 1px solid;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.top-access-container-juusyo h2 {
  font-family: 'Montserrat', sans-serif;
  margin-top: 50px;
  margin-left: 70px;
}

.top-access-container-juusyo p {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  margin-top: 40px;
  margin-left: 65px;
}

.top-access-container-googlemap-300 {
  /*320幅まで非表示*/
  display: none;
  /*320幅まで非表示*/
}

/*300ｘ400サイズ　レスポンシブ用*/

.top-access-container-googlemap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%;
}

.top-access-container-googlemap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
.top-access-container-googlemap h3{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  margin-top:20px;
  padding-bottom:10px;
}*/

















/*　ブレイクポイント960~768px　9.7インチ　*/

@media (max-width: 960px) {

  /*　768px以下でしか適用されない内容　*/
  .first-view1 {
    height: calc(100vh + 50px);
    /*ブラウザの高さいっぱい*/
    background-image: url(../images/index/bg-main1.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: flex-start;
    /*レスポ*/
  }

  .first-view1-txt h1 {
    display: flex;
    width: 100%;
    /*max-width:1300px; /*comon　の変更したらここも変えること*/
    /*margin-left:auto;*/
    /*margin-right:auto;*/
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 100px;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 1px 1px 10px #4b2c14;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.4em;
    /*　重要　*/
    line-height: 1.7;
    /*white-space: nowrap; /*テキストを折り返さない設定*/
    margin-top: 150px;
    /*　重要　*/
  }

  .fv-message-txt {
    font-size: 1.1em;
  }


  .top-service {
    /*　帯のベース　*/
    height: auto;
    /*1　変更　*/
    width: 960px;
    /*　２．最大要素　幅*/
    /*　変更　*/
    /*background-image: none;/*1　変更　*/
    display: grid;
    /*1　変更　*/
    background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
    background-size: cover;




    grid-template-columns: repeat(auto-fit, 300px);
    /*　追加　*/
    column-gap: 0px;
    /*　各要素の左右　余白*/
    /*　追加　*/
    column-gap: 0px;
    /*　上下間隔　*/
    /*　追加　*/

    justify-content: center;
    /*　変更　*/
    align-items: center;
    /*５．左のテキスト量が画像オーバーしても画像に変化なし*/

    /*margin-top: 110px;/*４－０．表示枠座標調整　*/
    /*　変更　*/
    margin-left: 0;
    /*４－１．表示枠座標調整これで１の設定でセンタリングになる　*/
    /*　変更　*/
    margin-right: 0;
    /*４－２．表示枠座標調整これで１の設定でセンタリングになる　*/
    /*　変更　*/
    margin-bottom: 0;
    /*６　必要に応じて数値をいじる。無いと変になる*/
  }

  .top-service-txt {
    /*　帯のテキスト「全て」　*/
    max-width: 300px;
    /*文章エリアサイズの調整*/
    justify-content: center;
    align-items: center;
    margin-right: 0px;
    padding-top: 20px;
    padding-left: 0px;
  }



  .top-service-txt h2 {
    /*　帯のテキスト「service」　*/
    text-align: center;
    background-size: 100% 10%;
    margin-top: 20px;
  }

  .top-service-txt h5 {
    /*　帯のテキストルビ「事業内容」　*/
    text-align: center;
    margin-top: 8px;
    margin-left: 0px;
  }

  .top-service-txt p {
    /*　帯の文章「資源の有効活用で～～」　*/
    align-items: center;
    margin-top: 20px;
    margin-left: 0px;
  }


  .top-service img {
    height: auto;
    width: 300px;
    margin-top: 20px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 10px;
    align-items: center;
  }

  .link-button-service-all {
    /*　ボタンデザイン用　*/
    text-align: center;
    margin-left: 0px;
    /*重要*/
  }





  /*各コンテンツボタンへ*/
  .top-service-container {
    justify-content: center;
    /*追加*/
    grid-template-rows: 310px 310px 310px;
    /*　290枠を、310幅にしてpadding20で下段②余白*/

  }

  .top-service-container-pur {
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  .top-service-container-logi {
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  .top-service-container-trans {
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  .top-service-container-erase {
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  .top-service-container-reuse {
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  /*　会社概要ここから◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇*/
  .top-company {
    /*RP*/
    height: auto;
    width: auto;
    /*1300　960*/
    /*　２．最大要素　幅*/
    /*background-image: none;*/
    display: grid;

    background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
    background-size: cover;

    grid-template-columns: 280px;
    grid-template-columns: repeat(auto-fit, 280px);
    /*3カラムにする*/
    grid-template-rows: 250px;
    /*　500幅2段*/
    column-gap: 0px;
    /*　各要素の左右　余白*/
    column-gap: 0px;
    /*　上下間隔　*/

    justify-content: center;
    /*　１．左端から要素ブラウザいっぱいに広げる*/
    align-items: center;
    /*５．左のテキスト量が画像オーバーしても画像に変化なし*/

    /*margin-top: 110px;/*４－０．表示枠座標調整　*/
    margin-left: 0;
    /*４－１．表示枠座標調整これで１の設定でセンタリングになる　*/
    margin-right: 0;
    /*４－２．表示枠座標調整これで１の設定でセンタリングになる　*/
    margin-bottom: 0px;
    /*６　必要に応じて数値をいじる。無いと変になる*/
  }

  .top-company-txt {
    height: 170px;
    max-width: 300px;
    /*文章エリアサイズの調整*/
    justify-content: center;
    align-items: center;
    margin-right: 0px;
    padding-top: 20px;
    padding-left: 0px;
    padding-bottom: 30px;
  }

  .top-company-txt h2 {
    text-align: center;
    background-size: 100% 10%;
    margin-top: 20px;
  }

  .top-company-txt h5 {
    text-align: center;
    margin-top: 8px;
    margin-left: 0px;
  }

  .top-company-txt p {
    /*文章の調整*/
    align-items: center;
    margin-top: 20px;
    margin-left: 0px;
  }

  .link-button-company-etc {
    /*　座標調整用　*/
    text-align: center;
    margin-top: 20px;
    /*　ボタン位置　高さ座標　*/
    margin-left: 0px;
    margin-bottom: 20px;
  }

  .link-button-company-etc-txt {
    /*　ボタンデザイン用　*/
    background-color: #04AF7C;
    display: inline-block;
    /*a要素解除、幅指定できるようにする　*/
    min-width: 180px;
    /*　ボタンの横幅　*/
    line-height: 48px;
    /*　ボタンの縦幅　*/
    border-radius: 24px;
    /*　ボタンの角丸め　*/
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  }

  .link-button-company-etc-txt:hover {
    background-color: #04af7f;
    color: #FFFFFF;
    font-weight: bold;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  }

  .top-company img {
    height: auto;
    width: 300px;
    /*画像サイズの調整*/
    margin-top: 20px;
    margin-right: 0px;
    margin-left: 0px;
    /*　重要　*/
    margin-bottom: 10px;
    align-items: center;
  }

  .top-company-container {
    height: auto;
    margin-top: 20px;

    padding-bottom: 20px;
    justify-content: center;
    /*追加*/
    grid-template-rows: 310px 310px;
    /*　290枠を、310幅にしてpadding20で下段②余白*/

  }

  /*　TOPページ、会社情報、「会社情報RP」　ここまで～～～～～～～～～～～～～～～～～～～～～～～～～～～*/





  /*　TOPページ、CSR、「帯RP」　ここから～～～～～～～～～～～～～～～～～～～～～～～～～～～～～*/
  .top-csr {
    /*RP　帯のベース　*/
    height: auto;
    /*1　変更　*/
    /*width:1300px; /*　２．最大要素　幅*/
    /*　変更　*/
    width: auto;
    /*background-image: none;/*1　変更　*/
    display: grid;
    /*1　変更　*/

    background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
    background-size: cover;

    grid-template-columns: 410px 280px;
    grid-template-columns: repeat(auto-fit, 280px);
    /*　追加　*/
    grid-template-rows: 410px;
    /*　290枠を、310幅にしてpadding20で下段②余白*/

    column-gap: 0px;
    /*　各要素の左右　余白*/
    /*　追加　*/
    column-gap: 0px;
    /*　上下間隔　*/
    /*　追加　*/

    justify-content: center;
    /*　変更　*/
    align-items: center;
    /*５．左のテキスト量が画像オーバーしても画像に変化なし*/

    /*margin-top: 110px;/*４－０．表示枠座標調整　*/
    /*　変更　*/
    margin-top: 0;
    margin-left: 0;
    /*４－１．表示枠座標調整これで１の設定でセンタリングになる　*/
    /*　変更　*/
    margin-right: 0;
    /*４－２．表示枠座標調整これで１の設定でセンタリングになる　*/
    /*　変更　*/
    margin-bottom: 0px;
    /*６　必要に応じて数値をいじる。無いと変になる*/

  }

  .top-csr-txt {
    /*RP　帯のテキスト「全て」　*/
    /*max-width:300px;/*文章エリアサイズの調整*/
    height: 300px;
    width: 400px;
    /*max-width:300px;*/
    justify-content: center;
    align-items: center;
    margin-right: 0px;
    padding-top: 20px;
    padding-left: 0px;
    padding-bottom: 30px;
  }

  .top-csr-txt h2 {
    /*RP　帯のテキスト「service」　*/
    height: auto;
    width: 400px;
    text-align: center;
    background-size: 100% 10%;
    margin-top: 20px;
  }

  .top-csr-txt h5 {
    /*RP　帯のテキストルビ「事業内容」　*/
    height: auto;
    width: 400px;
    text-align: center;
    margin-top: 8px;
    margin-left: 0px;
  }

  .top-csr-txt p {
    /*RP　帯の文章「資源の有効活用で～～」　*/
    height: auto;
    width: 400px;
    align-items: center;
    margin-top: 20px;
    margin-left: 50px;
  }

  .top-csr img {
    /*RP　帯の画像　*/
    height: auto;
    width: 300px;
    /*画像サイズの調整*/
    margin-top: 20px;
    margin-right: 0px;
    margin-left: 105px;
    margin-bottom: 10px;
    align-items: center;

  }

  /*margin-left:85px;/*ここは動かして調整*/



  /*
.top-csr img{
  height:auto;
  width:300px;
  
  text-align:center;
}*/




  .link-button-csr-all {
    /*RP　ボタンデザイン用　*/
    height: auto;
    width: 300px;
    text-align: center;
    margin-top: 25px;
    margin-left: 0px;
    /*内容で調整する*/
    margin-top: 20px;
    /*height:100px; /*　重要　*/

  }

  .link-button-csr-details-txt {
    /*.link-button-csr-all{*/
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    background-color: #04AF7C;

    display: inline-block;
    min-width: 180px;
    line-height: 48px;
    border-radius: 24px;
  }

  .link-button-csr-details-txt:hover {
    /*.link-button-csr-all{*/
    background-color: #04af7f;
    color: #FFFFFF;
    font-weight: bold;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  }












  /*各コンテンツボタンへ*/
  .top-csr-container {
    /*RP*/
    height: auto;
    margin-top: 20px;
    padding-bottom: 20px;

    justify-content: center;
    /*追加*/
    grid-template-rows: 310px;
    /*　290枠を、310幅にしてpadding20で下段②余白*/

  }

  .top-csr-container-qual {
    /*RP*/
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  .top-csr-container-envi {
    /*RP*/
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  .top-csr-container-infosec {
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  .top-csr-container-itlsec {
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  .top-csr-container-privacy {
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  .top-csr-container-snspol {
    /*RP*/
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  /*　TOPページ、CSR、「帯RP」　ここまで～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～*/
  /*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/







  /*　公式SNSここから◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇*/
  .top-sns {
    /*RP*/
    height: auto;
    width: auto;
    /*1300*/
    /*　２．最大要素　幅*/
    /*background-image: none;*/
    display: grid;

    background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
    background-size: cover;

    grid-template-columns: 280px 280px;
    grid-template-columns: repeat(auto-fit, 280px);
    /*3カラムにする*/
    grid-template-rows: 310px;
    /*　500幅2段*/
    column-gap: 0px;
    /*　各要素の左右　余白*/
    column-gap: 0px;
    /*　上下間隔　*/

    justify-content: center;
    /*　１．左端から要素ブラウザいっぱいに広げる*/
    align-items: center;
    /*５．左のテキスト量が画像オーバーしても画像に変化なし*/

    margin-left: 0;
    /*４－１．表示枠座標調整これで１の設定でセンタリングになる　*/
    margin-right: 0;
    /*４－２．表示枠座標調整これで１の設定でセンタリングになる　*/
    margin-bottom: 0px;
    /*６　必要に応じて数値をいじる。無いと変になる*/
  }

  .top-sns-txt {
    /*RP*/
    height: 170px;
    max-width: 300px;
    /*文章エリアサイズの調整*/
    justify-content: center;
    align-items: center;
    margin-right: 0px;
    padding-top: 20px;
    padding-left: 0px;
    padding-bottom: 90px;
  }

  .top-sns-txt h2 {
    /*RP*/
    text-align: center;
    background-size: 100% 10%;
    margin-top: 20px;
  }

  .top-sns-txt h5 {
    /*RP*/
    text-align: center;
    margin-top: 8px;
    margin-left: 0px;
  }

  .top-sns-txt p {
    /*文章の調整*/
    align-items: center;
    margin-top: 20px;
    margin-left: 0px;
  }

  /*リンクボタン使用しない*/
  .link-button-sns-etc {
    /*RP*/
    /*　座標調整用　*/
    text-align: center;
    margin-top: 70px;
    /*　ボタン位置　高さ座標　*/
    margin-left: 0px;
  }

  /*リンクボタン使用しない*/
  .link-button-sns-etc-txt {
    /*RP*/
    /*　ボタンデザイン用　*/
    background-color: #04AF7C;
    display: inline-block;
    /*a要素解除、幅指定できるようにする　*/
    min-width: 180px;
    /*　ボタンの横幅　*/
    line-height: 48px;
    /*　ボタンの縦幅　*/
    border-radius: 24px;
    /*　ボタンの角丸め　*/
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  }

  /*リンクボタン使用しない*/
  .link-button-sns-etc-txt:hover {
    /*RP*/
    background-color: #04af7f;
    color: #FFFFFF;
    font-weight: bold;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  }

  .top-sns img {
    /*RP*/
    height: auto;
    width: 300px;
    /*画像サイズの調整*/
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 10px;
    align-items: center;

    margin-left: 0px;
    /*　重要　*/

  }

  /*各コンテンツボタンへ*/
  .top-sns-container {
    /*RP*/
    height: auto;
    justify-content: center;
    /*追加*/
    grid-template-rows: 310px;
    /*　290枠を、310幅にしてpadding20で下段②余白*/

  }

  .top-sns-container-xtwitter {
    /*RP*/
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  .top-sns-container-instagram {
    /*RP*/
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  .top-sns-container-facebook {
    /*RP*/
    margin-bottom: 20px;
    /*grid-template-rowsを調整した後にここで余白調整*/
  }

  /*　TOPページ、公式SNS、「公式SNS」　ここまで～～～～～～～～～～～～～～～～～～～～～～～～～～～*/




  /*　ストアRP概要ここから◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇*/
  .top-store {
    /*RP*/
    height: auto;
    width: 1300px;
    /*　２．最大要素　幅*/
    /*background-image: none;*/
    display: grid;

    background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
    background-size: cover;

    /*RP 帯のところ。ここらへんあやしい*/
    grid-template-columns: 280px 280px 280px;
    grid-template-columns: repeat(auto-fit, 280px);
    /*3カラムにする*/
    grid-template-rows: 310px;
    /*　500幅2段*/
    column-gap: 0px;
    /*　各要素の左右　余白*/
    column-gap: 0px;
    /*　上下間隔　*/

    justify-content: center;
    /*　１．左端から要素ブラウザいっぱいに広げる*/
    align-items: center;
    /*５．左のテキスト量が画像オーバーしても画像に変化なし*/

    margin-top: 0;
    /*４－０．表示枠座標調整　*/
    margin-left: 0;
    /*４－１．表示枠座標調整これで１の設定でセンタリングになる　*/
    margin-right: 0;
    /*４－２．表示枠座標調整これで１の設定でセンタリングになる　*/
    margin-bottom: 0px;
    /*６　必要に応じて数値をいじる。無いと変になる*/
  }

  .top-store-txt {
    max-width: 300px;
    /*文章エリアサイズの調整*/
    justify-content: center;
    align-items: center;
    margin-right: 0px;
    padding-top: 20px;
    padding-left: 0px;
  }

  .top-store-txt h2 {
    text-align: center;
    background-size: 100% 10%;
    margin-top: 20px;
  }

  .top-store-txt h5 {
    text-align: center;
    margin-top: 8px;
    margin-left: 0px;
  }

  .top-store-txt p {
    /*文章の調整*/
    align-items: center;
    margin-top: 20px;
    margin-left: 0px;
  }

  .link-button-store-etc {
    /*　座標調整用　*/
    text-align: center;
    margin-top: 15px;
    /*　ボタン位置　高さ座標　*/
    margin-left: 0px;
    padding-bottom: 20px;

  }

  .link-button-store-etc-txt {
    /*　ボタンデザイン用　*/
    background-color: #04AF7C;
    display: inline-block;
    /*a要素解除、幅指定できるようにする　*/
    min-width: 180px;
    /*　ボタンの横幅　*/
    line-height: 48px;
    /*　ボタンの縦幅　*/
    border-radius: 24px;
    /*　ボタンの角丸め　*/
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  }

  .link-button-store-etc-txt:hover {
    background-color: #04af7f;
    color: #FFFFFF;
    font-weight: bold;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  }

  .top-store img {
    height: auto;
    width: 300px;
    /*画像サイズの調整*/
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 10px;
    align-items: center;

    margin-left: 0px;
    /*　重要　*/
  }

  .top-store-container {
    height: auto;
    margin-top: 20px;

    padding-bottom: 20px;
    justify-content: center;
    /*追加*/
    grid-template-rows: 310px;
    /*　290枠を、310幅にしてpadding20で下段②余白*/

  }

  /*　TOPページ、会社情報、「会社情報RP」　ここまで～～～～～～～～～～～～～～～～～～～～～～～～～～～*/





  /*　アクセスRP概要ここから◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇*/
  .top-access {
    /*RP*/
    height: auto;
    width: 1300px;
    /*　２．最大要素　幅*/
    /*background-image: none;*/
    display: grid;

    background-image: linear-gradient(to left, #ffffffe6, #FEF9C4);
    background-size: cover;

    /*RP 帯のところ。ここらへんあやしい*/
    grid-template-columns: 290px 290px;
    grid-template-columns: repeat(auto-fit, 280px);
    /*3カラムにする*/
    grid-template-rows: 250px;
    /*　500幅2段*/
    column-gap: 0px;
    /*　各要素の左右　余白*/
    column-gap: 0px;
    /*　上下間隔　*/

    justify-content: center;
    /*　１．左端から要素ブラウザいっぱいに広げる*/
    align-items: center;
    /*５．左のテキスト量が画像オーバーしても画像に変化なし*/

    margin-top: 0;
    /*４－０．表示枠座標調整　*/
    margin-left: 0;
    /*４－１．表示枠座標調整これで１の設定でセンタリングになる　*/
    margin-right: 0;
    /*４－２．表示枠座標調整これで１の設定でセンタリングになる　*/
    margin-bottom: 0px;
    /*６　必要に応じて数値をいじる。無いと変になる*/

    padding-top: 0px;
    /*35*/
    padding-bottom: 10px;
  }

  .top-access-txt {
    height: 100px;
    max-width: 300px;
    /*文章エリアサイズの調整*/
    justify-content: center;
    align-items: center;
    margin-right: 0px;
    padding-top: 20px;
    padding-left: 0px;
  }

  .top-access-txt h2 {
    text-align: center;
    background-size: 100% 10%;
    margin-top: 20px;
  }

  .top-access-txt h5 {
    text-align: center;
    margin-top: 8px;
    margin-left: 0px;
  }

  .top-access-txt p {
    /*文章の調整*/
    width: 300px;
    height: 250px;
    align-items: center;
    margin-top: 20px;
    margin-left: 0px;
  }

  .link-button-access-etc {
    /*　座標調整用　*/
    text-align: center;
    margin-top: 35px;
    /*　ボタン位置　高さ座標　*/
    margin-left: 0px;
  }

  .link-button-access-etc-txt {
    /*　ボタンデザイン用　*/
    background-color: #04AF7C;
    display: inline-block;
    /*a要素解除、幅指定できるようにする　*/
    min-width: 180px;
    /*　ボタンの横幅　*/
    line-height: 48px;
    /*　ボタンの縦幅　*/
    border-radius: 24px;
    /*　ボタンの角丸め　*/
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  }

  .link-button-access-etc-txt:hover {
    background-color: #04af7f;
    color: #FFFFFF;
    font-weight: bold;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  }

  .top-access img {
    height: auto;
    width: 300px;
    /*画像サイズの調整*/
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 10px;
    align-items: center;

    margin-left: 0px;
    /*　重要　*/
  }

  .top-access-container {
    height: auto;
    width: 600px;
    margin-top: 20px;

    padding-top: 20px;
    padding-bottom: 20px;
    justify-content: center;
    /*追加*/
    grid-template-rows: 300px 400px;
    /*　290枠を、310幅にしてpadding20で下段②余白*/

  }

  .top-access-container-juusyo {
    height: 300px;
  }

  .top-access-container-juusyo h2 {
    /*RP*/
    /*コンテナが600なのでこれで動かす*/
    margin-top: 45px;
    padding-left: 50px;

  }

  .top-access-container-juusyo p {
    /*RP*/
    /*コンテナが600なのでこれで動かす*/
    padding-left: 0px;

  }

  .top-access-container-googlemap h3 {
    /*RP*/
    padding-left: 0px;
    text-align: center;
  }





}

/*レスポンシブここまで*/
/*レスポンシブここまで*/
/*レスポンシブここまで*/
/*レスポンシブここまで*/

/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/








/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　ブレイクポイント768~520px　*/

@media (max-width: 768px) {
  /*768-520*/

  .top-csr {
    /*768-520*/
    height: auto;
    width: auto;
    display: grid;
    justify-content: center;
    align-items: center;
  }

  /*768-520*/

  .top-csr-txt {
    /*768-520*/
    display: grid;
    justify-content: center;
    align-items: center;
  }

  /*768-520*/

  .top-csr-txt p {
    /*768-520*/
    /*RP　帯の文章「資源の有効活用で～～」　*/
    height: auto;
    width: 400px;

    margin-top: 20px;
    margin-left: auto;
    /*50変更*/
    margin-right: auto;

    justify-content: center;
    align-items: center;

  }

  /*768-520*/

  .top-csr img {
    /*768-520*/
    /*RP　帯の画像　*/
    height: auto;
    width: 300px;
    /*画像サイズの調整*/
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    /*変更*/
    margin-bottom: 10px;

    justify-content: center;
    align-items: center;

  }

  /*768-520*/




}

/*768-520*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/




/*　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*　ブレイクポイント520～320px　*/
@media (max-width: 520px) {
  /*520-320*/






  .top-csr-txt {
    /*520-320*/
    /*RP　帯のテキスト「全て」　*/
    /*max-width:300px;/*文章エリアサイズの調整*/
    height: 300px;
    width: 300px;
    /*max-width:300px;*/
    display: grid;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    /*0*/
    margin-left: auto;
    padding-top: 20px;
    padding-left: 0px;
    padding-bottom: 30px;
  }

  /*520-320*/

  .top-csr-txt h2 {
    /*520-320*/
    /*RP　帯のテキスト「service」　*/
    height: auto;
    width: 300px;

    font-family: 'Roboto', sans-serif;
    padding: 0.8rem 0;
    background-image: linear-gradient(90deg, #46aadc 0 20%, #dedede 20%);
    background-repeat: no-repeat;
    background-size: 100% 10%;
    background-position: bottom;
    color: #323232;
    font-weight: bold;

    text-align: center;
    background-size: 100% 10%;
    margin-top: 20px;

  }

  /*520-320*/
  .top-csr-txt h5 {
    /*520-320*/
    /*RP　帯のテキストルビ「事業内容」　*/
    height: auto;
    width: 300px;
    text-align: center;
    margin-top: 8px;
    margin-left: 0px;
  }

  /*520-320*/

  .top-csr-txt p {
    /*RP　帯の文章「資源の有効活用で～～」　*/
    height: auto;
    width: 300px;
    align-items: center;
    margin-top: 20px;
    margin-left: auto;
    /*30*/
    margin-right: auto;
  }

  /*520-320*/

  .top-csr img {
    /*RP　帯の画像　*/
    height: auto;
    width: 300px;
    /*画像サイズの調整*/
    margin-top: 20px;
    margin-right: 0px;
    margin-left: 0px;
    /*105*/
    margin-bottom: 10px;
    align-items: center;
  }

  /*520-320*/
  /*margin-left:85px;/*ここは動かして調整*/






  .top-access-container {
    /*520-320*/
    height: auto;
    width: 320px;
    max-width: initial;
    margin-top: 10px;

    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: flex-start;
    /*追加*/
    grid-template-rows: 410px 400px;
    /*　290枠を、310幅にしてpadding20で下段②余白*/
  }

  /*520-320*/
  .top-access-container-juusyo {
    height: auto;
    width: 280px;
  }

  /*520-320*/
  .top-access-container-juusyo h2 {
    height: auto;
    width: 280px;

    font-size: 19px;
    font-family: 'Montserrat', sans-serif;
    margin-top: 50px;
    margin-left: 0px;
    margin-right: 0;
    text-align: center;
    padding-left: 0;
  }

  /*520-320*/
  .top-access-container-juusyo p {
    height: auto;
    width: 280px;

    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    margin-top: 40px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 5px;
  }

  /*520-320*/





  /*でかいサイズ一時非表示*/
  .top-access-container-googlemap {
    /*520-320*/
    display: none;
  }

  /*520-320*/

  /*ちいさいサイズを表示させる*/
  .top-access-container-googlemap-300 {
    /*520-320*/
    display: block;
    /*非表示解除*/

    height: auto;
    width: 320px;
    padding-left: 10px;
  }

  /*520-320*/

  .top-csr-txt p {
    /*520-320*/
    /*RP　帯の文章「資源の有効活用で～～」　*/
    height: auto;
    width: 300px;
    /*変更*/

    margin-top: 20px;
    margin-left: auto;
    /*50変更*/
    margin-right: auto;

    justify-content: center;
    align-items: center;

  }

  /*520-320*/





  .first-view1-txt h1 {
    display: flex;
    width: 100%;
    /*max-width:1300px; /*comon　の変更したらここも変えること*/
    /*margin-left:auto;*/
    /*margin-right:auto;*/
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 100px;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 1px 1px 10px #4b2c14;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.4em;
    /*　重要　*/
    line-height: 1.7;
    /*white-space: nowrap; /*テキストを折り返さない設定*/

    margin-top: 80px;
    /*　重要　*/

  }










}

/*520-320*/
/*　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/



.top-csr-container-qual img,
.top-csr-container-infosec img {
    width: 100%;
    height: auto;
}