@import url("https://fonts.googleapis.com/css2?family=Antonio&display=swap");
/*--- sass -------------------------------------*/
/*-------------------------------------------------
	reset
--------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal; }

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

em, strong, th, address {
  font-style: normal;
  font-weight: normal;
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%; }

img, object, embed {
  border: 0;
  vertical-align: top; }

img {
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden; }

hr {
  border: none; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%; }

li {
  list-style-type: none; }

strong {
  font-weight: bold; }

a {
  outline: none; }

/*-------------------------------------------------
	base
--------------------------------------------------*/
body {
  position: relative;
  background: #000000;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%; }

.sp {
  display: none; }

.pc {
  display: block; }

@media (max-width: 750px) {
  .sp {
    display: block; }

  .pc {
    display: none; } }
.pc_480 {
  display: block; }
  @media screen and (max-width: 480px) {
    .pc_480 {
      display: none; } }

.sp_1040 {
  display: none; }
  @media screen and (max-width: 1040px) {
    .sp_1040 {
      display: block; } }

.sp_1040_750 {
  display: none; }
  @media screen and (max-width: 1040px) {
    .sp_1040_750 {
      display: block; } }
  @media screen and (max-width: 750px) {
    .sp_1040_750 {
      display: none; } }

.sp_960 {
  display: none; }
  @media screen and (max-width: 960px) {
    .sp_960 {
      display: block; } }

.sp_960_750 {
  display: none; }
  @media screen and (max-width: 960px) {
    .sp_960_750 {
      display: block; } }
  @media screen and (max-width: 750px) {
    .sp_960_750 {
      display: none; } }

.sp_960_480 {
  display: none; }
  @media screen and (max-width: 960px) {
    .sp_960_480 {
      display: block; } }
  @media screen and (max-width: 480px) {
    .sp_960_480 {
      display: none; } }

.sp_480 {
  display: none; }
  @media screen and (max-width: 480px) {
    .sp_480 {
      display: block; } }

.sp_320 {
  display: none; }
  @media screen and (max-width: 320px) {
    .sp_320 {
      display: block; } }

.box_in {
  max-width: 1240px;
  margin: 0 auto; }
  @media screen and (max-width: 1280px) {
    .box_in {
      padding: 0 40px; } }
  @media screen and (max-width: 750px) {
    .box_in {
      padding: 0 9.3333333333vw; } }

/*END*/
.antonio {
  font-family: 'Antonio', sans-serif; }

/*tel none*/
a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
  pointer-events: none; }

/*-------------------------------------------------
	fade
--------------------------------------------------*/
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease; }

body.fade::after {
  opacity: 1; }

/*anime set
------------------------*/
.main_bg, .main_kabuto, .title, .title2 {
  visibility: hidden; }

.main_img .img01, .main_img .img02, .main_img .img03 {
  visibility: hidden; }

#concept p, .about_bg, .about_logo, .about h2, .about_inner_r p, .movie {
  visibility: hidden; }

#nav li:nth-child(1), #nav li:nth-child(2), #nav li:nth-child(3) {
  visibility: hidden; }

#bottom_logo img, #bottom_logo p {
  visibility: hidden; }

/*-------------------------------------------------
	header
--------------------------------------------------*/
header {
  position: relative;
  z-index: 80; }
  header .seiko_logo {
    width: 130px;
    position: absolute;
    right: 35px;
    top: 35px; }
  header .s5s_logo {
    width: 100px;
    position: absolute;
    left: 30px;
    top: 30px; }

/*------ header logo ------*/
@media (max-width: 1600px) {
  header .seiko_logo {
    width: 8.17vw;
    right: 2.2vw;
    top: 2.2vw; }
  header .s5s_logo {
    width: 6.2vw;
    left: 1.85vw;
    top: 1.85vw; } }
/*END*/
@media (max-width: 1000px) {
  header .seiko_logo {
    width: 10vw;
    right: 1.85vw;
    top: 1.85vw; }
  header .s5s_logo {
    width: 8vw;
    left: 2.2vw;
    top: 2.2vw; } }
/*END*/
@media screen and (orientation: portrait) {
  header .seiko_logo {
    width: 130px;
    right: 35px;
    top: 35px; }
  header .s5s_logo {
    width: 100px;
    left: 30px;
    top: 30px; } }
/*END*/
@media screen and (max-width: 780px) and (orientation: portrait) {
  header .seiko_logo {
    width: 17vw;
    right: 4.5vw;
    top: 4.5vw; }
  header .s5s_logo {
    width: 13vw;
    left: 3.8vw;
    top: 3.8vw; } }
/*END*/
@media screen and (max-width: 640px) and (orientation: portrait) {
  header .seiko_logo {
    width: 20vw;
    right: 3.9vw;
    top: 3.9vw; }
  header .s5s_logo {
    width: 17vw;
    left: 3.3vw;
    top: 3.3vw; } }
/*END*/
/*-------- scroll --------*/
.scroll {
  height: 75px;
  width: 80px;
  margin-left: -40px;
  position: absolute;
  bottom: 0;
  z-index: 200;
  transition: .3s;
  right: 0; }
  .scroll .scroll_inner {
    height: 75px; }
  @media screen and (max-width: 750px) and (orientation: portrait) {
    .scroll {
      height: 12.6666666667vw;
      right: auto;
      left: 50%; }
      .scroll .scroll_inner {
        height: 12.6666666667vw; } }
  .scroll a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 200;
    transition: 0.3s;
    cursor: pointer; }
    .scroll a .scroll_wheel {
      width: 1px;
      height: 100%;
      opacity: 0;
      overflow: hidden;
      animation: scroll_wheel 0s 0s 1 forwards ease-out;
      background: black;
      display: block;
      position: absolute;
      left: 50%;
      bottom: 0px;
      margin-left: -0.5px;
      transition: 0.3s;
      z-index: 200; }
      .scroll a .scroll_wheel:after {
        opacity: 1;
        width: 100%;
        height: 30%;
        animation: scroll_wheel_after 2.5s 0.5s infinite normal ease;
        background: #bdf808;
        position: absolute;
        content: " ";
        display: block;
        z-index: 11;
        left: 0%;
        top: -100%; }
    .scroll a:hover .scroll_wheel {
      background: #bdf808; }

@keyframes scroll_wheel {
  0% {
    bottom: 0%;
    opacity: 0; }
  100% {
    bottom: 0%;
    opacity: 1; } }
@keyframes scroll_wheel_after {
  0% {
    top: 0%; }
  30% {
    opacity: 1;
    top: 100%; }
  40% {
    opacity: 0;
    top: 130%; }
  41% {
    opacity: 0;
    top: -34%; }
  50% {
    opacity: 1;
    top: -34%; }
  60% {
    top: 0%; }
  100% {
    top: 0%; } }
/*scroll_p*/
.scroll_p {
  width: 7px;
  position: absolute;
  bottom: 118%;
  left: 50%;
  text-align: center;
  z-index: 200;
  pointer-events: none;
  margin-left: -2px; }

@media screen and (max-width: 750px) {
  .scroll_p {
    display: none; } }
/*END*/
/*-------------------------------------------------
	contents
--------------------------------------------------*/
.wrapper {
  position: relative;
  overflow: hidden; }

/*-------------------------------------------------
	collections
--------------------------------------------------*/
.spec {
  padding: 106px 0 85px;
  background: #0b0b0c; }
  .spec h2 {
    text-align: center;
    line-height: 1; }
    .spec h2 .p1 {
      font-size: 45px; }
    .spec h2 .p2 {
      font-size: 55px;
      margin-top: 17px; }
  .spec ul {
    margin-top: 125px;
    display: flex;
    justify-content: center; }
    .spec ul li {
      width: 46%;
      text-align: center; }
      .spec ul li .images {
        width: 278px;
        margin: 0 auto; }
      .spec ul li .txt_area {
        margin-top: 40px; }
        .spec ul li .txt_area .comment {
          margin-top: 30px;
          font-size: 14px; }
          @media screen and (max-width: 750px) {
            .spec ul li .txt_area .comment {
              font-size: 3.4666666667vw; } }
    .spec ul .left {
      border-right: 2px solid rgba(255, 255, 255, 0.15); }
  @media screen and (max-width: 1200px) {
    .spec ul li .images {
      width: 23.1666666667vw; } }
  @media screen and (max-width: 750px) {
    .spec {
      padding: 17.3333333333vw 0 16vw; }
      .spec .box_in {
        padding: 0 9.3333333333vw; }
      .spec h2 {
        white-space: nowrap;
        text-align: center;
        line-height: 1; }
        .spec h2 .p1 {
          font-size: 6.9333333333vw; }
        .spec h2 .p2 {
          margin-top: 2.5vw;
          font-size: 8.4vw; } }
      @media screen and (max-width: 750px) and (max-width: 480px) {
        .spec h2 .p2 .big {
          font-size: 10.6666666667vw; } }
  @media screen and (max-width: 750px) {
      .spec ul {
        margin-top: 16.6666666667vw;
        display: block; }
        .spec ul li {
          width: 100%; }
          .spec ul li .images {
            max-width: 300px;
            width: 51.7333333333vw;
            margin: 0 auto; }
        .spec ul .left {
          border-right: none;
          border-bottom: 2px solid rgba(255, 255, 255, 0.15);
          padding-bottom: 15.3333333333vw; }
        .spec ul .right {
          padding-top: 15.3333333333vw; } }
  .spec .p3 {
    margin-top: 85px;
    text-align: center;
    font-size: 14px; }
    @media screen and (max-width: 750px) {
      .spec .p3 {
        margin: 14vw 0 0 0;
        border-top: 2px solid rgba(255, 255, 255, 0.15);
        padding-top: 16vw;
        font-size: 3.7333333333vw; } }

/*---------txt---------*/
.collections_no {
  margin-top: 14px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 1.5px;
  font-weight: 500; }
  @media screen and (max-width: 750px) {
    .collections_no {
      font-size: 7.4666666667vw; } }

.collections_movement {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  font-weight: 500; }
  @media screen and (max-width: 750px) {
    .collections_movement {
      font-size: 3.7333333333vw; } }

.collections_price {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1px;
  font-weight: 500; }
  .collections_price span {
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-left: 3px; }
  @media screen and (max-width: 750px) {
    .collections_price {
      font-size: 4.8vw; }
      .collections_price span {
        font-size: 3.4666666667vw; } }

.collections_limited {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 1px;
  font-weight: 500;
  position: relative;
  display: inline-block; }
  .collections_limited::after {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 2px;
    background: #fff; }
  @media screen and (max-width: 750px) {
    .collections_limited {
      font-size: 3.7333333333vw; } }

.collections_release {
  margin-top: 27px; }
  .collections_release p {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    font-weight: 500; }
    .collections_release p:nth-child(1) {
      padding-bottom: 3px; }
    @media screen and (max-width: 750px) {
      .collections_release p {
        font-size: 3.4666666667vw; } }

@media screen and (max-width: 450px) {
  .collections_no {
    margin-top: 14px;
    font-size: 23px;
    line-height: 1;
    letter-spacing: 1.5px; } }
/*END*/
@media screen and (max-width: 430px) {
  .collections_release p {
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0px; } }
/*END*/
/*collections_btn*/
.collections_btn {
  max-width: 190px;
  margin: 10px auto 0; }
  .collections_btn a {
    margin-top: 10px;
    background: #333;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    padding: 14px 0 16px;
    letter-spacing: 0px;
    display: block;
    transition: 0.3s;
    text-decoration: none;
    opacity: 1; }
    .collections_btn a span {
      width: 12px;
      height: 17px;
      margin: 0 5px -2px;
      display: inline-block;
      background: url(../image/map_icon.png) center top no-repeat;
      background-size: cover; }
    .collections_btn a:hover {
      opacity: 0.7; }
  @media screen and (max-width: 750px) {
    .collections_btn {
      margin: 3.3333333333vw auto 0;
      max-width: 50vw; }
      .collections_btn a {
        font-size: 3.4666666667vw;
        padding: 3.7333333333vw 0 4.2666666667vw; } }

.btm_spec {
  margin-top: 25px; }

.btm_spec a {
  background: #333333; }

/*-------------------------------------------------
	gotop
--------------------------------------------------*/
.gotop {
  position: absolute;
  bottom: 0px;
  right: 20px;
  width: 50px;
  height: 70px;
  box-sizing: border-box;
  border-radius: 0%;
  z-index: 2000 !important; }
  .gotop a {
    position: relative;
    display: block;
    background: rgba(33, 33, 33, 0.8);
    text-decoration: none;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 0%;
    z-index: 11;
    transition: 0.3s; }
    .gotop a::after {
      position: absolute;
      top: 50%;
      left: 50%;
      content: '';
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      background: url("../image/page_top.png") no-repeat;
      background-size: cover; }
    .gotop a:hover {
      background: rgba(60, 60, 60, 0.5); }

@media (max-width: 500px) {
  .gotop {
    position: absolute;
    bottom: 0px;
    right: 10px;
    width: 40px;
    height: 50px; }
    .gotop a {
      width: 40px;
      height: 40px; }
      .gotop a::after {
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px; } }
/*END*/
/*-------------------------------------------------
	footer
--------------------------------------------------*/
footer {
  background: #262626;
  width: 100%;
  height: auto; }
  footer::after {
    content: " ";
    display: block;
    clear: both; }

.foot_l {
  float: left;
  margin: 59px 0 0 40px; }
  .foot_l .foot_logo {
    float: left;
    line-height: 1;
    margin-bottom: 53px; }
    .foot_l .foot_logo img {
      width: 131px;
      transition: 0.2s; }
    .foot_l .foot_logo a:hover img {
      opacity: 0.6; }
  .foot_l .copyright {
    float: left;
    margin: 13px 0 0 32px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 1px;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400; }

@media (max-width: 750px) {
  .foot_l {
    float: none;
    margin: 39px 0 0 0px;
    text-align: center; }
    .foot_l .foot_logo {
      float: none;
      line-height: 1;
      margin-bottom: 23px; }
    .foot_l .copyright {
      float: none;
      margin: 13px 0 0 0px;
      padding-bottom: 30px;
      font-size: 12px;
      line-height: 1;
      color: #fff; } }
/*END*/
.foot_r {
  float: right;
  padding-top: 58px;
  margin: 0 35px 0 0; }
  .foot_r .sns {
    display: flex;
    list-style-type: none; }
    .foot_r .sns img {
      width: 100%; }
    .foot_r .sns > li {
      width: 40px;
      margin-right: 12px;
      padding: 5px;
      line-height: 1;
      border-radius: 50%;
      transition: 0.3s;
      background: #3c3c3c; }
      .foot_r .sns > li:nth-child(2) {
        margin-right: 0; }
      .foot_r .sns > li:hover {
        opacity: 0.5; }

@media (max-width: 750px) {
  .foot_r {
    float: none;
    padding-top: 40px;
    margin: 0px; }
    .foot_r .sns {
      position: static;
      margin-bottom: 20px;
      justify-content: center; }
      .foot_r .sns > li {
        margin-right: 10px; } }
/*END*/
/*-------------------------------------------------
	main
--------------------------------------------------*/
#main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; }
  #main .mv_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../image/mv_bg.jpg") no-repeat;
    background-size: cover; }
  #main .mv {
    width: 100%; }
    #main .mv .mv_inner {
      padding: 100px 0 90px; }
    #main .mv .watches {
      width: 590px;
      margin: 0 auto; }
      #main .mv .watches img {
        margin: 0 auto; }
    #main .mv h1 {
      color: #000;
      margin-top: 38px;
      text-align: center;
      line-height: 1; }
      #main .mv h1 .p1 {
        font-size: 42px; }
      #main .mv h1 .p2 {
        margin-top: 10px;
        font-size: 61px; }
    #main .mv .mv_inner {
      padding: 6.25vw 0 5.625vw; }
    #main .mv .watches {
      width: 36.875vw; }
    #main .mv h1 {
      margin-top: 2.375vw; }
      #main .mv h1 .p1 {
        font-size: 2.625vw; }
      #main .mv h1 .p2 {
        margin-top: 0.625vw;
        font-size: 3.8125vw; }

@media screen and (max-width: 750px) and (orientation: portrait) {
  #main {
    width: 100%; }
    #main .mv_bg {
      background: url("../image/sp/sp_mv_bg.jpg") no-repeat;
      background-size: cover; }
    #main .mv .watches {
      width: 83.3333333333vw; }
    #main .mv .mv_inner {
      padding: 33.6vw 0 22.6666666667vw; }
    #main .mv h1 {
      margin-top: 5.8666666667vw; }
      #main .mv h1 .p1 {
        font-size: 5.7333333333vw; }
      #main .mv h1 .p2 {
        margin-top: 1.3333333333vw;
        font-size: 8.6666666667vw; } }
/*END*/
/*-------------------------------------------------
	intro
--------------------------------------------------*/
#intro {
  background: #000000;
  padding: 106px 0 215px; }
  #intro .box_in .intro_area {
    text-align: center;
    font-size: 18px;
    line-height: 2.1;
    font-weight: bold; }
    #intro .box_in .intro_area .p2 .sp_1300 {
      display: none; }
    @media screen and (max-width: 1300px) {
      #intro .box_in .intro_area .p2 .sp_1300 {
        display: block; } }
@media screen and (max-width: 1300px) and (max-width: 750px) {
  #intro .box_in .intro_area .p2 .sp_1300 {
    display: none; } }

  #intro .box_in .contents {
    margin-top: 90px;
    display: flex;
    flex-flow: row-reverse;
    justify-content: center;
    align-items: center; }
    #intro .box_in .contents .left {
      width: 384px;
      margin-right: 130px; }
    #intro .box_in .contents .right {
      width: 475px; }
      #intro .box_in .contents .right .logo {
        width: 245px; }
      #intro .box_in .contents .right h3 {
        margin-top: 50px; }
        #intro .box_in .contents .right h3 .p1 {
          font-size: 50px;
          letter-spacing: 0.4rem; }
        #intro .box_in .contents .right h3 .p2 {
          font-size: 16px;
          font-weight: bold;
          line-height: 1;
          margin-top: 10px; }
      #intro .box_in .contents .right .links {
        margin-top: 15px; }
        #intro .box_in .contents .right .links a {
          color: #fff;
          display: inline-block;
          text-decoration: none;
          font-size: 15px;
          transition: 0.3s;
          position: relative; }
          #intro .box_in .contents .right .links a:after {
            position: absolute;
            display: block;
            content: '';
            width: 100%;
            height: 1px;
            background: #fff; }
          #intro .box_in .contents .right .links a:hover {
            opacity: 0.7; }
      #intro .box_in .contents .right .txt {
        margin-top: 35px;
        line-height: 2.1; }

@media screen and (max-width: 1200px) {
  #intro {
    padding: 8.8333333333vw 0 17.9166666667vw; }
    #intro .box_in .contents {
      margin-top: 7.5vw; }
      #intro .box_in .contents .left {
        width: 384px;
        margin-right: 10.8333333333vw; }
      #intro .box_in .contents .right {
        width: 475px; }
        #intro .box_in .contents .right .logo {
          width: 245px; }
          #intro .box_in .contents .right .logo img {
            margin: 0 auto; }
        #intro .box_in .contents .right h3 {
          margin-top: 4.1666666667vw; }
          #intro .box_in .contents .right h3 .p2 {
            margin-top: 0.8333333333vw; }
        #intro .box_in .contents .right .links {
          margin-top: 1.25vw; }
        #intro .box_in .contents .right .txt {
          margin-top: 2.9166666667vw; } }
@media screen and (max-width: 960px) {
  #intro .box_in .contents {
    display: block; }
    #intro .box_in .contents .left {
      width: 384px;
      margin-right: 0px;
      margin: 0 auto;
      margin-top: 40px; }
    #intro .box_in .contents .right {
      max-width: 540px;
      width: 100%;
      margin: 0 auto;
      text-align: center; }
      #intro .box_in .contents .right .logo {
        width: 470px;
        margin: 0 auto; } }
@media (max-width: 900px) and (orientation: landscape) {
  .is-mobile #intro .box_in .intro_area {
    font-size: 15px; } }
@media screen and (max-width: 750px) {
  #intro {
    background: #000000;
    padding: 10.6666666667vw 0 40vw; }
    #intro .box_in {
      padding: 0; }
      #intro .box_in .intro_area {
        font-size: 3.7333333333vw;
        font-weight: bold;
        line-height: 1.8; }
        #intro .box_in .intro_area .p2 {
          margin-top: 20px; }
      #intro .box_in .contents {
        padding: 0 9.3333333333vw;
        margin-top: 11.7333333333vw; }
        #intro .box_in .contents .left {
          width: 57.0666666667vw; }
        #intro .box_in .contents .right {
          max-width: 100%; }
          #intro .box_in .contents .right .logo {
            width: 62.6666666667vw; }
          #intro .box_in .contents .right h3 {
            margin-top: 4vw; }
            #intro .box_in .contents .right h3 .p1 {
              font-size: 9.7333333333vw; }
            #intro .box_in .contents .right h3 .p2 {
              font-size: 3.2vw; }
          #intro .box_in .contents .right .links {
            margin-top: 2vw; }
            #intro .box_in .contents .right .links a {
              font-size: 4vw; }
          #intro .box_in .contents .right .txt {
            margin-top: 8vw;
            font-size: 3.7333333333vw;
            text-align: left;
            line-height: 1.8; } }
/*END*/
/*-------------------------------------------------
	dial_bezel
--------------------------------------------------*/
#dial_bezel {
  position: relative; }
  @media screen and (max-width: 2000px) {
    #dial_bezel {
      height: 842px; } }
  @media screen and (max-width: 1600px) {
    #dial_bezel {
      height: 52.625vw; } }
  #dial_bezel .bg {
    width: 100%;
    height: 100%;
    background: url("../image/design_img.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0; }
  #dial_bezel .icon {
    position: absolute;
    top: -104px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center; }
    #dial_bezel .icon .icon_inner p {
      color: #585859;
      font-size: 34px; }
    #dial_bezel .icon .icon_inner img {
      margin: 0 auto;
      margin-top: 10px;
      width: 5px; }
  #dial_bezel .box_in {
    position: relative;
    height: 100%; }
    #dial_bezel .box_in .pc {
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
    #dial_bezel .box_in .txt_area {
      width: 400px;
      margin-left: 10vw; }
      #dial_bezel .box_in .txt_area h2 {
        font-size: 50px; }
      #dial_bezel .box_in .txt_area .txt {
        margin-top: 20px;
        font-size: 15px;
        line-height: 2.1; }
  @media screen and (min-width: 2000px) {
    #dial_bezel {
      height: 42.1vw; }
      #dial_bezel .box_in .txt_area {
        margin-left: 5vw; } }
  @media screen and (max-width: 1600px) {
    #dial_bezel .box_in .txt_area .txt {
      margin-top: 1.25vw; } }
  @media screen and (max-width: 1080px) {
    #dial_bezel .box_in .txt_area {
      margin-left: 1.8518518519vw; } }
  @media screen and (max-width: 880px) {
    #dial_bezel .bg {
      background-position: 19% center; } }

/*END*/
@media screen and (max-width: 750px) {
  #dial_bezel {
    padding: 22.6666666667vw 0 18.6666666667vw;
    position: relative;
    height: auto; }
    #dial_bezel .bg {
      background: url("../image/sp/sp_design_bg.jpg") no-repeat;
      background-size: cover;
      background-position: top center; }
    #dial_bezel .icon {
      top: -21.933333vw; }
      #dial_bezel .icon .icon_inner p {
        font-size: 7.3333333333vw; }
      #dial_bezel .icon .icon_inner img {
        margin-top: 1.3333333333vw;
        width: 1.0666666667vw; }
    #dial_bezel .box_in .txt_area {
      margin-left: auto;
      width: 100%;
      margin-top: 75px; } }
    @media screen and (max-width: 750px) and (max-width: 480px) {
      #dial_bezel .box_in .txt_area {
        margin-top: 19vw; } }
@media screen and (max-width: 750px) {
      #dial_bezel .box_in .txt_area h2 {
        font-size: 9.3333333333vw; }
      #dial_bezel .box_in .txt_area .txt {
        font-size: 3.7333333333vw;
        line-height: 1.8;
        magrin-top: 2.5vw; } }
/*dial_bezel_sl*/
.dial_bezel_sl {
  margin-bottom: 70px; }
  .dial_bezel_sl li .dial_bezel_sl_inner .item img {
    margin: 0 auto;
    max-width: 513px;
    width: 75%; }
  @media screen and (max-width: 750px) {
    .dial_bezel_sl {
      margin-bottom: 9.3333333333vw; }
      .dial_bezel_sl li .dial_bezel_sl_inner .item img {
        max-width: 68.4vw;
        width: 100%; } }

/* Slider < > dots
----------------------------------------------------*/
/* < > btn */
.dial_bezel_sl .slick-prev,
.dial_bezel_sl .slick-next {
  position: absolute;
  z-index: 999;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  transition: 0.2s;
  outline: none;
  cursor: pointer; }

.dial_bezel_sl .slick-prev:hover,
.dial_bezel_sl .slick-next:hover {
  opacity: 0.4 !important; }

.dial_bezel_sl .slick-prev {
  left: 12%;
  background: url("../image/sl_prev.png") no-repeat left center;
  background-size: contain; }

.dial_bezel_sl .slick-next {
  right: 12%;
  background: url("../image/sl_next.png") no-repeat right center;
  background-size: contain; }

@media (max-width: 750px) {
  .dial_bezel_sl .slick-prev,
  .dial_bezel_sl .slick-next {
    position: absolute;
    z-index: 99;
    top: 50%;
    width: 3.2vw;
    height: 5.6vw;
    margin-top: -13px; }

  .dial_bezel_sl .slick-prev {
    left: -4%; }

  .dial_bezel_sl .slick-next {
    right: -4%; } }
/*END*/
/*dots*/
.dial_bezel_sl ul.slick-dots {
  position: absolute;
  bottom: -60px;
  left: 0%;
  z-index: 500;
  width: 100%;
  margin: 0 auto !important;
  padding: 0;
  list-style: none;
  text-align: center;
  display: flex !important;
  justify-content: center;
  z-index: 1; }

.dial_bezel_sl ul.slick-dots li {
  position: relative;
  width: 80px !important;
  height: 40px !important;
  margin: 0 2px; }

.dial_bezel_sl ul.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  cursor: pointer;
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  height: 100%; }

/* OFF */
.dial_bezel_sl ul.slick-dots li button:before {
  position: absolute;
  top: 50%;
  left: 0;
  content: '';
  margin-top: -2px;
  opacity: 1;
  width: 100%;
  height: 4px;
  background: #363636;
  transition: 0.3s; }

/* focus */
.dial_bezel_sl ul.slick-dots li button:hover:before,
.dial_bezel_sl ul.slick-dots li.slick-active button:before {
  background: #ebff6a;
  cursor: pointer; }

/* focus */
@media (max-width: 400px) {
  .dial_bezel_sl ul.slick-dots li {
    position: relative;
    width: 12% !important;
    height: 40px !important;
    margin: 0 2px; }

  .dial_bezel_sl ul.slick-dots li button:before {
    height: 2px; }

  /* focus */ }
/*END*/
/*-------------------------------------------------
	dial_bezel
--------------------------------------------------*/
#clasp {
  position: relative; }
  @media screen and (max-width: 2000px) {
    #clasp {
      height: 850px; } }
  @media screen and (max-width: 1600px) {
    #clasp {
      height: 53.125vw; } }
  #clasp .bg {
    width: 100%;
    height: 100%;
    background: url("../image/clasp_img.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0; }
  #clasp .box_in {
    position: relative;
    display: flex;
    justify-content: flex-end;
    top: 45%;
    transform: translateY(-50%); }
    #clasp .box_in .txt_area {
      width: 275px;
      margin-right: 18vw; }
      #clasp .box_in .txt_area h2 {
        font-size: 50px; }
      #clasp .box_in .txt_area .txt {
        margin-top: 20px;
        font-size: 15px;
        line-height: 2.1; }
  @media screen and (min-width: 2000px) {
    #clasp {
      height: 42.5vw; }
      #clasp .box_in .txt_area {
        margin-right: 11vw; } }
  @media screen and (max-width: 1600px) {
    #clasp .box_in .txt_area .txt {
      margin-top: 1.25vw; } }
  @media screen and (max-width: 1300px) {
    #clasp .bg {
      background-position: center left 65%; }
    #clasp .box_in .txt_area {
      margin-right: 21vw; } }
  @media screen and (max-width: 1080px) {
    #clasp .bg {
      background-position: center left 85%; } }
  @media screen and (max-width: 900px) {
    #clasp .box_in .txt_area {
      margin-right: 12vw; } }

/*END*/
@media screen and (max-width: 750px) {
  #clasp {
    padding: 14vw 0 20vw;
    height: auto; }
    #clasp .bg {
      background: url("../image/sp/sp_clasp_bg.jpg") no-repeat;
      background-size: cover;
      background-position: center; }
    #clasp .box_in {
      display: block;
      top: auto;
      transform: inherit; }
      #clasp .box_in .images {
        text-align: center; }
        #clasp .box_in .images img {
          max-width: 350px;
          width: 55.0666666667vw;
          margin: 0 auto;
          position: relative;
          left: -7vw;
          top: 5vw; }
      #clasp .box_in .txt_area {
        margin-top: 8vw;
        width: 100%;
        margin-right: auto; } }
      @media screen and (max-width: 750px) and (max-width: 480px) {
        #clasp .box_in .txt_area {
          margin-top: 10.6666666667vw; } }
@media screen and (max-width: 750px) {
        #clasp .box_in .txt_area h2 {
          font-size: 9.3333333333vw; }
        #clasp .box_in .txt_area .txt {
          margin-top: 2.5vw;
          font-size: 3.7333333333vw;
          line-height: 1.8; } }
/*-------------------------------------------------
	caseback
--------------------------------------------------*/
#caseback {
  padding: 100px 0 135px;
  position: relative; }
  #caseback .bg {
    width: 100%;
    height: 100%;
    background: url("../image/caseback_bg.png") no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0; }
  #caseback .box_in {
    position: relative; }
    #caseback .box_in .caseback_area {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: row-reverse; }
      #caseback .box_in .caseback_area .txt_area {
        margin-right: 60px;
        width: 380px; }
        #caseback .box_in .caseback_area .txt_area h2 {
          font-size: 50px; }
        #caseback .box_in .caseback_area .txt_area .txt {
          margin-top: 20px;
          font-size: 15px;
          line-height: 2.1; }
          #caseback .box_in .caseback_area .txt_area .txt .min {
            font-size: 13px;
            margin-top: 10px; }
      #caseback .box_in .caseback_area .images {
        width: 450px; }
    #caseback .box_in .contents_area {
      margin-top: 40px;
      display: flex;
      justify-content: center;
      text-align: center; }
      #caseback .box_in .contents_area .box {
        width: 307px;
        margin-right: 160px; }
        #caseback .box_in .contents_area .box h2 {
          font-size: 45px; }
        #caseback .box_in .contents_area .box .txt {
          margin-top: 10px;
          font-size: 15px;
          line-height: 2.1;
          text-align: left;
          display: flex;
          justify-content: center; }
      #caseback .box_in .contents_area .sticker {
        width: 405px; }
        #caseback .box_in .contents_area .sticker h2 {
          font-size: 45px; }
        #caseback .box_in .contents_area .sticker .txt {
          margin-top: 10px;
          font-size: 15px;
          line-height: 2.1;
          text-align: left;
          display: flex;
          justify-content: center; }
  @media screen and (min-width: 2000px) {
    #caseback {
      padding: 5vw 0 6.75vw; } }
  @media screen and (max-width: 1200px) {
    #caseback {
      padding: 8.3333333333vw 0 11.25vw; }
      #caseback .box_in .caseback_area .txt_area {
        margin-right: 5vw; }
        #caseback .box_in .caseback_area .txt_area .txt {
          margin-top: 1.6666666667vw; }
      #caseback .box_in .caseback_area .images {
        width: 37.5vw; }
      #caseback .box_in .contents_area {
        margin-top: 3.3333333333vw; }
        #caseback .box_in .contents_area .box {
          margin-right: 13.3333333333vw; } }
      @media screen and (max-width: 1200px) and (max-width: 960px) {
        #caseback .box_in .contents_area .box {
          margin-right: 0; } }
  @media screen and (max-width: 1200px) {
          #caseback .box_in .contents_area .box .images {
            width: 25.5833333333vw;
            margin: 0 auto; }
          #caseback .box_in .contents_area .box .txt {
            margin-top: 0.8333333333vw; }
        #caseback .box_in .contents_area .sticker .images {
          width: 33.75vw;
          margin: 0 auto; }
        #caseback .box_in .contents_area .sticker .txt {
          margin-top: 0.8333333333vw; } }

/*END*/
@media screen and (max-width: 750px) {
  #caseback {
    padding: 13.3333333333vw 0 18vw;
    position: relative; }
    #caseback .bg {
      background: url("../image/sp/sp_caseback_bg.png") no-repeat;
      background-size: cover;
      background-position: center; }
    #caseback .icon_logo {
      position: absolute;
      top: 25%;
      left: 0; }
    #caseback .box_in {
      position: relative;
      z-index: 2; }
      #caseback .box_in .caseback_area {
        display: block; }
        #caseback .box_in .caseback_area .txt_area {
          margin-top: 5.3333333333vw;
          margin-right: 0px;
          width: 100%; }
          #caseback .box_in .caseback_area .txt_area h2 {
            text-align: center;
            font-size: 9.3333333333vw; }
          #caseback .box_in .caseback_area .txt_area .txt {
            margin-top: 2.5vw;
            font-size: 3.7333333333vw;
            line-height: 1.8; }
            #caseback .box_in .caseback_area .txt_area .txt .min {
              font-size: 3.2vw;
              margin-top: 4vw;
              white-space: inherit; }
        #caseback .box_in .caseback_area .images {
          margin: 0 auto;
          width: 66.1333333333vw; }
      #caseback .box_in .contents_area {
        margin-top: 40px;
        display: flex;
        justify-content: center;
        text-align: center; }
        #caseback .box_in .contents_area .box {
          width: 37.3333333333vw;
          margin-right: 7.4666666667vw; }
          #caseback .box_in .contents_area .box .images {
            width: 32vw; }
          #caseback .box_in .contents_area .box h2 {
            margin-top: -2.6666666667vw;
            font-size: 6.6666666667vw; }
          #caseback .box_in .contents_area .box .txt {
            margin-top: 2.5vw;
            font-size: 3.3333333333vw;
            text-align: left;
            line-height: 1.8;
            display: flex;
            justify-content: center; }
            #caseback .box_in .contents_area .box .txt br {
              display: none; }
        #caseback .box_in .contents_area .sticker {
          width: 38.6666666667vw; }
          #caseback .box_in .contents_area .sticker .images {
            width: 37.4666666667vw; }
          #caseback .box_in .contents_area .sticker h2 {
            margin-top: -2.6666666667vw;
            font-size: 6.6666666667vw; }
          #caseback .box_in .contents_area .sticker .txt {
            margin-top: 2.5vw;
            font-size: 3.3333333333vw;
            text-align: left;
            line-height: 1.8;
            display: flex;
            justify-content: center; } }
/*END*/