.main { max-width: 1600px; margin: 0 auto; }
.main img{width: 100%;}
.main .main_visual{position: relative; z-index: -1; height: 58vw; margin-bottom: 40px; margin-top: 10px}
.main .main_visual .wave01{ position: absolute; top: 0; left: 0; width: 100%; height: 101%; z-index: 10 }
.message{font-family: 'Noto Sans JP', sans-serif; font-weight:bold; position: absolute; font-size: 5.5vw; line-height: 1.4; top: 25%; color: #000; left: 50px; z-index: 10}
.message span{font-size: 4.5vw;}
.message span em{font-style: normal; color: #0071c2;}
.slick01 button{display: none !important;}
.message2{font-family: 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 4vw; text-align: center;}
.message3{font-family: 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 1.7vw; text-align: center; margin-top: 40px; line-height: 1.8;}
.garelly{display: flex; justify-content: center; margin: 65px auto 0 auto; width: 90%;}
.garelly > div > div img{display: block; border-radius: 50%; transform:skewX(15deg);}
.garelly > div > div{background: rgba(255, 255, 255, 0.3); padding: 20px; transform:skewX(-15deg); margin: 0 5px;}
.cat_name{ text-align: center; margin: 50px 0;}
.cat_name h2{ font-size: 3.5rem; font-style: normal; font-weight: bold; display: table; margin: 0 auto; background: linear-gradient(transparent 75%, #EB868C 0%); padding: 0 20px;}
.people{background: url('../img/bg_people.gif') center 100% no-repeat; padding-bottom: 10px; }
.list_people{display: flex; justify-content: left; flex-wrap: wrap; max-width: 960px !important; margin: 0 auto !important;  }
.list_people button{display: none !important;}
.list_people li {text-align: center; width: 20%; margin-bottom: 40px;}
.list_people li figure .img{ display: flex; align-items: flex-end; }
.list_people li figure img { margin: 0 auto; width: 100%; }
.list_people li figure figcaption{ background: #fff; margin: -40px 10px 0 10px; padding: 50px 0 20px 0;}
.list_people li figure figcaption em{font-size: 1.4rem; font-style: normal; color: #D80C18; text-align: center; font-weight: bold; margin-top: 10px;}
.list_people li figure figcaption .name{font-size: 2rem; font-weight: bold; color: #000; margin: 5px 0 10px 0; font-style: normal; }
.list_people li figure figcaption + span{ position: relative; display: table; margin: -20px auto 0 auto; padding: 10px 20px 10px 30px; line-height: 1; font-size:1.4rem; color: #D80C18; border: solid 2px #FF8D94; transform: skewX(-15deg); background: #fff;}
.list_people li figure figcaption + span:before{ content: '●' ; color: #D80C18; font-size:1rem; left: 12px; top: 12px; transform: skewX(15deg); position: absolute}
.list_people li figure figcaption + span{transform: skewX(-15deg); display: block; font-weight: bold; font-style: normal; width: 70%; }
.list_people li a:hover figure figcaption + span{background: #D80C18; color: #fff; border: solid 2px #fff;}
.list_people li a:hover figure figcaption + span:before{ color: #fff; }
.list_people + .button{text-align: center; margin-bottom: 80px;}
.list_people + .button a{ display: inline-block; border: solid 1px #fff; padding: 15px 30px; border-radius: 50px;}
.slick-slide{height: auto !important}
.slick-dots li{background: #ccc; border-radius: 50px;}
.slick-dots li.slick-active{background: #E4555E}
.data{max-width: 960px; margin: 0 auto 60px auto;}
.data ul{display: flex; justify-content: space-between; margin: 65px 0 0 0}
.data ul li{width: 31%; background: #fff; font-weight:bold; color: #D80C18; background: #fff; font-style: normal; padding: 20px; display: flex; /* align-items: flex-end;  */flex-wrap: wrap;}
.data ul li div{display: flex; align-items: baseline}
.data ul li:nth-child(2) > div{margin-bottom: 10px;}
.data ul li:nth-child(2) > div + div{margin-bottom: 0}
.data ul li:nth-child(2) div .inner > div{ display: block; }
.data ul li:nth-child(2) div .inner > div p{ font-size: 9rem; line-height: 1;}
.data ul li:nth-child(2) div .inner > div p small{ font-size: 3rem; }
.data ul li:last-child div + div{justify-content: space-between; width: 100%;}
.data ul li:last-child div .inner{display: block; margin-top: 10px; width: 50%}
.data ul li:last-child div .inner span{display: block; font-size: 1.6rem; line-height: 1.5;}

/* .data ul li{width: 31%; background: #fff; font-weight:bold; color: #D80C18; background: #E4555E; font-style: normal} */
.data ul li div.data_name{  background: #fff;padding: 10px}
.data ul li div.data_name + div{text-align: center; padding: 20px 0}
.data ul li h3{ font-size: 3.5rem; margin-right: 10px; }
.data ul li em{ font-size: 1.6rem; font-style: normal; }
.data ul li span{ font-size: 3.2rem; }
.data ul li p{font-size:9.2rem; font-family: Arial}
.more_link{ position: relative; display: block; background: #E4555E; padding: 20px; width: 300px; text-align: center; line-height: 1; font-size:2.5rem; color: #fff; border: solid 1px #fff; transform: skewX(-15deg); margin: 40px auto;}
.faq .more_link{width: 350px;}
.more_link span:before{ content: '●' ; color: #fff; font-size:1.2rem; left: -30px; top: 25%; position: absolute}
.more_link span{ display: inline-block; position: relative; transform: skewX(15deg); font-style: normal;}
.more_link:hover{ color:#D80C18; background: #fff; }
.more_link:hover span:before{ color: #D80C18; }
.information{padding: 20px; background: #E4555E; }
.information .wrap{margin: 0 auto; max-width: 960px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.information div.company:before,
.information div.career:before,
.information div.info:before{ content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: solid 1px #fff; z-index: 1; margin: 10px; }
.information div.company:after,
.information div.career:after,
.information div.info:after { content: ''; background-color: rgba(0,0,0,.5); position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.information div.company{ padding: 20px; position: relative; background: url('../img/company.jpg') 50% no-repeat; background-size: cover; width: 49%; }
.information div.career{ padding: 20px; position: relative; background: url('../img/career.jpg') 50% no-repeat; background-size: cover; width: 49%; }
.information div.info{ padding: 20px; position: relative; background: url('../img/information.jpg') 50% no-repeat; background-size: cover; width: 100%; margin-top: 20px;}
.information div *{position: relative; z-index: 1}
.information div .more_link{background: rgba(255, 255, 255, 0.3); width: 70%;}
.information div .more_link:hover{ background: #fff; }
.faq{background: #fff; padding: 60px 20px}
.faq .cat_name {color: #D80C18}
.faq .qa{ max-width: 960px; margin: 0 auto; border-bottom: solid 1px #D80C18; }
.questionnaire{ cursor:  pointer; color: #000; font-weight: bold; padding: 20px 0}
.faq .icon{ margin-right: 20px;width: 95px; height: 95px; }
.faq .questionnaire .icon{overflow: hidden}
.faq .questionnaire:hover{color: #D80C18; background:  #fff0f1;}
.faq .icon img{max-width: 100%;}
.faq .answer .icon{display: flex; justify-content: center; align-items: center;}
.faq .answer .icon img{width: 80%;}
.faq .qa:nth-child(odd) .answer_wrap,
.faq .qa:nth-child(odd) .questionnaire{ flex-direction: row-reverse;}
.faq .qa:nth-child(odd) .icon{ margin-right: 0; margin-left: 20px;}
.answer{ color: #D80C18; font-weight: bold; display: none; padding: 20px 0 20px 60px;}
.faq .qa:nth-child(odd) .answer{ padding-right: 60px;}
.faq p{ font-style: normal; }
.answer_wrap,
.questionnaire{ display: flex; align-items: center; justify-content: flex-start}
  .faq .more_link{ color: #D80C18; background: #FFEEEE; border: solid 1px #D80C18 }
  .faq .more_link span:before{ color:#D80C18 }
  .faq .more_link:hover{ color: #fff; background: #D80C18; }
  .faq .more_link:hover span:before{ color:#fff }
  .youtube_wrap{ width: 70%; margin: 0 auto;} 
  .youtube { position: relative;width: 100%;padding-top: 56.25%; text-align: center;}
  .youtube iframe { position: absolute; top: 0; right: 0;width: 100%; height: 100%;}

/**フェードイン **/

.css-fade1,
.css-fade2,
.css-fade3,
.css-fade01,
.css-fade02,
.css-fade03{ opacity: 0; }
.css-fade--in {
    /** アニメーション設定**/
    animation-name: fade-in;
    animation-duration: 1s; /**アニメーション時間**/
    animation-timing-function: ease-out; /**アニメーションさせるイージング**/
    animation-delay: 0; /**アニメーション開始させる時間**/
    animation-iteration-count: 1; /**繰り返し回数**/
    animation-direction: normal; /**往復処理をするかどうか**/
    animation-fill-mode: forwards; /**アニメーション後のスタイルをどうするか**/
  }
.css-fade2.css-fade--in,
.css-fade02.css-fade--in {
    /** アニメーション設定**/
    animation-delay: 0.5s; /**アニメーション開始させる時間**/
  }  
.css-fade3.css-fade--in,
.css-fade03.css-fade--in {
    /** アニメーション設定**/
    animation-delay: 1s; /**アニメーション開始させる時間**/
  }  

@media screen and (max-width: 650px) {
.css-fade1,
.css-fade2,
.css-fade3{
    animation-name: fade-in;
    animation-duration: 1s; /**アニメーション時間**/
    animation-timing-function: ease-out; /**アニメーションさせるイージング**/
    animation-delay: 0; /**アニメーション開始させる時間**/
    animation-iteration-count: 1; /**繰り返し回数**/
    animation-direction: normal; /**往復処理をするかどうか**/
    animation-fill-mode: forwards; /**アニメーション後のスタイルをどうするか**/
}
.css-fade2{
    /** アニメーション設定**/
    animation-delay: 0.5s; /**アニメーション開始させる時間**/
  }  
.css-fade3 {
    /** アニメーション設定**/
    animation-delay: 1s; /**アニメーション開始させる時間**/
  }  
}


  /** アニメーション**/
  @keyframes fade-in {
    0% {
      opacity: 0;
      transform: translateY(-30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

@media screen and (max-width: 900px) {
/* .data ul{ display: block; } 
.data ul li{ width: 90%; margin: 0 auto 20px auto; }*/
.data ul{margin: 20px 10px 0 10px;}
.data ul li{padding: 10px;}
.data ul li img{ width: 100%;}
}

@media screen and (max-width: 849px) {
  body{padding-top: 80px;}
}

@media screen and (max-width: 700px) {
.people .button{display: block;}
.people .button a{width: 80%; margin: 20px auto; font-size: 1.6rem;}
.people .button a span:before{ font-size:1rem; left: -20px; }
}

@media screen and (max-width: 650px) {
.main .main_visual{margin-bottom: 20px; margin-top: 0; }
.message2{font-weight: bold; font-size:15px;}
.message3{margin-top: 10px; font-size:12px ; padding: 0 10px; letter-spacing: -0.5;}
.message3 br{ display: none }
.message{ left: 20px; }
.garelly{ overflow: hidden; margin: 20px auto; width: 100%; }
.garelly > div > div{ padding: 5px; margin: 0 2px;}
.people{ background: url(../img/bg_people.gif) center 100% no-repeat; background-size: 350%;}
.people .slick02 .slick-dots{ bottom: -5px }
.cat_name{ margin: 30px 0; }
.cat_name h2{ font-size: 2.2rem; }
/* .people .slick02 li{ height: 350px; }
.people .slick02 li figure{height: auto;}
.people .slick02 li figure .img{height: 200px;}
.people .slick02 li figure img{ height: inherit; }
.people .slick-dots li button:before{ font-size: 15px; }
.people .slick02 li a:before{left: 30px;}
.people .slick02 li a{ width: 90%; }
.people .button{margin: 20px auto;} */
.slick-dots li{ background: #fff; border-radius: 50px; width: 10px !important; height: 10px !important; margin-bottom: 20px !important;}
.data ul li h3{ font-size: 3rem; }
.data ul li p{font-size: 7rem;}
.more_link span{ font-size: 1.6rem; }
.more_link span:before{ font-size: 1rem; }
.information .wrap{display: block;}
.information div.career,
.information div.company{ margin-bottom: 20px; width: 100%;}
.faq{ padding-top: 20px;  padding-bottom: 20px; }
.faq .questionnaire:hover .icon{ overflow: hidden; }
.faq .questionnaire:hover .icon img{transform: scale(1) !important;}
/* .entry_area{padding-top: 120px;}
.entry_area a.more_link span{ font-size: 2.5rem; }
.sitemap .wrap{display: block !important;}
.sitemap .wrap ul {width: 90% !important; margin: 0 auto 20px auto;}
.sitemap .wrap ul li:first-child{margin-bottom: 0;}
.sitemap .wrap ul li{margin: 0 !important;}
.sitemap .wrap ul li a{display: block; padding: 10px; border-bottom: solid 1px #F88E8E;} */
.faq .icon{ width: 60px; height:60px; }
.faq p{width: 80%;}
.faq .qa .answer,
.faq .qa:nth-child(odd) .answer{ padding: 20px 0;}
.faq .more_link{width: 80%;}
/* .entry_area{height: auto !important;}
.entry_area p{font-size: 1.6rem;}
.entry_area{ padding-top: 0 !important; background-image: none !important; }
.entry_area p br{display: none;}
.entry_area p {padding: 20px; line-height: 1.5 !important;}
.entry_area a.more_link{width: 80% !important; margin: 0 auto 20px auto;}

.sitemap{padding: 20px 0 !important; } */

.people .cat_name{ margin: 30px 0 0 0;}
.list_people li figure figcaption{ margin: -40px 0px 0 0px;}
.list_people li figure figcaption + span:before{display: none;}
.list_people li figure figcaption + span{width: 90%; padding: 10px 5px;}
.list_people li figure figcaption em{font-size: 1.2rem;}
.list_people li figure figcaption .name{font-size: 1.4rem;}

.youtube_wrap{ width: 100%; margin: 20px auto 0;} 

}