@charset "UTF-8";
/* CSS Document */
@keyframes loop-slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/*PC*/
@media print, screen and (min-width: 768px) {
#hed .hed_bg {
background: url("../images/about/hed_bg.jpg") center no-repeat;
background-size: auto;
background-size: cover;
width: 100%;
height: 400px;
position: relative;
}
#about .cont01 {
margin-top: 130px;
background: #121212;
min-width: 1400px;
position: relative;
}
#about .cont01 .top_text_box {
background: #fff;
width: 70%;
z-index: 3;
position: relative;
margin: -70px 0 0 auto;
box-sizing: border-box;
padding: 50px 50px 70px 150px;
}
#about .cont01 .top_text_box h2 {
font-size: 3rem;
line-height: 1;
position: relative;
padding-top: 30px;
z-index: 2;
}
#about .cont01 .top_text_box h2::before {
content: "";
display: block;
background: #121212;
width: 80px;
height: 1px;
position: absolute;
top: 0;
left: 0;
}
#about .cont01 .top_text_box p {
font-size: 1.2rem;
margin-top: 40px;
position: relative;
z-index: 2;
}
#about .cont01 .top_text_box .en_text {
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
white-space: pre;
-webkit-text-orientation: upright;
position: absolute;
left: 5%;
top: 7%;
letter-spacing: 1.4px;
font-weight: 700;
font-size: 1rem;
z-index: 2;
}
#about .cont01 .loop-wrap_text {
display: flex;
align-items: center;
margin-top: 100px;
line-height: 1;
position: absolute;
bottom: 30%;
}
#about .cont01 .loop-wrap_text .loop-area {
display: flex;
animation: loop-slide 50s infinite linear 1s both;
list-style: none;
margin: 0;
padding: 0;
}
#about .cont01 .loop-wrap_text .loop-area .content {
width: 1892px;
font-size: 10rem;
font-weight: 600;
color: #fff;
opacity: 0.2;
letter-spacing: 0px;
}
#about .cont01 .asirai_img {
position: absolute;
left: 4%;
top: 0;
width: 300px;
opacity: 0.3;
}

#about .cont02 {
background: #121212;
padding-bottom: 190px;
position: relative;
}
#about .cont02 .cont_inner {
width: 80%;
margin: auto;
padding-top: 150px;
}
#about .cont02 h2 {
color: #fff;
font-size: 1.8rem;
}
#about .cont02 h3 {
color: #fff;
font-size: 2.4rem;
margin-top: 30px;
}
#about .cont02 p {
color: #fff;
font-size: 1.1rem;
margin-top: 30px;
}
#about .cont02 .text_box {
padding-left: 5%;
position: relative;
}
#about .cont02 .en_text {
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
white-space: pre;
-webkit-text-orientation: upright;
position: absolute;
left: -10px;
top: 7%;
letter-spacing: 1.4px;
font-weight: 700;
font-size: 1rem;
color: #fff;
}
#about .cont02 .img_box {
width: 80%;
margin: 50px auto 0;
}
#about .cont03 {
margin: 150px 0;
position: relative;
}
#about .cont03 .loop-wrap_text {
display: flex;
align-items: center;
margin-top: 100px;
line-height: 1;
position: absolute;
top: -330px;
font-size: 3rem;
color: #ddd;
}
#about .cont03 .loop-wrap_text .loop-area {
display: flex;
animation: loop-slide 50s infinite linear 1s both;
list-style: none;
margin: 0;
padding: 0;
}
#about .cont03 .loop-wrap_text .loop-area .content {
width: 1892px;
font-size: 10rem;
font-weight: 600;
opacity: 0.4;
letter-spacing: 0px;
margin-left: 50px;
}
#about .cont03 .cont_inner h2 {
font-size: 1.8rem;
margin-bottom: 20px;
margin-left: 10%;
}
#about .cont03 .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
}
#about .cont03 .flex_wrap .img_box {
width: 50%;
}
#about .cont03 .flex_wrap .text_box {
width: 42%;
margin-right: 5%;
margin-top: 30px;
}
#about .cont03 .flex_wrap .text_box h3 {
font-size: 2.4rem;
}
#about .cont03 .flex_wrap .deatail_box {
margin-top: 20px;
background: #ddd;
padding: 20px;
box-sizing: border-box;
font-size: 1rem;
}
#about .cont03 .en_text {
letter-spacing: 1.4px;
font-weight: 700;
font-size: 1rem;
}
#about .cont04 {
margin-bottom: 150px;
}
#about .cont04 .cont_inner h2 {
font-size: 1.8rem;
margin-bottom: 20px;
text-align: center;
}
#about .cont04 .cont_inner .bg_box {
background: url("../images/about/img04.jpg");
background-size: auto;
background-size: cover;
padding: 80px 50px;
box-sizing: border-box;
width: 80%;
margin: 0 auto;
color: #fff;
border-radius: 50px;
margin-top: 40px;
position: relative;
overflow: hidden;
}
#about .cont04 .cont_inner .bg_box::after {
content: "";
background: rgba(0, 0, 0, .7);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
#about .cont04 .cont_inner .bg_box ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
z-index: 2;
}
#about .cont04 .cont_inner .bg_box ul li {
font-size: 1rem;
width: 25%;
text-align: center;
margin-top: 15px;
}
}
/*sp*/
@media only screen and (max-width: 767px) {
#hed .hed_bg {
background: url("../images/about/hed_bg.jpg") center no-repeat;
background-size: auto;
background-size: cover;
width: 100%;
height: 350px;
position: relative;
}
#about {
overflow: hidden;
}
#about .cont01 {
margin-top: 100px;
background: #121212;
position: relative;
}
#about .cont01 .top_text_box {
background: #fff;
width: 97%;
z-index: 3;
position: relative;
margin: -20px 0 0 auto;
box-sizing: border-box;
padding: 40px 20px 30px 20px;
}
#about .cont01 .top_text_box h2 {
font-size: 1.5rem;
line-height: 1;
position: relative;
padding-top: 20px;
z-index: 2;
margin-top: 10px;
}
#about .cont01 .top_text_box h2::before {
content: "";
display: block;
background: #121212;
width: 80px;
height: 1px;
position: absolute;
top: 0;
left: 0;
}
#about .cont01 .top_text_box p {
font-size: .9rem;
margin-top: 30px;
position: relative;
z-index: 2;
}
#about .cont01 .top_text_box .en_text {
letter-spacing: 1.4px;
font-weight: 700;
font-size: .8rem;
z-index: 2;
}
#about .cont01 .loop-wrap_text {
display: flex;
align-items: center;
margin-top: 100px;
line-height: 1;
position: absolute;
bottom: 30%;
}
#about .cont01 .loop-wrap_text .loop-area {
display: flex;
animation: loop-slide 50s infinite linear 1s both;
list-style: none;
margin: 0;
padding: 0;
}
#about .cont01 .loop-wrap_text .loop-area .content {
width: 1892px;
font-size: 10rem;
font-weight: 600;
color: #fff;
opacity: 0.2;
letter-spacing: 0px;
}
#about .cont01 .asirai_img {
position: absolute;
left: 4%;
top: 0;
width: 70%;
opacity: 0.3;
}
#about .cont02 {
background: #121212;
padding-bottom: 40px;
position: relative;
}
#about .cont02 .cont_inner {
padding: 80px 20px 30px 20px;
box-sizing: border-box;
}
#about .cont02 h2 {
color: #fff;
font-size: 1.5rem;
}
#about .cont02 h3 {
color: #fff;
font-size: 1.2rem;
margin-top: 30px;
}
#about .cont02 p {
color: #fff;
font-size: .9rem;
margin-top: 10px;
}
#about .cont02 .text_box {
position: relative;
}
#about .cont02 .en_text {
letter-spacing: 1.4px;
font-weight: 700;
font-size: 1rem;
color: #fff;
}
#about .cont02 .img_box {
width: 100%;
margin: 30px auto 0;
}
#about .cont03 {
margin: 90px 0 50px;
position: relative;
}
#about .cont03 .loop-wrap_text {
display: flex;
align-items: center;
line-height: 1;
position: absolute;
top: -188px;
font-size: 3rem;
color: #ddd;
}
#about .cont03 .loop-wrap_text .loop-area {
display: flex;
animation: loop-slide 50s infinite linear 1s both;
list-style: none;
margin: 0;
padding: 0;
}
#about .cont03 .loop-wrap_text .loop-area .content {
width: 1892px;
font-size: 8rem;
font-weight: 600;
opacity: 0.4;
letter-spacing: 0px;
margin-left: 50px;
}
#about .cont03 .cont_inner h2 {
padding: 0 0 20px 20px;
font-size: 1.5rem;
}
#about .cont03 .flex_wrap {
position: relative;
}
#about .cont03 .flex_wrap .text_box {
box-sizing: border-box;
padding: 50px 20px 30px 20px;
}
#about .cont03 .flex_wrap .text_box h3 {
font-size: 1.2rem;
}
#about .cont03 .flex_wrap .deatail_box {
margin-top: 20px;
background: #ddd;
padding: 20px;
box-sizing: border-box;
font-size: .9rem;
}
#about .cont03 .en_text {
letter-spacing: 1.4px;
font-weight: 700;
font-size: 1rem;
}
#about .cont04 {
margin-bottom: 150px;
}
#about .cont04 .cont_inner h2 {
font-size: 1.5rem;
text-align: center;
}
#about .cont04 .cont_inner .bg_box {
background: url("../images/about/img04.jpg");
background-size: cover;
padding: 30px 20px 50px;
box-sizing: border-box;
width: 90%;
margin: 20px auto 0;
color: #fff;
border-radius: 50px;
position: relative;
overflow: hidden;
}
#about .cont04 .cont_inner .bg_box::after {
content: "";
background: rgba(0, 0, 0, .7);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
#about .cont04 .cont_inner .bg_box ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
z-index: 2;
}
#about .cont04 .cont_inner .bg_box ul li {
font-size: 1rem;
text-align: center;
margin-top: 15px;
width: 50%;
}
}