@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Electrolize|Kosugi+Maru|M+PLUS+1p:700|Noto+Serif+JP:500,600,700&Noto+Sans+JP:400,500&display=swap');

*{
box-sizing:border-box;
margin:0;
padding:0;
font-weight:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


/* font */
.f-serif{
font-family: 'Noto Serif JP', sans-serif;
}

.f-sans{
font-family: 'Noto Sans JP', sans-serif;
font-weight:500;
}

.f-elect{
font-family: 'Electrolize', sans-serif;
}

.f-maru{
font-family: 'Kosugi Maru', sans-serif;
}

.f-plus{
font-family: 'M PLUS 1p', sans-serif;
font-weight:700;
}


/* common */
html{
background:#fff;	
}

body { 
font-family: 'Noto Serif JP', sans-serif;
font-size:14px;
color:#231815;
background:#fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
min-width: 1000px;
line-height:1.6;
overflow-wrap: break-word;
word-wrap: break-word;
font-weight:500;
} 

a{
text-decoration:none;
color:#231815;
transition:0.3s all ease;
cursor:pointer;
}
a:hover{
color:#333;	
}
a:hover img {
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
}

table{
border-collapse:collapse;
width:100%;
}
img{
border:none;
width:100%;
max-width:100%;
height:auto;
vertical-align:bottom;
}
ul,ol{
list-style:none;
}

.tc{
text-align:center;
}
.tl{
text-align:left;
}
.tr{
text-align:right;
}

#page{
padding-top:230px;	
}

.inner{
width:1000px;
margin:0 auto;	
}

.sp{display:none;}
.pc{display:inline-block;}


/* .view */
.view{
opacity : 0;
transform : translate(0, 70px);
transition : all 500ms;
}
.view.scrollin{
opacity : 1;
transform : translate(0, 0);
}


/* clearfix */
.cf:before,
.page:before,
section:before,
.post:before{
content:"";
display: table;
}
.cf:after,
.page:after,
section:after,
.post:after{
content:"";
display: table;
clear:both;
}

@media screen and (max-width: 768px) {
html{
font-size: 62.5%;	
}

body {
font-size: 1.4rem;
line-height:1.6;
min-width: 100%;	
}

#page{
overflow:hidden;
width:100%;
min-width:100%;
padding-top:165px;
}

.inner{
width:100%;
background:none;	
}

.pc{display:none;}
.sp{display:inline-block;}
}



/*----------------------
 .header
----------------------*/
.header{
position:fixed;
top:0;
width:100%;
background:#fff;
z-index:9999;
/*height:230px;*/
}

.header .inner{
position:relative;	
}

.header h1{
font-family: 'Noto Sans JP', sans-serif;
font-weight:500;
font-size:10px;
padding:10px 0;
}

.header .hd-logo{
text-align:center;
padding:25px 0;
}
.header .hd-logo img{
max-width:210px;
width:50%;	
}

.header .hd-info{
position:absolute;
bottom:25px;
right:0;	
}
.header .hd-company{
margin-bottom:10px;	
}
.header .hd-company img{
width:186px;	
}
.header .hd-tel{
line-height:1;	
}
.header .hd-tel span{
background:url(../images/hd-tel.png) no-repeat 0 50%;
-moz-background-size:20px auto;
background-size:20px auto;
color:#000066;
padding-left:25px;
font-size:22px;
font-weight:700;	
}

.header .hd-nav{
background:url(../images/nav.png) repeat-x 0 0;
-moz-background-size:auto 100%;
background-size:auto 100%;
}
.header .global{
width:100%;
text-align:center;
padding:15px 0 18px;
}
.header .global li{
display:inline-block;
border-right:#fff solid 1px;
padding:0 5px;
line-height:1;
}
.header .global li:last-child{
border-right:none;	
}
.header .global li a{
vertical-align:middle;
color:#fff;
font-size:21px;
padding:0 50px;
}
.header .global li a:hover span{
border-bottom:#fff solid 1px;	
}
@media screen and (max-width: 768px) {
.header{
height:auto;
}

.header h1{
padding:5px 10px 0;
}

.header .hd-logo{
padding:15px 0 20px;
}
.header .hd-logo img{
max-width:150px;
width:50%;	
}

.header .hd-info{
display:none;
}

.header .hd-nav{
-moz-background-size:110px auto;
background-size:110px auto;
}
.header .global{
padding:15px 0;
display: flex;
flex-wrap: nowrap;
}
.header .global li{
padding:0;
width:24%;
}
.header .global li:last-child{
width:28%;	
}
.header .global li a{
font-size:1.3rem;
padding:0 0 .3em;
}
}



/*----------------------
 .footer
----------------------*/
.footer{
text-align:center;	
}
.footer .ft-logo{
padding:55px 0;	
}
.footer .ft-logo img{
max-width:167px;
width:40%;	
}
.footer .copyrights{
background:#000066;
color:#fff;
font-size:12px;
clear:both;
display:block;
padding:7px 0;
}
@media screen and (max-width: 768px) {
.footer .ft-logo{
display:none;	
}
.footer .copyrights{
font-size:10px;
}
}



/*----------------------
 .main-visual
----------------------*/
.main-visual{
width:100%;
height:650px;
background:url(../images/main-visual.png) no-repeat 50% 50%;
-moz-background-size:cover;
background-size:cover;
text-align:center;
box-shadow: 0px 12px 8px -8px rgba(0,0,0,0.4);
}
.main-visual .inner{
display:table;
width:100%;
height:650px;	
}
.main-visual-catch{
display:table-cell;
vertical-align:middle;
height:650px;
}
.main-visual-catch img{
width:515px;	
}
@media screen and (max-width: 768px) {
.main-visual{
height:300px;
}
.main-visual .inner{
height:300px;	
}
.main-visual-catch{
height:300px;
}
.main-visual-catch img{
max-width:400px;
width:80%;	
}
}



/*----------------------
 .container
----------------------*/

/* .container */
.container .title{
background: rgb(255,255,255);
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(30,29,102,1) 50%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(30,29,102,1) 50%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(30,29,102,1) 50%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
font-size:22px;
color:#fff;
letter-spacing:.3em;
text-align:center;
padding:3px 0 5px;
margin-bottom:30px;
}
@media screen and (max-width: 768px) {
.container .title{
font-size:2rem;
margin-bottom:30px;
}	
}



/* .index-slogan */
.index-slogan .slogan{
text-align:center;
padding:60px 0;	
}
.index-slogan .slogan span{
display:block;
}
.index-slogan .slogan .en{
font-size:18px;
color:#000066;
margin-bottom:20px;	
}
.index-slogan .slogan .ja{
font-size:28px;
}
@media screen and (max-width: 768px) {
.index-slogan .slogan{
padding:40px 0;	
}
.index-slogan .slogan .en{
font-size:1.4rem;
margin-bottom:15px;	
}
.index-slogan .slogan .ja{
font-size:1.8rem;
}	
}



/* #index-business */
#index-business{
margin-bottom:90px;
}
#index-business .inner{
position:relative;
}
#index-business .inner:after{
content: "";
position: absolute;	
width:510px;
height:350px;
background:url(../images/index-sec01-bg.png) no-repeat 0 0;
-moz-background-size:100% auto;
background-size:100% auto;
right:-150px;
bottom:0;
}

#index-business .post{
position:relative;
z-index:2;	
}

#index-business .comment{
text-align:center;
font-size:18px;
margin-bottom:80px;
position:relative;
}
#index-business .comment:after{
content:"";
display:block;
position:absolute;
bottom:-40px;
right:0;
left:0;
margin:auto;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000066;	
}

#index-business .index-works-list{
display: flex;
flex-wrap: wrap;
padding:0 35px;
position:relative;
border-bottom:#666 dotted 2px;
margin-bottom:40px;	
}
#index-business .index-works-list:last-child{
margin-bottom:0;
border-bottom:none;	
}
#index-business .index-works-list .list{
margin:0 20px 40px;
width:420px;
}
#index-business .index-works-list .list .list-main{
width:100%;
display:table;	
}
#index-business .index-works-list .list .ttl{
background:#000066;
color:#fff;
text-align:center;
font-size:18px;
position:relative;
width:100%;
width:50%;
display:table-cell;
vertical-align:middle;
letter-spacing:.05em;	
}
#index-business .index-works-list .ttl:before{
position: absolute;
content: "";
left: 0;
top: 0;
border-width: 0 0 20px 20px;
border-style: solid;
border-color: #000066 #fff #000066;
z-index:1;
}
#index-business .index-works-list .ttl:after{
position: absolute;
right: 15px;
bottom: 10px;
color:rgba(255,255,255,0.1);
z-index:1;
font-size:85px;
font-family: 'Noto Serif JP', sans-serif;
font-style:italic;
line-height:1;
}
#index-business .index-works-list .num1:after{
content: "1";	
}
#index-business .index-works-list .num2:after{
content: "2";	
}
#index-business .index-works-list .num3:after{
content: "3";	
}
#index-business .index-works-list .num4:after{
content: "4";	
}
#index-business .index-works-list .num5:after{
content: "5";	
}
#index-business .index-works-list .num6:after{
content: "6";	
}
#index-business .index-works-list .list .ttl .pic{
width:50%;
display:table-cell;
vertical-align:middle;
position:relative;
overflow:hidden;
}
#index-business .index-works-list .list .ttl .pic img{
width:100%;
height:210px;
object-fit:cover;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;	
}
#index-business .index-works-list .list .txt{
padding:15px 0;
}
#index-business .index-works-list .list .txt p{
font-size:14px;	
font-family: 'Noto Sans JP', sans-serif;
font-weight:500;
font-weight:bold;
text-align:center;
}
#index-business .index-works-list .list .txt p span{
font-size:12px;
font-weight:bold;	
}
#index-business .index-works-list .list .item{
background:#dadbdb;
padding:15px 10px;
position:relative;
text-align:center;
letter-spacing:-.40em;
}
#index-business .index-works-list .list .item.h80{
min-height:80px;	
}
#index-business .index-works-list .list .item.h120{
min-height:120px;	
}
#index-business .index-works-list .list .pt05{
padding-top:.5em;	
}
#index-business .index-works-list .list .pt1{
padding-top:1em;	
}
#index-business .index-works-list .list .item ul{
text-align:left;
display:inline-block;
letter-spacing:normal;	
}
#index-business .index-works-list .list .item li span{
font-size:11px;	
font-family: 'Noto Sans JP', sans-serif;
font-weight:500;
margin-left:1em;
font-weight:bold;
}
#index-business .index-works-list .list .item li span:before{
content: "・";	
}
#index-business .index-works-list .list .item li span:first-child{
margin-left:0;	
}

#index-business .msg{
font-size:28px;
text-align:center;
padding:40px 0 180px;
position:relative;
z-index:2;	
}

#index-business .fixed-bg{
width:100%;
height:400px;
background:url(../images/index-sec01-bottom.png) no-repeat 50% 0 fixed;
-moz-background-size:cover;
background-size:cover;
}
@media screen and (max-width: 768px) {
#index-business{
margin-bottom:50px;	
}

#index-business .inner{
background:url(../images/index-sec01-bg.png) no-repeat 100% 100%;
-moz-background-size:60% auto;
background-size:60% auto;	
}
#index-business .inner:after{
display:none;	
}

#index-business .comment{
font-size:1.6rem;
margin-bottom:40px;		
}
#index-business .comment:after{
bottom:-20px;
}

#index-business .index-works-list{
border-bottom:none;
margin-bottom:0;
padding:0 5%;
}

#index-business .index-works-list .list .item.h80,
#index-business .index-works-list .list .item.h120{
min-height:auto;	
}
#index-business .index-works-list .list .pt05,
#index-business .index-works-list .list .pt1{
padding-top:0;	
}
#index-business .index-works-list .list{
margin:0 auto 40px;
display:block;
text-align:left;
max-width:420px;
width:100%;	
}

#index-business .msg{
font-size:2.4rem;
padding:0 0 25vw;	
}

#index-business .fixed-bg{
height:40vw;
background:url(../images/index-sec01-bottom-sp.png) no-repeat 50% 0;
-moz-background-size:cover;
background-size:cover;
}
}


/* #index-company */
#index-company{
margin-bottom:90px;	
}

#index-company .upper{
text-align:center;
margin-bottom:50px;	
}
#index-company .upper .ttl{
font-size:28px;
margin-bottom:45px;	
}
#index-company .upper .ttl:before{
content:attr(data-title);
display:block;
background:#000066;
color:#fff;
border-radius:50%;
font-size:16px;
width:100px;
height:60px;
padding-top:40px;
margin:15px auto 40px;
letter-spacing:.15em;
text-indent:.15em;
line-height:1;
}
#index-company .upper p{
line-height:3;	
}

#index-company .middle{
margin-bottom:75px;	
}
#index-company .index-company-pic{
display: flex;
justify-content: space-between;	
padding:0 50px;
}
#index-company .index-company-pic .pic{
width:270px;
height:220px;
position:relative;
overflow:hidden;
}
#index-company .index-company-pic .pic img{
width:100%;
height:220px;
object-fit:cover;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;	
}

#index-company .index-company-table{
padding:0 180px;	
}
#index-company .index-company-table .tb{
display:table;
width:100%;	
}
#index-company .index-company-table .tb:nth-child(odd){
background:rgba(23,42,134,0.2);	
}
#index-company .index-company-table .tb dt{
display:table-cell;
padding:10px 20px;
font-size:16px;
width:120px;	
}
#index-company .index-company-table .tb dd{
display:table-cell;	
padding:10px 20px;
font-size:16px;	
}
#index-company .index-company-table .in-table dt{
width:180px;
padding:5px 0;	
}
#index-company .index-company-table .in-table dt span{
display:inline-block;	
}
#index-company .index-company-table .in-table dt span:before{
content:"●";	
}
#index-company .index-company-table .in-table dd{
font-size:14px;
padding:5px 10px;	
}

/* 取り組み */
#index-company .torikumi{
    width: 100%;
    padding-bottom: 65px;
    margin-bottom: 100px;
    border-bottom: 1px solid rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#index-company img{
    width: 100%;
}
#index-company .torikumi_left{
    width: 330px;
}
#index-company .torikumi_left .torikumi-image{
    width: 330px;
    box-shadow: 5px 5px 10px rgb(0, 0, 0, .1);
}
#index-company .torikumi_right{
    width: 420px;
}
#index-company .torikumi_right .torikumi-image{
    width: 360px;
}
@media screen and (max-width: 768px) {
#index-company{
margin-bottom:50px;	
}

#index-company .upper{
margin-bottom:25px;	
}
#index-company .upper .ttl{
font-size:2rem;
margin-bottom:15px;	
}
#index-company .upper .ttl:before{
margin-bottom:20px;
margin-top:0;
}
#index-company .upper p{
line-height:2.4;	
}

#index-company .middle{
margin-bottom:30px;	
}
#index-company .index-company-pic{
padding:0;
}
#index-company .index-company-pic .pic{
width:32.5%;
height:30vw;
}
#index-company .index-company-pic .pic img{
width:100%;
height:30vw;	
}

#index-company .index-company-table{
padding:0 5%;	
}
#index-company .index-company-table .tb dt{
padding:5px 10px;
font-size:1.3rem;
width:80px;	
}
#index-company .index-company-table .tb dd{
display:table-cell;	
padding:5px 10px;
font-size:1.3rem	
}
#index-company .index-company-table .in-table{
display:block;	
}
#index-company .index-company-table .in-table dt{
width:100%;
padding:5px 0 0;
display:block;	
}
#index-company .index-company-table .in-table dd{
display:block;
font-size:1.3rem;
padding:5px 1em 13px;	
}
#index-company .index-company-table .in-table:last-child dd{
padding-bottom:8px;	
}
/* 取り組み */
#index-company .torikumi{
    padding-bottom: 25px;
    margin-bottom: 25px;
    display: block;
}
#index-company .torikumi_left{
    width: 100%;
}
#index-company .torikumi_left .torikumi-image{
    width: 50%;
    margin: 0 auto;
}
#index-company .torikumi_right{
    width: 100%;
}
#index-company .torikumi_right .torikumi-image{
    width: 50%;
    margin: 0 auto;
}
}


/* #index-contact */
#index-contact .comment{
text-align:center;
font-size:18px;
margin-bottom:80px;
position:relative;	
}
#index-contact .comment:after{
content:"";
display:block;
position:absolute;
bottom:-40px;
right:0;
left:0;
margin:auto;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000066;	
}

#index-contact .index-contact-box{
display: flex;
flex-wrap: nowrap;
margin-bottom:65px;	
}
#index-contact .index-contact-box .box{
width:50%;
text-align:center;	
}
#index-contact .index-contact-box .box:nth-child(odd){
border-right:#ccc solid 1px;	
}
#index-contact .index-contact-box .box .ttl{
margin-bottom:20px;	
}
#index-contact .index-contact-box .box .ttl span{
display:inline-block;
font-size:18px;	
}
#index-contact .index-contact-box .box .ttl span:before{
content:"＜";	
}
#index-contact .index-contact-box .box .ttl span:after{
content:"＞";	
}
#index-contact .index-contact-box .box .tel a{
display:none;	
}
#index-contact .index-contact-box .box .tel span{
font-size:60px;
color:#e60012;
background:url(../images/contact-area-tel.png) no-repeat 0 70%;
-moz-background-size:40px auto;
background-size:40px auto;
padding-left:50px;
display:inline-block;
line-height:1;
}
#index-contact .index-contact-box .box .mail a{
color:#000066;
font-size:32px;
display:inline-block;
line-height:1;
padding:.4em 0;	
}
#index-contact .index-contact-box .box .mail a:hover{
color:#666;	
}

#index-contact .index-contact-box .box .postscript{
font-size:14px;
padding-top:15px;	
}
#index-contact .index-contact-box .box .postscript p:before{
content:"◇";
margin-right:.3em;	
}

#index-contact .index-contact-map iframe{
width:100%;
height:400px;
display:block;	
}
@media screen and (max-width: 768px) {
#index-contact .comment{
font-size:1.6rem;
margin-bottom:40px;	
}
#index-contact .comment:after{
bottom:-20px;
}

#index-contact .index-contact-box{
display: block;
padding:0 5%;
margin-bottom:20px;
}
#index-contact .index-contact-box .box{
width:100%;
padding-bottom:20px;
}
#index-contact .index-contact-box .box:nth-child(odd){
border-right:none;
border-bottom:#ccc solid 1px;
margin-bottom:20px;	
}
#index-contact .index-contact-box .box .ttl{
margin-bottom:15px;	
}
#index-contact .index-contact-box .box .ttl span{
font-size:1.4rem;	
}
#index-contact .index-contact-box .box .tel span{
display:none;	
}
#index-contact .index-contact-box .box .tel a{
font-size:3.2rem;
background:url(../images/contact-area-tel.png) no-repeat 0 75%;
-moz-background-size:30px auto;
background-size:30px auto;
padding-left:40px;
display:inline-block;
color:#e60012;
line-height:1;
}
#index-contact .index-contact-box .box .mail a{
font-size:2.3rem;
}

#index-contact .index-contact-box .box .postscript{
padding-top:10px;	
}

#index-contact .index-contact-map iframe{
height:50vw;	
}	
}