@charset "UTF-8";

/* ============================================================
ページ全体にかかわるcss設定
===============================================================*/
:root {
  --header_bg: #EB1B30;
  --header_slide_bg: #CD1D2E;
  --works_title: #FE9F48;
  --skills_title: #31A8FF;
  --works_list_bg: #F2ECDF;
  --works_headline_bg: #D6DAA8;
  --skills_ternary: #45A3B5;
  --header_text: #fff;
  --text_primary: #2c2c2c;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  font-size: 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  height: max-content;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  margin: 0;
  padding: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
}

h1,
h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

dl,
dt,
dd {
  padding: 0;
  margin: 0;
}


/* ------------------------------------------------------------
ヘッダー・メインビジュアル
---------------------------------------------------------------*/
.header_container {
  width: 1440px;
  height: 100vh;
  /* height: 900px; */
  margin: 0 auto;
  background: var(--header_bg);
  text-align: center;
  color: var(--header_text);
  position: relative;
  letter-spacing: 0.05em;
  overflow-x: hidden;
}

.neko_slider {
  width: 1440px;
  height: 115px;
  /* background: var(--header_slide_bg); */
}

.neko_slider img {
  margin: 8px auto;
}

.neko_slider:first-of-type {
  position: absolute;
  top: 0;
  left: 0;
  animation: loop-slide-normal 10s linear 0s infinite normal both;
}

.neko_slider:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 1440px;
  animation: loop-slide-normal 10s linear 0s infinite normal both;
}

@keyframes loop-slide-normal {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

.neko_slider:nth-of-type(3) {
  position: absolute;
  bottom: 0;
  right: 0;
  animation: loop-slide-reverse 10s linear 0s infinite reverse both;
}


.neko_slider:nth-of-type(4) {
  position: absolute;
  bottom: 0;
  right: -1440px;
  animation: loop-slide-reverse 10s linear 0s infinite reverse both;
}

@keyframes loop-slide-reverse {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

.site_title {
  padding-top: 307px;
}

.site_title p {
  font-size: 48px;
  padding-bottom: 27px;
}

.navigation {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 24PX;
  width: 432px;
  height: 29px;
  padding: 63px 0;
  margin: 0 auto;
}

ul {
  display: flex;
  gap: 80px;

}

main {
  width: 1440px;
  height: auto;
  margin: 0 auto;
}

/* ------------------------------------------------------------
セクションタイトル
---------------------------------------------------------------*/
.section_title {
  font-size: 40px;
  padding: 0px 35px;
}

.sub_title {
  font-size: 24px;
  font-weight: 700;
  padding: 0 52px;
}

#skills .sub_title {
  padding: 0 40px;
}


#profile .title_rectangle {
  width: 248px;
  height: 108px;
  margin: 0 auto;
  border-right: var(--header_bg) 8px solid;
  border-left: var(--header_bg) 8px solid;
  text-align: center;
}

#works .title_rectangle {
  width: 248px;
  height: 108px;
  margin: 0 auto;
  border-right: var(--works_title) 8px solid;
  border-left: var(--works_title) 8px solid;
  text-align: center;
}

#skills .title_rectangle {
  width: 248px;
  height: 108px;
  margin: 0 auto;
  border-right: var(--skills_title) 8px solid;
  border-left: var(--skills_title) 8px solid;
  text-align: center;
}

/* ------------------------------------------------------------
プロフィール
---------------------------------------------------------------*/
.profile_container {
  padding-top: 140px;
  padding-bottom: 160px;
}

.profile_inner {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 44px;
  padding-top: 65px;
}

.profile_inner img {
  width: 281px;
  height: 288px;
}

.profile_items {
  display: block;
  width: 775px;
  height: auto;
}

.name_jp {
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.1em;
  padding-bottom: 5px;
}

.name_en {
  font-weight: 700;
  font-style: 24px;
  letter-spacing: 0.1em;
  padding-bottom: 19px;
}

.profile_p {
  width: 775px;
  height: auto;
  letter-spacing: 0.1em;
}

/* ------------------------------------------------------------
制作例
---------------------------------------------------------------*/
.works_container {
  padding-top: 136px;
  padding-bottom: 146px;
}

.works_lp {
  padding-top: 146px;
  padding-bottom: 89px;
}

.works_lp_wrapper {
  width: max-content;
  margin: 0 auto;
  padding-bottom: 83px;
}

.works_lp_name {
  font-weight: 700;
  font-size: 32px;
  display: flex;
  gap: 53px;
}

.works_lp_url {
  font-weight: 700;
  font-size: 32px;
  display: flex;
  gap: 50px;
  padding: 41px 0 3px 40px;
}

.small {
  font-weight: 400;
  font-size: 24px;
  padding-left: 140px;
}

.mock_up_images_lp {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 63px;
  padding-bottom: 33px;
}

.mock_up_sp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.mock_up_tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.description_lp {
  width: 1085px;
  height: 578px;
  padding: 59px 39px 86px 50px;
  margin: 0 auto;
  border-radius: 13px;
  font-size: 24px;
  background: var(--works_list_bg);
  position: relative;
}

.description_lp dl {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 43px;
}

.description_lp dt {
  width: max-content;
  height: 37px;
  background: var(--works_headline_bg);
  border-radius: 13px;
  padding: 4px 23px;
  font-weight: 700;
}

.description_lp dd {
  width: 773px;
  height: auto;
}

.description_lp span:nth-of-type(2) {
  margin-left: 76px;
}

.description_lp .neko1 {
  position: absolute;
  top: -51px;
  left: -15px;
}

.description_lp .neko2 {
  position: absolute;
  top: -56px;
  right: -23px;
}

.description_lp .neko3 {
  position: absolute;
  bottom: -93px;
  left: -15px;
}

.description_lp .neko4 {
  position: absolute;
  bottom: -17px;
  right: -28px;
}

/* ------------------------------------------------------------
スキルリスト
---------------------------------------------------------------*/
.skills_container {
  padding-top: 143px;
  padding-bottom: 240px;
}

.skills_list_container {
  padding: 92px 195px 0 258px;
}

.headline {
  width: 408px;
  height: 51px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.subheading {
  background: var(--header_bg);
  width: 82px;
  height: 29px;
  border-radius: 6px;
  margin-left: 33px;
  margin-bottom: 10px;
}

.headline h3 {
  font-size: 24px;
  font-weight: 500;
  color: var(--header_text);
  padding: 11px 72px;
}

.subheading h4 {
  font-size: 20px;
  font-weight: 400;
  color: var(--header_text);
  width: fit-content;
  height: fit-content;
  margin: 0 auto;
}

.first.headline {
  background: var(--header_bg);
  margin-bottom: 22px;
}

.second.headline {
  background: var(--works_title);
  margin-top: 44px;
  margin-bottom: 12px;
}

.third.headline {
  background: var(--skills_title);
  margin-top: 44px;
  margin-bottom: 12px;
}

.skills_list {
  width: 987px;
  height: max-content;
  background: var(--works_list_bg);
  border-radius: 15px;
  position: relative;
}


.uiux {
  padding: 17px 25px 16px 26px;
  margin-bottom: 11px;
}

.adobe {
  padding: 17px 25px 16px 26px;
  margin-bottom: 44px;
}

.ms-wp-id {
  padding: 28px 25px 46px 26px;
}

.js-php-mdb {
  padding: 27px 25px 25px;
}

.items_blk {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  /* gap: 12px; */
}

.html {
  padding: 0 119px 12px 24px;
  border-bottom: #989898 1px dotted;
}

.html dl,
.css dl,
.adobe dl,
.ps dl {
  margin-left: 12px;
}


.css {
  padding: 17px 0px 0px 24px;
}

.ai {
  padding: 0 381px 15px 24px;
  border-bottom: #989898 1px dotted;
}

.ps {
  padding: 16px 81px 0 24px;
}

.icon {
  width: 49px;
  height: 49px;
}

.msoffice {
  width: 100px;
  height: 111px;
}

.wordpress {
  width: 76px;
  height: 59px;
}

.wordpress img {
  width: 100%;
  height: 100%;
}

.php {
  width: 79px;
  height: 79px;
}

.wordpress img {
  width: 100%;
  height: 100%;
}

.mariaDB {
  width: 144px;
  height: 36px;
}

.mariaDB img {
  width: 100%;
  height: 100%;
}

dl {
  font-size: 20px;
}

dt {
  font-weight: 700;
  background: #d9d9d9;
  border-radius: 50px;
  width: max-content;
  padding: 2px 18px;
  margin-bottom: 3px;
}

dd {
  font-weight: 400;
}

.msoffice+dl {
  margin-left: 35px;
}

.ms-wp-id>.items_blk:first-of-type {
  padding: 0 25px 25px;
  border-bottom: #989898 1px dotted;
}

.wordpress+dl {
  margin-left: 22px;
}

.ms-wp-id>.items_blk:nth-of-type(2) {
  padding: 18px 55px 17px 29px;
  border-bottom: #989898 1px dotted;
}

.indesign+dl {
  margin-left: 22px;
}

.ms-wp-id>.items_blk:nth-of-type(3) {
  padding: 18px 295px 0 30px;
}

.js+dl {
  margin-left: 19px;
}

.js-php-mdb>.items_blk:first-of-type {
  padding: 0 275px 33px 28px;
  border-bottom: #989898 1px dotted;
}

.php+dl {
  margin-left: 6px;
}

.js-php-mdb>.items_blk:nth-of-type(2) {
  padding: 22px 512px 22px 11px;
  border-bottom: #989898 1px dotted;
}

.mariaDB+dl {
  margin-left: 22px;
}

.js-php-mdb>.items_blk:nth-of-type(3) {
  padding: 26px 507px 25px 3px;
}

.neko_nyoki {
  position: absolute;
  right: 11px;
  top: -59px;
  z-index: -1;
}

.neko_nyanmonaito {
  position: absolute;
  right: 59px;
  bottom: 0;
}

.neko_sitting {
  position: absolute;
  right: 115px;
  top: 113px;
}

.neko_meowing {
  position: absolute;
  right: 86px;
  bottom: 48px;
}