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

.green-1 {
  height:calc(100vh + 50px);
  background-color: #0C6E45;
  mix-blend-mode:multiply;
}


/* --------- ファーストビュー ----------  */
.first {
  position: absolute;
  top:50px;
  left:50px;
  width: calc(100vw - 50px);
  height: calc(100vh - 50px);
}
@media screen and (max-width:757px) {
	.first { top:20px; left:20px; width: calc(100% - 20px); height: calc(100vh - 50px); }
}

/* メイン画像スライド */
.fadeslide {
	position: relative;
  width:calc(100vw - 50px);
  height:calc(100vh - 50px);
	overflow: hidden;
	z-index: 0;
}
@media screen and (max-width:757px) {
	.fadeslide { width:100%; height: calc(100vh - 50px);}
}

.fadeslide div img {
  width:calc(100vw - 50px);
  height:100vh;
  object-fit: cover;
}
@media screen and (max-width:757px) {
	.fadeslide div img { width:100%; object-position: 50% 100%; object-fit: cover;}
}

.fadeslide div {
	position: absolute;
	top: 0;
	left: 0;
}

.fadeslide div:nth-of-type(1) {
	animation: fadeslide 30s 0s infinite both;
	z-index: 6;
}

.fadeslide div:nth-of-type(2) {
	animation: fadeslide 30s 5s infinite both;
	z-index: 5;
}

.fadeslide div:nth-of-type(3) {
	animation: fadeslide 30s 10s infinite both;
	z-index: 4;
}

.fadeslide div:nth-of-type(4) {
	animation: fadeslide 30s 15s infinite both;
	z-index: 3;
}

.fadeslide div:nth-of-type(5) {
	animation: fadeslide 30s 20s infinite both;
	z-index: 2;
}

.fadeslide div:nth-of-type(6) {
	animation: fadeslide 30s 25s infinite both;
	z-index: 1;
}

@keyframes fadeslide {
	0% { left: 0; opacity: 0; }
	5% { left: 0; opacity: 1; }
	20% { left: 0; opacity: 1; }
	25% { left: 0; opacity: 0; }
	26% { left: 100%; opacity: 0; }
	100% { left: 100%; opacity: 0; }
}


/* メイン画像イラスト */
.illust-1 {
  position: absolute;
  left:50px;
  bottom:20px;
  width: 370px;
}
@media screen and (max-width:757px) {
	.illust-1 { left:20px; width:70%; }
}

/* --- 社名 ---  */
.narabi-0 {
  position: absolute;
  left:100px;
  top:80px;
}
@media screen and (max-width:1030px) {
	.narabi-0 { left:50px; top:50px; }
}
@media screen and (max-width:757px) {
	.narabi-0 { left:30px; top:30px; }
}

.Header-Logo-0 {
  text-decoration: none;
  color:#fff;
}

.logo-moji-1 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:22px;
  line-height: 40px;
  margin-bottom:20px;
}
@media screen and (max-width:757px) {
	.logo-moji-1 { font-size:16px; line-height:30px; margin-bottom:10px; }
}

.logo-moji-2 {
  font-family: futura-pt, sans-serif;
  font-size:36px;
  line-height: 40px;
  letter-spacing: 3px;
  margin-bottom:10px;
}
@media screen and (max-width:757px) {
	.logo-moji-2 { font-size:25px; line-height:30px; margin-bottom:5px; }
}

.logo-moji-3 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: 500;
  font-size:18px;
  line-height: 40px;
  letter-spacing:3px;
}
@media screen and (max-width:757px) {
	.logo-moji-3 { font-size:12px; line-height:30px; }
}


/* --- ナビ ---  */
.navi-oya {
  position:absolute;
  text-align: right;
  top:55px;
  right:50px;
}
@media screen and (max-width:757px) {
	.navi-oya { display: none; }
}

.navi {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  color:#fff;
  font-size:16px;
  font-weight: bold;
  margin-bottom:20px;
  text-align: left;
}

a.navi-li {
  position: relative;
  text-decoration: none;
  text-align: center;
  display: block;
}
a.navi-li::after {
  position: absolute;
  left:0;
  bottom: -5px;
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
a.navi-li:hover::after {
  transform: scale(1, 1);
}


/* --------- バナー・メッセージ ----------  */
.green-2 {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #0C6E45;
  mix-blend-mode:multiply;
}

.ratio-1_1:before {
  content: "";
  display: block;
  padding-top: 2200px;
}
@media screen and (max-width:1030px) {
	.ratio-1_1:before { padding-top: 2000px; }
}
@media screen and (max-width:757px) {
	.ratio-1_1:before { padding-top: 1950px; }
}

.first-2 {
  position: absolute;
  top:100vh;
  left:0;
  right:0;
  margin:auto;
}


/* --------- バナー ----------  */
.banner {
  position: absolute;
  left:0;
  right:0;
  top:100px;
  margin:auto;
  text-align: center;
}
@media screen and (max-width:757px) {
	.banner { top:30px; }
}

.banner-hako {
  display: inline-block;
  position: relative;
  width:520px;
  height:200px;
  object-fit: cover;
  margin-right:20px;
  margin-left:20px;
}
@media screen and (max-width:1300px) {
	.banner-hako { margin-right:10px; margin-left:10px; }
}
@media screen and (max-width:1030px) {
	.banner-hako { width:340px; height:125px; margin-right:10px; margin-left:10px; margin-bottom:30px; }
}
@media screen and (max-width:757px) {
	.banner-hako { width:340px; height:125px; margin-right:0; margin-left:0; margin-bottom:30px; }
}

.btn002-01 {
  width:520px;
  height:200px;
  object-fit: cover;
  margin:30px;
  position: relative;
  text-decoration: none;
  outline: none;
  display: flex;
  border-radius: 20px;
  background-color: #fff;
  transition: all 0.3s ease, background-color 0.3s;
  overflow: hidden;
  background-size: 400%;
}
@media screen and (max-width:1030px) {
	.btn002-01 { width:339px; height:128px; margin:0; }
}

.btn002-01-siro {
  content: '';
  position: absolute;
  top: calc(42% - 3px);
  right: 25px;
  z-index: 2;
  display: inline-block;
  width: 31px;
  height: 31px;
  background-color:#fff;
  border-radius: 20px;
  transition: all 0.3s ease;
}
@media screen and (max-width:1030px) {
	.btn002-01-siro { right: 15px; }
}

/* 丸アイコン */
.btn002-01::after {
  content: '';
  position: absolute;
  top: calc(50% - 4px);
  right: 40px;
  z-index: 3;
  display: inline-block;
  width: 1px;
  height: 1px;
  background-color:#0C6E45;
  border-radius: 20px;
  transition: all 0.3s ease;
}
@media screen and (max-width:1030px) {
	.btn002-01::after { right:30px; top:66px; }
}

/* ホバーアニメーション */
.btn002-01:hover::before {
  transform: scaleX(32);
}
.btn002-01:hover .text {
  color: #0C6E45;
}
.btn002-01:hover::after {
  background-color:#0C6E45;
  transform-origin: center;
  transform: scale(32);
}

/* 矢印アイコン */
.yajirushi-hako {
  position: absolute;
  top:96px;
  right:33px;
  z-index: 9;
}
@media screen and (max-width:1030px) {
	.yajirushi-hako { top:66px; right:22px; }
}

.btn002-01-yajirushi {
  position: relative;
  display: block;
  width: 17px;
  height: 1px;
  border-radius: 10px;
  background-color: #0C6E45;
  transition: all 0.3s ease;
}
.btn002-01-yajirushi::before,
.btn002-01-yajirushi::after {
  content: "";
  position: absolute;
  right: -3px;
  display: block;
  width: 10px;
  height: 1px;
  border-radius: 10px;
  background-color: #0C6E45;
  transition: all 0.3s ease;
}
.btn002-01-yajirushi::before {
  top: 3px;
  transform: rotate(-45deg);
}
.btn002-01-yajirushi::after {
  bottom: 3px;
  transform: rotate(45deg);
}
/* ホバーアニメーション */
.btn002-01:hover {
  color: #fff;
  background-color: #0C6E45;
}
.btn002-01:hover span {
  background-color: #fff;
}
.btn002-01:hover,
.btn002-01:hover span::before,
.btn002-01:hover span::after {
  background-color: #fff;
}

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

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

/* --------- ポリシー ----------  */
.policy {
  position: absolute;
  top:1000px;
  right:0;
  left:0;
  margin:auto;
  text-align: center;
}
@media screen and (max-width:1030px) {
	.policy { top:800px; }
}
@media screen and (max-width:757px) {
	.policy { top:850px; }
}

.policy-1 {
  margin-bottom:50px;
}
@media screen and (max-width:757px) {
	.policy-1 { margin-bottom:40px; }
}

.policy-a-left {
  display: inline-block;
  width:auto;
  vertical-align: middle;
  margin-left:-150px;
}
@media screen and (max-width:1030px) {
	.policy-a-left { margin-left:0%; }
}

.policy-a-right {
  display: inline-block;
  width:360px;
  vertical-align: middle;
  margin-left:150px;
}
@media screen and (max-width:1300px) {
	.policy-a-right { margin-left:80px; }
}
@media screen and (max-width:1030px) {
	.policy-a-right { width:80%; margin-left:10%; margin-right:10%; }
}

.policy-b-left {
  display: inline-block;
  width:360px;
  vertical-align: middle;
  margin-right:150px;
}
@media screen and (max-width:1300px) {
	.policy-b-left { margin-right:80px; }
}
@media screen and (max-width:1030px) {
	.policy-b-left { width:80%; margin-left:10%; margin-right:10%; }
}

.policy-b-right {
  display: inline-block;
  width:auto;
  vertical-align: middle;
  margin-right:-150px;
}
@media screen and (max-width: 1030px) {
	.policy-b-right { display: none; }
}

.policy-b-right-sp {
  display: none;
}
@media screen and (max-width:1030px) {
	.policy-b-right-sp {   
    display: inline-block;
    width:auto;
    vertical-align: middle;
    margin-right:0%; }
}

.policy-img {
  width:700px;
  height:450px;
  object-fit: cover;
}
@media screen and (max-width:1300px) {
	.policy-img { width:50vw; }
}
@media screen and (max-width:1030px) {
	.policy-img { width:90vw; height:300px; object-fit: cover; margin-bottom:20px; }
}
@media screen and (max-width:757px) {
	.policy-img { width:100vw; height:200px; object-fit: cover; margin-bottom:20px; }
}

.policy-moji-1 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:28px;
  line-height: 42px;
  margin-bottom:20px;
  letter-spacing: 1px;
  color:#fff;
  text-align: justify;
}
@media screen and (max-width:1030px) {
	.policy-moji-1 { font-size:20px; line-height: 38px; margin-bottom:10px; }
}


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


.illust-2 {
  position: absolute;
  right:0px;
  left:70%;
  top:0px;
  margin:auto;
  width: 120px;
}
@media screen and (max-width:1030px) {
	.illust-2 { left:30px; right:auto; top:-60px; width:90px; }
}

.illust-3 {
  position: absolute;
  right:0px;
  left:15%;
  top:350px;
  margin:auto;
  width: 85px;
}
@media screen and (max-width:1030px) {
	.illust-3 { left:auto; right:30px; top:230px; width:60px; }
}

.illust-4 {
  position: absolute;
  right:20%;
  left:0px;
  top:500px;
  margin:auto;
  width: 150px;
}
@media screen and (max-width:1030px) {
	.illust-4 { left:auto; right:30px; top:700px; width:110px; }
}

.illust-5 {
  position: absolute;
  right:80%;
  left:0px;
  top:900px;
  margin:auto;
  width: 65px;
}
@media screen and (max-width:1030px) {
	.illust-5 { left:30px; right:auto; top:1150px; width:50px; }
}

/* ---ボタン-----  */
.policy-btn {
  margin-top:100px;
}
@media screen and (max-width:1030px) {
	.policy-btn { margin-top:50px; }
}

.sample_button12 {
  display: inline-block;
  width: 240px;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:16px;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  outline: none;
  border:solid 1px #fff;
  border-radius: 999px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s ease;
  color: #fff;
  padding-left:60px;
}
.sample_button12:hover,
.sample_button12:hover span {
  color:#0C6E45;
}
.sample_button12:hover::before {
  transform: scale(1) translate(-50%,-50%);
  color:#0C6E45;
}
.sample_button12::before {
  content: '';
  width: 120%;
  padding-top: 120%;
  border-radius: 100%;
  background-color:#fff;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform-origin: top left;
  transform: scale(0) translate(-50%,-50%);
  transition: inherit;
}


.sample_button12 span {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  position: relative;
  width: 1em;
  height: 0.1em;
  background: currentColor;
  z-index: 2;
  margin-left:45px;
}

.sample_button12 span::before {
  content: '';
  width: 0.65em;
  height: 0.65em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  transform-origin: top right;
  position: absolute;
  top: 50%;
  right: -0.05em;
  box-sizing: border-box;
}


/* --------------- 有機野菜 --------------- */
.yuuki {
  position: relative;
  padding-top:100px;
  width:100%;
  padding-bottom:0px;
}
@media screen and (max-width:1030px) {
	.yuuki { padding-top:50px; }
}

.yuuki-img-1 {
  display: inline-block;
  width:70%;
  height:500px;
  object-fit: cover;
  margin-right:0.5%;
}
@media screen and (max-width:1030px) {
	.yuuki-img-1 { height:300px; }
}
@media screen and (max-width:757px) {
	.yuuki-img-1 { height:170px; }
}

.yuuki-img-2 {
  display: inline-block;
  width:28.7%;
  height:500px;
  object-fit: cover;
  margin-left:0.5%;
}
@media screen and (max-width:1300px) {
	.yuuki-img-2 { width:28%; }
}
@media screen and (max-width:1030px) {
	.yuuki-img-2 { height:300px; width:28%; margin-left:0.5%; }
}
@media screen and (max-width:757px) {
	.yuuki-img-2 { height:170px; width:28%; margin-left:0.5%; }
}

.yuuki-point {
  display: block;
  width:90%;
  max-width:1060px;
  padding-top:150px;
  right:0;
  left:0;
  margin:auto;
}
@media screen and (max-width:1030px) {
	.yuuki-point { width:80%; max-width:80%; padding-top:120px; }
}

.yuuki-point-hako {
  vertical-align: top;
  display: inline-block;
  width:30%;
  max-width:300px;
  margin:25px;
}
@media screen and (max-width:1030px) {
	.yuuki-point-hako { width:28%;  max-width:28%; margin:2%; }
}
@media screen and (max-width:757px) {
	.yuuki-point-hako { margin:0; margin-bottom:30px; width:100%; max-width:100%; max-width:auto; }
}

.yuuki-point-moji-1 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-weight: bold;
  font-size: 26px;
  color: #2B2B2B;
  margin-bottom:10px;
}
@media screen and (max-width:757px) {
	.yuuki-point-moji-1  { font-size:20px; line-height: 38px; margin-bottom:5px; }
}

.yuuki-point-moji-2 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 15px;
  color: #2B2B2B;
  line-height: 30px;
  text-align: justify;
}

.yuuki-schevege {
  display: block;
  width:90%;
  max-width:1150px;
  padding-top:80px;
  right:0;
  left:0;
  margin:auto;
}
@media screen and (max-width:1300px) {
	.yuuki-schevege { width:80%; max-width:80%; }
}
@media screen and (max-width:757px) {
	.yuuki-schevege { width:100%; max-width:100%; padding-top:50px; }
}

.yuuki-schedule {
  display: inline-block;
  vertical-align: top;
  margin-right:40px;
  width:260px;
}
@media screen and (max-width:1300px) {
	.yuuki-schedule { width:28%; margin-right:2%; }
}
@media screen and (max-width:757px) {
	.yuuki-schedule { width:80%; margin-right:10%; margin-left:10%; }
}

.yuuki-schedule-img {
  width:260px;
}
@media screen and (max-width:757px) {
  .yuuki-schedule-img { width:100%; }
}

.yuuki-vegetable {
  display: inline-block;
  vertical-align: top;
  width:820px;
}
@media screen and (max-width:1300px) {
	.yuuki-vegetable { width:69%; }
}
@media screen and (max-width:757px) {
	.yuuki-vegetable { width:86%; margin-right:7%; margin-left:7%; margin-top:50px; }
}

.yuuki-vegetable-hako {
  display: inline-block;
  width:240px;
  margin:15px;
  vertical-align: top;
}
@media screen and (max-width:1300px) {
	.yuuki-vegetable-hako  { width:45%; margin:2%;}
}
@media screen and (max-width:757px) {
	.yuuki-vegetable-hako  { width:44%; margin:2.5%; margin-bottom:20px; }
}

.yuuki-vegetable-img {
  width:240px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.323);
}
@media screen and (max-width:1300px) {
	.yuuki-vegetable-img  { width:100%; }
}

.yuuki-vegetable-moji {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  color: #2B2B2B;
  margin-top:20px;
  text-align: center;
}
@media screen and (max-width:1030px) {
	.yuuki-vegetable-moji { font-size: 16px; margin-top:10px; }
}

.yuuki-vegetable-moji-pc {
  display: block;
}
@media screen and (max-width:1030px) {
	.yuuki-vegetable-moji-pc { display:inline; }
}

.yuuki-vegetable-moji-sp {
  display:inline;
}
@media screen and (max-width:1030px) {
	.yuuki-vegetable-moji-sp { display: block; font-size:12.5px; letter-spacing: -1px; line-height: 22px; }
}


/* --------------- 加工品 --------------- */
.kakou {
  padding-bottom:100px;
} 
@media screen and (max-width:757px) {
	.kakou { padding-bottom:50px; }
}

.kakou-narabi {
  display: block;
  width:100%;
  max-width:1150px;
  padding-top:150px;
  right:0;
  left:0;
  margin:auto;
}
@media screen and (max-width:1030px) {
	.kakou-narabi { text-align: center; }
}
@media screen and (max-width:757px) {
	.kakou-narabi { max-width:100%; width:100%; padding-top:70px; }
}


.kakou-moji-1 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-weight: bold;
  font-size: 26px;
  color: #2B2B2B;
  margin-top:25px;
  margin-bottom:10px;
}
@media screen and (max-width:757px) {
	.kakou-moji-1 { font-size: 20px; margin-bottom:5px; margin-top:20px; }
}

.kakou-moji-2 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 15px;
  color: #2B2B2B;
  line-height: 30px;
}

.kakou-hako {
  display: inline-block;
  position: relative;
  width:530px;
  height:353px;
  object-fit: cover;
  margin:20px;
  margin-bottom:200px;
  vertical-align: top;
}
@media screen and (max-width:757px) {
	.kakou-hako { max-width:80%; margin-right:10%; margin-left:10%; margin-bottom:70px; }
}

.btn002-03 {
  width:530px;
  height:353px;
  object-fit: cover;
  position: relative;
  text-decoration: none;
  outline: none;
  display: flex;
  border-radius: 20px;
  background-color: #fff;
  transition: all 0.3s ease, background-color 0.3s;
  overflow: hidden;
  background-size: 400%;
}
@media screen and (max-width:757px) {
	.btn002-03 { width:100%; height:225px; }
}

.btn002-03-siro {
  content: '';
  position: absolute;
  top: calc(45% - 3px);
  right: 25px;
  z-index: 2;
  display: inline-block;
  width: 31px;
  height: 31px;
  background-color:#fff;
  border-radius: 20px;
  transition: all 0.3s ease;
}
@media screen and (max-width:757px) {
	.btn002-03-siro { right:15px; top: calc(45% - 1px); }
}

/* 丸アイコン */
.btn002-03::after {
  content: '';
  position: absolute;
  top: calc(50% - 5px);
  right: 40px;
  z-index: 3;
  display: inline-block;
  width: 1px;
  height: 1px;
  background-color:#0C6E45;
  border-radius: 20px;
  transition: all 0.3s ease;
}
@media screen and (max-width:757px) {
	.btn002-03::after { top: calc(54% - 5px); right: 30px; }
}
/* ホバーアニメーション */
.btn002-03:hover::before {
  transform: scaleX(32);
}
.btn002-03:hover .text {
  color: #0C6E45;
}
.btn002-03:hover::after {
  background-color:#0C6E45;
  transform-origin: center;
  transform: scale(32);
}

/* 矢印アイコン */
.yajirushi-hako-3 {
  position: absolute;
  top: calc(50% - 5px);
  right:33px;
  z-index: 9;
}
@media screen and (max-width:757px) {
	.yajirushi-hako-3 { top: calc(54% - 5px); right:23px; }
}

.btn002-03-yajirushi {
  position: relative;
  display: block;
  width: 17px;
  height: 1px;
  border-radius: 10px;
  background-color: #0C6E45;
  transition: all 0.3s ease;
}
.btn002-03-yajirushi::before,
.btn002-03-yajirushi::after {
  content: "";
  position: absolute;
  right: -3px;
  display: block;
  width: 10px;
  height: 1px;
  border-radius: 10px;
  background-color: #0C6E45;
  transition: all 0.3s ease;
}
.btn002-03-yajirushi::before {
  top: 3px;
  transform: rotate(-45deg);
}
.btn002-03-yajirushi::after {
  bottom: 3px;
  transform: rotate(45deg);
}
/* ホバーアニメーション */
.btn002-03:hover {
  color: #fff;
  background-color: #0C6E45;
}
.btn002-03:hover span {
  background-color: #fff;
}
.btn002-03:hover,
.btn002-03:hover span::before,
.btn002-03:hover span::after {
  background-color: #fff;
}


/* --------------- 販売店 --------------- */
.hanbai {
  position: relative;
  width:100%;
  height: auto;
  padding-bottom:100px;
  background-color: #ffffffa2;
}
@media screen and (max-width:757px) {
	.hanbai { padding-bottom:50px; width:100%; }
}

.hanbai-narabi {
  right:0;
  left:0;
  margin:auto;
  text-align: left;
  width:1010px;
  padding-top:150px;
}
@media screen and (max-width:1030px) {
	.hanbai-narabi { width:80%; margin-right:10%; margin-left:10%; padding-top:150px; }
}
@media screen and (max-width:757px) {
	.hanbai-narabi { width:80%; margin-right:10%; margin-left:10%; padding-top:50px; }
}

.hanbai-hako {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  width: 450px;
  margin:25px;
  margin-bottom:50px;
}
@media screen and (max-width:757px) {
	.hanbai-hako { width:100%; margin:0; margin-bottom:50px; }
}

.hanbai-moji-1 {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-weight: bold;
  font-size: 26px;
  color: #0C6E45;
  text-align: justify;
  margin-left:25px;
  margin-top:30px;
  margin-bottom:20px;

}
@media screen and (max-width:757px) {
	.hanbai-moji-1 { font-size:20px; margin-left:0px; margin-bottom:20px; }
}

.hanbai-moji-2 {
  display: inline-block;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-weight: bold;
  font-size: 26px;
  color: #2B2B2B;
  margin-bottom:10px;
  width: 360px;
  text-align: justify;
  vertical-align: top;
}
@media screen and (max-width:757px) {
	.hanbai-moji-2 { font-size:20px; width:74%; margin-bottom:10px; }
}

.hanbai-moji-3 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 15px;
  color: #2B2B2B;
  line-height: 30px;
  text-align: justify;
}

.hanbai-moji-4 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 13px;
  color: #2B2B2B;
  text-align:right;
}
@media screen and (max-width:757px) {
	.hanbai-moji-4 { margin-bottom:20px; }
}

.hanbai-a {
  display: inline-block;
  text-decoration: none;
}

.hanbai-img {
  display: inline-block;
  vertical-align: top;
  width:30px;
  height:33px;
  margin:3px;
  margin-top:-15px;
  padding-top:3px;
  transition: all 0.4s ease;
}
@media screen and (max-width:757px) {
	.hanbai-img { height:30px; margin:2px; padding-top:0px; vertical-align:middle; }
}
.hanbai-img:hover {
  transform: scale(1.1);
  transition: all 0.4s ease;
}




/* --------------- ブログ --------------- */
.blog {
  position: relative;
}

.green-3 {
  position: relative;
  width:auto;
  height: 770px;
  background-color: #0C6E45;
  mix-blend-mode:multiply;
}
@media screen and (max-width:757px) {
	.green-3 { height:670px; }
}

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


.blog-yajirushi {
  position: absolute;
  top:180px;
  right:100px;
}
@media screen and (max-width:757px) {
	.blog-yajirushi { top:160px; 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:#fff;
}

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

.btn002-04-yajirushi {
  position: relative;
  display: block;
  width: 40px;
  height: 1.5px;
  border-radius: 10px;
  background-color: #fff;
  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: #fff;
  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:150px; }
}

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

.blog-hako {
  display: inline-block;
  width:300px;
  margin:15px;
  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:#fff;
}

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

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

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

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

  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 #fff;
  border-radius: 5px;
  color:#fff;
  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:#fff;
}

.blog-a {
  display: inline-block;
  text-decoration: none;
}
.blog-a:hover {
  opacity: 0.7;
}