@charset "utf-8";
/* 20240626 */
body#contact{
	display: flex;
	flex-direction: column;
	align-items: center;
	}

body#contact main article{
	display: flex;
	justify-content: center;
	width: 100vw;
	position: relative;
}
body#contact main article .inner_width{
	display: flex;
	flex-direction: column;
	margin: calc(10vw + 4em) auto calc(4vw + 4em);
	width: 80vw;/*各スライダー全体の横幅(4箇所)と共通*/
	max-width: 1200px;
	}
	body#contact main article:first-of-type .inner_width{
			margin-top: calc(20vw + 2em);
		}
body#contact main article .inner_width h1{
	margin-bottom: 1em;
	}
body#contact main article .inner_width form{
	margin-top: 2em;
	}
body#contact main article .inner_width section form label,
body#contact main article .inner_width section form select,
body#contact main article .inner_width section form input{
	display: block;
	width: 80%;
	max-width: 500px;
	padding: .6em;
    }
	body#contact main article .inner_width section form label{
		padding: .4em 0;
		}
	body#contact main article .inner_width section form textarea{
		display: block;
		width: 100%;
		max-width: 900px;
		padding: .2em;
		height: 30vh;
		}
body#contact main article .inner_width section form select,
body#contact main article .inner_width section form input{
	margin-bottom: 1.2em;
    }


body#contact main article div.inner_width section div.btn_area{
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1em;
	margin-top: 2em;
	}
	body#contact main article div.inner_width section div.btn_area input:nth-of-type(1){
		display       : block;
		text-align    : center;      /* 文字位置   */
		cursor        : pointer;     /* カーソル   */
		padding       : 1em;		 /* 余白       */
		background    : #333;     /* 背景色     */
		color         : #fff;     /* 文字色     */
		line-height   : 1em;         /* 1行の高さ  */
		transition    : .2s;         /* なめらか変化 */
		box-shadow    : 4px 4px 2px #ccc;  /* 影の設定 */
		border        : none;    /* 枠の指定 */
		margin-bottom: 1em;
		/*margin-top: 1.6em;*/
		}
	body#contact main article div.inner_width section div.btn_area input:nth-of-type(1):hover{
        background    : #666;     /* 文字色     */
        color         : #fff;		 /*     背景色     */
        box-shadow    : none;        /* カーソル時の影消去 */
		}
	body#contact main article div.inner_width section div.btn_area input:nth-of-type(2){
		width: 50%;
		display       : block;
		/* border-radius : 5%;          角丸       */
		/* font-size     : 18pt;        文字サイズ */
		text-align    : center;      /* 文字位置   */
		cursor        : pointer;     /* カーソル   */
		padding       : 1em;		 /* 余白       */
		background    : #ddd;     /* 背景色     */
		color         : #333;     /* 文字色     */
		line-height   : 1em;         /* 1行の高さ  */
		transition    : .2s;         /* なめらか変化 */
		/* box-shadow    : 4px 4px 2px #ccc;  影の設定 */
		border        : 1px solid #fff;    /* 枠の指定 */
		margin-bottom: 1em;
		/*margin-top: 1em;*/
		}
	body#contact main article div.inner_width section div.btn_area input:nth-of-type(2):hover{
        background    : #ffffff;     /* 文字色     */
        color         : #333;		 /*     背景色     */
        box-shadow    : none;        /* カーソル時の影消去 */
		border        : 1px dotted #ccc;    /* 枠の指定 */
		}

/* --------------------------------------------- */
/* -------------------- 横長 -------------------- */
/* --------------------------------------------- */
/* 横長 */
@media (orientation: landscape){
body#contact main article .inner_width{
	width: 72vw;
	}
	body#contact main article:first-of-type .inner_width{
			margin-top: calc(4vw + 4em);
		}

body#contact main article .inner_width section form textarea{
    height: 50vh;
    }

body#contact main article div.inner_width section div.btn_area{
	max-width: 900px;
	align-items: flex-start;
	flex-direction: row;
	}
	body#contact main article div.inner_width section div.btn_area input:nth-of-type(1){
		max-width: 68%;
		margin-right: 2%;
		}
	body#contact main article div.inner_width section div.btn_area input:nth-of-type(2){
		max-width: 30%;
		}
}