@charset "UTF-8";

#title{
background-image : url(img/bg.jpg);
background-repeat : no-repeat;
margin-right : auto;
width : 750px;
height : 741px;
margin-left : auto;
}

#title-in{
width : 100%;
height : 100%;
line-height : 1.6em;
text-align : left;
}

#title-photo{
width : 750px;
background-repeat : no-repeat;
background-position : right top;
height : 741px;
background-image : url(img/top2.jpg);
}

div{
padding : 0px;margin : 0px;
}

p{
padding : 0px;margin : 0px;
}

#menu{
width : 180px;
float : left;
margin : 20px 10px;
}

#menu2{
width : 170px;
float : left;
margin-right : 20px;
padding-right : 10px;
margin-top : 50px;
left : -1px;
}

li{
padding-bottom : 4px;
width : 170px;
}

#footer{
width : 100%;
color : #ffffff;
background-color : #4c89c0;
text-align : center;
padding-top : 20px;
padding-bottom : 20px;
margin-top : 30px;
clear : both;
margin-bottom : 0px;
font-size : 0.8em;
line-height : 1.6em;
height : auto;
}

#container{
padding : 0px;
width : 100%;
height : 100%;
}

#top-title{
padding-bottom : 30px;
margin-left : auto;
margin-right : auto;
width : 750px;
height : 100px;
background-image : url(img/bg-s.jpg);
background-repeat : no-repeat;
}

#main{
padding-bottom : 30px;
margin-left : auto;
margin-right : auto;
width : 750px;
text-align : center;
}

ul{
width : 180px;
position : relative;
}

.list{
width : 500px;
float : right;
line-height : 1.8em;
text-align : left;
padding-top : 40px;
clear : right;
padding-left : 50px;
}
.list2{
width : 500px;
float : right;
line-height : 1.8em;
text-align : center;
padding-top : 40px;
clear : right;
padding-left : 50px;
}

.list-copy{
width : 100px;
float : left;
}

.list-copy2{
width : 110px;
float : left;
}

.list-name{
float : right;
width : 400px;
}
.list-name2{
float : right;
width : 390px;
}

.list-box{
width : 100%;
clear : both;
padding-bottom : 15px;
line-height : 1.2em;
text-align : left;
margin-bottom : 15px;
}

.lead{
font-size : 1.1em;
font-weight : bold;
padding-bottom : 15px;
padding-top : 20px;
}

.mark{
font-weight : bold;
color : #9f94e4;
}

.cap{
font-size : 0.8em;
}

.photo{
text-align : center;
padding-top : 20px;
width : 400px;
padding-bottom : 30px;
}

.product-name{
line-height : 1.9em;
background-image : url(img/ph-6.png);
background-position : right bottom;
background-repeat : no-repeat;
}

.link-logo{
float : left;
width : 235px;
text-align : center;
}

.link-name{
text-align : center;
width : 235px;
line-height : 2em;
float : right;
}

.link-banna{
width : 470px;
margin-left : auto;
margin-right : auto;
padding-bottom : 30px;
margin-top : 30px;
clear : both;
}


@media screen and (max-width: 568px) {
#title{
width : 100%;
height : auto;
background-image : url(img/bg0.jpg);
background-repeat : no-repeat;
background-position : center top;
}
#title-photo{
width : 100%;
height : 791px;
background-image : url(img/top2.jpg);
background-repeat : no-repeat;
background-position : right bottom;
}

#menu{
width : 100%;
float : none;
}

#menu2{
width : 100%;
float : none;
margin-right : 0px;
margin-top : 0px;
}

.list{
width : 100%;
float : none;
}
.list2{
width : 100%;
float : none;
}
#top-title{
width : 100%;
padding-bottom : 0px;
}

.image-auto{
width : 100%;
height : auto;
}

ul{
width : 100%;
display: flex;
flex-wrap: wrap;
}

li{
line-height : 1.5em;
list-style: none;
}
.list-name{
float : right;
width : 400px;
}
.list-name2{
float : right;
width : 390px;
}
#main{
width : 100%;
}
.product-name{
background-image :none;
}

}