@charset "utf-8";

/* ------------------------------------------------------------ index */

#firstview { background: #000; text-alfign: center; }
#firstview { position: relative; }
#firstview p { position: absolute; z-index: 10; width: 1100px; left: 0; right: 0; margin: 0 auto; text-align: left; padding: 90px 0 0;}
#firstview ul.thumbs { position: relative; padding-top: 45.75%; }
#firstview ul.thumbs li { position: absolute; top: 0; left: 0; right: 0; background: #231815; display: none; }
#firstview ul.thumbs li.t1 { display: block; }
#firstview ul.thumbs li img { width: 100%; height: auto; margin: 0 auto;}
#firstview ul.thumb-nav { position: absolute; bottom: -28px; text-align: center; width: 100%; }
#firstview ul.thumb-nav li { display: inline-block; *display: inline; float: none;  width: 118px !important;}
#firstview ul.thumb-nav li img { border: 1px solid #7e7e7e; cursor: pointer; }
#firstview ul.thumb-nav .slick-track { margin: 0 auto; }
#firstview ul.thumb-nav .slick-track li { cursor: pointer; }

#firstview .PC { display: block; }
#firstview .SP { display: none; }


#about { background: url(../images/index/bg_01.gif) center top no-repeat #060606; text-align: center; padding: 185px 0 100px;}
#about h2 { font-size: 20px; letter-spacing: 4px; line-height: 40px; padding: 0 0 35px; font-family: serif; }
#about p { line-height: 34px; padding: 0 0 20px;}

#order { background: url(../images/index/bg_13.jpg) center top no-repeat #000; text-align: center; padding: 70px 0 90px; }
#order h3 { padding: 0 0 230px;}
#order ul li { float: left; width: 50%;}
#order ul li h4 { padding: 0 0 20px;}
#order ul li h4.h4 span{ letter-spacing: 0.1em; }
#order ul li p{ letter-spacing: 0.1em; }

#reservation { background: url(../images/index/bg_03.jpg) center top no-repeat #000; padding: 70px 0;}
#reservation .box { float: right; width: 490px; text-align: center;}
#reservation .box h3 { font-size: 16px; padding: 0 0 45px; font-family: 'Lato', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, sans-serif; }
#reservation .box p { font-size: 16px; line-height: 28px; letter-spacing: 1px;}

#stock { background: url(../images/index/bg_08.jpg) center bottom no-repeat #1a1a1a; padding: 70px 0 60px; background-size: contain;}
#stock ul.top { max-width: 1400px; margin: 0 auto; }
#stock .inner { padding: 70px 0 60px; background-size: contain;}
#stock #wrap-stock-category { width: 100%; background: #0d0a0a; }

#entrance { background: url(../images/index/bg_12.jpg) center top no-repeat #000; padding: 50px 0 70px; background-size: cover;}
#entrance h3 span { font-size: 60px;}
#entrance .rental,
#entrance .consultation { float: left; width: 540px; text-align: center; padding: 310px 0 40px;}
#entrance p.text { font-size: 16px; padding: 10px 0 0;} 
#entrance .rental { background: url(../images/index/pic_28.jpg) center top no-repeat #1a1a1a; margin: 0 20px 0 0;}
#entrance .consultation { background: url(../images/index/pic_30.jpg) center top no-repeat #1a1a1a;}


/* ------------------------------------------------------------ news */
#news{ padding: 100px 0; background: #1a1a1a; }
#news h3{ margin: 0 0 40px; }

.news-list{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; width: 900px; margin: 0 auto; }
.news-list li{ width: calc(100% / 2 - 2%); }
.news-list li a{ display: flex; align-items: center; padding: 14px 15px; border-bottom: 1px solid #2e2e2e; box-sizing: border-box; }
.news-list li:first-of-type,
.news-list li:nth-of-type(2){ border-top: 1px solid #2e2e2e; }

.news-list figure{ position: relative; width: 125px; margin: 0 20px 0 0; }
.news-list li.recent-news figure:before{ position: absolute; content: 'NEW!'; width: 50px; padding: 5px; box-sizing: border-box; text-align: center; background: #bc2a0e; line-height: 1; font-size: 13px; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; }

.news-list figure img{ width: 100%; height: auto; }

.news-list .contents{ width: calc(100% - 125px); }
.news-list .news-ttl{ padding: 0 0 5px; font-size: 15px; font-family: 'Lato', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, sans-serif; font-weight: 500; }
.news-list .news-date{ font-size: 13px; letter-spacing: 0.1em; color: #85755e; }



@media only screen and (max-width:640px){

/* ------------------------------------------------------------ common */

/* ------------------------------------------------------------ firstview */

#firstview p img { width: 100%; margin: auto; height: auto; }
#firstview p { width: 90%; padding: 10% 5%; }
#firstview ul.thumbs { padding-top: 107.28%; }
#firstview ul.thumb-nav { bottom: -5%; }
#firstview ul.thumb-nav li { width: 18% !important; padding: 0 0.5% 0;  }
#firstview ul.thumb-nav li img { width: 100%; height: auto; }
#firstview .PC { display: none; }
#firstview .SP { display: block; }

/* ------------------------------------------------------------ about */

#about { background: url(../images/index/bg_01_sp.jpg) center 8% no-repeat #000; padding: 110px 5% 50px; background-size: cover; }
#about h2 { font-size: 17px; line-height: 170%; letter-spacing: 2px; padding: 0 0 15px;}
#about p { font-size: 14px; padding: 10px 0 0; line-height: 220%; }

/* ------------------------------------------------------------ order */

#order { background: #000; padding: 0; }
#order .inner { width: 100%; padding: 0; }
#order h3 { padding: 0 0 60%; }
#order ul li { float: none; width: 100%; }
#order ul li h4 { font-size: 50px; line-height: 120%; padding: 0 0 15px; }
#order ul li h4 span { font-size: 14px; }
#order ul li.order_1 { background: url(../images/index/order_bg3_sp.jpg) center top no-repeat #000; background-size: 100% auto; padding: 5% 0; }
#order ul li.order_2 { background: url(../images/index/order_bg2_sp.jpg) center center no-repeat #000; background-size: 100% auto; padding: 60% 0 10%; }

/* ------------------------------------------------------------ stock */
#stock .inner { padding: 0; }

/* ------------------------------------------------------------ reservation */

#reservation { background: url(../images/index/bg_03_sp.jpg) center top no-repeat #000; background-size: contain; padding: 8% 0 65px; }
#reservation .box { float: none; width: 100%; text-align: center;}
#reservation .box h3 { padding: 0 0 18%; font-size: 14px; }
#reservation .box h3 span { font-size: 55px; padding: 0; }
#reservation .box p { font-size: 13px; }
/* ------------------------------------------------------------ reservation */

#stock { background: url(../images/index/bg_08.jpg) center top no-repeat #000; padding: 40px 0 10%; background-size: contain;}

#entrance { padding: 5% 0; }
#entrance p.text { font-size: 12px; }
#entrance .rental, #entrance .consultation { width: 100%; margin-bottom: 10px; background-size: contain; padding: 55% 0 30px; }
#entrance h3 span { font-size: 50px; }


/* ------------------------------------------------------------ news */
#news{ padding: 50px 0; }
#news h3{ margin: 0 0 30px; }

.news-list{ flex-direction: column; width: 90%; }
.news-list li{ width: 100%; }
.news-list li a{ padding: 8px 0; }

.news-list li.recent-news figure:before{ font-size: 10px; }
	
.news-list .news-ttl{ padding: 0 0 3px; font-size: 12px; }
.news-list .news-date{ font-size: 10px; }



}