/* --------------------- contents --------------------- */
.contents {
	width: 1400px;
	margin: 0 auto;
}

/* --------------------- contents01 --------------------- */
.contents01 {
	position: relative;
	width: 1400px;
	height: 1323px;
	margin: 0 auto;
	z-index: 20;
}

/* title */
.contents01 .title-box {
	position: absolute;
	top: 574px;
	left: 59px;
	width: 508px;
	z-index: 15;
}
.contents01 .title-box .tarout-title {
	margin-bottom: 35px;
}
.contents01 .title-box .tarout-lead {
	padding: 0 0 0 65px;
	font-size: 16px;
	font-weight: bold;
}

.contents01 .fair-box {
	position: absolute;
	background: #ffe566;
	top: 912px;
	left: 42px;
	padding: 20px 30px;
	width: 380px;
	border-radius: 5px;
	z-index: 15;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.contents01 .fair-box .fair-title {
	background: #fff;
	text-align: center;
	margin-bottom: 20px;
	padding: 5px;
	font-size: 24px;
	color: #f39700;
	line-height: 1;
	border-radius: 3px;
}
.contents01 .fair-box .fair-lead {
	font-size: 16px;
	margin-bottom: 15px;
}
.under-line01{
	display: inline;
	font-weight: bold;
	background: linear-gradient(transparent 60%, #fff 60%);
}
.contents01 .fair-box .fair-caution {
	font-size: 13px;
	width: 150px;
}
.contents01 .fair-box .fair-img {
	text-align: right;
	margin: -90px -70px -80px 0;
}

/* main */
.contents01 .main-img01 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}
.contents01 .main-img01 .info-txt{
	position: absolute;
	top:330px;
	left: 1110px;
	width: 225px;
	font-size: 15px;
}
.contents01 .main-img01 .copy01 { position: absolute; top: 28%; left: 42.5%; }
.contents01 .main-img01 .item01 { position: absolute; top: 15.5%; right: 52%; }
.contents01 .main-img01 .item02 { position: absolute; top: 12.5%; right: 20%; }
.contents01 .main-img01 .item03 { position: absolute; top: 39.5%; right: 12%; }
.contents01 .main-img01 .item04 { position: absolute; top: 71.5%; right: 24.5%; }

/* item01 */
.contents01 .item-box01 {
	position: absolute;
	top: -96px;
	left: 42px;
	width: 505px;
	z-index: 20;
}
.contents01 .item-box01 .info-txt{
	padding: 10px 0 0 70px;
	font-size: 15px;
}
.contents01 .item-box01 .item01 { position: absolute; top: 36%; left: 34%; }
.contents01 .item-box01 .item02 { position: absolute; top: 65%; right: 13%; }

/* item02 */
.contents01 .item-box02 {
	position: absolute;
	top: 811px;
	left: 450px;
	width: 460px;
	z-index: 20;
}
.contents01 .item-box02 .info-txt{
	padding: 20px 0 0 25px;
	font-size: 15px;
}
.contents01 .item-box02 .item01 { position: absolute; top: 55%; left: -10%; }
.contents01 .item-box02 .item02 { position: absolute; top: 56%; left: 30%; }
.contents01 .item-box02 .item03 { position: absolute; top: 11%; left: 30%; }

.contents01 .img-box01 {
	position: absolute;
	top: -62px;
	right: 70px;
	z-index: 20;
}

/* --------------------- contents02 --------------------- */
.contents02 {
	width: 1400px;
	margin: 0 auto;
	z-index: 30;
}

/* title */
.contents02 .title-wrap {
	background: #fff;
	padding: 40px 35px;
	overflow: hidden;
}
.contents02 .title-box {
	float: left;
	width: 660px;
	margin-top: 20px;
}
.contents02 .title-box .woolmark-title {
	margin-bottom: 20px;
}
.contents02 .title-box .woolmark-lead {
	font-size: 16px;
	font-weight: bold;
}
.contents02 .fair-box {
	float: right;
	background: #94cfde;
	margin-right: 50px;
	padding: 20px 30px;
	width: 560px;
	border-radius: 5px;
	z-index: 15;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.contents02 .fair-box .fair-title {
	background: #fff;
	text-align: center;
	margin-bottom: 20px;
	padding: 5px;
	font-size: 24px;
	color: #03b8df;
	line-height: 1;
	border-radius: 3px;
}
.contents02 .fair-box .fair-lead {
	font-size: 16px;
	margin-bottom: 15px;
	padding-right: 70px;
}
.contents02 .fair-box .fair-caution {
	font-size: 13px;
	width: 150px;
}
.contents02 .fair-box .fair-img {
	text-align: right;
	margin: -145px -80px 0px 0;
}

.contents02 .contents02-inner {
	position: relative;
	width: 1400px;
	height: 1200px;
	margin: 0 auto;
	z-index: 30;
}

/* main-img01 */
.contents02 .contents02-inner .main-img01 {
	position: absolute;
	top: 0;
	left: 0;
	width: 700px;
	height: 1200px;
	z-index: 10;
}
.contents02 .contents02-inner .main-img01 .info-txt{
	position: absolute;
	top:90px;
	left: 40px;
	width: 240px;
	font-size: 15px;
}
.contents02 .contents02-inner .main-img01 .copy01 { position: absolute; top: 4%; right: 3.5%; }
.contents02 .contents02-inner .main-img01 .item01 { position: absolute; top: 0.8%; right: 25%; }
.contents02 .contents02-inner .main-img01 .item02 { position: absolute; top: 30%; left: 13%; }
.contents02 .contents02-inner .main-img01 .item03 { position: absolute; top: 22.2%; right: 31.5%; }
.contents02 .contents02-inner .main-img01 .item04 { position: absolute; top: 64.2%; right: 15%; }

/* main-img02 */
.contents02 .contents02-inner .main-img02 {
	position: absolute;
	top: 0;
	right: 0;
	width: 700px;
	height: 1200px;
	z-index: 10;
}
.contents02 .contents02-inner .main-img02 .info-txt{
	position: absolute;
	top:945px;
	left: 260px;
	width: 340px;
	font-size: 15px;
}
.contents02 .contents02-inner .main-img02 .copy01 { position: absolute; top: 25.2%; left: 6.2%; }
.contents02 .contents02-inner .main-img02 .item01 { position: absolute; top: -1%; right: 32%; }
.contents02 .contents02-inner .main-img02 .item02 { position: absolute; top: 12%; right: 34%; }
.contents02 .contents02-inner .main-img02 .item03 { position: absolute; top: 29%; left: 21%; }
.contents02 .contents02-inner .main-img02 .item04 { position: absolute; top: 52%; right: 41%; }
.contents02 .contents02-inner .main-img02 .item05 { position: absolute; top: 61%; left: 14%; }
.contents02 .contents02-inner .main-img02 .item06 { position: absolute; top: 48.5%; right: 18.5%; }
.contents02 .contents02-inner .main-img02 .item07 { position: absolute; top: 81.7%; left: 10%; }
.contents02 .contents02-inner .main-img02 .photo {
	position: absolute;
	top: 318px;
	left: 423px;
	z-index: 20;
}

/* ************************************************************************************************ */
@media screen and (max-width: 768px) {
/* --------------------- contents --------------------- */
.contents {
	width: auto;
}

/* --------------------- contents01 --------------------- */
.contents01 {
	position: inherit;
	width: auto;
	height: auto;
}

/* title */
.contents01 .title-box {
	position: inherit;
	top: inherit;
	left: inherit;
	width: auto;
	text-align: center;
}
.contents01 .title-box .tarout-title {
	margin: 3% 5% 3% 1%;
}
.contents01 .title-box .tarout-lead {
	padding: 1% 4% 3%;
	font-size: 14px;
	text-align: left;
}

.contents01 .fair-box {
	position: inherit;
	top: inherit;
	left: inherit;
	padding: 3% 4%;
	width: auto;
	border-radius: 0;
}
.contents01 .fair-box .fair-title {
	background: #fff;
	margin-bottom: 2%;
	padding: 1%;
	font-size: 20px;
}
.contents01 .fair-box .fair-lead {
	font-size: 14px;
	margin-bottom: 1.5%;
}
.contents01 .fair-box .fair-caution {
	font-size: 13px;
	width: auto;
}
.contents01 .fair-box .fair-img {
	text-align: center;
	margin: -4vw 0 0 0;
}

/* main */
.contents01 .main-img01 {
	position: inherit;
	top: inherit;
	left: inherit;
	z-index: 10;
	margin: 0 0 0 -47vw;
}
.contents01 .main-img01-inner {
	position: relative;
}
.contents01 .main-img01 .info-txt{
	position: inherit;
	top:inherit;
	left: inherit;
	width: inherit;
	font-size: 14px;
	padding: 2% 4% 2% 51vw;
}
.contents01 .main-img01 .copy01 { position: absolute; top: 35%; left: 39.5%; }
.contents01 .main-img01 .copy01 img { width: 10vw; }
.contents01 .main-img01 .item01 { position: absolute; top: 20.5%; right: 55.5%; }
.contents01 .main-img01 .item02 { position: absolute; top: 15.5%; right: 23%; }
.contents01 .main-img01 .item03 { position: absolute; top: 43.5%; right: 15%; }
.contents01 .main-img01 .item04 { position: absolute; top: 74.5%; right: 28%; }

/* item01 */
.contents01 .item-box01 {
	position: inherit;
	top: inherit;
	left: inherit;
	width: auto;
	max-width: 505px;
	margin: -3vw auto 0;
	padding: 2% 4%;
}
.contents01 .item-box01-inner {
	position: relative;
}
.contents01 .item-box01 .info-txt{
	padding: 2% 0 0 0;
	font-size: 14px;
}
.contents01 .item-box01 .item01 { position: absolute; top: 51%; left: 42%; }
.contents01 .item-box01 .item02 { position: absolute; top: 87%; right: 23.5%; }

/* item02 */
.contents01 .item-box02 {
	position: inherit;
	top: inherit;
	left: inherit;
	width: auto;
	max-width: 460px;
	margin: 0 auto;
	padding: 2% 4%;
}
.contents01 .item-box02-inner {
	position: relative;
}
.contents01 .item-box02 .info-txt{
	padding: 2% 0 0 0;
	font-size: 14px;
}
.contents01 .item-box02 .item01 { position: absolute; top: 81%; left: 1%; }
.contents01 .item-box02 .item02 { position: absolute; top: 82%; left: 41%; }
.contents01 .item-box02 .item03 { position: absolute; top: 26%; left: 42%; }

.contents01 .img-box01 {
	position: inherit;
	top: inherit;
	right: inherit;
	text-align: center;
	width: 25vw;
	margin: 0 auto 2%;
}

/* --------------------- contents02 --------------------- */
.contents02 {
	width: auto;
}

/* title */
.contents02 .title-wrap {
	padding: 0
}
.contents02 .title-box {
	float: none;
	width: auto;
	margin-top: 0;
}
.contents02 .title-box .woolmark-title {
	margin: 3% 5% 3% 1%;
}
.contents02 .title-box .woolmark-lead {
	padding: 1% 4% 3%;
	font-size: 14px;
	text-align: left;
}
.contents02 .fair-box {
	float: none;
	margin-right: 0;
	padding: 3% 4%;
	width: auto;
	border-radius: 0;
}
.contents02 .fair-box .fair-title {
	background: #fff;
	margin-bottom: 2%;
	padding: 1%;
	font-size: 20px;
}
.contents02 .fair-box .fair-lead {
	font-size: 14px;
	margin-bottom: 1.5%;
	padding-right: 0;
}
.contents02 .fair-box .fair-caution {
	font-size: 13px;
	width: auto;
}
.contents02 .fair-box .fair-img {
	text-align: center;
	margin: -5vw 0 0 0;
}

.contents02 .contents02-inner {
	position: inherit;
	width: auto;
	height: auto;
}

/* main-img01 */
.contents02 .contents02-inner .main-img01 {
	position: inherit;
	top: inherit;
	left: inherit;
	width: auto;
	height: auto;
}
.contents02 .contents02-inner .main-img01-inner {
	position: relative;
}
.contents02 .contents02-inner .main-img01 img {
	width: 100%;
}
.contents02 .contents02-inner .main-img01 .info-txt{
	position: inherit;
	top:inherit;
	left: inherit;
	width: inherit;
	font-size: 14px;
	padding: 2% 4%;
}
.contents02 .contents02-inner .main-img01 .copy01 { position: absolute; top: 3%; right: 5%; }
.contents02 .contents02-inner .main-img01 .copy01 img { width: 12vw }
.contents02 .contents02-inner .main-img01 .item01 { position: absolute; top: 4%; right: 34%; }
.contents02 .contents02-inner .main-img01 .item02 { position: absolute; top: 33%; left: 21.5%; }
.contents02 .contents02-inner .main-img01 .item03 { position: absolute; top: 26.7%; right: 39.5%; }
.contents02 .contents02-inner .main-img01 .item04 { position: absolute; top: 67.8%; right: 22.5%; }

/* main-img02 */
.contents02 .contents02-inner .main-img02 {
	position: inherit;
	top: inherit;
	left: inherit;
	width: auto;
	height: auto;
}
.contents02 .contents02-inner .main-img02-inner {
	position: relative;
}
.contents02 .contents02-inner .main-img02 img {
	width: 100%;
}
.contents02 .contents02-inner .main-img02 .info-txt{
	position: inherit;
	top:inherit;
	left: inherit;
	width: inherit;
	font-size: 14px;
	padding: 2% 4% 4%;
}
.contents02 .contents02-inner .main-img02 .copy01 { position: absolute; top: 24.2%; left: 8.2%; }
.contents02 .contents02-inner .main-img02 .copy01 img { width: 13vw }
.contents02 .contents02-inner .main-img02 .item01 { position: absolute; top: 3.4%; right: 41.2%; }
.contents02 .contents02-inner .main-img02 .item02 { position: absolute; top: 16.2%; right: 42.5%; }
.contents02 .contents02-inner .main-img02 .item03 { position: absolute; top: 33%; left: 29%; }
.contents02 .contents02-inner .main-img02 .item04 { position: absolute; top: 55.9%; right: 48%; }
.contents02 .contents02-inner .main-img02 .item05 { position: absolute; top: 66%; left: 21.2%; }
.contents02 .contents02-inner .main-img02 .item06 { position: absolute; top: 52.8%; right: 27%; }
.contents02 .contents02-inner .main-img02 .item07 { position: absolute; top: 86.2%; left: 18%; }
.contents02 .contents02-inner .main-img02 .photo {
	position: absolute;
	top: 26.5%;
	left: inherit;
	right: 6%;
}
.contents02 .contents02-inner .main-img02 .photo img {
	width: 33vw;
}
}

/* ************************************************************************************************ */
@media screen and (max-width: 480px) {
/* --------------------- contents01 --------------------- */
/* main */
.contents01 .main-img01 .copy01 { position: absolute; top: 35%; left: 39.5%; }
.contents01 .main-img01 .copy01 img { width: 13vw; }
.contents01 .main-img01 .item01 { position: absolute; top: 19.6%; right: 55.3%; }
.contents01 .main-img01 .item02 { position: absolute; top: 15.5%; right: 22%; }
.contents01 .main-img01 .item03 { position: absolute; top: 40.5%; right: 14%; }
.contents01 .main-img01 .item04 { position: absolute; top: 73.5%; right: 26%; }

/* item01 */
.contents01 .item-box01 .item01 { position: absolute; top: 52%; left: 42%; }
.contents01 .item-box01 .item02 { position: absolute; top: 87.5%; right: 22.5%; }

/* item02 */
.contents01 .item-box02 .item01 { position: absolute; top: 81%; left: 1%; }
.contents01 .item-box02 .item02 { position: absolute; top: 82%; left: 41%; }
.contents01 .item-box02 .item03 { position: absolute; top: 26%; left: 41%; }

/* --------------------- contents02 --------------------- */
.contents02 .fair-box .fair-img {
	text-align: center;
	margin: 1vw 0 0 0;
}

/* main-img01 */
.contents02 .contents02-inner .main-img01 .copy01 { position: absolute; top: 3%; right: 3%; }
.contents02 .contents02-inner .main-img01 .copy01 img { width: 14vw }
.contents02 .contents02-inner .main-img01 .item01 { position: absolute; top: 2%; right: 31%; }
.contents02 .contents02-inner .main-img01 .item02 { position: absolute; top: 33.5%; left: 18.5%; }
.contents02 .contents02-inner .main-img01 .item03 { position: absolute; top: 24.5%; right: 37.6%; }
.contents02 .contents02-inner .main-img01 .item04 { position: absolute; top: 66.8%; right: 18.8%; }

/* main-img02 */
.contents02 .contents02-inner .main-img02 .copy01 { position: absolute; top: 25.2%; left: 6.2%; }
.contents02 .contents02-inner .main-img02 .copy01 img { width: 15vw }
.contents02 .contents02-inner .main-img02 .item01 { position: absolute; top: 1.2%; right: 38.2%; }
.contents02 .contents02-inner .main-img02 .item02 { position: absolute; top: 15.2%; right: 38.5%; }
.contents02 .contents02-inner .main-img02 .item03 { position: absolute; top: 32%; left: 25%; }
.contents02 .contents02-inner .main-img02 .item04 { position: absolute; top: 55.4%; right: 47%; }
.contents02 .contents02-inner .main-img02 .item05 { position: absolute; top: 64%; left: 18.2%; }
.contents02 .contents02-inner .main-img02 .item06 { position: absolute; top: 52.2%; right: 22.5%; }
.contents02 .contents02-inner .main-img02 .item07 { position: absolute; top: 84.5%; left: 14%; }
.contents02 .contents02-inner .main-img02 .photo {
	position: absolute;
	top: 27.1%;
	left: inherit;
	right: 3%;
}
.contents02 .contents02-inner .main-img02 .photo img {
	width: 36vw;
}
}


