@charset "UTF-8";

/*
 * abouttdk.css
 */


/* !mainimg
---------------------------------------------------------- */

.mainimg {
    background: url(../../abouttdk/img/bg_cover.jpg) no-repeat center center;
    background-size: cover;
}

@media screen and (max-width:767px) {
    .mainimg {
        background: url(../../abouttdk/img/cover_sp.jpg) no-repeat center center;
        background-size: cover;
    }
    #mainimg .ttl {
        margin-top: -20px;
    }
}

.pager li a {
    background-color: rgba(255, 255, 255, 0.85);
}


/* AboutTDK-1
---------------------------------------------------------- */

#mainimg .ttl {
    margin-top: -60px;
}

#mainimg h1.ttl span {
    margin-bottom: 10px;
}

#mainimg h1.ttl .sub {
    margin-bottom: 25px;
}

.abouttdk01 p {
    font-size: 14px;
}

.abouttdk01 .c03.contents p.text {
    font-size: 12px;
    line-height: 1.6em;
}

.abouttdk01 .contents {
    width: 960px;
    margin: 60px auto 0;
}

.boxwrap .subtl {
    font-size: 24px;
    line-height: 1.4em;
}

.c01 .boxwrap .tl {
    font-size: 40px;
    line-height: 1.2em;
}

.c02 .boxwrap .tl {
    font-size: 32px;
    line-height: 1.2em;
}

.boxwrap .left {
    float: left;
}

.boxwrap .right {
    float: right;
}

.boxwrap .para {
    padding: 40px 0;
    text-align: justify;
}

.boxwrap .left.para {
    padding-right: 40px;
}

.boxwrap .right.para {
    padding-left: 40px;
}

.boxwrap .text {
    margin-top: 20px;
}

.abouttdk01 .c02 .firstline {
    margin-bottom: 40px;
}

.abouttdk01 .c02 .boxwrap div {
    box-sizing: border-box;
}

.abouttdk01 .c02 .boxwrap {
    border: 2px solid #09294e;
    overflow: hidden;
}

.abouttdk01 .c02 .boxwrap + .boxwrap {
    margin-top: 30px;
}

.boxwrap .left, .boxwrap .right {
    width: 480px;
}

.abouttdk01 .c02 .boxwrap .left, .abouttdk01 .c02 .boxwrap .right {
    width: 50%;
}

.abouttdk01 .c02 .boxwrap .left.para {
    padding: 20px;
}

.abouttdk01 .c02 .boxwrap .right.para {
    padding: 20px;
}

.abouttdk01 .motto {
    font-size: 12px;
    padding: 10px;
    margin-top: -60px;
}

.abouttdk01 h2 {
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #333;
    margin-bottom: 40px;
}

.abouttdk01 h3 {
    font-size: 40px;
    line-height: 1.0;
    margin-bottom: 30px;
}

.abouttdk01 .cross {
    text-align: center;
    font-size: 36px;
    line-height: 1.0em;
    margin: 30px 0;
    padding-left: 1.0em;
}

.abouttdk01 h4 {
    background-color: #09294e;
    color: #fff;
    font-weight: bold;
    padding: 9px 10px;
    line-height: 1.0em;
    margin: 30px 0;
}

.chartimg1 {
    background: url('../../abouttdk/img/p01_ct3-bg01.jpg');
    height: 832px;
    position: relative;
    padding-top: 80px;
    margin-top: 30px;
}

.chartimg1 .chart {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -190px;
}

.chartimg2 {
    background: url('../../abouttdk/img/p01_ct4-bg01.jpg');
    height: 1088px;
    position: relative;
}

.chartimg2 > div {
    position: absolute;
}

.chartimg2 .box1 {
    top: 190px;
    left: 0;
    color: #fbca01;
    width: 370px;
}

.chartimg2 .box1 img {
    margin-left: 30px;
}

.chartimg2 .box2 {
    top: 0;
    right: 0;
    width: 350px;
    color: #e85377;
}

.chartimg2 .box3 {
    top: 300px;
    right: 0;
    width: 210px;
    color: #a560a2;
}

.chartimg2 .box4 {
    bottom: 0;
    right: 0;
    width: 280px;
    color: #536fae;
}

.chartimg2 .box5 {
    bottom: 200px;
    left: 0;
    width: 350px;
    color: #18b7cd;
}

.chartimg2 .tl {
    font-size: 24px;
    position: relative;
    padding: 18px 0 12px 1.4em;
    line-height: 1.0em;
}

.chartimg2 .tl span {
    font-size: 46px;
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
    line-height: 1.0em;
}

.chartimg2 p {
    color: #000;
}

.chartimg2 .box1 span {
    color: #fbca01;
}

.chartimg2 .box2 span {
    color: #e85377;
}

.chartimg2 .box3 span {
    color: #a560a2;
}

.chartimg2 .box4 span {
    color: #536fae;
}

.chartimg2 .box5 span {
    color: #18b7cd;
}

.chartimg2 p.sub {
    font-weight: bold;
}

.chartimg2 p.text {
    margin-bottom: 10px;
}

.chartimg2 .factory {
    left: 0;
    bottom: 0;
}

.chartimg2 .factory img {
    float: left;
}

.chartimg2 .factory div {
    float: right;
    margin-left: 10px;
}

.chartimg2 .factory p {
    font-size: 11px;
}

.chartimg2 .factory .tl {
    font-weight: bold;
    padding: 0;
    margin: 30px 0 5px;
}

.chartimg2 .center {
    top: 410px;
    width: 100%;
}

.chartimg2 .center p {
    font-size: 28px;
    text-align: center;
}

.c04 {
    background-image: url('../../abouttdk/img/p01_c05-img2.jpg');
    height: 1020px;
    text-align: center;
    padding-top: 50px;
}

.c04 img {
    margin: 0 auto;
}

.c04 p {
    font-size: 16px;
    margin-top: 25px;
}

.linebg {
    width: 960px;
    background-image: url('../../abouttdk/img/p02_background.jpg');
    background-position: bottom center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.abouttdk02 .boxwrap .tl {
    font-size: 38px;
}

.abouttdk02 .boxwrap .sub {
    font-weight: bold;
    padding: 20px 0 10px;
}

.abouttdk02 .left.inner {
    padding-right: 30px;
}

.abouttdk02 .right.inner {
    padding-left: 20px;
}

.abouttdk02 .boxwrap {
    padding-bottom: 40px;
}

.abouttdk02 .car {
    background-image: url('../../abouttdk/img/p02_c02-bg1.png');
    background-position: -30px 0;
    background-repeat: no-repeat;
}

.abouttdk02 .ict {
    background-image: url('../../abouttdk/img/p02_c02-bg2.png');
    background-repeat: no-repeat;
}

.abouttdk02 .industry {
    background-image: url('../../abouttdk/img/p02_c02-bg3.png');
    background-position: 80%;
    background-repeat: no-repeat;
}

.abouttdk02 .full {
    width: 100%;
    height: 1480px;
    max-width: 1400px;
    margin: 0 auto;
    background-image: url('../../abouttdk/img/p02_c03-img3.png');
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 80px;
    text-align: center;
}

.abouttdk02 .full .sub {
    font-size: 18px;
    padding: 10px;
}

.abouttdk02 .full .logotl {
    font-size: 20px;
    padding: 50px 0 20px;
}

.abouttdk02 .full .text {
    line-height: 2.0em;
    margin-top: 10px;
}


@media screen and (max-width:767px) {

    img {
        max-width: 100%;
    }

    #mainimg .ttl {
        margin-top: -35px;
    }

    #mainimg h1.ttl span {
        margin-bottom: 10px;
    }

    #mainimg h1.ttl .sub {
        margin-bottom: 10px;
    }

    .abouttdk01 p {
        font-size: 12px;
    }

    .abouttdk01 .contents {
        width: 100%;
        margin: 20px auto 0;
    }

    .boxwrap .subtl {
        font-size: 13px;
        line-height: 1.4em;
        font-weight: bold;
    }

    .c01 .boxwrap .tl, .c02 .boxwrap .tl {
        font-size: 22px;
        line-height: 1.2em;
        font-weight: bold;
    }

    .boxwrap .left, .boxwrap .right {
        width: 100%;
    }

    .boxwrap .left {
        float: none;
    }

    .boxwrap .right {
        float: none;
    }

    .boxwrap .para {
        padding: 20px 0;
        text-align: justify;
    }

    .boxwrap .left.para {
        padding-right: 0;
    }

    .boxwrap .right.para {
        padding-left: 0;
    }

    .boxwrap .text {
        margin-top: 20px;
    }

    .abouttdk01 .c02 .boxwrap div {
        box-sizing: border-box;
    }

    .abouttdk01 .c02 .boxwrap {
        border: none;
        margin-top: inherit;
        overflow: inherit;
    }

    .abouttdk01 .c02 .boxwrap + .boxwrap {
        margin-top: inherit;
    }

    .boxwrap .left, .boxwrap .right {
        width: 100%;
    }

    .abouttdk01 .c02 .boxwrap .left, .abouttdk01 .c02 .boxwrap .right {
        width: 100%;
    }

    .abouttdk01 .c02 .boxwrap .left.para {
        padding: 0;
    }

    .abouttdk01 .c02 .boxwrap .right.para {
        padding: 0;
    }

    .abouttdk01 h2 {
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px solid #333;
        margin-bottom: 15px;
    }

    .abouttdk01 h3 {
        font-size: 22px;
        font-weight: bold;
        line-height: 1.2em;
        margin-bottom: 15px;
    }

    .abouttdk01 h4 {
        font-size: 13px;
        margin: 30px 0 0;
    }

    .chartimg1 {
        height: auto;
        position: relative;
        padding-top: 0;
        margin-top: 15px;
        background-image: url('../../abouttdk/img/p01_background_sp.png');
        background-size: 100%;
        background-repeat: repeat-y;
    }

    .chartimg2 {
        background-image: url('../../abouttdk/img/p01_background_sp.png');
        background-size: 100%;
        background-repeat: repeat-y;
        height: auto;
        position: relative;
    }

    .chartimg2 > div {
        position: relative;
        padding-top: 15px;
    }

    .chartimg2 .box1 {
        top: auto;
        left: auto;
        width: 100%;
    }

    .chartimg2 .box1 img {
        margin-left: 0;
    }

    .chartimg2 .box2 {
        top: auto;
        left: auto;
        width: 100%;
    }

    .chartimg2 .box3 {
        top: auto;
        left: auto;
        width: 100%;
    }

    .chartimg2 .box4 {
        top: auto;
        left: auto;
        width: 100%;
    }

    .chartimg2 .box5 {
        top: 0;
        left: auto;
        width: 100%;
    }

    .chartimg2 .tl {
        font-size: 18px;
        font-size: bold;
    }

    .chartimg2 .tl span {
        font-size: 30px;
        top: 12px;
        left: 2px;
    }

    .chartimg2 .factory {
        left: auto;
        bottom: auto;
        padding-bottom: 30px;
        margin-bottom: -20px;
    }

    .chartimg2 .factory img {
        float: none;
    }

    .chartimg2 .factory div {
        float: none;
        margin-left: 0;
        margin-top: -15px;
    }

    .c04 {
        background-image: none;
        height: auto;
        text-align: center;
        padding-top: 0;
        margin-top: 0;
    }

    .linebg {
        width: 100%;
        background-image: url('../../abouttdk/img/p02_sp_bg.png');
        background-position: center;
        background-size: 100% 100%;
        background-repeat: repeat-y;
    }

    .abouttdk02 .boxwrap {
        padding-top: 20px;
    }

    .abouttdk02 .boxwrap .tl {
        font-size: 20px;
        font-weight: bold;
    }

    .abouttdk02 .boxwrap .sub {
        font-weight: bold;
        padding: 15px 0 10px;
    }

    .abouttdk02 .left.inner {
        padding-right: 0;
    }

    .abouttdk02 .right.inner {
        padding-left: 0;
    }

    .abouttdk02 .boxwrap {
        padding-bottom: 20px;
    }

    .abouttdk02 .car {
        background-image: url('../../abouttdk/img/p02_c02-bg1_sp.png');
        background-position: top left;
        background-size: 100% auto;
        padding-bottom: 15px;
    }

    .abouttdk02 .ict {
        background-image: url('../../abouttdk/img/p02_c02-bg2_sp.png');
        background-position: top center;
        background-size: 80% auto;
    }

    .abouttdk02 .industry {
        background-image: url('../../abouttdk/img/p02_c02-bg3_sp.png');
        background-size: 100% auto;
        background-position: center -20px;
        padding-bottom: 15px;
    }

}