@charset "utf-8";

/* --------------------------------------------------------------------------------
	リセット
-------------------------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,.form-area,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
}
html{
	font-size:62.5%;
}
body{
	line-height: 1.5;
	font-family: Helvetica, Arial,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
	font-size: 1.6em;
	color: #333;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
	display:block;
}
ol,ul{
	list-style:none;
}
blockquote,q{
	quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
	content:'';
	content:none;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}

th,
td{
	word-break:break-all;
}

img{
	max-width:100%;
	height:auto;
	border:none;
	-ms-interpolation-mode:bicubic;
	vertical-align:text-bottom;
}
a img{
	border:none;
	vertical-align:text-bottom;
}

h1,h2,h3,h4,h5,h6,p{
	margin:0;
	font-size:1em;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
ul{
	list-style:none;
	margin:0;
	padding:0;
}

a{
    -webkit-tap-highlight-color:rgba(0,0,0,0.1);
	tap-highlight-color:rgba(0,0,0,0.8);
	text-decoration:none;
	color:#27679a;
}

input{
	-webkit-border-radius:100%;
	border-radius:0;
}
input, select{
	vertical-align:middle;
	font-family: Helvetica, Arial,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
textarea{
	font-family: Helvetica, Arial,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}


/* --------------------------------------------------------------------------------
	共通クラス
-------------------------------------------------------------------------------- */
.clear{
	clear:both;
}
br.clear{
	display:block;
	margin:0;
	padding:0;
	clear:both;
	height:0;
	border:none;
	visibility:hidden;
	font-size:0;
}
.clearfix:after{
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}
.clearfix{
	min-height:1%;
}
* html .clearfix{
	height:1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

ul.ul{
	list-style:disc;
	padding:0 0 0 1.5em;
}
ol.ol{
	list-style:decimal;
	padding:0 0 0 1.75em;
}

/********** プレースホルダー **********/
::-webkit-input-placeholder{
	color:#000;
}


/* --------------------------------------------------------------------------------
	デバイスごとの切り替え
-------------------------------------------------------------------------------- */
.device-sp{
	display:block;
}
.device-sp-inline{
	display:inline;
}
.device-pc{
	display:none;
}
.device-pc-inline{
	display:none;
}


/* --------------------------------------------------------------------------------
	container
-------------------------------------------------------------------------------- */
#container{
	max-width: 1180px;
	margin: 0 auto;
	padding: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 799px){
	#container{
		padding: 1rem;
	}
}


/* --------------------------------------------------------------------------------
	header
-------------------------------------------------------------------------------- */
#header{
	margin: 0 0 4rem;
	padding: 0 0;
	text-align: center;
}

#header h1{
	padding: 0 0 2rem;
	font-size: 3.5rem;
}
#header h1::after{
	display: block;
	width: 100%;
	height: 0.5rem;
	content: '';
	background: linear-gradient(to right, rgba(255,200,130,1) 0%, rgba(180,100,30,1) 30%, rgba(180,100,30,1) 60%,rgba(255,200,130,1) 100%);
}
#header p{
}


/* --------------------------------------------------------------------------------
	wrapper
-------------------------------------------------------------------------------- */
#wrapper{
}


/* --------------------------------------------------------------------------------
	main
-------------------------------------------------------------------------------- */
#main{
	padding: 0 0 4rem;
}

/********** フォーム **********/
#main .form-area table{
	width: 100%;
	margin: 0 0 4rem;
	border: solid 1px #ddd;
	overflow: hidden;
}
#main .form-area th{
	text-align: left;
	vertical-align: middle;
}
#main .form-area th{
	width: 250px;
	text-align: left;
}
#main .form-area th,
#main .form-area td{
	padding: 1rem 1rem;
	border-bottom: solid 1px #ddd;
}
#main .form-area tr th,
#main .form-area tr td{
}
#main .form-area tr:last-child th,
#main .form-area tr:last-child td{
}

@media screen and (min-width: 0px) and (max-width: 799px){
	#main .form-area table{
		display: block;
	}
	#main .form-area tbody{
		display: block;
	}
	#main .form-area tr{
		display: block;
	}
	#main .form-area th{
		width: auto !important;
		display: block;
	}
	#main .form-area td{
		width: auto !important;
		display: block;
	}
	#main .form-area table{
		width: 100%;
		display: block;
	}
}

/** 必須 **/
#main .form-area tr td.need{
	width: 2em;
}
#main .form-area tr td.need .need-mark{
	border-radius: 0.4rem;
	white-space: nowrap;
	display: block;
	padding: 0.2rem 0.5rem;
	font-size: 1.2rem;
	color: #fff;
	background: #f36;
}
@media screen and (min-width: 0px) and (max-width: 799px){
	#main .form-area tr td.need .need-mark{
		display: inline-block;
	}
}

#main .form-area td .company-genre-box{
	display: flex;
	align-items: center;
}
#main .form-area td .company-genre-box input{
	display: block;
	margin: 0 5px 0 20px;
}
#main .form-area td .company-genre-box input:nth-of-type(1){
	margin: 0 5px 0 0;
}

/** 入力 **/
#main .form-area td input[type="text"],
#main .form-area td select,
#main .form-area td textarea{
	padding: 1rem;
	font-size: 1.5rem;
	border: solid 1px #ddd;
}
#main .form-area tr.company-name input[type="text"]{
	width: 70%;
}
#main .form-area tr.gotantou-name input[type="text"]{
	width: 70%;
}
#main .form-area tr.mail input[type="text"]{
	width: 70%;
}
#main .form-area tr.tel input[type="text"]{
	width: 50%;
}
#main .form-area tr.address .yubin{
	display: flex;
	align-items: center;
	
	margin: 0 0 1rem;
}
#main .form-area tr.address .yubin .yubin-box{
	margin: 0 1rem 0 0;
}
#main .form-area tr.address .address-box input[type="text"]{
	width: 95%;
}
#main .form-area tr.file input[type="file"]{
	padding: 0 0;
}
#main .form-area tr.mail .txt-pc{
	font-size: 1.2rem;
}
#main .form-area tr.title input[type="text"]{
	width: 70%;
}
#main .form-area tr.purpose textarea{
	width: 95%;
	height: 10rem;
}

/** 補足 **/
#main .form-area tr td .hosoku1{
	padding: 1rem 0;
	font-size: 1.2rem;
}
#main .form-area tr td .hosoku1:last-child{
	padding: 1rem 0 0;
}
#main .form-area tr td .hosoku2{
	font-size: 1.2rem;
}

/********** エラー **********/
#main .form-area .msg{
	color: #d36;
}


/********** 要項 **********/
#main .youkou{
	margin: 0 0 4rem;
	padding: 2rem;
	border: solid 1px #ddd;
	letter-spacing: 0.05rem;
}
#main .youkou section{
	padding: 0 0 4rem;
}
#main .youkou h2{
	margin: 0 0 1.5rem;
	font-size: 1.8rem;
}
#main .youkou h2::after{
	display: block;
	width: 100%;
	height: 0.2rem;
	content: '';
	background: linear-gradient(to right, rgba(255,200,130,1) 0%, rgba(180,100,30,1) 30%, rgba(180,100,30,1) 60%,rgba(255,200,130,1) 100%);
}
#main .youkou ul,
#main .youkou p{
	line-height: 1.75;
}
#main .youkou .att{
	color: #d36;
}
#main .youkou .mark1{
	margin: 0 0.5rem;
	font-weight: bold;
	color: #d36;
}
#main .att-chosaku{
	padding: 0 0 0 2.8rem;
}
#main .att-chosaku p{
	font-size: 1.2rem;
}

/********** チェックマーク **********/
#main .agree{
	display: table;
	margin: 0 auto 3rem;
}
#main .agree ul li{
	display: flex;
	align-items: center;
	padding: 0 0 1rem;
}
#main .agree ul li input{
	display: block;
	margin: 0 1rem 0 0;
}
#main .agree .mark1{
	display: block;
}
#main .agree .mark2{
	display: block;
	color: #d36;
}

/********** 送信内容の確認 **********/
#main .input-submit input{
    background: 0 0;
    border: 0;
	cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-size: 1.8rem;
    border-radius: 0.5rem;
    padding: 2rem 1rem;
    width: 100%;
    color: #fff;
	background: linear-gradient(to right, rgba(255,200,130,1) 0%, rgba(180,100,30,1) 30%, rgba(180,100,30,1) 60%,rgba(255,200,130,1) 100%);
}

/********** 戻るボタン **********/
#main .input-back input{
	background: 0 0;
	border: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	display: block;
	text-align: center;
	font-size: 1.5rem;
	font-size: 1.8rem;
	border-radius: 0.5rem;
	padding: 2rem 1rem;
	width: 100%;
	cursor: pointer;
	color: #fff;
	background: linear-gradient(to right, rgba(255,200,130,1) 0%, rgba(180,100,30,1) 30%, rgba(180,100,30,1) 60%,rgba(255,200,130,1) 100%);
}

/********** 戻る&送信ボタン **********/
#main .back-submit{
	display: flex;
	justify-content: space-between;
	
	width: 100%;
}
#main .back-submit .back-submit-box{
	width: 49%;
}
#main .back-submit input[type="button"]{
	background: 0 0;
	border: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	display: block;
	text-align: center;
	font-size: 1.5rem;
	font-size: 1.8rem;
	border-radius: 0.5rem;
	padding: 2rem 1rem;
	width: 100%;
	cursor: pointer;
	color: #fff;
	background: linear-gradient(to right, rgba(255,200,130,1) 0%, rgba(180,100,30,1) 30%, rgba(180,100,30,1) 60%,rgba(255,200,130,1) 100%);
}
#main .back-submit input[type="submit"]{
	background: 0 0;
	border: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	display: block;
	text-align: center;
	font-size: 1.5rem;
	font-size: 1.8rem;
	border-radius: 0.5rem;
	padding: 2rem 1rem;
	width: 100%;
	cursor: pointer;
	color: #fff;
	background: linear-gradient(to right, rgba(255,200,130,1) 0%, rgba(180,100,30,1) 30%, rgba(180,100,30,1) 60%,rgba(255,200,130,1) 100%);
}

/********** 送信完了 **********/
#main .btn-photo-contest-entry{
	text-align: center;
}


/* --------------------------------------------------------------------------------
	footer
-------------------------------------------------------------------------------- */
#footer{
}

#footer .footer-inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	width: calc(100% - 8rem);
	padding: 2rem 4rem;
	border: solid 1px #ddd;
}
@media screen and (min-width: 0px) and (max-width: 799px){
	#footer .footer-inner{
		display: block;
		width: auto;
		padding: 2rem;
	}
}
#footer .footer-inner .txt{
	width: calc(75% - 2rem);
	line-height: 1.7;
}
@media screen and (min-width: 0px) and (max-width: 799px){
	#footer .footer-inner .txt{
		display: table;
		width: auto;
		margin: 0 auto 2rem;
	}
}
#footer .footer-inner .txt .heading{
	padding: 0 0 1rem;
	font-size: 2.2rem;
}
#footer .footer-inner .txt .name{
	padding: 0 0 1rem;
	line-height: 1.2;
	font-size: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 799px){
	#footer .footer-inner .txt .name .name-heading{
		display: inline-block;
	}
	#footer .footer-inner .txt .name .name-name{
		display: inline-block;
	}
}
#footer .footer-inner .txt .address{
	padding: 0 0 0.5rem;
}
#footer .footer-inner .img{
	width: 25%;
}
@media screen and (min-width: 0px) and (max-width: 799px){
	#footer .footer-inner .img{
		width: 60%;
		margin: 0 auto;
	}
	#footer .footer-inner .img img{
		display: block;
		margin: 0 auto;
	}
}