@charset "utf-8";

/* ------------------------------------------------------------ common */

	html {
		height: 100%;
	}

	body {
		min-width: 1100px;
		margin: 0 auto;
		background: #f2efec;
		font-family: 'Noto-Sans-JP-Regular',sans-serif;
		height: 100%;
		overflow-y: hidden;
	}
	
	a {
		color: #000;
		text-decoration: none;
		cursor: pointer;
		outline: none;
	}

	/* iOSでのデフォルトスタイルをリセット */
	input[type="submit"],
	input[type="button"] {
		-webkit-box-sizing: content-box;
		-webkit-appearance: button;
		appearance: button;
		border: none;
		box-sizing: border-box;
		cursor: pointer;
	}

	input[type="submit"]::-webkit-search-decoration,
	input[type="button"]::-webkit-search-decoration {
		display: none;
	}

	input[type="submit"]::focus,
	input[type="button"]::focus {
		outline-offset: -2px;
	}

	#wrapper {
		position: relative;
		height: calc(100% - 62px);
	}

	.select2 {
		font-size: 13px;
		transition: 0.5s;
	}

	.complete {
		width: 100%;
		position: fixed;
		background: #fff585;
		line-height: 100px;
		z-index: 10;
		left: 0;
		top: 0;
		text-align: center;
	}

	input[type="file"] {
		display: block;
	}

	input {
		outline: none;
		cursor: pointer;
	}


/* ------------------------------------------------------------ btn */

	.send_btn {
		display: block;
		min-width: 160px;
		color: #fff;
		line-height: 50px;
		border-radius: 25px;
		text-align: center;
		border: none;
		padding: 0 20px;
	}

	.prev {
		background: #686868;
	}

	.action {
		background: #e6714e;
	}

	.other_make {
		background: #fff;
		color: #127c96;
		border: 1px solid #127c96;
	}

	.submit_01 {
		border: none;
		background: #127c96;
		color: #fff;
		display: block;
		line-height: 30px;
		padding: 0 30px;
		border-radius: 15px;
		font-size: 14px;
		transition: 0.5s;
	}

	.submit_02 {
		border: none;
		background: #e6714e;
		color: #fff;
		display: block;
		line-height: 30px;
		padding: 0 20px;
		border-radius: 15px;
		font-size: 14px;
		display: inline-block;
		transition: 0.5s;
	}


	.del {
		background: #686868;
		margin: 0 0 0 10px;
	}

	.preview {
		background: #fff;
		color: #127c96;
		border: 1px solid #127c96;
	}

/* ------------------------------------------------------------ pager */

	.pager {
		float: right;
		text-align: center;
		padding: 10px 0 0;
	}

		.pager span,
		.pager a {
			font-size: 16px;
			float: left;
			width: 39px;
			line-height: 39px;
			border: 1px solid #000;
			margin: 0 0 0 10px;
		}

		.pager span {
			background: #000;
			color: #fff;
		}

		.pager a {
			background: #fff;
		}

/* ------------------------------------------------------------ header */
	
	header {
		background: #ae0379;
	}

		header h1 {
			font-size: 14px;
			color: #fff;
			padding: 20px 0 20px 25px;
		}

/* ------------------------------------------------------------ contents */

	#contents {
		box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;
		width: 100%;
		height: 100%;
		overflow: scroll;
	}

		#contents .inner {
			max-width: 1000px;
			min-width: 1000px;
			padding: 65px 55px 200px;
			margin: 0 auto;
		}

		#contents .prev_line {
			float: left;
			text-align: center;
		}
			
		#contents .head_line {
			padding: 20px 0 0;
		}

		#contents .head_line h2 {
			padding: 0 0 30px;
		}

		#contents .head_line h2 img {
			float: left;
			padding: 10px 20px 0 0;
			width: auto;
			height: 28px;
		}

		#contents .head_line h2 span {
			float: left;
			font-size: 28px;
			line-height: 140%;
			display: block;
			padding: 5px 0;
			width: calc(100% - 50px);
		}
		
		#contents .head_line .caution {
			border-top: dashed 1px  #ff0000;
			padding: 30px 0;
			font-size: 12px;
			line-height: 2;
			color: #ff0000;
		}

		#contents .created a {
			float: right;
			margin: 0 0 0 20px;
		}

		#contents .created .prev {
			float: left;
			margin: 0;
		}

		#contents .created input[type="submit"] {
			float: right;
			margin: 0 0 0 20px;
		}

		#contents .search_line  {
			margin: 40px 0 0;
			background: #fff;
			padding: 20px;
		}

		#contents .search_line .select2 {
			float: right;
			font-size: 14px;
			margin: 0 10px 0 0;
		}

		#contents .search_line input[type="text"] {
			border: none;
			line-height: 30px;
			height: 30px;
			padding: 0 10px;
			font-size: 14px;
			float: right;
			border-radius: 5px;
			margin: 0 5px 0 0;
			background: #f2efec;
			width: 120px;
		}

		#contents .search_line input[type="submit"] {
			float: right;
		}

		#contents .search_line input[type="submit"].clear {
			float: left;
			background: #fff;
			color: #127c96;
			border: 1px solid #127c96;
		}

		#contents #list {
			padding: 40px 0 0;
		}

		#contents .navi_line {
			padding: 35px 0 0;
		}


		#contents .navi_line span {
			float: right;
			font-size: 13px;
		} 

		#contents .navi_line ul {
			float: left;
		}

		#contents .navi_line li {
			float: left;
			margin: 0 10px 10px 0;
		}

		#contents .navi_line li a {
			display: block;
			text-align: center;
			min-width: 115px;
			background: #fff;
			line-height: 30px;
			padding: 0 20px;
			border-radius: 15px;
			transition: 0.3s;
			font-size: 14px;
		}

		#contents .navi_line li a:hover {
			background: #e6714e;
			color: #fff;
		}

		#contents .navi_line li.on a {
			background: #e6714e;
			color: #fff;
		}

		#contents #list .controll .public_area {
			background: #fff;
			float: left;
			padding: 15px 20px 15px 0;
			border-radius: 10px;
		}

		#contents #list .controll .select2 {
			float: left;
			margin: 0 5px 0 20px;
		}
		
		#contents #list .controll input[type="submit"] {
			float: left;
			margin: 0;
		}

		#contents #list .controll input[type="submit"].del {
			margin: 15px 0 0 20px;
		}

		#contents #list .controll.non-active input[type="submit"] {
			background: #e1e1e1;
		}

		#contents #list .controll.non-active .select2-container--default .select2-selection--single {
			background: #e1e1e1;
			border: 1px solid #e1e1e1;
			transition: 0.5s;
		}

		#contents #list .controll.non-active .select2-container--default .select2-selection--single .select2-selection__rendered {
			color: #fff;
			transition: 0.5s;
		}

		#contents #list #index {
			margin: 20px 0 0;
			width: 100%;
		}

		#contents #list #index th {
			background: #C23395;
			color: #fff;
			padding: 5px 10px;
			text-align: left;
			border-bottom: 10px solid #f2efec;
		}
		
		#contents #list #index th.id_box {
			width: 30px;
			text-align: center;
		}

		#contents #list #index th.image_box {
			width: 120px;
		}

		#contents #list #index th.action_box {
			width: 250px;
		}

		#contents #list #index td {
			background: #fff;
			padding: 15px 10px;
			border-bottom: 5px solid #f2efec;
		}

		#contents #list #index td a.submit_02 {
			margin: 5px 5px 5px 0;
		}

		#contents #list #index td.checkbox {
			text-align: center;
		}

		#contents #list #index td span {
			border: 1px solid #ff0000;
			font-size: 14px;
			color: #ff0000;
			display: inline-block;
			padding: 1px 5px;
			margin: 0 10px 0 0;
		}

/* ------------------------------------------------------------ make */

	#contents #make_form {
		background: #fff;
		padding: 25px 50px;
		margin: 25px 0 0;
	}
		#contents #make_form .album_upload {
			text-align: right;
		}

		#contents #make_form .album_upload input[type="button"]{
			display: block;
			width: 200px;
			line-height: 50px;
			border-radius: 25px;
			text-align: center;
			border: none;
			margin: 0 0 0 auto;
			background-size: 20px 20px;
			color: #127c96;
			border: 1px solid #127c96;
		}

		#contents #make_form .input {
			width: 100%;
		}

		#contents #make_form .input tr { 
			border-bottom: 1px solid #eeeeee;
		}

		#contents #make_form .input tr:last-child { 
			border-bottom: none;
		}

		#contents #make_form .input tr.textarea {
			vertical-align: top;
		}

		#contents #make_form .input th {
			min-width: 200px;
			text-align: left;
			line-height: 23px;
			padding: 20px 0;
		}
		
		#contents #make_form .input th span {
			font-size: 13px;
			color: #ff0000;
			border: 1px solid #ff0000;
			display: inline-block;
			padding: 0 5px;
		}

		#contents #make_form .input td {
			padding: 20px 0;
			min-width: 300px;
		}
		
		#contents #make_form .input td .goto3 {
			display: none;
		}

		#contents #make_form .input td .under_line{
			text-decoration: underline;
			color: #73aeff;
		}

		#contents #make_form .input td span.heading {
			float: left;
			clear: both;
			min-width: 70px;
			padding: 10px 0;
		}

		#contents #make_form .input td span.sentence {
			float: left;
			padding: 10px 0;
			max-width: calc(100% - 70px);
		}

		#contents #make_form .input td input[type="text"],
		#contents #make_form .input td input[type="password"] {
			width: 100%;
			border: none;
			background: #f4f4f4;
			padding: 10px 20px;
			border-radius: 5px;
			box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; 
		}

		#contents #make_form .input td textarea {
			width: 100%;
			border: none;
			background: #f4f4f4;
			padding: 10px 20px;
			border-radius: 5px;
			box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; 
		}

		#contents #make_form .input td iframe {
			width: 100%!important;
		}

		#contents #make_form .alert {
			text-align: center;
			padding: 60px 0;
		}

		#contents #make_form .alert span {
			color: #ff0000;
			display: block;
			padding: 0 0 10px;
		}

		#contents #make_form .alert input[type="button"] {
			margin: 60px auto 0;
			cursor: pointer;
		}


/* ------------------------------------------------------------ article album */

	#album_wrapper {
		height: 100%;
		overflow: scroll;
	}

		#album_wrapper #advice {
			background: #e6f7f7;
			margin: 25px 30px;
			border: 1px solid #a7e2e2;
			padding: 15px;
		}

		#album_wrapper #advice p {
			color: #31708f;
			font-size: 14px;
			font-weight: bold;
			padding: 0 0 0 20px;
		}

		#album_wrapper .inner {
			margin: 0 30px;
		}

		#album_wrapper input[type="file"] {
			box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;
			padding: 15px;
			margin: 0 0 20px;
			width: 100%;
			background: #fff;
		}

		#album_wrapper input[type="submit"] {
			margin: 0 auto 20px;
		}

		#album_wrapper .text {
			font-size: 14px;
		}

		#album_wrapper #inner-albums {
			padding: 20px 0;
			width: 930px;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
		}
		
		#album_wrapper #inner-albums .photos {
			background: #fff;
			width: 200px;
			padding: 10px;
			margin: 5px;
			text-align: center;
			max-height: 330px;
		}

		#album_wrapper #inner-albums .photos .picture {
			width: 100%;
			max-height: 220px;
		}

		#album_wrapper #inner-albums .photos .picture span {
			display: block;
			padding: 25% 0;
			position: relative;
			text-align: center;
			width: 100%;
		}

		#album_wrapper #inner-albums .photos .picture span img{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: auto;
			height: auto;
			max-width: 80px;
			cursor: pointer;
			max-height: 210px;
		}

		#album_wrapper #inner-albums .photos h3 {
			font-size: 14px;
		}

		#album_wrapper #inner-albums .photos form {
			text-align: center;
			padding: 5px 0 0;
		}

		#album_wrapper #inner-albums .photos input[type="submit"].btn_gray {
			background: #d84f3a;
			width: 100%;
			height: 35px;
			line-height: 35px;
			padding: 0;
			font-size: 14px;
			color: #fff;
			border: none;
		}

/* ------------------------------------------------------------ order album */

	#contents #list .album_conetnts {
		padding: 40px 0 100px;
	}

	#contents #list .album_conetnts .controll2 {
		padding: 0 0 20px;
	}

	#contents #list .album_conetnts .submit_01{
		float: left;
	}
	
	#contents #list .album_conetnts .del {
		margin: 0 0 0 20px;
	}



/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
/* ------------------------------------------------------------ common */



}