@charset "utf-8";

/*!
 * Copyright 2020 HATTORI PROCESS GROUP
 */

/* ============================
otayori.css　もくじ
-------------------------------
1.ブレイクポイント
2.otayoriヘッドライン
3.otayori共通設定
4.メーラー起動版
5.フォーム版
6.フォーム版確認画面
============================== */


/* ===========================
1.ブレークポイント
============================== */
@media screen and (min-width: 30em) { /* 480px */
}
@media screen and (min-width: 40em) { /* 640px */
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
}
@media screen and (min-width: 64em) {/* 1024px */
}
@media screen and (min-width: 80em) {/* 1280px */
}


/* ===========================
2.productsヘッドライン
============================== */
#main_contents #otayori_headline {
	background: url("../img/otayori_back.jpg") center top no-repeat;
}
#main_contents #otayori_headline>div {
	padding: 25px 6%;
}
#main_contents #otayori_headline>div>h2 {
	letter-spacing: 0.3em;
}
@media screen and (min-width: 40em) { /* 640px */
	#main_contents #otayori_headline {
		min-height: 230px;
	}
	#main_contents #otayori_headline>div {
		padding: 90px 8%;
	}
}


/* ===========================
3.otayori共通設定
============================== */
#main_contents #otayori_area {
	margin: 0 6%;
}
@media screen and (min-width: 40em) { /* 640px */
	#main_contents #otayori_area {
		margin: 0 8%;
	}
}
@media screen and (min-width: 80em) {/* 1280px */
	#main_contents #otayori_area {
		width: 1000px;
		margin: 0 auto;
	}
}


/* ===========================
4.メーラー起動版
============================== */
#main_contents #otayori_area p {
	font-size: 1rem;
	line-height: 1.7;
}
#main_contents #otayori_area #otayori_head {
	text-align: center;
	margin-top: 40px;
}
#main_contents #otayori_area #otayori_head p {
	font-size: 1.25rem;
	font-weight: bold;
	margin: 0;
}
#main_contents #otayori_area .otayori_box {
	border: 1px #5fb7fc solid;
	padding: 0 20px;
	margin: 40px 0 10px;
}
#main_contents #otayori_area .otayori_box2 {
	margin: 40px 0 10px;
}
/*#main_contents #otayori_area a,*/
#main_contents #otayori_area .otayori_tel {
	text-decoration: none;
	color: #f03;
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: bold;
}
@media screen and (min-width: 40em) {/* 640px */
	#main_contents #otayori_area p {
		font-size: 0.9375rem;
	}
	#main_contents #otayori_area #otayori_head {
		margin-top: 90px;
	}
	#main_contents #otayori_area .otayori_box,
	#main_contents #otayori_area .otayori_box2 {
		margin: 70px 0 20px;
	}
}


/* ===========================
5.フォーム版
============================== */
#main_contents #otayori_area form {
	margin-top: 70px;
}
#main_contents #otayori_area form label span {
	color: #f00;
}
#main_contents #otayori_area form .otayori_controls p,
#main_contents #otayori_area form .otayori_controls label {
	display: block;
}
#main_contents #otayori_area form .otayori_controls label input {
	vertical-align: middle;
}
#main_contents #otayori_area form .otayori_formset {
	margin-bottom: 10px;
}
#main_contents #otayori_area form .otayori_formset label:first-child {
	display: block;
	width: 12em;
	vertical-align: middle;
	text-rendering: auto;
	margin: 0 1em 0 0;
}
#main_contents #otayori_area form .otayori_formset>input,
#main_contents #otayori_area form .otayori_formset>textarea {
	display: block;
	width: 100%;
}
#main_contents #otayori_area form .submit_area {
	text-align: center;
	margin: 40px 0;
}

#main_contents #otayori_area form .document{
	overflow: auto; 
	height: 130px;
	width: 96%;
	word-wrap: break-word;
	border: 1px solid #ccc;
	margin: 0 auto;
	padding: 5px;
}
#main_contents #otayori_area form .document h4{
	margin-bottom: 0;
}
#main_contents #otayori_area form .document ol li{
	list-style: decimal;
	font-size: 0.9375rem;
	padding-left: 1rem;
	margin-bottom: 1em;
}
#main_contents #otayori_area form .document p,
#main_contents #otayori_area form .document ol li{
	font-size: 13px;
}
#main_contents #otayori_area form .pure-checkbox{
	width: 100%;
}
#main_contents #otayori_area form .pure-controls{
	margin: 1.5em auto 0;
	text-align: center;
}
@media screen and (min-width: 40em) { /* 640px */
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
	#main_contents #otayori_area form .otayori_controls {
		margin-left: 13.5em;
	}
	#main_contents #otayori_area form .document{
		padding: 0 15px;
	}
	#main_contents #otayori_area form .document p,
	#main_contents #otayori_area form .document ol li{
		font-size: 14px;
	}
	#main_contents #otayori_area form .otayori_formset {
		margin-bottom: 20px;
	}
	#main_contents #otayori_area form .otayori_formset label:first-child {
		text-align: right;
		display: inline-block;
	}
	#main_contents #otayori_area form .otayori_formset>input,
	#main_contents #otayori_area form .otayori_formset>textarea {
		display: inline-block;
		width: 65%;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#main_contents #otayori_area form .otayori_formset>input,
	#main_contents #otayori_area form .otayori_formset>textarea {
		width: 75%;
	}
}


/* ===========================
6.フォーム版確認画面
============================== */
#otayori_area #formWrap {
	width:90%;
	margin:10px auto;
	background-color:#fff;
	padding: 0 10px 30px;
	border-radius: 2em;
}
#otayori_area .thanks {
	margin-top: 90px;
}
@media print, screen and (min-width: 568px){
	#otayori_area #formWrap {
		width:520px;
		margin-top: 20px;
		padding: 10px 20px 30px;
	}
}
@media print, screen and (min-width: 960px){
	#otayori_area #formWrap {
		width:940px;
	}
}

#otayori_area table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
#otayori_area table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
#otayori_area table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:center;
}
#otayori_area p.error_messe{
	margin: 5px 0;
	color: red;
}