@charset "utf-8";
/* CSS Document */


/*********************************
              全体
*********************************/	

#wrapper {
	width: 100%;
	max-width: 780px;
	margin: 5% auto;
	display: block;
	color: #434545;
	text-align: center;
	overflow: hidden
}
#wrapper img {
	width: 100%;
}
#wrapper a {
	text-decoration: none;
}
#wrapper a:link {
	color: #434545;
} 
#wrapper a:visited {
	color: #434545;
	} 
#wrapper a img:hover {
	opacity: 0.8;
	filter: alpha(opacity=85);
	-ms-filter: "alpha(opacity=85)";
}

#wrapper p {
    font-size: 3vw;
    line-height: 2.2em;
    letter-spacing: 0.04em;
}



/*********************************
            共有
*********************************/	


/*配置*/

#wrapper .m_c ,.butter_p {
    position: relative;	
}

#wrapper span.br {
    display: block;
}

.fadeIn.view {
  opacity: 0;
  transition: opacity 1s, transform 1s;
}


.fadeIn.view.down {
  transform: translateY(20px);
}


.fadeIn.view.left {
  transform: translateX(-50px);
}


.fadeIn.view.right {
  transform: translateX(50px);
}


.fadeIn.view.show {
  opacity: 1;
  transform: translateX(0) translateY(0);
}


/*********************************
           メインエリア
*********************************/

/*トップエリア*/

#wrapper .top_area {
    background-color: #fffff1;
    padding: 10% 0 13%;
}

#wrapper ul {
    display: flex;
    width: 88%;
    flex-wrap: wrap;
    margin: 5% auto 10%;
    padding-bottom: 0;
}

#wrapper ul li {
    text-align: center;
    width: 50%;
    padding: 2%;
}


#wrapper .title_room {
    width: 60%;
    margin: 2% auto 7%;
}

/*エリア2*/

#wrapper .second_area {
	background: repeating-linear-gradient(to right, #f7f3e5, #f7f3e5 30px, #fefefc 30px, #fefefc 60px);
	position: relative;
	padding-bottom: 14%;
}

#wrapper .background-bar {
    background-color: #f7f3e5;
    padding: 2% 0;
}

#wrapper .txtlogo {
    width: 58%;
    position: absolute;
    top: 4%;
    left: 5%;
    z-index: 1;
}


#wrapper .m_1803879 {
    width: 85%;
    padding: 25% 0 7%;
    margin: 0 auto;
}

#wrapper .m_1803879_2 {
	width: 88%;
    margin-left: -10%;
    padding: 12% 0 5%;
}

#wrapper .m_1803879_3 {
	width: 85%;
    margin: -25% 0 0 25%;
}



/*ミドルエリア*/

#wrapper .middle_area {
	background-color: #faeee3;
	padding-bottom: 15%;
}

#wrapper .m_1802977 {
    padding: 10% 0 10%;
}

#wrapper .m_1802977_2 {
    width: 95%;
    display: block;
    margin: 10% 0 2% auto;
}

#wrapper .m_1802977_3 {
    width: 97%;
    display: block;
    margin: 10% auto 2% 0;
}


#wrapper .more_button {
    width: 40%;
    margin: 5% auto 0;
}

#wrapper .item_name {
	margin-top: 5%;
    font-size: 3vw;
    line-height: 2rem;
}

#wrapper .m_1880479 {
    width: 100%;
}

#wrapper .circle {
    position: absolute;
    top: -6.5%;
    width: 127%;
    right: -16%;
	animation: spin 40s linear infinite;
    display: inline-block;
	pointer-events: none; 
}

#wrapper .m_circle {
    position: relative;
    margin: 20% auto 5%;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


#wrapper .cb_txt {
    margin: 17% auto 7%;
}

/*ボトムエリア*/

#wrapper .bottom_area {
	background-color: #faeee3;
}

#wrapper .shorts_model {
    width: 85%;
    padding: 20% 0 5%;
    margin: 0 auto;
}

#wrapper .title_shorts {
    width: 38%;
    margin: 2% auto 7%;
}

#wrapper .oki_shorts {
    width: 90%;
    margin: 0 auto;
    padding: 10% 0 0%;
}

#wrapper .shorts_f {
    display: flex;
    width: 90%;
    margin: 15% auto 0;
    padding-bottom: 15%;
	 align-items: stretch; 
}

#wrapper .shorts_f .more_button {
    width: 85%;
    margin: auto auto 0;
    padding-top: 5%;
}

#wrapper .shorts_f img{
    width: 90%;
}

#wrapper .shorts_f .shorts_p {
  flex: 1;                  
  display: flex;              
  flex-direction: column;   
}








/*pc用指示*/	
@media (min-width: 768px){
	
/*********************************
            共有
*********************************/


/*アイテムエリア商品名*/	
	
#wrapper .item_name {
        margin: 8% 0 1%;
        font-size: 2.0rem;
        line-height: 4rem;
}
	
#wrapper .block-goods-item--price .price {
        font-size: 2.4rem;
}

	
/*********************************
           メインエリア
*********************************/
	
#wrapper p {
    font-size: 1.9rem;
    line-height: 2.2em;
    letter-spacing: 0.03em;
}
	
	
}