@charset "utf-8";

/*=============================================================================
	：リンク
=============================================================================*/
a:link	 { color: #000; text-decoration:underline; }
a:visited{ color: #000; text-decoration:none; }
a:hover	 { color: #000; text-decoration:none; }
a:active { color: #000; text-decoration:none; }

/*=============================================================================
	：初期設定
=============================================================================*/
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.textshadow_wh {
	text-shadow: 
       3px  3px 0px #fff, -3px  3px 0px #fff,  3px -3px 0px #fff, -3px -3px 0px #fff,  3px  0px 0px #fff,  0px  3px 0px #fff, -3px  0px 0px #fff,  0px -3px 0px #fff,
       2px  2px 0px #fff, -2px  2px 0px #fff,  2px -2px 0px #fff, -2px -2px 0px #fff,  2px  0px 0px #fff,  0px  2px 0px #fff, -2px  0px 0px #fff,  0px -2px 0px #fff,
       1px  1px 0px #fff, -1px  1px 0px #fff,  1px -1px 0px #fff, -1px -1px 0px #fff,  1px  0px 0px #fff,  0px  1px 0px #fff, -1px  0px 0px #fff,  0px -1px 0px #fff;
}

.textshadow_min {
	text-shadow: 
       3px  3px 0px #000, -3px  3px 0px #000,  3px -3px 0px #000, -3px -3px 0px #000,  3px  0px 0px #000,  0px  3px 0px #000, -3px  0px 0px #000,  0px -3px 0px #000,
       2px  2px 0px #000, -2px  2px 0px #000,  2px -2px 0px #000, -2px -2px 0px #000,  2px  0px 0px #000,  0px  2px 0px #000, -2px  0px 0px #000,  0px -2px 0px #000,
	   1px  1px 0px #000, -1px  1px 0px #000,  1px -1px 0px #000, -1px -1px 0px #000,  1px  0px 0px #000,  0px  1px 0px #000, -1px  0px 0px #000, 0px -1px 0px #000;
}

*{
	margin:0;
	padding:0;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
	overflow:hidden;
    /* overflow-y: auto;
    overflow-x: hidden; */
	color:#000;
}

#scale-container {
    width: 3840px;
    /* height: 2160px; */
    transform-origin: top left;
	background: url("./bg.jpg");
	background-repeat: no-repeat;
	background-color:rgba(255,255,255,0.8);
	background-blend-mode:lighten;
    /* 自動スケーリングを JavaScript で制御 */
}

div{
	position:relative;
	/*罫線を引いてデバッグする
	outline: 1px solid #FC3;
	outline-offset: -1px;*/
}

div.title_bg{
	position: absolute;
	width: 950px;
	height: 200px;
	bottom: 0;
	right: 0;
	background: url("./artisan.png");
	background-repeat: no-repeat;
}

/*=============================================================================
	：カラー設定
=============================================================================*/
.color_r{
	background-color:firebrick;
	background-image: url("./artisan_bk.png");
	background-position: bottom 5px right 5px;
}
.color_b{
	background-color: black;
	background-image: url("./artisan_wh.png");
	background-position: bottom 5px right 5px;
}
.color_m{
	background-color: darkolivegreen;
	background-image: url("./artisan_bk.png");
	background-position: bottom 5px right 5px;
}
.color_d{
	background-color:darkorange;
	background-image: url("./artisan_bk.png");
	background-position: bottom 5px right 5px;
}
.color_g{
	background-color: gray;
	background-image: url("./artisan_bk.png");
	background-position: bottom 5px right 5px;
}
.color_def{
	background-color:black;
	background-image: url("./artisan_wh.png");
	background-position: bottom 5px right 5px;
}

/*=============================================================================
	：タイトル
=============================================================================*/
.index_area{
	width: 100%;
	height:270px;
	margin: 0;
	overflow:hidden;
}

.index_title_area{
	width: 1500px;
	height:270px;
	margin: 0;
	float: left;
}

.title{
	width:1500px;
	height:160px;
	border-radius: 20px;
	position: relative;
	background-color: #000;
	color: #fff;
}
.title_name_jp{
	width:100%;
	height:150px;
	font-size: 100px;
	left: 0;
	top: -25px;
	position: absolute;
}
.title_name_en{
	width:100%;
	height:150px;
	font-size: 50px;
	left: 50px;
	top: 85px;
	position: absolute;
}
.title_name_ch{
	width:100%;
	height:150px;
	font-size: 50px;
	left:880px;
	top:95px;
	position: absolute;
	font-family: "Chiron Hei HK", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

/*=============================================================================
	：タイトル注意書き
=============================================================================*/
.caution{
	width:1500px;
	height:100px;
	border-radius: 20px;
	position: relative;
	background-color: #000;
	color: #fff;
	top:3px;
}
.caution_name_jp{
	width:100%;
	height:150px;
	font-size: 40px;
	text-align: center;
	top: 0;
	position: absolute;
}
.caution_name_en{
	width:100%;
	height:150px;
	font-size: 35px;
	left: 140px;
	top: 50px;
	position: absolute;
}
.caution_name_ch{
	width:100%;
	height:150px;
	font-size: 38px;
	left:880px;
	top:53px;
	position: absolute;
	font-family: "Chiron Hei HK", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

/*=============================================================================
	：オーダー方法
=============================================================================*/
.how_to_order_area{
	margin-left: 100px;
	width:600px;
	height:310px;
	background-repeat: no-repeat;
	background-size: 20% auto;
	border-radius: 20px;
	position: relative;
	float: left;
	color:#fff;
}

.how_to_order_text{
	width:600px;
	height:50px;
	font-size:30pt;
	text-align: center;
	background-repeat: no-repeat;
	background-size: 20% auto;
	border-radius: 20px;
	position: relative;
	float: left;
	background-color: #000;
	color:#fff;
}
.how_to_order{
	width:600px;
	height:210px;
	top: 3px;
	background-repeat: no-repeat;
	background-size: 20% auto;
	border-radius: 20px;
	position: relative;
	float: left;
	color:#fff;
}
.how_to_breakdown{
	font-size:15pt;
	position:absolute;
	left: 10px;
	bottom: 10px;
}
.how_to_order_order{
	font-size:30pt;
	position:absolute;
	right: 5px;
	top: 0;
}
.how_to_order_order2{
	font-size:15pt;
	position:absolute;
	right: 5px;
	top: 50px;
}
.how_to_price{
	font-size:30pt;
	position:absolute;
	right: 8px;
	bottom: 45px;
}
.how_to_point{
	font-size:10pt;
	position:absolute;
	right: 10px;
	bottom: 30px;
}

.chinese{
	font-family: "Chiron Hei HK", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
}

/*=============================================================================
	：アイテム
=============================================================================*/
.items{
	width:470px;
	height:150px;
	-webkit-justify-content: left;
	justify-content: left;
	display:flex;
	display:-webkit-flex;
	float: left;
	align-items: flex-end;
	overflow:hidden;
	color:#fff;
	font-size:20pt;
	background-repeat: no-repeat;
	background-size: 20% auto;
	margin: 2px;
	padding: 0;
	border-radius: 20px;
	border-color: #fff;
	outline: 2px solid;
	outline-offset: -2px;
	position: relative;
}

.area{
	width: 100%;
	height:155px;
	margin: 0;
	overflow:hidden;
}

.price{
	font-size:39pt;
	position:absolute;
	right: 8px;
	bottom: 34px;
}

.point{
	font-size:12pt;
	position:absolute;
	right: 10px;
	bottom: 18px;
}

.order{
	font-size:20pt;
	position:absolute;
	right: 10px;
	top: 5px;
}

small{
	font-size:20pt;
}

big{
	font-size:45pt;
}

.breakdown{
	font-size:15pt;
	position:absolute;
	left: 95px;
	bottom: 10px;
}

.qr_area{
	width:80px;
	height:140px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 17px;
	border-color: #000000;
	outline: 2px solid;
	outline-offset: -2px;
	left: 5px;
	top: -5px;
}
.qr_img{
	position:absolute;
	width: 75px;
	height: auto;
	left: 8px;
	bottom: 15px;
}
.qr_ydbs{
	position:absolute;
	width: 30px;
	height: auto;
	left: 30px;
	top: 18px;
}