@charset "UTF-8";
/* CSS Document */
/*common
////////////////////////////////////*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
@font-face {
  font-family: "Crimson Pro";
  src: url("../font/CrimsonPro-VariableFont_wght.ttf") format("truetype");
}
#wrapper {
  margin: 0 auto;
  padding: 3% 0 0 0;
  overflow: hidden;
  color: #333333;
}
body {
  max-width: 100% !important;
  width: 100% !important;
}
h1, h2, h3, h4, h5 {
  font-family: "游明朝体", "游明朝", YuMincho, "ヒラギノ明朝 Pro", "ヒラギノ明朝 Pro", "MS P明朝", "MS P明朝", serif;
  font-weight: 500;
}
p {
  text-align: justify;
  font-size: 1.5rem;
  line-height: 1.8;
  font-family: 'Noto Sans JP', sans-serif, "Outfit", sans-serif;
  font-weight: 400;
}
a {
  color: #333333;
  font-family: "游明朝体", "游明朝", YuMincho, "ヒラギノ明朝 Pro", "ヒラギノ明朝 Pro", "MS P明朝", "MS P明朝", serif;
  font-weight: 500;
}
DIV#contents {
  width: 100%;
}
DIV#main, #contentsPankuzu {
  width: 100%;
}
DIV#mainBg {
  width: 100%;
}
DIV#contents h3 {
  line-height: 100%;
  margin: 0;
  background-image: none;
  padding: 20px 20px;
  color: #333333;
  border-bottom: none;
  font-family: "Crimson Pro", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(5rem, 3.958rem + 1.33vw, 5.625rem);
  display: inline-block;
}
/*========= 画面遷移のためのCSS ===============*/
#splash-logo p {
  font-size: 3.5rem;
  font-family: "adobe-handwriting-ernie", sans-serif;
  font-weight: 400;
  font-style: normal;
  white-space: nowrap;
}
.wrapper {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}
.margin {
  margin: 0 auto 5% auto;
  max-width: 1040px;
  padding: 0% 10%;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10%;
  text-align: left;
  margin: 0 auto;
}
.flex-reverse {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10%;
  text-align: left;
  margin: 0 auto;
  flex-direction: row-reverse;
}
.title {
  font-family: "Crimson Pro", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(5rem, 3.958rem + 1.33vw, 5.625rem);
  display: inline-block;
}
.flex h4 {
  font-size: clamp(2rem, 1.167rem + 1.07vw, 2.5rem);
  line-height: 1.5;
}
.flex02 h4 {
  font-size: clamp(2rem, 1.167rem + 1.07vw, 2.5rem);
}
.large-letter {
  font-size: clamp(6.25rem, -4.167rem + 13.33vw, 12.5rem);
}
.small-letter {
  font-size: clamp(1.25rem, 0.208rem + 1.33vw, 1.875rem);
  display: inline-block;
}
#story, #questionary, #point, #brand {
  padding-top: 10%;
  margin-top: -10%;
}
.sp_br {
  display: none;
}
.crimson {
  color: #880126;
}
.beige {
  color: #8D7438;
}
.navy {
  color: #0A1A4B;
}
.pink {
  color: #CC9999;
}
.crimson-lg, .beige-lg, .navy-lg, .pink-lg {
  font-size: 3rem;
}
.crimson-lg {
  color: #880126;
}
.beige-lg {
  color: #8D7438;
}
.navy-lg {
  color: #0A1A4B;
}
.pink-lg {
  color: #CC9999;
}
.sp_br {
  display: none;
}
@media screen and (max-width:1440px) {
  .flex h4 {
    line-height: 1.2;
  }
  .flex02 h4 {
    line-height: 1.2;
  }
}
@media screen and (max-width:1280px) {
  .slick-dots {
    bottom: 10px !important;
  }
  .slick-dots li button:before {
    font-size: 15px !important;
  }
  .slick-dots li {
    margin: 0;
  }
  .large-letter {
    font-size: 7rem;
  }
  .title {
    font-size: 4rem;
  }
  .small-letter {
    font-size: 2rem;
  }
}
@media screen and (max-width:960px) {
  #wrapper {
    padding: 0;
  }
  .margin {
    margin: 0 auto 5% auto;
    max-width: 100%;
    padding: 0 10%;
  }
  .flex {
    display: block;
  }
  .flex02 {
    display: block;
  }
  .flex-reverse {
    display: block;
  }
  .small-letter {
    font-size: 1.6rem;
    line-height: 1.5;
  }
  .flex h4 {
    font-size: 2.5rem;
  }
  #splash-logo p {
    font-size: 2rem;
  }
  .title {
    font-size: 4rem;
    margin-bottom: 0;
  }
  .flex h4 {
    font-size: 2rem;
  }
  .pc_br {
    display: none;
  }
  .sp_br {
    display: block;
  }
  .small-letter {
    font-size: 1.6rem;
  }
}
@media screen and (max-width:768px) {
  .crimson-lg, .beige-lg, .navy-lg, .pink-lg {
    font-size: 2.5rem;
  }
  .title {
    font-size: 2.5rem;
  }
  #splash-logo p {
    font-size: 1.5rem;
  }
}
@media screen and (max-width:340px) {
  .margin {
    margin: 0 auto 10% auto;
  }
}
/*top
////////////////////////////////////*/
.top_lead {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}
.scrolldown {
  position: absolute;
  left: -10%;
  bottom: 5%;
  font-size: 1.2rem;
  font-family: 'Noto Sans JP', sans-serif, "Outfit", sans-serif;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
.scrolldown span {
  position: relative;
  padding: 0 5%;
}
.scrolldown span::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  left: -10%;
  height: 100px;
  background: #000000;
  animation: pathmove 1.4s ease-in-out infinite;
  opacity: 0;
}
@keyframes pathmove {
  0% {
    height: 0;
    opacity: 0;
    top: 0;
  }
  30% {
    height: 70px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 100px;
    opacity: 0;
  }
}
#slider {
  width: 100%;
  height: 60vh !important;
  margin: 0 auto;
}
#slider img {
  width: 100%;
}
@keyframes zoomUp {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}
.top p {
  margin-top: 10%;
}
.top_lead-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -15%;
  text-align: left;
  background-color: #ffffff;
  padding: 5%;
}
.top_lead-text h1 {
  font-size: clamp(3.125rem, -0.208rem + 4.17vw, 5rem);
  line-height: 1.5;
  position: relative;
}
.js-box {
  opacity: 1;
  transition: all 0.8s 0.2s ease-in-out;
}
.sub-title {
  font-size: clamp(2.5rem, 0.278rem + 2.78vw, 3.75rem);
  font-family: "游明朝体", "游明朝", YuMincho, "ヒラギノ明朝 Pro", "ヒラギノ明朝 Pro", "MS P明朝", "MS P明朝", serif;
  line-height: 1.5;
  display: inline-block;
}
.slide-in_inner {
  display: inline-block;
}
.samll {
  font-size: clamp(2.063rem, 0.729rem + 1.67vw, 2.813rem);
}
.top_text h2 {
  font-size: clamp(2.813rem, 1.771rem + 1.33vw, 3.438rem);
  padding-bottom: 20px;
}
.top_text h2 span {
  color: #C69C6D;
}
.top_text p {
  text-align: center;
  margin-bottom: 5%;
  color: #8D7438;
}
.gold {
  color: #8D7438;
}
.top h2 {
  font-family: "adobe-handwriting-ernie", sans-serif;
  font-size: 3rem;
  color: #8D7438;
  padding-bottom: 20px;
}
.gnav-list {
  position: relative;
  margin-top: 10%;
  padding: 5% 2.5%;
  border: 1px solid #8D7438;
  z-index: 10;
}
.gnav-list::after {
  content: '';
  position: absolute;
  border: 1px solid #8D7438;
  top: 8px;
  right: -8px;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.gnav-list-title {
  position: absolute;
  padding: 10px 96px;
  background-color: #8D7438;
  color: #ffffff;
  z-index: 10;
  right: 50%;
  transform: translateX(50%);
  top: -24px;
  font-family: "Crimson Pro", serif;
  font-size: 1.8rem;
}
.gnav-list span {
  font-family: "Crimson Pro", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.gnav-list ul {
  transform: translateY(16px);
}
.gnav-list ul li {
  display: inline;
  padding-right: 20px;
  font-size: 1.5rem;
  font-family: "游明朝体", "游明朝", YuMincho, "ヒラギノ明朝 Pro", "ヒラギノ明朝 Pro", "MS P明朝", "MS P明朝", serif;
  font-weight: 500;
  position: relative;
}
.gnav-list ul li:first-child::after {
  content: "";
  display: block;
  position: absolute;
  background: #DBB3BE;
  border-radius: 50%;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 0;
  right: 0;
  width: 20%;
  padding-top: 20%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity .5s, transform 0s;
  transition-delay: 0s, .4s;
}
.gnav-list ul li:first-child::after {
  content: "";
  display: block;
  position: absolute;
  background: #DBB3BE;
  border-radius: 50%;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 0;
  right: 0;
  width: 20%;
  padding-top: 20%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity .5s, transform 0s;
  transition-delay: 0s, .4s;
}
.gnav-list ul li:nth-of-type(2)::after {
  content: "";
  display: block;
  position: absolute;
  background: #D4C89C;
  border-radius: 50%;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 0;
  right: 0;
  width: 20%;
  padding-top: 20%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity .5s, transform 0s;
  transition-delay: 0s, .4s;
}
.gnav-list ul li:nth-of-type(3)::after {
  content: "";
  display: block;
  position: absolute;
  background: #BCCBD2;
  border-radius: 50%;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 0;
  right: 0;
  width: 20%;
  padding-top: 20%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity .5s, transform 0s;
  transition-delay: 0s, .4s;
}
.gnav-list ul li:last-of-type::after {
  content: "";
  display: block;
  position: absolute;
  background: #F1DED3;
  border-radius: 50%;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 0;
  right: 0;
  width: 20%;
  padding-top: 20%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity .5s, transform 0s;
  transition-delay: 0s, .4s;
}
@media (any-hover: hover) {
  .gnav-list ul li:first-child:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    transition-delay: 0s;
    transition: opacity .8s, transform .6s ease-in-out;
  }
  .gnav-list ul li:nth-of-type(2):hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    transition-delay: 0s;
    transition: opacity .8s, transform .6s ease-in-out;
  }
  .gnav-list ul li:nth-of-type(3):hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    transition-delay: 0s;
    transition: opacity .8s, transform .6s ease-in-out;
  }
  .gnav-list ul li:last-of-type:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    transition-delay: 0s;
    transition: opacity .8s, transform .6s ease-in-out;
  }
}
.gnav-list ul li:last-of-type {
  padding-right: 0;
}
@media screen and (max-width:1400px) {
  #slider {
    width: 90%;
    height: 80vh !important;
  }
  .js-box.load {
    transform: translate(-5%, -50%);
  }
  .scrolldown {
    left: -1%;
  }
  .top_lead-text {
    left: -3%;
    padding: 20px 20px;
  }
  .top_text p {
    margin: 0 auto;
    width: 80%;
  }
  .top_lead {
    transform: translateX(5%);
  }
  .top_lead-text h1 {
    letter-spacing: 0.1em;
  }
  .gnav-list {
    padding: 5% 5px 5% 5px;
  }
  .gnav-list ul li {
    font-size: 1.5rem;
  }
}
@media screen and (max-width:1200px) {
  #slider {
    width: 100%;
    height: 80vh !important;
  }
  .top_text p {
    width: 100%;
  }
  .top_lead-text {
    left: -3%;
    padding: 30px 5%;
  }
  .scrolldown {
    left: -3%;
  }
  .gnav-list {
    margin-top: 10%;
    padding: 5% 20px 5% 20px;
    transform: translateY(0px);
    width: 100%;
    margin: 10% auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: left;
  }
  .gnav-list ul {
    transform: translateY(0px);
    position: relative;
  }
  .gnav-list ul li {
    display: block;
    margin: 5% 0 0 0;
    text-align: left;
  }
}
@media screen and (max-width:1024px) {
  .top_lead-text h1 {
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    font-size: clamp(2.188rem, 0.371rem + 6.74vw, 4.375rem);
    line-height: 1.2;
    text-orientation: upright;
    position: unset;
  }
  .top_text h2 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width:960px) {
  .top_lead-text h1 {
    font-size: 4.5rem;
  }
  .top {
    margin: 10% 0 20% 0;
  }
  .gnav-list ul {
    transform: translateY(0px);
    position: relative;
  }
  .gnav-list ul li {
    display: block;
    padding-right: 0;
  }
  .flex {
    display: block;
  }
  .large-letter {
    font-size: 7rem;
  }
}
@media screen and (max-width:768px) {
  #slider {
    width: 80%;
    height: 60vh !important;
    position: relative !important;
    margin-right: 0%;
  }
  #slider img {
    width: 100%;
    display: block;
  }
  .top_lead {
    position: relative;
    transform: translateX(0);
  }
  .top_lead-text {
    padding: 10% 2.5% 10% 5%;
  }
  .top_lead-text h1 {
    font-size: 4rem;
    font-family: "Zen Old Mincho", system-ui;
    font-weight: 500;
    font-style: normal;
    background-color: white;
    z-index: 9999;
  }
  .top_lead::after {
    content: '';
    display: block;
    position: absolute;
    background-image: url("../image/00_top/main_letters.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 85%;
    padding: 6%;
    bottom: -39px;
    right: 0;
  }
  .top_lead-text {
    left: 0;
    top: 61%;
  }
  .sp_br {
    display: block;
  }
  .scrolldown {
    left: 5%;
    bottom: 2%;
  }
  .top p {
    font-size: 1.4rem;
  }
  .top_lead-text p img {
    display: none;
  }
  .sub-title {
    font-size: 2rem;
    line-height: 1.2;
    font-family: "Zen Old Mincho", system-ui;
    font-weight: 500;
    font-style: normal;
  }
  .sub-number {
    font-size: 2rem;
    line-height: 1.2;
    font-family: "Zen Old Mincho", system-ui;
    font-weight: 500;
    font-style: normal;
    vertical-align: unset;
    letter-spacing: 0em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-combine-upright: all;
  }
  .gnav-list {
    width: auto;
    margin-top: 15%;
  }
  .large-letter {
    font-size: 6rem;
  }
}
@media screen and (max-width:430px) {
  .top_lead {
    position: relative;
  }
  .top_lead-text {
    position: absolute;
    top: 40%;
    line-height: 1.2;
    transform: unset;
    background-color: rgba(255, 255, 255, 0);
    width: 24.3%;
    padding: 0;
    left: 4%;
  }
  .top_lead-text h1 {
    line-height: 1.2;
    font-size: 2.5rem;
    padding: 20% 15% 15% 0%;
    width: max-content;
    height: 15em;
  }
  .scrolldown {
    left: 5%;
    bottom: 5%;
  }
  .scrolldown span::after {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    left: -10%;
    height: 100px;
    background: #000000;
    animation: pathmove 1.4s ease-in-out infinite;
    opacity: 0;
  }
  .top_lead::after {
    bottom: -22px;
    right: 0;
  }
  .js-box.load {
    left: 0;
    top: 66%;
    padding: 10% 2.5% 10% 5%;
  }
  .top p {
    margin-top: 10%;
    padding-bottom: 10%;
    z-index: 9999;
    position: relative;
  }
  .top_text p {
    text-align: justify;
    margin-bottom: 20%;
  }
  .gnav-list-title {
    padding: 12px 55px;
  }
  .gnav-list {
    padding: 10% 20px 10% 20px;
  }
  .gnav-list ul a {
    margin: 20% 0 0 0;
  }
  .gnav-list ul a:first-child::before {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    padding: 12%;
    z-index: -1;
  }
  .gnav-list ul a:nth-child(2)::before {
    top: 11%;
    left: 50%;
    transform: translateX(-50%);
    padding: 25%;
    z-index: -1;
  }
  .gnav-list ul a:nth-child(3)::before {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    padding: 12%;
    z-index: -1;
  }
  .gnav-list ul a:last-of-type::before {
    top: 20%;
    left: 50%;
    transform: translateX(-35%);
    padding: 8%;
    z-index: -1;
  }
}
@keyframes pathmove {
  0% {
    height: 0;
    opacity: 0;
    top: 0;
  }
  30% {
    height: 50px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 60px;
    opacity: 0;
  }
}
@media screen and (max-width:375px) {
  #slider {
    height: 75vh !important;
  }
}
/*interview
////////////////////////////////////*/
/*フェードインアニメーション*/
.animation_box {
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.8s 0.2s ease-in-out;
}
.fadeUpTrigger {
  opacity: 0;
}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  transition: all 0.8s 0.2s ease-in-out;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInTrigger {
  opacity: 0;
}
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  transition: all 0.8s 0.2s ease-in-out;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
    transform: scale(1.2, 1.2);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}
.delay-time02 {
  animation-delay: 0.5s;
  transition: all 0.8s 0.2s ease-in-out;
}
.delay-time04 {
  animation-delay: 0.7s;
  transition: all 0.8s 0.2s ease-in-out;
}
.interview-text {
  position: relative;
}
.interview-text::after {
  content: '';
  display: block;
  position: absolute;
  background-image: url(../img/01_Interview/interview_text.svg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  padding: 4%;
  height: auto;
}
.interview {
  background-color: #F8EFEE;
  padding-bottom: 20px;
  margin-top: 12%;
}
.interview_title-section {
  padding: 2.5% 10%;
}
.interview_title-section_lead h3 {
  position: relative;
}
.interview_title-section_lead h3::before {
  content: '';
  display: block;
  position: absolute;
  background-image: url(../img/01_Interview/interview_title.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  padding: 25%;
  bottom: 30px;
  right: -74px;
}
.interview_title-section_lead h3::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  border-top: 1px solid #333333;
  bottom: 38px;
}
.interview_sec01, .interview_sec02 {
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
}
.interview_sec01_text h5 {
  font-size: 2.5rem;
  padding-bottom: 20px;
}
.interview_sec01_text p {
  padding-bottom: 20px;
}
.interview_sec01_text a {
  display: block;
  text-align: justify;
  position: relative;
  font-size: 1.6rem;
  transition: all 0.5s 0.2s ease-in-out;
}
.interview_sec01_text a::after {
  content: '';
  display: block;
  position: absolute;
  border-bottom: 1px solid #333333;
  width: 210px;
  bottom: 0;
  transition: all 0.5s 0.2s ease-in-out;
}
.interview_sec02_text h5 {
  font-size: 25px;
  padding-bottom: 20px;
}
.interview_sec02_text p {
  padding-bottom: 20px;
}
.interview_sec02_text a {
  border-bottom: 1px solid #333333;
  transition: all 0.5s 0.2s ease-in-out;
}
.interview_sec02_text a::after {
  content: '';
  display: block;
  position: absolute;
  border-bottom: 1px solid #333333;
  width: 210px;
  bottom: 0;
  transition: all 0.5s 0.2s ease-in-out;
}
@media (any-hover: hover) {
  .interview_sec01_text a:hover {
    color: #999999;
    transition: all 0.5s 0.2s ease-in-out;
  }
  .interview_sec01_text a:hover::after {
    border-bottom: 1px solid #999999;
  }
  .interview_sec02_text a:hover {
    color: #999999;
    transition: all 0.5s 0.2s ease-in-out;
  }
  .interview_sec02_text a:hover::after {
    border-bottom: 1px solid #999999;
  }
}
.interview_title-section h4 {
  transform: translateY(-30px);
}
.interview_title-section_text {
  position: relative;
}
.interview_title-section_text::after {
  content: '';
  display: block;
  position: absolute;
  border-top: 1px solid #333333;
  width: 80px;
  top: 50%;
  left: -23%;
}
.interview_title-section_lead {
  width: 50%;
}
.interview_title-section_text {
  width: 60%;
}
.interview_title-section_photo01 {
  position: relative;
  width: 60%;
}
.interview_title-section_photo01::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #E5CCCC;
  top: 17px;
  right: 24px;
  z-index: -1;
}
.interview_title-section_photo01 img {
  width: 100%;
}
.interview_title-section_photo02 {
  position: relative;
  width: 60%;
}
.interview_title-section_photo02::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #DDD5C3;
  top: 17px;
  right: 24px;
  z-index: -1;
}
.interview_title-section_photo02 img {
  width: 100%;
  height: auto;
}
.interview_sec01_text {
  width: 50%;
  padding-left: 5%;
}
.interview_sec02_text {
  width: 50%;
  padding-right: 8%;
}
.bg-w {
  background-color: #ffffff;
  padding: 60px 0;
  margin-bottom: 5%;
  box-shadow: 0px 10px 10px -6px rgba(98, 20, 20, 0.1);
}
@media screen and (max-width:1400px) {
  .bg-w {
    padding: 5% 10%;
  }
  .interview-text {
    height: 150px;
  }
  .interview {
    margin-top: 0%;
  }
  .interview-text::after {
    bottom: -11px;
  }
}
@media screen and (max-width:1280px) {
  .bg-w {
    padding: 5% 10%;
  }
  .interview-text {
    height: 120px;
  }
  .interview-text::after {
    bottom: -4px;
  }
  .interview_title-section {
    padding: 5% 10%;
  }
  .interview_title-section_lead h3 {
    padding-bottom: 7%;
  }
  .interview_title-section_lead h3::before {
    bottom: 29%;
  }
}
@media screen and (max-width:960px) {
  .interview_title-section_lead {
    width: 100%;
    text-align: center;
    padding-top: 10%;
  }
  .interview_title-section_text::after {
    border-left: 0.5px solid #333333;
    width: 0px;
    height: 35px;
    top: 3%;
    left: 50%;
    transform: translateX(50%);
  }
  .interview_title-section_text {
    padding-top: 15%;
    width: 100%;
    font-size: 1.4rem;
  }
  .interview_title-section_lead h3 {
    padding-bottom: 0;
  }
  .interview_title-section_lead h3::before {
    bottom: 14%;
    padding: 25%;
    right: -50px;
  }
  .interview_title-section_lead h3::after {
    border: none;
    border-top: 1px solid #333333;
    bottom: 15px;
  }
  .interview_title-section_lead {
    width: 100%;
  }
  .interview_title-section_text {
    width: 100%;
  }
  .interview_title-section_photo01 {
    width: 100%;
  }
  .interview_title-section_photo01 img {
    width: 100%;
  }
  .interview_title-section_photo02 {
    width: 100%;
  }
  .interview_sec01_text {
    width: 100%;
    padding-left: 0;
  }
  .interview_sec02_text {
    width: 100%;
    padding-right: 0;
  }
  .interview-text {
    height: 0;
  }
  .interview_title-section h4 {
    transform: translateY(0);
    padding-bottom: 2.5%;
  }
  .interview_sec01_text h5, .interview_sec02_text h5 {
    font-size: 2rem;
    padding-top: 10%;
    text-align: center;
  }
  .interview-text::after {
    bottom: -3px;
  }
  .interview_sec01_text p {
    font-size: 1.4rem;
  }
  .interview_sec02_text p {
    font-size: 1.4rem;
  }
  .interview_sec01_text a {
    text-align: center;
    font-size: 1.5rem;
  }
  .interview_sec01_text a::after {
    content: '';
    display: block;
    position: absolute;
    border-bottom: 1px solid #333333;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
  }
  .interview_title-section_photo02::after {
    left: 24px;
  }
  .interview_sec02_text a {
    text-align: center;
    font-size: 1.5rem;
  }
  .interview_sec02_text a::after {
    content: '';
    display: block;
    position: absolute;
    border-bottom: 1px solid #333333;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
  }
  .interview_title-section {
    padding: 2.5% 10% 0 10%;
  }
  .bg-w {
    margin-bottom: 10%;
  }
}
@media screen and (max-width:768px) {
  .interview_title-section_text p {
    padding: 0% 0 5% 0;
  }
  .interview_title-section_lead h3::before {
    bottom: 19px;
    padding: 30%;
    right: -50px;
  }
  .interview_title-section_lead h4 {
    font-size: 1.8rem;
  }
  .bg-w {
    padding: 10%;
  }
}
@media screen and (max-width:430px) {
  .bg-w {
    padding: 10% 0%;
  }
  .interview_title-section_photo01::after {
    top: 5%;
    right: -15%;
  }
  .interview_title-section_photo02::after {
    top: 5%;
    left: 0;
    width: 90%;
  }
  .interview_sec01_text a {
    font-size: 1.5rem;
  }
  .interview_sec01_text h5, .interview_sec02_text h5 {
    font-size: 1.8rem;
  }
  .interview_title-section_text p {
    padding: 5% 0 5% 0;
  }
  .interview_title-section_photo01 {
    width: 100%;
    margin-left: -5%;
  }
  .interview_sec01_text p {
    padding: 0 10% 5% 10%;
  }
  .interview_sec02_text p {
    padding: 0 10% 5% 10%;
  }
  .interview_title-section_photo02 img {
    transform: translateX(5%);
  }
}
/*opinions
////////////////////////////////////*/
.opinions {
  background-color: rgba(242, 242, 242, 0.5);
  padding: 2.5% 0;
}
.opinions_title-section {
  padding: 2.5% 10%;
}
.opinions h3 span {
  color: #C69C6D;
}
.opinions h4 span {
  padding-bottom: 15px;
}
.opinions_title-section_lead {
  width: 50%;
}
.opinions_title-section_lead h3 {
  position: relative;
}
.opinions_title-section_lead h3::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  border-top: 1px solid #333333;
  bottom: 24px;
}
.opinions_title-section_lead h3::before {
  content: '';
  display: block;
  position: absolute;
  background-image: url(../img/02_opinions/opinions_title.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  padding: 20%;
  bottom: 32px;
  right: -68px;
}
.opinions_title-section_lead h4 {
  position: relative;
  font-size: clamp(2rem, 1.167rem + 1.07vw, 2.5rem);
  padding-bottom: 80px;
}
.opinions_title-section_text {
  width: 60%;
  position: relative;
}
.opinions_title-section_text::after {
  content: '';
  display: block;
  position: absolute;
  border-top: 1px solid #333333;
  width: 65px;
  top: 50%;
  left: -19%;
}
.opinions_wrapper {
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
}
.fadeLeftTrigger {
  opacity: 0;
}
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  transition: all 0.8s 0.2s ease-in-out;
}
@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.delay-time01 {
  animation-delay: 0.2s;
}
.delay-time02 {
  animation-delay: 0.5s;
}
.delay-time03 {
  animation-delay: 0.7s;
}
.opinions_sec_photo {
  width: 50%;
}
.opinions_sec_photo img {
  width: 100%;
}
.opinions_sec01 {
  margin-top: 5%;
}
.opinions_sec01, .opinions_sec02, .opinions_sec03 {
  padding-bottom: 5%;
  position: relative;
}
.opinions_sec01_text, .opinions_sec02_text, .opinions_sec03_text {
  padding: 45px 30px;
  background-color: #ffffff;
  border: 1px solid #8D7438;
  position: relative;
}
.opinions_sec01_text::before, .opinions_sec03_text::before {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #8D7438 transparent transparent transparent;
  border-width: 15px 15px 0 15px;
  top: 50%;
  transform: rotate(90deg);
  left: -23px;
}
.opinions_sec01_text::after, .opinions_sec03_text::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: rotate(90deg);
  left: -22px;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  border-width: 15px 15px 0 15px;
}
.opinions_sec02_text::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: rotate(-90deg);
  right: -22px;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  border-width: 15px 15px 0 15px;
}
.opinions_sec02_text::before {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #8D7438 transparent transparent transparent;
  border-width: 15px 15px 0 15px;
  top: 50%;
  transform: rotate(-90deg);
  right: -23px;
}
.opinions_sec01_text, .opinions_sec03_text {
  margin-left: 30px;
}
.opinions_sec02_text {
  margin-right: 30px;
}
.opinions_wrapper h5 {
  color: #8D7438;
  padding-bottom: 20px;
  font-size: 2rem;
  text-align: justify;
}
.opinions_wrapper p {
  padding-bottom: 20px;
}
.opinions_wrapper a {
  text-align: justify;
  display: block;
}
.opinions_wrapper a::after {
  content: '';
  position: absolute;
  display: block;
  border-bottom: 1px solid #333333;
  width: 80px;
}
@media screen and (max-width:1280px) {
  .opinions_sec01, .opinions_sec02, .opinions_sec03 {
    width: 90%;
  }
  .opinions_title-section_lead h3::after {
    bottom: 9px;
  }
  .opinions_title-section_lead h3::before {
    padding: 25%;
    top: 16px;
    right: -64px;
  }
  .opinions h4 span {
    padding: 5px 0 10px 0;
  }
  .opinions_title-section_text::after {
    left: -19%;
  }
}
@media screen and (max-width:960px) {
  .opinions {
    padding: 5% 0;
  }
  .opinions_title-section_text::after {
    border-left: 0.5px solid #333333;
    width: 0px;
    height: 35px;
    top: 3%;
    left: 50%;
    transform: translateX(50%);
  }
  .opinions_title-section_text {
    padding-top: 15%;
  }
  .opinions_title-section_lead {
    width: 100%;
  }
  .opinions_title-section_lead h3::before {
    padding: 20%;
    right: -25%;
    bottom: 8%;
  }
  .opinions_title-section_lead h3::after {
    border-top: 1px solid #333333;
    bottom: 5px;
    transform: translateX(50%);
    right: 50%;
  }
  .opinions_title-section_lead {
    width: 100%;
    text-align: center;
  }
  .opinions_title-section_text {
    width: 100%;
  }
  .opinions_title-section_lead h4 {
    padding-bottom: 2.5%;
  }
  .opinions h4 span {
    padding: 20px 0 7px 0;
  }
  .opinions_sec_photo {
    width: 45%;
    margin: 0 auto;
    padding-bottom: 5%;
  }
  .opinions_sec01_text, .opinions_sec03_text {
    margin-left: 0;
  }
  .opinions_sec01_text::after, .opinions_sec03_text::after {
    content: "";
    position: absolute;
    top: -28.5px;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    width: 0;
    height: 0;
    border-width: 15px 15px 0 15px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ffffff;
    border-color: transparent transparent #ffffff transparent;
  }
  .opinions_sec02_text::after {
    content: "";
    position: absolute;
    top: -28px;
    right: 50%;
    transform: translateX(50%);
    margin: auto;
    width: 0;
    height: 0;
    border-width: 15px 15px 0 15px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ffffff;
    border-color: transparent transparent #ffffff transparent;
  }
  .opinions_sec01_text::before, .opinions_sec03_text::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    width: 0;
    height: 0;
    border-width: 15px 15px 0 15px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #8D7438;
    border-color: transparent transparent #8D7438 transparent;
  }
  .opinions_sec02_text::before {
    content: "";
    position: absolute;
    top: -30px;
    right: 50%;
    transform: translateX(50%);
    margin: auto;
    width: 0;
    height: 0;
    border-width: 15px 15px 0 15px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #8D7438;
    border-color: transparent transparent #8D7438 transparent;
  }
  .opinions_wrapper a {
    text-align: center;
  }
  .opinions_wrapper a::after {
    content: '';
    position: absolute;
    display: block;
    border-bottom: 1px solid #333333;
    width: 85px;
    left: 50%;
    transform: translateX(-50%);
  }
  .opinions_wrapper h5 {
    text-align: center;
    font-size: 1.8rem;
  }
  .opinions_sec02_text {
    margin-right: 0px;
  }
  .opinions_wrapper p {
    font-size: 1.4rem;
  }
}
@media screen and (max-width:768px) {
  .opinions_title-section_lead h3::after {
    bottom: 15px;
  }
  .opinions h4 span {
    padding: 0 0 7px 0;
  }
  .opinions_title-section_lead h3::before {
    padding: 26%;
    right: -43%;
    bottom: -8%;
    top: 0;
  }
  .opinions_title-section_lead h4 {
    font-size: 1.8rem;
  }
}
@media screen and (max-width:430px) {
  .opinions_sec_photo {
    width: 60%;
  }
  .opinions_title-section_text {
    padding-top: 20%;
  }
}
/*marriage-ring
////////////////////////////////////*/
.marriage-ring {
  margin: 0 auto;
  max-width: 1040px;
  width: 90%;
  padding: 0 5%;
}
.marriage-ring_title-section_lead h3 {
  position: relative;
  padding-bottom: 10px;
}
.marriage-ring_title-section_lead h3::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  border-top: 1px solid #333333;
  bottom: 24px;
}
.marriage-ring_title-section_lead h3::before {
  content: '';
  display: block;
  position: absolute;
  background-image: url(../img/03_marriage-ring/marriage-ring_title.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  padding: 18%;
  bottom: 37px;
  right: -80px;
}
.marriage-ring h4 span {
  transform: translateY(-8px);
}
.marriage-ring_title-section_lead h4 {
  position: relative;
  font-size: clamp(2rem, 1.167rem + 1.07vw, 2.5rem);
  padding-bottom: 80px;
}
.marriage-ring_title-section_lead h4::after {
  content: '';
  display: block;
  position: absolute;
  border-left: 1px solid #333333;
  width: 0;
  height: 50px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.marriage-ring_sec {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 10%;
}
.marriage_title-section_photo {
  width: 50%;
}
.marriage_title-section_photo img {
  width: 100%;
}
.marriage_title-section_text {
  width: 50%;
  padding-left: 50px;
  text-align: justify;
}
.marriage_title-section_text p {
  padding-bottom: 40px;
}
.marriage_title-section_text a {
  background-color: #8D7438;
  display: inline-block;
  width: 300px;
  text-align: center;
  transition: all 0.5s 0.2s ease-in-out;
}
.marriage-ring_button {
  color: #ffffff;
  transform: translateX(-10px);
  padding: 20px 0;
}
.arrow {
  position: relative;
}
.arrow::after {
  content: '';
  display: block;
  position: absolute;
  width: 56px;
  height: 1px;
  top: 50%;
  right: 32px;
  border-top: 1px solid #ffffff;
  transition: all 0.5s 0.2s ease-in-out;
}
.arrow::before {
  content: '';
  display: block;
  position: absolute;
  width: 10px;
  height: 1px;
  top: 50%;
  right: 32px;
  border-top: 1px solid #ffffff;
  transform: rotate(40deg);
  transform-origin: right;
  transition: all 0.5s 0.2s ease-in-out;
}
@media (any-hover: hover) {
  .arrow:hover::after {
    width: 56px;
    right: 20px;
    transition: all 0.5s 0.2s ease-in-out;
  }
  .arrow:hover::before {
    right: 20px;
    transition: all 0.5s 0.2s ease-in-out;
  }
}
.shine {
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
/* 光の疑似要素 */
.shine::before {
  content: "";
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #fff;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}
/* 光の動き */
@keyframes shine {
  0% {
    left: -160%;
    opacity: 0;
  }
  70% {
    left: -160%;
    opacity: 0.2;
  }
  71% {
    left: -160%;
    opacity: 0.4;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}
@media screen and (max-width:1280px) {
  .marriage-ring_title-section_lead h3 {
    padding-bottom: 10px;
  }
  .marriage-ring_title-section_lead h3::before {
    padding: 16%;
    bottom: 22px;
    right: -59px;
  }
}
@media screen and (max-width:960px) {
  .marriage-ring_sec {
    display: block;
  }
  .marriage_title-section_photo {
    width: 90%;
    margin: 0 auto;
  }
  .marriage_title-section_photo img {
    width: 100%;
  }
  .marriage-ring_title-section_lead h3 {
    padding-bottom: 12px;
  }
  .marriage_title-section_text {
    width: 90%;
    padding-left: 0px;
    text-align: center;
    margin: 0 auto;
  }
  .marriage_title-section_text p {
    padding: 10% 0 5% 0;
  }
  .marriage-ring_title-section_lead h3::before {
    bottom: 20px;
    right: -66px;
  }
  .marriage_title-section_text p {
    padding: 10% 0 10% 0;
    font-size: 1.4rem;
  }
}
@media screen and (max-width:768px) {
  .marriage-ring_title-section_lead h4 {
    font-size: 1.8rem;
  }
  .marriage-ring_title-section_lead h3::before {
    bottom: 27px;
    right: -53px;
    padding: 20%;
  }
}
/*venue
////////////////////////////////////*/
.venue {
  margin: 10% auto 0 auto;
  max-width: 1040px;
  padding: 0 5%;
}
.venue_title-section_lead h3 {
  position: relative;
}
.venue_title-section_lead h3::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  border-top: 1px solid #333333;
  bottom: 24px;
}
.venue_title-section_lead h3::before {
  content: '';
  display: block;
  position: absolute;
  background-image: url(../img/04_venue/venue_title.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  padding: 35%;
  top: 37px;
  right: -80px;
}
.venue h4 span {
  transform: translateY(-8px);
}
.venue_title-section_lead h4 {
  position: relative;
  font-size: clamp(2rem, 1.167rem + 1.07vw, 2.5rem);
  padding-bottom: 80px;
}
.venue_title-section_lead h4::after {
  content: '';
  display: block;
  position: absolute;
  border-left: 1px solid #333333;
  width: 0;
  height: 50px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.venue_sec {
  display: flex;
  align-items: flex-start;
  flex-flow: row-reverse;
  justify-content: space-between;
  margin-top: 10%;
}
.venue_title-section_photo {
  width: 50%;
}
.venue_title-section_photo img {
  width: 100%;
}
.venue_title-section_text {
  width: 50%;
  padding-right: 50px;
  text-align: justify;
}
.venue_title-section_text p {
  padding-bottom: 40px;
}
.venue_title-section_text a {
  background-color: #8D7438;
  display: inline-block;
  width: 300px;
  text-align: center;
  transition: all 0.5s 0.2s ease-in-out;
}
.venue_button {
  color: #ffffff;
  transform: translateX(-10px);
  padding: 20px 0;
}
@media screen and (max-width:960px) {
  .venue_sec {
    display: block;
  }
  .venue_title-section_photo {
    width: 90%;
    margin: 0 auto;
  }
  .venue_title-section_photo img {
    width: 100%;
  }
  .venue_title-section_lead h3 {
    padding-bottom: 12px;
  }
  .venue_title-section_text {
    width: 90%;
    padding-right: 0px;
    text-align: center;
    margin: 0 auto;
  }
  .venue_title-section_text p {
    padding: 10% 0 5% 0;
    font-size: 1.4rem;
  }
  .venue_title-section_lead h3::before {
    top: 14px;
    right: -66px;
  }
}
@media screen and (max-width:768px) {
  .venue_title-section_lead h4 {
    font-size: 1.8rem;
  }
  .venue_title-section_lead h3::before {
        top: 23px;
        right: -43px;
  }
}
/*footer
////////////////////////////////////*/
.foooter-slider {
  margin: 10% 0;
}
.foooter-slider-img {
  width: 90% !important;
}
.foooter-slider-img img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .foooter-slider-img {
    width: 90% !important;
    margin-right: 20px;
  }
  .foooter-slider {
    margin: 15% 0;
  }
}
/*advertisement
////////////////////////////////////*/
.advertisement01 {
  margin: 10% auto;
  width: 700px;
}
.advertisement01 img {
  width: 100%;
}
@media screen and (max-width:960px) {
  .advertisement01 {
    margin: 10% auto;
    width: 90%;
  }
}