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

#sasayama { margin: 0; }
#sasayama .clearFix::after { clear: both; display: block; content: ""; height: 0; line-height: 0; }
#sasayama .md_container { padding: 0 20px; }
#sasayama .md_font_mincho { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: 400; font-style: normal; }
#sasayama .md_font_minchoB { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: 700; font-style: normal; }
#sasayama .md_font_minchoBB { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: 900; font-style: normal; }
#sasayama .md_rl { writing-mode: vertical-rl; }
#sasayama .md_br_pc { display: none; }
#sasayama .md_br_sp { display: inline; }
#sasayama ul { padding: 0; margin: 0; }
#sasayama li { list-style: none; padding: 0; margin: 0; }
#sasayama img { vertical-align: top; }
#sasayama a { text-decoration: none; }
#sasayama table { border-collapse: collapse; }

/*============================
#mainPanelArea
============================*/
#mainPanelArea { position: relative; box-sizing: border-box; height: 520px; }
#mainPanelArea .mainPanelImage { position: absolute; display: block; overflow: hidden; width: 100%; height: 600px; z-index: 0; }
#mainPanelArea .mainPanelImage img { width: 100%; height: auto; min-height: 520px; object-fit: cover; }
#mainPanelArea h1 { position: absolute; display: block; top: 28px; left: 50%; transform: translateX(-50%); height: auto; padding: 34px 0 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 12%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.2) 92%, rgba(0, 0, 0, 0)); z-index: 1; color: #fff; font-size: 1.75em; letter-spacing: 0.25em; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); white-space: nowrap; }
#mainPanelArea h1 span { opacity: 0; position: relative; animation-name: topPanel-animate; animation-duration: 2s; animation-fill-mode: forwards; }
#mainPanelArea h1 span:nth-child(1) { animation-delay: 1.6s; }
#mainPanelArea h1 span:nth-child(2) { animation-delay: 1.8s; }
#mainPanelArea h1 span:nth-child(3) { animation-delay: 2s; }
#mainPanelArea h1 span:nth-child(4) { animation-delay: 2.2s; }
#mainPanelArea h1 span:nth-child(5) { animation-delay: 2.4s; }
#mainPanelArea h1 span:nth-child(6) { animation-delay: 2.6s; }
#mainPanelArea h1 span:nth-child(7) { animation-delay: 2.8s; }
#mainPanelArea h1 span:nth-child(8) { animation-delay: 3s; }
#mainPanelArea h1 span:nth-child(9) { animation-delay: 3.2s; }
	@keyframes topPanel-animate {
		0% { opacity: 0; bottom: 20px; }
		100% { opacity: 1; bottom: 0; }
	}
#mainPanelArea .tagline { position: absolute; display: block; left: 50%; transform: translateX(-50%); bottom: 90px; width: 200px; height: auto; z-index: 2; }
#mainPanelArea .tagline img { width: 100%; height: auto; }
#mainPanelArea {}
#mainPanelArea .slide { position: absolute; width: 100%; bottom: -30px; left: 0; text-align: center; }
#mainPanelArea .slide ul { display: inline-block; }
#mainPanelArea .slide ul li { margin: 0 10px!important; display: inline-block; cursor: pointer; width: 80px!important; height: 80px; border-radius: 100%; overflow: hidden; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); }
#mainPanelArea .slide ul li:last-child {}
#mainPanelArea .slide ul li.active {}
#mainPanelArea .gallery01 .swiper-slide-thumb-active {}
#mainPanelArea .slide ul li img { height: 100%; width: auto; }
/*#mainPanelArea .swiper-thumb { padding-top: 490px; }
#mainPanelArea .swiper-thumb ul li { width: 25%; height: 60px; overflow: hidden; }
#mainPanelArea .swiper-thumb ul li img { width: 100%; height: auto; }

/*============================
#introArea
============================*/
#introArea { text-align: center; padding: 0 20px; background: url("/common_old/img/special_tambasasayama/sasayama_bg_intro.png") no-repeat center top; background-size: cover; padding-bottom: 100px; }
#introArea .copy { text-align: left; margin: 0 auto ; padding-top: 60px; font-size: 1em; line-height: 1.5; letter-spacing: 0.1em; color: #222; }
#introArea .catch { font-size: 1.5em; margin-top: 20px; letter-spacing: 0.15em; }
#introArea .catch br.sp { display: block; }

/*============================
#pointArea
============================*/
#pointArea {}
#pointArea .title { position: absolute; font-size: 1.75em; color: #222; letter-spacing: 0.2em; line-height: 1.5; z-index: 1; }
#pointArea .text  { z-index: 2; padding: 20px 25px 18px; font-size: 1.125em; border-radius: 5px; }
#pointArea .number { position: absolute; text-align: center; width: 120px; height: 120px; padding-top: 20px; z-index: 1; line-height: 1.25; color: #fff; background-image: linear-gradient(90deg, rgba(206, 216, 230, 1) 18%, rgba(162, 188, 219, 1) 81%); border-radius: 50%; box-sizing: border-box; }
#pointArea .number span { font-size: 4em; position: relative; top: -10px; }
#pointArea .images { margin-top: 20px; position: absolute; z-index: 0; }
#pointArea .images ul { width: 100%; height: auto; }
#pointArea .images ul li { position: absolute; box-shadow: 0px 5px 25px 0px #ededed; border-radius: 20px; }
#pointArea .images ul li img { border-radius: 20px; }
#pointArea .point01 { position: relative; height: 950px; }
#pointArea .point01 .title { right: 10px; top: -40px; }
#pointArea .point01 .title span:last-child { margin-top: 40px; margin-right: 5px; }
#pointArea .point01 .title span { position: relative; display: inline-block; padding: 10px 0; }
#pointArea .point01 .title span:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-color: #e4e8ec; opacity: 0.8; }
#pointArea .point01 .text { position: absolute; top: 830px; width: 100%; padding: 0; }
#pointArea .point01 .number { right: inherit; left: 0; top: -50px; }
#pointArea .point01 .number span {}
#pointArea .point01 .images {}
#pointArea .point01 .images ul {}
#pointArea .point01 .images ul li { display: block; position: inherit; }
#pointArea .point01 .images ul li:first-child { overflow: hidden; height: 400px; width: 100%; }
#pointArea .point01 .images ul li:nth-child(2) { overflow: hidden; height: 180px; width: 100%; margin-top: 15px; }
#pointArea .point01 .images ul li:last-child { overflow: hidden; height: 180px; width: 100%; margin-top: 15px; }
#pointArea .point01 .images ul li:nth-child(odd) {  }
#pointArea .point01 .images ul li:last-child {}
#pointArea .point01 .images ul li:nth-child(-n+2) { }
#pointArea .point01 .images ul li:nth-child(-n+3) img { width: 100%; height: auto; }
#pointArea .point01 .images ul li:first-child img {  }
#pointArea .point01 .images ul li:nth-child(2) img { }
#pointArea .point02 { position: relative; height: 1025px; margin-top: 140px; }
#pointArea .point02 .title { left: 10px; top: -40px; }
#pointArea .point02 .title span:last-child { margin-top: 40px; }
#pointArea .point02 .title span:last-child { margin-top: 40px; margin-right: 5px; }
#pointArea .point02 .title span { position: relative; display: inline-block; padding: 10px 0; }
#pointArea .point02 .title span:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-color: #e4e8ec; opacity: 0.8; }
#pointArea .point02 .text { position: absolute; top: 830px; left: 0; width: 100%; padding: 10px 5px; }
#pointArea .point02 .number { left: inherit; right: 0; top: -50px; }
#pointArea .point02 .number span {}
#pointArea .point02 .images { right: 0; }
#pointArea .point02 .images ul {}
#pointArea .point02 .images ul li { display: block; position: inherit; }
#pointArea .point02 .images ul li:first-child { overflow: hidden; height: 400px; width: 100%; }
#pointArea .point02 .images ul li:nth-child(2) { overflow: hidden; height: 180px; width: 100%; margin-top: 15px; }
#pointArea .point02 .images ul li:last-child { overflow: hidden; height: 180px; width: 100%; margin-top: 15px; }
#pointArea .point02 .images ul li:nth-child(-n+3) img { width: 100%; height: auto; }
#pointArea .point02 .images ul li img {}
#pointArea .point03 { position: relative; height: 1010px; margin-top: 140px; }
#pointArea .point03 .title { right: 10px; top: -40px; }
#pointArea .point03 .title br { margin-top: 95px; }
#pointArea .point03 .title span:last-child { margin-top: 40px; margin-right: 5px; }
#pointArea .point03 .title span { position: relative; display: inline-block; padding: 10px 0; }
#pointArea .point03 .title span:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-color: #e4e8ec; opacity: 0.8; }
#pointArea .point03 .text { position: absolute; top: 830px; width: 100%; padding: 10px 5px; }
#pointArea .point03 .number { right: inherit; left: 0; top: -50px; }
#pointArea .point03 .number span {}
#pointArea .point03 .images {}
#pointArea .point03 .images ul {}
#pointArea .point03 .images ul li { display: block; position: inherit; }
#pointArea .point03 .images ul li:first-child { overflow: hidden; height: 400px; width: 100%; }
#pointArea .point03 .images ul li:nth-child(2) { overflow: hidden; height: 180px; width: 100%; margin-top: 15px; }
#pointArea .point03 .images ul li:last-child { overflow: hidden; height: 180px; width: 100%; margin-top: 15px; }
#pointArea .point03 .images ul li:nth-child(odd) {}
#pointArea .point03 .images ul li:last-child {}
#pointArea .point03 .images ul li:nth-child(-n+3) img { width: 100%; height: auto; }
#pointArea .point03 .images ul li img {}

/*============================
#hostArea
============================*/
#hostArea { margin-top: 60px; color: #222; }
#hostArea .copy { text-align: center; font-size: 1.25em; letter-spacing: 0.05em; }
#hostArea .host { margin-top: 40px; height: auto; display: block; }
#hostArea .host .image img { box-shadow: 0px 5px 25px 0px #ededed; border-radius: 20px; }
#hostArea .host.host01 { position: inherit; }
#hostArea .host.host01 .image { position: inherit;  display: block; width: 100%; }
#hostArea .host.host01 .image img { width: 100%; height: auto; }
#hostArea .host.host01 .detail { position: inherit; display: inline-block; margin-left: 0; width: auto; }
#hostArea .host.host02 { position: inherit; }
#hostArea .host.host02 .image { position: inherit; display: block; width: 100%; }
#hostArea .host.host02 .image img { width: 100%; height: auto; }
#hostArea .host.host02 .detail { position: inherit; display: inline-block; margin-right: 0; width: auto; }
#hostArea .host .name { position: relative; text-align: center; margin-top: 25px; font-size: 1.55em; }
#hostArea .host .name:before { content: '“'; position: absolute; display: block; top: -30px; left: 20px; color: #282828; font-size: 2.5em; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; }
#hostArea .host .text { margin-top: 10px; font-size: 1em; letter-spacing: 0.05em; line-height: 1.25; }
#hostArea .host .page { display: inline-block; margin-top: 10px; font-size: 1em; letter-spacing: 0.1em; line-height: 1; border-bottom: 1px solid #222; }
#hostArea .host .detail .text {}
#hostArea .host .detail .page {}
#hostArea .host .page {}
#hostArea .host .page a {}

/*============================
#recommendArea
============================*/
#recommendArea { overflow: hidden; margin-top: 60px; }
#recommendArea .catch { text-align: center; font-size: 1.25em; letter-spacing: 0.05em; }
#recommendArea .listing { margin: 0; width: 100%; }
#recommendArea .listing ul {}
#recommendArea .listing ul li { float: none; margin-top: 0; }
#recommendArea .listing ul li:first-child { margin-top: 0; }
#recommendArea .listing ul li div { margin: auto; }
#recommendArea .button { margin-top: 30px; text-align: center; } 
#recommendArea .button a { display: inline-block; border: solid 1px #222; padding: 13px 30px 12px; } 

/*============================
#recommendArea
============================*/
#expoLogo { margin-top: 60px; padding-bottom: 60px; }
#expoLogo .logo { text-align: center; }
#expoLogo .logo img { width: 200px; height: auto; display: inline; }

@media screen and (min-width:769px){

#sasayama .md_container { margin: 0 auto; max-width: 1260px; }
#sasayama .md_font_mincho {}
#sasayama .md_font_minchoB {}
#sasayama .md_font_minchoBB {}
#sasayama .md_rl {}
#sasayama .md_br_pc { display: inline; }
#sasayama .md_br_sp { display: none; }
#sasayama ul {}
#sasayama li {}
#sasayama img {}
#sasayama a {}
#sasayama table {}

/*============================
#mainPanelArea
============================*/
#mainPanelArea { min-width: 1260px; height: 900px; }
#mainPanelArea .mainPanelImage { height: 900px; }
#mainPanelArea .mainPanelImage img { min-height: 900px; }
#mainPanelArea h1 { top: 160px; height: 513px; padding: 35px 5px 10px; font-size: 2.375em; letter-spacing: 0.5em; line-height: 1.2; }
#mainPanelArea h1 span { opacity: 0; position: relative; animation-name: topPanel-animate; animation-duration: 1s; animation-fill-mode: forwards; }
#mainPanelArea h1 span:nth-child(1) {}
#mainPanelArea h1 span:nth-child(2) {}
#mainPanelArea h1 span:nth-child(3) {}
#mainPanelArea h1 span:nth-child(4) {}
#mainPanelArea h1 span:nth-child(5) {}
#mainPanelArea h1 span:nth-child(6) {}
#mainPanelArea h1 span:nth-child(7) {}
#mainPanelArea h1 span:nth-child(8) {}
#mainPanelArea h1 span:nth-child(9) {}
#mainPanelArea .tagline { right: 170px; top: 620px; width: 393px; left: inherit; transform: inherit; }
#mainPanelArea .tagline img {}
#mainPanelArea {}
#mainPanelArea .slide { position: absolute; display: block; width: 1240px; bottom: -75px; left: 50%; margin-left: -620px; z-index: 3; }
#mainPanelArea .slide ul { display: block; }
#mainPanelArea .slide ul li { width: 360px!important; height: 120px!important; border-radius: 0; margin-right: 0; }
#mainPanelArea .slide ul li:last-child { margin-right: 0!important; }
#mainPanelArea .slide ul li.active {}
#mainPanelArea .gallery01 .swiper-slide-thumb-active { filter: contrast(150%); }
#mainPanelArea .slide ul li img { border-radius: 20px; width: 100%; height: auto; }
#mainPanelArea .swiper-thumb { margin-top: 0; }
#mainPanelArea .swiper-thumb li { width: inherit; height: inherit; overflow: inherit; }	
	
/*============================
#introArea
============================*/
#introArea { min-width: 1260px; padding-bottom: 100px; }
#introArea .copy { text-align: center; padding-top: 180px; font-size: 1.125em; line-height: 1.8; letter-spacing: 0.1em; }
#introArea .catch { font-size: 1.875em; margin-top: 40px; letter-spacing: 0.3em; }
#introArea .catch br.sp { display: none; }

/*============================
#pointArea
============================*/
#pointArea { min-width: 1260px; }
#pointArea .title { font-size: 2.25em; letter-spacing: 0.2em; line-height: 1.5; }
#pointArea .text  { position: absolute; z-index: 2; background-color: rgba(241,241,241,0.85); font-size: 1.125em; border-radius: 5px; }
#pointArea .number { position: absolute; text-align: center; width: 150px; height: 150px; padding-top: 25px; z-index: 1; line-height: 1.25; color: #fff; background-image: linear-gradient(90deg, rgba(206, 216, 230, 1) 18%, rgba(162, 188, 219, 1) 81%); border-radius: 50%; }
#pointArea .number span { font-size: 4.5em; }
#pointArea .images { margin-top: 0; position: absolute; z-index: 0; }
#pointArea .images ul { width: 895px; height: 600px; }
#pointArea .images ul li { position: absolute; box-shadow: 0px 5px 25px 0px #ededed; border-radius: 40px; }
#pointArea .images ul li img { border-radius: 40px; }
#pointArea .point01 { position: relative; height: 600px; }
#pointArea .point01 .title { right: 35px; }
#pointArea .point01 .title span:last-child { margin-top: 95px; }
#pointArea .point01 .title span:first-child:before {}
#pointArea .point01 .title span:last-child:before {}
#pointArea .point01 .text { position: absolute; z-index: 2; background-color: rgba(241,241,241,0.85); width: 45%; bottom: 30px; top: inherit; right: 0; padding: 20px 25px 18px; font-size: 1.125em; border-radius: 5px; }
#pointArea .point01 .number { right: 240px; left: inherit; top: inherit; }
#pointArea .point01 .number span {}
#pointArea .point01 .images {}
#pointArea .point01 .images ul {}
#pointArea .point01 .images ul li { display: inherit; position: absolute; }
#pointArea .point01 .images ul li:first-child { position: absolute; width: 400px; height: 600px; right: 0; top: 0; }
#pointArea .point01 .images ul li:nth-child(2) { position: absolute; width: 450px; height: 280px; left: 0; top: 0; margin: 0; }
#pointArea .point01 .images ul li:last-child { position: absolute; width: 450px; height: 280px; left: 0; bottom: 0; margin: 0; }
#pointArea .point01 .images ul li:nth-child(-n+2) {}
#pointArea .point01 .images ul li:last-child {}
#pointArea .point01 .images ul li:nth-child(-n+3) img { width: 100%; height: auto; }
#pointArea .point02 { position: relative; height: 600px; margin-top: 140px; }
#pointArea .point02 .title { left: 35px; }
#pointArea .point02 .title span:last-child { margin-top: 40px; }
#pointArea .point02 .title span:first-child:before {}
#pointArea .point02 .title span:last-child:before {}
#pointArea .point02 .text { left: 0; bottom: 30px; top: inherit; width: 43%; padding: 20px 25px 18px; } 
#pointArea .point02 .number { left: 245px; }
#pointArea .point02 .number span {}
#pointArea .point02 .images { right: 0; }
#pointArea .point02 .images ul {}
#pointArea .point02 .images ul li { display: inherit; position: absolute; }
#pointArea .point02 .images ul li:first-child { position: absolute; width: 400px; height: 600px; left: 0; top: 0; margin: 0; }
#pointArea .point02 .images ul li:nth-child(2) { position: absolute; width: 450px; height: 280px; right: 0; top: 0; margin: 0; }
#pointArea .point02 .images ul li:last-child { position: absolute; width: 450px; height: 280px; right: 0; bottom: 0; margin: 0; }
#pointArea .point02 .images ul li img {}
#pointArea .point03 { position: relative; height: 600px; margin-top: 140px; }
#pointArea .point03 .title { right: 35px; }
#pointArea .point03 .title br { margin-top: 95px; }
#pointArea .point03 .title span:last-child { margin-top: 95px; }
#pointArea .point03 .title span:first-child:before {}
#pointArea .point03 .title span:last-child:before {}
#pointArea .point03 .text { right: 0; bottom: 30px; top: inherit; width: 35%; padding: 20px 25px 18px; }
#pointArea .point03 .number { right: 240px; left: inherit; top: inherit; }
#pointArea .point03 .number span {}
#pointArea .point03 .images {}
#pointArea .point03 .images ul {}
#pointArea .point03 .images ul li { display: inherit; position: absolute; }
#pointArea .point03 .images ul li:first-child { position: absolute; width: 400px; height: 600px; right: 0; top: 0; }
#pointArea .point03 .images ul li:nth-child(2) { position: absolute; width: 450px; height: 280px; left: 0; top: 0; margin: 0; }
#pointArea .point03 .images ul li:last-child { position: absolute; width: 450px; height: 280px; left: 0; bottom: 0; margin: 0; }
#pointArea .point03 .images ul li:nth-child(n+2) { height: 280px; }
#pointArea .point03 .images ul li:last-child {}
#pointArea .point03 .images ul li img {}

/*============================
#hostArea
============================*/
#hostArea { min-width: 1260px; margin-top: 125px; }
#hostArea .copy { text-align: center; font-size: 1.5em; letter-spacing: 0.15em; }
#hostArea .host { margin-top: 70px; height: 480px; display: flex; justify-content: center; align-items: center; }
#hostArea .host .image img { box-shadow: 0px 5px 25px 0px #ededed; border-radius: 40px; }
#hostArea .host.host01 { position: relative; }
#hostArea .host.host01 .image { position: absolute; left: 0; display: inline-block; width: 480px; }
#hostArea .host.host01 .image img { height: 480px; width: 480px; }
#hostArea .host.host01 .detail { position: absolute; right: 0; margin-left: 60px; width: 660px; }
#hostArea .host.host02 { position: relative; }
#hostArea .host.host02 .image { position: absolute; right: 0; display: inline-block; width: 480px; }
#hostArea .host.host02 .image img { height: 480px; width: 480px; }
#hostArea .host.host02 .detail { position: absolute; left: 0; margin-right: 60px; width: 660px; }
#hostArea .host .name { position: relative; text-align: left; font-size: 1.75em; margin: 0; }
#hostArea .host .name:before { content: '“'; position: absolute; display: block; top: -65px; left: inherit; color: #282828; font-size: 2.5em; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; }
#hostArea .host .text { margin-top: 30px; font-size: 1.125em; letter-spacing: 0.1em; line-height: 1.5; }
#hostArea .host .page { margin-top: 30px; font-size: 1.125em; }
#hostArea .host .detail .text {}
#hostArea .host .detail .page {}
#hostArea .host .page {}
#hostArea .host .page a {}

/*============================
#recommendArea
============================*/
#recommendArea { margin-top: 130px; min-width: 1260px; }
#recommendArea .catch { font-size: 1.5em; letter-spacing: 0.15em; }
#recommendArea .listing { margin: 70px auto 0; width: 1360px; }
#recommendArea .listing ul {}
#recommendArea .listing ul li { float: left; width: 450px; height: 500px; margin-top: 0; }
#recommendArea .listing ul li div {}
#recommendArea .button { margin-top: 30px; text-align: center; } 
#recommendArea .button a { display: inline-block; border: solid 1px #222; padding: 15px 40px 13px; }
	
/*============================
#recommendArea
============================*/
#expoLogo { margin-top: 100px; padding-bottom: 100px; }
#expoLogo .logo { text-align: center; }
#expoLogo .logo img { width: 300px; height: auto; }
	
}