@charset "utf-8";

iframe { border: none; }
/* ------------------------------------------------------------ video */

#video-wrapper { width: 100%; height: 100%; position: absolute; z-index: 0; background: -webkit-linear-gradient(#650976 0%, #185c73 100%); }
#video-player { top: 0; left: 0; z-index: 1; width: 100.5%; position: relative; overflow: hidden; opacity: 1; transition: opacity 1s; -webkit-transform-style: preserve-3d; height: 100%; }

#video-player::after { z-index: 2; position: absolute; display: block; content: ''; width: 100%; height: 100%; left: 0; top: 0;
	background: url(../images/common/overlay_bg.png) no-repeat center center;
	background-size: cover;
}
#video-player video { z-index: 0; position: absolute; width: 100vw; height: auto; min-height: 100%; max-width: 100%; min-width: 56.6vh; top: 50%; left: 50%; pointer-events: none; object-fit: cover; 
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	background: url(../images/common/wait_bg.jpg) no-repeat center center;
	background-size: cover;
}
#video-player .vjs-control-bar { display: none; }
#video_error { z-index: 0; display: none; position: absolute; background: url(../images/common/wait_bg.jpg) no-repeat center center; background-size: cover; width: 100%; height: 100%; top: 0; bottom: 0; margin: auto; display: none; }
#video_error p { color: #fff; text-align: center; background: none; font-size: 50px; }

/* ------------------------------------------------------------ header */

#header { position: relative; padding: 10px 0 20px;  width: 100%; z-index: 1; }
#header .logo { position: absolute; top: 15px; left: 0; text-align: center; width: 40%; width: 170px; }
#header .logo img { width: 76%; height: auto; margin: 0 0 10px; }


#wrapper.fashon #header .logo { width: 230px; text-align: center; }
#wrapper.fashon #header .logo  img { width: 90%;  margin: 0 0 20px; }
#header.fashon .vr {  width: 98%; }
#header .logo span { display: block; color: #fff; font-size: 26px; padding: 5px 0 0; font-family: 'alternate-gothic'; letter-spacing: 2px; text-align: center; }
#header .logo .hyperlink { left: 0; position: relative; display: block; margin: 15px 0 0; background: #fff; padding: 10px 5px; width: 100%; box-sizing: border-box; 
	border-bottom-right-radius: 40px; 
	border-top-right-radius: 40px; 
	z-index: 99;
}
#header .logo .hyperlink img { width: 40%; display: inline-block; margin: 0 0 5px; }
#header .logo .hyperlink p { font-size: 11px; }
#header .vr {  width: 150px; text-align: left; }
#header .vr a {  }
#header .vr a img { width: 100%; height: auto;  }
#header .vr a:hover { opacity: 0.8; }

#header .status { width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; padding: 10px 3% 10px; box-sizing: border-box; }
#header .status li { color: #fff; text-align: right; font-size: 16px; margin: 0 20px 0 0; padding: 0 0 0 30px; box-sizing: border-box; }
#header .status li.comment_count { background: url(../images/common/comment_count.svg) no-repeat 10% center; background-size: auto 100%; }
#header .status li.like_count { background: url(../images/common/like_count.svg) no-repeat 10% center; background-size: auto 100%; }
#header .status li.sound { padding: 0; min-width: 0; cursor: pointer; width: 33px; height: 33px; background: url(../images/common/sound_off.svg) no-repeat center center; background-size: 100% auto;  }
#header .status li.sound.on { background: url(../images/common/sound_on.svg) no-repeat center center; background-size: 100% auto; }
#header .status li.chat_toggle { margin: 0; position: relative; padding: 0; background: url(../images/common/comment.svg) no-repeat center center; background-size: 100% auto; cursor: pointer; width: 25px; height: 30px; }
#header .status li.chat_toggle.on::before { margin: auto; top: 12px; left: -8px; content: ''; display: block; position: absolute; width: 150%; height: 1px; background: #fff; 
	transform: rotate(45deg);
}
#header .live { bottom: 0; position: absolute; right: 3%; }
#header .live p { color: #fff;  margin: 10px 0 0; box-sizing: border-box; padding: 5px 0 6px 20px; text-align: center; background: #e72319; letter-spacing: 2px;  width: 80px; border-radius: 5px; position: relative; font-size: 12px; }
#header .live p:after { content: ''; position: absolute; display: block; width: 10px; height: 10px; left: 18%; top: 0; bottom: 0; margin: auto; background: #fff; border-radius: 50%; }




#header .banner { z-index: 1; transition: 0.5s; width: 70%; right: -100%; position: absolute; }
#header .banner.show { right: 0%; }
#header .banner img { width: 100%; height: auto; }

#header .question { z-index: 2; position: absolute; right: -100%; width: 75%; text-align: right; overflow: hidden; transition: 0.5s; }
#header .question.show { right: 0%; }
#header .question .q_box { color: #fff; width: 100%; box-sizing: border-box; padding: 5px 3% 5px 30px; display: inline-block; text-align: left;
	background: url(../images/common/question_bg.png) no-repeat left bottom;
	background-size: cover;
}
#header .question .q_box .info { padding: 0 0 0 10px; overflow: hidden; }
#header .question .q_box .info p.text { float: left; padding: 2px 0; height: 24px; box-sizing: border-box; line-height: 22px; width: calc(100% - 115px); overflow: hidden; }
#header .question .q_box .info p.time { float: right; padding: 2px 10px 5px 30px; border: 1px solid #fff; border-radius: 30px; text-align: right; font-size: 12px; margin: 3px 3px 0 0;
	background: url(../images/common/icn_clock.png) no-repeat 10% center;
	background-size: 15px auto;
}

#header .question .q_box .info p.text span { animation: marquee 7s linear infinite; display: inline-block; white-space: nowrap; padding: 0 0 0 calc(100%); font-size: 14px; }
#header .question .q_box .info p.time span { font-size: 14px; display: inline-block; padding: 0 0 0 5px; }
#header .question .bar { padding: 5px 0 0; margin: 0 -5% 0 0; text-align: right; height: 5px; }
#header .question .bar span { vertical-align: top;  display: inline-block; /* transition: 1s linear; */ width: 100%; background: #e72319; height: 2px; position: relative; text-align: right; max-width: 100%; }
#header .question .bar span:before { content: ''; display: inline-block; width: 6px; height: 6px; background: #e72319; border-radius: 50%; position: absolute; left: -1px; top: -2px; }


#header .title { box-sizing: border-box; width: 100%; padding: 5px 50px 5px 0; color: #fff; font-size: 14px; text-align: right;
	background: rgba(0, 0, 0, 0.6) url(../images/common/select_arrow.svg) no-repeat 97% center;
	background-size: 20px auto;
}
#header .title h1 { height: 30px; display: inline-block; position: relative; width: 70%; text-align: left; overflow: hidden; }
#header .title p { display: inline-block; font-size: 14px; }
#header .title h1 span { width: 120%; text-align: center; left: 0; top: 0; position: absolute; height: 30px; overflow: hidden; line-height: 30px; animation: marquee 12s linear infinite; display: inline-block; font-size: 14px; text-align: center; }

@keyframes marquee {
	0% { transform: translateX(100%)}
	100% { transform: translateX(-100%)}
}

#schedule { position: absolute; width: 100%; height: 100%; top: -120%; transition: 0.5s; }
#schedule.open { top: 0; }
#schedule iframe { position: absolute; width: 100%; height: 100%; background: #fff; z-index: 99; top: 0; left: 0; }	
#schedule .close { position: absolute; z-index: 999; right: 30px; top: 30px; }

/* ------------------------------------------------------------ iframe */

#iframe { transition: 0.5s; text-align: right; z-index: 99; position: absolute; width: 100%; height: 60%; bottom: -100%; left: 0; }
#iframe.open { bottom: 0%; }
#iframe iframe { width: 100%; background: #fff; height: 100%; }
#iframe .close { background: rgba(0, 0, 0, 0.8); position: relative;  border: 1px solid #434343; display: inline-block; margin: 10px; color: #fff; padding: 5px 10px; cursor: pointer; }

/* ------------------------------------------------------------ choices */

ul.choices { display: flex; padding: 5px 0 0; justify-content: space-evenly; }
ul.choices li { background: #bababa; margin: 4px 1%; border-radius: 20px; width: 48%; box-sizing: border-box; overflow: hidden; z-index: 0; font-size: 16px; }
ul.choices li p { z-index: 0; padding: 2px 15px; position: relative; min-height: 20px; }
ul.choices li span { position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; height: 14px; line-height: 14px; font-size: 14px; }
ul.choices li small { border-radius: 20px; display: block; width: 0%; left: 0; bottom: 0; top: 0; width: 0%; transition: 0.5s; position: absolute; z-index: -1; }
ul.choices li p::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; height: 20px; margin: auto; }

ul.choices li:nth-child(1) small { background: #076a92; }
ul.choices li:nth-child(1) p::before { content: 'A'; }
ul.choices li:nth-child(2) small { background: #f0bb56; }
ul.choices li:nth-child(2) p::before { content: 'B'; }
ul.choices li:nth-child(3) small { background: #674670; }
ul.choices li:nth-child(3) p::before { content: 'C'; }
ul.choices li:nth-child(4) small { background: #8dbd5b; }
ul.choices li:nth-child(4) p::before { content: 'D'; }

/* ------------------------------------------------------------------------------------ bottom */

#bottom { position: absolute; bottom: 0; width: 100%; left: 0; }
#bottom .comments ul {
	transition: 0.5s;
	overflow-y: hidden;
	height: 0vh;
	min-height: 0;
	mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 100%);
	overflow: hidden;
}
#bottom .comments ul.open { height: 25vh; min-height: 161px; overflow-y: scroll; box-sizing: border-box; padding: 100px 0 0; }

/* ------------------------------------------------------------ lang */

#lang_select { position: absolute;  right: 3%; top: 98px; }
#lang_select img { vertical-align: top; padding: 2px 5px 0 0; }
#lang_select p { background: #000; border-radius: 20px; overflow: hidden; border: 1px solid #333; display: inline-block; }
#lang_select p span { color: #fff; display: inline-block; text-align: center; width: 35px; height: 25px; line-height: 23px; cursor: pointer; padding: 5px; }
#lang_select p span.active { background: #fff; color: #000;}


/* ------------------------------------------------------------------------------------ item_menu */

#item_menu { height: calc(100% - 170px); background: #fff; overflow: auto; transition: 0.5s; width: 100%; z-index: 99; bottom: -100%; position: absolute; left: 0; box-sizing: border-box;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
#item_menu .item_inner { position: relative; width: 100%; height: 100%; }
#item_menu .item_inner h4 { padding: 40px 0 0; text-align: center; font-size: 20px; }
#item_menu.open { bottom: 0; }
#item_menu .close { width: 35px; position: absolute; top: 20px; right: 20px; } 
#item_menu .close img { width: 100%; height: auto; }
#item_menu .item_slider { position: absolute; overflow: auto; z-index: 1; box-sizing: border-box; width: 100%;
	height: calc(100% - 150px);
	bottom: 50px;
	padding: 0 3% 30px;
}
#item_menu .item_slider ul { height: 100%; overflow: auto; display: flex; flex-wrap: wrap; justify-content: space-between; 
	-ms-overflow-style: none; 
	scrollbar-width: none;
	flex-flow: row wrap;
}
#item_menu .item_slider ul::after {	
	content: "";
	display: block;
	height: 1px;
	width: calc(94% / 3);
}
#item_menu .item_slider li { cursor: pointer; box-sizing: border-box; position: relative; color: #000; width: 100%; height: auto; border-radius: 12px; box-sizing: border-box;
	width: calc(94%/3);
	margin: 0 0 20px;
}

#item_menu .back { display: none; position: absolute; left: 20px; top: 40px; cursor: pointer; }


/* ------------------------------------------------------------------------------------ detail */

#item_menu .item_slider li.detail { z-index: 10; border-radius: 0; display: none; padding: 0 0 60px; box-sizing: border-box; height: 100%; overflow: auto; z-index: 9; position: absolute; top: 0; left: 0; right: 0; width: 94%; background: #fff;
	margin: 0 auto;
	-ms-overflow-style: none; 
	scrollbar-width: none;
}
#item_menu .item_slider li.detail .item_header { padding: 0; }
#item_menu .item_slider li.detail .img { height: auto; }
#item_menu .item_slider li.detail .shop { padding: 10px 0 0; }
#item_menu .item_slider li.detail .textbox { padding: 0 0 15px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#item_menu .item_slider li.detail .info { line-height: 180%; padding: 10px 0 0; font-size: 13px;}
#item_menu .item_slider li.detail .label { display: block; padding: 10px 0 0; font-size: 16px; }
#item_menu .item_slider li.detail .textbox .price { color: #000; font-size: 14px; }
#item_menu .item_slider li.detail .price span { color: #696969; font-size: 12px; }
#item_menu .item_slider li.detail .textbox h5 { font-size: 16px; }
/* ------------------------------------------------------------------------------------  */

#item_menu .item_slider li select { appearance: none; outline: none; border: 1px solid #000;; padding: 6px 24px 6px 8px; border-radius: 5px; font-size: 14px;
	background: url("../images/common/select_arrow.svg") no-repeat 84% center #fff;
	background-size: auto;
	background-size: 14px;
}

#item_menu .regi { background: #fff; box-shadow: 0px 1px 27px 0px #949494; box-sizing: border-box; position: absolute; z-index: 99; bottom: 0; left: 0; width: 100%; text-align: center;
	padding: 15px 3%;
}
#item_menu .regi .btn a { display: inline-block; background: #FCB124; font-size: 14px; color: #fff; font-family: 'Noto-Sans-JP-Medium'; text-align: center; padding: 10px 50px; border-radius: 1000px; 
	font-size: 16px;
	width: 80%;
	max-width: 320px;
	box-sizing: border-box;
}


#item_menu .item_slider li .img { position: relative; width: 100%; height: auto; overflow: hidden; height: 120px; border-radius: 10px; }
#item_menu .item_slider li .img img { width: 100%; height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
#item_menu .item_slider li .item_header { padding: 10px 0 0; }
#item_menu .item_slider li .item_header h2 { font-size: 20px; }
#item_menu .item_slider li .textbox { position: relative; }
#item_menu .item_slider li .textbox h5 { padding: 10px 0 5px; line-height: 140%; font-size: 11px;}
#item_menu .item_slider li .textbox .out {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 12px;
	padding: 0 10px;
	background: #989898;
	color: #fff;
	height: 20px;
	line-height: 20px;
	border-radius: 15px;
}
#item_menu .item_slider li .shop { padding: 0 0 5px; font-size: 11px; color: #696969; }
#item_menu .item_slider li .textbox .price { font-size: 12px; color: #696969; }
#item_menu .item_slider li .shopping_bar {  }
#item_menu .item_slider li .shopping_bar button span {
	position: absolute;
	display: inline-block;
	background: url("../images/common/cart.svg") no-repeat 12px center;
	  background-size: auto;
	background-size: 20px;
	height: 20px;
	line-height: 20px;
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 0 20px;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform .3s;
	-moz-transition: -moz-transform .3s;
	transition: transform .3s;
}

#item_menu .item_slider li .shopping_bar button {
	overflow: hidden;
	float: right;
	font-size: 12px;
	color: #fff;
	font-family: 'Noto-Sans-JP-Medium';
	padding: 0 15px;
	height: 35px;
	border-radius: 1000px;
	background: #8CC758;
	display: block;
	position: relative;
	width: 150px;
}

#item_menu .item_slider li .shopping_bar button.is-added span
{
	color:transparent;
	 -webkit-transform:translateX(-100%);
	 -moz-transform:translateX(-100%);
	 -ms-transform:translateX(-100%);
	 -o-transform:translateX(-100%);
	 transform:translateX(-100%);
	 -webkit-transition:-webkit-transform 0s;
	 -moz-transition:-moz-transform 0s;
	 transition:transform 0s;
}

#item_menu .item_slider li .shopping_bar button svg
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	-webkit-transform: translateX(50%) translateY(-50%);
	-moz-transform: translateX(50%) translateY(-50%);
	-ms-transform: translateX(50%) translateY(-50%);
	-o-transform: translateX(50%) translateY(-50%);
	transform: translateX(50%) translateY(-50%);
	-webkit-transition: -webkit-transform .3s;
	-moz-transition: -moz-transform .3s;
	transition: transform .3s;
}
#item_menu .item_slider li .shopping_bar button.is-added svg
{
	 -webkit-transform:translateX(-50%) translateY(-50%);
	 -moz-transform:translateX(-50%) translateY(-50%);
	 -ms-transform:translateX(-50%) translateY(-50%);
	 -o-transform:translateX(-50%) translateY(-50%);
	 transform:translateX(-50%) translateY(-50%);
	 -webkit-transition:-webkit-transform 0s;
	 -moz-transition:-moz-transform 0s;
	 transition:transform 0s;
}

#item_menu .item_slider li .shopping_bar .out { font-size: 14px; width: 120px; height: 35px; line-height: 35px; border-radius: 50px; background: #989898; color: #fff; text-align: center; float: right; }

#item_menu .item_slider .slick-slide { transition: 0.2s; }
#item_menu .item_slider .slick-slide > div { box-sizing: border-box; width: 100vw; max-width: 600px; padding: 0 2.5%; }
#item_menu .item_slider .procedure { text-align: center; position: relative; padding: 20px 15px 30px; }
#item_menu .item_slider .procedure h3 { font-size: 14px; color: #fff; text-align: center; font-family: 'Noto-Sans-JP-Medium'; line-height: 170%; padding: 0 0 30px; }
#item_menu .item_slider .procedure .btn a { display: inline-block; background: #16a397; font-size: 14px; color: #fff; font-family: 'Noto-Sans-JP-Medium'; text-align: center; padding: 10px 50px; border-radius: 1000px; }

/* ------------------------------------------------------------ comments */

.comments { width: 94%; z-index: 2; margin: auto;  overflow: auto; position: relative; }
.comments li { margin: 0 0 5px; }
.comments ul { min-height: 161px; height: 25vh; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; margin: 0 0 2px; }
*::-webkit-scrollbar { width: 0; }
.comments .box { display: inline-block; background: rgba(0,0,0,0.7); border-radius: 15px; box-sizing: border-box; color: #fff;  padding: 10px 8px; margin: 1px 0; }
.comments .box.peace { display: block;
	background: linear-gradient(0deg, rgba(0, 91, 187, 0.7), rgba(254, 213, 0, 0.7));
	background: -webkit-linear-gradient(0deg, rgba(0, 91, 187, 0.7), rgba(254, 213, 0, 0.7));
}
.comments .avatar { position: relative; float: left; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; overflow: hidden; box-sizing: border-box; }
.comments .avatar img { width: 100%; height: auto; }
.comments .avatar span { position: absolute; left: 0; top: 0; width: 100%; text-align: center; font-size: 18px; height: 50px; line-height: 25px; }
.comments .text { line-height: 150%; font-size: 13px; width: 100%; padding: 0 0 0 50px; box-sizing: border-box; }
.comments .text span { font-size: 13px; color: #acacac; padding: 0 0 10px; font-family: 'Noto-Sans-JP-Medium'; }
.comments .peace .text span { margin: 0 10px 0 0; padding: 0 30px 0 0;  color: #fff; }
.comments .peace .text p { line-height: 120%; }
.comments .peace .text p:before { position: relative; content: ''; background: url(../images/ukraine_flag.png) no-repeat right center; background-size: 20px auto; 
	margin: 0 10px 0 0;
	display: inline-block;
	width: 20px; 
	height: 15px;
}
.comments .pin .text span { padding: 0 5px 10px 15px;
	background: url(../images/common/icn_pin.png) no-repeat left 3px;
	background-size: 12px auto;
}

.comments .pin .text p { 
	
}

.comments .pin.box { width: 100%; display: none; background: rgba(100,100,0,0.7); }
.comments .pin.show { display: block; }
.comments li.pin .box { display: none; }

/* ------------------------------------------------------------ nav */

#nav { width: 100%; left: 0; padding: 20px 3%; box-sizing: border-box; }
#nav ul {  display: flex; justify-content: flex-end; }
#nav ul li {  position: relative; margin: 0 2%; width: 12vw; height: 12vw; max-width: 80px;  max-height: 80px;  cursor: pointer;  text-align: center;  align-content: center; display: flex; flex-wrap: wrap; justify-content: center;
/*
	background: url(../images/nav/nav_icn_bg.png) no-repeat center center;
	background-size: cover;
*/
	transition: opacity 0.5s;
	border-radius: 50%;
	background: linear-gradient(0deg, rgba(195, 3, 0, 1), rgba(0, 19, 100, 1));
	background: -webkit-linear-gradient(0deg, rgba(195, 3, 0, 1), rgba(0, 19, 100, 1));
}
#nav ul li:first-child { position: absolute; left: 2%; }
#nav ul li.openPeaceChat { left: 17%; position: absolute; }

#nav ul li span { display: block; position: absolute; width: 50%; height: 50%; box-sizing: border-box; padding: 11% 0 0; max-width: 40px; max-height: 40px; border-radius: 50%; color: #fff; background: #e72319; top: -20%; right: -17%; }
#nav ul li:hover { opacity: 0.8; }
#nav ul li img { display: inline-block; width: 60%; height: 60%; margin: auto; }
#nav ul li.disabled { pointer-events: none; opacity: 0.5; }

/* ------------------------------------------------------------ survey */

#survey.open {
	height: 100%;	
}
#survey { max-width: 640px; transition: 0.5s; margin: auto; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 0%; z-index: 99; box-sizing: border-box; padding: 0 4%; overflow: hidden;
	background: url(../images/common/bg2.jpg) no-repeat center center;
	background-size: cover;
}
#survey p.close { position: absolute; z-index: 99; top: 20px; right: 4%; width: 45px; cursor: pointer; }
#survey p.close img { width: 100%; height: auto; }
#survey .logo { text-align: center; padding: 20px 0 30px; } 
#survey .logo img { width: 200px; height: auto; }
#survey .logo span { color: #fff; font-size: 16px; display: block; padding: 10px 0 0; }
#survey .deck { min-height: 200px; height: calc(100vh - 270px); overflow: auto; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
#survey .deck .card { margin: 0 0 15px;  border-radius: 10px; overflow: hidden; } 
#survey .deck h3 { display: flex; background: rgba(255, 255, 255, 0.9); padding: 15px 20px 10px; border-bottom: 1px solid #bbbaba; } 
#survey .deck h3 span { display: block; line-height: 140%; font-size: 14px; }
#survey .deck h3 span:first-child { min-width: 40px; } 
#survey .deck .box { background: rgba(255, 255, 255, 0.9); padding: 5px 20px 15px; } 

#survey ul.choices { display: block; }
#survey ul.choices li { border-radius: 0; position: relative; background: none; width: 100%; color: #fff; margin: 10px 0; } 
#survey ul.choices li p { line-height: 120%; padding: 10px 50px 10px 30px; background: #bababa; width: 100%; border-radius: 40px; box-sizing: border-box; }
#survey ul.choices li p span { height: 16px; line-height: 16px; margin: auto; top: 0; bottom: 0; }
#survey ul.choices li p small { border-radius: 40px; } 
#survey ul.choices li label { flex-wrap: wrap; display: flex; width: 100%; position: relative; align-items: center; }
#survey ul.choices li label input[type="radio"] { position: absolute; z-index: -1; height: 0; width: 0; opacity: 0; }
#survey ul.choices li label .checkmark { display: none; position: relative; }
#survey .active ul.choices li p { width: 100%; }
#survey .active ul.choices li label .checkmark { display: block; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; margin: 0 10px 0 0; } 
#survey .active ul.choices li label p { width: calc(100% - 60px); }
#survey ul.choices li label .checkmark::after { display: none; }
#survey ul.choices li label input:checked ~ .checkmark::after { display: block; }
#survey ul.choices li label input:checked ~ .checkmark { background: #9c1f24; } 
#survey ul.choices li label .checkmark::after { margin: auto; right: 0; bottom: 0; top: 0; left: 0; 
	content: '';
	position: absolute;
	width: 10%;
	height: 32%;
	border: solid #fff;
	border-width: 0 5px 5px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

#survey .btn { padding: 10px 0 0 54px; }
#survey .btn input[type="submit"] { color: #000; background: #fff; padding: 10px 40px; border-radius: 40px; font-weight: bold; vertical-align: middle; }
#survey .btn .time { display: inline-block; vertical-align: middle; padding: 0 0 0 30px; margin: 0 0 0 10px;
	background: url(../images/common/icn_clock_bk.png) no-repeat left center;
	background-size: auto 100%;
}

#share_menu { position: absolute; transition: 0.2s; z-index: -1; bottom: -100%; width: 100%; max-width: 640px; padding: 7% 5% 8%; box-sizing: border-box; transition: 0.5s; z-index: 200; 
	background: rgba(255,255,255,0.93);
	border-radius: 14px 14px 0 0;
}
#share_menu .close { position: absolute; right: 20px; top: 20px; }
#share_menu.open { z-index: 99; bottom: 0; }
#share_menu h3 { font-size: 16px; text-align: center; font-family: 'Noto-Sans-JP-Light'; padding: 0 0 7%; }
#share_menu .close_menu { position: absolute; right: 12px; top: 12px; }
#share_menu ul { font-size: 0; text-align: center; }
#share_menu ul li { display: inline-block; *display: inline; *zoom: 1; margin: 0 15px; }
#nav .like_btn .effect { position: absolute; animation: heart 3s ease; left: 15px; } 

@keyframes heart {
	0% { 
		transform: translateY(0);
		opacity: 1;
	}
	100% { 
		transform: translateY(-150px); 
		opacity: 0;
	}
}

/* ------------------------------------------------------------ peace chat */

#peace_chat.open { top: 0%; }
#peace_chat { transition: 0.5s; z-index: 999; position: fixed; top: 110%; left: 0; width: 100%; height: 100%; }

#peace_chat .close { position: absolute; right: 20px; top: 20px; z-index: 1; cursor: pointer; }
#peace_chat iframe { width: 100%; height: 100%; position: absolute; z-index: 0; }


/* fashon */
#wrapper.fashon #item_menu .item_slider li .img  { aspect-ratio: 2 / 2.6; height: inherit; }
#wrapper.fashon #item_menu .item_slider li .img img { width: 100%; }



/* dento */
#wrapper.crafts #item_menu .item_slider li .img  { aspect-ratio: 1 / 1; height: inherit;}





/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:500px){
	
	#wrapper.fashon #header .logo { width: 160px; }
	
	/* ------------------------------------------------------------ common */

	#video_error p { font-size: 30px; }

	ul.choices { padding: 5px 0 0; }
	ul.choices li p { font-size: 12px; padding: 3px 10px; }
	ul.choices li p::before { height: 14px; }
	ul.choices li span { height: 14px; }
	
	#nav ul li span { font-size: 12px; }

	#lang_select { right: 3%; }
	#lang_select p span { font-size: 14px; line-height: 20px; height: 22px; width: 30px; }

	/* ------------------------------------------------------------ header */
	#header .logo { text-align: left; }
	
	#header .logo span { font-size: 24px; } 
	#header .logo img { width: 70%; }
	#header .logo .dentolive { padding: 0 0 0 7%; }
	#header .logo .hyperlink {  width: 120%; }
	#header .logo .hyperlink p {  font-size: 10px; }
		
			
	#header .status li.like_count { background-size: auto 90%; }	
	#header .status li.comment_count { background-size: auto 90%; }
	#header .status { padding: 10px 3% 15px; }
	#header .status li { font-size: 14px; margin: 0 13px 0 0; }
	#header .status li.live { width: 70px; padding: 5px 0 6px 10px; }
	#header .status .live:after { width: 5px; height: 5px; }
	#header .status li.sound { width: 26px; height: 26px; }
	#header .status li.chat_toggle { width: 22px; height: 22px; }
	#header .vr a { font-size: 12px; }
	#header .vr a img { width: 120px; height: auto; }

	#header .question .q_box { padding: 10px 3% 8px 25px }
	#header .question .q_box .info p.time { font-size: 13px; padding: 3px 10px 6px 27px; background-size: 12px auto; }
	#header .question .q_box .info p.time span { font-size: 14px; }
	#header .question .q_box .info p.text { font-size: 14px; }
	
	/* ------------------------------------------------------------ item_menu */

	#item_menu .item_slider li select { font-size: 12px; }
	#item_menu .item_slider li .shopping_bar button { width: 140px; }
	#item_menu .item_slider li .shopping_bar button span { background-size: 15px; }
	
	
	/* ------------------------------------------------------------ iframe */
	
	#iframe { height: 60%; }
	#iframe .close { font-size: 12px; }

	/* ------------------------------------------------------------ comments */
	
	.comments .box { padding: 8px 10px 8px 8px; }
	.comments .avatar { width: 30px; height: 30px; }
	.comments .text { font-size: 12px; }
	.comments .text span { font-size: 12px; padding: 0 0 5px; }
	.comments .avatar span { height: 40px; font-size: 16px; }
	.comments .pin p.text span { background-size: 12px auto; }
	
	/* ------------------------------------------------------------ survey */
	
	#survey .active ul.choices li p { padding: 8px 40px 8px 25px; }
	#survey .active ul.choices li label p { width: calc(100% - 45px);  }
	#survey .active ul.choices li label .checkmark { width: 30px; height: 30px; } 
	#survey ul.choices li label .checkmark::after { border-width: 0 4px 4px 0; }
	#survey .btn { padding: 5px 0 0 45px; }
	#survey .btn input[type="submit"] { font-size: 14px; padding: 5px 30px; }
	#survey .btn .time { font-size: 14px; padding: 0 0 0 20px; }

}