@charset "utf-8";

#main { width: 100%; height: 650px; overflow: hidden; position: relative;}
#main .photo { background: url(../img/mv.jpg) no-repeat bottom center; background-size: cover; width: 100%; height:100%; position: absolute;}
#main .ami { background: url(../img/ami.png); background-size: 100px 100px;  width: 100%; height:100%; position: absolute;}
#main .nami { background: url(../img/bg_head.png) repeat-x; position: absolute; bottom: 0; left: 0; width: 100%; height: 39px;}
#main #logo { position: absolute; left: 50%; margin: 160px 0 0 -200px;}

#wrapper { width: 100%; background: url(../img/bg.png) top left;}
#container { width: 1000px; margin: 0 auto;}
#container p { line-height: 2em; }
#container h4 { line-height: 2.6em; }
/*#container{ box-shadow: 0 0 30px 0 rgba(0,0,0,0.5)}*/
#container #time { margin: -140px 0 0; position: relative;}
#container #sacri { margin: -20px 0 0; position: absolute; right: 30px}


#container .p-width {width:500px}
#container #Greeting { overflow: hidden; }
#container #Bread { overflow: hidden; }
#container .ex { background: #FFF; color: #0092d7; border-radius: 8px; padding: 15px; line-height: 1.6em;}
#container h5 { line-height: 2em; }

#container #Reservation {width: 100%; text-align: center; font-weight: 700;}
#container #Reservation .flow { display: inline-flex; flex-flow: row wrap; justify-content: center; width: 1050px;}
#container #Reservation .flow .flow-set {position: relative; width: 300px; height: 300px; margin: 0 50px 50px 0 ; background-color: #FFFFFF; border-radius: 16px;}
#container #Reservation .flow .step { position: absolute; left: -30px; top: -20px;}
#container #Reservation .flow .text { text-align: center; margin-top: 30px; color: #c23f32; line-height: 1.5em;}
#container #Reservation .flow .dl {display: inline-flex; flex-flow: column; justify-content: center; }
#container #Reservation .flow .ill {position: absolute; bottom: 36px; right: 105px;}
#container #Reservation .flow .ill2 {position: absolute; bottom: 24px; right: 60px;}

#container #Access { overflow: hidden;}
#container #Access .balloon { position: absolute; left:50%; margin:-30px 0 0 70px;}
#container #Access { overflow: hidden;}
#container #Access dl {margin: 40px auto 100px; width: 50%; line-height: 1.6em;}
#container #Access dt { float: left; clear:left; width: 5em}
#container #Access dd { margin-left: 5em;}

#Map { position: relative; width: 100%; height: 600px;}
#Map .lighthouse { position: absolute; right: 80px; top: -90px; z-index: 500}

#copyright { width: 100%; padding :1em 0; text-align: center; background: #FFF; color: #787878; letter-spacing: 0.1em;}

@media screen and (min-width : 641px ){
	#flex-01 { display: inline-flex; justify-content: space-between; width: 1000px; align-items: center;}
	#flex-01 > div {margin: 0}
	#flex-01 p { line-height: 2.4em; font-size:131%;}
}

@media screen and (max-width: 640px) {
  
  body { padding-top:100px; -webkit-text-size-adjust: 100%;}
  .font20 { font-size:139%; }
  
  #main { width: 640px; height: 740px; overflow: hidden; position: relative;}
  #main .photo { background: url(../img/sp-mv.jpg) no-repeat top center; background-size: cover; width: 100%; height:100%; position: absolute;}
	#main .ami { background-size: 200px 200px; }

  #main #logo { position: absolute; left: 50%; margin: 150px 0 0 -240px; width:480px; height: 336px;}
  #main #logo img {width: 100%; height: 100%;}
  
  #wrapper { width: 640px;}
  #container { width: 580px; margin: 0 auto}
	
	#container #time { margin:-140px 0 0 -10px; }
	#container #time img{ width: 240px; height: auto; }
	#container #sacri { margin: -40px 0 0; position: absolute; right: 20px}
	#container #sacri img{ width: 280px; height: auto; }

  #container .p-width {width:100%}
	#container .ex { padding: 20px 5px 20px 25px;}

	#container #tl-01 {width: 215px; height: auto;}
	#container #tl-02 {width: 550px; height: auto;}
	#container #tl-03 {width: 257px; height: auto;}
	#container #tl-04 {width: 261px; height: auto;}
	#container #Access .balloon img {width: 220px; height: auto; }
	#container #Access .balloon { margin:-50px 0 0 70px;}
	
  #container .sp-img_01 {float: none; margin:30px 50px 50px; width: 480px; height: auto}
  #container .sp-img_02 {float: none; margin:30px 20px 0px; width: 540px; height: auto}
  #container .sp-img_03 {float: none; margin:50px 20px 0px; width: 540px; height: auto}
  #container .sp-img_04 {float: none; margin:30px 20px 0px; width: 540px; height: auto}
  #container .sp-150 { margin-top:150px; }
	
	#container #Reservation .flow { flex-flow: column; width: 480px;}
	#container #Reservation .flow .flow-set {width: 480px; height: 440px; margin-bottom: 60px; border-radius: 24px;}
	#container #Reservation .flow .flow-set:last-child {margin-bottom: 0px;}
	#container #Reservation .flow .step { left: -40px; top: -30px;}
	#container #Reservation .flow .step img { width: 120px;  height: auto;}
	#container #Reservation .flow .text { margin-top: 40px;}
	#container #Reservation .flow .dl img {width: 240px; height: auto;}
	#container #Reservation .flow .ill {position: absolute; bottom: 40px; right: 172px;}
	#container #Reservation .flow .ill2 {position: absolute; bottom: 16px; right: 100px;}
	#container #Reservation .flow .ill img { width: auto; height: 240px;}
	#container #Reservation .flow .ill2 img { width: auto; height: 258px;}

  #container #Access dl {width: 100%; }
  
  #Map { position: relative; width: 640px; height: 600px;}
  #Map .lighthouse { position: absolute; right: 20px; top: -90px; z-index: 500}
  #copyright { width: 640px;}
}