#container{
background: #84c62e;
background: -moz-linear-gradient(-45deg, #84c62e 0%, #0082e5 100%);
background: -webkit-linear-gradient(-45deg, #84c62e 0%,#0082e5 100%);
background: linear-gradient(135deg, #84c62e 0%,#0082e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84c62e', endColorstr='#0082e5',GradientType=1 );
}

/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*                  HEADER                  */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

#header{
box-sizing:border-box;
width:100%;
background: #84c62e;
background: -moz-linear-gradient(-45deg, #84c62e 0%, #0082e5 100%);
background: -webkit-linear-gradient(-45deg, #84c62e 0%,#0082e5 100%);
background: linear-gradient(135deg, #84c62e 0%,#0082e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84c62e', endColorstr='#0082e5',GradientType=1 );
position:relative;
}
#header .header-in{
position:relative;
max-width:980px;
margin:0 auto;

}
#header nav,
#footer nav{
width:100%;
text-align:center;
color:#fff;
}
#header nav{
padding:10vh 0 7.5vh;
}
#footer nav{
padding:3vh 0 1em;
}
#header nav a,
#footer nav a{
color:#fff;
padding:0.5em;
}
#header nav a:hover,
#footer nav a:hover{
background:rgba(255,255,255,0.2);
}
#header .kamban{
display:flex;
justify-content: center;
align-items:center;
}
#header .header-left{
}
#header .header-left h2{
color:#fff;
font-size:5vw;
}
#header .header-left h2 img{
max-width:unset;
height:40vh;
max-height:calc(96vw * 0.618);
min-height:300px;
}
#header .header-right{
box-sizing:border-box;
position:relative;
max-width:50vw;
width: calc(60vh * 0.74);
max-height:calc(50vw / 0.74);
padding: 20px 3px;
}
#header *{
border:0;
font-family: -apple-system, kozuka-gothic-pro, sans-serif;
font-weight: 200;
}
#header .header-right p{
width:100%;
}
#header .header-right p img{
box-sizing:border-box;
padding:0;
width:100%;
height:100%;
}
#header .js-flickity-ipad{
width:100%;
height:100%;
background-size:100% 100%;
position:absolute;
left:0;
top:0;
}

.header-nav-emergency{
text-align:center;
}
.header-nav-emergency a{
display:inline-block;
margin: 0 1rem;
padding:1em 0.5em;
border:1px solid #6EB92C!important;
background:rgba(255,255,255,0.5);
line-height:1.2;
font-family:sans-serif!important;
color:#FF2626;
}

@media screen and (max-width:979px) {
  #header nav{
    padding:5vh 0 2.5vh;
  }
  #header .kamban{
  }
  #header .header-in{
    margin:0 2vw;
    min-height:initial;
  }
  #header .header-right{
    margin-right:5vw;
    padding:2vmax 1vmax;
    box-sizing:border-box;
  }
  #header .header-right p{
    min-height:100%;
  }
}

@media screen and (max-width:500px) {
  #header .header-left h2 img{
    min-height:unset;
  }
  #header nav, #footer nav{
    letter-spacing: -.40em;
  }
  #header nav a, #footer nav a{
    letter-spacing: normal;
    display:inline-block;
    box-sizing:border-box;
    width:25%;
  }
}



/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*               CONTENTS(TOP)              */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

.header-nav-buttons{
display:flex;
max-width:700px;
margin:0 auto;
padding:2.5vh 1rem 10vh;
}
.header-nav-buttons > li{
flex:1;
margin-left:5%;
}
.header-nav-buttons > li:first-child{
margin-left:0;
}
.header-nav-buttons > li a{
display:inline-block;
color:#ffffff;
width:100%;
}
.header-nav-buttons > li a:hover img{
transform:rotate(5deg);
}
.header-nav-buttons > li p{
margin-top:1rem;
text-align:center;
}




.index-button-area{
padding:45px 0 90px;
}
.index-button-area a{
display:block;
margin: 0 auto;
padding:1em 0;
text-align:center;
max-width:14em;
font-size:120%;
border:3px solid #00C8DC;
color:#00B6CA;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.index-button-area a:hover{
border:3px solid #84C62E;
color:#71A826;
}
#products .index-button-area a,
#footer .index-button-area a{
border:3px solid rgba(68,68,68,1);
color:rgba(68,68,68,1);
}
#products .index-button-area a:hover{
border:3px solid #CDAE01;
color:#CDAE01;
}
#new .index-button-area a{
border:3px solid #008C46;
background:rgba(255,255,255,0.1);
font-weight:bold;
color:#008C46;
}
#new .index-button-area a:hover{
border:3px solid #CDAE01;
color:#CDAE01;
}
#about .index-button-area a{
border:3px solid #fff;
color:#fff;
}
#about .index-button-area a:hover{
border:3px solid #663399;
color: #663399;
}
#footer{
position:relative;
}
#footer .index-button-area a:hover{
border:3px solid #fff;
color: #fff;
}

@media screen and (max-width:500px) {
  .header-nav-buttons > li p{
    margin-top:2vw;
    font-size:2.75vw;
  }
  #products .products-in h3{
    width:80%;
  }
  #products .products-list{
    padding-bottom:10vh;
  }
  #products .products-list > li{
    float:none;
    width:100%;
    margin-bottom:8vh;
    text-align:right;
  }
  #products .products-list > li:last-child{
    margin-bottom:0;
  }
  #products .products-list > li > p{
    box-sizing:border-box;
    width:32%;
    padding-right:3%;
    text-align:left;
    float:left;
  }
  #products .products-list > li > ul{
    width:65%;
    margin-top:1vh;
    float:left;
  }
  #products .products-list > li > ul > li{
    font-size:4vmin;
  }
  #products .products-list > li > ul > li:last-child{
    margin-bottom:0;
  }
  #products .products-list > li img{
    max-width:100%;
  }
}

#new{
overflow:hidden;
position:relative;
background-image:url("./../images/index/bg-news.jpg");
background-color:rgba(250,255,255,0.95);
background-size:cover;
background-position:top left;
}
#new .new-title-area{
width:300px;
position:relative;
}
#new .new-title-area h3{
text-align:center;
}

#new .new-in{
display:flex;
max-width:90%;
margin:0 auto;
padding-top:90px;
padding-bottom:90px;
}
#new .new-in > ul{
width:calc(100% - 300px);
}
#new .new-in ul li{
border-left:5px solid transparent;
}
#new .new-in ul li:hover{
border-left:5px solid #008C46;
}
#new .new-in ul li:last-child{
margin-bottom:0;
}
#new .new-in ul li:nth-child(even){
background:rgba(255,255,255,0.75);
}
#new .new-in ul li:nth-child(odd){
background:rgba(238,238,238,0.75);
}
#new .new-in ul li > a{
display:block;
padding:0.75rem 1rem 0.75rem calc(1rem - 5px);
color:#333333;
}
#new .new-in ul dl{
display:flex;
align-items:center;
}
#new .new-in ul dt{
width:64px;
text-align:center;
}
#new .new-in ul dd{
margin-left:20px;
font-size:18px;
flex:1;
}
#new .new-in ul dd h4{
font-size:20px;
line-height:1.2;
}
#new .new-in ul dd h4 span{
font-size:14px;
}
#new .new-in ul dd p{
font-size:14px;
line-height:1.2;
}
.news-list-date{
display:flex;
align-items:center;
margin-bottom:0.5em;
}
.news-list-date > *{
display:block;
margin-left:1rem;
}
.news-list-date > *:first-child{
margin-left:0;
}
.news-list-date > span{
display: flex;
align-items:center;
height:2em;
line-height:1;
padding:0 0.5em;
border-radius:5px;
background:#008C46;
font-size:12px;
color:#ffffff;
}
.news-list-date + h4{
line-height:1.4;
}

@media screen and (max-width:1024px) {
  #new .new-title-area:before{
    bottom:-16.5vh;
  }
}
@media screen and (max-width:500px) {
  #new .new-title-area{
    width:100%;
    display:flex;
    align-items:center;
  }
  #new .new-title-area h3{
    flex:1;
    padding:50px 0;
  }
  #new .new-title-area h3 img{
    max-width:100%;
  }
  #new .new-in{
    flex-direction:column;
    padding-top:0;
    padding-bottom:50px;
  }
  #new .new-in > ul{
    width:100%;
  }
  #new .new-in ul li{
    padding:0;
  }
  #new .new-in ul li:last-child{
    border-bottom:0;
  }
  #new .new-in ul li a{
    background: url(./../images/icon_next.svg) center right 5px no-repeat;
  }
  #new .new-in ul dt{
    width:17.5%;
    text-align:center;
  }
  #new .new-in ul dd{
    width:100%;
    margin:0 0 0 1rem;
    font-size:14px;
  }
  #new .new-in ul dd h4{
    font-size:16px;
    line-height:1.2;
  }
  #new .new-in ul dd h4 span{
    font-size:12px;
    line-height:1.2;
  }
  #new .new-in ul dd p a{
    width:200px;
    display:block;
    padding:1em;
    border:1px solid #666666;
    text-align:center;
    margin:1rem auto 0;
    color:#333333;
    line-height:1;
  }
  #new .index-button-area{
    padding:0;
    font-size:10px;
  }
  #new .index-button-area a{
    padding:1em;
  }
}

#about{
position:relative;
background:rgba(250,255,255,0.95);
}
#about .about-in{
}
#about .about-in h3{
width:100%;
padding:90px 0;
text-align:center;
}
#about .about-in h3 img{
max-width:50vmin;
}

#about .about-us-list > li{
display:flex;
align-items:center;
box-sizing:border-box;
background-size:cover;
background-image:none;
min-height:calc(100vw * 0.3);
padding:0 3vw;
}
#about .about-us-list li dl{
padding:2rem 2vw;
background:rgba(255,255,255,0.8);
}
#about .about-us-list li dl dt{
font-family: -apple-system, kozuka-gothic-pro, sans-serif;
font-weight: 200;
font-size:34px;
margin-bottom:1rem;
line-height:1;
}
#about .about-us-list li dl dd h4{
font-family: kozuka-gothic-pro, sans-serif;
font-weight: 400;
}
#about .about-us-list li dl dd{
font-size:14px;
}
#about .about-us-list li.about-us-1{
justify-content:flex-end;
align-items:flex-end;
background-position:left;
color:#333333;
}
#about .about-us-list li.about-us-1 dl{
z-index:2;
width:47.5%;
margin-bottom:-3rem;
font-size:18px;
line-height:1.4;
}
#about .about-us-list li.about-us-1 dl dd h4{
font-size:40px;
margin-bottom:1rem;
line-height:1.2;
text-shadow: 1px 1px 1px #ffffff;
color:#008C46;
}

#about .about-us-list li.about-us-2{
justify-content:flex-end;
background-position:right;
color:#333333;
}
#about .about-us-list li.about-us-2 dl{
float:right;
width:47.5%;
font-size:18px;
line-height:1.4;
padding:2rem 0;
}
#about .about-us-list li.about-us-2 dl dd > *{
margin-top:0.6rem;
}
#about .about-us-list li.about-us-2 dl dd h4{
font-size:20px;
line-height:1.2;
text-shadow: 1px 1px 1px #ffffff;
color:#008C46;
}
#about .about-us-list li.about-us-2 dl dd p + h4{
margin-top:1.5rem;
}
#about .about-us-list li.about-us-3{
align-items:flex-start;
background-position:right;
color:#333333;
}
#about .about-us-list li.about-us-3 dl{
width:40%;
min-width:420px;
margin-top:-4rem;
padding:6rem 2vw 4rem;
font-size:18px;
line-height:1.4;
}
#about .about-us-list li.about-us-3 dl dd h4{
font-size:40px;
margin-bottom:1rem;
color:#008C46;
line-height:1.2;
}
#about .about-us-list li.about-us-3 dl dd p{
}

.mt1rem{
margin-top:1rem!important;
}

/*
#about .about-list > li{
margin-bottom:8vh;
}
#about .about-list > li:last-child{
margin-bottom:0;
}

#about .about-image{
width:25%;
float:left;
}
#about .about-content{
width:65%;
margin-left:10%;
float:left;
color:#fff;
}
#about .about-content dt{
font-size:3vh;
margin-bottom:2.5vh;
}
#about .about-content dt span{
font-size:2vh;
margin-left:0.5em;
}
#about .about-content dd h4{
font-size:2.5vh;
padding-bottom:1em;
color:darkgreen;
}
#about .about-content dd p{
font-size:2vh;
line-height:1.4;
}
#about .about-content dd dt{
margin:0;
margin-bottom:0.75vh;
font-size:2vh;
line-height:1.4;
}
#about .about-content dd dd{
font-size:1.75vh;
margin-bottom:1vh;
line-height:1.4;
}
*/

@media screen and (max-width:979px) {
  #about .about-us-list li{
    height:auto;
    padding:1rem 2vw;
  }
  #about .about-us-list li.about-us-1 dl dt,
  #about .about-us-list li.about-us-2 dl dt,
  #about .about-us-list li.about-us-3 dl dt{
    margin-bottom:0.75rem;
    font-size:24px;
    line-height:1;
  }
  #about .about-us-list li.about-us-1{
    align-items:center;
    background-image:none;
    background-position:left;
    background-size:cover;
  }
  #about .about-us-list li.about-us-1 dl{
    width:400px;
  }
  #about .about-us-list li.about-us-1 dl dd h4{
    margin-bottom:0.5rem;
  }
  #about .about-us-list li.about-us-1 dl dd p{
    font-size:14px;
  }

  #about .about-us-list li.about-us-1 dl{
    margin-bottom:0;
  }
  #about .about-us-list li.about-us-2{
    background-image:none;
    background-position:right;
    background-size:cover;
    height:450px;
  }
  #about .about-us-list li.about-us-2 dl{
    width:400px;
  }
  #about .about-us-list li.about-us-3{
    align-items:center;
  }
  #about .about-us-list li.about-us-3 dl{
    width:47.5%;
    margin-top:0;
    padding:2rem 2vw;
  }
  #about .about-us-list li.about-us-2 dl dd h4,
  #about .about-us-list li.about-us-3 dl dd h4{
    margin-bottom:0.5rem;
    color:#005E2F;
  }
  #about .about-us-list li.about-us-3 dl dd h4{
    color:#008C46;
  }
  #about .about-us-list li.about-us-2 dl dd p,
  #about .about-us-list li.about-us-3 dl dd p{
    font-size:14px;
    color:#000000;
  }
}

@media screen and (max-width:700px) {
  #about .about-us-list li{
    padding:10% 5%;
  }
  #about .about-us-list li.about-us-1 dl dt,
  #about .about-us-list li.about-us-2 dl dt,
  #about .about-us-list li.about-us-3 dl dt{
    margin-bottom:0.5rem;
    font-size:19px;
    line-height:1;
  }
  #about .about-us-list li.about-us-1{
    background-image:none;
    background-position:left;
    background-size:cover;
    height:330px;
  }
  #about .about-us-list li.about-us-1 dl{
    width:340px;
  }
  #about .about-us-list li.about-us-1 dl dd h4{
    margin-bottom:1rem;
    font-size:28px;
  }
  #about .about-us-list li.about-us-1 dl dd p{
    font-size:11px;
  }

  #about .about-us-list li.about-us-2{
    background-image:none;
    background-position:right;
    background-size:cover;
    height:340px;
  }
  #about .about-us-list li.about-us-2 dl{
    width:340px;
    padding:0;
  }
  #about .about-us-list li.about-us-2 dl dd h4{
    margin-bottom:1rem;
    line-height:1.2;
    font-size:14px;
    color:#005E2F;
  }
  #about .about-us-list li.about-us-2 dl dd p{
    font-size:11px;
    color:#111;
  }
  #about .about-us-list li.about-us-3 dl dd h4{
    margin-bottom:1rem;
    font-size:28px;
  }
}

@media screen and (max-width:500px) {
  #about .about-in h3{
    padding:50px 0;
  }
  #about .about-in h3 img{
    max-width:80%;
  }
  #about .about-image{
    float:none;
    width:100%;
    text-align:center;
    margin-bottom:4vmin;
  }
  #about .about-image img{
    max-width:200px;
  }
  #about .about-content{
    float:none;
    width:100%;
    margin-left:0;
  }
  #about .about-content > dl > dt{
    text-align:center;
    margin-bottom:4vh;
  }
  #about .about-content > dl > dd p,
  #about .about-content > dl > dd dl *{
    font-size:4vmin;
  }
  #about .about-content > dl > dd h4{
    text-align:center;
  }
  #about .about-content > dl > dd dl{
    margin-bottom:3.25vh;
  }
  #about .about-content > dl > dd dt{
    font-weight:bold;
  }

  #about .about-us-list li{
    padding-bottom:50px;
  }
  #about .about-us-list li.about-us-1,
  #about .about-us-list li.about-us-2,
  #about .about-us-list li.about-us-3{
    position:relative;
    background:#ffffff;
    box-shadow:1px 1px 3px #aaaaaa;
    margin:-1rem 1rem 3rem 0;
    padding:0 5%;
    color:#333333;
    height:auto;
  }
  #about .about-us-list li.about-us-1 dl,
  #about .about-us-list li.about-us-2 dl,
  #about .about-us-list li.about-us-3 dl{
    width:100%;
    min-width:inherit;
  }
  #about .about-us-list li.about-us-1 dl dt,
  #about .about-us-list li.about-us-1 dl dt span,
  #about .about-us-list li.about-us-2 dl dt,
  #about .about-us-list li.about-us-3 dl dt{
    text-align:left;
  }
  #about .about-us-list li.about-us-1 dl dd h4,
  #about .about-us-list li.about-us-2 dl dd h4,
  #about .about-us-list li.about-us-3 dl dd h4{
    font-weight:bold;
    color:#005E2F;
  }
  #about .about-us-list li.about-us-1 dl dd p,
  #about .about-us-list li.about-us-2 dl dd p,
  #about .about-us-list li.about-us-3 dl dd p{
    font-size:14px;
  }
}



#contact{
background:#C7A8E0;
}
#contact .contact-in{
max-width:980px;
margin:0 auto;
padding:10vmin 0;
color:#fff;
}
#contact .contact-in h3{
width:50vmin;
padding-bottom:8vmin;
}
#contact .contact-in dt{
font-size:3vh;
margin-bottom:0.5em;
}
#contact .contact-in dd{
font-size:3vh;
margin-bottom:1em;
}
#contact .contact-in input,
#contact .contact-in select,
#contact .contact-in textarea{
color:#fff;
background:none;
border:3px solid #fff;
font-size:3vh;
padding:0.25em 0.5em;
box-sizing:border-box;
width:100%;
}
#contact .contact-in textarea{
min-height:20vh;
}
#contact .contact-in select{
cursor:pointer;
}
#contact .contact-in select option{
color:#666;
font-size:1.75vh;
}
#contact .contact-in label p{
box-sizing:border-box;
font-size:3vh;
background:#C7A8E0;
border:3px solid #fff;
padding:1.9vh 0.55em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
}
#contact .contact-in input:hover,
#contact .contact-in textarea:hover,
#contact .contact-in select:hover,
#contact .contact-in label p:hover{
border:3px solid gold;
}
#contact .contact-in label p span{
margin-left:1em;
color:#757575;
}
#contact .contact-in input[type="file"]{
display:none;
}
#contact address{
font-size:3vh;
margin-top:1em;
}

@media screen and (max-width:979px) {
  #contact .contact-in{
    margin:0 2vw;
  }
}



/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*                   TENTAI                 */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

#header{
position:relative;
}
.header-in{
z-index:100;
}
.header-tentai{
overflow:hidden;
position:fixed;
width: calc(100vmax * 1.5);
height: calc(100vmax * 1.5);
/*
display:flex;
justify-content:center;
*/
top:0;
left:0;
bottom:0;
right:0;
margin: 0 auto;
}
.header-tentai .stars{
position:relative;
width:inherit;
height:inherit;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.header-tentai .stars > div{
position:absolute;
top:calc(-75vmax + 50vh);
left:calc(-75vmax + 50vw);
width:inherit;
height:inherit;
transform-origin:center;
}
.header-tentai > div img{
width:100%;
}
#stars1{
animation:rotate 300s linear 0s infinite;
}
#stars2{
animation:rotate 210s linear 0s infinite;
}
#stars3{
animation:rotate 165s linear 0s infinite;
}
/*
.header-tentai canvas{
position:absolute;
top:0;
left:0;
}
.stars1,
.stars2,
.stars3,
.stars4,
.stars5{
position:absolute;
top:calc(-960px + 50vh);
left:calc(-960px + 50vw);
width:1920px;
height:1920px;
background-repeat:no-repeat;
}
*/
.zodiac{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
opacity:0.1;
}
.zodiac img{
display:none;
}
.stars1{
background-image:url("../images/stars1.png");
opacity:0.5;
}
.stars2{
background-image:url("../images/stars2.png");
opacity:0.5;
}
.stars3{
background-image:url("../images/stars3.png");
opacity:0.1;
}
.stars4{
background-image:url("");
}
.stars5{
background-image:url("");
}



/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*            HEADER (EXCEPT TOP)           */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

#header.underindex{
margin-bottom:1em;
}
.header-image{
background-image:url("../images/bg-header.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.header-image-in{
padding:2vh 0;
max-width:990px;
margin:0 auto;
}
.header-image-left{
width:calc(100% / 3);
float:left;
}
.header-image-left img{
width:100%;
}
.header-image-right{
width:calc(100% / 1.501);
float:right;
padding-top:calc(990px / 3 * 0.167 - 1em);
text-align:right;
}
.header-image-right a{
margin-right:1em;
color:#fff;
}
.header-image-right a:hover{
color:rgb(132, 198, 46);
}
.header-image-right a:last-child{
margin-right:0;
}

@media screen and (max-width:500px) {
  .header-image-left{
  float:none;
  width:75%;
  box-sizing:border-box;
  padding:0 1em;
  }
  .header-image-right{
  float:none;
  width:100%;
  padding-top:1em;
  }
  .header-image-right{
  letter-spacing: -.40em;
  text-align:center;
  }
  .header-image-right a{
    letter-spacing: normal;
    box-sizing:border-box;
    margin-right:0;
    width:25%;
    display:inline-block;
    padding:0.5em 0;
  }
}



/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*           CONTENTS (EXCEPT TOP)          */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

#contents{
}
#contents .contents-title{
border-bottom:5px solid #12B52B;
margin-bottom:1em;
}
#contents .contents-title > h2{
max-width:990px;
margin:0 auto;
font-size:2vh;
padding-bottom:1vh;
padding-left:1rem;
}
#contents .contents-in{
max-width:960px;
max-width:calc(990px - 2em);
margin:0 auto;
padding:0 1rem;
}
#contents .contents-left{
float:left;
width:200px;
}
#contents .contents-left ul li{
margin-bottom:0.5em;
}
#contents .contents-left ul li img{
margin-right:0.5em;
height:1.6em;
vertical-align:text-top;
}
.contents-left a{
text-decoration:underline;
color:#379F98;
}
#contents .contents-right{
float:right;
width:calc(100% - 200px);
}

@media screen and (max-width:500px) {
  #contents .contents-title > h2{
  padding-left:1em;
  font-size:18px;
  }
  .contents-in{
  padding:0 1em 1em;
  box-sizing:border-box;
  }
  #contents .contents-left,
  #contents .contents-right{
  width:100%;
  }
}

#contents .contents-list{
border:5px solid #12b52b;
background:#12b52b;
margin-bottom:1em;
}
#contents .contents-list h3{
padding:0.5em 0 0.5em 1em;
font-size:18px;
color:#fff;
}
#contents .contents-list-in{
padding:1em;
background:#fff;
}
#contents .contents-list-in ul li{
margin-top:1em;
border-top:1px dashed #12b52b;
padding-top:1em;
}
#contents .contents-list-in ul li:first-child{
margin-top:0;
padding-top:0;
border-top:0;
}
#contents .contents-list-in .product_normallist > li{
margin-top:0;
}
.contents-list-in a{
text-decoration:underline;
color:#379F98;
}
.contents-list-in a:hover,
.contents-left a:hover{
color:#12b52b;
}
#contents .contents-list-in h4{
padding-bottom:0.5em;
border-bottom:3px solid #12b52b;
font-size:1.75vh;
}
#contents .contents-list-in h5{
font-size:1em;
margin-top:1em;
padding:0.75em;
border-left:5px solid #12b52b;
}
#contents .contents-list-in h6{
margin-top:1em;
padding-bottom:0.5rem;
font-size:1.25em;
border-bottom:1px solid #12b52b;
}
.contents-list-in table{
width:100%;
}
.contents-list-in table tr{
border-bottom:1px dashed #12b52b;
}
.contents-list-in table th{
width:10em;
padding-bottom:0.25em;
padding-top:0.5em;
}
.contents-list-in table td{
width:calc(100% - 10em);
padding-bottom:0.25em;
padding-top:0.5em;
}

#contents #area-services.contents-list .app_summary{
width:calc(100% - 70px - 1em);
}

/* お問い合わせ */
#contact .product_table th,
#contact .product_table td{
vertical-align:middle;
}
#contact .product_table td{
padding-top:0.75em;
padding-bottom:0.5em;
}
#contact .product_table th.textareath{
padding-top:0.75em;
vertical-align:top;
}
#contact .product_table textarea,
#contact .product_table input[type="text"]{
box-sizing:border-box;
border-radius:0;
border:1px solid rgb(169, 169, 169);
-webkit-appearance: none;
}
#contact .product_table select{
box-sizing:border-box;
border-radius:0;
border:1px solid rgb(169, 169, 169);
max-width:calc(100vw - 5em);
padding:0.25em 0.5em;
}
#contact .product_table textarea{
width:100%;
min-height:200px;
min-height:20vmax;
line-height:1.4;
}
#contact .product_table input[type="text"]{
padding:0.25em 0.5em;
}
#contact .service_summary{
padding:0;
}
.product_summary{
margin:1em 0;
padding:0 0.9em;
line-height:1.4;

}
.product_summary_in{
line-height:1.4;
margin-top:1em;
}


@media screen and (max-width:500px) {
  #contents .contents-list h3{
    padding:0.5em 0 0.5em 0.25em;
  }
  #contents .contents-list-in h4{
    font-size:16px;
  }
  #contents .contents-list-in h5{
    font-size:14px;
  }
  #contents .contents-list-in h6{
    font-size:14px;
    line-height:1.4;
    margin-top:2em;
    padding-bottom:0.3em;
  }
  #contents .contents-list-in h5 + h6{
    margin-top:1em;
  }
  #contact .contents-list-in table tr:first-child th{
    padding-top:0;
  }
  #contact .contents-list-in table tr:last-child{
    border-bottom:0;
  }
  #contact .contents-list-in table tr:last-child td{
    padding-bottom:0;
  }
  #contact .product_table th,
  #contact .product_table td{
    width:100%;
    display:block;
  }
  #contact .product_table td{
    padding-top:0;
  }
}

.service_summary{
margin:1em 0;
padding:0 0.9em;
line-height:1.4;
}
.service_summary_in{
margin-top:
}
.contents-list-in iframe{
width:100%;
height:300px;
height:40vh;
}
.service_summary_in img{
float:right;
width:30%;
margin-left:1em;
}
.service_summary_special_image img{
float:none;
width:100%;
margin-top:1em;
}
.service_summary_left{
float:left;
margin-right:1em;
width:93px;
}
.service_summary_left img{
width:100%;
}
.service_summary_right{
float:right;
width:calc(100% - 93px - 1em);
}
.product_support{
margin-top:1em;
}
.product_detail_button > a{
display:block;
}
.product_news img{
max-width:100px;
height:auto;
float:right;
margin-left:1em;
}
.product_links{
border-bottom:1px dashed #12b52b;
padding-bottom:0.25em;
}
.product_normallist > li{
border-bottom:1px dashed #12b52b;
padding-bottom:0.25em;
margin-bottom:0.5em;
line-height:1.4;
}
.product_normallist > li a{
text-decoration:underline;
}
.product_detail{
margin-bottom:1em;
}
.products_kanban{
max-width:990px;
margin:0 auto 1em;
}
.products_kanban img{
width:100%;
}

/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*              PRODUCTSページ              */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

#contents .product_summary h4{
border:0;
font-weight:bold;
color:#333333;
padding-bottom:0.5em;
}
.entry-header{
line-height:1.4;
}
.product_summary dt,
.product_summary dd{
float:left;
}
.product_summary dt{
width:70px;
margin-right:1em;
}
.product_summary dt img{
max-width:70px;
height:auto;
}
.product_summary dd.app_summary{
width:calc(100% - 207px - 2em);
line-height:1.4;
padding:2px 0;
}
.product_summary dd.app_summary .app_summary_in{
}
.product_summary dd.app_summary .app_summary_link{
color:#666666;
}
.product_summary dd.app_summary .app_summary_link a{
display:block;
margin-top:0.5em;
padding-left:1em;
background:url(../images/icon_triangle_1.png) no-repeat center left;
}
.product_summary dd.app_badge{
width:137px;
padding:1em 0;
margin-left:1em;
}
.product_summary dd.app_badge img{
width:100%;
}

/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*            FOOTER (EXCEPT TOP)           */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

.footer-in{
box-sizing:border-box;
max-width:990px;
margin:0 auto;
padding:3em 0;
text-align:center;
color:#fff;
}
.footer-trademark{
border-bottom:1px solid rgba(255,255,255,0.25);
padding-bottom:1em;
margin-bottom:1em;
line-height:1.4;
}



/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*                 ANYWHERE                 */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

.sp-only{
display:none;
}

@media screen and (max-width:500px) {
  .sp-only{
    display:block;
  }
}

/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*           SCRIPT (横からズドン)          */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

.about-in{
overflow:hidden;
}



/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*             SCRIPT (flickity)            */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

.flickity-viewport{
background:#fff;
}
.flickity-viewport *{
border:0!important;
}



/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*   SCRIPT(Message Drawer for Q＆A page)   */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

.qa_drawer{
margin-top:1em;
}
.qa_drawer > dt{
padding:1em;
background:#eee;
cursor:pointer;
border-bottom:3px solid #12B52B;
}
.qa_drawer > dt:hover{
opacity:0.8;
}
.qa_drawer > dd{
padding:1em;
background:#EAFDED;
line-height:1.4;
}
.qa_drawer > dd > p{
margin-bottom:1em;
}
.qa_drawer > dd dl{
margin-bottom:1em;
padding:1em;
background:#fafafa;
}
.qa_drawer > dd dl dt{
font-weight:bold;
margin-bottom:0.5em;
}
.qa_drawer > dd dl dd{
}



/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*              SCRIPT (jPages)             */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

.pager{
margin-top:3em;
}
.pager > a,
.pager > span{
display:inline-block;
padding:0.5em 1em;
color:#333;
border:1px solid #12b52b;
margin-right:0.25em;
text-decoration:none;
}
.pager > a:last-child{
margin-right:0;
}
.pager .disabled{
display:none;
}
.pager .current{
background:#12b52b;
cursor:default;
color:#fff;
}
.pager > a:hover{
background:#C0FAE2;
}

@media screen and (max-width:500px) {
  .pager > a{
    box-sizing:border-box;
    padding:0.5em 2vw;
    margin-right:2vw;
    font-size:3.25vw;
  }
}



/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*              SCRIPT(LOADING)             */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */
/*
body#index #container{
overflow:hidden;
display:block;
height:100%;
}
#loading{
position:absolute;
z-index:9999;
top:0;
left:0;
box-sizing:border-box;
width:100%;
height:100%;
background:#fff;
color:#ccc;
text-align:center;
font-size:4vw;
padding:calc((100vh - 1em) /2) 0;
}
*/

#loading{
display:none;
}
.header-right{
opacity:0;
}
.slider{
display:none;
}
.slider.slick-initialized{
display:block;
}

/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*               SCRIPT(INVIEW)             */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

.fade_about_content{
opacity:0;
transition:1s;
position: relative;
left: -30px;
}
.fade_about_content.active{
opacity:1;
left: 0;
}

/* -∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴- */
/*                 ANIMATION                */
/* -∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵-∴-∵- */

@keyframes rotate{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

@keyframes robot_blink {
  0% {
    opacity:1;
  }
  7.5% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

@keyframes swing_smartphone{
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(-2.5deg);
  }
}

/* スクロールアイコンの表示 */
@media screen and (min-width:774px) {
  .scroll_icon{
    bottom:1rem;
    transition: 0.3s ease-in-out;
    position: fixed;
    right: 74px;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    padding-top: 50px;
    text-decoration: none;
    color:rgba(15,140,210,1);
  }
  .scroll_icon.active{
    bottom: calc(100% - 90vh + 74px);
    padding-top: 42px;
    color:#ffffff;
  }
  .scroll_icon span {
    position: absolute;
    top: 0;
    left: 50%;
    transform:rotate(180deg);
    width: 46px;
    height: 46px;
    margin-left: -23px;
    background:rgba(15,140,210,0.75);
    border: 1px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
  }
  .scroll_icon.active span {
    transform:rotate(0deg);
    background:transparent;
  }
  .scroll_icon span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 16px;
    height: 16px;
    margin: -12px 0 0 -8px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
  }
  .scroll_icon span::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 0 rgba(255,255,255,.1);
    border-radius: 100%;
    opacity: 0;
    -webkit-animation: scroll_icon 3s infinite;
    animation: scroll_icon 3s infinite;
    box-sizing: border-box;
  }
  .scroll_icon_sp{
    display:none;
  }
}
@media screen and (max-width:773px) {
  .scroll_icon{
    display:none!important;
  }
  .scroll_icon_sp{
    display:block;
    position:fixed;
    right:3vw;
    bottom:10vw;
    z-index:2;
    width:10vw;
    height:10vw;
  }
}

@-webkit-keyframes scroll_icon {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scroll_icon {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}