@charset "utf-8";
* {
min-height:0;
min-width : 0;
}
body { font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; font-weight: 600; font-style: normal; margin: 0; padding: 0; height: 100%; letter-spacing : 0.1em; font-size: 62.5%; color: #4c4948; }
div img { vertical-align: top; max-width: 100%; }
a {	text-decoration: none; color: inherit; transition: 0.3s ease-in-out;  }
p { line-height: 1; }
p.regular { font-size: 1.6em; line-height: 35px; }
p.description { font-size: 1.3em; font-family: a-otf-gothic-bbb-pr6n, sans-serif; font-style: normal; font-weight: 400; color: #4c4948; flex-grow: 1; margin-top: 20px; }
.flex { display: flex; justify-content: space-between; align-items: flex-start; }
ul { list-style: none; margin: 0; }
.inner { max-width: 1080px; width: 100%; margin: 0 auto; }
.pc { display: block; }
.sp { display: none; }
.unline { padding-bottom: 3px; margin-bottom: 15px; border-bottom: 3px solid #ff8d90; display: inline-block; }

/* fadeUp */
.fadeUp{ animation-name:fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeUpAnime{
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}
.fadeUpTrigger{ opacity: 0; }

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.zoomInTrigger, .zoomOutTrigger{ opacity: 0; }
/* 拡大 */
.zoomIn{ animation-name:zoomInAnime; animation-duration:0.5s; animation-fill-mode:forwards; }

@keyframes zoomInAnime{
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/*========= 上部固定 ===============*/
#header{ position: fixed; height: 100px; width:100%; z-index: 999; display: flex; justify-content: space-between; align-items: center; background-color:rgba(255,255,255,.8); color:#fff; text-align: center; }

#header h1 img { max-width: 300px; height: auto; }
/*fixedでブロックがなくなるのではじめの要素のトップに余白を持たせる*/

#header.UpMove{ position: fixed; width:100%; animation: UpAnime 0.5s forwards; }
@keyframes UpAnime{
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-100px); }
}
#header.DownMove{ position: fixed; width:100%; animation: DownAnime 0.5s forwards; }
@keyframes DownAnime{
  from { opacity: 0; transform: translateY(-100px); }
  to { opacity: 1; transform: translateY(0); }
}

nav ul{ list-style: none; display: flex; justify-content: center; margin-top: 10px; }
nav ul li a{ display: block; text-decoration: none; color: #3d3d3d; transition:all 0.3s; }
nav ul li:first-child { font-size: 4.1em; position: relative;  margin-right: 20px; color: #4c4948; }
nav ul li:first-child::before { position: absolute; content: ''; display: inline-block; background-image: url(../images/tel_icon.png); width: 20px; height: 27px; background-size: contain; left: -30px; top: 11px; }
nav ul li:last-child { background: #bf0d17; color: #fff; display: inline-block; border-radius: 3px; display: flex; justify-content: center; align-items: center; font-size: 1.8em; padding: 10px 25px; }

#main { position: relative; background: url(../images/mainv.jpg); background-repeat: no-repeat; background-size: cover; background-position: left bottom; height: 100vh; z-index: -999; }
#main .main_v_ttl { max-width: 1150px; width: 100%; margin: 0 auto; position: relative; top: 20vh; z-index: 999; }
#main .main_v_ttl > img { max-width: 700px; width: 100%; float: right; }
.main_wave img { position: absolute; bottom: -45vh; width: 100%; }
#area-1 { position: relative; background-image: url(../images/wave_pc.png); background-size: 100%; top: -180px; margin-bottom: -180px; background-repeat: no-repeat; }
#area-1 .intro { position: relative; text-align: center; padding-top: 250px; }

#area-1 .intro::before { position: absolute; content: ''; display: inline-block; background: url(../images/kirakira01.png) no-repeat; animation: kirakira01 1s steps(2) infinite; width: 171px; height: 171px; left: 0; top: 130px; }
@keyframes kirakira01 {
  to { background-position: -190px 0 ; }
}

#area-1 .intro::after { position: absolute; content: ''; display: inline-block; background: url(../images/kirakira01.png) no-repeat; animation: kirakira02 1s steps(2) infinite; width: 171px; height: 171px; right: 0; bottom: 80px; }
@keyframes kirakira02 {
  to { background-position: -190px 0 ; }
}


#area-1 .intro img { width: 664px; margin-bottom: 20px; }
#area-1 p.intro_copy { font-size: 4.1em; color: #fff; background-color: #ff8d90; text-align: center; font-family: fot-tsukuardgothic-std, sans-serif; font-weight: 700; font-style: normal; margin: 20px 0 80px; padding: 22px 0; }
#area-1 .arrow_down { text-align: center; }
#area-1 .arrow_down img { width: 89px; margin-bottom: 80px; }
#area-1 .ttl03 { text-align: center; }
#area-1 .ttl03 img { width: 886px; margin: 0 auto 50px; }

#area-2 { position: relative; background-color: #f0ebeb; width: 100%; }

#area-2 .column { padding: 60px 0; display: flex; justify-content: space-between; flex-wrap: wrap; }
#area-2 .item { width: calc(95% / 2); background-color: #fff; margin-bottom: 50px; display: flex; flex-flow: inherit; justify-content: space-between; }
#area-2 .item_ph { padding: 30px 30px 0 30px; }
#area-2 .item img { width: 100%; height: auto;  }
#area-2 .item dl { margin: 0 auto 20px; padding: 30px; text-align: center; }
#area-2 .item dl.type dt { font-size: 3.0em; }
#area-2 .item dl.type dd { font-size: 1.7em; margin-bottom: 10px; margin-right: 5px; }
#area-2 .item dl.type dd::before { content: '・'; display: inline-block; font-size: 1em; }
#area-2 .item dl.onayami_wrap { position: relative; }
#area-2 .item dl.onayami_wrap p.onayami img { position: absolute; width: 139px; height: 95px; left: 40px; top: -30px; z-index: 1; }
#area-2 .item dl.onayami_wrap dt.onayami_ttl { position: relative; background-color: #254574; color: #ffff70; font-size: 2.5em; border-radius: 50px; text-align: center; padding: 10px 0; margin-bottom: 20px; } 
#area-2 .item dl.onayami_wrap dd::before { content: ''; display: inline-block; background: url(../images/check.png) no-repeat center 100% / cover; width: 21px; height: 17px; }
#area-2 .item dl.onayami_wrap dd { font-size: 2.1em; padding-left:1em; text-indent:-1em; margin-bottom: 15px; text-align: left; }
#area-2 .item dl.onayami_wrap dd span { color:#ec1b23 }
#area-2 .item .dd_wrap { display: flex; justify-content: center; flex-wrap: wrap; }
#area-2 .kirakira_arrow img { position: absolute; max-width: 1080px; width: 100%; bottom: -170px; }

#area-3 { padding-top: 230px; }
#area-3 .kirei_ttl { text-align: center; margin-bottom: 40px; }
#area-3 .kirei_ttl img { max-width: 730px; width: 100%; height: auto; margin: 0 auto; }
#area-3 .kirei_lead { text-align: center; margin-bottom: 50px; }
#area-3 .kirei_lead .kirei_lead01 img { max-width: 980px; width: 100%; height: auto; margin-bottom: 10px; }
#area-3 .kirei_lead .kirei_lead02 img { max-width: 1073px; width: 100%; height: auto; } 
#area-3 .oteire_wrap { position: relative; display: flex; justify-content: space-around; align-items: center;     margin-bottom: 100px; }
#area-3 .oteire_wrap .plus { position: absolute; }
#area-3 .oteire_wrap .plus img { width: 55px; height: 55px; }
#area-3 .oteire_wrap .oteire img { width: 525px; height: auto; }
#area-3 .price img { width: 100%; margin-bottom: 20px; }
#area-3 .tokuten { max-width: 750px; width: 100%; height: auto; margin: 0 auto 30px; }
#area-3 .mv { position: relative; padding-bottom: 36.25%; height: 0; overflow: hidden; display: flex; justify-content: center; max-width: 750px; width: 100%; margin: 0 auto 50px; }
#area-3 .mv iframe.youtube { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#area-3 .price_txt { width: 750px; font-size: 1.8em; line-height: 1.5em; margin: 0 auto 30px; }

.omakase { display: flex; align-content: flex-start; justify-content: space-between; max-width: 800px; margin: 0 auto; align-items: center; }
.omakase .staff_ph img { width: 393px; height: auto; }
.omakase .omakase_copy img { width: 392px; height: 142px; }
#announce { width: 100%; background-color: #fff3ec; padding: 120px 0; }
#announce .inner { position: relative; } 
#announce .yoyaku { position: absolute; top: -170px; left: -200px; }
#announce .yoyaku img {width: 215px; height: 215px; }
#announce > .inner {width: 520px; margin: 0 auto; } 
#announce > .inner .logo { text-align: center; margin-bottom: 50px; }
#announce > .inner .logo img { width: 370px; }
#announce .announce_wrap { text-align: center; margin-bottom: 45px; }
#announce .announce_wrap p.ttl { font-size: 2.2em; margin-bottom: 15px; }
#announce .announce_wrap p.phone { font-size: 6.8em; position: relative; color: #3d3d3d; text-align: end;}
#announce .announce_wrap p.phone::before { position: absolute; content: ''; display: inline-block; background-image: url(../images/tel_icon.png); width: 38px; height: 50px; background-size: contain; left: 36px; top: 12px; }

#announce .announce_wrap .btn { display: block; position: relative; width: 100%; padding: 10px 0; background-color: #ff809e; box-shadow: 0 4px 0 0 #c33b58; border-radius: 5px; overflow: hidden; }
#announce .announce_wrap .btn:hover { box-shadow: none; -webkit-transform: translateY(5px); }

#announce .announce_wrap .btn a { width: 520px; padding: 20px 0; display: flex; justify-content: center; align-items: center; }
#announce .announce_wrap .btn img { width: 354px; height: auto; vertical-align: middle; }
#announce .announce_wrap .btn p::before { content: ''; display: inline-block; width: 50px; height: 50px; background-image: url(../images/pc_icon.png); background-size: contain; vertical-align: middle; background-repeat: no-repeat; margin-right: 10px; }
#announce .announce_wrap ul { display: flex; flex-wrap: wrap; justify-content: space-around; }
#announce .announce_wrap ul li { font-size: 3.0em; margin-bottom: 10px; }
#announce .announce_wrap .map img { width: 520px; }
#announce .announce_wrap .address { font-size: 1.6em; margin-bottom: 30px; line-height: 1.8em; }
#announce p.message { font-size: 2.8em; text-align: center; }

footer { text-align: center; background: #fff; padding: 20px 0; }
footer .logo img { width: 180px; height: auto; margin-bottom: 15px; }
footer small { font-size: 1.1em; }

@media screen and (max-width: 1366px){
	#main .main_v_ttl > img { width: 45%; }
	#area-1 { top: -70px; margin-bottom: -70px; }
	#main .main_v_ttl { top: 19vh; width: 80%; }
	#area-1 .intro { padding-top: 160px; }
}

@media screen and (max-width: 1280px){
	#area-1 { background-size: contain;}
 }

@media screen and (max-width: 1024px) {
	.inner { width: 90%; }
	#main .main_v_ttl { top: 25vh; }
	#main .main_v_ttl > img { width: 55%; }
	#area-1 .intro { padding-top: 180px; }
	#area-1 p.intro_copy { font-size: 3.5em; padding: 20px 0; }
	#area-2 .kirakira_arrow img { width: 90%; bottom: -140px; }
	#area-2 .item dl.onayami_wrap p.onayami img { width: 109px; height: 75px; }
	#area-3 .oteire_wrap .oteire img { width: 425px; }
}

@media screen and (max-width: 960px) {
	.pc { display: none; }
	.sp { display: block; }
	.order1 { order: 1; }
	.order2 { order: 2; }
	#area-1 p.intro_copy { line-height: 1.2em; }
	#area-1 .intro::before { top: 10px; }
	#area-1 .intro::after { bottom: 0; }
	#main { background: url(../images/mainv_sp.png); background-size: contain; background-position: top center; height: 90vh; background-repeat: no-repeat;}
	#area-1 { top: -50px; margin-bottom: -50px; }
	#area-1 .intro { width: 85%; margin: 0 auto; }
	#area-1 .intro img { width: 100%; }
	#area-1 .ttl03 img { width: 80%; }
	#area-2 .item { width: 100%; }
	#area-2 .kirakira_arrow img { bottom: -130px; }
	#area-3 .kirei_lead .kirei_lead01 img { margin-bottom: 30px; }
	#area-3 .oteire_wrap { display: block; }
	#area-3 .oteire_wrap .oteire img { width: 100%; }
	#area-3 .oteire_wrap .plus_sp img { margin: 0 auto; }
	#area-3 .tokuten img { width: 75%; height: auto; margin: 0 auto 70px; }

	.omakase { flex-direction: column; }
	#main .main_v_ttl img { display: none; }

	#bottom_nav a{ display: flex; justify-content:center; align-items:center; background:#bf0d17; border-radius: 5px; max-width: 100%; padding-left: 30px; width: 80%; margin: 0 auto; height: 60px; color: #fff; font-size:2.8em; transition:all 0.3s; }
	#bottom_nav { position: fixed; width: 100%; z-index: 2; opacity: 0; transform: translateY(100px); }
	#bottom_nav a::before { position: absolute; content: ''; display: inline-block; background-image: url(../images/tel_icon_white.png); width: 20px; height: 27px; background-size: contain; left: 350px; }

	#bottom_nav.Up{ animation: Up 0.5s forwards; }
	@keyframes Up{
	  from { opacity: 0; transform: translateY(100px); }
	  to { opacity: 1; transform: translateY(0); }
	}
	#bottom_nav.Down{ animation: Down 0.5s forwards; }
	@keyframes Down{
	  from { opacity: 1; transform: translateY(0); }
	  to { opacity: 1; transform: translateY(100px); }
	}
}

@media screen and (max-width: 768px) {
	#announce .yoyaku { top: -220px; left: -72px; }
	#main .main_v_ttl > img { width: 58%; }
	#bottom_nav a::before { left: 280px; }
	#main { height: 80vh; }
	#area-1 { top: -5px; margin-bottom: -5px; }
	#area-3 .price_txt { width: 750px; font-size: 1.8em; line-height: 1.5em; margin: 0 auto 30px; }
	#area-3 .mv { padding-bottom: 56.25%; }
	#area-3 .price_txt { width: 100%; }
}

@media screen and (max-width: 414px) {
	#header { height: 70px; }
	#header h1 img { max-width: 200px; }
	#bottom_nav a::before { left: 100px; }
	#main { height: 50vh; }
	#area-1 .ttl03 img { width: 70%; }
	#area-1 .intro { padding-top: 80px; }
	#area-1 p.intro_copy { font-size: 1.7em; margin: 10px 0 50px; }
	#area-1 .intro img { margin-bottom: 10px; }
	#area-1 { top: -60px; margin-bottom: -60px; }
	#area-1 .arrow_down img { width: 60px; margin-bottom: 50px; }
	#area-2 .item dl.type dt { font-size: 2em; }
	#area-2 .item dl.type dd { font-size: 1.4em; line-height: 1.4em; }
	#area-2 .item dl.onayami_wrap dt.onayami_ttl { font-size: 1.8em; }
	#area-2 .item dl.onayami_wrap dd { font-size: 1.5em; line-height: 1.4em; padding-left: 1.5em; text-indent: -1.1em; margin-bottom: 10px; }
	#area-2 .item dl.onayami_wrap dd::before { width: 16px; height: 15px; }
	#area-3 .oteire_wrap .plus_sp img { width: 45px; }
	#area-2 .kirakira_arrow img { bottom: -54px; }
	#area-2 .item:last-child { margin-bottom: 0; }
	#area-3 { padding-top: 100px; }
	#area-3 .kirei_lead { margin-bottom: 20px; }
	#area-3 .oteire_wrap { margin-bottom: 69px; }
	#area-3 .mv { margin-bottom: 20px; }
	#area-3 .price_txt { font-size: 1.35em; line-height: 1.5em; }
	#announce { padding: 100px 0; }
	#announce > .inner { width: 90%; }
	#announce .announce_wrap .map img { width: 100%; }
	#announce .announce_wrap .btn a { width: 100%; }
	#announce .announce_wrap .btn img { width: 255px; }
	#announce .announce_wrap .btn p::before { width: 45px; height: 45px; }
	#announce .announce_wrap .btn { padding: inherit; }
	#announce p.message { font-size: 1.8em; }
	#announce .announce_wrap .address { font-size: 1.4em; }
	#announce .announce_wrap p.ttl { font-size: 1.5em; margin-bottom: 10px; }
	#announce .announce_wrap ul { width: 90%;  margin: 0 auto; }
	#announce .announce_wrap ul li { font-size: 2em; }
	#announce .announce_wrap p.phone { font-size: 3.8em; text-align: center; padding-left: 30px; }
	#announce .announce_wrap p.phone::before { width: 23px; height: 30px; left: 36px; top: 6px; background-repeat: repeat; }
	#announce > .inner .logo img { width: 270px; }
	#announce .yoyaku img { width: 165px; height: 165px; }
	#announce .yoyaku { top: -180px;  left: 0; }
	.omakase .staff_ph img { width: 80%; }
	.staff_ph {text-align: center; }
	.omakase .omakase_copy img { width: 75%; height: auto; }
	.omakase_copy { text-align: center; }
	#area-1 .intro::after { bottom: -1px; width: 90px; height: 90px; }
	footer { padding: 30px 0; }
	footer small { font-size: 1em; }
}
@media screen and (max-width: 393px){
	#bottom_nav a::before { left: 85px; }
}

@media screen and (max-width: 375px) {
	#header { height: 60px; }
	#header h1 img { max-width: 175px; }
	#main { height: 45vh; }
	#main .main_v_ttl { top: 11vh; }
	#area-1 { top: 0px; margin-bottom: 0px; }
	#area-1 .arrow_down img { width: 50px; margin-bottom: 30px; }
	#area-1 p.intro_copy { margin: 11px 0 30px; }
	#area-2 .column { padding: 40px 0; }
	#area-1 .ttl03 img { margin: 0 auto 40px; }
	#area-2 .item dl.onayami_wrap { margin-bottom: 0; }
	#area-2 .item dl.onayami_wrap p.onayami img { left: 26px; top: -34px; }
	#announce .announce_wrap .btn img { width: 210px; }
	#announce .announce_wrap .btn p::before { width: 40px; height: 40px; }
	#announce .announce_wrap p.phone::before { left: 30px; top: 5px; }
	#announce > .inner .logo { margin-bottom: 40px; }
	#announce .announce_wrap { margin-bottom: 35px; }
	#bottom_nav a::before { left:80px; }
}