@charset "UTF-8";
/* CSS Document */
/*
blog 73d3f2
YouTube F03
Facebook 0866ff
Instagram
background: linear-gradient(135deg, #fed94e 0%, #f66e58 31.8%, #eb48a4 72.6%, #a25ff0 100%);

メール #0098d8
WEB　--default--blue
LINE背景#00b300（LINEカラーと区別する;旧LINEカラー#00b900よりは現行と区別がつく）
LINE#06c755;
*/
.site-main {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  --male--color: #0071bc;
  --female--color: #c9007a;
}

.entry-header {
  width: 100vw;
  margin-right: auto;
  margin-left: auto;
  padding-right: 5vw;
  padding-left: 5vw;
}
@media only screen and (min-width: 768px) {
  .entry-header {
    width: 1080px;
    padding-right: 20px;
    padding-left: 20px;
  }
}

.section-body {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}
@media only screen and (min-width: 768px) {
  .section-body {
    font-size: 18px;
  }
}

.social-media-sections .section-body {
  padding-top: clamp(50px, 12.5vw, 100px);
  padding-bottom: clamp(50px, 12.5vw, 100px);
}
.social-media-outer {
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) {
  .social-media-outer {
    margin-bottom: 100px;
  }
}

.social-media-top {
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.social-media-top > img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 70% center;
  object-position: 70% center;
  aspect-ratio: 5/3;
}
.social-media-top.web-information-top > img {
  opacity: 0.5;
  -o-object-position: 80% center;
  object-position: 80% center;
}
.social-media-top-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  background-color: transparent;
  color: #fff;
  fill: #fff;
}
.social-media-top-inner,
.social-media-top-inner * {
  border-color: #fff;
}
.social-media-top.web-information-top .social-media-top-inner {
  background-color: transparent;
  color: #000;
  fill: #000;
}
.social-media-top.web-information-top .social-media-top-inner,
.social-media-top.web-information-top .social-media-top-inner * {
  border-color: #000;
}
@media not screen, (max-width: 767px) {
  .social-media-top {
    visibility: hidden;
    height: 0;
  }
}
@media only screen and (min-width: 768px) {
  .social-media-top {
    height: 300px;
  }
  .social-media-top > img {
    height: 300px;
    -o-object-position: center;
    object-position: center;
    aspect-ratio: unset;
  }
}
@media only screen and (min-width: 2000px) {
  .social-media-top {
    height: auto;
  }
  .social-media-top > img {
    height: auto;
    aspect-ratio: 20/3;
  }
}
.social-media-title {
  font-size: clamp(20px, calc(3vw + 8px), 32px);
  font-weight: bold;
  text-align: center;
  line-height: 1.75em;
}
.social-media-banners-outer {
  margin-top: clamp(100px, 25vw, 200px);
  margin-bottom: clamp(100px, 25vw, 200px);
}
.social-media-banners {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5vw;
}
@media not screen, (max-width: 767px) {
  .social-media-banners-outer {
    margin-top: 2.5vw;
  }
}
@media only screen and (min-width: 768px) {
  .social-media-banners {
    gap: 70px 40px;
  }
}
.social-media-banner {
  position: relative;
  background-color: #000;
  color: #fff;
  fill: #fff;
}
.social-media-banner,
.social-media-banner * {
  border-color: #fff;
}
.social-media-banner {
  width: calc(50% - 2.5vw);
  padding: 6vw 2.5vw 4vw;
  text-align: center;
  aspect-ratio: 1/1;
}
.social-media-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 5vw;
}
.social-media-banner.web-information-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 4vw;
}
.social-media-banner.web-information-banner .social-media-banner-inner {
  row-gap: 2vw;
}
.social-media-banner .icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  width: 15vw;
  height: 15vw;
  margin-right: 2.5vw;
  margin-left: 2.5vw;
  opacity: 0.7;
}
.social-media-banner.web-information-banner .icon {
  opacity: 1;
}
.social-media-banner.blog {
  background-color: #73d3f2;
}
.social-media-banner.blog .icon {
  --male--color: #fff;
  --female--color: #fff;
}
.social-media-banner.blog-it-aisai {
  background-color: #73d3f2;
  --it-aisai--cyan: #fff;
  --it-aisai--blue: #fff;
}
.social-media-banner.youtube {
  background-color: #ff0033;
}
.social-media-banner.x-twitter {
  background-color: #000;
}
.social-media-banner.facebook {
  background-color: #0866ff;
}
.social-media-banner.instagram {
  background: linear-gradient(135deg, #fed94e 0%, #f66e58 31.8%, #eb48a4 72.6%, #a25ff0 100%);
}
.social-media-banner.email {
  background-color: #0098d8;
}
.social-media-banner.email a {
  cursor: inherit;
  pointer-events: inherit;
}
.social-media-banner.web-contact {
  background-color: #0071bc;
}
.social-media-banner.line {
  background-color: #00b300;
}
.social-media-banner.line.positive {
  background-color: #fff;
  color: #06c755;
  fill: #06c755;
}
.social-media-banner.line.positive,
.social-media-banner.line.positive * {
  border-color: #06c755;
}
.social-media-banner.line.positive {
  border: 2px solid;
}
.social-media-banner.line:not(.positive) .icon {
  opacity: 1;
}
.social-media-banner-subtitle {
  font-size: clamp(12px, calc(2vw + 4px), 20px);
  font-weight: bold;
  text-align: center;
  line-height: 1.75em;
}
.social-media-banner-title {
  font-size: clamp(20px, calc(3vw + 8px), 32px);
  font-weight: bold;
  text-align: center;
  line-height: 1.5em;
}
.social-media-banner-title-outer:has(.social-media-banner-title) {
  margin-top: -0.25em;
}
.social-media-banner-link {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.social-media-banner-link:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
@media only screen and (min-width: 768px) {
  .social-media-banner {
    width: 320px;
    padding: 72px 40px 36px;
  }
  .social-media-banner-inner {
    row-gap: 30px;
  }
  .social-media-banner.web-information-banner {
    padding-top: 36px;
  }
  .social-media-banner.web-information-banner .social-media-banner-inner {
    row-gap: 15px;
  }
  .social-media-banner .icon {
    width: 100px;
    height: 100px;
    margin-right: 40px;
    margin-left: 40px;
  }
}