@charset "utf-8";
/***************************************************
information
  filename : myp_parts.css;
***************************************************/

/*======== app_myp_dez.css ========*/
/****************** マイページ要素 ******************/

/* ** myp01 start ** */
/*** 01: マイページナビ ***/

/*** マイページナビ ***/
.mypagenav {margin: 0 auto;padding: 0;}
.mypagenav ul {margin: 0 auto;padding: 0;}
.mypagenav li {
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.mypagenav a {
	text-decoration: none;
	display: block;
	color: var(--app-mypagenav-txt); /* テキスト色 */
	font-size: var(--font-mypagenav); /* フォントサイズ */
	font-weight: bold;
}
.mypagenav a:hover {filter: alpha(opacity=65);-moz-opacity:0.75;opacity:0.75;text-decoration: none;}

/* デザインパターン01 アイコン付き下線 */
.mypTp01.mypagenav a {
	margin: 0;
	padding: 1.0rem 0.5rem 1.0rem 4.5rem;
	border-bottom: var(--app-mypagenav-brd); /* ボーダー指定 */
	background: var(--app-mypagenav-bg); /* 背景色 */
}
.mypTp01.mypagenav .mypagenavSec a {
	margin: 0;
	padding: 0.8rem 0.5rem 0.8rem 4.5rem;
	border-bottom: var(--app-mypagenav-sec-brd); /* ボーダー指定 */
	background: var(--app-mypagenav-sec-bg); /* 背景色 */
}
/* デザインパターン02 アイコン付き囲み線 */
.mypTp02.mypagenav a {
	margin: 0.4em 0;
	padding: 0.8em 0.5em 0.8em 2.8em;
	border: var(--app-mypagenav-brd); /* ボーダー指定 */
	border-radius: var(--app-mypagenav-rod);-webkit-border-radius: var(--app-mypagenav-rod);-moz-border-radius: var(--app-mypagenav-rod);/* 角丸 */
	background: var(--app-mypagenav-bg); /* 背景色 */
	box-shadow: var(--app-mypagenav-bbg);/* 背景影色 */
}
.mypTp02.mypagenav .mypagenavSec a {
	margin: 0.4em 0;
	padding: 0.8rem 0.5rem 0.8rem 4.5rem;
	border: var(--app-mypagenav-sec-brd); /* ボーダー指定 */
	background: var(--app-mypagenav-sec-bg); /* 背景色 */
}
/* デザインパターン03 囲み線 */
.mypTp03.mypagenav a {
	margin: 0.2em 0;
	padding: 0.8em 0.5em 0.8em 1.0em;
	border: var(--app-mypagenav-brd); /* ボーダー指定 */
	border-radius: var(--app-mypagenav-rod);-webkit-border-radius: var(--app-mypagenav-rod);-moz-border-radius: var(--app-mypagenav-rod);/* 角丸 */
	background: var(--app-mypagenav-bg); /* 背景色 */
	box-shadow: var(--app-mypagenav-bbg);/* 背景影色 */
}
.mypTp03.mypagenav .mypagenavSec a {
	margin: 0.2em 0;
	padding: 0.8rem 0.5rem 0.8rem 4.5rem;
	border: var(--app-mypagenav-sec-brd); /* ボーダー指定 */
	background: var(--app-mypagenav-sec-bg); /* 背景色 */
}
/* デザインパターン04 囲み線左罫線 */
.mypTp04.mypagenav a {
	margin: 0.4em 0;
	padding: 0.8em 0.5em 0.8em 0.5em;
	border: var(--app-mypagenav-brd); /* ボーダー指定 */
	border-radius: var(--app-mypagenav-rod);-webkit-border-radius: var(--app-mypagenav-rod);-moz-border-radius: var(--app-mypagenav-rod);/* 角丸 */
	background: var(--app-mypagenav-bg); /* 背景色 */
	box-shadow: var(--app-mypagenav-bbg);/* 背景影色 */
}
.mypTp04.mypagenav .mypagenavSec a {
	margin: 0.2em 0;
	padding: 0.8rem 0.5rem 0.8rem 2.0rem;
	border: var(--app-mypagenav-sec-brd); /* ボーダー指定 */
	background: var(--app-mypagenav-sec-bg); /* 背景色 */
}
.mypTp04.mypagenav a span {
	padding: 0 0 0 0.8em;
	border-left: var(--app-mypagenav-brd-l); /* 見出しボーダー指定 */
}
/* マイページナビ(アイコン) */
.mypTp01.mypagenav a.mypagetop,
.mypTp02.mypagenav a.mypagetop {background: var(--app-mypagetop-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypageprof,
.mypTp02.mypagenav a.mypageprof {background: var(--app-mypageprof-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypagepassword,
.mypTp02.mypagenav a.mypagepassword {background: var(--app-mypagepassword-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypageservice,
.mypTp02.mypagenav a.mypageservice {background: var(--app-mypageservice-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypageseminar,
.mypTp02.mypagenav a.mypageseminar {background: var(--app-mypageseminar-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypageproduct,
.mypTp02.mypagenav a.mypageproduct {background: var(--app-mypageproduct-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypagecart,
.mypTp02.mypagenav a.mypagecart {background: var(--app-mypagecart-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypagecontact,
.mypTp02.mypagenav a.mypagecontact {background: var(--app-mypagecontact-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypagework,
.mypTp02.mypagenav a.mypagework {background: var(--app-mypagework-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypagepush,
.mypTp02.mypagenav a.mypagepush {background: var(--app-mypagepush-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypageconpost,
.mypTp02.mypagenav a.mypageconpost {background: var(--app-mypageconpost-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypageprdpost,
.mypTp02.mypagenav a.mypageprdpost {background: var(--app-mypageprdpost-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypagebbspost,
.mypTp02.mypagenav a.mypagebbspost {background: var(--app-mypagebbspost-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypagefavorite,
.mypTp02.mypagenav a.mypagefavorite {background: var(--app-mypagefavorite-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypagebenefits,
.mypTp02.mypagenav a.mypagebenefits {background: var(--app-mypagebenefits-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypageaffiliate,
.mypTp02.mypagenav a.mypageaffiliate {background: var(--app-mypageaffiliate-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypageinfo,
.mypTp02.mypagenav a.mypageinfo {background: var(--app-mypageinfo-ico) 0.5em center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav a.mypnavIco,
.mypTp02.mypagenav a.mypnavIco {background-size:24px 24px;}

/* ** myp01 end ** */

/* ** myp02 start ** */
/*** 02: マイページナビ(プロフ写真エリア) ***/
.myPhoto {
	margin: 0 auto;
	padding: var(--app-myPhoto-pd); /* パディング */
	border-radius: var(--app-myPhoto-rod);-webkit-border-radius: var(--app-myPhoto-rod);-moz-border-radius: var(--app-myPhoto-rod);/* 角丸 */
	border: var(--app-myPhoto-brd); /* ボーダー指定 */
	background: var(--app-myPhoto-bg); /* 背景色 */
}
.myPhoto p.myName {
	margin: 0 auto;
	padding: 0.5em 0;
	color:  var(--app-myPhoto-txt); /* テキスト色 */
	text-align: center;
	font-size: var(--font-myPhotoName); /* フォントサイズ */
	font-weight: bold;
}
/* マイページ写真単体 */
.myPhoto .photoArea {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--app-myPhoto-rod);
	-webkit-border-radius: var(--app-myPhoto-rod);
	-moz-border-radius: var(--app-myPhoto-rod);/* 角丸 */
	border: var(--app-photoArea-brd); /* ボーダー指定 */
	background: var(--app-photoArea-bg); /* 背景色 */
}
.myPhoto .photoArea {max-width: var(--app-photoArea-size);height: var(--app-photoArea-size);} /* 写真大きさ */
.myPhoto .photoArea img {position: absolute;width: 100%;height: auto;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}

/* ** myp02 end ** */

/* ** myp03 start ** */
/*** 03: マイページトップ表示枠 ***/

/* 基本設定 */
.mypageBox {margin: 0 auto;padding: 0;}

/* マイページトップ等で使用 */
.mypageBoxDet {
	margin: var(--app-mypageBoxDet-mg); /* マージン  */
	padding: var(--app-mypageBoxDet-pd); /* パディング */
	border-radius: var(--app-mypageBoxDet-rod);-webkit-border-radius: var(--app-mypageBoxDet-rod);-moz-border-radius: var(--app-mypageBoxDet-rod); /* 角丸 */
	border: var(--app-mypageBoxDet-brd); /* ボーダー指定  */
	background: var(--app-mypageBoxDet-bg); /* 背景色 */
	box-shadow: var(--app-mypageBoxDet-bbg);/* 背景影色 */
}
.mypageBoxDet li {list-style: none;}
.mypageBoxDet dl,
.mypageOrdBox dl {
	display: flex;
	margin: var(--app-mypageBoxDet-dl-mg); /* DLマージン */
	padding: var(--app-mypageBoxDet-dl-pd); /* DLパディング */
	color: var(--app-mypageBoxDet-txt); /* テキスト色 */
	font-size: var(--font-mypageBoxDet); /* フォントサイズ */
	font-weight: bold;
	border-bottom: var(--app-mypageBoxDet-brd-dl); /* 仕切りボーダー指定 */
}
.mypageBoxDet dt {
	min-width: var(--app-mypageBoxDet-dt-size); /* DTサイズ */
	padding: var(--app-mypageBoxDet-dt-pd); /* DTパディング */
}
.mypageBoxDet dd {
	padding: var(--app-mypageBoxDet-dd-pd); /* DDパディング */
}
/* ===================================================================================
for SP max-width: 480px
=================================================================================== */
@media screen and (max-width: 480px) {
	.mypageBoxDet dl,
	.mypageOrdBox dl {display: block;}
	.mypageBoxDet dt {min-width: 100%;}
}
/* ** myp03 end ** */

/* ** myp05 start ** */
/*** 05:マイページ購入・申込・受付一覧表示枠 ***/
/* 外枠 */
.mypageOrdBox {
	margin: var(--app-mypageOrdBox-mg);/* マージン */
	padding: var(--app-mypageOrdBox-pd);/* パディング */
	border-radius: var(--app-mypageOrdBox-rod);-webkit-border-radius: var(--app-mypageOrdBox-rod);-moz-border-radius: var(--app-mypageOrdBox-rod); /* 角丸 */
	border: var(--app-mypageOrdBox-brd); /* ボーダー指定 */
	background: var(--app-mypageOrdBox-bg); /* 背景色 */
}
/* 内枠 */
.mypageOrdBoxInn {
	margin: var(--app-mypageOrdBoxInn-mg);/* マージン */
	padding: var(--app-mypageOrdBoxInn-pd);/* パディング */
	border-radius: var(--app-mypageOrdBoxInn-rod);-webkit-border-radius: var(--app-mypageOrdBoxInn-rod);-moz-border-radius: var(--app-mypageOrdBoxInn-rod); /* 角丸 */
	border: var(--app-mypageOrdBoxInn-brd); /* ボーダー指定 */
	background: var(--app-mypageOrdBoxInn-bg); /* 背景色 */
}
.mypageOrdBoxBt {
	margin: 0.2rem auto;
	padding: 0.5rem 0;
	display: flex;
	justify-content: flex-end;
}
.mypageOrdBoxBt p {width: 24%;}

/* ===================================================================================
for SP max-width: 480px
=================================================================================== */
@media screen and (max-width: 480px) {
	.mypageOrdBoxBt {flex-wrap: wrap;justify-content: flex-start;}
	.mypageOrdBoxBt p {width: 50%;}
}
/* ** myp05 end ** */

/* ** myp06 start ** */
/*** 06:マイページ購入詳細表示枠 ***/

/* 基本枠 */
.ordDetBox {
	padding: var(--app-ordDetBox-pd); /* パディング */
	border-radius: var(--app-ordDetBox-rod);-webkit-border-radius: var(--app-ordDetBox-rod);-moz-border-radius: var(--app-ordDetBox-rod);/* 角丸 */
	border: var(--app-ordDetBox-brd); /* ボーダー指定 */
	background: var(--app-ordDetBox-bg); /* 背景色 */
	box-shadow: var(--app-ordDetBox-bbg);/* 背景影色 */
}
/*** マイページ購入商品注文履歴表示 ***/

/* 基本枠 */
.PrdDetTableT th {width: 20%;}

/* 商品型番・商品番号 */
.PrdDetTable p.prdDetNo {font-size: 1.2rem;}
.PrdDetTable p.prdDetName {font-size: 1.4rem;}

/* 商品単価 */
.PrdDetTable .TableBgTanka {
	font-size: 1.2rem;
	background: var(--td-Tanka-bg);/* 背景色 */
}
/* 商品個数 */
.PrdDetTable .TableBgQuantity {
	font-size: 1.2rem;
	background: var(--td-Quantity-bg);/* 背景色 */
}
/* 小計 */
.PrdDetTable .TableBgSubtotal {
	font-size: 1.4rem;
	background: var(--td-Subtotal-bg);/* 背景色 */
}
/* 商品合計 */
.PrdDetTable .TableBgProducttotal {
	font-size: 1.4rem;
	background: var(--td-Producttotal-bg);/* 背景色 */
}
.PrdDetTable span.ProducttotalPay {font-size: 1.4rem;}

/* 送料 */
.PrdDetTable .TableBgPostage {
	font-size: 1.2rem;
	background: var(--td-Postage-bg);/* 背景色 */
}
.PrdDetTable span.PostagePay {font-size: 1.4rem;}

/* 合計金額 */
.PrdDetTableT td.TableBGTotal,
.PrdDetTable td.TableBGTotal {
	font-size: 1.4rem;
	background: var(--td-Total-bg);/* 背景色 */
}
.PrdDetTable span.TotalPay {font-size: 1.8rem;}

/* 調整金額 */
.PrdDetTable td.TableBGAdjustment {
	font-size: 1.2rem;
	background: var(--td-Adjustment-bg);/* 背景色 */
}
.PrdDetTable span.AdjustmentPay {font-size: 1.4rem;}

/* 税金 */
.PrdDetTable td.TableBGTax {
	font-size: 1.2rem;
	background: var(--td-Tax-bg);/* 背景色 */
}
.PrdDetTable span.TaxPay {font-size: 1.2rem;}

/* ===================================================================================
for SP max-width: 480px
=================================================================================== */
@media screen and (max-width: 480px) {
	.PrdDetTableT th {width: 35%;}
}
/* ** myp06 end ** */

/* ** myp07 start ** */
/*** 07:マイページ通知一覧表示枠 ***/

/* 基本枠 */
.pushList {
	list-style: none;
	margin: var(--app-pushList-mg);/* マージン */
	padding: var(--app-pushList-pd);/* パディング */
	border-radius: var(--app-pushList-rod);-webkit-border-radius: var(--app-pushList-rod);-moz-border-radius: var(--app-pushList-rod);/* 角丸 */
	border: var(--app-pushList-brd); /* ボーダー指定 */
	background: var(--app-pushList-bg); /* 背景色 */
	box-shadow: var(--app-pushList-bbg);/* 背景影色 */
}
/* 項目枠 */
.pushList li {
    position: relative;
	margin: var(--app-pushList-li-mg);/* マージン */
	padding: var(--app-pushList-li-pd);/* パディング */
    display: flex;
    justify-content: space-between;
    border-bottom: var(--app-pushList-li-brd); /* ボーダー指定 */
}
/* リンク制御 */
.pushList a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition:.3s;
}
.pushList a:hover {
	background: var(--app-pushList-a-bg); /* 背景色 */
	filter: alpha(opacity=15);-moz-opacity:0.15;opacity:0.15;text-decoration: none;
}
/* 日付エリア */
.pushDate {
	width: 20%;
	padding-top: 0.5rem;
	font-size: var(--font-pushDateDetail); /* フォントサイズ */
	font-weight: bold;
}
/* タイトル・テキストエリア */
.pushText {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 80%;
}
/* タイトル */
.pushTtl {
	font-size: var(--font-pushTtl); /* フォントサイズ */
	font-weight: bold;
	min-width: 100%;
	margin-right: 2.0rem;
	flex-shrink:0;
}
/* テキスト */
.pushBody {
	font-size: var(--font-pushBody); /* フォントサイズ */
	min-width: 100%;
}
/* ===================================================================================
for SP max-width: 480px
=================================================================================== */
@media screen and (max-width: 480px) {
	.pushList li {display: block;}
	.pushDate {width: 100%;padding-top: 0;}
	.pushText {display: block;width: 100%;}
}
/* ** myp07 end ** */

/* ** myp08 start ** */
/*** 08:いいね・投稿履歴表示 ***/

/* 基本枠 */
.postList {
	list-style: none;
	margin: var(--app-postList-mg);/* マージン */
	padding: var(--app-postList-pd);/* パディング */
	border-radius: var(--app-postList-rod);-webkit-border-radius: var(--app-postList-rod);-moz-border-radius: var(--app-postList-rod);/* 角丸 */
	border: var(--app-postList-brd); /* ボーダー指定 */
	background: var(--app-postList-bg); /* 背景色 */
	box-shadow: var(--app-postList-bbg);/* 背景影色 */
}
/* 項目枠 */
.postList li {
	margin: var(--app-postList-li-mg);/* マージン */
	padding: var(--app-postList-li-pd);/* パディング */
    display: flex;
    justify-content: space-between;
    border-bottom: var(--app-postList-li-brd); /* ボーダー指定 */
}
/* リンク制御 */
.postList .postTtl a {
	color: var(--app-postList-txt); /* テキスト色 */
	text-decoration: none;
}
.postList a:hover {text-decoration: underline;}

/* 日付・写真エリア */
.postDate {width: 20%;}
.postDate .postDateDetail {
	padding: 0;
	font-size: var(--font-postDateDetail); /* フォントサイズ */
	font-weight: bold;
}
.postDate .postImg {padding-bottom: 0.5rem;} /* 写真 */
.postDate .postImg img {width: 100%;} /* 写真サイズ */
.postDate .postDateIco {padding-top: 1.0rem;} /* 承認・未承認アイコン */
.postDate .postDateIco .IcoBox{width:auto;}

/* タイトル・テキストエリア */
.postText {width: 77%;}

/* タイトル */
.postTtl {
	font-size: var(--font-postTtl); /* フォントサイズ */
	font-weight: bold;
	min-width: 100%;
	margin-right: 2.0rem;
	flex-shrink:0;
	line-height: 1.0;
}
/* テキスト */
.postBody {
	font-size: var(--font-postBody); /* フォントサイズ */
	min-width: 100%;
	padding-top: 1.5rem;
}
/* ボタン配置 */
.postBt {
	padding-top: 2.0rem;
	display: flex;
	justify-content: flex-start;
}
.postBt p {padding: 0 0.2rem;width: 120px;}

/* 商品価格・カートボタン */
.postPrdDet {
	padding: 1.0rem 0 0.5rem 0;
	display: flex;
	justify-content: flex-start;
}
.postPrdDet .postPrdDetInn {width: 180px;padding: 0 1.0rem;font-weight: bold;}
.postPrdDet .postPrdCart {width: 150px;padding-top: 1.5rem;}
.postPrdDet .postPrdDetInn .postPrdNo {
	font-size: var(--font-postPrdNo); /* フォントサイズ */
}
.postPrdDet .postPrdDetInn .postPrdPay span {
	font-size: var(--font-postPrdPay); /* フォントサイズ */
}
/* 投稿コメント表示タイトル */
.postBodyTi {
	width: 100%;
	position: relative;
	padding-top: 2.0rem;
	padding-bottom: 2.0rem;
	text-align: center;
	line-height: 1.0;
	color: var(--app-postBodyTi-txt); /* テキスト色 */
	font-size: 1.4rem;
	font-weight: bold;
}
.postBodyTi:before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 1px;
	content: '';
	background: var(--app-postBodyTi-txt); /* テキスト色 */
}
.postBodyTi span {
	position: relative;
	padding: 0 1em;
	background: var(--app-postList-bg); /* 背景色 */
}
/* トピックスデータエリア */
.boardPostData {padding: 1.5rem 0 0 0}

/* トピックスカテゴリ */
.postDate .postDateCate {
	padding: 0 0 0.5rem 0;
	font-size: var(--font-postDateCate); /* フォントサイズ */
	font-weight: bold;
}
/* 削除時 */
.postList li.remove{
	padding:0.2em 0;
}
.postList li.remove .postDate,
.postList li.remove .postBody,
.postList li.remove .postBodyTi,
.postList li.remove .postPrdDet{
	visibility:hidden;
	width:0;
	height:0;
	margin:0;
	padding:0;
}
.postList li.remove .postText{
	width:100%;
}
.postList li.remove .postTtl{
	font-size:0.8em;
	font-weight:inherit;
}
.postList li.remove .postCaut{
	font-size:0.8em;
	font-weight:700;
}
.postList li.remove .postBt{
	font-size:0.8em;
	padding:0.5em 0 0;
}
.postList li.remove .editBt a,
.postList li.remove .editBt button,
.postList li.remove .editBt span{
	font-size: 1em;
	padding:0.2em 0 ;
	font-weight: inherit;
}
/* ===================================================================================
for SP max-width: 480px
=================================================================================== */
@media screen and (max-width: 480px) {
}
/* ** myp08 end ** */