/*	===============================================================
	● サイトCSSファイル スマホ用(page) 
	---------------------------------------------------------------
	Release 2026.02.16                               Powerd by TDR
	=============================================================== */

	/*********************************************
	 * 1024px
	 *********************************************/
	@media (max-width: 1024px)
	{
		/* トップページ */
		header { display: none; }
		.mobile-header { display: flex; }
		main { margin-left: 0; width: 100%; }
		footer { margin-left: 0; }
		.section-padding { padding: 60px 6%; }
		.concept-grid { grid-template-columns: 1fr; }
		.carousel-item { width: calc(100% / 2 - 10px); }
		.news-item { flex-wrap: wrap; padding: 20px 10px; }
		.news-date { width: auto; margin-right: 20px; margin-bottom: 5px; }
		.news-category { margin-bottom: 10px; margin-right: 0; width: 80px; }
		.news-title { width: 100%; margin-top: 5px; }
		.footer-nav { gap: 15px 25px; }
		.hero-img { top:9%; }

		/** kimonokkoについて**/
		.page-about main.modern-about { margin-left: 0; width: 100%; }
		.hero-minimal {
			height: auto;
			min-height: 80px;
			padding: 40px 6% 15px;
			align-items: flex-end;
		}
		.title-main { gap: 15px; }
		.title-main h1 { font-size: 1.4rem; }
		.accent-line { height: 25px; }
		.en-sub { font-size: 0.9rem; }

		.section-padding { padding: 90px 6%; }

		.concept-container, .dialogue-container {
			flex-direction: column;
			gap: 60px;
		}

		/* モバイル時は画像を先に表示 */
		.concept-image-box, .dialogue-image-box { 
			order: 1;
			flex: 1;
			width: 100%;
			display: block;
		}
		
		.concept-text, .dialogue-text {
			order: 2;
		}

		.concept-image-box {
			display: none;
		}

		.concept-image-box2 {
			display: block;
		}

		.modern-catch { font-size: 1.45rem; }

		/** オンラインショップ **/
		.product-grid {
			grid-template-columns: repeat(3, 1fr);
		}

		/** ナビゲーションメニュー */
		.lang-switch.sp {
			margin-top: 40px; 
			margin-bottom: 20px;
			padding-top: 20px;
			text-align: center;
		}

		.lang-switch.sp a
		{
			font-size:1.3rem;
			color: #222;
			font-weight: 500;
		}

		.lang-switch.sp {
			display:inline-block;
		}

		/** ナビゲーションメニュー */
		.lang-switch a:nth-child( 1 ), .lang-switch a:nth-child( 2 ) { display:inline-block; }
		.lang-switch a:nth-child( 4 ), .lang-switch a:nth-child( 5 ) { display:none; }

	}

	/*********************************************
	 * 900px
	 *********************************************/
	@media (max-width: 900px) {
		.appeal-flex {
			flex-direction: column;
			gap: 40px;
		}
		.appeal-image {
			width: 100%;
			order: 2;
		}
		.appeal-text {
			order: 1;
			text-align: center;
		}
		.appeal-features {
			grid-template-columns: 1fr;
		}
		.appeal-text h2 {
			font-size: 1.8rem;
		}
	}


	/*********************************************
	 * 768px
	 *********************************************/
	@media (max-width: 768px)
	{
		/** トップページ以外のページタイトル **/
		.hero-minimal {
			min-height: 150px;
			background-color: #4a443a;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 70px;
		}

		.hero-title-wrap {
			position: relative;
			top: auto;
			left: auto;
			transform: none;
			text-align: center;
			width: 100%;
			padding: 0 20px;
			box-sizing: border-box;
		}

		.hero-title-wrap .en-sub {
			display: block;
			font-size: 0.9rem;
			letter-spacing: 0.3em;
			margin-bottom: 0px;
			color: rgba(255, 255, 255, 0.6);
			position: static;
			transform: none;
			text-align:left;
		}

		.title-main h1 {
			font-size: 1.6rem;
			color: #fff;
			margin: 0;
		}

		.title-main .accent-line {
			background: #fff;
			margin: 15px auto 0;
		}

		.accent-line { display:none; }

		/** kimonokkoについて**/
		.creators-grid {
			grid-template-columns: 1fr;
			gap: 60px;
		}
		.creator-image {
			width: 200px;
			height: 200px;
		}

		/** オーダー方法 **/
		.order-container {
			padding: 0 25px;
		}
		.flow-item {
			flex-direction: column;
			gap: 15px;
			margin-bottom: 50px;
		}
		.flow-item::after {
			left: 25px;
			top: 50px;
			height: calc(100% + 20px);
		}
		.price-grid {
			grid-template-columns: 1fr;
		}

		/** オーダーの流れ **/
	   .appeal-text p { text-align:left; }
	   .appeal-text h2, .appeal-text p { text-align:left; }
	   .flow-content { padding-left:45px; }
	   .flow-item.highlight .flow-content { margin-left:45px; }

		/** オンラインショップ **/
		.shop-section {
			padding: 60px 0;
		}
		.shop-container {
			padding: 0 25px;
		}
		.product-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: 40px 15px;
		}
		.product-item:hover {
			transform: none;
			box-shadow: none;
			background: none;
		}
		.product-item {
			margin: 0;
			padding: 0;
		}

		/** プライバシーポリシー **/
		.policy-section {
			padding: 60px 0;
		}
		.policy-container {
			padding: 0 25px;
		}
		.policy-content h2 {
			margin: 40px 0 20px;
		}
		.policy-footer {
			margin-top: 60px;
		}

		/** お問い合わせ **/
		.contact-page-section {
			padding: 60px 0 80px;
		}
		.submit-btn {
			width: 100%;
			padding: 20px 0;
		}
		.form-label {
			font-size: var(--text-size);
		}
	}

	/*********************************************
	 * 600px
	 *********************************************/
	@media (max-width: 600px) {
		.works-section {
			padding: 60px 0;
		}
		.works-grid {
			grid-template-columns: 1fr;
			gap: 15px;
		}
	}

	/*********************************************
	 * 480px
	 *********************************************/
	@media (max-width: 480px)
	{
		/** トップページ **/
		.hero { height:95vh; }
		.hero-img { object-position: 68% 100%; top:9%; }
		.carousel-item { width: 100%; }

		.news-date { font-size: var(--text-size); }
		
		.concept-text { text-align: center; }
		.concept-text h2 { text-align: center; }

		.news-category { padding: 0; }
		.news-title a { font-weight:700; }
	
		/** 文字サイズの調整 **/
		.about-content p, .concept-text p, .news-title a, .contact-content p,
		.modern-desc, .profile-text, .step-txt strong,
		.shop-intro p,
		.policy-content,
		.contact-intro p
		{ font-size: 1.15rem !important; line-height:1.8 !important; }

		.step-txt span, .dialogue-note { font-size: 1rem !important; }
		.collection-section h2 { font-size: 1.5rem; }
		.feature-box h3 { font-size:1.3rem; font-weight:900; }

		/** ENタイトルの調整 **/
		.concept-text .section-label.text-left
		{
			text-align:center
		}

		/** 汎用 **/
		.sp { display:block; }
		.pc { display:none; }
   }