#wrapper-contracts{
font-family:"Helvetica Neue","Noto Sans JP",sans-serif;color:#231815
}
#wrapper-contracts a:hover{
text-decoration:none
}
.aboutus .content{
padding:0
}
.aboutus .tit span{
color:#171717;
display:block;
font-size:2.125rem;
letter-spacing:.05em
}
.aboutus .post_content .inner,.aboutus .access .inner{
max-width:780px
}
#about_member .contents-con{
align-items:flex-start;
justify-content:space-between
}
#about_member .member-list{
width:60%
}
#about_member .contents-txt{
width:40%
}
#about_member .member-list ul{
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content:flex-start
}
#about_member .member-list ul li{
width:45.5%;
margin:1.4% 0 1.4% 3%
}
#about_member .member-list ul li.member-item01{
order:1
}
#about_member .member-list ul li.member-item02{
order:2
}
#about_member .member-list ul li.member-item03{
order:3
}
#about_member .member-list ul li.member-item04{
order:4
}
#about_member .member-list ul li.member-item05{
order:5
}
#about_member .member-list ul li h4{
margin:10px 0
}
#about_member .member-txt{
font-size:1.286rem;
color:rgba(35,24,21,.5);
text-align:left
}
#about_member .member-txt span{
font-size:1.875rem;
display:block;
margin:10px 0;
color:#231815
}
#about_member .member-list .member-img:hover img{
opacity:.6
}
.btnarrow::after{
content:url("../img/corporate/btnarrow.svg");
position:relative;
bottom:38px;
left:60%;
transition:all .3s
}
.btnarrow:hover::after{
left:50%
}
.local-nav{
margin:12rem 15rem 0
}
.local-nav .nav-item{
display:inline;
margin:0 4rem 0 0;
background:#000;color:#fff;
font-feature-settings:"palt"
}
.local-nav .nav-item.current{
padding:3px
}
.local-nav .nav-item a{
background:#fff;color:#000;
margin:-3px
}
@media screen and (min-width: 1440px){
.btnarrow::after{
content:url("../img/corporate/btnarrow_1440.svg");
position:relative;
bottom:38px;
left:52%;transition:all .3s
}
.btnarrow:hover::after{
left:57%
}
section#about_member .member-txt span
{
font-size:2rem}}
@media screen and (max-width: 1280px){
section#about_member .member-txt span{
font-size:1.625rem
}}
@media screen and (max-width: 1024px){
.btnarrow::after{
content:url("../img/corporate/btnarrow_tb.svg");
position:relative;
bottom:38px;
left:66%;
transition:all .3s
}
.btnarrow:hover::after{
left:70%
}
section#about_member .member-txt{
font-size:1rem;color:rgba(35,24,21,.5)
}
section#about_member .member-txt span{
font-size:1.375rem
}}
@media screen and (max-width: 767px){
.btnarrow::after{
display:none
}
section#about_member .member-txt{
font-size:1.6rem;
color:rgba(35,24,21,.5)
}
section#about_member .member-txt span{
font-size:2.4rem
}}
@media screen and (max-width: 360px){
.btnarrow::after{
display:none
}}
.aboutus .recruit{
padding:10% 0;
color:#fff;
background:url("../img/aboutus/bg-about.jpg") no-repeat(center/cover)
}
.aboutus .recruit.bg::after{
background:rgba(69,64,63,.7)
}
.aboutus .recruit .tit{
font-size:5.6rem;
text-align:center;
line-height:1.2;color:#fff;
font-weight:500
}
.aboutus .recruit .btn{
margin:0 auto
}
.aboutus .recruit24{
margin:4rem
}
.aboutus .recruit24 .tit-en{
text-align:center
}
.aboutus .recruit24 .tit{
text-align:center;
font-size:2rem;color:#000;
font-weight:200
}
.aboutus .recruit24 p{
max-width:900px;
margin:1rem auto
}
.aboutus .recruit24 .btn{
margin:6rem auto;
max-width:24rem
}
.aboutus .recruit24 .people{
display:flex;
justify-content:space-between;
margin-bottom:8rem
}
.aboutus .recruit24 .people img{
max-width:100px
}
section .tit-en{
font-weight:200;
color:#231815;
margin:0 0 20px;
text-align:left;
font-size:3rem;
line-height:1.4
}
section .tit{
font-weight:700;
color:#231815;
margin:10px 0 60px;
text-align:left;
font-size:4rem;
line-height:1.4
}
section .inner-con{
height:auto;
width:100%;
max-width:1400px;
margin:0 auto
}
section .contents-con{
display:flex;
align-items:center
}
section .contents-txt{
width:40%
}
section .content-img{
width:50%
}
section .content-img img{
width:100%;
max-width:790px;
image-rendering:-webkit-optimize-contrast
}
section .btn{
max-width:290px;
padding:0;
margin:0
}
section .btn a{
display:block;
letter-spacing:.08em;
background:#231815;
color:#fff;
font-weight:700;
font-size:1.4rem;
border:none;
border-radius:0;
width:100%;
height:100%;
margin:0 auto;
padding:20px;
position:relative;
overflow:hidden;
z-index:1;
box-shadow:none
}
section .btn:hover{
background:rgba(255,255,255,.2)
}
.wrapper-temp .btn a:hover{
opacity:.5
}
.btn.btn-bk a{
display:block;
letter-spacing:.08em;
background:#1c1715;color:#fff;
border:none;
border-radius:0;
width:100%;height:100%;
margin:0 auto;
padding:20px 20px 16px;
position:relative;
overflow:hidden;
z-index:1;
box-shadow:none;
font-size:1.5rem;
text-decoration:none
}
#about_company .contents-con{
align-items:flex-start
}
#about_company .company-list{
width:60%
}
#about_company .company-list a{
color:#231815;
font-weight:600;
text-decoration:none;
background-color:rgba(0,0,0,0)
}
#about_company .company-list a:hover{
color:#0097a7
}
#about_company .company-list table{
width:100%;
padding:0;
display:inline-block;
table-layout:fixed
}
#about_company .company-list table tbody{
width:100%;
padding:0
}
#about_company .company-list table tr{
width:100%;
padding:20px 0;
display:block;
vertical-align:middle;
border-bottom:1px solid rgba(112,112,112,.3)
}
#about_company .company-list table tr:first-child{
border-top:1px solid rgba(112,112,112,.3)
}
#about_company .company-list table th{
font-size:1.6rem;
letter-spacing:.5rem;
padding:1em .8em;
font-weight:bold;
line-height:1.8;
width:260px;
text-align:left
}
#about_company .company-list table td{
font-size:1.6rem;
padding:1em .8em;
line-height:1.8;
text-align:left
}
#about_mvv .contents-con{
align-items:flex-start;
display:block
}
.contractsdx{
max-width:900px;
margin:0 auto;
padding-bottom:8rem;
display:flex;
justify-content:space-between;
align-items:center
}
.contractsdx .lv_img{
width:45%
}
.contractsdx.reverse{
flex-direction:row-reverse
}
.contractsdx_lead{
justify-content:center;
margin-bottom:8rem
}
.contractsdx_head{
font-size:2rem;
margin-bottom:4rem;
text-align:center
}
.contractsdx_head span+span::before{
content:"";
margin:0 2rem .5rem;
display:inline-block;
border-bottom:1px solid #000;
width:4rem
}
.contractsdx_title{
font-size:2.2rem;
font-weight:400;
text-align:left;
letter-spacing:.1rem;margin-bottom:1.5rem
}
.contractsdx_sub{
margin-top:2rem;
font-size:1.2rem
}
.contractsdx .lv{
color:#0097a7
}
.contractsdx h3{
text-align:center
}
.mvv{
margin:6rem auto
}
.mvv:first-child{
margin-top:10rem
}
.mvv p{
max-width:900px;
margin:1rem auto
}
.mvv h2,.mvv h3{
text-align:center;
font-feature-settings:"palt"
}
.mvv .tit{
font-size:2rem;font-weight:200;
color:dimgray;
margin:-1rem 0 3rem;
font-feature-settings:"palt"
}
.mvv .list{
width:100%
}
.mvv .list h2{
margin-bottom:4rem
}
.value-list{
margin:1px 0;
padding:4rem;
background:#000;background:linear-gradient(315deg, black 0%, #222222 35%, #333333 100%)
}
.value-list:last-child{
margin-bottom:10rem
}
.value-list h4{
font-size:3rem;
font-weight:300;
color:#fff;
text-align:center;
font-feature-settings:"palt"
}
.value-list p{
color:#fff
}
#about_isms.value{
background:#f0f0f0
}
#about_isms.wrapper-temp .inner-con{
height:auto;
width:100%;
background-color:#fff;
padding:5%
}
#about_isms.wrapper-temp .isms-column{
width:100%;
display:flex
}
#about_isms.wrapper-temp .isms-txt{
width:60%
}
#about_isms.wrapper-temp .isms-item{
width:40%;
padding-top:4%
}
#about_isms.wrapper-temp .isms-item img{
max-width:480px;
width:70%;
margin:auto
}
#about_isms.wrapper-temp .tit{
font-weight:700;
color:#231815;
margin:0 0 60px;
text-align:left;
font-size:3rem;
line-height:1.4
}
#about_isms.wrapper-temp .caption{
text-align:left;
line-height:1.8;
letter-spacing:.08em;
margin:0 0 40px;
font-size:1.6rem;
width:70%
}
#about_isms.wrapper-temp .item{
text-align:left;
font-size:1.4rem
}
#about_isms.wrapper-temp .item table{
width:70%
}
#about_isms.wrapper-temp .item th{
padding:0 2rem 1rem 0
}
@media screen and (max-width: 1024px){
.value-list:last-child{
margin-bottom:2rem
}
.mvv{
margin:1.5rem 0
}
.mvv .tit{
font-weight:200
}
.aboutus .recruit24 .people{
margin-bottom:2rem
}
.aboutus .recruit24 .people img{
max-width:9%
}
section.wrapper-temp .content-img{
width:50%;
padding:0 0 0 5%
}
.pc-only{
display:none
}
section.wrapper-temp .content-img{
padding-top:20%
}
section.wrapper-temp .content-img img{
width:100%;
min-width:270px
}
section#about_member .member-txt span{
display:block;
margin:10px 0;color:#231815
}
section#about_company .company-list table{
width:100%;
padding:0;
display:inline-block;
table-layout:fixed
}
section#about_isms.wrapper-temp .isms-item{
width:40%;
padding-top:18%
}
.aboutus .recruit{
padding:8% 0
}
.aboutus .recruit .tit{
font-size:3.8rem;
margin:0 auto 2%;
text-align:center
}
.aboutus .access{
padding:50px 0 100px
}
.btn-bl a{
display:block;
letter-spacing:.08em;background:#1c1715;color:#fff;border-radius:60px;
width:100%;
height:100%;
margin:0 auto;
padding:10px 20px;
position:relative;
overflow:hidden;
z-index:1;
box-shadow:0 1px 14px -1px rgba(3,15,54,.1)
}}
@media screen and (max-width: 767px){
.pc-only{
display:none
}
.value-list h4{
font-size:2rem
}
section.wrapper-temp .tit-en{
font-weight:200;
color:#231815;
margin:5% 0 3%;
text-align:left;
font-size:2.714rem;
line-height:1.4
}
section.wrapper-temp .tit{
font-weight:700;
color:#231815;
margin:0 0 10%;
text-align:left;
font-size:3.286rem;
line-height:1.4
}
section.wrapper-temp .content-img{
width:100%;
padding:0 0 10%
}
section.wrapper-temp .contents-con{
display:block
}
section.wrapper-temp .contents-txt{
width:100%
}
section#about_member .contents-txt{
width:100%
}
section#about_member .member-list{
width:100%
}
section#about_member .member-list ul{
display:block
}
section#about_member .member-list ul li{
width:60%;
margin:0 auto;
text-align:center
}
section#about_member .member-list ul li h4{
margin:5% 0 16%
}
section#about_member .member-txt span{
margin:0 0 1rem 0
}
section#about_company .company-list{
width:100%
}
section#about_company .company-list table{
width:100%;
padding:0;
display:inline-block;
table-layout:fixed
}
section#about_company .company-list table th,section#about_company .company-list table td{
display:block;
text-align:left;
width:100%;
padding:.2rem
}
section.wrapper-temp.mvv .tit-en{
text-align:center;
font-feature-settings:"palt"
}
section.wrapper-temp.mvv .tit{
font-weight:200;
font-size:2rem;
margin-bottom:2rem;
text-align:center;
font-feature-settings:"palt"
}
.value .sec01 .box{
padding:80px 0 0
}
.contractsdx{
padding-bottom:6rem;
flex-direction:column;
justify-content:left
}
.contractsdx .lv_img{
width:100%
}
.contractsdx.reverse{
flex-direction:column;
justify-content:left;
align-items:flex-start
}
#about_isms.wrapper-temp .isms-column{
width:100%;
display:flex;
flex-direction:column
}
#about_isms.wrapper-temp .isms-txt{
width:100%
}
#about_isms.wrapper-temp .isms-item{
width:100% !important;
padding-top:4% !important;
text-align:center
}
#about_isms.wrapper-temp .isms-item img{
max-width:480px;
width:70%
}
#about_isms.wrapper-temp .tit{
font-weight:700;
margin:0 0 1rem;
font-size:3rem
}
#about_isms.wrapper-temp .caption{
text-align:left;
line-height:1.8;
letter-spacing:.08em;
margin:0 0 40px;
font-size:1.6rem;
width:100%
}
#about_isms.wrapper-temp .item{
text-align:left;
font-size:1.4rem
}
#about_isms.wrapper-temp .item table{
width:100%
}
#about_isms.wrapper-temp .item th{
padding:0 2rem 1rem 0
}}
@media screen and (max-width: 479px){
.value .sec01 .inner{
margin:0 auto 6%
}
.value .sec01 .box{
padding:20px 0 0
}
.value .sec01 .icon-value{
width:140px;
margin:0 auto 4%
}
.value .sec01 .tit{
margin-bottom:14%;font-size:3rem
}
section#about_member .member-list ul li h4{
margin:5% 0 20%
}}
@media screen and (max-width: 360px){
#about-mission h1{
font-size:2.875rem
}
#about-mission h4.tit{
font-size:2.625rem
}}
.contracts .modal{
display:none;
height:100vh;
position:fixed;
top:0;width:100%;
z-index:1000
}
.contracts .modal__bg{
background:rgba(0,0,0,.8);
height:100vh;
position:absolute;
width:100%
}
.contracts .modal__content{
background:#fff;
left:50%;
padding:0;
position:absolute;
top:50%;
transform:translate(-50%, -50%);
width:830px;
height:auto
}
.contracts .modal__content .member_detail{
display:flex
}
.contracts .modal__content .member_detail .member_read{
width:60%;
padding:3%
}
.contracts .modal__content .member_detail .member_read h4{
font-size:1.571rem;
padding:0 0 5%;
color:rgba(35,24,21,.5)
}
.contracts .modal__content .member_detail .member_read h4 span{
font-size:2.429rem;
color:#231815;
padding:2% 0 0;
display:inline-block
}
.contracts .modal__content .member_detail .member_read p{
color:#231815
}
.contracts .modal__content .modal_img{
width:40%;
text-align:right
}
.contracts .modal__content .modal_img img{
width:auto;
max-width:340px;
height:100%
}
.contracts .modal__content .modal-close-icon{
display:block;
width:60px;
height:60px;
text-align:center;
z-index:3;
position:fixed;
right:0;top:0;
background:#111
}
.contracts .modal__content .modal-close-icon::after{
content:"";
display:inline-block;
width:30px;
height:30px;
background-image:url("../img/corporate/icon-close.svg");
background-size:contain;
top:15px;
right:15px;
position:absolute
}
section.wrapper-temp.value{
padding:120px 10%
}
@media screen and (max-width: 1024px){
.contracts .modal__content{
width:680px
}
.local-nav{
margin:10rem 2rem 4rem
}}
@media screen and (max-width: 767px){
.contracts .modal__content{
height:auto;
margin:6% 0 0;
width:90%
}
.contracts .modal__content .member_detail{
display:block
}
.contracts .modal__content .modal_img img{
height:33vh
}
.contracts .modal__content .member_detail .member_read{
width:100%;padding:70px 6% 6%
}
.contracts .modal__content .modal_img{
width:100%;
max-width:300px;
text-align:center;
margin:0 auto 6%
}
.contracts .modal__content .modal-close-icon{
display:block;
width:60px;
height:60px;
text-align:center;
z-index:3;
position:fixed;
right:0;top:0;
background:#111
}
.local-nav .nav-item.item-pc,.local-nav .nav-item span.item-pc{
display:none
}
section.wrapper-temp.value{
padding:2rem 3rem
}}
@media screen and (max-width: 479px){
.contracts .modal__content{
width:80%
}
.contracts .modal__content .modal-close-icon{
width:40px;
height:40px
}
.contracts .modal__content .modal-close-icon::after{
width:20px;
height:20px;
top:10px;
right:10px
}
.contracts .modal__content .member_detail .member_read{
width:100%;
padding:20px 6% 6%
}
.contracts .modal__content .member_detail .member_read h4 span{
padding:0
}
.contracts .modal__content .member_detail .member_read p{
line-height:1.4em
}}
@media screen and (max-width: 360px){
.contracts .modal__content{
width:90%
}
.contracts .modal__content .modal_img img{
display:none
}}
@media screen and (min-width: 1601px){
section.wrapper-temp .contents-txt img{
width:30%;
max-width:160px
}}
@media screen and (min-width: 1441px)and (max-width: 1600px){
section.wrapper-temp .contents-txt img{
width:26%;
max-width:140px
}}
@media screen and (min-width: 1025px)and (max-width: 1440px){
section.wrapper-temp{
padding:3%
}}
@media screen and (max-width: 1024px){
section.wrapper-temp{
padding:8% 6%
}
section.wrapper-temp .contents-txt img{
max-width:130px;
max-width:26%
}}
@media screen and (max-width: 767px){
section.wrapper-temp .contents-txt img{
max-width:130px;
width:26%
}}
.scrolldown{
position:absolute;
left:50%;
bottom:1px;
height:120px
}
.scrolldown span{
position:absolute;
left:-26px;
top:-25px;
color:#231815;
font-size:2rem;
letter-spacing:.05em
}
.scrolldown::after{
content:"";
position:absolute;
top:0;width:1px;
height:60px;
background:#231815;
animation:pathmove 1.4s ease-in-out infinite;opacity:0
}
@keyframes pathmove{
0%{
height:0;
top:0;opacity:0
}
30%{
height:30px;
opacity:1
}
100%{
height:0;
top:50px;
opacity:0
}}
#contracts-main{
position:fixed;
top:0;
left:0;
width:100%;
height:90vh;
z-index:-1
}
footer.main-footer{
z-index:0;
position:relative
}
#page-top{
position:fixed;
right:1.6rem;
bottom:.8rem;
z-index:10;
transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s
}
#page-top a{
position:relative;
display:block;
bottom:-15rem;
text-decoration:none;
transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s
}
#page-top.is-fixed a{
bottom:0
}
#page-top.is-hide a{
bottom:7rem
}
#page-top a .scroll{
position:absolute;
right:0;
bottom:1rem;
z-index:9;
height:6.5rem;
width:2rem
}
#page-top a .scroll .arw{
position:absolute;
top:0;
left:50%;
margin-left:-0.7rem
}
#page-top a .scroll .arw:before{
content:"";
position:absolute;
display:inline-block;
left:-0.4rem;
bottom:14px;
width:100%;
height:120%;
background-image:url("../img/corporate/pagetop.svg");
background-size:auto;
vertical-align:middle;
background-repeat:no-repeat
}
#page-top a .scroll .txt{
position:relative;
left:.3rem;
bottom:0;
font-size:1rem;
writing-mode:vertical-rl;
font-weight:500;color:#231815
}
@media screen and (max-width: 1024px){
#page-top{
display:none
}}