@charset "utf-8";
/*
	Last Update:2021/11/21
	Auther: okada
*/
/*===================================================================
	layout
===================================================================*/
a:link { color:#818181; }
a:visited { color:#818181; }

.wrapper, .wrapper-t, .wrapper-b { position:relative; }
@media (max-width: 767px){
	.wrapper, .wrapper-t { padding-top:30px; }
	.wrapper, .wrapper-b { padding-bottom:30px; }
}
@media (min-width: 768px){
	.wrapper, .wrapper-t { padding-top:60px; }
	.wrapper, .wrapper-b { padding-bottom:60px; }
}

.center, .center2,.center3 { width:100%; margin:0 auto; text-align:left; }
.center { max-width:1200px; }
.center2 { max-width:1000px; }
.center3 { max-width:900px; }

	@media (max-width:1230px){
		.center { padding-left:15px; padding-right:15px; }
	}
	@media (max-width:1030px){
		.center2 { padding-left:15px; padding-right:15px; }
	}
	@media (max-width:930px){
		.center3 { padding-left:15px; padding-right:15px; }
	}




header{    border-top: 10px solid #F2F2F2;
    border-left: 10px solid #F2F2F2;
    border-right: 10px solid #F2F2F2;
	padding: 10px 10px 0px 10px;
}
main{
    border-left: 10px solid #F2F2F2;
    border-right: 10px solid #F2F2F2;
	padding: 0px 10px 0px 10px;
}
#body{
    border-left: 2px dotted #DEDEDE;
    border-right: 2px dotted #DEDEDE
}
body.colorbox_open{overflow-y: hidden;}

/*===================================================================
	#head
===================================================================*/
#head{	border-top: 2px dotted #DEDEDE;
    border-left: 2px dotted #DEDEDE;
    border-right: 2px dotted #DEDEDE
}
.head {
	padding: 15px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
    background: #fff;
    width: 100%;
}



#head .left{ display: flex; justify-content: center; align-items: center;}

#head .left img{ width: 221px; object-fit: contain;}
#head h1{position: relative; display: flex; justify-content: center; align-items: center;}
#head h1 a{display: block;}
#head h1 p{color: #707070;
    font-size: 0.8em;
    line-height: 1.15em;
    letter-spacing: -2px;
    margin-left: 5px;}

#head .right{ display: flex; justify-content: center; align-items: center;}
#head .right ul.navi{	display: flex;}
#head .right ul.navi li{padding: 0 10px;}

/*cart_btn*/
#cart_btn { display: flex; justify-content: center;  z-index: 9999; width: 60px;
    height: 60px;}
#cart_btn > a {padding: 20px 0;
    background: url(../image/layout/cart_btn.png) no-repeat center /contain;
    display: block;
    position: relative;}
#cart_btn a > span { visibility:hidden; }
#cart_btn a > .alert_num {
    right: -5px;
    top: 0px;
    width: 23px;
    height: 23px;
    font-size: 1em;
}

@media (max-width:767px) {
	#head .left img{    width: 70px;}
}
@media (max-width:575px) {
	#cart_btn a > .alert_num{top: -10px;}
	#cart_btn{width: 50px; height: 50px;}
	#head .right ul.navi li{padding:3px 10px;}
	#head h1 p{display: none;}
	#head .right ul.navi{display: block;}
}

/*===================================================================
	#foot
===================================================================*/

#foot{    background: #F7F7F7; padding: 25px 0;}
#foot .logo img{width: 120px;}
#copyright{ background: #F7F7F7; color: #C7C7C7;     padding: 0 0 25px;}
#pagetop{background: #F2F2F2;}
#pagetop a{padding: 10px 0; display: block; background: url(../image/layout/icon/top.png) no-repeat center /20px auto;}
#pagetop a > span {
    visibility: hidden;
}

#foot .navi a{color: #707070; display: block; text-align: center;}

@media(min-width:767px){

	#foot .navi .li:not(:first-child) {border-left: 1px solid #C3C3C3;}
}


/*===================================================================
	common
===================================================================*/
.hl_1{font-weight: bold; font-size: 1.25em;}
.hl_2{font-weight: bold; font-size: 2em; color: #595757; font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif; letter-spacing: 3px;}

@media(max-width:575px){
	.hl_2{font-size: 1.5em;}
}


.marker_1{    background: linear-gradient(transparent 60%, #FBE6F0 60%);}
.marker_2{    background: linear-gradient(transparent 60%, #E5F2DE 60%);}
.marker_3{    background: linear-gradient(transparent 60%, #FBDDC6 60%);}
.marker_4{    background: linear-gradient(transparent 60%, #EFF9FD 60%);}
.marker_5{    background: linear-gradient(transparent 60%, #ECE9F4 60%);}
.marker_6{    background: linear-gradient(transparent 60%, #FAF7CC 60%);}

.alert_num{     position: absolute;
    top: -15px;
    right: -15px;
    background: #EF3749;
    color: #fff;
    font-weight: bold;
	width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    font-size: 1.25em;}

.btn{  text-align: center;
    font-weight: bold;
    color: #fff!important;
    border-radius: 5px;
    background: #2C2E33;
    border: transparent;
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 5px 0;}


.box { background: #fff; width: 100%; box-shadow: 0 1px 3px rgb(0 0 0 / 16%); padding: 15px;}

.tbl_form { width:100%; }
.tbl_form tr > * { vertical-align:middle; padding:15px 10px; border-top:1px solid #ccc; }
.tbl_form tbody th { background:#F8F8F8; position:relative; }
.tbl_form tbody th label { display:inline-block; width:100%; position:relative; }
.tbl_form .form-zip .zip dt{margin-right: 5px;}
.tbl_form .form-zip .zip button{background: #FAFAFA;
    border: 1px solid #666666;
    border-radius: 50px;
    padding: 5px 10px;}


	.tbl_form .form-zip .zip,.tbl_form .form-zip .zip dd{display: flex; align-items: center;}
	.tbl_form tr > * { border-bottom:1px solid #ccc; }
	.tbl_form tbody tr > th { width:200px; padding:20px 10px;    text-align: center; }
	.tbl_form .cap { padding-top:15px; }


#cboxContent{border-radius: unset!important;}

@media (max-width:767px) {
	.tbl_form tbody tr > th { width:100px; }
}
/*===================================================================
	icon
===================================================================*/
.icon { display:inline-block; line-height:100%; background-repeat:no-repeat; background-size:contain; background-position:left center; }

.icon_i1 { background-image:url(../image/layout/icon/right.png); background-size:8px; background-position: right 10px center; padding: 10px 15px 10px 0px; }
.icon_i2 { background-image:url(../image/layout/icon/instagram.png); background-size:20px; background-position:left center; padding: 5px 0px 5px 30px; }
.icon_i3 { background-image:url(../image/layout/icon/cart.png); background-size:20px; background-position:left center; padding: 5px 0px 5px 30px; }
.icon_i4 { background-image:url(../image/layout/icon/cart2.png); background-size:20px; background-position:left center; padding: 5px 0px 5px 25px; }
.icon_i5 { background-image:url(../image/layout/icon/i5.png); background-size:20px; background-position:left center; padding: 5px 0px 5px 30px; }


/*===================================================================
	common
===================================================================*/
.mb0 { margin-bottom:0 !important; }
.mb5 { margin-bottom:5px !important; }
.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb30 { margin-bottom:30px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }

.mt10 { margin-top:10px !important; }
.mt20 { margin-top:20px !important; }
.mt30 { margin-top:30px !important; }
.p0 { padding:0 !important; }

.disp_b { display:block; }
.disp_ib { display:inline-block; }
.disp_tbl { display:table; width:100%; height:100%; }
.disp_td { display:table-cell; vertical-align:middle; }
.disp_td_b { display:table-cell; vertical-align:bottom; }

.img_back { background-position:center center; background-repeat:no-repeat; background-size:cover; overflow:hidden; }
.img_back > img { visibility:hidden; width:1px; height:1px; }
.img_rect { padding-top:65%; line-height:1px; }
.img_sq { padding-top:100%; line-height:1px; }

.parallax,
.parallax:before,
.parallax:after { transition:opacity .7s, transform .7s, left .7s, right .7s; }
.parallax[data-parallax-in="vertical"],
.parallax[data-parallax-in="vertical2"],
.parallax[data-parallax-in="vertical3"] { opacity:1; transform:translateY(0); -webkit-transform:translateY(0); -ms-transform:translateY(0); }
.parallax[data-parallax-in="vertical"]:not(.parallax_on),
.parallax[data-parallax-in="vertical2"]:not(.parallax_on),
.parallax[data-parallax-in="vertical3"]:not(.parallax_on) { opacity:0 !important; }
.parallax[data-parallax-in="vertical"]:not(.parallax_on) { transform:translateY(30px); -webkit-transform:translateY(30px); -ms-transform:translateY(30px); }
.parallax[data-parallax-in="vertical2"]:not(.parallax_on) { transform:translateY(60px); -webkit-transform:translateY(60px); -ms-transform:translateY(60px); }
.parallax[data-parallax-in="vertical3"]:not(.parallax_on) { transform:translateY(90px); -webkit-transform:translateY(90px); -ms-transform:translateY(90px); }
.parallax[data-parallax-in="left"] { position:relative; left:0; }
.parallax[data-parallax-in="left"]:not(.parallax_on) { left:-100vw; }
.parallax[data-parallax-in="right"] { position:relative; right:0; }
.parallax[data-parallax-in="right"]:not(.parallax_on) { right:-100vw; }

.parallax[data-parallax-in="slide_right"],
.parallax[data-parallax-in="slide_left"] { display:inline-block; position:relative; }
.parallax[data-parallax-in="slide_right"] > *,
.parallax[data-parallax-in="slide_left"] > * { position:relative; display:block; transform:translateX(0vw); transition:all .5s; transition-delay:.4s; }
.parallax[data-parallax-in="slide_right"]:before,
.parallax[data-parallax-in="slide_left"]:before { content:""; position:absolute; top:0; width:100%; height:100%; background:#9CB5A7; transition:all .5s; }
.parallax[data-parallax-in="slide_right"]:before { right:0; }
.parallax[data-parallax-in="slide_left"]:before { left:0; }
.parallax[data-parallax-in="slide_right"]:not(.parallax_on):before,
.parallax[data-parallax-in="slide_left"]:not(.parallax_on):before { width:0%; }
.parallax[data-parallax-in="slide_right"]:not(.parallax_on)  > * { transform:translateX(100vw); }
.parallax[data-parallax-in="slide_left"]:not(.parallax_on)  > * { transform:translateX(-100vw); }