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

* {
	margin:0;
	padding:0;
  /*outline: 1px solid #eb5757;*/
}


body {
  font-family: noto-sans-cjk-jp, sans-serif;
  color: #2B2B2B;
  background-image: url(../image/back.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.back {
  position:fixed;
  width:100vw;
  height:100vh;
  object-fit: cover;
}


/* --------------- main --------------- */
.main {
  position: relative;
  width:100%;
}

.green-1 {
  background-color: #0C6E45;
  mix-blend-mode:multiply;
  position: absolute;
  top:0;
  height: 210px;
  width:100%;
}
@media screen and (max-width:757px) {
	.green-1 { height: 110px; }
}


.midashi-narabi {
  position: absolute;
  top:160px;
  width:100%;
}
@media screen and (max-width:757px) {
	.midashi-narabi { top:90px; }
}


/* --------- 農家になる前のこと ----------  */

.child-2{
  width:100vw;
  height:auto;
  position:relative;
  top:300px;
}
@media screen and (max-width:757px) {
	.child-2 { top:220px; }
}

.child-2:before{
  display:block;
  content:'';
  width:100%;
  height:calc(100% + 430px);
  position:absolute;
  top:0px;
  mix-blend-mode:multiply;
  background-color: #0C6E45;
  margin-top:-120px;
  transform: translate3d(0,0,0);
}
@media screen and (max-width:757px) {
	.child-2:before { height:calc(100% + 200px); top:50px; }
}

.yohaku {
  position: static;
  height:220px;
}
@media screen and (max-width:757px) {
	.yohaku { height:100px; }
}

.narabi-2 {
  position: relative;
  width:80vw;
  max-width: 1500px;
  top:0px;
  right:0;
  left:0;
  margin:auto;
  background-image: url(../image/back-2.jpg);
  background-size: 100%;
  background-attachment: fixed;
  padding-left:10vw;
  padding-right:10vw;
  padding-top:100px;
  padding-bottom:100px;
  margin-bottom:380px;
  z-index: 3;
}
@media screen and (max-width:1030px) {
	.narabi-2 { padding-top:30px; padding-left:5vw; padding-right:5vw; width:80vw; max-width:80vw; }
}
@media screen and (max-width:757px) {
	.narabi-2 { padding-top:30px; padding-bottom:50px; padding-left:5vw; padding-right:5vw; width:90vw; max-width:90vw; margin-bottom:350px; }
}



.moji-1 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size: 18px;
  color: #0C6E45 !important;
  text-align: justify;
  font-weight: bold;
  margin-bottom:10px;
  position: relative;
  z-index: 5;
}
@media screen and (max-width:757px) {
	.moji-1 { font-size:16px; margin-bottom:5px; }
}

.moji-1 a {
  color: #0C6E45 !important;
}

.moji-2 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size: 36px;
  color: #0C6E45;
  text-align: justify;
  font-weight: bold;
  margin-bottom:10px;
  position: relative;
  z-index: 5;
}
@media screen and (max-width:757px) {
	.moji-2 { font-size:23px; margin-bottom:5px; line-height: 38px; }
}

.moji-3 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size: 18px;
  color: #0C6E45;
  text-align: justify;
  font-weight: bold;
  margin-bottom:20px;
  position: relative;
  z-index: 5;
}
@media screen and (max-width:757px) {
	.moji-3 { font-size:16px; }
}

.moji-4 {
  display: inline-block;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 15px;
  border: solid 1px #0C6E45;
  border-radius: 5px;
  color:#0C6E45;
  width:auto;
  padding:6px 10px 6px 10px ;
  margin-right:10px;
}
@media screen and (max-width:757px) {
	.moji-4 { font-size: 13px;  padding:5px 9px 5px 9px ; }
}
.moji-4:before {
	content: '#';
  margin-right:3px;
}
.moji-4 a {
  text-decoration: none;
  color:#0C6E45;
}

.moji-5 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:16px;
  line-height: 36px;
  color: #2b2b2b;
  text-align: justify;
}
@media screen and (max-width:757px) {
	.moji-5 { font-size:15px; line-height: 32px; }
}

.sen {
  color: #0C6E45;
  padding: 1rem 0;
  margin-bottom: 0.2rem;
  border-bottom: 5px dotted #0C6E45;
  font-weight: bold;
  margin-bottom:50px;
}
@media screen and (max-width:757px) {
	.sen { border-bottom:3px dotted #0C6E45; padding:0.5rem 0; margin-bottom:30px; }
}

.img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.illust-14 {
  position: absolute;
  top:-260px;
  left:75%;
  right:0;
  margin:auto;
  width:400px;
  z-index:5;
}
@media screen and (max-width:1200px) {
	.illust-14 { width:320px; top:-20%; left:70%; }
}
@media screen and (max-width:1000px) {
	.illust-14 { width:320px; top:-22%; left:55%; }
}
@media screen and (max-width:757px) {
	.illust-14 { display: none; }
}

.illust-15 {
  position: absolute;
  bottom:-150px;
  left:0;
  right:90%;
  margin:auto;
  width:350px;
  z-index:5;
}
@media screen and (max-width:1030px) {
	.illust-15 { width:350px; right:50%; }
}
@media screen and (max-width:757px) {
	.illust-15 { display: none; }
}


.yajirushi-r {
  position: absolute;
  bottom:-200px;
  right:0;
}
@media screen and (max-width:757px) {
	.yajirushi-r { bottom:-100px; width: 300px; text-align:right; }
}

.yajirushi-l {
  position: absolute;
  bottom:-200px;
  left:0;
}
@media screen and (max-width:757px) {
	.yajirushi-l { bottom:-50px; width: 300px; text-align: left; }
}


.yajirushi-moji {
  display: inline-block;
  font-family: poppins, sans-serif;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
  margin-right:5px;
  margin-left:5px;
  color: #fff;
}
@media screen and (max-width:757px) {
	.yajirushi-moji { 
    font-size:13px;
    width: 240px;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle; }
}

.yajirushi-moji a {
  text-decoration: none;
  color: #fff;
}

.yajirushi-hako {
  display: inline-block;
}

.btn002-04-yajirushi-2 {
  position: relative;
  display: block;
  width: 40px;
  height: 1.5px;
  border-radius: 10px;
  background-color: #fff;
  transition: all 0.3s ease;
}
@media screen and (max-width:757px) {
	.btn002-04-yajirushi-2 { width: 30px; }
}

.btn002-04-yajirushi-2::after {
  content: "";
  position: absolute;
  right: -3px;
  display: block;
  width: 13px;
  height: 1.5px;
  border-radius: 10px;
  background-color:  #fff;
  transition: all 0.3s ease;
}

.btn002-04-yajirushi-2::after {
  bottom: 4.5px;
  transform: rotate(45deg);
}

.btn002-04-yajirushi-3 {
  position: relative;
  display: block;
  width: 40px;
  height: 1.5px;
  border-radius: 10px;
  background-color: #fff;
  transition: all 0.3s ease;
}
@media screen and (max-width:757px) {
	.btn002-04-yajirushi-3 { width: 30px; }
}

.btn002-04-yajirushi-3::before {
  content: "";
  position: absolute;
  left: -3px;
  display: block;
  width: 13px;
  height: 1.5px;
  border-radius: 10px;
  background-color:  #fff;
  transition: all 0.3s ease;
}

.btn002-04-yajirushi-3::before {
  bottom: 4.5px;
  transform: rotate(-45deg);
}

.yajirushi-r,
.yajirushi-l {
  text-decoration: none;
  transition: all 0.4s ease;
}
.yajirushi-r:hover,
.yajirushi-l:hover {
  opacity: 0.7;
  transition: all 0.4s ease;
}


/* --------------- ブログ --------------- */
.blog {
  position: relative;
  top:200px;
}
@media screen and (max-width:757px) {
	.blog { top:0px; }
}

.green-3 {
  position: relative;
  width:auto;
  height: 970px;
  mix-blend-mode:multiply;
}
@media screen and (max-width:757px) {
	.green-3 { height:620px; }
}

.blog-narabi {
  position: absolute;
  top:0;
}


.blog-yajirushi {
  position: absolute;
  top:180px;
  right:100px;
}
@media screen and (max-width:757px) {
	.blog-yajirushi { top:100px; right:10%; }
}


.blog-yajirushi-moji {
  display: inline-block;
  font-family: poppins, sans-serif;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
  margin-right:5px;
  color:#0C6E45;
}

.blog-yajirushi-hako {
  display: inline-block;
}

.btn002-04-yajirushi {
  position: relative;
  display: block;
  width: 40px;
  height: 1.5px;
  border-radius: 10px;
  background-color: #0C6E45;
  transition: all 0.3s ease;
}
.btn002-04-yajirushi::after {
  content: "";
  position: absolute;
  right: -3px;
  display: block;
  width: 13px;
  height: 1.5px;
  border-radius: 10px;
  background-color: #0C6E45;
  transition: all 0.3s ease;
}

.btn002-04-yajirushi::after {
  bottom: 4.5px;
  transform: rotate(45deg);
}

.blog-ichiran {
  width:100%;
  margin-top:200px;
}
@media screen and (max-width:757px) {
	.blog-ichiran { margin-top:100px; }
}

.blog-scroll {
  display: flex;
  width: 90vw;
  height: 430px;
  margin-left:10vw;
  overflow-x: scroll;
}
@media screen and (max-width:757px) {
	.blog-scroll {height:350px;}
}

.blog-hako {
  display: inline-block;
  width:300px;
  margin:20px;
  flex-shrink: 0;
}
@media screen and (max-width:757px) {
	.blog-hako { width:225px; margin:15px; }
}

.blog-img {
  width: 300px;
  margin-bottom:20px;
  overflow:hidden;
  transition: all 0.4s ease;
  border-radius: 20px;
}
@media screen and (max-width:757px) {
	.blog-img { width:225px; }
}

.blog-img img {
  border-radius: 20px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: all 0.4s ease;
}
.blog-img img:hover {
  transform: scale(1.1);
  transition: all 0.4s ease;
}

.blog-moji-1 {
  display: inline-block;
  font-family: poppins, sans-serif;
  font-weight: bold;
  font-size: 14px;
  color:#0C6E45;
  text-decoration: none;
}
.blog-moji-1 a {
  color:#0C6E45;
  text-decoration: none !important;
}


.blog-moji-2 {
  display: inline-block;
  font-family: poppins, sans-serif;
  font-weight: bold;
  font-size: 14px;
  color:#0C6E45;
}

.blog-moji-3 {
  display: inline-block;
  font-family: poppins, sans-serif;
  font-weight: bold;
  font-size: 14px;
  color:#0C6E45;
}

.blog-moji-4 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 18px;
  color:#0C6E45;
  margin-top:6px;
  line-height: 32px;
  display: block;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (max-width:757px) {
	.blog-moji-4 { font-size: 16px; }
}

.blog-moji-5 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 13px;
  border: solid 1px #0C6E45;
  border-radius: 5px;
  color:#0C6E45;
  width:auto;
  padding:6px 10px 6px 10px ;
  margin-top:20px;
  margin-right:10px;
  display: inline-block;
}
.blog-moji-5:before {
	content: '#';
  margin-right:3px;
}
.blog-moji-5 a {
  text-decoration: none;
  color:#0C6E45;
}

.blog-a {
  text-decoration: none !important;
}
.blog-a:hover {
  opacity: 0.7;
}

.tag {
  display: block;
}

a {
  text-decoration: none !important;
}


h2 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size: 30px;
  color: #0C6E45;
  text-align: justify;
  font-weight: bold;
  margin-top:30px;
  margin-bottom:10px;
  line-height: 1.4;
  position: relative;
  padding-bottom: 10px;
}
@media screen and (max-width:757px) {
	h2 { font-size: 25px; }
}
h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background-image: repeating-linear-gradient(45deg, #0C6E45 0px, #0C6E45 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 8px 8px;
}

h3 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size: 20px;
  color: #0C6E45;
  text-align: justify;
  font-weight: bold;
  margin-top:30px;
  margin-bottom:10px;
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}
@media screen and (max-width:757px) {
	h3 { font-size: 18px; }
}
h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\1F331";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 22px;
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #0C6E45; /*アイコン色*/
  font-weight: 900;
}
@media screen and (max-width:757px) {
	h3:before { font-size: 18px; }
}

figure {
  margin-top:30px;
  margin-bottom:40px;
}

/* --------------- カテゴリ --------------- */
.blog-2 {
  position: relative;
  top:280px;
}
@media screen and (max-width:757px) {
	.blog-2 { top:200px; }
}

.cate-midashi {
  position: absolute;
  top:150px;
  left:10%;

  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size: 30px;
  color: #0C6E45 !important;
  text-align: justify;
  font-weight: bold;
}
@media screen and (max-width:757px) {
	.cate-midashi { top:50px; font-size: 20px; }
}

.cate-midashi a {
  color: #0C6E45 !important;
  text-decoration: none;
}

.blog-yajirushi-2 {
  position: absolute;
  top:150px;
  right:100px;
}
@media screen and (max-width:757px) {
	.blog-yajirushi-2 { top:50px; right:10%; }
}

.green-3-2 {
  position: relative;
  width:auto;
  height: 1020px;
  mix-blend-mode:multiply;
}
@media screen and (max-width:757px) {
	.green-3-2 { height:720px; }
}