@charset "UTF-8";

/* ========== contact.php / contact-form-result.php - 問い合わせフォーム カスタマイズ ========== */
/* Thanks for 「グラフィックデザイナーのためのCSSレイアウトメモ」 */
/* http://www.ne.jp/asahi/hatakeyama/design/csslayout/kowaza/index09.html */

.name-email-box {
	width:350px;
}

form#formstyle {
	width:700px;
	padding:10px 10px 0 10px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:15px;
	border:2px solid #C3C3C3;
	color:black;
	background:#ddc;
}

form#formstyle ul{
	padding:0;
	margin:0;
}

form#formstyle ul li{
	list-style:none;
	margin:0;
	padding:10px;
	border-bottom:2px solid #fff;
}

form#formstyle ul li:last-child{
	border-bottom:none;
}

form#formstyle ul li span{
	width:15em;
	margin:0;
	display:block;
	float:left;
	font-weight:bold;
}

form#formstyle ul li:after{
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}

form#formstyle ul li label textarea.form-content{
	background:#fff;
	margin:1em 0 0 0;
	width:620px;
	height:300px;
	box-shadow: 2px 3px 5px -2px #CCC inset;
}

form#formstyle ul li p{
	margin:5px 0 0 30px;
}

.contact-form-button {
	margin-bottom: 1em;
}

/*チェックボックス、ラジオボタンの label要素を横に並べる*/
form#formstyle ul li p label {
	padding-right:0.1em;
	margin-right:1em;
	display:block;
	float:left;
}

/*チェックボックス・ラジオボタンのinput要素とテキストがくっつかないようにマージンを少し*/
form#formstyle ul li p label input {
	margin:0.5em 1em;
}

/*チェックボックス、ラジオボタンの label要素に、ロールオーバー時の変化を指定する*/
form#formstyle ul li p label:hover {
	background:#6a6a6a;
	color:#fff;
}
/*チェックボックスの label要素の横幅を統一する*/
form#formstyle ul li p.check label {
	width:12em;
}

/* 問い合わせページの文字装飾 */
.contact-phone-mail {
	font-size:1.1rem!important;
	text-align:center;
	font-weight:bold;
}

@media (max-width: 768px) {
    form#formstyle {
        width: 94% !important;
        padding: 16px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* ★li要素安定化 */
    form#formstyle ul li {
        padding: 10px 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    .name-email-box {
        width: 100% !important;
        font-size: 18px !important;
        height: 50px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
		appearance: none !important;
        -webkit-appearance: none !important;
        margin-bottom: 8px !important;
    }

	form#formstyle ul li p {
  		margin: auto;
	}

    form#formstyle ul li p.check {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin: 12px 0 0 0 !important;
        font-size: 16px !important;
        padding: 0 !important;
    }
    
    form#formstyle ul li p.check label {
        flex: 1 1 calc(50% - 5px) !important;
        display: flex !important;
        align-items: flex-start !important;
        margin: 0 0 8px 0 !important;
        font-size: 16px !important;
        line-height: 1.4;
        padding: 8px 6px !important;
        box-sizing: border-box !important;
    }
    
    form#formstyle ul li p.check input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        margin: 2px 10px 0 0 !important;
        flex-shrink: 0 !important;
        transform: scale(1.4) !important;
    }
    
    form#formstyle ul li span {
        float: none !important;
        width: 100% !important;
        margin-bottom: 6px !important;
        font-size: 16px !important;
        padding: 0 !important;
    }
    
    .form-content {
        width: 100% !important;
        height: 300px !important;
		padding:5px;
		margin-top: 10px;
        font-size: 18px !important;
        box-sizing: border-box !important;
        resize: vertical;
        margin-bottom: 20px !important; /* ★送信ボタンとの間隔確保 */
    }
    
	.submit {
		width: 90% !important;         /* ★100%→90% */
		height: 55px !important;
		font-size: 18px !important;
		margin: 10px auto auto auto!important;
		display: block !important;
	}

	form#formstyle ul li.submit {
		text-align: center;
		margin: auto!important;
	}

    .contact-form-button {
        width: 85% !important;
        margin: 20px auto 40px !important;  /* ★上20px・下40px・左右中央 */
        display: block !important;
    }
}