/*Font Awesome Fonts*/
@font-face {
  font-family: "FontAwesome";
  src: url("font-awesome/fontawesome-webfont.ttf") format("truetype");
}
/* 依存タグクリア */
h1,h2,h3,h4,h5,h6{
  background-color: transparent;
  border-radius: 0;
  margin: auto;
  color:#5A5A5A;
  border: none;
}
/* ==========================================================================*/
/*【共通設定（アクティビティページのみ）】*/
/* ==========================================================================*/
html { scroll-behavior: smooth;}

body {
  font-family: "Zen Kaku Gothic New", sans-serif,"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Helvetica, Arial, Verdana, sans-serif;
  color:#5A5A5A;
  font-size: 1.6em;
}

h1{
  font-size: 1.8em;
}

h2{
  font-size: 1.8em;
  color:#63810A;
}

.banner {
  display: flex;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: #DDE6CC; 
}

.banner-line {
  width: 50px; 
  height: 1px;
  background-color: #DDE6CC; 
  margin-right: 10px; 
}


.banner-text {
  color: #DDE6CC;
  white-space: nowrap;
  font-size: 1em;
  padding: 0;
  margin: 0;
}

.latest{
  padding-top: 1rem;
}

.latest-news{
  border-radius: 0 30px 30px 0;
}

h3{
  position: relative;
  background: #E6F2E2;
  font-size: 1.6em;
  border-radius: 0 10px 10px 0;
  margin: 0 0 1rem 1.5rem;
}

/* 農場全体色分け */
.latest{
  h3{
    background: linear-gradient(90deg, #CEE8FE, #E9F8E8);
    /* color: #fff; */
  }
}

/* 地域課題解決色分け */
#re{
  h2{
  color: #e4a932;
  }

  .banner-text,.banner{
    color: #F3E6CB;
  }

  .banner-line{
    background-color: #F3E6CB;
  }

  .second li{
    border-bottom: 2px dashed #F3E6CB;
  }

  h3,.ac-label{
    background: #F3E6CB;
  }

  .latest-news::before{
    background: #e4a932;;
  }

  .ac-label:after{
    color: #e4a932;
  }

  h5::before{
    border-left: 8px solid #e4a932;  
  }

  /* 区切り線 */
  .ac-border{
    border-top: 1px solid #e4a932;
  }
}

/* 地域PBLレポート（活動報告）色分け */
#pbl-pj {
  h2{
  color: #c95e5e;
  }

  .banner-text{
    color: #f3cbcb;
  }

  .banner-line{
    background-color: #f3cbcb;
  }

  .second li{
    border-bottom: 2px dashed #f3cbcb;
  }

  .pbl-label{
    background: #D4F0D3;
  }
}

.h4-requirement{
  padding: 1rem 0 .5rem 0; 
  font-size: 1.2em;
}

.h4-intro{
  font-size: 1.6rem;
  color: #63810A;
}

.h4-intro-font{
  font-size: 1.1rem;
}

h5{
  position: relative;
  padding: 0 0 0 16px;
}

h5::before{
  content: "";
  position: absolute;
  top: 50%;   
  left: 0;
  transform: translateY(-50%); 
  border: 5px solid transparent;
  border-left: 8px solid #A2D592;  
}

.news-icon{
  position: relative;
  z-index: 999;
  left: -30px;
  top: -4px;
  width: 2rem;
}

.latest-news::before{
  content:"";
  display: inline-block;
  position: absolute;
  padding: 0em;
  background: #B6DCFF;
  font-weight: 900;
  width: 50px;
  text-align: center;
  height: 50px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: solid 3px white; 
  border-radius: 50%;
}

/* アコーディオン */
.ac-checkbox{
  display: none;
}

.ac-label {
   background: #CFE8FE;
  display: block;
  padding: 10px;
  font-size: 1.4em;
  font-weight: bold;
  border-radius: 30px;
  padding-left: 2rem;
  position: relative;
  margin-bottom: 1rem;
}


.pbl-label{
  background: #CFE8FE;
  display: block;
  padding: 10px;
  font-size: 1.4em;
  font-weight: bold;
  border-radius: 30px;
  padding-left: 2rem;
  position: relative;
  margin-bottom: 1rem;
}


#ac-label{
  margin-top: 3rem;
}

.ac-wrapper .ac-label:after{
  /* color: #5aa925; */
  box-sizing: border-box;
  content: '\f067';
  display: block;
  font-family: 'Font Awesome 6 Free';
  vertical-align: middle;
  position: absolute;
  right: 20px;
  top: 10px;
}

.ac-content{
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: .5s;
  visibility: hidden;
  font-size: 1.2em;
}

.ac-checkbox:checked + .ac-label:after{
  content: '\f068';
}

.ac-checkbox:checked + .ac-label + .ac-content{
  height: 100%;
  opacity: 1;
  padding: 10px;
  visibility: visible;
  margin-bottom: 3rem;
}

.container{
  font-size: 1.7em;
}

ul li{
  list-style: none;
}

a {
  color: inherit;
}

a:hover{
  font-weight: normal;
  color: #CDCDCD;
}

.ac-content a{
  color: rgb(34, 34, 163);
  text-decoration:underline;
}

.ac-content a:hover{
  opacity: .7;
}


#centercolumn_1column{
  overflow: visible;
}

.ac-wrapper{
  margin-top: 5.5rem;
  counter-reset: number 0;
}


/* ==========================================================================*/
/*【本文（アクティビティページのみ）】*/
/* ==========================================================================*/

.breadcrumbs{
  line-height: 2em;
}

.header-ac-pc{
  width: 100%;
}

/* btn */
.ac-container{
  padding-top: 3rem;
}

.ac-container-sub{
    display: flex;
    justify-content: center;
}

.ac-btn{
  position: relative;
}

.ac-container-sub a{
  padding: 1rem;
  border-radius: 30px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  margin: .5rem;
}

#ac-link-forest{
  background: #E6F2E2;
  width: calc(100%/3);
}

#ac-link-bulb{
  background: #F3E6CB;
  width:calc(100%/3);
}

#ac-link-shoot{
  background: #e2f1f2;
  width:calc(100%/3);
}

.ac-container-sub a:hover{
  opacity: 0.7;
}

.ac-container-sub dt{
  text-align: center;
}

.ac-container-sub dd{
  position: relative;
  border-radius: 23px;
  margin: -32px auto 0 auto;
  padding: 5px 8px;
  font-weight: bold;
  color: #fff;
  z-index: 1;
  text-align: center;
}

#ac-title-forest{
  background-color: #8ACC75;
}

#ac-title-bulb{
  background-color: #E5BD6F;
}

#ac-title-shoot{
  background-color: #8EC8C0;
  width: 15rem;
}

.ac-caret{
  width: 2rem;
  margin: auto;
  display: block;
}

#ac-caret-forest{
  filter: invert(88%) sepia(9%) saturate(1141%) hue-rotate(57deg) brightness(94%) contrast(88%);
}

#ac-caret-bulb{
  filter: invert(100%) sepia(21%) saturate(6316%) hue-rotate(319deg) brightness(95%) contrast(89%);
}

#ac-caret-shoot{
  filter: invert(81%) sepia(43%) saturate(220%) hue-rotate(122deg) brightness(88%) contrast(85%);
  width: 1.8rem;
  padding-top: .5rem;
}

/* 農場とは */
.speech-bubble {
  display: inline-block;
  padding: 15px 40px;
  font-size: 1.5em;
  /* color: white; */
  background: linear-gradient(90deg, #CEE8FD, #CCF3CB);
  border-radius: 20px;
  position: relative;
  font-weight: bold;
  margin-bottom: 1rem;
  z-index: 999;
  position: relative;
  top: 40px;
}


.speech-bubble p {
 font-size: 1.2em;
}

.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 40%;
    width: 20px;
    height: 17px;
    background: linear-gradient(90deg, #CEE8FD, #CCF3CB);
    transform: rotate(85deg);
    clip-path: polygon(0 0, 100% 0, 0 110%);
}

.about-box{
  position: relative;
  background: linear-gradient(to right, #cee9fd, #ccf2cb);
  border-radius: 30px;
  padding: 4rem;
  z-index: -1;
}

.about-box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 30px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  z-index: -1;
}

.about-box p{
  width: fit-content;
  margin: 0 auto;
  text-align: left;
  font-size: 1.2em;
}
.photo-1 {
  display: flex;
  justify-content: center;
  gap: 3.1rem;
 margin-bottom: 2rem;
}

.photo-1 img {
  width: 100%;
  height: auto;
}

.photo-area {
  margin-top: 1.5em;
}

.about-box span{
  color: #5aa925;
  font-weight: bold;
}

.clearfix .weight{
  font-weight: bold;
  color: rgb(48, 48, 48);
}


#en-text{
  color: #5aa925;
}

#re-text{
  color: #e1a02f;
}

#haguruma-text{
  color: #2aa494;
}

.fream-box {
	  padding: 30px;
    position: relative;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    background: linear-gradient(90deg, #5aa925 0%, #e1a02f 100%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 60%;
    margin: 0 auto;
}

.fream-box::before, .fream-box::after {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
}

.fream-box::before {
	border-left: solid .3rem #5aa925;
	border-top: solid .3rem #5aa925;
	top: 0;
	left: 0;
}

.fream-box::after {
	border-right: solid .3rem #e1a02f;
	border-bottom: solid .3rem #e1a02f;
	bottom: 0;
	right: 0;
}

.sub-title{
  font-size: 1.2rem;
}

.sub-title-sub{
  font-size: 1.2rem;
  font-weight: bold;
  width: 20rem;
  color: #fff;
  background-color: #6BA726;
  margin: 2rem auto auto auto;
}

.inner{
  text-align: center;
}

.check-box{
  text-align: left;
  display: inline-block;
  list-style: none;
  padding: 0;
}

.check-box li{
  position: relative;
  list-style: none;
}

.check-box li::before{
  content: "";
  display: block;
  width: 1rem;
  height: 0.5rem;
  border-left: 2px solid #5aa925;
  border-bottom: 2px solid #5aa925;
  transform: rotate(-45deg);
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
}

.flow{
  background-image: linear-gradient(150deg, rgba(230, 242, 226, 1), rgba(248, 246, 200, 1));
  margin-top: 6rem;
  padding-bottom: 6rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 7.5rem calc(50vw - 50%);

  box-sizing: border-box;
  max-width: calc(100vw - 10px);
}


.flow-box-img{
  width: 100%;
}

#speech-bubble-flow{
  top: -30px;
}

.flow-textbox{
  margin: 0 auto;
  width: 80%;
}

/* 新着news */
.news-one .news-include,.news-two .news-include{
  display: flex;
}

.news-one .news-include{
  padding: 0 2.5rem;
}

.news-category a{
  font-weight: bold;
  border-radius: 30px;
  padding: 0.2rem .6rem 0.2rem 0.6rem;
  margin-right: .8rem;
}

.news-title{
  font-weight: bold;
}


/* カテゴリーごとに色を変える */
.noujou-news-item .news-category>a {
  background-color: #82b92e;
}

.noujou-news-item__news .news-category>a,
.noujou-news-item .news-category>a.noujou-news-tag__news {
  background-color: #82b92e;
}

.noujou-news-item__noujou-news-en .news-category>a,
.noujou-news-item .news-category>a.noujou-news-tag__oujou-news-en {
  background-color: #8ACC75;
}

.noujou-news-item__noujou-news-re .news-category>a,
.noujou-news-item .news-category>a.noujou-news-tag__noujou-news-re {
  background-color: #E5BD6F;
}

.noujou-news-item__noujou-news-pbl .news-category>a,
.noujou-news-item .news-category>a.noujou-news-tag__noujou-news-pbl {
  background-color: #67B7AC;
}

.noujou-news-item__noujou-all .news-category>a,
.noujou-news-item .news-category>a.noujou-news-tag__noujou-all {
  background: linear-gradient(90deg, #A2D592, #E5BD6F);
}

/* 附属農場タグの色　*/
.noujou-news-item .news-category >a.noujou-news-tag__noujou-community {
background-color: #C5EBC6;
}

.noujou-news-item .news-category >a.noujou-news-tag__noujou-education {
  background-color: #F2CECE;
}

.noujou-news-item .news-category >a.noujou-news-tag__noujou-events {
  background-color: #FADE93;
}

.noujou-news-item .news-category >a.news-category { 
background-color: #B6DCFF;
}

.noujou-news-item .news-category >a.noujou-news-tag__noujou-announce {
 background:  linear-gradient(90deg, #CEE7FE, #CCF4CA);
}



.noujou-news-item .news-category >a.noujou-news-tag__noujou-research {
  /* background: linear-gradient(90deg, #A2D592, #E5BD6F); */
  background-color: #B6DCFF;
}


.news-category a:hover{
  opacity: .7;
  color: #fff;
  font-weight: bold;
}

.ac-news{
  display: flex;
  font-size: 1.2em;
}

.news-one{
  width: calc(100vw *(2/5) );
}

.news-one .noujou-news-item__news{
  justify-content: center;
}

.news-two{
  width: calc(100vw *(3/5) );
}

.news-one .news-title{
  padding: .5rem 0 .5rem 2.5rem;
  display: flex;
}

.second li{
  margin: 1em 1.5rem 0 0;
  border-bottom: 2px dashed #DDE6CC;
  margin-right: .5rem;
}


.noujou-news .second .news-include{
  margin-top: .5em;
}

.news-two .news-include{
  padding-bottom: .5rem;
}

.noujou-news-one li{
  text-align: center;
}

.noujou-news-one img{
  width: 80%;
  height: auto;
}

/* 区切り線 */
.ac-border{
  border: 0;
  margin: 2.5rem auto;
  width: 98%;
  border-top: 1px solid #8ACC75;
}

/* ==========================================================================*/
/*【環境科学の社会実践プログラム 】*/
/* ==========================================================================*/
.ac-content-img{
  text-align: center;
}

.ac-content-img img{
  width: 90%;
}


.list-num li:before {
  counter-increment: number 1;
  content: counter(number) " . "; 
}

/* 科目紹介 */
.intro-img{
  background-size:cover;
  background-repeat: no-repeat;
  height: 250px;
  position: relative;
}

.intro-img:nth-child(-n+3){
  margin-top: 1rem;
}

#fuji{
  background-image: url('../images/active-img/int-fuji.jpg');
  background-position: left 80%;
}

#grapes{
  background-image: url('../images/active-img/int-grapes.jpg');
  background-position: left 60%;
}

#pbl{
  background-image: url('../images/active-img/int-pbl.jpg');
  background-position: left 45%;
}

#team{
  background-image: url('../images/active-img/int-team.jpg');
  background-position: left 60%;
}

#explore{
  background-image: url('../images/active-img/int-explore.jpg');
  background-position: left 50%;
}


.intro-title-wrapper{
  height: 80%;
  width: 40%;
  background-color: rgba(255, 255, 255,.8);
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 30px 0 0 0 ;
}

.intro-title-wrapper p{
  margin: 0;
}

.intro-title-include{
  padding: 2.5rem;
}

/* ギャラリー */
.sbi_feedtheme_header_text h3{
  background-color: transparent;
}