@charset "UTF-8";
/*-- ■レイアウトカラーなどテンプレ調整関する設定 --*/

#contents{
background-color: #fff;
}
@media (min-width: 1025px){
 #contents{
padding-left: 40px !important;
padding-right: 40px !important;
}
}

/*-- スマホ表示時のヘッダー画像の余白調整 --*/
@media screen and (max-width: 1024px){
#main-header #headerimg {
margin-top: 0px !important;
}

#main-header{
margin-left: calc(var(--padding-overall) * -1) !important;
margin-right: calc(var(--padding-overall) * -1) !important;
}
}

#logo-wrap{
padding-top:0 !important;
padding-bottom:0 !important;
height:auto !important;
}

#logo{
height: 50px !important;
min-height: 50px !important;
}


.menubox .sitemenu > li{
 overflow: hidden;
 display: -webkit-box;
 text-overflow: ellipsis;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 1;
}


/*-- サイドメニューのタイトル文字の調整 --*/
.menubox > .title, #pickupentry > .title, .newentry-title, #menu .space-box > .title, #rmenu .space-box > .title{
border-bottom:1px solid #e1e1e1 !important;
font-size:1.0em !important;
font-weight:700 !important;
line-height:1.5 !important;
padding-bottom:.5em !important;
text-align:left !important;
}


/*-- 人気記事の画像サイズの調整 --*/
[id*="pickup_list"] .article-thumb {
width: 50px !important;
}
/*-- 人気記事の文字サイズの調整 --*/
[id*="pickup_list"] .article-title {
font-size: 1.2rem !important;
font-weight: normal !important;
line-height: 1.3 !important;
}
/*-- 人気記事の上下paddingの調整 --*/
ul[id^="pickup_list"] li {
padding-top:0.5em !important;
padding-bottom:0.5em !important;
}
/*-- 人気記事の上のマージン調整 --*/
#pickupentry {
margin-top:0 !important;
}


/*-- ■リスト自分で設定（テンプレートのULリストを解除して自分で設定） --*/
ul.Mylist-1 {
list-style: disc !important;
padding-left: 2em !important;
margin: 0 !important;
}
ul.Mylist-1 li {
margin-top: 0.5em;
}
ul.Mylist-1 li:last-of-type {
margin-bottom: 0.5em;
}



/*-- ■横並びｄｌ・ｄｔ・ｄｄリスト --*/
dl.sidebyside {
margin:0.25em 0;
}
dl.sidebyside dt {
float: left;
line-height:1.4;

}
dl.sidebyside dd {
margin-left: 1.0em;
line-height:1.4;
margin-bottom: 0.25em;
}


/*-- ■横スクロールアイコンの表示切り替え調整（+17pxで考える）  --*/
.bar_area{
display:none !important;
}
@media screen and (max-width: 560px){
.bar_area{
display: block !important;
}
}

/*-- ■横スクロールアイコンの表示切り替え調整「5アイテム用」（+17pxで考える）  --*/
.bar_area_5item{
display:none !important;
}
@media screen and (max-width: 660px){
.bar_area_5item{
display: block !important;
}
}


/*-- ■比較テーブルの調整用 --*/
.Mytable-hikaku {
table-layout:fixed;
width: 100%;
max-width: 800px;
margin-left:auto;
margin-right: auto;
}
.Mytable-hikaku th{
background-color: #FFEE93;
font-size: 0.9em;
font-weight:bold;
line-height: 1.4;
width: 100px;
padding-left: 3px;
padding-right: 3px;
}
.Mytable-hikaku td{
font-size: 0.9em;
line-height: 1.4;
padding-left: 5px;
padding-right: 5px;
}

@media screen and (max-width: 780px){
.Mytable-hikaku {
width:600px;
}
.Mytable-hikaku th{
font-weight: normal;
width: 2.0em;
line-height: 1.2;
}
.Mytable-hikaku td{
font-size: 0.85em;
line-height: 1.4;
}
}


@media screen and (max-width: 650px){
.Mytable-hikaku {
width:500px;
}
.Mytable-hikaku th{
min-width: 0 !important;
}
.Mytable-hikaku td{
min-width: 0 !important;
}
}


/*-- ■比較テーブル（5アイテム）の調整用 --*/
.Mytable-5itemhikaku {
table-layout:fixed;
width: 100%;
max-width: 800px;
margin-left:auto;
margin-right: auto;
}
.Mytable-5itemhikaku th{
background-color: #FFEE93;
font-size: 0.9em;
font-weight:bold;
line-height: 1.4;
width: 100px;
padding-left: 3px;
padding-right: 3px;
}
.Mytable-5itemhikaku td{
font-size: 0.9em;
line-height: 1.4;
padding-left: 5px;
padding-right: 5px;
}

@media screen and (max-width: 780px){
.Mytable-5itemhikaku th{
font-weight: normal;
width: 2.0em;
line-height: 1.2;
}
.Mytable-5itemhikaku td{
font-size: 0.85em;
line-height: 1.4;
}
}


@media screen and (max-width: 680px){
.Mytable-5itemhikaku {
width:620px;
}
.Mytable-5itemhikaku th{
min-width: 0 !important;
}
.Mytable-5itemhikaku td{
min-width: 0 !important;
}
}




/*-- ■比較テーブル（3アイテム用）調整用 --*/
.Mytable-3itemhikaku {
table-layout:fixed;
width: 100%;
max-width: 700px;
margin-left:auto;
margin-right: auto;
}
.Mytable-3itemhikaku th{
background-color: #FFEE93;
font-size: 0.9em;
font-weight:bold;
line-height: 1.4;
width: 100px;
padding-left: 3px;
padding-right: 3px;
}
.Mytable-3itemhikaku td{
font-size: 0.9em;
line-height: 1.4;
padding-left: 5px;
padding-right: 5px;
}

@media screen and (max-width: 780px){
.Mytable-3itemhikaku th{
font-weight: normal;
width: 2.0em;
line-height: 1.2;
min-width: 0 !important;
}
.Mytable-3itemhikaku td{
font-size: 0.85em;
line-height: 1.4;
min-width: 0 !important;
}
}




/*-- ■商品詳細テーブルの調整用 --*/
.Mytable-shohin {
table-layout:fixed;
width:100%;
margin-left: auto; margin-right: auto;
}

.Mytable-shohin th {
width: 125px;
text-align: center;
}


/*-- ■商品詳細テーブルコンパクト版の調整用 --*/
.Mytable-shohin-cmp{
table-layout: fixed;
width: 100%;
}

.Mytable-shohin-cmp th {
width: 15%;
text-align: center;
}






/*-- ■チェックポイント見出し --*/
.My_checkpoint{
text-align:left;
border-bottom:dotted 2px #808080;
margin-bottom:0.5em;
}
@media screen and (max-width: 600px){
.My_checkpoint{
text-align:center;
}
}

/*-- ■チェックポイント枠左右余白調整 --*/
.My_check_textarea{
margin-left: 4em;
margin-right: 4em;
}
@media screen and (max-width: 600px){
.My_check_textarea{
margin-left: 1em;
margin-right: 1em;
}
}




/*-- ■ヘッダーPRテキストの表示位置調整 --*/
.My_pr_txt{
width:100%;
max-width:calc(var(--width-overall) + var(--padding-overall) * 2);
margin-left: auto;
margin-right: auto;
text-align:center;
font-size:0.85em;
line-height:1.4;
color: #333333;
padding-top: 0.25em;
padding-bottom: 0.25em;
}

@media screen and (max-width: 600px){
.My_pr_txt{
font-size:0.8em;
line-height:1.6;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
}




/*-- ■PRタグアイコン --*/
.My_pr_icon {
	display: inline-block;
	margin: 0 0 0 0;
	font-size: 0.85em;
	padding: 0.2em;
	line-height: 1;
	text-decoration: none;
	color: #FFF;
	background-color: #DAC030;
	border: 1px solid #DAC030;
	border-radius: 0.2em;
}



/*-- ■画像のスマホまたはPCだけ表示したい場合の切り替え --*/
/*-- PC版表示CSS  --*/
.img_pc_area{
display:block !important;
}
.img_mb_area{
display:none !important;
}

/*-- スマホ版表示CSS  --*/
@media screen and (max-width: 600px){
.img_pc_area{
display:none !important;
}
.img_mb_area{
display:block !important;
}
}




/*-- ■会話風吹き出し用スタイル --*/
/* 全体の大外枠スタイル */
.kaiwa {
  margin-bottom: 25px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
/* 左画像 */
.kaiwa-img-left {
  margin: 0;
  float: left;
  width: 60px;
  height: 60px;
  margin-right: -70px;
}
/* 右画像 */
.kaiwa-img-right {
  margin: 0;
  float: right;
  width: 60px;
  height: 60px;
  margin-left: -70px;
}
.kaiwa div img {
  width: 100%;
  height: 100%;
  border: 1px solid #aaa;
  border-radius: 50%;
  margin: 0;
}

/* 左からの吹き出しテキスト */
.kaiwa-text-right {
  position: relative;
  margin-left: 80px;
  padding: 10px;
  border-radius: 10px;
  background-color: #FBF8E2;
  margin-right: 12%;
  float: left;
}
/* 右からの吹き出しテキスト */
.kaiwa-text-left {
  position: relative;
  margin-right: 80px;
  padding: 10px;
  border-radius: 10px;
  background-color: #D5EDF5;
  margin-left: 12%;
  float: right;
}
p.kaiwa-text {
  margin: 0 0 20px;
}
p.kaiwa-text:last-child {
  margin-bottom: 0;
}
/* 左の三角形を作る */
.kaiwa-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  top: 15px;
  left: -20px;
}
.kaiwa-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #FBF8E2;
  top: 15px;
  left: -19px;
}
/* 右の三角形を作る */
.kaiwa-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  top: 15px;
  right: -20px;
}
.kaiwa-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #D5EDF5;
  top: 15px;
  right: -19px;
}
/* 回り込み解除 */
.kaiwa:after,.kaiwa:before {
  clear: both;
  content: "";
  display: block;
}

/* レスポンシブ時のサイズ調整 */
@media screen and (max-width:600px){
.kaiwa-text-right {
  margin-right: 1%;
}
.kaiwa-text-left {
  margin-left: 1%;
}
}
/*-- 会話風吹き出しスタイル終わりココまで --*/




/*-- ■テキストはみ出し3点…処理 --*/
.hamidashi_text{
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;  /*-- ※表示する行数指定 --*/
-webkit-box-orient: vertical;
}


/*-- ■レイアウトFLEX設定ボックス（バナー用） --*/
.Myflex_bnr-wrapbox {
display: flex;    /* フレックスボックスにする */
flex-wrap: wrap;    /* 折り返し指定 */
}

.Myflex_bnr-itembox {
margin: 5px 0;    /* 外側の余白 */
width: 100%;    /* 幅指定 */
max-width: 200px;    /* 最大幅指定 */
text-align: center;    /* 文字揃え */
}
@media screen and (max-width: 1024px){
.Myflex_bnr-itembox {
margin: 5px 10px;    /* スマホ時の外側の余白変更 */
}
}


/* ■蛍光ペンアンダーライン */
.My_highlight {
background-image: linear-gradient(transparent 60%, rgba(255, 247, 0, 0.8) 0%)
}

/* ■蛍光ペンアンダーラインv2 */
.My_highlight_v2 {
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.6em; /* 線の太さ */
  text-decoration-color: rgba(255, 247, 0, 0.8); /* 線の色 */
  text-underline-offset: -0.4em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}



/*-- ■アコーディオン表示（パターン1） --*/
.ly_accordion {
margin:5px 0 0 0;
border-bottom: 0;
}

.ly_accordion .bl_inner {
padding: 0 0em;
}

.ly_accordion .el_heading {
display: inline;
}

.ly_accordion .bl_content {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s ease-out 0s;
}

.ly_accordion .el_checkbox {
display: none;
}

.ly_accordion .el_checkbox:checked + .bl_content {
max-height: 9999px;
transition: max-height 0.5s ease-in;
}

/*-- ■フォーム要素などへのマウスオーバー設定 --*/
.yubi_pointer {
 cursor : pointer;
}





/* ■アコーディオン表示【続きを読む】（パターン2） */
.MymoreWrap {
	position: relative;
	width: 100%;
	margin: 0 auto !important;
	padding: 0;
}
.MymoreBtn {
	background: #fff;
	font-size:0.8em;
	color: #fff;
	width: 6em;
	margin: auto;
	padding: 0.1em 0;
	z-index: 3;
	position: absolute;
	right: 0;
	bottom: -1.5em;
	left: 0;
	border-radius: 1em;
	cursor: pointer;
	text-align: center; /*テキストセンターに*/
	opacity: 0; /* 透明にする */
}

/*MymoreBtnの内容でdivで作成する※透明度以外*/
.MymoreTxt{
	background: #B19A78;
	font-size:0.8em;
	color: #fff;
	width: 6em;
	margin: auto;
	padding: 0.1em 0;
	z-index: 2;
	position: absolute;
	right: 0;
	bottom: -1.5em;
	left: 0;
	border-radius: 1em;
	text-align: center; /*テキストセンターに*/
}

.MymoreBtn:hover {
	opacity: 0.5;
}

.MymoreTxt:hover {
	opacity: 0.5;
}

.MymoreTxt::after{
	content: "▼more";
}

.Mymore {
	position: relative;
	overflow: hidden;
	height: 8em;
}
.Mymore::before {
	background-image: linear-gradient(rgba(250, 250, 250, 0)0%, rgba(250, 250, 250, 1) 100%);
	width: 100%;
	height: 8em; /*グラデーションで隠す範囲*/
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
}
.MymoreTrigger {
	display: none;
}

.MymoreTrigger:checked ~ .MymoreTxt::after{
	content: "▲close";
}
.MymoreTrigger:checked ~ .Mymore {
	height: auto;
}
.MymoreTrigger:checked ~ .Mymore::before {
	display: none;
}