@charset "utf-8";
/* Media Queries for PC */
/* min-width: 801px */

main {
	max-width: 1172px;
    margin: 0 auto;
}

/* ------------------------ sidebar */
#sidebar {
    float: left;
    background: #231762;
    width: 33%;
    height: auto;
    padding: 12px 0 0;
}

/* 写真+文章部分　*/
#sidebar .article {
    color: #fff;
    margin: 0 16px 16px;
}
#sidebar .article h2 {
    font-size: 116%;
    margin: 0 0 8px;
}
#sidebar .article dl { width: 100%; }
#sidebar .article dt { margin: 0 0 10px; }
#sidebar .article dd {
    font-size: 85%;
    line-height: 1.6;
    text-align: left;
}

/* クリーム地内 */
#sidebar .nav {
    background: #fbfaf5;
    padding: 12px 14px;
    margin: 0 16px 16px;
}
#sidebar .nav h3 {
    color: #231762;
    line-height: 1.4;
    border-bottom: 1px #231762 dotted;
    padding: 0 0 4px;
    margin: 0 0 12px;
}
#sidebar .nav h3 img { display: none; }
#sidebar .nav ul {
    margin: 0 0 16px;
}
#sidebar .nav ul li {
    font-size: 93%;
    line-height: 1.2;
    margin: 0 0 8px;
}
#sidebar .nav p {
    font-size: 93%;
    line-height: 1.6;
}

/* ------------------------------------------------ contents ( main contents ) */
#contents {
    width: 66%;
    float: right;
}

.static-page { margin:0 0 20px; }

#contents .static-page > h1 {
    color: #fff;
    font-size: 123.1%;
    background: #231762;
    padding: 16px 20px;
    margin: 0 0 20px;
}

#contents .static-page > h2 {
    background: #231762;
    padding: 0 0 0 20px;
    margin: 0 0 18px;
}
#contents .static-page > h2 span {
    display: block;
    background: #fff;
    font-size: 123.1%;
    padding: 12px 0 12px 16px;
}

/* 見出し下の太字文章 */
#contents .static-page > p {
    line-height: 1.6;
    margin: 0 0 18px;
}
.boldweight { font-weight: bold; }

/* リスト */
#contents .static-page > ul {
    font-size: 93%;
    line-height: 1.6;
    list-style-position: outside;
    margin: 0 0 18px 1.5em;
}
#contents .static-page > ul li {
    margin: 0 0 12px;
}
ul.decimal { list-style-type:decimal; }
ul.disc { list-style-type:disc; }

/* 商号のリスト */
#contents .static-page > dl {
    margin: 0 0 16px;
}
#contents .static-page > dl dt {
    background: #ddd;
    padding: 0 0 0 16px;
    margin: 0 0 8px;
}
#contents .static-page > dl dt span {
    display: block;
    background: #fff;
    font-size: 108%;
    font-weight: bold;
    padding: 4px 0 4px 12px;
}
#contents .static-page > dl dd {
    font-size: 93%;
    line-height: 1.6;
    margin: 0 0 16px 28px;
}

/* QA */
#contents .static-page .roundbox {
    background: #fff;
    border:1px #ccc solid;
    padding:12px 16px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
dl.qalist {
    width:100%;
}
dl.qalist dt, dl.qalist dd {
    display:table;
    width:100%;
    margin:0 0 8px;
}
dl.qalist dt span, dl.qalist dd span {
    display:table-cell;
    vertical-align:middle;
}
dl.qalist dt {
    color:#006598;
}
dl.qalist dt span.mark, dl.qalist dd span.mark {
    width:26px;
}
dl.qalist dt span:last-child, dl.qalist dd span:last-child {
    line-height: 1.6;
    padding: 0 0 0 1em;
}
dl.qalist dd span:last-child {
    font-size: 93%;
    padding: 0 0 0 1em;
}
.bottom-border {
    border-bottom:1px #ccc dotted;
    padding:0 0 8px;
    margin:0 0 12px;
}
/* QA タブ切替追加 */
#container #contents section.static-page div.tab > p {
    width:180px;
    height:50px;
    float:left;
}
#container #contents section.static-page div.tab > p a {
    font-size: 125%;
    margin-right: 1px;
    display: block;
    background: #ccc;
    line-height:50px;
    text-align: center;
}
#container #contents section.static-page div.tab > p a.selected {
    background: #eee;
    color:#333;
    cursor:default;
}
#container #contents section.static-page div.tab > p a.selected:hover {
    opacity: 1.0;
}
#container #contents section.static-page div.panel {
    clear:both;
    background: #fff;
    padding:0;
    margin-bottom: 20px;
}
#container #contents section.static-page div.panel > div{
    padding:15px;
    color:#333;
}
#container #contents section.static-page div.panel div h2 {
    background: #231762;
    padding: 0 0 0 20px;
    margin: 0 0 18px;
    border: 1px solid #231762;
}
#container #contents section.static-page div.panel div h2 span {
    display: block;
    background: #fff;
    font-size: 123.1%;
    padding: 12px 0 12px 16px;
}

/* table */
.table-section dl {
    display:table;
    width:100%;
    border-top:1px #ccc solid;
    border-right:1px #ccc solid;
    border-left:1px #ccc solid;
}
.table-section dl.last-item { border-bottom:1px #ccc solid; }
.table-section dl dt,
.table-section dl dd {
    display:table-cell;
    line-height: 1.6;
    font-size: 93%;
    vertical-align:middle;
    padding:10px;
}
.table-section dl dt {
    width:8em;
    border-right:1px #ccc solid;
    text-align:center;
}

.bc01 { background:#FFFFFF; }
.bc02 { background:#F5F5F5; }
.bc03 { background:#EEEEEE; }
.bc04 { background:#E8E8E8; }
.bc05 { background:#E0E0E0; }

/* table2 */
.table-section2 dl {
    display:table;
    width:80%;
    border-top:1px #ccc solid;
    border-right:1px #ccc solid;
    border-left:1px #ccc solid;
}
.table-section2 dl.last-item { border-bottom:1px #ccc solid; }
.table-section2 dl dt,
.table-section2 dl dd {
    display:table-cell;
    line-height: 1.6;
    font-size: 93%;
    vertical-align: middle;
    padding: 10px;
}
.table-section2 dl dt {
    width: 60%;
    border-right: 1px #ccc solid;
    text-align: left;
}

/* submit */
.button-area {
    text-align: center;
}

.button-area a {
    display:inline-block;
    *display:inline;
    *zoom:1;
    width: 78%;
    color: #fff;
    padding: 10px;
}

.text-red {
    color: #231762;
}

dl.guide {
    width:100%;
}
dl.guide dt, dl.guide dd {
    display:table;
    width:100%;
    margin:0 0 8px;
}
dl.guide dt span, dl.guidet dd span {
    display:table-cell;
    vertical-align:top;
}
dl.guide dt span.mark, dl.guide dd span.mark {
    width:115px;
}
dl.guide dt span:last-child, dl.guide dd span:last-child {
    line-height: 1.6;
    padding: 0 0 0 1em;
}
dl.guide dd span:last-child {
    font-size: 93%;
    padding: 0 0 0 1em;
}
.bottom-border {
    border-bottom:1px #ccc dotted;
    padding:0 0 8px;
    margin:0 0 12px;
}

@media (max-width: 768px) {
    main {
        max-width: 100%;
    }

    #sidebar, #contents {
        width: 100%;
    }
}