@charset "utf-8";
/**********************************************/
/*
/*　　style.css  >> for lower pages
/*				2013.08.19~
/*
/**********************************************/
html { height:100%; }

.no-scroll {
  overflow: hidden;
  height: 100%;
}


body{
	background:#FFF;
	line-height:1.3;
	text-align:center;
	/*min-width:1100px;*/
	height:100%;
	font-family:Ubuntu Condensed,"KozGoPro-Light", "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
	font-size:16px;
}

/****************************/
/* common
/****************************/
/*float解除*/
.clearfix:after{
    content: "."; 
    display: block; 
    height: 0; 
    font-size:0;	
    clear: both; 
	visibility:hidden;
}
.clearfix {	display: inline-block; } 
 /* Hides from IE Mac */
* html .clearfix{ height: 1%; }
.clearfix{ display:block; }
 /* IE6 */
* html .clearfix { zoom: 1;}
 /* IE7 */
*:first-child+html .clearfix { zoom: 1;}

/*イメージ*/
img  { max-width: 100%;}

/*イメージhover処理*/
.imghover:hover { filter:alpha(opacity=70); opacity:0.7; }

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
nav ol, ul { list-style:none; }

/***aタグ共通設定***/
a:link, a:visited, a:active, a:hover{
	text-decoration: none !important;
	border-style:none;
}

/***フォントサイズ***/
.f20 { font-size:20px; }

/***フォントカラー***/
.color_w { color:#FFF; }
.color_r { color:#C30; }

/***マージン設定***/
.mt10 { margin-top:10px; }
.mt20p { margin-top:20%; }
.mt25p { margin-top:25%; }
.mt30 { margin-top:30px; }

/***パディング設定***/
.pt5 { padding-top:5px; }
.pt10 { padding-top:10px; }
.pt15 { padding-top:15px; }
.pt20 { padding-top:20px; }
.pt25 { padding-top:25px; }
.pt50 { padding-top:50px; }
.pt100 { padding-top:100px; }
.pb5 { padding-bottom:5px; }
.pb15 { padding-bottom:15px; }
.pb20 { padding-bottom:20px; }
.pb25 { padding-bottom:25px; }
.pb100 { padding-bottom:100px; }

/***整列***/
.al_l { text-align:left; }

/****************************/
/*ヘッダーエリア
/****************************/
#header{
	width:100%;
	position:fixed;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
	display:block;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
    z-index: 2;
}
/****ハンバーガー・ボタン***/
#header .btn-trigger {
    position: absolute;
    width: 25px;
    height: 22px;
    top:10px;
    right: 10px;
    z-index: 2;
    cursor: pointer;
}
#header .btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 4px;
}
#header .btn-trigger span:first-child {
  background-color: #ff1493;
}
#header .btn-trigger span:nth-child(2) {
  background-color: #ffd700;
}
#header .btn-trigger span:last-child {
  background-color: #4169e1;
}
#header .btn-trigger, #header .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
#header .btn-trigger span:nth-of-type(1) {
  top: 0;
}
#header .btn-trigger span:nth-of-type(2) {
  top: 10px;
}
#header .btn-trigger span:nth-of-type(3) {
  bottom: 0;
}

.btn-trigger span:nth-of-type(1) {
  -webkit-animation: hum-animation-01 .75s forwards;
  animation: hum-animation-01 .75s forwards;
}
@-webkit-keyframes hum-animation-01 {
  0% {
      -webkit-transform: translateY(10px) rotate(45deg);
      transform: translateY(10px) rotate(45deg);
  }
  50% {
      -webkit-transform: translateY(10px) rotate(0);
      transform: translateY(10px) rotate(0);
  }
  100% {
      -webkit-transform: translateY(0) rotate(0);
      transform: translateY(0) rotate(0);
  }
}

.btn-trigger span:nth-of-type(2) {
  transition: all .25s .25s;
  opacity: 1;
}
.btn-trigger span:nth-of-type(3) {
  -webkit-animation: hum-animation-03 .75s forwards;
  animation: hum-animation-03 .75s forwards;
}
@-webkit-keyframes hum-animation-03 {
  0% {
      -webkit-transform: translateY(-10px) rotate(-45deg);
      transform: translateY(-10px) rotate(-45deg);
  }
  50% {
      -webkit-transform: translateY(-10px) rotate(0);
      transform: translateY(-10px) rotate(0);
  }
  100% {
      -webkit-transform: translateY(0) rotate(0);
      transform: translateY(0) rotate(0);
  }
}

.btn-trigger.active span:nth-of-type(1) {
  -webkit-animation: active-hum-animation-01 .75s forwards;
  animation: active-hum-animation-01 .75s forwards;
}
@-webkit-keyframes active-hum-animation-01 {
  0% {
      -webkit-transform: translateY(0) rotate(0);
      transform: translateY(0) rotate(0);
  }
  50% {
      -webkit-transform: translateY(10px) rotate(0);
      transform: translateY(10px) rotate(0);
  }
  100% {
      -webkit-transform: translateY(10px) rotate(45deg);
      transform: translateY(10px) rotate(45deg);
  }
}
.btn-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.btn-trigger.active span:nth-of-type(3) {
  -webkit-animation: active-hum-animation-03 .75s forwards;
  animation: active-hum-animation-03 .75s forwards;
}
@-webkit-keyframes active-hum-animation-03 {
  0% {
      -webkit-transform: translateY(0) rotate(0);
      transform: translateY(0) rotate(0);
  }
  50% {
      -webkit-transform: translateY(-10px) rotate(0);
      transform: translateY(-10px) rotate(0);
  }
  100% {
      -webkit-transform: translateY(-10px) rotate(-45deg);
      transform: translateY(-10px) rotate(-45deg);
  }
}

/****メニュー***/
#header #menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  padding: 25% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0,0,0,0.75);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}

/* 表示されたときの状態 */
#header #menu.active {
  opacity: 1;
  pointer-events: auto;
}

/* 各リンクをアニメーション対象にする */
#header #menu li {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .5s ease, transform .5s ease;
}

/* active のとき1つずつ時間差でスライドイン */
#header #menu.active li {
  opacity: 1;
  transform: translateY(0);
}

/* 順番に遅延（好きに調整してください！）*/
#header #menu.active li:nth-child(1) { transition-delay: .1s; }
#header #menu.active li:nth-child(2) { transition-delay: .15s; }
#header #menu.active li:nth-child(3) { transition-delay: .2s; }
#header #menu.active li:nth-child(4) { transition-delay: .25s; }
#header #menu.active li:nth-child(5) { transition-delay: .3s; }
#header #menu.active li:nth-child(6) { transition-delay: .35s; }
#header #menu.active li:nth-child(7) { transition-delay: .4s; }
#header #menu.active li:nth-child(8) { transition-delay: .45s; }

#header #menu li a {
    color: #FFF;
    font-size: 18px;
    transition: color 0.3s;
}
#header #menu li a:hover {
    color: #EF2B80;
}

@media screen and (min-width:480px){
    #header #menu li a {
        font-size: 24px;
    }
}

@media screen and (min-width:640px){

}

@media screen and (min-width:768px){

}

@media screen and (min-width:980px){


}

@media screen and (min-width:1280px){
    /****ハンバーガー・ボタン***/
    #header .btn-trigger {
        position: absolute;
        width: 50px;
        height: 36px;
        top:15px;
        right: 15px;
    }
    #header .btn-trigger span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 4px;
      border-radius: 4px;
    }
    #header .btn-trigger span:first-child {
      background-color: #ff1493;
    }
    #header .btn-trigger span:nth-child(2) {
      background-color: #ffd700;
    }
    #header .btn-trigger span:last-child {
      background-color: #4169e1;
    }
    #header .btn-trigger, #header .btn-trigger span {
      display: inline-block;
      transition: all .5s;
      box-sizing: border-box;
    }
    #header .btn-trigger span:nth-of-type(1) {
      top: 0;
    }
    #header .btn-trigger span:nth-of-type(2) {
      top: 16px;
    }
    #header .btn-trigger span:nth-of-type(3) {
      bottom: 0;
    }

    .btn-trigger span:nth-of-type(1) {
      -webkit-animation: hum-animation-01 .75s forwards;
      animation: hum-animation-01 .75s forwards;
    }
    @-webkit-keyframes hum-animation-01 {
      0% {
          -webkit-transform: translateY(16px) rotate(45deg);
          transform: translateY(16px) rotate(45deg);
      }
      50% {
          -webkit-transform: translateY(16px) rotate(0);
          transform: translateY(16px) rotate(0);
      }
      100% {
          -webkit-transform: translateY(0) rotate(0);
          transform: translateY(0) rotate(0);
      }
    }

    .btn-trigger span:nth-of-type(2) {
      transition: all .25s .25s;
      opacity: 1;
    }
    .btn-trigger span:nth-of-type(3) {
      -webkit-animation: hum-animation-03 .75s forwards;
      animation: hum-animation-03 .75s forwards;
    }
    @-webkit-keyframes hum-animation-03 {
      0% {
          -webkit-transform: translateY(-16px) rotate(-45deg);
          transform: translateY(-16px) rotate(-45deg);
      }
      50% {
          -webkit-transform: translateY(-16px) rotate(0);
          transform: translateY(-16px) rotate(0);
      }
      100% {
          -webkit-transform: translateY(0) rotate(0);
          transform: translateY(0) rotate(0);
      }
    }

    .btn-trigger.active span:nth-of-type(1) {
      -webkit-animation: active-hum-animation-01 .75s forwards;
      animation: active-hum-animation-01 .75s forwards;
    }
    @-webkit-keyframes active-hum-animation-01 {
      0% {
          -webkit-transform: translateY(0) rotate(0);
          transform: translateY(0) rotate(0);
      }
      50% {
          -webkit-transform: translateY(16px) rotate(0);
          transform: translateY(16px) rotate(0);
      }
      100% {
          -webkit-transform: translateY(16px) rotate(45deg);
          transform: translateY(16px) rotate(45deg);
      }
    }
    .btn-trigger.active span:nth-of-type(2) {
      opacity: 0;
    }
    .btn-trigger.active span:nth-of-type(3) {
      -webkit-animation: active-hum-animation-03 .75s forwards;
      animation: active-hum-animation-03 .75s forwards;
    }
    @-webkit-keyframes active-hum-animation-03 {
      0% {
          -webkit-transform: translateY(0) rotate(0);
          transform: translateY(0) rotate(0);
      }
      50% {
          -webkit-transform: translateY(-16px) rotate(0);
          transform: translateY(-16px) rotate(0);
      }
      100% {
          -webkit-transform: translateY(-16px) rotate(-45deg);
          transform: translateY(-16px) rotate(-45deg);
      }
    }

}

/****************************/
/*ボタン『pageTop』
/****************************/
#page_top{
  width: 40px;
  height: 40px;
  position: fixed;
  right: -50px;
  bottom: 10px;
  background: #000000;
  opacity: 1;
  border-radius: 50%;
    z-index: 100;
}
#page_top a{
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  text-decoration: none;
}
#page_top a::before{
  font-weight: 900;
  content: '↑';
  font-size: 20px;
  color: #fff;
  position: absolute;
  width: 20px;
  height: 20px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/****************************/
/*ボタン『know』
/****************************/
.btn_know_area {
	position:absolute;
	bottom:10px;
	left:0;
	right:0;
	margin:0 auto;
	z-index:1;
	width:80px;
}
.btn_know_area.for_scroll {
	position:relative;	
}
.btn_know_area li.button {
	position:relative;
	height:75px;
	padding-bottom:5px;
}
.btn_know_area li.button>a>img {
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
}
.btn_know_area li.know_jp {
	font-size:13px;
}

.section {
    position: relative;
}
/****************************/
/*グローバルメニューの下に白背景（スクロール用）
/****************************/
.bg_fixed_menu {
	width:100%;
	height:80px;
	background:url(../img/bg_global_menu.png) repeat-x center bottom;
	text-indent:-99999px;
	position:absolute;
	top:0;
	left:0;
	z-index:3;
}

/****************************/
/*ページ❶
/****************************/
#section1 {
	position:relative;
    height: 100vh;
    overflow: hidden;
}
#section1 #top_contents {
    position: relative;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
}
#section1 #company_logo {
    width: 95%;
    padding-top: 50px;
    padding-left: 10px;
    box-sizing: border-box;
}
#section1 #top_deco {
    position: absolute;
    top: 50px;
    left: -100px;
}
#section1 #top_deco img {
    width: 150%;
    height: auto;
}
#img_k {
    width: 100%;
	position:absolute;
	top:0;
	left:0;
    z-index: 0;
}
#img_k p {
    height: 100vh;
    margin: 0;
}
#img_k p.slick__bg01 {
    background: url("../img/top1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
}
#img_k p.slick__bg02 {
    background: url("../img/top2.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#img_k p.slick__bg03 {
    background: url("../img/top3.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
}

#top_contents > div {
    margin-left: auto;
    margin-right: 15px;
    position: relative;
}
#top_contents h1 {
    color: #FFFFFF;
	font-size:24px;
}
#top_contents h2 {
	color:#FFFFFF;
	font-size:16px;
	font-weight:normal;
}
#top_contents p.btn_entry {
    color:#FFFFFF;
	margin-top:10px;
}

@media screen and (min-width:480px){
    #top_contents h1 {
        font-size:36px;
    }
    #top_contents h2 {
        font-size:22px;
    }
    #top_contents p.btn_entry {
        margin-top:10px;
        font-size: 18px;
    }
}

@media screen and (min-width:980px){
    #top_contents h1 {
        font-size:48px;
    }
    #top_contents h2 {
        font-size:28px;
    }
    #top_contents p.btn_entry {
        margin-top:10px;
        font-size: 24px;
    }
}

@media screen and (min-width:1280px){
    #top_contents > div {
        margin-right: 15%;
    }
}

/****************************/
/*ページ❷
/****************************/
#section2 {
    padding-top: 2em;
    padding-bottom: 2em;
}
#section2 .inner {
	position:relative;
	text-align:center;
    margin-bottom: 5em;
}

/*スライド1*/
#s2_s1 {
	width:90%;
	margin:0 auto;
}
#s2_s1>h3 {
	font-size:26px;
	line-height:1.8;
}
#s2_s1>h3 p {
	font-size:18px;
	font-weight:normal;
}
#s2_s1>h3 span {
    font-size: 38px;
	position: relative;
}
#s2_s1>h3 span:before {
    content: "・・・";
    position: absolute;
    display: block;
    top: -38px;
    left: 0;
}
#s2_s1>p {
	text-align:left;
	line-height:1.8;
}
#wrap_deco {
	display: none;
}
#deco01 {
	position:absolute;
	top:160px;
	left:-250px;
}
#deco02 {
	position:absolute;
	top:160px;
	right:-140px;
}
#deco03 {
	position:absolute;
	top:680px;
	right:-150px;
}
#deco04 {
	position:absolute;
	top:700px;
	left:-240px;
}
/*横スクロール*/
.horizontal_scroll {
    height: 300vh;
}

.horizontal_scroll .scroller {
    position: absolute;
    top: 0;
    height: 100%;
    width: 300vw;
    will-change: transform;
    display: flex;
    justify-content:space-between;
    align-items: stretch;
}

.horizontal_scroll .slide {
    width: 100vw;
    height: 100vh;
  /*flex-shrink: 0;*/
}

.horizontal_scroll .sticky {
    overflow: hidden;
    position:sticky;
    top: 0;
    height: 100vh;
}

/*.horizontal_scroll {
    margin: 3em 0;
}*/
/*スライド2～4共通*/
.policy_slide ul {
	display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.policy_slide .left_side {
	width:100%;
    height: 180px;
    padding: 10px 15px;
	text-align:left;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.policy_slide .right_side {
	width:100%;
    padding: 0 10px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.policy_slide .left_side h4 {
	font-size:16px;
	font-weight:normal;
}
.policy_slide .left_side h4 span {
	font-size:30px;
}
.policy_slide .right_side h5 {
    margin: 10px 0 15px;
	font-size:18px;
	line-height:1.4;
	text-align:center;
}
.policy_slide .right_side>p {
    font-size: 15px;
	line-height:1.6;
	text-align:left;
}

/*スライド2*/
#s2_s2 .left_side {
	background:url(../img/policy_bg01.jpg) no-repeat;
	background-size:cover;
    background-position: top left;
}

/*スライド3*/
#s2_s3 .left_side {
	background:url(../img/policy_bg02.jpg) no-repeat;
    background-size: cover;
	background-position: top left;
}

/*スライド4*/
#s2_s4 .left_side {
	background:url(../img/policy_bg03.jpg) no-repeat 45% bottom;
	background-size:cover;
    background-position: top left;
}

@media screen and (min-width:480px){
    .policy_slide .left_side {
        height: 240px;
    }
    .policy_slide .left_side h4 {
        font-size:18px;
    }
    .policy_slide .left_side h4 span {
        font-size:34px;
    }
    .policy_slide .right_side h5 {
        margin: 15px 0 20px;
        font-size:22px;
        line-height:1.6;
    }
    .policy_slide .right_side>p {
        font-size: 16px;
        line-height:1.8;
    }
}

@media screen and (min-width:640px){
    #section2 .slide {
        height: 100vh;
        overflow: hidden;
    }
    /*スライド1*/
    #s2_s1 {
        width:90%;
        margin:0 auto;
    }
    #s2_s1>h3 {
        font-size:34px;
        line-height:1.8;
    }
    #s2_s1>h3 p {
        font-size:24px;
    }
    #s2_s1>h3 span {
        font-size: 48px;
    }
    #s2_s1>h3 span:before {
        content: "・・・";
        position: absolute;
        display: block;
        top: -48px;
        left: 0;
    }
    #s2_s1>p {
        text-align:left;
        font-size: 16px;
        line-height:1.8;
    }
    #wrap_deco {
        width: 640px;
        margin: 0 auto;
        display: block;
        position: relative;
    }
    #deco01 {
        position:relative;
        top:0;
        left:0;
        width:228;
        height:259;
    }
    #deco02 {
        position:absolute;
        top:0;
        right:0;
        width:247;
        height:211;
    }
    #deco03 {
        position:relative;
        top:-150px;
        left:-50px;
        width:253;
        height:273;
    }
    #deco04 {
        position:absolute;
        top:50px;
        left:0;
        width:241;
        height:201;
    }   
    .policy_slide ul {
        display: flex;
        height: 100vh;
        flex-direction: row;
        justify-content: flex-start;
    }
    .policy_slide .left_side {
        width:30%;
        height: auto;
        padding-left: 10px;
        text-align:left;
    }
    .policy_slide .right_side {
        width:70%;
        padding: 0 10px;
    }
    
    .policy_slide .left_side h4 span {
        display: block;
    }
    .policy_slide .right_side>p {
        font-size: 16px;
        line-height: 2.2;
        padding: 0 20px;
    }
    
    /*スライド2*/
    #s2_s2 .left_side {
        background:url(../img/policy_bg01.jpg) no-repeat;
        background-size:cover;
        background-position: top left 30%;
    }

    /*スライド3*/
    #s2_s3 .left_side {
        background:url(../img/policy_bg02.jpg) no-repeat 25% bottom;
        background-size:cover;
    }

    /*スライド4*/
    #s2_s4 .left_side {
        background:url(../img/policy_bg03.jpg) no-repeat 45% bottom;
        background-size:cover;
        background-position: top left 20%;
    }
}

@media screen and (min-width:980px){
    #s2_s1>h3 {
        font-size:38px;
        line-height:1.8;
    }
    #s2_s1>h3 p {
        font-size:28px;
    }
    #s2_s1>h3 span {
        font-size: 52px;
    }
    #s2_s1>h3 span:before {
        content: "・・・";
        position: absolute;
        display: block;
        top: -52px;
        left: 0;
    }
    #s2_s1>p {
        text-align: left;
        font-size: 18px;
        line-height: 2.4;
    }
    #deco01 {
        left: 80px;
    }
    #deco02 {
        top: 80px;
    }
    #deco03 {
        left: -100px;
    }
    .policy_slide .left_side h4 span {
        display: inline-block;
    }
    .policy_slide .right_side h5 {
        margin: 15px 0 30px;
        font-size: 28px;
        line-height: 1.6;
    }
    .policy_slide .right_side>p {
        font-size: 18px;
        line-height: 2.2;
        padding: 0 20px;
    }
}

@media screen and (min-width:1280px){
    #s2_s1 {
        width:1012px;
        margin:0 auto;
    }
    #s2_s1>h3 {
        line-height:2.4;
    }
    #s2_s1>h3 span:before {
        top: -72px;
    }
    #s2_s1>p {
        text-align:left;
        line-height:2.4;
        padding-bottom:10px;
    }
    
    #wrap_deco {
        width: 900px;
        margin: 0 auto;
        display: block;
        position: relative;
    }
    

    /*スライド2～4共通*/
    .policy_slide ul li {
        float:left;
    }
    .policy_slide .left_side {
        width:38%;
        text-align:left;
        padding-left:100px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .policy_slide .right_side {
        width:62%;
        padding:0 80px 0 50px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }

    .policy_slide .left_side h4 {
        font-size:24px;
        font-weight:normal;
    }
    .policy_slide .left_side h4 span {
        font-size:40px;
    }
    .policy_slide .right_side h5 {
        margin: 80px 0 30px;
        font-size:28px;
        line-height:1.6;
        text-align:center;
    }    
    
    .policy_slide .right_side>p {
        line-height:2.4;
        text-align:left;
    }

    /*スライド2*/
    #s2_s2 .left_side {
        background:url(../img/policy_bg01.jpg) no-repeat 25% bottom;
        background-size:auto 100%;
    }

    /*スライド3*/
    #s2_s3 .left_side {
        background:url(../img/policy_bg02.jpg) no-repeat 25% bottom;
        background-size:auto 100%;
    }

    /*スライド4*/
    #s2_s4 .left_side {
        background:url(../img/policy_bg03.jpg) no-repeat 45% bottom;
        background-size:auto 100%;
    }
}

/****************************/
/*ページ❸
/****************************/
#section3 {
    width: 95%;
    margin: 0 auto;
    padding-bottom: 150px;
}
#section3 h3 {
    font-size: 36px;
    margin-bottom: 1em;
}
#section3 #people_box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#section3 #people_box > li {
    margin-bottom: 4em;
}
.box_hover {
    position:relative;
	width:280px;
    height: 400px;
	padding-top:5px;
    cursor:pointer;
    box-sizing:border-box;
}
#box_market {
	background:url(../img/people_eigyou.png) no-repeat top left;
}
#box_design {
	background:url(../img/people_design.png) no-repeat top left;
}
#box_printing {
	background:url(../img/people_insatsu.png) no-repeat top left;
}

.box_hover>img {
	position:relative;
}
.box_hover>p {
	position:absolute;
	top:0;
	left:0;
}

/*隠れコンテンツ共通*/
.hidden_people_contents{
	display:none;
	position:fixed;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
    padding: 10px;
	background: rgba(255,255,255,0.85);
	z-index:5;
    box-sizing: border-box;
    overflow: hidden;
}
.hidden_people_contents .close_contents {
	position:absolute;
	top:10px;
	right:10px;
	cursor:pointer;
}
.hidden_people_contents h4 {
	font-size:20px;
	padding-bottom:5px;
	border-bottom:1px solid #000;
	text-align:left;
}
.hidden_people_contents h5 {
	text-align:left;
	font-size:18px;
	margin-top:10px;
}
.people_contents {
    height: 70%;
	margin-top:2em;
    overflow-y: auto;
    padding-bottom: 20px;
}
.people_contents_left {
	text-align:left;
	padding:0 15px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.people_contents_left h6 {
	font-size:16px;
	font-weight:900;
    margin-bottom: 1em;
}
.people_contents_left h6 span {
	border-bottom:1px solid #000;
}
.people_contents_left p {
	line-height:1.6;
}
.people_contents_right {
    margin-top: 1em;
	text-align:left;
	position:relative;
	padding:0 15px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
   	box-sizing:border-box;
}
.people_contents_right h6 {
	text-align:center;
	font-size:30px;
	color:#7d7d7d;
}
.people_contents_right dl {
	border:8px solid #e2e2e2;
	padding:10px;
}
.people_contents_right dl dt:before {
	content:url(../img/index_arrow_r.gif);
	margin-right:5px;
}
.people_contents_right dl dt span {
	padding-left:15px;
}
.people_contents_right dl dd {
	margin-bottom:15px;
	font-size:14px;
	line-height:1.5;
}
.people_contents_right dl dd:last-child {
	margin-bottom:0px;	
}

/*営業コンテンツ*/
#contents_market h4:before {
	content:url(../img/img_number01.gif);
	margin-right:15px;
	position:relative;
	top:8px;
}
/*デザインコンテンツ*/
#contents_design h4:before {
	content:url(../img/img_number02.gif);
	margin-right:15px;
	position:relative;
	top:8px;
}
#contents_design .people_title {
	margin-right:120px;
}
/*印刷コンテンツ*/
#contents_printing h4:before {
	content:url(../img/img_number03.gif);
	margin-right:15px;
	position:relative;
	top:8px;
}
#contents_printing .people_title {
	margin-right:120px;
}

@media screen and (min-width:480px){
    .people_contents {
        height: 80%;
    }
    .people_contents_right dl dd {
        font-size:16px;
        line-height:1.6;
    }
}

@media screen and (min-width:768px){
    .hidden_people_contents h4 {
        font-size: 24px;
        padding-bottom: 5px;
        border-bottom: 1px solid #000;
        text-align: left;
    }
    .hidden_people_contents h5 {
        text-align: left;
        font-size: 24px;
        margin-top: 10px;
    }
    .people_contents_left h6 {
        font-size: 20px;
        font-weight: 900;
        margin-bottom: 1em;
    }
    .people_contents_right dl {
        padding: 20px;
    }
}

@media screen and (min-width:980px){
    #section3 {
        height: 100vh;
        padding-bottom: 0;
    }
    #section3 h3 {
        font-size: 48px;
        padding-top: 1em;
        margin-bottom: 2em;
    }
    #section3 #people_box {
        width: 900px;
        margin: 0 auto;
        flex-direction: row;
        justify-content: space-between;
    }
    .box_hover>img {
        position:relative;
    }
    .box_hover>p {
        position:absolute;
        top:0;
        left:0;
        opacity:0;
        transition: opacity 0.5s;
    }
    .box_hover>p:hover {
        opacity: 1;
    }
    
    .hidden_people_contents {
        padding: 20px 15px;
    }
    #section3 .people_contents {
        margin-top: 4em;
        display: flex;
        justify-content: space-between;
    }
    #section3 .people_contents .people_contents_left {
        width: 60%;
    }
    #section3 .people_contents .people_contents_right {
        width: 40%;
    }
}

@media screen and (min-width:1280px){
    #people_box {
        width:880px;
        margin:0 auto;
    }
    #people_box>li {
        float:left;
        margin-right:35px;
        font-size:18px;
    }
    #people_box>li:last-child {
        margin-right:0;	
    }
    .box_hover>img {
        position:relative;
        z-index:1;
    }
    .box_hover>p {
        position:absolute;
        top:0;
        left:0;
        z-index:0;
        opacity:0;
        filter: alpha(opacity=0);
        -webkit-transition: 0.5s ease-in-out;
         -moz-transition: 0.5s ease-in-out;
         -o-transition: 0.5s ease-in-out;
         transition: 0.5s ease-in-out;
    }
    .box_hover:hover>p {
        opacity:1;
        filter: alpha(opacity=100);
    }
    /*隠れコンテンツ共通*/
    .hidden_people_contents{
        display:none;
        position:absolute;
        width:1118px;
        height:auto;
        top:15%;
        left:0;
        right:0;
        margin:0 auto;
        padding: 20px;
        z-index:6;
        border-radius: 12px;
        box-sizing: border-box;
        box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.29);
    }
    .hidden_people_contents .close_contents {
        position:absolute;
        top:10px;
        right:10px;
        cursor:pointer;
    }
    .hidden_people_contents h4 {
        font-size:20px;
        padding-bottom:5px;
        border-bottom:1px solid #000;
        text-align:left;
    }
    .hidden_people_contents h5 {
        text-align:center;
        font-size:26px;
        margin-top:10px;
    }
    .people_contents {
        margin-top:60px;
    }
    .people_contents_left {
        float:left;
        text-align:left;
        width:55%;
        padding:0 40px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .people_contents_left h6 {
        font-size:20px;
        font-weight:normal;
    }
    .people_contents_left h6 span {
        border-bottom:1px solid #000;
    }
    .people_contents_left p {
        line-height:2.0;
    }
    .people_contents_right {
        float:left;
        text-align:left;
        width:45%;
        position:relative;
        padding:0 40px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .people_contents_right h6 {
        text-align:center;
        font-size:30px;
        color:#7d7d7d;
    }
    .people_contents_right dl {
        border:8px solid #e2e2e2;
        padding:10px;
    }
    .people_contents_right dl dt:before {
        content:url(../img/index_arrow_r.gif);
        margin-right:5px;
    }
    .people_contents_right dl dt span {
        padding-left:15px;
    }
    .people_contents_right dl dd {
        margin-bottom:15px;
        font-size:14px;
        line-height:1.5;
    }
    .people_contents_right dl dd:last-child {
        margin-bottom:0px;	
    }
    .people_contents_right .people_title {
        margin-top:10px;
        font-size:14px;
        text-align:right;
        margin-right:80px;
    }
    .people_contents_right .people_img {
        position:absolute;
        top:-30px;
        right:0;
    }
    /*営業コンテンツ*/
    #contents_market h4:before {
        content:url(../img/img_number01.gif);
        margin-right:15px;
        position:relative;
        top:8px;
    }
    /*デザインコンテンツ*/
    #contents_design h4:before {
        content:url(../img/img_number02.gif);
        margin-right:15px;
        position:relative;
        top:8px;
    }
    #contents_design .people_title {
        margin-right:120px;
    }
    /*印刷コンテンツ*/
    #contents_printing h4:before {
        content:url(../img/img_number03.gif);
        margin-right:15px;
        position:relative;
        top:8px;
    }
    #contents_printing .people_title {
        margin-right:120px;
    }
}
/****************************/
/*ページ❹
/****************************/
#section4 {
	position:relative;
}
.contents_wrap {
	width:100%;
	margin:0 auto;
}
.contents_wrap #talk_main img {
	max-width:100%;
}
#talk_contents {
	padding:15px 10px 50px 10px;
	position:relative;
}
#talk_contents li {
	border:5px solid #000;
	padding:20px;
	text-align:left;
	margin-bottom:10px;
	position:relative;
    box-sizing: border-box;
}
#talk_contents li #box_img03 {
	position:absolute;
	bottom:-5px;
	right:-5px;
	padding:0;
}
#talk_contents li#box_q4 #box_img04 {
	position:absolute;
	top:0;
	left:-393px;
	padding:0;
}
#talk_contents li dl dt {
	font-size:24px;
    padding-left: 40px;
    position: relative;
}
#talk_contents li dl dt span { 
    position: absolute;
    left: 0;
}
#talk_contents li dl dd {
	padding-left:80px;
	margin-top:15px;
    min-height: 60px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
#talk_contents li dl dd.icon_oota {
	background:url(../img/icon_5.png) no-repeat left top;
}
#talk_contents li dl dd.icon_ichikawa {
	background:url(../img/icon_1.png) no-repeat left top;
}
#talk_contents li dl dd.icon_nakaoka {
	background:url(../img/icon_6.png) no-repeat left top;
}
#talk_contents li dl dd.icon_nakajima {
	background:url(../img/icon_3.png) no-repeat left top;
}
#talk_contents li dl dd.icon_takemura {
	background:url(../img/icon_4.png) no-repeat left top;
}
#talk_contents li dl dd.icon_adachi {
	background:url(../img/icon_2.png) no-repeat left top;
}

@media screen and (min-width:980px){
    #talk_contents {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 18px 0 50px;
    }
    #talk_contents li {
        width: 49%;
        margin-bottom: 15px;
    }
    #talk_contents li#box_q3 {
        width: 100%;
        background: url("../img/talk3.png") no-repeat;
        background-position: bottom -5px right -5px;
    }
    #talk_contents li#box_q3 .modify {
        width: 60%;
    }
    #talk_contents li#box_q3 .modify br {
        display: none;
    }
    #talk_contents li#box_q4 {
        background: url("../img/talk1.png") no-repeat;
        background-position: bottom -5px left -5px;
    }
    #talk_contents li dl dd {
        line-height: 1.6;
    }
}

@media screen and (min-width:1280px){
    #talk_contents {
        width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 18px 0 50px;
    }
}


/****************************/
/*ページ❺
/****************************/
#section5 {
    padding-top: 50px;
    padding-bottom: 50px;
}
#section5 h3 {
	background:url(../img/bg_data.gif) no-repeat center top;
	width:348px;
	height:71px;
	margin:0 auto;
	font-size:38px;
	font-weight:normal;
	margin-bottom:40px;
}
#data_area {
	width:95%;
	margin:0 auto;
	padding-bottom:100px;
}
#data_left {
	width:100%;
    margin: 0 auto;
	margin-top:10px;
}
#data_left ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}
#data_left ul li {
	width:24%;
	height:auto;
	background:#d3d3d3;
    margin-bottom: 5px;
	cursor:pointer;
}
#data_left ul li:hover {
	background:#999;
}
#data_left ul li.active {
	background:#000;
}
#data_right {
	width:100%;
	height:auto;
	margin-top:20px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.data_contents h4 {
    margin-bottom: 15px;
	font-size:24px;
}
.data_contents li.hide {
	display:none;	
}
@media screen and (min-width:480px){
    #section5 .inner {
        padding-top: 50px;
    }
}

@media screen and (min-width:980px){
    #section5 {
        padding-top: 0;
        padding-bottom: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #section5 .inner {
        padding-top: 0;
    }
    #section5 h3 {
        margin-bottom:0;
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        margin: auto;
    }
    #section5 #data_area {
        width: 931px;
        margin: 0 auto;
        margin-top: 5em;
        display: flex;
        justify-content:center;
        align-items: baseline;
    }
    #section5 #data_area #data_left {
        width: 310px;
    }
    #section5 #data_area #data_right {
        width: 60%;
    }
    #section5 #data_area #data_left .data_btn {
        display: flex;
        justify-content: space-between;
    }
    #section5 #data_area #data_left .data_btn li {
        width: 150px;
        height: 150px;
        margin-bottom: 10px;
    }
}

@media screen and (min-width:1280px){
    
}

/****************************/
/*ラインナップ❻
/****************************/
#section6 {
    padding-bottom: 180px;
}
#section6 h3 {
	font-size:38px;
	font-weight:normal;
	margin-top:90px;
}
#section6 h3:before {
	content:url(../img/index_qa_title.gif);
	position:relative;
	top:30px;
}
#qa_area {
	width:95%;
	margin:0 auto;
	margin-top:70px;
}
#qa_left {
	width:100%;
}
#qa_left dl {
    width: 100%;
	border:1px solid #b5b6b6;
	text-align:left;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
dt,
dd.select {
  cursor: pointer;
}
#qa_left dl dt {
	width: 30%;
	padding:0 10px;
    display: flex;
    align-items: center;
	background:#b5b6b6;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
#qa_left dl dt.select {
	background:#000000;
}
#qa_left dl dd.question {
    width: 70%;
	padding:15px;
	border-bottom:1px solid #e1e1e1;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	background:url(../img/arrow_d_s.jpg) no-repeat 98% center;
	background-size:10px auto;
	cursor:pointer;
}
#qa_left dl dd.answer {
    display: none;
    width: 100%;
    padding: 10px;
    border-bottom:1px solid #e1e1e1; 
}
#qa_left dl dd.select {
	background:#e1e1e1;
}
#qa_left dl dd:last-child {
	border-bottom:none;
    padding: 0;
    padding-top: 15px;
}
#qa_right {
	display: none;
}
@media screen and (min-width:480px){
    #qa_left dl dd.answer {
        line-height: 1.6; 
    }
}

@media screen and (min-width:980px){
    #section6 {
        height: 100vh;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #section6 h3 {
        font-size:38px;
        font-weight:normal;
        margin-top:0;
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        margin: auto;
    }
    #section6 h3:before {
        content:url(../img/index_qa_title.gif);
        position:relative;
        top:30px;
    }
    #qa_area {
        display: flex;
        width:950px;
        margin:0 auto;
        margin-top:70px;
    }
    #qa_left {
        width:400px;
    }
    #qa_left dl {
        border:1px solid #b5b6b6;
        text-align:left;
    }
    
    #qa_left dl dd.question {
        padding:15px;
        border-bottom:1px solid #e1e1e1;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        background:url(../img/arrow_r_s.jpg) no-repeat 98% center;
        background-size:10px auto;
        cursor:pointer;
    }
    #qa_left dl dd.select {
        background:#e1e1e1;
    }
    #qa_left dl dd.line2 {
        padding:10px 25px 0 140px;
    }
    #qa_left dl dd:nth-last-child(2) {
        border-bottom:none;	
    }
    #qa_left dl dd.answer {
        display: none !important;
    }
    #qa_right {
        display: block;
        width:500px;
        text-align:left;
    }
    .qa_contents {
        height:100%;
        margin-left:40px;
        border-top:1px solid #b5b6b6;
        border-bottom:1px solid #b5b6b6;
        background: url("../img/illust_q00.png") no-repeat;
        background-position: center;
        background-size: 260px auto;
    }
    .qa_contents.bg_hide {
        background: none;
    }
    .qa_contents li {
        line-height:1.8;
        height:100%;
        padding-top:20px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .qa_contents li.qa07 {
        padding-left:0;
        position:relative;
    }
    .qa_contents li.qa07 p img {
        position:absolute;
        bottom:0;
        left:0;
    }
    .qa_contents li.hide {
        display:none;	
    }
    .qa_contents li img {
        max-width:100%;	
    }
    .q01 {
        background:url(../img/illust_q01.gif) no-repeat right bottom;
        background-size: 200px auto;
    }
    .q02 {
        background:url(../img/illust_q02.gif) no-repeat right bottom;
        background-size: 250px auto;
    }
    .q03 {
        background:url(../img/illust_q03.gif) no-repeat right bottom;
        background-size: 400px auto;
    }
    .q04 {
        background:url(../img/illust_q04.gif) no-repeat right bottom;
        background-size: 250px auto;
    }
    .q05 {
        background:url(../img/illust_q05.gif) no-repeat right bottom;
        background-size: 300px auto;
    }
    .q06 {
        background:url(../img/illust_q06.gif) no-repeat right bottom;
        background-size: 250px auto;
    }
}

@media screen and (min-width:1280px){
    #qa_area {
            display: flex;
            width: 1100px;
            margin: 0 auto;
            margin-top: 70px;
    }
    #qa_left {
        width: 500px;
    }
    #qa_right {
        display: block;
        width: 600px;
        text-align: left;
    }
}

/****************************/
/*ラインナップ❼
/****************************/
#bg_recruit {
	width:95%;
	margin:0 auto;
	/*background:url(../img/bg_recruit_head.png) no-repeat left top;*/
    background-size: 100%;
	padding-top:50px;
	padding-bottom:60px;
	margin-top:50px;
}
#contents_recruit {
	background:url(../img/bg_recruit_middle.png) repeat-y left top;
    background-size: 100%;
	padding:30px 10%;
    position: relative;
}

/*#contents_recruit:after {
    content: "";
    display: block;
    width: 100%;
    height: 30px;
    position: absolute;
    background: url("../img/bg_recruit_foot.png") no-repeat;
    background-size: 100%;
    bottom: -40px;
    left: 0;
}*/
#contents_recruit h3 {
	font-size:32px;
	font-weight:normal;
}
#contents_recruit h3 span {
	border-bottom:2px solid #000;	
}
#contents_recruit dl {
	margin-top:20px;
	text-align:left;
	padding-bottom:20px;
}
#contents_recruit dt {
	font-weight:bold;
	padding-top:10px;
}
#contents_recruit dd {
	padding:10px 0 10px 0;
	border-bottom:1px solid #000;
	line-height:1.5;
}
#contents_recruit dd ul li {
    text-align: center;
	padding-bottom:30px;
	background:url(../img/arrow_b.png) no-repeat;
	background-size:12px auto;
    background-position: center 30px;
	
}
#contents_recruit dd ul li:last-child {
	background:none;
	padding-bottom:10px;
}
#contents_recruit dd .btn_entry {
	text-align:center;
	margin-top:20px;
	position:relative;
	z-index:2;
}
#recruit_deco {
    display: none;
}

#section7 .btn_entry {
    margin: 2em 0;
}
#section7 .btn_mynavi {
    width: 150px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 1em;
}

@media screen and (min-width:768px){
    #bg_recruit {
        width:729.5px;
        margin:0 auto;
        /*background:url(../img/bg_recruit_head.png) no-repeat left top;*/
        background-size: 100%;
        padding-top:50px;
        padding-bottom:60px;
        margin-top:50px;
    }
}
@media screen and (min-width:980px){
    #section7 {
        position: relative;
        overflow: hidden;
    }
    #bg_recruit {
        width:781px;
        margin:0 auto;
        /*background:url(../img/bg_recruit_head.png) no-repeat left top;*/
        background-size: 100%;
        padding-top:50px;
        padding-bottom:60px;
        margin-top:50px;
    }
    
    #contents_recruit dl {
        margin-top:20px;
        text-align:left;
        padding-bottom:20px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    #contents_recruit dl dt {
        width: 20%;
        border-bottom:1px solid #000;
    }
    #contents_recruit dl dd {
        width: 80%;
    }
    
    #recruit_deco {
        display: block;
    }
    #deco06 {
        position:absolute;
        bottom:150px;
        right:0px;
    }
    #deco07 {
        position:absolute;
        top:500px;
        left:40px;
    }
    #deco08 {
        position:absolute;
        top:90px;
        right:-70px;
    }

}

@media screen and (min-width:1280px){
    #section7 {
        width: 1100px;
        margin: 0 auto;
    }
    #deco07 {
        position: absolute;
        top: 500px;
        left: 120px;
    }
    #deco08 {
        position: absolute;
        top: 90px;
        right: 20px;
    }
}

/****************************/
/*ラインナップ❽
/****************************/
#section8 {
    padding: 20px 10px 0;
	background:url(../img/msg_bg.jpg) no-repeat center top;
	background-size:cover;
}
/*.bg_msg {
	background:url(../img/img_president.png) no-repeat 10% bottom;
	background-size:auto 80%;
}*/
#president_msg {
	text-align:left;
	margin-top:10px;
}
#president_msg h3 {
	width:100%;
	margin-left:auto;
	font-size:26px;
}
#president_msg #msg_contents {
	font-size:14px;
	line-height:1.8;
}
#president_msg #msg_sign {
	text-align:right;
	height:36px;
	font-size:14px;
	line-height:1.4;
    margin-top: 20px;
	padding-bottom:50px;
	background:url(../img/img_president_name.png) no-repeat right center;
}

/*#img_president {
    float: right;
    bottom: 0;
    right: -100px;
    position: relative;
}
#img_president img {
	max-width:95%;	
}*/

@media screen and (min-width:480px){
    #president_msg #msg_contents {
        font-size:16px;
        line-height:1.8;
    }
    #img_president {
        width: 60%;
        margin: 0 auto;
    }
}
@media screen and (min-width:640px){
    #president_msg {
        padding: 0 10px;
    }
}
@media screen and (min-width:980px){
    #president_msg {
        width:900px;
        margin:0 auto;
        text-align:left;
        margin-top:50px;
        position: relative;
    }
    #president_msg h3 {
        width:500px;
        margin-left:auto;
        font-size:26px;
    }
    #president_msg #msg_contents {
        width:500px;
        margin-left:auto;
        font-size:14px;
        line-height:1.8;
    }
    #section8 #img_president {
       position: absolute;
        left: 0;
        bottom: 0;
        width: 400px;
        height: auto;
    }
}
@media screen and (min-width:1280px){
    #president_msg {
        width:1100px;
        margin:0 auto;
        text-align:left;
        margin-top:200px;
    }
    #president_msg h3 {
        width:600px;
        margin-left:auto;
        font-size:28px;
    }
    #president_msg #msg_contents {
        width:600px;
        margin-left:auto;
        font-size:18px;
        line-height:1.8;
    }
    #president_msg #msg_sign {
        text-align:right;
        height:36px;
        font-size:14px;
        line-height:2.4;
        padding-right:180px;
        background:url(../img/img_president_name.png) no-repeat right center;
    }
    #section8 #img_president {
       position: absolute;
        left: 0;
        bottom: 0;
        width: 500px;
        height: auto;
    }
}