
/* IKEDOについて ナビ */
main section.i-about-navi div.i-about-navi-wrapper {width:100%; padding:52px 15px 30px; box-sizing: border-box;}
main section.i-about-navi div.i-about-navi-wrapper h3.title {font-size: 2.6rem; line-height: 1.4; font-weight:bold; text-align: center; margin-bottom: 38px;}
main section.i-about-navi div.i-about-navi-wrapper nav{max-width: 100%; box-sizing: border-box; overflow: hidden; }
main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list{width:104%; overflow:hidden; display:flex; align-items: center; display: flex; justify-content: space-between; margin: 0 -2%; background: #444;}
main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a {height:250px; overflow: hidden; transform:skew(-10deg); background: #222; display: block; flex: 1; transition: all 0.4s ease;}
main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a:hover{opacity: 0.8;}
main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a:hover p.button:after{width:10px;}
main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a:hover div.about-navi-back{transform: skew(10deg) scale(1.08);}
main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a:first-child{flex: 1.1; padding: 0 0 0 1.5%;}
main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a:last-child{flex: 1.1; padding: 0 1.5% 0 0;}
main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a:nth-child(odd){background: #333;}
main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a div.about-navi-back{transform: skew(10deg); box-sizing: border-box; height: 100%; width:122%; margin: 0 -11%; position: relative; transition: all 0.4s ease;}
main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a div.about-navi-back div.about-navi-inner p.navi-text{font-size:2.3rem; line-height:1.5; font-weight:bold; text-align: center; display: flex; height: 170px; justify-content: center; align-items: center;}
main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a div.about-navi-back div.about-navi-inner p.button{position: absolute; left: 0; right: 0; bottom: 60px; margin: auto;}

div.about-navi-list a.value div.about-navi-back{background: url(/images/about-navi-back-value.jpg) no-repeat center center/cover;}
div.about-navi-list a.interview div.about-navi-back{background: url(/images/about-navi-back-interview.jpg) no-repeat center top/cover;}
div.about-navi-list a.summary div.about-navi-back{background: url(/images/about-navi-back-summary.jpg) no-repeat center center/cover;}
div.about-navi-list a.history div.about-navi-back{background: url(/images/about-navi-back-history.jpg) no-repeat center center/cover;}
div.about-navi-list a.careers div.about-navi-back{background: url(/images/about-navi-back-careers.jpg) no-repeat center center/cover;}
div.about-navi-list a.contact div.about-navi-back{background: url(/images/about-navi-back-contact.jpg) no-repeat center center/cover;}


/* タブレット */
@media (max-width: 1100px){

    main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list{width:100%; display:block; margin: 0;}
    main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a {height:auto; transform:skew(0deg);}
    main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a:first-child{padding: 0;}
    main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a:last-child{padding: 0;}
    main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a div.about-navi-back{transform: skew(0deg); height: 100%; width:100%; margin: 0;}
    main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a div.about-navi-back div.about-navi-inner p.navi-text{display: block; height: auto; padding: 50px 0 120px;}
    main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a div.about-navi-back div.about-navi-inner p.button{bottom: 45px;}
    main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a:hover div.about-navi-back{transform: skew(0deg) scale(1.08);}

    div.about-navi-list a.value div.about-navi-back{background: url(/images/about-navi-back-value_sp.jpg) no-repeat center center/cover;}
    div.about-navi-list a.interview div.about-navi-back{background: url(/images/about-navi-back-interview_sp.jpg) no-repeat left top/cover;}
    div.about-navi-list a.summary div.about-navi-back{background: url(/images/about-navi-back-summary_sp.jpg) no-repeat center center/cover;}
    div.about-navi-list a.history div.about-navi-back{background: url(/images/about-navi-back-history_sp.jpg) no-repeat center center/cover;}
    div.about-navi-list a.careers div.about-navi-back{background: url(/images/about-navi-back-careers_sp.jpg) no-repeat center center/cover;}
    div.about-navi-list a.contact div.about-navi-back{background: url(/images/about-navi-back-contact_sp.jpg) no-repeat center center/cover;}

}


/* スマホ */
@media (max-width: 760px){

  main section.i-about-navi div.i-about-navi-wrapper{padding: 34px 10px 10px;}
  main section.i-about-navi div.i-about-navi-wrapper h3.title{font-size:2.4rem; margin-bottom: 30px;}
  main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a{}

  main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a div.about-navi-back div.about-navi-inner p.navi-text{font-size: 2.0rem;  padding: 40px 0 105px;}
  main section.i-about-navi div.i-about-navi-wrapper nav div.about-navi-list a div.about-navi-back div.about-navi-inner p.button{bottom: 40px;}

}


@media (max-width: 500px){

    div.about-navi-list a.interview div.about-navi-back{background: url(/images/about-navi-back-interview_sp.jpg) no-repeat -30px top/cover;}

}
