@charset "UTF-8";
.fadeIn {
  transform: translate3d(0, 50px, 0);
  transition: 1s;
  opacity: 0;
}

.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.pagetopArea a {
  position: fixed;
  height: 100%;
  right: 0;
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  z-index: 50;
  right: -60px;
  opacity: 0.7;
  overflow: hidden;
  width: 5%;
}
.pagetopArea a img {
  background-color: rgba(29, 77, 255, 0.3215686275);
}

.pagetopArea a:hover {
  width: auto;
  overflow: visible;
  transition: all 10s ease 5s;
}

.sidebtn {
  position: fixed;
  right: 30px;
  top: 85%;
  z-index: 10;
  width: 130px;
  height: 130px;
  margin-top: -35px;
  background-color: #bf984d;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  border-radius: 50%;
  border: double 4px #ffffff;
  text-align: center;
  overflow: hidden;
  transition: 0.6s;
  align-items: center;
  justify-content: center;
}
.sidebtn .sidebtn_p {
  width: 100%;
  height: 0px;
  margin: 0px 0 25px 0px;
  line-height: 1;
}
.sidebtn .sidebtn_p p {
  font-size: clamp(12px, 1vw, 15px);
}

.side_btn:hover .access {
  right: 0;
}

.sidebtnn {
  width: 33%;
  height: 30%;
  margin-bottom: 10px;
}
.sidebtnn img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.sidebtn p:nth-child(1) img {
  width: 100%;
  height: auto;
}

.sidebtn:hover {
  transform: rotateY(360deg);
}

#mainArea {
  transition: 1s;
  flex-direction: column;
  width: 100%;
}

#mainArea.show {
  display: flex;
  -webkit-animation: show 1s linear 0s;
  animation: show 1s linear 0s;
}

#main {
  width: 100%;
  height: 100%;
}

.themeArea {
  width: 60%;
  height: 70vh;
  margin-left: 15%;
  margin-right: 25%;
  position: relative;
}
.themeArea .makering {
  height: 100%;
}
.themeArea .makering img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#animation {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  transition: all 300ms 0s ease;
  background-color: white;
  z-index: 1;
}
#animation #logo {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  height: 200px;
  width: 10%;
  transition: all 500ms 0s ease;
}
#animation .finished {
  fill: #231815;
}

.heroArea.showanime {
  display: block;
  -webkit-animation: showanime 0.5s linear 0s;
  animation: showanime 0.5s linear 0s;
  -webkit-mask-size: auto 300%;
  mask-size: auto 300%;
}
.heroArea.showanime .themeArea .logoArea {
  opacity: 1;
}

.heroArea {
  height: 100vh;
  width: 100%;
}
.heroArea .themeArea {
  display: flex;
  justify-content: space-between;
  text-align: center;
  z-index: 2;
  text-align: left;
  position: relative;
  width: 100%;
  height: 240vh;
  flex-direction: column;
  padding-top: 40vh;
}
.heroArea .themeArea .logoArea {
  opacity: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.heroArea .themeArea .logoArea img {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 8%;
}
.heroArea .themeArea .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 100vh;
  margin-left: 10%;
  width: 85%;
  margin-right: 5%;
}
.heroArea .themeArea .wrapper div {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.heroArea .themeArea .wrapper div h1 {
  font-weight: bold;
  font-size: clamp(24px, 3vw, 45px);
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(0, 0, 0);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "Shippori Mincho", serif;
}
.heroArea .themeArea .wrapper div h2 {
  font-family: "Shippori Mincho", serif;
  letter-spacing: 5px;
  margin-top: 10px;
  font-size: clamp(30px, 3vw, 30px);
}
.heroArea .themeArea .wrapper div .makemain {
  margin-top: 50px;
  font-size: clamp(18px, 1vw, 24px);
  letter-spacing: 2px;
  line-height: 2;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.heroArea .themeArea .wrapper .ring1 {
  width: 40%;
  height: 100%;
}
.heroArea .themeArea .wrapper .ring1 img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.explanation {
  position: absolute;
  font-size: clamp(14px, 1vw, 30px);
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  color: white;
  font-family: "delaney", "serif";
  top: 50px;
  left: 20px;
  line-height: 0.5;
  font-weight: 500;
}

.explanation.black {
  color: rgb(0, 0, 0) !important;
}

.explanation::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 150px;
  background-color: #ffffff;
  left: 0;
}

.explanation.black::before {
  background-color: #494444 !important;
}

#weddingringTitleArea {
  width: 100%;
  background-image: url(../image/washi.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 8vh;
}
#weddingringTitleArea .ring {
  height: 100%;
}
#weddingringTitleArea .ring img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#weddingringTitleArea .titleArea {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  flex-direction: column;
}
#weddingringTitleArea .titleArea .titleContent {
  display: flex;
  justify-content: space-between;
  z-index: 2;
  text-align: left;
  position: relative;
  width: 100%;
  height: 240vh;
  flex-direction: column;
}
#weddingringTitleArea .titleArea .titleContent .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 92vh;
  margin-left: 10%;
  width: 80%;
  margin-right: 5%;
}
#weddingringTitleArea .titleArea .titleContent .wrapper .orderText {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}
#weddingringTitleArea .titleArea .titleContent .wrapper .orderText h1 {
  font-size: clamp(30px, 3vw, 45px);
  letter-spacing: 6px;
  font-family: "Shippori Mincho", serif;
  font-weight: bold;
  padding-bottom: 10px;
  padding-left: 65px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
#weddingringTitleArea .titleArea .titleContent .wrapper .orderText .orderText_p {
  font-size: clamp(12px, 1vw, 24px);
  letter-spacing: 2px;
  line-height: 2;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
  font-family: "Shippori Mincho", serif;
}
#weddingringTitleArea .titleArea .titleContent .wrapper .ring1 {
  width: 50%;
  height: 70%;
}
#weddingringTitleArea .titleArea .titleContent .wrapper .ring1 img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#makeringTitle {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url("../image/washi.jpg");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
#makeringTitle .titleArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#makeringTitle .titleArea .titleContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
#makeringTitle .titleArea .titleContent img {
  position: relative;
  transition: all 300ms 0s ease;
  position: absolute;
}
#makeringTitle .titleArea .titleContent h1,
#makeringTitle .titleArea .titleContent h2 {
  font-size: clamp(24px, 2vw, 45px);
  letter-spacing: 2px;
  font-weight: 500;
  margin-bottom: 45px;
  bottom: 80%;
  font-family: "Shippori Mincho", serif;
}
#makeringTitle .titleArea .titleContent p {
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: 5px;
  margin: 30px;
  text-align: center;
}

#flow1 {
  background-color: white;
  background-image: url(../image/washi.jpg);
  position: relative;
}
#flow1 .flowTitileArea {
  display: flex;
  align-items: center;
  margin-left: 20%;
  margin-right: 22%;
  margin-bottom: 7%;
}
#flow1 .flowTitileArea::after {
  border-top: 1px solid;
  content: "";
  flex-grow: 1;
  display: block;
  height: 1px;
}
#flow1 .flowTitileArea::after {
  margin-left: 1rem;
}
#flow1 .flowTitileArea .case1Text {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 40px);
  letter-spacing: 6px;
  text-align: center;
}
#flow1 .box {
  display: flex;
  flex-direction: row-reverse;
  width: 80%;
  margin: auto;
  padding-bottom: 200px;
  position: relative;
  align-items: center;
}
#flow1 .box h2 {
  margin-bottom: 0;
  font-style: normal;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 25px);
}
#flow1 .text {
  padding: 50px;
  width: 100%;
}
#flow1 .text h3 {
  font-size: clamp(14px, 2vw, 25px);
  font-family: "Shippori Mincho", serif;
}
#flow1 .text h4 {
  font-size: 1.2vw;
  font-family: "Shippori Mincho", serif;
}
#flow1 .text p {
  font-size: clamp(12px, 1vw, 16px);
}
#flow1 .text .textBox {
  margin-top: 25px;
}
#flow1 .pict {
  width: 50%;
  height: 100%;
  position: relative;
  z-index: 1;
}
#flow1 .pict .flowimg {
  height: 100%;
}
#flow1 .pict .flowimg img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#flow1 .pict::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: 2px solid #bf984d;
  bottom: -45px;
  right: -25px;
  z-index: -1;
}

#flow2 {
  background-color: white;
  background-image: url(../image/washi.jpg);
  position: relative;
  /*チェックボックスを非表示にする*/
  /*三角矢印アイコン*/
  /*コンテンツ初めは非表示*/
  /*クリックするとコンテンツ表示*/
  /* アコーディオン表示の際に三角回転 */
}
#flow2 .flowTitileArea {
  display: flex;
  align-items: center;
  margin-left: 20%;
  margin-right: 22%;
  margin-bottom: 7%;
}
#flow2 .flowTitileArea::after {
  border-top: 1px solid;
  content: "";
  flex-grow: 1;
  display: block;
  height: 1px;
}
#flow2 .flowTitileArea::after {
  margin-left: 1rem;
}
#flow2 .flowTitileArea .case1Text {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(25px, 2.2vw, 40px);
  letter-spacing: 6px;
  text-align: center;
}
#flow2 .box {
  width: 25%;
  position: absolute;
  left: 65%;
}
#flow2 .box h2 {
  margin-bottom: 0;
  font-style: normal;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 40px);
}
#flow2 .text {
  padding: 50px;
  width: 100%;
}
#flow2 .text h3 {
  font-size: clamp(14px, 2vw, 25px);
  font-family: "Shippori Mincho", serif;
}
#flow2 .text h4 {
  font-size: 1.2vw;
  font-family: "Shippori Mincho", serif;
}
#flow2 .text p {
  font-size: clamp(12px, 1vw, 16px);
}
#flow2 .text .textBox {
  margin-top: 25px;
}
#flow2 .pict {
  height: 100%;
  position: relative;
  z-index: 1;
}
#flow2 .pict .flowimg {
  height: 100%;
}
#flow2 .pict .flowimg img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#flow2 .pict::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: 2px solid #bf984d;
  bottom: -45px;
  right: -25px;
  z-index: -1;
}
#flow2 .box-wrap {
  width: 50%;
  position: relative;
  top: 0%;
  left: 10%;
}
#flow2 .box-wrap h2 {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 40px);
}
#flow2 input {
  display: none;
}
#flow2 label {
  padding: 1em;
  display: block;
  font-weight: bold;
  position: relative;
  cursor: pointer;
  font-size: clamp(14px, 1vw, 15px);
}
#flow2 .icon {
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 24px;
  margin-left: 6px;
  flex-shrink: 0;
  transform-origin: center 43%;
  transition: transform 0.5s;
}
#flow2 .icon::before,
#flow2 .icon::after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 3px;
  background-color: #959595;
}
#flow2 .icon::before {
  left: 0;
  transform: rotate(45deg);
}
#flow2 .icon::after {
  right: 0;
  transform: rotate(-45deg);
}
#flow2 .wrap {
  border: 1px solid #bf984d;
  margin-bottom: 10px;
  margin-top: 10px;
}
#flow2 .content {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  overflow: hidden;
}
#flow2 p {
  margin: 0;
  padding: 1em;
  font-size: clamp(14px, 1vw, 15px);
}
#flow2 input:checked ~ .content {
  max-height: 100%;
  opacity: 1;
  visibility: visible;
}
#flow2 input:checked ~ label .icon {
  transform: rotate(180deg);
}

#flow3 {
  background-color: white;
  background-image: url(../image/washi.jpg);
  position: relative;
}
#flow3 .flowTitileArea {
  display: flex;
  align-items: center;
  margin-left: 20%;
  margin-right: 22%;
  margin-bottom: 7%;
}
#flow3 .flowTitileArea::after {
  border-top: 1px solid;
  content: "";
  flex-grow: 1;
  display: block;
  height: 1px;
}
#flow3 .flowTitileArea::after {
  margin-left: 1rem;
}
#flow3 .flowTitileArea .case1Text {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(25px, 2.2vw, 40px);
  letter-spacing: 6px;
  text-align: center;
}
#flow3 .box {
  display: flex;
  flex-direction: row-reverse;
  width: 80%;
  margin: auto;
  padding-bottom: 200px;
  position: relative;
  align-items: center;
  padding-top: 180px;
}
#flow3 .box h2 {
  margin-bottom: 0;
  font-style: normal;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.5vw;
}
#flow3 .text {
  padding: 50px;
  width: 100%;
}
#flow3 .text h2 {
  font-size: clamp(20px, 2.2vw, 40px);
}
#flow3 .text h3 {
  font-size: clamp(14px, 2vw, 25px);
  font-family: "Shippori Mincho", serif;
}
#flow3 .text h4 {
  font-size: 1.2vw;
  font-family: "Shippori Mincho", serif;
}
#flow3 .text p {
  font-size: clamp(12px, 1vw, 16px);
}
#flow3 .text .textBox {
  margin-top: 25px;
}
#flow3 .pict {
  width: 50%;
  height: 100%;
  position: relative;
  z-index: 1;
}
#flow3 .pict .flowimg {
  height: 100%;
}
#flow3 .pict .flowimg img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#flow3 .pict::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: 2px solid #bf984d;
  bottom: -45px;
  right: -25px;
  z-index: -1;
}

#folwoption {
  text-align: center;
  align-items: center;
  background-image: url(../image/washi.jpg);
  height: auto;
}
#folwoption .option {
  width: 100%;
  display: flex;
  align-items: center;
  height: 5vh;
  justify-content: center;
}
#folwoption .option .option-title {
  margin: 0 10px;
  font-size: clamp(14px, 2vw, 25px);
}
#folwoption .option img {
  height: 100%;
}
#folwoption .option-p {
  max-width: 945px;
  margin: 0 auto;
}
#folwoption .option-p p {
  font-size: clamp(14px, 2vw, 18px);
  margin-top: 53px;
}
#folwoption .plan_option_section {
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0 auto;
}
#folwoption .plan_option_section .sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 60px;
}
#folwoption .plan_option_section .sliderArea .regular {
  display: none;
}
#folwoption .plan_option_section .sliderArea .imgArea {
  display: flex;
  height: 500px;
  justify-content: center;
}
#folwoption .plan_option_section .sliderArea .imgArea div:nth-child(1) {
  margin-right: 2.5%;
}
#folwoption .plan_option_section .sliderArea .imgArea img {
  height: 500px;
}
#folwoption .plan_option_section .sliderArea.w300 {
  max-width: 300px;
}
#folwoption .plan_option_section .sliderArea .slick-track {
  height: 300px;
}
#folwoption .plan_option_section .slick-slide {
  margin: 0 5px;
}
#folwoption .plan_option_section .slick-slide img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#folwoption .plan_option_section .slick-prev,
#folwoption .plan_option_section .slick-next {
  z-index: 1;
}
#folwoption .plan_option_section .slick-prev:before,
#folwoption .plan_option_section .slick-next:before {
  color: #4f4f4f;
  font-size: 30px;
}
#folwoption .plan_option_section .slick-slide {
  transition: all ease-in-out 0.3s;
  opacity: 0.2;
}
#folwoption .plan_option_section .slick-active {
  opacity: 1;
}
#folwoption .plan_option_section .slick-current {
  opacity: 1;
}
#folwoption .plan_option_section .thumb {
  margin: 20px 0 0;
}
#folwoption .plan_option_section .thumb .slick-slide {
  cursor: pointer;
}
#folwoption .plan_option_section .thumb .slick-slide:hover {
  opacity: 0.7;
}
#folwoption .option-uu {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 60%;
  justify-content: space-evenly;
  max-width: 70%;
  margin: 0 auto;
}
#folwoption .option-ul {
  display: flex;
  margin-top: 70px;
  flex-direction: column;
  width: 15%;
  height: 25%;
}

#flow4 {
  background-color: white;
  background-image: url(../image/washi.jpg);
  position: relative;
}
#flow4 .flowTitileArea {
  font-size: clamp(30px, 2vw, 40px);
  margin-bottom: 73px;
}
#flow4 .flowTitileArea .case1Text {
  font-size: clamp(30px, 2vw, 40px);
  letter-spacing: 6px;
  font-weight: bold;
  text-align: center;
}
#flow4 .box {
  display: flex;
  flex-direction: row-reverse;
  width: 80%;
  margin: auto;
  padding-bottom: 200px;
  position: relative;
  align-items: center;
}
#flow4 .box h2 {
  margin-bottom: 0;
  font-style: normal;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.5vw;
}
#flow4 .box .ring1 img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 80%;
}
#flow4 .text {
  padding: 50px;
  width: 100%;
}
#flow4 .text h2 {
  font-size: clamp(20px, 2.2vw, 40px);
}
#flow4 .text h3 {
  font-size: clamp(14px, 2vw, 25px);
  font-family: "Shippori Mincho", serif;
}
#flow4 .text h4 {
  font-size: 1.2vw;
  font-family: "Shippori Mincho", serif;
}
#flow4 .text p {
  font-size: clamp(12px, 1vw, 16px);
}
#flow4 .text .textBox {
  margin-top: 25px;
}
#flow4 .text .container {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#flow4 .pict {
  width: 50%;
  height: 100%;
  position: relative;
  z-index: 1;
}
#flow4 .pict .flowimg {
  height: 100%;
}
#flow4 .pict .flowimg img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#flow4 .pict::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: 2px solid #bf984d;
  bottom: -45px;
  right: -25px;
  z-index: -1;
}

#flow5 {
  background-color: white;
  background-image: url(../image/washi.jpg);
  position: relative;
}
#flow5 .flowTitileArea {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #000;
  margin: 0 auto;
  width: 75%;
}
#flow5 .flowTitileArea::before, #flow5 .flowTitileArea::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #000;
}
#flow5 .flowTitileArea::before {
  margin-right: 1rem;
}
#flow5 .flowTitileArea::after {
  margin-left: 1rem;
}
#flow5 .flowTitileArea .case1Text {
  font-size: clamp(20px, 2.2vw, 40px);
  letter-spacing: 6px;
  font-weight: bold;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
}
#flow5 .flowTitilep {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  width: 100%;
  padding: 62px;
}
#flow5 .flowTitilep figure.ring14 {
  width: 50%;
}
#flow5 .flowTitilep figure.ring14 img {
  width: 100%;
}
#flow5 .flowTitilep p {
  text-align: center;
  margin-bottom: 50px;
  font-size: clamp(14px, 1vw, 20px);
}
#flow5 .box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 80%;
  margin: auto;
  align-content: center;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
  justify-content: space-between;
}
#flow5 .box:last-child {
  padding-bottom: 25px;
  margin-bottom: 0;
}
#flow5 .box .overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: grey;
  opacity: 0.6;
  display: none;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
}
#flow5 .box .modal {
  width: 50%;
  height: 70%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  display: none;
}
#flow5 .box .modal .circle {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  position: absolute;
}
#flow5 .box .modal .box2 {
  font-weight: bold;
  margin: auto;
  box-sizing: border-box;
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  position: relative;
  background-image: url(../image/pop.png);
  background-repeat: round;
}
#flow5 .box .modal .box2 h2 {
  margin-bottom: 50px;
  font-family: "Shippori Mincho", serif;
}
#flow5 .box .container-fluid {
  text-align: center;
  z-index: 10;
  font-size: 14px;
  width: 100%;
}
#flow5 .box .modal-close__wrap {
  position: absolute;
  right: 40px;
  top: 20px;
}
#flow5 .box .modal-close {
  background: transparent;
  border-color: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 28px;
  display: block;
  height: 28px;
}
#flow5 .box .modal-close span {
  position: relative;
  width: 100%;
  height: 1px;
  background: black;
  display: block;
}
#flow5 .box .modal-close span:nth-child(1) {
  transform: rotate(45deg);
}
#flow5 .box .modal-close span:nth-child(2) {
  transform: rotate(-45deg);
}
#flow5 .box .dialog {
  margin-top: 25px;
  width: 100%;
}
#flow5 .box .dialog h3 {
  font-size: 1.5em;
  font-weight: bold;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1.4em;
  margin-bottom: 2em;
  position: relative;
  line-height: 1.4;
  color: #164a84;
}
#flow5 .box .dialog h3:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900;
  font-size: 1em;
  left: 0;
  top: 0.5em;
  color: #164a84;
}
#flow5 .box .modal-open {
  cursor: pointer;
}
#flow5 .box .ring1 img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 80%;
}
#flow5 .box .overlay.open {
  display: block;
}
#flow5 .box .modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
}
#flow5 .text {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-end;
  width: 60%;
}
#flow5 .text h3 {
  font-size: clamp(14px, 2.3vw, 40px);
  font-family: "Shippori Mincho", serif;
}
#flow5 .text h4 {
  font-size: 1.2vw;
  font-family: "Shippori Mincho", serif;
}
#flow5 .text p {
  font-size: clamp(12px, 1vw, 16px);
}
#flow5 .text .textBox {
  margin-top: 25px;
}
#flow5 .text .container {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#flow5 .pict {
  width: 35%;
  height: 100%;
  position: relative;
  z-index: 1;
}
#flow5 .pict .flowimg {
  height: 100%;
}
#flow5 .pict .flowimg img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#flow5 .box:nth-child(even) {
  flex-direction: row-reverse;
}
#flow5 .box:nth-child(even) .text {
  text-align: left;
  align-items: flex-start;
}
#flow5 .box:nth-child(even) .pict {
  margin-left: 0;
}

#flow6 {
  background-color: white;
  background-image: url(../image/washi.jpg);
  position: relative;
}
#flow6 .flowTitileArea {
  font-size: clamp(30px, 2vw, 40px);
  margin-bottom: 73px;
}
#flow6 .flowTitileArea .case1Text {
  font-size: clamp(30px, 2vw, 40px);
  letter-spacing: 6px;
  font-weight: bold;
  text-align: center;
}
#flow6 .box {
  display: flex;
  justify-content: center;
  width: 80%;
  margin: auto;
  padding-bottom: 200px;
  align-items: flex-start;
  position: relative;
  flex-direction: row-reverse;
}
#flow6 .box h2 {
  margin-bottom: 0;
  font-style: normal;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.5vw;
}
#flow6 .box .ring1 img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 80%;
}
#flow6 .text {
  padding: 50px;
  width: 100%;
  flex-direction: column;
  margin: auto;
  height: 100%;
  align-items: flex-end;
}
#flow6 .text h2 {
  font-size: clamp(20px, 2.2vw, 40px);
}
#flow6 .text h3 {
  font-size: clamp(14px, 2vw, 25px);
  font-family: "Shippori Mincho", serif;
}
#flow6 .text h4 {
  font-size: 1.2vw;
  font-family: "Shippori Mincho", serif;
}
#flow6 .text p {
  font-size: clamp(12px, 1vw, 16px);
}
#flow6 .text .textBox {
  margin-top: 25px;
}
#flow6 .text .container {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#flow6 .pict {
  width: 50%;
  height: 100%;
  position: relative;
  z-index: 1;
}
#flow6 .pict .flowimg {
  height: 100%;
}
#flow6 .pict .flowimg img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#flow6 .pict::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: 2px solid #bf984d;
  bottom: -45px;
  right: -25px;
  z-index: -1;
}

#eng {
  background-color: white;
  background-image: url(../image/washi.jpg);
  position: relative;
}
#eng .flowTitileArea {
  display: flex;
  align-items: center;
  margin-left: 20%;
  margin-right: 22%;
  margin-bottom: 7%;
}
#eng .flowTitileArea::after {
  border-top: 1px solid;
  content: "";
  flex-grow: 1;
  display: block;
  height: 1px;
}
#eng .flowTitileArea::after {
  margin-left: 1rem;
}
#eng .flowTitileArea .case1Text {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 40px);
  letter-spacing: 6px;
  text-align: center;
}
#eng .engTitileArea {
  display: flex;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  top: 50px;
  left: 20px;
  margin-left: 7%;
  position: -webkit-sticky;
  position: sticky;
  padding-top: 100px;
  flex-direction: column-reverse;
}
#eng .engTitileArea h1 {
  letter-spacing: 2px;
  font-weight: 500;
  margin-bottom: 45px;
  bottom: 80%;
  font-family: "Shippori Mincho", serif;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: clamp(25px, 2vw, 40px);
  font-family: "Shippori Mincho", serif;
}
#eng .inner {
  width: 100%;
  max-width: 1400px;
  margin: auto;
  padding: 0 40px;
}
#eng .eng-container .container {
  position: -webkit-sticky;
  position: sticky;
  top: 40%;
  margin-left: 5%;
  display: flex;
}
#eng .eng-container .eng-sidebar {
  font-size: clamp(20px, 2.2vw, 50px);
}
#eng .eng-container .eng-sidebar p {
  font-size: clamp(20px, 2.2vw, 50px);
  line-height: 1;
}

#engravingspring,
#engravingsummer,
#engravingautumn,
#engravingwinter {
  width: 90%;
  left: 10%;
  position: relative;
  display: grid;
  grid-template-columns: 20% 1fr 35%;
  grid-template-rows: 10vh 40vh 40vh 10vh;
}
#engravingspring .engravingText,
#engravingsummer .engravingText,
#engravingautumn .engravingText,
#engravingwinter .engravingText {
  grid-column: 2;
  width: 100%;
  height: 100%;
  grid-row: 2/4;
  margin: auto;
  font-size: clamp(18px, 2vw, 40px);
  letter-spacing: 6px;
  font-weight: bold;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}
#engravingspring .engravingText2,
#engravingsummer .engravingText2,
#engravingautumn .engravingText2,
#engravingwinter .engravingText2 {
  grid-column: 3;
  width: 100%;
  height: 100%;
  grid-row: 2;
  margin: auto;
  font-size: clamp(30px, 2vw, 40px);
  letter-spacing: 6px;
  font-weight: bold;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
}
#engravingspring h3,
#engravingsummer h3,
#engravingautumn h3,
#engravingwinter h3 {
  position: absolute;
  bottom: 5px;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: 5px;
  font-family: "Shippori Mincho", serif;
}
#engravingspring .engravingArea,
#engravingsummer .engravingArea,
#engravingautumn .engravingArea,
#engravingwinter .engravingArea {
  grid-column: 2;
  grid-row: 2/4;
  width: 100%;
  height: 100%;
  position: relative;
}
#engravingspring .engravingArea .engraving,
#engravingsummer .engravingArea .engraving,
#engravingautumn .engravingArea .engraving,
#engravingwinter .engravingArea .engraving {
  width: 100%;
  height: 100%;
  /* アクティブな画像の枠線を変更 */
}
#engravingspring .engravingArea .engraving .sub-img li.current img,
#engravingsummer .engravingArea .engraving .sub-img li.current img,
#engravingautumn .engravingArea .engraving .sub-img li.current img,
#engravingwinter .engravingArea .engraving .sub-img li.current img {
  border: 2px solid #bf984d;
  transition: border 0.5s;
}
#engravingspring .engravingArea .engraving .main-img,
#engravingsummer .engravingArea .engraving .main-img,
#engravingautumn .engravingArea .engraving .main-img,
#engravingwinter .engravingArea .engraving .main-img {
  height: 70%;
  width: 100%;
}
#engravingspring .engravingArea .engraving .main-img img,
#engravingsummer .engravingArea .engraving .main-img img,
#engravingautumn .engravingArea .engraving .main-img img,
#engravingwinter .engravingArea .engraving .main-img img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#engravingspring .engravingArea .engraving .sub-img,
#engravingsummer .engravingArea .engraving .sub-img,
#engravingautumn .engravingArea .engraving .sub-img,
#engravingwinter .engravingArea .engraving .sub-img {
  display: flex;
  margin-top: 60px;
  height: 30%;
  justify-content: center;
}
#engravingspring .engravingArea .engraving .sub-img li,
#engravingsummer .engravingArea .engraving .sub-img li,
#engravingautumn .engravingArea .engraving .sub-img li,
#engravingwinter .engravingArea .engraving .sub-img li {
  margin-right: 2%;
  width: 40%;
}
#engravingspring .engravingArea .engraving .sub-img li:nth-child(3n),
#engravingsummer .engravingArea .engraving .sub-img li:nth-child(3n),
#engravingautumn .engravingArea .engraving .sub-img li:nth-child(3n),
#engravingwinter .engravingArea .engraving .sub-img li:nth-child(3n) {
  margin-right: 0;
}
#engravingspring .engravingArea .engraving .sub-img li img,
#engravingsummer .engravingArea .engraving .sub-img li img,
#engravingautumn .engravingArea .engraving .sub-img li img,
#engravingwinter .engravingArea .engraving .sub-img li img {
  border: 2px solid transparent;
  transition: border 0.5s;
  border: 2px solid #dfdfdf;
}
#engravingspring .engravingArea .engraving .sub-img img,
#engravingsummer .engravingArea .engraving .sub-img img,
#engravingautumn .engravingArea .engraving .sub-img img,
#engravingwinter .engravingArea .engraving .sub-img img {
  cursor: pointer;
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#engravingspring .seasonimg,
#engravingsummer .seasonimg,
#engravingautumn .seasonimg,
#engravingwinter .seasonimg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 70vh;
}
#engravingspring .seasonimg img,
#engravingsummer .seasonimg img,
#engravingautumn .seasonimg img,
#engravingwinter .seasonimg img {
  opacity: 0.7;
  -o-object-fit: cover;
  object-fit: cover;
  width: auto;
  height: 100%;
}
#engravingspring .seasonimg svg,
#engravingsummer .seasonimg svg,
#engravingautumn .seasonimg svg,
#engravingwinter .seasonimg svg {
  opacity: 0.7;
  -o-object-fit: cover;
  object-fit: cover;
  width: auto;
  height: 100%;
}

.spring {
  color: rgb(248, 164, 164);
}

.summer {
  color: #79ce0c;
}

.autumn {
  color: #793203;
}

.winter {
  color: #3e83d1;
}

/* レイアウトのためのスタイル */
.container {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-img {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.main-img img {
  height: auto;
  width: 100%;
}

.sub-img {
  display: flex;
  margin-top: 10px;
}

.sub-img li {
  margin-right: 2%;
  width: 32%;
}

.sub-img li:nth-child(3n) {
  margin-right: 0;
}

.sub-img li img {
  border: 2px solid transparent;
  transition: border 0.5s;
}

.sub-img img {
  cursor: pointer;
  width: 100%;
}

#price {
  width: 100%;
  height: 143vh;
  position: relative;
  background-image: url(../image/washi.jpg);
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#price .priceText {
  font-size: clamp(30px, 2vw, 40px);
  letter-spacing: 6px;
  font-weight: bold;
  margin: 3%;
}
#price h3 {
  position: absolute;
  bottom: 5px;
  font-size: clamp(12px, 2vw, 20px);
  letter-spacing: 2px;
  font-family: "Shippori Mincho", serif;
}
#price img {
  position: absolute;
  bottom: 0;
  width: 50%;
}
#price .priceArea {
  width: 50%;
  height: 100%;
}
#price .priceArea .price {
  position: relative;
  height: 80px;
  display: flex;
  justify-content: center;
  background-image: url(../image/iconmakering.svg);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}
#price .priceArea .pricetd {
  width: 100%;
}
#price .priceArea tbody,
#price .priceArea td,
#price .priceArea tfoot,
#price .priceArea th,
#price .priceArea thead,
#price .priceArea tr {
  border-color: inherit;
  border-style: solid;
  border-bottom: 1px solid;
  padding: 10px;
  bottom: 5px;
  font-size: clamp(12px, 2vw, 18px);
  letter-spacing: 2px;
}
#price .accessArea {
  width: 50%;
  height: 100%;
}
#price .accessArea .access {
  position: relative;
  height: 80px;
  display: flex;
  justify-content: center;
  background-image: url(../image/iconmakering.svg);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}
#price .accessArea .example2 {
  width: 100%;
}
#price .accessArea tbody,
#price .accessArea td,
#price .accessArea th,
#price .accessArea thead,
#price .accessArea tr {
  border-color: inherit;
  border-style: solid;
  border-bottom: 1px solid;
  bottom: 5px;
  font-size: clamp(12px, 2vw, 18px);
  padding: 10px;
  letter-spacing: 2px;
}
#price .accessArea tfoot {
  bottom: 10%;
  font-size: clamp(18px, 2vw, 22px);
}
#price .accessArea .accessfoot {
  bottom: 15%;
  font-size: clamp(12px, 2vw, 15px);
  letter-spacing: 2px;
  position: relative;
  height: 100px;
}

.example p {
  position: absolute;
  color: white;
  top: 0;
  left: 0;
}

#payment {
  width: 100%;
  height: 75vh;
  position: relative;
  background-image: url("../image/washi.jpg");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
#payment .paymentArea {
  width: 50%;
  display: flex;
  flex-direction: column;
  height: 90%;
  align-items: stretch;
}
#payment .paymentArea .paymentContent {
  background-color: #f5f5f5;
  margin: 50px 30px 0 30px;
  font-size: clamp(14px, 1vw, 17px);
}
#payment .paymentArea .paymentContent p.payment-p {
  border-bottom: 1px solid #e4e5ea;
  padding: 15px;
  text-align: center;
  font-size: clamp(14px, 2vw, 20px);
}
#payment .paymentArea .paymentContent ul.payment {
  padding: 100px;
}
#payment .paymentArea .paymentContent li {
  border-bottom: 1px solid #e4e5ea;
  padding: 15px 0;
}
#payment .paymentArea .paymentContent li p {
  font-size: clamp(14px, 2vw, 17px);
}
#payment .paymentArea .paymentContent img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1280px) {
  /* 1280px以下に適用されるCSS（ノートPC用） */
  #makeringTitle .titleArea .titleContent img {
    position: relative;
    transition: all 300ms 0sease;
    position: absolute;
    bottom: 85%;
    width: 70%;
  }
  #flow2 {
    height: auto;
  }
  #flow4 .box {
    padding-top: 150px;
  }
  #case1 .dialog {
    position: absolute;
    width: 30%;
    background: grey;
    top: 28%;
  }
  #folwoption {
    height: 100vh !important;
  }
  #folwoption .plan_option_section .sliderArea .imgArea img {
    height: 380px;
  }
}
@media screen and (max-width: 959px) {
  /* 959px以下に適用されるCSS（タブレット用） */
  #weddingringTitleArea {
    height: auto;
  }
  #weddingringTitleArea .titleArea {
    height: 65vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #weddingringTitleArea .titleArea .titleContent {
    display: flex;
    justify-content: center;
    z-index: 2;
    text-align: left;
    position: relative;
    width: 100%;
    height: auto !important;
    flex-direction: column;
  }
  #weddingringTitleArea .titleArea .titleContent .wrapper {
    display: flex;
    height: auto !important;
    margin-left: 0px !important;
    width: 100%;
    margin-right: 0px !important;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;
  }
  #weddingringTitleArea .titleArea .titleContent .wrapper .ring1 {
    width: 100% !important;
    height: 100% !important;
  }
  #weddingringTitleArea .titleArea .titleContent .wrapper .orderText {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #weddingringTitleArea .titleArea .titleContent .wrapper .orderText h1 {
    font-size: clamp(30px, 3vw, 45px);
    letter-spacing: 6px;
    font-family: "Shippori Mincho", serif;
    font-weight: bold;
    padding-bottom: 10px;
    padding-left: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-writing-mode: inherit !important;
    -ms-writing-mode: inherit !important;
    writing-mode: inherit !important;
  }
  #weddingringTitleArea .titleArea .titleContent .wrapper .orderText p {
    font-size: clamp(12px, 1vw, 24px);
    letter-spacing: 2px;
    line-height: 2;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-writing-mode: inherit !important;
    -ms-writing-mode: inherit !important;
    writing-mode: inherit !important;
    -webkit-text-orientation: inherit !important;
    text-orientation: upright;
    font-family: "Shippori Mincho", serif;
  }
  #flow1 {
    height: auto;
  }
  #flow2 {
    height: auto;
  }
  #folwoption {
    height: 50vh !important;
  }
  #folwoption .option {
    width: 100%;
    display: flex;
    align-items: center;
    height: 3vh;
    justify-content: center;
  }
  #folwoption .plan_option_section .sliderArea .regular {
    display: inherit;
  }
  #folwoption .plan_option_section .sliderArea .imgArea {
    display: none;
  }
  #eng {
    height: 330vh;
  }
  #eng .engravingArea .engraving {
    /* アクティブな画像の枠線を変更 */
  }
  #eng .engravingArea .engraving .main-img {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 90%;
  }
  #eng .engravingArea .engraving .main-img img {
    max-width: 70%;
  }
  #eng .engravingArea .engraving .sub-img {
    height: 50%;
  }
  #engravingspring,
  #engravingsummer,
  #engravingautumn,
  #engravingwinter {
    width: 90%;
    left: 10%;
    position: relative;
    display: grid;
    grid-template-columns: 0% 2fr 15%;
    grid-template-rows: 0vh 25vh 10vh 45vh;
  }
  #engravingspring .seasonimg,
  #engravingsummer .seasonimg,
  #engravingautumn .seasonimg,
  #engravingwinter .seasonimg {
    position: absolute;
    right: 0;
    bottom: 47%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 30vh;
  }
  #payment .paymentArea {
    width: 100%;
  }
  #payment .paymentArea p.paymentp {
    top: 43%;
  }
}
@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  .sidebtn {
    position: fixed;
    right: 0px !important;
    top: inherit !important;
    z-index: 9 !important;
    width: inherit !important;
    height: 50px !important;
    margin-top: inherit !important;
    background-color: #bf984d !important;
    display: flex !important;
    color: #ffffff !important;
    border-radius: inherit !important;
    border: double 4px #ffffff !important;
    text-align: center !important;
    overflow: inherit !important;
    transition: inherit !important;
    width: 100% !important;
    bottom: 0px !important;
    flex-direction: inherit !important;
    align-items: center;
    justify-content: center;
  }
  .sidebtn .sidebtnn {
    width: 12% !important;
    height: 100% !important;
    margin-top: inherit !important;
    margin-bottom: inherit !important;
    padding: 2px;
  }
  .sidebtn .sidebtn_p {
    width: 50% !important;
    height: 0px !important;
    line-height: inherit !important;
    padding: 2px !important;
  }
  .sidebtn .sidebtn_p p {
    font-size: clamp(15px, 1vw, 15px) !important;
  }
  #weddingringTitleArea {
    height: auto;
  }
  #weddingringTitleArea .titleArea {
    height: 65vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #weddingringTitleArea .titleArea .titleContent {
    display: flex;
    justify-content: center;
    z-index: 2;
    text-align: left;
    position: relative;
    width: 100%;
    height: auto !important;
    flex-direction: column;
  }
  #weddingringTitleArea .titleArea .titleContent .wrapper {
    display: flex;
    height: auto !important;
    margin-left: 0px !important;
    width: 100%;
    margin-right: 0px !important;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;
  }
  #weddingringTitleArea .titleArea .titleContent .wrapper .ring1 {
    width: 100% !important;
    height: 100% !important;
  }
  #weddingringTitleArea .titleArea .titleContent .wrapper .orderText {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #weddingringTitleArea .titleArea .titleContent .wrapper .orderText h1 {
    font-size: clamp(30px, 3vw, 45px);
    letter-spacing: 6px;
    font-family: "Shippori Mincho", serif;
    font-weight: bold;
    padding-bottom: 10px;
    padding-left: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-writing-mode: inherit !important;
    -ms-writing-mode: inherit !important;
    writing-mode: inherit !important;
  }
  #weddingringTitleArea .titleArea .titleContent .wrapper .orderText p {
    font-size: clamp(12px, 1vw, 24px);
    letter-spacing: 2px;
    line-height: 2;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-writing-mode: inherit !important;
    -ms-writing-mode: inherit !important;
    writing-mode: inherit !important;
    -webkit-text-orientation: inherit !important;
    text-orientation: upright;
    font-family: "Shippori Mincho", serif;
  }
  #flow1 .flowTitileArea {
    -webkit-writing-mode: inherit !important;
    -ms-writing-mode: inherit !important;
    writing-mode: inherit !important;
    top: inherit !important;
    left: inherit !important;
    margin-left: 10%;
    margin-right: 5%;
    position: relative !important;
    padding-top: inherit !important;
    position: -webkit-sticky !important;
    margin-bottom: 50px !important;
  }
  #flow1 .flowTitileArea h1 {
    text-align: center;
  }
  #flow1 .box {
    height: auto !important;
    display: flex !important;
    width: 80%;
    flex-direction: column-reverse !important;
    justify-content: center !important;
    padding-bottom: 0px !important;
  }
  #flow1 .box .text {
    width: 100% !important;
    padding: 0px !important;
    margin-bottom: 50px !important;
    display: flex !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    margin-top: 60px;
  }
  #flow1 .box .text .text-container {
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  #flow1 .box .pict {
    width: 90% !important;
  }
  #flow1 .box h4 {
    font-size: 4vw !important;
  }
  #flow1 .box p {
    font-size: 14px !important;
  }
  #flow1 .modal.open {
    width: 90% !important;
  }
  #folwoption {
    height: 80vh !important;
  }
  #folwoption .option {
    width: 100%;
    display: flex;
    align-items: center;
    height: 3vh;
    justify-content: center;
  }
  #folwoption .plan_option_section .sliderArea .regular {
    display: inherit;
  }
  #folwoption .plan_option_section .sliderArea .imgArea {
    display: none;
  }
  #flow2 {
    height: inherit !important;
  }
  #flow2 .box {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: auto;
    padding-bottom: 83px;
    position: relative;
    justify-content: center;
    align-items: center;
    left: inherit !important;
  }
  #flow2 .box-wrap {
    width: inherit !important;
    position: inherit !important;
    top: 60%;
    left: inherit !important;
    text-align: inherit !important;
    align-items: inherit !important;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    padding: 30px;
  }
  #flow2 .pict {
    width: 90%;
    height: 100%;
    position: relative;
    z-index: 1;
  }
  #flow3 {
    height: 90vh;
  }
  #flow3 .flowTitileArea {
    font-size: clamp(30px, 2vw, 40px) !important;
    -webkit-writing-mode: inherit !important;
    -ms-writing-mode: inherit !important;
    writing-mode: inherit !important;
    top: inherit !important;
    left: inherit !important;
    margin-left: inherit !important;
    position: relative !important;
    padding-top: inherit !important;
    position: -webkit-sticky !important;
    margin-bottom: 50px !important;
  }
  #flow3 .flowTitileArea h1 {
    text-align: center;
  }
  #flow3 .box {
    height: auto !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    justify-content: center !important;
    width: 80%;
    padding-bottom: 0px !important;
  }
  #flow3 .box .text {
    width: 100% !important;
    padding: 0px !important;
    margin-bottom: 50px !important;
    display: flex !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    margin-top: 60px;
  }
  #flow3 .box .text .text-container {
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  #flow3 .box .text .text-container > h3 {
    font-size: 26px !important;
  }
  #flow3 .box .pict {
    width: 90% !important;
  }
  #flow3 .box h4 {
    font-size: 4vw !important;
  }
  #flow3 .box p {
    font-size: 14px !important;
  }
  #flow3 .modal.open {
    width: 90% !important;
  }
  #flow4 {
    height: auto;
  }
  #flow4 .flowTitileArea {
    font-size: clamp(30px, 2vw, 40px) !important;
    -webkit-writing-mode: inherit !important;
    -ms-writing-mode: inherit !important;
    writing-mode: inherit !important;
    top: inherit !important;
    left: inherit !important;
    margin-left: inherit !important;
    position: relative !important;
    padding-top: inherit !important;
    position: -webkit-sticky !important;
    margin-bottom: inherit !important;
  }
  #flow4 .flowTitileArea h1 {
    text-align: center;
  }
  #flow4 .box {
    height: auto !important;
    display: flex !important;
    margin-bottom: inherit !important;
    flex-direction: column-reverse !important;
    justify-content: center !important;
    width: 80%;
    padding-bottom: 30px !important;
  }
  #flow4 .box .text {
    width: 100% !important;
    padding: inherit !important;
    margin-bottom: inherit !important;
    display: flex !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    margin-top: 60px;
  }
  #flow4 .box .text .text-container {
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  #flow4 .box .text .text-container > h3 {
    font-size: 26px !important;
  }
  #flow4 .box .pict {
    width: 90% !important;
  }
  #flow4 .box h4 {
    font-size: 4vw !important;
  }
  #flow4 .box p {
    font-size: 14px !important;
  }
  #flow4 .modal.open {
    width: 90% !important;
  }
  #flow5 {
    height: auto;
  }
  #flow5 .flowTitileArea {
    font-size: clamp(30px, 2vw, 40px) !important;
    -webkit-writing-mode: inherit !important;
    -ms-writing-mode: inherit !important;
    writing-mode: inherit !important;
    top: inherit !important;
    position: relative !important;
    padding-top: inherit !important;
    position: -webkit-sticky !important;
    margin-bottom: inherit !important;
  }
  #flow5 .flowTitileArea h1 {
    text-align: center;
  }
  #flow5 .box {
    height: auto !important;
    display: flex !important;
    margin-bottom: inherit !important;
    flex-direction: column-reverse !important;
    justify-content: center !important;
    width: 80%;
  }
  #flow5 .box .text {
    width: 100% !important;
    padding: inherit !important;
    margin-bottom: inherit !important;
    display: flex !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    margin-top: 60px;
  }
  #flow5 .box .text h2 {
    font-size: 26px !important;
  }
  #flow5 .box .text .text-container {
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  #flow5 .box .text .text-container > h3 {
    font-size: 26px !important;
  }
  #flow5 .box .pict {
    width: 90% !important;
  }
  #flow5 .box h4 {
    font-size: 4vw !important;
  }
  #flow5 .box p {
    font-size: 14px !important;
  }
  #flow5 .modal.open {
    width: 90% !important;
  }
  #flow6 {
    height: auto;
  }
  #flow6 .flowTitileArea {
    font-size: clamp(30px, 2vw, 40px) !important;
    -webkit-writing-mode: inherit !important;
    -ms-writing-mode: inherit !important;
    writing-mode: inherit !important;
    top: inherit !important;
    left: inherit !important;
    margin-left: inherit !important;
    position: relative !important;
    padding-top: inherit !important;
    position: -webkit-sticky !important;
    margin-bottom: inherit !important;
  }
  #flow6 .flowTitileArea h1 {
    text-align: center;
  }
  #flow6 .box {
    height: auto !important;
    display: flex !important;
    margin-bottom: inherit !important;
    flex-direction: column-reverse !important;
    justify-content: center !important;
    width: 80%;
    padding-bottom: 40px !important;
  }
  #flow6 .box .text {
    width: 100% !important;
    padding: inherit !important;
    margin-bottom: inherit !important;
    display: flex !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    margin-top: 60px;
  }
  #flow6 .box .text .text-container {
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  #flow6 .box .text .text-container > h3 {
    font-size: 26px !important;
  }
  #flow6 .box .pict {
    width: 90% !important;
  }
  #flow6 .box h4 {
    font-size: 4vw !important;
  }
  #flow6 .box p {
    font-size: 14px !important;
  }
  #flow6 .modal.open {
    width: 90% !important;
  }
  #eng {
    height: 330vh;
  }
  #eng .engravingArea .engraving {
    /* アクティブな画像の枠線を変更 */
  }
  #eng .engravingArea .engraving .main-img {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  #eng .engravingArea .engraving .main-img img {
    max-width: 80%;
  }
  #eng .engravingArea .engraving .sub-img {
    height: 50%;
  }
  #engravingspring,
  #engravingsummer,
  #engravingautumn,
  #engravingwinter {
    width: 90%;
    left: 10%;
    position: relative;
    display: grid;
    grid-template-columns: 0% 2fr 15%;
    grid-template-rows: 0vh 25vh 10vh 40vh;
  }
  #engravingspring .seasonimg,
  #engravingsummer .seasonimg,
  #engravingautumn .seasonimg,
  #engravingwinter .seasonimg {
    position: absolute;
    right: 0;
    bottom: 47%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 20vh;
  }
  #price .priceArea,
  #price .accessArea {
    width: 70%;
    height: 100%;
  }
  #price .priceArea .pricefoot,
  #price .accessArea .pricefoot {
    height: 40px;
  }
  #payment .paymentArea {
    width: 90%;
  }
  #payment .paymentArea .paymentContent ul.payment {
    padding: 20px;
  }
}
.spring {
  color: #ff8899;
}

.summer {
  color: #aed944;
}

.autumn {
  color: #cf5b3a;
}

.winter {
  color: #aabbee;
}

/*# sourceMappingURL=weddingring.css.map */