@charset "utf-8";
/* CSS Document */

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

li{list-style:none;}

html { scroll-behavior: smooth;}

a:link{
    color: #5E5E5E;
}
a:visited{
    color: #5E5E5E;
}
li a:active{
    color:#FEFFC6;
}
nav ul li a{
    position: relative;
    padding: 0 10px; 
}
nav ul li a::before{
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
  content: "";
  background-color: #b8b8b8;
  mix-blend-mode:color-burn;
  transition: 0.4s;
}
nav ul li a:hover::before{
    width:100%;
}

li a{
    text-decoration: none;
}

/*
フォント
.baloo-bhai-2-<uniquifier> {
  font-family: "Baloo Bhai 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.adlam-display-regular {
  font-family: "ADLaM Display", system-ui;
  font-weight: 400;
  font-style: normal;
}

// <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/
h2{
  font-family: "Baloo Bhai 2", sans-serif;
  /* font-optical-sizing: auto; */
  font-weight:600;
  font-style: normal;
  color: #5e5e5e;
  font-size:40px;
  letter-spacing: 0.07em;
}

p{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:16px;
  color: #5e5e5e;
}

h1{
  font-family:"Noto Sans JP", sans-serif;
  font-weight:550;
  font-style: normal;
  color: #5e5e5e;
  font-size:46px;
  letter-spacing: 0.07em;
}
/*--------------ヘッダー---------------*/
.top{
    height:100vh;
    background-color: #FEFEFE;
    background-image:url(../img/top03.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 70% 50%;
    /* border:1px solid red; */
}
header{
    display:flex;
    align-items: flex-end;
    padding: 0  5% 0 4%;
    /* border:1px solid red; */
}
.logo{
    margin-right: auto;
    font-family: "ADLaM Display", system-ui;
    font-weight: 400;
    font-style: normal;
    color: #5E5E5E;
    font-size:45px;
    margin-top:2%;
}
.top nav{
    display:flex;
    justify-content: flex-end;
}
.top nav ul{
    display:flex;
    list-style: none;
    /* border:1px solid red; */
}
.top nav ul li{
    padding-left:65px;
    font-size: 17px;
    font-family: "Baloo Bhai 2", sans-serif;
    /* font-optical-sizing: auto; */
    font-weight:450;
    font-style: normal;
    color: #5E5E5E;
    letter-spacing: 0.02em;
}

/*--------------Message---------------*/
.message{
    background-color: #C6FCFF;
}
.message .in{
    max-width: 1200px;
    padding: 8% 0 7.5% 0;
    margin:0 auto;
}
.message .box{
    background-color: #FEFEFE;
    width:80%;
    margin:0 auto;
    padding: 6% 7% 7% 7% ;
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border:1px solid red; */
}
.message .box h2{
    margin-bottom: 4%;
}
.message .box p{
    line-height: 2em;
}

/*--------------Skill---------------*/
.skill{
    background-color: #FEFFC6;
}
.skill .in{
    max-width: 1200px;
    padding: 8% 0 7% 0;
    margin:0 auto;
}
.skill .box{
    background-color: #FEFEFE;
    width:80%;
    margin:0 auto;
    padding: 6% 0 6% 0;
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border:1px solid red; */
}
.skill .box h2{
    margin-bottom: 2%;
}
.skill_box{
    width:70%;
    display:flex;
    justify-content:space-between;
    /* border: 1px solid red; */
}

/*--------------Works---------------*/
.works{
    background-color: #FFFFEC;
    display:flex;
    flex-direction: column;
    align-items: center;
    /* border:1px solid red; */
}
.works .in h2{
    text-align: center;
    margin:9% 0;
}
.works .in{
    /* border:1px solid black; */
    width:63%;
}
.web_list{
   margin-top:15%;
   display:grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 6%;
}
.web_list .item{
    margin-bottom: 15%;
}
.graphic_list{
    margin-top:20%;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 3%;
}
.graphic_list .item{
    margin-bottom: 20%;
}
.personal{
    width:fit-content;
    padding: 5px 40px;
    border-radius: 20px;
    background-color: #D8FFE7;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #5E5E5E;
    letter-spacing: 0.2em;
    margin:1%;
}
.official{
    width:fit-content;
    padding: 5px 40px;
    border-radius: 20px;
    background-color: #DFF2FF;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #5E5E5E;
    letter-spacing: 0.2em;
    margin:1%;
}
.item p{
    margin-left:2%;
}

/*--------------Contact---------------*/
.contact{
    width:100%;
    margin-bottom: 5%;
}

.contact .box{
    background-color: #FEFEFE;
    width:60%;
    margin:12% auto 0 auto;
    padding-top:4%;
    padding-bottom: 5%;
    border-radius: 150px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border:1px solid red; */
}
.contact .box h2{
    margin-bottom: 1%;
}
.contact .box p{
    font-size: 20px;
    font-weight:400;
    letter-spacing: 0.02em;
}

/*--------------footer---------------*/
footer{
    background-color: #FEFFC6;
    padding:5% 15% 4% 15%;
    font-size:16px;
    display:flex;
    justify-content: space-between;
}
footer ul{
    display:flex;
}
footer li{
    padding-right: 40px;
    font-size: 17px;
    font-family: "Baloo Bhai 2", sans-serif;
    /* font-optical-sizing: auto; */
    font-weight:450;
    font-style: normal;
    color: #5E5E5E;
    letter-spacing: 0.02em;
}

/*--------------下層ページ---------------*/
.works_top nav{
    display:flex;
    justify-content: flex-end;
}
.works_top nav ul{
    display:flex;
    list-style: none;
    /* border:1px solid red; */
}
.works_top nav ul li{
    padding-left:65px;
    font-size: 17px;
    font-family: "Baloo Bhai 2", sans-serif;
    /* font-optical-sizing: auto; */
    font-weight:450;
    font-style: normal;
    color: #5E5E5E;
    letter-spacing: 0.02em;
}
.wrapper{
    padding: 3%;
    display:flex;
    gap:4%;
    margin-top:2%;
}
.left{
    max-width:55%;
    display:flex;
    flex-direction: column;
    align-items:flex-end;
    /* border:1px solid black; */
}
.url{
    margin-top:2%;
    margin-right:10px;
}
.right{
    max-width:38%;
    /* border:1px solid black; */
}
.right .personal{
    width:160px;
    padding: 6px 40px;
    border-radius: 20px;
    background-color: #D8FFE7;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #5E5E5E;
    letter-spacing: 0.2em;
}
.right .official{
    width:260px;
    padding: 6px 40px;
    border-radius: 20px;
    background-color: #DFF2FF;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #5E5E5E;
    letter-spacing: 0.2em;
}
.right .box{
    display:flex;
    /* border:1px solid red; */
}
.title{
    margin-top:2%;
    margin-left:1%;
    width:100%;
    display:flex;
    justify-content: space-between;
    /* border:1px solid red; */
}
.three{
    width:22%;
    display:flex;
    margin-top:1%;
    margin-left:2%;
    gap:3%;
}
.text{
    padding:5%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.text .box01{
    border:1px solid #b8b8b8;
    border-radius: 20px;
    margin-top:7%;
    padding:9%;
    width:55%;
    /* aspect-ratio: 1/1; */
    display:flex;
    justify-content: center;
}
.text .box02{
    margin-left:10%;
    display: flex;
    align-items: flex-end;
    /* border-bottom: 1px solid #b8b8b8; */
}
.text .box02 p{
    border-bottom: 1px solid #b8b8b8;
    padding:2px 25px;
    font-size: 20px;
    letter-spacing: 0.05em;
}
.btn{
    display:flex;
    justify-content: space-between;
    margin:2% auto 5% auto;
    width:68%;
    /* border:1px solid red; */
}
.btn p{
    letter-spacing: 0.08em;
}