ul.pankuzu{ width: 100%;  max-width: 1150px; padding: 0 20px; box-sizing: border-box; margin: auto; list-style: none; display: flex; justify-content: flex-start; align-items: center; gap: 0 10px; margin-top: 10px;}
ul.pankuzu li,
ul.pankuzu li a{ font-size: 12px;}

/* main contents */
.main{ width: 100%;  max-width: 1150px; padding: 0 20px; box-sizing: border-box; margin: var(--margin);}
.main .wrap{ width: 100%;}
.main .wrap .title02{ width: 100%; max-width: 230px; position: relative; margin: auto;}
.main .wrap .title02 .bg{ position: relative; width: 100%;}
.main .wrap .title02 .text{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 68px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.main .wrap .title02 .text h2{ text-align: center; line-height: 1; font-size: 14px; font-family: var(--font__Outfit); font-weight: 600; width: 100%; display: block;}
.main .wrap .title02 .text h3{ text-align: center; line-height: 1; font-size: 28px; font-weight: bold; width: 100%; display: block;}
.main .wrap .title02 .text h3.Outfit{ line-height: 1.4;}

.main .wrap.column{ display: flex; justify-content: space-between; align-items: stretch; margin: var(--margin);}
.main .wrap.column .left{ width: 100%; max-width: 240px; padding-right: 40px; box-sizing: border-box; position: relative;}
.main .wrap.column .left .sticky{ transition: .3s ease-in-out; position: sticky; top: 100px;}
.main .wrap.column .left .sticky > p{ font-size: 12px; font-weight: bold; font-family: var(--font__NotoSans); font-family: var(--font__Outfit);}
.main .wrap.column .left .sticky > ul{ width: 100%; list-style: none;}
.main .wrap.column .left .sticky > ul li{ width: 100%;}
.main .wrap.column .left .sticky > ul li a{ display: block; width: 100%; padding: 5px 10px 5px 20px; box-sizing: border-box; position: relative; font-size: 18px;}
.main .wrap.column .left .sticky > ul li a::before{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; width: 6px; height: 18px; background-color: var(--color__yellow);}
.main .wrap.column .left .sticky > ul li a:hover::before{ background-color: var(--color__black);}
.main .wrap.column .right{ width: calc(100% - 200px - 40px);}
.main .wrap.column .right article{ width: 100%;}
.main .wrap.column .right article:nth-child(n+2){ margin: var(--margin);}
.main .wrap.column .right article .title03{ width: 100%; border-bottom: 1px solid var(--color__black); padding: 0 20px 20px; box-sizing: border-box; position: relative;}
.main .wrap.column .right article .title03::after{ content: ""; position: absolute; width: 26px; height: 5px; background-color: var(--color__yellow); bottom: -3px; left: 0; margin: auto;}
.main .wrap.column .right article .title03 h4{ line-height: 1; font-size: 28px; font-weight: bold;}

/* company_profile */
.company_profile table.profile{ width: 100%;}
.company_profile table.profile th,
.company_profile table.profile td{ background-color: var(--color__gray); border-collapse: collapse; padding: 10px 20px; box-sizing: border-box; font-size: 14px; font-weight: normal;}
.company_profile table.profile th{ width: 210px; border-right: 5px solid var(--color__white); border-bottom: 10px solid var(--color__white);}
.company_profile table.profile td{ border-bottom: 10px solid var(--color__white);}
.company_profile table.profile tr:last-child th,
.company_profile table.profile tr:last-child td{ border-bottom: 0px none;}

.company_profile .txt{ width: 100%;}
.company_profile .txt > *{ margin-top: 30px;}
.company_profile .txt .company_profile_item01{ width: 100%; max-width: 680px; display: block; margin-left: auto; margin-right: auto;}
.company_profile .txt p{ font-size: 14px;}

.company_profile table.history{ width: 100%;}
.company_profile table.history th,
.company_profile table.history td{ background-color: var(--color__gray); border-collapse: collapse; padding: 10px 20px; box-sizing: border-box; font-size: 14px; font-weight: normal;}
.company_profile table.history th{ width: 150px; border-right: 5px solid var(--color__white); border-bottom: 10px solid var(--color__white);}
.company_profile table.history td{ border-bottom: 10px solid var(--color__white);}
.company_profile table.history tr:last-child th,
.company_profile table.history tr:last-child td{ border-bottom: 0px none;}

/* track_record */
.track_record .main{ margin-bottom: 90px;}
.track_record .s_04 .accordion_one .accordion_header{ padding: 5px 10px 5px 20px; box-sizing: border-box; text-align: left; font-size: 18px;}
.track_record .s_04 .accordion_one .accordion_header::before{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; width: 6px; height: 18px; background-color: var(--color__yellow);}
.track_record .s_04 .accordion_one .accordion_header.open.stay::before{ background-color: var(--color__yellow);}
.track_record .s_04 .accordion_one .accordion_header.stay::before,
.track_record .s_04 .accordion_one .accordion_header.open::before,
.track_record .s_04 .accordion_one .accordion_header:hover::before{ background-color: var(--color__black);}
.track_record .s_04 .accordion_one .accordion_header .i_box .one_i:before,
.track_record .s_04 .accordion_one .accordion_header .i_box .one_i:after{ background-color: var(--color__yellow);}
.track_record .s_04 .accordion_one .accordion_header .i_box .one_i:after{ width: 8px; height: 2px; left: 4px;}
.track_record .s_04 .accordion_one .accordion_header .i_box .one_i:before{ width: 2px; height: 8px; top: 4px;}
.track_record .s_04 .accordion_one .accordion_inner .box_one{ padding: 0;}
.track_record .s_04 .accordion_one .accordion_inner .box_one .list{ list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 2px;}
.track_record .s_04 .accordion_one .accordion_inner .box_one .list::after{ content: ""; display: block; width: 32%;}
.track_record .s_04 .accordion_one .accordion_inner .box_one .list li{ width: 32%;}
.track_record .s_04 .accordion_one .accordion_inner .box_one .list li a{ display: flex; justify-content: center; align-items: center; width: 100%; border: 1px solid var(--color__yellow); box-sizing: border-box; font-family: var(--font__Outfit); font-size: 12px;}
.track_record .s_04 .accordion_one .accordion_inner .box_one .list li a:hover{ border: 1px solid var(--color__black); background-color: var(--color__black); color: var(--color__yellow);}
.track_record .main .wrap.column .right article:nth-child(2){ margin-top: 30px;}
.track_record article.txt p{ font-size: 14px;}
.track_record .archive_txt{ font-size: 30px; color: var(--color__yellow); font-weight: bold; font-family: var(--font__Outfit);}
.track_record .products{ width: 100%;}
.track_record .products:nth-of-type(n+2){ margin-top: 90px;}
.track_record .products h4{ display: block; width: 100%; padding: 10px 20px; box-sizing: border-box; background-color: var(--color__gray); font-size: 18px; line-height: 1.4; color: var(--color__black); font-weight: bold;}
.track_record .products > div{ width: 100%; padding: 30px 20px 0; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start;}
.track_record .products > div .photo{ width: 100%; max-width: 320px; aspect-ratio: 1 / 1; background-color: var(--color__gray); overflow: hidden; display: flex; justify-content: center; align-items: center;}
.track_record .products > div .photo img{ width: calc(100% - 40px); height: calc(100% - 40px); object-fit: contain; display: block;}
.track_record .products > div .txt{ width: calc(100% - 320px - 20px)}
.track_record .products > div .txt table{ width: 100%; margin-bottom: 10px;}
.track_record .products > div .txt table th,
.track_record .products > div .txt table td{ border-collapse: collapse; padding: 5px 10px; box-sizing: border-box; font-size: 14px;}
.track_record .products > div .txt table th{ width: 150px; font-weight: bold; border-bottom: 10px solid var(--color__white); background-color: var(--color__gray);}
.track_record .products > div .txt table td{ border-bottom: 10px solid var(--color__white);}
.track_record .products > div .txt table tr:last-child th,
.track_record .products > div .txt table tr:last-child td{ border-bottom: 0px none;}
.track_record .products > div .txt .copy_txt{ font-size: 10px;}
.track_record .products > div .txt .link_btn02{ margin-top: 30px;}

/* office_view */
.office_view .txt{ width: 100%; margin-bottom: 90px;}
.office_view .txt > *{ margin-top: 30px;}
.office_view .txt p{ font-size: 14px;}
.office_view .txt p .office_view_item01{ width: 100%; max-width: 310px; display: block; float: left; margin-right: 20px;}
.office_view .txt p .office_view_item02{ width: 100%; max-width: 310px; display: block; float: right; margin-left: 20px;}
.office_view .txt p .office_view_item05{ width: 100%; max-width: 310px; display: block; float: right; margin-left: 20px;}
.office_view .photo{ width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0 20px;}
.office_view .photo > *{ margin-top: 30px;}
.office_view .photo .office_view_item03{ width: calc(100% / 2 - 10px);}
.office_view .photo .office_view_item04{ width: calc(100% / 2 - 10px);}

/* recruit */
.recruit .main{ margin-bottom: 90px;}
.recruit article.txt p{ font-size: 14px;}
.recruit .main .wrap.column .right article:nth-child(2){ margin-top: 30px;}
.recruit .title_txt{ font-size: 30px; color: var(--color__black); font-weight: bold;}
.recruit .Industry{ width: 100%;}
.recruit .Industry .catch{ width: 100%; height: 236px; background-size: cover; background-position: center; display: flex; justify-content: flex-start; align-items: center; padding: 40px; box-sizing: border-box;}
.recruit .Industry .catch p{ font-size: 20px; color: var(--color__white); font-weight: bold;}
.recruit #programmer .Industry .catch{ background-image: url(../images/recruit_item01.jpg);}
.recruit #designer .Industry .catch{ background-image: url(../images/recruit_item02.jpg);}
.recruit #planner .Industry .catch{ background-image: url(../images/recruit_item03.jpg);}
.recruit .Industry .txt{ width: 100%; margin-top: 30px;}
.recruit .Industry > .txt table{ width: 100%; margin-bottom: 10px;}
.recruit .Industry > .txt table th,
.recruit .Industry > .txt table td{ border-collapse: collapse; padding: 5px 10px; box-sizing: border-box; font-size: 14px;}
.recruit .Industry > .txt table th{ width: 150px; font-weight: bold; border-bottom: 10px solid var(--color__white); background-color: var(--color__gray);}
.recruit .Industry > .txt table td{ border-bottom: 10px solid var(--color__white);}
.recruit .Industry > .txt table tr:last-child th,
.recruit .Industry > .txt table tr:last-child td{ border-bottom: 0px none;}
.recruit .Industry > .txt table td ul{ width: 100%; list-style: none; list-style-position: inside;}
.recruit .Industry > .txt table td ul li{ background-image: url(../images/icon04.jpg); background-size: 12px; background-repeat: no-repeat; background-position: left top 10px; padding-left: 20px; box-sizing: border-box; font-size: 14px;}
.recruit article .txt{ width: 100%; margin-top: 30px;}
.recruit #terms table{ width: 100%;}
.recruit #terms table th,
.recruit #terms table td{ background-color: var(--color__gray); border-collapse: collapse; padding: 10px 20px; box-sizing: border-box; font-size: 16px; font-weight: normal;}
.recruit #terms table th{ width: 210px; border-right: 5px solid var(--color__white); border-bottom: 10px solid var(--color__white);}
.recruit #terms table td{ border-bottom: 10px solid var(--color__white);}
.recruit #terms table tr:last-child th,
.recruit #terms table tr:last-child td{ border-bottom: 0px none;}
.recruit article .txt .recruit_item04{ width: 100%; max-width: 856px; display: block; margin: auto;}
.recruit article .txt .recruit_item04.forSP{ display: none;}
.recruit article .txt > div{ margin-top: 20px;}
.recruit article .txt > div h5{ font-size: 16px; font-weight: bold;}
.recruit article .txt > div h5 span{ font-size: 30px; font-family: var(--font__Outfit); margin-right: 10px;}
.recruit article .txt > div p{ font-size: 14px;}
.recruit article .txt > div p b{ font-weight: bold; color: var(--color__red);}

.recruit #apply .txt{ width: 100%; margin-top: 30px;}
.recruit #apply .txt p{ font-size: 14px;}
.recruit #apply .txt > div{ background-color: var(--color__gray); padding: 20px; box-sizing: border-box; margin-bottom: 30px;}
.recruit #apply .txt > div ul{ width: 100%; list-style: none; list-style-position: inside;}
.recruit #apply .txt > div ul li{ background-image: url(../images/icon04.jpg); background-size: 12px; background-repeat: no-repeat; background-position: left top 10px; padding-left: 20px; box-sizing: border-box; font-size: 14px;}
.recruit #apply .txt p .recruit_item05{ max-width: 226px; vertical-align: bottom;}
.recruit #apply .txt p a:hover{ opacity: .4}