@charset "utf-8";
@import url(hmm.common.css);
*{
    margin: 0;
    padding: 0;
}
html{
    font-size: 100%;
    scroll-behavior: smooth;
}
body{
    color: #24292e;
    font-family: "Sawarabi Gothic";
}
/*.site-title {
    font-family: "Concert One", sans-serif;	
}*/
.gotu-regular {
  font-family: "Gotu", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.playwrite-hr-lijeva-guides-regular {
  font-family: "Playwrite HR Lijeva Guides", serif;
  font-weight: 400;
  font-style: normal;
}

a{
    text-decoration: none;
}
p{
    font-size: 1.3rem;
}
img{
    max-width: 100%;
}
/*-----ヘッダー　------*/


#header{
    width: 100%;
    
    align-items: center;
    justify-content: space-between;
    height: 170px;
    margin: 0 auto;
    padding: 0 4%;
    background-color: hsla(0, 100%, 50%, 1);
background-image: radial-gradient(circle at 40% 20%, hsla(28, 100%, 74%, 1) 0%, transparent 50%), radial-gradient(circle at 80% 0%, hsla(189, 100%, 56%, 1) 0%, transparent 50%), radial-gradient(circle at 0% 50%, hsla(355, 100%, 93%, 1) 0%, transparent 50%), radial-gradient(circle at 80% 50%, hsla(340, 100%, 76%, 1) 0%, transparent 50%), radial-gradient(circle at 0% 100%, hsla(22, 100%, 77%, 1) 0%, transparent 50%), radial-gradient(circle at 80% 100%, hsla(242, 100%, 70%, 1) 0%, transparent 50%), radial-gradient(circle at 0% 0%, hsla(343, 100%, 76%, 1) 0%, transparent 50%);
background-blend-mode: normal, normal, normal, normal, normal, normal, normal;

}
#header h1{
    padding-top: 35px;
  font-family: "Playwrite HR Lijeva Guides", serif;
  font-weight: 400;
  font-style: normal;
}

#header ul{
    display: flex;
    padding: 30px 0;
    align-items: center;
    
}

#header li{
    font-size: 0.9rem;
    margin-left: 30px;
    margin-top: 30px;
    list-style: none;
    color: #ffffff;
}
header li a{
    color: #24292e;
    transition: all 0.3s;
}
#header li a:hover{
    opacity: 0.5;
}
#header li img.icon{
    width: 30px;
}
li{
    list-style: none;
    font-size: 1.2rem;
}
/*--------メインビジュアル------------*/
#mainvisual{
    margin-bottom: 80px;
}
#mainvisual img{
    width: 100%;
    object-fit: cover;
}
/*------------about----------------*/
#about ul{
    margin-bottom: 30px;
}
#about ul li{
    margin-bottom: 3px;
}
#about ul li:first-child{
    margin-bottom: 30px;
}
#about p{
    text-align: justify;
}
#about img{
    width: 100px;
    float: left;
    padding: 5px;
    margin: 25px;
}
#about .list{
    width:500px;
    margin: 10px auto;
}
#about .list p{
    font-size: 1rem;
}

/*---------------works------------------*/

#works h3{
    font-size: 0.8rem;
    font-weight: normal;
    text-align: center;
    margin: 30px;
}
#works ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
#works ul li{
    width: 25%;
    margin-bottom: 23px;
}
#works ul li img{
    cursor: pointer;
    width: 200px;
    max-height: 200px;
    transition: all 0.3s;
}
#works ul .section2{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
#works ul .section2{
    width: 50%;
    margin-bottom: 23px;
}
#works ul .section2{
    width: 100%;
}
#works ul .section2 img{
    width:100px;
    max-height: 100px;
    transition: all 0.3s;
}
#works ul li img:hover{
    transform: scale(1.5, 1.5);
    opacity: 0.7;
}
#works .section2 p, .section3 p{
    font-size: 1rem;
}
#works ul .section3{
    display: flex;
    justify-content: space-between;
    margin: 23px;
}
#works ul  img{
    width: 300px;
    max-height: 300px;
    transition: all 0.3s;
}
#works ul .section3 img:hover{
    transform: scale(1.5, 1.5);
    opacity: 0.7;
}
#works .section3 li{
    padding: 10px;
}
/*--------------news ------------------*/
#news dl{
    display: flex;
    flex-wrap: wrap;
    border-top: solid 1px #c8c8c8;
    margin-bottom: 20px;
}
#news dt{
    width: 20%;
    border-bottom: solid 1px ##c8c8c8;
    padding: 15px;
}
#news dd{
    width: 80%;
    border-bottom: solid 1px #c8c8c8;
    padding: 15px;
}
/*----------------contact-------------------*/
#contact{

    background-color: hsla(79, 98%, 66%, 1);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1799 1799' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at 94% 95%, hsla(170, 88%, 68%, 1) 3%, transparent 76%), radial-gradient(circle at 89% 34%, hsla(263, 96%, 51%, 1) 1%, transparent 86%), radial-gradient(circle at 86% 50%, hsla(318, 80%, 65%, 1) 7%, transparent 76%), radial-gradient(circle at 89% 79%, hsla(248, 76%, 53%, 1) 7%, transparent 87%), radial-gradient(circle at 15% 44%, hsla(4, 74%, 80%, 1) 15%, transparent 81%), radial-gradient(circle at 99% 20%, hsla(75, 88%, 92%, 1) 1%, transparent 68%);
    background-blend-mode: overlay, normal, normal, normal, normal, normal, normal;
padding: 100px;
}


 #contact p,#contact h2{
        text-align: center;
        margin-bottom: 20px;
        font-size: 1rem;
    }
#contact .form{
	text-align: center;
}

.form input{
    height: 30px;
    width: 200px;
}
.form textarea{
    height:60px;
    width: 200px;
}
/*    #contact dl{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    #contact dt{
        width: 15%;
    }
    #contact dd{
        width: 85%;
        margin-bottom: 10px;
    }
    #contact dd input,
    #contact dd textarea{
        width: 100%;
        border: solid 1px #c8c8c8;
        padding: 10px;
    }
    
#contact dd textarea{
    height: 10rem;
}
#contact .button{
    text-align: center;
}
#contact .button input{
    border: solid 1px #24292e;
    width: 200px;
    background-color: #24292e;
    color: #fff;
    padding: 15px 0;
    transition: all 0.3s;
}
#contact .button input:hover{
    background: #fff;
    color: #24292e;
}*/
/*---　共通wrapper ----*/
.wrapper{
    max-width: 960px;
    margin: 0 auto 130px auto;
    font-size: 0.9rem;
    padding: 0 10%;
}
.site-title{
    line-height: 1px;
    font-weight: 600;
    font-size: 2.4rem;
}
.site-title a {
    display: block;
    color: #24292e;
}
.section-title{
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 80px;
}

/*---  footer  -------*/
footer{
	text-align: center;
}
/*--- footer -------*/

/*----------スマートフォン-------------*/
/*----------640pxより小さいとき--------------*/
@media screen and (max-width: 640px){
    .wrapper{
        margin-bottom: 70px;
    }
    .site-title{
        margin-top: 20px;
    }
    section-title{
        margin-bottom: 40px;
        
    }
    /*---------ヘッダー-------------*/
    #header{
        max-width: 100%;
        height: auto;
        flex-direction: column;
        margin-top: 20px;
        line-height: 40px;
	background-color: hsla(0, 100%, 50%, 1);
background-image: radial-gradient(circle at 40% 20%, hsla(28, 100%, 74%, 1) 0%, transparent 50%), radial-gradient(circle at 80% 0%, hsla(189, 100%, 56%, 1) 0%, transparent 50%), radial-gradient(circle at 0% 50%, hsla(355, 100%, 93%, 1) 0%, transparent 50%), radial-gradient(circle at 80% 50%, hsla(340, 100%, 76%, 1) 0%, transparent 50%), radial-gradient(circle at 0% 100%, hsla(22, 100%, 77%, 1) 0%, transparent 50%), radial-gradient(circle at 80% 100%, hsla(242, 100%, 70%, 1) 0%, transparent 50%), radial-gradient(circle at 0% 0%, hsla(343, 100%, 76%, 1) 0%, transparent 50%);
background-blend-mode: normal, normal, normal, normal, normal, normal, normal;
color: #ffffff;
}

   
    #header h1{
        font-size: 2rem;
        font-family: "Playwrite HR Lijeva Guides", serif;
        font-weight: 400;
        font-style: normal;

    }
    header li{
        font-size: 0.8rem;
        margin-left: 20px;
    }
    #header li:first-child{
        margin-left: 0;
    }
    #header li img.icon{
        width: 20px;
        margin-top: 15px;
    }
    /*-----about------*/
    #about li{
        font-size: 1rem;
    }
    #about .list li{
        font-size: 1rem;
        margin: 10px;
        text-align: left;
    }
    #about .list{
	    width: 350px;	
        font-size: 10px;
	    
    }
     
    /*--- works ----*/
    #works ul{
        flex-direction: column;
        flex-wrap: wrap;
    }
    #works ul li{
        width: 100%;
        text-align: center;
    }
    #works ul  img{
        width:100%;
        height:100%;
    }
    #works p{
        font-size: 0.8rem;
        text-align: center
    }
    .section li{
        margin: 20px;
    }
    
    /*------news-------*/
    #news dl{
        flex-direction: column;
    }
    #news dt{
        width: 100%;
        border-bottom: none;
        padding-bottom: 0;
    }
    #news dd{
        width: 100%;
        padding-top: 0;
    }
    /*----------------contact---------------------*/
   #contact{
	text-align: center;
         background-color: hsla(79, 98%, 66%, 1);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1799 1799' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at 94% 95%, hsla(170, 88%, 68%, 1) 3%, transparent 76%), radial-gradient(circle at 89% 34%, hsla(263, 96%, 51%, 1) 1%, transparent 86%), radial-gradient(circle at 86% 50%, hsla(318, 80%, 65%, 1) 7%, transparent 76%), radial-gradient(circle at 89% 79%, hsla(248, 76%, 53%, 1) 7%, transparent 87%), radial-gradient(circle at 15% 44%, hsla(4, 74%, 80%, 1) 15%, transparent 81%), radial-gradient(circle at 99% 20%, hsla(75, 88%, 92%, 1) 1%, transparent 68%);
    background-blend-mode: overlay, normal, normal, normal, normal, normal, normal;
padding: 100px;
}


    #contact dl{
        flex-direction: column;
    }
    #contact dt{
        width: 100%;
        margin-bottom: 5px;
    }
    #contact dd{
        width: 100%;
        margin-bottom: 10px;
    }
    
    #contact .button{
    text-align: center;
}

	
   footer{
	text-align: center;
} 
}