@charset "UFT-8"
@import url("smoothness/jquery-ui-1.8.4.custom.css");


body {
	width: 100%; 
	max-width: 1200px;
	margin-top: 0;
	margin-left: auto;
    margin-right: auto;
	font-family: YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', serif;
	color: #778899;
	word-wrap: break-word;
    font-feature-settings: 'plat';
}

img {
	width: 100%;
	
}


header {
	text-align: center;
}

header img {
	margin: 0 auto;
	width: 120px;
}

@media screen and (max-width : 780px ){
header img {
	width: 80px;
}
}


.hr1 {
	width: 100%;
	boeder: 1px #778899 solid;
	margin: 10px 0;
}


.main_img {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 60px;
}


.main_img p {
	width: 80%;
	text-align: center;
	margin: 20px auto;
	font-size: 16px;
}

@media screen and (max-width : 780px ){
.main_img p {
	width: 90%;
	text-align: left;
	font-size: 14px;
}
}


.title {
	width: 20%;
	margin: 8em auto 1.5em auto;
}

@media screen and (max-width : 780px ){
.title {
	width: 40%;
	margin: 7em auto 0.8em auto;
}
}


.order_btn {
	width: 60%;
	margin: 3em auto 8em auto;
}

@media screen and (max-width : 780px ){
.order_btn {
	width: 95%;
	margin: 2em auto 6em auto;
}
}


.sub_img {
	width: 60%;
	margin-top: 80px;
	margin-right: auto;
	margin-bottom: 60px;
	margin-left: auto;
}


a {
	text-decoration: none;
	color: #778899;
}


a:hover {
	opacity: 0.8;
	transition: 0.3s;
}


.sns_icon {
	display: flex;
	flex-diewction: row;
	flex-wrap: nowrap;
	justify-content: center;
	padding: 0;
}


.sns_icon li {
	list-style: none;
	width: 50px;
	margin: 10px;
}


.footer_menu {
	display: flex;
	flex-diewction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;

}

.footer_menu li {
	list-style: none;
	margin: 10px;
}


footer p {
	text-align: center;
}


/*  商品一覧部分
-------------------------------------------------------------*/

.container {
	box-sizing: border-box;
    width: 100%;
    height: auto;
    border: 0;
    vertical-align: bottom;
    padding: 2em 2em;
    margin: 2em 2em;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width : 780px ){
 
.container {
    padding: 1em 1em;
    margin: 1em 1em;
    margin-left: auto;
    margin-right: auto;

} 
}


.items{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


.item{
	box-sizing: border-box;
    margin: 0 0 0 0x;
	padding: 0.5em;
    width: calc(50% - 0px / 2);
}

.item:nth-child(2n){
	margin-right: 0;
}

@media screen and (max-width : 780px ){
 
.item{
	padding: 0.3em;
	width: calc(100% - 0px / 1);
}

.item:nth-child(1n){
	margin-right:0;
}
}


.look_books{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


.look_book_1{
	box-sizing: border-box;
	margin:　0 0 0 0;
	padding: 0 10px 5px 10px;
	width:calc(100% - 0px / 1);
}

.look_book_1:nth-child(1n){
	margin: 0;
}

@media screen and (max-width : 780px ){
 
.look_book_1{
	width: calc(100% - 0px / 1);
}

.look_book_1:nth-child(1n){
	margin: 0;
}
}


.look_book_2-left {
	box-sizing: border-box;
    margin: 0 0 0 0;
	padding: 0 5px 5px 10px;
    width: calc(50% - 0px / 2);
}

.look_book_2:nth-child(2n){
	margin-right:0;
}

@media screen and (max-width : 780px ){
 
.look_book_2-left {
	box-sizing: border-box;
    width: calc(50% - 0px / 2);
}

.look_book_2:nth-child(2n){
	margin-right:0;
}
}


.look_book_2-right {
	box-sizing: border-box;
    margin: 0 0 0 0x;
	padding: 0 10px 5px 5px;
    width: calc(50% - 0px / 2);
}

.look_book_2:nth-child(2n){
	margin-right:0;
}

@media screen and (max-width : 780px ){
 
.look_book_2-right {
	box-sizing: border-box;
    width: calc(50% - 0px / 2);
}

.look_book_2:nth-child(2n){
	margin-right:0;
}
}