@charset "UTF-8";
#mv{position:relative;z-index:0}
#mainvisual{position:relative;z-index:-1}
.skippr-previous,.skippr-next{display:none}
#mainvisual p{color:#fff;}
#mainvisual p span{display:inline-block;background:#1b1b1b;}
#mainvisual p strong{display:block;font-weight:normal;}
#mv li p{color:#fff;line-height:2.2em}
#introduction{background:url(../img/index/bg_intro.jpg) no-repeat center / cover;}
.skippr-previous,.skippr-next{display:none}
.skippr-nav-container{position:absolute;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);overflow:auto;z-index:20}
.skippr-nav-element{cursor:pointer;float:left;background-color:rgba(255,255,255,1);-webkit-transition:all .25s linear;transition:all .25s linear}
.skippr-nav-element-bubble{border-radius:50%;background:#dfdfdf}
.skippr-nav-element:hover,.skippr-nav-element-active{background-color:#bc314e}
.skippr-arrow{position:absolute;z-index:20;top:50%;cursor:pointer;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;}
#topics{background:#fff;font-weight:700;}
#topics dt{text-align:center;color:#fff;background:#bc314e}
#topics ul li time{color:#bc314e}
#topics ul li a{color:#111}
#topics ul+p a{font-size:0;position:relative;color:#bc314e}
#topics ul+p a:after,#serviceList ul li a h3:after,#introduction ul li a::after{content:"";display:inline-block;-webkit-transform:rotate(135deg);transform:rotate(135deg);position:absolute;}
#topics ul+p a:after,#serviceList ul li a h3:after{top:50%}
#greet p strong{font-weight:normal;background: -moz-linear-gradient(top,  rgba(237,151,151,0) 0%, rgba(237,151,151,0) 80%, rgba(237,151,151,1) 81%, rgba(237,151,151,1) 97%, rgba(237,151,151,0) 98%, rgba(237,151,151,0) 100%);
background: -webkit-linear-gradient(top,  rgba(237,151,151,0) 0%,rgba(237,151,151,0) 80%,rgba(237,151,151,1) 81%,rgba(237,151,151,1) 97%,rgba(237,151,151,0) 98%,rgba(237,151,151,0) 100%);
background: linear-gradient(to bottom,  rgba(237,151,151,0) 0%,rgba(237,151,151,0) 80%,rgba(237,151,151,1) 81%,rgba(237,151,151,1) 97%,rgba(237,151,151,0) 98%,rgba(237,151,151,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ed9797', endColorstr='#00ed9797',GradientType=0 );}
#productList ul li{background-size:cover;background-position:center;background-repeat:no-repeat;}
#productList ul li a{color:#fff;}
#productList ul li:nth-child(1){background-image:url("../img/index/lead1.png")}
#productList ul li:nth-child(2){background-image:url("../img/index/lead2.png")}
#productList ul li:nth-child(3){background-image:url("../img/index/lead3.png")}
#productList ul li:nth-child(4){background-image:url("../img/index/lead4.png")}
#productList ul li:nth-child(5){background-image:url("../img/index/lead5.png")}
#productList ul li:nth-child(6){background-image:url("../img/index/lead6.png")}
#productList h2,#serviceList h2{text-align:center;font-weight:bold;letter-spacing:0.05em;text-indent:0.05em;}
#productList h2::after,#serviceList h2::after{content:"";display:block;background:#bc314e;}
#serviceList ul li:nth-child(1){background-image:url("../img/index/lead1.jpg")}
#serviceList ul li:nth-child(2){background-image:url("../img/index/lead2.jpg")}
#serviceList ul li:nth-child(3){background-image:url("../img/index/lead3.jpg")}
#serviceList ul li:nth-child(4){background-image:url("../img/index/lead4.jpg")}
#latestPosts h3{font-weight:bold;letter-spacing:0.05em;text-indent:0.05em;}
#latestPosts h3 i{color:#bc314e}
#latestPosts ul li{border-bottom:1px solid rgba(0,0,0,.1);}
#latestPosts ul li:last-child{border-bottom:none;}
#latestPosts ul li a{display:flex;}
#latestPosts ul li figure{background-size:cover;background-repeat:no-repeat;background-position:center;margin:0 1.5em 0 0;}
#latestPosts ul li figure img{display:none}
#latestPosts ul li a time{font-family:"Alice","Times New Roman","Times",serif;color:#bc314e}
#latestPosts ul li a p{color:#111;}

@media screen and (min-width:769px) {
skippr{width:100%;height:100%;position:relative;overflow:hidden;padding:0;margin:0}
.skippr > li{position:absolute;width:100%;height:100%;background-size:cover;background-position:50% 62.5%}
.skippr > img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;min-height:100%}
#mainvisual{max-width:1100px;height:610px;margin:0 auto 30px;position:relative;}
#mv{height:600px;z-index:0;width:1040px;}
#mv li{width:862px;height:600px;}
#mv li img{display:none}
#mv1{background-image:url(../img/index/mv1.png)}
#mv2{background-image:url(../img/index/mv2.png)}
#mv3{background-image:url(../img/index/mv3.png)}
#mainvisual p{writing-mode:vertical-rl;font-size:46px;position:absolute;top:0;right:0;letter-spacing:0.05em;}
#mainvisual p span{margin:1.5em .2em;padding:.2em .1em 0;}
#mainvisual p span:last-child{padding-bottom:.2em;}
.skippr-nav-container{right:0;bottom:0;z-index:1;}
.skippr-nav-element-bubble{width:10px;height:10px;margin:0 4px;z-index:10;}
.skippr-arrow{width:50px;height:50px}
.skippr-previous{left:20px}
.skippr-next{right:20px}
.skippr-previous:hover{left:15px}
.skippr-next:hover{right:15px}
.skippr-previous:before,.skippr-next:before{top:38%;left:35%;}
#topics{width:calc(100% - 20px);margin:0 auto -35px;max-width: 1000px;}
#topics dl{position:relative;margin:0 auto 0;display:flex;background:#fff;height:80px;z-index:1;overflow:hidden;align-items:center;box-shadow:0px 0px 9px 3px rgba(0,0,0,.1);}
#topics dt{width:140px;font-size:16px;padding:27px 0 0;letter-spacing:0.08em;position:relative;text-align:center;height:100%}
#topics dd{padding:0 30px}
#topics ul+p{position:absolute;right:15px;top:50%;margin-top:-12px}
#topics ul li{padding:0;height:auto;font-size:16px;overflow:hidden;line-height:1.8em;}
#topics ul li time,#topics ul li p{display:inline-block;}
#topics ul li time{padding:0 30px 0 25px;letter-spacing:0.05em;font-size:14px;position:relative;top:-2px;}
#topics ul li p{font-size:18px;padding:0 20px 0 0}
#topics ul li a{display:flex;}
#topics ul li a:hover p{text-decoration:underline}
#topics ul+p a{transition:0.3s;display:inline-block;padding:16px;top:-5px}
#topics ul+p a::after{width:8px;height:8px;margin:-6px 0 0 0;right:10px;border-top:3px solid #bc314e;border-right:3px solid #bc314e;transition:0.3s}
#topics ul+p a:hover::after{margin:-2px 0 0;}
#introduction{padding-top:70px;}
#productList h2,#serviceList h2{font-size:32px;}
#productList h2::after,#serviceList h2::after{width:36px;height:2px;margin:.3em auto 0;}
#productList ul,#serviceList ul{display:flex;align-items:center;}

#greet,#productList{margin:0 auto;width:100%;}
#greet{max-width:1100px;background:url("../img/index/img01.png") no-repeat left center;background-size:auto 96%;padding:60px 20px 60px 500px;}
#greet p{font-size:18px;line-height:2.2em;margin:0 0 2.5em;color:#111;font-weight:600}
#greet p strong{font-size:20px;}

#productList{max-width:1230px;padding:60px 20px 40px;}
#productList ul{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:40px auto;}
#productList ul li{width:16%;height:auto;position:relative;top:0;transition:.3s;}
#productList ul li:hover{top:-5px;}
#productList ul li:before{content:"";display:block;padding-top:100%}
#productList ul li a{display:block;position:absolute;top:25px;left:25px;width:calc(100% - 50px);height:calc(100% - 50px);text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;font-size:18px;background:#bc314e;transition:.3s;line-height:1;}
#productList ul li a:before{content:"";height:100%;vertical-align:middle;width:0;display:inline-block}
#productList ul li a > *{vertical-align:middle;display:inline-block}
#productList ul li a:hover{background:#e36a83;}
	
#serviceList{max-width:1230px;min-width:900px;margin:0 auto;padding:100px 0 0;position:relative}
#leadService h3{width:24.5%;text-align:center;z-index:1;display:inline-block;color:#fff;position:absolute;left:-8px;top:20%;line-height:1;font-size:21px}
#serviceList ul{display:-webkit-flex;display:flex;flex-wrap:wrap;-webkit-justify-content:space-between;justify-content:space-between;margin:60px auto;}
#serviceList ul li{flex:0 0 24.5%;position:relative;margin-bottom:.5%;text-align:center;background-repeat:no-repeat;background-size:cover;background-position:center;top:0;transition:.3s}
#serviceList ul li::before{content:'';display:block;padding-top:100%}
#serviceList ul li::after{position:absolute;right:0;bottom:0;background-color:rgba(192,67,93);content:"";display:block;width:100%;height:100%;z-index:-1}
#serviceList ul li a{position:absolute;top:0;left:0;width:100%;height:100%;font-size:18px;color:#fff;text-decoration:none;vertical-align:middle;display:table-cell;display:flex;z-index:1;line-height:1.6em}
#serviceList ul li a{justify-content:center;align-items:center}
#serviceList ul li a::before{width:50%;height:50%;background:rgba(192,67,93,.9);content:"";display:block;position:absolute;top:24.5%;left:24.5%;transition:.3s;z-index:-1}
#serviceList ul li:hover{top:-5px;}
#serviceList ul li a:hover::before{background:rgba(192,67,93)}
#latestPosts{max-width:1230px;min-width:900px;margin:0 auto;display:flex;padding:60px 20px 100px;}
#latestPosts ul{padding:20px 0;}
#latestPosts ul li{padding:10px 20px;}
#latestPosts ul li figure{width:120px;height:120px;}
#latestPosts ul li figure img{}
#latestPosts section{width:50%;text-align:left;padding:0 40px;}
#latestPosts h3{font-size:24px;}
#latestPosts h3 i{font-size:20px;margin:0 .5em 0 0;}
#latestPosts ul li div{width:calc(100% - 140px)}
#latestPosts ul li a p{font-size:18px;padding:1em 0 0;font-weight:600}
#latestPosts ul li a:hover p{color:#bc314e;text-decoration:underline;}
#latestPosts ul + p{padding:2em;text-align:center;font-weight:600;}
}


@media screen and (max-width:768px) {
.skippr > li{position:absolute;width:100%;height:100%;background-size:cover;background-position:50% 62.5%}
.skippr > img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;min-height:100%}
#mainvisual{height:400px;width:100%}
#mv{overflow:hidden;height:100%;}
#mv li{width:100%;position:relative;margin:0 auto;overflow:hidden;height:400px;}
#mv1{background-image:url(../img/index/mv1.jpg)}
#mv2{background-image:url(../img/index/mv2.jpg)}
#mv3{background-image:url(../img/index/mv3.jpg)}

#mainvisual p{position:absolute;font-size:24px;right:0;bottom:30px;text-align:right}
#mainvisual p strong{padding:0 10px;width:300px}
#mainvisual p span{padding:0 5px;margin:0 0 2px}
.skippr-nav-container{left:50%;bottom:5px}
.skippr-nav-element-bubble{width:8px;height:8px;margin:0 5px}
.skippr-previous:before,.skippr-next:before{top:30%;left:30%}
.skippr{width:100%;height:100%;position:relative;overflow:hidden;padding:0;margin:0}
.skippr > li{position:absolute;width:100%;height:100%;background-size:cover;background-position:50% 62.5%}
.skippr > img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;min-height:100%}

#topics{width:100%;position:relative;margin:0px 0 0;padding:10px;background: url(../img/common/bg01.gif);z-index:1;overflow:hidden}
#topics dt{text-align:center;font-size:14px;padding:5px;}
#topics dd{padding:5px;margin:0;background:#fff;}
#topics ul+p{position:absolute;right:15px;top:60%;margin-top:-12px}
#topics ul li{display:flex;padding:8px 5px 5px}
#topics ul li time,#topics ul li p{display:inline-block;padding:3px 0 0}
#topics ul li time{padding:3px 15px 5px 0px;font-size:13px}
#topics ul li p{font-size:0.937rem;line-height:1.5em;padding:0 30px 0 0}
#topics ul li p a:hover{text-decoration:underline}
#topics ul+p a{transition:0.3s;display:inline-block;padding:16px;top:-5px}
#topics ul+p a::after{width:6px;height:6px;margin:0 0 0 0;right:12px;border-top:3px solid #bc314e;border-right:3px solid #bc314e;transition:0.3s}

#greet{padding:60px 20px 20px;position:relative;text-align:center}
/*#greet::before{background:url("../img/index/img01.png") no-repeat left center;background-size:auto 96%;content:"";display:block;width:100%;height:100%;position:absolute;top:0;opacity:.4}*/
#greet p{font-size:15px;line-height:2em;margin:0 0 2.5em;color:#111;font-weight:bold;position:relative;z-index:10}
#greet p strong{font-size:18px;font-weight:bold;}
#productList h2,#serviceList h2{font-size:22px;margin:0 auto 1em}
#productList h2::after,#serviceList h2::after{width:30px;height:2px;margin:.2em auto 0;}
#productList{padding:0 10px 40px;}
#productList ul{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 auto;}
#productList ul li{width:32%;height:auto;position:relative;top:0;transition:.3s;margin:0 auto 1%}
#productList ul li:before{content:"";display:block;padding-top:100%}
#productList ul li a{display:block;position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;font-size:14px;background:#bc314e;transition:.3s;line-height:1;}
#productList ul li a:before{content:"";height:100%;vertical-align:middle;width:0;display:inline-block}
#productList ul li a > *{vertical-align:middle;display:inline-block}
#serviceList{padding:40px 10px}
#serviceList ul{display:-webkit-flex;display:flex;flex-wrap:wrap;-webkit-justify-content:space-between;justify-content:space-between;margin:0 auto;}
#serviceList ul li{flex:0 0 49%;position:relative;margin-bottom:.5%;text-align:center;background-repeat:no-repeat;background-size:cover;background-position:center;top:0;transition:.3s}
#serviceList ul li::before{content:'';display:block;padding-top:100%}
#serviceList ul li::after{position:absolute;right:0;bottom:0;background-color:rgba(192,67,93);content:"";display:block;width:100%;height:100%;z-index:-1}
#serviceList ul li a{position:absolute;top:0;left:0;width:100%;height:100%;font-size:16px;color:#fff;text-decoration:none;vertical-align:middle;display:table-cell;display:flex;z-index:1;line-height:1.6em}
#serviceList ul li a{justify-content:center;align-items:center}
#serviceList ul li a::before{width:70%;height:70%;background:rgba(192,67,93,.9);content:"";display:block;position:absolute;top:15%;left:15%;transition:.3s;z-index:-1}

#latestPosts{margin:0 auto;padding:20px 20px 0;}
#latestPosts ul{padding:20px 0 0;}
#latestPosts ul li a{padding:10px 0;text-align:left;}
#latestPosts ul li figure{width:100px;height:100px;margin-right:15px}
#latestPosts ul li figure img{}
#latestPosts section{text-align:center;padding:0 0 40px;}
#latestPosts h3{font-size:22px;padding-right:30px}
#latestPosts h3 i{font-size:20px;margin:0 .5em 0 0;}
#latestPosts ul li div{width:calc(100% - 120px)}
#latestPosts ul li time{font-size:12px}
#latestPosts ul li a p{font-size:15px;padding:.5em 0 0;font-weight:600}
#latestPosts ul + p{padding:1em 0 3em;text-align:center;font-weight:600;}
#gnav ul li:nth-child(1) a{color:rgba(255,255,255,.4)}
}


@media screen and (max-width:440px) {
#mainvisual,#mv li{height:300px;}
}