@charset "utf-8";
/* CSS Document */
.project{
	background-image: url("../images/logo-deco.svg");
	background-size: 450px;
	background-repeat: no-repeat;
	background-color:rgba(255,255,255,0.9);
	background-blend-mode:lighten;
    background-position:-10% -20%;
}

.project-btn {
	display:flex;
	justify-content:center;
	gap:10px;
	max-width:640px;
	margin:auto;
}
.project-btn1 {
	width:48%;
}
.project-btn1 a{
	display:block;
	background-color:#FFAFC0;
	padding:10px;
	border-radius:50px;
	color:#fff;
	width:100%;
	text-align:center;
}
.project-btn1 a:hover{
	opacity:0.7;
}
@media(max-width:768px){
.project-btn1 a{
	padding:6px;
}	
}
@media(max-width:520px){
.project-btn1 a{
	padding:8px 6px;
	font-size:15px;
}	
.project-btn {
	gap:10px;
	max-width:640px;
	flex-wrap:wrap;
}
.project-btn1 {
	width:100%;
}
}
.kasu-intro{
	
}
.kasu-intro p{
	font-size:20px;
	font-weight:bold;
	text-align:center;
	padding-bottom:30px;
}
.kasu-intro p span{
	display:inline-block;
}
.hoiku-intro2 {
	font-size:20px;
	font-weight:bold;
	text-align:center;
	padding:30px 0 5px 0;
	position:relative;
	margin-bottom:15px;
	border-bottom:dotted 3px #DC6B82;
	display:inline-block;
}
/*.hoiku-intro2::after{
	content: '';
  	position: absolute;
  	bottom: -10px;
	left:50%;
	transform: translateX(-50%);
  	width: 150px;
  	height: 3px;
  	color: #DC6B82;
}*/
.hoiku-intro2 span{
	display:inline-block;
}

.hoiku-circle {
	width:100px;
	height:100px;
	border-radius:50px;
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:-50px;
	left:50%;
	transform: translateX(-50%);
}


@media(max-width:520px){
.hoiku-intro {
	font-size:18px;
	padding-bottom:20px;
}
.hoiku-intro2 {
	font-size:18px;
	padding:20px 0 10px 0;
}	
.hoiku-intro2::before{
  	top: 52px;
}
.hoiku-circle {
	width:85px;
	height:85px;
	border-radius:45px;
}
}
/*hagu育について*/
.haguiku-intro p{
	margin:30px 0;
}
.haguiku-intro1 {
	font-size:20px;
	font-weight:bold;
	color:#DC6B82;
	text-align:center;
}
.haguiku-intro1 span{
	display:inline-block;
}
.haguiku-points {
	margin-top:50px;
}
.haguiku-points h3{
	font-size:20px;
	text-align:center;
	margin-bottom:20px;
}
.haguiku-points h3 .slash1{
	display:inline-block;
	width:2px;
	height:20px;
	background-color:#FFC08B;
	transform: translateX(100%) translateY(25%)  rotate(-50deg);
	margin-right:10px;
}
.haguiku-points h3 .slash2{
	display:inline-block;
	width:2px;
	height:22px;
	background-color:#FFC08B;
	transform: translateX(0%) translateY(10%) rotate(-25deg);
	margin-right:10px;
}
.haguiku-points h3 .slash3{
	display:inline-block;
	width:2px;
	height:22px;
	background-color:#FFC08B;
	transform: translateX(100%) translateY(10%) rotate(25deg);
	margin-left:5px;
}
.haguiku-points h3 .slash4{
	display:inline-block;
	width:2px;
	height:20px;
	background-color:#FFC08B;
	transform: translateX(0%) translateY(25%)  rotate(50deg);
	margin-left:10px;
}
.haguiku-points ul{
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.haguiku-points ul li{
	width:49%;
	height:230px;
	padding:10px 30px;
	border-radius:10px;
	margin:10px 0;
}
.haguiku-points ul .haguiku-point1{
	background-color:#FBF6DD;
}
.haguiku-points ul .haguiku-point2{
	background-color:#F7DAC1;
}
.haguiku-points ul .haguiku-point3{
	background-color:#B8DDC7;
}
.haguiku-points ul .haguiku-point4{
	background-color:#CCE1B2;
}
.haguiku-points ul li h4{
	font-size:18px;
	margin:20px 0 10px 0;
}
@media(max-width:1200px){
.haguiku-points ul li h4{
	font-size:18px;
	margin:15px 0 10px 0;
}
.haguiku-points ul li{
	width:49%;
	height:250px;
	padding:10px 30px;
	border-radius:10px;
	margin:10px 0;
}
}
@media(max-width:960px){
.haguiku-points ul li h4{
	font-size:18px;
	margin:10px 0 7px 0;
}
.haguiku-points ul li{
	width:49%;
	height:285px;
	padding:7px 20px;
	border-radius:10px;
	margin:10px 0;
}
}
@media(max-width:768px){
.haguiku-points ul li h4{
	font-size:18px;
	margin:10px 0 10px 0;
}
.haguiku-points ul li{
	width:49%;
	height:290px;
	padding:7px 20px;
	border-radius:10px;
	margin:10px 0;
}
.haguiku-intro1 {
	font-size:18px;
}
.haguiku-intro p{
	margin:20px 0;
}
}
@media(max-width:640px){
.haguiku-points ul li h4{
	font-size:16px;
	margin:7px 0 5px 0;
}
.haguiku-points ul li{
	width:49%;
	height:290px;
	padding:7px 15px;
	border-radius:10px;
	margin:10px 0;
	font-size:15px;
}
}
@media(max-width:520px){
.haguiku-points ul li h4{
	font-size:16px;
	margin:auto;
}
.haguiku-points ul li{
	width:100%;
	height:auto;
	padding:15px 20px;
	border-radius:10px;
	margin:7px 0;
	font-size:15px;
}
}
/*一日の流れ*/
.schedule {
	padding-top:30px;
}
.schedule-btn {
	display:flex;
	justify-content:center;
}
.schedule-btn1 {
	margin:5px;
}
.schedule-btn1 a{
	background-color:#FFAD68;
	display:block;
	width:220px;
	padding:5px;
	border-radius:50px;
	color:#fff;
	font-weight:bold;
	text-align:center;
}
@media(max-width:520px){
.schedule {
	padding-top:10px;
}
.schedule-btn {
	display:block;
	margin:auto;
}
.schedule-btn1 {
	margin:7px 0;
}
.schedule-btn1 a{
	width:300px;
	padding:5px;
	border-radius:50px;
	margin:auto;
}	
}
.schedule-age{
	display:flex;
	justify-content:center;
	margin-bottom:30px;
}
.schedule h3{
	font-size:18px;
	text-align:center;
	margin:30px 0;
	display:block;
	position:relative;
}
.schedule h3::before{
	content:"";
	width:50px;
	height:5px;
	position:absolute;
	border-bottom:dotted 4px #FFC08B;
	top:50%;
	transform: translateY(-50%);
	right:110%;
}
.schedule h3:after{
	content:"";
	width:50px;
	height:5px;
	position:absolute;
	border-bottom:dotted 4px #FFC08B;
	top:50%;
	transform: translateY(-50%);
	left:110%;
}
/*タイムフロー*/
.schedule1-1 {
	display:flex;
	justify-content:space-between;
	margin-left:50px;
}
.timeflow {
	position: relative;
    border-left: 10px solid #FFDEC2;
}
.timeflow2 {
	position: relative;
    margin-left:10px;
}
.timeflow-circle, .timeflow-circle2 {
	background-color:#EB9BAB;
	width:100px;
	height:100px;
	border-radius:50px;
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	left:50%;
	transform: translateX(-55%);
}
.timeflow-circle2 {
	padding:0 0 0 5px;
}
.timeflow-circle3{
	padding:0 0 0 0;
}
.timeflow-circle3 p{
	text-align:center!important;
}
.timeflow-circle p{
	font-size:25px;
	font-weight:bold;
	color:#fff;
}
.timeflow-circle2 p{
	font-size:21px;
	font-weight:bold;
	color:#fff;
	text-align:left;
}
.timeflow-content {
	margin:0 0 30px 70px;
	display:flex;
	justify-content:space-between;
	width:95%;
}
.timeflow-content span{
	display:block;
	font-size:20px;
	margin-bottom:5px;
	font-weight:bold;
}
.timeflow-content1 {
	width:50%;
}
.timeflow-content1 .caution{
	padding:10px 0;
	font-weight:bold;
}
.timeflow-content1 table{
	margin:8px 0;
}
.timeflow-img {
	width:50%;
	height:auto;
	margin:0 15px;
}
/*長期休暇*/
.vacation{
	
}
.vacation ul{
	padding-left:25px;
}
.vacation ul li{
	list-style: disc;
}
/*入っていない画像分*/
.timeflow-img2 {
	width:50%;
	height:150px;
	background-color:#f2f2f2;
	margin:0 15px;
}
.schedule1 {
	max-width:768px;
	margin:auto;
	padding-bottom:30px;
}
@media(max-width:768px){
.timeflow-content {
	margin:0 0 30px 50px;
	width:97%;
}	
.timeflow-circle, .timeflow-circle2 {
	background-color:#EB9BAB;
	width:85px;
	height:85px;
	border-radius:50px;
}
.timeflow-circle2 {
	padding:0 0 0 5px;
}
.timeflow-circle p{
	font-size:22px;
	font-weight:bold;
	color:#fff;
}
.timeflow-circle2 p{
	font-size:18px;
}	
.timeflow-content span{
	display:block;
	font-size:18px;
	margin-bottom:5px;
	font-weight:bold;
}
.timeflow-content1 p{
	font-size:15px;
}
}
@media(max-width:640px){
.timeflow-content {
	margin:0 0 30px 70px;
	display:block;
	justify-content:space-between;
	width:95%;
}
.timeflow-content1 {
	width:100%;
}
.timeflow-img {
	width:90%;
	margin:20px 0;
}
}
@media(max-width:520px){
.timeflow-content {
	margin:0 0 30px 50px;
	display:block;
	justify-content:space-between;
	width:95%;
}
.timeflow-content1 {
	width:100%;
}
.timeflow-img {
	width:100%;
	margin:20px 0;
}
.timeflow-circle, .timeflow-circle2 {
	background-color:#EB9BAB;
	width:80px;
	height:80px;
	border-radius:40px;
}
.timeflow-circle2 {
	padding:0 0 0 5px;
}
.timeflow-circle p{
	font-size:22px;
	font-weight:bold;
	color:#fff;
}
.timeflow-circle2 p{
	font-size:18px;
}	
.schedule1-1 {
	margin-left:35px;
}
}
@media(max-width:520px){
.timeflow-content1 table{
	font-size:15px;
}
}
/*お知らせ*/
.news1 {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.news-box {
	width:30%;
	margin:20px 0;
}
.news-img {
	background-color:#F2F2F2;
	width:100%;
	height:150px;
	border-radius:8px;
}
.news-box-title {
	margin-top:10px;
}
.news-box-title p span{
	font-size:15px;
	color:#C3C3C3;
}
@media(max-width:960px){
.news1 {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.news-box {
	width:48%;
	margin:20px 0;
}
.news-img {
	background-color:#F2F2F2;
	width:100%;
	height:150px;
	border-radius:8px;
}
}
@media(max-width:520px){
.news-box {
	width:100%;
	margin:20px 0;
}
}
/*ニュース記事*/
.article-box {
	
}
.news-date{
	color:#DC6B82;
}
.article-content{
	
}
.article-content span{
	font-size:20px;
	font-weight:bold;
	display:block;
	padding:10px 0;
}
.article-img{
	margin-top:30px;
	background-color:#f2f2f2;
	width:100%;
	height:300px;
}
/*お知らせここまで*/
/*各種帳票DL*/
.forms {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	padding:30px 0 0 0;
}
.form1 {
	width:32%;
}
.forms-img {
	width:100%;
	height:250px;/*画像はいったらautoにする*/
	background-color:#f2f2f2;
}
.form-btn{
	margin:20px 0;
}
.form-btn a{
	display:block;
	text-align:center;
	background-color:#FFAFC0;
	color:#fff;
	border-radius:50px;
	padding:10px;
	font-size:15px;
}
.form-btn a span{
	display:inline-block;
}
@media(max-width:640px){
.forms {
	display:flex;
	justify-content:space-between;
	padding:30px 0 0 0;
}
.form1 {
	width:48%;
}
}
@media(max-width:520px){
.forms {
	display:flex;
	justify-content:space-between;
	padding:30px 0 0 0;
}
.form1 {
	width:100%;
	margin-bottom:10px;
}
}
/*施設一覧*/
.facility {
	padding-top:30px;
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.facility1 {
	width:32%;
	background-color:#fff;
	padding:15px 10px;
	border-radius:10px;
	margin:10px 0;
}
.facility2 {
	width:48%;
	background-color:#fff;
	padding:15px 10px;
	border-radius:10px;
	margin:10px auto;
}
.facility-img {
	width:95%;
	margin:auto;
	height:auto;
}
.facility-info {
	width:95%;
	margin:auto;
	margin-top:8px;
}
.address {
	
}
.address p{
	font-weight:bold;
	font-size:18px;
	margin-bottom:10px;
}
.address p span{
	font-weight:bold;
	font-size:14px;
	margin-left:5px;
	color:#EB9750;
}
.address table{
	border-collapse:collapse
}
.address th{
	width:20%;
    padding:25px 0;
	background-color:#EB9750;
	color:#fff;
	text-align:center;
	border-bottom:solid 5px #fff;
}
.address .green{
	width:20%;
	background-color:#48A86D;
	color:#fff;
	text-align:center;
}
.address td{
	width:80%;
	padding-left:10px;
}
@media(max-width:960px){
.facility1 {
	width:48%;
	background-color:#fff;
	padding:15px 10px;
	border-radius:10px;
	margin:10px 0;
}
}
@media(max-width:768px){
.facility {
	padding-top:0px;
}
.facility2{
	width:80%;
	background-color:#fff;
	padding:15px 10px;
	border-radius:10px;
	margin:10px auto;
}
}
@media(max-width:520px){
.facility1 {
	width:100%;
	background-color:#fff;
	padding:15px 10px;
	border-radius:10px;
	margin:10px 0;
}
.facility2{
	width:100%;
	background-color:#fff;
	padding:15px 10px;
	border-radius:10px;
	margin:10px auto;
}
}
/*hagu児童発達支援事業・放課後等デイサービス事業*/
.hagumethod-intro {
	
}
.hagumethod-intro p{
	text-align:center;
	font-weight:bold;
	line-height:30px;
}
.hagumethod-intro p .font-pink{
	color:#DC6B82;
}
.hagumethod-intro p span{
	display:inline-block;
}
.hagumethod-points {
	padding-top:20px;
	display:flex;
	justify-content:center;
}

.hagumethod-point1, .hagumethod-point2, .hagumethod-point3 {
	width:150px;
	height:150px;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:5px;
}
.hagumethod-point1 {
	background-color:#ECD452;
	border-radius: 48% 52% 58% 42% / 42% 35% 65% 58%;  
}
.hagumethod-point2 {
	background-color:#48A86D;
	border-radius: 48% 52% 42% 58% / 61% 63% 37% 39%;  
}
.hagumethod-point3 {
	background-color:#EB9750;
	border-radius: 54% 46% 33% 67% / 48% 59% 41% 52% ;  
}
.hagumethod-point1 p, .hagumethod-point2 p, .hagumethod-point3 p{
	color:#fff;
	text-align:center;
	font-size:18px;
	font-weight:bold;
}
@media(max-width:640px){
.hagumethod-point1, .hagumethod-point2, .hagumethod-point3 {
	width:120px;
	height:120px;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:5px;
}	
}
@media(max-width:520px){
.hagumethod-intro p{
	line-height:25px;
}
.hagumethod-point1 p, .hagumethod-point2 p, .hagumethod-point3 p{
	color:#fff;
	text-align:center;
	font-size:15px;
	font-weight:bold;
}
.hagumethod-point1, .hagumethod-point2, .hagumethod-point3 {
	width:110px;
	height:110px;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:2px;
}	
}


/*お互いさまチケット*/
.ticket-box {
	margin-top:40px;
}
.ticket-box p{
	
}
.ticket-box p span{
	font-weight:bold;
	display:inline-block;
	border-bottom:solid 2px #DC6B82;
	margin-bottom:10px;
	padding-bottom:3px;
	text-align:center;
}
.ticket-box .non-border span{
	border-bottom:none;
}
.ticket-box p .cut{
	display:inline-block;
	border-bottom:none;
	margin-bottom:0;
	padding-bottom:0;
}
.ticket-box table{
	border-collapse: collapse;
	width:100%;
}
.ticket-box th{
	border:solid 1px #543822;
	padding:10px;
}
.ticket-box td{
	border:solid 1px #543822;
	padding:10px;
}
.ticket-box td a{
	color:#DC6A81;
}
.ticket-box td a:hover{
	opacity:0.7;
}
.ticket-box .table2 th{
	border:none;
	padding:5px;
}
.ticket-box .table2 td{
	border:none;
	padding:5px;
}
.ticket-box .table3 th{
	border:none;
	text-align:left;
	padding:10px 5px;
}
.ticket-box .table3 th a{
	color:#543822;
}
.ticket-box .table3 td{
	border:none;
	padding:10px;
}
.ticket-box .table3 .text-td-r{
	text-align:right;
}
@media(max-width:960px){
.ticket-box .table3 th{
	display:block;
	padding:10px 10px 5px 0;
}
.ticket-box .table3 td{
	display:block;
	padding:0 10px 10px 10px;
}
}
@media(max-width:520px){
.ticket-box p{
	font-size:15px;
}
.ticket-box p span{
	font-size:16px;
}
.ticket-box th{
	padding:5px 3px;
}
.ticket-box td{
	padding:5px;
}
.ticket-box th{
	font-size:14px;
}
.ticket-box td{
	font-size:14px;
}	
}
.flow-otagaisama {
	font-weight:bold;
	margin:25px 0 20px 0;
}
.npo-fukushima {
	margin:20px 0;
	padding-left:30px;
}
.npo-fukushima li{
	list-style:decimal;
	padding:5px 0;
}
.npo-fukushima-link {
	
}
.npo-fukushima-link li{
	padding:5px 0;
}
.npo-fukushima-link li i{
	margin-right:5px;
	font-size:15px;
}
.npo-fukushima-link li a{
	color:#DC6B82;
}
.npo-fukushima-link li a:hover{
	opacity:0.7;
}
@media(max-width:520px){
.npo-fukushima li{
	font-size:15px;
}	
.npo-fukushima-link li{
	font-size:15px;
}
.npo-fukushima-link li i{
	font-size:13px;
}
}
.planning{
	line-height:25px;
	margin:5px 0;
}
.planning i{
	padding:0 6px 0 4px;
	font-size:12px;
}
.caution{
	font-weight:bold;
	margin-top:10px;
}
.kasu-intro {
	padding-top:40px;
}

.kasu-intro-box {
	background-color:#fff;
	width:100%;
	margin:20px auto;
	padding:0 20px 20px 20px;
	border-radius:20px;
	border:solid 2px #DC6B82;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.kasu-intro-box ul{
	margin:auto;
}
.kasu-intro-box ul li{
	text-align:center;
	margin:20px auto;
}
.kasu-intro-box ul li{
	text-align:center;
	margin:20px auto;
}
.kasu-intro-box ul li .kasu-list{
	font-size:20px;
	margin-bottom:15px;
	font-weight:bold;
}
.kasu-intro-box ul li .cut{
	display:inline-block;
}
/*.kasu-intro-box ul li::before{
	content:"";
	display:inline-block;
	background-color:#EB9750;
	width:15px;
	height:15px;
	border-radius:15px;
	margin-right:5px;
}
.back-color-green::before{
	background-color:#48A86D!important;
}
.back-color-yellow-green::before{
	background-color:#9CC66A!important;
}*/

.kasuzukeshokudou_logo {
	width:80%;
	margin:auto;
	max-width:250px;
}
.kasuzukeshokudou_logo img{
	width:100%;
	margin:auto;
	display:block;
}

.about-kasu {
	width:100%;
	margin:auto;
	max-width:650px;
}
.about-kasu p{
	text-align:center;
	margin-bottom:20px;
}

.kasu-time {
	
}
.kasu-time table{
	border-collapse: collapse;
	width:100%;
	/*max-width:650px;*/
	margin:auto;
}
.kasu-time th{
	text-align:center;
	background-color:#FFE9ED;
	width:90px;
	border:solid 1px #CFCFCF;
}
.kasu-time td{
	padding:10px 10px;
	border:solid 1px #CFCFCF;
}
.kasu-info1 {
	margin-top:20px;
	margin-bottom:40px;
}

.kasu-img1 {
	display:flex;
	justify-content:space-between;
	margin:50px auto auto auto!important;
}
.kasu-img1-1 {
	width:32%;
}
.kasu-img1-1 img{
	width:100%;
	display:block;
	border-radius:20px;
}

.kasu-info1{
	text-align:center;
}
.kasu-info1 p{
	margin-bottom:20px;;
}
.kasu-insta{
}
.insta-icon {
	width:30px;
	display:block;
	display:flex;
	justify-content:center;
	flex-direction:column;
	align-items:center;
	margin:auto;
}
.insta-icon img{
	width:100%;
	display:block;
}

.kasu-delivery {
	display:flex;
	max-width:300px;
	margin:auto;
	gap:20px;
}
.kasu-delivery span{
	border:solid 1px #ddd;
	display:block;
}
.kasu-delivery span img{
	display:block;
	width:100%;
}

.kasu-info2 {
	border:dotted 3px #FFDCE2;
	padding:30px;
	border-radius:10px;
}

.kasu-img2 {
	display:flex;
	justify-content:center;
	gap:20px;
}


/* 粕漬食堂hagu：写真ギャラリー */
.kasu-gallery {
	max-width: 900px;
	margin: 50px auto 0;
}

.kasu-img1 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: clamp(155px, 21vw, 230px);
	gap: 10px;
	margin: 0 !important;
}

/* 1段目は3枚、2段目は2枚で、各段の高さをそろえる。 */
.kasu-img1-1:nth-child(1),
.kasu-img1-1:nth-child(2),
.kasu-img1-1:nth-child(3) {
	grid-column: span 4;
}

.kasu-img1-1:nth-child(4),
.kasu-img1-1:nth-child(5) {
	grid-column: span 6;
}

.kasu-img1-1 {
	appearance: none;
	display: block;
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #F7F2EF;
	overflow: hidden;
	cursor: zoom-in;
}

.kasu-img1-1 img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.kasu-img1-1:focus-visible,
.kasu-gallery-arrow:focus-visible,
.kasu-gallery-dot:focus-visible {
	outline: 3px solid #DC6B82;
	outline-offset: 3px;
}

.kasu-gallery-controls {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.kasu-img1-1:hover img {
		transform: scale(1.04);
	}
}

@media (max-width: 768px) {
	.kasu-gallery {
		max-width: none;
		margin: 32px -20px 0;
	}

	.kasu-img1 {
		display: flex;
		grid-template-columns: none;
		grid-auto-rows: auto;
		gap: 14px;
		margin: 0 !important;
		padding: 0 20px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		cursor: grab;
		touch-action: pan-x;
	}

	.kasu-img1::-webkit-scrollbar {
		display: none;
	}

	.kasu-img1:focus-visible {
		outline: 3px solid #DC6B82;
		outline-offset: -3px;
	}

	.kasu-img1.is-dragging {
		cursor: grabbing;
		user-select: none;
		scroll-snap-type: none;
	}

	.kasu-img1-1,
	.kasu-img1-1:nth-child(n) {
		grid-column: auto;
		flex: 0 0 min(76vw, 340px);
		height: clamp(230px, 62vw, 320px);
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	.kasu-img1-1 img {
		pointer-events: none;
	}

	.kasu-gallery-controls {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr) 40px;
		align-items: center;
		gap: 12px;
		width: min(280px, calc(100% - 40px));
		margin: 16px auto 0;
	}

	.kasu-gallery-arrow {
		appearance: none;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		padding: 0 0 3px;
		border: 1px solid #DC6B82;
		border-radius: 50%;
		background: #fff;
		color: #DC6B82;
		font-family: Arial, sans-serif;
		font-size: 31px;
		line-height: 1;
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.kasu-gallery-arrow:hover {
		background: #DC6B82;
		color: #fff;
	}

	.kasu-gallery-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}

	.kasu-gallery-dot {
		appearance: none;
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #D8C7C9;
		cursor: pointer;
		transition: width 0.2s ease, background-color 0.2s ease;
	}

	.kasu-gallery-dot.is-active {
		width: 22px;
		border-radius: 10px;
		background: #DC6B82;
	}
}

/* クリック時の拡大表示 */
body.kasu-lightbox-open {
	overflow: hidden;
}

.kasu-lightbox[hidden] {
	display: none;
}

.kasu-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 24px;
}

.kasu-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(25, 18, 14, 0.88);
}

.kasu-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) 58px;
	align-items: center;
	width: min(1100px, 100%);
	max-height: 100%;
}

.kasu-lightbox__figure {
	min-width: 0;
	margin: 0;
}

.kasu-lightbox__image {
	display: block;
	width: 100%;
	max-width: 920px;
	max-height: calc(100vh - 110px);
	margin: 0 auto;
	border-radius: 12px;
	object-fit: contain;
	background: #1B1715;
}

.kasu-lightbox__caption {
	margin-top: 12px;
	color: #fff;
	font-size: 14px;
	text-align: center;
}

.kasu-lightbox__close,
.kasu-lightbox__arrow {
	appearance: none;
	border: 0;
	color: #fff;
	background: transparent;
	cursor: pointer;
}

.kasu-lightbox__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 38px;
	height: 38px;
	font-size: 34px;
	line-height: 1;
}

.kasu-lightbox__arrow {
	width: 58px;
	height: 58px;
	font-family: Arial, sans-serif;
	font-size: 50px;
	line-height: 1;
}

.kasu-lightbox__close:focus-visible,
.kasu-lightbox__arrow:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.kasu-lightbox {
		padding: 18px 8px;
	}

	.kasu-lightbox__dialog {
		grid-template-columns: 38px minmax(0, 1fr) 38px;
	}

	.kasu-lightbox__arrow {
		width: 38px;
		height: 46px;
		font-size: 38px;
	}

	.kasu-lightbox__image {
		max-height: calc(100vh - 150px);
		border-radius: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kasu-img1-1 img,
	.kasu-gallery-arrow,
	.kasu-gallery-dot {
		transition: none;
	}
}