@charset "utf-8";

/*================================

main

================================*/

.mainvisual {
	position: relative;
	width: 100%;
	min-width: 1100px !important;
	height: auto;
                background-color: #fff;
                text-align: center;
                z-index: 1;
	}
@media screen and (max-width: 768px) {
.mainvisual {
	min-width: 100% !important;
	}
	}

.mainvisual:before {
	content:"";
	display: block;
	padding-top: 55.55%;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(../images/watches_pc.jpg);
	background-size: cover;
	}
.mainvisual #content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	}
@media screen and (max-width: 768px) {
.mainvisual:before {
	padding-top: 128.57%;
	background-image: url(../images/watches_sp.jpg);
	}
	}

.mainvisual:after {
                position: absolute;
                top: 50%;
                left: 0%;
	content: "";
	display: block;
                width: 100%;
                height: 50%;
	border-radius: 50%;
                box-shadow: 0 0 2rem 2rem hsl(0 0% 0% / 5%);
                z-index: -1;
                background-color: #fff;
	}

.mainvisual .xcL{
                position: relative;
                display: block;
                width: 260px;
                height: auto;
                margin: auto;
                margin-top: 4%;
                }
@media screen and (max-width: 768px) {
.mainvisual .xcL{
                width: 180px;
                margin-top: 8%;
                }
	}

.mainvisual .xcL img{
                width: 100%;
                height: auto;
                }

.mainvisual h2{
	font-size: 1.5em;
	font-weight: normal;
	line-height: 1em;
                letter-spacing: .1em;
                margin-top: 2rem;
                }
@media screen and (max-width: 768px) {
.mainvisual h2{
	font-size: 1.3em;
                letter-spacing: 0;
                margin-top: 1.5rem;
                }
	}


/*================================

copy

================================*/

.copy {
                position: relative;
	text-align: center;
                padding: 5em 0;
                background-color: #fff;
	}
@media screen and (max-width: 768px) {
.copy {
                padding: 3em 0;
	}
	}

.copy img.top_key{
                width: 10%;
                height: auto;
                position: absolute;
                top: 0;
                right: 10%;
                }
@media screen and (max-width: 768px) {
.copy img.top_key{
                right: 3%;
                width: 20%;
                }
	}

.copy h3{
	font-size: 1.5em;
	font-weight: normal;
	line-height: 1em;
                color: #6CAC59;
                margin-bottom: 3rem;
                }
@media screen and (max-width: 768px) {
.copy h3{
	font-size: 1.3em;
	line-height: 1.8em;
                }
	}

.copy p.lead{
	font-size: 1.1em;
	font-weight: normal;
	line-height: 2.2em;
                }
@media screen and (max-width: 768px) {
.copy p.lead{
	font-size: 1em;
	line-height: 2em;
                }
	}

.copy:after {
                position: absolute;
                top: 0;
                left: 0%;
	content: "";
	display: block;
                width: 100%;
                height: 100%;
	border-radius: 50%;
                box-shadow: 0 0 1rem 1rem hsl(0 0% 0% / 5%);
                z-index: -1;
                background-color: #fff;
	}
@media screen and (max-width: 768px) {
.copy:after {
                left: -50%;
                width: 200%;
                box-shadow: 0 0 .6rem .6rem hsl(0 0% 0% / 5%);
	}
	}


/*================================

watches

================================*/

.watches {
                position: relative;
	text-align: center;
                padding: 5em 0 0;
	}
@media screen and (max-width: 768px) {
.watches {
                padding: 4em 0;
	}
	}

.watches .twin{
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                width: 90%;
                max-width: 1300px;
                margin: auto;
                }
@media screen and (max-width: 768px) {
.watches .twin{
                display: block;
                margin: auto;
                }
	}

.watches .twin .block{
                position: relative;
                width: 47%;
                }
@media screen and (max-width: 768px) {
.watches .twin .block{
                width: 100%;
                }
	}

@media screen and (max-width: 768px) {
.watches .twin .block:first-child{
                padding-bottom: 3rem;
                border: 0;
                border-bottom: solid 1px;
                border-image: linear-gradient(to right, #fff 0%, #cdcdcd 50%, #fff 100%);
                border-image-slice: 1;
                }
.watches .twin .block:last-child{
                padding-top: 3rem;
                }
	}

.watches .twin .block .logo{
                display: block;
                width: auto;
                height: 3.5em;
                margin: auto;
                }
@media screen and (max-width: 768px) {
.watches .twin .block .logo{
                height: 3em;
                }
	}

.watches .twin .block h4{
                margin-top: 3rem;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1.8em;
                }
@media screen and (max-width: 768px) {
.watches .twin .block h4{
                margin-top: 2rem;
	font-size: 1.2em;
	line-height: 1.7em;
                }
	}

.watches .twin .block p.branddescription{
                margin-top: 2rem;
	font-weight: normal;
	line-height: 1.8em;
	font-size: 1.1em;
                }
@media screen and (max-width: 768px) {
.watches .twin .block p.branddescription{
                margin-top: 1.5rem;
	font-size: 1em;
	line-height: 2em;
                }
	}

.watches .twin .block .photo{
                position: relative;
                display: block;
                width: 100%;
                height: auto;
                margin: auto;
                margin-top: 3rem;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
                background-color: #fff;
                }
@media screen and (max-width: 768px) {
.watches .twin .block .photo{
                margin-top: 2rem;
                }
	}

.watches .twin .block .photo img.leaf1{
                position: absolute;
                top: -9%;
                left: -13%;
                width: 32%;
                height: auto;
                z-index: -1;
                }
@media screen and (max-width: 768px) {
.watches .twin .block .photo img.leaf1{
                left: -17%;
                }
	}

.watches .twin .block .photo img.leaf2{
                position: absolute;
                bottom: -11%;
                right: -10%;
                width: 35%;
                height: auto;
                z-index: -1;
                }
@media screen and (max-width: 768px) {
.watches .twin .block .photo img.leaf2{
                bottom: -18%;
                right: -7%;
                width: 35%;
                }
	}

.watches .twin .block .photo:after {
                position: absolute;
                top: 50%;
                left: 0;
	content: "";
	display: block;
                width: 100%;
                height: 50%;
	border-radius: 50%;
                box-shadow: 0 2rem 2rem 0 hsl(0 0% 0% / 7%);
                z-index: -1;
	}

.watches .twin .block .photo .watchp{
                width: 100%;
                height: auto;
                background-color: #fff;
                }

.watches .twin .block .photo .watchp img{
                width: 100%;
                height: auto;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
                }

.watches .twin .block h5{
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1.8em;
                margin-top: 3rem;
                }
@media screen and (max-width: 768px) {
.watches .twin .block h5{
	font-size: 1.2em;
                margin-top: 2rem;
                }
	}

.watches .twin .block p.description{
                margin-top: 2rem;
	font-size: 1.1em;
	font-weight: normal;
	line-height: 1.8em;
                }
@media screen and (max-width: 768px) {
.watches .twin .block p.description{
                margin-top: 1.5rem;
	font-size: 1em;
	line-height: 2em;
                }
	}

.watches .twin .block p.spec{
                margin-top: 2rem;
	font-size: .9em;
	font-weight: normal;
	line-height: 1.8em;
	box-sizing: border-box;
                background-color: #f7f7f7;
                padding: 1rem 0;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
                }
@media screen and (max-width: 768px) {
.watches .twin .block p.spec{
                margin-top: 1.5rem;
	line-height: 1.7em;
                }
	}

@media screen and (max-width: 768px) {
.watches .twin .block .btn{
                margin-top: 2rem;
                }
.watches .twin .block .under {
                margin-top: 1rem;
	}
	}

.watches .twin .block p.ext{
                margin-top: 2rem;
	line-height: 1.7em;
                }


/*================================

towel

================================*/

.towel {
                position: relative;
                width:100%;
                margin-top: 5rem;
                padding: 3rem 0;
                background-color: #fff;
	}
@media screen and (max-width: 768px) {
.towel {
                padding: 3rem 0 4rem;
                margin-top: 2rem;
	}
	}

.towel .inner{
                position: relative;
                width: 80%;
                max-width: 1000px;
                margin: auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: nowrap;
                flex-direction: row-reverse;
	}
@media screen and (max-width: 768px) {
.towel .inner{
                width: 80%;
                max-width: 80%;
                margin: auto;
                display: block;
	}
	}

.towel .inner .present{
                position: absolute;
                width: 100px;
                height: auto;
                top: -3rem;
                right: -3rem;
                z-index: 1;
	}
@media screen and (max-width: 768px) {
.towel .inner .present{
                width: 80px;
                top: -5.5rem;
                right: -5%;
	}
	}

@media screen and (max-width: 768px) {
.towel h3{
	font-size: 1.2em;
	line-height: 1.8em;
                text-align: center;
                }
	}

.towel .inner .photo{
                position: relative;
                width: 25%;
                overflow: hidden;
                margin: auto;
                }
@media screen and (max-width: 768px) {
.towel .inner .photo{
                margin-top: 2rem;
                width: 70%;
                }
	}

.towel .inner .photo img{
                width: 100%;
                }

.towel .texst{
                width: 75%;
                }
@media screen and (max-width: 768px) {
.towel .texst{
                width: 100%;
                }
	}

.towel .texst h3{
	font-size: 1.4em;
	font-weight: normal;
	line-height: 1em;
                }

.towel .texst p.lead{
                margin-top: 2rem;
	font-size: 1.1em;
	font-weight: normal;
	line-height: 1.8em;
                width: 90%;
                }
@media screen and (max-width: 768px) {
.towel .texst p.lead{
                margin-top: 2rem;
	font-size: 1em;
	text-align: justify;
	text-justify: inter-ideograph;
                width: 100%;
                }
	}

.towel .texst p.ext{
                margin-top: 2rem;
	font-size: 1.1em;
	font-weight: normal;
	line-height: 1em;
                }
@media screen and (max-width: 768px) {
.towel .texst p.ext{
	font-size: 1em;
                }
	}

.towel:after {
                position: absolute;
                top: 5%;
                left: 15%;
	content: "";
	display: block;
                width: 70%;
                height: 90%;
	border-radius: 50%;
                box-shadow: 0 0 1.5rem 1.5rem hsl(0 0% 0% / 5%);
                z-index: -1;
                background-color: #fff;
	}
@media screen and (max-width: 768px) {
.towel:after {
                top: 2%;
                left: -20%;
                width: 140%;
                height: 96%;
	}
	}

/*================================

action

================================*/

.actions {
                position: relative;
	text-align: center;
                padding: 0 0 5em 0;
                margin-top: 6rem;
                background-color: #fff;
	}
@media screen and (max-width: 768px) {
.actions {
                padding: 0 0 4em 0;
                margin-top: 4rem;
	}
	}

.actions:after {
                position: absolute;
                top: 50%;
                left: -10%;
	content: "";
	display: block;
                width: 120%;
                height: 50%;
	border-radius: 50%;
                box-shadow: 0 0 1rem 1rem hsl(0 0% 0% / 5%);
                z-index: -1;
	}
@media screen and (max-width: 768px) {
.actions:after {
                top: 50%;
                left: -30%;
                width: 160%;
                height: 50%;
                box-shadow: 0 0 .6rem .6rem hsl(0 0% 0% / 5%);
	}
	}

.actions .hs{
                position: absolute;
                top: 7%;
                left: 0;
                width: 100%;
                z-index: 1;
                }
@media screen and (max-width: 768px) {
.actions .hs{
                top: -7%;
                }
	}

.actions .hs h2{
	width: auto;
	height: 3em;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(../images/action2.svg);
	background-size: contain;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
                }
@media screen and (max-width: 768px) {
.actions .hs h2{
	height: 2.6em;
                }
	}

.actions .hs h3{
                margin-top: 1.5em;
	font-size: 1.1em;
	font-weight: normal;
	line-height: 1em;
                color: #F0B900;
                }

.actions .actionimage{
                display: block;
                width: 70%;
                max-width: 1200px;
                height: auto;
                margin: auto;
                margin-top: 0;
                }
@media screen and (max-width: 768px) {
.actions .actionimage{
                width: 116%;
                margin-top: 5rem;
                margin-left: -8%;
                }
	}

.actions .actionimage img{
                width: 100%;
                height: auto;
                }

.actions p.lead{
	font-weight: normal;
	font-size: 1.1em;
	line-height: 2.2em;
                letter-spacing: .05em;
	padding-top: 3rem;
                }
@media screen and (max-width: 768px) {
.actions p.lead{
	font-size: 1em;
	line-height: 2em;
	padding-top: 3rem;
                }
	}