@charset "utf-8";
/*=========================================
 Reset css
==========================================*/
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, button, img, a, table, tr, th, td {margin: 0;padding: 0;border: 0;font-weight: normal;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
input,button{-webkit-appearance: none;appearance: none;}
input[type="submit"]{border: none;}
button{border-radius: 0;background: transparent;color: inherit;vertical-align: middle;text-align: inherit;font: inherit;}
article, header, footer, aside, figure, figcaption, nav, section {display:block;}
body{line-height: 1;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
ol, ul{list-style: none;list-style-type: none;}
a{text-decoration: none;}



/*=========================================
 common
==========================================*/
body{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.25em;
  color: #1a1a1a;
}

a{
  color: #1a1a1a;
}

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

.main-wrap{
  background: #f1e9c6;
}

.main-wrap_inner{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}



/*=========================================
 kv
==========================================*/
.kv{
  position: relative;
  display: flex;
  justify-content: space-between;
}


/* ------------ header ------------ */
.header{
  width: 100%;
  height: 70px;
  border-bottom: solid 3px #fc9721;
}

.header__list{
  display: flex;
  justify-content: flex-end;
  line-height: 70px;
}

.header__link{
  display: inline-block;
  font-family: futura-pt, sans-serif;
  font-weight: 500;
  font-size: 1.55em;
  color: #fc9721;
  transition: 0.3s;
}

.header__link:hover{
  filter: blur(3px);
}

.header__item{
  margin-right: 20px;
}

.header__item:last-child{
  margin-right: 0;
}


/* ------------ kv__content ------------ */
.kv__content{
  position: absolute;
  bottom: 0;
  left: 0;
}

.kv__content--name{
  font-family: futura-pt, sans-serif;
  font-weight: 500;
  font-size: 2em;
  color: #fc9721;
}

.kv__content--text{
  margin-top: 10px;
  font-family: "europa", sans-serif;
  font-size: 1.1em;
  letter-spacing: .01em;
  line-height: 1.15;
}

.kv__content--text-symbol{
  font-size: 0.88em;
  padding: 0 2px;
}


/* ------------ site-title ------------ */
.site-title{
  margin-top: 70px;
  font-family: futura-pt, sans-serif;
  font-weight: 500;
  font-size: 8em;
  color: #fc9721;
  writing-mode: vertical-rl;
}


/*=========================================
 content
==========================================*/
/* ------------ main-section ------------ */
.main-section{
  margin-top: 100px;
}

.main-section__title{
  display: flex;
  align-items: center;
  font-size: 5em;
  font-family: futura-pt, sans-serif;
  font-weight: 500;
  color: #fc9721;
}

.main-section__title::after{
  margin-left: 30px;
  background-color: #fc9721;
  content: "";
  height: 3px;
  width: 320px;
}


/* ------------ coding ------------ */
.coding__column-wrap{
  position: relative;
  display: flex;
  gap: 50px;
  margin-top: 50px;
  align-items: center;
}

.coding__column-wrap-reverse{
  flex-direction: row-reverse;
  margin-top: 80px;
}

.coding__content--text-wrap--number{
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: futura-pt, sans-serif;
  font-size: 4em;
  color: #fc9721;
}

.coding__content--text-wrap--number-2{
  left: 0;
}

.coding__content--link-wrap{
  margin-top: 30px;
}

.coding__content--text{
  margin-top: 20px;
  line-height: 1.5;
}

.coding__content--text-top{
  margin-top: 30px;
}

.coding__content--link{
  padding-bottom: 2px;
  color: #fc9721;
  background-image: linear-gradient(#fc9721, #fc9721);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
  transition: background-size 0.3s;
}

.coding__content--link:hover{
  color: #2186fc;
  background-position: bottom right;
  background-size: 0 1px;
  transition: .3s;
}


/* ------------ design ------------ */
.design{
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: flex-start;
}

.design__title{
  width: 15%;
  writing-mode: sideways-lr;
}

.design__title:after{
  margin-left: 0;
  margin-bottom: 30px;
  width: 3px;
  height: 320px;
}

.design__list{
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

.design__item{
  width: 30%;
}