@charset "utf-8";
/* CSS Document */
* {
    margin: 0px;
    box-sizing: border-box;
	padding: 0px;
}
html{
	margin: 0;
	padding:0px;
	height:100%;
}
body {
	background-image: url(img/cssbg.jpg);
  	background-attachment: fixed;
  	background-size: cover;
  	background-position: center;
	background-repeat: no-repeat;
	margin: 0;
	padding:0px;
	height:100%;
}

.pcbr{
	display: block;
}
.spbr{
	display: none;
}

.c_topimg{
	width: 1080px;
	height: auto;
	margin: 0 auto;
}

.white{
	color:#FFFFFF;
	margin: 0 auto;
	font-size: small;
}

.c_full{
	color: #0051E8;
	font-size: 24px;	
	font-family: 'Noto Serif TC', serif;
	margin-top: 10px;
	margin-bottom: 2%;
}

.mvtop {
  position: relative;
  text-align: center; 
  margin: 0 auto;
  width: 1080px;
  height: 0;
  padding-top: 1080px;
  padding-left:0px;
  padding-right:0px;
}
.mvtop img {
  position: absolute;
  margin: 0 auto; 
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
}

a { outline: none;
    text-decoration: none;
    cursor: pointer;
    color: #000099;
}

a:hover{
	opacity: 0.8;		
}

p {
	font-size: 16px;
	color:#000;
	font-family: sans-serif;
}

.textarea{
	display: block;
	width: 50%;
	margin: auto;
	padding: 0px;
	text-align: left;
}

.clear{
	clear: both;
}

.line{
	border-top: 1px solid #000;
}

.main{
	    background-color: #FFFFFF;
		text-align: center; 
		width: 1080px;
		height: auto;
		margin: 0 auto;
		padding: 0px;
		box-shadow: 2px 2px 20px 10px rgba(0,0,0,0.6);
}

nav{
		max-width: 1080px;
		height: auto;
}

nav ul{
	padding: 0px;
}

nav ul li{
		list-style-type: none;
		float: left;
		width: 250px;
		margin-left:10px;
		margin-right:10px;
}

nav ul li img{
		width: 100%;
}

nav ul li img:hover{
	-webkit-box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
-moz-box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
}

ul li{
	list-style-type: none;
	font-size: 14px;
}

h1{
	font-size: 30px;	
	font-family: 'Noto Serif TC', serif;
	margin-top: 0%;
	margin-bottom: 2%;
}

h2{
	text-align: left;
	margin-top: 80px;
	text-align: center;
	font-family: 'DM Serif Display', serif;
}

.watch_type{
	font-size: 24px;
	text-align: center;
	font-family: 'DM Serif Display', serif;
}
.watch_smn{
	text-align: center;
	font-family: serif;
}

.setumei{
	max-width: 650px;
	padding: 1%;
	padding-left: 5%;
	padding-bottom: 40px;
	text-align: left;
}

.kakaku{
	margin-bottom: 15px;
}

.yoyaku_text {
  background:#FF9900;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 16px 0;
  text-align: center;
  width: 30%;
  margin-bottom: 10px;
  border-radius: 23px;
  color: #fff;
  box-shadow: 1px 2px 4px gray;
}

.yoyaku2_text {
 background:#80B5FF;
 display: inline-block;
 font-size: 16px;
 font-weight: bold;
 line-height: 1;
 padding: 16px 0;
 text-align: center;
 width: 30%;
 margin-bottom: 10px;
 border-radius: 23px;
 color: #FFF;
 box-shadow: 1px 2px 4px gray;
}

.kinpri img{
	width: 700px;
}

.item{
	margin-top: 5%;
	border-top: 1px solid #BFBFBF;
}

.item2 img{
	width: 250px;
}

.textarea2{
	display: block;
	width: 50%;
	margin: auto;
	padding: 0px;
	text-align: left;
}

.pwatch img{
	width: 250px;
}

.textarea3{
	display: block;
	width: 70%;
	margin: auto;
	padding: 0px;
	text-align: left;
}

.textarea3 ul{
	padding: 0px;
}

.photo2{
	display: none;
}

.photo3{
	display: none;
}

.caution img{
	width: 500px;	
}
	
.caution p{
	padding-top: 3%;
	padding-bottom: 3%;
}
/* CSS Document */
/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

.textarea3 ul {
	padding-left: 20px;
	list-style-type: disc;
	list-style-position: outside;
}

.li_caption{
	list-style-type: square !important;
	font-size: 110%;
	font-weight: bold;
}


.textarea3 li{
	list-style-type: disc;
}

.li_non{
	list-style-type: none !important;
}

footer {
	margin: 0 auto;
	background-color: #FFF;
	width: 100%;
	max-width: 1080px;
}
footer p{
	padding: 0px;
	margin: 0 auto;
}	

@media screen and ( max-width:1079px) {
.c_topimg{
	width: 100%;
}
}

@media screen and ( min-width:388px) and ( max-width:600px) {
.c_topimg{
	width: 100%;
}
.pcbr{
	display: none;
}
.spbr{
	display: block;
}	
.main{
	width: 100vw;	
}

.textarea{
	display: block;
	width: 80%;
	margin: auto;
	padding: 0px;
	text-align: left;
}

nav{
		max-width: 100vw;
		height: auto;
}

nav ul{
	margin: 0px;
	padding: 0px;
}

nav ul li{
		list-style-type: none;
		float: left;
		width: 48%;
		margin-left:1%;
		margin-right:1%;
}

nav ul li img{
		max-width: 300px;
}

nav ul li img:hover{
	-webkit-box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
-moz-box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
}

ul li{
	list-style-type: none;
	font-size: 14px;
}

.watch_type{
	font-size: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	font-family: 'DM Serif Display', serif;

}	
	
.item img{
	width: 85%;
}
	
.item p{
		width: 85%;
}

h1{
	padding-left: 5%;
	padding-right: 5%;
}	
	
h2{
	text-align: center;
	margin-top: 20px;
	font-size: 1.2em;
}

.present img{
	width: 85%;
}
	
.kinpri img{
	width: 85%;	
}
	
.textarea2{
	width: 90%;		
}
	
.textarea3{
	width: 90%;		
}

	
.pwatch img{
	width: 50%;	
}

.caution img{
	width: 90%;	
}
	
.yoyaku_text {
  width: 70%;
}	

.yoyaku2_text {
  width: 70%;
}

.photo1{
	display: none;
}

.photo2{
	display: block;
	margin-bottom: 2%;
}

.photo3{
	display: block;
}

.pwatch p{
	padding-top: 3%;
	padding-bottom: 3%;
}

p .setumei2{
	text-align: left;
	margin: auto 0;
	padding-left: 0px;
	padding-right: 0px;
}	
	
.caution p{
	padding-top: 6%;
	padding-bottom: 6%;
}
}




@media screen and ( min-width:321px) and ( max-width:387px) {
.c_topimg{
	width: 100%;
}
.pcbr{
	display: none;
}
.spbr{
	display: block;
}
.mvtop {
  display: block;
  position: relative;
  width: 100vw;
  height: auto;
  padding-top: 400px;
  zoom:1;
}

.mvtop img {
  position: absolute;
  margin: 0 auto; 
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
  zoom:1;
}
	
.main{
	width: 100vw;
	
}

.textarea{
	display: block;
	width: 80%;
	margin: auto;
	padding: 0px;
	text-align: left;
}

nav{
		max-width: 100vw;
		height: auto;
}

nav ul{
	margin: 0px;
	padding: 0px;
}

nav ul li{
		list-style-type: none;
		float: left;
		width: 48%;
		margin-left:1%;
		margin-right:1%;
}

nav ul li img{
		max-width: 300px;
}

nav ul li img:hover{
	-webkit-box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
-moz-box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
}

ul li{
	list-style-type: none;
	font-size: 14px;
}

.watch_type{
	font-size: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	font-family: 'DM Serif Display', serif;
}	
	
.item img{
	width: 85%;
}
	
.item p{
		width: 85%;
}

h1{
	padding-left: 5%;
	padding-right: 5%;
}	
	
h2{
	text-align: center;
	margin-top: 20px;
	font-size: 1.2em;
}

.present img{
	width: 85%;
}
	
.kinpri img{
	width: 85%;	
}
	
.textarea2{
	width: 90%;		
}
	
.textarea3{
	width: 90%;		
}

	
.pwatch img{
	width: 50%;	
}

.caution img{
	width: 90%;	
}
	
.yoyaku_text {
  width: 70%;
}	

.yoyaku2_text {
  width: 70%;
}	

.photo1{
	display: none;
}

.photo2{
	display: block;
	margin-bottom: 2%;
}

.photo3{
	display: block;
}

.pwatch p{
	padding-top: 3%;
	padding-bottom: 3%;
}

p .setumei2{
	text-align: left;
	margin: auto 0;
	padding-left: 0px;
	padding-right: 0px;
}	
	
.caution p{
	padding-top: 6%;
	padding-bottom: 6%;
}
}


@media screen and ( max-width:320px) {
.c_topimg{
	width: 100%;
}
.pcbr{
	display: none;
}
.spbr{
	display: block;
}
.mvtop {
  display: block;
  position: relative;
  width: 100vw;
  height: auto;
  padding-top: 350px;
  margin: 5%;
}

.mvtop img {
  position: absolute;
  margin: 0 auto; 
  top: 0;
  right: 0;
  width: 100%;
  height: auto;

}
	
.main{
	width: 100vw;
	
}

.textarea{
	display: block;
	width: 80%;
	margin: auto;
	padding: 0px;
	text-align: left;
}

nav{
		max-width: 100vw;
		height: auto;
}

nav ul{
	margin: 0px;
	padding: 0px;
}

nav ul li{
		list-style-type: none;
		float: left;
		width: 48%;
		margin-left:1%;
		margin-right:1%;
}

nav ul li img{
		max-width: 300px;
}

nav ul li img:hover{
	-webkit-box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
-moz-box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
box-shadow: 0 0 10px 0 #0066FF, 0 0 20px 0 #00CCFF;
}

ul li{
	list-style-type: none;
	font-size: 14px;
}

.watch_type{
	font-size: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	font-family: 'DM Serif Display', serif;
}	
	
.item img{
	width: 85%;
}
	
.item p{
		width: 85%;
}

h1{
	padding-left: 5%;
	padding-right: 5%;
}	
	
h2{
	text-align: center;
	margin-top: 20px;
	font-size: 1.2em;
}

.present img{
	width: 85%;
}
	
.kinpri img{
	width: 85%;	
}
	
.textarea2{
	width: 90%;		
}
	
.textarea3{
	width: 90%;		
}

	
.pwatch img{
	width: 50%;	
}

.caution img{
	width: 90%;	
}
	
.yoyaku_text {
  width: 70%;
}	

.yoyaku2_text {
  width: 70%;
}

.photo1{
	display: none;
}

.photo2{
	display: block;
	margin-bottom: 2%;
}

.photo3{
	display: block;
}

.pwatch p{
	padding-top: 3%;
	padding-bottom: 3%;
}

p .setumei2{
	text-align: left;
	margin: auto 0;
	padding-left: 0px;
	padding-right: 0px;
}	
	
.caution p{
	padding-top: 6%;
	padding-bottom: 6%;
}
}