@charset "utf-8";

/* ------------------------------------
    市区町村用マイページ
------------------------------------ */

/* 共通のデザイン
------------------------------------ */

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

/* テーブル */
table.common {
	border:solid 1px #ebebeb;
	width: 100%;
	margin-bottom: 20px;
}
	table.common tr {
		border:solid 1px #ebebeb;
	}
	table.common tr.off {
		background: #efefef;
	}
		table.common tr th {
			border:solid 1px #dadada;
			background: #eff4f7;
			padding: 10px;
			text-align: center;
		}
		table.common tr td {
			border:solid 1px #ddd;
			padding: 10px;
		}

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

		/* 左サイドバーナビ外枠 */
		.p_mypage .p_mypage_content_wrap .nav_box_area {
			padding: 0;
		}
			.p_mypage .p_mypage_content_wrap .nav_box_area .nav_box {
				padding: 0 0 20px 0;
				margin: 0;
			}
				.p_mypage .p_mypage_content_wrap .nav_box_area .nav_box .header {
					background: #f0eeee;
					padding: 10px;
					margin: 0 0 10px 0;
					font-size: 1em;
				}
					.p_mypage .p_mypage_content_wrap .nav_box_area .nav_box h3 span.material-icons {
						color: #2582a7;
						padding: 0;
						font-size: 1.4em;
						vertical-align: top;
					}
				/* サイドバーナビ */
				.p_mypage .p_mypage_content_wrap .nav_box_area .nav_box ul.nav_box_list {
					padding: 0 0;
					margin: 0 auto 10px auto;
				}
					.p_mypage .p_mypage_content_wrap .nav_box_area .nav_box ul.nav_box_list li {
						padding: 4px 10px 4px 10px;
						margin: 0 auto 6px auto;
						list-style: none;
						border-bottom: dashed 1px #c9d6df;
					}

	.p_mypage .p_mypage_content_wrap .p_mypage_content_area {
		padding: 0px 0px 10px 0px;
		margin: 0;
	}
		/* テキストの外枠 */
		.p_mypage .p_mypage_content_wrap .p_mypage_content_area .content_text {
			padding: 10px;
		}

		/* お知らせ欄 */
		.p_mypage .p_mypage_content_wrap .p_mypage_content_area h3.title_info {
			font-size: 1.1em;
			background: #f6f6f6;
			padding: 10px 8px 6px 8px;
			margin: 0 0 12px 0;
			color: #c73838;
		}

		.p_mypage .p_mypage_content_wrap .p_mypage_content_area .info_wrap {
			padding: 10px;
			margin: 0 auto 20px auto;
		}
			.p_mypage .p_mypage_content_wrap .p_mypage_content_area .info_wrap dl {
				padding: 0;
				margin: 0;
			}
				.p_mypage .p_mypage_content_wrap .p_mypage_content_area .info_wrap dl dt {
					padding: 0 0 2px 4px;
					margin: 0;
					font-weight: normal;
					font-size: 0.9em;
				}
				.p_mypage .p_mypage_content_wrap .p_mypage_content_area .info_wrap dl dd {
					padding: 0 0 3px 0;
					margin: 0 0 16px 0;
					border-bottom: dashed 1px #ddd;
				}

			/* 過去のお知らせへのリンクボタン */
			.p_mypage .p_mypage_content_wrap .p_mypage_content_area .info_wrap .btn_more {
				padding: 10px 0;
				margin: 0;
				text-align: right;
				font-size: 0.9em;
			}
				.p_mypage .p_mypage_content_wrap .p_mypage_content_area .info_wrap .btn_more a {
					padding: 0;
					margin: 0;
					display: inline-block;
				}

			/* マイページトップへ戻るリンクボタン */
			.p_mypage .p_mypage_content_wrap .p_mypage_content_area .info_wrap .btn_back {
				padding: 10px 0;
				margin: 0;
				text-align: right;
				font-size: 0.9em;
			}
				.p_mypage .p_mypage_content_wrap .p_mypage_content_area .info_wrap .btn_back a {
					padding: 0;
					margin: 0;
					display: inline-block;
				}

		/* マイページコンテンツのタイトル */
		.p_mypage .p_mypage_content_wrap .p_mypage_content_area h3.content_title{
			font-size: 1.1em;
			padding: 10px 12px;
			margin: 0 auto 20px auto;
			background: #f6f6f6;
		}
			.p_mypage .p_mypage_content_wrap .p_mypage_content_area h3.content_title .material-icons,
			.p_mypage .p_mypage_content_wrap .p_mypage_content_area h3.content_title .material-icons-outlined {
				padding: 0;
				font-size: 1.3em;
				vertical-align: top;
			}

		/* お知らせ詳細 */
		.p_mypage .p_mypage_content_wrap .info_content {
			padding: 0;
		}
			.p_mypage .p_mypage_content_wrap .info_content h4 {
				border-bottom: solid 2px #cdd2dc;
				padding: 0 0 6px 0;
				margin-bottom: 20px;
				font-size: 1.2em;
			}
			.p_mypage .p_mypage_content_wrap .info_content p {
				padding: 0 0 10px 0;
			}
			.p_mypage .p_mypage_content_wrap .info_content p.date {
				font-size: 0.9em;
				text-align: right;
				padding: 0 0 0 0;
			}

/* プロフィール編集ページ
------------------------------------ */
.profile_form {
	padding: 10px;
	margin: 0 auto 20px auto;
}
	.profile_form .form-group {
		padding: 0 0 18px 0;
		margin: 0 0 24px 0;
	}
		.profile_form .form-group label {
			display: block;
			border-bottom: 1px dashed #c9d6df;
			padding: 3px 0;
			margin-bottom: 16px;
		}
		.profile_form .form-group input{
			border: 1px solid #e6e7e8;
		}

	/* 更新ボタン */
	.profile_form .btn_area {
		text-align: center;
		margin: 0 auto;
	}
		.profile_form .btn_area .btn-primary {
			background: #488cbd;
			padding: 6px 12px;
		}

/* クーポン管理
------------------------------------ */
/* クーポン一覧 */
.coupon_list {
	padding: 0 0;
	margin: 0;
}
	.coupon_list .btn_new {
		padding: 0;
		margin: 0 0 10px 0;
		text-align: right;
	}
		.coupon_list .btn_new a {
			background: #469493;
			border-radius: 4px;
			display: inline-block;
			color: #fff;
			padding: 4px 8px;
			margin: 0;
			font-size: 0.8em;
		}
			.coupon_list .btn_new a .material-icons {
				font-size: 1.2em;
			}

.coupon_list table.coupon {
	border:solid 1px #ebebeb;
	width: 100%;
	margin-bottom: 20px;
}
	.coupon_list table.coupon tr {
		border:solid 1px #ebebeb;
	}
	.coupon_list table.coupon tr.off {
		background: #efefef;
	}
	.coupon_list table.coupon tr.end {
		background: #d1d1d1;
	}
		.coupon_list table.coupon tr th {
			border:solid 1px #dadada;
			background: #eff4f7;
			padding: 10px;
			text-align: center;
		}
		.coupon_list table.coupon tr td {
			border:solid 1px #ddd;
			padding: 10px;
		}
		.coupon_list table.coupon tr td.edit {
			text-align: center;
			padding: 10px 0px;
		}
			.coupon_list table.coupon tr td.edit .done {
				padding: 4px 8px;
				margin: 0 2px;
				font-size: 0.8em;
				display: inline-block;
				border-radius: 4px;
				background: #403f3f;
				color: #fff;
			}
			.coupon_list table.coupon tr td.edit a {
				padding: 4px 8px;
				margin: 0 2px 4px 2px;
				font-size: 0.8em;
				display: inline-block;
				border-radius: 4px;
			}
			.coupon_list table.coupon tr td a.edit {
				background: #488cbd;
				color: #fff;
			}
			.coupon_list table.coupon tr td a.private {
				background: #adadad;
				color: #fff;
			}
			.coupon_list table.coupon tr td a.published{
				background: #ba5c96;
				color: #fff;
			}
			.coupon_list table.coupon tr td a.delete {
				background: #686868;
				color: #fff;
			}


/* クーポン編集ページ
------------------------------------ */
.p_mypage_content_area .mypage_contents table.coupon_edit {
	border:solid 1px #ddd;
	width: 100%;
}
	.p_mypage_content_area .mypage_contents table.coupon_edit tr {
		border:solid 1px #ddd;
	}
		.p_mypage_content_area .mypage_contents table.coupon_edit tr th {
			border:solid 1px #ddd;
			background: #eff4f7;
			padding: 10px;
			width: 25%;
			vertical-align: top;
		}
		.p_mypage_content_area .mypage_contents table.coupon_edit tr td {
			border:solid 1px #ddd;
			padding: 10px;
		}
			.p_mypage_content_area .mypage_contents table.coupon_edit tr td div {
				padding: 4px 0px;
			}
				.p_mypage_content_area .mypage_contents table.coupon_edit tr td input.date {
					display: inline;
					width: 160px;
				}
				.p_mypage_content_area .mypage_contents table.coupon_edit tr td .form-check-label {
					padding-left: 20px;
				}

		table.coupon_edit tr td .form-check-input {
			border:solid 1px #333;
			margin-left:0;
		}

		/* クーポン編集のボタン */
		.coupon .btn_area {
			text-align: center;
			padding: 20px;
			margin: 10px auto;
		}
			.coupon .btn_area button {
				padding: 6px 12px;
				background: #488cbd;
				border: none;
				border-radius: 4px;
				color: #fff;
			}

/* 確認用クーポン表示（モーダル）
------------------------------------ */
.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;
	}

/* モーダルCSS */
.modalArea {
	display: none;
	position: fixed;
	z-index: 10; /*サイトによってここの数値は調整 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.modalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	width: 70%;
	max-width: 500px;
	padding: 10px 30px;
	background-color: #fff;
}

.closeModal {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	cursor: pointer;
}


/* しおり管理
------------------------------------ */
/* しおり一覧 */
.shiori_list {
	padding: 0 0;
	margin: 0;
}
	.shiori_list .btn_new {
		padding: 0;
		margin: 0 0 10px 0;
		text-align: right;
	}
		.shiori_list .btn_new a {
			background: #469493;
			border-radius: 4px;
			display: inline-block;
			color: #fff;
			padding: 4px 12px;
			margin: 0;
			font-size: 0.8em;
		}
			.shiori_list .btn_new a .material-icons {
				font-size: 1.2em;
			}
			
	/* 更新ページの公開・非公開ボタン */
	.shiori_list .status_area {
		padding: 0;
		margin: 0 0 10px 0;
	}
		.shiori_list .status_area a {
			border-radius: 4px;
			display: inline-block;
			color: #fff;
			padding: 4px 10px;
			margin: 0 4px;
			font-size: 0.8em;
		}
		.shiori_list .status_area a.draft {
			background: #807f7f;
		}
		.shiori_list .status_area a.public {
			background: #5c70a5;
		}
		.shiori_list .status_area a.private {
			background: #6b8685;
		}
			.shiori_list .btn_new a .material-icons {
				font-size: 1.2em;
			}

	/* 更新ページの公開・非公開ボタン */
	.shiori_list table.shiori {
		border:solid 1px #ebebeb;
		width: 100%;
		margin-bottom: 20px;
	}
		.shiori_list table.shiori tr {
			border:solid 1px #ebebeb;
		}
		.shiori_list table.shiori tr.off {
			background: #efefef;
		}
			.shiori_list table.shiori tr th {
				border:solid 1px #dadada;
				background: #eff4f7;
				padding: 10px;
				text-align: center;
			}
			.shiori_list table.shiori tr td {
				border:solid 1px #ddd;
				padding: 10px;
			}
			.shiori_list table.shiori tr td.edit {
				text-align: center;
				padding: 10px 4px;
			}
				.shiori_list table.shiori tr td.edit a {
					padding: 4px 4px;
					margin: 0 4px;
					font-size: 0.8em;
					display: inline-block;
					border-radius: 4px;
				}
				.shiori_list table.shiori tr td a.edit {
					background: #488cbd;
					color: #fff;
				}
				.shiori_list table.shiori tr td a.delete {
					background: #686868;
					color: #fff;
				}
				.shiori_list table.shiori tr td button.delete {
					background: #6a6a6a;
					color: #fff;
					border: solid 1px#6a6a6a;
					border-radius: 4px;
					font-size: 0.8em;
					margin-left: 6px;
				}

		/* しおり編集のボタン */
		.shiori_list .btn_area {
			text-align: center;
			padding: 20px;
			margin: 10px auto;
		}
			.shiori_list .btn_area a.btn_check {
				padding: 6px 12px;
				margin: 0 6px;
				background: #488cbd;
				border: none;
				border-radius: 4px;
				color: #fff;
			}
			.shiori_list .btn_area a.btn_save {
				padding: 6px 12px;
				margin: 0 6px;
				background: #6e8773;
				border: none;
				border-radius: 4px;
				color: #fff;
			}

		/* 行程フォームのアコーディオン全体 */
		.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;
		}
	/* 行程を追加するボタン */
	.btn_area_add {
		padding: 10px 10px 10px 10px;
	}
		.btn_area_add .btn_add {
			padding: 4px 8px;
			color: #466c9a;
			font-size: 0.9em;
			border: solid 2px #4c7eba;
			background: #fdfdfd;
		}
			.btn_area_add .btn_add .material-icons {
				font-size: 1em;
			}


/* 並び替えエリア
------------------------------------ */
.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;
			display: inline-block;
		}
		.article_list .article_text .public {
			padding: 4px 8px;
			margin: 0 8px;
			background: #169dd3;
			color: #fff;
			border-radius: 3px;
			font-size: 0.7em;
			display: inline-block;
		}
		.article_list .article_text .private {
			padding: 4px 8px;
			margin: 0 8px;
			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;
		}
			/* 投稿記事編集ボタン
			------------------------------------ */
			.article_list .article_text .edit_btns {
				text-align: right;
			}
				.article_list .article_text .edit_btns .btn_edit,
				.article_list .article_text .edit_btns .btn_remove {
					display: inline-block;
					padding: 2px 4px;
					margin: 0 4px;
					font-size: 0.8em;
					border:solid 1px #ddd;
					background: #eee;
					border-radius: 4px;
				}
				.article_list .article_text .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;
				}
				.article_list .article_text .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;
					}

/* ギャラリーページ
------------------------------------ */
.garally {
	padding: 0px;
	margin: 0;
}
	.garally .img_box {
		padding: 6px 6px;
	}
		.garally .img_box img {
			width: 100%;
		}


/* イベント管理
------------------------------------ */
/* イベント一覧 */
.event_list {
	padding: 0 0;
	margin: 0;
}
	.event_list .btn_new {
		padding: 0;
		margin: 0 0 10px 0;
		text-align: right;
	}
		.event_list .btn_new a {
			background: #469493;
			border-radius: 4px;
			display: inline-block;
			color: #fff;
			padding: 4px 12px;
			margin: 0;
			font-size: 0.8em;
		}
			.event_list .btn_new a .material-icons {
				font-size: 1.2em;
			}
			
	/* 更新ページの公開・非公開ボタン */
	.event_list .status_area {
		padding: 0;
		margin: 0 0 10px 0;
	}
		.event_list .status_area a {
			border-radius: 4px;
			display: inline-block;
			color: #fff;
			padding: 4px 10px;
			margin: 0 4px;
			font-size: 0.8em;
		}
		.event_list .status_area a.draft {
			background: #807f7f;
		}
		.event_list .status_area a.public {
			background: #5c70a5;
		}
		.event_list .status_area a.private {
			background: #6b8685;
		}
			.event_list .btn_new a .material-icons {
				font-size: 1.2em;
			}

	/* 更新ページの公開・非公開ボタン */
	.event_list table.event {
		border:solid 1px #ebebeb;
		width: 100%;
		margin-bottom: 20px;
	}
		.event_list table.event tr {
			border:solid 1px #ebebeb;
		}
		.event_list table.event tr.off {
			background: #efefef;
		}
			.event_list table.event tr th {
				border:solid 1px #dadada;
				background: #eff4f7;
				padding: 10px;
				text-align: center;
			}
			.event_list table.event tr td {
				border:solid 1px #ddd;
				padding: 10px;
			}
			.event_list table.event tr td.edit {
				width: 35%;
				text-align: center;
			}
				.event_list table.event tr td.edit a {
					padding: 4px 8px;
					margin: 0 4px;
					font-size: 0.8em;
					display: inline-block;
					border-radius: 4px;
					/* width: 20%; */
				}
				.event_list table.event tr td a.edit {
					background: #488cbd;
					color: #fff;
				}
				.event_list table.event tr td a.delete {
					background: #686868;
					color: #fff;
				}
				.event_list table.event tr td button.delete {
					background: #6a6a6a;
					color: #fff;
					border: solid 1px#6a6a6a;
					border-radius: 4px;
					font-size: 0.7em;
					padding: 3px 6px;
					margin-left: 10px;
				}

				.event_list table.event tr td .note {
					font-size: 0.8em;
					padding: 0 0 6px 0;
					color: #bb2e2e;
				}

		/* しおり編集のボタン */
		.event_list .btn_area {
			text-align: center;
			padding: 20px;
			margin: 10px auto;
		}
			.event_list .btn_area button {
				padding: 6px 12px;
				background: #488cbd;
				border: none;
				border-radius: 4px;
				color: #fff;
			}