@charset "utf-8";

/* アイコン
------------------------------------ */
span.new {
	color: #ff4099;
}

/* マイページ外枠
------------------------------------ */
.mypage {
	padding: 24px 0;
	margin-bottom: 20px;
}
	.mypage h2.mypage_title {
		border-bottom: solid 2px #f0eeee;
		padding: 0 10px 3px 10px;
		margin-bottom: 20px;
		font-size: 1.2em;
	}

/* マイページコンテンツ
------------------------------------ */
.mypage_contents {
	padding: 0px;
	margin-bottom: 10px;
}
	.mypage_contents .nav_box_area {
		padding-bottom: 30px;
	}
		.mypage_contents .nav_box_area h3 {
			background: #f0eeee;
			padding: 10px 8px 8px 12px;
			margin: 0 0 16px 0;
			font-size: 1em;
		}
			.mypage_contents .nav_box_area h3 span {
				color: #2582a7;
			}

		.mypage_contents .nav_box_area .nav_box {
			padding: 0 0 8px 0;
			margin: 0;
		}
			.mypage_contents .nav_box_area .nav_box a {
				display: block;
				margin: 0 auto;
			}

			/* お知らせ欄 */
			.mypage_contents .nav_box_area .nav_box ul.mypage_info {
				padding: 0;
				margin: 0px auto 10px auto;
			}
				.mypage_contents .nav_box_area .nav_box ul.mypage_info li {
					border-bottom: solid 1px #ddd;
					padding: 0 0 4px 12px;
					margin: 0 0 6px 0;
					list-style: none;
				}

			/* 登録プロフィール */
			.mypage_contents .nav_box_area .nav_box .user_edit_img{
				width: 90px;
				height: 90px;
				margin: 0 auto;
			}
			/* スマホ */
			@media screen and (max-width: 480px) {
				.mypage_contents .nav_box_area .nav_box .user_edit_img{
					width: 80px;
					height: 80px;
				}
			}
				.mypage_contents .nav_box_area .nav_box .user_edit_img img {
					height: 100%;
					width: 100%;
				}
			.mypage_contents .nav_box_area .nav_box .user_edit_others {
				padding: 0 10px;
			}

		/* クーポン */
		.mypage_contents .nav_box_area .coupons {
			margin-bottom: 10px;
		}
			.mypage_contents .nav_box_area .coupons ul.coupon {
				padding: 0;
				margin: 0;
			}
				.mypage_contents .nav_box_area .coupons ul.coupon li {
					font-size: 0.9em;
					padding: 3px;
					margin: 3px 0;
					list-style: none;
					border-bottom: solid 1px #ddd;
				}
				.mypage_contents .nav_box_area .coupons ul.coupon li:before {
					font-family: 'Material Icons';
					content: '\e315';
					vertical-align: bottom;
				}

			/* ブログ、しおりの作成・編集 */
			.mypage_contents .nav_box_area .nav_box ul.nav_box_list {
				padding: 0;
				margin: 0;
			}
				.mypage_contents .nav_box_area .nav_box ul.nav_box_list li {
					list-style: none;
					padding: 0 8px 3px 8px;
					margin: 0 0 6px 0;
					border-bottom: solid 1px #ddd;
					font-size: 0.9em;
				}

			/* お気に入りユーザー */
			.mypage_contents .nav_box_area .nav_box .my_favorite_users {
				padding: 0 0 10px 0;
				margin: 0;
			}
				.mypage_contents .nav_box_area .nav_box .my_favorite_users a {
					display: inline-block;
				}
				.mypage_contents .nav_box_area .nav_box .my_favorite_users .favorite_user {
					padding: 8px 8px 16px 8px;
					margin-bottom: 10px;
					text-align: center;
				}
					.mypage_contents .nav_box_area .nav_box .my_favorite_users .favorite_user .user_icon {
						width: 70px;
						height: 70px;
						padding: 0 0 4px 0;
					}
						.mypage_contents .nav_box_area .nav_box .my_favorite_users .favorite_user .user_icon img{
							width: 100%;
							height: 100%;
						}
					.mypage_contents .nav_box_area .nav_box .my_favorite_users .favorite_user .user_name {
						font-size: 0.7em;
					}

		/* 全て見るリンク */
		.mypage_contents .nav_box_area .see_all {
			text-align: right;
			padding: 0 10px 10px 0;
			font-size: 0.8em;
			/* position: absolute;
			bottom: 0;
			right: 0; */
		}
			.mypage_contents .nav_box_area .see_all a {
				display: inline;
			}

/* フォローされているユーザー一覧（市区町村用） */
.fllowed_user_list {
	margin: 0;
	padding: 0;
}
	.fllowed_user_list table.list {
		margin: 0;
		padding: 0;
		border:solid 1px #ddd;
		width: 100%;
	}
		.fllowed_user_list table.list tr {
			margin: 0;
			padding: 0;
		}
			.fllowed_user_list table.list tr th {
				margin: 0;
				padding: 10px;
				background: #eee;
			}
			.fllowed_user_list table.list tr td {
				margin: 0;
				padding: 10px;
			}


/* お気に入り */
.favorite_article_box {
	border:solid 1px #eee;
	padding: 10px;
	margin: 0 4px 10px 4px;
}
	.favorite_article_box img {
		padding: 0 0 20px 0;
	}
	.favorite_article_box h4 {
		font-size: 1em;
		padding: 0 0 8px 0;
		margin: 0;
		font-weight: bold;
	}
	.favorite_article_box p {
		padding: 0 0 10px 0;
		font-size: 0.9em;
		margin: 0;
	}

/* お知らせ一覧ページ（news.php） */
ul.news_list {
	list-style: none outside;
	margin: 0;
	padding: 0 0 20px 0;
}
	ul.news_list li {
		border-bottom: solid 1px #ddd;
		padding-bottom: 4px;
		margin-bottom: 10px;
	}
		ul.news_list li a {
			text-decoration: none;
		}
			ul.news_list li p.date {
				display: inline-block;
				background: #4d8faa;
				color: #fff;
				font-size: 0.8em;
				padding: 6px 8px;
				margin: 0;
			}
			ul.news_list li p.news_title {
				display: inline-block;
				padding: 0 10px;
				margin: 0;
			}

/* お知らせ詳細ページ（news_detail.php） */
.news_detail {
	padding: 0 10px 20px 10px;
}
	.news_detail p {
		padding: 6px 0;
	}
/* お知らせ一覧へ戻る */
.see_back {
	text-align: right;
	font-size: 0.9em;
	padding: 10px 14px;
	margin-bottom: 24px;
}
	.see_back a {
		display: inline;
	}
	.see_back .material-icons {
		padding: 0 3px 0 0;
		font-size: 1.2em;
	}

/* 登録内容編集ページ
------------------------------------ */
.profile_form {
	padding: 10px;
}
	.profile_form .form-group {
		padding: 10px 10px 16px 10px;
		margin: 0;
	}
	.profile_form input {
		margin-bottom: 8px;
	}
	.profile_form .btn_area {
		padding: 20px;
		text-align: center;
	}

/* 旅ブログ・しおりの投稿ページ
------------------------------------ */
.register_info p {
	padding: 10px;
}
.create_form {
	margin-bottom: 20px;
}
	.create_form input {
		margin-bottom: 8px;
	}
	.create_form .form-group {
		padding: 10px 10px 16px 10px;
		margin: 0;
	}
		.create_form .form-group .form-select {
			display: block;
			margin-bottom: 6px;
		}
		.create_form .form-group .shiori_info {
			padding: 0;
		}
			.create_form .form-group .shiori_info input {
				margin: 6px 0 12px 0;
			}
	.create_form .btn_area {
		padding: 20px;
		text-align: center;
	}
		.create_form .btn_area .btn {
			padding: 10px;
			margin: 0 6px;
			color: #fff;
			background: #4d8faa;
			border: none;
			width: 18%;
		}

		/* 保存ボタン */
		.create_form .btn_area .btn_save {
			background: #96bd9e;
		}
		/* 保存ボタン　ミニ */
		.create_form .btn_area .btn_save_mini {
			background: #96bd9e;
			width: 10%;
			font-size: 0.9em;
			padding: 6px;
		}
		/* 公開ボタン */
		.create_form .btn_area .btn_release {
			background: #006f9b;
		}
		/* 戻るボタン */
		.create_form .btn_area .btn_back {
			padding: 10px;
			margin: 0 10px;
			width: 18%;
			color: #fff;
			background: #a2a2a2;
		}
	.create_form .btn_area_right {
		padding: 20px;
		text-align: right;
	}
		.create_form .btn_area_right .btn_add {
			padding: 8px;
			color: #466c9a;
			font-size: 0.9em;
			border:solid 2px #4c7eba;
			background: #fdfdfd;
		}
			.create_form .btn_area_right .btn_add .material-icons {
				font-size: 1em;
			}

/* 行程フォームのアコーディオン全体 */
.trip_event {
	padding: 10px 10px;
}
	.trip_event input {
		border:solid 1px #333;
		display: inline;
		margin-top: 10px;
	}
	.trip_event input.hide {
		display: none; /*チェックボックスを隠す*/
	}
/* バー部分 */
.trip_event label {
	cursor :pointer;
	display: block;
	text-decoration: none;
	line-height: 1;
	position: relative;
	margin: 0 0 10px;
	padding: 14px;
	background-color: #eef2f7;
}
/* 開いたときに表示される部分 */
.trip_event ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 1px;
}
	.trip_event li {
		height: 0;
		overflow-y: hidden;
		transition: padding-bottom 0.5s, padding-top 0.5s; /*閉じるときのアニメーション*/
		-webkit-transition: padding-bottom 0.5s, padding-top 0.5s;
		-moz-transition: padding-bottom 0.5s, padding-top 0.5s;
		-ms-transition: padding-bottom 0.5s, padding-top 0.5s;
		-o-transition: padding-bottom 0.5s, padding-top 0.5s;
	}
#menu_bar1:checked ~ #links1 li,
#menu_bar2:checked ~ #links2 li {
	height: auto; /*開いたときに表示されるliの高さ*/
	opacity: 1;
	background: #f1f1f1;
	padding: 20px 20px 0 20px;
}
	#menu_bar1:checked ~ #links1 li:last-child,
	#menu_bar2:checked ~ #links2 li:last-child {
		padding-bottom: 20px;
	}
 /* 開いたときの下の余白 */
#menu_bar1:checked ~ #links1 li:last-child,
#menu_bar2:checked ~ #links2 li:last-child {
	margin-bottom: 20px;
}
/* 閉じた状態の矢印描画 */
.trip_event label:after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #333 2px solid;
	border-right: #333 2px solid;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	position:absolute;
	right: 2%;
	top: 0;
	bottom: 15%;
	margin: auto;
}
/* 開いた状態の矢印描画 */
.trip_event input[type=checkbox]:checked + label:after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #333333 2px solid;
	border-right: #333 2px solid;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position:absolute;
	right: 2%;
	top: 7%;
	bottom: 0;
	margin: auto;
}

/* 記事投稿ページ
------------------------------------ */
.add_article_form {
	padding: 10px;
}
	.add_article_form .form-group {
		padding: 10px 10px 16px 10px;
		margin: 0;
	}
	.add_article_form input {
		margin-bottom: 8px;
	}
	.add_article_form .btn_area {
		padding: 20px;
		text-align: center;
	}

/* 投稿記事一覧の編集アイコン
------------------------------------ */
.article_edit {
	padding: 0;
	margin: 0;
}
	.article_edit span.material-icons {
		font-size: 1em;
	}

/* 記事一覧の獲得数表示
------------------------------------ */
	.article_text .nice,
	.article_text .bookmark {
		padding: 4px 12px;
		margin: 0 0px 10px 10px;
		font-size: 0.8em;
	}

/* 検索エリア
------------------------------------ */
.search {
	background: #f5f5f5;
	padding: 20px;
	margin: 0 auto 30px auto;
}
	.search h2.search_title {
		padding-bottom: 10px;
		font-size: 1.2em;
	}

/* クーポン一覧ページ
------------------------------------ */
.mypage_contents table.coupon {
	margin: 20px auto;
	padding: 0;
	width: 100%;
}
	.mypage_contents table.coupon tr {
		margin: 0;
		padding: 0;
	}
		.mypage_contents table.coupon tr th {
			margin: 0;
			padding: 10px;
			background: #f3f3f3;
			border-bottom:solid 1px #ddd;
			font-weight: normal;
		}
		.mypage_contents table.coupon tr td {
			margin: 0;
			padding: 10px;
			border-bottom:solid 1px #ddd;
		}
		.mypage_contents table.coupon tr td.c_date {
			text-align: left;
		}

/* クーポン表示（モーダル）
------------------------------------ */
.coupon_area {
	border:solid 2px #eee;
	background: #f5f5f5;
	padding: 20px;
	margin: 20px auto;
}
	.coupon_area .coupon_body {
		position: relative;
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin: 0 auto;
		width: 100%;
		max-width: 620px;
		background: #FFF;
		padding: 40px 20px;
	}
		.coupon_area .coupon_body .coupon-inner .price {
			font-size: 30px;
			font-weight: 900;
			color: #f56359;
			text-align: center;
		}
		.coupon_area .coupon_body .coupon-inner .date {
			font-size: 14px;
			font-weight: bold;
			text-align: center;
		}
	/* circle-css */
	.coupon_body::before,
	.coupon_body::after {
		position: absolute;
		display: block;
		content: "";
		border-radius: 100%;
		background: #f5f5f5;
		left: -15px;
		width: 30px;
		height: 30px;
	}
	.coupon_body::before {
		top: -15px;
	}
	.coupon_body::after {
		bottom: -15px;
	}
	.coupon-inner::before,
	.coupon-inner::after {
		position: absolute;
		display: block;
		content: "";
		border-radius: 100%;
		background: #f5f5f5;
		right: -15px;
		width: 30px;
		height: 30px;
	}
	.coupon-inner::before {
		top: -15px;
	}
	.coupon-inner::after {
		bottom: -15px;
	}


/* マイページ内共通
------------------------------------ */
/* 公開中バッジ */
.public {
	padding: 2px 6px;
	margin: 0 0 10px 0;
	background: #169dd3;
	color: #fff;
	border-radius: 3px;
	font-size: 0.7em;
	display: inline-block;
}
/* 非公開中バッジ */
.private {
	padding: 2px 6px;
	margin: 0 0 10px 0;
	background: #dbdada;
	border-radius: 3px;
	font-size: 0.7em;
	display: inline-block;
}		
/* 保存中バッジ */
.save {
	padding: 2px 6px;
	margin: 0 0 10px 0;
	background: #96bd9e;
	color: #fff;
	border-radius: 3px;
	font-size: 0.7em;
	display: inline-block;
}		

/* しおり一覧ページ（shiori_list.php / book_mark_shiori_list.php）
------------------------------------ */
.shiori_list {
	padding: 0;
	margin: 0 auto 30px auto;
	background: #f7f7f7;
}
	.shiori_list .shiori {
		padding: 12px;
	}
		.shiori_list .shiori .shiori_img {
			padding: 0 0 20px 0;
		}
		.shiori_list .shiori h3.title {
			font-size: 1em;
			padding: 0 6px 12px 6px;
			margin: 0;
		}
		.shiori_list .shiori .date {
			font-size: 0.7em;
			text-align: right;
			padding: 0 8px;
			margin-bottom: 18px;
		}

/* 並び替えエリア
------------------------------------ */
.order_area {
	padding: 0px 10px 10px 10px;
}
	.order_area .order_list {
		text-align: right;
	}
		.order_area .order_list label {
			display: inline-block;
			font-size: 0.9em;
		}
		.order_area .order_list select {
			width: 10%;
			display: inline-block;
			font-size: 0.8em;
		}
		/* スマホ */
		@media screen and (max-width: 480px) {
			.order_area .order_list select {
				width: 30%;
			}
		}

/* ブログ一覧ページ
------------------------------------ */
.article_list {
	padding: 10px 0;
	margin: 0 auto 0px auto;
	border-bottom: solid 1px #ddd;
}
	.article_list .article_img {
		padding: 10px 10px;
		margin: 0;
		width: 30%;
	}
	.article_list .article_text {
		padding: 10px;
		margin: 0;
		width: 70%;
	}
		.article_list .article_text h3.title {
			padding: 10px 10px 8px 10px;
			margin: 0 0 10px 0;
			background: none;
			font-size: 1.1em;
		}
		.article_list .article_text .public {
			padding: 4px 8px;
			margin: 0 10px 10px 10px;
			background: #169dd3;
			color: #fff;
			border-radius: 3px;
			font-size: 0.7em;
			display: inline-block;
		}
		.article_list .article_text .private {
			padding: 4px 8px;
			margin: 0 10px 10px 10px;
			background: #eee;
			border-radius: 3px;
			font-size: 0.7em;
			display: inline-block;
		}
			.article_list .article_text .private .material-icons,
			.article_list .article_text .public .material-icons {
				font-size: 0.9em;
			}
		.article_list .article_text p {
			padding: 0 10px 10px 10px;
			margin: 0 auto 10px auto;
		}
					
/* しおり・ブログ　ブックマーク一覧共通
--------------------------------------------------------- */
/* ブックマーク絞り込み検索 */
.bookmark_tags {
	padding: 10px;
}
	.bookmark_tags .tag {
		padding: 3px 6px;
		margin: 0 4px 8px 0;
		display: inline-block;
		border: solid 1px #ccc;
		border-radius: 4px;
		font-size: 0.8em;
		background: #fff;
	}
		.bookmark_tags .tag .material-icons {
			font-size: 1em;
		}
	.bookmark_tags button {
		padding: 4px 8px;
		margin: 0 4px 8px 0;
		display: inline-block;
		border-radius: 4px;
		font-size: 0.8em;
		background: #efefef;
		border: solid 1px #ddd;
	}
		.bookmark_tags button span.material-icons {
			font-size: 1em;
		}

/* 作成したしおり一覧　編集・削除ボタンエリア */
.edit_buttons {
	padding: 0 0 10px 0;
}
	.edit_buttons a {
		display: inline-block;
	}
	/* 編集ボタン */
	.edit_buttons a.edit {
		padding: 3px 8px;
		margin: 0 8px;
		font-size: 0.8em;
		border:solid 1px #ddd;
		background: #dddcdc;
		border-radius: 4px;
	}
		.edit_buttons a.edit span.material-icons {
			font-size: 1em;
			padding: 0;
			vertical-align: middle;
		}
	/* 削除ボタン */
	.edit_buttons a.remove {
		padding: 3px 8px;
		margin: 0 8px;
		font-size: 0.8em;
		border:solid 1px #c84d4d;
		background: #d25050;
		border-radius: 4px;
		color: #fff;
	}
		.edit_buttons a.remove span.material-icons {
			font-size: 1em;
			padding: 0;
			vertical-align: middle;
		}

/* 投稿記事編集ボタン
------------------------------------ */
.edit_btns .btn_public {
	display: inline-block;
	padding: 2px 4px;
	margin: 0 4px;
	font-size: 0.8em;
	border:solid 1px #169dd3;
	background: #169dd3;
	border-radius: 4px;
}
.edit_btns .btn_private {
	display: inline-block;
	padding: 2px 4px;
	margin: 0 4px;
	font-size: 0.8em;
	border:solid 1px #bbbbbb;
	background: #bbbbbb;
	border-radius: 4px;
}
	.article_list .article_text .edit_btns .btn_public a {
		color: #fff;
	}
	.article_list .article_text .edit_btns span.material-icons {
		font-size: 0.9em;
	}