@charset "UTF-8";
:root {
  --main: #a4801d;
  --sub01: #00303f;
  --sub02: rgb(122, 128, 128);
  --sub03: #92aca3;
  --text: #1a1a1a;
  --base01: #fff;
  --base02: rgba(164, 128, 29, 0.1);
  --base03: #dfddda;
  --fontE: above-the-beyond, serif;
  --fontJ: serif;
  --font: serif;
  --shadow: rgba(122, 128, 128, 0.4);
}

html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background-color: var(--base03);
}

header,
main {
  color: var(--text);
  font-family: var(--font);
}

body,
html,
h1,
h2,
h3,
h4,
h5,
p,
ul,
li,
table,
th,
td,
dl,
dt,
dd,
div,
section,
main,
header,
footer,
nav,
span {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
p,
li,
th,
td,
dt,
dd {
  font-size: 14px;
  font-weight: normal;
}

section {
  padding-top: 60px;
}

a {
  display: block;
  text-decoration: none;
  color: var(--text);
}

.titleE {
  font-family: var(--fontE);
  font-weight: 400;
  font-style: normal;
  display: block;
}

.bgImg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  overflow: hidden;
}

h2 {
  color: var(--main);
  font-size: 25px;
  text-align: center;
  letter-spacing: 3px;
  position: absolute;
  top: -35px;
  left: 50%;
  /* 親の左端から50%の位置へ移動 */
  transform: translateX(-50%);
  /* 自分の幅の半分だけ左に戻す */
}
h2 .titleE {
  font-size: 48px;
  display: inline-block;
  padding-right: 30px;
  padding-bottom: 30px;
  vertical-align: middle;
}

.option > div,
.flow > div {
  border-top: 1px solid var(--sub02);
  position: relative;
  padding-top: 60px;
  padding-bottom: 40px;
}

.option h3,
.flow h3 {
  font-size: 20px;
  color: var(--sub02);
  background-color: var(--base01);
  padding: 0 20px;
  position: absolute;
  top: -17px;
  left: 50%;
  /* 親の左端から50%の位置へ移動 */
  transform: translateX(-50%);
  /* 自分の幅の半分だけ左に戻す */
}

.option h4,
.flow h4 {
  color: var(--main);
  font-size: 16px;
  padding-bottom: 30px;
  letter-spacing: 2px;
}
.option h4 span,
.flow h4 span {
  font-size: 75%;
}

.kome {
  font-size: 11px;
  color: var(--sub02);
  text-align: center;
}
.kome::before {
  content: "※";
}

.colon {
  display: grid;
  grid-template-columns: 1fr 3fr;
}
.colon dd {
  position: relative;
  padding-bottom: 12px;
}
.colon dd::before {
  content: "：";
  display: block;
  padding-right: 5px;
  position: absolute;
  left: -15px;
}

.listmark > li::before {
  content: "・";
  display: inline-block;
  padding-right: 5px;
}

.inner {
  width: 1000px;
  margin: 30px auto 0;
  background-color: var(--base01);
  position: relative;
  padding: 120px 40px 40px;
}
.inner[class*=option] {
  margin-top: 60px;
}
.inner[class*=flow] {
  margin-top: 30px;
}
.inner[class*=venue] {
  margin-top: 30px;
}
.inner[class*=faq] {
  margin-top: 30px;
}

.reserve {
  text-align: center;
}
.reserve .btn {
  width: 300px;
  margin: 40px auto 10px;
}
.reserve .btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--base01);
  font-size: 28px;
  background-color: var(--main);
  border-radius: 5px;
  padding: 15px;
}
.reserve .kome {
  color: var(--sub01);
}

.sp {
  display: none;
}

.pc {
  display: block;
}

#switch {
  display: none;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10005;
}
header #mainNav {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
header #mainNav h1 {
  position: relative;
}
header #mainNav h1 a {
  display: block;
}
header #mainNav h1 .logo {
  display: block;
  background-image: url("../images/logo_header.png");
  width: 163px;
  height: 60px;
  overflow: hidden;
  padding-top: 60px;
  margin: 10px 20px;
  position: absolute;
}
header #mainNav h1 .titleE {
  margin-top: 4px;
  font-size: 21px;
  color: var(--main);
  padding-left: 190px;
}
header #mainNav ul {
  list-style-type: none;
  display: flex;
}
header #mainNav ul li {
  padding: 15px 5px;
}
header #mainNav ul li a {
  color: var(--sub01);
  padding: 10px;
}
header #mainNav ul li:last-of-type {
  padding: 0 0 0 10px;
}
header #mainNav ul li:last-of-type a {
  background-color: var(--main);
  color: var(--base01);
  height: 70px;
  width: 120px;
  display: flex;
  padding: 0;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
}

main .firstBox {
  padding-top: 500px;
  position: relative;
}
main .firstBox::before {
  content: "";
  display: block;
  width: 100%;
  height: 500px;
  position: absolute;
  z-index: 1;
  top: 0;
  background-image: url("../images/top_img.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--base01);
}
main .firstBox::after {
  content: "";
  display: block;
  max-width: 100%;
  width: 1000px;
  height: auto;
  aspect-ratio: 1/1;
  background-image: radial-gradient(circle, var(--base01) 20px, rgba(255, 255, 255, 0) 50%);
  position: absolute;
  z-index: 0;
  top: 60px;
  left: 50%;
  /* 親の左端から50%の位置へ移動 */
  transform: translateX(-50%);
  /* 自分の幅の半分だけ左に戻す */
}
main .firstBox > div {
  position: relative;
  z-index: 5;
}
main .firstBox > div:first-of-type {
  text-align: center;
  color: var(--sub02);
  padding-bottom: 80px;
}
main .firstBox > div:first-of-type p {
  font-size: 16px;
}
main .firstBox > div:first-of-type h1 {
  font-size: 30px;
  color: var(--sub01);
  padding-top: 30px;
  padding-bottom: 40px;
}
main .firstBox > div:first-of-type h1 .titleE {
  color: var(--main);
  font-size: 35px;
}
main .firstBox > div:last-of-type {
  width: 1000px;
  height: 300px;
  margin: 0 auto;
  padding-left: 520px;
  margin-bottom: 30px;
  background-image: url("../images/img01.jpg");
  background-position: left center;
  background-size: 470px auto;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  line-height: 2em;
}
main .firstBox > div:last-of-type p:first-of-type {
  padding-bottom: 20px;
}
main section p.readTxt {
  text-align: center;
  color: var(--sub02);
  font-size: 16px;
  padding-bottom: 20px;
}
main section .option p.readTxt {
  padding-bottom: 50px;
}
main .plan > .inner p.planPrice {
  font-size: 18px;
  text-align: center;
  padding-bottom: 40px;
}
main .plan .coverBox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
main .plan .coverBox .inBox {
  border: 1px solid var(--base03);
  padding: 30px 30px 20px;
}
main .plan .coverBox .inBox h3 {
  font-size: 20px;
  color: var(--sub02);
  text-align: center;
  padding-bottom: 40px;
}
main .plan .coverBox .inBox ul {
  line-height: 1.8em;
  list-style-type: none;
}
main .plan .coverBox + p {
  font-size: 14px;
  padding: 20px 0 40px;
}
main .plan .lastBox {
  width: 640px;
  margin: 0 auto;
  border: 1px solid var(--base03);
  padding: 30px 30px 20px 40px;
}
main .plan .lastBox .colon {
  grid-template-columns: 1fr 4fr;
}
main .plan .lastBox .colon dt {
  padding-right: 40px;
}
main .plan .lastBox .colon dt.text2 {
  letter-spacing: 1em;
  padding-left: 0.5em;
}
main .plan .lastBox .colon dd::before {
  left: -40px;
}
main .plan .option ul {
  list-style-type: none;
  width: 800px;
  margin: 0 auto;
  padding-bottom: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
main .plan .option ul li {
  text-align: center;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 180px auto;
  padding-top: 200px;
  color: var(--main);
  font-size: 16px;
}
main .plan .option ul li:nth-of-type(1) {
  background-image: url("../images/img02.jpg");
}
main .plan .option ul li:nth-of-type(2) {
  background-image: url("../images/img03.jpg");
}
main .plan .option ul li:nth-of-type(3) {
  background-image: url("../images/img04.jpg");
}
main .plan .option .op02 > div:nth-of-type(1) {
  padding-bottom: 60px;
  background-image: url("../images/img05.jpg");
  background-repeat: no-repeat;
  background-position: right center;
  padding-left: 40px;
  padding-right: 200px;
}
main .plan .option .op02 > div:nth-of-type(2) {
  background-image: url("../images/img06.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  padding-left: 240px;
  padding-right: 0;
}
main .plan .option .op02 > div p {
  line-height: 1.7em;
}
main .plan .option .op02 > div dl {
  display: grid;
  grid-template-columns: 0.7fr 4fr;
  padding-top: 40px;
}
main .plan .option .op02 > div dl dt {
  color: var(--sub01);
  font-size: 15px;
}
main .plan .option .op02 > div dl dd {
  padding-bottom: 40px;
}
main .plan .option .op03 > div {
  padding-left: 240px;
  background-image: url("../images/img07.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  position: relative;
}
main .plan .option .op03 > div::before {
  content: "";
  display: block;
  width: 140px;
  height: 100px;
  position: absolute;
  top: 170px;
  left: 35px;
  background-image: url("../images/img071.jpg");
  background-size: cover;
  border: 3px solid var(--base01);
  box-shadow: 4px 4px 4px var(--shadow);
  transform: rotate(-6deg);
}
main .plan .option .op03 > div::after {
  content: "";
  display: block;
  width: 110px;
  height: 80px;
  position: absolute;
  top: 270px;
  left: 10px;
  background-image: url("../images/img072.jpg");
  background-size: cover;
  border: 3px solid var(--base01);
  box-shadow: 4px 4px 4px var(--shadow);
  transform: rotate(6deg);
}
main .plan .option .op03 > div .price {
  padding-bottom: 20px;
}
main .plan .option .op03 > div .kome:not(:last-of-type) {
  padding-bottom: 40px;
}
main .plan .option .price {
  display: block;
  color: var(--text);
  padding-top: 15px;
  font-size: 14px;
}
main .plan .option .price span {
  font-size: 75%;
}
main .plan .option .kome {
  text-align: left;
}
main .about .inner {
  padding-top: 40px;
}
main .about h2 {
  position: relative;
  top: auto;
  letter-spacing: inherit;
  font-size: 22px;
  color: var(--sub01);
  font-weight: bold;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--main);
}
main .about ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}
main .about ul li {
  background-color: var(--base02);
}
main .about ul li:nth-child(1) h3 {
  background-image: url("../images/img08.jpg");
}
main .about ul li:nth-child(2) h3 {
  background-image: url("../images/img09.jpg");
}
main .about ul li:nth-child(3) h3 {
  background-image: url("../images/img10.jpg");
}
main .about ul li h3 {
  background-color: var(--base01);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom 15px;
  font-size: 17px;
  text-align: center;
  padding-bottom: 235px;
}
main .about ul li p {
  padding: 15px 20px;
  line-height: 1.7em;
}
main .flow > div {
  border: 1px solid var(--sub02);
  padding: 40px;
  margin-bottom: 60px;
}
main .flow .read {
  text-align: center;
  padding-bottom: 30px;
  font-size: 17px;
  color: var(--sub02);
}
main .flow .step dt {
  color: var(--main);
  border-bottom: 1px solid var(--main);
  padding-top: 20px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: relative;
}
main .flow .step dt span {
  display: inline-block;
  font-size: 24px;
  width: 325px;
}
main .flow .step dt span::before {
  content: "STEP ";
}
main .flow .step dt::before {
  content: "";
  display: block;
  width: 150px;
  height: 150px;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 150px;
}
main .flow .step dt::after {
  content: "";
  display: block;
  width: 150px;
  height: 150px;
  border: 1px solid var(--main);
  position: absolute;
  top: -5px;
  left: 153px;
}
main .flow .step dd {
  height: 100px;
  padding: 10px 0 0 330px;
  margin-bottom: 20px;
}
main .flow .f1 dt:nth-of-type(1)::before {
  background-image: url("../images/img11.jpg");
}
main .flow .f1 dt:nth-of-type(2)::before {
  background-image: url("../images/img12.jpg");
}
main .flow .f2 dt:nth-of-type(1)::before {
  background-image: url("../images/img13.jpg");
}
main .flow .f2 dt:nth-of-type(2)::before {
  background-image: url("../images/img14.jpg");
}
main .flow .f2 dt:nth-of-type(3)::before {
  background-image: url("../images/img15.jpg");
}
main .flow .f2 dt:nth-of-type(4)::before {
  background-image: url("../images/img16.jpg");
}
main .flow .f2 dt:nth-of-type(5)::before {
  background-image: url("../images/img17.jpg");
}
main .venue ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
main .venue ul img {
  vertical-align: bottom;
}
main .faq {
  padding-left: 60px;
  padding-right: 60px;
}
main .faq dt {
  color: var(--sub01);
  font-size: 19px;
  font-weight: bold;
  padding-bottom: 15px;
}
main .faq dt span {
  display: inline-block;
  background-color: var(--main);
  padding: 5px 10px 8px;
  color: var(--base01);
  margin-right: 15px;
  border-radius: 3px;
}
main .faq dd {
  padding-bottom: 20px;
  padding-left: 85px;
  border-bottom: 1px solid var(--sub02);
  margin-bottom: 15px;
  position: relative;
}
main .faq dd::before {
  content: "A";
  display: inline-block;
  position: absolute;
  left: 50px;
  width: 25px;
  text-align: center;
  padding-bottom: 3px;
  color: var(--base01);
  background-color: var(--sub03);
  border-radius: 3px;
  margin-right: 10px;
}
footer {
  padding-top: 90px;
}
footer .footer {
  background-color: var(--sub01);
  color: var(--base01);
  font-family: var(--font);
}
footer .footer > div.access {
  background-color: var(--sub03);
}
footer .footer > div.access ul {
  list-style-type: none;
  border-top: 1px solid var(--base01);
  margin-top: 30px;
  padding-top: 10px;
}
footer .footer > div.access .map .mapInner {
  width: 600px;
}
footer .footer > div.access .map .mapInner iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
}
footer .footer > div > div {
  width: 1000px;
  margin: 0 auto;
  padding-top: 120px;
  padding-bottom: 80px;
  position: relative;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 40px;
}
footer .footer > div > div h2 {
  position: absolute;
  color: var(--base01);
}
footer .footer > div > div .tel {
  font-size: 25px;
}
footer .footer > div.contact > div {
  padding: 120px 60px 80px;
  grid-template-columns: 1fr 1fr;
}
footer .footer > div.contact > div p {
  text-align: center;
}
footer .footer > div.contact > div div:not(.reserve) {
  padding-top: 10px;
}
footer .footer > div.contact > div .btn {
  margin: 0 auto 10px;
}
footer .footer > div.contact > div .kome {
  color: var(--base01);
}/*# sourceMappingURL=base.css.map */