/*リセットCSS*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul,ol{
    list-style: none;
}
.image-wrapper img{
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
a{
    color: inherit;
    text-decoration: none;
}
body{
    color: #6b5b50;
    font-family: "Noto Sans JP", sans-serif;
}
h2{
    font-weight: 400;
    
}

/*ヘッダー*/
.header{
    background-color: rgba(158, 228, 247, 0.2);
    position: sticky;
    top: 0;
    z-index: 3;
}
.header_inner{
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 40px;

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

.header_logo{
    width: 275px;
}

.header__sp{
    display: none;
}

/*ナビ＋お問い合わせ*/
.header_menu{
    display: flex;
    align-items: center;
    gap: 40px;
}

/*ナビ*/
.nav_list{
    display: flex;
    gap: 40px;
}

.nav_item a{
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav_icon{
    position:relative;
    width:30px;
    height:30px;
}

.nav_shell{

    width:30px;
    height:30px;

    display:block;
    background:url(portforiio_assets/icon.png)
    center/contain no-repeat;
    transition:transform .5s;
}

.nav_face{

    position:absolute;

    width:33px;
    height:33px;

    left:3px;
    top:2px;

    background:url(portforiio_assets/tsumu_icon.png)
    center/contain no-repeat;
    opacity:0;
    transform:translateX(0);
    transition:
        transform .25s ease,
        opacity .2s;
    transition-delay:.5s;
    animation:none;
}

.nav_item a:hover .nav_shell{
    transform:rotate(270deg);
}

.nav_item a:hover .nav_text{
    transform:scale(1.3);
}

.nav_item a:hover .nav_face{
    opacity:1;
    transform:translateX(-14px);
    animation:peek .35s forwards;
    animation-delay:.3s;
}

@keyframes peek{
0%{
    opacity:0;
    transform:translateX(0);
}
70%{
    opacity:1;
    transform:translateX(-16px) translateY(-3px);
}
100%{
    opacity:1;
    transform:translateX(-14px);
}
}


/*お問い合わせボタン*/
.button_orange{
    display: inline-block;
    background-color: #ad8973;
    border-radius: 19.5px;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    transition: transform .25s, box-shadow .25s;
}

.button_orange:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px hsla(7, 22%, 32%, 0.35);
}


.button_inner a{
    display: block;
    padding: 11px 27px 12px;
    color: #f7f5f3;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

/*FV*/
.fv{
    height: 800px;
    background-image: url(portforiio_assets/haikei_FV_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.fv_inner{
    position: relative;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
}

/*メインコピー*/
.fv_copy{
    position: absolute;
    top: 270px;
    left: 581px;
}
.fv_title{

    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 30px;
    line-height: 1.6;
    letter-spacing: 0.2em;
}
.fv_sp{
    display: none;
}
.fv_title span{
    display: block;
}


.fv_title_line1,.fv_title_line2{
    opacity:0;
    transform:translateY(20px);
}

.fv_title_line1{
    animation: fadeUp 2s ease forwards;
}

.fv_title_line2{
    translate: 174px 43px;
    animation: fadeUp 2s ease forwards;
    animation-delay:1s;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*くまイラスト*/
.fv-image-kuma{
    width: 185px;

    position: absolute;

    top:260px;
    left: 160px;
}


/*カタツムリイラスト*/
.fv-image-tsumu{
    width: 120px;

    position: absolute;

    top:460px;
    left: 380px;
}

/*プロフィール*/
.profile{
    /*背景*/
    background:url(portforiio_assets/haikei_profile_bg.png), linear-gradient(to top, #ecfafd, #f2fbff, #f8fcff, #fcfdff, #ffffff);
        
    background-repeat:
        no-repeat;
    background-position:
        center;
    background-size:
        cover;
}
.profile_inner{
    position: relative;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 120px 135px 180px;
}

/*テキスト全体*/

.profile_content{
    max-width: 624px;
    margin: 0 auto;
}

/*タイトル*/
.section_title_wrapper{
    text-align: center;
}
.section_title{
    font-size: 30px;
    margin-bottom: 80px;
    position: relative;
    display: inline-block;
    line-height: 1
}

.section_title::before{
    content: "";
    position: absolute;

    width: 280px;
    height: 140px;

    background-image: url(portforiio_assets/dot_b_blue.png);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transform: scale(.6);
}

.section_title::after{
    content: "";
    position: absolute;

    width: 221px;
    height: 91px;

    background-image: url(portforiio_assets/dot_s_blue.png);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transform: scale(.6);
}

@keyframes dotFade{
    0%{
        opacity:0;
        transform:scale(.6);
    }

    60%{
        opacity:1;
        transform:scale(1.08);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }
}
.section_title_wrapper.show .section_title::before{
    animation: dotFade 1.5s ease forwards;
}

.section_title_wrapper.show .section_title::after{
    animation: dotFade 1.5s ease forwards;
    animation-delay: .7s;
}

.profile_title::before{
    top: -56px;
    left: -66px;
}

.profile_title::after{
    top: -32px;
    left: -14px;
}

/*写真*/
.profile_photo_area{
    position: relative;
    width: 250px;
    margin: 0 auto 50px;
}
.profile-photo{
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
}
/*カタツムリイラスト*/
.profile-image-tsumu{
    width: 119px;

    position: absolute;

    top:165px;
    left:50%;

    transform: translateX(calc(-50% + 134.5px));
}

/*名前*/
.profile_name{
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}
.profile_name_2{
    text-align: center;
    font-size: 16px;
    margin-bottom: 50px;
}

/*肩書*/
.profile_job{
    font-size: 20px;
    margin-bottom: 20px;
}
.profile_address{
    font-size: 16px;
    margin-bottom: 50px;
}

/*説明文*/
.profile_text{
    font-size: 16px;
    font-family: "Zen Maru Gothic", sans-serif;
    line-height: 1.5;
    margin-bottom: 20px;
}
.profile_text em{
    font-style: normal;
    font-weight: 900;
}

.profile_text span{
    text-decoration: underline;
}

/*くまイラスト*/
.profile-image-kuma{
    width: 227px;

    position: absolute;

    top:579px;
    left:50%;

    transform: translateX(calc(-50% - 472.5px));
}

/*作品*/
.works{
    /*背景*/
    background:
        url(portforiio_assets/haikei_work_bg.png), linear-gradient(to top, #e4f9e6, #e2fcf7, #ebfcff, #f8fdff, #ffffff);
    background-repeat:
        no-repeat;
    background-position:
        center;
    background-size:
        cover;
}
.works_inner{
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 120px 135px 180px;
}

/*タイトル*/

.works_title::before{
    width: 136px;
    height: 103px;

    background-image: url(portforiio_assets/dot_b_green.png);
    top: -39px;
    left: -36px;
}

.works_title::after{
    width: 114px;
    height: 73px;

    background-image: url(portforiio_assets/dot_s_green.png);
    top: -21px;
    left: -26px;
}

/*説明文*/
.works_text_wrap{
    text-align: center;
}
.works_text{
    display: inline-block;
    text-align: left;
    font-size: 16px;
    font-family: "Zen Maru Gothic", sans-serif;
}

/*作品一覧*/
.works_content{
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.work_grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 55px;
    margin-top: 50px;
}
.work_card{
    overflow: hidden;

    transition: 0.3s;
}

.work_card:hover{
    transform: translateY(-6px);
}

.work_title{
    padding: 16px;

    text-align: center;

    font-size: 16px;
}

.work_card img{
    width: 180px;
    height: 180px;
    object-fit: cover;
    object-position: top;
}

.work_img_wrapper_yellow{
    background-image: url(portforiio_assets/work1.png);
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    background-size: contain;
    padding: 25px;
}

.work_img_wrapper_green{
    background-image: url(portforiio_assets/work2.png);
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    background-size: contain;
    padding: 25px;
}

/*作品下部*/
.works_bottom{
    position: relative;
    margin-top: 80px;
    text-align: center;
}

/*もっと見るボタン*/
.works_button .button_inner a{
    padding: 10px 30px;
    text-align: center;
}

/*くまイラスト*/
.works-image-kuma{
    width: 212px;

    position: absolute;

    bottom: -163px;
    left:50%;

    transform: translateX(calc(-50% + 477px));

}

/*カタツムリイラスト*/
.works-image-tsumu{
    width: 123px;

    position: absolute;

    bottom: -138px;
    left:50%;

    transform: translateX(calc(-50% - 389.5px));
}

/*サービス*/
.service{
    /*背景*/
    background:
        url(portforiio_assets/haikei_service_bg.png), linear-gradient(to top, #fbfbe4, #fff8eb, #fff9f8, #fffcff, #ffffff);
    background-repeat:
        no-repeat;
    background-position:
        center;
    background-size:
        cover;
    
}

.service_inner{
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 120px 135px 180px;
}

/*タイトル*/

.service_title::before{
    width: 199px;
    height: 108px;

    background-image: url(portforiio_assets/dot_b_yellow.png);
    top: -46px;
    left: -41px;
}

.service_title::after{
    width: 110px;
    height: 80px;

    background-image: url(portforiio_assets/dot_s_yellow.png);
    top: -29px;
    left: 10px;
}

/*カード*/
.service_card{
    max-width: 800px;
    margin: 0 auto 80px;
    position: relative;
}

/*上部説明エリア*/
.service_head{
    background-color: #f3f3da;
    border-radius: 30px;
    padding: 30px 35px;
}

/*グラフィックだけ色変更*/
.service_card:nth-of-type(2) .service_head{
    background-color: #e2f3da;
}

.service_text{
    text-align: center;
}

.service_text h3{
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 700;
}

.service_text p{
    text-align: left;
    margin-top: 24px;
    font-family: "Zen Maru Gothic", sans-serif;
    line-height: 1.5;
    font-weight: 300;
}

/*Web・グラフィックイラスト*/
.service-image-Web,
.service-image-graphic{
    width: 400px;
    height: 200px;
    margin: 0 auto;
    background-color: #f9f3f9;
    border-radius: 20px;
    position: relative;
}

.service-image-Web img{
    width: 309px;
    position: absolute;
    top: 29px;
    left: 56px;
}

.service-image-graphic img{
    width: 278px;
    position: absolute;
    top: 8px;
    left: 74px;
}


/*料金表*/
.price_grid{
    display: grid;
    grid-template-columns: repeat(3,200px);
    gap: 100px;

    margin-top: 50px;
}


.price_box h4{
    width: 200px;
    height: 100px;

    background-image: url(portforiio_assets/work1.png);

    display: flex;
	align-items: center;
	justify-content: space-around;
    text-align: center;

    border-radius: 50px 50px 0 0;

    font-size: 20px;
    font-weight: 700;
    color: #f3eeeb;
    -webkit-text-stroke: 2px #6b5b50;
    paint-order: stroke fill;
}

.price_box p{
    width: 200px;
    height: 100px;

    background-color: #f9f9eb;

    display: flex;
	align-items: center;
	justify-content: space-around;

    border-radius: 0 0 50px 50px;

    font-size: 20px;
    font-weight: 700;

    color: #6b5b50;
}

.graphic .price_box h4{
    background-image: url(portforiio_assets/work2.png);
}
.graphic .price_box p{
    background-color: #f0f8ea;
}


/*説明文*/
.service_message{
    border-top: 2px dashed #6b5b50;
    width: 800px;
    margin: 80px auto 0;
    text-align: center;
    padding-top: 50px;
}

.service_message p{
    max-width: 777px;
    display: inline-block;
    text-align: left;
    line-height: 2;
    font-family: "Zen Maru Gothic", sans-serif;
}

.service_message p em{
    font-style: normal;
    font-weight: 900;
    background: linear-gradient(
    transparent 60%,
    #fff3a5 60%)
}

.service_message .pink{
    font-style: normal;
    font-weight: 900;
    background: linear-gradient(
    transparent 60%,
    #f9bfe0 80%)
}

/*くま＆カタツムリイラスト*/
.service-image-kumatsumu{
    width: 181px;

    position: absolute;

    top:789px;
    left:50%;

    transform: translateX(calc(-50% - 456.5px));
}

/*ツール*/
.tool_area{
    margin-top: 120px;
}

/*タイトル*/
.tool_title{
    margin-bottom: 80px;
}
.tool_title::before{
    width: 200px;
    height: 100px;

    background-image: url(portforiio_assets/dot_b_yellow.png);
    top: -40px;
    left: -40px;
}

.tool_title::after{
    width: 100px;
    height: 90px;

    background-image: url(portforiio_assets/dot_s_yellow.png);
    top: -20px;
    left: 10px;
}


/*ツール一覧*/
.tool_table{
    width: 800px;

    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;
    position: relative;
}


.tool_table::before{
    content: "";

    position: absolute;

    top: 50%;
    left: 0px;

    width: 100%;
    border-top: 2px dotted #e4cdbf;
}

.tool_table li{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 160px;
    height: 35px;

    border-radius: 5px;

    margin: auto 0 0;

    font-size: 18px;
    position: relative;
}
.tool_table li:first-of-type,
.tool_table li:nth-of-type(3n+1){
    margin-left: 72px;
}

.tool_table li:nth-of-type(1),
.tool_table li:nth-of-type(2),
.tool_table li:nth-of-type(3){
    margin-bottom: 50px;
}

.tool_table li:nth-of-type(3n){
    margin-right: 46px;
}

.tool_table li:not(:nth-of-type(3n)){
    margin-right: 100px;
}

.tool_table li:not(:nth-of-type(3n))::after{
    content: "";
    display: block;
    width: 100%;
    height: 66px;
    border-right: 2px dotted #e4cdbf;
    position: absolute;
    right: -43px;
}

.tool_table li:nth-of-type(1)::after,.tool_table li:nth-of-type(2)::after{
    top: -7px;
}

.tool_table li:nth-of-type(4)::after,.tool_table li:nth-of-type(5)::after{
    top: -24.5px;
}

.blue_shell{
    background: rgba(216, 227, 252, 0.6);
    position: relative;
}

.blue_shell::before{
    content: "";
    display:inline-block;
    width: 47px;
    height: 36px;
    background-image: url(portforiio_assets/tool_blue.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    position: absolute;
    top: 1px;
    left: -22px;
}

.orange_shell{
    background: rgba(251, 230, 198, 0.6);
    position: relative;
}

.orange_shell::before{
    content: "";
    display:inline-block;
    width: 47px;
    height: 36px;
    background-image: url(portforiio_assets/tool_orange.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    position: absolute;
    top: 1px;
    left: -22px;
}

.red_shell{
    background: rgba(251, 198, 203, 0.6);
    position: relative;
}

.red_shell::before{
    content: "";
    display:inline-block;
    width: 47px;
    height: 36px;
    background-image: url(portforiio_assets/tool_red.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    position: absolute;
    top: 1px;
    left: -22px;
}

.pink_shell{
    background: rgba(252, 216, 252, 0.6);
    position: relative;
}

.pink_shell::before{
    content: "";
    display:inline-block;
    width: 47px;
    height: 36px;
    background-image: url(portforiio_assets/tool_pink.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    position: absolute;
    top: 1px;
    left: -22px;
}


.green_shell{
    background: rgba(217, 252, 216, 0.6);
    position: relative;
}
.green_shell::before{
    content: "";
    display:inline-block;
    width: 47px;
    height: 36px;
    background-image: url(portforiio_assets/tool_green.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    position: absolute;
    top: 1px;
    left: -22px;
}

.blue_shell{
    background: rgba(216, 227, 252, 0.6);
}





/*お仕事の流れ*/
.flow{
    /*背景*/
    background: url(portforiio_assets/haikei_flow_bg.png), linear-gradient(to top, #fdf1fc, #fcf5fe, #fcf8ff, #fdfcff, #ffffff);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.flow_inner{
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    padding: 120px 135px 180px;
}

/*タイトル*/

.flow_title::before{
    width: 268px;
    height: 125px;

    background-image: url(portforiio_assets/dot_b_pink.png);
    top: -49px;
    left: -41px;
}

.flow_title::after{
    width: 245px;
    height: 100px;

    background-image: url(portforiio_assets/dot_s_pink.png);
    top: -40px;
    left: -35px;
}

/*説明文*/
.flow_text_wrap{
    text-align: center;
}

.flow_text{
    display: inline-block;
    text-align: left;
    font-family: "Zen Maru Gothic", sans-serif;
    line-height: 1.5;
    margin-bottom: 80px;
}

/*リスト*/
.flow_list{
    max-width: 563px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 70px;
}

/*リスト1行分*/
.flow_item{
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
}

/*イラストアイコン*/
.flow_icon{
    width: 120px;
    height: 120px;
    position: relative;
    flex-shrink: 0;
    border: 1px solid #6b5b50;
    border-radius: 20px;
    background-color: #f9f3f9;
}
.flow_icon img{
    position: absolute;
}
.icon1 img{
    width: 97px;
    top: 21px;
    left: 9px;
}
.icon2 img{
    width: 100px;
    top: 17px;
    left: 9px;
}
.icon3 img{
    width: 88px;
    top: 14px;
    left: 13px;
}
.icon4 img{
    width: 108px;
    top: 16px;
    left: 5px;
}.icon5 img{
    width: 96px;
    top: 14px;
    left: 10px;
}

/*数字アイコン*/
.flow_number{
    width: 64px;

    position: absolute;

    left: 85px;
    top: 85px;

    z-index: 2;
}
/*テキストエリア*/
.flow_content{
    flex: 1;
}

/*見出し*/
.flow_heading{
    font-size: 20px;

    font-weight: 700;

    margin-bottom: 20px;

    text-align: center;
}

/*くまカタツムリイラスト*/
.flow-image-kumatsumu{
    width: 358px;

    position: absolute;

    top:50px;
    left:50%;

    transform: translateX(calc(-50% + 406px));
}



/*お問い合わせ*/

.contact_inner{
    margin: 0 auto;
    position: relative;
    padding: 120px 135px 247px;
    width: 100%;
    /*空・芝生背景*/
    background-image: 
    url(portforiio_assets/haikei_contact_bg_sky.jpg),
    url(portforiio_assets/haikei_contact_bg_grass.jpg);
    background-repeat: 
    no-repeat,
    no-repeat;
    background-position: 
    center top,
    center bottom;
    background-size: 
    100% 110px,
    100% 291px;
}

.contact_button_wrapper{
    text-align: center;
}

/*虹イラスト*/
.contact-image-rainbow{
    width: 990px;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

/*タイトル*/
.contact_title{
    position: absolute;
    top: 279px;
    left: 50%;
    transform: translate(-50%);
    z-index: 2;
}
.contact_title::before{
    width: 274px;
    height: 144px;

    background-image: url(portforiio_assets/dot_b_orange.png);
    top: -61px;
    left: -50px;
}

.contact_title::after{
    width: 218px;
    height: 102px;

    background-image: url(portforiio_assets/dot_s_orange.png);
    top: -40px;
    left: -16px;
}

/*見出し*/
.contact_text_big{
    text-align: center;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 24px;
    font-weight: 900;
    margin-top: 50px;
    margin-bottom: 50px;
}

/*説明文*/
.contact_text_small_wrap{
    text-align: center;
}
.contact_text_small{
    font-family: "Zen Maru Gothic", sans-serif;
    line-height: 1.5;
    margin-bottom: 50px;
    display: inline-block;
    text-align: left;
}

/*お問い合わせフォーム*/

.contact_form_wrapper{
    margin-top:60px;
    display:flex;
    justify-content:center;
}

.contact_form{

    width:100%;
    max-width:560px;
    padding:50px;
    background:#ccb19c;
    border-radius:30px;
    box-sizing:border-box;

    margin-bottom:80px;

}

.ff-item-qs {
    font-size:18px;
    font-weight:700;
    color:#5f4b3d;
    margin-bottom:13px;
    display:block;
    margin-bottom:10px;
}

.ff-widget-control {
    height:48px;
    border-radius:10px;
    padding:0 15px;
    border:none;
    display:block;
    width:100%;
}

.btn {
    color:#fff;
    border-radius:50px;
    font-weight:700;
    transform:translateY(-3px);
    border:2px solid #89674e;
}

.ff-secfields{
    margin-bottom: 50px;
}

.ff-button-bar #ff-submit-root{
    padding-block: 18px;
    padding-inline: 70px;
    display: inline-flex;
    justify-content: center;
    vertical-align: middle;
    background:#9d7f69;
    color:#fff;
    background-color: .3s;
    transform: .3s;
    box-shadow: .3s;
}

#ff-submit-root:hover{
    background:#8a6d5a;

    transform:translateY(-4px);

    box-shadow:0 8px 18px rgba(0,0,0,.15);

    cursor:pointer;
}
#ff-submit-root:active{
    transform:translateY(0);
}

/*くまカタツムリイラスト*/
.contact-image-kumatsumu{
    width: 441px;
    position: absolute;
    left: 50%;
    bottom: 180px;
    transform: translateX(calc(-50% + 363px));
}


/*フッター*/
.footer{
/*背景*/
    background-color: #f9f9f3;
}

.footer_inner{
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 467px;
}

/*ロゴ*/
.footer_logo{
    width: 506px;

    margin-bottom: 50px;
}

/*SNS*/
.sns_list{
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 100px;

    margin-bottom: 80px;
}

.sns_item{
    width: 70px;

    transition: 0.3s;
}

.sns_item:hover{
    transform: translateY(-5px);
}

/*コピーライト*/
.footer small{
        font-size: 14px;
}

/* --------------------
ここからモバイル版のスタイル
-------------------- */

/* 小さめのパソコン */
@media screen and (max-width:1270px){
    /* ヘッダー */
    .header{
        display: none;
    }

    .header_logo{
    width:18%;
    max-width:275px;
    min-width:200px;
    margin-top:10px;
}

    .header__sp{
        display: flex;
        width: 100%;
        min-height:100px;
        padding: 8px 20px 9px;
        justify-content: space-between;
        align-items:flex-start;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(158, 228, 247, 0.2);
        z-index: 3;
    }

    


    .hamburger-menu{
        display: flex;
        flex-direction: column;
        align-items: end;
        margin-top:11px;
    }

    .hamburger-btn{
        display: flex;
        width: 58px;
        height: 55px;

        margin: 0 0 0 auto;
        font-size: 14px;
        list-style:none;
        background-image: url(portforiio_assets/icon.png) ;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 34px 34px;
        align-items: end;
        justify-content:center; 
        position: relative;
        overflow: hidden;
    }

    .hamburger-btn::-webkit-details-marker{
        display:none;
    }

    .header_menu{
        margin-top: 0px;
        padding-top:30px;
        gap: 30px;
        flex-direction: column;
    }

    .nav_list{
        gap: 20px;
        flex-direction: column;
        align-items: end;
    }

    .hamburger-menu[open] {
        padding-bottom: 148px;
    }

    .header__sp:has(.hamburger-menu[open]){
    background-image: linear-gradient(to right, #b7ebf9, #c0eefa, #c9f0fa, #d2f3fb, #dbf5fc, #e2f6fe, #e9f8ff, #eff9ff, #f4faff, #f9fbff, #fdfdff, #ffffff);
    }

    .hamburger-menu[open] .hamburger-btn{
        background-image: url(portforiio_assets/mobile_assets/icon_gray.png);
    }

.hamburger-btn::after{
    content:"メニュー";
    display: block;
    line-height: 1;
}

.hamburger-menu[open] .hamburger-btn::after{
    content:"閉じる";
}

    .hamburger-menu-kuma{
        width: 111px;
        position: absolute;
        left: 14px;
        bottom: 50px;
    }

    .hamburger-menu-tsumu{
        width: 61px;
        position: absolute;
        left: 140px;
        bottom: 60px;
    }


    /*FV*/
    .main{
        padding-top: 96px;
    }

    .fv_copy{
        position: absolute;
        top: 270px;
        left:50%;
        transform: translateX(calc(-50% + 0px));
}

/*くまイラスト*/
.fv-image-kuma{
    width:15%;
    max-width:185px;
    min-width:100px;
    top:264px;
    left:50%;
    transform: translateX(calc(-50% - 253%));
}

/*カタツムリイラスト*/
.fv-image-tsumu{
    width:9%;
    max-width:120px;
    min-width:70px;
    top:460px;
    left:50%;
    transform: translateX(calc(-50% - 233%));
}

/* プロフィール */
.section_title{
    font-size: 28px;
}

.profile_content{
    max-width: 550px;
    margin: 0 auto;
}



/*くまイラスト*/
.profile-image-kuma{
    width: 18%;
    max-width:227px;
    min-width:180px;
    top:650px;
    left:50%;
    transform: translateX(calc(-50% - 208%));
}


/*作品*/

.work_grid{
    gap: 40px;
}
.works_inner{
    padding: 120px 70px 180px;
}
.works_content{
    justify-content: center;
}

/*くまイラスト*/
.works-image-kuma{
    width: 17%;
    max-width:212px;
    min-width:150px;
    bottom: -180px;
    left:50%;

    transform: translateX(calc(-50% + 245%));

}

/*カタツムリイラスト*/
.works-image-tsumu{
    width: 17%;
    max-width:123px;
    min-width:70px;
    bottom: -138px;
    left:50%;

    transform: translateX(calc(-50% - 250%));
}

/* サービス */
.service_inner{
    padding: 120px 70px 180px;
}
}

.price_grid{
    gap: 80px;
}

/*くま＆カタツムリイラスト*/
.service-image-kumatsumu{
    width: 14%;
    max-width:181px;
    min-width:140px;
    top:900px;
    left:50%;

    transform: translateX(calc(-50% - 250%));
}


/*お仕事の流れ*/

/*くまカタツムリイラスト*/
.flow-image-kumatsumu{
    width: 28%;
    max-width:290px;
    min-width:250px;
    top:50px;
    left:50%;

    transform: translateX(calc(-50% + 125%));
}


/* お問い合わせ */
/*虹イラスト*/
.contact-image-rainbow{
    width: 78%;
    max-width:990px;
    min-width:800px;
    left:50%;
    transform: translateX(calc(-50%));
}

/*くまカタツムリイラスト*/
.contact-image-kumatsumu{
    width: 35%;
    max-width:441px;
    min-width:300px;
    bottom: 180px;
    left:50%;
    transform: translateX(calc(-50% + 70%));
}

/*フッター*/
.footer_inner{
    padding:60px 5%;
}

/*ロゴ*/
    .footer_logo{
    width:35%;
    max-width:506px;
    min-width:350px;
}

.sns_list{
    gap: 60px;
}

.sns_item{
    width: 60px;
}

/* タブレット */
@media screen and (max-width:900px){

    
    /* ヘッダー */
.header_logo{
    min-width:180px;
}

    /* FV */
    .fv_title{
    font-size: 20px;
}

.fv_title_line2{
    translate: 145px 43px;
}

/*くまイラスト*/
.fv-image-kuma{
    transform: translateX(calc(-50% - 230%));
}

/*カタツムリイラスト*/
.fv-image-tsumu{
    top:400px;
    transform: translateX(calc(-50% - 190%));
}

/* プロフィール */

.profile{
    /*背景*/
    background-repeat:
        repeat-y;
    background-position:
        center top;
    background-size:
        190%;
}



/*くまイラスト*/
.profile-image-kuma{
    max-width:150px;
    min-width:140px;
    top: 400px;
    transform: translateX(calc(-50% - 130%));
}

.profile-image-tsumu{
    width: 100px;
}

/* タイトル */
.section_title{
    font-size: 24px;
}

/* 作品 */
.works{
    /*背景*/
    background-repeat:
        repeat-y;
    background-position:
        center top;
    background-size:
        190%;
}

.works_inner{
    padding: 120px 50px 180px;
}
.work_grid{
    grid-template-columns: repeat(2,1fr);
    gap: 45px;
}
/*くまイラスト*/
.works-image-kuma{
    max-width:150px;
    min-width:130px;
    bottom: -190px;
    transform: translateX(calc(-50% + 150%));

}

/*カタツムリイラスト*/
.works-image-tsumu{
    max-width:70px;
    min-width:50px;
}

/*サービス*/
.service{
    /*背景*/
    background-repeat:
        repeat-y;
    background-position:
        center top;
    background-size:
        200%;
}

.service_inner{
    padding: 120px 20px 180px;
}

.price_grid{
    grid-template-columns: repeat(2,200px);
    justify-content:center;
    gap: 100px;
}

.service-image-kumatsumu{
    max-width:140px;
    min-width:110px;
    top:820px;

    transform: translateX(calc(-50% - 225%));
}
.service_message{
    width: 550px;
    margin: 80px auto 0;
}
.service_message p{
    max-width: 540px;
}

.tool_table{
    width: 400px;
    transform: translateX(5.5px);
}

.tool_table::before{

    width:2px;
    height:110%;
    top: -5%;
    border-top:none;
    border-left:2px dotted #e4cdbf;
    left:50%;
    transform:translateX(calc(-50% - 5.5px));
}

.tool_table li{
    margin-left: auto;
}

.tool_table li:first-of-type,
.tool_table li:nth-of-type(3n+1){
    margin-left: auto;
}

.tool_table li:nth-of-type(1),
.tool_table li:nth-of-type(2),
.tool_table li:nth-of-type(3){
    margin-bottom: 0;
}

.tool_table li:nth-of-type(3n){
    margin-right: auto;
}

.tool_table li:not(:nth-of-type(3n)){
    margin-right: auto;
}


.tool_table li:nth-of-type(odd){
    margin-right:80px;
}

.tool_table li:nth-of-type(n+3){
    margin-top:50px;
}
.tool_table li:not(:nth-of-type(3n))::after{
    display:none;
}

.tool_table li:nth-of-type(n+3)::after{
    content: "";
    display: block;
    width: 235px;
    height: 100%;
    border-top: 2px dotted #e4cdbf;
    border-right: 0;
    position: absolute;
    top: -25px;
    left: -44px;
}

/*お仕事の流れ*/

.flow{
    /*背景*/
    background-repeat:
        repeat-y;
    background-position:
        center top;
    background-size:
        190%;
}

/*リスト1行分*/
.flow_item{
    gap: 20px;
}

/*イラストアイコン*/
.flow_icon{
    width: 80px;
    height: 80px;
}
.icon1 img{
    width: 57px;
}
.icon2 img{
    width: 60px;
}
.icon3 img{
    width: 48px;
}
.icon4 img{
    width: 68px;
}.icon5 img{
    width: 56px;
}

.flow_number{
    width: 40px;
    top: -4px;
    left: 50%;
}
.flow_item:nth-of-type(1) .flow_number{
    transform: translateX(-148%);
}

.flow_item:nth-of-type(2) .flow_number{
    transform: translateX(-235%);
}

.flow_item:nth-of-type(3) .flow_number{
    transform: translateX(-148%);
}

.flow_item:nth-of-type(4) .flow_number{
    transform: translateX(-170%);
}

.flow_item:nth-of-type(5) .flow_number{
    transform: translateX(-58%);
}


/*見出し*/
.flow_heading{
    font-size: 18px;
}

/*くまカタツムリイラスト*/
.flow-image-kumatsumu{
    width: 28%;
    max-width:230px;
    min-width:90px;
    top:70px;
    left:50%;

    transform: translateX(calc(-50% + 128%));
}

/* お問い合わせ */
/*タイトル*/
.contact_title::before{
    width: 260px;
    height: 130px;

    background-image: url(portforiio_assets/dot_b_orange.png);
    top: -55px;
    left: -50px;
}

.contact_title::after{
    width: 200px;
    height: 90px;

    background-image: url(portforiio_assets/dot_s_orange.png);
    top: -35px;
    left: -16px;
}

/*見出し*/
.contact_text_big{
    font-size: 20px;
    margin-top: 100px;
    margin-bottom: 50px;
}

/*虹イラスト*/
.contact-image-rainbow{
    width: 78%;
    max-width:990px;
    min-width:550px;
    left:50%;
    transform: translateX(calc(-50%));
}


/*くまカタツムリイラスト*/
.contact-image-kumatsumu{
    width: 35%;
    max-width:441px;
    min-width:280px;
    bottom: 180px;
    left:50%;
    transform: translateX(calc(-50% + 50%));
}

/*フッター*/
.footer_inner{
    padding:60px 10%;
}

/*ロゴ*/
    .footer_logo{
    width:35%;
    max-width:506px;
    min-width:300px;
}

.sns_list{
    gap: 50px;
}

.sns_item{
    width: 50px;
}


}

/* スマホ */
@media screen and (max-width:600px){

    .fv{
        height: 540px;
}
    .fv_copy{
        position: absolute;
        top: 100px;
        left:50%;
        transform: translateX(calc(-50% + 70px));
}
    .fv_title{
    font-size: 20px;
    text-align: left;
    line-height: 1.8;
}
    .fv_sp{
        display: block;
    }

    .fv_title_line2{
        translate: 0 0;
    }

/*くまイラスト*/
.fv-image-kuma{
    width: 95px;
    top:170px;
    transform: translateX(calc(-50% - 150%));
}

/*カタツムリイラスト*/
.fv-image-tsumu{
    width: 40px;
    top:280px;
    transform: translateX(calc(-50% - 95%));
}

/*プロフィール*/
.profile_inner{
    height: 1153px;
    padding: 60px 15px 90px;
}

.profile{
    /*背景*/
    background-size:
        250%;
}


/*テキスト全体*/

.profile_content{
    max-width: 310px;
}

/*タイトル*/
.section_title{
    font-size: 20px;
    margin-bottom: 50px;
}

.section_title::before{
    width: 161px;
    height: 130px;
    top:-30px;
    left: -22px;
}

.section_title::after{
    width: 127px;
    height: 52px;
    top: -16px;
    left: 8px;
}

/*写真*/
.profile_photo_area{
    width: 153px;
    margin: 0 auto 30px;
}
/*カタツムリイラスト*/
.profile-image-tsumu{
    width: 73px;
    top:101px;
    left:50%;

    transform: translateX(calc(-50% + 86px));
}

/*名前*/
.profile_name{
    font-size: 20px;
    margin-bottom: 10px;
}
.profile_name_2{
    font-size: 14px;
    margin-bottom: 30px;
}

/*肩書*/
.profile_job{
    text-align: center;
    font-size: 18px;
}
.profile_address{
    text-align: center;
    margin-bottom: 30px;
}

.profile_text{
    margin-bottom: 30px;
}

.profile_text_sp{
    text-align: center;
    line-height:1.5;
}

.profile-image-kuma{
    max-width:140px;
    min-width:110px;
    top: 200px;
    transform: translateX(calc(-50% - 130%));
}


/* 作品 */
.works{
    /*背景*/
    background-size:
        250%;
}
/*タイトル*/
.works_title::before{
    width: 100px;
    height: 80px;

    background-image: url(portforiio_assets/dot_b_green.png);
    top: -30px;
    left: -30px;
}

.works_title::after{
    width: 90px;
    height: 50px;

    background-image: url(portforiio_assets/dot_s_green.png);
    top: -15px;
    left: -15px;
}

.work_grid{
        grid-template-columns:1fr;
        justify-items:center;
        gap:25px;
    }


.works-image-kuma{
    max-width:130px;
    min-width:100px;

    bottom:-150px;

    transform:translateX(calc(-50% + 130%));
}

.works-image-tsumu{
    max-width:50px;
    min-width:40px;

    transform:translateX(calc(-50% - 230%));
}

/* サービス */
.service{
    /*背景*/
    background-size:
        250%;
}
/*タイトル*/

.service_title::before{
    width: 150px;
    height: 80px;

    background-image: url(portforiio_assets/dot_b_yellow.png);
    top: -30px;
    left: -30px;
}

.service_title::after{
    width: 80px;
    height: 50px;

    background-image: url(portforiio_assets/dot_s_yellow.png);
    top: -15px;
    left: 10px;
}


.service_card{
    max-width:100%;
    margin:0 auto 60px;
}

.service_head{
    padding:20px 35px;
}

.service-image-Web,
.service-image-graphic{
    width:100%;
    max-width:320px;
    height:160px;
}

.service-image-Web img{
    width:75%;
    top:25px;
    left:50%;
    transform:translateX(-50%);
}

.service-image-graphic img{
    width:70%;
    top:15px;
    left:50%;
    transform:translateX(-50%);
}

.price_box{
    margin:0 auto;
}

.price_grid{
    grid-template-columns: 1fr;
    justify-content:center;
    gap: 50px;
}


.service_message{
    width:100%;
    margin:60px auto 0;
    padding-top:40px;
}

.service_message p{
    max-width:100%;
    line-height:1.8;
}

.service-image-kumatsumu{
    max-width:110px;
    min-width:105px;
    top:820px;
    left:50%;
    transform: translateX(calc(-50% - 135%));
}

/*ツール*/
/*タイトル*/
.tool_title::before{
    width: 170px;
    height: 70px;

    background-image: url(portforiio_assets/dot_b_yellow.png);
    top: -30px;
    left: -30px;
}

.tool_title::after{
    width: 70px;
    height: 60px;

    background-image: url(portforiio_assets/dot_s_yellow.png);
    top: -15px;
    left: 5px;
}



.tool_table{
    display:flex;
    flex-direction:column;
    align-items:center;

    max-width:100%;
    transform:translateX(5.5px);
}

.tool_table::before{
    display:none;
}


.tool_table li:nth-of-type(odd){
    margin-right:auto;
}

.tool_table li:nth-of-type(n+3){
    margin-top:0px;
}

.tool_table li:nth-of-type(n+2){
    margin-top: 31px;
}

.tool_table li:nth-of-type(n+3)::after,
.tool_table li:nth-of-type(2)::after{
    content: "";
    display: block;
    width: 300px;
    height: 100%;
    border-top: 2px dotted #e4cdbf;
    border-right: 0;
    position: absolute;
    top: -16.5px;
    left: 50%;
    transform: translateX(calc(-50% - 11px));
}


/*お仕事の流れ*/
.flow{
    /*背景*/
    background-size:
        240%;
}
.flow_inner{
    padding: 120px 20px 180px;
}

/*タイトル*/

.flow_title::before{
    width: 190px;
    height: 100px;

    background-image: url(portforiio_assets/dot_b_pink.png);
    top: -30px;
    left: -30px;
}

.flow_title::after{
    width: 210px;
    height: 70px;

    background-image: url(portforiio_assets/dot_s_pink.png);
    top: -25px;
    left: -20px;
}

/*くまカタツムリイラスト*/
.flow-image-kumatsumu{
    width: 28%;
    max-width:190px;
    min-width:90px;
    top:70px;
    left:50%;

    transform: translateX(calc(-50% +210%));
}

/* お問い合わせ */

.contact_inner{
    padding: 120px 20px 247px;
}

/*虹イラスト*/
.contact-image-rainbow{
    width: 78%;
    max-width:600px;
    min-width:350px;
    left:50%;
    transform: translateX(calc(-50%));
}

/*タイトル*/
.contact_title{
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translate(-50%);
    z-index: 2;
}

.contact_title::before{
    width: 220px;
    height: 85px;

    background-image: url(portforiio_assets/dot_b_orange.png);
    top: -30px;
    left: -20px;
}

.contact_title::after{
    width: 150px;
    height: 60px;

    background-image: url(portforiio_assets/dot_s_orange.png);
    top: -20px;
    left: -5px;
}

/*見出し*/
.contact_text_big{
    font-size: 20px;
    font-weight: 900;
    margin-top: 50px;
    margin-bottom: 50px;
}

/*くまカタツムリイラスト*/
.contact-image-kumatsumu{
    width: 35%;
    max-width:300px;
    min-width:230px;
    bottom: 180px;
    left:50%;
    transform: translateX(calc(-50% + 30%));
}
}