@charset "utf-8";
/* ===================================================================

 CSS information
 file name  :layout.css
 style info :layout関係 他

=================================================================== */

html{
  overflow-y: scroll;
  height: 100%;
}

/*--------------------------------------------------------------------------
   font
---------------------------------------------------------------------------*/

/*@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
@import url(http://fonts.googleapis.com/css?family=Noto+Serif);*/
@import url(http://fonts.googleapis.com/css?family=Roboto);

/* CSS Document */

/*--------------------------------------------------------------------------
#font
---------------------------------------------------------------------------*/
/*@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype');
}*/
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 300;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format('opentype');
}
/*@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
   src: local('NotoSansJP-Regular.otf'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
 }*/
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
 }
/*@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.otf) format('opentype');
 }*/

/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/
body{
  width:100%;
  min-width: 320px;
  height: 100%;
  color: #fff;
  font-family: 'Robot', 'Noto Sans Japanese', Arial, 'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-size: 14px;
  line-height: 1.8;
  background:#fff;
  -webkit-text-size-adjust: 100%;
  font-weight:300;
}
/*body{
  width:100%;
  height: 100%;
  color: #000;
  font-family: Arial, 'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-size: 14px;
  line-height: 1.8;
  background:#fff;
  -webkit-text-size-adjust: 100%;
  font-weight:300;
  font-feature-settings : "palt";
  letter-spacing: 1.8px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}*/
img{
  border-style:none;
}
.mode_pc{
  display:block;
}
.mode_sp{
  display:none;
}
@media screen and (max-width: 750px) {
.mode_pc{
  display:none;
}
.mode_sp{
  display:block;
}
}

/*--------------------------------------------------------------------------
   base link
---------------------------------------------------------------------------*/
a{
  outline: none;
  cursor : pointer;
  color:#fff;
  transition:all 0.3s ease 0s;
}
a:link,
a:visited{
  color:#fff;
  text-decoration: none;
}
a:hover{
  color:#fff;
  text-decorationnone;
  outline: none;
}
a:active{
  outline: none;
}
a.hover{
  text-decoration:none;
}

/*--------------------------------------------------------------------------
   #stage
---------------------------------------------------------------------------*/
#stage{
  width:100%;
  position:relative;
  height:100%;
  z-index:1;
  background: #252323;
}


/* -----------------------------------------------------------------------------
  キービジュアル＆ヘッダー
----------------------------------------------------------------------------- */
#kv{
  position: relative;
  width:100%;
  height: 100%;
  z-index: 2;
  /*background:url(../images/kv_bg.jpg) no-repeat scroll center center / cover;*/
}
#kv .inner_block{
  width: auto;
  height: 100%;
  position: relative;
  margin: 0 80px;
}
#header{
  position: relative;
  opacity: 0;
}
#header .head_ttl{
  position: absolute;
  top: 88px;
  left: 0;
}
#header .head_ttl img{
  width: 224px;
}
#header .gnav{
  position: absolute;
  right: 0;
  top: 114px;
}
#header .gnav ul li{
  position:relative;
  float:left;
  margin-left:46px;
}
#header .gnav ul li:first-child{
  margin-left:0px;
}
#header .gnav ul li a{
  font-weight:500;
  text-decoration:none;
  font-size:13px;
  color: #fff;
  letter-spacing: 1.2px;
}
#header .gnav li.link a:hover{
  color: #e35600;
}
#header .gnav li.link a:before{
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: #e35600;
  -webkit-transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
}
#header .gnav li.link a:hover:before{
  width: 100%;
}
#header .gnav ul li.entry a{
  background: rgba(255,255,255,0.1);
  padding:21px 62px 21px 62px;
  -webkit-transition: background .3s;
  transition: background .3s;
  border-radius:60px;
}
#header .gnav li a:hover{
  text-decoration:none;
}
#header .gnav ul li.entry a:hover{
  background: rgba(227,86,0,1);
  columns: #fff;
  -webkit-transition: background .3s;
  transition: background .3s;
}
@media screen and (max-width: 1220px) {
#kv .inner_block{
  margin: 0 40px;
}
#header .head_ttl{
  position: absolute;
  top: 58px;
  left: 0;
}
#header .head_ttl img{
  width: 180px;
}
#header .gnav{
  top: 68px;
}
#header .gnav ul li{
  position:relative;
  float:left;
  margin-left:32px;
}
#header .gnav ul li a{
  font-size:11px;
}
#header .gnav ul li.entry a{
  padding:21px 38px 21px 38px;
}
}
@media screen and (max-width: 960px) {
#header .gnav ul li{
  margin-left:28px;
}
#header .gnav ul li a{
  font-size:10px;
}
#header .gnav ul li.entry a{
  padding:21px 28px 21px 28px;
}
}
@media screen and (max-width: 840px) {
#header .gnav{
  display: none;
}
}
@media screen and (max-width: 750px) {
#kv .inner_block{
  margin: 0 20px;
}
#header .head_ttl{
  top: 25px;
  left: 0;
}
#header .head_ttl img{
  width: 142px;
}
}
/* -----------------------------------------------------------------------------
  キービジュアル（sm-slider）
----------------------------------------------------------------------------- */
.sm-slider::after {
    background: transparent url("{0}") repeat scroll left top;
    content: "";
    z-index: 0;
}
.sm-slider, .sm-slider::after {
    height: 100% !important;
    left: 0;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}
.sm-slider, .sm-slider::after {
    height: 100%;
    left: 0;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}

/* -----------------------------------------------------------------------------
  キービジュアル（flame）
----------------------------------------------------------------------------- */
#kv .inner_block .flame{
  position: absolute;
  width: 1390px;
  height: 530px;
  left: 50%;
  margin-left: -695px;
  bottom: 0px;
}
@media screen and (max-width: 1390px) {
#kv .inner_block .flame{
  position: absolute;
  width: auto;
  height: auto;
  left: 0;
  margin-left: 0px;
  bottom: 0px;
}
#kv .inner_block .flame img{
  width: 100%;
}
}

/* -----------------------------------------------------------------------------
  キービジュアル（circle large）
----------------------------------------------------------------------------- */
#circle_block {
  position: absolute;
  text-align: center;
  width: 344px;
  height: 350px;
  top: 50%;
  left: 50%;
  margin-top: -175px;
  margin-left:-172px;
}
#circle{
  position: relative;
  width: 330px;
  height: 330px;
  display: inline-block;
}
#circle .loader {
  width: 330px;
  height: 330px;
  transform: rotate(-90deg);
  stroke-linecap: round;
  stroke-width: 4;
  fill: none;
  opacity: 0;
}
#circle .internal-circle,
#circle .external-circle {
  stroke-dashoffset: 0;
  transform-origin: center;
}
#circle .internal-circle {
  /*stroke-dasharray: 187;
  animation: internal 1s ease-in-out infinite;*/
  stroke: #fff;
  stroke-width: 0.4;
}
#circle .external-circle {
  stroke-dasharray: 312;
  animation: external 2s linear infinite;
}
#circle .copy{
  font-size:34px;
  text-align: center;
  top: 134px;
  left: 94px;
  color: #fff;
  position: absolute;
}
#circle .value{
  position: absolute;
  top: 21px;
  left: 21px;
  z-index: 13;
  width: 288px;
  height: 288px;
  opacity: 0;
}
#circle .value img{
  width: 100%
}
#circle_block .mid_txt{
  font-size: 14px;
  letter-spacing: 1.2px;
  margin-top: 8px;
  position: relative;
}
.btm_txt{
  font-size: 12px;
  line-height: 2;
  text-align: right;
  letter-spacing: 1.2px;
  position: absolute;
  bottom: 93px;
  right: 0;
  opacity: 0;
}
@media screen and (max-width: 1220px) {
.btm_txt{
  font-size: 11px;
  bottom: 54px;
}
}
@media screen and (max-width: 750px) {
#circle_block {
  width: 218px;
  height: 218px;
  top: 50%;
  left: 50%;
  margin-top: -139px;
  margin-left:-109px;
}
#circle{
  width: 218px;
  height: 218px;
}
#circle .loader {
  width: 218px;
  height: 218px;
  stroke-width: 2;
  fill: none;
}
#circle .external-circle {
  stroke-dasharray: 312;
  animation: external 3s linear infinite;
  opacity: 1;
}
#circle .copy{
  font-size:22px;
  top: 90px;
  left: 64px;
}
#circle .value{
  top: 16px;
  left: 16px;
  width: 185px;
  height: 185px;
}
#circle_block .mid_txt{
  font-size: 13px;
  letter-spacing: 1.2px;
  margin-top: -8px;
}
.btm_txt{
  font-size: 9px;
  bottom: 24px;
}
}
@media screen and (max-width: 320px) {
.btm_txt{
  display: none;
}
}

/* -----------------------------------------------------------------------------
  キービジュアル（circle small）
----------------------------------------------------------------------------- */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.circle_move {
  animation: spin 4s ease-in-out infinite alternate both;
  height: 220px;
  position: absolute;
  width: 220px;
  top: 54px;
  left: 54px;
  z-index: 11;
  opacity: 0;
  display: inline-block;
  padding: 0;
}
.circle_move svg:not(#circle-middle) {
  animation: spin 1s ease-in-out infinite alternate both;
  position: absolute;
  top: -50%;
  left: 0;
  transform-origin: bottom center;
}
.circle_move svg:nth-of-type(1):not(#circle-middle) {
  transform: rotate(72deg);
}
.circle_move svg:nth-of-type(2):not(#circle-middle) {
  transform: rotate(144deg);
}
.circle_move svg:nth-of-type(3):not(#circle-middle) {
  transform: rotate(216deg);
}
.circle_move svg:nth-of-type(4):not(#circle-middle) {
  transform: rotate(288deg);
}
.circle_move svg:nth-of-type(5):not(#circle-middle) {
  transform: rotate(360deg);
}
.circle_move svg:nth-of-type(6):not(#circle-middle) {
  transform: rotate(432deg);
}
@media screen and (max-width: 750px) {
.circle_move {
  animation: spin 4s ease-in-out infinite alternate both;
  height: 146px;
  position: absolute;
  width: 146px;
  top: 36px;
  left: 36px;
  z-index: 11;
}
.circle_move svg:not(#circle-middle) {
  animation: spin 0.4s ease-in-out infinite alternate both;
  position: absolute;
  top: -50%;
  left: 0;
  transform-origin: bottom center;
}
}

/* -----------------------------------------------------------------------------
  キービジュアル（scroll）
----------------------------------------------------------------------------- */
.scroll_wrap{
  bottom:110px;
  width:50px;
  opacity: 0;
}
.scroll_wrap a{
  color:#fff;
  text-decoration:none;
}
.scroll_wrap a:hover{
  text-decoration:none;
}
.scroll_wrap{
  cursor: pointer;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    transition-delay: 1.8s !important;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  z-index:30;
}
.scroll_wrap .icon{
  background-size:10px 50px;
  height:50px;
  width:10px;
  margin-bottom: 10px;
}
.scroll_wrap .icon{
  background: rgba(0, 0, 0, 0) url("../images/kv_arrow.png") no-repeat scroll center center;
  display:block;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  animation:2.3s linear 0s normal none infinite running scroll01;
}
.scroll_wrap .text{
  color:#fff;
  font-size:10px;
  font-family: ;
  letter-spacing:0.2em;
  position:relative;
  animation:2.3s linear 0.6s normal none infinite running scroll02;
}
@media screen and (max-width: 1220px) {
.scroll_wrap{
  display: none;
}
}

/* -----------------------------------------------------------------------------
  #sec01
----------------------------------------------------------------------------- */
#sec01{
  position: relative;
  background: url(../images/sec01_bg.jpg) no-repeat scroll center bottom / cover;
}
#sec01 .inner_block{
  width: 1050px;
  margin: 0 auto;
  padding: 160px 0 171px;
  position: relative;
}
#sec01 .txt_block{
  position: relative;
  width: 565px;
  z-index: 11;
}
#sec01 .headline:before{
  content: "";
  width: 25px;
  height: 1px;
  background: #e35600;
  position: absolute;
  left: -50px;
  top: 8px;
}
#sec01 .headline{
  color: #e35600;
  font-weight: 300;
  letter-spacing: 7.4px;
  font-size: 18px;
}
#sec01 .icon_circle{
  font-size: 24px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 2.4px;
  margin-top: 70px;
  margin-bottom: 62px;
}
#sec01 .icon_circle:before{
  content: "";
  width: 100px;
  height: 100px;
  background: url(../images/icon_circle.png) no-repeat scroll 0 0 / 100px 100px;
  position: absolute;
  left: 10px;
  /*top: 76px;*/
  top: -11px;
  z-index: -1;
}
#sec01 .txt{
  font-size: 14px;
  font-weight: 300;
  /*letter-spacing: 1.2px;*/
  margin-top: 60px;
  line-height: 2.1;
}
#sec01 .txt:last-child{
  margin-top: 16px;
}
#sec01 .img_block{
  position: absolute;
  right: 0;
  top: 100px;
  z-index: 10;
}
#sec01 .img_block img{
  width: 550px;
}
@media screen and (max-width: 1220px) {
#sec01 .inner_block{
  width: auto;
  margin: 0 40px;
  padding: 160px 0 229px;
  position: relative;
}
#sec01 .txt_block{
  width: auto;
  margin-right: 460px;
}
/*#sec01 .headline:before{
  left: 0px;
}*/
#sec01 .headline{
  margin-left: 50px;
}
}
@media screen and (max-width: 1182px) {
#sec01 .inner_block{
  padding: 160px 0 200px;
}
}
@media screen and (max-width: 1141px) {
#sec01 .inner_block{
  padding: 160px 0 171px;
}
}
@media screen and (max-width: 1085px) {
#sec01 .inner_block{
  padding: 160px 0 142px;
}
}
@media screen and (max-width: 1027px) {
#sec01 .inner_block{
  padding: 160px 0 113px;
}
}
@media screen and (max-width: 999px) {
#sec01 .inner_block{
  padding: 160px 0 92px;
}
}
@media screen and (max-width: 860px) {
#sec01 .txt_block{
  width: auto;
  margin-right: 320px;
}
#sec01 .img_block img{
  width: 520px;
}
}
@media screen and (max-width: 750px) {
  #sec01 .inner_block{
  margin: 0 20px;
  padding: 50px 0 40px;
}
#sec01 .txt_block{
  width: auto;
  margin-right: 0px;
}
#sec01 .headline:before{
  content: "";
  width: 19px;
  height: 1px;
  background: #e35600;
  position: absolute;
  left: 0px;
  top: 7px;
}
#sec01 .headline{
  font-size: 14px;
  margin-left: 0px;
  padding-left: 36px;
  display: inline-block;
}
#sec01 .icon_circle{
  font-size: 19px;
  margin-top: 46px;
  margin-bottom: 34px;
  display: block;
}
#sec01 .icon_circle:before{
  content: "";
  width: 74px;
  height: 74px;
  background: url(../images/icon_circle.png) no-repeat scroll 0 0 / 74px 74px;
  position: absolute;
  left: 6px;
  top: -6px;
}
#sec01 .txt{
  font-size: 14px;
  font-weight: 300;
  /*letter-spacing: 1.2px;*/
  margin-top: 33px;
  line-height: 2.2;
}
#sec01 .txt:last-child{
  margin-top: 11px;
}
#sec01 .img_block{
  position: relative;
  right: 0;
  top: 0;
  z-index: 10;
  margin-top: 30px;
}
#sec01 .img_block img{
  width: 100%;
}
}

/* -----------------------------------------------------------------------------
  #sec02
----------------------------------------------------------------------------- */
#sec02{
  position: relative;
  background: url(../images/sec02_bg.jpg) no-repeat scroll center top / cover;
}
#sec02 .inner_block{
  width: 1050px;
  margin: 0 auto;
  padding: 100px 0 144px;
  position: relative;
}
#sec02 .headline:before{
  content: "";
  width: 25px;
  height: 1px;
  background: #e35600;
  position: absolute;
  left: -50px;
  top: 7px;
}
#sec02 .headline{
  color: #e35600;
  font-weight: 300;
  letter-spacing: 7.4px;
  font-size: 18px;
  margin-bottom: 51px;
  position: relative;
  display: inline-block;
}
#sec02 .head_txt{
  margin-bottom: 51px;
}
#sec02 .head_txt .txt{
  line-height: 2 !important;
  font-weight: 300;
}
#sec02 .icon_circle{
  font-size: 24px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 2.4px;
  margin-bottom: 60px;
  z-index: 21;
  position: relative;
}
#sec02 .icon_circle:before{
  content: "";
  width: 100px;
  height: 100px;
  background: url(../images/icon_circle.png) no-repeat scroll 0 0 / 100px 100px;
  position: absolute;
  left: 8px;
  top: -32px;
  z-index: -1;
}
#sec02 .txt{
  font-size: 14px;
  font-weight: 300;
  line-height: 2.1;
}
#sec02 .txt:last-child{
  margin-top: 16px;
}
#slider{
  background: #292727;
}
#slider .slide-wrap .bxslider li{
  box-sizing: border-box;;
  padding: 102px 80px 0px;
}
#slider .slide-wrap .bxslider li .slide_ttl{
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 1.4px;
  margin-bottom: 10px;
  font-weight: 500;
}
#slider .slide-wrap .bxslider li .slide_img_01{
  margin-top: 62px;
  padding-bottom: 36px;
}
#slider .slide-wrap .bxslider li .slide_img_02{
  margin-top: 18px;
  padding-bottom: 36px;
}
@media screen and (max-width: 1220px) {
#sec02 .inner_block{
  width: auto;
  margin: 0 40px;
}
#sec02 .headline:before{
  left: 0px;
}
#sec02 .headline{
  margin-left: 0px;
  padding-left: 50px;
}
}
@media screen and (max-width: 750px) {
#sec02 .inner_block{
  margin: 0 20px;
  padding: 50px 0 68px;
}
#sec02 .txt_block{
  width: auto;
  margin-right: 0px;
}
#sec02 .headline:before{
  content: "";
  width: 19px;
  height: 1px;
  background: #e35600;
  position: absolute;
  left: 0px;
  top: 7px;
}
#sec02 .headline{
  font-size: 14px;
  margin-left: 0px;
  padding-left: 36px;
  margin-bottom: 32px;
  letter-spacing: 5.4px;
}
#sec02 .head_txt{
  margin-bottom: 42px;
}
#sec02 .head_txt .txt{
  line-height: 2 !important;
  font-weight: 300;
}
#sec02 .head_txt .txt:first-child{
  margin-top: 0 !important;
}
#sec02 .icon_circle{
  font-size: 19px;
  margin-bottom: 40px;
}
#sec02 .icon_circle:before{
  content: "";
  width: 74px;
  height: 74px;
  background: url(../images/icon_circle.png) no-repeat scroll 0 0 / 74px 74px;
  position: absolute;
  left: 6px;
  top: -22px;
}
#sec02 .circle_style_01:before{
  top: -6px;
}
#sec02 .txt{
  font-size: 14px;
  font-weight: 300;
  /*letter-spacing: 1.2px;*/
  margin-top: 33px;
  line-height: 2.2;
}
#sec02 .txt:last-child{
  margin-top: 11px;
}
#sec02 .img_block{
  position: relative;
  right: 0;
  top: 0;
  z-index: 10;
  margin-top: 30px;
}
#sec02 .img_block img{
  width: 100%;
}
#slider .slide-wrap .bxslider li{
  box-sizing: border-box;;
  padding: 52px 20px 0px;
}
#slider .slide-wrap .bxslider li .slide_ttl{
  font-size: 19px;
  line-height: 1.8;
  letter-spacing: 1.2px;
  margin-bottom: -27px;
}
#slider .slide-wrap .bxslider li .slide_img_01{
  margin-top: 30px;
  padding-bottom: 0px;
  height: 631px;
}
#slider .slide-wrap .bxslider li .slide_img_01 img, #slider .slide-wrap .bxslider li .slide_img_02 img{
  width: 252px;
  margin: 0 auto; 
}
#slider .slide-wrap .bxslider li .slide_img_02{
  margin-top: 38px;
  padding-bottom: 8px;
  height: 631px;
}
}

/* -----------------------------------------------------------------------------
  #sec03
----------------------------------------------------------------------------- */
#sec03{
  position: relative;
  background: #252323;
}
#sec03 .inner_block{
  width: 1100px;
  margin: 0 auto;
  padding: 100px 0 50px;
  position: relative;
}
#sec03 .headline:before{
  content: "";
  width: 25px;
  height: 1px;
  background: #e35600;
  position: absolute;
  left: -50px;
  top: 7px;
}
#sec03 .headline{
  color: #e35600;
  font-weight: 300;
  letter-spacing: 7.4px;
  font-size: 18px;
  margin-bottom: 74px;
  position: relative;
  margin-left: 50px;
  display: inline-block;
}
.interview_top{
  position: relative;
  margin: 132px 50px 0 50px;
}
#sec03 .first{
  margin: 0px 50px 0 50px !important;
}
.interview_top .prof{
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: right;
  /*margin: 0 50px;*/
}
.interview_top .prof .name{
  color: #e35600;
  font-size: 18px;
  margin-bottom: 5px;
}
.interview_top .prof .detail{
  color: #9a9a9a;
  font-size: 14px;
}
.interview_block img{
  width: 100%;
}
.interview_block .left{
  width:550px;
  position: relative;
  float: left;
}
.interview_block .left .img{
  margin-top: 52px;
}
.interview_block .right{
  width:550px;
  position: relative;
  float: right;
}
.interview_block .right .img{
  margin-bottom: 54px;
}
.interview_block .left .txt_block{
  margin:0 60px 0 70px; 
}
.interview_block .right .txt_block{
  margin:0 60px 0 70px; 
}
.interview_block .txt_sec{
  margin-top: 15px; 
}
.interview_block .txt_sec:first-child{
  margin-top: 0px; 
}
.interview_block .interview_ttl{
  font-size: 16px;
  font-weight: 700;
  margin: 1px 0 5px 0;
}
.interview_block .txt{
  font-size: 14px;
  font-weight: 100 !important;
  line-height: 2 !important;
}
#sec03 .icon_circle{
  font-size: 24px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 2.4px;
  margin-bottom: 60px;
  z-index: 21;
  position: relative;
}
#sec03 .icon_circle:before{
  content: "";
  width: 100px;
  height: 100px;
  background: url(../images/icon_circle.png) no-repeat scroll 0 0 / 100px 100px;
  position: absolute;
  left: 8px;
  top: -13px;
  z-index: -1;
}
#sec03 .txt{
  font-size: 14px;
  font-weight: 300;
  line-height: 2.1;
}
.interview_block .txt_block{
  margin:0 50px; 
}
@media screen and (max-width: 1220px) {
#sec03 .inner_block{
  width: auto;
  margin: 0 40px;
}
#sec03 .headline:before{
  left: 0px;
}
#sec03 .headline{
  margin-left: 0px;
  padding-left: 50px;
}
.interview_block .left{
  width:50%;
}
.interview_block .right{
  width:50%;
}
.interview_top{
  margin: 132px 0px 0 0px;
}
#sec03 .first{
  margin: 0px 0px 0 0px !important;
}
.interview_top .prof{
  margin: 0 0px;
}
.interview_block .left .txt_block{
  margin:0 50px 0 0px; 
}
.interview_block .right .txt_block{
  margin:0 0px 0 50px; 
}
}
@media screen and (max-width: 750px) {
#sec03 .inner_block{
  margin: 0 20px;
  padding: 50px 0 24px;
}
#sec03 .txt_block{
  width: auto;
  margin-right: 0px;
}
#sec03 .headline:before{
  content: "";
  width: 19px;
  height: 1px;
  background: #e35600;
  position: absolute;
  left: 0px;
  top: 7px;
}
#sec03 .headline{
  font-size: 14px;
  margin-left: 0px;
  padding-left: 36px;
  margin-bottom: 33px;
  letter-spacing: 5.4px;
}
#sec03 .icon_circle{
  font-size: 19px;
  margin-bottom: 26px;
  line-height: 1.6;
}
#sec03 .icon_circle:before{
  content: "";
  width: 74px;
  height: 74px;
  background: url(../images/icon_circle.png) no-repeat scroll 0 0 / 74px 74px;
  position: absolute;
  left: 6px;
  top: 10px;
}
#sec03 .circle_style_01:before{
  top: -6px;
}
#sec03 .txt{
  font-size: 14px;
  font-weight: 300;
  /*letter-spacing: 1.2px;*/
}
#sec03 .txt:last-child{
  margin-top: -2px;
}
#sec03 .img_block{
  position: relative;
  right: 0;
  top: 0;
  z-index: 10;
  margin-top: 30px;
}
.interview_top .prof{
  position: relative;
  right: auto;
  bottom: auto;
  text-align: left;
  margin-bottom: 27px;
}
.interview_top .prof .name{
  font-size: 16px;
  margin-bottom: 7px;
}
.interview_top .prof .detail{
  font-size: 12px;
}
.interview_block .left{
  width: auto;
  float: none;
}
.interview_block .left .img{
  margin-top: 22px;
}
.interview_block .right{
  width: auto;
  float: none;
}
.interview_block .right .img{
  margin-bottom: 24px;
}
.interview_top{
  margin: 56px 0px 0 0px;
}
.interview_block .left .txt_block{
  margin:0px; 
}
.interview_block .right .txt_block{
  margin:0px; 
}
.interview_block .txt_sec{
  margin-top: 14px; 
}
.interview_block .txt_sec:first-child{
  margin-top: 0px; 
}
.interview_block .interview_ttl{
  font-size: 16px;
  font-weight: 700;
  margin: 1px 0 5px 0;
}
.interview_block .txt{
  font-size: 14px;
  font-weight: 100 !important;
  line-height: 2.1 !important;
}
}

/* -----------------------------------------------------------------------------
  #message
----------------------------------------------------------------------------- */
#message{
  position: relative;
  background: #252323;
  padding: 123px 70px 147px;
  text-align: center;
}
#message .message_txt{
  position: relative;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 3px;
  display: inline-block;
}
#message .message_txt em{
  font-size: 22px;
  font-weight: 500;
  color: #e25500;
}
#message .message_txt:before{
  content: "";
  position:absolute;
  width: 10px;
  height: 94px;
  background: url(../images/sec04_arw_top.png) no-repeat scroll 0 0 / 10px 94px;
  left: 50%;
  margin-left: -5px;
  top: -116px;
}
#message .message_txt:after{
  content: "";
  position:absolute;
  width: 22px;
  height: 56px;
  background: url(../images/sec04_arw_btm.png) no-repeat scroll 0 0 / 22px 56px;
  left: 50%;
  margin-left: -11px;
  bottom: -74px;
}
@media screen and (max-width: 750px) {
#message{
  padding: 92px 0px 91px;
}
#message .message_txt{
  font-size: 15px;
  letter-spacing: 2.6px;
  line-height: 2;
}
#message .message_txt em{
  font-size: 15px;
}
#message .message_txt:before{
  content: "";
  position:absolute;
  width: 7px;
  height: 66px;
  background: url(../images/sec04_arw_top.png) no-repeat scroll 0 0 / 7px 66px;
  left: 50%;
  margin-left: -3.5px;
  top: -80px;
}
#message .message_txt:after{
  content: "";
  position:absolute;
  width: 16px;
  height: 41px;
  background: url(../images/sec04_arw_btm.png) no-repeat scroll 0 0 / 16px 41px;
  left: 50%;
  margin-left: -8px;
  bottom: -53px;
}
}

/* -----------------------------------------------------------------------------
  #readmore
----------------------------------------------------------------------------- */
#readmore{
  position: relative;
  width: 50%;
  float: left;
  font-family: 'Noto Sans Japanese', 'Robot', Arial, 'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
#readmore a{
  position:relative;
  display:block;
  overflow:hidden;
  background: #010101;
}
#readmore a:hover{
  text-decoration:none;
}
#readmore a .bg::after {
    background: url(../images/btn_readmore_pc.jpg) no-repeat scroll center top / cover ;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.8s ease 0s;
    width: 100%;
}
#readmore a .bg {
    overflow: hidden;
    padding: 0px 0;
    position: relative;
    text-align: center;
}
#readmore a:hover .bg::after {
    opacity: .7;
    -moz-transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}
#readmore a .bg .inner_block{
  padding:99px 0 107px 0;
  position:relative;
  width:auto;
  margin:0 0;
  text-align:center;
  z-index:21;
}
#readmore a .bg .inner_block .ttl{
  font-size:32px;
  line-height:1.8;
  font-weight:700;
  margin-bottom:7px;
  color:#fff;
  letter-spacing: 3px;
}
#readmore a .bg .inner_block .txt{
  font-size:13px;
  line-height:2;
  color:#fff;
  letter-spacing: 1.4px;
}
@media screen and (max-width: 750px) {
#readmore{
  width: auto;
  float: none;
}
#readmore a .bg::after {
    background: url(../images/btn_readmore_sp.jpg) no-repeat scroll center top / cover ;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.8s ease 0s;
    width: 100%;
}
#readmore a .bg .inner_block{
  padding:43px 0 40px 0;
  position:relative;
  width:auto;
  margin:0 0;
  text-align:center;
  z-index:21;
}
#readmore a .bg .inner_block .ttl{
  font-size:16px;
  margin-bottom:5px;
}
#readmore a .bg .inner_block .txt{
  font-size:12px;
  font-weight: 500;
}
}

/* -----------------------------------------------------------------------------
  #entry
----------------------------------------------------------------------------- */
#entry{
  position: relative;
  width: 50%;
  float: left;
  font-family: 'Noto Sans Japanese', 'Robot', Arial, 'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
#entry a{
  position:relative;
  display:block;
  overflow:hidden;
  background: #010101;
}
#entry a:hover{
  text-decoration:none;
}
#entry a .bg::after {
    background: url(../images/btn_entry_pc.jpg) no-repeat scroll center top / cover ;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.8s ease 0s;
    width: 100%;
}
#entry a .bg {
    overflow: hidden;
    padding: 0px 0;
    position: relative;
    text-align: center;
}
#entry a:hover .bg::after {
    opacity: .7;
    -moz-transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}
#entry a .bg .inner_block{
  padding:99px 0 107px 0;
  position:relative;
  width:auto;
  margin:0 0;
  text-align:center;
  z-index:21;
}
#entry a .bg .inner_block .ttl{
  font-size:32px;
  line-height:1.8;
  font-weight:700;
  margin-bottom:7px;
  color:#fff;
  letter-spacing: 3px;
}
#entry a .bg .inner_block .txt{
  font-size:13px;
  line-height:2;
  color:#fff;
  letter-spacing: 1.4px;
}
@media screen and (max-width: 750px) {
#entry {
  width: auto;
  float: none;
}
#entry  a .bg::after {
    background: url(../images/btn_entry_sp.jpg) no-repeat scroll center top / cover ;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.8s ease 0s;
    width: 100%;
}
#entry  a .bg .inner_block{
  padding:43px 0 40px 0;
  position:relative;
  width:auto;
  margin:0 0;
  text-align:center;
  z-index:21;
}
#entry  a .bg .inner_block .ttl{
  font-size:16px;
  margin-bottom:5px;
}
#entry  a .bg .inner_block .txt{
  font-size:12px;
  font-weight: 500;
}
}

/* -----------------------------------------------------------------------------
  #footer
----------------------------------------------------------------------------- */
#footer{
  position: relative;
  background: #1b1a1a;
  line-height: 1 !important;
}
#footer .inner_block{
  position: relative;
  width: auto;
  margin: 0 80px;
  padding:46px 0 45px; 
}
#footer .inner_block .logo{
  position: relative;
  float: left;
}
#footer .inner_block .logo img{
  width: 224px;
}
#footer .inner_block .btnTop{
  position: relative;
  float: right;
  padding-top: 6px;
}
#footer .inner_block .btnTop a:hover{
  opacity: .7;
}
#footer .inner_block .btnTop img{
  width: 124px;
}
@media screen and (max-width: 1260px) {
  #footer .inner_block{
  margin: 0 40px;
}
}
@media screen and (max-width: 750px) {
#footer .inner_block{
  position: relative;
  width: auto;
  margin: 0 20px;
  padding:31px 0 31px; 
}
#footer .inner_block .logo img{
  width: 155px;
}
#footer .inner_block .btnTop{
  position: relative;
  float: right;
  padding-top: 0px;
}
#footer .inner_block .btnTop img{
  width: 87px;
}
}

/* -----------------------------------------------------------------------------
  スマートフォンメニュー
----------------------------------------------------------------------------- */

main {
  position: relative;
  z-index: 1;
  height: 100%;
  transition: all 0.8s ease 0s;
}
.nav-open main {
  opacity: .7;
  -moz-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
  /*transform: scale(0.8);*/
}
.nav-trigger {
  display: none;
}
@media screen and (max-width: 840px) {
.nav-trigger {
  display: block;
  position: fixed;
  z-index: 300;
  top: 52px;
  right: 28px;
  height: 44px;
  width: 44px;
  overflow: hidden;
  color: transparent;
  white-space: nowrap;
  text-indent: 100%;
  opacity: 0;
}
}
@media screen and (max-width: 750px) {
.nav-trigger {
  display: block;
  position: fixed;
  z-index: 300;
  top: 15px;
  right: 11px;
  height: 44px;
  width: 44px;
  overflow: hidden;
  color: transparent;
  white-space: nowrap;
  text-indent: 100%;
}
}
.nav-trigger span {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.3s;
}
.nav-trigger:hover span,
.nav-trigger:hover span::before,
.nav-trigger:hover span::after {
  background-color: #fff;
}

.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after {
  position: absolute;
  height: 1px;
  width: 20px;
  background-color: #fff;
}

.nav-trigger span::before,
.nav-trigger span::after {
  content: "";
  top: 0;
  left: 0;
  transition: background 0.3s, transform 0.3s;
}

.nav-trigger span::before {
  transform: translateY(-6px);
}

.nav-trigger span::after {
  transform: translateY(6px);
}

.nav-open .nav-trigger span {
  background: transparent;
}

.nav-open .nav-trigger span::before {
  transform: rotate(-45deg);
}

.nav-open .nav-trigger span::after {
  transform: rotate(45deg);
}

.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after {
  background-color: #fff;
}

.overlay {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibiilty 0.5s;
}

.nav-open .overlay {
  opacity: 1;
  visibility: visible;
}

.nav-container {
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  padding: 0;
  background-color: #000;
  overflow: auto;
  transform: translateZ(0);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.07, 0.23, 0.34, 1);
  display: table;
}

.nav {
  list-style: none;
  padding: 0;
  display: table-cell;
  vertical-align: middle;
}
.nav a {
  display: inline-block;
  padding: 9px 0px;
  margin-left:41px;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  transition: color 0.4s;
  transform: translateZ(0);
}
.nav li.entry a {
  background: rgba(255,255,255,0.1);
  padding:18px 51px;
  -webkit-transition: background .3s;
  transition: background .3s;
  border-radius:60px;
  margin-top: 22px;
  font-size: 12px;
}

.nav-open .nav-container {
  transform: translateX(0);
}

.nav-open .nav a {
  animation: slide-in 0.4s 0.2s backwards;
}

.nav-open .nav li:nth-of-type(2) a {
  animation-delay: 0.3s;
}

.nav-open .nav li:nth-of-type(3) a {
  animation-delay: 0.4s;
}

.nav-open .nav li:nth-of-type(4) a {
  animation-delay: 0.5s;
}

.nav-open .nav li:nth-of-type(5) a {
  animation-delay: 0.6s;
}

.nav-open .nav li:nth-of-type(6) a {
  animation-delay: 0.7s;
}


@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(80px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/* -----------------------------------------------------------------------------
  @keyframes
----------------------------------------------------------------------------- */
@keyframes internal {
  0% {
    stroke-dashoffset: 187;
  }
  25% {
    stroke-dashoffset: 80;
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(360deg);
  }
}

@keyframes external {
  0% {
    stroke-dashoffset: 312;
    transform: rotate(70deg);
  }
  60% {
    stroke-dashoffset: -312;
  }
  100% {
    stroke-dashoffset: -312;
    transform: rotate(450deg);
  }
}
@keyframes scroll01 {
0% {
  top: 5px;
  opacity: 0;
}
20% {
  top: 10px;
  opacity: 1;
}
80% {
  top: 10px;
  opacity: 1;
}
100% {
  top: 15px;
  opacity: 0;
}
}
@-webkit-keyframes scroll02 {
0% {
  top: 10px;
  opacity: 0;
}
20% {
  top: 15px;
  opacity: 1;
}
80% {
  top: 15px;
  opacity: 1;
}
100% {
  top: 20px;
  opacity: 0;
}
}
@keyframes scroll02 {
0% {
  top: 10px;
  opacity: 0;
}
20% {
  top: 15px;
  opacity: 1;
}
80% {
  top: 15px;
  opacity: 1;
}
100% {
  top: 20px;
  opacity: 0;
}
}





























/* -----------------------------------------------------------------------------
  .loading
----------------------------------------------------------------------------- */
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #010101;
  z-index: 1;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
  text-align: center;
  color: #fff;
  z-index: 2;
}


/*--------------------------------------------------------------------------
  clearfix
---------------------------------------------------------------------------*/
.cf:before,.cf:after{
  content: "";
  display: table;
}
.cf:after{
  clear: both;
}
.cf{
  zoom: 1;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/*--------------------------------------------------------------------------
  汎用スタイル
---------------------------------------------------------------------------*/
img.grow {
    -webkit-transition: all 0.8s ease 0s;
    -moz-transition: all 0.8s ease 0s;
    -ms-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
}

img.grow:hover {
  -webkit-transform:scale(1.02);
  -moz-transform:scale(1.02);
  -ms-transform:scale(1.02);
  -o-transform:scale(1.02);
  transform:scale(1.02);
  opacity:.7;
}


/* テキスト-----------------------------------------------------------------*/
.em{font-weight: 600;}

/* 配置-----------------------------------------------------------------*/
.t-ct{text-align: center !important;}
.t-lt{  text-align: left !important;}
.t-rt{  text-align: right !important;}
.mt30{margin-top:30px !important;}
.mt61{margin-top:61px !important;}
.mb10{margin-bottom:10px !important;}
.mb24{margin-bottom:24px !important;}
.mb27{margin-bottom:27px !important;}
.mb30{margin-bottom:30px !important;}
.mb67{margin-bottom:67px !important;}
.mb86{margin-bottom:86px !important;}