@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------------------------------
 setup
----------------------------------------------------------------------------------------------*/
/* 横幅指定解除*/
.container,
.header .topPart .inner,
.header .bottomPart .btnArea,
.breadCrumb ul,
.side,
.main,
.commonContact .numberArea,
.commonContact .navArea,
.header .bottomPart .inner,
.nav > ul,
.nav > ul > li,
.productDetail .imageGallery,
.productDetail .info,
.footer .inner,
.footer .infoArea,
.footer .navArea,
.mainImage .slider,
.voice .item,
.orderList .orderGroup .topPart .orderDetail,
.orderList .orderGroup .topPart .link,
.orderList .orderGroup .bottomPart .orderItem li .itemWrap,
.orderList .orderGroup .bottomPart .orderItem li .number,
.sitemapList > li { width:auto!important;}

/* 非表示*/
.pcDisplay,
.header .topPart .subNav,
.header .faxBtn,
.header .bottomPart .tel,
.header .bottomPart .btnArea .btn .tx,
.side .cartBox,
.mainImage .slider .sliderPrev,
.mainImage .slider .sliderNext,
.cartTable thead,
.cartTable tr.summary th { display:none!important;}

/*----------------------------------------------------------------------------------------------
 汎用クラス
----------------------------------------------------------------------------------------------*/
.container { margin:0 auto; padding:0 10px 40px;}
.side,.main { float:none;}
.side { padding-top:20px;}

.main .bnrArea { margin-bottom:25px;}
.main .bnrArea li { margin-bottom:10px;}
.main .bnrArea.spType01 { background:#f7f7f2; margin-left:-10px; margin-right:-10px; padding:10px 10px 20px;}
.main .bnrArea.spType01 .title { font-size:1.4em; color:#c79d09; font-weight:bold; text-align:center; margin-bottom:5px;}

.bgLineTitle { background-size:9px auto; font-size:1.5em; padding:12px 10px 14px; letter-spacing:0.05em; margin-bottom:20px; margin-left:-10px; margin-right:-10px;}
.bgLineTitle:after { background-size:100% auto; width:100%; height:6px;}
.borderTitle { border:1px solid #3e3e3e; font-size:1.2em; font-weight:bold; padding:10px 10px; margin-bottom:20px;}
.borderTitle.spWide { border-left:0; border-right:0; margin-left:-10px; margin-right:-10px; margin-top:-1px; font-size:1.4em;}

.pageTitle {}
.pageTitle .inner { width:100%; background:none; background-size:200px auto; height:auto; padding:15px 10px; box-sizing:border-box;}
.pageTitle .inner .tx { padding:0; font-size:2.0em;}

.contBlock { margin-bottom:30px;}
.contBlock.narrow { padding:0;}
.contDesc { margin:20px 0;}
.catch { font-size:1.6em; margin:0 0 30px;}

.commonContact { background-size:14px auto;}
.commonContact .title { font-size:1.4em; padding:12px 0 10px; letter-spacing:0.1em;}
.commonContact .boxBody { padding:20px 20px;}
.commonContact .numberArea,.commonContact .navArea { float:none;}
.commonContact .numberArea .desc { font-size:0.85em;}
.commonContact .navArea { margin-top:15px;}
.commonContact .navArea li { margin-bottom:10px;}
.commonContact .navArea li .btn { margin-bottom:10px;}

.commonImageNav ul { margin-left:-10px; margin-right:-10px; padding:20px 10px 10px; background:#f7f7f2;}
.commonImageNav ul li { margin-bottom:10px;}
.commonImageNav ul li a {}
.commonImageNav ul li a .image { width:30%; padding:5px 0 5px 5px;}
.commonImageNav ul li a .tx { padding:5px 25px 5px 10px; font-size:1.0em; line-height:1.3;}
.commonImageNav ul li a .tx .fa { right:5px;margin-top:-5px; font-size:0.8em;}

.commonTextNav ul { margin-left:-10px; margin-right:-10px; padding:20px 10px 10px; background:#f7f7f2;}
.commonTextNav ul li { margin-bottom:10px;}
.commonTextNav ul li a { padding:15px 30px 15px 10px;}
.commonTextNav ul li a .tx { font-size:0.9em; text-align:left; line-height:1.3;}
.commonTextNav ul li a .tx .fa { right:5px; margin-top:-5px; font-size:1em;}

.catDesc { margin-left:-10px; margin-right:-10px; padding:20px 10px; line-height:1.6; margin-bottom:30px;}
.catDesc .image { float:none; margin:0 auto 15px; text-align:center;}

.spDisplay { display:inherit!important;}

.completeTxt { margin:30px 0 40px; padding:0;}
.completeTxt .tx01 { font-size:1.2em; line-height:1.8; text-align:center;}
.completeTxt.maincolumn{padding:0;}
.completeTxt.maincolumn .borderBox{margin: 0;line-height: 1.8;}
.borderBox { padding:15px;}

/* 商品画像*/
/* M size*/
.commonThumbnail { width:100%; height:120px; }
.commonThumbnail .inner { width:100%; height:120px;}
/* S size*/
.commonThumbnail.small { width:50px; height:50px;}
.commonThumbnail.small .inner { width:50px; height:50px;}
/* L size*/
.commonThumbnail.large { width:100%; height:280px;}
.commonThumbnail.large .inner { width:100%; height:280px;}


/*----------------------------------------------------------------------------------------------
 side
----------------------------------------------------------------------------------------------*/
.side .bnr { margin-bottom:30px; text-align:center;}

.side .catNav { margin-bottom:1px; margin-left:-10px; margin-right:-10px;}
.side .catNav .title { border:0; font-size:1.2em; text-align:left; background: url(../img/meshBg.png) 0 0 repeat #222; background-size:9px auto; color:#fff; margin-bottom:0; padding:15px;}
.side .catNav .title .fa { position:absolute; top:50%; right:15px; margin-top:-8px;}
.side .catNav ul li { border-bottom:1px dotted #ccc;}
.side .catNav ul li:last-of-type { border-bottom:0;}
.side .catNav ul li a { padding:15px 40px 15px 20px; display:block; color:#3e3e3e; text-decoration:none; position:relative;}
.side .catNav ul li a:hover { text-decoration:underline;}
.side .catNav ul li a .fa { position:absolute; top:50%; right:18px; margin-top:-5px; font-size:0.8em;}
/*toggle*/
.side .catNav.toggle .title { cursor:pointer;}
.side .catNav.toggle ul { display:none;}

/*----------------------------------------------------------------------------------------------
 header
----------------------------------------------------------------------------------------------*/
.header .topPart { margin-bottom:0;}
.header .topPart .inner { padding:5px 10px;}
.header .topPart .siteDesc { display:block; float:none; text-align:center; font-size:9px;}
.header .bottomPart .inner { padding:14px 10px 15px;}
.header .bottomPart .logo { width:170px; margin-top:0;}
.header .bottomPart .btnArea { background:#ff0000;}
.header .bottomPart .btnArea .btn { margin-bottom:0; padding:0 8px; border-radius:5px; margin:0; width:42px; z-index:11;}
.header .bottomPart .btnArea .btn .fa-shopping-cart { margin:-5px 0 0 0;}
.header .bottomPart .btnArea .cartBtn { position:absolute; right:60px; top:10px;}

/* ドロワメニュー */
.drawer-hamburger { position:absolute; margin-top:25px!important; margin-right:10px!important; padding:1px 1px 1px 1px; transition:all 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0s;}
.drawer-hamburger-icon,
.drawer-hamburger-icon::after,
.drawer-hamburger-icon::before { height:5px; width:30px; background:#fd7e9c;}
.drawer-hamburger-icon { margin-top:0px; margin-right:40px; }
.drawer-nav { box-shadow:10px 10px 10px rgba(0, 0, 0, 0.0); z-index:11;}
.drawer-overlay { z-index:3; background:rgba(0,0,0,0.0);}
.drawer-open .drawer-hamburger { background:none; margin-right:0!important;}

.nav { border:0;}
.nav > ul > li { display:block; position:relative; float:none; border-left:0; height:auto; width:auto; padding:0; border-bottom:1px solid #cdcdcd;}
.nav > ul > li:last-of-type { border-right:0;}
.nav > ul > li > a { display:block; text-align:left; height:auto; border-bottom:0; padding:12px 30px 12px 15px;}
.nav > ul > li > a .fa { display:inline-block; position:absolute; right:10px; top:50%; margin-top:-4px; font-size:9px;}
.nav > ul > li > a .tx { font-size:1em; line-height:1.3;}
.nav > ul > li > a .tx br { display:none;}

.breadCrumb { padding:10px 0; border-bottom:1px solid #cbcbcb; border-top:1px solid #cbcbcb;}
.breadCrumb ul { width:1000px; margin:0 auto; padding:0 10px; box-sizing:border-box;}
.breadCrumb ul li { font-size:0.85em; display:inline-block; float:left;}
.breadCrumb ul li:after { content:'>'; margin:0 10px 0 8px; line-height:1;}
.breadCrumb ul li:last-of-type:after { content:''; margin:0;}
.pageTitle + .breadCrumb { border-top:0;}


/*----------------------------------------------------------------------------------------------
 footer
----------------------------------------------------------------------------------------------*/
.footer .inner { padding:20px 10px;}
.footer .infoArea { float:none;}
.footer .logo { width:60%; margin:0 auto 10px;}
.footer .fcontact { padding:20px 30px; display:block;}
.footer .fcontact .desc { font-size:0.85em;}
.footer .fnav { border-top:1px solid #cbcbcb; border-left:1px solid #cbcbcb; margin-bottom:0;}
.footer .fnav li { display:block; width:50%; margin-right:0; margin-bottom:0; box-sizing:border-box; float:left; border-right:1px solid #cbcbcb; border-bottom:1px solid #cbcbcb;}
.footer .fnav li:nth-of-type(2n) {}
.footer .fnav li:nth-of-type(3n) { margin-right:0;}
.footer .fnav li a { background:#fff; display:block; vertical-align:middle; padding:12px 20px 12px 10px; position:relative; text-decoration:none; font-size:0.8em;}
.footer .fnav li a .fa { display:inline-block; font-size:8px; position:absolute; right:6px; top:50%; margin-top:-4px;}
.footer .bottomPart { padding:15px 10px; font-size:0.8em;}
.footer .bottomPart .address { color:#fff; margin-bottom:9px;}
.footer .bottomPart .address .tx01,.footer .bottomPart .address .tx02{ display:block;}
.footer .bottomPart .copyright { color:#7c7c7c;}



/*----------------------------------------------------------------------------------------------
 TOP
----------------------------------------------------------------------------------------------*/
.mainImage { height:auto; margin-bottom:0; background-size:12px auto;}
.mainImage:after { height:25px; background:#fff;}
.mainImage .slider { height:auto;}
.mainImage .slider .slick-dots { bottom:-27px;}
.mainImage .slider .slick-dots li { margin:0;}
.mainImage .slider .slick-dots li button::before { width:10px; height:10px;}

.sceneList { margin-bottom:-30px;}
.sceneList li { width:48%; float:left; margin-right:0; margin-bottom:20px;}
.sceneList li:nth-of-type(2n) { float:right;}
.sceneList li .sub { color:#3e3e3e; font-size:0.9em;}

.newsList .item a { padding:15px 10px;}
.newsList .item .date { display:block; width:auto; float:none; padding:0; margin-bottom:5px; font-size:0.85em;}
.newsList .item .name { display:block; padding:0;}

.voice { padding:0;}

.haitatuArea .map{ margin-bottom:30px; text-align:center;}
.haitatuArea .map .image{ float:none; margin:0 0 15px;}
.haitatuArea .map .txtArea { display:block;}

/*----------------------------------------------------------------------------------------------
 商品一覧
----------------------------------------------------------------------------------------------*/
.listParam { margin-top:15px;}
.listParam .desc { font-size:0.9em;}
.productList .item { width:48.5%; margin-right:0; margin-bottom:35px; float:left;}
.productList .item:nth-of-type(2n) { float:right;}
.productList .item .image { margin-bottom:6px;}
.productList .item .name { font-size:1.1em; text-align:left; margin-bottom:6px;}
.productList .item .option input[type='number'] { width:65px; padding-right:2px;}
.productList .item .option .btn { font-size:0.8em; height:30px; margin-left:10px; padding:9px 6px; line-height:1; letter-spacing:-0.1em;}
.productList.inDetail .item:nth-of-type(3) { display:none;}

.pageNav { margin-bottom:50px; padding:20px 10px; margin-left:-10px; margin-right:-10px;}
.pageNav li { margin-right:5px;}
.pageNav li a, .pageNav li.current span { padding:0 9px; font-size:1em; height:30px; line-height:30px;}
.pageNav a { text-decoration:none; transition:0.3s;}
.pageNav li.prev a, .pageNav li.next a { background:none; border:0; font-size:2em;}
.pageNav li.prev a:hover, .pageNav li.next a:hover { opacity:0.7;}

/*----------------------------------------------------------------------------------------------
 商品詳細
----------------------------------------------------------------------------------------------*/
.productDetail { margin-bottom:40px;}
.productDetail .itemName { padding:15px 15px; border-top:0; font-size:2em; margin-bottom:15px;}
.productDetail .imageGallery { float:none;}
.productDetail .imageGallery .slick-slide img { display:inline;}
.productDetail .imageGallery .itemImage .item a { pointer-events:none;}
.productDetail .imageGallery .itemImage ul.slick-dots { margin-top:15px;}
.productDetail .imageGallery .itemImage ul.slick-dots li { width:50px; height:50px; margin-right:10px!important;}
.productDetail .imageGallery .itemImage ul.slick-dots li .thumbnail { height:50px; width:50px;}
.productDetail .imageGallery .itemImage ul.slick-dots li .thumbnail .inner { height:50px; width:50px;}

.productDetail .info { float:none;}
.productDetail .info .price { margin-bottom:20px; font-size:1.4em; font-weight:bold; color:#e94609; line-height:1; text-align:right;}
.productDetail .info .price .number { font-size:1.2em;}
.productDetail .info .desc { line-height:1.6; margin-bottom:20px;}
.productDetail .info .option { padding-bottom:20px; margin-bottom:20px;}
.productDetail .info .option .quantityWrap { display:block; margin-bottom:15px; }
.productDetail .info .option .quantity input[type="number"]{ margin-right:0;}
.productDetail .info .option .btnWrap { display:block; padding:0 20px;}
.productDetail .info .option .btn { display:block; padding:0 5px;}
.productDetail .info .subInfo .item { margin-bottom:10px;}

/*----------------------------------------------------------------------------------------------
 カート
----------------------------------------------------------------------------------------------*/
.stepNav { margin-bottom:20px;}
.stepNav ul li { padding:0 0 0 25px; font-size:0.85em; width:25%;}
.stepNav ul li:after { content:''; border-right:1px solid #cbcbcb; border-bottom:1px solid #cbcbcb; width:27px; height:27px; transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); position:absolute; right:-14px; top:50%; margin-top:-14px;}
.stepNav ul li:first-of-type { border-left:1px solid #cbcbcb; padding-left:10px;}

.cart {}
.cartTable { border-right:1px solid #cbcbcb; border-top:1px solid #cbcbcb;}
.cartTable tr,.cartTable th,.cartTable td { display:block; width:auto!important;}

.cartTable td.item { background:#f6f6f6;}
.cartTable td.quantity,.cartTable td.delete { text-align:right;}
.cartTable td.price:before,
.cartTable td.quantity:before,
.cartTable td.subTotalPrice:before,
.cartTable td.delete:before,
.cartTable tr.summary td:before { content:attr(data-title); display:inline-block; position:absolute; left:10px; top:50%; margin-top:-10px;}
.cartTable tr.summary td { background:#f6f6f6;}

.cart .commonBtnArea.column3 { display:flex; flex-direction:column-reverse; margin-right:0;}
.cart .commonBtnArea.column3 .btn { margin-bottom:15px;}


/*----------------------------------------------------------------------------------------------
 注文予約
----------------------------------------------------------------------------------------------*/
.booking { margin-bottom:30px;}
.bookingtable {border-collapse: collapse; width: 100%;}
.bookingtable td {width: 100%; vertical-align: top; display: block;}
.bookingtable td:nth-child(2){ border-top: none;}
.bookingtable .column { }
.booking .column .title { padding:10px 10px; font-size:1.2em;height:auto;}
.booking .column .columnBody { padding:10px;}
.booking .column .item { margin-bottom:15px;}

/*
.booking .column { width:auto; float:none; border-right:1px solid #cbcbcb;}
.booking .column:first-of-type { border-bottom:0;}
.booking .column .title { padding:10px 10px; font-size:1.2em;height:auto;}
.booking .column .columnBody { padding:10px;}
.booking .column .item { margin-bottom:15px;}
.booking .machH-fix{height: auto;}
*/

/*----------------------------------------------------------------------------------------------
 注文一覧
----------------------------------------------------------------------------------------------*/
.orderList .orderGroup .topPart .orderDetail { float:none; padding-bottom:0;}
.orderList .orderGroup .topPart .orderDetail li { display:block; margin-right:0;}
.orderList .orderGroup .topPart .link { float:none; padding-top:5px;}
.orderList .orderGroup .bottomPart .orderItem li .itemWrap { padding:10px 15px; float:none;}
.orderList .orderGroup .bottomPart .orderItem li .number { display:block; float:none;}
.orderList .orderGroup .bottomPart .orderItem li .number .tx { display:block; padding-top:0;}

/*----------------------------------------------------------------------------------------------
 よくある質問
----------------------------------------------------------------------------------------------*/
.qaList { margin-bottom:80px;}
.qaList .item { margin-bottom:30px;}
.qaList .item .qPart { background:#e6e6e6; margin-bottom:10px; padding:10px 10px 10px 42px;}
.qaList .item .qPart:before { width:24px; height:24px; line-height:24px; font-size:1.1em; left:10px; top:9px;}
.qaList .item .qPart .tx { font-size:1.1em;}
.qaList .item .aPart { padding:10px 10px 0 42px; position:relative;}
.qaList .item .aPart:before { width:24px; height:24px; line-height:24px; font-size:1.1em; left:10px; top:9px;}

/*----------------------------------------------------------------------------------------------
 サイトマップ
----------------------------------------------------------------------------------------------*/
.sitemapList { margin-bottom:20px; margin-left:-10px; margin-right:-10px; margin-top:-20px;}
.sitemapList > li { margin-right:0; margin-bottom:0; float:none;}
.sitemapList > li > a { display:block; border-bottom:1px solid #cbcbcb; background:#f4f4f4; padding:12px 30px 12px 10px; text-decoration:none; position:relative;}
.sitemapList > li > ul { margin:0;}
.sitemapList > li > ul > li { margin-bottom:0; list-style:none;}
.sitemapList > li > ul > li > a { display:block; padding:12px 30px 12px 25px; border-bottom:1px dashed #cbcbcb; position:relative; text-decoration:none;}
.sitemapList > li > ul > li:last-of-type > a { border-bottom:1px solid #cbcbcb;}
.sitemapList.narrow > li { margin-bottom:0;}
.sitemapList li a .fa { display:inherit; font-size:9px; color:#3e3e3e; position:absolute; right:10px; top:50%; margin-top:-4px;}

/*----------------------------------------------------------------------------------------------
 お知らせ
----------------------------------------------------------------------------------------------*/
.newsDetail{margin-bottom: 50px;}
.newsDetail .newsTitle{background: #f6e5b5;padding: 10px; font-weight: bold;font-size:1.2em ;margin: 0 -10px 15px;}
.newsDetail .date{text-align: right;margin-bottom: 15px;}
.newsDetail .newsText{line-height: 1.8;}

/*----------------------------------------------------------------------------------------------
 ログイン
----------------------------------------------------------------------------------------------*/
/* .common_form_wrap{ width:550px; margin:30px auto;} */
.common_form_wrap{ width:100%; margin:5px auto;}
.common_form_wrap .form_inner{ background:#f1f8fc; padding:10px 10px 20px;}
.common_form_wrap table{ width:100%;}
.common_form_wrap table th,.common_form_wrap table td{ padding-bottom:10px;}
.common_form_wrap table th{ vertical-align:middle; text-align:right; padding-right:15px; font-weight:bold;}
.common_form_wrap .form_inner input[type="text"],
.common_form_wrap .form_inner input[type="password"]{ width:100%;}
.common_form_wrap .form_inner .btn_area{ margin-top:10px;}
.common_form_wrap .form_inner .btn{ width:100%;}


.post_list{}
.post_list .item{ border-bottom:1px dashed #d6d6d6; display:table; width:100%;}
.post_list .item .date{ display:table-cell; padding:20px 0 20px 10px; width:100px; font-size:0.8em;}
.post_list .item .ttl{ display:table-cell; padding:20px 10px 20px 0;}
.post_list .item .label_wrap{ display:table-cell; padding:20px 15px 20px 0; width:70px;  }
.post_list .item .label_wrap .label{ display:block; font-size:0.8em;}


.ttl01 .btn{ background:#fff; color:#fd7e9c; position:absolute; right:6px; top:14px; }
.ttl01 .sub_txt{ display:none;}


.swiper {
    /*スライダーの幅と高さを調整*/
    width: 90%;
    height: 120px;
    margin: 0.1rem auto 1rem;
}
    
.swiper-slide {
    /*スライド要素の幅と高さを調整*/
    width: 50px;
    height: 100%;

    /*テキストの位置調整*/
    display: flex;
    justify-content: center;
    align-items: center;
    
    /*テキストの色と太さを指定*/
    color: #fff;
    font-weight: bold;
    }


    /*----------------------------------------------------------------------------------------------
 商品一覧
----------------------------------------------------------------------------------------------*/
.listParam { margin-top:15px;}
.listParam .desc { font-size:0.9em;}
.productList .item { width:48.5%; margin-right:0; margin-bottom:35px; float:left;}
.productList .item:nth-of-type(2n) { float:right;}
.productList .item .image { margin-bottom:6px;}
.productList .item .name { font-size:1.1em; text-align:left; margin-bottom:6px;}
.productList .item .option input[type='number'] { width:65px; padding-right:2px;}
.productList .item .option .btn { font-size:0.8em; height:30px; margin-left:10px; padding:9px 6px; line-height:1; letter-spacing:-0.1em;}
.productList.inDetail .item:nth-of-type(3) { display:none;}
/*
.pageNav { margin-bottom:50px; padding:20px 10px; margin-left:-10px; margin-right:-10px;}
.pageNav li { margin-right:5px;}
.pageNav li a, .pageNav li.current span { padding:0 9px; font-size:1em; height:30px; line-height:30px;}
.pageNav a { text-decoration:none; transition:0.3s;}
.pageNav li.prev a, .pageNav li.next a { background:none; border:0; font-size:2em;}
.pageNav li.prev a:hover, .pageNav li.next a:hover { opacity:0.7;}
*/
/*----------------------------------------------------------------------------------------------
 商品詳細
----------------------------------------------------------------------------------------------*/
.productDetail { margin-bottom:40px;}
.productDetail .itemName { padding:15px 15px; border-top:0; font-size:2em; margin-bottom:15px;}
.productDetail .imageGallery { float:none;}
.productDetail .imageGallery .slick-slide img { display:inline;}
.productDetail .imageGallery .itemImage .item a { pointer-events:none;}
.productDetail .imageGallery .itemImage ul.slick-dots { margin-top:15px;}
.productDetail .imageGallery .itemImage ul.slick-dots li { width:50px; height:50px; margin-right:10px!important;}
.productDetail .imageGallery .itemImage ul.slick-dots li .thumbnail { height:50px; width:50px;}
.productDetail .imageGallery .itemImage ul.slick-dots li .thumbnail .inner { height:50px; width:50px;}

.productDetail .info { float:none;}
.productDetail .info .price { margin-bottom:20px; font-size:1.4em; font-weight:bold; color:#e94609; line-height:1; text-align:right;}
.productDetail .info .price .number { font-size:1.2em;}
.productDetail .info .desc { line-height:1.6; margin-bottom:20px;}
.productDetail .info .option { padding-bottom:20px; margin-bottom:20px;}
.productDetail .info .option .quantityWrap { display:block; margin-bottom:15px; }
.productDetail .info .option .quantity input[type="number"]{ margin-right:0;}
.productDetail .info .option .btnWrap { display:block; padding:0 20px;}
.productDetail .info .option .btn { display:block; padding:0 5px;}
.productDetail .info .subInfo .item { margin-bottom:10px;}


.map_container {
    flex-direction: column;
    width: 100%;
    /* height: 500px;*/
    height: 100%;
}
.map_container .mapside {
    display: none;
    width: 0%;
    height: 0%;
}
.map_container .mapmain {
    /* position: absolute;
    top: 500px;
    left: 0;
    width: 100%;
    height: 100%; */
    position: relative;
    width: 100%;
    height: 500px;
    padding-top: 220%;
}