@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Courgette&display=swap');

/* 共通
------------------------------------ */
.link_more {
	padding: 10px;
	margin: 0;
	font-size: 0.9em;
}

/* ユーザーページ（ブログ風）
------------------------------------ */
.user_page {
	padding: 36px 0 40px 0;
	margin:0;
}
	.user_page .user_content_area {
		padding: 0 0 30px 0;
		margin: 0;
	}
		.user_page .user_content_area .heade_img {
			padding: 0 0 50px 0;
		}
		.user_page .user_content_area .blog_block {
			padding: 10px 0 0px 0;
			margin: 0 auto 30px auto;
		}
			.user_page .user_content_area .blog_block .paragraph {
				padding: 0 0 0 0;
				margin-bottom : 20px;
			}
			.user_page .user_content_area .blog_block h3 {
				padding: 0 3px 3px 3px;
				margin: 0 auto 20px auto;
				font-size: 1.3em;
				border-bottom: solid 2px #216e81;
			}
			.user_page .user_content_area .blog_block p {
				padding: 10px 0 20px 0;
				margin: 0;
				color: #4e4e4e;
				line-height: 2em;
			}
			.user_page .user_content_area .blog_block .img {
				padding: 30px 0 30px 0;
			}

			/* 地域・お店の情報 */
			.user_page .user_content_area .info_local {
				padding: 10px 0;
				margin: 10px auto 30px auto;
				font-size: 0.9em;
			}
				.user_page .user_content_area .info_local h4 {
					padding: 0 0 4px 0;
					margin: 0px auto 14px auto;
					border-bottom: solid 1px #ddd;
					font-size: 1.1em;
				}
				.user_page .user_content_area .info_local p {
					padding: 0 0 8px 0;
					margin:0;
				}
					.user_page .user_content_area .info_local p a {
						text-decoration: underline;
						color: #216e81;
					}
				.user_page .user_content_area .info_local .material-icons {
					font-size: 1.1em;
				}

			/* ブログの情報 */
			.user_page .user_content_area .info_blog {
				padding: 4px 0 0px 0;
				margin: 0px 0 30px 0;
				font-size: 0.8em;
			}
				.user_page .user_content_area .info_blog span.material-icons {
					font-size: 0.9em;
					color: #363636;
				}
				.user_page .user_content_area .info_blog .tags {
					font-size: 0.9em;
					border:solid 1px #ccc;
					border-radius: 4px;
					padding: 2px 8px;
					margin: 10px 3px 10px 0;
					display: inline-block;
				}

				/* しおりへのリンク */
				.user_page .user_content_area .blog_block .paragraph .shiori {
					background: #369e88;
					color: #fff;
					padding: 10px 18px;
					margin: 0 6px 10px 0;
					border-radius: 6px;
					display: inline-block;
					font-size: 0.9em;
				}

				/* ナイスボタン */
				.nice {
					background: #F45D6F;
					color: #fff;
					padding: 10px 24px;
					margin: 0 6px 10px 0;
					border-radius: 6px;
					display: inline-block;
					font-size: 0.9em;
				}
				/* お気に入りボタン */
				.like {
					background: #F45D6F;
					color: #fff;
					padding: 10px 24px;
					margin: 0 6px 10px 0;
					border-radius: 6px;
					display: inline-block;
					font-size: 0.9em;
				}
				/* ブックマークボタン */
				.bookmark {
					background: #4683a7;
					padding: 10px 24px;
					margin: 0 6px 10px 0;
					border-radius: 6px;
					color: #fff;
					display: inline-block;
					font-size: 0.9em;
				}
				.nice span.material-icons,
				.like span.material-icons,
				.bookmark span.material-icons {
					font-size: 1.1em;
				}
				.option a:hover{
					opacity: 0.6;
				}
				/* 各種ボタンのオフ */
				.nice_off,
				.liked,
				.bookmarked {
					background: #efefef;
					color: #666;
					padding: 10px 24px;
					margin: 0 6px 10px 0;
					border-radius: 6px;
					display: inline-block;
					font-size: 0.9em;
				}
				.shiori span.material-icons,
				.nice_off span.material-icons,
				.liked span.material-icons,
				.bookmarked span.material-icons {
					font-size: 1.1em;
				}
				/*---- スマホ ----*/
				@media screen and (max-width: 430px) {
					.nice,
					.like,
					.bookmark,
					.nice_off,
					.liked,
					.bookmarked {
						margin: 0 6px 20px 6px;
						padding: 6px 18px;
					}
				}

			/* サイドバーエリア */
			.user_page .user_content_area .side_block {
				background: #fafafa;
				padding: 20px;
				margin: 0 0 20px 0;
				color: #4f4e4e;
			}
				.user_page .user_content_area .side_block h3 {
					font-size: 1em;
					border-bottom: solid 1px #ccc;
					padding: 0 0 4px 0;
					margin: 0 auto 10px auto;
				}
					.user_page .user_content_area .side_block h3 span.material-icons {
						font-size: 0.8em;
						color: #363636;
					}
				.user_page .user_content_area .side_block .user_icon {
					padding: 0;
					margin: 0 auto 26px auto;
					text-align: center;
					font-size: 0.9em;
				}
					.user_page .user_content_area .side_block .user_icon .like,
					.user_page .user_content_area .side_block .user_icon .liked {
						margin-bottom: 10px;
					}
					.user_page .user_content_area .side_block .user_icon img.icon {
						width: 100px;
						height: 100px;
						padding: 0px;
						margin: 10px;
					}
					.user_page .user_content_area .side_block .user_icon p.user_name {
						padding: 0 0 12px 0;
						margin: 0;
					}
					.user_page .user_content_area .side_block .user_icon .sns_icon {
						margin: 0;
						padding: 0 0 14px 0;
					}
						.user_page .user_content_area .side_block .user_icon .sns_icon img {
							width: 30px;
							display: inline-block;
							padding: 0 6px 0 0;
						}

				/* タグ */
				.user_page .user_content_area .side_block .tags {
					margin: 0 0;
					padding: 0 0 10px 0;
				}
					.user_page .user_content_area .side_block .tag {
						font-size: 0.8em;
						background: #fff;
						border:solid 1px #ccc;
						border-radius: 4px;
						padding: 2px 8px;
						margin: 4px 3px 8px 0;
						display: inline-block;
					}
					.user_page .user_content_area .side_block .tag span.material-icons {
						font-size: 0.8em;
					}

				/* ブログのデータ */
				.user_page .user_content_area .side_block .blog_data {
					padding: 0;
					margin: 0 auto 26px auto;
				}
					.user_page .user_content_area .side_block .blog_data a {
						text-decoration: underline;
						color: #216e81;
					}
				.user_page .user_content_area .side_block .blog_data p {
					font-size: 0.9em;
					padding: 0 0 4px 0;
					margin: 0;
				}

/* ユーザーページ（マガジン風）
------------------------------------ */
.user_page {
	padding: 36px 0 40px 0;
	margin:0;
}
	/* タイトル画像部分 */
	.user_page .magazine_mainimg_block {
		position: relative;
		top:0;
		left:0;
		padding-bottom: 40px;
		margin-bottom: 20px;
	}
		.user_page .magazine_mainimg_block .magazine_mainimg {
			background-color: #000;
		}
			.user_page .magazine_mainimg_block .magazine_mainimg img {
				opacity: 0.9;
				width: 100%;
				height: auto;
			}
		.user_page .magazine_mainimg_block .title {
			text-align: center;
			position: absolute;
			top: 30%;
			width: 100%;
		}
			.user_page .magazine_mainimg_block .title .magazine {
				font-family: 'Amatic SC', cursive;
				padding-bottom: 20px;
				font-size: 70px;
				color: #fff;
			}
			.user_page .magazine_mainimg_block .title h2.article_title {
				border-top: solid 1px #fff;
				border-bottom: solid 1px #fff;
				padding: 20px 0;
				color: #fff;
				font-size: 1.7em;
			}
		/* スマホ */
		@media screen and (max-width: 480px) {
			.user_page .magazine_mainimg_block .title {
				top: 16%;
			}
			.user_page .magazine_mainimg_block .title .magazine {
				font-size: 2.5em;
			}
			.user_page .magazine_mainimg_block .title h2.article_title {
				padding: 20px 0;
				color: #fff;
				font-size: 1em;
			}
		}

	/* 記事部分 */
	.user_page .magazine_content_block {
		padding: 60px 0;
		margin: 0;
	}
		/* 画像の角丸 */
		.user_page .magazine_content_block .img_clip {
			border-radius: 22px;
		}

		/* 画像１つのブロック */
		.user_page .magazine_content_block .img_block {
			padding: 10px 10px;
		}
		/* 画像２つのブロック */
		.user_page .magazine_content_block .img_block_two {
			padding: 20px 10px;
		}
			.user_page .magazine_content_block .img_block_two .img1 {
				position: relative;
				left: 0;
				top: 0;
			}
			.user_page .magazine_content_block .img_block_two .img2 {
				position: absolute;
				z-index:100;
				right: -3%;
				bottom: -30%;
				width: 50%;
				height: auto;
				transform: rotate(5deg);
			}
		/* スマホ */
		@media screen and (max-width: 768px) {
			.user_page .magazine_content_block .img_block_two .img2 {
				bottom: -30%;
				right: 3%;
			}
		}
		@media screen and (min-width: 769px) and (max-width: 1194px) {
			.user_page .magazine_content_block .img_block_two .img2 {
				bottom: -15%;
				right: 3%;
			}
		}

		.user_page .magazine_content_block .paragraph {
			padding: 20px 10px;
		}
			.user_page .magazine_content_block .paragraph h3 {
				padding: 0;
				margin:0 0 10px 0;
				line-height: 1em;
				font-size: 2.4em;
				color: #F45D6F;
				font-family: 'Amatic SC', cursive;
			}
			.user_page .magazine_content_block .paragraph p {
				padding-top: 10px;
			}

		/* 水平線 */
		.user_page .magazine_content_block hr {
			border-top: 1px solid #ddd;
			border-right: none;
			border-bottom: none;
			border-left: none;
			margin: 0;
		}

		/* 補足情報 */
		.user_page .magazine_content_block .add_info {
			padding: 30px;
			margin: 10px auto;
			background:#fcfcf9;
		}
			.user_page .magazine_content_block .info_local {
				font-size: 0.9em;
			}
				.user_page .magazine_content_block .info_local p {
					padding: 0 0 4px 0;
					margin: 0;
				}
				.user_page .magazine_content_block .info_local span.material-icons {
					font-size: 1em;
				}
			.user_page .magazine_content_block .add_info h3 {
				padding: 0;
				margin:0 0 8px 0;
				font-size: 2em;
				color: #F45D6F;
				font-family: 'Amatic SC', cursive;
			}

		/* ユーザー情報（雑誌風） */
		.magazine_content_block .user_block {
			padding: 30px;
			margin: 0;
			background: #f8f8f4;
			color: #4f4e4e;
		}
			.magazine_content_block .user_block h3 {
				margin: 0 auto 10px auto;
				font-size: 1em;
				padding: 0 0 4px 0;
				border-bottom: solid 1px #ddd;
			}
			.magazine_content_block .user_block .user_icon {
				font-size: 0.9em;
				margin: 0 auto;
				padding:0;
				text-align: center;
			}
			.magazine_content_block .user_block .equipment_data {
				font-size: 0.9em;
				padding:0;
				margin-bottom: 20px;
			}
				.magazine_content_block .user_block .equipment_data p {
					padding:0 0 8px 0;
					margin: 0;
				}
			.magazine_content_block .user_block .shoot_data {
				font-size: 0.9em;
				padding:0;
				margin-bottom: 20px;
			}
				.magazine_content_block .user_block .shoot_data p {
					padding:0 0 8px 0;
					margin: 0;
				}
				.magazine_content_block .user_block .user_icon .sns_icon {
					padding: 10px;
					margin: 0 auto 10px auto;
				}
					.magazine_content_block .user_block .user_icon .sns_icon img {
						width: 30px;
						height: 30px;
						display: inline-block;
						padding: 0 6px 0 0;
					}
					.magazine_content_block .user_block .user_icon img.icon {
						width:100px;
						height:100px;
						margin: 10px;
						padding: 0;
					}
			.magazine_content_block .user_block .category {
				margin-bottom: 20px;
			}

			.magazine_content_block .user_block .tags {
				margin-bottom: 20px;
			}
				.magazine_content_block .user_block .tags .tag {
					font-size: 0.8em;
					border:solid 1px #ccc;
					border-radius: 4px;
					padding: 2px 8px;
					margin: 4px 3px 8px 0;
					display: inline-block;
				}
					.magazine_content_block .user_block .tag span.material-icons {
						font-size: 0.8em;
					}

/* ユーザーページトップ
------------------------------------ */
.user_page .user_content_area .user_profile {
	background: #fafafa;
	padding: 30px 20px;
	margin: 0 auto 36px auto;
}

	/* ユーザーアイコン画像 */
	.user_page .user_content_area .user_profile .user_icon {
		text-align: center;
		margin-bottom: 18px;
	}
		.user_page .user_content_area .user_profile .user_icon img {
			width: 110px;
			height: 110px;
		}

	/* ユーザー名 */
	.user_page .user_content_area .user_profile .user_name {
		padding: 0 0 4px 0;
		margin: 0 0 16px 0;
		border-bottom: solid 2px #ddd;
	}
		.user_page .user_content_area .user_profile .user_name .material-icons {
			color: #216e81;
		}

	/* 自己紹介コメント */
	.user_page .user_content_area .user_profile .user_comment {
		padding: 0 0 20px 0;
		margin: 0;
		color: #3b3b3b;
	}

	/* SNS */
	.user_page .user_content_area .user_profile .sns {
		padding: 0 0 6px 0;
		margin: 0 0 10px 0;
	}
		.user_page .user_content_area .user_profile .sns img {
			width: 28px;
			padding-right: 8px; 
			display: inline-block;
			vertical-align: bottom;
		}

	/* カメラについて */
	.user_page .user_content_area .user_profile .user_camera_info {
		padding: 0 0 3px 0;
		margin: 0 0 4px 0;
		font-size: 0.9em;
	}
		.user_page .user_content_area .user_profile .user_camera_info img {
			width: 28px;
			padding-right: 8px; 
			display: inline-block;
			vertical-align: bottom;
		}

	/* ユーザーのフォロワー() */
	.fllower_icons {
		padding: 6px 0;
		margin: 0;
	}
		.fllower_icons .fllower_title .material-icons {
			color: #494848;
		}
		.fllower_icons .user_icons {
			display: inline-block;
			padding: 6px 6px 6px 0;
		}
			.fllower_icons .user_icons a {
				display: block;
			}
			.fllower_icons .user_icons img {
				width: 46px;
				height: 46px;
			}

/* しおり一覧 */
.user_page .user_content_area .user_shiori {
	padding: 10px 0;
	margin: 36px auto;
}
	.user_page .user_content_area .user_shiori .shiori_list {
		padding: 10px;
		margin-bottom: 20px;
		background: #f7f7f7;
	}
		.user_page .user_content_area .user_shiori .shiori_list .shiori {
			padding: 0 0 10px 0;
		}
			.user_page .user_content_area .user_shiori .shiori_list .shiori .shiori_img {
				padding: 0 0 16px 0;
			}
				.user_page .user_content_area .user_shiori .shiori_list .shiori .shiori_img img {
					width: 100%;
					height: 160px;
					object-fit: cover;
				}
			.user_page .user_content_area .user_shiori .shiori_list .shiori h3.title {
				padding: 0 0 10px 0;
				font-size: 1.1em;
			}
			.user_page .user_content_area .user_shiori .shiori_list .shiori .date {
				font-size: 0.9em;
				text-align: right;
			}
			/* ------- スマホ --------- */
			@media screen and (max-width: 430px) {
				.user_page .user_content_area .user_shiori .shiori_list .shiori h3.title {
					font-size: 0.9em;
				}
				.user_page .user_content_area .user_shiori .shiori_list .shiori .date {
					font-size: 0.7em;
				}
			}

/* コンテンツタイトル */
h2.user_area_title {
	position: relative;
	padding: 0 65px;
	margin: 30px 0 30px 0;
	text-align: center;
	font-weight: normal;
	font-size: 1.7em;
}
h2.user_area_title:before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 1px;
	content: '';
	background: #333;
}
	h2.user_area_title span {
		position: relative;
		padding: 0 1em;
		background: #fff;
	}
	.user_page .user_content_area .user_gallery .row div {
		padding: 4px;
	}

/* ユーザーのフォロワー(個別エリア) */
.user_page .user_content_area .user_fllower {
	padding: 10px 0px;
	margin: 36px auto;
	text-align: center;
}
	.user_page .user_content_area .user_fllower .user_icons {
		display: inline-block;
		padding: 6px 6px;
	}
		.user_page .user_content_area .user_fllower .user_icons a {
			display: block;
		}
		.user_page .user_content_area .user_fllower .user_icons img {
			width: 80px;
			height: 80px;
		}

/* ユーザーの記事一覧 */
.user_page .user_content_area .user_article {
	padding: 10px 0px;
	margin: 36px auto;
}
	.user_page .user_content_area .user_article .article_box {
		background: #f3f1f1;
		padding: 20px;
		margin: 0 auto 32px auto;
	}
		.user_page .user_content_area .user_article .article_box .article_img {
			padding: 0px;
			margin: 0 0 10px 0;
			width: 30%;
			vertical-align: middle;
		}
		.user_page .user_content_area .user_article .article_box .article_text {
			padding: 10px 32px;
			margin: 0;
			width: 70%;
		}
			.user_page .user_content_area .user_article .article_box .article_text h3 {
				padding: 0px 0 20px 0;
				margin: 0;
				font-size: 1.2em;				
			}
			.user_page .user_content_area .user_article .article_box .article_text .date {
				padding: 0px 0 12px 0;
				margin: 0;
				font-size: 0.8em;
				text-align: right;
			}
				.user_page .user_content_area .user_article .article_box .article_text .date span.material-icons {
					font-size: 1.2em;				
				}
		.user_page .user_content_area .user_article .article_box .read_more {
			font-size: 0.9em;
		}

@media screen and (max-width: 430px) {
	.user_page .user_content_area .user_article .article_box {
		padding: 20px;
	}
		.user_page .user_content_area .user_article .article_box .article_img {
			width: 100%;
		}
		.user_page .user_content_area .user_article .article_box .article_text {
			width: 100%;
			padding: 10px 10px;
		}
}

/* 
------------------------------------ */