@charset "utf-8";

/*common*/
.firstMsg{
  background:no-repeat center top;
  background-image:url("/img/index/firstMsgImg.jpg");
  position: relative;
  padding-top: 580px;
}
.cn .firstMsg{
  background-image:url("/img/index/cn_firstMsgImg.jpg");
}

@keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}
.firstMsg .copy{
  animation: fadeOut 1s 6s forwards; /* fadeOutアニメーションを1sかけて実施(開始まで表示から2s待つ)。終わったら実施後の状態(opacity:0)を維持する */
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
  background-color: #ede7d4;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  background: url("/img/index/firstCopyBg.jpg") no-repeat center center;
}
.firstMsg .copy .texts{
  background:url("/img/index/visual.png") no-repeat left center / 130px;
  width: 510px;
  height: 140px;
  padding: 16px 0 0 146px;
}
.firstMsg .copy .texts p{
  margin-bottom: 0;
  letter-spacing: 2px;
  font-size: 24px;
}
.firstMsg .copy .texts .text2{
  letter-spacing: 5px;
  font-size: 28px;
}

.topics{
  height: 230px;
  width: 1300px;
  background-color: #ede7d4;
  margin: 0 auto;
  display: flex;
}
.topics .topKnowlege{
  width: 800px;
  background: url(/img/index/topKnowlegeBK2.png) 98% 0 no-repeat;
  display: flex;
  justify-content: flex-end;
}
.topics .topKnowlege .topKnowlegeTextWrap{
  width: 660px;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.topics .topKnowlege .topKnowlegeTextWrap::before {
  content: "";
  background: url(/img/index/topKnowlegeBK1.png) no-repeat;
  width: 168px;
  height: 168px;
  margin-left: -32px;
}
.topics .topKnowlege .topKnowlegeTextWrap div{
  margin-left: -90px;
}
.topics .topKnowlege .topKnowlegeTextWrap div img{
  opacity: 1;
  transition: .3s;
}
.topics .topKnowlege .topKnowlegeTextWrap div img:hover{
  opacity: .7;
}
.topics .topKnowlege .topKnowlegeTextWrap div .knowledgeLink{
  background-color: #95260d;
  width: 142px;
  text-align: center;
  transition: .3s;
  margin: 0;
  position: absolute;
  right: 16px;
  bottom: 28px;
}
.topics .topKnowlege .topKnowlegeTextWrap div .knowledgeLink a {
  padding: 16px 0;
  display: block;
  line-height: 0;
  color: #fff;
}
.topics .topKnowlege .topKnowlegeTextWrap div .knowledgeLink a::before {
  font-family: FontAwesome;
  content: "\f105";
  margin: 0 4px;
}
.topics .topKnowlege .topKnowlegeTextWrap div .knowledgeLink:hover {
  background-color: #bc3010;
}

.topics .request{
  width: 500px;
  background-color: #fff;
  position: relative;
}
.topics .request::before {
  position: absolute;
  top: 48px;
  content: "";
  border-top: 1px solid #95260d;
  display: block;
  width: 100%;
}
.topics .request .requestAnnounce{
  width: 330px;
  height: 100%;
  background-color: transparent;
  background-position: 100% 60px;
}
.topics .request .requestAnnounce h2{
  padding-top: 8px;
  border: none;
}
.requestAnnounce .lead{
  margin-bottom: 16px;
}
.topics .request .requestAnnounce .text1{
  display: block;
}
.topics .request .requestAnnounce .emp{
  font-size: 24px;
}
.topics .request .requestAnnounce .reqWeb {
  width: 160px;
  margin: 0 auto;
}

section{
  padding-top: 64px;
  height: 580px;
  margin-bottom: 32px;
}
section.q_a,
section.shop{
margin-bottom: 0;
}
section div{
  margin: 0 auto;
  position: relative;
}
section p{
    -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;}
section p.text{
  line-height: 3;
  letter-spacing: 2px;
  margin: 0 auto;
  padding-top: 32px;
}

section p.text{
  width: 288px;
}
section.case p.text{
  width: 488px;
}
section.shop p.text{
  width: 336px;
}
section .moreLink{
  margin: 0;
  position: absolute;
}
section .moreLink a{
  color: #95260d;
  transition: .3s;
}
section .moreLink a:hover{
  color: #bc3010;
}
section .moreLink a::after{
  font-family: FontAwesome;
  content: "\f103";
}

/* about& shop */
.fullBG{
  padding-top: 0;
  background: no-repeat center top;
}
.fullBG.about{
  background-image:url("/img/index/sec02_bk01.jpg");
}
.fullBG.shop{
  background-image:url("/img/index/sec06_bk01.jpg");
}
.fullBG div{
  width: 430px;
  background-color: rgba(255, 255, 255, .8);
}
.fullBG.about div{
  padding: 78px 32px 77px;
}
.cn .fullBG.about div{
  padding: 24px 32px 77px;
}
.fullBG.shop div{
  padding: 70px 32px 67px;
}
.cn .fullBG.shop div{
  height: 580px;
}
.fullBG.about .moreLink.toAbout{
  bottom: 78px;
  left: 42px;
}
.fullBG.shop .moreLink.toShop{
  bottom: 78px;
  left: 30px;
}
/* //about&shop */

/* product&QA */
.centerFrame{
  padding-top: 64px;
  background: no-repeat center 90% / contain;
}
.centerFrame.product{
  background-image: url(/img/index/sec03_bk01.png);
}
.centerFrame.q_a{
  background-image: url(/img/index/sec05_bk01.png);
}
.centerFrame div {
  background: url(/img/index/sec03_bk01_01.png) no-repeat center / contain;
  width: 480px;
  padding: 8px 0 0;
}
.centerFrame .text{
  padding: 32px 0px 64px;
}
.centerFrame.product .text{
  line-height: 2;
}

.centerFrame.product .moreLink{
  bottom: 42px;
}
.centerFrame .moreLink.toProduct{
  left: 42px;
}
.centerFrame .moreLink.toAbout2{
  left: 16px;
}
.centerFrame.q_a .moreLink.toQ_a{
  bottom: 58px;
  left: 16px;
}
/* //product&QA */

/* case */
.case{
  background-color: #fff;
}
.case div.caseText{
  width: 600px;
  padding: 8px 0 0;
  margin-bottom: 32px;
}

.case .moreLink{
  bottom: 0;
}
.case .moreLink.toCase{
  left: 32px;
}
.case .moreLink.toKnowledge{
  left: -8px;
}

.case .caseList{
  background-color: #f1f1f3;
}
.case .caseList dl{
  width: 474px;
  margin: 0 auto;
  padding: 24px 0;
    -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;}
.case .caseList dt{
  font-size: 24px;
  font-weight: bold;
  color: #3e3f47;
  margin-left: 8px;
}
.case .caseList dd{
  margin-left: 32px;
}
.case .caseList dd li{
  margin-left: 4px;
}
.case .caseList dd .moreLink{
  position: static;
}
/* //case */

.floatReq{
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 998;
  background-color: #d3c189;
}
.floatReq img{
  opacity: 1;
  transition: .3s;
}
.floatReq:hover img{
  opacity: .8;
}
.bottomKnowledgeBunner{
  display: none;
}

@media only screen and (max-width: 1320px){
  .topics{
    width: 100%;
  }
}
@media only screen and (max-width: 1050px){
  .topics .topKnowlege{
    width: 620px;
  }
  .topics .topKnowlege .topKnowlegeTextWrap::before{
    width: 148px;
    margin-left: 0;
  }
}

  .msBrowser section div{
    height: 580px;
  }
  .msBrowser section .text{
    position: absolute;
    top: 96px;
    right: 64px;
  }
  .msBrowser.ie .moreLink a::after{
    content: "\f101";
  }
  .msBrowser section.product  .text{
    right: 96px;
  }
  .msBrowser section.product .moreLink{
    bottom: 90px;
  }
  .msBrowser section.product .toProduct{
    left: 24px;
  }
  .msBrowser section.product .toAbout2{
    left: 0;
  }

  .msBrowser section.case{
    margin-bottom: 64px;
  }
  .msBrowser section.case .caseText{
    height: 400px;
  }
  .msBrowser section.case .caseList{
    height: 146px;
  }
  .msBrowser section.case .caseList dl{
    position: absolute;
    left: 50%;
    margin-left: -237px;
  }

  .msBrowser section.q_a  .text{
    right: 104px;
  }
  .msBrowser .centerFrame.q_a .moreLink.toQ_a{
    bottom: 96px;
  }


/* タブレット以下 */
@media only screen and (max-width: 1024px){
  .firstMsg{
    background-size: 100% auto;
    padding-top: 44.5%;
  }
  .firstMsg .copy{
    background-size: 100% auto;
  }
}
@media only screen and (max-width: 959px){
  .topics{
    flex-direction: column;
    height: auto;
    align-items: center;
  }
  .topics .request .requestAnnounce{
    margin: 0 auto;
  }
  .topics .request{
    width: 100%;
  }
}/* このとじカッコは消さないこと */

/* スマホ以下 */
@media only screen and (max-width: 767px){
  .topics,
  main,
  .cn main{
    display: none;
  }
  .firstMsg{
    background-position: center;
    background-size: 100% auto;
    padding-top: 88%;
    background-color: #fff;
    background-image:url("/img/index/firstMsgImg_sp.jpg");
  }
  .cn .firstMsg {
    background-image: url("/img/index/cn_firstMsgImg_sp.jpg");
  }
  .firstMsg .copy{
    background: url("/img/index/firstCopyBg_sp.jpg") no-repeat center center;
    background-size: 100% auto;
  }
  .firstMsg .copy .texts{
    background-position: top center;
    width: 100%;
    padding: 146px 0 0;
    margin-top: -114px;
    text-align: center;
  }
  .firstMsg .copy .texts p{
    font-size: 16px;
  }
  .firstMsg .copy .texts .text2{
    font-size: 24px;
  }
.bottomKnowledgeBunner{
  display: block;
}
}/* このとじカッコは消さないこと */