/*トップページ*/
#top{margin: 2rem 0 5rem;}
#top p{margin-bottom:5rem;}
#top #mv{padding:0px;}
#top #message,#blog,#news{max-width:1180px;margin:0 auto;}
#top h2{text-align:center;}
#blog h2,#news h2,#present h2{text-align:center;}
#message h1{margin-top:0px;}
#message p{text-align:center;}
#message .ttl{font-size:30px;}

#shop h2,#seisansya h2,#present h2:first-child{margin-top: 0px;}
#shop .flex img{width:50%; height: 450px; object-fit: cover;}
.text_box{width: 35%; margin: 0 auto;}

#item h2{margin-top: 0px;}
#top #item p{text-align:center;}
#top #item .flex {width:80%; margin:0 auto;margin-bottom:5rem;}
#top #item .flex a{flex:1;margin-right:2rem;}
#top #item .flex a:last-child{margin-right:0;}
#top #item .flex .nihonsyu{background-image:url(../images/nihonsyu.png);}
#top #item .flex .wine{background-image:url(../images/wine.png);}
#top #item .flex .hakkou{background-image:url(../images/hakkou.png);}
#top #item .flex .select{background-image:url(../images/select.png);}
#top #item .flex a span{font-size: 38px;    background: rgba(245, 242, 237, 0.83);
    display: block;
    color: #82292D;
    width: 80%;
    text-align: center;
    padding: 5rem 0;}
#top #item .flex a{width:50%;height:250px;display: flex;align-items: center;justify-content: center;background-size: cover;box-shadow: 3px 3px 3px #a38686;}
#top #item .flex a:hover{box-shadow:none;}
#online .online{
	display: flex;
	justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    background: #82292D;
    height: 250px;
    color: #000;
    font-size: 32px;
	flex-direction: column;
}
#online .online span:first-child{color: #fff;display: block; margin-bottom: 10px;font-size: 2.8rem;}
#online .online span:last-child{background:#fff;padding: 10px 90px;position:relative;border-radius: 0.2em;}
#online .online span:last-child:after{content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.2em 0 0.2em 0.3em;
    border-color: transparent transparent transparent #82292D;
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);}
#seisansya .background{background-image:url(../images/seisansya_bosyu.png);background-repeat:no-repeat;background-size: cover;}
#seisansya .right_box{width: 40%;margin: 0 auto;margin-left: 45%; padding: 50px 50px;background:#fff;}

#blog .blog,#toukou #blog.item .blog{display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    margin-bottom: -30px;
justify-content: space-between;
padding-right: 3px;}
#blog .blog li,#toukou #blog.item .blog li{
    width: 24%;
    display: flex;
    margin-bottom: 30px;
    box-shadow: 1px 2px 3px #808080;}
#blog .blog li:hover,#toukou #blog.item .blog li:hover{box-shadow:none;    border: 1px solid #f5f2ed;}
#blog .blog>li>.inwrap ,#toukou #blog.item .blog>li>.inwrap{
    display: flex;
    flex-direction: column;
    width: 100%;
}
#blog .blog .imgbox ,#toukou #blog.item .blog .imgbox{
    width: 100%;
    height: 159px;
    overflow: hidden;
	position: relative;
}
#blog .blog .imgbox img,#toukou #blog.item .blog .imgbox img{ width: 100%;height: 100%;object-fit: contain;} 
#blog .blog .imgbox>.arr,#toukou #blog.item .blog  .imgbox>arr{
    background: #82292D;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55px;
    height: 41px;
	transition: .4s;
	margin-bottom:0px;
}
#blog .blog .titlebox,#toukou #blog.item .blog .titlebox{
    background: #fff;
    padding: 10px;
    text-align: center;
    border-top: 0px;
}
#blog .blog .titlebox .title,,#toukou #blog.item .blog .titllebox .tittle{font-size: 1.6rem;}
#blog .blog .imgbox>.arr:before, #blog .blog.imgbox>.arr:after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 6px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    transition: .4s;
}

#blog .blog p,#toukou #blog.item .blog p{color:#000;text-align:left;margin-bottom:5px;}
#news{padding-top:0px;}
#news ul{width:80%;margin: 0 auto 40px;}
#news ul li div{border-bottom:1px solid #ccc; padding: 1.4rem 0;}
#news ul li div p{margin-bottom:0px;}
#news ul li div p:first-child {margin-right:5rem; margin-left: 10rem;}
#news ul li div p:last-child { padding-right: 5rem;width: 70%;}
#news ul li a {color:#000;}
#news ul li div p:first-child {margin-right:5rem; margin-left: 5rem;color:#82292D;}
#blog .blog .date{color:#82292D;font-size: 1.6rem;margin-bottom:0px;}

#top #blog .btn,#top #news .btn,#top #seisansya .btn{margin-top: 5rem;}

#top #news{background:#F5F2ED;max-width:100%;padding:25px 0px;margin:40px 0 80px;}
#top #news h2,
#top #news .flex ul{margin:0px;margin-right:5rem;}
#top #news .flex{max-width: 1180px; margin: 0 auto;justify-content: flex-start;align-items: flex-end;display:flex!important;}
#top #news .flex ul{width:45%;}
#top #news .flex ul li div p:first-child{margin:0 3rem 0 0;}
#top #news .flex ul li div p:last-child {padding-right: 0rem;width: 100%;}
#top #news .flex ul li div {border:none;padding: 0;}
#top #news .flex .btn{margin:0;color:#82292D;background:#F5F2ED;border:1px solid #82292D;padding:5px 0;width:180px;}
#top #news .flex .btn:after{display:none;}
@media screen and (max-width:1000px) {
	#top{margin: 0px 0 5rem;}
	#top #mv{padding:0px; padding-top: 10rem;}
	#top #mv img{width:100%;}
	#top #mv .mv_txt{width: 80%;top: 42%;}
	#top h2{text-align:center!important;}
	#message,#blog,#news{width:90%;margin:0 auto;}
	.text_box {width: 90%;}
	#message p,#top #item p{text-align:left;}
	#message br{margin-bottom:2rem;}
	#shop .flex img{width:100%;margin-bottom:10px;height: 40%;margin-bottom:40px;}
	#top #item{width:90%;margin:0 auto;}
	#top #item .flex{display:flex;justify-content:space-between;}
	#top #item .flex a{ width: 49%;height:auto;margin: 0 0 10px;flex:none;padding:3rem 0;}
	#top #item .flex{width:100%;}
	#top #item .flex a span{ font-size: 24px;padding:2rem 0;}
	#online .online span:last-child{padding:10px 80px;}
	#online .online span:first-child,
	#online .online{font-size:2rem;}
	#online .online{height:180px;}
	#seisansya,#blog{padding-bottom:0px;}
	#seisansya .right_box{width: 95%;margin: 0 auto;padding: 10px;}
	#seisansya .background{ padding: 5rem 0;}
	#blog .blog li{width: calc(50% - 25px);}
	#blog .blog .titlebox { padding:2rem 1.5rem;}
	#blog .blog .imgbox{height:100%;}
	#blog .blog .imgbox img{width:100%;}
	/*#blog .blog .imgbox>.arr{right: 25px;}*/
	#news{margin-top: 10rem;}
	#news ul{width:100%;}
	#news ul li div p:first-child{margin:0px;}
	#news ul li div p{margin-top:0px;}
	#news ul li div{ margin-top: 10px;padding-left: 10px;padding-right: 10px;}
	#news ul li div p:last-child{padding-right:0px;width:100%;}
	#top #news{width:100%;}
	#top #news h2{width:100%; margin:0 0 20px;}
	#top #news .flex{width:90%;margin:0 atuo;}
	#top #news .flex .flex{width:100%;}
	#top #news .flex ul {width:100%;margin-bottom:20px;}
	#top #news .flex .btn{margin:0 auto;}
}
@media screen and (max-width: 760px) {
	#blog .blog{display:block; margin-left: 0;width: 100%; margin: 0 auto;}
    #blog .blog li{width: 100%;margin-left: 0;display: block;}
	#blog .blog>li>.inwrap{display:block;}
}

/*固定ページ・投稿共通*/
#page,#toukou{padding: 10px 0px;}
#page article,#toukou article{max-width:950px;width:100%; margin:0 auto;padding:6rem 0 6rem;}
#page section{padding: 0 0 5rem;}
#page h1{background:#f5f2ed;color:#000;text-align:center; margin: 0px;padding: 4rem; font-size: 4.4rem;letter-spacing: 0.1em;}
#shop h2,#toukou h2,#seisansya h2{text-align:center;}
#page table,#toukou table{width:90%;margin:0 auto 40px;}
#page table tr td:first-child,#toukou table tr td:first-child{background:#fafafa;text-align:left;}
#page .flex img,#toukou .flex img{width:50%;}
@media screen and (max-width: 1000px) {
.nav{height:0px;}
#page,#toukou{padding-top:7rem;}
#page article,#toukou article{width:90%;margin:0 auto;padding: 3rem 0;}
#page section,#toukou section{padding: 0 0 2rem;}
#page h1,#toukou h1{font-size: 2.8rem;padding: 3rem;}
#shop h2,#toukou h2,#seisansya h2,#present h2{text-align:left;}
#page table tr,#toukou table tr{display: flex;flex-direction: column;}
}


/*店舗案内*/
#page #shop table td{padding: 10px 15px 7px;border: 1px solid #ddd;}
#page #shop table td ul {margin-bottom:0px;}
#page #shop table td ul li {margin-bottom:1.5rem;}
#page #shop table td ul li a{color:#82292D;}
#page #shop table td ul li a span{color:#000; font-size:14px;}
#page #shop table td ul li p{font-size:14px;}
#page #shop iframe{height:450px;}
#page #shop .flex img{width:30%;}
#page #shop .text_box{width:63%;}
#page #shop .tensyu{text-align:right;color:#82292D;font-weight: bold;}
@media screen and (max-width: 1000px) {
#page #shop table{width:100%;}
#page #shop .flex {display:flex; flex-direction: column-reverse;}
#page #shop .flex img{width:70%; margin:0 auto 10px;}
#page #shop iframe{height:250px;}
#page #shop .text_box{width:100%;}
	#page #shop .tensyu{margin-bottom:2rem;}
}


/**投稿共通**/
#toukou article{padding:3rem 0 6rem;}
#toukou section{padding: 0 0 10rem;}
#toukou h1{margin: 0px;padding:0rem;font-size: 4rem;letter-spacing: 0.1em;}
#toukou h2,h3{text-align:left;margin:4rem auto 0.5rem;}
#toukou h2{font-size:3rem}
#toukou h3{font-size:2.4rem}
#toukou .honbun p{margin-bottom:2rem;}
#toukou .honbun img{width:auto!important;}
#toukou .breadcrumbs{font-size:16px;background:#f5f2ed;color:#000;padding:0.25rem 0; }
#toukou .breadcrumbs a:hover{color:#82292D;opacity:1;}
#toukou .wrap{display:block;max-width:1180px;width:100%;margin:0 auto;}
#toukou .title_wrap{max-width:1180px;width:100%;margin:0 auto;padding:2rem 8rem;border-bottom:1px solid #82292D;}
#toukou .title_wrap time{font-size:1.6rem;}
@media screen and (max-width: 760px) {
	#toukou .title_wrap{padding:2rem}
}

/**ぺージネーション**/
.navigation{width: 80%;margin: 5rem auto;}
.navigation .nav-links a{color:#82292D;padding: 10px;font-size:1.8rem}
.navigation .nav-links a:hover{text-decoration:none;}
.navigation .nav-links .page-numbers{padding: 10px;font-size:1.8rem;}
.pagination .nav-links {justify-content:center;}
.pagination .nav-links > *{margin:0px;}
.pagination .next{margin:0px;}

/**投稿2カラム**/
#toukou .big_title{background: #f5f2ed;
    color: #000;
    text-align: center;
    margin: 0px;
    padding: 4rem;
    font-size: 4.4rem;
    letter-spacing: 0.1em;}
#toukou .column.flex {padding:0rem 0 6rem;max-width:1180px;justify-content: space-between; align-items: flex-start;}
#toukou .column.flex .left_box{width:75%;}
#toukou .left_box{margin-top:5rem;}
#toukou .left_box section{padding: 2.5rem 0 10rem;}
#toukou #blog .blog{margin-bottom:10px;}
#toukou #blog .blog .imgbox img{width:100%;object-fit: contain;}
#toukou .column.flex.item .blog .imgbox img{background: #f5f2ed;}
#toukou .column.flex .left_box .title_wrap{padding:0 2rem 2rem;}
#toukou .column.flex .left_box img{margin:0 auto 3rem;}
#toukou .column.flex .right_box {width:22%;margin:5rem 0 0;}
#toukou .column.flex .right_box div{background:#f5f2ed;padding:8%}
#toukou .column.flex .right_box h2{text-align:center;padding:10px 0;font-size: 2rem;margin-top:0px;background:#fff;}
#toukou .column.flex .right_box li{border-bottom:1px dashed #82292D;background:#fff;width:100%;height:100%;}
#toukou .column.flex .right_box ul{margin-bottom:0px;}
#toukou .column.flex .right_box li:last-child{border-bottom:0px;}
#toukou .column.flex .right_box li a {display:block;padding:10px 20px;}
#toukou .column.flex .right_box li a:hover{background:#82292D;opacity:1;width:100%;height:100%;color:#fff;}
#toukou .column.flex .right_box .archive{margin-top:8%;}
#toukou .column.flex .right_box .online{background:#82292D;margin-top:8%;}
#toukou .column.flex .right_box .online p{text-align:center;color:#fff;font-size:16px;padding-bottom:5px;}
#toukou .column.flex .right_box .online a span{display:block;background:#fff;color:#82292D;text-align:center;border-radius:5px;padding:5px 0;position:relative;}
#toukou .column.flex .right_box .online a span::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.2em 0 0.2em 0.3em;
    border-color: transparent transparent transparent #82292D;
    position: absolute;
    right: 0.5em;
    top: 50%;
	transform: translateY(-50%);
}
#toukou #blog .blog .imgbox{height:158px;}
@media screen and (max-width: 1000px) {
	#toukou .big_title{ font-size: 2.8rem;  padding: 3rem;}
	#toukou .wrap{width:95%;font-size:12px;}
	#toukou .column.flex .left_box,#toukou .column.flex .right_box {width:100%;}
	#toukou .column.flex .left_box .title_wrap{padding:1.3rem 0px;}
	#toukou .left_box{padding-bottom:5rem;}
	#toukou .left_box section{padding:1.5rem 0 5rem;}
	#toukou .column.flex .left_box img{width:100% ;margin:0 auto;}
	#toukou h1 .wrap{font-size:2rem;margin:0px;}
	#toukou h2, h3{margin:2rem auto 0.5rem;}
	#toukou h2{font-size:2rem;}
	#toukou h3{font-size:1.8rem;}
	#toukou .title_wrap time{padding-left: 0.3rem;font-size: 14px;}
	#toukou #blog .blog {width:100%;}
	#toukou #blog .blog .imgbox{height:208px;}
}



/*商品紹介*/
#toukou #blog.item .blog{justify-content:flex-start;}
#toukou #blog.item .blog li{width:32%;border:none;margin-right:17px;box-shadow:none;border:1px solid #f5f2ed;}
#toukou #blog.item .blog li:nth-of-type(3n){margin-right:0px;}
#toukou #blog.item .blog .titlebox{padding:1rem 1.5rem;}
#toukou .column.flex.item .left_box .flex img{margin:0px;}
#toukou .column.flex.item .left_box .flex .text_box{width:40%;}
#toukou .column.flex.item .btn{width:395px;}
#toukou .column.flex.item .btn:last-child{background:#f5f2ed;color:#000;}
#toukou .column.flex.item .btn:last-child:after{background: url(../images/arr3.png) no-repeat;    background-size: contain;}
#toukou #blog.item .blog .imgbox{height:213px;}
#toukou #blog.item .blog .imgbox>.arr{width:60px;height:46px;margin-bottom:0px;}
#toukou #blog.item .blog a:hover .imgbox>.arr{background:#fff;}
#toukou #blog.item .blog .imgbox>.arr:before {
    background: url(../images/arr2.png) no-repeat;
    background-size: contain;
}
#toukou #blog.item .blog a:hover .imgbox>.arr:before {
    background: url(../images/arr.png) no-repeat;
    background-size: contain;
    opacity: 1; /* 透明度を1にして表示 */
}

#toukou #blog.item .blog .titlebox .title{font-size:1.6rem;}
#toukou #blog.item .seisansya_link{
	text-align:center;
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px #F5F2ED;
    border-bottom: solid 2px #F5F2ED;
	background:none;
}
#toukou #blog.item .seisansya_link:before, #toukou #blog.item .seisansya_link:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #F5F2ED;
}
#toukou #blog.item .seisansya_link:before {left: 20px;}
#toukou #blog.item .seisansya_link:after {right: 20px;}
#toukou #blog.item .seisansya_link a {display:block;margin: 0;  padding: 1rem 2rem;}
@media screen and (max-width: 1000px) {
	#toukou .column.flex.item .btn{width:100%;}
	#toukou .column.flex.item .left_box .flex .text_box{width:100%;margin-top:1rem;}
	#toukou #blog.item .seisansya_link:before {left: 10px;}
	#toukou #blog.item .seisansya_link:after {right: 10px;}	
	#toukou #blog.item .seisansya_link a {padding: 1rem 1rem;}
	#toukou #blog.item .blog{flex-direction:column;}
	#toukou #blog.item .blog li{width:100%;}
}

/**生産者募集**/
#page #seisansya .under{margin-top:7rem;border-bottom:1px solid #82292D;padding-bottom:1rem}
#page #seisansya .text_box{width:45%;}
@media screen and (max-width: 1000px) {
	#page #seisansya .text_box{width:100%;}
	#page #seisansya .flex img{width:100%;margin-bottom:1rem}
}

/**贈答品をお探しの方へ**/
#page #present .blog{display: flex;flex-direction: row;flex-wrap: wrap; margin-left: -25px;overflow: hidden;margin-bottom: -30px;}
#page #present .blog{display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: -25px;
    overflow: hidden;
    margin-bottom: -30px;}
#page #present .blog li{    margin-left: 25px;
    width: calc(33.33% - 25px);
    display: flex;
    margin-bottom: 30px;}
#page #present .blog>li>.inwrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#page #present .blog .imgbox {
    width: 100%;
    height: 280px;
    position: relative;
    overflow: hidden;
}
#page #present .blog .imgbox img{  width: 100%; height: 100%;object-fit: cover;} 
#page #present .blog .imgbox>.arr {
    background: #82292D;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 72px;
    height: 58px;
	transition: .4s;
	margin-bottom:0px;
}
#page #present .blog .titlebox {
    background: #fff;
    padding: 10px;
    text-align: center;
}
#page #present .blog .imgbox>.arr:before, #blog .blog.imgbox>.arr:after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 6px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    transition: .4s;
}
#page #present .blog .imgbox>.arr:before {
    background: url(https://zunablog.xsrv.jp/haneyoshi/wp-content/themes/twentytwenty/assets/images/arr2.png) no-repeat;
    background-size: contain;
}
#page #present .blog .imgbox>.arr:after {
    background: url(../img/common/arr.svg) no-repeat;
    background-size: contain;
    opacity: 0;
}
#page #present .blog p{color:#000;text-align:left;margin-bottom:5px;}

@media screen and (max-width: 1000px) {
#page #present .blog{display:block;}
#page #present .blog li{width:100%;}
#page #present .blog .titlebox { padding: 10px 5px;}
#page #present .blog .imgbox img{width:100%;}
#page #present .blog .imgbox>.arr{right: 25px;}
}

/**ブログ**/
#toukou #blog .blog,#toukou #blog .blog li{display:block;}
#toukou #blog .blog li{width:95%;border:1px solid #f5f2ed;box-shadow: 1px 2px 3px #808080;}
#toukou #blog .blog li:hover{box-shadow:none;}
#toukou #blog .blog>li>.inwrap{flex-direction:row;}
#toukou #blog .blog .imgbox{width:276px;}
#toukou #blog .blog .titlebox{width:67%;border:none;padding:5rem 1.5rem;}
#toukou #blog .blog .titlebox .title{font-size:1.8rem;}
#toukou #blog .blog .fa-clock:before {content: "\f017";}
#toukou #blog .blog .fa-undo-alt:before {content: "\f2ea";}
#toukou #blog .blog .titlebox .renew{ margin:0 0 0 1.5rem; color: #82292D; font-size: 1.6rem;}
#toukou #blog .blog .fas,#toukou #blog .blog .far{padding-right:0.5rem;}
@media screen and (max-width: 1000px) {
	#toukou #blog .blog .flex.day_renew{display:flex;}
	#toukou #blog .blog .imgbox{height:156px;}
}
@media screen and (max-width: 760px) {
	#toukou #blog .blog {padding-right: 3px;}
	#toukou #blog .blog>li>.inwrap { display: block;}
	#toukou #blog .blog .imgbox,#toukou #blog .blog .titlebox,#toukou #blog .blog li{width:100%;}
	#toukou #blog .blog .imgbox{height:100%;}
	#toukou #blog .blog .titlebox{padding: 2rem 1.5rem;}
	#toukou #blog .blog .imgbox img{max-height: 285px;}
}

/**お問い合わせフォーム**/
#page #form p{text-align:center;}
#page #form .form {width:100%;}
#page #form .form tr{background:#fafafa; padding: 10px;border-bottom:5px solid #fff;}
#page #form .form,#page #form .form .left,#page #form .form .right{border:none;}
#page #form .form .left{width:35%;padding: 10px 15px 7px;font-weight:normal;}
#page #form .form .left p{text-align:left;}
#page #form .form .right{width:65%;}
#page #form .form .right input,
#page #form .form .right textarea{border-color:#eee;}
#page #form .button{background:#82292D;width:300px;}
#page #form .button:hover{text-decoration:none;}
input[type="submit"]:hover{text-decoration:none;opacity:0.5;}
form{width: 90%; margin: 0 auto;}
@media screen and (max-width: 1000px) {
	form,
	#page #form .form .left,
	#page #form .form .right{width: 100%;padding:0.5em 0px;}
	#page #form .form .left{padding:0px 0px 0px 0.5rem;}
	#page #form p.mb20{text-align:left;margin-bottom:2rem;}
	input[type="text"],input[type="email"],textarea{padding:10px;}
	input[type="submit"]{width:80%;}
}

/*お問い合わせ確認*/
#page #form .flex.confirm .left {font-family: 游明朝, YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
#page #form .flex.confirm .right p{text-align:left;padding: 1.5rem 1.8rem;background:#fff;font-family: sans-serif;font-size:1.6rem}
#page #form .wpcf7-form-control.wpcf7-previous{background:#eee;color:#000; margin-right: 5rem;width:300px;}
#page #form .wpcf7-form-control.wpcf7-previous:hover{text-decoration:none;opacity:0.5;}
@media screen and (max-width: 1000px) {
	#page #form .form-confirm .wpcf7-form-control.wpcf7-previous{width:80%;margin:4rem auto 0;}
	#page #form .form-confirm input[type="submit"]{margin-top:1rem;}
}

/**カルーセル**/
#top #mv .carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#top #mv .carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* スムーズなスライド動き */
    will-change: transform; /* レンダリングのパフォーマンスを向上 */
    touch-action: pan-x; /* 水平方向のスワイプを許可 */
	position: relative; /* 位置を相対的に */
}


#top #mv .carousel-image {
    width: 363px; /* 画像の固定幅 */
    height: 363px; /* 画像の固定高さ */
    max-width: 363px;
}

#mv a {
    margin: 0 15px; /* aタグに余白を追加 */
    display: inline-block; /* aタグのサイズを子要素に合わせる */
}

#top #mv .carousel-nav {
    text-align: center;
    margin-top: 10px;
}

#top #mv .dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

#top #mv .dot.active {
    background-color: #717171;
}

/* スマホ画面用のスタイル調整 */
@media screen and (max-width: 768px) {
    #top #mv .carousel {
        width: 100%; /* カルーセル全体を画面幅に合わせる */
        overflow: hidden; /* 画像がはみ出さないようにする */
    }

    #top #mv .carousel-track {
        display: flex;
        justify-content: flex-start; /* トラックの開始位置を左に揃える */
        transform: translateX(0); /* 初期位置をリセット */
    }

    #top #mv .carousel-image {
         /*width: 100vw; 画面全体に1枚の画像を表示 */
        height: auto; /* 高さを自動調整 */
        max-width: 100vw; /* 画面幅いっぱいに表示 */
    }

    #mv a {
        margin: 0; /* 画像の間隔をなくす */
    }
	#top #mv .dot {
    height: 7px;
    width: 7px;
	}
}