@charset 'UTF-8';



/*! add sevens 202112
------------------------------------------------- */
img {
    image-rendering: -webkit-optimize-contrast;
}
.top_section03 {
  padding-bottom: 40px;
}
.top_section03 h2 {
  margin-bottom: 24px;
  padding: 40px 20px 0;
  text-align: center;
}
.txtBox_top {
    text-align: center;
}
.cn_sd {
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
}
.cn_sd_sp {
    width:80%;
    margin:0 10% 10px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
}
.leadtxt {
    display: block;
    margin-bottom:0px;
    font-weight: 700;
    padding-top: 0px;
    font-size: 18px;
    font-size: 1.8rem;
    padding:0 20px;
}
.cn_br {
    display:block;
}

.sticky_table_wrapper {
  overflow: scroll;
  width: calc(100vw - 1rem);
  height: 75vh;
}
.cn_table {
    overflow: auto;
    white-space: nowrap;
    width:98%;
    height: 500px;
    margin:0 auto;
    font-size:0.85em;
    line-height: 1.5;
}
.cn_table table {
  margin: 0 auto;
  padding: 0;
  border-collapse: collapse;
    /* width:100%;
    line-height: 1.3;
    font-size:90%;
    border:1px solid #ccc;
    -webkit-overflow-scrolling: touch; */
}
.cn_table th, .cn_table td {
    border: 1px solid #cccccc;
    padding: 6px;
    white-space: nowrap;
    vertical-align: middle;
}
/* .cn_table table th,
.cn_table table td {
    padding:5px;
    vertical-align:middle;
    text-align: center;
    width:10%;
    border:1px solid #ccc;
} */
.cn_table tr th {
  position: relative;
}
/*.cn_table tr th:after {
  position: absolute;
    display: block;
    content: "";
    right: -10px;
    top: 0;
    width: 10px;
    height: 100%;
    z-index: 99;
    background: linear-gradient(to right,rgba(0,0,0,.1) 0,transparent 100%);
}*/
.cn_table tr th.fixed01:first-child:before {
  background: #fff;
  z-index: 100;
}
.cn_table table td {
    padding:10px 5px;
    border:1px solid #ccc;
    text-align: center;
}
.cn_table table td br {
    display: block;
}
.cn_table table tr:nth-child(odd){
  background-color:#fff;
}
.cn_table table tr:nth-child(even){
  background-color:#f0f0f0;
}
.cn_table table th.fixed03.c1 { background-color: #d0dfff;}
.cn_table table th.fixed03.c2 { background-color: #ffdbf7;}
.cn_table table th.fixed03.c3 { background-color: #c8f3ff;}
.cn_table table th.fixed03.c4 { background-color: #fbe2c4;}
.cn_table table th.fixed03.c5 { background-color: #fff1c7;}
.cn_table table th.fixed03.c6 { background-color: #d5f8f3;}
.cn_table table th.fixed03.c7 { background-color: #d6ffef;}
.cn_table table th.fixed03.c8 { background-color: #f2ffbd;}


.cn_table table th.fixed03:before {
    content: "";
    position: absolute;
    border-top: 1px solid #ccc;
    width: 100%;
    top: -1px;
    z-index: 200;
    left: 0;
}

.cn_table table th.fixed03:after {
    content: "";
    position: absolute;
    border-top: 1px solid #ccc;
    width: 100%;
    bottom: -1px;
    z-index: 200;
    left: 0;
}


.cn_table table th.fixed01 {
    background-color: #fff;
}
.cn_table table thead th {
    position:fixed;
    top:0;
}
.cn_table table th.cl1 {
    background-color: #fff;
}
.cn_table table th.cl2 {
    background-color: #f0f0f0;
}
.cn_table tr:first-child th,
.cn_table tr th:first-child {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  z-index: 1;
}

.scn_table tr:first-child th:before, .cn_table tr th:first-child:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 102%;
    height: 105%;
    border: 1px solid #ccc;
}
/* .cn_table table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.cn_table table thead th:first-child {
  z-index: 2;
}
.cn_table table thead th:first-child,
.cn_table table tbody th:first-child {
  left: 0;
  position: sticky;
} */
/* .cn_table table th.fixed01:before,
.cn_table table th.fixed02:before,
.cn_table table th.fixed03:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  } */
.cn_table table th.fixed01{
  z-index: 2;
}

.cn_table table th.fixed01:first-of-type:before {
    height: 102%;
}
.cn_table table th.fixed02{
  z-index: 1;
}
@media print,(min-width: 750px) {
  .top_section03 { padding-bottom: 64px; }
  .top_section03 h2 {
    margin-bottom: 64px;
    padding: 64px 0 0;
  }
  .cn_table {
    width:1000px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    height: auto;
	overflow: visible;
  }
  .cn_table table {
      width:100%;
  }

.leadtxt {
    display: block;
    margin-bottom:10px;
    font-weight: 700;
    font-size: 24px;
    font-size: 2.4rem;
}
.cn_br {
    display:none;
}
}

/* No Scroll */
body.modal-open {
  height: 100vh;
  overflow-y: hidden;
  /*position: fixed;*/
}

/* SP INDASTLIAL AREA */
.sectionImg {
  margin-top: 0px;
  height: 70.73vw;
  background: url(../img/indeximg/bg_sp.jpg) no-repeat center bottom / cover;
}
.listShowBtn {
  text-align: center;
  padding-top: 8%;
}
.listShowBtn span {
  display: inline-block;
  width: 130px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #FFF;
  background-color: #333;
  text-decoration: none;
  cursor: pointer;
}

@media print,(max-width: 749px) {
  /* SP INDASTLIAL LIST */
  .explainListWrap {
    /*display: none;*/
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,.97);
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    overflow-y: auto;
  }
  .explainListWrap.is-show {
    visibility: visible;
    opacity: 1;
  }
  .explainList {
    padding-top: 40px;
  }
  .explainList > li:nth-of-type(n+2) {
    border-top: #CCC solid 1px;
  }
  .explainList a {
    display: flex;
    width: 100%;
    height: 60px;
    padding: 0 5.3%;
    align-items: center;
    text-decoration: none;
    position: relative;
  }
  .explainList a::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 5.3%;
    transform: translateY(-50%) rotate(-45deg);
    border-right: #999 solid 2px;
    border-bottom: #999 solid 2px;
  }
  .listIcn {
    width: 46px;
    height: 46px;
    overflow: hidden;
    border: #CCC solid 1px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .listTtl {
    color: #000;
    font-weight: bold;
  }
  .listDisc {
    display: none;
  }
  .explainCloseBtn {
    position: absolute;
    top: 14px;
    right: 4%;
    width: 26px;
    height: 26px;
    cursor: pointer;
  }
  .explainCloseBtn::before,
  .explainCloseBtn::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 11px;
  }
  .explainCloseBtn::before {
    transform: rotate(45deg);
  }
  .explainCloseBtn::after {
    transform: rotate(-45deg);
  }
}

/* Modal */
.modalWrap {
  position: fixed;
  overflow: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.7);
  z-index: 11000;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.modalWrap.is-show {
  visibility: visible;
  opacity: 1;
}
.modalBack {
  position: absolute;
  top: 50px;
  left: 5.3%;
  height: 40px;
  line-height: 40px;
  padding: 0 20px 0 30px;
  color: #FFF;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.modalBack::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 15px;
  border-left: #FFF solid 1px;
  border-bottom: #FFF solid 1px;
  transform: translateY(-50%) rotate(45deg);
}
.modalBack.is-fixed {
  position: fixed;
  top: 0;
}
.modalClose {
  position: absolute;
  top: 50px;
  right: 5.3%;
  width: 40px;
  height: 40px;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  cursor: pointer;
}
.modalClose::before,
.modalClose::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #CCC;
}
.modalClose::before {
  transform: rotate(45deg);
}
.modalClose::after {
  transform: rotate(-45deg);
}
.modalClose.is-fixed {
  position: fixed;
  top: 0;
}

.modalOverlay {
  width: 89.4%;
  /*height: 100%;*/
  padding: 50px 0;
  margin: 0 5.3%;
}
.modalInner {
  background-color: #FFF;
  padding-top: 40px;
  padding-bottom: 20px;
}
.modalTtl {
  margin-bottom: 6.8%;
  padding: 2% 5.3% 0;
  font-size: 24px;
  font-weight: bold;
  color: #000;
}
.itemBoxInner {
  padding: 7% 5.3%;
}
.modalFeature {
  border-left: #CCC solid 5px;
  padding-left: 10px;
  font-size: 16px;
  font-weight: bold;
}
.modalFeature br {
  display: none;
}
.modalFeature:nth-of-type(n+2) {
  margin-top: 20px;
}
.modalSubTtl {
  border: #CCC solid 1px;
  margin-top: 6.8%;
  margin-bottom: 4%;
  padding: 8px 15px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.prodList li {
  font-size: 14px;
  padding-left: 15px;
  position: relative;
}
.prodList li::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 7px;
  left: 0;
  background-color: #333;
}
.prodList li:nth-of-type(n+2) {
  margin-top: .5em;
}

@keyframes pinanime {
  0% {
    transform: translate(-50%, 0);
  }

  80% {
    transform: translate(-50%, 0px);
  }
  85% {
    transform: translate(-50%, 10px);
  }
  90% {
    transform: translate(-50%, 0px);
  }
  95% {
    transform: translate(-50%, 10px);
  }

  100% {
    transform: translate(-50%, 0px);
  }
}

.modalLinkTtl {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  padding: 7% 5.3% .5em;
}

.linkList {
  padding: 0 5.3% 2%;
}
.linkList li:nth-of-type(n+2) {
  margin-top: 5px;
}
.linkList li {
  margin-left: 1em;
  padding-left: 20px;
  position: relative;
}
.linkList li::before {
  content: "";
  width: 4px;
  height: 4px;
  background-color: #333;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 8px;
}
.linkList li a {
  text-decoration: underline;
}

@media print,(min-width: 750px) {
  body.modal-open {
    padding-right: 15px; /* 幅のリフローを避ける */
  }
  /* SP INDASTLIAL AREA */
  .sectionImg {
    margin-top: 0px;
    height: 675px;
    background: url(../img/indeximg/bg.jpg) no-repeat center bottom / cover;
    position: relative;
    overflow: hidden;
  }
  .listShowBtn,
  .explainCloseBtn {
    display: none;
  }

  /* SP INDASTLIAL LIST */
  .explainList li {
    position: absolute;
  }
  .explainList li:nth-of-type(1) {
    left: 844px;
    top: 270px;
  }
  .explainList li:nth-of-type(2) {
    left: 102px;
    top: 210px;
  }
  .explainList li:nth-of-type(3) {
    left: 480px;
    top: 200px;
  }
  .explainList li:nth-of-type(4) {
    left: 964px;
    top: 577px;
  }
  .explainList li:nth-of-type(5) {
    left: 690px;
    top: 500px;
  }
  .explainList li:nth-of-type(6) {
    left: 375px;
    top: 610px;
  }
  .explainList li:nth-of-type(7) {
    left: 200px;
    top: 540px;
  }
  .explainList li:nth-of-type(8) {
    left: 1080px;
    top: 150px;
  }
  .explainList li:nth-of-type(9) {
    left: 950px;
    top: 370px;
  }


  .explainList li::before {
    content: "";
    width: 34px;
    height: 50px;
    background: url(../img/indeximg/marker.svg) no-repeat center top / contain;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    transition: .3s;
    animation-name: pinanime;
    animation-duration: 4s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
  }
  .explainList li:hover::before {
    transform: translate(-50%, -20px);
    opacity: 0;
  }

  .explainList li a {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, -20px);
    background-color: #e60012;
    display: block;
    padding: 15px 40px 15px 25px;
    color: #FFF;
    text-decoration: none;
    width: 250px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    transition: .3s;
  }
  .explainList li a::before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 15px;
    border-right: #FFF solid 2px;
    border-bottom: #FFF solid 2px;
    transform: translateY(-50%) rotate(-45deg);
  }
  .explainList li a::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 5px 0 5px;
    border-color: #e60013 transparent transparent transparent;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .explainList li:hover a {
    transform: translate(-50%, 0px);
    visibility: visible;
    opacity: 1;
  }
  .listIcn {
    display: none;
  }
  .listTtl {
    display: block;
    font-weight: bold;
    text-align: center;
  }
  .listDisc {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Modal */
  .modalOverlay {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  .modalBack {
    display: none;
  }
  .modalClose {
    right: auto;
    left: calc(50% + 300px);
    width: 68px;
    height: 68px;
    background-color: transparent;
  }
  .modalClose.is-fixed {
    left: calc(50% + 300px - 9px);
  }
  .modalInner {
    padding-top: 0px;
    padding-bottom: 30px;
  }
  .modalTtl {
    margin-bottom: 22px;
    padding: 24px 50px 0;
    font-size: 30px;
  }
  .itemBoxInner {
    padding: 38px 50px;
  }
  .modalFeature {
    font-size: 18px;
  }
  .modalFeature br {
    display: inline;
  }
  .modalSubTtl {
    margin-top: 38px;
    margin-bottom: 20px;
    padding: 10px 20px;
    font-size: 18px;
  }
  .prodList li {
    font-size: 16px;
    color:#000;
  }

  .modalLinkTtl {
    font-size: 18px;
  }
  
  .scn_table tr:first-child th:before, .cn_table tr th:first-child:before {
    width: 101%;
}
}
@media print,(min-width: 1200px) {
  .sectionImg {
    height: 52.6vw;
  }
  .explainList li:nth-of-type(1) {
    left: 70vw;
    top: 19vw;
  }
  .explainList li:nth-of-type(2) {
    left: 8vw;
    top: 14vw;
  }
  .explainList li:nth-of-type(3) {
    left: 40vw;
    top: 14vw;
  }
  .explainList li:nth-of-type(4) {
    left: 79vw;
    top: 44vw;
  }
  .explainList li:nth-of-type(5) {
    left: 58vw;
    top: 38vw;
  }
  .explainList li:nth-of-type(6) {
    left: 31vw;
    top: 48vw;
  }
  .explainList li:nth-of-type(7) {
    left: 17vw;
    top: 42vw;
  }
  .explainList li:nth-of-type(8) {
    left: 89vw;
    top: 9vw;
  }
  .explainList li:nth-of-type(9) {
    left: 80vw;
    top: 28vw;
  }


  .modalClose {
    left: calc(50% + 360px);
  }
  .modalClose.is-fixed {
    top: 20px;
    left: calc(50% + 360px - 10px);
  }
}


/*追記：えだ*/
@media print,(max-width: 749px) {
  /* .cn_table thead table th.fixed01,
  .cn_table thead table th.fixed02,
  .cn_table thead table th.fixed03 {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
  } */
}

@media all and (-ms-high-contrast: none) {

.cn_table tr:first-child th, .cn_table tr th:first-child {
    position: relative;
	position: -webkit-sticky;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.cn_table table th:first-of-type.fixed01::before {
    height: 313%;
}

.scn_table tr:first-child th::before, .cn_table tr th:first-child::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 103%;
    height: 127%;
    border: 1px solid #ccc;
}


}