@charset "UTF-8";
/* ----------------------------------------------------------------------------------------------------
*  基本情報  * --------------------------------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&display=swap");

html,
body {
  height: 100%;
}
html {
  font-size: 62.5%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
address,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
img,
form,
figure {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 16px;
  line-height: 1.7;
  list-style-type: none;
  font-style: normal;
  font-weight: normal;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "メイリオ", Meiryo, Arial, Verdana, sans-serif;
  text-align: left;
  color: var(--black);
}
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
ul,
li,
form,
input,
textarea,
button,
table,
tr,
th,
td,
article,
aside,
footer,
header,
hgroup,
nav,
section,
a,
span,
img {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-color: var(--base);
}
a {
  color: var(--black);
  font-size: 16px;
  text-decoration: none;
  transition: opacity 0.3s ease-out;
}
a:hover {
  opacity: 0.7;
}
a img {
  transition: opacity 0.3s ease-out;
}
a:hover img {
  opacity: 0.7;
}
figure {
  text-align: center;
  line-height: 0;
}
.sp {
  display: none;
}
img {
  width: 100%;
}
@media screen and (max-width: 820px) {
  body {
    min-width: inherit;
  }
  figure {
    width: 100%;
    text-align: center;
  }
  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
  }
  p,
  li,
  th,
  td,
  a {
    font-size: 14px;
    line-height: 1.6;
  }
  .wrap {
    width: 92%;
  }
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}

/* ------------------------------
    text/font
------------------------------ */
:root {
  --black: #2e1c07;
  --base: #f3eee8;
  --main: #e3dbcd;
  --gray: #d1cbc4;
  --yellow: #ffe699;
  --red: #d73134;
  --pink: #f7c1ca;
  --footer: #f7c1ca;
}
.shippori {
  font-family: "Shippori Mincho", serif;
}
.ta_c {
  text-align: center;
}
.fwb {
  font-weight: bold;
}

/* ------------------------------
    clearfix
------------------------------ */
.clear {
  clear: both;
}
.o_hidden {
  overflow: hidden;
}

/* ------------------------------
*  header
------------------------------ */
.fv_logo {
  position: absolute;
  top: 0;
  left: 8%;
  padding: 12px 16px 12px 0;
  width: 212px;
}
.fv_logo img {
  width: 80px;
  height: auto;
}
.fix_menu {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 999;
  height: 88px;
  background-color: var(--base);
}
#navwrap {
  position: absolute;
  top: 0;
  right: 8%;
  padding: 30px 0;
}
.header_menu {
  display: flex;
}
ul,
li {
  list-style: none;
  margin: 0;
}
.header_menu li a {
  cursor: pointer;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--black);
  font-size: 16px;
  border: 1px solid var(--black);
  border-radius: 50px;
  margin-left: 24px;
}
.header_menu li a:hover {
  color: var(--red);
  border: 1px solid var(--red);
  background-color: #fff;
}
.header_menu li {
  display: inline-block;
}
#switch {
  display: none;
}
@media screen and (max-width: 767px) {
  #switch ~ label {
    padding: 12px 12px;
    width: 60px;
    height: 60px;
    background: #fff;
    position: fixed;
    box-sizing: border-box;
    top: 0;
    right: 0;
    z-index: 999;
    cursor: pointer;
  }
  #switch ~ label span {
    display: block;
    width: 26px;
    height: 3px;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    background: var(--black);
    position: absolute;
    -webkit-transition: 0.2s transform;
    transition: 0.2s transform;
    border-radius: 10px;
  }
  #switch ~ label span:before,
  #switch ~ label span:after {
    content: "";
    display: block;
    background: var(--black);
    position: absolute;
    width: 26px;
    height: 3px;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 10px;
  }
  #switch ~ label span:before {
    top: -9px;
  }
  #switch ~ label span:after {
    top: 9px;
  }
  /* ハンバーガーメニューのデザイン（クロスアニメーション付き） */
  #switch ~ label {
    padding: 20px 12px;
    width: 55px;
    height: 55px;
    background: var(--base);
    position: fixed;
    box-sizing: border-box;
    top: 0;
    right: 0;
    z-index: 999;
    cursor: pointer;
  }
  #switch ~ label span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--black);
    position: relative;
    margin: 6px auto;
    transition: all 0.3s ease;
    border-radius: 10px;
  }
  #switch ~ label span:before,
  #switch ~ label span:after {
    content: "";
    display: block;
    background: var(--black);
    position: absolute;
    width: 26px;
    height: 3px;
    left: 0;
    border-radius: 10px;
    transition: all 0.3s ease;
  }
  #switch ~ label span:before {
    top: -9px;
  }
  #switch ~ label span:after {
    top: 9px;
  }
  /* ハンバーガーメニューをクロスさせる動き */
  #switch:checked ~ label span {
    background: transparent;
  }
  #switch:checked ~ label span:before {
    transform: rotate(45deg);
    top: 0;
  }
  #switch:checked ~ label span:after {
    transform: rotate(-45deg);
    top: 0;
  }
  /* メニューを右からスライドインさせる */
  #navwrap {
    padding-top: 0;
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態で右画面外に配置 */
    width: 80%;
    height: 100%;
    background: #fff;
    transition: right 0.7s ease; /* スライドインのアニメーション */
    padding: 60px 0;
    box-sizing: border-box;
  }
  #switch:checked ~ #navwrap {
    right: 0; /* メニューが表示される際に右からスライドイン */
  }
  .header_menu {
    display: flex;
    flex-direction: column;
  }
  .header_menu li {
    margin: 0 auto 30px;
  }
  .header_menu li a {
    color: var(--black);
    border: none;
  }
  .scroll-prevent {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
  }
  .fv_logo {
    padding: 10px 0 10px 14px;
    top: 0;
    left: 0;
    width: 64px;
    height: auto;
  }
  .fv_logo_txt {
    font-size: 14px;
    padding: 20px 40px;
    line-height: 1.5;
  }
  .fv_logo_txt .small_txt {
    font-size: 12px;
  }
  .header_menu li + li::before {
    display: none;
  }
  .fix_menu {
    height: 55px;
  }
}

/* ------------------------------
*  main
------------------------------ */
.wrap {
  width: 950px;
  margin: auto;
}
figcaption {
  font-size: 14px;
  line-height: 1.4;
  margin-top: 16px;
}
.website {
  background-color: var(--main);
  margin-top: -48px;
  padding-bottom: 112px;
}
.sub_txt {
  background-color: var(--main);
  padding: 32px 0;
  width: 554px;
  margin: 0 auto;
  border-radius: 50px;
}
.category {
  font-size: 32px;
  color: #ae8e55;
  padding: 112px 0 8px;
}
.category_txt {
  color: #ae8e55;
}
.sub_category {
  font-size: 18px;
}
/* scroll bar */
.scroll {
  position: absolute;
  top: 533px;
  right: 25%;
  bottom: 15%;
  width: 3em;
  height: 1em;
  cursor: pointer;
  text-decoration: none;
  color: #f5f5f5;
  .scroll_txt {
    color: var(--black);
    font-size: 12px;
    font-weight: 600;
    writing-mode: vertical-rl;
    white-space: nowrap;
  }
}
.arrow {
  position: absolute;
  top: 3em;
  left: 0.45em;
  animation: 2s arrow-animation infinite ease-in-out;
  width: 0;
  height: 5em;
  border: 0.5px solid var(--black);
  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: -2px;
    width: 1px;
    height: 10px;
    border-top: 10px solid var(--black);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
  }
}
@keyframes arrow-animation {
  0% {
    height: 1em;
  }
  66% {
    height: 5em;
  }
}
@media screen and (max-width: 820px) {
  .wrap {
    width: 92%;
  }
  /* scroll */
  .scroll {
    top: 82vw;
    right: 0;
  }
  .scroll_txt {
    font-size: 10px;
  }
  .arrow {
    top: 3em;
    left: 0.45em;
  }
  figcaption {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 2.133vw;
  }
  .website {
    margin-top: -10vw;
    padding-bottom: 14.933vw;
  }
  .sub_txt {
    font-size: 12px;
    padding: 4.267vw 0;
    width: 73.867vw;
    margin: 0 auto;
    line-height: 1.3;
  }
  .category {
    font-size: 18px;
    padding: 14.933vw 0 1.067vw;
  }
  .sub_category {
    font-size: 16px;
  }
}

/* ------------------------------
*  fadein
------------------------------ */
.fadein {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.5s;
  &.fadein-bottom {
    transform: translate(0, 30px);
  }
  &.scrollin {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}

/* ------------------------------
*  fv
------------------------------ */
.fv {
  width: 1200px;
  margin: 90px auto 0;
  padding-bottom: 112px;
}
.fv h1 {
  font-size: 114px;
  line-height: 1.2;
  padding: 80px 0 120px;
}
@media screen and (max-width: 820px) {
  .fv {
    width: 100%;
    margin: 12vw auto 0;
    padding-bottom: 30vw;
  }
  .fv h1 {
    font-size: 17vw;
    line-height: 1.2;
    padding: 30vw 0 30vw 5vw;
  }
}

/* ------------------------------
*  work
------------------------------ */
@media screen and (max-width: 820px) {
  #work h2 img {
    width: 98vw;
    height: auto;
    margin-bottom: 5.333vw;
  }
  #work .website .flex_container img {
    width: 80vw;
    height: auto;
    margin-top: 8.533vw;
  }
  #work .logo {
    background-color: #fff;
    padding-bottom: 14.933vw;
  }
  #work .logo .category {
    color: var(--yellow);
  }
  #work .logo .sub_category {
    color: #7e630f;
    margin-top: 14.933vw;
    margin-bottom: 7vw;
  }
  #work .logo .box + .box {
    margin-top: 10vw;
  }
  #work .logo .box {
    width: 100%;
  }
  #work .logo .box img:first-child {
    width: 27vw;
    height: auto;
  }
  #work .logo .box:nth-of-type(2) img {
    width: 30vw;
    height: auto;
  }
  #work .logo .box figcaption {
    margin: 3vw auto 5vw;
  }
  #work .logo .flex_container:nth-of-type(2) {
    justify-content: space-between;
    gap: 0;
  }
  #work .logo .flex_container:nth-of-type(2) img {
    width: 70vw;
    height: auto;
    margin-top: 10vw;
  }
  #work .poster .sub_category {
    color: #d07585;
    margin-top: 15vw;
  }
  #work .poster {
    padding-bottom: 14.933vw;
  }
  #work .poster .fig01 img {
    width: 93vw;
    height: auto;
    padding-top: 5vw;
  }
  #work .poster .fig01 figcaption {
    margin-top: -7vw;
  }
  #work .poster .fig02 img {
    width: 65vw;
    height: auto;
    margin-top: 10.667vw;
  }
  #work .poster .fig03 img {
    width: 80vw;
    height: auto;
    margin-top: 10.667vw;
  }
  #work .poster .flex_container figure:first-child img {
    width: 50vw;
    height: auto;
    margin-top: 10vw;
  }
  #work .poster .flex_container figure:nth-of-type(2) {
    width: 90vw;
    height: auto;
    margin-top: 10vw;
  }
  #work .website02 .sub_txt,
  #work .website02 .website {
    background-color: var(--yellow);
  }
  #work .website02 .website {
    margin-top: -7vw;
  }
  #work .website02 .sub_category {
    padding-top: 14.933vw;
    line-height: 1.3;
  }
  #work .website02 .sub_category .txt {
    font-size: 12px;
    font-weight: normal;
  }
  #work .website02 .banner_flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 4vw;
    gap: 3.2vw;
    padding-bottom: 14.933vw;
  }
  #work .website02 .banner_flex figure {
    width: 43vw;
    height: auto;
  }
}
@media screen and (min-width: 821px) {
  #work h2 img {
    width: 1311px;
    height: 309px;
    margin-bottom: 40px;
  }
  #work .website .flex_container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
  }
  #work .website .flex_container img {
    width: 440px;
    height: auto;
    margin-top: 64px;
  }
  #work .website .flex_container img:hover {
    transform: scale(1.1, 1.1);
    transition: 1s all;
  }
  #work .logo {
    background-color: #fff;
    padding-bottom: 112px;
  }
  #work .logo .category {
    color: var(--yellow);
  }
  #work .logo .sub_category {
    color: #7e630f;
    margin-top: 112px;
    margin-bottom: 40px;
  }
  #work .logo .flex_container {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 128px;
  }
  #work .logo .box {
    width: 330px;
  }
  #work .logo .box img:first-child {
    width: 139px;
    height: 139px;
  }
  #work .logo .box:nth-of-type(2) img {
    width: 171px;
    height: auto;
  }
  #work .logo .box figcaption {
    margin: 16px auto 24px;
  }
  #work .logo .flex_container:nth-of-type(2) {
    justify-content: space-between;
    gap: 0;
  }
  #work .logo .flex_container:nth-of-type(2) img {
    width: 306px;
    height: auto;
  }
  #work .poster .sub_category {
    color: #d07585;
    margin-top: 112px;
  }
  #work .poster {
    padding-bottom: 112px;
  }
  #work .poster .fig01 img {
    width: 700px;
    height: auto;
    padding-top: 24px;
  }
  #work .poster .fig01 figcaption {
    margin-top: -88px;
  }
  #work .poster .fig02 img {
    width: 320px;
    height: auto;
    margin-top: 80px;
  }
  #work .poster .fig03 img {
    width: 660px;
    height: auto;
    margin-top: 80px;
  }
  #work .poster .flex_container img {
    width: auto;
    height: 342px;
  }
  #work .poster .flex_container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    gap: 60px;
  }
  #work .website02 .sub_txt,
  #work .website02 .website {
    background-color: var(--yellow);
  }
  #work .website02 .sub_category {
    padding-top: 112px;
    line-height: 1.3;
  }
  #work .website02 .sub_category .txt {
    font-size: 14px;
    font-weight: normal;
  }
  #work .website02 .banner_flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 32px;
    padding-bottom: 112px;
  }
  #work .website02 .banner_flex img {
    width: 300px;
    height: 300px;
    margin-top: 24px;
  }
}
/* ------------------------------
*  skill
------------------------------ */
@media screen and (max-width: 820px) {
  #skill {
    padding: 14.933vw 0;
    background-color: var(--footer);
  }
  #skill h2 img {
    width: 98vw;
    height: auto;
  }
  #skill h3 {
    margin: 14.933vw auto 3.2vw;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: var(--red);
  }
  #skill li {
    text-align: center;
  }
  #skill h2.shippori {
    font-size: 88px;
    margin: 14.933vw auto 3.2vw;
    color: var(--base);
  }
  #skill figure img {
    width: 40vw;
    height: auto;
  }
  #skill figure + h3 {
    margin-top: 5.333vw;
  }
  #skill figcaption {
    font-size: 14px;
  }
}
@media screen and (min-width: 821px) {
  #skill {
    padding: 0 0 112px;
    background-color: var(--footer);
  }
  #skill h2 img {
    width: 1211px;
    height: 377px;
  }
  #skill h3 {
    margin: 112px auto 24px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: var(--red);
  }
  #skill li {
    text-align: center;
  }
  #skill h2.shippori {
    font-size: 91px;
    margin: 112px auto 40px;
    color: var(--base);
  }
  #skill figure img {
    width: 300px;
    height: auto;
  }
  #skill figure + h3 {
    margin-top: 40px;
  }
  #skill figcaption {
    font-size: 20px;
  }
}
/* ------------------------------
*  footer
------------------------------ */
@media screen and (max-width: 820px) {
  footer {
    background-color: #fff;
    padding: 10vw 0 5vw;
  }
  footer .instagram {
    margin: 0 auto 10vw;
    width: 7vw;
    height: 7vw;
  }
  footer .instagram a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
  }
  footer .copy {
    font-size: 11px;
    margin-top: 7vw;
  }
  .footer-links {
    padding: 0 5vw;
    margin: 0;
  }
  .footer-links li {
    margin-bottom: 3vw;
    padding-bottom: 3vw;
    text-align: center;
    border-bottom: 1px dashed var(--gray);
  }
  .footer-links:nth-of-type(2) li:last-child {
    border: none;
  }
}
@media screen and (min-width: 821px) {
  footer {
    background-color: var(--base);
    padding: 54px 0;
  }
  footer * {
    color: var(--black);
  }
  footer .instagram img {
    width: 35px;
    height: 36px;
    margin-right: 8px;
  }
  footer .instagram a {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  footer .copy {
    font-size: 11px;
  }
  .footer-links {
    padding: 0;
    margin: 32px auto;
  }
  .footer-links li {
    display: inline-block;
    margin: 0 20px;
  }
}

/* ipad / mini用 */
@media screen and (min-width: 768px) and (max-width: 820px) {
  .fv_logo {
    left: 0;
  }
}
/* ipad pro用 */
@media screen and (min-width: 1024px) and (max-width: 1365px) {
  .fv h1 {
    padding-left: 56px;
  }
  #work h2 img,
  #skill h2 img {
    width: 98vw;
    height: auto;
  }
  .fv {
    width: 100vw;
  }
}