@charset "utf-8";
/*=======================================================================
TOP
=======================================================================*/
#main_image {
  background: url("../img/bg01.jpg") no-repeat;
  background-size: 100% auto;
  padding: 100px 0 0 0;
  position: relative;
}
@media all and (max-width: 660px) {
  #main_image {
    background: url("../img/bg01_sp.jpg") no-repeat;
    background-size: 100%;
  }
}
#main_image_wrap,
#obi ul {
  width: 96%;
  margin: 0 auto;
}
#main_image_wrap img {
  vertical-align: bottom;
}
.top_text01,
.top_text02,
.top_text03 {
  text-align: center;
  margin-bottom: 16px;
}
.top_text01 {
  font-size: clamp(1.875rem, 1.65rem + 1.13vw, 3rem) /*30-48|320-1920*/;
  font-weight: 900;
  color: #db3986;
}
.top_text01 span {
  display: block;
}
.top_text02 {
  font-size: clamp(1.125rem, 1.087rem + 0.19vw, 1.313rem) /*18-21|320-1920*/;
  color: #4b3a45;
}
.top_text02 span {
  color: #1874d9;
}
.top_text03 {
  font-size: 87.5%;
  color: #999;
}
#obi {
  background: url("../img/bg02.jpg") no-repeat top right #f6c7d7;
  background-size: 100% auto;
  width: 100%;
  padding: 48px 2% 24px 2%;
}
.obi_bk {
  background: url("../img/bg03_sp.jpg") no-repeat top left !important;
  background-size: 100% !important;
}
h2.top_lead {
  font-size: clamp(1rem, 0.85rem + 0.75vw, 1.75rem) /*16-28|320-1920*/;
  color: #db3986;
  /*text-shadow: 2px 2px 3px rgba(219, 57, 134, 0.75);*/
  margin-bottom: 8px;
}
#obi ul {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
}
#obi ul li {
  max-width: 20%;
  margin: 8px;
  text-align: center;
  color: #db3986;
}
#obi ul li p {
  font-size: 50%;
}
#obi ul.anchor li {
  width: 48% !important;
  margin: 8px 1% 16px 1% !important;
  max-width: 48% !important;
}
#obi ul.anchor li a {
  line-height: 32px;
}
@media all and (min-width: 961px) {
  #obi ul li p {
    font-size: 100%;
  }
}
#aboutus h2::before {
  content: "About us";
}
#top_member h2::before,
#member h2::before {
  content: "Meet the Host";
}
#top_service h2::before,
#service h2::before {
  content: "Service";
}
#top_news h2::before {
  content: "News";
}
#top_narration h2::before {
  content: "Narration";
}
#ow h2::before {
  content: "Original Wedding";
}
#inquiry h2::before {
  content: "Inquiry";
}
#privacy h2::before {
  content: "Privacy Policy";
}
#aboutus h2::before,
#top_member h2::before,
#top_service h2::before,
#top_narration h2::before,
#ow h2::before {
  color: rgb(224, 173, 193);
}
#top_news h2::before,
#service h2::before,
#member h2::before,
#inquiry h2::before,
#privacy h2::before {
  color: rgba(255, 255, 255);
}
.bg_pink {
  background: rgba(224, 173, 193, 0.2);
}
.bg_blue {
  background: rgba(24, 116, 217, 0.2);
}
/* ================== Aboutus*/
#aboutus {
  h3 {
    font-size: clamp(1.125rem, 1.05rem + 0.38vw, 1.5rem) /*18-24|320-1920*/;
    text-align: center;
    margin-bottom: 36px;
  }
  h3::before {
    top: -80px;
    left: 0;
    right: 0;
    margin: auto;
  }
}
/*MESSAGE*/
#message dl {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}
#message dl dt {
  background: #fff;
  padding: 24px;
  color: #4b3a45;
  font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem) /*16-18|320-1920*/;
  text-align: center;
  max-width: 80%;
  margin: 0 auto 24px auto;
}
#message dl dt span {
  font-size: 112.5%;
  padding-left: 1em;
}
#message dl dt,
#message dl dt img {
  border-radius: 8px;
}
.message_ti {
  font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem) /*20-24|320-1920*/;
  color: #db3986;
  margin-bottom: 16px;
}
.message_text {
  line-height: 2em;
}
.message_text span {
  background: linear-gradient(transparent 50%, rgba(224, 173, 193, 0.5) 50%);
}
/*FEATURES*/
#features ul {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
}
#features ul li {
  margin: 0 auto 24px auto;
  max-width: 300px;
}
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
}
.item_link {
  display: block;
  cursor: default;
}
.item_content {
  position: relative;
}
.item_image {
  position: relative;
}
.item_blur-bg {
  position: absolute;
  aspect-ratio: 1 / 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  filter: blur(10px);
  border-radius: 50%;
  z-index: 0;
}
.item_image img,
.item_image .item_icon {
  position: relative;
  z-index: 1;
  filter: none;
}
.item_image .item_icon {
  position: absolute;
  bottom: 60px;
  right: 60px;
  display: block;
  background: #e0b5c5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.item_image .item_icon::after {
  position: absolute;
  content: "+";
  color: #fff;
  font-size: 200%;
  top: -20%;
  left: 25%;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}
.item_mask-text {
  width: 100%;
  padding: 48px;
  font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem) /*16-18|320-1920*/;
  color: #4b3a45;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  line-height: 1.4em;
  background-color: #fff;
  border-radius: 8px;
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
.item_box.-fade-in .item_mask {
  transition: opacity 1s ease;
}
/*SERVICE AREA*/
#s-area {
  padding-bottom: 2vh;
}
.s-area-box {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}
#area_text p {
  line-height: 2em;
}
#map {
  max-width: 180px;
  margin: 0 auto;
}
/* ================== Member*/
#member .wrap {
  width: 80%;
  max-width: 1280px;
  margin: 0 auto;
}
#member-photo {
  margin-bottom: 60px;
}
#member-text p:first-of-type {
  line-height: 2em;
}
.more-button {
  text-align: center;
  margin-top: 16px;
}
.more-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: #d95782;
  border: 1px solid #d95782;
  color: #fff;
  text-decoration: none;
  border-radius: 50%;
  font-weight: bold;
  font-size: 1rem;
  position: relative;
}
.more-button .arrow {
  display: inline-block;
  width: 24px;
  height: 1px;
  background-color: #fff;
  position: relative;
  margin-left: 8px;
}
.more-button .arrow::after {
  content: "";
  position: absolute;
  top: 5.2px;
  right: 0;
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translate(50%, -50%) rotate(45deg);
}
.more-button a:hover {
  background: #fff;
  color: #d95782;
}
.more-button a:hover .arrow {
  background-color: #d95782;
}
.more-button a:hover .arrow::after {
  border-top: 1px solid #d95782;
  border-right: 1px solid #d95782;
}
.staggered-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.staggered-grid li {
  position: relative;
}
/* 1列目 */
.staggered-grid li:nth-child(1) {
  top: 0;
}
.staggered-grid li:nth-child(4) {
  top: 0;
}
.staggered-grid li:nth-child(7) {
  top: 0;
}
/* 2列目 */
.staggered-grid li:nth-child(2) {
  top: 24px;
}
.staggered-grid li:nth-child(5) {
  top: 24px;
}
.staggered-grid li:nth-child(8) {
  top: 24px;
}
/* 3列目 */
.staggered-grid li:nth-child(3) {
  top: 48px;
}
.staggered-grid li:nth-child(6) {
  top: 48px;
}
.staggered-grid li:nth-child(9) {
  top: 48px;
}
.staggered-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
/* ================== Service*/
#top_service .wrap {
  width: 80%;
  max-width: 1280px;
}
#top_service .wrap > section {
  padding: 3vh 0;
}
#top_service .wrap > section img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin-bottom: 16px;
}
#top_service {
  h3 {
    padding-left: 64px;
    line-height: 59px;
    margin-bottom: 16px;
  }
  h3::before {
    margin-left: -64px;
  }
}
/* ================== news*/
#top_news ul {
  list-style: none;
  margin: 0 auto 60px auto;
  padding: 0;
  position: relative;
  max-width: 1280px;
}
#top_news ul li {
  position: relative;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  /**/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#top_news ul li img:not(.category img) {
  border-radius: 8px;
  max-width: 40%;
  margin: 0 auto 8px auto;
}
/* 順番に段差をつける */
#top_news ul li:nth-child(2) {
  top: 32px;
}
#top_news ul li:nth-child(3) {
  top: 64px;
}
#top_news .more-button a {
  width: 64px;
  height: 64px;
  font-size: 0.8rem;
}
#top_news .flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.category {
  margin-right: 8px;
}
.category img {
  width: 100px;
  height: auto;
  border-radius: 0 !important;
}
.icon_news {
  background: #db3986;
}
.icon_info {
  background: #1874d9;
}
.news_ti {
  margin-bottom: 8px;
}
.news_top_comment {
  flex-grow: 1;
}
.topic_ti {
  font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem) /*20-24|320-1920*/;
  color: #db3986;
  padding: 8px 0;
  border-top: 1px solid #db3986;
  border-bottom: 1px solid #db3986;
  margin-bottom: 16px;
}
/* ================== narration*/
#nr_lead {
  font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem) /*16-18|320-1920*/;
  width: 100%;
  max-width: 630px;
  margin: 0 auto 120px auto;
  line-height: 2rem;
}
#top_narration {
  h3 {
    font-size: clamp(1.125rem, 1.05rem + 0.38vw, 1.5rem) /*18-24|320-1920*/;
    text-align: center;
    margin-bottom: 36px;
  }
  h3::before {
    top: -80px;
    left: 0;
    right: 0;
    margin: auto;
  }
}
#top_narration ul li {
  text-align: center;
  gap: 16px;
}
#top_narration img {
  border-radius: 8px;
}
/* ================== original wedding*/
#ow_lead {
  font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem) /*16-18|320-1920*/;
  width: 100%;
  max-width: 630px;
  margin: 0 auto 120px auto;
  line-height: 2rem;
}
#ow {
  h3 {
    font-size: clamp(1.125rem, 1.05rem + 0.38vw, 1.5rem) /*18-24|320-1920*/;
    text-align: center;
    margin-bottom: 36px;
  }
  h3::before {
    top: -80px;
    left: 0;
    right: 0;
    margin: auto;
  }
}
.ow_movie {
  max-width: 1280px;
  margin: 0 auto;
}
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 24px;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
#ow_gallery img {
  border-radius: 8px;
}
@media all and (min-width: 961px) {
  #main_image {
    padding: 160px 0 0 0;
  }
  .top_text01 span {
    display: inline;
    padding: 1em;
  }
  #main_image_wrap,
  #obi ul {
    width: 70%;
  }
  #obi {
    background: url("../img/top/il_mp.png") no-repeat bottom left, url("../img/bg02.jpg") no-repeat top right;
    background-size: 18% auto, 100% auto;
  }
  #obi ul li {
    margin: 16px;
  }
  h2.top_lead {
    text-align: center;
  }
  #top_contents {
    h2::before {
      top: 50%;
      font-size: 10vw;
      opacity: 0.2;
    }
  }
  #message dl {
    align-items: center;
  }
  #message dl dt {
    width: 25%;
    padding: 36px;
  }
  #message dl dd {
    width: 73%;
    padding-left: 3%;
  }
  /* ================== aboutus*/
  .s-area-box {
    align-items: center;
  }
  .s-area-box div.flex {
    width: 60%;
    align-items: center;
  }
  #banner {
    width: 36%;
  }
  /*FEATURES*/
  #features ul li {
    width: calc(100% / 3 - 16px);
  }
  .item_mask-text {
    line-height: 2em;
  }
  /* ================== Member*/
  #member-photo {
    width: 35%;
  }
  #member-text {
    width: 60%;
    padding-top: 48px;
  }
  .more-button a {
    width: 150px;
    height: 150px;
  }
  #member {
    .more-button {
      text-align: right;
    }
  }
  /* ================== Service*/
  #top_service .wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "item1 item2"
      "item3 item4";
    gap: 80px;
    position: relative;
    margin-bottom: 160px;
  }
  #top_service .wrap > section {
    padding: 0 !important;
  }
  #top_service .wrap > section:nth-child(1) {
    grid-area: item1;
    align-self: start;
  }
  #top_service .wrap > section:nth-child(2) {
    grid-area: item2;
    align-self: start;
    transform: translateY(80px);
  }
  #top_service .wrap > section:nth-child(3) {
    grid-area: item3;
    align-self: start;
  }
  #top_service .wrap > section:nth-child(4) {
    grid-area: item4;
    align-self: start;
    transform: translateY(80px);
  }
}
@media all and (min-width: 1280px) {
  .obi_bk ul {
    width: 60% !important;
  }
  .obi_bk {
    background: url("../img/bg03.jpg") no-repeat top left !important;
    background-size: 100% !important;
  }
}
/*=======================================================================
SERVICE
=======================================================================*/
#service_top {
  background: url("../img/bg01_sp.jpg") no-repeat;
  padding-bottom: 0;
  background-size: cover;
  padding-top: 10vh;
}
#service {
  h3 {
    font-size: clamp(1.125rem, 1.05rem + 0.38vw, 1.5rem) /*18-24|320-1920*/;
    text-align: center;
    margin-bottom: 36px;
    line-height: 59px;
    padding-left: 64px;
  }
  h3::before {
    margin-left: -64px;
  }
}
#service_top h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem) /*24-48|320-1920*/;
  position: relative;
  text-align: center;
  color: #db3986;
  z-index: 0;
  margin-bottom: 56px;
  font-weight: 600;
  padding-left: 0;
}
#service_top h3:before {
  content: none;
}
#service_top .wrap {
  position: relative;
  width: 80%;
  max-width: 880px;
  margin: 0 auto;
}
#service_top p {
  font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem) /*16-18|320-1920*/;
  line-height: 2rem;
  margin-bottom: 16px;
}
#service_top p:last-of-type {
  margin-bottom: 48px;
}
#service_top .wrap img {
  vertical-align: bottom;
}
.icon {
  width: 32%;
  max-width: 180px;
  margin: 0 auto 36px auto;
  display: block;
}
.service_box {
  width: 80%;
  max-width: 1280px;
  margin: 0 auto;
}
.service_box img {
  border-radius: 8px;
}
.service_box_text {
  order: 1;
  margin-bottom: 16px;
}
h4.service {
  font-size: clamp(1.125rem, 1.1rem + 0.13vw, 1.25rem) /*18-20|320-1920*/;
  color: #db3986;
  font-weight: 600;
  margin-bottom: 16px;
}
.sub {
  font-size: clamp(1.125rem, 1.1rem + 0.13vw, 1.25rem) /*18-20|320-1920*/;
  padding: 0 10% 32px 10%;
}
.bridalbox {
  padding: 24px;
  border-radius: 8px;
}
@media all and (min-width: 961px) {
  #service_top {
    background: url("../img/bg01.jpg") no-repeat;
    background-size: cover;
  }
  .service_box_text {
    margin-bottom: 0;
  }
  .sub {
    text-align: center;
    padding: 0 0 32px 0;
  }
}
/*=======================================================================
INTRODUCTION
=======================================================================*/
#member .wrap {
  width: 90%;
  max-width: 1280px;
  margin: 84px auto;
}
.host_box {
  background: #f4f1e7;
  background: url("../img/intro/host_bg.webp"), linear-gradient(90deg, rgba(244, 241, 231, 1) 65%, rgba(255, 255, 255, 1) 100%);
  background-position: left top;
  background-repeat: no-repeat;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 48px;
}
.catch {
  font-size: clamp(1.25rem, 1.212rem + 0.19vw, 1.438rem) /*20-23|320-1920*/;
  margin-bottom: 8px;
}
.photo {
  width: 80%;
  margin: 16px auto;
}
.photo img {
  border-radius: 8px;
}
.profile {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}
.name {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}
.name img {
  width: 40px;
  height: 41px;
  margin-right: 8px;
}
.name p {
  font-size: 150%;
}
.name p span {
  font-size: 50%;
  display: block;
}
.private {
  margin-bottom: 16px;
}
.private dt,
.voice dt,
.track-record dt {
  background: rgba(24, 116, 217, 0.1);
  padding: 4px 8px;
  border-radius: 30px;
  margin-bottom: 8px;
}
.private li::before {
  content: "●";
  color: #db3986;
}
.sub_catch {
  font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem) /*16-18|320-1920*/;
  color: #1874d9;
}
.voice,
.track-record {
  margin: 16px 0 0;
}
audio {
  width: 100%;
}
@media all and (min-width: 961px) {
  .host_box {
    padding: 32px;
  }
  .photo {
    width: 18.75%;
    margin: 0;
  }
  .name img {
    width: 58px;
    height: 59px;
  }
  .profile {
    width: 79%;
  }
  .private {
    width: 49%;
    margin-bottom: 0;
  }
  .voice li {
    margin-right: 8px;
  }
  .voice li:last-child {
    margin-right: 0;
  }
  audio {
    width: 300px;
  }
}
/*=======================================================================
お問い合わせ
=======================================================================*/
#inquiry .wrap {
  width: 80%;
  max-width: 1000px;
  margin: 84px auto;
}
#inquiry .wrap p {
  line-height: 2em;
}
#form div {
  padding: 16px 0;
}
#inquiry {
  h3 {
    padding-left: 64px;
    line-height: 59px;
    margin-bottom: 32px;
  }
}
#inquiry {
  h3::before {
    margin-left: -64px;
  }
}
@media all and (min-width: 961px) {
  #form div {
    display: table;
    width: 100%;
    padding: 16px 0;
  }
  #form div dt,
  #form div dd {
    display: table-cell;
  }
  #form div dt,
  #form div dd {
    vertical-align: middle;
  }
  #form div dt {
    width: 15%;
  }
  #form div dd {
    width: 85%;
  }
}
/*=======================================================================
プライバシーポリシー
=======================================================================*/
#privacy .wrap {
  width: 80%;
  max-width: 1000px;
  margin: 84px auto;
}
#privacy {
  h3 {
    padding-left: 64px;
    line-height: 59px;
    margin-bottom: 32px;
  }
}
#privacy {
  h3::before {
    margin-left: -64px;
  }
}