@charset "UTF-8";

/* メイン画像
--------------------------------*/
body {
 position: relative;
}

/*右上葉*/
body::after {
 position: absolute;
 content: '';
 top: -230px;
 right: -190px;
 width: 754.96px;
 height: 730px;
 background: url(../img/index/leaf-under.svg);
 background-repeat: no-repeat;
 opacity: 0;
 animation: fade-a 5s forwards 3.7s;
 transform-origin: right top;
 z-index: -4;
}

/*右上葉*/
body::before {
 position: absolute;
 content: '';
 top: -230px;
 right: -190px;
 width: 754.96px;
 height: 730px;
 background: url(../img/index/leaf-top.svg);
 background-repeat: no-repeat;
 opacity: 0;
 animation: fade-b 5s forwards 3.7s;
 transform-origin: right top;
 z-index: -3;
}

/*中央円*/
.main-img {
 position: relative;
 width: 100vw;
 height: 100vh;
 margin-bottom: 137px;
}

.main-img .back1 {
 position: absolute;
 display: block;
 top: 9vh;
 left: 0;
 right: 0;
 margin: auto;
 width: 70vh;
 height: 70vh;
 z-index: -1;
}

.main-img .back2 {
 display: block;
 position: absolute;
 top: 9vh;
 left: 0;
 right: 0;
 margin: auto;
 width: 70vh;
 height: 70vh;
 z-index: -2;
 opacity: 0;
 animation: fade-c 1s forwards 1.5s;
}

.main-img .back1-sp {
 display: none;
}

/*写真と文字*/
.img-top {
 position: relative;
 width: 100%;
 display: flex;
 z-index: 1;
}

.img-top .left {
 position: relative;
 width: 50%;
 height: calc(100vh / 2);
}

/*左画像*/
.img-top .left::before {
 position: absolute;
 content: '';
 top: 0;
 left: 0;
 width: 100%;
 height: calc(100vh / 2);
 background: url(../img/index/img01.png);
 background-repeat: no-repeat;
 background-position-x: center;
 background-size: cover;
 opacity: 0;
 animation: RightIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 transform-origin: left center;
}

/*新たな文化を構築する*/
.img-top .left img {
 position: absolute;
 top: 45px;
 left: 83px;
 height: calc(100vh / 2.5);
 display: block;
 opacity: 0;
 animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

.img-top .right {
 width: 50%;
 height: calc(100vh / 2);
 padding-left: 7vw;
 padding-top: 0;
}

.img-top .right p {
 font-size: 2.0rem;
 font-family: 'shippori-semi';
 line-height: 2;
 padding-top: 15vh;
 padding-bottom: 30px;
 opacity: 0;
 animation: fadeup 2s 0.5s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

.img-top .right a {
 opacity: 0;
 animation: fadeup 2s 0.5s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

.img-bottom {
 position: relative;
 width: 100%;
 display: flex;
 flex-direction: row-reverse;
}

.img-bottom .right {
 position: relative;
 width: 50%;
 height: calc(100vh / 2);
}

/*右画像*/
.img-bottom .right::before {
 position: absolute;
 content: '';
 top: 0;
 right: 0;
 width: 100%;
 height: calc(100vh / 2);
 background: url(../img/index/img02.png);
 background-repeat: no-repeat;
 background-position-x: center;
 background-size: cover;
 opacity: 0;
 animation: LeftIn 1.5s 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 transform-origin: left center;
}

/*古来の文化を継承する*/
.img-bottom .right img {
 position: absolute;
 top: 45px;
 right: 83px;
 height: calc(100vh / 2.5);
 display: block;
 opacity: 0;
 animation: fadeup 1.5s 1.1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

.img-bottom .left {
 width: 50%;
 height: calc(100vh / 2);
 padding-right: 7vw;
 padding-top: 0;
 text-align: right;
}

.img-bottom .left p {
 font-size: 2.0rem;
 font-family: 'shippori-semi';
 line-height: 2;
 padding-top: 15vh;
 padding-bottom: 30px;
 opacity: 0;
 animation: fadeup 2s 1.5s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

.img-bottom .left a {
 opacity: 0;
 animation: fadeup 2s 1.5s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

.scroll {
 position: absolute;
 content: '';
 bottom: -60px;
 left: 5%;
 width: 46.61px;
 height: 96px;
}

@media screen and (max-width: 900px) {

 /*右上葉*/
 body::after {
  top: -55px;
  right: -60px;
  width: 210px;
  height: 179px;
  background-size: contain;
  animation: fade-a 5s forwards 4.5s;
 }

 /*右上葉*/
 body::before {
  top: -55px;
  right: -60px;
  width: 210px;
  height: 179px;
  background-size: contain;
  animation: fade-b 5s forwards 4s;
 }

 /*中央円*/
 .main-img {
  width: 100vw;
  height: auto;
  margin-bottom: 80px;
 }

 .main-img .back1 {
  display: none;
 }

 .main-img .back1-sp {
  display: block;
  position: absolute;
  top: 20vh;
  left: 0;
  right: 0;
  margin: auto;
  width: 70vw;
  height: 70vw;
 }

 .main-img .back2 {
  display: block;
  position: absolute;
  top: 20vh;
  left: 0;
  right: 0;
  margin: auto;
  width: 70vw;
  height: 70vw;
 }

 .img-top,
 .img-bottom {
  display: block;
 }

 .img-top {
  margin-bottom: 5%;
 }

 .img-top .left {
  width: 100%;
  height: 212px;
 }

 .img-top .left::before {
  width: 90%;
  height: 212px;
 }

 .img-top .left img {
  top: 20px;
  left: 10%;
  width: 53.5px;
  height: auto;
 }

 .img-top .right {
  width: 85%;
  height: auto;
  margin: 0 auto;
  padding-left: 0;
  padding-top: 15px;
 }

 .img-top .right p {
  font-size: 4vw;
  padding-bottom: 14px;
  padding-top: 0;
  line-height: 1.6;
 }

 .img-bottom .right {
  width: 100%;
  height: 212px;
  background-size: contain;
  margin-left: 10%;
 }

 .img-bottom .right::before {
  width: 100%;
  height: 212px;
 }

 .img-bottom .right img {
  top: 25px;
  right: 18%;
  width: 51.96px;
  height: auto;
 }

 .img-bottom .left {
  width: 85%;
  height: auto;
  margin: 0 auto;
  padding-right: 0;
  padding-top: 15px;
 }

 .img-bottom .left p {
  font-size: 4vw;
  padding-bottom: 14px;
  padding-top: 0;
  line-height: 1.6;
 }

 .scroll {
  position: absolute;
  content: '';
  bottom: -92px;
  left: 5%;
  width: 33px;
  height: 61px;
 }
}

/* 事業紹介
--------------------------------*/
h2 {
 font-size: 2.2rem;
 font-family: 'shippori-semi';
 text-align: left;
 padding-bottom: 43px;
 padding-left: 73px;
}

h2.en {
 font-size: 10px;
 letter-spacing: 0.1em;
 color: #3A6F1E;
 display: flex;
 padding-bottom: 12px;
 font-family: 'noto';
 padding-left: 73px;
}

h2.en img {
 padding-left: 0.5em;
}

.slide-area {
 margin-bottom: 134px;
}

.slide-area ul.slick-box {
 height: 450px;
}

.slide-area ul.slick-box li.works {
 width: 268.91px;
 font-size: 1.5rem;
 font-family: 'shippori-semi';
}

.slide-area ul.slick-box li.works img {
 width: 268.91px;
 height: 301.79px;
 padding-bottom: 24px;
 object-fit: cover;
}

.slide-area ul.slick-box li.works:nth-child(odd) {
 padding-top: 44px;
}

.slide-bottom {
 text-align: right;
 padding-right: 73px;
}

@media screen and (max-width: 900px) {
 h2 {
  padding-left: 0;
  text-align: center;
  padding-bottom: 23px;
 }

 h2.en {
  padding-left: 0;
  justify-content: center;
 }

 .slide-area {
  margin-bottom: 80px;
 }

 .slide-area ul.slick-box {
  height: 311px;
 }

 .slide-area ul.slick-box li.works {
  width: 182.1px;
 }

 .slide-area ul.slick-box li.works img {
  width: 182.1px;
  height: 204.37px;
  padding-bottom: 11px;
 }

 .slide-bottom {
  text-align: left;
  padding-right: 0;
  padding-top: 20px;
 }
}


/* お知らせ
--------------------------------*/
.news .container-full {
 margin-bottom: 57px;
}

.news .container-full img {
 width: 100%;
}

.news ul {
 display: block;
 width: 833px;
 margin: 0 auto;
}

.news ul li {
 font-size: 1.5rem;
 border-bottom: 1px solid #ACACAC;
 padding-bottom: 1.5em;
 margin-bottom: 1.5em;
}

.news ul li span:first-child {
 padding-right: 20px;
}

.news ul li a:hover {
 color: #2A6C08;
}

@media screen and (max-width: 900px) {
 .news .container-full {
  margin-bottom: 27px;
 }

 .news ul {
  width: 100%;
 }

 .news ul li {
  font-size: 1.4rem;
  padding-bottom: 0.8em;
  margin-bottom: 0.8em;
  line-height: 1.5;
 }

 .news ul li span {
  display: block;
  padding-right: 0;
 }
}


@keyframes RightIn {
 0% {
  opacity: 0;
  transform: translateX(-100%);
 }

 100% {
  opacity: 1;
  transform: translateX(0);
 }
}

@keyframes LeftIn {
 0% {
  opacity: 0;
  transform: translateX(100%);
 }

 100% {
  opacity: 1;
  transform: translateX(0);
 }
}

@keyframes fadeup {
 0% {
  transform: translateY(30px);
  opacity: 0;
 }

 80% {
  opacity: 1;
 }

 100% {
  opacity: 1;
  transform: translateY(0);
 }
}

@keyframes fade-a {
 0% {
  opacity: 0;
  transform: rotate(0);
 }

 30% {
  opacity: 1;
  transform: rotate(-2deg);
 }

 55% {
  opacity: 1;
  transform: rotate(-1deg);
 }

 100% {
  opacity: 1;
  transform: rotate(-2deg);
 }
}


@keyframes fade-b {
 0% {
  transform: rotate(0);
  opacity: 0;
 }

 35% {
  transform: rotate(-3deg);
 }

 40% {
  opacity: 1;
 }

 60% {
  opacity: 1;
  transform: rotate(-2deg);
 }

 100% {
  opacity: 1;
  transform: rotate(-3deg);
 }
}

@keyframes fade-c {
 0% {
  opacity: 0;
 }

 100% {
  opacity: 1;
 }
}