
/*--- heddingtextarea setting ---*/
div.heddingtextarea{position:relative; padding:0; margin-bottom:2em; box-sizing:border-box;}
div.heddingtextarea h1{position: absolute; background:rgba(98, 177, 45, 0.8); color:#ffffff;}
div.heddingtextarea h1>strong{font-weight:900;}
div.heddingtextarea h1 span{display:block; color:#ffffff;}
div.heddingtextarea h1 span strong{display: block; line-height:1.25;}
div.heddingtextarea p.heddingimg{overflow: hidden; width:100%; box-sizing:border-box;}
div.heddingtextarea p.heddingimg>img{display:block;}
div.heddingtextarea p.heddingptext{color:#ffffff; font-size:rem; line-height:1.25;}

/*--- whatnew area settign ---*/
div.whatnew h2{position :relative; padding-right:2.25em; box-sizing:border-box;}
div.whatnew h2 a{position :absolute; display:block; right:0; bottom:0; padding:0.5em 1.25em 0.5em 0; font-size:12px; font-weight:500;}
div.whatnew h2 a:after{content:"\03e"; position:absolute; right:0; top:0; bottom:0; margin:auto; padding:0.2em; width:0.8em; height:0.8em; background:#6e9922; color:#ffffff; font-size:80%; font-weight:700; line-height:0.8; text-align: center;}
div.whatnew dl{padding:1em; border:1px solid #524437; box-sizing:border-box;}
div.whatnew dt{}
div.whatnew dt span{display:inline-block; margin:auto auto auto 0.5em; padding:0.25em 1em; font-size:50%; vertical-align:0.2em; border-radius:0.5em; font-weight:500; color:#ffffff;}
div.whatnew dt span.servicelabel{ background:#8ec43e;}
div.whatnew dt span.infolabel{background:#00a7db;}
div.whatnew dt span.etclabel{background:#ff7300;}
div.whatnew dd{padding:0.5em 0; margin-bottom:1em; border-bottom:1px dashed #cccccc;}
div.whatnew dd:last-child{margin:0 auto; border-bottom:0;}
div.whatnew dd a{position:relative; padding:0 0 0 0.75em;}
div.whatnew dd a:before{content:" "; display:block; position: absolute; top:0.5em; left:0; border-width:0.25em 0 0.25em 0.5em; border-style:solid; border-color: rgba(0,0,0,0) #8ec43e;}

/*--- aboutwatarasepc settingarea ---*/
div.aboutwatarasepc{}
div.aboutwatarasepc section div{ margin:auto;}


/*--- servicelist setting ---*/


/*--- pointfive setting ---*/
div.pointfive{background:#6e9922;}
div.pointfivedeco{position:relative; margin:auto; padding:4em 1em;}

div.pointfive h1 , div.pointfive p{text-align:center; color:#ffffff;}

div.pointfive ol {margin-bottom:2em;}

div.pointfive ol li{position:relative; margin:0 0 1em 0;}
div.pointfive ol li h2.hbannerimg{margin:0; color:#ffffff; box-sizing:border-box;}
div.pointfive ol li h2.hbannerimg span{position: absolute; display:block; top:-0.1em; bottom:auto; width:100%; margin:auto; height:1em; font-size:40px; font-size:2.5rem; word-break:keep-all; overflow-wrap:break-word;}

div.pointfive ol li div.pointfivetexttbox{overflow: hidden; background:rgba(255,255,255,0.8); box-sizing:border-box; padding:2em;}
div.pointfive ol li h3{position:relative; border-color:#4a7009; padding:0.5em 0 0.5em 1.5em; text-indent:1em; color:#6e9922;}
div.pointfive ol li h3:after{background:#4a7009; left:0;}
div.pointfive ol li h3 span{display:block; position: absolute; left:0; background:#ff7300; width:1.5em; height:1.5em; text-align:center; text-indent:0; color:#ffffff;}
div.pointfive ol li p{margin:auto auto 0.5em auto; color:#524437; text-align:left; position:relative; z-index:2;}

/*--- qanda area settind ---*/
div.qanda{}
div.qanda h1{text-align:center; position:relative;}
div.qanda h1:after{content:" "; display:block; position:absolute; bottom:-0px; left:0; right:0; margin:auto; border-width:40px 64px 0 64px; border-style:solid;; border-color:#8ec43e rgba(0,0,0,0); width:0; height:0;}
div.qanda h1 span{display:block; margin-bottom:1em; padding:1em 2em; background:#8ec43e; color:#ffffff;}
div.qanda dl dt , div.qanda dl dd{ box-sizing:border-box; padding:1em;}
div.qanda dl dt{color:#8ec43e; position:relative; padding:0.25em 0 0.5em 2.5em; margin-bottom:0.66em; font-size:24px; font-size:1.5rem; font-weight:900; line-height:1.25;}
div.qanda dl dt span{display:block; position:absolute; top:0; left:0; margin:auto; padding:0.25em; width:2em; height:2em; line-height:1.5; color:#ffffff;background:#8ec43e; box-sizing:border-box; text-align:center; z-index:2;}

div.qanda dl dd{border:2px solid #8ec43e; margin:auto auto 1em auto;}
div.qanda dl dd h2{ position:relative; padding:0 0 0 2em; color:#ff7300; font-weight:900; font-size:24px; font-size:1.5rem;}
div.qanda dl dd h2 span{display:block; position: absolute; left:0; top:0; background:#ff7300; width:1.5em; height:1.5em; border-radius:100%; color:#ffffff; text-align:center;}
div.qanda dl dd p{margin-left:3em; font-size:16px;}

/*--- rwd setting 
------------------------------------*/
/* 320px-480px(mobile)*/
@media screen and (max-width:480px) 
{
/*--- heddingtextarea setting ---*/
div.heddingtextarea h1
{top:0; left:0; padding:0.5em; width:100%; font-size:32px; font-size:2rem; box-sizing:border-box;}
div.heddingtextarea h1 span{font-size:50%;}
div.heddingtextarea p.heddingimg{height:240px; overflow: hidden;}
div.heddingtextarea p.heddingimg>img{width:auto; min-width:480px; height:100%; max-width:none; margin:auto; padding:0;}
div.heddingtextarea p.heddingptext{position:absolute; bottom:1em; left:1em; right:1em; width:auto; padding:0; font-size:16px; font-size:1rem;}
}

/* 481px-780px(mobile/tabletsite) */ 
@media screen and (min-width:481px) 
{
/*--- heddingtextarea setting ---*/
div.heddingtextarea h1
{top:0.7em; left:0; padding:0.6em 1.2em; width:7em; font-size:36px; font-size:2.25rem;}
div.heddingtextarea h1 span{font-size:50%;}
div.heddingtextarea p.heddingimg>img{width:100%; max-width:734px; margin:auto 0 auto auto; padding:0;}
div.heddingtextarea p.heddingptext{position:absolute; bottom:1em; left:auto; right:1em; width:22em; padding:0; font-size:1.125rem;}

/*--- pointfive setting ---*/
div.pointfive ol li h2.hbannerimg{background:none;}
div.pointfive ol li h2.hbannerimg span{font-size:56px; font-size:3.5rem;}

div.pointfive ol li{}

}

/* 768px(tablet-pcsite) */
@media screen and (min-width:768px)
{
/*--- pointfive setting ---*/
div.pointfive ol li{margin:0;}
div.pointfive ol li.floatleftbox h2.hbannerimg , div.pointfive ol li.floatleftbox div.pointfivetexttbox{float:left; width:50%;}
div.pointfive ol li.floatrightbox h2.hbannerimg , div.pointfive ol li.floatrigthbox div.pointfivetexttbox{float:right; width:50%;}
div.pointfive ol li h2.hbannerimg{padding:0.5em; background:url(../images/fivepoint01.jpg) ,#4a7009; background-size:auto 100%; background-repeat: no-repeat; }
div.pointfive ol li:nth-child(2) h2.hbannerimg{background:url(../images/fivepoint02.jpg) ,#4a7009;background-size:auto 100%; background-repeat: no-repeat;}
div.pointfive ol li:nth-child(3) h2.hbannerimg{background:url(../images/fivepoint03.jpg) ,#4a7009;background-size:auto 100%; background-repeat: no-repeat;}
div.pointfive ol li:nth-child(4) h2.hbannerimg{background:url(../images/fivepoint04.jpg) ,#4a7009;background-size:auto 100%; background-repeat: no-repeat;}
div.pointfive ol li:nth-child(5) h2.hbannerimg{background:url(../images/fivepoint05.jpg) ,#4a7009;background-size:auto 100%; background-repeat: no-repeat;}

div.pointfive ol li h2.hbannerimg span{position: absolute; top:0; bottom:0; width:50%; margin:auto; height:1em; font-size:32px; font-size:2rem; word-break:keep-all; overflow-wrap:break-word; text-align:center;}
div.pointfive ol li.floatleftbox h2.hbannerimg span{left:0;}
div.pointfive ol li.floatrightbox h2.hbannerimg span{right:0;}


}

/* 769px-1023px(tablet-pcsite) */
@media screen and (min-width:769px)
{
/*--- heddingtextarea setting ---*/
    div.heddingtextarea h1
    {top:0.7em; left:0; padding:0.6em 1.2em; width:7em; font-size:48px; font-size:3rem;}
    div.heddingtextarea h1 span{font-size:60%;}
    div.heddingtextarea p.heddingptext{bottom:1.2em; left:auto; left:auto; right:1.2em; padding:0; font-size:28px; font-size:1.75rem;}
    div.heddingtextarea p.heddingimg>img{max-width:none;}
}

/* 1024px-over(pcsite) */
@media screen and (min-width:1024px)
{
/*--- heddingtextarea setting ---*/
    div.heddingtextarea h1
    {top:0.7em; left:0; padding:0.6em 1.2em; width:7em; font-size:72px; font-size:4.5rem;}
    div.heddingtextarea p.heddingimg>img{width:auto; height:100vh; margin:auto 0 auto auto; padding:0 0 0 4em;}
    div.heddingtextarea p.heddingptext{bottom:1.2em; right:1.2em; width:21em; padding:0; font-size:40px; font-size:2.5rem;}
}