/* 基本スタイル */
html{
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  scroll-behavior: smooth;
  font-size: 62.5%;
  color: #333;
}
body {
  margin: 0;
  overflow-x: clip;
}
.sp{
  display: none;
}
@media screen and (max-width:600px) {
  .sp{
    display: block;
  }
  .pc{
    display: none;
  }
}

header.pc{
  margin-bottom: calc((100vh - 1250px) * -1);
}

h2.sec-title{
  font-size: 11rem;
  margin-left: 30px;
  @media (max-width:600px) {
    font-size: 6rem;
  }
}
h3.sub-title{
  font-size: 8rem;
  margin-left: 50px;
  @media (max-width:600px){
    font-size: 4rem;
  }
}

/* フォント */
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", serif;
  font-style: normal;
}


/* 一番上のヘッダー */
.head-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #202f55;

  .top-title-img{
    width: 15vw;
    margin: 10px 0 12px 45px;
    @media (max-width:600px) {
      width: 180px;
      padding: 10px 20px;
    }
  }
  .insta-icon-wrapper{
    margin-right: 35px;
  }
  .insta-icon{
    width: 50px;
  }
}

@media (max-width:600px) {
  .top-title-img{
    width: 180px;
    padding: 10px 20px;
  }
  h3.sub-title{
    font-size: 4rem;
  }
}

/* スマホのヘッダー */
.sp-top-nav-icon{
  display: flex;
  justify-content: center;
  margin: 20px 0;
  
  img{
    width: 40px;
    margin: 0 11px;
  }
}
.openclose-child{
  display: none;
  padding: 0 30px;
  margin: 20px 0;

  img{
    width: 40px;
  }
}

/* 写真とABOUTの部分 */
.accordion {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;

  .accordion-btn {
    cursor: pointer;
    font-size: 25px;
    border: none;
    z-index: 2;
    transform: rotate(-90deg);
    position: relative;

    &::before{
      content: "";
      position: absolute;
      background-color: #262626;
      width: 20px;
      height: 3px;
      left: -15%;
      margin-left: -15px;
      top: 45%;
      margin-top: -2.5px;
      transition: all 1s;
    }
    &::after{
      content: "";
      position: absolute;
      background-color: #262626;
      width: 3px;
      height: 20px;
      left: -19%;
      margin-left: -2.5px;
      top: 59%;
      margin-top: -15px;
      transition: all 1s;
    }
  }
  .accordion-panel {
    position: absolute;
    top: 0;
    left: -100%;
    width: 650px;
    height: 100%;
    background-color: white;
    color: black;
    padding: 20px;
    margin-left: 65px;
    box-sizing: border-box;
    transition: left 0.5s ease;
    z-index: 2;
  }
  .accordion-panel.open {
    left: 0;
  }
}
.accordion-btn.is-accordion--open::before{
  transform: rotate(180deg);
}
.accordion-btn.is-accordion--open::after{
  transform: rotate(-90deg);
}
.prof{
  font-size: 1.6rem;

  .prof-name{
    font-size: 2.4rem;
  }
  dt{
    margin-top: 24px;
    letter-spacing: 1.2px;
    font-weight: normal;
  }
  dd{
    margin-top: 6px;
  }
  .about-icon{
    width: 50px;
    margin-right: 2px;
  }
}
.top-img {
  width: 100%;
  height: auto;
  z-index: 1; /* 背面に配置 */
}



.menu{
  margin-top: 7vh;
  
  p{
    font-size: 3.5rem;
    padding: 25px 0 25px 90px;
    margin: 25px 0;
  }
  .marker {
    position: relative;
    z-index: 1;

    &::before {
      background: #000;
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      margin: auto;
      transform: scale(0, 1);
      transform-origin: right top;
      transition: transform .3s;
      z-index: -1;
    }
    &:hover {
      color: #fff;
    }
    &:hover::before {
      transform-origin: left top;
      transform: scale(1, 1);
    }
  }
}

/* SERVICE */
.service-section{
  background-color: #2971B1;
  color: #eee;
  padding: 4vh 0;
  margin-bottom: 30vh;
  @media (max-width:600px){
    margin-bottom: 10vh;
  }

  .service-list{
    display: flex;
    justify-content: space-around;
    width: 80vw;
    margin: 4vh auto;
    @media (max-width:600px){
        flex-direction: column;
    }
  
    li{
      text-align: center;
      margin: 0 4vw;
      @media (max-width:600px){
        margin-bottom: 40px;
      }
  
      h3{
        font-size: 2.2rem;
      }
      img{
        width: 100px;
        margin: 3vh 0;
        @media (max-width:600px){
          width: 80px;
          margin: 1vh 0;
        }
      }
      p{
        text-align: left;
        font-size: 1.6rem;
        letter-spacing: 1px;
        line-height: 1.4;    
      }
    }
  }
}


/* WORKS */
.content-list{

  li{
    margin-left: 80px;

    dt{
      overflow: hidden;

      img{
        width: 100%;
      }
    }
    dt.frame{
      border: solid 1.5px #333;
    }
    dt.radius{
      border-radius: 20px;
    }

    dd{
      font-size: 1.6rem;
      margin: 10px 10px;
      line-height: 1.3;
      &:nth-last-of-type(3){
        border-bottom: 1px solid #444;
      }
    }
  }
}
.works-title{
  font-weight: 600;
}
.soft-icon{
  display: flex;
}
.soft-icon img{
  margin-right: 5px;
  width: 55px!important;
}
.youtube-movie{
  width: 560px;
  height: 315px;
  @media (max-width:600px){
    width: 300px;
    height: 169px;
  }
}

/* CONTACT */
.align-center {
  text-align: center;
}
.get-in-touch {
  max-width: 650px;
  margin: 10vh auto;
  @media (max-width:600px){
    margin: 4vh 5px;
  }
}
.contact-form {
  .form-field {
     position: relative;
     margin: 32px 0;
  }
  .input-text {
     display: block;
     width: 100%;
     height: 36px;
     border-width: 1px;
     border-color: #000;
     font-family: Lusitana, serif;
     font-size: 18px;
     line-height: 26px;
     font-weight: 400;
     padding-left: 10px;
     }
  }
  .label {
     font-family: Lusitana, serif;
     font-size: 18px;
     line-height: 26px;
     font-weight: 400;
     color: #888;
     cursor: text;
     transition: transform .2s ease-in-out;
  }
  
  .submit-btn {
     display: inline-block;
     background-color: #202f55;
     color: #fff;
     font-family: Raleway, sans-serif;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 16px;
     line-height: 24px;
     padding: 10px 30px;
     border: none;
     cursor: pointer;
     border-radius: 5%;
  }
.back-btn-wrapper{
  text-align: center;
  margin-top: 30px;
}
.contact-back-btn{
  border: 1px solid #202f55;
  border-radius: 5%;
  color: #202f55;
  padding: 15px 30px;
  font-size: 12px;
}

/* ハイブリッドスクロール */
article:not(.sticky) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}
article h2 {
  text-align: center;
}
.horizontal_scroll {
  --sticky-container-height: 100vh;
  height: var(--sticky-container-height);
  min-height: 100vh;
  box-sizing: border-box;

  .sticky {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 80vh;
    @media (max-width:600px){
      padding-top: 60px;
    }
  }
  .scroller {
    display: flex;
    align-items: flex-start;
    overflow: auto;
  }
  .scroller.nobar {
    overflow: hidden;
  }
  .scroller > * {
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.flex-basis-s > * {
  flex-basis: 300px;
}
.flex-basis-l > * {
  flex-basis: 600px;
}
@media (max-width:600px){
  .flex-basis-s > * {
    flex-basis: 250px;
  }
  .flex-basis-l > * {
    flex-basis: 300px;
  }
}

footer{
  padding: 35px 130px;
  background-color: #202f55;
  color: #eee;
  @media (max-width:600px){
    padding: 35px 0;
  }

  .foot-nav{
    font-size: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    @media (max-width:600px){
      flex-direction: column;
    }

    ul{
      display: flex;

      li{
        margin-right: 30px;
        font-size: 2rem;
        @media (max-width:600px){
          margin-top: 30px;
          margin-left: 30px;
        }

        img{
          width: 50px;
        }
      }
    }
  }
}

/* ハンバーガーメニュー */
/* ボタン部分 */
.openbtn{
	position: fixed;
  top: 14px;
  right: 20px;
	background:#202f55;
	cursor: pointer;
  width: 50px;
  height:50px;
	border-radius: 5px;
  z-index: 9999;

  span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background: #fff;

    &:nth-of-type(1) {
      top:15px;	
        width: 45%;
    }
    
    &:nth-of-type(2) {
      top:23px;
        width: 35%;
    }
    
    &:nth-of-type(3) {
      top:31px;
        width: 20%;
    }
  }
}
.openbtn.active span{
  &:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-135deg);
    width: 30%;
  }
  &:nth-of-type(2) {
    opacity: 0;
  }
  &:nth-of-type(3){
      top: 30px;
      left: 18px;
      transform: translateY(-6px) rotate(135deg);
      width: 30%;
  }
}

/*メニュー部分*/
#g-nav.panelactive{
  position:fixed;
  z-index: 999;
  top: 0;
  width:100%;
  height: 100vh;
}
.circle-bg{
  position: fixed;
  z-index:3;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  left:-50px;
  bottom:-50px;
  transition: all .6s;
}
.circle-bg.circleactive{
transform: scale(50);
}
#g-nav-list{
  display: none;
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#g-nav.panelactive #g-nav-list{
   display: block;
}
#g-nav ul {
  opacity: 0;
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
#g-nav.panelactive ul {
  opacity:1;
}
#g-nav li{
text-align: center; 
list-style: none;
font-size: 2rem;
padding: 30px;
}
#g-nav li a{
color: #333;
text-decoration: none;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}

.panel-nav{
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  .panel-nav-list{
    display: flex;
    justify-content: space-between;
    text-align: center;
    
    li{
      width: 50%;
      font-size: 1.6rem;
      padding: 10px;
    }
  }
  .panel-nav-list > :nth-child(odd){
    border-right: 1px solid #ccc;
  }
}