@charset "utf-8";

.card-outer {	display: flex; flex-direction: column;	gap: 5rem; }
.card-outer.-typeA { flex-direction: row; 	flex-wrap: wrap;	justify-content: center; }
.card-outer.-typeA>.card { flex-basis: 48%;	}

.card>.-typeA { flex-direction: column; }
.card-items { display: flex; flex-direction: row; align-items: center; gap: 2%; }
.card-items.-typeA>.card-header { width: 100%; }
.card-items.-reverse_yasuda { display: flex; flex-direction: row-reverse; align-items: center; gap: 1%; }

.card-header { width: 50%; }
.card-ttl { text-align: center; }
.card-ttl>.bg8 { width: fit-content; padding: 0.8% 3%; margin: 0 auto; box-sizing: border-box; font-size: 1.9rem; }
.card-ttl>.c2 { margin: 10px 0; line-height: 1.3; font-size: 3rem; }

.card-body { width: 48%; margin: 0 auto; }
.card-body.-typeA {	width: 100%; }
.card-contents { position: relative; text-align: center; }
.card-contents >div { position: absolute; left: -15%; top: 10%; width: initial; overflow: hidden; }
.card-contents >p { margin-left: 0; line-height: 2; font-size: 1.6rem; }
.card-contents >p.nosumaho {	margin-bottom: 3rem; }
.card-contents.-itemA >figure { position: absolute; right: -10%; margin: 0; }
.card-contents.-itemB >figure { position: absolute; top: 10%; left: -10%; margin: 0; }
.card-contents.-itemC >figure { position: absolute; top: -250%; left: -5%; margin: 0; }
.card-contents.-itemD >figure { position: absolute; top: -250%; right: 0; margin: 0; }
.card-contents.-itemE >figure { position: absolute; top: -270%; left: 0; margin: 0; }
.card-contents.-itemF >figure { position: absolute; top: -280%; right: 0;	margin: 0; }
.card-contents.-itemG >figure { position: absolute; top: -240%; left: 0;	margin: 0; }

.bg_pink_pattern { background:url("/common/img/bg/image3.png") repeat center; background-size: cover; }
.bg_pink_pattern2 { background:url("/common/img/bg/image4.jpg") repeat center; background-size: cover; }
.bg_melon { background:url("/common/img/bg/bg_melon.png") repeat center; background-size: cover; }
.bg_orange { background:url("/common/img/bg/bg_orange.jpg") repeat center; background-size: cover; }
.strip_ttl {
  position: relative;
  padding: 1.5rem;
  text-align: center;
  font-size: 2.6rem;
  font-family: 'AozoraMinchoRegular',sans-serif;
  font-weight: bold;
  color: #434343;
  letter-spacing: 2px;
}
.strip_ttl:before {
  position: absolute;
  bottom: -5px;
  left: calc(50% - 30px);
  width: 60px;
  height: 1px;
  content: '';
  border-radius: 2px;
  background: #434343;
}

.bottom_box{
	display: flex;
	align-items: end;
}
.relativeimg{
	flex-direction: row-reverse;
}

.osusume-inner {
	background-image: url(/common/img/bg/bg_fair_osusume.png);
	background-size: over;
	background-repeat: no-repeat;
	background-position: right -50px top 40px,center;
}
.hakkaisan_vol4_osusume 
{position: absolute; width: 300px; height: 300px; right: -36px;top: 120px;}

/*アニバーサリーのアイコン*/
.anniversary-img { position: relative; }
.anniversary-img .icon-anniversary { width: 160px; height: auto; position: absolute; top: -50px; left: 1px;}

@media screen and (max-width:480px) {
.anniversary-img .icon-anniversary { width: 30%; height: auto; }
}

/*つなん白純米大吟醸画像*/
.sake-img { position: relative; width: 80px; height: 227px; position: absolute; top: 180px; right: 50px;}
.sake-img .notes { position: absolute; top: 240px; left: -170px;}
@media screen and (max-width:480px) {
.sake-img { width: 12%; height: auto; top: 16px; right: 5px;}
}


@media screen and (max-width: 1450px) {
	.card-body { margin: 0; }
	.card-outer.-typeA >.card { flex-basis: 45%; }
	.card-contents>div { top: 0; left: -20%; }
}

.sunner_bg{
	background: linear-gradient(-135deg, #e2f4f6, #eddef7);
}

@media screen and (max-width: 1200px) {
	.card-contents.-itemA>figure,
	.card-contents.-itemB>figure,
	.card-contents.-itemC>figure,
	.card-contents.-itemD>figure,
	.card-contents.-itemE>figure,
	.card-contents.-itemF>figure,
	.card-contents.-itemG>figure {	width: 40%;	}

	.card-contents.-itemA>figure { right: -8%; top: 10%; }
	.card-contents.-itemB>figure { top: 20%; }
	.card-contents.-itemC>figure { top: -210%; }
	.card-contents.-itemD>figure { top: -240%; }
	.card-contents.-itemE>figure { top: -230%; }
	.card-contents.-itemF>figure { top: -230%; }
	.card-contents.-itemG>figure { top: -200%; }
	.card-contents.-itemA>p:nth-of-type(2) { padding-right: 15%; }
	.card-contents.-itemB>p:nth-of-type(2) { padding-left: 20%; }
}

@media screen and (max-width: 1180px) {
	.card-contents.-itemC>figure { top: -200%; }
	.card-contents.-itemD>figure { top: -220%; }
	.card-contents.-itemE>figure { top: -220%; }
	.card-contents.-itemF>figure { top: -250%; }
	.card-contents.-itemG>figure { top: -190%; }
}

@media screen and (max-width: 1140px) {
	.card-contents.-itemC>figure { top: -220%; }
}

@media screen and (max-width: 1110px) {
	.card-contents.-itemG>figure { top: -190%; }
}

@media screen and (max-width: 1024px) {
	.card-contents.-itemC>figure { top: -200%; }
	.card-contents.-itemD>figure { top: -200%; }
	.card-contents.-itemE>figure { top: -200%; }
	.card-contents.-itemF>figure { top: -230%; }
	.card-contents.-itemG>figure { top: -180%; }
}

@media screen and (max-width: 950px) {
	.card-contents.-itemC>figure { top: -200%; }
	.card-contents.-itemE>figure { top: -200%; }
	.card-contents.-itemG>figure { top: -190%; }
}

@media screen and (max-width: 871px) {
	.card-contents.-itemA>figure { top: 20%; }
	.card-contents.-itemE>figure { top: -150%; }
	.card-contents.-itemA>p:nth-of-type(2) { padding-right: 18%; }
}

@media screen and (max-width: 821px) {
	.card-contents.-itemC>figure { top: -180%; }
	.card-contents.-itemD>figure { top: -180%; }
	.card-contents.-itemE>figure { top: -140%; }
	.card-contents.-itemF>figure { top: -190%; }
	.card-contents.-itemG>figure { top: -180%; }
}

@media screen and (max-width: 800px) {
	.card-contents.-itemA>p:nth-of-type(2) { padding-right: 25%; }
	.card-contents.-itemB>p:nth-of-type(2) { padding-left: 30%; }

	.card-contents.-itemE>figure { top: -140%; }
	.card-contents.-itemF>figure { top: -170%; }
}

@media screen and (max-width: 780px) {
	.card-contents.-itemC>figure { top: -180%; }
	.card-contents.-itemD>figure { top: -180%; }
}

@media screen and (max-width: 735px) {
	.card-contents.-itemC>figure { top: -150%; }
}

@media screen and (max-width: 704px) {
	.card-contents.-itemC>figure { top: -140%; }
	.card-contents.-itemD>figure { top: -130%; }
	.card-contents.-itemE>figure { top: -160%; }
	.card-contents.-itemF>figure { top: -185%; }
	.card-contents.-itemG>figure { top: -160%; }
}

@media screen and (max-width: 691px) {
	.card-contents.-itemC>figure { top: -130%; }
	.card-contents.-itemG>figure { top: -130%; }
}

@media screen and (max-width: 660px) {
	.card-contents.-itemC>figure { top: -110%; }
	.card-contents.-itemD>figure { top: -130%; }
	.card-contents.-itemE>figure { top: -150%; }
	.card-contents.-itemF>figure { top: -180%; }
}


@media screen and (max-width: 601px) {
	.card-outer { display: flex; flex-direction: column; gap: 15rem; }
	.card-outer.-typeA>.card { flex-basis: 100%; }

	.card-items,
	.card-items.-reverse_yasuda { display: flex; flex-direction: column; gap: 1rem; }

	.card-header { width: 100%; }
	.card-body { width: 100%; }

	.card-ttl { text-align: center; }
	.card-ttl>.bg8 { width: fit-content; padding: 0.8% 3%; margin: 0 auto; box-sizing: border-box; font-size: 1.9rem; }
	.card-ttl>.c2 { margin: 10px 0; line-height: 1.3; font-size: 3rem; }

	.card-contents.-itemA>figure,
	.card-contents.-itemB>figure,
	.card-contents.-itemC>figure,
	.card-contents.-itemD>figure,
	.card-contents.-itemE>figure,
	.card-contents.-itemF>figure,
	.card-contents.-itemG>figure { width: 28%; }

	.card-contents.-itemA>figure { right: inherit; left: inherit; }
	.card-contents.-itemB>figure { right: 0; left: inherit; }
	.card-contents.-itemC>figure,
	.card-contents.-itemD>figure,
	.card-contents.-itemE>figure,
	.card-contents.-itemF>figure,
	.card-contents.-itemG>figure { top: 0; }
	.card-contents.-itemC>figure { left: 0; }

	.card-contents>p { margin-left: 28%; text-align: left; }
	.card-contents.-itemA>p:nth-of-type(2) { padding-right: 0; }
	.card-contents.-itemB>p:nth-of-type(2) { padding-left: 0; margin-right: 28%; margin-left: 0; }
	.card-contents.-itemD>p ,
	.card-contents.-itemF>p { margin-right: 25%; margin-left: 0; }
	.card-contents.-itemE>p { padding-left: 5%; }
	.card-contents>p.sstc { margin-left: 0; text-align: center; }
}
@media screen and (max-width:600px) {
	.bottom_box{ display: block;}
	.osusume-inner {
	background-size: contain;
	background-position: right 0px bottom -40px,center;
}
	.hakkaisan_vol4_osusume {position: absolute; width: 150px; height: 150px; right: -20px; top: 50px;}

}