@charset "utf-8";
/*------------------------------------------
変数
------------------------------------------*/
:root{
    --white: #fff;
    --font-color: #001738;
    --pink: #E5005A;
    --yellow: #F4C900;
    --blue: #0096D1;
}
/*------------------------------------------
共通事項
------------------------------------------*/
html{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    font-size: 100%;
    overflow-x: hidden;
}
body{
    font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: var(--font-color);
    background-image: url("../img/background.webp");
    background-size: cover;
    background-position: center;
    overflow-x: hidden;
    position: relative;
}
img{
    width: 100%;
}
a{
    text-decoration: none;
    color: var(--font-color);
}
li{
    list-style: none;
}
.btn{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background-color: var(--font-color);
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: 2rem;
}
.btn svg{
    fill: var(--white);
}
.section-title{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.section-title .en{
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pink);
    margin-bottom: .2rem;
}
.section-title .ja{
    font-size: 1.5rem;
    font-weight: 900;
}
/*------------------------------------------
header
------------------------------------------*/
#header{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    margin-bottom: 1rem;

}
#header h1{
    width: clamp(150px, 50vw, 300px);
}
/*------------------------------------------
hero
------------------------------------------*/
.hero{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 2rem;
    margin-bottom: 5rem;
    position: relative;
    overflow: hidden;
}
.hero .img{
    margin-bottom: 1rem;
}
.hero .title{
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.hero .achievements{
    color: var(--pink);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}
.hero .achievement .achievement-t{
    font-size: 0.75rem;
    margin-bottom: .5rem;
}
.hero .achievement .achievement-v .value{
    font-size: 3rem;
}
.hero .achievement .achievement-v .asterisk{
    font-size: 0.75rem;
}
.hero .kome{
    font-size: 0.7rem;
    margin-bottom: 1rem;
    align-self: flex-start;
}
.deco{
    z-index: -10;

}
.deco-1{
    position: absolute;
    width: 175px;
    top: 0px;
    right: -20px;
    transform: rotate(30deg);
}
.deco-2{
    position: absolute;
    width: 130px;
    top: 180px;
    left: -30px;
    transform: rotate(180deg);
}
.deco-3{
    position: absolute;
    width: 80px;
    top: 10px;
    left: 0;
}
.deco-4{
    position: absolute;
    width: 120px;
    bottom: 0;
    left: -60px;
    transform: rotate(30deg);
}
.deco-5{
    position: absolute;
    width: 50px;
    bottom: 80px;
    right: 0;
}
/*------------------------------------------
about
------------------------------------------*/
.about{
    padding: 0 2rem;
    margin-bottom: 3rem;
}
.about .section-title{
    margin-bottom: 2rem;
}
.about .description{
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.8;
}
/*------------------------------------------
work
------------------------------------------*/
.work{
    padding: 0 2rem;
    margin-bottom: 3rem;
}
.work .section-title{
    margin-bottom: 2rem;
}
.work .work-item{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    border: 1px solid var(--white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
}
.work .work-item .title{
    font-weight: 900;
    font-size: 1rem;
    margin: 0 auto 1rem;
}
.work .work-item .img1{
    width: clamp(100px, 60vw, 300px);
    margin: 0 auto 1rem;
}
.work .work-item .img2{
    width: clamp(100px, 40vw, 200px);
    margin: 0 auto 1rem;
}
.work .work-item .work-list{
    font-size: 0.9rem;
    line-height: 1.8;
    margin-left: 2rem;
}
.work .work-item .work-list li{
    list-style-type: disc;
}
.work .work-item2 .title{
    font-size: 1.2rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;
}
.work .work-item2 p{
    background-color: var(--pink);
    color: var(--white);
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}
/*------------------------------------------
entry / contact
------------------------------------------*/
.entry{
    padding: 0 2rem;
    margin-bottom: 3rem;
}
.entry .section-title{
    margin-bottom: 2rem;
}
.entry > .description{
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: 2rem;
}
.entry .box{
    width: 100%;
    background-color: var(--white);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}
.entry .box .heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.entry .box .heading .heading-text{
    font-size: 0.75rem;
    font-weight: 900;
}
.entry .box.box-entry .heading .heading-text{
    color: var(--yellow);
}
.entry .box.box-contact .heading .heading-text{
    color: var(--blue);
}
.entry .box .heading .heading-shape{
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.entry .box.box-entry .heading .heading-shape{
    background-color: var(--yellow);
}
.entry .box.box-contact .heading .heading-shape{
    background-color: var(--blue);
}
.entry .box .title{
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.entry .box .description{
    font-size: 0.75rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.entry .box .btn{
    font-size: 0.75rem;
}
/*------------------------------------------
footer
------------------------------------------*/
#footer .logo{
    width: 100%;
    background-color: var(--white);
    padding: 1.5rem;
}
#footer .logo img{
    display: block;
    width: clamp(150px, 50vw, 300px);
    margin: 0 auto;
}
#footer .copyright{
    width: 100%;
    background-color: var(--font-color);
    padding: 1rem;
}
#footer .copyright small{
    display: block;
    text-align: center;
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 400;
}