@charset "utf-8";

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

/*============================
#header
============================*/
#header { position: relative; }

/*============================
#headerPC
============================*/
#headerPC  { display: none; }

/*============================
#headerSP
============================*/
#headerSP { display: block; position: absolute; top:600px; z-index: 1; }
#headerSP .navArea { width: inherit; }
#headerSP .navArea { background: #c3b997; }
#headerSP .navArea ul.mainMenu {}
#headerSP .navArea ul.mainMenu li { float: left; width: 50%; padding: 15px 0; border-bottom: 1px solid #dfd5b5; }
#headerSP .navArea ul.mainMenu li:first-child { float: left; width: 100%; border-top: 1px solid #dfd5b5; border-bottom: 1px solid #dfd5b5; }
#headerSP .navArea ul.mainMenu li a { display: block; text-align: center; color: #fff; font-size: 0.875em; }
#headerSP .navArea ul.mainMenu li:nth-child(2n) a { border-right: 1px solid #dfd5b5; }


/*============================
#footer
============================*/
#footer { min-width: inherit; text-align: center; padding: 10px 0; }
#footer .pad { font-size: 0.875em; }

/*============================
ClearFix
============================*/
.clearFix:after { clear: both; display: block; content: ""; height: 0; line-height: 0; }

/*============================
global
============================*/
.ttlMain { font-size: 2.125em; }
.ttlSub { font-size: 0.875em; }


/*============================
#mainPanelArea
============================*/
#mainPanelArea { position: relative; min-width: inherit; height: 600px; overflow: hidden; }
#mainPanelArea .logo { display: block; text-align: center; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); width: 100%; }
#mainPanelArea .logo h1 { width: 65px; margin: 0 auto; }
#mainPanelArea .logo h1 img { width: 100%; height: auto; }
#mainPanelArea .logo .name { margin-top: 15px; font-size: 1.5em; letter-spacing: 0.15em; color: #fff; }
#mainPanelArea .logo .en { margin-top: 15px; font-size: 0.75em; letter-spacing: 0.1em; color: #fff; }
#mainPanelArea::before { display: none; }
#mainPanelArea ul li.panel01 { background: url(../../imageFile/mainPanel01_sp.jpg) no-repeat bottom center; background-size: cover; min-width: inherit; height: 600px; }
#mainPanelArea ul li.panel02 { background: url(../../imageFile/mainPanel02_sp.jpg) no-repeat bottom center; background-size: cover; min-width: inherit; height: 600px; }
#mainPanelArea .scroll { display: none; }
#mainPanelArea .scroll .pad {}

/*============================
#catchArea
============================*/
#catchArea { display: none; }
#catchArea .tagLineBig {}
#catchArea .tagLineSmall {}
#catchArea .tagLineSmall br {}

/*============================
#movieArea
============================*/
#movieArea { position: relative; width: 100%; height: auto; right: 0; top: 240px; text-align: center; }
#movieArea iframe { width: 100%; height: 240px; }

/*============================
#aboutArea
============================*/
#aboutArea { min-width: inherit; margin-top: 100px; margin-left: 0; }
#aboutArea .pad { width: inherit; padding: 20px; }
#aboutArea .pad .content {}
#aboutArea .pad .ttlMain {}
#aboutArea .pad .ttlMain::after { background-size: contain; width: 30%; top: 40%; left: 50%; margin-left: -45px; }
#aboutArea .pad .ttlMain::before { display: none; }
#aboutArea .pad .ttlSub { padding-top: 6px; }
#aboutArea .pad .copy { padding: 20px 0; text-align: left; font-size: 1em; line-height: 1.5; }
#aboutArea .pad .copy br { display: none; }
#aboutArea .pad .btn.about {}
#aboutArea .pad .btn.about a { width: 180px; padding: 12px 0; }

/*============================
#doshishaChapelArea
============================*/
#doshishaChapelArea { min-width: inherit; margin-top: 30px; }
#doshishaChapelArea .subPanel { min-width: 100%; height: 140px; }
#doshishaChapelArea .subPanel .ttlArea { margin: 0; padding: 0 20px; }
#doshishaChapelArea .subPanel .ttlArea .ttlMain { min-width: 100%; padding-top: 50px; font-size: 1.5em; }
#doshishaChapelArea .subPanel .ttlArea .ttlMain h2 {}
#doshishaChapelArea .subPanel .ttlArea .ttlSub { padding-top: 6px; font-size: 1em; letter-spacing: 0.5px; }
#doshishaChapelArea .pad { min-width: inherit; padding: 0; margin-top: 0px; margin-left: 0; }
#doshishaChapelArea .pad .content { width: inherit; padding:12px 0 0; }
#doshishaChapelArea .pad .content .info {}
#doshishaChapelArea .pad .content .info .textBox.doshishaChapel { float: inherit; width: 100%; padding-top: 0; }
#doshishaChapelArea .pad .content .info .textBox.doshishaChapel .copy { padding: 20px; font-size: 0.875em; }
#doshishaChapelArea .pad .content .info .textBox.doshishaChapel .copy br { display: none; }
#doshishaChapelArea .pad .content .info .textBox.doshishaChapel .copy p {}
#doshishaChapelArea .pad .content .info .textBox.doshishaChapel .btn.doshishaChapel { padding-top: 25px; text-align: center; }
#doshishaChapelArea .pad .content .info .textBox.doshishaChapel .btn.doshishaChapel a { width: 260px; padding: 12px 0; }
#doshishaChapelArea .pad .content .info .movieBox.doshishaChapel { float: inherit; width: inherit; margin-top: 10px; text-align: center; }
#doshishaChapelArea .pad .content .info .movieBox.doshishaChapel iframe { width: 100%; height: 240px; }
#doshishaChapelArea .pad .content .info .movieBox.doshishaChapel img { width: 80%; height: auto; }
#doshishaChapelArea .pad .content .info .imgBox.doshishaChapel { width: 100%; padding: 15px 0 70px; }
#doshishaChapelArea .pad .content .info .imgBox.doshishaChapel ul { padding: 0 20px; }
#doshishaChapelArea .pad .content .info .imgBox.doshishaChapel ul li { width: 24.5%; margin-top: 0.5%; margin-right: 0.5%; }
#doshishaChapelArea .pad .content .info .imgBox.doshishaChapel ul li:nth-child(4n) { margin-right:0; }
#doshishaChapelArea .pad .content .info .imgBox.doshishaChapel ul li .subImg {}
#doshishaChapelArea .pad .content .info .imgBox.doshishaChapel ul li .subImg img { width: 100%; height: auto; }

/*============================
#clarkeArea
============================*/
#clarkeArea { min-width: inherit; margin-top: 0; }
#clarkeArea .subPanel { min-width: 100%; height: 140px; }
#clarkeArea .subPanel .ttlArea { margin: 0; padding: 0 20px; }
#clarkeArea .subPanel .ttlArea .ttlMain { min-width: 100%; padding-top: 50px; font-size: 1.5em; }
#clarkeArea .subPanel .ttlArea .ttlMain h2 {}
#clarkeArea .subPanel .ttlArea .ttlSub { padding-top: 6px; font-size: 1em; letter-spacing: 0.5px; }
#clarkeArea .pad { min-width: inherit; padding: 0; margin-top: 0px; margin-left: 0;  }
#clarkeArea .pad .content { width: inherit; padding: 12px 0 0; }
#clarkeArea .pad .content .info {}
#clarkeArea .pad .content .info .textBox.clarke { float: inherit; width: 100%; padding-top: 0; }
#clarkeArea .pad .content .info .textBox.clarke .copy { padding: 20px; font-size: 0.875em; }
#clarkeArea .pad .content .info .textBox.clarke .copy br { display: none; }
#clarkeArea .pad .content .info .textBox.clarke .copy p {}
#clarkeArea .pad .content .info .textBox.clarke .btn.clarke { padding-top: 25px; text-align: center; }
#clarkeArea .pad .content .info .textBox.clarke .btn.clarke a { width: 260px; }
#clarkeArea .pad .content .info .movieBox.clarke { float: inherit; width: inherit; margin-top: 10px; text-align: center; }
#clarkeArea .pad .content .info .movieBox.clarke iframe { width: 100%; height: 240px; }
#clarkeArea .pad .content .info .movieBox.clarke img { width: 80%; height: auto; }
#clarkeArea .pad .content .info .imgBox.clarke { width: 100%; padding: 15px 0 10px; }
#clarkeArea .pad .content .info .imgBox.clarke ul { padding: 0 20px; }
#clarkeArea .pad .content .info .imgBox.clarke ul li { width: 24.5%; margin-top: 0.5%; margin-right: 0.5%; }
#clarkeArea .pad .content .info .imgBox.clarke ul li:nth-child(4n) { margin-right:0; }
#clarkeArea .pad .content .info .imgBox.clarke ul li .subImg {}
#clarkeArea .pad .content .info .imgBox.clarke ul li .subImg img { width: 100%; height: auto; }

/*============================
#instagramArea
============================*/
#instagramArea { min-width: inherit; margin-top: 0; margin-left: 0; }
#instagramArea .pad { width: inherit; padding: 50px 20px; }
#instagramArea .pad .content { text-align: center; }
#instagramArea .pad .ttlMain {}
#instagramArea .pad .ttlSub { padding-top: 6px; }
#instagramArea .pad .wrapper { width: inherit; }
#instagramArea .pad .wrapper .instaImage {}
#instagramArea .pad .wrapper .instaImage .imageList {}
#instagramArea .pad .wrapper .instaImage .imageList ul 
#instagramArea .pad .wrapper .instaImage .imageList ul li { width: 48%; margin-right: 2%; }
#instagramArea .pad .btn.instagram { position: relative; padding-top: 10px; text-align: center; }
#instagramArea .pad .btn.instagram a { width: 180px; padding: 12px 0; }

/*============================
#scheduleArea
============================*/
#scheduleArea { min-width: inherit; margin-top: 20px; margin-left: 0; }
#scheduleArea .pad  { width: inherit; }
#scheduleArea .pad .content {}
#scheduleArea .pad .content .accordionbox { width: inherit; }
#scheduleArea .pad .content .accordionbox .accordionlist {}
#scheduleArea .pad .content .accordionbox .accordionlist .clearfix {}
#scheduleArea .pad .content .accordionbox .accordionlist .clearfix .titleArea {}
#scheduleArea .pad .content .accordionbox .accordionlist .clearfix .titleArea .ttlMain { font-size: 2em; }
#scheduleArea .pad .content .accordionbox .accordionlist .clearfix .titleArea .ttlSub { padding-top: 4px; }
#scheduleArea .pad .content .accordionbox .accordionlist dd {}
#scheduleArea .pad .content .accordionbox .accordionlist dd .first { padding: 20px; font-size: 1.125em; line-height: 1.5; }
#scheduleArea .pad .content .accordionbox .accordionlist dd ul.step {}
#scheduleArea .pad .content .accordionbox .accordionlist dd ul.step li { padding: 15px 20px; }
#scheduleArea .pad .content .accordionbox .accordionlist dd ul.step li:last-child {}
#scheduleArea .pad .content .accordionbox .accordionlist dd ul.step li .stepName {}
#scheduleArea .pad .content .accordionbox .accordionlist dd ul.step li .stepName span { padding-right: 10px; font-size: 1em; }
#scheduleArea .pad .content .accordionbox .accordionlist dd ul.step li .stepDetail {}
#scheduleArea .pad .content .accordionbox .accordionlist ul.caution { padding: 20px; border-bottom: 1px solid #d9cfba; }
#scheduleArea .pad .content .accordionbox .accordionlist ul.caution li {}

/*============================
#photoPlanArea
============================*/
#photoPlanArea { min-width: inherit; margin-top: 50px; margin-left: 0; }
#photoPlanArea .pad { width: inherit; padding: 15px 20px 50px; border: none; }
#photoPlanArea .pad .content { float: none; width: 100%; }
#photoPlanArea .pad .content .titleArea {}
#photoPlanArea .pad .content .titleArea .ttlMain { text-align: center; font-size: 1.75em; }
#photoPlanArea .pad .content .titleArea .ttlSub { text-align: center; }
#photoPlanArea .pad .content .copy { text-align: center; padding: 15px 0 0; font-size: 1em; line-height: 1.5; }
#photoPlanArea .pad .button { top: inherit; right: inherit; left: 50%; transform: translate(-50%,20px); }
#photoPlanArea .pad .button span {}
#photoPlanArea .pad .button span a { width: 260px; padding: 14px 12px 12px 0; font-size: 1em; }
#photoPlanArea .pad .button span a:before {}

/*============================
#reservationArea
============================*/
#reservationArea  { min-width: inherit; margin-top: 50px; margin-left: 0; }
#reservationArea .pad { width: inherit; padding: 15px 20px 30px; }
#reservationArea .pad .content { border: 1px solid #e1d9c8; padding: 20px; }
#reservationArea .pad .content .ttlMain { padding-top: 20px; font-size: 2em; }
#reservationArea .pad .content .ttlSub { padding-top: 6px; }
#reservationArea .pad .content .copy { padding: 20px 0 5px; text-align: left; font-size: 1em; }
#reservationArea .pad .content .btn.app { padding: 20px 0; }
#reservationArea .pad .content .btn.app a { width: 260px; padding: 12px 0; font-size: 1em; }
#reservationArea .pad .link { display: block; padding-top: 30px; text-align: center; }
#reservationArea .pad .link a { display: block; background: #f5f5f5; line-height: 2; padding: 15px 0; color: #555; font-size: 0.75em; }

/*============================
md_lightbox_aboutInf
============================*/  
 .md_lightbox_aboutInf {
    display: none;
    width: 320px;
    height: auto;
    margin-left: -165px;
    border-radius: 0;
}

.md_lightbox_aboutInf .close-panel {
  font-size: 2em;
  width: 30px;
  text-align: center;
  height: 30px;
  line-height: 32px;
  color: #fff;
  position: absolute;
  top: -35px;
  right: -10px; 
  border: none!important; }
 
#aboutInfModal01 .aboutInfbox { width: inherit; height: 400px; }
#aboutInfModal01 .aboutInfbox .pad { padding: 10px!important; }
#aboutInfModal01 .aboutInfbox .pad .content {}
#aboutInfModal01 .aboutInfbox .pad .content::after { width: 50%; background-size: contain; left: 50%; top: 21%; margin-left: -75px; }
#aboutArea .pad .content::before { display: none; }
#aboutInfModal01 .aboutInfbox .pad .content .ttlMainPanel { padding-top: 20px; font-family: "Calisto MT"; font-style: italic; font-size: 2em; color: #5a504a; }
#aboutInfModal01 .aboutInfbox .pad .content .ttlSubPanel { padding-top: 10px; font-size: 0.875em; font-style: italic; color: #a9975b; }
#aboutInfModal01 .aboutInfbox .pad .content .copy { padding: 75px 0 20px; font-size: 0.85em; }
#aboutInfModal01 .aboutInfbox .pad .content .copy span { display: block; padding: 10px 0; }

#aboutInfModal02 .aboutInfbox { width: inherit; height: 400px; }
#aboutInfModal02 .aboutInfbox .pad { padding: 10px!important; }
#aboutInfModal02 .aboutInfbox .pad .content {}
#aboutInfModal02 .aboutInfbox .pad .content::after { width: 50%; background-size: contain; left: 50%; top: 21%; margin-left: -75px; }
#aboutArea .pad .content::before { display: none; }
#aboutInfModal02 .aboutInfbox .pad .content .ttlMainPanel { padding-top: 20px; font-family: "Calisto MT"; font-style: italic; font-size: 2em; color: #5a504a; }
#aboutInfModal02 .aboutInfbox .pad .content .ttlSubPanel { padding-top: 10px; font-size: 0.875em; font-style: italic; color: #a9975b; }
#aboutInfModal02 .aboutInfbox .pad .content .copy { padding: 75px 0 20px; font-size: 0.85em; }
#aboutInfModal02 .aboutInfbox .pad .content .copy span { display: block; padding: 10px 0; }

#aboutInfModal03 .aboutInfbox { width: inherit; height: 400px; }
#aboutInfModal03 .aboutInfbox .pad { padding: 10px!important; }
#aboutInfModal03 .aboutInfbox .pad .content {}
#aboutInfModal03 .aboutInfbox .pad .content::after { width: 50%; background-size: contain; left: 50%; top: 21%; margin-left: -75px; }
#aboutArea .pad .content::before { display: none; }
#aboutInfModal03 .aboutInfbox .pad .content .ttlMainPanel { padding-top: 20px; font-family: "Calisto MT"; font-style: italic; font-size: 2em; color: #5a504a; }
#aboutInfModal03 .aboutInfbox .pad .content .ttlSubPanel { padding-top: 10px; font-size: 0.875em; font-style: italic; color: #a9975b; }
#aboutInfModal03 .aboutInfbox .pad .content .copy { padding: 75px 0 20px; font-size: 0.85em; }
#aboutInfModal03 .aboutInfbox .pad .content .copy span { display: block; padding: 10px 0; }

.md_lightbox_plan {
    display: none;
    padding: 0;
    width: 320px;
    height: auto;
    margin-left: -165px;
    border-radius: 0; }

.md_lightbox_plan .close-panel {
  font-size: 2em;
  width: 30px;
  text-align: center;
  height: 30px;
  line-height: 32px;
  color: #fff;
  position: absolute;
  top: -35px;
  right: -10px; 
  border: none!important; }
  
 /*============================
md_lightbox_plan
============================*/
.planInfbox { height: 440px; }
.planInfbox .pad {}
.planInfbox .content {}
.planInfbox .content::after { width: 50%; background-size: contain; left: 50%; top: 5.5%; margin-left: -80px; }
.planInfbox .content .ttlMain { padding-top: 45px; font-size: 2em; text-align: center; }
.planInfbox .content .ttlSub { padding: 10px 20px 20px; font-size: 0.875em;  text-align: center; }
.planInfbox .content .ttlBorder { margin-top: 10px; padding: 12px 20px; font-size: 0.875em; line-height: 1.25; }
.planInfbox .content .ttlBorder span { display: block; font-size: 1.5em; letter-spacing: 1px; }
.planInfbox .content .planText {}
.planInfbox .content .planText .price { padding: 30px 20px 0; }
.planInfbox .content .planText .price span { font-size: 1.25em; }
.planInfbox .content .planText .price em {}
.planInfbox .content .planText .planInfo { padding: 30px 20px 0; }
.planInfbox .content .planText .planInfo .ttl {}
.planInfbox .content .planText .planInfo .ttl::after {}
.planInfbox .content .planText .planInfo .ttl::before { left: 46%; }
.planInfbox .content .planText .planInfo ul { padding-bottom: 20px; }
.planInfbox .content .planText .planInfo ul li { width: inherit!important; float: inherit!important; padding: 5px 0!important; line-height: 1.25; font-size: 0.875em; border: none!important; }

.planInfbox .content .cautionText { margin-top: 0; }
.planInfbox .content .cautionText .pad { padding: 40px 20px 0; }
.planInfbox .content .cautionText .pad .ttl {}
.planInfbox .content .cautionText .pad ul {}
.planInfbox .content .cautionText .pad ul li { width: inherit!important; float: inherit!important; padding: 5px 0!important; line-height: 1.25; font-size: 0.875em; border: none!important; }
.planInfbox .content .cautionText .pad .btn {}
.planInfbox .content .cautionText .pad .btn a { border-bottom: none!important; }

}