.Works {
  /* 16px - 88px */
  --swiper-navigation-size: clamp(1rem, -0.972rem + 8.09vw, 5.5rem);
  --swiper-pagination-bottom: 0;
}

@media screen and (max-width: 768px) {
  .Works {
    /* 遷移ボタン、固定値にした */
    --swiper-navigation-size: 32px;
  }
}


/* PracticeModal */
.PracticeModal {
  /* 24px - 64px */
  --swiper-navigation-size: clamp(1.5rem, 0.404rem + 4.49vw, 4rem);
  --swiper-pagination-bottom: 0;
}

@media screen and (max-width: 768px) {
  .PracticeModal {
    /* min: 390px max: 768px, 24px - 40px */
    --swiper-navigation-size: clamp(1.5rem, 0.468rem + 4.23vw, 2.5rem);
  }
}


.Body {
  /* なんのスタイルもついていないところには、この対応をする、という意図 */
  line-height: calc(32 / 16);
}

@media screen and (max-width: 768px) {
  .Body {
    line-height: calc(24 / 14);
  }
}

/* Swiperスタイル */
.Works .swiper-slide {
  text-align: center;

  width: calc(1000 / 1150 * 100%);
  max-width: 1000px;
  /* padding: 10-20px */
  padding: 0 clamp(0.625rem, 0.351rem + 1.12vw, 1.25rem);
}

@media screen and (max-width: 768px) {
  .Works .swiper-slide {
    /* 334 = 314px(幅) + 10px + 10px（padding） */
    width: calc(334 / 352 * 100%);
  }
}

.swiper-slide .ImgList__LinkImage {
  display: block;
  width: 100%;
  object-fit: cover;
}



.Works .SwiperButton {
  width: 100%;
  position: absolute;
  top: 50%;
}

.Works .SwiperButton__Inner {
  width: calc(1000 / 1280 * 100%);
  margin: 0 auto;
  position: relative;
  max-width: 1000px;
}

@media screen and (max-width: 768px) {
  .Works .SwiperButton__Inner {
    width: calc(334 / 390 * 100%);
  }
}


.Works .SwiperButton--L {
  left: auto;
  right: 100%;
}

.Works .SwiperButton--R {
  left: 100%;
}

.SwiperButtonArrow {
  color: #989550;
}




/* Practice swiper用 */
.PracticeModal {
  /* position: static;だと、z-indexが効かないから */
  position: relative;
  /* height: 100%; */
  z-index: 999;
}

.PracticeModal .modal__container {
  max-height: 90vh;
  /* min(a,b) = 2つのうち小さい方が適用される。この場合、calc()か、clamp（25px - 50px）のどちらか一方*/
  /* border-radius: min(calc(50 / 1280 * 100vw), clamp(1.563rem, 0.878rem + 2.81vw, 3.125rem)); */

  /* border-radius: 25 - 50px; */
  border-radius: clamp(1.563rem, 0.878rem + 2.81vw, 3.125rem);
  width: calc(1230 / 1280 * 100%);
  max-width: 1230px;
}

@media screen and (max-width: 768px) {
  .PracticeModal .modal__container {
    width: calc(342 / 390 * 100%);
  }
}


.PracticeModal .modal__container::-webkit-scrollbar {
  display: none;
}


/* .PracticeModal .swiper {
} */

.PracticeModal .swiper-wrapper {
  width: 100%;
}

.PracticeModal .swiper-slide {
  background: #fff;

}


.PracticeModal .PopupItem {
  /* SP: 32px PC: 72px (sp の padding-top は 24px)*/
  padding: calc(72 / 1230 * 100%) calc(40 / 1230 * 100%);
  width: calc(1020 / 1150 * 100%);
  max-width: 1020px;

  text-align: left;
  margin: 0 auto;
  display: flex;
}

@media screen and (max-width: 768px) {
  .PracticeModal .PopupItem {
    display: block;
    /* 24px - 40px , 16px - 24px */
    padding: 40px calc(32 / 342 * 100%);
    width: 100%;
  }
}

.PracticeModal .PopupItem__Inner {
  width: calc(500 / 940 * 100%);
  height: 100%;
  margin: 0 calc(40 / 940* 100%) 0 0;
}

@media screen and (max-width: 768px) {
  .PracticeModal .PopupItem__Inner {
    width: 100%;
    margin: 0 auto 24px;
  }
}

.PracticeModal .PopupItem__ImageContainer {
  width: 100%;
  /* height: 100%; */
  overflow: hidden;
  border-radius: clamp(1.563rem, 0.878rem + 2.81vw, 3.125rem);
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}

/* .PracticeModal .PopupItem__ImageContainerInner {
} */

.PracticeModal .PopupItem__Image {
  width: 100%;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .PracticeModal .PopupItem__Image {
    width: 100%;
    height: auto;
  }
}

.PracticeModal .PopupItem__ImageInner {
  width: 100%;
}


/* PracticeModal__Swiper */
.PracticeModal .PracticeModal__Swiper.swiper {
  margin-left: 0;
}

/* .PracticeModal .PracticeModal__Swiper.PopupItem__ImageContainer  {
} */

/* .PracticeModal .PracticeModal__Swiper .PopupItem__ImageContainerInner {
} */


/* .PracticeModal .PracticeModal__Swiper .PopupItem__Image {
} */

/* .PracticeModal .PracticeModal__Swiper .PopupItem__ImageInner {
} */


.PracticeModal .PopupItem__Desctiption {
  display: flex;
  flex-direction: column;
  width: calc(400 / 940 * 100%);
  position: relative;
}

@media screen and (max-width: 768px) {
  .PracticeModal .PopupItem__Desctiption {
    display: block;
    width: 100%;
  }
}

/* .PracticeModal .PopupItem__DesctiptionInner {
} */

/* .PracticeModal .PopupItem__DesctiptionHeader {
} */

@media screen and (max-width: 768px) {
  .PracticeModal .PopupItem__DesctiptionHeader {
    text-align: center;
    /*  0 0 24px - 32px */
    margin: 0 0 clamp(1.5rem, 0.984rem + 2.12vw, 2rem);
  }
}

.PracticeModal .PopupItem__DesctiptionTitle {
  /* font-size: 16px - 24px; */
  font-size: 24px;
  line-height: calc(32 / 24);
  font-family: "HigureGothic-Medium";
  margin: 0 0 8px;
}

@media screen and (max-width: 768px) {
  .PracticeModal .PopupItem__DesctiptionTitle {
    /*min: 390px max: 768px,  16px - 24px */
    font-size: clamp(1rem, 0.484rem + 2.12vw, 1.5rem);
    line-height: 1.5;
    margin: 0;
  }
}

.PracticeModal .PopupItem__DesctiptionDate {
  font-size: 14px;
  display: block;
  line-height: calc(24 / 14);
  /* padding: 破線用 */
  padding: 0 0 8px;
  /* margin: 16px - 24px(破線からテキストまでの距離) */
  margin: 0 0 clamp(1rem, 0.781rem + 0.9vw, 1.5rem);
  position: relative;
}

@media screen and (max-width: 768px) {
  .PracticeModal .PopupItem__DesctiptionDate {
    margin: 0;
    font-size: 12px;
    line-height: calc(24 / 12);
  }
}

.PracticeModal .PopupItem__DesctiptionDate::before {
  content: "";
  height: 1px;
  background-size: 10px 1px;
  background-image: linear-gradient(to right, #000, 5px, transparent 5px, transparent 10px);
  background-repeat: repeat-x;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}





.PopupItem__DescriptionTextContainer {
  position: relative;
  font-size: 16px;
  line-height: calc(32 / 16);
  /* 11行分に設定する （もともとスクロールのために、322pxにしてたとこ）*/
  height: calc(32 / 16 * 11em);
}

@media screen and (max-width: 768px) {
  .PopupItem__DescriptionTextContainer {
    line-height: calc(24 / 14);
    font-size: 14px;
  }
}

.PracticeModal .PopupItem__DescriptionTextContainer::before {
  content: "";
  width: 100%;
  /* 3行分に設定する （背景色がかかるようにする行数分？）*/
  height: calc(32 / 16 * 3em);
  display: block;
  /* 0deg(to top)は180degの逆、上が濃い→下へ薄くなる */
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .PracticeModal .PopupItem__DescriptionTextContainer {
    height: calc(24 / 14 * 5em);
  }
}

@media screen and (max-width: 768px) {
  .PracticeModal .PopupItem__DescriptionTextContainer::before {
    height: calc(24 / 14 * 1em);
  }
}

.PracticeModal .PopupItem__DescriptionTextContainerInner {
  overflow-y: auto;
  height: 100%;
}


.PopupItem__DescriptionTextContainerInner::-webkit-scrollbar {
  display: none;
}

.PracticeModal .PopupItem__DescriptionText {
  /* 3行分に設定する （最後の行にグラデがかからないため、3行分のpaddingを空けるため。空白の高さを保つ）*/
  padding: 0 0 calc(32 / 16 * 3em);
}

@media screen and (max-width: 768px) {
  .PracticeModal .PopupItem__DescriptionText {
    /* グラデからテキストをずらすため、２行分 */
    padding: 0 0 calc(24 / 14 * 2em);
  }
}

.PracticeModal .PopupItem__DescriptionTextInner {
  /* .PopupItem__DescriptionTextContainer の line-height を使用。一行分の高さの margin */
  margin: 0 0 calc((32 / 16) * 1em) 0;
}

@media screen and (max-width: 768px) {
  .PracticeModal .PopupItem__DescriptionTextInner {
    /* .PopupItem__DescriptionTextContainer の line-height を使用。一行分の高さの margin */
    margin: 0 0 calc((24 / 14) * 1em) 0;
  }
}




.PracticeModal .PopupCloseButton {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 3;
}

@media screen and (max-width: 768px) {
  .PracticeModal .PopupCloseButton {
    position: relative;
    text-align: center;

  }
}

/* .PracticeModal .PopupCloseButton__Inner {

} */


.PracticeModal .SwiperButton {
  width: 100%;
  position: absolute;
  top: 50%;
}


/* .PracticeModal .Button .Button--Small {

} */

.PracticeModal .SwiperButton__Inner {
  width: calc(1020 / 1230 * 100%);
  margin: 0 auto;
  position: relative;
  max-width: 940px;
}

@media screen and (max-width: 768px) {
  .PracticeModal .SwiperButton__Inner {
    width: 100%;
  }
}

.PracticeModal .SwiperButton--L {
  left: auto;
  right: 100%;
  margin-right: calc(40 / 1020 * 100%);
}

@media screen and (max-width: 768px) {
  .PracticeModal .SwiperButton--L {
    /* margin-right: clamp(1rem, 0.781rem + 0.9vw, 1.5rem); */
    /* 矢印の位置調整用、数値は適当 */
    /* margin-right: calc(6 / 342 * 100%); */
    margin: 0;
    right: auto;
    left: 0;
    width: calc(32 / 342 * 100%);
  }
}

.PracticeModal .SwiperButton--R {
  left: 100%;
  margin-left: calc(40 / 1020 * 100%);
  /* transform: translate(-50%); */
}

@media screen and (max-width: 768px) {
  .PracticeModal .SwiperButton--R {
    /* margin-right: clamp(1rem, 0.781rem + 0.9vw, 1.5rem); */
    /* 矢印の位置調整用、数値は適当 */
    /* margin-left: calc(6 / 342 * 100%); */
    margin: 0;
    right: 0;
    left: auto;
    width: calc(32 / 342 * 100%);
  }
}

/* Home--Works */
.Works {
  /* 相対値にすると、れんしゅうの縦幅がつくったものに侵食するので固定値 */
  padding: clamp(1.5rem, 0.185rem + 5.39vw, 4.5rem) 0 308px;
}

@media screen and (max-width: 768px) {
  .Works {
    padding: calc(24 / 390 * 100%) 0 calc(113 / 390 *100%);
  }
}

.WorksItem--Home {
  width: 100%;
}

.WorksItem--Home .WorksItem__Inner {
  padding: 0;
  width: 100%;
}

.WorksItem--Home .WorksItem__Img {
  position: relative;
}

.WorksItem--Home .ImgList {
  width: calc(1150 / 1280 * 100%);
}

@media screen and (max-width: 768px) {
  .WorksItem--Home .ImgList {
    width: calc(352 / 390 * 100%);
  }
}

.WorksItem--Home .ImgList__Link {
  /* border-radius: 25 - 50px; */
  border-radius: clamp(1.563rem, 0.878rem + 2.81vw, 3.125rem);
  border: solid 1px #D8D6B4;
  overflow: hidden;
  display: block;
  position: relative;

}

.WorksItem--Home .ImgList__Link:hover .ImgList__LinkImage {
  width: 100%;
}

.ImgLink__TextContainerHover {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  font-family: "HigureGothic-Black";
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(96, 96, 96, .4);
  transition: opacity .3s;
}

@media screen and (max-width: 768px) {
  .ImgLink__TextContainerHover {
    position: relative;
    text-align: left;
    background-color: #F6F5DE;
    color: #000;
    opacity: 1;
    transition: unset;
    align-items: baseline;
    padding: 16px 16px 24px;
  }
}

.WorksItem--Home .ImgList__Link:hover .ImgLink__TextContainerHover {
  opacity: 1;
}


.TextContainerHover__Title {
  /* 14px - 40px */
  font-size: clamp(0.875rem, 0.163rem + 2.92vw, 2.5rem);
  margin: 0 0 calc(64 / 960 * 100%);
}

@media screen and (max-width: 768px) {
  .TextContainerHover__Title {
    margin: 0 0 calc(8 / 314 * 100%);
  }
}

.TextContainerHover__Description {
  font-size: clamp(0.75rem, 0.64rem + 0.45vw, 1rem);
  /* line-height: 24 / 12 */
  /* min: 768px max: 1280px、360px - 700px */
  width: clamp(22.5rem, -9.375rem + 66.41vw, 43.75rem);
  line-height: 2;
}

@media screen and (max-width: 768px) {
  .TextContainerHover__Description {
    font-family: "HigureGothic-Regular";
    width: 100%;
  }
}

.Works .TextContainer {
  width: calc(1000 / 1280 * 100%);
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .Works .TextContainer {
    /* .TextContainer はスライドが入っている親要素の中にはないから、
    （（画像サイズ + padding 両側） / SP の幅 * 100%）で考える */
    /* 334 = 314px(幅) + 10px + 10px（padding） */
    width: calc(334 / 390 * 100%);
  }
}


.Works .Introduce {
  width: 100%;
  margin: 0 auto calc(40 / 1000 * 100%);
}

@media screen and (max-width: 768px) {
  .Works .Introduce {
    /* 334 = 314px(幅) + 10px + 10px（padding） */
    margin: 0 auto calc(24 / 334 * 100%);
  }
}

.Works .Introduce__Description {
  text-align: center;
  font-size: clamp(0.875rem, 0.82rem + 0.22vw, 1rem);
}

.Works .Introduce__Description--Br {
  display: inline-block;
}


.Works .SectionTitle--Home {
  width: calc((400 / 1000) * 100%);
  margin: 0 auto calc(40 / 1000 * 100%);
  min-width: 180px;
  max-width: 400px;
}

@media screen and (max-width: 768px) {
  .Works .SectionTitle--Home {
    margin: 0 auto calc(24 / 334 * 100%);
  }
}



.Works .SectionTitleImage {
  width: 100%;
}

.Works .ScrollDot {
  /* 16px - 32px */
  padding: clamp(1rem, 0.562rem + 1.8vw, 2rem) 0;
  position: relative;
  line-height: .5;
}

@media screen and (max-width: 768px) {
  .Works .ScrollDot {
    padding: clamp(1rem, 0.562rem + 1.8vw, 2rem) 0 calc(24 / 390 * 100%) 0;
  }
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}

/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
  background-color: #989550;
  width: 16px;
  height: 16px;
}

@media screen and (max-width: 768px) {
  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
}

/* Practice */
.Practice .Practice__ScrollList {
  background-color: #F6F5DE;
  /* padding: 64 - 160px; (相対値で余白取ったほうが見栄えが良いから)*/
  padding: clamp(4rem, 0.494rem + 14.38vw, 12rem) 0;
}

@media screen and (max-width: 768px) {
  .Practice .Practice__ScrollList {
    padding: 0 0 calc(94 / 390 * 100%) 0;
  }
}


.TextContainer--Vertical .Introduce__Description {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 768px) {
  .TextContainer--Vertical .Introduce__Description {
    display: block;
  }
}

.TextContainer--Vertical .Introduce__Description .Introduce__DescriptionVertical {
  white-space: pre;
  writing-mode: vertical-rl;
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .TextContainer--Vertical .Introduce__Description .Introduce__DescriptionVertical {
    white-space: normal;
    writing-mode: horizontal-tb;
    display: block;
  }
}

.Practice .TextContainer--Vertical {
  width: 100%;
  position: absolute;
}

@media screen and (max-width: 768px) {
  .Practice .TextContainer--Vertical {
    position: relative;
    width: calc(342 / 390 * 100%);
    margin: 0 auto calc(24 / 390 * 100%);
  }
}

.TextWrapper {
  width: calc(980 / 1280 * 100%);
  max-width: 980px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .TextWrapper {
    /* width: calc(324 / 3 * 100%); */
    width: 100%;
    width: calc(324 / 342 * 100%);
  }
}

.TextWrapper__Inner {
  margin: calc(-24px / 2);
}

@media screen and (max-width: 768px) {
  .TextWrapper__Inner {
    margin: 0;
    width: 100%;
  }
}



.Practice .Introduce {
  /* 要素３カラム、そこから余白-20px-20px */
  width: calc(100% / 3 - 24px);
  /* Introduce-Innerのrelative */
  position: relative;
  margin: calc(24px / 2);
  /* 300 px の箱の縦横比を保持 */
  aspect-ratio: 1;
}

@media screen and (max-width: 768px) {
  .Practice .Introduce {
    width: 100%;
    margin: 0;
    aspect-ratio: auto;
  }
}

.Introduce__Inner {
  display: flex;
  justify-content: flex-end;
  /* Introduceに対してwidth :100%; */
  width: 100%;
  position: absolute;
  /* .TextWrapperからみて bottom: 0;*/
  bottom: 0;
  font-size: clamp(0.875rem, 0.82rem + 0.22vw, 1rem);
}

@media screen and (max-width: 768px) {
  .Introduce__Inner {
    position: relative;
    /* display: flex; */
    width: 100%;
    /* .SectionTitle と.Introduce__Description の下が空くのを抑えるため*/
    max-height: 200px;
    justify-content: flex-start;
  }
}


.Practice .SectionTitle {
  width: calc((88 / ((980 - 24 - 24) / 3)) * 100%);
  min-width: 32px;
  order: 2;
}

@media screen and (max-width: 768px) {
  .Practice .SectionTitle {
    /* グリッド幅 342px */
    width: calc(32 / 342 * 100%);
    order: 0;
    margin: 0 calc(16 / 342 * 100%) 0 0;
    transform: translateY(-50%);
  }
}

.Practice .SectionTitleImage {
  width: 100%;
  display: block;
}

.Practice .Introduce__Description {
  line-height: 2;
  margin: calc((240 / ((980 - 24 - 24) / 3)) * 100%) calc((40 / ((980 - 24 - 24) / 3)) * 100%) 0 0;
}

@media screen and (max-width: 768px) {
  .Practice .Introduce__Description {
    margin: 0;
    position: absolute;
    width: calc(276 / 342 * 100%);
    bottom: 0;
    right: 0;
  }
}

.ScrollListWrapper {
  /* 作品コンポーネントを並べるための箱 */
  width: calc(980 / 1280 * 100%);
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .ScrollListWrapper {
    width: calc(342 / 390 * 100%);
  }
}

/* .Practice .ScrollList */
.Practice .ScrollList {
  display: flex;
  flex-wrap: wrap;
  margin: calc(-24px / 2);
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .Practice .ScrollList {
    margin: calc(-8px / 2);
  }
}

.Practice .ScrollList::before {
  content: "";
  display: block;
  /* width・marginは、liで決めたサイズと同じにする （構造を全く同じにする）*/
  /* width: calc(326.666666667 / 980 * 100% - 24px);と同じ */
  width: calc(100% / 3 - 24px);
  margin: calc(24px / 2);
}

@media screen and (max-width: 768px) {
  .Practice .ScrollList::before {
    width: calc(100% / 3 - 8px);
    margin: calc(8px / 2);
  }
}

/* SP版では全部3カラムなので、PC版の1列目2カラムの都合に合わせるため。
 */
/* .ScrollList__Item:last-child {
  display: none;
} */

@media screen and (max-width: 768px) {
  .ScrollList__Item:last-child {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .Practice .ScrollList::before {
    width: 100%;
    margin: 0;
  }
}

/* li */
.Practice .ScrollList__Item {
  width: calc(100% / 3 - 24px);
  margin: calc(24px / 2);
  border-radius: calc((50 / ((980 - 24 - 24) / 3)) * 100%);
}

@media screen and (max-width: 768px) {
  .Practice .ScrollList__Item {
    width: calc(100% / 3 - 8px);
    margin: calc(8px / 2);
  }
}

/* li > a */
.Practice .ScrollList__ItemLink {
  border-radius: calc((50 / ((980 - 24 - 24) / 3)) * 100%);
  display: block;
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* hover したときに、説明文がふわっと浮き上がるアニメーション */
.Practice .ScrollList__ItemLink:hover .ScrollList__ItemLinkInner {
  animation-name: SlideUpAnime;
  animation-duration: .4s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

@keyframes SlideUpAnime {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.Practice .ScrollList__ItemLinkInner {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 2;
  /* アニメーションしていないときも、紹介文を隠しておくため */
  /* transform: translateY(calc((172 / 171) * 100%)); と同じ*/
  transform: translateY(100%);
}

@media screen and (max-width: 768px) {
  .Practice .ScrollList__ItemLinkInner {
    height: 100%;
    width: 100%;
  }
}


/* li > a > img */
.Practice .ScrollList__ItemLinkImage {
  display: block;
  position: relative;
  width: 100%;
}


/* hover アクション */
/* .Practice .ScrollHover:font-size: 14-16px; */
.Practice .ScrollHover {
  text-align: center;
  font-size: clamp(0.875rem, 0.82rem + 0.22vw, 1rem);
  background-color: rgba(255, 255, 255, 0.7);
  width: 100%;
  min-height: calc(150 / 300 * 100%);
  padding: calc(36 / ((980 - 24 - 24) / 3) * 100%);
}

/* .Practice .ScrollHover: 12px - 16px */
@media screen and (max-width: 768px) {
  .Practice .ScrollHover {
    margin: 0 auto;
    font-size: clamp(0.75rem, 0.64rem + 0.45vw, 1rem);
    width: 100%;
    height: 100%;
    padding: calc(10 / ((342 - 8 - 8) / 3) * 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.ScrollHover__Name {
  border-bottom: 2px dotted;
  padding: 0 0 8px;
  font-size: clamp(0.875rem, 0.82rem + 0.22vw, 1rem);
}

@media screen and (max-width: 768px) {
  .ScrollHover__Name {
    border-bottom: none;
    font-family: "HigureGothic-Medium";
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

.ScrollHover__Description {
  padding: 16px 0 0;
  font-size: clamp(0.875rem, 0.82rem + 0.22vw, 1rem);

  /* …に省略するところ */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .ScrollHover__Description {
    display: none;
    padding: 0;
  }
}

.Practice .TextButton {
  margin: calc(24 / 390 * 100%) 0 0;
}

/* Practice ここまで */


/* About */
/* h1 */
.SectionTitle--Home--about {
  width: calc((450 / 1280) * 100%);
  margin: 0 auto;
  transform: translateY(-50%);
  min-width: 200px;
  max-width: 450px;
}

/* svg */
.SectionTitleImage--About {
  width: 100%;
}

.About__Item {
  background-color: #fffef2;
}

.About__Inner {
  display: flex;
  flex-direction: row;

  align-items: flex-start;
  /* min: 40px max: 88px */
  padding: clamp(2.5rem, 1.185rem + 5.39vw, 5.5rem) 0;
  width: calc(995 / 1280 * 100%);
  margin: 0 auto;
  max-width: 995px;
}

@media screen and (max-width: 768px) {
  .About__Inner {
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {
  .About__Inner {
    flex-direction: column;
    width: calc(342 / 390 * 100%);
    /* calc((72 - (32 / 2)) / 390 * 100%) の 32 / 2は、
 transform: translateY(-50%);かけたときの「わたしについて」の文字の高さ(390px時：32px) /2 の意味。
 （.SectionTitle--Home--about の親の高さが残っているので、
 この位置でpadding取るなら、指定した値の padding + 16px になる。
 もう16pxを引き算して、画像の上の余白（見え方は、画像の上に72px）を調整するため）*/
    padding: calc((72 - (32 / 2)) / 390 * 100%) 0 calc(72 / 390 * 100%) 0;
  }
}


.About__InnerText {
  /* display: flex; */
  /* flex-direction: column; */
  padding: 0 0 0 calc(72 / 995 * 100%);
  width: calc((995 - 200) / 995 * 100%);
  line-height: 2;
}

@media screen and (max-width: 768px) {
  .About__InnerText {
    width: 100%;
    padding: 0;
  }
}

.About__InnerTextName {
  /* font-size: 24px; */
  font-size: clamp(1rem, 0.781rem + 0.9vw, 1.5rem);
  font-family: "HigureGothic-Medium";
  margin: 0 0 calc(40 / (995 - 200 - 72) * 100%) 0;
}

@media screen and (max-width: 768px) {
  .About__InnerTextName {
    text-align: center;
    margin: 0 0 calc(24 / 342 * 100%) 0;
  }
}

@media screen and (max-width: 768px) {
  .About__InnerTextDescription {
    margin: 0 auto;
    width: calc(324 / 342 * 100%);
  }
}

.About__InnerSection {
  margin: 0 auto calc(48 / (995 - 200 - 72) * 100%);
}

.About__InnerText__SkillsItem {
  margin: 0 0 calc(24 / (995 - 200 - 72) * 100%) 0;
}

.About__InnerText__SkillsItemTitle {
  font-family: "HigureGothic-Black";
}

/* わたしについて　アイコン画像 */

.About__InnerIcon {
  order: -1;
  border: solid 1px #D8D6B4;
  width: calc(200 / 995 * 100%);
  border-radius: calc(50 / 200 * 100%);
  /* border-radius: 50px; */
  /* border-radius: 25 - 50px; */
  border-radius: clamp(1.563rem, 0.878rem + 2.81vw, 3.125rem);
  overflow: hidden;
  min-width: 100px;
  max-width: 200px;
}

@media screen and (max-width: 768px) {
  .About__InnerIcon {
    width: calc(150 / 342 * 100%);
    margin: 0 auto calc(24 / 342 * 100%);
  }
}

.About__InnerIconImage {
  width: 100%;
}

/* わたしについて、 リンク用のスタイル*/


.About__InnerTextDescriptionLinkButton {
  display: flex;
  justify-content: end;
}

@media screen and (max-width: 768px) {
  .About__InnerTextDescriptionLinkButton {
    width: 100%;
    margin: 0;
  }
}

.About__InnerTextDescriptionLinkButtonInner {
  display: flex;
  position: relative;
}


.About__InnerTextDescriptionLinkButtonInner::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .4s;
}

.About__InnerTextDescriptionLinkButtonInner:hover::after {
  transform: scale(1);
}

.About__InnerTextDescriptionLinkButtonInnerText {
  /* 矢印のmarginは、SPも16px */
  margin: 0 16px 0 0;
}

.About__ButtonArrow {
  display: block;
  width: 16px;
}



/*モーダル内 リンク用のスタイル */

.PopupItem__DesctiptionLinkButton {
  display: flex;
  justify-content: end;
}

@media screen and (max-width: 768px) {
  .PopupItem__DesctiptionLinkButton {
    width: 100%;
    margin: 0;
  }
}

.PopupItem__DesctiptionLinkButtonInner {
  display: flex;
  position: relative;
}


.PopupItem__DesctiptionLinkButtonInner::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .4s;
}

.PopupItem__DesctiptionLinkButtonInner:hover::after {
  transform: scale(1);
}

.PopupItem__DesctiptionLinkButtonInnerText {
  /* 矢印のmarginは、SPも16px */
  margin: 0 16px 0 0;
}

.PopupItem__ButtonArrow {
  display: block;
  width: 16px;
}