@charset "utf-8";
/* CSS Document */
.section-title{
  position: relative;
}
.head-title h3{
    position: absolute;
  bottom:0;
  right: 8%;
  writing-mode: vertical-rl;
    z-index: 100;
  text-align: left;
  line-height: 2;
}
.concept_title h3{
    position: absolute;
  top:0;
  left: 1%;
  writing-mode: vertical-rl;
    z-index: 100;
}
.skill_title h3{
    position: absolute;
  top:0;
  left: 15%;
  writing-mode: vertical-rl;
    z-index: 100;
}
.career_title h3{
    position: absolute;
  top:0;
  left: 15%;
  writing-mode: vertical-rl;
    z-index: 100;
}
.like_title h3{
    position: absolute;
  top:0;
  left: 15%;
  writing-mode: vertical-rl;
    z-index: 100;
}
.vition-title h3{
    position: absolute;
  top:0;
  left: 15%;
  writing-mode: vertical-rl;
    z-index: 100;
}
.section-title p{
      position: relative;
  writing-mode: vertical-rl;
  font-size: 10rem;
  color: #efc0c2;
  z-index: 10;
  line-height: 1em;
}
.section-title_white p{
      position: relative;
  writing-mode: vertical-rl;
  font-size: 10rem;
  color: #fff;
  z-index: 10;
  line-height: 1em;
}
.section-head{
  display: flex;
  padding: 11rem 9rem 0 27rem;
  justify-content: space-between;
}
.head-bg{
    position: absolute;
    bottom: -55%;
    left: -5%;
    z-index: -10;
   }
.head-image{
width:80rem;
  margin: 0 auto;
  padding: 0 15% 0 0;
}
.head-image img{
width:100%;
}
.section__about-me{
  padding: 13rem 0 9rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section__about-me h1{
line-height: 1.5;
  font-size: 5.0rem;
  letter-spacing: 5px;
}
.about-me__left{
  padding: 11rem 0 0;
}

.about-me__right-text{
  text-align: left;
    padding: 0 0 0 10rem;
}
.about-me__right-text h1{
 padding: 7rem 0 3rem;
  line-height: 1.8;
}
.about-me__right-text p{
 padding: 0 0 3rem;
    line-height: 1.5;
}


/*concept*/
.section__concept{
  position: relative;
  padding: 0 0 22rem 10rem;
  display: flex;
}
.section__concept:after{
  border-color: rgba(239, 192, 194, 1) transparent transparent transparent;
      display: block;
    border-width: calc(50px + 5vw) 100vw 0 0;
  content: "";
    border-style: solid;
    position: absolute;
  bottom:-1px;
    z-index: 0;
  transform: rotate(-180deg);
  right: 0;
}
.concept_content{
  display: flex;
  justify-content: space-between;
  padding: 6rem 0 0 7rem;
align-items: center;
}
.concept_content02{
  display: flex;
  justify-content: space-between;
  padding: 6rem 8rem 0 6rem;
align-items: center;
}
.concept_text{
  max-width: 47rem; 
  text-align: left;
  padding: 0 13rem 0 0;
}
.concept_text h2,.concept_text02 h2{
margin: 1rem 0 4rem;
 background:linear-gradient(transparent 50%, #efc0c2 0%);
  display: inline-block;
}
.concept_text-span{
  font-size: 3.0rem;
  font-weight: 600;
}
.concept_text p,.concept_text02 p{
 line-height: 1.9;
}
.concept_image {
 width:100%;
  padding: 0 7rem 0 0;
}
.concept_image02 {
 text-align: left;
  position: relative;
}
.concept_text02 {
  max-width: 47rem; 
  text-align: left;
}
/*skill*/
.section__skill{
  padding: 11rem 22rem 9rem;
  background-color:#efc0c2;
}
.section__skill-title{
  position: relative;
  margin: 0 22rem;
  background-color:#efc0c2;
}
.skill_title{
  position: absolute;
  right:-50%;
  margin: -13rem 0 0;
}
.skill-head{
  position: relative;
}
.skill-head h3{
  letter-spacing: 1.3px;
}
.skill-decoration{
  position: absolute;
  bottom:-150%;
  left: 33.5%;
}
.skill-body{
  padding: 6rem 0 13rem;
}
.skill-design,.skill-coding,.skill-other{
  display: flex;
  max-width: 37.5rem;
  justify-content: flex-start;
  margin: 0 auto;
  align-items: center;
  padding: 3rem 0 0;
}
.skill-design p,.skill-coding p,.skill-other p{
  font-weight: 600;
    letter-spacing: 1.5px;
}
.skill-design__body{
  padding:0 0 0 2rem;
  display: flex;
}
.skill-tool{
  margin: 0 1rem;
  background-color: #1f160e;
  padding: 1rem;
}
.skill-tool p{
color: #fff;
      letter-spacing: 1.0px;
}
.cording-tool p{
  padding:0 0 0 6rem;
    font-weight: 500;
}
.strength-body{
  padding: 10rem 0 0;
  display: flex;
  justify-content: space-between;
}
.strength-content {	
  position: relative;
  display: inline-block;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: #fff;
}

.strength-content__inner {
  position: absolute;
  display: inline-block;
  left: 13%;
  top: 18%;
  width :26rem;
  line-height: 1.5;
}
.strength__text{
  text-align:left;
  display: block;
    line-height: 1.6;
letter-spacing: 1px;
    border-top: 1px dashed #c0a84c;
  padding: 2rem 0 0;
  margin: 1rem 0 0;
}
.strength__title{
  font-size: 2.0rem;
  font-weight: 600;
  text-align:left;
  padding: 1rem 0 2rem;
}
/*career*/
.section__career{
  position: relative;
  padding: 18rem 0 24rem;
  display: flex;
  justify-content: flex-start;
}
.career_title{
  margin: 0 7rem 0 22rem;
}
.section__career:before{
  border-color: rgba(239, 192, 194, 1) transparent transparent transparent;
      display: block;
    border-width: calc(78px + 5vw) 100vw 0 0;
  content: "";
    border-style: solid;
    position: absolute;
  top:0;
  right: 0;
    z-index: 0;
    transform: scale(-1, 1);
}
.section__career:after{
  border-color: rgba(239, 192, 194, 1) transparent transparent transparent;
      display: block;
    border-width: calc(78px + 5vw) 100vw 0 0;
  content: "";
    border-style: solid;
    position: absolute;
  bottom:-1px;
    z-index: 0;
  transform: rotate(-180deg);
  right: 0;
}
.career_content{
  max-width: 90rem;
  padding: 12rem 22rem 0 0;
  text-align: left;
}
.career-flexInner{
  display: flex;
}
.career-flexInner__date{
  padding: 3rem 5rem 0 0;
        position: relative;
}
.career-flexInner__date:after{
content: '';
    display: block;
 width: 15px;
  height: 15px;
  background: #c0a84c;
  transform: rotate(45deg);
    position: absolute;
    top: 27%;
right:-6.5%;
}
.career-flexInner__date span{
  font-size: 2.0rem;
}
.career-flexInner__text{
  padding: 3rem 0 2rem 6rem;
  letter-spacing: 0.5px;
border-left: 1px solid #1f160e;
}
.career-bold{
font-weight: 600;
  font-size: 1.8rem;
  padding: 0 0 1rem;
}
/*like*/
.section__like{
  background-color:#efc0c2;
  padding: 0 22rem 5rem;
}
.section__like-title{
  position: relative;
  margin: 0 22rem;
}
.like_title{
  position: absolute;
  right:-55%;
  margin: -5rem 0 0;
}
.like__list{
  display: flex;
flex-wrap: wrap;
    justify-content: center;
}
.like__list-item{
  padding: 0 3rem;
  margin: 5rem 0 0;
  flex-basis: 20%;
  position: relative;
}

.like__list-text p{
  font-size: 1.6rem;
  color: #fff;
}
.like__list-text span{
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: #1f160e;
}
.like__list-text:before,.like__list-text:after {
    content: "";
    height: 20%;
    display: block;
    border-left: 2px dotted rgba(31, 22, 14, 1);
    position: absolute;
    top: 0;
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 30deg);
    right: 20%;
}
.like__list-text:before{
    transform: rotate3d(0, 0, 1, -30deg);
    right: auto;
  left: 20%;
}
/*vition*/
.section__vition{
 padding: 24rem 0 13rem;
  display: flex;
    justify-content: space-between;
  align-items: center;
  position: relative;
}
.section__vition:before{
  border-color: rgba(239, 192, 194, 1) transparent transparent transparent;
      display: block;
    border-width: calc(78px + 5vw) 100vw 0 0;
  content: "";
    border-style: solid;
    position: absolute;
  top:0;
  right: 0;
    z-index: 0;
}
.vition-title{
  margin: 0 0 0 22rem;
}
.vition-content{
  margin: 0 22rem 0 5rem;
  max-width: 80rem;
  text-align: left;
}
.vition-content p{
  padding: 0 0 2rem;
letter-spacing: 0.05em;
  line-height: 1.7;
}
@media(max-width:1200px) { 
  .section-head{
    padding: 11rem 13rem 0 24rem;
  }
  .head-bg img{
    width: 100%;
  }
  .head-image{
    padding: 0 6% 0 0;
  }
  .head-title h3{
    bottom: 4%;
    right: 4%;
  }
  .section__about-me{
    padding: 17rem 0 10rem;
  }
  .about-me__left img{
    width: 100%;
  }
  .about-me__right-text{
    padding: 0 0 0 9rem;
  }
  .about-me__right img,.concept_image img,.concept_image02 img{
    width: 100%;
  }
  .section__concept{
    padding: 0 0 20rem 3rem;
    margin-top: -2rem;
  }
  .concept_content{
    padding: 11rem 0 0 3rem;
  }
  .concept_text{
    padding: 0 7rem 0 0;
  }
  .concept_image{
    padding: 0 5rem 0 0;
  }
  .concept_content02{
    padding: 9rem 0 0 2rem;
  }
  .concept_image02{
    max-width: 32rem;
  }
  .concept_text02{
        padding: 0 5rem 0 0;
    max-width: 42rem;
  }
  .section__skill{
    padding: 13rem 2rem 11rem;
  }
  .skill_title{
    right: -39%;
  }
  .skill-decoration{
    left: 31%;
  }
  .strength-content{
    width: 32rem;
    height: 32rem;
  }
  .strength-content__inner{
    left: 16%;
    top:10%;
    width: 23rem;
  }
  .section__career{
    padding: 13rem 0 20rem;
  }
  .career_title{
    margin: 0 6rem 0 5rem;
  }
  .career_content{
    padding: 9rem 10rem 0 0 ;
  }
  .section__like{
    padding: 3rem 10rem 7rem;
  }
  .like_title{
    right: -75%;
  }
  .section__vition{
    padding: 19rem 0 9rem;
  }
  .vition-title{
    margin: 0 0 0 5rem;
  }
  .vition-content{
    margin: 1rem 10rem 0 11rem;
  }
}
@media(max-width:960px) {
  .section-head{
    padding: 13rem 5rem 0;
  } 
  .head-bg {
    left: -43%;
}
  .head-image{
width:80%;
  padding: 0;
}
  .head-title h3{
writing-mode: horizontal-tb;
    bottom: 2%;
    right: 48%;
  }
  .section__about-me{
    padding: 29rem 0 0;
  }
  .about-me__left{
    padding: 0 2rem 0 0;
    margin-top: -1rem;
    display: block;
    text-align: right;
  }
  .about-me__left img{
    max-width: 40rem;
  }
  .about-me__right img{
    max-width: 42rem;
    display: block;
    margin-left: auto;
  }
  .about-me__right-text{
    padding: 0 0 0 7rem;
  }
  .section__concept{
    padding: 10rem 0 21rem;
    display: block;
  }
  .concept_title h3{
    writing-mode: horizontal-tb;
    top: 69%;
    left: 5%;
  }
  .section-title p{
        writing-mode: horizontal-tb;
    display: block;
    text-align: left;
    padding: 0 0 0 3rem;
  }
  .section__skill{
    padding: 26rem 2rem 11rem;
  }
  .skill-body{
    padding: 6rem 0 13rem;
  }
  .skill_title{
    right: -76%;
    margin: -22rem 0 0;
  }
  .skill_title h3{
        writing-mode: horizontal-tb;
    top: 67%;
    left: 2%;
  }
  .section-title_white p{
        writing-mode: horizontal-tb;
  }
  .concept_content,.strength-body{
    display: block;
  }
  .strength-body{
    padding: 9rem 0 0;
  }
  .concept_content{
padding: 4rem 5rem 0;
  }
  .concept_text{
    max-width: 100%;
    padding: 0 0 4rem;
  }
  .concept_image{
        padding: 0;
    margin: 0 auto;
    width: 80%;
  }
  .concept_content02{
    flex-direction: column-reverse;
    padding: 7rem 5rem 0;
  }
  .concept_image02{
    max-width: 80%;
  }
  .concept_text02{
    max-width: 100%;
    padding: 0 0 4rem;
  }
  .skill-decoration{
    left:26%;
  }
  .like_title{
    margin: -6rem 0 0;
    right: -106%;
  }
  .like__list{
  padding: 6rem 0 0;
}
  .section__career{
    display: block;
  }
  .career_title{
    margin: 0 6rem 0 0;
  }
  .career_content{
    padding:6rem 5rem 0;
  }
  .career_title h3{
    top:66%;
    left: 5%;
  }
  .career_title h3,.like_title h3,.vition-title h3{
    writing-mode: horizontal-tb;
  }
  .like_title h3{
    top:65%;
    left: 4%;
  }
  .section__like{
    padding: 6rem 5rem 7rem;
  }
  .section__vition{
    display: block;
  }
  .vition-title{
    margin: 0 0 0 2rem;
  }
  .vition-title h3{
    top:67%;
    left: 4%;
  }
  .vition-content{
    margin: 4rem 5rem 0;
  }
}
@media(max-width:540px) {
  .head-bg{
    top:-32%;
    left: -69%;
  }
  .section-title p{
    padding: 0;
  }
  .section-title_white p,  .section-title p{
    font-size: 7.2rem;
  }
  .section-head{
    padding:15rem 0 0;
  }
  .head-image{
    width: 100%;
  }
  .head-title h3{
    right: auto;
    bottom: 19%;
    left: 7%;
  }
  .section__about-me{
    padding: 22rem 0 0;
    display: block;
  }
  .about-me__left{
    padding: 4rem 0;
  }
  .about-me__left img{
    max-width: 30rem;
    display: block;
    margin: 0 auto;
  }
  .section__about-me h1{
    font-size: 3.6rem;
    text-align: left;
    padding: 2rem 0 2rem 3rem;
  }
  .about-me__right-text{
    padding: 0 3rem 4rem;
  }
  .concept_text-span{
    font-size: 2.2rem;
  }
  .about-me__right-text h1{
    padding: 0 0 4rem;
    line-height: 1.3;
  }
  .about-me__right-text p{
    padding: 0 0 2rem;
  }
  .section__concept{
    padding: 3rem 0 13rem;
  }
  .concept_title h3{
    left: 3%;
  }
  .concept_content{
    padding: 3rem 3rem 0;
  }
  .concept_text{
    padding: 0 0 3rem;
  }
  .concept_text h2{
    margin: 0 0 2rem;
  }
  .concept_content02{
    padding: 4rem 3rem 0;
  }
  .concept_text02{
    padding: 0 0 3rem;
  }
  .concept_text02 h2{
    margin: 0 0 2rem;
  }
  .section__skill{
    padding: 19rem 2rem 0;
  }
  .section__skill-title{
    margin: 0;
  }
  .skill_title{
    right: auto;
    margin: -16rem 0 0;
  }
  .skill_title h3{
    top:62%;
  }
  .skill-decoration{
    left: 0;
  }
  .skill-decoration img{
   width: 80%;
  }
  .skill-design__body{
    line-height: 0.5px;
    padding: 0 0 0 3rem;
  }
  .skill-tool{
    padding: 1rem;
  line-height: 2.5;
    margin: 0 0.5rem;
  }
  .skill-tool p{
    font-size: 1.2rem;
    line-height: 17px;
  }
  .strength-content{
    width: 30rem; 
    height: 30rem;
    margin: 0 0 2.5rem;
  }
  .skill-body{
    padding: 3rem 0 9rem;
  }
  .skill-coding{
    padding: 2rem 0 0;
  }
  .skill-other {
    padding: 1.5rem 0 0;
  }
  .strength-body{
    padding: 6rem 0 0;
  }
  .strength-content__inner{
    left: 13%;
    top: 15%;
  }
  .strength-content__inner img{
    padding: 0 0 1rem;
  }
  .strength__title{
    padding: 0;
  font-size: 1.8rem;
  }
  .strength__text{
    margin: 0.5rem 0 0;
  }
  .section__career{
    padding: 11rem 0 3rem;
  } 
  .career_content{
    padding: 5rem 3rem 5rem;
  }
  .career-flexInner{
    display: block;
    padding: 0 0 3rem;
  }
  .career-flexInner__date{
    padding: 0;
  }
  .career-flexInner__date span{
    font-size: 1.8rem;
    padding: 0 0 0 3rem;
  }
  .career-flexInner__date:after{
    right: 94%;
    top:13%;
  }
  .career-flexInner__text{
    border:none;
    padding: 1rem 0 0;
  }
  .career-bold{
    font-size: 1.6rem;
    padding: 0 0 0.5rem;
  }
  .section__like{
    padding: 8rem 3rem 4rem;
  }
  .section__like-title{
    margin: 0;
  }
  .like_title{
    right:-4%;
    margin: -8rem 0 0;
  }
  .like__list{
    justify-content: space-between;
    padding: 2rem 0 0;
  }
  .like__list-item{
    padding: 0;
    margin: 3rem 0 0;
  }
  .like__list-text:before{
    left: 0;
  }
  .like__list-text:after{
    right: 0;
  }
  .like__list-text span{
    font-size: 1.6rem;
  }
  .like__list-text img{
    width: 9rem;
  }
  .like__list-image{
    width:13.6rem;
  }
  .like__list-image img{
    width:100%;
  }
  .section__vition{
    padding: 13rem 0 7rem;
  }
  .vition-content{
    margin: 3rem 3rem 0;
  }
}
@media(max-width:350px) {
  .strength-content{
    width: 28rem;
    height: 28rem;
  }
  .skill-design__body{
    flex-wrap: wrap;
  }
}