@charset "utf-8";

/*========
共通
========*/
body{
    /* padding-top: 100px; */
    background-color: #FDFFFF;
}

/*フォント読み込み*/
@font-face {
    font-family: 'Optima Bold';
    src: url("../font/optima-bold.ttf") format(truetype);
    font-weight: normal;
    font-style: normal;
}

.font_optima{
    font-size: 60px;
    font-family: 'Optima Bold',sans-serif;
    color: #04004A;
}

/*button*/
.btn-area{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px;
}

.btn-area_sp{
    max-width: 375px;
    margin: 0 auto;
    padding: 0 16px;
}

.btn-area
.font_optima{
    display: block;
    width: 150px;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    border: 1px solid #686692;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    color: #686692;
}

.btn-area_sp
.font_optima{
    display: block;
    width: 150px;
    height: 25px;
    /* line-height: 45px; */
    font-size: 14px;
    border: 1px solid #686692;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    color: #686692;
    padding-top: 10px;
}


/*========
header
========*/
.header{
    display: block;
    max-width: 1730px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    padding:0 10px;
    position: relative;
    top:50px;
    z-index: 9999;
    height: 100px;
    box-sizing: border-box;
}

.header_inner{
    position: absolute;
    align-items: center;
    max-width: 1366px;
    display: flex;
    justify-content: space-between;
    z-index: 9999;

}

.header-nav{
    display: none;
}

.open{
    display: block;
}

.header-nav{
    background-image: url(../images/main_visual.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 50px;
    text-align: center;
    z-index: 9996;
}

.header-nav::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #FFFFFF5F;
    top: 0;
    left: 0;
    z-index: 9997;
}

.header-nav ul{
    position: absolute;
    z-index: 9998;
    top: 50%;
    transform: translateY(-50%);
    right:160px;
}

.header-nav li{
    padding:16px;
    font-size: 48px;
    text-align: center;
}

.header-nav li a{
    display: block;
    color:#04004A;
    font-family: 'Optima Bold',san-serif;
    text-align: left;
}

.logo{
    max-width: 80px;
    position: fixed;
    top:30px;
    left: 20px;
}

.logo img{
    width: 35px;
}

/*ハンバーガーメニュー*/
.hamberger{
    width: 40px;
    height:20px;
    position: fixed;
    top:50px;
    right: 20px;
    /* position: relative; */
    cursor: pointer;
    transition: 0.5s;
    z-index: 9999;
}

.hamberger span{
    display: inline-block;
}

.ham_1 {
    position: absolute;
    width:40px;
    height: 2px;
    background-color: #04004A;
    top:0;
    transition: 0.3s;
    right: 0;
}

.ham_2 {
    position: absolute;
    width:20px;
    height: 2px;
    background-color: #04004A;
    top:50%;
    transition: 0.3s;
    right: 0;
}

.ham_3 {
    position: absolute;
    width:10px;
    height: 2px;
    background-color: #04004A;
    top:100%;
    transition: 0.3s;
    right: 0;
}

.open .ham_1{
    transform: rotate(45deg);
    background-color: #fff;
    width: 40px;
    top: 0;
}

.open .ham_2{
    background-color: transparent;
}

.open .ham_3{
    transform: rotate(-45deg);
    background-color: #fff;
    width: 40px;
    top: 0;
}


/*========
main_visual
========*/
.main_visual{
    position: relative;
    text-align: center;
}

.main_img{
    max-width: 1250px;
    position: relative;
    padding: 0 20px;
    margin: 0 auto;
}

.main_img img{
    width: 100%;
    height: 500px;
    object-fit: none;
    border-radius: 30px;
}

.main_title{
    position: absolute;
    bottom: -150PX;
    left: 150px;
}

.main_title img{
    max-width: 400px;
}


/*========
concept
========*/
.concept{
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    max-width: 1000px;padding: 0 16px;
}

.content_img{
    width:62%;
}

.concept_img img{
    /* width: 550px; */
    margin-top: 130px;
    padding: 10px
}

.concept_text{
    width:  45%;
    margin-top: 285px;
}

h2.concept_title.font_optima{
    /* font-size: 60px; */
    margin-left: -35px;
}

.concept_text h2{
    text-align: right;
    padding-bottom: 80px;
}

.concept_text p{
    text-align: right;
    font-size: 16px;
    line-height: 48px;
    /* width:376px;
    margin-left: -180px; */

}


/*========
about
========*/

.about .btn-area{
    padding:30px 0 0 75px;
}

.about_button{
    margin-right: auto;
}

.about{
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    padding-top: 200px;
    margin: 0 auto;
}

.about_title{
    max-width: 160px;
    height: 67px;
    padding-bottom: 114px;
}

.about p{
    text-align: left;
    font-size: 16px;
    line-height: 48px;
    /* width:392px; */
    padding-left: 75px;
}

.about_button{
    width: 180px;
    padding:88px;
}

.about_me img{
    width: 500px;
    height: 500px;
    object-fit: none;
    border-radius: 30px;
}

.btn-area a{
    font-size: 21px;
    padding: 8px 20px 8px 20px;
    border: 1px solid #686692;
    border-radius: 30px;
}

/*========
skill
========*/

.skill{
    margin-top: 130px;
    background-image: url(../images/skill_background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 100px;
    aspect-ratio: 1367 / 1708;
}


@media screen and (max-width: 1188px){
    /*余白維持のため1188pxを越したら画像ではなくcss生成の円を入れる*/

    .skill{
        background-image: none;
        padding-bottom: 100px;
        aspect-ratio: auto;

        background-color: #e8f8ff;
        border-radius: 1000px;
        padding-bottom: 200px;
    }
}

.skill_title{
    margin: 0 auto;
    width:110px;
    padding-top: 260px;
    padding-bottom: 142px;
}

.skill_web_design,
.skill_coading{
    padding: 0 16px;
}

.skill_web_design{
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
}

.skill_design_icon_pc img{
    width: 310px;
    /* height: 412px; */
}

.skill_web_design p{
    text-align: left;
    font-size: 20px;
    line-height: 48px;
    padding-top: 140px;
    padding-left: 40px;
}

.skill_design_all,
.skill_coading_all{
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dotted #04004A;
}

.skill_design_all span,
.skill_coading_all span{
    font-size: 25px;
}

.skill_coading{
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    padding-top:78px;
    margin: 0 auto;
}

.skill_coading_icon_pc img{
    width: 401px;
}

.skill_coading p{
    text-align: left;
    font-size: 20px;
    line-height: 48px;
    padding-top: 140px;
}

.skill_coading_icon_sp,
.skill_design_icon_sp{
    display: none;
}

/*========
works
========*/
.works_content{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* padding: 0 16px; */
}

.works_title{
    margin: 100px auto;
    text-align: center;
}

.works_title img{
    max-width: 170px;
    padding-top: 240px;
    padding-bottom: 190px;
    /* margin: 0 auto; */
}

.works_list{
    width: 45%;
    text-align: start;
    padding-bottom: 80px;
}

.works_text{
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 20px 0;
}

.works_text p{
    font-size: 14px;
    padding-left: 15px;
}

.works_text
.font_optima{
    font-size: 36px;
    line-height: 0.8;
}

.works_button{
    margin-left: auto;
    font-size: 21px;
}

/*========
footer
========*/

footer{
    margin-top: 150px;
    padding: 180px 0;
    background-image: url(../images/footer_background.png);
    background-size: cover;
    background-position: bottom 0 left 0;
}

/* 1600px以上になった時に波線が消えるのを防ぐ */
 @media screen and (min-width:1600px) {
    footer{
        padding:300px 0 180px 0;
    }
}

.footer_text{
    padding-top: 150px;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 auto;
}

.footer_text img{
    width: 28%;
    margin-left: 10px;
}

.footer_text p{
    font-size: 16px;
    margin-right: 10px;
}


/*======
aboutページ
=======*/


.main_visual_about_pc{
    text-align: center;
    position: relative;
    padding: 0 20px;
}

.main_visual_about_pc img{
        max-width: 1250px;
        width: 100%;
        height: 600px;
        object-fit: none;
        border-radius: 30px;
}

.about_page_pc{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 183px;
    gap: 30px;
}

.main_title_about_pc img{
    margin-top: -600px;
}

.about_img_pc img{
    width: 330px;
    height: 330px;
    object-fit: none;
    border-radius: 50px;
}

.name_pc{
    display: flex;
}

.name_main_pc{
    font-size: 36px;
}
.name_sub_pc{
    padding-top: 15px;
    padding-left: 56px;
    color: #04004A;
    font-weight: bold;
}


.about_text img{
    width:188px;
    height: 39px;
    padding-top: 43px;
}


.about_text_pc p{
    max-width: 550px;
    text-align: left;
    color: #686692;
    font-size: 16px;
    line-height: 37px;
    padding-top: 37px;
}

.strength{
    padding-top: 235px;
    max-width: 1000px;
    margin: 0 auto;
}

.strength_title{
    text-align: left;
}

.strength_title img{
    width:220px;
    /* height: 66px; */
    padding-bottom: 56px;
}

.strength_img{
    text-align: center;
}

.strength_img img{
    width:500px;
    /* height:287px; */
    margin: 0 auto;
}

.strength_content h3{
    padding-top: 37px;
    padding-bottom: 37px;
    color: #04004A;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

.strength_content p{
    font-size: 16px;
    line-height: 37px;
    padding-bottom: 220px;
    text-align: center;
}

.strength_img_02{
    width:500px;
    height:550px;
    margin: 0 auto
}

.footer_text_about{
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto;
}

.footer_text_about img{
    width: 391px;
    height: 140px;
    margin-top: -300px;
    padding-bottom: 180px;
}

.footer_text_about p{
    font-size: 16px;
    margin-top: -200px;
}

/*======
worksページ
=======*/

.main_visual_works{
    text-align: center;
    position: relative;
    padding: 0 20px;
}

.main_visual_works img{
        max-width: 1250px;
        width: 100%;
        height: 600px;
        object-fit: none;
        border-radius: 30px;
}

.main_title_works img{
    margin-top: -600px;
}

.works_content_page{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 183px;
}

/*======
works詳細ページ
=======*/

.works_view_main{
    margin: 0 auto;
    padding: 0 20px;
}

.works_view_main_img{
    max-width: 900px;
    margin: 0 auto;
}

.works_view_title{
    text-align: center;
    margin: 0 auto;
    /* display: flex; */
    padding: 190px 0;
}

.works_box{
    margin: 0 auto;
    text-align: center;
    max-width:1000px;
}


ul{
    margin: 0 auto;
    text-align: start;
    display: inline-block;
}

li{
    margin: 18px auto;
}

.works_text li{
    display: flex;
}

.works_text_content,.works_text_more{
    font-size: 16px;
    display: block;
}

.works_text_content{
    width:30%;
}

.works_text_more{
    padding-left: 120px;
    /* width: 70%; */
}

.works_p p{
    font-size: 16px;
    text-align: center;
    padding: 130px 10px 100px 10px;
    /* padding-bottom: 100px; */
    line-height: 37px;
}

.color{
    max-width:  710px;
    margin: 0 auto;
    padding: 0 10px;
}

.see ul{
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
}

.see{
    display: flex;
    justify-content: space-evenly;
    max-width: 1000px;
    padding-top: 100px;
    margin: 0 auto;
}

.see_space{
    margin: 0 auto;
}

.see_space_pc{
    width: 45%;
    /* margin-right: 20px; */
}

.see_space_sp{
    width: 11%;
}

.see_beauty{
    width: 47%;
    margin: 0 auto;
}


.works_buck_button{
    width:300px;
    margin: 0 auto;
    padding-top: 100px;
}

.about_sp{
    display: none;
}

.about_bottun_sp{
    display: none;
}

.main_visual_about_sp{
    display: none;
}

@media screen and (max-width:767px) {

body{
    padding-top: 48px;
}

.font_optima{
    font-size: 25px;
}
/*=======
header
=======*/
.header{
    max-width: 375px;
}

.header-nav li{
    font-size: 25px;
}

.logo{
    max-width: 22px;
    top: 36px;
}

.humberger{
    width:30px;
    top: 36px;
}


/*=======
main_visual
=======*/

.main_img{
    max-width: 85%;
    position: relative;
    padding: 0px;
    margin: 0 auto;
}

.main_img img{
    width: 100%;
    height: 600px;
    object-fit: none;
    border-radius: 30px;
}

.main_title{
    bottom: 0;
    left: 20px;
}

.main_title img{
    height: auto;
    max-width: 180px;
    border-radius: 0;
    object-fit: fill;
    margin-bottom: 180px;
}

/*=======
concept
=======*/

.concept{
    flex-direction: column;
    position: relative;
}

.concept_img{
    width: 100%;
}

.concept_img img{
    max-width: 75%;
    position: relative;
}

.concept_text{
    width: 100%;
    text-align: right;
    margin-top: 20px;
}

.concept_text h2{
    position: absolute;
    top: 200px;
    right: 10px;
}

.concept_text p{
    font-size: 14px;
    line-height: 30px;
}

/*=======
About
=======*/

.about{
    display: none;
}

.about_sp{
    display: block;
    margin: 0 auto;
}

.about_title_sp{
    padding:0 0 30px 20px;
}

.about_me_sp{
    text-align: center;
    margin: 0 auto;
}

.about_me_sp img{
    width:250px;
    height: 250px;
    object-fit: cover;
    border-radius: 30px;
}

.about_page_text_sp p{
    font-size: 14px;
    line-height: 30px;
    width: 70%;
    margin: 0 auto;
    padding: 30px 0 20px 0;

}

.btn-area{
    display: none;
}

.btn-area_sp{
    max-width: 375px;
}

.about_bottun_sp{
   margin-left: auto;
   font-size: 14px;
}

/*=======
skill
=======*/

.skill{
    margin-top: 130px;
    background-image: url(../images/skill_back_sp@2x.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 100px;
    aspect-ratio: 752 / 2019;
}

.skill_title{
    padding-top: 80px;
}

.skill_web_design,
.skill_coading{
    flex-direction: column;
}

.skill_coading_icon_pc,
.skill_design_icon_pc{
    display: none;
}

.skill_coading_icon_sp,
.skill_design_icon_sp{
    max-width: 63%;
    display: block;
}

.skill_design_text p,
.skill_coading_text p{
    margin: 0 auto;
    font-size: 14px;
    max-width: 315px;
    line-height: 24px;
    padding-top: 0px;
}

.skill_design_all,
.skill_coading_all{
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dotted #04004A;
    max-width: 315px;
   margin-left: auto;
}

.skill_design_all span,
.skill_coading_all span{
    font-size: 12px;
}

/*========
works
========*/
.works_content{
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 30px;
}

.works_text .font_optima{
    font-size: 22px;
}

.works_text p{
    font-size: 12px;
}

.works_list{
    max-width: 315px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

/*========
footer
========*/

footer{
    margin-top: 0px;
}

.footer{
    background-image: url(../images/footer_back_sp@2x.png);
    margin-top: 0px;
}

.footer_text{
    max-width: 375px;
}

.footer_text img{
    width: 43%;
}

.footer_text p{
    font-size: 10px;
}

/*======
aboutページ
=======*/

.main_visual_about_pc{
    display: none;
}

.main_visual_about_sp{
    display: block;
    text-align: center;
    position: relative;
    padding: 0 10px;
}

.main_visual_about_sp img{
        max-width: 85%;
        width: 100%;
        height: 600px;
        object-fit: none;
        border-radius: 30px;
}

.main_title_about_sp img{
    max-width: 90px;
    margin-top: -600px;
    object-fit: contain;
}

.about_page_sp{
    flex-direction: column;
    max-width: 375px;
    margin: 0 auto;
    padding-top: 100px;
}

.name_sp{
    display: flex;
    margin-bottom: 30px;
    text-align: start;
}

.about_img_sp img{
    width: 250px;
    height: 250px;
    object-fit: none;
    border-radius: 30px;
}

.about_text_sp p{
    font-size: 14px;
    max-width: 375px;
    line-height: 30px;
    text-align: start;
    padding-top: 30px;
}

.name_sub_sp{
    font-size: 12px;
    padding-top: 10px;
    padding-left: 15px;
    color: #04004A;
}

.strength{
    padding-top: 100px;
    margin: 0 auto;
}

.strength_title{
    padding-left: 20px;
    padding-bottom: 36px;
}

.strength_content{
    margin: 0 auto;
}

.strength_content img{
    text-align: center;
}

.strength_img{
    width:190px;
    margin: 0 auto
}

.strength_content h3{
    font-size: 18px;
}

.strength_content p{
    max-width: 315px;
    text-align: start;
    margin: 0 auto;
    padding-bottom: 90px;
}

.strength_img_02{
    margin: 0 auto;
    width:250px;
    height: 250px;
}

.strength_img_02 img{
    max-width: 244px;
    margin: 0 auto;
}

/*========
worksページ
========*/
.main_visual_works{
    text-align: center;
    position: relative;
}

.main_visual_works img{
        max-width: 85%;
        width: 100%;
        height: 600px;
        object-fit: none;
        border-radius: 30px;
        padding: 0 10px;
}

.main_title_works img{
    width: 94px;
    margin-top: -600px;
    object-fit: contain;
}

.works_content_page{
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
    padding-top: 100px;
}


/*========
works詳細ページ
========*/
.works_view_title{
    padding: 100px 0;
}

.works_view_text_{
    padding: 0 10px;
}
}