@charset "UTF-8";

/*---------------------------------------------------
				PC/sp setteing    
---------------------------------------------------*/

/*common*/
#xmasfair {
  color:#3a3b3d;
  overflow-x: hidden;
  position: relative;
  letter-spacing: 0.1rem;
  font-size:16px;
  z-index:0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#xmasfair a {
  transition: .2s ease-in-out;
}

.xmasfair__h2, .xmasfair__h3, .xmasfair__h4, .xmasfair__h5 {
  color:#3a3b3d;
}

.xmasfair__color-deepgreen {
  color:#293320;
}
.xmasfair__bg-color-deepgreen {
  background-color:#293320;
}
.xmasfair__bg-color-beige {
  background-color:#F4F2EC;
}

/* リンクボタン */
.xmasfair__linkbtn {
  background-color:#453F38;
  color:#fff;
  display:block;
  text-align:center;
}
.xmasfair__linkbtn:hover {
  background-color:#6F665B;
  color:#fff;
}

.xmasfair__linkbtn-green {
  background-color:#293320;
  color:#fff;
  display:block;
  text-align:center;
}
.xmasfair__linkbtn-green:hover {
  background-color:#4E603E;
  color:#fff;
}

/*--------------------------------------------------- テキストアニメーション ----------*/
.xmasfair__text-focus-in {
	-webkit-animation: xmasfair__text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: xmasfair__text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes xmasfair__text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes xmasfair__text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

/*------------キービジュアル------------*/
.xmasfair__key-visual {
  background-color:#11191F;
}
.xmasfair__key-visual--image {
  overflow: hidden;
  filter: blur(0);
  animation-name: blur;
  animation-duration: 1.5s;
}
@keyframes blur {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(0);
  }
}

.xmasfair__key-visual--image > picture {
  display: block;
  height: 100%;
}

.xmasfair__key-visual--image > picture > img {
  /*height: 100%;*/
  /*object-fit: cover;*/
  width: 100%;
}

/*--------------------------------------------------- intro ----------*/
.xmasfair__introduction-fadein {
    opacity: 0;
    animation: xmasfair__introduction-fadein 1s ease forwards;
}
@keyframes xmasfair__introduction-fadein {
  0% { opacity: 0; transform:translateY(10%); }
  100% { opacity: 1; transform:translateY(0); }
}
 
/*以下遅延の指定*/
.xmasfair__introduction-text01 {animation-delay: 1.1s;}
.xmasfair__introduction-text02 {animation-delay: 1.3s;}
.xmasfair__introduction-text03 {animation-delay: 1.5s;}
.xmasfair__introduction-text04 {animation-delay: 1.7s;}
.xmasfair__introduction-text05 {animation-delay: 1.9s;}
.xmasfair__introduction-text06 {animation-delay: 2.1s;}
.xmasfair__introduction-text07 {animation-delay: 2.3s;}
.xmasfair__introduction-text08 {animation-delay: 2.5s;}
.xmasfair__introduction-text09 {animation-delay: 2.7s;}

/*--------------------------------------------------- animation ----------*/
.xmasfair__is-animate {
  visibility: visible !important;
}
.xmasfair__is-animate.xmasfair__fade-in,
.xmasfair__is-animate.xmasfair__fade-up,
.xmasfair__is-animate.xmasfair__fade-right,
.xmasfair__is-animate.xmasfair__fade-left {
	opacity: 0;
  animation: xmasfair__fade-in 1.5s ease forwards;
}
.xmasfair__is-animate.xmasfair__fade-up {
	animation: xmasfair__fade-up 1.5s ease forwards;
}
.xmasfair__is-animate.xmasfair__fade-right {
	animation: xmasfair__fade-right 1.5s ease forwards;
}
.xmasfair__is-animate.xmasfair__fade-left {
	animation: xmasfair__fade-left 1.5s ease forwards;
}
@keyframes xmasfair__fade-in {
  100% { opacity: 1; }
}
@keyframes xmasfair__fade-up {
  0% { opacity: 0; transform:translateY(10%); }
  100% { opacity: 1; transform:translateX(0); }
}
@keyframes xmasfair__fade-right {
  0% { opacity: 0; transform:translateX(10%); }
  100% { opacity: 1; transform:translateY(0); }
}
@keyframes xmasfair__fade-left {
  0% { opacity: 0; transform:translateX(-10%); }
  100% { opacity: 1; transform:translateY(0); }
}

/*--------------------------------------------------- order ----------*/
.xmasfair__order-inner,#xmasfair__caution {
  color:#3a3b3d;
  font-size:0.9rem;
}

/*---------------------------------------------------
				PC   
---------------------------------------------------*/
@media screen and (min-width: 768px) {
/*common*/
.xmasfair__h2 {font-size:2rem;}
.xmasfair__h3 {font-size:1.7rem;}
.xmasfair__h4 {font-size:1.1rem;}

/*------------キービジュアル------------*/
  .xmasfair__key-visual {
    position:relative;
  }
  .xmasfair__key-visual--image {
    position:relative;
    width: 100%;
    z-index:1;
  }
  
  .xmasfair__title {
    background-color:#fff;
    position: absolute;
    bottom: -13%;
    right: 0;
    left: 0;
    margin: auto;
    padding:2rem;
    width: 53%;
    z-index: 2;
  }
  .xmasfair__title--h2 {
    font-size:calc(15px + 1.50vw);
    letter-spacing:0.2rem;
    margin:0 auto 1rem;
    position:relative;
  }
  
/*--------------------------------------------------- intro ----------*/
.xmasfair__introduction {
  padding: 11% 0 7%;
}
.xmasfair__introduction-p {
  font-size:18px;
  line-height: 2.3;
}


/*--------------------------------------------------- プロポーズアイテム ----------*/
.xmasfair__propose-item--container {
  width:100%;
  max-width:1500px;
  margin:auto;
}

.xmasfair__propose-item--image,.xmasfair__propose-item--text {
  width:50%;
}

.xmasfair__propose-item--catering {
  position:relative; 
}
.xmasfair__propose-item--ex {
  position:absolute;
  bottom:5px;
  left:10px;
  font-size:0.8rem;
  text-shadow:0 0 10px rgba(0,0,0,0.7);
}

.xmasfair__propose-item--sub {
  color:#B7AF9C;
  font-size:1.2rem;
  font-family: 'Playfair Display', serif;
  line-height:1;
}
.xmasfair__propose-item--sub:first-letter {
  font-size:250%;
}

.xmasfair__propose-item--provider {
  font-size:1.2rem;
}

.xmasfair__propose-item--paragraph {
  height:490px;
}

.xmasfair__propose-item--caution {
  position:relative;
  margin:0 auto ;
  width:800px;
}
.xmasfair__propose-item--caution:before, .xmasfair__propose-item--caution:after {
  content: '';
  width: 200px;
  height: 70px;
  position: absolute;
  display: inline-block;
}
.xmasfair__propose-item--caution:before {
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
  top: 0;
  left: 0;
}
.xmasfair__propose-item--caution:after {
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  bottom: 0;
  right: 0;
}

/*--------------------------------------------------- お客様の声 ----------*/
.xmasfair__review-inner {
  margin-top: -20px;
  height: 285px;
}

.xmasfair__review-inner--p {
  padding: 9% 7% 7%;
  font-size:0.85rem;
}

.xmasfair__review-title {
  font-size:0.9rem;
}

/*--------------------------------------------------- order ----------*/
.xmasfair__order-h3 {
	font-size: 1.75rem;
}
.xmasfair__order-bitem-img {
	width: 70%;
}
.xmasfair__order-block {
  border:1px solid #ddd;
}
.xmasfair__order-block-arrow {
  position:relative;
}
.xmasfair__order-block-arrow::before {
  position:absolute;
  content:'';
  width: 10px;
  height: 10px;
  top:-5px;
  left:37px;
  border-top: solid 1px #888;
  border-right: solid 1px #888;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin:auto 0;
}
.xmasfair__order-list {
  list-style:disc;
}
.xmasfair__order-list-inner {
  list-style:circle;
}
.xmasfair__order-list-inner-dl dd {
  line-height:1.8em;
}
.xmasfair__order-bottom-list {
  list-style:disc;
  max-width: 850px;
  margin:0 auto;
}

/*--------------------------------------------------- Q&A ----------*/
.xmasfair__q-and-a-ul {
	display:flex;
	margin: 0 auto;
	justify-content: space-between;
	flex-wrap :wrap;
}
.xmasfair__q-and-a-list {
	overflow: hidden;
	position: relative;
	display: block;
	text-align: center;
	background: #fff;
	width: 31%;
	box-shadow: 0 0 6px rgba(0,0,0,0.1);
	margin-top: 2.3vw;
  padding: 15% 0;
	letter-spacing: 0.01rem;
}
.xmasfair__q-and-a-image {
  position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
  max-width: 200px;
  width: 80%;
}
.xmasfair__q-and-a-p {
	position: absolute;
	left: 0;
	right: 0;
	top: 10%;
	padding: 0 4%;
}
.xmasfair__q-and-a-mask {
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	padding: 30px;
	text-align: justify;
	background-color: rgba(41,51,32,0.95);
	transition: all 0.2s ease;
	line-height :1.5rem;
}
.xmasfair__q-and-a-list:hover .xmasfair__q-and-a-mask {opacity:1;}


/*--------------------------------------------------- caution ----------*/
.xmasfair__caution-list {
  list-style:disc;
}
.xmasfair__caution-list li {
  line-height:1.8em;
}

/*--------------------------------------------------- cooperation ----------*/
.xmasfair__cooperation-img {
  padding: 20% 15% 0;
}
.xmasfair__cooperation-img-primechef {
  padding-bottom: 3.8%;
}
.xmasfair__cooperation-dl {
  border-top: 1px solid #ccc;
  padding-top: 8%;
  margin-top: 5%;
}
.xmasfair__cooperation-tel {
	font-size: 1.5rem;
}
}

/*---------------------------------------------------
				bootstrap_lgブレークポイント  
---------------------------------------------------*/
@media screen and (min-width:767px) and (max-width:992px) {
  /*--------------------------------------------------- full-main ----------*/
.xmasfair__container {
  width: 1140px;
  max-width: 100%;
}

.xmasfair__title {
    width: 85vw;
  }
.xmasfair__title--h2 {
    font-size:calc(22px + 1.05vw);
  }
  
.xmasfair__propose-item--caution {
  position:relative;
  margin:30px auto 0;
  width:680px;
}
.xmasfair__propose-item--caution:before, .xmasfair__propose-item--caution:after {
  content: '';
  width: 200px;
  height: 70px;
  position: absolute;
  display: inline-block;
}
.xmasfair__propose-item--caution:before {
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
  top: 0;
  left: 0;
}
.xmasfair__propose-item--caution:after {
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  bottom: 0;
  right: 0;
}
}
/*---------------------------------------------------
				1200px〜    
---------------------------------------------------*/
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1300px) {
}


/*---------------------------------------------------
				sp   
---------------------------------------------------*/
@media screen and (max-width: 767px) {
.xmasfair__h2 {font-size: 1.45rem;}
.xmasfair__h3 {font-size: 1.3rem;}
.xmasfair__h4 {font-size: 1.1rem;}
  
/*------------キービジュアル------------*/
.xmasfair__key-visual--image {
  width: 100%;
  height: 100%;
  position: relative;
}

.xmasfair__key-visual {
  width: 100%;
  height: 100%;
  position:relative;
}
.xmasfair__key-visual--image {
  position:relative;
  width: 100%;
  z-index:1;
}

.xmasfair__title {
  background-color:#fff;
  position: absolute;
  bottom: -20%;
  right: 0;
  left: 0;
  margin: auto;
  padding:0.6rem;
  width: 90%;
  z-index: 2;
}
.xmasfair__title--h2 {
  font-size:calc(23px + 1.05vw);
  margin: 0.5rem auto 0.8rem auto;
  line-height: 1.3;
  position:relative;
}
.xmasfair__title--p {
  font-size:0.8rem;
}

/*--------------------------------------------------- intro ----------*/
.xmasfair__introduction {
  padding: 35% 0 16%;
}
.xmasfair__introduction-p {
  line-height: 2.2;
  width: 86%;
  margin: 0 auto;
}

/*--------------------------------------------------- プロポーズアイテム ----------*/
.xmasfair__propose-item--container {
  width:100%;
}

.xmasfair__propose-item--image {
  width:100%;
}
.xmasfair__propose-item--text {
 width:92%;
 margin:0 auto;
}

.xmasfair__propose-item--catering {
  position:relative; 
}
.xmasfair__propose-item--ex {
  position:absolute;
  bottom:5px;
  left:10px;
  font-size:0.75rem;
  text-shadow:0 0 10px rgba(0,0,0,0.7);
}

.xmasfair__propose-item--p {
  letter-spacing:0.08rem;
}

.xmasfair__propose-item--sub {
  color:#B7AF9C;
  font-size:0.9rem;
  font-family: 'Playfair Display', serif;
  line-height:1;
}
.xmasfair__propose-item--sub:first-letter {
  font-size:250%;
}

.xmasfair__propose-item--provider {
  font-size:1rem;
}

.xmasfair__propose-item--paragraph {
  width:92%;
  margin:0 auto;
}

.xmasfair__propose-item--caution {
  font-size:0.9rem;
  position:relative;
  margin:0 auto;
  width:92%;
}
.xmasfair__propose-item--caution:before, .xmasfair__propose-item--caution:after {
  content: '';
  width: 60px;
  height: 60px;
  position: absolute;
  display: inline-block;
}
.xmasfair__propose-item--caution:before {
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
  top: 0;
  left: 0;
}
.xmasfair__propose-item--caution:after {
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  bottom: 0;
  right: 0;
}

/*--------------------------------------------------- お客様の声 ----------*/
.xmasfair__review-inner {
  width:94%;
  margin: -20px auto 0;
}

.xmasfair__review-inner--p {
  padding: 9% 7% 7%;
  font-size:0.9rem;
}

.xmasfair__review-title {
  font-size:0.9rem;
}

/*--------------------------------------------------- order ----------*/
  .xmasfair__order-h3 {
  	font-size: 1.34rem;
  	letter-spacing: 0;
  	text-align: center;
  }
  .xmasfair__order-bitem-img {
  	width: 100%;
  	padding: 0 10px 0 0;
  }
  .xmasfair__order-block {
    border: 1px solid #ddd;
  }
  .xmasfair__order-block-arrow {
    position:relative;
  }
  .xmasfair__order-block-arrow::before {
    position:absolute;
    content:'';
    width: 10px;
    height: 10px;
    top:-5px;
    left:37px;
    border-top: solid 1px #888;
    border-right: solid 1px #888;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin:auto 0;
  }
  .xmasfair__order-list {
    list-style:disc;
  }
  .xmasfair__order-list-inner {
    list-style:circle;
  }
  .xmasfair__order-list-inner-dl dd {
    line-height:1.8em;
  }
  .xmasfair__order-bottom-list {
    list-style:disc;
    max-width: 850px;
    margin:0 auto;
  } 

  .xmasfair__order-inner {
    width:90%;
    margin:0 auto;
  }
  .xmasfair__order-intro-list li {
    line-height:1.8em;
  }
  .xmasfair__order-block {
    border:1px solid #ddd;
  }
  .xmasfair__order-block-arrow {
    position:relative;
    padding:4%;
  }
  .xmasfair__order-block-arrow::before {
    position:absolute;
    content:'';
    width: 13px;
    height: 13px;
    top:0;
    left:0;
    right:0;
    border-top: solid 1px #888;
    border-right: solid 1px #888;
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    margin:0 auto;
  }
  .xmasfair__order-list {
    list-style: disc;
    line-height: 1.8em;
    margin: 0 auto;
    width: 95%;
  }
  .xmasfair__order-list-inner {
    list-style:circle;
  }
  .xmasfair__order-list-inner-dl dd {
    line-height:1.6em;
  }
  .xmasfair__caution-list {
    list-style:disc;
    margin:0 auto;
    padding-left:3%;
    width:90%;
  }
  .xmasfair__order-bottom-list li {
    line-height:1.8em;
  }
  
  /*--------------------------------------------------- Q&A ----------*/
  .xmasfair__q-and-a {
  }
  .xmasfair__q-and-a-ul {
    margin: 0 auto;
    width: 90%;
  }
  .xmasfair__q-and-a-list {
  	overflow: hidden;
  	position: relative;
  	display: block;
  	text-align: center;
  	background: #fff;
  	width: 100%;
  	box-shadow: 0 0 6px rgba(0,0,0,0.1);
  	margin-top: 4%;
    padding: 48% 0;
  	letter-spacing: 0.01rem;
  }
  .xmasfair__q-and-a-image {
    position: absolute;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	margin: auto;
    max-width: 280px;
    width: 70%;
  }
  .xmasfair__q-and-a-p {
  	position: absolute;
  	left: 0;
  	right: 0;
  	top: 8%;
  	padding: 0 3%;
  	letter-spacing: -.015em;
  }
  .xmasfair__q-and-a-mask {
  	color: #fff;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 100%;
  	height: 100%;
  	position: absolute;
  	top: 0;
  	left: 0;
  	opacity: 0;
  	padding: 10px;
  	text-align: justify;
  	background-color: rgba(41,51,32,0.95);
  	transition: all 0.2s ease;
  	line-height :1.5rem;
  }
  .xmasfair__q-and-a-list:hover .xmasfair__q-and-a-mask {opacity:1;}
  
  
  /*--------------------------------------------------- caution ----------*/
  .xmasfair__caution-inner {
    margin: 0 auto;
    width: 95%;
  }
  .xmasfair__order-bottom-list {
    list-style:disc;
    margin:0 auto;
    padding-left:3%;
    width:90%;
  }
  .xmasfair__caution-list li {
    line-height:1.8em;
  }
  
  /*--------------------------------------------------- cooperation ----------*/
  .xmasfair__cooperation-inner {
    padding: 5%;
    border-bottom: 3px solid #fff;
  }
  .xmasfair__cooperation-inner:nth-of-type(3) {
    border-bottom: none;
    padding-bottom: 10%;
  }
  .xmasfair__cooperation-img {
    padding: 8% 10% 0;
  }
  .xmasfair__cooperation-img-primechef {
  padding-bottom: 2%;
}
  .xmasfair__cooperation-dl {
    border-top:1px solid #ccc;
    padding-top:8%;
    margin-top:4%;
  }
  .xmasfair__cooperation-tel {
    font-size: 1.3rem;
  }
}