@charset "utf-8";


/*==============================================
bg
================================================*/
.bg {
position: relative;
width: 100%;
height: 50vh;
background-position: center center;
background-size: cover;
display: flex;
z-index: 1;
margin-bottom: 50px;
}

.bg::after {
width: 100%;
height: 50vh;
background-color: rgba(0,0,0,.25);
background-image: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%);
background-size: 3px 3px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
z-index: 2;
}

.bg-company { background-image: url("../images/bg-3.jpg");}
.bg-history { background-image: url("../images/bg-2.jpg"); background-position: bottom;}
.bg-ceo { background-image: url("../images/bg-1.jpg"); background-position: bottom;}
.bg-philosophy { background-image: url("../images/bg-4.jpg");}

/*==============================================
h2
================================================*/
h2 {
width: 100%;
position: relative;
top: 0;
color: #FFF;
font-size: 48px;
letter-spacing: 10px;
text-align: center;
margin-top: 250px;
z-index: 3;
}

/*==============================================
company
================================================*/
.company {
width: 70%;
margin: 0 auto 100px;
}

.company dt {
font-size: 24px;
margin-bottom: 10px;
}

.company dd {
border-bottom: solid 1px #767676;
font-size: 16px;
text-indent: 10px;
margin-bottom: 30px;
}

.if-map {
width: 100%;
height: 100vh;
}

/*==============================================
ceo
================================================*/
.ceo {
width: 50%;
background-image: url("../images/shibata.png");
background-position: bottom right;
background-repeat: no-repeat;
padding-bottom: 150px;
margin: 0 auto 50px;
}

.ceo h3 {
font-size: 24px;
text-align: center;
margin: 30px 0 20px;
}

.ceo p {
line-height: 30px;
}


/*==============================================
roll
================================================*/
.wrap {
width: 100%;
height: 100vh;
text-align: center;
overflow: hidden;
position: relative;
margin: 0 auto;
}

.roll {
position: relative;
top: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-animation: roll_text 60s linear infinite;
animation: roll_text 60s linear infinite;
text-align: center;
color: #616161;
}

.roll .text1 {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}

.roll .text2 {
font-size: 24px;
margin-bottom: 50px;
}

.roll .text3 {
font-size: 14px;
margin: -50px 0 50px;
}

.roll span {
font-size: 16px;
}

@-webkit-keyframes roll_text {
0%   { top: 100%; }
100% { top: -200%; }
}

@keyframes roll_text {
0%   { top: 100%; }
100% { top: -200%; }
}

/*==============================================
philosophy
================================================*/
.rinen p {
font-family: 'Playfair Display SC', serif;
font-size: 36px;
text-align: center;
margin: 10% 0;
}

.about {
width: 50%;
position: relative;
border: 1px solid #555555;
margin: 5% auto 10%;
}

.about ul {
padding: 5%;
}

.title {
position: absolute;
left: 20px;
top: -15px;
font-size: 24px;
background-color: #FDFDFD;
padding: 0 2%;
}

.about ul li {
font-size: 18px;
list-style: outside;
margin-bottom: 2%;
}

/*==============================================
SDGs
================================================*/
.sdgs {
width: 50%;
margin: 0 auto 10%;
}

.sdgs img {
width: 100%;
}

.sdgs p {
border-bottom: 1px solid #0A90FF;
font-size: 18px;
text-align: center;
margin: 5% 0;
}