@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Noto+Sans+JP:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Kaisei+Tokumin&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap');


*{
    margin: 0;
    padding: 0;
    list-style: none;
}

img{
    width: 100%;
    vertical-align: bottom;
}

a{
    text-decoration: none;
}

body{
    font-family: "Kaisei Tokumin", serif;
    color: #0B2B47;
}

.container1{
    max-width: 1200px;
    margin: 0 auto;
}

.container2{
    max-width: 1000px;
    margin: 0 auto;
}

.top-h2 h2{
    padding-top: 114px;
    font-size: 48px;
    font-family: "Cinzel Decorative", serif;
    font-weight: normal;
    color: #0B2B47;
    text-align: center;
}

h3{
    font-size: 32px;
    color: #0B2B47;
    text-align: center;
    font-family: "Kaisei Tokumin", serif;
    font-weight: normal;
}

.star-linebox{
    width: 340px;
    margin: 0 auto;
}

/* header-------------------------------------------- */
header{
    z-index: 100;
    position: fixed;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    padding: 0 80px;
    background: #A7CEEF;
    font-family: "Cinzel Decorative", serif;
}



header h2{
    font-size: 64px;
    color:#fff;
    font-weight: normal;
    padding-top: 0;
}

.sp-menu{
    display: none;
}

.pc-menu{
    width: 30%;
    margin-right: 80px;
}

.pc-menu ul{
    display: flex;
}

.pc-menu li{
    width: calc(100% / 3);
}

.pc-menu li a{
    font-family: "Cinzel Decorative", serif;
    color: #fff;
    font-size: 20px;
}

.pc-menu li a:hover{
    color: #0B2B47;
}

/* fv---------------------------------------------------- */

#fv{
    background: url(imges/fv-bg.png) center / cover;
    height: 100vh;
    padding-bottom: 160px;
}

#fv h4{
    font-family: "Kapakana", cursive;
    margin-top: 60px;
    font-size: 96px;
    font-weight: normal;
    color: #A7CEEF;
}

.t96{
    font-size: 128px;
}

#fv h3{
    font-family: "Kaisei Tokumin", serif;
    font-size: 48px;
    color: #0B2B47;
    font-weight: normal;
    padding-top: 140px;
    margin-bottom: 24px;
}

.t64{
    font-size: 64px;
    color: #175E9A;
}

#fv p{
    font-family: "Kaisei Tokumin", serif;
    font-size: 32px;
    padding-bottom: 40px;
}



.logo-line{
    display: flex;
    justify-content: left;
    align-items: center;
    /* padding-bottom: 80px; */
}



.logo-line::before{
    content: "";
    width: 80px;
    height: 3px;
    background-color: #175E9A;
}

.logo-line::after{
    content: "";
    width: 80px;
    height: 3px;
    background-color: #175E9A
}

.logo-line span{
    font-size: 80px;
    color: #175E9A;
    font-family: "Cinzel Decorative", serif;
    font-weight: normal;
}



/* about--------------------------------------------- */

#about article{
    display: flex;
    justify-content: space-between;
    margin: 40px auto;
}

.about-img{
    width: 40%;
}

.about-txt{
    width: 45%;
    height: 30%;
    border: 3px solid #A7CEEF;
    box-shadow: 10px 10px 4px #A7CEEF;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}

.about-txtbox{
    width: 90%;
}

.name-box{
    margin: 60px 0 0 80px;
    width: 50%;
    display: flex;
}

.name-box h3{
    font-family: "Kaisei Tokumin", serif;
    font-size: 24px;
    padding-left: 8px;
    margin-left: 16px;
    border-left: 2px solid #175E9A;
    display: flex;
    justify-content: center;
    align-items: center;
}

.name h2{
    font-size: 32px;
    padding-top: 0;
}

.name span{
    font-size: 16px;
    font-family: "Kaisei Tokumin", serif;
}

.messeage p{
    font-size: 16px;
    font-family: "Kaisei Tokumin", serif;
    margin: 40px 0 60px 80px;

}
/* concept------------------------------------------ */

.sp-concept-h4{
    display: none;
}

#concept{
    background: #A7CEEF;
    position: relative;
}

.concept-imgbox{
    width: 50%;
    margin: 040px auto 0;
}

#concept h4{
    writing-mode: vertical-rl;
    color: #175E9A;
    font-size: 48px;
    font-weight: normal;
    position: absolute;
    line-height: 2;
    top: 35%;
    right: 10%;
}

#concept p{
    position: absolute;
    top: 40%;
    left: 15%;
    line-height: 2;
    font-size: 24px;
    writing-mode: vertical-rl;
    color: #175E9A;
}

/* flow------------------------------------------------- */

#flow ul{
    position: relative;
    justify-content: space-between;
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
}

#flow li{
    border-right: 3px  solid #A7CEEF;
    width: 20%;
    padding-right: 20px;
}

#flow li h2{
    font-family: "Kaisei Tokumin", serif;
    color: #175E9A;
    font-size: 40px;
    position: relative;
    padding-top: 40px;
}

.step-box{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background: #A7CEEF;
    transform: rotate(45deg); 
}

.step-boxtxt{
    transform: rotate(-45deg);
}

.step-box span{
    font-size: 16px;
}

.step-box p{
    font-size: 32px;
}

.step-txt{
    width: 80%;
    margin: 0 auto;
}

.step-txt h4{
    padding-bottom: 24px;
    text-align: center;
    font-size: 24px;
    font-weight: normal;
}

.step-txt p{
    font-size: 20px;
    text-align: center;
}

.step-next1{
    position: absolute;
    top: 45%;
    left: 18%;
}

.step-next2{
    position: absolute;
    top: 45%;
    left: 44%;
}

.step-next3{
    position: absolute;
    top: 45%;
    right: 23%;
}

#flow li h3{
    color: #175E9A;
    padding-top: 40px;
}



#flow li img{
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}


.asterisk p{
    text-align: right;
    padding-top: 40px;
    margin-bottom: 80px;
    font-size: 24px;

}

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

#works{
    background: #A7CEEF;
    padding-bottom: 80px;
}


.titlebox h4{
    color: #fff;
    font-size: 32px;
    font-weight: normal;
    text-align: center;
    display: flex;
    align-items: center;
    margin: 40px auto;
}

.titlebox ::before{
    content: "";
    width: 500px;
    height: 2px;
    margin-right: 40px;
    background-color: #fff;
}

.titlebox ::after{
    content: "";
    width: 500px;
    height: 2px;
    margin-left: 40px;
    background-color: #fff;
}

.title p{
    font-size: 24px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}



#works ul{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

#works li img{
    width: 380px;
}

#works li a img:hover{
    transform: translateY(-20px);
     transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.title p{
    font-size: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    text-align: center;
}

.title p::before{
    content: "";
    width: 50px;
    height: 2px;
    margin-right: 16px;
    background-color: #fff;
}

.title p::after{
    content: "";
    width: 50px;
    height: 2px;
    margin-left: 16px;
    background-color: #fff;
}

/* contact--------------------------------------------- */

#contact{
    background: url(imges/contact-bg.png)top / cover;
}

#contact h4{
    text-align: center;
    padding-top: 40px;
    font-size: 20px;
    font-weight: normal;
}

#contact p{
    padding-top: 40px;
    text-align: center;
    font-size: 16px;
}

.mail-box a{
    display: block;
}

.mail-box a::before{
    content: "♦";
    width: 50px;
    height: 50px;
    color: #175E9A;
}

.sp-375{
    display: none;
}

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



.works-title h3{
    padding: 160px 0 40px 0;

}

.works-title h3::before, .works-title h3::after{
    content: "♦";
}



.sp-works-title h3{
    display: none;
}

.works-txtbox{
    width: 100%;
}

.works-txt h3::before{
    content: "♦";
    color: #0B2B47;
}

.works-txt h3{
    font-size: 24px;
    padding-bottom: 16px;
    font-weight: normal;
    color: #0B2B47;
    text-align: left;
}

.works-txt{
    width: 50%;
    margin-left: 40px;
}

.works-txt p{
    font-size: 20px;
    padding-bottom: 24px;
    color: #0B2B47;
}

article{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.works-img{
    width: 50%;
}

.back-btn{
    margin: 80px auto;
    width: 30%;
    background: #0B2B47;
    border-radius: 40px;

}

.back-btn a{
    color: #fff;
    display: block;
    font-size: 40px;
    font-family: "Kaisei Tokumin", serif;
    text-align: center;
    padding: 8px 16px;
}

.back-btn a:hover{
    background: #A7CEEF;
    color: #0B2B47;
    border-radius: 40px;
    transition: all .3s;
}

footer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    background: #A7CEEF;
}

footer h2{
    color: #fff;
    font-size: 48px;
    font-weight: normal;
    font-family: "Cinzel Decorative", serif;
}




@media(max-width: 1024px ){

    header{
    height: 60px;
}
    #fv{
    height: 40vh;
}

.pc-menu{
    margin-right: 120px;
}

#fv h4{
    margin-top: 0;
}

#fv p{
    font-size: 24px;
    padding: 0 0 40px 24px;
}

header h2{
    font-size: 48px;
}

.about-txt{
    width: 50%;
    margin-right: 24px;
}

.about-img{
    margin-left: 24px;
}

#concept h4{
    right: 5%;
}

#concept p{
    left: 8%;
}

.titlebox h4{
    
    justify-content: space-between;
}

.titlebox ::before{
    width: 400px;
}

.titlebox ::after{
    width: 400px;
}


#works ul{
    justify-content: center;
} 

article{
    display: block;
}

.works-img{
    width: 80%;
    margin: 0 auto;
}
.works-txt{
    width: 90%;
    margin: 40px auto;
}

footer{
    height: 60px;
}



}

@media(max-width: 820px){

    #fv h3{
    font-size: 36px;
    padding-top: 90px;
}

.logo-line span{
    font-size: 48px;
}

.logo-line::after{
    width: 64px;
}

.logo-line::before{
    width: 64px;
}
    
.t64{
    font-size: 48px;
}

#concept h4{
    font-size: 36px;
}

.step-txt h4{
    font-size: 20px;
}

.step-txt p{
    font-size: 16px;
}

#about article{
   display: block;
}


#flow li img{
    width: 100%;
}

.about-txt{
    width: 80%;
    margin: 0 auto;
}

.about-img{
    margin: 40px auto;
}

.titlebox ::before{
    width: 300px;
}

.titlebox ::after{
    width: 300px;
}

footer h2{
    font-size: 32px;
}

}

@media(max-width: 768px){

    header h2{
    font-size: 32px;
}

header{
    padding: 0 40px;
}

    .pc-menu li a{
    font-size: 16px;
}

#flow ul{
    display: block;
}

#flow li{
    border-right: 0;
    border-top: 1px  solid #A7CEEF;
    width: 90%;
    padding-right: 0px;
    margin: 0 auto;
}

.step-box{
    margin: 40px auto;
}
.step-txt p{
    padding-bottom: 40px;
}

.step-next1{
    position: absolute;
    transform: rotate(90deg);
    top: 20%;
    left: 45%;
}

#flow li img{
    width: 50%;
    margin: 40px auto;
}

.step-txt h4{
    font-size: 32px;
}

.step-txt p{
    font-size: 24px;
}

.step-next1, .step-next2, .step-next3, .step-next4{
    display: none;
}

.titlebox ::before{
    width: 265px;
}

.titlebox ::after{
    width: 265px;
}



}

@media (max-width: 500px){
    header{
        width: 100%;
        height: 40px;
        padding-left: 24px;
    }


    header h2{
    font-size: 24px;
}

.pc-menu{
    display: none;
}

.sp-menu{
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-btn{
    position: fixed;
    top: 5px;
    right: 10px;
    width: 35px;
    height: 35px;
    background: #A7CEEF;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.menu-btn span, .menu-btn span::before, .menu-btn span::after{
    width: 25px;
    height: 1px;
    background: #fff;
    content: "";
    position: absolute;
}

.menu-btn span::before{
    bottom: 8px;
    right: 0;
    width: 20px;
}

.menu-btn span::after{
    top: 8px;
    right: 0;
    width: 30px;
}
#menu-btn-check:checked + .menu-btn span{

    background: rgba(255, 255, 255, 0);
}

#menu-btn-check:checked + .menu-btn span::before{

    bottom: 0;
    transform: rotate(45deg);
    width: 25px;
}

#menu-btn-check:checked + .menu-btn span::after{

    top: 0;
    transform: rotate(-45deg);
    width: 25px;
}

#menu-btn-check{
    display: none;
}

.sp-menubox{
    padding: 10px 15px 0;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 50;
    background: rgba(0, 0, 2, .7);
    transition: all .5s;
    box-sizing: border-box;
}

#menu-btn-check:checked ~ .sp-menubox{
    left: 0;
}

.sp-menubox li a::before{
    content: "♦";
}

.sp-menubox li a{
    display: block;
    margin-bottom: 24px;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 16px;
}





#fv{
    background: url(imges/fv-bg.png) right / cover;
    height: 25vh;
}

     #fv h3{
    font-size: 24px;
    padding-top: 40px;
    margin-bottom: 0;
}

#fv h4{
    display: none;
}


#fv p{
   display: none;
}


.logo-line{
    justify-content: center;
}


.t64{
    font-size: 40px;
}

.top-h2{
    padding-top: 0;
}


h2{
    padding-top: 24px;
    font-size: 32px;
}

h3{
    font-size: 20px;
}

.star-linebox{
    width: 30%;
    margin: 0 auto;
}

.logo-line span{
    font-size: 40px;
}


.about-img{
    width: 70%;
}

#concept h4{
    font-size: 20px;
}

#concept p{
    font-size: 16px;
}

.star-linebox{
    margin: -10px auto;
}

.name{
    display: flex;
    justify-content: center;
    align-items: center;
}

.name-box{
    margin: 20px auto 0;
    display: block;
}

.name-box h3{
    border-left: none;
    border-top: 2px solid #175E9A;
    font-size: 20px;
    width: 100%;
    padding: 16px 0 0 0;
    margin-left: 0;
}

.messeage p{
    margin: 24px auto 40px;
}

#flow li{
    border-top: 3px  solid #A7CEEF;
    border-right: none;
    width: 100%;
    padding: 20px 0 20px 0;
    margin: 0 auto;
}

#flow li img{
    width: 60%;
    margin: 24px auto;
}

.step-txt p{
    font-size: 20px;
}

.asterisk p{
    font-size: 16px;
}

#concept{
    display: block;
    height: 450px;
}

#contact p{
    padding-top: 40px;
    margin: 0 auto;
    width: 82%;
}

.concept-h4{
    display: none;
}

.sp-concept-h4{
    position: absolute;
    top: 25%;
    left: 30%;
    display: flex;
    writing-mode: horizontal-tb;
    font-size: 20px;
    color: #175E9A;
}

.titlebox ::before, .titlebox ::after{
    width: 100px;
}

#concept p{
    writing-mode: horizontal-tb;
    position: absolute;
    top: 80%;
    left: 20%;
    line-height: 1.5;
    text-align: center;
}

.titlebox h4{
    font-size: 24px;
}

.works-title h3{
    padding: 80px 0 40px 0;
    font-size: 30px;
}

.pc-works-title h3{
    display: none;
}

.sp-works-title h3{
     padding: 80px 0 40px 0;
    font-size: 30px;
    display: block;
}

.sp-works-title h3::before, .sp-works-title h3::after{
    content: "♦";
}



.back-btn{
    width: 40%;
}

.back-btn a{
    font-size: 24px;
}


footer{
    height: 40px;
}

footer h2{
    font-size: 24px;
    padding: 0;
}


} 

@media(max-width: 375px){

    .logo-line{
    padding-top: 150px;
}

.step-txt h4{
    font-size: 20px;
}

h3{
    font-size: 24px;
    padding-top: 16px;
}

.sp-concept-h4{
    top: 35%;
    left: 25%;
}



#flow li{
    padding: 20px 0 20px 0;
}

.step-txt p{
    text-align: left;
    margin: 0 auto;
    width: 80%;
    font-size: 16px;
}

.title p{
    justify-content: center;
}

.contact-h4{
    display: none;
}

.sp-375{
    display: block;
    margin: 0 auto;
    width: 80%;
}


}