@charset "UTF-8";
/*
====>> サイト(案件)毎にスタイルを記述していくファイル <<====

・このファイルはサイト(案件)独自のスタイルを記述するファイル
・ここに記述するファイルは、接頭辞に「p-」を付けたセレクタにする事　/　例：「.p-project-item」

*/
/*		TOPページ
-----------------------------------------------------*/

/*Contenedor que tiene la parte proporcional mas grande*/
.p-propose {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  background-color: #fff7f6;
  width: 100%;
  overflow: hidden;
}
.p-propose a img{
  transition: all 0.4s ease-in-out;
}

.p-propose_mv {
  position: relative;
  min-height: 1020px;
  padding-bottom: 177px;
  width: 100%;
  overflow: hidden;
}
.p-propose_mv::before {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% - 177px);
  background: url(../img/mv_bg.png) no-repeat top left / cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index:1;
}
.p-propose_mv::after {
  content: "";
  display: block;
  width: 63.4%;
  max-width: 1166px;
  height: 100%;
  background: url(../img/mv_img.jpg) no-repeat top left / auto 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.p-propose_mv .l-container {
  position: relative;
  max-width: 1300px;
  width: 100%;
  z-index: 3;
}
.p-propose_mv_content{
  padding:100px 0 100px;

}
.p-propose_mv .c-title_l {
  margin-bottom:40px;
}
.p-propose_mv .c-title_l .c-title_jp {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 28px;
  color: #604b4b;
  letter-spacing: 0.08em;
  line-height: 1.75;
  margin-bottom: 25px;
}
.js-mv_fadein{
  opacity: 0;
}
.c-title_jp.js-mv_fadein{
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.6s ease-in-out;
}
.c-title_jp.js-mv_fadein.is-show{
  opacity: 1;
  transform: translateY(0px);
}
.p-propose_mv .c-title_l .c-title_en {
  font-family: "Gilda Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 90px;
  font-size: clamp(60px, -45.882px + 17.647vw, 90px);
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: #894a4a;
}
.p-propose_mv ul li {
  font-family: "Gilda Display", serif;
  font-weight: 400;
  font-style: normal;
  color: #894a4a;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 2.5;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
}
.p-propose_mv ul {
  width: fit-content;
}
.p-propose_mv ul .js-mv_fadein{
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.8s ease-in-out;
}
.p-propose_mv ul .js-mv_fadein.is-show{
  opacity: 1;
  transform: translateX(0);
  transition-delay:2s;
}
.p-propose_mv ul .js-mv_fadein.is-show + .is-show{
  transition-delay:2.5s;
}
.p-propose_mv ul .js-mv_fadein.is-show + .is-show + .is-show{
  transition-delay:3s;
}
.p-propose_mv ul .js-mv_fadein.is-show + .is-show + .is-show + .is-show{
  transition-delay:3.5s;
}
.p-propose_mv_scroll{
  position: absolute;
  right: 20px;
  bottom: 30%;
  z-index: 50;
  padding-bottom: 70px;
}
.p-propose_mv_scroll::before , 
.p-propose_mv_scroll::after {
  content: "";
  width: 1px;
  position: absolute;
  left: 50%;
}
.p-propose_mv_scroll::before {
  height: 60px;
  background-color: var(--color-brown);
  bottom: 0;
}
.p-propose_mv_scroll::after{
  height: 1px;
  background-color:#B59A9A;
  animation: animetion-mv-scroll 4s infinite;
  bottom: 60px;
}
@keyframes animetion-mv-scroll {
  0% {
    height: 0px;
    bottom: 60px;
  }
  50%{
    height: 60px;
    bottom: 0px;
  }
  100%{
    height: 0px;
    bottom: 0px;
  }
}
@media (max-width: 600px){/*SP以下 表示*/
  .p-propose_mv {
    background: url(../img/mv_bg_sp.png) no-repeat top left / contain;
    min-height: unset;
    padding-bottom: 40px;
  }
  .p-propose_mv::before {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 40px);
    background: url(../img/mv_bg.png) no-repeat top left / cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
  }
  .p-propose_mv::after {
    width: 90%;
    height: calc(100% - 40px);
    background: url(../img/mv_img_sp.jpg) no-repeat top left / cover;
    top: 40px;
    right: 0;
  }
  .p-propose_mv .l-container {
    padding-top: 50px;
  }
  .p-propose_mv .c-title_l .c-title_jp {
    font-size: 14px;
    margin-bottom: 13px;
  }
  .p-propose_mv .c-title_l .c-title_en {
    font-size: 48px;
    font-size: clamp(30px, -15.818px + 16.364vw, 48px);
  }
  .p-propose_mv ul li {
    font-size: 14px;
  }
  .p-propose_mv_scroll{
    bottom: 3%;
  }
}/*END SP以下 表示*/

/* .p-propose_aboutここから */
.p-propose_about {
  padding-top: 120px;
  padding-bottom: 120px;
}
.p-propose_about_lead {
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 2.5;
  text-align: center;
  margin-bottom: 75px;
}
.p-propose_about .c-card-flex.c-card_4 {
  gap: 30px 1%;
  justify-content: center;
  flex-wrap: wrap;
}
.p-propose_about .c-card-flex.c-card_4 .c-card-flex_item {
  width: calc(97% / 4);
}
@media (max-width: 1024px) {
  .p-propose_about .c-card-flex.c-card_4 {
    max-width: 600px;
    margin: 0 auto;
  }
  .p-propose_about .c-card-flex.c-card_4 .c-card-flex_item {
    width: auto;
    max-width: 290px;
  }
}
.p-propose_about .c-card-flex .c-card-flex_item a{
  display: block;
  text-decoration: none;
}
@media (min-width: 601px){/*PC以上 表示*/
  .p-propose_about .c-card-flex .c-card-flex_item a:hover{
    text-decoration: none;
  } 
}/*END PC以上 表示*/
.p-propose_about .c-card-flex_item figure {
  position: relative;
  background: #fff1ef;
  padding: 13px;
  margin-bottom: 35px;
}
.p-propose_about .c-card-flex_item figure::before {
  content: "";
  display: block;
  width: 1px;
  height: 60px;
  background-color: #b59a9a;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transition:  all 0.4s linear;
}
@media (min-width: 601px){/*PC以上 表示*/
  .p-propose_about .c-card-flex .c-card-flex_item a:hover figure::before{
    bottom: -30px;
    height: 70px;
  }  
}/*END PC以上 表示*/
.p-propose_about .c-card-flex_item img {
  width: 100%;
  height: auto;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.p-propose_about .c-card-flex_item p {
  font-size: 20px;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color-dark-brown);
}
.p-propose_about_option {
  margin-top: 80px;
}
.p-propose_about_option .l-container {
  text-align: center;
  max-width: 942px;
  padding: 40px 20px;
  background-color: #fff1ef;
}
.p-propose_about_option h3 {
  font-size: 20px;
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 15px;
}
.p-propose_about_option p {
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 2;
  margin-bottom: 30px;
}
@media (max-width: 600px){/*SP以下 表示*/
  .p-propose_about {
    padding-top: 50px;
    padding-bottom: 100px;
  }
  .p-propose_about_lead {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 40px;
  }
  .p-propose_about .c-card-flex.c-card_4 {
    gap: 20px;
  }
  .p-propose_about .c-card-flex.c-card_4 .c-card-flex_item {
    width: 100%;
  }

  .p-propose_about .c-card-flex_item p {
    font-size: 18px;
  }
  .p-propose_about_option {
    margin-top: 40px;
  }
  .p-propose_about_option .l-container {
    padding: 40px 25px;
  }

  .p-propose_about_option p {
    font-size: 14px;
  }
}/*END SP以下 表示*/
/* .p-propose_aboutここまで */


/* Propose Plan ここから */
.p-propose-plan {
  padding-bottom: 160px;
  background: url("../img/plan_bg.jpg") no-repeat top 100px center / 100% 100%;
}

.p-propose-plan .c-unit .c-unit_image {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.p-propose-plan .c-unit .c-unit_image img {
  width: calc((100% - 5px) / 2);
  object-fit: contain;
}
.p-propose-plan .c-unit .c-unit_image img.js-scroll-up {
  transform: translateY(-30px);
}

.p-propose-plan .c-unit .c-unit_image img.js-scroll-up.is-show {
  animation: animetion-scroll-down 0.8s forwards;
}
@keyframes animetion-scroll-down {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.p-propose-plan .c-unit .c-unit_image img:nth-child(1) {
  margin-bottom: 6.5%;
}
.p-propose-plan .c-unit .c-unit_image img.js-scroll-up.is-show:nth-child(2){
  margin-top: 6.5%;
  animation-delay: 0.7s;
}
.p-propose-plan .c-unit_content {
  padding: 80px 30px 20px;
  box-sizing: border-box;
  position: relative;
}
.p-propose-plan .c-unit_content h3 {
  font-size: 28px;
  letter-spacing: 0.06em;
  line-height: 2;
  margin-bottom: 30px;
}
.p-propose-plan_chapel {
  background: url("../img/plan_chapel_text.png") no-repeat top left / auto;
}
.p-propose-plan_garden {
  background: url("../img/plan_garden_text.png") no-repeat top left / auto;
}
.p-propose-plan_midnight {
  background: url("../img/plan_midnight_text.png") no-repeat top left / auto;
}
.p-propose-plan .c-unit_content p {
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 2.5;
  margin-bottom: 55px;
}
.p-propose-plan .c-btn_wrap {
  margin-top: 100px;
}
@media (max-width: 600px){/*SP以下 表示*/
  .p-propose-plan {
    padding-bottom: 100px;
    background: url("../img/plan_bg_sp.png") no-repeat top 65px center / 100% 100%;
  }
  .p-propose-plan .c-unit{
    flex-direction: column-reverse;
  }
  .p-propose-plan .c-unit_content {
    padding: 40px 0 50px;
  }
  .p-propose-plan .c-unit_content h3 {
    font-size: 22px;
    margin-bottom: 25px;
  }
  .p-propose-plan_chapel {
    background: url("../img/plan_chapel_text.png") no-repeat top left / 90% auto;
  }
  .p-propose-plan_garden {
    background: url("../img/plan_garden_text.png") no-repeat top left / 90% auto;
  }
  .p-propose-plan_midnight {
    background: url("../img/plan_midnight_text.png") no-repeat top left / 90% auto;
  }
  .p-propose-plan .c-unit_content p {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 30px;
  }
  .p-propose-plan .c-btn_wrap {
    margin-top: 60px;
  }
  .p-propose-plan .c-unit_content .c-link_btn{
    margin: 0 auto;
  }
}/*END SP以下 表示*/
/* Propose Plan ここまで */

/* Lover's Sanctuary ここから */
.p-propose-lover {
  padding-top: 260px;
  padding-bottom: 180px;
  background: url("../img/lover_head_bg.jpg") no-repeat top center / 100% auto;
}
.p-propose-lover .c-unit {
  align-items: flex-start;
  margin: 0;
  gap: 60px 10%;
}
.p-propose-lover .c-unit > * {
  width: 45%;
}
.p-propose-lover .c-unit .c-unit_content {
  padding-top: 60px;
}
.p-propose-lover_title {
  margin-bottom: 50px;
}
.p-propose-lover_title p {
  margin-bottom: 45px;
}
.p-propose-lover_title h2 {
  font-size: 28px;
  letter-spacing: 0.08em;
  line-height: 2;
}
.p-propose-lover .c-unit_content > p {
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 2.5;
}
.p-propose-lover .c-unit figure span {
  display: block;
  width: fit-content;
}
.p-propose-lover .c-unit figure span:nth-child(1) {
  width: 87.4%;
}
.p-propose-lover .c-unit figure span:nth-child(2) {
  display: block;
  width: 73.5%;
  margin-top: 20px;
  margin-left: auto;
}
.p-propose-lover_memory {
  margin-top: 60px;
  display: flex;
  gap: 30px;
  align-items: center;
}
.p-propose-lover_memory figure {
  width: 297px;
  flex-shrink: 0;
}
.p-propose-lover_memory_content{
  flex: 1;
}
.p-propose-lover_memory_content h3 {
  font-size: 24px;
  letter-spacing: 0.06em;
}
.p-propose-lover_memory_content p {
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 2.5;
}
@media (max-width: 600px){/*SP以下 表示*/
  .p-propose-lover {
    padding-top: 150px;
    padding-bottom: 80px;
    background: url("../img/lover_head_bg_sp.jpg") no-repeat top center / 100% auto;
  }
  .p-propose-lover .c-unit {
    align-items: flex-start;
    margin: 0;
    gap: 60px 10%;
  }
  .p-propose-lover .c-unit > * {
    width: 100%;
  }
  .p-propose-lover .c-unit .c-unit_content {
    padding-top: 0;
  }
  .p-propose-lover_title {
    margin-bottom: 30px;
  }
  .p-propose-lover_title p {
    width: 66%;
    max-width: 260px;
    margin-bottom: 15px;
  }
  .p-propose-lover_title h2 {
    font-size: 22px;
  }
  .p-propose-lover .c-unit_content > p {
    font-size: 14px;
    line-height: 2;
  }
  .p-propose-lover .c-unit figure span {
    display: block;
    width: fit-content;
  }
  .p-propose-lover .c-unit figure span:nth-child(1) {
    width: 64.6%;
  }
  .p-propose-lover .c-unit figure span:nth-child(2) {
    width: 53.8%;
    margin-top: -10px;
    margin-left: auto;
  }
  .p-propose-lover_memory {
    margin-top: 100px;
    flex-direction: column-reverse;
    gap: 20px;
    align-items: center;
  }
  .p-propose-lover_memory figure {
    width: 40%;
    align-self: flex-end;
  }
  .p-propose-lover_memory_content h3 {
    font-size: 18px;
    margin-bottom: 30px;
  }
}/*END SP以下 表示*/
/* Lover's Sanctuary ここまで */


/* 共通section パーツここから */
.p-propose-sec_a {
  position: relative;
  z-index: 2;
  padding-bottom: 200px;
}
.p-propose-sec_a::after {
  content: "";
  display: block;
  max-width: 1240px;
  width: 80%;
  height: 540px;
  background: url("../img/secition_bg_l.png") no-repeat top left / cover;
  background-blend-mode: darken;
  position: absolute;
  top: 100px;
  left: 0;
  z-index: -1;
}
.p-propose-sec_a::before {
  content: "";
  display: block;
  max-width: 1238px;
  width: 80%;
  height: 862px;
  background-color: #fff1ef;
  background-blend-mode: darken;
  position: absolute;
  top: 190px;
  right: 0;
  z-index: -1;
}
.p-propose-sec_a_read {
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 2.5;
  margin-bottom: 70px;
}
.p-propose-sec_a .c-card-grid {
  gap: 30px;
}
.p-propose-sec_a .c-card-grid_item {
  display: grid;
  grid-row: span 4;
  gap: 20px;
  grid-template-rows: subgrid;
}
.p-propose-sec_a .c-card-grid_item .c-card-grid_image img {
  width: 100%;
  height: auto;
}
.p-propose-sec_a .c-card-grid_item .c-card-grid_title {
  font-size: 20px;
  letter-spacing: 0.06em;
  padding: 16px 0;
  border-top: 1px solid var(--color-brown);
  border-bottom: 1px solid var(--color-brown);
}
.p-propose-sec_a .c-card-grid_item .c-card-grid_text {
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 2.2;
  margin: 0 0 15px;
}
.p-propose-sec_a .c-card-grid_item .c-card-grid_text small{
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.75;
  margin: 15px 0 20px;
  color: #B59A9A;
}
.p-propose-sec_a .c-card-grid .c-link_btn {
  margin: 0 auto;
}
@media (max-width: 600px){/*SP以下 表示*/
  .p-propose-sec_a {
    padding-bottom: 100px;
  }
  .p-propose-sec_a::after {
    width: 89.7%;
    height: 1340px;
    background: url("../img/secition_bg_l_sp.png") no-repeat top left / cover;
  }
  .p-propose-sec_a::before {
    width: 89.7%;
    height: 1818px;
    top: 166px;
  }
  
.p-propose-sec_a_read {
  font-size: 14px;
  line-height: 2;
  margin-bottom: 50px;
}
.p-propose-sec_a .c-card-grid {
  gap: 30px;
}
.p-propose-sec_a .c-card-grid_item + .c-card-grid_item {
  margin-top: 40px;
}
.p-propose-sec_a .c-card-grid_item .c-card-grid_title {
  font-size: 18px;
}
.p-propose-sec_a .c-card-grid_item .c-card-grid_text {
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 2;
  margin: 0;
}
.p-propose-sec_a .c-card-grid .c-link_btn {
  margin: 0 auto;
}
}/*END SP以下 表示*/
/* 共通section パーツここまで */

/* p-propose-birthday ここから */
.p-propose-birthday {
  padding-bottom: 200px;
}

/* p-propose-betrothal  */
.p-propose-betrothal {
  padding-bottom: 200px;
}
.p-propose-betrothal .c-card-grid_item,
.p-propose-anniversary .c-card-grid_item{
  grid-row: span 3;
  /*共通ボタンに変更の為の記述*/
}
.p-propose-betrothal .c-card-grid_item h4 {
  font-size: 14px;
  margin-bottom: 15px;
}
.p-propose-betrothal .c-card-grid_item .c-list_plain {
  line-height: 1.5;
}
.p-propose-betrothal .c-card-grid_item .c-list_plain li + li {
  margin-top: 5px;
}
.p-propose-betrothal .c-btn_wrap ,
.p-propose-anniversary .c-btn_wrap {
  margin-top: 40px;
} 

/*  */
.p-propose_foot_nav {
  padding: 60px 0;
  background: url('../img/foot_nav_bg.png') no-repeat center center / cover;
}
.p-propose_foot_nav .c-btn_wrap {
  gap: 20px 40px;
}