@charset "euc-jp";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

a.white:link {
color : #ffffff; 
}
a.white:visited {
color : #ffffff; 
}
a.white:active {
text-decoration : underline; 
color : #ffffff; 
}
a.white:hover {
text-decoration : underline; 
color : #ffffff; 
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

/*期間*/
.box2 {
	border: 3px solid #9fa0a0;
	max-width: 900px;
	margin: 0 auto;
	}

.box2_ttl {
	font-size: 18px;
	margin: 0;
	background: #9fa0a0;
	color: #fff;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	text-align: center;
	}

.box2_main {
	padding-top: 0.8em;
	margin: 0;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}

.box2_sub{
	color:red;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
}

.box2_kikan {
	border: 3px solid #dd8c99;
	background-color: #fff;
	max-width: 100%;
	margin: 0 auto;
	}

.box2_ttl_kikan {
	font-size: 18px;
	margin: 0;
	background:#dd8c99;
	color: #fff;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	text-align: center;
	}

.box2_main_kikan {
	padding-top: 0.8em;
	margin: 0;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}

.box2_sub_kikan{
	/*color:red;*/
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

.smalltext{
	font-size:0.6em;
}



.shoppp a {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  background: #333;
  padding: 10px 22px;
  border-radius: 6px;
  transition: .3s;
	text-decoration: none;
	
}
.shoppp a:hover {
  background: #13c3ac;
	 font-size: 14px;
}

.narabe{
	margin: 0 5px;
	display: inline-block;
	margin-bottom: 30px;
}

/*  .tabtop20 {
	padding: 10px; text-align: center; background-color:#ec7692;  border-radius: 20px 20px 0px 0px;  font-size: 1.5em; font-weight: bold; font-family: YuMincho, Yu Mincho,Hiragino Mincho ProN,serif; color: #fff;
}
*/
.tabtop20 {
    padding: 10px; text-align: center; background: linear-gradient(135deg, #f6d365, #b8860b); border-radius: 20px 20px 0px 0px; font-size: 1.5em; font-weight: bold; font-family: YuMincho, Yu Mincho,Hiragino Mincho ProN,serif; color: #fff;
}
.uchikeshi{
	text-decoration-line: line-through;
}

/* デスクトップレイアウト */

.allbox {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	width: 100%;
	margin: 0 auto;
}

.mainimage{
	text-align: center;
}
.mainimage img{
	width: 100%;
	max-width: 600px;
}
.cyuui {
    margin: 0 auto 20px; 
    padding: 0;
	font-size: 16px;
	text-align: center; 
	font-weight: middle;
    color: #D30000;
}

.cyuui strong {
	font-size: 22px;
	font-weight: bold;
}

.intro {
  text-align: center;
  padding: 10px;
}

.intro_2{
  text-align: center;
  padding: 10px;
	max-width: 800px;
}

.intro img{
  width: 500px;
  height: auto;
}

.intro p{
  text-align: center;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";    
  font-size: 17px; 
  font-weight: lighter;
  line-height: 30px;
}

.intro_2 p{
  text-align: center;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";    
  font-size: 15px; 
  font-weight: lighter;
  line-height: 22px;
}


.akamoji{
	width: 50%;
  text-align: center;
  color: red;
  border: solid 2px red;
  padding: 10px 20px;
  margin: 0px auto;
	font-size: 14px;
}

.cpmidashi{
  text-align: center;    
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-weight: bold;
  font-size: 30px;
  line-height: 1.3em;
	color:#dd8c99;
}

.hot_item{
  text-align: center;    
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-weight: bold;
  font-size: 30px;
 
}


.teiban_item{
  text-align: center;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";    
  font-weight: lighter;
  font-size: 18px;    
}

.flex {
	display: flex; 
	flex-wrap: wrap;
  justify-content: space-between;       
}

.flex2 {
	display: flex; 
	flex-wrap: wrap;
  justify-content: center;       
}


.item {
  width: calc(35% - 50px);       /* PCでは4列（25%） */
  margin: 12px;           /* 左右15px・下30pxの余白 */
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(45deg, #FCE5EE, #ffffff, #FCE5EE);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.item img {
  width: 200px;   
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
	display: block;
	margin: 0 auto;
}

.insta img {
  width: 250px;   
  height: auto;
  border-radius: 8px;
 	display: block;
	margin: 0 auto;
}


.item p {
  text-align: center;    
  font-size: 10px;
  font-weight: bold;    
  margin: 0;
  color: #333;
}

.item span {
  text-align: center;    
  font-size: 14px;
  font-weight: bold;    
  margin: 0;
  color: #333;
}

.item2 {
  width: calc(25% - 30px);       /* PCでは4列（25%） */
  margin: 0 15px 30px;           /* 左右15px・下30pxの余白 */
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(45deg, #fae3e3, #FBDCDA, #FECC91);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.item2 img {
  width: 100%;   
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.item2 p {
  text-align: center;    
  font-size: 10px;
  font-weight: bold;    
  margin: 0;
  color: #333;
}

.item2 span {
  text-align: center;    
  font-size: 14px;
  font-weight: bold;    
  margin: 0;
  color: #333;
}

.main .allbox .button {
    text-decoration:  none;             /* デフォルトCSS打ち消し */
    color: #fff;                        /* 文字色指定 */
    background-color: #333;             /* 背景色指定 */
    width: 120px;                       /* 幅指定 */
    line-height: 30px;
    margin: 0 auto;
    margin-bottom:7%;
    display: block;                     /* ブロック要素にする */
    text-align:  center;                /* 中央揃え */
    padding: 5px 10px 5px 10px;         /* 余白指定 */
    border-radius:  5px;                /* 角丸指定 */
    font-size: 12px;                    /* 文字サイズ指定 */
    box-shadow: 0 2px 10px 0 #DEDADA;   /* 影指定 */
    font-weight: bold;
}

.main .allbox .button:hover{
    background-color:#7c6f76; /*ボタン色*/
}

.main .allbox .button a:hover{
	color: #000;
}

.main .allbox .button2 {
    text-decoration:  none;             /* デフォルトCSS打ち消し */
    color: #fff;                        /* 文字色指定 */
    background-color: #000;             /* 背景色指定 */
    width: 170px;                       /* 幅指定 */
    line-height: 30px;
    margin: 0 auto;
    margin-bottom:7%;
    display: block;                     /* ブロック要素にする */
    text-align:  center;                /* 中央揃え */
    padding: 5px 15px 5px 15px;         /* 余白指定 */
    border-radius:  5px;                /* 角丸指定 */
    font-size: 14px;                    /* 文字サイズ指定 */
    box-shadow: 0 2px 10px 0 #DEDADA;   /* 影指定 */
    font-weight: bold;
}

.main .allbox .button2:hover{
    background-color:#FC7EA3; /*ボタン色*/
}

.main .allbox .button2 a:hover{
	color: #000;
}

.mt-30 {
  margin-top: 30px; /* 画像とボタンの間に30pxの余白 */
}

.btn-area {
  text-align: center; /* ボタンを中央寄せ */
  width: 100%;
}

.btn-area a{
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

.akamoji2{
  text-align: center;
  color: red;
  margin: 0 auto;    
}

.sp-br {
          display: none;
}

.pc-br {
          display: inline;
}  

		
.box2_kikan {
	max-width: 600px;
	}

.box2_main_kikan {
	max-width: 600px;
	font-size: 15px;
	}


.osusume-txt{
	font-size:2em;
}

/* モバイルレイアウト : 最大幅768 px 以下の場合 */
@media only screen and (max-width: 820px) {

	
.cpmidashi{
  font-size: 22px;
}
	
	.hot_item{
  font-size: 25px;
}

.teiban_item{
  font-size: 14px;    
}
    
.item {
  width: calc(50% - 10px);   /* 2列（50% - margin調整） */
  margin: 0 5px 15px;           /* 左右5px・下15pxの余白 */
  padding: 10px;    
  }
    
.item span{
  font-size: 13px;      
    }  
    
.item2 {
  width: calc(50% - 10px);   /* 2列（50% - margin調整） */
  margin: 0 5px 15px;           /* 左右5px・下15pxの余白 */
  padding: 10px;    
  }
    
.item2 span{
  font-size: 13px;      
    }     
    
.akamoji{
  padding: 10px;
  margin: 0px auto;
  width: 100%;
	font-size: 12px;
}
 
.intro {
  text-align: center;
  padding: 10px 8px 10px 8px;
}
	
	.intro_2 {
  text-align: center;
  padding: 10px 8px 10px 8px;
		max-width: 600px;
}
	
	.intro_2 p{
  font-size: 13px; 
  line-height: 130%;    
}

.intro img{
  width: 200px;
  margin-bottom: 15px;
}

.intro p{
  font-size: 14px; 
  line-height: 140%;    
}
    
.main .allbox .button {
    width: 100%; /* 幅指定 */
	}
    
.main .allbox .button2 {
    width: 100%; /* 幅指定 */
	}    
	
.box2_main_kikan {
	font-size: 13px;
}	
	
    
.cyuui {
	font-size: 10px;
}
    
.cyuui strong {
	font-size: 14px;
}
    
.btn-area a{
  width: 80%;
}
.akamoji2{
	font-size: 12px;	
	}
.sp-br {
          display: inline;
}    
    
.pc-br {
          display: none;
}  
	
.osusume{
	text-align: center;
	margin: 20px auto;
}
.osusume-txt{
	font-weight: bold; 
	font-size:1.5em;
}	
	
}