@media only screen and (max-width: 768px){
	.onlyPc{
		display: none;
	}
	.onlySp{
		display: block;
	}
	.more-Link{
		padding: 1rem 3rem;
	}
	.more-Link::after{
		right: -1rem;
		width: 18%;
	}
	button{
		color: #333;
	}
	#header{
		flex-direction: column;
		align-items: flex-start;
		position: relative;
		gap: 0;
	}
	#site-Title{
		width: 50%;
	}
	#header .site-Title-Name{
		font-size: 1.3rem;
	}
    #hamburger {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 45px;
        height: 45px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 9999;
    }
    #hamburger span {
        display: block;
        height: 4px;
        background: #333;
        margin: 12px 0;
        border-radius: 2px;
        transition: 0.3s;
    }
	#hamburger span:first-child{
		margin-top: 0;
	}
	#hamburger span:last-child{
		margin-bottom: 0;
	}
	#hamburger.open span:nth-child(1) {
        transform: translateY(16px) rotate(45deg);
    }
    #hamburger.open span:nth-child(2) {
        opacity: 0;
    }
    #hamburger.open span:nth-child(3) {
        transform: translateY(-16px) rotate(-45deg);
    }

    #header-Navi {
        display: none;
        width: 100%;
        background-color: #fff;
        flex-direction: column;
            padding-top: 2rem;
    }
    #header-Navi.open {
        display: flex;
    }
    #header-Navi .menu {
        flex-direction: column;
        width: 100%;
    }
    #header-Navi .menu li {
        width: 100%;
        border-bottom: 1px solid #dcdcdc;
        padding: 0.5rem 0;
    }
	#header-Navi .menu li.dropdown {
        border-bottom: none;
    }
    #header-Navi .menu li a,
    #header-Navi button.dropdown-toggle {
        width: 100%;
        text-align: left;
        padding: 1rem;
    }
    #header-Navi .submenu{
        display: block;
		border-left: none;
        padding: 0;
        position: relative;
	}
	#header-Navi .submenu li{
		border-bottom: none;
	}
    #header .submenu li a {
        padding-left: 2rem;
        position: relative;
    }
	#header .submenu li a::before {
        content: "";
		position: absolute;
		top: calc(50% - 0.2rem);
		left: 0;
		background-color: #fff150;
		width: 0.4rem;
		height: 0.4rem;
		border-radius: 50%;
    }
	
	.home-Hero{
		padding: 50% 12%;
	}
	
	.home-Sec-Title{
		font-weight: 100;
		font-size: 1.5rem;
	}
	.home-Sec-Title span{
		font-weight: 100;
		font-size: 0.7rem;
	}
	 /*SP表示 (768px以下) */
  #news .col-lg-10 {
    display: flex;
    flex-wrap: nowrap; /* 折り返しを禁止 */
    overflow-x: auto; /* 横スクロールを許可 */
    scroll-snap-type: x mandatory; /* スクロールスナップを有効化 (任意) */
    -webkit-overflow-scrolling: touch; /* iOSでスムーズなスクロール */
  }

  #news .module-Article-Item { /* 各記事のarticle要素に適用 */
    flex: 0 0 auto; /* 縮小・拡大せず、自動サイズ */
    width: 100%; /* 幅を100%にして1件ずつ表示 */
    scroll-snap-align: start; /* スクロールスナップの位置 (任意) */
    padding-right: 10px; /* 右側に余白を設定して区切りを見やすくする (任意) */
    box-sizing: border-box; /* paddingを含めてwidthを計算 */
  }

  #news .module-Article-Item:last-child {
    padding-right: 0; /* 最後の要素の右余白を削除 (任意) */
  }
	#news .scroll-Right{
		opacity: 1;
		text-align: right;
	}
	#news .scroll-Right p{
		font-size: 0.875rem;
		position: relative;
		padding-right: 3.4rem;
	}
	#news .scroll-Right p::after{
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		width: 3rem;
		height: 1px;
		background: #333;
		animation: scrollRight 2s cubic-bezier(1, 0, 0, 1) infinite;
	}
	@keyframes scrollRight{
        0% {
        transform: scale(0, 1);
        transform-origin: 0 0;
        }
        30% {
        transform: scale(1, 1);
        transform-origin: 0 0;
        }
        70% {
        transform: scale(1, 1);
        transform-origin: 100% 0;
        }
        100% {
        transform: scale(0, 1);
        transform-origin: 100% 0;
        }
    }
	#news .more{
		margin-top: 3rem;
	}
	#brand .col-lg-10{
		flex-direction: column;
	}
	#brand a{
		width: 100%;
	}
	#brand a .home-Brand-Page-Link-Text::before{
		left: -10rem;
	}
	#brand .home-Brand-Page-Link-Title{
		font-size: 1rem;
	}
	#brand a .home-Brand-Page-Link-More::before,
	#brand a .home-Brand-Page-Link-More::after{
		right: 1rem;
	}
	#brand a:hover .home-Brand-Page-Link-Text::before{
		left: -10rem;
	}
	#brand a:hover .home-Brand-Page-Link-Title, 
	#brand a:hover .home-Brand-Page-Link-More{
		padding-left: 3.4rem;
	}
	#about .about-Title{
		font-size: 1.2rem;
	}
	#about .about-Text{
		font-size: 1rem;
		text-align: left;
	}
	#pickup .pickup-Youtube{
		flex-direction: column;
	}
	.youtube-Container {
       width: 100%;
       padding-top: 56.25%; /* 16:9のアスペクト比 */
    }
	#pickup .pickup-Text{
		flex-direction: column;
	}
	#contact p{
		text-align: left;
	}
	#contact .more{
		text-align: center;
	}
    #footer .footer-Container{
	    flex-direction: column;
    }
	#footer .footer-Widgets{
		margin-bottom: 1rem;
		width: 50%;
	}
	#footer-Navi .menu a{
		font-size: 0.9rem;
	}
	#footer-Navi .dropdown-Parent{
		font-size: 0.9rem;		
	}
	#footer-Navi .submenu li a{
		font-size: 0.8rem;
	}
	.footer-Info .footer-Info-Link a{
		font-size: 0.6rem;
		padding: 0.4rem 0.6rem;
	}
	
	
	/* company */
	#greeting .page-Sec-Title::after,
	#profile .page-Sec-Title::after,
	#access .page-Sec-Title::after{
		letter-spacing: 0.05em;
		font-size: 2.5rem;
		left: 5rem;
	}
	#profile .profile-Container{
		flex-direction: column-reverse;
	}
	#profile .profile-Container ul,
	#profile .profile-Container img{
		width: 100%;
	}
	
	/* parts-pickupContact */
	#pickupContact{
		flex-direction: column;
	}
	.pickup-Parts{
		width: auto;
		border-right: none;
		border-bottom: solid 1px #fff;
	}
	.contact-Parts{
		width: auto;
	}
	
	/* parts-aboutContact */
	#aboutContact{
		flex-direction: column;
	}
	.about-Parts{
		width: auto;
		border-right: none;
		border-bottom: solid 1px #fff;
	}
	
	/* brand-common */
	.brand-Category{
		flex-direction: column;
	}
	.brand-Category .page-Sec-Subtitle{
		margin-bottom: 1rem;
		font-size: 1.2rem;
		justify-content: center;
	}
	.brand-Category-Inner{
		flex-direction: column;
		gap: 1rem;
	}
	.brand-Category-Inner li{
		justify-content: center;
		padding: 0.9rem;
	}
	.content-Header .content-Title{
		font-size: 1.2rem;
	}
	.brand-Container{
		flex-direction: column;
		align-items: flex-end;
	}
	.brand-Container-Inner{
		margin: 0 2rem -1.2rem 0;
		padding: 1.2rem;
	}
	.brand-Container .text{
		font-size: 0.875rem;
	}
	
	/* mahalo,ptpt common */
	#mahalo2 .mahalo-Info,
	#ptpt2 .ptpt-Info{
		flex-direction: column;
	}
	#mahalo2 .mahalo-Info iframe,
	#ptpt2 .ptpt-Info iframe{
		width: 100%;
	}
	
	/* attirant */
	.attirant-Info{
		flex-direction: column;
	}
	.attirant-Info iframe{
		width: 100%;
	}
	
	/* persons */
	.persons-Pickup-Container{
		flex-direction: column;
	}
	.genre ul{
		gap: 1rem;
	}
	.genre li{
		width: calc(50% - 1rem);
	}
	.channel-Header{
		margin-bottom: 2rem;
	}
	.channel .youtube a{
		padding: 1rem 1.5rem;
		font-size: 0.875rem;
	}
	.page-id-42 .contact-Parts{
		flex-direction: column;
		align-items: flex-start;
	}
	
	
	/* topic */
	.blog .module-Article-Item{
		padding: 1rem 10%;
	}
	.blog .module-Article-Item-Link{
		padding: 1rem;
	}
	.blog .module-Article-Item-Img{
		width: calc(30% - 1rem);
	}
	.blog .module-Article-Item-Body{
		width: calc(70% - 1rem);
	}
	.blog .module-Article-Item-Title{
		margin: 0 0 0.8rem;
	}
	.blog .module-Article-Item-Body p{
		margin: 0 0 0.8rem;
		font-size: 0.875rem;
	}
	.blog .module-Article-Item-Meta{
		margin: 0;
	}
}