#overWrap.bgSection {
	margin-bottom: -150px;
}
#recruitMv{
	width: 100%;
	padding: 50px 0;
	background-image: url("../../recruit/img/bg.png");
	background-size: cover;
	position: relative;
}

#recruitMv #mv{
	--imgW: 1000px;
  --duration: 20s;
	width: 100%;
	height: 400px;
  overflow: hidden;
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: var(--imgW) 100%;
  animation: bgScroll linear infinite;
  animation-duration: var(--duration);
	margin-bottom: 40px;
}

@keyframes bgScroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc(-1 * var(--imgW)) 0;
  }
}

#recruitMv .txtArea{
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
}

#recruitMv .txtArea h2{
	font-family: "Roboto", sans-serif;
	color: #0F78E6;
	display: flex;
	flex-direction: column;
	gap:8px;
}

#recruitMv .txtArea h2 .en{
	font-size: 60px;
	font-weight: 700;
	letter-spacing: 5%;
	line-height: 1;
}

#recruitMv .txtArea h2 .jp{
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

#recruitMv .txtArea .message{
	font-size: 38px;
	font-weight: 700;
	color: #0F78E6;
}


@media ( max-width : 840px ) {
#overWrap.bgSection {
        margin-bottom: calc(100vw * -25 / 390);
}
#recruitMv{
	padding: calc(100vw * 37 / 390) 0;
	background-size: calc(100vw * 1450 / 390);
    background-position: calc(100vw * -460 / 390) 0;
}

#recruitMv #mv{
	height: calc(100vw * 400 / 390);
	margin-bottom: calc(100vw * 20 / 390);
}

#recruitMv .txtArea{
	padding: 0 calc(100vw * 20 / 390);
	flex-direction: column;
	align-items: flex-start;
	gap:calc(100vw * 6 / 390);
}

#recruitMv .txtArea h2{
	order: 2;
	gap:calc(100vw * 8 / 390);
}

#recruitMv .txtArea h2 .en{
	font-size: calc(100vw * 60 / 390);
}

#recruitMv .txtArea h2 .jp{
	font-size: calc(100vw * 18 / 390);
}

#recruitMv .txtArea .message{
	font-size: calc(100vw * 24 / 390);
}
}



#recruitMenu{
	width: 100%;
	padding: 50px 20px;
	background: #fff;
}

#recruitMenu .menuWrap{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

#recruitMenu .menuWrap .txtBox{
	display: flex;
	flex-direction: column;
	gap:40px;
	margin-bottom: 50px;
}

#recruitMenu .menuWrap .txtBox p{
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	line-height: 160%;
	color: #0F78E6;
}

#recruitMenu .menuWrap .menuList{
	display: flex;
}

#recruitMenu .menuWrap .menuList li{
	position: relative;
  width: calc(100% / 3);
  height: 472px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

#recruitMenu .menuWrap .menuList li a{
	position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
	padding: 20px;
}

#recruitMenu .menuWrap .menuList li:nth-child(1) a{
  background-image: url("../../recruit/img/new_graduate.jpg");
  background-position: 47% center;
}

#recruitMenu .menuWrap .menuList li:nth-child(2) a{
  background-image: url("../../recruit/img/career.jpg");
  background-position: 22% center;
}

#recruitMenu .menuWrap .menuList li:nth-child(3) a{
  background-image: url("../../recruit/img/company.jpg");
  background-position: 43% center;
}

#recruitMenu .menuWrap .menuList li a .txtArea{
	background: #fff;
	padding: 15px 20px;
	border-radius: 10px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

#recruitMenu .menuWrap .menuList li a .txtArea p{
	display: flex;
	flex-direction: column;
	color: #0F78E6;
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

#recruitMenu .menuWrap .menuList li a .txtArea p .jp{
	font-size: 24px;
	font-weight: 700;
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

#recruitMenu .menuWrap .menuList li a .txtArea p .en{
	font-size: 12px;
	font-weight: 700;
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

#recruitMenu .menuWrap .menuList li a .txtArea .arrow{
	width: 34px;
	height: 34px;
	border-radius: 1000%;
	border: solid 1px #0F78E6;
	display: flex;
	justify-content: center;
	align-items: center;
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

#recruitMenu .menuWrap .menuList li a .txtArea .arrow span{
	width: 12px;
	height: 11px;
	mask-image:url("../img/common/arrow.svg");
	background: #0F78E6;
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}


@media ( min-width : 840px ) {
#recruitMenu .menuWrap .menuList li:hover{
	width: 50% !important;
}

#recruitMenu .menuWrap .menuList:hover li{
	width: 25%;
}

#recruitMenu .menuWrap .menuList:hover li .txtArea{
	opacity: 0;
}
	
#recruitMenu .menuWrap .menuList li:hover .txtArea{
	opacity: 1;
}
	
#recruitMenu .menuWrap .menuList li:hover .txtArea{
	background: #0F78E6;
}
	
#recruitMenu .menuWrap .menuList li:hover .txtArea p{
	color: #fff;
}
	
#recruitMenu .menuWrap .menuList li:hover .txtArea .arrow{
	border-color: #fff;
}
	
#recruitMenu .menuWrap .menuList li:hover .txtArea .arrow span{
	background: #fff;
}
}

@media ( max-width : 840px ) {
#recruitMenu{
	padding: calc(100vw * 50 / 390) calc(100vw * 10 / 390);
}

#recruitMenu .menuWrap .txtBox{
	gap:calc(100vw * 30 / 390);
	margin-bottom: calc(100vw * 50 / 390);
}

#recruitMenu .menuWrap .txtBox p{
	font-size: calc(100vw * 24 / 390);
	text-align: justify;
}

#recruitMenu .menuWrap .menuList{
	flex-direction: column;
	gap:calc(100vw * 10 / 390);
}

#recruitMenu .menuWrap .menuList li{
  width: calc(100%);
  height: calc(100vw * 300 / 390);
}

#recruitMenu .menuWrap .menuList li a{
	padding: calc(100vw * 20 / 390);
	background-size: calc(100vw * 455 / 390);
}

#recruitMenu .menuWrap .menuList li:nth-child(1) a{
  background-position: 47% center;
}

#recruitMenu .menuWrap .menuList li:nth-child(2) a{
  background-position: 22% center;
}

#recruitMenu .menuWrap .menuList li:nth-child(3) a{
  background-position: 43% center;
}

#recruitMenu .menuWrap .menuList li a .txtArea{
	padding: calc(100vw * 15 / 390) calc(100vw * 20 / 390);
}

#recruitMenu .menuWrap .menuList li a .txtArea p .jp{
	font-size: calc(100vw * 24 / 390);
}

#recruitMenu .menuWrap .menuList li a .txtArea p .en{
	font-size: calc(100vw * 12 / 390);
}

#recruitMenu .menuWrap .menuList li a .txtArea .arrow{
	width: calc(100vw * 34 / 390);
	height: calc(100vw * 34 / 390);
}

#recruitMenu .menuWrap .menuList li a .txtArea .arrow span{
	width: calc(100vw * 12 / 390);
	height: calc(100vw * 11 / 390);
	mask-size:cover;
}
}


#bnArea{
	width: 100%;
	padding: 50px 20px;
	background: #F0F4FD;
}

#bnArea .bnWrap{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 232px));
	justify-content: center;
	gap:10px;
}

#bnArea .bnWrap a{
	transition: .3s;
}

@media ( min-width : 840px ) {
#bnArea .bnWrap a:hover{
	opacity: .7;
}
}

@media ( max-width : 840px ) {
#bnArea{
	padding: calc(100vw * 50 / 390) calc(100vw * 10 / 390);
}

#bnArea .bnWrap{
	grid-template-columns: repeat(2, 1fr);
	gap:calc(100vw * 10 / 390);
}
}



#movie{
	width: 100%;
	padding: 100px 20px 50px;
}

#movie .movieWrap{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.recruitTit{
	display: flex;
	flex-direction: column;
	margin-bottom: 50px;
}

.recruitTit .en{
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 700;
	display: flex;
  align-items: center;
  gap: 5px;
	margin-bottom: -5px;
}

.recruitTit .en::before{
	content: "●";	
	font-size: 12px;
	font-weight: 700;
	color: #0F78E6;
}

.recruitTit .jp{
	font-size: 50px;
	font-weight: 700;
	color: #0F78E6;
}

#movie .movieWrap .movieBox{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
	gap:40px 15px;
}

#movie .movieWrap .movieBox article .movieArea{
	aspect-ratio: 16 / 9;
}

#movie .movieWrap .movieBox article .movieArea iframe{
	width: 100%;
	height: 100%;
}

#movie .movieWrap .movieBox article .txtArea{
	color: #0F78E6;
}

#movie .movieWrap .movieBox article .txtArea .tit{
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}

#movie .movieWrap .movieBox article .txtArea .txt{
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
}


@media ( max-width : 840px ) {
#movie{
	padding: calc(100vw * 50 / 390) calc(100vw * 10 / 390);
}

.recruitTit{
	margin-bottom: calc(100vw * 50 / 390);
}

.recruitTit .en{
	font-size: calc(100vw * 16 / 390);
  gap: calc(100vw * 5 / 390);
	margin-bottom: calc(100vw * 7 / 390);
}

.recruitTit .en::before{
	font-size: calc(100vw * 12 / 390);
}

.recruitTit .jp{
	font-size: calc(100vw * 40 / 390);
	line-height: 120%;
}

#movie .movieWrap .movieBox{
	grid-template-columns: 1fr;
	gap:calc(100vw * 40 / 390);
}

#movie .movieWrap .movieBox article .movieArea{
	margin-bottom: calc(100vw * 5 / 390);
}

#movie .movieWrap .movieBox article .txtArea .tit{
	font-size: calc(100vw * 20 / 390);
	margin-bottom: calc(100vw * 10 / 390);
}

#movie .movieWrap .movieBox article .txtArea .txt{
	font-size: calc(100vw * 16 / 390);
}
}




#recruitMvNew{
	width: 100%;
	position: relative;
	height: 620px;
	padding: 0 20px;
	margin-bottom: 80px;
	background: #F0F4FD;
}

#recruitMvNew .mvWrap{
	width: 1400px;
  transform: translate(-50%, 0%);
  position: absolute;
  left: 50%;
  z-index: 1;
}

#recruitMvNew .txtWrap{
	width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 3;
  position: relative;
  height: 100%;
}

#recruitMvNew h2{
	position: absolute;
	bottom: 55px;
	left: 0;
	color: #fff;
	font-size: 50px;
	font-weight: 700;
	line-height: 76px;
}

@media ( max-width : 840px ) {
#recruitMvNew{
	height: auto;
	padding: 0;
	margin-bottom: calc(100vw * 30 / 390);
}

#recruitMvNew .mvWrap{
	width: 100%;
  transform: translate(0%, 0%);
  position: inherit;
  left: auto;
}

#recruitMvNew h2{
	bottom: calc(100vw * 30 / 390);
	left: calc(100vw * 30 / 390);
	font-size: calc(100vw * 32 / 390);
	line-height: 150%;
}
}



#col2{
	width: 100%;
	padding: 0 20px;
}

#col2 .colWrap{
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	gap:60px;
	display: grid;
	grid-template-columns: 200px 1fr;
	align-items: flex-start;
}

#col2 .colWrap .menuList{
	position: sticky;
  top: 100px;
	display: flex;
	flex-direction: column;
	gap:20px;
}

#col2 .colWrap .menuList ul{
	display: flex;
	flex-direction: column;
	gap:20px;
	align-items: flex-start;
}

#col2 .colWrap .menuList .nav{
	font-size: 16px;
	font-weight: 500;
	padding-left: 20px;
	position: relative;
	display: flex;
  align-items: center;
	transition: .3s;
}

#col2 .colWrap .menuList .nav::before{
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background: #0075DE;
	left: 4px;
	border-radius: 1000px;
	transition: .3s;
	opacity: 0;
}

#col2 .colWrap .menuList .nav.current{
	font-weight: 700;
	color: #0075DE;
	pointer-events: none;
}

#col2 .colWrap .menuList .nav.current::before{
	opacity: 1;
}

#col2 .colWrap .menuList .linkBox{
	display: flex;
	flex-direction: column;
	gap:20px;
}

#col2 .colWrap .menuList .linkBox .entry{
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 2px #0075DE;
	background: #0075DE;
	border-radius: 100px;
	color: #fff;
	font-size: 24px;
	font-weight: 900;
	transition: .3s;
}

#col2 .colWrap .menuList .linkBox .linkBtn{
	width: 100%;
	height: 39px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 2px #0075DE;
	background: #fff;
	border-radius: 100px;
	color: #0075DE;
	font-size: 16px;
	font-weight: 700;
	transition: .3s;
	position: relative;
}

#col2 .colWrap .menuList .linkBox .linkBtn .arrow{
	mask:url("../img/common/arrow.svg");
	background: #0075DE;
	width: 12px;
	height: 11px;
	position: absolute;
	right: 12px;
	transition: .3s;
}

#recruitNews{
	width: 100%;
	margin-bottom: 80px;
}

#recruitNews ul{
	display: flex;
	flex-direction: column;
}

#recruitNews ul a{
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #E5E7EB;
	display: grid;
	grid-template-columns: minmax(100px, max-content) 1fr;
	gap:15px;
	align-items: start;
	position: relative;
	padding-right: 50px;
	transition: .3s;
}

#recruitNews ul a .date{
	color: #0F78E6;
	font-size: 16px;
	font-weight: 600;
	line-height: 30px;
}

#recruitNews ul a .tit{
	font-size: 16px;
	font-weight: 600;
	line-height: 30px;
	text-align: justify;
}

#recruitNews ul a .arrow{
	position: absolute;
	right: 11px;
	mask:url("../img/common/arrow7.svg");
	width: 15px;
	height: 9px;
	background: #0F78E6;
	transform: rotateZ(-90deg);
	top: 0;
	bottom: 15px;
	bottom: 0;
	margin: auto;
	transition: .3s;
}

#pickUp{
	width: 100%;
	padding: 80px 0;
	position: relative;
}

#pickUp .bg{
	width: calc(100vw * 1000 / 390);
	height: 100%;
	background: #F0F4FD;
	z-index: -1;
	transform: translate(-50%, 0%);
	position: absolute;
	left: 50%;
	top: 0;
}

#pickUp .pickList{
	display: flex;
	flex-direction: column;
	gap:20px;
}

#pickUp .pickList .pickOne{
	background: #fff;
	padding: 20px;
	border-radius: 10px;
	display: grid;
	grid-template-columns: clamp(200px, 40%, 320px) 1fr;
	gap:30px;
	transition: .3s;
}

#pickUp .pickList .pickOne .imgArea{
	overflow: hidden;
	border-radius: 10px;
}

#pickUp .pickList .pickOne .imgArea img{
	transition: .3s;
	border-radius: 10px;
}

#pickUp .pickList .pickOne .txtArea .tit{
	font-size: 28px;
	font-weight: 700;
	line-height: 150%;
	color: #0F78E6;
	margin-bottom: 20px;
}

#pickUp .pickList .pickOne .txtArea .txt{
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
	text-align: justify;
	padding-right: 10px;
}

@media ( max-width : 900px ) {
#col2 .colWrap {
  gap: 30px;
}
}

@media ( min-width : 840px ) {
#col2 .colWrap .menuList .nav:hover{
	color: #0075DE;
	font-weight: 700;
}
#col2 .colWrap .menuList .nav:hover::before{
	opacity: 1;
}

#col2 .colWrap .menuList .linkBox .entry:hover{
	background: #fff;
	color:#0075DE;
}

#col2 .colWrap .menuList .linkBox .linkBtn:hover{
	background: #0075DE;
	color: #fff;
}

#col2 .colWrap .menuList .linkBox .linkBtn:hover .arrow{
	background: #fff;
}

#recruitNews ul a:hover{
	color:#0075DE;
}

#recruitNews ul a:hover .arrow{
	right: 6px;
}

#pickUp .pickList a:hover .pickOne{
	background: #f0f0f0;
}

#pickUp .pickList a:hover .pickOne .imgArea img{
	transform: scale(1.1);
}
}



@media ( max-width : 840px ) {
#col2{
	padding: 0 calc(100vw * 10 / 390);
}

#col2 .colWrap{
	grid-template-columns:1fr;
	gap:calc(100vw * 40 / 390);
}

#col2 .colWrap .menuList{
	position: inherit;
  top: auto;
	display: contents;
}

#col2 .colWrap .menuList ul{
	flex-direction: row;
	gap:calc(100vw * 5 / 390);
}

#col2 .colWrap .menuList.mar-t ul{
	margin-top: calc(100vw * 20 / 390);
}

#col2 .colWrap .menuList .nav{
	font-size: calc(100vw * 16 / 390);
	padding-left: calc(100vw * 17 / 390);
}

#col2 .colWrap .menuList .nav::before{
	width: calc(100vw * 8 / 390);
	height: calc(100vw * 8 / 390);
	left: calc(100vw * 5 / 390);
}

#col2 .colWrap .menuList .linkBox{
	order: 3;
	gap:calc(100vw * 20 / 390);
}

#col2 .colWrap .menuList .linkBox .entry{
	height: calc(100vw * 60 / 390);
	border-radius: 1000px;
	font-size: calc(100vw * 24 / 390);
}

#col2 .colWrap .menuList .linkBox .linkBtn{
	height: calc(100vw * 60 / 390);
	border-radius: 1000px;
	font-size: calc(100vw * 20 / 390);
}

#col2 .colWrap .menuList .linkBox .linkBtn .arrow{
	width: calc(100vw * 15 / 390);
	height: calc(100vw * 14 / 390);
	mask-size:cover;
	right: calc(100vw * 28 / 390);
}

#recruitNews{
	margin-bottom: calc(100vw * 50 / 390);
}

#recruitNews ul a{
	padding-top: calc(100vw * 15 / 390);
	padding-bottom: calc(100vw * 15 / 390);
	grid-template-columns: 1fr;
	gap:0;
	padding-right: calc(100vw * 40 / 390);
}

#recruitNews ul a .date{
	font-size: calc(100vw * 16 / 390);
	line-height: calc(100vw * 30 / 390);
}

#recruitNews ul a .tit{
	font-size: calc(100vw * 16 / 390);
	line-height: calc(100vw * 30 / 390);
}

#recruitNews ul a .arrow{
	right: calc(100vw * 10 / 390);
	width: calc(100vw * 15 / 390);
	height: calc(100vw * 9 / 390);
	bottom: 0;
	mask-size:cover;
}

#col2 .recruitTit {
    margin-bottom: calc(100vw * 20 / 390);
  }

#pickUp{
	padding: calc(100vw * 50 / 390) 0;
}

#pickUp .pickList{
	gap:calc(100vw * 20 / 390);
}

#pickUp .pickList .pickOne{
	padding: calc(100vw * 20 / 390);
	grid-template-columns: 1fr;
	gap:calc(100vw * 30 / 390);
}

#pickUp .pickList .pickOne .txtArea .tit{
	font-size: calc(100vw * 28 / 390);
	margin-bottom: calc(100vw * 20 / 390);
}

#pickUp .pickList .pickOne .txtArea .txt{
	font-size: calc(100vw * 16 / 390);
	margin-bottom: calc(100vw * 10 / 390);
	padding-right: 0;
}
}



#intern{
	width: 100%;
	padding: 80px 0;
}

#intern .txt{
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	margin-bottom: 50px;
}

#intern .titBox {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap:30px;
	margin-bottom: 50px;
}

#intern .titBox .tit{
	margin-bottom: 20px;
}

#intern .titBox .tit .en{
	font-size: 40px;
	font-weight: 700;
}

#intern .titBox .tit .slash{
	font-size: 16px;
	font-weight: 500;
	margin: 0 10px;
}

#intern .titBox .tit .jp{
	font-size: 16px;
	font-weight: 500;
}

#intern .tabWrap .tabNav{
  display: flex;
  gap: 30px;
  margin-bottom: 10px;
	border-bottom: 2px solid #0F78E6;
}

#intern .tabWrap .tabBtn{
	color: #0F78E6;
  background: #fff;
  border: solid 2px #0F78E6;
	border-bottom: none;
  cursor: pointer;
	font-size: 24px;
  font-weight: 700;
	border-radius: 10px 10px 0 0;
	width: 280px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#intern .tabWrap .tabBtn.is-active{
  background: #0F78E6;
  color: #fff;
}

#intern .tabPanel{
  display: none;
}

#intern .tabPanel.is-active{
  display: flex;
	flex-direction: column;
}

#intern .contentOne{
	padding: 20px;
  display: grid;
  grid-template-columns: clamp(200px, 40%, 320px) 1fr;
  gap: 30px;
  transition: .3s;
	align-items: center;
	border-bottom: 1px solid #E5E7EB;
}

#intern a:last-child .contentOne{
	border-bottom: none;
}

#intern .contentOne .imgArea{
	overflow: hidden;
	border-radius: 10px;
}

#intern .contentOne .imgArea img{
	border-radius: 10px;
	transition: .3s;
}

#intern .contentOne .txtArea .tit{
	font-size: 28px;
  font-weight: 700;
  line-height: 150%;
  color: #0F78E6;
  margin-bottom: 20px;
}

#intern .contentOne .txtArea .txt{
	font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  text-align: justify;
	margin-bottom: 0;
}

@media ( min-width : 840px ) {
#intern .tabPanel a:hover .contentOne{
	background: #E5E7EB;
}

#pickUp .pickList a:hover .pickOne .imgArea img{
	transform: scale(1.1);
}
}

@media ( max-width : 840px ) {
#intern{
	padding: calc(100vw * 50 / 390) 0;
}

#intern .txt{
	font-size: calc(100vw * 16 / 390);
	line-height:  calc(100vw * 28 / 390);
	margin-bottom:  calc(100vw * 20 / 390);
}

#intern .titBox {
	grid-template-columns: 1fr;
	gap: calc(100vw * 20 / 390);
	margin-bottom:  calc(100vw * 20 / 390);
}

#intern .titBox .tit{
	margin-bottom:  calc(100vw * 20 / 390);
	display: flex;
	flex-direction: column;
}

#intern .titBox .tit .en{
	font-size:  calc(100vw * 40 / 390);
}

#intern .titBox .tit .slash{
	display: none;
}

#intern .titBox .tit .jp{
	font-size:  calc(100vw * 16 / 390);
	line-height: 1;
}

#intern .tabWrap .tabNav{
	justify-content: space-between;
  gap: 0px;
  margin-bottom: calc(100vw * 10 / 390);
}

#intern .tabWrap .tabBtn{
	font-size: calc(100vw * 20 / 390);
	width: calc(100vw * 180 / 390);
	height: calc(100vw * 60 / 390);
}

#intern .contentOne{
	padding: calc(100vw * 20 / 390) calc(100vw * 10 / 390);
  grid-template-columns: 1fr;
  gap: calc(100vw * 20 / 390);
	border-bottom: 1px solid #E5E7EB;
}

#intern .contentOne .txtArea .tit{
	font-size: calc(100vw * 28 / 390);
  margin-bottom: calc(100vw * 20 / 390);
}

#intern .contentOne .txtArea .txt{
	font-size: calc(100vw * 16 / 390);
}
}



#role{
	width: 100%;
	padding: 80px 0;
	position: relative;
}

#role .bg{
	width: calc(100vw * 1000 / 390);
	height: 100%;
	background: #F0F4FD;
	z-index: -1;
	transform: translate(-50%, 0%);
	position: absolute;
	left: 50%;
	top: 0;
}

#role .roleList{
	display: flex;
	flex-direction: column;
	gap:25px;
}

#role .roleList .roleOne{
	background: #fff;
	position: relative;
	border-radius: 10px;
	border: solid 2px #0F78E6;
	padding: 34px 20px; 
	cursor: pointer;
	transition: .3s;
	scroll-margin-top: 100px;
}

#role .roleList .roleOne .roleOut{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 60px;
}

#role .roleList .roleOne .roleOut .roleTit{
	font-size: 28px;
  font-weight: 700;
  color: #0F78E6;
	transition: .3s;
}

#role .roleList .roleOne .roleOut .roleTxt{
	font-size: 16px;
  font-weight: 700;
	line-height: 26px;
  color: #0F78E6;
	max-width: 360px;
	transition: .3s;
	text-align: justify;
}

#role .roleList .roleOne .openBtn{
	position: absolute;
	right: 24px;
	background: #0F78E6;
	width: 36px;
	height: 36px;
	border-radius: 1000px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s;
}

#role .roleList .roleOne .openBtn::before{
	content: "";
	width: 11px;
	height: 3px;
	position: absolute;
	background: #fff;
	border-radius: 1000px;
	transition: .3s;
}

#role .roleList .roleOne .openBtn::after{
	content: "";
	width: 3px;
	height: 11px;
	position: absolute;
	background: #fff;
	border-radius: 1000px;
	transition: .3s;
}

#role .roleList .roleOne .roleIn{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}


#role .roleList .roleOne.is-open .roleIn{
  max-height: 10000px; 
}


#role .roleList .roleOne.is-open .openBtn::after{
	height: 0;
}

#role .roleList .roleOne .roleIn .contentOne{
	padding: 20px;
  display: grid;
  grid-template-columns: clamp(200px, 40%, 320px) 1fr;
  gap: 30px;
  align-items: center;
  border-bottom: 1px solid #E5E7EB;
}

#role .roleList .roleOne .roleIn .contentOne:first-of-type{
	margin-top: 20px;
}

#role .roleList .roleOne .roleIn .contentOne:last-of-type{
  border-bottom: none;
	margin-bottom: 20px;
}

#role .roleList .roleOne .roleIn .contentOne .imgArea img{
	border-radius: 10px;
}

#role .roleList .roleOne .roleIn .contentOne .txtArea .tit{
	font-size: 28px;
  font-weight: 700;
  line-height: 150%;
  color: #0F78E6;
  margin-bottom: 20px;
}

#role .roleList .roleOne .roleIn .contentOne .txtArea .txt{
	font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  text-align: justify;
  margin-bottom: 0;
}

.moreBtn.blue {
  background: #0F78E6;
  border-color: #0F78E6;
  color: #fff;
}

@media (min-width: 840px) {
  .moreBtn.blue:hover {
    color: #0F78E6;
  }
	.moreBtn.blue:hover span {
    background: #0F78E6;
  }

#role .roleList .roleOne:hover{
	background: #0F78E6;
}

#role .roleList .roleOne:hover .roleTit{
	color: #fff;
}

#role .roleList .roleOne:hover .roleTxt{
	color: #fff;
}

#role .roleList .roleOne:hover .openBtn{
	background: #fff;
}

#role .roleList .roleOne:hover .openBtn::before,
#role .roleList .roleOne:hover .openBtn::after{
	background: #0F78E6;
}

#role .roleList .roleOne.is-open:hover{
	background: #fff;
}

#role .roleList .roleOne.is-open:hover .roleTit{
	color:#0F78E6;
}

#role .roleList .roleOne.is-open:hover .roleTxt{
	color:#0F78E6;
}

#role .roleList .roleOne.is-open:hover .openBtn{
	background: #0F78E6;
}

#role .roleList .roleOne.is-open:hover .openBtn::before,
#role .roleList .roleOne.is-open:hover .openBtn::after{
	background: #fff;
}
}



@media (max-width: 1000px) {
#role .roleList .roleOne .roleOut {
	flex-direction: column;
	align-items: flex-start;
  padding-right: 60px;
}
}

@media (max-width: 840px) {
#role{
	padding: calc(100vw * 50 / 390) 0;
}

#role .roleList{
	gap:calc(100vw * 25 / 390);
}

#role .roleList .roleOne{
	padding: calc(100vw * 20 / 390);
}

#role .roleList .roleOne .roleOut{
	gap:calc(100vw * 20 / 390);
	padding-right: 0px;
}

#role .roleList .roleOne .roleOut .roleTit{
	font-size: calc(100vw * 28 / 390);
}

#role .roleList .roleOne .roleOut .roleTxt{
	font-size: calc(100vw * 16 / 390);
	line-height: calc(100vw * 26 / 390);
	max-width: 100%;
}

#role .roleList .roleOne .openBtn{
	right:auto;
	width: calc(100vw * 36 / 390);
	height: calc(100vw * 36 / 390);
	position: inherit;
    margin-left: auto;
}

#role .roleList .roleOne .openBtn::before{
	width: calc(100vw * 11 / 390);
	height: calc(100vw * 3 / 390);
}

#role .roleList .roleOne .openBtn::after{
	width: calc(100vw * 3 / 390);
	height: calc(100vw * 11 / 390);
}
	#role .roleList .roleOne .roleIn {
		display: flex;
		flex-direction: column;
		gap:calc(100vw * 30 / 390);
	}
#role .roleList .roleOne .roleIn .contentOne{
	padding: 0px 0 calc(100vw * 20 / 390);
  grid-template-columns: 1fr;
  gap: calc(100vw * 10 / 390);
}

#role .roleList .roleOne .roleIn .contentOne:first-of-type{
	margin-top:  calc(100vw * 20 / 390);
}

#role .roleList .roleOne .roleIn .contentOne:last-of-type{
	margin-bottom: 0px;
}

#role .roleList .roleOne .roleIn .contentOne .txtArea .tit{
	font-size:  calc(100vw * 28 / 390);
  margin-bottom:  calc(100vw * 5 / 390);
}

#role .roleList .roleOne .roleIn .contentOne .txtArea .txt{
	font-size:  calc(100vw * 16 / 390);
}

.moreBtn.blue {
	padding: calc(100vw * 15 / 390) 0;
}
}




#voice{
	width: 100%;
	padding: 80px 0;
}

#voice.active{
	padding:0;
}

#voice .voiceList .swiper-wrapper{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 270px));
	gap:40px 30px;
	margin-bottom: 50px;
}


#voice.active .voiceList{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 270px));
	gap:40px 30px;
	margin-bottom: 50px;
}

#voice .voiceList .imgArea{
	overflow: hidden;
	border-radius: 1000px;
	aspect-ratio: 1 / 1;
	margin-bottom: 20px;
}

#voice .voiceList .imgArea img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .3s;
}

#voice .voiceList .txtArea .txt{
	font-size: 16px;
	font-weight: 700;
	color: #0F78E6;
	margin-bottom: 5px;
	text-align: center;
}

#voice .voiceList .txtArea .name{
	font-size: 24px;
	font-weight: 700;
	text-align: center;
}


@media (min-width: 840px) {
#voice .voiceList a:hover .imgArea img{
	transform: scale(1.1);
}
}


@media (max-width: 840px){
#voice{
	padding: calc(100vw * 50 / 390) 0;
}
	
#voice .voiceList{
	/*margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding:0 calc(100vw * 20 / 390);*/
	width: calc(100% + calc(100vw * 20 / 390));
	margin-inline: calc(100vw * -10 / 390)
}
	
#voice .voiceList .swiper-wrapper{
	display: flex;
	gap:calc(100vw * 0 / 390);
	margin-bottom: calc(100vw * 50 / 390);
}
	

#voice .voiceList .imgArea{
	margin-bottom: calc(100vw * 20 / 390);
}

#voice .voiceList .txtArea .txt{
	font-size: calc(100vw * 16 / 390);
	/*font-size: calc(100vw * 13.5 / 390);*/
	word-break: break-all;
	margin-bottom: calc(100vw * 5 / 390);
}

#voice .voiceList .txtArea .name{
	font-size: calc(100vw * 24 / 390);
}

#voice .voiceList .swiper-slide{
    max-width: calc(100vw * 270 / 390);
	flex-shrink: 0;
  }
	
#voice.active{
	padding: calc(100vw * 0 / 390) 0;
}

#voice.active .voiceList{
	grid-template-columns: 1fr;
	gap:calc(100vw * 30 / 390);
	margin-bottom: 0px;
	padding: 0 calc(100vw * 50 / 390);
}
}


#environment{
	width: 100%;
	padding: 80px 0;
	position: relative;
}

#environment .bg{
	width: calc(100vw * 1000 / 390);
	height: 100%;
	background: #F0F4FD;
	z-index: -1;
	transform: translate(-50%, 0%);
	position: absolute;
	left: 50%;
	top: 0;
}

#environment .tabWrap .tabNav{
  display: flex;
  gap: 30px;
	margin-bottom: 50px;
	border-bottom: 2px solid #0F78E6;
}

#environment .tabWrap .tabBtn{
	color: #0F78E6;
  background: #fff;
  border: solid 2px #0F78E6;
	border-bottom: none;
  cursor: pointer;
	font-size: 24px;
  font-weight: 700;
	border-radius: 10px 10px 0 0;
	width: 420px;
	height: 97px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#environment .tabWrap .tabBtn span{
	font-size: 16px;
	font-weight: 700;
}

#environment .tabWrap .tabBtn.is-active{
  background: #0F78E6;
  color: #fff;
}

#environment .tabPanel{
  display: none;
}

#environment .tabPanel.is-active{
  display: flex;
	flex-direction: column;
}

#environment .environmentTit{
	font-size: 28px;
  font-weight: 700;
  color: #0F78E6;
	padding-left: 25px;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

#environment .environmentTit::before{
	content: "";
	width: 15px;
	height: 15px;
	background: #0F78E6;
	position: absolute;
	left: 0;
	border-radius: 1000px;
}

#environment .contentOne{
	padding: 20px;
	background: #fff;
	border-radius: 5px;
  display: grid;
  grid-template-columns: clamp(200px, 40%, 320px) 1fr;
  gap: 30px;
  transition: .3s;
	align-items: center;
	margin-bottom: 40px;
}

#environment  .contentOne .imgArea{
	overflow: hidden;
	border-radius: 10px;
}

#environment .contentOne .imgArea img{
	border-radius: 10px;
	transition: .3s;
}

#environment .contentOne .txtArea .tit{
	font-size: 28px;
  font-weight: 700;
  line-height: 150%;
  margin-bottom: 20px;
}

#environment .contentOne .txtArea .txt{
	font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  text-align: justify;
	margin-bottom: 0;
}

.bgBlue{
	background: #F0F4FD;
	height: 300px;
}

@media (max-width: 1150px){
#environment .tabWrap .tabNav{
  gap: calc(100vw * 20 / 1150);
}
#environment .tabWrap .tabBtn{
	font-size: calc(100vw * 26 / 1150);
	width: calc(100vw * 360 / 1150);
}
#environment .tabWrap .tabBtn span{
	font-size: calc(100vw * 18 / 1150);
}
}

@media (max-width: 840px){
#environment{
	padding: calc(100vw * 50 / 390) 0;
}

#environment .tabWrap .tabNav{
	flex-direction: column;
  gap: calc(100vw * 30 / 390);
	margin-bottom: calc(100vw * 50 / 390);
	border-bottom: none;
}

#environment .tabWrap .tabBtn{
	font-size: calc(100vw * 28 / 390);
	border-radius: 1000px;
	width: calc(100vw * 350 / 390);
	height: calc(100vw * 97 / 390);
	border: solid 2px #0F78E6;
	margin: auto;
}

#environment .tabWrap .tabBtn span{
	font-size: calc(100vw * 16 / 390);
}

#environment .environmentTit{
	font-size: calc(100vw * 28 / 390);
	line-height: calc(100vw * 34 / 390);
	padding-left: calc(100vw * 25 / 390);
	margin-bottom: calc(100vw * 20 / 390);
}

#environment .environmentTit::before{
	width: calc(100vw * 15 / 390);
	height: calc(100vw * 15 / 390);
}

#environment .contentOne{
	padding: calc(100vw * 20 / 390);
  grid-template-columns:  1fr;
  gap: calc(100vw * 10 / 390);
	margin-bottom: calc(100vw * 30 / 390);
}

#environment .contentOne .txtArea .tit{
	font-size: calc(100vw * 24 / 390);
  line-height: 140%;
  margin-bottom: calc(100vw * 10 / 390);
}

#environment .contentOne .txtArea .txt{
	font-size: calc(100vw * 16 / 390);
}

.bgBlue{
	height: calc(100vw * 150 / 390);
	background: #fff;
}
}



#col2.active {
  padding: 80px 20px 0;
}
@media (max-width: 840px){
#col2.active {
  padding: 0px calc(100vw * 10 / 390) 0;
}
}


#qa{
	width: 100%;
	padding-bottom: 80px;
}

#qa .qaWrap{
	display: flex;
	gap:30px;
}

#qa .qaWrap .qaBox{
	width: 35%;
	max-width: 270px;
}

#qa .qaWrap .qaBox .imgArea {
  overflow: hidden;
  border-radius: 1000px;
  aspect-ratio: 1 / 1;
  margin-bottom: 20px;
}

#qa .qaWrap .qaBox .imgArea img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .3s;
}

#qa .qaWrap .qaBox .txtArea .txt {
  font-size: 16px;
  font-weight: 700;
  color: #0F78E6;
  margin-bottom: 5px;
  text-align: center;
}

#qa .qaWrap .qaBox .txtArea .name {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

#qa .qaWrap .qaList{
	width: 65%;
}

#qa .qaWrap .qaList dl dt{
	font-size: 18px;
	font-weight: 700;
	color: #0F78E6;
	padding-left: 52px;
	display: flex;
	margin-bottom: 20px;
	position: relative;
}

#qa .qaWrap .qaList dl dt::before{
	content: "";
	width: 32px;
	height: 32px;
	background: #0F78E6;
	position: absolute;
	left: 0;
	border-radius: 1000px;
}

#qa .qaWrap .qaList dl dt::after{
	content: "Q";
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	position: absolute;
	left: 8px;
}

#qa .qaWrap .qaList dl dd{
	font-size: 16px;
	font-weight: 500;
	padding-left: 52px;
	display: flex;
	margin-bottom: 25px;
	position: relative;
	padding-bottom: 20px;
	border-bottom: 1px solid #E5E7EB;
	text-align: justify;
	line-height: 160%;
}

#qa .qaWrap .qaList dl dd::before{
	content: "";
	width: 32px;
	height: 32px;
	background: #2FBAFF;
	position: absolute;
	left: 0;
	border-radius: 1000px;
}

#qa .qaWrap .qaList dl dd::after{
	content: "A";
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	position: absolute;
	left: 11px;
  top: 2px;
}

@media (max-width: 840px){
#qa{
	padding-bottom: calc(100vw * 50 / 390);
}

#qa .qaWrap{
	flex-wrap: wrap;
	gap:calc(100vw * 20 / 390);
}

#qa .qaWrap .qaBox{
	width: 100%;
	max-width: calc(100vw * 270 / 390);
	margin: 0 auto;
}

#qa .qaWrap .qaBox .imgArea {
  margin-bottom: calc(100vw * 20 / 390);
}

#qa .qaWrap .qaBox .txtArea .txt {
  font-size: calc(100vw * 16 / 390);
  margin-bottom: calc(100vw * 5 / 390);
}

#qa .qaWrap .qaBox .txtArea .name {
  font-size: calc(100vw * 24 / 390);
}

#qa .qaWrap .qaList{
	width: 100%;
}

#qa .qaWrap .qaList dl dt{
	font-size: calc(100vw * 18 / 390);
	padding-left: calc(100vw * 52 / 390);
	margin-bottom: calc(100vw * 20 / 390);
}

#qa .qaWrap .qaList dl dt::before{
	width: calc(100vw * 32 / 390);
	height: calc(100vw * 32 / 390);
}

#qa .qaWrap .qaList dl dt::after{
	font-size: calc(100vw * 18 / 390);
	left: calc(100vw * 8 / 390);
}

#qa .qaWrap .qaList dl dd{
	font-size: calc(100vw * 16 / 390);
	padding-left: calc(100vw * 52 / 390);
	margin-bottom: calc(100vw * 25 / 390);
	padding-bottom: calc(100vw * 20 / 390);
	padding-right: calc(100vw * 10 / 390);
}

#qa .qaWrap .qaList dl dd::before{
	width: calc(100vw * 32 / 390);
	height: calc(100vw * 32 / 390);
}

#qa .qaWrap .qaList dl dd::after{
	font-size: calc(100vw * 18 / 390);
	left: calc(100vw * 11 / 390);
  top: calc(100vw * 2 / 390);
}
}



#schedule{
	width: 100%;
	padding: 80px 0;
	position: relative;
}

#schedule .bgGray{
	width: calc(100vw * 1000 / 390);
  height: 100%;
  background: #F7F7F7;
  z-index: -1;
  transform: translate(-50%, 0%);
  position: absolute;
  left: 50%;
  top: 0;
}

.scheduleTit{
	font-size: 40px;
	font-weight: 700;
	color: #0F78E6;
	display: flex;
  justify-content: center;
  margin-bottom: 70px;
  line-height: 32px;
}

.scheduleTit span{
	content: url("../../recruit/img/new/ico_schedule.svg");
	display: inline-block;
	width: 40px;
	margin-right: 10px;
	
}

#schedule .scheduleWrap{
	display: flex;
	gap: 30px;
}

#schedule .scheduleWrap .imgArea{
	width: 37%;
	display: flex;
	flex-direction: column;
	gap:20px;
}

#schedule .scheduleWrap .imgArea img{
	border-radius: 10px;
}

#schedule .scheduleWrap .scheduleList{
	width: 63%;
	display: flex;
	flex-direction: column;
	gap:20px;
	position: relative;
}

#schedule .scheduleWrap .scheduleList::before{
	content: "";
	width: 5px;
	height: 100%;
	background: #0F78E6;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	z-index: -1;
}

#schedule .scheduleWrap .scheduleList .scheduleOne{
	background: #fff;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap:10px;
}

#schedule .scheduleWrap .scheduleList .scheduleOne .tit{
	font-size: 25px;
	font-weight: 700;
	color: #0F78E6;
}

#schedule .scheduleWrap .scheduleList .scheduleOne .txt{
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
	text-align: justify;
}

@media (max-width: 840px){
#schedule{
	padding: calc(100vw * 50 / 390) 0;
}

.scheduleTit{
	font-size: calc(100vw * 32 / 390);
  margin-bottom: calc(100vw * 20 / 390);
  line-height: calc(100vw * 35 / 390);
}

.scheduleTit span{
	width: calc(100vw * 40 / 390);
	margin-right: calc(100vw * 10 / 390);
	
}

#schedule .scheduleWrap{
	flex-wrap: wrap;
	gap: calc(100vw * 30 / 390);
}

#schedule .scheduleWrap .imgArea{
	width: 100%;
	gap:calc(100vw * 20 / 390);
	order: 2;
}

#schedule .scheduleWrap .scheduleList{
	width: 100%;
	gap:calc(100vw * 20 / 390);
}

#schedule .scheduleWrap .scheduleList::before{
	width: calc(100vw * 5 / 390);
}

#schedule .scheduleWrap .scheduleList .scheduleOne{
	padding: calc(100vw * 20 / 390);
	gap:calc(100vw * 10 / 390);
}

#schedule .scheduleWrap .scheduleList .scheduleOne .tit{
	font-size: calc(100vw * 23 / 390);
}

#schedule .scheduleWrap .scheduleList .scheduleOne .txt{
	font-size: calc(100vw * 16 / 390);
	line-height: calc(100vw * 26 / 390);
}

 #voice.schedule .voiceList {
    /*padding: 0 calc(100vw * 60 / 390);*/
  }

#voice.schedule .voiceList .swiper-slide {
    /*max-width: calc(100vw * 390 / 390);*/
	max-width: calc(100vw * 270 / 390);
  }
 #voice.schedule {
    padding: calc(100vw * 50 / 390) 0 0;
  }
}


#guideline{
	width: 100%;
	padding: 0 0 80px;
}

#guideline .guideTit{
	font-size: 28px;
	font-weight: 700;
	color: #0F78E6;
	margin-bottom: 30px;
}
#guideline .guideimg {
	margin: auto;
    	display: block;
    	margin-bottom: 30px;
}
#guideline .periodtxt {
	margin: 10px auto 40px;
}
#guideline .periodtxt p {
	font-weight: 500;
}
#guideline .guideTable{
	display: grid;
	grid-template-columns: 150px 1fr;
	grid-template-columns: 180px 1fr;
	-webkit-font-feature-settings: normal;
  font-feature-settings: normal;
	border-radius: 4px;
	overflow: hidden;
	border:solid 1px #B9B9B9;
}

#guideline .guideTable dt{
	background: #F7F7F7;
	padding: 30px 20px;
	font-size: 16px;
	font-weight: 600;
	line-height: 140%;
	border-bottom:solid 1px #B9B9B9;
	border-right:solid 1px #B9B9B9;
	word-break: break-all;
}

#guideline .guideTable dt:last-of-type{
	border-bottom:none;
}

#guideline .guideTable dd{
	padding: 30px 20px;
	font-size: 16px;
	font-weight: 500;
	line-height: 140%;
	border-bottom:solid 1px #B9B9B9;
	text-align: justify;
	word-break: break-all;
}

#guideline .guideTable dd:last-of-type{
	border-bottom:none;
}
#guideline a.txtlink {
	word-break: break-all;
    	text-decoration: underline;
    	color: #0055AF;
    	transition: .3s;
	font-weight: 500;
}
#guideline a.txtlink:hover{
	color: #0096e1;
}

@media (max-width: 840px){
#guideline{
	padding: 0 0 calc(100vw * 40 / 390);
}

#guideline .guideTit{
	font-size: calc(100vw * 24 / 390);
	margin-bottom: calc(100vw * 20 / 390);
}

#guideline .guideTable{
	grid-template-columns: 1fr;
}

#guideline .guideTable dt{
	padding: calc(100vw * 20 / 390);
	font-size: calc(100vw * 16 / 390);
	line-height: 130%;
	border-right:none;
}

#guideline .guideTable dt:last-of-type{
	border-bottom:solid 1px #B9B9B9;
}

#guideline .guideTable dd{
	padding: calc(100vw * 20 / 390) calc(100vw * 15 / 390);
	font-size: calc(100vw * 16 / 390);
}
}