/* reset */
/* ----------------------------------------------------- */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

li {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: '';
}

abbr,
acronym {
  border: 0;
  font-variant: normal;
}

/* to preserve line-height and selector appearance */
sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/*because legend doesn't inherit in IE */
legend {
  color: #000;
}



/* 全体 */

body {
  cursor: none !important;
  font-family: "Google Sans Flex", sans-serif;
  opacity: 0;
  transition: opacity 0.8s ease;
  /* 表示速度調整可 */
}

body.loaded {
  opacity: 1;
}




.cursor,
.follower {
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  cursor: none;
}

.cursor {
  width: 8px;
  height: 8px;
  background-color: #666666;
  z-index: 1001;
}

.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #888888;
  opacity: 0.2;
  transition: transform ease .1s;
  text-align: center;
  z-index: 1000;

  &.is-active {
    transform: scale(2.6);
  }
}

.menu-toggle {
  display: none;
  /* PCではハンバーガー非表示 */
}

/* ページ全体の2カラムレイアウト */
.page-layout {
  max-width: 100%;
  /* 好きな幅に調整 */
  margin: 0 auto;
  font-size: 0.7em;
  line-height: 2em;
}

/* ベース（スマホなど小さい幅では縦並び） */
.page-left,
.page-right {
  padding: 16px;
}

h1 {
  font-size: 1.6em;
  margin-bottom: 2em;
}

h2 {
  font-size: 1.1em;
  font-weight: 500;
}

ul {
  margin-bottom: 1em;
}


.page-layout {
  display: flex;
}

.page-left {
  width: 200px;
  flex: 0 0 200px;
  /* 200px固定 */
}

.page-left a {
  cursor: none;
}

.page-right {
  flex: 1;
  /* 残り全部使う */
  min-width: 0;
  /* slickのはみ出し防止用 */
}

.page-right h2.h2_title {
  display: none;
}


.page-left li.flex {
  display: flex;
}

.page-left li.flex span {
  padding-right: 0.8em;
}



body#bk {
  color: #999;
  background-color: #000;
}

body#bk a:link,
body#bk a:visited {
  color: #999;
}

body#bkw {
  color: #999;
  background-color: #121212;
}

body#bkw a:link,
body#bkw a:visited {
  color: #999;
}

body#gr {
  color: #707070;
  background-color: #c7d0d5;
}

body#gr a:link,
body#gr a:visited {
  color: #707070;
}

body#wh {
  color: #707070;
  background-color: #f8f8f8;
}

body#wh a:link,
body#wh a:visited {
  color: #707070;
}

a:link {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


body#bk a.select,
body#bkw a.select,
body#gr a.select,
body#wh a.select {
  text-decoration: underline;
}



.portfolio-slider {
  width: 100%;
  max-width: none;
  /* 制限を外す */
  margin: 20px 0;
  /* 右カラム内で上下だけ余白 */
}

/* メインスライダーのラッパー */
.portfolio-main-wrapper {
  position: relative;
  margin-bottom: 16px;
}

/* メイン画像のスライド内 */
.portfolio-main .slide {
  display: flex;
  align-items: center;
  /* 上下中央 */
  justify-content: center;
  height: 100%;
  /* slickの高さに合わせる */
  overflow: hidden;
  /* はみ出した部分を隠す */
}

/* 画像にフィットさせる */
.portfolio-main .slide img {
  height: 84vh;
  width: auto;
  object-fit: contain;
  /* 画像を収める */
  object-position: center;
  /* 中央配置 */
}

/* slick デフォルト矢印は使わないので非表示 */
.portfolio-main .slick-arrow {
  display: none !important;
}

/* カスタム矢印ボタン */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 10;
}

.arrow img {
  display: block;
  width: 64px;
  /* 好きなサイズに調整 */
  height: auto;
}

.arrow-prev {
  left: 10px;
}

.arrow-next {
  right: 10px;
}

/* 左右半分クリック用の透明エリア */
.click-area {
  position: absolute;
  inset: 0;
  /* top:0 right:0 bottom:0 left:0 と同じ */
  display: flex;
  z-index: 1;
  /* 矢印より下、スライドより上 */
}

.click-area .half {
  flex: 1;
  cursor: none;
  /* デバッグ用に色を付けたい時は↓
  background-color: rgba(255, 0, 0, 0.1);
  */
}

.arrow {
  cursor: none;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  /* hover領域と干渉させないため */
}

.arrow.visible {
  cursor: none;
  opacity: 1;
  pointer-events: auto;
}

/* サムネイルスライダー */
.portfolio-thumb {
  width: 760px;
  margin: 0 auto;
}

.portfolio-thumb .thumb {
  padding: 0px;
}

.portfolio-thumb .thumb img {
  width: 40px;
  height: auto;
  display: block;
}

/* アクティブなサムネイル（slick-current に色枠など） */
.portfolio-thumb .slick-current img {
  outline: none;
}

/* サムネイルの高さを揃えたい場合の一例 */
.portfolio-thumb .slick-slide {
  overflow: hidden;
}

/* サムネイル画像をデフォルト30%透過 */
.portfolio-thumb .slick-slide img {
  opacity: 0.3;
  transition: opacity 0.3s;
}

/* 選択（current）サムネイルは不透明100% */
.portfolio-thumb .slick-current img {
  opacity: 1;
}

.profile {
  text-align: center;
  padding: 3em 0 10em;
}

.profile h3 {
  font-size: 1.2em;
  margin-top: 2em;
}

.copy {
  margin: 20px 0 0;
}



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

  .arrow {
    opacity: 1;
    pointer-events: auto;
  }

  body {
    cursor: pointer !important;
  }

  .cursor,
  .follower {
    display: none !important;
  }

  .page-right h2.h2_title {
    display: block;
    padding-bottom: 5px;
  }

  /* ハンバーガーボタン（スマホ表示用） */
  .menu-toggle {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1100;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ハンバーガー全体のコンテナ */
  .menu-toggle .bars {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
  }

  /* 各ライン */
  .menu-toggle .bars span {
    display: block;
    width: 100%;
    height: 2px;
    background: #333;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* 開いたとき（×に変形） */
  .menu-toggle.is-open .bars span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle.is-open .bars span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-open .bars span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }





  /* スマホ時：左カラムをスライドメニューとして扱う */
  .page-left {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    /* メニュー幅（お好みで） */
    max-width: 100%;
    background: #f8f8f8;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1050;
    overflow-y: auto;
    /* 中身だけスクロール */
    -webkit-overflow-scrolling: touch;
    /* iOSでの慣性スクロール */
  }

  .copy {
    margin: 20px 0 0;
  }

  body.menu-open .page-left {
    opacity: 1;
    /* ふわっと表示 */
    pointer-events: auto;
    /* クリック可能に */
  }

  body.home .page-left {
    opacity: 1;
    pointer-events: all;
    z-index: 1002;
  }

  /* スマホ時は右カラムは通常どおり1カラム表示 */
  .page-right {
    padding: 32px 16px 16px;
  }

  /* 画像にフィットさせる */
  .portfolio-main .slide img {
    height: 66vh;
    width: 100%;
  }

  /* サムネイルスライダー */
  .portfolio-thumb {
    width: 100%;
    margin: 0 auto;
  }

  .arrow img {
    display: none;
  }

}