@charset "UTF-8";
/*
[base]base
==========================================================================
*/
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/** 1. Change the default font family in all browsers (opinionated). 2. Prevent adjustments of font size after orientation changes in IE and iOS. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove the margin in all browsers (opinionated). */
body { margin: 0; }

/* HTML5 display definitions
========================================================================== */
/** Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. 2. Add the correct display in IE. */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; }

/** Add the correct display in IE 9-. */
audio, canvas, progress, video { display: inline-block; }

/** Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0; }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Add the correct display in IE 10-. 1. Add the correct display in IE. */
template, [hidden] { display: none; }

/* Links
========================================================================== */
/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }

/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
a:active, a:hover { outline-width: 0; }

/* Text-level semantics
========================================================================== */
/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b, strong { font-weight: inherit; }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** Add the correct font style in Android 4.3-. */
dfn { font-style: italic; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Add the correct background and color in IE 9-. */
mark { background-color: #ff0; color: #000; }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

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

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content
========================================================================== */
/** Remove the border on images inside links in IE 10-. */
img { border-style: none; }

/** Hide the overflow in IE. */
svg:not(:root) { overflow: hidden; }

/* Grouping content
========================================================================== */
/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct margin in IE 8. */
figure { margin: 1em 40px; }

/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/* Forms
========================================================================== */
/** 1. Change font properties to `inherit` in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ }

/** Restore the font weight unset by the previous rule. */
optgroup { font-weight: bold; }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Change the border, margin, and padding in all browsers (opinionated). */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Correct the text style of placeholders in Chrome, Edge, and Safari. */
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* 
[base]html_element
==========================================================================
*/
@media screen and (max-width: 1200px) { html { min-width: 1200px; } }

body { font-size: 16px; line-height: 2.0; color: #000; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif; background-color: #fff; }
body:after { content: ""; clear: both; display: block; }

* { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; margin: 0; padding: 0; line-height: 1; font-weight: normal; }
h1:after, h2:after, h3:after, h4:after, h5:after, h6:after { content: ""; clear: both; display: block; }

p { margin: 0; }

small { font-size: 75%; }

pre { overflow: auto; white-space: pre-wrap; word-wrap: break-word; }
pre code { width: 99%; padding: 1.5em; font-size: 14px; }

code { font-size: 14px; font-family: Consolas,Monaco,monospace; display: inline-block; background-color: #eee; border: 1px solid #ccc; border-radius: 3px; padding: 0 0.4em; margin-right: 2px; margin-left: 2px; line-height: 1.3; }

img { vertical-align: bottom; }

@media screen and (max-width: 768px) { img { max-width: 100%; height: auto; } }
a, a:hover, a:visited, a:active, a:focus { text-decoration: none; }

ul { padding-left: 2.5em; }

li { margin: 0.5em 0; }

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

label, input, textarea, select { box-sizing: content-box; outline: none; }

label { cursor: pointer; padding: 4px; display: inline-block; }

[type="text"], [type="tel"], [type="password"], [type="email"], [type="number"], textarea, select { font-size: 16px; border-radius: 4px; border: 1px solid #777; }

[type="text"], [type="tel"], [type="password"], [type="email"], [type="number"], select, [type="button"], [type="submit"], [type="reset"] { height: 28px; line-height: 28px; padding: 2px 6px; }

textarea { padding: 6px 8px; }

[type="checkbox"], [type="radio"], select { margin-right: 4px; cursor: pointer; }

[type="checkbox"], [type="radio"] { display: inline-block; }

[type="button"], [type="submit"], [type="reset"] { cursor: pointer; }

/*
[layout][siteframe]site
==========================================================================
*/
.site, .site-top, .site-middle, .site-bottom, .site-header, .header-top, .header-middle, .header-bottom, .site-main, .main-top, .main-middle, .main-bottom, .site-footer, .footer-top, .footer-middle, .footer-bottom { clear: both; }
.site:after, .site-top:after, .site-middle:after, .site-bottom:after, .site-header:after, .header-top:after, .header-middle:after, .header-bottom:after, .site-main:after, .main-top:after, .main-middle:after, .main-bottom:after, .site-footer:after, .footer-top:after, .footer-middle:after, .footer-bottom:after { content: ""; clear: both; display: block; }

.site-main { min-height: 600px; }

.site-footer { padding-top: 180px; }

/*
[layout][siteframe]site_width
==========================================================================
*/
.site_width { box-sizing: content-box; width: 1040px; margin: 0 auto; padding: 0 40px; }
.site_width:after { content: ""; clear: both; display: block; }

/*
[layout]grid
==========================================================================
*/
/*
GRID
--------------------------------------------------
* 最大有効幅： 1040px
* カラム分割数： 12分割
* 余白（ガター）： 40px

### カラム
*/
/* 1カラム ： 50px */
/* 2カラム ： 140px */
/* 3カラム ： 230px */
/* 4カラム ： 320px */
/* 5カラム ： 410px */
/* 6カラム ： 500px */
/* 7カラム ： 590px */
/* 8カラム ： 680px */
/* 9カラム ： 770px */
/* 10カラム ： 860px */
/* 11カラム ： 950px */
/* 12カラム ： 1040px */
/*
CLASS
--------------------------------------------------
* container： `.container`
* row： `.row`
* col： `.col-[数字]`
* push： `.push-[数字]`
* pull： `.pull-[数字]`
*/
/*
`.container`と`.row`
--------------------------------------------------
*/
.container { width: 1040px; margin: 0 auto; overflow: hidden; }

.container .row { display: flex; flex-wrap: wrap; clear: both; max-width: 1080px; margin-left: -20px; margin-right: -20px; }

.container .row:after { content: ""; clear: both; display: block; }

/*
カラム
--------------------------------------------------
*/
.container .row > .col-1 { position: relative; float: left; width: 8.3334%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-1 .row { margin-left: -20px; margin-right: -20px; }

.container .row > .col-2 { position: relative; float: left; width: 16.6667%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-2 .row { margin-left: -20px; margin-right: -20px; }

.container .row > .col-3 { position: relative; float: left; width: 25%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-3 .row { margin-left: -20px; margin-right: -20px; }

.container .row > .col-4 { position: relative; float: left; width: 33.3334%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-4 .row { margin-left: -20px; margin-right: -20px; }

.container .row > .col-5 { position: relative; float: left; width: 41.6667%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-5 .row { margin-left: -20px; margin-right: -20px; }

.container .row > .col-6 { position: relative; float: left; width: 50%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-6 .row { margin-left: -20px; margin-right: -20px; }

.container .row > .col-7 { position: relative; float: left; width: 58.3334%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-7 .row { margin-left: -20px; margin-right: -20px; }

.container .row > .col-8 { position: relative; float: left; width: 66.6667%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-8 .row { margin-left: -20px; margin-right: -20px; }

.container .row > .col-9 { position: relative; float: left; width: 75.0001%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-9 .row { margin-left: -20px; margin-right: -20px; }

.container .row > .col-10 { position: relative; float: left; width: 83.3334%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-10 .row { margin-left: -20px; margin-right: -20px; }

.container .row > .col-11 { position: relative; float: left; width: 91.6667%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-11 .row { margin-left: -20px; margin-right: -20px; }

.container .row > .col-12 { position: relative; float: left; width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

.container .row > .col-12 .row { margin-left: -20px; margin-right: -20px; }

/*
カラムの右移動
--------------------------------------------------
*/
.container .row > .push-1 { left: 8.3334%; }

.container .row > .push-2 { left: 16.6667%; }

.container .row > .push-3 { left: 25%; }

.container .row > .push-4 { left: 33.3334%; }

.container .row > .push-5 { left: 41.6667%; }

.container .row > .push-6 { left: 50%; }

.container .row > .push-7 { left: 58.3334%; }

.container .row > .push-8 { left: 66.6667%; }

.container .row > .push-9 { left: 75.0001%; }

.container .row > .push-10 { left: 83.3334%; }

.container .row > .push-11 { left: 91.6667%; }

/*
カラムの左移動
--------------------------------------------------
*/
.container .row > .pull-1 { right: 8.3333333333%; }

.container .row > .pull-2 { right: 16.6666666667%; }

.container .row > .pull-3 { right: 25%; }

.container .row > .pull-4 { right: 33.3333333333%; }

.container .row > .pull-5 { right: 41.6666666667%; }

.container .row > .pull-6 { right: 50%; }

.container .row > .pull-7 { right: 58.3333333333%; }

.container .row > .pull-8 { right: 66.6666666667%; }

.container .row > .pull-9 { right: 75%; }

.container .row > .pull-10 { right: 83.3333333333%; }

.container .row > .pull-11 { right: 91.6666666667%; }

/* 
[module]element
==========================================================================*/
.headline { font-size: 22px; color: #333; border-left: 6px solid #72bcc5; padding-left: 14px; margin-bottom: 40px; }

.headline-center { position: relative; text-align: center; }
.headline-center .title { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 30px; color: #444; }
.headline-center:after { content: ""; display: block; width: 0px; height: 0px; position: absolute; top: -62px; left: 50%; margin-left: -10px; border-style: solid; border-width: 10px; border-top-width: 20px; border-color: #72bcc5 transparent transparent transparent; }

.text_box:after { content: ""; clear: both; display: block; }
.text_box p { margin-top: 1.4em; }
.text_box p:first-child { margin-top: 0em; }
.text_box.text_box-center { text-align: center; }

.image:after { content: ""; clear: both; display: block; }

a.link { color: #2f929c; }

a.link:hover { opacity: 0.7; }

a[class^="link_btn"] { display: inline-block; border: 1px solid #7cb0b7; border-radius: 6px; background-color: #72bcc5; color: #fff; font-size: 16px; }
a[class^="link_btn"] .text { display: inline-block; padding-top: 0.2em; }

a[class^="link_btn"]:hover { opacity: 0.8; }

/*
[module][site]header
==========================================================================*/
.header_appearance { background-color: #ebecec; height: 60px; padding-top: 8px; border-bottom: 4px solid #72bcc5; }
.header_appearance:after { content: ""; clear: both; display: block; }

.header_branding { float: left; padding-top: 5px; }
.header_branding:after { content: ""; clear: both; display: block; }

.header_branding-title { line-height: 1; margin: 0; padding: 0; color: #fff; font-size: 14px; }

.header_branding-logo { float: left; margin-right: 14px; line-height: 1; }

.header_branding-name { line-height: 1; margin: 0; padding: 0; float: left; color: #2e3c3e; font-size: 26px; margin-top: 1px; font-family: 'Montserrat', sans-serif; font-weight: 300; }

.header_corporate_info:after { content: ""; clear: both; display: block; }

.header_contact_info:after { content: ""; clear: both; display: block; }

.header_contact_info-dial:after { content: ""; clear: both; display: block; }

.header_contact_info-mail:after { content: ""; clear: both; display: block; }

.header_search:after { content: ""; clear: both; display: block; }

.header_tagline { padding: 5px; background-color: #333; }
.header_tagline:after { content: ""; clear: both; display: block; }

/*
[module][site]footer
==========================================================================*/
.footer_appearance { background-color: #ebecec; height: 340px; }
.footer_appearance:after { content: ""; clear: both; display: block; }
.footer_appearance .site_width { position: relative; }

.footer_appearance .auther_info { position: absolute; top: 134px; right: 70px; }
.footer_appearance .auther_info .image { width: 88px; opacity: 0.9; }
.footer_appearance .auther_info .image img { width: 100%; }

.footer_sitemap { width: 740px; position: absolute; top: -1px; left: 50%; margin-left: -370px; background-color: #fff; text-align: center; height: 56px; }
.footer_sitemap:after { content: ""; clear: both; display: block; }
.footer_sitemap:last-child { margin-right: 0; }

.footer_sitemap ul, .footer_sitemap ol { margin: 0; padding: 0; list-style: none; line-height: 1; }
.footer_sitemap li { margin: 0; padding: 0; }
.footer_sitemap a { display: block; line-height: 1; text-decoration: none; }

.footer_sitemap-list > li { display: inline-block; margin-top: 2px; }
.footer_sitemap-list > li + li { margin-left: 20px; }
.footer_sitemap-list > li a { color: #2198a7; font-size: 15px; padding: 8px 14px; border-radius: 4px; }
.footer_sitemap-list > li a:hover { opacity: 0.7; }

.footer_branding { float: left; margin-top: 140px; }

.footer_branding-logo { float: left; margin-right: 10px; line-height: 1; }

.footer_branding-name { float: left; margin-top: 3px; font-size: 22px; line-height: 1; font-family: 'Montserrat', sans-serif; font-weight: 300; }
.footer_branding-name a { color: #333; }

.footer_branding-description { clear: both; padding-top: 10px; font-size: 14px; color: #666; }

.footer_tagline { padding: 5px; background-color: #72bcc5; }
.footer_tagline:after { content: ""; clear: both; display: block; }

.footer_copyright { color: #fff; text-align: center; }

.footer_copyright a { color: #fff; font-size: 18px; font-family: 'Montserrat', sans-serif; font-weight: 300; }

/*
[module]navigation
==========================================================================*/
.gnav-main { float: left; margin-left: 30px; }
.gnav-main:after { content: ""; clear: both; display: block; }
@media screen and (max-width: 768px) { .gnav-main { display: none; } }

.gnav-main ul, .gnav-main ol { margin: 0; padding: 0; list-style: none; }
.gnav-main li, .gnav-main dt, .gnav-main dd { margin: 0; padding: 0; }
.gnav-main a { line-height: 1; text-decoration: none; }

.gnav-main-list { width: 100%; }

.gnav-main-list > li { float: left; margin-right: 4px; }
.gnav-main-list > li > a { text-align: center; color: #395558; display: block; font-size: 15px; height: 48px; line-height: 42px; padding: 0 32px; }
.gnav-main-list > li > a .icon { color: #999; margin-left: 10px; }
.gnav-main-list > li > a:hover { background-color: #fafafa; color: #2198a7; }

.gnav-main-list > li:hover { color: #111; background-color: #fff; }

.gnav-mobile_menu { position: fixed; top: 0; left: 25%; width: 75%; background: #fff; opacity: 0; transition-property: opacity; transition-duration: 0.3s; transition-delay: 0.3s; z-index: -100; margin-bottom: -999999px; padding-bottom: 999999px; }

.gnav-mobile_menu-title { color: #fff; background-color: #ffcc00; }

.gnav-mobile_menu-list { list-style: none; }

.gnav-mobile_menu-list > li { border-bottom: 1px solid #ccc; line-height: 1; }
.gnav-mobile_menu-list > li:first-child { border-top: 1px solid #ccc; }
.gnav-mobile_menu-list > li > a { display: block; padding: 15px 15px 15px 20px; color: #555; font-size: 16px; }
.gnav-mobile_menu-list > li > a:hover { opacity: 0.6; }

.gnav-mobile_menu-list > li.is-active { position: relative; }
.gnav-mobile_menu-list > li.is-active:before { content: ''; position: absolute; top: 50%; left: 8px; display: inline-block; margin-top: -0.5em; border: 0.5em solid transparent; border-left: 0.5em solid #408f89; }

.gnav-mobile_menu-switch { position: absolute; top: 30px; right: 12px; width: 42px; background-color: #eee; z-index: 100; display: none; }
.gnav-mobile_menu-switch > a { position: relative; display: block; width: 42px; height: 42px; border: 1px solid #333; box-shadow: inset 0 0 0 2px #fff; }
.gnav-mobile_menu-switch .gnav-mobile_menu-border { position: absolute; left: 50%; display: block; width: 20px; height: 4px; margin-left: -10px; background: #555; }
.gnav-mobile_menu-switch .gnav-mobile_menu-border.border-1 { top: 10px; }
.gnav-mobile_menu-switch .gnav-mobile_menu-border.border-2 { top: 18px; }
.gnav-mobile_menu-switch .gnav-mobile_menu-border.border-3 { top: 26px; }

@media screen and (max-width: 768px) { .gnav-mobile_menu-switch { display: block; } }
.site { position: relative; left: 0; top: 0; transition-property: left; transition-duration: 0.3s; }

body.is-open .site { left: -75%; }
body.is-open .gnav-mobile_menu { opacity: 1; z-index: 9999; }

.lnav { padding: 30px 40px; margin-top: 52px; font-size: 16px; line-height: 1.4; background-color: #fdfdfd; border: solid 1px #ccc; border-radius: 8px; margin-left: -10px; margin-right: -10px; }
.lnav:after { content: ""; clear: both; display: block; }

.lnav .lnav-col { float: left; }
.lnav .lnav-col + .lnav-col { margin-left: 70px; }
.lnav .title { color: #444; margin-bottom: 26px; font-size: 19px; }
.lnav .list { padding-left: 20px; margin: 0; }
.lnav .list li { margin: 0; }
.lnav .list li + li { margin-top: 14px; }
.lnav .list a { font-size: 17px; }

.scroll_top-fixed { color: #72bcc5; border-radius: 5px; display: none; position: fixed; right: 24px; bottom: 18px; display: block; width: 58px; height: 74px; font-size: 24px; text-align: center; line-height: 74px; background-color: #ebecec; z-index: 999999; }

.scroll_top-fixed:hover { color: #ccc; }

/* 
[module]contents
==========================================================================*/
.article_section { margin-top: 70px; padding-bottom: 20px; }
.article_section:after { content: ""; clear: both; display: block; }
.article_section.first-child { margin-top: 54px; }

.article_section-header:after { content: ""; clear: both; display: block; }

.article_section-body { padding-top: 40px; }
.article_section-body:after { content: ""; clear: both; display: block; }

.article_section-footer:after { content: ""; clear: both; display: block; }

.article_section + .article_section { margin-top: 120px; }

.article_section .section { padding-top: 60px; }
.article_section .section + .section { margin-top: 60px; padding-top: 60px; }
.article_section .container .section { padding-top: 0; }
.article_section .heading h2.title { color: #333; font-size: 26px; padding-bottom: 14px; padding-left: 2px; margin-bottom: 40px; border-bottom: 4px solid #72bcc5; }
.article_section .heading h3.title { color: #333; font-size: 24px; padding-bottom: 14px; padding-left: 2px; border-bottom: 2px solid #72bcc5; margin-bottom: 30px; }
.article_section .heading-fullwidth { background-color: #72bcc5; padding: 16px 0; }
.article_section .heading-fullwidth .title { font-size: 26px; color: #fff; }
.article_section .heading-fullwidth + .description { margin-top: 60px; }
.article_section h4.headline { font-size: 22px; margin-top: 60px; margin-bottom: 30px; }
.article_section p + ul, .article_section p + ol { margin-top: 32px; }
.article_section p + p { margin-top: 1em; }
.article_section .list { padding-left: 20px; margin-top: 40px; }
.article_section .list li { line-height: 1.6; margin: 0.9em 0; }
.article_section .list li li { margin-top: 0.6em; }
.article_section .table { width: 100%; }
.article_section .table th, .article_section .table td { border: solid 1px #bbb; }
.article_section .table th { font-weight: normal; }
.article_section .table thead th { background-color: #d3e7e8; }
.article_section .table tbody th, .article_section .table tbody td { padding: 14px 22px; }
.article_section .table tbody th { background-color: #f3fafb; text-align: left; }
.article_section .table .cell-1 { width: 200px; }
.article_section .table .cell-2 { width: 220px; }
.article_section .table .spec_text { font-size: 14px; }
.article_section .text_box + .table { margin-top: 30px; }
.article_section .text_box + .list { margin-top: 30px; }
.article_section .text_box + .heading { margin-top: 80px; }
.article_section .text_box + .headline { margin-top: 80px; }
.article_section .text_box + .container { margin-top: 40px; }
.article_section .list + .text_box { margin-top: 30px; }
.article_section .table + .heading { margin-top: 80px; }

.os-windows .article_section .headline { line-height: 1; padding-top: 0.2em; }

.page_heading { border-bottom: 1px solid #ccc; background-color: #fff; background: url(/_asset/images/global/bcg-grid.png); height: 86px; }

.page_heading { padding-top: 1px; }
.page_heading .title { color: #2198a7; line-height: 1; font-size: 28px; margin-top: 30px; }

.page_heading-home { padding: 0; height: 470px; background-color: #fff; background: url(/_asset/images/global/bcg-grid.png); position: relative; }

.page_heading-home { padding-top: 1px; }
.page_heading-home .title { font-size: 18px; color: #2198a7; margin-top: 20px; margin-left: 3px; }
.page_heading-home .center_box { margin-top: 104px; width: 100%; }
.page_heading-home .logo { width: 56px; height: 56px; margin: 0 auto; }
.page_heading-home .site_name { text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 30px; color: #2e3c3e; line-height: 1; margin-top: 21px; }
.page_heading-home .site_name small { font-size: 18px; color: #777; }
.page_heading-home .page_nav { text-align: center; margin-top: 32px; }
.page_heading-home .page_nav .list { padding: 0; margin: 0; list-style: none; line-height: 1; }
.page_heading-home .page_nav .list li { display: inline-block; margin: 0; }
.page_heading-home .page_nav .list li a { font-size: 18px; display: block; font-family: 'Montserrat', sans-serif; font-weight: 400; color: #72bcc5; }
.page_heading-home .page_nav .list li a:hover { opacity: 0.7; }
.page_heading-home .page_nav .list li + li { margin-left: 30px; }

.help-btn { display: inline-block; position: relative; width: 20px; height: 20px; background-color: #72bcc5; line-height: 20px; text-align: center; border-radius: 3px; cursor: pointer; }
.help-btn .text { display: inline-block; font-size: 14px; color: #fff; }
.help-btn .help-contents { display: none; position: absolute; width: 520px; padding: 0px; text-align: left; font-size: 14px; line-height: 1.6; left: -130px; bottom: 22px; border-radius: 8px; background-color: #f7f7f7; border: 1px solid #aaa; box-shadow: 0 1px 5px rgba(10, 10, 10, 0.3); z-index: 10; }
.help-btn .help-contents dl { padding: 0; margin: 0; word-wrap: break-word; padding-bottom: 20px; }
.help-btn .help-contents dl dt { padding: 10px 20px; border-bottom: 1px solid #aaa; margin: 0; font-size: 16px; }
.help-btn .help-contents dl dd { padding: 10px 20px; margin: 12px 0 0 0; }
.help-btn .help-contents dl dd p + p { margin-top: 10px; }
.help-btn .help-contents.help-contents-right { left: -400px; }
.help-btn.is-hover .help-contents, .help-btn.is-fixed .help-contents { display: inline-block; }

.generator { padding-top: 70px; padding-bottom: 20px; }
.generator:after { content: ""; clear: both; display: block; }

.generator-grid { width: 500px; float: left; }
.generator-grid:after { content: ""; clear: both; display: block; }

.generator-markup { width: 500px; float: right; }
.generator-markup:after { content: ""; clear: both; display: block; }

.generator-responsive { clear: both; padding-top: 90px; }
.generator-responsive:after { content: ""; clear: both; display: block; }

.generator-responsive-body { position: relative; }
.generator-responsive-body .btn-screen_size { position: absolute; top: 0; right: 0; }

.generator-option:after { content: ""; clear: both; display: block; }

.generator .heading { color: #333; font-size: 24px; padding-bottom: 12px; padding-left: 2px; border-bottom: 3px solid #72bcc5; margin-bottom: 24px; }
.generator .description { font-size: 14px; color: #555; }
.generator .setting { clear: both; margin-top: 14px; }
.generator .setting:after { content: ""; clear: both; display: block; }
.generator .setting + .setting { margin-top: 8px; }
.generator .setting .use_check { float: left; margin-right: 20px; padding-top: 6px; }
.generator .setting .preset { padding-top: 7px; float: left; }
.generator .setting .preset:after { content: ""; clear: both; display: block; }
.generator .setting .preset select { font-size: 14px; padding: 2px; height: 22px; line-height: 18px; width: 416px; border: solid 1px #b7c8ca; color: #65888c; }
.generator .setting .preset select:hover { background-color: #f5f5f5; }
.generator .setting .preset select:focus { background-color: #fcfcfc; color: #333; }
.generator .generator-responsive .setting { margin-top: 40px; }
.generator .generator-responsive .setting.select { margin-top: 20px; }
.generator input { border-color: #555; }
.generator input:hover { background-color: #f7f7f7; }
.generator input:focus { border-color: #555; background-color: #fff; color: #333; }
.generator .input_block { padding-top: 20px; clear: both; }
.generator .input_block table th, .generator .input_block table td { text-align: left; font-weight: normal; padding: 8px 10px; }
.generator .input_block table th { padding-left: 0; min-width: 150px; }
.generator .input_block .unit { margin-left: 8px; }
.generator .form-actions { text-align: center; padding-top: 60px; margin-top: 90px; border-top: 1px solid #ddd; }
.generator .form-actions .generator-btn { border: 1px solid #7cb0b7; border-radius: 6px; background-color: #72bcc5; color: #fff; font-size: 18px; height: 60px; line-height: 60px; width: 400px; }
.generator .form-actions .generator-btn:hover { opacity: 0.8; }
.generator .form-actions .generator-btn.is-disabled { cursor: default; background: #cdcdcd; border: 1px solid #cdcdcd; }
.generator .download-description { width: 500px; padding-top: 40px; margin: 0 auto; }
.generator .download-description p { text-align: center; }
.generator .download-description ul { width: 320px; margin-left: 80px; }

.generator .input_text:disabled, .generator .input_text:read-only { background-color: #efefef; border: 1px solid #ccc; }
.generator .checkbox { padding: 0; line-height: 30px; }
.generator .checkbox [type="checkbox"] { position: absolute; z-index: 2; margin-left: -99999px; }
.generator .checkbox .text { margin-left: 0; display: inline-block; vertical-align: middle; }
.generator .checkbox .mark { display: inline-block; vertical-align: middle; width: 30px; height: 30px; border: 1px solid #aaa; position: relative; }
.generator .checkbox .mark:after { content: ""; display: none; position: absolute; width: 22px; height: 22px; background-color: #72bcc5; }
.generator .checkbox.enabled { cursor: pointer; }
.generator .checkbox.enabled .mark { border: 1px solid #555; background-color: #fff; }
.generator .checkbox.enabled:hover .mark { border: 1px solid #72bcc5; }
.generator .checkbox.enabled:hover .mark:after { display: block; background-color: #ddd; top: 3px; left: 3px; }
.generator .checkbox.disabled { cursor: default; }
.generator .checkbox.disabled .mark { border: 1px solid #ccc; background-color: rgba(100, 100, 100, 0.05); }
.generator .checkbox.disabled .text { color: #ddd; }
.generator .checkbox.active .mark:after { display: block; background-color: #72bcc5; top: 3px; left: 3px; }
.generator .checkbox.active:hover .mark { border: 1px solid #555; }
.generator .checkbox.active:hover .mark:after { background-color: #72bcc5; }
.generator .checkbox.checkbox-small { line-height: 20px; }
.generator .checkbox.checkbox-small .mark { width: 20px; height: 20px; }
.generator .checkbox.checkbox-small .mark:after { top: 2px; left: 2px; width: 14px; height: 14px; }
.generator .checkbox.checkbox-small:hover .mark:after { top: 2px; left: 2px; }
.generator .checkbox.checkbox-small.active .mark:after { display: block; top: 2px; left: 2px; }
.generator .radio { line-height: 20px; padding: 0px; }
.generator .radio [type="radio"] { position: absolute; z-index: 2; margin-left: -99999px; }
.generator .radio .text { margin-left: 0; display: inline-block; vertical-align: middle; }
.generator .radio .mark { display: inline-block; vertical-align: middle; width: 24px; height: 24px; border-radius: 100px; border: 1px solid #aaa; position: relative; }
.generator .radio .mark:after { content: ""; display: none; position: absolute; width: 16px; height: 16px; border-radius: 100px; }
.generator .radio.enabled { cursor: pointer; }
.generator .radio.enabled .mark { border: 1px solid #555; background-color: #fff; }
.generator .radio.enabled:hover .mark { border: 1px solid #72bcc5; }
.generator .radio.enabled:hover .mark:after { display: block; background-color: #ddd; top: 3px; left: 3px; }
.generator .radio.disabled { cursor: default; }
.generator .radio.disabled .mark { border: 1px solid #ccc; background-color: rgba(100, 100, 100, 0.05); }
.generator .radio.disabled .text { color: #ddd; }
.generator .radio.active .mark:after { display: block; background-color: #72bcc5; top: 3px; left: 3px; }
.generator .radio.active:hover .mark { border: 1px solid #555; }
.generator .radio.active:hover .mark:after { background-color: #72bcc5; }
.generator .radio.radio-small .mark { width: 20px; height: 20px; }
.generator .radio.radio-small .mark:after { top: 2px; left: 2px; width: 14px; height: 14px; }
.generator .radio.radio-small:hover .mark:after { top: 2px; left: 2px; }
.generator .radio.radio-small.active .mark:after { top: 2px; left: 2px; }

.generator .grid_checker { background-color: #f7f7f7; margin-top: 15px; font-size: 14px; padding: 8px 16px; border: 1px solid #eaeaea; border-radius: 6px; line-height: 1.6; }
.generator .grid_checker .not_integer, .generator .grid_checker .error_integer, .generator .grid_checker .error_integer-not_number, .generator .grid_checker .error_column { display: none; }
.generator .checker-col_integer .integer .mark { color: #4caf50; }
.generator .checker-col_integer .not_integer .mark { color: #ffc107; }
.generator .checker-col_integer .error_integer .mark, .generator .checker-col_integer .error_integer-not_number .mark, .generator .checker-col_integer .error_column .mark { color: #d32f2f; }

.generator .input_block-responsive { clear: both; padding-top: 20px; }
.generator .input_block-responsive:after { content: ""; clear: both; display: block; }
.generator .input_block-responsive .col { float: left; }
.generator .input_block-responsive .col:after { content: ""; clear: both; display: block; }
.generator .input_block-responsive table { cursor: default; }
.generator .input_block-responsive table th, .generator .input_block-responsive table td { padding: 0; text-align: left; font-weight: normal; line-height: 1; vertical-align: middle; }

.generator .js-toggle_box-responsive { display: none; }
.generator .col.break_point table th, .generator .col.break_point table td { border: 1px solid #a5a5a5; text-align: center; }
.generator .col.break_point table td.td-bp-fluid_un { border-right: dotted 1px #ccc; }
.generator .col.break_point table td.td-bp-fluid_up { border-left: none; }
.generator .col.break_point table thead th { padding: 8px 0px 6px; font-size: 13px; background-color: #ddeef1; height: 48px; }
.generator .col.break_point table thead td { height: 40px; line-height: 40px; font-size: 14px; background-color: #ebf2f3; color: #3d5052; }
.generator .col.break_point table tbody td { height: 37px; }
.generator .col.break_point table tfoot .gutter_over_write td { height: 37px; line-height: 35px; }
.generator .col.break_point table tfoot .gutter_over_write td.hide { visibility: hidden; }
.generator .col.break_point table tfoot .gutter_over_write-title { font-size: 13px; }
.generator .col.break_point table tfoot .input_text { width: 30px; height: 22px; text-align: right; padding: 2px 2px; }
.generator .col.break_point table tfoot .unit { margin-left: 2px; font-size: 12px; }
.generator .col.break_point table .tr-bp { background-color: #f5f5f5; color: #aaa; }
.generator .col.break_point table .tr-bp input { color: #aaa; }
.generator .col.break_point table .tr-bp.active td { background-color: #fff; color: #111; }
.generator .col.break_point table .tr-bp.active td input { color: #111; }
.generator .col.break_point table .tr-bp.active:hover td { background-color: #fcfcfc; }
.generator .col.break_point table .tr-bp.active:hover td.is-hover { background: #ebf2f3; }
.generator .col.break_point table .tr-bp td.is-hover { background: #ebf2f3; }
.generator .col.break_point table .checkbox { width: 100%; padding: 2px 0; }
.generator .col.break_point table .radio { width: 100%; padding: 6px 0; }
.generator .td-bp-use .cell-bp-use { width: 40px; }
.generator .td-bp-name .cell-bp-name { width: 64px; padding-left: 10px; text-align: left; }
.generator .td-bp-pixel .cell-bp-pixel { width: 130px; text-align: right; padding-left: 4px; padding-right: 4px; }
.generator .td-bp-pixel .cell-bp-pixel .input_text { font-size: 16px; text-align: right; width: 76px; padding-left: 4px; padding-right: 8px; height: 22px; line-height: 22px; text-align: right; }
.generator .td-bp-pixel .cell-bp-pixel .unit { font-size: 12px; }
.generator .td-bp-fluid_un .cell-bp-fluid_un { width: 60px; margin: 0 auto; }
.generator .td-bp-fluid_un .cell-bp-fluid_un .radio.active .mark:after { background: #7dbb2b; }
.generator .td-bp-fluid_up .cell-bp-fluid_up { width: 60px; margin: 0 auto; }
.generator .td-bp-fluid_up .cell-bp-fluid_up .radio.active .mark:after { background: #7dbb2b; }
.generator .td-bp-media .cell-bp-media { width: 60px; margin: 0 auto; }
.generator .td-bp-media .cell-bp-media .radio { position: relative; }
.generator .td-bp-media .cell-bp-media .radio.active .mark:after { background: #fda117; }

.generator .fluid_info { position: relative; margin-left: 20px; width: 150px; border: solid #a5a5a5; border-width: 1px 0 1px 1px; }
.generator .fluid_info .table-caption { position: absolute; top: -51px; left: -1px; padding: 8px 0 6px; width: 599px; height: 50px; background-color: #ddeef1; border: solid #a5a5a5; border-radius: 8px 8px 0 0; border-width: 1px 1px 0; font-size: 13px; line-height: 2.5; text-align: center; }
.generator .fluid_info .fluid_table { width: 100%; background-color: #fefefe; }
.generator .fluid_info .fluid_table th, .generator .fluid_info .fluid_table td { border-right: 1px solid #a5a5a5; text-align: center; }
.generator .fluid_info .fluid_table th:first-child, .generator .fluid_info .fluid_table td:first-child { width: 150px; }
.generator .fluid_info .fluid_table thead th { padding: 8px 0px; font-size: 13px; background-color: #ddeef1; border-bottom: 1px solid #f7f7f7; height: 34px; }
.generator .fluid_info .fluid_table thead td { height: 34px; line-height: 22px; font-size: 13px; background-color: #ebf2f3; border-bottom: 1px solid #f7f7f7; color: #3d5052; }
.generator .fluid_info .fluid_table tbody td { height: 37px; }
.generator .fluid_info .fluid_table tbody tr.tr-blank td { height: 18px; }
.generator .fluid_info .tr-fluid td { position: relative; }
.generator .fluid_info .tr-fluid td .media_line { content: ""; position: absolute; top: 50%; display: block; margin-top: -0.51px; transition-property: width; transition-duration: 0.3s; transition-timing-function: ease-in-out; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow { position: absolute; left: 71px; border-left: 2px solid #eee; opacity: 0; transition-property: height; transition-duration: 0.3s; transition-timing-function: ease-in-out; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow .text_box { position: absolute; width: 150px; margin-left: -76px; font-size: 12px; line-height: 1.0; left: 50%; text-align: center; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow:after { content: ""; position: absolute; left: -6px; display: block; width: 0; height: 0; border: 5px solid transparent; z-index: 3; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow:before { display: block; content: ""; position: absolute; left: -12px; width: 20px; border: 1px solid transparent; z-index: 3; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow-lower { border-left: 2px solid #7dbb2b; bottom: 2px; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow-lower .text_box { top: -32px; color: #7dbb2b; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow-lower:after { border-bottom: 12px solid #7dbb2b; top: -9px; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow-lower:before { border-bottom: 1px solid #7dbb2b; bottom: 0px; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow-upper { border-left: 2px solid #7dbb2b; top: 3px; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow-upper .text_box { bottom: -32px; color: #7dbb2b; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow-upper:after { border-top: 12px solid #7dbb2b; bottom: -9px; }
.generator .fluid_info .tr-fluid td .media_line .fluid_arrow-upper:before { border-bottom: 1px solid #7dbb2b; top: -1px; }
.generator .fluid_info .tr-fluid.is-fluid_lower td .fluid-width.valin-t { display: block; color: #666; }
.generator .fluid_info .tr-fluid.is-fluid_lower td .media_line .fluid_arrow-lower { opacity: 1; }
.generator .fluid_info .tr-fluid.is-fluid_upper td .fluid-width.valin-b { display: block; color: #666; }
.generator .fluid_info .tr-fluid.is-fluid_upper td .media_line .fluid_arrow-upper { opacity: 1; }
.generator .fluid_info .tr-fluid.tr-fluid-16 td { height: 60px; }
.generator .fluid_info .tr-fluid.tr-fluid-16 td .media_line { margin-top: -9.51px; }
.generator .fluid_info .tr-fluid.tr-fluid-16 td .media_screen-width.valin-b:after { display: none; }
.generator .fluid_info .tr-fluid.tr-fluid-16 td:first-child:before { margin-top: -24px; }
.generator .fluid_info .cell-container_fluid { position: relative; width: 46%; height: 36px; text-align: right; }
.generator .fluid_info .cell-container_fluid .fluid-width { position: absolute; display: none; right: 0; font-size: 11px; font-family: arial; line-height: 1; color: #aaa; }
.generator .fluid_info .cell-container_fluid .fluid-width .unit { font-size: 10px; margin-left: 1px; }
.generator .fluid_info .cell-container_fluid .fluid-width.valin-t { top: 2px; }
.generator .fluid_info .cell-container_fluid .fluid-width.valin-t:after { content: '以下'; position: absolute; bottom: 0; right: -30px; display: block; }
.generator .fluid_info .cell-container_fluid .fluid-width.valin-b { bottom: 0; }
.generator .fluid_info .cell-container_fluid .fluid-width.valin-b:after { content: '以上'; position: absolute; bottom: 0; right: -30px; display: block; }
.generator .fluid_info .tr-fluid-0.is-fluid_lower td .media_line .fluid_arrow-lower { opacity: 0; }
.generator .fluid_info .tr-fluid-0.is-fluid_upper td .media_line .fluid_arrow-upper { height: 587px; }
.generator .fluid_info .tr-fluid-1.is-fluid_lower td .media_line .fluid_arrow-lower { height: 32px; }
.generator .fluid_info .tr-fluid-1.is-fluid_upper td .media_line .fluid_arrow-upper { height: 550px; }
.generator .fluid_info .tr-fluid-2.is-fluid_lower td .media_line .fluid_arrow-lower { height: 32px; }
.generator .fluid_info .tr-fluid-2.is-fluid_upper td .media_line .fluid_arrow-upper { height: 550px; }
.generator .fluid_info .tr-fluid-3.is-fluid_lower td .media_line .fluid_arrow-lower { height: 106px; }
.generator .fluid_info .tr-fluid-3.is-fluid_upper td .media_line .fluid_arrow-upper { height: 476px; }
.generator .fluid_info .tr-fluid-4.is-fluid_lower td .media_line .fluid_arrow-lower { height: 143px; }
.generator .fluid_info .tr-fluid-4.is-fluid_upper td .media_line .fluid_arrow-upper { height: 439px; }
.generator .fluid_info .tr-fluid-5.is-fluid_lower td .media_line .fluid_arrow-lower { height: 180px; }
.generator .fluid_info .tr-fluid-5.is-fluid_upper td .media_line .fluid_arrow-upper { height: 402px; }
.generator .fluid_info .tr-fluid-6.is-fluid_lower td .media_line .fluid_arrow-lower { height: 217px; }
.generator .fluid_info .tr-fluid-6.is-fluid_upper td .media_line .fluid_arrow-upper { height: 365px; }
.generator .fluid_info .tr-fluid-7.is-fluid_lower td .media_line .fluid_arrow-lower { height: 254px; }
.generator .fluid_info .tr-fluid-7.is-fluid_upper td .media_line .fluid_arrow-upper { height: 328px; }
.generator .fluid_info .tr-fluid-8.is-fluid_lower td .media_line .fluid_arrow-lower { height: 291px; }
.generator .fluid_info .tr-fluid-8.is-fluid_upper td .media_line .fluid_arrow-upper { height: 291px; }
.generator .fluid_info .tr-fluid-9.is-fluid_lower td .media_line .fluid_arrow-lower { height: 328px; }
.generator .fluid_info .tr-fluid-9.is-fluid_upper td .media_line .fluid_arrow-upper { height: 254px; }
.generator .fluid_info .tr-fluid-10.is-fluid_lower td .media_line .fluid_arrow-lower { height: 365px; }
.generator .fluid_info .tr-fluid-10.is-fluid_upper td .media_line .fluid_arrow-upper { height: 217px; }
.generator .fluid_info .tr-fluid-11.is-fluid_lower td .media_line .fluid_arrow-lower { height: 402px; }
.generator .fluid_info .tr-fluid-11.is-fluid_upper td .media_line .fluid_arrow-upper { height: 180px; }
.generator .fluid_info .tr-fluid-12.is-fluid_lower td .media_line .fluid_arrow-lower { height: 439px; }
.generator .fluid_info .tr-fluid-12.is-fluid_upper td .media_line .fluid_arrow-upper { height: 143px; }
.generator .fluid_info .tr-fluid-13.is-fluid_lower td .media_line .fluid_arrow-lower { height: 476px; }
.generator .fluid_info .tr-fluid-13.is-fluid_upper td .media_line .fluid_arrow-upper { height: 106px; }
.generator .fluid_info .tr-fluid-14.is-fluid_lower td .media_line .fluid_arrow-lower { height: 513px; }
.generator .fluid_info .tr-fluid-14.is-fluid_upper td .media_line .fluid_arrow-upper { height: 69px; }
.generator .fluid_info .tr-fluid-15.is-fluid_lower td .media_line .fluid_arrow-lower { height: 550px; }
.generator .fluid_info .tr-fluid-15.is-fluid_upper td .media_line .fluid_arrow-upper { height: 32px; }
.generator .fluid_info .tr-fluid-16.is-fluid_lower td .media_line .fluid_arrow-lower { height: 587px; }
.generator .fluid_info .tr-fluid-16.is-fluid_upper td .media_line .fluid_arrow-upper { visibility: hidden; }

.generator .col.block_option { position: relative; float: right; width: 449px; border: solid #a5a5a5; border-width: 1px 1px 1px 0; }
.generator .col.block_option:before { content: ''; position: absolute; top: 38px; right: 150px; display: block; width: 1px; height: 702px; border-left: 1px dotted #ccc; z-index: 2; }
.generator .col.block_option .media_info { position: relative; }
.generator .col.block_option .media_info:before { content: ''; position: absolute; top: 38px; right: 298px; display: block; width: 1px; height: 702px; border-left: 1px dotted #ccc; z-index: 2; }
.generator .col.block_option .media_info .media_table { width: 100%; background-color: #fafafa; }
.generator .col.block_option .media_info .media_table th, .generator .col.block_option .media_info .media_table td { width: 150px; }
.generator .col.block_option .media_info .media_table th { border-bottom: 1px solid #f7f7f7; text-align: center; }
.generator .col.block_option .media_info .media_table thead th { padding: 8px 0px; font-size: 13px; background-color: #ddeef1; height: 34px; }
.generator .col.block_option .media_info .media_table thead td { height: 34px; line-height: 22px; font-size: 13px; background-color: #ebf2f3; color: #3d5052; text-align: center; }
.generator .col.block_option .media_info .media_table thead td:last-child { width: 140px; }
.generator .col.block_option .media_info .media_table tbody td { height: 37px; border-bottom: none; }
.generator .col.block_option .media_info .media_table tbody td:first-child { width: 150px; background: #fff; }
.generator .col.block_option .media_info .media_table tbody tr.tr-blank td { height: 18px; }
.generator .col.block_option .media_info .media_table tbody tr:last-child td { height: 60px; }
.generator .col.block_option .media_info .media_table tbody tr:last-child td .media_line { margin-top: -9.51px; }
.generator .col.block_option .media_info .tr-media td { position: relative; }
.generator .col.block_option .media_info .tr-media td .media_line { content: ""; position: absolute; top: 50%; display: block; margin-top: -0.51px; transition-property: width; transition-duration: 0.3s; transition-timing-function: ease-in-out; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow { display: none; position: absolute; left: 243px; border-left: 2px solid #eee; transition-property: height; transition-duration: 0.3s; transition-timing-function: ease-in-out; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow .text_box { position: absolute; left: 50%; width: 90px; margin-left: -45px; font-size: 12px; line-height: 1.0; text-align: center; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow:after { content: ""; position: absolute; left: -6px; display: block; width: 0; height: 0; border: 5px solid transparent; z-index: 3; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow:before { content: ""; position: absolute; left: -12px; display: block; width: 20px; border: 1px solid transparent; z-index: 3; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow-max_width { border-left: 2px solid #fda117; bottom: 2px; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow-max_width .text_box { top: -20px; color: #fda117; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow-max_width:after { border-bottom: 12px solid #fda117; top: -9px; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow-max_width:before { border-bottom: 1px solid #fda117; bottom: 0px; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow-min_width { border-left: 2px solid #fda117; top: 3px; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow-min_width .text_box { bottom: -20px; color: #fda117; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow-min_width:after { border-top: 12px solid #fda117; bottom: -9px; }
.generator .col.block_option .media_info .tr-media td .media_line .media_arrow-min_width:before { border-bottom: 1px solid #fda117; top: -1px; }
.generator .col.block_option .media_info .tr-media td:first-child .media_line { position: absolute; left: -169px; width: 317px; border-bottom: 1px dotted #ccc; }
.generator .col.block_option .media_info .tr-media .cell-media_screen { position: relative; width: 48%; height: 36px; }
.generator .col.block_option .media_info .tr-media .cell-media_screen .media_screen-width { position: absolute; display: none; right: 0; font-size: 11px; font-family: arial; line-height: 1; color: #aaa; }
.generator .col.block_option .media_info .tr-media .cell-media_screen .media_screen-width .unit { font-size: 10px; margin-left: 1px; }
.generator .col.block_option .media_info .tr-media .cell-media_screen .media_screen-width.valin-t { top: 2px; }
.generator .col.block_option .media_info .tr-media .cell-media_screen .media_screen-width.valin-t:after { content: '以下'; position: absolute; bottom: 0; right: -30px; display: block; }
.generator .col.block_option .media_info .tr-media .cell-media_screen .media_screen-width.valin-b { bottom: 0; }
.generator .col.block_option .media_info .tr-media .cell-media_screen .media_screen-width.valin-b:after { content: '以上'; position: absolute; bottom: 0; right: -30px; display: block; }
.generator .col.block_option .media_info .tr-media.active td:first-child .media_line { width: 618px; border-bottom: 1px dashed #358885; z-index: 2; }
.generator .col.block_option .media_info .tr-media.active .media_screen-width { display: block; color: #666; }
.generator .col.block_option .media_info .tr-media.is-min .valin-t { display: none; }
.generator .col.block_option .media_info .tr-media.is-max .valin-b { display: none; }
.generator .col.block_option .media_info .tr-media.is-threshold td .media_line .media_arrow { display: block; }
.generator .col.block_option .media_info .tr-media.is-threshold td:first-child .media_line { border-bottom: 1px solid #fda117; }
.generator .col.block_option .media_info .tr-media.is-hover td:first-child:before { display: block; content: ""; position: absolute; top: 50%; left: -169px; width: 0; height: 0; border: 14px solid transparent; border-left: 12px solid #888; margin-top: -14px; z-index: 3; }
.generator .col.block_option .media_info .tr-media.is-threshold td:first-child:before { display: block; content: ""; position: absolute; top: 50%; left: -169px; width: 0; height: 0; border: 14px solid transparent; border-left: 12px solid #fda117; margin-top: -14px; z-index: 3; }
.generator .col.block_option .media_info .tr-media.is-gray .media_line .media_arrow-max_width { border-left: 2px solid #ddd; }
.generator .col.block_option .media_info .tr-media.is-gray .media_line .media_arrow-max_width .text_box { color: #ddd; }
.generator .col.block_option .media_info .tr-media.is-gray .media_line .media_arrow-max_width:after { border-bottom: 12px solid #ddd; top: -9px; }
.generator .col.block_option .media_info .tr-media.is-gray .media_line .media_arrow-max_width:before { border-bottom: 1px solid #ddd; bottom: 0px; }
.generator .col.block_option .media_info .tr-media.is-gray .media_line .media_arrow-min_width { border-left: 2px solid #ddd; }
.generator .col.block_option .media_info .tr-media.is-gray .media_line .media_arrow-min_width .text_box { color: #ddd; }
.generator .col.block_option .media_info .tr-media.is-gray .media_line .media_arrow-min_width:after { border-top: 12px solid #ddd; bottom: -9px; }
.generator .col.block_option .media_info .tr-media.is-gray .media_line .media_arrow-min_width:before { border-bottom: 1px solid #ddd; top: -1px; }
.generator .col.block_option .media_info .tr-media.is-gray .media_screen-width { color: #ddd; }
.generator .col.block_option .media_info .tr-media.tr-media-16 td { height: 60px; }
.generator .col.block_option .media_info .tr-media.tr-media-16 td .media_line { margin-top: -9.51px; }
.generator .col.block_option .media_info .tr-media.tr-media-16 td .media_screen-width.valin-b:after { display: none; }
.generator .col.block_option .media_info .tr-media.tr-media-16 td:first-child:before { margin-top: -24px; }
.generator .col.block_option .media_info .tr-media-0.is-threshold td .media_line .media_arrow-max_width { display: none; }
.generator .col.block_option .media_info .tr-media-0.is-threshold td .media_line .media_arrow-min_width { height: 587px; }
.generator .col.block_option .media_info .tr-media-1.is-threshold td .media_line .media_arrow-max_width { height: 32px; }
.generator .col.block_option .media_info .tr-media-1.is-threshold td .media_line .media_arrow-min_width { height: 550px; }
.generator .col.block_option .media_info .tr-media-2.is-threshold td .media_line .media_arrow-max_width { height: 69px; }
.generator .col.block_option .media_info .tr-media-2.is-threshold td .media_line .media_arrow-min_width { height: 513px; }
.generator .col.block_option .media_info .tr-media-3.is-threshold td .media_line .media_arrow-max_width { height: 106px; }
.generator .col.block_option .media_info .tr-media-3.is-threshold td .media_line .media_arrow-min_width { height: 476px; }
.generator .col.block_option .media_info .tr-media-4.is-threshold td .media_line .media_arrow-max_width { height: 143px; }
.generator .col.block_option .media_info .tr-media-4.is-threshold td .media_line .media_arrow-min_width { height: 439px; }
.generator .col.block_option .media_info .tr-media-5.is-threshold td .media_line .media_arrow-max_width { height: 180px; }
.generator .col.block_option .media_info .tr-media-5.is-threshold td .media_line .media_arrow-min_width { height: 402px; }
.generator .col.block_option .media_info .tr-media-6.is-threshold td .media_line .media_arrow-max_width { height: 217px; }
.generator .col.block_option .media_info .tr-media-6.is-threshold td .media_line .media_arrow-min_width { height: 365px; }
.generator .col.block_option .media_info .tr-media-7.is-threshold td .media_line .media_arrow-max_width { height: 254px; }
.generator .col.block_option .media_info .tr-media-7.is-threshold td .media_line .media_arrow-min_width { height: 328px; }
.generator .col.block_option .media_info .tr-media-8.is-threshold td .media_line .media_arrow-max_width { height: 291px; }
.generator .col.block_option .media_info .tr-media-8.is-threshold td .media_line .media_arrow-min_width { height: 291px; }
.generator .col.block_option .media_info .tr-media-9.is-threshold td .media_line .media_arrow-max_width { height: 328px; }
.generator .col.block_option .media_info .tr-media-9.is-threshold td .media_line .media_arrow-min_width { height: 254px; }
.generator .col.block_option .media_info .tr-media-10.is-threshold td .media_line .media_arrow-max_width { height: 365px; }
.generator .col.block_option .media_info .tr-media-10.is-threshold td .media_line .media_arrow-min_width { height: 217px; }
.generator .col.block_option .media_info .tr-media-11.is-threshold td .media_line .media_arrow-max_width { height: 402px; }
.generator .col.block_option .media_info .tr-media-11.is-threshold td .media_line .media_arrow-min_width { height: 180px; }
.generator .col.block_option .media_info .tr-media-12.is-threshold td .media_line .media_arrow-max_width { height: 439px; }
.generator .col.block_option .media_info .tr-media-12.is-threshold td .media_line .media_arrow-min_width { height: 143px; }
.generator .col.block_option .media_info .tr-media-13.is-threshold td .media_line .media_arrow-max_width { height: 476px; }
.generator .col.block_option .media_info .tr-media-13.is-threshold td .media_line .media_arrow-min_width { height: 106px; }
.generator .col.block_option .media_info .tr-media-14.is-threshold td .media_line .media_arrow-max_width { height: 513px; }
.generator .col.block_option .media_info .tr-media-14.is-threshold td .media_line .media_arrow-min_width { height: 69px; }
.generator .col.block_option .media_info .tr-media-15.is-threshold td .media_line .media_arrow-max_width { height: 550px; }
.generator .col.block_option .media_info .tr-media-15.is-threshold td .media_line .media_arrow-min_width { height: 32px; }
.generator .col.block_option .media_info .tr-media-16.is-threshold td .media_line .media_arrow-max_width { height: 587px; }
.generator .col.block_option .media_info .tr-media-16.is-threshold td .media_line .media_arrow-min_width { opacity: 0; }
.generator .col.block_option .screen_info { position: absolute; top: 0; right: 0; width: 300px; }
.generator .col.block_option .screen_info .sc_table { position: absolute; top: 110px; right: 0; width: 100%; background: none; font-family: arial, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif; }
.generator .col.block_option .screen_info .sc_table td { height: 37px; padding: 2px 8px 2px 19px; box-sizing: border-box; border-right: none; border-left: none; }
.generator .col.block_option .screen_info .sc_table td .range { color: #666; font-size: 10px; }
.generator .col.block_option .screen_info .sc_table td .range .range-min, .generator .col.block_option .screen_info .sc_table td .range .range-max { font-size: 11px; }
.generator .col.block_option .screen_info .sc_table td:last-child { width: 140px; height: 14px; padding-left: 13px; font-size: 12px; text-align: left; }
.generator .col.block_option .screen_info .sc_table tr:first-child td:last-child { vertical-align: bottom; }
.generator .col.block_option .screen_info .sc_table tr:last-child td:last-child { vertical-align: top; }

.quick_check-input { text-align: center; border-top: 6px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; background-color: #f7f7f7; }
.quick_check-input .site_width { position: relative; }
.quick_check-input .heading { text-align: center; width: 260px; position: absolute; top: -30px; left: 50%; margin-left: -130px; line-height: 31px; height: 30px; background-color: #e3e3e3; border-radius: 4px 4px 0 0; }
.quick_check-input .heading .title { font-size: 16px; display: inline-block; color: #333; }
.quick_check-input .form_input_area { padding: 22px 0; }
.quick_check-input .input { font-size: 19px; background-color: #fff; text-align: right; padding: 2px 18px 2px 8px; border: 2px solid #72bcc5; box-sizing: border-box; color: #333; border-radius: 6px; height: 42px; width: 90px; }
.quick_check-input .input:hover { background-color: #f7f7f7; }
.quick_check-input .input.input-width { width: 120px; }

.grid_preview { padding-top: 120px; }
.grid_preview:after { content: ""; clear: both; display: block; }

.grid_preview-header:after { content: ""; clear: both; display: block; }

.grid_preview-body:after { content: ""; clear: both; display: block; }

.grid_preview-footer { padding-top: 50px; }
.grid_preview-footer:after { content: ""; clear: both; display: block; }

.grid_preview .headline-center { margin-bottom: 30px; }
.grid_preview .action_btn { padding: 2px 20px; border: 1px solid #7cb0b7; border-radius: 6px; background-color: #72bcc5; color: #fff; font-size: 16px; line-height: 1.2; }
.grid_preview .action_btn.is-disabled { cursor: default; background: #cdcdcd; border: 1px solid #cdcdcd; }
.grid_preview .action_btn:hover { opacity: 0.8; }
.grid_preview .action_btn.action_btn-bottom { padding: 6px 30px; }

.preview_info { padding-bottom: 10px; width: 86%; margin: 0 auto; border-bottom: solid 1px #ddd; }
.preview_info:after { content: ""; clear: both; display: block; }
.preview_info .preview_info-data { float: left; }
.preview_info .preview_info-data .column_data { display: inline-block; }
.preview_info .preview_info-data .integer_check { font-size: 14px; }
.preview_info .preview_info-data .integer_check .not_integer, .preview_info .preview_info-data .integer_check .error_integer, .preview_info .preview_info-data .integer_check .error_integer-not_number, .preview_info .preview_info-data .integer_check .error_column { display: none; }
.preview_info .preview_info-data .integer_check .integer .mark { color: #4caf50; }
.preview_info .preview_info-data .integer_check .not_integer .mark { color: #ffc107; }
.preview_info .preview_info-data .integer_check .error_integer .mark, .preview_info .preview_info-data .integer_check .error_integer-not_number .mark, .preview_info .preview_info-data .integer_check .error_column .mark { color: #d32f2f; }
.preview_info .preview_info-action { float: right; padding-top: 22px; }

.grid_preview-demo { padding: 20px 0 40px 0; /*カラム可視化用*/ }
.grid_preview-demo .mod { position: relative; background-color: rgba(240, 200, 200, 0.5); min-height: 52px; }
.grid_preview-demo .mod span { position: absolute; top: 6px; left: 8px; white-space: nowrap; line-height: 1; font-size: 15px; font-family: 'Montserrat', sans-serif; font-weight: 300; }
.grid_preview-demo .mod:after { content: ''; display: block; clear: both; }
.grid_preview-demo .mod + .column_width { position: absolute; top: 22px; font-size: 12px; margin-left: 8px; font-family: 'Montserrat', sans-serif; font-weight: 500; }
.grid_preview-demo .row { font-size: 14px; background-color: #f5f5f5; margin-top: 20px; }
.grid_preview-demo [class^=col-] { position: relative; min-height: 52px; box-shadow: inset 1px 0 0 0 #ddd; }
.grid_preview-demo [class^=col-]:last-child { box-shadow: inset 1px 0 0 0 #ddd; }

.grid_preview-demo-action { margin: 0 auto; width: 86%; border-top: solid 1px #ddd; padding-top: 40px; text-align: center; }

.photoshop-grid_layout_setting { border-radius: 6px; border: solid 1px transparent; }
.photoshop-grid_layout_setting:hover { background-color: #f7f7f7; }
.photoshop-grid_layout_setting.is-active { background-color: #f7f7f7; border: solid 1px #ccc; }

.photoshop-grid_layout_setting-body { display: none; border-top: solid 1px #ddd; padding: 50px 0px 70px 0px; }

.photoshop-grid_layout_setting .heading a { display: block; color: #000; font-size: 16px; text-align: center; padding: 20px; }
.photoshop-grid_layout_setting .description { text-align: center; }
.photoshop-grid_layout_setting .title { margin-top: 60px; text-align: center; font-size: 20px; }
.photoshop-grid_layout_setting .list { padding: 0; margin: 0; width: 500px; margin: 0 auto; margin-top: 40px; padding-left: 20px; }
.photoshop-grid_layout_setting .table { width: 400px; margin: 0 auto; margin-top: 60px; background-color: #fff; }
.photoshop-grid_layout_setting .table caption { padding-bottom: 20px; font-size: 18px; }
.photoshop-grid_layout_setting .table th, .photoshop-grid_layout_setting .table td { border: solid 1px #aaa; text-align: left; padding: 4px 20px; }
.photoshop-grid_layout_setting .table th { font-weight: normal; }
.photoshop-grid_layout_setting .table thead th { background-color: #ddd; }
.photoshop-grid_layout_setting .table tbody th { width: 30%; }
.photoshop-grid_layout_setting .description-bottom { margin: 0 auto; margin-top: 50px; width: 600px; font-size: 15px; }

.overview { padding-top: 140px; margin-top: 70px; border-top: solid 1px #ccc; }

.overview-body { margin-top: 90px; }

.overview .headline-center { margin-bottom: 50px; }
.overview .heading .title { font-size: 20px; color: #333; }
.overview .nav_list { padding-top: 30px; }
.overview .nav_list .list { margin: 0; padding: 0; text-align: center; }
.overview .nav_list .list li { margin: 0; display: inline-block; }
.overview .nav_list .list li a { color: #418088; font-size: 18px; display: block; padding: 4px 20px; }
.overview .nav_list .list li a:hover { opacity: 0.7; }
.overview .nav_list .list li + li { padding: 0 10px; border-left: 1px solid #ddd; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); transform: skew(-20deg); }
.overview .nav_list .list li + li a { -webkit-transform: skew(20deg); -moz-transform: skew(20deg); transform: skew(20deg); }
.overview .section .section-header { padding: 16px 30px; background-color: #e3e3e3; border-radius: 10px 10px 0 0; }
.overview .section .section-body { border: solid 1px #e3e3e3; margin-top: -2px; padding: 30px 20px 10px 30px; border-radius: 0 0 10px 10px; min-height: 290px; }
.overview .list { margin: 0; padding: 0; list-style: none; }
.overview .list li { line-height: 1.2; }
.overview .list li + li { margin-top: 24px; }
.overview .btn_area { text-align: center; margin-top: 56px; }
.overview .btn_area .link_btn { line-height: 1.2; padding: 10px 40px; }
.overview .enabled_browser { margin-top: 90px; border: solid 1px #e3e3e3; padding: 50px 30px; border-radius: 10px; }
.overview .enabled_browser .heading { font-size: 24px; text-align: center; color: #72bcc5; margin-bottom: 20px; }
.overview .enabled_browser .browser { text-align: center; font-size: 18px; font-family: 'Montserrat', sans-serif; font-weight: 500; }
.overview .enabled_browser .description { text-align: center; margin-top: 40px; font-size: 15px; color: #777; line-height: 1.3; }
.overview .enabled_browser .description p + p { margin-top: 10px; }

.video { padding-top: 140px; margin-top: 70px; border-top: solid 1px #ccc; }

.video-body { margin-top: 90px; }

.video .headline-center { margin-bottom: 50px; }
.video .heading .title { font-size: 20px; color: #333; }

.video-body { margin-top: 90px; text-align: center; }

.setting_sample { padding-top: 130px; margin-top: 70px; border-top: solid 1px #ccc; }

.setting_sample-body { margin-top: 40px; }

.setting_sample-footer { margin-top: 30px; }

.setting_sample .headline-center { margin-bottom: 44px; }
.setting_sample .heading .title { font-size: 20px; color: #333; }
.setting_sample .table { width: 960px; margin: 0 auto; display: block; }
.setting_sample .table th, .setting_sample .table td { border: solid 1px #ccc; text-align: center; width: 48px; line-height: 1; font-size: 16px; }
.setting_sample .table .title { font-size: 14px; }
.setting_sample .table thead { display: block; }
.setting_sample .table thead th { padding: 6px 0px; background-color: #d3e7e8; font-family: 'Montserrat', sans-serif; font-weight: 400; }
.setting_sample .table tbody { position: relative; margin-top: -1px; display: block; height: 380px; overflow: auto; border-bottom: solid 1px #ccc; }
.setting_sample .table tbody th, .setting_sample .table tbody td { padding: 2px 0; }
.setting_sample .table tbody th { background-color: #f3fafb; text-align: right; padding-right: 20px; font-weight: normal; font-size: 14px; }
.setting_sample .table tbody td { color: #72bcc5; cursor: default; }
.setting_sample .table tbody td a { display: inline-block; padding: 4px 0px; width: 90%; margin: 0 auto; border-radius: 4px; cursor: pointer; }
.setting_sample .table tbody td a:hover { background-color: #e1e1e1; }
.setting_sample .table tbody td a.is-active { background-color: #72bcc5; color: #ddd; }
.setting_sample .table tbody tr:hover th { background-color: #f3f3f3; }
.setting_sample .table tbody tr:hover td { background-color: #f6f6f6; }
.setting_sample .table .col1 { width: 192px; }
.setting_sample .description { padding: 20px 30px; border-radius: 10px; text-align: center; }
.setting_sample .description p { font-size: 15px; line-height: 2.0; color: #555; }

/*
[option]box
==========================================================================*/
.box:after { content: ""; clear: both; display: block; }

.inner:after { content: ""; clear: both; display: block; }

.wrap:after { content: ""; clear: both; display: block; }

.wraper:after { content: ""; clear: both; display: block; }

/*
[option]property
==========================================================================*/
/*
text-align
--------------------------------------------------
*/
.al-c { text-align: center; }

.al-l { text-align: left; }

.al-r { text-align: right; }

/*
vertical-align
--------------------------------------------------
*/
.al-t { vertical-align: top; }

.al-m { text-align: middle; }

.al-b { text-align: bottom; }

/*
float
--------------------------------------------------
*/
.fl-l { float: left; }

.fl-r { float: right; }

/*
clear
--------------------------------------------------
*/
.cl-l { clear: left; }

.cl-r { clear: right; }

.cl-b { clear: both; }

/*
margin
--------------------------------------------------
*/
.m-0 { margin: 0; }

.m-xxs { margin: 0.5em; }

.m-xs { margin: 1em; }

.m-sm { margin: 1.5em; }

.m-ms { margin: 2em; }

.m-md { margin: 3em; }

.m-ml { margin: 4em; }

.m-lg { margin: 6em; }

.m-xl { margin: 8em; }

.m-xxl { margin: 10em; }

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

.mt-xxs { margin-top: 0.5em; }

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

.mt-sm { margin-top: 1.5em; }

.mt-ms { margin-top: 2em; }

.mt-md { margin-top: 3em; }

.mt-ml { margin-top: 4em; }

.mt-lg { margin-top: 6em; }

.mt-xl { margin-top: 8em; }

.mt-xxl { margin-top: 10em; }

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

.mr-xxs { margin-right: 0.5em; }

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

.mr-sm { margin-right: 1.5em; }

.mr-ms { margin-right: 2em; }

.mr-md { margin-right: 3em; }

.mr-ml { margin-right: 4em; }

.mr-lg { margin-right: 6em; }

.mr-xl { margin-right: 8em; }

.mr-xxl { margin-right: 10em; }

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

.mb-xxs { margin-bottom: 0.5em; }

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

.mb-sm { margin-bottom: 1.5em; }

.mb-ms { margin-bottom: 2em; }

.mb-md { margin-bottom: 3em; }

.mb-ml { margin-bottom: 4em; }

.mb-lg { margin-bottom: 6em; }

.mb-xl { margin-bottom: 8em; }

.mb-xxl { margin-bottom: 10em; }

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

.ml-xxs { margin-left: 0.5em; }

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

.ml-sm { margin-left: 1.5em; }

.ml-ms { margin-left: 2em; }

.ml-md { margin-left: 3em; }

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

.ml-lg { margin-left: 6em; }

.ml-xl { margin-left: 8em; }

.ml-xxl { margin-left: 10em; }

/*
padding
--------------------------------------------------
*/
.p-0 { padding: 0; }

.p-xxs { padding: 0.5em; }

.p-xs { padding: 1em; }

.p-sm { padding: 1.5em; }

.p-ms { padding: 2em; }

.p-md { padding: 3em; }

.p-ml { padding: 4em; }

.p-lg { padding: 6em; }

.p-xl { padding: 8em; }

.p-xxl { padding: 10em; }

/*
padding-top
--------------------------------------------------
*/
.pt-0 { padding-top: 0; }

.pt-xxs { padding-top: 0.5em; }

.pt-xs { padding-top: 1em; }

.pt-sm { padding-top: 1.5em; }

.pt-ms { padding-top: 2em; }

.pt-md { padding-top: 3em; }

.pt-ml { padding-top: 4em; }

.pt-lg { padding-top: 6em; }

.pt-xl { padding-top: 8em; }

.pt-xxl { padding-top: 10em; }

/*
padding-right
--------------------------------------------------
*/
.pr-0 { padding-right: 0; }

.pr-xxs { padding-right: 0.5em; }

.pr-xs { padding-right: 1em; }

.pr-sm { padding-right: 1.5em; }

.pr-ms { padding-right: 2em; }

.pr-md { padding-right: 3em; }

.pr-ml { padding-right: 4em; }

.pr-lg { padding-right: 6em; }

.pr-xl { padding-right: 8em; }

.pr-xxl { padding-right: 10em; }

/*
padding-bottom
--------------------------------------------------
*/
.pb-0 { padding-bottom: 0; }

.pb-xxs { padding-bottom: 0.5em; }

.pb-xs { padding-bottom: 1em; }

.pb-sm { padding-bottom: 1.5em; }

.pb-ms { padding-bottom: 2em; }

.pb-md { padding-bottom: 3em; }

.pb-ml { padding-bottom: 4em; }

.pb-lg { padding-bottom: 6em; }

.pb-xl { padding-bottom: 8em; }

.pb-xxl { padding-bottom: 10em; }

/*
padding-left
--------------------------------------------------
*/
.pl-0 { padding-left: 0; }

.pl-xxs { padding-left: 0.5em; }

.pl-xs { padding-left: 1em; }

.pl-sm { padding-left: 1.5em; }

.pl-ms { padding-left: 2em; }

.pl-md { padding-left: 3em; }

.pl-ml { padding-left: 4em; }

.pl-lg { padding-left: 6em; }

.pl-xl { padding-left: 8em; }

.pl-xxl { padding-left: 10em; }

/*
position
--------------------------------------------------
*/
.absolute { position: absolute; }

.relative { position: relative; }

.fixed { position: fixed; }

.left { left: 0; }

.right { right: 0; }

.top { top: 0; }

.bottom { bottom: 0; }

.center { text-align: center; margin: 0 auto; }

/*
width
--------------------------------------------------
*/
.w1 { width: 1px; }

.w2 { width: 2px; }

.w3 { width: 3px; }

.w4 { width: 4px; }

.w5 { width: 5px; }

.w6 { width: 6px; }

.w7 { width: 7px; }

.w8 { width: 8px; }

.w9 { width: 9px; }

.w10 { width: 10px; }

.w11 { width: 11px; }

.w12 { width: 12px; }

.w13 { width: 13px; }

.w14 { width: 14px; }

.w15 { width: 15px; }

.w16 { width: 16px; }

.w17 { width: 17px; }

.w18 { width: 18px; }

.w19 { width: 19px; }

.w20 { width: 20px; }

.w21 { width: 21px; }

.w22 { width: 22px; }

.w23 { width: 23px; }

.w24 { width: 24px; }

.w25 { width: 25px; }

.w26 { width: 26px; }

.w27 { width: 27px; }

.w28 { width: 28px; }

.w29 { width: 29px; }

.w30 { width: 30px; }

.w31 { width: 31px; }

.w32 { width: 32px; }

.w33 { width: 33px; }

.w34 { width: 34px; }

.w35 { width: 35px; }

.w36 { width: 36px; }

.w37 { width: 37px; }

.w38 { width: 38px; }

.w39 { width: 39px; }

.w40 { width: 40px; }

.w41 { width: 41px; }

.w42 { width: 42px; }

.w43 { width: 43px; }

.w44 { width: 44px; }

.w45 { width: 45px; }

.w46 { width: 46px; }

.w47 { width: 47px; }

.w48 { width: 48px; }

.w49 { width: 49px; }

.w50 { width: 50px; }

.w51 { width: 51px; }

.w52 { width: 52px; }

.w53 { width: 53px; }

.w54 { width: 54px; }

.w55 { width: 55px; }

.w56 { width: 56px; }

.w57 { width: 57px; }

.w58 { width: 58px; }

.w59 { width: 59px; }

.w60 { width: 60px; }

.w61 { width: 61px; }

.w62 { width: 62px; }

.w63 { width: 63px; }

.w64 { width: 64px; }

.w65 { width: 65px; }

.w66 { width: 66px; }

.w67 { width: 67px; }

.w68 { width: 68px; }

.w69 { width: 69px; }

.w70 { width: 70px; }

.w71 { width: 71px; }

.w72 { width: 72px; }

.w73 { width: 73px; }

.w74 { width: 74px; }

.w75 { width: 75px; }

.w76 { width: 76px; }

.w77 { width: 77px; }

.w78 { width: 78px; }

.w79 { width: 79px; }

.w80 { width: 80px; }

.w81 { width: 81px; }

.w82 { width: 82px; }

.w83 { width: 83px; }

.w84 { width: 84px; }

.w85 { width: 85px; }

.w86 { width: 86px; }

.w87 { width: 87px; }

.w88 { width: 88px; }

.w89 { width: 89px; }

.w90 { width: 90px; }

.w91 { width: 91px; }

.w92 { width: 92px; }

.w93 { width: 93px; }

.w94 { width: 94px; }

.w95 { width: 95px; }

.w96 { width: 96px; }

.w97 { width: 97px; }

.w98 { width: 98px; }

.w99 { width: 99px; }

.w100 { width: 100px; }

.w120 { width: 120px; }

.w140 { width: 140px; }

.w160 { width: 160px; }

.w180 { width: 180px; }

.w200 { width: 200px; }

.w220 { width: 220px; }

.w240 { width: 240px; }

.w260 { width: 260px; }

.w280 { width: 280px; }

.w300 { width: 300px; }

.w320 { width: 320px; }

.w340 { width: 340px; }

.w360 { width: 360px; }

.w380 { width: 380px; }

.w400 { width: 400px; }

.w420 { width: 420px; }

.w440 { width: 440px; }

.w460 { width: 460px; }

.w480 { width: 480px; }

.w500 { width: 500px; }

.w520 { width: 520px; }

.w540 { width: 540px; }

.w560 { width: 560px; }

.w580 { width: 580px; }

.w5p { width: 5%; }

.w6p { width: 6%; }

.w7p { width: 7%; }

.w8p { width: 8%; }

.w9p { width: 9%; }

.w10p { width: 10%; }

.w11p { width: 11%; }

.w12p { width: 12%; }

.w13p { width: 13%; }

.w14p { width: 14%; }

.w15p { width: 15%; }

.w16p { width: 16%; }

.w17p { width: 17%; }

.w18p { width: 18%; }

.w19p { width: 19%; }

.w20p { width: 20%; }

.w21p { width: 21%; }

.w22p { width: 22%; }

.w23p { width: 23%; }

.w24p { width: 24%; }

.w25p { width: 25%; }

.w26p { width: 26%; }

.w27p { width: 27%; }

.w28p { width: 28%; }

.w29p { width: 29%; }

.w30p { width: 30%; }

.w31p { width: 31%; }

.w32p { width: 32%; }

.w33p { width: 33%; }

.w34p { width: 34%; }

.w35p { width: 35%; }

.w36p { width: 36%; }

.w37p { width: 37%; }

.w38p { width: 38%; }

.w39p { width: 39%; }

.w40p { width: 40%; }

.w41p { width: 41%; }

.w42p { width: 42%; }

.w43p { width: 43%; }

.w44p { width: 44%; }

.w45p { width: 45%; }

.w46p { width: 46%; }

.w47p { width: 47%; }

.w48p { width: 48%; }

.w49p { width: 49%; }

.w50p { width: 50%; }

.w51p { width: 51%; }

.w52p { width: 52%; }

.w53p { width: 53%; }

.w54p { width: 54%; }

.w55p { width: 55%; }

.w56p { width: 56%; }

.w57p { width: 57%; }

.w58p { width: 58%; }

.w59p { width: 59%; }

.w60p { width: 60%; }

.w61p { width: 61%; }

.w62p { width: 62%; }

.w63p { width: 63%; }

.w64p { width: 64%; }

.w65p { width: 65%; }

.w66p { width: 66%; }

.w67p { width: 67%; }

.w68p { width: 68%; }

.w69p { width: 69%; }

.w70p { width: 70%; }

.w71p { width: 71%; }

.w72p { width: 72%; }

.w73p { width: 73%; }

.w74p { width: 74%; }

.w75p { width: 75%; }

.w76p { width: 76%; }

.w77p { width: 77%; }

.w78p { width: 78%; }

.w79p { width: 79%; }

.w80p { width: 80%; }

.w81p { width: 81%; }

.w82p { width: 82%; }

.w83p { width: 83%; }

.w84p { width: 84%; }

.w85p { width: 85%; }

.w86p { width: 86%; }

.w87p { width: 87%; }

.w88p { width: 88%; }

.w89p { width: 89%; }

.w90p { width: 90%; }

.w91p { width: 91%; }

.w92p { width: 92%; }

.w93p { width: 93%; }

.w94p { width: 94%; }

.w95p { width: 95%; }

.w96p { width: 96%; }

.w97p { width: 97%; }

.w98p { width: 98%; }

.w99p { width: 99%; }

.w100p { width: 100%; }

/*
display
--------------------------------------------------
*/
.inline { display: inline; }

.inline_block { display: inline-block; }

.block { display: block; }

/*
clearfix
--------------------------------------------------
*/
.clearfix:after:after { content: ""; clear: both; display: block; }

/*
[option]state
==========================================================================*/
.is-sidebar-fixed { position: fixed !important; top: 0px; z-index: 999; }

.is-sidebar-absolute { position: absolute !important; bottom: 0px; z-index: 999; }

.is-sidebar-over_window { overflow-x: hidden; overflow-y: scroll; }

.is-topbar-fixed { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; }

/* 
[option]state
==========================================================================
*/
.is-hide { visibility: hidden; display: none; }

@media screen and (min-width: 961px) { .is-pc_show { display: block; }
  .is-pc_hide { display: none; } }
@media screen and (max-width: 960px) { .is-mb_show { display: block; }
  .is-mb_hide { display: none; } }
@media screen and (min-width: 481px) and (max-width: 960px) { .is-tb_show { display: block; }
  .is-tb_hide { display: none; } }
@media screen and (max-width: 480px) { .is-sp_show { display: block; }
  .is-sp_hide { display: none; } }
@media screen and (max-width: 360px) { .is-sps_show { display: block; }
  .is-sps_hide { display: none; } }
/* 
pages
==========================================================================*/
.dir-generator .gnav-main .nav-generator a { background-color: #fafafa; color: #2198a7; }
.dir-generator .footer_sitemap-list .nav-generator a { background-color: #ebecec; color: #777; }

.dir-sample .gnav-main .nav-sample a { background-color: #fafafa; color: #2198a7; }
.dir-sample .footer_sitemap-list .nav-sample a { background-color: #ebecec; color: #777; }

.dir-css .gnav-main .nav-css a { background-color: #fafafa; color: #2198a7; }
.dir-css .footer_sitemap-list .nav-css a { background-color: #ebecec; color: #777; }

.dir-html .gnav-main .nav-html a { background-color: #fafafa; color: #2198a7; }
.dir-html .footer_sitemap-list .nav-html a { background-color: #ebecec; color: #777; }

.dir-setting .gnav-main .nav-setting a { background-color: #fafafa; color: #2198a7; }
.dir-setting .footer_sitemap-list .nav-setting a { background-color: #ebecec; color: #777; }

.dir-guide .gnav-main .nav-guide a { background-color: #fafafa; color: #2198a7; }
.dir-guide .footer_sitemap-list .nav-guide a { background-color: #ebecec; color: #777; }

.dir-about .gnav-main .nav-about a { background-color: #fafafa; color: #2198a7; }
.dir-about .footer_sitemap-list .nav-about a { background-color: #ebecec; color: #777; }