@charset "utf-8";

/*//////////////////////////////////////////////////////
　初期値
//////////////////////////////////////////////////////*/
html,body{
  height: 100%;
}
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article, header, footer, aside, figure, figcaption, nav, section { 
  display:block;
}
body {
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  position: relative;
}
ol, ul {
  list-style: none;
  list-style-type: none;
}

/*//////////////////////////////////////////////////////
　基本部分
//////////////////////////////////////////////////////*/

html {
  font-size: 62.5%;
}
body {
  font-size: 1.5rem;
  line-height: 1.8;
  font-family: "dnp-shuei-mgothic-std", sans-serif;
  font-weight: 400;
  color: #5d5d5d;
  position: relative;
}
h1,h2 {
  font-family: "dnp-shuei-mgothic-std", sans-serif;
  font-weight: 600;
  font-size: 2em;
}
img {
  max-width: 100%;
}
a {
  transition: 0.4s;
  color: #5d5d5d;
  text-decoration: none;
}
a img {
  transition: 0.4s;
}
a:hover img {
  opacity: 0.5;
}
.strong {
  font-weight: 600;
}
.marker_bl{
  background-image: linear-gradient(transparent 70%, rgba(143,217,230,0.5) 0%);
  display: inline;
}
.marker_pi{
  background-image: linear-gradient(transparent 70%, rgba(247,215,217,0.5) 0%);
  display: inline;
}
.marker_wh{
  background-image: linear-gradient(transparent 70%, rgba(255,255,255, 0.5) 0%);
  display: inline;
}
.clear {
  clear: both;
}
.sp {
  display: block;
}
.pc {
  display: none;
}

@media screen and (min-width:1024px) {
  body {
    font-size: 2rem;
  }
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
}

/*ボタン*/
a div.btn {
	display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
	margin: auto;
	padding: 0.5em 0.5em 0.5em 1.5em;
	border: 2px solid #8fd9e6;
	background: #8fd9e6;
	color: #fff;
	border-radius: 100vh;
  position: relative;
	transition: 0.5s;
}
a div.btn::after {
	content: '';
	width: 0.5em;
	height: 0.5em;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
	transition: 0.5s;
}
a:hover div.btn{
	color: #8fd9e6;
	background: #fff;
}
a:hover div.btn::after {
  border-color: #8fd9e6;
}

/*//////////////////////////////////////////////////////
　コンテンツ部分
//////////////////////////////////////////////////////*/

article {
  position: relative;
}

#Introduction {
  text-align: center;
}
.Introduction-tt {
  padding: 5vw;
  margin-bottom: 2em;
}
.event-date {
  background-color: #f7d7d9;
  font-size: 1.2em;
  padding: 1em 0;
  font-weight: 600;
}
@media screen and (min-width:1024px) {
  #Introduction {
    padding: 0;  
  }
}

/*クーポン*/
#Coupon-Bedding {
  background-image: url("https://image.rakuten.co.jp/futon/cabinet/01086821/category/imgrc0087761929.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: 0% 50%;
  width: 100%;
  padding: 5em 0;
  text-align: center;
}
#Coupon-Bedding > div {
  padding: 0 5vw;
}
#Coupon-Bedding h2 {
  margin-bottom: 1em;
}
@media screen and (min-width:1024px) {
  #Coupon-Bedding div {
    width: min(1000px, 100%);
    margin: 0 auto;
  }
}
#Coupon-Interior {
  background-image: url("https://image.rakuten.co.jp/futon/cabinet/01086821/category/imgrc0087761930.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: 0% 50%;
  width: 100%;
  padding: 5em 0;
  text-align: center;
}
#Coupon-Interior > div {
  padding: 0 5vw;
}
#Coupon-Interior h3 {
  font-size: 1.6em;
  padding:0.2em 1em;
  display: inline-block;
  background-color: #8fd9e6;
  color: #fff;
  border-radius:10px;
  position: relative;
  margin-bottom: 0.5em;
  font-weight: 700;
}
#Coupon-Interior h3::after {
  border: 10px solid transparent;
  content:'';
  height:0;
  width:0;
  position:absolute;
  border-top-color:#8fd9e6;
  top:100%;
  left:50%;
}
#Coupon-Interior h2 {
  margin-bottom: 1em;
}
@media screen and (min-width:1024px) {
  #Coupon-Interior div {
    width: min(1000px, 100%);
    margin: 0 auto;
  }
}

/*寝具をえらぶ*/
#SelectProducts {
  background-color: #fafbfb;
  padding: 5em 0;
}
#SelectProducts h2 {
  text-align: center;
}
#SelectProducts ul {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: min(1000px, 100%);
}
#SelectProducts li {
  margin: 10vw 25vw;
}
#SelectProducts h3 {
  font-weight: 700;
  font-size: 1.2em;
}
#SelectProducts div {
  font-weight: 700;
}
#SelectProducts div.thumbnail img {
  border-radius: 50vw;
}
#SelectProducts .btn {
  font-size:0.8em;
}
@media screen and (min-width:1024px) {
  #SelectProducts ul {
    margin: 0 auto;
    flex-direction: row;
  }
  #SelectProducts li {
    margin: 5em 2em;
  }
}

/*おすすめセット*/
#RecommendProducts {
  background-color: #f7d7d9;/*#e1e1e1*/
  padding: 5em 0;
}
.RecommendP_intro {
  text-align: center;
}
.RecommendP_intro h3 {
  font-size: 1.6em;
  padding:0.2em 1em;
  display: inline-block;
  background-color: #fafbfb;
  border-radius:10px;
  position: relative;
  margin-bottom: 0.5em;
  font-weight: 700;
}
.RecommendP_intro h3::after {
  border: 10px solid transparent;
  content:'';
  height:0;
  width:0;
  position:absolute;
  border-top-color:#fafbfb;
  top:100%;
  left:50%;
}
.RecommendP_intro h2 {
  margin-bottom: 1em;
}
.RecommendP_List {
  width: min(1000px, 100%);
  margin: 0 auto;
}
.RecommendP_List > li {
  background-color: #fff;
  margin: 1em 5vw;
  border-radius: 20px;
  border: 4px solid #ebc8ca;
}
.RecommendP_List > li > img {
  border-radius: 16px 16px 0 0;
  width: 100%;
}
.RecommendP_List h3 {
  font-weight: 700;
  font-size: 1.5em;
  padding: 1em 5vw 0.5em;
}
.RecommendP_List h3::before {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../images/bullet-point_sakura.svg);
  background-size: contain;
  vertical-align: middle;
  margin-right: 0.5em;
}
.RecommendP_List > li > .tt {
  padding: 0 5vw;
  text-align: justify;
}
.RecommendP_List .line {
  width: 80%;
  margin: 0 auto;
}
.RecommendP_List .line > img {
  width: 100%;
  margin: 2em auto 0;
}
.RecommendP_item {
  display: flex;
  flex-direction: column;
  margin: 1em 5vw;
}
.RecommendP_item > li {
  margin: 0.5em 0;
}
.RecommendP_item > li > a {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.RecommendP_item .item_img {
  width:48%;
}
.item_tt {
  width:48%;
  text-align: center;
}
.RecommendP_item .item_icon {
  font-weight: 700;
  font-size: 5vw;
  background-color: #8fd9e6;
  color: #fff;
  border-radius: 100vh;
  padding: 2vw 3vw;
  border: 2px solid #8fd9e6;
  transition: 0.4s;
}
.RecommendP_item a:hover .item_icon {
  background-color: #ffffff;
  color: #8fd9e6;
}
.RecommendP_item h4 {
  font-weight: 700;
  margin: 1em 0;
  text-align: justify;
}
@media screen and (min-width:1024px) {
  .RecommendP_List > li {
    margin: 5em 0;
  }
  .RecommendP_List > li > img {
    float: right;
    width: 50%;
    border-radius: 0px 16px 0 16px;
  }
  .RecommendP_List > li > h3,
  .RecommendP_List > li > .tt {
    width: 50%;
    padding-left: 40px;
    padding-right: 40px;
  }
  .RecommendP_List h3 {
    padding-top: 2em;
  }
  .RecommendP_item {
    flex-direction: row;
    margin: 0 40px 1em;
  }
  .RecommendP_item > li {
    margin: 30px;
  }
  .RecommendP_item > li > a {
    flex-direction: column;
  }
  .RecommendP_item .item_img {
    width:100%;
  }
  .item_tt {
    width:100%;
    text-align: left;
    position: relative;
  }
  .RecommendP_item .item_icon {
    font-size: 2.4em;
    padding: 0em 0.4em;
    position: absolute;
    top: -1.5em;
    left: -0.5em;
  }
  .RecommendP_item h4 {
    padding: 0 1em;
  }
}


/*//////////////////////////////////////////////////////
　フッター部分
//////////////////////////////////////////////////////*/

footer {
  padding: 2em 0vw 0.5em;
  text-align: center;
  position: relative;
  background-color: #8fd9e6;
}
footer .logo {
  width: 40vw;
  max-width: 260px;
  margin: 0 auto;
}
.ft_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1em 0 1em;
}
.ft_nav a {
  color: #fff;
  transition: 0.3s;
}
.ft_nav a:hover {
  opacity: 0.5;
}
.ft_nav li:not(:last-child)::after {
  content: "|";
  padding: 0 1em;
  color: #fff;
}
footer .copy {
  color: #fff;
  font-size: 0.8em;
}
#page-top {
  bottom: 10px;
  right: 10px;
  position: fixed;
  z-index: 99;
}
#page-top a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  display: block;
  border: 4px solid #8fd9e6;
  transition: 0.3s;
}
#page-top a:hover {
  opacity: 0.5;
}
#page-top a img {
  padding: 10px;
}

/*アニメーション*/
.fadeInUp, .bounceIn, .fadeIn {
  opacity: 0;
}
.bounceIn {
  animation-duration: 2s ;
}