/* トップページのcss */
#top {
	background-color: #EFEFEF;
	background-repeat:no-repeat;
	background-size: 1500px;
	background-position: top;
}
#top-content {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
/*
	width: calc(100% - 40px);
	margin: 0 auto;
	padding-top: 10px;
*/
}
/*
.info {
	background-color: #FFFFFF;
	height: 36px;
	border-radius: 5px;
	padding: 0 15px;
	margin-bottom: 383px;
}
.info img {width: 14px;margin-right: 8px;}
*/
#top-panel {
	min-width: 1200px;
	width: 100%;
	box-sizing: border-box;
	padding: 36px 28px 0;
	background-color: #FFFFFF;
}
#top-panel .category {
	max-width: 247px;
	width: 50%;
	margin-right: 52px;
	margin-bottom: 52px;
	/*margin: 0 17px 66px 17px;*/
}
#top-panel .category:nth-child(4n) {
	margin-right: 0px;
}
#top-panel .category .relative {
	overflow: hidden;
}

#top-panel .category > .relative::before {
  content:"";
  display: block;
  padding-top: 100%;
}
#top-panel .category img{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 16px 20px 24px;
  overflow: hidden;
}

/* topdeals */
.topdeals{width: 247px; margin-bottom: 38px;}
.topdeals img{width:100%;}
.topdeals .mask {
  position: absolute;
  bottom: auto;
  top: 0;
  height: 40%;
  padding: 16px 20px 19px;
}

/* 人気のプラン */
#main .populars {margin-bottom: 25px;}
#main .populars:last-of-type {margin-bottom: 0;}
.populars {
  box-shadow: 0 3px 6px rgba(157, 157, 157, .16);
  border: 1px solid #E8E8E8;
  background-color: #fff;
  padding: 22px 35px 44px;
  box-sizing: border-box;

}
.populars .imgGroup {
  width: 95%;
  height: 258px;
  overflow: hidden;
}
.populars .imgGroup > img:first-of-type {margin-right: 11px;}
.populars .imgGroup + img {
  width: 12px;
  fill: #000000;
}
.popularsDetail {
  flex:1;
  overflow-wrap: break-word;
  word-wrap: break-word;
  min-width: 0;
}
.popularsDetail > div {
  margin-bottom: 18px;
  -webkit-align-items: flex-start;align-items: flex-start;
}
.popularsDetail > div:last-of-type {margin-bottom: 0;}
.popularsDetail > div > div > div > img {height: 21px;}
.popularsDetail > div > div > p {width: 140px; min-width: 140px;}
.popularsDetail > div > div input[type="checkbox"] {margin-right: 9px;}
.popularsDetail > div > div label {margin-right: 15px;display: inline-block;}
.popularsDetail > div > div label:last-of-type {margin-right: 0;}

/* プラン登録 */
.planEntry { 
  width: 100%; 
}
.planEntry > div:first-of-type { 
  border-top: 1px solid #707070; 
}
.planEntry > div { 
  border-bottom: 1px solid #707070; 
  display: flex;
  align-items: stretch;
}
.planEntry > div > p { 
  padding: 10px; 
  box-sizing: border-box; 
}
.planEntry > div > p:first-of-type {
  border-right: 1px solid #707070; 
  text-align: center; 
  width: 30%; 
}
.planEntry > div > p:last-of-type {
  flex: 1; 
  text-align: left; 
}
@media screen and (max-width: 768px) {
  .planEntry > div {
    flex-direction: column;
    font-size: 12px;
  }
  .planEntry > div > p:first-of-type{
    width: 100%;
    border: none;
    text-decoration: underline;
    text-align: left;
    padding-bottom: 0;
  }
}

/* 店舗個別表示 */
.shopImgDetail {flex-shrink: 0;}
.shopImgDetail > img{
  width: calc(25% - 3px);
  margin-right: 4px;
  margin-bottom: 3px;
  height: auto;
}
.shopImgDetail > img:nth-of-type(4n + 1),.shopImgDetail > img:first-of-type {margin-right: 0;}
.shopImgDetail > img:first-of-type {width: 100%; margin-bottom: 6.8px;}

.popularsDetail > h4 {
  padding-bottom: 15px;
  border-bottom: 1px solid #E3E3E3;
}

.popularsDetail .message-gray {
  padding: 24px 23px 26px 46px;
  border-radius: 7px;
  /*min-height: 188px;*/
}


.popularsDetail > hr {border: none;border-bottom: 1px solid #E3E3E3;}
.timeboard {
  font-size: 50px;
  width: 300px;
  height: 96px;
  line-height: 96px;
  margin: 35px auto 0;
  border-radius: 8px;
  background-color: #EDEDED;
}

.postSNS {margin-top: 35px;}
.postSNS > textarea {height: 117px;}
#main .postSNS > textarea.disable {background-color: #E3E3E3;resize: none;}

/* MySubscriptions */
.MySubscList > div {
  border-bottom: 1px solid #707070;
  padding: 20px 0 30px;
}
.MySubscList hr {border: none; border-top: 1px solid #707070;}
.MySubscListImg {
  width: 210px;
  height: 210px;
}
.MySubscList > div > table th,.MySubscList > div > table td {
  height: 42px;
  border-top: 1px solid #BEBEBE;
  border-bottom: 1px solid #BEBEBE;
}
.MySubscList > div > table th {
  background-color: #F5F5F5;
  width: 165px;min-width: 165px;
  font-weight: 500;
  padding-left: 11px;
  text-align: left;
}
.MySubscList > div > table td {padding-left: 24px;}
.MySubscList > div > table td input[type="checkbox"] {margin-right: 9px;}
.MySubscList > div > table td label {margin-right: 15px;display: inline-block;}
.MySubscList > div > table td label:last-of-type {margin-right: 0;}
.MySubscListImg .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(	0,0,0, 0.37);
  padding: 100px 21px 18px 17px;
}

.subscStore {margin-top: 35px;}
.subscStore > p {margin-bottom: 24px;}

/* カスタマーサービス */
.searchBox {
  border: 1px solid #D8D8D8;
  border-radius: 0;
  height: 63px;
}
#main .searchBox > input[type="text"] {
  border: none;
  height: 100%;
  outline: 0;
}
.searchBox > button {width: 63px;}
.searchBox > button img{margin: auto; width:40px;}

.helpList td{
  border: 1px solid #D3D3D3;
  height: 55px;
  padding: 0;
}
.helpList a{
  width: 100%;
  height: 100%;
  display: block;
  background-image: url(/img/common/chevron-right.svg);
  background-repeat: no-repeat;
	background-size: 7px 13px;
  background-position: right 35px top 21px;
  padding: 0 35px;
  line-height: 55px;
  text-decoration: none;
  color: #000000;
}

.inquiry {
  max-width: 600px;
  margin: 0 auto;
  display: block;
  height: 72px;
  padding: 16px 0 24px;
  border: 1px solid #D6D6D6;
  font-size: 23px;
  text-decoration: none;
  color: #000000;
  background-color: #F7F7F7;
  background-image: linear-gradient(#F7F7F7, #ffffff);
}

.helpAnswer {
  padding: 20px 14px 23px 34px;
  border-bottom: 1px solid #D3D3D3;
  background-image: url(/img/common/chevron-left.svg);
  background-repeat: no-repeat;
  background-size: 7px 13px;
  background-position: left 9px bottom 31px;
}
.helpAnswerList {
  min-height: 120px;
  padding: 27px 0 25px;
  border-bottom: 1px dashed #D3D3D3;
}
.helpAnswerList ol {
  width: calc(100% - 1em);
  margin-left: 1em;
}

#main input[type="text"].inquiryForm,#main textarea.inquiryForm {
  height: 50px;
  border: 1px solid #DEDEDE;
  border-radius: 0;
}
#main input[type="text"].inquiryForm {height: 50px;}
#main textarea.inquiryForm {height: 200px;}
.cautions {
  background-color: #EDEDED;
  border-radius: 12px;
  padding: 23px 34px 45px;
}

.usageHistory {padding: 20px 0 33px 0;}
.usageHistory > div > img{
  width: 211px;min-width: 211px;
  height: 211px;
  border: 1px solid #707070;
  margin-right: 27px;
}
.usageHistory table th,.usageHistory table td {
  width: 18%;
  height: 64px;
  border: 1px solid #C4C4C4;
  font-weight: 400;
  text-align: center;
  font-size: 14px;
}
.usageHistory table th:nth-of-type(2),.usageHistory table td:nth-of-type(2){width: 46%;}
.usageHistory table td:nth-of-type(2) {text-align: left;}
.usageHistory table tr th:first-of-type,.usageHistory table tr td:first-of-type {border-left: none;}
.usageHistory table tr th:last-of-type,.usageHistory table tr td:last-of-type {border-right: none;}

.usageHistoryHead > div:first-of-type {height: 32px;}
.usageHistoryHead {padding-bottom: 19px;}
.usageHistoryHead > .items-center > p {margin-right: 16px;}

/* 検索 */
.searchCount {
  font-size: 14px;
  padding: 15px 10px 5px;
  color: #666;
  background-color: #FFF;
}
#search {
  min-height: calc(100% - 573px);
  margin: 0 auto;
  width: 1125px;
  max-width: 100%;
}
.searchContent {
  width: 655px;
  max-width: 100%;
  padding: 5px 10px 20px;
  padding-left: 15px;
  background-color: #FFF;
}
.serchLink {
  font-size: 22px;
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;
}
.searchSummary {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.5em;
  max-height: 3.5em;
}

h4.shopName {
	font-size:22px;
	border-bottom: 1px solid #e0e0e0;
	width: 100%;
	padding-bottom: 5px;
}
/* パソコン表示 店舗個別表示
@media screen and (min-width: 769px) {
  .shopDetailPC {display: -webkit-flex;display: flex; align-items: flex-start;}
  .shopDetailPC > .popularsDetail{
    flex: 1;
    margin-left: 40px;
  }
  .shopImgDetail {width: 310px;}
}
 */
/* sp表示 */
@media screen and (max-width: 768px) {
	#top {
		background-size: 1100px;
	}
	#top-content {
		width: 100%;
		/*padding: 10px 0px;*/
	}
	.info {margin-bottom: 290px;}
	.topInfo {
		padding: 15px 8px;
		margin-bottom: 20px;
	}
	#top-panel {
		width: 100%;
		min-width: 360px;
		box-sizing: border-box;
		padding: 15px 8px 0;
		background-color: #FFFFFF;
	}
	#top-panel .category {
		max-width: calc(50% - 8px);
		margin-right: 8px;
	}
	#top-panel .category:nth-child(2n) {
		margin-right: 0px;
	}

	/*#top-panel .category:nth-of-type(odd){margin-right: 8px;}*/
	/*.category{width: calc(50% - 16px); margin: 0 0 35px 0;}*/
	/*  .popularsDetail > div > div > p {width: 100px; min-width: 100px;} */
	/* 検索 */
	#search {background-color: #ccc;}
	.searchContent {
		width: 100%;
		margin-bottom: 5px;
		border-top: 1px solid #adadad;
		border-bottom: 1px solid #adadad;
	}
	.searchCount {
		padding: 10px;
		border-bottom: 1px solid #adadad;
	}
	.searchContent:first-of-type{margin-top: 5px;}
	.searchContent:last-of-type{margin-bottom: 0;border-bottom: none;}
	.searchSummary {
		font-size: 14px;
		color: #444;
		line-height: 1.6;
		-webkit-line-clamp: 3;
		min-height: 4.8em;
		max-height: 4.8em;
	}
}
/* 620px以下
@media screen and (max-width: 620px) {
  .mask {
    font-size: 14px;
    padding: 10px 16px 18px;
  }
  .topdeals{width: calc(50% - 16px);}
}
 */
/* 560px以下
@media screen and (max-width: 620px) {
  .mask {font-size: 13px;}
}
 */
/* 540px以下
@media screen and (max-width: 540px) {
  .category{width: calc(50% - 10px); margin: 0 0 35px 0;}
  #top-panel .category:nth-of-type(odd){margin-right: 20px;}
  .mask {
    font-size: 12px;
    padding: 8px 12px 16px;
  }
  .topInfo {margin-bottom: 40px;}
}
 */
/* 520px以下
@media screen and (max-width: 520px) {
  .popularsDetail > div {flex-direction: column;}
  .popularsDetail > div .flex-1 {margin-top: 8px; width: 100%;}
}
 */
/* 460px以下
@media screen and (max-width: 460px) {
  .mask {
    font-size: 10px;
    padding: 8px 12px 16px;
  }
}
 */
/* 374px以下
@media screen and (max-width: 374px) {.info {font-size: 10px;}}
 */

/* 詳細画面ショップリスト */
.flexBlock {
	display: flex;
}
.flexRow {
	flex-direction: row;
}
.flexReverse {
	flex-direction: row-reverse;
}
.flexStart {
	justify-content: start;
}
.flexCenter {
	justify-content: center;
}
.flexWrap {
	flex-wrap: wrap;
}
.flexBetween {
	justify-content: space-between;
}
.flexAround  {
	justify-content: space-around;
}
.flexItem36 {
	flex-basis: 36%;
}
.flexItem64 {
	flex-basis: 64%;
}
.dbBottom {
	border-bottom: underline;
}
@media screen and (max-width: 768px) {

}


