@charset "UTF-8";

/*------------------------------
トップ
------------------------------*/
/* mainvisual */
.mainVisual {
  position: relative;
  width: 100%;
  height: 70vh;
  height: 70svh;
}
@media (width < 768px) {
  .mainVisual {
    top: min(15vw, 80px);
  }
}

.mainVisual-logo {
  position: absolute;
  top: 20px;
  left: 20px;
}
@media (width <= 480px) {
  .mainVisual-logo {
    display: none;
  }
}

.swiper {
  width: 100%;
  height: 70vh;
  height: 70svh;
}

.mainVisual-image {
  width: 100%;
  height: 70vh;
  height: 70svh;
  aspect-ratio: 1920 / 1275;
  object-fit: cover;
}

.catch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(75%, 800px);
}

.catch-balloon {
  position: absolute;
  z-index: 1;
  top: -30%;
  left: -10%;
  width: min(55%, 240px);
  opacity: 0;
}
@media (width < 900px) {
  .catch-balloon {
    top: -40%;
  }
}
@media (width < 768px) {
  .catch-balloon {
    top: -50%;
  }
}

.catch-balloon-image {
  width: 100%;
  aspect-ratio: 240 / 196;
  object-fit: cover;
}

.catch-inner {
  position: relative;
  padding-top: min(8vw, 50px);
  padding-right: min(5vw, 20px);
  padding-bottom: min(8vw, 50px);
  padding-left: min(5vw, 20px);
  background-color: rgba(255, 255, 255, .5);
}

/* .catch-inner::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .4);
} */

.catch-inner-main {
  font-family: 'AzukiB';
  font-weight: bold;
  font-size: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem);
  text-align: center;
  color: #32CD32;
}

.catch-inner-main-large {
  font-family: 'AzukiB';
  font-weight: bold;
  font-size: clamp(1.75rem, 0.568rem + 5.91vw, 5rem);
}

.catch-inner-sub {
  font-family: 'GenJyuuGothicX-Heavy';
  font-weight: 900;
  font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
  text-align: center;
}

.catch-inner-sub-text {
  font-family: 'AzukiB';
  font-weight: bold;
}

.catch-board {
  position: absolute;
  right: -5%;
  bottom: -30%;
  width: min(55%, 200px);
}
@media (width < 768px) {
  .catch-board {
    right: -10%;
    bottom: -40%;
  }
}

.catch-board-image {
  width: 100%;
  aspect-ratio: 200 / 150;
  object-fit: cover;
}

.lead {
  position: absolute;
  top: 0;
  right: 0;
  font-size: clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem);
  color: #FFF;
}

/* news */
/* .news {
  margin-top: min(20vw, 30px);
} */

.newsList-item {
  position: relative;
  display: block;
  border-top: 1px dotted #47230A;
}

.newsList-item::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: min(10vw, 16px);
  transform: translateY(-50%);
  width: min(20vw, 32px);
  aspect-ratio: 2 / 1;
  clip-path: polygon(0 40%, 60% 40%, 60% 0%, 100% 50%, 60% 100%, 60% 60%, 0 60%);
  background-color: currentColor;

  transition-property: transform;
  transition-duration: .3s;
}

.newsList-item:hover::after {
  transform: translate(min(10vw, 16px), -50%);
}

.newsList-item:first-of-type {
  border-top: none;
}

.newsList-itemLink {
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-right: min(32vw, 48px);
  padding-bottom: 20px;
  text-decoration: none;
}
@media (width <= 480px) {
  .newsList-itemLink {
    display: block;
  }
}

.newsList-itemLink:hover {
  text-decoration: underline;
}

.newsList-itemLink-date {
  width: min(100%, 280px);
  padding-left: min(16vw, 32px);
}
@media (width <= 480px) {
  .newsList-itemLink-date {
    padding-left: 0;
  }
}

.newsList-itemLink-title {
  width: min(100%, 620px);
  margin-top: 5px;
  padding-left: min(16vw, 32px);
}


/* vision */
.vision {
  position: relative;
  z-index: 1;
  background-image: url(../images/top/top-vision-bg01.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #FFF;
}

.vision::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(0, 128, 0, .7), rgba(50, 205, 50, .7));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.vision-heading {
  text-align: center;
}

.vision-heading-en,
.vision-heading-ja {
  color: #FFF;
}

.vision-inner-body {
  margin-top: 1em;
}

.vision-inner-body-title {
  font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
  text-align: center;
}

.vision-inner-body-excerpt {
  margin-top: 1em;
  text-align: center;
}
@media (width <= 480px) {
  .vision-inner-body-excerpt {
    text-align: left;
  }
}


/* greeting */
.greeting-area {
  display: flex;
  justify-content: space-between;
}
@media (width < 768px) {
  .greeting-area {
    display: block;
  }
}

.greeting-image {
  width: min(45%, 480px);
  margin-right: auto;
  transform: rotate(-5deg);
}
@media (width < 768px) {
  .greeting-image {
    width: min(100%, 480px);
    margin-left: auto;
    transform: none;
  }
}

.greeting-image-item {
  width: 100%;
  aspect-ratio: 760 / 800;
  object-fit: cover;
}

.greeting-body {
  width: min(50%, 550px);
}
@media (width < 768px) {
  .greeting-body {
    width: min(100%, 550px);
    margin-top: 2em;
  }
}

.greeting-body-inner {
  margin-top: 1em;
}

.greeting-body-inner-title {
  font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
}

.greeting-body-inner-excerpt {
  margin-top: 1em;
}

.greeting-name {
  margin-top: 1em;
  text-align: right;
}

.greeting-name-title {
  margin-right: 1em;
}

.greeting-name-body {
  font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
}


/* question */
.question-heading {
  text-align: center;
}

.question-body {
  position: relative;
  width: min(100%, 800px);
  /* margin-top: min(8vw, 50px); */
  margin-right: auto;
  margin-left: auto;
}
@media (width < 768px) {
  .question-body {
    grid-area: 1 / 1 / span 1 / span 2;
    margin-bottom: min(8vw, 50px);
  }
}

.question-gradation {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  background-image: linear-gradient(45deg, #FFFF00, #FFDF33);
  border-radius: 5px;
}

.question-gradation-inner {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  border-radius: 5px;
  background-color: #FFF;
}

.question-border {
  padding-top: min(5vw, 50px);
  padding-right: min(3vw, 30px);
  padding-bottom: min(5vw, 50px);
  padding-left: min(3vw, 30px);
  border: 5px dotted #FFDF33;
  /* border-radius: 5px;
  background-color: #FFF; */
}

.question-list-item {
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  padding-left: 2em;
  text-indent: -2em;
  border-bottom: 1px dotted #47230A;
}

.question-list-top {
  position: absolute;
  top: 0;
  right: 0;
  width: min(50%, 200px);
  aspect-ratio: 413 / 464;
  object-fit: cover;
  opacity: 0.2;
}

.question-list-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: min(50%, 200px);
  aspect-ratio: 660 / 790;
  object-fit: cover;
  opacity: 0.2;
}

.question-column {
  /* display: flex;
  justify-content: space-between;
  width: min(100%, 800px); */
  display: grid;
  justify-content: space-between;
  grid-template-columns: 24% 50% 24%;
  margin-top: min(8vw, 50px);
  margin-right: auto;
  margin-left: auto;
}
@media (width < 768px) {
  .question-column {
      grid-template-columns: 49% 49%;
  }
}
@media (width <= 480px) {
  .question-column {
    display: block;
  }
}

.question-image {
  width: min(100%, 240px);
}

.question-image-inner {
  width: 100%;
  aspect-ratio: 444 / 685;
  object-fit: cover;
}

.question-left {
  margin-top: auto;
}
@media (width < 768px) {
  .question-left {
    grid-area: 2 / 1 / span 1 / span 1;
  }
}
@media (width <= 480px) {
  .question-left {
    display: none;
  }
}

.question-right {
  margin-top: auto;
}
@media (width < 768px) {
  .question-right {
    grid-area: 2 / 2 / span 1 / span 1;
  }
}
@media (width <= 480px) {
  .question-right {
    margin-right: auto;
    margin-left: auto;
  }
}


/* faq */
.faq-button {
  margin-top: 4em;
}


/*------------------------------
家族会紹介
------------------------------*/
.navigation-about {
  position: relative;
  height: min(16vw, 72px);
}

.navigation-about:hover {
  box-shadow: none;
}

.navigation-about-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.about-content-top {
  position: relative;
  margin-top: min(8vw, 50px);
}

.about-content-top::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: min(15%, 150px);
  aspect-ratio: 721 / 730;
  object-fit: cover;
  background-image: url(../images/about/about-policy-bg01.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-content-bottom {
  position: relative;
  margin-top: min(8vw, 50px);
}

.about-content-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(15%, 150px);
  aspect-ratio: 1197 / 1084;
  object-fit: cover;
  background-image: url(../images/about/about-policy-bg02.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (width < 768px) {
  .about-content-top::before,
  .about-content-bottom::after {
    display: none;
  }
}

/* .about-image {
  margin-top: 1em;
}

.about-image-left {
  width: min(35%, 500px);
  aspect-ratio: 1000 / 800;
  object-fit: cover;
  margin-right: auto;
}

.about-image-right {
  width: min(35%, 500px);
  aspect-ratio: 541 / 418;
  object-fit: cover;
  margin-left: auto;
} */

.about-content-image {
  width: min(100%, 400px);
  margin-right: auto;
  margin-left: auto;
}

.float-odd {
  float: left;
  /* transform: rotate(-5deg); */
  /* margin-right: min(3vw, 30px); */
}

.float-even {
  float: right;
  /* transform: rotate(5deg); */
  /* margin-left: min(3vw, 30px); */
}

@media (width < 768px) {
  .float-odd,
  .float-even {
    float: none;
    /* transform: rotate(0deg); */
  }
}

.about-content-image-top {
  width: 100%;
  aspect-ratio: 1000 / 800;
  object-fit: cover;
}

.about-content-image-bottom {
  width: 100%;
  aspect-ratio: 541 / 418;
  object-fit: cover;
}

.about-content-first {
  padding-top: min(8vw, 60px);
  padding-right: min(8vw, 60px);
  /* padding-bottom: min(16vw, 100px); */
  padding-left: min(8vw, 60px);
}

.about-content-second {
  /* padding-top: min(8vw, 50px); */
  padding-right: min(8vw, 60px);
  padding-bottom: min(8vw, 60px);
  padding-left: min(8vw, 60px);
}
@media (width < 768px) {
  .about-content-first,
  .about-content-second {
    padding: 0;
  }
}


.information {
  width: min(100%, 800px);
  margin-top: min(3vw, 30px);
  margin-right: auto;
  margin-left: auto;
}

.information > * + * {
  border-top: 1px dotted #47230A;
}

.information-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}

.information-item-term {
  width: min(33%, 240px);
  padding-left: 1em;
}

.information-item-description {
  width: min(67%, 560px);
  padding-left: 1em;
}


/*------------------------------
アクセス
------------------------------*/
.map {
  width: min(100%, 800px);
  aspect-ratio: 4 / 3;
  margin-top: min(3vw, 30px);
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.map-inner {
  width: 100%;
  height: 100%;
}

.access-item {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  justify-content: center;
  gap: 20px;
  margin: min(8vw, 50px) auto;
}

.access-image {
  width: 100%;
  margin: 0 auto;
}

.access-image-inner {
  width: 100%;
  aspect-ratio: 480 / 360;
  object-fit: cover;
}



/*------------------------------
お知らせ
------------------------------*/
.blog-column {
  display: flex;
  justify-content: space-between;
  padding-top: min(70vw, 100px);
  padding-bottom: min(70vw, 100px);
}
@media (width < 768px) {
  .blog-column {
    display: block;
  }
}

.blog-column-content {
  width: min(65%, 650px);
}
@media (width < 768px) {
  .blog-column-content {
    width: 100%;
  }
}

.article {
  margin-bottom: min(3vw, 30px);

}

.article-date {
  display: inline-block;
  background-color: #FFDF33;
}

.article-date-inner {
  display: inline-block;
  padding: 6px 20px;
  font-weight: bold;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #47230A;
}

.article-body {
  padding-top: 1em;
}

.article-body-title {
  font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
}

.article-body-excerpt {
  padding-top: 0.5em;
  padding-bottom: min(3vw, 30px);
  border-bottom: 1px dotted #47230A;
}


/*------------------------------
個別記事
------------------------------*/
.single-body {
  padding-top: 1.5em;
}

.single-body-title {
  font-size: clamp(1.75rem, 1.477rem + 1.36vw, 2.5rem);
}

.single-body-content {
  padding-top: 0.75em;
}