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

/*==================================
	main
==================================*/
main {margin-top: 180px;}

/*==================================
	mv
==================================*/
main #mv {margin: 0 auto; background: url("../img/top/mv_bg.gif");height: 450px; }
main #mv img {width: 100%;}
main #mv .mvbox {width: 100%; margin: 0 auto; position: relative; max-width:1200px; top: -70px; border-radius: 20px; background: url("../img/top/mv.jpg") no-repeat; height:450px; box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.1);}
main #mv .mvbox .tit {position: absolute; top: 45px; right: 130px; width:215px; }
main #mv .mvbox .cp_btn {position: absolute; bottom:30px; right: 25px;}

main #mv .mvbox .tit.type01 { width:185px; }
main #mv .mvbox .cp_btn.type01 {bottom:20px;right: 30px;}
main #mv .mvbox .cp_btn.type02 {bottom:-60px;right: 30px;}
section#itemlist .item_wide .shiawaseBnrTxt01{font-size: 20px;display: block;}


@media screen and (max-width: 1200px) {
main #mv .mvbox  {width: 95%;}
header nav ul li:first-child {margin: 10px 20px 0 0;}
}

/*==================================
	mainWapper
==================================*/
#mainWapper {background: #fff;}

/*==================================
	commitment
==================================*/
section#commitment {margin: 0 auto; padding: 85px 0; text-align: center; background: url("../img/top/commitment_bg.png") no-repeat, #fdfaf3; background-position: right bottom;background-size: 400px auto;font-size: 18px;}
section#commitment h1 {font-size: 28px; margin-bottom: 45px;}
section#commitment p {line-height: 2.8; }


/*==================================
	itemlist
==================================*/
section#itemlist {margin: 0 auto; width: 1000px; padding: 85px 0;}
section#itemlist h1 {width: 130px; font-size: 26px; text-align: center;margin: 0 auto 60px auto; position: relative; padding: 15px 0; border-top: solid 3px #1b0e00; border-bottom: solid 3px #1b0e00;}
section#itemlist h1 span {position: absolute; top:-30px;}

section#itemlist ul {display: flex; flex-flow: row wrap;}
section#itemlist ul li {position: relative;}
section#itemlist ul li .txt {position: absolute; color: #fff; }

section#itemlist ul li .txt .product {font-size: 32px; padding-bottom: 25px;}
section#itemlist ul li .txt .price {font-size: 18px;}
section#itemlist ul li .link {font-size: 18px;}
section#itemlist ul li .link a {font-size: 18px;}
section#itemlist ul li .btn {position: absolute;}

section#itemlist .item_wide {position: relative;margin-bottom: 40px;}
section#itemlist .item_wide .txt {position: absolute; color: #fff; }
section#itemlist .item_wide .txt .product {font-size: 26px;padding-bottom: 25px;line-height: 140%;}
section#itemlist .item_wide .txt .price {font-size: 18px;}
section#itemlist .item_wide .link {font-size: 18px;}
section#itemlist .item_wide .link a {font-size: 18px;}
section#itemlist .item_wide .btn {position: absolute;}

@media screen and (min-width: 751px) {
section#itemlist .item_wide .btn { top:115px; left: 70px; right: 0; text-align: left;}
section#itemlist .item_wide .txt {top:30px; left: 70px;}
section#itemlist .item_wide .txt .price {text-align: right;}
section#itemlist ul li:not(:first-child) .txt {top:35px; left: 0; right: 0; text-align: center;}
section#itemlist ul li:not(:first-child) {/*width: 480px;*/ margin-top: 40px; display: flex; justify-content: space-between; }
section#itemlist ul li:nth-child(odd) {margin-left: 40px; }
section#itemlist ul li:first-child {margin-left: 0!important;}
section#itemlist ul li:first-child .txt {top:65px; left: 70px;}
section#itemlist ul li:not(:first-child) .txt .product {padding-bottom: 20px;}
section#itemlist ul li:not(:first-child) .txt .product.caption {padding-bottom: 10px;}
section#itemlist ul li:first-child .txt .price {text-align: right;}
section#itemlist ul li:first-child .btn {top:93px; left: 240px;}
section#itemlist ul li:first-child .btn.lfPosition {top:105px; left: 70px;}
section#itemlist ul li:not(:first-child) .btn { top:110px; left: 0; right: 0; text-align: center;}
section#itemlist ul li.item06 .txt {top:55px;}
}


/* ボタン */
section#itemlist .btn .linkbtn {border: 1px solid #ffffff; padding: 8px 40px; color: #ffffff; position: relative; display: inline-block;}
.arrow::before{content: '';width: 5px;height: 5px;border: 0px;border-top: solid 2px #FFF;border-right: solid 2px #FFF;-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);position: absolute;top: 14px;right: 15px;}
section#itemlist .btn .linkbtn .arrow::before {border-top: solid 2px #ffffff;border-right: solid 1px #fffff;}



/*==================================
	news
==================================*/
section#news {
	margin: 0 auto;
	width: 1000px;
	padding: 85px 0;
}
section#news h1 {
	width: 130px;
	font-size: 26px;
	text-align: center;
	margin: 0 auto 60px auto;
	position: relative;
	padding: 15px 0;
	border-top: solid 3px #1b0e00;
	border-bottom: solid 3px #1b0e00;
}
section#news ul {
	width: 80%;
	margin: 0 auto;
	border-top: 1px solid #f1e8dd;
}
section#news ul li {
	line-height: 1.8;
	font-size: 16px;
	border-bottom: 1px solid #f1e8dd;
}
section#news ul li a {
	padding: 15px;
	display: block;
}
section#news ul li a .ymdTxt {
	font-size: 13px;
	display: block;
}


/*==================================
	contentPage
==================================*/
@media screen and (min-width: 751px) {
/*--header--*/
#contentPage header {position: initial;}
	
/*--main--*/	
#contentPage main {margin-top: 0px;}
}

#contentPage main {font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;}

/*--contentArea--*/
#contentPage .ttl {margin: 0 auto; background: url("../img/lib/common/contentPage_tit.jpg") no-repeat;height: 260px; position: relative;background-size: cover;}
#contentPage .ttl h1 {position: absolute; top:50%; left: 0; right: 0; margin: 0 auto; font-size: 36px; text-align: center;}
#contentPage .contentArea {margin: 0 auto; width: 980px; padding: 85px 0;  }


/*--privacy--*/
#contentPage #privacy dt {font-size:18px; font-weight: bold; margin:4% 0 1% 0;}
#contentPage #privacy dt:first-child {margin:0% 0 1% 0;}
#contentPage #privacy dd { line-height: 1.8; margin-left: 3%;}
#contentPage #privacy dd ul {margin: 1% 0 1% 3%;}
#contentPage #privacy dd ul li {text-indent: -2em; padding-left: 2em;}
#contentPage #privacy dd .contactInfo {border: solid 1px #dadada; padding: 2%; display: inline-block; margin-top: 2%}

/*--law--*/
#contentPage #law dl {display: flex; flex-wrap: wrap; margin-bottom: 10px;}
#contentPage #law dl:nth-child(odd) {background: #f8f8f8;}
#contentPage #law dl dt {width: 20%; padding: 10px;}
#contentPage #law dl dd {width: 80%; padding: 10px 20px 10px 0px;}

/*--guide--*/
#contentPage #guide .contentArea {}
#contentPage #guide .txt {}
#contentPage #guide h2 {font-size: 26px; text-align: center; margin-bottom: 40px;}
#contentPage #guide h3 {font-size: 20px; margin-top: 40px; margin-bottom: 20px;}
#contentPage #guide dl {line-height: 1.8; margin: 0 auto 30px auto;}
#contentPage #guide dt {font-size: 18px; background: #f8f8f8; text-align: center; padding: 10px; margin-bottom: 30px;}
#contentPage #guide dd {width: 950px;}
#contentPage #guide dd p {margin-bottom: 20px;}
#contentPage #guide dd ul {display: flex; flex-wrap: wrap; margin-top: 30px;}

#contentPage #guide #postage,
#contentPage #guide #cancel,
#contentPage #guide #delivery,
#contentPage #guide #aboutTeiki,
#contentPage #guide #storeReceipt {margin-top: 80px; line-height: 1.8;}

#contentPage #guide #postage .coollist {margin-bottom: 3%;}
#contentPage #guide #postage dl {margin: 0;}
#contentPage #guide #postage dt {display: table-cell; width: 80px; vertical-align: middle; box-sizing: content-box;padding: 10px 0; font-size: 14px; border: solid 1px #fff; }
#contentPage #guide #postage dd {width: 80px; display: table-cell; text-align: center; vertical-align: middle; font-size: 14px;border: solid 1px #fff; box-sizing: border-box;}
#contentPage #guide #postage .area dt {background: #4d4d4d; color: #fff;}
#contentPage #guide #postage .area dd {background: #e8e8e8;}
#contentPage #guide #postage .ken dt {background: #4d4d4d; color: #fff;}
#contentPage #guide #postage .size80 dt {background: #fff2d4;}
#contentPage #guide #postage .size100 dt {background: #fff2d4;;}
#contentPage #guide #postage .union2 {width: 160px;}
#contentPage #guide #postage .union3 {width: 240px;}
#contentPage #guide #postage .union4 {width: 320px;}
#contentPage #guide #postage .union5 {width: 400px;}
#contentPage #guide #postage .union6 {width: 480px;}
#contentPage #guide #postage .union7 {width: 560px;}
#contentPage #guide #postage .union8 {width: 640px;}

/*--faq--*/
#contentPage #faq h2 {font-size: 26px; text-align: center; margin-bottom: 40px;}
#contentPage #faq dl dt {position: relative; font-size: 18px;background: #f8f8f8;padding: 10px 10px 10px 40px;}
#contentPage #faq dl dd {position: relative; padding: 20px 10px 50px 40px;}
#contentPage #faq section {margin-bottom: 50px;}
#contentPage #faq dl dt::before { position: absolute; content: 'Q';font-family: serif; font-size: 22px; top:5px; left: 10px;}
#contentPage #faq dl dd::before { position: absolute; content: 'A';font-family: serif; font-size: 22px; top:15px; left: 10px;}
#contentPage #faq dl {line-height: 1.8;}

@media screen and (max-width: 750px) {

/*==================================
	main
==================================*/
main {margin-top: 0px;}

	
/*==================================
	mv
==================================*/
main #mv {width: 100%; margin: 0 auto; height: auto; background:none; }
main #mv .mvbox {width:100%; top:0;background: url("../img/top/mv_sp.jpg") no-repeat center center;height: 100vh;background-size: cover; margin-top: 70px; box-shadow: none;border-radius:0;}
main #mv .mvbox .tit {width: 48%; top: 20%; right: 0%; left: 0%; margin: 0 auto;}
main #mv .mvbox img {width: 100%;}
main #mv .mvbox .tit.type01 {width: 48%; top: 13%;}
main #mv .mvbox .cp_btn {width:44.66%; bottom:20%; right: 5%;}
main #mv .mvbox .cp_btn.type01 {width:48%; bottom:24%; right: 2%;}
main #mv .mvbox .cp_btn.type02 {width:44.66%; bottom:4%; right: 5%;}
section#itemlist .item_wide .shiawaseBnrTxt01{font-size: 70%;line-height: 140%;display: block;}


/*==================================
	commitment
==================================*/
section#commitment {width: 100%; margin: 0 auto; height: auto; font-size: 110%;}
section#commitment h1 {line-height: 1.4; margin-bottom:5%;}
	
	
/*==================================
	itemlist
==================================*/
section#itemlist .item_wide {position: relative; margin-bottom: 5%;}
section#itemlist .item_wide  {margin-top: 0%;}
section#itemlist .item_wide img {width: 100%;}
section#itemlist .item_wide .txt {top:10%; left: 0; right: 0; text-align: center;}
section#itemlist .item_wide .txt.campaign {top: 30%;}
section#itemlist .item_wide .txt .product {font-size: 130%;  padding-bottom: 3%;}
section#itemlist .item_wide .btn {top: 65%;left: 0;right: 0;text-align: center;}

section#itemlist {margin: 0 auto; width: 90%; padding: 15% 0;}
section#itemlist h1 {font-size: 26px; text-align: center;margin-bottom: 10%;}
section#itemlist h1 .title-border::before, section .title-border::after {width: 20%;}
section#itemlist ul {display: block;}
section#itemlist ul li {position: relative; margin-top: 5%;}
section#itemlist ul li:first-child {margin-top: 0%;}
section#itemlist ul li img {width: 100%;}
section#itemlist ul li .txt {top:15%; left: 0; right: 0; text-align: center;}
section#itemlist ul li .txt.campaign {top: 30%;}
section#itemlist ul li.item06 .txt {top:25%;}
section#itemlist ul li .txt .product {font-size: 150%;  padding-bottom: 3%;}
section#itemlist ul li .txt .product.caption {padding-bottom: 1%;}
section#itemlist ul li .txt .price {font-size: 140%;}
section#itemlist ul li .link {font-size: 18px;}
section#itemlist ul li .link a {font-size: 18px;}
section#itemlist ul li .btn {position: absolute;}
section#itemlist ul li .btn { top:65%; left: 0; right: 0; text-align: center;}
section#itemlist .btn .linkbtn {font-size: 90%; padding: 1% 8%;}

/*==================================
	itemlist
==================================*/
section#news {
	margin: 0 auto;
	width: 90%;
	padding: 15% 0;
}
section#news h1 {
	font-size: 26px;
	text-align: center;
	margin-bottom: 10%;
}
section#news ul {
    width: 100%;
}

/*==================================
	contentPage
==================================*/
#contentPage main {margin-top: 120px;}
/*--contentArea--*/
#contentPage .ttl {height: 150px;background-position: right;}
#contentPage .ttl h1 {font-size: 150%;}
#contentPage .contentArea {width: 90%; padding: 10% 0; }


/*--privacy--*/
#contentPage #privacy dt {font-size:110%; margin: 8% 0 3% 0;}
#contentPage #privacy dd .contactInfo {padding: 5%; margin-top: 5%}
#contentPage #privacy dd ul {margin: 3% 0 3% 3%;}
	
/*--law--*/
#contentPage #law dl {display: flex; flex-wrap: wrap; margin-bottom: 10px; line-height: 1.8;}
#contentPage #law dl:nth-child(odd) {background: #f8f8f8;}
#contentPage #law dl dt {width: 30%; padding: 3% 0 3% 3%;}
#contentPage #law dl dd {width: 70%; padding: 3% 3% 3% 5%;}

/*--guide--*/
#contentPage #guide .contentArea {width: 90%; padding: 10% 0; }
#contentPage #guide {}
#contentPage #guide h2 {font-size: 130%;}
#contentPage #guide h3 {font-size: 110%; margin: 10% 0 3% 0;}
#contentPage #guide dt {font-size: 100%;}
#contentPage #guide dd {width: 100%;}
#contentPage #guide #postage,#contentPage #guide #aboutTeiki, #contentPage #guide #storeReceipt {margin-top: 15%;}
#contentPage #guide #postage .coollist {display: flex; margin-bottom: 5%;}
#contentPage #guide #postage dt {display: block; font-size: 90%;margin: 0; width: 100%;}
#contentPage #guide #postage dd {display: block; font-size: 14px; width: 100%;}
#contentPage #guide #postage dl {width: 20%; float: left; display: block;}
#contentPage #guide #postage dl.area {width: 20%;}
#contentPage #guide #postage dl.ken {width: 30%;}
#contentPage #guide #postage dl.ken dd {height: 30px;}
#contentPage #guide #postage dl.size80 {width: 25%;}
#contentPage #guide #postage dl.size100 {width: 25%;}
#contentPage #guide #postage dl.size80 dd {height: 30px;}
#contentPage #guide #postage dl.size100 dd {height: 30px;}
#contentPage #guide #postage .union2 {width: 100%; height: 60px;padding-top: 15px;}
#contentPage #guide #postage .union3 {width: 100%; height: 90px;padding-top: 30px;}
#contentPage #guide #postage .union4 {width: 100%; height: 120px;padding-top: 45px;}
#contentPage #guide #postage .union5 {width: 100%; height: 150px;padding-top: 60px;}
#contentPage #guide #postage .union6 {width: 100%; height: 180px;padding-top: 80px;}
#contentPage #guide #postage .union7 {width: 100%; height: 210px;padding-top: 100px;}
#contentPage #guide #postage .union8 {width: 100%; height: 240px;padding-top: 110px;}	
#contentPage #guide #postage .storet {clear: both; display: block; padding-top: 5%;}
	
/*--faq--*/
#contentPage #faq h2 {font-size: 130%;}
#contentPage #faq dl dt {font-size: 100%;background: #f8f8f8;padding:5% 5% 5% 12%;}
#contentPage #faq dl dd {padding:5% 5% 10% 12%;}
#contentPage #faq section {margin-bottom: 10%;}
#contentPage #faq dl dt::before {content: 'Q';font-family: serif; font-size: 160%; top:8%;}
#contentPage #faq dl dd::before {content: 'A';font-family: serif; font-size: 160%;}

	
}