@charset "UTF-8";
/* =========================================
    base
============================================ */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
    font-family: sans-serif;
    /* 1 */

    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/**
 * Remove default margin.
 */
body {
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
    display: inline-block;
    /* 1 */
    vertical-align: baseline;
    /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
    display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
    background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
    outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
    font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
    margin: 0.67em 0;
    font-size: 2em;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
    color: #000;
    background: #ff0;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
    border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
    margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
    overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
    /* 2 */
    margin: 0;
    color: inherit;
    /* 1 */
    font: inherit;
    /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
    overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
    line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
    /* 1 */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-appearance: textfield;
    /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
    border: 1px solid #c0c0c0;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
    /* 1 */
    padding: 0;
    border: 0;
    /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
    overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
    font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
    border-spacing: 0;
    border-collapse: collapse;
}

td,
th {
    padding: 0;
}

@font-face {
    font-family: Poppins;
    src: url("../fonts/poppins/Poppins-Bold.ttf") format("truetype");
}

html {
    overflow-y: scroll;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 62.5%;
    /* IEは画面縮小禁止 */
}
html .ie {
    min-width: 1000px;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

body,
input,
textarea,
keygen,
select {
    font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: normal;
}

body {
    overflow: hidden;
    color: #000;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: unset;
    -webkit-font-kerning: normal;
    font-kerning: normal;
    background-color: #ffffff;

    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 2dppx) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

[lang="en"] {
    font-family: Helvetica, sans-serif;
}

/**
* `dt`と`dd`の左端を揃えます。
*/
dd {
    margin-left: 0;
}

/**
 * 日本語では斜体を使用しないためリセットします。
 */
[lang="ja"] i,
[lang="ja"] cite,
[lang="ja"] em,
[lang="ja"] address,
[lang="ja"] dfn {
    font-style: normal;
}

/**
* フルードイメージにします。
*/
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

code,
kbd,
samp {
    font-family: Consolas, Menlo, Courier, monospace;
    font-size: 1em;
}

/* IE10以降`input[type="text"]`の入力内容の消去を非表示にします。 */
input::-ms-clear {
    visibility: hidden;
}

/* IE10以降の`input[type="password"]`のマスクの一時的解除を非表示にします。 */
input::-ms-reveal {
    visibility: hidden;
}

/* Normalize.cssをリセットします。 */
figure {
    margin: 0;
}

/* ブロック要素の上下のマージンをリセットします。 */
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
blockquote,
p,
address,
hr,
table,
fieldset,
pre {
    margin-top: 0;
    margin-bottom: 0;
}

/* tableをリセットします。 */
table {
    border-spacing: 0;
    border-collapse: collapse;
}

th {
    text-align: left;
}

/* リンクスタイル */
a {
    color: #007bff;
    text-decoration: none;
}
a:hover,
a:active,
a:focus {
    text-decoration: none;
    outline: none;
}

/**
 * iOSのSafariとChromeで、`text-decoration: underline;`の罫線が
 * グリフやディセンダで途切れないようにします。
 * https://css-tricks.com/almanac/properties/t/text-decoration-skip/
 */
a {
    -webkit-text-decoration-skip: none;
}

/* リスト */
ul,
ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/**
 * IEのimgとobject要素でもSVGをフルードイメージにします。
 * See: https://hail2u.net/blog/webdesign/max-width-and-svg-on-ie11-and-below.html
 */
[src$=".svg"],
[data$=".svg"] {
    width: 100%;
}

/**
 * キーボードでアクセスできない要素のフォーカス表示を消します。
 * Credit: https://github.com/suitcss/base
 */
[tabindex="-1"]:focus {
    outline: none !important;
}

/**
 * IE10以降の`input[type="text"]`で入力内容の消去機能を非表示にします。
 */
[type="text"]::-ms-clear {
    visibility: hidden;
}

/**
 * IE10以降の`input[type="password"]`でマスクの一時的解除機能を非表示にします。
 */
[type="password"]::-ms-reveal {
    visibility: hidden;
}

/**
 * IEとEdgeはスピンボタンに未対応のため、ChromeとFireFoxで非表示にします。
 */
[type="number"]::-webkit-outer-spin-button,
[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
}

/* 選択済みテキスト */
ins,
mark {
    text-decoration: none;
}

mark {
    background: #333;
}

ins {
    background: #333;
}

del {
    text-decoration: line-through;
}

del:after {
    content: " ";
}

::selection {
    color: #fff;
    background: #333;
    text-shadow: none;
}

::-moz-selection {
    color: #fff;
    background: #333;
    text-shadow: none;
}

/* 見出し */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 2.2rem;
}

h4 {
    font-size: 1.8rem;
}

h5 {
    font-size: 1.6rem;
}

h5 {
    font-size: 1.4rem;
}

@media screen and (max-width: 991px) {
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2.2rem;
    }
    h3 {
        font-size: 1.8rem;
    }
    h4 {
        font-size: 1.6rem;
    }
    h5 {
        font-size: 1.5rem;
    }
    h6 {
        font-size: 1.4rem;
    }
}

hr {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    border: 0;
    border-top: 1px solid #ccc;
}

h2 {
    text-align: center;
}

/* ボタン */
button {
    border: 0;
}

/* フォーム */
/* インプットボックス */
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
input:not([type]),
textarea {
    border: 2px solid #888;
    border-radius: 3px;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-transition: box-shadow ease-in-out 0.2s;
    transition: box-shadow ease-in-out 0.2s;
}
[type="color"]::-webkit-input-placeholder,
[type="date"]::-webkit-input-placeholder,
[type="datetime"]::-webkit-input-placeholder,
[type="datetime-local"]::-webkit-input-placeholder,
[type="email"]::-webkit-input-placeholder,
[type="month"]::-webkit-input-placeholder,
[type="number"]::-webkit-input-placeholder,
[type="password"]::-webkit-input-placeholder,
[type="search"]::-webkit-input-placeholder,
[type="tel"]::-webkit-input-placeholder,
[type="text"]::-webkit-input-placeholder,
[type="time"]::-webkit-input-placeholder,
[type="url"]::-webkit-input-placeholder,
[type="week"]::-webkit-input-placeholder,
input:not([type])::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #767676;
}
[type="color"]::-ms-input-placeholder,
[type="date"]::-ms-input-placeholder,
[type="datetime"]::-ms-input-placeholder,
[type="datetime-local"]::-ms-input-placeholder,
[type="email"]::-ms-input-placeholder,
[type="month"]::-ms-input-placeholder,
[type="number"]::-ms-input-placeholder,
[type="password"]::-ms-input-placeholder,
[type="search"]::-ms-input-placeholder,
[type="tel"]::-ms-input-placeholder,
[type="text"]::-ms-input-placeholder,
[type="time"]::-ms-input-placeholder,
[type="url"]::-ms-input-placeholder,
[type="week"]::-ms-input-placeholder,
input:not([type])::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #767676;
}
[type="color"]::placeholder,
[type="date"]::placeholder,
[type="datetime"]::placeholder,
[type="datetime-local"]::placeholder,
[type="email"]::placeholder,
[type="month"]::placeholder,
[type="number"]::placeholder,
[type="password"]::placeholder,
[type="search"]::placeholder,
[type="tel"]::placeholder,
[type="text"]::placeholder,
[type="time"]::placeholder,
[type="url"]::placeholder,
[type="week"]::placeholder,
input:not([type])::placeholder,
textarea::placeholder {
    color: #767676;
}
[type="color"]:focus,
[type="date"]:focus,
[type="datetime"]:focus,
[type="datetime-local"]:focus,
[type="email"]:focus,
[type="month"]:focus,
[type="number"]:focus,
[type="password"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="text"]:focus,
[type="time"]:focus,
[type="url"]:focus,
[type="week"]:focus,
input:not([type]):focus,
textarea:focus {
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 15px rgba(204, 204, 204, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 15px rgba(204, 204, 204, 0.6);
}
[type="color"]:disabled,
[type="date"]:disabled,
[type="datetime"]:disabled,
[type="datetime-local"]:disabled,
[type="email"]:disabled,
[type="month"]:disabled,
[type="number"]:disabled,
[type="password"]:disabled,
[type="search"]:disabled,
[type="tel"]:disabled,
[type="text"]:disabled,
[type="time"]:disabled,
[type="url"]:disabled,
[type="week"]:disabled,
input:not([type]):disabled,
textarea:disabled {
    opacity: 0.5;
    background-color: #ddd;
    cursor: not-allowed;
}

[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
input:not([type]) {
    height: 2.5em;
    padding: 0 1em;
    vertical-align: middle;
}

textarea {
    width: 100%;
    padding: 0.5em 1em;
}

/* セレクトボックス */
select {
    /* -webkit-appearance: none; */
    height: 2.5em;
    padding: 0 1em;
    border: 2px solid #888;
    border-radius: 3px;
    font-size: 1em;
    line-height: 1;
    vertical-align: middle;
    background-color: #fff;
    -webkit-box-shadow: 1px 1px 6px -3px #9e9e9e inset;
    box-shadow: 1px 1px 6px -3px #9e9e9e inset;
    /* box-shadow: 1px 2px 3px var(--box-shadow-color); */
    /* box-shadow: 1px 1px 6px -3px #df0202 inset; */
}

/* IE、edgeレイアウト調整 */
.ie select,
.edge select {
    padding-right: 0;
}

/* =========================================
    layout
============================================ */
/*doc
---
name: メインコンテンツエリア
category: レイアウト
tag: レイアウト
---

サイトのメインエリアレイアウト
最大幅1000px

```ejs

<div class="l-main">
    <p style="background: #ccd;">サイトメインエリア<br>最大幅1000px</p>
</div>


```
*/
.l-main {
    width: 100%;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 80px;
    /* margin-top: 100px; */
}

@media screen and (max-width: 767px) {
    .l-main {
        padding-bottom: 45px;
    }
}

.l-offset-container{
    margin-right: -999px;
    margin-left: -999px;
}

.l-offset-inner{
    width: 100vw;
    margin-right: auto;
    margin-left: auto;
    max-width: 1500px;
    overflow: hidden;
}


/*doc
---
name: セクション
category: レイアウト
tag: レイアウト
---

セクションの上の余白を定義

l-section-sm    : 30px

l-section-md    : 45px

l-section-lg    : 60px

l-section-xl    : 75px

.is-offset-smを合わせることで、
スマホ時の左右余白(l-container)を打ち消します。

```ejs

<div class="l-container">
    <div style="background: #ccd;">ダミーテキストです。</div>
    <div style="background: #ccd;" class="l-section-sm">l-section-sm</div>
    <div style="background: #ccd;" class="l-section-md">l-section-md</div>
    <div style="background: #ccd;" class="l-section-lg">l-section-lg</div>
    <div style="background: #ccd;" class="l-section-xl">l-section-xl</div>
    <div style="background: #ccd;" class="l-section-sm is-offset-sm">l-section-sm + is-offset-sm</div>
</div>

```
*/
.l-section-sm {
    margin-top: 30px;
}
@media screen and (max-width: 575px) {
    .l-section-sm.is-offset-sm {
        margin-right: -20px;
        margin-left: -20px;
    }
}

.l-section-md {
    margin-top: 45px;
}
@media screen and (max-width: 767px) {
    .l-section-md {
        margin-top: 30px;
    }
}
@media screen and (max-width: 575px) {
    .l-section-md.is-offset-sm {
        margin-right: -20px;
        margin-left: -20px;
    }
}

.l-section-lg {
    margin-top: 60px;
}
@media screen and (max-width: 575px) {
    .l-section-lg.is-offset-sm {
        margin-right: -20px;
        margin-left: -20px;
    }
}

.l-section-xl {
    margin-top: 75px;
}
@media screen and (max-width: 575px) {
    .l-section-xl.is-offset-sm {
        margin-right: -20px;
        margin-left: -20px;
    }
}

@media screen and (max-width: 767px) {
    .l-section-sm {
        margin-top: 20px;
    }
    .l-section-md {
        margin-top: 30px;
    }
    .l-section-lg {
        margin-top: 45px;
    }
    .l-section-xl {
        margin-top: 45px;
    }
}

/*doc
---
name: フッター
category: レイアウト
tag: [レイアウト, フッター, 配色設定あり]
---

フッターレイアウト

```ejs

<div class="l-footer">
    <p>フッターレイアウト</p>
</div>


```
*/
.l-footer {
    padding: 1em 0;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    background-color: #666;
}

/*doc
---
name: フォームレイアウト
category: レイアウト
tag: [レイアウト, フォーム]
---

フォームパーツをレイアウトするためのスタイルです。
フォームパーツ自体のスタイルは含まれていません。

```ejs

<dl class="l-form mt-20">
    <div class="l-form-row">
        <dt class="l-form-label">フォームラベル領域</dt>
        <dd class="l-form-input">フォームインプット領域</dd>
    </div>
    <div class="l-form-row">
        <dt class="l-form-label">フォームラベル領域</dt>
        <dd class="l-form-input">フォームインプット領域</dd>
    </div>
    <div class="l-form-row">
        <dt class="l-form-label">フォームラベル領域</dt>
        <dd class="l-form-input">フォームインプット領域</dd>
    </div>
    <div class="l-form-row">
        <dt class="l-form-label">フォームラベル領域</dt>
        <dd class="l-form-input">フォームインプット領域</dd>
    </div>
</dl>


```
*/
.l-form {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}
.l-form-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* min-height: 65px; */
    min-height: 55px; /* ICC */



    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.l-form-row + .l-form-row {
    border-top: solid 1px #ccc;
}

.l-form-label {
    position: relative;
    max-width: 265px;
    padding: 15px 15px 15px 25px;
    font-weight: bold;
    background-color: #f2f2f2;

    -ms-flex-preferred-size: 265px;
    flex-basis: 265px;
}
.l-form-label .required {
    position: absolute;
    top: 25px;
    right: 20px;
}
.l-form-label small {
    display: block;
    font-weight: normal;
    line-height: 1;
}

.l-form-label .linkbtn,
.l-form-label .linkbtn-wrap {
    max-width: 200px;
    margin: 5px auto 5px 0;
}

@media screen and (max-width: 991px) {
    .l-form-label .required {
        position: relative;
        top: auto;
        right: auto;
        margin-left: 0.5em;
    }
    .l-form-label small {
        display: inline-block;
    }
}
.l-form-input {
    max-width: calc(100% - 265px);
    padding: 15px 20px;

    -ms-flex-preferred-size: calc(100% - 265px);
    flex-basis: calc(100% - 265px);
}

@media screen and (max-width: 991px) {
    .l-form {
        padding-bottom: 1em;
    }
    .l-form-row + .l-form-row {
        margin-top: 15px;
        border-top: 0;
    }
    .l-form-label {
        max-width: 100%;
        padding: 0.75em 0 0.75em;
        background-color: #fff;

        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .l-form-input {
        max-width: 100%;
        padding: 0;

        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.l-form.is-change .l-form-label {
    color: #fff;
    background-color: #666;
}

@media screen and (max-width: 991px) {
    .is-change .l-form-label {
        max-width: 100%;
        margin-bottom: 0.8em;
        padding: 0.75em 0.75em 0.75em;
        background-color: #fff;

        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .is-change .l-form-row + .l-form-row {
        padding-bottom: 2.3em;
    }
}

/*doc
---
name: ヘッダー
category: レイアウト
tag: [レイアウト, ヘッダー, 配色設定あり]
---

ヘッダーレイアウト

```ejs

<p>トップページには.l-headerに.is-toppageを付与します</p>
<header id="header" class="l-header is-toppage" role="banner">
    <div class="l-header-upper">
        <div class="l-header-inner">
            <div class="l-header-upper-left">
                <!-- グローバルナビなし -->
            </div>
            <div class="l-header-upper-right">
                ログインボタン
            </div>
        </div>
    </div>
    <div class="l-header-lower">
        <div class="l-header-inner">
            <p>サイトロゴ</p>
            <p>連絡先情報</p>
        </div>
    </div>
</header>
<hr>
<p>ログイン後ページヘッダーレイアウト</p>
<header id="header" class="l-header" role="banner">
    <div class="l-header-upper">
        <div class="l-header-inner">
            <div class="l-header-upper-left">
                グローバルナビ格納
            </div>
            <div class="l-header-upper-right">
                ログアウトボタン
            </div>
        </div>
    </div>
    <div class="l-header-lower">
        <div class="l-header-inner">
            <p>サイトロゴ</p>
            <p>連絡先情報</p>
        </div>
    </div>
</header>


```
*/
.l-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
@media screen and (max-width: 991px) {
    .l-header {
        -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }
}

.l-header-upper {
    width: 100%;
    background-color: #666;
}

.l-header-inner {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.l-header-upper .l-header-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
@media screen and (max-width: 991px) {
    .l-header-upper .l-header-inner {
        display: block;
    }
}

.l-header-lower .l-header-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
@media screen and (max-width: 991px) {
    .l-header-lower .l-header-inner {
        display: block;
    }
}

@media screen and (max-width: 991px) {
    .l-header-upper-left {
        width: 100%;
    }
}

.l-header.is-toppage .l-header-upper-left {
    width: calc(100% - 140px);
}
@media screen and (max-width: 991px) {
    .l-header.is-toppage .l-header-upper-left {
        width: 100%;
    }
}

.l-header-upper-right {
    width: 60px;
    text-align: center;
}
@media screen and (max-width: 991px) {
    .l-header-upper-right {
        width: 100%;
        padding: 20px;
    }
}

.l-header.is-toppage .l-header-upper-right {
    width: 140px;
}
@media screen and (max-width: 991px) {
    .l-header.is-toppage .l-header-upper-right {
        width: 100%;
        padding: 0;
        /* position: relative;
        top: 0%;
        right: 0%; */
    }
}

.l-header-lower {
    width: 100%;
    border-bottom: solid 7px #666;
}
@media screen and (max-width: 991px) {
    .l-header-lower {
        padding-top: 30px;
        padding-right: 15px;
        padding-bottom: 30px;
        padding-left: 15px;
        border-top: solid 10px #666;
        border-bottom: 0;
    }
}

.l-scroll {
    overflow: auto;
    max-height: 580px;
    background: #f6f6f6;

    -webkit-overflow-scrolling: touch;
}

.l-scroll.is-wide {
    max-height: 867px;
}

.l-userinfo {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}

.l-userinfo-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.l-userinfo-row + .l-userinfo-row {
    border-top: solid 1px #ccc;
}

.l-userinfo-row dt,
.l-userinfo-row dd {
    padding: 15px 23px;
}

.l-userinfo-row dt {
    min-width: 265px;
    font-weight: bold;
    background-color: #f2f2f2;
}

.l-userinfo-row dd {
    /* width: 653px;*/ /* ICC */
    text-align: left;
    max-width: calc(100% - 265px);
    -ms-flex-preferred-size: calc(100% - 265px);
}

@media screen and (max-width: 991px) {
    .l-userinfo {
        padding-bottom: 1em;
    }
    .l-userinfo-row + .l-userinfo-row {
        margin-top: 15px;
        border-top: 0;
    }
    .l-userinfo-row {
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
    .l-userinfo .l-userinfo-row:last-child {
        border-bottom: 0;
    }
    .l-userinfo-row dt,
    .l-userinfo-row dd {
        max-width: 100%;
        padding: 0.5em 0 0.5em;
        background-color: #fff;

        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.l-wrap {
    max-width: 1040px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
}

.l-wrap-max {
    max-width: 1406px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
}

.l-wrap-fluid {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

/* =========================================
    module & state
============================================ */
/*doc
---
name: パンくずリスト
category: モジュール
tag: ナビゲーション
---

ページ階層ナビゲーション

```ejs
<ul class="breadcrumb">
    <li><a href="#">マイページ</a></li>
    <li><a href="#">階層１</a></li>
    <li><a href="#">階層２</a></li>
</ul>
```
*/
.breadcrumb {
    margin-top: 15px;
    margin-bottom: 30px;
    /* display: none; */
}
.breadcrumb > li {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: bold;
}
.breadcrumb > li::before {
    content: "> ";
}
.breadcrumb > li > a {
    color: #666;
}
.breadcrumb > li:last-child > a {
    color: #000;
}

/*doc
---
name: ボタン
category: モジュール
tag: [ボタン, 配色設定あり]
---

フォームボタンのスタイルを定義します。

アイコンはfontawsomeのアイコンを使用し、
アイコンの配置によってclassを付与します。

また、特定のクラスを付与することで、ボタンのスタイルを用途によって変更します。


```ejs
<div class="theme-personal">
<button class="btn-new"><span class="btn-inner">デフォルト</span></button>
<hr>
<button class="btn-new"><span class="btn-inner"><i class="fas fa-chevron-left btn-icon-before"></i>アイコン配置前</span></button>
<hr>
<button class="btn-new"><span class="btn-inner">アイコン配置後ろ<i class="fas fa-chevron-right btn-icon"></i></span></button>
<hr>
<button class="btn-new is-xsmall"><span class="btn-inner">.is-xsmall</span></button>
<hr>
<button class="btn-new is-small"><span class="btn-inner">.is-small</span></button>
<hr>
<button class="btn-new is-large"><span class="btn-inner">.is-large</span></button>
<hr>
<button class="btn-new is-back"><span class="btn-inner">戻る、キャンセルなど</span></button>
<hr>
<button class="btn-new is-utility"><span class="btn-inner">住所検索など</span></button>
<hr>
<button class="btn-new is-radiobtn"><span class="btn-inner">ラジオボタン用スタイル</span></button>
<hr>
<p>複数組み合わせることもできます</p>
<button class="btn-new is-small is-back"><span class="btn-inner">複数付与例</span></button>
<hr>
<p>クリック禁止状態(disabled属性があるとき)のスタイル</p>
<button class="btn-new" disabled><span class="btn-inner">クリック禁止</span></button>
</div>
```
*/

.btn-new {
    display: block;
    padding-right: 0;
    padding-bottom: 2px;
    padding-left: 0;
    background: none;
}

.btn {
    display: inline-block;
    position: relative;
    min-width: 265px;
    height: 60px;
    padding: 0 35px;
    border-bottom: solid 2px #aaa;
    border-radius: 30px;
    color: #fff;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 60px;
    text-align: center;
    background-color: #999;
}

.btn-inner {
    display: inline-block;
    position: relative;
    min-width: 265px;
    height: 60px;
    padding: 0 35px;
    border-bottom: solid 2px #aaa;
    border-radius: 30px;
    color: #fff;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 60px;
    text-align: center;
    background-color: #999;
}

.btn .btn-icon,
.btn-new .btn-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    color: #fff;
    font-size: 18px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.btn .btn-icon-before,
.btn-new .btn-icon-before {
    position: absolute;
    top: 50%;
    left: 15px;
    color: #fff;
    font-size: 18px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn:hover,
.btn:active,
.btn:focus,
.btn-new:hover .btn-inner,
.btn-new:active .btn-inner,
.btn-new:focus .btn-inner {
    /* outline: 0; */
    border-bottom-width: 0;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}
.btn:disabled,
.btn-new:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.btn:disabled:hover,
.btn:disabled:active,
.btn:disabled:focus,
.btn-new:disabled:hover .btn-inner,
.btn-new:disabled:active .btn-inner,
.btn-new:disabled:focus .btn-inner {
    border-bottom-width: 2px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
/* #189853対応 2023.04.07 y.takishima
  戻るボタンがグレーアウト(無効化)されているようにみえるため !important 指定削除
  これによりテーマ色が適用される
  ``` old:
    border-bottom-color: #bbb !important;
    background-color: #ccc !important;
  ```
*/
.btn.is-back,
.btn-new.is-back .btn-inner {
    border-bottom-color: #bbb;
    background-color: #ccc;
    /* color: ; */
}
.btn.is-utility,
.btn-new.is-utility .btn-inner {
    border-bottom-color: #4e4d4d !important;
    background-color: #888 !important;
}
.btn.is-xsmall,
.btn-new.is-xsmall .btn-inner {
    min-width: 110px;
    height: 25px;
    padding-right: 25px;
    padding-left: 25px;
    font-size: 1.3rem;
    line-height: 25px;
}
.btn.is-xsmall .btn-icon,
.btn.is-xsmall .btn-icon-before,
.btn-new.is-xsmall .btn-icon,
.btn-new.is-xsmall .btn-icon-before {
    font-size: 11px;
}
.btn.is-xsmall .btn-icon,
.btn-new.is-xsmall .btn-icon {
    right: 10px;
}
.btn.is-xsmall .btn-icon-before,
.btn-new.is-xsmall .btn-icon-before {
    left: 10px;
}
.btn.is-small,
.btn-new.is-small .btn-inner {
    min-width: 220px;
    height: 45px;
    padding-right: 28px;
    padding-left: 28px;
    font-size: 1.6rem;
    line-height: 45px;
}
.btn.is-large,
.btn-new.is-large .btn-inner {
    min-width: 330px;
    height: 74px;
    border-radius: 37px;
    font-size: 2.5rem;
    line-height: 74px;
}
.btn.is-radiobtn,
.btn-new.is-radiobtn .btn-inner {
/*
    padding-right: 10px;
    padding-left: 10px;
    border-bottom-color: #888;
    color: #000;
    background-color: #e4e4e4;
*/
    min-width: 100px;
    height: 35px;
    padding-right: 5px;
    padding-left: 5px;
    border-bottom-color: #888;
    color: #000;
    font-size: 1.6rem;
    line-height: 35px;
    background-color: #e4e4e4;
}
.cell-checkbox [type="radio"],
.btn.is-radiobtn [type="radio"],
.btn.is-radiobtn [type="checkbox"],
.btn-new.is-radiobtn [type="radio"],
.btn-new.is-radiobtn [type="checkbox"] {
    clip: rect(0, 0, 0, 0);
    position: absolute;
    pointer-events: none;
}
.btn.is-radiobtn.active,
.btn-new.is-radiobtn.active .btn-inner {
    border-bottom: 0;
    background-color: #666;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}
.btn.is-checkbox,
.btn-new.is-checkbox .btn-inner {
    min-width: 100px;
    height: 35px;
    padding-right: 5px;
    padding-left: 5px;
    border-bottom-color: #888;
    color: #000;
    font-size: 1.6rem;
    line-height: 35px;
    background-color: #e4e4e4;
}
@media screen and (max-width: 767px) {
    .btn.is-checkbox,
    .btn-new.is-checkbox .btn-inner {
        min-width: 35px;
        max-width: 35px;
        width: 35px;
    /*
        height: 35px;
    */
        padding-right: 1px;
        padding-left: 1px;
    /*
        border-bottom-color: #b02544;
        color: #000;
    */
        font-size: 1.2rem;
    /*
        line-height: 35px;
        background-color: #b02544;
    */
    }
}
.btn.is-checkbox [type="checkbox"],
.btn-new.is-checkbox [type="checkbox"] {
    clip: rect(0, 0, 0, 0);
    position: absolute;
    pointer-events: none;
}
.btn.is-checkbox.active,
.btn-new.is-checkbox.active .btn-inner {
    border-bottom: 0;
    color: #fff;
    background-color: #666;
    /* -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px); */
}

/*doc
---
name: ボタングループ
category: モジュール
tag: [グルーピング, ボタン]
---

ボタンのグルーピング

```ejs
<div class="btn-group">
    <button class="btn-new"><span class="btn-inner">ボタン1</span></button>
    <button class="btn-new"><span class="btn-inner">ボタン2</span></button>
    <button class="btn-new"><span class="btn-inner">ボタン3</span></button>
    <button class="btn-new"><span class="btn-inner">ボタン4</span></button>
</div>
```
*/
.btn-group {
    margin-top: 65px;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .btn-group {
        margin-top: 50px;
    }
}
.btn-group .btn,
.btn-group .btn-new {
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 15px;
}

.btn-group.is-time-select .btn,
.btn-group.is-time-select .btn-new {
    width: 100%;
    min-width: inherit;
    margin: 0;
    margin-bottom: 20px;
}

.btn-group.is-time-select {
    margin-top: 40px;
}

/*doc
---
name: ラジオボタングループ
category: モジュール
tag: [グルーピング, ボタン]
---

ラジオボタンのグルーピング

このクラスに入るボタンには"is-radio"を付与してください。

また、Javascriptによってブラウザデフォルトラジオボタンをボタン化しています。

下記のソースコードを参考に実装してください。

※このモジュールはチェックボックスでも使えます。

```ejs
<div class="radiobtn-group" data-toggle="buttons">
  <label class="btn-new is-small is-radiobtn active">
  <span class="btn-inner">
    <input type="radio" autocomplete="off" name="test" checked> ラジオボタン１
    </span>
  </label>
  <label class="btn-new is-small is-radiobtn">
  <span class="btn-inner">
    <input type="radio" autocomplete="off" name="test"> ラジオボタン２
    </span>
  </label>
  <label class="btn-new is-small is-radiobtn">
  <span class="btn-inner">
    <input type="radio" autocomplete="off" name="test"> ラジオボタン３
    </span>
  </label>
  <label class="btn-new is-small is-radiobtn">
  <span class="btn-inner">
    <input type="radio" autocomplete="off" name="test"> ラジオボタン4
    </span>
  </label>
</div>
<hr>
<p>input typeを"checkbox"に変更するだけでチェックボタンでも使えます</p>
<div class="radiobtn-group" data-toggle="buttons">
  <label class="btn-new is-small is-radiobtn active">
    <span class="btn-inner"><input type="checkbox" autocomplete="off" name="test"> チェックボタン１</span>
  </label>
  <label class="btn-new is-small is-radiobtn">
    <span class="btn-inner"><input type="checkbox" autocomplete="off" name="test"> チェックボタン２</span>
  </label>
  <label class="btn-new is-small is-radiobtn">
    <span class="btn-inner"><input type="checkbox" autocomplete="off" name="test"> チェックボタン３</span>
  </label>
  <label class="btn-new is-small is-radiobtn">
    <span class="btn-inner"><input type="checkbox" autocomplete="off" name="test"> チェックボタン4</span>
  </label>
</div>
```
*/
.radiobtn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: -20px;
    margin-left: -20px;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.radiobtn-group .btn,
.radiobtn-group .btn-new {
    width: calc(25% - 20px);
    min-width: 0;
    margin-bottom: 20px;
    margin-left: 20px;
}

.radiobtn-group .btn-new .btn-inner{
    margin-bottom: 0;
}
@media screen and (max-width: 991px) {
    .radiobtn-group .btn,
    .radiobtn-group .btn-new,
    .radiobtn-group .btn-new .btn-inner  {
        width: calc(33.3333% - 20px);
    }
}
@media screen and (max-width: 767px) {
    .radiobtn-group {
        margin-bottom: -10px;
        margin-left: -10px;
    }
    .radiobtn-group .btn,
    .radiobtn-group .btn-new {
        width: 100%;
        margin-bottom: 10px;
        margin-left: 0;
    }
    .radiobtn-group .btn-new .btn-inner{
        width: 100%;
        margin-bottom: 0;
        margin-left: 0;
    }
}

/*doc
---
name: カード
category: モジュール
tag: [ボックス, 配色設定あり]
---

インフォメーションとリンクボタンをひとまとめにしたボックスのスタイルです。

```ejs

<div class="card">
    <h3 class="card-title">タイトル</h3>
    <div class="card-body">
        <p>本文<br>これはダミーテキストです。</p>
        <div class="linkbtn-wrap"><a href="#" class="linkbtn-new is-small card-btn"><span class="linkbtn-inner">リンクボタンを配置します。</span></a></div>
    </div>
</div>

```
*/
.card {
    overflow: hidden;
    border: solid 1px #666;
    border-radius: 45px;
    color: #333;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
}

.card .card-title {
    padding: 14px 0;
    color: #fff;
    font-size: 3rem;
    text-align: center;
    background-color: #666;
}
.card .card-body {
    position: relative;
    min-height: 215px;
    padding: 20px 20px 105px;
    /* borser: ; */
}
.card .card-btn {
    position: absolute;
    bottom: 25px;
    left: 20px;
    width: calc(100% - 40px);
}
@media screen and (max-width: 991px) {
    .card .card-title {
        font-size: 2.4rem;
    }
    .card .card-body {
        min-height: 0;
    }
}
@media screen and (max-width: 767px) {
    .card {
        border-radius: 30px;
    }
    .card .card {
        min-height: 200px;
    }
    .card .card-body {
        padding: 18px 18px 85px;
    }
    .card .card-title {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 2.2rem;
    }
    .card .card-btn {
        width: calc(100% - 40px);
    }
}

/*doc
---
name: カードグループ
category: モジュール
tag: [グルーピング]
---

カードをグルーピングします。

```ejs

<div class="card-group">
  <div class="card">
    <h3 class="card-title">カード１</h3>
    <div class="card-body">
        <p>本文<br>これはダミーテキストです。</p>
        <div class="linkbtn-wrap"><a href="#" class="linkbtn-new is-small card-btn"><span class="linkbtn-inner">リンクボタンを配置します。</span></a></div>
    </div>
  </div>
  <div class="card">
    <h3 class="card-title">カード２</h3>
    <div class="card-body">
        <p>本文<br>これはダミーテキストです。</p>
        <div class="linkbtn-wrap"><a href="#" class="linkbtn-new is-small card-btn"><span class="linkbtn-inner">リンクボタンを配置します。</span></a></div>
    </div>
  </div>
</div>

```
*/
.card-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.card-group .card {
    width: calc(50% - 25px);
}
@media screen and (max-width: 991px) {
    .card-group .card {
        width: 100%;
    }
    .card-group .card + .card {
        margin-top: 20px;
    }
}

.card-group.is-signin {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.card-group.is-signin .card-body {
    padding-bottom: 26px;
}

/*doc
---
name: フロー
category: モジュール
tag: [リスト, フォーム, 配色設定あり]
---

フォームなどの入力フロー

現在のフロー位置には".is-current"を付与します。

```ejs
<p>4ステップ</p>
<ol class="flow">
    <li><span><span>ステップ１</span></span></li>
    <li class="is-current"><span><span>ステップ２</span></span></li>
    <li><span><span>ステップ３</span></span></li>
    <li><span><span>ステップ４</span></span></li>
</ol>
<hr>
<p>3ステップ</p>
<ol class="flow">
    <li><span><span>ステップ１</span></span></li>
    <li><span><span>ステップ２</span></span></li>
    <li class="is-current"><span><span>ステップ３</span></span></li>
</ol>
```
*/
.flow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    border: solid 3px #666;
    background-color: #fff;
    list-style-type: none;
    counter-reset: flow;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.flow > li {
    position: relative;
    max-width: 100%;
    height: 50px;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;

    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.flow > li > span {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 50px;
    padding: 0 50px;
    line-height: 50px;
    text-align: center;
}
.flow > li > span::before {
    content: counter(flow);
    position: absolute;
    top: 50%;
    left: 20px;
    color: #666;
    font-family: "Poppins", Poppins, sans-serif;
    font-size: 3rem;
    font-weight: bold;
    counter-increment: flow;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.flow > li.is-current {
    color: #fff;
    background-color: #666;
}
.flow > li.is-current > span::before {
    color: #fff;
}
.flow > li + li::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    width: 29px;
    border-top: solid 25px #666;
    border-bottom: solid 25px #666;
    border-left: solid 25px transparent;
}
.flow > li + li::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    border-top: solid 25px #fff;
    border-bottom: solid 25px #fff;
    border-left: solid 25px transparent;
}
.flow > li + li.is-current::before {
    border-top-color: #fff;
    border-bottom-color: #fff;
}
.flow > li + li.is-current::after {
    border-top-color: #666;
    border-bottom-color: #666;
}
@media screen and (max-width: 991px) {
    .flow {
        border: 0;
        background-color: #e4e4e4;
        /* display: ; */
    }
    /*
    .flow li {






    }
    */
    .flow > li + li::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 100%;
        width: 29px;
        border-top: solid 25px #fff;
        border-bottom: solid 25px #fff;
        border-left: solid 25px transparent;


    
        
    }

    .flow > li + li::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 100%;
        border-top: solid 25px #e4e4e4;
        border-bottom: solid 25px #e4e4e4;
        border-left: solid 25px transparent;
    }

    /*
    .flow li:first-child:after {
    }

    .flow li.is-current:before {
    }

    .flow li.is-current {
    }
    */
    .flow > li:not(.is-current) {
        max-width: 100px;


    }
    .flow > li:not(.is-current) > span > span {
        display: none;

    }
}
@media screen and (max-width: 767px) {
    /* .flow {




    }    */

    .flow > li {
        height: 40px;
        font-size: 1.1rem;




    }

    .flow > li > span {
        height: 40px;
        padding: 0 25px;
        line-height: 40px;
    }
    .flow > li > span::before {
        left: 10px;
        font-size: 2.4rem;
    }
    .flow > li + li::before,
    .flow > li + li::after {
        border-top-width: 20px;
        border-bottom-width: 20px;
        border-left-width: 20px;
    }
    .flow > li + li::before {
        width: 24px;
    }

    /*

    .flow li:before {

    }

    .flow li:after {

    }

    .flow li:first-child:after {

    }

    .flow li.is-current:before {

    }

    .flow li.is-current {

    }




    */

    .flow > li.is-current > span::before {
        left: 9px;
    }
    .flow > li:not(.is-current) {
        max-width: 55px;
        text-align: center;
    }
}

.flow-title {
    color: #666;
}
.flow-title .flow-title-number {
    font-family: "Poppins", Poppins, sans-serif;
}
.flow-title .flow-title-number > span {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 0.25em;
    margin-left: 0.1em;
    border-radius: 15px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    vertical-align: baseline;
    background-color: #666;
}

/*doc
---
name: フォームインプットパーツ
category: モジュール
tag: フォーム
---

フォーム用のパーツ類

フォームインプットパーツには、
".form-control"を付与します。

ただし、ラジオボタンとチェックボックスは.btn-new.is-radiobtnでボタン化するか、ブラウザデフォルトのものを使うので、'.form-control'の付与は不要です。

```ejs

<h3>テキスト入力</h3>
<p>必須項目には"required"属性を付与します</p>
<p><input id="" type="text" class="form-control" required></p>
<hr>
<p>テキスト入力 - 長さバリエーション</p>
<p><input id="" type="text" class="form-control is-xsmall">　is-xsmall</p>
<hr>
<p><input id="" type="text" class="form-control is-small">　is-small</p>
<hr>
<p><input id="" type="text" class="form-control is-middle">　is-middle</p>
<hr>
<p><input id="" type="text" class="form-control is-large">　is-large</p>
<hr>
<p><input id="" type="text" class="form-control is-xlarge">　is-xlarge</p>

<p>テキスト入力 - 状態バリエーション</p>
<p><input id="" type="text" class="form-control is-small is-denied">　is-denied バリデーションエラー等</p>
<hr>
<p><input id="" type="text" class="form-control is-small is-admitted">　is-admitted バリデーションOK等</p>

<h3 class="l-section-sm">セレクトボタン</h3>
<select name="" id="" class="form-control" required>
    <option disabled selected value>初期値、フォーム送信無し</option>
    <option value="選択肢１">選択肢１</option>
    <option value="選択肢２">選択肢２</option>
    <option value="選択肢３">選択肢３</option>
</select>
<hr>
<p>セレクトボタン - 状態バリエーション</p>
<select name="" id="" class="form-control is-denied">
    <option disabled selected value>初期値、フォーム送信無し</option>
    <option value="選択肢１">選択肢１</option>
    <option value="選択肢２">選択肢２</option>
    <option value="選択肢３">選択肢３</option>
</select>
<hr>
<select name="" id="" class="form-control is-admitted">
    <option disabled selected value>初期値、フォーム送信無し</option>
    <option value="選択肢１">選択肢１</option>
    <option value="選択肢２">選択肢２</option>
    <option value="選択肢３">選択肢３</option>
</select>
<h3 class="l-section-sm">テキストエリア</h3>
<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
<p>セレクトボタン - 状態バリエーション</p>
<textarea name="" id="" cols="30" rows="10" class="form-control is-denied"></textarea>
<hr>
<textarea name="" id="" cols="30" rows="10" class="form-control is-admitted"></textarea>
```
*/
.form-control.is-xsmall {
    width: 90px;
}

.form-control.is-small {
    width: 114px;
}

.form-control.is-middle {
    width: 180px;
}

.form-control.is-large {
    width: 380px;
}

.form-control.is-large-600 {
    width: 600px;
}

.form-control.is-xlarge {
    width: 100%;
}

.form-control.is-section {
    width: 203px;
}

.form-control.is-denied {
    border-color: #ca0f24;
}
.form-control.is-denied:forcus {
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 15px rgba(202, 15, 36, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 15px rgba(202, 15, 36, 0.6);
}

.form-control.is-admitted {
    border-color: #28a745;
}
.form-control.is-admitted:forcus {
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 15px rgba(40, 167, 69, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 15px rgba(40, 167, 69, 0.6);
}

@media screen and (max-width: 991px) {
    .form-control.is-xsmall {
        width: 114px;
    }
    .form-control.is-small {
        width: 114px;
    }
    .form-control.is-large {
        width: 100%;
    }
    .form-control.is-xlarge {
        width: 100%;
    }
}

/*doc
---
name: フォーム縦並びグループ
category: モジュール
tag: [グルーピング, フォーム]
---

フォームの入力項目のグループ設定

```ejs
<p>複数の入力項目を縦並びにします。縦並び時のマージンを確保します。</p>
<div class="form-vertical">
    <input id="" type="text" class="form-control is-small">
</div>
<div class="form-vertical">
    <input id="" type="text" class="form-control is-small">
</div>
<hr>
```
*/
.form-vertical {
    display: block;
}

.form-vertical + .form-vertical {
    margin-top: 12px;
}

.form-vertical-md {
    display: inline-block;
}

@media screen and (max-width: 991px) {
    .form-vertical-md + .form-vertical-md {
        margin-top: 12px;
    }
}

@media screen and (max-width: 575px) {
    .form-vertical-md.is-between {
        display: block;
    }
}

/*doc
---
name: フォーム生年月日グループ
category: モジュール
tag: [グルーピング, フォーム]
---

生年月日の入力項目のグループ設定

それぞれの入力項目(.form-control)に下記のclassを付与します。

年   .form-birth-year
月   .form-birth-month
日   .form-birth-day

```ejs
<div class="form-birth">
<select name="birth_year" id="birth_year" class="form-control form-birth-year" required>
  <option disabled selected value>西暦</option>
  <option value="2019">2019年</option>
  <option value="2018">2018年</option>
  <option value="2017">2017年</option>
  <option value="2016">2016年</option>
  <option value="2015">2015年</option>
  <option value="2014">2014年</option>
  <option value="2013">2013年</option>
  <option value="2012">2012年</option>
  <option value="2011">2011年</option>
  <option value="2010">2010年</option>
  <option value="2009">2009年</option>
  <option value="2008">2008年</option>
  <option value="2007">2007年</option>
  <option value="2006">2006年</option>
  <option value="2005">2005年</option>
  <option value="2004">2004年</option>
  <option value="2003">2003年</option>
  <option value="2002">2002年</option>
  <option value="2001">2001年</option>
  <option value="2000">2000年</option>
  <option value="1999">1999年</option>
  <option value="1998">1998年</option>
  <option value="1997">1997年</option>
  <option value="1996">1996年</option>
  <option value="1995">1995年</option>
  <option value="1994">1994年</option>
  <option value="1993">1993年</option>
  <option value="1992">1992年</option>
  <option value="1991">1991年</option>
  <option value="1990">1990年</option>
  <option value="1989">1989年</option>
  <option value="1988">1988年</option>
  <option value="1987">1987年</option>
  <option value="1986">1986年</option>
  <option value="1985">1985年</option>
  <option value="1984">1984年</option>
  <option value="1983">1983年</option>
  <option value="1982">1982年</option>
  <option value="1981">1981年</option>
  <option value="1980">1980年</option>
  <option value="1979">1979年</option>
  <option value="1978">1978年</option>
  <option value="1977">1977年</option>
  <option value="1976">1976年</option>
  <option value="1975">1975年</option>
  <option value="1974">1974年</option>
  <option value="1973">1973年</option>
  <option value="1972">1972年</option>
  <option value="1971">1971年</option>
  <option value="1970">1970年</option>
  <option value="1969">1969年</option>
  <option value="1968">1968年</option>
  <option value="1967">1967年</option>
  <option value="1966">1966年</option>
  <option value="1965">1965年</option>
  <option value="1964">1964年</option>
  <option value="1963">1963年</option>
  <option value="1962">1962年</option>
  <option value="1961">1961年</option>
  <option value="1960">1960年</option>
  <option value="1959">1959年</option>
  <option value="1958">1958年</option>
  <option value="1957">1957年</option>
  <option value="1956">1956年</option>
  <option value="1955">1955年</option>
  <option value="1954">1954年</option>
  <option value="1953">1953年</option>
  <option value="1952">1952年</option>
  <option value="1951">1951年</option>
  <option value="1950">1950年</option>
  <option value="1949">1949年</option>
  <option value="1948">1948年</option>
  <option value="1947">1947年</option>
  <option value="1946">1946年</option>
  <option value="1945">1945年</option>
  <option value="1944">1944年</option>
  <option value="1943">1943年</option>
  <option value="1942">1942年</option>
  <option value="1941">1941年</option>
  <option value="1940">1940年</option>
  <option value="1939">1939年</option>
  <option value="1938">1938年</option>
  <option value="1937">1937年</option>
  <option value="1936">1936年</option>
  <option value="1935">1935年</option>
  <option value="1934">1934年</option>
  <option value="1933">1933年</option>
  <option value="1932">1932年</option>
  <option value="1931">1931年</option>
  <option value="1930">1930年</option>
  <option value="1929">1929年</option>
  <option value="1928">1928年</option>
  <option value="1927">1927年</option>
  <option value="1926">1926年</option>
  <option value="1925">1925年</option>
  <option value="1924">1924年</option>
  <option value="1923">1923年</option>
  <option value="1922">1922年</option>
  <option value="1921">1921年</option>
  <option value="1920">1920年</option>
  <option value="1919">1919年</option>
  <option value="1918">1918年</option>
  <option value="1917">1917年</option>
  <option value="1916">1916年</option>
  <option value="1915">1915年</option>
  <option value="1914">1914年</option>
  <option value="1913">1913年</option>
  <option value="1912">1912年</option>
  <option value="1911">1911年</option>
  <option value="1910">1910年</option>
  <option value="1909">1909年</option>
  <option value="1908">1908年</option>
  <option value="1907">1907年</option>
  <option value="1906">1906年</option>
  <option value="1905">1905年</option>
  <option value="1904">1904年</option>
  <option value="1903">1903年</option>
  <option value="1902">1902年</option>
  <option value="1901">1901年</option>
</select>
<select name="birth_month" id="birth_month" class="form-control form-birth-month" required>
  <option disabled selected value>月</option>
  <option value="1">1月</option>
  <option value="2">2月</option>
  <option value="3">3月</option>
  <option value="4">4月</option>
  <option value="5">5月</option>
  <option value="6">6月</option>
  <option value="7">7月</option>
  <option value="8">8月</option>
  <option value="9">9月</option>
  <option value="10">10月</option>
  <option value="11">11月</option>
  <option value="12">12月</option>
</select>
<select name="birth_day" id="birth_day" class="form-control form-birth-day" required>
  <option disabled selected value>日</option>
  <option value="1">1日</option>
  <option value="2">2日</option>
  <option value="3">3日</option>
  <option value="4">4日</option>
  <option value="5">5日</option>
  <option value="6">6日</option>
  <option value="7">7日</option>
  <option value="8">8日</option>
  <option value="9">9日</option>
  <option value="10">10日</option>
  <option value="11">11日</option>
  <option value="12">12日</option>
  <option value="13">13日</option>
  <option value="14">14日</option>
  <option value="15">15日</option>
  <option value="16">16日</option>
  <option value="17">17日</option>
  <option value="18">18日</option>
  <option value="19">19日</option>
  <option value="20">20日</option>
  <option value="21">21日</option>
  <option value="22">22日</option>
  <option value="23">23日</option>
  <option value="24">24日</option>
  <option value="25">25日</option>
  <option value="26">26日</option>
  <option value="27">27日</option>
  <option value="28">28日</option>
  <option value="29">29日</option>
  <option value="30">30日</option>
  <option value="31">31日</option>
</select>
</div>
```
*/
.form-birth {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.form-birth .form-control + .form-control {
    margin-left: 15px;
}
.form-birth .form-birth-year {
    width: 135px;
}
.form-birth .form-birth-month {
    width: 90px;
}
.form-birth .form-birth-day {
    width: 90px;
}
@media screen and (max-width: 767px) {
    .form-birth {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .form-birth .form-birth-year {
        width: 37.31343%;
    }
    .form-birth .form-birth-month {
        width: 25.37313%;
    }
    .form-birth .form-birth-day {
        width: 25.37313%;
    }
}

/*doc
---
name: その他フォーム用パーツ
category: モジュール
tag: フォーム
---

・必須項目
・保険入力欄用ラベル

```ejs
<p>必須項目</p>
<p>ダミーテキストです。<span class="required">必須</span></p>

<hr>
<p>保険入力欄用ラベル</p>
<div class="form-vertical">
<label for="hoken_number1" class="label-hoken">（記号）</label>
<input id="hoken_number1" type="text" class="form-control is-middle" required>
</div>
<div class="form-vertical">
<label for="hoken_number2" class="label-hoken">（番号）</label>
<input id="hoken_number2" type="text" class="form-control is-middle" required>
</div>
<div class="form-vertical">
<label for="hoken_number3" class="label-hoken">（保険者番号）</label>
<input id="hoken_number3" type="text" class="form-control is-middle" required>
</div>
<hr>
<p>保険証見本画像</p>
<figure class="form-hoken-image">
<img src="/assets/img/common/image_insurance.jpg" alt="" width="242" height="153">
</figure>
```
*/
.required {
    display: inline-block;
    padding-right: 0.5em;
    padding-left: 0.5em;
    color: #fff;
    font-size: 0.85em;
    font-weight: bold;
    background-color: #ca0f24;
}

@media screen and (max-width: 767px) {
    .form-hoken-image {
        margin-top: 15px;
        text-align: center;
    }
}

.label-hoken {
    display: inline-block;
    min-width: 115px;
}

.is-signin .input-item {
    margin: 20px auto 10px;
}

.is-signin .input-item dt {
    font-weight: 600;
}

.is-signin .input-item dd {
    padding: 0 0 15px;
}

.is-signin .form-control {
    width: 100%;
}

@media screen and (max-width: 991px) {
    .is-signin .input-item {
        margin-bottom: 10px;
    }
}

/*doc
---
name: グローナルナビ
category: モジュール
tag: [ヘッダー, ナビゲーション]
---

ログイン時グローバルナビ

```ejs

<div style="background: #ccc;">
<ul class="gnav">
    <li><a href="">メニュー１</a></li>
    <li><a href="">メニュー2</a></li>
    <li><a href="">メニュー3</a></li>
</ul>
</div>

```
*/
.gnav {
    display: table;
}

.gnav > li {
    display: table-cell;
    height: 50px;
    color: #fff;
    font-weight: bold;
    vertical-align: top;
    /* border-right: ; */
}







.gnav > li {
    border-right: solid 1px #fff;
}
.gnav > li:first-child {
    border-left: solid 1px #fff;
}

.gnav > li > a {
    display: block;
    height: 60px;
    padding: 0 22px;
    color: #fff;
    line-height: 60px;
    text-align: center;
}
@media screen and (max-width: 991px) {
    .gnav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .gnav > li {
        display: list-item;
        width: 50%;
        max-width: 50%;
        border-bottom: solid 1px #fff;
    }
    .gnav > li:first-child {
        width: 100%;
        max-width: 100%;
    }
    .gnav > li > a {
        height: 50px;
        padding-right: 10px;
        padding-left: 10px;
        line-height: 50px;
    }
    .gnav > li:nth-child(odd) {
        border-right: 0;
    }
    .gnav > li:first-child {
        border-left: 0;
    }
}

/*doc
---
name: 施設名ロゴ
category: モジュール
tag: ヘッダー
---

ヘッダーサイト管理施設名

```ejs
<div class="admin-logo"><img src="../assets/img/admin/logo.jpg" alt=""></div>
```
*/
.admin-logo {
    margin-right: 15px;
    text-align: center;
}
@media screen and (max-width: 991px) {
    .admin-logo {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/*doc
---
name: 施設名
category: モジュール
tag: ヘッダー
---

ヘッダーサイト管理施設名

```ejs
<h1 class="admin-name"><small>医療法人</small>ICC検診センター</h1>
<h1 class="admin-name is-small"><small>医療法人</small>施設名文字数が多いとき用に文字サイズ小さいバージョン</h1>
```
*/
.admin-name {
    max-width: 40%;
    margin-right: auto;
    font-size: 3.2rem;
    line-height: 1.25;
}
.admin-name > small {
    display: block;
    font-size: 1.6rem;
}
.admin-name.is-small {
    font-size: 2rem;
}
@media screen and (max-width: 991px) {
    .admin-name {
        width: 100%;
        max-width: none;
        text-align: center;
    }
}
@media screen and (max-width: 767px) {
    .admin-name {
        font-size: 3rem;
    }
    .admin-name.is-small {
        font-size: 1.8rem;
    }
}

/*doc
---
name: 連絡先
category: モジュール
tag: ヘッダー
---

ヘッダーお問い合わせ先

```ejs

<p class="contact-info">
    <i class="contact-info-icon fa fa-question-circle"></i>
    <span class="contact-info-text">ご不明な点等ございましたら<br>気軽にご連絡ください</span>
    <span id="adminTel" class="contact-info-tel"><i class="fa fa-phone fa-flip-horizontal"></i>000-000-0000</span>
</p>

```
*/
.contact-info {
    max-width: 55%;
    height: 80px;
    text-align: right;
}
@media screen and (max-width: 991px) {
    .contact-info {
        width: 100%;
        max-width: none;
        height: auto;
        text-align: center;
    }
}

.contact-info-icon {
    margin-top: 20px;
    margin-right: 7px;
    color: #888;
    font-size: 40px;
}
@media screen and (max-width: 991px) {
    .contact-info-icon {
        margin-top: 0;
        margin-right: 3px;
        font-size: 2rem;
    }
}

.contact-info-text {
    display: inline-block;
    margin-top: 5px;
    margin-right: 22px;
    color: #666;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4375;
    text-align: left;
}
@media screen and (max-width: 991px) {
    .contact-info-text {
        margin-top: 0;
        margin-right: 0;
        font-size: 1.3rem;
        vertical-align: text-top;
    }
    .contact-info-text br {
        display: none;
    }
}

.contact-info-note {
    display: inline-block;
    margin-top: 0px;
    margin-right: 22px;
    color: #666;
    font-size: 1.4rem;
    vertical-align: text-middle;
    text-align: right;
}

.contact-info-tel {
    display: inline-block;
    min-width: 225px;
    height: 42px;
    margin-top: 19px;
    padding: 0 16px;
    border-radius: 21px;
    color: #fff;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 42px;
    vertical-align: top;
    background-color: #666;
}
.contact-info-tel > i {
    margin-right: 6px;
    font-size: 2.1rem;
}
@media screen and (max-width: 991px) {
    .contact-info-tel {
        display: block;
        max-width: 336px;
        margin-top: 10px;
        margin-right: auto;
        margin-left: auto;
    }
}

/*doc
---
name: ログアウト
category: モジュール
tag: [ヘッダー, ボタン, 配色設定あり]
---

ヘッダーログアウトボタン

```ejs
<button class="userlogout">
    <span class="userlogout-icon fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-sign-out-alt fa-stack-1x fa-inverse"></i>
    </span>
    <small>ログアウト</small>
</button>
```
*/
.userlogout {
    position: relative;
    width: 100%;
    height: 60px;
    padding: 8px 0 0;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    background-color: #333;
}
.userlogout > small {
    display: inline-block;
    width: 100%;
    font-size: 10px;
    font-weight: bold;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}
@media screen and (max-width: 991px) {
    .userlogout {
        max-width: 336px;
        height: 50px;
        padding-top: 0;
    }
    .userlogout > small {
        font-size: 2rem;
    }
}

.userlogout-icon .fa-inverse {
    color: #333;
}

@media screen and (max-width: 991px) {
    .userlogout-icon {
        position: absolute;
        top: 50%;
        left: 15px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

/*doc
---
name: ログイン
category: モジュール
tag: [ヘッダー, ボタン, 配色設定あり]
---

ログインボタン

```ejs
<button class="userlogin">
    <i class="fa fa-sign-in-alt userlogin-icon"></i>ログイン
</button>
```
*/
.userlogin {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 32px;
    margin-top: 14px;
    margin-bottom: 14px;
    padding: 0 10px;
    border-radius: 16px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 32px;
    text-align: center;
    background-color: #999;
}
@media screen and (max-width: 991px) {
    .userlogin {
        width: 100%;
        height: 50px;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        border-radius: 0;
    }
    .userlogin > small {
        font-size: 2rem;
    }
}

.userlogin-icon {
    margin-right: 10px;
    font-size: 22px;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    /* display: none; */
}

/*doc
---
name: ユーザー名
category: モジュール
tag: ヘッダー
---

ヘッダーユーザー名

```ejs
<h1 class="admin-name"><small>医療法人</small>ICC検診センター</h1>
<h1 class="admin-name is-small"><small>医療法人</small>施設名文字数が多いとき用に文字サイズ小さいバージョン</h1>
```
*/
.user-name {
    height: 60px;
    margin-left: auto;
    padding-top: 5px;
    padding-right: 35px;
    padding-left: 35px;
    border: 0;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
}
.user-name small {
    font-size: 1rem;
}
@media screen and (max-width: 991px) {
    .user-name {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 20px;
        text-align: center;
    }
    .user-name br {
        display: none;
    }
    .user-name small {
        margin-right: 1em;
    }
}

/*doc
---
name: インフォメーションリスト
category: モジュール
tag: リスト
---

インフォメーションリスト

```ejs

<dl class="information">
  <div class="information-row">
    <dt><time>2018/04/01</time><span>ダミー健診WEB予約サービス開始！！</span></dt>
    <dd>健診WEB予約サービスを開始しました。</dd>
  </div>
  <div class="information-row">
    <dt><time>2018/04/01</time><span>これはダミーです健診WEB予約サービス開始！！</span></dt>
    <dd>健診WEB予約サービスを開始しました。</dd>
  </div>
  <div class="information-row">
    <dt><time>2018/04/01</time><span>この文章はダミーテキストです。文字サイズや行間などを確認するために入れています。</span></dt>
    <dd>この文章はダミーテキストです。文字サイズや行間などを確認するために入れています。</dd>
  </div>
</dl>

```
*/
.information {
    overflow-y: scroll;
    height: 180px;

    -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 767px) {
    .information {
        height: 321px;
    }
}

.information-row:nth-child(even) {
    background-color: #f2f2f2;
}

.information-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.information-row > dd,
.information-row > dt {
    width: 50%;
}
.information-row > dt {
    padding: 20px;
    font-weight: bold;
}
.information-row > dd {
    display: table;
    padding: 20px 20px 20px 0;
    word-break: break-all;
}
.information-row > dt time {
    display: table-cell;
    padding-right: 15px;
    color: #333;
    font-weight: normal;
}
.information-row > dt span {
    display: table-cell;
    word-break: break-all;
}
.information-row a {
    color: #000;
}
@media screen and (max-width: 767px) {
    .information-row > dd,
    .information-row > dt {
        width: 100%;
    }
    .information-row > dt {
        padding: 10px 20px 0;
    }
    .information-row > dt time {
        display: block;
        font-size: 1.4rem;
    }
    .information-row > dt span {
        display: block;
        /* font-size: 2rem; */
        font-size: 1.6rem; /* ICC */
    }
    .information-row > dd {
        padding: 0 20px 10px 20px;
        font-size: 1.6rem;
    }
}

/*doc
---
name: リンクボックス
category: モジュール
tag: [ボックス, 配色設定あり]
---

リンクボタンとテキストの組み合わせ

```ejs

<div class="linkbox">
    <a href="#" class="linkbox-btn">
        <span class="linkbox-btn-inner">ダミーテキストです。組合<i class="fas fa-chevron-right linkbox-btn-icon"></i></span>
    </a>
    <div class="linkbox-text">
        <p>ダミーテキストです。組合に加入の方が申し込みできます。</p>
    </div>
</div>

```
*/
.linkbox {
    overflow: hidden;
    border-radius: 30px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
}
.linkbox .linkbox-btn {
    display: table;
    position: relative;
    width: calc(100% + 1px);
    min-height: 100px;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    background-color: #666;
}
.linkbox .linkbox-btn-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    color: #fff;
    font-size: 13px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.linkbox .linkbox-btn-inner {
    display: table-cell;
    padding: 15px 38px;
    line-height: 1.55556;
    text-align: center;
    vertical-align: middle;
}
.linkbox .linkbox-text {
    padding: 20px;
    text-align: left;
}

/*doc
---
name: リンクボックスグループ
category: モジュール
tag: グルーピング
---

リンクボックスのグループ

```ejs

<div class="linkbox-group">
    <div class="linkbox">
        <a href="#" class="linkbox-btn">
            <span class="linkbox-btn-inner">ダミーテキストです。組合<i class="fas fa-chevron-right linkbox-btn-icon"></i></span>
        </a>
        <div class="linkbox-text">
            <p>ダミーテキストです。組合に加入の方が申し込みできます。</p>
        </div>
    </div>
    <div class="linkbox">
        <a href="#" class="linkbox-btn">
            <span class="linkbox-btn-inner">ダミーテキストです。組合<i class="fas fa-chevron-right linkbox-btn-icon"></i></span>
        </a>
        <div class="linkbox-text">
            <p>ダミーテキストです。組合に加入の方が申し込みできます。ダミーテキストです。組合に加入の方が申し込みできます。</p>
        </div>
    </div>
    <div class="linkbox">
        <a href="#" class="linkbox-btn">
            <span class="linkbox-btn-inner">ダミーテキストです。組合<i class="fas fa-chevron-right linkbox-btn-icon"></i></span>
        </a>
        <div class="linkbox-text">
            <p>ダミーテキストです。組合に加入の方が申し込みできます。</p>
        </div>
    </div>
</div>

```
*/
.linkbox-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: -30px;
    margin-left: -30px;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.linkbox-group .linkbox {
    width: calc(33.3333% - 30px);
    margin-bottom: 30px;
    margin-left: 30px;
}
@media screen and (max-width: 991px) {
    .linkbox-group .linkbox {
        width: calc(50% - 30px);
    }
}
@media screen and (max-width: 767px) {
    .linkbox-group {
        margin-bottom: -20px;
        margin-left: -20px;
    }
    .linkbox-group .linkbox {
        width: 100%;
        margin-bottom: 20px;
        margin-left: 20px;
    }
}

/*doc
---
name: リンクボタン
category: モジュール
tag: [リンク, 配色設定あり]
---

リンクボタンスタイル

リンクボタンの幅は親要素の幅に依存します。

ボックスの中や、グリッドシステムと組み合わせて使います。

また、特定のクラスを付与することで、ボタンのスタイルを用途によって変更します。


```ejs

<div class="theme-personal">
<p>デフォルト<p>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new"><span class="linkbtn-inner">受信者情報を登録する</span></a></div>
<hr>
<h3 class="l-section-sm">サイズバリエーション</h3>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new is-small"><span class="linkbtn-inner">is-small</span></a></div>
<hr>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new is-large"><span class="linkbtn-inner">is-large</span></a></div>
<hr>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new is-reserve"><span class="linkbtn-inner">予約申し込み</span></a></div>
<hr>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new is-cancel"><span class="linkbtn-inner">予約確認</span></a></div>
<hr>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new is-login"><span class="linkbtn-inner">ログイン</span></a></div>
<hr>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new is-clear"><span class="linkbtn-inner">クリア</span></a></div>
<hr>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new is-password"><span class="linkbtn-inner">パスワード</span></a></div>
<hr>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new is-pdf"><span class="linkbtn-inner">pdf</span></a></div>
<hr>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new is-search"><span class="linkbtn-inner">検索する</span></a></div>
<hr>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new is-search is-type-large"><span class="linkbtn-inner">検索する</span></a></div>
<hr>
<div class="linkbtn-wrap"><a href="" class="linkbtn-new is-output-csv"><span class="linkbtn-inner">CSV</span></a></div>
<hr>
<p class="l-section-sm"><b>どうしても幅設定が必要になった場合の設定例</b></p>
<div class="linkbtn-wrap" style="width:300px"><a href="" class="linkbtn-new"><span class="linkbtn-inner">300px</span></a></div>

</div>

*/

.linkbtn-wrap {
    padding-bottom: 2px;
}
.linkbtn,
.linkbtn-new {
    display: table;
    position: relative;
    width: 100%;
    height: 60px;
    min-height: 60px;
    margin-right: auto;
    margin-left: auto;
    padding: 0.5em 1.5em;
    border-bottom: solid 2px #aaa;
    border-radius: 15px;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    background-color: #999;
}
.linkbtn::before,
.linkbtn-new::before {
    content: "\f054";
    position: absolute;
    top: 50%;
    right: 15px;
    font-family: "Font Awesome 5 Free";
    font-size: 18px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.linkbtn::after,
.linkbtn-new::after {
    font-size: 35px;
}
.linkbtn-wrap:hover .linkbtn-new,
.linkbtn-wrap:active .linkbtn-new,
.linkbtn-wrap:focus .linkbtn-new,
.linkbtn:hover,
.linkbtn:active,
.linkbtn:focus {
    border-bottom: 0;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}
.linkbtn.is-selected,
.linkbtn-new.is-selected {
    border-bottom: 0;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}
.linkbtn.is-clear,
.linkbtn-new.is-clear {
    border-bottom-color: #bbb !important;
    background-color: #ccc !important;
}
.linkbtn.is-clear::before,
.linkbtn-new.is-clear::before {
    content: none;
}
.linkbtn.is-password,
.linkbtn-new.is-password {
    border-bottom-color: #888 !important;
    color: #333 !important;
    background-color: #e4e4e4 !important;
}
.linkbtn-wrap:hover .linkbtn-new.is-password,
.linkbtn.is-password:hover {
    border-bottom: 0;
}
.linkbtn.is-reserve,
.linkbtn-new.is-reserve {
    padding-left: 3em;
}
.linkbtn.is-reserve::after,
.linkbtn-new.is-reserve::after {
    content: "\f15c";
    position: absolute;
    top: 50%;
    left: 25px;
    font-family: "Font Awesome 5 Free";
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.linkbtn.is-cancel,
.linkbtn-new.is-cancel {
    padding-left: 3em;
}
.linkbtn.is-cancel::after,
.linkbtn-new.is-cancel::after {
    content: "\f14a";
    position: absolute;
    top: 50%;
    left: 25px;
    font-family: "Font Awesome 5 Free";
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.linkbtn.is-login,
.linkbtn-new.is-login {
    padding-left: 3em;
}
.linkbtn.is-login::after,
.linkbtn-new.is-login::after {
    content: "\f2f6";
    position: absolute;
    top: 50%;
    left: 25px;
    font-family: "Font Awesome 5 Free";
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.linkbtn.is-pdf,
.linkbtn-new.is-pdf {
    /*width: 200px;*/
    height: 40px;
    min-height: 40px;

    padding-left: 2.1em;
    font-size: 1.4rem;
}
.linkbtn.is-pdf::before,
.linkbtn-new.is-pdf::before {
    content: none;
}
.linkbtn.is-pdf::after,
.linkbtn-new.is-pdf::after {
    content: "\f1c1";
    position: absolute;
    top: 50%;
    left: 15px;
    font-family: "Font Awesome 5 Free";
    font-size: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.linkbtn.is-search,
.linkbtn-new.is-search {
    padding-left: 1.5em;
}
.linkbtn.is-search::after,
.linkbtn-new.is-search::after {
    content: "\f002";
    position: absolute;
    top: 50%;
    left: 25px;
    font-family: "Font Awesome 5 Free";
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* ICC add 問診入力アイコン */
.linkbtn.is-monshin,
.linkbtn-new.is-monshin {
    padding-left: 3em;
}
.linkbtn.is-monshin::after,
.linkbtn-new.is-monshin::after {
    content: "\f573";
    position: absolute;
    top: 50%;
    left: 25px;
    font-family: "Font Awesome 5 Free";
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media screen and (max-width: 575px) {
    .linkbtn.is-search::after,
    .linkbtn-new.is-search::after {
        left: 13px;
        font-size: 24px;
    }
}

.linkbtn.is-search.is-type-large,
.linkbtn-new.is-search.is-type-large {
    padding-left: 1.5em;
}

.linkbtn.is-search.is-type-large::after,
.linkbtn-new.is-search.is-type-large::after {
    font-size: 26px;
}

@media screen and (max-width: 575px) {
    .linkbtn.is-search.is-type-large ,
    .linkbtn-new.is-search.is-type-large {
        padding-left: 1.2em;
    }
    .linkbtn.is-search.is-type-large::after,
    .linkbtn-new.is-search.is-type-large::after {
        left: 13px;
        font-size: 24px;
    }
}
.linkbtn.is-output-csv,
.linkbtn-new.is-output-csv {
    padding-left: 1.5em;
    height: 50px;
    min-height: 50px;
    font-size: 1.8rem;
}
.linkbtn.is-output-csv::after,
.linkbtn-new.is-output-csv::after {
    content: "\f6dd";
    position: absolute;
    top: 50%;
    left: 25px;
    font-family: "Font Awesome 5 Free";
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 28px;
}
@media screen and (max-width: 767px) {
    .linkbtn.is-output-csv,
    .linkbtn-new.is-output-csv {
        font-size: 18px;
    }
    .linkbtn.is-output-csv::after,
    .linkbtn-new.is-output-csv::after {
        font-size: 23px;
    }
}
.linkbtn.is-small,
.linkbtn-new.is-small {
    border-radius: 30px;
}
@media screen and (max-width: 767px) {
    .linkbtn.is-small,
    .linkbtn-new.is-small {
        height: 40px;
        min-height: 40px;
        font-size: 1.5rem;
    }
    .linkbtn.is-small::after,
    .linkbtn-new.is-small::after {
        font-size: 25px;
    }
}
.linkbtn.is-large,
.linkbtn-new.is-large {
    height: 140px;
    min-height: 140px;
    border-radius: 30px;
    font-size: 2.4rem;
}
.linkbtn.is-large::after,
.linkbtn-new.is-large::after {
    font-size: 52px;
}

.linkbtn-inner {
    display: table-cell;
    line-height: 1.2;
    text-align: center;
    vertical-align: middle;
}

/*doc
---
name: リンクボタングループ
category: モジュール
tag: [グルーピング, リンク]
---

リンクボタングループ

（グリッドシステムとの組み合わせ）

```ejs

<div class="l-row l-section-md linkbtn-group">
    <div class="l-col-12 l-col-md-6 l-col-lg-4 linkbtn-group-1">
        <div class="linkbtn-wrap"><a href="" class="linkbtn-new is-large is-reserve"><span class="linkbtn-inner">予約申込み</span></a></div>
    </div>
    <div class="l-col-12 l-col-md-6 l-col-lg-4">
        <div class="linkbtn-wrap"><a href="" class="linkbtn-new is-large is-cancel"><span class="linkbtn-inner">予約確認(取消)</span></a></div>
    </div>
    <div class="l-col-12 l-col-lg-4 linkbtn-group-2">
        <div class="linkbtn-wrap"><a href="" class="linkbtn-new"><span class="linkbtn-inner">ログイン情報変更</span></a></div>
        <div class="linkbtn-wrap"><a href="" class="linkbtn-new"><span class="linkbtn-inner">受診者情報変更</span></a></div>
    </div>
</div>

```
*/
.linkbtn-group .linkbtn-wrap + .linkbtn-wrap,
.linkbtn-group .linkbtn + .linkbtn {
    margin-top: 20px;
}

@media screen and (max-width: 991px) {
    .linkbtn-group-2 {
        margin-top: 20px;
    }
}

@media screen and (max-width: 767px) {
    .linkbtn-group .linkbtn-wrap + .linkbtn-wrap,
    .linkbtn-group .linkbtn-new + .linkbtn-new {
        margin-top: 15px;
    }
    .linkbtn-group-1 {
        margin-bottom: 15px;
    }
}

.list-signin-btn li {
    padding: 10px 20px 15px;
}

/*doc
---
name: タブ
category: モジュール
tag: [グルーピング, ナビゲーション]
---

タブで切り替えるコンテンツのモジュールです。
中身が多いタブがあり、タブコンテンツの高さが不揃いの場合、タブ切り替え時に
ブラウザがズレて表示されることがあります。
.tab-contentのmin-heightである程度の高さを確保することで、
表示ズレを軽減することができます。

```ejs

<!-- タブボタン部分 -->
<!-- タブボタンのアンカーには必ず"is-noscroll"を記述する -->
<ul class="nav nav-tabs">
    <li class="nav-item">
      <a href="#tab1" class="nav-link active is-noscroll" data-toggle="tab"><span class="nav-link-inner">コンテンツ1</span></a>
    </li>
    <li class="nav-item">
      <a href="#tab2" class="nav-link is-noscroll" data-toggle="tab"><span class="nav-link-inner">コンテンツ2</span></a>
    </li>
    <li class="nav-item">
      <a href="#tab3" class="nav-link is-noscroll" data-toggle="tab"><span class="nav-link-inner">コンテンツ3</span></a>
    </li>
    <li class="nav-item">
      <a href="#tab4" class="nav-link is-noscroll" data-toggle="tab"><span class="nav-link-inner">コンテンツ4</span></a>
    </li>
</ul>
<!--タブのコンテンツ部分-->
<div class="tab-content">
    <div id="tab1" class="tab-pane active">
        コンテンツ１
    </div>
    <div id="tab2" class="tab-pane">
        コンテンツ２
    </div>
    <div id="tab3" class="tab-pane">
        コンテンツ３
    </div>
    <div id="tab4" class="tab-pane">
        コンテンツ4
    </div>
</div>
```
*/
.nav-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 30px;
    margin-right: -10px;
    margin-left: -10px;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.nav-tabs .nav-item {
    width: 25%;
    padding-right: 10px;
    padding-left: 10px;
}
.nav-tabs .nav-link {
    display: table;
    position: relative;
    width: 100%;
    height: 60px;
    border-bottom: solid 2px #888;
    border-radius: 30px;
    color: #333;
    font-size: 1.8rem;
    font-weight: bold;
    background-color: #e4e4e4;
}
.nav-tabs .nav-link::before {
    content: "\f078";
    position: absolute;
    top: 50%;
    right: 20px;
    color: #333;
    font-family: "Font Awesome 5 Free";
    font-size: 13px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.nav-tabs .nav-link:hover {
    border-bottom: 0;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}
.nav-tabs .nav-link-inner {
    display: table-cell;
    position: relative;
    width: 100%;
    padding-right: 38px;
    padding-left: 38px;
    text-align: center;
    vertical-align: middle;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-bottom: 0;
    color: #fff;
    background-color: #666;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}
.nav-tabs .nav-link.active::before,
.nav-tabs .nav-item.show .nav-link::before {
    color: #fff;
}
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-item.show .nav-link::after {
    content: "";
    display: block;
}
@media screen and (max-width: 991px) {
    .nav-tabs {
        margin-right: -5px;
        margin-left: -5px;
    }
    .nav-tabs .nav-item {
        width: 50%;
        margin-bottom: 15px;
        padding-right: 5px;
        padding-left: 5px;
    }
}
@media screen and (max-width: 767px) {
    .nav-tabs .nav-link {
        height: 40px;
        font-size: 1.5rem;
    }
    .nav-tabs .nav-link::before {
        right: 15px;
        font-size: 10px;
    }
    .nav-tabs .nav-link-inner {
        padding-right: 28px;
        padding-left: 28px;
    }
}

.tab-content {
    position: relative;
    min-height: 482px;
    margin-top: 40px;
    padding: 30px;
    border-radius: 45px;
    background-color: #e6e6e6;
    /* 最小高さ設定 */
}
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
}
@media screen and (max-width: 991px) {
    .tab-content {
        margin-top: 15px;
        padding: 0;
        background-color: transparent;
    }
}

.btn-order-by {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row-reverse;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {
    .btn-order-by {
        display: inherit;
    }
}

.box-check {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 20px 20px;
    background-color: #e6e6e6;
}

.box-check .box-check-text {
    font-size: 2.2rem;
    font-weight: bold;
}

@media screen and (max-width: 991px) {
    .box-check {
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 15px 10px;
        line-height: 1.537;
    }
    .box-check .box-check-text {
        font-size: 2rem;
    }
}

.contact-guide {
    margin: 30px auto 0;
}

.contact-guide dt {
    padding: 5px 0;
    font-weight: 600;
}

.contact-guide dd {
    padding: 0 5px;
}

.box-guidance {
    min-height: 300px;
    padding: 50px 15px;
}

@media screen and (max-width: 991px) {
    .box-guidance {
        min-height: auto;
        padding: 15px 20px;
    }
}

.box-select-type {
    position: relative;
    margin-top: 40px;
    padding: 30px;
    border-radius: 45px;
    background-color: #e6e6e6;
}

@media screen and (max-width: 991px) {
    .box-select-type {
        margin-top: 15px;
        padding: 0;
        background-color: transparent;
    }
}

.flow-info {
    text-align: left;
}

.flow-info p {
    text-align: left;
}

.l-form.form-conf .l-form-input {
    padding: 19px 20px;
}

@media screen and (max-width: 991px) {
    .l-form.form-conf .l-form-input {
        padding: 0;
    }
    .l-form.form-conf .l-form-label {
        padding-bottom: 0.6em;
    }
    .l-form.form-conf .form-vertical-md + .form-vertical-md {
        margin-top: 5px;
    }
    .form-conf .l-form-row {
        padding-bottom: 2em;
        border-bottom: 1px solid #ccc;
    }
    .form-conf .l-form-row:first-child {
        padding-top: 1em;
    }
    .form-conf .l-form-row:last-child {
        padding-bottom: 0.3em;
        border: 0;
    }
}

.table-item {
    width: 100%;
}

.table-item td,
.table-item th {
    padding: 10px 15px;
    border: 1px solid #cdcdcd;
}

.table-item th {
    text-align: center;
    background: #e6e6e6;
    /* color: ; */
}

.table-item td {
    line-height: 1.5;
}
@media screen and (max-width: 767px) {
    .table-item td, .table-item th {
        padding: 2px;
        /* border: 1px solid #cdcdcd;*/
        font-size: 1.2rem;
    }
}
    
.table-item td.cell-fee {
    text-align: right;
    white-space: nowrap;
}

.table-item td.cell-total {
    font-size: 1.8rem;
    text-align: right;
}
@media screen and (max-width: 767px) {
    .table-item td.cell-checkbox {
        width: fit-content;
    }
}
    
/* オプション項目名 */
.table-item td.itemname {
    cursor: pointer;
}
    
.box-result {
    position: relative;
    margin-top: 40px;
    padding: 30px 30px 0;
    border-radius: 45px;
    background-color: #e6e6e6;
}

@media screen and (max-width: 991px) {
    .box-result {
        padding: 20px 20px 0;
        border-radius: 30px;
    }
}

@media screen and (max-width: 575px) {
    .box-result {
        padding: 15px 15px 0;
        border-radius: 20px;
    }
}

.calendar {
    width: 100%;
    margin-bottom: 30px;
    background: #fff;
}

.calendar caption {
    padding: 8px 13px;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    background-color: #666;
}

.calendar th,
.calendar td {
    border: 1px solid #888;
    text-align: center;
}

.calendar th {
    padding: 3px 5px;
    background-color: #f2f2f2;
}

.calendar td {
    width: 14.28571%;
    color: #999;
    vertical-align: top;
}

.calendar td a {
    display: block;
    padding: 3px 5px;
    color: #000;
}

.calendar td .is-no-link,
.calendar td .is-close {
    display: block;
    padding: 3px 5px;
}

.calendar td .is-close {
    background-color: #cdcdcd;
}

/*曜日*/
.calendar td.is-sat, /* ICC */
.calendar td.is-sat > span,
.calendar td.is-sat > a {
    background-color: #d1ecf1;
}

.calendar td.is-holiday, /* ICC */
.calendar td.is-holiday > span,
.calendar td.is-holiday > a {
    background-color: #f8d7da;
}

th.is-holiday {
    background-color: #ef8f9a;
    /* border: 0px, none; */
}

th.is-sat {
    background-color: #83c4e9;
    /* border: 0px, none; */
}

/* .calendar th {
    background-color: #e6e6e6;
    border: 0px, none;
} */

.calendar td .calendar-date {
    display: block;
    font-size: 1.8rem;
}

.calendar td a .calendar-date {
    font-weight: bold;
}

.calendar-icon {
    font-size: 1.8rem;
}

.calendar-icon.is-ok {
    color: #ca0f24;
    font-weight: 500;
}

.calendar-icon.is-no {
    font-size: 1.4rem;
}

.nav-calendar {
    margin-bottom: 2em;
}

.nav-calendar .btn.is-small,
.nav-calendar .btn-new.is-small,
.nav-calendar .btn-new.is-small .btn-inner
 {
    width: 100%;
    min-width: 100%;
    margin: 0;
}

@media screen and (max-width: 991px) {
    .nav-calendar .btn.is-small,
    .nav-calendar .btn-new.is-small .btn-inner {
        margin-bottom: 20px;
    }
    .nav-calendar {
        margin-bottom: 0;
    }
}

.calendar-guide {
    margin-bottom: 30px;
    padding: 8px 15px;
    text-align: center;
    background: #fff;
}

.calendar-guide li {
    display: inline;
    padding: 0 10px;
    color: #000;
}

.calendar-guide li .is-no {
    color: #999;
}

@media screen and (max-width: 991px) {
    .calendar-guide {
        margin-top: 5px;
        margin-bottom: 20px;
    }
    .calendar-guide li {
        display: block;
        padding: 0 10px;
        color: #000;
    }
}

.select-title {
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 0.4em 20px;
    color: #fff;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.22727;
    text-align: center;
    background-color: #666;
}

.is-reserve-conf .select-title {
    text-align: left;
}

@media screen and (max-width: 575px) {
    .select-title {
        margin-right: -20px;
        margin-left: -20px;
        font-size: 2.2rem;
    }
}

.nav-date {
    margin-top: 40px;
    margin-bottom: 40px;
}

.nav-date .btn {
    width: 100%;
    min-width: 100%;
}

.reservation-card {
    overflow: hidden;
    margin: 30px auto 30px;
    padding: 30px 30px 10px;
    border: solid 1px #cdcdcd;
    border-radius: 35px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
}

.reservation-card-number {
    color: #666;
    font-size: 2.3rem;
    font-weight: bold;
}

@media screen and (max-width: 991px) {
    .reservation-card-number {
        font-size: 2rem;
    }
}

.reservation-card .l-userinfo {
    margin: 20px 0;
}

.reservation-card .btn-group {
    margin-top: 0;
}

.reservation-card-meesage {
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
}

.reservation-card-meesage i {
    margin-right: 5px;
    color: #666;
    font-size: 1.6em;
    vertical-align: middle;
}

.text-memo {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: bold;
    line-height: 1.4;
}

.text-memo i {
    color: #666;
}

@media screen and (max-width: 767px) {
    .text-memo {
        font-weight: normal;
        line-height: 1.75;
    }
}

.client-menu {
    margin-top: 45px;
}

@media screen and (max-width: 991px) {
    .client-menu {
        margin-top: 25px;
    }
    .client-menu .linkbtn,
    .client-menu .linkbtn-wrap {
        margin-bottom: 20px;
    }
}

.form-options {
    padding-top: 10px;
}

.wrap-result {
    margin-top: 65px;
    /*padding: 30px 30px 20px;*/
    padding: 30px 26px 20px;
    background: #f6f6f6;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width: 575px) {
    .wrap-result {
        margin-top: 35px;
        margin-right: -30px;
        margin-left: -30px;
        padding: 20px 25px 20px;
    }
}

.wrap-result.is-news {
    margin-top: 30px;
    /*padding: 30px 28px 30px;*/
    padding: 30px 26px 30px;
}

@media screen and (max-width: 575px) {
    .wrap-result.is-news {
        margin-top: 15px;
    }
}

.table-result-container{
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.table-result-header{
    position: absolute;
    top: 0;
    left: 0;
}

.table-result-body{
    max-height: 485px;
    overflow: auto;
}

.table-result {
    width: 100%;
    background-color: #fff;
}

.table-result p{
    display: inline-block;
}

@media screen and (max-width: 991px) {
    .table-result {
        min-width: 900px;
    }
}

.table-result td,
.table-result th {
    padding: 8px 7px;
    border: 1px solid #cdcdcd;
    text-align: center;
    word-break: break-all;
}

.table-result tr:nth-child(odd) {
    background-color: #ffffff; /* ICC */
}
.table-result tr:nth-child(even) { /* ICC */
    background-color: #fafafa;
}

.table-result th {
    color: #fff;
    text-align: center;
    background: #666;
}

.table-result td {
    line-height: 1.5;
}

@media screen and (max-width: 575px) {
    .table-result td {
        text-align: left;
    }
}

.table-result.js-choise tr:hover {
    background-color: #99ffff; /* ICC */
}
.table-result.js-choise tr.is-active-tr {
    background-color: #ffff66; /* ICC */
}
.table-result.is-news {
    background: #f6f6f6;
}

.table-result.is-news td,
.table-result.is-news th {
    height: 41px;
}

.table-result.is-news .td-title {
    min-width: 282px;
    max-width: 282px;
}
.table-result.is-news .td-title p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 370px; /* ICC インフォメーションの表示幅-20px */
    padding-left: 6px;
    padding-right: 6px;
}
.table-result.is-news td.td-title p {
    text-align: left;
}
.table-result.is-news .td-start-date {
    max-width: 190px;
    min-width: 190px;
}
.table-result.is-news .td-end-date {
    min-width: 190px;
    max-width: 190px;
}
.table-result.is-news .td-top {
    min-width: 130px;
    max-width: 130px;
}
.table-result.is-news .td-mypage {
    min-width: 130px;
    max-width: 130px;
}

.table-result.is-news tbody {
    display: block;
    /*overflow-y: scroll;*/
}

.table-result.is-reserve {
    background-color: #f6f6f6;
    /*width: 681px;*/
}

@media screen and (max-width: 991px) {
    .table-result.is-reserve {
        min-width: 681px;
    }
}

.table-result.is-reserve .td-number {
    min-width: 45px;
    max-width: 45px;
    text-align: center;
}

.table-result.is-reserve .td-section {
    text-align: left;
    min-width: 146px;
    max-width: 146px;
}

.table-result.is-reserve .td-name {
    text-align: left;
    min-width: 255px;
    max-width: 255px;
    word-break : break-all; /* ICC */
}

.table-result.is-reserve .td-schedule {
    text-align: center;
    min-width: 223px;
    max-width: 223px;
}

.table-result.is-reserve th {
    text-align: center;
}

.pagenavi {
    margin: 10px 0 0;
    padding: 10px 10px 5px;
    text-align: center;
}

.pagenavi li {
    display: inline;
    margin: 0 2px;
    padding: 0;
}

.pagenavi li span.is-current {
    display: inline-block;
    margin-bottom: 5px;
    padding: 3px 10px;
    border: 1px solid #666;
    border-radius: 3px;
    color: #fff;
    vertical-align: middle;
    text-decoration: none;
    background: #666;
}

.pagenavi li a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 3px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #666;
    vertical-align: middle;
    text-decoration: none;
    background-color: #fff;
    zoom: 1;
}

.pagenavi li a:hover {
    border: 1px solid #666;
    color: #fff;
    background: #666;
}

.admin-menu {
    margin-top: 40px;
}

@media screen and (max-width: 575px) {
    .admin-menu {
        margin-right: 20px;
        margin-left: 20px;
    }
}

.admin-menu .linkbtn,
.admin-menu .linkbtn-wrap {
    margin-bottom: 25px;
}

.form-checkbox + .form-checkbox {
    margin-left: 20px;
}

.text-note {
    margin-top: 1.3em;
    margin-bottom: 0;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .text-note {
        font-weight: normal;
        line-height: 1.75;
        text-align: left;
    }
}

.maintenance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    line-height: 1.5em;
    background-color: #e6e6e6;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.maintenance-box {
    width: 90%;
    max-width: 500px;
    border: 1px solid #cdcdcd;
    border-radius: 40px;
    color: #333;
    background: #fff;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
    .maintenance-box {
        border-radius: 30px;
    }
}

@media screen and (max-width: 575px) {
    .maintenance-box {
        max-width: none;
        margin-top: -40px;
    }
    .select-title {
        margin-right: 0;
        margin-left: 0;
    }
}

.maintenance-body {
    padding: 0 20px 30px;
    text-align: center;
}

.icon-meintenance i {
    margin: 20px auto 40px;
    color: #666;
    font-size: 18rem;
}

@media screen and (max-width: 575px) {
    .icon-meintenance i {
        margin: 10px auto 20px;
        font-size: 14rem;
    }
}

.maintenance-body dl {
    text-align: left;
}

.nav-accesscode {
    margin: 2em 0 1em;
}

.nav-accesscode .btn.is-small,
.nav-accesscode .btn-new.is-small,
.nav-accesscode .btn-new.is-small .btn-inner {
    width: 100%;
    min-width: 100%;
    margin: 0;
}
.nav-accesscode .btn.is-small,
.nav-accesscode .btn-new.is-small .btn-inner {
    background: #cdcdcd;
    border-bottom-color: #aaa;
}
@media screen and (max-width: 767px) {
    .nav-accesscode {
        margin: 0 0 1em;
    }
    .wrap-nav-accesscode {
        margin-top: 1.5em;
    }
}

.nav-accesscode .btn.is-small i.btn-icon-before + i.btn-icon-before,
.nav-accesscode .btn-new.is-small i.btn-icon-before + i.btn-icon-before {
    left: 25px;
}

.nav-accesscode .btn.is-small i.btn-icon + i.btn-icon,
.nav-accesscode .btn-new.is-small i.btn-icon + i.btn-icon {
    right: 25px;
}
/**/
.edit-btn-group {
    margin: 2em 0 1em;
}

.edit-btn-group .btn,
.edit-btn-group .btn-new,
.edit-btn-group .btn-new .btn-inner {
    width: 100%;
    min-width: 100%;
    margin: 0;
}
@media screen and (max-width: 767px) {
    .edit-btn-group .btn,
    .edit-btn-group .btn-new {
        margin-bottom: 25px;
    }
}
/* #Text
   -------------------------------------------------------------------------- */
/*doc
---
name: セクション
category: モジュール
tag: [タイトル,テキスト, 配色設定あり]
---

セクション見出しとタイトル

```ejs

<div>
    <h2 class="section-title">任意の見出し番号をご使用ください</h2>
    <p class="section-text">見出し下のテキストはスマホ表示時は左寄せテキストになります</p>
</div>
<div class="l-section-sm">
<h3 class="section-title">ダミーテキストです。</h3>
</div>
<div class="l-section-sm">
<h4 class="section-title">ダミーテキストです。</h4>
</div>
<div class="l-section-sm">
<h5 class="section-title">ダミーテキストです。</h5>
</div>
<div class="l-section-sm">
<h6 class="section-title">ダミーテキストです。</h6>
</div>

```
*/
.section-title {
    padding: 0.4em 20px;
    color: #fff;
    line-height: 1.22727;
    text-align: center;
    background-color: #666;
}

.section-text {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .section-text {
        padding-right: 20px;
        padding-left: 20px;
        text-align: left;
    }
}

/*doc
---
name: リード文
category: モジュール
tag: Text
---

ページの導入文のスタイルです

```ejs
<p class="text-lead">ダミーテキストです。</p>
```
*/
.text-lead {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .text-lead {
        font-size: 1.6rem;
        font-weight: normal;
        line-height: 1.75;
        text-align: left;
    }
}

/*doc
---
name: 下へスクロールボタン
category: モジュール
tag: [ボタン, 配色設定あり]
---

「下へスクロール」ボタン。
表示、非表示の制御はcommon.jsにて

```ejs

<div id="to-top">
    <a href="#">
        <i class="far fa-arrow-alt-circle-up"></i>
    </a>
</div>

```
*/
#to-next {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 60px;
    text-align: center;
    background-color: #666;
}
#to-next i {
    margin-right: 15px;
    font-size: 40px;
    vertical-align: middle;
}
@media screen and (max-width: 991px) {
    #to-next {
        display: none !important;
    }
}

/*doc
---
name: トップへ戻るボタン
category: モジュール
tag: ボタン
---

トップへ戻るボタン。
表示、非表示の制御はcommon.jsにて

```ejs

<div id="to-top">
    <a href="#">
        <i class="far fa-arrow-alt-circle-up"></i>
    </a>
</div>

```
*/
#to-top {
    position: fixed;
    right: 60px;
    bottom: 60px;
}
#to-top > a {
    color: #4b4b4b;
    font-size: 50px;
}
@media screen and (max-width: 1199px) {
    #to-top {
        right: 20px;
    }
}
@media screen and (max-width: 991px) {
    #to-top {
        display: none !important;
    }
}

.wrap-controller {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.wrap-controller-left {
    width: 698px;
}


.wrap-controller-right {
    width: 220px;
}

.wrap-controller-right i {
    vertical-align: middle;
    margin-top: -5px;
}

@media screen and (max-width: 991px) {
    .wrap-controller-left {
        width: 100%;
    }

    .wrap-controller-right {
        width: 100%;
        margin-top: 35px;
        text-align: center;
    }
    .wrap-controller-right .btn,
    .wrap-controller-right .btn-new  {
        margin-right: 10px;
        margin-left: 10px;
    }
}

/*===========================================
    theme （配色設定）
============================================*/

/* ----- 一般ユーザー ----- */

/* ヘッダー */
.theme-personal .l-header-upper {
    background-color: #0e9583;
}

.theme-personal .l-header-lower {
    border-top-color: #0e9583;
    border-bottom-color: #0e9583;
}

/* フッター */
.theme-personal .l-footer {
    background-color: #0e9583;
    /* color: ; */
}

/* ボタンデータと説明文のセット */
.theme-personal .card {
    border-color: #0e9583;
}
.theme-personal .card .card-title {
    background-color: #0e9583;
}

/* 情報登録ステップフロー */
.theme-personal .flow {
    border-color: #0e9583;


}
.theme-personal .flow > li > span::before {
    color: #0e9583;
}
.theme-personal .flow > li.is-current {
    background-color: #0e9583;
}
.theme-personal .flow > li + li::before,
.theme-personal .flow > li + li.is-current::after {
    border-top-color: #0e9583;
    border-bottom-color: #0e9583;
}
.theme-personal .flow > li.is-current,
.theme-personal .flow > li.is-current > span::before {
    color: #fff;
}
@media screen and (max-width: 991px) {
    .theme-personal .flow > li + li::before {
        border-top-color: #fff;
        border-bottom-color: #fff;
    }
}

@media screen and (min-width: 1600px) and (max-width: 1650px) {
    .theme-personal .admin-logo {
        left: 6%;
    }
    .theme-personal .contact-info, .theme-personal .l-header-upper-right {
        right: 17%;
    }

    .theme-personal .user-name {
        right: 20%;
    }
}

@media screen and (min-width: 1500px) and (max-width: 1599px) {
    .theme-personal .admin-logo {
        left: 4%;
    }

    .theme-personal .contact-info, .theme-personal .l-header-upper-right {
        right: 17%;
    }

    .theme-personal .user-name {
        right: 20%;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1499px) {
    .theme-personal .contact-info,
    .theme-personal .admin-logo {
        position: relative;
        top: 0;
        left: 0;
    }
    .theme-personal .l-header-upper-right,.theme-personal .user-name {
        position: relative;
        top: 0;
        right: 0;
        max-width: 37%;
    }
}
@media screen and (max-width: 767px) {
    .theme-personal .table-item tbody tr th:nth-child(2){
        width:60px !important;
    }
    .theme-personal .table-item tbody tr th:nth-child(3){
        width:45px !important;
        text-align:center;
    }
}

/* 現在のステップ */
.theme-personal .flow-title {
    color: #0e9583;
    /* margin: ; */
}

.theme-personal .flow-title .flow-title-number > span {
    color: #fff;
    background-color: #0e9583;
}

/* ヘッダー 「ご不明な点等ございましたら?」 */
.theme-personal .contact-info-text {
    color: #0b7a6b;
}

/* ヘッダー 電話番号 */
.theme-personal .contact-info-tel {
    background-color: #0e9583;
}

/* ログアウトボタン */
.theme-personal .userlogout {
    background-color: #096256;
}
.theme-personal .userlogout-icon .fa-inverse {
    color: #096256;
}

/* ログインボタン */
.theme-personal .userlogin {
    background-color: #ff9b02;
}

/* ユーザーネーム */
.theme-personal .user-name {
    background-color: #0b7a6b;
}

/* 各種ボタン */
.theme-personal .btn,
.theme-personal .btn-new .btn-inner {


    border-bottom-color: #b56d00;
    background-color: #ff9b02;
}
.theme-personal .btn.is-radiobtn,
.theme-personal .btn-new.is-radiobtn .btn-inner {
    border-bottom-color: #888;
    background-color: #e4e4e4;
}
.theme-personal .btn.is-radiobtn.active,
.theme-personal .btn-new.is-radiobtn.active .btn-inner {
    border-bottom: 0;
    color: #fff;
    background-color: #0e9583;

    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}
.theme-personal .btn.is-checkbox,
.theme-personal .btn-new.is-checkbox .btn-inner {
    /*border-bottom-color: #888;*/
    border-bottom-color: #0e9583;
    background-color: #e4e4e4;
    /* color: ; */
}
/* ICC 標準対応 start*/
/*
.theme-personal #option_tbody .btn.is-checkbox {
    border-bottom-color: #0e9583;
    background-color: #f2e2e6;
    color: #333;
}

.theme-personal #option_tbody .btn.is-checkbox.active {
    background-color: #0e9583;
    color: #fff;
}
.theme-personal .option_tbody .btn.is-checkbox {
    border-bottom-color: #0e9583;
    background-color: #f2e2e6;
    color: #333;
}

.theme-personal .option_tbody .btn.is-checkbox.active {
    background-color: #0e9583;
    color: #fff;
}
*/

.theme-personal #course_tbody .btn.is-radiobtn {
    border-bottom-color: #0e9583;
    background-color: #f2e2e6;
    color: #333;
}

.theme-personal #course_tbody .btn.is-radiobtn.active {
    background-color: #0e9583;
    color: #fff;
}
.theme-personal .option_tbody .cell-checkbox [type="radio"],
.theme-personal .option_tbody .btn.is-radiobtn {
    min-width: 100px;
    height: 35px;
    padding-right: 5px;
    padding-left: 5px;
    border-bottom-color: #0e9583;
    font-size: 1.6rem;
    line-height: 35px;
/*    background-color: #f2e2e6; */
}
@media screen and (max-width: 767px) {
    .theme-personal .option_tbody .btn.is-radiobtn {
        max-width: 35px;
        min-width: 35px;
        width: 35px;
    /*
        height: 35px;
    */
        padding-right: 5px;
        padding-left: 5px;
    /*
        border-bottom-color: #b02544;
    */
        font-size: 1.2rem;
    /*
        line-height: 35px;
    */
    /*    background-color: #f2e2e6; */
    }
}
.cell-checkbox .is-radiobtn.active
.theme-personal .option_tbody .cell-checkbox.active [type="radio"],
.theme-personal .option_tbody .btn.is-radiobtn.active {
    background-color: #0e9583;
    color: #fff;
}
.required-selector__input {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

.required-selector__label {
    display: inline-block;
    background-color: #f2e2e6;
    flex-basis: 60px;
    /*margin-top: 15px;*/
    padding: 0.5rem 1rem;
    padding: 0;
    border-bottom: 2px solid #0e9583;
    /*border-top: 2px solid #0e9583;*/
    border-radius: 30px;
    color: #333;
    /*font-size: 1.2rem;*/
    /* font-weight: none; */
    line-height: 20px;
    text-align: center;
    transition: all .2s;
}

.required-selector__input:checked + .required-selector__label {
    background: #0e9583;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,.7);
}

.required-selector__input:focus + .required-selector__label {
    outline-color: #0e9583;
    outline-offset: -2px;
    outline-style: auto;
    outline-width: 5px;
}




/* ICC 標準対応 end*/
.theme-personal .btn.is-checkbox.active,
.theme-personal .btn-new.is-checkbox.active .btn-inner {

    background-color: #0e9583;
}

.theme-personal .btn.is-del,
.theme-personal .btn-new.is-del .btn-inner {
    border-bottom-color: #bbb;
    background-color: #ccc;
}

/* リンクボタン */
.theme-personal .linkbtn,
.theme-personal .linkbtn-new {

    border-bottom-color: #b56d00;

    background-color: #ff9b02;
}
.theme-personal .linkbox .linkbox-btn,
.theme-personal .linkbox-new .linkbox-btn {

    background-color: #0e9583;
}
/*
.theme-personal .list-signin-btn .linkbtn {
    background-color: #181818 !important;
    border-bottom-color: #181818;
}

.theme-personal .list-signin-btn .is-password {
    background-color: #f8f8f8 !important;
}

.theme-personal #reserve_day_search_form .nav-calendar:nth-child(1) .is-small{
    background-color: #181818;
}

.theme-personal #reserve_day_search_form .nav-calendar:nth-child(2) .is-small{
    background-color: #ffffff;
    color: #181818;
}

.theme-personal #reserve_day_search_form .nav-calendar:nth-child(3) .is-small{
    background-color: #ffffff;
    color: #181818;
}
*/
/* 空き枠検索 */
.theme-personal .linkbtn.is-search.is-type-large,
.theme-personal .linkbtn-new.is-search.is-type-large {


    border-bottom-color: #c8141e;
    background-color: #f65000;
}

/* タブ切り替えボタン */
.theme-personal .nav-tabs .nav-link {
    border-bottom: solid 2px #888;
    background-color: #e4e4e4;
}
.theme-personal .nav-tabs .nav-link.active,
.theme-personal .nav-tabs .nav-item.show .nav-link {
    border-bottom: 0;

    background-color: #0e9583;
}

/* アクセスコードナビゲーションボタン */
.theme-personal .nav-accesscode .btn.is-small,
.theme-personal .nav-accesscode .btn-new.is-small .btn-inner{

    background: #0e9583;

    border-bottom-color: #096256;
}

/* セクションタイトル */
.theme-personal .section-title {

    background-color: #0e9583;
    /* color: ; */
}

/* テキスト色 - メインカラー */
.theme-personal .text-maincolor {

    color: #0e9583;
}

/* テキスト色 - アクセントカラー */
.theme-personal .text-accentcolor {

    color: #ff9b02;
}

/* 背景色 - メインカラー */
.theme-personal .bg-maincolor {

    background-color: #0e9583;
}

/* 背景色 - アクセントカラー */
.theme-personal .bg-accentcolor {

    background-color: #ff9b02;
}

/* 「下にスクロール」ボタン */
.theme-personal #to-next {

    background-color: #0e9583;
}

/* カレンダーヘッダー */
.theme-personal .calendar caption {

    background-color: #0e9583;
    /* color: ; */
}

/* 選択画面タイトル */
.theme-personal .select-title {

    background-color: #0e9583;

}

/* 予約確認画面 - 予約番号 */
.theme-personal .reservation-card-number {

    color: #0e9583;
}

/* 予約確認画面 - インフォメーションアイコン */
.theme-personal .reservation-card-meesage i,
.theme-personal .text-memo i {

    color: #ff9b02;
}

/* 検索結果テーブル - ヘッダー */
.theme-personal .table-result th {

    background-color: #0e9583;
}

/* 検索結果ページ送り */
.theme-personal .pagenavi li a:hover,
.theme-personal .pagenavi li span.is-current {


    border: 1px solid #0e9583;
    background-color: #0e9583;
}

/* メールアドレス変更画面 */

.theme-personal .l-form.is-change .l-form-label {

    background-color: #0e9583;
}

/* メンテナンス画面アイコン */
.theme-personal .icon-meintenance i {

    color: #0e9583;
}

/* .theme-personal .is-small {
    background-color: #fff;
    color: #000;
    border-bottom-color: #fff;
    border: 1px solid #181818;
} */

/* .theme-personal .is-small:hover {
    background-color: #000;
    color: #fff;
} */

/*
.theme-personal #contact_postalcode1, .theme-personal #contact_postalcode2,
.theme-personal #home_postalcode1, .theme-personal #home_postalcode2 {
    --* border-bottom-color: #e0e0e0 !important; *--
    border: 2px solid #e0e0e0 !important;
}

.theme-personal .mt-1em {
    text-align: center;
}
.theme-personal #user_mod_form .mt-1em {
    text-align: left;
}
.theme-personal #user_add_input_form .mt-1em {
    text-align: left;
}
.theme-personal #user_mod_form .l-form .l-form-row:nth-child(6) .l-form-input {
    display: inherit;
    margin-top: 9px;
}

.theme-personal #user_mod_form .l-form .l-form-row:nth-child(6) .l-form-input label[for=himself_and_spouse_div1],
.theme-personal #user_mod_form .l-form .l-form-row:nth-child(6) .l-form-input label[for=himself_and_spouse_div2] {
    margin-right: 72px;
}

.theme-personal #user_add_input_form .l-form .l-form-row:nth-child(6) .l-form-input {
    display: inherit;
    margin-top: 9px;
}

.theme-personal #user_add_input_form .l-form .l-form-row:nth-child(6) .l-form-input label[for=himself_and_spouse_div1],
.theme-personal #user_add_input_form .l-form .l-form-row:nth-child(6) .l-form-input label[for=himself_and_spouse_div2] {
    margin-right: 72px;
}

.theme-personal #reserve_detail_form .is-small {
    border-bottom-color: #b02544;
    background-color: #b02544;
    color: #fff;
}
.theme-personal #fix-top .section-title {
    color: #181818;
}
.theme-personal #reserve_regist_form .is-reserve-conf .l-section-md:nth-child(2) .mt-1em {
    text-align: left    ;
}
*/
/* ----- 企業ユーザー ----- */

/* ヘッダー背景色 */
.theme-company .l-header-upper {
    background-color: #106a91;
}

.theme-company .l-header-lower {
    border-top-color: #106a91;
    border-bottom-color: #106a91;
}

/* フッター背景色 */
.theme-company .l-footer {

    background-color: #106a91;

}

/* ボタンデータと説明文のセット */
.theme-company .card {

    border-color: #106a91;
}
.theme-company .card .card-title {
    background-color: #106a91;
}

/* 情報登録ステップフロー */
.theme-company .flow {

    border-color: #106a91;
}
.theme-company .flow > li > span::before {

    color: #106a91;
}
.theme-company .flow > li.is-current {
    background-color: #106a91;
}
.theme-company .flow > li + li::before,
.theme-company .flow > li + li.is-current::after {
    border-top-color: #106a91;
    border-bottom-color: #106a91;
}
.theme-company .flow > li.is-current,
.theme-company .flow > li.is-current > span::before {
    color: #fff;
}
@media screen and (max-width: 991px) {
    .theme-company .flow > li + li::before {
        border-top-color: #fff;
        border-bottom-color: #fff;
    }
}

/* 現在のステップ */
.theme-company .flow-title {

    color: #106a91;

}
.theme-company .flow-title .flow-title-number > span {
    color: #fff;

    background-color: #106a91;
}

/* ヘッダー 「ご不明な点等ございましたら?」 */
.theme-company .contact-info-text {

    color: #0a4a60;
}

/* ヘッダー 電話番号 */
.theme-company .contact-info-tel {



    background-color: #106a91;
}

/* ログアウトボタン */
.theme-company .userlogout-icon .fa-inverse {

    color: #08384c;
}

.theme-company .userlogout {
    background-color: #08384c;
}

/* ログインボタン */
.theme-company .userlogin {

    background-color: #ff9b02;
}

/* ユーザーネーム */
.theme-company .user-name {



    background-color: #0a4a60;
}


/* 各種ボタン */
.theme-company .btn,
.theme-company .btn-new .btn-inner {


    border-bottom-color: #b56d00;
    background-color: #ff9b02;
}
/*
.theme-company #reserve_day_search_form .nav-calendar:nth-child(2) .is-small{
    background-color: #ffffff;
    color: #181818;
}

.theme-company #reserve_day_search_form .nav-calendar:nth-child(3) .is-small{
    background-color: #ffffff;
    color: #181818;
} */
.theme-company .btn.is-radiobtn,
.theme-company .btn-new.is-radiobtn .btn-inner {




    border-bottom-color: #106a91;
    background-color: #e4e4e4;

}
.theme-company .btn.is-radiobtn.active,
.theme-company .btn-new.is-radiobtn.active .btn-inner {
    border-bottom: 0;
    color: #fff;




    background-color: #106a91;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}
.theme-company .btn.is-checkbox,
.theme-company .btn-new.is-checkbox .btn-inner {
    border-bottom-color: #888;
    background-color: #e4e4e4;

}
.theme-company .btn.is-checkbox.active,
.theme-company .btn-new.is-checkbox.active .btn-inner {

    background-color: #106a91;



}

.theme-company #option_tbody .btn.is-checkbox {
    border-bottom-color: #106a91;
    background-color: #e4e4e4;
    color: #333;
}

.theme-company #option_tbody .btn.is-checkbox.active {
    background-color: #106a91;
    color: #fff;
}

.theme-company #course_tbody .btn.is-radiobtn {
    border-bottom-color: #106a91;
    background-color: #e4e4e4;
    color: #fff;
}

.theme-company #course_tbody .btn.is-radiobtn.active {
    background-color: #106a91;
}

.theme-company .btn.is-del,
.theme-company .btn-new.is-del .btn-inner {
    border-bottom-color: #bbb;
    background-color: #ccc;
}

/* オプション選択用ラジオボタン */
.theme-company .required-selector__label {
    display: inline-block;
    background-color: #f2e2e6;
    flex-basis: 60px;
    padding: 0.5rem 1rem;
    padding: 0;
    border-bottom: 2px solid #106a91;
    border-radius: 30px;
    color: #333;
    font-size: 1.6rem;
    line-height: 35px;
    text-align: center;
    transition: all .2s;
}

.theme-company .required-selector__input:checked + .required-selector__label {
    background: #106a91;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,.7);
}

.theme-company .required-selector__input:focus + .required-selector__label {
    outline-color: #106a91;
    outline-offset: -2px;
    outline-style: auto;
    outline-width: 5px;
}

/* リンクボタン */
.theme-company .linkbtn,
.theme-company .linkbtn-new {


    border-bottom-color: #b56d00;
    background-color: #ff9b02;
}
.theme-company .linkbox .linkbox-btn,
.theme-company .linkbox-new .linkbox-btn {

    background-color: #106a91;
}

/* 空き枠検索 */
.theme-company .linkbtn.is-search.is-type-large,
.theme-company .linkbtn-new.is-search.is-type-large {


    border-bottom-color: #c8141e;
    background-color: #f65000;
}

/* タブ切り替えボタン */
.theme-company .nav-tabs .nav-link {
    border-bottom: solid 2px #888;
    background-color: #e4e4e4;
}
.theme-company .nav-tabs .nav-link.active,
.theme-company .nav-tabs .nav-item.show .nav-link {
    border-bottom: 0;

    background-color: #106a91;
}

/* アクセスコードナビゲーションボタン */
.theme-company .nav-accesscode .btn.is-small,
.theme-company .nav-accesscode .btn-new.is-small .btn-inner {

    background: #106a91;
    border-bottom-color: #08384c;
}

/* セクションタイトル */
.theme-company .section-title {

    background-color: #106a91;
}

/* テキスト色 - メインカラー */
.theme-company .text-maincolor {

    color: #106a91;
}

/* テキスト色 - アクセントカラー */
.theme-company .text-accentcolor {

    color: #ff9b02;
}

/* 背景色 - メインカラー */
.theme-company .bg-maincolor {

    background-color: #106a91;
}

/* 背景色 - アクセントカラー */
.theme-company .bg-accentcolor 
{
    background-color: #ff9b02;
}

/* 「下にスクロール」ボタン */
.theme-company #to-next {

    background-color: #106a91;
}

/* カレンダーヘッダー */
.theme-company .calendar caption {

    background-color: #106a91;
}

/* 選択画面タイトル */
.theme-company .select-title {

    background-color: #106a91;
}

/* 予約確認画面 - 予約番号 */
.theme-company .reservation-card-number {

    color: #106a91;
}

/* 予約確認画面 - インフォメーションアイコン */
.theme-company .reservation-card-meesage i,
.theme-company .text-memo i {

    color: #ff9b02;
}

/* 検索結果テーブル - ヘッダー */
.theme-company .table-result th {

    background-color: #106a91;
}

/* 検索結果ページ送り */
.theme-company .pagenavi li a:hover,
.theme-company .pagenavi li span.is-current {


    border: 1px solid #106a91;
    background-color: #106a91;
}

/* メールアドレス変更画面 */
.theme-company .l-form.is-change .l-form-label {

    background-color: #106a91;
}

/* メンテナンス画面アイコン */
.theme-company .icon-meintenance i {

    color: #106a91;
}


/* .theme-company .is-small {
    background-color: #fff;
    color: #000;
}

.theme-company .is-small:hover {
    background-color: #000;
    color: #fff;
} */
/*
@media screen and (max-width: 991px) {
    .theme-company .l-col-lg-10 {
        position: relative;
        bottom: 0;
    }
}

@media screen and (min-width: 1600px) and (max-width: 1650px) {
    .theme-company .admin-logo {
        left: 6%;
    }
    .theme-company .contact-info, .theme-company .l-header-upper-right {
        right: 17%;
    }

    .theme-company .user-name {
        right: 20%;
    }
}

@media screen and (min-width: 1500px) and (max-width: 1599px) {
    .theme-company .admin-logo {
        left: 4%;
    }

    .theme-company .contact-info, .theme-company .l-header-upper-right {
        right: 17%;
    }

    .theme-company .user-name {
        right: 20%;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1499px) {
    .theme-company .contact-info,
    .theme-company .admin-logo {
        position: relative;
        top: 0;
        left: 0;
    }
    .theme-company .l-header-upper-right,.theme-company .user-name {
        position: relative;
        top: 0;
        right: 0;
        max-width: 37%;
    }
}

.theme-company #reserve_list_form .is-search, .theme-company #reserve_list_form .is-output-csv{
    border-bottom-color: red;
}

.theme-company #reserve_list_form .is-back:hover{
    color: #181818;
}
*/
/* ----- 管理者 ----- */

/* ヘッダー */
.theme-admin .l-header-upper {
    background-color: #178bcd;
}
.theme-admin .l-header-lower {
    border-top-color: #178bcd;
    border-bottom-color: #178bcd;
}

/* フッター */
.theme-admin .l-footer {
    background-color: #178bcd;
}

/* ボタンデータと説明文のセット */
.theme-admin .card {
    border-color: #178bcd;
}
.theme-admin .card .card-title {
    background-color: #178bcd;
}

/* 情報登録ステップフロー */
.theme-admin .flow {
    border-color: #178bcd;
}
.theme-admin .flow > li > span::before {
    color: #178bcd;
}
.theme-admin .flow > li.is-current {
    background-color: #178bcd;
}
.theme-admin .flow > li + li::before,
.theme-admin .flow > li + li.is-current::after {
    border-top-color: #178bcd;
    border-bottom-color: #178bcd;
}
.theme-admin .flow > li.is-current,
.theme-admin .flow > li.is-current > span::before {
    color: #fff;
}
@media screen and (max-width: 991px) {
    .theme-admin .flow > li + li::before {
        border-top-color: #fff;
        border-bottom-color: #fff;
    }
}

/* 現在のステップ */
.theme-admin .flow-title {
    color: #178bcd;
}
.theme-admin .flow-title .flow-title-number > span {
    color: #fff;
    background-color: #178bcd;
}

/* ヘッダー 「ご不明な点等ございましたら?」 */
.theme-admin .contact-info-text {
    color: #1c568f;
}

/* ヘッダー 電話番号 */
.theme-admin .contact-info-tel {
    background-color: #178bcd;
}

/* ログアウトボタン */
.theme-admin .userlogout {
    background-color: #143c64;
}
.theme-admin .userlogout-icon .fa-inverse {
    color: #143c64;
}

/* ログインボタン */
.theme-admin .userlogin {
    background-color: #00bee8;
}

/* ユーザーネーム */
.theme-admin .user-name {
    background-color: #1c568f;
}

/* 各種ボタン */
.theme-admin .btn,
.theme-admin .btn-new .btn-inner {
    border-bottom-color: #00337a;
    background-color: #00bee8;
}
.theme-admin #interview_page_form .is-back {
    border-bottom-color: #bbb !important;
}
.theme-admin .btn.is-radiobtn,
.theme-admin .btn-new.is-radiobtn .btn-inner {
    border-bottom-color: #bbb;
    background-color: #ccc;
}
.theme-admin .btn.is-radiobtn.active,
.theme-admin .btn-new.is-radiobtn.active .btn-inner {
    border-bottom: 0;
    color: #fff;
    background-color: #178bcd;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}
/*
.btn-active.is-checkbox,
.btn-active.is-checkbox .btn-inner {
    border-bottom-color: #b02544 !important;
    background-color: #f2e2e6 !important;
    color: #333 !important;
}
.btn-active.is-checkbox.active,
.btn-active.is-checkbox.active .btn-inner {
    color: #fff !important;
    --* background-color: #0e9583; *--
    background-color: #b02544 !important;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
} */
.theme-admin .btn.is-checkbox,
.theme-admin .btn-new.is-checkbox .btn-inner {
    border-bottom-color: #bbb;
    background-color: #ccc;
}
.theme-admin .btn.is-checkbox.active,
.theme-admin .btn-new.is-checkbox.active .btn-inner {
    background-color: #178bcd;
}
.theme-admin .btn.is-del,
.theme-admin .btn-new.is-del .btn-inner {
    border-bottom-color: #bbb;
    background-color: #ccc;
}

/* リンクボタン */
.theme-admin .linkbtn,
.theme-admin .linkbtn-new {
    border-bottom-color: #00337a;
    background-color: #00bee8;
}
.theme-admin .linkbox .linkbox-btn,
.theme-admin .linkbox-new .linkbox-btn {
    background-color: #178bcd;
}

/* 空き枠検索 */
.theme-admin .linkbtn.is-search.is-type-large,
.theme-admin .linkbtn-new.is-search.is-type-large {

    background-color: #ff9b02;

    border-bottom-color: #b56d00;
}

/* タブ切り替えボタン */
.theme-admin .nav-tabs .nav-link {
    border-bottom: solid 2px #bbb;
    background-color: #ccc;
}
.theme-admin .nav-tabs .nav-link.active,
.theme-admin .nav-tabs .nav-item.show .nav-link {
    border-bottom: 0;
    background-color: #178bcd;
}

/* アクセスコードナビゲーションボタン */
.theme-admin .nav-accesscode .btn.is-small,
.theme-admin .nav-accesscode .btn-new.is-small .btn-inner {
    background: #178bcd;
    border-bottom-color: #00337a;
}

/* セクションタイトル */
.theme-admin .section-title {
    background-color: #178bcd;
}

/* テキスト色 - メインカラー */
.theme-admin .text-maincolor {
    color: #178bcd;
}

/* テキスト色 - アクセントカラー */
.theme-admin .text-accentcolor {
    color: #00bee8;
}

/* 背景色 - メインカラー */
.theme-admin .bg-maincolor {
    background-color: #178bcd;
}

/* 背景色 - アクセントカラー */
.theme-admin .bg-accentcolor {
    background-color: #00bee8;
}

/* 「下にスクロール」ボタン */
.theme-admin #to-next {
    background-color: #178bcd;
}

/* カレンダーヘッダー */
.theme-admin .calendar caption {
    background-color: #178bcd;
}

/* 選択画面タイトル */
.theme-admin .select-title {
    background-color: #178bcd;
}

/* 予約確認画面 - 予約番号 */
.theme-admin .reservation-card-number {
    color: #178bcd;
}

/* 予約確認画面 - インフォメーションアイコン */
.theme-admin .reservation-card-meesage i,
.theme-admin .text-memo i {
    color: #00bee8;
}

/* 検索結果テーブル - ヘッダー */
.theme-admin .table-result th {
    background-color: #178bcd;
}

/* 検索結果ページ送り */
.theme-admin .pagenavi li a:hover,
.theme-admin .pagenavi li span.is-current {
    border: 1px solid #178bcd;
    background-color: #178bcd;
}

/* メールアドレス変更画面 */

.theme-admin .l-form.is-change .l-form-label {
    background-color: #178bcd;
}

/* メンテナンス画面アイコン */
.theme-admin .icon-meintenance i {
    color: #178bcd;
}

.theme-admin .admin-logo {
    position: relative;
    top: 0;
    left: 0;
}

/* .theme-admin .contact-info {
    max-width: 37%;
    position: relative;
    top: 0;
    right: 0;
} */

.theme-admin .l-main {
    margin-top: 0;
}

.theme-admin .user-name {
    height: 63px;
    margin-left: auto;
    padding-top: 5px;
    padding-right: 35px;
    padding-left: 35px;
    border: 0;
    /* color: #181818; */
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    position: relative;
    top: 0;
    right: 0;
}

.theme-admin .l-header-upper-right {
    width: 60px;
    text-align: center;
    position: relative;
    top: 0;
    right: 0;
}

.theme-admin .userlogout {
    position: relative;
    width: 100%;
    height: 63px;
    padding: 8px 0 0;
    /* color: #181818; */
    font-size: 12px;
    line-height: 1;
    text-align: center;
    /* background-color: #333; */
}

.theme-admin .userlogout > small {
    display: inline-block;
    width: 100%;
    font-size: 10px;
    font-weight: bold;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}
.theme-admin .fa-stack {
    display: block;
    width: auto;
}

@media screen and (max-width: 991px) {
    .theme-admin .contact-info {
        max-width: none;
        position: relative;
        right: 0%;
        top: 0;
    }
    .theme-admin .userlogout > small {
        font-size: 2rem;
    }
    .theme-admin .l-header-upper-right {
        width: 100%;
        /* text-align: center;
        position: relative;
        top: 0;
        right: 0; */
    }
}

/* =========================================
    utility
============================================ */
/*doc
---
name: 表示
category: ユーティリティ
tag: 表示・非表示
---

ブラウザの幅ごとの表示設定を調整します。

それぞれのブラウザ幅の対象目安となるデバイスとサイズを下記の通り定義しています。


サイズ      識別名        対象デバイス（目安）

?575px      sm        スマートフォン（縦）

?767px      md        スマートフォン（横）

?991px      lg        タブレット

?1199px     xl        PC表示

1200px?     なし       PC表示（ワイド）




```ejs

<p>適宜ブラウザ幅を伸縮して表示を確認ください。</p>
<p class="display-sm">ブラウザ幅576px以下になったら表示</p>
<p class="display-md">ブラウザ幅767px以下になったら表示</p>
<p class="display-lg">ブラウザ幅991px以下になったら表示</p>
<p class="display-xl">ブラウザ幅1199px以下になったら表示</p>

```
*/
@media screen and (min-width: 576px) {
    .display-phone,
    .display-sm {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .display-tablet,
    .display-md {
        display: none;
    }
}

@media screen and (min-width: 992px) {
    .display-pc,
    .display-lg {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .display-wide,
    .display-xl {
        display: none;
    }
}

/*doc
---
name: 非表示
category: ユーティリティ
tag: 表示・非表示
---

ブラウザの幅ごとの非表示設定を調整します。

それぞれのブラウザ幅の対象目安となるデバイスとサイズを下記の通り定義しています。


サイズ      識別名        対象デバイス（目安）

?575px      sm        スマートフォン（縦）

?767px      md        スマートフォン（横）

?991px      lg        タブレット

?1199px     xl        PC表示

1200px?     なし       PC表示（ワイド）




```ejs

<p>適宜ブラウザ幅を伸縮して表示を確認ください。</p>
<p class="hidden-sm">ブラウザ幅576px以下になったら非表示</p>
<p class="hidden-md">ブラウザ幅767px以下になったら非表示</p>
<p class="hidden-lg">ブラウザ幅991px以下になったら非表示</p>
<p class="hidden-xl">ブラウザ幅1199px以下になったら非表示</p>

```
*/
@media screen and (max-width: 575px) {
    .hidden-phone,
    .hidden-sm {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .hidden-tablet,
    .hidden-md {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    .hidden-pc,
    .hidden-lg {
        display: none;
    }
}

@media screen and (max-width: 1199px) {
    .hidden-wide,
    .hidden-xl {
        display: none;
    }
}

/*doc
---
name: テキスト調整
category: ユーティリティ
tag: [テキスト, 配色設定あり]
---

テキストのスタイルを調整します。




```ejs
<div class="theme-personal">
<h3>文字色</h3>
<p class="text-attention">認証失敗・エラーなど</p>
<p class="text-success">認証成功など</p>
<p class="text-maincolor">メインカラー表示</p>
<p class="text-accentcolor">アクセントカラー表示</p>
<p>以下プリセットカラー</p>
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<hr>
<p class="text-truncate">１行に収まらないテキストを改行せず省略します。この文章はダミーテキストです。文字サイズや行間などを確認するために入れています。この文章はダミーテキストです。文字サイズや行間などを確認するために入れています。</p>
<hr>
<p class="text-left">テキストを強制的に左揃え</p>
<p class="text-right">テキストを強制的に右揃え</p>
<p class="text-center">テキストを強制的に中央揃え</p>
<p class="text-center">テキストを強制的に中央揃え</p>
<p class="text-sm-center">テキストを特定の幅以上で強制的に左揃え・中央揃え・右揃えします</p>
<p class="text-sm-center">使えるブラウザ識別子は、<br>sm（ブラウザ幅576px以上）</p>
<p class="text-md-center">md（ブラウザ幅768px以上）</p>
<p class="text-lg-center">lg（ブラウザ幅992px以上）</p>
<p class="text-xl-center">xl（ブラウザ幅1200px以上）</p>
<hr>
<p class="font-weight-light">文字の太さを細くします（デバイス・OSによっては機能しないことがあります）</p>
<p class="font-weight-normal">文字の太さをノーマルにします</p>
<p class="font-weight-bold">文字の太さを太くします</p>
<p class="font-italic">文字を斜体にします</p>
</div>
```
*/
.text-attention {
    /* color: #ca0f24; */
    color: #ff4500; /* ICC */
    font-weight: bold; /* ICC */
}

.text-success {
    color: #28a745;
}

.text-maincolor {
    color: #666;
}

.text-accentcolor {
    color: #999;
}

.text-nowrap {
    white-space: nowrap;
}

/*doc
---
name: 背景色調整
category: ユーティリティ
tag: [ボックス, 配色設定あり]
---

背景色のスタイルを調整します。


```ejs

<div class="theme-personal">
    <p class="p-3 mb-2 bg-attention text-white">認証失敗・エラーなど</p>
    <p class="p-3 mb-2 bg-success text-white">認証成功など</p>
    <p class="p-3 mb-2 bg-maincolor">メインカラー表示</p>
    <p class="p-3 mb-2 bg-accentcolor">アクセントカラー表示</p>
    <p>以下プリセットカラー</p>
    <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
    <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
    <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
    <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
    <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
    <div class="p-3 mb-2 bg-info text-white">.bg-info</div>
    <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
    <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
    <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div>

```
*/
.bg-attention {
    background-color: #ca0f24;
}

.bg-success {
    background-color: #28a745;
}

.bg-maincolor {
    background-color: #666;
}

.bg-accentcolor {
    background-color: #999;
}

.m-center {
    margin-right: auto;
    margin-left: auto;
}

.mt-0 {
    margin-top: 0;
}

.mt-1em {
    margin-top: 1em;
}

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-45 {
    margin-top: 45px;
}

.mt-60 {
    margin-top: 60px;
}

.mr-0 {
    margin-right: 0;
}

.mr-1em {
    margin-right: 1em;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-25 {
    margin-right: 25px;
}

.mr-30 {
    margin-right: 30px;
}

.mr-45 {
    margin-right: 45px;
}

.mr-60 {
    margin-right: 60px;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1em {
    margin-bottom: 1em;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mb-60 {
    margin-bottom: 60px;
}

.ml-0 {
    margin-left: 0;
}

.ml-1em {
    margin-left: 1em;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-25 {
    margin-left: 25px;
}

.ml-30 {
    margin-left: 30px;
}

.ml-45 {
    margin-left: 45px;
}

.ml-60 {
    margin-left: 60px;
}

/* =========================================
    print
============================================ */
@media print {
    #to-next,
    #to-top {
        display: none !important;
    }
    .l-main {
        max-width: none;
    }
    .l-container {
        max-width: none;
        width: 100%;
    }
}

.flow > li {
	background-color: #fff;
}

@media screen and (max-width: 991px) {
	.flow > li {
		background-color: #e4e4e4;
	}
}

.theme-company .flow {
	background-color: #106a91;
}
.theme-personal .flow {
	background-color: #0e9583;
}

.theme-admin .flow {
	background-color: #178bcd;
}

/* ICC ADD エラーメッセージボックステスト */
.error-msg,
.success-msg
{
    z-index: 10;
    position: fixed;
    width: 400px;
    top: 160px;
    right: calc(50vw - 200px); /* マイナスpxはwidthの半分を設定 */
    padding: 0.5em 1.5em 0.5em 1em;
    color: #fff;
    border-radius: 15px;
    background-color: #e81e46;	
    /*background-color: #ca0f24;*/
}
.success-msg
{
    background-color: #0453e5;	
    /*background-color: #0000ff;*/
}

.error-msg:before,
.success-msg:before
{
  position: absolute;
  top: 5px;
  left: 100%;
  margin-left: -20px;
  color: #fff;
  font-size: 1em;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00d";
}
.error-msg p,
.success-msg p
 {
    font-size: 1.2em;
}

/* datepickerの設定 */
/* 日曜日のカラー設定 */
td.ui-datepicker-week-end:first-child a.ui-state-default{
  background-color: #ffecec;   /* 背景色を設定 */
  color: #f00!important;       /* 文字色を設定 */
}
/* 土曜日のカラー設定 */
td.ui-datepicker-week-end:last-child a.ui-state-default{
  background-color: #eaeaff;   /* 背景色を設定 */
  color: #00f!important;       /* 文字色を設定 */
}
/* ホバー時の動作 */
td.ui-datepicker-week-end a.ui-state-hover{
  opacity: 0.8;
}
/* 当日を示す色はそのまま */
td.ui-datepicker-week-end a.ui-state-highlight{
  background-color: #fffa90!important;
}

/* ドロップダウンの選択不可時の背景色 */
select:disabled {
  background-color: #f5f5f5;
  color: inherit;
  cursor: not-allowed;
}

/* numberのスピンボタンを消す */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance:textfield;
}

/* 文字数が不確定の場合のラジオボタン */
.btn.is-auto {
	width: 100%;
	min-width: inherit;
	height: 100%;
	padding-top: 10px;
	padding-right: 28px;
	padding-left: 28px;
	font-size: 1.6rem;
	line-height: 1.53;
	padding-bottom: 10px;
	position: relative;
	display: table;
}
.btn.is-auto span {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	width: 100%;
}
.btn.is-auto:not(.active):hover span{
  border-top:2px solid transparent;
}
.wrap-auto-radio {
	margin-bottom: 10px;
}
/*見出し*/
.interview-title {
	color: #666;
	line-height: 1.3;
	margin-bottom: 1em;
}
.theme-personal .interview-title {

	color: #0E9583;
}
.theme-company .interview-title {

	color: #106a91;
}
.interview-item-title {
	margin-bottom: 1em;
}
.txt-interview {
/*	text-align: center;*/ /* ICC */
/*	margin: 0 auto 30px;*/ /* ICC */
	text-align: left;
	margin: 15px auto 15px;
  padding-top: 0;
	font-size: 1.8rem;
	font-weight: bold;
}
/*030最初は非表示*/
.wrap_check_chk {
	text-align: center;
	font-weight: bold;
	margin-bottom: 50px;
	font-size: 1.8rem;
}
.chk_container {
	display: none;
}
.l-form.is-interview .l-form-input {
	max-width: calc(100% - 330px);
	padding: 15px 20px;
	-ms-flex-preferred-size: calc(100% - 330px);
	flex-basis: calc(100% - 330px);
}
.btn-group.is-interview-btn {
	margin-top: 100px;
}
/*問診テーブル*/
.l-form.is-interview .l-form-label {
	color: #fff;
	background-color: #666666;
	max-width: 330px;
	flex-basis: 330px;
	padding: 19px 15px 15px 25px;
}
/*個人テーマ：問診テーブル*/
.theme-personal .l-form.is-interview .l-form-label {
	color: #000;
	background-color: #e9e9e9;
}
@media screen and (max-width: 991px) {
.theme-personal .l-form.is-interview {
	padding-bottom: 1em;
	border-bottom: 0;
}
.l-form.is-interview .l-form-input {
	padding-top: 0;
}
.theme-personal .l-form.is-interview .l-form-row {
/*	border-bottom: 1px solid #ccc;*/ /* ICC */
/*	padding-top: 20px;*/ /* ICC */
/*	padding-bottom: 20px;*/ /* ICC */
}
.theme-personal .l-form.is-interview .l-form-row + .l-form-row {
	border-top: 0;
	margin-top: 0;
}
.theme-personal .l-form.is-interview .l-form-label {
	max-width: 100%;
	padding: 0.75em 0.5em 0.75em;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
	color: #333;
	background-color: #FFF;
}
.theme-personal .l-form.is-interview .l-form-input {
	max-width: 100%;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
	
	padding-left: 5px;
}
.btn-group.is-interview-btn {
	margin-top: 60px;
}
.theme-personal .l-col-lg-10 {
    position: relative;
    bottom: 0;
}
}
/*事業所テーマ：問診テーブル*/
.theme-company .l-form.is-interview .l-form-label {
	color: #000;
	background-color: #e9e9e9;
}
@media screen and (max-width: 991px) {
.theme-company .l-form.is-interview {
	padding-bottom: 1em;
	border-bottom: 0;
}
.l-form.is-interview .l-form-input {
	padding-top: 0;
}
.theme-company .l-form.is-interview .l-form-row {
/*	border-bottom: 1px solid #ccc;*/ /* ICC */ 
/*	padding-top: 20px;*/ /* ICC */
/*	padding-bottom: 20px;*/ /* ICC */
}
.theme-company .l-form.is-interview .l-form-row + .l-form-row {
	border-top: 0;
	margin-top: 0;
}
.theme-company .l-form.is-interview .l-form-label {
	max-width: 100%;
	padding: 0.75em 0.5em 0.75em;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
	color: #333;
	background-color: #FFF;
}
.theme-company .l-form.is-interview .l-form-input {
	max-width: 100%;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
	
	padding-left: 5px;
}
.btn-group.is-interview-btn {
	margin-top: 60px;
}
}

@media screen and (max-width: 767px) {
.btn-group.is-interview-btn {
	margin-top: 50px;
}
}
.wrap-btn-interview {
	width: 235px;
}
.btn-new.wrap-btn-interview .btn-inner {
	width: 100%;
	height: 46px;
	line-height: 46px;
}
/*クリックしたら付随する項目が表示される*/
.box-interview .section-title {
	text-align: left;
	border-radius: 35px;
}
.box-interview .section-title.active {
	border-radius: 25px 25px 0 0;
}
.box-interview .section-title::before {
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	font-size: 20px;
	margin-right: 10px;
}
.box-interview .section-title.active::before {
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-size: 20px;
	margin-right: 7.5px;
}
/* visible-btnをクリックすると現れるボックス */
.visible-box {
	margin: 0 auto 50px;
}
.visible-box.active {
    
	border-color: #0E9583;
	border-width: 1px;
	border-style: solid;
	border-radius: 0 0 25px 25px;
}
.theme-company .visible-box.active {

	border-color: #106a91;
}
.inner-visible{
	padding: 30px 30px 30px;
}
.inner-visible+.inner-visible{
	padding-top: 0;
}
/*OFF(デフォルト)入力可*/
.box-interview.is-active .section-title {

	background: #0E9583;
	color: #fff;
	cursor: pointer;
}
.theme-company .box-interview.is-active .section-title {

	background: #106a91;
}
/*ON入力不可*/
.box-interview .section-title {
	background: #cdcdcd;
	color: #fdfdfd;
}
.interview-q {
	background: #F2F2F2;
	padding: 1.2em 140px 1.2em 1.2em;
	border-top: 1px solid #969696;
	font-size: 1.6rem;
	font-weight: bold;
}
.interview-a {
	position: relative;
	padding-bottom: 20px;
	font-size: 2.0rem;
}
.interview-a .inner-interview-a {
	position: relative;
	padding: 30px 15px 0px 15px;
}
.interview-a .interview-a-list dt {
	font-size: 1.6rem;
	padding-bottom: 0.8em;
}
.interview-a .interview-a-txt {
	margin-bottom: 0.86em;
	color: #ca0f24;
	font-weight: bold;
}
.interview-a .interview-a-list dd {
/*	margin-bottom: 1.5em;*/
	margin-bottom: 1.0em; /* ICC */
	color: #ca0f24;
	font-weight: bold;
}
.box-interview {
	position: relative;
}
.box-interview .wrap-btn-reserve-interview {
	position: absolute;
	top: 20px;
	right: 15px;
}

@media screen and (max-width: 768px) {
.interview-a {
	padding-bottom: 0;
}
.interview-a .inner-interview-a {
	position: relative;
/*	padding: 40px 15px 0 15px;*/
	padding: 20px 15px 0 15px; /* ICC */
}
.box-interview .wrap-btn-reserve-interview {
	position: relative;
	top: auto;
	right: auto;
/*	padding-bottom: 50px; */
	padding-bottom: 30px; /* ICC */
	padding-left: 15px;
}
.interview-q {
	padding: 1.2em;
}
}
.inner-chk-container {
	margin: 20px auto;
}
.l-form.is-interview-item {
	border: 0;
  margin-bottom: 10px;
}
.l-form.is-interview-item .l-form-input {
	max-width: calc(100% - 100px);
	padding: 15px 10px;
	-ms-flex-preferred-size: calc(100% - 100px);
	flex-basis: calc(100% - 100px);
}
.l-form.is-interview-item .l-form-label {
	max-width: 100px;
	flex-basis: 100px;
	padding: 19px 5px 15px 15px;
	background: #fff;
	text-align: center;
}

@media screen and (max-width: 991px) {
.l-form.is-interview-item {
  margin-bottom: 0;
}
.l-form.is-interview-item .l-form-label {
	max-width: 100%;
	padding: 5px 5px 15px 15px;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
	color: #333;
	background-color: #FFF;
	text-align: left;
}
.l-form.is-interview-item .l-form-input {
	max-width: 100%;
	-ms-flex-preferred-size: 100%;
	padding-top: 0;
	flex-basis: 100%;
}
}

.interview-item-list>div{
	display: inline-block;
	padding: 0.3em 1.7em 0.3em 1em;
	font-weight: bold;
}
@media screen and (max-width: 991px) {
	.interview-item-list>div{
		display:block;
		padding: 0.3em 1em 0.3em 0.5em;
	}
}

.l-form.is-interview-item.inner-visible .l-form-label, .l-form.is-interview-item.inner-visible .l-form-input{
	padding-top: 0;
	padding-bottom: 25px;
}

@media screen and (max-width: 991px) {
.l-form.is-interview-item.inner-visible .l-form-label, .l-form.is-interview-item.inner-visible .l-form-input{
	padding-bottom: 10px;
}

}

.inner-chk-container.type-border{

  border:1px solid #0E9583;
  padding: 35px 35px 35px;
  border-radius: 25px;
}
@media screen and (max-width: 767px) {
.inner-chk-container.type-border{
  padding: 20px 25px 20px;
}
}
.theme-company .inner-chk-container.type-border {

	border:1px solid #106a91;
}
.chk_container-add{
  display: none;
  margin-bottom: 40px;
}
.form-options.chk_item_add{
  text-align: center;
}
.chk_item_add{
  text-align: center;
  font-weight: bold;
  margin: auto;
  font-size: 1.7rem;
}

.btn.is-mod.active{
    padding-top: 12px;
}

.btn-new.is-auto{
    display: table;
    width: 100%;
    height: 100%;
    position: relative;
}

.btn-new.is-auto .btn-inner{
    display: table-cell;
    vertical-align: middle;
    min-width: 0;
    width: 100%;
    height: 100%;
    padding-top: 10px;
    padding-right: 28px;
    padding-left: 28px;
    font-size: 1.6rem;
    line-height: 1.53;
    padding-bottom: 10px;
}

.btn-new.is-auto:not(.active):hover .btn-inner{
  border-top:2px solid transparent;
}

.btn-new.is-mod.active .btn-inner{
    padding-top: 12px;
}

.btn.is-checkbtn,
.btn-new.is-checkbtn .btn-inner {
    padding-right: 10px;
    padding-left: 10px;
    border-bottom-color: #888;
    color: #000;
    background-color: #e4e4e4;
}
.btn.is-checkbtn [type="checkbox"],
.btn-new.is-checkbtn [type="checkbox"] {
    clip: rect(0, 0, 0, 0);
    clip: rect(0, 0, 0, 0);
    position: absolute;
    pointer-events: none;
}
.btn.is-checkbtn.active,
.btn-new.is-checkbtn.active .btn-inner {
    padding-top: 12px;
    border-bottom: 0;
    background-color: #666;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}

.theme-personal .btn.is-checkbtn,
.theme-personal .btn-new.is-checkbtn .btn-inner {
    border-bottom-color: #888;
    background-color: #e4e4e4;
}
.theme-personal .btn.is-checkbtn.active,
.theme-personal .btn-new.is-checkbtn.active .btn-inner {
    border-bottom: 0;
    color: #fff;

    background-color: #0e9583;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}

.theme-company .btn.is-checkbtn,
.theme-company .btn-new.is-checkbtn .btn-inner {
    border-bottom-color: #888;
    background-color: #e4e4e4;
}
.theme-company .btn.is-checkbtn.active,
.theme-company .btn-new.is-checkbtn.active .btn-inner {
    border-bottom: 0;
    color: #fff;

    background-color: #106a91;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}

.theme-admin .btn.is-checkbtn,
.theme-admin .btn-new.is-checkbtn .btn-inner {
    border-bottom-color: #bbb;
    background-color: #ccc;
}
.theme-admin .btn.is-checkbtn.active,
.theme-admin .btn-new.is-checkbtn.active .btn-inner {
    border-bottom: 0;
    color: #fff;
    background-color: #178bcd;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}


/* ICC add アクセスコード管理（ac） */
.table-result.is-news .td-ac-party-code {
    max-width: 141px;
    min-width: 141px;
}
.table-result.is-news .td-ac-party-code p {
    overflow: hidden;
}
.table-result.is-news .td-ac-party-name {
    max-width: 382px;
    min-width: 382px;
}
.table-result.is-news .td-ac-personal-accesskey {
    max-width: 243px;
    min-width: 243px;
}
.table-result.is-news .td-ac-staff-accesskey {
    max-width: 243px;
    min-width: 243px;
}
.table-result.is-news .td-ac-update-date {
    max-width: 203px;
    min-width: 203px;
}
.table-result.is-news .td-ac-update-member {
    max-width: 181px;
    min-width: 181px;
}

/* ICC add プラザ用アカウント管理（account） */
.table-result.is-news .td-account-login-id {
    max-width: 235px;
    min-width: 235px;
}
.table-result.is-news .td-account-login-id p {
    overflow: hidden;
}
.table-result.is-news .td-account-name {
    max-width: 235px;
    min-width: 235px;
}
.table-result.is-news .td-account-kana-name {
    max-width: 235px;
    min-width: 235px;
}
.table-result.is-news .td-account-status {
    max-width: 235px;
    min-width: 235px;
}

/* ICC add 個人ログイン情報管理（pli） */
.table-result.is-news .td-pli-personal-no {
    max-width: 104px;
    min-width: 104px;
}
.table-result.is-news .td-pli-personal-no p {
    overflow: hidden;
}
.table-result.is-news .td-pli-email-address {
    max-width: 262px;
    min-width: 262px;
}
.table-result.is-news .td-pli-kanji-name {
    max-width: 185px;
    min-width: 185px;
}
.table-result.is-news .td-pli-kana-name {
    max-width: 185px;
    min-width: 185px;
}
.table-result.is-news .td-pli-update-at {
    max-width: 204px;
    min-width: 204px;
}

/* ICC add 仮登録情報管理（tpli） */
.table-result.is-news .td-tpli-email-address {
    max-width: 420px;
    min-width: 420px;
}
.table-result.is-news .td-tpli-email-address p {
    overflow: hidden;
}
.table-result.is-news .td-tpli-created-at {
    max-width: 260px;
    min-width: 260px;
}
.table-result.is-news .td-tpli-limited-at {
    max-width: 260px;
    min-width: 260px;
}

.table-result.is-news .td-no {
    max-width: 60px;
    min-width: 120px;
}

.table-result.is-news .td-contract-info {
    max-width: 60px;
    min-width: 500px;
}

/* ICC add 予約情報管理（reserve） */
.table-result.is-news .td-reserve-reserve-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-reserve-reserve-no p {
    overflow: hidden;
}
.table-result.is-news .td-reserve-personal-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-reserve-party-code {
    max-width: 170px;
    min-width: 170px;
}
.table-result.is-news .td-reserve-party-name {
    max-width: 300px;
    min-width: 300px;
}
.table-result.is-news .td-reserve-kanji-name {
    max-width: 160px;
    min-width: 160px;
}
.table-result.is-news .td-reserve-kana-name {
    max-width: 220px;
    min-width: 220px;
}
.table-result.is-news .td-reserve-lock-div {
    max-width: 220px;
    min-width: 220px;
}
.table-result.is-news .td-reserve-insurance-policy-mark {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-reserve-insurance-policy-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-reserve-insurant-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-reserve-email-address {
    max-width: 300px;
    min-width: 300px;
}
.table-result.is-news .td-reserve-consult-plan-date {
    max-width: 180px;
    min-width: 180px;
}
.table-result.is-news .td-reserve-course-name {
    max-width: 200px;
    min-width: 200px;
}

/* ICC add インフォメーション管理（info） */
.table-result.is-news .td-info-title {
    max-width: 386px;
    min-width: 386px;
}
.table-result.is-news .td-info-title p {
    overflow: hidden;
}
.table-result.is-news .td-info-open-datetime-from {
    max-width: 112px;
    min-width: 112px;
}
.table-result.is-news .td-info-open-datetime-to {
    max-width: 112px;
    min-width: 112px;
}
.table-result.is-news .td-info-display-top-div {
    max-width: 86px;
    min-width: 86px;
}
.table-result.is-news .td-info-display-mypage-div {
    max-width: 114px;
    min-width: 114px;
}
.table-result.is-news .td-info-display-kigyo-div {
    max-width: 114px;
    min-width: 114px;
}

/* ICC add 紹介文管理（io） */
.table-result.is-news .td-io-party-code {
    max-width: 180px;
    min-width: 180px;
}
.table-result.is-news .td-io-party-code p {
    overflow: hidden;
}
.table-result.is-news .td-io-open-date-from {
    max-width: 120px;
    min-width: 120px;
}
.table-result.is-news .td-io-open-date-to {
    max-width: 120px;
    min-width: 120px;
}
.table-result.is-news .td-io-party-name {
    max-width: 505px;
    min-width: 505px;
}

/* ICC add 予約状況一覧（rl） */
.table-result.is-news .td-rl-no {
    max-width: 50px;
    min-width: 50px;
}
.table-result.is-news .td-rl-no p {
    overflow: hidden;
}
.table-result.is-news .td-rl-reserve-no {
    max-width: 120px;
    min-width: 120px;
}
.table-result.is-news .td-rl-kbn {
    max-width: 100px;
    min-width: 100px;
}
.table-result.is-news .td-rl-consult-plan-date {
    max-width: 120px;
    min-width: 120px;
}
.table-result.is-news .td-rl-consult-plan-time {
    max-width: 70px;
    min-width: 70px;
}
.table-result.is-news .td-rl-course-code {
    max-width: 200px;
    min-width: 200px;
}
.table-result.is-news .td-rl-insurance-policy-mark {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-rl-insurance-policy-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-rl-insurant-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-rl-kanji-name {
    max-width: 160px;
    min-width: 160px;
}
.table-result.is-news .td-rl-kana-name {
    max-width: 220px;
    min-width: 220px;
}

/* ICC add 予約状況一覧 個人（rpl） */
.table-result.is-news .td-rpl-no {
    max-width: 50px;
    min-width: 50px;
}
.table-result.is-news .td-rpl-no p {
    overflow: hidden;
}
.table-result.is-news .td-rpl-reserve-no {
    max-width: 120px;
    min-width: 120px;
}
.table-result.is-news .td-rpl-insurance-policy-mark {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-rpl-insurance-policy-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-rpl-insurant-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-rpl-kanji-name {
    max-width: 160px;
    min-width: 160px;
}
.table-result.is-news .td-rpl-kana-name {
    max-width: 220px;
    min-width: 220px;
}
.table-result.is-news .td-rpl-kbn {
    max-width: 100px;
    min-width: 100px;
}
.table-result.is-news .td-rpl-consult-plan-date {
    max-width: 120px;
    min-width: 120px;
}
.table-result.is-news .td-rpl-consult-plan-time {
    max-width: 70px;
    min-width: 70px;
}
.table-result.is-news .td-rpl-course-code {
    max-width: 200px;
    min-width: 200px;
}

/* ICC add 入り口管理 */
.table-result.is-reserve .td-entrance-number {
    max-width: 45px;
    min-width: 45px;
    text-align: center;
}
.table-result.is-reserve .td-entrance-number p {
    overflow: hidden;
}
.table-result.is-reserve .td-entrance-category-name {
    text-align: left;
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-reserve .td-entrance-entrance-name {
    text-align: left;
    max-width: 282px;
    min-width: 282px;
}
.table-result.is-reserve .td-entrance-party-code {
    text-align: center;
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-reserve .td-entrance-party-name {
    text-align: left;
    max-width: 282px;
    min-width: 282px;
}
.table-result.is-reserve .td-entrance-open-date {
    text-align: center;
    max-width: 240px;
    min-width: 240px;
}


/* ICC add 問診マスタ管理 */
.table-result.is-reserve .td-interview-kind-number {
    max-width: 45px;
    min-width: 45px;
    text-align: center;
}
.table-result.is-reserve .td-interview-kind-number p {
    overflow: hidden;
}
.table-result.is-reserve .td-interview-kind-name {
    text-align: left;
    max-width: 280px;
    min-width: 280px;
}
.table-result.is-reserve .td-interview-kind-item-code {
    text-align: center;
    max-width: 140px;
    min-width: 140px;
}
.table-result.is-reserve .td-interview-kind-item-name {
    text-align: left;
    max-width: 280px;
    min-width: 280px;
}
.table-result.is-reserve .td-interview-kind-date {
    text-align: center;
    max-width: 252px;
    min-width: 252px;
}
.table-result.is-reserve .td-interview-kind-standard-date {
    text-align: center;
    max-width: 140px;
    min-width: 140px;
}

/* ICC add 問診表ページ管理 */
.table-result.is-news .td-interview-page-num {
    text-align: center;
    max-width: 90px;
    min-width: 90px;
}
.table-result.is-news .td-interview-page-num p {
    overflow: hidden;
}
.table-result.is-news .td-interview-page-div {
    text-align: center;
    max-width: 120px;
    min-width: 120px;
}
.table-result.is-news .td-interview-page-note {
    text-align: left;
    max-width: 600px;
    min-width: 600px;
}
.table-result.is-news .td-interview-page-caution {
    text-align: left;
    max-width: 600px;
    min-width: 600px;
}

/* ICC add 問診表ページ項目管理 */
.table-result.is-news .td-interview-item-num {
    text-align: center;
    max-width: 45px;
    min-width: 45px;
}
.table-result.is-news .td-interview-item-num p {
    overflow: hidden;
}
.table-result.is-news .td-interview-item-code {
    text-align: center;
    max-width: 120px;
    min-width: 120px;
}
.table-result.is-news .td-interview-item-name {
    text-align: center;
    max-width: 220px;
    min-width: 220px;
}
.table-result.is-news .td-interview-item-title {
    text-align: left;
    max-width: 420px;
    min-width: 420px;
}
.table-result.is-news .td-interview-item-group {
    text-align: center;
    max-width: 90px;
    min-width: 90px;
}
.table-result.is-news .td-interview-item-type {
    text-align: center;
    max-width: 90px;
    min-width: 90px;
}
.table-result.is-news .td-interview-item-required {
    text-align: center;
    max-width: 60px;
    min-width: 60px;
}
.table-result.is-news .td-interview-item-remarks {
    text-align: left;
    max-width: 400px;
    min-width: 400px;
}

/* ICC add 問診表項目選択肢管理 */
.table-result.is-news .td-interview-observation-num {
    text-align: center;
    max-width: 80px;
    min-width: 80px;
}
.table-result.is-news .td-interview-observation-num p {
    overflow: hidden;
}
.table-result.is-news .td-interview-observation-code {
    text-align: center;
    max-width: 100px;
    min-width: 100px;
}
.table-result.is-news .td-interview-observation-name {
    text-align: center;
    max-width: 220px;
    min-width: 220px;
}
.table-result.is-news .td-interview-select-check {
    text-align: center;
    max-width: 100px;
    min-width: 100px;
}
.table-result.is-news .td-interview-select-title {
    text-align: center;
    max-width: 428px;
    min-width: 428px;
}

/* ICC add 対象項目検索 */
.table-result.is-news .td-search-item-code {
    text-align: center;
    max-width: 140px;
    min-width: 140px;
}
.table-result.is-news .td-search-item-name {
    text-align: left;
    max-width: 428px;
    min-width: 428px;
}
.table-result.is-news .td-search-item-result {
    text-align: center;
    max-width: 100px;
    min-width: 100px;
}
.table-result.is-news .td-search-item-date {
    text-align: center;
    max-width: 240px;
    min-width: 240px;
}


/* ICC add 問診入力状況管理（monshin） */
.table-result.is-news .td-monshin-no {
    max-width: 50px;
    min-width: 50px;
}
.table-result.is-news .td-monshin-reserve-no {
    max-width: 120px;
    min-width: 120px;
}
.table-result.is-news .td-monshin-kbn {
    max-width: 100px;
    min-width: 100px;
}
.table-result.is-news .td-monshin-consult-plan-date {
    max-width: 120px;
    min-width: 120px;
}
.table-result.is-news .td-monshin-timerange {
    max-width: 70px;
    min-width: 70px;
}
.table-result.is-news .td-monshin-interview-name {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-monshin-course-name {
    max-width: 200px;
    min-width: 200px;
}
.table-result.is-news .td-monshin-reserve-no p {
    overflow: hidden;
}
.table-result.is-news .td-monshin-personal-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-monshin-party-code {
    max-width: 170px;
    min-width: 170px;
}
.table-result.is-news .td-monshin-party-name {
    max-width: 300px;
    min-width: 300px;
}
.table-result.is-news .td-monshin-kanji-name {
    max-width: 160px;
    min-width: 160px;
}
.table-result.is-news .td-monshin-kana-name {
    max-width: 220px;
    min-width: 220px;
}
.table-result.is-news .td-monshin-insurance-policy-mark {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-monshin-insurance-policy-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-monshin-insurant-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-monshin-email-address {
    max-width: 300px;
    min-width: 300px;
}

/* ICC add コースグループ管理 (course-group) */
.table-result.is-reserve .td-course-group-no {
    max-width: 50px;
    min-width: 50px;
}
.table-result.is-reserve .td-course-group-course-code {
    max-width: 140px;
    min-width: 140px;
}
.table-result.is-reserve .td-course-group-course-name {
    text-align: left;
    max-width: 320px;
    min-width: 320px;
}

/* ICC add 結果情報管理（resultFile）RC2  */
.table-result.is-news .td-result-result-no {
    display: none;
}
.table-result.is-news .td-result-consult-result-date {
    max-width: 140px;
    min-width: 140px;
}
.table-result.is-news .td-result-course-name {
    max-width: 200px;
    min-width: 200px;
}
.table-result.is-news .td-result-personal-no {
    max-width: 130px;
    min-width: 130px;
}
.table-result.is-news .td-result-kanji-name {
    max-width: 160px;
    min-width: 160px;
}
.table-result.is-news .td-result-kana-name {
    max-width: 220px;
    min-width: 220px;
}
.table-result.is-news .td-result-delete-flg {
    max-width: 120px;
    min-width: 120px;
}
.table-result.is-news .td-result-datetime {
    max-width: 200px;
    min-width: 200px;
}

/* ICC add */
.l-col-md-2_5 {
   position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px) {
  .l-col-md-2_5 {
    max-width: 20%;

    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
  }
}

#reserve_detail_form .course-name {
    word-break: break-all;
}

/* LifLi-Cloud WebKenshin for RC2
   ========================================================================== */
/**
 * The eye symbol in password box for showing up the password.
 */
input[type=checkbox].eyemark {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    z-index: 1;
    width: 30px;
    height: 30px;
}
.iconEye::after {
    background: url(../../img/icon_eye.png) no-repeat 96%;
    background-size: contain;
    content: '';
    position: absolute;
    z-index: 0;
    width: 30px;
    height: 30px;
}
.iconEye2::after {
    background: url(../../img/icon_eye2.png) no-repeat 96%;
    background-size: contain;
    content: '';
    position: absolute;
    z-index: 0;
    width: 30px;
    height: 30px;
}

/**
 * accordion
 */
.acd-row-wrapper {
  display: flex;
  flex-direction: row;
  align-items: self-start;
  justify-content: right;
}
.acd-check, .acd-check-dt {
  flex-basis: 2px;
  position: absolute;
  display: none;
  opacity: 0;
  z-index: 0;
}
.acd-course {
  flex:1;
  display: none;
}
.acd-label, .acd-label-ex {
  background: #fff;
  display: block;
  /*margin:  0;*/
  /*padding: 5px;*/
  margin:  2px 0;
  padding: 10px;
}
.acd-label:after {
  content: "\1F4AC";
}
/* able
.acd-label-ex:after {
      content: "\1F4AC";
}
*/
.acd-label-dt {
  background: transparent;
  line-height: 1en;;
  text-align: right;
  display: block;
  margin: 0;
  padding: 0;
}
.acd-label-dt:after{
  content: "...more";
}
.acd-content, .acd-content-dt{
  background-color: #f8f8ff;
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: .5s;
  visibility: hidden;
  position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5);
}
.acd-check:checked + .acd-label + .acd-content {
  height: auto;
  opacity: 1;
  padding: 10px;
  visibility: visible;
}
.acd-check-dt:checked + .acd-label-dt + .acd-content-dt{
  height: auto;
  opacity: 1;
  padding: 10px;
  visibility: visible;
}
.acd-check-dt:checked ~ .acd-label-dt::after {
  content: "\1F5D9";
}
.acd-closer {
  color: #000000;
  background: transparent;
  width: auto;
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}
.acd-closer:after {
  content: "\1F5D9";
}
.acd-row-wrapper div.cell-fee {
  margin-top: 10px;
  margin-right: 1em;
  flex-basis:85px;
  text-align:right;
}
select#course.form-control {
    padding-left: 2em;
  }
  .course-selector__input {
      clip: rect(1px, 1px, 1px, 1px);
      position: absolute !important;
  }
  
  .course-selector__label {
      display: inline-block;
      background-color: #f2e2e6;
      flex-basis: 60px;
      margin-top: 15px;
      padding: 0.5rem 1rem;
      padding: 0;
      border-bottom: 2px solid #b02544;
      border-radius: 3px;
      color: #333;
      font-size: 1.2rem;
      /* font-weight: none; */
      line-height: 20px;
      text-align: center;
      transition: all .2s;
  }
  
  /* able
  .course-selector__label {
      display: inline-block;
      background-color: #f2e2e6;
      flex-basis: 130px;
      height: 35;
      padding: 0.5rem 1rem;
      border-bottom: 2px solid #b02544;
      border-radius: 3px;
      color: #333;
      font-size: 1.6rem;
      font-weight: bold;
      line-height: 35px;
      text-align: center;
      transition: all .2s;
  }
  */
  
  .course-selector__input:checked + .course-selector__label {
      background: #b02544;
      color: #fff;
      text-shadow: 0 0 1px rgba(0,0,0,.7);
  }
  
  .course-selector__input:focus + .course-selector__label {
      outline-color: #ff0000;
      outline-offset: -2px;
      outline-style: auto;
      outline-width: 5px;
  }
  
  
  
  
  .l-form-label.wcol {
    position: relative;
    max-width: 200px;
    padding: 15px 15px 15px 25px;
    font-weight: bold;
    background-color: #ffffff;

    -ms-flex-preferred-size: 200px;
    flex-basis: 200px;
}
.l-form-input.wcol {
    max-width: calc(100% - 200px);
    padding: 15px 20px;

    -ms-flex-preferred-size: calc(100% - 200px);
    flex-basis: calc(100% - 200px);
}
.l-form-input.half {
    max-width: calc(50% - 200px);
    padding: 15px 20px;

    -ms-flex-preferred-size: calc(50% - 200px);
    flex-basis: calc(50% - 200px);
}


/* ICC add アクセスログ（access-log） */

.l-offset-inner.is-log {
                    max-width: 1600px;
                    min-width: 1500px;
}

.table-result-container.is-log {
                    width: 1483px;
                    min-width: 1480px;
}


.wrap-result.is-log {
    margin-top: 20px;
    padding: 30px 26px 30px;
    min-width: 1460px;
}
.table-result.is-log {
    background: #f6f6f6;
    width: 1460px;
    min-width: 1460px;
}

.table-result.is-log td {
        min-height: 41px;
}
.table-result.is-log th {
        height: 41px;
}

.table-result .td-log-id {
        width: 100px;
        max-width: 100px;
        min-width: 100px;
}
.table-result .td-access-time {
        width: 180px;
        max-width: 180px;
        min-width: 180px;
}
.table-result .td-access-type {
        width: 140px;
        max-width: 140px;
        min-width: 140px;
}
.table-result .td-login-id {
        width: 140px;
}
.table-result .td-remote-ipaddress {
        width: 160px;
        max-width: 160px;
        min-width: 160px;
}
.table-result .td-log-formname{
        width: 160px;
}
.table-result .td-log-note1 {
        width: 320px;
        max-width: 320px;
        min-width: 320px;
}
.table-result .td-log-note2 {
        width: 320px;
}
.table-result .td-login-subinfo {
        width: 460px;
        max-width: 460px;
        min-width: 460px;
}
.table-result .td-session-id {
        width: 460px;
}

/* LifLi-Cloud WebKenshin for RC3
   ========================================================================== */

/*========================================
 *メール送信結果
 ========================================*/
.tbl-sendresult .table-result-header {
        width: 100%;
}

.tbl-sendresult .no {
        width: 80px;
}

.tbl-sendresult .date {
        width: 110px;
}

.tbl-sendresult .email {
        width: 250px;
}

.tbl-sendresult .subject {
        width: 250px;
}

.tbl-sendresult .status {
        width: 110px;
}

.tbl-sendresult .error {
        width: calc(100% - 800px); /*ほかのカラムの幅を差し引く*/
}
.url-include-text {
    color: inherit;
    font: inherit;
    overflow: auto;
    font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    border: 2px solid #888;
    border-radius: 3px;
    background-color: #fff;
    width: 100%;
    padding: 0.5em 1em;
}
.url-include-text a {
    text-decoration:underline;
}

/* LifLi-Cloud WebKenshin for AWS
   ========================================================================== */
/*========================================
 *メールテンプレートマスタ
 ========================================*/
.mail-template-output {
    border: 1px solid black;
    padding: 10px;
    font-family: sans-serif;
}

.mail-template-output.id {
    width: 30%;
}

.mail-template-output.content {
    white-space: pre-wrap; /* 改行維持 */
    height: 400px;
    overflow: auto;
}
.highlight {
    color: red;
}
.mail_template {
    border-top: solid 1px #ccc;
}