@charset "utf-8";

@import url('//fonts.googleapis.com/css?family=Montserrat:600&display=swap');
@import url('//fonts.googleapis.com/css?family=Noto+Sans:400,500,600&display=swap');
@import url('//fonts.googleapis.com/css?family=Noto+Serif:400,500&display=swap');
@import url('//fonts.googleapis.com/css?family=Noto+Serif+JP:600&display=swap&subset=japanese');

/*****************************************************************************
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: #14233e;
text-decoration: none;
}

a:visited {
color: #14233e;
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-family: "Noto Sans", sans-serif;
font-weight: 400;
line-height: 1.8;
font-size: 1.5rem;
color: #14233e;
}


.noto-sans {
font-family: "Noto Sans", sans-serif;
}
.noto-serif {
font-family: 'Noto Serif', serif;
}
.noto-serif-jp {
font-family: 'Noto Serif JP', serif;
}
.montserrat {
font-family: 'Montserrat', sans-serif;
}

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

.inner {
max-width: 1400px;
box-sizing: border-box;
margin: 0 auto;
padding: 0 100px;
position: relative;
}
@media screen and (max-width: 1024px) {
.inner {
padding: 0 50px;
}
}
@media screen and (max-width: 500px) {
.inner {
padding: 0 20px;
}
}


.headline-lv1 {
font-weight: 600;
letter-spacing: 1px;
font-size: 2.2rem;
}
@media screen and (max-width: 900px) {
.headline-lv1 {
margin-bottom: 40px;
text-align: center;
}
}
@media screen and (max-width: 500px) {
.headline-lv1 {
margin-bottom: 20px;
font-size: 1.8rem;
}
}


.catch {
position: relative;
}
.catch .catch01 {
text-align: center;
font-style: italic;
line-height: 1;
font-size: 12.0rem;
color: rgba(255,255,255,.5);
display: block;
}
@media screen and (max-width: 500px) {
.catch .catch01 {
font-size: 10.0rem;
}
}
.catch .catch02 {
margin-top: -54px;
text-align: center;
font-weight: 600;
letter-spacing: 3px;
font-size: 3.6rem;
color: #ffffff;
display: block;
}
@media screen and (max-width: 500px) {
.catch .catch02 {
margin-top: -44px;
font-size: 3.0rem;
}
}
.catch .catch03 {
margin-top: 3px;
text-align: center;
font-weight: 600;
letter-spacing: 1px;
color: #ffffff;
display: block;
}


.button a {
height: 60px;
background: #14233e;
border: 1px solid #14233e;
letter-spacing: 1px;
font-weight: 600;
font-size: 1.3rem;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
transition: .6s;
}
.button a:hover {
background: #ffffff;
text-decoration: none;
color: #14233e;
}


.visual {
position: relative;
}
.visual-logo {
width: 110px;
position: absolute;
top: 60px;
left: 60px;
z-index: 99;
}
@media screen and (max-width: 900px) {
.visual-logo {
top: 50px;
left: 30px;
}
}
.visual-wrapper {
display: flex;
position: relative;
}
@media screen and (max-width: 640px) {
.visual-wrapper {
display: block;
}
}
.visual-wrapper:before {
content: '';
width: 100%;
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
padding-top: 18.75%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.visual-wrapper:after {
content: '';
padding-top: 56.25%;
display: block;
}
@media screen and (max-width: 1024px) {
.visual-wrapper:after {
padding-top: 75%;
}
}
@media screen and (max-width: 900px) {
.visual-wrapper:after {
padding-top: 800px;
}
}
@media screen and (max-width: 640px) {
.visual-wrapper:after {
display: none;
}
}
.visual-wrapper > div {
width: 50%;
background-size: cover;
position: relative;
}
@media screen and (max-width: 640px) {
.visual-wrapper > div {
width: 100%;
padding-top: 500px;
}
}
.visual-bg01 {
background: url("../img/visual-bg01.jpg") no-repeat;
}
.visual-bg02 {
background: url("../img/visual-bg02.jpg") no-repeat;
}
.visual-img {
width: 55%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 9;
}
@media screen and (max-width: 1024px) {
.visual-img {
width: 70%;
}
}
@media screen and (max-width: 900px) {
.visual-img {
width: 80%;
}
}
@media screen and (max-width: 640px) {
.visual-bg01 .visual-img {
top: 60%;
}
.visual-bg02 .visual-img {
top: 40%;
}
.visual-img {
width: 280px;
}
}
.visual-title {
width: 100%;
box-sizing: border-box;
padding: 0 15px;
text-align: center;
letter-spacing: 1px;
line-height: 1.3;
font-size: 3.6rem;
color: #ffffff;
position: absolute;
bottom: 10%;
left: 0;
z-index: 9;
}
@media screen and (max-width: 900px) {
.visual-title {
letter-spacing: normal;
}
}
@media screen and (max-width: 640px) {
.visual-title {
font-size: 2.8rem;
bottom: 30px;
}
}
.visual-title small {
margin-bottom: 6px;
font-weight: 600;
letter-spacing: 1px;
font-size: 1.5rem;
display: block;
}
@media screen and (max-width: 640px) {
.visual-title small {
font-size: 1.3rem;
}
}


.concept {
background: #f7f7f7;
margin: 6.25%;
padding: 100px 0;
}
@media screen and (max-width: 500px) {
.concept {
margin-bottom: 12.5%;
padding: 50px 0;
}
}
.concept-wrapper {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 900px) {
.concept-wrapper {
display: block;
}
}
.concept-text {
width: 62.5%;
}
@media screen and (max-width: 900px) {
.concept-text {
width: 100%;
}
}
.concept-text p {
margin-bottom: 2em;
line-height: 2;
}
.concept-text p:last-child {
margin-bottom: 0;
}
.concept-text .attention {
padding-left: 0.8em;
text-indent: -0.8em;
line-height: 1.5;
font-size: 1.3rem;
}


.desigh {
margin: 6.25% 0 12.5%;
}
.desigh .headline-lv1 {
text-align: center;
}
.desigh-text {
width: 62.5%;
}
.desigh-text p {
line-height: 2;
}


.desigh-wrapper01 {
margin-top: 40px;
}
@media screen and (max-width: 500px) {
.desigh-wrapper01 {
margin-top: 20px;
}
}
.desigh-wrapper01 .desigh-header {
max-height: 500px;
position: relative;
overflow: hidden;
}
.desigh-wrapper01 .desigh-header:after {
content: '';
padding-top: 31.25%;
display: block;
}
@media screen and (max-width: 900px) {
.desigh-wrapper01 .desigh-header:after {
padding-top: 300px;
}
}
@media screen and (max-width: 500px) {
.desigh-wrapper01 .desigh-header:after {
padding-top: 220px;
}
}
.desigh-wrapper01 .desigh-bg {
background: url("../img/bg01.png") no-repeat right bottom;
background-size: cover;
margin-left: -380px;
padding-top: 31.25%;
position: absolute;
top: 50%;
right: 0;
left: 50%;
transform: translate(0,-50%);
}
@media screen and (max-width: 900px) {
.desigh-wrapper01 .desigh-bg {
margin-left: 0;
padding-top: 300px;
left: 0;
}
}
@media screen and (max-width: 500px) {
.desigh-wrapper01 .desigh-bg {
padding-top: 220px;
}
}
.desigh-wrapper01 .desigh-body {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.desigh-wrapper01 .desigh-body .inner {
height: 100%;
}
@media screen and (max-width: 900px) {
.desigh-wrapper01 .desigh-body .inner {
padding: 0;
}
}
.desigh-wrapper01 .desigh-box {
height: 100%;
position: relative;
}
.desigh-wrapper01 .desigh-img {
width: 65.33333%;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
@media screen and (max-width: 900px) {
.desigh-wrapper01 .desigh-img {
width: 480px;
}
}
@media screen and (max-width: 500px) {
.desigh-wrapper01 .desigh-img {
width: 90%;
}
}
.desigh-wrapper01 .catch {
position: absolute;
top: 50%;
right: 0;
transform: translate(0,-50%);
}
@media screen and (max-width: 900px) {
.desigh-wrapper01 .catch {
display: none;
}
}
.desigh-wrapper01 .desigh-text {
width: 62.5%;
margin: 50px auto 7.5%;
}
@media screen and (max-width: 900px) {
.desigh-wrapper01 .desigh-text {
width: 100%;
margin: 30px auto 12.5%;
}
}
@media screen and (max-width: 500px) {
.desigh-wrapper01 .desigh-text {
margin: 20px auto 12.5%;
}
}


.desigh-wrapper02 {
}
.desigh-wrapper02 .desigh-img {
background: #f8f8f8;
text-align: center;
}
.desigh-wrapper02 .desigh-img img {
width: 85.33333%;
}
@media screen and (max-width: 900px) {
.desigh-wrapper02 .desigh-img img {
width: 100%;
}
}
.desigh-wrapper02 .desigh-text {
width: 62.5%;
margin: 50px auto 7.5%;
}
@media screen and (max-width: 900px) {
.desigh-wrapper02 .desigh-text {
width: 100%;
margin: 30px auto 12.5%;
}
}
@media screen and (max-width: 500px) {
.desigh-wrapper02 .desigh-text {
margin: 20px auto 12.5%;
}
}


.desigh-wrapper03 {
position: relative;
}
.desigh-wrapper03 .desigh-bg {
background: #f8f8f8;
}
.desigh-wrapper03 .desigh-img {
width: 86.33333%;
margin-left: auto;
}
@media screen and (max-width: 900px) {
.desigh-wrapper03 .desigh-img {
width: 100%;
}
}
.desigh-wrapper03 .desigh-body {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
@media screen and (max-width: 900px) {
.desigh-wrapper03 .desigh-body {
position: relative;
top: auto;
left: auto;
transform: none;
}
}
.desigh-wrapper03 .desigh-text {
width: 35%;
}
@media screen and (max-width: 900px) {
.desigh-wrapper03 .desigh-text {
width: 100%;
margin-top: 30px;
text-align: center;
}
}
@media screen and (max-width: 500px) {
.desigh-wrapper03 .desigh-text {
margin-top: 20px;
}
}


.movement {
margin: 12.5% 6.25% 6.25%;
}
@media screen and (max-width: 900px) {
.movement {
margin: 12.5% 0;
}
}
.movement-wrapper {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 900px) {
.movement-wrapper {
display: block;
}
}
.movement-head {
width: 376px;
margin-right: 70px;
}
@media screen and (max-width: 900px) {
.movement-head {
width: 50%;
margin: 0 auto;
}
}
@media screen and (max-width: 500px) {
.movement-head {
width: 70%;
}
}
.movement .headline-lv1 {
margin-bottom: 40px;
}
@media screen and (max-width: 500px) {
.movement .headline-lv1 {
margin-bottom: 20px;
}
}
.movement-img {
position: relative;
}
.movement-img:after {
content: '';
width: 600px;
height: 486px;
background: url("../img/bg02.jpg") no-repeat;
background-size: 600px auto;
position: absolute;
right: 0;
bottom: 57px;
z-index: -1;
}
@media screen and (max-width: 900px) {
.movement-img:after {
display: none;
}
}
.movement-text {
width: 62.5%;
}
@media screen and (max-width: 900px) {
.movement-text {
width: 100%;
}
}
.movement-text p {
line-height: 2;
}
.movement-btn {
max-width: 340px;
margin-top: 50px;
}
@media screen and (max-width: 900px) {
.movement-btn {
margin: 50px auto 0;
}
}


.collection {
margin: 6.25% 6.25% 12.5%;
}
@media screen and (max-width: 900px) {
.collection {
margin: 6.25% 0 12.5%;
}
}
.collection .headline-lv1 {
text-align: center;
}
.collection-wrapper {
margin-top: 50px;
display: flex;
position: relative;
}
@media screen and (max-width: 500px) {
.collection-wrapper {
margin-top: 20px;
}
}
.collection-wrapper .catch {
width: 100%;
position: absolute;
top: 168px;
left: 0;
z-index: 9;
}
@media screen and (max-width: 900px) {
.collection-wrapper .catch {
top: 84px;
}
}
@media screen and (max-width: 500px) {
.collection-wrapper .catch {
top: 52px;
}
}
.collection-item {
width: 50%;
}
.collection-bg01,
.collection-bg02 {
position: relative;
overflow: hidden;
}
.collection-bg01:after,
.collection-bg02:after {
content: '';
padding-top: 500px;
display: block;
}
@media screen and (max-width: 500px) {
.collection-bg01:after,
.collection-bg02:after {
padding-top: 400px;
}
}
.collection-bg01 {
background: url("../img/SBGA427-bg.jpg") no-repeat;
background-size: cover;
}
.collection-bg02 {
background: url("../img/SBGA429-bg.jpg") no-repeat;
background-size: cover;
}
.collection-img {
max-width: 280px;
box-sizing: border-box;
margin: -200px auto 38px;
padding: 0 15px;
position: relative;
z-index: 1;
}
@media screen and (max-width: 900px) {
.collection-img {
max-width: 250px;
}
}
@media screen and (max-width: 500px) {
.collection-img {
margin: -150px auto 38px;
}
}
.collection-name {
text-align: center;
font-weight: 600;
letter-spacing: 1px;
font-size: 2.2rem;
}
.collection-movement {
margin-bottom: 14px;
text-align: center;
font-size: 1.4rem;
}
.collection-price {
margin-bottom: 34px;
text-align: center;
font-size: 1.4rem;
}
.collection-btn {
max-width: 230px;
box-sizing: border-box;
margin: 0 auto;
padding: 0 15px;
}
.collection-btn a {
height: 50px;
}


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

.footer {
background: #1e2432;
padding: 120px 0;
position: relative;
}
@media screen and (max-width: 500px) {
.footer {
padding: 60px 0;
}
}
.footer_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer_wrapper-logo {
width: 140px;
position: relative;
z-index: 1;
}
@media screen and (max-width: 500px) {
.footer_wrapper-logo {
width: 110px;
}
}
.footer_wrapper-sns {
display: flex;
position: relative;
z-index: 1;
}
.footer_wrapper-sns li {
width: 30px;
margin-left: 20px;
}
.footer-copyright {
text-align: center;
font-weight: 600;
letter-spacing: 1px;
font-size: 1.0rem;
color: #ffffff;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translate(0,-50%);
}
@media screen and (max-width: 900px) {
.footer-copyright {
margin-top: 30px;
position: relative;
top: auto;
left: auto;
transform: none;
}
}


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

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

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


.filter {
}
.filter.scrollin {
}


.fadein {
opacity: 0;
transform: translate(0,-3rem);
transition: all 1s;
transition-delay: .2s;
}
.fadein.scrollin {
opacity: 1;
transform: translate(0,0);
}