@charset "utf-8";

/* ==========================================================
   102k.net top page restored stylesheet
   現行の見え方を維持しながら、変数化と最小限の近代化を行う
   ========================================================== */

:root {
    --color-bg: #ffffff;
    --color-text: #555555;
    --color-link: #db7093;
    --color-link-hover: #fe6699;
    --color-phone: #d2691e;
    --color-nav-text: #666666;
    --color-nav-border: #ebebeb;
    --color-nav-current: #99ff66;
    --color-footer-hover: #999999;
    --color-border-light: #ebebeb;
    --color-border-mid: #dddddd;
    --color-border-dash: #cccccc;
    --color-table-bg: #f9f9f9;
    --color-table-head: #f5f5f5;
    --color-table-border: #d6d6d6;
    --color-highlight: #fffacd;
    --color-pager: #b0c4de;
    --color-pager-active: #4169e1;
    --layout-width: 960px;
    --layout-fluid: 98%;
    --heading-size: 16px;
    --body-line-height: 1.5;
    --transition-fast: 0.2s ease;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:focus {
    outline: 0;
}

b,
strong {
    font-size: 1em;
    font-weight: bold;
}

ol,
ul {
    list-style: none;
}

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

caption,
th,
td {
    text-align: left;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
    content: "";
}

blockquote,
q {
    quotes: "" "";
}

a img {
    border: 0;
}

figure {
    margin: 0;
}

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

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: verdana, "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: var(--body-line-height);
}

a {
    color: var(--color-link);
    background-color: var(--color-bg);
    text-decoration: none;
}

a:hover {
    color: var(--color-link-hover);
}

a:active,
a:focus {
    outline: 0;
}

img {
    max-width: 100%;
    height: auto;
}

#wrapper {
    position: relative;
    width: var(--layout-fluid);
    margin: 0 auto;
    padding: 0 1%;
}

.inner {
    width: 100%;
    margin: 0 auto;
}

#header {
    height: 130px;
}

#header h1 {
    padding: 5px 0 10px;
    font-size: 12px;
    font-weight: normal;
}

.logo {
    float: left;
}

.logo a,
#footer a {
    color: var(--color-text);
}

.logo p {
    float: left;
}

.logo span {
    display: block;
}

.info {
    float: right;
    padding-right: 20px;
    color: var(--color-phone);
    text-align: right;
}

.tel {
    margin-top: 6px;
    font-size: 20px;
    font-weight: bold;
}

.info .open {
    font-size: 11px;
}

.logo span,
.info span {
    font-size: 0.8em;
    font-weight: normal;
}

#mainImg {
    clear: both;
    margin-top: 20px;
    line-height: 0;
    text-align: center;
    z-index: 0;
}

.post {
    margin: 0 0 20px;
}

#content {
    display: block;
}

#content::after,
#footer::after,
.inner::after,
.panel::after,
.post::after {
    display: block;
    clear: both;
    content: "";
}

h2.heading,
h3.heading {
    margin-bottom: 5px;
    padding: 15px 0;
    border-top: 2px solid var(--color-border-light);
    border-bottom: 2px solid var(--color-border-light);
    font-size: var(--heading-size);
    font-weight: normal;
}

.post p {
    padding-bottom: 10px;
}

.post ul {
    margin: 0 0 10px 10px;
}

.post ul li {
    margin-bottom: 5px;
    padding-left: 15px;
    background: url(images/bullet.png) no-repeat 0 8px;
}

.post ol {
    margin: 0 0 10px 30px;
}

.post ol li {
    list-style: decimal;
}

.post h1 {
    margin: 20px 0;
    padding: 5px 0;
    border-bottom: 3px solid #cf6a88;
    color: #000000;
    font-size: 150%;
}

.post h2,
.post h3 {
    margin: 10px 0 25px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-mid);
    font-size: 120%;
    font-weight: normal;
}

.post blockquote {
    clear: both;
    margin: 10px 0 25px 30px;
    padding: 10px 0 10px 15px;
    border-left: 5px solid var(--color-border-dash);
}

.post blockquote p {
    padding: 5px 0;
}

.post table {
    margin: 5px auto 15px;
    border-collapse: collapse;
}

.post table td {
    padding: 8px;
    border: 1px solid var(--color-table-border);
    background-color: var(--color-table-bg);
    line-height: 20px;
}

.post table th {
    padding: 8px;
    border-top: 1px solid #d4d4d4;
    border-right: 4px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
    border-left: 1px solid #d4d4d4;
    background-color: var(--color-table-head);
    background-position: top;
    background-repeat: repeat-x;
    color: #151515;
    letter-spacing: 1px;
    white-space: nowrap;
    text-align: right;
    font-size: 13px;
    font-weight: normal;
}

.post dt {
    font-weight: bold;
}

.post dd {
    padding-bottom: 10px;
}

.post img {
    max-width: 100%;
    height: auto;
}

.alignleft {
    float: left;
    clear: left;
    margin: 3px 10px 10px 0;
}

.alignright {
    float: right;
    clear: right;
    margin: 3px 0 10px 10px;
}

img.aligncenter {
    display: block;
    margin: 5px auto;
}

img.alignright,
img.alignleft {
    display: inline;
    margin: 0 0 2px 7px;
    padding: 4px;
}

img.alignleft {
    margin: 0 7px 2px 0;
}

.right {
    text-align: right;
}

.notice-mark {
    background: linear-gradient(transparent 60%, var(--color-highlight) 60%);
    font-weight: 700;
}

.notice-gap {
    margin-bottom: 1em;
}

.indent {
    text-indent: 1em;
}

#footer {
    clear: both;
}

#footer a:hover {
    color: var(--color-footer-hover);
}

#footer .inner {
    overflow: hidden;
    padding: 5px 0;
}

#footer .grid {
    margin: 0;
}

#footer #info {
    float: left;
}

#footer #info .info {
    float: none;
    clear: both;
    padding: 5px 0 0;
    text-align: left;
}

#footer .logo {
    font-size: 18px;
}

#footer .info .tel,
#footer .info .tel span,
#footer #info .open {
    font-size: 12px;
}

ul.footnav {
    float: right;
    width: var(--layout-width);
    padding: 10px 0;
}

ul.footnav ul {
    display: none;
}

ul.footnav li {
    float: left;
    margin: 10px 0;
    padding: 0 7px 0 8px;
    border-right: 1px solid var(--color-border-light);
}

#address,
#copyright {
    clear: both;
    padding: 20px 0 10px;
    color: var(--color-text);
    text-align: center;
    font-size: 15px;
    font-style: normal;
}

hr {
    margin: 0;
    border: 0;
}

#pageTop {
    clear: both;
}

/* ----------------------------------------------------------
   ナビゲーション
   ---------------------------------------------------------- */

@media only screen and (min-width: 960px) {
    nav div.panel {
        display: block !important;
        float: none;
    }

    a#menu {
        display: none;
    }

    #header,
    #wrapper,
    .inner {
        width: var(--layout-width);
        margin: 0 auto;
        padding: 0;
    }

    #wrapper {
        clear: both;
        padding: 20px 0;
    }

    #mainNav {
        position: relative;
        clear: both;
        z-index: 200;
    }

    #mainNav ul {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 0;
    }

    #mainNav li {
        position: relative;
        flex: 0 0 auto;
        float: none;
    }

    #mainNav li a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 120px;
        min-height: 68px;
        height: auto;
        padding: 20px 5px;
        border-top: 2px solid var(--color-nav-border);
        border-bottom: 2px solid var(--color-nav-border);
        color:#444;
        text-align: center;
        font-size: 15px;
        letter-spacing: 0.02em;
        font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
        font-weight: 500;
        line-height: 0.9;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    #mainNav li a span,
    #mainNav li a strong {
        display: block;
        font-weight: 500;
    }

    #mainNav li a span {
        margin-top: 7px;
        color:#666;
        font-size: 13px;
        letter-spacing: 0;
    }

    #mainNav ul ul {
        width: 120px;
        background: var(--color-bg);
    }

    #mainNav li ul {
        display: none;
    }

    #mainNav li:hover ul,
    #mainNav li:focus-within ul {
        position: absolute;
        top: 64px;
        display: block;
        z-index: 500;
    }

    #mainNav li li {
        float: none;
        width: 160px;
        margin: 0;
        border: 0;
    }

    #mainNav li li:last-child {
        border: 0;
    }

    #mainNav li li a {
        width: auto;
        min-width: 160px;
        height: auto;
        padding: 10px;
        border: 0;
        text-align: left;
        font-size: 95%;
        letter-spacing: 0;
    }

    #mainNav li li span {
        padding: 0 10px;
    }

    #mainNav li.current-menu-item > a {
        border-top-color: var(--color-nav-current);
        border-bottom-color: var(--color-nav-current);
    }

    #mainNav li.current-menu-item a,
    #mainNav li a:hover,
    #mainNav li.current-menu-item li a:hover {
        color: #999999;
    }

    .logo {
        width: 500px;
    }
}

@media only screen and (max-width: 959px) {
    #mainNav {
        clear: both;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        border: 1px solid #e4e4e4;
        border-right: 0;
        border-left: 0;
    }

    #mainNav a.menu {
        display: block;
        width: 100%;
        height: 40px;
        color: var(--color-text);
        text-align: left;
        line-height: 40px;
        font-size: 180%;
        font-weight: bold;
    }

    #mainNav a#menu span {
        padding-left: 10px;
    }

    #mainNav a.menu span::before {
        content: "≡ ";
    }

    #mainNav a.menuOpen span::before {
        content: "× ";
    }

    #mainNav a#menu:hover {
        cursor: pointer;
    }

    nav .panel {
        position: relative;
        top: 0;
        right: 0;
        z-index: 1;
        display: none;
        width: 100%;
        font-size: 130%;
    }

    #mainNav ul {
        margin: 0;
        padding: 0;
    }

    #mainNav li {
        clear: both;
        float: none;
        width: 100%;
        height: auto;
        line-height: 1.2;
    }

    #mainNav li a,
    #mainNav li.current-menu-item li a {
        display: block;
        padding: 15px 10px;
        border-bottom: 1px dashed var(--color-border-dash);
        color: var(--color-text);
        text-align: left;
    }

    #mainNav li a span {
        padding-left: 10px;
    }

    #mainNav ul > li:last-child > a {
        border: 0;
    }

    #mainNav li li:last-child a {
        border-bottom: 1px dashed var(--color-border-dash);
    }

    #mainNav li.current-menu-item a,
    #mainNav li a:hover,
    #mainNav li a:active,
    #mainNav li li.current-menu-item a,
    #mainNav li.current-menu-item li a:hover,
    #mainNav li.current-menu-item li a:active {
        color: var(--color-text);
    }

    #mainNav li li {
        float: left;
        border: 0;
    }

    #mainNav li li a,
    #mainNav li.current-menu-item li a,
    #mainNav li li.current-menu-item a {
        padding-left: 40px;
        background: url(images/sub1.png) no-repeat 20px 18px;
    }

    #mainNav li li.current-menu-item a,
    #mainNav li li a:hover,
    #mainNav li.current-menu-item li a:hover {
        background: url(images/sub1.png) no-repeat 20px -62px;
    }

    #mainNav li li:last-child a {
        background: url(images/subLast.png) no-repeat 20px 20px;
    }

    #mainNav li li:last-child.current-menu-item a,
    #mainNav li li:last-child a:hover,
    #mainNav li.current-menu-item li:last-child a:hover {
        background: url(images/subLast.png) no-repeat 20px -65px;
    }

    nav div.panel {
        float: none;
    }

    #header {
        padding-left: 10px;
    }

    #footer .grid,
    #footer ul.footnav {
        float: none;
        width: 100%;
        text-align: center;
    }

    ul.footnav li {
        display: inline-block;
        float: none;
    }

    #footer .grid img,
    #footer .info {
        float: none;
    }

    #footer .grid p {
        display: block;
    }

    #footer #info .info {
        float: none;
        text-align: center;
    }

    #footer.logo,
    #footer .info {
        float: none;
        width: 100%;
    }

    #footer .logo p {
        display: block;
        float: none;
    }

    #footer .logo img {
        float: none;
        padding: 0;
    }
}

#mainImg img {
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 640px) {
    #header {
        height: auto;
        padding-bottom: 20px;
    }

    #header h1,
    .logo,
    .info {
        text-align: center;
    }

    .logo,
    .info {
        clear: both;
        float: none;
        width: 100%;
    }

    .logo p {
        display: block;
        float: none;
    }

    .logo img {
        float: none;
        padding: 0;
    }

    .alignleft,
    .alignright,
    img.alignleft,
    img.alignright {
        display: block;
        float: none;
        margin: 0 auto 10px;
    }
}

/* ----------------------------------------------------------
   Scroll Snap slider
   bxSlider の見え方だけを維持し、中身を入れ替える
   ---------------------------------------------------------- */

.slider-shell {
    position: relative;
    margin-bottom: 60px;
    padding: 0;
    border: 5px solid #ffffff;
    background: #ffffff;
    box-shadow: 0 0 5px #ffffff;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

.slider-shell .bx-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.slider-shell .bx-viewport::-webkit-scrollbar {
    display: none;
}

.bxslider {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
}

.bxslider > li {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.bxslider > li img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.slider-shell .bx-pager {
    position: absolute;
    bottom: -30px;
    width: 100%;
    padding-top: 20px;
    color: var(--color-pager);
    font-family: Arial, sans-serif;
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
}

.slider-shell .bx-pager-item {
    display: inline-block;
    vertical-align: bottom;
    font-size: 0;
    line-height: 0;
}

.slider-shell .bx-pager-link {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 5px;
    background: var(--color-pager);
    text-indent: -9999px;
    overflow: hidden;
}

.slider-shell .bx-pager-link:hover,
.slider-shell .bx-pager-link:focus,
.slider-shell .bx-pager-link.active {
    background: var(--color-pager-active);
}

@media (prefers-reduced-motion: reduce) {
    .slider-shell .bx-viewport {
        scroll-behavior: auto;
    }
}