@charset "UTF-8";

:root {
  --std-width: 1250px;
  --std-clr: #666;
  --std-fz: 20px;
  --std-lh: 1.7;
  --std-ls: -.01em;

  --clr-base: #fff;
  --clr-main: #e27c7b;
  --clr-sub-01: #be894a; /* ゴールド */
  --clr-sub-03: #ca3d4e; /* 赤 */
  --clr-acc-01: rgba(252,226,181,.2); /* BG */
  --clr-acc-02: #e6e6e6;

  --fz-h2: 56px;
  --fz-h3: 48px;
  --fz-h4: 32px;
  --fz-h5: 28px;
  --fz-L: 18px;
  --fz-M: 15px;
  --fz-S: 12px;
  --fz-nav: clamp(18px,5vw,24px);

  --adj-100: 100px;
  --adj-90:   90px;
  --adj-80:   80px;
  --adj-70:   70px;
  --adj-60:   60px;
  --adj-50:   50px;
  --adj-40:   40px;
  --adj-30:   30px;
  --adj-20:   20px;

  --TH-height: 120px;
  --vis-padding: 6.7%;
  --sec-padding: var(--adj-80);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / GENERAL ->                  */
/* =====>=====>=====>=====>=====>=====>===== */

body {
  overflow: hidden; /* loading */
  min-width: var(--std-width);
  max-height: 100%;
  color: var(--std-clr);
  letter-spacing: var(--std-ls);
  background: var(--clr-base);
}
header,
footer {
  width: 100%;
}
p,
dl,ol,ul,
figcaption,
small {
  line-height: var(--std-lh);
}
p,
dl,ol,ul,
figcaption,
em {
  font-size: var(--std-fz);
}
a {
  color: inherit;
}
em {
  font-weight: 500;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / GENERAL CLASS ->            */
/* =====>=====>=====>=====>=====>=====>===== */

.inner {
  max-width: var(--std-width);
  margin: auto;
  padding: 0;
}
.mc {
  color: var(--clr-main);
}
.tac {
  text-align: center;
}

/*===== #loading =====*/
#loading {
  display: grid;place-items: center;
  width: 100vw;height: 100vh;
  position: fixed;inset: 0;
  z-index: 9999;
  background-color: var(--clr-base);
  transition: all 1s;
}
.stop {
  opacity: 0;
  visibility: hidden;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / HEADING ->                  */
/* =====>=====>=====>=====>=====>=====>===== */

h2,h3,h4,h5 {
  font-weight: 500;
  line-height: 1.2;
}
h2,h3 {
  font-feature-settings: 'palt';
  font-family: var(--serif);
}
h2,h4,h5 {
  color: var(--clr-main);
}
h4,h5 {
  margin-bottom: var(--adj-30);
}
h2 {font-size: var(--fz-h2);}
h3 {font-size: var(--fz-h3);}
h4 {font-size: var(--fz-h4);}
h5 {font-size: var(--fz-h5);}

.glow {
  margin-bottom: var(--adj-50);
  color: var(--clr-base);
  text-align: center;
  filter: drop-shadow(0 0 14px rgba(209,48,125,.8));
}

/*===== ORDERED =====*/
#sec04 h2 {
  color: var(--std-clr);
}
#sec05 h4 {
  text-indent: -.5em;
}
.msgBox h4 {
  font-family: var(--serif);
}
h2 + p {
  margin-top: var(--adj-30);
}

/*===== [class^="mod"] =====*/
[class^="mod"] {
  text-align: center;
}
.mod2,
.mod3 {
    display: grid;place-items: center;
  height: var(--height);
}

/*===== .mod =====*/
.mod {
  width: var(--width);
  margin: 0 auto var(--adj-40);
}
.mod::after {
  width: var(--width);height: 30px;
  display: block;
  margin-top: 15px;
  background: url(../img/common/t-bdr.svg) no-repeat;
  background-position: center center;
  background-size: cover;
  content: '';
}

/*===== .mod2 =====*/
.mod2 {
--height: 90px;
  margin-bottom: var(--adj-50);
  background: var(--clr-main);
}
.mod2 h2 {
  color: var(--clr-base);
  font-size: var(--fz-h3);
}

/*===== .mod3 =====*/
.mod3 {
--height: 80px;
  margin: var(--adj-50) 0;
  border: 1px solid var(--clr-main);
  border-radius: calc(var(--height) / 2);
  background: var(--clr-base);
}
.mod3 h3 {
  color: var(--clr-main);
  font-family: var(--ST);
  font-size: var(--fz-h4);
  letter-spacing: .1em;
}
.mod3 + p {
  margin-bottom: var(--adj-30);
  text-align: center;
}

/*===== ORDERED =====*/
#sec02 .mod {
--width: 900px;
  position: relative;
}
#sec02 .mod span {
  position: absolute;inset: -70px auto auto -75px;
}
#sec04 .mod {
  --width: 680px;
}
#sec04 .mod::after {
  background-image: url(../img/common/t-bdr2.svg);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / TOP-HEADER ->               */
/* =====>=====>=====>=====>=====>=====>===== */

#TH {
  --h1-width: 430px;
  --h1-height: 100px;
}

/*===== #TH =====*/
#TH,
#TH .inner,
.ctc {
  align-items: center;
}
#TH {
  min-width: var(--std-width);
  height: var(--TH-height);
  position: fixed;inset: 0 auto auto 0;
  z-index: 1000;
  background: var(--clr-base);
}
#TH .inner {
  width: 100%;
  min-width: var(--std-width);
  max-width: 100%;
  padding: 0 var(--vis-padding);
}
#TH h1 {
  width: var(--h1-width);
}
#TH a:not([class="btnF"]) {
  display: block;
}

/*===== .ctc =====*/
.ctc .call {
  margin: 0 1em;
}
.ctc p {
  max-height: 50px;
  padding: .5em .8em;
  position: relative;
  font-size: var(--fz-S);line-height: 1.4;
  border-radius: 4px;
  background: var(--clr-acc-02);
}
.ctc p::after {
  width: 0;height: 0;
  position: absolute;inset: 21px -10px auto auto;
  border-width: 4px 0 4px 10px;
  border-style: solid;
  border-color: transparent transparent transparent var(--clr-acc-02);
  content: '';
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / GLOBAL-NAV ->               */
/* =====>=====>=====>=====>=====>=====>===== */

#GNav {
  display: none;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / VISUAL ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

#MV {
  --MV-height: calc(100vh - var(--TH-height));
  --pos: 40px;
}

/*===== #MV =====*/
#MV {
  width: 100%;height: var(--MV-height);
  min-height: 660px;
  margin-top: var(--TH-height);
  padding: 0 var(--vis-padding) var(--adj-40);
  overflow: hidden;
  background: var(--clr-base);
}
#MV .cover {
  height: 100%;
  position: relative;
}
#MV + img,
.spLogo {
  display: none;
}

/*===== [class^="mvcopy"] =====*/
[class^="mvcopy"],
.scroll {
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.4));
}
.mvcopy1 {
  width: min(44%,859px);
  inset: 70px 60px auto auto;
}
.mvcopy2 {
  width: min(32%,614px);
  inset: auto auto 40px 30px;
}

/*===== .scroll =====*/
.scroll {
  width: 86px;
  margin: auto;
  inset: auto 0 var(--pos) 0;
}
.scroll::after {
  width: 1px;height: calc(var(--pos) - 10px);
  margin: auto;
  position: absolute;inset: auto 0 calc(var(--pos) * -1) 0;
  background: rgba(255,255,255,.6);
  animation: dwn 2s cubic-bezier(1, 0, 0, 1) infinite;
  content: '';
}
@keyframes dwn {
  0% {
    opacity: 1;
    transform: scale(1,0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1,1);
    transform-origin: 0 0;
  }
  30.1%,70% {
    transform: scale(1,1);
    transform-origin: 0 100%;
  }
  100% {
    opacity: 0;
    transform: scale(1,0);
    transform-origin: 0 100%;
  }
}

/*===== [class^="src"] =====*/
[class^="src"] {
  width: 100%;height: 100%;
  position: absolute;inset: 0;
  border-radius: 60px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.src1 {
  background-image: url(../img/mv/mv01.webp);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / SECTION ->                  */
/* =====>=====>=====>=====>=====>=====>===== */

main,
article {
  overflow: hidden;
}
section {
  padding: var(--sec-padding) 0;
}
section p + p {
  margin-top: 1em;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / ASIDE ->                    */
/* =====>=====>=====>=====>=====>=====>===== */

#sns {
  padding: var(--adj-30) 0;
  border-top: 2px solid var(--clr-acc-01);
}
#sns a {
  width: min(49%,590px);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / FOOTER ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

footer .inner {
  position: relative;
}
footer .inner a,
footer h1 {
  max-width: 665px;
  display: block;
}
.bos {
  position: absolute;top: 0;right: 0;
}
.ftrAdd {
  margin: .8em 0;
}
.gallery {
  margin-top: var(--adj-80);
}
small {
  width: 100%;height: 100px;
  color: var(--clr-base);
}

/*===== .Gmap =====*/
.Gmap {
--height: 400px;
  width: 100%;height: var(--height);
  margin-top: var(--adj-50);
  border: 0;
  background: #ffd8d8;
}
.Gmap iframe {
  width: 100%;height: 100%;
  border: 0;
  mix-blend-mode: luminosity;
  transition: var(--transition);
}
.Gmap:hover iframe {
  mix-blend-mode: unset;
}

/*===== .ftrLink =====*/
.ftrLink {
  display: flex;justify-content: center;align-items: flex-start;
  padding: var(--adj-20) 0;
  font-size: var(--fz-S);
  text-align: center;
}
.ftrLink li {
  margin: 0 1em;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / MOTION ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

:root {
  --filter: drop-shadow(0 0 3px rgba(0,51,161,.1));
  --transition: .3s ease;
}

/*===== [class^="btn"] =====*/
[class^="btn"] {
    display: flex;justify-content: center;align-items: center;
  width: var(--btn-width);height: var(--btn-height);
  margin: 0 auto;
  color: var(--clr-base);
  line-height: 1.1;
  transition: var(--transition);
  filter: var(--filter);
}

/*===== .btnF =====*/
.btnF {
  --btn-width: 200px;
  --btn-height: 50px;
}
.btnF {
  position: relative;
  border-radius: 25px;
  background: linear-gradient(90deg,#fdac4e,#ffa24c,#ff974b,#ff8c4c,#ff814d,#ff7650,#ff6a54,#ff5e58);
}
.btnF::before {
  width: 25px;height: 17px;
  margin: 0 6px -1px 0;
  background: url(../img/common/ico03.svg) no-repeat;
  background-size: contain;
  content: '';
}

/*===== .btnM =====*/
.btnM {
  display: none;
}

/*===== .btnS =====*/
.btnS {
  --btn-width: min(90%,400px);
  --btn-height: 60px;
}
.btnS {
  margin-top: var(--adj-50);
  font-size: 22px;
  border-radius: 10px;
  background: linear-gradient(30deg,#fdc088,#ffbc8b,#ffb98f,#ffb693,#ffb397,#ffb09c,#fdaea0,#fbaca4);
}
.btnF:hover,
.btnS:hover {
  background: var(--clr-main);
}

/*===== .act =====*/
.iO {
  opacity: 0;
}
.xyz-in {
  opacity: 1;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / COMMON PROPERTY ->          */
/* =====>=====>=====>=====>=====>=====>===== */

#sec04 dt,
.h4,
.list,
.num h3 span,
.reco em {
  color: var(--clr-main);
}
#sec04 dt,
.h4,
.list li {
  font-weight: 500;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / HIDE ->                     */
/* =====>=====>=====>=====>=====>=====>===== */

.mod h2 br,
.msgBox h4 br {
  display: none;
}
ol.list li:first-child::before {
  display: none;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / index ->                    */
/* =====>=====>=====>=====>=====>=====>===== */

#sec01 .inner,
.rBox,
.reco {
  position: relative;
}
#sec01 figure,
.area,
.vis {
  order: -1;
}
#sec03,
#sec07,
small {
  background: linear-gradient(30deg,#fdc088,#ffbc8b,#ffb98f,#ffb693,#ffb397,#ffb09c,#fdaea0,#fbaca4);
}
#sec04 dt:nth-of-type(n+2),
.h4 {
  margin-top: var(--adj-50);
}
#sec04 dd,
.reco li:nth-of-type(n+3),
.num p {
  margin-top: 1em;
}

/*===== [class^="list"] =====*/
[class^="list"] {
  margin-bottom: 1em;
}
[class^="list"] li {
  padding-left: 1em;
  text-indent: -1em;
}
[class^="list"] li:nth-of-type(n+2) {
  margin-top: .25em;
}

/*===== #sec01 =====*/
#sec01 header {
    flex-basis: calc(var(--std-width) - 510px);
  margin: var(--adj-50) 0 0 auto;
}
#sec01 figure img + img {
  margin-top: .5em;
}

/*===== #sec02 =====*/
#sec02 {
  margin-top: var(--adj-20);
}
.lady {
  position: absolute;top: 50px;right: 0;
}
.num {
  width: 750px;
  margin-bottom: var(--adj-50);
}
.num h3 span {
  margin-right: .25em;
}

/*===== #sec03 =====*/
.reco {
--width: 27px;
--height: 31px;
  padding: var(--adj-40) var(--adj-50);
  border-radius: 20px;
  background: var(--clr-base);
}
.reco::after {
--margin: 6px;
--marginX2: calc(var(--margin) * 2);
  width: calc(100% - var(--marginX2));height: calc(100% - var(--marginX2));
  position: absolute;top: var(--margin);left: var(--margin);
  border: 1px solid var(--clr-main);
  border-radius: 18px;
  background: transparent;
  content: '';
}
.reco li {
    flex-basis: 50%;
  padding-left: var(--width);
  line-height: 1.4;
  text-indent: calc(calc(var(--width) + 4px) * -1);
}
.reco li:last-child {
  flex-basis: 100%;
}
.reco li::before {
  width: var(--width);height: var(--height);
  display: inline-block;
  margin: 0 4px -4px 0;
  background: url(../img/common/ico01.svg) no-repeat;
  background-size: contain;
  content: '';
}

/*===== #sec04 =====*/
#sec04 {
  background: url(../img/BG01.webp) no-repeat;
  background-position: center center;
  background-size: cover;
}
#sec04 dt {
  font-family: var(--serif);
  font-size: var(--fz-h3);line-height: 1.2;
}

/*===== #sec05 =====*/
#sec05 {
  background: var(--clr-acc-01);
}
#sec05 .mod2 + img {
  margin: var(--adj-50) auto;
}
.vis {
  max-width: 640px;
  margin-right: var(--adj-60);
}
.cntBox {
  justify-content: flex-start;
}
.mod3 + .cntBox div img {
  margin-top: 2em;
}
.cntBox:nth-of-type(n+2) {
  margin-top: var(--adj-50);
}
.cntBox:nth-of-type(n+2) h4 {
  flex-basis: 100%;
}
.cntBox:nth-of-type(n+2) div {
    flex-basis: 35%;
  margin-left: var(--adj-60);
}
.cntBox em {
  display: block;
  font-size: var(--fz-h5);
}
.ca {
  margin: 1em 0;
  color: var(--clr-sub-03);
  font-size: var(--fz-L);
}
.ca::before {
  width: 20px;height: 19px;
  display: inline-block;
  margin-bottom: -3px;
  background: url(../img/common/ico02.svg) no-repeat;
  background-size: contain;
  content: '';
}
.list li::before {
  content: '● ';
}
.list2 li::before {
  content: '・';
}
.list2.center {
  width: 65%;
  margin: 0 auto 1em;
  line-height: 1.4;
}
.list2.fx {
  padding: 0 var(--adj-50);
}
.list2.fx li,
.flow .list2 {
  font-size: var(--fz-L);line-height: 1.4;
}
.list2.fx li {
  flex-basis: 48%;
}
.points img {
  width: 23%;height: auto;
}
.h4 {
  font-size: var(--fz-h5);
}
.msgBox + .msgBox {
  margin-top: var(--adj-40);
  padding-top: var(--adj-40);
  border-top: 2px dotted var(--clr-main);
}
.shots {
  margin: auto;
}
.example {
--margin: 60px;
  margin: var(--margin) 0;
}

/*===== #sec06 =====*/
ol.list {
    flex-basis: 250px;
  margin: var(--adj-30) var(--adj-100) 0 0;
}
ol.list li {
  flex-basis: 50%;
}
ol.list li:first-child {
    flex-basis: 100%;
  font-family: var(--serif);
  font-size: var(--fz-h5);
}

/*===== #sec07 =====*/
.flow {
  padding: var(--adj-30);
  background: var(--clr-base);
}
.flow + .flow {
  margin-top: var(--adj-50);
}
.flow header {
  flex-basis: 67%;
  order: 1;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / inquiry ->                  */
/* =====>=====>=====>=====>=====>=====>===== */

input[type],
select {
  height: var(--input-height);
}
input[type="checkbox"],
input[type="radio"] {
  display: none;
}
input[type="text"],
input[type="email"],
select,
textarea {
  padding: .4em 1em;
  line-height: 1.4;
  border-radius: 5px;
  background: var(--form-clr);
  box-shadow: inset 1px 1px 1px #eee,inset -1px -1px 2px #fff;
}
textarea {
  height: 4em;
  min-height: 200px;
  max-width: 100%;
  resize: vertical;
}

/*===== #ctcForm =====*/
#ctcForm {
  --form-width: min(92%,900px);
  --input-height: 44px;
  --form-clr: #f0f0f0;
  --tgt-clr: var(--clr-main);
}
#ctcForm {
  width: var(--form-width);
  margin: auto;
}
#ctcForm label {
  display: flex;
}
#ctcForm dt,
#ctcForm dd {
  font-size: 20px;
}
#ctcForm dt {
  margin-left: 10px;
  font-weight: 500;
}
#ctcForm dt:nth-of-type(n+2),
.beShots {
  margin-top: var(--adj-30);
}
#ctcForm dt span {
  margin-right: .5em;
}
#ctcForm dt span:not([class]) {
  color: #ccc;
}
#ctcForm dd {
    flex-basis: 100%;
  margin-top: 10px;
  position: relative;
}
#ctcForm label span {
    display: flex;align-items: center;
  position: relative;
  padding: 0 0 2px 30px;
}
#ctcForm label span::before,
#ctcForm label span::after {
  position: absolute;
  transition: .3s all;
  content: '';
}
#ctcForm label span::before {
--input-size: 24px;
  width: var(--input-size);height: var(--input-size);
  top: calc(50% - calc(var(--input-size) / 2));left: 0;
}
#ctcForm label span::after {
  left: 4px;
  opacity: 0;
}
#ctcForm input:checked + span {
  color: var(--tgt-clr);
  transition: .3s all;
}
#ctcForm input:checked + span::after {
  opacity: 1;
}
.citySelect,
.reserve {
--select-size: 70px;
  display: flex;justify-content: flex-start;align-items: baseline;
}
.citySelect select {
  flex-basis: min(100% - var(--select-size),380px);
}
.citySelect span {
  flex-basis: var(--select-size);
}
.reserve {
  justify-content: space-between;
}
.reserve > * {
  flex-basis: 48%;
}

/*===== .beShots =====*/
.beShots,
.beShots br {
  display: none;
}
input[name="f-bill"][value="1"]:checked + span{
  color: red;
}
#ctcForm .beShots .radio {
  flex-wrap: wrap;
}
#ctcForm .beShots .radio > span {
  margin-bottom: 15px;
}
#ctcForm .shotPrice {
  margin-top: 0;
  font-size: var(--fz-S);
}

/*===== .check =====*/
#ctcForm .check > span,
#ctcForm .radio > span {
  margin-left: 0;
}
.check label span::before,
.radio label span::before {
  background: var(--form-clr);
  box-shadow: inset 1px 1px 1px #eee,inset -1px -1px 2px #fff;
}
.check {
  display: flex;justify-content: flex-start;align-items: center;
  flex-wrap: wrap;
}
.check .mwform-checkbox-field.horizontal-item {
  margin: .7em 2em 0 0;
}
.check label span::after {
--input-size: 16px;
  width: calc(var(--input-size) * 1.6);height: var(--input-size);
  top: calc(50% - var(--input-size));
  border-bottom: 3px solid var(--tgt-clr);
  border-left: 4px solid var(--tgt-clr);
  transform: rotate(-45deg) scale(1);
}

/*===== .radio =====*/
#ctcForm .radio > span {
  margin-right: 50px;
}
.radio {
  display: flex;align-items: flex-start;
}
.radio label span::before,
.radio label span::after {
  border-radius: 100%;
}
.radio label span::after {
--input-size: 16px;
  width: var(--input-size);height: var(--input-size);
  top: calc(50% - calc(var(--input-size) / 2));
  background: var(--tgt-clr);
  transform: scale(0.5);
}
.radio input:checked + span::after {
  transform: scale(1);
}

/*===== .error-msg =====*/
.error-msg {
  position: absolute;inset: -40px auto auto 0;
  color: var(--clr-sub-03)!important;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fz-S)!important;
}

/*===== .policy =====*/
#policy {
  margin-top: var(--adj-50);
  padding-top: 25px;
  position: relative;
  border-top: 1px solid #eee;
}
#policy p {
  text-align: center;
}
#policy p a {
  color: var(--clr-main);
}
#policy .check > span {
  margin: 40px auto calc(-1 * var(--adj-20));
}
#policy .error-msg {
  inset: 30px calc(50% - 95px) 0;
}
#policy .check .error-msg {
  top: auto;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / thanks ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

#thanks {
    display: grid;
    grid-template-rows: auto 1fr auto;
  height: 100%;
}

/*===== .sendOk =====*/
.sendOk {
  margin: var(--adj-90) 0;
  padding: 3em 0;
  text-align: center;
  background: var(--clr-acc-01);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / commerce ->                 */
/* =====>=====>=====>=====>=====>=====>===== */

#comm #sec01 {
  margin-top: var(--adj-90);
}
#comm h2 {
  padding-bottom: 8px;
  font-size: var(--fz-h5);
  border-bottom: 1px solid var(--clr-main);
}
#comm h2 + p {
  margin: 1em 0 var(--adj-50);
}
.comm dt {
  color: #444;
  font-weight: 500;
}
.comm dd {
  margin-top: .5em;
  font-size: var(--fz-M);
}
.comm dd + dt {
  margin-top: 2em;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / 404 ->                      */
/* =====>=====>=====>=====>=====>=====>===== */

#pnf main {
  margin-bottom: var(--adj-100);
}
#pnf section {
  min-height: 280px;
  margin-top: var(--TH-height);
  text-align: center;
  background: var(--clr-acc-02);
}
#pnf header + p {
  margin-top: 1em;
  font-size: var(--fz-S);
}