@charset "utf-8"; /* // : Use a unique and descriptive class name .noto-serif-jp- { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .zen-antique-regular { font-family: "Zen Antique", serif; font-weight: 400; font-style: normal; } /*------------------------------------------------- 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%; } a{ outline: none;} hr { border: none;} table { border-collapse: collapse; border-spacing: 0; font-size: 100%; } li { list-style-type: none; } strong { font-weight: bold; } /*------------------------------------------------- base --------------------------------------------------*/ body {position: relative; background: #000; color: #fff; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; line-height: 1.5; font-size: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*txt img 選択時*/ ::selection { background:#666; } ::-moz-selection { background:#666; }/*Firefox*/ img::selection { background:none; } img::-moz-selection { background:none; }/*Firefox*/ /*cookie*/ #onetrust-banner-sdk{ outline: none; } /*anime set ------------------------*/ #main .main_img, #main .main_symbol, #main .main_logo, #main h1, h2, h3, .txt_box p, .img_box, .txt_box img, .spec_btn, .spec_sub p{ visibility: hidden;} /*------------------------------------------------- header --------------------------------------------------*/ header{ position: relative; z-index: 80; } /*------ header logo ------*/ header .seiko_logo{ width: 130px; position:absolute; right: 30px; top: 30px; } header .presage_logo{ width: 180px; position:absolute; left: 35px; top: 35px; } @media (max-width: 1600px) { header .seiko_logo{ width: 8.17vw; right: 1.85vw; top: 1.85vw; } header .presage_logo{ width: 11.2vw; left: 2.2vw; top:2.2vw; } }/*END*/ @media screen and (orientation: portrait) { header .seiko_logo{ width: 130px; right: 30px; top: 30px; } header .presage_logo{ width: 180px; left: 35px; top: 35px; } }/*END*/ @media screen and (max-width: 780px) and (orientation: portrait) { header .seiko_logo{ width: 17vw; right: 3.8vw; top: 3.8vw; } header .presage_logo{ width: 23.2vw; left: 4.5vw; top: 4.5vw; } }/*END*/ @media screen and (max-width: 640px) and (orientation: portrait) { header .seiko_logo{ width: 20vw; right: 3.3vw; top: 3.3vw; } header .presage_logo{ width: 28vw; left: 3.9vw; top: 3.9vw; } }/*END*/ /*------------------------------------------------- contents --------------------------------------------------*/ .wrapper{ position: relative; overflow: hidden;} /*------------------------------------------------- main --------------------------------------------------*/ #main { width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; } #main img{ width: 100%; user-select: none; pointer-events: none; } #main .main_img{ width: 100%; } #main .main_symbol{ position: absolute; left: 26%; top: 31.5%; width: 15%; z-index: 5; } #main .main_inner{ width: 66.9%; position: absolute; left: 0%; top: 58%; text-align: center; z-index: 5; } #main .main_inner .main_logo{ width: 59.5%; margin: 4.5% auto 0;} #main .main_inner h1{ margin: 2.4% 0 0 2.5%; font-family: "Zen Antique", serif; line-height: 1.5; font-weight: 400; font-style: normal;} #main .main_inner h1 .h1_1{ font-size: 1.45vw; } #main .main_inner h1 .h1_2{ font-size: 1.74vw; } #main .main_inner h1 span{ display: block;} @media screen and (orientation: portrait) { #main .main_symbol{ position: absolute; left: 9%; top: 33.2%; width: 30.5%;} #main .main_inner{ width: 100%; position: absolute; left: 0%; top: 68%; text-align: center; } #main .main_inner .main_logo{ width: 64.2%; margin: 4.5% auto 0; display: block;} #main .main_inner .main_logo img{ position: relative; left: -2.2%;} #main .main_inner h1{ margin: 2.4% auto 0; } #main .main_inner h1 .h1_1{ font-size: 2.3vw; } #main .main_inner h1 .h1_2{ font-size: 2.8vw; } }/*END*/ @media screen and (max-width: 640px) and (orientation: portrait) { #main .main_symbol{ position: absolute; left: 11%; top: 37.8%; width: 23%;} #main .main_inner{ width: 100%; font-size: 1px; position: absolute; left: 0%; top: 65.9%; text-align: center; } #main .main_inner .main_logo{ width: 74.5%; margin: 4.5% auto 0; display: block;} #main .main_inner .main_logo img{ position: relative; left: -2.6%;} #main .main_inner h1{ margin: 2.4% auto 0; } #main .main_inner h1 .h1_1{ font-size: 2.7vw; } #main .main_inner h1 .h1_2{ font-size: 3.29vw; } }/*END*/ /* img [on / off] */ .main_pc_x15{display:block;} .main_pc{display:none;} .main_tab{display:none;} .main_sp{display:none;} @media (max-width: 1400px) { .main_pc_x15{display:none;} .main_pc{display:block;} .main_tab{display:none;} .main_sp{display:none;} }/*END*/ @media screen and (orientation: portrait) { .main_pc{display:none;} .main_tab{display:block;} .main_sp{display:none;} }/*END*/ @media screen and (max-width: 640px) and (orientation: portrait) { .main_pc{display:none;} .main_tab{display:none;} .main_sp{display:block;} }/*END*/ /*------------------------------------------------- font --------------------------------------------------*/ /* font size */ .h2_40{ font-size: 40px;line-height: 1; font-family: 'Times New Roman', Times, serif;} .h2_35{ font-size: 35px;line-height: 1; font-family: 'Times New Roman', Times, serif;} .txt16{ font-size: 16px;} .txt14{ font-size: 14px;} @media (max-width: 1400px) { .h2_40{ font-size: 39px;} .h2_35{ font-size: 34px;} .txt16{ font-size: 15px;} .txt14{ font-size: 13px;} }/*END*/ @media (max-width: 1300px) { .h2_40{ font-size: 38px;} .h2_35{ font-size: 33px; } .txt16{ font-size: 14px;} .txt14{ font-size: 12px;} }/*END*/ @media (max-width: 1024px) { .h2_40{ font-size: 39px;} .h2_35{ font-size: 34px; } .txt16{ font-size: 15px;} .txt14{ font-size: 13px;} }/*END*/ @media (max-width: 640px) { .h2_40{ font-size: 36px;} .h2_35{ font-size: 30px; } .txt16{ font-size: 14px;} .txt14{ font-size: 12px;} }/*END*/ @media (max-width: 500px) { .h2_40{ font-size: 34px;} .h2_35{ font-size: 28px; } }/*END*/ @media (max-width: 400px) { .h2_40{ font-size: 32px;} .h2_35{ font-size: 26px; } }/*END*/ /* ----- line-height ----- */ .lh_22{ line-height: 2.2;} .lh_2{ line-height: 2;} .lh_18{ line-height: 1.8;} /* ----- letter-spacing ----- */ .ls_15{ letter-spacing: 1.5px; } @media (max-width: 1400px) { .ls_15{ letter-spacing: 1.4px;} }/*END*/ @media (max-width: 500px) { .ls_15{ letter-spacing: 1.2px;} }/*END*/ @media (max-width: 400px) { .ls_15{ letter-spacing: 1px;} }/*END*/ /* ----- mt ----- */ .mt_p{ margin-top: 30px;} @media (max-width: 1000px) { .mt_p{ margin-top: 40px;} }/*END*/ @media (max-width: 640px) { .mt_p{ margin-top: 30px;} }/*END*/ .italic{ font-style: italic;} .op50{ opacity: .5;} @media (max-width: 1000px) { #de01 .inner .txt_box h2, #de02 .inner .txt_box h2, #de03 .inner .txt_box h2, #de04 .inner .txt_box h2{ text-align: center; } }/*END*/ /*------------------------------------------------- intoro --------------------------------------------------*/ #intoro{ padding: 85px 0 95px; background: #fff; position: relative; overflow: hidden; color: #000;} #intoro .inner{ margin: 0 auto; width: 75%; max-width: 860px; position: relative; z-index: 2; } #intoro .inner h2{ text-align: center;} #intoro .inner p{margin-top: 50px;} #intoro .intoro_bg{ opacity: 0.18; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/bg.jpg) center bottom; background-size: cover; z-index: 0;} @media (max-width: 640px) { #intoro .inner{ margin: 0 auto; width: 80%; } #intoro .inner p{margin-top: 40px;} }/*END*/ @media (max-width: 500px) { #intoro{ padding: 80px 0 80px;} }/*END*/ @media (max-width: 400px) { #intoro{ padding: 70px 0 70px;} #intoro .inner p{margin-top: 30px;} }/*END*/ /*------------------------------------------------- about --------------------------------------------------*/ #about { width: 100%; overflow: hidden; position: relative; background: #000; z-index: 1 !important;} #about .wrap{ padding: 100px 0 100px; position: relative; z-index: 1 !important; } #about .about_bg{ opacity: .55; position: absolute; left: 0; top: 0; width: 100%; height: 101%; background: url(../img/about_img2.jpg) center center; background-size: cover; z-index: 0; -ms-filter: blur(6px); filter: blur(6px); } #about h2{ text-align: center; position: relative; z-index: 2; } #about .inner{ margin: 80px auto 0; width: 85%; max-width: 1100px; display: flex; justify-content: space-between; position: relative; z-index: 2; } #about .inner .img_box{ width: 45%; max-width: 500px; display: flex; align-items: center; justify-content: center; } #about .inner .img_box img{ width: 75%; } #about .inner .txt_box{ width: 54%; display: flex; align-items: center; } #about .inner .txt_box p{ margin: 17px 0;} #about .inner .txt_box p span{display: inline-block;} @media (max-width: 900px) { #about .wrap{ padding: 100px 0 100px; } #about .about_bg{ opacity: .4; position: absolute; left: 0; top: 0; width: 100%; height: 101%; background: url(../img/about_img2.jpg) center center; background-size: cover; z-index: 0; -ms-filter: blur(6px); filter: blur(6px); } #about .inner{ margin: 60px auto 0; width: 88%; max-width: 1050px; display: block; } #about .inner .img_box{ margin: 0 auto; width: 60%;max-width: 300px; display: block;} #about .inner .img_box img{ width: 100%; } #about .inner .txt_box{ margin-top: 40px; width: 100%; display: block; text-align: center; } }/*END*/ @media (max-width: 750px) { #about .wrap{ padding: 80px 0 100px; } #about .inner{ margin: 50px auto 0; width: 88%; max-width: 1050px; display: block; } #about .inner .img_box{ margin: 0 auto; width: 60%;max-width: 300px; display: block; } #about .inner .img_box img{ width: 100%; } #about .inner .txt_box{ margin-top: 40px; width: 100%; display: block; text-align: center; } }/*END*/ @media (max-width: 640px) { #about .wrap{ padding: 80px 0 60px; } }/*END*/ @media (max-width: 400px) { #about .inner .txt_box p br{ display: none; } }/*END*/ /*------------------------------------------------- slide --------------------------------------------------*/ #about .photo { width: 100%; display: flex; margin-top: 0px; position: relative; z-index: 10 !important;} #about .photo img{ width: 33.333%; } @media (max-width:1000px){ #about .photo img{ height: 30vw; width: auto; pointer-events: none; user-select: none; } }/*END*/ @media (max-width:450px){ #about .photo img{ height: 45vw; } }/*END*/ /*------------------------------------------------- de01 [ Design Source ] --------------------------------------------------*/ #de01{ padding: 0px; background: #fff; position: relative; overflow: hidden; color: #000;} #de01 .inner{ margin: 0 auto; width: 90%; max-width: 1400px; display: flex; flex-direction : row-reverse; position: relative; z-index: 5; } #de01 .inner .img_box{ width: 48%; margin-left: 7.8%; } #de01 .inner .txt_box{ width: 41%; display: flex; align-items: center; justify-content: center; } #de01 .inner .txt_box h2{ text-align: center;} #de01 .de01_bg{ opacity: 0.18; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/bg.jpg) center bottom; background-size: cover; z-index: 0;} #de01 .de01_2{ margin-top: 40px; text-align: center; } #de01 .de01_2 img{ width: 65%; max-width: 279px; margin: 0 auto; display: block;} #de01 .de01_2 p{ margin-top: 20px; padding: 8px 40px; text-align: center; display: inline-block; position: relative;} #de01 .de01_2 p::before, #de01 .de01_2 p::after{content: ''; display: inline-block; width: 100%; height: 1px; background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 50%, rgba(0,0,0,0) 100%);} #de01 .de01_2 p::before{ position: absolute; left: 0; top: 0; } #de01 .de01_2 p::after{ position: absolute; left: 0; bottom: 0; } @media (max-width: 1500px) { #de01 .inner .img_box{ width: 48%; margin-left: 7.8%; } }/*END*/ @media (max-width: 1200px) { #de01 .inner{ margin: 0 auto; width: 95%; } #de01 .inner .img_box{ width: 52%; margin-left: 5%; } #de01 .inner .txt_box{ width: 38%; display: flex; align-items: center; justify-content: center; } #de01 .de01_2{ margin-top: 30px; text-align: center;} }/*END*/ @media (max-width: 1100px) { #de01 .de01_2{ margin-top: 30px; text-align: center;} }/*END*/ @media (max-width: 1000px) { #de01 .inner .img_box{ width: 60%; max-width: 450px; margin: 0 auto; } #de01 .inner{ margin: 0 auto; width: 100%; max-width: 1250px; display: block; } #de01 .inner .txt_box{ width: 100%; display: block; background: rgba(255,255,255,0.5); z-index: 0; } #de01 .inner .txt_box .de01_txt_box_inner{ padding: 80px 0; margin: 0 auto; width: 80%; max-width: 640px;} #de01 .de01_bg{ opacity: 0.25; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/bg.jpg) center bottom; background-size: cover; z-index: 0;} #de01 .de01_2{ margin: 30px auto 0; text-align: center; max-width: 400px;} #de01 .de01_2 img{ width: 80%; max-width: 279px;} #de01 .de01_2 p{ margin-top: 20px; padding: 8px 30px; text-align: center; display: inline-block; position: relative;} }/*END*/ @media (max-width: 640px) { #de01 .de01_2 img{ width: 80%; max-width: 240px;} #de01 .inner .txt_box .de01_txt_box_inner{ padding: 60px 0; margin: 0 auto; width: 80%; max-width: 640px;} }/*END*/ /* [ on off ]*/ #de01 .x15{display:block;} #de01 .x12{display:none;} #de01 .x1{display:none;} @media (max-width: 1500px) { #de01 .x15{display:none;} #de01 .x12{display:block;} #de01 .x1{display:none;} }/*END*/ @media (max-width: 1000px) { #de01 .x15{display:none;} #de01 .x12{display:none;} #de01 .x1{display:block;} }/*END*/ /*------------------------------------------------- de02 [ Dial & Case ] --------------------------------------------------*/ #de02{ padding: 0px; background: #080809; position: relative; overflow: hidden; } #de02 .inner{ margin: 0 auto; width: 90%; max-width: 1250px; display: flex; position: relative; z-index: 5; } #de02 .inner .img_box{ width: 46.6%; margin-left: 2.7%; } #de02 .inner .txt_box{ width: 38.2%; margin-left: 6.9%; display: flex; align-items: center; justify-content: center; } #de02 .de02_bg{ opacity: 0.37; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/bg.jpg) center bottom; background-size: cover; z-index: 1; mix-blend-mode: overlay; } #de02 .de02_bg2{ position: absolute; left: 30%; top: 30%; width: 1900px; height: 1900px; margin: -950px 0 0 -950px; z-index: 0; background-image: radial-gradient(circle closest-side, rgba(59, 66, 86, 1) 0%, rgba(8, 8, 9, 1) 100%); } #de02 .inner .txt_box .de02_2{ margin: 60px auto 0; width: 70%; max-width: 333px; } @media (max-width: 1200px) { #de02 .inner{ margin: 0 auto; width: 90%; max-width: 1250px; display: flex; } #de02 .inner .img_box{ width: 48%; margin-left: 2.7%; } #de02 .inner .txt_box{ width: 41%; margin-left: 6.9%; display: flex; align-items: center; justify-content: center; } #de02 .inner .txt_box .de02_2{ margin: 50px auto 0; width: 65%; max-width: 333px; } }/*END*/ @media (max-width: 1100px) { #de02 .inner{ margin: 0 auto; width: 92%; max-width: 1250px; display: flex; } #de02 .inner .img_box{ width: 48%; margin-left: 2.2%; } #de02 .inner .txt_box{ width: 41%; margin-left: 6%; display: flex; align-items: center; justify-content: center; } #de02 .inner .txt_box .de02_2{ margin: 40px auto 0; width: 65%; max-width: 333px; } }/*END*/ @media (max-width: 1000px) { #de02 .inner{ margin: 0 auto; width: 100%; max-width: 1250px; display: block; } #de02 .inner .img_box{ width: 60%; max-width: 380px; margin: 0 auto; } #de02 .inner .img_box img{ margin-left: 1.8vw; } #de02 .inner .txt_box{ width: 100%; margin-left: 0%; display: block; background: rgba(0,0,0,0.3); z-index: 0; } #de02 .inner .txt_box .de02_2{ margin: 60px auto 0; width: 65%; max-width: 333px; } #de02 .inner .txt_box .de02_txt_box_inner{ padding: 80px 0; margin: 0 auto; width: 80%; max-width: 640px;} #de02 .de02_bg2{ position: absolute; left: 10%; top: 30%; width: 200vw; height: 200vw; margin: -100vw 0 0 -100vw; z-index: 0;} }/*END*/ @media (max-width: 640px) { #de02 .inner .txt_box .de02_txt_box_inner{ padding: 60px 0; margin: 0 auto; width: 80%; max-width: 640px;} }/*END*/ /* [ on off ]*/ #de02 .x15{display:block;} #de02 .x1{display:none;} @media (max-width: 500px) { #de02 .x15{display:none;} #de02 .x1{display:block;} }/*END*/ /*------------------------------------------------- de03 [ Strap ] --------------------------------------------------*/ #de03{ padding: 0px; background: #0c0c0c; position: relative; overflow: hidden; } #de03 .inner{ margin: 0 auto; width: 90%; max-width: 1250px; display: flex; flex-direction : row-reverse; position: relative; z-index: 5; } #de03 .inner .img_box{ width: 39.2%; margin-right: 7.6%; } #de03 .inner .txt_box{ width: 30.3%; margin-right: 9.8%; display: flex; align-items: center; justify-content: center; } #de03 .de03_bg{ opacity: 0.37; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/bg.jpg) center top; background-size: cover; z-index: 1; mix-blend-mode: overlay; } #de03 .de03_bg2{ position: absolute; left: 68%; top: 30%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; z-index: 0; background-image: radial-gradient(circle closest-side, rgba(59, 66, 86, 1) 0%, rgba(12, 12, 12, 0) 100%); } @media (max-width: 1200px) { #de03 .inner{ margin: 0 auto; width: 90%; max-width: 1250px; display: flex; } #de03 .inner .img_box{ width: 39.2%; margin-right: 7.6%; } #de03 .inner .txt_box{ width: 30.3%; margin-right: 9.8%; } }/*END*/ @media (max-width: 1100px) { #de03 .inner{ margin: 0 auto; width: 90%; max-width: 1250px; display: flex; } #de03 .inner .img_box{ width: 44%; margin-right: 4%; } #de03 .inner .txt_box{ width: 34.3%; margin-right: 5.8%; } }/*END*/ @media (max-width: 1000px) { #de03 .inner{ margin: 0 auto; width: 100%; max-width: 1250px; display: block; } #de03 .inner .img_box{ width: 60%; max-width: 350px; margin: 0 auto; } #de03 .inner .txt_box{ width: 100%; margin-right: 0%; display: block; background: rgba(0,0,0,0.3); z-index: 0; } #de03 .inner .txt_box .de03_txt_box_inner{ padding: 80px 0; margin: 0 auto; width: 80%; max-width: 640px;} #de03 .de03_bg2{ position: absolute; left: 50%; top: 40%; width: 100vw; height: 100vw; margin: -50vw 0 0 -50vw; z-index: 0;} }/*END*/ @media (max-width: 640px) { #de03 .inner .txt_box .de03_txt_box_inner{ padding: 60px 0; margin: 0 auto; width: 80%; max-width: 640px;} #de03 .de03_bg2{ position: absolute; left: 50%; top: 40%; width: 150vw; height: 150vw; margin: -75vw 0 0 -75vw; z-index: 0;} #de03 .de03_bg2{ position: absolute; left: 50%; top: 0%; width: 150vw; height: 150vw; margin: -75vw 0 0 -75vw; z-index: 0;} }/*END*/ /* [ on off ]*/ #de03 .x15{display:block;} #de03 .x1{display:none;} @media (max-width: 640px) { #de03 .x15{display:none;} #de03 .x1{display:block;} }/*END*/ /*------------------------------------------------- de04 [ box ] --------------------------------------------------*/ #de04{ padding: 190px 0; background: #0c0c0c; position: relative; overflow: hidden; } #de04 .inner{ margin: 0 auto; width: 90%; max-width: 1250px; display: flex; position: relative; z-index: 5; } #de04 .inner .img_box{ width: 48.4%; margin-left: 1.6%; display: flex; align-items: center; justify-content: center;} #de04 .inner .txt_box{ width: 30.1%; margin-left: 10.4%; display: flex; align-items: center; justify-content: center; } #de04 .de04_bg{ opacity: 0.37; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/bg.jpg) center center; background-size: cover; z-index: 1; mix-blend-mode: overlay; } #de04 .de04_bg2{ position: absolute; left: 32%; top: 0%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; z-index: 0; background-image: radial-gradient(circle closest-side, rgba(59, 66, 86, 1) 0%, rgba(12, 12, 12, 0) 100%); } @media (max-width: 1400px) { #de04{ padding: 12.5vw 0; } #de04 .inner .img_box{ width: 48.4%; margin-left: 5%; display: flex; align-items: center; justify-content: center;} #de04 .inner .txt_box{ width: 30.1%; margin-left: 10.4%; display: flex; align-items: center; justify-content: center; } }/*END*/ @media (max-width: 1100px) { #de04 .inner .img_box{ width: 52%; margin-left: 4%; display: flex; align-items: center; justify-content: center;} #de04 .inner .txt_box{ width: 34%; margin-left: 8%; display: flex; align-items: center; justify-content: center; } #de04 .de04_bg2{ position: absolute; left: 32%; top: 0%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; z-index: 0; background-image: radial-gradient(circle closest-side, rgba(59, 66, 86, 1) 0%, rgba(12, 12, 12, 0) 100%); } }/*END*/ @media (max-width: 1000px) { #de04{ padding: 12vw 0 100px; } #de04 .inner{ margin: 0 auto; width: 90%; max-width: 1250px; display: block; } #de04 .inner .img_box{ width: 70%; max-width: 670px; margin: 0 auto; } #de04 .inner .txt_box{ width: 100%; margin: 0; display: block; z-index: 0; } #de04 .inner .txt_box .de04_txt_box_inner{ padding: 60px 0 0; margin: 0 auto; width: 90%; max-width: 640px;} }/*END*/ @media (max-width: 640px) { #de04{ padding: 14vw 0 80px; } #de04 .inner .img_box{ width: 80%; max-width: 670px; margin: 0 auto; } #de04 .inner .txt_box .de04_txt_box_inner{ padding: 8vw 0 0; margin: 0 auto; width: 90%; max-width: 640px;} #de04 .de04_bg2{ position: absolute; left: 20%; top: 0%; width: 150vw; height: 150vw; margin: -75vw 0 0 -75vw; z-index: 0;} }/*END*/ @media (max-width: 450px) { #de04{ padding: 18vw 0 80px; } #de04 .inner .img_box{ width: 90%; max-width: 670px; margin: 0 auto; } #de04 .inner .txt_box .de04_txt_box_inner{ padding: 8vw 0 0; margin: 0 auto; width: 90%; max-width: 640px;} #de04 .de04_bg2{ position: absolute; left: 20%; top: 0%; width: 150vw; height: 150vw; margin: -75vw 0 0 -75vw; z-index: 0;} }/*END*/ /* [ on off ]*/ #de04 .x15{display:block;} #de04 .x1{display:none;} @media (max-width: 640px) { #de04 .x15{display:none;} #de04 .x1{display:block;} }/*END*/ /*------------------------------------------------- spec --------------------------------------------------*/ .spec{ padding: 0 0 0px; background: #fff; color: #000; position:relative; overflow: hidden;} .spec .title_box{ padding: 80px 0 50px; } @media screen and (max-width:1050px) { .spec{ padding: 0 0 0px; } .spec .title_box{ padding: 70px 0 50px; } }/*END*/ @media screen and (max-width: 1000px) { }/*END*/ @media screen and (max-width: 760px) { .spec .title_box{ padding: 70px 0 50px; } }/*END*/ @media screen and (max-width: 640px) { .spec{ padding: 0 0 0; } .spec .title_box{ padding: 60px 0 50px; } }/*END*/ @media screen and (max-width: 370px) { .spec .title_box{ padding: 60px 0 50px; } .spec{ padding: 0 0 50px; } }/*END*/ .spec .title_box h2 { text-align: center; } /*spec_box1*/ .spec_box1{ background: #fff; width: 94%; margin: 0 auto; } .spec_box1 .inner{ margin: 0 auto; width: 100%; max-width: 750px; display: flex; justify-content: center; } .spec_box1 .img_box{ max-width: 257px; } .spec_box1 .txt_box{margin-left: 7%; margin-top: 0px; line-height: 1.5; } .spec_box1 .txt_box .txt_box_inner{ height: 80%; display: flex; align-items: center; justify-content: center; text-align: center;} @media screen and (max-width: 1000px) { .spec_box1 .txt_box{ margin-left: 4%;} }/*END*/ @media screen and (max-width: 750px) { .spec_box1 .img_box{ width:38%; } .spec_box1 .txt_box{ margin-left: 5%;} }/*END*/ @media screen and (max-width: 650px) { .spec_box1 .txt_box{ margin-left: 6vw; } }/*END*/ @media screen and (max-width: 500px) { .spec_box1 .img_box{ width:40%; } }/*END*/ @media screen and (max-width: 450px) { .spec_box1 .txt_box{ margin-left: 4vw;} }/*END*/ @media screen and (max-width: 370px) { .spec_box1 .inner{ margin: 0 auto 30px; width: 100%; max-width: 650px; display: block; } .spec_box1 .txt_box{ margin: -11vw 0 0 0%; display: block;} .spec_box1 .img_box{ width:50%; margin: 0 auto; } }/*END*/ /* [ on off ]*/ .spec .x15{display:block;} .spec .x1{display:none;} @media (max-width: 500px) { .spec .x15{display:none;} .spec .x1{display:block;} }/*END*/ .number { margin-top: 0px; font-size: 25px; letter-spacing: 1px; color: #001327; } .caribre { margin-top: 5px; font-size: 15px; } .price { margin-top: 7px; font-size: 18px; } .price span { margin-top: 0px; font-size: 12px; margin-left: 3px; } .limited { margin-top: 7px; font-size: 15px; position: relative; padding-bottom: 4px; display: inline-block;} .limited::after { content: ''; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 2px; background: #000; } .limited_sub{ margin-top: 3px; font-size: 12px; } .spec_txt { margin-top: 15px; font-size: 14px; } .spec_txts { margin-top: 18px; font-size: 13px; } @media screen and (max-width: 1000px) { .number { margin-top: 0px; font-size: 22px; } }/*END*/ @media screen and (max-width: 640px) { .number { margin-top: 0px; font-size: 22px; } .caribre { margin-top: 5px; font-size: 14px; } .price { margin-top: 7px; font-size: 16px; } .price span { margin-top: 0px; font-size: 11px; margin-left: 3px; } .limited { margin-top: 7px; font-size: 14px; position: relative; padding-bottom: 4px; display: inline-block;} .limited_sub{ margin-top: 3px; font-size: 11px; } .spec_txt { margin-top: 15px; font-size: 13px; } .spec_txts { margin-top: 18px; font-size: 12px; } }/*END*/ @media screen and (max-width: 450px) { .number { margin-top: 0px; font-size: 20px; } .caribre { margin-top: 5px; font-size: 13px; } .price { margin-top: 7px; font-size: 16px; } .price span { margin-top: 0px; font-size: 11px; margin-left: 3px; } .limited { margin-top: 7px; font-size: 14px; position: relative; padding-bottom: 4px; display: inline-block;} .limited_sub{ margin-top: 3px; font-size: 11px; } .spec_txt { margin-top: 15px; font-size: 12px; } .spec_txts { margin-top: 18px; font-size: 12px; } }/*END*/ .shop_sp{ text-align: center; margin-top: -3vw; position: relative; z-index: 3;} @media (max-width: 370px) { .shop_sp{ text-align: center; margin-top: 25px;} }/*END*/ /* [ on off ]*/ .shop_pc{ display: block;} .shop_sp{ display: none;} @media (max-width: 550px) { .shop_pc{ display: none;} .shop_sp{ display: block;} }/*END*/ /*spec_btn*/ .spec_btn { margin:22px auto 0; display: block;} .spec_btn a {width: 190px; padding: 16px 0 18px; margin:0 auto; font-size: 14px; line-height: 1; font-weight: 400;letter-spacing: 1px; color: #fff; background: #000; display: block; transition: 0.3s; text-decoration: none; border-radius: 4px;} .spec_btn a:hover { cursor: pointer; color: #fff; opacity: 0.8; } @media screen and (max-width: 640px) { .spec_btn { margin: 18px auto 0; } .spec_btn a { width: 170px; padding: 16px 0 18px; font-size: 13px; letter-spacing: 1px;} }/*END*/ @media screen and (max-width: 450px) { .spec_btn { margin: 15px auto 0; } .spec_btn a { width: 160px; font-size: 12px; padding: 16px 0 18px; } }/*END*/ @media screen and (max-width: 400px) { .spec_btn { margin: 15px auto 0; } .spec_btn a { width: 150px; font-size: 11.5px; padding: 16px 0 18px; } }/*END*/ /*spec_btn*/ .spec_btn2 { margin:10px auto 0; } /*spec_bottom*/ .spec_bottom{ margin: 60px auto 0; width: 100%; display: inline-block; text-align: center; } .spec_bottom p{ margin: 0 auto; width: 95%;} .spec_bottom span{ display: inline-block; } @media screen and (max-width: 370px) { .spec_bottom{ margin: 20px auto 0; } .spec_btn a { width: 160px; font-size: 11.5px; padding: 16px 0 18px; letter-spacing: 1px; } }/*END*/ /*spec_sub*/ .spec_sub{ max-width: 80%; margin: -60px auto 0; padding: 0 0 50px; text-align: center; position: relative; z-index: 5;} .spec_sub p{ display: inline-block; padding: 0px 15px; max-width: 90%; margin: 0 auto;} .spec_sub p span{ display: inline-block;} @media screen and (max-width: 1000px) { .spec_sub{ max-width: 80%; margin: -60px auto 0; padding: 0 0 50px; } }/*END*/ @media screen and (max-width: 640px) { .spec_sub{ max-width: 80%; margin: -60px auto 0; padding: 0 0 50px; } }/*END*/ @media screen and (max-width: 440px) { .spec_sub{ max-width: 80%; margin: -10vw auto 0; padding: 0 0 50px; } }/*END*/ @media screen and (max-width: 370px) { .spec_sub{ max-width: 80%; margin: 20px auto 0; padding: 0 0 50px; } }/*END*/ /*------------------------------------------------- gotop --------------------------------------------------*/ .gotop { position:absolute; bottom:0px; right:20px;width:50px; height:70px; box-sizing:border-box; border-radius: 0%; z-index: 10!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; border-radius: 0px;} .gotop a::after { position:absolute; top:50%; left:50%; content: ''; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: url("../img/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;} }/*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*/