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

*, *::after, *::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  border: none;
  scroll-behavior: smooth;
}

body{
    font-size: 18px;
    letter-spacing: 1px;
    color: #000000;
    font-family: "MFW-ShinGoPro-Regular";

    position: relative;
    line-height: 2;
}

p{
    font-size: 18px;
    line-height: 36px;
}

a{
    cursor: pointer;
    color: #000000;
}

img{
    width: 100%;
}

h2{
    font-family: "MFW-RyuminPro-ExHeavy";
    font-weight: 600;
}

h3{
    font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
    /* font-weight: 600; */
    margin-bottom: 10px;
    line-height: 29px;
}

main{
    z-index: 0;
}

.main-visual{
    background-image: url(/assets/images/top/black_gradient\ 17.46.56.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #333333;

    width: 100%;
    height: 363px;
    display: flex;
    justify-content: center;
}

.main-visual-content{
    padding-top: 45px;
    padding-left: 6%;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-top: 165px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    color: #ffffff;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

#web-marketing-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/web_marketing/web_marketing_mv.webp);
}

#web-design-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/web_design/web_design_mv.webp);
}

#logo-design-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/logo_design/logo_mv_content_bg.webp);
}

#server-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/server/server_mv_content_bg.webp);
}

#web-content-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/web_content_management/web_content_mv.webp);
}

#usability-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/usability/usability_mv.webp);
}

#privacy-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/privacy/privacy_mv_content_bg.webp);
    padding-top: 60px;
}

#fullscratch-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/fullscratch/fullscratch_mv_content_bg.webp);
}

#ciso-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/ciso/ciso_mv_content_bg.webp);
    padding-top: 60px;
}

#ec-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/opensource_ec/ecube_mv_content_bg.webp);
}

#cms-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/opensource_cms/opencms_mv_content_bg.webp);
}

#company-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/company_page/company_profile_mv_content\ bg.webp);
    padding-top: 60px;
}

#recruit-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/recruit/recruit_mv_content_bg.webp);
    padding-top: 60px;
}

#powercms-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/powercms/powercms_mv_content_bg.webp);
}

#chiba-main > .main-visual > .main-visual-content{
    background-image: url(/assets/images/chiba_shi/chiba_shi_mv.webp);
    padding-top: 60px;
}

.tag{
    max-width: 200px;
    font-family: "MFW-ShinGoPro-DeBold";
    font-size: 16px;
    font-weight: 600;
    line-height: 1;

    background-color: #818384;
    color: #ebebeb;
    padding: 5px;
    border-radius: 5px;
}

#fullscratch-main .tag,
#ec-main .tag, #cms-main .tag,
#powercms-main .tag{
    max-width: 233px;
}

.main-title{
    font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
    font-weight: 600;
    font-size: 50px;
    line-height: 1.2;
    color: white;
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.534);
}

.main-title > br{
    display: none;
}

section{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.page-title{
    margin-top: 43px;
    margin-bottom: 32px;
}

.page-title-wrapper{
    h2{
        font-size: 48px;
        line-height: 68px;
        margin-bottom: 25px;
    }

    p{
        font-size: 22px;
        line-height: 45px;
    }
}

.obi{
    height: 66px;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 60px;
    margin-bottom: 32px;

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

.obi-purple{
    background: linear-gradient(to right, #333333 0%, #333333 68%, #96005F 100%);
}

.obi-text h2{
    width: 100%;
    font-family: "MFW-RyuminPro-ExHeavy";
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    padding-left: 30px;
    color: white;
}

.obi-arrow-sp{
    display: none;
}

.shin-go-title{
    font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
    width: 90%;
    max-width: 1000px;
    font-size: 24px;
    font-weight: 600;
    margin: 15px auto;
}

.ryumin-title{
    /* width: 95%; */
    margin: 0 auto;
    font-size: 32px;
    line-height: 52px;
    font-family: "MFW-RyuminPro-ExHeavy";
    font-weight: 600;
    margin-bottom: 32px;
}

.bottom-line-title{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    /* margin-bottom: 32px; */
    margin-bottom: 60px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    justify-content: center;
}

.bottom-line-title > p{
    font-size: 48px;
    line-height: 1.5;
    text-align: center;

    font-family: "MFW-RyuminPro-ExHeavy";
    font-weight: 600;
    font-style: normal;
}

.bottom-line{
    height: 2px;
    width: 96px;
    margin: 0 auto;
    background-color: #AE9D82;
}

#web-content-main .bottom-line-title{
    margin-top: 60px;
}

.section-para{
    font-size: 22px;
    line-height: 45px;
    /* width: 90%; */
    max-width: 1000px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto 32px auto;
}

.section-para p{
    font-size: 20px;
    line-height: 41px;
}

#server-main .section-para{
    margin-top: 32px;
}

.service-details{
    margin-bottom: 15px;
}

.side-title{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 15px;
    margin-top: 32px;
}

.side-title-shape{
    display: block;
    width: 10px;
    height: 55px;
    background-color: #285EAB;
}

.side-title > p{
    font-family: "MFW-RyuminPro-ExHeavy";
    font-weight: 600;
    font-size: 28px;
}

#web-content-main .side-title{
    margin-top: 32px;
}

.side-title-two{
    width: 367px;
    height: 55px;

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

    background-image: url(/assets/images/common/side_title_2.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    color: white;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;

    margin-bottom: 20px;
}

.side-title-two h3{
    font-size: 28px;
    margin-bottom: 0;
    margin-right: 12px;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.drop-arrow{
    width: 293px;
    height: 25px;
    margin: 51px auto;
}

.drop-arrow img{
    width: 293px;
    height: 25px;
    margin: 0 auto;
    object-fit: contain;
}

.triangle-card-wrapper, .number-cards, .two-tri-cards, .three-tri-cards,
.vertical-image-cards, .horizontal-image-cards, .strengths-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#powercms-main .strengths-wrapper{
    margin: 60px auto;
}

/* #powercms-main .section-para{
    width: 90%;
} */

.two-tri-cards{
    max-width: 1000px;
    margin: 32px auto;
    display: flex;
    gap: 20px;
}


.triangle-card-wrapper > .triangle-card:nth-last-child(1), 
.vertical-image-cards > .vertical-card:nth-last-child(1){
    flex: 0 1 320px;
}

#server-main .horizontal-image-card:nth-last-child(1), 
#web-content-main .horizontal-image-card:nth-last-child(1),
#cms-main .horizontal-image-card:nth-last-child(1),
#web-content-main .strength-card:nth-last-child(1),
#usability-main .strength-card:nth-last-child(1),
#powercms-main .strength-card:nth-last-child(1),
.fullscratch-card:nth-last-child(1){
    flex: 0 1 490px;
}

.five-tri-cards, .five-img-cards{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vertical-image-card{
    flex: 1 1 320px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 4px 4px 13.6px 0 rgba(0,0,0,0.1);
}

.vertical-image-card > .image-card-content > img{
    width: 200px;
    height: 113px;
    object-fit: contain;
}

.vertical-image-card > .image-card-content > p{
    margin-bottom: 20px;
}

.vertical-image-card .image-card-content :nth-last-child(1){
    margin-top: auto;
}

.image-card-content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: clamp(270px, 100%, 370px);
    line-height: 1.5;
}

.image-card-content > .card-img{
    width: 134px;
    height: 121px;
    margin: 0 auto;
    margin-top: auto;
    object-fit: contain;
}

.horizontal-image-card{
    flex: 1 1 490px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 4px 4px 13.6px 0 rgba(0,0,0,0.1);

    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    gap: 15px;
}

.horizontal-card-img{
    width: 100%;
    max-width: 134px;
    max-height: 120px;
    margin: auto;
}

.horizontal-card-img > img{
    /* width: 134px; */
    height: 95px;
    object-fit: contain;
}

/* ciso */

#ciso-main .ryumin-title{
    margin-bottom: 10px;
}

#ciso-main .bottom-line-title{
    margin-bottom: 32px;
}

.service-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 32px auto;

    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 60px 10px;
    padding: 2rem 1rem;

    border-radius: 10px;
    box-shadow: 4px 4px 10px 1px hsla(0, 0%, 20%, 0.131);
}

.service-box{
    flex: 1 1 300px;
    height: 550px;
    display: grid;
    grid-template-rows: 204px 1fr 1fr;
    align-items: center;
    gap: 10px;
}

.service-box:nth-last-child(1) div:nth-child(1){
    margin-bottom: auto;
    text-align: center;
    margin-top: 10px;
}

.service-content{
    margin-top: auto;
    margin-bottom: auto;
}

.divider-line{
    width: 2px;
    height: 420px;
    margin: auto 0;
    background-color: #d8d8d8;
}

.service-content > h3{
    line-height: 1.5;
    text-align: center;
    margin-bottom: 0;
}

.service-img{
    height: 120px;
    margin: 0 auto;
    object-fit: contain;
}

.jump-btn{
    width: 160px;
    height: 40px;
    margin: 0 auto;
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    background-color: #6128AB;
    font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
    transition: all 0.3s ease;
}

.jump-btn:hover{
    opacity: 0.85;
}

.obi-link > a > img{
    height: 40px;
    object-fit: contain;
    margin-right: 1rem;
}

.table-wrapper{
    width: 100%;
    max-width: 1000px;
    margin: 32px auto;
    border: 1px solid #ababab;
}

.table-content{
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.table-left{
    padding: 1rem 2rem;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    border-right: 1px solid #ABABAB;
    border-bottom: 1px solid #ABABAB;
}

.table-left p > br{
    display: none;
}

.table-right{
    list-style: none;
    display: flex;
    flex-direction: column;
}

.table-right > li{
    height: 100%;
    border-bottom: 1px solid #ABABAB;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.content-list li > b,
.content-list li a > b{
    font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
}

.table-head{
    background-color: #EBE6DF;
}

.table-head > .table-right{
    padding: 1rem 2rem;
    font-weight: 600;
    border-bottom: 1px solid #ABABAB;
}

.table-content:nth-last-child(1) > .table-right > li:nth-last-child(1),
.table-content:nth-last-child(1) > .table-left{
    border-bottom: 0;
}


/* 会社案内 */

#company-main .table-content,
#recruit-main .table-content,
#chiba-main .table-content{
    display: flex;
}

#company-main .table-left,
#recruit-main .table-left,
#chiba-main .table-left{
    flex: 1;
    background-color: #EBE6DF;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
}

#company-main .table-right,
#recruit-main .table-right,
#chiba-main .table-right{
    flex: 7;
}

#company-main .signature-block{
    font-size: 22px;
}

.content-list{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.east-profile-logo{
    width: auto;
    max-width: 300px;
    margin-right: auto;
    object-fit: contain;
    margin-bottom: 15px;
}

.car-creative-profile-logo{
    width: auto;
    max-width: 250px;
    object-fit: contain;
}

.chiba-kun-col{
    flex-direction: row;
    display: flex;
}

.chiba-kun-col > li:nth-last-child(2) {
    /* flex: 3; */
    padding: 1rem 1rem 1rem 2rem;
}

.chiba-kun-col > li:nth-last-child(1) {
    /* flex: 1; */
    flex: 1.4;
    padding: 1rem 39px 1rem 0;
}

.chiba-kun{
    width: 60px;
}

.table-content:nth-last-child(6) .table-right li > .content-list{ 
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.company-profile-logos img{
    height: 120px;
    object-fit: contain;
}

/* chiba shi 千葉市 */

#chiba-main .chiba-kun-bg{
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.chiba-kun-bg > img{
    width: 160px;
    height: 263px;
    object-fit: contain;
}

#chiba-main .page-title{
    margin-bottom: 0;
}

#chiba-main .no-margin-section{
    font-size: 22px;
}

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

.partner-apply > a{
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 340px;
    height: 55px;

    font-size: 20px;
    font-weight: 400;
    border: 1px solid #AE9D82;
    background-color: #F7F5F2;
    color: #9B6D24;
}

.partner-apply > a > span > img{
    width: 24px;
    object-fit: contain;
}


/* opensource cms */

#cms-main .section-para{
    margin: 32px 0;
    width: auto;
}


#cms-main .shin-go-title{
    margin: 32px auto -20px auto;
    width: auto;
}

#cms-main .section-para a{
    color: #1558D6;
    text-decoration: underline;
    word-break: break-all;
}

.merit-demerit .table-grid{
    max-width: 1000px;
    margin: 32px auto 60px auto;

    display: flex;
    border: 1px solid #ababab;
}

.table-grid-sp{
    display: none;
}

.merit-demerit .table-col{
    flex: 2;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.merit-demerit .table-content{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;

    border-right: 1px solid #ababab;
    border-bottom: 1px solid #ababab;
    font-size: 13px;
    letter-spacing: 1;
    line-height: 1.5;
}

.merit-demerit .table-main{
    flex: 1;
    background-color: #FCF9F4;
    text-align: center;
    font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
}

.merit-demerit .table-main > .table-content{
    font-weight: 600;
    font-size: 14px;
}

.merit-demerit .table-head{
    font-weight: 600;
    background-color: #EBE6DF;
    font-size: 14px;
    justify-content: center;
    font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
}

.merit-demerit .table-main .table-content{
    justify-content: center;
}

.merit-demerit .table-col:nth-last-child(1) > .table-content{
    border-right: 0;
}

.merit-demerit .table-col > .table-content:nth-last-child(1){
    border-bottom: 0;
}

.pink-circle{
    color: #FF0044;
    margin-right: 5px;
}

.pink-content{
    background-color: #FFF0F0;
}

.drupal-service-list{
    max-width: 1000px;
    margin: 0 auto;

    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.powercms-page-link{
    width: 342px;
    height: 62px;
    margin: 0 auto;
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    background-color: #6128AB;
    transition: all 0.3s ease;
}

.powercms-page-link:hover{
    opacity: 0.85;
}


.checkbox{
    width: 100%;
    max-width: 1000px;
    margin: 32px auto;
    background-color: #EBE6DF;
}

.checkbox-content{
    padding: 1.5rem;
}

.checkbox-content > h3{
    color: #746753;
    font-size: 26px;
    margin-bottom: 1rem;
}

.check-list{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.check-list > li{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.check-icon{
    width: 20px;
    object-fit: contain;
}

.point-content{
    width: 100%;
    max-width: 1000px;
    margin: 32px auto;
}

.point-content .side-title{
    padding-bottom: 15px;
    border-bottom: 1px solid #818384;
    margin-bottom: 0;
}

.point-content ul{
    padding-top: 10px;
    margin-left: 20px;
}

/* ec cube */

.towa-container{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 60px auto;
    gap: 34px;
}

.towa-content{
    flex: 1 1 550px;
}

.towa-content > h3{
    font-size: 28px;
}

.towa-content > p > span,
.towa-img > p{
    font-size: 12px;
}

.towa-img{
    flex: 1 1 415px;
    padding: 2rem 1rem;
    border-radius: 10px;
    box-shadow: 4px 4px 13.6px 0 rgba(0,0,0,0.15);
    background-color: #ffffff;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.towa-container:nth-last-child(3) > .towa-img > img{
    height: 140px;
}

.towa-container:nth-last-child(1) > .towa-img > img{
    width: 300px;
    height: 75px;
}

.towa-img > img{
    height: 100px;
    max-width: 300px;
    object-fit: contain;
    margin: 0 auto;
    margin-bottom: 10px;
}

#ec-cube .towa-container .towa-img{
    padding: 2rem 1rem 5px 2rem;
}

#ciso-main .vertical-image-card .image-card-content{
    height: clamp(270px, 300px, 330px);
}

/* recruit */

.office-img{
    max-width: 1000px;
    margin: 32px auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.office-img div{
    display: flex;
    flex-direction: column;
}

.office-img div p{
    font-size: 12px;
}

.office-img div img{
    width: 100%;
    object-fit: contain;
}

.grid-img{
    max-width: 1000px;
    margin: 32px auto;
    object-fit: contain;
}

.apply-btn{
    width: 150px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dbdbdb;
    color: rgba(255, 255, 255, 0.464);
    font-size: 20px;
    font-weight: 500;
    margin: 0 auto;
    margin-top: 3rem;
    margin-bottom: 5rem;
    cursor: default;
}


/* fullscratch */

.agent-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
}

.agent-img-pc{
    max-width: 677px;
    margin: 0 auto;
    margin-bottom: 32px;
    object-fit: contain;
}

.agent-img-sp{
    display: none;
}

#fullscratch-main .horizontal-image-card:nth-last-child(1),
#ec-main .horizontal-image-card:nth-last-child(1),
#ciso-main .horizontal-image-card:nth-last-child(1){
    flex: 1 1 490px;
}

.fullscratch-card{
    flex: 1 1 490px;
    box-shadow: 4px 4px 13.6px 0 rgba(0,0,0,0.1);
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
}

.fullscratch-card .card-content{
    margin-top: 10px;
}

.card-number p{
    font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    padding-bottom: 15px;
}

.fullscratch-card > .yellow{
    border-bottom: 2px solid #F4A237;
    color: #F4A237;
}

.fullscratch-card > .red{
    border-bottom: 2px solid #E6312A;
    color: #E6312A;
}

.fullscratch-card > .blue{
    border-bottom: 2px solid #1E50A0;
    color: #1E50A0;
}

.fullscratch-card > .green{
    border-bottom: 2px solid #15903D;
    color: #15903D;
}

.fullscratch-card > .purple{
    border-bottom: 2px solid #96005F;
    color: #96005F;
}

.fullscratch-card > .black{
    border-bottom: 2px solid #2F2E41;
    color: #2F2E41;
}

.fullscratch-card > .brown{
    border-bottom: 2px solid #AE9D82;
    color: #AE9D82;
}

.scratch-flow-wrapper{
    min-width: 100%;
    max-width: 1000px;
    margin: 0 auto;

    background-image: url(/assets/images/fullscratch/gradient_line.svg);
    background-repeat: no-repeat;
    background-size: 995px;
    background-position: center;

    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    gap: 34px;
}

.scratch-card{
    width: 95px;
    height: 485px;

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    padding: 1rem 0;
    border-radius: 10px;
    background-color: white;
    box-shadow: 4px 4px 10px 1px hsla(0, 0%, 20%, 0.131);

    overflow: visible;
}

.number{
    width: 100%;
    color: #b7b7b7;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #b7b7b7;
}

.number p{
    font-size: 22px;
    margin-left: 1rem;
    font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
    font-weight: 600;
}

.scratch-card > h3{
    width: 2ch;
    line-height: 1.5;
    font-size: 18px;
    text-align: center;
}

.scratch-img{
    width: 80px;
    padding: 7px;
    object-fit: contain;
}

.five-tri-cards > .two-tri-cards{
    margin-bottom: 0;
    margin-top: 0;
    width: 100%;
}

.five-tri-cards > .two-tri-cards > .triangle-card{
    flex: 1 1 490px;
}

.three-tri-cards > .triangle-card,
.three-tri-cards > .fullscratch-card{
    flex: 1 1 320px;
}

.two-tri-cards .triangle-card,
.triangle-card{
    flex: 1 1 490px;
    position: relative;
    box-shadow: 4px 4px 13.6px 0 rgba(0,0,0,0.1);
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
}

.tri-shape{
    position: absolute;
    top: 0;
    right: 0;

    width: 60px;
    height: 60px;
}

.tri-shape > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-content > h3{
    font-size: 22px;
    line-height: 1.5;
    text-align: left;
}

.card-content p{
    line-height: 1.8;
}

.triangle-card > .card-content{
    margin: 40px 10px;
}

.strengths-wrapper{
    gap: 51px 20px;
}

.strength-card{
    flex: 1 1 490px;

    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.strength-icon{
    width: 100%;
    max-width: 95px;
}

.strength-icon > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* privacy policy page プライバシーポリシー　ページ */

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

.content-wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content-wrapper p b{
    font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
}

.content-wrapper > ul{
    list-style: none;
}

.content-wrapper ol,
.content-wrapper div > ol{
    margin-left: 3.2rem;
}

ol > li > ol,
ol > ol{
    margin-left: 2rem;
}

ol li a{
    word-break: break-all;
}

ol[type="1"] > ol{
    margin-left: 3rem;
}

ol[type="1"] {
  list-style: none;
  counter-reset: num;
  padding-left: 0;
  margin-left: 2rem;
  margin-top: -20px;
}

ol[type="1"] > li {
  counter-increment: num;
  position: relative;
  padding-left: 25px;
}

ol[type="1"] > li::before {
  content: counter(num, decimal) ") ";
  position: absolute;
  left: 0;
}

ol[type="a"] {
  list-style: none; /* remove default a. marker */
  counter-reset: alpha;
  padding-left: 0;
  margin-left: 0;
}

ol[type="a"] li {
  counter-increment: alpha;
  position: relative;
  padding-left: 25px;
}

ol[type="a"] li::before {
  content: counter(alpha, lower-alpha) ") ";
  position: absolute;
  left: 0;
}

.content-wrapper > ol ul{
    list-style: none;
    margin-left: 3.2rem;
}

ol > ol a{
    text-decoration: underline;
}

.signature-block{
    margin-left: auto;
    text-align: right;
    font-weight: 600;
}

.signature-block > br{
    display: none;
}

    .path-and-chameleon{
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        background-color: #ffffff;
        display: flex;
        margin-top: 130px;
    }

    .path-link-wrapper{
        width: 90%;
        max-width: 600px;

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

    .path-link{
        font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
        font-size: 14px;
        font-weight: 500;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 7px;
    }

    .path-link > li > a{
        text-decoration: underline;
    }

    .chameleon{
        position: sticky;
        bottom: 0;
        right: 0;
        z-index: 1;
    }

    .chameleon-gif{
        position: absolute;
        bottom: -15px;
        right: 0;
        display: flex;
    }

    .chameleon-gif > img{
        max-width: 330px;
        margin-left: auto;
        object-fit: contain;
    }



/* 特別のCSS */

@media (min-width: 1281px){
    .main-visual-content{
        padding-left: 91px;
    }
}

@media (min-width: 841px) and (max-width: 1112px){

    .service-box:nth-last-child(1){
        height: 380px;
        grid-template-rows: 170px 1fr 60px;
    }

    .fullscratch-card:nth-last-child(1),
    #cms-main .horizontal-image-card:nth-last-child(1),
    #server-main .horizontal-image-card:nth-last-child(1),
    #web-content-main .horizontal-image-card:nth-last-child(1){
        flex: 1 1 490px;
    }

    #usability-main .strength-card:nth-last-child(1),
    #web-content-main .strength-card:nth-last-child(1),
    #powercms-main .strength-card:nth-last-child(1){
        flex: 1 1 490px;
    }

    #ec-cube .vertical-image-card .image-card-content, 
    #shopify .vertical-image-card .image-card-content, 
    #ciso-main .vertical-image-card .image-card-content,
    .vertical-image-card .image-card-content{
        height: 100%;
    }

    .vertical-image-cards .image-card-content :nth-last-child(1){
        margin-top: auto;
    }

    #web-content-main .horizontal-image-card:nth-last-child(1){
        flex: 1 1 490px;
    }

    .horizontal-card-img{
        margin: auto 0 auto auto;
    }

    .path-link-wrapper{
        margin-left: 5%;
    }
}

@media (min-width: 841px) and (max-width: 1084px){
    #ciso-main > .service-wrapper > .divider-line:nth-last-child(2){
        display: none;
    }

    .office-img{
        width: 90%;
    }

    #powercms-main .section-para, .interview{
        width: 90%;
    }

    #powercms-main .strengths .section-para{
        width: 100%;
    }
}

@media (max-width: 1030px){
    .page-title-wrapper h2 br{
        display: none;
    }

    #chiba-main .page-title-wrapper h2 > br{
        display: block;
    }

    .office-img{
        width: 90%;
    }

    #powercms-main .section-para, .interview{
        width: 90%;
    }

    #powercms-main .strengths .section-para{
        width: 100%;
    }

    /* .two-tri-cards, .section-para{
        width: 90%;
    } */
}

@media (max-width: 980px){
    .scratch-flow-wrapper{
        min-width: 0;
        flex-direction: column;
        background-image: url(/assets/images/fullscratch/gradient_line_sp.svg);
        background-size: contain;
        background-position: center;
    }

    .scratch-card{
            width: 100%;
            height: auto;
            align-items: flex-start;
            padding: 0;
            padding-bottom: 10px;
        }

        .number p{
            font-size: 24px;
        }

        .number-three > br{
            display: none;
        }

        .scratch-card > h3{
            width: 100%;
            font-size: 20px;
            margin-top: 1rem;
        }

        .scratch-img{
            display: none;
        }

}

/* ipad 840px スタイル */
@media (min-width: 769px) and (max-width: 840px) {

    /* main visual sp */
    .pc-mv {
        display: none;
    }

    .sp-mv {
        display: block;
    }

    .main-visual{
        height: 238px;
        margin-top: 92px;
        background-position: bottom;
    }

    #web-marketing-main > .main-visual{
        background-image: url(/assets/images/web_marketing/webmarketing_sp_mv_content_bg.webp);
    }

    #web-design-main > .main-visual{
        background-image: url(/assets/images/web_design/webdesign_sp_mv_content_bg.webp);
    }

    #logo-design-main > .main-visual{
        background-image: url(/assets/images/logo_design/logo_sp_mv_content_bg.webp);
    }

    #server-main > .main-visual{
        background-image: url(/assets/images/server/server_sp_mv_content_bg.webp);
    }

    #web-content-main > .main-visual{
        background-image: url(/assets/images/web_content_management/web_content_sp_mv.webp);
    }

    #usability-main > .main-visual{
        background-image: url(/assets/images/usability/usability_sp_mv.webp);
    }

    #privacy-main > .main-visual{
        background-image: url(/assets/images/privacy/privacy_sp_mv.webp);
    }

    #fullscratch-main > .main-visual{
        background-image: url(/assets/images/fullscratch/fullscratch_sp_mv.webp);
    }

    #ciso-main > .main-visual{
        background-image: url(/assets/images/ciso/ciso_sp_mv_content_bg.webp);
    }

    #ec-main > .main-visual{
        background-image: url(/assets/images/opensource_ec/ecube_sp_mv_content_bg.webp);
    }

    #cms-main > .main-visual{
        background-image: url(/assets/images/opensource_cms/opencms_sp_mv_content_bg.webp);
    }

    #company-main > .main-visual{
        background-image: url(/assets/images/company_page/company_profile_sp_mv.webp);
    }

    #recruit-main > .main-visual{
        background-image: url(/assets/images/recruit/recruit_sp_mv.webp);
    }

    #powercms-main > .main-visual{
        background-image: url(/assets/images/powercms/powercms_sp_mv_content_bg.webp);
    }

    #chiba-main > .main-visual{
        background-image: url(/assets/images/chiba_shi/chiab_shi_sp_mv.webp);
    }

    #web-marketing-main > .main-visual > .main-visual-content,
    #web-design-main > .main-visual > .main-visual-content,
    #logo-design-main > .main-visual > .main-visual-content,
    #server-main > .main-visual > .main-visual-content,
    #web-content-main > .main-visual > .main-visual-content,
    #usability-main > .main-visual > .main-visual-content,
    #privacy-main > .main-visual > .main-visual-content,
    #fullscratch-main > .main-visual > .main-visual-content,
    #ciso-main > .main-visual > .main-visual-content,
    #ec-main > .main-visual > .main-visual-content,
    #cms-main > .main-visual > .main-visual-content,
    #company-main > .main-visual > .main-visual-content,
    #recruit-main > .main-visual > .main-visual-content,
    #powercms-main > .main-visual > .main-visual-content,
    #chiba-main > .main-visual > .main-visual-content{
        background-image: none;
    }

    .main-visual-content{
        margin-top: 43px;
        padding-top: 0;
        background-image: none;
        gap: 0;
    } 

    #powercms-main > .main-visual > .main-visual-content,
    #cms-main > .main-visual > .main-visual-content{
        margin-top: 65px;
    }

    #privacy-main > .main-visual > .main-visual-content{
        margin-top: 70px;
    }

    #chiba-main > .main-visual > .main-visual-content{
        margin-top: 57px;
        padding-top: 0;
    }

    #ciso-main > .main-visual > .main-visual-content,
    #privacy-main > .main-visual > .main-visual-content,
    #company-main > .main-visual > .main-visual-content,
    #recruit-main > .main-visual > .main-visual-content{
        padding-top: 0;
    }

    .main-title{
        width: 19ch;
        font-size: 40px;
        line-height: 1.4;
        margin: 1rem 0;
    }

    .main-title > br{
        display: block;
    }

    .obi-text h2{
        width: 40ch;
        margin: 0 auto;
        padding-left: 20px;
        font-size: 23px;
    }
    
    .bottom-line-title > p > br{
        display: none;
    }

    .triangle-card-wrapper > .triangle-card:nth-last-child(1), 
    .vertical-image-cards > .vertical-card:nth-last-child(1){
        flex: 1 1 320px;
    }

    .horizontal-image-card:nth-last-child(1), 
    .strength-card:nth-last-child(1){
        flex: 1 1 490px;
    }

    #server-main .horizontal-image-card:nth-last-child(1),
    #web-content-main .horizontal-image-card:nth-last-child(1){
        flex: 1 1 490px;
    }

    .horizontal-card-img{
        margin: auto 0 auto auto;
    }

    #usability-main .strength-card:nth-last-child(1),
    #web-content-main .strength-card:nth-last-child(1),
    #powercms-main .strength-card:nth-last-child(1){
        flex: 1 1 490px;
    }

    .path-and-chameleon{
        margin-top: 120px;
    }

    .path-link-wrapper{
        margin-left: 5%;
    }

    /* ciso sp */

    .shin-go-title{
        width: 90%;
        margin: 15px auto;
    }

    .jump-btn{
        height: 50px;
    }

    .service-wrapper{
        flex-direction: column;
        gap: 32px;
    }

    .service-box{
        flex: 1 1 225px;
        height: auto;
        grid-template-rows: 40px 1fr 50px;
    }

    .service-box h3{
        margin-bottom: auto;
        text-align: center;
    }

    #ec-cube .vertical-image-card .image-card-content, 
    #shopify .vertical-image-card .image-card-content, 
    #ciso-main .vertical-image-card .image-card-content {
        height: 100%;
    }

    .vertical-image-cards .image-card-content :nth-last-child(1){
        margin-top: auto;
    }

    .divider-line{
        height: 2px;
        width: 207px;
        margin: 0 auto;
    }

    .service-img{
        display: none;
    }

    .table-left{
        padding: 1rem;
    }
    
    .table-left p{
        font-size: 16px;
        line-height: 1.5;
    }

    .table-right{
        list-style: none;
        display: flex;
        flex-direction: column;
    }

    .table-right > li{
        height: 100%;
        font-size: 14px;
        line-height: 1.5;
        border-bottom: 1px solid #ABABAB;
        padding: 1rem;
        gap: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .point-content > .side-title{
        width: 100%;
        margin-left: 0;
        padding-bottom: 15px;
        border-bottom: 1px solid #818384;
        margin-bottom: 0;
    }

    /* 会社案内 sp */

    .signature-block{
        width: 90%;
        margin: 0 auto;
    }

    #company-main .signature-block{
        font-size: 20px;
    }

    .east-profile-logo{
        width: 85%;
        margin-bottom: 0;
    }

    .car-creative-profile-logo{
        width: 85%;
    }

    #company-main .table-right{
        flex: 3;
    }

    #company-main .table-content:nth-last-child(3) .table-right,
    #chiba-main .table-content:nth-last-child(3) .table-right{
        flex-direction: row;
    }

    #company-main .table-left,
    #recruit-main .table-left,
    #chiba-main .table-left{
        flex: 50px;
    }

    .table-left p > br{
        display: block;
    }

    .chiba-kun{
        width: 40px;
        margin-left: auto;
    }

    .chiba-kun-col > li:nth-last-child(1) {
        padding: 1rem 20px 1rem 0;
    }

    .office-img{
        width: 90%;
        margin: 0 auto;
        grid-template-columns: 1fr;
    }

    /* chiba shi 千葉市 SP */

    #chiba-main .page-title:nth-child(1) {
        background-image: none;
    }

    .chiba-kun-bg > img{
        display: none;
    }

    .partner-apply > a{
        width: 264px;
        height: 55px;
        margin: 0 auto;
    }

    /* opensource cms sp */

    #cms-main .section-para{
        margin: 32px auto;
    }

    #cms-main .table-grid{
        display: none;
    }

    #cms-main .table-grid-sp{
        display: block;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin: 2rem auto;
    }

    #cms-main .table-one, .table-two, .table-three{
        display: flex;
        border: 1px solid #ababab;
    }

    #cms-main .table-content{
        border-right: 0;
        padding: 10px;
        text-align: left;
    }

    #cms-main .table-grid-sp .table-col:nth-child(1){
        flex: 1;
        border-right: 1px solid #ababab;
    }

    #cms-main .table-grid-sp .table-col{
        flex: 2;
    }

    #cms-main .table-main > .table-content{
        font-size: 16px;
    }

    .merit-demerit .table-content{
        font-size: 15px;
    }

    #cms-main .horizontal-image-card:nth-last-child(1), .strength-card:nth-last-child(1) {
        flex: 1 1 490px;
    }

    /* .drupal-service-list{
        width: 90%;
        margin: 0 auto;
    } */

    /* usability css */
    #usability-main .image-card-content{
        height: 100%;
    }

    .image-card-content{
        height: 100%;
    }

    .vertical-image-cards .image-card-content img{
        margin-top: auto;
    }

    /* fullscratch sp */

    .agent-img-pc{
        display: none;
    }

    .number-three > br{
        display: none;
    }

    .agent-img-sp{
        width: 90%;
        margin: 0 auto;
        object-fit: contain;
    }
    
        .scratch-flow-wrapper{
            flex-direction: column;
            background-image: url(/assets/images/fullscratch/gradient_line_sp.svg);
            background-size: contain;
            background-position: center;
        }

        .scratch-card{
            width: 100%;
            height: auto;
            align-items: flex-start;
            padding: 0;
            padding-bottom: 10px;
        }

        .number p{
            font-size: 24px;
        }

        .scratch-card > h3{
            width: 100%;
            font-size: 20px;
            margin-top: 1rem;
        }

        .scratch-img{
            display: none;
        }

        .fullscratch-card:nth-last-child(1){
            flex: 1 1 490px;
        }

    /* privacy policy */

    .content-wrapper{
        width: 90%;
        margin: 0 auto;
    }

}

/* スマートフォン用のスタイル */
@media (max-width: 768px) {

    body {
        min-width: 0;
        line-height: 1.5;
    }

    section{
        width: 100%;
    }

    .main-visual{
        height: 238px;
        margin-top: 71px;
        background-position: bottom;
    }

    #web-marketing-main > .main-visual{
        background-image: url(/assets/images/web_marketing/webmarketing_sp_mv_content_bg.webp);
    }

    #web-design-main > .main-visual{
        background-image: url(/assets/images/web_design/webdesign_sp_mv_content_bg.webp);
    }

    #logo-design-main > .main-visual{
        background-image: url(/assets/images/logo_design/logo_sp_mv_content_bg.webp);
    }

    #web-content-main > .main-visual{
        background-image: url(/assets/images/web_content_management/web_content_sp_mv.webp);
    }

    #server-main > .main-visual{
        background-image: url(/assets/images/server/server_sp_mv_content_bg.webp);
    }

    #usability-main > .main-visual{
        background-image: url(/assets/images/usability/usability_sp_mv.webp);
    }

    #privacy-main > .main-visual{
        background-image: url(/assets/images/privacy/privacy_sp_mv.webp);
    }

    #fullscratch-main > .main-visual{
        background-image: url(/assets/images/fullscratch/fullscratch_sp_mv.webp);
    }

    #ciso-main > .main-visual{
        background-image: url(/assets/images/ciso/ciso_sp_mv_content_bg.webp);
    }

    #ec-main > .main-visual{
        background-image: url(/assets/images/opensource_ec/ecube_sp_mv_content_bg.webp);
    }

    #cms-main > .main-visual{
        background-image: url(/assets/images/opensource_cms/opencms_sp_mv_content_bg.webp);
    }

    #company-main > .main-visual{
        background-image: url(/assets/images/company_page/company_profile_sp_mv.webp);
    }

    #powercms-main > .main-visual{
        background-image: url(/assets/images/powercms/powercms_sp_mv_content_bg.webp);
    }

    #chiba-main > .main-visual{
        background-image: url(/assets/images/chiba_shi/chiab_shi_sp_mv.webp);
    }

    #recruit-main > .main-visual{
        background-image: url(/assets/images/recruit/recruit_sp_mv.webp);
    }

    #web-marketing-main > .main-visual > .main-visual-content,
    #web-design-main > .main-visual > .main-visual-content,
    #logo-design-main > .main-visual > .main-visual-content,
    #server-main > .main-visual > .main-visual-content,
    #web-content-main > .main-visual > .main-visual-content,
    #usability-main > .main-visual > .main-visual-content,
    #privacy-main > .main-visual > .main-visual-content,
    #fullscratch-main > .main-visual > .main-visual-content,
    #ciso-main > .main-visual > .main-visual-content,
    #ec-main > .main-visual > .main-visual-content,
    #cms-main > .main-visual > .main-visual-content,
    #company-main > .main-visual > .main-visual-content,
    #recruit-main > .main-visual > .main-visual-content,
    #powercms-main > .main-visual > .main-visual-content,
    #chiba-main > .main-visual > .main-visual-content{
        background-image: none;
        padding-top: 0;
    }

    .main-visual-content{
        margin-top: 43px;
        padding-top: 0;
        background-image: none;
        gap: 0;
    } 

    #privacy-main > .main-visual > .main-visual-content,
    #cms-main > .main-visual > .main-visual-content,
    #company-main > .main-visual > .main-visual-content,
    #recruit-main > .main-visual > .main-visual-content,
    #powercms-main > .main-visual > .main-visual-content{
        margin-top: 70px;
    }

    #chiba-main > .main-visual > .main-visual-content{
        margin-top: 57px;
    }

    .main-title{
        /* width: 19ch; */
        font-size: 30px;
        margin: 1rem 0;
        line-height: 1.4;
    }

    .main-title > br{
        display: block;
    }

    .page-title-wrapper, .section-para, .side-title, .number-cards,
    .vertical-image-cards, .horizontal-image-cards, .two-tri-cards, .three-tri-cards,
    .strengths-wrapper{
        width: 90%;
        margin: 0 auto;
    }

    .two-tri-cards{
        margin: 32px auto;
    }

    .side-title{
        font-size: 24px;
        margin-left: 5%;
        margin-top: 32px;
        margin-bottom: 20px;
    }

    .side-title > p{
        font-size: 24px;
    }

    .side-title-two{
        width: 312px;
        height: 44px;
        margin-left: 5%;
    }

    .side-title-two h3{
        font-size: 22px;
    }

    .triangle-card-wrapper > .triangle-card:nth-last-child(1), 
    .vertical-image-cards > .vertical-card:nth-last-child(1){
        flex: 1 1 320px;
    }

    #cms-main .horizontal-image-card:nth-last-child(1),
    .horizontal-image-card:nth-last-child(1), 
    .strength-card:nth-last-child(1),
    .fullscratch-card:nth-last-child(1),
    #server-main .horizontal-image-card:nth-last-child(1),
    #web-content-main .horizontal-image-card:nth-last-child(1){
        flex: 1 1 490px;
    }

    .page-title-wrapper > h2 > br{
        display: none;
    }

    .triangle-card > .card-content{
        margin: 20px 0;
    }

    .five-tri-cards > .two-tri-cards{
        width: 90%;
    }

    .vertical-image-card{
        flex: auto;
    }

    .image-card-content, .card-content{
        height: auto;
        line-height: 2;
        text-align: left;
    }

    .card-img, .horizontal-card-img{
        display: none;
    }

    .page-title{
        margin-top: 32px;
    }

    .ryumin-title{
        width: 90%;
        font-size: 24px;
        line-height: 41px;
    }

    .ryumin-title > br{
        display: none;
    }

    .bottom-line-title > p{
        font-size: 28px;
        line-height: 41px;
    }

    .bottom-line-title > p > br{
        display: none;
    }

    .page-title-wrapper{
        h2{
            font-size: 28px;
            line-height: 45px;
            margin-bottom: 22px;
        }

        p{
            font-size: 20px;
            line-height: 41px;
        }
    }

    .obi{
        padding: 18px 0;
        width: 100%;
        height: auto;
        max-width: 1000px;
        margin: 32px auto;

        display: flex;
        align-items: center;
        gap: 10px;
    }

    .obi-text{
        width: 100%;
    }

    .obi-text h2{
        margin: 0 auto;
        margin-right: auto;
        padding-left: 5%;
        font-size: 23px;
    }

    .obi-arrow-pc{
        display: none;
    }

    .obi-arrow-sp{
        display: block;
        height: 33px;
        object-fit: contain;
        padding-right: 10px;
    }

    .section-para{
        margin-bottom: 25px;
    }

    #powercms-main .strengths .section-para{
        width: 90%;
    }

    .strengths-wrapper{
        gap: 20px;
    }

    .strength-card{
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
    }

    .card-content{
        line-height: 1.5;
    }

    .strength-card > .card-content h3{
        margin-bottom: 5px;
        text-align: center;
    }

    #usability-main .strength-card:nth-last-child(1),
    #web-content-main .strength-card:nth-last-child(1),
    #powercms-main .strength-card:nth-last-child(1){
        flex: 1 1 490px;
    }

    .card-content > h3{
        font-size: 21px;
        padding: 7px 0;
    }

    .path-and-chameleon, .chameleon{
        display: none;
    }

    /* 会社案内 sp */

    .signature-block{
        width: 90%;
        margin: 0 auto;
    }

    #company-main .signature-block{
        font-size: 20px;
    }

    .signature-block > br{
        display: block;
    }

    .east-profile-logo{
        width: 85%;
        margin-bottom: 0;
    }

    .car-creative-profile-logo{
        width: 85%;
    }

    #company-main .table-left{
        flex: 1;
    }

    #company-main .table-right{
        flex: 3;
    }

    #company-main .table-content:nth-last-child(3) .table-right,
    #chiba-main .table-content:nth-last-child(3) .table-right{
        flex-direction: row;
    }

    #company-main .table-left,
    #recruit-main .table-left,
    #chiba-main .table-left{
        flex: 50px;
    }

    .table-left p > br{
        display: block;
    }

    .chiba-kun{
        width: 40px;
        margin: auto;
    }

    .chiba-kun-col > li:nth-last-child(1) {
        padding: 0 1rem 0 0;
        flex: 1;
    }

    .chiba-kun-col > li:nth-last-child(2){
        padding: 1rem;
        flex: 2;
    }
    
    .office-img{
        width: 90%;
        margin: 0 auto;
        grid-template-columns: 1fr;
    }

    /* chiba shi 千葉市 SP */

    #chiba-main .page-title:nth-child(1) {
        background-image: none;
    }

    #chiba-main .no-margin-section{
        font-size: 20px;
    }

    .chiba-kun-bg > img{
        display: none;
    }

    .partner-apply > a{
        width: 264px;
        height: 55px;
        margin: 0 auto;
    }

    /* ciso sp */

    .shin-go-title{
        width: 90%;
        margin: 15px auto;
        font-size: 21px;
    }

    .jump-btn{
        height: 50px;
    }

    #ec-cube .vertical-image-card .image-card-content, 
    #shopify .vertical-image-card .image-card-content, 
    #ciso-main .vertical-image-card .image-card-content {
        height: 100%;
    }

    .service-wrapper{
        flex-direction: column;
        gap: 32px;
    }

    .service-box{
        flex: 1 1 225px;
        height: auto;
        grid-template-rows: 40px 1fr 50px;
    }

    .service-box h3{
        margin-bottom: auto;
        text-align: center;
    }

    .service-box:nth-last-child(1) div:nth-child(1){
        margin-top: 0;
    }

    .divider-line{
        height: 2px;
        width: 207px;
        margin: 0 auto;
    }

    .service-img{
        display: none;
    }

    .table-wrapper{
        width: 90%;
        margin: 0 auto;
    }

    .table-left{
        padding: 1rem;
    }

    .table-left p{
        font-size: 16px;
        line-height: 1.5;
    }

    .table-right{
        list-style: none;
        display: flex;
        flex-direction: column;
    }

    .table-right > li{
        font-size: 14px;
        height: 100%;
        border-bottom: 1px solid #ABABAB;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
    }

    .point-content {
        width: 90%;
        margin: 0 auto;
    }

    .point-content > .side-title{
        width: 100%;
        margin-left: 0;
    }

    /* ec site sp */

    .towa-container{
        width: 90%;
        margin: 60px auto;
    }

    .towa-content > h3{
        font-size: 21px;
        line-height: 2;
    }

    .towa-img > img{
        max-width: auto;
    }

    .towa-img > p{
        font-size: 10px;
    }


    /* opensource cms sp */

    #cms-main .section-para{
        width: 90%;
        margin: 32px auto;
    }

    #cms-main .shin-go-title{
        width: 90%;
    }

    #cms-main .table-grid{
        display: none;
    }

    #cms-main .table-grid-sp{
        display: block;
        display: flex;
        flex-direction: column;
        gap: 2rem;

        width: 90%;
        margin: 2rem auto;
    }

    #cms-main .table-one, .table-two, .table-three{
        display: flex;
        border: 1px solid #ababab;
    }

    #cms-main .table-content{
        border-right: 0;
        padding: 10px;
        text-align: left;
    }

    #cms-main .table-grid-sp .table-col:nth-child(1){
        flex: 1;
        border-right: 1px solid #ababab;
    }

    #cms-main .table-grid-sp .table-col{
        flex: 2;
    }

    #cms-main .table-main > .table-content{
        font-size: 14px;
    }

    .merit-demerit .table-content{
        font-size: 13px;
    }

    .drupal-service-list{
        width: 90%;
        margin: 0 auto;
    }

    /* fullscratch */

    .agent-img-pc{
        display: none;
    }

    .number-three > br{
        display: none;
    }

    .agent-img-sp{
        display: block;
    }

    .agent-img-sp{
        width: 90%;
        margin: 0 auto;
        object-fit: contain;
    }
    
        .scratch-flow-wrapper{
            flex-direction: column;
            background-image: url(/assets/images/fullscratch/gradient_line_sp.svg);
            background-size: contain;
            background-position: center;
        }

        .scratch-card{
            width: 90%;
            height: auto;
            align-items: flex-start;
            padding: 0;
            padding-bottom: 10px;
        }

        .number p{
            font-size: 24px;
        }

        .scratch-card > h3{
            width: 100%;
            font-size: 20px;
            margin-top: 1rem;
        }

        .scratch-img{
            display: none;
        }

    /* privacy policy */

    .content-wrapper{
        width: 90%;
        margin: 0 auto;
    }


}