@charset"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* Author:Hiromi Yoshino | CIDARIO Inc.
* Author URI:http://cidario.co.jp
***********************************************************
*/

/* font html body
========================================================================================================
*/

html{
  font-size:62.5%;
}

body{ 
  background: #000;
  position: relative;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size:14px; font-size:1.4rem;
  color:#FFF;
  -webkit-text-size-adjust:100%;
  line-height: 100%;
  margin:0;
  padding:0;
}

@media print, screen and (min-width:1050px)  { 
  body{ 
	  font-size:16px; font-size:1.6rem;
 }
}

/* recruit index
======================================================================
*/

header{
  width:100%;
  margin: 0 auto;  
  position: fixed;
  top:0;
  left:0;
  z-index: 1000;
}

#entry-form header,
#interview header{
  background:rgba(0,0,0,1);
}

#interview header.short-header,
#entry-form header.short-header,
header.short-header{
  background:rgba(0,0,0,0.75);
}

header div.header-wrap{
  position: relative;
  width:95%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin: 20px auto;
  z-index: 1000;
}

@media print, screen and (min-width:1050px)  { 
  header div.header-wrap{
   position: relative;
   width:95%;
   max-width: 1400px;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   margin: 20px auto 30px auto;
   z-index: 1000;
  }
}

header div.header-wrap h1{
  width:20%;
}

@media print, screen and (min-width:1050px)  { 
  header div.header-wrap h1{
    width:20%;
  }
}

header div.header-wrap h1 img{
  width:100%;
  min-width: 120px;
  max-width: 165px;
}

header nav.global-nav{
  display: none;
}

@media print, screen and (min-width:1050px)  { 
  header nav.global-nav{
    display: block;
    /*width:50%;*/
  }

  header nav.global-nav ul{
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: flex-start;
  }
  
  header nav.global-nav ul li{
    margin: 0 25px 0 0;
  }
  
  @media print, screen and (min-width:1200px)  { 
    header nav.global-nav ul li{
      margin: 0 30px 0 0;
    }
  }
  
 header nav.global-nav ul li a{
   position: relative;
   display: inline-block;
   text-decoration: none;
   font-size: 1.5rem;
   color: #FFF;
 }
  
 header nav.global-nav ul li a::after {
  position: absolute;
  bottom: -6px;/*テキストからの距離*/
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #FFF;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
 }
  
 header nav.global-nav ul li a:hover::after {
  transform: scale(1, 1);
 }
  
 header nav.global-nav ul li a:visited{
    color: #FFF;
  } 

  header nav.global-nav ul li a span{
   display: block;
   font-family: 'League Spartan', sans-serif;
   font-size: 1.2rem;
   color: #FFF;
   margin: 4px 0 2px 0;
 }

  header nav.global-nav div.btn-job{ 
    width:220px;
    height: 80px;
    border-radius: 5px;
    background: linear-gradient( 120deg, #FF7373 0%, #9326FF 50%, #26FFFF 100%);
    position: absolute;
    top:-5px;
    right: 0;
    transition: 1s;
  }
  
   header nav.global-nav div.btn-job a{
     position: relative;
     width:100%;
     height: 100%;
     border-radius: 5px;
     display: flex;
     flex-flow: column;
     align-items: center;
     justify-content: center;
     font-family: 'League Spartan', sans-serif;   
     font-size: 1.3rem;
     color: #FFF;
     font-weight: 700;
     z-index: 1001;
  }
  
  header nav.global-nav div.btn-job a span{  
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2.2rem;
    line-height: 100%;
    margin: 3px 0;
    z-index: 1001;
   }
  
  header nav.global-nav div.btn-job::before{
    content: "";
    width:220px;
    height: 80px;
    border-radius: 5px;
    background: linear-gradient( 120deg, #26FFFF 0%, #9326FF 50%, #FF7373 100%);
    position: absolute;
    top:0;
    left:0;
    transition: 1s;
    z-index: 1000;
  }

  header nav.global-nav div.btn-job:hover::before{ 
    opacity: 0;
  }
}

/*------------------------------     gradation  --------------------------------------*/

span.gradation01{
  background: linear-gradient( 90deg, #FFFF4D 10%, #26FFFF 35%, #A64DFF 55%, #FF7A4D 85%);  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

span.gradation02{
  background: linear-gradient( 90deg, #26FFFF , #FFFF4D);  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

span.gradation03{
  background: linear-gradient( 70deg, #26FFFF 0%, #9326FF 50%, #FF7373 100%);  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*------------------------------     title  --------------------------------------*/

div.title-box{
  position: relative;
  width:100%;
  background:#FFF;
  text-align: center;
  color: #000;
  padding: 50px 0 30px 0;  
  z-index: 501;
}

@media print, screen and (min-width:640px)  {
  div.title-box{
    position: relative;
    width:100%;
    background:#FFF;
    text-align: center;
    color: #000;
    padding: 150px 0 60px 0;  
    z-index: 501;
  }
}

div.title-box span.sub-title{  
  font-family: 'League Spartan', sans-serif;
  font-size: 1.3rem;
}

@media print, screen and (min-width:640px)  {
  div.title-box span.sub-title{  
    font-family: 'League Spartan', sans-serif;
    font-size: 1.6rem;
  }
}

div.title-box h2{
  position: relative;
  width:100%;
  font-size: 2.6rem;
  text-align: center;
  font-weight: 900;
  padding: 0 0 10px 0;
  margin: 15px 0 0 0;
  z-index: 101;
}

@media print, screen and (min-width:640px)  {
  div.title-box h2{
   position: relative;
   width:100%;
   font-size: 3.6rem;
   text-align: center;
   font-weight: 900;
   padding: 0 0 30px 0;
   margin: 15px 0 0 0;
   z-index: 101;
  }
}

div.title-box h2 span{
  font-size:2.0rem;
}

@media print, screen and (min-width:640px)  {
  div.title-box h2 span{
    font-size: 3.2rem;
  }
}

div.title-box h2::after{
  content: "";
  width:1px;
  height: 50px;
  background-color: #000;
  position: absolute;
  bottom: -70px;
  left:50%; 
  z-index: 101;
}

@media print, screen and (min-width:640px)  {
  div.title-box h2::after{
   content: "";
   width:1px;
   height: 130px;
   background-color: #000;
   position: absolute;
   bottom: -160px;
   left:50%; 
   z-index: 101;
  }
}

div.title-box p{    
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background:url("/images/recruit/recruit-logo02.png") no-repeat 50% 50%;
  background-size:90px;
  font-size: 1.6rem;
  line-height: 130%;
  text-align: center;  
  font-weight: 900;
  margin: 50px 0 0 0; 
  z-index: 100;
}

@media print, screen and (min-width:640px)  {
  div.title-box p{    
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 200px;
   background:url("/images/recruit/recruit-logo02.png") no-repeat 50% 50%;
   background-size:200px;
   font-size: 2.4rem;
   text-align: center;  
   font-weight: 900;
   margin: 110px 0 0 0; 
   z-index: 100;
  }
}

/*------------------------------     animation  --------------------------------------*/

/* 下から */
.fadeUpTrigger{
 opacity:0;
}

.fadeUpTop{
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}

.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(30px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*------------------------------     layout  --------------------------------------*/

div#message-wrap01{
  position: relative;
  width:100%;
  height: 100vh;  
  display: flex;
  align-items: center;
}

@media print, screen and (min-width:640px)  {
  div#message-wrap01{
   position: relative;
   width:100%;
   height: 100vh;
  }
}

div#message-wrap01 div.bg-img{
  width:100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
}

div#message-wrap01 div.bg-img img{
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position:70% 100%;
}

@media print, screen and (min-width:640px)  {
  div#message-wrap01 div.bg-img img{
   width:100%;
   height: 100%;
   object-fit: cover;
   object-position:100% 0;
  }
}

div#message{
  position: relative;
  width:100%;
  display: flex;
  align-items: center;
  padding:0;
  margin: 0;
}

@media print, screen and (min-width:640px)  { 
  div#message{
   position: relative;
   width:100%;
   display: flex;
   align-items: center;
   padding:0;
   margin: 0;
  }
}

div#message div.bg-img{
  width:100%;
  height: 100%;
  position: absolute;
  bottom:0;
  left:0;
}

@media print, screen and (min-width:640px)  {
div#message div.bg-img{
  width:100%;
  height: 100%;
  position: absolute;
  top:-80px;
  bottom: inherit;
  left:0;
  }
}

div#message div.bg-img img{
   width:100%;
   height: 100%;
   object-fit: cover;
   object-position:100% 100%;
}

@media print, screen and (min-width:640px)  { 
  div#message div.bg-img img{
   width:100%;
   height: 100%;
   object-position:90% 0%;
  }
}

.z-depth-1{
  position: relative;
  z-index: 101;
}

.z-depth-2{
  position: relative;
  z-index: 102;
}

/*------------------------------     aside  --------------------------------------*/

aside.scroll{
  width:100%;
   /*min-height: 100px;
  background: linear-gradient( rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 15%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.8) 85%,rgba(0,0,0,0) 100%);*/
  background: #000;
  z-index: 500;
  position: absolute;
  bottom: 0;
  left:0;
  padding:30px 0;
}

@media print, screen and (min-width:640px)  { 
  aside.scroll{
    width:100%;
    position: absolute;
    bottom: 0;
    left:0;
    padding:30px 0;
  }
}

aside.scroll span{
  display: none;
  /*font-size: 1.6rem;
  text-align: center;
  padding: 0 0 10px 0;
  margin: 0 auto;  */
}

@media print, screen and (min-width:640px)  { 
aside.scroll span{
  display: block;
  font-size: 1.6rem;
  text-align: center;
  padding: 0 0 10px 0;
  margin: 0 auto;  
  }
}

aside.scroll div.arrow{
  position: relative;
  margin: 0 auto;  
}

aside.scroll div.arrow::after{
  display: none;
  /*content: "";
  display: block;
  width:1px;
  height: 20px;
  background-color: #FFF;
  position: absolute;
  top:0;
  left:50%;
  animation: scroll 1.5s cubic-bezier(1, 0, 0, 1) infinite;*/
}

@media print, screen and (min-width:640px)  {     
  aside.scroll  div.arrow::after{
    content: "";  
    display: block;
    width:1px;
    height: 20px;
    background-color: #FFF;
    position: absolute;
    top:0%;
    left:50%;  
    animation: scroll 1.5s cubic-bezier(1, 0, 0, 1) infinite;
  }
}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.fadeOutTrigger{
 opacity:1;
}

.fadeOut{
  animation-name:fadeOutAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeOutAnime{
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/*------------------------------     message  --------------------------------------*/

section.message01-box{
  position: relative;
  width:90%;
  padding: 40px 0 0 0;
  margin: 0 auto 80px auto;
  z-index: 501;
}

@media print, screen and (min-width:640px)  { 
  section.message01-box{
   width:80%;
   padding: 0;
   margin: 0 auto;
  }
}

@media print, screen and (min-width:1400px)  { 
  section.message01-box{
   width:80%;
   max-width:1200px;
   padding: 0;
   margin: 0 auto;
  }
}

section.message01-box span.sub-txt{
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFF;
  margin: 0 0 20px 10px;
}

@media print, screen and (min-width:640px)  { 
 section.message01-box span.sub-txt{
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    color: #FFF;
    margin: 0 0 20px 10px;
  }
}

section.message01-box h2{
  width:100%;
  font-size: 5.0rem;
  font-weight: 700;
  line-height: 100%;
  margin: 0 0 40px 0;
}

@media print, screen and (min-width:640px)  { 
  section.message01-box h2{
   width:100%;
   font-size: 9.0rem;
   margin: 0 0 120px 0;
  }
}

section.message01-box h2 span.s-txt{
  font-size: 3.0rem;
}

@media print, screen and (min-width:640px)  { 
  section.message01-box h2 span.s-txt{
    font-size: 7.5rem;
  }
}

section.message01-box h2 + p{
  line-height:200%;
}

@media print, screen and (min-width:640px)  { 
  section.message01-box h2 + p{
    line-height: 250%;
  }
}

section.message02-box{
  position: relative;
  width:90%;
  padding: 40px 0;
  margin: 0 auto;   
}

@media print, screen and (min-width:640px)  { 
  section.message02-box{
    position: relative;
    width:90%;
    padding:160px 0;
    margin: 0 auto;
  }
}

@media print, screen and (min-width:1050px)  { 
  section.message02-box{
   position: relative;
   width:95%;
   max-width:1200px;
   display: flex;
   flex-flow: row nowrap;
   padding:50px 0 150px 0;
   margin: 0 auto; 
  }
}

section.message02-box div.message02-01{
  width:90%;
  text-align: center;
  margin: 0 auto;
}

@media print, screen and (min-width:1050px)  { 
  section.message02-box div.message02-01{
    width:38%;
    text-align: center;
    margin: 0;
  }
}

section.message02-box div.message02-02{
  width:100%;
  padding: 0;  
  margin: 0 auto;
}

@media print, screen and (min-width:1050px)  { 
  section.message02-box div.message02-02{
    width:62%;
    padding: 0 0 0 8%;
    margin: 0;
  }
}

section.message02-box div.message02-01 h2{
  line-height: 110%;
  font-size: 2.4rem;
  font-weight: 900;
  margin: 0 0 40px 0;
}

@media print, screen and (min-width:640px)  { 
  section.message02-box div.message02-01 h2{
    font-size: 3.0rem;
    margin: 10px 0 60px 0;
  }
}
  
@media print, screen and (min-width:1050px)  { 
  section.message02-box div.message02-01 h2{
    font-size: 3.0rem;
    margin: 10px 0 40px 0;
  }
}

section.message02-box div.message02-01 h2 span{
   display: block;
   margin: 0 0 15px 0;
}

@media print, screen and (min-width:1050px)  { 
  section.message02-box div.message02-01 h2 span{
     display:block;
     margin: 0 0 30px 0;
  }
}

section.message02-box div.message02-02 p{  
  font-size: 1.4rem;
  line-height:200%;
}

@media print, screen and (min-width:1050px)  { 
  section.message02-box div.message02-02 p{  
    font-size: 1.5rem;
    line-height: 250%;
  }
}

section.message02-box div.message02-02 p + p{
  margin: 30px 0 0 0;
}

@media print, screen and (min-width:1050px)  { 
  section.message02-box div.message02-02 p + p{
    margin: 50px 0 0 0;
  }
}

/*------------------------------  company  --------------------------------------*/

section.company-box{
  position: relative;
  width:100%;
  margin: 0 auto;
}

@media print, screen and (min-width:640px)  { 
  section.company-box{
    position: relative;
    width:100%;
    margin: 0 auto 80px auto;
  }
}

div.company-bg{
  width:100%;
  height:100%;
  position: absolute;
  top:180px;
  left:0;
}

@media print, screen and (min-width:640px)  { 
  div.company-bg{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
  }
}

div.company-bg img{
  width:100%;
  object-fit: cover;
  object-position: top center;
}

@media print, screen and (min-width:640px)  {
  div.company-bg img{
   width:100%;
   height:100%;
   object-fit: cover;
   object-position: top center;
  }
}

section.company-box div.company-wrap{
  width:90%;
  padding: 60px 0 40px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:640px)  { 
  section.company-box div.company-wrap{
    width:95%;
    max-width:1200px;
    padding: 160px 0 0 0;
    margin: 0 auto;
  }
}

section.company-box div.company-wrap h3{
  font-size: 2.8rem;
  font-weight: 900;
  text-align: center; 
  line-height: 130%;
  margin: 0 0 40px 0;
}

@media print, screen and (min-width:640px)  { 
  section.company-box div.company-wrap h3{
    font-size: 5.0rem;
    font-weight: 900;
    text-align: center;
    margin: 0 0 80px 0;
  }
}

section.company-box div.company-wrap h3 + p{
  text-align: center;
  margin: 40px 0 30px 0;
}

@media print, screen and (min-width:640px)  {
  section.company-box div.company-wrap h3 + p{
    text-align: center;
    margin: 80px 0 60px 0;
  }
}

section.company-box div.company-wrap h3 span span.txt{
  font-size: 3.0rem;
}

@media print, screen and (min-width:640px)  { 
  section.company-box div.company-wrap h3 span span.txt{
     font-size: 4.0rem;
   }
}

section.company-box div.company-container{  
  width:100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}

@media print, screen and (min-width:640px)  {
  section.company-box div.company-container{  
   width:100%;
   max-width:1200px;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
  }
}

section.company-box div.company-container div{
  margin: 0 0 12px 0;	
  opacity: 0;
}

section.company-box div.company-container div div{ 
  height: 100%;
  background: #FFF;
  padding: 0 20px 20px 20px;
  margin: 0 auto;
}

@media print, screen and (min-width:640px)  {
  section.company-box div.company-container div div{ 
    height: 100%;
    background: #FFF;
    padding: 0 20px 30px 20px;
    margin: 0 auto;
  }
}

section.company-box div.company-container div#number13  div,
section.company-box div.company-container div#number16  div,
section.company-box div.company-container div#number17  div,
section.company-box div.company-container div#number24  div{ 
  padding: 0;
}

section.company-box div.company-container div h4{  
  position: relative;
  text-align: center;
  padding: 30px 0 0 0;
  z-index: 500;
}

@media print, screen and (min-width:640px)  {
section.company-box div.company-container div h4{  
  position: relative;
  text-align: center;
  padding: 50px 0 0 0;
  z-index: 500;
  }
}

section.company-box div.company-container div h4 span{ 
  position: relative;
  display: inline-block;
  font-size: 2.0rem;
  font-weight: 900;
  text-align: center;
  color: #000;
  padding: 0 0 20px 0;
}

@media print, screen and (min-width:640px)  {
  section.company-box div.company-container div h4 span{ 
   position: relative;
   display: inline-block;
   font-size: 2.4rem;
   font-weight: 900;
   text-align: center;
   color: #000;
   padding: 0 0 20px 0;
  }
}
section.company-box div.company-container div h4 span::after{  
  content: "";
  width:100%;
  height: 1px;
  background-color: #000;
  position: absolute;
  bottom: 0;
  left:0;
}

section.company-box div.company-container div figure{  
  display: flex;
  align-items: center;
  justify-content: center;
}

section.company-box div.company-container div figure{  
  display: flex;
  align-items: center;
  justify-content: center;
}

section.company-box div.company-container div#number11 div figure{ 
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

@media print, screen and (min-width:640px)  {
  section.company-box div.company-container div figure{  
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  section.company-box div.company-container div#number11 div figure{ 
  display: flex;
  flex-flow: row;
  justify-content: center;
  }
}

section.company-box div.company-container div figure img{
  width:100%;
}

section.company-box div.company-container div p{  
  width:90%;
  background: #EEE;
  color: #000;
  font-weight: 700;
  text-align: center;
  padding: 15px 5px;
  margin: 30px auto 0 auto;
}

/*背景色が伸びて出現 共通*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;
  padding: 0;	
}

@keyframes bgextendAnimeBase{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;  
  }
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1.0s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
  }
}

/*--------- 左から --------*/

.bgLRextend::before{
	 animation-name:bgLRextendAnime;
	 animation-duration:1.0s;
	 animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #222;/*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}


div#number01,
div#number02,
div#number03,
div#number04,
div#number05,
div#number06,
div#number07,
div#number08,
div#number09,
div#number10{
  width:100%;
}


@media print, screen and (min-width:640px)  {
div#number01{
  width:59%;
}

div#number02{
  width:40%;
}

div#number03{
  width:45%;
}

div#number04{
  width:54%;
}

div#number05{
  width:51%;
}

div#number06{
  width:48%;
}

div#number07{
  width:41%;
}

div#number08{
  width:58%;
}

div#number09{
  width:54%;
}

div#number10{
  width:45%;
  }
}

div#number01 figure img{
  max-width:575px;
}

div#number02 figure img{
  max-width:425px;
}

div#number03 figure img{
  max-width:445px;
}

div#number04 figure img{
  max-width:500px;
}

div#number05 figure img{
  max-width:570px;
}

div#number06 figure img{
  max-width:500px;
}

div#number07 figure img{
  max-width:440px;
}

div#number08 figure img{
  max-width:595px;
}

div#number09 figure img{
  max-width:555px;
}

div#number10 figure img{
  max-width:482px;
}


/*------------------------------  member  --------------------------------------*/

section.member-box{
  position: relative;
  width:100%;
  margin: 0 auto;
}

@media print, screen and (min-width:640px)  { 
  section.member-box{
    position: relative;
    width:100%;
    margin: 0 auto 0px auto;
  }
}

div.member-bg{
  width:100%;
  height:100%;
  position: absolute;
  top:280px;
  left:0;
}

@media print, screen and (min-width:640px)  { 
  div.member-bg{
    width:100%;
    height:100%;
    position: absolute;
    top:-600px;
    left:0;
  }
}

div.member-bg img{
  width:100%;
  object-fit: cover;
  object-position: top center;
}

@media print, screen and (min-width:640px)  {
  div.member-bg img{
   width:100%;
   height:100%;
   object-fit: cover;
   object-position: top center;
  }
}

section.member-box div.member-wrap{
  width:90%;
  padding: 60px 0 0 0;
  margin: 0 auto;
}

@media print, screen and (min-width:640px)  { 
  section.member-box div.member-wrap{
    width:95%;
    max-width:1200px;
    padding: 160px 0 0 0;
    margin: 0 auto;
  }
}

section.member-box div.member-wrap h3{
  font-size: 2.8rem;
  font-weight: 900;
  text-align: center; 
  line-height: 130%;
  margin: 0 0 40px 0;
}

@media print, screen and (min-width:640px)  { 
  section.member-box div.member-wrap h3{
    font-size: 5.0rem;
    font-weight: 900;
    text-align: center;
    margin: 0 0 80px 0;
  }
}

section.member-box div.member-wrap h3 + p{
  text-align: center;
  margin: 40px 0 30px 0;
}

@media print, screen and (min-width:640px)  {
  section.member-box div.member-wrap h3 + p{
    text-align: center;
    margin: 80px 0 60px 0;
  }
}

section.member-box div.member-wrap h3 span span.txt{
  font-size: 3.0rem;
}

@media print, screen and (min-width:640px)  { 
  section.member-box div.member-wrap h3 span span.txt{
     font-size: 4.0rem;
   }
}

section.member-box div.member-container{  
  width:100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}

@media print, screen and (min-width:640px)  {
  section.member-box div.member-container{  
   width:100%;
   max-width:1200px;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
  }
}

section.member-box div.member-container div{
  margin: 0 0 12px 0;	
  opacity: 0;
}

section.member-box div.member-container div div{ 
  height: 100%;
  background: #FFF;
  padding: 0 20px 20px 20px;
  margin: 0 auto;
}

@media print, screen and (min-width:640px)  {
  section.member-box div.member-container div div{ 
    height: 100%;
    background: #FFF;
    padding: 0 20px 30px 20px;
    margin: 0 auto;
  }
}

section.member-box div.member-container div#number13  div,
section.member-box div.member-container div#number15  div,
section.member-box div.member-container div#number16  div,
section.member-box div.member-container div#number17  div,
section.member-box div.member-container div#number24  div{ 
  padding: 0;
}

section.member-box div.member-container div h4{  
  position: relative;
  text-align: center;
  padding: 30px 0 0 0;
  z-index: 500;
}

@media print, screen and (min-width:640px)  {
section.member-box div.member-container div h4{  
  position: relative;
  text-align: center;
  padding: 50px 0 30px 0;
  z-index: 500;
  }
}

@media print, screen and (min-width:900px)  {
section.member-box div.member-container div h4{  
  position: relative;
  text-align: center;
  padding: 50px 0 0 0;
  z-index: 500;
  }
}

section.member-box div.member-container div h4 span{ 
  position: relative;
  display: inline-block;
  font-size: 2.0rem;
  font-weight: 900;
  text-align: center;
  color: #000;
  padding: 0 0 20px 0;
}

@media print, screen and (min-width:640px)  {
  section.member-box div.member-container div h4 span{ 
   position: relative;
   display: inline-block;
   font-size: 2.4rem;
   font-weight: 900;
   text-align: center;
   color: #000;
   padding: 0 0 20px 0;
  }
}
section.member-box div.member-container div h4 span::after{  
  content: "";
  width:100%;
  height: 1px;
  background-color: #000;
  position: absolute;
  bottom: 0;
  left:0;
}

section.member-box div.member-container div figure{  
  display: flex;
  align-items: center;
  justify-content: center;
}

@media print, screen and (min-width:640px)  {
  section.member-box div.member-container div figure{    
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
  
 section.member-box div.member-container div#number11 div figure{ 
    display: flex;
    flex-flow: row wrap;
    justify-content: center;   
    margin: 0 auto;
}

@media print, screen and (min-width:640px)  {
  section.member-box div.member-container div#number11 div figure{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;   
  }
}

section.member-box div.member-container div figure img{
  width:100%;
}

section.member-box div.member-container div p{  
  width:90%;
  background: #EEE;
  color: #000;
  font-weight: 700;
  text-align: center;
  padding: 15px 5px;
  margin: 30px auto 0 auto;
}

div#number11,
div#number12,
div#number13,
div#number14,
div#number15,
div#number16,
div#number17,
div#number18,
div#number19,
div#number20,
div#number21,
div#number22,
div#number23{
  width:100%;
}


@media print, screen and (min-width:640px)  {
div#number11{
  width:100%;
}

div#number12{
  width:40%;
}

div#number13{
  width:31%;
}

div#number14{
  width:27%;
}

div#number15{
  width:68%;  
}

div#number16{
  width:31%;
}

div#number17{
  width:36%;
}

div#number18{
  width:26%;
}

div#number19{
  width:36%;
}

div#number20{
  width:54%;
  }
  
div#number21{
  width:45%;
  }
  
div#number22{
  width:33%;
  }
  
div#number23{
  width:38%;
  }

div#number24{
  width:27%;
  }
}

div#number11 figure img.number11-01{
  display: block;
  width:100%;
  max-width: 300px;
  margin:  0 auto;
}

div#number11 figure img.number11-02{  
  display: block;
  width:57.5%;
}

div#number11 figure img.number11-03{  
  display: block;  width:100%;
  width:41%;
}

@media print, screen and (min-width:640px)  {
  div#number11 figure img.number11-01{
    display: block;  
    width:27.5%;
    max-width:330px;
    margin: -35px 0 0 0;
  }

  div#number11 figure img.number11-02{  
    display: block;  
    width:38%;
    max-width:460px;
    margin: 0 0 0 30px;
  }

  div#number11 figure img.number11-03{  
    display: block;
    width: 27.5%;
    max-width:330px;  
    margin: 0 0 0 30px;
  }
}

div#number12 figure img{
  max-width:440px;
}

div#number13 figure{
  width:100%;
  height: 100%;
}

div#number13 figure img{
  display: block;
  width:100%;
  height: 100%;
  object-fit: cover;
}

div#number14 figure img{
  max-width:260px;
}

div#number15 figure img{  
  display: block;
  width:95%;
  margin: 0;
}

div#number16 figure img{
  width: 90%;
  max-width: 370px;
}

div#number17 figure{
  width:100%;
  height: 100%;
}

div#number17 figure img{
  width:100%;
  height: 100%;
  object-fit: cover;
}

div#number18 figure img{
  max-width:260px;
}

div#number19 figure img{
  max-width:370px;
}

div#number21 figure img{
  max-width:480px;
}

div#number22 figure img{
  max-width:378px;
}

div#number23 figure img{
  max-width:410px;
}

div#number24 figure{
  width:100%;
  height: 100%;
}

div#number24 figure img{
  width:100%;
  height: 100%;
  object-fit: cover;
}

@media print, screen and (min-width:640px)  {
div#number12 figure img{
  max-width:440px;
}

div#number13 figure{
  width:100%;
  height: 100%;
}

div#number13 figure img{
  display: block;
  width:100%;
  height: 100%;
  object-fit: cover;
}

div#number14 figure img{
  max-width:260px;
}

div#number15 figure img{  
  display: block;
  max-width:730px;  
  margin: -55px 0 0 0;
}

div#number16 figure img{
  width: 100%;
}

div#number17 figure{
  width:100%;
  height: 100%;
}

div#number17 figure img{
  width:100%;
  height: 100%;
  object-fit: cover;
}

div#number18 figure img{
  max-width:260px;
}

div#number19 figure img{
  max-width:370px;
}

div#number20 figure img{
  max-width:610px;
}

div#number21 figure img{
  max-width:480px;
}

div#number22 figure img{
  max-width:378px;
}

div#number23 figure img{
  max-width:410px;
}

div#number24 figure{
  width:100%;
  height: 100%;
}

div#number24 figure img{
  width:100%;
  height: 100%;
  object-fit: cover;
  }
}

 section.member-box div.interview-container{ 
   margin: 30px auto 0 auto;
}

@media print, screen and (min-width:640px)  { 
  section.member-box div.interview-container{ 
    margin: 80px auto 0 auto;
  }
}

 section.member-box div.interview-container h3{ 
   text-align: center;
   font-size: 2.6rem;
   font-weight: 900;
   margin: 0 auto;
}

@media print, screen and (min-width:640px)  { 
  section.member-box div.interview-container h3{ 
    font-size: 5.0rem;
  }
}

section.member-box div.interview-container h3 + p{ 
  font-size: 2.0rem;
  color: #FFF;
  margin: 0 auto;
}

/*------------------------------     faq  --------------------------------------*/

section.faq-box{
  position: relative;
  width:100%;
  margin: 0 auto;
}

section.faq-box div.faq-bg{
  width:100%;
  height:100%;
  position: absolute;
  top:240px;
  left:0;
}

@media print, screen and (min-width:640px)  { 
  section.faq-box div.faq-bg{
    width:100%;
    height:100%;
    position: absolute;
    top:-1400px;
    left:0;
  }
}

section.faq-box div.faq-bg img{
  width:100%;
}

section.faq-box div.faq-wrap{
  width:90%;
  padding: 60px 0 40px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:640px)  {
section.faq-box div.faq-wrap{
  width:95%;
  max-width: 1200px;
  padding: 160px 0;
  margin: 0 auto;
  }
}

section.faq-box div.faq-wrap h3{
  font-size: 3.0rem;
  font-weight: 900;
  text-align: center;
}

@media print, screen and (min-width:640px)  {
  section.faq-box div.faq-wrap h3{
   font-size: 6.0rem;
   font-weight: 900;
   text-align: center;
  }
}

section.faq-box div.faq-wrap h3 + p{
  text-align: center;
  margin: 40px 0 30px 0;
}

@media print, screen and (min-width:640px)  {
section.faq-box div.faq-wrap h3 + p{
  text-align: center;
  margin: 80px 0 60px 0;
  }
}

section.faq-box div.faq-wrap dl.recruit-faq{
  width:100%;
  background: #FFF;
  border-radius: 5px;
  padding:0;
  margin: 0 0 10px 0;
}

section.faq-box div.faq-wrap dl.recruit-faq dt{
  width:90%;
  min-height: 75px;
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  line-height: 150%;
  font-weight: 700;
  color: #000;
  padding: 30px 0;
  margin: 0 auto;
  cursor: pointer;
}

@media print, screen and (min-width:640px)  {
section.faq-box div.faq-wrap dl.recruit-faq dt{
  width:100%;
  min-height:120px;
  display: flex;
  align-items: center;
  font-size: 2.4rem;
  padding: 0 65px;
  }
}

section.faq-box div.faq-wrap dl.recruit-faq dt span{
  display: inline-block;
  position: relative;
  font-size: 2.6rem;
  font-weight: 700;
  color: #E96390;
  padding: 0 0 15px 0;
  margin: 0 20px 0 0;
}

@media print, screen and (min-width:640px)  {
section.faq-box div.faq-wrap dl.recruit-faq dt span{
  font-size: 4.0rem;
  padding: 0 0 15px 0;
  margin: 0 30px 0 0;
}
}

section.faq-box div.faq-wrap dl.recruit-faq dt span::after{
  content: "";
  width:10px;
  height: 10px;
  background: #E96390;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  bottom: -12px;
  left:50%;
  transform: translateX(-50%);
}

section.faq-box div.faq-wrap dl.recruit-faq dd{
  display: none;
}

section.faq-box div.faq-wrap dl.recruit-faq dd{
  width:90%;
  color: #666;  
  line-height: 200%;
  padding: 0 0 30px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:640px)  {
section.faq-box div.faq-wrap dl.recruit-faq dd{
  width:90%;
  color: #666;  
  line-height: 200%;
  padding: 0 0 40px 90px;
  margin: 0 auto;
  }
}

/*------------------------------     job  --------------------------------------*/

section.job-box{
  position: relative;
  width:100%;
  margin: 0 auto;
}

section.job-box div.job-bg{
  width:100%;
  height:100%;
  position: absolute;
  top:240px;
  left:0;
}

@media print, screen and (min-width:640px)  { 
  section.job-box div.job-bg{
    width:100%;
    height:100%;
    position: absolute;
    top:-1760px;
    left:0;
  }
}

section.job-box div.job-bg img{
  width:100%;
}

section.job-box div.job-wrap{
  width:90%;
  padding: 60px 0 40px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:640px)  { 
  section.job-box div.job-wrap{
   width:95%;
   max-width: 1200px;
   padding: 160px 0 120px 0;
   margin: 0 auto;
  }
}

section.job-box div.job-wrap h3{
  font-size: 2.8rem;
  font-weight: 900;
  text-align: center;
}

@media print, screen and (min-width:640px) {
  section.job-box div.job-wrap h3{
   font-size: 5.0rem;
   font-weight: 900;
   text-align: center;
  }
}

section.job-box div.job-wrap h3 + p{
  text-align: center;
  margin: 40px 0 30px 0;
}

@media print, screen and (min-width:640px)  {
  section.job-box div.job-wrap h3 + p{
    text-align: center;
    margin: 80px 0 60px 0;
  }
}

section.job-box div.job-wrap h3 span span.txt{
  font-size: 3.0rem;
}

@media print, screen and (min-width:640px)  {
  section.job-box div.job-wrap h3 span span.txt{
   font-size: 4.0rem;
  }
}

/*---- job -------*/

section.job-box div.job-wrap div.job{
	position: relative;
	width:100%;
	background: #00ACCA;
	display: flex;
	flex-flow: column nowrap;
	padding: 40px 0 25px 0;
	margin: 1px auto 0 auto;
	cursor: pointer;
	transition: background 1s;
}

@media print, screen and (min-width:1050px) { 
 section.job-box div.job-wrap div.job{
	 position: relative;
	 display: flex;
	 flex-flow: row nowrap;
	 align-items: center;
	 padding: 30px 0;
	 margin: 10px auto 0 auto;
	}
}

section.job-box div.job-wrap div.job:hover{
	background: #33BDD5;
}

@media print, screen and (min-width:640px) {
   section.job-box div.job::after{
	 content: "";
	 width:60px;
	 height: 2px;
	 background: #FFF;
	 position: absolute;
	 top:50%;
	 right: 50px;
 }

  section.job-box div.job::before{
	 content: "";
	 width:60px;
	 height: 2px;
	 background: #FFF;
	 position: absolute;
	 top:50%;
	 right: 50px;
	 transform:rotate(90deg);
	  transition: 0.3s;
	}
}

 section.job-box div.active::before {
  opacity: 0;
  transition: 0.3s;
}

 section.job-box div.job h4{
	 width:90%;
	 font-size: min(5.0vw, 2.4rem);
	 font-weight: 700;
	 letter-spacing: 0.05em;
   color: #FFF;
   line-height: 130%;
	 text-align: center;
	 margin: 0 auto 32px auto;
}

@media print, screen and (min-width:640px) and (max-width:1049px) {
   section.job-box div.job h4{
	   width:100%; 
     font-size: min(5.0vw, 2.6rem);
     text-align: left;
		 margin: 0 0 10px 80px;
	}
}

@media print, screen and (min-width:1050px) {
   section.job-box div.job h4{
	   width:40%; 
     font-size: min(5.0vw, 2.6rem);
	   text-align: center;
		 margin: 0;
	}
}

section.job-box div.job h4 span{
  display: block;
  font-size: 2.0rem;
}

 section.job-box div.job div{
	width:100%;
  padding: 0 10%;
	font-weight: 500;
}

@media print, screen and (min-width:640px) and (max-width:1049px){
  section.job-box div.job div{
	 width:80%;
	 padding: 0 40px 0 80px;
	}
}

@media print, screen and (min-width:1050px) {
  section.job-box div.job div{
	 width:60%;
	 padding: 0;
	}
}

 section.job-box div.job div p{
   display: none;
  /*width: 100%;
	font-size: 1.6rem;
  font-weight: 700;
   letter-spacing: 0.05em;
	text-align: center;
  line-height: 150%;
  color: #FFF;
	margin: 0 auto 20px auto;
  padding: 0 10%;*/
}

@media print, screen and (min-width:640px) and (max-width:1049px){
  section.job-box div.job div p{	
    display: none;
    /*font-size: min(3.5vw, 1.8rem);
	  text-align: left;
	  padding: 0;
	  margin: 10px 0 0 0;*/
  }
}

@media print, screen and (min-width:1050px) {
  section.job-box div.job div p{
    display: block;
    width: 100%;
    font-size: min(3.5vw, 2.0rem);
    font-weight: 700;
    letter-spacing: 0.05em;
	  text-align: left;
    color: #FFF;
	  padding: 0;
	  margin: 10px 0 0 0;
 }
}

 section.job-box div.job div p.lead02{
   display: none;
}

@media print, screen and (min-width:1050px) {
 section.job-box div.job div p.lead02{
   display: block;
   width: 80%;
	 font-size: 1.4rem;
   color: #FFF;
   margin: 15px 0 0 0;
  }
}

 section.job-box div.job div dl{
	display: none;
}

@media print, screen and (min-width:640px) and (max-width:1049px) {
 section.job-box div.job div dl{
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	margin: 20px 0;
	}
}

@media print, screen and (min-width:1050px) {
 section.job-box div.job div dl{
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	margin: 15px 0 10px 0;
	}
}

section.job-box div.job div dl dt{
	 width:70px;
	 background: #D60039;
 	 font-size: 1.3rem;
	 color: #FFF;
	 text-align: center;
	 padding: 7px 5px;
	 margin: 10px 0 0 0;
}

@media print, screen and (min-width:1050px) {
 section.job-box div.job div dl dt{
	 font-size: 1.4rem;
	}
}

 section.job-box div.job div dl dd{
	 width:calc( 100% - 70px );
	 font-size: 1.4rem;
	 font-weight: 400;
   line-height: 180%;
   color: #FFF;
	 padding: 0 0 0 15px;
	 margin: 10px 0 0 0;
}

@media print, screen and (min-width:1050px) {
  section.job-box div.job div dl dd{
	 font-size: 1.6rem;
	}
}

 section.job-box div.job div span{
  width:150px;
  height: 32px;
  border-radius: 20px;
	background-color:#D60039;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
	color: #FFF;
  margin: 0 auto;
}

@media print, screen and (min-width:640px) {
   section.job-box div.job div span{
	  display: none;
	}
}

/* -- job-detail --*/

section.job-box div.job-detail{
	display: none;
	width:100%;
  background: #FFF;
  color: #000;
	padding: 50px 0 50px 0;
	margin: 0 auto 30px auto;
}

@media print, screen and (min-width:1050px) {
section.job-box div.job-detail{
	 display: none;
	 width:100%;
	 padding: 70px 0;
	 margin: 0 auto 40px auto;
	}
}

section.job-box div.job-detail dl{    
  width:90%;
	display: flex;
	flex-flow: column wrap;
	font-size: 1.5rem;
	line-height: 150%;    
  margin: 0 auto;
}

@media print, screen and (min-width:640px) {
 section.job-box div.job-detail dl{
	  display: flex;
	  flex-flow: row wrap;
	  font-size: 1.6rem;
	  line-height: inherit;
	}
}

section.job-box div.job-detail dl dt{
	width:100%;
	/*border-bottom: 1px solid #CCC;*/
	font-weight: 700;
	text-align: center;
  line-height: 180%;
	padding: 0 5% 15px 5%;
	margin: 0 auto 15px auto;
}

@media print, screen and (min-width:640px) {
  section.job-box div.job-detail dl dt{
	 width:30%;
	 border-bottom: 1px solid #CCC;
	 font-weight: 700;
	 text-align: center;
	 padding: 0 0 15px 0;
	 margin: 0 0 30px 0;
	}
}

section.job-box div.job-detail dl dd{
	width:100%;
	border-bottom: 1px solid #CCC;
  line-height: 150%;
	padding: 0 5% 30px 5%;
	margin: 0 auto 30px auto;
}

@media print, screen and (min-width:640px) {
 section.job-box div.job-detail dl dd{
	 width:70%;
	 border-bottom: 1px solid #CCC;
	 padding: 0 0 30px 0;
	 margin: 0 0 30px 0;
	}
}

section.job-box div.job-detail dl dd div{
  background-color: #F7F7F7;
  padding: 30px;
	margin: 30px 0 0 0;
}

@media print, screen and (min-width:1050px) {
  section.job-box div.job-detail dl dd div{
	   margin: 20px 0 0 0;
  }
}

section.job-box div.job-detail dl dd div strong{
  position: relative;
  background:linear-gradient(transparent 60%, #FFFF00 0%);
  font-weight: 700;
  margin: 0;
}

section.job-box div.job-detail dl dd div p{ 
  line-height: 180%;
  margin: 20px 0 0 0;
}

section.job-box div.job-detail dl dd span{
	display: block; 
  line-height: 150%;
	margin: 10px 0 0 0;
}

@media print, screen and (min-width:640px) {
  section.job-box div.job-detail dl dd span{
	 display: block;
	 margin: 10px 0 0 0;
  }
}

section.job-box div.job-detail dl dd span + span{
	margin:  10px 0 0 0;
}

section.job-box div.job-detail dl dd span + ul{
	margin: 10px 0 0 0;
}

section.job-box div.job-detail dl dd ul li{
  line-height: 150%;
}

section.job-box div.job-detail dl dd ul li + li{
	margin: 10px 0 0 0;
}

section.job-box  div.job-detail dl dd dl{
	display: inherit;
	margin: 20px 0 0 0;
}

section.job-box div.job-detail dl dd dl.mg0{
	margin: 0;
}

section.job-box div.job-detail dl dd dl dt{
	width:100%;
	text-align: left;
	font-weight: 400;
	border-bottom: none;
	padding: 0;
	margin: 0;
}

section.job-box div.job-detail dl dd dl dd{
	width:100%;
	text-align: left;
	border-bottom: none;  
  line-height: 150%;
	padding: 0;
	margin: 10px 0 0 0;
}

@media print, screen and (min-width:640px) {
  section.job-box div.job-detail dl dd dl dd{
	  width:100%;
	  text-align: left;
	  border-bottom: none;
	  padding: 0;
	  margin: 10px 0 0 0;
  }
}

section.job-box div.job-detail ul.entry-btn{
  margin: 10px auto 0 auto;
}

@media print, screen and (min-width:640px) {
  section.job-box div.job-detail ul.entry-btn{
    margin: 30px auto 0 auto;
  }
}

section.job-box div.job-detail ul.entry-btn li a{
  width:240px;
  height: 50px;
  border-radius: 10px;
  margin: 0 auto;
}

@media print, screen and (min-width:640px) {
  section.job-box div.job-detail ul.entry-btn li a{
    width:350px;
    height: 70px;
  }
}

section.job-box div.job-detail ul.entry-btn li a span{
  font-size: 1.8rem;
  font-weight: 700;
}

@media print, screen and (min-width:640px) {
 section.job-box div.job-detail ul.entry-btn li a span{
   font-size: 2.0rem;
  }
}

/* spn-nav
========================================================================================================
*/
p.drawer-icon{
  display: none;
}

/* ハンバーガーアイコン */
@media print, screen and (max-width:1050px) {
  p.drawer-icon{
    display: block;
    width: 30px;
    height: 30px;
    background: #000;
    position:fixed;
    top:25px;
    right:20px;
    cursor: pointer;
    border: 1px solid #FFF;
  }

/* ハンバーガーアイコンの中の線 */
 p span.drawer-icon-parts,
 p span.drawer-icon-parts:before,
 p span.drawer-icon-parts:after{
   display: block;
   width:18px;
   height: 2px;   
   background-color: #FFF;   
   position: absolute;
   top: 0px;
   right: 0;
   left: 0;
   bottom: 0;
   margin: auto;   
 }

 p span.drawer-icon-parts:before,
 p span.drawer-icon-parts:after{
   content: " ";
 }

 p span.drawer-icon-parts:before{
  top: 14px;
 }

 p span.drawer-icon-parts:after{
  top: -14px;
 }

/*  チェックが入ったら（アイコンクリックしたら）*/
p.active span.drawer-icon-parts{
    background: transparent;
}

p.active span.drawer-icon-parts:before{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 0;
}

p.active span.drawer-icon-parts:after{
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
}

/*動きをスムーズに*/ 
  .drawer-icon,
  .drawer-icon-parts,
  .drawer-icon-parts:after,
  .drawer-icon-parts:before,
  .drawer-overlay,
  .drawer-menu{
  -webkit-transition: all .5s ;
  transition: all .5s ;
  }
}

/*================== ドロワーメニュー コンテンツ ==================*/

  aside.sp-nav{  
    display: none;
 } 

@media print, screen and (max-width:1050px) {
   aside.sp-nav{  
     display: block;
     position: fixed;
     top:0;
     left:0;
     width:100%;
     background: rgba(0,0,0,0.9);
   }
  
  aside.sp-nav nav{    
    display: none;
    width:90%;     
    height: 100vh;
    margin: 0 auto 30px auto;
  } 

  aside.sp-nav nav ul{
    padding: 40px 0 0 0;
  }
  
  aside.sp-nav nav ul li{
    text-align: center;
    padding: 15px 0;
  }
  
 aside.sp-nav nav ul li a{   
   position: relative;
   display: inline-block;
   font-size: 1.5rem;
   color: #FFF;
  }
  
 aside.sp-nav nav ul li a::after{
  content: '';
  width: 100%;
  height: 1px;
  background: #FFF;  
  position: absolute;
  bottom: -6px;/*テキストからの距離*/
  left: 0;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
 }
  
  aside.sp-nav nav ul li a:hover::after{
  transform: scale(1, 1);
 }

 aside.sp-nav nav ul li a:visited{
    color: #FFF;
  } 

 aside.sp-nav nav ul li a span{
    display: block;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.1rem;
    color: #FFF;
    margin: 0 0 2px 0;
  }

  aside.sp-nav nav div.btn-job a{  
    width:70%;
    height: 80px;
    border-radius: 5px;
    background: linear-gradient( 120deg, #26FFFF, #9326FF 50%, #FF7373);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #FFF;
    font-weight: 700; 
    padding: 0;
    margin: 20px auto 0 auto;
   }

  aside.sp-nav nav div.btn-job a span{
     display: block;
     font-family: 'League Spartan', sans-serif;
     font-size:1.8rem;
     color: #FFF;
     padding: 0 0 5px 0;
     margin: 8px 0 0 0;
   }

  aside.sp-nav nav div.copyright{
   font-size: 1.2rem;
   color: #FFF;
   text-align: center;
   margin: 40px 0 0 0;
  }
}

 /* z-indexの指定 */ 
.drawer-icon{
    z-index: 1003;
  }

.sp-nav{
    z-index: 1002;
  }


/* recruit form
======================================================================
*/

/*-- contact --*/

section.contact{
  position: relative;
  width:100%;
  background: #EEE;
  padding:140px 0 40px 0;
  margin: 0 auto;
  z-index: 500;
}

@media print, screen and (min-width:640px) { 
 section.contact{
   padding: 200px 0 150px 0;
   margin: 0 auto;
 }
}

section.contact div{
  width:90%;
  background-color: #FFF;
  padding:0 0 20px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:640px) { 
  section.contact div{
  width:95%;
  max-width: 1140px;
  padding:0 0 40px 0;
  margin: 0 auto;
  }
}

section.contact div div.form01{
  width:100%;
  padding: 0;
  margin: 0;
}

section.contact div.form02 dl{
  width:100%;
  border-top: 1px solid #CCC;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  color: #000;
  padding:0;
  margin: 0 auto;
}

@media print, screen and (min-width:640px) { 
 section.contact div.form02 dl{
   display: flex;
   flex-flow: row wrap;
	 max-width: 1000px;
  }
}

section.contact div.form02 dl dt{
  width:100%;
  background-color: #F7F7F7;
  border-bottom: 1px solid #CCC;
  font-size: 14px; font-size: 1.4rem;
  padding:10px;
  margin: 0 auto;
}

@media print, screen and (min-width:640px) { 
  section.contact div.form02 dl dt{
    width:28%;
    font-size: 16px; font-size: 1.6rem;
		font-weight: 700;
    padding:45px 0 45px 3%;
    margin: 0 auto;
  }
}

section.contact div.form02 dl dt span{
  display: inline-block;
  background-color: #D60039;
  font-size: 12px; font-size: 1.2rem;
  color: #FFF;
  padding:5px 5px;
  margin: 0 10px 0 0 ;
}

section.contact div.form02 dl dt span.c01{
  background-color: #D60039;
}

section.contact div.form02 dl dt span.c02{
  background-color: #465166;
}

section.contact div.form02 dl dd{
  position: relative;
  width:100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #CCC;
  padding:30px 10px;
  margin: 0 auto;
}

@media print, screen and (min-width:640px) { 
 section.contact div.form02 dl dd{
   width:72%;
   padding:0;
   margin: 0 auto;
  }
}

section.contact div.form02 dl dd.input-check{
	min-height: 100px;
}

section.contact div p{
  text-align: center;
  padding: 0;
  margin: 40px 0 0 0;
}

section.contact div h3.submit_h3{
  font-size: 2.0rem;   
  color: #000;
  text-align: center;
  line-height: 150%;
	margin: 0 0 30px 0;
}

@media print, screen and (min-width:640px) { 
  section.contact div h3.submit_h3{
   font-size: 3.0rem;
	 margin: 0 0 30px 0;
  }
}

section.contact div p.submit_p01,
section.contact div p.submit_p02,
section.contact div p.submit_p03{
  text-align: center;
  color: #000;
  padding: 0;
  margin: 0 0 15px 0;
}

@media print, screen and (min-width:640px) { 
 section.contact div p{
   margin: 80px 0 0 0;
  }
}

section.contact div div.submit-btn{
  position: relative;
  background: #000;  
}

section.contact div a.submit-btn{
  display: block;
  width:260px;
  height: 50px;    
  border: 2px solid #00ACCA;
  border-radius: 5px;
  margin: 60px auto 0 auto;
  cursor: pointer;
}


dl.profession{
  width:100%;
	background: #00ACCA;
	padding: 15px 20px 20px 20px;
	margin: 0 0 30px 0;
}

@media print, screen and (min-width:640px) {
  dl.profession{
   width:100%;
	 padding: 25px 30px 30px 30px;
	 margin: 0 0 60px 0;
	}
}

dl.profession dt{
  width:100%;
	font-size: 1.8rem;
	font-weight: 700;
	color: #FFF;
  line-height: 100%;
	text-align: center;
	padding: 0 0 20px 0;
}

@media print, screen and (min-width:640px) {
 dl.profession dt{
	font-size: 2.4rem;
	padding: 0 0 20px 0;
	}
}

dl.profession dd{	 
  background: #FFF;
	padding: 30px 0;
}

@media print, screen and (min-width:640px) {
 dl.profession dd{
	 padding: 30px 0;
  }
}

dl.profession dd input{
  width: 100%;
  outline: none;
  border: none;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
}

@media print, screen and (min-width:640px) {
  dl.profession dd input{
   width: 100%;
    outline: none;
   border: none;
   font-size: 3.0rem;
  }
}

input, button, textarea, select {
	font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* -----  input  -----*/

section.contact div.form02 dl dd input{
  width:100%;
  height: 50px;
  border-radius: 10px;
  font-size: 16px; font-size: 1.6rem;
  padding: 0 10px;
  margin: 0 auto;
}

@media print, screen and (min-width:640px) { 
  section.contact div.form02 dl dd input{
   width:90%;
   height: 50px;
   border-radius: 10px;
   font-size: 16px; font-size: 1.6rem;
   /*position: absolute;
   top:50%;
   left:5%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);*/
   padding: 0 10px;
   margin: 0 auto;
  }
}

/* -----  textarea  -----*/

section.contact div.form02 dl dd textarea{
  width:100%;
  height: 150px;
  border-radius: 10px;
  font-size: 14px; font-size: 1.4rem;
  padding: 10px;
  margin: 0;
  resize: vertical;
}

@media print, screen and (min-width:640px) { 
 section.contact div.form02 dl dd textarea{
   width:90%;
   height: 150px;
   font-size: 16px; font-size: 1.6rem;
   padding: 10px;
   margin: 30px 5%;
  }
}

section.contact div.form02 dl dd input[type="text"],
section.contact div.form02 dl dd textarea {
  outline: none;
  border: 2px solid #CCC;
  background-color: #FFFFE3;
  -webkit-transition: all .3s;
  transition: all .3s;
}

section.contact div.form02 dl dd input[type="text"]:focus,
section.contact div.form02 dl dd textarea:focus {
  background-color: #FFFFE3;
}

/* -----  checkbox  -----*/

section.contact div dl dd.input-check > span{
	display: block;
	width:95%;
	position: absolute;
	top:50%;
	left:2.5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: 0 auto;
}

@media print, screen and (min-width:640px) { 
 section.contact div dl dd.input-check > span{
	display: block;
	width:90%;
	position: absolute;
	top:50%;
	left:5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: 0;
	}
}

section.contact div form p > span{
	position: relative;
	display: inline-block;
	margin: 0;
}

section.contact div dl dd.input-check input[type="checkbox"] ,
section.contact div form p span input[type="checkbox"] {
  display: none;
}

section.contact div dl dd.input-check label, 
section.contact div form p span label{
  display: inline-block;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

section.contact div dl dd.input-check label span,
section.contact div form p span label span{
  position: relative;
  display: inline;
	padding: 0 0 0 45px;
}

section.contact div dl dd.input-check label span a{
	text-decoration: underline;
}

section.contact div dl dd.input-check label span a:hover{
	text-decoration: none;
}

section.contact div dl dd.input-check label::before,
section.contact div form p span label::before{
  content: '';  
  width: 28px;
  height: 28px;
  background: #FFFFE3;
  border: 2px solid #BBB;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left:0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

section.contact div dl dd.input-check label input[type="checkbox"]:checked + span::before,
section.contact div form p span label input[type="checkbox"]:checked + span::before{
  content: '';  
  width: 26px;
  height: 26px;
  background: #D60039;
  border: 3px solid #D60039;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

section.contact div dl dd.input-check label input[type="checkbox"]:checked + span::after,
section.contact div form p span label input[type="checkbox"]:checked + span::after{
  content: "";
  width:16px;
  height:6px;
  color: #FFF;
  font-weight: 900;
  position: absolute;
  top:6px;
  left:8px;
  border-left: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* -----  submit  -----*/

section.contact div input[type="submit"]{
  display: block;
  width:70%;
  height:50px;
  border-radius: 10px;
  background-color:#D60039;
  font-size: 16px; font-size: 1.6rem;
  font-weight: 500;
  color: #FFF;
  padding: 0;
  margin: 0 auto 0 auto;
  cursor: pointer;
}

@media print, screen and (min-width:640px) { 
 section.contact div input[type="submit"]{
   width:60%;
   height: 70px;
   font-size: 20px; font-size: 2.0rem;
   padding: 0;
   margin: 0 auto;
  }
}

/* -----  file  -----

label.file-btn {
  display: inline-block;
  background-color: #EEE;
  border: 2px solid #CCC;;
  color: #000;
	text-align: center;
  padding: 10px 5px 10px 10px;
  cursor: pointer;
}

@media print, screen and (min-width:640px) { 
 label.file-btn {
   position: absolute;
   top:50%;
   left:5%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
  }
}

span.entry-file{
  display:block;
	font-size: 14px; font-size:1.4rem;
  line-height: 130%;
	text-align: left;
  padding: 0;
  margin: 10px 0 0 0;
}

@media print, screen and (min-width:640px) { 
 span.entry-file{
   padding: 0;
   margin: 10px 15px 20px 30px;
  }
}

 section.contact div dl dd input[type="file"] {
	 position: inherit;
	 top:inherit;
	 left:inherit;
	 border-radius: 0;
	 width:auto;
	 height: 40px;
	 font-size: 12px; font-size: 1.2rem;
	 padding: 0;
	 margin: 15px 15px 15px 10px;
}

@media print, screen and (min-width:640px) { 
 section.contact div dl dd input[type="file"] {
	 position: inherit;
	 top:inherit;
	 left:inherit;
	 width:auto;
	 height: auto;
	 font-size: 16px; font-size: 1.6rem;
	 padding: 0;
	 margin: 40px 10px 0 30px;
	}
}

 section.contact div dl dd input[type="file"] + span.mwform-file-delete {
	 font-size: 20px; font-size: 2.0rem;
}

@media print, screen and (min-width:640px) { 
 section.contact div dl dd input[type="file"] + span.mwform-file-delete {
	 font-size: 20px; font-size: 2.0rem;
	}
}*/

/*-- file --*/

section.contact div.form02 dd.form-file div{
  width:90%;
	display: flex;
	flex-flow: row wrap;
  align-items: center;
  padding:20px 0;
  margin: 0 auto;
}

section.contact div.form02 dd.form-file div div#file-btn01,
section.contact div.form02 dd.form-file div div#file-btn02 {
	  width:120px;
	  height:30px;
    background: #00ACCA;
	  border-radius: 5px;
	  font-size: 1.3rem;
	  font-weight: 700;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-flow: column wrap;
	  align-items: center;
	  justify-content: center;
    padding: 0;
	  margin: 0 10px 0 0;
}

section.contact div.form02 dl dd.form-file div input{
	  display:block;
		width: 100%;
	  height: 30px;
	  background: #FFF;
    box-shadow: none;
    border: none;
	  font-weight:400;
	  padding: 0;
	  margin: 5px 0 0 0;
}

@media only screen and (min-width:640px) {
  section.contact div.form02 dl dd.form-file div input {
	   display:block;
     width:calc( 100% - 150px );
	   height: 30px;
	}
}

div.form02 dd.form-file div input::placeholder {
  color: #000;
}

div.form02 dd.form-file div input[type="text"]:focus {
  border: none;
	outline: none;
}

div.form02 dd.form-file div span.your-resume{
  display: none;
}

section.contact div.form02 dd.form-file div span{	
	display: block;
	width:100%;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 150%;
	margin: 5px 0 0 0;
}

@media only screen and (min-width:640px) {
section.contact div.form02 dd.form-file div span{	
	 font-size: 1.6rem;	
   line-height: 200%;
	 margin:10px 0 0 0;
	}
}

section.contact div.form02 dd.form-file div a{	
	font-size: 1.4rem;
	font-weight: 700;
  margin: 3px 0 0 0;
}

@media only screen and (min-width:640px) {
section.contact div.form02 dd.form-file div a{	
	 font-size: 1.6rem;
   margin: 0;
 }
}

/*---- error-----*/

section.contact div dl dd span.error{
  display: inline-block;
  color: #D90000;
	font-size: 14px; font-size: 1.4rem;
  position: absolute;
  top:10px;
  left:10px;
  padding:0;
  margin: 0;
}

section.contact div dl dd.input-check span.error{
  position: absolute;
  top:10px;
  left:10px;
	padding:10px 0 0 0;
  margin: 0;
}

@media print, screen and (min-width:640px) { 
	section.contact div dl dd span.error{
   position: absolute;
   top:10px;
   left:30px;
   padding:0;
   margin: 0;
}

 section.contact div dl dd.input-check span.error{
   position: absolute;
   top:20px;
   left:30px;
	}
}

section.contact div.submit-wrap{
  width:95%;
  color: #000;
  padding:60px 20px;
  margin: 0 auto;
}

@media print, screen and (min-width:640px) { 
  section.contact div.submit-wrap{
    width:95%;
    max-width: 1140px;
    color: #000;
    padding:100px 0;
    margin: 0 auto;
  }
}

footer{
  position: relative;
  width:100%;
  background: #000;
  padding: 45px 0 20px 0;  
  z-index: 501;
}

footer dl{
  width:100%;
  text-align: center;
  color: #FFF;
  margin: 0 0 35px 0;
}

footer dl dt{
  font-size: 1.6rem;
  margin: 0 0 10px 0;
}

@media print, screen and (min-width:640px) { 
  footer dl dt{
   font-size: 1.8rem;
   margin: 0 0 10px 0;
  }
}

footer dl dd{
  font-size: 1.2rem;
}

footer dl dd a{
  color: #FFF;
  border-bottom: 1px solid #FFF;
  padding: 0 0 3px 0;
  transition: 0.3s;
}

footer dl dd a:hover{
  color: #FFF;
  border-bottom:none;
}

footer dl dd a:visited{
  color: #FFF;
  border-bottom:none;
}

footer small{
  display: block;
  width:100%;
  font-size: 1.2rem;
  text-align: center;
  color: #FFF;
}

/* interview
========================================================================================================
*/

body#interview{
  background: #FFF;
  color: #000;
  padding: 80px 0 0 0;
}

@media print, screen and (min-width:600px)  { 
 body#interview{
   padding: 80px 0 0 0;
  }
}

@media print, screen and (min-width:900px)  { 
 body#interview{
   padding: 100px 0 0 0;
  }
}

section.interview-head{
  color: #FFF;
  margin: 0;
}

@media print, screen and (min-width:1050px)  { 
 section.interview-head{
   display: grid;
   grid-template-columns: 50% 50%;
   color: #FFF;
   margin: 0 0 90px 0;
  }
}

section.interview-head div.interview-head01{
  width:100%;
  background: #00ABC9;
}

section.interview-head div.interview-head01 div{
  width:90%;
  padding: 30px 0 40px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:1050px)  { 
 section.interview-head div.interview-head01 div{
   width:90%;
   max-width: 470px;
   padding: 0;
   margin: 15% 0 0 12%;
  }
}

section.interview-head div h2{
  width:145px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FFF;
  font-size: 1.3rem;
  color: #FFF;
  margin: 0 auto 20px auto;
}

@media print, screen and (min-width:1050px)  { 
  section.interview-head div h2{
    width:180px;
    height: 40px;
    font-size: 1.6rem;
    margin: 0 0 50px 0;
  }
}

section.interview-head div dl{
  border-bottom: 1px solid #FFF;
  padding: 0 0 30px 0;
  margin: 0 0 40px 0;
}

section.interview-head div dl dt{  
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 20px 0;
}

@media print, screen and (min-width:1050px)  { 
  section.interview-head div dl dt{
    font-size: 3.6rem;
    text-align: left;
    margin: 0 0 40px 0;
  }
}

section.interview-head div dl dd{  
  text-align: center;
}

@media print, screen and (min-width:1050px)  {
  section.interview-head div dl dd{  
    text-align: left;
  }
}

section.interview-head div dl dd + dd{
  margin: 10px 0 0 0;
}

section.interview-head div dl dt span{
  font-size: 1.6rem;
}

@media print, screen and (min-width:1050px)  { 
  section.interview-head div dl dt span{
    font-size: 2.0rem;
  }
}

section.interview-head div p{
  font-size: 3.0rem;
  font-weight: 900;
  text-align: center;
  line-height: 150%;
}

@media print, screen and (min-width:1050px)  {
 section.interview-head div p{
   font-size: 3.6rem;
   text-align: left;
  }
}

section.interview-head figure{
  width:100%;
}

section.interview-head figure img{
  width:100%;
}

section.interview01 div.interview-box01{
  width:100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows:auto auto;
  margin: 0 0 0 auto;
}

@media print, screen and (min-width:1050px)  { 
  section.interview01 div.interview-box01{
   width:96%;
   display: grid;
   grid-template-columns: 62% 38%;
   grid-template-rows:auto;
   margin: 0 0 80px auto;
  }
}

@media print, screen and (min-width:1400px)  { 
  section.interview01 div.interview-box01{
   width:93%;
   display: grid;
   grid-template-columns: 62% 38%;
   grid-template-rows:auto;
   margin: 0 0 80px auto;
  }
}

section.interview01 div.interview-box01 div{
  grid-column: 1 / 2;
  grid-row: 2/3;  
  padding: 0;
}

@media print, screen and (min-width:1050px)  { 
  section.interview01 div.interview-box01 div{
   grid-column: 1 / 2;
   grid-row: 1/2;  
   padding: 0 8% 0 0;
  }
}

section.interview01 div.interview-box01 figure{
  grid-column: 1 / 2;  
  grid-row: 1/2;
  max-height: 300px;
}

@media print, screen and (min-width:600px)  { 
  section.interview01 div.interview-box01 figure{
  grid-column: 1 / 2;  
  grid-row: 1/2;
  max-height: 500px;
  }
}

@media print, screen and (min-width:1050px)  { 
  section.interview01 div.interview-box01 figure{
    grid-column: 2 / 3;  
    grid-row: 1/2; 
    max-height: inherit;
  }
}

section.interview01 div.interview-box02{
  width:100%;
  display: grid;
  grid-template-columns: 100%;  
  grid-template-rows: auto auto;
  margin: 0;
}

@media print, screen and (min-width:1050px)  { 
  section.interview01 div.interview-box02{
   width:95%;
   display: grid;
   grid-template-columns: 38% 62%;  
   grid-template-rows: auto;
   margin: 0 auto 80px 0;
  }
}

@media print, screen and (min-width:1400px)  { 
  section.interview01 div.interview-box02{
   width:93%;
   display: grid;
   grid-template-columns: 38% 62%;  
   grid-template-rows: auto;
   margin: 0 auto 80px 0;
  }
}

section.interview01 div.interview-box02 div{
  grid-column: 1 / 2;
  grid-row: 2/3;
  padding: 0;
}

@media print, screen and (min-width:1050px)  { 
  section.interview01 div.interview-box02 div{
   grid-column: 2 / 3;
   grid-row: 1/2;
   padding: 0 0 0 8%;
  }
}

section.interview01 div.interview-box02 figure{
  grid-column: 1 / 2;  
  grid-row: 1/2;
  max-height: 300px;
}

@media print, screen and (min-width:600px)  { 
  section.interview01 div.interview-box02 figure{
  grid-column: 1 / 2;  
  grid-row: 1/2;
  max-height: 500px;
  }
}

@media print, screen and (min-width:1050px)  { 
  section.interview01 div.interview-box02 figure{
    grid-column: 1 / 2;  
    grid-row: 1/2;    
    max-height: inherit;
  }
}

section.interview01 h3{
  background: #00ABC9;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 130%;
  color: #FFF;
  text-align: center;
  padding: 15px 20px;
  margin: 0 0 30px 0;
}

@media print, screen and (min-width:1050px)  { 
  section.interview01 h3{
    display: inline-block;
    font-size: clamp( 1.8rem, 2vw, 2.4rem ); 
    text-align: left;
    padding: 15px 50px;
    margin: 0 0 40px 0;
  }
}

section.interview01 h3 + p{
  width:90%;
  font-size: 1.4rem;
  line-height: 200%;
  margin: 0 auto 30px auto;
}

@media print, screen and (min-width:1050px)  {   
  section.interview01 h3 + p{  
    width:100%;
    font-size: 1.6rem;
    margin: 0 0 60px 0;
  }
}

section.interview01 div.interview-box01 figure img,
section.interview01 div.interview-box02 figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

@media print, screen and (min-width:1050px)  {   
 section.interview01 div.interview-box01 figure img,
 section.interview01 div.interview-box02 figure img{
   width: 100%;
   height: 100%;
   object-fit: cover;
  }
  
 section.interview01 div.interview-box01 figure img{
  object-position: 80% 50%;
  }

 section.interview01 div.interview-box02 figure img{
  object-position: 50% 30%;
  }  
}

/*--- interview-foot ----*/

section.interview-foot{  
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
  color: #FFF;
}

@media print, screen and (min-width:1050px)  { 
  section.interview-foot{
   display: grid;
   grid-template-columns: 38% 62%;
   grid-template-rows: auto;
  }
}

section.interview-foot div.interview-foot01{
  grid-column: 1 / 2;  
  grid-row: 2/3;
  background: #00ABC9;
  padding: 0;
}

@media print, screen and (min-width:1050px)  { 
  section.interview-foot div.interview-foot01{    grid-column: 2 / 3;  
     grid-row: 1/2;
     padding: 0 0 0 10%;
  }
}

section.interview-foot figure{
  grid-column: 1 / 2;  
  grid-row: 1/2;
  max-height: 400px;
}

@media print, screen and (min-width:600px)  { 
  section.interview-foot figure{
   grid-column: 1 / 2;  
   grid-row: 1/2;
   max-height: 600px;
  }
}

@media print, screen and (min-width:1050px)  { 
  section.interview-foot figure{
    grid-column: 1 / 2;  
    grid-row: 1/2;
    max-height: inherit;
  }
}

section.interview-foot figure img{
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;    
}


section.interview-foot div.interview-foot01 div{
  width:90%;
  padding: 40px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:1050px)  { 
  section.interview-foot div.interview-foot01 div{
    width:90%;
    max-width: 900px;
    padding: 0;
    margin: 15% 0 60px 0;
  }
}

section.interview-foot div.interview-foot01 h2{
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 130%;
  color: #FFF;
  margin: 0 0 20px 0;
}

@media print, screen and (min-width:1050px)  { 
section.interview-foot div.interview-foot01 h2{
  font-size: clamp( 3.0rem, 3vw, 3.6rem );
  margin: 0 0 20px 0;
  }
}

section.interview-foot div.interview-foot01 h2 + span{
  font-family: 'Noto Serif JP', serif;
  font-size: 1.4rem;
}

section.interview-foot div.interview-foot01 h2 + span + p{
  font-size: 1.4rem;
  line-height: 200%;
  margin: 40px 0 0 0;
}

@media print, screen and (min-width:1050px)  { 
section.interview-foot div.interview-foot01 h2 + span + p{
  font-size: 1.8rem;
  line-height: 200%;
  margin: 90px 0 0 0;
  }
}

/*--- interview-list ----*/

section.interview-list{
  width:100%;
  background: url("/images/recruit/recruit-bg09.jpg") no-repeat 50% 0 #000;
  background-size: 100%;
  padding: 60px 0 0 0;
}

@media print, screen and (min-width:1050px)  { 
  section.interview-list{
   width:100%;
   background: url("/images/recruit/recruit-bg09.jpg") no-repeat 50% 50% #FFF;
   background-size: cover;
   padding: 100px 0 0 0;
  }
}

section.interview-list h2{
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 130%;
  color: #FFF;
  text-align: center;
}

@media print, screen and (min-width:1050px)  {
  section.interview-list h2{
   font-size: 3.0rem;
  }
}

section.interview-list h3{
  font-size: 5.0rem;
  font-weight: 900;
  line-height: 130%;
  text-align: center;
}

@media print, screen and (min-width:640px)  {
  section.interview-list h3{
   font-size: 5.0rem;
   font-weight: 900;
   line-height: 130%;
   text-align: center;
  }
}

section.interview-list h3 + p{
  font-size: 2.0rem;
  color: #FFF; 
  text-align: center;
}

section.interview-list div ul.interview-slider{
  width:100%;
  align-items: center; 
  transition-timing-function: linear;
  padding: 30px 0 40px 0;
  margin: 0;
}

@media print, screen and (min-width:1050px)  {
section.interview-list div ul.interview-slider{
  width:100%;
  align-items: center;
  padding: 0 0 80px 0;
  margin: 80px 0 0 0;
  }
}

section.interview-list div ul.interview-slider li{  
  position: relative;
  width: 280px;
  margin: 20px 10px;
  cursor: pointer;
  transition:0.5s; 
  z-index: 300;
}

@media print, screen and (min-width:600px)  {
  section.interview-list div ul.interview-slider li{  
   position: relative;
   width: 280px;
   margin: 20px;
   cursor: pointer;
   transition:0.5s; 
   z-index: 300;
  }
}

section.interview-list div ul.interview-slider li a{ 
  display:block;
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  z-index: 301;
}

/*section.interview-list div ul.interview-slider li.swiper-slide-active{
  width: 360px;
  transition:0.5s;
}*/

section.interview-list div ul.interview-slider li img{ 
  width:100%;
  height: auto;
  min-height: 370px;
  object-fit: cover;  
}

section.interview-list div ul.interview-slider li a::before{
  content: "";
  width:100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0 60%, #000 100%);
  position: absolute;
  top:1px;
  left:0;
  z-index: 301;
}

div.swiper-pagination{
  margin: 60px auto 0 auto;
}

@media print, screen and (min-width:1050px)  {
  div.swiper-pagination{
    margin: 40px auto;
  }
}

div.swiper-pagination .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  margin: 0 0 0 10px !important;
  background: #FFF !important;
  opacity: 1;
}

div.swiper-pagination .swiper-pagination-bullet-active {
    background: #4EDAC4 !important;
}


section.interview-list div ul.interview-slider li dl{
  width:85%;
  display: flex;
  flex-flow: column-reverse wrap;
  position: absolute;
  left:40px;
  bottom: 30px; 
  color: #FFF;
  z-index: 303;
}

section.interview-list div ul.interview-slider li dl dt{
  font-size: 2.0rem;
  transition:0.5s;
}

section.interview-list div ul.interview-slider li dl dt span{
  display: block;
  font-size: 1.0rem;
  margin: 10px 0 0 0;
  transition:0.5s;
}

section.interview-list div ul.interview-slider li dl dd{
  display: block;
  font-size: 1.8rem;
  line-height: 130%;
  margin: 10px 0;
  transition:0.5s;
}

/* discussion
========================================================================================================
*/

body#discussion{
  color: #000;
  padding: 80px 0 0 0;
}

@media print, screen and (min-width:600px)  { 
 body#discussion{
   padding: 100px 0 0 0;
  }
}

@media print, screen and (min-width:900px)  { 
 body#discussion{
   padding: 120px 0 0 0;
  }
}

section.interview-head{
  /*margin: 0;*/
  position: relative;
  z-index: 100;
}

section.discussion-head{
  position: relative;
  width:100%;  
  height: 480px;
}

@media print, screen and (min-width:600px)  { 
 section.discussion-head{
   width:100%;
   height: 100%;
   min-height: 480px;
   max-height:820px;
  }
}

section.discussion-head figure{
  width:100%;
  height: 100%;
}

section.discussion-head video{
  width:100%;
  height: 100%;
  min-height: 480px;
  max-height:820px;
  object-fit: cover;
}

section.discussion-head::after{
  content: "";
  background: rgba(0,0,0,0.8);
  width:100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 101;
}

section.discussion-head figure img{
  display: block;
  width:100%;
  height: 100%;
  min-height: 480px;
  max-height:700px;
  object-fit: cover;
}

section.discussion-head div.discussion-head01{
  width:90%;
  position: absolute;
  top:45%;
  left:50%;
  transform: translate(-50%,-50%);
  color: #FFF;
  text-align: center;
  z-index: 102;
}

section.discussion-head div.discussion-head01 h1{
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 60px 0;
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-head div.discussion-head01 h1{
    font-size: 2.0rem; 
    margin: 0 0 60px 0;
  }
}

section.discussion-head div.discussion-head01 span.sub-ttl{
  display: block;
  font-weight: 700;
  font-size: 7.0rem;
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-head div.discussion-head01 span.sub-ttl{    
    font-size: 9.8rem;
  }
}

section.discussion-head div.discussion-head01 p{
   font-size: 1.3rem;
   line-height: 200%;
   margin: 80px 0 0 0;
} 

@media print, screen and (min-width:600px)  { 
  section.discussion-head div.discussion-head01 p{
    font-size: 1.4rem;
    margin: 80px 0 0 0;
  }
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-head div.discussion-head01 p{
    font-size: 1.6rem;    
    margin: 100px 0 0 0;
  }
}

aside.discussion-member{
  width:100%;
  background: #EEE;
  padding: 0 0 30px 0;
}

@media print, screen and (min-width:1050px)  { 
  aside.discussion-member{
   padding: 0 0 60px 0;
  }
}

aside.discussion-member ul{
  position: relative;
  width:90%;
  display: flex;   
  flex-flow: row wrap;
  justify-content: center;
  margin: -70px auto 0 auto;
  z-index: 101;
}

@media print, screen and (min-width:1050px)  { 
  aside.discussion-member ul{
    width:95%;
    max-width: 1300px;
    display: grid;   
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-rows: auto;
    grid-column-gap: 10px;
    margin: -100px auto 0 auto;
  }
}

aside.discussion-member ul li{
  width:calc( 100% / 2 );
  padding: 0 15px;
  margin: 0 0 20px 0;
}

@media print, screen and (min-width:600px)  { 
 aside.discussion-member ul li{
  width:calc(  100% / 3 );
    padding: 0 15px;  
   margin: 0 0 20px 0;
  }
}

@media print, screen and (min-width:1050px)  { 
 aside.discussion-member ul li{
   width:inherit;
   padding:0;
   margin: 0;
  }
}

aside.discussion-member ul li a{
  width:100%;
}

aside.discussion-member ul li div{
  position: relative;
  width:100%;
}

aside.discussion-member ul li div figure{
  position: relative;
  width:100%;
}

aside.discussion-member ul li div figure img{
  display: block;  
  border-radius: 50%;
  width:100%;
  height: 100%;
  object-fit: cover;
}

aside.discussion-member ul li div figure::after{  
  opacity: 0;
  content: "";
  width:100%;
  height: 100%;  
  border-radius: 50%;
  background: rgba(0,171,201,0.75);
  position: absolute;
  top:0;
  left:0;  
  transition: 1s; 
}

aside.discussion-member ul li div:hover figure::after{
  opacity: 1;
}

aside.discussion-member ul li dl{
  width:100%;
}

aside.discussion-member ul li div p{  
  width:75%;
  position: absolute;
  top:50%;
  left:53%;
  transform: translate(-50%,-50%);
  font-size: 1.1rem;
  color: #FFF;
  line-height: 160%;
  opacity: 0;
  transition: 1s;
}

@media print, screen and (min-width:600px)  { 
  aside.discussion-member ul li div p{  
   width:70%;
   position: absolute;
   top:50%;
   left:53%;
   transform: translate(-50%,-50%);
   font-size: 1.2rem;
   color: #FFF;
   line-height: 160%;
   opacity: 0;
   transition: 1s;
  }
}

@media print, screen and (min-width:1200px)  { 
  aside.discussion-member ul li div p{  
   width:70%;
   position: absolute;
   top:50%;
   left:53%;
   transform: translate(-50%,-50%);
   font-size: 1.3rem;
   color: #FFF;
   line-height: 180%;
   opacity: 0;
   transition: 1s;
  }
}

aside.discussion-member ul li div:hover  p{  
  opacity: 1;
}

aside.discussion-member ul li dl{  
  text-align: center;
}

aside.discussion-member ul li dl dt{  
  font-size:1.8rem;
  font-weight: 700;
  margin: 10px 0;
}

@media print, screen and (min-width:600px)  { 
  aside.discussion-member ul li dl dt{  
   font-size: 2.2rem;
   margin: 15px 0;
  }
}

aside.discussion-member ul li dl dd{  
  font-size: 1.2rem;
}

@media print, screen and (min-width:600px)  { 
 aside.discussion-member ul li dl dd{  
   font-size: 1.3rem;
  }
}

@media print, screen and (min-width:1050px)  { 
 aside.discussion-member ul li dl dd{  
   font-size: 1.4rem;
  }
}

/*------------------  discussion-category  -------------------*/

aside.discussion-category{
  position: relative;
  width:100%;
  background: #FFF;  
  z-index: 101;
}

aside#dc-head{
  background: linear-gradient(180deg, #EEE 0%, #EEE 50%, #FFF 50%, #FFF 100%);  
  padding: 0;

}

@media print, screen and (min-width:1050px)  { 
 aside#dc-head{
   padding: 20px 0;
  }
}
aside#dc-head ul{
  margin: 0 auto;
}

aside.discussion-category figure{
  position: relative;
  width:100%;
  margin: 0;
}

@media print, screen and (min-width:900px)  { 
  aside.discussion-category figure{
   position: relative;
   width:100%;
  margin: -40px 0 0 0;
   }
}

aside.discussion-category figure img{
  width:100%;
}

aside#dc-foot ul{
  position: relative;
  background: #FFF;
  margin: 0 auto;  
  z-index: 101;
}

aside.discussion-category ul{
  width:100%;
  display: flex;
  flex-flow: row wrap;	 
  box-shadow:5px 5px 15px -5px #999;
}

@media print, screen and (min-width:900px)  { 
  aside.discussion-category ul{
   width:100%;
   max-width: 1020px;
   height: 80px;
   display: flex;
   flex-flow: row nowrap;	 
   box-shadow:5px 5px 15px -5px #999;
  }
}

aside.discussion-category ul li{
  width:calc( 100%  / 2 );
  height: 60px;  
  border-bottom: 1px solid #EEE;
  font-size: 1.3rem;
}

aside.discussion-category ul li br{
    display: none;
}

@media print, screen and (min-width:900px)  { 
  aside.discussion-category ul li{
    width:calc( 100% / 5 );   
    height: 100%;
    border-bottom:none;  
    font-size: 1.4rem;
  }
  aside.discussion-category ul li br{
    display: block;
  }
}

@media print, screen and (min-width:1050px)  { 
  aside.discussion-category ul li{
    width:calc( 100% / 5 );   
    height: 100%;
    border-bottom:none;  
    font-size: 1.6rem;
  }
  aside.discussion-category ul li br{
    display: none;
  }
}

aside.discussion-category ul li:nth-child(odd){
  border-right: 1px solid #EEE;
}

@media print, screen and (min-width:900px)  { 
  aside.discussion-category ul li:nth-child(odd){
   border-right: none;
  }
}

aside.discussion-category ul li a{
  display: block;
  width:100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: #FFF;
}

@media print, screen and (min-width:600px)  { 
aside.discussion-category ul li a{
  display: block;
  width:100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: #FFF;
  }
}

aside.discussion-category ul li.on,
aside.discussion-category ul li.off{  
  width:calc( 100% / 2 );
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: #FFF;
}

aside.discussion-category ul li.on a{
  background: #00ABC9;
  color: #FFF;
  transition: 1s;
}

aside.discussion-category ul li.off a{
  background: #FFF;
  color: #000; 
  transition: 1s;
}

aside.discussion-category ul li.off{
  background: #FFF;
  color: #CCC;
}

aside.discussion-category ul li span{
  display: block;
  font-family: 'League Spartan', sans-serif;
  font-size: 1.6rem;
  text-align: center;  
  margin: 0 0 7px 0;
}

aside.discussion-category ul li.on span{
  color: #FFF;
}

aside.discussion-category ul li.off span{
  color: #D60039;
}

aside.discussion-category ul li a:hover,
aside.discussion-category ul li.off a:hover{
  background: #00ABC9;
  color: #FFF;
}

aside.discussion-category ul li a:hover span,
aside.discussion-category ul li.off a:hover span{
  color: #FFF;
}

/*------------------  discussion-title  -------------------*/

div.discussion-title{
  position: relative;
  width:100%;
  margin:0 auto;
  z-index: 100;
}

@media print, screen and (min-width:1050px)  { 
  div.discussion-title{
   position: relative;
   width:85%;
   margin:0 auto 100px auto;
  }
}

div.discussion-title h2{
  width:100%;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  line-height: 100%;
  padding: 0 0 10px 0;
}

@media print, screen and (min-width:1050px)  { 
  div.discussion-title h2{
   width:100%;
   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
   font-size: 3.6rem;
   font-weight: 700;
   text-align: center;
   line-height: 100%;
  }
}

div.discussion-title h2 span{
  display: block;  
  font-family: 'League Spartan', sans-serif;
  font-size: 2.0rem;
  margin: 0 0 15px 0;
}

@media print, screen and (min-width:1050px)  { 
div.discussion-title h2 span{
  display: block;  
  font-family: 'League Spartan', sans-serif;
  font-size: 2.4rem;
  margin: 0 0 30px 0;
  }
}

div.discussion-title figure{
  width:100%;
  margin: 0 auto;
}

div.discussion-title figure img{
  width:100%;
  height: 200px;
  object-fit: cover;
}

@media print, screen and (min-width:1050px)  { 
div.discussion-title figure img{
  width:100%;
  height: 500px;
  object-fit: cover;
  }
}

/*------------------  discussion-contents -------------------*/

section.discussion-contents{
  width:100%;
  background: #FFF;
  padding:0;
  margin: 0 auto;
}

@media print, screen and (min-width:1050px)  { 
section.discussion-contents{
  width:100%;
  background: #FFF;
  padding: 80px 0 60px 0;
  margin: 0 auto;
}
}
section.discussion-contents div.discussion-box01{
  width:100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows:auto auto;
  margin: 0 0 0 auto;
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-contents div.discussion-box01{
   width:96%;
   display: grid;
   grid-template-columns: 62% 38%;
   grid-template-rows:auto;
   margin: 0 0 80px auto;
  }
}

@media print, screen and (min-width:1400px)  { 
  section.discussion-contents div.discussion-box01{
   width:93%;
   display: grid;
   grid-template-columns: 62% 38%;
   grid-template-rows:auto;
   margin: 0 0 80px auto;
  }
}

section.discussion-contents div.discussion-box01 div{
  grid-column: 1 / 2;
  grid-row: 1/2;  
  padding: 0;
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-contents div.discussion-box01 div{
   grid-column: 1 / 2;
   grid-row: 1/2;  
   padding: 0 8% 0 0;
  }
}

section.discussion-contents div.discussion-box01 figure{
  grid-column: 1 / 2;  
  grid-row: 2/3;
  max-height: 300px;
  margin: 20px 0 0 0;
}

@media print, screen and (min-width:600px)  { 
  section.discussion-contents div.discussion-box01 figure{
   grid-column: 1 / 2;  
   grid-row: 2/3;
   max-height: 500px;
   margin: 0;
  }
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-contents div.discussion-box01 figure{
    grid-column: 2 / 3;  
    grid-row: 1/2; 
    max-height: 1000px;
    margin: 0;
  }
}

section.discussion-contents div.discussion-box02{
  width:100%;
  display: grid;
  grid-template-columns: 100%;  
  grid-template-rows: auto auto;
  margin: 0;
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-contents div.discussion-box02{
   width:95%;
   display: grid;
   grid-template-columns: 38% 62%;  
   grid-template-rows: auto;
   margin: 0 auto 80px 0;
  }
}

@media print, screen and (min-width:1400px)  { 
  section.discussion-contents div.discussion-box02{
   width:93%;
   display: grid;
   grid-template-columns: 38% 62%;  
   grid-template-rows: auto;
   margin: 0 auto 80px 0;
  }
}

section.discussion-contents div.discussion-box02 div{
  grid-column: 1 / 2;
  grid-row: 1/2;
  padding: 0;
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-contents div.discussion-box02 div{
   grid-column: 2 / 3;
   grid-row: 1/2;
   padding: 0 0 0 8%;
  }
}

section.discussion-contents div.discussion-box02 figure{
  grid-column: 1 / 2;  
  grid-row: 2/3;
  max-height: 300px; 
  margin: 20px 0 0 0;
}

@media print, screen and (min-width:600px)  { 
  section.discussion-contents div.discussion-box02 figure{
    grid-column: 1 / 2;  
    grid-row: 2/3;
    max-height: 500px;
    margin: 0;
  }
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-contents div.discussion-box02 figure{
    grid-column: 1 / 2;  
    grid-row: 1/2;    
    max-height: 1000px;
    margin: 0;
  }
}

section.discussion-contents div.discussion-box01 figure img,
section.discussion-contents div.discussion-box02 figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

@media print, screen and (min-width:1050px)  {   
 section.discussion-contents div.discussion-box01 figure img,
 section.discussion-contents div.discussion-box02 figure img{
   width: 100%;
   height: 100%;
   object-fit: cover;
  }
  
 section.discussion-contents div.discussion-box01 figure img{
  object-position: 80% 50%;
  }

 section.discussion-contents div.discussion-box02 figure img{
  object-position: 50% 30%;
  }  
}

section.discussion-contents h3{
  position: relative;
  width:90%;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 130%;
  color:#00ABC9;    
  padding: 3px 0 3px 45px;
  margin: 40px auto;
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-contents h3{  
    with:100%;
    font-size: 2.0rem;
    padding: 3px 0 3px 45px;
    margin: 0 0 30px 0;
  }
}

section.discussion-contents h3::after{
  content: "";
  width:35px;
  height: 2px;
  background: #00ABC9;
  position: absolute;
  top:50%;
  left:0;
  transform: translateY(-50%);
}


section.discussion-contents h4{
  width:90%;
  font-size: 2.0rem;
  font-weight: 600;
  line-height: 130%;
  margin: 40px auto;
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-contents h4{  
    width:100%;
    font-size: 3.0rem;
    padding: 0;
    margin: 0 0 40px 0;
  }
}

section.discussion-contents dl{
  width:90%;
  display: grid;
  grid-template-columns:60px 1fr;
  grid-column-gap: 20px;
  margin: 0 auto 20px auto;
}  

@media print, screen and (min-width:1050px)  { 
  section.discussion-contents dl{
   width:100%;
   display: grid;
   grid-template-columns:60px 1fr;
   grid-column-gap: 40px;
   margin: 0 0 40px 0;
  }
}

section.discussion-contents div.discussion-box01 dl dt figure,
section.discussion-contents div.discussion-box02 dl dt figure{
  margin: 0;
}

section.discussion-contents dl dt figure img{
  width:100%;
  border-radius: 50%;
}

section.discussion-contents dl dt span{
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  margin: 3px 0 0 0;
}

section.discussion-contents dl dd{
  font-size: 1.4rem;
  line-height: 200%;
}

@media print, screen and (min-width:600px)  { 
 section.discussion-contents dl dd{
    font-size: 1.6rem;
  }
}

@media print, screen and (min-width:1050px)  { 
  section.discussion-contents dl dd{
    font-size: 1.8rem;
  }
}