@charset "UTF-8";
/* CSS Document */

/* --- 共通 --- */

.section_spacing {
  max-width: calc(1760px + (56px * 2));
  margin: 0 auto;
  padding: 0 56px;
  box-sizing: border-box;
}

/* Topページ
============================== */

/* --- #fv --- */

#fv {
  padding: 48px 0 0;
}
/* 名前・学校名 */
.title {
  margin-bottom: 40px;
}
.title h1,
.title p {
  font-weight: 500; /* medium */
}
.title h1 {
  font-size: 320px;
  line-height: 0.8;
  letter-spacing: -4%;
  margin: 0 0 24px -24px;
}
.title p {
  font-size: 20px;
  line-height: 1.4;
}
/* スライダー */
.slider {
  width: 100%;
  overflow: hidden;
}
.slider li {
  max-width: 900px;
  margin: 0 24px 0 0;
}
.slick-track {
  display: flex !important;
  align-items: center;
}
.slider-thumb,
.work-list_thumb {
  overflow: hidden;
}
/* hoverアニメーション */
.slider-thumb img,
.work-list_thumb img {
  transition: 
    transform .3s,
    filter .3s;
}
.slider li:hover .slider-thumb img,
.works-list li:hover .work-list_thumb img {
  transform: scale(1.05);
  filter: brightness(75%);
}

/* --- #profile --- */

#profile,
#contact {
  padding-block: 80px;
}
#profile,
.contact_inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.1vw, 40px);
}
/* 左側 */
.top-page h2,
.prof-content {
  grid-column: 1
}
.top-page h2 {
  font-size: 32px;
  letter-spacing: -2%;
}
.top-page h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: #262626;
  margin: 4px 0 0;
}
#profile h2 {
  margin: 0 0 200px;
}
.name,
.links-list li a {
  font-weight: 500; /* medium */
}
.name,
.prof-skills {
  margin: 0 0 40px;
}
.name {
  font-size: 96px;
  line-height: 0.8;
  letter-spacing: -2%;
}
.name span {
  font-size: 16px;
  line-height: 1;
  padding: 16px 0 0;
}
/* 自己紹介文 */
.prof-txt,
.prof-skills {
  line-height: 1.5;
}
.prof-txt {
  margin: 0 0 16px;
}
/* 各種リンク */
.links-list {
  display: flex;
  gap: 0 12px;
}
.links-list li {
  position: relative;
}
.links-list li::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #262626;
}
.links-list li a {
  width: max-content;
  padding: 0 0 0 14px;
}
/* hoverアニメーション */
.links-list li a::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(#000, #000) bottom right / 0 1px no-repeat;
  transition: background-size 0.3s;
  margin: 2px 0 0;
}
.links-list li a:hover::after {
  background-position: bottom left; /* 下線のホバー時位置 */
  background-size: 100% 1px; /* 下線の横幅を100%にする */
}
/* 右側 */
.prof-img {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background: url("../images/top/profile.png") center 60% / 180% no-repeat;
}

/* --- #contact --- */

#contact {
  background: #E6E6E6;
}
.contact_inner a {
  grid-column: 2 / 4;
  width: max-content;
  font-size: min(calc(1vw * calc(50 / 12.80)), 56px);
  letter-spacing: -2%;
  transition: .3s;
}
.contact_inner a:hover {
  color: #E52E7A;
}


/* Worksページ 
============================== */

#works {
  padding-top: 48px;
  padding-bottom: 80px;
}
.subpage-title {
  font-size: 240px;
  letter-spacing: -4%;
  font-weight: 500; /* medium */
  margin: 0 0 40px;
}
.works-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.1vw, 40px);
}
.work-list_thumb {
  margin: 0 0 8px;
}
.work-list_label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.work-list_category {
  color: #8E8E8E;
}

/* Detailページ 
============================== */

.detail-page main {
  margin: 0 0 80px;
}

/* --- #work-hero --- */

#work-hero,
#work-info,
#work-gallery,
.gallery-row,
.gallery-grid,
#work-gallery > .work-img:not(:last-of-type),
#work-gallery > .work-img:has(~ .gallery-row) {
  margin-bottom: 40px;
}
#work-hero {
  padding: 56px 0 80px 0;
}
.work-hero_inner {
  width: 100%;
}
/* 作品タイトル */
.work-title {
  font-size: 64px;
  font-weight: 500; /* medium */
  color: #F7F7F7;
  margin: 0 0 40px;
}
.business-card .work-title,
.Hokkaido-tour .work-title,
.leaflet .work-title {
  color: #262626;
}
.work-title span {
  font-size: 20px;
  font-weight: 400;
  opacity: .6;
  padding: 16px 0 0;
}
/* 作品画像 */
.work-hero_row,
.gallery-row {
  display: flex;
  gap: clamp(20px, 2.1vw, 40px);
  margin-inline: auto;
}
.work-hero_row {
  align-items: center;
}
.work-hero_item {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

/* --- #work-gallery --- */

.gallery-row .work-img {
  margin: 0;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.1vw, 40px);
}

/* --- #work-info --- */

#work-info {
  max-width: calc(1200px + (56px * 2));
}
.work-info_meta {
  display: flex;
  margin: 0 0 24px;
}
.work-info_meta .work-info_item:not(:last-of-type) {
  margin: 0 24px 0 0;
}
.work-info_item dt {
  font-weight: 500; /* medium */
  margin: 0 0 8px;
}
.work-info_item dd {
  text-align: justify;
  line-height: 1.5;
}
.work-info_item dd span {
  padding: 12px 0 4px;
}

/* --- .back-btn --- */

.back-btn_inner {
  width: max-content;
}
.back-btn_inner a {
  display: flex;
  align-items: center;
  gap: 16px;
}
.arrow-box {
  position: relative;
  width: 56px;
  height: 32px;
  background: #262626;
  border: #262626 2px solid;
  border-radius: 99px;
  box-sizing: border-box;
}
/* 矢印 */
.arrow-box::before,
.arrow-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  transition: left .3s;
}
.arrow-box::before {
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 10px;
  height: 10px;
  border-top: #F7F7F7 2px solid;
  border-left: #F7F7F7 2px solid;
}
.arrow-box::after {
  transform: translate(-50%, -50%);
  width: 15px;
  height: 1.5px;
  background: #F7F7F7;
}
/* テキスト */
.back-btn_inner span {
  font-size: 20px;
}
/* hoverアニメーション */
.back-btn_inner:hover a .arrow-box {
  background: #F7F7F7;
}
.back-btn_inner:hover a .arrow-box::before,
.back-btn_inner:hover a .arrow-box::after {
  left: calc(50% - 4px);
}

/* mogfit
--------------------------------- */
.mogfit #work-hero,
.mogfit .back-btn_inner:hover a .arrow-box::after {
  background: #329C49;
}
.mogfit .back-btn_inner:hover a .arrow-box,
.mogfit .back-btn_inner:hover a .arrow-box::before {
  border-color: #329C49;
}
.mogfit .work-info_item dt,
.mogfit .back-btn_inner:hover span {
  color: #329C49;
}

/* 名刺
--------------------------------- */
.business-card .work-title {
  margin: 0;
}
.business-card .work-hero_item {
  max-width: 1000px;
}
.business-card #work-hero {
  background: #F3DCE3;
}
.business-card .back-btn_inner:hover a .arrow-box::after {
  background: #B83566;
}
.business-card .back-btn_inner:hover a .arrow-box,
.business-card .back-btn_inner:hover a .arrow-box::before {
  border-color: #B83566;
}
.business-card .work-info_item dt,
.business-card .back-btn_inner:hover span {
  color: #B83566;
}

/* サテライトテニススクール
--------------------------------- */
.tennis-school #work-hero {
  background: linear-gradient(60deg, #0536E8 0%, #5BB563 50%, #E5FF00 100%);
}
.tennis-school .work-hero_item,
.Hikari-kindy .work-hero_item {
  max-width: 1400px;
}
.tennis-school .back-btn_inner:hover a .arrow-box,
.tennis-school .back-btn_inner:hover a .arrow-box::before {
  border-color: #0536E8;
}
.tennis-school .back-btn_inner:hover a .arrow-box::after {
  background: #0536E8;
}
.tennis-school .work-info_item dt,
.tennis-school .back-btn_inner:hover span {
  color: #0536E8
}

/* ひかり幼稚園
--------------------------------- */
.Hikari-kindy #work-hero {
  background: #F8A933;
}
.Hikari-kindy .back-btn_inner:hover a .arrow-box,
.Hikari-kindy .back-btn_inner:hover a .arrow-box::before {
  border-color: #F79A0F;
}
.Hikari-kindy .back-btn_inner:hover a .arrow-box::after {
  background: #F79A0F;
}
.Hikari-kindy .work-info_item dt,
.Hikari-kindy .back-btn_inner:hover span {
  color: #F79A0F;
}

/* 空泉乃湯
--------------------------------- */
.kusenno-yu #work-hero {
  background: #B53C24;
}
.kusenno-yu .back-btn_inner:hover a .arrow-box,
.kusenno-yu .back-btn_inner:hover a .arrow-box::before {
  border-color: #B53C24;
}
.kusenno-yu .back-btn_inner:hover a .arrow-box::after {
  background: #B53C24;
}
.kusenno-yu .work-info_item dt,
.kusenno-yu .back-btn_inner:hover span {
  color: #B53C24;
}

/* 北海道ツアー
--------------------------------- */
.Hokkaido-tour #work-hero {
  background: #B4CFF2;
}
.Hokkaido-tour .work-hero_item {
  max-width: 1200px;
}
.Hokkaido-tour .back-btn_inner:hover a .arrow-box,
.Hokkaido-tour .back-btn_inner:hover a .arrow-box::before {
  border-color: #004E99;
}
.Hokkaido-tour .back-btn_inner:hover a .arrow-box::after {
  background: #004E99;
}
.Hokkaido-tour .work-info_item dt,
.Hokkaido-tour .back-btn_inner:hover span {
  color: #004E99;
}

/* ルノワール展
--------------------------------- */ 
.Renoir-exhib #work-hero {
  background: #1F3E59;
}
.Renoir-exhib .work-hero_item {
  width: 40%;
}
.Renoir-exhib .gallery-row:nth-of-type(2) {
  max-width: 800px;
  margin-inline: auto;
}
.Renoir-exhib .back-btn_inner:hover a .arrow-box,
.Renoir-exhib .back-btn_inner:hover a .arrow-box::before {
  border-color: #1F3E59;
}
.Renoir-exhib .back-btn_inner:hover a .arrow-box::after {
  background: #1F3E59;
}
.Renoir-exhib .work-info_item dt,
.Renoir-exhib .back-btn_inner:hover span {
  color: #1F3E59;
}

/* CHIBA de RUN
--------------------------------- */ 
.dogrun .work-hero_row {
  max-width: 1280px;
}
.dogrun .work-hero_item:first-of-type {
  width: 40%;
}
.dogrun .work-hero_item:last-of-type {
  width: 60%;
  border: #F7F7F7 2px solid;
}
.dogrun #work-hero {
  background: #E67539;
}
.dogrun .back-btn_inner:hover a .arrow-box,
.dogrun .back-btn_inner:hover a .arrow-box::before {
  border-color: #E67539;
}
.dogrun .back-btn_inner:hover a .arrow-box::after {
  background: #E67539;
}
.dogrun .work-info_item dt,
.dogrun .back-btn_inner:hover span {
  color: #E67539;
}

/* リーフレット
--------------------------------- */ 
.leaflet #work-hero {
  background: #D3E1ED;
}
.leaflet .work-title {
  margin: 0;
}
.leaflet .work-hero_item {
  width: 60%;
}
.leaflet .back-btn_inner:hover a .arrow-box::after { 
  background: #5682BF;
}
.leaflet .back-btn_inner:hover a .arrow-box,
.leaflet .back-btn_inner:hover a .arrow-box::before {
  border-color: #5682BF;
}
.leaflet .work-info_item dt,
.leaflet .back-btn_inner:hover span {
  color: #5682BF;
}

/* ▽▽▽ ~1280px ▽▽▽ */

@media screen and (max-width:1280px) {

  /* --- 共通 --- */

  .section_spacing {
    padding: 0 4%;
  }

  /* Topページ
  ============================== */

  /* --- #fv --- */

  #fv {
    padding: 4% 0 0;
  }
  /* 名前・学校名 */
  .title {
    margin-bottom: 3%;
  }
  .title h1 {
    font-size: min(calc(1vw * calc(200 / 10.24)), 320px);
    margin: 0 0 2% -1.5%;
  }
  .title p {
    font-size: 16px;
  }
  /* スライダー */
  .slider li {
    margin: 0 .2% 0 0;
  }

  /* --- #profile --- */

  #profile,
  #contact {
    padding-block: 6%;
  }
  /* 左側 */
  #profile h2 {
    margin: 0 0 40%;
  }
  .name,
  .prof-skills {
    margin: 0 0 10%;
  }
  .name {
    font-size: min(calc(1vw * calc(80 / 10.24)), 96px);
  }
  .name span {
    padding: 4% 0 0;
  }
  /* 自己紹介文 */
  .prof-txt {
    margin: 0 0 4%;
  }
  .prof-txt br {
    display: none;
  }

  /* --- contact --- */

  .contact_inner a {
    font-size: min(calc(1vw * calc(36 / 10.24)), 50px);
  }


  /* Worksページ
  ============================== */

  #works {
    padding-top: 4%;
    padding-bottom: 6%;
  }
  .subpage-title {
    font-size: 200px;
    margin: 0 0 2%;
  }
  .works-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Detailページ 
  ============================== */

  .detail-page main {
    margin: 0 0 6%;
  }

  /* --- #work-hero --- */

  #work-hero, 
  #work-info, 
  #work-gallery, 
  .gallery-row,
  .gallery-grid,
  #work-gallery > .work-img:not(:last-of-type),
  #work-gallery > .work-img:has(~ .gallery-row) {
    margin-bottom: 3%;
  }
  #work-hero {
    padding: 3% 0;
  }
  /* 作品タイトル */
  .work-title {
    font-size: 48px;
    margin: 0 0 2%;
  }
  .work-title span {
    padding: 1% 0 0;
  }

  /* --- #work-info --- */

  .work-info_meta {
    display: block;
  }
  .work-info_meta,
  .work-info_meta .work-info_item:not(:last-of-type) {
    margin: 0 0 2%;
  }
  .work-info_item dt {
    margin: 0 0 1%;
  }

  /* CHIBA de RUN
  --------------------------------- */ 
  .dogrun .work-hero_row {
    max-width: 1000px;
  }

  /* CDリーフレット
  --------------------------------- */
  .leaflet .work-hero_item {
    width: 70%;
  }  

}

/* ▽▽▽ ~1024px ▽▽▽ */

@media screen and (max-width:1024px) {

  /* Topページ
  ============================== */

  /* --- #profile --- */

  #profile,
  .contact_inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* 左側 */
  .top-page h2 {
    font-size: min(calc(1vw * calc(24 / 7.68)), 32px);
  }
  #profile h2,
  .prof-content {
    grid-column: 1 / 3
  }
  #profile h2 {
    margin: 0 0 20%;
  }
  .name, 
  .prof-skills {
    margin: 0 0 6%;
  }
  .name {
    font-size: min(calc(1vw * calc(88 / 7.68)), 96px);
  }
  .name span {
    padding: 3% 0 0;
  }
  /* 自己紹介文 */
  .prof-txt {
    margin: 0 0 3%;
  }
  /* 右側 */
  .prof-img {
    grid-column: 3 / 5;
    background-position: 43% center;
    background-size: cover;
  }

  /* --- contact --- */

  .contact_inner a {
    grid-column: 2 / 5;
    font-size: min(calc(1vw * calc(32 / 7.68)), 44px);
  }

  /* Detailページ
  ============================== */

  /* --- #work-hero --- */

  #work-hero, 
  #work-info, 
  #work-gallery, 
  .gallery-row,
  .gallery-grid,
  #work-gallery > .work-img:not(:last-of-type),
  #work-gallery > .work-img:has(~ .gallery-row) {
    margin-bottom: 4%;
  }
  #work-hero {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    padding: 0;
  }
  .work-title span {
    font-size: 16px;
    padding: 2% 0 0;
  }

  /* --- #work-info --- */

  .work-info_meta,
  .work-info_meta .work-info_item:not(:last-of-type) {
    margin: 0 0 2%;
  }

  /* 名刺
  --------------------------------- */
  .business-card .work-hero_item {
    max-width: 800px;
  }

  /* CDリーフレット
  --------------------------------- */
  .leaflet .work-hero_item {
    width: 80%;
  }

}

/* ▽▽▽ ~768px ▽▽▽ */

@media screen and (max-width:768px) {

  /* Topページ
  ============================== */

  /* --- #fv --- */

  #fv {
    padding: 14% 0 0;
  }
  .title {
    margin-bottom: 5%;
  }
  /* スライダー */
  .slider-bottom li {
    transform: translateX(-50%) !important;
  }

  /* --- #profile --- */

  #profile, #contact {
    padding-block: 8%;
  }
  #profile, 
  .contact_inner {
    display: block;
  }
  .top-page h2 {
    font-size: min(calc(1vw * calc(20 / 3.90)), 24px);
  }
  .top-page h2::after {
    width: 40px;
  }
  #profile h2,
  .prof-img {
    margin: 0 0 6%;
  }
  .prof-img {
    aspect-ratio: 5 / 3;
  }
  .name {
    font-size: min(calc(1vw * calc(64 / 3.90)), 88px);
  }
  .prof-txt br {
    display: block;
  }

  /* --- #contact --- */

  .contact_inner h2 {
    margin: 0 0 3%;
  }
  .contact_inner a {
    font-size: min(calc(1vw * calc(22 / 3.90)), 32px);
  }


  /* Worksページ
  ============================== */

  #works {
    padding-top: 14%;
  }
  .subpage-title,
  .works-list li:not(:last-of-type) {
    margin: 0 0 4%;
  }
  .subpage-title {
    font-size: min(calc(1vw * calc(72 / 3.90)), 200px);
  }
  .works-list {
    display: block;
  }

  /* Detailページ
  ============================== */

  .detail-page main {
    margin: 0 0 8%;
  }

  /* --- #work-hero --- */

  #work-hero,
  #work-info,
  #work-gallery,
  .gallery-row,
  .gallery-grid,
  .gallery-row .work-img:not(:last-of-type),
  #work-gallery > .work-img:not(:last-of-type),
  #work-gallery > .work-img:has(~ .gallery-row) {
    margin-bottom: 5%;
  }
  .work-title {
    font-size: 36px;
    margin: 0 0 4%;
  }
  .work-title span {
    font-size: 14px;
  }

  /* --- #work-info --- */

  .work-info_meta, 
  .work-info_meta .work-info_item:not(:last-of-type) {
    margin: 0 0 3%;
  }
  .work-info_item dt {
    margin: 0 0 1%;
  }

  /* --- #work-gallery --- */
  .gallery-row {
    display: block;
  }
  .gallery-grid {
    display: flex;
    flex-direction: column;
  }

  /* 名刺
  --------------------------------- */
  .business-card .work-hero_item {
    max-width: 600px;
  }

  /* ルノワール展
  --------------------------------- */
  .Renoir-exhib .gallery-row:nth-of-type(2) {
    display: flex;
  }
  .Renoir-exhib .gallery-row:nth-of-type(2) .work-img {
    margin: 0;
  }

}

/* ▽▽▽ ~480px ▽▽▽ */

@media screen and (max-width:480px) {

  /* Topページ
  ============================== */

  /* --- #fv --- */

  #fv {
    padding: 20% 0 0;
  }

  /* --- #profile --- */

  .prof-txt br {
    display: none;
  }

  /* Worksページ
  ============================== */

  #works {
    padding-top: 20%;
    padding-bottom: 10%;
  }
  .subpage-title,
  .works-list li:not(:last-of-type) {
    margin: 0 0 6%;
  }

  /* Detailページ
  ============================== */

  .detail-page main {
    margin: 0 0 9%;
  }

  /* --- #work-hero --- */

  #work-hero,
  #work-info,
  #work-gallery,
  .gallery-row,
  .gallery-grid,
  .gallery-row .work-img:not(:last-of-type),
  #work-gallery > .work-img:not(:last-of-type),
  #work-gallery > .work-img:has(~ .gallery-row) {
    margin-bottom: 6%;
  }
  #work-hero {
    aspect-ratio: 1 / 1;
  }
  .work-title {
    font-size: 28px;
  }

  /* --- #work-info --- */

  .work-info_meta, 
  .work-info_meta .work-info_item:not(:last-of-type) {
    margin: 0 0 4%;
  }

  /* 名刺
  --------------------------------- */
  .business-card .work-title,
  .leaflet .work-title {
    margin: 0 0 2%;
  }

  /* ルノワール展
  --------------------------------- */
  .Renoir-exhib .work-hero_item {
    width: 50%;
  }

  /* CDリーフレット
  --------------------------------- */
  .leaflet .work-hero_item {
    width: 90%;
  }

}