@charset "utf-8";

.mvImg a{
	display: block;
	height: 100%;

}

.one-image{
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: 40px;
}
.middleSliderBox .img,
.one-image .img{
	height: 500px;
	background-color: #fff;
}
.middleSliderBox .img img,
.one-image .img img
{
	object-fit: contain;
	height: 100%;
}

.logo-img{
	max-width:400px;
	margin-left:auto;
	margin-right:auto;
}
.logo-img img{
	width: 100%;
}
.comTit2{}
.comTit2 .txt{
	font-size: 30px;
	text-align: center;
	margin-bottom: 40px;
}
.seriesExplain{
	margin: 80px 0px;
}

.seriesExplain p{
	text-align: left;
	font-size: 16px;
	line-height: 1.8em;
	/*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;*/
	font-weight: bold;
}

.middleSliderBox{
	position: relative;
}
.middleSliderSlick {
	width: 90%;
	margin: 0 auto 80px;

}
.middleSliderSlick img {
	width: 100%;
	height: auto;
}
.middleSliderSlick{
	width: 100%;
}
.middleSliderSlick .slick-slide{
	margin: 10px;
}
.middleSliderSlick
.slick-dots {
	bottom: 27px;
}

.mvProduct{

}

.mvProduct .img{
	/*height: 70vh;*/
}

.mvProduct .img {
	position: relative;
}

.mvProduct .img .logo{
	position: absolute;
	right: 10%;
	top: 10%;
	width: 30vw;
}

.mvProduct img{
	width: 100%;
	/*object-fit: cover;

	height: 100%;*/
}
.productList{
	margin-top: 80px;
}
.productListBox{

	display: flex;
	flex-wrap: wrap;
}
.productListBox .item{

	width: calc(20% - 20px);
	margin:40px 10px 0;
}
.productListBox .item .img img{
	width: 100%;
}
.productListBox .item .ttl{
	text-align: center;
	font-size: 16px;
	margin-top: 20px;
	font-weight: bold;
	position: relative;
}
/*
.productListBox .item .ttl.new:before{
	content:"NEW";
	position: absolute;
	top:-50px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 23px;
	color: red;
	line-height: 67px;
	font-weight: 700;
	font-family: 'Lato', sans-serif;
}
*/
/* ==========================================
   ▼ 1. 基本設定（PC用）
   ========================================== */
.productListBox .item .ttl.new:before {
	content: "";
	background-image: url("https://www.hotstuff-cp.co.jp/wp-content/uploads/2026/06/9106f72d537524437e5e2c50a23a3378.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	
	/* PCでのサイズ */
	width: 60px;   
	height: 40px;  

	/* ==========================================
	   💡 PCでの位置（真ん中を基準にして微調整する設定に変えます）
	   ========================================== */
	top: -460px !important;
	left: 0px !important;
	transform: none !important; /* コメントアウトではなく、これで過去のtransformを完全に上書き消去します */

	/* リセット魔法（競合を避けるため width:100% や transform:none を排除しました） */
	line-height: 0 !important;
	font-size: 0 !important;
	font-weight: normal !important;
	text-align: left !important;
}
/* ==========================================
   ▼ 💡 タブレット（2カラム表示）用の位置調整（追記）
   ========================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.productListBox .item .ttl.new:before {
		/* タブレット画面でのNEWマークのサイズ（必要に応じて微調整してください） */
		width: 50px !important;   
		height: 33px !important;  

		/* 💡ここを調整して「HM-4」など各ホイールの左上にピタッと合わせます */
		top: -300px !important;  /* 数値を「-280px」や「-330px」などに変えて上下位置を合わせます */
		left: 10px !important;   /* 左右の位置調整（必要なら変更してください） */
	}
}

/* ==========================================
   ▼ スマホ用設定（leftが効くように修正）
   ========================================== */
@media screen and (max-width:767px){
/* ▼ NEWマークの位置・サイズ調整（ここを微調整します） */
.productListBox .item .ttl.new:before {
width: 11vw !important;
height: 7vw !important;
transform: none !important;
/* ↓【上下の位置調整】商品画像の上に綺麗に乗るように、ここの数値を調整してください */
top: -50vw !important; 
margin-left:0px !important; 
}

/* ▼ 以下は2列並びを維持するためのコード（触らなくてOKです） */
html body #wrapper .productListBox{
display:flex !important;
flex-wrap:wrap !important;
justify-content:space-between !important;
gap:16px 0 !important;
}
html body #wrapper .productListBox .item{
width:48% !important;
max-width:48% !important;
flex:0 0 48% !important;
margin-right:0 !important;
margin-left:0 !important;
}
.productListBox .item .img img{
width:100% !important;
height:auto !important;
}
html body #wrapper .btn-wrap {
width:70% !important;
left:50% !important;
transform:translateX(-50%) !important;
}
html body #wrapper .comBtn1 {
font-size:10px !important;
height:35px !important;
line-height:40px !important;
padding:0 0px !important;
}
.productListBox .item .ttl img.prod-logo {
max-width: 90% !important;   /* スマホは枠が狭いので少し広めに使えるように */
max-height: 30px !important;  /* ★スマホの画面に合わせて、ロゴの最大の高さを少し小さく調整 */
margin: 8px auto 0 !important;
}
}

.middlePrev,
.middleNext{
	position: absolute;
	width: 54px;
	height: 54px;
	top: 50%;
	transform: translateY(-50%);
	background-color: #050507;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px auto;
	z-index: 5;
	cursor: pointer;
}
.middlePrev{
	left: 0;
	background-image: url(../common/img/ico_prev.png);
}
.middleNext{
	right: 0;
	background-image: url(../common/img/ico_next.png);
}

.movie iframe{
	width: 100%;
	height:600px;
}
.productInfo{
	margin-top: 80px;
}
.productInfo
.topInformationIn:after {
	display: none;
}

.onedrive{
	margin-top: 80px;
}
.onedrive p{
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
}
.page-product{
	padding-bottom: 80px;
}

.product-info .item{
	display: flex;
	flex-wrap: wrap;
	margin-top: 80px;
}
.product-info .item .img{
	width: 50%;
}

.product-info .item .img img{
	width: 100%;
}

.product-info .item .info{
	padding-left: 40px;
	width: 50%;
	padding-right: 20px;
	padding-top: 40px;
	padding-bottom: 40px;
	box-sizing: border-box;
	background-color: #fff;
}
.product-info .item .info .ttl{
	font-weight: 700;
	font-size: 24px;
	/*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;*/
}
.product-info .item .info .txt{
	margin-top: 40px;
	font-size: 16px;
	line-height: 1.5em;
}


.product-info .item:nth-child(even) .info{
	order:1;
	padding-right: 40px;
	padding-left: 20px;
	box-sizing: border-box;
}
.product-info .item:nth-child(even) .img{
	order:2;

}

.feature{
	margin-top: 80px;
}
.featureBox .img{
	max-width: 1100px;
	margin-top:80px;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
}
.spec{
	margin-top: 80px;
}

.specBox .img{
	max-width: 1500px;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
}

.option{
	margin-top: 80px;
}
.optionBox .txt{
	max-width: 1100px;
	margin-top:80px;
	margin-left:auto;
	margin-right:auto;
	line-height: 1.5em;
	font-size: 16px;
}
.gallery{
	margin-top: 80px;
}

.galleryBox{

	display: flex;
	flex-wrap: wrap;
}
.galleryBox .item{

	width: calc(25% - 20px);
	margin:40px 10px 0;
	background-color: #fff;
}
.galleryBox .item .img img{
	width: 100%;
	height: 160px;
	object-fit: cover;
}
.galleryBox .item .info{
	background-color: #fff;
	padding: 20px;
}

.galleryBox .item .ttl{
	text-align: center;
	font-size: 16px;
	background-color:#fff;
	font-weight: bold;
	position: relative;
}

.galleryBox .item .tagList{
margin-top: 20px;

}
.galleryBox .item .tagList a{
	display: inline-block;
	background-color: #333;
	padding:10px;
	color:#fff;
	border-radius: 20px;
	font-size: 14px;
	line-height: 1em;
	margin-bottom: 5px;
	margin-left: 5px;
}
.galleryBox .item .tagList a:hover{
	background-color: #e0e0e0;
	color: #000;
}


.main-catalog {
	display: flex;
	flex-wrap: wrap;
	margin-top: 40px;
}
.main-catalog .img {
	width: 40%;
}
.main-catalog .img img{
	width: 100%;
}
.main-catalog .info {
	width: 60%;
	padding-left: 20px;
}
.main-catalog .info .ttl {
	/*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;*/
	font-size: 24px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
.main-catalog .info .txt {
	font-size: 16px;
	list-style: 1.5em;
}
.main-catalog .info .console {
	background-color: #b9df90;
	border: #a0d468;
	color: #3c763d;
	padding: 15px;
	border-radius: 4px;
	margin-top: 20px;
}



.wp-pagenavi{
	margin: 20px 0 0;
	text-align: center;
}
.wp-pagenavi a, .wp-pagenavi span{
	display: inline-block;
	border: 1px solid #333;

	margin: 0 5px;
	box-sizing: border-box;
	text-align: center;
	font-size: 15px;
	line-height: 40px;
	width: 34px;
	color: #000;

}
.wp-pagenavi .current{

}
.wp-pagenavi .current,
.wp-pagenavi a:hover{
	color: #fff;
	background: #333;
}
.wp-pagenavi a.previouspostslink{
	width: 64px;
	border: 1px solid #333;
}
.wp-pagenavi a.nextpostslink{
	width: 64px;
	border: 1px solid #333;
}

.blogWrap{
	font-size: 16px;
	padding-top: 60px;
}

.mvTtlBlog {
	/* background-image: url(../img/top/mv1.jpg); */
	padding: 80px;
	text-align: center;
	font-size: 25px;
	line-height:1.5em;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	background-color: #333;
}
.mvTtlBlog
.date{
	font-size: 15px;
}

.eyecatch{
	max-width: 800px;
	margin: 0 auto;
}
.eyecatch img{
	width: 100%;
}

.blogWrap h1  {
	text-align:left;
	color: #000;
	padding: 0.5em 0;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
	font-size: 1.5rem;
	line-height: 1.5em;
	margin-bottom: 20px;
	margin-top: 40px;
}

.blogWrap h2 {
	text-align:left;
	background: #ccc;
	padding: 0.5em;
	font-size: 1.2rem;
	margin-bottom: 20px;
	margin-top: 40px;
}

.blogWrap h3 {
	text-align:left;
	padding: 0.25em 0.5em;
	color: #000;
	background: transparent;
	border-left: solid 5px #000;
	font-size: 1.1rem;
	margin-bottom: 20px;
	margin-top: 40px;
}

.blogWrap h4 {
	text-align:left;
	background: linear-gradient(transparent 70%, #ccc 70%);
	color: #000;
	font-size: 1.1rem;
	margin-bottom: 20px;
	margin-top: 40px;
}
.blogWrap iframe{
	width: 100% !important;
}

.breadcramb{
	background-color: #efefef;
	padding: 10px;
}
.breadcramb span,
.breadcramb a{
	margin-right: 10px;
	margin-left: 10px;
}
.breadcramb a{
	text-decoration: underline;
}
.breadcramb a:hover{
	text-decoration: none;
}
.breadcramb span{
	font-weight:700;
}

.topInformation .list {
	flex: 1;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0 40px 0 40px;
	scrollbar-color: #959595 #E6E6E6;
	scrollbar-width: thin;
}
.topInformation .list li{
	display: flex;
}
.topInformation .list li + li{
	margin: 18px 0 0;
}
.topInformation .list li .date{
	width: 120px;
	font-size: 13px;
	line-height: 25px;
	color: #959595;
	font-family: 'Lato', sans-serif;
	font-weight: 500;
}
.topInformation .list li .txt{
	flex: 1;
}
.topInformation .list li .txt a{
	font-size: 16px;
	line-height: 25px;
	/*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;*/
	font-weight: bold;
}
.lower-box{
	font-size: 16px;
}
.lower-box p:first-child{
	margin-top: 80px;
}

.btn-wrap{
	max-width: 400px;
	margin: 0 auto;
}
.lower-box .ttl {
	/*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;*/
	font-size: 24px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-top: 40px;
}
.lower-box .ttl2 {
    font-size: 35px;
    font-weight: bold;
    padding: 10px 10px 0px 10px !important;
    background-color: #fff;
    position: relative !important;
    display: table !important;
    margin: 50px auto 40px auto !important;
    text-align: center !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
}

/* 疑似要素（アンダーライン）の配置 */
.lower-box .ttl2::after {
    content: "" !important;
    position: absolute !important;
    bottom: -35px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important; 
    height: 50px !important; 
    background-image: url('https://www.hotstuff-cp.co.jp/wp-content/uploads/2026/07/f5ece37c624415905f95c23b71081610.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% 100% !important;
    border-bottom: none !important;
	z-index: -1 !important;
}
.voice-wrapper h3.ttl2::after {
    display: none !important;
    content: none !important; 
}

/* ペンキが消えたことで詰まる下側の余白を綺麗に調整 */
.voice-wrapper h3.ttl2 {
    padding-bottom: 0 !important; 
    margin-bottom: 40px !important;  
}

.lower-box .ttl-large {
	/*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;*/
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	padding-top: 80px;
	margin-bottom: 40px;
}

.lower-box .p-txt {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}

.lower-box table{
	font-size: 20px;
	line-height: 1.5em;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 40px;
}
.lower-box table tr{}
.lower-box table th{
	width: 280px;
	background-color: #333;
	padding: 10px;
	color: #ffffff !important;
	border-bottom: 2px solid #ffffff;
}
.lower-box table td{
	padding: 10px;
	background-color: #fff;
}
/*
.lower-box table .head th{
	width: auto;
	background-color: #333;
	color: #fff;
}
*/
/* 1. th（所在地）自体の横幅を、無理やり右端まで100%に広げてしまう */
.lower-box table .head th {
    display: block !important;          /* テーブルのマス目という性質を捨てて、1枚の横長看板に変える */
    width: 100% !important;             /* 横幅を100%（右端まで）に強制拡大 */
    box-sizing: border-box !important;  /* はみ出し防止 */
    
    background-color: #333 !important; /* ★ここで好きな色を指定（黒なら #333） */
    color: #fff !important;               /* 文字色（白抜き） */
    
    padding: 12px 20px !important;       /* 上下と左側に綺麗な余白を作る */
    text-align: left !important;         /* 文字を左寄せにする */
}

/* 2. 万が一、テーブル全体の枠が縮んでいる時のための保険 */
.lower-box table,
.lower-box table thead,
.lower-box table .head {
    display: block !important;
    width: 100% !important;
}

.console{
	text-align: center;
	margin-bottom: 40px;
}

.lower-box
.img-box{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	margin-bottom: 40px;
}

.lower-box
.img-box img{
	width: 100%;
}

.lower-box table ul{}
.lower-box table ul li{
	display: flex;
	padding: 10px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
}
.lower-box table ul li span{
	font-weight: bold;
	display: block;
	min-width: 150px;
}

.cp-img{
	display: flex;
	flex-wrap: wrap;
}

.cp-img .item{
	width: 49%;
	margin: .5%;
}

.cp-img .item img{
	width: 100%;
}

.staff-list{
	display: flex;
	flex-wrap: wrap;
}
.staff-list a{
	width: calc(33% - 10px);
	margin: 10px 5px 0;
}
.staff-list a .img{

}


.staff-list a .img img{
	width: 100%;
}
.staff-box{
	border-top:2px solid #ccc;
	padding-top: 40px;
	margin-top: 40px;
	position: relative;
}
.staff-list a .txt{
	padding: 10px;
	/*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;*/
	font-size: 20px;
	background-color: #333;
	color: #fff;
}

.staff-box .eng_bg{
	left: -10vw;
	top: 10vh;
	position: absolute;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 70vh;
	height: 100%;
	z-index: 0;
	color: #ccc;
	line-height: 1em;

}
#staff3 .eng_bg{
	top: -44vh;
	transform   : scale(1, 0.5);
}
.staff-ttl{
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-color: #333;
	color: #fff;
	max-width: 900px;
	margin: 0 auto;
}
.staff-ttl .name{
	width: 30%;

	font-size: 24px;
	box-sizing: border-box;
	padding-left: 20px;

}
.staff-ttl .name span{
	/*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;*/
	font-size: 40px;
	font-weight: bold;
	display: block;
}
.staff-ttl .img{
	width: 70%;
}
.staff-ttl .img img{
	width: 100%;
}

div.demo-card {
	border-top: 5px solid #ef6b6b;
	display: flex;
	flex-wrap: wrap;
	margin-top: -24px;
	align-items: center;
	background-color: #fff;
	padding: 20px;
	max-width: 550px;
	position: relative;
	box-shadow: 0 8px 56px rgb(49 49 49 / 20%);
}

div.demo-card:nth-child(even){
	margin-right: calc(100% - 550px);
}
div.demo-card:nth-child(odd){
	margin-left: calc(100% - 550px);
}
.demo-card-wrapper{
	position: relative;
	z-index: 1;
	padding-top: 80px;
}
.demo-card-wrapper:before {
	z-index: 0;
	content: "";
	width: 50%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	border-right:#acacac 3px solid;
}

div.demo-card:nth-child(even)::before {
	content:"";
	position: absolute;
	width: 0;
	height: 0;
	right:-25px;
	top:50%;
	margin-top: -25px;
	border-style: solid;
	border-width: 25px 0 25px 25px;
	border-color: transparent transparent transparent #ffffff;
}
div.demo-card:nth-child(odd)::before {
	content:"";
	position: absolute;
	width: 0;
	height: 0;
	left:-25px;
	top:50%;
	margin-top: -25px;
	border-style: solid;
	border-width: 25px 25px 25px 0;
	border-color: transparent #ffffff transparent transparent;
}

div.demo-card:nth-child(odd)::after {
	content: "";
	position: absolute;
	top:50%;
	left: -55px;
	margin-top: -10px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #acacac;

}

div.demo-card:nth-child(even)::after {
	content: "";
	position: absolute;
	top:50%;
	right: -57px;
	margin-top: -10px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #acacac;

}

div.demo-card div.head {
	width: 250px;
}
div.demo-card div.head div.number-box {
	font-weight: bold;
}

div.demo-card div.head .text{
	font-size: 14px;
	margin-top: 15px;
}

div.demo-card div.head div.number-box span {
	/*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;*/
	font-size: 20px;
	border: 3px solid #333;
	padding: 8px;
	margin-right: 10px;
	border-radius: 27px;
}
div.demo-card div.head h2 {
	font-weight: bold;
	font-size: 20px;
	padding-right:20px ;
}
div.demo-card div.head h2 span.small {
}
div.demo-card div.body {
	width: calc(100% - 250px);
}
div.demo-card div.body p {
	margin-top: 0 !important;
	background-color: #333;
	color: #fff;
	padding: 20px;
	border-radius: 10px;
	position: relative;
}
div.demo-card div.body p:after{
	content: "";
	position: absolute;
	right: 0;
	bottom: -20px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
	border-width: 20px 20px 0 20px;
}
div.demo-card div.body img {
	margin-top: 0px;
	width: 100%;
}

.interview-box{
	display: flex;
	flex-wrap: wrap;
	margin-top: 40px;
	padding: 10px;
	position: relative;

}
.interview-box .interview{
	width: calc(50% - 10px);
	margin: 0px 5px 10px;
	padding: 20px;
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: 0 8px 56px rgb(49 49 49 / 20%);
}
.interview-box .interview .ttl{
	margin-top: 0 !important;
	background:linear-gradient(transparent 60%, #fcf87e 60%);
	/*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;*/
	font-size: 24px;
	border-bottom: none;
	padding-bottom: 0px;
	margin-bottom: 20px;
}
/*
.voice{
	display: flex;
	flex-wrap: wrap;
	margin-top: 40px;
	padding: 10px;
}

.voice {
	display: flex !important;
	flex-wrap: wrap !important;
	overflow: visible !important; 
	padding-right: 15px !important; 
	box-sizing: border-box;
}

.voice>div{
	width: calc(25% - 14px);
	min-height: 170px; 
	margin: 0px 5px 16px;
	padding: 20px;
	box-sizing: border-box;
	background-color: #fff;
	font-size: 20px;
	font-weight: bold;
	box-shadow: 0 8px 56px rgb(49 49 49 / 20%);
}

.voice>div span{
	font-size: 15px;
	display: block;
	font-weight: normal;
	margin-top: 10px;
}
*/

/* 社員の声 全体の並び（横4並びのルールを維持） */
.voice {
	display: flex !important;
	flex-wrap: wrap !important;
	overflow: visible !important; 
	padding-right: 15px !important; 
	box-sizing: border-box;
	justify-content: center !important; /* 全体を中央寄せ */
}

/* クローバー枠のカード型デザイン */
.voice-card {
	width: calc(25% - 14px); /* パソコン時は横に4並び */
	min-height: 200px; /* 縦横のバランスを整えるための高さ */
	margin: 0px 5px 16px;
	box-sizing: border-box;
	
	/* ★ここにクローバーの画像URLを入れてください */
	background-image: url(https://www.hotstuff-cp.co.jp/wp-content/uploads/2026/07/2100d20f961a6d9d8e2d5d7012b149f1.jpeg) !important;
	background-size: 100% 100% !important; /* 文字量に合わせて枠を自動伸縮 */
	background-repeat: no-repeat !important;
	background-position: center !important;
	
	/* 内側の余白：文字がクローバーの線に被らないように広めに確保 */
	padding: 35px 25px 25px 25px !important;
	
	/* 中の要素を上下できれいに配置するための設定 */
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
}

/* カード内のテキスト（上の文字） */
.voice-txt {
	font-size: 20px !important; /* 枠線に被らないよう、元の20pxから少し調整 */
	font-weight: bold !important;
	color: #333333 !important;
	line-height: 1.5 !important;
	margin: 0 0 10px 0 !important;
	text-align: left !important;
}

/* カード内の主（下の年齢・職種） */
.voice-author {
	font-size: 14px !important;
	color: #555555 !important;
	font-weight: normal !important;
	margin: 0 !important;
	text-align: right !important;
	margin-top: auto !important; /* 自動的に一番下へ配置 */
	padding-right: 15px !important;
}

/* 【スマホ・タブレット対応】画面幅が狭い時の設定 */
@media screen and (max-width: 767px) {
/* 親要素を縦並びに変更する */
    div.voice {
        display: flex !important;
        flex-direction: column !important; /* 子要素を縦一列に並べる */
        align-items: center !important;    /* 中央に揃える */
        gap: 20px !important;              /* カードとカードの間の上下の隙間 */
    }

    /* 各カードの横幅を100%（1コ並び）にする */
    div.voice .voice-card {
        width: 100% !important;
        max-width: 100% !important; /* もし最大幅が固定されていたらの対策 */
        padding: 35px 30px 20px 40px !important; /* 前回の左右均等余白 */
        box-sizing: border-box !important;
    }
}

.dummy {
	width: 70vw;
	margin: 20px auto;
}

label.link {
	cursor: pointer;
	color: #333;
	text-decoration: none;
}

/* 初期非表示用 */
.modal .modal-check:checked + .modal-body {
	display: none;
}

.modal .modal-check {
	display: none;
}
.modal .modal-body {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.2);
	z-index: 100000;
}
.modal .modal-window {
	position: relative;
	z-index: 100001;
	animation: fadein 0.3s 1, zoomin 0.3s 1;
}
.modal .modal-label {
	position: absolute;
	top: -20px;
	right: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	background: #ccc;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: #fff;
}
.modal .modal-label:hover {
	background: #ccc;
}
.modal .modal-label:active {
	background: #ccc;

}
.modal .modal-label svg {
	display: flex;
	align-items: center;
	fill: #fff;
}
.modal .modal-inner {
	width: auto !important; 
	max-width: 80vw !important;  /* 💡 画面横幅の80%を超えないように制限 */
	max-height: 80vh !important; /* 💡 画面縦幅の80%を超えないように制限 */
	
	/* 🛠️ 追記：この内側の余白（padding）が、スマホと同じ「白い余白」を作ります */
	padding: 20px !important;    /* 💡 上下左右に20pxの白い余白を強制的に作る */
	
	background: #fff;
	border-radius: 3px;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
	
	/* 🛠️ 変更：切り取らず、中身を綺麗に縮小して収める設定 */
	overflow: visible !important; 
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	
	/* 画面の真ん中に浮かせる */
	margin: auto !important;
}
.modal .modal-inner img {
	width: 80vw !important;      /* 💡元のサイズ（画面横幅の80%）に固定 */
	max-height: 80vh !important; /* 💡画面縦幅の80%（ここが絶対の天井） */
	max-width: 1200px !important;
	background: #fff !important;
	border-radius: 3px !important;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2) !important;
	
	/* 🛠️ 修正：はみ出たものは絶対に見せない＆中央配置 */
	overflow: hidden !important; 
	margin: auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}
.modal .modal-content {
padding: 20px !important;    /* スマホと同じ白いフチ（余白） */
	width: 100% !important;      /* 外枠の幅いっぱいに縮める */
	height: 100% !important;     /* 外枠の高さいっぱいに縮める */
	max-width: 100% !important;  /* 💡絶対にはみ出させない */
	max-height: 100% !important; /* 💡絶対にはみ出させない */
	
	/* 🛠️ 追記：中の要素のサイズ崩れを防ぐ */
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}
.modal .modal-content img,
.modal .modal-inner img {
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
	margin: auto !important;
}
.modal .modal-check:checked + .modal-body {
	animation: fadeout 0.2s 1 forwards, hide 0.1s 0.2s 1 forwards;
}
.modal .modal-check:checked + .modal-body .modal-window {
	animation: zoomout 0.2s 1 forwards;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes zoomin {
	0% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes zoomout {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.9);
	}
}
@keyframes hide {
	0% {
		visibility: visible;
	}
	100% {
		visibility: hidden;
	}
}


.sitemap-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	line-height: 1.8em;
}
.sitemap-wrap>div{
	width: 49%;
	background-color: #fff;
	padding: 20px;
}

.sitemap-wrap a{

	text-decoration: underline;
}
.sitemap-wrap a:hover{
	text-decoration: none;
}

.calender{
	padding-left: 20px;
	color: #fff;
	width: 270px;
}

.calender h3{
	color: #fff;
}

#biz_calendar table.bizcal .holiday {
	background-color: #cd4545;
}

#biz_calendar p span.boxholiday {
	background-color: #cd4545;
}


@media screen and (max-width: 767px) {
	div.demo-card:nth-child(odd)::before {
		display: none;
	}
	div.demo-card:nth-child(even)::before {
		display: none;
	}
	div.demo-card:nth-child(odd)::after {
		display: none;
	}
	div.demo-card:nth-child(even)::after {
		display: none;
	}
	div.demo-card {

		margin-top: 20px;
	}
	div.demo-card:nth-child(even){
		margin-right: 0;
	}
	div.demo-card:nth-child(odd){
		margin-left: 0;
	}

	.interview-box .interview .ttl {
		font-size: 18px;
		font-weight: bold;
	}

	.calender h3{
		text-align: center;

	}
	.sitemap-wrap>div{
		width: 100%;
		margin-bottom: 20px;
	}


	.middleSliderBox .img,
		.one-image .img
	{
		height: 300px;
	}

	.modal .modal-inner {
		width: 100vw !important;
		height: auto !important;    
		max-height: 100vh !important;
		margin: auto !important;
		padding: 0px !important;
		background: transparent !important;
	}
	.modal .modal-content {
		padding: 0px !important;    /* 💡 paddingを完全に0にして画像スペースを最大化 */
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 100% !important;
	}
	.modal .modal-content img,
	.modal .modal-inner img {
		width: 100% !important;      
		max-width: 100% !important;
		max-height: 92vh !important;  /* 縦長画像でも上下が少しだけ余裕を持つように */
	}
	.movie iframe{

		height:300px;
	}

	.productListBox .item {
		width: calc(50% - 20px);

	}

	.comTit2 .txt {
		font-size: 24px;

	}
	.product-info .item{
		margin-left:15px;
		margin-right:15px;
	}
	.product-info .item .img {
		width: 100%;
	}

	.product-info .item .info {
		padding-left: 20px;
		width: 100%;
		padding-right: 20px;

	}
	.product-info .item:nth-child(even) .info{
		order:2;
		padding-right: 20px;
		padding-left: 20px;
		box-sizing: border-box;
	}
	.product-info .item:nth-child(even) .img{
		order:1;

	}

	.galleryBox .item {
		width: calc(100% - 20px);
		margin: 40px 10px 0;
	}

	.main-catalog .img {
		width: 100%;
	}
	.main-catalog .img img{
		width: 100%;
	}
	.main-catalog .info {
		width: 100%;
		padding-left: 0px;
	}

	.main-catalog .info {
		margin-top: 20px;
	}
	.main-catalog .info .console {
		font-size: 16px;
	}

	.lower-box .ttl-large {
		font-size: 27px;
	}

	.topInformation .list{
		padding: 0 20px 0 0;
		border-left: none;
	}
	.topInformation .list::-webkit-scrollbar{
		width: 8px;
		border-radius: 4px;
	}
	.topInformation .list::-webkit-scrollbar-thumb{
		border-radius: 4px;
	}
	.topInformation .list li{
		display: block;
	}
	.topInformation .list li + li{
		margin: 8px 0 0;
	}
	.topInformation .list li .date{
		width: 100%;
		font-size: 13px;
		line-height: 16px;
		margin: 0 0 8px;
	}
	.topInformation .list li .txt a{
		font-size: 16px;
		line-height: 24px;
	}

	.cp-img .item{
		width: 100%;
		margin: 0%;
		margin-bottom: 10px;
	}

	.lower-box .p-txt {
		font-size: 20px;
		text-align: left;
	}
	.lower-box .ttl2 {

		font-size: 22px;

	}

	.staff-list a .txt {
		padding: 10px;
		font-size: 17px;
	}
	.staff-list a {
		width: calc(33.333% - 10px);
		margin: 10px 5px 0;
	}

	.staff-ttl .name{
		width: 100%;

		font-size: 15px;
		padding: 10px;

	}
	.staff-ttl .name span{
		font-size: 20px;

	}
	.staff-ttl .img{
		width: 100%;
	}

	div.demo-card div.head {
		width: 100%;
		padding-bottom: 10px;
	}
	div.demo-card div.body {
		width: 100%;
	}
	.interview-box .interview {
		width:100%;

	}
	.voice>div {
		padding: 10px;
		width: calc(50% - 10px);
		margin: 0px 5px 10px;
		font-size: 18px;
	}
	.staff-box .eng_bg{
	display: none;
	}
	
	.specBox .img {
        width: 100% !important;
        overflow-x: auto !important;          /* 💡はみ出したら横スクロールを許可 */
        -webkit-overflow-scrolling: touch;   /* スマホで滑らかにスクロールさせる */
        margin-bottom: 20px;
    }
    .specBox .img img {
        max-width: none !important;           /* 💡画面幅にギュッと縮小されるのを解除 */
        width: 850px !important;              /* 💡画像が綺麗に読める横幅をキープ */
        height: auto !important;
        display: block !important;
    }
}

.form-wrap{
	max-width: 800px;
	margin: 80px auto 0;
	text-align:left;
}
	.modal .modal-inner {
		width: 80vw !important;
		max-height: 80vh !important;
		max-width: 1200px !important;
	}
	/* 🛠️ 強制上書き：PC大画面のときだけ、画面の75%に縮めて余白を作る */
	.modal .modal-content img,
	.modal .modal-inner img {
		max-width: 75vw !important;
		max-height: 75vh !important;
	}
}

/* Chronusを含め、すべての子メニュー（右展開）の基準位置を上辺に強制固定 */
#header #headerlinks ul.subul > li {
    position: relative !important;
}

#header #headerlinks ul.subul > li > ul.subul2 {
    top: 0 !important;
    bottom: auto !important;
    transform: none !important;
}


/* =========================================================
   ✨ ③ スライドイン・フェード（横方向の疾走感）
========================================================= */
#header #headerlinks .product .subul {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    
    /* 💡 最初は左側（-20px）にずらしておく */
    transform: translateX(-20px);
    
    /* 動き出しが早く、後半に滑らかに止まるイージング */
    transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                visibility 0.35s;
}

/* マウスが乗ったとき */
#header #headerlinks .product:hover .subul {
    opacity: 1;
    visibility: visible;
    transform: translateX(0); /* 定位置にスッと滑り込む */
}

/* 右側メニューの干渉防止 */
#header #headerlinks .subul > li .subul2 { max-height: none !important; overflow: visible !important; }


.productListBox .item .ttl img.prod-logo {
    width: auto !important;
    height: auto !important;
    max-width: 65% !important;
    max-height: 25px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 10px auto 0 !important;
}

/* 採用ページ：Instagram誘導ボタンの個別調整 */
.recruit-btn-group .instaBtn {
    background: #333333 !important; /* メインボタン（赤系など）を引き立てるシックな黒/濃いグレー */
    border-color: #333333 !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.recruit-btn-group .instaBtn:hover {
    background: #e1306c !important; /* ホバーした時だけ、インスタ公式のグラデーション風（マゼンタ系）に妖しく光る */
    border-color: #e1306c !important;
    opacity: 0.9;
}

/* スマホ等で画面幅が狭い時、2つのボタンがピタッとくっつきすぎないように縦の余白を確保 */
@media screen and (max-width: 550px) {
.recruit-btn-group {
        flex-direction: column !important;
        align-items: center !important;
        bottom: 15px !important; /* ボタン全体の位置を少し下に下げて画像に収める */
        gap: 8px !important;     /* ボタン同士の上下の間隔を少し詰める */
    }
    .recruit-btn-group .comBtn1 {
        width: 60% !important;     /* 横幅を少しすっきりさせる（100%から縮小） */
        max-width: 180px !important; /* ボタンの最大横幅を小さく制限 */
        font-size: 12px !important;  /* ★文字のサイズを少し小さくしてボタン全体をスリムに */
        padding: 10px 0 !important;  /* ★ボタンの上下のぷっくり感を抑えてスマートに */
        height: auto !important;
        line-height: 1.4 !important;
    }
}

/* バナーとQRを横並びにしてくっつけるための設定 */
.mynavi a.mynavi-block {
    display: flex !important;
    align-items: center !important;
    gap: 0px !important; /* バナーとQRの間のすき間（お好みで0にしてもOK） */
    text-decoration: none !important;
}

html body .mynavi a.mynavi-block img.banner-img {
    width: 135px !important;       /* 👈 ここに希望の横幅を入れてください（例: 130px や 64px） */
    height: 135px !important;      /* 👈 ここに希望の縦幅を入れてください */
    min-width: 135px !important;   /* 他のCSSに潰されるのを防ぐ */
    max-width: 135px !important;   /* サイズを固定 */
    object-fit: contain !important;
}

/* ② QRコード画像（縦幅をバナーの64pxに合わせることで綺麗にくっつきます） */
html body .mynavi a.mynavi-block img.qr-img {
	width: 135px !important;       /* コメントに合わせて64pxに修正 */
    height: 135px !important;      /* バナーの縦幅と揃える */
    min-width: 135px !important;   /* 他のmax-width:100%などに潰されるのを防ぐ */
    max-width: 135px !important;   /* サイズを強制固定 */
    object-fit: contain !important;
}

/* 【スマホ対応】スマホの時はQRコードを非表示にしてバナーだけにする場合（おすすめ） */
@media screen and (max-width: 768px) {
    .mynavi a.mynavi-block img.qr-img {
        display: none !important; /* スマホではQRコードはタップできないので隠す */
    }
    .mynavi a.mynavi-block img.banner-img {
        width: 160px !important; /* スマホで見やすいサイズに調整 */
        height: auto !important;
    }
}
/* ==========================================================================
   Recruit Instagram Area
   ========================================================================== */

div.recruit-insta-area {
    width: 100% !important;
    max-width: 100% !important;        /* これで大元の箱（lower-box）の中で目一杯広がります */
    margin: 50px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

p.recruit-insta-tit {
    font-size: 25px !important;
    font-weight: bold !important;
    text-align: center !important;
    margin-bottom: 25px !important;
    color: #333 !important;
    letter-spacing: 0.05em !important;
    
    /* ★幅を100%ではなく「文字の長さ」に合わせることで、アイコンを文字のすぐ左に固定します */
    width: max-content !important; 
    max-width: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* ★アイコンのサイズと位置の微調整 */
    background: url('/wp-content/themes/hotstuff/common/img/ico_ig.svg') no-repeat left center !important; 
    background-size: 20px auto !important; /* ★デカすぎるのを少しきゅっと小さく（20px）調整 */
    padding-left: 28px !important;          /* ★アイコンと文字の間の距離（隙間）を縮めます */
    box-sizing: border-box !important;
}

div.recruit-insta-area ul.recruit-insta-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important; /* 左右いっぱいに引き伸ばして整列 */
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    clear: both !important;
}

div.recruit-insta-area ul.recruit-insta-grid li {
    display: block !important;
    float: none !important;
    width: calc((100% - (15px * 3)) / 4) !important; 
    max-width: calc((100% - (15px * 3)) / 4) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

div.recruit-insta-area ul.recruit-insta-grid li a {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
}

div.recruit-insta-area ul.recruit-insta-grid li a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: opacity 0.3s ease !important;
}

div.recruit-insta-area ul.recruit-insta-grid li a:hover img {
    opacity: 0.8 !important;
}

/* Responsive
   ========================================================================== */
@media screen and (max-width: 767px) {
    div.recruit-insta-area ul.recruit-insta-grid {
        flex-wrap: wrap !important;
    }
    div.recruit-insta-area ul.recruit-insta-grid li {
        width: calc((100% - 15px) / 2) !important; 
        max-width: calc((100% - 15px) / 2) !important; 
    }
    p.recruit-insta-tit {
        font-size: 15px !important;
        line-height: 1.4 !important;
        background-size: 16px auto !important; /* スマホではさらに一回り小ぶりに */
        padding-left: 24px !important;          /* スマホの文字サイズに合わせて隙間も調整 */
    }
}
/* スマホの時（画面幅767px以下）のアイコンサイズ調整 */
@media screen and (max-width: 767px) {
    .recruit-insta-area .ttl2 .ico-instagram {
        width: 18px !important; /* ここでお好みのサイズ（18pxや40pxなど）に調整してください */
		transform: translateY(6px) !important;
    }
}
/* ===================================================
   応募フォーム：横幅 1352px ＆ 自動挿入pタグ完全撃破設定
=================================================== */

/* 1. 全体の横幅を1352pxに固定 */
div.form-wrap,
.h-adr,
.cf7-container {
    max-width: 1352px !important; 
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* 2. 縦並び・2カラム構造を解除 */
.cf7-container div.cf7-row {
    display: block !important;
    width: 100% !important;
}

/* 3. ラベルと入力欄の親要素 */
.cf7-container div.cf7-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;   
    width: 100% !important;           
    margin-bottom: 30px !important;   
    float: none !important;
}

/* テキストエリア（職歴や志望動機など）の場合は、上揃えにする */
.cf7-container div.cf7-row.cf7-full div.cf7-col {
    align-items: flex-start !important; 
}


/* ===================================================
   左側：項目名（ラベル）の設定
=================================================== */
.cf7-container p.cf7-label {
    width: 22% !important;            
    min-width: 220px !important;      
    margin: 0 !important;
    font-size: 22px !important;       
    font-weight: bold !important;     
    color: #333333 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-right: 25px !important;   
    box-sizing: border-box !important;
	justify-content: flex-end !important;
}

/* 「必須」を赤いバッジで強調する */
.cf7-container p.cf7-label span.must {
    background-color: #ff0000 !important; 
    color: #ffffff !important;            
    font-size: 14px !important;           
    font-weight: bold !important;
    padding: 4px 10px !important;         
    border-radius: 4px !important;        
    margin-left: 12px !important;         
    display: inline-block !important;
    line-height: 1 !important;
    white-space: nowrap !important;        
}


/* ===================================================
   右側：【大修正】自動挿入されたpタグごと右端へ広げる
=================================================== */
/* ラベルの右隣にある、CF7が勝手に作ったpタグを限界まで広げる */
.cf7-container div.cf7-col > p:not(.cf7-label) {
    flex: 1 !important;               /* これで右側の余りスペースをすべて埋めます */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;             /* テーマのpタグの余白をリセット */
    padding: 0 !important;
    display: block !important;
}

/* ボックスを囲むspanタグも100%広げる */
.cf7-container .wpcf7-form-control-wrap {
    width: 100% !important;           
    max-width: none !important;       
    display: block !important;
}

/* 入力ボックス自体を右端にピッタリ密着させる */
.cf7-container input[type="text"],
.cf7-container input[type="email"],
.cf7-container input[type="tel"],
.cf7-container input[type="date"],
.cf7-container select,
.cf7-container textarea {
    background-color: #ffffff !important; 
    border: 1px solid #cccccc !important; 
    border-radius: 5px !important;         
    padding: 15px 18px !important;        
    font-size: 20px !important;           
    color: #333333 !important;            
    display: block !important;
    width: 100% !important;            
    max-width: none !important;        
    box-sizing: border-box !important;
    height: auto !important;              
}

/* ラジオボタン（性別） */
.cf7-container .wpcf7-radio {
    display: flex !important;
    gap: 25px !important;                 
    font-size: 20px !important;           
    font-weight: bold !important;
}
.cf7-container input[type="radio"] {
    width: 20px !important;               
    height: 20px !important;
    margin-right: 8px !important;
    display: inline-block !important;
}

/* 送信ボタンの上の余白 */
.btn_contact7 {
    padding-top: 50px !important;
}

/* 送信ボタンの横幅とホバー時の動きをカチッと固定 */
html body .btn_contact7 input {
    width: 50% !important;        /* ボタン自体の横幅（お好みで調整してください） */
    max-width: 400px !important;  
    margin: 0 auto !important;
    display: block !important;
    background-color: #333333 !important; /* ボタンの背景色（黒） */
    color: #ffffff !important;            /* 文字色（白） */
    padding: 15px 30px !important;
    font-size: 20px !important;
    border-radius: 5px !important;
    border: 1px solid #333333 !important;
}

html body .btn_contact7 input:hover {
    background-color: #ffffff !important; /* マウスを乗せたときは白背景 */
    color: #333333 !important;            /* 文字は黒 */
}
/* ===================================================
   📱 スマホ対応
=================================================== */
@media screen and (max-width: 768px) {
    .cf7-container div.cf7-col {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .cf7-container p.cf7-label {
        width: 100% !important;
        margin-bottom: 10px !important;
        padding-right: 0 !important;
        font-size: 18px !important;
		justify-content: flex-start !important;
    }
    .cf7-container div.cf7-col > p:not(.cf7-label),
    .cf7-container .wpcf7-form-control-wrap {
        width: 100% !important;
    }
    .cf7-container input[type="text"],
    .cf7-container input[type="email"],
    .cf7-container input[type="tel"],
    .cf7-container input[type="date"],
    .cf7-container select,
    .cf7-container textarea {
        font-size: 16px !important;       
        padding: 12px !important;
    }
	/* 送信ボタンがスマホ画面からはみ出さないように調整 */
    html body .btn_contact7 input {
        width: 90% !important;        /* スマホでは横幅を広くして文字を収める */
        font-size: 18px !important;    /* 文字サイズを少しだけ小さく調整 */
        padding: 12px 20px !important; /* ボタンのクッションをスマホ用に微調整 */
        letter-spacing: 0.1em !important; /* 文字の間隔を少し詰めてはみ出し防止 */
    }
}