/* --------------------------------------------------------

all

-------------------------------------------------------- */

* {
margin: 0;
padding: 0;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
font-weight: 600;
font-feature-settings: "palt" 1;
letter-spacing: 0.1em;
line-height: 1.75em;
}
/* 
body.ua-android {
font-family: 'Noto Sans JP', sans-serif;
} */

body.ua-android .android-bold {
font-weight: bold;
}

html {
scroll-behavior: smooth;
}

body {
color: #333333;

}

.all-wrap {
overflow: hidden;
margin: 0 auto;
}


/* --------------------------------------------------------

common-style

-------------------------------------------------------- */

.common-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 3vw;
}

.sp-content {
display: none;
}

.tb-content {
display: none;
}


/* --------------------------------------------------------

z-index

-------------------------------------------------------- */

/* fixed */
.site-title {
z-index: 100;
}

#g-nav {
z-index: 200;
}

.openbtn{
z-index: 300;
}

.modal{
z-index: 1000;
}

#topback {
z-index: 100;
}

/* top & slider */
.top-wrap {
z-index: 20;
}

.work-slider {
z-index: 10;
}

.work-slider::before,
.work-slider::after {
z-index: 1;
}

.slick-arrow {
z-index: 10;
}

/* data */
.data-wrap {
z-index: 0;
}

.data-wrap::before {
z-index: -20;
}

.data-header::after {
z-index: -10;
}

.data-item::after {
z-index: -10;
}

/* talk */
.talk-style-top {
z-index: -20;
}

.talk-header {
z-index: -20;
}

.talk-header-heading::before {
z-index: -10;
}

/* recruit */
.recruit-btn:before {
z-index: 10;
}

.recruit-btn span {
z-index: 19;
}

/* inner-recruit */
.inner-recruit-entrybtn:before {
z-index: 10;
}

.inner-recruit-entrybtn span {
z-index: 19;
}


/* --------------------------------------------------------

navigation

-------------------------------------------------------- */

#g-nav {
position: fixed;
top: 0;
right: -120%;
width: 30%;
min-width: 300px;
height: 100vh;
background: #FFF;
border-radius: 20px 0 0 20px;
transition: all 0.6s;
}

#g-nav.panelactive {
right: 0;
}

#g-nav.panelactive #g-nav-list {
position: fixed;
width: 30%;
min-width: 300px;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

#g-nav ul {
position: absolute;
top: 180px;
left: 50%;
width: 70%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}

#g-nav li {
list-style: none;
text-align: center;
}

#g-nav li a {
display: block;
padding: 30px 0px;
border-bottom: 2px dotted #672F8D;
color: #672F8D;
font-weight: bold;
font-size: 14px;
line-height: 1.4em;
text-decoration: none;
text-transform: uppercase;
transition: all .3s;
}

#g-nav li:last-of-type a {
border-bottom: none;
}

#g-nav li a:hover,
#g-nav li a:active {
color: #FDD210;
}

#g-nav li a img {
height: auto;
}

/* openbtn */
.openbtn {
position: fixed;
top: 3.5vw;
right: 3.3vw;
width: 70px;
height: 100px;
background-color: #FFF;
border: 4px solid #672F8D;
border-radius: 10px;
cursor: pointer;
}

.openbtn span {
display: inline-block;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transition: all .4s;
width: 60%;
height: 4px;
background-color: #672F8D;
border-radius: 2px;
}

.openbtn span:nth-of-type(1) {
top: 22px;	
}

.openbtn span:nth-of-type(2) {
top: 42px;
}

.openbtn p {
display: inline-block;
position: absolute;
top: 64px;
left: 52%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #672F8D;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.2em;
}

.openbtn.active span:nth-of-type(1) {
left: 20%;
transform: translateY(6px) rotate(-45deg);
}

.openbtn.active span:nth-of-type(2){
top: 35px;
left: 20%;
transform: translateY(-6px) rotate(45deg);
}


/* --------------------------------------------------------

top

-------------------------------------------------------- */

.top-wrap {
position: relative;
width: 100vw;
height: 56.3vw;
background-color: #FFFA5A;
}

.site-title {
display: inline-block;
max-width: 500px;
position: fixed;
margin-top: 3.5vw;
margin-left: 3.3vw;
transition: .5s;
}

.is-animation {
max-width: 320px;
}


/* --------------------------------------------------------

work

-------------------------------------------------------- */

.work-wrap {
padding-top: 145px;
padding-bottom: 266px;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}

/* ---------------------------
work-left
--------------------------- */

.work-text {
min-width: 350px;
margin-bottom: 80px;
}

.work-text h2 {
color: #672F8D;
font-size: 40px;
letter-spacing: 0.2em;
line-height: 1.75em;
}

.work-text span {
margin-bottom: 0.5em;
letter-spacing: 0.24em;
line-height: 70px;
background: linear-gradient(transparent 35%, #FFFA5A 0%);
}

.work-text p {
line-height: 2.5em;
}

.work-text p:nth-of-type(1){
margin-top: 3.75em;
}

.work-text p:nth-of-type(2){
margin-top: 2.5em;
}

/* ---------------------------
work-right
--------------------------- */

.work-slider {
position: relative;
padding: 36px 36px 66px;
border: 4px solid #672F8D;
margin: 0 auto;
}

.work-slider::before {
content: '';
position: absolute;
width: 1000px;
height: 4px;
background-color: #672F8D;
top: -185px;
left: -4px;
transform: skewY(-20deg);
}

.work-slider::after {
content: '';
position: absolute;
width: 1000px;
height: 4px;
background-color: #672F8D;
top: -185px;
left: 100%;
transform: skewY(-20deg);
}

.work-img-building {
position: absolute;
width: fit-content;
bottom: -10vw;
left: -10vw;
}

.work-img-window {
position: absolute;
width: 100%;
bottom: -4px;
left: 100%;
}

.slider-area {
width: 100%;
margin: 0 auto;
padding: 0 25px;
max-width: 485px;
}

/* ---------------------------
slider
--------------------------- */

.slick-slide {
margin: 5px;
transition: all ease-in-out .3s;
opacity: .2;
}

.slick-slide img {
width: 100%;
max-width: 100%;
height: auto;
}

.slick-current {
opacity: 1;
}

.slick-current img {
border: #672F8D 5px solid;
}

.slick-next {
right: -37px;
}

.slick-prev {
left: -37px;
}

.slick-next:before {
background: url(../images/work-slider-right.svg)!important;
background-size: contain!important;
}

.slick-prev:before{
background: url(../images/work-slider-left.svg)!important;
background-size: contain!important;
}

.slick-arrow {
width: 30px;
height: 30px;
}

.slick-arrow:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity:1;
}

/* --------------------------
modal
-------------------------- */

body.fixed {
position: fixed;
width: 100%;
height: 100%;
left: 0;
}

.modal {
display: none;
position: fixed;
top: 0;
width: 100%;
height: 100%;
}

.modal-bg {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
}

.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 80%;
width: 90%;
background: #FFF;
padding: 30px 1.5vw 30px 5vw;
border-radius: 40px;
overflow: hidden;
}

.modal-item {
width: 100%;
height: 100%;
padding-top: 42px;
padding-right: 3vw;
overflow-y: auto;
}

.modal-title {
position: relative;
display: block;
margin-bottom: 2rem;
padding: 1rem 1.5rem;
background-color: #FFFA5A;
color: #672F8D;
font-size: 26px;
letter-spacing: 0.2em;
}

.modal-title span {
width: fit-content;
position: absolute;
bottom: 0;
right: 10px;
}

.modal-leadtitle {
display: inline-block;
margin-bottom: 5px;
padding: 0 10px;
border-bottom: 1px solid #672F8D;
color: #672F8D;
}

.modal-lead {
margin-bottom: 2rem;
text-align: justify;
font-size: 14px;
font-weight: 400;
line-height: 24px;
}

.modal-list {
margin-bottom: 2rem;
}

.modal-list li {
font-size: 14px;
font-weight: 400;
line-height: 24px;
}

.modal-list li::before {
content: '●';
margin-right: 5px;
color: #672F8D;
font-size: 12px;
}

.modal-achievement {
margin-bottom: 2em;
}

.modal-achievement-title {
display: inline-block;
padding: 8px 20px;
background-color: #672F8D;
border-radius: 15px 15px 0 0;
color: #FFF;
}

.modal-achievement-title img {
width: fit-content;
margin-right: 0.7em;
}

.modal-achievement-about {
margin-top: -1px;
padding: 18px 20px;
border: 2px solid #672F8D;
border-radius: 0 10px 10px 10px;
font-size: 14px;
}

.modal-sample {
display: flex;
justify-content: center;
margin-bottom: 1em;
}

.modal-sample figure {
margin: 1vw;
}

.modal-sample figcaption {
margin-top: 1em;
text-align: center;
color: #672F8D;
font-size: 14px;
letter-spacing: 0.2em;
}

.modal-sample img {
width: 100%;
height: auto;
}

.js-modal-close {
display: block;
padding-right: 3vw;
text-align: right;
color: #672F8D;
}

.js-modal-close img {
width: fit-content;
margin-right: 5px;
vertical-align: text-top;
}

/* 個別設定 */
#modal06 .modal-flex {
display: flex;
}

#modal06 .modal-left {
width: 70%;
}

#modal06 .modal-right {
width: 30%;
}


/* --------------------------------------------------------

movie

-------------------------------------------------------- */

.movie-wrap {
display: flex;
align-items: center;
justify-content: center;
margin: 100px 0 150px;
padding: 0 10vw;
background-color: #FFF;
background-image:
radial-gradient(#672F8D 2px, transparent 2px);
background-size: 25px 25px;
}

.movie-item {
position: relative;
display: inline-block;
width: 100%;
max-width: 845px;
padding: 46px  60px;
border:4px solid #000;
background-color: #FFF;
}

.movie-item::before {
content: '';
position: absolute;
top: -99px;
left: 50%;
width: 230px;
height: 110px;
transform: translateX(-50%);
background: url(../images/movie-top.png) no-repeat center / 100%;
z-index: 3;
}

.movie-iframe {
width: 100%;
aspect-ratio: 16 / 9;
}

.movie-iframe iframe {
width: 100%;
height: 100%;
}

.movie-caption {
margin-top: 20px;
text-align: center;
font-weight: 400;
}


/* --------------------------------------------------------

iishigoto

-------------------------------------------------------- */



/* --------------------------------------------------------

data

-------------------------------------------------------- */

.data-wrap {
position: relative;
padding-top: 164px;
padding-bottom: 100px;
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #FFE684 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #FFE684 calc(100% - 1px));
background-color: #FFFEFC;
background-size: 30px 30px;
background-repeat: repeat;
background-position: center center;
}

.data-wrap::before {
content: url(../images/data-bgtop.png);
width: fit-content;
height: fit-content;
position: absolute;
top: -39px;
left: 50%;
transform: translateX(-50%);
}

.data-wrap::after {
content: url(../images/data-bgbottom.png);
width: fit-content;
height: fit-content;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}

.data-wrap .attention {
margin: 0 auto;
max-width: 960px;
text-align: right;
color: #672F8D;
font-size: 17px;
}

/* --------------------------
data-header
-------------------------- */

.data-header {
position: relative;
display: flex;
align-items: center;
justify-content: left;
width: 97%;
max-width: 960px;
margin: 0 auto 70px;
padding: 3.3vw 5.8vw;
background-color: #FFF;
border: 4px solid #672F8D;
border-radius: 15px;
}

.data-header::after {
content: '';
position: absolute;
top: 18px;
right: -18px;
width: 100%;
height: 100%;
background-color: #D0C0DA;
border: 4px solid #672F8D;
border-radius: 15px;
}

.data-header h2 {
color: #672F8D;
font-size: 40px;
letter-spacing: 0.2em;
line-height: 1.75em;
}

.data-header h2 span {
margin-bottom: 0.5em;
letter-spacing: 0.24em;
line-height: 1.75em;
background: linear-gradient(transparent 40%, #FAED43 0%);
}

.data-header span.border {
display: block;
width: 1px;
height: 100%;
min-height: 130px;
margin: 0 70px;
background-color: #000;
}

.data-header .data-lead {
line-height: 2em;
}

.style-circle::before {
content: ''url(../images/style-circle.svg);
position: absolute;
top: 18px;
left: 18px;
}

.style-circle02::before {
top: unset;
bottom: 10px;
}

.style-circle::after {
content: ''url(../images/style-circle.svg);
position: absolute;
top: 18px;
right: 18px;
}

.style-circle02::after {
top: unset;
bottom: 10px;
}

/* --------------------------
data-content
-------------------------- */

.data-content {
max-width: 990px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.data-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px 45px;
background-color: #FFF;
border: 4px solid #672F8D;
border-radius: 15px;
padding: 0 25px;
}

.data-item::after {
content: '';
position: absolute;
top: 11px;
left: -4px;
width: 100%;
height: 100%;
background-color: #D0C0DA;
border: 4px solid #672F8D;
border-radius: 15px;
box-sizing: content-box;
}

.lottie svg{
width: 100%;
height: auto;
}

/* 個別設定 */

.data-item.div1 {
grid-area: 1 / 1 / 2 / 4;
}

.data-item.div2 {
grid-area: 1 / 4 / 2 / 7;
}

.data-item.div3 {
grid-area: 1 / 7 / 2 / 10;
}

.data-item.div4 {
grid-area: 2 / 1 / 3 / 5;
}

.data-item.div4 svg {
max-width: 290px;
}

.data-item.div5 {
grid-area: 2 / 5 / 3 / 10;
}

.data-item.div6 {
grid-area: 3 / 1 / 4 / 10;
padding: 20px 30px 10px 0;
}

.data-item.div7 {
grid-area: 4 / 1 / 5 / 10;
}

.data-item.div8 {
grid-area: 5 / 1 / 6 / 4;
}

.data-item.div9 {
grid-area: 5 / 4 / 6 / 7;
}

.data-item.div10 {
grid-area: 5 / 7 / 6 / 10;
}



/* --------------------------------------------------------

talk

-------------------------------------------------------- */

.talk-style-top {
display: block;
position: relative;
width: 100%;
height: 250px;
background-color: #672F8D;
}

.talk-header-heading {
position: relative;
top: -170px;
text-align: center;
width: 97%;
max-width: 535px;
margin: 0 auto 70px;
padding: 30px 35px;
background-color: #FFF;
border: 4px solid #672F8D;
border-radius: 15px;
}

.talk-header-heading::before {
content: '';
position: absolute;
top: 18px;
right: -18px;
width: 100%;
height: 100%;
background-color: #D0C0DA;
border: 4px solid #672F8D;
border-radius: 15px;
}

.talk-header-heading::after {
content: url(../images/talk-heder-hukidashi.png);
width: fit-content;
position: absolute;
bottom: 0;
left: -15vw;
}

.talk-header-heading .h2-before {
display: inline-block;
margin-top: 2rem;
margin-bottom: 1rem;
padding: 3px 30px;
text-align: center;
background-color: #FFFA5A;
border-radius: 2em;
color: #672F8D;
font-size: 18px;
}

.talk-header-heading h2 {
margin-bottom: 2rem;
color: #672F8D;
font-size: 79px;
letter-spacing: 0.2em;
line-height: 1;
}

.talk-header-heading h2 span {
display: block;
font-size: 31px;
letter-spacing: 0.15em;
}

.talk-header-lead {
margin-bottom: 1.5rem;
}

.talk-header {
position: relative;
background-color: #FFF;
background-image:radial-gradient(#D0C0DA 2px, transparent 2px);
background-size: 25px 25px;
}

.style-circleborder {
display: block;
position: relative;
left: 5px;
text-align: center;
}

.style-circleborder img {
width: 90%;
overflow: hidden;
}

.style-circleborder::before {
content: ''url(../images/style-circle.svg);
position: absolute;
top: 10px;
left: -15px;
}

.style-circleborder::after {
content: ''url(../images/style-circle.svg);
position: absolute;
top: 10px;
right: -15px;
}

.talk-img {
position: relative;
}

.talk-img-hukidashi {
position: absolute;
top: -85%;
left: 14vw;
}

.talk-img-human {
display: block;
margin-top: -270px;
text-align: center;
}


/* --------------------------
accordion 
-------------------------- */

.talk-content {
padding-top: 75px;
padding-bottom: 200px;
background: url(../images/talk-bgleft.png) repeat-y top left, url(../images/talk-bgright.png) repeat-y top right;
background-color: #F9F8FA;
}

.accordion-area {
list-style: none;
width: 96%;
max-width: 900px;
margin:0 auto;
}

/* talk-thema */
.talk-thema {
display: flex;
align-items: center;
justify-content: left;
background-color: #FFF;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.talk-thema h3 {
padding-right: 1.8rem;
color:#672F8D;
font-size: 24px;
letter-spacing: 0.15em;
line-height: 1.25;
}

.talk-thema span {
background-color: #FFFA5A;
color:#672F8D;
font-size: 35px;
font-weight: 700;
padding: 0.5rem 1.8rem;
margin-right: 1.8rem;
}

/* talk-answer */
.accordion-area .talk-item {
margin-bottom: 100px;
}

.talk-answer {
position: relative;
top: 0;
height: 80px;
margin: 185px 0 0;
padding: 0;
background-color: #FFF;
cursor: pointer;
transition: all .5s ease;
}

.talk-answer .img-text-answer {
width: fit-content;
position: absolute;
top: -30px;
left: 1em;
}

.talk-answer .pickup-human {
width: fit-content;
position: absolute;
bottom: 80px;
right: 1em;
}

.talk-answer .pickup-comment {
position: absolute;
bottom: 100px;
right: 5em;
display: inline-block;
color: #672F8D;
font-size: 20px;
line-height: 50px;
}

.talk-answer .pickup-comment span {
padding: 10px 0;
background-color: #FFFA5A;
}

/* talk-toggle */
.talk-answer::before,
.talk-answer::after {
position: absolute;
content:'';
width: 35px;
height: 4px;
background-color: #CCC;
transition: all .5s ease;
}

.talk-answer::before {
top:48%;
right: 30px;
transform: rotate(0deg);
}

.talk-answer::after {    
top:48%;
right: 30px;
transform: rotate(90deg);
}

.talk-answer.close::after {
transform: rotate(0deg);
}

/* --------------------------
accordion - area
-------------------------- */

.talk-box {
display: none;
background: #FFF;
padding: 20px 6vw 55px;
}

.talk-box dl {
display: flex;
align-items: center;
margin-bottom: 1.4rem;
}


.talk-box dt {
flex-shrink: 0;
text-align: center;
color: #672F8D;
font-size: 10px;
}

.talk-box dt figcaption {
margin-top: 5px;
}

.talk-box dt img {
width: 70px;
height: auto;
}

.talk-box dd {
padding: 0 20px 0 30px;
text-align: justify;
font-size: 14px;
font-weight: 400;
line-height: 1.5em;
}

.talk-box dd strong {
color: #672F8D;
}

/* 個別 */

.talk-situation {
padding-top: 20px;
}

.talk-situation img {
width: 100%;
height: auto;
}

.talk-column {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 20px 25px 43px;
border-radius: 15px;
border: 2px solid #D0C0DA;
}

.talk-column h4 {
margin-bottom: 10px;
color: #672F8D;
}
.talk-column h4::after {
content: url(../images/style-triangle.svg);
width: 17px;
height: 25px;
}

.talk-column p {
margin-right: 1rem;
text-align: justify;
font-size: 14px;
font-weight: 400;
}

.talk-column-right {
flex-shrink: 0;
width: 166px;
margin: 0 auto;
}

.btnarrow4 {
text-align: right;
}

.btnarrow4 a {
position: relative;
margin-bottom: 18px;
display: inline-block;
padding-right: 1.5em;
color: #672F8D;
text-decoration: none;
outline: none;
transition: all .3s;
}

.btnarrow4 a::before{
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 2px;
background: #D0C0DA;
transition: all .3s;
border-radius: 4px;
}

.btnarrow4 a::after{
content: '';
position: absolute;
bottom: -3px;
right: -3px; 
width: 15px;
height: 2px;
background: #D0C0DA;
transform: rotate(50deg);
transition: all .3s;
border-radius: 4px;
}

.btnarrow4 a:hover,
.btnarrow4 a:active {
color: #FDD210;
}

.btnarrow4 a:hover::before,
.btnarrow4 a:active::before {
left: 10px;
}

.btnarrow4 a:hover::after,
.btnarrow4 a:active::after {
right: -13px;
}



/* --------------------------------------------------------

recruit

-------------------------------------------------------- */

.recruit-wrap {
position: relative;
background-color: #FFF;
}

.recruit-wrap::before {
content: '';
position: absolute;
top: -149px;
left: 0;
width: 100vw;
height: 150px;
background: url(../images/recruit-bg.png);
transform: rotate(180deg);
background-size: 100vw 150px;
}

.recruit-title {
margin-bottom: 100px;
text-align: center;
}

.recruit-title span {
margin-bottom: 0.5em;
padding: 0 1rem;
background: linear-gradient(transparent 35%, #FFFA5A 0%);
color: #672F8D;
font-size: 40px;
letter-spacing: 0.2em;
}

.recruit-content {
display: flex;
align-items: flex-start;
justify-content: center;
}

.recruit-left {
flex-shrink: 0;
padding: 0 5.8vw;
margin: 0 auto;
}

.recruit-right {
padding: 0 3.3vw;
margin: 0 auto;
}

.recruit-lead {
font-size: 20px;
line-height: 3em;
letter-spacing: 0.2em;
}

/* --------------------------
recruit - btn
-------------------------- */

.recruit-btn {
position: relative;
display: block;
padding: 50px 2vw;
font-size: 40px;
font-weight: 700;
margin: 68px 0;
text-align: center;
transition: all ease 0.3s;
overflow: hidden;
outline: none;
}

.recruit-btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}

.recruit-btn span {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

.recruit-btn svg {
display: inline-block;
margin-left: 32px;
}

.recruit-btn.recruit-newgraduate {
border: 10px solid #4089dd;
color: #4089dd;
fill:#4089dd;
}

.recruit-btn.recruit-middle {
border: 10px solid #FA9926;
color: #FA9926;
fill:#FA9926;
}

.recruit-btn.recruit-newgraduate::before {
background-color: #4089dd;
}

.recruit-btn.recruit-middle::before {
background-color: #FA9926;
}

/* hover */

.recruit-btn:hover span {
color:#fff;
}

.recruit-btn:hover::before{
transform-origin:left top;
transform:scale(1, 1);
}

.recruit-btn.recruit-newgraduate:hover svg {
fill:#FFF;
}

.recruit-btn.recruit-middle:hover svg {
fill:#FFF;
}




/* --------------------------------------------------------

footer

-------------------------------------------------------- */

.footer {
position: relative;
padding-top: 150px;
background-color: #FFFA5A;
}

.footer::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 100vw;
height: 150px;
background: url(../images/recruit-bg.png);
background-color: #FFFA5A;
background-size: 100vw 150px;
}

.footer.footer--inner {
padding-top: 0;
}

.footer.footer--inner::before {
content: none;
}

.footer > .common-container {
display: flex;
justify-content: space-between;
padding: 85px 4% 70px;
flex-wrap: wrap;
}

.footer-nav {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}

.footer-nav ul {
background-color: #FFF;
margin-right: 36px;
margin-bottom: 2rem;
padding: 0.5rem 1rem 1.5rem;
}

.footer-nav a {
display: block;
color: #672F8D;
font-size: 12px;
padding: 1rem 1.8rem 1rem 0.5rem;
background: url(../images/line-dotted.svg);
background-size: 15px 5px;
background-repeat: repeat-x; 
background-position: left bottom;
transition: all .3s;
}

.footer-nav a:hover,
.footer-nav a:active {
color: #FDD210;
}

.footer-logo {
align-self: flex-end;
margin: 0 0 0 auto;
transition: all 0.3s ease;
}

.footer-logo:hover,
.footer-logo:active {
transform: translateY(-5px) scale(1.01);
}

.copyright {
display: block;
padding: 0 4% 19px;
text-align: center;
background-color: #FFFA5A;
font-size: 12px;
letter-spacing: 0.2em;
}

#topback {
opacity: 0;
position: fixed;
bottom: 3vw;
right: 3vw;
width: 70px;
height: 70px;
transition: all 0.5s ease;
}


/* --------------------------
下層ページ（新卒採用）
-------------------------- */

.inner-recruit-wrap {
padding-top: 150px;
padding-bottom: 150px;
background: url(../images/talk-bgleft.png) repeat-y top left, url(../images/talk-bgright.png) repeat-y top right;
background-color: #F9F8FA;
}

.inner-recruit-title {
margin-bottom: 40px;
text-align: center;
}

.inner-recruit-title span {
margin-bottom: 0.5em;
padding: 0 1rem;
background: linear-gradient(transparent 35%, #FFFA5A 0%);
color: #672F8D;
font-size: 40px;
letter-spacing: 0.2em;
}

.inner-recruit-lead {
text-align: center;
margin-bottom: 60px;
color: #672F8D;
letter-spacing: 0.2em;
padding: 0 2em;
}

.inner-recruit-content {
width: min(80%, 800px);
margin: 0 auto;
padding: 4% 5% 8%;
background-color: #FFF;
}

.inner-recruit-heading {
border-bottom: 5px solid #672F8D;
color: #672F8D;
padding: 0.5em 1em;
letter-spacing: 0.2em;
}

.inner-recruit-table {
margin: 2em auto 2em;
width: 100%;
}

.inner-recruit-table th,
.inner-recruit-table td {
border: 0.5em solid #FFF;
}

.inner-recruit-table th {
padding: 1em;
background-color: #FAED43;
color: #672F8D;
width: 20%;
text-align: center;
vertical-align: middle;
}

.inner-recruit-table td {
border: 0.5em solid #FFF;
padding: 0.5em 1em;
vertical-align: middle;
}

.inner-recruit-howto {
color: #672F8D;
}

.inner-recruit-entry {
display: flex;
width: 100%;
justify-content: center;
margin: 1.3rem 0 1.5rem;
gap: 2em 3em;
}

.inner-recruit-entrybtn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: min(40%, 300px);
font-weight: 700;
color: #672F8D;
border: 3px solid #672F8D;
text-align: center;
padding: 1em;
transition: all ease 0.3s;
overflow: hidden;
outline: none;
}

    
.inner-recruit-entrybtn:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}

.inner-recruit-entrybtn span {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

.inner-recruit-entrybtn::before {
background-color: #672F8D;
color: #FFF;
}
/* hover */

.inner-recruit-entrybtn:hover span {
color:#fff;
}

.inner-recruit-entrybtn:hover::before{
transform-origin:left top;
transform:scale(1, 1);
}

.inner-recruit-entry .mynavi {
width: 200px;
margin: 0 35px;
}

.inner-recruit-entry .mynavi img {
width: 100%;
}

.inner-recruit-entry .rikunabi {
width: 200px;
margin: 0 35px;
text-align: center;
font-size: 14px;
}

.inner-recruit-entry .rikunabi img {
width: 100%;
}

.inner-recruit-contact {
margin-top: 1.5em;
background-color: #f0eef3;
padding: 1.5em 2em;
}

.inner-recruit-year {
font-size: 0.875rem;
padding: 0.3rem;
text-align: center;
color: #672F8D;
background-color: #e5e4e7;
}