@charset "UTF-8";

/* first
----------------------------------------------- */
.second-text { width: 100%; }
img { width: 100%; }
.midashi01 .jp { color: var(--gold); }
.flex { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }

.intro { margin-bottom: 16vw; }
.intro .text-box { width: 80%; margin:0 auto 5vw; }
.intro .en { font-family: "baskerville-urw"; font-weight: 400; letter-spacing: 0.4vw; font-size: 9vw; line-height: 1.2; }
.intro .title { font-family: var(--mincho); font-weight: 600; font-size: 3.6vw; line-height: 2; letter-spacing: 0.1em; margin-bottom: 2vw; }
.intro .pic { width: 90%; margin: 5vw auto 5vw; padding: 0; }
.intro .pic img:nth-child(1) { width: 61%; display: inline-block;}
.intro .pic img:nth-child(2) { width: 28%; display: inline-block; position: relative; top: -16vw; margin-left: 5vw; }

.message { margin-bottom: 16vw; padding-bottom: 10vw; background: url(../images/top-media-bg.jpg) no-repeat center bottom -3vw; background-size: 100%; }
.message .flex,.message .text-box { width: 90vw; margin: 0 auto; }
.message .message-text { position: relative; }
.message .message-text::after { content: 'Staff'; color: #e6dec4; font-size: 12vw; font-family: "baskerville-urw"; font-weight: 400; letter-spacing: 0.4vw; position: absolute; bottom: -66vw; right: 0; transform: rotate(-90deg); }
.message .sub-title { margin-bottom: 2vw; color: #b62c34; font-size: 6vw; font-family: var(--mincho); font-weight: 600; }
.message .lead { margin-bottom: 6vw; padding-bottom: 4vw; font-size: 4vw; font-family: var(--mincho); font-weight: 600; border-bottom: 1px solid var(--gold); }
.message img { width: 60%; margin: 6vw auto 8vw; }
.message b { color: #b62c34; }

.point { width: 90%; margin: 0 auto 16vw; }
.point dl { width: 100%; margin-bottom: 6vw; padding: 8vw 10vw 10vw; background: #f6f4ef; }
.point dt p { margin-bottom: 0; color: var(--gold); font-size: 5vw; font-family: "baskerville-urw"; font-weight: 400; letter-spacing: 0.4vw; text-align: center; }
.point dt img { width: 30%; margin: 0 auto 4vw; }
.point .lead { margin-bottom: 4vw; font-size: 4.6vw; font-family: var(--mincho); font-weight: 600; text-align: center; line-height: 1.8; }
.point dd { text-align: justify; line-height: 2; letter-spacing: 0.4vw; }
.point dd .more01 span { padding-right: 6vw; background-position: top 3vw right; }

.staff-message { width: 90%; margin: 0 auto 8vw; }
.staff-message dl { width: 90%; margin: -16vw auto 8vw; padding: 8vw 0 0; background: #fff; position: relative; }
.staff-message dt { margin-bottom: 2vw; color: #b62c34; font-size: 5vw; font-family: var(--mincho); font-weight: 600; line-height: 1.6; text-align: center; position: relative; }
.staff-message dt span { margin: 0 auto 2vw; padding: 4% 0; font-size: 7vw; font-family: "baskerville-urw"; font-weight: 400; line-height: 1; text-align: center; border-radius: 50%; display: block; position: absolute; top: -90%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); }
.staff-message dt span::after { content: ''; width: 15vw; height: 15vw; border-radius: 50%; background: #fff; position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: -1; }
.staff-message dd { width: 90%; margin: 0 auto 4vw; }
.staff-message dd img { width: 12%; margin: 0 auto 4vw; }
.staff-message dd p { line-height: 1.8; text-align: justify; }

.recruit-gallery { width: 100%; margin-bottom: 16vw; }
.recruit-gallery li { width: 52vw; }

.detail { width: 90%; margin: 0 auto 10vw; }
.detail .tbl { margin-bottom: 8vw; }
.detail .btn { width: 80%; margin: 0 auto; padding: 6% 0; background: var(--gold); border-radius: 50px; }
.detail .btn span { display: block; color: #fff; font-size: 4vw; font-weight: bold; text-align: center; position: relative; }
.detail .btn span::after { content: '\f105'; font-size: 6vw; font-family: 'icon'; position: absolute; top: -22%; right: 10%; }

/* =============================================
pc
================================================*/
@media screen and (min-width: 736px) {
.intro { width: 900px; margin: 0 auto; position: relative; }
.intro .en { font-size: 50px; margin-bottom: 60px; letter-spacing: 4px; line-height: 1.4; }
.intro .text-box { width: 550px; margin: 0; }
.intro .text-box .txt { letter-spacing: 2px; }
.intro .title { width: fit-content; margin-bottom: 10px; padding: 30px 20px 30px 0; font-size: 18px; letter-spacing: 2px; background: #fff; }
.intro .pic01 { position: absolute; top: 0; width: 690px; right: -190px; z-index: -1; }
.intro .pic img:nth-child(1) { width: 465px; }
.intro .pic img:nth-child(2) { width: 240px; top: -30px; position: absolute; right: 50px; }
.intro .pic { width: 100%; position: relative; margin: 60px 0 100px; }
.intro >.txt { width: 100%; }

.message { margin-bottom: 100px; padding-bottom: 60px; background: url(../images/top-media-bg-pc.jpg) no-repeat right bottom; background-size: 1195px; }
.message .flex,.message .text-box { width: 900px; margin: 0 auto; }
.message .message-text { width: 560px; }
.message .message-text::after { display: none; }
.message .message-text .midashi01 { margin-bottom: 30px; text-align: left; }
.message .sub-title { margin-bottom: 10px; font-size: 30px; }
.message .lead { margin-bottom: 30px; padding-bottom: 20px; font-size: 20px; }
.message img { width: 280px; margin: 0 0 20px; }
.message b { color: #b62c34; }
.message .text-box { margin-bottom: 30px; }
.message .feature { width: 84%; padding: 20px 30px 30px; }
.message .feature span { margin-bottom: 10px; font-size: 20px; }

.point { width: 90%; margin: 0 auto 100px; }
.point dl {width: 48%;min-height: 540px;margin-bottom: 30px;padding: 40px 30px 50px;}
.point dl:last-child { margin-bottom: 30px; }
.point dt p { margin-bottom: 8px; font-size: 20px; }
.point dt img { width: 80px; margin: 0 auto 20px; }
.point .lead {margin-bottom: 20px;font-size: 16px;}
.point dd { font-size: 14px; letter-spacing: 2px; text-align: justify; }
.point dd > span { font-family: "baskerville-urw"; font-weight: 400; letter-spacing: 0.4vw;  }
.point dd .more01 span { padding-right: 30px; background-position: top 16px right; }

.staff-message { width: 100%; margin: 0 auto 60px; }
.staff-message ul { align-items: flex-start; -webkit-align-items: flex-start; }
.staff-message li { width: 50%; }
.staff-message dl { margin: -60px auto 40px; padding: 40px 0 0; }
.staff-message dt { margin-bottom: 16px; font-size: 24px; }
.staff-message dt span { margin: 0 auto 10px; padding: 16px 0; font-size: 30px; }
.staff-message dt span::after { content: ''; width: 70px; height: 70px; }
.staff-message dd { width: 468px; margin: 0 auto 20px; }
.staff-message dd img { width: 8%; margin: 0 auto 30px; }
.staff-message dd p { font-size: 15px; line-height: 1.8; }

.recruit-gallery { margin-bottom: 100px; }
.recruit-gallery li { width: 320px; }

.detail { width: 900px; margin: 0 auto 80px; }
.detail .tbl { margin-bottom: 40px; }
.detail .btn { width: 360px; padding: 20px 0;}
.detail .btn span { font-size: 18px; }
.detail .btn span::after { font-size: 20px; top: -1px; }
}

@media screen and (min-width: 900px) {
.message .feature { width: 100%; }
.point dl { min-height: 516px; padding: 40px 40px 50px;}
.point .lead { font-size: 18px; } 
}

@media screen and (min-width: 1000px) {
.point { width: 900px; }
.point dl { min-height: 480px; padding: 40px;}
.point .lead { font-size: 18px; }
}

@media screen and (min-width: 1200px) {
.staff-message { width: 1200px; }
}

/* retina用 ----------------------------------------------- */
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 
    .message { background: url(../images/top-media-bg-pc@2x.jpg) no-repeat right bottom; background-size: 1195px; }
    }