/* =========================
   Active Animation
========================= */
.slidesec.is-active .slideimg picture img {
  animation: slideimgAnime 20s linear forwards;
}

.slidesec.is-active .slidecc h2 {
  animation: slideH2Anime 18s ease-in-out forwards;
}

.slidesec.is-active .slidecc p.scp01 {
  animation: slideP01Anime 17s ease-in-out forwards;
}

.slidesec.is-active .slidecc p.scp02 {
  animation: slideP02Anime 16.5s ease-in-out forwards;
}

/* =========================
   Keyframes
========================= */

/* slideimg
   全体30秒
   0-2秒       : フェードイン
   2-28秒      : 110% → 100% に縮小しながら表示維持
   28-30秒     : フェードアウト
*/
@keyframes slideimgAnime {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  6.666% {
    opacity: 1;
    transform: scale(1.1923);
  }
  93.333% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* h2
   全体28秒
   0-2.5秒      : 待機
   2.5-3.5秒    : 右100px → 0へスライドイン
   3.5-26秒     : 停止
   26-28秒      : フェードアウト
*/
@keyframes slideH2Anime {
  0% {
    opacity: 0;
    margin-left: 100px;
  }
  8.928% {
    opacity: 0;
    margin-left: 100px;
  }
  12.5% {
    opacity: 1;
    margin-left: 0;
  }
  92.857% {
    opacity: 1;
    margin-left: 0;
  }
  100% {
    opacity: 0;
    margin-left: 0;
  }
}

/* p.scp01
   全体27秒
   0-3.5秒      : 待機
   3.5-4.5秒    : スライドイン
   4.5-25秒     : 停止
   25-27秒      : フェードアウト
*/
@keyframes slideP01Anime {
  0% {
    opacity: 0;
    margin-left: 100px;
  }
  12.963% {
    opacity: 0;
    margin-left: 100px;
  }
  16.667% {
    opacity: 1;
    margin-left: 0;
  }
  92.593% {
    opacity: 1;
    margin-left: 0;
  }
  100% {
    opacity: 0;
    margin-left: 0;
  }
}

/* p.scp02
   全体26.5秒
   0-4秒        : 待機
   4-5秒        : スライドイン
   5-24.5秒     : 停止
   24.5-26.5秒  : フェードアウト
*/
@keyframes slideP02Anime {
  0% {
    opacity: 0;
    margin-left: 100px;
  }
  15.094% {
    opacity: 0;
    margin-left: 100px;
  }
  18.868% {
    opacity: 1;
    margin-left: 0;
  }
  92.453% {
    opacity: 1;
    margin-left: 0;
  }
  100% {
    opacity: 0;
    margin-left: 0;
  }
}




/* Style for PCs */
@media screen and (min-width: 1025px) {

/* =========================
   Slider Base
========================= */
.slidebase {
  width: 100%;
  height: 98vh;
  position: relative;
  overflow: hidden;
}

.slidesec {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  overflow: hidden;
}

.slidesec.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.slidesec.is-prev {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* =========================
   Image Area
========================= */
.slideimg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.slideimg picture {
  width: 100%;
  height: 100%;
  display: block;
}

.slideimg picture img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  transform-origin: center center;
  opacity: 0;
  transform: scale(1.2);
}

/* =========================
   Text Area
========================= */
.slidecc {
  position: absolute;
  left: 10%;
  top: 30%;
  z-index: 2;
}

.slidecc h2,
.slidecc p.scp01,
.slidecc p.scp02 {
  opacity: 0;
  margin-left: 100px;
}
.slidecc h2 {
 font-size: clamp(32px, 2.5vw, 100px);
 font-family: var(--font-min);
 font-weight: 500;
 line-height: 1em;
 margin-bottom: 0.5em;
}
.slidecc p {
 font-size: clamp(18px, 1.25vw, 40px);
 font-family: var(--font-min);
 font-weight: 500;
 line-height: 2em;
 margin-bottom: 0em;
}


/* =========================
   IntroSecton
========================= */
.intromm {
 width: 100%;
 height: auto;
 display: block;
 background-image: url(../img/index/philosophy_bg.webp);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: 100% auto;
}
.intro_cc {
 width: 100%;
 height: auto;
 display: block;
 padding:150px 10% 4%;
}
.intro_cc h2 {
 font-size: clamp(32px, 2.5vw, 100px);
 font-family: var(--font-min);
 font-weight: 500;
 text-align: center;
 line-height: 1em;
 margin-bottom: 0.75em;
}
.intro_cc p {
 font-size: clamp(14px, 1vw, 20px);
 font-family: var(--font-min);
 font-weight: 500;
 text-align: center;
 line-height: 2em;
 margin-bottom: 0em;
}

.intro_cc h2.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.intro_cc h2.animove {
 opacity: 1;
 margin-top: 0;
}

.intro_cc p.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.intro_cc p.animove {
 opacity: 1;
 margin-top: 0;
}

/* =========================
   Intro image slider
========================= */
.scrollwrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 20%;
}

.scrolllist {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.scrolllist li {
  flex: 0 0 auto;
  width: 200px; /* ブラウザ幅100% */
  margin: 1% 2%;
  padding: 0;
  box-shadow:0px 5px 10px rgba(0,0,0,0.2);
}

.scrolllist li img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.scrollwrap.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.scrollwrap.animove {
 opacity: 1;
 margin-top: 0;
}


/* =========================
   Service
========================= */
.service01mm, .service02mm, .gallerymm {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding:100px 10%;
}
.service01mm.aniactive {
 margin-left: -10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
 padding-top: 150px;
}
.service01mm.animove {
 opacity: 1;
 margin-left: 0;
}
.service02mm.aniactive {
 margin-left: -10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.service02mm.animove {
 opacity: 1;
 margin-left: 0;
}

.gallerymm.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
 padding-bottom: 150px;
}
.gallerymm.animove {
 opacity: 1;
 margin-top: 0;
}

#service_sec h2 {
  font-size: clamp(18px, 3vw, 40px);
  font-family: var(--font-min);
  font-weight: 500;
  line-height: 1.2em;
  margin-bottom: 0.25em;
}
#service_sec h3 {
  font-size: clamp(10px, 1.6vw, 18px);
  font-weight: 500;
  font-family: var(--font-en);
  line-height: 1.2em;
  color:var(--color-1st);
  margin-bottom: 0.25em;
}

#service_sec p.ind_se_comment {
 font-size: 14px;
  line-height: 2.2em;
  margin-bottom: 2em;
}

.service01img ul.serani, .service02img ul.serani {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
}
.service01img ul.serani li, .service02img ul.serani li {
 width:48%;
 height: auto;
 display: block;
 margin:1%;
}
.service01img ul.serani li, .service02img ul.serani li img {
 overflow: hidden;
 border-radius: 3px;
}
ul.serani li.aniactive {
 margin-top:50px;
 opacity: 0;
}
ul.serani li:nth-child(1).aniactive {
 transition: 1s ease-in-out 0.5s;
-webkit-transition: 1s ease-in-out 0.5s;
}
ul.serani li:nth-child(2).aniactive {
 transition: 1s ease-in-out 0.75s;
-webkit-transition: 1s ease-in-out 0.75s;
}
ul.serani li:nth-child(3).aniactive {
 transition: 1s ease-in-out 1s;
-webkit-transition: 1s ease-in-out 1s;
}
ul.serani li:nth-child(4).aniactive {
 transition: 1s ease-in-out 1.25s;
-webkit-transition: 1s ease-in-out 1.25s;
}
ul.serani li.animove {
 margin-top:0px;
 opacity: 1;
}


/* Service01 */
.service01_cc {
 width: 50%;
 height: auto;
 display: block;
}
.service01img {
 width:40%;
 height: auto;
 display: block;
}

/* Service02 */
.service02_cc {
 width: 50%;
 height: auto;
 display: block;
 order:2;
}
.service02img {
 width:40%;
 height: auto;
 display: block;
}


/* gallery */
.gallery_cc {
 width: 50%;
 height: auto;
 display: block;
}
.galleryimg {
 width:40%;
 height: auto;
 display: block;
 position: relative;
}
.galleryimg img.galimg01 {
 width:80%;
 height: auto;
 display: block;
 margin:0 0 30% 20%;
}
.galleryimg img.galimg01.aniactive {
 margin-left:10%;
 opacity: 0;
 transition: 1s ease-in-out 0.5s;
-webkit-transition: 1s ease-in-out 0.5s;
}
.galleryimg img.galimg01.animove {
 margin-left:20%;
 opacity: 1;
}
.galleryimg img.galimg02 {
 width:70%;
 height: auto;
 display: block;
 position: absolute;
 bottom: 0;
 left:0;
 z-index:2;
}
.galleryimg img.galimg02.aniactive {
 margin-left:10%;
 opacity: 0;
 transition: 1s ease-in-out 0.75s;
-webkit-transition: 1s ease-in-out 0.75s;
}
.galleryimg img.galimg02.animove {
 margin-left:0%;
 opacity: 1;
}



}


/* Style for iPad Pro */
@media screen and (min-width: 769px) and (max-width: 1024px) {


/* =========================
   Slider Base
========================= */
.slidebase {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.slidesec {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  overflow: hidden;
}

.slidesec.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.slidesec.is-prev {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* =========================
   Image Area
========================= */
.slideimg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.slideimg picture {
  width: 100%;
  height: 100%;
  display: block;
}

.slideimg picture img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  transform-origin: center center;
  opacity: 0;
  transform: scale(1.2);
}

/* =========================
   Text Area
========================= */
.slidecc {
  position: absolute;
  left: 10%;
  top: 30%;
  z-index: 2;
}

.slidecc h2,
.slidecc p.scp01,
.slidecc p.scp02 {
  opacity: 0;
  margin-left: 100px;
}
.slidecc h2 {
 font-size: clamp(32px, 2.5vw, 100px);
 font-family: var(--font-min);
 font-weight: 500;
 line-height: 1em;
 margin-bottom: 0.5em;
}
.slidecc p {
 font-size: clamp(18px, 1.25vw, 40px);
 font-family: var(--font-min);
 font-weight: 500;
 line-height: 2em;
 margin-bottom: 0em;
}


/* =========================
   IntroSecton
========================= */
.intromm {
 width: 100%;
 height: auto;
 display: block;
 background-image: url(../img/index/philosophy_bg.webp);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: 120% auto;
}
.intro_cc {
 width: 100%;
 height: auto;
 display: block;
 padding:150px 10% 6%;
}
.intro_cc h2 {
 font-size: clamp(28px, 2.5vw, 100px);
 font-family: var(--font-min);
 font-weight: 500;
 text-align: left;
 line-height: 1em;
 margin-bottom: 0.75em;
}
.intro_cc p {
 font-size: clamp(16px, 1vw, 20px);
 font-family: var(--font-min);
 font-weight: 500;
 text-align: left;
 line-height: 2em;
 margin-bottom: 0em;
}

.intro_cc h2.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.intro_cc h2.animove {
 opacity: 1;
 margin-top: 0;
}

.intro_cc p.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.intro_cc p.animove {
 opacity: 1;
 margin-top: 0;
}

/* =========================
   Intro image slider
========================= */
.scrollwrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 30%;
}

.scrolllist {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.scrolllist li {
  flex: 0 0 auto;
  width: 150px; /* ブラウザ幅100% */
  margin: 1% 2%;
  padding: 0;
  box-shadow:0px 5px 10px rgba(0,0,0,0.2);
}

.scrolllist li img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.scrollwrap.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.scrollwrap.animove {
 opacity: 1;
 margin-top: 0;
}


/* =========================
   Service
========================= */
.service01mm, .service02mm, .gallerymm {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding:100px 10%;
}
.service01mm.aniactive {
 margin-left: -10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
 padding-top: 150px;
}
.service01mm.animove {
 opacity: 1;
 margin-left: 0;
}
.service02mm.aniactive {
 margin-left: -10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.service02mm.animove {
 opacity: 1;
 margin-left: 0;
}

.gallerymm.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
 padding-bottom: 150px;
}
.gallerymm.animove {
 opacity: 1;
 margin-top: 0;
}

#service_sec h2 {
  font-size: clamp(18px, 3vw, 40px);
  font-family: var(--font-min);
  font-weight: 500;
  line-height: 1.2em;
  margin-bottom: 0.25em;
}
#service_sec h3 {
  font-size: clamp(10px, 1.6vw, 18px);
  font-weight: 500;
  font-family: var(--font-en);
  line-height: 1.2em;
  color:var(--color-1st);
  margin-bottom: 0.25em;
}

#service_sec p.ind_se_comment {
 font-size: 14px;
  line-height: 2.2em;
  margin-bottom: 2em;
}

.service01img ul.serani, .service02img ul.serani {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
}
.service01img ul.serani li, .service02img ul.serani li {
 width:48%;
 height: auto;
 display: block;
 margin:1%;
}
.service01img ul.serani li, .service02img ul.serani li img {
 overflow: hidden;
 border-radius: 3px;
}
ul.serani li.aniactive {
 margin-top:50px;
 opacity: 0;
}
ul.serani li:nth-child(1).aniactive {
 transition: 1s ease-in-out 0.5s;
-webkit-transition: 1s ease-in-out 0.5s;
}
ul.serani li:nth-child(2).aniactive {
 transition: 1s ease-in-out 0.75s;
-webkit-transition: 1s ease-in-out 0.75s;
}
ul.serani li:nth-child(3).aniactive {
 transition: 1s ease-in-out 1s;
-webkit-transition: 1s ease-in-out 1s;
}
ul.serani li:nth-child(4).aniactive {
 transition: 1s ease-in-out 1.25s;
-webkit-transition: 1s ease-in-out 1.25s;
}
ul.serani li.animove {
 margin-top:0px;
 opacity: 1;
}


/* Service01 */
.service01_cc {
 width: 50%;
 height: auto;
 display: block;
}
.service01img {
 width:40%;
 height: auto;
 display: block;
}

/* Service02 */
.service02_cc {
 width: 50%;
 height: auto;
 display: block;
 order:2;
}
.service02img {
 width:40%;
 height: auto;
 display: block;
}


/* gallery */
.gallery_cc {
 width: 50%;
 height: auto;
 display: block;
}
.galleryimg {
 width:40%;
 height: auto;
 display: block;
 position: relative;
}
.galleryimg img.galimg01 {
 width:80%;
 height: auto;
 display: block;
 margin:0 0 30% 20%;
}
.galleryimg img.galimg01.aniactive {
 margin-left:10%;
 opacity: 0;
 transition: 1s ease-in-out 0.5s;
-webkit-transition: 1s ease-in-out 0.5s;
}
.galleryimg img.galimg01.animove {
 margin-left:20%;
 opacity: 1;
}
.galleryimg img.galimg02 {
 width:70%;
 height: auto;
 display: block;
 position: absolute;
 bottom: 0;
 left:0;
 z-index:2;
}
.galleryimg img.galimg02.aniactive {
 margin-left:10%;
 opacity: 0;
 transition: 1s ease-in-out 0.75s;
-webkit-transition: 1s ease-in-out 0.75s;
}
.galleryimg img.galimg02.animove {
 margin-left:0%;
 opacity: 1;
}


}

/* Style for Smartphone */
@media screen and (max-width: 768px) {


/* =========================
     Slider Base
  ========================= */
  .slidebase {
    width: 100%;
    height: 100svh;
    position: relative;
    overflow: hidden;
  }

  .slidesec {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    overflow: hidden;
  }

  .slidesec.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }

  .slidesec.is-prev {
    opacity: 0;
    visibility: hidden;
    z-index: 1;
  }

  /* =========================
     Image Area
     9:16画像前提
  ========================= */
  .slideimg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
  }

  .slideimg picture {
    width: 100%;
    height: 100%;
    display: block;
  }

  .slideimg picture img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
    opacity: 0;
    transform: scale(1.2);
  }

  /* =========================
     Text Area
  ========================= */
  .slidecc {
    width: 84%;
    position: absolute;
    left: 8%;
    top: 30%;
    z-index: 2;
  }

  .slidecc h2,
  .slidecc p.scp01,
  .slidecc p.scp02 {
    opacity: 0;
    margin-left: 60px;
  }

  .slidecc h2 {
    font-size: clamp(20px, 2vw, 48px);
    font-family: var(--font-min);
    font-weight: 500;
    line-height: 1.25em;
    background-color: rgba(255,255,255,0.9);
    margin-bottom: 0.6em;
  }

  .slidecc p {
    font-size: clamp(12px, 1vw, 22px);
    font-family: var(--font-min);
    font-weight: 500;
    line-height: 1.9em;
    background-color: rgba(255,255,255,0.9);
    margin-bottom: 0;
  }


  /* =========================
   IntroSecton
========================= */
.intromm {
 width: 100%;
 height: auto;
 display: block;
 background-image: url(../img/index/philosophy_bg.webp);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: 200% auto;
}
.intro_cc {
 width: 100%;
 height: auto;
 display: block;
 padding:100px 10% 10%;
}
.intro_cc h2 {
 font-size: clamp(24px, 2.5vw, 100px);
 font-family: var(--font-min);
 font-weight: 500;
 text-align: left;
 line-height: 1.5em;
 margin-bottom: 0.75em;
}
.intro_cc p {
 font-size: clamp(14px, 1vw, 20px);
 font-family: var(--font-min);
 font-weight: 500;
 text-align: left;
 line-height: 2em;
 margin-bottom: 0em;
}

.intro_cc h2.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.intro_cc h2.animove {
 opacity: 1;
 margin-top: 0;
}

.intro_cc p.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.intro_cc p.animove {
 opacity: 1;
 margin-top: 0;
}

/* =========================
   Intro image slider
========================= */
.scrollwrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 50%;
}

.scrolllist {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.scrolllist li {
  flex: 0 0 auto;
  width: 150px; /* ブラウザ幅100% */
  margin: 1% 2%;
  padding: 0;
  box-shadow:0px 5px 10px rgba(0,0,0,0.2);
}

.scrolllist li img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.scrollwrap.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.scrollwrap.animove {
 opacity: 1;
 margin-top: 0;
}


/* =========================
   Service
========================= */
.service01mm, .service02mm, .gallerymm {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 padding:100px 10% 70px;
}
.service01mm.aniactive {
 margin-left: -10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
 padding-top: 150px;
}
.service01mm.animove {
 opacity: 1;
 margin-left: 0;
}
.service02mm.aniactive {
 margin-left: -10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
}
.service02mm.animove {
 opacity: 1;
 margin-left: 0;
}

.gallerymm.aniactive {
 margin-top: 10%;
 opacity: 0;
 transition: 1s ease-in-out;
 -webkit-transition: 1s ease-in-out;
 padding-bottom: 150px;
}
.gallerymm.animove {
 opacity: 1;
 margin-top: 0;
}

#service_sec h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-family: var(--font-min);
  font-weight: 500;
  line-height: 1.2em;
  margin-bottom: 0.25em;
}
#service_sec h3 {
  font-size: clamp(12px, 1.6vw, 18px);
  font-weight: 500;
  font-family: var(--font-en);
  line-height: 1.2em;
  color:var(--color-1st);
  margin-bottom:1em;
}

#service_sec p.ind_se_comment {
 font-size: 14px;
  line-height: 2.2em;
  margin-bottom: 2em;
}

.service01img ul.serani, .service02img ul.serani {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
}
.service01img ul.serani li, .service02img ul.serani li {
 width:48%;
 height: auto;
 display: block;
 margin:1%;
}
.service01img ul.serani li, .service02img ul.serani li img {
 overflow: hidden;
 border-radius: 3px;
}
ul.serani li.aniactive {
 margin-top:50px;
 opacity: 0;
}
ul.serani li:nth-child(1).aniactive {
 transition: 1s ease-in-out 0.5s;
-webkit-transition: 1s ease-in-out 0.5s;
}
ul.serani li:nth-child(2).aniactive {
 transition: 1s ease-in-out 0.75s;
-webkit-transition: 1s ease-in-out 0.75s;
}
ul.serani li:nth-child(3).aniactive {
 transition: 1s ease-in-out 1s;
-webkit-transition: 1s ease-in-out 1s;
}
ul.serani li:nth-child(4).aniactive {
 transition: 1s ease-in-out 1.25s;
-webkit-transition: 1s ease-in-out 1.25s;
}
ul.serani li.animove {
 margin-top:0px;
 opacity: 1;
}


/* Service01 */
.service01_cc {
 width: 100%;
 height: auto;
 display: block;
 margin-bottom: 70px;
}
.service01img {
 width:100%;
 height: auto;
 display: block;
}

/* Service02 */
.service02_cc {
 width: 100%;
 height: auto;
 display: block;
 margin-bottom: 70px;
}
.service02img {
 width:100%;
 height: auto;
 display: block;
}


/* gallery */
.gallery_cc {
 width: 100%;
 height: auto;
 display: block;
 margin-bottom: 70px;
}
.galleryimg {
 width:100%;
 height: auto;
 display: block;
 position: relative;
}
.galleryimg img.galimg01 {
 width:80%;
 height: auto;
 display: block;
 margin:0 0 30% 20%;
}
.galleryimg img.galimg01.aniactive {
 margin-left:10%;
 opacity: 0;
 transition: 1s ease-in-out 0.5s;
-webkit-transition: 1s ease-in-out 0.5s;
}
.galleryimg img.galimg01.animove {
 margin-left:20%;
 opacity: 1;
}
.galleryimg img.galimg02 {
 width:70%;
 height: auto;
 display: block;
 position: absolute;
 bottom: 0;
 left:0;
 z-index:2;
}
.galleryimg img.galimg02.aniactive {
 margin-left:10%;
 opacity: 0;
 transition: 1s ease-in-out 0.75s;
-webkit-transition: 1s ease-in-out 0.75s;
}
.galleryimg img.galimg02.animove {
 margin-left:0%;
 opacity: 1;
}


}