@charset "utf-8";

/*============================
ClearFix
============================*/
.header { display: none!important; }
#contents { margin-top: 0!important; }

#special_shimizu { margin: 0; }
#special_shimizu .clearFix::after { clear: both; display: block; content: ""; height: 0; line-height: 0; }
#special_shimizu .md_container { padding: 0 20px; }
#special_shimizu .md_font_mincho { font-family: "zen-old-mincho", sans-serif; font-weight: 400; font-style: normal; }
#special_shimizu .md_font_minchoB { font-family: "zen-old-mincho", sans-serif; font-weight: 700; font-style: normal; }
#special_shimizu .md_font_minchoBB { font-family: "zen-old-mincho", sans-serif; font-weight: 900; font-style: normal; }
#special_shimizu .md_br_pc { display: none; }
#special_shimizu .md_br_sp { display: inline; }
#special_shimizu ul { padding: 0; margin: 0; }
#special_shimizu li { list-style: none; padding: 0; margin: 0; }
#special_shimizu img { vertical-align: top; }
#special_shimizu a { text-decoration: none; }
#special_shimizu table { border-collapse: collapse; }

/*============================
divをモーダルに
============================*/
.md_js_modalArea { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; }
.md_js_modalArea .md_js_modalBg { width: 100%; height: 100%; background-color: rgba(30,30,30,0.9); }
.md_js_modalArea .md_js_modalWrapper { position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 90%; max-width: 90%; padding: 5px; background-color: #fff; box-sizing: border-box; }
.md_js_modalArea .md_js_modalWrapper .md_js_modalContents {}
.md_js_modalArea .md_js_modalWrapper .md_js_modalContents img { width: 100%; height: auto; }
.md_js_modalArea .md_js_closeModal { position: absolute; top: -40px; right: -10px; color: #fff; cursor: pointer; font-size: 1.5em; display: none; }

/*============================
#mainPanelArea
============================*/
#mainPanelArea { height: 600px; text-align: center; padding-top: 100px; box-sizing: border-box; position: relative; overflow: hidden; }
@keyframes zoom {
   0% {
      transform: scale(1.1); 
   }
   100% {
      transform: scale(1); 
   }
}
#mainPanelArea::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/img/special_shimizu/shimizucho_top_mainPanel.png") no-repeat center; background-size: cover; z-index: 0; }
#mainPanelArea::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.05); z-index: 0; }
#mainPanelArea .number { position: relative; z-index: 1; letter-spacing: 0.05em; }
#mainPanelArea .number span { position: relative; display: inline-block; }
#mainPanelArea .number span::before { content: "|"; position: absolute; left: -20px; top: -5px; transform: rotate(-20deg); font-size: 1.25em; }
#mainPanelArea .number span::after { content: "|"; position: absolute; right: -20px; top: -5px; transform: rotate(20deg); font-size: 1.25em; }
#mainPanelArea .area { margin-top: 10px; position: relative; z-index: 1; text-align: center; }
#mainPanelArea .area img { width: 240px; height: auto; margin: 0 auto; }
#mainPanelArea h1 { margin-top: 20px; font-size: 2.375em; color: #fff; line-height: 1.125; position: relative; z-index: 1; }
#mainPanelArea .en { margin-top: 10px; color: #f7e391; position: relative; z-index: 1; letter-spacing: 0.05em; }
#mainPanelArea .tagline { margin-top: 20px; line-height: 1.5; color: #fff; font-size: 1.125em; position: relative; z-index: 1; }

/*============================
#aboutArea
============================*/
#aboutArea { position: relative; overflow: hidden; padding-top: 55px; margin-top: -100px; }
#aboutArea::before { content: ""; position: absolute; left: -10%; top: 0; width: 120%; height: 100px; background: #fff; border-radius: 50% 50% 0 0; }
#aboutArea .image {}
#aboutArea .image img { width: 60%; height: auto; margin-top: -70px; left: -50px; position: relative; }
#aboutArea {}
#aboutArea .subTitle { margin-top: -90px; padding-left: 25%; position: relative; z-index: 1; font-size: 0.875em; }
#aboutArea .title { margin-top: 10px; font-size: 1.5em; line-height: 1.25; padding-left: 25%; position: relative; z-index: 1; }
#aboutArea .copy { margin-top: 20px; line-height: 1.5; text-align: left; font-size: 0.9125em; position: relative; z-index: 1; }
#aboutArea .point { margin-top: 30px; }
#aboutArea .point ul {}
#aboutArea .point ul li { margin-top: 20px; }
#aboutArea .point ul li:nth-child(1) {}
#aboutArea .point ul li:nth-child(2) {}
#aboutArea .point ul li:nth-child(3) {}
#aboutArea .point ul li .pointImage {}
#aboutArea .point ul li .pointImage img { width: 100%; height: auto; }
#aboutArea .point ul li:nth-child(1) .pointImage img { margin-left: -20px; margin-right: 20px; }
#aboutArea .point ul li:nth-child(2) .pointImage img { margin-left: 20px; margin-right: -20px; }
#aboutArea .point ul li:nth-child(3) .pointImage img { margin-left: -20px; margin-right: 20px; }
#aboutArea .point ul li .pointTitle { font-size: 1.25em; margin-top: 10px; padding: 0 20px; }
#aboutArea .point ul li .pointText { font-size: 0.9125em; margin-top: 5px; line-height: 1.75; padding: 0 20px; }

/*============================
#recommendArea
============================*/
#recommendArea { padding: 40px 20px 0; position: relative; z-index: 2; }
#recommendArea::before { content: ""; width: 100%; height: 320px; position: absolute; top: 70px; left: 0; background: #e1f1f9; }
#recommendArea .title { position: relative; }
#recommendArea .title .en { font-size: 2.5em; line-height: 1; }
#recommendArea .title .ja { margin-top: 5px; }
#recommendArea .content { margin-top: -40px; padding-top: 60px; }
#recommendArea .content ul {}
#recommendArea .content ul li { width: 280px; }
#recommendArea .content ul li a { display: block; cursor: pointer; }
#recommendArea .content ul li a .image { overflow: hidden; position: relative; }
#recommendArea .content ul li a .image .button { position: absolute; right: 0; bottom: 0; width: 49px; height: 49px; line-height: 49px; background: rgba(50,50,50,0.5); font-size: 1.125em; text-align: center; transition: 0.2s all; }
#recommendArea .content ul li a .image .button::before { display: block; content: ""; position: absolute; top: 50%; margin-top: 0; right: 12px; width: 21px; height: 1px; background: #ccc; transition: 0.2s all; }
#recommendArea .content ul li a .image .button::after { display: block; content: ""; position: absolute; top: 50%; margin-top: 0; right: 17px; width: 21px; height: 1px; background: #ccc; transform: rotate(90deg) translate(0,-5px); transition: 0.2s all; }
#recommendArea .content ul li a .image img { width: 100%; height: auto; transition: 0.2s all; opacity: 0.9; }
#recommendArea .content ul li a:hover .image img { transform: scale(1.1,1.1); opacity: 1; }
#recommendArea .content ul li a .imageTitle { margin-top: 10px; color: #222; font-size: 1.125em; }
#recommendArea .content ul li a .imageText { margin-top: 5px; color: #222; font-size: 0.9125em; }
#recommendArea .swiper-button-prev { position: absolute; left: inherit!important; right: 30px!important; top: 10px!important; height: 60px!important; width: 60px!important; z-index: 9; background-image: none!important; border-radius: 100px; }
#recommendArea .swiper-button-prev::before { content: ""; position: absolute; left: 0; top: 0!important; width: 16px; margin-top: 30px; height: 16px; border-top: 1px solid #222; border-right: 1px solid #222; -webkit-transform: rotate(225deg); transform: rotate(225deg); pointer-events: none; }
#recommendArea .swiper-button-prev::after { content: ""; position: absolute; left: 0; top: 0!important; width: 22px; margin-top: 38px; height: 1; border-top: 1px solid #222; pointer-events: none; opacity: 0.9; margin-left: -2px; }
#recommendArea .swiper-button-next { position: absolute; left: inherit!important; right: -20px!important; top: 10px!important; height: 60px!important; width: 60px!important; z-index: 9; background-image: none!important; border-radius: 100px; transition: 0.25s all; }
#recommendArea .swiper-button-next::before { content: ""; position: absolute; right: 40px; top: 0!important; width: 16px; margin-top: 30px; height: 16px; border-top: 1px solid #222; border-right: 1px solid #222; -webkit-transform: rotate(45deg); transform: rotate(45deg); pointer-events: none; }
#recommendArea .swiper-button-next::after { content: ""; position: absolute; right: 40px; top: 0!important; width: 22px; margin-top: 38px; height: 1; border-top: 1px solid #222; pointer-events: none; opacity: 0.9; margin-right: -2px; }

/*============================
#scheduleArea
============================*/
#scheduleArea { background: #f2f1ec; padding-top: 40px; padding-bottom: 0; position: relative; overflow: hidden; }
#scheduleArea::after { content: ""; position: absolute; left: -10%; top: -40px; width: 120%; height: 100px; background: #fff; border-radius: 0 0 50% 50%; z-index: 1; }
#scheduleArea .title { text-align: center; z-index: 2; position: relative; }
#scheduleArea .title .en { font-size: 2.5em; line-height: 1; }
#scheduleArea .title .ja { margin-top: 5px; }
#scheduleArea .content { margin-top: 20px; }
#scheduleArea .content .dateTitle { text-align: center; font-size: 1.25em; }
#scheduleArea .content .dateTitle span { display: inline-block; background: #222; color: #fff; border-radius: 40px; padding: 5px 60px; }
#scheduleArea .content .dateTitle.bottom { margin-top: 40px; padding-top: 40px; background: #fff; }
#scheduleArea .content .dateContent {}
#scheduleArea .content .dateContent ul {}
#scheduleArea .content .dateContent ul li { position: relative; padding: 20px 20px 20px 100px; }
#scheduleArea .content .dateContent ul li::after { content: ""; position: absolute; width: 1px; height: 100%; left: 50px; top: 80px; margin-left: -1px; border-left: dashed 1px #555; z-index: 2; }
#scheduleArea .content .dateContent ul li:last-child::after { display: none; }
#scheduleArea .content .dateContent ul li .number { position: absolute; left: 20px; top: 20px; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 1.5em; background: #fff; border-radius: 60px; z-index: 3; }
#scheduleArea .content .dateContent ul li:nth-child(2n) { background: #fff; }
#scheduleArea .content .dateContent ul li:nth-child(2n) .number { background: #f2f1ec; }
#scheduleArea .content .dateContent ul li .data {}
#scheduleArea .content .dateContent ul li .data .image {}
#scheduleArea .content .dateContent ul li .data .image img { width: 100%; height: auto; }
#scheduleArea .content .dateContent ul li .data .time { margin-top: 10px; font-size: 1.125em; }
#scheduleArea .content .dateContent ul li .data .action { margin-top: 10px; font-size: 1em; font-weight: bold; }
#scheduleArea .content .dateContent ul li .data .text { margin-top: 5px; font-size: 1em; line-height: 1.5; }
#scheduleArea .content .dateContent ul li .data .text .example { margin: 5px 0 10px; font-size: 0.875em; }
#scheduleArea .content .dateContent ul li .data .sub { margin-top: 5px; color: #777; font-size: 0.875em; }
#scheduleArea .content .dateContent ul li.none { display: none; }

/*============================
#imageArea
============================*/
#imageArea { margin-top: 0; padding-bottom: 40px; }
#imageArea .image { overflow: hidden; }
#imageArea .image img { width: 140%; height: auto; margin-left: -40%; }

/*============================
#detilArea
============================*/
#detilArea { margin-top: 40px; padding-bottom: 40px; }
#detilArea .title { text-align: center; }
#detilArea .title .en { font-size: 2.5em; line-height: 1; }
#detilArea .title .ja { margin-top: 5px; }
#detilArea .content { margin-top: 20px; }
#detilArea .content table { width: 100%; }
#detilArea .content table tbody {}
#detilArea .content table tbody tr {}
#detilArea .content table tbody tr th { border: solid 1px #ddd; border-left: none; padding: 15px 15px 0; width: 28%; text-align: left; vertical-align: top; box-sizing: border-box; font-size: 0.875em; }
#detilArea .content table tbody tr td { border: solid 1px #ddd; border-right: none; padding: 15px 0 15px 15px; line-height: 1.5; font-size: 0.875em; word-break: break-all; }
#detilArea .content table tbody tr td a { text-decoration: underline; color: #0060D0 ; }

/*============================
#actionArea
============================*/
#actionArea { background: #222; }
#actionArea .leftArea { background: url("/img/special_shimizu/shimizucho_top_reservationArea.png") no-repeat center; background-size: cover; text-align: center; padding: 30px 0; }
#actionArea .leftArea .number { color: #fff; position: relative; }
#actionArea .leftArea .number span { position: relative; display: inline-block; }
#actionArea .leftArea .number span::before { content: "|"; position: absolute; left: -20px; top: -5px; color: #fff; transform:rotate(-20deg); font-size: 1.25em; }
#actionArea .leftArea .number span::after { content: "|"; position: absolute; right: -20px; top: -5px; color: #fff; transform:rotate(20deg); font-size: 1.25em; }
#actionArea .leftArea .tagline { margin-top: 5px; color: #fff; font-size: 0.875em; }
#actionArea .leftArea .title { margin-top: 15px; color: #fff; font-size: 1.5em; line-height: 1.25; }
#actionArea .rightArea { padding-bottom: 25px; }
#actionArea .rightArea .button { margin-top: 25px; text-align: center; }
#actionArea .rightArea .button a { display: inline-block; width: 280px; padding: 12px 0 10px; text-align: center; color: #fff; border: solid 1px #eee; letter-spacing: 0.05em; position: relative; transition: 0.2s all; }
#actionArea .rightArea .button a::after { content: ""; position: absolute; right: 15px; top: 50%; margin-top: -8px; display: block; width: 15px; height: 15px; background: url("/img/special_shimizu/shimizucho_top_reservation_icon.svg") no-repeat center; background-size: 15px auto; transition: 0.2s all; }
#actionArea .rightArea .button a:hover { border: solid 1px #fff; }
#actionArea .rightArea .button a:hover::after { right: 10px; }

/*============================
#galleryArea
============================*/
#galleryArea { margin-top: 40px; padding-bottom: 40px; }
#galleryArea .title { text-align: center; }
#galleryArea .title .en { font-size: 2.5em; line-height: 1; }
#galleryArea .title .ja { margin-top: 5px; }
#galleryArea .text { margin-top: 10px; font-size: 0.875em; text-align: center; line-height: 1.5; }
#galleryArea .content { margin-top: 20px; }
#galleryArea .content::before { content: ""; display: block; position: absolute; left: 0; top: 100px; width: 100%; height: 200px; background: #f5f5f5; z-index: -1; }
#galleryArea .content ul { z-index: 1; position: relative; }
#galleryArea .content ul li { float: left; width: 32%; margin-right: 2%; margin-top: 8px; }
#galleryArea .content ul li:nth-child(3n) { margin-right: 0; }
#galleryArea .content ul li a { display: block; overflow: hidden; cursor: pointer; position: relative; }
#galleryArea .content ul li a .button { position: absolute; right: 0; bottom: 0; width: 39px; height: 39px; line-height: 39px; background: rgba(50,50,50,0.5); font-size: 1.125em; text-align: center; transition: 0.2s all; }
#galleryArea .content ul li a .button::before { display: block; content: ""; position: absolute; top: 50%; margin-top: 0; right: 9px; width: 17px; height: 1px; background: #ccc; transition: 0.2s all; }
#galleryArea .content ul li a .button::after { display: block; content: ""; position: absolute; top: 50%; margin-top: 0; right: 14px; width: 17px; height: 1px; background: #ccc; transform: rotate(90deg) translate(0,-5px); transition: 0.2s all; }
#galleryArea .content ul li a img { width: 100%; height: auto; transition: 0.2s all; opacity: 0.9; }
#galleryArea .content ul li a:hover img { transform: scale(1.1,1.1); opacity: 1; }

@media screen and (min-width:769px){
	
#special_shimizu .md_container { width: 1260px; padding: 0 10px; margin: 0 auto; box-sizing: border-box; }
#special_shimizu .md_br_pc { display: inline; }
#special_shimizu .md_br_sp { display: none; }
	
/*============================
divをモーダルに
============================*/
.md_js_modalArea {}
.md_js_modalArea .md_js_modalBg {}
.md_js_modalArea .md_js_modalWrapper { max-width: 1060px; }
.md_js_modalArea .md_js_modalWrapper .md_js_modalContents {}
.md_js_modalArea .md_js_modalWrapper .md_js_modalContents em {}
.md_js_modalArea .md_js_closeModal {}
	
/*============================
#mainPanelArea
============================*/
#mainPanelArea { height: 960px; padding-top: 170px; min-width: 1260px; }
#mainPanelArea::before { animation: zoom 10s 1; animation-fill-mode: forwards; background-position: center bottom; }
#mainPanelArea .number span { font-size: 1.25em; }
#mainPanelArea .number span::before {font-size: 1.5em; top: -10px; }
#mainPanelArea .number span::after {font-size: 1.5em; top: -10px; }
#mainPanelArea .area {}
#mainPanelArea .area img { width: 508px; height: auto; }
#mainPanelArea h1 { margin-top: 20px; font-size: 3.5em; line-height: 1; letter-spacing: 0.1em; }
#mainPanelArea .en { margin-top: 20px; font-size: 1.125em; letter-spacing: 0.2em; }
#mainPanelArea .tagline { margin-top: 30px; font-size: 1.375em; }

/*============================
#aboutArea
============================*/
#aboutArea { padding-top: 200px; margin-top: -200px;}
#aboutArea::before { height: 280px; top: 30px; }
#aboutArea .image { text-align: center; }
#aboutArea .image img { width: 637px; height: auto; margin-top: -190px; left: -80px; }
#aboutArea {}
#aboutArea .subTitle { font-size: 1.125em; padding-left: 30%; margin-top: -300px; }
#aboutArea .title { font-size: 2em; margin-top: 5px; padding-left: 30%; }
#aboutArea .copy { margin-top: 15px; line-height: 1.75; font-size: 1em; padding-left: 30%; }
#aboutArea .point { margin-top: 80px; }
#aboutArea .point ul { width: 1240px; margin: 0 auto; }
#aboutArea .point ul li { margin-top: 0; float: left; width: 370px; }
#aboutArea .point ul li:nth-child(1) { margin-right: 60px; }
#aboutArea .point ul li:nth-child(2) { margin-left: 0; margin-right: 60px; }
#aboutArea .point ul li:nth-child(3) { margin-right: 0; }
#aboutArea .point ul li .pointImage {}
#aboutArea .point ul li .pointImage img { width: 100%; height: auto; }
#aboutArea .point ul li:nth-child(1) .pointImage img { margin-left: 0; margin-right: 0; }
#aboutArea .point ul li:nth-child(2) .pointImage img { margin-left: 0; margin-right: 0; }
#aboutArea .point ul li:nth-child(3) .pointImage img { margin-left: 0; margin-right: 0; }
#aboutArea .point ul li .pointTitle { font-size: 1.25em; margin-top: 20px; text-align: center; padding: 0; }
#aboutArea .point ul li .pointText { margin-top: 15px; text-align: center; padding: 0 20px; }

/*============================
#recommendArea
============================*/
#recommendArea { padding: 60px 0 60px 15%; height: 740px; box-sizing: border-box; overflow: hidden; }
#recommendArea::before { content: ""; width: 100%; height: 620px; position: absolute; top: 110px; left: 10%; }
#recommendArea .title {}
#recommendArea .title .en { font-size: 4em; }
#recommendArea .title .ja { margin-top: 10px; font-size: 1.125em; }
#recommendArea .content {}
#recommendArea .content ul {}
#recommendArea .content ul li { width: 400px; }
#recommendArea .content ul li a {}
#recommendArea .content ul li a .image {}
#recommendArea .content ul li a .image img {}
#recommendArea .content ul li a .imageTitle { margin-top: 15px; font-size: 1.125em; }
#recommendArea .content ul li a .imageText { margin-top: 10px; font-size: 0.875em; }

/*============================
#scheduleArea
============================*/
#scheduleArea { padding-top: 80px; padding-bottom: 0; }
#scheduleArea::after { height: 240px; top: -120px; }
#scheduleArea .title {}
#scheduleArea .title .en { font-size: 4em; }
#scheduleArea .title .ja { margin-top: 10px; font-size: 1.125em; }
#scheduleArea .content { margin-top: 30px; }
#scheduleArea .content .dateTitle {}
#scheduleArea .content .dateTitle span { padding: 8px 80px; }
#scheduleArea .content .dateContent {}
#scheduleArea .content .dateContent ul {}
#scheduleArea .content .dateContent ul li { padding: 0; min-width: 1260px; }
#scheduleArea .content .dateContent ul li .data { max-width: 1260px; min-height: 280px; padding: 40px 460px 40px 140px; margin: 0 auto; position: relative; box-sizing: border-box; }	
#scheduleArea .content .dateContent ul li .data .number { width: 100px; height: 100px; line-height: 100px; top: 40px; font-size: 2em; }
#scheduleArea .content .dateContent ul li .data .image { position: absolute; right: 0; top: 30px; width: 400px; }
#scheduleArea .content .dateContent ul li .data .image img { width: 100%; height: auto; }
#scheduleArea .content .dateContent ul li .data .time { font-size: 1.125em; letter-spacing: 0.05em; }
#scheduleArea .content .dateContent ul li .data .action {}
#scheduleArea .content .dateContent ul li .data .text {}
#scheduleArea .content .dateContent ul li .data .sub {}
#scheduleArea .content .dateContent ul li::after { left: 50%; margin-left: -561px; }
#scheduleArea .content .dateContent ul li.long { height: 530px; }
#scheduleArea .content .dateContent ul li.veryLong { height: 735px; }

/*============================
#imageArea
============================*/
#imageArea { margin-top: 0; }
#imageArea .image { text-align: center; max-height: 300px; overflow: hidden; }
#imageArea .image img { width: 100%; height: auto; margin-left: 0; }

/*============================
#detilArea
============================*/
#detilArea { margin-top: 80px; padding-bottom: 80px; }
#detilArea .title {}
#detilArea .title .en { font-size: 4em; }
#detilArea .title .ja { margin-top: 10px; font-size: 1.125em; }
#detilArea .content { margin-top: 30px; }
#detilArea .content table {}
#detilArea .content table tbody {}
#detilArea .content table tbody tr {}
#detilArea .content table tbody tr th { padding: 25px; width: 260px; font-size: 1em; font-weight: bold; }
#detilArea .content table tbody tr td { padding: 25px; font-size: 1em; }

/*============================
#actionArea
============================*/
#actionArea { display: table; width: 100%; }
#actionArea .leftArea { display: table-cell; width: 50%; padding: 70px 0 80px; }
#actionArea .leftArea .number {}
#actionArea .leftArea .number span {}
#actionArea .leftArea .number span::before {}
#actionArea .leftArea .number span::after {}
#actionArea .leftArea .tagline { margin-top: 10px; font-size: 1em; }
#actionArea .leftArea .title { margin-top: 20px; font-size: 1.75em; }
#actionArea .rightArea { display: table-cell; width: 50%; padding-bottom: 0; vertical-align: middle; }
#actionArea .rightArea .button { margin-top: 0; }
#actionArea .rightArea .button a { width: 320px; padding: 18px 0 15px; font-size: 1.125em; }
#actionArea .rightArea .button a::after { }

/*============================
#galleryArea
============================*/
#galleryArea { margin-top: 80px; padding-bottom: 80px; }
#galleryArea .title {}
#galleryArea .title .en { font-size: 4em; }
#galleryArea .title .ja { margin-top: 10px; font-size: 1.125em; }
#galleryArea .text { margin-top: 20px; font-size: 1em; }
#galleryArea .content { margin-top: 30px; }
#galleryArea .content::before { left: 0; top: 200px; height: 500px; }
#galleryArea .content ul {}
#galleryArea .content ul li { width: 240px; margin-right: 10px; margin-top: 10px; }
#galleryArea .content ul li:nth-child(3n) { margin-right: 10px; }
#galleryArea .content ul li:nth-child(5n) { margin-right: 0; }
#galleryArea .content ul li img { width: 100%; height: auto; }
}