@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-size: 100%;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

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


/* --------------- main --------------- */
.main {
  position: relative;
  height:1250px;
  width:100%;
}
@media screen and (max-width:757px) {
	.main { height:950px; }
}

.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; }
}


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

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


/* --------- メッセージ ----------  */
.message {
  position: absolute;
  top:550px;
  right:0;
  left:0;
  margin:auto;
  text-align: center;
}
@media screen and (max-width:1030px) {
	.message { top:550px; }
}
@media screen and (max-width:757px) {
	.message { top:320px; }
}

.message-moji {
  display: inline-block;
  text-align: left;
}
_::-webkit-full-page-media, _:future, :root .message-moji {
	display: block;
}

.message-moji p {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:22px;
  line-height: 80px;
  letter-spacing: 1px;
  color: #fff;

  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  right:0;
  left:0;
  margin:auto;
}
@media screen and (max-width:757px) {
	.message-moji p { font-size:16px; line-height: 45px; writing-mode:lr-tb; text-align: center; }
}


.illust-1 {
  position: absolute;
  left:50px;
  bottom:30px;
  width: 370px;
}
@media screen and (max-width:1030px) {
	.illust-1 { left:0; right:0; margin:auto; bottom:20px; width:30%; }
}
@media screen and (max-width:757px) {
	.illust-1 { left:0; right:0; margin:auto; bottom:20px; width:45%; }
}


/* --------- 農家になる前のこと ----------  */
.child{
  width:100vw;
  height:auto;
  position:relative;
}

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

.child-2{
  width:100vw;
  height:auto;
  position:relative;
}

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

.child-3{
  width:100vw;
  height:auto;
  position:relative;
}

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

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


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

.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-attachment: fixed;
  background-size: 100%;
  padding-left:10vw;
  padding-right:10vw;
  padding-top:100px;
  padding-bottom:20px;
  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-left:5vw; padding-right:5vw; width:90vw; max-width:90vw; }
}

.moji-1 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size: 30px;
  color: #0C6E45;
  text-align: center;
  padding: 1rem 0;
  margin-bottom: 0.2rem;
  border-bottom: 5px dotted #0C6E45;
  font-weight: bold;
}
@media screen and (max-width:757px) {
	.moji-1 { font-size:22px; border-bottom:3px dotted #0C6E45; padding:0.5rem 0; }
}

.moji-1-b {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size: 30px;
  color: #0C6E45;
  text-align: center;
  padding: 1rem 0;
  margin-bottom: 0.2rem;
  border-bottom: 5px dotted #0C6E45;
  font-weight: bold;
}
@media screen and (max-width:1000px) {
	.moji-1-b { width: 80%; right:0; left:0; margin:auto; }
}
@media screen and (max-width:757px) {
	.moji-1-b { font-size:22px; border-bottom:3px dotted #0C6E45; padding:0.5rem 0; width: 80%; right:0; left:0; margin:auto; }
}


.narabi-hako {
  margin-top:80px;
}
@media screen and (max-width:757px) {
	.narabi-hako { margin-top:30px; }
}


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

.moji-3 {
  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-3 { font-size:15px; line-height: 32px; }
}

.container {
  width: 100%;
  margin: 0 auto;
}

.flex {
  display: flex;
  align-items: center;
  margin-top:50px;
  margin-bottom:100px;
}
@media screen and (max-width:1000px) {
	.flex { display:block; margin-top:30px; margin-bottom:50px; }
}
@media screen and (max-width:757px) {
	.flex { display:block; margin-top:30px; margin-bottom:50px; }
}

.flex:nth-child(odd) {
  flex-flow: row-reverse;
}

.flex:nth-child(odd) .img-area {
  margin-right: calc(50% - 50vw);
  margin-left: 5vw;
}
@media screen and (max-width:1000px) {
	.flex:nth-child(odd) .img-area { margin-left: 0vw; }
}
@media screen and (max-width:757px) {
	.flex:nth-child(odd) .img-area { margin-left: 0vw; }
}

.flex:nth-child(even) .img-area {
  margin-left: calc(50% - 50vw);
  margin-right: 5vw;
}
@media screen and (max-width:1000px) {
	.flex:nth-child(even) .img-area { margin-right: 0vw; }
}
@media screen and (max-width:757px) {
	.flex:nth-child(even) .img-area { margin-right: 0vw; }
}

.flex:nth-child(odd) .img-area img {
  border-radius: 20px 0 0 20px;
}

.flex:nth-child(even) .img-area img {
  border-radius: 0 20px 20px 0;
}

.img-area {
  width: 40vw;
  z-index: 2;
}
@media screen and (max-width:1000px) {
	.img-area { width: 85vw; margin-bottom:30px; }
}
@media screen and (max-width:757px) {
	.img-area { width: 90vw; margin-bottom:20px; }
}


.img-area img {
  height:380px;
  width:100%;
  object-fit: cover;
}
@media screen and (max-width:1000px) {
	.img-area img { height:300px; }
}
@media screen and (max-width:757px) {
	.img-area img { height:200px; }
}


.text-area {
  flex: 1;
  width: 40vw;
}
@media screen and (max-width:1000px) {
	.text-area { width: 100%; }
}
@media screen and (max-width:757px) {
	.text-area { width: 100%; }
}



/* --------- ゼロから始める有機栽培 ----------  */
.narabi-4{
  position: relative;
  margin-top:200px;
  padding-bottom:50px;
  background-color: #ffffff32;
}
@media screen and (max-width:757px) {
	.narabi-4 { margin-top:50px; }
}


.img-max {
  width: 100vw;
  height:450px;
  object-fit:cover;
}
@media screen and (max-width:757px) {
	.img-max { height:200px; }
}

.zero {
  width:80vw;
  right:0;
  left:0;
  margin:auto;
  margin-top:100px;
}
@media screen and (max-width:757px) {
	.zero { margin-top:50px; }
}

.zero-hako-1 {
  display: inline-block;
  vertical-align: top;
  width:50%;
  margin-right:9%;
  margin-top:70px;
}
@media screen and (max-width:1000px) {
	.zero-hako-1 { width:100%; margin-top:30px; }
}
@media screen and (max-width:757px) {
	.zero-hako-1 { width:100%; margin-top:30px; }
}

.zero-hako-2 {
  display: inline-block;
  vertical-align: top;
  width:40%;
  margin-top:70px;
}
@media screen and (max-width:1000px) {
	.zero-hako-2 { width:100%; margin-top:30px; }
}
@media screen and (max-width:757px) {
	.zero-hako-2 { width:100%; margin-top:30px; }
}

.zero-hako-3 {
  width:100%;
  margin-top:50px;
}
@media screen and (max-width:1000px) {
	.zero-hako-3 { margin-top:30px; }
}
@media screen and (max-width:757px) {
	.zero-hako-3 { margin-top:30px; }
}

.img-zero {
  display: block;
  width: 100%;
  height:280px;
  object-fit: cover;
  margin-bottom:40px;
  border-radius: 20px;
}
@media screen and (max-width:1000px) {
	.img-zero { display: inline-block; width:46%; height:200px; margin:1.5%; margin-bottom:25px; }
}
@media screen and (max-width:757px) {
	.img-zero { display:block; width:100%; height:200px; margin-bottom:25px; }
}

.img-zero-2 {
  width: 100%;
  max-width: 1000px;
  right:0;
  left:0;
  margin:auto;
  margin-top:50px;
}
@media screen and (max-width:757px) {
	.img-zero-2 { display:none; }
}

.img-zero-2-sp {
  display:none;
}
@media screen and (max-width:757px) {
	.img-zero-2-sp { 
    display: block;
    width: 100%;
    right:0;
    left:0;
    margin:auto;
    margin-top:50px;
   }
}


/* --------- サカズキファームのこだわり ----------  */
.narabi-5 {
  position: relative;
  width:100%;
  right:0;
  left:0;
  margin:auto;
  padding-top:100px;
  padding-bottom:40px;
  padding-right:10%;
  padding-left:10%;
  background-color: #ffffff32;
}
@media screen and (max-width:1000px) {
	.narabi-5 { padding-top:120px; padding-right:0%; padding-left:0%; width:100vw; }
}
@media screen and (max-width:757px) {
	.narabi-5 { padding-top:120px; padding-right:0%; padding-left:0%; width:100vw; }
}

.container-b {
  width: 100%;
  margin: 0 auto;
}

.flex-b {
  display: flex;
  align-items: center;
  margin-top:50px;
  margin-bottom:100px;
}
@media screen and (max-width:1000px) {
	.flex-b { display:block; margin-top:30px; margin-bottom:50px; }
}
@media screen and (max-width:757px) {
	.flex-b { display:block; margin-top:30px; margin-bottom:50px; }
}

.flex-b:nth-child(odd) {
  flex-flow: row-reverse;
}

.flex-b:nth-child(odd) .img-area-b {
  margin-right: calc(50% - 50vw);
  margin-left: 5vw;
}
@media screen and (max-width:1000px) {
	.flex-b:nth-child(odd) .img-area-b { margin-left: 10vw; }
}
@media screen and (max-width:757px) {
	.flex-b:nth-child(odd) .img-area-b { margin-left: 10vw; }
}

.flex-b:nth-child(even) .img-area-b {
  margin-left: calc(50% - 50vw);
  margin-right: 5vw;
}
@media screen and (max-width:1000px) {
	.flex-b:nth-child(even) .img-area-b { margin-right: 10vw; }
}
@media screen and (max-width:757px) {
	.flex-b:nth-child(even) .img-area-b { margin-right: 10vw; }
}

.flex-b:nth-child(odd) .img-area-b img {
  border-radius: 20px 0 0 20px;
}

.flex-b:nth-child(even) .img-area-b img {
  border-radius: 0 20px 20px 0;
}

.img-area-b {
  width: 40vw;
  z-index: 2;
}
@media screen and (max-width:1000px) {
	.img-area-b { width: 90vw; margin-bottom:20px; }
}
@media screen and (max-width:757px) {
	.img-area-b { width: 90vw; margin-bottom:20px; }
}


.img-area-b img {
  height:380px;
  width:100%;
  object-fit: cover;
}
@media screen and (max-width:1000px) {
	.img-area-b img { height:300px; }
}

@media screen and (max-width:757px) {
	.img-area-b img { height:200px; }
}

.text-area-2 {
  position: relative;
  flex: 1;
  width: 40vw;
  margin-top:50px;
}
@media screen and (max-width:1000px) {
	.text-area-2 { width: 80vw; right:0; left:0; margin:auto; }
}
@media screen and (max-width:757px) {
	.text-area-2 { width: 80vw; right:0; left:0; margin:auto; }
}

.text-area-3 {
  position: relative;
  width: 80vw;
  margin-top:50px;
}
@media screen and (max-width:1000px) {
	.text-area-3 { width:80vw; right:0; left:0; margin:auto; margin-top:100px; }
}
@media screen and (max-width:757px) {
	.text-area-3 { width:80vw; right:0; left:0; margin:auto; margin-top:100px; }
}



.moji-suuji {
  font-family: poppins, sans-serif;
  font-weight: 700;
  font-size: 100px;
  color:#fff;
  letter-spacing:8px;
  position:absolute;
  top:-80px;
  z-index: 0;
}
@media screen and (max-width:757px) {
	.moji-suuji { font-size:70px; top:-55px; letter-spacing:5px; }
}


.plants-hako {
  display: inline-block;
  width:29%;
  margin:2%;
  vertical-align: top;
}
@media screen and (max-width:1000px) {
	.plants-hako { width:100%; margin:auto; margin-top:30px; margin-bottom:10px; }
}
@media screen and (max-width:757px) {
	.plants-hako { width:100%; margin:auto; margin-top:30px; margin-bottom:10px; }
}

.plants-hako img {
  border-radius: 20px;
}
@media screen and (max-width:1000px) {
	.plants-hako img { height:280px; width:100%; object-fit: cover; }
}
@media screen and (max-width:757px) {
	.plants-hako img { height:220px; width:100%; object-fit: cover; }
}
 
.moji-4 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size: 18px;
  color: #2b2b2b;
  text-align: center;
  font-weight: bold;
  margin-top:20px;
}
@media screen and (max-width:757px) {
	.moji-4 { margin-top:10px; }
}

.moji-5 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size: 18px;
  color: #0C6E45;
  text-align: justify;
  padding: 0.5rem 0;
  margin-bottom: 0.3rem;
  border-bottom: 3px dotted #0C6E45;
  font-weight: bold;
}
@media screen and (max-width:757px) {
	.moji-5{ font-size: 15px; border-bottom: 2px dotted #0C6E45; margin-top:30px; }
}
 
.moji-6 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:14px;
  line-height: 30px;
  color: #2b2b2b;
  text-align: justify;
  margin-top:5px;
}
@media screen and (max-width:757px) {
	.moji-6 { margin-top:0px; line-height:28px; }
}




/* --------- 自然と人 ----------  */
.sizen {
  position: relative;
  height:auto;
  width:100%;
  object-fit: cover;
  background-image: url(../image/ayumi-img-2.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  padding-top:150px;
  padding-bottom:150px;
  margin-top:200px;
}
@media screen and (max-width:757px) {
	.sizen { background-attachment:	scroll; padding-top:100px; padding-bottom:100px; margin-top:100px; }
}

.sizen-siro {
  background-color: #ffffff9d;
  width: 80vw;
  height:auto;
  right:0;
  left:0;
  margin:auto;
  padding: 100px 10vw 100px 10vw;
}
@media screen and (max-width:757px) {
	.sizen-siro { padding: 50px 5vw 50px 5vw; width: 90vw; }
}

.moji-7 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:17px;
  line-height: 45px;
  color: #2b2b2b;
  text-align: justify;
  margin-top:50px;
}
@media screen and (max-width:757px) {
	.moji-7 { font-size:14px; line-height: 32px; margin-top:30px; }
}

.moji-8 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size: 28px;
  color: #0C6E45;
  text-align:center;
  font-weight: bold;
  margin-top:50px;
  position: relative;
  letter-spacing: 2px;
}
@media screen and (max-width:757px) {
	.moji-8 { font-size: 20px; line-height:35px; margin-top:30px; }
}


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



.rerative {
  position: relative;
}

.illust-6 {
  position: absolute;
  bottom:-10%;
  left:73%;
  right:0;
  margin:auto;
  width:350px;
  z-index:5;
}
@media screen and (max-width:1030px) {
	.illust-6 { width:350px; left:50%; }
}
@media screen and (max-width:757px) {
	.illust-6 { width:200px; bottom:-3%; left:45%; }
}

.illust-7 {
  position: absolute;
  bottom:-11%;
  left:0;
  right:80%;
  margin:auto;
  width:250px;
  z-index:5;
}
@media screen and (max-width:757px) {
	.illust-7 { width:150px; bottom:-5%; right:50%; }
}

.illust-8 {
  position: absolute;
  top:calc(450px + 3%);
  left:85%;
  right:0;
  margin:auto;
  width:90px;
  z-index:5;
}
@media screen and (max-width:757px) {
	.illust-8 { width:50px; top:calc(180px + 2%); left:80%; }
}

.illust-9 {
  position: absolute;
  top:-2%;
  left:0;
  right:75%;
  margin:auto;
  width:260px;
  z-index:5;
}
@media screen and (max-width:1000px) {
	.illust-9 { width:230px; top:-1%; right:60%; }
}
@media screen and (max-width:757px) {
	.illust-9 { width:150px; top:-1%; right:50%; }
}

.illust-10 {
  position: absolute;
  top:-5%;
  left:90%;
  right:0;
  margin:auto;
  width:140px;
  z-index:5;
}
@media screen and (max-width:1000px) {
	.illust-10 { width:100px; top:1%; left:85%; }
}
@media screen and (max-width:757px) {
	.illust-10 { width:80px; top:2%; left:80%; }
}

.illust-11 {
  position: absolute;
  bottom:-40%;
  left:0;
  right:90%;
  margin:auto;
  width:160px;
  z-index:5;
}
@media screen and (max-width:1000px) {
	.illust-11 { bottom:-20%; right:70%; }
}
@media screen and (max-width:757px) {
	.illust-11 { width:100px; bottom:-20%; right:50%; }
}

.illust-12 {
  position: absolute;
  top:-8%;
  left:90%;
  right:0;
  margin:auto;
  width:140px;
  z-index:5;
}
@media screen and (max-width:1000px) {
	.illust-12 { top:-5%; left:80%; }
}
@media screen and (max-width:757px) {
	.illust-12 { width:80px; top:-4%; left:80%; }
}

.illust-13 {
  position: absolute;
  bottom:-10%;
  left:0;
  right:90%;
  margin:auto;
  width:320px;
  z-index:5;
}
@media screen and (max-width:1000px) {
	.illust-13 { width:280px; bottom:-7%; right:90%; }
}
@media screen and (max-width:757px) {
	.illust-13 { width:200px; bottom:-4%; right:50%; }
}