@charset "utf-8";

/* --------------------------------------------
	スマートフォン用
----------------------------------------------*/
html {
	/*font-size: 10px;*/
	font-size: 62.5%;
}

/* ### 画像 ### */
img	{max-width: 100%;
	height: auto;}

/* 全体 */
html,body {
	background-color: #E7436F;
	/* padding: 0 14px;
	padding: 0; */
}

/* 全体 */

body {
	font-size: 16px;
}

#container {
	/* width: 740px; */
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
}

#main {
	width: 100%;
	/*height: 732px;*/
	/*min-height: 100%;*/
	height: 100%;
	margin: 0;
	padding: 0;
	border-left: none;
	border-right: none;
	text-align: left;
	/*text-align: center;*/
}

#left {
	float: none;
	width: 100%;
	max-width: 516px;
	height: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	/*background-size: cover;*/
	background-size: contain;
	/*background-color: #CCC;*/
}

#right {
	float: none;
	margin: 0 auto;
	width: 100%;
	max-width: 516px;
	padding: 12px 0px 0px 0px;
	/*background-color: #AAA;*/
}

@media screen and (max-width:540px) {
	#right {
		width: auto;
		padding: 12px 16px 0px 16px;
		/*background-color: #DDD;*/
	}
}

/* タイトルエリア */
/* 縦横比の維持 ここから */
#titleArea {
	width: 100%;
	height: 100%;
	height: auto; /* 重要 */
	overflow: hidden;
	position: relative;
	/*background-color: #CCC;*/
}

#titleArea:before {
	content: "";
	display: block;
	padding-top: 50%;
	padding-top: 141.1%; /* titleArea の縦横比 */
}

#titleAreaInner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background-color: #CCC;*/
}
/* 縦横比の維持 ここまで */

p#topBack2 {
	width: 516px;
	width: 100%;
	top: 0px;
	left: 0px;
	top: 0%;
	left: 0%;
}

h1 {
	width: 444px;
	width: 86.05%;
	top: 80px;
	left: 39px;
	top: 10.99%;
	left: 7.56%;
}

p#term {
	width: 281px;
	width: 54.46%;
	top: 331px;
	left: -63px;
	left: -331px;
	top: 45.47%;
	left: -64.15%;
}

p#laputaLink {
	width: 281px;
	width: 54.46%;
	top: 352px;
	left: 290px;
	left: 516px;
	top: 48.35%;
	left: 100%;
}

p#topStill1 {
	width: 104px;
	width: 20.16%;
	top: 31px;
	left: 37px;
	top: 4.26%;
	left: 7.17%;
}

p#topStill2 {
	width: 212px;
	width: 41.09%;
	top: 3px;
	left: 140px;
	top: 0.41%;
	left: 27.13%;
}

p#topStill3 {
	width: 109px;
	width: 21.12%;
	top: 291px;
	left: 362px;
	top: 39.97%;
	left: 70.16%;
}

p#topStill4 {
	width: 163px;
	width: 31.59%;
	top: 612px;
	left: 353px;
	top: 84.07%;
	left: 68.41%;
}

p#topFranky {
	width: 516px;
	width: 100%;
	top: 309px;
	left: 0px;
	top: 42.45%;
	left: 0%;
}

/* インフォエリア */

#infoArea {
	margin: 0 auto;
	width: 100%;
	max-width: 516px;
	padding: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

@media screen and (max-width:540px) {
	#infoArea {
		width: auto;
		padding: 20px 0px 0px 0px;
		padding: 20px 0px 0px 16px;
		padding: 20px 16px 0px 16px;
		padding: 0px 16px 0px 16px;
		/*background-color: #DDD;*/
	}
}

div#mokuji {
	font-size: 93%; /*12px*/
	/*font-size: 100%; 13px*/
	line-height: 140%;
	font-size: 1.2rem; /*12px*/
	font-size: 1.3rem; /*13px*/
	line-height: 1.4;
}

@media screen and (max-width:529px) {
	div#mokuji br:nth-of-type(2) { display: inline; }
}

@media screen and (max-width:354px) {
	div#mokuji br:nth-of-type(1) { display: inline; }
}

div.column1 {
	width: 100%;
	/*width: 95%;*/
	/*margin: 0 auto;*/
	font-size: 1.2rem; /*12px*/
	line-height: 1.5;
}

p#copyright {
	font-size: 1.0rem; /*12px*/
	padding: 2px 0px 0 3px;
	text-align: left;
}

div#sakuhin {
	width: 100%;
	border: solid 1px #000;
	border: solid 1px #BFA473;
	background-color: #CFC9F5;
	background-color: #BFB9E5;
	background-color: #BFAE72;
	background-color: #E7436F;
	background-image: url(../pic/top_column_back.gif) ;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

/* 角丸用 */
div#sakuhin {
	border-radius: 6px; /* CSS3草案 */
	-webkit-border-radius: 6px; /* Safari,Google Chrome用 */
	-moz-border-radius: 6px; /* Firefox用 */
	position: relative;
	behavior: url(js/PIE.htc); /* IE6-9用 */
}

div#sakuhin ul {
	padding: 12px 20px 12px 20px;
}

div#sakuhin li {
	margin-bottom: 1px;
	margin-bottom: 8px;
	font-size: 1.2rem; /*12px*/
	/*font-size: 85%; 11px*/
	line-height: 175%;
	line-height: 180%;
	line-height: 1.2;
	color: #838181;
	color: #FFF;
	color: #333;
	color: #111;
}

div#sakuhin ul#list1 li br { display: none; }
@media screen and (max-width:340px) {
	div#sakuhin ul#list1 li br { display: inline; }
}