@charset "utf-8";
/* CSS Document */

html.fix {
    position: fixed;
    width: 100%;
}

body#top {
    height: 100%;
    overflow: hidden;
}
body#top.scroll{
    height: auto;
    overflow: auto;
}
.break_all { word-break: break-all; }
/*inline svg---------------------------------- */

.set_svg{
    fill:none;
    stroke:#162452;
    width: 18px;
    height: auto;
    transition: .3s;
    position: absolute;
    right: 10px;
}

*::-ms-backdrop, .set_svg{
    fill:none;
    stroke:#162452;
    width: 18px;
    height: auto;
    transition: .3s;
    position: absolute;
    right: 10px;
    top: 0px;
}

.set_svg.on{
    fill:none;
    stroke:#ffffff;
    width: 18px;
    height: auto;
    transition: .3s;
}


/*animation setting---------------------------------- */

/* 基本のスタイル */
   .fd_anim.delighter {
      transition: all .4s ease-out;
      transform: translateY(50px);
      opacity: 0;
   }   
 

/* スタート時のスタイル */
   .fd_anim.delighter.started{
      transform: none;
      opacity: 1;
   }
   
 
/* エンド時のスタイル */
   .fd_anim.delighter.started.ended{

   }


/*loading---------------------------------- */

.loadingAnim {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    pointer-events: none;
}

p.catch {
    margin: 0;
    display: block;
    z-index: 100;
    font-size: 1.5em;
    font-weight: bold;
    opacity: 1;
    transition-timing-function: cubic-bezier(.785, .135, .15, .86) 0s;
    transition: 1.5s;
    line-height: 1.8;
    position: relative;
    top: 63px;
	color: #162452;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    animation: lds-logo 1000ms linear both;
}

p.catch.on{
    opacity: 1;
    filter: blur(0px);
}


p.catch.on.off{
    opacity: 0;
	transition: .5s;
}

.anim1 {
    transition: .5s;
    width: 100%;
    height: 100%;
    bottom: 0;
    position: absolute;
    background-color: #f7fbff;
    display: block;
    transition-timing-function: cubic-bezier(.785, .135, .15, .86) 0s;
    z-index: 100;
}

.anim1.on {
    transition: .5s;
    width: 100%;
    height: 0%;
    position: absolute;
    background-color: #f7fbff;
    display: block;
    transition-timing-function: cubic-bezier(.785, .135, .15, .86) 0s;
    bottom: 0;
}


.anim2 {
    transition: .5s;
    width: 100%;
    height: 100%;
    bottom: 0;
    position: absolute;
    background-color: #1066b5;
    display: block;
    transition-timing-function: cubic-bezier(.785, .135, .15, .86) 0s;
}

.anim2.on {
    transition: .5s;
    width: 100%;
    height: 0%;
    position: absolute;
    background-color: #1066b5;
    display: block;
    transition-timing-function: cubic-bezier(.785, .135, .15, .86) 0s;
    bottom: 0;
    z-index: 99;
}


.lds-logo {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 500;
    transition: .5s;
    opacity: 1;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    top: -30px;
	flex-direction: column;
}

.lds-logo .text{
	width: 80%;
	max-width: 500px;
	margin-top: 30px;
}

*::-ms-backdrop, .lds-logo .text{
	width: 80%;
    height: 100%;
	max-width: 500px;
	margin-top: 30px;
}

.lds-logo img {
    width: 200px;
    height: auto;
    -webkit-animation: lds-logo 1000ms linear both;
    animation: lds-logo 1000ms linear both;
    z-index: 200;
}

.transparent{
    transition: .5s;
}

.transparent.off{
    transition: .5s;
    opacity: 0;
}

.loaded .lds-logo {
    opacity: 0;
    transition: 2.0s;
}

@keyframes lds-logo {
    0% {
        opacity: 0;
        transform: translateY(50px);
        transition: ease-out;
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
        transition: ease-out;
    }
}
@-webkit-keyframes lds-rogo {
    0% {
        opacity: 0;
        top: 100px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}

.lds-ellipsis {
    display: block;
    width: 80px;
    height: 80px;
    position: relative;
    top: 90px;
    transition: .5s;
    opacity: 1;
    z-index: 999;
    animation: lds 1000ms linear both;
    margin: 0;
}

@keyframes lds {
    0% {
        filter: blur(30px);
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        filter: blur(0px);
        opacity: 1;
        transform: translateY(0px);
    }
}


.lds-ellipsis div {
    position: absolute;
    top: 90px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #004890;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    transition: .5s;
}

.lds-ellipsis.on div{
    opacity: 0;
    filter: blur(30px);
}

.loaded .lds-ellipsis div{
    opacity: 0;
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}


/*top page-----------------------------------------------------------*/

header {
    margin-top: 90px;
}

header .mv {
    width: 100%;
    height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

header .mv:before {
    content: "";
    background: url(../image/mv.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
}

header .outer_header {
    background-color: white;
    display: flex;
    height: 90px;
    width: 100%;
    position: fixed;
    top: 0px;
    border-bottom: 1px solid #f0f0f0;
    z-index: 50;
    left: 0px;
    align-items: center;
}


.outer_header .inr {
    width: 100%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    max-width: 1040px;
    position: relative;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}

.outer_header:before{
    content: "";
    position: absolute;
    width: 30px;
    height: 5px;
    background-color: #ff0000;
    z-index: 10;
    left: 0;
    top: 0;
}

.outer_header:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background-color: #adadad;
    z-index: 5;
    top: 0;
    left: 0;
}

header h1 img {
    width: 100%;
    max-width: 172px;
    height: auto;
}

header h1 {
    position: relative;
    top: 10px;
    left: 0px;
    width: 172px;
}

header nav {
    display: flex;
    position: absolute;
    top: 21px;
    right: 0px;
}

*::-ms-backdrop, header nav {
    display: flex;
    position: absolute;
    top: 20px;
    right: 0px;
}

header nav ul{
    display: flex;
}

header ul li {
    margin-right: 0px;
}
header ul li:last-child{
    margin-right: 0px;
}

header nav a {
    color: #3b3b3b;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    font-weight: bold;
}


.mac header nav a {
    color: #3b3b3b;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 33px;
    font-weight: bold;
}


*::-ms-backdrop, header nav a {
    color: #3b3b3b;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 29px;
    font-weight: bold;
}


header ul li ul.sub_menu {
    display: flex;
    flex-direction: column;
    transition: .3s;
    margin-top: 25px;
    opacity: 0;
    pointer-events: none;
}

header ul li ul.sub_menu.on{
    opacity: 1;
    pointer-events: all;
}

ul.sub_menu li a {
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
    text-indent: 20px;
    background-color: #8b88a3;
    background-color: hsla(225, 28%, 39%,50%);
    padding-top: 5px;
    padding-bottom: 5px;
    transition: .3s;
    color: white;
}

ul.sub_menu li a:hover{
    background-color:  hsla(225, 28%, 39%,80%);
}


ul.sub_menu li a:hover:before{
    display: none;
}

ul.sub_menu li {
    margin-right: 0px;
    margin-bottom: 1px;
}

ul.sub_menu {
    position: relative;
}

ul.sub_menu:before {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: #162452;
    top: -2px;
    z-index: 1;
    display: block;
    transition: .3s;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

ul.sub_menu.on:before{
    width: 100%;

}

header nav a:before {
    content: "";
    height: 3px;
    opacity: 0;
    width: 0%;
    position: absolute;
    background-color: #162452;
    bottom: 0px;
    left: 0;
    right: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: .3s;
}

header nav a:hover:before {
    width: 100%;
    opacity: 1;
}

header nav .here a:before {
    content: "";
    height: 3px;
    opacity: 1;
    width: 100%;
    position: absolute;
    background-color: #162452;
    bottom: 0px;
    left: 0;
    right: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: .3s;
}

header .catch {
    text-align: center;
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

header .catch img {
    width: 901px;
    height: auto;
    color: #71747b;
}

header .catch .yumin {
    font-family: YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
    font-size: 2.1em;
    font-weight: bold;
    margin-top: 20px;
}

header .catch .text {
    margin-top: 55px;
    font-size: 1.2em;
    font-weight: bold;
}

section h2 {
    color: #162452;
    font-weight: 500;
    text-align: center;
    font-size: 2.4em;
    line-height: 1;
}

a.common_btn {
    padding: 15px 30px;
    max-width: 150px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #162452;
    line-height: 1;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    transition: .3s;
    color: #162452;
    position: relative;
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, a.common_btn {
    padding: 15px 30px;
    max-width: 150px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #162452;
    line-height: 1;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    transition: .3s;
    color: #162452;
    padding-top: 20px;
    position: relative;
}

}





a.common_btn:hover{
    background-color: #009be3;
	border: 1px solid #009be3;
    color: white;

}

p.gotop{
    position: fixed;
    right: 1%;
    bottom: 0;
    padding-top: 240px;
	z-index: 10;
	
}
p.gotop a{
    width: 80px;
    height: 94px;
    display: block;
}
p.gotop a img {
    width: 55px;
    height: auto;
}


/* コンテンツ部分 */

.cont{

}

.outer{
    width: 100%;
    position: relative;
}

.outer.right_bg:before {
    content: "";
    position: absolute;
    top: 300px;
    background: url(../image/pat1.gif) repeat;
    width: 97%;
    height: calc( 100% - 300px );
    z-index: -1;
    right: 0px;
}

.outer.left_bg:before {
    content: "";
    position: absolute;
    top: 300px;
    background: url(../image/pat1.gif) repeat;
    width: 100%;
    height: 55%;
    z-index: -1;
    right: 55px;
}

.outer.all_bg:before {
    content: "";
    position: absolute;
    background: url(../image/pat1.gif) repeat;
    width: 100%;
    height: 100%;
    z-index: -1;
}



.cont .fill {
    background-color: #162452;
    color: white;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 5px 0px;
    font-size: 0.9em;
    text-align: center;
    line-height: 1;
    margin-top: 35px;
    margin-bottom: 60px;
}

.cont .new {
    max-width: 75px;
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .cont .new {
    max-width: 75px;
    padding-top: 10px;
}

  *::-ms-backdrop, .cont .category {
    max-width: 115px;
    padding-top: 10px;
}

}

.cont .category {
    max-width: 115px;
}

.cont ul.article{
    display: flex;
    margin-top: 0px;
}

.cont ul.article.alt li{
    width: 31.3%;
}

.cont ul.article li {
    width: 33.3%;
    margin-right: 30px;
    background-color: white;
    padding-bottom: 30px;
    position: relative;
    margin-bottom: 25px;
}

.cont ul.article li:last-child{
    margin-right: 0px;

}

.cont dl{

}

.cont ul dt{
    height: 200px;
    position: relative;
    overflow: hidden;
    
}

.cont ul dt span {
    position: absolute;
    left: 0;
    top: 0;
	color: #162452;
    background-color: #eeeeee;
    padding: 10px 20px;
    font-size: 0.8em;
    line-height: 1;
    z-index: 1;
}


.cont ul dt.init1:after{
    content: "";
    background: url("../image/initiative/tcfd.png") no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.init2:after{
    content: "";
    background: url("../image/initiative/sbt.jpg") no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
    
}

.cont ul dt.init3:after{
    content: "";
    background: url("../image/initiative/001_4_thumb.jpg") no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
    
}

.cont ul dt.init4:after{
    content: "";
    background: url("../image/initiative/002_1.jpg") no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
    
}

.cont ul dt.init5:after{
    content: "";
    background: url("../image/initiative/003_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
    
}

.cont ul dt.init6:after{
    content: "";
    background: url("../image/initiative/004_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init7:after{
    content: "";
    background: url("../image/initiative/005_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init8:after{
    content: "";
    background: url("../image/initiative/006_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init9:after{
    content: "";
    background: url("../image/initiative/007_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init10:after{
    content: "";
    background: url("../image/initiative/008_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init11:after{
    content: "";
    background: url("../image/initiative/009_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init12:after{
    content: "";
    background: url("../image/initiative/010_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init13:after{
    content: "";
    background: url("../image/initiative/011_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init14:after{
    content: "";
    background: url("../image/initiative/012_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init15:after{
    content: "";
    background: url("../image/initiative/013_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init16:after{
    content: "";
    background: url("../image/initiative/014_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init17:after{
    content: "";
    background: url("../image/initiative/015_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init18:after{
    content: "";
    background: url("../image/initiative/016_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init19:after{
    content: "";
    background: url("../image/initiative/017_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init20:after{
    content: "";
    background: url("../image/initiative/018_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init21:after{
    content: "";
    background: url("../image/initiative/019_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init22:after{
    content: "";
    background: url("../image/initiative/020_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init23:after{
    content: "";
    background: url("../image/initiative/021_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init24:after{
    content: "";
    background: url("../image/initiative/022_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init25:after{
    content: "";
    background: url("../image/initiative/023_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init26:after{
    content: "";
    background: url("../image/initiative/024_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init27:after{
    content: "";
    background: url("../image/initiative/025_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init28:after{
    content: "";
    background: url("../image/initiative/026_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init29:after{
    content: "";
    background: url("../image/initiative/027_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.init30:after{
    content: "";
    background: url("../image/initiative/028_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}
.cont ul dt.init31:after{
    content: "";
    background: url("../image/initiative/031_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}.cont ul dt.init32:after{
    content: "";
    background: url("../image/initiative/032_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}.cont ul dt.init33:after{
    content: "";
    background: url("../image/initiative/033_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}.cont ul dt.init34:after{
    content: "";
    background: url("../image/initiative/034_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}.cont ul dt.init35:after{
    content: "";
    background: url("../image/initiative/035_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}.cont ul dt.init36:after{
    content: "";
    background: url("../image/initiative/036_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}.cont ul dt.init37:after{
    content: "";
    background: url("../image/initiative/037_thumb.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;    
}

.cont ul dt.pic1:after{
    content: "";
    background: url("../image/product/water_001.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic2:after{
    content: "";
    background: url("../image/product/air_001.jpg") no-repeat;
    background-size: cover;
    background-position: top center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;

}

.cont ul dt.pic3:after{
    content: "";
    background: url("../image/product/soil_001.jpg") no-repeat;
    background-size: cover;
    background-position: top center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic4:after{
    content: "";
    background: url("../image/product/soil_001_2.jpg") no-repeat;
    background-size: cover;
    background-position: top center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}


.cont ul dt.pic5:after{
    content: "";
    background: url("../image/product/micro_001.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic6:after{
    content: "";
    background: url("../image/product/micro_002.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic8:after{
    content: "";
    background: url("../image/product/energy_001.jpg") no-repeat;
    background-size: cover;
    background-position: top center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic10:after{
    content: "";
    background: url("../image/product/micro_003.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic11:after{
    content: "";
    background: url("../image/product/micro_004.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic12:after{
    content: "";
    background: url("../image/product/soil_002.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic13:after{
    content: "";
    background: url("../image/product/air_002.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic14:after{
    content: "";
    background: url("../image/product/air_003.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic15:after{
    content: "";
    background: url("../image/product/air_004.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic16:after{
    content: "";
    background: url("../image/product/water_002.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic17:after{
    content: "";
    background: url("../image/product/biomass_001.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic18:after{
    content: "";
    background: url("../image/product/lab_001.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic19:after{
    content: "";
    background: url("../image/product/lab_002.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.cont ul dt.pic20:after{
    content: "";
    background: url("../image/product/biomass_002.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}


.cont ul dt.dammy:after{
    content: "";
    background-color: #F3F3F3;
    background-size: cover;
    background-position: center center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}


.cont ul .on dt:after{
    transform: scale(1.1);
}


.cont ul dd{
    padding: 22px;
    background-color: white;
}
.cont ul dd .mod-badge01 {
    background-color: #162452;
    color: #fff;
    line-height: 32px;
    font-size: 10px;
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    text-align: center;
    font-weight: 700;
    margin-top: -32px;
    margin-left: -32px;
    position: relative;
}
/* IE10〜11 */
_:-ms-input-placeholder, :root .cont ul dd .mod-badge01 {
    line-height: 36px;
}
/* Edge12〜14 */
@supports (-ms-ime-align: auto) and (not (-webkit-text-stroke: initial)) {
  .cont ul dd .mod-badge01 {
    line-height: 36px;
  }
}


.cont ul h3 {
    font-weight: bold;
    font-size: 1em;
    color: #333333;
    line-height: 1.5;
}

.cont ul .on h3 {
    color: black;
}

.cont ul a {
    color: black;
    display: block;
    height: 100%;
}

.cont ul dd i {
    position: absolute;
    bottom: 10px;
    right: 40px;
    font-size: 0.8em;
    color: #162452;
    transition: .3s;
}

.cont ul .on dd i {
    color: #009be3;
}


.cont ul dd i:before {
    content: "";
    width: 42px;
    position: absolute;
    height: 1px;
    background-color: #162452;
    top: 10px;
    left: 50px;
    transition: .3s;
}

.cont ul .on dd i:before {
    background-color: #009be3;
}

.cont ul.menu{
    display: flex;
    margin-top: 35px;
}

.cont ul.menu li{
    margin-right: 30px;
}

.cont ul.menu li a {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #162452;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #162452;
    transition: .3s;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.7;
}

.cont ul.menu li a:hover{
    background-color: #009be3;
    border: solid 1px #009be3;
    color: white;
}

.cont ul.menu li:last-child{
    margin-right: 0px;
}

.cont#init {
    margin-top: 150px;
}

.cont .about{
    margin-top: 80px;
}
.cont .about dl {
    display: flex;
    justify-content: center;
    align-items: center;
}
.cont .about dt {
    width: 43%;
    background-color: white;
    padding: 50px;
    position: relative;
    z-index: 1;
    margin-right: -7%;
    margin-top: 100px;
}
.cont .about dd{
    width: 65%;

}
.cont .about h3{
    color: #162452;
    font-weight: 500;
    font-size: 2em;
}
.cont .about dd.pic{
    background: url("../image/earth.png") no-repeat;
    background-position: center center;
    background-size: cover;
    height: 530px;
    width: 65%;
}

.cont .about a.common_btn{
    margin-left: 0;
    margin-right: initial;
    margin-top: 30px;
}

.cont .about p{
    margin-top: 20px;
}

#banner {
    height: 225px;
    background: url(../image/bg_forest.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    margin-top: 100px;
    display: flex;
}

#banner ul{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

#banner li{
    margin-right: 50px;
}

#banner li:last-child{
    margin-right: 0px;

}

#banner li a img{
    transition: .3s;
}

#banner li a img:hover{
    opacity: 0.7;
}

/* 下層ページ common ---------------------------------- */

#sub header .mv:before {
    display: none;
}

#sub header .mv {
    height: auto;
}

#sub header .mv .mv_cont{
    display: flex;
    height: 260px;
    width: 100%;
    max-width: 1040px;
    margin-top: 32px;
}

.mv_cont dl{
    width: 100%;   
    display: flex;
    
}

.mv_cont dt{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mv_cont dd {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    padding-left: 2.5%;
}

.mv_cont h2{
    color: #333333;
    line-height: 1;
    font-size: 2.7em;
    font-weight: 500;
}

.mv_cont h2 span {
    display: block;
    font-size: 0.45em;
    margin-top: 20px;
}



/* 下層ページ about ---------------------------------- */


.mv_cont.sub_about dt{
    background: url("../image/about/mv.png") no-repeat;
    background-size: cover;
    background-position: center center;
}


.about_intro{
    width: 100%;
    max-width: 1040px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.about_intro h3 {
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    color: #162452;
    font-weight: bold;
    font-size: 2.1em;
    line-height: 1;
}

.about_intro p {
    font-weight: normal;
    font-size: 1.15em;
    margin-top: 2.5%;
}

#sub section.about_echo,
#sub section.cont{
    padding-top: 6%;
    padding-bottom: 5%;

}

.about_echo ul{
    display: flex;
    margin-bottom: 3%;
}

.about_echo li {
    background-color: white;
    width: 50%;
}

.about_echo li:last-child{
    margin-left: 2.5%;
}

.about_echo li.dum {
    background-color: transparent !important;
    width: 50%;
}


.about_echo dl{
    display: flex;
    flex-direction: column;
}

.about_echo dt{
    display: flex;
}

.about_echo h2,
.cont h2{
    margin-bottom: 4.5%;

}

.about_echo dd{


}

.about_echo a.common_btn,
.about_pict a.common_btn{
    max-width: 320px;
}

a.common_btn.right_mark:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 1px;
    background-color: #162452;
    right: 15px;
    transition: .3s;
}

a.common_btn.right_mark:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 1px;
    background-color: #162452;
    right: 13px;
    transform: rotate(45deg);
    top: 19px;
    transition: .3s;
}

a.common_btn.right_mark:hover:before,
a.common_btn.right_mark:hover:after{
    background-color: white;
}

.about_echo dt span {
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: white;
    padding: 3%;
    line-height: 1;
    font-size: 2.5em;
    background-color: #162452;
}

.about_echo h4 {
    font-size: 1.3em;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: bold;
    color: #162452;
}

.about_echo p {
    padding: 5%;
    padding-top: 2.5%;
}

.about_pict ul {
    margin-top: 0;
    max-width: 862px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6%;
}

.about_pict li {
    width: 47.5%;
    margin-right: 2.5%;
    margin-top: 2.5%;
}

.about_pict li:nth-child(2n){
    margin-right: 0;
}

.about_pict img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.about_pict p.achive{
    text-align: center;
    margin-top: 1.5%;
}

.about_pict p.mark{
    text-align: left;
    margin-bottom: 2%;
    position: relative;
    display: flex;
}

.about_pict p.mark:before{
    content: "※";
    position: relative;
}


/* 下層ページ product ---------------------------------- */


.mv_cont.sub_product dt{
    background: url("../image/product/mv.png") no-repeat;
    background-size: cover;
    background-position: center center;
}

#sub .outer.right_bg:before {
    content: "";
    position: absolute;
    background: url(../image/pat1.gif) repeat;
    width: 100%;
    height: auto;
    z-index: -1;
    left: 55px;
    top: 200px;
    bottom: 0;
}

ul.path{
    display:block;
}

ul.path li{
    margin-right: 10px;
    position: relative;
    padding-right: 0px;
    display: inline-block;
}

ul.path li:after {
    content: ">";
    position: relative;
    right: 0;
    font-size: 0.8em;
    top: -1px;
    margin-left: 15px;
}


ul.path li:last-child:after{
    display: none;
}

ul.path a{
    color: black;
    transition: .3s;
}

ul.path a:hover{
    opacity: 0.7;
}

.product_detail h2 {
    text-align: left;
    margin-top: 20px;
    border-bottom: 1px solid #000;
    padding-bottom: 15px;
    line-height: 1.4;
}

.product_detail p{
    margin-top: 30px;
}
.product_detail p.imgtxt{
    margin-top: 0px;
}

.product_detail img{
    width: 100%;
    height: auto;
    margin-top: 30px;
    border: 1px solid #eaeaea;
    flex-shrink: 0;
}
.product_detail img.bno{
    border: none;
}
.product_detail img.mgt20{
    margin-top: 20px;
}
.product_detail img.mgt10{
    margin-top: 10px;
}

.product_detail figure > img { width: auto; max-width: 100%; }
.product_detail figure > figcaption {
    font-size: 12px;
    font-size: 1.2rem;
}
.product_detail .content{
    display: flex;
    flex-direction: column;
}

.product_detail hr {
    border-bottom: 1px solid #dadada;
    border-left: none;
    border-right: none;
    border-top: none;
    margin-top: 30px;
    width: 100%;
}

.product_detail .content.row{
    flex-direction: row;
}

.product_detail .content.row img {
    max-width: 500px;
    /*max-height: 100%;*/
    height: 100%;
}

.product_detail .content.row img.small {
    max-width: 250px;
    /*max-height: 100%;*/
    height: 100%;
}

.product_detail .content.row img.left{
    margin-left: 20px;
}

.product_detail .content.row img.right{
    margin-right: 20px;

}



.product_detail .content.row p{

}

.product_detail .text{
    
}
.product_detail .text p.txt1{
    line-height: 1.4;
}
.product_detail .text p.txt2{
    line-height: 1.6;
}

.content table{
    background-color: #cecece;
    text-align: center;
}

.content table td, .content table th {
    padding: 1%;
    font-size: 0.9em;
}

.content table th{
    background-color: #F3F3F3;
    color: 000;
    font-weight: normal;

}

.content table .st {
    background-color: #efefef;
    color: black;
    font-weight: bold;
}

.content table th.st{
    background-color: #d1d1d1;
    color: black;
}

.content table td{
    background-color: white;

}


/* 下層ページ initiative ---------------------------------- */

.mv_cont.sub_initiative dt{
    background: url("../image/initiative/mv.png") no-repeat;
    background-size: cover;
    background-position: center center;
}
/* */
.mod-box01 {
    background-color: #f4f7fc;
    padding: 14px;
}
a.mod-txtLink01 { text-decoration: underline; }
a.mod-txtLink01:hover { text-decoration: none; }
.relatedLink a {
    color: #162452;
}
.relatedLink a:hover {
    color: #009be3;
}
.relatedLink > li > ul {
    padding-left: 1em;
}
@media screen and (min-width:781px){
    .mod-box01 {
        padding: 28px;
    }
    .mod-imgSet01 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
    .mod-imgSet01.reverse {
      flex-direction: row-reverse;
    }
    .mod-imgSet01 > .txtBox {
      width: 595px;
    }
    .mod-imgSet01 > .imgBox {
      width: 417px;
      margin-left: 28px;
    }
    .mod-imgSet01.reverse > .imgBox {
      margin-left: 0;
      margin-right: 28px;
    }
    .mod-imgSet-float:after { display: block; clear: both; content: ""; }
    .mod-imgSet-float > .imgBox {
        float: right;
        margin: 0 0 28px 28px;
    }
    .mod-imgSet-float.reverse > .imgBox {
        float: left;
        margin: 0 28px 28px 0;
    }
    .mod-imgSet-float .imgBox img { margin-top: 0; }
    .mod-imgSet02 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: center;
      margin-left: -28px;
    }
    .mod-imgSet02.reverse {
      flex-direction: row-reverse;
    }
    .mod-imgSet02 > .imgBox {
        margin-left: 28px;
    }
}
@media print,(min-width:640px) { 
.p_w160 { width: 160px !important; }
.p_w750 { width: 750px !important; }
.p_aiC { align-items: center;  }
}
.sub { font-size: smaller; vertical-align:baseline }

.analysisBn > a {
    margin: 56px auto 0;
    color: #000;
}
.badge {
    display: inline-block;
    padding: 0 .5em;
    line-height: 1.5;
    color: #fff;
    background-color: #C11E07;
}
@media all and (-ms-high-contrast: none) {
  .badge {
    line-height: 1.1;
    padding-top: 5px;
  }
}

.analysisBn {
    margin-top: 48px;
    padding-left: 32px;
    padding-right: 32px;
}
.analysisBn > a {
    display: block;
    position: relative;
}
.analysisBn > a img { 
    width: auto;
    max-width: 100%;
    vertical-align: bottom;
}
.analysisBn a > p { 
    text-align: center;
    padding: 1em 1em 2em;
    background-color: #fff;
    font-weight: bold;
    color: #333;
}
.analysisBn a > .set_svg {
    bottom: 1em;
}
@media print,(min-width:640px) { 
    .analysisBn > a:hover {
        box-shadow: 0px 0px 30px rgba(22, 36, 82, 0.2);
    }
    .analysisBn { padding-bottom: 60px; }
    .analysisBn > a {
        display: flex;
        align-items: center;
        width: 684px;
        margin: 56px auto 0;
        background-color: #fff;
        color: #000;
    }
    .analysisBn > a img { 
        width: 245px;
        vertical-align: bottom;
    }
    .analysisBn a > p {
        width: 380px;
        margin-left: 16px;
        padding-bottom: 1em;
    }
}
@media print,(max-width:639px) { .pcObj { display: none!important; } }
@media print,(min-width:640px) { .SpObj { display: none!important; } }


/* 下層ページ product ---------------------------------- */

#section2 {
    margin: 0px;
    padding: 0px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    position: relative;
    max-width: 1040px;
}

#section2 .frame_g {
	display: block;
    border: 1px solid #cccccc;
    width: 100%;
    height: auto;
	padding: 20px;
    margin: 10px 0;
}
#section2 .frame_g table{
	width: 100%;
	padding: 10px;
}
#section2 .frame_g .tbl_h th{
    border: none;
	text-align: center;
}
#section2 .frame_g .tbl_h td{
    border: none;
	padding: 5px;
	vertical-align: top;
}

#section2 .frame_g .title {
	font-size: 1.5em;
	line-height: 1.6em;
	margin-top: 0px;
}
#section2 .frame_g .tit_sub {
	font-size: 1.3em;
	line-height: 1.4em;
	margin-top: 30px;
}
/*.product_detail .content.row img.exactly {*/
#section2 .frame_g img.exactly {
    /*max-width: 230px;*/
    height: 100%;
	padding-right: 20px;
}

#section2 .content2{
    /*display: block;*/
}
#section2 .f_left {
    float: left;
	margin-right: 20px;
}
#section2 .f_right {
    float: right;
	margin-left: 20px;
}
#section2 .clear {
	clear: both;
}
#section2 img.noline {
	border: none;
}
#section2 p{
    margin-top: 30px;
}
#section2 p.mg0 {
    margin: 0;
}
#section2 p.bld{
    font-weight: bold;
}
#section2 .in_caption p {
	display: inline-block;
	width: 100%;
	text-align: center;
    font-size:85%;
	margin-top: 5px;
}
#section2 .in_caption2 {
	display: block;
	width: 100%;
	text-align: center;
    font-size:85%;
    margin-top: 5px;
}
#section2 .in_caption2 p {
    margin-top: 5px;
}
#section2 .c_center {
	text-align: center;
}

#section2 .mg10_top {
	margin-top: 10px;
}
#section2 .mg20_top {
	margin-top: 20px;
}
#section2 .mg30_top {
	margin-top: 30px;
}
#section2 .mg10_btm {
	margin-bottom: 10px;
}
#section2 .mg20_btm {
	margin-bottom: 20px;
}
#section2 .mg30_btm {
	margin-bottom: 30px;
}


/* ------ add 202109 ------ */

.bannerArea {
    margin:50px 0 10px;
}
.bannerArea ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
.bannerArea ul li {
    margin:0 15px;
}
.bannerArea ul li img {
    vertical-align:top;
    width:100%;
    height: auto;
}
.bannerArea ul li a:hover {
        box-shadow: 0px 0px 30px rgba(22, 36, 82, 0.2);
}

@media screen and (max-width:781px) {
.bannerArea {
    margin:50px 0 10px;
}
.bannerArea ul {
    display: block;
}
.bannerArea ul li {
    margin:0 auto 30px;
    width:100%;
}
}

.nt {
    margin-bottom:60px;
}