/* CSS Document */

/*.about-content-region h2{
	font-size:var(--fs70);
}*/
#shop-list h2,.takuhai-l h4,#shop-info h2,.news-section-header h2,#instagram-section h2{
	font-size:var(--fs40);
}
.toukou-flex h3,.contact-name,.okagesamade-txt h4{
	font-size:var(--fs36);
}
.shop-card-title,.info-card-title{
	font-size:var(--fs34);
}
.shop-card-label,.takuhai-l p,.h3-wrap h3{
	font-size:var(--fs30);
}
.hero-txt-wrapper,#shop-list .en,#shop-info .en,.contact-en,.news-section-header h2 span,#instagram-section p{
	font-size:var(--fs26);
}
.about-p{
	font-size:var(--fs25);
}
.news-card-title,.okagesamade-txt p{
	font-size:var(--fs24);
}
.toukou-flex a p,.news-button,.shop-card-text,.section-header p,.info-card-text,.news-card-date{
	font-size:var(--fs20);
}
.shop-card-tags span,.news-footer a,#instagram-section .shop-card-btn{
	font-size:var(--fs18);
}

.shop-card-text,.shop-card-btn,.shop-card-tags span,.info-card-text,.news-card-date,.news-footer a,.toukou-flex a p,.toukou-flex .news-button{
	font-family: var(--zen-kaku-gothic-new);
}

#hero{
	height:auto;
	background-color:#e6e6e6;
	aspect-ratio:1920/1080;
	width:100%;
	position:relative;
}
#topVideo,#topVideo-sp {
	cursor: pointer;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	aspect-ratio:1920/1080;
	width:100%;
}
	

.slider-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.slider-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
	z-index: 1;
}

.slider-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slider-item.active {
	opacity: 1;
	z-index: 2;
}


.hero-logo {
	/*display:none;*/
	position: absolute;
	top: 50%;
	left: 73%;
	transform: translate(-50%, -50%);
	z-index: 10;
	transition:all 0.3s;
}
.hero-img-wrapper{
	width:220px;
	height: 360px;
}

.logo-type-1, .logo-type-2 {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all 1s;
	width:100%;
}

[data-current-flag="1"] .logo-type-1 {
	opacity: 1;
}

[data-current-flag="2"] .logo-type-2 {
	opacity: 1;
}

.hero-txt-wrapper{
	writing-mode: vertical-rl;
	text-orientation: upright;
	white-space: nowrap;
	letter-spacing: -0.35em; 
	transition: all 1s;
	margin: 10px auto auto;
	line-height: 1.3em;
}
.hero-txt-wrapper span{
	writing-mode: rl;
	letter-spacing: 0.01em;
}
[data-current-flag="1"] .hero-txt-wrapper {
	color: var(--black);
	text-shadow: 0 0 10px var(--white),0 0 10px var(--white),0 0 10px var(--white);
}

[data-current-flag="2"] .hero-txt-wrapper {
	color: var(--white);
	text-shadow: 0 0 10px var(--black),0 0 10px var(--black),0 0 10px var(--black);
}

.hero-news{
	width:85%;
	max-width:1600px;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
	background-color:var(--white);
	position: absolute;
	right: 0;
	transform: translateY(-50%);
	height: auto;
	z-index: 10;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 1.5% 0 1.5% 30px;
}
.toukou-flex h3{
	color:var(--hover-red);
	margin: 0;
}
.toukou-flex a,.news-button{
	text-decoration:none;
}
.toukou-flex .news-button{
	display:flex;
	align-items: baseline;
	column-gap: 10px;
}
.toukou-flex .news-button img,.news-footer a img{
	width:13px;
}
.toukou-flex a p{
	color:var(--black);
	margin: 0;
}
.news-button{
	color:var(--gray);
}
.news-button-pc{
	width:25%;
}
.news-button-sp{
	display:none;
}
.toukou-flex{
	display:flex;
	justify-content: flex-start;
	align-items: center;
	column-gap: 5%;
	width:80%;
}
.hero-news-region{
	display:flex;
	column-gap: 20px;
	border-bottom: 1px dashed var(--gray);
	width:50%;
}
.news-header-sp{width:25%;}

.shop-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/*gap: 40px;*/
	margin-bottom: 80px;
}
#shiten-region .shop-card:last-child{
	margin-bottom: 0;
}

.shop-card:nth-of-type(even) {
	flex-direction: row-reverse;
}

.shop-card-content {
	/*flex: 1;*/
	width: 39%;
}
.shop-card-text{max-width:480px;}

.shop-card-img {
	/*flex: 1;*/
	width:50%;
}
.shop-card-title{
	margin: 30px auto;
}
.shop-card-tags{
	display: flex;
	gap: 0.3rem;
	flex-wrap: wrap;
}
.shop-card-tags span{
	border: 1px solid var(--gray);
	line-height: 1em;
	padding: 10px;
	/*display: inline-block;*/
	background-color:var(--white);
}

.shop-card-img img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

#shop-list{
	padding-top:10%;
}

.shop-info img{width:20px;}
#shiten-region{
	margin-top: 10%;
	padding-top:7.5%;
	padding-bottom: 10%;
}
#shop-list h2{
	text-align: center;
	margin: 0 auto 5%;
	line-height: 1.25em;
}
#shop-list h2 span,#shop-info h2 span{
	color:var(--gray);
}
#shop-list article,#shop-list .h3-wrap{
	max-width:var(--max);
	width:80%;
}
#shop-list .h3-wrap{
	margin:auto;
}
#shop-list article{
	margin: auto auto 10% auto;
}
#shop-list .h3-wrap{
	border-bottom:1px solid var(--gray);
	margin-bottom: 5%;
}
#shop-list h3{
	width:fit-content;
	color:var(--white);
	background-color:var(--gray);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 7.5px 15px;
	line-height: 1em;
	margin:0;
}
.zenkoku-takuhai{
	border-radius: 15px;
	overflow: hidden;
	border: 2px solid #666666;
	display:flex;
	justify-content: space-between;
	position: relative;
}
.takuhai-l{
	width:50%;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.takuhai-l h4,.takuhai-l p{
	width:85%;
}
.takuhai-l h4{
	line-height: 1em;
    display: flex;
    column-gap: 15px;
	align-items: center;
	margin: 0 auto 20px;
}
.takuhai-l h4 img{
	width:60px;
}
.takuhai-l p{
	margin:0 0 4%
}
.takuhai-l p span{
	color:var(--hover-red);
}
.takuhai-r{
	width:50%;
	/*max-width:503px;*/
}

.takuhai-l .shop-card-btn {
  margin-left: 8% !important;
  margin-right: auto !important;
}

#shiten-region{
	width:100%;
	background-color:#f7f7f7;
}
#shop-info{
	padding:10% 0;
}
#shop-info h2{
	text-align: center;
    margin: 0 auto 5%;
    line-height: 1.25em;
}
.section-header p{
	text-align:center;
}
#shop-info .section-header p{
	margin:-50px auto 80px;
}
.info-card{max-width:600px;}
#shop-info .shop-card-btn{
	margin:7.5% auto 0;
}
.info-grid {
	width: 80%;
	max-width:var(--max);
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px 30px;   
}

.info-card-title {
	background-color: #222;     
	color: #fff;
	text-align: center;
	padding: 20px;
	margin: 0 auto;
	letter-spacing: 0.03em;
	line-height: 1em;
}

.info-card-img img {
	width: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.info-grid {
		grid-template-columns: 1fr;
	}
}

#news {
	background-color: #f2f2f2;
	padding: 80px 0;
	position: relative;
}
.news-section-header{
	position:absolute;
	top: 0;
	transform: translateY(-50%);
	
}
.news-section-header h2{
	display: flex;
	align-items: center;
	column-gap: 30px;
}
.news-section-header h2 span{
	color:var(--gray);
}
.news-inner{
	width:80%;
	max-width:var(--max);
	margin: auto;
}
.news-toukou-flex{
	display:flex;
	width:100%;
	justify-content: space-between;
	align-items: flex-start;
}

.news-list {
	display: flex;
	/*gap: 20px;*/
	justify-content: space-between;
	margin-top: 40px;
}

.news-card {
	background-color: #fff;
	width: calc(33.333% - 23px);
	padding: 15px;
	transition: transform 0.3s;
	aspect-ratio:1/1;
}

.news-card a {
	text-decoration: none;
	color: #333;
}

.news-card:hover {
	transform: translateY(-5px);
}

.news-card-img {
	background-color: #999;
	aspect-ratio: 358 / 238;  
	overflow: hidden;
}

.news-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card-title {
	margin: 15px 0 5px;
}

.news-card-date {
	color: var(--gray);
	text-decoration: none;
}

.news-footer {
	text-align: right;
	margin-top: 30px;
}
.news-footer a{
	color:var(--gray);
	text-decoration: none;
	display: flex;
	justify-content: flex-end;
	gap: 5px;
	align-items: baseline;
}

#contact-nav {
	border-top: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
	background-color: #f2f2f2;
}

.contact-grid {
	display: flex;
}

.contact-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--black);
	border-right: 1px solid var(--black);
	position: relative;
	transition: background-color 0.3s;
	height: 450px;
}

.contact-item:last-child {
	border-right: none;
}

.contact-item:hover {
	background-color: #e0e0e0;
}

.contact-item::after {
	content: "";
	position: absolute;
	right: 5px;
	bottom: 5px;
	border-style: solid;
	border-width: 0 0 15px 15px;
	border-color: transparent transparent #222 transparent;
}

.contact-name {
	font-weight: bold;
	line-height: 1.25em;
	margin-top: 10px;
}

.contact-grid .en{font-weight:bold;}
.contact-en {
	color: var(--gray);
}

#about{
	background-size:cover;
	position: relative;
	padding: 7.5% 0;
	background-color: #e6e6e6;
}
.about-back2{
	width:100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.about-content-region{
	position: relative;
	z-index:1;
	display:flex;
	flex-direction: column;
	width:80%;
	margin: auto;
	max-width:1420px;
}
.about-content-region h3{
	order:1;
	color:var(--white);
	font-size:9.9vw;
	text-align: center;
	margin: auto;
	width:95%;
	z-index: 2;
	line-height: 1em;
}
.about-h2-region{
	order:2;
	display:flex;
	justify-content: space-between;
}
.about-l{
	max-width: 495px;
	width: 35%;
	margin-top: 5%;
	height: 100%;
}
.about-r{
	margin-top:-3%;
	max-width: 495px;
	width: 35%;
	height: 100%;
}
.about-content-region h2{
	font-size:4vw;
	writing-mode: vertical-rl;
	text-orientation: upright;
	white-space: nowrap;
	margin-top:-4.5%;
	z-index: 3;
	letter-spacing: -0.1em;
	-webkit-appearance: none; /* iOS標準ボタンスタイルをリセット */
	appearance: none;
}
@supports (-webkit-touch-callout: none) {
	.about-content-region h2{
		letter-spacing: 0.2em;
	}
}
.about-content-region h2 span{
	font-size:2.75vw;
}
.shirokuma-main-img{
	order:3;
	max-width: 800px;
	width: 57%;
	margin: -38% auto auto;
	z-index: 3;
}
.about-p{
	order:4;
	text-align: center;
}
.about-illust{
	order:5;
	display:flex;
	justify-content: space-between;
	margin-top: -20%;
}
.about-illust-l{
	max-width: 458px;
	width: 57%;
}
.about-illust-l1{
	max-width:229px;
	margin: -15% 20% 20% auto;
}
.about-illust-l2{
	max-width:392px;
	width:100%;
}
.about-illust-r{
	max-width:458px;
	width:33%;
	margin-top: -25%;
    margin-right: -2%;
    aspect-ratio: 458 / 596;
    height: fit-content;
}
.about-illust-l{
	display:flex;
	flex-direction: column;
}
.okagesamade{
	width:80%;
	margin: auto;
	max-width:var(--max);
	display:flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 5%;
}
.okagesamade img{
	max-width:443px;
	width:34%;
}
.okagesamade-txt{
	width:44%;
}
.okagesamade-txt h4{
	line-height: 1em;
	margin: 5% auto;
}
#about .shop-card-btn{margin:auto;}

.roll-slider {
	overflow: hidden;
	display: flex;
	width: 100%;
	height: 657px; /* スライダー全体の高さ */
	position: relative;
	margin:5% auto auto;
}

.roll-track {
	display: flex;
	flex-shrink: 0;
	width: 3760px; /* 画像を並べた時の合計幅（長めに設定） */
	position: relative;
	animation: roll 60s linear infinite; /* 60秒かけて一周 */
}

/* アニメーションの定義 */
@keyframes roll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

/* 各画像の個別設定（ここでバラバラにする） */
.roll-item {
	position: absolute;
}

.roll-item img {
	width: auto;
}

/* 位置とサイズの調整例 */
.item1 {bottom: 0px;  left: 0px; }
.item2 {top: 30px; left: 200px; }
.item3 {bottom: 0px;  left: 450px; }
.item4 {top: 120px; left: 770px; }
.item5 {bottom: 0px;  left: 1350px; }
.item6 {top: 0px;  left: 1550px; }
.item7 {bottom: 0px; left: 1670px; }
.item8 {top: 60px;  left: 2040px; }
.item9 {top: 110px; left: 2400px; }
.item10 {top: 65px;  left: 3230px; }


/*インスタ*/
#instagram-section{
	padding:10% 0;
}
.instagram-content-region{
	width:80%;
	max-width: var(--max);
	margin: auto;
}
#sbi_load,.sb_instagram_header{
	display:none;
}
#instagram-section p{
	color:var(--gray);
}
#instagram-section h2,#instagram-section p{
	text-align: center;
	margin: auto;
}
#instagram-section p{
	margin-bottom:2.5%;
}
#instagram-section .shop-card-btn{
	margin: 5% auto 0;
}

/*インスタここまで*/
/*以下レスポンシブ*/
@media(max-width:1500px){
	.about-illust {
		margin-top: 0;
		justify-content: space-evenly;
		width:90%;
		margin: auto;
	}
	.about-illust-l1 {
		margin: 20% auto auto 0;
		width:65%;
	}
	.about-illust-l2 {
		margin: auto;
		width:80%;
	}
	.about-illust-r {
		width: 50%;
		margin-top: 0;
	}
	.info-card-title span{display:inline-block;}
}
@media(max-width:1450px){
	.info-card-title{
		/*height: 90px;
		display: flex;
		align-items: center;
		justify-content: center;*/
	}
}
@media(max-width:1300px){
	#shop-list article, #shop-list .h3-wrap {
		width: 90%;
	}
	.shop-card-content {
		width: 45%;
	}
	.shop-card {
		align-items: flex-start;
	}
	.shop-card-tags span{
		margin-bottom: 5px;
	}
}
.news-card:nth-child(4) {
    display: none;
}
@media(max-width:1200px){
	.news-list{flex-wrap:wrap;}
	.news-card {
		width: calc(50% - 20px);
		margin-bottom: 5%;
	}
	.news-card:nth-child(4) {
    display: block;
	}
}

@media(max-width:900px){
	.okagesamade{
		width:90%;
	}
	.okagesamade-txt {
		width: 50%;
	}
	#about .shop-card-btn {
		margin: 5% auto auto;
	}
	.zenkoku-takuhai{
		display:block;
		padding:5%;
		width: 65%!important;
	}
	.takuhai-l,.takuhai-r{width:100%;}
	.takuhai-r{margin:5% auto auto;}
	.takuhai-l h4,.takuhai-l p{
		width:100%;
		margin:4% 0 0
	}
	.hero-news{
		width: 90%;
	}
}
.br850{
	display:none;
}
@media(max-width:850px){
	.br850{
		display:block;
	}
}
@media(max-width:800px){
	
	.okagesamade,
	#shop-list article, #shop-list .h3-wrap{
		width:80%;
	}
	.shop-card {
		display: block;
	}
	.shop-card-content {
		width: 100%;
	}
	.shop-card-img {
		width: 126%;
		right: 13%;
		position: relative;
	}
	.shop-card-btn {
		margin: 7.5% auto;
	}
	.hero-news{
		width: 95%;
		padding: 2% 5%;
	}
	#about{
		padding: 15% 0;
	}
	.news-button-pc{
		display:none;
	}
	.news-button-sp{
		display:block;
	}
	.toukou-flex{
		display:block;
		width:90%;
	}
	.news-header-sp{
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	.hero-news-region,.news-header-sp {
		width: 100%;
	}
	.hero-news-region{
		margin-left:6%;
	}
	.toukou-flex h3{margin:0;}
	
	.toukou-flex a p{
		margin:0;
	}
	.toukou-flex a{
		padding-bottom:2%;
		white-space: nowrap;
	}
}
@media(max-width:767px){
	.okagesamade-txt p{
		text-align:center;
	}
	#hero{
		aspect-ratio: unset;
		height: 100vh;
	}
	#topVideo,#topVideo-sp{
		aspect-ratio: unset;
		width: 100%;
		object-fit: cover;
		height: 100vh;
	}
	.takuhai-l p{
		font-size:var(--fs20);
	}
	.about-content-region{
		width: 95%;
	}
	.about-content-region h3 {
		font-size: 12vw;
	}
	.about-content-region h2 {
		font-size: 8vw;
		margin-right: 0;
		margin-left: 0;
	}
	.about-l ,.about-r{
		width: 38%;
	}
	.about-content-region h2 span{
		font-size: 6vw;
    }
	.about-content-region h3 {
		margin-bottom: 10%;
	}
	.shirokuma-main-img {
		margin: -27% auto auto;
	}
	.shirokuma-main-img {
		width: 80%;
	}
	.about-p {
	    width: 80%;
		margin: auto;
	}
	.about-p span{
		display:inline-block;
	}
	.roll-track{
		width:3286px;
	}
	.roll-slider{
		height:579px;
	}
	.roll-item img {
		transform: scale(0.8);
	}
	
	.item1 {left: 0px; }
	.item2 {left: 160px; }
	.item3 {left: 400px; }
	.item4 {left: 670px; }
	.item5 {left: 1200px; }
	.item6 {left: 1360px; }
	.item7 {left: 1480px; }
	.item8 {left: 1800px; }
	.item9 {left: 2100px; }
	.item10 {left: 2850px; }
	.okagesamade {
		display: block;
	}
	.okagesamade img {
		width: 70%;
		margin: auto auto -10%;
		display: block;
	}
	.okagesamade-txt{
		width:100%;
		text-align: center;
	}
	.shop-card-btn {
		width: min(300px, 100%);
	}
	#shop-list article{
		margin: auto auto 20% auto;
	}
	.okagesamade, #shop-list article, #shop-list .h3-wrap {
        width: 80%;
    }
	/*.okagesamade-txt p span{display:inline-block;}*/
	#shop-info .section-header p span{
		display:inline-block;
	}
	#shop-info .section-header{
		max-width: 80%;
		margin: auto;
	}
	#shop-info .section-header p {
		margin: auto auto 50px;
	}
	#shop-info {
		padding: 15% 0;
	}
	#shiten-region {
		padding-bottom: 0;
	}
	.news-inner {
		width: 80%;
	}
	.news-card {
		width: calc(50% - 2%);
	}
	#news {
		padding: 5% 0 10%;
	}
	.contact-item {
		height: auto;
		padding: 5%;
		text-align: center;
	}
	.zenkoku-takuhai{
		margin-bottom: 0 !important;
		margin-top: -10% !important;
	}

	.takuhai-l .shop-card-btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }

	#instagram-section {
		padding: 15% 0;
	}
	.ci1{
		width:min(50px,32%);
	}
	.ci2{
		width:min(34px,24%);
	}
	.ci3{
		width:min(25px,19%);
	}
}
@media(max-width:600px){
	.zenkoku-takuhai{width:90%!important;}
    #about {
        padding: 20% 0 15%;
	}
}
@media(max-width:550px){
	.okagesamade-txt p span{display: inline-block;}
}
@media (max-width: 500px) {
    #about {
        padding: 25% 0 15%;
	}
	.contact-grid{flex-wrap: wrap;}
	.contact-item {
		height: 200px;
		width: 33%;
	}
	.contact-name{
		width:4em;
		line-height: 1em;
	}
	.contact-en{
		line-height:1.2em;
		margin-top: 5%;
	}
	.contact-item:nth-child(1),.contact-item:nth-child(2){
		/*flex: 0 0 50%;
		border: 1px solid var(--black);*/
	}
}

.responsive-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* スマホで1行 */
    overflow: hidden;
    
    /* 念のための追加 */
    text-overflow: ellipsis; /* 三点リーダーを表示 */
    word-break: break-all;
}

.amyu-tyousei{
	white-space: nowrap;
}
@media(max-width:400px){
	.okagesamade-txt h4 span{
		display: inline-block;
		line-height:1.3;
	}
	.shop-card-title{line-height:1.5;}
	.amyu-tyousei{
		white-space: normal;
	}
	.amyu-tyousei span{
		display: inline-block;
	}
}