@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400&family=Noto+Sans+JP:wght@700&display=swap');


header {
    padding-top: 10px;
    height: 70px;
    width: 98%;
    margin: 2% 1% 0% 1%;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 1px 1px 1px 1px rgb(0, 62, 84);
    color: rgb(0, 0, 0);
    /* z-index: 1; */
}

/* .header-list li {
    list-style: none;
    float: left;
} */

.header-logo {
    color: green;
    font-size: 30px;
    float: left;
}

.header-list li {
    list-style: none;
    float: right;
    padding: .1% 1.5%;
    /* padding: 5px 20px; */
}

.header-logo {
    float: left;
    padding: 2px 0px 5px 20px;
}

/* @media (max-width: 414px) {
        .header-logo {

        }
    } */

h2 {
    font-weight: 300;
    text-align: center;
    z-index: 100;
}

h3 {
    font-size: 18px;
    text-align: center;
}

h5 {
    font-size: 2.3rem;
    text-align: center;
}

div {
    font-size: 1.6rem;
    font-weight: 100;
    text-align: left;
}

/* スクロール制限 */
body {
    font-family: 'M PLUS 1p', sans-serif;
    overflow-x: hidden;
    font-weight: 100;
}

table {
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 100;
}


/* スマホの時だけ改行させる*/
.br-sp {
    display: none;
}

@media (max-width: 600px) {
    .br-sp {
        display: block;
    }

}

.br-spd {
    display: block;
}

@media (max-width: 990px) {
    .br-spd {
        display: none;
    }
}

@media (max-width: 820px) {
    .br-spd {
        display: block;
    }
}

.br-spdc {
    display: none;
}

@media (max-width: 400px) {
    .br-spdc {
        display: block;
    }
}

.br-sp-m {
    display: none;
}

@media (max-width: 820px) {
    .br-sp-m {
        display: block;
    }
}

@media (max-width: 414px) {
    .br-sp-m {
        display: none;
    }
}

/* トップへ戻る　共通指定 */
.gotoTop {
    text-align: right;
    margin-right: 10px;
    color: orangered;
    font-size: 2rem;
}


/* 代表あいさつ management */

/* 代表あいさつmanagement.html　本文指定 */
.column {
    text-align: justify;
    font-size: 1.9rem;
    font-weight: 300;
    line-height: 40px;
    font-family: serif, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, sans-serif;
}


/* 代表あいさつmanagement.html　代表右揃え指定 */
.manag {
    text-align: right;
}

/* 代表あいさつmanagement.html　代表名size-up指定 */
p.daihyo {
    font-size: 140%;
}

/* 代表あいさつmanagement.html　イメージ回り込み */
.column img {
    width: 250px;
    float: right;
    margin: 0 0px 0 40px;
}

@media (max-width: 800px) {
    .column img {
        width: 140px;
        margin: 0 0 0 10px;
    }

    .column {
        font-size: medium;
        line-height: normal;
    }
}


/* アンケート survey */
.surveyText-top,
.surveyText {
    font-size: 1.8rem;
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 100;
    text-align: center;
}

/* アンケートsurvey.html　イラスト回り込み */
.illust img {
    /* float: left; */
    /* margin: 0 25px 0 0; */
    width: 110%;
}

@media (max-width: 900px) {
    .illust img {
        /* width: 150px; */
        width: 50%;
        float: left;
        margin: 0 10px 0 0;
    }
}

@media (max-width: 420px) {
    .illust img {
        display: none;
    }
}

/* アンケートsurvey.html　文字位置指定 */
/* スマホのみ表示 */
.sm {
    display: none;
}

@media (max-width: 520px) {
    .sm {
        display: block;
    }
}

/* pcとタブレットで表示 */
.pc-tb {
    display: block;
}

@media (max-width: 520px) {
    .pc-tb {
        display: none;
    }
}

/* pcで表示 */
.pc {
    display: block;
}

@media (max-width: 900px) {
    .pc {
        display: none;
    }
}

/* アンケートsurvey.html　背景指定 */
/* .survey {
    } */
.surveyMail {
    size: 30px;
}

@media (max-width: 1000px) {
    .surveyMail {
        size: 20px;
    }

    /* .survey {
    } */
}


/* トップページ index */

/* トップページindex.html　ヘッダー文字指定 */
h1 {
    font-size: 4.5rem;
    margin-right: 5%;
    text-align: right;
    font-weight: 300;
    font-family: 'M PLUS 1p', sans-serif;
    z-index: 300;
    color: black;
    /* color: white; */
    text-shadow: 0px 4px 3px rgb(255, 255, 255);
}

@media (max-width: 600px) {
    h1 {
        text-align: center;
        font-size: 3rem;
    }
}

/* トップページindex.html　ヘッダー帯指定 */
.indexHide{
    font-size: 1.8rem;
}
@media (max-width: 1000px) {
    .indexHide {
        display: none;
    }
}

/* トップページindex.html　キャッチコピー指定 */
/* @media (min-width: 415px) { */
    .catchCopy {
        font-family: "Sawarabi Mincho";
        font-size: 3rem;
        text-align: right;
        line-height: 3.7rem;
        margin-right: 40px;
        /* text-shadow: 3px #fffff; */
    }
/* }
@media (max-width: 414px) {
    .catchCopy {
        color: aliceblue;
    }
} */
/* トップページindex.html　リンク指定 */
.goto {
    top: 240px;
    bottom: 50%;
    position: relative;
    height: 230px;
    width: 50px;
    border-radius: 4%;
    line-height: 1.6em;
    text-align: center;
    margin: 0 20px;
    text-decoration: none;
    background-color: rgb(255, 192, 2);
    box-shadow: 2px 0px 2px 2px rgba(0, 0, 0, .4);
    /* overflow-y: hidden; */
}

/* .goto {
} */

@media (min-width: 415px) and (max-width: 820px) {
    .topPage {
        height: 1180px;
        background-size: 100% 100%;
        background-attachment: fixed;
        background-repeat: no-repeat;
        overflow-x: hidden;
        overflow-y: hidden;
    }
}

@media (max-width: 414px) {
    .topPage {
        height: 880px;
        background-size: 100% 100%;
    }
}

@media (max-width: 820px) {
    .topPage {
        height: 1180px;
    }

    .goto {
        top: 540px;
    }
}

@media (max-width: 768px) {
    .topPage {
        height: 1024px;
    }

}

@media (max-width: 414px) {
    .topPage {
        height: 896px;
    }
}

@media (max-width: 375px) {
    .topPage {
        height: 667px;
    }

    .goto {
        top: 240px;
    }
}



/* トップページindex.html　リンクボタン_マウスホバー指定 */
/* .goto:hover{
}


/* スマホの時だけ改行させる*/
.br-in {
    display: none;
    font-family: 'M PLUS 1p', sans-serif;
    vertical-align: sub;
}

@media (max-width: 820px) {
    .br-in {
        display: block;
    }
}

/* 会社情報 overview */

/* 会社情報overview4.html　会社情報指定 */
.mainText {
    font-weight: normal;
}

/* 会社情報overview4.html　画像位置指定 */
.info {
    position: relative;
    z-index: 2;
}

/* 会社情報overview4.html　会社情報指定 文字揃え*/
.list-L {
    /* font-size: 1.2rem; */
    /* text-align-last: justify; */
    vertical-align: top;
    font-weight: 300;
}
/* 会社情報overview4.html　会社情報指定 文字size*/
.listRe {
    /* font-size: 1.3rem; */
    vertical-align: top;
    font-weight: 200;
}

@media (min-width: 1250px) {
    .listRe ,
    .list-L {
        font-size: 1.6rem;
    }
}
@media (max-width: 1249px) {
    .listRe ,
    .list-L {
        font-size: 1.2rem;
    }
}
@media (max-width: 600px) {
    .listRe ,
    .list-L {
        font-size: 1.6rem;
    }
}
@media (max-width: 374px) {
    .listRe ,
    .list-L {
        font-size: 1.2rem;
    }
}

/* 会社情報overview4.html　画像キャプション指定 */
.text {
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 2.2rem;
    z-index: 1;
    color: black;
    opacity: 1;
    margin-top: 7%;
    font-weight: 100;
    font-family: 'M PLUS 1p', sans-serif;
}

/* 会社情報overview4.html　画像キャプションBold指定 */
.textBold {
    font-size: 3rem;
    font-weight: 100;
    letter-spacing: -.2rem;
}

.br-rg {
    text-align: right;
    /* margin-right: 0rem; */
}

/* @media (max-width: 1200px) { */
.hideMap {
    display: none;
}

/* } */

@media (min-width: 415px) and (max-width: 820px) {
    .text {
        position: absolute;
        top: 5%;
        left: 10%;
        font-size: 2rem;
        z-index: 1;
        color: black;
        opacity: 1;
        margin-top: 7%;
    }

    .textBold {
        font-size: 2.5rem;
    }

    .hideMap {
        display: block;
        position: relative;
        top: 1.6rem;
    }

    .map {
        display: none;
    }
}

@media (max-width: 414px) {
    .text {
        position: absolute;
        top: 5%;
        left: 15%;
        font-size: 1.4rem;
        z-index: 1;
        color: black;
        opacity: 1;
        margin-top: 7%;
    }

    .textBold {
        font-size: 1.8rem;
        letter-spacing: -.1rem;
    }

    .hideMap {
        display: none;
    }

    .br-rg {
        text-align: right;
        /* margin-right: 0rem; */
    }
}

/* 会社情報overview4.html　画像指定 */
.info img {
    float: none;
    width: 100%;
    z-index: 10;
    margin-bottom: 7%;
    margin-top: 7%;
}


/* 会社情報overview4.html　地図位置調整 */
.map {
    margin-top: 5%;
}

/* 会社情報overview4.html　画像マウスホバー指定 */
.info img:hover {
    opacity: .2;
}


/* 過去作品一覧 collection */


h4 {
    font-size: 28px;
    text-align: center;
    font-weight: 300;
    background-color: rgba(255, 255, 255, .79);

}

/* 過去作品一覧collection.html　文章指定 */
.ct-a,
.ct-b,
.ct-c {
    background-color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    font-size: 2rem;
    line-height: 3.5rem;
}

.ct-a {
    width: 20%;
}

.ct-b {
    width: 15%;
}

.ct-c {
    width: 20%;
}


.cr-a,
.cr-b,
.cr-c {
    background-color: rgba(255, 255, 255, .8);
    padding-left: 1%;
    text-align: right;
    font-weight: 300;
    font-size: 2rem;
}

.cr-a {
    width: 20%;
}

.cr-b {
    width: 10%;
}

.cr-c {
    width: 18%;
}

@media (min-width: 415px) {
    /* .ct-a,
        .ct-b,
        .ct-c {
            font-size: 1.4rem;
            width: 284px;
        }
        .cr-a,
        .cr-b,
        .cr-c{
            font-size: 1rem;
            width: 200px;
        } */
}

@media (max-width: 414px) {

    .ct-a,
    .ct-b,
    .ct-c {
        font-size: 1.4rem;
    }

    .cr-a,
    .cr-b,
    .cr-c {
        font-size: 1.4rem;
    }
}


.kouji {
    text-align: left;
    font-size: 1.5rem;
    margin: 10px auto;
    color: #000;
}

.red {
    color: red;
}

.black {
    color: black;
}

.bar3 {
    display: block;
    width: 100%;
    height: 10px;
    border: 0;
    border: 1px solid #cacaca;
    -webkit-border-radius: 10px;
    background: #005500;
    /* Old browsers */
    background: -moz-linear-gradient(left, #005500 0%, #52b152 20%, #83c783 51%, #008a00 76%, #005500 96%, #005700 100%, #005500 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #005500), color-stop(20%, #52b152), color-stop(51%, #83c783), color-stop(76%, #008a00), color-stop(96%, #005500), color-stop(100%, #005700), color-stop(100%, #005500));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #005500 0%, #52b152 20%, #83c783 51%, #008a00 76%, #005500 96%, #005700 100%, #005500 100%);
    /* Chrome10+,Safari5.1+ */
    background: linear-gradient(to right, #005500 0%, #52b152 20%, #83c783 51%, #008a00 76%, #005500 96%, #005700 100%, #005500 100%);
    /* W3C */
}

footer {
    text-align: center;
    bottom: 10;
}


input[type="submit"] ,
button[type="submit"] {
    border: 1px;
    border-radius: 3px;
    background-color: #0075c2;
    color: white;
    font-weight:500;
    height: 40px;
}
input[type="button"] ,
button[type="reset"] {
    border: 1px;
    border-radius: 3px;
    background-color: #d5d5d5;
    color: rgb(0, 0, 0);
    font-weight:500;
    height: 40px;
}
.input{
    border: 2px;
    border-color: #000000;
    
}