@charset "UTF-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-decoration: none;
  border: none;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  -webkit-backface-visibility: hidden;
}

@font-face {
  font-family: "YuGothic-M";
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
}
@font-face {
  font-family: "YuGothic-M";
  font-weight: bold;
  src: local("YoGothic-Bold"), local("Yu Gothic");
}
html {
  font-size: 62.5%;
  /* 16px x 0.625 = 10px(=1rem) */
}

body {
  font-size: 1.4em;
  /* 14px */
  font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  -webkit-text-size-adjust: 100%;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  ::i-block-chrome,
body {
    font-feature-settings: "pkna";
  }
}
h2 {
  width: 361px;
}

h3 {
  font-size: 2em;
  text-align: left;
  position: relative;
  padding: 0.25em 0.5em 0.5em 2.32em;
  font-weight: 100;
}
h3::after {
  top: 0.55em;
  left: 0.95em;
  z-index: 2;
  width: 22px;
  height: 22px;
  background: #aeea00;
  position: absolute;
  content: "";
}
h3::before {
  top: 0.3em;
  left: 0.7em;
  width: 22px;
  height: 22px;
  background: rgb(255, 242, 132);
  position: absolute;
  content: "";
}

h4 {
  font-weight: 600;
  text-align: left;
  position: relative;
  padding: 0.25em 0.5em 0.8em 2.2em;
}
h4::after {
  top: 0.5em;
  left: 0.92em;
  z-index: 2;
  width: 12px;
  height: 12px;
  background: #aeea00;
  position: absolute;
  content: "";
}

.m-txt, #box5 #in-box5 #main-box5 div {
  text-align: justify;
  line-height: 2;
}

.txt-start {
  font-size: 3rem;
  font-weight: bold;
  text-align: left;
}

/*========= 背景動画設定のCSS ===============*/
/*movie設定*/
#movie {
  position: relative;
  /*ローディング画像などを表示す際の基点とするため指定*/
  height: 0vh;
  /*高さを全画面にあわせる*/
  text-align: center;
  color: #fff;
  /*ローディング画面時＆動画が表示されないときに表示する背景画像のレスポンシブ化*/
  background: url(../img/top-bg.png) fixed no-repeat top;
  background-position: 0% 33%;
  background-size: cover;
}

/* ローディングアイコン設定 */
#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

/*jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示*/
#loading.disappear {
  display: none;
}

/* youtube設定 */
#youtube-area {
  position: fixed;
  z-index: 1;
  /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0;
}

/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
  -webkit-animation-name: PageAnimeAppear;
          animation-name: PageAnimeAppear;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#youtube {
  /*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh;
  /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw;
  /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}

/*youtubeがクリックされないためのマスク*/
#youtube-mask {
  position: absolute;
  z-index: 2;
  /*下から2番目に表示*/
  top: 0;
  width: 100%;
  height: 100%;
}

/*youtube 上のロゴ */
/*下のコンテンツ*/
#main,
header {
  position: relative;
  /*relativeを指定してfixed指定をした#youtube-areaの上に表示*/
  z-index: 3;
  /*一番上に表示*/
  /*見た目の調整*/
  text-align: center;
}

/*========= 背景動画設定のCSS ===============*/
header {
  width: 1000px;
  margin: 0 auto;
  padding: 27px 10px;
  height: 105px;
}

#logo {
  float: left;
  margin-right: 70px;
}

ul {
  list-style: none;
}

nav ul li {
  display: -webkit-inline-box;
}

/* effect 1 */
.hover1 {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.hover1__label {
  vertical-align: middle;
}

.hover1:before,
.hover1:after,
.hover1__label:before,
.hover1__label:after {
  content: "";
  position: absolute;
  transition: transform 0.2s ease-out;
}

.hover1:before,
.hover1:after {
  width: 100%;
  height: 2px;
  left: 0;
}

.hover1:before {
  top: 0;
  transform: translate3d(-105%, 0, 0);
}

.hover1:after {
  bottom: 0;
  transform: translate3d(105%, 0, 0);
}

.hover1__label:before,
.hover1__label:after {
  width: 2px;
  height: 100%;
  top: 0;
}

.hover1__label:before {
  left: 0;
  transform: translate3d(0%, -100%, 0);
}

.hover1__label:after {
  right: 0;
  transform: translate3d(0%, 100%, 0);
}

.hover1:hover:before,
.hover1:focus:before,
.hover1:hover:after,
.hover1:focus:after,
.hover1:hover .hover1__label:before,
.hover1:focus .hover1__label:before,
.hover1:hover .hover1__label:after,
.hover1:focus .hover1__label:after {
  transform: translate3d(0, 0, 0);
  background-color: #ffffff;
}

.hover1:focus {
  outline: none;
}

.hover1:before,
.hover1:after,
.hover1__label:before,
.hover1__label:after {
  background-color: rgba(255, 255, 255, 0);
}

.hover1,
.hover1:hover,
.hover1:focus {
  color: #ffffff;
}

.hover1 {
  padding: 8px 10px 2px 10px;
}

#box1 {
  width: 100%;
  margin: 0 auto;
  position: relative;
  top: 145px;
  height: 204px;
}
#box1 div img {
  width: 600px;
}

#box2 {
  width: 100%;
  height: 1000px;
  background: url(../img/box2-bg.png) no-repeat center top;
  padding-top: 310px;
}
#box2 div {
  width: 1000px;
  margin: 0 auto;
  margin: 0 auto;
}
#box2 div div:nth-of-type(2) {
  width: 495px;
}
#box2 div div {
  width: 505px;
  padding: 30px 50px;
  float: left;
}
#box2 div #ot-box2-logp {
  position: relative;
  top: 10px;
  left: 23px;
}
#box2 div #ot-box2-logp2 {
  position: relative;
  top: 191px;
  left: 85px;
}

#box3 {
  background: white;
}
#box3 #in-box3 {
  padding-top: 30px;
  width: 1000px;
  margin: 0 auto;
}
#box3 #in-box3 div {
  margin-left: auto;
  text-align: left;
}
#box3 #in-box3 #profile {
  width: 510px;
  position: relative;
  z-index: 0;
}
#box3 #in-box3 #profile div {
  line-height: 2.95;
  text-align: left;
  margin: 0;
}
#box3 #in-box3 #profile p {
  width: 206px;
}
#box3 #in-box3 #kousyoku {
  width: 600px;
  margin-right: 30px;
  position: relative;
  z-index: 0;
}
#box3 #in-box3 #kousyoku div {
  line-height: 2.95;
  margin-left: 31px;
}
#box3 #in-box3 #profile-comment {
  margin: 0 auto;
  padding: 10px 49px;
  position: relative;
  z-index: 0;
}
#box3 #in-box3 #profile-img {
  position: relative;
}
#box3 #in-box3 #profile-img #name {
  position: absolute;
  left: 85px;
  top: 56px;
}
#box3 #in-box3 #profile-img #face {
  position: absolute;
  right: 467px;
  top: -70px;
}
#box3 #in-box3 #profile-img #face2 {
  position: absolute;
  top: 400px;
}
#box3 #in-box3 #book {
  margin: 0 auto;
  padding: 49px 28px;
}
#box3 #in-box3 #book div {
  margin: 20px 21px;
  line-height: 2.5;
}
#box3 #in-box3 #book div span {
  font-weight: bold;
  font-size: 1.8rem;
}

#business-img {
  position: relative;
}
#business-img #business-lemon {
  position: absolute;
  bottom: -335px;
  right: 41px;
  z-index: 280;
}

#box4 {
  padding-top: 220px;
  background: white;
  height: 630px;
}
#box4 #in-box4 {
  background: #f5fdde;
  transform: skewY(-7deg);
}
#box4 #in-box4 #in-in-box4 {
  width: 1000px;
  margin: 0 auto;
  position: relative;
  bottom: 28px;
  transform: skewY(7deg);
}
#box4 #in-box4 #in-in-box4 p {
  margin: 19px 48px;
}
#box4 #in-box4 #in-in-box4 #main-box4 {
  padding: 7px 28px;
}
#box4 #in-box4 #in-in-box4 #main-box4 .m-txt, #box4 #in-box4 #in-in-box4 #main-box4 #box5 #in-box5 #main-box5 div, #box5 #in-box5 #main-box5 #box4 #in-box4 #in-in-box4 #main-box4 div {
  margin-left: 21px;
  margin-bottom: 28px;
}
#box4 #in-box4 #in-in-box4 #main-box4 .m-txt span, #box4 #in-box4 #in-in-box4 #main-box4 #box5 #in-box5 #main-box5 div span, #box5 #in-box5 #main-box5 #box4 #in-box4 #in-in-box4 #main-box4 div span {
  font-weight: bold;
}

#box4-box5 {
  background: url(../img/bi-bg.jpg) fixed no-repeat top;
  background-size: cover;
  width: 100%;
  height: 980px;
}

#box5 {
  background: white;
  height: 1000px;
  transform: skewY(-7deg);
  position: relative;
  bottom: 119px;
}
#box5 #in-box5 {
  width: 1000px;
  margin: 0 auto;
  padding-top: 148px;
  transform: skewY(7deg);
}
#box5 #in-box5 #main-box5 {
  padding: 7px 28px;
}
#box5 #in-box5 #main-box5 h3 {
  margin-top: 30px;
}
#box5 #in-box5 #main-box5 div {
  width: 906px;
  margin: 0 auto;
}
#box5 #in-box5 #main-box5 .swiper-container {
  margin-top: 45px;
}
#box5 #white-area {
  background: white;
  width: 100%;
  height: 400px;
  transform: skewY(7deg);
}

#box6 {
  background: white;
  position: relative;
  height: 1085px;
  z-index: 300;
}
#box6 #in-box6 {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
#box6 #in-box6 h2 {
  position: relative;
  z-index: 95000;
}
#box6 #in-box6 #company-lemon1 {
  position: absolute;
  bottom: 187px;
  right: 603px;
  z-index: 9400;
}
#box6 #in-box6 #company-lemon2 {
  position: absolute;
  right: 13px;
  bottom: 529px;
}
#box6 #in-box6 #orchard-photo {
  position: absolute;
  top: 570px;
  right: 157px;
}
#box6 #in-box6 .m-txt, #box6 #in-box6 #box5 #in-box5 #main-box5 div, #box5 #in-box5 #main-box5 #box6 #in-box6 div {
  background: #FFF284;
  width: 692px;
  padding: 90px 0 90px 90px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: 9px;
  font-size: 1.6rem;
  letter-spacing: 0em;
  line-height: 2.2;
  position: relative;
  z-index: 9000;
}
#box6 #in-box6 .m-txt span, #box6 #in-box6 #box5 #in-box5 #main-box5 div span, #box5 #in-box5 #main-box5 #box6 #in-box6 div span {
  font-size: 2.1rem;
}

#box7 {
  background: white;
  position: relative;
  height: 830px;
  z-index: 300;
}
#box7 #in-box7 {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
#box7 #in-box7 h2 {
  position: relative;
  z-index: 95000;
}
#box7 #in-box7 #contact-kiwi {
  position: absolute;
  bottom: 390px;
  right: 180px;
  z-index: 9400;
}
#box7 #in-box7 #contact-photo1 {
  position: absolute;
  top: 470px;
  right: 25px;
}
#box7 #in-box7 .m-txt, #box7 #in-box7 #box5 #in-box5 #main-box5 div, #box5 #in-box5 #main-box5 #box7 #in-box7 div {
  background: #FFF284;
  width: 692px;
  padding: 62px;
  margin-top: 15px;
  margin-right: auto;
  font-size: 1.6rem;
  letter-spacing: 0em;
  line-height: 2.2;
  position: relative;
  z-index: 9000;
}
#box7 #in-box7 .m-txt form div, #box7 #in-box7 #box5 #in-box5 #main-box5 div form div, #box5 #in-box5 #main-box5 #box7 #in-box7 div form div {
  text-align: left;
  margin: 10px;
}
#box7 #in-box7 .m-txt form div p, #box7 #in-box7 #box5 #in-box5 #main-box5 div form div p, #box5 #in-box5 #main-box5 #box7 #in-box7 div form div p {
  display: inline-block;
}
#box7 #in-box7 .m-txt form div p input, #box7 #in-box7 #box5 #in-box5 #main-box5 div form div p input, #box5 #in-box5 #main-box5 #box7 #in-box7 div form div p input {
  text-align: left;
}
#box7 #in-box7 .m-txt form div p textarea, #box7 #in-box7 #box5 #in-box5 #main-box5 div form div p textarea, #box5 #in-box5 #main-box5 #box7 #in-box7 div form div p textarea {
  text-align: left;
  resize: none;
  width: 450px;
}
#box7 #in-box7 .m-txt form #form-name-text, #box7 #in-box7 #box5 #in-box5 #main-box5 div form #form-name-text, #box5 #in-box5 #main-box5 #box7 #in-box7 div form #form-name-text {
  margin-right: 26px;
}
#box7 #in-box7 .m-txt form #form-mail-text, #box7 #in-box7 #box5 #in-box5 #main-box5 div form #form-mail-text, #box5 #in-box5 #main-box5 #box7 #in-box7 div form #form-mail-text {
  margin-right: 19px;
}
#box7 #in-box7 .m-txt form #form-text-box, #box7 #in-box7 #box5 #in-box5 #main-box5 div form #form-text-box, #box5 #in-box5 #main-box5 #box7 #in-box7 div form #form-text-box {
  vertical-align: top;
}
#box7 #in-box7 .m-txt form #message-button, #box7 #in-box7 #box5 #in-box5 #main-box5 div form #message-button, #box5 #in-box5 #main-box5 #box7 #in-box7 div form #message-button {
  text-align: right;
}
#box7 #in-box7 .m-txt form #message-button .square_btn, #box7 #in-box7 #box5 #in-box5 #main-box5 div form #message-button .square_btn, #box5 #in-box5 #main-box5 #box7 #in-box7 div form #message-button .square_btn {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #647d1b;
  border: solid 2px #647d1b;
  border-radius: 3px;
  transition: 0.4s;
  background: #FFF284;
}
#box7 #in-box7 .m-txt form #message-button .square_btn:hover, #box7 #in-box7 #box5 #in-box5 #main-box5 div form #message-button .square_btn:hover, #box5 #in-box5 #main-box5 #box7 #in-box7 div form #message-button .square_btn:hover {
  background: #647d1b;
  color: white;
}

footer {
  background: #333333;
  color: #fff284;
}
footer .footer-menu {
  height: 300px;
  min-width: 1000px;
}
footer .footer-menu ul li {
  display: inline-block;
  margin-top: 50px;
  vertical-align: top;
  text-align: left;
}
footer .footer-menu ul li a {
  margin: 25px;
}
footer .footer-menu ul li ul li {
  display: block;
  margin: 0px;
  text-align: left;
}
footer .footer-menu ul li ul li a {
  color: #fff284;
  font-size: 1.2rem;
}

/* UPアイコン */
#pageTop {
  position: fixed;
  bottom: 35px;
  right: 35px;
  z-index: 300;
}
#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 8px;
}
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}/*# sourceMappingURL=ot.css.map */