@media (hover: hover) {
  .main .allbox .button:hover {
    background-color: #f79aa1;
    color: #000;
  }
}

@media (hover: none) {
  .main .allbox .button:active {
    background-color: #f79aa1;
    color: #000;
  }
}
.main .allbox .button {
  width: 100%;            
}
a,
a:visited {
  text-decoration: none;
}

.clear {
  clear: both;
}

.articleTitle {
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1em;
  color: #222;
}




.flexbox {
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    overflow: auto;
    flex-direction: row;
}
.flexbox div{

}
.main .allbox .button {
  text-decoration: none;        /* デフォルトCSS打ち消し */
  color: #fff;                  /* 文字色指定 */
  background-color: #333;       /* 背景色指定 */
  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;
}

a.button_s2 {
  width:30%;	
  /*width: 600px;*/
  height: 50px;
/*  vertical-align: middle;*/
  padding: 5px;
  margin: 5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.5em;
  color:#222222;
  border-radius: 30px;
  transition: all 0.2s ;
  text-decoration: none;
/*  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";*/
 font-size: 8px;	
display: flex;
justify-content: center;
align-items: center;
/*flex-direction:column;　*/
flex-direction:row;	
background-color:transparent ;
border-width:  4px;
border-style:solid;
	
}

.button_s2 small{
	font-size: 6px;
}

.Color1 {
	border:4px solid transparent;/* べっ甲 */
	border-radius: 30px;
  background-image: linear-gradient(white,white),linear-gradient(139deg, #7d3013, #cfb54c 58%, #8e3b12 98%);
  background-origin: border-box;
  background-clip: padding-box, border-box;	
	
}
.Color1 span{
  background: linear-gradient(139deg, #7d3013, #cfb54c 58%, #8e3b12 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.Color2 {
  border-color:#825b5b;/* こっくり茶色*/
}
.Color2 span{
	color:#825b5b;
}

.Color3 {
	border:4px solid transparent;
	border-radius: 30px;
  background-image: linear-gradient(white,white),linear-gradient(-45deg, #321b02, #796f6f 65%, #4b251b);/* おすすめブラウン */
  background-origin: border-box;
  background-clip: padding-box, border-box;		
}
.Color3 span{
	background: linear-gradient(-45deg, #321b02, #796f6f 65%, #4b251b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.Color4 {
  border-color:#66ccff; /* 透け感ブルー */
}
.Color4 span{
	color:#66ccff;
}


.Color5 {
  border-color:#3366cc; /* 青系マグ */
}
.Color5 span{
	color:#3366cc;
}


.Color6 {
  border-color:#bbbbbb; /* シルバーラメ・偏光パール */
}
.Color6 span{
	color:#bbbbbb;
}

.Color7 {
  border-color:#5c1a12; /* ボルドー1 */
}
.Color7 span{
	color:#5c1a12;
}

.Color8 {
  border-color:#6E2A11; /* ボルドー2 */
}
.Color8 span{
	color:#6E2A11;
}

.Color9 {
  border-color:#4e1a2a; /* ボルドー3 */
}
.Color9 span{
	color:#4e1a2a;
}

.Color10 {
  border-color:#401312; /* ボルドー4 */
}
.Color10 span{
	color:#401312;
}

.Color11{
	border-color:#999;/* クリアマグ */
}
.Color11 span{
	color:#999;
}


.Color12{
	border-color:#999;	/* ホワイトマグ */
}
.Color12 span{
	color:#999;
}

/* 追加2.2 */

.Color13{
	border-color:#E7D0A9;/* イエローベージュ */
}
.Color13 span{
	color:#E7D0A9;
}

.Color14{
	border-color:#E7B1A9;/* ピンクベージュ */
}
.Color14 span{
	color:#E7B1A9;
}

/* ボタンの中の右三角 */
.triangle-right{
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #fb3c3c;
    display: inline-block;
    width: 0;
    height: 0;
}

/* FADE */
.button_s :hover {
	opacity: 0.7; 
}
.button_s2 :hover {
	opacity: 0.7; 
	
}


/*-------------タイトルのスタイル-------------*/

.ttl_bordeaux1{

	border-image: linear-gradient(to right, #6a1b1b 20%, #963d1d7d 70%, #6a1b1b 100%) 40;
color: #5c1a12;

}
.ttl_winered{
	border-image: linear-gradient(to right, #7d3024 20%, #b75c4a80 70%, #7d3024 100%) 40;
	color: #6E2A11;
}

.ttl_bekkou{
　border-image: linear-gradient(to right,  #7d3013, #cfb54c 58%, #8e3b12 98%) 40;
  color: #7d3013;

}

.ttl_kokkuri{
　　 border-image: linear-gradient(to right, #825b5b 20%, #963d1d7d 70%, #825b5b 100%) 40;
	color:#6E2A11;
}

.ttl_osusumebrown{
　　 border-image: linear-gradient(to right, #662020, #796f6f 65%, #662020) 40;
	color:#662020;
}


.ttl_sheer_blue{
　border-image: linear-gradient(to right, #78BBE6 10%, #C2EEFF 50%, #78BBE6 100%) 40;
  color: #78BBE6;
}

.ttl_blue_mag{
　border-image: linear-gradient(to right, #136FFF 10%, #C2EEFF 50%, #136FFF 100%) 40;
  color: #136FFF;
}

.ttl_silverglitter_pearl{
 　　border-image: linear-gradient(to right, #a9a9a9 20%, #c0c0c0 70%, #808080 100%) 40;
	color:#c0c0c0;
}

.ttl_clear_mag {
  border-image: linear-gradient(to right, #b7b7b7, #d8d8d8, #eaeaea) 30;
  color: #999999;
}
.ttl_white_mag {
  border-image: linear-gradient(to right, #b7b7b7, #d8d8d8, #eaeaea) 30;
  color: #999999;
}

.ttl_pink_beige {
  border-image:  linear-gradient(to right, #E7B1A9, #ffecea, #E7B1A9) 30; 
  color: #E7B1A9;
}

.ttl_yellow_beige {
  border-image: linear-gradient(to right, #e7d0a9, #fff7ea, #e7d0a9) 30;
  color: #e7d0a9;
}

.ttl_pink_01 {
  border-image: linear-gradient(to right, #DBB2BD, #f0d4dc, #DBB2BD) 30;
  color: #DBB2BD;
}

.ttl_pink_02 {
  border-image: linear-gradient(to right, #FBC6DE, #fff0f7, #FBC6DE) 30;
  color: #FBC6DE;
}

.ttl_pink_03 {
  border-image: linear-gradient(to right, #DE91A1, #f5c0cb, #DE91A1) 30;
  color: #DE91A1;
}

.ttl_pink_04 {
  border-image: linear-gradient(to right, #FF409D, #ffaacc, #FF409D) 30;
  color: #FF409D;
}

.ttl_pink_05 {
  border-image: linear-gradient(to right, #E8B7CA, #f5d5e4, #E8B7CA) 30;
  color: #E8B7CA;
}

.ttl_pink_06 {
  border-image: linear-gradient(to right, #ff4f9a, #ffaad0, #ff4f9a) 30;
  color: #ff4f9a;
}

.ttl_pink_07 {
  border-image: linear-gradient(to right, #ff6fb0, #ffc2da, #ff6fb0) 30;
  color: #ff6fb0;
}

.ttl_pink_08 {
  border-image: linear-gradient(to right, #ff2f8b, #ff99c8, #ff2f8b) 30;
  color: #ff2f8b;
}




/*-------------ナビメニューのスタイル-------------*/


#navi li {
    width: 50%;
    float: left;
}

#navi ul li {
	list-style: none;}

#navi li a {
    display: block;
    padding: 15px;
    color: #fff;
    text-align: center;
    border-left: 1px solid #fff;
    background:gray;
	text-decoration: none;
	font-size: 20px;
}

#hottpics #navi #menu1 a {
    background:#77CF74;
}

#seasoncolor #navi #menu2 a {
    background:#77CF74;
}

#hottpics #navi #menu1 a:hover {
    opacity: 0.5;
}
#hottpics #navi #menu2 a:hover {
    opacity: 0.5;
}

#seasoncolor #navi #menu1 a:hover {
    opacity: 0.5;
}
#seasoncolor #navi #menu2 a:hover {
    opacity: 0.5;
}

/*.eyelash img:hover{
	opacity: 0.5;
}
*/

/* 更新マーク */
.update-area {
  text-align: center; /* 横中央揃え */
  margin: 20px 0;     /* 上下余白 */
}

.update-notice {
  display: inline-block; /* text-align:center に対応 */
  color: #ed1e79;       
  font-family: YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
  animation: softFade 2.4s ease-in-out infinite; /* 点滅アニメーション */
  text-align: center;
}

/* ゆるやか点滅 */
@keyframes softFade {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.6; transform: translateY(-1px); }
}


.br-sp {
	display:inline;
}

.br-pc {
	display:none;
}


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

.item {
  text-align: center;
  border-radius: 12px;
  background: linear-gradient(45deg, #ffffff, #ffffff, #ffffff);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

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

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

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


 a.btn {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 80%;
	margin:1.8em auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #444444;
	background: #444444;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}

 a.btn:hover {
	color:#444444;
	background: #fff;
}


/*--------------------------------------
  カード型_01
--------------------------------------*/
/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#cardlayout-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 2em auto;
    max-width: 960px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* リンクテキストの下線を非表示 */
a.card-link {
    text-decoration: none;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */

/*元の記述を以下に変更　ピンク8つの動画と区別するため*/
#cardlayout-wrap img,
#cardlayout-wrap video {
  display: block;
  max-width: 100%;
  height: auto;
}

#cardlayout-wrap iframe {
  display: block;
  max-width: 100%;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}

/*元の記述を変更　ここまで*/




.card-figure {
    margin-top: 2em;
    padding: 0;
}

/* カードレイアウトのタイトル部分 */
.card-title {
    margin:0.8em 0 0.5em 0;
   /* color: #333;*/
    text-align: center;
    font-size: 16px;
	padding-bottom:0.5em;
	border-bottom: 5px solid;
	/*font-family: "Times New Roman", Times, "serif";*/
}

/* カードレイアウトの説明文部分 */
.card-text-tax {
    margin: 0;
    padding: 1em;
    color: #818181;
}

/* カードレイアウトを1カラムで配置 */
.card-list {
    margin: 0.5em auto;
    padding: 1em;
	 width: 100%;
 /*  width: calc(96% / 2); /* 96%幅を2で割るという指定 */
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28);
}
.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 (9 ÷ 16 = 0.5625) */
    height: 0;
}

/* iframeを入れ物いっぱいに広げる */
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
}



/* 画面幅768px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 768px) {
    .card-list {
        margin: 0.5em 0;
        width: calc(96% / 2); /* 96%幅を2で割るという指定 */
    }
	.card-title {
    margin:0.8em 0 0.5em 0;
    text-align: center;
    font-size: 30px;
	padding-bottom:0.5em;
	border-bottom: 5px solid;
	/*font-family: "Times New Roman", Times, "serif";*/
}
}

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 992px) {
    .card-list {
        width: calc(96% / 2); /* 96%幅を2で割るという指定 */
}
    
/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
    #cardlayout-wrap::after{
        content: "";
        display: block;
        width: calc(96% / 3);
    }
}
/* デスクトップレイアウト : 1000 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 1000px) {
	
a.button_s2 {
  width: 30%;
  height: 60px;
  /*vertical-align: middle;
  padding: 10px;
  margin: 5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.5em;
  color:#FFF;*/
  border-radius: 45px;
   /*transition: all 0.2s ;
  text-decoration: none;*/
 
	 border-width:  6px;
 	font-size: 18px;
}



	
.br-sp {
	display:none;
}

.br-pc {
	display:inline;
}	
	
	  .item {
    width: calc(30% - 20px); /* ←PC: 3列 */
    margin: 0 15px 30px;    
    padding: 20px;          
  }

  .item span {
    font-size: 15px; 
  }
	  .main .allbox .button {
    width: 170px; 
  }
}