@charset "utf-8";

body{
    background-color:#fff ;
    color:#29211f;
    letter-spacing: 0.01rem;
    }



/*トップイメージ*/
.topimg_back{
    background-color:#eaeaf6;
    }
    

.intro {
    font-size: 1.1rem;
    }
@media only screen and (max-width: 767px){
    .intro {
    font-size: 1rem;
    }
    }


/*ナビボタン*/
.nav_wrap{
    max-width: 100%;
    background-size: 40px 40px;
    background:none;
    }
.nav{
    width: auto;
    max-width: 1020px!important;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
	margin: 50px auto 80px;
    gap: 10px 20px;
    padding: 25px 0 25px;
    }
.nav li {
    width: 110px;
    height: 110px;
	font-size: 0.9rem;
	font-weight: bold;
    line-height: 1.2rem;
	text-align: center;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    }
.nav li p{
    padding: 10px;
    letter-spacing: 0rem;
    line-height: 1.2rem!important;
    font-size: 15px!important;
    }
@media only screen and (max-width: 889px){
    .nav{
    gap: 10px 7px;
    }
    .nav li{
    width: 90px;
    height: 90px;
    font-size: 0.8rem;
    
    }
    }
@media only screen and (max-width: 767px){
    .nav{
	margin: 40px auto 50px;
    padding: 20px 0 20px;
    letter-spacing: 0.3px;
    }
    }
@media screen and (max-width: 680px) {
    .nav li p {
    line-height: 1rem!important;
    font-size: 13px!important;
    }
    }
@media only screen and (max-width: 499px){
    .nav{
    gap: 10px 5px;
    }
    .nav li {
    width: 70px;
    height: 70px;
    font-size: 0.7rem;
    line-height: 0.9rem;
    }
    .nav li p {
    letter-spacing: -0.05rem;
    line-height: 0.8rem !important;
    font-size: 10.5px !important;
    }
    }

/*追従ナビ設定*/
.nav_stiky{
    display: flex;
    flex-direction:column;
    flex-wrap: wrap;
	margin: 0px auto 80px;
    position: fixed;
    height: 90%;
    z-index: 99999;
    top: 50px;
    right: 100px;
    padding: 6px 0px;
    /*
    right: 40px;
    padding: 6px 50px;*/
    }
.nav_stiky a {
    display: block;
    width: 90px;
    height: 60px;
    margin-bottom: 10px;
    margin-right: 5px;
	font-size: 1rem;
	font-weight: bold;
    color:#fff;
    line-height: 1.3rem;
    letter-spacing: 0.1rem;
	text-align: center;
    border-radius: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2)
    }
.nav_stiky li p{
    max-width:100px;
    padding: 15px;
    }
.next-arrow_wrap{
    display: none;
    }

/*推しカラー用*/
.oshicolor-multi{
    background: repeating-linear-gradient(-45deg, #fff7de, #fff7de 15px, #ffe4e8 15px, #ffe4e8 30px, #d6efee 30px, #d6efee 45px);
    color:#333!important;
    }
.oshicolor-multi .sale_list_wrap ul li {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }
.oshicolor-red{
    background:#f79c9c;
    color:#fff;
    }
.oshicolor-red .sale_list_wrap ul li:after {
    border-top: 11px solid #fff;
    border-left: 11px solid #fff;
    border-right: 11px solid #cd6c6c;
    border-bottom: 11px solid #cd6c6c;
    }
.oshicolor-yellow{
    background:#f7de9c;
    color:#fff;
    }
.oshicolor-yellow p{
    color:#b38e27;
    }
.oshicolor-yellow .headline{
    color:#b38e27;
    }
.oshicolor-yellow .sale_list_wrap ul li:after {
    border-top: 11px solid #fff;
    border-left: 11px solid #fff;
    border-right: 11px solid #ceb265;
    border-bottom: 11px solid #ceb265;
    }
.oshicolor-bluenavy{
    background:none;
    background-color:#a6c2d9;
    color:#fff;
    }
.oshicolor-bluenavy .sale_list_wrap ul li:after {
    border-top: 11px solid #fff;
    border-left: 11px solid #fff;
    border-right: 11px solid #809aaf;
    border-bottom: 11px solid #809aaf;
    }
.oshicolor-green{
    background:none;
    background-color:#c7d1bb;
    color:#fff;
    }
.oshicolor-green p{
    color:#75875f;
    }
.oshicolor-green .headline{
    color:#75875f;
    }
.oshicolor-green .sale_list_wrap ul li:after {
    border-top: 11px solid #fff;
    border-left: 11px solid #fff;
    border-right: 11px solid #96a386;
    border-bottom: 11px solid #96a386;
    }
.oshicolor-brown{
    background:none;
    background-color:#c1af9d;
    color:#fff;
    }
.oshicolor-brown .sale_list_wrap ul li:after {
    border-top: 11px solid #fff;
    border-left: 11px solid #fff;
    border-right: 11px solid #9b856e;
    border-bottom: 11px solid #9b856e;
    }
.oshicolor-purple{
    background:none;
    background-color:#cac3d3;
    color:#fff;
    }
.oshicolor-purple p{
    color:#7f738f;
    }
.oshicolor-purple .headline{
    color:#7f738f;
    }
.oshicolor-purple .sale_list_wrap ul li:after {
    border-top: 11px solid #fff;
    border-left: 11px solid #fff;
    border-right: 11px solid #968ea1;
    border-bottom: 11px solid #968ea1;
    }
.oshicolor-pink{
    background:none;
    background-color:#f5d6d6;
    color:#fff;
    }
.oshicolor-pink p{
    color:#c77979;
    }
.oshicolor-pink .headline{
    color:#c77979;
    }
.oshicolor-pink .sale_list_wrap ul li:after {
    border-top: 11px solid #fff;
    border-left: 11px solid #fff;
    border-right: 11px solid #dda4a4;
    border-bottom: 11px solid #dda4a4;
    }
.oshicolor-gray{
    background:none;
    background-color:#bdbbba;
    color:#fff;
    }
.oshicolor-gray .sale_list_wrap ul li:after {
    border-top: 11px solid #fff;
    border-left: 11px solid #fff;
    border-right: 11px solid  #898686;
    border-bottom: 11px solid #898686;
    }
.oshicolor-white{
    background:none;
    background-color:#e6e5e4;
    color:#8f8e8e!important;
    }
.oshicolor-white .sale_list_wrap ul li:after {
    border-top: 11px solid #fff;
    border-left: 11px solid #fff;
    border-right: 11px solid #b7b6b6;
    border-bottom: 11px solid #b7b6b6;
    }
.oshicolor-black{
    background:none;
    background-color:#8d8d8d;
    color:#fff;
    }
.oshicolor-black .sale_list_wrap ul li:after {
    border-top: 11px solid #fff;
    border-left: 11px solid #fff;
    border-right: 11px solid #4b4646;
    border-bottom: 11px solid #4b4646;
    }
.oshicolor-common{
    background:none;
    border:1px solid #a0a0a0;
    color:#8f8a85!important;
    }

/*SP・モバイルレスポンシブ調整*/
@media only screen and (max-width: 1400px){
    .nav-wrap-sp{
    position: relative;
    }
    .nav_stiky{
    width: 100%;
    height: 70px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-wrap: none;
    align-items: center;
    margin: 0 auto;
    top: 0px;
    padding: 0;
    left:0;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    }
    .nav_stiky a {
    width: 9%;
    height: 70px;
    margin-bottom: 0px;
    margin-right: 0px;
    border-radius: 0;
    font-size: 0.9em;
    box-shadow: none;
    border:none;
    border-right:1px solid #fff;
    }
    .nav_stiky a:first-child{
    border-left:none;
    }
    .nav_stiky a:last-child{
    border-right:none;
    }
    }
@media only screen and (max-width: 767px){
    .nav{
	margin: 40px auto 50px;
    padding: 20px 0 20px;
    }
    .nav_stiky li p{
    padding: 10px;
    }
    }
@media only screen and (max-width: 750px){
    .nav_stiky a {
    letter-spacing: 0.3px;
    line-height: 1rem;
    }}
@media only screen and (max-width: 710px){/*スクロール表示*/
    .nav_stiky a {
    width: 70px;
    }
    .nav_stiky a:last-child {
    margin-right: 30px;
    }
    .next-arrow_wrap{
    display: block;
    background-color: #fff;
    opacity: 0.7;
    z-index: 99999;
    position:fixed;
    right: 0px;
    top: 0px;
    width:30px;
    height:70px;
    }
    .next-arrow {
    position:absolute;
    right: 10px;
    top: 25px;
    width: 11px;
    height: 11px;
    border-right: 2px solid #333;
    border-top: 2px solid #333;
    transform: rotate(45deg);
    }
    }
@media only screen and (max-width: 499px){
    .nav{
	margin: 30px auto 40px;
    padding: 15px 0 15px;
    }
    .nav_stiky.nav li {
    max-width: 100px;
    height: 100px;
    font-size: 0.7rem;
    line-height: 1.0rem;
    }
    }
@media only screen and (max-width: 460px){
    .nav_stiky a {
    width: 60px;
    }
    .nav_stiky li p{
    padding: 4px;
    font-size: 0.8em;
    }
    }



/*推しイラスト*/
.oshi-illust_wrap{
    max-width: 1020px;
    margin: 0 auto;
    position: relative;
    }
.oshi-illust_1{
    opacity: 0.3;
    z-index: 1;
    position: absolute;
    transform: rotate( -15deg );
    width: 130px;
    top: -200px;
    left:60px;
    }
.oshi-illust_2{
    opacity: 0.3;
    z-index: 1;
    position: absolute;
    transform: rotate( 8deg );
    width: 150px;
    top: -160px;
    right:50px;
    }
@media screen and (max-width:1000px) {
    .oshi-illust_1{
    width: 110px;
    top: -200px;
    left:50px;
    }
    .oshi-illust_2{
    width: 130px;
    top: -170px;
    right:30px;
    }
    }
@media screen and (max-width:730px) {
    .oshi-illust_1{
    width: 100px;
    top: -180px;
    left:20px;
    }
    .oshi-illust_2{
    width: 110px;
    top: -150px;
    right:20px;
    }
    }
@media screen and (max-width:550px) {
    .oshi-illust_1{
    width: 85px;
    top: -200px;
    left:0px;
    }
    .oshi-illust_2{
    width: 85px;
    top: -160px;
    right:-5px;
    }
    }



/*セールエリア*/
.sale_list_wrap ul li p.sttl {
    color: #29211f;
    }
.sale_diff-1{
    background-color:#efece3;
    }
.sale_diff-2{
    background-color:#cee4e5;
    }
.sale_diff{
    background-color: #e9f9b4;
    }

/**/
.headline_sale_back{
    background-color: #fffaed;
    }
.contents_wrap_sale .headline_point{
    background-color: /*#e6362d*/#c73b28;
    }


/*右下の三角*/
.sale_list_wrap ul li:after{
    border-right: 13px solid /*#F6C7C1*/#c9d4e1;
    border-bottom: 13px solid /*#F6C7C1*/#c9d4e1;
    }
.sale_diff .sale_list_wrap ul li:after{
    border-right: 13px solid #d9d9c4;
    border-bottom: 13px solid #d9d9c4;
    }
.featured-item li:after {
    border-top: 20px solid #fff!important;
    border-left: 20px solid #fff!important;
    border-right: 20px solid /*#F6C7C1*/ #c9d4e1!important;
    border-bottom: 20px solid /*#F6C7C1*/ #c9d4e1!important;
    }


/*ラベル1*/
.ico_off {
    background: #bb2a2a;
    color: #fff!important;
    }
/*ラベル2*/
.ico_free {
    background: #bb2a2a;
    color: #fff!important;
    }
/*価格*/
.sale_list_wrap ul li p.pr1,
.sale_list_wrap ul li p.pr2{
    color: #e52828;
    }



/*もっと見るボタン*/
.morebutton{
    background: /*#e52828*/#c73b28;
    }


/*ボタン推しカラー*/
.morebutton-red{
    background-color:#fff;
    color:#f58d8d;
    }
.morebutton-red:visited, .morebutton-red:link {
    color:#f58d8d;
    }
.morebutton-yellow{
    background-color:#fff;
    color:#e3ba4d;
    }
.morebutton-yellow:visited, .morebutton-yellow:link {
    color:#e3ba4d;
    }
.morebutton-blue{
    background-color:#fff;
    color:#93afc5;
    }
.morebutton-blue:visited, .morebutton-blue:link {
    color:#93afc5;
    }
.morebutton-green{
    background-color:#fff;
    color:#afb9a2;
    }
.morebutton-green:visited, .morebutton-green:link {
    color:#afb9a2;
    }
.morebutton-brown{
    background-color:#fff;
    color:#c1af9d;
    }
.morebutton-brown:visited, .morebutton-brown:link {
    color:#c1af9d;
    }
.morebutton-purple{
    background-color:#fff;
    color:#b0a2c1;
    }
.morebutton-purple:visited, .morebutton-purple:link {
    color:#b0a2c1;
    }
.morebutton-pink{
    background-color:#fff;
    color:#eeadad;
    }
.morebutton-pink:visited, .morebutton-pink:link {
    color:#eeadad;
    }
.morebutton-gray{
    background-color:#fff;
    color:#979696;
    }
.morebutton-gray:visited, .morebutton-gray:link {
    color:#979696;
    }
.morebutton-white{
    background-color:#fff;
    color:#8f8e8e;
    }
.morebutton-white:visited, .morebutton-white:link {
    color:#8f8e8e;
    }
.morebutton-black{
    background-color:#fff;
    color:#8d8d8d;
    }
.morebutton-black:visited, .morebutton-black:link {
    color:#8d8d8d;
    }


/*強調テキスト*/
.font_em{
    color:#e52828;
    }


/*アコーディオン*/
.readmore {
    max-width: 1020px;
	position: relative;
	margin: 50px auto 0px;
	padding: 0 20px 20px;
    font-size: 1rem;
    line-height: 1.4rem;
  }
.readmore label {
	position: absolute;
	display: table;
	left: 50%;
	bottom: 0;
	margin: 0 auto;
	width: 200px;
	padding: 10px 0;
	color: #000;
	text-align: center;
	border-radius: 7px;
	border: 1px solid #000;
	background-color: #fff;
	transform: translateX(-50%);
	cursor: pointer;
	z-index: 1;
  }
.readmore label::before{
	content: '続きを見る';
  }
.readmore input[type="checkbox"]:checked ~ label::before {
	content: '元に戻す';
  }
.readmore input[type="checkbox"]{
	display: none;
  }  
.readmore-content {
	position: relative;
	height: 200px;
	overflow: hidden;
  }
.readmore input[type="checkbox"]:checked ~ .readmore-content {
	height: auto;
  }
.readmore-content::before {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75px;
  background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, #fff 100%);
    }
.readmore input[type="checkbox"]:checked ~ .readmore-content::before {
  display: none;
    }
@media screen and (max-width:500px) {
    .readmore p{
    font-size: 0.9rem!important;    
    line-height: 1.3rem;
    }
    .readmore-content {
	height: 350px;
    }
    }