@charset "utf-8";

/* about */
.article {padding: 90px 0; text-align: center;}
.article.bg {background: #f8f8f8;}
.article .sub-title{padding: 0 0 40px;}
.article .cnt p {color: #505050; font-size: 22px; font-weight: 500; line-height: 1.727em; letter-spacing: -.04em;}

.value .tit {display: block; font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -.04em;}
.value ul {position: relative; display: flex;margin: 0 -10px; margin-top: 70px;}
.value ul:after {content:""; position: absolute; top: 36.7%; left: 50%; margin-left: -500px; max-width: 1000px; width: 100%; height: 1px; background: url("../images/sub/line.jpg") center center; z-index: -1;}
.value ul li {width: 25%; padding: 0 10px;}
.value ul li .img {position: relative; display: inline-block;}
.value ul li .img:before,
.value ul li .img:after {content:""; position: absolute; top: 50%; margin-top: 5px; width: 11px; height: 11px; border-radius:100%;}
.value ul li .img:before {left: -5px;}
.value ul li .img:after {right: -5px;}
.value ul li.c1 .img:before,
.value ul li.c1 .img:after {background: #878787;}
.value ul li.c2 .img:before,
.value ul li.c2 .img:after {background: #686868;}
.value ul li.c3 .img:before,
.value ul li.c3 .img:after {background: #454545;}
.value ul li.c4 .img:before,
.value ul li.c4 .img:after {background: #222222;}
.value ul li:first-child .img:before,
.value ul li:last-child .img:after {display: none;}
.value ul li p {color: #505050; font-size: 17px; line-height: 1.765em; letter-spacing: -.04em; margin-top: 20px;}



/* member */
.comp-intro {text-align: center; margin-bottom: 110px;}
.comp-intro .logo {margin-bottom: 25px;}
.comp-intro p {color: #505050; font-size: 22px; font-weight: 500; line-height: 1.727em; letter-spacing: -.04em;}


.doc-tit {position: relative; color: #505050; font-size: 35px; font-weight: 700; line-height: 1.2; letter-spacing: -.04em; margin-bottom: 45px;}
.doc-tit:after {content:''; position: absolute; top: 50%; left: 0;margin-top: -242px; margin-left: calc(100% - 10px); width: 478px; height: 489px; z-index: -1; background: url("../images/sub/title.png") left center no-repeat; background-size:contain;}
.doc-tit h3 {position: relative;}
.doc-tit h3:before,
.doc-tit h3:after {content:""; position: absolute; height: 1px; top: 50%; background: #eee; z-index: -1;}
.doc-tit h3:before {width: 200%; left: -30px; margin-left: -200%;}
.doc-tit h3:after {right: 0; left: 172px;}
.doc-tit .txt-circle {position: absolute; top: 50%; right: 0; margin-top: -117px; margin-right: -117px; animation: rotate_image 20s linear infinite;transform-origin: 50% 50%;}
@keyframes rotate_image{ 100% { transform: rotate(360deg); } }


.main-product .btn-pack img {vertical-align:middle; margin: -.2em 0 0 12px;}


/* product */
.prd-gate {display: flex;flex-wrap:wrap; text-align: center;}
.prd-gate li {width: 20%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover;}
.prd-gate li a {position: relative; display: block; height: 100%; padding: 200px 15px;}
.prd-gate li .tit {color: #fff; font-size: 30px; line-height: 1.5; letter-spacing: -.04em; margin-bottom: 15px;}
.prd-gate li .go {background: url("../images/sub/arrow.png") center center no-repeat;}
.prd-gate li .go img {visibility: hidden;}

.prd-gate li a:hover:before {content:""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(223,223,223,.87);}
.prd-gate li a:hover .tit {color: #2c2c2c; position: relative; z-index: 1;}
.prd-gate li a:hover .go {background-image:url("../images/sub/arrow_on.png"); position: relative; z-index: 1;}

.prd-gate li.bg1 {background-image:url("../images/sub/prd1.jpg");}
.prd-gate li.bg2 {background-image:url("../images/sub/prd2.jpg");}
.prd-gate li.bg3 {background-image:url("../images/sub/prd3.jpg");}
.prd-gate li.bg4 {background-image:url("../images/sub/prd4.jpg");}
.prd-gate li.bg5 {background-image:url("../images/sub/prd5.jpg");}