@charset "utf-8";

*{
    box-sizing:border-box;
}

a:hover img {
    opacity: 1;
}

#main{
	font-size:8px;
}

h3{
	font-size:8px;
}

h3.winename{
    font-size:11px;
}

.data dl,
.data dl.prd{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    font-size:9px;
    margin-top:7px;
}
.data dt{
    flex-basis: 22%;
    padding:1px;
    margin-bottom:3px;
}
.data dd{
    flex-basis: 78%;
    padding:1px 1px 1px 5px;
    margin-bottom:3px;
}
.data dl.prd dt{
    flex-basis: 13%;
    padding:1px;
    margin-bottom:3px;
}
.data dl.prd dd{
    flex-basis: 87%;
    padding:1px 1px 1px 5px;
    margin-bottom:3px;
}


#id_list{
	display:none;
}

@page{
	size: 180mm 126mm;
    margin: 0mm;
}

#main .course_ttl{
	width:100%;
	height:400px;
	background:#f3f5f5;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:15mm!important;
}

#main.select{
	width: 180.4mm;
	height: auto;
	box-sizing: border-box;
	padding: 0;
	border:solid 1px skyblue;
	margin:0px auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	padding-top:0;
}

#manual{
	width: 210mm;
	margin:auto;
	color:#4b9aba;
	margin-bottom:40px;
}

@media print {
	#main.select{
		border:none;
		margin:0;
	}
	#manual{
		display:none;
	}
}

#main p{
}

#main .comment{
	display:block;
	padding:10px;
	margin:10px 0;
	background:#F8F5EA;
	border:solid 1px #f1edde;
}

#main p.info1{
	padding-top:6px;
}

#main.rep p.info1{
	padding-top:0;
}

#main .comment h3{
	color:#807c6b;
	padding-bottom:5px;
}

#main .dark_gray{
	color:#444;
}

#main a{
	text-decoration:underline;
}

#main h2{
    margin:0;
	margin-top:20px;
	margin-bottom:15px;
    font-size:24px;
}

#main.rep h2{
	display:block;
	width:100px;
	color:#fff;
	font-size:12px;
	text-align:center;
	background:#222;
	border-radius:9px 0;
	margin:0;
	margin-bottom:10px;
}

#main .login{
	padding:10px 0;
}

.eachTitle{
	position:relative;
	padding-bottom:8px;
}
.eachTitle_prd{
	position:relative;
	padding-bottom:8px;
    width:90%;
}

p.item_cd{
	display:inline-block;
	color:#757264;
	margin-bottom:4px;
	padding:1px 8px;
	border-radius:13px;
	position:absolute;
	top:10px;
	background:#f7f5ee;
}

p.item_cd_prd{
	display:inline-block;
	color:#757264;
	margin-bottom:4px;
	padding:1px 8px;
	border-radius:13px;
	position:absolute;
	top:-20px;
	background:#f7f5ee;
}



p.item_cd:before,
p.item_cd_prd:before{
	content:"商品コード：";
}

.rep p.item_cd{
	top:0;
	margin-left:10px;
}

#item_list {
	display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 15mm 7mm;
    width: auto;
	margin-bottom:0px;
}

.rep #item_list {
	grid-gap: 3mm 7mm;
}

#item_list .prd img{
	display:block;
	width:300px;
}

#item_list .prd>div.ttl{
	display:flex;
	justify-content:center;
	margin-bottom:40px;
	
}

#item_list .prd{
	order:1;
}

#item_list .imgFixed{
	order:2;
}

#item_list .prd .basic{
	text-align:left;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:0 25px;
}

#item_list .prd .parag{
	margin:20px 0;
}

#item_list .prd .parag.one{
	display:block;
}

#item_list .prd .parag.two{
	display:block;
}

#item_list .prd .img2{
	float:left;
	margin-bottom:15px;
}

#item_list .prd .img3{
	float:right;
	margin-bottom:15px;
}

#item_list .prd .info{
	display:block;
	white-space:strict;
}

#item_list .prd .info:first-letter{
	font-size:1.7em
}

#item_list .prd .img1 img{
	width:150px;
}

#item_list .prd .img2 img{
	margin:0 15px 0 0;
}

#item_list .prd .img3 img{
	margin:0 0 0 15px;
}

#item_list .prd .prod_name_en{
	padding-top:10px;
	font-size:28px;
	margin-bottom:0;
	color:#888
}
#item_list .prd .prod_name_ja{
	font-size:13px;
	margin-bottom:10px;
}

#item_list a{
	text-decoration:none;
}

#item_list a:hover{
	text-decoration:underline;
}

#item_list .price{
	padding-top:5px;
	font-size:12px;
    display:none;
}

#item_list .price .zeikomi{
	font-size:7px;
        display:none;
}

.imgFixed .eachCont{
	display:flex;
	justify-content:center;
}

.bottleImg{
    display: flex;
	justify-content:center;
	margin:auto;
	margin-bottom:15px;
	margin-top:10px;
	width:150px;
    height: 150px;
    border: none;
}

.rep .bottleImg{
	width:unset;
}
.bottleImg>a>img{
    max-width: 150px;
    max-height: 150px;
}
.bottleImg:hover{
    border: none;
}

#main .wrap_product .groups{
	position:relative;
	display:flex;
	justify-content:space-evenly;
}

#main.winelist .wrap_product .groups{
	height: calc(126mm);
}

#main .wrap_product .memo_wrapper{
	display:flex;
	flex-direction:column;
	flex-grow:1;
}

#main .wrap_product .memo{
	position:relative;
	display:block;
	background:#fffdf5;
	margin-top:10px;
	padding:4px;
	padding-left:8px;
	border:solid 1p #e5e1d2;
	width:100%;
	border-radius:7px;
	flex:1;
}

#main .wrap_product .memo h3{
	font-weight:normal;
	color:#c6c1ac;
}

#main .wrap_product .group_a{
	width:100%;
	padding:0 3mm 3mm 3mm;
	background:#ffffff;
	position:relative;
}

#main .wrap_product .group_a .qr canvas{
	width:50px;
	padding:1mm;
	background:#fff;
}
#main .wrap_product .group_b{
	display:flex;
	flex-direction:column;
	justify-content:unset;
	width:100%;
	background:#f4f4f4;
	padding:3mm;
}

#main.iguro .wrap_product .group_a{
	width:calc(75mm);
}

#main.iguro .wrap_product .group_b{
	opacity:1;
	background-color:#faf9ed;
	width:calc(105mm);
}

#main.iguro .wrap_product .group_b>*{
	opacity:0;
}

#main.rep .wrap_product .group_a{
	background:unset;
}

#main .wrap_product.rep .group_b{
	width:3500px;
	background:unset;
}

#main .wrap_product .group_b h3{
	font-weight:bold;
}

#main .wrap_product .group_b .recipe_image{
	display:flex;
	justify-content:center;
	padding-top:5px;
	padding-bottom:15px;
}

#main .wrap_product .group_b .recipe_image img{
	width:150px;
	height:auto;
}

#main .wrap_product .group_b .recipe_name{
	padding-bottom:10px;
	margin-bottom:10px;
	border-bottom:1px solid #dee4e6;
}

#main .btns{
	position:absolute;
	width:100%;
	display:none;
	gap:15px;
	bottom:0;
	justify-content:center;
	cursor:pointer;
}

#main .btns .btn{
	width:100%;
	text-align:center;
	padding:10px 0;
}

#main a.btn {
	text-decoration:none;
    display:inline-block;
    color: #111;
    background: #edb500;
    border: 1px solid #d8a424;
    padding:10px;
    border-radius:4px;
    margin:10px 0;
}

#main .thanks a.btn {
	text-decoration:none;
    display:inline-block;
    color: #111;
    background: #fff;
    border: 1px solid #494949;
    padding:10px;
    border-radius:4px;
    margin:10px 0;
}
#main a.btn.detail{
	border:1px solid #494949;
	background:#fff;
}
#main a.btn:hover{
	border-color:#E17100;
    opacity:0.9;
    text-decoration:none;
}

.bread a{
    color:#646464;
}

.bottom_comment{
	display:none;
	width:100%;
	border-top:solid 1px #ccc;
	padding-top:5px;
}

.thanks{
	width:100%;
	border-top:solid 1px #ccc;
	padding-top:5px;
	margin-top:20px;
}

.thanks h3{
	padding-top:20px;
}

.thanks ul{
	padding-top:5px;
	padding-bottom:10px;
}

.thanks ul li{
	list-style-type:disc;
	margin-left:15px;
}

#main .bottom_comment .btn{
	margin-bottom:20px;
}

#main .bottom_comment .cart_all{
	margin-top:15px;
	cursor:pointer;
}

.under_arrow{
	width: 35px;
	height: 35px;
	border: 5px solid;
	border-color:  transparent transparent #bdbdbd #bdbdbd;
	transform: rotate(-45deg);
	margin:auto;
	margin-bottom:15px;
}

.region{
	margin-bottom:10px;
    display:flex;
    align-items: flex-end;
}
.region span{display:block;}

.flag>span:before{
	content:"";
	display:block;
	width:18px;
	height:12px;
	float:left;
	margin-right:7px;
	margin-top:2px;
}

.flag-franch:before {
	background: url(../images/france.png) no-repeat 0 0;
	background-size: contain
}
.flag-spain:before {
	background: url(../images/spain.png) no-repeat 0 0;
	background-size: contain
}
.flag-italy:before {
	background: url(../images/italy.png) no-repeat 0 0;
	background-size: contain
}
.flag-germany:before {
	background: url(../images/germany.png) no-repeat 0 0;
	background-size: contain
}
.flag-austria:before {
	background: url(../images/austria.png) no-repeat 0 0;
	background-size: contain
}
.flag-usa:before {
	background: url(../images/america.png) no-repeat 0 0;
	background-size: contain
}
.flag-chile:before {
	background: url(https://firadis.net/client_info/FIRADIS/view/userweb/images/chile.png) no-repeat 0 0;
	background-size: contain
}
.flag-nz:before {
	background: url(../images/nz.png) no-repeat 0 0;
	background-size: contain
}
.flag-argentina:before {
	background: url(https://firadis.net/client_info/FIRADIS/view/userweb/images/argentina.png) no-repeat 0 0;
	background-size: contain
}
.flag-australia:before {
	background: url(https://firadis.net/client_info/FIRADIS/view/userweb/images/australia.png) no-repeat 0 0;
	background-size: contain
}
.flag-england:before {
	background: url(https://firadis.net/client_info/FIRADIS/view/userweb/images/england.png) no-repeat 0 0;
	background-size: contain
}
.flag-portugal:before {
	background: url(https://firadis.net/client_info/FIRADIS/view/userweb/images/portugal.png) no-repeat 0 0;
	background-size: contain
}



.qr_wrapper{
	position:absolute;
	bottom:0;
	background:#f7f5ee;
	display:flex;
	flex-direction:column;
	width:78px;
	height:78px;
	margin-top:6px;
	padding-bottom:3px;
	border-radius:5px;
}

.qr_wrapper .qr{
	margin:auto;
	margin-bottom:1px;
	display:flex;
}

.group_b .qr_wrapper{
	width:50px;
	height:50px;
}

.rep .group_b .qr_wrapper{
	position:absolute;
	top:0;
	right:0;
}

.group_b .qr_wrapper .qr canvas{
	width:50px;
}

.qr_wrapper p.qr_notice{
	display:block;
	margin:0 auto;
	transform: scale(0.8);
}

.group_b .qr_wrapper p.qr_notice{
	display:none;
}

@media screen and (max-width:1000px) {
	#item_list {
		display: grid;
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


@media screen and (max-width:850px) {
	#main{
		padding:60px 15px 50px 15px;
	}
	#item_list {
		display: grid;
	    grid-template-columns: repeat(1, minmax(0, 1fr));
	    grid-gap: 12px 12px;
	    margin-top: 24px;
	    width: auto;
		padding: 1%;
		margin-bottom:0;
		padding-bottom:20px;
	}

	#main .btns{
		position:relative;
	}

	#main .btns .btn{
		width:100%;
		text-align:center;
		padding:10px 0;
	}

}