@charset "utf-8";/* CSS Document */

.wrap {
    width: 854px;
    margin: 0 auto;
}
.wrap h2 {
    font-size: 25px;
    border-left: 5px solid #e33d52;
    padding: 5px 0 1px 15px;
    margin: 30px auto;
}
.top-image{
    margin: 30px 0;
}

.wrap h3 {
	color: #FFFFFF;
	font-size: 16px;
	font-weight: normal;
	margin: 10px 0 auto;
	padding: 7px 20px 7px 20px;
	border: 0;
    list-style: none;
	background-color:#000;
}/*�ۑ�y�[�W�ph3�ݒ�*/

.themeindex {
	margin:0;
	padding:0;
}
.themeindex ul {
	margin:20px 0 auto;
	padding:0;
	width:100%;
}
.themeindex ul li {
	margin:20px 0 auto;
	width:100%;
	height:60px;
	border-bottom:#000 solid 1px;
}

.themetitle {
	height:60px;
	padding:18px 0 15px 20px;
	font-size:18px;
	font-weight: normal;
	float:left;
}
.themetitle a:link { color:#333333; text-decoration:none;}
.themetitle a:visited { color:#333333; text-decoration:none;}
.themetitle a:hover { color:#C00; text-decoration:none;}

.subh3 {
	margin:15px 0 25px 0;
	padding:0;
}
.subh32 {
	margin:15px 0 0 0;
	padding:0;
}
.subtheme {
	margin:0 0 10px 0;
	padding:0 25px 0 25px;
}
.themesol {
	max-width:100%;
	height:162px;
	margin:20px 0 0 0;
	background-image:url(../images/theme_solution.png);
	background-repeat:no-repeat;
	background-position:0 0;
	padding:90px 25px 0 25px;
}
.themesollong {
	max-width:100%;
	height:204px;
	margin:20px 0 0 0;
	background-image:url(../images/theme_solution_3.png);
	background-repeat:no-repeat;
	background-position:0 0;
	padding:90px 25px 0 25px;
}
.themesosollong {
	max-width:100%;
	height:236px;
	margin:20px 0 0 0;
	background-image:url(../images/theme_solution_6.png);
	background-repeat:no-repeat;
	background-position:0 0;
	padding:90px 25px 0 25px;
}
.themearea {
	width:100%;
	height:auto;
	margin:40px 0 60px 0;
	padding:0;
	border:#000 solid 1px;
}
.themearea .areatitle {
	color: #FFFFFF;
	font-size: 16px;
	font-weight: normal;
	margin: 0;
	padding: 7px 15px 7px 15px;
	border: 0;
    list-style: none;
	background-color:#666;
}
.themearea ul {
	margin:20px 0 20px 0;
}
.themearea ul li {
	margin:12px 0 12px 0;
	border:none;
}
.themelinknum {
	width:10%;
	height:auto;
	padding:0 0 0 20px;
	float:left;
}
.themelinka {
	width:86%;
	height:auto;
	padding:0;
	float:right;
}
.themelinka a:link { color:#333333; text-decoration:none;}
.themelinka a:visited { color:#333333; text-decoration:none;}
.themelinka a:hover { color:#C00; text-decoration:none;}

img.left {
	margin:0;
	padding:0;
	float:left;
}
img.right {
	margin:0;
	padding:18px 0 0 0;
	float:right;
}

.the-container p{
    font-size: 14px;
    padding-bottom: 25px;
}
.the-pickup-2 a:hover, .the-pickup a:hover {
    opacity:0.7;
    -moz-opacity:0.7;
    filter:alpha(opacity = 70);
}

.des{
	padding:10px 30px 10px 30px;
	margin:20px auto 40px auto;
}

.tablearea{
	margin: 20px 0px 50px 0px;
	color:#1C1C1C;
	text-align:center;
}
tr{ height:50px;}
td{
	color:#5A5A5A;
}

.graybg{background-color:#CCC;}
.redbg{background-color:#FF8C8C;}

@media screen and (min-width: 801px){
.pankuzu {
    font-size: 10px;
    padding: 10px;
}
.theme {
    background-color: #ffffff;
    padding-bottom: 20px;
}
.the-container {
    padding-bottom: 30px;
}
.the-images li {
    float: left;
}
.arrowd {
	display:none;
}
.the-pickup {
    float: left;
    width: 420px;
    padding: 2% 0 2% 0;
    margin-bottom: 1.5%;
}
.the-pickup-2 {
    float: right;
    width: 420px;
    padding: 2% 0px 2% 0;
    margin-bottom: 1.5%;
}
h4{
	color: #000;
    font-size: 1.5em;
	font-weight: normal;
	width:350px;
	height:65px;
    margin: 2% 4% 0 0;
	padding: 4% 5% 1% 19%;
	border: none;
    list-style: none;
	line-height:120%;
}
h4.fashion {
	background-image:url(../images/themetop_fashion.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
}
h4.food {
	background-image:url(../images/themetop_foods.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
}
h4.sports {
	background-image:url(../images/themetop_sports.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
}
h4.interior {
	background-image:url(../images/themetop_interior.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
}
h4.petdiy {
	background-image:url(../images/themetop_petdiy.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
}
.the-content {
    background-color: #ffffff;
    width: 420px;
    padding: 2% 0 2% 0;
    margin-bottom: 2%;
}
.the-content ul li{
    padding-left: 29px;
}
.the-content li {
    font-size: 1.2em;
    margin-bottom: 3%;
    padding-top: 3%;
	line-height:120%;
	background-image:url(../images/arrow.jpg);
	background-position:5px 12px;
	background-repeat:no-repeat;
}
.the-content li img{
    margin-top: -1%;
    padding-right: 2%;
}

.supplement{
	width:100%;
	margin:5% auto 5% auto;
	padding:0;
	overflow:hidden;
}
.supplement dl{
	width:93%;
	background-color:#fff;
	padding:3% 3% 0 3%;
	margin:0 auto;
	border: 1px solid #666;
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}
.supplement dl dt{
	text-align:left;
	font-size:16px;
	margin-bottom:1.5%;
	width:100%;
	line-height:160%;
}
.supplement dl dd{
	text-align:left;
	margin-bottom:3%;
	width:100%;
	line-height:160%;
}

}

@media screen and (max-width:800px) and (min-width: 0px) {
.wrap {
    width: 80%;
    margin: 0 auto;
}
.wrap h2 {
    margin: 80px 10px 30px 10px;
	line-height:28px;
}

img {
    max-width : 100%;
}
.pankuzu {
    display: none;
}
.theme {
    background-color: #ffffff;
    padding-bottom: 20px;
}
.the-container {
    padding-bottom: 30px;
}

.subtheme {
	margin:20px 0 10px 0;
	padding:0 20px 0 20px;
}
.themesol {
	height:220px;
	margin:15px 0 0 0;
	background-image:url(../images/theme_solution_1.png);
	padding:90px 20px 0 20px;
	max-width:90%;
}
.themesollong {
	height:294px;
	margin:15px 0 0 0;
	background-image:url(../images/theme_solution_4.png);
	background-repeat:no-repeat;
	background-position:0 0;
	padding:90px 20px 0 20px;
	max-width:90%;
}
.themesosollong {
	height:342px;
	margin:15px 0 0 0;
	background-image:url(../images/theme_solution_7.png);
	background-repeat:no-repeat;
	background-position:0 0;
	padding:90px 20px 0 20px;
	max-width:90%;
}

.themetitle {
	width:70%;
	height:48px;
	padding:17px 0 5px 10px;
	font-size:14px;
	font-weight: normal;
	float:left;
}

.themearea ul li {
	margin:10px 0 10px 0;
	width:100%;
	height:auto;
	font-size:14px;
	font-weight: normal;
	border:none;
}
.themelinknum {
	width:13%;
	height:auto;
	padding:0 0 0 9px;
	float:left;
}
.themelinka {
	width:83%;
	height:auto;
	padding:0;
	float:right;
}
.arrowr {
    display: none;
}
.arrowd {
	display:block;
    height: 14px;
}

.the-pickup {
    padding: 2% 0 2% 0;
    margin-bottom: 1.5%;
}
.the-pickup-2 {
    padding: 2% 0px 2% 0;
    margin-bottom: 1.5%;
}
h4{
	color: #000;
    font-size: 1.3em;
	font-weight: normal;
	width:350px;
	height:50px;
    margin: 2% 4% 0 0;
	padding: 4% 5% 1% 19%;
	border: 0;
    list-style: none;
	line-height:120%;
}
h4.fashion {
	background-image:url(../images/themetop_fashion.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
	background-size:80%;
}
h4.food {
	background-image:url(../images/themetop_foods.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
	background-size:80%;
}
h4.sports {
	background-image:url(../images/themetop_sports.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
	background-size:80%;
}
h4.interior {
	background-image:url(../images/themetop_interior.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
	background-size:80%;
}
h4.petdiy {
	background-image:url(../images/themetop_petdiy.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
	background-size:80%;
}
.the-content {
    background-color: #ffffff;
    padding: 2% 2% 2% 0;
    margin-bottom: 2%;
}
.the-content ul li{
    padding-left: 29px;
}
.the-content li {
    font-size: 1.1em;
    margin-bottom: 3%;
    padding-top: 3%;
	line-height:120%;
	background-image:url(../images/arrow.jpg);
	background-position:5px 14px;
	background-repeat:no-repeat;
}
.the-content li img{
    margin-top: -1%;
    padding-right: 2%;
}

.des{
	padding:10px 30px 10px 30px;
	margin:20px auto 40px auto;
}
.tablearea{
	margin: 20px 0px 50px 0px;
}

.supplement{
	width:100%;
	margin:5% auto 5% auto;
	padding:0;
	overflow:hidden;
}
.supplement dl{
	width:93%;
	background-color:#fff;
	padding:3% 3% 0 3%;
	margin:0 auto;
	border: 1px solid #666;
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}
.supplement dl dt{
	text-align:left;
	font-size:16px;
	margin-bottom:1.5%;
	width:100%;
	line-height:160%;
}
.supplement dl dd{
	text-align:left;
	margin-bottom:3%;
	width:100%;
	line-height:160%;
}

}

@media screen and (max-width:430px) and (min-width: 0px) {
.wrap h2 {
    font-size: 23px;
    margin: 70px 10px 30px 10px;
}
img {
    max-width : 100%;
}
.subtheme {
	margin:15px 0 10px 0;
	padding:0 10px 0 10px;
	font-size:12px;
}

.themesol {
	height:270px;
	margin:10px 0 -40px 0;
	background-image:url(../images/theme_solution_2.png);
	overflow:hidden;
	padding:100px 10px 0 10px;
}
.themesollong {
	height:384px;
	margin:10px 0 -40px 0;
	background-image:url(../images/theme_solution_5.png);
	overflow:hidden;
	padding:100px 10px 0 10px;
}
.themesosollong {
	height:448px;
	margin:10px 0 -40px 0;
	background-image:url(../images/theme_solution_8.png);
	overflow:hidden;
	padding:100px 10px 0 10px;
}

.themetitle {
	width:60%;
	height:28px;
	padding:0 0 3px 8px;
	font-size:12px;
	font-weight: normal;
	float:left;
}

.themearea ul li {
	margin:10px 0 10px 0;
	width:100%;
	height:auto;
	font-size:12px;
	font-weight: normal;
	border:none;
}
.themelinknum {
	width:17%;
	height:auto;
	padding:0 0 0 5px;
	float:left;
}
.themelinka {
	width:81%;
	height:auto;
	padding:0;
	float:right;
}
h4{
	color: #000;
    font-size: 0.9em;
	font-weight: normal;
	width:86%;
    margin: 2% 4% 0 0;
	padding: 4% 5% 1% 19%;
	border: 0;
    list-style: none;
	line-height:120%;
	overflow:hidden;
}
h4.fashion {background-size:93%;}
h4.food {background-size:93%;}
h4.sports {background-size:93%;}
h4.interior {background-size:93%;}
h4.petdiy {background-size:93%;}

.the-content ul li{
    padding-left: 26px;
}

.the-content li {
    font-size: 0.9em;
    margin-bottom: 3%;
    padding-top: 3%;
	line-height:120%;
	background-image:url(../images/arrow.jpg);
	background-position:2px 5px;
	background-repeat:no-repeat;
}

.des{
	padding:10px;
	margin:15px 0 auto;
	font-size:12px;
}
.tablearea{
	margin: 20px 0px 50px 0px;
	font-size:12px;
}

.supplement{
	width:100%;
	margin:5% auto 5% auto;
	padding:0;
	overflow:hidden;
}
.supplement dl{
	width:91%;
	background-color:#fff;
	padding:6% 4% 0 4%;
	margin:0 auto;
	border: 1px solid #666;
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}
.supplement dl dt{
	text-align:left;
	font-size:16px;
	margin-bottom:4%;
	width:100%;
	line-height:160%;
}
.supplement dl dd{
	text-align:left;
	margin-bottom:6%;
	width:100%;
	line-height:160%;
}

}