@charset "UTF-8";

/* # =================================================================
	# フォント
	# ================================================================= */
@font-face {
   font-family: "Noto Serif";
   src: url("../font/NotoSerifJP-Regular.woff") format("woff"), url("../font/NotoSerifJP-Regular.ttf") format("truetype");
   font-weight: 400;
}

@font-face {
   font-family: "Noto Serif";
   src: url("../font/NotoSerifJP-Medium.woff") format("woff"), url("../font/NotoSerifJP-Medium.ttf") format("truetype");
   font-weight: 500;
}
@font-face {
   font-family: "Noto Serif";
   src: url("../font/NotoSerifJP-Bold.woff2") format("woff"), url("../font/NotoSerifJP-Bold.ttf") format("truetype");
   font-weight: 700;
}

@font-face {
   font-family: "Noto Sans";
   src: url("../font/NotoSansJP-Medium.woff") format("woff"), url("../font/NotoSansJP-Medium.ttf") format("truetype");
   font-weight: 500;
}

@font-face {
   font-family: "Noto Sans";
   src: url("../font/NotoSansJP-Bold.woff") format("woff"), url("../font/NotoSansJP-Bold.ttf") format("truetype");
   font-weight: 700;
}

.barlow {
   font-family: 'Barlow Condensed', sans-serif;
   font-weight: 300;
}

.gothic {
   font-family: 'Noto Sans', sans-serif;
}

/* # =================================================================
   # ページコンテンツ
   # ================================================================= */

.pageBt {
   font-family: "Noto Serif", 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
   font-size: 1.6rem;
   line-height: 1.8;
   color: #006837;
   position: relative;
   /* -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased; */
   -webkit-font-feature-settings: "palt" 1;
   font-feature-settings: "palt" 1;
}

/* #g_footer .fa-chevron-up:before {
    content: "▲";
} */
.pageBt * {
   box-sizing: border-box;
}

.pageBt img {
   max-width: 100%;
   height: auto;
}

.pageBt a:hover {
   opacity: 0.8;
}

.pageBt h2,
.pageBt h3 {
   letter-spacing: 0.2em;
}

.pageBt p {
   line-height: 2;
   letter-spacing: 0.1em;
}

.pageBt .mv-txt {
   display: block;
}

.pageBt .mv-txt.mv-txt_01 {
   width: 392px;
}

.pageBt .mv-txt.mv-txt_02 {
   width: 362px;
   margin-top: 20px;
}

.relative {
   position: relative;
}

.container {
   width: min(80%, 800px);
   margin-left: auto;
   margin-right: auto;
}

.ttlCenter {
   text-align: center;
   font-size: min(8.5vw, 4.0rem);
   margin-bottom: 2.5em;
   letter-spacing: 0.175em;
   line-height: 1.8;
}

.scPa {
   padding-top: min(16vw, 85px);
   padding-bottom: min(16vw, 85px);
}

.scMa {
   margin-top: min(16vw, 85px);
   margin-bottom: min(16vw, 85px);
}

.scMt {
   margin-top: min(16vw, 85px);
}

.spInline {
   display: none;
}

.mdInline {
   display: none;
}

.dFlex,
.dFlexSp {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: flex-start;
}

.spBlock {
   display: none;
}

.txtCenter {
   text-align: center;
}

.txtWh {
   color: #FFF;
}

.underline {
   text-decoration: underline;
}

.bg-grad_g {
   background: -moz-linear-gradient(27.66% 73.41% 9.91deg, rgba(0, 130, 67, 1) 0%, rgba(0, 63, 13, 1) 100%);
   background: -webkit-linear-gradient(9.91deg, rgba(0, 130, 67, 1) 0%, rgba(0, 63, 13, 1) 100%);
}

.in-br {
   display: inline-block;
}
.onlySP {
   display: none;
}

.image,
img {
   display: block;
   width: 100%;
}

.fadeUp,
.fadeIn,
.cntntShow {
   opacity: 0;
}

.fadeUp.act {
   animation: fadeUp 0.8s cubic-bezier(.05, .41, .67, .99) 0.2s forwards;
}

.fadeIn.act {
   animation: fadeIn 0.8s cubic-bezier(.05, .41, .67, .99) 0.2s forwards;
}

@keyframes fadeUp {
   0% {
      transform: translateY(20px);
      opacity: 0;
   }

   100% {
      transform: translateY(0);
      opacity: 1;
   }
}
@keyframes fadeIn {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@media screen and (max-width: 600px) {
   #g_header {
      height: auto;
   }

   .pageBt {
      font-size: 1.4rem;
   }

   .pageBt a.btnMailContact {
      width: min(100%, 500px);
   }

   .spInline {
      display: inline;
   }

   .dFlexSp,
   .spBlock {
      display: block;
   }

   .spNone {
      display: none !important;
   }
   .onlyPC {
      display: none;
   }
   .onlySP {
      display: block;
   }
   .container {
      width: calc(100% - 40px);
      margin-left: auto;
      margin-right: auto;
   }
}

/* # =================================================================
   # sdgs
   # ================================================================= */

.mv {
   position: relative;
}
.mv img {
   width: 100%;
   display: block;
}
.mv .mvWrap {
   position: absolute;
   top: 0;
   width: 100%;
}
.mv .mvText {
   opacity: 0;
   animation: mvFadeUp 1s cubic-bezier(.05, .41, .67, .99) 0.5s forwards;
}
.mv .mvText:nth-child(1) { animation-delay: 0.5s; }
.mv .mvText:nth-child(2) { animation-delay: 1.0s; }
.mv .mvText:nth-child(3) { animation-delay: 1.5s; }
@keyframes mvFadeUp {
   0% {
      transform: translateY(20px);
      opacity: 0;
   }

   100% {
      transform: translateY(0);
      opacity: 1;
   }
}

.sdgsSc {
   padding: 0;
}
.sdgsSc__title {
   width: 100%;
   padding: 5rem 20px;   
   text-align: center;
   background-image: url(../img/title_bg.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
}
.sdgsSc__titleText {
   font-size: min(5vw , 2.4rem);
   font-weight: 500;
   color: #FFF;
   line-height: 2.1;
}

@media screen and (max-width: 768px) {
   .sdgsSc__title {
      padding: 20px;
   }
}

/* 
====================================
MS CRAFTシリーズ
====================================
 */
#mscraft {
   padding: 10rem 0;
}
#mscraft .mscraftTitle {
   max-width: 575px;
   width: 80%;
   margin: 0 auto;
}
#mscraft .mscraftLead {
   margin-top: 5rem;
   font-size: 2rem;
   font-weight: 500;
   color: #00913a;
   text-align: center;
   letter-spacing: 0.35em;
}
#mscraft .mscraftLead .in-br {
   font-size: 2rem;
}
#mscraft .mscraftWrap {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-top: 7rem;
}
#mscraft .mscraftItem {
   height: 8.6rem;
   display: flex;
   padding: 0 10px;
   font-size: min(4.5vw , 2rem);
   align-items: center;
   justify-content: center;
   text-align: center;
   letter-spacing: 0.25em;
   border-radius: 999px;
   border: 1px solid #006934;
}
#mscraft .mscraftNote {
   margin-top: 1em;
   padding-left: 3rem;
   font-size: 1.2rem;
   font-weight: 500;
   color: #000;
}
#mscraft .mscraftBottom {
   display: grid;
   grid-template-columns: 1fr 1.04fr;
   gap: 35px;
}
#mscraft .mscraftBottomText {
   margin-bottom: 0;
   font-size: 1.6rem;
   color: #000;
   letter-spacing: 0.13em;
   text-align: justify;
   line-height: 1.9;
}
@media screen and (max-width: 768px) {
   #mscraft {
      padding: 5rem 0;
   }
   #mscraft .mscraftTitle {
      width: 90%;
      max-width: 500px;
   }
   #mscraft .mscraftLead {
      margin-top: 3rem;
      font-size: 1.8rem;
      letter-spacing: 0.3em;
   }
   #mscraft .mscraftLead .in-br {
      font-size: 1.8rem;
   }
   #mscraft .mscraftWrap {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 4rem;
   }
   #mscraft .mscraftItem {
      height: auto;
      padding: 20px 10px;
   }
   #mscraft .mscraftNote {
      padding-left: 0;
      text-align: center;
   }
   #mscraft .mscraftBottom {
      grid-template-columns: 1fr;
      gap: 20px;
   }
   #mscraft .mscraftBottom img {
      width: 90%;
      max-width: 500px;
      margin: 0 auto;
   }
   #mscraft .mscraftBottomText {
      margin-bottom: 0;
      font-size: 1.4rem;
      color: #000;
      letter-spacing: 0.13em;
      text-align: justify;
      line-height: 1.9;
   }
}

/* 
====================================
表面温度抑制効果
====================================
 */
#surface .surfaceTop {
   max-width: 760px;
   padding-top: 4rem;
}
#surface .surfaceLead {
   color: #000;
   font-size: 1.6rem;
   text-align: center;
   letter-spacing: 0.2em;
}
#surface .surfaceTopTitle {
   padding: 0.4rem 1rem;
   color: #00913a;
   font-size: 1.8rem;
   text-align: center;
   letter-spacing: 0.17em;
   line-height: 1.7;
   border: 1px solid #00913a;
}
#surface .surfaceTopWrap {
   margin-top: 5.5rem;
   display: grid;
   grid-template-columns: 1fr 1.53fr;
   gap: 7%;
}
#surface .surfaceTopLeft {
   max-width: 240px;
   margin-left: auto;
}
#surface .surfaceTopText {
   color: #000;
   font-size: 1.6rem;
   letter-spacing: 0.2em;
   text-align: center;
}
#surface .surfaceTopImg1 {}
#surface .surfaceTopImg2 {
}
#surface .surfaceBottom {
   max-width: 760px;
   margin-top: 6.5rem;
   padding-bottom: 17px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10%;
}
#surface .surfaceBottomItem {}
#surface .surfaceBottomTitle {
   padding: 0.2rem 1rem;
   font-size: min(4.5vw , 2rem);
   color: #FFF;
   text-align: center;
   background-color: #00913a;
}
#surface .surfaceBottomImg {
   width: 72.4%;
   margin: 1.6rem auto 0;
}
#surface .surfaceBottomText {
   margin-top: 1rem;
   color: #000;
   font-size: 1.6rem;
   letter-spacing: 0.2em;
}
@media screen and (max-width: 1024px) {
   #surface .surfaceTopImg2 {
      margin-top: auto;
   }
}
@media screen and (max-width: 768px) {
   #surface .surfaceLead {
      font-size: 1.4rem;
   }
   #surface .surfaceTopTitle {
      font-size: 1.6rem;
   }
   #surface .surfaceTopWrap {
      margin-top: 3rem;
      display: block;
   }
   #surface .surfaceTopLeft {
      max-width: 240px;
      margin: 0 auto;
   }
   #surface .surfaceTopText {
      font-size: 1.4rem;
   }
   #surface .surfaceTopImg2 {
      max-width: 427px;
      margin: 30px auto 0;
   }
   #surface .surfaceBottom {
      max-width: 500px;
      margin: 4rem auto 0;
      padding-bottom: 50px;
      grid-template-columns: 1fr;
      gap: 30px;
   }
   #surface .surfaceBottomText {
      margin-bottom: 0;
      font-size: 1.4rem;
   }
}

/* 
====================================
マイクロプラスチック流出抑制
====================================
 */
#mp {
   color: #000;
}
#mp .mpTop {
   padding: 6rem 0;
}
#mp .mpTopLead {
   font-size: 2.4rem;
   font-weight: 500;
   letter-spacing: 0.35em;
   line-height: 2;
   text-align: center;
}
#mp .mpTopLead .in-br {
   font-size: 2.4rem;
}
#mp .mpTopText {
   margin-top: 3rem;
   font-size: 1.6rem;
   letter-spacing: 0.2em;
   text-align: center;
}
#mp .mpBody {
   padding: 2.5rem 0 4.5rem;
   background-color: #f0f0f0;
}
#mp .mpBodyWrap {
   max-width: 760px;
   display: flex;
   justify-content: space-between;
}
#mp .mpBodyLeft {
   width: 41%;
}
#mp .mpBodyRight {
   width: 52.2%;
}
#mp .mpBodyTitle {
   width: fit-content;
   margin-top: 2rem;
   padding-bottom: 0.8rem;
   color: #00913a;
   font-size: min(5vw , 2.4rem);
   font-weight: 500;
   letter-spacing: 0.2em;
   border-bottom: 1px solid #00913a;
}
#mp .mpBodyList {
   margin-top: 2rem;
}
#mp .mpBodyItem {
   display: flex;
   font-size: min(4.7vw , 2.2rem);
   font-weight: 500;
   letter-spacing: 0.1em;
   line-height: 2.3;
}
#mp .mpBodyItem::before {
   content: "・";
}

#mp .mpBottom {
   max-width: 760px;
   padding: 9.4rem 0 6rem;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10%;
   letter-spacing: 0.2em;
}
#mp .mpBottomTitle {
   padding: 0.2rem 1rem;
   font-size: min(4.5vw , 2rem);
   color: #FFF;
   text-align: center;
   background: url(../img/ms_title_bg.png) no-repeat;
   background-size: 100% 100%;
}
#mp .mpBottomImg {
   margin-top: 2rem;
}
#mp .mpBottomText {
   margin-top: 1rem;
   margin-bottom: 0;
   font-size: 1.6rem;   
}
#mp .mpBottomText.mt {
   margin-top: 4rem;
}
#mp .mpBottomNote {
   margin: 1.5rem 0 0;
   font-size: 1.3rem;
   font-weight: 500;
   letter-spacing: 0.2em;
   text-align: justify;
}
#mp .mpBottomNote.end {
   margin-top: 3.7rem;
   font-size: 1.2rem;
   text-align: end;
}
#mp .mpBottomCaption {
   margin-top: 0;
   font-size: 1.2rem;
   text-align: end;
}
@media screen and (max-width: 768px) {
   #mp .mpTop {
      padding: 5rem 0;
   }
   #mp .mpTopLead {
      font-size: 2rem;
      letter-spacing: 0.3em;
   }
   #mp .mpTopLead .in-br {
      font-size: 2rem;
   }
   #mp .mpTopText {
      margin-top: 2rem;
      font-size: 1.4rem;
   }
   #mp .mpBodyWrap {
      max-width: 500px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }
   #mp .mpBodyLeft {
      width: 90%;
      margin: 0 auto;
      order: 1;
   }
   #mp .mpBodyRight {
      width: 100%;
   }
   #mp .mpBodyTitle {
      margin: 0 auto;
      padding-bottom: 0.4rem;
   }
   #mp .mpBodyList {
      width: fit-content;
      margin: 2rem auto 0;
   }
   #mp .mpBodyItem {
      line-height: 2;
   }

   #mp .mpBottom {
      max-width: 500px;
      margin: 0 auto;
      padding: 5rem 0;
      grid-template-columns: 1fr;
      gap: 30px;
   }
   #mp .mpBottomText {
      font-size: 1.4rem;   
   }
   #mp .mpBottomText.mt {
      margin-top: 2rem;
   }
   #mp .mpBottomNote {
      margin-top: 1rem;
      font-size: 1.2rem;
   }
   #mp .mpBottomNote.end {
      margin-top: 2rem;
   }
}

/* 
====================================
INTRODUCTION RECORD
====================================
 */
#record {
   padding: 9rem 0 8rem;
   color: #fff;
   background: url(../img/record_bg.png) no-repeat;
   background-size: 100% 100%;
}
#record .recordTitle {
   margin-bottom: 0;
}
#record .recordTitleUnder {
   margin-top: 0.5rem;
   font-size: min(5vw , 2.4rem);
   font-weight: 500;
   letter-spacing: 0.35em;
   text-align: center;
}
#record .recordList {
   margin-top: 8rem;
   display: grid;
   grid-template-columns: repeat(2 , 1fr);
   gap: 40px 10%;
}
#record .recordImg {
   aspect-ratio: 360 / 185;
   overflow: hidden;
}
#record .recordImg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: right top;
}
#record .recordName {
   min-height: 45px;
   margin-top: 2.3rem;
   text-align: center;
   letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
   #record {
      padding: 5rem 0;
   }
   #record .recordTitle {
      line-height: 1.4;
   }
   #record .recordTitleUnder {
      margin-top: 0;
      letter-spacing: 0.3em;
   }
   #record .recordList {
      max-width: 500px;
      margin: 4rem auto 0;
      grid-template-columns: 1fr;
      gap: 40px;
   }
   #record .recordName {
      min-height: auto;
      margin-top: 1rem;
   }
}

/* 
====================================
Field Chip Greentea
====================================
 */
#chip {
   padding: 11rem 0 7rem;
   color: #000;
}
#chip .chipTitle {
   max-width: 695px;
   margin: 0 auto;
}
#chip .chipText1 {
   margin: 5rem 0;
   font-size: 1.6rem;
   font-weight: 500;
   text-align: center;
   letter-spacing: 0.2em;
   line-height: 1.9;
}
#chip .chipHeading {
   margin: 7rem 0 4rem;
   padding: 10px 20px;
   color: #fff;
   font-size: min(4.8vw , 2.3rem);
   font-weight: 500;
   letter-spacing: 0.15em;
   text-align: center;
   vertical-align: text-top;
   background: url(../img/chip_text_bg.png) no-repeat;
   background-size: 100% 100%;
}
#chip .chipHeading sup {
   font-size: 0.7em;
   vertical-align: super;
}
#chip .chipText2 {
   margin-top: 3rem;
   font-size: 1.6rem;
   letter-spacing: 0.2em;
   text-align: justify;
}
#chip .chipNote {
   margin-bottom: 0;
   font-size: 1.2rem;
   text-align: end;
   letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
   #chip {
      padding: 5rem 0;
   }
   #chip .chipText1 {
      margin: 3rem 0;
      font-size: 1.4rem;
   }
   #chip .chipText2 {
      font-size: 1.4rem;
   }
   #chip .chipHeading {
      margin: 4rem 0 3rem;
   }
}

/* 
====================================
茶殻リサイクルを通して持続可能な社会へ。
====================================
 */
#recycle {
   padding: 5.7rem 0 7rem;
   background-color: #f0f0f0;
}
#recycle .container {
   width: min(85%, 838px);
}
#recycle .recycleTitle {
   width: fit-content;
   margin: 0 auto;
   padding: 0 0.5em;
   color: #00913a;
   font-size: min(5vw , 2.4rem);
   font-weight: 500;
   letter-spacing: 0.2em;
   border-bottom: 1px solid #00913a;
}
#recycle .image {
   display: block;
   margin-top: 6rem;
}
@media screen and (max-width: 768px) {
   #recycle {
      padding: 5rem 0;
   }
   #recycle .container {
      width: calc(100% - 40px);
   }
   #recycle .recycleTitle {
      text-align: center;
   }
}


/* 残す */
#scSpec {
   padding-top: 120px;
   padding-bottom: min(16vw, 85px);

}

.infoBorderBox {
   border: 4px solid #006837;
   color: #251E1C;
   padding: 25px min(2.2vw, 25px) 36px;
}

.infoBorderBox .ttlCenter {
   color: #006837;
   line-height: 1;
   margin-bottom: 0.65em;
}

.infoBorderBox .ttlCenter+p {
   font-size: min(4.5vw, 2rem);
   line-height: 1.7;
   margin-bottom: 0.3em;
}

.pageBt a.btnMailContact,
a.btnResultsMore {
   display: block;
   font-family: "Noto Sans";
   text-align: center;
   font-size: min(4vw, 2rem);
   font-weight: bold;
   letter-spacing: 0.2em;
   color: #FFF;
   background: linear-gradient(60deg, #198349 0%, #004119 100%);
   background: -webkit-linear-gradient(30deg, #198349 0%, #004119 100%);
   padding: 12px;
   margin: 0 auto;
}

.pageBt a.btnMailContact {
   width: min(80%, 500px);
}

.pageBt .infoBorderBox .small {
   font-size: 1.4rem;
   margin: 1.1em 0 0;
}



@media screen and (max-width: 1500px) {
   #scDevelopment .txtLeft {
      transform: translateX(-9vw);
   }
}

@media screen and (max-width: 987px) {
}

@media screen and (max-width: 768px) {
   .mvSl .slItem img {
      height: 100%;
      object-fit: cover;
   }
   /* .mv .mvImage {
      display: block;
      width: 100%;
      height: 500px;
      overflow: hidden;
   }
   .mv .mvImage img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
   } */
   /* .mv .mvText {
   } */
}


@media screen and (max-width: 600px) {
   /* #g_header {
      height: auto;
   }

   .pageBt {
      font-size: 1.4rem;
   }

   .pageBt a.btnMailContact {
      width: min(100%, 500px);
   }

   .spInline {
      display: inline;
   }

   .dFlexSp,
   .spBlock {
      display: block;
   }

   .spNone {
      display: none !important;
   } */

   #scSpec {
      padding-top: 60px;
   }

   .infoBorderBox {
      border: 4px solid #006837;
      color: #251E1C;
      padding: 30px 4vw;
   }

   .infoBorderBox .ttlCenter {
      text-align: center;
      font-size: 2.8rem;
      line-height: 1;
      letter-spacing: 0.15em;
      color: #006837;
      margin-bottom: 0.65em;
   }

   .infoBorderBox .small {
      font-size: 1.4rem;
      margin: 1.1em 0 0;
   }
}