/* hasList */

/* アイテムリスト…商品には使わない。商品はproduct */
.itemList{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.itemList li{
  width: 470px;
  height: 96px;
  margin-bottom: 8px;
}

.itemList li a{
  width: 100%;
  height: 100%;
  font-size: 24px;
  font-weight: bold;
  background: #e0d8bf;
  transition: .1s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemList li:hover a,
.itemList li a.current{
  background: #95260d !important;
  color: #ede7d4 !important;
}
/* //アイテムリスト */

/* pager */
.pager{
  position: absolute;
  top: 300px;
  width: 100%;
}
.pager ul{
  display: flex;
  justify-content: space-between;
}
.pager li{
  width: 70px;
  text-align: center;
  margin: 0 32px;
  position: relative;
  z-index: 1;
  font-weight: bold;
  cursor: pointer;
}
.pager li a{
  color: #05060d;
  transition: .3s;
  padding: 70px 18px 0;
  margin-top: -70px;
}
.pager li::before{
  font-family: FontAwesome;
  content: "\f104";
  display: block;
  font-size: 32px;
  margin: -4px 4px 36px 0;
  font-weight: normal;
  color: #fff;
  line-height: 0;
}
.pager li:last-child::before{
  content: "\f105";
  margin-right: -4px;
}
.msBrowser.ie .pager li::before{
  margin-top: -16px;
}
.pager li::after{
  line-height: 0;
  content: "◆";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 70px;
  color: #dbd0c8;
  z-index: -1;
  transition: .3s;
}
.pager li:hover a{
  color: #65666d;
}
.pager li:hover::after{
  color: #b59f97;
}
/* //pager */

/* 狭小 */
@media only screen and (max-width: 1170px){
  .pager,
  .pager li{
    position: static;
  }
  .pager{
    padding: 0 0 32px;
  }
  .pager li{
    margin: 0;
    width: auto;
  }
  .pager li::before,
  .pager li:last-child::before,
  .pager li::after{
    content: none;
  }
  .pager li a{
    margin: 0;
    padding: 16px;
    background-color: #95260d;
    color: #fff;
  }
  .pager li:first-child a::before,
  .pager li:last-child a::after{
    font-family: FontAwesome;
    margin: 0;
    font-weight: normal;
    line-height: 0;
  }
  .pager li:first-child a::before{
    content: "\f104";
    margin-right: 8px;
  }
  .pager li:last-child a::after{
    content: "\f105";
    margin-left: 8px;
  }
}/* このとじカッコは消さないこと */

/* //hasList */@charset "utf-8";
main{
  background-color: #f8f5ee;
  position: relative;
}
.caseListWrapper{
  background-color: #ede7d4;
}
.caseListWrapper>p{
  display: none;
}
.caseList,
.caseList dd ul{
  display: flex;
  justify-content: space-between;
}
.caseList dd ul{
  justify-content: center;
}
.caseList dl{
  padding-bottom: 16px;
  flex-grow: 1;
}
.caseList dt{
  font-size: 20px;
  font-weight: bold;
  color: #65666d;
  text-align: center;
}
.caseList dd{
  border-left: 1px solid #65666d;
}
.caseList dl:last-child dd{
  border-right: 1px solid #65666d;
}
.caseList dd li br{
  display: none;
}
.caseList li{
  margin-right: 16px;
  position: static;
}
.caseList li:last-child{
  margin-right: 0;
}
.caseList li a{
  color: #95260d;
  transition: .3s;
}
.caseList li a:hover{
  color: #bc3010;
  text-decoration: underline;
}
.caseList li a::before{
  font-family: FontAwesome;
  content: "\f105";
  margin-right: 4px;
}

/* index…アイテムリスト風処理。 */
.index .caseList{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.index .caseList dt{
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 4px;
  margin-bottom: 8px;
  text-align: left;
  color: #05060d;
}
.index .caseList dt span {
  border-bottom: 1px solid #95260d;
}
.index .caseList dd,
.index .caseList dl:last-child dd{
  border: none;
}
.index .caseList dd ul{
  justify-content: flex-start;
  flex-wrap: wrap;
}
.index .caseList li{
  width: 460px;
  height: 96px;
  margin-bottom: 8px;
}
.index .caseList li a{
  width: 100%;
  height: 100%;
  font-size: 24px;
  font-weight: bold;
  background: #e0d8bf;
  transition: .1s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #05060d;
}
.index .caseList li a::before{
  content: none;
}
.index .caseList li:hover a,
.index .caseList li a.current{
  background: #95260d !important;
  color: #ede7d4 !important;
  text-decoration: none;
}
/* //index…アイテムリスト風処理 */

.caseDetail{
  padding: 28px 0;
}

.head{
  margin-bottom: 32px;
  position: relative;
  height: 64px;
}
.head h1,
.head ul li{
  position: absolute;
}
.head h1{
  font-size: 32px;
  top: 0;
  left: 72px;
}
.head .category{
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  line-height: 64px;
  border-radius: 50%;
  background:#05060d;
  color:#FFF;
  text-align: center;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: bold;
  margin-right: 8px;
}
.head .category.small{
  font-size: 14px;
  letter-spacing: 0;
}
.head .phonetic{
  font-size: 16px;
}
.head .headLead{
  font-size: 14px;
  bottom: 0;
  left: 72px;
}

.explain{
  display: flex;
  justify-content: space-between;
}
.explain p{
  width: 49%;
}
.explain .img{
  margin-right: 32px;
}
/*.explain .img img{
  max-width: max-content;
}*/
.explain .txt{
  line-height: 2em;
}

.process{
}
.process .decorated_dia span{
  letter-spacing: 2px;
}
.processBody{
  position: relative;
  margin-top: 40px;
  background: url(/img/case/bk00.png);
  padding: 1.5% 3.5%;
}
.processBody::before,
.processBody::after{
  position: absolute;
  content: "";
  border: 1px solid #fff;
}
.processBody::before{
  height: 99%;
  width: 97%;
  top: 0.5%;
  left: 1.5%;
}
.processBody::after{
  height: 98%;
  width: 94%;
  top: 1%;
  left: 3%;
}

.processBody .processList{
  width: 850px;
  margin: 0 auto;
}
.processBody li{
  display: flex;
  padding: 68px 0;
  position: relative;
}
.processBody li::before,
.processBody li::after{
  position: absolute;
  left: 50%;
}
.processBody li::before{
  font-family: FontAwesome;
  content: "\f107";
  font-size: 32px;
  margin-left: -10px;
  font-weight: normal;
  color: #fff;
  z-index: 1;
  line-height: 0;
  bottom: 20px;
}
.msBrowser.ie .processBody li::before{
  bottom: 24px;
}
.processBody li::after{
  content: "◆";
  font-size: 70px;
  color: rgba(177, 161, 134, 0.3);
  margin-left: -35px;
  bottom: -32px;
}
.processBody li:last-child::before,
.processBody li:last-child::after{
  content: none;
}


.processBody .img{
  width: 300px;
  z-index: 1;
  position: relative;
}
.processBody .img img{
  max-width: max-content;
  z-index: 1;
}
.processBody li .img::before,
.processBody li .img::after{
  content: "";
  border-right: 32px solid transparent;
  border-left: 32px solid transparent;
  z-index: -1;
  position: absolute;
  left: 50%;
  margin-left: -32px;
}
.processBody li .img::before{
  border-bottom: 32px solid #fff;
  top: -30px;
}
.processBody li .img::after{
  border-top: 32px solid #fff;
  bottom: -30px;
}
.processBody .txt{
  font-size: 16px;
  line-height: 2em;
  margin: -32px 0 0 32px;
}
.processBody li .txt::before{
  font-size: 96px;
  color: #fff;
  line-height: 1;
  display: block;
  margin-left: -16px;
}
.processBody li:nth-child(1) .txt::before{
  content: "壱";
}
.processBody li:nth-child(2) .txt::before{
  content: "弐";
}
.processBody li:nth-child(3) .txt::before{
  content: "参";
}
.processBody li:nth-child(4) .txt::before{
  content: "四";
}


/* タブレット以下微調整 */
@media only screen and (max-width: 1000px){
  .processBody .processList{
    width: 100%;
  }
  }/* このとじカッコは消さないこと */
  /* タブレット以下微調整 */
  @media only screen and (max-width: 940px){
    .index .caseList.contentSetter{
      width: 476px;
      margin: 0 auto;
    }
    }/* このとじカッコは消さないこと */

/* スマホ以下 */
@media only screen and (max-width: 767px){
  .index .caseList.contentSetter,
  .explain p,
  .processBody .processList{
    width: 100%;
  }
  .explain,
  .processBody li{
    flex-direction: column;
  }
  main{
    padding: 0 16px;
    margin-bottom: 698px;
  }
  .index main{
    padding: 0 16px;
    margin-bottom: 0;
  }
  main .caseListWrapper {
    position: absolute;
    bottom: -680px;
    width: 90%;
    margin-left: -45%;
    left: 50%;
  }
  main .caseListWrapper>p{
    display: block;
    text-align: center;
    font-weight: bold;
    color: #95260d;
    font-size: 18px;
    margin-bottom: 8px;
  }
  .caseList,
  .caseList ul{
    flex-direction: column;
  }
  .caseList{
    padding: 0 16px;
  }
  .caseList dl{
    background: #e0d5b3;
    padding-top: 16px;
  }
  .caseList dt{
    margin-bottom: 8px;
  }
  .caseList dd,
  .caseList dl:last-child dd{
    border: none;
  }
  .caseList ul{
    padding: 0 8px;
  }
  .caseList li{
    margin: 0 0 8px 0;
  }
  .caseList.caseList li a{
    display: block;
    background-color: #fff;
    padding: 8px 16px;
    position: relative;
  }
  .caseList li a::before{
    position: absolute;
    right: 16px;
  }
  /* index */
  .index .caseList dt,
  .index .caseList li a{
    font-size: 16px;
  }
  .index .caseList dt{
    margin-left: 16px;
  }
  .index .caseList li{
    width: auto;
    height: auto;
  }
  /* index */
  .head h1{
    margin-top: 10px;
    line-height: 1;
    text-align: left;
  }
  .head .phonetic{
    display: block;
  }
  .head .headLead{
    font-size: 12px;
    bottom: -24px;
    left: 0px;
  }
  .head.long{
    margin-bottom: 48px;
  }
  .head.long h1{
    margin-top: 16px;
    font-size: 20px;
  }
  .head.long .phonetic{
    font-size: 14px;
  }
  .head.long .headLead{
    bottom: -40px;
  }

  .explain .img img{
    max-width: 100%;
    margin: 0 auto;
  }
  .processList{
    counter-reset: number;
  }
  .processBody li{
    padding: 48px 16px 24px;
  }
  .processBody li::before,
  .processBody li::after{
    content: none;
  }
  .processBody .img{
    width: 100%;
    margin-bottom: 32px;
  }
  .processBody .img img{
    max-width: 100%;
    margin: 0 auto;
  }
  .processBody li .txt{
    margin: 0;
    line-height: 1.5;
    text-indent: -8px;
    margin-left: 32px;
  }
  .processBody li .txt::before{
    counter-increment: number;
    content: counter(number)"." !important;
    font-size: 16px;
    color: #05060d;
    line-height: 1.5;
    display: inline-block;
    margin: 0;
  }
}/* このとじカッコは消さないこと */