@charset "UTF-8";
/*resetCSS*/
html, body, h1, h2, h3, h4,
ul, ol, dl, li, dt, dd, p, div, span,
img, a, table, tr, th, td, figure {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  user-select: none;
}
 
article, header, footer, aside, figure, figcaption, nav, section {
  display: block;
}
 
i{ font-style: normal;}

ol, ul {
  list-style: none;
  list-style-type: none;
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

.pc{display:none;}

a{
    text-decoration: none;
}

#loader{
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 99;
  display: none;
}

/**/
.sk-chase {
    width: 40px;
    height: 40px;
    position: absolute;
    animation: sk-chase 2.5s infinite linear both;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #c2996c;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4); 
  } 100%, 0% {
    transform: scale(1.0); 
  } 
}
/**/


body{
    background: #c29a6c;
    font-family: "Oswald","Noto Sans JP","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Roboto, "游ゴシック", YuGothic, "Yu Gothic", Arial, sans-serif;
    /*font-family: "Oswald","Noto Sans JP";*/
}

img{
    width: auto;
    max-width: 100%;
}

header {
    display: flex;
    /*flex-wrap: wrap;*/
    justify-content: flex-start;
    margin:0 auto;
    text-align: center;
    background: #c29a6c;
    color: #fff;
    height: 35px;
}
header a{
    padding: 0;
}
header a img{
  width: 50%;
  margin-top: 9px;
}


header a b{
    font-size: 14px;
}
header a span{
    display: block;
    font-size: 12px;
}

a img,
#head-color img,
#shaft-color img{

}


a:hover img,
#head-color :hover img,
#shaft-color :hover img{
  opacity: .8;
}


footer{
  background: #c29a6c;
  color: #fff;
  padding: 10px;
  padding-bottom: 0px;
  padding-left: 100px;
}

#honma-logo{background:#fff;}
#beres-logo{margin-left:auto;}
#copyright{
    background: #c29a6c;
    color: #fff;
    text-align: center;
    font-size: 11px;
    letter-spacing: .05em;
    opacity: .8;
}

#header-text .en{
    font-size: 20px;
    line-height: 35px;
    vertical-align: middle;
    margin-left: 10px;
    white-space: nowrap;
}

#header-text .jp{
    font-size: 14px;
    line-height: 35px;
    vertical-align: middle;
    margin-left: 10px;
    font-weight: normal;
}

#simulation-area{
  position: relative;
  display: block;
  overflow: hidden;
}

#color-name-e,
#color-name-j{
  color: #c29a6c;
  text-align: center;
  margin: auto;
  vertical-align: baseline;
}

#color-name-e i{
  vertical-align: -5px;
}

#color-name-j{font-size: 15px;}
#color-name-j i{
    font-size: 30px;
    line-height: 0;
    font-weight: normal;
    vertical-align: -6px;
}

#simulation-area{background:#fff; }
#simulation-area>*{position: absolute;}
#simulation-area img{filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));}

.swiper-button-next, .swiper-button-prev{
    background: #000;
    border-radius: 50%;
}
.swiper-button-next{right:5px!important;}
.swiper-button-prev{left:5px!important;}

.nav-text{
  /*background: #999;*/
  position: absolute;
  z-index: 99;
  left: 0;
  right: 1580px;
  margin: auto;
  width: 100px;
  color: #fff;
  display: block;
  padding-left: 5px;
  line-height: 1;
}
/*#nav-text-shaft{right: 1266px;}*/
.nav-text .en,
.nav-text .jp{
  font-weight: bold;
}
.nav-text .en{
   margin-bottom: 4px;
}

.swiper-scrollbar-drag {
    background: rgb(255, 255, 255)!important;
}

#head-color,
#shaft-color{
    padding-bottom: 10px;
}

#head-color li,
#shaft-color li{
  display: inline-block;
  background: #fff;
  line-height: 0;
  letter-spacing: 0;
  font-size: 0;
  cursor: pointer;
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
}

#head-color li.active,
#shaft-color li.active{
  outline: 2px solid #e60012;
  outline-offset: -2px;
}

#head-color li.active img,
#shaft-color li.active img{
  opacity: 1!important;
  pointer-events: none;
}

/*
ffのみvwが追従しない　（縦長/横長が変わると追従するレアケース）
似た事例記事あり、fontawesome."js"を一旦切った。"css"ならいけるか試す
*/

@media (orientation: landscape){
#simulation-area{
    height: calc(100vh - 250px);
}
/*
70vw 端からやや中央に寄せる用　margin
*/
#simulation-head{
    z-index: 9;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 10vh;
    width: 40vh;
    left: 70vw;
}
#simulation-shaft{
    transform: rotate(90deg);
    /*right: 1014px;*/
    bottom: calc( -1120px + 16vh);
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
#simulation-headparts{
    z-index: 9;
    transform: rotate(90deg);
    margin: auto;
    top: 0;
    left: 0;
    right: 70vw;
    bottom: 5vh;
    width: 35vh;
}
#simulation-shaftparts{
    margin: auto;
    top: 0;
    right: 0;
    left: calc(160vh - 70vw);
    width: 4.3vh;

    transform: rotate(90deg) translate(10.6vh);
    bottom: 5vh;
    /*↑の方が同じbottom値が使えるので良いかも*/
    /*  transform: rotate(90deg);
    bottom: -16.1vh;*/
}
#color-name-e,
#color-name-j{
  left: 0;
  right: 0;
  /*top: 50%;*/
  top: 40%;
}
#color-name-e{
  /*font-size: 60px;*/
  font-size: 4.5vw;
  /*transform: translateY(-100%) translatex(-60px);*/
  transform: translateY(-100%) translatex(-70px);
}

#color-name-j{
  /*transform: translatex(-60px);*/
  transform: translatex(-70px);
}

#header-text .jp br{
  display: none;
}

}


@media (orientation: portrait){
#copyright{padding-bottom:5px;}
#simulation-area {
  height: 150vw;
}
#simulation-head{
  bottom: 20vw;
  left: 3vw;
  width: 50vw;
  transform: translate(0,-30px);
}
#simulation-shaft{
    right: 7vw;
    width: auto;
    max-width: 12vw;
    margin-top: auto;
    margin-bottom: auto;
    top: 0;
    bottom: 0;
}
#simulation-headparts{
  z-index: 9;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 4vw;
  width: 50vw;
  transform: translate(0,-30px);
}
#simulation-shaftparts{
  margin-left: auto;
  margin-right: auto;
  right: 0;
  bottom: 50vw;
  left: 30.5vw;
  width: 6vw;
  transform: translate(0,-30px);
}
#color-name-e {
    font-size: 8.5vw;
    line-height: 1;
    left: 2vw;
    top: 25vw;
    width: 60vw;
}
#color-name-e b{
  display: block;
}
#color-name-j{
  /*bottom: 0;*/ /*vwの端数で微妙に隙間が*/
  bottom: -2px;
  left: 0;
  right: 0;
  color: #fff;
  background: #c2996c;
  z-index: 99;
  padding-top: 10px;
}

#header-text .jp {
  position: absolute;
  color: #c2996c;
  top: 50px;
  z-index: 9999;
  left: 4vw;
  text-align: left;
  line-height: 1.6;
  font-size: 4.5vw;
}
.note span{
    display: block!important;
}

}



@media screen and (max-width: 414px){/*幅が狭い端末（タブレットを除くスマホ）*/
#head-color li,
#shaft-color li{
  width: 50px;
}
.swiper-button-next, .swiper-button-prev{
    height: 30px!important;
    width: 30px!important;
    background-size: 8px!important;
    margin-top: -18px!important;
}
#nav-text-head{margin-top: 12px;}
.nav-text .en{font-size: 20px;}
.nav-text .jp{font-size: 12px;}

.nav-text {
    width: 60px;
}
footer {
  padding-left: 60px;
}
header a {
    padding: 0 10px;
}
header a img {
    width: 100%;
    margin-top: 9px;
}
#copyright{
  font-size: 10px;
  letter-spacing: 0;
}

}

@media screen and (min-width: 415px){/*上記以外*/
#head-color li,
#shaft-color li{
  width: 100px;
}
.pc{display: inline-block;}
#shaft-color li{
  height: 40px;
  overflow: hidden;
}
#shaft-color li img{
  margin-top: -10px;
}
.swiper-button-next, .swiper-button-prev{
    height: 36px!important;
    width: 36px!important;
    background-size: 10px!important;
}
#nav-text-head{margin-top: 42px;}
.nav-text .en{font-size: 20px;}
.nav-text .jp{font-size: 12px;}



}

/*注意分追加*/
.note {
  display: block;
  text-align: right;
  font-size: 11px;
  margin: 0px 0 10px;
  font-weight: bold;
}
.note span{
    display: inline-block;
    font-weight: bold;
    margin-left: 5px;
}