@charset "utf-8";
@media screen and (max-width:640px) {
body {
    font-family: "Roboto", sans-serif;
    font-size: 12px;
}
h1,nav,h2,h3,#footer-logo {
    font-family: "Cabin Sketch", sans-serif;
    font-weight: 400;
    font-style: normal;
}
#main-span {
    font-family: "Cedarville Cursive", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    border-radius: 38%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2;
    background-image: url(../../images/h1back.png);
    background-position: center;
    border: 2px solid #fff;
    background-size: 140%;
    background-repeat: no-repeat;
}
.pagetop__arrow {
    font-size: 10px;
    color: #040404;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}
header{
    width: 100%;
    position: fixed;
    height: 50px;
    background-color: #fff;
    z-index:5;
}
nav{
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    width: 80%;
}
nav ul{
    display: flex;
    justify-content:space-between;
}
nav a{
    font-size: 16px;
}
nav a:hover{
    color: #F2D362;
}
#FV {
  margin-top: 0px;
}
section {
  margin-top: 163px;
}
main{
    width: auto;
    margin-right: auto;
    margin-left: auto;
}
#main-photo{
    width: 100%;
    height: auto;
}
h1{
    font-size: 48px;
    color: #572906;
    margin-left: 20px;
}
#main-span{
    font-size: 48px;
    color: #fff;
    -webkit-text-stroke: 0.5px #9CA55A;
    margin-top: 30px;
    margin-left: 146px;
    display: block;    color: #fff;
}
h2{
    font-size: 24px;
    text-align: center;
    margin-top: -105px;
    background-image: url(../../images/h1back.png);
    background-repeat: no-repeat;
    height: 45px;
    background-position: center;
    background-size: contain;
    padding-top: 25px;
  }
#section-about{
    margin-top: 40px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#section-about img{
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.fade-in {
  opacity: 0; /* 最初は透明 */
  transition: opacity 3s ease-in-out; /* 0.5秒かけてふわっと */
}

.fade-in.is-show {
  opacity: 0.9; /* クラスがついたら表示 */
}
#ABOUT-profile{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
#ABOUT-profile{
    font-size: 12px;
}
#ABOUT-profile li:first-child{
    font-size: 16px;
    color: #572906;
    margin-top: 10px;
}
#ABOUT-profile li:nth-child(2){
    font-size: 12px;
    color: #572906;
    margin-top: 10px;
}
#about-detail{
    color: #333333;
    margin-top: 20px;
    line-height: 2;
    width: 90%;
}
h3{
    font-size: 20px;
    padding-top: 25px;
    padding-left: 15px;
}
#section-SKILL{
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}
#section-SKILL li{
    width: 100%;
    height: 200px;
    border-top: 1px solid #323232;
    border-left: 1px solid #323232;
    margin-top: 20px;
}
#section-SKILL span{
    margin-top: 30px;
    display: block;
    color: #323232;
}
.SKILL-span1{
    font-size: 15px;
    margin-left: 17px;
}
.SKILL-span2{
    margin-top: 30px;
    margin-left: 15px;
    width: 85%;
    line-height: 1.5;
}
h4{
    font-size: 16px;
    color: #9CA55A;
    margin-top: 20px;
    margin-left: 50px;
    font-weight: normal;
}
.box {
    border-bottom: 1px solid #F1F1F1;;
    margin-top: 40px;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}
#section-WORKS-WS{
    width:90%;
    margin-right: auto;
    margin-left: auto;
}
#section-WORKS-WS li{
    margin-top: 5px;
}
#section-WORKS-WS img{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
.website-table{
    margin-top: 20px;
}
table{
    width: 90%;
}
th, td {
    border-bottom:1px solid #DEDCDC;
}
table th{
    background-color: #f1f1f1;
    font-weight: normal;
    color: #333;
    text-align: center;
    width:5rem;
}
table td{
    margin-left: 10px;
    display: block;
    color: #333;
    line-height: 2;
}
.BANNER-table{
    margin-top: 20px;
}
#section-WORKS-BN{
    width:90%;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 20px;
}
#section-WORKS-BN li{
    margin-top: 20px;
}
#section-WORKS-BN img{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 30px;
}
#section-WORKS-SC{
    width:90%;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 20px;
}
#section-WORKS-SC li{
    margin-top: 20px; 
}
#section-WORKS-SC img{
    width: 100%;
    margin-top: 45px;
    margin-right: auto;
    margin-left: auto;
}
.SC-table{
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
}
#CONTACT-span{
text-align: center;
margin-top: 40px;
display: block;
}
#CONTACT-photo{
    width: 20%;
    margin-right: auto;
    margin-left: auto;
    display: block;
    /* opacity: 90%; */
    margin-top: 20px;
}
#CONTACT-button{
    width: 100px;
    height: 40px;
    background-color: #F2D362;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: grid;
    place-items: center;
    margin-right: auto;
    margin-left: auto;
    margin-top: -14px;
    box-shadow: #7d674b 1px 1px 1px 1px;
}
#CONTACT-button:hover{
    box-shadow: none;
    background-color: #F9E498;
    text-shadow: 1px 1px 1px #fff, 1px 1px 1px , 1px 1px 1px #fff, 1px 1px 1px #fff, 1px 1px 1px #fff, 1px 1px 1px #fff, 1px 1px 1px #fff, 1px 1px 1px #fff;
}
footer{
    margin-top: 20px;
    height: 100px;
    background:linear-gradient(to bottom,#fff 0%,#FFFDEC 40%,#F9F1CC 80%,#f4ecb1);
}
#footer-logo{
    color: #C7B6A8;
    font-size: 24px;
    text-align: center;
}
footer span{
    display: block;
    text-align: center;
    margin-top: 5px;
    color: #333333;
    font-size: 12px;
}
#footer-inner{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 40px;
}
}