@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
/* ==========================================================
  reset
========================================================== */
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
div,
p,
form,
blockquote,
pre,
figure {
  margin: 0;
  padding: 0;

  font-size: 100%;
}

div,
p,
form {
  -webkit-text-size-adjust: 100%;
}

/* table
..................................... */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  padding: 0;
}

/* head
..................................... */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;

  font-size: 100%;
}

/* list
..................................... */
ul,
ol,
li,
dl,
dt,
dd {
  margin: 0;
  padding: 0;

  list-style: none;
}

/* image
..................................... */
a img {
  border: 0 none;
}

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

  vertical-align: middle;
}

/* text
..................................... */
em {
  font-style: normal;
}

/* form
..................................... */
button,
input,
textarea {
  resize: none;
  padding: 0;

  background: transparent;

  border: 0 none;
  border-radius: 0;

  -webkit-appearance: none;
}
button:focus,
input:focus,
textarea:focus {
  outline: 0;
}

input,
textarea {
  font-size: 16px;
}

button,
input[type='button'],
input[type='submit'] {
  padding: 0;

  font-size: 1rem;

  background: transparent;

  border-radius: 0;
}

label {
  cursor: pointer;
}

/* smartphone
..................................... */
a,
label {
  -webkit-tap-highlight-color: transparent;
}

/* html
..................................... */
html,
body {
  margin: 0;
  padding: 0;

  -webkit-font-smoothing: antialiased;
}

html[lang='en'] {
  font-family: Helvetica, -apple-system, BlinkMacSystemFont, arial, sans-serif;
}

html[lang='ja'] {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', YuGothic, 'Meiryo', sans-serif;
}

/* ==========================================================
  textsize
  PC: 14px / 16px / 18px
  SP: 14px
========================================================== */
/* PC
--------------------------------------------------------- */
@media only screen and (min-width: 1024px) {
  html {
    font-size: 16px;
  }
  html.text-size-s {
    font-size: 14px;
  }
  html.text-size-s label.text-size-s {
    font-weight: bold;
  }
  html.text-size-m {
    font-size: 16px;
  }
  html.text-size-m label.text-size-m {
    font-weight: bold;
  }
  html.text-size-l {
    font-size: 18px;
  }
  html.text-size-l label.text-size-l {
    font-weight: bold;
  }
  body {
    font-size: 1rem;
  }
}

/* SP
--------------------------------------------------------- */
@media only screen and (max-width: 1023px) {
  html,
  body {
    font-size: 16px;
  }
}

/* ==========================================================
  layout
========================================================== */
/* layout - base
========================================================== */
html,
body {
  position: relative;

  overflow-x: hidden;
  overflow-y: auto;

  min-height: 100%;

  line-height: 1.5;

  color: #333;
  background: #fff;
}

/* PC body
..................................... */
@media only screen and (min-width: 1024px) {
  html,
  body {
    min-width: 1280px;
    min-height: 100vh;
  }
  html.is_touchscreen,
  body.is_touchscreen {
    min-height: 100%;
  }
}

/* TABLET body
..................................... */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  html,
  body {
    min-width: 1024px;
  }
}

/* SP body
..................................... */
@media only screen and (max-width: 1023px) {
  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;

    min-width: initial;
  }
}

/* header
---------------------------------------------------------- */
.layout-header .website-name a {
  overflow: hidden;
  display: block;

  width: 185px;
  height: 0;
}

.layout-header .reader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: block;

  width: 240px;
  min-width: 147px;
}
.layout-header .reader figure {
  position: absolute;

  width: 108px;
  height: 26px;
}

/* PC header
..................................... */
@media only screen and (min-width: 1024px) {
  .layout-header {
    height: 109px;

    font-size: 16px;
  }
  .layout-header::before,
  .layout-header::after {
    content: '';

    position: absolute;
    left: 0;
    right: 0;

    display: block;

    pointer-events: none;
  }
  .layout-header::before {
    z-index: 1;
    top: 59px;

    height: 50px;

    background: -webkit-linear-gradient(top, #034ea1 0%, #00adee 100%);
    background:         linear-gradient(to bottom, #034ea1 0%, #00adee 100%);
  }
  .layout-header::after {
    z-index: 2;
    top: 0;

    height: 58px;

    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .35);
  }
  .layout-header .btn_nav,
  .layout-header nav h2 {
    display: none;
  }
  .layout-header .website-name {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    bottom: auto;

    display: block;

    width: 1280px;
    max-width: calc(100% - 2rem);
    height: 0;
    margin: 0 auto;
  }
  .layout-header .website-name a {
    padding: 75px 0 0;

    background: url("../img/logo_santen.svg") no-repeat;
  }
  .layout-header .website-name {
    z-index: 11;
  }
  .layout-header .website-name::before {
    content: '';

    position: absolute;
    top: 0;
    top: 56px;
    left: 0;
    right: 0;
    right: auto;
    bottom: 0;
    bottom: auto;

    display: block;

    width: 270px;
    height: 72px;

    background: url("../img/bg_logo-santen.svg") no-repeat;
  }
  .layout-header .website-name a {
    position: relative;
    z-index: 5;
    top: 17px;
    left: 46px;
  }
  .layout-header .reader {
    bottom: auto;

    width: 1280px;
    max-width: calc(100% - 2rem);
    height: 0;
    margin: 0 auto;
    padding-left: 436px;
  }
  .layout-header .reader .rsbtn {
    position: relative;
    top: 16px;

    max-width: 240px;
  }
  .layout-header .reader .rsbtn.rsplaying {
    top: 8px;
  }
  .layout-header .reader .rsbtn.rsplaying .rsbtn_powered {
    padding-top: 6px;

    white-space: nowrap;
  }
}

/* TABLET header
..................................... */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .layout-header {
    -webkit-tap-highlight-color: transparent;
  }
  .layout-header,
  .layout-header .website-name {
    width: 1024px;
    margin: 0 auto;
  }
  .layout-header {
    height: 148px;
  }
  .layout-header::before {
    top: 98px;
  }
  .layout-header::after {
    height: 98px;
  }
  .layout-header .website-name::before {
    content: none;
  }
  .layout-header .website-name a {
    top: 12px;
    left: 0;
  }
  .layout-header .reader {
    width: 1024px;
    margin: 0 auto;
    padding-left: 240px;
  }
  .layout-header .reader .rsbtn {
    top: 54px;
  }
  .layout-header .reader .rsbtn.rsplaying {
    top: 46px;
  }
}

/* SP header
..................................... */
@media only screen and (max-width: 1023px) {
  .layout-header {
    min-height: 50px;
  }
  .layout-header .website-name {
    height: 50px;
    padding: 11px;

    border-bottom: 1px solid #ccc;
  }
  .layout-header .website-name a {
    padding: 28px 0 0;

    background: url("../img/logo_santen-sp.svg") no-repeat;
  }
  .layout-header .btn_nav {
    position: absolute;
    z-index: 1;
    top: 0;
    top: 0;
    left: 0;
    left: auto;
    right: 0;
    right: 0;
    bottom: 0;
    bottom: auto;

    display: block;
    display: block;

    width: 50px;
    height: 50px;

    background: url("../img/btn_navi.svg") no-repeat;
    background-size: auto auto;
  }
  .layout-header .btn_nav.is_open {
    position: absolute;
    top: 0;
    left: 0;
    left: auto;
    right: 0;
    bottom: 0;
    bottom: auto;

    display: block;

    width: 36px;
    height: 36px;
    margin: 6px;

    background-size: 0 0;
  }
  .layout-header .btn_nav.is_open::before,
  .layout-header .btn_nav.is_open::after {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    left: -6px;
    right: 0;
    right: -6px;
    bottom: 0;

    display: block;

    width: 30px;
    height: 0;
    margin: auto;

    border-top: 2px solid #333;
  }
  .layout-header .btn_nav.is_open::before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .layout-header .btn_nav.is_open::after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .layout-header .reader {
    left: 235px;
    bottom: auto;
  }
  .layout-header .reader .rsbtn {
    z-index: 1;
    top: 12px;
  }
  .layout-header .reader .rsbtn.rsplaying {
    top: 8px;
  }
}

/* SP header
..................................... */
@media only screen and (max-width: 639px) {
  .layout-header {
    min-height: 108px;
  }
  .layout-header .reader {
    position: static;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 58px;
    padding: 0 12px;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .layout-header .reader .rsbtn {
    top: 0;

    margin-bottom: 0;
  }
  .layout-header .reader .rsbtn.rsplaying {
    top: 0;
  }
}

/* navigation
---------------------------------------------------------- */
.layout-navigation .nav_global a[role='button'] {
  overflow: hidden;

  width: 220px;
  height: 40px;

  font-family: Raleway;
}

.layout-navigation .nav_global .global-footer {
  display: block;

  margin-top: -15px;
}
.layout-navigation .nav_global .global-footer::after {
  content: '';

  clear: both;
  display: block;
}
.layout-navigation .nav_global .global-footer label {
  float: right;

  color: #444;

  cursor: pointer;
}

/* PC navigation
..................................... */
@media only screen and (min-width: 1024px) {
  .layout-navigation {
    font-size: 16px;
  }
  .layout-navigation .text-size,
  .layout-navigation .nav_category,
  .layout-navigation .nav_guide,
  .layout-navigation .search {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    bottom: auto;

    display: block;

    width: 1280px;
    max-width: calc(100% - 2rem);
    height: 0;
    margin: 0 auto;
  }
  .layout-navigation .text-size {
    z-index: 4;
  }
  .layout-navigation .text-size dt,
  .layout-navigation .text-size dd {
    position: relative;
    top: 19px;

    float: left;

    vertical-align: middle;
  }
  .layout-navigation .text-size dt {
    padding-left: 270px;
  }
  .layout-navigation .text-size dd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    height: 20px;

    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .layout-navigation .text-size dd input[type='radio'] {
    display: none;
  }
  .layout-navigation .text-size dd label {
    position: relative;

    float: left;
    display: inline-block;

    padding: 0 6px;

    line-height: 1;
  }
  .layout-navigation .text-size dd label:hover {
    text-decoration: underline;
  }
  .layout-navigation .text-size dd label.text-size-s {
    position: relative;
    bottom: 1px;

    font-size: 14px;
  }
  .layout-navigation .text-size dd label.text-size-m {
    padding: 0 9px;

    font-size: 16px;
  }
  .layout-navigation .text-size dd label.text-size-m::before,
  .layout-navigation .text-size dd label.text-size-m::after {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: block;

    width: 0;
    height: 16px;

    border-left: 1px solid #333;
  }
  .layout-navigation .text-size dd label.text-size-m::before {
    right: auto;
  }
  .layout-navigation .text-size dd label.text-size-m::after {
    left: auto;
  }
  .layout-navigation .text-size dd label.text-size-l {
    font-size: 18px;
  }
  .layout-navigation .nav_category {
    z-index: 10;
    top: 59px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;

    height: 50px;

    -webkit-box-pack: end;
    -ms-flex-pack: end;
  }
  .layout-navigation .nav_category > li::before {
    content: '';

    float: left;
    display: block;

    width: 0;
    height: 20px;
    margin: 15px 0 0 -1px;

    border-left: 1px solid #00adee;
  }
  .layout-navigation .nav_category > li:first-child::before {
    content: none;
  }
  .layout-navigation .nav_category > li > a {
    position: relative;

    display: inline-block;

    height: 50px;

    font-weight: bold;
    line-height: 50px;

    color: #fff;
  }
  .layout-navigation .nav_category > li > a::after {
    content: '';

    position: absolute;
    z-index: 2;
    top: 0;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    bottom: auto;

    display: block;
    display: none;

    width: 0;
    height: 0;
    margin: auto;

    border-top: 15px solid;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
  }
  .layout-navigation .nav_category > li > a:last-child::after {
    content: none;
  }
  .layout-navigation .nav_category > li > a:hover {
    text-decoration: none;
  }
  .layout-navigation .nav_category > li.id_health:hover > a,
  .layout-navigation .nav_category > li.id_health dt a {
    background: #36318f;
  }
  .layout-navigation .nav_category > li.id_health:hover > a::after {
    border-top-color: #36318f;
  }
  .layout-navigation .nav_category > li.id_ir:hover > a,
  .layout-navigation .nav_category > li.id_ir dt a {
    background: #00a1a8;
  }
  .layout-navigation .nav_category > li.id_ir:hover > a::after {
    border-top-color: #00a1a8;
  }
  .layout-navigation .nav_category > li.id_medical:hover > a,
  .layout-navigation .nav_category > li.id_medical dt a {
    background: #ce0080;
  }
  .layout-navigation .nav_category > li.id_medical:hover > a::after {
    border-top-color: #ce0080;
  }
  .layout-navigation .nav_category > li.id_recruit:hover > a,
  .layout-navigation .nav_category > li.id_recruit dt a {
    background: #ce0080;
  }
  .layout-navigation .nav_category > li.id_recruit:hover > a::after {
    border-top-color: #ce0080;
  }
  .layout-navigation .nav_category > li.id_csr:hover > a,
  .layout-navigation .nav_category > li.id_csr dt a {
    background: #f08300;
  }
  .layout-navigation .nav_category > li.id_csr:hover > a::after {
    border-top-color: #f08300;
  }
  .layout-navigation .nav_category > li.id_about:hover > a,
  .layout-navigation .nav_category > li.id_about dt a {
    background: #00a33e;
  }
  .layout-navigation .nav_category > li.id_about:hover > a::after {
    border-top-color: #00a33e;
  }
  .layout-navigation .nav_category > li > dl {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;

    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 1094px;
    height: 0;
    margin: 0 auto;

    background: #fff;

    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .35);

    -webkit-transition: height 350ms ease-in-out;
            transition: height 350ms ease-in-out;
  }
  .layout-navigation .nav_category > li > dl dt {
    width: 305px;
  }
  .layout-navigation .nav_category > li > dl dt a {
    display: block;

    width: 305px;
    height: 280px;
    padding: 48px 0 0 40px;

    font-size: 40px;
    line-height: 50px;

    text-decoration: none;

    color: #fff;
  }
  .layout-navigation .nav_category > li > dl dt a::after {
    content: '\00203a\00203a';

    display: inline;

    font-family: Raleway;

    -webkit-transition: 350ms;
            transition: 350ms;
  }
  .layout-navigation .nav_category > li > dl dt a:hover::after {
    margin-left: .5rem;

    letter-spacing: -.1em;
  }
  .layout-navigation .nav_category > li > dl dd {
    height: 280px;
  }
  .layout-navigation .nav_category > li > dl dd ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 669px;
    height: 229px;
    margin: 51px 60px 0;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
  }
  .layout-navigation .nav_category > li > dl dd ul li {
    display: block;

    width: 223px;
    margin: 0 0 48px;

    font-weight: bold;

    color: #034ea1;
  }
  .layout-navigation .nav_category > li > dl dd ul li a {
    font-weight: bold;

    white-space: nowrap;
  }
  .layout-navigation .nav_category > li:hover > a {
    position: relative;
  }
  .layout-navigation .nav_category > li:hover > a::after {
    display: block;
  }
  .layout-navigation .nav_category > li:hover > dl {
    height: 280px;
  }
  .layout-navigation .nav_guide {
    z-index: 4;
    top: 19px;

    padding-right: 180px;

    text-align: right;
  }
  .layout-navigation .nav_guide li {
    display: inline-block;
  }
  .layout-navigation .nav_guide li ~ li::before {
    content: '/';

    display: inline-block;

    margin: 0 .5em;
  }
  .layout-navigation .nav_guide li label::before {
    content: '';

    display: inline-block;

    width: 16px;
    height: 16px;
    margin-right: 8px;

    vertical-align: text-top;

    background: url("../img/ico_global-dark.svg") no-repeat;
  }
  .layout-navigation .nav_guide li label:hover {
    text-decoration: underline;
  }
  .layout-navigation .nav_guide li a {
    color: #333;
  }
  .layout-navigation .nav_global {
    position: absolute;
    z-index: 9;
    top: 0;
    top: 109px;
    left: 0;
    right: 0;
    bottom: 0;
    bottom: auto;

    overflow: hidden;
    display: block;

    height: 0;

    background: -webkit-linear-gradient(top, #c3eef9 0%, #fff 25%);
    background:         linear-gradient(to bottom, #c3eef9 0%, #fff 25%);

    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .35);

    -webkit-transition: height 350ms ease-in-out;
            transition: height 350ms ease-in-out;
  }
  .layout-navigation .nav_global .column {
    position: relative;
  }
  .layout-navigation .nav_global .column .global-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        flex-direction: column;
        flex-direction: row;
    justify-content: space-between;
    justify-content: flex-end;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -ms-flex-direction: row;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
  }
  .layout-navigation .nav_global .column .global-header h2,
  .layout-navigation .nav_global .column .global-header label {
    display: none;
  }
  .layout-navigation .nav_global .column .global-header a[role='button'] {
    display: block;

    margin: 24px 0 0 1rem;

    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
  }
  .layout-navigation .nav_global .global-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        flex-direction: column;

    height: 405px;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  .layout-navigation .nav_global dl {
    width: 464px;
  }
  .layout-navigation .nav_global dl dt,
  .layout-navigation .nav_global dl dd {
    font-size: 16px;
  }
  .layout-navigation .nav_global dl dt br {
    display: none;
  }
  .layout-navigation .nav_global dl dt {
    margin: 4px 0 8px;

    font-weight: bold;
  }
  .layout-navigation .nav_global dl dd li {
    margin: 0 0 10px 10px;
  }

  .layout-navigation .nav_global dl:last-child {
    width: auto;

    -webkit-column-break-before: always;
    page-break-before: always;
    break-before: always;
  }
  .layout-navigation .nav_global dl:last-child ul {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
  .layout-navigation .nav_global dl:last-child ul li {
    margin-bottom: 14px;
  }
  .layout-navigation .search {
    z-index: 3;
    top: 18px;

    text-align: right;
  }
  .layout-navigation .search form {
    display: inline;
  }
  .layout-navigation .search input {
    width: 127px;
    height: 22px;

    vertical-align: middle;
  }
  .layout-navigation .search button {
    width: 20px;
    height: 20px;
    margin-left: 3px;

    vertical-align: middle;

    background: url("../img/ico_search.svg") no-repeat;

    cursor: pointer;
  }
}

/* TABLET navigation
..................................... */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .layout-navigation,
  .layout-navigation .nav_category,
  .layout-navigation .nav_guide,
  .layout-navigation .nav_global,
  .layout-navigation .text-size,
  .layout-navigation .search {
    width: 1024px;
  }
  .layout-navigation .nav_guide,
  .layout-navigation .search {
    top: 36px;
  }
  .layout-navigation .nav_category {
    top: 98px;

    justify-content: center;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
  }
  .layout-navigation .nav_category > li:hover > a::after {
    content: none;
  }
  .layout-navigation .nav_category > li > dl {
    width: calc(100% - 2rem);
  }
  .layout-navigation .nav_category > li > dl dd ul {
    width: 535px;
    margin: 51px 48px;
  }
  .layout-navigation .nav_category > li > dl dd ul li {
    width: auto;
  }
  .layout-navigation .nav_global {
    top: 148px;

    width: 100%;
  }
  .layout-navigation .nav_global .column .global-header {
    height: auto;
  }
  .layout-navigation .nav_global .column .global-header a[role='button'] {
    margin-top: 16px;
  }
  .layout-navigation .nav_global .global-body {
    height: 380px;
  }
  .layout-navigation .nav_global dl {
    width: 33.3%;
  }
  .layout-navigation .nav_global dl:last-child ul li {
    margin-bottom: 16px;
  }
  .layout-navigation .nav_global dl dd {
    font-size: 14px;
    line-height: 1.3;
  }
  .layout-navigation .nav_global dl dd ul {
    padding: 4px 0;
  }
  .layout-navigation .nav_global dl dd ul li {
    margin-bottom: 6px;
  }
  .layout-navigation .text-size dt {
    padding-left: 240px;
  }
}

/* SP navigation
..................................... */
@media only screen and (max-width: 1023px) {
  .layout-navigation {
    background: #e5e5e5;
  }
  .layout-navigation .text-size {
    display: none;
  }
  .layout-navigation .nav_category {
    border-top: 1px solid #034ea1;
  }
  .layout-navigation .nav_category > li {
    border-bottom: 1px solid #034ea1;
  }
  .layout-navigation .nav_category > li a,
  .layout-navigation .nav_category > li > label {
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 48px;
    padding: 0 7.5%;

    font-weight: bold;

    color: #333;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .layout-navigation .nav_category > li a::after,
  .layout-navigation .nav_category > li > label::after {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    left: auto;
    right: 0;
    right: 7.5%;
    bottom: 0;

    display: block;

    width: 14px;
    height: 14px;
    margin: auto;

    border: solid #034ea1;

    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
  .layout-navigation .nav_category > li > a::after {
    border-width: 1px 1px 0 0;
  }
  .layout-navigation .nav_category > li input[id^='toggle'] {
    display: none;
  }
  .layout-navigation .nav_category > li input[id^='toggle'] ~ label::after {
    bottom: 4px;

    margin-right: -3px;

    border-width: 0 1px 1px 0;
  }
  .layout-navigation .nav_category > li input[id^='toggle'] ~ ul {
    display: none;
  }
  .layout-navigation .nav_category > li input[id^='toggle']:checked ~ ul {
    display: block;
  }
  .layout-navigation .nav_category > li input[id^='toggle']:checked ~ label::after {
    top: 8px;
    bottom: 0;

    border-width: 1px 0 0 1px;
    border-color: #fff;
  }
  .layout-navigation .nav_category > li.is_current > a {
    text-decoration: none;

    color: #fff;
    background: #00adee;
  }
  .layout-navigation .nav_category > li.is_current > a::after {
    border-color: #fff;
  }
  .layout-navigation .nav_category > li > input:checked ~ label,
  .layout-navigation .nav_category > li.is_current > label {
    text-decoration: none;

    color: #fff;
    background: #00adee;
  }
  .layout-navigation .nav_category > li > input:checked ~ label::after,
  .layout-navigation .nav_category > li.is_current > label::after {
    border-color: #fff;
  }
  .layout-navigation .nav_category > li > ul > li.is_current a,
  .layout-navigation .nav_category > li > ul > li a:hover {
    text-decoration: none;

    color: #333;
    background: rgba(0, 173, 238, .15);
  }
  .layout-navigation .nav_category > li > ul > li.is_current a::after,
  .layout-navigation .nav_category > li > ul > li a:hover::after {
    border-color: #034ea1;
  }
}
@media only screen and (max-width: 1023px) and (min-width: 1024px) {
  .layout-navigation .nav_category > li > a:hover,
  .layout-navigation .nav_category > li > label:hover {
    text-decoration: none;

    color: #fff;
    background: #00adee;
  }
  .layout-navigation .nav_category > li > a:hover::after,
  .layout-navigation .nav_category > li > label:hover::after {
    border-color: #fff;
  }
}

@media only screen and (max-width: 1023px) {
  .layout-navigation .nav_category > li > dl {
    display: none;
  }
  .layout-navigation .nav_guide {
    z-index: 3;
  }
  .layout-navigation .nav_guide a,
  .layout-navigation .nav_guide label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;

    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 36px;

    color: #fff;
    background: #034ea1;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
  }
  .layout-navigation .nav_guide label::before {
    content: '';

    display: inline-block;

    width: 16px;
    height: 16px;
    margin-right: 6px;

    vertical-align: text-top;

    background: url("../img/ico_global-light.svg") no-repeat;
  }
  .layout-navigation .nav_guide li ~ li {
    margin-top: 1px;
  }
  .layout-navigation .nav_global {
    position: absolute;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: block;

    padding: 10px 0;

    background: rgba(51, 51, 51, .8);
  }
  .layout-navigation .nav_global .column {
    position: absolute;
    top: 0;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    bottom: 10px;

    display: block;

    padding: 0 20px;

    background: #fff;
  }
  .layout-navigation .nav_global .global-header h2 {
    padding: 12px 0 18px;

    font-size: 22px;
    font-weight: normal;
  }
  .layout-navigation .nav_global .global-header h2::before {
    content: '';

    display: inline-block;

    width: 20px;
    height: 20px;
    margin-right: 16px;

    vertical-align: text-top;

    background: url("../img/ico_global-dark.svg") no-repeat;
  }
  .layout-navigation .nav_global .global-header .btn_close {
    position: absolute;
    top: 0;
    left: 0;
    left: auto;
    right: 0;
    bottom: 0;
    bottom: auto;

    display: block;

    width: 36px;
    height: 36px;
    margin: 12px;
  }
  .layout-navigation .nav_global .global-header .btn_close::before,
  .layout-navigation .nav_global .global-header .btn_close::after {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    left: -6px;
    right: 0;
    right: -6px;
    bottom: 0;

    display: block;

    width: 30px;
    height: 0;
    margin: auto;

    border-top: 2px solid #333;
  }
  .layout-navigation .nav_global .global-header .btn_close::before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .layout-navigation .nav_global .global-header .btn_close::after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .layout-navigation .nav_global .global-header a[role='button'] {
    display: block;

    margin-bottom: 5px;

    font-size: 12px;
  }
  .layout-navigation .nav_global .global-body {
    position: absolute;
    top: 0;
    top: 157px;
    left: 0;
    right: 0;
    bottom: 0;
    bottom: 26px;

    overflow-x: hidden;
    overflow-y: auto;
    display: block;

    -webkit-overflow-scrolling: touch;
  }
  .layout-navigation .nav_global .global-body dt,
  .layout-navigation .nav_global .global-body dd {
    display: block;

    font-weight: bold;
    line-height: 22px;
  }
  .layout-navigation .nav_global .global-body dl {
    margin: 0 12px 0 24px;
  }
  .layout-navigation .nav_global .global-body dl dt {
    margin-top: 10px;
  }
  .layout-navigation .nav_global .global-body dl dd li {
    margin-top: 10px;
    margin-left: 10px;
  }
  .layout-navigation .nav_global .global-footer {
    display: none;
  }
  .layout-navigation .search {
    padding: 18px 16px 26px;
  }
  .layout-navigation .search form {
    position: relative;

    display: block;

    height: 40px;
  }
  .layout-navigation .search form input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    right: 48px;
    bottom: 0;

    display: block;

    width: calc(100% - 42px);
    height: 40px;

    background: #fff;

    border: 1px solid #333;
  }
  .layout-navigation .search form button {
    position: absolute;
    top: 0;
    left: 0;
    left: auto;
    right: 0;
    bottom: 0;

    display: block;

    width: 30px;
    height: 30px;
    margin: auto 0;

    background: url("../img/ico_search.svg") no-repeat;
  }
}

/* navigation display mode
---------------------------------------------------------- */
/* navi toggle trigger */
.toggle_nav,
.toggle_nav-global {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: block;
  display: none;
}

/* SP navi
..................................... */
@media only screen and (max-width: 1023px) {
  .layout-navigation {
    display: none;
  }
  .toggle_nav:checked + .layout-navigation {
    display: block;
  }
}

/* gloval menu list
..................................... */
@media only screen and (min-width: 1024px) {
  .layout-header .nav_global {
    height: 0;
  }
  .toggle_nav-global:checked + .nav_global {
    height: 492px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .toggle_nav-global:checked + .nav_global {
    height: 460px;
  }
}

@media only screen and (max-width: 1023px) {
  .layout-navigation .nav_global {
    display: none;
  }
  .layout-navigation .toggle_nav-global:checked + .nav_global {
    z-index: 999;

    display: block;
  }
}

/* body
---------------------------------------------------------- */
/* PC body
..................................... */
@media only screen and (min-width: 1024px) {
  .layout-body {
    width: 1280px;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
    padding-bottom: 44px;
  }
  .layout-body::after {
    content: '';

    clear: both;
    display: table;
  }
}

/* TABLET body
..................................... */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .layout-body {
    width: 100%;
    max-width: initial;
    max-width: auto;
  }
}

/* footer
---------------------------------------------------------- */
.layout-footer {
  color: #fff;
  background: -webkit-linear-gradient(top, #034ea1 0%, #00adee 100%);
  background:         linear-gradient(to bottom, #034ea1 0%, #00adee 100%);
}
.layout-footer ul li {
  display: inline-block;
}
.layout-footer ul li a {
  color: #fff;
}
.layout-footer ul li ~ li::before {
  content: '|';

  display: inline-block;

  margin: 0 1em;
}
.layout-footer .copyright {
  word-break: keep-all;
}

/* PC footer
..................................... */
@media only screen and (min-width: 1024px) {
  .layout-footer {
    position: absolute;
    z-index: 10;
    bottom: 0;

    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;

    width: 100%;
    height: 44px;

    font-size: 16px;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
  }
  .layout-footer ul {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: block;

    width: 1280px;
    max-width: calc(100% - 2rem);
    height: 0;
    margin: 0 auto;
  }
  .layout-footer ul li {
    line-height: 44px;
  }
  .layout-footer .copyright {
    margin-right: 1rem;
  }
}

/* SP footer
..................................... */
@media only screen and (max-width: 1023px) {
  .layout-footer {
    font-size: 14px;

    text-align: center;
  }
  .layout-footer .copyright {
    margin-top: 30px;
  }
}

/* layout - General page
========================================================== */
/* breadcrumb
---------------------------------------------------------- */
.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  width: 100%;
  height: 48px;
  padding-top: 8px;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.breadcrumb ul {
  padding: 0 3rem;
}
.breadcrumb ul li {
  display: inline-block;

  font-size: .875rem;
}
.breadcrumb ul li ~ li::before {
  content: '>';

  margin: 0 1.5em;
}
.breadcrumb ul li a {
  color: #333;
}

/* SP breadcrumb
..................................... */
@media only screen and (max-width: 1023px) {
  .breadcrumb {
    display: none;
  }
}

/* page - layout
---------------------------------------------------------- */
/* PC main
..................................... */
@media only screen and (min-width: 1024px) {
  .page-main {
    position: relative;
    z-index: 1;

    float: right;

    width: 980px;
    max-width: calc(100% - 300px);
    padding-left: 48px;
  }
  .page-aside {
    position: relative;
    z-index: 2;

    float: left;

    width: 300px;
    padding-bottom: 48px;
  }
}

/* TABLET main
..................................... */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .page-main {
    padding-left: 30px;
  }
  .page-aside {
    float: left;

    width: 300px;
  }
}

/* page - headline
---------------------------------------------------------- */
/* PC main
..................................... */
@media only screen and (min-width: 1024px) {
  .hd_page {
    margin-bottom: 1em;

    font-size: 1.5625rem;

    color: #034ea1;
  }
}

/* SP main
..................................... */
@media only screen and (max-width: 1023px) {
  .hd_page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;

    width: 100%;
    height: 44px;

    font-size: 1rem;

    text-align: center;

    color: #333;
    background: #f2f2f2;

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

/* navigation
---------------------------------------------------------- */
.nav_main {
  background: #fff;
}
.nav_main .hd_nav-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;

  width: 100%;
  height: 40px;

  color: #fff;
  background: #034ea1;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.nav_main ul {
  border-top: 1px solid #034ea1;
}
.nav_main ul > li {
  border-bottom: 1px solid #034ea1;
}
.nav_main ul > li a,
.nav_main ul > li > label {
  position: relative;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  width: 100%;
  height: 48px;
  padding: 0 7.5%;

  font-weight: bold;

  color: #333;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.nav_main ul > li a::after,
.nav_main ul > li > label::after {
  content: '';

  position: absolute;
  top: 0;
  left: 0;
  left: auto;
  right: 0;
  right: 7.5%;
  bottom: 0;

  display: block;

  width: 14px;
  height: 14px;
  margin: auto;

  border: solid #034ea1;

  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.nav_main ul > li > a::after {
  border-width: 1px 1px 0 0;
}
.nav_main ul > li input[id^='toggle'] {
  display: none;
}
.nav_main ul > li input[id^='toggle'] ~ label::after {
  bottom: 4px;

  margin-right: -3px;

  border-width: 0 1px 1px 0;
}
.nav_main ul > li input[id^='toggle'] ~ ul {
  display: none;
}
.nav_main ul > li input[id^='toggle']:checked ~ ul {
  display: block;
}
.nav_main ul > li input[id^='toggle']:checked ~ label::after {
  top: 8px;
  bottom: 0;

  border-width: 1px 0 0 1px;
  border-color: #fff;
}
.nav_main ul > li.is_current > a {
  text-decoration: none;

  color: #fff;
  background: #00adee;
}
.nav_main ul > li.is_current > a::after {
  border-color: #fff;
}
.nav_main ul > li > input:checked ~ label,
.nav_main ul > li.is_current > label {
  text-decoration: none;

  color: #fff;
  background: #00adee;
}
.nav_main ul > li > input:checked ~ label::after,
.nav_main ul > li.is_current > label::after {
  border-color: #fff;
}
.nav_main ul > li > ul > li.is_current a,
.nav_main ul > li > ul > li a:hover {
  text-decoration: none;

  color: #333;
  background: rgba(0, 173, 238, .15);
}
.nav_main ul > li > ul > li.is_current a::after,
.nav_main ul > li > ul > li a:hover::after {
  border-color: #034ea1;
}
@media only screen and (min-width: 1024px) {
  .nav_main ul > li > a:hover,
  .nav_main ul > li > label:hover {
    text-decoration: none;

    color: #fff;
    background: #00adee;
  }
  .nav_main ul > li > a:hover::after,
  .nav_main ul > li > label:hover::after {
    border-color: #fff;
  }
}
.nav_main ul ul li:last-child {
  border-bottom: none;
}
.nav_main ul ul li.is_current a {
  pointer-events: none;

  background-color: rgba(0, 173, 238, .15);
}
.nav_main ul ul li.is_current a::after {
  border-color: #034ea1;
}

/* PC navigation
..................................... */
@media only screen and (min-width: 1024px) {
  .nav_main ul {
    border-top: 1px solid #ccc;
  }
  .nav_main ul li {
    border-bottom: 1px solid #ccc;
  }
  .nav_main ul li > a,
  .nav_main ul li > label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 65px;
    padding: 0 3rem;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .nav_main ul li > a::after,
  .nav_main ul li > label::after {
    right: 16px;
  }
  .nav_main ul li ul li a {
    height: 48px;
    padding-left: 4rem;
  }
}

/* PC navigation
..................................... */
@media only screen and (max-width: 1023px) {
  .nav_main ul li ul li a {
    padding-left: 15%;
  }
}

/* banner
---------------------------------------------------------- */
/* [component] aside-banner
---------------------------------------------------------- */
.aside-banner {
  display: block;

  padding: 10px;

  background: rgba(0, 173, 238, .15);

  border-radius: 4px;
}
.aside-banner img {
  width: 100%;
}
.aside-banner li ~ li {
  margin-top: 10px;
}
.aside-banner .movie {
  position: relative;
  z-index: 0;

  overflow: hidden;
}
.aside-banner .movie a {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  overflow: hidden;
  display: block;

  height: 0;
  padding: 24.39% 0 0;
}
.aside-banner .movie figure {
  z-index: 0;
}

/* PC aside-banner
..................................... */
@media only screen and (min-width: 1024px) {
  .aside-banner {
    margin: 20px auto;
  }
  .aside-banner .movie a.is_pc {
    display: block;
  }
  .aside-banner .movie a.is_sp {
    display: none;
  }
}

/* SP aside-banner
..................................... */
@media only screen and (max-width: 1023px) {
  .aside-banner {
    width: 85%;
    margin: 1rem auto;
  }
  .aside-banner .movie a.is_pc {
    display: none;
  }
  .aside-banner .movie a.is_sp {
    display: block;
  }
}

/* contact
---------------------------------------------------------- */
/* [component] aside-contact
---------------------------------------------------------- */
.aside-contact {
  border: 1px solid #e5e5e5;
}
.aside-contact .hd_aside-contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;

  width: 100%;
  height: 36px;
  min-height: initial;
  min-height: auto;

  font-size: 1.125rem;
  font-weight: bold;

  background: #f2f2f2;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.aside-contact .body p {
  margin: .5em 0;

  font-size: 1.125rem;
}
.aside-contact .body a[role='button'] {
  overflow: hidden;
  display: block;

  height: 48px;
  margin-top: 10px;
}
.aside-contact .body a[role='button']::before {
  height: 44px;
}

/* PC aside
..................................... */
@media only screen and (min-width: 1024px) {
  .aside-contact .body {
    padding: 10px;
  }
}

/* SP aside
..................................... */
@media only screen and (max-width: 1023px) {
  .aside-contact {
    width: 85%;
    margin: 1rem auto;
  }
  .aside-contact .body {
    width: auto;
    padding: 1rem;
  }
}

/* ==========================================================
  general
========================================================== */
/* link
--------------------------------------------------------- */
a {
  text-decoration: none;

  color: #034ea1;
}

a.is_disabled {
  pointer-events: none;

  cursor: default;
}

/* PC link
..................................... */
@media only screen and (min-width: 1024px) {
  a:hover {
    text-decoration: underline;
  }
  .is_touchscreen *:hover {
    text-decoration: none !important;
  }
}

/* rollover
--------------------------------------------------------- */
/* PC rollover
..................................... */
@media only screen and (min-width: 1024px) {
  .rollover {
    position: relative;
  }
  .rollover::after {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: block;

    border: 1px solid #034ea1;

    opacity: 0;

    box-shadow: 0 0 0 1px #fff inset;

    -webkit-transition: 350ms;
            transition: 350ms;
  }
  .rollover:hover::after {
    opacity: 1;
  }
}

/* button
--------------------------------------------------------- */
a[role='button'][data-text] {
  position: relative;

  display: inline-block;

  height: 40px;
  padding: 2px;

  font-weight: bold;

  color: #fff;
  background: -webkit-linear-gradient(top, #00adee 0%, #034ea1 100%);
  background:         linear-gradient(to bottom, #00adee 0%, #034ea1 100%);

  border-radius: 4px;
}
a[role='button'][data-text]::before {
  content: attr(data-text);

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;

  width: 100%;
  height: 36px;
  padding: 0 2em 0 1em;

  color: #fff;
  background: -webkit-linear-gradient(top, #034ea1 0%, #00adee 100%);
  background:         linear-gradient(to bottom, #034ea1 0%, #00adee 100%);

  border-radius: 2px;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
a[role='button'][data-text]::after {
  content: '\00203a\00203a';

  position: absolute;
  top: 0;
  left: 0;
  left: auto;
  right: 0;
  bottom: 0;

  display: block;

  width: 1rem;
  height: 1rem;
  margin: auto 1rem;

  font-family: Raleway;
  line-height: 1;

  -webkit-transition: 350ms;
          transition: 350ms;
}
a[role='button'][data-text]:hover {
  text-decoration: none;
}
a[role='button'][data-text]:hover::after {
  margin-right: .75rem;

  letter-spacing: -.1em;
}

/* column
--------------------------------------------------------- */
.column {
  margin: 0 auto;
}

/* article
--------------------------------------------------------- */
.article .article-header {
  background: #e7e7e7;
}
.article .article-header,
.article .article-header a {
  justify-content: center;

  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.2;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.article .article-header a {
  color: #034ea1;
}
.article .article-header a::before {
  content: '';

  display: block;

  width: 60px;
  height: 60px;
  margin-right: 12px;
}

.article a.article-footer {
  display: block;

  font-size: 1.125rem;
  font-weight: bold;
}
.article a.article-footer::after {
  content: ' \00203a\00203a';

  display: inline;

  font-family: Raleway;
}

/* PC article
..................................... */
@media only screen and (min-width: 1024px) {
  .article .article-header,
  .article .article-header a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 74px;
    min-height: 74px;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .article .article-footer {
    display: block;

    padding-top: .2rem;

    border-top: 1px solid #ccc;
  }
}

/* SP article
..................................... */
@media only screen and (max-width: 1023px) {
  .article .article-header,
  .article .article-header a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 60px;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .article .article-footer {
    padding: .8rem 0;
  }
  .article .article-body,
  .article .article-footer {
    width: 85%;
    margin-right: auto;
    margin-left: auto;
  }
}

/* item list
--------------------------------------------------------- */
.item-list {
  position: relative;
}
.item-list .item {
  position: relative;
}
.item-list .item figure {
  position: relative;
  z-index: 1;
}

.item .area-whole {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: block;

  width: 100%;
  height: 100%;
}

/* ==========================================================
	form
========================================================== */
input[type='text'],
input[type='password'],
input[type='date'],
input[type='datetime'],
textarea {
  padding: .2rem .5rem;

  font-size: 1rem;

  color: #333;
  background: #fff;

  border: 1px solid #333;
  border-radius: 3;
}

.layout-body button,
.dialog button {
  font-weight: bold;

  color: #fff;
  background: #034ea1;

  border-radius: 3;

  box-shadow: 0 2 0 0 rgba(0, 0, 0, .5);
}

button:disabled {
  opacity: .2;

  box-shadow: none;
}

/* ==========================================================
  common
========================================================== */
/* general
---------------------------------------------------------- */
/* PC column
..................................... */
@media only screen and (min-width: 1024px) {
  .column {
    overflow: hidden;

    width: 1280px;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
  }
}

/* SP column
..................................... */
@media only screen and (max-width: 1023px) {
  .column {
    width: 85%;
    margin: 0 auto;
  }
}

/* ==========================================================
  Japanese layout
========================================================== */
.layout-navigation .nav_category .id_health span {
  display: block;

  font-size: 12px;
}

/* category
---------------------------------------------------------- */
/* PC navigation - category
..................................... */
@media only screen and (min-width: 1024px) {
  .layout-navigation .nav_guide li {
    line-height: 1.0;
  }
  .layout-navigation .nav_guide li.id_global label::before {
    vertical-align: top;
  }
  .layout-navigation .nav_category > li > a {
    padding: 0 15px;

    font-size: 16px;
  }
  .layout-navigation .nav_category > li:hover > a {
    margin-right: -1px;
    margin-left: -1px;
    padding: 0 16px;
  }
  .layout-navigation .nav_category > li > dl {
    left: 100px;

    width: 1180px;
  }
  .layout-navigation .nav_category > li > dl dd ul {
    width: 755px;
    margin: 42px 60px 0;
  }
  .layout-navigation .nav_category > li > dl dd ul li {
    margin: 0 0 30px;
  }
  .layout-navigation .nav_category > li > dl dd ul li a {
    font-size: 16px;
  }
  .layout-navigation .nav_category .id_health > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        flex-direction: column;

    width: 100%;
    height: 50px;
    padding: 4px 15px 0 15px;

    line-height: 1.5;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
  }
  .layout-navigation .nav_category .id_health > a span {
    font-size: 12px;
  }
  .layout-navigation .nav_category .id_health:hover > a {
    margin: 0;
    padding: 4px 15px 0 15px;
  }
  .layout-navigation .nav_category .id_health dt a {
    font-size: 36px;
  }
  .layout-navigation .nav_category .id_health dt a span {
    display: inline-block;

    font-size: .5em;

    vertical-align: middle;
  }
  .layout-navigation .nav_category > li.id_medical:hover > a {
    background-color: transparent;
  }
}

/* TABLET navigation - category
..................................... */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .layout-navigation .nav_category > li > dl {
    left: auto;

    width: 100%;
    max-width: initial;
    max-width: auto;
  }
  .layout-navigation .nav_category > li > dl dd {
    width: 687px;
  }
  .layout-navigation .nav_category > li > dl dd ul {
    width: 591px;
  }
}

/* SP navigation - category
..................................... */
@media only screen and (max-width: 1023px) {
  .layout-navigation .nav_category .id_health > a {
        flex-direction: column;
    justify-content: center;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
  }
}

/* footer
---------------------------------------------------------- */
/* SP footer
..................................... */
@media only screen and (max-width: 1023px) {
  .layout-footer {
    padding: 12px 1rem 18px;
  }
}


/* ==========================================================
override
========================================================== */
/* page - layout
---------------------------------------------------------- */
/* TABLET main
..................................... */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .page-main {
    padding-left: 20px;
    padding-right: 10px;
  }
  .page-aside {
    float: left;

    width: 300px;
    padding-left: 10px;
  }
}

/* navigation
---------------------------------------------------------- */
/* PC navigation
..................................... */
@media only screen and (min-width: 1024px) {
  .layout-navigation .nav_category > li.id_health.is_current > a {
    background: #36318f;
  }
  .layout-navigation .nav_category > li.id_ir.is_current > a {
    background: #00a1a8;
  }
  .layout-navigation .nav_category > li.id_medical.is_current > a {
    background: #ce0080;
  }
  .layout-navigation .nav_category > li.id_recruit.is_current > a {
    background: #ce0080;
  }
  .layout-navigation .nav_category > li.id_csr.is_current > a {
    background: #f08300;
  }
  .layout-navigation .nav_category > li.id_about.is_current > a {
    background: #00a33e;
  }
}

/* category
---------------------------------------------------------- */
/* PC navigation - category
..................................... */
@media only screen and (min-width: 1024px) {
  .layout-navigation .nav_category > li.is_current > a {
    margin-right: -1px;
    margin-left: -1px;
    padding: 0 16px;
  }
  .layout-navigation .nav_category .id_health.is_current > a {
    margin: 0;
    padding: 4px 15px 0 15px;
  }
  .layout-navigation .nav_category > li.id_medical.is_current > a {
    background-color: transparent;
  }
}

/* page - headline
---------------------------------------------------------- */
/* PC main
..................................... */
@media only screen and (min-width: 1024px) {
  .page-aside {
    z-index: 0;
  }

  .hd_page,
  .ti001 {
    position: relative;
    padding-top: 13px;
    padding-bottom: 8px;

    font-size: 1.625rem;
    line-height: 1.3;
    color: #034ea1;
  }
  .css_Android4 .hd_page,
  .css_Android4 .ti001 {
    background: rgba(255, 255, 255, .01);
  }
  .text-size-l .hd_page,
  .text-size-l .ti001 {
    padding-top: 12px;
    padding-bottom: 7px;
  }
  .text-size-s .hd_page,
  .text-size-s .ti001 {
    padding-bottom: 9px;
  }
  .hd_page::before,
  .hd_page::after,
  .ti001::before,
  .ti001::after {
    content: '';

    position: absolute;
    bottom: 0;

    display: block;
    height: 3px;
  }

  .hd_page::before,
  .ti001::before {
    left: 0;
    width: 250px;
    background: #00adee;
    z-index: 2;
  }

  .hd_page::after,
  .ti001::after {
    right: 0;
    width: 100%;
    background: #034ea1;
    z-index: 1;
  }

}

/* SP main
..................................... */
@media only screen and (max-width: 1023px) {
  .hd_page,
  .ti001 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;

    border-left: 4px solid #00adee;
    width: 100%;
    height: auto;
    min-height: 44px;
    margin-bottom: 2rem;
    padding: 10px;

    font-size: 1rem;

    text-align: center;

    color: #fff;
    background: #1158a6;

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

/* navigation - renew
---------------------------------------------------------- */
.nav_main.renew {
  margin-top: 13px;
}
.nav_main.renew .hd_nav-main {
  display: block;
  height: auto;
  padding: 0 30px 0 15px;
  text-align: left;
}
.nav_main.renew .hd_nav-main a {
  position: relative;

  display: block;
  margin-right: -30px;
  margin-left: -15px;
  width: calc(100% + 45px);
  padding: 8px 30px 9px 15px;

  text-decoration: none;
  font-weight: bold;

  color: #fff;
}
.nav_main.renew .hd_nav-main a::after {
  content: '';

  position: absolute;
  top: 2px;
  left: auto;
  right: 8px;
  bottom: 0;

  display: block;

  width: 14px;
  height: 14px;
  margin: auto;

  border: solid #fff;
  border-width: 1px 1px 0 0;

  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: top center;
  transform-origin: top center;
}

.nav_main.renew > ul > li a,
.nav_main.renew > ul > li > label {
  padding-right: 35px;
  padding-left: 15px;
  font-size: 1.125rem;
}

.nav_main.renew > ul > li > ul > li a,
.nav_main.renew > ul > li > ul > li > label {
  padding-right: 35px;
  padding-left: 30px;
  font-size: 1.125rem;
}

.nav_main.renew ul > li a::after,
.nav_main.renew ul > li > label::after {
  right: 8px;
}


/* PC navigation
..................................... */
@media only screen and (min-width: 1024px) {
  .nav_main.renew > ul li > a,
  .nav_main.renew > ul li > label {
    height: auto;
    padding-top: 1.4rem;
    padding-right: 2rem;
    padding-bottom: 1.4rem;
    line-height: 1.3;
  }

  .nav_main.renew > ul > li > ul > li a,
  .nav_main.renew > ul > li > ul > li > label {
    height: ato;
    padding-top: .85rem;
    padding-right: 2.5rem;
    padding-bottom: .85rem;
    line-height: 1.3;
    font-weight: normal;
  }

  .nav_main.renew > ul > li > ul > li.prescription_drug a {
    font-size: 14px;
  }
}

/* SP navigation
..................................... */
@media only screen and (max-width: 1023px) {
  .nav_main.renew ul li > a,
  .nav_main.renew ul li > label {
    height: auto;
    padding-top: .8rem;
    padding-bottom: .8rem;
    padding-right: 2.5rem;
  }
}

/* breadcrumb
---------------------------------------------------------- */
.breadcrumb ul li.home {
  padding-left: 25px;
  background: url("../img/icon_home.png") no-repeat left center;
}

/* commmon - parts
========================================================== */
/* main
---------------------------------------------------------- */
.main-body {
  padding-bottom: 1rem;
}

/* PC main
..................................... */
@media only screen and (min-width: 1024px) {
  .main-body {
    padding-bottom: 3rem;
  }
}

.clearfix::after,
.clearFix::after {
  content: "";
  display: block;
  clear: both;
}

/* title
---------------------------------------------------------- */
/* PC title
..................................... */
@media only screen and (min-width: 1024px) {
  .ti002 {
    position: relative;
    border-bottom: 1px solid #ccc;
    margin-bottom: .8em;
    padding: 12px 10px 12px 30px;
    background: #f5f5f5;
    font-size: 1.375rem;
    font-weight: bold;
    color: #034ea1;
    line-height: 1.25;
  }
  .ti002.line-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-align-items: center;
    align-items: center;

    height: 3.8rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .ti002::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: 20px;
    height: 8px;
    background: #00adee;
    z-index: 1;
  }
  .ti002 .fontSmall {
    font-size: .875rem;
  }

  .ti003 {
    margin-bottom: .8em;
    border-left: 2px solid #00adee;
    border-bottom: 1px solid #ccc;
    padding: 10px 10px 10px 15px;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.25;
    color: #034ea1;
  }
  .ti003 a {
    text-decoration: underline;
  }
  /*
  .ti003 :visited {
    color: #3614A9;
  }
  */

  .ti004 {
    margin-bottom: .8em;
    border-bottom: 2px solid #cceffc;
    padding: 7px 0;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.25;
    color: #034ea1;
  }
  .ti004.noDecoration {
    border-bottom: none;
    color: #000;
  }

  .ti005 {
    margin-bottom: .8em;
    padding: 2px 0;
    font-size: 1.125rem;
    font-weight: bold;
    color: #034ea1;
  }

  .ti006 {
    margin-bottom: .8em;
    padding: 2px 0;
    font-size: 1.125rem;
    font-weight: bold;
  }

  .copy {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.625rem;
    font-weight: normal;
    line-height: 1.3;
    color: #034ea1;
  }
  .copy.mg0 {
    margin-top: .5rem;
  }

  .copy_s {
    margin-bottom: .6rem;
    font-size: 1.375rem;
    font-weight: normal;
    line-height: 1.3;
    color: #034ea1;
  }
}

/* SP title
..................................... */
@media only screen and (max-width: 1023px) {
  .ti002 {
    position: relative;
    margin-bottom: .8em;
    padding: 7px 0 7px;
    background: #f5f5f5;
    font-size: 1.25rem;
    font-weight: bold;
    color: #034ea1;
    line-height: 1.25;
  }
  .ti002::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: 3%;
    height: 4px;
    background: #00adee;
    z-index: 1;
  }
  .ti002 > span:nth-of-type(1) {
    display: block;
    margin: 0 auto;
    width: 85%;
  }
  .ti002 .fontSmall {
    font-size: .875rem;
  }

  .main-body_inner .ti002 {
    margin-right: -25px;
    margin-left: -25px;
  }

  .ti003 {
    margin-bottom: .8em;
    border-left: 2px solid #00adee;
    border-bottom: 1px solid #ccc;
    padding: 5px 10px 5px 15px;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.25;
    color: #034ea1;
  }
  .ti003 a {
    text-decoration: underline;
  }

  .ti004 {
    margin-bottom: .8em;
    border-bottom: 2px solid #cceffc;
    padding: 5px 0;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.25;
    color: #034ea1;
  }
  .ti004.noDecoration {
    border-bottom: none;
    color: #000;
  }

  .ti005 {
    margin-bottom: .5em;
    padding: 2px 0;
    font-size: 1.125rem;
    font-weight: bold;
    color: #034ea1;
  }

  .ti006 {
    margin-bottom: .5em;
    padding: 2px 0;
    font-size: 1.125rem;
    font-weight: bold;
  }

  .copy {
    margin-bottom: .6rem;
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 1.3;
    color: #034ea1;
  }

  .copy_s {
    margin-bottom: .6rem;
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1.3;
    color: #034ea1;
  }

}

/* section
---------------------------------------------------------- */
/* PC section
..................................... */
@media only screen and (min-width: 1024px) {
  .section001 {
    clear: both;
    margin-bottom: 2rem;
  }
  .section002 {
    clear: both;
    margin-right: 20px;
    margin-bottom: 1.5rem;
    margin-right: 20px;
  }
  .section003 {
    clear: both;
    margin-bottom: 1rem;
  }
  .css_Android4 .section001,
  .css_Android4 .section002,
  .css_Android4 .section003 {
    position: relative;
  }
  .section001.lastSection,
  .section002.lastSection,
  .section003.lastSection {
    clear: none;
    margin-bottom: 0;
  }

  .section001 p,
  .section002 p,
  .section003 p {
    font-size: 1.125rem;
    line-height: 1.6;
  }
  .css_Android4 .section001 p,
  .css_Android4 .section002 p,
  .css_Android4 .section003 p {
    background: rgba(255, 255, 255, .01);
  }
  .section001 p + p,
  .section002 p + p,
  .section003 p + p {
  }
}

/* SP section
..................................... */
@media only screen and (max-width: 1023px) {
  .section001 {
    clear: both;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 1.5rem;
  }
  .section002 {
    clear: both;
    margin-right: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: 1.5rem;
  }
  .section003 {
    clear: both;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 1rem;
  }
  .section001.lastSection,
  .section002.lastSection,
  .section003.lastSection {
    clear: none;
    margin-bottom: 0;
  }
  .section001 p,
  .section002 p,
  .section003 p {
    font-size: 1.125rem;
    line-height: 1.6;
  }
  .section001 p + p,
  .section002 p + p,
  .section003 p + p {
  }

  .sp-section {
    width: 85%;
  }

  .sp-section_outline {
    width: 92%;
  }

}

/* block
---------------------------------------------------------- */
.figure-block {
  padding-bottom: 1rem;
  text-align: center;
}

.figure-block > img {
  width: 100%;
  height: auto;
  max-width: inherit;
  height: auto;
}

.listCaution001,
.listCaution002 {
  margin-top: .5rem;
}

.listCaution001 dt,
.listCaution002 dt {
  float: left;
  width: 2rem;
  font-size: .875rem;
}

.listCaution001 dd,
.listCaution002 dd {
  padding-left: 2rem;
  font-size: .875rem;
}

.listCaution001 dd + dt,
.listCaution002 dd + dt,
.listCaution001 dd + dt + dd,
.listCaution002 dd + dt + dd {
  margin-top: .25rem;
}

.listIcon001 {
}

.listIcon002 {
  padding: .25rem 0;
}
.listIcon002 li {
  padding: .25rem 30px;
  background: url("../img/icon_arrow_right.png") no-repeat left center;
}

.listIcon003 {
}

.listIcon004,
.listDisc {
  padding: .25rem 0;
}
.listIcon004 li ,
.listDisc li {
  position: relative;
  padding: .25rem 20px;
}
.listIcon004 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
.listIcon004 li::before {
  background: #034ea1;
}
.listIcon004.discBlack li::before {
  background: #000;
}
.listDisc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75rem;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #000;
}

.text-size-l .listDisc li::before {
  top: .9rem;
}

.listDecimal {
  padding: .25rem 0;
}
.listDecimal li {
  position: relative;
  margin-left: 1.2rem;
  padding: .25rem 20px .25rem 0;
  font-size: 1.125rem;
  list-style: decimal;
  list-style-position: outside;
}

.listIndent {
  padding: .25rem 0;
}
.listIndent li {
  position: relative;
  margin-left: 1.9rem;
  padding: .25rem 0 .25rem 0;
  font-size: 1.125rem;
  text-indent: -1.9rem;
}

.listTransparency dt {
  float: left;
  width: 4rem;
  padding: .25rem 0;
}
.listTransparency dd {
  width: calc(100% - 4rem);
  padding: .25rem 0;
}

.listTransparency dd .listIcon004,
.listTransparency dd .listDisc {
  margin-left: 4rem;
  padding: 0;
}
.listTransparency dd .listIcon004 li:first-child,
.listTransparency dd .listDisc li:first-child {
  padding-top: 0;
}

p + .listIcon001,
p + .listIcon002,
p + .listIcon003,
p + .listIcon004,
p + .listTransparency,
div + .listIcon001,
div + .listIcon002,
div + .listIcon003,
div + .listIcon004,
div + .listTransparency {
  margin-top: 1rem;
}

.listIcon001 li,
.listIcon002 li,
.listIcon003 li,
.listIcon004 li,
.listTransparency dt,
.listTransparency dd {
  font-size: 1.125rem;
  line-height: 1.3;
}

/* list button */
.listButton001,
.listButton002,
.listButton003 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-justify-content: center;
  justify-content: center;

  margin-top: 2rem;
}
.listButton001 li,
.listButton002 li,
.listButton003 li {
  margin: 0 1rem;
}

.listNormal {
  padding: .25rem 0;
}

.listNormal > dt,
.listNormal > dd {
  font-size: 1.125rem;
}
.listNormal > dt {
  margin-top: 1.25rem;
  font-weight: bold;
}
.listNormal > dd {
  margin-top: 1rem;
}
.listNormal > dd.indent {
  padding-left: 1.35rem;
}

.textLeft {
  text-align: left;
}
.textCenter {
  text-align: center;
}
.textRight {
  text-align: right;
}

.imgDescription2,
.imgDescription3 {
  display: block;
  margin-top: .5rem;
  font-size: .75rem;
  line-height: 1.4;
}

.imgDescription2 {
  text-align: left;
}

.imgDescription3 {
  text-align: center;
}

.outlineBox {
  position: relative;
}
.outlineBox::after {
  content: "";
  display: block;
  clear: both;
}
.outlineBox .outline {
  width: calc(100% - 80px);
}
.outlineBox p {
  font-size: 1rem;
}
.outlineBox p.fontNoraml {
  font-size: 1.125rem;
}
.outlineBox.no-figure .copy,
.outlineBox.no-figure .outline {
  width: 100%;
}
.outlineBox .figure {
  width: 75px;
  text-align: center;
}
.outlineBox .figure image {
  max-width: 75px;
  max-height: auto;
}

.activityBox {
  position: relative;
}
.activityBox::after {
  content: "";
  display: block;
  clear: both;
}

.flexBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-justify-content: space-between;
  justify-content: space-between;

  -webkit-align-content: stretch;
  align-content: stretch;

  margin-bottom: 1rem;
}
.flexBox .flexBox-item {
  margin-top: 1rem;
  width: 48%;
  padding: 0 2px;
  text-align: center;
}
.flexBox.pc-column02 .flexBox-item {
  width: 50%;
}
.flexBox.pc-column03 .flexBox-item {
  width: 33.3%;
}
.flexBox.pc-column04 .flexBox-item {
  width: 25%;
}
.flexBox.pc-column02 .flexBox-item img,
.flexBox.pc-column03 .flexBox-item img,
.flexBox.pc-column04 .flexBox-item img {
  max-width: 100%;
  height: auto;
}
.flexBox .flexBox-item .imgDescription {
  display: block;
  margin-top: .5rem;
  font-size: .75rem;
  text-align: center;
}
.css_Android4 .flexBox {
  display: block;
}
.css_Android4 .flexBox::after {
  content: "";
  display: block;
  clear: both;
}
.css_Android4 .flexBox-item {
  float: left;
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}
.css_Android4 .flexBox-item .imgDescription {
  height: 1.5rem;
}


.table001 {
  border-collapse: collapse;
  width: 100%;
}
.table001 th {
  border: 1px solid #ccc;
  padding: .6rem 10px;
  text-align: left;
  vertical-align: top;
  line-height: 1.4;
  font-size: 1.125rem;
  font-weight: normal;
}
.table001 td {
  border: 1px solid #ccc;
  padding: .6rem 10px;
  text-align: left;
  vertical-align: top;
  line-height: 1.4;
  font-size: 1.125rem;
}

.grayBox {
  width: 100%;
  padding: 1.5rem 0;
  background: #f5f5f5;
}

/* sub menu */
.subMenu {
  margin-top: -1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-justify-content: space-between;
  justify-content: space-between;

  -webkit-align-content: stretch;
  align-content: stretch;

  margin-bottom: 1rem;
  width: 100%;
  background: #f5f5f5;
}
.subMenu .listMenu {
  padding: 12px 15px;
}
.subMenu .listMenu a {
  display: inline-block;
  padding-left: 29px;
  background: url("../img/icon_arrow_down.png") no-repeat left center;
  font-size: 1rem;
  line-height: 1.3;
}
.subMenu.pc-column02 [class*="leftBox"],
.subMenu.pc-column02 [class*="centerBox"],
.subMenu.pc-column02 [class*="rightBox"] {
  width: 50%;
}
.subMenu.pc-column03 [class*="leftBox"],
.subMenu.pc-column03 [class*="centerBox"],
.subMenu.pc-column03 [class*="rightBox"] {
  width: 33.3%;
}
.subMenu.pc-column04 [class*="leftBox"],
.subMenu.pc-column04 [class*="centerBox"],
.subMenu.pc-column04 [class*="rightBox"] {
  width: 25%;
}
.css_Android4 .subMenu {
  display: block;
}
.css_Android4 .subMenu::after {
  content: "";
  display: block;
  clear: both;
}
.css_Android4 .subMenu [class*="leftBox"],
.css_Android4 .subMenu [class*="centerBox"],
.css_Android4 .subMenu [class*="rightBox"] {
  float: left;
  display: inline-block;
  margin-right: 20px;
}



/* PC block
..................................... */
@media only screen and (min-width: 1024px) {
  .contLeft001 {
    width: calc(100% - 250px);
    float: left;
  }
  .contRight001 {
    float: right;
    width: 230px;
    text-align: center;
  }
  .contRight001 img {
    max-width: 230px;
  }
  .css_Android4 .contLeft001 {
    width: 100%;
    padding-right: 250px;
  }
  .css_Android4 .contRight001 {
    position: absolute;
    top: 0;
    right: 0;
  }

  .outlineBox .copy,
  .outlineBox .outline {
    width: calc(100% - 160px);
  }
  .outlineBox .figure {
    position: absolute;
    right: 0;
    top: 0;
    width: 140px;
  }
  .outlineBox .figure image {
    max-width: 100px;
  }

  .flexBox.size04 .flexBox-item {
    width: 25%;
  }
  .css_Android4 .outlineBox .copy,
  .css_Android4 .outlineBox .outline {
    float: left;
    width: 100%;
    padding-right: 140px;
  }
  .css_Android4 .outlineBox .figure {
    float: right;
  }

}

@media only screen and (min-width: 768px) {
  .contLeft003 {
    width: 210px;
    float: left;
  }
  .contLeft003 img {
    max-width: 200px;
  }
  .contRight003 {
    float: right;
    width: calc(100% - 220px);
    text-align: center;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .activityBox {
    min-height: 220px;
  }
  .activityBox .content {
    width: calc(100% - 280px);
    float: left;
  }
  .activityBox .image {
    float: right;
    width: 260px;
    text-align: center;
  }
  .activityBox .image img {
    max-width: 260px;
    height: auto;
  }
  .css_Android4 .activityBox {
    position: relative;
  }
  .css_Android4 .activityBox .content {
    width: 100%;
    padding-right: 280px;
  }
  .css_Android4 .activityBox .image {
    position: absolute;
    top: 0;
    right: 0;
  }

}

@media only screen and (min-width: 1280px) {
  .activityBox {
    min-height: 300px;
  }
  .activityBox .content {
    width: calc(100% - 400px);
    float: left;
  }
  .activityBox .image {
    float: right;
    width: 380px;
    text-align: center;
  }
  .activityBox .image img {
    max-width: 380px;
    height: auto;
  }
  .css_Android4 .activityBox {
    position: relative;
  }
  .css_Android4 .activityBox .content {
    width: 100%;
    padding-right: 400px;
  }
  .css_Android4 .activityBox .image {
    position: absolute;
    top: 0;
    right: 0;
  }
}



/* SP block
..................................... */
@media only screen and (max-width: 1023px) {
  .contRight001 {
    padding-top: 1rem;
    text-align: center;
  }

  .outlineBox .outline {
    float: left;
  }
  .outlineBox.sp-float .outline {
    float: inherit;
    width: auto;
  }
  .outlineBox .figure {
    float: right;
  }
  .outlineBox.sp-float .figure {
    margin: 0 0 1rem 1rem;
  }

  .activityBox .image {
    margin-top: 1rem;
    text-align: center;
  }
  .activityBox .image img {
    max-width: 100%;
    height: auto;
  }

  .subMenu {
    margin-top: -2rem;
  }

  .listIcon004 li::before {
    top: .65rem;
    margin: inherit;
  }

  .contRight001 {
    width: 250px;
    margin: 0 auto;
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .contLeft003 {
    padding-bottom: 1rem;
    text-align: center;
  }
}

@media only screen and (max-width: 639px) {
  .subMenu.sp-column01 [class*="leftBox"],
  .subMenu.sp-column01 [class*="centerBox"],
  .subMenu.sp-column01 [class*="rightBox"] {
    width: 100%;
    margin-right: 0;
  }
  .subMenu.sp-column02 [class*="leftBox"],
  .subMenu.sp-column02 [class*="centerBox"],
  .subMenu.sp-column02 [class*="rightBox"] {
    width: 50%;
    margin-right: 0;
  }
  .subMenu.sp-column03 [class*="leftBox"],
  .subMenu.sp-column03 [class*="centerBox"],
  .subMenu.sp-column03 [class*="rightBox"] {
    width: 33%;
    width: calc(100% / 3);
    margin-right: 0;
  }

  .flexBox.sp-column02 .flexBox-item {
    width: 50%;
    margin-right: 0;
  }
  .flexBox.sp-column03 .flexBox-item {
    width: 33.3%;
    width: calc(100% / 3);
    margin-right: 0;
  }
  .flexBox.sp-column04 .flexBox-item {
    width: 25%;
    margin-right: 0;
  }

}




/* contents-top panel
---------------------------------------------------------- */
/* PC contents-top panel
..................................... */
@media only screen and (min-width: 1024px) {
  .panelBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-justify-content: space-between;
    justify-content: space-between;

    -webkit-align-content: stretch;
    align-content: stretch;
  }
  .panelBox-item {
    position: relative;
    width: calc((100% - 40px) / 3);
  }
  .panelBox-item:not(.dummy) {
    margin-bottom: 1.25rem;
    padding: 10px 10px 80px;
    background: #f5f5f5;
  }
  .panelBox-item .title {
    margin-bottom: .8rem;
    width: 100%;
    height: 60px;
    background: #e7e7e7;
  }
  .panelBox-item .title .text {
    display: table;
    width: 100%;
  }
  .panelBox-item .title .text a {
    display: table-cell;
    width: 100%;
    height: 60px;
    text-align: center;
    vertical-align: middle;
    font-size: 1.125rem;
    line-height: 1.3;
  }
  .panelBox-item .image {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    background: #fff;
    overflow: hidden;
    z-index: 1;
  }
  .panelBox-item .image img {
    width: 100%;
    height: auto;
    max-width: inherit;
    max-height: inherit;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    margin: auto;
  }

  .panelBox-item > p {
    position: relative;
    margin: 0 15px;
    font-size: 1.125rem;
    line-height: 1.4;
    z-index: 2;
  }
  .panelBox-item .listIcon002 {
    display: none;
  }
  .css_Android4 .panelBox {
    display: block;
    width:
  }
  .css_Android4 .panelBox::after {
    content: "";
    display: block;
    clear: both;
  }
  .css_Android4 .panelBox-item {
    float: left;
    width: 210px;
    margin: 0 10px 15px;
  }
  .css_Android4.text-size-l .panelBox-item {
    height: 320px;
  }
  .css_Android4.text-size-m .panelBox-item {
    height: 285px;
  }
  .css_Android4.text-size-s .panelBox-item {
    height: 250px;
  }
}

/* PC contents-top panel
..................................... */
@media only screen and (min-width: 1280px) {
  .panelBox-item {
    position: relative;
    width: calc((100% - 60px) / 4);
  }

  .text-size-l .panelBox.invalid_br .title .text a br {
    display: none;
  }
}

@media only screen and (min-width: 1125px) and (max-width: 1279px) {
  .panelBox-item:not(.dummy) {
    padding-bottom: 100px;
  }
  .panelBox-item .image {
    height: 90px;
  }
}

/* SP contents-top panel1
..................................... */
@media only screen and (min-width: 640px) and (max-width: 1023px) {
  .panelBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-justify-content: space-between;
    justify-content: space-between;

    -webkit-align-content: stretch;
    align-content: stretch;
  }
  .panelBox-item {
    position: relative;
    width: 50%;
  }
  .panelBox-item:not(.dummy) {
    margin-bottom: 2rem;
    padding: 0 1rem 80px;
  }
  .panelBox-item:nth-of-type(2n) {
    padding-left: .5rem;
  }
  .panelBox-item:nth-of-type(2n + 1) {
    padding-right: .5rem;
  }
  .panelBox-item .title {
    margin-bottom: 1rem;
  }
  .panelBox-item .title .text a {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 50px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    background: #e7e7e7;
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: bold;
  }
  .panelBox-item .title .text a br {
    display: none;
  }
  .panelBox-item .image {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    margin: auto;
    text-align: center;
    z-index: 1;
  }
  .panelBox-item:nth-of-type(2n) .image {
    right: .5rem;
  }
  .panelBox-item:nth-of-type(2n + 1) .image {
    left: .5rem;
  }
  .panelBox-item .image img {
    width: 210px;
    height: auto;
  }
  .panelBox-item > p {
    position: relative;
    z-index: 2;
  }
  .panelBox-item .listIcon002 {
    display: none;
  }
  .css_Android4 .panelBox {
    display: block;
  }
  .css_Android4 .panelBox::after {
    content: "";
    display: block;
    clear: both;
  }
  .css_Android4 .panelBox-item {
    float: left;
  }

}

/* SP contents-top panel2
..................................... */
@media only screen and (max-width: 639px) {
  .panelBox-item {
    position: relative;
    margin-bottom: 1rem;
  }

  .panelBox-item.dummy {
    display: none;
  }
  .panelBox-item .title {
    margin-bottom: 1rem;
  }
  .panelBox-item .title .text a {
    position: relative;
    display: block;
    background: #e7e7e7;
    padding: 12px 10px;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: bold;
  }
  .panelBox-item .title .text a br {
    display: none;
  }
  .panelBox-item .image {
    display: block;
    margin: 1rem auto 0;
    width: 85%;
    text-align: center;
    z-index: 1;
  }
  .panelBox-item .image img {
    width: 210px;
    height: auto;
  }

  .panelBox-item > p {
    position: relative;
    margin: 0 auto;
    width: 85%;
    font-size: 1.125rem;
    line-height: 1.4;
    z-index: 2;
  }
  .panelBox-item .listIcon002 {
    display: none;
  }

}


/* popup page style
---------------------------------------------------------- */
.popup-header {
  position: relative;
  height: 80px;
}
.popup-header .logo {
  position: absolute;
  top: 15px;
  left: 45px;
}
.popup-header .btn-close {
  position: absolute;
  top: 25px;
  right: 30px;
}
.popup-body .grayBox {
  margin-top: 2rem;
  padding: 20px;
}
.popup-body .grayBox .ti003 {
  border: none;
  padding: 0;
  font-size: 1.125rem;
}
.popup-body .grayBox .ti003 p {
  line-height: 1.3;
  word-break: break-all;
}
.popup-footer {
  padding-bottom: 2rem;
}
/* PC contents-top panel
..................................... */
@media only screen and (max-width: 1279px) and (min-width: 1024px) {
  .popup-body .page-main {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 1024px) {
  .popup-body .page-main {
    position: relative;
    z-index: 1;
    float: none;
    width: 100%;
    max-width: inherit;
    padding-left: 30px;
  }
}
@media only screen and (max-width: 1023px) {
  .popup-body .section001 .grayBox p {
    word-break: break-all;
  }
}
@media only screen and (max-width: 639px) {
  .popup-header {
    height: 60px;
  }
  .popup-header .logo {
    left: 15px;
  }
  .popup-header .logo img {
    width: 185px;
    height: auto;
  }
  .popup-header .btn-close {
    top: 15px;
    right: 15px;
  }
}