@charset "utf-8";
/**
 *
 * Generic CSS for CakePHP
 *
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @package       app.webroot.css
 * @license       http://www.opensource.org/licenses/mit-license.php MIT License
 */

/***********************************************************************
 * ★改修指針 (2020/07/03 大和)
 *
 * CSSのフレームワークを用いることで
 * 独自CSSを排除し、誰でも改修しやすい環境を整える。
 *
 * [理由]
 * 1．ツール系のサイトにおいて独自でCSSを記述することは、
 *    開発者各人のCSS力の際により品質や作業工数が左右される。
 *
 * 2．特定の人が記述したCSSを他の開発者が読解するのは、
 *    それだけでかなりパワーの要する作業である。
 *
 * 3．フレームワークを使うことで、誰が記述してもほぼ同じレベルになる。
 *
 * ※サンプル (Bootstrap)
 *  View/Layouts/default_sa.ctp
 *  View/TraderDocumentPhotos/index.ctp
 *
 ***********************************************************************/

* {
	margin:0;
	padding:0;
}

/** General Style Info **/
html{
	background:url(../img/back.jpg) 0px 0px repeat;
}
body {/*
	font-family:'lucida grande',verdana,helvetica,arial,sans-serif;*/
	font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka",Verdana,"ＭＳ Ｐゴシック","MS P Gothic",Arial,Helvetica,sans-serif;
	font-size:90%;
	margin: 0;
}


a {
	color: #003d4c;
	text-decoration: underline;
	font-weight: bold;
}
a:hover {
	color: #367889;
	text-decoration:none;
}
a img {
	border:none;
}
h1, h2, h3, h4 {
	font-weight: normal;
	margin-bottom:0.5em;
}
h1 {
	font-size: 100%;
}
h2 {
	background: #fff;
	font-family: 'Gill Sans','lucida grande', helvetica, arial, sans-serif;
	font-size: 190%;
	text-align: center;
}
h2.different_owner {
	color: #e32;
	font-weight: bold;
	font-size: 1.5em;
	width: 90%;
	margin: 10px auto;
}
h3 {
	font-family:'Gill Sans','lucida grande', helvetica, arial, sans-serif;
	font-size: 165%;
}
h4 {
	font-weight: normal;
}
ul, li {
	margin: 0 12px;
}

table{
	border-collapse: collapse;
	border-spacing: 0;
}

img{
	width:100%;
}

/* 画像送信できない場合の注意文言 */
.bold {
	font-weight: bold;
}
.add_box {
	margin: 0 25px;
	padding: 10px;
	border: 1px dotted #a5cb05;
}

.add_box2 {
	margin: 0 25px;	
}

/*************** 中川追加 ***************/
#container{
	width:80%;
	max-width:740px;
	margin:20px auto 30px;
	background: #ffffff;
	overflow: hidden;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35);
}
#container #header{
	background:#739f3d;
}
#header h1{
	padding:2%;
	margin: 0;
}
p.headers_text{
	background:url('/img/title_img.png') 0px 50% no-repeat;
	padding:0px 0px 0px 200px;
	font-size:2em;
	color:#FFF;
	min-height:97px;
}
.customer_add p.headers_text{
	width:100%;
	background:url('/img/title_img.png') 0px 0px no-repeat;
	padding:90px 0px 0px 0px;
	font-size:1.5em;
	color:#FFF;
	min-height:97px;
}
.customer_add.add_error p.headers_text{
	padding:0px;
}

#footer{
	text-align: center;
	margin-bottom: 50px;
}
#displaysData{
	width:90%;
	margin:30px auto;
	border:solid 1px #e0dadc;
}
#displaysData th{
	width:30%;
	background: #f2f2f2;
	border-bottom:solid 1px #e0dadc;
	padding:25px 0px;
}
#displaysData td{
	border-bottom:solid 1px #e0dadc;
	padding: 15px 0px;
}
.text_box{
	font-size:15px;
	padding:0px 10px;
}

.fileUploader {
	display: inline-block;
	position: relative;
	vertical-align: top;
	padding: 10px;
}
.input_box:last-child .fileUploader{
	border-bottom: 0px;
	margin-bottom: 0px;
}

/* 中川追加js使用時に使用するCSS */
.fileUploader .btn{
	float: left;
	display: block;
	border: solid 1px #c1c1c1;
	padding:12px;
	font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka",Verdana,"ＭＳ Ｐゴシック","MS P Gothic",Arial,Helvetica,sans-serif;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	background: #fefefe;
	background: -moz-linear-gradient(top, #fefefe 0%, #e8e8e8 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#e8e8e8));
	background: -webkit-linear-gradient(top, #fefefe 0%,#e8e8e8 100%);
	background: -o-linear-gradient(top, #fefefe 0%,#e8e8e8 100%);
	background: -ms-linear-gradient(top, #fefefe 0%,#e8e8e8 100%);
	background: linear-gradient(to bottom, #fefefe 0%,#e8e8e8 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e8e8e8',GradientType=0 );
}
.fileUploader .txt,
.fileUploader .txt_size{
	clear:both;
	display: block;
	width:90%;
	border:0px;
	padding:5px 0px;
	font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka",Verdana,"ＭＳ Ｐゴシック","MS P Gothic",Arial,Helvetica,sans-serif;

}
.fileUploader a,.fileUploader .clear_btn{
	float: left;
	display: block;
	font-weight: normal;
	border: solid 1px #c1c1c1;
	padding:13px 5px;
	text-decoration: none;
	margin-left: 11px;
	text-align: center;
	cursor:pointer;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	background: #fefefe;
	background: -moz-linear-gradient(top, #fefefe 0%, #e8e8e8 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#e8e8e8));
	background: -webkit-linear-gradient(top, #fefefe 0%,#e8e8e8 100%);
	background: -o-linear-gradient(top, #fefefe 0%,#e8e8e8 100%);
	background: -ms-linear-gradient(top, #fefefe 0%,#e8e8e8 100%);
	background: linear-gradient(to bottom, #fefefe 0%,#e8e8e8 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e8e8e8',GradientType=0 );
}

.input.file{
	width:20%;
}
.input.file input{
	width:20%;
	font-size:14px;
}

.uploader {
	position: absolute;
	top: -500px;
	left: -500px;
	display: none;
}

/********** 中川追加CSSを使用しない場合に使うCSS **********
.uploader{
	height:50px;
	font-size:16px;
	padding:10px;
}
***********************************************************/

.flex-center-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-center-item-mtb15 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 15px auto;
}

.flex-center {
	display: flex;
	justify-content: center;
}

.flex-center-mb10 {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}

.center-mtb15 {
	text-align: center;
	margin: 15px auto;
}

.center-mb15 {
	text-align: center;
	margin-bottom: 15px;
}

.center-text {
	text-align: center;
}

.center-dib {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	margin-bottom: 10px;
}

.red-text {
	color: #ff2828;
}

.width-auto {
	width: auto;
}

.max-width100 {
	width: auto;
	max-width: 100%;
}

.desired-photo {
	padding-left: 10px;
	font-weight: bolder;
	font-size: 3.5em;
	color: #1e990d;
}

.lay_camera {
	padding-left: 10px;
	font-size: 1.3em;
}

.caution_not_lay {
	font-size: 1.3em;
}

.fix-photo {
	font-size: 1.1em;
	color: #ff2828;
}

.dont-upload {
	font-size: 1.1em;
	font-weight: bold;
	color: #ff2828;
}

.eight-photos {
	font-size: 1.1em;
}

.without-inspection-certificate {
	margin: 0 10px;
	padding: 5px;
	border: 3px solid #e0dadc;
}

.table-cell-left {
	display: table-cell;
	float: left;
	text-align: center;
}

.table-cell-right {
	display: table-cell;
	float: right;
	text-align: center;
}

.mb7 {
	margin-bottom: 7px;
}

.mb15 {
	margin-bottom: 15px;
}

.left-yellow-pipe-normal {
	border-left: 5px solid #ffd800;
	padding-left: 10px;
	font-size: 2em;
}

.left-yellow-pipe-smaller {
	border-left: 5px solid #ffd800;
	padding-left: 10px;
	font-size: 1.4em;
}

.description_photo {
	font-weight: bold;
	font-size: 1.5em;
}

.dib {
	display: inline-block;
	position: relative;
}

.dib img {
	width: 120px;
	height: 90px;
}

.dib .invisible {
	display: none;
}

.dib p {
	position: absolute;
	margin: 0;
	padding: 0;
	color: red;
	font-weight: bold;
//	font-size: 1.1em;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.submit{
	margin: 0 auto;
	text-align: center;
	height: 100px;
	overflow: hidden;
	display: block;
	border: none;
	background: none;
}
.submit input{
	width: 100%;
	max-width:390px;
	height:100px;
	background-image:url("../img/form_button.png");
	background-position: 0px 0px;
	background-repeat:no-repeat;
	border: 0px;
	margin:0px auto 10px;
	text-indent: -999px;
	cursor: pointer;
	overflow: hidden;
}
.submit input:hover{
	background-position: 0px -103px;
}
#form_f_text{
	text-align: center;
	margin: 12px 0;
}
#privacy {
	color: #666666;
	text-align: left;
	border: 4px solid #f0f0f0;
	color: #666666;
	height: 91px;
	margin: 0 auto 26px;
	overflow: auto;
	padding: 12px 25px;
	text-align: left;
}
#privacy h3 {
	font-weight: normal;
	margin: 0 auto 5px;
}
#privacy h4{
	font-weight: normal;
	margin: 0 auto 5px;
}
#privacy p{
	margin:0 auto 6px;
}
#flashMessage{
	font-size:18px;
	color:#e32;
	text-align: center;
	margin:50px auto;
}
#flashMessage.success{
	color:#000000;
}
#photo_img{
	margin:30px auto 0px;
}

.comment_box{
	width:95%;
	margin:2%;
}
.outsider_outline_select{
	width:95%;
	margin:2%;
	border-radious:5px;
	border:1px solid #999;
	font-size:16px;
	padding:5px 0px;
}
.textarea_div{
	display: none;
}
.outsider_comment_textarea{
	margin:2%;
	width:95%;
	border-radious:5px;
	border:1px solid #999;
	font-size:16px;
	padding:2px;
}

#publishment_for_staff_box, #publishment_for_staff_pdf{
	width:90%;
	margin: 0px auto 20px;
}



/* PC/SPの振り分け */
#container.sp{
	width:95%;
}

#container.sp p.headers_text{
	background-position:0px 0px;
	background-size:auto 60px;
	padding:60px 0px 0px 0px;
	font-size:1.5em;
	min-height:0px;
}
#container.pc #attend_text{
	text-align: center;
}
#container.sp #attend_text{
	text-align: left;
}
#container.sp #content{
	padding:5px;
}
#container.sp #displaysData th, #container.sp #displaysData td{
	display: block;
	width:100%;
	padding:10px 0px;
}
#container.sp .fileUploader{
	padding:5px;
}
#container.sp .fileUploader .btn{
//	width:60%;
}
#container.sp .fileUploader a, #container.sp .fileUploader .clear_btn{
//	float: right;
//	width:28%;
}


@media screen and (max-width:800px) and (min-width:641px){
	body p.headers_text{
		font-size:150%;
	}
}


@media screen and (max-width: 640px) {
   /* 表示領域が320px以下の場合に適用するスタイル */
   body{
		font-size:75%;
	}

	.desired-photo {
		font-size: 3em;
		line-height: 1.2;
		padding: 10px 0 10px 10px;
	}

	/* 画像送信できない場合の注意文言 */
	.add_box {
		margin: 0 5px 10px;
	}

	.add_box2 {
		margin: 0 5px 10px;
	}
}