/*-------------------------------------------------------------------------------------------*/
/* sanitize.css v3.2.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css */
/*-------------------------------------------------------------------------------------------*/
audio:not([controls]) {display: none; /* Chrome 44-, iOS 8+, Safari 9+ */}
button {-webkit-appearance: button; /* iOS 8+ */ overflow: visible; /* Internet Explorer 11- */}
details {display: block; /* Edge 12+, Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */}
html {-ms-overflow-style: -ms-autohiding-scrollbar; /* Edge 12+, Internet Explorer 11- */ overflow-y: scroll; /* All browsers without overlaying scrollbars */ -webkit-text-size-adjust: 100%; /* iOS 8+ */}
input {-webkit-border-radius: 0 /* iOS 8+ */}
input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button;/* iOS 8+ */}
input[type="number"] {width: auto;/* Firefox 36+ */}
input[type="search"] {-webkit-appearance: textfield;/* Chrome 45+, Safari 9+ */}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;/* Chrome 45+, Safari 9+ */}
main {display: block; /* Android 4.3-, Internet Explorer 11-, Windows Phone 8.1+ */}
pre {overflow: auto; /* Internet Explorer 11- */}
progress {display: inline-block; /* Internet Explorer 11-, Windows Phone 8.1+ */}
small {font-size: 75%; /* All browsers */}
summary {display: block; /* Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */}
svg:not(:root) {overflow: hidden; /* Internet Explorer 11- */}
template {display: none; /* Android 4.3-, Internet Explorer 11-, iOS 7-, Safari 7-, Windows Phone 8.1+ */}
textarea {overflow: auto; /* Edge 12+, Internet Explorer 11- */}
[hidden] {display: none; /* Internet Explorer 10- */}
*, :before, :after {box-sizing: inherit;}
* {font-size: inherit; line-height: inherit;}
:before, :after {text-decoration: inherit; vertical-align: inherit;}
*, :before, :after {border-style: solid; border-width: 0;}
* {background-repeat: no-repeat; margin: 0; padding: 0;}
:root {background-color: #ffffff; box-sizing: border-box; color: #000000; cursor: default; font: 100%/1.5 sans-serif;}
a {text-decoration: none;}
audio, canvas, iframe, img, svg, video {vertical-align: middle;}
button, input, select, textarea {background-color: transparent;}
button, input, select, textarea {color: inherit; font-family: inherit; font-style: inherit; font-weight: inherit;}
button, [type="button"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="reset"], [type="search"], [type="submit"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], select, textarea {min-height: 1.5em;}
code, kbd, pre, samp {font-family: monospace, monospace;}
nav ol, nav ul {list-style: none;}
select {-moz-appearance: none;    /* Firefox 40+ */ -webkit-appearance: none /* Chrome 45+ */}
select::-ms-expand {display: none;/* Edge 12+, Internet Explorer 11- */}
select::-ms-value {color: currentColor;/* Edge 12+, Internet Explorer 11- */}
table {border-collapse: collapse; border-spacing: 0;}
textarea {resize: vertical;}
::-moz-selection {background-color: #b3d4fc; /* required when declaring ::selection */ color: #ffffff; text-shadow: none;}
::selection {background-color: #b3d4fc; /* required when declaring ::selection */ color: #ffffff; text-shadow: none;}
[aria-busy="true"] {cursor: progress;}
[aria-controls] {cursor: pointer;}
[aria-disabled] {cursor: default;}
[hidden][aria-hidden="false"] {clip: rect(0 0 0 0); display: inherit; position: absolute}
[hidden][aria-hidden="false"]:focus {clip: auto;}
a, area, button, input, label, select, textarea, [tabindex] {-ms-touch-action: manipulation; touch-action: manipulation;}
/*# sourceMappingURL=sanitize.css.map */

/*-------------------------------------------------------------------------------------------*/
/* 24 COLUMN | RESPONSIVE GRID SYSTEM | http://responsive.gs */
/*-------------------------------------------------------------------------------------------*/
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(../js/vendors/boxsizing.htc);}
.container {margin: 0 auto; padding: 0 16px; max-width: 1248px;}
.container:after, .row:after, .col:after, .clr:after, .group:after {content: ""; display: table; clear: both;}
.row {padding-bottom: 0; }
.col {display: block; float: left; width: 100%;}
@media ( min-width : 801px ) {
  .gutters > .col {margin-left: 4%;}
  .gutters > .col:first-child {margin-left: 0;}
}
@media ( min-width : 801px ) {
  .span-1 { width: 4.16666666667%; }
  .span-2 { width: 8.33333333333%; }
  .span-3 { width:12.5%; }
  .span-4 { width: 16.6666666667%; }
  .span-5 { width: 20.8333333333%; }
  .span-6 { width: 25%; }
  .span-7 { width: 29.1666666667%; }
  .span-8 { width: 33.3333333333%; }
  .span-9 { width: 37.5%; }
  .span-10 { width: 41.6666666667%; }
  .span-11 { width: 45.8333333333%; }
  .span-12 { width: 50%; }
  .span-13 { width: 54.1666666667%; }
  .span-14 { width: 58.3333333333%; }
  .span-15 { width: 62.5%; }
  .span-16 { width: 66.6666666667%; }
  .span-17 { width: 70.8333333333%; }
  .span-18 { width: 75%; }
  .span-19 { width: 79.1666666667%; }
  .span-20 { width: 83.3333333333%; }
  .span-21 { width: 87.5%; }
  .span-22 { width: 91.6666666667%; }
  .span-23 { width: 95.8333333333%; }
  .span-24 { width: 100%; }

  .gutters > .span-1 { width: 0.33%; }
  .gutters > .span-2 { width: 4.66%; }
  .gutters > .span-3 { width: 9.0%; }
  .gutters > .span-4 { width: 13.33%; }
  .gutters > .span-5 { width: 17.66%; }
  .gutters > .span-6 { width: 22.0%; }
  .gutters > .span-7 { width: 26.33%; }
  .gutters > .span-8 { width: 30.66%; }
  .gutters > .span-9 { width: 35.0%; }
  .gutters > .span-10 { width: 39.33%; }
  .gutters > .span-11 { width: 43.67%; }
  .gutters > .span-12 { width: 48.0%; }
  .gutters > .span-13 { width: 52.33%; }
  .gutters > .span-14 { width: 56.67%; }
  .gutters > .span-15 { width: 61%; }
  .gutters > .span-16 { width: 65.34%; }
  .gutters > .span-17 { width: 69.67%; }
  .gutters > .span-18 { width: 74%; }
  .gutters > .span-19 { width: 78.34%; }
  .gutters > .span-20 { width: 82.67%; }
  .gutters > .span-21 { width: 87%; }
  .gutters > .span-22 { width: 91.34%; }
  .gutters > .span-23 { width: 95.67%; }
  .gutters > .span-24 { width: 100%; }

  .offset-1 { margin-left: 4.1666666667% !important;}
  .offset-2 { margin-left: 8.3333333333% !important;}
  .offset-3 { margin-left: 12.5% !important;}
  .offset-4 { margin-left: 16.6666666667% !important;}
  .offset-5 { margin-left: 20.8333333333% !important;}
  .offset-6 { margin-left: 25% !important;}
  .offset-7 { margin-left: 29.1666666667% !important;}
  .offset-8 { margin-left: 33.3333333333% !important;}
  .offset-9 { margin-left: 37.5% !important;}
  .offset-10 { margin-left: 41.6666666667% !important;}
  .offset-11 { margin-left: 45.8333333333% !important;}
  .offset-12 { margin-left: 50% !important;}
  .offset-13 { width: 54.1666666667% !important; }
  .offset-14 { width: 58.3333333333% !important; }
  .offset-15 { width: 62.5% !important; }
  .offset-16 { width: 66.6666666667% !important; }
  .offset-17 { width: 70.8333333333% !important; }
  .offset-18 { width: 75% !important; }
  .offset-19 { width: 79.1666666667% !important; }
  .offset-20 { width: 83.3333333333% !important; }
  .offset-21 { width: 87.5% !important; }
  .offset-22 { width: 91.6666666667% !important; }
  .offset-23 { width: 95.8333333333% !important; }

  .gutters > .offset-1 { margin-left: 4.33% !important;}
  .gutters > .offset-2 { margin-left: 8.66% !important;}
  .gutters > .offset-3 { margin-left: 13% !important;}
  .gutters > .offset-4 { margin-left: 17.33% !important;}
  .gutters > .offset-5 { margin-left: 21.66% !important;}
  .gutters > .offset-6 { margin-left: 26% !important;}
  .gutters > .offset-7 { margin-left: 30.33% !important;}
  .gutters > .offset-8 { margin-left: 34.66% !important;}
  .gutters > .offset-9 { margin-left: 39% !important;}
  .gutters > .offset-10 { margin-left: 43.33% !important;}
  .gutters > .offset-11 { margin-left: 47.67% !important;}
  .gutters > .offset-12 { margin-left: 52% !important;}
  .gutters > .offset-13 { margin-left: 56.33% !important;}
  .gutters > .offset-14 { margin-left: 60.67% !important;}
  .gutters > .offset-15 { margin-left: 65% !important;}
  .gutters > .offset-16 { margin-left: 69.34% !important;}
  .gutters > .offset-17 { margin-left: 73.67% !important;}
  .gutters > .offset-18 { margin-left: 78% !important;}
  .gutters > .offset-19 { margin-left: 82.34% !important;}
  .gutters > .offset-20 { margin-left: 86.67% !important;}
  .gutters > .offset-21 { margin-left: 91% !important;}
  .gutters > .offset-22 { margin-left: 95.34% !important;}
  .gutters > .offset-23 { margin-left: 99.67% !important;}
}

/*-------------------------------------------------------------------------------------------*/
/* Metrize Icons | by Alessio | http://alessioatzeni.com/metrize-icons/ */
/*-------------------------------------------------------------------------------------------*/
@font-face {
  font-family: 'Metrize-Icons';
  src:url('../fonts/Metrize-Icons.eot');
  src:url('../fonts/Metrize-Icons.eot?') format('embedded-opentype'),
    url('../fonts/Metrize-Icons.woff') format('woff'),
    url('../fonts/Metrize-Icons.ttf') format('truetype'),
    url('../fonts/Metrize-Icons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-yen, .icon-world, .icon-wireframe-globe, .icon-user, .icon-upload, .icon-three-points, .icon-telephone, .icon-sunshine, .icon-star,.icon-social-facebook, .icon-shield, .icon-settings, .icon-setting, .icon-search, .icon-rss, .icon-report-comment, .icon-quote, .icon-question, .icon-plus, .icon-pin, .icon-pin-map,.icon-paperclip, .icon-paperclip-oblique, .icon-options-settings, .icon-officine, .icon-officine-2, .icon-number-zero, .icon-number-two, .icon-number-three, .icon-number-six, .icon-number-seven, .icon-number-one, .icon-number-nine, .icon-number-four, .icon-number-five, .icon-number-eight, .icon-minus, .icon-map, .icon-mailbox, .icon-mail, .icon-locked, .icon-list-square, .icon-list-circle, .icon-link-url, .icon-like-add, .icon-leaf, .icon-layers, .icon-key, .icon-info, .icon-idea, .icon-heart, .icon-hdd, .icon-hdd-raid, .icon-hdd-net, .icon-grids, .icon-grid-big,.icon-graphs, .icon-exclamation, .icon-drops, .icon-drop, .icon-download, .icon-documents, .icon-document, .icon-document-fill, .icon-cross, .icon-credit-card, .icon-comments, .icon-comment, .icon-coins, .icon-cloud, .icon-cloud-upload, .icon-cloud-remove, .icon-cloud-download, .icon-cloud-add, .icon-check, .icon-chat, .icon-bolt, .icon-block-menu, .icon-arrow-up, .icon-arrow-up-thin, .icon-arrow-up-light, .icon-arrow-up-bold, .icon-arrow-up-bold-round, .icon-arrow-up-big, .icon-arrow-right, .icon-arrow-right-thin, .icon-arrow-right-light, .icon-arrow-right-bold, .icon-arrow-right-bold-round, .icon-arrow-right-big, .icon-arrow-multi-line-up, .icon-arrow-multi-line-right, .icon-arrow-multi-line-left, .icon-arrow-multi-line-down, .icon-arrow-left, .icon-arrow-left-thin, .icon-arrow-left-light, .icon-arrow-left-bold, .icon-arrow-left-bold-round, .icon-arrow-left-big, .icon-arrow-down, .icon-arrow-down-thin, .icon-arrow-down-light, .icon-arrow-down-bold, .icon-arrow-down-bold-round, .icon-arrow-down-big, .icon-arrow-curve-right, .icon-arrow-curve-recycle, .icon-arrow-curve-left, .icon-air-plane, .icon-solutions {
  font-family: 'Metrize-Icons';
  speak: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

.icon-yen:before {content: "\e000";}
.icon-world:before {content: "\e001";}
.icon-wireframe-globe:before {content: "\e002";}
.icon-user:before {content: "\e008";}
.icon-upload:before {content: "\e00c";}
.icon-three-points:before {content: "\e012";}
.icon-telephone:before {content: "\e022";}
.icon-sunshine:before {content: "\e023";}
.icon-star:before {content: "\e026";}
.icon-social-facebook:before {content: "\e045";}
.icon-shield:before {content: "\e056";}
.icon-settings:before {content: "\e057";}
.icon-setting:before {content: "\e058";}
.icon-search:before {content: "\e05b";}
.icon-rss:before {content: "\e05e";}
.icon-report-comment:before {content: "\e060";}
.icon-quote:before {content: "\e064";}
.icon-question:before {content: "\e065";}
.icon-plus:before {content: "\e06a";}
.icon-pin:before {content: "\e06c";}
.icon-pin-map:before {content: "\e06d";}
.icon-paperclip:before {content: "\e070";}
.icon-paperclip-oblique:before {content: "\e071";}
.icon-options-settings:before {content: "\e072";}
.icon-officine:before {content: "\e073";}
.icon-officine-2:before {content: "\e074";}
.icon-number-zero:before {content: "\e076";}
.icon-number-two:before {content: "\e077";}
.icon-number-three:before {content: "\e078";}
.icon-number-six:before {content: "\e079";}
.icon-number-seven:before {content: "\e07a";}
.icon-number-one:before {content: "\e07b";}
.icon-number-nine:before {content: "\e07c";}
.icon-number-four:before {content: "\e07d";}
.icon-number-five:before {content: "\e07e";}
.icon-number-eight:before {content: "\e07f";}
.icon-minus:before {content: "\e084";}
.icon-map:before {content: "\e089";}
.icon-mailbox:before {content: "\e08b";}
.icon-mail:before {content: "\e08c";}
.icon-locked:before {content: "\e090";}
.icon-list-square:before {content: "\e093";}
.icon-list-circle:before {content: "\e094";}
.icon-link-url:before {content: "\e095";}
.icon-like-add:before {content: "\e09d";}
.icon-leaf:before {content: "\e09f";}
.icon-layers:before {content: "\e0a0";}
.icon-key:before {content: "\e0a2";}
.icon-info:before {content: "\e0a4";}
.icon-idea:before {content: "\e0a5";}
.icon-heart:before {content: "\e0a7";}
.icon-hdd:before {content: "\e0a8";}
.icon-hdd-raid:before {content: "\e0a9";}
.icon-hdd-net:before {content: "\e0aa";}
.icon-grids:before {content: "\e0ab";}
.icon-grid-big:before {content: "\e0ac";}
.icon-graphs:before {content: "\e0ad";}
.icon-exclamation:before {content: "\e0b7";}
.icon-drops:before {content: "\e0c1";}
.icon-drop:before {content: "\e0c2";}
.icon-download:before {content: "\e0c3";}
.icon-documents:before {content: "\e0cb";}
.icon-document:before {content: "\e0cc";}
.icon-document-fill:before {content: "\e0cd";}
.icon-cross:before {content: "\e0cf";}
.icon-credit-card:before {content: "\e0d0";}
.icon-comments:before {content: "\e0d8";}
.icon-comment:before {content: "\e0d9";}
.icon-coins:before {content: "\e0da";}
.icon-cloud:before {content: "\e0db";}
.icon-cloud-upload:before {content: "\e0dc";}
.icon-cloud-remove:before {content: "\e0dd";}
.icon-cloud-download:before {content: "\e0de";}
.icon-cloud-add:before {content: "\e0df";}
.icon-check:before {content: "\e0e2";}
.icon-chat:before {content: "\e0e3";}
.icon-bolt:before {content: "\e0f4";}
.icon-block-menu:before {content: "\e0f5";}
.icon-arrow-up:before {content: "\e0fe";}
.icon-arrow-up-thin:before {content: "\e0ff";}
.icon-arrow-up-light:before {content: "\e100";}
.icon-arrow-up-bold:before {content: "\e101";}
.icon-arrow-up-bold-round:before {content: "\e102";}
.icon-arrow-up-big:before {content: "\e103";}
.icon-arrow-right:before {content: "\e104";}
.icon-arrow-right-thin:before {content: "\e105";}
.icon-arrow-right-light:before {content: "\e106";}
.icon-arrow-right-bold:before {content: "\e107";}
.icon-arrow-right-bold-round:before {content: "\e108";}
.icon-arrow-right-big:before {content: "\e109";}
.icon-arrow-multi-line-up:before {content: "\e10e";}
.icon-arrow-multi-line-right:before {content: "\e10f";}
.icon-arrow-multi-line-left:before {content: "\e110";}
.icon-arrow-multi-line-down:before {content: "\e111";}
.icon-arrow-left:before {content: "\e112";}
.icon-arrow-left-thin:before {content: "\e113";}
.icon-arrow-left-light:before {content: "\e114";}
.icon-arrow-left-bold:before {content: "\e115";}
.icon-arrow-left-bold-round:before {content: "\e116";}
.icon-arrow-left-big:before {content: "\e117";}
.icon-arrow-down:before {content: "\e11c";}
.icon-arrow-down-thin:before {content: "\e11d";}
.icon-arrow-down-light:before {content: "\e11e";}
.icon-arrow-down-bold:before {content: "\e11f";}
.icon-arrow-down-bold-round:before {content: "\e120";}
.icon-arrow-down-big:before {content: "\e121";}
.icon-arrow-curve-right:before {content: "\e124";}
.icon-arrow-curve-recycle:before {content: "\e125";}
.icon-arrow-curve-left:before {content: "\e126";}
.icon-air-plane:before {content: "\e129";}
.icon-solutions:before {content: "\e12b";}

/*------------------------------------------------------------------------------------------------*/
/* Variable Setting [変数設定] /////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
:root {
  --trans: transparent; /* transparent */

  --wh: #fff; /* _white */
  --ulgy: #f7f7f7; /* ultra_light-gray */
  --lgy: #ededed; /* light-gray */
  --gy: #d9d9d9; /* -gray */
  --dgy:#b2b2b2; /* dark-gray */
  --udgy: #7c7c7c; /* ultra_dark-gray */
  --ibk:#262626; /* ink-black */
  --bk: #000; /* -black */

  --ppk: #f9e8f5; /* pale-pink */
  --ulpk: #edb8e0; /* ultra_light-pink */
  --lpk: #e289cb; /* light-pink */
  --pk: #D861BA; /* -pink */
  --dpk:#993c82; /* dark-pink */

  --prd: #fbe5e8; /* pale-red */
  --ulrd: #f1b0b8; /* ultra_light-red */
  --lrd: #e87b89; /* light-red */
  --rd: #E04F61; /* -red */
  --drd:#9e343c; /* dark-red */

  --por: #feece0; /* pale-orange */
  --ulor: #fac5a2; /* ultra_light-orange */
  --lor: #f79f65; /* light-orange */
  --or: #F47F31; /* -orange */
  --dor:#ac4928; /* dark-orange */

  --pyl: #fef9db; /* pale-yellow */
  --ulyl: #faeb93; /* ultra_light-yellow */
  --lyl: #f7de4b; /* light-yellow */
  --yl: #F4D30F; /* -yellow */
  --dyl:#ac9519; /* dark-yellow */

  --pgr: #f2fae1; /* pale-green */
  --ulgr: #d7eea3; /* ultra_light-green */
  --lgr: #bde466; /* light-green */
  --gr: #A7DB33; /* -green */
  --dgr:#729b29; /* dark-green */

  --pbgr: #ddf9f7; /* pale-bluegreen */
  --ulbgr: #99ebe7; /* ultra_light-bluegreen */
  --lbgr: #55ded7; /* light-bluegreen */
  --bgr: #1CD3CA; /* -bluegreen */
  --dbgr:#1f958e; /* dark-bluegreen */

  --paq: #dff4fc; /* pale-aqua */
  --ulaq: #9ddef4; /* ultra_light-aqua */
  --laq: #5cc8ee; /* light-aqua */
  --aq: #25B6E8; /* -aqua */
  --daq:#237fa4; /* dark-aqua */

  --pbl: #e4e6fb; /* pale-blue */
  --ulbl: #aeb2f1; /* ultra_light-blue */
  --lbl: #797fe8; /* light-blue */
  --bl: #4C54E0; /* -blue */
  --dbl:#33379e; /* dark-blue */

  --ppr: #ece4fb; /* pale-purple */
  --ulpr: #c6aef3; /* ultra_light-purple */
  --lpr: #a079ec; /* light-purple */
  --pr: #804CE5; /* -purple */
  --dpr:#4a33a2; /* dark-purple */

 --main: #0573c3;
}

/*-------------------------------------------------------------------------------------------*/
/* CSS
/*-------------------------------------------------------------------------------------------*/
html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  color: #3f3f3f;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}

::selection {
  background-color: rgba(167, 207, 234, 1);
  color: #111;
}

  ::-moz-selection {
  background-color: rgba(167, 207, 234, 1);
  color: #111;
}

/* Links */
a {
  outline: none;
  color: var(--main);
  text-decoration: underline;
}

a:hover, a:active {
  text-decoration: none;
}

/* Transition */
a, a:hover, a:active, a:before, a:after, a:hover:before, a:hover:after, a:active:before, a:active:after,
button, button:hover, button:active, button:before, button:after, button:hover:before, button:hover:after, button:active:before, button:active:after,
h1, h2, h3, h4, h5, h6, p, blockquote, table, caption, th, td, img {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}



/* Mobile -----------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/* Blocks -----------------------------------------------------------------------------------*/
.contents {
  padding-bottom: 20px;
  background-color: rgb(251 253 255);
}

main {
  margin-top: 14px;
  padding: 0 0 32px 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #ffffff;
}

article, .article {padding: 60px 6% 0 6%;}/* h2 */
main article:first-of-type {padding-top: 32px;}
section {padding-top: 40px;}/* h3 */
section section {padding-top: 20px;}/* h4 */
section section section {padding-top: 20px;}/* h5 */
section section section section {padding-top: 20px;}/* h6 */

/* Typography -------------------------------------------------------------------------------*/
/* Headings */
h1, h2, h3,.h4, h5, h6 {
  font-weight: 800;
}

h1 {
  text-align: center;
}

h2 {
  padding: 14px 4% 12px 4%;
  border: 1px solid #28323c;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #1e282d;
  font-size: 1.2rem;
  line-height: 1.4;
}

h3 {
  padding-bottom: 4px;
  color: var(--main);
  font-size: 1.25rem;
  line-height: 1.4;
}

h3.bar {
  display: inline-block;
  padding: 0.5rem 1.2rem 0.3rem 1.2rem;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background-color: #0ba4b5;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

h4 {
  color: #7c7c7c;
  font-size: 1.1rem;
  line-height: 1.4;
}

h5 {
  color: #7c7c7c;
  font-size: 0.95rem;
  line-height: 1.4;
}

h6 {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px dotted #7c7c7c;
  color: #7c7c7c;
  font-size: 0.95rem;
  font-weight: normal;
  line-height: 1.4;
}

h2 small, h3 small, h4 small, h5 small, h6 small {
  display: block;
  padding: 4px 0;
  line-height: 1.25;
}

h2 small {
  color: #0ba4b5;
}

h3 small, h4 small, h5 small, h6 small {
  color: #7c7c7c;
}

h2 span, h3 span, h4 span, h5 span, h6 span, p span, li span, dl span, table span {
  display: inline-block;
}

/* Body copy */
p {
  margin-top: 24px;
  font-size: 1rem;
  line-height: 1.75;
}

p small {
  letter-spacing: 0rem;
}

em {
  font-weight: bold;
  font-style: normal;
}

strong {
  color: rgba(245, 147, 5, 1);
  font-weight: bold;
}

/* Transformation classes */
.p-head {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.4;
}

.read {
  color: #5a5a5a;
  font-weight: bold;
  line-height: 1.8;
  text-align: left;
}

.white {
  color: #fff;
}

.black {
  color: #262626;
}

.font-s h3, .font-s h4, .font-s h5, .font-s h6 {
  font-size: 1em;
}

.font-s div, .font-s p, .font-s blockquote, .font-s li, .font-s dt, .font-s dd, .font-s caption, .font-s th, .font-s td {
  font-size: 0.85rem;
}

.font-s small {
  font-size: 90%;
}

.font-l div, .font-l p, .font-l blockquote, .font-l li, .font-l dt, .font-l dd, .font-l caption, .font-l th, .font-l td {
  font-size: 1.1rem;
}

/* Blockquotes */
blockquote {
  margin-top: 18px;
  padding: 18px 6% 16px 6%;
  border: 1px dashed rgba(124, 124, 124, 1);
  background-color: rgba(247, 247, 247, 1);
  color: #262626;
}

blockquote p:first-child {
  margin-top: 0;
}

/* Lists */
li {
  margin: 14px 0 0 0;
  font-size: 1rem;
  line-height: 1.5;
  list-style-position: inside;
}

li ul, li ol {
  padding-left: 10px;
  border-left: 4px solid #ccc;
}

/* Description */
dl {
  margin-top: 0;
  padding: 0;
  border: none;
}

dt { /* h4 */
  display: inline-block;
  margin-top: 20px;
  padding: 4px 0 3px 8px;
  border-left: 6px solid rgba(78, 160, 213, 1);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
}

dd {
  font-size: 1rem;
  line-height: 1.5;
}

dd, dd p {
  margin-top: 18px;
}

dd > p:first-child {
  margin-top: 0;
}

/* Nesting */
/* 2nd */
dl dl {
  margin-left: 12px;
}

dl dl dt {
  padding-left: 10px;
  border-left: 6px solid rgba(124, 124, 124, 1);
  font-size: 0.95rem;
}

dl dl dt + dd {
  margin-top: 8px;
}

/* 3rd */
dl dl dl {
  margin-left: 0;
}

dl dl dl dt {
  padding-left: 10px;
  border-left: 6px solid rgba(178, 178, 178, 1);
}

/* Nesting li + dl */
/* 1nd */
li dl {
  margin-left: 0;
}

li dt{
  margin-top: 0;
  width: 100%;
}

li dt + dt {
  margin-top: 4px;
}

/* 1st */
li dl ul, li dl ol {
  margin-left: 2px;
  border-left: 2px solid rgba(78, 160, 213, 1);
}

/* 2nd */
li dl dl ul, li dl dl ol {
  border-left: 2px solid rgba(124, 124, 124, 1);
}

li dl dl dd li, li dl dl dd li p, li dl dl dd, li dl dl dd p {
  font-size: 0.95rem;
}

/* 3rd */
li dl dl dl ul, li dl dl dl ol {
  border-left: 2px solid rgba(178, 178, 178, 1);
}

/* Transformation classes */
.pseudo-dt span {
  display: inline-block;
  width: 100%;
  font-weight: bold;
}

/* 1st */
li li.pseudo-dt span {
  padding-left: 10px;
  border-left: 6px solid rgba(78, 160, 213, 1);
}

/* 2nd */
li dl li.pseudo-dt span {
  padding-left: 10px;
  border-left: 6px solid rgba(124, 124, 124, 1);
  font-size: 0.95rem;
}

/* 3rd */
li dl dl li.pseudo-dt span {
  padding-left: 10px;
  border-left: 6px solid rgba(178, 178, 178, 1);
  font-size: 0.95rem;
}

/* Tables -----------------------------------------------------------------------------------*/
/* Basic Table : Jerry Low */
table.bt caption {
  border: none;
}

table.bt thead {
  display: none;
}

table.bt tbody tr {
  border: none;
  border-top: 6px solid #fff;
}

table.bt tbody td {
  display: block;
  border: none;
  border-top: 1px dashed rgba(217, 217, 217, 1);
  vertical-align: top;
}

table.bt tbody td:first-child {
  border: none;
}

table.bt tbody td:before {
  display: inline-block;
  content: attr(data-th) " :";
  padding-right: 6px;
  color: #262626;
  font-weight: bold;
}

table.bt tbody.break td:before {
  width: 100%;
}

/*-------------------------*/
/* Basic */
table {/* .font-s */
  margin-top: 14px;
  width: 100%;
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: 0.04rem;
}

table small {
  font-size: 90%;
}

caption {
  padding: 0 12px;
  color: rgba(78, 160, 213, 1);
}

caption:before {
  display: inline-block;
  padding-right: 0.4em;
  content: "―";
}

caption:after {
  display: inline-block;
  padding-left: 0.4em;
  content: "―";
}

th, td {
  display: block;
  width: 100%;
  border: 4px solid #fbfdff;
}

th {
  padding: 4px 16px 3px 16px;
  background-color: rgb(115 140 165);
  color: #fff;
}

td {
  padding: 16px 16px 15px 16px;
  background-color: rgb(247 251 255);
}

tr.odd td {
  background-color: rgb(234 239 245);
}

tr.table-hover td {
  background: #fff;
}

/* Typography */
td p {
  margin-top: 14px;
  font-size: 0.85rem;
}

td li, td dt, td dd, td dd p {
  font-size: 0.85rem;
}

td p:first-child, td li:first-child, td dt:first-child {
  margin-top: 0;
}

/* Images -----------------------------------------------------------------------------------*/
.contents img {
  margin: 0 auto;
  width: 100%;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  text-align: center;
}

#right-bar img {
  max-width: 268px;
}

.img {
  margin: 18px auto 0 auto;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  text-align: center;
}

.img + p, .img + dt, .img + table {
  margin-top: 18px;
}

.img + ul, .img + ol {
  padding-top: 4px;
}

.img small {
  display: block;
  padding: 6px;
}

/* Parallax Scrolling Effect */
.enllax {
  position: relative;
  background: rgba(247, 247, 247, 1) repeat-y;
  background-size: cover;
  box-sizing: border-box;
}

/* Buttons ----------------------------------------------------------------------------------*/
/* Button 01 */
/*
.btn {
  display: inline-block;
  position: relative;
  padding: 1.6rem 3.4rem 1.4rem 2rem;
  border: 2px solid var(--main);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: var(--main);
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  line-height: 1.3;
  cursor:pointer;
}
*/
/* Sizes */
.btn-xs {
  padding: 0.54rem 0.5rem 0.5rem 0.5rem;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 1.2;
}

.btn-s {
  padding: 0.54rem 3rem 0.5rem 2rem;
  font-size: 0.9rem;
}

.btn-l {
  padding: 2.4rem 3.8rem 2.3rem 2rem;
  font-size: 1.6rem;
}

.btn-block {
  display: block;
}

/* hover, active */
/*
.btn:hover {
  border: 2px solid var(--main);
  background-color: #fff;
  color: var(--main);
  text-shadow: 0px 0px 2px rgba(255, 255, 255, .2);
}

.btn:active {
  border: 2px solid var(--main);
  color: var(--main);
}
*/
.btn-xs:hover {
  border-color: transparent;
  background-color: rgba(78, 160, 213, 1);
  color: #fff;
  text-shadow: 0px 0px 2px rgba(255, 255, 255, .2);
}

.btn-xs:active {
  border: 2px solid rgba(255, 255, 255, 1);
  background-color: rgba(34, 136, 202, 1);
  color: #fff;
}

.btn-xs span {
  padding-right: 0.5rem;
  vertical-align: bottom;
}

/* Icons */
.btn-icon {padding-left: 4.3rem;}

.btn-icon-s {
  position: relative;
  padding: 0.54rem 3rem 0.5rem 3.2rem;
  font-size: 0.9rem;
}

.btn-icon-l {
  position: relative;
  padding: 2.4rem 3.8rem 2.3rem 5.5rem;
  font-size: 1.6rem;
}

.btn-icon span {
  position: absolute;
  top: 50%;
  left: 1rem;
  margin-top: -1.17rem;
  font-size: 2.4rem;
}

.btn-icon-s span {
  position: absolute;
  top: 50%;
  left: 1rem;
  margin-top: -0.7rem;
  font-size: 1.4rem;
}

.btn-icon-l span {
  position: absolute;
  top: 50%;
  left: 1rem;
  margin-top: -1.5rem;
  font-size: 3.2rem;
}

/* Arrows */
/*
.btn:after {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 1rem;
  margin-top: -0.8rem;
  font-weight: bold;
  content: "\002192";
}
*/
.btn-xs:after {
  display: none;
}

.btn-s:after, .btn-icon-s:after {
  margin-top: -0.7rem;
}

.btn-l:after {
  margin-top: -1.2rem;
}

.btn-icon-l:after {
  margin-top: -1.1rem;
}

.btn-up:after {
  content: "\002191";
}

.btn:hover:after {
  right: 0.7rem;
}

.btn-up:hover:after {
  top: 45%;
  right: 1rem;
}

.btn-down:after {
  content: "\002193";
}

.btn-down:hover:after {
  top: 55%;
  right: 1rem;
}

.btn-arrow-hidden:after {
  display: none;
}

/* Colors */
/* Light Gray */
.btn-lightgray {
  border-color: rgba(217, 217, 217, 1);
  background-color: rgba(217, 217, 217, 1);
  color: #262626;
}

/* Gray */
.btn-gray {
  border-color: rgba(178, 178, 178, 1);
  background-color: rgba(178, 178, 178, 1);
  color: #262626;
}

/* Dark Gray */
.btn-darkgray {
  border-color: rgba(124, 124, 124, 1);
  background-color: rgba(124, 124, 124, 1);
  color: #fff;
}

/* Charcoal */
.btn-charcoal {
  border-color: rgba(38, 38, 38, 1);
  background-color: rgba(38, 38, 38, 1);
  color: #fff;
}

/* Others */
.btn-active {
  background-color: #fff;
  color: #2288ca;
}

.btn-disabled {
  border-color: rgba(217, 217, 217, 1);
  background-color: rgba(217, 217, 217, 1);
  color: #b2b2b2;
  cursor: default;
}

.btn-disabled:hover {
  border-color: rgba(217, 217, 217, 1);
  box-shadow: none;
  background-color: rgba(217, 217, 217, 1);
  color: #b2b2b2;
  text-shadow: none;
}

.btn-disabled:hover:after {
  right: 1rem;
}

/* Helper classes ---------------------------------------------------------------------------*/
.txt-left {text-align: left !important;}
.txt-center {text-align: center !important;}
.txt-right {text-align: right !important;}
.no-margin {margin-top: 0 !important; }
.pull-right {float: right !important;}
.center-block {display: block; margin: 0 auto;}

/* Responsive utilities ---------------------------------------------------------------------*/
.visible-m {display: block;}
.visible-p {display: none;}

/*-------------------------------------------------------------------------------------------*/
/* Components
/*-------------------------------------------------------------------------------------------*/
/* Page header ------------------------------------------------------------------------------*/
#contents-header {
  /*padding: 82px 0 24px 0;*/
  padding: 96px 0 40px 0;/* top +56px */
  background: #f7f7f7 url(../img/commons/bg-contents-header-def.jpg) repeat;
  background-size: cover;
  box-sizing: border-box;
  text-align: center;
}

#contents-header h1 {
  display: inline-block;
  margin: 0 auto;
  padding: 0.6rem 2rem 0.5rem 2rem;
  border: transparent;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  background-color: rgba(255, 255, 255, .5);
  color: #262626;
  font-size: 1.2rem;
  line-height: 1.2;
}

#contents-header h1 strong {
  display: block;
  color: #fff;
}

#contents-header h1 small, #contents-header h1 span {
  display: block;
}

#contents-header h1 small {
  margin-top: 3px;
  color: #005496;
  font-weight: bold;
}

#contents-header h1 span {
  font-size: 75%;
}


/* Header White */
.header-white #contents-header h1 {color: #fff;}

/* View Header ------------------------------------------------------------------------------*/
.view-header {
  padding: 60px 0;
  border: none;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: repeat;
  box-sizing: border-box;
}

/* Breadcrumbs ------------------------------------------------------------------------------*/
.breadcrumb {
  display: inline-block;
  margin-top: 12px;
  list-style: none;
}

.breadcrumb li {
  float: left;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1;
}

.breadcrumb li a,
.breadcrumb li span {
  display: block;
  position: relative;
  margin-right: 23px;
  padding: 0 10px 0 5px;
  height: 32px;
  background-color: rgb(224 234 243);
  color: rgb(40 50 60);
  line-height: 33px;
  text-align: center;
  text-decoration: none;
  outline: none;
}

.breadcrumb li span {
  background-color: rgb(234 234 235);
}

.breadcrumb li:nth-child(even) a {
  background-color: rgb(247 251 255);
}

.breadcrumb li:nth-child(even) span {
  background-color: rgb(234 234 235);
}

.breadcrumb li:nth-child(even) a:before {
  border-color: rgb(247 251 255);
  border-left-color: transparent;
}

.breadcrumb li:nth-child(even) span:before {
  border-color: rgb(234 234 235);
  border-left-color: transparent;
}

.breadcrumb li:nth-child(even) a:after {
  border-left-color: rgb(247 251 255);
}

.breadcrumb li:nth-child(even) span:after {
  border-left-color: rgb(234 234 235);
}

.breadcrumb li:first-child a,
.breadcrumb li:first-child span {
  padding-left: 32px;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}

.breadcrumb li:first-child a:before,
.breadcrumb li:first-child span:before {
  position: absolute;
  top: 8px;
  left: 12px;
  margin-left: 0;
  border: none;
  font-family: 'Metrize-Icons';
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  vertical-align: bottom;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  content: "\e126";
  speak: none;
}

.breadcrumb li:last-child a,
.breadcrumb li:last-child span {
  padding-right: 15px;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}

.breadcrumb li:last-child a:after,
.breadcrumb li:last-child span:after {
  border: none;
}

.breadcrumb li a:before, .breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border: 0 solid rgb(224 234 243);
  border-width: 16px 10px;
}

.breadcrumb li span:before, .breadcrumb li span:after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border: 0 solid rgb(234 234 235);
  border-width: 16px 10px;
}

.breadcrumb li a:before,
.breadcrumb li span:before {
  left: -19px;
  border-left-color: transparent;
}

.breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: rgb(224 234 243);
}

.breadcrumb li span:after {
  left: 100%;
  border-color: transparent;
  border-left-color: rgb(234 234 235);
}

.breadcrumb li a:hover {
  background-color: var(--main);
  color: #fff;
}

.breadcrumb li a:hover:before {
  border-color: var(--main);
  border-left-color: transparent;
}

.breadcrumb li a:hover:after {
  border-left-color: var(--main);
}

.breadcrumb li a:active {
  background-color: var(--main);
}

.breadcrumb li a:active:before {
  border-color: var(--main);
  border-left-color: transparent;
}

.breadcrumb li a:active:after {
  border-left-color: var(--main);
}

/* Page Index -------------------------------------------------------------------------------*/
.page-index {
  margin-top: 4px;
  padding: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.page-index p:first-child {
  position: relative;
  margin-top: 0;
  padding: 8px 8px 8px 32px;
  width: 100%;
  background-color: rgb(224 234 243);
  color: #1e282d;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.page-index p.btn-open:before {
  position: absolute;
  top: 7px;
  margin-left: -24px;
  font-family: 'Metrize-Icons';
  font-size: 0.9rem;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  vertical-align: bottom;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  content: "\e06a";
  speak: none;
}

.page-index p.btn-open:hover {
  background-color: rgb(5 115 195);
  color: #fff;
}

.page-index p.btn-active:before {
  content: "\e084";
}

.page-index ul,.page-index ol {
  padding: 0;
}

.page-index li {
  display: inline-block;
  margin: 8px 8px 0 0;
}

.page-index li a {
  display: block;
  padding: 4px 6px 4px 6px;
  background-color: var(--main);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  color: #fff;
  font-size: 0.8rem;
  text-decoration: none;
  text-shadow: none;
  line-height: 1.2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.page-index li a:hover {
  background-color: rgba(78, 160, 213, 1);
}

.page-index li a:active {
  background-color: rgba(34, 136, 202, 1);
}

/* Page Index Inline */
.page-index-inline p, .page-index-inline ul, .page-index-inline ol {
  display: inline;
}

/* Side Nav ---------------------------------------------------------------------------------*/
.side-head {
  position: relative;
  margin: 20px 0 4px 0;
  padding: 12px 16px 10px 2rem;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  color: #7c7c7c;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0rem;
}

.side-head span:before {
  position: absolute;
  top: 0.8rem;
  left: 0.5rem;
  font-size: 1.2rem;
  font-weight: normal;
}

.side-nav li {
  display: inline-block;
  margin: 8px 8px 0 0;
  font-size: 0.9rem;
  line-height: 1.2;
  list-style-type: none;
}

.side-nav li a, .side-nav li span {
  display: block;
  padding: 0 10px 0 10px;
  border: 2px solid var(--main);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: #5a6e82;
  color: #fff;
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  outline: none;
}

.side-nav li a:hover {
  border: 2px solid var(--main);
  background-color: var(--main);
  color: #fff;
}

.side-nav li a:active {
  border-color: var(--main);
  background-color: var(--main);
}

.side-nav li span {
  border: 2px solid rgba(217, 217, 217, 1);
  background-color: rgba(217, 217, 217, 1);
  color: #b2b2b2;
}

.side-nav li ul {
  padding: 0 8px 8px 8px;
  border: 1px dashed #b2b2b2;
  border-top: none;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.side-nav li small {
  display: inline-block;
  font-size: 0.9em;
}

/* Side Info --------------------------------------------------------------------------------*/
.side-info {
  margin-top: 20px;
  padding: 12px 4% 10px 4%;
  background-color: rgba(247, 247, 247, 1);
}

.side-info p {
  font-size: 0.8rem;
}

.side-info p:first-child {
  margin-top: 0;
}

.side-info span {
  padding-right: 0.3rem;
  color: #2288ca;
  font-size: 1.1rem;
}

/* SSL */
.side-ssl {
  border: 1px dotted #ccc;
  background-color: rgba(237, 237, 237, 1);
  color: #7c7c7c;
}

/* Contents lead & Lead ---------------------------------------------------------------------*/
.contents-lead, .lead {
  margin-top: 20px;
  margin-bottom: 40px;
  padding: 16px 4% 14px 4%;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.lead {margin-bottom: 0;}

.contents-lead p, .lead p {
  margin-top: 12px;
  font-size: 0.9rem;
}

.contents-lead > p:first-child, .lead > p:first-child {margin-top: 0;}

.contents-lead > p strong, .lead > p strong {
  font-size: 1rem;
}

.contents-lead .notes, .lead .notes {
  text-align: center;
  line-height: 1.2;
}

.contents-lead .notes small, .lead .notes small {
  display: block;
  margin-top: 3px;
}

/* Form lead */
.form-lead {margin-bottom: 0;}

.form-lead .tel-num {
  color: #7c7c7c;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

/* Caution */
.caution {
  border: 1px solid rgba(240, 99, 99, 1);
  color: #cc5454;
  font-weight: bold;
}

/* Success */
.success {
  border: 1px solid rgba(44, 120, 223, 1);
  color: #2566be;
  font-weight: bold;
}

/* Info Box ----------------------------------------------------------------------------*/
.info-box {
  margin-top: 20px;
  border: 1px solid #ededed;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 0 6% 18px 6%;
  background-color: rgba(247, 247, 247, 1);
  text-align: left;
}

.info-box p, .info-box dd {
  font-size: 0.95rem;
  line-height: 1.75;
  letter-spacing: 0;
}

.info-box span {
  display: inline-block;
}

.info-box .label {
  margin-top: 18px;
}

.info-box .label p {
  margin: 0 auto;
  color: #7c7c7c;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.info-box .label .tag {
  position: relative;
  display: inline-block;
  margin-left: 4px;
  padding: 0.18rem 0.3rem 0.12rem 0.3rem;
  border: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  font-size: 0.8rem;
}

.info-box .label .tag:first-child {
  margin-left: 0;
}

.info-box .label .icon {
  padding-left: 1.5rem;
}

.info-box .label .num-01 {
  background-color: rgba(213, 195, 71, 1);
}

.info-box .label .num-02 {
  background-color: rgba(191, 190, 195, 1);
}

.info-box .label .boom {
  background-color: rgba(245, 147, 5, 1);
}

.info-box .label .new {
  background-color: rgba(59, 182, 196, 1);
}

.info-box .label .standard {
  background-color: rgba(29, 116, 172, 1);
}

.info-box .label .aws {
  background-color: rgba(245, 147, 5, 1);
}

.num-01:before, .num-02:before, .boom:before {
  content: "\e026";
  position: absolute;
  top: 3px;
  left: 0.3rem;
  font-family: 'Metrize-Icons';
  font-size: 1rem;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  speak: none;
}

.info-box .label .boom:before {
  content: "\e103";
}

.info-box .label-corner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: transparent;
  color: transparent;
  text-align: left;
}

.info-box .label-corner:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin: -1px 0 0 -1px;
  width: 0;
  height: 0;
  border: 40px solid transparent;
  border-top-color: rgba(245, 147, 5, 1);
  border-left-color: rgba(245, 147, 5, 1);
  -webkit-border-radius: 6px 0 0 0;
  -moz-border-radius: 6px 0 0 0;
  border-radius: 6px 0 0 0;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  font-style: normal;
  font-variant: normal;

  text-transform: none;
  -webkit-font-smoothing: antialiased;
  content: "限定";
  speak: none;
}

.info-box .thumbs {
  margin: 18px auto 0 auto;
}

.info-box .thumbs p {
  position: relative;
  margin: 0 auto;
  height: auto;
  min-height: 100px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-position: center center;
  background-size: cover;
}

.info-box .thumbs p:before {
  content: '';
  display: block;
  padding-top: 56.25%;
}

.info-box .cover img {
  display: none;
}

.info-box .head {
  margin-top: 18px;
}

.info-box .head h3 {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
}

.info-box .head h3,.info-box .head h4, .info-box .head p {
  margin: 0 auto;
  padding: 0;
  color: #0ba4b5;
  font-size: clamp(1.2rem, 0.955rem + 1.09vw, 1.5rem);
  line-height: 1.35;
}

.info-box .head small {
  display: block;
  padding: 4px 0;
  color: #262626;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 75%;
  line-height: 1.4;
}

.info-box .txt {
  margin-top: 14px;
}

.info-box .txt p {
  margin: 14px auto 0 auto;
}

.info-box .txt p:first-of-type {
  margin-top: 0;
}

.info-box .sup {
  margin-top: 14px;
}

.info-box .sup p {
  margin: 0 auto;
  color: #7c7c7c;
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: right;
}

.info-box .link {
  text-align: center;
}

.info-box .middle div, .info-box .middle h3, .info-box .middle h4, .info-box .middle p {
  display: table-cell;
  width: 1000px;
  height: 100%;
  vertical-align: middle;
}

.info-box .link {
  margin-top: 20px;
}

.info-box .link a span {
  position: relative;
}
/* meria */

.meria article {
    padding: 60px 2% 0 2%;
}

.meria .lead_block {
  padding: 18px 4% 18px 4%;
  font-size: 1rem;
  font-weight: bold;
}

.meria .lead_block .info-box-list {
  margin-top: 24px;
  padding: 20px 12px;
  border-radius: 4px;
  background-color: #ededed;
}

.meria .lead_block h4 {
  color: #0090cc;
}
.meria .lead_block h4:not(:first-child) {
  margin-top: 20px;
}
.meria .lead_block ul {
  margin-top: 6px;
}
.meria .lead_block li {
  margin: 0;
}

.meria .lead_block li p {
  display: inline;
  margin: 0;
}

.meria .row + .row {
  margin-top: 20px;
}

.meria #section-03 .row:nth-of-type(1) .span-7 {
  margin-top: 20px;
}
.meria .comment {
  padding: 28px 20px;
  border-radius: 4px;
  background-color: #ededed;
  line-height: 1.8;
  color: #505050;
  font-size: 0.95rem;
  font-weight: bold;
}

.meria .merit {
  margin-top: 24px;
  padding: 20px 12px;
  border-radius: 4px;
  background-color: #e5f7ff;
}

.meria .merit h4 {
  color: #0090cc;
  font-size: 1.3rem;
}

.meria .merit ol {
  margin-top: 18px;
}

.meria .merit li {
  margin: 0;
}

.meria .merit li p {
  display: inline;
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
}

.meria .cliant_info {
  margin-top: 36px;
}

.meria .cliant_info h4 {
  color: #505050;
}

.meria .cliant_info dd {
  font-size: 0.9rem;
}

.meria .cliant_info .row figure {
  display: block;
  margin-top: 20px;
}
.meria .cliant_info .row figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
}

.meria .img_cliant_logo {
  margin: 0 auto;
  max-width: 200px;
}

/* Thumbs box ----------------------------------------------------------------------------*/
.thumbs-box {
  padding: 0 0 18px 0;
}

.thumbs-box .thumbs {
  display: block;
  margin-top: 0;
}

.thumbs-box .thumbs p {
  /* height: 100px; */
  -webkit-border-bottom-left-radius: 0;
  -moz-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
}

.thumbs-box .head {
  margin: 18px 4% 0 4%;
}

.thumbs-box .label, .thumbs-box .txt, .thumbs-box .sup {
  margin: 14px 4% 0 4%;
}

.thumbs-box dt {
  border: none;
  margin-top: 0;
  padding: 8px 6% 6px 6%;
  width: 100%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px 4px 0 0;
  background-color: rgba(217, 217, 217, 1);
}

.thumbs-box dd {
  margin: 14px 6% 0 6%;
}

/* Wells ------------------------------------------------------------------------------------*/
.wells {
  margin-top: 24px;
  padding: 16px 4% 14px 4%;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: rgba(237, 237, 237, 1);
}

.wells p:first-child {
  margin-top: 0;
}

/* Notes ------------------------------------------------------------------------------------*/
.notes {
  margin-top: 20px;
  padding: 7px 4% 6px 4%;
  border: 1px dotted rgb(90 110 130);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  color: rgb(90 110 130);
  font-size: 0.9rem;
}

.notes p {
  font-size: 0.9rem;
}

.notes p:first-child {
  margin-top: 0;
}

.notes li {
  margin-top: 8px;
}

td .notes {
  margin-top: 14px;
  font-size: 0.85rem;
}

td .notes:first-child {
  margin-top: 0;
}

/* Response ---------------------------------------------------------------------------------*/
.response {
  margin-top: 60px;
  /* padding-bottom: 20px; */
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: rgb(224 234 243);
  text-align: center;
}

.response h2 {
  display: none;
}

.response .row {
  padding: 30px 4%;
}

.contents .response section {
  padding: 0;
}

.contents .response section:nth-of-type(2) {
  padding-top: 30px;
}

.response h3 {
  padding: 0;
  color: rgb(40 50 60);
  font-size: 1rem;
  line-height: 1.4;
}

.response p {
  line-height: 1.2;
}

.response .tel-num {
  margin-top: 6px;
  color: #7c7c7c;
  font-size: 2rem;
  font-weight: bold;
}

.response .notes {
  margin-top: 6px;
}

.response .response-btn {
  margin-top: 6px;
  color: #7c7c7c;
  font-size: 2rem;
  font-weight: bold;
}

/*-------------------------------------------------------------------------------------------*/
/* Forms
/*-------------------------------------------------------------------------------------------*/
/* step */
.step ol {
  display: inline-block;
  margin: 8px auto 0 -20px;
  width: auto;
}

.step li {
  position: relative;
  float: left;
  margin: 4px 0 0 20px;
  padding: 0 12px 0 36px;
  height: 36px;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  background: rgba(217, 217, 217, 1);
  font-size: 0.9rem;
  line-height: 36px;
  text-align: center;
  list-style: none;
}

.step li:first-child {
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}

.step li:first-child:before {
  margin-left: 0;
  border: none;
}

.step li:last-child {
  padding-right: 14px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.step li:last-child:after {
  border: none;
}

.step li:before, .step li:after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border: 0 solid rgba(217, 217, 217, 1);
  border-width: 18px 10px;
}

.step li:before {
  left: -10px;
  border-left-color: transparent;
  visibility: hidden;
}

.step li:after {
  left: 100%;
  border-color: transparent;
  border-left-color: rgba(217, 217, 217, 1);
}

.step li span:before {
  position: absolute;
  top: 10px;
  left: 14px;
  font-family: 'Metrize-Icons';
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  vertical-align: bottom;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  speak: none
}

.step li:nth-child(1) span:before {content: "\e07b";}
.step li:nth-child(2) span:before {content: "\e077";}
.step li:nth-child(3) span:before {content: "\e078";}

.step .active {
  background-color: rgba(78, 160, 213, 1);
  color: #fff;
  font-weight: bold;
}

.step .active:after {
  border-left-color: rgba(78, 160, 213, 1);
}

/* form */
form h3 small strong {
  color: #2288ca;
}

form th small {
  font-size: 90%;
}

form td p {
  margin-top: 12px;
  text-align: center;
}

form td p:first-child {
  margin-top: 0;
}

input[type=text], input[type=tel], input[type=email], textarea {
  padding: 6px 8px;
  height: 32px;
  border: 2px solid #b2b2b2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  width: 100%;
}

textarea {
  margin-top: 14px;
  height: 9rem;
}

select {
  padding: 4px 1rem;
  width: 100%;
  height: 44px;
  border: 2px solid #2288ca;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: rgba(34, 136, 202, 1);
  color: #fff;
  line-height: 1.2;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

option[disabled] {
  color: #2288ca;
}

option {
    padding: 6px 16px 4px 16px;
    border-top: 1px dotted #7c7c7c;
    background-color: #fff;
    color: #262626;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3 ease-out;
    transition: all 0.3s ease-out;
}

form .coution {
  color: #1d74ac;
  font-size: 0.9rem;
  font-weight: bold;
}

form .form-info {
  margin-top: 24px;
  padding: 16px 4% 14px 4%;
  background-color: rgba(237, 237, 237, 1);
}

form .form-info .row {
  margin-top: 14px;
}

form .form-info .row > div:nth-child(2) {
  margin-top: 14px;
  text-align: center;
}

form .form-info p {
  font-size: 0.9rem;
}

form .form-info p:first-child {
  margin-top: 0;
}

form .form-info p small {
  display: block;
}

form .form-info p strong span {
  color: #2288ca;
}

form .agree {
  margin-top: 14px;
  text-align: center;
}

form .agree label {
  display: inline-block;
  margin-left: 12px;
  padding: 0px 16px 4px 16px;
  height: 44px;
  border: 2px solid #2288ca;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: rgba(34, 136, 202, 1);
  color: #fff;
  line-height: 42px;
  cursor: pointer;
}

.form-info + p {
  text-align: center;
}

.form-btn {
  margin-top: 40px;
}

/*-------------------------------------------------------------------------------------------*/
/* JS
/*-------------------------------------------------------------------------------------------*/
/* Tooltip ----------------------------------------------------------------------------------*/
/* PowerTip : Steven Benner */
#powerTip {
  display: none;
  position: absolute;
  z-index: 15000;
  padding: 10px;
  border-radius: 6px;
  background-color: #262626; /* fallback for browsers that dont support rgba */
  background-color: rgba(0, 0, 0, 0.8);
  color: #FFF;
  font-size: 11px !important;
  font-size: 0.8rem !important;
  white-space: nowrap;
  cursor: default;
}

#powerTip.n:before, #powerTip.e:before, #powerTip.s:before, #powerTip.w:before,
#powerTip.ne:before, #powerTip.nw:before, #powerTip.se:before, #powerTip.sw:before {
  position: absolute;
  content: "";
}

#powerTip.n:before, #powerTip.s:before {
  left: 50%;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

#powerTip.e:before, #powerTip.w:before {
  top: 50%;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

#powerTip.n:before {
  bottom: -10px;
  border-top: 10px solid rgba(0, 0, 0, 0.8);
}

#powerTip.e:before {
  left: -10px;
  border-right: 10px solid rgba(0, 0, 0, 0.8);
}

#powerTip.s:before {
  top: -10px;
  border-bottom: 10px solid rgba(0, 0, 0, 0.8);
}

#powerTip.w:before {
  right: -10px;
  border-left: 10px solid rgba(0, 0, 0, 0.8);
}

#powerTip.ne:before, #powerTip.se:before {
  left: 10px;
  border-left: 0;
  border-right: 10px solid transparent;
}

#powerTip.nw:before, #powerTip.sw:before {
  right: 10px;
  border-left: 10px solid transparent;
  border-right: 0;
}

#powerTip.ne:before, #powerTip.nw:before {
  bottom: -10px;
  border-top: 10px solid rgba(0, 0, 0, 0.8);
}

#powerTip.se:before, #powerTip.sw:before {
  top: -10px;
  border-bottom: 10px solid rgba(0, 0, 0, 0.8);
}

/* Collapse ---------------------------------------------------------------------------------*/
.open {
  display:none;
}

/* Carousel ---------------------------------------------------------------------------------*/
/* Slick Slider : Ken Wheeler */
/* Slider */
.slick-slider {
  display: block;
  position: relative;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
      touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-slider * {
  outline: none;
}

.slick-list {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track, .slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.slick-track {
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

.slick-track:before, .slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Theme */
/* Slider */
.slick-loading .slick-list {
  background: #fff url('../img/commons/spinner.gif') center center no-repeat;
}

/* Icons */
@font-face {
  font-family: 'slick';
  src: url('../fonts/slick.eot');
  src: url('../fonts/slick.eot?') format('embedded-opentype'),
  url('../fonts/slick.woff') format('woff'),
  url('../fonts/slick.ttf') format('truetype'),
  url('../fonts/slick.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Arrows */
.slick-prev, .slick-next {
  display: block;
  position: absolute;
  top: 50%;
  z-index: 5000;
  margin-top: -10px;
  padding: 0;
  width: 20px;
  height: 20px;
  outline: none;
  border: none;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}

.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
  opacity: .25;
}

.slick-prev:before, .slick-next:before {
  opacity: .75;
  color: white;
  font-family: 'slick';
  font-size: 20px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: 6px;
}

[dir='rtl'] .slick-prev {
  left: auto;
  right: -25px;
}

.slick-prev:before {
  content: '←';
}

[dir='rtl'] .slick-prev:before {
  content: '→';
}

.slick-next {
  right: 6px;
}

[dir='rtl'] .slick-next {
  left: -25px;
  right: auto;
}

.slick-next:before {
  content: '→';
}

[dir='rtl'] .slick-next:before {
  content: '←';
}

/* Dots */
.slick-slider {
  margin-bottom: 0;
}

.slick-dots {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 9999;
  margin-left: -48px;
  padding: 0;
  width: 96px;
  height: 20px;
  text-align: center;
  list-style: none;
}

.slick-dots li {
  float: left;
  position: relative;
  margin: 0 6px;
  padding: 0;
  width: 20px;
  height: 20px;
  line-height: 1;
  cursor: pointer;
}

.slick-dots li button {
  display: block;
  width: 20px;
  height: 20px;
  outline: none;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  opacity: .25;
  color: #2288ca;
  font-size: 0.8rem;
  font-family: 'slick';
  line-height: 23px;
  text-align: center;
  content: '•';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: .75;
  color: #2288ca;
}

/* PC ---------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
@media (min-width: 801px) {
/*-------------------------------------------------------------------------------------------*/
/* Blocks -----------------------------------------------------------------------------------*/
main {
  margin-top: 0;
  padding: 0 0 60px 0;
}

article, .article {padding: 80px 6% 0 6%;}/* h2 */
main article:first-of-type {padding-top: 80px;}
section {padding-top: 80px;}/* h3 */
section section {padding-top: 36px;}/* h4 */
section section section {padding-top: 32px;}/* h5 */
section section section section {padding-top: 24px;}/* h6 */
.contents {padding: 0 0 40px 0;}

/* Typography -------------------------------------------------------------------------------*/
/* Headings */
h2 {
  padding: 0;
  border: none;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.3;
}

h2 small {
  font-size: 50%;
  font-weight: bold;
}

h3 {
  font-size: 1.6rem;
}

h3.bar {
  display: inline-block;
  padding: 0.5rem 1.2rem 0.3rem 1.2rem;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  background-color: #262626;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.2;
}

h3 small {
  font-size: 60%;
}

h4 {
  font-size: 1.4rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  border: none;
  font-size: 0.95rem;
  font-weight: bold;
}

/* Body copy */
p {
  margin-top: 24px;
  line-height: 1.75;
  letter-spacing: 0.04rem;
}

h2 + p {
  margin-top: 48px;
}

h3 + p {
  margin-top: 24px;
}

h5 + p {
  margin-top: 14px;
}

h6 + p {
  margin-top: 12px;
}

.read {
  margin-top: 32px;
}

h2 + .read {
  margin-top: 80px;
}

/* Lists */
li {
  margin: 14px 0 0 1.5rem;
  line-height: 1.6;
  list-style-position: outside;
}

li p {
  letter-spacing: 0.06rem;
}

p + ul, p + ol, p + dl {
  padding-top: 10px;
}

ul + p, ol + p, dl + p {
  margin-top: 24px;
}

/* Nesting */
li dt {
  margin-top: 6px;
}

/* Tables -----------------------------------------------------------------------------------*/
/* Basic */
th {
  display: table-cell;
  width: 22%;
}

td {
  display: table-cell;
  width: 74%;
}

/* Images -----------------------------------------------------------------------------------*/
.img {
  margin-top: 24px;
}

.img + p, .img + dl dt:first-of-type, .img + table {
  margin-top: 24px;
}

.img + ul, .img + ol {
  padding-top: 10px;
}

/* Buttons ----------------------------------------------------------------------------------*/
.btn {
  line-height: 1.4;
}

/* Helper classes ---------------------------------------------------------------------------*/
.float-left {
  float: left;
  margin-right: 24px;
  margin-bottom: 24px;
}

.float-right {
  float: right;
  margin-left: 24px;
  margin-bottom: 24px;
}

.float-left + p, .float-right + p {
  margin-top: 0;
}

/* Responsive utilities ---------------------------------------------------------------------*/
.visible-m {display: none;}
.visible-p {display: block;}

/*-------------------------------------------------------------------------------------------*/
/* Components
/*-------------------------------------------------------------------------------------------*/
/* Page header ------------------------------------------------------------------------------*/
#contents-header {
  padding: 180px 0 0 0; /* +180px */
}

#contents-header .container {
  padding: 52px 0 52px 0;
  max-width: 100%;
  background-color: rgba(255, 255, 255, .1);
}

.clear-header #contents-header .container {
  background-color: transparent;
}

#contents-header h1 {
  background-color: transparent;
  font-size: 1.8rem;
  line-height: 1.3;
  letter-spacing: 0.04rem;
}

#contents-header h1 strong {
  font-size: 2rem;
}

#contents-header h1 small {
  padding: 0 0.5rem;
  font-size: 70%;
}

#contents-header h1 span {
  font-size: 60%;
  padding-bottom: 6px;
}

/* View Header ------------------------------------------------------------------------------*/
.view-header {
  padding: 120px 0;
  border: none;
  background-repeat: repeat;
  background-size: cover;
  box-sizing: border-box;
}

/* Breadcrumbs ------------------------------------------------------------------------------*/
.breadcrumb {
  margin-top: 20px;
  padding-bottom: 12px;
}

/* Page Index -------------------------------------------------------------------------------*/
.page-index {
  margin: 0;
  padding: 0;
  border: none;
}

.page-index p:first-child {
  padding: 1px 0 0 4px;
  border-left: 6px solid #8094a7;
  background-color: transparent;
  cursor: default;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.page-index p.btn-open:before {
  display: none;
}

.page-index p.btn-open:hover {
  background-color: transparent;
  color: #7c7c7c;
}

.page-index .open {
  display: block;
  visibility: visible;
}

.page-index ul, .page-index ol {
  padding-top: 4px;
}

.page-index li {
  margin: 8px 0 0 0;
  width: 100%;
}

.page-index li span {
  display: block;
}

/* Side Nav ---------------------------------------------------------------------------------*/
.side-head {
  margin-top: 40px;
  padding: 0 0 0 2rem;
  border: none;
  color: #262f38;
}

.side-head span:before {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0.05rem;
  font-size: 1.2rem;
}

.side-nav:first-of-type .side-head {
  margin-top: 0;
}

.side-nav ul {
  margin-top: 10px;
  border-bottom: 1px solid #b2b2b2;
}

.side-nav li {
  display: block;
  margin: 0 0 0 0;
  border-top: 1px solid #d9d9d9;
  text-align: left;
}

.side-nav li:first-child {
  border-top: 1px solid #b2b2b2;
}

.side-nav li a, .side-nav li span {
  position: relative;
  padding: 1rem 2rem 1.1rem 1rem;
  border: none;
  background-color: transparent;
  color: #7c7c7c;
  text-align: left;
  line-height: 1.4;
}

.side-nav li a {
  color: #2288ca;
}

.side-nav li a:hover {
  border: none;
}

.side-nav li a:after {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  margin-top: -0.4rem;
  color: #f2f2f2;
  font-family: 'Metrize-Icons';
  speak: none;
  font-size: 0.9rem;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  content: "\e105";
}

.side-nav li a:hover:after {
  right: 0.6rem;
}

.side-nav li ul {
  margin: 0 0 0 1rem;
  padding: 0;
  border: none;
  border-left: 1px solid #d9d9d9;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.side-nav li ul li:first-child {
  border-top: 1px solid #d9d9d9;
}

/* Side Info --------------------------------------------------------------------------------*/
.side-info {
  margin-top: 48px;
  padding: 12px 6% 10px 6%;
}

aside .side-info:first-child {
  margin-top: 0;
}

.side-info p {
  line-height: 1.6;
}

.side-info span {
  display: block;
  padding: 0 0 0.3rem 0;
  font-size: 1.3rem;
  text-align: center;
}

/* Bottom Nav ------------------------------------------------------------------------------*/
.bottom-nav {
  margin-top: 80px;
  border-top: 1px solid #ededed;
  text-align: center;
}

.bottom-nav p {
  color: #262626;
  font-size: 0.8rem;
  font-weight: bold;
}

.bottom-nav ul {
  display: inline-block;
  list-style: none;
}

.bottom-nav li {
  float: left;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1;
}

.bottom-nav li a {
  display: block;
  position: relative;
  margin-right: 8px;
  padding: 0 10px 0 10px;
  border: 2px solid rgba(34, 136, 202, 1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: rgba(34, 136, 202, 1);
  color: #fff;
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  outline: none;
}

.bottom-nav li.active a {
  border: 2px solid rgba(34, 136, 202, 1);
  background-color: #fff;
  color: rgba(34, 136, 202, 1);
  font-weight: bold;
}

.bottom-nav li a:hover {
  border: 2px solid rgba(78, 160, 213, 1);
  background-color: rgba(78, 160, 213, 1);
  color: #fff;
}

.bottom-nav li a:active {
  background-color: rgba(34, 136, 202, 1);
}

.bottom-nav li span {
  display: block;
  position: relative;
  margin-right: 8px;
  padding: 0 10px 0 10px;
  border: 2px solid rgba(217, 217, 217, 1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: rgba(217, 217, 217, 1);
  color: #b2b2b2;
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  outline: none;
}

/* Contents lead & Lead ---------------------------------------------------------------------*/
.contents-lead, .lead {
  margin: 0 0 0 0;
  padding: 40px 6% 0 6%;
}

.lead {
  margin: 32px 0 0 0;
}

.contents-lead > p strong, .lead > p strong {
  font-size: 1.2rem;
  line-height: 1.35;
}

.contents-lead .row, .lead .row {
  margin-top: 12px;
}

/* Form lead */
.form-lead {
  margin: 0 0 48px 0;
}

.form-lead .row {
  margin-top: 12px;
}

.form-lead > p strong {
  font-size: 1.3rem;
}

.form-lead .tel-num, .form-lead .notes {
  display: table-cell;
  vertical-align: middle;
}

.form-lead .tel-num span, .form-lead .notes span {
  display: table-cell;
  width: 350px;
  vertical-align: middle;
}

.form-lead .tel-num a {
  text-decoration: none;
  cursor: default;
}

/* Info Box ----------------------------------------------------------------------------*/
.tile {
  border-left: 12px solid #fff;
  border-right: 12px solid #fff;
}

.info-box {
  position: relative;
  margin-top: 24px;
}

.info-box p {
  margin-top: 14px;
  font-size: 0.9rem;
  line-height: 1.65;
}

.info-box .thumbs {
  display: block;
}

.info-box .head h3, .info-box .head h4, .info-box .head p {
  font-size: clamp(1rem, 0.554rem + 0.89vw, 1.25rem);
}

.info-box .sup {
  margin-right: 12px;
}

.info-box .link {
  margin-top: 0;
}

.info-box .link a {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: transparent;
  color: transparent;
  text-align: right;
}

.info-box .link a:after {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  margin: -47px -1px -1px 0;
  width: 0;
  height: 0;
  border: 24px solid transparent;
  border-bottom-color: rgba(34, 136, 202, 1);
  border-right-color: rgba(34, 136, 202, 1);
  -webkit-border-radius: 0 0 6px 0;
  -moz-border-radius: 0 0 6px 0;
  border-radius: 0 0 6px 0;
  color: #fff;
  font-family: 'Metrize-Icons';
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 19px;
  letter-spacing: 1rem;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  content: "\e109";
  speak: none;
}

.info-box .link a:hover {
  border: 1px solid rgba(167, 207, 234, 1);
  background-color: rgba(255, 255, 255, .2);
  box-shadow: none;
}

.info-box .link a:hover:after {
  border-bottom-color: rgba(78, 160, 213, 1);
  border-right-color: rgba(78, 160, 213, 1);
}

/* Thumbs box ----------------------------------------------------------------------------*/
.thumbs-box .thumbs p {
  height: auto;
}

.thumbs-box .sup {
  margin-right: 8%;
}

.thumbs-box dt {
  padding: 12px 6% 10px 6%;
  text-align: center;
}

.thumbs-box dd {
  margin: 14px 6% 0 6%;
}

/* Wells ------------------------------------------------------------------------------------*/
.wells {
  margin-top: 24px;
  padding: 20px 32px 18px 32px;
}

.wells + p {
  margin-top: 24px;
}

/* Notes ------------------------------------------------------------------------------------*/
.notes {
  font-size: 0.85rem;
}

.notes p {
  font-size: 0.85rem;
}

/* Response ---------------------------------------------------------------------------------*/
.response {
  margin-top: 0px;
  transform: translateY(60px);
}

.response h2 {
  display: block;
  padding: 12px 4% 10px 4%;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  background-color: rgb(128 148 167);
  color: #fff;
  font-size: 1.2rem;
}

.response section {
  padding-top: 24px;
}

.response h3 {
  font-weight: bold;
}

.response h3 + div {
  display: table-cell;
  width: 400px;
  vertical-align: middle;
}

.response p {
  margin-top: 16px;
}

.response .tel-num {
  margin-top: 16px;
  font-size: 1rem;
}

.response .tel-num a {
  color: rgb(90 110 130);
  font-size: 1.6rem;
  text-decoration: none;
  cursor: default;
}

.response .btn {
  font-size: 1rem;
}

/*-------------------------------------------------------------------------------------------*/
}




/*-------------------------------------------------------------------------------------------*/
/* Cloud Technologies
/*-------------------------------------------------------------------------------------------*/
/* Header Mobile ----------------------------------------------------------------------------*/
.toc-m {
  position: relative;
}

.toc-m .logo {
  position: fixed;
  display: block;
  top: 1px;
  left: 4%;
  z-index: 20000;
  margin-top: 12px;
}

.toc-m .logo img {
  width: 100%;
  max-width: 227px;
  max-height: 20px;
}

.toc-m nav {
  display: none;
}

/* Slick Nav */
.slicknav_menu {
  position: fixed;
  box-sizing: border-box;
  z-index: 10000;
  width: 100%;
  background-color: rgb(90 110 130);
  font-size: 1rem;
  *
  zoom: 1;
}

.slicknav_menu:before {
  display: table;
  content: " ";
}

.slicknav_menu:after {
  display: table;
  clear: both;
  content: " ";
}

.slicknav_menu * {
  box-sizing: border-box;
}

.slicknav_btn {
  position: relative;
  display: block;
  vertical-align: middle;
  float: right;
  margin: 6px 4% 6px 0;
  padding: 0.8rem 0.8rem 0.8rem 2rem;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: transparent;
  line-height: 1.125em;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.slicknav_menu .slicknav_icon {
  float: left;
  margin: 0.188em 0 0 0.438em;
}

.slicknav_menu .slicknav_no-text {
  margin: 0;
}

.slicknav_menu .slicknav_icon-bar {
  display: block;
  width: 1.5rem;
  height: 0.125rem;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: #fff;
}

.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
  margin-top: 0.4rem;
}

.slicknav_nav {
  clear: both;
  margin: 0;
  padding: 0;
  background-color: rgb(90 110 130);
  color: #fff;
  font-size: 0.9rem;
  list-style: none;
  overflow: hidden;
}

.slicknav_nav a {
  display: block;
  margin: 2px 5px;
  padding: 12px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
  line-height: 1;
}

.slicknav_nav a:hover {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: rgb(115 140 165);
  color: #fff;
}

.slicknav_nav .slicknav_parent-link a {
  display: inline;
  margin: 0;
  padding: 0;
}

.slicknav_nav ul {
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0 0 0 1rem;
}

.slicknav_nav li {
  display: block;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .5);
}

.slicknav_nav li a span {
  display: inline-block;
  padding-right: 0.5rem;
  font-size: 1.2rem;
  line-height: 1;
  vertical-align: text-bottom;
}

.slicknav_nav li ul {
  border: none;
}

.slicknav_nav .slicknav_row {
  display: block;
}

.slicknav_nav .slicknav_row:hover {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: rgb(115 140 165);
  color: #fff;
}

.slicknav_nav .slicknav_row:hover a {
  background-color: transparent;
}

.slicknav_nav .slicknav_item {
  cursor: pointer;
}

.slicknav_nav .slicknav_item a {
  display: inline;
  position: relative;
  margin: 0;
  padding: 0;
}

.slicknav_nav .slicknav_arrow {
  position: relative;
  top: -0.1rem;
  font-size: 0.8rem;
  margin: 0 0 0 0.5rem;
}

/* Footer -----------------------------------------------------------------------------------*/
/* go-top */
.go-top {
  position: relative;
  margin-top: 0;
}

.go-top a {
  position: relative;
  display: block;
  padding: 1.6rem 3.4rem 1.4rem 2rem;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  background-color: rgb(185 195 205);
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  line-height: 1.3;
}

.go-top a:after {
  position: absolute;
  top: 50%;
  margin-top: -0.45rem;
  padding-left: 0.5rem;
  font-family: 'Metrize-Icons';
  font-size: 1.1rem;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  content: "\e102";
  speak: none;
}

.go-top a:hover:after {
  margin-top: -0.6rem;
}

.go-top a:hover {
  background-color: rgb(78 174 227);
  color: #fff;
}

.go-top a:active {
  background-color: rgba(34, 136, 202, 1);
}

#go-top-bottom a {
  background-color: rgb(30 40 45);
}

/* Footer */
.footer section {
  padding-top: 20px;
}/* h2 */

.footer h2 {
  position: relative;
  margin-left: 1.5rem;
  padding: 0;
  border: none;
  color: rgb(40 50 60);
  font-size: 0.8rem;
  font-weight: bold;
}

.footer h2:before {
  position: absolute;
  top: 0;
  left: -1.5rem;
  font-family: 'Metrize-Icons';
  font-size: 1.1rem;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  speak: none;
}

.footer h2.philosophy:before {content: "\e0a5";}
.footer h2.corporate:before {content: "\e060";}
.footer h2.contact:before {content: "\e08c";}
.footer h2.solutions:before {content: "\e12b";}
.footer h2.social:before {content: "\e002";}
.footer h2.sites:before {content: "\e095";}
.footer h2.recruit:before {content: "\e008";}

.footer p {
  font-size: 0.8rem;
}

.footer li {
  display: inline-block;
  margin: 8px 8px 0 0;
  list-style-type: none;
}

.footer dt {
  margin-top: 12px;
  padding: 0;
  border: none;
  font-weight: normal;
}

.footer dd {
  margin-top: 8px;
  color: rgb(40 50 60);
  font-size: 0.75rem;
  line-height: 1.65;
}

.footer li a, .footer dt a {
  display: block;
  padding: 0.54rem 0.5rem 0.5rem 0.5rem;
  border: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: rgb(224 234 243);
  color: rgb(40 50 60);
  font-size: 0.8rem;
  text-decoration: none;
  text-shadow: none;
  line-height: 1.2;
}

.footer .second dt a {
  background-color: rgba(247, 247, 247, .8);
}

.footer li a:hover, .footer dt a:hover {
  background-color: rgb(5 115 195);
  color: #fff;
}

.footer li a:active, .footer dt a:active {
  background-color: rgb(5 115 195);
  color: #fff;
}

/* First */
.footer .first {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(237, 237, 237, 1);
  background-color: rgb(240 245 250);
}

.footer .first .col dt:first-of-type {
  margin-top: 8px;
}

.footer .facebook {
  margin-top: 8px;
}

/* Second */
.footer .second {
  padding-bottom: 20px;
  border-top: 1px solid rgba(247, 247, 247, 1);
  background-color: rgba(237, 237, 237, 1);
}

.footer .second .container {
  text-align: center;
}

.footer .second h2 {
  display: inline-block;
}

.footer .second .frame {
  margin: 20px auto 0 auto;
  padding: 0 14px 14px 14px;
  max-width: 267px;
  border: 3px solid rgba(217, 217, 217, 1);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  box-shadow: inset 0 0 1rem rgba(255, 255, 255, 1), 0 0 4px rgba(255, 255, 255, 0);
}

.footer .second p, .footer .second dl {
  text-align: center;
}

.footer .second p {
  display: none;
}

.footer .second dt {
  margin-top: 14px;
}

/* Third */
.footer .third {
  padding-bottom: 14px;
  border-top: 1px solid #273037;
  background-color: rgb(40 50 60);
}

.footer .logotype {
  margin-top: 14px;
  text-align: center;
}

.footer .logotype img {
  margin: 0 auto;
  width: 70%;
  max-width: 250px;
}

.footer address {
  margin-top: 14px;
  color: #f7f7f7;
  font-size: 0.8rem;
  font-style: normal;
  text-align: center;
}

.footer address a {
  color: #f7f7f7;
}

.footer .copyright {
  margin-top: 10px;
  color: #f7f7f7;
  text-align: center;
}

/* PC ---------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
@media (min-width: 801px) {
/*-------------------------------------------------------------------------------------------*/
/* Header -----------------------------------------------------------------------------------*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
  overflow: hidden;
  width: 100%;
  height: 80px;
  background-color: rgba(255, 255, 255, .7);
  color: #262626;
  font-weight: bold;
  text-align: left;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.clear-header .header {
  background-color: transparent;
}

.header h1 {
  margin-top: 16px;
  width: 100%;
  font-size: 0.7rem;
  text-align: left;
  line-height: 1.2;
  letter-spacing: -0.08rem;
}

.header .logo {
  margin-top: 6px;
  width: 302px;
  height: 46px;
}

.header .logo a {
  display: block;
  width: 302px;
  height: 46px;
  background: url(https://contact.cloud-tech.co.jp/cti/assets/img/commons/bg-logo-cti.png) center center no-repeat;
}

.header-white .header .logo a {
  background-position: center bottom;
}

.header-black .header .logo a {
  background-position: center top;
}

.header .logo img {
  visibility: hidden;
}

/* Header Nav */
.header .nav-01, .header .nav-02 {
  margin-top: 8px;
  text-align: right;
  -webkit-transition:  all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.header .nav-02 {
  margin-top: 0px;
}

.header .nav-01 li, .header .nav-02 li {
  display: inline-block;
  position: relative;
  margin: 0 0 0 1rem;
  padding-left: 1.3rem;
  color: #262626;
  font-size: 0.8rem;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.header .nav-01 a, .header .nav-02 a {
  color: #262626;
  text-decoration: none;
}

.header .nav-01 a:hover, .header .nav-02 a:hover {
  color: var(--main);
}

.header .nav-01 a:before, .header .nav-01 span:before, .header .nav-02 a:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Metrize-Icons';
  speak: none;
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1.2;
  text-transform: none;
  vertical-align: bottom;
  -webkit-font-smoothing: antialiased;
  -webkit-transition:  all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* Icons */
.header nav a[href="/"]:before {content: "\e126";}
.header nav a[href="/info/"]:before {content: "\e0a4";}
.header nav a[href="/recruit/"]:before {content: "\e008";}
.header nav a[href="/solutions/partner/"]:before {content: "\e0a7";}
.header nav span:before {content: "\e022";}

/* Min Header */
.min-header, .clear-header .min-header {
  height: 45px;
  background-color: #5a6e82;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  color:#fff;
}

.min-header h1 {
  margin-top: 13px;
}

.min-header .logo {
  margin-top: 0;
  width: 227px;
  height: 20px;
}

.min-header .logo a {
  display: block;
  width: 227px;
  height: 20px;
  background: url(../img/commons/img-logo-cti-min.png) no-repeat;
}

.min-header .nav-01 a, .min-header .nav-01 span {
  color: #fff;
}

.min-header .nav-01 a:hover, .min-header .nav-02 a:hover {
  color: #4ea0d5;
}

.min-header .nav-02 {
  margin-top: 30px;
}

/* Header Mobile ----------------------------------------------------------------------------*/
.slicknav_menu {
  display: none;
}

/* TOC --------------------------------------------------------------------------------------*/
.toc {
  clear: both;
  position: fixed;
  top: 80px;
  left: 0;
  z-index: 10000;
  padding: 0;
  width: 100%;
  height: 90px;
  background: rgba(255, 255, 255, .7) url(../img/commons/bg-toc.png) bottom repeat-x;
  font-weight: bold;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.clear-header .toc {
  background-color: transparent;
}

.toc li {
  float: left;
  margin: 0;
  width: 25%;
  list-style-type: none;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.toc a {
  display: block;
  height: 90px;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  color: var(--ibk);
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
}

.toc a span {
  display: inline-block;
}

.toc a:before {
  display: block;
  box-sizing: content-box;
  padding: 14px 0 12px 0;
  width: 100%;
  font-family: 'Metrize-Icons';
  font-size: 2rem;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  speak: none;
  transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  -webkit-transition: all 0.1s ease-in;
}

.toc a[href="/philosophy/"]:before {
  content: "\e0a5";
}

.toc a[href="/corporate/"]:before {
  content: "\e060";
}

.toc a[href="/services/"]:before {
  content: "\e12b";
}

.toc a[href="/recruit/"]:before {
  content: "\e008";
}

.toc a[href="https://contact.cloud-tech.co.jp/index.cgi?type=services_contact"]:before {
  content: "\e08c";
}

.toc a:hover {
  color: var(--main);
  transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
}

.toc a:hover:before {
  padding: 11px 0 15px 0;
  transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  -webkit-transition: all 0.1s ease-in;
}

/* Min TOC */
.min-toc, .clear-header .min-toc {
  top: 45px;
  height: 50px;
  background-color: rgb(255 255 255 / 90%);
  background-image: none;
  color: #333;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.min-toc #toc {
  margin-top: -40px;
}

.min-toc li {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.min-toc a {
  position: relative;
  height: 102px;
  border-bottom: 1px solid transparent;
  color: var(--ibk);
}

.min-toc a:hover {
  border-bottom: 1px solid transparent;
}

.min-toc a:before,.min-toc a:hover:before {
  margin-top: -12px;
  padding: 14px 0 22px 0;
}

.min-toc a:after {
  display: block;
  position: absolute;
  top: 71px;
  left: 50%;
  margin-left: -14px;
  width: 0;
  height: 0;
  border: 14px solid transparent;
  border-top-color: transparent;
  content: "";
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.min-toc a:hover {
  border-bottom: 1px solid transparent;
  background-color: rgb(255 255 255);
  color: var(--main);
}

.min-toc a:hover:after {
/*  top: 102px;*/
/*  border-top-color: rgb(255 255 255);*/
}

/* Header White  -----------------------------------------------------------------------------------*/
/* logo */
.header-white .header h1 {
  color: #fff;
}

/* Header Nav */
.header-white .header .nav-01 li, .header-white .header .nav-02 li {
  color: #fff;
}

.header-white .header .nav-01 a, .header-white .header .nav-02 a {
  color: #fff;
}

.header-white .header .nav-01 a:hover, .header-white .header .nav-02 a:hover {
  color: #fff;
  text-shadow: 0 0 3px rgba(255, 255, 255, .8);
}

/* TOC */
.header-white .toc a {color: #fff;}
.header-white .toc a:hover {
  color: #fff;
  border-bottom: 1px solid #fff;
}

.header-white .toc a:hover:before {
  text-shadow: 0 0 3px rgba(255, 255, 255, .8);
}

.header-white .min-toc a:hover {
  border-bottom: 1px solid transparent;
}

/* Footer -----------------------------------------------------------------------------------*/
.footer h2:before {
  margin-top: -0.1rem;
}

#go-top-bottom {
  position: fixed;
  right: 2%;
  bottom: 2%;
  z-index: 100;
}

#go-top-bottom a {
  overflow: hidden;
  padding: 0;
  width: 80px;
  height: 80px;
  background-color: rgb(90 110 130 / 60%);
  color: transparent;
  font-size: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#go-top-bottom a:after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.6rem 0 0 -0.8rem;
  padding: 0;
  color: #fff;
  font-size: 1.5rem;
}

#go-top-bottom a:hover {
  background-color: rgba(38, 38, 38, .3);
}

#go-top-bottom a:hover:after {
  margin-top: -0.8rem;
}

/* First */
.footer .first {
  padding: 20px 0 40px 0;
}

/* Second */
.footer .second p {
  display: block;
}

.footer .second dt {
  margin-top: 0;
}

/* Third */
.footer .logotype {
  margin-top: 22px;
  text-align: left;
}

.footer .logotype img {
  width: 100%;
}

.footer address {
  text-align: left;
}

.footer address a {
  text-decoration: none;
  cursor: default;
}

.footer .copyright {
  margin-top: 24px;
  text-align: right;
}
  
/* Response ---------------------------------------------------------------------------------*/

.contents .response section:nth-of-type(2) {
  padding-top: 0;
}

/* case ---------------------------------------------------------------------------------*/
  
/* meria */

.meria article {
    padding: 60px 6% 0 6%;
}

.meria .lead_block {
  margin-top: 30px;
  padding: 18px 0% 18px 0%;
  font-size: 1rem;
  font-weight: bold;
}

.meria .lead_block .txt {
  margin-top: 0px;
  font-size: 1rem;
}

.meria .lead_block .txt p {
  margin-top: 0px;
}
  
.meria .lead_block .info-box-list {
  margin-top: 24px;
  padding: 20px 12px;
  border-radius: 4px;
  background-color: #ededed;
}

.meria .lead_block h4 {
  font-size: 1rem;
}
.meria .lead_block h4:not(:first-child) {
  margin-top: 16px;
}

.meria .lead_block li {
  margin-left: 1rem;
}

.meria section {
  padding-top: 60px;
}

.meria .footer section {
  padding-top: 20px;
}

.meria .row + .row {
  margin-top: 20px;
}

.meria .merit {
  margin-top: 24px;
  padding: 20px 12px;
  border-radius: 4px;
  background-color: #e5f7ff;
}

.meria .merit h4 {
  color: #0090cc;
  font-size: 1.3rem;
}

.meria .merit ol {
  margin-top: 18px;
}

.meria .merit li {
  margin-left: 2rem;
}

.meria .merit li p {
  display: inline;
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
}

.meria .cliant_info {
  margin-top: 36px;
}

.meria .cliant_info h4 {
  color: #505050;
}

.meria .cliant_info dd {
  font-size: 0.9rem;
}

.meria .cliant_info .row figure {
  display: block;
  margin-top: 20px;
}
.meria .cliant_info .row figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
}

.meria .img_cliant_logo {
  margin: 0 auto;
  max-width: 200px;
}

.meria #section-03 img {
  margin-top: 30px;
}

.meria #section-03 .row:nth-of-type(2) {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.meria #section-03 .row:nth-of-type(2):after {
  display: none;
}
.meria #section-03 .row:nth-of-type(2) p {
  width: 100%;
}

.meria #section-03 .row:nth-of-type(2) div:nth-of-type(1) {
  order: 2;
}
.meria #section-03 .row:nth-of-type(2) div:nth-of-type(2) {
 order: 1;
}

.meria #section-03 .row:nth-of-type(1) .span-7 {
    margin-top: 0px;
}
/*-------------------------------------------------------------------------------------------*/
}