@charset "utf-8";
.sippori{
	font-family: 'Shippori Mincho', serif;
}
h1.fs-c-heading.fs-c-heading--page {
  display: none;
}
h2.matome-title {
  text-align: center;
  margin-bottom: 20px;
}
.matome-cap {
  text-align: center;
  font-weight: bold;
}
h2.matome-title::before {
  content: "";
  background: url(https://www.farbeco.jp/images/thanksgift/title-deco1.svg) no-repeat;
  background-size: contain;
  display: block;
}
.matome-catch-img {
  margin: 0 auto 50px;
}
.kumiawase{
	background-size: auto auto;
	background-color: rgba(255, 240, 242, 1);
	background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(255, 233, 236, 1) 5px, rgba(255, 233, 236, 1) 10px );
	padding-bottom: 10px;
}
h3.kumiawase-title {
  text-align: center;
  color: #fff;
  font-weight: 500;
  z-index: 2;
  position: relative;
  letter-spacing: .1em;
  margin-bottom: 15px;
}
span.deco-dot {
  position: relative;
}
span.deco-dot::before {
  content: "";
  display: inline-block;
  background: #eded28;
  border-radius: 50%;
  position: absolute;
  left: 50%;
	transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
}
.matome-ex {
  text-align: center;
  font-weight: bold;
  position: relative;
}
.matome-ex span{
  background-image: linear-gradient(90deg, #ff9d23, #fad3db, #fbfaca);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
  padding: 0 .5em;
}
.matome-ex::after{
	content: "";
  background: url(https://www.farbeco.jp/images/thanksgift/title-deco2.png) no-repeat center center;
  background-size: contain;
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	margin: auto;
	display: inline-block;
}
.pattern {
  background: #fff;
  position: relative;
  box-shadow: 3px 3px 5px #888;
}
.pattern::before{
	content: "";
  background: url(https://www.farbeco.jp/images/thanksgift/title-ribon-pk.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
}
.pattern.pattern2::before,
.pattern.pattern4::before{
  background: url(https://www.farbeco.jp/images/thanksgift/title-ribon-or.svg) no-repeat center center;
  background-size: contain;
}
h4.pattern-title {
  color: #fff;
  position: absolute;
  line-height: 1;
}
.pattern-catch {
  text-align: center;
  color: #f78989;
}
.pattern.pattern2 .pattern-catch,
.pattern.pattern4 .pattern-catch{
	color: #ff9d22;
}
.pattern-text-list{
	justify-content: center;
	align-items: center;
}
.pattern-text-list li {
  width: 30%;
  text-align: center;
  font-weight: bold;
}
.pattern-text-list li.liplus{
	width: 4%;
}
.pattern-img-list {
  justify-content: space-between;
}
.pattern-img-list li{
	width: 32%;
}
.pattern.pattern2 .pattern-text-list li,
.pattern.pattern4 .pattern-text-list li{
	width: 22%;
}
.pattern.pattern2 .pattern-text-list li.liplus,
.pattern.pattern4 .pattern-text-list li.liplus{
	width: 4%;
}
.matome-p-title {
  text-align: center;
  line-height: 1.5;
  font-weight: bold;
}
@media screen and (min-width: 1200px){
	h3.kumiawase-title {
	  font-size: 22px;
	  padding-top: 40px;
	}
	span.font-bg {
	  font-size: 30px;
	}

}
@media screen and (min-width: 768px){
	h2.matome-title::before {
	  width: 200px;
	  height: 35px;
	  margin: 50px auto 20px;
	}
	h2.matome-title {
	  font-size: 26px;
	}
	.matome-cap {
	  font-size: 18px;
	  margin-bottom: 10px;
	}
	.matome-catch-img {
	  width: 95%;
	}
	.matome-tokuten {
	  margin-bottom: 80px;
	}
	.kumiawase-inner {
	  padding: 80px 8% 60px;
	}
	h3.kumiawase-title {
	  text-align: center;
	  background: url(https://www.farbeco.jp/images/thanksgift/midashi-bg-pc.png) no-repeat center center;
	  background-size: contain;
	  width: 100%;
	  height: 150px;
	}
	span.deco-dot::before {
	  width: 5px;
	  height: 5px;
	  top: -5px;
	}
	span.pcgrk {
	  background-image: linear-gradient(90deg, #fad3db, #fbfaca);
	  background-repeat: no-repeat;
	  background-position: bottom;
	  background-size: 100% 40%;
	  padding: 0 .5em;
	}
	.matome-ex {
	  font-size: 32px;
	}
	.matome-ex::after{
		width: 250px;
		height: 55px;
	}
	.pattern {
	  width: 90%;
	  margin: 0 auto 80px;
	  padding: 40px;
	}
	.pattern::before{
	  width: 264px;
	  height: 90px;
	  top: -40px;
	  left: -18px;
	}
	h4.pattern-title {
	  top: -28px;
	  left: 5%;
	  font-size: 24px;
	}
	h4.pattern-title span{
		font-size: 33px;
	}
	.matome-ex {
	  margin-bottom: 100px;
	}
	.pattern-catch {
	  font-size: 20px;
	  margin-bottom: 30px;
	}
	.pattern-text-list li {
	  font-size: 22px;
	  margin-bottom: 20px;
	}
	.matome-p-title {
	  font-size: 30px;
	  margin-bottom: 30px;
	}
	.matome-p-title span::before,
	.matome-p-title span::after{
		content: "";
	  display: inline-block;
	  position: absolute;
	}
	.matome-p-title span::before{
	  background: url(https://www.farbeco.jp/images/thanksgift/title-deco-left.svg) no-repeat center center;
	  background-size: contain;
	  top: -5px;
	  left: -120px;
	}
	.matome-p-title span::after{
	  background: url(https://www.farbeco.jp/images/thanksgift/title-deco-right.svg) no-repeat center center;
	  background-size: contain;
	  top: -5px;
	  right: -60px;
	}
	.matome-p-title span::before,
	.matome-p-title span::after{
	  width: 56px;
	  height: 90px;
	}
	.matome-p-title span{
	  position: relative;
	}
	.kumiawase{
	  margin-bottom: 150px;
	}

}
@media screen and (min-width: 768px) and (max-width: 1200px){
	h3.kumiawase-title {
	  font-size: 1.7vw;
		padding-top: 3.6vw;	  
		height: 140px;
	}
	span.font-bg {
	  font-size: 2.4vw;
	}

}
@media screen and (min-width: 1201px){
	.pattern-catch span{
	  position: relative;
	}
	.pattern-catch span::before{
		content: "＼";
	  position: absolute;
	  font-weight: bold;
	  top: -5px;
	  left: -1.2em;
	  transform: rotate(12deg);
	}
	.pattern-catch span::after{
		content: "／";
	  position: absolute;
	  font-weight: bold;
	  top: -5px;
	  right: -1.2em;
	  transform: rotate(-12deg);
	}

}
@media screen and (max-width: 1200px){
	.pd{
		display: block !important;
	}
	.pattern-catch {
    font-size: 22px;
	}
}
@media screen and (max-width: 1100px){
	h3.kumiawase-title {
	  padding-top: 4.5vw;
	}
}
@media screen and (max-width: 1000px){
	h3.kumiawase-title {
	  padding-top: 40px;
	}
	h3.kumiawase-title {
	  font-size: 2.2vw;
	}
	span.font-bg {
	  font-size: 3vw;
	}
	.pattern-catch{
		position: relative;
	}
	.pattern-catch::before{
		content: "＼";
	  position: absolute;
	  font-weight: bold;
	  top: 5px;
    left: 10%;
    transform: rotate(25deg);
    font-size: 44px;
	}
	.pattern-catch::after{
		content: "／";
	  position: absolute;
	  font-weight: bold;
	  top: 5px;
	  right: 10%;
    transform: rotate(-25deg);
    font-size: 44px;
	}
	.pattern3 .pattern-catch::before{
    left: 15%;
	}
	.pattern3 .pattern-catch::after{
	  right: 15%;
	}

}
@media screen and (min-width:1001px) and ( max-width:1200px) {
	.pattern-catch{
	  position: relative;
	}
	.pattern-catch::before{
		content: "＼";
	  position: absolute;
	  font-weight: bold;
    transform: rotate(25deg);
    font-size: 44px;
    top: 5px;
	}
	.pattern-catch::after{
		content: "／";
	  position: absolute;
	  font-weight: bold;
    transform: rotate(-25deg);
    font-size: 44px;
    top: 5px;
	}
	.pattern-catch::before{
    left: 0;
	}
	.pattern-catch::after{
	  right: 0;
	}
	.pattern3 .pattern-catch::before{
    left: 5%;
	}
	.pattern3 .pattern-catch::after{
	  right: 5%;
	}

}
@media screen and (min-width:415px) and ( max-width:767px) {
	.pattern-catch {
		font-size: 3.3vw;
		line-height: 1.4;
	}
	.pattern-catch::before {
    top: 3px;
    left: 5%;
    font-size: 36px;
	}
	.pattern-catch::after {
    top: 3px;
	  right: 5%;
    font-size: 36px;
	}
	.pattern3 .pattern-catch::before{
    left: 10%;
	}
	.pattern3 .pattern-catch::after{
	  right: 10%;
	}
}

@media screen and (max-width: 767px){
	main.mininner {
    width: 100%;
	}
	.spinner.spinner2 {
    width: 90%;
	}
	h2.matome-title::before {
	  width: 120px;
	  height: 21px;
	  margin: 40px auto 10px;
	}
	h2.matome-title {
	  font-size: 4vw;
    line-height: 1.5;
	}
	.matome-cap {
   font-size: 2.5vw;
    margin-bottom: 30px;
	}
	.matome-catch-img {
	  width: 80%;
	}
	.matome-tokuten {
    width: 80%;
    margin: 0 auto 50px;
	}
	.kumiawase-inner {
    padding: 40px 5%;
	}
		h3.kumiawase-title {
	  text-align: center;
    background: url(https://www.farbeco.jp/images/thanksgift/midashi-bg-sp.png) no-repeat center center;
    background-size: contain;
    width: 80%;
    height: 23vw;
    font-size: 3vw;
    padding-top: 4vw;
    line-height: 1.5;
    margin: 0 auto 15px;
	}
	span.font-bg {
	  font-size: 3.6vw;
	}
	span.deco-dot::before {
	  width: 3px;
	  height: 3px;
	  top: -1px;
	}
	span.spgrk {
	  background-image: linear-gradient(90deg, #fad3db, #fbfaca);
	  background-repeat: no-repeat;
	  background-position: bottom;
	  background-size: 100% 40%;
	}
	.kumiawase-img {
    width: 90%;
    margin: 0 auto;
	}
	.matome-ex {
	  font-size: 5vw;
	}
	.matome-ex::after{
		width: 33vw;
    height: 8vw;
	}
	.pattern {
	  width: 86%;
	  margin: 0 auto 60px;
	  padding: 30px 3%;
	}
	.pattern::before{
	  width: 150px;
	  height: 51px;
	  top: -20px;
	  left: -11px;
	}
	h4.pattern-title {
    top: -14px;
    left: 3%;
    font-size: 16px;
	}
	h4.pattern-title span {
    font-size: 20px;
	}
	.matome-ex {
	  margin-bottom: 80px;
	}
	.pattern-catch {
	  margin-bottom: 20px;
	}
	.pattern-catch{
	  position: relative;
	}
	.pattern-catch::before{
		content: "＼";
	  position: absolute;
	  font-weight: bold;
    left: 0;
    transform: rotate(25deg);
	}
	.pattern-catch::after{
		content: "／";
	  position: absolute;
	  font-weight: bold;
	  right: 0;
    transform: rotate(-25deg);
	}
	.pattern3 .pattern-catch::before{
    left: 5%;
	}
	.pattern3 .pattern-catch::after{
	  right: 5%;
	}
	.pattern-text-list,
	.pattern-img-list {
    display: flex;
	}
	.pattern-text-list li {
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.4;
	}
	.matome-p-title {
	  font-size: 4.6vw;
	  line-height: 1.4;
	  margin-bottom: 20px;
	}
	.matome-p-title{
	  position: relative;
	}
	.matome-p-title::before,
	.matome-p-title::after{
		content: "";
	  display: inline-block;
	  position: absolute;
	}
	.matome-p-title::before{
	  background: url(https://www.farbeco.jp/images/thanksgift/title-deco-left.svg) no-repeat center center;
	  background-size: contain;
    top: 7px;
	  left: 15%;
	}
	.matome-p-title::after{
	  background: url(https://www.farbeco.jp/images/thanksgift/title-deco-right.svg) no-repeat center center;
	  background-size: contain;
    top: 7px;
    right: 15%;
	}
	.matome-p-title::before,
	.matome-p-title::after{
	  width: 45px;
	  height: 70px;
	}
	.kumiawase{
	  margin-bottom: 60px;
	}

}
@media screen and (max-width: 414px){
	h2.matome-title {
	  font-size: 20px;
	  line-height: 1.4;
	}
	.matome-cap {
	  font-size: 14px;
	}
	.matome-catch-img {
	  width: 90%;
	}
	.matome-tokuten {
    width: 90%;
    margin: 0 auto 50px;
	}
	.pattern-catch {
    font-size: 14px;
	}
	.pattern-catch::before{
    top: 0;
    font-size: 26px;
	}
	.pattern-catch::after{
	  top: 0;
    font-size: 26px;
	}
	h3.kumiawase-title {
	  width: 338px;
	  height: 120px;
	  font-size: 16px;
	  padding-top: 20px;
	}
	span.font-bg {
	  font-size: 18px;
	}
	span.deco-dot::before {
	  width: 3px;
	  height: 3px;
	  top: -1px;
	}
	.matome-ex {
	  font-size: 22px;
	}
	.matome-ex::after{
		width: 160px;
		height: 34px;
	}
	.matome-p-title {
	  font-size: 20px;
	  margin-bottom: 20px;
	}
	.matome-p-title::before,
	.matome-p-title::after{
	  width: 36px;
	  height: 58px;
	}
	.matome-p-title::before{
    top: 0;
	  left: 10%;
	}
	.matome-p-title::after{
    top: 0;
    right: 10%;
	}

}
@media screen and (max-width: 320px){
	h3.kumiawase-title {
	  width: 98%;
	  height: 120px;
	  font-size: 13px;
	  padding-top: 28px;
	}
	span.font-bg {
	  font-size: 15px;
	}
	
}