/* CSS Document */

.keitai span,.required,hgroup h3{
	color:var(--hover-red);
}
hgroup h2{
	font-size:var(--fs44);
}
hgroup h3,.contact-label{
	font-size:var(--fs30);
}
.wpcf7-list-item-label{
	font-size:var(--fs26);
}
.contact-submit input,.keitai{
	font-size:var(--fs24);
}
.contact-submit p{margin:0;}
.required,.name-flex .wpcf7-form-control-wrap input{
	font-size:var(--fs20);
}

.wpcf7-list-item-label,.name-flex .wpcf7-form-control-wrap input,.required,.keitai{
  font-family: var(--zen-kaku-gothic-new);
}
.contact-main{
	width:80%;
	max-width:var(--max);
	margin: auto;
	padding: 5% 0 10%;
}

hgroup{
	display:flex;
	flex-direction: column;
}

hgroup h3,hgroup h2{
	margin: 0;
}
hgroup h3{
	order:1;
}
hgroup h2{
	order:2;
}
.name-flex p{
	display:flex;
	column-gap: 10px;
	max-width:650px;
}
.t-box{
	max-width:650px;
}

.wpcf7-spinner{
	display:none;
}

.contact-label {
    position: relative;
    padding-left: 0.75em; /* 丸の分だけ左を空ける */
    font-weight: bold;
    display: block;
}
.wpcf7-list-item {
    margin: 0 0 0 2em;
}
.first{
	margin:0;
}
.contact-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 垂直中央に配置 */
    
    /* 丸のサイズと色 */
    width: 6px;
    height: 6px;
    background-color: var(--hover-red); /* カンプの赤 */
    border-radius: 50%; /* これで正円にする */
}

/* 全体の枠組み */
.contact-form-container {
}

.contact-row {
    margin-bottom: 5%;
}

/* ラベル（項目名） */
.contact-label {
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
}

.required {
    margin-left: 5px;
}

/* CF7が生成する span 対策も含めた入力枠の設定 */
.contact-content input[type="text"],
.contact-content input[type="email"],
.contact-content input[type="tel"],
.contact-content textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    box-sizing: border-box;
}

/* 姓・名の横並び設定 */
.name-flex {
    display: flex;
    gap: 10px;
}
.name-flex .wpcf7-form-control-wrap {
    flex: 1; /* 均等に広げる */
}

/* テキストエリアの高さ */
.contact-content textarea {
    height: 408px;
}

/* 送信ボタン（黒背景・丸み） */
.contact-submit {
    text-align: center;
    margin-top: 10%;
}

.contact-submit input[type="submit"] {
    background: none;
    color: var(--white);
	border:none;
	
}

.contact-submit input[type="submit"]:hover {

}
@media(max-width:767px){
	.contact-main {
		padding: 10% 0 15%;
	}
	.contact-row {
		margin-bottom: 10%;
	}
	.kasou-hero {
		height: auto;
	}
	.kasou-hero img {
		position: relative;
		top: unset; 
		left: unset; 
		transform: unset;
	}
}
@media(max-width:600px){
	.yuubin {
		max-width: 100%;
	}
}
@media(max-width:500px){
	.name-flex p {
		column-gap: 5px;
	}
}
@media(max-width:420px){
	.contact-submit {
		margin-top: 10%;
	}
	.shop-card-btn {
		width: 100%;
	}
}