@charset "utf-8";

/********** サイトの定義 **********

使用する文字サイズ：
10px
14px（基本）
16px
18px（中サイズ見出し）
20px（特例:TOPの検索するボタンなど）
24px（特例:TOPのエリア検索・駅検索など）
28px（大サイズ見出し）

空白の使用サイズ：
10px
20px
40px（基本）
60px
120px（大見出しの段落ごと）

*******************************/


main {
	width: 1200px;
	margin: 40px auto 0;
}




/********** メインコンテンツ（中央カラム） ********/

main #main {
	float: left;
	width: 880px;
	margin: 0;
}

main #main .content {
	margin: 0;
}


section {
	padding-bottom: 40px;
	border-bottom: 1px solid #eee;
	margin-bottom: 40px;
}

section h3 {
	display: inline-block;

	margin: 0 0 20px 0;
	padding: 0;

	font-size: 18px;
	font-weight: bold;
}




/************************************************************
　ユーザー詳細ページ（中央カラム）
************************************************************/

/***** ユーザー詳細ページ *****/

#userPage {
	display: inline-block;
	width: 100%;
	margin-bottom: 120px;
}


/* ヘッダー画像 */
#userPage .headline {
	height: 293.33px;
}

#userPage .headline img.headerBG {
	/* position: absolute; */
	width: 880px;

	/* アスペクト比 3:1 */
	aspect-ratio: 3 / 1;

	object-fit: cover;
}

#userPage .headline img.icon {
	position: relative;
	top: -73px;
	left: 20px;

	display: block;

	width: 136px;

	/* アスペクト比 1:1 */
	aspect-ratio: 1 / 1;

	object-fit: cover;

	padding: 2px;			/* ← 謎の黒い線が入ってしまうため、「padding」「background」「border」で3px分の白い枠線を作っています */
	background: #fff;		/* ← 謎の黒い線が入ってしまうため、「padding」「background」「border」で3px分の白い枠線を作っています */
	border: 1px solid #fff;	/* ← 謎の黒い線が入ってしまうため、「padding」「background」「border」で3px分の白い枠線を作っています */

	border-radius: 50%;		/* ← 正円形 ＝ 50% */
}


/* 人物詳細 */
#userPage .details {
	height: 69px;
	margin: 0 0 20px 0;
}


#userPage .details i {
	margin-right: 5px;
}


#userPage .details .profile {
	float: left;

	position: relative;
	top: 20px;
	left: 172px;

	max-width: 284px;
}

#userPage .details .profile .who {

}

#userPage .details .profile .who h2,
#userPage .details .profile .who p {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	margin-right: 10px;
	font-weight: bold;
}

#userPage .details .profile .who h2.name {
	vertical-align: middle;

	height: 29px;
	line-height: 29px;

	max-width: 224px;
	font-size: 20px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#userPage .details .profile .who p.badge {
	vertical-align: middle;

	height: 29px;
	line-height: 29px;

	font-size: 20px;
}

#userPage .details .profile .who p.badge i {
	margin-right: 0;

	color: #caa846;
	background: -webkit-linear-gradient(90deg, #caa846, #e5bd54);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#userPage .details .profile .who p:last-child {
	margin-right: 0;
}

#userPage .details .profile .profession {
	max-width: 284px;
}

#userPage .details .profile .profession p {
	margin: 0;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


#userPage .details .log {
	float: right;

	position: relative;
	top: 20px;

	padding: 14.5px 10px;

	background: #FFCCEB;
}

#userPage .details .log ul {

}

#userPage .details .log ul li {
	display: inline-block;
	margin-right: 15px;
	color: #000;
}

#userPage .details .log ul li:last-child {
	margin-right: 0;
}

#userPage .details .log ul li i {
	color: #ff66c4;
}

#userPage .details .log ul li span {
	font-weight: bold;
}




/* 自己紹介 */
#userPage section .introduction {

}

#userPage section .introduction p {
	font-size: 14px;
}

#userPage section .introduction p:last-child {
	margin: 0;
}




/* 口コミ投稿・写真投稿 */
section#review {
	padding-bottom: 120px;
	border-bottom: none;
	margin-bottom: 0;
}

section#review .more-list {
    width: 100%;
    margin: 0;
}
section#review .more-list ul {
    display: flex;
    flex-wrap: wrap;
    padding-inline-start: 0;
}
section#review .more-list li {
    width: 100%;
    list-style: none;
    margin-bottom: 20px;
}

section#review .more-list li:last-child {
    margin-bottom: 0;
}

section#review .more-btn {
    width: 300px;
	height: 46px;
	line-height: 46px;

    margin: 0 auto;
    padding: 0;

	font-size: 16px;
    color: #fff;
    text-align:center;

    background-color: #38b6ff;
	border-radius: 23px;
}
section#review .more-btn:hover{
    cursor: pointer;
}


section#review ul li .reviewDetails {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 10px;
  width: 100%;
  font-size: 14px;
  background: #fff;
  border: solid 2px #38b6ff;
	border-radius: 6px;

  box-sizing: border-box;

	background: #fff;
}

section#review ul li .reviewDetails:hover {
	background: #E5F5FF;
}

section#review ul li .reviewDetails .post {
	width: 100%;
}


section#review ul li .reviewDetails .post p.shopName {
	height: 26px;
	line-height: 26px;

	margin-bottom: 4px;

	font-size: 18px;
	font-weight: bold;
}

section#review ul li .reviewDetails .post p.shopName a {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 20px);
	height: calc(100% - 20px);

	padding: 10px;

	color: #333;
	text-decoration: none;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	z-index: 2; /* 理由：星レビューが「z-index:1;」のため */
}


section#review ul li .reviewDetails .post p.star5 {

}

section#review ul li .reviewDetails .post p span.star5_rating {

}


section#review ul li .reviewDetails .post p.star5 span.average {
	vertical-align: middle;
	font-size: 24px;
	font-weight: bold;
	color: #ff9600;

	line-height: 1;
}


section#review ul li .reviewDetails .post p.title {
	font-size: 18px;
	font-weight: bold;
}

section#review ul li .reviewDetails .post p.title a {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 193px);
	height: calc(100% - 20px);

	padding: 10px 183px 10px 10px;

	color: #333;
	text-decoration: none;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	z-index: 2; /* 理由：星レビューが「z-index:1;」のため */
}

/*
section#review ul li .reviewDetails .post p.title a:hover {
	color: #333;
	text-decoration: none;
}
*/


section#review ul li .reviewDetails .post p.text {

}


section#review ul li .reviewDetails .photo {
	position: relative;
	z-index: 2;
}

section#review ul li .reviewDetails .photo dl {

}

section#review ul li .reviewDetails .photo dl dd {
	display: inline-block;

	width: calc(100% / 10 - 9px);

	margin: 0;
	margin-right: 10px;
	margin-bottom: 10px;
}

section#review ul li .reviewDetails .photo dl dd:nth-child(10n) {
	margin-right: 0;
}

/*
section#review ul li .reviewDetails .photo dl dd:nth-last-child(-n+10) {
	margin-bottom: 0;
}
*/

section#review ul li .reviewDetails .photo dl dd img {
	width: 100%;

	/* アスペクト比 1:1 */
	aspect-ratio: 1 / 1;

	object-fit: cover;

	border-radius: 6px;
}


section#review ul li .reviewDetails .post p.date {
	color: #ccc;
	margin-bottom: 0;
}




/*ローディングが表示されるエリアの設定*/
#infscr-loading {
width:100%;
text-align:center;
margin:20px auto;
}

#infscr-loading img{
	width:30px;/*ローディング画像のサイズ*/
}




/********** 右カラム ********/

aside {
	float: right;
	width: 300px;
	margin: 0;

	height: 1000px;
}


aside .PR {
	float: right;
}

aside .PR ul {

}

aside .PR ul li {
	width: 300px;
	height: 250px; /* firefoxブラウザでのレイアウト崩れ対策として高さを設定しています */
	margin-bottom: 25.5px;
}

aside .PR ul li:last-child {
	margin-bottom: 0;
}

aside .PR ul li a {
	display: block;
}

aside .PR ul li a img {
	width: 100%;
}




/************************************************************
　ユーザー詳細ページ（全体）各箇所アニメーション設定
************************************************************/

/*==================================================
背景色が伸びて出現＝左から右へ流れる背景
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
  }
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ffea00;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}




/*==================================================
フェードアップ＝下から上へ出現（適用箇所：「class="box"」を設定済みの<li> 等）
===================================*/

/* スタート時は要素自体を透過0にするためのopacity:0;を指定する */
.box{
  opacity: 0;
}


.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}




/*==================================================
左から枠ごとフェードインして出現（適用箇所：テーブル枠）
===================================*/

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}




/************************************************************
　ユーザー詳細ページ（全体）lightbox設定
************************************************************/

.lb-data .lb-details {
  width: 100% !important;
  height: 20px !important;
  line-height: 20px !important;
  margin-top: 10px;
  text-align: center !important;
}