@charset "utf-8";

/* 共通部分 */
html {
    font-size: 62.5%;
    cursor: auto;
    scroll-behavior: smooth;
    scroll-padding-top:80px;
}
body{
    font-size:1.6rem;
    line-height: 1.4;
}
div.wrapper{
    width: 100%;
    height: auto;
}
a{
    touch-action: manipulation;
}
a.text-link{
    color:#4ab2c0;
}
header{
    position: sticky;
    top: 0;
    width: 100%;
    background: rgb(255 173 187 / 85%);
    z-index: 999;
}
div.header{
    padding: 35px 4% 32px 2%;
    height: 80px;
    margin:0 auto;
    align-items: center;
    display: flex;
    justify-content: flex-end;
}
header .header h1.site-logo{
    position:absolute;
    top: 2.3rem;
    left:2vw;
}
header .header h1.site-logo p{
    display: flex;
    align-items: center;
}

header .header ul{
    display:flex;
}
header .header ul li{
    margin-right:40px;
}

header .header ul li:last-child{
    margin-right:0;
}
header .header ul li a{
    /* font-size: 1.8rem; */
    transition: all 0.3s ease-in-out;
}
header .header ul li a:hover{
    color:#fff;
    letter-spacing: 3px;
}
header .burger-btn{
    display:none;
}
.top-image{
    position:relative;
    width: 100%;
    height: 420px;
    display: block;
    margin: 0 auto 2rem;
    background: #feeff2;
    position: relative;
}
.top-image img{
    display:block;
    max-width: 260px;
    position: absolute;
    top: -12px;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
main div.wrapper{
    margin: 0 50px;
}
/*タイトルイメージ*/
.title-img{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
    margin-left: 0px;
}
.title-img img:first-child{
    padding-bottom:5px;
}
.title-img .sab-text{
    margin-top:10px;
    font-size:20px;
}

div.about-group,div.sevice-group,div.works-group{
    margin-bottom: 4rem;
}
/*トップへ戻るボタン*/
.return_top::before{
    content: "▲\ATOP";
    font-size: 1rem;
    text-align: center;
    white-space: pre;
}
.return_top{
    background-color: rgb(255 173 187 / 85%);
    color: #333;
    text-dexoration: none;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    display: grid;
    justify-content: center;
    align-content: center;
    /* transform: rotate(-90deg); */
    transition: .4s;
    opacity: 0;
    visibility: hidden;
}
.return_top.active{
    opacity:1;
    visibility:visible;
}
/*ABOUT*/
div.about.about-group{
    margin-bottom:5.6rem;
}
div.about .self-intro{
    width:720px;
    margin:0 auto 2rem;
}
div.about header{
    margin-bottom:1.8rem;
}

div.about-group .self-intro{
    margin-bottom:40px;
}
div.about-group .self-intro{
    margin: 0 auto 1.6rem;
    width: 640px;
}
div.about-group .self-intro p.first-text{
    text-align: center;
    font-size: 32px;
    margin-bottom: 16px;
}
div.about-group .self-intro p{
    line-height: 1.4;
}
.about-cate-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -7px 0;
}
.about-cate-list li,.tag-list li{
    margin:8px;
}
.about-cate-list a,
.about-cate-list span{
    padding: 6px 14px;
    background-color: #fafafa;
    color: #4D606F;
    white-space: nowrap;
}
.c-btn{
    border-radius: 15px;
    border: 1px solid #ccc;
    font-family: Noto Sans JP,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,BIZ UDPGothic,Meiryo,sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: .05em;
    font-weight: 500;
    display: inline-block;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.about-cate-list li:hover a{
    display:block;
     color:#ff718a;
     border: 1px solid #ff718a;
 }
.profile-group{
    width:720px;
    margin:0 auto 5.6rem;
}
.profile-group h3{
    margin-bottom:3.2rem;
    text-align: center;
}
.profile-group h3 img{
    width:120px;
    margin-top: .8rem;
}
.profile-box{
    display: grid;
    gap:.8rem;
    width: calc(100% - 10px);
    grid-auto-rows: auto; 
    grid-template-columns: 20% 80%;  
}

  .box-items {
    font-size: 16px;
    padding: .25rem .25rem .25rem .5rem;
    color: #444;
    background-color: #fff; 
  }
    
  .box-title {
    font-weight: bold;
  }

/*sevice*/
.skill-list{
    display: flex;
    justify-content: center;
    width: 75%;
    margin: 0 auto;
}
.skill-list li{
    margin-left:3%;
    padding: 15px 15px;
    width: 32%;
    border: 1px solid #ccc;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.skill-list p.skill-icon{
    position:relative;
    width:100px;
    height:100px;
    margin-bottom: 10px;
}
.skill-list img{
    width:70%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.skill-list li:nth-of-type(2) img{
    width:85%;
}
.skill-list li p.list-title{
    text-align: center;
    margin-bottom: 16px;
    font-size: 2.4rem;
}
.skill-list li:first-child{
    margin:0;
}

/*works*/
main.works{
    margin-bottom:40px;
}

.works .title-img img:first-child{
    padding-bottom:0;
}
main h2{
    font-size: 3.2rem;
    text-align: center;
    /* margin-bottom:20px; */
}
.works h2:has(+div ul.tag-list){
    margin-bottom: 5px;
}
.tag-list{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    /* color: #00bcd5; */
    color: #bbb;
 }
/*
 .works-group ul.works-list{
    margin-bottom: 3%;
} */
.works-group ul.works-list:last-child{
    margin-bottom:0;
}
.works-list{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}
.works-list li{
    position:relative;
    width: 30%;
    height: 21.5vw;
    margin-top: 5px;
    margin-right: 1.5%;
    margin-bottom: 65px;
    margin-left: 1.5%;
    padding: 0;
    background: #fff;
    transition-duration: .5s;
}
.works-list li a{
    display:flex;
    align-items: center;
    box-shadow: 0 0 0 2px #F3F7FB;
    border-radius: 12px;
    background:#fff;
    overflow: hidden;
    height: 21.5vw;
}
.works-list li img,.works-list li video{
    object-fit: cover;
    width: 100%;
    height: inherit;
}
.works-list li:hover{
    transform: scale(1.07);
}
.works-list li:after{
    color:#333;
    display: block;
    margin: auto;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}
.works-list li a + span {
    padding: 5px 20px 4px;
    color: #000;
    text-align:center;
    display: block;
    padding-top:1rem;
}
.webpage-screen{
    width: 600px;
    display: flex;
    margin: 0 auto 3em;
}

.webpage-screen button{
    list-style: none;
    width: 300px;
    padding: 60px 0px;
    background: #fff;
    text-align: center;
    border-radius: 10px;
    border: 3px solid #999999;
}
.webpage-screen button:nth-child(1){
    margin-right:1em;
}
.modal{
    display:none;
    position:fixed;
    z-index:1000;
    left:0;
    top:0;
    height:100%;
    width:100%;
    overflow:auto;
    background-color: rgba(0,0,0,0.5);
}
.modal-content {
    background-color: #f4f4f4;
    margin: 20% auto;
    width: 96%;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
    animation-name: modalopen;
    animation-duration: 1s;
  }
@keyframes modalopen{
    from{opacity:0;}
    to{opacity:1;}
}
.modal-header h1 {
    margin: 1rem 0;
  }
  
  .modal-header {
    background: lightblue;
    padding: 3px 15px;
    display: flex;
    justify-content: space-between;
  }
  
  .modalClose {
    font-size: 3rem;
  }
  
  .modalClose:hover {
    cursor: pointer;
  }
  
  .modal-body {
    padding: 10px 20px;
    color: black;
  }
  .modal-body p img{
    width:100%;
  }


.webpage-long{
    width:980px;
    margin-bottom:  60px;
}
.webpage-long img{
    display: block;
    margin:0 auto;
    width:800px;
}
.works-group section.works-box{
    margin-bottom:4rem;
}
.works-group section.other-box h3{
    margin-bottom: 3.2rem;
    text-align: center;
}
.works-group section.other-box h3 img{
    width: 120px;
}
/*WorksDetailページ*/
.website{
    width:1080px;
    margin:0 auto;
}
#webapp .website-view img{
    margin-top:10px;
    width: 250px;
}
.website-view .bnr-img{
    display: block;
    margin-top:2rem;
}
.website h2{
    text-align: center;
    font-size: 3.2rem;
    margin: 60px 0 40px;
}
.website h4{
    font-size: 2rem;
}
.website-txt-group h4{
    margin-bottom: 16px;
    border-bottom: 2px solid #ff718a;
    width: 200px;
    padding-bottom: 5px;
}
.website-txt{
    margin-bottom:40px;
}
.website-view{
    margin-bottom:6rem;
}
.website-view h4{
    text-align: center;
}
.website-txt-group{
    width:800px;
    margin:0 auto 60px;
}
.website-view img{
    display:block;
    margin:0 auto;
}
/*Contactページ*/
main.contact section{
    width:740px;
    margin:0 auto 40px;
}
.contact-txt{
    text-align:center;
}
.contact-txt span.sup-txt{
    color: #999999;
    margin: .5rem 0 1rem;
    display: inline-block;
}
form div.contact-form-wrap{
    padding: 64px;
    width: 650px;
    margin: 0 auto;
}
form div.contact-form-wrap > div{
    margin-bottom:40px;
}
form.contact-form input,form.contact-form textarea{
    width: 100%;
    padding:18px 16px;
    height:50px;
    background: #f5f3f3;
    border-radius: 6px;
}
form.contact-form label.inp-title{
    display: block;
    margin-bottom:8px;
}
form.contact-form textarea{
    width:100%;
    height:200px;
}
form button{
    appearance: none;
    margin: 0 auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
}
form button{
  position: relative;
  display: block;
  padding: 1em 2em 1em 1em;
  width: 175px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 1;
  background: #5bbee5;
  background: linear-gradient(to right, #4ab2c0, #4ab2c0);
  background:#73c6d1;
  text-indent: 0.1em;
  letter-spacing: 0.1em;
  height: 5rem;
  border-radius: 2em;  
}
form button:after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.5em;
  margin: auto;
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  transform: rotate(45deg);
  transition: right 0.5s;
}
form button:hover:after{
  right: 1em;
}
/*jQuery できることまとめ*/
dl.faq{
    margin:0 auto 6rem;
    width:80%;
 }
  dl.faq dt,dl.faq dd{
    padding:10px;
    border:1px solid #dbdbdb;
    background: #fff;
    border-radius: 2px;
}
  dl.faq dt{
    position:relative;
    cursor: pointer;
    border-top:0;
    background:#f2f2f2;
    display: block;
  }
  dl.faq dt:first-child{
    border-top: 1px solid #ccc;
  }
    dl.faq dd{
    background:#fff;
    margin-bottom:10px;
  }
  dl.faq dd{
    display:none;
  }
  dl.faq dt.open{
    border-bottom:0;
  }
  
  dl.faq dt span{
    position:absolute;
    top:1.2rem;
    right:2rem;
    display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 1;
    width: .8em;
    height: .8em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-25%) rotate(135deg);
  }
  dl.faq dt.open span{
    position: absolute;
    top: 1.8rem;
    right: 2rem;
    display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 1;
    width: 0.8em;
    height: 0.8em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-25%) rotate(-45deg);
}
/*共通フッター*/
footer{
    width: 100%;
    padding:4.8rem 2%;
    background: #f5f3f3;
}
footer p.title{
    font-size: 2.4rem;
    font-family: Rubik,Noto Sans JP,sans-serif;
    font-weight: 400;
    letter-spacing: .15em;
    line-height: 1.4;
    text-align: center;
    margin-bottom:40px;
}

footer .footer-sns-list{
    display: flex;
    margin: 0 auto;
    justify-content: center;
    margin-bottom:40px;
}
footer .footer-sns-list li{
    margin-right:20px;
}
footer .footer-sns-list li:last-child{
    margin-right:0;
}
footer .footer-sns-list li img{
    display: block;
    width:40px;
    height:40px;
}
footer .copyright{
    text-align: center;
    font-size: 1.4rem;
}

/*768以下のPCタブレット用レスポンシブ*/
@media only screen and (max-width: 768px) {
    header .header ul {
        display: flex;
        flex-direction: column;
    }
    header .header ul li {
        margin-right: 0px; 
   }
   header .header ul li a{
    font-size: 3rem;
   }
   header .header ul li a:hover{
    color:#4ab2c0;
   }
    header .burger-btn{
        display:block;
    }
    .noscroll{
        overflow: hidden;
      }
      .nav-wrapper.slide-in {
        transform: translateX(0);
    }
    .nav-wrapper {
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        transform: translateX(100%);
        transition: transform .3s;
        width: 100vw;
        z-index: 2; /*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/
    }
    /* 以下、ハンバーガーボタン */
    .burger-btn{
        display: block;      
        width: 39px;      
        height: 39px;      
        position: relative;      
        z-index: 3;
        border:none;
        background: #fb899c;
        border-radius: 3px;
    }    
    .bar{      
        width: 20px;      
        height: 1.5px;        
        display: block;      
        position: absolute;      
        left: 50%;      
        transform: translateX(-50%);      
        background-color: #fff;    
    }    
    .bar_top{   
        top: 10px;
    }
    .bar_mid{    
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .bar_bottom{
        bottom: 10px;
    }
    .burger-btn.close .bar_top{      
        transform: translate(-50%,10px) rotate(45deg);      
        transition: transform .3s;    
      }    
      .burger-btn.close .bar_mid{      
        opacity: 0;       
        transition: opacity .3s;    
      }    
      .burger-btn.close .bar_bottom{      
        transform: translate(-50%,-8px) rotate(-45deg);      
        transition: transform .3s;    
      }
    /* 以下、ハンバーガーメニュー */
    .nav-wrapper{      
        width: 100vw;      
        height: 100vh;      
        position: fixed;      
        top: 0;      
        left: 0;
        transition: all .5s;       
        z-index: 2;     
    }     
    .header-nav{        
        width: 100%;        
        height: 100%;          
        background-color: #feeff2;      
        z-index: 2;   
        opacity:.9;   
    }     
    .nav-list{        
        display: block;        
        position: absolute;        
        top: 50%;        
        left: 50%;        
        transform: translate(-50%,-50%);        
        text-align: center;      
    } 
    .nav-item{        
        margin-right: 0;        
        margin-bottom: 40px;      
    }
    /* メニューオープン時 */
    .nav-wrapper.fade {
        visibility: visible;
        opacity: 1;
    }
    div.about-group .self-intro p:first-child {
        text-align: left;
    }
    div.about-group .self-intro {
        margin: 0 auto 1.8rem;
        width: 90%;
    }
    .skill-list{
        width:96%;
        margin:0 2%;
        display: block;
    }
    .skill-list{
        width:96%;
        margin:0 2%;
        display: block;
    }
    .skill-list li,.skill-list li:first-child{
        width:100%;
        margin: 0;
        margin-bottom:2rem;
    }
    .works-list{
        width:96%;
        margin:0 2%;
    }
    .works-list li{
        width: 47%;
        height:26vw;
        margin-bottom:60px;
    }
    .works-list li a,.works-list li img{
        height: 26vw;
    }
}

/*スマホ*/
@media screen and (max-width: 648px) {
    /*ヘッダー*/
    header .header h1.site-logo{
        position:absolute;
        left:2vw;
        margin-top:3px;
    }
    header .header h1 img{
        width:85%;
    }
    /*Aboutページ*/
    .profile-group{
        width:96%;
        margin:0 auto 4rem;
    }
    .profile-box {
        grid-auto-columns: auto;
    }
    .box-items {
        grid-column: 1 / 3;
    }
    /*Worksページ*/
    .website{
        width: 96%;
        margin: 0 2%;
    }
    .works-list li{
        width: 90%;
        margin: 0 auto;
        margin-bottom: 8rem;
    }
    .website-view img,.website-txt-group,.webpage-long img{
        width:100%;
    }
    
    .works-list li,.works-list li a,.works-list li img{
        height: 50vw;
    }
    /*Contactページ*/
    .contact-txt {
        text-align: left;
        margin-bottom: 2.5rem;
    }

    main.contact section {
        width: 96%;
        margin: 0 2% 6rem;
    }

    form div.contact-form-wrap {
        padding:0;
        width: auto;
        margin: 0 2%;
    }
    /* 詳細ページボタンメニュー */
    .webpage-screen{
        width:100%;
    }

}