/*
Theme Name: ninesense
Template: arkhe
*/

/* ----------
  COMMON
-------------- */

body { background-size: 100%; color: #041664; font-size: 90%;}
header .container {width: 80%;}

.l-content__body { margin: 0rem auto !important;}
.l-main { margin-bottom: 70px;}
.grecaptcha-badge {  visibility: hidden; }


/* ----------
  下層用
-------------- */
.p-topArea.-noimg {
    background: url(img/bg_sec_title.png) no-repeat 0 100%;
    background-size: cover;
}

.p-topArea { min-height: 17vh;}
.p-breadcrumb { margin: 0 auto 40px;}


/* ----------
  Animation
-------------- */

.fade-up {
    opacity: 0;
    transform: translateY(30px); /* 30px下に下げておく */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* スクロールしてクラスがついた時の状態 */
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ----------
  Main タイルBG
-------------- */

.bg_tilepattern {
    background: #dfdfdf url(img/bg_main_tilepattern.png) repeat;
    margin: 0 calc(50% - 50vw);
}


/* ----------
  Title Style
-------------- */

/* グラデタイトル */
.title_grad {
    letter-spacing: 0.03em !important;
    line-height: 1.2;
    font-size: 100%;
    color: #041664;
    letter-spacing: 0.3em !important;
}

.title_grad span {
    text-align: center !important;
    font-size: 300% !important;
    font-family: Futura, 'Century Gothic', sans-serif;
    font-weight: normal !important;
    margin: 0 0 10px 0 !important;
    background: linear-gradient(90deg, rgb(121 4 160) 42%, rgba(22, 131, 169, 1) 66%) !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: block;
    letter-spacing: 0em !important;
}



/* ----------------------------------
  TOPページ
------------------------------------- */
#key {
    background: #051666;
    margin: 0 calc(50% - 50vw);
}

#key_copy {
    background: url(img/bg_key_line.png), url(img/bg_key.png);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: cover;
    position: relative;
    z-index: 10;
    padding: 250px 0;
}

#key_copy img {
    display: block;
    margin: 0 auto;
}

#key_read {
    background: url(img/bg_topread.jpg) no-repeat 0 72%;
    padding: 135px 0 63px;
    background-size: cover;
    min-height: 640px;
}

#key_read img {
    display: block;
    margin: 0 auto;
}

#key_read p {
    margin: 60px auto 20px;
    color: #fff;
    width: 500px;
    text-align: center;
    line-height: 2.3;
    letter-spacing: 0.1em;
}


/* ----------------------------------
  philosophy
------------------------------------- */
#philosophy {
    position: relative;
    padding: 170px 0 0;
    background-repeat: no-repeat;
}

#philosophy h2 {
    position: absolute;
    top: -40px;
    left: 13%;
}

#philosophy h2 img { max-width: 75vw;}

#philosophy div {
    display: flex;
    width: 80vw;
    margin: 0 auto 50px;
}

#philosophy div img { width: 35vw; margin-left: 100px;}

#philosophy h3 { margin-bottom: 40px;}
#philosophy h3 span.jp_txt {
    font-size: 130%;
    margin-bottom: 10px;
    background: linear-gradient(90deg, rgb(97, 15, 124) 15%, rgb(11, 89, 145) 60%, rgba(22, 131, 169, 1) 100%) !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    line-height: 1.4;
    display: block;
}

#philosophy h3 span.en_txt {
    font-size: 80% !important;
    font-family: Futura, 'Century Gothic', sans-serif;
    font-weight: normal;
    margin: 0 0 10px 0;
    display: block;
    letter-spacing: 0.2em;
    color: #fff;
    background:linear-gradient(90deg, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 1) 66%) !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

#philosophy article p { line-height: 1.8; margin-bottom: 20px;}



/* ----------------------------------
  The 9 Senses Matrix
------------------------------------- */

#the_9senses_matrix {
    background: url(img/bg_9sense_matrix.png), linear-gradient(to bottom, transparent 520px, rgba(236, 236, 236, 1) 520px);
    background-position: 55% 10%;
    position: relative;
    padding: 80px 0;
    background-repeat: no-repeat;
    background-size: 100%;
}

#the_9senses_matrix h2 {
}

#the_9senses_matrix h2 img {
    width: 90vw;
    margin: 0 auto 50px;
    display: block;
}

.matrix_img {
    width: 80vw;
    margin: 0 auto;
    display: block;}

#the_9senses_matrix article {
    background: #fff;
    padding: 50px;
    border-radius: 20px;
    width: 80vw;
    margin: 0 auto 50px;
}

#the_9senses_matrix article h3 { text-align:center;}

.sense_listbox{
    display: flex;
    gap: 20px;
    margin: 40px 0;
}

.sense_listbox2 {
    display: flex;
    gap: 20px;
    margin: 40px auto;
    flex-wrap: wrap;
    justify-content: center;
}

.sense_listbox div {
    background: #ececec;
    padding: 20px;
    border-radius: 20px;
    width: 20%;
}

.sense_listbox2 div {
    background: #ececec;
    padding: 20px 30px;
    border-radius: 20px;
    width: 40%;
}

.sense_listbox div b,
.sense_listbox2 div b {
    background: linear-gradient(108deg, rgb(121 4 160) 0%, rgba(22, 131, 169, 1) 59%);
    color: #fff;
    text-align: center;
    border-radius: 100px;
    width: 100%;
    display: block;
    padding: 6px;
    margin-bottom: 10px;
    font-family: Futura, 'Century Gothic', sans-serif;
    letter-spacing: 0.13em;
    font-weight: normal;
    font-size: 1.2vw;
}

.sense_listbox2 div p { margin-top: 15px;}

/* グラデタイトル */
.title_grad_sense {
    letter-spacing: 0.03em !important;
    line-height: 1.2;
    text-align: center !important;
    font-size: 100%;
}

.title_grad_sense span {
    font-size: 2.2vw !important;
    font-family: Futura, 'Century Gothic', sans-serif;
    font-weight: normal !important;
    margin: 0 0 5px 0 !important;
    background: linear-gradient(90deg, rgb(121 4 160) 42%, rgba(22, 131, 169, 1) 66%) !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: block;
}

#sense_listbox_bottom {
    margin: 30px auto 0;
    width: 50vw;
    line-height: 1.8;
}

#sense_listbox_bottom p:nth-child(1) { text-align: center; margin-bottom: 20px;}


/* スマホサイズ（例：767px以下） */
@media screen and (max-width: 767px) {
#the_9senses_matrix {
        background-image: 
            linear-gradient(to bottom, transparent 100px, #ececec 100px), /* 少し短く */
            url('images/main-visual.jpg');
    }
}

/* ----------------------------------
  technology
------------------------------------- */
#technology {
    background: url(img/bg_technology.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 150px 0 100px;
    background-repeat: no-repeat;
    color: #fff;
    margin: 0 calc(50% - 50vw);
}

#technology h2 {
    position: absolute;
    top:-40px;
    left: 5%;
}
#technology h2 img { width: 90vw;}

#technology div { 
    width: 35vw;
    margin: 30px auto 30px 200px;
}

#technology h3 {
    font-size: 180%;
    margin-bottom: 50px;}

#technology h3 span {
    font-size: 65% !important;
    font-family: Futura, 'Century Gothic', sans-serif;
    font-weight: normal;
    margin: 8px 0 10px 0;
    display: block;
    letter-spacing: 0.2em;
}

#technology div p { line-height: 1.8; margin-bottom: 20px;}



/* ----------------------------------
  Our Expertise
------------------------------------- */
#our_expertise {
    position: relative;
    padding: 150px 0 100px;
    margin: 0 calc(50% - 50vw);
}

#our_expertise h2 {
    position: absolute;
    top:-40px;
    left: 5%;
}
#our_expertise h2 img { width: 90vw;}

#our_expertise h3 {
    margin-bottom: 40px;
    width: fit-content;
    margin: 0 auto 50px;
    text-align: center;
}

#our_expertise h3 span.jp_txt {
    font-size: 130%;
    margin-bottom: 10px;
    background: linear-gradient(90deg, rgb(97, 15, 124) 15%, rgb(11, 89, 145) 60%, rgba(22, 131, 169, 1) 100%) !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    line-height: 1.4;
    display: block;
}

#our_expertise h3 span.en_txt {
    font-size: 80% !important;
    font-family: Futura, 'Century Gothic', sans-serif;
    font-weight: normal;
    margin: 0 0 10px 0;
    display: block;
    letter-spacing: 0.2em;
    color: #fff;
    background:linear-gradient(90deg, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 1) 66%) !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.expertise_readtitle {
    font-size: 140%;
    margin-bottom: 10px;
    display: block;}

#our_expertise article {
    background: #fff;
    padding: 50px 50px 20px 50px;
    border-radius: 20px;
    width: 60vw;
    margin: 0 auto 50px;
}

.expertise_listbox {
    margin: 40px auto;
    flex-wrap: wrap;
    justify-content: center;
    background: #ececec;
    padding: 20px 0;
    border-radius: 20px;
}

.expertise_listbox_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.expertise_listbox_inner div {
    width: 45%;
    padding: 20px;}

.expertise_100per {width: 93% !important;}

.expertise_listbox_inner div:nth-child(even) {
    border-right: 1px solid #fff;
    padding-right: 30px;
}
.expertise_listbox_inner div:nth-child(odd) {
    padding-left: 30px;
}

.expertise_listbox_inner div:nth-of-type(1),
.expertise_listbox_inner div:nth-of-type(2) {
    border-bottom: 1px solid #fff !important;
}

.expertise_listbox_inner div:last-of-type {
    border-right: 0px solid #fff !important;
}


.expertise_listbox div b {
    background: linear-gradient(108deg, rgb(121 4 160) 0%, rgba(22, 131, 169, 1) 59%);
    color: #fff;
    text-align: center;
    border-radius: 100px;
    width: 100%;
    display: block;
    padding: 6px;
    margin-bottom: 10px;
    font-family: Futura, 'Century Gothic', sans-serif;
    letter-spacing: 0.13em;
    font-weight: normal;
    font-size: 1.2vw;
    margin: 20px 40px;
}

.expertise_listbox_inner div p { margin-top:20px;}

.expertise_listbox_scene b {
    width:90% !important;
    margin: 0 auto 30px !important;
}

.expertise_listbox_scene ol {
    margin-left: 40px;
    list-style: disc;
}

.expertise_listbox_scene ol li { margin-bottom: 10px;}


/* ----------------------------------
  founders
------------------------------------- */
#founders {
    background: url(img/bg_technology.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 180px 0 100px;
    background-repeat: no-repeat;
    color: #fff;
    margin: 0 calc(50% - 50vw);
}

#founders h2 {
    position: absolute;
    top: -61px;
    left: 10%;
}

#founders h2 img { width: 80vw;}

#founders div {
    width: 70vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

#founders article {
    width: 47%;
    background: rgb(2 15 51 / 45%);
    padding: 40px;
    border-radius: 20px;
}

#founders article img { width: 100%; margin: 20px 0;}

#founders h3 { margin-bottom: 20px; font-size: 110%}
#founders h3 span {
    font-size: 180% !important;
    font-family: Futura, 'Century Gothic', sans-serif;
    font-weight: normal;
    margin: 0 0 0px 0;
    display: block;
    letter-spacing: 0.1em;
    color: #fff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 1) 66%) !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.prof_txt { line-height: 1.7;}


/* ----------------------------------
  company
------------------------------------- */

.company_table {width: 800px; margin: 0 auto;}
.company_table th { min-width: 200px;}

.company_table th,
.company_table td { padding: 15px !important;}

.company_table td { background:#ffffff54; }



/* ----------------------------------
  contact
------------------------------------- */

#cf-tbl {
    width: 70%;
    margin: 30px auto;
}

#cf-tbl table {
    width: 100%;
    border-collapse: collapse;
    border-width: 1px;
    color: #444;
}

#cf-tbl table tr th,
#cf-tbl table tr td {
    padding: 0 0.5em;
    text-align: left;
    vertical-align: top;
    border-width: 1px;
    vertical-align: middle;
    font-size: 85%;
}

#cf-tbl table tr td p {
    text-align: unset !important;
}

#cf-tbl table tr th {
    width: 35%;
    background: #eee;
}

#cf-tbl input[type="date"] {
    padding: 6px;
    margin-bottom: 5px;
    margin-top: 10px;
}

#cf-tbl select {
    padding: 6px;
    margin-bottom: 10px;
}

#cf-tbl input.wpcf7-form-control.wpcf7-text {
    margin-bottom: 10px;
}

.radio-renraku {
    margin-bottom: 10px;
    margin-top: 10px;
    display: block;
}

@media screen and (max-width:768px) {
    #cf-tbl {
        width: 100%;
    }

    #cf-tbl table,
    #cf-tbl table tbody,
    #cf-tbl table tr,
    #cf-tbl table tr th,
    #cf-tbl table tr td {
        display: block;
    }

    #cf-tbl table {
        width: 100%;
        border-width: 0 0 1px 0;
    }

    #cf-tbl table tr th,
    #cf-tbl table tr td {
        width: 100%;
        padding: 5px 5%;
    }

    #cf-tbl table tr td {
        border-width: 0px 1px 0px 1px;
    }
}

/*「必須」文字デザイン*/
.req {
    font-size: .75em;
    padding: 5px;
    background: #e2418d;
    color: #fff;
    border-radius: 3px;
    margin-right: 5px;
}

/*「任意」文字デザイン*/
.opti {
    font-size: .8em;
    padding: 5px;
    background: #909090;
    color: #fff;
    border-radius: 3px;
    margin-right: 5px;
}

/* 入力項目を見やすく */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
    width: 100%;
    padding: 8px 15px;
    margin-right: 10px;
    margin-top: 10px;
    border: 1px solid #d0d5d8;
    border-radius: 3px;
    background-color: #eff1f5;
}

textarea.wpcf7-form-control.wpcf7-textarea {
    height: 200px;
}

/* 「送信する」ボタン */
input.wpcf7-submit {
    display: block;
    padding: 15px;
    width: 400px;
    background: linear-gradient(90deg, rgb(169 33 143) 15%, rgb(11, 89, 145) 60%, rgb(3 141 189) 100%) !important;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 10px;
    margin: 15px auto 0;
}

@media screen and (max-width:768px) {
    input.wpcf7-submit {
        width: 250px;
    }
}

input.wpcf7-submit:hover {
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, .15), 0 0 5px rgba(0, 0, 0, .1);
}

/* エラーメッセージを見やすく */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
    color: red;
    font-weight: 600;
}


/* ----------------------------------
  Footer
------------------------------------- */
.l-footer {
    margin-top: 0px;
    border-top: 1px solid #ddd;}



/* ----------------------------------
  responsive
------------------------------------- */
@media screen and (max-width: 767px) {
#philosophy { padding: 100px 0 0;}
#philosophy div {
    display: flex;
    flex-direction: column;
}
#philosophy div img {
    width: 100%;
    margin-left: 0px;
}
.matrix_img { width: 90vw;}
#the_9senses_matrix article {
    padding: 30px;
    width: 90vw;
}
.sense_listbox { flex-direction: column;}
.sense_listbox div {width: 100%;}
.sense_listbox div b, .sense_listbox2 div b {font-size: 5.2vw;}
.title_grad_sense span {font-size: 8vw !important;}
#sense_listbox_bottom { width: 100%;}
#sense_listbox_bottom p:nth-child(1) {text-align: left;}
.sense_listbox2 {gap: 0px;}
.sense_listbox2 div {width: 100%; margin-bottom: 15px;}

    
}