@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*
--------------------------
[Fluid Design Template] v3
--------------------------
*/

/* 基本CSS */
@import url('import/01_core.css');
/* 汎用CSS */
@import url('import/02_extend.css');
/* 拡張CSS */
@import url('import/03_additional.css?20250528');

/* 独自CSS */
/*
HTMLのbody要素に、ページごとに異なるidを付加することで、
他の要素を汚染しにくい記述ができると思います。
(例)
#page_name tag.class{
  property: value;
}
*/


/* ------------------------------
文字・背景・アイコン
------------------------------ */
.color_green {color: #007530 !important;}
.color_white {color: #FFF !important;}
.color_red {color: #C30D23 !important;}
.color_blue {color: #1071D0 !important;}
.color_yellow {color: #F3C62D !important;}

.shadow_13{text-shadow:0 0 13px #000;}

.bg_green{background-color: #007530; color: #FFF;}
.bg_yellow_svg:before {
  content: '';
  position: absolute;
  top: 0;
  left: -900px;
  width: 960px;
  height: 100%;
  margin-left: -100px ;
  overflow: hidden;
  background: #F4C700;
  transform: skewX(-30deg);
}
.bg_black{background-color: #000000; color: #FFFFFF;}
.bg_naplesyellow{background-color: #FCEFB8;}
.bg_yellow_te{background: #fdf6d7 url("../images/texture_yellow.png");}
.bg_usuao{background: url("../images/bg_usuao.png") top center repeat-x;}
.bg_gray{background-color: #F0F0F0;}
.bg_lightgray{background-color: #F9F9F9;}
.bg_gray_08{background-color: rgba(227, 227, 227, 0.81) ;}
.bg_gray_te{background: #e8e8e8 url("../images/texture_gray.png");}




.bd_black_b{border-bottom: #000000 solid 1px ;}
.bd_green_tb{border: 1px solid #007530;border-width: 1px 0;}
.bd_green_tb_2px{border: 2px solid #007530;border-width: 2px 0;}
.bd_green_b_2px{border: 2px solid #007530;border-width: 0 0 2px 0;}
.bd_green_t_2px{border: 2px solid #007530;border-width: 2px 0 0 0;}
.bd_green_b{border: 1px solid #007530;border-width: 0 0 1px 0;}
.bd_green_l{border-left: 3px solid #007530;}
.bd_lightgray_t{border: 1px solid #CCCCCC;border-width: 1px 0 0 0;}
.bd_lightgray_rl{border: 1px solid #d4d4d4;border-width: 1px 0;}
.bd_lightgray_r{border-right: 1px solid #d4d4d4;}


.ico_green{
  background-color: #007530;
  color: #FFF;
  font-size: 1rem;
  padding: 2px 10px;
  letter-spacing: 0.2em;
}
.ico_star:before{content: "★";color:#007530;}
.ico_square:before{content: "◆";color:#007530;}

.bnr:hover{opacity: 0.5;}

/* ------------------------------
見出し
------------------------------ */
h1{font-size: 3rem; line-height: 3rem; letter-spacing: 0.2rem;}
h2{font-size: 1.6rem; line-height: 3rem; letter-spacing: 0.18rem; }
h3{font-size: 1.2rem; line-height: 2rem; letter-spacing: 0rem; }
h4{font-size: 1rem; line-height: 2rem; letter-spacing: 0.2rem; font-weight: normal;}
h5{font-size: 1rem; line-height: 2rem; letter-spacing: 0.2rem; font-weight: normal;}
h6{font-size: 1rem; line-height: 2rem; letter-spacing: 0.2rem; font-weight: normal;}
article{text-align: left;}

h1.enq_tit{
  font-size: 1.7rem;
  text-align: left;
  line-height: 3rem;
  letter-spacing: 0.2rem;
  padding-left: 60px;
  background: url(../images/ico_enquete_tit.png) 12.5px 5px no-repeat;
  border-bottom: 1px solid #007530;
}
h1.enq_tit2{
  color: #007530;
  display: inline-block;
  font-size: 2rem;
  text-align: left;
  line-height: 3rem;
  letter-spacing: 0.2rem;
  padding: 0 20px 5px;
  border-bottom: 2px solid #007530;
}
/* ------------------------------
リスト
------------------------------ */
ul.list {
  padding-left: 15px;
}
ul.list li {
  position: relative;
}
ul.list li::after {
  display: block;
  content: '';
  position: absolute;
  top: 11px;
  left: -0.7em;
  width: 4px;
  height: 4px;
  background-color: #808080;
  border-radius: 100%;
}
ul.po_white li::after {background-color: #FFF !important;}

ul.po_smile li,ul.po_negative li{padding-left: 17px;line-height: 2.3em;}
ul.po_smile li::after ,
ul.po_negative li::after {
  display: block;
  position: absolute;
  top: 2px;
  left: -1.2em;
  width: 26px;
  height: 26px;
  background-color: transparent;
}
ul.po_smile li::after{content: url("../images/ico_smile.png");}
ul.po_negative li::after{content: url("../images/ico_negative.png");}

ol.list {
  counter-reset:li;
  list-style:none;
}
ol.list li {
  position: relative;
}
ol.list li:before{
  content:counter(li);
  counter-increment:li;
  background: #007530;
  width: 1.3em;
  height: 1.3em;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 1.3;
}

/* ------------------------------
ページ固定
------------------------------ */
#bnr_enquete {
  position: absolute;
  bottom: 0px;
  right: 10px;
  z-index: 2;
}
.fixed_enquete {
  position: fixed !important;
  top: 55px;
}
.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

/*==========
topimg
==========*/
div.top_title{
  padding: 0;
  position: relative;
  height: 450px;
  min-height: 450px;
}
div.product_topimg{background: url(../images/product_topimg.jpg)center center no-repeat;background-size: cover;}
div.equipment_topimg{background: url(../images/equipment_topimg.jpg)center center no-repeat;background-size: cover;}
div.technology_topimg{background: url(../images/technology_topimg.jpg)center center no-repeat;background-size: cover;}
div.quality_topimg{background: url(../images/quality_topimg.jpg)center center no-repeat;background-size: cover;}
div.company_topimg{background: url(../images/company_topimg.jpg)center center no-repeat;background-size: cover;}
div.news_topimg{background: url(../images/news_topimg.jpg)center center no-repeat;background-size: cover;}
div.recruit_topimg{background: url(../images/recruit_topimg.jpg)center center no-repeat;background-size: cover;}
div.inquiry_topimg{background: url(../images/inquiry_topimg.jpg)center center no-repeat;background-size: cover;}

div.top_title h1{
  width: 100%;
  height: 130px;
  line-height: 130px;
  text-align: center;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.40);
  position: absolute;
  bottom: 0;
  }

/*==========
toptitle
==========*/
.quality_tit{
  background: url(../images/quality_tit.jpg) center top no-repeat;
  background-size:100% auto;
}
.technology_tit{
  background: url(../images/technology_tit.jpg) center top no-repeat;
  background-size:100% auto;
}

.tit_name{
  position: relative;
  background-color: rgba(0, 117, 48, 0.7) ;
  padding: 8px 20px;
  display: inline-block;
}
.tit_name:before{
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  position: absolute;
  border-top: solid 10px transparent;
  border-bottom: solid 10px transparent;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  top: -10px;
  left: -10px;
  border-right: solid 10px #F4C700;
  border-left: solid 10px transparent;
}

/*==========
page_index
==========*/
  header.page_index nav .upper{
    background-color: #007530;
    font-size: 0.9rem;
    }
    header.page_index nav .upper ul{
      display: table;
      width: 100%;
      height: 28px;
      max-width: 960px;
      margin: 0 auto;
      padding: 0 5px;
      }
      header.page_index nav .upper ul li{
        display: table-cell;
        }
      header.page_index nav .upper ul li.access,
      header.page_index nav .upper ul li.facebook,
      header.page_index nav .upper ul li.inquiry{
        vertical-align: middle;
        text-align: right;
        width: 120px;
        }
      header.page_index nav .upper ul li.facebook{width: 110px;}
        header.page_index nav .upper ul li.logo h1{
          color: #FFF !important;
          font-size: 0.6em;
          letter-spacing: 0.3rem;
          vertical-align: middle;
          line-height: 1.8rem;
          }
      header.page_index nav .upper ul li.access a,
      header.page_index nav .upper ul li.inquiry a,
      header.page_index nav .upper ul li.facebook a{
        display: inline-block;
        padding-left: 30px;
        font-size: 8px;
        letter-spacing: 0.1em;
        color: #FFFFFF;
        background-position: 0% 48%;
        background-repeat: no-repeat;
        }
        header.page_index nav .upper ul li.access a:hover,
        header.page_index nav .upper ul li.inquiry a:hover,
        header.page_index nav .upper ul li.facebook a:hover{
          opacity: 0.5;
          }
      header.page_index nav .upper ul li.access a{
        background-image: url('../images/icon_access.png');
        }
      header.page_index nav .upper ul li.inquiry a{
        background-image: url('../images/icon_inquiry.png');
        }
      header.page_index nav .upper ul li.facebook a{
        background-image: url('../images/icon_facebook.png');
      }
      header.page_index nav .upper ul li.logo h1:before,
        header.page_index nav .upper ul li a:before{
          display: inline-block;
          width: 0;
          height: 100%;
          vertical-align: middle;
          }
  header.page_index nav .hd_lower{
    width: 960px;
    height: 70px;
    margin: 0 auto;
    }
    header.page_index nav .hd_lower h1{
      width: 200px;
      height: 70px;
      margin: 0;
      padding: 0;
      line-height: 70px;
      background-color: #FFF;
      z-index: 2;
      float: left;
      }
    header.page_index nav .hd_lower .hd_menu{
      display: table;
      table-layout:fixed;
      width: 760px;
      height: 70px;
      text-align: center;
      }
      header.page_index nav .hd_lower .hd_menu .pointer{
        width: 108px;
        height: 6px;
        position: absolute;
        bottom: 0;
        left: -170px;
        background-color: #F4C700;
        z-index: 1;
        transform: skewX(-45deg);
        }
      header.page_index nav .hd_lower .hd_menu li{
        display: table-cell;
        width: 108px;
      }
      header.page_index nav .hd_lower .hd_menu li.new{background: url(../images/ico_new.gif) 22px 19px no-repeat;}
        header.page_index nav .hd_lower .hd_menu li a{
          display: block;
          height: 70px;
          position: relative;
          letter-spacing: 0.1em;
          color: #000000;
          vertical-align: middle;
          text-align: center;
          font-weight: bold;
          }
        header.page_index nav .hd_lower .hd_menu li a[href=""]{
          background: url(../images/pointer.svg);
          }
        header.page_index nav .hd_lower .hd_menu li a:before{
          content: '';
          display: inline-block;
          width: 0;
          height: 80px;
          vertical-align: middle;
          }

/*==========
ワークフロー
==========*/
.sp-layer h2{margin-bottom: 0.8em;}

.sp-thumbnail-container{
  background-color: #FFF;
  text-align: center !important;
}

.sp-thumbnail{
  padding-top: 15px;
  font-weight: bold;
  font-size: 1.2em;
}

.sp-thumbnail-container:hover:before  {
  content: '';
  position: absolute;
  width: 100%;
  border-bottom: 5px solid #F4C700;
  top: -6px;
  left:0
}

/*==========
主要製品
==========*/
p.product_arrow{bottom:-20px;z-index:2;}

/*==========
News&Topics
==========*/
h1.news_tit{
  font-size: 1.2em;
  letter-spacing: 0rem;
  background: url(../images/news_tit.png) 22px no-repeat;
  text-align: left;
  padding: 20px 0 20px 95px;
  border-bottom: #000000 1px dotted;
  margin-top: -1px;
}
time.news_time{
  border-bottom: #007530 3px solid;
  letter-spacing: 0.2rem;
  font-size: 0.9em;
  font-weight: bold;
  margin-bottom: -3px ;
}
div.news_text{
  padding: 40px 95px;
  text-align: left;
}

/*==========
採用情報
==========*/

nav.enquete_nav {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 12px 6px;}
  nav.enquete_nav a{
    display: table-cell;
    border: 3px solid #007530;
    text-align: center;
    font-weight: bold;
    line-height: 1.3em;
    vertical-align: middle;
    height: 122px;
    overflow: hidden;
  }
  nav.enquete_nav a:hover{
    background-color: #E0EDDE;
  }

.enquete_que{
  background-color: #FFF;
  display: inline-block;
  font-size: 1.7em;
  padding: 25px 40px;
  border-radius: 20px;
  margin-bottom: 1em;
}
.enquete_que:first-letter{
  color: #C30D23;
  font-weight: bold;
  font-size: 1.7em;
  vertical-align: text-top;
}

.enquete_frame{
  background-color: #007530;
  color: #FFF;
  padding: 40px 40px;
  box-shadow: 0 0 0 6px #FFF, 0 0 0 10px #007530;
  box-sizing: border-box;
}

.enquete_isii{
  position: absolute;
  line-height: 1.2em;
  right: 0;
  bottom: 0;
  width: 50%;
}


/* アニメーション */
span.ani_isii {
  background: url(../images/enquete_isiisan01.png) no-repeat;
  width: 187px;
  height: 386px;
  display: inline-block;
}
span.ani_isii:hover {
  animation: isii-san .2s steps(2) forwards;
}
@keyframes isii-san {
  100% {
    background-position: -374px 0;
  }
}


/* クイズ */
.quiz .choices{
  display: table;
  width: 100%;
  table-layout: fixed;
  }
  .quiz .choices .button{
    display: table-cell;
    }
  .quiz .choices .button.answerd.correct:after,
  .quiz .choices .button.answerd.incorrect:after{
    content: '';
    display: block;
    width: 100%;
    height: 88px;
    position: absolute;
    top: -96px;
    left: 0;
    background-size: 77px;
    background-position: 50% 0;
    background-repeat: no-repeat;
    }
  .quiz .choices .button.answerd.correct:after{
    background-image: url('../images/enquete_quiz_badge_correct.png');
    animation: popup 1s ease 0s 1 normal backwards;
    }
  .quiz .choices .button.answerd.incorrect:after{
    background-image: url('../images/enquete_quiz_badge_incorrect.png');
    animation: popup 1s ease 0s 1 normal backwards;
    }
/* マルバツが飛び出すアニメーション */
@keyframes popup {
  0%{top: 0; opacity: 0;}
  25%{top: -116px; opacity: 1;}
  50%{top: -86px;}
  75%{top: -102px;}
  100%{top: -96px;}
}
/* ナカジマの社員の血液型、多いのは何型？ */
  .quiz1 .choices .button{
    padding-top: 122px;
    background-image: url('../images/enquete_quiz_button_off.png');
    background-position: 50% 0;
    background-repeat: no-repeat;
    }
  .quiz1 .choices .button:hover{
    background-image: url('../images/enquete_quiz_button_on.png');
    }
  .quiz1 .choices .button.answerd.correct{
    background-image: url('../images/enquete_quiz_button_correct.png');
    }
  .quiz1 .choices .button.answerd.incorrect{
    background-image: url('../images/enquete_quiz_button_incorrect.png');
    }
/* 社長、専務、工場長、取締役。この４人の中で誰が支持率が高い？ */
  .quiz2 .choices .button{
    padding-top: 180px;
    background-position: 50% 0;
    background-repeat: no-repeat;
    }
  .quiz2 .choices .button.shacho{
    background-image: url('../images/enquete_quiz_shacho_off.png');
    }
  .quiz2 .choices .button.senmu{
    background-image: url('../images/enquete_quiz_senmu_off.png');
    }
  .quiz2 .choices .button.bucho{
    background-image: url('../images/enquete_quiz_bucho_off.png');
    }
  .quiz2 .choices .button.kojocho{
    background-image: url('../images/enquete_quiz_kojocho_off.png');
    }
  .quiz2 .choices .button.shacho:hover{
    background-image: url('../images/enquete_quiz_shacho_on.png');
    }
  .quiz2 .choices .button.senmu:hover{
    background-image: url('../images/enquete_quiz_senmu_on.png');
    }
  .quiz2 .choices .button.bucho:hover{
    background-image: url('../images/enquete_quiz_bucho_on.png');
    }
  .quiz2 .choices .button.kojocho:hover{
    background-image: url('../images/enquete_quiz_kojocho_on.png');
    }
/* クイズの解説 */
.quiz .explanation{
  display: table;
  margin: 25px auto 0 auto;
  }
  .quiz .explanation dt,
  .quiz .explanation dd{
    display: table-cell;
    vertical-align: middle;
    }
    .quiz .explanation dt{
      width: 150px;
      }
    .quiz .explanation dd{
      width: 500px;
      text-align: left;
      }


/* 吹き出し */
.balloon_right {
  position: relative;
  padding: 16px 40px;
  border-radius: 5px;
  background: #E0EDDE ;
  z-index: 0;
  display: inline-block;
}
.balloon_right:after {
  content: "";
  position: absolute;
  top: 50%; right: -16px;
  margin-top: -9px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent #E0EDDE;
}

.balloon_bottom {
  position: relative;
  border-radius: 5px;
  /*	padding: 0 15px;*/
  background: #E0EDDE;
  z-index: 0;
  margin: 0 auto 20px auto;
  width: 255px;
  padding: 15px 0;
  line-height: 1.5em;
}
.balloon_bottom:after {
  content: "";
  position: absolute;
  bottom: -16px; left: 50%;
  margin-left: -9px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 16px 9px 0 9px;
  border-color: #E0EDDE transparent transparent transparent;
}

.balloon_left {
  position: relative;
  padding: 16px 40px;
  border-radius: 5px;
  background: #E0EDDE ;
  z-index: 0;
  display: inline-block;
  text-align: center;
  margin-left: 40px;
}
.balloon_left:after {
  content: "";
  position: absolute;
  top: 50%; left: -16px;
  margin-top: -9px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 9px 16px 9px 0px;
  border-color:  transparent #E0EDDE transparent  transparent;
}

.b_white {
  background: #FFF ;
}
.b_white:after {
  border-color:  transparent #FFF transparent  transparent;
}