@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%;
}

@keyframes sliderAnimation {
  100% {
    transform: translateX(-50%);
  }
}
.autoplay-slider{
  display: flex;
  min-width: 100%;
  width: min-content;
  animation: 20s linear infinite sliderAnimation;
}
.slide{
  width: 250px;
  margin: 20px;
  position: relative;
} 


.topimg {
	width: 70%;
}

.mongon{
	
	background-color: #fff;
}

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/ 
*/

/* モバイルレイアウト : 480 px およびそれ以下. */

.pjax-target{
	background-repeat: no-repeat;
	background-size: 100%;
}

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

.midashi-chuui{
	padding: 5px 10px;
	background-color: darkred;
	color: #FFFFFF;
	font-size: 18px;
	font-weight: bold;
}
	.chuui-text {
		border: none; 
		background-color: #FFFFFF; 
		line-height: 150%;	
		padding: 10px;
		font-size: 11px;
		border: 2px solid darkred;
	}

.mongon p{
	font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.midashi-blue{
	font-size: 20px;
	font-weight: bold;
	color: #248FAA;
	text-align: center;
}


	.midashi-gray{
	font-size: 15px;
	font-weight: bold;
	color: #595757;
	text-align: center;
	border-bottom: solid 2px #b8b8b8;
	margin: 20px auto;
}

.text-color{
	text-align: center;
	margin-bottom: 5px;
	color: #A87066;
	font-weight: bold;
}
.itemcoad{
	background-color: #F46C77;
	color: #fff;
	padding: 0 5px 0 5px;
	display: inline-block;
	margin: 5px auto; 
}


.tab-color1{
    background-color: #1E79AC;
}

.tab-color2{
    background-color: #F2A263;
}

.tab-001 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    max-width: 1030px;
}

.tab-001 > label {
    flex: 1 1;
    order: -1;
    opacity: .5;
	width: 50%;
    min-width: 70px;
    padding: .6em 1em;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-size: .5em;
    text-align: center;
    cursor: pointer;
}

.tab-001 > label:hover {
    opacity: .8;
}

.tab-001 input {
    display: none;
}

.tab-001 > div {
    display: none;
    width: 100%;
    padding: 0 0em;
    background-color: #fff;
}

.tab-001 label:has(:checked) {
    opacity: 1;
}

.tab-001 label:has(:checked) + div {
    display: block;
}

.itembox_2 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0px;
}
.itembox_2 div {
	width: 100%;
	text-align: left;
	margin: 0px 5px 5px;
	font-size: 10px;
}
.itembox_2 div p {
	width: 100%;
	margin: 0 auto;
}
.itembox_2 div img {
	width: 100%;
}

.itembox_10 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0px;
}
.itembox_10 div {
	width: 32%;
	text-align: left;
    margin-bottom: 5px;
}
.itembox_10 div p {
	margin: 0 auto;
    font-size: 10px;
}
.itembox_10 div img {
	width: 100%;
}


.itembox_4 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0px 5px 5px 0px;
}
.itembox_4 div {
	width: 30%;
	text-align: center;
	margin: 0px 5px 5px 0px;
	font-size: 10px;
}
.itembox_4 div p {
	width: 50px;
	margin: 0 auto;
}
.itembox_4 div img {
	width: 100%;
}
.itembox_3 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0px;
}
.itembox_3 div {
	width: 45%;
	text-align: left;
	margin: 0px 5px 5px;
	font-size: 10px;
}
.itembox_3 div p {
	width: 100%;
	margin: 0 auto;
}
.itembox_3 div img {
	width: 100%;
}
.scroll_content { /* リスト全体のスタイル */
  display: flex;
  max-width: 1500px;
  margin: 1px;
  overflow-x: auto;
}
 
.scroll_content li { /* 各リストのスタイル */
  width: 28%;
  padding: 2px;
  margin: 3px;
  flex-shrink: 0;
  list-style: none;
}

/* 横スクロールここから */
.scroll_content img { /* 画像のスタイル */
  width: 150%;
  max-height: 300px;
  object-fit: cover;
}
.scroll_content p { /* 画像下の文字サイズ */
	font-size: 10px;
}

.scroll_content::-webkit-scrollbar {
  height: 12px; /* スクロールバーの高さ */
}
 
.scroll_content::-webkit-scrollbar-thumb {
  background: #aaa; /* ツマミの色 */
  border-radius: 6px; /* ツマミ両端の丸み */
}
 
.scroll_content::-webkit-scrollbar-track {}

/* 横スクロールここまで */

.rank-mark{
	display: block;
	margin: 0 auto;
	width: 50px;
	height: 35px;
	text-align: center;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 18px;
	line-height: 50px;
}

.rank-color1{
	background-image: url("img/ranking_1.png");
	background-repeat: no-repeat;
	background-size: 100%;
}
.rank-color2{
	background-image: url("img/ranking_2.png");
	background-repeat: no-repeat;
	background-size: 100%;
}
.rank-color3{
	background-image: url("img/ranking_3.png");
	background-repeat: no-repeat;
	background-size: 100%;
}
.rank-color4{
	background-image: url("img/ranking_4.png");
	background-repeat: no-repeat;
	background-size: 100%;
}
.item_setumei  {
    font-size: 12px;
    text-align: left;
	line-height: 150%;
}



.item_setumei_mini{
    font-size:12px;
    text-align: left;
}

.coad_pint {
	background-color: #e38b89;
	color: #fff;
	padding: 0.5px 5px;
    margin: 3px 5px 0 0;
	display: inline-block;
	line-height: 150%;
}


#popup,#popup2,#popup3,#popup4,#popup5,#popup6,#popup7,#popup8,#popup9,#popup10,#popup11,#popup12,#popup13,#popup14,#popup15,#popup16,#popup17,#popup18,#popup19,#popup20
{
  display: none; /* label でコントロールするので input は非表示に */
}

.popup-open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
	text-align: center;	
	color:#44403f;
	margin-top: 30px;
}

.popup-overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}

#popup:checked ~ .popup-overlay,#popup2:checked ~ .popup-overlay,#popup3:checked ~ .popup-overlay,#popup4:checked ~ .popup-overlay,#popup5:checked ~ .popup-overlay,#popup6:checked ~ .popup-overlay,#popup7:checked ~ .popup-overlay,#popup8:checked ~ .popup-overlay,#popup9:checked ~ .popup-overlay,#popup10:checked ~ .popup-overlay,#popup11:checked ~ .popup-overlay,#popup12:checked ~ .popup-overlay,#popup13:checked ~ .popup-overlay,#popup14:checked ~ .popup-overlay,#popup15:checked ~ .popup-overlay,#popup16:checked ~ .popup-overlay,#popup17:checked ~ .popup-overlay,#popup18:checked ~ .popup-overlay,#popup19:checked ~ .popup-overlay,#popup20:checked ~ .popup-overlay {
  display: block;
  z-index: 99999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}


.popup-window {
  width: 90vw;
  max-width: 500px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 6px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.popup-window2 {
  width: 90vw;
  max-width: 235px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 6px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-text {
  margin: 0 auto;
}
.oshi{
		margin-top: -300px;
	}
.review-gazou {
	border-radius: 50%;
	margin-bottom: 5px;
}
.review-gazou img{
	border-radius: 50%;
	max-width: 95%;	
}
.review{
	width: 309px;
	height: 450px;
	margin: 0 auto;
	display: block;
}
.review2{
	width: 192px;
	height: 280px;
	margin: 0 auto;
	display: block;
}

.popup-text:not(:last-of-type) {
  margin-bottom: 1em;
}

.popup-close {
  cursor: pointer;
  position: absolute;
  top: -26px;
  right: 0;
}

.itemname{
	font-size: 10px;
	font-weight: 300;
	line-height: 150%;
	text-align: center;
	margin: 5px auto;
}

.clearfix {
  display: block;
  clear:both;
}

.br-sp {
	display: inline;
}
.br-pc {
	display:none;
}


.midashi1{
    color: #545454;
	border-bottom: solid 1px #747474;
	position: relative;
	font-size:18px;
}

.midashi2{
	margin: 10px auto;
    color: #545454;
	border-bottom: solid 1px #747474;
	font-size:13px;	
}

.image_sub{
	width: 100%;
	margin: 0 auto;
	display: block;
	margin-bottom: 15px;
	}
	
.itembox_sub {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 5px 0;
}
	
.itembox_sub div {
	width: 43%;
	text-align: center;
	margin: 0 5px 10px;
	font-size: 8px;
}
.itembox_sub div p {
	width: 100%;
	margin: 0 auto;
}
.itembox_sub div img {
	width: 100%;
}

.text_01{
	
}
.text_01 p{
	font-size: 12px;
}

.box2 {
	border: 3px solid #b1aec3;
	max-width: 800px;
	margin: 0 auto;
	}

.box2_ttl {
	font-size: 18px;
	margin: 0;
	background: #b1aec3;
	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{
	text-align: center;
	font-size: 11px;
	font-weight: 100;
	line-height: 1.5;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
/* デスクトップレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
	
.pjax-target{
	background-repeat: no-repeat;
	background-size: 100%;
}
	
.allbox {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	width: 100%;
	max-width: 950px;
	margin: 0 auto;
	padding-top: 0px;
}
.midashi-chuui{
	padding: 5px 10px;
	background-color: darkred;
	color: #FFFFFF;
	font-size: 20px;
	font-weight: bold;
}
	.chuui-text {
		border: none; 
		background-color: #FFFFFF; 
		line-height: 200%;	
		padding: 10px;
		font-size: 16px;
		border: 2px solid darkred;		
	}
	
.mongon p{
	font-size: 18px;
    font-weight: bold;
    text-align: center;
}
    
.midashi-blue{
	font-size: 30px;
	font-weight: bold;
	color: #248FAA;
	text-align: center;
}
	
	
	.midashi-gray{
	font-size: 20px;
	font-weight: bold;
	color: #595757;
	text-align: center;
	border-bottom: solid 2px #b8b8b8;
	margin: 20px auto;
}
	
	
.tab-color1{
    background-color: #1E79AC;
}

.tab-color2{
    background-color: #F2A263;
}
	
.tab-001 > label {
    font-size: .8em;
}

.tab-001 > div {
    padding: 1.5em 0em;
}
	
.itemcoad{
	background-color: #F46C77;
	color: #fff;
	padding: 0 2px;
	text-align: center;
	display: inline-block;
	margin-bottom: 5px; 
}	
    
    
.itembox_2 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 20px 0;
	padding: 0 10px;
}
.itembox_2 div {
	width: 49%;
	text-align: center;
	margin: 0 0 10px 0;
	font-size: 10px;
}
.itembox_2 div p {
	margin: 0 auto;
}
.itembox_2 div img {
	width: 100%;
}
    
    
.itembox_10 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.itembox_10 div {
	width: 12%;
	text-align: center;
	margin: 0 0 10px 0;
	font-size: 10px;
}
.itembox_10 div p {
	margin: 0 auto;
    font-size: 10px;
}
.itembox_10 div img {
	width: 100%;
	max-width: 150.65px;	
	max-height: 150.65px;
}
	
		
.itembox_4 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 20px 0;
}

.itembox_4 div {
	width: 47%;
	text-align: center;
	margin: 0 10px 10px 0;
	font-size: 8px;
}
.itembox_4 div p {
	width: 75px;
	margin: 0 auto;
}
.itembox_4 div img {
	width: 80%;
}
	
	
.itembox_3 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0px;
}
.itembox_3 div {
	width: 30%;
	text-align: left;
	margin: 0px 5px 5px;
	font-size: 12px;
}
.itembox_3 div p {
	width: 100%;
	margin: 0 auto;
}
.itembox_3 div img {
	width: 100%;
}	
.scroll_content { /* リスト全体のスタイル */
  display: flex;
  max-width: 1500px;
  margin: 1px;
  overflow-x: auto;
}
 
.scroll_content li { /* 各リストのスタイル */
  width: 18%;
  padding: 2px;
  margin: 3px;
  flex-shrink: 0;
  list-style: none;
}

/* 横スクロールここから */	
.scroll_content p { /* 画像下の文字サイズ */
	font-size: 12px;
}


.scroll_content img { /* 画像のスタイル */
  width: 150%;
  max-height: 300px;
  object-fit: cover;
}
 
.scroll_content::-webkit-scrollbar {
  height: 12px; /* スクロールバーの高さ */
}
 
.scroll_content::-webkit-scrollbar-thumb {
  background: #aaa; /* ツマミの色 */
  border-radius: 6px; /* ツマミ両端の丸み */
}
 
.scroll_content::-webkit-scrollbar-track {}

/* 横スクロールここまで */
	
.oshi{
		margin-top: -420px;
	}

.popup-window2 {
  max-width: 870px;
}	
	
.popup-open {
	margin-top: 50px;
}
	
.review-gazou {
	border-radius: 50%;
	margin-bottom: 5px;
}
.review-gazou img{
	border-radius: 50%;
	max-width: 80%;
}
.review{
	width: 412px;
	height: 600px;
	margin: 0 auto;
	display: block;
}
	
.review2{
	width: 412px;
	height: 600px;
	margin: 0 auto;
	display: block;
}
	
.itemname{
	font-size: 10px;
	font-weight: 300;
	line-height: 120%;
	text-align: center;
	margin: 0 auto 5px;
}
	
.br-sp {
	display:none;
}
.br-pc {
	display: inline;
}
	
.midashi1{
    color: #545454;
	border-bottom: solid 1px #747474;
	font-size: 20px;
}
.midashi2{
	margin: 10px auto;	
    color: #545454;
	border-bottom: solid 1px #747474;
}

.sub-bg{
	background: #FFFFFF;
	border: solid 5px #F1F1F1;
}
	
.midashi_sub{
	width: 100%;
	background: #545454;
    color: #FFF;
    padding: 10px 15px;
}
	
.image_sub{
	width: 100%;
	margin: 0 auto;
	display: block;
	margin-bottom: 15px;
	}
	
.itembox_sub {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 10px 0;
}
	
.itembox_sub div {
	width: 45%;/*45%*/
	text-align: center;
	margin: 0 5px 10px;
	font-size: 8px;
}
.itembox_sub div p {
	width: 100%;
	margin: 0 auto;
}
.itembox_sub div img {
	width: 100%;
}	
	.text_01{
		
	}	
	.text_01 p{
		font-size:14px;
	}
	
	.box2_ttl {
	font-size: 30px;
	margin: 0;
	background: #b1aec3;
	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: 25px;
	font-weight: bold;
}

.box2_sub{
	text-align: center;
	font-size: 20px;
	font-weight: 100;
	line-height: 1.5;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}	

}



/* タブレットトップレイアウト : 769 px 〜最大 1100 px。*/

@media only screen and (max-width: 1100px)  and (min-width: 560px) {
	.pjax-target{
	background-repeat: no-repeat;
	background-size: 100%;
}
}