/* 開発手法専用スタイル */

/* 開発メインビジュアル */
.dev_main_img {
/*    background: linear-gradient(135deg, #38bbed 0%, #05abe0 50%);*/
	background: url(../../img/sub_page_title_bk.svg) repeat-x center bottom;
    color: white;
    text-align: center;
    padding: 15vw 0 100px;
}

.dev_main_img_title {
	width: min(94%, 1180px);
	margin: 0 auto 2rem;
	font-size: 3.5rem;
	font-weight: 700;
	letter-spacing: 0.1em;
    font-family: 'DotGothic16';
}

.dev_main_img_subtitle {
	width: min(94%, 1180px);
	margin: 0 auto;
    font-size: 1.3rem;
	font-weight: 700;
    line-height: 1.8;
}







/* 共通 */
.dev_main .title {
	margin-bottom: 2.5rem;
	text-align: center;
	font-weight: 700;
	font-size: 2.8rem;
	letter-spacing: 0.08em;
	z-index: 1;
}
.dev_main .service_top_txt {
	margin: 0 0 60px;
	color: #666;
	text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.9;
}
#dev_about,
#dev_process,
#dev_agile_detail,
#dev_benefits,
#dev_bug_management,
#dev_cases,
#dev_tools,
#dev_environment {
	width: min(94%, 1180px);
	margin: 0 auto;
	padding: min(10vw, 100px) 0;
}
.dev_sec {
    width: min(94%, 1180px);
	margin: 0 auto;
}
#dev_intro {
/*    width: min(94%, 1180px);
	margin: 0 auto;
    */
}



/* イントロ */
#dev_intro {
    margin-top: max(-15vw,-100px);
    padding: min(20vw, 200px) 0;
    background: url(../img/development/intro_bk02.png) no-repeat center center;
    background-size: cover;
    z-index: -10;
    position: relative;
}
.dev_intro_inner {
    width: min(94%, 1180px);
	margin: 0 auto;
}
.dev_intro_title {
    margin-bottom: 60px;
    font-size: 2.8rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
}

.dev_risk_title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: fit-content;
    margin: 40px auto 20px;
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
}
.dev_risk_title::before,
.dev_risk_title::after {
    display: block;
    content: '';
    width: 1em;
    height: 1em;
    background: url(../img/development/icon_chui.svg) no-repeat center center;
    background-size: contain;
}
.dev_risk_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}
.dev_rist_box {
    padding: 40px;
    position: relative;
}
.dev_rist_box::after {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background: repeating-linear-gradient(45deg,
		#333 0, #333 10px,
		#f4d923 0, #f4d923 20px,
		#333 0, #333 30px,
		#f4d923 0, #f4d923 40px);
    border-radius: 14px;
}
.dev_rist_box::before {
	position: absolute;
	z-index: 2;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	content: '';
	border-radius: 12px;
	background-color: #ffffff;
}
.dev_rist_box_inner {
    z-index: 10;
    position: relative;
}

.dev_rist_box h4 {
    margin: 0 0 1rem;
    color: #d31c12;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}
.dev_rist_box p {
    font-weight: 500;
    font-size: 16px;
}


/* 開発概要セクション */
#dev_about {
}
.dev_about_mvp {
    text-align: center;
}
.dev_about_mvp_en {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
}
.dev_about_mvp_en span {
    color: #d31c12;
}
.dev_about_mvp_jp {
    margin-bottom: 40px;
    font-size: 1.4rem;
    font-weight: 500;
}

.dev_about_mvp_img {
    margin-bottom: 40px;
    text-align: center;
}
.dev_about_mvp_img img {
    max-width: 100%;
}

.dev_mvp_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.dev_mvp_box {
    background: white;
    border-radius: 15px;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.dev_mvp_box h4 {
    margin-bottom: 20px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #38bbed;
    text-align: center;
}

/* 損失 */
.dev_mvp_sonshitsu {
    margin: 40px 0 ;
}
.dev_mvp_sonshitsu h4 {
    margin-bottom: 2.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 2.8rem;
    letter-spacing: 0.08em;
}
.dev_mvp_sonshitsu_img {
    text-align: center;
}
.dev_mvp_sonshitsu_fusegu {
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.08em;
}


.dev_mvp_sonshitsu_fusegu {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 800px;
    margin: 20px auto 0;
    padding: .8em 1.2em;
    border: 3px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
}

.dev_mvp_sonshitsu_fusegu::before,
.dev_mvp_sonshitsu_fusegu::after {
    position: absolute;
    top: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
}

.dev_mvp_sonshitsu_fusegu::before {
    background-color: #2589d0;
}

.dev_mvp_sonshitsu_fusegu::after {
    top: -11px;
    background-color: #fff;
}

/* チケット駆動開発 */
#dev_ticket {
/*	width: min(94%, 1180px);
	margin: 0 auto;*/
	padding: min(10vw, 100px) 0;
    background: #f4f5f6;
}

.dev_ticket_img {
    text-align: center;
    margin: 0 0 40px;
}

.dev_ticket_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.dev_ticket_box {
    /*
    background: white;
    border-radius: 15px;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    */

    position: relative;

    z-index: 1;
}
.dev_ticket_box::before {
    position: absolute;
    bottom: -5px;
    right: 7px;
    z-index: -1;
    transform: rotate(5deg);
    width: 70%;
    height: 50%;
    background: rgba(0, 0, 0, 0.15);
    content: '';
    filter: blur(4px);
}
.dev_ticket_box_inner {
    height: 100%;
    padding: 2rem 2.5rem 2.5rem;
    background: #f8e87b;
    border-top: 10px solid #f4d923;
}

.dev_ticket_box h4 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
}
.dev_ticket_box p {
    font-size: 1.2rem;
}
.dec_ticket_no {
    margin: 60px 0 40px;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
}
.dec_ticket_no .en {
    font-family: "Roboto Condensed", sans-serif;
}
.dec_ticket_no .ja {
    font-size: 2rem;
}


/* X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
}
/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
}





/* アイデアが形になるまで */
#dev_idea {
	width: min(94%, 1180px);
	margin: 0 auto;
	padding: min(10vw, 100px) 0;
}

.dev_idea_list {
/*    display: flex;
    gap: 1rem;*/

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem 1rem;
}

.dev_idea_list li {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.dev_idea_no {
    position: relative;
    display: inline-grid;
    place-content: center;
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 auto -1rem;
    color: #fff;
    font-size: 1rem;
/*    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;*/
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
    z-index: 3;
    background: #38bbed;
    box-shadow: 2px 0 #089bd3, -2px 0 #089bd3, 0 2px #089bd3, 0 -2px #089bd3;
/*    border-radius: 50%;*/
}


.dev_idea_list_box {
    background: #fff;
/*    border-radius: 15px;*/
    padding: 2rem 1.5rem 1.5rem;
/*    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);*/
    box-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000;
    flex: 1;
}
.dev_idea_list li h4 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #38bbed;
    text-align: center;
    flex: 1;
}


/* X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
}
/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
}



/* 開発実績 */
#dev_results {
    padding: min(10vw, 100px) 0;
    background: #f4f5f6;
}

.dev_results_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 40px 0;
    padding: 2.5rem;
    background: #fff;
/*    border-radius: 15px;*/
    box-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000;
}
.dev_results_detail {
    width: 55%;
}
.dev_results_img {
    width: 45%;
    max-width: 500px;
}

.dev_results_box h4 {
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 2rem;
}
.dev_results_img_sp {
    display: none;
}

.dev_results_txt {
    font-size: 1.4rem;
    font-weight: 500;
}
.dev_results_features {
    margin: 2rem 0;
}
.dev_results_features li {
    display: flex;
    gap: 0.5em;
    margin-bottom: 0.5rem;
    position: relative;
    font-size: 1.4rem;
    font-weight: 500;
}
.dev_results_features li::before {
    content: '';
    display: block;
    width: 1em;
    background: url(../img/development/icon_check.svg) no-repeat center center;
    background-size: contain;
}


.genre_list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
.genre_list span {
    background: #ccc;
    padding: 0.2em 1em;
    border-radius: 1em;
    color: #fff;
}
.genre_list span.icon_linux {
    background: #ffa600;
}
.genre_list span.icon_php {
    background: #4F5B93;
}
.genre_list span.icon_postgres {
    background: #336791;
}
.genre_list span.icon_cake {
    background: #D33C44;
}
.genre_list span.icon_ssl {
    background: #003a70
}
.genre_list span.icon_cloud {
    background: #38bbed;
}
.genre_list span.icon_ai {
    background: #7c1aa1;
}
.genre_list span.icon_api {
    background: #65d31d;
}

/* X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
}
/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    .dev_results_box {
        flex-direction: column;
    }
    .dev_results_detail {
        width: 100%;
    }
    .dev_results_img {
        display: none;
    }
    .dev_results_img_sp {
        display: block;
        width: 100%;
        max-width: 500px;
        margin: 2rem auto;
    }
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
}





/* FAQ */
#dev_faq {
    padding: min(10vw, 100px) 0;
}

.faq_box {
    width: 100%;
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 4px 0 #000, -4px 0 #000, 0 4px #000, 0 -4px #000;
}

.faq_box .faq_q {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding: 1.5rem 2rem;
    font-size: 1.6rem;
    font-weight: 500;
    cursor: pointer;
}
.faq_box .faq_q::-webkit-details-marker {
    display: none;
}
.faq_box .faq_q h4 {
    flex:1;
}
.faq_box .faq_q::before {
    flex-shrink: 0;
    flex-grow: 0;
    content: 'Q';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    background: #38bbed;
    box-shadow: 4px 0 #089bd3, -4px 0 #089bd3, 0 4px #089bd3, 0 -4px #089bd3;
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-size: 1.4rem;
    color: #fff;
/*    border-radius: 50%;*/
    text-align: center;
    letter-spacing: 0;
}
.faq_box .faq_q::after {
    transform: translateY(-25%) rotate(45deg);
    width: 1rem;
    height: 1rem;
    border-bottom: 3px solid #38bbed;
    border-right: 3px solid #38bbed;
    content: '';
    transition: transform .3s;
    flex-shrink: 0;
    flex-grow: 0;
}

.faq_box[open] .faq_q::after {
    transform: rotate(225deg);
}

.faq_box .faq_a {
    position: relative;
    display: flex;
    gap: 1rem;
    position: relative;
    padding: 1rem 2rem 2rem;
    font-size: 1.4rem;
    line-height: 1.6;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    transition: transform .5s, opacity .5s;
}

.faq_box[open] .faq_a {
    transform: none;
    opacity: 1;
}

.faq_box .faq_a::before {
    content: 'A';
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: #fa2f89;
    box-shadow: 4px 0 #e00767, -4px 0 #e00767, 0 4px #e00767, 0 -4px #e00767;
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-size: 1.4rem;
    color: #fff;
    text-align: center;
    letter-spacing: 0;
}



/* X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
}
/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
}


/* RPG風テキスト共通 */
.rpg_txt {
    width: fit-content;
    margin: 3rem auto;
    padding: 8px;
    background: #fff;
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000;
    font-family: 'DotGothic16';
    font-size: 1.4rem;
}
.rpg_txt_inner {
    padding: 1.5rem;
    background: #000;
    color: #fff;
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000;
}


/* CTA */
#dev_cta { 
    padding: min(10vw, 100px) 0;
    background: url(../img/development/cta_bk.png) no-repeat center top;
    background-size: cover;
}
.dev_cta_explanation {
    width: fit-content;
    margin: 0 auto 40px;
}
.dev_cta_txt {
    width: fit-content;
    margin: 0 auto;
    padding: 8px;
    background: #fff;
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000;
    font-family: 'DotGothic16';
    font-size: 1.4rem;
}
.dev_cta_txt_inner {
    padding: 1.5rem 1.5rem 2rem;
    background: #000;
    color: #fff;
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000;
}

.dev_cta_choose {
    width: fit-content;
    margin: -1rem 20px 0 auto;
    padding: 8px;
    background: #fff;
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000;
    font-family: 'DotGothic16';
    font-size: 1.4rem;
}
.dev_cta_choose_inner {
    padding: 0.75rem 0.5rem 0.75rem 2rem;
    background: #000;
    color: #fff;
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000;
}
.dev_cta_choose_txt {
    position: relative;
}
.dev_cta_choose_txt.yes::before {
    position: absolute;
    top: 0.45rem;
    left: -20px;
    content: "";
    width: 2px;
    height: 2px;
    box-shadow: 2px 2px, 4px 2px, 2px 4px, 4px 4px, 6px 4px, 8px 4px, 2px 6px, 4px 6px, 6px 6px, 8px 6px, 10px 6px, 2px 8px, 4px 8px, 6px 8px, 8px 8px, 10px 8px, 12px 8px, 2px 10px, 4px 10px, 6px 10px, 8px 10px, 10px 10px, 2px 12px, 4px 12px, 6px 12px, 8px 12px, 2px 14px, 4px 14px;
    color: rgb(255, 255, 255);
}
/* ボタン */
.dev_cta_btn_area {
    display: flex;
    justify-content: center;
    gap: 4%;
    max-width: 1080px;
    margin: 0 auto;
}

.btn_cta_box {
    width: 48%;
    max-width: 400px;
}
.cta_balloon {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 18em;
    margin: 0 auto -0.7em;
    padding: .5em 1.2em;
    border: 3px solid #000000;
    border-radius: 0;
    background-color: #fff;
    color: #333333;
    font-family: 'DotGothic16';
}
.cta_balloon::before,
.cta_balloon::after {
    position: absolute;
    bottom: -10px;
    width: 20px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.cta_balloon::before {
    background-color: #000000;
}

.cta_balloon::after {
    bottom: -6px;
    background-color: #fff;
}

a.btn_cta {
    display: block;
    width: 100%;
    padding: 2rem 1rem;
    font-size: 1.6rem;
    font-family: 'DotGothic16';
    font-weight: bold;
    color: #000;
    letter-spacing: 0.1em;
    text-align: center;
    transition: all 0s;
}
.btn_cta_form {
    background: #38bbed;
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000,
    inset -4px 0 #2a8cb2,
    inset 0 -4px #2a8cb2;
}
a.btn_cta_tel {
    background: #f4d923;
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000,
    inset -4px 0 #b7a31a,
    inset 0 -4px #b7a31a;
}
.btn_cta_form:hover {
    background: #38bbed;
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000,
    inset -8px 0 #2a8cb2,
    inset 0 -8px #2a8cb2;
}
.btn_cta_form:active {
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000,
    inset 8px 0 #2a8cb2,
    inset 0 8px #2a8cb2;
}
.btn_cta_tel:hover {
    background: #f4d923;
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000,
    inset -8px 0 #b7a31a,
    inset 0 -8px #b7a31a;
}
.btn_cta_tel:active {
    box-shadow: 4px 0 #000,
    -4px 0 #000,
    0 4px #000,
    0 -4px #000,
    inset 8px 0 #b7a31a,
    inset 0 8px #b7a31a;
}

/* X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
}
/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
}