@charset "utf-8";



@media screen and (max-width:800px) {
.header{
  height: auto;
  /* height: 50px; */
  /* height: 44px; */
    top: 0;
    z-index: 1000;
   
  
}

.toogle__flex{
  display: flex;
width: 100%;
/* height px　指定？ */
}

.header__title{
  margin:8px 0 8px 7%;
  letter-spacing: 0.48px;
width: 72%;
}
.header__sp__only{
  display: flex;
  flex: 1;
  width: 14%;
  border-right: 1px solid var(--txt-color);
  border-left: 1px solid var(--txt-color);
  height: 100%;
  align-items: stretch;
}
.header__sp__only:last-of-type{
  border: none;
}



/* toogle open */

.header__toogle__btn {
  position: relative;
  width: 20px;
  height: 16px;
  cursor: pointer;
}

.toogle-open {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: var(--txt-color);
  transition: 0.3s;
  transform-origin: center;
}


.toogle-open:first-of-type { transform: translate(-50%, -6px); }
.toogle-open:nth-of-type(2) { transform: translate(-50%, 0); }
.toogle-open:last-of-type { transform: translate(-50%, 6px); }

/* active (toogle-close) */
.header__toogle__btn.active .toogle-open:nth-child(1) {
  transform: translate(-50%, 0) rotate(45deg);
}
.header__toogle__btn.active .toogle-open:nth-child(2) {
  opacity: 0;
}
.header__toogle__btn.active .toogle-open:nth-child(3) {
  transform: translate(-50%, 0) rotate(-45deg);
}








  .nav__header{
  /* width: calc(100% - 2.67% * 2); */
  width: calc(100% - 30px);
  /* height: calc(100vh - 52px); */
  height: calc(100vh - 50px);
  position: absolute;
  top: 40px;
left: 0;
z-index: 100;
transform: translate(-110%);
transition:transform 0.4s;
background-color: #FAFAFA;
background-image :url(../portfolio__comps/noise.png) ;
  background-position: center;
display: flex;
align-items: flex-start;
border-top: 1px solid var(--txt-color);
}
.nav__header.active{
 transform:translateX(0);
 width: 100%;
}
.nav__topic{
  height:240px;
  width: 100%;
}
.header__nav__box{
  flex-direction: column;
  height: auto;
  width: 100%;
  align-items: baseline;

}



.header__nav__item:first-of-type{
 border: 1px solid var(--txt-color);
  border-bottom: none;
  border-top: none;
}
.header__nav__item{
  height: 60px;
  width: 100%;
  border: 1px solid var(--txt-color);
  border-bottom: none;
  padding-left:calc(6.76% + 0.0156px);
}
.header__nav__item:last-of-type{
  margin-right: 0;
   border: 1px solid var(--txt-color);
  
}

}

.footer__loop {
  display: flex;
  flex-shrink: 0;
  animation: loopScroll 23s linear infinite;
}

/* aboutpage 全体指定 */

.section__header{
  border-bottom: 1px solid var(--txt-color);
  width: 100%;
}

/* sectionフォント指定 */
.page__about__topic{
  display: flex;
  align-items: baseline;
color: var(--txt-color);
font-family: "Minion Pro","Lusitana";
font-size: var(--section-about__font-size);
font-weight: 700;

padding-top: 88px;
padding-bottom: 24px;
margin-left: var(--section-margin);
line-height: 1;

}

.page__about__subtittle {
  color: var(--txt-color);
font-family: "Kozuka Mincho Pro","Zen Old Mincho";
font-size: var(--section-about__subfont-size);
font-weight: 700;
letter-spacing: 0.39px;
margin-left:var(--third-margin) ;
}

/* sectionフォント指定 */


/* section　border */
.section__about__page__about{
  border: 1px solid var(--txt-color);
  border-top: none;
}

.page__about__content_{
  width: 100%
}
/* SP 全体指定 */
@media screen and (max-width:768px) {
  .page__about__topic{
    flex-direction: column;
    padding-top:72px;
padding-bottom: 24px;
  } 
  .page__about__subtittle{
margin: 0;
  }
}
/* SP 全体指定ここまで */

/* ここから　about */

/* img size */
.about__profile{
  display:flex ;
  align-items: center;
  gap: 0;
}

.about__image{
  display: inline-block;
  flex-shrink: 0;
  width:fit-content;
  margin: 72px 0 72px var(--section-margin)
}

.about__page__image__photo{
  display: block;
  width:calc(27.9vw + 0.25px);
}



.about__txt{
margin-left:calc(9.56% + 0.094px) ;
}

.about__description{
  text-align: justify;
  color: var(--txt-color);
font-feature-settings: 'palt' on;
font-family: "Kozuka Mincho Pro","Zen Old Mincho";
font-size: 1.6rem;
font-weight: 400;
line-height: 32px;
letter-spacing: 0.64px;
margin: 32px 7.61% 0 0;

}

/* about spここから */
@media screen and (max-width:768px){
  .about__profile{
    display: block;
  }
  
  /* 画像指定だよ */
.about__image{
margin: 32px 4.41% 24px;
}
.about__page__image__photo{
  width: auto;
}
/* ここからテキスト */
.about__txt{
  margin-left: 7%;
}
.about__description{
  margin:24px 7.524% 32px 0;
  line-height: 24px;
}
}

/* about SP ここまで */
/* aboutここまで */








/* skillここから */

.section__about__page__Skill{
  border: 1px solid var(--txt-color);
  border-top: none;
  width: 100%;
}

.page__about__content__skill{
  width: 100%;
 }

.skill__item{
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  width: 100%;
  /* height: calc(38.49vh - 0.36px); */
}

.skill__item02{
   border-top: 1px solid var(--txt-color);
}



.skill__number{
  display: flex;
  align-items: center;
  justify-content: center;
   border-right: 1px solid var(--txt-color);

   width: calc( 14.84% - 0.65px);
  flex-shrink: 0;
}




.skill__number__txt{
  color: var(--txt-color);
font-family: "Minion Pro","Lusitana";
font-size: var(--skill-font-size);
font-weight: 400;
letter-spacing: 2.4px;
/* 後ほど　height 調整 */
}
/* img　ここから */

.skill__image{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(29.58% + 0.03px );
  border-right: 1px solid var(--txt-color);
  padding: 72px var(--secound-margin) 32px var(--third-margin);
  flex-shrink: 0;
}


.skill__image__photo{
 height: auto;
  width: 100%;

}

/* imgここまで */


/* 本文ここから */

.skill__details{
  flex: 1; 
  margin: 72px 0 72px var(--section-margin) ;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.skill__title{
  color: var(--txt-color);
font-family: "Minion Pro","Lusitana";
font-size: var(--font-size-category);
font-weight: 700;
}

/* 概要の箱だよ */
/* skill__description__content */

.skill__description{
  color:var(--txt-color);
font-feature-settings: 'palt' on;
font-family: "Kozuka Mincho Pro","Zen Old Mincho";
font-size: var(--base-font-size);
font-weight: 400;
line-height: 26px;
text-align: justify;
margin: 40px 2.38% 0 0;
letter-spacing: 0.64px;
}

 .skill__tag__box{
  display: flex; 
  align-items: center;
  margin-top: 16px;
  width:100%;
 }







/* カテゴリー線の指定だよ */
.skill__tag__list::before {
  content: '';
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--txt-color);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease;
}
.skill__tag__list::after {
  content: '';
  position: absolute;
 
  left: calc(100% + 12px);
  width: 1px;
  height: 2.4777vh;
  background: var(--txt-color);
 
}
.skill__tag__list:last-of-type:after {
 display: none;
 
}

.skill__tag__list.active::before {
  width: 100%;
}





 .skill__tag__list{
  color: var(--txt-color);
font-family: "Minion Pro","Lusitana";
font-size: var( --base-font-size);
font-weight: 400;
margin: 0 24px 24px 0;
border-right: 1px solid var(--txt-color);

  /* ボタン指定 */
  background: none;
  border: none;
  cursor: pointer;
  position: relative; 
  transition: opacity 0.3s ease;
 }
 .skill__tag__list:hover {
  opacity: 0.7;
}







.skill__tag__list:last-of-type{
  border-right: none;
}



/* Skill SP ここから */
@media screen and (max-width:768px) {
.skill__item{
  flex-direction: column;
}

.skill__number{
  width: auto;
  border-right: none;
  border-bottom: 1px solid var(--txt-color);
}
.skill__number__txt{
line-height: 1;
margin: 8px 0;
}

/* ここから画像 */
.skill__image{
  border-right: none;
  border-bottom: 1px solid var(--txt-color);
  width: 100%;
  padding: 16px 0;
}
.skill__image__photo{
  width:61.984% ;
}
/* ここからテキスト */
.skill__details{
margin: 32px 0 24px  ;
}
.skill__title{
  font-size: 1.9rem;
  margin-left: var(--section-margin);
}

.skill__description{
  margin:24px   var(--section-margin) 0;
  line-height: 24px
}


.skill__tag__box{
  margin: 16px var(--section-margin) 0;
  border-left:none ;
  width: 100%;
}



.skill__tag__list{
  margin:0 24px 0 0 ;
}

.skill__tag__list::after {

  height: 20px;
 
 
}

}




@media screen and (max-width:320px) {
 
  .skill__tag__tittle{
  margin-left:0;
}
.skill__tag__list{
  margin:16px 16px 16px 0 ;
}
}
/* SKILL SPここまで */
/* skill ここまで */


/* strength　ここから */
 
 .section__about__page__strength{
  border: 1px solid var(--txt-color);
  border-top: none;
  border-bottom: none;
 }

.page__about__content__strength{
width: 100%; 
  display: grid;
    grid-template-columns: 1fr; 
    position: relative;
}


.strength__item {
   
  display: grid;
  grid-template-columns: 160px 1fr; /* タイトルは自動、本文は残り */
  padding: 72px 0 104px 0;
   margin-left: 7%;
   text-align: start;
   position: relative;
}

.strength__item::after{
  content: "";
  display: block;
  position: absolute;
  right: 58%;
  transform: translateX(55%);
  width: 100%;
  height: 1px;
  background-color: var(--txt-color);
}

.strength__item:first-of-type:after{
 display: none;
}







.strength__title {
    flex-shrink: 0;
    width: auto;
    color: var(--txt-color);
    font-family: "Kozuka Mincho Pro","Zen Old Mincho";
    font-size: var(--main--topicfont);
    font-weight: 700;
    letter-spacing: 0.96px;
 
    white-space: nowrap;
    text-align: left;
}

.strength__description {
    color: var(--txt-color);
    font-feature-settings: 'palt' on;
    font-family: "Kozuka Mincho Pro","Zen Old Mincho";
    font-size: var(--base-font-size);
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.48px;
    text-align: justify;
    margin-left: calc(13.67% + 0.062px);
    margin-right: calc(19.55% + 0.016px);
    
}


/* STRENGTH　SPここから */
@media screen and (max-width:768px){
  .strength__item{
   margin-left: 0; 
   grid-template-columns: 2fr;
   padding: 32px 0 64px 0 ;
   margin: 0 calc(6.61% + 0.0156px);
   border-bottom:1px solid var(--txt-color) ;
  }
  .strength__item:last-of-type{
    border: none;
  }
  .strength__item::after{
    content: "";
    display: none;
  }

  .strength__title{
    letter-spacing: 0.57px;
  }

  .strength__description{
    line-height: 23px; 
  letter-spacing: 0.42px;
  }

  .strength__description{
    margin:24px 0 0;
  }
}
/* STRENGTHここまで */




/* ここからlike */

.section__about__page__like{
  width: 100%;
  border-left: 1px solid var(--txt-color);
  border-right: 1px solid var(--txt-color);
}

.like__item{
 display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 32px; /* 画像の間隔（任意） */
  max-width: 800px; /* 任意 */
  margin: 0 auto;
}

.like__photo{
width: 100%;
  height: auto;
  display: block;
}