@charset "UTF-8";

/* gift
---------------------------------------------------------------------------*/
main > .logo-mark {
	display: none;
}

#page-head .btn-buy {
	position: absolute;
	top: 23px;
	right: 30px;
}

#main {
	padding-right: 0;
	padding-left: 0;
}

#main-inner {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.sec-lead,
.sec-size,
.sec-lineup,
.sec-minigift .sec-inner,
.sec-noshi,
.sec-postage,
.sec-question {
	width: 82%;
	max-width: 700px;
	margin: 0 auto;
}

.slider-gift {
	margin-bottom: 45px;
	padding: 0 3%;
}

.title-sec {
	margin-bottom: 25px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.12em;
}

.title-sec span {
	padding-left: 12px;
	font-size: 12px;
	font-weight: normal;
}

.btn-bullet {
	margin-top: 18px;
}

.btn-set {
	margin-top: 20px;
}

.btn-set > div {
	display: inline-block;
	margin: 0 5px 5px 0;
}

.btn-set > div:last-of-type {
	margin-right: 0;
}


/* .sec-lead
---------------------------------------------------------------------------*/
.sec-lead {
	margin-bottom: 80px;
	text-align: center;
}

.sec-lead h1 {
	margin-bottom: 35px;
}

.sec-lead p {
	text-align: center;
}

.sec-lead p .narrow {
	display: none;
}


/* .sec-size
---------------------------------------------------------------------------*/
.sec-size {
	margin-bottom: 100px;
}

/* .size-list
------------------------------------*/
.size-list .inner {
	float: left;
	width: 30%;
	margin-right: 5%;
}

.size-list .inner:last-of-type {
	margin-right: 0;
}

.size-list figure {
	margin-bottom: 24px;
}

.size-list figure img {
	width: 100%;
	height: auto;
}

.size-list h3 {
	margin: 0 0 16px 10px;
}

.size-list h3 strong {
	padding-right: 8px;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.06em;
}

.size-list h3 em {
	font-size: 22px;
}

.size-list h3 em span {
	padding-left: 2px;
	font-size: 16px;
}

.size-list ul {
	margin-left: 12px;
}

.size-list li {
	margin-bottom: 4px;
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0.08em;
}


/* .sec-lineup
---------------------------------------------------------------------------*/
.sec-lineup {
	margin-bottom: 100px;
}

.sec-lineup h2 {
	margin-bottom: 65px;
}

.sec-lineup .inner-wrap {
	position: relative;
	margin-bottom: 60px;
}

.sec-lineup .inner-wrap:last-of-type {
	margin-bottom: 0;
}

.sec-lineup .inner-wrap h3 {
	display: inline-block;
	border-bottom: 1px solid #105670;
	margin-bottom: 30px;
	padding-bottom: 3px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.1em;
}

.sec-lineup .inner-wrap .mark {
	position: absolute;
	top: -30px;
	right: 10px;
}

.sec-lineup .inner-wrap .mark img {
	width: 55px;
	height: auto;
}

.sec-lineup .inner-wrap .mark .tips-wrap {
	left: -260px;
	padding-bottom: 68px;
	z-index: 1;
}

.sec-lineup .inner-wrap .mark.tips-btn:hover .tips-wrap {
	padding-bottom: 78px;
}

.sec-lineup .inner-wrap .mark .tips-inner {
	width: 280px;
	padding: 23px 22px 19px;
}

.sec-lineup .inner-wrap .mark .tips-inner:after {
	left: 265px;
	border-width: 18px 0 0 11px;
	border-color: #0F556F #0F556F transparent transparent;
}

.sec-lineup .inner-wrap .mark .tips-inner h3 {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.12em;
}

.sec-lineup .inner-wrap .mark .tips-inner p {
	font-size: 13px;
	line-height: 1.65;
}

.sec-lineup .inner-wrap .inner {
	display: -webkit-box;
	display: flex;
}

.sec-lineup .inner-wrap figure {
	width: 190px;
	min-width: 190px;
}

.sec-lineup .lineup3 figure {
	transform: translateX(-15px);
}

.sec-lineup .inner-wrap figure img:not(:last-of-type) {
	display: block;
	margin-bottom: 10px;
}

.sec-lineup .inner-wrap .txt {
	padding: 0 0 0 35px;
}

.sec-lineup .inner-wrap .txt h4 {
	margin-bottom: 15px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.1em;
}

.sec-lineup .inner-wrap .txt p {
	font-size: 13px;
	text-align: justify;
	letter-spacing: 0.08em;
}

.sec-lineup .dl-common {
	margin-top: 60px;
}


/* .sec-minigift
---------------------------------------------------------------------------*/
.sec-minigift {
	background-color: #F3EEE2;
	padding: 40px 0;
	margin-bottom: 80px;
	color: #524D3D;
}

.sec-minigift .inner {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
}

.sec-minigift h2 {
	margin-bottom: 22px;
}

.sec-minigift .inner figure {
	align-self: flex-start;
	width: 190px;
	min-width: 190px;
}

.sec-minigift .inner .txt {
	padding: 5px 0 0 35px;
}

.sec-minigift .inner h3 {
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.sec-minigift .inner p {
	font-size: 13px;
	text-align: justify;
	line-height: 1.9;
	letter-spacing: 0.06em;
}


/* .sec-noshi
---------------------------------------------------------------------------*/
.sec-noshi {
	margin-bottom: 100px;
	margin-top: -60px;
	padding-top: 60px;
}

.sec-noshi h2 {
	margin-bottom: 15px;
	font-size: 18px;
}

.sec-noshi h2 + p {
	font-size: 13px;
}

/* .noshi-list
------------------------------------*/
.noshi-list {
	position: relative;
	overflow: hidden;
	margin: 30px 0 45px;
}

.noshi-list li {
	float: left;
	width: 30%;
	margin-right: 5%;
}

.noshi-list li:last-of-type {
	margin-right: 0;
}

.noshi-list figure {
	position: relative;
	margin-bottom: 21px;
}

.noshi-list figure img {
	width: 100%;
	height: auto;
}

.noshi-list figcaption {
	position: absolute;
	top: 16px;
	left: 14px;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.08em;
}

.noshi-list a {
	display: block;
}

.noshi-list h3 {
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.noshi-list h3 span {
	padding-left: 3px;
	font-size: 11px;
}

.noshi-list p {
	font-size: 12px;
	text-align: justify;
	letter-spacing: 0.06em;
}

/* .noshi-list .wide
------------------------------------*/
.noshi-list .wide {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: end;
	align-items: flex-end;	
}

.noshi-list .wide figure {
	width: 47%;
	min-width: 47%;
	margin-bottom: 0;
}

.noshi-list .wide figure + div {
	padding-left: 6%;
}

.noshi-list .wide h3 {
	font-size: 14px;
}

.noshi-list .wide p {
	letter-spacing: 0.02em;
}


/* .sec-postage
---------------------------------------------------------------------------*/
.sec-postage {
	margin-bottom: 80px;
}

.sec-postage .title-sec {
	font-size: 15px;
}

.sec-postage p + .guide-inner-dl {
	margin-top: 20px;
}


/* .sec-question
---------------------------------------------------------------------------*/
.sec-question .title-sec {
	font-size: 15px;
}

.common-question .btn-ac {
	padding-left: 2px;
}

.common-question .btn-ac + dd {
	padding-right: 10px;
	padding-left: 2px;
}


/* .cart-gift
---------------------------------------------------------------------------*/
.cart-gift {
	z-index: 999;
}

.cart-gift-bg {
	opacity: 0.95;
}

.cart-gift-inner {
	position: relative;
	max-width: 700px;
	height: 100%;
	margin: 0 auto;
	padding: 115px 40px 30px;
	overflow-y: scroll;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}

.cart-gift-inner::-webkit-scrollbar {
	width: 1px;
}

.cart-gift-inner::-webkit-scrollbar-track {
	border-radius: 3px;
	background: none;
}

.cart-gift-inner::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: none;
}

.cart-gift-inner > div {
	position: relative;
}

/* .cart-gift article
------------------------------------*/
.cart-gift article {
	position: relative;
	margin-bottom: 75px;
}

.cart-gift article:last-of-type {
	margin-bottom: 0;
}

.cart-gift article .sub-title {
	margin-bottom: 12px;
	color: #FFFFFF;
}

.cart-gift article .sub-title:before {
	background-color: #FFFFFF;
}

.cart-gift article .cart-nav {
	position: absolute;
	top: -6px;
	right: -10px;
	margin: 0;
}

.cart-gift .tips-amount {
	left: -50px;
	width: 180px;
}

.cart-gift .tips-inner:after {
	left: 87px;
}

.cart-gift article .tips-amount {
	left: 0;
}

.cart-gift article .tips-inner:after {
	left: 27px;
}

.cart-gift .tips-amount .tips-inner p {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.02em;
}

/* .cart-gift .cart
------------------------------------*/
.cart-gift .cart-set {
	border-top: 1px solid rgba(255,255,255,0.3);
}

.cart-gift .cart-set + p {
	color: #FFFFFF;
	margin: 20px 0 0 22px;
	font-size: 12px;
	line-height: 2;
	letter-spacing: 0.12em;
}

.cart-gift .cart {
	display: -webkit-box;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	height: auto;
	margin-bottom: 0;
	padding-top: 11px;
	padding-left: 23px;
}

.cart-gift .cart .price,
.cart-gift .cartjs_product_num td:after {
	color: #FFFFFF;
}

.cart-gift .cart .label {
	position: absolute;
	top: 12px;
	left: -22px;
	box-sizing: border-box;
	background-color: #9F9477;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	padding: 11px 0 0 1px;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.1em;
}

.cart-gift .cartjs_box {
	margin: 1px 70px 0 0 !important;
	color: #524D3D;
}

.cart-gift .cart .price {
	width: 100%;
	margin: 0;
}

.cart-gift .cart .price h3 strong,
.cart-gift .cart .price p {
	font-weight: bold;
}

.cart-gift .cart .price h3 strong {
	font-size: 13px;
	letter-spacing: 0.12em;
}

.cart-gift .cart .price h3 em {
	font-size: 14px;
	letter-spacing: 0.06em;
}

.cart-gift .cart .price p {
	margin-top: 5px;
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.12em;
}

.cart-gift .cartjs_product_num td:after {
	left: 42px;
	font-size: 14px;
}

.cart-gift .cartjs_product_num input {
	width: 34px !important;
	padding-right: 6px;
	padding-left: 6px;
}

.cart-gift .cartjs_cart_in,
.cart-gift .btn-soldout {
	top: 13px;
	right: 8px;
	width: 70px;
	letter-spacing: 0.04em;
}

.cart-gift .btn-soldout {
	padding-left: 4px;
}

.cart-gift .cartjs_cart_in:after {
	content: '購入';
}

.cart-gift .cartjs_option {
	margin-left: 8px;
}

.cart-gift .cartjs_option td .customSelect {
	width: 86px;
	padding-left: 8px;
}

.cart-gift .cartjs_option td .customSelect:before {
	right: 10px;
}

.cart-gift .cartjs_option td .customSelect:after {
	width: 30px;
}

/* .cart-gift .cart-nav
------------------------------------*/
.cart-gift .cart-nav {
	margin-top: 200px;
	text-align: center;
}

.cart-gift .cart-nav li {
	display: inline-block;
	float: none;
	margin: 0;
}

.cart-gift .cart-nav li a {
	background: url(../img/share/ico-arrow-s-white.svg) no-repeat left center;
	padding-right: 8px;
	color: #FFFFFF;
}

.cart-gift .cart-nav li a:hover {
	opacity: 0.5;
}


/* .modal-chart
---------------------------------------------------------------------------*/
.modal-chart {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10001;
	color: #FFFFFF;
	opacity: 0;
}

.modal-chart-bg {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #031F2A;
	width: 100%;
	height: 100%;
	opacity: 0.98;
	z-index: -1;
}

.modal-chart-close {
	position: absolute;
	top: 40px;
	right: 38px;
	padding-left: 45px;
	font-size: 27px;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: .15s ease-out;
	opacity: 0;
}

.modal-chart-close:hover {
	transition: .15s ease-out !important;
	opacity: 0.5 !important;
}

.modal-chart-close:before {
	display: block;
	content: '';
	position: absolute;
	top: 1px;
	left: 0;
	background: url(../img/share/btn-close.svg) no-repeat;
	background-size: 100% auto;
	width: 24px;
	height: 24px;
}

.chart-title {
	position: absolute;
	top: 38px;
	left: 36px;
}

.chart-title h2 {
	position: relative;
	display: inline-block;
	margin-right: 10px;
	padding-left: 39px;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.12em;
}

.chart-title h2:before {
	display: block;
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	background: url(../img/share/ico-coffee-blue.svg) no-repeat;
	width: 24px;
	height: 26px;
}

.chart-title p {
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.15em;
}

/* .modal-chart-inner
------------------------------------*/
.modal-chart-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) !important;
	margin-top: -10px;
	opacity: 0;
}

.btn-result {
	position: absolute;
	overflow: hidden;
	background-color: #45423B;
	border-radius: 6px;
}

.btn-result:after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	right: -10px;
	background-color: #676359;
	width: calc(100% + 20px);
	height: 100%;
	z-index: 0;
	transform: skewX(15deg);
	transition: .45s cubic-bezier(0.645, 0.045, 0.355, 1) .1s;
}

.btn-result:hover:after {
	right: calc(0px - 100% - 30px);
}

.btn-result a {
	position: relative;
	display: block;
	background: url(../img/share/ico-arrow-btn-white.svg) no-repeat right 17px bottom 15px;
	padding: 19px 60px 19px 20px;
	color: #FFFFFF;
	font-weight: bold;
	letter-spacing: 0.1em;
	white-space: nowrap;
	z-index: 1;
}

.btn-result a:hover {
	opacity: 1;
}

.btn-result strong,
.btn-result em {
	display: inline-block;
	font-weight: bold;
}

.btn-result strong {
	margin-bottom: 10px;
	font-size: 17px;
}

.btn-result strong:last-child {
	margin-bottom: 0;
}

.btn-result strong span {
	padding-left: 10px;
}

.btn-result strong span,
.btn-result em {
	font-size: 13px;
}

.btn-result.btn1 { top: 34px; left: 371px; }
.btn-result.btn2 { top: 167px; left: 668px; }
.btn-result.btn3 { top: 323px; left: 668px; }
.btn-result.btn4 { top: 476px; left: 668px; }
.btn-result.btn5 { bottom: -62px; left: 0; }
.btn-result.btn6 { bottom: -62px; left: 371px; }


.btn-result .mask {
	position: relative;
}

.btn-result .mask:before {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	background-color: #24221E;
	width: 100%;
	height: 20px;
	transition: .35s cubic-bezier(0.77, 0, 0.175, 1);
}

.btn-result .mask:nth-child(3):before {
	transition: .35s cubic-bezier(0.77, 0, 0.175, 1) .05s;
}

.btn-result a:hover .mask:before {
	width: 0;
}


/* chart
---------------------------------------------------------------------------*/

/* .btn-chart
------------------------------------*/
.btn-chart-fix {
	position: fixed;
	bottom: 30px;
	left: 70px;
	box-sizing: border-box;
	width: calc(50% - 70px);
	padding: 0 30px;
	z-index: 100;
}

.btn-chart {
	background: #105670 url(../img/share/ico-arrow-btn-white2.svg) no-repeat right 22px center;
	box-sizing: border-box;
	border-radius: 60px;
	margin: 15px -14px 0;
	padding: 20px 0 19px 28px;
	color: #FFFFFF;
	font-weight: bold;
	white-space: nowrap;
	cursor: pointer;
	transition: .15s ease-out;
}

.btn-chart-fix .btn-chart {
	margin: 0 auto;
	min-width: 480px;
	max-width: 586px;
	opacity: 0;
}

.btn-chart:hover {
	background-color: #063D52;
}

.btn-chart h2 {
	position: relative;
	display: inline-block;
	margin-right: 12px;
	padding-left: 36px;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.12em;
}

.btn-chart h2:before {
	display: block;
	content: '';
	position: absolute;
	top: -5px;
	left: 0;
	background: url(../img/share/ico-coffee-blue.svg) no-repeat;
	width: 24px;
	height: 26px;
}

.btn-chart p {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.12em;
}

/* media query
-----------------------------------*/
@media (min-width: 1600px) {
	.sec-noshi h2 + p {
		font-size: 14px;
	}
	.sec-lineup .inner-wrap .txt p {
		font-size: 14px;
	}
}

@media (max-width: 1527px) {
	.noshi-list li:nth-of-type(4) {
		bottom: 112px;
	}
}

@media (max-width: 1439px) {
	.sec-lead p .narrow {
		display: block;
	}
	.size-list h3 {
		margin: 0 0 20px 5px;
	}
	.size-list h3 strong {
		font-size: 13px;
	}
	.size-list h3 em {
		font-size: 19px;
	}
	.size-list h3 em span {
		padding-left: 2px;
		font-size: 12px;
	}
	.size-list ul {
		margin-left: 6px;
	}
	.sec-lineup .inner-wrap .txt h4 {
		font-size: 16px;
	}
	.sec-lineup .inner-wrap .txt p {
		letter-spacing: 0.06em;
	}
	.sec-minigift .inner h3 {
		font-size: 16px;
	}
	.cart-gift .cart-nav .narrow {
		display: none;
	}
	.btn-chart h2 {
		margin-right: 10px;
		padding-left: 28px;
		font-size: 14px;
		letter-spacing: 0.1em;
	}
	.btn-chart h2:before {
		top: -3px;
		background-size: 100% auto;
		width: 20px;
		height: 22px;
	}
}

@media (max-width: 1340px) {
	.modal-chart-inner {
		transform: translate(-50%,-50%) scale(0.91) !important;
	}
	.btn-chart {
		background-position: right 18px center;
		background-size: 26px 26px;
		padding-left: 22px;
	}
	.btn-chart p {
		font-size: 10px;
		letter-spacing: 0.12em;
	}
}

@media (max-height: 900px) {
	.modal-chart-inner {
		transform: translate(-50%,-50%) scale(0.91) !important;
	}
}

@media (max-height: 800px) {
	.modal-chart-inner {
		transform: translate(-50%,-50%) scale(0.85) !important;
	}
}