@charset "utf-8";

@import url('//fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');

/*****************************************************************************
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;
}

hr {
display: none;
}

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

li {
list-style-type: none;
}

strong {
font-weight: bold;
}

/*****************************************************************************
linkColor 
*****************************************************************************/

a:link {
color: #1e2432;
text-decoration: none;
}

a:visited {
color: #1e2432;
text-decoration: none;
}

a:hover,a:active {
text-decoration: underline;
}

/*****************************************************************************
clearfix 
*****************************************************************************/

.cb {
clear: both;
font-size: 1%;
height: 0;
line-height: 0;
}

.clearfix:after {
content: ".";
display: block;
height: 0.1px;
font-size: 0.1em;
line-height: 0; 
clear: both;
visibility: hidden; 
}

.clearfix {
display: inline-block;
}

/* Hide from IE-mac \*/

* html .clearfix { height: 1%; }
.clearfix { display:block; }

/* End hide from IE-mac */

/*****************************************************************************
base
*****************************************************************************/

html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
}
body {
background: #ffffff;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
line-height: 1.5;
font-size: 1.5rem;
color: #1e2432;
overflow-x: hidden;
}


.montserrat {
font-family: 'Montserrat', sans-serif;
}

/*****************************************************************************
header 
*****************************************************************************/

.header {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 100px;
left: 100px;
right: 100px;
z-index: 999;
}
@media screen and (max-width: 1440px) {
.header {
top: 60px;
left: 60px;
right: 60px;
}
}
@media screen and (max-width: 900px) {
.header {
left: 30px;
right: 30px;
}
}
@media screen and (max-width: 500px) {
.header {
top: 30px;
left: 15px;
right: 15px;
}
}
.header-logo {
width: 140px;
}
@media screen and (max-width: 1024px) {
.header-logo {
width: 120px;
}
}
@media screen and (max-width: 500px) {
.header-logo {
width: 100px;
}
}
.header-sns {
display: flex;
}
.header-sns li {
width: 36px;
margin-left: 20px;
}
@media screen and (max-width: 1024px) {
.header-sns li {
width: 30px;
margin-left: 15px;
}
}

/*****************************************************************************
contents 
*****************************************************************************/

.visual {
background: #fafafa;
}
.visual-img {
}
.visual-img ul {
display: flex;
}
.visual-img li {
width: 50%;
}
.visual-title {
width: 100%;
box-sizing: border-box;
margin-top: -64px;
padding: 0 15px;
text-align: center;
font-family: "Times New Roman", Times, "serif";
letter-spacing: 1px;
font-size: 3.6rem;
position: relative;
z-index: 1;
}
@media screen and (max-width: 1440px) {
.visual-title {
margin-top: -32px;
}
}
@media screen and (max-width: 900px) {
.visual-title {
margin-top: 0;
}
}
@media screen and (max-width: 500px) {
.visual-title {
font-size: 2.6rem;
}
}
.visual-title small {
font-size: 1.5rem;
display: block;
}


.headline-lv1 {
padding: 90px 15px 90px;
text-align: center;
letter-spacing: 2px;
font-weight: 500;
}
@media screen and (max-width: 900px) {
.headline-lv1 {
padding: 90px 15px 40px;
}
}
@media screen and (max-width: 500px) {
.headline-lv1 {
padding: 45px 15px 15px;
}
}
.headline-lv2 {
padding: 95px 15px 45px;
text-align: center;
font-family: "Times New Roman", Times, "serif";
letter-spacing: 1px;
font-size: 3.6rem;
}
@media screen and (max-width: 900px) {
.headline-lv2 {
padding: 95px 15px 45px;
}
}
@media screen and (max-width: 500px) {
.headline-lv2 {
padding: 45px 15px 15px;
}
}
@media screen and (max-width: 500px) {
.headline-lv2 {
line-height: 1.3;
font-size: 2.6rem;
}
}
.headline-lv2 small {
letter-spacing: 2px;
font-size: 1.5rem;
display: block;
}
@media screen and (max-width: 500px) {
.headline-lv2 small {
margin-bottom: 10px;
}
}


.inner {
max-width: 1160px;
box-sizing: border-box;
margin: 0 auto;
padding: 0 30px;
position: relative;
}
@media screen and (max-width: 500px) {
.inner {
padding: 0 15px;
}
}


.text-block {
max-width: 750px;
box-sizing: border-box;
margin: 0 auto;
}
.text-block.center {
text-align: center;
}
@media screen and (max-width: 500px) {
.text-block.center {
text-align: left;
}
}
.text-block p {
margin-bottom: 2em;
line-height: 2;
}
.text-block p:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 500px) {
.text-block p br {
display: none;
}
}


.button {
text-align: center;
}
.button a {
background: #14233e;
border: 1px solid #14233e;
padding: 9px 0;
letter-spacing: 1px;
font-size: 1.3rem;
color: #ffffff;
display: block;
position: relative;
transition: 0.6s;
}
.button a:hover {
background: #ffffff;
text-decoration: none;
color: #14233e;
}


.concept {
background: #fafafa url(../img/bg01.png) no-repeat center top;
background-size: 100% auto;
padding-bottom: 90px;
}
@media screen and (max-width: 900px) {
.concept {
padding-bottom: 40px;
}
}


.design {
background: url(../img/bg02.png) no-repeat left center;
background-size: auto 100%;
padding-bottom: 100px;
}
@media screen and (max-width: 900px) {
.design {
background: none;
padding-bottom: 50px;
}
}
.design__wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
}
@media screen and (max-width: 900px) {
.design__wrapper {
display: block;
}
}
.design__wrapper:last-child {
margin-bottom: 0;
}
.design__wrapper-img {
width: 50%;
}
@media screen and (max-width: 900px) {
.design__wrapper-img {
width: 100%;
margin-bottom: 40px;
}
}
@media screen and (max-width: 500px) {
.design__wrapper-img {
margin-bottom: 20px;
}
}
.design__wrapper-block {
width: 50%;
box-sizing: border-box;
padding: 0 50px;
}
@media screen and (max-width: 900px) {
.design__wrapper-block {
width: 100%;
padding: 0;
}
}
.design__wrapper-block p {
margin-bottom: 2em;
line-height: 2;
}
.design__wrapper-block p:last-child {
margin-bottom: 0;
}


.movement {
background: #fafafa;
padding-bottom: 100px;
}
@media screen and (max-width: 900px) {
.movement {
padding-bottom: 50px;
}
}
.movement .text-block {
margin-bottom: 90px;
}
@media screen and (max-width: 500px) {
.movement .text-block {
margin-bottom: 50px;
}
}
.movement__wrapper {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 900px) {
.movement__wrapper {
display: block;
}
}
.movement__wrapper-block {
width: 50%;
box-sizing: border-box;
padding: 0 50px;
order: 1;
}
@media screen and (max-width: 900px) {
.movement__wrapper-block {
width: 100%;
padding: 0;
}
}
.movement__wrapper-img {
margin-bottom: 20px;
}
@media screen and (max-width: 900px) {
.movement__wrapper-img {
max-width: 500px;
margin: 0 auto;
}
}
.movement__wrapper-img img {
position: relative;
z-index: 1;
}
.movement__wrapper-text {
margin-bottom: 2em;
line-height: 2;
position: relative;
}
.movement__wrapper-btn {
max-width: 320px;
margin: 0 auto;
}
.movement__wrapper-block:nth-child(2) {
margin-top: 100px;
}
@media screen and (max-width: 500px) {
.movement__wrapper-block:nth-child(2) {
margin-top: 50px;
}
}
.movement__wrapper-block:nth-child(1) .movement__wrapper-img {
position: relative;
}
.movement__wrapper-block:nth-child(1) .movement__wrapper-img:after {
content: '';
width: 600px;
height: 486px;
background: url(../img/bg03.png) no-repeat left top;
background-size: 100%;
position: absolute;
right: 37px;
bottom: 57px;
}
@media screen and (max-width: 900px) {
.movement__wrapper-block:nth-child(1) .movement__wrapper-img:after {
display: none;
}
}
.movement__wrapper-block:nth-child(2) .movement__wrapper-img {
position: relative;
}
.movement__wrapper-block:nth-child(2) .movement__wrapper-img:after {
content: '';
width: 700px;
height: 490px;
background: url(../img/bg04.png) no-repeat left top;
background-size: 100%;
position: absolute;
top: 0;
left: 22px;
}
@media screen and (max-width: 900px) {
.movement__wrapper-block:nth-child(2) .movement__wrapper-img:after {
display: none;
}
}


.item {
padding-bottom: 150px;
}
@media screen and (max-width: 900px) {
.item {
padding-bottom: 0;
}
}
.item-bg {
}
@media screen and (min-width: 1920px) {
.item-bg {
height: 700px;
overflow: hidden;
}
}
.item-img {
max-width: 1250px;
margin: -580px auto 200px;
}
@media screen and (max-width: 1440px) {
.item-img {
max-width: 1100px;
margin: -480px auto 200px;
}
}
@media screen and (max-width: 1024px) {
.item-img {
max-width: 900px;
margin: -380px auto 200px;
}
}
@media screen and (max-width: 900px) {
.item-img {
margin: -280px auto 200px;
}
}
@media screen and (max-width: 640px) {
.item-img {
margin: -40% auto 200px;
}
}
.item-box {
position: relative;
}
.item-box:after {
content: '';
width: 67.1875%;
height: 660px;
position: absolute;
top: -150px;
z-index: -1;
}
@media screen and (max-width: 500px) {
.item-box:after {
height: 160px;
top: -100px;
}
}
.item-text {
height: 140px;
position: absolute;
top: -200px;
}
@media screen and (max-width: 900px) {
.item-text {
height: 120px;
top: -180px;
}
}
@media screen and (max-width: 500px) {
.item-text {
height: 90px;
top: -140px;
}
}
.item-text img {
width: auto;
height: 100%;
}
.item__wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
}
@media screen and (max-width: 900px) {
.item__wrapper {
display: block;
}
}
.item__wrapper-img {
width: 50%;
}
@media screen and (max-width: 900px) {
.item__wrapper-img {
width: 100%;
margin-bottom: 40px;
}
}
@media screen and (max-width: 500px) {
.item__wrapper-img {
margin-bottom: 20px;
}
}
.item__wrapper-block {
width: 50%;
box-sizing: border-box;
padding: 0 50px;
}
@media screen and (max-width: 900px) {
.item__wrapper-block {
width: 100%;
padding: 0;
}
}
.item__wrapper-block p {
margin-bottom: 2em;
line-height: 2;
}
.item__wrapper-block p:last-child {
margin-bottom: 0;
}
.item__wrapper.odd .item__wrapper-img {
order: 2;
}
.item__wrapper.odd .item__wrapper-block {
order: 1;
}
.item-box.shunbun:after {
background: #faf1f1;
left: 0;
}
.item-box.shunbun .item-text {
left: 30px;
}
.item-box.rikka:after {
background: #eef3e9;
right: 0;
}
.item-box.rikka .item-text {
right: 30px;
}
.item-box.shubun:after {
background: #f5f6f6;
left: 0;
}
.item-box.shubun .item-text {
left: 30px;
}
.item-box.taisetsu:after {
background: #f8f8f6;
right: 0;
}
.item-box.taisetsu .item-text {
right: 30px;
}


.collection {
padding-bottom: 100px;
}
@media screen and (max-width: 500px) {
.collection {
padding-bottom: 50px;
}
}
.collection__wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
@media screen and (max-width: 500px) {
.collection__wrapper {
display: block;
}
}
.collection__wrapper-block {
width: 25%;
margin-bottom: 100px;
text-align: center;
}
@media screen and (max-width: 900px) {
.collection__wrapper-block {
width: 50%;
}
}
@media screen and (max-width: 500px) {
.collection__wrapper-block {
width: 100%;
margin-bottom: 50px;
}
}
.collection-bg {
padding-top: 500px;
overflow: hidden;
position: relative;
}
@media screen and (max-width: 500px) {
.collection-bg {
padding-top: 300px;
}
}
.collection-bg img {
max-width: inherit;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.collection-img {
margin-top: -200px;
position: relative;
}
@media screen and (max-width: 900px) {
.collection-img {
margin-top: -300px;
}
}
@media screen and (max-width: 500px) {
.collection-img {
margin-top: -200px;
padding: 0 30px;
}
}
.collection-text {
margin-bottom: 20px;
font-size: 1.3rem;
}
.collection-name {
font-weight: 500;
letter-spacing: 2px;
font-size: 2.2rem;
}
.collection-movement {
margin-bottom: 20px;
font-size: 1.4rem;
}
.collection-price {
margin-bottom: 10px;
font-size: 1.3rem;
}
.collection-release {
margin-bottom: 20px;
font-size: 1.3rem;
}
.collection-btn {
max-width: 160px;
margin: 0 auto;
}


.iframe {
width: 100%;
padding-top: 56.25%;
position: relative;
}
.iframe iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}



/*****************************************************************************
footer 
*****************************************************************************/

.footer {
background: #1e2432;
padding: 140px 0;
}
@media screen and (max-width: 500px) {
.footer {
padding: 70px 0;
}
}
.footer-copyright {
letter-spacing: 1px;
font-size: 1.0rem;
color: #ffffff;
}


#page-top {
width: 50px;
position: fixed;
right: 15px;
bottom: 45px;
z-index: 999;
}
@media screen and (max-width: 500px) {
#page-top {
width: 35px;
}
}

@media screen and (max-width: 900px) {
.sp-hide {
display: none !important;
}
}
.pc-hide {
display: none;
}
@media screen and (max-width: 900px) {
.pc-hide {
display: block !important;
}
}

/*****************************************************************************
 transform 
 *****************************************************************************/

.loader{
background: #ffffff;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}


.effect-fade {
opacity: 0;
transition: opacity .8s cubic-bezier(0.3,0.4,0.1,1);
}
.effect-fadeIn {
opacity: 1.0;
}


.effect {
opacity: 0;
transform: translate3d(0,30px,0);
transition: opacity .8s cubic-bezier(0.3,0.4,0.1,1), transform .8s cubic-bezier(0.3,0.4,0.1,1);
}
.fadeIn {
opacity: 1.0;
transform: translate3d(0,0,0);
}


.delay1 {
transition-delay: .4s;
}
.delay2 {
transition-delay: .8s;
}
.delay3 {
transition-delay: 1.2s;
}
.delay4 {
transition-delay: 1.6s;
}