/*
Theme Name: 白銀
Theme URI: http://www.hakugin.co.jp/
Author: 白銀本舗 （株）杉本利兵衛本店
Author URI: http://www.hakugin.co.jp/
Description: 白銀ウェブサイト2024年版
Version: 1.0
*/

/*================================================
 *  CSSリセット
 ================================================*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-weight: normal;
}

body {
    line-height: 1
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote: before,
blockquote: after,
q: before,
q: after {
    content: none
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

del {
    text-decoration: line-through
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

input,
select {
    vertical-align: middle
}

/*================================================
 *  共通
 ================================================*/
body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    /*font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;*/
    font-size: 14px;
    line-height: 1.5714;
    color: #000000;
    position: relative;
}

a {
    color: #000000;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    outline: none;
}

a:hover {
    color: #1D4E7F;
    text-decoration: underline;
}

a img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transitioaan: .3s ease-in-out;
}

a:hover img {
    opacity: .7;
}

br {
    letter-spacing: normal;
}

h2 {}

p {
    line-height: 1.75;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

hr {
    height: 0;
    margin: 0 0 50px 0;
    border: 5px solid #000000;
}

.container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.spbr {
    display: none;
}

@media only screen and (max-width: 767px) {
    .spbr {
        display: inline;
    }
}

/*================================================
 *  ヘッダー
 ================================================*/

.home header,
.page-home header {
    width: 100%;
    height: 800px;
    background: url(images/bgimgTop.jpg) top center no-repeat;
    background-size: cover;
}

.home header .companylogo,
.page-home .companylogo {
    width: 100%;
    height: 150px;
    background: url(images/bgHeaderTilte.png) top center no-repeat;
    background-size: 100% 150px;
}

header .container {
    position: relative;
}

.home header .companylogo .container #badge,
.page-home header .companylogo .container #badge {
    position: absolute;
    width: 277px;
    height: 139px;
    top: 0;
    left: 0;
    background: url(images/HeaderBadge2024.png) top center no-repeat;
    background-size: contain;
    text-indent: -9999px;
}

.home header .companylogo .container h1,
.page-home header .companylogo .container h1 {
    width: 278px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
}

.home header .companylogo .container h1 img,
.page-home header .companylogo .container h1 img {
    width: 278px;
    height: 70px;
}

#mainVisual {
    height: 650px;
    overflow: hidden;
}

#message {
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    font-size: 1.5em;
    line-height: 2.285;
    color: #000000;
    text-align: center;
    margin-top: 200px;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

    .home header,
    .page-home header {
        width: 100%;
        height: 640px;
        background: url(images/bgimgTop.jpg) top center no-repeat;
        background-size: cover;
    }

    #mainVisual {
        height: 510px;
        overflow: hidden;
    }

    .home header .companylogo .container #badge,
    .page-home header .companylogo .container #badge {
        position: absolute;
        width: 222px;
        height: 112px;
        top: 0;
        left: 0;
        background: url(images/HeaderBadge2024.png) top center no-repeat;
        background-size: contain;
        text-indent: -9999px;
    }

    #message {
        font-size: 1.285em;
        line-height: 2.285;
        color: #FFFFFF;
        text-align: center;
        margin-top: 130px;
        font-weight: bold;
    }
}


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

    .home header,
    .page-home header {
        width: 100%;
        height: 480px;
        background: url(images/bgimgTop.jpg) top center no-repeat;
        background-size: cover;
        margin-bottom: 320px;
    }

    .home header .companylogo,
    .page-home header .companylogo {
        width: 100%;
        height: 100px;
        background: url(images/bgHeaderTilte.png) top center no-repeat;
        background-size: 150% 120px;
    }

    .home header .companylogo .container #badge,
    .page-home header .companylogo .container #badge {
        position: absolute;
        width: 240px;
        height: 240px;
        top: 360px;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: url(images/spHeaderBadge2024.png) top center no-repeat;
        background-size: contain;
        text-indent: -9999px;
    }

    .home header .companylogo .container h1,
    .page-home header .companylogo .container h1 {
        width: 160px;
        height: auto;
        margin-left: 10px;
        padding-top: 20px;
    }

    .home header .companylogo .container h1 img,
    .page-home header .companylogo .container h1 img {
        width: 230px;
        height: auto;
    }

    #mainVisual.container {
        position: absolute;
        top: 0;
        width: 100%;
        height: 1120px;
    }

    #mainVisual #message {
        width: 100%;
        color: #000000;
        font-size: 1.0em;
        position: absolute;
        top: 420px;
    }
}


/*================================================
 *  ヘッダー修正
 ================================================*/

#content #mainVisual {
    height: auto;
}

#content #message {
    margin-top: 50px;
    margin-bottom: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    #content #message {
        margin-top: 50px;
        margin-bottom: 50px;
        color: #000000;
        font-weight: normal;
    }
}

@media only screen and (max-width: 767px) {
    #content #mainVisual.container {
        position: inherit;
        top: 0;
        width: 100%;
        height: auto;
    }

    #content #message {
        margin-top: 200px;
        margin-bottom: 0px;
    }
}

/*================================================
 *  グローバルナビゲーション
 ================================================*/

nav {
    position: absolute;
    bottom: 30px;
    height: 40px;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
}

nav li {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    font-size: 1.12em;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
}

nav li:first-child {
    border-left: none;
}

nav li a {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    height: 40px;
    line-height: 40px;
    letter-spacing: -0.02em;
    padding-left: 12px;
    padding-right: 12px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

nav li a:hover {
    color: #D2B48C;
    text-decoration: none;
}

.cd-nav-trigger {
    display: none;
}

.navigation-is-open main {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

nav ul li:hover {
    position: relative;
}

nav ul li:hover>ul {
    display: block
}

/* 2段目 */
nav .navbox ul {
    box-sizing: border-box;
    width: 270px;
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 500;
    padding-top: 5px;
}

.navbox ul li {
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
    padding: 0px;
    text-align: center;
    background: rgba(36, 25, 22, 0.7);
    border-top: 1px solid #573F3A;
    font-size: 1.0em;
}

nav .navbox ul li:last-child {
    border-bottom: none;
}

nav .navbox ul li a {
    box-sizing: border-box;
    display: flex;
    display: -webkit-flex;
    display: -webkit-box;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-pack: center;
    align-items: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    text-align: center;
    height: 40px;
    line-height: 1.2;
    text-decoration: none;
    vertical-align: middle;
    color: #FFF;
    text-align: center;
    background-color: rgba(36, 25, 22, 0.7);
}

.navbox ul li a:hover {
    text-decoration: none;
    background: #D2B48C;
    color: #241915;
}

/* 3段目 */
nav .navbox ul ul {
    box-sizing: border-box;
    width: 210px;
    display: none;
    position: absolute;
    top: -6px;
    left: 270px;
    z-index: 500;
    padding-top: 5px;
}

nav .navbox ul ul.leftmenu {
    left: -210px;
}


#content nav {
    position: relative;
    top: 0px;
    height: 40px;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
    padding: 10px 0;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
}

#content nav li {
    border-left: 1px solid rgba(0, 0, 0, 0.5);
}

#content nav li a {
    color: #000000;
}

#content nav li:first-child {
    border-left: none;
}


@media only screen and (min-width: 768px) and (max-width: 1023px) {
    nav li {
        font-size: 1.0em;
    }

    nav li a {
        padding-left: 13px;
        padding-right: 13px;
    }
}

@media screen and (max-width:767px) {
    nav {
        position: relative;
        bottom: auto;
        height: auto;
    }

    nav li {
        display: inherit;
        margin-left: 0px;
        border-left: none;
    }

    #content nav li a {
        color: #FFF;
    }

    .cd-nav-trigger {
        display: block;
        position: absolute;
        z-index: 2000;
        right: 50%;
        top: 0px;
        height: 47px;
        width: 90px;
        background: url("images/navicon_open.png") center center no-repeat;
        background-size: contain;
        text-indent: -9999px;
        transform: translateX(50%);
    }

    .navigation-is-open .cd-nav-trigger {
        background: url("images/navicon_close.png") center center no-repeat;
        background-size: cover;
        height: 47px;
        width: 90px;
    }

    .cd-nav {
        position: fixed;
        z-index: 1500;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #241916;
        visibility: hidden;
        -webkit-transition: visibility 0s 0.5s;
        -moz-transition: visibility 0s 0.5s;
        transition: visibility 0s 0.5s;
        overflow: hidden;
    }

    .cd-nav .cd-navigation-wrapper {
        /* all navigation content */
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20px 10% 20px;
        /* Force Hardware Acceleration in WebKit */
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateX(50%);
        -moz-transform: translateX(50%);
        -ms-transform: translateX(50%);
        -o-transform: translateX(50%);
        transform: translateX(50%);
        -webkit-transition: -webkit-transform 0.5s;
        -moz-transition: -moz-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
        -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
        transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
    }

    .cd-nav .cd-half-block {
        padding-bottom: 50px;
    }

    .navigation-is-open .cd-nav {
        visibility: visible;
        -webkit-transition: visibility 0s 0s;
        -moz-transition: visibility 0s 0s;
        transition: visibility 0s 0s;
    }

    .navigation-is-open .cd-nav .cd-navigation-wrapper {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: -webkit-transform 0.5s;
        -moz-transition: -moz-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
        -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
        transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
    }

    .cd-nav .cd-primary-nav {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .cd-nav .cd-primary-nav li {
        display: inherit;
        margin: 0 0 0 0;
        padding: 1em 1em 1em 0;
        border-bottom: 1px solid #FFF;
    }

    .cd-nav .cd-primary-nav a {
        font-size: 1.16em;
        color: rgba(255, 255, 255, 1);
        display: inline-block;
    }

    .cd-nav .cd-primary-nav a.selected {
        color: #ffffff;
    }

    .no-touch .cd-nav .cd-primary-nav a:hover {
        color: rgba(255, 255, 255, 0.5);
    }

    .cd-nav .cd-contact-info {
        margin-top: 80px;
    }

    .cd-nav .cd-contact-info li {
        margin-bottom: 1.16em;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.3);
    }

    .no-js main {
        height: auto;
        overflow: visible;
    }

    .no-js .cd-nav {
        position: static;
        visibility: visible;
    }

    .no-js .cd-nav .cd-navigation-wrapper {
        height: auto;
        overflow: visible;
        padding: 100px 5%;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    nav .navbox ul {
        box-sizing: border-box;
        display: inherit;
        position: relative;
        z-index: 0;
        padding-top: 5px;
        padding-left: 10%;
    }

    .navbox ul li {
        box-sizing: border-box;
        margin-left: 0;
        padding: 0px;
        text-align: left;
        background-color: none;
        border-top: none;
        font-size: 1.0em;
    }

    nav .navbox ul li a {
        box-sizing: border-box;
        display: block;
        text-align: left;
        height: auto;
        line-height: 1.2;
        text-decoration: none;
        vertical-align: middle;
        color: #FFF;
        background-color: none;
    }

    /* 3段目 */
    nav .navbox ul ul {
        box-sizing: border-box;
        display: block;
        position: relative;
        top: 0px;
        left: 0px;
        z-index: 500;
        padding-top: 0px;
    }

    nav .navbox ul ul.leftmenu {
        left: 0px;
    }
}

.home .lang-navi {
    position: absolute;
    right: 0;
    top: 20px;
}

.page #pgHeader .lang-navi {
    position: absolute;
    right: 0;
    top: 30px;
}

.single #pgHeader .lang-navi,
.page-information #pgHeader .lang-navi,
.archive #pgHeader .lang-navi {
    position: absolute;
    right: 0;
    top: 30px;
}

.page #pgHeader .container {
    max-width: 1224px;
    width: calc(100% - 180px);
    padding-right: 180px;
    box-sizing: border-box;
}

.single #pgHeader .container,
.page-information #pgHeader .container,
.archive #pgHeader .container {
    max-width: 1224px;
    width: calc(100% - 180px);
    padding-right: 180px;
    box-sizing: border-box;
}

.lang-navi ul {
    display: flex;
}

.lang-navi ul li {}

.lang-navi ul li a {
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    display: block;
    box-sizing: border-box;
    font-size: 1em;
    letter-spacing: 0.02em;
    padding: 0 1em;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    text-align: center;
}

.lang-navi ul li a:hover {
    color: #D2B48C;
    text-decoration: none;
}

.lang-navi ul li:first-of-type {
    position: relative;
    padding-right: 0.25em;
}

.lang-navi ul li:first-of-type::after {
    content: "/";
    position: absolute;
    top: 0;
    right: 0;
}

@media screen and (max-width:767px) {
    .page #pgHeader .container {
        width: 100%;
        padding-right: 0px;
    }

    .single #pgHeader .container,
    .page-information #pgHeader .container,
    .archive #pgHeader .container {
        width: 100%;
        padding-right: 0px;
    }

    .page #pgHeader .lang-navi {
        position: absolute;
        right: 0px;
        top: 20px;
    }

    .single #pgHeader .lang-navi,
    .page-information #pgHeader .lang-navi,
    .archive #pgHeader .container {
        position: absolute;
        right: 0px;
        top: 20px;
    }
}

/*================================================
 *  トップページ 
 ================================================*/

.contentHeader {
    max-width: 1024px;
    height: 80px;
    margin: 0 auto 25px auto;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    overflow: hidden;
}

.contentHeader h2 {
    width: 180px;
    height: 60px;
    background: url(images/bgContentTitle.png) top center no-repeat;
    background-size: contain;
    text-align: center;
    font-size: 1.285em;
    padding-top: 18px;
    float: left;
    color: #FFFFFF;
}

.contentHeader p {
    padding-top: 20px;
    padding-left: 192px;
}

.contentHeader p a::after {
    content: " >";
}

@media only screen and (max-width: 767px) {
    .contentHeader {
        height: 150px;
        margin: 0 0 25px 0;
    }

    .contentHeader h2 {
        width: 90px;
        height: 150px;
        background: url(images/spbgContentTitle.png) center left no-repeat;
        background-size: contain;
        text-align: left;
        font-size: 1.285em;
        line-height: 150px;
        padding-top: 0px;
        padding-left: 10px;
        float: left;
        color: #FFFFFF;
    }

    .contentHeader p {
        padding-top: 63px;
        padding-left: 120px;
    }
}

/*================================================
 *  #productContent
 ================================================*/

#productContent {
    padding-bottom: 65px;
}

.bx-wrapper {
    height: 300px;
    max-width: 100% !important;
}

.product-item {
    width: 100%;
}

.product-item li {
    border-right: 1px solid #DDDDDD;
    width: 140px;
}

.product-item a {
    width: 120px;
    height: 300px;
    display: block;
    margin: 0 auto;
}

.product-item a:hover {
    text-decoration: none;
}

.product-item img {
    width: 120px;
    height: 300px;
}

@media only screen and (max-width: 767px) {
    #productContent {
        padding-bottom: 35px;
    }

    .bx-wrapper {
        height: 200px;
        max-width: 100% !important;
    }

    .product-item li {
        width: 100px;
    }

    .product-item a {
        width: 80px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .product-item img {
        width: 800px;
        height: auto;
    }
}


/*================================================
 *  #specialContent
 ================================================*/

#specialContent {
    width: 100%;
    height: 300px;
    background: url(images/bgimgSpecial.jpg) center center no-repeat;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#specialContent .contentTitle {
    width: 540px;
    height: 130px;
    /*margin-left: auto;
    margin-right: auto;*/
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

#specialContent .contentTitle p {
    margin-top: 40px;
    margin-bottom: 10px;
    line-height: 1;
}

#specialContent .contentTitle p .spbr {
    display: none;
}

#specialContent .contentTitle h3 {
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    font-size: 2.285em;
    line-height: 1;
}

@media only screen and (max-width: 767px) {
    #specialContent .contentTitle {
        width: 260px;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
    }

    #specialContent .contentTitle p {
        margin-top: 40px;
        margin-bottom: 10px;
        line-height: 1.35;
    }

    #specialContent .contentTitle p .spbr {
        display: inline;
    }

    #specialContent .contentTitle h3 {
        line-height: 1.35;
    }
}

/*================================================
 *  #pickupContent
 ================================================*/

#pickupContent {
    width: 100%;
    padding: 110px 0;
    background-image: url(images/bgimg.jpg);
}

#pickupContent ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#pickupContent li {
    width: 320px;
    height: 320px;
    background-color: #000000;
    margin: 10px;
}

#pickupContent li a {
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: .3s ease-in-out;
    transitioaan: .3s ease-in-out;
}

#pickupContent li a:hover {
    color: #D2B48C;
    opacity: 0.7;
    text-decoration: none;
}

#pickupContent li p {
    margin-bottom: 10px;
    line-height: 1;
    font-size: 1.071em;
}

#pickupContent li h3 {
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    font-size: 2.285em;
    line-height: 1;
}

#pickupContent #pickup-hakugin a {
    background: url(images/bgPickupHakugin.png) center center no-repeat;
}

#pickupContent #pickup-kodawari a {
    background: url(images/bgPickupKodawari.png) center center no-repeat;
}

#pickupContent #pickup-yakinuki a {
    background: url(images/bgPickupYakinuki.png) center center no-repeat;
}

#pickupContent .banner-gokaku {
    padding-top: 60px;
    text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    #pickupContent li {
        width: 236px;
        height: 236px;
        background-color: #000000;
        margin: 10px;
    }

}


@media only screen and (max-width: 767px) {
    #pickupContent {
        padding: 70px 0;
    }

    #pickupContent li {
        height: 150px;
    }

}


/*================================================
 *  #newsContent
 ================================================*/


#newsContent {
    padding-bottom: 50px;
    background-image: url(images/bgimg.jpg);
    overflow: hidden;
}

#newsList {
    width: 47%;
    float: left;
}

.contentHeader .linkPages {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

.newsitem {
    padding: 10px 0;
    border-bottom: 1px solid #999999;
    overflow: hidden;
}

.newsitem .pubdate {
    width: calc(30% - 1em);
    float: left;
    padding-left: 1em;
}

.newsitem .summarybody {
    width: calc(70% - 1em);
    float: right;
    padding-left: 1em;
}

.newsitem .summarybody h3 {
    /*font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;*/
    margin-bottom: 0.5em;
    font-size: 1.142em;
}

.newsitem .summarybody p {
    font-size: 0.875em;
}

#fbContent {
    width: 47%;
    float: right;
}

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {
    width: 100% !important;
}

@media only screen and (max-width: 767px) {
    #newsContent {
        padding-top: 25px;
    }

    #newsList {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
        float: none;
    }

    .newsitem {
        padding: 10px 0;
        border-bottom: 1px solid #999999;
        overflow: hidden;
    }

    .newsitem .pubdate {
        width: calc(100% - 1em);
        float: none;
        padding-left: 1em;
    }

    .newsitem .summarybody {
        width: calc(100% - 1em);
        float: none;
        padding-left: 1em;
    }

    .newsitem .summarybody h3 {
        font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
        margin-bottom: 0em;
        font-size: 1.142em;
    }

    .newsitem .summarybody p {
        display: none;
    }

    #fbContent {
        width: 100%;
        float: none;
    }

    .fb_iframe_widget,
    .fb_iframe_widget span,
    .fb_iframe_widget iframe[style] {
        width: 100% !important;
    }

}

/*================================================
 *  #shopContent
 ================================================*/


#shopContent {
    width: 100%;
    height: 300px;
    background: url(images/bgimgShop.jpg) center center no-repeat;
    background-size: cover;
}

#shopContent .contentTitle {
    width: 100%;
    padding-top: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#shopContent .contentTitle a {
    width: 430px;
    height: 94px;
    border: 3px solid #FFFFFF;
    background-image: url(images/bgShopBtn.png);
    display: block;
    color: #FFFFFF;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transitioaan: .3s ease-in-out;
}

#shopContent .contentTitle a:hover {
    color: #D2B48C;
    opacity: 0.7;
    text-decoration: none;
}

#shopContent .contentTitle h3 {
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    font-size: 1.928em;
    line-height: 100px;
}

@media only screen and (max-width: 767px) {
    #shopContent .contentTitle a {
        width: 90%;
    }
}


/*================================================
 *  footer
 ================================================*/


footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 50px 0;
}

footer .companylogo,
#socialIcons,
#footAddress {
    border-right: 1px solid #999999;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
}

footer .companylogo,
#socialIcons {
    width: 289px;
}

footer .companylogo {
    border-left: 1px solid #999999;
}

footer .companylogo img {
    width: 220px;
    height: auto;
    text-align: center;
    /*
    margin-left: auto;
    margin-right: auto;
*/
}

#socialIcons li {
    display: inline-block;
    padding: 10px;
}

#socialIcons a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #000000;
    display: table-cell;
    color: #FFFFFF;
    font-size: 18px;
    vertical-align: middle;
    text-align: center;
}

#socialIcons .facebookicon a {
    background-color: #4267B2;
}

#socialIcons .twittericon a {
    background-color: #000000;
}

#socialIcons .instagramicon a {
    background-color: #B900B4;
}

#socialIcons a:hover {
    background-color: #1D4E7F;
    text-decoration: none;
}

#footAddress {
    width: 442px;
}

#footAddress dt {
    padding-top: 0.5em;
    font-weight: bold;
}

#footAddress dd {
    padding-top: 0.5em;
    line-height: 1.75;
}

@font-face {
    font-family: 'condenseicon';
    src: url('fonts/CONDENSEicon.ttf') format('truetype'), url('fonts/CONDENSEicon.otf') format('opentype'), url('/fonts/CONDENSEicon.woff') format('woff'), url('/fonts/CONDENSEicon.eot') format('embedded-opentype'),
        url('/fonts/CONDENSEicon.eot?#iefix') format('embedded-opentype');
}

#footAddress dd span {
    font-family: 'condenseicon';
    font-size: 18px;
    -ms-font-feature-settings: "normal";
}

address {
    text-align: center;
    margin-top: 45px;
    font-style: normal;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

    footer .companylogo,
    #socialIcons,
    #footAddress {
        width: auto;
        padding: 0 20px;
    }

    footer .companylogo img {
        width: 180px;
        height: auto;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    #socialIcons {
        width: auto;
    }

    #socialIcons li {
        display: inherit;
        padding: 10px 0;
    }

    #footAddress dt {
        width: auto;
        float: none;
        padding-top: 0.5em;
    }

    #footAddress dd {
        padding-top: 0.5em;
        padding-left: 0em;
    }
}

@media only screen and (max-width: 767px) {
    footer .container {
        display: block;
        padding: 50px 0;
    }

    footer .companylogo,
    #socialIcons,
    #footAddress {
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #999999;
        width: 92%;
        padding: 20px 0px;
        margin-left: auto;
        margin-right: auto;
    }

    #socialIcons {
        padding-bottom: 15px;
    }

    #socialIcons li {
        display: inline-block;
        padding: 0px 10px;
    }

    #footAddress dt {
        width: auto;
        float: none;
        padding-top: 0.5em;
    }

    #footAddress dd {
        padding-top: 0.5em;
        padding-left: 0em;
    }
}


/*================================================
 *  ページトップへの戻り
 ================================================*/

.totop {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 100;
    width: 35px;
    height: 35px;
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    line-height: 35px;
    border-radius: 3px;
    z-index: 1000;
}

.totop p {
    line-height: 35px;
}

.totop:hover {
    background-color: #1D4E7F;
}


/*================================================
 *  ページ共通
 ================================================*/


.page #pgHeader {
    width: 100%;
    height: 80px;
    background-color: #FFFFFF;
}

.page header .companylogo {
    width: 61px;
    height: 50px;
    padding-top: 17px;
    padding-left: 20px;
    float: left;
}

.page header .companylogo .container h1 img {
    width: 61px;
    height: 50px;
}

.page nav {
    position: absolute;
    top: 20px;
    left: 110px;
    text-align: left;
    margin: 0;
}

.page nav li a {
    color: #000000;
}

.page nav li a:hover {
    color: #D2B48C;
    text-decoration: none;
}

.page nav li {
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    text-align: left;
    margin: 0;
}

.page nav li:first-child {
    border-left: none;
}

.page h2 {
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    width: 180px;
    height: 60px;
    background: url(images/bgContentTitle.png) top center no-repeat;
    background-size: contain;
    text-align: center;
    font-size: 1.285em;
    padding-top: 18px;
    float: left;
    color: #FFFFFF;
}

.bgcontent {
    padding: 25px 0;
    background-image: url(images/bgimg.jpg);
    overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .page header .companylogo {
        padding-left: 10px;
    }

    .page nav {
        left: 85px;
    }
}

@media only screen and (max-width: 767px) {
    .page #pgHeader {
        height: 60px;
        background-color: #FFFFFF;
        /*background-color: transparent;
        background: url(images/spbgHeaderTilte.png) top center no-repeat;
        background-size: auto 90px;*/
    }

    .page header .companylogo {
        padding-top: 5px;
        padding-left: 10px;
    }

    .page h2 {
        width: 90px;
        height: 150px;
        background: url(images/spbgContentTitle.png) center left no-repeat;
        background-size: contain;
        text-align: left;
        font-size: 1.285em;
        line-height: 150px;
        padding-top: 0px;
        padding-left: 10px;
        float: none;
        color: #FFFFFF;
        position: absolute;
        top: 114px;
    }

    .page #pgTitle {
        position: absolute;
        top: 80px;
        width: 100%;
        height: 190px;
    }

    .page #pgTitle #message {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
    }

    .page nav {
        position: relative;
        top: auto;
        left: 0px;
    }

    .page .cd-nav .cd-primary-nav a {
        display: block;
        text-align: center;
    }
}


/*================================================
 *  page-about
 ================================================*/

.page-about #message {
    margin-top: 0px;
}

.page-about header {
    width: 100%;
    height: 420px;
    background: url(images/headerimages_01.jpg) top center no-repeat;
    background-size: cover;
}

.page-aboutclosed #message {
    clear: both;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    line-height: 2.285;
    color: rgb(255, 255, 255);
    padding-top: 20px;
    padding-bottom: 20px;
    width: 520px;
    font-size: 1.07em;
    text-align: left;
    margin: 0px auto;
}

.page-aboutclosed header {
    width: 100%;
    height: 420px;
    background: url(images/headerimages_01.jpg) top center no-repeat;
    background-size: cover;
}

#greetingContent .container,
#profileContent .container,
#enkakuContent .container {
    max-width: 640px;
    /*font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;*/
    padding: 30px 0 30px 0;
}

.page-about #content dl,
.page-aboutclosed #content dl {
    margin-bottom: 30px;
    font-size: 1.142em;
}

.page-about #content dt,
.page-aboutclosed #content dt {
    width: 6em;
    float: left;
    padding: 20px 0;
}

.page-about #content dd,
.page-aboutclosed #content dd {
    padding: 20px 0 20px 6em;
    border-bottom: 1px solid #999999;
}

#enkakuContent .container h3,
#greetingContent .container h4 {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    padding: 20px 0;
}

#greetingContent .container h4 {
    font-weight: normal;
    padding-bottom: 40px;
}

#greetingContent .container p {
    font-size: 1.142em;
    line-height: 2;
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

#greetingContent .container .pname {
    margin-top: 2em;
    text-align: right;
    font-weight: 1rem;
}

#messageContent #concept {
    clear: both;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    line-height: 2.285;
    color: #000000;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 520px;
    font-size: 1.07em;
    text-align: left;
    margin: 0px auto;
}

/*
#messageContent {
    width: 100%;
    height: auto;
    background: url(images/headerimages_about2020.jpg) top center no-repeat;
    background-size: cover;
}
*/
#messageContent #concept {
    width: 640px;
    padding-bottom: 50px;
    padding: 0 20px 50px 20px;
    box-sizing: border-box;
}

.concept-txt {
    text-align: center;
}

.concept-txt h4 {
    font-size: 1.2em;
    max-width: 270px;
    text-align: center;
    border-bottom: 1px solid #000;
    padding-bottom: 15px;
    margin: 0 auto 25px auto;
}

.concept-txt h3 {
    font-size: 42px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 25px;
}

.concept-txt h3 span {
    font-size: 21px;
}

.concept-txt h5 {
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 5px;
    margin-top: 30px;
}

.concept-syaze {
    margin-bottom: 50px;
}

.concept-syakun {
    margin-bottom: 50px;
}

.photocopyright {
    text-align: right;
    font-size: 10px;
}

.footnote {
    font-size: 12px;
}


@media only screen and (min-width: 768px) and (max-width: 1023px) {

    .page-about header {
        height: 320px;
    }
}

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

    .page-about header {
        height: 270px;
    }

    .page-about #message {
        font-size: 1.285em;
        padding-top: 0px;
    }

    .page-about .bgcontent {
        25px 0;
    }

    .page-about #content dl,
    #greetingContent .container p {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.0em;
    }

    #enkakuContent h3 {
        width: 90px;
        height: 150px;
        background: url(images/spbgContentTitle.png) center left no-repeat;
        background-size: contain;
        text-align: left;
        font-size: 1.285em;
        line-height: 150px;
        padding-top: 0px;
        padding-left: 10px;
        margin-top: -104px;
        float: none;
        color: #FFFFFF;
    }

    #greetingContent h4 {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.5em;
        padding-bottom: 40px;
    }

    #messageContent {
        padding-bottom: 80px;
    }

    #messageContent #message {
        font-size: 1.285em;
        padding-top: 0px;
    }

    #messageContent #pgTitle {
        position: relative;
        top: 80px;
        width: 100%;
        height: auto;
    }

    #messageContent .bgcontent {
        25px 0;
    }

    #messageContent #content dl {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.0em;
    }

    #messageContent #concept {
        width: 100%;
        max-width: 640px;
        padding-bottom: 50px;
    }

    .concept-txt h4 {
        font-size: 16px;
        max-width: 270px;
        text-align: center;
        border-bottom: 1px solid #FFF;
        padding-bottom: 15px;
        margin: 0 auto 25px auto;
    }

    .concept-txt h3 {
        font-size: 27px;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 25px;
    }

    .concept-txt h3 span {
        font-size: 18px;
    }

    .concept-txt h5 {
        font-size: 18px;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 10px;
        margin-top: 30px;
    }

    .concept-txt p {
        font-size: 14px;
    }

    .concept-txt p br {
        display: none;
    }

    .concept-syaze {
        margin-bottom: 50px;
    }

    .concept-syakun {
        margin-bottom: 50px;
    }

    p.photocopyright {
        text-align: right;
        font-size: 9px;
    }

    p.footnote {
        font-size: 12px;
        margin-bottom: 10px;
    }

}


/*================================================
 *  page-products
 ================================================*/


.page-products header,
.page-products-child header {
    width: 100%;
    height: 420px;
    background: url(images/headerimages_03.png) top center no-repeat;
    background-size: cover;
}

.page-products #message,
.page-products-child #message {
    clear: both;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    font-size: 1.5em;
    line-height: 2.285;
    color: #FFFFFF;
    text-align: center;
    padding-top: 60px;
}

#productContent .container {
    padding-top: 30px;
}

#productContent h3 {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    padding: 20px 0;
    text-align: center;
}

.product-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.product-list .item {
    width: 140px;
    margin: 0 10px;
    display: block;
}

.product-list .productImage {
    width: 140px;
    height: auto;
    margin: 0 auto 35px auto;
}

.product-list .productName {
    padding: 35px 20px 0 20px;
    margin: 0 auto 0 auto;
    border-top: 1px solid #CCCCCC;
    text-align: center;
    font-size: 1.142em;
    /*font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;*/
}

.product-list .productName img {
    width: 60px;
    height: auto;
}

.product-list .productName span {
    font-family: "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#productDetailContent .container {
    padding: 40px 0;
    overflow: hidden;
}

#productDetailContent .productimage {
    width: 300px;
    height: auto;
    margin-left: 137px;
    float: left;
}

#productDetailContent .productinfo {
    max-width: 45%;
    float: right;
    margin-right: 50px;
    /*font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;*/
}

.productinfo h3 {
    font-size: 1.5em;
    margin: 1em 0;
}

.productinfo h3 span {
    font-size: 0.76em;
}

.productinfo .spec {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px solid #999999;
}

.productinfo .spec dt {
    width: 6em;
    float: left;
    padding: 0.5em 0;
}

.productinfo .spec dd {
    padding: 0.5em 0 0.5em 6em;
}

.productinfo .nutrition h4 {
    margin-bottom: 1em;
    font-weight: bold;
}

.productinfo .nutrition {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px solid #999999;
}

.productinfo .nutrition table {
    border-collapse: collapse;
    margin-bottom: 0.5em;
    width: 100%;
}

.productinfo .nutrition th {
    padding: 0.5em;
    text-align: center;
    border: 1px solid #CCCCCC;
    background-color: #EFEFEF;
}

.productinfo .nutrition td {
    padding: 0.5em;
    text-align: center;
    border: 1px solid #CCCCCC;
}

.imagegarally {
    clear: both;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.imagegarally img {
    width: 33%;
    height: auto;
}


@media only screen and (min-width: 768px) and (max-width: 1023px) {

    .page-products header,
    .page-products-child header {
        width: 100%;
        height: 320px;
        background: url(images/headerimages_03.png) top center no-repeat;
        background-size: cover;
    }

    .page-products #message,
    .page-products-child #message {
        font-size: 1.285em;
        padding-top: 40px;
    }

    .product-list .item {
        width: 100px;
    }

    .product-list .productImage {
        width: 100px;
        height: auto;
        margin: 0 auto 20px auto;
    }

    .product-list .productName {
        padding: 20px 20px 0 20px;
        margin: 0 auto 0 auto;
        font-size: 1.0em;
    }

    #productDetailContent .productimage {
        width: 30%;
        margin-left: 10%;
    }
}

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

    .page-products header,
    .page-products-child header {
        height: 270px;
    }

    .page-products #message,
    .page-products-child #message {
        font-size: 1.285em;
        padding-top: 40px;
    }

    .page-products #message h3,
    .page-products-child #message h3 {
        font-size: 1.285em;
        margin-bottom: 0em;
    }

    .page-products h2,
    .page-products-child h2 {
        top: 114px;
        z-index: 1000;
    }

    .product-list .item {
        width: 80px;
        margin: 0 10px 30px 10px;
        display: block;
    }

    .product-list .productImage {
        width: 80px;
        height: auto;
        margin: 0 auto 20px auto;
    }

    .product-list .productName {
        padding: 20px 20px 0 20px;
        margin: 0 auto 0 auto;
        border-top: 1px solid #CCCCCC;
        text-align: center;
        font-size: 1.0em;
        font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    }

    #productDetailContent .container {
        padding: 40px 0;
        overflow: hidden;
    }

    #productDetailContent .productimage {
        width: 70%;
        height: auto;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        float: none;
        display: block;
    }

    #productDetailContent .productinfo {
        max-width: 90%;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    .imagegarally {
        clear: both;
        width: 100%;
        display: block;
    }

    .imagegarally img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
}

/*================================================
 *  page-kodawari
 ================================================*/


.page-kodawari header {
    width: 100%;
    height: 420px;
    background: url(images/headerimages_04.png) top center no-repeat;
    background-size: cover;
}

.page-kodawari #message {
    clear: both;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    line-height: 2.285;
    color: #FFFFFF;
    padding-top: 20px;
    width: 640px;
    margin: 0 auto;
    font-size: 1.07em;
    text-align: left;
}

.page-kodawari #message h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

#kodawariContent .container {
    max-width: 860px;
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    padding: 25px 0 10px 0;
    font-size: 1.072em;
}

#kodawariContent .container section {
    position: relative;
    height: 230px;
    margin-bottom: 50px;
}

#kodawariContent .container .largeimg {
    width: 320px;
    height: auto;
}

#kodawariContent .container .tnimg {
    width: 210px;
    height: auto;
    #sozaiContent .contentbody section
}

#kodawariContent .container .stepDesc {
    width: 380px;
    background-color: rgba(255, 255, 255, 0.7);
    color: #000000;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 300;
}

#kodawariContent .container .stepDesc p {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

#kodawariContent #step2 .tnimg,
#kodawariContent #step4 .tnimg,
#kodawariContent #step6 .tnimg,
#kodawariContent #step8 .tnimg {
    position: absolute;
    left: 0;
    z-index: 100;
}

#kodawariContent #step2 .largeimg,
#kodawariContent #step4 .largeimg,
#kodawariContent #step6 .largeimg,
#kodawariContent #step8 .largeimg {
    position: absolute;
    right: 0;
    z-index: 100;
}

#kodawariContent #step1 .tnimg,
#kodawariContent #step3 .tnimg,
#kodawariContent #step5 .tnimg,
#kodawariContent #step7 .tnimg {
    position: absolute;
    right: 0;
    z-index: 100;
}

#kodawariContent #step1 .largeimg,
#kodawariContent #step3 .largeimg,
#kodawariContent #step5 .largeimg,
#kodawariContent #step7 .largeimg {
    position: absolute;
    left: 0;
    z-index: 100;
}

#kodawariContent #step2 .stepDesc,
#kodawariContent #step4 .stepDesc,
#kodawariContent #step6 .stepDesc,
#kodawariContent #step8 .stepDesc {
    background-color: rgba(29, 78, 127, 0.7);
    color: #FFFFFF;
}

#kodawariContent #step1 .stepDesc {
    top: 30px;
}

#kodawariContent #step1 .largeimg {
    top: 0px;
}

#kodawariContent #step1 .tnimg {
    bottom: 0px;
}

#kodawariContent #step2 .stepDesc {
    top: 30px;
}

#kodawariContent #step3 .stepDesc {
    top: 0px;
}

#kodawariContent #step3 .largeimg {
    top: 20px;
}

#kodawariContent #step3 .tnimg {
    bottom: 20px;
}

#kodawariContent #step4 .stepDesc {
    top: 20px;
}

#kodawariContent #step5 .stepDesc {
    top: 20px;
}

#kodawariContent #step5 .tnimg {
    bottom: 0px;
}

#kodawariContent #step6 .stepDesc {
    top: 20px;
}

#kodawariContent #step6 .tnimg {
    bottom: 0px;
}

#kodawariContent #step7 .stepDesc {
    top: 30px;
}

#kodawariContent #step7 .tnimg {
    bottom: 0px;
}

#kodawariContent #step8 .stepDesc {
    top: 20px;
}

#kodawariContent #step8 .tnimg {
    bottom: 0px;
}

#kodawariContent .container .stepDesc h4 {
    font-size: 1.31em;
    margin-bottom: 0.35em;
    font-weight: bold;
}

#sozaiContent .contentHeader {
    max-width: 100% !important;
    height: 420px;
    background: url(images/headerimages_06.png) top center no-repeat;
    background-size: cover;
}

#sozaiContent .contentHeader #message {
    clear: both;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    line-height: 2.285;
    color: #FFFFFF;
    padding-top: 210px;
    width: 640px;
    margin: 0 auto;
    font-size: 1.07em;
    text-align: left;
}

#sozaiContent .contentHeader #message p {
    padding: 0px;
}

#sozaiContent .contentHeader #message h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

#sozaiContent .contentbody {
    padding: 60px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#sozaiContent .contentbody section {
    max-width: 420px;
    margin: 15px;
    padding: 20px;
    display: block;
    background-color: rgba(255, 255, 255);
}

#sozaiContent .contentbody section h4 {
    font-size: 1.31em;
    margin-bottom: 0.5em;
    padding-top: 10px;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    font-size: 1.285em;
    font-weight: bold;
}


@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .page-kodawari header {
        height: 320px;
    }

    .page-kodawari #message {
        padding-top: 5px;
        font-size: 1.0em;
    }

    .page-kodawari #message h3 {
        font-size: 1.285em;
        margin-bottom: 0em;
    }

    #sozaiContent .contentHeader {
        height: 320px;
    }

    #sozaiContent .contentHeader #message {
        clear: both;
        font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
        line-height: 2.285;
        color: #FFFFFF;
        padding-top: 150px;
        width: 640px;
        margin: 0 auto;
        font-size: 1.00em;
        text-align: left;
    }

    #sozaiContent .contentHeader #message h3 {
        font-size: 1.285em;
        margin-bottom: 0em;
    }
}

@media only screen and (max-width: 767px) {
    .page-kodawari .bgcontent {
        padding: 0px 0 0px 0;
    }

    #kodawariContent .container {
        max-width: 860px;
        font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
        padding: 0px 0 10px 0;
        font-size: 1.072em;
    }

    .page-kodawari header {
        height: 520px;
    }

    .page-kodawari #message {
        font-size: 1.285em;
        padding-top: 0px;
    }

    .page-kodawari #message h3 {
        font-size: 1.285em;
        margin-bottom: 0em;
    }

    .page-kodawari h2 {
        top: 364px;
        z-index: 1000;
    }

    #kodawariContent #step2 .tnimg,
    #kodawariContent #step4 .tnimg,
    #kodawariContent #step6 .tnimg,
    #kodawariContent #step8 .tnimg {
        position: relative;
        display: none;
    }

    #kodawariContent #step2 .largeimg,
    #kodawariContent #step4 .largeimg,
    #kodawariContent #step6 .largeimg,
    #kodawariContent #step8 .largeimg {
        position: relative;
        width: 100%;
        z-index: 0;
        top: 0;
    }

    #kodawariContent #step1 .tnimg,
    #kodawariContent #step3 .tnimg,
    #kodawariContent #step5 .tnimg,
    #kodawariContent #step7 .tnimg {
        position: relative;
        display: none;
        top: 0;
    }

    #kodawariContent #step1 .largeimg,
    #kodawariContent #step3 .largeimg,
    #kodawariContent #step5 .largeimg,
    #kodawariContent #step7 .largeimg {
        position: relative;
        width: 100%;
    }

    #kodawariContent #step1 .stepDesc {
        top: 0px;
    }

    #kodawariContent #step1 .largeimg {
        top: 0px;
    }

    #kodawariContent #step2 .stepDesc {
        top: 0px;
    }

    #kodawariContent #step3 .stepDesc {
        top: 0px;
    }

    #kodawariContent #step3 .largeimg {
        top: 0px;
    }

    #kodawariContent #step4 .stepDesc {
        top: 0px;
    }

    #kodawariContent #step5 .stepDesc {
        top: 0px;
    }

    #kodawariContent #step6 .stepDesc {
        top: 0px;
    }

    #kodawariContent #step7 .stepDesc {
        top: 0px;
    }

    #kodawariContent #step8 .stepDesc {
        top: 0px;
    }

    #kodawariContent .container .stepDesc {
        width: 100%;
        height: auto;
        background-color: rgba(255, 255, 255, 0.7);
        margin-left: auto;
        margin-right: auto;
        position: relative;
        z-index: 300;
        padding-left: 0;
        padding-right: 0;
    }

    #kodawariContent .container .stepDesc h4,
    #kodawariContent .container .stepDesc p {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    #kodawariContent .container section {
        position: relative;
        height: auto;
        margin-bottom: 50px;
    }

    #sozaiContent .contentHeader {
        height: 240px;
    }

    #sozaiContent .contentHeader #message {
        width: 90%;
        margin: 0 auto;
        font-size: 1.285em;
        padding-top: 50px;
    }

    #sozaiContent .contentHeader #message h3 {
        font-size: 1.285em;
        margin-bottom: 0em;
    }

    #sozaiContent .contentbody {
        padding: 00px 0 60px 0;
    }
}



/*================================================
 *  page-about-hakugin
 ================================================*/


.page-about-hakugin header {
    width: 100%;
    height: 420px;
    background: url(images/headerimages_02.png) top center no-repeat;
    background-size: cover;
}

.page-about-hakugin #message {
    clear: both;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    line-height: 2.285;
    color: #FFFFFF;
    padding-top: 20px;
    width: 640px;
    margin: 0 auto;
    font-size: 1.07em;
    text-align: left;
}

.page-about-hakugin #message h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

#storyContent .container {
    max-width: 640px;
    /*font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;*/
    padding: 25px 0 10px 0;
    font-size: 1.072em;
}

#storyContent .container p {
    margin-bottom: 2em;
}


@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .page-about-hakugin header {
        height: 320px;
    }
}


@media only screen and (max-width: 767px) {
    .page-about-hakugin header {
        width: 100%;
        height: 270px;
        background: url(images/headerimages_02.png) top center no-repeat;
        background-size: cover;
    }

    .page-about-hakugin #message {
        font-size: 1.285em;
        padding-top: 0px;
    }

    #storyContent .container {
        width: 90%;
        font-size: 1.0em;
        margin-top: 2em;
    }

}


/*================================================
 *  page-shop
 ================================================*/


.page-shop header,
.page-shoplist header {
    width: 100%;
    height: 420px;
    background: url(images/headerimages_05.png) top center no-repeat;
    background-size: cover;
}

.page-shop #message,
.page-shoplist #message {
    clear: both;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    line-height: 2.285;
    color: #FFFFFF;
    padding-top: 20px;
    width: 640px;
    margin: 0 auto;
    font-size: 1.07em;
    text-align: left;
}

.page-shop #message h3,
.page-shoplist #message h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

.shopdata .container {
    max-width: 720px;
    padding: 0 0 0 0;
    font-size: 1.142em;
    overflow: hidden;
}

.container .shopph {
    width: 320px;
    float: left;
}

.container .shoaddress {
    width: 370px;
    float: right;
    padding: 20px 0 0 30px;
}

.container .shoaddress h4 {
    font-size: 1.31em;
    font-weight: bold;
    margin-bottom: 0.5em;
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.shopdata .shopmap,
.shopdata iframe {
    width: 100%;
    height: 420px;
    clear: both;
}

#hontenContent.bgcontent {
    padding: 0;
}

#factoryContent.bg2content {
    background-color: #1D4E7F;
    color: #FFFFFF;
}

.page-shop #shopListBanner {
    width: 100%;
    height: 300px;
    background: url(images/bgimgShop.jpg) center center no-repeat;
    background-size: cover;
}

.page-shop #shopListBanner .contentTitle {
    width: 100%;
    padding-top: 100px;
}

.page-shop #shopListBanner .contentTitle a {
    width: 430px;
    height: 94px;
    border: 3px solid #FFFFFF;
    background-image: url(images/bgShopBtn.png);
    display: block;
    color: #FFFFFF;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: .3s ease-in-out;
    transitioaan: .3s ease-in-out;
}

.page-shop #shopListBanner .contentTitle a:hover {
    color: #FFFFFF;
    opacity: 0.7;
    text-decoration: none;
}

.page-shop #shopListBanner .contentTitle h3 {
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    font-size: 1.928em;
    line-height: 100px;
}

.page-shop #shopListBanner p {
    text-align: center;
    margin-top: 40px;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    font-size: 1.142em;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: black 1px 1px 1px, black -1px 1px 1px, black 1px -1px 1px, black -1px -1px 1px;
}

@media only screen and (max-width: 767px) {
    .page-shop #shopListBanner .contentTitle a {
        width: 90%;
    }
}

.shoplist h3 {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    padding: 50px 0 20px 0;
    text-align: center;
}

.shoplist table {
    width: 100%;
}

.shoplist table th {
    font-weight: bold;
    text-align: center;
    padding: 15px;
    border-bottom: 1px solid #999999;
}

.shoplist table td {
    padding: 15px;
    border-bottom: 1px solid #999999;
}


@media only screen and (min-width: 768px) and (max-width: 1023px) {

    .page-shop header,
    .page-shoplist header {
        height: 320px;
    }

    .page-shop #message,
    .page-shoplist #message {
        padding-top: 5px;
        font-size: 1.00em;
    }

    .page-shop #message h3,
    .page-shoplist #message h3 {
        font-size: 1.285em;
        margin-bottom: 0em;
    }
}


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

    .page-shop header,
    .page-shoplist header {
        height: 340px;
    }

    .page-shop #message,
    .page-shoplist #message {
        font-size: 1.285em;
        padding-top: 0px;
    }

    .page-shop #message h3,
    .page-shoplist #message h3 {
        font-size: 1.285em;
        margin-bottom: 0em;
    }

    .page-shop h2,
    .page-shoplist h2 {
        top: 184px;
        z-index: 1000;
    }

    .shopdata .container {
        font-size: 1.0em;
    }

    .container .shopph {
        width: 100%;
        float: none;
    }

    .container .shoaddress {
        width: 90%;
        float: none;
        padding: 10px 0 30px 0;
        margin-left: auto;
        margin-right: auto;
    }

    .shopdata .shopmap,
    .shopdata iframe {
        width: 100%;
        height: 320px;
        clear: both;
    }

    .page-shop #shopContent p {
        text-align: center;
        margin-top: 20px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
        font-size: 1.142em;
        font-weight: bold;
        color: #FFFFFF;
    }

    #yamaguchiContent {}

    .shoplist iframe {
        height: 420px;
    }

    .listtable {
        overflow: auto;
        /*tableをスクロールさせる*/
        white-space: nowrap;
        /*tableのセル内にある文字の折り返しを禁止*/
    }

    .listtable::-webkit-scrollbar {
        /*tableにスクロールバーを追加*/
        height: 5px;
    }

    .listtable::-webkit-scrollbar-track {
        /*tableにスクロールバーを追加*/
        background: #F1F1F1;
    }

    .listtable::-webkit-scrollbar-thumb {
        /*tableにスクロールバーを追加*/
        background: #BCBCBC;
    }
}


/*================================================
 *  page-contact
 ================================================*/


.page-contact header,
.page-contactform header {
    width: 100%;
    height: 420px;
    background: url(images/headerimages_01.png) top center no-repeat;
    background-size: cover;
}

.page-contact #message,
.page-contactform #message {
    clear: both;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    line-height: 2.285;
    color: #FFFFFF;
    padding-top: 20px;
    width: 640px;
    margin: 0 auto;
    font-size: 1.07em;
    text-align: left;
}

.page-contact #message h3,
.page-contactform #message h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

#contactContent .container {
    max-width: 640px;
    padding: 25px 0 10px 0;
    font-size: 1.072em;
}

#contactContent .container p {
    margin-bottom: 2em;
}

#contactContent .container h3 {
    font-size: 1.5em;
    font-weight: bold;
    padding: 20px 0;
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

#contactContent .container h4 {
    font-size: 2.0em;
    font-weight: normal;
    padding: 20px 0;
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.aligncenter {
    text-align: center;
}

.contactform {
    margin-bottom: 50px;
}

.contactform dl {
    margin-bottom: 30px;
    width: 100%;
}

.contactform dt {
    width: 12em;
    float: left;
    padding: 10px 0px;
    line-height: 30px;
}

.contactform dt span {
    font-size: 0.875em;
    color: #FF0000;
}

.contactform dd {
    padding: 10px 0px 10px 10em;
    border-bottom: 1px solid #999;
}

.contactform dd input {
    padding: 7px;
    font-size: 15px;
    border: 1px solid #CCC;
    width: 90%;
}

.contactform dd textarea {
    padding: 7px;
    font-size: 15px;
    border: 1px solid #CCC;
    width: 90%;
    height: 200px;
}

.contactform .sendbtn input {
    width: 220px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    cursor: pointer;
    border: 1px solid #000000;
    font-size: 1.142em;
}

.contactform .sendbtn input:hover {
    background-color: #EFEFEF;
    border: 1px solid #1D4E7F;
    color: #1D4E7F;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

    .page-contact header,
    .page-contactform header {
        height: 320px;
    }
}

@media only screen and (max-width: 767px) {
    #contactContent .container {
        padding: 70px 10px 10px 10px;
    }

    .page-contact header,
    .page-contactform header {
        width: 100%;
        height: 270px;
    }

    .page-contact #message,
    .page-contactform #message {
        font-size: 1.285em;
        padding-top: 40px;
    }

    .contactform {
        padding-left: 0;
        padding-right: 0;
    }

    .contactform dt {
        width: 100%;
        float: none;
        padding: 10px 0px;
        line-height: 1.5;
    }

    .contactform dd {
        padding: 0px 0px 10px 0px;
        border-bottom: 1px solid #999;
    }

    .contactform dd input,
    .contactform dd textarea {
        width: 95%;
    }
}


/*================================================
 *  page-recruit
 ================================================*/

.page-recruit header {
    width: 100%;
    height: 420px;
    background: url(images/headerimages_01.png) top center no-repeat;
    background-size: cover;
}

.page-recruit #message {
    margin-top: 0px;
}

.recruitContent .container {
    max-width: 640px;
    /*font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;*/
    padding: 30px 0 30px 0;
}

.page-recruit #content dl {
    margin-bottom: 30px;
    font-size: 1.142em;
}

.page-recruit #content dt {
    width: 7em;
    float: left;
    padding: 20px 0;
}

.page-recruit #content dd {
    padding: 20px 0 20px 7em;
    border-bottom: 1px solid #999999;
}

.recruitContent .container h3,
.recruitContent .container h4 {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    padding: 20px 0;
    border-bottom: 1px solid #000;
}

.recruitContent .container h3.recruit-title {
    border-bottom: 2px solid #000;
    margin-bottom: 60px;
    text-align: center;
}

.recruitContent .container h4 {
    font-weight: normal;
    padding-bottom: 40px;
}

.recruitContent .container p {
    font-size: 1.142em;
    line-height: 2;
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}


@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .page-recruit header {
        height: 320px;
    }
}

@media only screen and (max-width: 767px) {
    .page-recruit header {
        height: 270px;
    }

    .page-recruit #content dl,
    .page-recruit .container p {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.0em;
    }

    .page-recruit h3 {
        width: 90%;
        height: auto;
        background-image: none;
        background-size: contain;
        text-align: center;
        font-size: 1.285em;
        line-height: auto;
        padding-top: 0px;
        padding-left: 0px;
        margin-top: 0px;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    .page-recruit h4 {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.5em;
        padding-bottom: 40px;
    }

}


/*================================================
 *  single
 ================================================*/


.single header,
.page-information header,
.archive header {
    width: 100%;
    height: 320px;
    background: url(images/headerimages_01.png) top center no-repeat;
    background-size: cover;
}

/*================================================
 *  ページ共通
 ================================================*/


.single #pgHeader,
.page-information #pgHeader,
.archive #pgHeader {
    width: 100%;
    height: 80px;
    background-color: #FFFFFF;
}

.single header .companylogo,
.archive header .companylogo {
    width: 61px;
    height: 50px;
    padding-top: 17px;
    padding-left: 20px;
    float: left;
}

.single header .companylogo .container h1 img,
.page-information header .companylogo .container h1 img,
.archive header .companylogo .container h1 img {
    width: 61px;
    height: 50px;
}

.single nav,
.page-information nav,
.archive nav {
    position: absolute;
    top: 20px;
    left: 110px;
    text-align: left;
    margin: 0;
}

.single nav li a,
.page-information nav li a,
.archive nav li a {
    color: #000000;
    text-decoration: none;
}

.single nav li,
.page-information nav li,
.archive nav li {
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    text-align: left;
    margin: 0;
}

.single nav li:first-child,
.page-information nav li:first-child,
.archive nav li:first-child {
    border-left: none;
}

.single h2,
.page-information h2,
.archive h2 {
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    width: 180px;
    height: 60px;
    background: url(images/bgContentTitle.png) top center no-repeat;
    background-size: contain;
    text-align: center;
    font-size: 1.285em;
    padding-top: 18px;
    float: left;
    color: #FFFFFF;
}

.single #content .container,
.page-information #content .container,
.archive #content .container {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.single #articleBody h3,
.page-information #articleBody h3,
.archive #articleBody h3 {
    /*font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;*/
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1em;
}

.page-information #newsList,
.archive #newsList {
    width: 100%;
}

.single #articleBody .postmeta {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1em;
    margin-bottom: 2em;
}

.single #articleBody section {
    font-size: 1.142em;
}

.single #articleBody section p {
    margin-bottom: 1em;
}

.single #articleBody section h1 {
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    font-size: 2.2em;
    line-height: 1.2;
    color: #000000;
    border-top: 3px solid #000000;
    border-bottom: 3px solid #000000;
    padding: 10px 0px;
    margin-bottom: 1em;
    text-align: center;
    font-weight: bold;
}

.single #articleBody section h2 {
    font-size: 2.0em;
    color: #000000;
    border-bottom: 2px solid #000000;
    margin-top: 1em;
    margin-bottom: 1em;
    width: auto;
    height: auto;
    background: none;
    text-align: left;
    padding: 5px 0px;
    float: none;
    position: relative;
    top: 0;
    line-height: 1.2;
}

.single #articleBody section h3 {
    font-size: 1.78em;
    border-left: 8px solid #000000;
    padding-left: 10px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.single #articleBody section h4 {
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: 600;
}

.single #articleBody section h5 {
    font-size: 1.285em;
    font-weight: 600;
    color: #000000;
    margin-top: 1em;
    margin-bottom: 1em;
}

.single #articleBody section h6 {
    font-size: 1.285em;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 1em;
}

.single #articleBody section ul {
    margin-bottom: 1em;
    margin-left: 1.5em;
    list-style-type: disc;
}

.single #articleBody section ol {
    margin-bottom: 1em;
    margin-left: 1.5em;
    list-style-type: decimal;
}

.single #articleBody section li {
    padding: 0.25em;
}

.single #articleBody section table {
    margin-bottom: 1em;
    background-color: #FFFFFF;
}

.single #articleBody section th {
    border: 1px solid #666666;
    padding: 10px;
    background-color: #EFEFEF;
}

.single #articleBody section td {
    border: 1px solid #666666;
    padding: 10px;
}

.single #articleBody section img {
    max-width: 100%;
    height: auto;
}

img.alignright {
    float: right;
    margin-left: 1em;
}

img.alignleft {
    float: left;
    margin-right: 1em;
}

img.aligncenter {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    text-align: center;
    display: block;
}

.single #articleBody section blockquote {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 1em 1em 0.01em 1em;
    margin-bottom: 1em;
}

.single #articleBody section a {
    text-decoration: underline;
}

.single #articleBody section a:hover {
    color: #1D4E7F;
}

.wp-caption {
    max-width: 96%;
    /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    line-height: 1.5;
    margin: 0;
    padding: 0 4px 5px;
}

.pagenation {
    clear: both;
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pagenation span {
    padding: 0 20px;
    width: 25%;
}

.pagenation span a {
    display: block;
    width: 100%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
    border: 1px solid #999999;
}

.pagenation span a:hover {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #CCCCCC;
    text-decoration: none;
}


#newsnav .container {
    padding: 30px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.widget {
    padding: 0 20px;
}

.widget .widgettitle {
    display: block;
    font-size: 1.125em;
    margin-bottom: 0.5em;
}

.widget label {
    display: none;
}

/*
.widget .nice-select {
    width: 250px;
    border: 1px solid #999999;
}

.widget .nice-select .list {
    width: 100%;
    border: 1px solid #CCCCCC;
    height: 300px;
    overflow-y: scroll;
}

.widget li {
    width: 250px;
    margin-bottom: 1em;
}

.widget li a {
    border: 1px solid #999999;
    padding: 0 1em;
    line-height: 40px;
    display: block;
}

.widget li a:hover {
    border: 1px solid #CCCCCC;
    text-decoration: none;
}
*/

.widget_archive,
.widget_categories {
    display: inline-flex;
    align-items: flex-start;
    position: relative;
    flex-direction: column;
}

.widget_archive select::after,
.widget_categories select::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.widget_archive select,
.widget_categories select {
    appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}

.archive .archiveTitle {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    padding: 20px 0;
}

.archive .summarybody h4,
.page-information .summarybody h4 {
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    margin-bottom: 0.5em;
    font-size: 1.142em;
}

.newsitem .summarybody p {
    font-size: 1em;
    margin-bottom: 0.5em;
}

.newsitem .summarybody .postmeta {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.5em;
    margin-bottom: 0.5em;
}

.wp-pagenavi {
    overflow: hidden;
    padding: 30px 0 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.wp-pagenavi a:hover,
.wp-pagenavi span.current {
    border-color: #1D4E7F !important;
    background-color: #1D4E7F;
}

.wp-pagenavi a,
.wp-pagenavi span {
    display: inline-block;
    text-decoration: none;
    border: 1px solid #CCCCCC !important;
    color: #999999;
    padding: 6px 12px !important;
    margin: 2px;
    font-size: 15px;
    text-align: center;
    vertical-align: middle;
}

.wp-pagenavi a:hover,
.wp-pagenavi span {
    color: #FFFFFF;
}

.wp-pagenavi .pages {
    color: #999999;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .single header .companylogo {
        padding-left: 10px;
    }

    .single nav {
        left: 85px;
    }
}

@media only screen and (max-width: 767px) {
    .single #pgHeader {
        height: 60px;
        background-color: #FFFFFF;
        /*background-color: transparent;
        background: url(images/spbgHeaderTilte.png) top center no-repeat;
        background-size: auto 90px;*/
    }

    .single header {
        height: 270px;
    }

    .single header .companylogo {
        padding-top: 5px;
        padding-left: 10px;
    }

    .single h2 {
        width: 90px;
        height: 150px;
        background: url(images/spbgContentTitle.png) center left no-repeat;
        background-size: contain;
        text-align: left;
        font-size: 1.285em;
        line-height: 150px;
        padding-top: 0px;
        padding-left: 10px;
        float: none;
        color: #FFFFFF;
        position: absolute;
        top: 114px;
    }

    .single #pgTitle {
        position: absolute;
        top: 80px;
        width: 100%;
        height: 190px;
    }

    .single #pgTitle #message {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
    }

    #inforContent {
        padding-top: 75px;
    }

    .single #content .container {
        width: 90%;
    }

    .single #articleBody .postmeta {
        width: calc(100% - 2em);
    }

    .single nav {
        position: relative;
        top: auto;
        left: 0px;
    }

    .single .cd-nav .cd-primary-nav a {
        display: block;
        text-align: center;
    }

    img.alignright {
        float: none;
        margin-left: 1em;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    img.alignleft {
        float: none;
        margin-right: 1em;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}