@charset "utf-8";
@import url("reset.css");
/*
 * base CSS
 * ---------------------------------------------
 * レスポンシブ等、共通レイアウトに関わるCSS
 */
/* link */

body {
font-size: 1.7em;
}

a {
  color: #333;
  text-decoration: underline;
}
a:visited {
  color: #333;
  text-decoration: underline;
}
a:hover, a:focus, a:active {
  color: #333;
  text-decoration: none;
}


.txtLeft{text-align:left;}
.has-text-align-left{text-align:left;}
.txtRight{text-align:right;}
.has-text-align-right{text-align:right;}
.txtCenter{text-align:center;}
.has-text-align-center{text-align:center;}

.imgRight{float:right;padding-left:2em;}
.imgLeft{float:left;padding-right:2em;}
.size-full{width:100%;height:auto;}

.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}

.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}

.clear_both{clear:both;}

.txtLarge{font-size:120%;}
.txtSmall{font-size:80%;}
.txtBold{font-weight:bold;}
.txt_marker{
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

.noto{font-family: 'Noto Sans JP', sans-serif;}
.noto-s{font-family: 'Noto Serif JP', serif;}
.carme{font-family: 'Carme', sans-serif;}
.raleway{font-family: 'Raleway', sans-serif;}
.hind{font-family: 'Hind Vadodara', sans-serif;}

.f_left{float:left;}
.f_right{float:right;}

/* clear, clearfix */
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

/* row */
.row {
  width: 100%;
  *zoom: 1;
}

.row:before,
.row:after {
  display: table;
  line-height: 0;
  content: "";
}

.row:after {
  clear: both;
}

.row .col {
  display: block;
  float: left;
  width: 100%;
  min-height: 1px;
  margin-left: 2.7624309392265194%;
  *margin-left: 2.709239449864817%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.row .col:first-child {
  margin-left: 0;
}

.row2 .col {
  width: 48.61878453038674%;
  *width: 48.56559304102504%;
}

.row3 .col {
  width: 31.491712707182323%;
  *width: 31.43852121782062%;
}



/*1.ゆらゆら表示*/


.fuwafuwa01 {
  animation: fuwafuwa01 3s infinite ease-in-out .8s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}



@keyframes fuwafuwa01 {
  0% {
    transform:translate(0, 0);
  }
  40% {
    transform:translate(0, -10px);
  }
  100% {
    transform:translate(0, 0);
  }
}





.fuwafuwa02 {
  animation: fuwafuwa02 2s infinite ease-in-out .4s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}



@keyframes fuwafuwa02 {
  0% {
    transform:scale(100%);
  }
  40% {
    transform:scale(105%);
  }
  100% {
    transform:scale(100%);
  }
}




/*1.一文字ずつ表示定*/
.txt_animation {opacity: 0;}
.txt_animation span{opacity: 0;}

/*1.フェードインアニメーションの指定*/

.view {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.scrollanime {opacity: 0;perspective: 1000;}  /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    99.9%, to {
    opacity: 1;
    transform: translate(0px);
    -webkit-transform: translate(0px);
    }
}
 
/*2.上下の動きを指定*/
.updown {
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
}
.downup {
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
}
 
/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {
    transform: translateX(100px);
    -webkit-transform: translateX(100px);}
.slide-left {
    transform: translateX(-100px);
    -webkit-transform: translateX(-100px);}





/* layout */
html {
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  color: #333333;
  height:100%;
  word-break: break-all;
}

section{clear:both;}
.sp{display:none;}
.pc{display:block;}


/* loading */
.loading-wrap {
  position: fixed;
  height:100vh;
  width:100vw;
  background-color:#fff;
  border:none;
  left: 0px;
  top: 0px;
  z-index: 999999999999999999999999999999999999999999999999999;
  width: 100%;
  height: 100%;
display: grid;
place-content: center center; 
justify-content: center center;
place-items: center center;
}
.loading-anime {
  animation-name: loadinganime;
  animation-timing-function:ease;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
@keyframes loadinganime {
  from {
    transform: translateY(0);
      opacity: 100%;
  }
  80% {
      opacity: 100%;
  }
   99.999% {
    transform: translateY(0);
  }   
  to {
    transform: translateY(100%);
      opacity: 0%;
  }
    
}
.loading-animation img{
    width:200px;height:auto;}
.loading-animation img.loading_car{
    width:160px;height:auto;}


/* header */

#header 
{
width:100%;
position: fixed;
z-index:99999;
padding:10px 0px 0px 0px;
top:0px ;
left:0px;
background-color:rgba(255,255,255,0.9);
marginn-bottom:0px;
}

#h_inner{max-width:1200px;width:100%;position: relative;
margin:0px auto 0px auto;height:auto;}

#header h1
{padding-bottom:0px;
margin-bottom:0px;
line-height: 0px;
}


#header h1 img
{display:block;
max-width:300px;
    width:50%;
height:auto;
margin:0px;
padding:0px;

}





/* menu-nav */
#mnav {
position:fixed;
    top:0px;
    right:20px;
z-index:99999;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
#mnav li{display:inline-block;float:left;margin-left:7px;}
#mnav a{display:block;
padding:10px 0px 10px 0px;
width:60px;
font-size:10px;
letter-spacing:1px;
text-align:center;
color:#fff;
font-weight:bold;
text-decoration:none;
line-height:1.2em;
height:40px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#mnav span{display:block;margin-bottom:5px;}
.nav00 a{background-color:#707070;}
.nav01 a{background-color:#6AB259;}
.nav02 a{background-color:#1C7EBE;}
.nav03 a{background-color:#1A4787;}
.nav04 a{background-color:#67B9D1;}
.nav05 a{background-color:#ED7100;}


@media only screen and (max-width: 800px) {
    
  #mnav {
top:inherit;
    bottom:0px;
    right:0px;
    background:rgba(210,210,210,0.70);
    text-align:center;
    width:100%;
      padding-top:7px;
border-bottom:solid 10px #333;
} 
#mnav li{display:inline-block;float:none;margin:0px 1px 0px 1px;}
#mnav a{display:block;
padding:7px 0px 10px 0px;
width:56px;
font-size:8px;
height:36px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#mnav span{display:block;margin-bottom:3px;}
}




/* share_btn */

.share_btn{position:fixed;bottom:50%;left:0px;opacity:0.9}
.share_btn li{text-align: center;line-height:0px;}
.share_btn li a{display:block;padding:8px;}
.share_btn li button{display:block;padding:8px;border:none;background-color:#666;}

.api_btn{background-color:#666;}
.fb_btn{background-color:#3b5998;}
.tw_btn{background-color:#00acee;}
.line_btn{background-color:#06c755;}
.fb_icon{fill:#fff;height:20px;width:auto;}
.tw_icon{fill:#fff;height:20px;width:auto;}
.line_icon{fill:#fff;height:20px;width:auto;}

/* mainvisual */

#mainvisual{max-width:1000px;width:100%;margin:90px auto -20px auto;
    position:relative;

}
.swiper-wrapper{padding-bottom:0px;}
#mainvisual .person01{
    position: absolute;
    bottom: 20px;
    right: 3%;
    width: 80px;
    height: auto;
    z-index: 99999999999999999999999999999;

}
.tori01{width:250px;height:auto;position:fixed;
top:20%;left:-2%;}
.tori02{width:120px;height:auto;position:fixed;
top:10%;right:0px;}


.kumo01{width:500px;height:auto;position:fixed;
top:30%;left:-10%;z-index: 0;}
.kumo02{width:200px;height:auto;position:fixed;
top:20%;right:-5%;z-index: 0;}


.car_area{    

position: absolute;
width:100%;
bottom:0px;
left:0px;

}

.car00_m{
    -webkit-animation: car00_m 2s ease-in-out forwards;
    animation: car00_m 2s ease-in-out forwards;
animation-delay: 5s;
    width:100%;
    position:static;
    margin:0px 0px 20px -400px;


}

.car00{
    width:200px;
    height:auto;
    position: absolute;
    right:-500px;
bottom:0px;
}

.car01_m.move  {
-webkit-animation: car01_m 2s ease-in-out forwards;
animation: car01_m 2s ease-in-out forwards;
    width:100%;
    position:static;
    margin:0px 0px 0px -150px;


}

.car01{
    width:200px;
    height:auto;
    position: absolute;
    right:-240px;
bottom:0px;
}



@keyframes car00_m {

  0% {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  }
  99.9%, to {
  transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
  }
}

@keyframes car01_m {

  0% {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  }
  99.9%, to {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  }
}

/* frontpage */

.mask { 
-webkit-mask-image: url("../images/window.svg");
mask-image: url(../images/window.svg);
-webkit-mask-repeat:no-repeat no-repeat;
mask-repeat:no-repeat no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-position: top right;
mask-position: top right; 

}

  :root {
    --easing: cubic-bezier(.2, 1, .2, 1);
    --transition: .8s var(--easing);
    --color-base: #ffffff;
    --color-gray: #ddd;
    --color-theme: #6AB259;
    --color-theme-darken: #5E9C4F;
    --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;
    --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
    --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;
    --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff,.2);
  }



  [class*=swiper]:focus {
    outline: none;
  }


  .slide-media,
  .thumb-media {
    position: relative;
    overflow: hidden;
  }
  .slide-media img,
  .thumb-media img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

/* sns_btn */
.sns_link_area{width:100%;position: absolute;bottom:0px;
z-index:9999;}
ul.sns_link{text-align:center;
    margin:0px auto 30px auto;
    list-style:none;
    padding:0px;
    text-align: center;
}
ul.sns_link li{
    line-height: 0px;
    list-style: none;
    margin:0px;padding:0px;
    display:inline-block;
}
ul.sns_link li a{padding:10px;}
ul.sns_link li img{
    width:25px;height:auto;
    vertical-align: middle;
    opacity: 0.95;}




  .mv02 {
    margin: 0px 0px 0px 0px;

  }

  .mv02 .swiper-pagination {
text-align: center;
    z-index: 9999;
    margin:0px 0px 0px 0px;
    position:absolute;
      right:20px;
      bottom:20px;
  }
  .mv02 .swiper-pagination-bullet {
    display: block;
    width: 10px;
    height: 10px;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    background-color: #ccc;
    border-radius: 50%;
text-align: center;
    margin: 5px 0px 5px 0px ;
  }
  .mv02 .swiper-pagination-bullet:not(:first-child) {
  }
  .mv02 .swiper-pagination-bullet-active {
    background-color: var(--color-theme);
  }
  .mv02 .swiper-fade .swiper-slide {
    -webkit-transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, transform !important;
    transition-property: opacity, transform, -webkit-transform !important;
    pointer-events: none;
  }
  .mv02 .swiper-fade .swiper-slide-active {
    pointer-events: auto;
  }
  .mv02 .slide {
    display: grid;
    place-content: top; 
    justify-content: top;
    place-items: top;
    height: 420px;
    padding: 0px;
    text-align: left;
    font-family: 'Noto Serif JP', serif;
    letter-spacing: 0.2em;
    position: relative;
  }
  .mv02 .slide-media {
    position: absolute;
    z-index: -1;
    top: 0px;
    right: 5%;
    width: 560px;
    height: 100%;

  }
  .mv02 .slide-media img {
    -webkit-transition: 7s 1s linear;
    transition: 7s 1s linear;
    -webkit-transform: translateX(-1.5%) scale(1.1);
            transform: translateX(-1.5%) scale(1.1);
  }
.mv02 .slide-text{
    -webkit-animation: 2s var(--easing) both;
            animation: 2s var(--easing) both;
    opacity: 0;
  }

.mv02 p.slide-text {
    font-size: 140%;
    line-height:2.4em;
    margin: 4em 0 0 5%;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
    white-space: nowrap;
  }

.mv02 p.slide-text span{
    color: #333;
    display: inline;
    background-color: rgba(255,255,255,0.90); /* 背景色 */
    padding: 0.2em 0.5em 0.2em 0.5em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.30);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.30);
}


  .mv02 .swiper-slide[class*=-active] .slide-media img {
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
    -webkit-transform: translateX(1.5%) scale(1.05);
            transform: translateX(1.5%) scale(1.05);
  }
  .mv02 .swiper-slide.anm-started .slide-title,
  .mv02 .swiper-slide.anm-started .slide-text,
  .mv02 .swiper-slide.anm-started .slide-link {
    -webkit-animation-name: mv02-fadeIn;
            animation-name: mv02-fadeIn;
  }
  .mv02 .swiper-slide.anm-finished .slide-title,
  .mv02 .swiper-slide.anm-finished .slide-text,
  .mv02 .swiper-slide.anm-finished .slide-link {
    -webkit-animation-name: mv02-fadeOut;
            animation-name: mv02-fadeOut;
  }

  @-webkit-keyframes mv02-fadeIn {
    0% {
      -webkit-transform: translateY(6rem);
              transform: translateY(6rem);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes mv02-fadeIn {
    0% {
      -webkit-transform: translateY(6rem);
              transform: translateY(6rem);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @-webkit-keyframes mv02-fadeOut {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(-6rem);
              transform: translateY(-6rem);
      opacity: 0;
    }
  }
  @keyframes mv02-fadeOut {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(-6rem);
              transform: translateY(-6rem);
      opacity: 0;
    }
  }




@media only screen and (min-width:500px) and (max-width: 799px) {
  /* 3947 */
  .mv02 .slide-media {
    width: 460px;
    height: 320px;
      top: 0px;
      right:inherit;
      left:50%;
max-height:320px;
max-width:460px;
      margin-left:-230px;
  }

}

  @media only screen and (max-width: 800px) {
.sns_link_area{width:100%;position: absolute;bottom:0px;}
ul.sns_link{text-align:center;
    margin:0px auto 0px auto;
    list-style:none;
    padding:0px;
    text-align: center;
}

    .mv02 {
      margin-bottom: 0px;
    }
    .mv02 .slide {
        display: grid;
    place-content: center center; 
    justify-content: center center;
    place-items: center center;
      height: 320px;
        text-align:center;
    }
      
      
  .mv02 .slide-media {

      max-height:320px;
    width: 100%;
    height: 100%;
      top: 0px;
      right:0px;

  }
.mv02 p.slide-text {
    font-size: 110%;
    margin: -3em 0 0 0px;
  }

      
#mainvisual{margin:15px auto 0px auto;
}
.swiper-wrapper{padding-bottom:0px;}
      
    #mainvisual .person01{position:absolute;
    width:60px;
    height:auto;
    bottom: 10px;
    right:5%;
}
.mask { 
    -webkit-mask-position: center top;
    mask-position: center top;
}
      
.tori01,.tori02,.tori03,.tori04,.kumo01,.kumo02,.kumo03,.kumo04{display:none;}
      
.car_area{    

bottom:0px;
left:0px;

}      

.car00_m{
    margin:0px 0px 10px -420px;
}

.car00{
    width:140px;
    right:-500px;
bottom:0px;
}

      


.car01_m.move  {
-webkit-animation: none;
animation:none;
    width:100%;
    position:static;
    margin:0px 0px 0px -50px;
  transform: translateX(-50%);
   -webkit-transform: translateX(-50%);

}
.car01_m {
    width:100%;
    position:static;
    margin:0px 0px 0px -50px;
  transform: translateX(-50%);
   -webkit-transform: translateX(-50%);

}

.car01{
    width:100px;
    height:auto;
    position: absolute;
    right:-100px;
bottom:0px;
}

  }


/* contents */

.company_area{
    background-color: #D8F5FF;
    background-image: url("../images/v01.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:0px;
    padding-bottom:0px;
}


.company_area02{
    padding-top:100px;
}

.goaisatsu_area{padding-bottom:50px;}

.lifestyle_area{padding-bottom:50px;}
.lifestyle_area_bottom{
    background-image: url(../images/v02.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height:300px;
    margin-bottom:0px;
    background-color: #D8F5FF;
}

a:hover img.youtube01 {
    transform:scale(1.1,1.1);    transition:1s all;}
.youtube01{
    width:40%;
    min-width: 500px;
    max-width: 600px;
    height: auto;
    margin:0px 0px 80px 0px;
    -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.8);
    box-shadow: 10px 10px 10px rgba(0,0,0,0.8);

}
.youtube_row2{margin:10px auto 60px auto;max-width:900px;}
.youtube_col{margin:10px 0px 0px 0px;
    width:50%;
    display:block;float:left;position: relative}

.youtube_col img.youtube01{
    width:75%;
    height:auto;
    margin:0px auto 10px auto;    
    min-width: auto;
    max-width: auto;
}
.contents p.youtube_fukidashi01
{
position: absolute;
left:30px;
top:0px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
background-color:#333;
font-size:0.8em;
border-radius: 5px;
line-height:1.4em;
}

.youtube_fukidashi01 a{text-decoration:none;display:block;color:#fff;
padding:1.2em 0.5em 0.8em 0.5em;
position: relative;font-weight: 400;font-family: 'Noto Sans JP', sans-serif;}

.youtube_fukidashi01:after {
position: absolute;
right:-9px;
top:20px;
content:" ";
width: 0px;
height: 0px;
border-style: solid;
border-width: 8px 0 8px 10px;
border-color: transparent transparent transparent #333;}

.contents p.youtube_fukidashi02
{
position: absolute;
right:30px;
top:0px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
background-color:#333;
font-size:0.8em;
border-radius: 5px;
line-height:1.4em;
}

.youtube_fukidashi02 a{text-decoration:none;display:block;color:#fff;
padding:1.2em 0.5em 0.8em 0.5em;
position: relative;font-weight: 400;font-family: 'Noto Sans JP', sans-serif;}

.youtube_fukidashi02:after {
position: absolute;
left:-9px;
top:20px;
content:"　";
width: 0px;
height: 0px;
border-style: solid;
border-width: 8px 10px 8px 0;
border-color: transparent #333 transparent transparent;}

.youtube_contents{position: relative}
.insta-container{margin-bottom:50px;}
.insta-container li{display:inline-block;float:left;width:15%;margin:0px 0.5% 0px 0.5% ; position: relative;}

.insta-container li:before{
  content: "";
  display: block;
  padding-top: 100%;
}
.insta-container li img{  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;}

.contact_area{
    background-image: url(../images/v03.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #D8F5FF;
    padding-bottom:250px;
}


.contents{max-width:1000px;width:90%;margin:0px auto 0px auto; font-family: 'Noto Serif JP', serif;}

#service .contents-area{max-width:800px;margin:0px auto 3em auto;}

.contact_area .contents-area.contact_area_mailform{max-width:600px;margin:0px auto 3em auto;}

.contact_area span.txtSmall{
    display:inline-block;
    color:#fff;
    background-color:#ED7100; 
    font-family: 'Noto Sans JP', sans-serif;
    font-size:0.6em;
    padding:0.1em 0.5em 0.1em 0.5em;
    border-radius: 3px;
    margin-left:0.5em;
    line-height:1.4em;
}

.contents-header{padding:4em 0px 3em 0px;text-align: center;}

.contents-header h1{
   
    font-weight: 400;
    text-align: center;
    line-height: 1.7em;
    padding-top: 2em ;
    padding-bottom: 0.5em ;
    font-size: 180%;
    letter-spacing: 0.2em;
}
.contents-header span{
    text-align: center;
    display:inline-block;
    border-top:solid 1px #6AB259;
    padding-top: 1em;
    width:300px;
    letter-spacing: 0.2em;
color:#6AB259;
    
}

.contents h2{
    font-weight: 400;
    line-height: 1.7em;
    font-size: 160%;
    letter-spacing: 0.2em;
    margin-bottom:1em;
    padding-top:1em;
}

.contents h3{
    font-weight: 400;
    line-height: 1.7em;
    padding-bottom: 0.5em;
    font-size: 120%;
    letter-spacing: 0.2em;
}

.table01{margin:0px auto 2em auto;width:100%;
padding-top:3em;max-width:800px; border-top:solid 1px #ccc; }
.table01 th{
    border-bottom:solid 1px #ccc; 
    padding:1em;
    text-align:left;
    letter-spacing: 0.1em;
    line-height: 1.7em;
    white-space: nowrap;
    background-color:rgba(216,245,255,0.30);
}
.table01 td{    
    border-bottom:solid 1px #ccc; 
    padding:1em;
    text-align:left;
    letter-spacing: 0.1em;
    line-height: 1.7em;}

.work_photo{min-width:250px;width:40%;margin:30px auto 0px auto;}
.work_photo img{width:100%;height:auto;}

div.col img{width:100%;height:auto;}

.message_photo{width:20%;height:auto;position: relative;}


.staff01{
    background-image: url("../images/t01.png");
    background-repeat: no-repeat;
    background-size: 130px auto;
    background-position: right bottom;
    margin-bottom:2em;
}
.staff02{
    background-image: url("../images/t02.png");
    background-repeat: no-repeat;
    background-size: 130px auto;
    background-position: left bottom;
    margin-bottom:2em;
}

.staff01 div{
    width:80%;
    margin-right:20%;
    border-right:solid 1px #ccc;
    min-height:300px;
    padding-top:1em;
}
.staff01 div p{margin-right:1em;}

.staff02 div{
    width:80%;
    margin-left:20%;
    border-left:solid 1px #ccc;
    min-height:300px;
    padding-top:1em;
}
    
.staff02 div p{margin-left:1em;}

a.linkbtn{display:inline-block;background:#6AB259;
    text-decoration: none;
    color:#fff; font-family: 'Noto Sans JP', sans-serif;
    padding:1em 3em 1em 3em;
    border-radius: 2em;
    margin-bottom:2em;
}

a.linkbtn:before{content:"▶";padding-right:1em;}

a.linkbtn02{display:inline-block;background:#6AB259;
    text-decoration: none;
    color:#fff; font-family: 'Noto Sans JP', sans-serif;
    padding:0.2em 2em 0.2em 2em;
    border-radius: 2em;
    margin-bottom:2em;
    -webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.6);
    box-shadow: 5px 5px 3px rgba(0,0,0,0.6);
}

.table_sdgs{width:100%;}
.table_sdgs td{width:50%;}
.table_sdgs td img{height:100px;width:auto;margin-bottom:20px;}
img.sdgs{width:30%;min-width:200px;height:auto;}




.contents p{
line-height:2em;
letter-spacing:0.1em;
margin-bottom:1.5em;
}

.contents td ul{margin:0px 0px 0px 2em;letter-spacing:0.1em;}
.contents ul{margin:0px 0px 2em 2em;letter-spacing:0.1em;}
.contents ul li{list-style: disc; margin-bottom:1em;line-height:1.4em;padding-left:0.2em;}

.contents td ol{margin:0px 0px 0px 2em;letter-spacing:0.1em;}
.contents ol{margin:0px 0px 2em 2em;letter-spacing:0.1em;}
.contents ol li{list-style: decimal; margin-bottom:1em;line-height:1.4em;padding-left:0.2em;}

.contents ul.tag_list{list-style: none;margin:0px 0px 2em 0px ;}
.contents ul.tag_list li{display: inline-block;list-style: none; margin-bottom:1em;line-height:1.4em;padding:0.5em 1em 0.5em 1em;
color:#fff;background-color:#6AB259;border-radius:2em;font-weight: bold;}

.contents dl dt{display: block;margin-bottom: 1em;}

.contents hr{
  display:block;
  width: 50%;
  height: 50px;
  margin-top:90px;
  padding:0px auto 0px auto;
  border-top: 1px solid #ccc;
  border-left:none;
  border-bottom:none;
  border-right:none;
  clear: both;
  background-color: transparent;
}



.contents .box01{border:solid 1px #999;
padding:2em 2em 0.5em 2em;margin-bottom:2em;}




.contact_area input{display:inline-block;border:solid 1px #ccc;box-shadow: none;}
.contact_area input.input_radio{margin-right:0.5em;border:solid 1px #ccc;}
.contact_area input:not(.input_radio){
    padding:0.3em;
    border-radius: 10px;
margin:0px 0.2em 1em 0px;border:solid 1px #ccc;border-radius: 10px;}


.contact_area textarea{display:block;width:100%;padding:0.3em;border-radius: 10px;box-shadow: none;}


.contact_area input.input_btn{
    display:inline-block;
    background:#6AB259;
    text-decoration: none;
    color:#fff; font-family: 'Noto Sans JP', sans-serif;
    padding:1em 3em 1em 3em;
    border-radius: 2em;
    margin-bottom:2em;
    border:none;
    cursor: pointer;
    -webkit-appearance: none;
}

/* btn */

/* bread */

#bread{float:right;font-size:0.8em;padding:1em 0px 1em 0px;}
#bread li{display:inline-block;padding:0px 0px 0px 1em;}
#bread li a{padding:0px 1em 0px 1em;}
#bread li:after{content:">";}
#bread li:last-child:after{content:"";}
#bread:after{clear:both;}






/* footer  */

#footer{clear:both;background-color:#333;padding:50px 0px 100px 0px;font-size:0.9em;text-align:center;color:#fff;}
#f_inner{max-width:1000px; margin:0px auto 0px auto;}

#footer #copyright{line-height:1.7em;}

/* pagetop */
p#pagetop{
	position: fixed;
	bottom: 30px;
	right: 120px;
	color:#6AB259;
}
* html p#pagetop{
	text-align:right;
	margin-right:20px;
	margin-bottom:20px;
}
p#pagetop a{text-decoration:none;font-size: 50px;color:#6AB259;}


/*
 * tablet and smartphone START
 * ---------------------------------------------
 */
@media only screen and (max-width: 990px) {
  /* layout */

.sp{display:block;}
.pc{display:none;}

}
/*
 * tablet and smartphone END
 * ---------------------------------------------
 */
/*
 * tablet START
 * ---------------------------------------------
 */
@media only screen and (min-width:800px) and (max-width: 999px) {
  /* #header-nav-sp */

#contents{margin:0px 0px 0px 0px;}

#f_inner{max-width:1000px; margin:0px;}	



}
/*
 * tablet END
 * ---------------------------------------------
 */
/*
 * smart phone START
 * ---------------------------------------------
 */
@media only screen and (max-width: 800px) {
body {
  font-size:1.4em;
}


  /* row */
  .row .col {
    float: none;
    margin-left: 0;
  }

  .row2 .col {
    width: auto;
  }

  .row3 .col {
    width: auto;
  }
    
.imgRight{float:none;padding-left:0px;margin:0px auto 2em auto;display:block;}
.imgLeft{float:none;padding-right:0px;margin:0px auto 2em auto;display:block;}

    .message_photo{min-width:200px;width:40%;height:auto;}
    
    div.col img{min-width:250px;width:60%;margin:0px auto 20px auto;display:block;height:auto;}
    
.youtube_contents div.col img{min-width:250px;width:60%;margin:0px auto 0px auto;display:inline-block;height:auto;}
    .youtube_contents div.col{margin-bottom:20px;text-align:center;}
.loading-animation img{
    width:120px;height:auto;}
.loading-animation img.loading_car{
    width:120px;height:auto;}

/* header */
#header {position: static;}
    #header h1 img{margin:0px auto 0px auto;}
#h_inner{margin:0px;}

.youtube_row2{margin:0px 0px 60px 0px;}
.youtube01{
    width:50%;
    min-width: 300px;
    }	
.youtube_col{margin:0px 0px 0px 0px;}
    
.youtube_col img.youtube01{
    width:80%;
    margin:0px auto 0px auto;  
    height:auto;
    }
.contents p.youtube_fukidashi01
{    left:0px;font-size:0.6em;}
.contents p.youtube_fukidashi02
{    right:0px;font-size:0.6em;}

.staff01{
    background-image: url("../images/t01.png");
    background-repeat: no-repeat;
    background-size: 20% auto;
    background-position: right bottom;
}
.staff02{
    background-image: url("../images/t02.png");
    background-repeat: no-repeat;
    background-size: 20% auto;
    background-position: left bottom;
    
}
.staff01 div{
    width:70%;
    margin-right:30%;
    border-right:solid 1px #ccc;
    padding-top:1em;
    }
.staff01 div p{margin-right:1em;}
.staff02 div{
    width:70%;
    margin-left:30%;
    border-left:solid 1px #ccc;
    padding-top:1em;
    }
.staff02 div p{margin-left:1em;}

.table_sdgs td img{height:50px;width:auto;margin-bottom:20px;}	
    
    
.company_area02{
    padding-top:0px;
}
    
.contents-header{padding:2em 0px 2em 0px;text-align: center;}

.contents-header h1{
    text-align: center;
    line-height: 1.7em;
    padding-top: 1em ;

}
    .insta-container{margin-bottom:50px;}    
.insta-container li{display:inline-block;float:left;width:30%;margin:0px 0.5% 0px 0.5% ; position: relative;}
    
.contact_area {    padding-bottom:70px;}
/* frontpage */


	
/* mainvisual */


/* wrap */
	
	
/* contents */
.company_area{
    background-image: url("../images/v01_sp.png");
    padding-top:10px;
    background-size: contain;}

.lifestyle_area_bottom{
    background-image: url(../images/v02_sp.png);
    background-size: contain;
    height:150px;
    margin-bottom:0px;
    }


/* footer  */

.share_btn{position:fixed;bottom:15%;left:0px;opacity:0.9}
/* pagetop */
p#pagetop{
	position: fixed;
	bottom: 60px;
	right: 10px;
	color:#6AB259;
}
* html p#pagetop{
	text-align:right;
	margin-right:10px;
	margin-bottom:60px;
}
p#pagetop a{text-decoration:none;font-size: 50px;}

}






.shapedividers_com-3277{
overflow:hidden;
position:relative;
}
.shapedividers_com-3277::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 0;
pointer-events: none;
background-repeat: no-repeat; 
background-size: 389% 38px;
background-position: 69% 100%;    
background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23d8f5ff"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23d8f5ff"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23d8f5ff"/></svg>'); 
}

@media (min-width:768px){
.shapedividers_com-2084::before{
background-size: 288% 90px;
background-position: 50% 100%;   
}  
}
 
@media (min-width:1025px){
.shapedividers_com-2084::before{ 
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 90px;
background-position: 50% 100%;  
}
}
@media (min-width:2100px){
.shapedividers_com-2084::before{
background-size: 100% calc(2vw + 90px);
}
}
 

 
 .shapedividers_com-8924{
overflow:hidden;
position:relative;
}
.shapedividers_com-8924::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 0;
pointer-events: none;
background-repeat: no-repeat; 
background-size: 389% 50px;
background-position: 69% 100%;    
background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%236ab259"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%236ab259"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%236ab259"/></svg>'); 
}

@media (min-width:768px){
.shapedividers_com-3748::before{
background-size: 288% 90px;
background-position: 50% 100%;   
}  
}
 
@media (min-width:1025px){
.shapedividers_com-3748::before{ 
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 90px;
background-position: 50% 100%;  
}
}
@media (min-width:2100px){
.shapedividers_com-3748::before{
background-size: 100% calc(2vw + 90px);
}
}


.shapedividers_com-3658{
overflow:hidden;
position:relative;
}
.shapedividers_com-3658::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 0;
pointer-events: none;
background-repeat: no-repeat; 
background-size: 100% 40px;
background-position: 50% 0%;    
transform: rotateY(180deg);
background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%236ab259"/></svg>'); 
}

@media (min-width:768px){
.shapedividers_com-3658::before{
background-size: 100% 54px;
background-position: 50% 0%;  
transform: rotateY(180deg); 
}  
}
 
@media (min-width:1025px){
.shapedividers_com-3658::before{ 
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 90px;
background-position: 50% 0%; 
transform: rotateY(180deg); 
}
}
@media (min-width:2100px){
.shapedividers_com-3658::before{
background-size: 100% calc(2vw + 90px);
}
}



.shapedividers_com-3947{
overflow:hidden;
position:relative;
    
}
.shapedividers_com-3947::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 0;
pointer-events: none;
background-repeat: no-repeat; 
background-size: 100% 40px;
background-position: 50% 100%;    
transform: rotateY(180deg);
background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23d8f5ff"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23d8f5ff"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23d8f5ff"/></svg>'); 
}

@media (min-width:768px){
.shapedividers_com-3947::before{
background-size: 100% 54px;
background-position: 50% 100%;  
transform: rotateY(180deg); 
}  
}
 
@media (min-width:1025px){
.shapedividers_com-3947::before{ 
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 90px;
background-position: 50% 100%; 
transform: rotateY(180deg); 
}
}
@media (min-width:2100px){
.shapedividers_com-3947::before{
background-size: 100% calc(2vw + 90px);
}
}