@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

/* .zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;


  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;

} */


:root {
--red-color: #C8161D;
--blue-color: #0080CB;
--shadow: 0 0 2px rgba(0, 0, 0, 0.53);
--fontWhite: color: #fff;
}

html {
  overflow-x: hidden;
}
a:focus, button:focus {
    outline: none; /* 点線を非表示 */

}

a, .uk-link {
    color: var(--red-color);
    text-decoration: none;
    cursor: pointer;
}

a:hover, .uk-link:hover {
    color: var(--red-color);
    text-decoration: none;
    cursor: pointer;
}

.uk-heading-divider {
    padding-bottom: calc(5px + 0.1em);
    border-bottom: calc(0.2px + 0.05em) solid #000;
}


.uk-button-primary {
    background-color: #a6b4dd;
    background-image: linear-gradient(135deg, #c9161d3c, #d926743c 36%, #76499a3c 61%, #0080cb3c);
    color: #fff;
    border: 1px solid #fff;
}

.uk-button-primary:hover {
    background-color: #d5a6ddff;
    background-image: linear-gradient(135deg, #c9161d3c, #d926743c 36%, #76499a3c 61%, #0080cb3c);
    color: #fff;
    border: 1px solid #fff;
}


.uk-slidenav {
    padding: 5px 10px;
    color: rgba(0, 0, 0, 0.7);
    transition: color 0.1s ease-in-out;
}

.uk-slidenav:hover {
    color: rgba(0, 0, 0, 1);
}


.uk-heading-line > ::before, .uk-heading-line > ::after {
    content: "";
    position: absolute;
    top: calc(50% - (calc(0.2px + 0.05em) / 2));
    width: 2000px;
    border-bottom: calc(0.2px + 0.05em) dotted var(--blue-color);
}


/* /////////////  off canvas */

.uk-offcanvas-bar .uk-close {
    color: rgb(27 24 24);
}
.uk-offcanvas
 {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
}

.uk-offcanvas-bar {
        left: -350px;
        width: 90vw ;
        padding: 30px 30px;
    }
    
@media (max-width: 767px) {
  .uk-offcanvas-bar {

        width: 100vw;

    }

    }
.uk-offcanvas-bar {
    background: #ffffffbc;
     /*background-image: linear-gradient(135deg, #c9161d3c, #d926743c 36%, #76499a3c 61%, #0080cb3c); */
    backdrop-filter: blur(10px);
}

#offcanvas__leftWrapper {
  width: 250px;
}

@media (max-width: 767px) {
  #offcanvas__leftWrapper {
  width: 100%;
}

}

.btn_internbox {
  background-color: #ffffff;
  font-weight: 700;
  color: #000;
}

.menuWrapper dl dt{
margin-top: 20px;
}

.menuWrapper dl dt, 
.menuWrapper dl dd{
padding-bottom: 5px;
margin-bottom: 10px;
color: #000;
}

.menuWrapper dl dt a, 
.menuWrapper dl dd a{
color: #000;
position: relative;
}

.menuWrapper dl dd a{
display: flex;
align-items: center;
}


.menuWrapper dl dt a:hover, 
.menuWrapper dl dd a:hover{
color: #000000;
text-decoration:underline;

}
 
.menuWrapper dl dd a::after{
content:"";
background-image: url(../img/chevron-right.svg);
background-position: center right;
background-size: cover;
position: absolute;
top: 8px;
margin-left: 0.3rem;
/* right: -22px; */
width: 8px;
height:14px;

}


.menuWrapper dl dt {
border-bottom: solid 1px #ffffff48;
}


.menuWrapper dl dd {
text-indent: 1rem;
}

 /* /////////////END   off canvas */

/* /////////////  ローディング画面 */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color:#eee;
  background-image: url(../img/bg.webp);
    background-size: 100% auto;
    background-repeat: repeat-y;
	position: fixed;
	text-align: center;
  top: 0;
  left: 0;
  z-index: 9999;
}
.spinner {
		/* position: absolute; 
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%); */
}
.loaded {
  opacity: 0;
  visibility: hidden;
}

#loading .uk-icon {
  color: #000;
}

#loadingstroke {
  margin-top: 20px;
}

@media (max-width: 767px) {
  #loadingstroke {
  margin-top: 5vh;
}
}


#loadinglogo {
  position: absolute; 
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
    opacity: 0;
    animation: loadinglogoMove 2s forwards 1s; /* 2秒後に移動開始、1秒で完了 */
}

@keyframes loadinglogoMove {

   0%{
    top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
    opacity: 0;
  }

  50%{
    top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
    opacity: 1;
  }

  100%{
    opacity: 1;
    top: 10px;
    left: 5vw;
    transform: none; /* 中央揃えのtransformをリセット */
  }

}



#loadinglogo img {
  width: 30vw;
  max-width: 150px;
}

@media (max-width: 1000px) {
#loadinglogo {

}
}

@media (max-width: 767px) {
#loadinglogo img {
  width: 30vw;
  max-width: 80px;
}
}
/* /////////////  END  ローディング画面 */


/* 背景 */
#bgbox {
    background-image: url(../img/bg.webp);
    background-size: 100% auto;
    background-repeat: repeat-y;
}

#bgbox2 {
    background-image: url(../img/bg_fukidashi.webp);
    background-size: 100% auto;
    background-repeat: repeat-y;
    /* background-attachment: fixed; */
    padding-bottom: 80px;
    
}

/* END  背景 */

/* /////////////   ロゴ    ///////////////// */

#logo {
  position: fixed;
  top: 10px;
  left: 5vw;
  z-index: 999;
      pointer-events: auto;
}
#logo img {
  width: 30vw;
  max-width: 150px;
}

@media (max-width: 767px) {

  #logo img {
  width: 30vw;
  max-width: 80px;
}
}


/* ///////////// END  ロゴ    ///////////////// */


/* /////////////   メニュー    ///////////////// */

#menubox {
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 999; 
  width: 200px;
  backdrop-filter: blur(10px);
}

@media (max-width: 767px) {
#menubox {
  width: 100vw;
}
}


#menubox > div > div  > div {
  padding: 1rem;
  border-top: solid 1px #fff;
  font-weight: 700;
}

.btn_entrybox {
  background-image: linear-gradient(90deg, #c8161c81, #0081cb81);
  backdrop-filter: blur(10px);
  --webkit-backdrop-filter: blur(10px);
  color: #fff;
}

.btn_menubox {
  background-color: #ffffff82;
}




/* /////////////  END  メニュー    ///////////////// */


/* /////////////  フッター    ///////////////// */

.footerBox:nth-child(2) {
  border-top: solid 1px var(--red-color);
  border-bottom: solid 1px var(--red-color);
}

.footerBox:nth-child(3) {
  border-top: solid 1px var(--blue-color);
  border-bottom: solid 1px var(--blue-color);
}

.footerBox:nth-child(4) {
  border-top: solid 1px #1d1874;
  border-bottom: solid 1px #1d1874;
}

.copyright {
  font-size: 12px;
}

#footermenubox {
  background-color: #E48E94;
  background-image: linear-gradient(90deg, #e48e94, #ea95b3 36%, #e499bb 50%, #c57e9c 50%, #bf81a0 61%, #9a90b0);
}

@media (max-width: 767px) {
#footermenubox {
  background-color: #E48E94;
  background-image: linear-gradient( #e48e94, #ea95b3 36%, #e499bb 50%, #c57e9c 50%, #bf81a0 61%, #9a90b0);
}
}

#footersnsbox {
  background-color: #4974b396;
  backdrop-filter: blur(5px);
  border-top: solid 1px #ffffff82;
}

#footermenubox *,
#footersnsbox *{
  color: #fff;
}
#footermenubox ul li {
  padding: 0.5rem  1rem ;
  
  font-size: 1.3rem;
}

#footermenubox ul li:not(:last-child) {
  border-bottom: dotted 1px #ffffff82;
}


/* .btnDetail の基本スタイル */
.btnDetail {
  display: inline-block;
  align-items: center;
  gap: 8px;
  padding: 10px 0px;
  font-size: 0.8rem;
  font-weight: 400;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
  margin-left: auto; /* 右揃え */
  position: relative; /* 擬似要素の位置基準 */
}

/* a 要素の基本スタイル */
a.uk-link-toggle {
  display: block; /* ブロック要素 */
  text-decoration: none; 
  transition: color 0.3s ease;
}

/* .btnDetail のデフォルトの下線 */
.btnDetail::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ffe1e1;
}

/* .btnDetail のホバー時のアニメーション用下線 */
.btnDetail::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-image: linear-gradient(90deg, #c9161c72, #d9267472 36%, #76499a72 61%, #0080cb72);
  transition: width 0.3s ease;
}

/* a 要素ホバー時または .btnDetail ホバー時のアニメーション */
a.uk-link-toggle:hover .btnDetail::after,
.btnDetail:hover::after {
  width: 100%;
}


#footersnsbox .uk-grid-collapse >div:first-child {
  border-right: solid 1px #ffffff48;
  border-bottom: solid 1px #ffffff48;
}



/* /////////////  END フッター    ///////////////// */



/* /////////////  メインビデオ　関連 */

#mainVideo {
    position: relative;
    margin-top: 20px;
}

@media (max-width: 767px) {
    #mainVideo {
    position: relative;
    margin-top: 5vh;
}    
}

#maintext {
    position: absolute;
    bottom: 10px;
    right: -10px;
}


@media (max-width: 767px) {
#maintext {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
}

@media (max-width: 1000px) {
#maintext {
    width: 60vw;
}
}


@media (max-width: 767px) {
#maintext {
    width: 70vw;
}
}

.videocontainer {
  width: 100%;
  height: 0;
  padding-bottom: 75%; 
  position: relative;
  overflow: hidden;
}

.masked-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  clip-path: url(#clipMask);
  -webkit-clip-path: url(#clipMask);
}

svg#video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@supports not (clip-path: url(#clipMask)) {
  .masked-video {
    clip-path: none;
    -webkit-clip-path: none;
  }
}

@media (max-width: 767px) {
  .videocontainer {
    max-width: 100%;
  }
}
    /* END メインビデオ　関連 */



/* /////////////  壁トークとは？    ///////////////// */
#sectionAboutTalk {
}

.leadWrapper {
  background-image: linear-gradient( #f7d7d8f3, #fad3e4e5 36%, #e9dbf5f6 61%, #b0dbf5b5);
  backdrop-filter: blur(20px);
  --webkit-backdrop-filter: blur(20px);
  border-radius: 10px;
  
}

.leadWrapper p {
  line-height: 2.5;
  font-weight: 500;
}

@media (min-width: 767px) {
#sectionAboutTalk > div {
  background-image: url(../img/bg_aboutTalkright.webp); 
  background-position: top  right 10%;
  background-size:  auto 100%;
  background-repeat: no-repeat;
}

#sectionAboutTalk > div  > div  {
    background-image: url(../img/bg_aboutTalkLeft.webp);
  background-position: top left 10%;
  background-size:  auto 100%;
  background-repeat: no-repeat;
}
}

 /* /////////////  END  壁トークとは？     ///////////////// */  


  /* /////////////   　インタビュー     ///////////////// */ 


@media (min-width: 600px) {
  .contentRightAlign {
    margin-left: calc(5vw + 160px);
  }
}

@media (max-width: 600px) {
  .contentRightAlign {
    margin-top: 80px;
  }
}

  .indexInterviewBox p {
    font-size: 0.9rem;
  }

  .interviewTitle2 {
    color: var(--blue-color);
    font-weight: 500;
  }

  .interviewName {
    font-size: 0.8rem;
    text-align: right;
    border-bottom: solid 1px #000;
    padding: 0.3rem 0;

  }


#sectionInterview a.uk-slidenav-next,
#sectionInterview a.uk-slidenav-previous{
    /* background: #fff; */
  background: #ffffff4f;
    backdrop-filter: blur(10px);
  }

#sectionInterview   .uk-slidenav {
    padding: 10px 15px;
    color: rgba(0, 0, 0, 0.33);
    transition: color 0.1s ease-in-out;
    margin-left: 1px;
    border: solid 1px #ffffff74;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
}


/* div#sectionMiniTalk, 
div#sectionCrossTalk {
    overflow: hidden;
} */

#sectionMiniTalk .uk-marker {
    padding: 10px;
    color: #ffd49b;
    transition: .1s ease-in-out;
    transition-property: color, background-color;
    background: #ffffff4f;
    backdrop-filter: blur(10px);
    border-radius: 0;
    border: solid 1px #ffffff74;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
}


.contsAreaL,.contsAreaR {
	position: relative;
	margin: 0 auto;

}

.textAreaL {
	position: absolute;
	top: -100px;
	left: 0px;
	text-align: left;
}

.textAreaR {
	position: absolute;
	top: -100px;
	right: 0px;
	text-align: left;
}



.textArea_inner {
	 padding: 1rem;
	 -moz-box-sizing: border-box;
	 -webkit-box-sizing: border-box;
	 -o-box-sizing: border-box;
	 -ms-box-sizing:border-box;
	 box-sizing: border-box;
	 background-image: linear-gradient( #e0888ce6, #db78a3e6 36%, #b07fb3 61%, #5ca2cfe6);
  border-radius: 10px;
    width: 30vw;
    font-weight: 600;
    color: #fff;
    text-shadow:var(--shadow);
    border: solid 1px #fff;
}

.textArea_inner h2 {
  color: #fff;
}


.contsAreaL img {
	width: 70%;
	float: right;
}

.contsAreaR img {
	width: 70%;
}

.space {
	clear: both;
	padding: 80px 0px 50px;
}

 .uk-button-default {
    background-color: #fff;
    color: #000;
    border: 1px solid #ffffffff;
    text-shadow: none;
    font-weight: bold;
}


 .uk-button-default:hover {
    background-color: #ffffffb1;
    color: #000;
    border: 1px solid #ffffffff;
    text-shadow: none;
    font-weight: bold;
}



/* --------------------------------------------------------
	mobile
-------------------------------------------------------- */

@media only screen and (max-width:767px) {
	.contsAreaL,.contsAreaR {
		width: 100%;
	}
	.textAreaL,.textAreaR {
		position: static;
		text-align: left;
    margin-bottom: 20px;
	}
	.numTextL,.numTextR {
		margin: 0 0 20px 0px;
	}
	.numTextL:after,.numTextR:after {
		left: 0;
	}
	.textArea_inner {
     width: 100%;
	 }
	.contsAreaL img,.contsAreaR img {
		width: 100%;
	}
}

  /* /////////////  END  　インタビュー     ///////////////// */  

  /* /////////////  仕事をしる     ///////////////// */  

  .indexWorkBox {
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
  }

  .indexWorkBoxRight {
    background-image: linear-gradient(90deg, #eda1be, #eca0bc 52%, #bfb5d7);
     text-shadow:var(--shadow);
     color: #fff;
     font-weight: 500;
  }
  


  @media (min-width:768px) {
  .marginpadding {
    margin-top: 30vh;
  }
}


.btn_envMenu {
        left: 10px;
        right: 10px;
        bottom: -30px;
        padding: 1rem;
        border-radius: 5px;
        backdrop-filter: blur(10px);
    background-color: #ffffffd1;
    border: solid 1px #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    }

.btn_envMenu div.btnDetail {
 color: #000;
}

.btn_envMenu div.btnDetail:hover {
 color: #00000094;
}
    /* /////////////  END  仕事をしる     ///////////////// */  



/* /////////////   インタビューページ     ///////////////// */ 

#js-oversized,
#js-oversized h3,
#js-oversized h4 {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
 
}
#js-oversized p {
  line-height: 2;
}
#interview__main .uk-overlay-default {
  background: #fafdff3c;
  background-image: linear-gradient(90deg, #a1ceedc7, #ecaba03c 52%, #b5bcd73c);
  backdrop-filter:  contrast(1.5) blur(5px);
}

.interview__name {
  border-bottom: solid 1px #000;
}
.interview__titleLead {
  color: var(--blue-color);
  font-weight: 500;
}

#interview__sectionmytalk {

}

#interview__sectionmytalk > div {
  padding: 1rem;
  border: solid 1px #fff;
    border-radius: 3px;
    backdrop-filter: blur(5px);
    background: #ffffff82;
}
.inteview__bgwhite {
  background: #fff;
}

.inteview__bggrade {
  background-image: linear-gradient(90deg, #eda1be6a, #eca0bc6a 52%, #bfb5d76a);
}


.bread-path__item {
    display: inline;
}



@media (max-width: 1024px) {
    .bread-path {
        padding: 0 30px 10px;
    }
}
.bread-path {
    padding: 0 0 20px;
}

.bread-path__item:not(:last-child)::after {
    content: ">";
    display: inline-block;
    margin: 0 0.5em;
}

.bread-path__list {
    margin: 0 auto;
    border-bottom: solid 1px #fff;
    border-top: solid 1px #fff;
    padding: 0.8rem;
}



.scheBox {
  border: solid 1px #fff;
  border-radius: 3px;
  backdrop-filter: blur(5px);
  background: #ffffff82;
}

.scheBox .uk-text-small {
  font-size: 0.75rem;
  border-top: dotted 1px #333;
  padding-top: 0.2rem;
}

.scheBox .scheLine dl {
    margin-left: -4px;
    line-height: 1.3;
}

.scheBox .scheLine {
    border-left: 1px solid #7c7c7cff;
}

.scheBox .scheLine dl dt, .scheBox .scheLine dl dd {
    padding: 0.3rem 0;
}
.uk-description-list>dt {
    color: #333;
    font-size: .875rem;
    font-weight: 400;
    text-transform: uppercase;
}

.scheBox dt::before {
    content: "●";
    padding-right: 0.3rem;
    font-size: 0.5rem;
}


h3.uk-heading-divider.uk-h4::before {
  content: "ー ";
  color: #0281cc;
}

h3.uk-heading-divider.uk-h4 {
border-bottom: calc(0.2px + 0.05em) dashed #0281cc;
}

#interview__menu_wrapper .uk-card-default {
    background-color: #ffffff48;
    background-image: linear-gradient(90deg, #eda1be6a,  #bddfe96a);
    color: #000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-radius: 5px;
}

.interviewer-aside-slider__caption {
  font-size: 0.85rem;
}

.school {
  background: #ffffff91;
  border-radius: 5px;
  padding: 0.3rem;
}

/* /////////////  END  インタビューページ     ///////////// */ 

/* /////////////  クロストークページ     ///////////// */ 
#classtoakfont {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
}

.crosstalkWrapper .uk-grid {
  margin-top: 3rem !important;
  
}

.corss__Introname {
  padding-bottom: 0.3rem;
  border-bottom: dotted 1px #000;
  font-size: 0.9rem;
  margin-top: 1rem;
}


.cross_balloonName {
  color: #fff;
  text-align: center;
  font-size: 14px;
}


.crossTalkTitle {
    margin: -20% 1rem 1rem 1rem;
    display: inline-block;
    text-align: left;;
    /* max-width: 1250px;
    width: 60%; */
    background-color: #ffffff48;
    background-image: linear-gradient(#e0888ce6, #db78a3e6 36%, #b07fb3 61%, #5ca2cfe6);
    color: #fff;
    border-radius: 10px;
    position: relative;
}


.teamTalkTitle {
  display: inline-block;
    margin: -20% 1rem 1rem 1rem;
    display: inline-block;
    text-align: left;;
    /* max-width: 1250px;
    width: 60%; */
    background-color: #e65e7c99;
    /* background-image: linear-gradient(#e0888ce6, #db78a3e6 36%, #b07fb3 61%, #5ca2cfe6); */
    backdrop-filter: blur(5px);
    color: #fff;
    border-radius: 5px;
    position: relative;

}

.teamTalkTitle::before {
    content: "";
    position: absolute;
  border: dashed 2px #fff;
  border-radius: 5px;
  top:5px;
  bottom: 5px;
  left:5px;
  right: 5px;

} 




.talk-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 36px;
    position: relative;
}

.talk-left {
    display: flex;
    align-items: center;
    gap: 36px;
    position: relative;
}


.balloon1-right {
  position: relative;
  display: inline-block;
  margin: 0 15px 0 0;
  padding: 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 15px;
  background: #ffffffd1;
  backdrop-filter: blur(10px);
  border-radius: 5px;
}

.balloon1-right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #ffffffd1;
   ;
}

.balloon1-right p,
.balloon1-left p {
  margin: 0;
  padding: 0;
}


.balloon1-left {
  position: relative;
  display: inline-block;
  margin: 0  0 0 15px;
  padding: 10px;
  min-width: 120px;
  max-width: 70vw;
  color: #555;
  font-size: 15px;
   background: #ffffffd1;
  backdrop-filter: blur(10px);
  border-radius: 5px;
}

.balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #ffffffd1;
}

.cross_balloonPerson  {
  width: 80px;
  min-width: 80px;
}

.cross_balloonPerson img  {
  border-radius: 500px;
}

.bg_cross_01 {
  background-image: url(../img/interview/bg_cross01.webp);
  background-size: cover;
  padding: 1rem;
}

.bg_cross_02 {
  background-image: url(../img/interview/bg_cross02.webp);
  background-size: cover;
  padding: 1rem;
}


.bg_cross_03 {
  background-image: url(../img/interview/bg_cross03.webp);
  background-size: cover;
  padding: 1rem;
}

.bg_cross_04 {
  background-image: url(../img/interview/bg_cross04.webp);
  background-size: cover;
  padding: 1rem;
}

@media (max-width: 768px) {

.bg_cross_01,
.bg_cross_02,
.bg_cross_03,
.bg_cross_04 {
  background: #0000003f;
}


}


#matomeBOX {
    border: 2px dashed var(--red-color);
    box-shadow: 0 0 20px 6px #ffffff;
    padding: 16px;
    margin: 20px;
}

.crossTitle  {
  background-image: linear-gradient(90deg, #eda1be6a, #fec9ff6a 52%, #6786d96a);
  backdrop-filter: blur(10px);
}




.bg_teamY_01 {
  background-image: url(../img/interview/bg_teamY01.webp);
  background-size: cover;
  padding: 1rem;
}

.bg_teamY_02 {
  background-image: url(../img/interview/bg_teamY02.webp);
  background-size: cover;
  padding: 1rem;
}


.bg_teamY_03 {
  background-image: url(../img/interview/bg_teamY03.webp);
  background-size: cover;
  padding: 1rem;
}

.bg_teamY_04 {
  background-image: url(../img/interview/bg_teamY04.webp);
  background-size: cover;
  padding: 1rem;
}


.bg_teamM_01 {
  background-image: url(../img/interview/bg_teamM01.webp);
  background-size: cover;
  padding: 1rem;
}

.bg_teamM_02 {
  background-image: url(../img/interview/bg_teamM02.webp);
  background-size: cover;
  padding: 1rem;
}


.bg_teamM_03 {
  background-image: url(../img/interview/bg_teamM03.webp);
  background-size: cover;
  padding: 1rem;
}

.bg_teamM_04 {
  background-image: url(../img/interview/bg_teamM04.webp);
  background-size: cover;
  padding: 1rem;
}


.bg_teamV_01 {
  background-image: url(../img/interview/bg_teamV01.webp);
  background-size: cover;
  padding: 1rem;
}

.bg_teamV_02 {
  background-image: url(../img/interview/bg_teamV02.webp);
  background-size: cover;
  padding: 1rem;
}


.bg_teamV_03 {
  background-image: url(../img/interview/bg_teamV03.webp);
  background-size: cover;
  padding: 1rem;
}

.bg_teamV_04 {
  background-image: url(../img/interview/bg_teamV04.webp);
  background-size: cover;
  padding: 1rem;
}




@media (max-width: 768px) {

.bg_teamY_01,
.bg_teamY_02,
.bg_teamY_03,
.bg_teamY_04,
.bg_teamM_01,
.bg_teamM_02,
.bg_teamM_03,
.bg_teamM_04,
.bg_teamV_01,
.bg_teamV_02,
.bg_teamV_03,
.bg_teamV_04 {
  background: #0000003f;
}





}

.titleanswer {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  margin-top: 0.5rem;
  font-weight: 500;
 text-align: center;
  font-size: 2rem;
  line-height: 1;
}

.titleanswer::before {
  content: "“";
  font-size: 3rem;
  color: #fff;
}

.titleanswer::after {
  content: "”";
  font-size: 3rem;
  color: #fff;
}





.eye_style01 {
    padding: 0.7em 0.5em 0.7em 68px;
    position: relative;
    font-weight: normal;
    font-size: 1.1rem;
}

.eye_style01::before {
    content: "";
    display: block;
    position: absolute;
    left: 40px;
    bottom: 0;
    width: calc(100% - 40px);
    height: 1px;
    background: #fff;
}

.eye_style01 span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffffff;
    transform: translateY(-50%);
    font-size: 20px;
}

.eye_style01 span::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border: 1px solid #c0caec;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/*その他の設定*/
*,::before, ::after {
    box-sizing: border-box;
}




/* /////////////  END  クロストークページ     ///////////// */ 

/* /////////////  メッセージ    ///////////// */ 


#teamMSG,
#ceoMSG {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  line-height: 2;
}
.msgTitle {
  border-left: solid 3px var(--red-color);
  padding-left: 1rem;
}

.msgtitle {
  position: relative;
  padding: 8px 16px;
  border-top: solid 2px #333;
  border-bottom: solid 2px #333;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  display: block;
  box-sizing: border-box;
  max-width: 800px;
  text-align: center; 
  margin: 24px;
  margin-inline: auto;
  background: #fff;
}

.msgtitle::before, .msgtitle::after {
  content: '';
  position: absolute;
  width: 2px;
  height: calc(100% - 16px);
  background: #333;
  align-items: center;
  top: 8px;
}

.msgtitle::before {
  left: -8px;
}

.msgtitle::after {
  right: -8px;
}

/* /////////////  END  メッセージ     ///////////// */ 


.map-container {
  position: relative;
  padding-bottom: 100%; /* 16:9 のアスペクト比 */
  height: 0;
  overflow: hidden;
}
.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0; /* 枠線を消す */

}


/* /////////////  about us     ///////////// */ 
#sectionAbout {
  background-image: url(../img/about/bg_aboutus.webp);
  background-size: 45vw auto;
  background-repeat: no-repeat;
  background-position: right top;
}

#sectionHistory .bg_history {
  border: solid 1px #fff;
  backdrop-filter: blur(5px)hue-rotate(45deg)brightness(1.05);
} 
#about_outline {
  border: double 5px #fff;
  backdrop-filter: blur(10px)hue-rotate(45deg);
}

@media (max-width: 768px) {
  #about_outline {
  background-size: cover;
  }
}

.about_outline_en {
  color: var(--blue-color);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}


#sectionOutline .uk-list-divider > :nth-child(n+2) {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted #000000;
}

#sectionOutline .uk-description-list-divider > dt:nth-child(n+2) {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dotted #000000;
}

#sectionOutline .uk-description-list-divider > dt:nth-child(n+2) {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dotted #000000;
}

#sectionOutline dl dt,
#sectionHistry dl dt {
  color: var(--blue-color);
}


.uk-table th {
    color: #000;

}

.uk-table-divider > tr:not(:first-child), .uk-table-divider > :not(:first-child) > tr, .uk-table-divider > :first-child > tr:not(:first-child) {
    border-top: 1px solid #a5a5a5ff;
}

.maplistBox {
  border: solid 1px #fff;
  backdrop-filter: blur(5px)hue-rotate(45deg)brightness(1.05);
  border: solid 1px #fff;
  margin-top: 1rem;
  border-radius: 3px;
}

#personMSG {
   border: solid 1px #fff;
  backdrop-filter: blur(5px)hue-rotate(45deg)brightness(1.05);
  padding: 1rem;
  font-size: 1.2rem;
  border-radius: 3px;
}


/* /////////////  END  about us     ///////////// */ 

/* /////////////    work     ///////////// */ 


#sectionJob {
  background-image: url(../img/job/bg_job.webp);
  background-size: 45vw auto;
  background-repeat: no-repeat;
  background-position: right top;
}


#Job_policy {
  border: solid 1px #fff;
  backdrop-filter: blur(5px)hue-rotate(45deg)brightness(1.05);
}

.Job_policy_number {
  color: white; /* 白文字 */

              -webkit-text-stroke: 1px #888;
  text-stroke: 1px #888;
  mix-blend-mode: difference; /* 背景画像の場合のブレンドモード（オプション、白黒反転効果） */
}
.ocuuName {
  font-size: small;
  color: var(--blue-color);
}

#industry .uk-h5.uk-margin-small-bottom.uk-heading-line {
  color: var(--blue-color);
}


#industry .uk-card-default {
background-color: inherit;
border: solid 1px #ffffff7d;
}


/* .uk-grid-divider > :not(.uk-first-column)::before {

    border-color: #fff;
} */

.occ_branch {
  background-color: #ffffff7c;
  padding: 0.3rem;
}

.occ_supportName {
  background-image: linear-gradient(90deg, #eda1be6a, #fec9ff6a 52%, #6786d96a);
  backdrop-filter: blur(10px);
  padding: 0.8rem;
  border-radius: 3px;
}

/* /////////////  END  work     ///////////// */ 

/* /////////////   福利厚生     ///////////// */ 


#sectionImportant {
  background-image: url(../img/env/bg_env.webp);
  background-size: 45vw auto;
  background-repeat: no-repeat;
  background-position: right top;
}

#sectionTraining {
  background-image: url(../img/env/bg_env02.webp);
  background-size: 60vw auto;
  background-repeat: no-repeat;
  background-position: left  top;
}

@media (min-width: 600px) {
  #sectionTraining {
  background-image: url(../img/env/bg_env02.webp);
  background-size: 45vw auto;
  background-repeat: no-repeat;
  background-position: left 20vw top;
}
}

.sectionTraining_bg {
  border: solid 1px #fff;
  backdrop-filter: blur(5px)hue-rotate(19deg)brightness(1.05);
}


#sectionBenefits h4 {
  font-size: 15px;
}

#sectionBenefits p {
  font-size: small;
  margin: 0;
}


#person_policy {
  border: solid 1px #fff;
  backdrop-filter: blur(5px)hue-rotate(19deg)brightness(1.05);
}

.Job_policy_number {
  color: white; /* 白文字 */
 -webkit-text-stroke: 1px #888;
  text-stroke: 1px #888;
  mix-blend-mode: difference; 
}



/* /////////////  END  福利厚生     ///////////// */ 


/* /////////////   FAQ お問い合わせ    ///////////// */ 

#sectionFaq {
   background-image: url(../img/contact/bg_faq.webp);
  background-size: 60vw auto;
  background-repeat: no-repeat;
  background-position: right top;
}

@media (min-width: 600px) {
#sectionFaq {
  background-image: url(../img/contact/bg_faq.webp);
  background-size: 45vw auto;
  background-repeat: no-repeat;
  background-position: right top;
}
}

dl.faqList dt {
  font-size: 1.3rem;
  border-bottom: dotted 1px var(--blue-color);
  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.11);
  margin-bottom: 5px;
}


dl.faqList dt::before {
        content: "Q";
        display: inline-block;
        margin-right: 5px;
        font-size: 3rem;
        color: var(--blue-color);
        position: relative;
        top: 5px;
    }


dl.faqList dd p {
  text-indent: calc( -1rem - 2px);
  margin-left: 4rem;
    }


dl.faqList dd p::before {
        content: "A";
        display: inline-block;
        margin-right: 5px;
        font-size: 3rem;
        font-weight: bold;
        color: var(--red-color);
        position: relative;
        top: 5px;
        line-height: 1rem;
    }

.freecallBox {
background-image: linear-gradient(90deg,  #e0888ce6, #db78a3e6 36%, #b07fb3 61%, #5ca2cfe6); 
color: #fff;
padding: 0.5rem;
border-radius: 3px;
}

.telno {
  font-size: 2rem;
  font-weight: bold;
}


.freecallTitle {
  border-top: dotted  1px #000000;
   border-bottom: dotted  1px #000000;
  padding: 1rem;
  font-size: 1rem; 
}
/* /////////////  END  FAQ  お問い合わせ   ///////////// */ 

/* /////////////  採用までの流れ   ///////////// */ 

.uk-table-striped > tr:nth-of-type(odd), .uk-table-striped tbody tr:nth-of-type(odd) {
    background: #ffffff78;
    border-top: none;
    border-bottom: none;
}
table {
  border-bottom: none;
}



.nowrap {
    white-space: nowrap;
  }




.node {
  color: white;
  padding: 15px 30px;
  border-radius: 8px;
  text-align: center;
  margin: 10px 0;
  min-width: 120px;
  position: relative;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(20px);
}


.node01 {
  background-color: var(--red-color);
  background-image: linear-gradient(90deg,  #c9171e, #bf2f7d); 
}

.node02 {
  background-color: #bf2f7d;
  background-image: linear-gradient(90deg,  #bf2f7d, #6d4f9f); 
}

.node03 {
  background-color: #3b65b2;
  background-image: linear-gradient(90deg,  #6d4f9f, #0080cb); 
}

.node04 {
  background-color: var(--blue-color);
  background-image: linear-gradient(90deg,  #0080cb, #003dcbff); 
}
.arrow {
  font-size: 24px;

}  


.midashi_leftLine {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
}


/* /////////////　END  採用までの流れ   ///////////// */ 

/* /////////////  ミニ壁トーク   ///////////// */ 
.minitalkbox {
  background-image: url(../img/mini_bg.webp);
  background-size: contain;
}

.image-container .uk-background-default {
background-image: linear-gradient(90deg,  #e0888c72, #db78a372 36%, #b07fb372 61%, #5ca2cf72); 
    background-color: #ffffff;

   
}

div.miniLine {
 position: relative;
}

div.miniLine::after {
  content: '';
  border: dashed 1px #fff;
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 5px;
}

div.miniLine::before {
  content: '';
  border: dashed 1px #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 5px;
}


/* 1. 全てのコンテナに position: relative を設定 */
.image-container {
    position: relative; 
    /* display: inline-block;  */
}

.image-container a{
  display: block;
}

/* 2. 全てのコンテナ内の a 要素にホバー時の円 (::after) を作成 */
.image-container a::after {
    content: "click"; 
    color: white; 
    font-size: 18px; 
    text-decoration: none; 
    text-shadow: 0 0 3px rgba(0,0,0,0.3);
    /* 文字を円の中央に配置するための設定 */
    display: flex; 
    justify-content: center; 
    align-items: center;
 /* 全体の設定 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* 初期状態: スケール0で非表示 */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    
    /* 半透明色 */
    background-color: rgba(2, 129, 203, 0.4); 
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    z-index: 10;
    -webkit-backdrop-filter: hue-rotate(180deg); 
    backdrop-filter: hue-rotate(180deg)saturate(200%);
}

/* 3. マウスオーバー時に円を表示・拡大 */
.image-container:hover a::after {
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); /* 拡大して表示 */
}


#miniEgao {
left: 2%; 
top: 5%;
width: 18%;
}

#miniYarigai {
left: 20%; 
top: 5%;
width: 35%;
}

#miniHonest {
  right: 5%; 
top: 0%;
width: 15%;
}

#miniThanks {
top: 25%;
left: 43%; 
width:40%;
}

#miniTrust {
top: 30%;
left: 5%; 
width:28%;
}

#miniHappy {
top: 40%;
left: 50%; 
width:28%;
}

#miniPerson {
top: 45%;
left: 0%; 
width:15%;
}

#miniFun {
top: 55%;
left: 35%; 
width:28%;
}

#miniFree {
top: 42%;
right: 3%; 
width:12%;
}

#miniWall {
bottom: 15%;
left: 23%; 
width:48%;
}

#miniGrowup {
bottom: 3%;
left: 0%; 
width:32%;
}

#miniGood {
bottom: 0%;
right: 0%; 
width:47%;
}

/* /////////////　END  ミニ壁トーク   ///////////// */