/* =========================================
   スマートフォン対応 (max-width: 640px)
========================================= */
@media screen and (max-width: 640px) {

	.pc {
		display: none !important;
	}

	.sp {
		display: block;
	}

	.box {
		flex-wrap: wrap;
	}

	.box_left {
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}

	.box_right {
		width: 100%;
	}

	/* --- 共通テキスト・余白 --- */
	h2 {
		font-size: 2.8rem;
		margin-bottom: 20px;
	}

	h2 span {
		font-size: 1.3rem;
	}

	.description {
		font-size: 1.4rem;
		line-height: 1.6;
	}

	.section,
	.about-section,
	.service-section,
	.news-section,
	.works-section,
	.instagram-section {
		padding: 40px 15px;
	}

	.container {
		padding: 0;
	}

	/* --- ヘッダー・ナビゲーション --- */
	#logo {
		padding: 15px;
		line-height: 1;
	}

	#logo img {
		height: 55px;
	}

	#header {
		display: flex;
	}

	#header.is-small #logo {
		padding: 10px 0;
	}

	nav {
		max-width: 100%;
		margin-top: 0;
		padding: 10px 15px;
		border-radius: 0;
		background-color: #fff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}

	/* スマホ時はPCメニュー項目を非表示にし、ContactとMENUボタンのみ表示 */
	nav ul li:not(.contact):not(.menu) {
		display: none;
	}

	nav ul {
		justify-content: flex-end;
		gap: 10px;
	}

	.contact {
		margin-right: 0;
		width: 65px;
		height: 65px;
		position: relative;
		/* 基準点にする */
	}

	.contact a {
		display: block;
		width: 100%;
		height: 100%;
		background: #ff7733;
		color: #fff;
		font-size: 1rem;
		font-weight: 600;
		border-radius: 10px;
		text-decoration: none;
		box-sizing: border-box;
		position: relative;
	}

	.contact img {
		position: absolute;
		top: 15px;
		/* メールの画像位置（微調整可） */
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: auto;
		display: block;
	}

	/* Contactの文字位置 */
	.contact a {
		text-align: center;
		line-height: 1;
	}

	/* aタグの中のテキスト（Contact）を配置 */
	.contact a {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-bottom: 11px;
		/* 下からの距離で文字高さを合わせる */
	}

	/*****************************************
                メニューボタン
*****************************************/
	.menu {
		margin-right: 0;
		width: 65px;
		height: 65px;
		background: #15803d;
		border-radius: 10px;
		position: relative;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		/* 文字を下に寄せる */
		padding-bottom: 11px;
		/* Contactの文字高さと合わせる */
		box-sizing: border-box;
	}

	.menu span {
		color: #fff;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1;
		text-align: center;
		width: 100%;
		z-index: 2;
	}

	.menu::before,
	.menu::after {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 35px;
		height: 2px;
		background: #fff;
		transition: 0.3s ease;
	}

	.menu::before {
		top: 19px;
		/* 三本線の一番上の位置 */
		box-shadow: 0 8px 0 #fff;
		/* 真ん中の線の間隔 */
	}

	.menu::after {
		top: 35px;
		/* 三本線の一番下の位置 */
	}

	.menu.active::before {
		top: 27px;
		transform: translateX(-50%) rotate(45deg);
		box-shadow: none;
	}

	.menu.active::after {
		top: 27px;
		transform: translateX(-50%) rotate(-45deg);
	}

	/* メガメニュー */
	#megamenu {
		position: fixed;
		/* ヘッダーの高さに合わせて調整 */
		top: 85px;
		right: 0;
		width: 100%;
		/* 画面下まで表示させ、はみ出し分をスクロール可能にする */
		height: calc(100% - 85px);
		z-index: 999;
		overflow-y: auto;
		/* 慣性スクロールを有効に */
		-webkit-overflow-scrolling: touch;
		border-radius: 0;
		box-sizing: border-box;
	}

	.mega-inner {
		display: grid;
		grid-template-columns: 1fr;
		padding: 30px 20px;
		gap: 0;
		list-style: none;
		margin: 0;
	}

	.mega-inner li {
		padding: 15px 80px 15px 0;
		border-bottom: 1px solid #eee;
	}

	.mega-inner li.contact_btn {
		padding-right: 0;
	}

	.mega-inner li a {
		display: block;
		font-size: 1.8rem;
		font-weight: 700;
		color: #fff;
		text-align: left;
		text-decoration: none;
		line-height: 1.2;
	}

	.mega-inner li a::after {
		right: 20px;
	}

	.mega-inner li span.sub_text {
		display: block;
		font-size: 1.1rem;
		text-align: left;
		color: #fff;
		margin-top: 8px;
		font-weight: normal;
	}

	/* --- ヒーロースライダー --- */
	#slide {
		margin-top: 90px;
		max-width: 100%;
	}

	#slide img {
		width: 100%;
		height: auto;
	}

	/* --- スマホ展開メニュー --- */
	.mega-inner {
		padding: 0 20px;
	}

	.mega-inner li {
		padding: 0;
	}

	.mega-inner li a {
		padding: 30px 90px 30px 15px;
	}

	.mega-inner li.contact_btn a {
		padding-right: 0;
	}

	.mega-inner li a span {
		font-size: 1.3rem;
		margin-left: 10px;
	}

	.mega-inner li.sub_menu span {
		margin-left: 0;
	}

	/* --- About us & Service セクション --- */
	.about-section .card-grid-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.card-grid-4,
	.grid-layout {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.grid-span-2 {
		grid-column: span 2;
	}

	.service-card {
		border-radius: 0 25px 25px 0;
		height: auto;
		min-height: 60px;
		margin-bottom: 50px;
		padding: 25px 20px;
		font-size: 1.4rem;
	}

	.arrow {
		width: 40px;
		height: 25px;
	}

	.card01,
	.card02 {
		margin-top: 0;
	}

	.service-section .service-card {
		min-height: auto;
		padding: 10px 15px;
		font-size: 1.5rem;
		min-height: 70px;
	}

	/* --- お知らせ＆コラム セクション --- */
	.tab-wrapper {
		padding-left: 0;
	}

	.tab-menu li {
		padding: 10px 15px;
		font-size: 1.3rem;
		flex: 1;
		text-align: center;
	}

	.news-item {
		flex-wrap: wrap;
		padding: 15px 0;
	}

	.date {
		width: auto;
		margin-right: 15px;
	}

	.label {
		margin-right: 0;
		padding: 4px 15px;
		width: auto;
		font-size: 1.2rem;
	}

	.news-title {
		width: 100%;
		margin-top: 10px;
		line-height: 1.5;
		flex: auto;
	}

	.btn-more {
		width: 100%;
		padding: 15px 20px;
		justify-content: center;
		box-sizing: border-box;
	}

	.btn-arrow {
		right: 10px;
	}

	.btn-more {
		max-width: 230px;
		justify-content: initial;
	}

	/* --- 制作実績 セクション --- */
	.works-item {
		flex-direction: column;
		gap: 15px;
		padding: 30px 0;
	}

	.works-image-box {
		flex: auto;
		width: 100%;
		max-width: 330px;
		margin: 0 auto;
	}

	.works-item-title {
		font-size: 1.5rem;
	}

	.works-details {
		font-size: 1.2rem;
	}

	.works-category {
		padding-bottom: 0;
	}

	.btn-detail {
		position: static;
		margin-top: 15px;
		align-self: flex-start;
		padding: 10px 20px;
	}

	.works-container .btn-detail {
		background: #fff;
		align-self: flex-end !important;
	}

	/* --- Instagram セクション --- */
	.instagram-section:before {
		display: none;
		/* スマホでは装飾画像を非表示、または調整 */
	}

	.instagram-section p img {
		width: 100%;
		height: auto;
	}

	.instagram-container {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.instagram-item img {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.instagram-card__comment {
		height: auto;
		max-height: 48px;
		font-size: 1.1rem;
		line-height: 1.4;
	}

	/* --- フッター --- */
	.main-footer {
		padding-top: 40px;
	}

	.footer-contact-wrapper {
		padding: 0 20px;
	}

	.footer-contact-btn {
		padding: 8px 13px;
		gap: 8px;
		border-radius: 60px;
		line-height: 1;
	}

	.contact-icon {
		width: 70px;
		height: 70px;
	}

	.contact-text {
		font-size: 1.3rem;
	}

	/* .contact-arrow {
		transform: rotate(90deg);
	} */

	.footer-contact-wrapper .contact-arrow {
		transform: none;
	}


	.footer-info {
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.footer-logo img {
		width: 200px;
	}

	.footer-address p {
		text-align: center;
		line-height: 1.6;
	}

	.footer-nav {
		display: none;
	}

	.footer-nav li::after {
		display: none;
		/* メニュー間の縦線を消す */
	}

	/*****************************************
							次階層
*****************************************/
	#next_main {
		margin-top: 95px;
		padding: 0 15px;
	}

	#next_main article section .section_inner {
		padding: 0 20px;
	}

	/*****************************************
						次階層ヘッダー
*****************************************/
	.hero-section {
		padding: 25px;
	}

	.lead-area p {
		font-size: 1.8rem;
	}

	/*****************************************
						私たちについて
*****************************************/
	.strength-box {
		padding: 20px !important;
	}

	.greeting-content-wrap {
		padding: 20px !important;
	}

	.greeting-box,
	.staff-item {
		flex-direction: column;
	}

	.greeting-image,
	.greeting-text,
	.staff-img {
		width: 100%;
	}

	.company-list dt,
	.company-list dd {
		width: 100%;
		padding: 10px 0;
	}

	.company-list dt {
		border-bottom: none;
	}



	/*****************************************
							事業案内
	*****************************************/
	.service-next-section .section_inner {
		padding: 0 !important;
	}


	#service-toptitle {
		display: block !important;
		font-size: 2.2rem;
	}

	#service-toptitle span {
		font-size: 1.8rem !important;
	}

	.service_card_inner {
		padding: 0;
	}

	.number_colum3 {
		flex-wrap: wrap;
	}

	.number_colum3 ol {
		width: 100%;
		margin-right: 0;
	}

	h2.service_title {
		font-size: 2rem !important;
		background: url("/images/title_bg_sp.png") no-repeat;
		background-position: top left;
		width: 100% !important;
		min-height: auto !important;
		background-size: 100% auto !important;
		padding-bottom: 65px;
	}

	h2.service_title:after {
		content: "";
		display: none;
	}

	#bubun_title {
		padding: 15px 20px 53px 45px;
		background-size: cover;
	}

	.shadow-left-fade p {
		font-size: 1.4rem;
	}

	.service_card {
		padding: 15px 15px 15px 65px;
	}

	#card01:before {
		content: url("/images/service_num01_sp.svg");
	}

	#card02:before {
		content: url("/images/service_num02_sp.svg");
	}

	#card03:before {
		content: url("/images/service_num03_sp.svg");
	}

	.service_card .inner_card .sub_title {
		font-size: 1.4rem;
	}

	.service_card .inner_card .title {
		font-size: 2rem;
	}

	/*****************************************
									制作実績詳細
	*****************************************/
	#works_category .tab-menu {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		/* 全体を12等分する */
		gap: 10px 5px;
		/* 要素間の余白 */
		padding: 0;
		margin: 0;
		list-style: none;
	}

	#works_category .tab-menu li:nth-child(-n+3) {
		grid-column: span 4;
	}

	#works_category .tab-menu li:nth-child(n+4) {
		grid-column: span 3;
	}

	#works_category .tab-menu li {
		padding: 12px 5px !important;
		margin-right: 0;
		font-size: 1.15rem;
	}

	#next_main .works-container .btn-detail {
		background: #ededed;
	}

	.works_colum2 {
		gap: 0;
		flex-wrap: wrap;
	}

	.works_colum2 .works_colum2_col {
		flex: initial;
		margin-bottom: 50px;
	}

	.works_colum2 .works_colum2_col:last-child {
		margin-bottom: 0;
	}

	.works_colum2 .works_colum2_col .col_inner {
		min-height: auto;
	}

	/*****************************************
							お知らせ詳細
	*****************************************/
	.news_title h2 {
		font-size: 2.4rem;
	}

	.news_title .date {
		margin-top: 10px !important;
	}

	.news_detail h3 {
		font-size: 2rem;
	}

	.news_detail .h3_sub {
		font-size: 1.5rem;
	}

	p.colum_title {
		font-size: 2rem;
	}

	.photo_inner .news_copy {
		font-size: 1.6rem;
	}

	.photo_box {
		flex-wrap: wrap;
	}

	.photo_box_left {
		width: 100%;
		margin-right: 0;
		margin-bottom: 25px;
	}

	.photo_box_right {
		width: 100%;
	}


	#contact-form-section .btn-more {
		max-width: 100%;
	}


}

/*sp*/



/* =========================================
   スマートフォン以外 (min-width: 641px)
========================================= */
@media screen and (min-width: 641px) {

	.pc {
		display: block;
	}

	.sp {
		display: none !important;
	}




	/*****************************************
								メガメニュー
*****************************************/
	#megamenu {
		position: absolute;
		top: 254px;
		left: 50%;
		max-height: calc(100vh - 254px);
		overflow-y: auto;
		transform: translateX(-50%);
		max-width: 1200px;
	}

	#header.is-small #megamenu {
		top: 145px;
		max-height: calc(100vh - 145px);
		overflow-y: auto;
	}






}