@charset "UTF-8";

/* リセット */
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-size: 100%;
    /*    vertical-align: middle; */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

article, header, footer, aside, figure, figcaption, nav, section {
    display: block;
}

body {
    line-height: 1;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: '游明朝', 'Yu Mincho', YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    background-color: #f9f9f9;
}

ol, ul {
    list-style: none;
    list-style-type: none;
}

/* header固定する */
#header {
    /*    position: fixed; */
    width: 100%;
    z-index: 100;
    background-color: #ffffff;
    opacity: 0.9;
}

/* header固定する */
.top #header {
    position: fixed;
}

.top #header.1ststyle {
    position: relative;
}

.top #header.fixed {
    position: fixed;
    top: 0px;
    z-index: 100;
}

#header:after {
    content: "";
    display: block;
    clear: both;
}

#navi:after {
    content: "";
    display: block;
    clear: both;
}

#catch_copy {
    position: absolute;
    top: 10%;
    left: 5%;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    opacity: 0.9;
    z-index: 98;
}

#catch_copy img {
    max-width: 100%;
    height: 70%;
}

#main_visual {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    overflow: hidden;
}

#main_visual_inner {
    position: absolute;
    left: 50%;
}

#main_visual_inner img {
    margin-top: -37px;
}

#contents_navi {
    box-sizing: border-box;
}

#navi {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#navi_menu {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    z-index: 102;
    background-color: #ffffff;
    opacity: 0.8;
    font-size: 0.9em;
}

#contents_title {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 3px #EBF1ED;
    -moz-box-shadow: 0px 0px 3px #EBF1ED;
    -webkit-box-shadow: 0px 0px 3px #EBF1ED;
    word-wrap: break-word;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0px;
    padding-left: 0px;
}

.contents_navi_item {
    margin-top: 0px;
    margin-bottom: 15px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 3px #EBF1ED;
    -moz-box-shadow: 0px 0px 3px #EBF1ED;
    -webkit-box-shadow: 0px 0px 3px #EBF1ED;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0%;
    padding-left: 0%;
    word-wrap: break-word;
}

#contents_main {
    margin-top: 0px;
    margin-bottom: 10px;
}

.contents_main1 {
    margin-top: 0px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 3px #EBF1ED;
    -moz-box-shadow: 0px 0px 3px #EBF1ED;
    -webkit-box-shadow: 0px 0px 3px #EBF1ED;
    word-wrap: break-word;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0px;
    padding-left: 0px;
}

.aside {
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0%;
    padding-left: 0%;
}

.aside1, .aside2, .aside3 {
    margin-top: 0px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 3px #EBF1ED;
    -moz-box-shadow: 0px 0px 3px #EBF1ED;
    -webkit-box-shadow: 0px 0px 3px #EBF1ED;
    word-wrap: break-word;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0px;
    padding-left: 0px;
}

.aside1 p, .aside2 p, .aside3 p {
    font-size: 0.9em;
    padding: 5px 0px 5px 0px;
}

.aside1 a, .aside2 a, .aside3 a {
    color: #D9BE56;
    margin-left: 0.5em;
    margin-right: 0.1em;
}

#topagetop {
    position: fixed;
    bottom: 40px;
    right: 4px;
    width: 60px;
    height: 60px;
    padding-top: 12px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -box-sizing: border-box;
    border-radius: 30px;
    background-color: #222222;
    opacity: 0.7;
    color: #ffffff;
}

.page_index_menu ul {
    padding-top: 10px;
    display: inline-block;
    width: 100%;
}

.page_index_menu li a {
    font-size: 70%;
    float: left;
    list-style-type: none;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 10px;
    line-height: 2;
    color: #000033;
    background: #dcdcdc;
}

.page_index_menu li a:hover {
    color: #f9f9f9;
    background: #808080;
}

/* 回り込み解除 */
.page_index_menu ul:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    height: 100%;
}

#page-top a.button:hover {
    text-decoration: none;
    background: #999999;
}

#footer {
    background-color: #111111;
}

#footer_inner {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 1%;
    padding-left: 1%;
    word-wrap: break-word;
    color: #ffffff;
}

#footer_main1 ul {
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 15px;
    padding-bottom: 10px;
    margin: 0px;
    list-style: none;
}

#footer_main1 li {
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    color: #FFFFFF;
    font-size: 0.8em;
    line-height: 1.6em;
    text-decoration: none;
}

#footer_main1 li.tel {
    color: #FFFFFF;
    font-size: 0.8em;
}

#footer_main2 ul {
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    margin: 0px;
    list-style: none;
}

#footer_main2 li {
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    color: #FFFFFF;
    font-size: 0.8em;
    line-height: 1.6em;
    text-decoration: none;
}

#footer_main li a {
    color: #FFFFFF;
    text-decoration: none;
    line-height: 1.6em;
}

#copyright {
    width: 100%;
    text-align: center;
}

#copyright small {
    font-size: 0.7em;
}

/* 作品ナビ表示 */
#works_navi {
    box-sizing: border-box;
}

/* 作品ナビ */
.works_navi_item {
    margin-top: 0px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 3px #EBF1ED;
    -moz-box-shadow: 0px 0px 3px #EBF1ED;
    -webkit-box-shadow: 0px 0px 3px #EBF1ED;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0%;
    padding-left: 0%;
    word-wrap: break-word;
}

.works_navi_item div.inner_box h3 span {
    display: inline-block;
    white-space: nowrap;
}

/* 作品 */
#work_item {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 3px #EBF1ED;
    -moz-box-shadow: 0px 0px 3px #EBF1ED;
    -webkit-box-shadow: 0px 0px 3px #EBF1ED;
    word-wrap: break-word;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0px;
    padding-left: 0px;
}

#work_item li.single {
    padding-top: 10px;
    padding-bottom: 20px;
    float: center;
    list-style-type: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#work_item figure {
    margin: 0;
    text-align: center;
}

#work_item img {
    /*width: auto;*/
    /* height: auto; */
    /*
    border: 4px solid #ffffff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);*/

}

#work_item li p {
    text-align: center;
    padding: 0 20px;
    line-height: 1.2;
}

}
#work_item ul:after {
    content: "";
    display: block;
    clear: both;
}

#work_item p {
    text-align: left;
    color: #666666;
}

#work_item figcaption {
    padding-top: 10px;
    padding-bottom: 10px;
}

#work_item figcaption p {
    font-size: 0.9em;
    line-height: 1.4em;
    text-align: center;
}

/* contents_box */
#contents_box {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 3px #EBF1ED;
    -moz-box-shadow: 0px 0px 3px #EBF1ED;
    -webkit-box-shadow: 0px 0px 3px #EBF1ED;
    word-wrap: break-word;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0px;
    padding-left: 0px;
}

.inner_box {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
    /* position: relative; */
}

.contents_navi_item img, .works_navi_item img {
    width: 100%;
    margin-bottom: 10px;
}

.contents_navi_item h3, .contents_main1 h3, .aside1 h3, .aside2 h3, .aside3 h3, .works_navi_item h3, #contents_title h3, .work_item_inner_box h3,
    #contact_information h3, .item_inner_box h3 {
    margin-bottom: 1em;
    padding: 5px 0px 5px 10px;
    font-size: 1em;
    border: 0px solid #808080;
    border-left: 5px solid #808080;
    text-align: left;
}

#contents_title h4, .work_item_inner_box h4 {
    margin-bottom: 1em;
    padding: 5px 0px 5px 16px;
    font-size: 0.9em;
    text-align: left;
}

.contents_navi_item a {
    font-size: 0.9em;
    text-align: left;
}

.navi_menu-lv1_item>a:hover {
    background: #cccccc;
    color: #D9BE56
}

.navi_menu-lv2_item.is-active>a {
    background: #cccccc;
}

.navi_menu-lv2_item>a:hover {
    background: #cccccc;
    color: #D9BE56
}

/* hover時の処理 */
.contents_navi_item a:hover {
    filter: alpha(opacity = 50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    color: #D9BE56
}

.works_navi_item  a:hover {
    filter: alpha(opacity = 50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    color: #000080;
}

.work_item_inner_box, .item_inner_box {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5%;
    margin-right: 5%;
}

/* 最新のお知らせ */
table.news {
    width: 100%;
    font-size: 0.9em;
    color: #666666;
    line-height: 1.6;
}

table.news th{
    width: 15%;
    border-bottom: dotted 1px #e4e4e4;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 15px;
    vertical-align: top;
    font-weight: bold;
}

table.news td {
    width: 75%;
    border-bottom: dotted 1px #e4e4e4;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 20px;
    vertical-align: top;
}

table.news tr:first-child {
    border-top: dotted 1px #e4e4e4;
}

table.news a {
    text-decoration: underline;
    margin-left: 0.3em;
    margin-right: 0.1em;
}

table.news a:hover {
    color: #000080;
}

/* 作品 記事 */
table.work_article {
    width: 90%;
    font-size: 0.9em;
    color: #666666;
    line-height: 1.6em;
    margin: auto;
    /* display: none; */
}

table.work_article th {
    width: 18%;
    border-bottom: dotted 1px #e4e4e4;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 15px;
    vertical-align: top;
    font-weight: bold;
}

table.work_article td {
    width: 72%;
    border-bottom: dotted 1px #e4e4e4;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 20px;
    vertical-align: top;
}

table.work_article tr:first-child {
    border-top: dotted 1px #e4e4e4;
}

.order dl {
    width: 80%;
    border: 1px #e5e5e5 solid;
    text-align: left;
    font-size: 0.9em;
    margin-left: auto;
    margin-right: auto;
}

.order dl dt {
    background-color: #f6f6f6;
    padding: 20px;
    font-size: 0.9em;
    border-bottom: 1px #e5e5e5 solid;
    color: #505050;
}

.order dl dt span {
    padding: 2px;
    margin: 0px;
    background-color: #808080;
    color: #ffffff;
    line-height: 1.7em;
}

.order dl dd {
    background-color: #ffffff;
    padding: 20px;
    font-size: 0.9em;
    line-height: 22px;
}

.order div {
    width: 100%;
    text-align: center;
    margin: 15px 0;
}

.order div p {
    padding: 10px 20px;
    margin: 0 auto !important;
}

#contact_information p {
    text-align: left;
    font-size: 0.9em;
}

#contact_information a {
    vertical-align: bottom;
}

table.company {
    width: 75%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0px 15px;
    font-size: 0.9em;
}

table.company th, table.company td {
    padding: 10px;
}

table.company th {
    background: #808080;
    vertical-align: middle;
    text-align: left;
    width: 20%;
    color: #ffffff;
    font-weight: normal;
}

table.company td {
    background: #f8f8f8;
    width: 80%;
    padding-left: 20px;
}

/* hover時の処理 */
#footer_main a:hover {
    color: #D9BE56;
}

/* ###### 768px以下のスタイル ###### */
@media only screen and (max-width: 768px) {
    #logo {
        float: left;
        width: 85%;
    }
    #logo img {
        width: 230px;
    }
    #header_side_menu {
        float: left;
        width: 15%;
    }
    #header_side_menu:after {
        content: "";
        display: block;
        clear: both;
    }
    #header_inner:after {
        content: "";
        display: block;
        clear: both;
    }
    #header_side_menu1 {
        width: 100%;
    }
    #header_side_menu2 {
        width: 100%;
    }
    #language_switch {
        width: 100%;
        text-align: centert;
    }
    #language_switch img {
        width: 38px;
        padding-left: 1%;
        padding-right: 1%;
        margin-right: 1%;
    }
    #navi {
        float: right;
        width: 100%;
    }
    #header_side_menu:after {
        content: "";
        display: block;
        clear: both;
    }
    #header:after {
        content: "";
        display: block;
        clear: both;
    }
    #navi_switch {
        cursor: pointer;
        display: inline-block;
    }
    #navi_menu {
        display: none;
        position: absolute;
        left: 0;
    }
    .navi_menu-lv1_item {
        display: block;
        width: 100%;
    }
    .navi_menu-lv1_item>a {
        display: block;
        height: auto;
        padding: 5px 0px 5px 5px;
        text-align: left;
    }
    .navi_menu-lv1_itemInner {
        position: relative;
        display: block;
        -webkit-transform: none;
        transform: none;
    }
    .navi_menu-lv2_wrap {
        display: none;
        background: #ffffff;
    }
    .navi_menu-lv2_item {
        width: 100%;
    }
    .navi_menu-lv2_item {
        display: block;
        width: 100%;
    }
    .navi_menu-lv2_item>a {
        height: auto;
        text-align: left;
        padding: 5px 0px 5px 45px;
        width: 100%;
        display: block;
        background-color: #fefefe;
    }

    /* contents_sub_navi_itemを横に2つ並べる設定 */
    #contents_navi:after {
        content: "";
        display: block;
        clear: both
    }
    /* contents_navi_itemを横に2つ並べる設定 */
    #contents_sub_navi:after {
        content: "";
        display: block;
        clear: both
    }
    .contents_navi_item {
        float: left;
        width: 49%;
        margin-left: 2%;
    }
    .contents_navi_item:nth-child(2n+1) {
        margin-left: 0%;
        clear: both;
    }

    /* works_navi_itemを横に2つ並べる設定 */
    #works_navi:after {
        content: "";
        display: block;
        clear: both
    }
    .works_navi_item {
        float: left;
        width: 49%;
        margin-left: 2%;
    }
    .works_navi_item:nth-child(2n+1) {
        margin-left: 0%;
        clear: both;
    }
    #work_item ul.single {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    #work_item ul.single li {
        width: 100%;
    }
    #work_item  ul.double {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    #work_item ul.double li {
        width: 100%;
    }
}

/* ###### 320px以下のスタイル ###### */
@media screen and (min-width : 0px) and (max-width : 320px) {
    #work_item ul.single {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    #work_item ul.double {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    #work_item img {
        /* width: 90%;*/
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .order dl {
        width: 90%;
    }
    table.company {

    }
    table.company th {
        background: #808080;
        vertical-align: middle;
        text-align: left;
        width: 12%;
        color: #ffffff;
        font-weight: normal;
    }
    table.company td {
        background: #f8f8f8;
        width: 88%;
        padding-left: 10px;
    }
}

@media screen and (min-width : 321px) and (max-width : 599px) {
    #work_item ul.single {
        /* width: 80%; */
        margin-left: auto;
        margin-right: auto;
    }
    #work_item ul.double {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    #work_item img {
        /*width: 90%; */
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .order dl {
        width: 90%;
    }
    table.company {

    }
    table.company th {
        background: #808080;
        vertical-align: middle;
        text-align: left;
        width: 12%;
        color: #ffffff;
        font-weight: normal;
    }
    table.company td {
        background: #f8f8f8;
        width: 88%;
        padding-left: 10px;
    }
}

/* ###### 600px以上のスタイル ###### */
@media screen and ( min-width : 600px) {
    #work_item ul.single {
        /* width: 50%; */
        margin-left: auto;
        margin-right: auto;
    }
    #work_item ul.single li {
        width: 100%;
    }
    #work_item  ul.double {
        display: inline-block;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    #work_item ul.double li {
        float: left;
        width: 50%;
    }
    #work_item img {
        /*width: 90%;*/
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ###### 768px以上のPC以上用スタイル ###### */
@media screen and ( min-width : 768px) {
    #work_item  ul.double {
        display: inline-block;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    #work_item ul.double li {
        float: left;
        width: 50%;
    }
    #work_item ul.single {
        /*  width: 40%; */
        margin-left: auto;
        margin-right: auto;
    }
    #work_item ul.single li {
        width: 100%;
    }

    /* logoとside menuを横に並べる設定 */
    #logo {
        float: left;
        width: 30%;
    }
    #header_side_menu {
        float: left;
        width: 70%;
    }
    #header_side_menu:after {
        content: "";
        display: block;
        clear: both;
    }
    #header_inner:after {
        content: "";
        display: block;
        clear: both;
    }
    #header_side_menu1 {
        width: 100%;
    }
    #header_side_menu2 {
        width: 100%;
    }
    #language_switch {
        width: 100%;
        text-align: right;
    }
    #language_switch img {
        margin-right: 2%;
    }
    #navi {
        width: 100%;
    }
    #navi_menu li {
        display: block;
        float: left;
        margin: 0;
        box-sizing: border-box;
    }
    #navi_switch {
        display: none;
    }
    #navi_menu {
        position: relative;
        width: 100%;
        background: #ffffff;
    }
    .navi_menu-lv1 {
        max-width: 1000px;
        margin: 0 auto;
    }
    .navi_menu-lv1:before, .navi_menu-lv1:after {
        content: "";
        display: table;
    }
    .navi_menu-lv1:after {
        clear: both;
    }
    .navi_menu-lv1_item {
        width: 19%;
        position: relative;
        float: left;
        box-sizing: border-box;
    }
    .navi_menu-lv1_item.long_item {
        width: 31%;
        /* position: relative; */
        float: left;
        box-sizing: border-box;
    }
    .navi_menu-lv1_item>a {
        display: block;
        padding: 0px 0px 0px 0px;
        color: #333333;
        text-align: center;
    }
    .navi_menu-lv1_item>a.open {
        background: #cccccc;
    }
    .navi_menu-lv1_item.is-active>a {
        background: #cccccc;
    }
    .navi_menu-lv1_itemInner {
        padding: 5px 0px 5px 0px;
        display: block;
    }
    .navi_menu-lv1_break {
        display: inline-block;
        white-space: nowrap;
    }
    .navi_menu-lv2_wrap {
        display: none;
        position: absolute;
        width: 100%;
        background: #ffffff;
    }
    .navi_menu-lv2 {

    }
    .navi_menu-lv2_item {
        box-sizing: border-box;
        width: 100%;
    }
    .navi_menu-lv2_item>a {
        display: block;
        padding: 10px 5px;
        color: #333333;
        text-align: center;
    }

    /* contents_navi_itemを横に4つ並べる設定 */
    #contents_navi:after {
        content: "";
        display: block;
        clear: both
    }
    .contents_navi_item {
        float: left;
        width: 23.5%;
        margin-left: 2%;
    }
    .contents_navi_item:nth-child(4n+1) {
        margin-left: 0%;
    }

    /* contents_main1とasideを横に並べる設定 */
    #contents_main:after {
        content: "";
        display: block;
        clear: both;
    }
    .contents_main1 {
        float: left;
        width: 74.5%;
    }
    .aside {
        float: left;
        width: 23.5%;
        margin-left: 2%;
    }

    /* footer_main1とfooter_main2を横に並べる設定 */
    #footer_main:after {
        content: "";
        display: block;
        clear: both;
    }
    #footer_main1 {
        float: left;
        width: 40%;
        text-align: left;
    }
    #footer_main2 {
        float: left;
        width: 60%;
        text-align: left;
    }

    /* works_navi_itemを横に4つ並べる設定 */
    #works_navi:after {
        content: "";
        display: block;
        clear: both
    }
    .works_navi_item {
        float: left;
        width: 23.5%;
        margin-left: 2%;
    }
    .works_navi_item:nth-child(4n+1) {
        margin-left: 0%;
    }
}

/* 980px以上 */
@media screen and ( min-width : 980px) {
    /* header contents footer copy rightの横幅を固定 */
    #header_inner, #contents_inner, #footer_inner, #copyright {
        /* width: 980px; */
        width: 940px;
        margin-left: auto;
        margin-right: auto;
        z-index: -2;
    }
}

/* 1920px以上 */
@media screen and ( min-width : 1920px) {
    /* header contents footer copy rightの横幅を固定 */
    #header_inner, #contents_inner, #footer_inner, #copyright {
        width: 980px;
        margin-left: auto;
        margin-right: auto;
    }
    /* main_visual_innerの横幅を固定 */
    #main_visual_inner {
        width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
}