@charset "utf-8";
.dispFlex{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.j-cont-c{-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.j-cont-sb{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.j-cont-fs{-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
.a-items-c{-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.a-items-fs{-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
.a-items-fe{-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
.pcNone{display: none;}
.spNone{display: block;}
.tac{text-align: center;}
.color_main{color: #E94709;}
.color_sub{color: #00A1C9;}

#philosophy-body{margin: 0 auto; padding: 1rem 0 2rem; position: relative;z-index: 0; background: #000;}
#philosophy-body::after{content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background: url(/files/user/_/koteipage/philosophy/img/bg_main.jpg); background-size: cover; z-index: -1; pointer-events: none;}
#philosophy-body ul{padding: 0;}
#philosophy-body li{list-style-type: none;}
#philosophy-body p{margin: 0 auto; color: #fff; font-family: serif!important;}


/* font */
.ttl_en,
.lead_en,
.txt_en{}


/* screen */
#philosophy-body .sec{}
#philosophy-body .secInner{max-width: 1300px; margin: 0 auto; position: relative;padding: 3rem; z-index: 0;}
#philosophy-body .secInner::before{content: ""; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100%; background: url(/files/user/_/koteipage/philosophy/img/bg_line.png) top center no-repeat; z-index: -1; background-size: contain;}
#philosophy-body .btn{display: inline-block; cursor: pointer; transition: .3s;}
#philosophy-body .btn:hover{opacity: 0.7;}
#philosophy-body .btn_more{}
#philosophy-body .ttl_sec{margin-bottom: 1rem;}
#philosophy-body .ttl_sec img{}

#philosophy-body .valueBox{ background: url(/files/user/_/koteipage/philosophy/img/bg_box_value.png); background-size: cover; width: 100%; margin-bottom: 2rem;padding: 2rem; box-sizing: border-box;}
#philosophy-body .valueBox .ttl{font-size: 2.8rem;}
#philosophy-body .valueBox .ttl_border{display: inline-block;}
#philosophy-body .valueBox .ttl_pickup{}
#philosophy-body .valueBox .txt_pickup{position: relative; z-index: 0;}
#philosophy-body .valueBox .txt_pickup::before{position: absolute; z-index: -1; content: ""; left: 0; bottom: 0; width: 100%; height: 30%; opacity: 0.4;}
#philosophy-body .valueBox .lead{font-size: 2rem;}
#philosophy-body .valueBox .list_value{width: 100%; margin-left: 1%;}
#philosophy-body .valueBox .list_value li{width: 31%; position: relative; padding: 1rem 1rem 2rem 4rem; border-bottom: solid 1px #fff; border-right: solid 1px #fff; margin-right: 2%; margin-bottom: 1rem; z-index: 0; box-sizing: border-box;}
#philosophy-body .valueBox .list_value li::before{position: absolute; content: ""; width: 100%; height: 100%; bottom: 0; left: 0; opacity: 0.3; z-index: -1;; background: url(/files/user/_/koteipage/philosophy/img/bg_line_value.png) bottom center no-repeat; background-size: cover;}
#philosophy-body .valueBox .list_value li .txt_num{position: absolute; top: 0; left: 0; font-size: 6rem; line-height: 1em; opacity: 0.3;}
#philosophy-body .valueBox .list_value li .txt{font-size: 1.3rem; height: 120px; line-height: 1.4em;}
#philosophy-body .valueBox .list_value li .txt_en{line-height: 1.4em;}

#philosophy-body .valueBox_practice{}
#philosophy-body .valueBox_practice .list_value li{width: 23%;}
#philosophy-body .valueBox_practice .list_value li .txt{height: 150px;}
#philosophy-body .valueBox_stance{}
#philosophy-body .valueBox_stance .list_value li{width: 46%;}
#philosophy-body .valueBox_stance .list_value li .txt.txt_nonBr{padding-top: 20px; height: 80px;}
#philosophy-body .valueBox_stance .list_value li:last-child .txt{letter-spacing: -0.1em; }
#philosophy-body .valueBox_game .ttl_border{border-bottom: solid 1px #cfbf00;}
#philosophy-body .valueBox_game .ttl_pickup{color: #cfbf00;}
#philosophy-body .valueBox_game .txt_pickup::before{background:#cfbf00; }
#philosophy-body .valueBox_practice .ttl_border{border-bottom: solid 1px #51d8bb;}
#philosophy-body .valueBox_practice .ttl_pickup{color: #51d8bb;}
#philosophy-body .valueBox_practice .txt_pickup::before{background:#51d8bb; }
#philosophy-body .valueBox_stance .ttl_border{border-bottom: solid 1px #c55b7c;}
#philosophy-body .valueBox_stance .ttl_pickup{color: #c55b7c;}
#philosophy-body .valueBox_stance .txt_pickup::before{background:#c55b7c; }


/* section */
#philosophy-body .imgBox_logo_hdf{padding: 2rem;}
#philosophy-body .imgBox_logo_hdf img{}
#philosophy-body .topSec{padding-bottom: 18rem; background: url(/files/user/_/koteipage/philosophy/img/bg_top.jpg) center bottom no-repeat; background-size: unset; mix-blend-mode: screen; margin-bottom: -1rem;}
#philosophy-body .topSec .txtBox{}
#philosophy-body .topSec .txtBox .ttl{}
#philosophy-body .topSec .txtBox .lead{font-size: 2.5rem;}
#philosophy-body .topSec .txtBox .lead_en{font-size: 1.5rem;}
#philosophy-body .philosophySec{mix-blend-mode: screen;}
#philosophy-body .philosophySec .txtBox{background: url(/files/user/_/koteipage/philosophy/img/bg_philosopgy.jpg) top right no-repeat; background-size: contain; max-width: 1100px; margin: 0 auto;}
#philosophy-body .philosophySec .txtBox .ttl{}
#philosophy-body .philosophySec .txtBox .lead{font-size: 2.8rem;}
#philosophy-body .philosophySec .txtBox .lead_en{font-size: 1.5rem;}
#philosophy-body .styleSec{}
#philosophy-body .styleSec .txtBox{background: url(/files/user/_/koteipage/philosophy/img/bg_style2310.jpg) top right no-repeat; background-size: contain; max-width: 1100px; margin: 0 auto;}
#philosophy-body .styleSec .txtBox .ttl{}
#philosophy-body .styleSec .txtBox .lead{font-size: 2.5rem;}
#philosophy-body .styleSec .txtBox .lead_en{font-size: 1.5rem;}
#philosophy-body .thingSec{}
#philosophy-body .thingSec .txtBox{padding-left: 40%; background: url(/files/user/_/koteipage/philosophy/img/bg_thing2310.jpg) top left no-repeat; background-size: contain; max-width: 1100px; margin: 0 auto;}
#philosophy-body .thingSec .txtBox .ttl{}
#philosophy-body .thingSec .txtBox .lead{font-size: 2.5rem;}
#philosophy-body .thingSec .txtBox .lead_en{font-size: 1.5rem;}

#philosophy-body .valueSec{position: relative;}
#philosophy-body .valueSec .img_player{position: absolute; top: 0; right: -3rem; z-index: 1; pointer-events: none;width: 30%; max-width: 306px;}
#philosophy-body .valueSec .img_player img{width: 100%;}
#philosophy-body .valueSec .ttl_sec{}
#philosophy-body .valueSec .valueBox_game{}
#philosophy-body .valueSec .valueBox_practice{}
#philosophy-body .valueSec .valueBox_stance{}
#philosophy-body .sloganSec{}
#philosophy-body .sloganSec .ttl_sec{}
#philosophy-body .sloganSec .imgBox{margin-bottom: 1rem;}
#philosophy-body .sloganSec .txt{font-size: 1.8rem; margin-bottom: 2rem;}
#philosophy-body .sloganSec .txtBox{}
#philosophy-body .sloganSec .txtBox .txt_other{border: solid 1px #fff; padding: 2rem; font-size: 1.5rem;}
#philosophy-body .sloganSec .txtBox .txt_other .fs_s{font-size: 0.9em;}


@media screen and (max-width:1790px) {
    #philosophy-body .valueBox .list_value li .txt{height: auto; font-size: 1.2rem; margin-bottom: 0.6em;}
    #philosophy-body .valueBox_practice .list_value li .txt{height: auto;}
    #philosophy-body .valueBox_stance .list_value li .txt.txt_nonBr{padding-top: 0; height: auto;}
}


@media screen and (max-width:1400px) {
    #philosophy-body .valueBox .list_value li{width: 46%;}
}


@media screen and (max-width:480px) { 
    .pcNone{display: block;}
    .spNone{display: none;}

    #philosophy-body .sec{ width: 100%;}
    #philosophy-body .secInner{width: 90%; padding: 2rem 0;}
    #philosophy-body .ttl_sec img{height: 2.6rem;}

    #philosophy-body .imgBox_logo_hdf{padding: 1rem; margin-bottom: 0!important;}
    #philosophy-body .imgBox_logo_hdf img{height: 6rem;}
    #philosophy-body .topSec{padding-bottom: 10rem;background: url(/files/user/_/koteipage/philosophy/img/bg_top_sp.jpg) center bottom no-repeat; background-size: contain;}
    #philosophy-body .topSec .txtBox .lead{font-size: 1.3rem;}
    #philosophy-body .topSec .txtBox .lead_en{font-size: 1rem;}
    #philosophy-body .philosophySec .txtBox .lead{font-size: 1.3rem;}
    #philosophy-body .philosophySec .txtBox .lead_en{font-size: 1rem;}
    #philosophy-body .styleSec .txtBox .lead{font-size: 1.3rem;}
    #philosophy-body .styleSec .txtBox .lead_en{font-size: 0.8rem;}
    #philosophy-body .styleSec .txtBox{max-width: 100%; padding-left: 0; padding-top: 5rem;}
    #philosophy-body .valueSec .secInner{width: 100%;}
    #philosophy-body .valueSec .img_player{top: -2rem; right: 0;}
    #philosophy-body .valueBox{padding: 5%;}
    #philosophy-body .valueBox .ttl{font-size: 1.8rem;}
    #philosophy-body .valueBox .lead{font-size: 1.2rem;}
    #philosophy-body .valueBox .list_value li{width: 100%; min-height: 8rem; padding: 1rem 1rem 1rem 3rem;}
    #philosophy-body .valueBox .list_value li .txt_num{font-size: 4rem;}
    #philosophy-body .valueBox .list_value li .txt{height: auto; font-size: 1.2rem; margin-bottom: 0.6em;}
    #philosophy-body .valueBox_practice .list_value li .txt{height: auto;}
    #philosophy-body .sloganSec .imgBox img{width: 60%;}
    #philosophy-body .sloganSec .txt{font-size: 1.2rem;}
    #philosophy-body .sloganSec .txtBox .txt_other{padding: 1rem; font-size: 1rem;}
    #philosophy-body .valueBox_stance .list_value li .txt.txt_nonBr{padding-top: 0; height: auto;}
    
    #philosophy-body .thingSec .txtBox{padding-left: 0;padding-top: 5rem;}
    #philosophy-body .thingSec .txtBox .lead{font-size: 1.3rem;}
    #philosophy-body .thingSec .txtBox .lead_en{font-size: 1rem;}
}