@charset "UTF-8";
/* CSS Document */

/* 中身-モバイルファースト======================================================================================================== */

#personality{
margin-bottom: 30vw;
}
#personality .copy{
position: relative;
margin-bottom: 12vw;
}
#personality .copy::before{
content: "";
display: block;
width: auto;
height: 150%;
aspect-ratio: 1/1;
background: #cae6ad;
background: radial-gradient(circle,#cae6ad 0%, rgba(255,255,255,0) 70%);
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
z-index: -1;
}

#personality li{
margin-bottom: 10vw;
}
#personality li:last-child{
margin-bottom: 0;
}
#personality li .photo{
text-align: center;
}
#personality li .text em{
display: block;
text-align: center;
font-size: 20vw;
line-height: 1;
color: #ddd;
margin-top: -8vw;
}
#personality li .text h4{
text-align: center;
font-size: 6vw;
text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff;
position: relative;
}
#personality li .text h4::before{
content: "";
display: block;
width: auto;
height: 300%;
aspect-ratio: 1/1;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
z-index: -1;
}
#personality li:nth-child(1) .text h4::before{
background: #ffb978;
background: radial-gradient(circle,#ffb978 0%, rgba(255,255,255,0) 70%);
}
#personality li:nth-child(2) .text h4::before{
background: #f7f724e6;
background: radial-gradient(circle,#f7f724e6 0%, rgba(255,255,255,0) 70%);
}
#personality li:nth-child(3) .text h4::before{
background: #cae6ad;
background: radial-gradient(circle,#cae6ad 0%, rgba(255,255,255,0) 70%);
}


#message{
background-color: #cb261e;
background-image: url(../images/bg_red.png);
background-image: -webkit-image-set(url(../images/bg_red.png) 1x, url(../images/bg_red@2x.png) 2x);
background-repeat: no-repeat;
background-position: -30vw -5vw;
background-size: 130% auto;
color: #fff;
padding-top: 20vw;
padding-bottom: 20vw;
position: relative;
}
#message .text{
position: relative;
z-index: 10;
margin-bottom: 20px;
}
#message .common_title{
text-align: right;
height: 45vw;
}
#message .text h3{
font-size: 5vw;
text-shadow:0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e;
}
#message .text p{
margin-top: 1em;
text-shadow:0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e;
}

#message .common_title .en{
color: #fff;
}
#message .photo .p01{
width: 50vw;
position: absolute;
top: -10vw;
left: 0;
z-index: 5;
}
#message .photo .p02{
width: 70%;
margin-left: auto;
}


#career{
background-image: url(images/career_bg.jpg);
background-image: -webkit-image-set(url(images/career_bg.jpg) 1x, url(images/career_bg@2x.jpg) 2x);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #fff;
padding-top: 12vw;
padding-bottom: 12vw;
}
#career .sub_title_mk{
text-align: left;
}
#career .text{
padding: 0 5vw;
text-align: left;
}
#career .text p{
margin-top: 1em;
}
#career .text p:first-child{
margin-top: 0;
}





/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){
#personality{
text-align: center;
margin-bottom: 20vw;
}
#personality .copy h3{
font-size: max(2.2vw,30px);
margin-bottom: 0.5vw;
}
#personality .copy p{
font-size: max(1.4vw,20px);
}

#personality ol{
display: flex;
justify-content: space-between;
}
#personality li{
width: 30%;
margin-bottom: 0;
text-align: left;
}
#personality li .text em{
font-size: 8vw;
margin-top: -4vw;
}
#personality li .text h4{
font-size: 2vw;
}
#personality li:nth-child(1) .text .marker_y::after{
display: none;
}

#message{
background-position: -10% -100px;
background-size: auto;
padding-top: 12vw;
padding-bottom: 12vw;
}
#message .contents_size{
position: relative;
}
#message .text{
width: 55%;
margin-left: auto;
margin-bottom: 0px;
}
#message .common_title{
text-align: left;
height: auto;
}
#message .text h3{
font-size: 2vw;
}
#message .text p{
font-size: 20px;
}

#message .photo img{
width: 100%;
}
#message .photo .p01{
width: 40%;
top: -17vw;
left: 0;
z-index: 5;
}
#message .photo .p02{
width: 35%;
position: absolute;
top: 25vw;
left: -8vw;
z-index: 8;
}


#career{
padding-top: 8vw;
padding-bottom: 8vw;
}
#career .sub_title_mk{
margin-bottom: 3vw;
}
#career .sub_title_mk span{
font-size: 4vw;
}

#career .text{
padding: 0;
text-align: center;
}
#career .text p{
font-size: 1.5vw;
}





}