#sp-menu,
.hamb,
.top-catch-pic-sp,
.top-scroll-indicator-sp,
.btn-italia-sp {
	display: none;
}

.image-responsive {
	max-width: 100%;
	height: auto;
}


@media (max-width: 1200px) {
	:root {
		--padding-responsive: 70px 0 50px;
	}
	.service {
		width: 240px; /* 2026/03/16 */
	}	
	.services-icons {
		/* grid-template-columns: repeat(3, 180px);	 */ /* del arai 2026/03/13 */
		grid-template-columns: repeat(3, 220px);	/* add arai 2026/03/13 */
		gap: 30px;
		justify-content: center;
	}

	.pc-nav-links {
		gap: 15px;
	}

	.top-cards {
		gap: 30px;
		overflow-x: auto;
		padding-bottom: 10px;
	}

	.top-catch::before {
		display: none;
	}

	.top-catch {
		background: url(images/top-swipe_fade.svg) top 40px right no-repeat;
		background-size: auto 370px;
	}
	.top-catch-pic-sp {
		display: block;
		margin: 30px auto 80px auto;
	}
	.top-labellavita {
		width: 60%;
	}

	.top-catch .content-container {
		height: auto;
		justify-content: start;
		align-items: flex-start;
		background: none;
		max-width: 780px;
	}

	.top-catch .content-container .top-scroll-indicator {
		display: none;
	}
	.top-scroll-indicator-sp {
		--bar-length: 80px;
		--stub-length: 16px;
		display: block;
		position: static;
		margin: auto;
		transform: translateX(-50%) rotate(90deg);
	}
	.top-scroll-indicator-sp::before {
		font-size: 12px;
	}

	.top-catch h2 {
		margin: 0;
		font-size: 45px;
		line-height: 1.6;
	}

	.top-gazusage {
		padding-top: 55px;
	}

	.top-gazusage-emergency {
		margin-top: 35px;
		margin-left: 0;
		margin-right: 0;
	}

	.top-gazusage-buttons {
		flex-direction: column;
		gap: 20px;
	}

	.top-gazusage-emergency .btn-warning {
		width: 265px;
		padding: 1.5em 3em;
		font-size: 16px;
	}

	.top-services {
		padding: var(--padding-responsive);
	}

	.top-services-title {
		margin-bottom: 30px;
	}

	.top-reform {
		padding: var(--padding-responsive);
	}
	.top-reform-title {
		margin-bottom: 30px;
	}
	.top-reform-title a {
		display: none;
	}

	.top-news {
		padding: var(--padding-responsive);
	}

	.message-sign {
		margin-top: 30px;
		width: 230px;
	}
	.page-about .president-sign {
		width: 230px;
	}

	.letter-from-italy {
		padding: var(--padding-responsive);
	}
	/* add arai 2026/03/13 */
	.service {
		width: unset;
	}
}

@media (max-width: 1000px) {
	header {
		--header-size: 60px;
	}
	header .logo img {
		height: 35px;
	}
	.header-pc {
		height: var(--header-size);
	}
	header .pc-nav {
		display: none;
	}

	.footer-cols nav {
		display: none;
	}

	.hamb {
		position: fixed;
		z-index: 99;
		display: flex;
		flex-direction: column;
		gap: 12px;
		top: 23px;
		right: 30px;
	}
	.hamb .line {
		height: 3px;
		width: 35px;
		border-radius: 3px;
		background: black;
		transition: 0.2s all ease;
	}

	.hamb.active .line:first-child {
		transform-origin: center center;
		transform: translateY(8px) rotate(45deg);
	}
	.hamb.active .line:last-child {
		transform-origin: center center;
		transform: translateY(-7px) rotate(-45deg);
	}

	#sp-menu.open {
		position: fixed;
		z-index: 90;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		background: #eee;
	}

	#sp-menu.open .logo {
		height: var(--header-size);
		background: white;
		box-shadow: 0 2px 5px rgba(100, 100, 100, 0.5);
		display: flex;
		align-items: center;
		padding: 0 var(--width-safe-padding);
	}
	#sp-menu.open .logo img {
		display: block;
		height: 35px;
		margin-top: -4px; /* 無理やり...*/
	}

	.sp-menu-container {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow-y: auto;
	}

	.sp-nav-buttons {
		display: flex;
		gap: 15px;
		padding: 30px;
		/* justify-content: space-around; */
	}
	.sp-nav-buttons .btn {
		padding: 15px 30px;
	}

	.sp-nav ul {
		display: flex;
		flex-direction: column;
		gap: 1px;
		background: white;
	}
	.sp-nav>ul {
		padding-top: 1px;
		padding-bottom: 1px;
	}
	.sp-nav ul li {
		background: #eee;
		padding: 15px 30px;
	}
	.sp-nav li.chevron-right { /* merge? */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sp-nav li.chevron-right::after {
		content: "";
		display: block;
		height: 12px;
		width: 12px;
		border-top: 1px solid var(--color-accent1);
		border-right: 1px solid var(--color-accent1);
		transform: rotate(45deg);
	}
	.sp-nav li a {
		display: block;
		flex: 1;
		color: black;
	}

	/* sub-menu */
	.sp-nav .plus-right {
		position: relative;
	}
	.sp-nav .plus-right::before {
		position: absolute;
		top: 15px;
		right: 25px;
		transform: translateY(11px);
		content: "";
		height: 1px;
		width: 24px;
		background: var(--color-accent1);
	}
	.sp-nav .plus-right::after {
		position: absolute;
		top: 15px;
		right: 25px;
		transform: translateX(-11px);
		content: "";
		height: 24px;
		width: 1px;
		background: var(--color-accent1);
	}
	.sp-nav .plus-right.open::after {
		display: none;
	}
	.sp-nav .plus-right:not(.open) ul {
		display: none;
	}
	.sp-nav .plus-right ul {
		margin-top: 10px;
		gap: 0;
	}
	.sp-nav .plus-right li {
		padding: 10px 0 10px 15px;
	}

	.sp-menu-address {
		padding: 20px 30px;
		font-size: 14px;
	}
	.sp-menu-phone {
		font-family: "Aoboshi One", serif;
		font-size: 28px;
		font-weight: 400;
		display: flex;
		gap: 15px;
	}
	.sp-menu-phone::before {
		content: url(images/icon-phone.svg);
	}

	.sp-nav-footer {
		margin-top: auto;
		margin-bottom: 0;
		padding: 30px;
		display: flex;
		gap: 30px;
	}

	.sp-nav-footer a {
		color: black;
		font-size: 12px;
		display: flex;
		gap: 0.5em;
		align-items: center;
	}
	.sp-nav-footer a::before {
		content: "";
		display: block;
		height: 5px;
		width: 5px;
		border-top: 1px solid grey;
		border-right: 1px solid grey;
		transform: rotate(45deg);
	}

	/* TOP */

	.message-inner {
		margin-right: 0;
	}

	.message {
		padding-bottom: 330px;
		background: url(images/message-pic_sp.jpg) bottom center no-repeat;
	}


	/* 会社案内 */

	.compa-info {
		padding: var(--padding-responsive);
		padding-bottom: 300px;
		background-position: bottom left;
		background-size: 370px;
	}
	.compa-info-inner {
		margin: 0;
	}

	.page-company-message {
		--message-width: auto;
		background-size: auto 200px;
		background-position: left bottom;
	}
	section.page-company-message {
		padding-bottom: 200px;
	}

	.demo-LPgaz td:first-child {
		min-width: 100px;
	}

	/* recruit */
	ul.recruit-menu {
		padding: 1em;
		/* gap: 0.5em; */
		gap: 1.5em;	/* 2026/03/17 */	
		font-size: 13px;
	}

	.page-recruitment td {
		padding: 1em;
	}
	/* 2026/03/16 */
	.company-history.history-expanded .history-hidden {
		flex-direction: column;
		gap: 0.2em;		
	}	
}

@media (max-width: 800px) {
	.modal-outer {
		box-sizing: border-box;
		padding: 15px;
		max-width: 90%;
		max-height: 90%;
		width: calc(98vw - 15px);
	}
	.modal-content {
		width: 100%;
	}
	/* 2026/03/17 */
	.modal-content ul{
		padding: 0px 20px 0px 20px;
	}
	#modal-gaz-certificate table,
	#modal-gaz-certificate th,
	#modal-gaz-certificate td {
		display: block;
	}
	#modal-gaz-certificate th {
		padding: 0;
		font-weight: bold;
	}
	.certificate-address {
		flex-direction: column;
		gap: 0.5em;
		margin-bottom: 1em;
	}
	.certificate-address :first-child {
		flex: 1;
		color: var(--color-accent1);
	}

	/* お問い合わせ対応 */
	.contact-breadcrumbs {
		--arrow-width:24px;
	}
	.contact-breadcrumbs .step {
		padding: 5px 5px 5px 15px;
		height: 50px;
		font-size: 12px;
	}

	.form-row {
		flex-direction: column;
		/* display: block; */
	}
	.form-row>* {
		margin: 0;
	}
	.form-row>*:first-child {
		flex: 1;
	}

	.wpcf7-list-item {
		display: block;
	}
	.form-row select:not(.small),
	.form-row input[type=text]:not(.small),
	.form-row input[type=email]:not(.small),
	.form-row textarea {
		width: 100%;
		box-sizing: border-box;
	}

	.form-buttons p {
		flex-direction: column;
		gap: 15px;
	}
	.page-contact .btn {
		flex: 1;
	}

	/* イタリアからの手紙用 + リフォーム */
	ul.grid-list {
		grid-template-columns: repeat(2, 1fr);
	}

	/* reform  */
	.reform-grid {
		grid-template-columns: 1fr;
	}

	/* faq */
	.faq-settings {
		flex-direction: column;
		align-items: stretch;
	}
	.faq-settings figure {
		flex-direction: row;
		flex: 1;
	}
	.faq-settings figure:not(:last-child) {
		border-right: none;
		padding-right: 0;
		border-bottom: 1px dotted grey;
		padding-bottom: 45px;
	}
}


@media (max-width: 700px) {
	.top-catch-pic-sp {
		margin-top: 40px;
	}

	.page-start {
		--header-main-space: 60px;
	}

	.sp-nav-buttons a {
		font-size: 14px;
	}

	h2 {
		font-size: 28px;
	}
	.page-top h2 {
		font-size: 32px;
	}
	/* 2026/03/17 */
	.top-catch {
		background-size: 400px;
		background-position: top 40px right;
	}

	.services-icons{
		display: grid;
		grid-template-columns: repeat(2, minmax(120px, 300px));
		gap: 20px;
		justify-content: center;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.service {
		min-width: unset;
	}
	.top-service::before {
		width: 80px;
		height: 80px;
		background-size: 40px;
	}

	.top-gazusage-title h2 {
		flex-direction: column;
	}

	.top-gazusage-emergency h2 {
		flex-direction: column;
	}

	.top-gazusage-buttons .btn {
		font-size: 16px;
		padding: 1.5em 3em;
	}

	.compa-info-buttons {
		flex-direction: column;
		/* align-items: center; */
		gap: 20px;
	}
	.btn-compa-info {
		flex: 1;
		font-size: 16px;
	}

	.top-news-title {
		display: block;
		margin-bottom: 0;
	}
	.top-news-title h2 {
		margin-bottom: 15px;
	}
	.top-news-title .btn {
		display: block;
		width: 150px;
		margin-left: auto;
	}

	.top-gazusage-emergency {
		padding: 30px;
	}
	.top-gazusage-emergency .btn-warning {
		width: 230px;
		padding: 1.5em 3em;
		font-size: 14px;
	}

	.news-list li {
		flex-direction: column;
		gap: 15px;
	}
	.post-date {
		flex: 1;
	}

	.commitment-list {
		margin-left: 0;
	}
	.list-square,
	.list-check {
		padding-left: 0;
	}

	/* 2026/03/17 */
	.post-items{
		flex-direction: column;
	}

	.italia-title .btn {
		display: none;
	}

	.btn-italia-sp {
		display: block;
		width: 200px;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		font-size: 12px;
	}

	.footer-cols {
		flex-direction: column;
	}

	.footer-last {
		justify-content: flex-end;
	}
	.footer-privacy-policy {
		display: none;
	}

	.demo-table-round .columns {
		flex-direction: column;
		align-items: normal;
	}

	.demo-company .table-definition table,
	.demo-company .table-definition tr,
	.demo-company .table-definition td {
		display: block;
		width: auto;
	}
	.demo-company .table-definition td:first-child {
		border: none;
		padding-bottom: 0;
	}
	.demo-company .table-definition td:last-child {
		padding-left: 40px;
	}

	.content-3parts {
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-template-areas:
			"title"
			"pic"
			"paragraph";
	}

	/* recruit */

	.page-recruitment .table-round table,
	.page-recruitment .table-round tr,
	.page-recruitment .table-round td {
		border: none !important;
		display: block;
	}
	.page-recruitment .table-round td:first-child {
		text-align: left;
	}

	.page-recruitment .btn-backtolist {
		width: auto;
		font-size: 20px;
	}

/* 2026/03/18 */
.btn-backtolist {
	--btn-text-color: white;
	background: linear-gradient(90deg, var(--color-accent1), var(--btn-move-gradient));
	transition: --btn-move-gradient var(--btn-grad-trans-speed)  ease;
	background-size: 200% 100%;
    padding: 1.5em 3em;	
	font-weight: bold;
	/* padding: 1em 3em; */
	/* --btn-text-color: white; */
	/* background: var(--btn-gradient-hori); */
	/* background: var(--btn-gradient-hori-02);	*/ /* 2026/03/17 */
	/* border-color: white; */
	/* background-size: 200% 100%; */
	/* transition: var(--btn-bg-shift); */
	box-shadow: var(--btn-shadow);
	font-size: 18px;
}

	/* faq */
	.faq-question::before,
	.faq-answer::before {
		position: static;
		margin-bottom: 5px;
	}
	.page-faq .footer-phone {
		font-size: 20px;
	}
	.page-faq .footer-phone::before {
		width: 30px;
		height: 16px;
	}

	.faq-container {
		margin-left: 18px;
		padding-left: 0;
	}

	.faq-water,
	.faq-meters {
		flex-direction: column;
	}

	.faq-water>*:not(:last-child)  {
		padding-right: 0;
		border-right: none;
		padding-bottom: 45px;
		border-bottom: 1px dotted grey;
	}

	/* ===  角丸テーブルコンテナ === */
	.table-round-th {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	/* ===  記事内画像配置 === */
	.image-right,
	.image-left {
		grid-template-columns: 1fr;
	}

	.image-gallery-centered {
		flex-direction: column;
		align-items: center;
	}
	/* ===  レスポンシブグリッドレイアウト === */
	.grid-3col,
	.grid-2col {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	/* supply */ /* 2026/03/16 */
	.supply-image{
		display:none;
	}
	.supply-image-sp{
		display:block;
	}

	.single article img {
		max-width: 300px;
	}
}

@media (max-width: 500px) {
	.top-catch {
		background-position: top 40px right -75px;
	}
	.top-catch h2 {
		padding-left: 25px;
	}

	.sp-menu-address span {
		display: block;
	}

	.sp-nav-footer,
	.sp-nav-buttons {
		flex-direction: column;
	}

	.sp-nav-footer {
		gap: 10px;
	}

	/* イタリアからの手紙用＋リフォーム */
	ul.grid-list {
		grid-template-columns: 1fr;
	}

	/* faq */

	.faq-settings figure {
		flex-direction: column;
	}

	/* ショッピング */

	.page-shopping .group-orvieto {
		flex-direction: column;
	}

	.page-shopping .group-budou,
	.page-shopping .group-olive {
		flex-direction: column;
		align-items: center;
	}

	.page-shopping .group-withtext-l {
		flex-direction: column;
		gap: 15px;
	}
	.page-shopping .group-withtext-r {
		flex-direction: column-reverse;
		gap: 15px;
	}

	.page-shopping .il-riposino-pic,
	.page-shopping .slow-food-pic {
		max-width: 100%;
		margin: auto;
	}
	/* === ドット区切りリスト === */
	.dotted-detail-list li {
		flex-wrap: wrap;
	}

	.dotted-detail-list .detail-text {	
		flex: 1 1 250px;
		padding-left: calc(1em + 15px); 
	}

	.dotted-detail-list .detail-label:has(~ .detail-text)::after {
		display: none;
	}

	.page-start h3 {
		font-size: 24px;
		margin-bottom: 40px;
	}
	.faq-container {
		margin-left: 20px;
		margin-right: 20px;		
	}
	.faq-question {
		position: relative;
		margin-bottom: 35px;
		/* font-size: 28px; */
		font-size: 24px;	/* 2026/03/1/*/		
	}

	.faq-answer {
		position: relative;
		margin-top: 2.5em;
	}

}