* {
  outline: none;
  box-sizing: border-box; }

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  outline: none; }

html {
  font-size: 62.5%;
  line-height: 1; }

body {
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 400;
  font-style: normal; }

.scroll,
.btn-pagetop,
.copyright,
tbody th,
.type-en,
.en {
  font-family: din-2014, source-han-sans-japanese, sans-serif;
  font-weight: 600;
  font-style: normal; }

main {
  font-size: 1.6rem;
  line-height: 1.8;
  width: auto;
  margin: 0 auto 50px;
  position: relative; }
  @media screen and (min-width: 768px) {
    main {
      font-size: 1.5rem;
      margin: 0 auto 50px; } }

article,
.list-page,
.block {
  max-width: 1000px;
  margin: 0 auto;
  padding-left: 5vw;
  padding-right: 5vw; }
  @media screen and (min-width: 601px) {
    article,
    .list-page,
    .block {
      padding-right: 2vw;
      padding-left: 2vw; } }
  @media screen and (min-width: 1300px) {
    article,
    .list-page,
    .block {
      padding-right: 0;
      padding-left: 0; } }

button {
  border: none;
  outline: none; }

img {
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: top;
  line-height: 0; }

.flex-all {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

@media screen and (min-width: 601px) {
  .flex-s {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; } }
@media screen and (min-width: 768px) {
  .flex {
    display: flex;
    justify-content: space-between; } }
@media screen and (min-width: 1121px) {
  .flex-p {
    display: flex;
    justify-content: space-between; } }
a {
  color: #000000;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: all 0.4s ease; }
  a::before {
    transition: all 0.4s ease; }

a img {
  transition: all 0.4s ease; }

a:hover img {
  opacity: 0.7; }

.wait {
  color: #c4c4c4 !important;
  pointer-events: none; }

/*------------------------------------------------------------------adobe font*/
.wf-loading {
  visibility: hidden; }

.loading-delay,
.wf-active {
  visibility: visible; }

.wf-inactive {
  visibility: visible; }

/*------------------------------------------------------------------end adobe font*/
/*------------------------------------------------------------------common */
h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.2; }

small {
  font-size: 0.6em; }

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

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

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

header ul,
footer ul,
ol.list-unstyled,
ul.list-unstyled {
  list-style: none; }

main ol:not(.list-unstyled),
main ul:not(.list-unstyled) {
  margin-left: 1.5em; }

main .list-b {
  margin-bottom: 1em; }

.txt-center {
  text-align: center; }

.txt-right {
  text-align: right; }

.list-attention li,
.txt-attention {
  color: #df1818;
  text-indent: -1em;
  margin-left: 1em; }

.vertical {
  writing-mode: vertical-rl;
  white-space: normal; }

.ytb {
  position: relative;
  padding-bottom: 56.25%; }
  .ytb iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

@media screen and (max-width: 834px) {
  .pc {
    display: none; } }
@media screen and (min-width: 835px) {
  .sp {
    display: none; } }
@media screen and (max-width: 900px) {
  br.sp_none {
    display: none; } }
@media screen and (min-width: 501px) {
  br.pc_none {
    display: none; } }
@media screen and (min-width: 901px) {
  br.wide_none {
    display: none; } }
/*------------------------------------------------------------------common END */
/*------------------------------------------------------------------header */
.wrap {
  position: relative; }
  .wrap::before {
    content: "";
    width: 100%;
    position: absolute;
    border-top: 6px solid #008ff3;
    z-index: 1100; }
  @media screen and (min-width: 835px) {
    .wrap {
      display: grid;
      grid-template-columns: 250px 1fr; }
      .wrap nav {
        grid-column-start: 1;
        grid-column-end: 2; }
      .wrap .area-contents {
        grid-column-start: 2;
        grid-column-end: 4;
        padding: 0; } }

.home .area-contents {
  background-color: #eef7ff; }

.logo {
  padding: 20px 0 15px;
  width: 60%; }
  .logo a {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.6;
    display: block;
    margin-left: 5vw; }
    @media screen and (min-width: 601px) {
      .logo a {
        font-size: 1.6rem;
        margin-left: 2vw; } }
    @media screen and (min-width: 835px) {
      .logo a {
        margin-left: 20px; } }
    .logo a:hover {
      color: #008ff3; }
  @media screen and (min-width: 835px) {
    .logo {
      margin-left: 0;
      width: 100%;
      max-width: none;
      padding: 45px 0 40px; } }

.home .fixed-nav {
  border-right: none; }

.fixed-nav {
  background-color: #fff;
  border-right: 1px solid #dfedf3;
  z-index: 1001; }
  @media screen and (min-width: 835px) {
    .fixed-nav {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: 100%;
      width: 250px;
      position: fixed;
      left: 0;
      top: 0; } }
  .fixed-nav nav {
    background-color: #fdffcb;
    font-size: 1.4rem;
    line-height: 1.5;
    border-bottom: 1px solid #dfedf3; }
    @media screen and (min-width: 336px) {
      .fixed-nav nav {
        font-size: 1.5rem; } }
    @media screen and (min-width: 835px) {
      .fixed-nav nav {
        background-color: transparent; } }
    .fixed-nav nav > ul {
      padding: 5vw; }
      @media screen and (min-width: 601px) {
        .fixed-nav nav > ul {
          padding: 2vw; } }
      @media screen and (min-width: 835px) {
        .fixed-nav nav > ul {
          padding: 0; } }
  .fixed-nav a {
    display: block; }
  .fixed-nav .first {
    border-top: 1px solid #e5e6c0;
    padding: 20px 0;
    color: #008ff3; }
    @media screen and (min-width: 835px) {
      .fixed-nav .first {
        color: #000000;
        padding: 13px 30px 15px 12px;
        border-top: 1px solid #dfedf3; } }
    .fixed-nav .first.current, .fixed-nav .first:hover {
      background-color: #fdffcb; }
  .fixed-nav .ttl-nav {
    font-size: 1.7rem;
    border-bottom: 1px solid #e5e6c0; }
    @media screen and (min-width: 835px) {
      .fixed-nav .ttl-nav {
        border-top: none;
        margin-bottom: 15px;
        border-bottom: 1px solid #dfedf3; } }
    .fixed-nav .ttl-nav a {
      background-image: none !important;
      padding: 15px 0 !important;
      color: #008ff3 !important; }
      @media screen and (min-width: 835px) {
        .fixed-nav .ttl-nav a {
          padding: 0 0 8px !important; } }
  .fixed-nav .ex {
    background-image: url(../img/icon_ex.png), url(../img/icon_ex_h.png);
    background-position: right 12px center, right -100px center;
    background-size: auto auto, 0;
    background-repeat: no-repeat; }
    .fixed-nav .ex:hover {
      background-image: url(../img/icon_ex_h.png);
      background-position: right 12px center;
      background-color: #fdffcb; }
  .fixed-nav .under:hover .first {
    background-image: url(../img/icon_arrow_h.png);
    background-position: right 12px center;
    background-color: #fdffcb; }
  .fixed-nav .under .first {
    background-image: url(../img/icon_arrow.png), url(../img/icon_arrow_h.png);
    background-position: right 12px center, right -100px center;
    background-size: auto auto, 0;
    background-repeat: no-repeat;
    display: none; }
    @media screen and (min-width: 835px) {
      .fixed-nav .under .first {
        display: block; } }
  .fixed-nav .under > .inner-list {
    background-color: #fdffcb; }
    @media screen and (min-width: 835px) {
      .fixed-nav .under > .inner-list {
        position: fixed;
        left: 250px;
        bottom: 0;
        height: 100%;
        transition: width 0.6s;
        width: 0;
        overflow: hidden; } }
    .fixed-nav .under > .inner-list > ul {
      padding: 0 0 5vw; }
      @media screen and (min-width: 835px) {
        .fixed-nav .under > .inner-list > ul {
          width: 350px;
          padding: 30px 20px; } }
    .fixed-nav .under > .inner-list > ul ul {
      padding: 0 0 0 20px; }
      .fixed-nav .under > .inner-list > ul ul li a {
        background-image: url(../img/icon_line.png);
        background-position: left top 16px;
        background-repeat: no-repeat;
        padding: 10px 0 10px 10px; }
        @media screen and (min-width: 835px) {
          .fixed-nav .under > .inner-list > ul ul li a {
            background-position: left top 14px;
            padding: 6px 0 6px 10px; } }
    .fixed-nav .under > .inner-list > ul > li > a {
      padding: 15px 0 15px 20px;
      background-image: url(../img/icon_arrow_s.png);
      background-position: left center;
      background-repeat: no-repeat; }
      @media screen and (min-width: 835px) {
        .fixed-nav .under > .inner-list > ul > li > a {
          padding: 6px 0 6px 20px;
          white-space: nowrap; } }
    .fixed-nav .under > .inner-list a.current,
    .fixed-nav .under > .inner-list a:hover {
      color: #008ff3; }
  @media screen and (min-width: 835px) {
    .fixed-nav .under:hover .inner-list {
      display: flex;
      flex-direction: column;
      width: 350px; } }
  .fixed-nav p {
    color: #008ff3;
    margin-bottom: 5px; }
  @media screen and (max-width: 834px) {
    .fixed-nav .link-inquiry,
    .fixed-nav .link-policy {
      padding-top: 15px;
      padding-bottom: 15px; } }

.button-toggle {
  position: fixed;
  top: 75px;
  right: 5vw;
  width: 40px;
  height: 60px;
  display: flex;
  flex-direction: column;
  z-index: 1005;
  cursor: pointer; }
  @media screen and (min-width: 835px) {
    .button-toggle {
      display: none; } }
  .button-toggle .txt-bar-c,
  .button-toggle .txt-bar {
    line-height: 1.8;
    margin-top: 0;
    display: block;
    text-align: center; }
  .button-toggle .txt-bar-c {
    display: none; }
  .button-toggle .css-bar {
    position: relative;
    padding: 0;
    background: #000000;
    line-height: 0;
    width: 40px;
    height: 2px;
    display: block;
    transition: all 0.2s ease; }
  .button-toggle .css-bar:before,
  .button-toggle .css-bar:after {
    content: "";
    width: 30px;
    height: 2px;
    background: #000000;
    right: 0;
    top: 12px;
    position: absolute;
    transition: all 0.2s ease; }
  .button-toggle .css-bar:after {
    width: 20px;
    top: 24px; }

@media screen and (max-width: 834px) {
  /*834*/
  .fixed-nav nav {
    background-color: #fdffcb;
    width: 100%;
    height: 0;
    overflow: hidden;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    transition: height 0.4s;
    animation-play-state: paused;
    z-index: 1004; }

  .open .fixed-nav nav {
    overflow: auto;
    height: 100%; }

  .open,
  .open body {
    overflow: hidden; }

  .open .css-bar {
    background-color: transparent; }

  .open .css-bar:before {
    width: 40px;
    transform: rotate(25deg); }

  .open .css-bar:after {
    width: 40px;
    transform: rotate(-25deg);
    top: 12px; }

  .open .txt-bar {
    display: none; }

  .open .txt-bar-c {
    display: block; } }
@media screen and (min-width: 835px) {
  nav {
    overflow: auto;
    scrollbar-width: thin; } }
  @media screen and (min-width: 835px) and (min-height: 546px) {
    nav {
      min-height: 384px; } }
@media screen and (min-width: 835px) {
    nav::-webkit-scrollbar {
      width: 2px; }
    nav::-webkit-scrollbar-thumb {
      background-color: #008ff3; } }

header {
  background-color: #eef7ff;
  font-size: 1.4rem;
  padding: 5vw 0 5vw;
  margin-bottom: 40px; }
  @media screen and (min-width: 835px) {
    header {
      padding: 20px 0; } }
  header .list-header {
    align-items: center;
    justify-content: flex-end; }
    header .list-header a:hover {
      color: #008ff3; }
  header li {
    margin-left: 15px; }
  header h1 {
    font-size: 3.2rem;
    font-size: clamp(2rem, 4vw, 3.2rem);
    text-align: left;
    border-bottom: 1px solid #b1c4e4;
    position: relative;
    margin-top: 60px;
    margin-bottom: 10px;
    padding-bottom: 10px; }
    header h1 span {
      font-size: 1.6rem;
      font-weight: 500;
      display: block;
      line-height: 1.4; }
    header h1::before {
      content: "";
      background-color: #008ff3;
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 110px;
      height: 4px; }

.link-mhlw img {
  width: 116px; }

.link-inquiry,
.link-policy {
  background-image: url(../img/icon_inquiry_s.png);
  background-size: 14px auto;
  background-position: left center;
  background-repeat: no-repeat;
  padding: 0 0 0 20px; }
  @media screen and (min-width: 835px) {
    .link-inquiry,
    .link-policy {
      background-image: url(../img/icon_inquiry.png); } }

.link-policy {
  background-image: url(../img/icon_policy_s.png);
  background-size: 12px auto; }
  @media screen and (min-width: 835px) {
    .link-policy {
      background-image: url(../img/icon_policy.png); } }

@media screen and (max-width: 834px) {
  .list-header {
    display: none; }

  .sp.link-mhlw {
    width: 100px;
    position: absolute;
    top: 25px;
    right: 5vw; } }
/*------------------------------------------------------------------header END */
/*------------------------------------------------------------------footer*/
footer {
  font-size: 1.4rem;
  line-height: 1.4;
  position: relative; }

.area-sitemap {
  background-color: #eef7ff;
  padding: 5vw;
  border-radius: 6px;
  position: relative;
  margin: 0 5vw 50px; }
  @media screen and (min-width: 601px) {
    .area-sitemap {
      padding: 20px;
      margin-right: 2vw;
      margin-left: 2vw; } }
  @media screen and (min-width: 1300px) {
    .area-sitemap {
      margin-right: auto;
      margin-left: auto; } }
  .area-sitemap .first {
    background-image: url(../img/bg_diagonal.png);
    background-position: left center;
    background-color: #1ac067;
    color: #fff;
    display: block;
    padding: 15px 10px;
    font-size: 1.6rem;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .area-sitemap .first.current, .area-sitemap .first:hover {
      background-color: #008ff3; }
    @media screen and (min-width: 835px) {
      .area-sitemap .first {
        padding: 8px 10px; } }
    .area-sitemap .first::after {
      content: "";
      background-image: url(../img/icon_arrow_s_g.png);
      background-position: left center;
      width: 14px;
      height: 14px; }
  .area-sitemap .first.wait {
    background-color: #ebebeb;
    color: #fff !important; }
  .area-sitemap .flex-all > li {
    width: 100%; }
    @media screen and (min-width: 601px) {
      .area-sitemap .flex-all > li {
        width: 48%; } }
    @media screen and (min-width: 1120px) {
      .area-sitemap .flex-all > li {
        width: 32%; } }
  .area-sitemap .flex-all {
    gap: 5vw 4%;
    justify-content: flex-start; }
    @media screen and (min-width: 601px) {
      .area-sitemap .flex-all {
        gap: 2vw 4%; } }
    @media screen and (min-width: 835px) {
      .area-sitemap .flex-all {
        gap: 20px 2%; } }
    .area-sitemap .flex-all .under ul {
      margin-top: 5px; }
      @media screen and (min-width: 835px) {
        .area-sitemap .flex-all .under ul {
          padding-left: 20px; } }
      .area-sitemap .flex-all .under ul > li > a {
        padding: 15px 0 15px 20px;
        background-image: url(../img/icon_arrow_s.png);
        background-position: left center;
        background-repeat: no-repeat;
        display: inline-block; }
        @media screen and (min-width: 835px) {
          .area-sitemap .flex-all .under ul > li > a {
            padding: 6px 0 6px 20px; } }
      .area-sitemap .flex-all .under ul > li > ul {
        margin-top: 0; }
      .area-sitemap .flex-all .under ul > li > ul a {
        padding: 10px 0 10px 15px;
        background-image: url(../img/icon_line.png);
        background-position: left 5px center;
        background-repeat: no-repeat;
        display: inline-block; }
        @media screen and (min-width: 835px) {
          .area-sitemap .flex-all .under ul > li > ul a {
            padding: 6px 0 6px 15px; } }
      .area-sitemap .flex-all .under ul a.current,
      .area-sitemap .flex-all .under ul a:hover {
        color: #008ff3; }
  .area-sitemap h2 {
    font-size: 1.6rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px; }
    .area-sitemap h2::before {
      content: "";
      background-image: url(../img/icon_sitemap_s.png);
      background-size: 25px;
      background-position: left center;
      width: 25px;
      height: 25px;
      margin-right: 6px; }
      @media screen and (min-width: 835px) {
        .area-sitemap h2::before {
          background-image: url(../img/icon_sitemap.png); } }
    .area-sitemap h2::after {
      content: "";
      background-color: #dfdfdf;
      width: calc(100% - 7em - 31px);
      height: 1px;
      margin-left: auto; }

@media screen and (min-width: 601px) and (max-width: 1119px) {
  .list-single {
    width: 100% !important; } }
.list-single ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5vw 4%; }
  @media screen and (min-width: 601px) {
    .list-single ul {
      gap: 2vw 4%; } }
  @media screen and (min-width: 835px) {
    .list-single ul {
      gap: 20px 2%; } }
  @media screen and (min-width: 1120px) {
    .list-single ul {
      height: 100%;
      flex-direction: column;
      justify-content: space-between;
      gap: 0; } }
.list-single li {
  width: 100%; }
  @media screen and (min-width: 601px) {
    .list-single li {
      width: 48%; } }
  @media screen and (min-width: 1120px) {
    .list-single li {
      width: 100%; } }

.home .area-sitemap {
  background-color: #fff; }

.area-copyright {
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  border-top: 1px solid #dfedf3;
  padding: 7vw 5vw; }
  @media screen and (min-width: 601px) {
    .area-copyright {
      padding: 36px 30px 35px; } }
  @media screen and (min-width: 835px) {
    .area-copyright {
      text-align: right; } }

.home .area-copyright {
  text-align: center;
  padding: 5vw;
  border-top: none; }
  @media screen and (min-width: 601px) {
    .home .area-copyright {
      padding: 20px; } }

/*------------------------------------------------------------------end footer*/
.area-main.flex-s {
  justify-content: space-between; }

.area-main {
  position: relative;
  margin: 0 auto;
  margin-left: 5vw;
  margin-right: 5vw; }
  @media screen and (min-width: 601px) {
    .area-main {
      margin-right: 2vw;
      margin-left: 2vw;
      max-width: 1000px;
      gap: 30px 3%; } }
  @media screen and (min-width: 1300px) {
    .area-main {
      margin-right: auto;
      margin-left: auto; } }

.frame {
  margin-bottom: 35px; }
  @media screen and (min-width: 601px) {
    .frame {
      width: 31.3%;
      margin-bottom: 0; } }

.frame a {
  background-image: url(../img/bg_dot.png);
  background-position: left center;
  padding: 7px;
  border-radius: 12px;
  display: block;
  position: relative; }
  .frame a::after {
    content: "";
    background-position: left center;
    background-size: 30px;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 15px;
    top: 15px; }
  .frame a:hover {
    opacity: 1; }
    .frame a:hover img {
      opacity: 1;
      transform: scale(1.2); }
  .frame a dl {
    /* background-image: url(../img/bg_diagonal.png);
    background-position: left center; 修正 */ 
    border-radius: 10px;
    border: 1px solid;
    transition: all 0.4s ease; }
    .frame a dl dt {
      /* background-color: #fff; 修正 */ 
      width: 100%;
      height: 195px;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
      display: block; }
    .frame a dl img {
      width: 100%;
      height: 195px;
      object-fit: contain; }
  .frame a dd {
    font-size: 1.8rem;
    color: #fff;
    text-align: center;
    padding: 7px;
    position: relative;
    z-index: 10; }
    @media screen and (min-width: 601px) {
      .frame a dd {
        font-size: 1.6rem; } }
    @media screen and (min-width: 1000px) {
      .frame a dd {
        font-size: 1.8rem; } }

@media screen and (min-width: 601px) {
  .frame.ill1,
  .frame.ill2,
  .frame.ill6,
  .frame.ill7 {
    width: 48.5%; } }
@media screen and (min-width: 601px) {
  .frame.ill1 a dl,
  .frame.ill2 a dl,
  .frame.ill6 a dl {
    display: flex;
    flex-direction: row-reverse;
    align-items: center; }
  .frame.ill1 a dt,
  .frame.ill2 a dt,
  .frame.ill6 a dt {
    border-radius: 0 10px 10px 0;
    width: 54%;
    height: 162px; }
    .frame.ill1 a dt img,
    .frame.ill2 a dt img,
    .frame.ill6 a dt img {
      height: 162px; }
  .frame.ill1 a dd,
  .frame.ill2 a dd,
  .frame.ill6 a dd {
    width: 46%;
    padding: 10px; } }

@media screen and (min-width: 601px) {
  .frame.ill3 a dt img,
  .frame.ill4 a dt img,
  .frame.ill5 a dt img {
    height: 195px; } }

@media screen and (min-width: 601px) {
  .frame.ill7 a dt,
  .frame.ill7 a img {
    height: 122px; } }

@media screen and (min-width: 601px) {
  .frame.ill6 {
    width: 65.7%; } }

.frame.ill1 a {
  background-color: #fff; }
  .frame.ill1 a::after {
    background-image: url(../img/icon_illust1.png); }
  /* .frame.ill1 a:hover {
    background-color: rgba(0, 176, 235, 0.5); }
    .frame.ill1 a:hover dl {
      background-color: rgba(0, 176, 235, 0.5); } 修正 */
  .frame.ill1 a dl {
    background-color: #28C7E5;
    border-color: #fff; }

.frame.ill2 a {
  background-color: #fff; }
  .frame.ill2 a::after {
    background-image: url(../img/icon_illust2.png); }
  /* .frame.ill2 a:hover {
    background-color: rgba(255, 155, 24, 0.5); }
    .frame.ill2 a:hover dl {
      background-color: rgba(255, 155, 24, 0.5); } 修正 */
  .frame.ill2 a dl {
    background-color: #FFC57C;
    border-color: #fff; }

.frame.ill3 a {
  background-color: #fff; }
  .frame.ill3 a::after {
    background-image: url(../img/icon_illust3.png); }
 /*  .frame.ill3 a:hover {
    background-color: rgba(233, 202, 26, 0.5); }
    .frame.ill3 a:hover dl {
      background-color: rgba(233, 202, 26, 0.5); } 修正 */
  .frame.ill3 a dl {
    background-color: #B27BED;
    border-color: #fff; }

.frame.ill4 a {
  background-color: #fff; }
  .frame.ill4 a::after {
 background-image: url(../img/icon_illust4.png); } 
 /*  .frame.ill4 a:hover {
    background-color: rgba(26, 192, 103, 0.5); }
    .frame.ill4 a:hover dl {
      background-color: rgba(26, 192, 103, 0.5); } 修正 */
  .frame.ill4 a dl {
    background-color: #FFC57C;
    border-color: #fff; }

.frame.ill5 a {
  background-color: #fff; }
 .frame.ill5 a::after {
 background-image: url(../img/icon_illust5.png); } 
  /*  .frame.ill5 a:hover {
    background-color: rgba(227, 12, 44, 0.5); }
    .frame.ill5 a:hover dl {
      background-color: rgba(227, 12, 44, 0.5); } 修正 */
  .frame.ill5 a dl {
    background-color: #F36362;
    border-color: #fff; }

.frame.ill6 a {
  background-color: #fff; }
 /*  .frame.ill6 a::after {
    background-image: url(../img/icon_illust6.png); } 
 .frame.ill6 a:hover {
    background-color: rgba(40, 76, 195, 0.5); }
    .frame.ill6 a:hover dl {
      background-color: rgba(40, 76, 195, 0.5); } 修正 */
  .frame.ill6 a dl {
    background-color: #fff;
    border-color: #fff; }

.frame.ill7 a {
  background-color: #fff; }
   .frame.ill7 a::after {
  background-image: url(../img/icon_illust7.png); } 
 /*  .frame.ill7 a:hover {
    background-color: rgba(169, 169, 169, 0.5); }
    .frame.ill7 a:hover dl {
      background-color: rgba(169, 169, 169, 0.5); } 修正 */
  .frame.ill7 a dl {
    background-color: #5271ff;
    border-color: #fff; }

.list-banner {
  justify-content: space-between;
  margin-top: 20px;
  gap: 20px 5%; }
  @media screen and (min-width: 601px) {
    .list-banner {
      gap: 0; } }
  .list-banner li {
    width: 47.5%;
     }
    @media screen and (min-width: 601px) {
      .list-banner li {
        width: 24%; } }
    .list-banner li a {
      display: flex;
      justify-content: center;
      border: 1px solid #bfe1ff; background-color: #fff;}
      .list-banner li a:hover {
        border: 1px solid #008ff3; }

article h2 {
  background-image: url(../img/bg_diagonal.png);
  background-position: left center;
  background-color: #1ac067;
  font-size: 1.8rem;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 45px;
  margin: 40px 0 20px;
  padding: 5px 0;
  border-radius: 5px;
  transition: all 0.4s ease; }
  article h2 small {
    font-size: 0.77em;
    font-weight: 500;
    line-height: 1.6;
    display: block; }
  article h2::before {
    content: "";
    background-image: url(../img/icon_h2.png);
    background-position: left center;
    width: 5px;
    height: 33px;
    margin-right: 20px; }
  article h2.ttl-illust {
    position: relative;
    padding-left: 70px;
    margin-left: 10px;
    margin-bottom: 30px; }
  article h2.ttl-illust::before {
    background-position: left -2px top -2px;
    background-size: 74px auto;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border: 2px solid #1ac067;
    position: absolute;
    left: -10px; }
    @media screen and (min-width: 601px) {
      article h2.ttl-illust::before {
        background-size: auto 74px; } }
  article h2.ill1::before {
    background-image: url(../what/img/illust_effort1_s.png); }
    @media screen and (min-width: 601px) {
      article h2.ill1::before {
        background-image: url(../what/img/illust_effort1.png); } }
  article h2.ill2::before {
    background-image: url(../what/img/illust_effort2_s.png); }
    @media screen and (min-width: 601px) {
      article h2.ill2::before {
        background-image: url(../what/img/illust_effort2.png); } }
  article h2.ill3::before {
    background-image: url(../what/img/illust_effort3_s.png); }
    @media screen and (min-width: 601px) {
      article h2.ill3::before {
        background-image: url(../what/img/illust_effort3.png); } }
  article h2.ill4::before {
    background-image: url(../what/img/illust_effort4_s.png); }
    @media screen and (min-width: 601px) {
      article h2.ill4::before {
        background-image: url(../what/img/illust_effort4.png); } }
  article h2.ill5::before {
    background-image: url(../what/img/illust_effort5_s.png); }
    @media screen and (min-width: 601px) {
      article h2.ill5::before {
        background-image: url(../what/img/illust_effort5.png); } }
  article h2.ill6::before {
    background-image: url(../what/img/illust_effort6_s.png); }
    @media screen and (min-width: 601px) {
      article h2.ill6::before {
        background-image: url(../what/img/illust_effort6.png); } }
  article h2.ill7::before {
    background-image: url(../what/img/illust_effort7_s.png); }
    @media screen and (min-width: 601px) {
      article h2.ill7::before {
        background-image: url(../what/img/illust_effort7.png); } }

article section h2 {
  cursor: pointer; }
  article section h2::after {
    content: "";
    background-image: url(../img/icon_close.png);
    background-position: right center;
    background-repeat: no-repeat;
    width: 31px;
    height: 21px;
    margin-left: auto;
    margin-right: 10px;
    flex-shrink: 0; }
  article section h2.opentab::after {
    background-image: url(../img/icon_open.png); }
  article section h2:hover {
    background-color: #008ff3; }

.gimmick-slide.opentab {
  display: none; }

article h3 {
  font-size: 1.8rem;
  color: #008ff3;
  margin: 40px 0 20px; }

article h2 + h3 {
  margin: 20px 0 20px; }

article h4 {
  font-size: 1.8rem;
  margin: 20px 0 15px;
  display: flex;
  align-items: center; }
  article h4::before {
    content: "";
    background-color: #27c771;
    width: 5px;
    height: 22px;
    border-radius: 3px;
    margin-right: 10px; }

article p {
  margin-bottom: 1em; }

article .list-b,
article b {
  color: #f00c47; }

article > picture {
  display: block;
  text-align: center;
  margin: 30px 0; }

article a {
  color: #0f1eb1;
  text-decoration: underline; }
  article a:hover {
    text-decoration: none; }
  article a[target="_blank"]::after {
    content: "";
    background-image: url(../img/icon_ex_a.png);
    background-position: left top;
    background-repeat: no-repeat;
    width: 10px;
    height: 8px;
    display: inline-block;
    margin-left: 5px; }

article ul.list-txt {
  list-style: none;
  margin-left: 0; }
  article ul.list-txt li {
    background-image: url(../img/list_arrow.png);
    background-position: left top 5px;
    background-repeat: no-repeat;
    padding-left: 17px;
    margin-bottom: 1em; }

.column {
  margin-bottom: 30px; }
  @media screen and (min-width: 768px) {
    .column {
      width: 49%;
      margin-bottom: 0; } }

.flex-s .column {
  margin-bottom: 30px; }
  @media screen and (min-width: 601px) {
    .flex-s .column {
      width: 49%;
      margin-bottom: 0; } }

.column-s {
  margin-bottom: 30px;
  text-align: center;
 }
  @media screen and (min-width: 768px) {
    .column-s {
      width: 30%;
      margin-bottom: 0; } }

.column-b {
  margin-bottom: 30px; }
  @media screen and (min-width: 768px) {
    .column-b {
      width: 70%;
      margin-bottom: 0;
      vertical-align: middle;
     } }
table {
  width: 100%; }

/*------------------------------------------------------------------productivity*/
.area-perceive {
  margin: 30px 0; }
  .area-perceive .productivity-txt1 {
    font-size: 2.6rem;
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 700;
    color: #f7ab00;
    text-align: center; }

.productivity-frame1 {
  background-color: #fff;
  padding: 5vw;
  border: 5px solid #a0d8ff;
  border-radius: 16px;
  position: relative;
  margin-bottom: 20px; }
  @media screen and (min-width: 601px) {
    .productivity-frame1 {
      padding: 20px; } }
  .productivity-frame1::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 18px 87px 0 87px;
    border-color: #a0d8ff transparent transparent transparent;
    position: absolute;
    left: calc(50% - 87px);
    bottom: -23px; }
  .productivity-frame1 li:last-child {
    margin-bottom: 0; }

.productivity-txt2 {
  background-color: #f7ab00;
  font-size: 2.6rem;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  padding: 4vw;
  border-radius: 16px; }
  @media screen and (min-width: 601px) {
    .productivity-txt2 {
      padding: 15px; } }

.area-perspective .column {
  width: 100%; }
  @media screen and (min-width: 601px) {
    .area-perspective .column {
      width: 56%; } }
@media screen and (min-width: 601px) {
  .area-perspective .column:first-child {
    width: 42%; } }

.perspective-list {
  margin-bottom: 20px; }
  .perspective-list li {
    background-color: #dcdddd;
    padding: 12px;
    text-align: center;
    border-bottom: 3px solid #fff; }
    .perspective-list li:last-child {
      border: none; }
    .perspective-list li.select {
      background-color: #f7ab00; }
    .perspective-list li:first-child {
      border-radius: 10px 10px 0 0; }
    .perspective-list li:last-child {
      border-radius: 0 0 10px 10px; }

.purpose-list {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 20px;
  border: 2px solid #f6a400;
  border-radius: 14px;
  position: relative; }
  @media screen and (min-width: 601px) {
    .purpose-list::before {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 12px 12px 12px 0;
      border-color: transparent #f6a400 transparent transparent;
      position: absolute;
      left: -12px;
      top: 58px; }
    .purpose-list::after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 9px 9px 9px 0;
      border-color: transparent #fff transparent transparent;
      position: absolute;
      left: -9px;
      top: 60px; } }
  .purpose-list li {
    width: 49%;
    display: flex;
    align-items: baseline; }
    .purpose-list li::before {
      content: "";
      width: 0;
      height: 0;
      margin-right: 4px;
      border-style: solid;
      border-width: 5px 0 5px 7px;
      border-color: transparent transparent transparent #f7ab00; }

.productivity-side1 {
  display: flex;
  flex-direction: column;
  margin: 20px 0; }
  @media screen and (min-width: 601px) {
    .productivity-side1 {
      flex-direction: row;
      min-height: 100px; } }
  .productivity-side1 dt {
    font-size: 1.8rem;
    color: #fff;
    border-radius: 10px 10px 0 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    @media screen and (min-width: 601px) {
      .productivity-side1 dt {
        width: 28%;
        border-radius: 10px 0 0 10px; } }
  .productivity-side1 dd {
    padding: 15px;
    border-radius: 0 0 10px 10px;
    display: flex;
    align-items: center; }
    @media screen and (min-width: 601px) {
      .productivity-side1 dd {
        border-radius: 0 10px 10px 0;
        width: 72%; } }

.type1 dt {
  background-color: #f39400; }
.type1 dd {
  background-color: #feeccf; }

.type2 dt {
  background-color: #11c9ea; }
.type2 dd {
  background-color: #cef8ff; }

.type3 dt {
  background-color: #4066b0; }
.type3 dd {
  background-color: #e3e9f5; }

.type4 dt {
  background-color: #e94c44; }
.type4 dd {
  background-color: #f3c8c6; }

  .caption-a {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px; }
  .caption-a figcaption {
    background-color: #f7ab00;
    color: #fff;
    font-size: 1.6rem;
    padding: 5px 20px;
    border-radius: 40px;
    margin-left: auto; }

.table-scroll {
  width: 100%;
  position: relative;
  overflow: auto; }
  @media screen and (max-width: 835px) {
    .table-scroll .table-history,
    .table-scroll .table-5m,
    .table-scroll .table-3m {
      min-width: 800px; } }

.table-history thead th,
.table-5m thead th,
.table-3m thead th {
  background-color: #c2e6ff;
  padding: 15px;
  text-align: center; }
.table-history thead th + th,
.table-5m thead th + th,
.table-3m thead th + th {
  border-left: 1px solid #fff; }
.table-history tbody th,
.table-5m tbody th,
.table-3m tbody th {
  background-color: #ebf7ff;
  width: 14%;
  text-align: center; }
.table-history tbody td,
.table-5m tbody td,
.table-3m tbody td {
  width: 43%; }
  .table-history tbody td figure,
  .table-5m tbody td figure,
  .table-3m tbody td figure {
    text-align: center; }
.table-history tbody td + td figure,
.table-5m tbody td + td figure,
.table-3m tbody td + td figure {
  text-align: left;
  display: flex;
  align-items: center; }
  .table-history tbody td + td figure img,
  .table-5m tbody td + td figure img,
  .table-3m tbody td + td figure img {
    margin-right: 10px; }
.table-history tbody td + td figure + figure,
.table-5m tbody td + td figure + figure,
.table-3m tbody td + td figure + figure {
  margin-top: 20px; }
.table-history tbody th,
.table-history tbody td,
.table-5m tbody th,
.table-5m tbody td,
.table-3m tbody th,
.table-3m tbody td {
  border: 1px solid #e2edf5;
  padding: 15px; }

.table-history tbody th,
.table-history tbody td {
  vertical-align: top; }
.table-history tbody th {
  width: 16%; }
  @media screen and (min-width: 1301px) {
    .table-history tbody th {
      width: 10%; } }
.table-history tbody td {
  font-size: 1.4rem;
  width: 42%; }
  @media screen and (min-width: 1301px) {
    .table-history tbody td {
      width: 45%; } }
  .table-history tbody td li + li {
    margin-top: 1em; }

.list-pattern dl {
  display: flex;
  align-items: center; }
.list-pattern dl + dl {
  margin-top: 10px; }
.list-pattern dt {
  border: 1px solid #000;
  border-radius: 100%;
  width: 65px;
  height: 65px;
  margin-right: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center; }
.list-pattern dl:nth-child(1) dt {
  background-color: #e0edc2; }
.list-pattern dl:nth-child(2) dt {
  background-color: #ffdbb5; }
.list-pattern dl:nth-child(3) dt {
  background-color: #d6d6d4; }

.productivity-side2 {
  display: flex; }
  .productivity-side2 dt {
    background-color: #11c9ea;
    font-size: 1.8rem;
    color: #fff;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center; }
  .productivity-side2 dd {
    background-color: #fff;
    border-top: 1px solid #d9f9ff;
    border-bottom: 1px solid #d9f9ff;
    padding: 15px;
    display: flex;
    align-items: center; }
  .productivity-side2 dd + dd {
    background-color: #d9f9ff;
    border-radius: 0 8px 8px 0; }

.area-pdca {
  justify-content: space-between; }
  .area-pdca .column + .column {
    text-align: center; }
  @media screen and (min-width: 601px) {
    .area-pdca .column {
      width: 56%; }
    .area-pdca .column + .column {
      width: 42%; } }

/*------------------------------------------------------------------end productivity*/
/*------------------------------------------------------------------step*/
.step-side {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 20px; }
  @media screen and (min-width: 901px) {
    .step-side {
      flex-direction: row; } }
  .step-side > p {
    background-color: #11c9ea;
    font-size: 4rem;
    color: #fff;
    line-height: 1.1;
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5vw 2vw;
    margin: 0; }
    @media screen and (min-width: 601px) {
      .step-side > p {
        padding: 20px 10px; } }
    @media screen and (min-width: 901px) {
      .step-side > p {
        width: 13%;
        padding: 60px 10px;
        border-radius: 8px 0 0 8px; } }
    .step-side > p span {
      font-size: 1.4rem;
      line-height: 1.1; }
    .step-side > p .type-en {
      text-align: center;
      border-top: 3px dotted #fff;
      width: 100%;
      margin-top: 5px;
      padding-top: 5px; }
  .step-side > h3 {
    background-color: #fff;
    border-left: 1px solid #d9f9ff;
    border-right: 1px solid #d9f9ff;
    font-size: 1.8rem;
    color: #000000;
    padding: 5vw 2vw 5vw 5vw;
    margin: 0; }
    @media screen and (min-width: 601px) {
      .step-side > h3 {
        padding: 20px 10px 20px 20px; } }
    @media screen and (min-width: 901px) {
      .step-side > h3 {
        display: flex;
        align-items: center;
        width: 25%;
        border: none;
        border-top: 1px solid #d9f9ff;
        border-bottom: 1px solid #d9f9ff; } }
  .step-side > ul {
    background-color: #d9f9ff;
    border-radius: 0 0 8px 8px;
    padding: 5vw 5vw 5vw calc(5vw + 1.5em);
    margin-left: 0 !important; }
    @media screen and (min-width: 601px) {
      .step-side > ul {
        padding: 20px 20px 20px calc(20px + 1.5em); } }
    @media screen and (min-width: 901px) {
      .step-side > ul {
        border-radius: 0 8px 8px 0;
        width: 62%; } }

/*------------------------------------------------------------------effort*/
.list-effort dl {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px; }
  @media screen and (min-width: 601px) {
    .list-effort dl {
      min-height: 135px;
      flex-direction: row; } }
.list-effort dt {
  background-color: #11c9ea;
  font-size: 1.8rem;
  color: #fff;
  width: 100%;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vw 5vw 110px 5vw; }
  @media screen and (min-width: 601px) {
    .list-effort dt {
      width: 32%;
      border-radius: 8px 0 0 8px;
      flex-direction: column;
      padding: 20px 70px 20px 20px; } }
  .list-effort dt span {
    background-color: #fff;
    font-size: 1.8rem;
    color: #11c9ea;
    text-align: center;
    line-height: 30px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin-right: 5px; }
    @media screen and (min-width: 601px) {
      .list-effort dt span {
        margin-right: 0; } }
.list-effort dd {
  background-color: #d9f9ff;
  width: 100%;
  border-radius: 0 0 8px 8px;
  padding: 80px 15px 15px 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  @media screen and (min-width: 601px) {
    .list-effort dd {
      width: 68%;
      padding: 15px 15px 15px 80px;
      border-radius: 0 8px 8px 0; } }
  .list-effort dd::before {
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    width: 150px;
    height: 165px;
    position: absolute;
    top: -100px;
    left: calc(50% - 75px); }
    @media screen and (min-width: 601px) {
      .list-effort dd::before {
        width: 111px;
        height: 101px;
        top: 20px;
        left: -50px; } }
.list-effort dl:nth-child(1) dd::before {
  background-image: url(../what/img/illust_effort1_s.png); }
  @media screen and (min-width: 601px) {
    .list-effort dl:nth-child(1) dd::before {
      background-image: url(../what/img/illust_effort1.png); } }
.list-effort dl:nth-child(2) dd::before {
  background-image: url(../what/img/illust_effort2_s.png); }
  @media screen and (min-width: 601px) {
    .list-effort dl:nth-child(2) dd::before {
      background-image: url(../what/img/illust_effort2.png); } }
.list-effort dl:nth-child(3) dd::before {
  background-image: url(../what/img/illust_effort3_s.png); }
  @media screen and (min-width: 601px) {
    .list-effort dl:nth-child(3) dd::before {
      background-image: url(../what/img/illust_effort3.png); } }
.list-effort dl:nth-child(4) dd::before {
  background-image: url(../what/img/illust_effort4_s.png); }
  @media screen and (min-width: 601px) {
    .list-effort dl:nth-child(4) dd::before {
      background-image: url(../what/img/illust_effort4.png); } }
.list-effort dl:nth-child(5) dd::before {
  background-image: url(../what/img/illust_effort5_s.png); }
  @media screen and (min-width: 601px) {
    .list-effort dl:nth-child(5) dd::before {
      background-image: url(../what/img/illust_effort5.png); } }
.list-effort dl:nth-child(6) dd::before {
  background-image: url(../what/img/illust_effort6_s.png); }
  @media screen and (min-width: 601px) {
    .list-effort dl:nth-child(6) dd::before {
      background-image: url(../what/img/illust_effort6.png); } }
.list-effort dl:nth-child(7) dd::before {
  background-image: url(../what/img/illust_effort7_s.png); }
  @media screen and (min-width: 601px) {
    .list-effort dl:nth-child(7) dd::before {
      background-image: url(../what/img/illust_effort7.png); } }

.btn-link {
  text-align: right;
  margin-bottom: 0; }
  .btn-link a {
    background-image: url(../img/icon_arrow_s.png);
    background-position: left center;
    background-repeat: no-repeat;
    color: #000;
    text-decoration: none;
    line-height: 1.4;
    padding: 5px 0 5px 20px;
    border-bottom: 1px solid #008ff3;
    display: inline-block; }
    .btn-link a:hover {
      color: #008ff3; }

.btn-tool {
  margin-top: 1em;
  margin-bottom: 0; }
  .btn-tool a {
    background-image: url(../img/icon_arrow_s.png);
    background-position: left center;
    background-repeat: no-repeat;
    color: #000;
    text-decoration: none;
    line-height: 1.4;
    padding: 5px 0 5px 20px;
    border-bottom: 1px solid #008ff3;
    display: inline-block; }
    .btn-tool a:hover {
      color: #008ff3; }
    .btn-tool a[target="_blank"]::after {
      content: "";
      background-image: url(../img/icon_ex_t.png);
      background-position: left top;
      background-repeat: no-repeat;
      width: 10px;
      height: 8px;
      display: inline-block;
      margin-left: 5px; }

.list-page {
  justify-content: space-between;
  margin-top: 60px;
  gap: 20px; }

.top-nav {
  margin-top: 0px;
  margin-bottom: 50px;
}

  .list-page .btn a {
    background-image: url(../img/icon_arrow_s.png);
    background-position: left center;
    background-repeat: no-repeat;
    line-height: 1.4;
    padding: 5px 0 5px 20px;
    border-bottom: 1px solid #008ff3;
    display: inline-block; }
    .list-page .btn a:hover {
      color: #008ff3; }
  .list-page .btn-prev a {
    background-image: url(../img/icon_arrow_s_prev.png); }
  .list-page .btn-next {
    margin-left: auto; }
  .list-page .btn-next a {
    background-position: right center;
    padding: 5px 20px 5px 0; }

.list-steppoint dl {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0 0 40px; }
  @media screen and (min-width: 601px) {
    .list-steppoint dl {
      flex-direction: row; } }
  .list-steppoint dl::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #c0c0c0 transparent transparent transparent;
    position: absolute;
    bottom: 10px;
    left: calc(50% - 20px); }
.list-steppoint dl:last-child {
  padding: 0;
  margin-bottom: 30px; }
  .list-steppoint dl:last-child::after {
    content: none; }
.list-steppoint dt {
  font-size: 1.8rem;
  color: #fff;
  width: 100%;
  padding: 2vw;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media screen and (min-width: 601px) {
    .list-steppoint dt {
      width: 35%;
      padding: 30px;
      min-height: 140px;
      border-radius: 8px 0 0 8px;
      flex-direction: column; } }
  .list-steppoint dt span {
    background-color: #fff;
    font-size: 1.8rem;
    text-align: center;
    line-height: 30px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin-right: 5px;
    flex-shrink: 0; }
    @media screen and (min-width: 601px) {
      .list-steppoint dt span {
        margin-right: 0; } }
.list-steppoint dd {
  width: 100%;
  border-radius: 0 0 8px 8px;
  padding: 2vw;
  position: relative; }
  @media screen and (min-width: 601px) {
    .list-steppoint dd {
      border-radius: 0 8px 8px 0;
      width: 65%;
      padding: 30px; } }
  .list-steppoint dd::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 12px;
    position: absolute;
    left: calc(50% - 12px);
    top: 0; }
    @media screen and (min-width: 601px) {
      .list-steppoint dd::before {
        border-width: 12px 0 12px 12px;
        position: absolute;
        left: 0;
        top: calc(50% - 12px); } }
.list-steppoint dl:nth-child(1) dt {
  background-color: #008ccf; }
  .list-steppoint dl:nth-child(1) dt span {
    color: #008ccf; }
.list-steppoint dl:nth-child(2) dt {
  background-color: #00aca0; }
  .list-steppoint dl:nth-child(2) dt span {
    color: #00aca0; }
.list-steppoint dl:nth-child(3) dt {
  background-color: #f39700; }
  .list-steppoint dl:nth-child(3) dt span {
    color: #f39700; }
.list-steppoint dl:nth-child(4) dt {
  background-color: #e5004f; }
  .list-steppoint dl:nth-child(4) dt span {
    color: #e5004f; }
.list-steppoint dl:nth-child(1) dd {
  background-color: #d6f2ff; }
.list-steppoint dl:nth-child(2) dd {
  background-color: #d3fffc; }
.list-steppoint dl:nth-child(3) dd {
  background-color: #ffeed2; }
.list-steppoint dl:nth-child(4) dd {
  background-color: #ffdce8; }
.list-steppoint dl:nth-child(1) dd::before {
  border-color: #008ccf transparent transparent transparent; }
  @media screen and (min-width: 601px) {
    .list-steppoint dl:nth-child(1) dd::before {
      border-color: transparent transparent transparent #008ccf; } }
.list-steppoint dl:nth-child(2) dd::before {
  border-color: #00aca0 transparent transparent transparent; }
  @media screen and (min-width: 601px) {
    .list-steppoint dl:nth-child(2) dd::before {
      border-color: transparent transparent transparent #00aca0; } }
.list-steppoint dl:nth-child(3) dd::before {
  border-color: #f39700 transparent transparent transparent; }
  @media screen and (min-width: 601px) {
    .list-steppoint dl:nth-child(3) dd::before {
      border-color: transparent transparent transparent #f39700; } }
.list-steppoint dl:nth-child(4) dd::before {
  border-color: #e5004f transparent transparent transparent; }
  @media screen and (min-width: 601px) {
    .list-steppoint dl:nth-child(4) dd::before {
      border-color: transparent transparent transparent #e5004f; } }

.txt-gradient strong {
  background: linear-gradient(transparent 60%, #fff606 0);
  font-size: 1.6rem;
  line-height: 2; }

/*------------------------------------------------------------------support*/
.partition-type1 {
  justify-content: space-between; }
  @media screen and (min-width: 601px) {
    .partition-type1 .column {
      width: 27.5%; }
    .partition-type1 .column:first-child {
      width: 70%; } }
  .partition-type1 figure {
    text-align: center; }
  .partition-type1 figcaption {
    border: 3px solid #ff9bba;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 20px;
    position: relative; }
    .partition-type1 figcaption::before {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 18px 9px 0 9px;
      border-color: #ff9bba transparent transparent transparent;
      position: absolute;
      left: calc(50% - 9px);
      bottom: -18px; }
    .partition-type1 figcaption::after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 12px 6px 0 6px;
      border-color: #fff transparent transparent transparent;
      position: absolute;
      left: calc(50% - 6px);
      bottom: -10px; }

.area-place_making {
  background-color: #d9f9ff;
  border-radius: 10px;
  padding: 5vw; }
  @media screen and (min-width: 601px) {
    .area-place_making {
      padding: 30px; } }
  .area-place_making h3 {
    color: #006ecb;
    text-align: center; }
  .area-place_making .flex + .flex {
    margin-top: 20px; }
  .area-place_making figure img {
    border: 1px solid #92d4e0; }

.area-point {
  background-color: #f7ab00;
  border-radius: 10px;
  margin: 30px 0;
  padding: 2vw; }
  @media screen and (min-width: 601px) {
    .area-point {
      padding: 10px; } }
  .area-point dt {
    background-image: url(../support/img/icon_point_s.png);
    background-size: 20px;
    background-position: left 7px top 11px;
    background-repeat: no-repeat;
    background-color: #fff;
    color: #f7ab00;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 40px;
    border-radius: 8px 8px 0 0;
    padding: 0 0 0 30px;
    margin-bottom: 10px; }
    @media screen and (min-width: 835px) {
      .area-point dt {
        background-image: url(../support/img/icon_point.png);
        background-position: left 7px top 6px;
        background-size: auto;
        padding: 0 0 0 40px; } }
  .area-point dd {
    background-image: url(../support/img/icon_arrow_y.png);
    background-position: left top 8px;
    background-repeat: no-repeat;
    color: #fff;
    padding-left: 17px;
    margin-bottom: 6px; }

.area-groupsize {
  gap: 20px 4%; }
  .area-groupsize dl {
    margin-bottom: 10px; }
    @media screen and (min-width: 601px) {
      .area-groupsize dl {
        margin-bottom: 0;
        width: 48%; } }
  .area-groupsize dt {
    background-color: #11c9ea;
    color: #fff;
    font-size: 1.6rem;
    padding: 5px;
    border-radius: 3px;
    display: inline-block; }

.txt-groupsize {
  font-size: 2.6rem;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  color: #f7ab00;
  text-align: center;
  margin-top: 20px; }

.area-blackboard .flex-s {
  justify-content: space-between; }
.area-blackboard .column {
  background-color: #d9f9ff;
  padding: 5vw;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 0;
  border-radius: 10px 10px 0 0; }
  @media screen and (min-width: 601px) {
    .area-blackboard .column {
      padding: 20px 20px 0; }
      .area-blackboard .column::after {
        content: "";
        background-color: #11c9ea;
        height: 10px;
        width: 14%;
        position: absolute;
        top: calc(50% - 20px);
        right: -8%; } }
  .area-blackboard .column dt {
    font-size: 1.8rem;
    color: #006ecb;
    text-align: center;
    margin-bottom: 15px; }
  .area-blackboard .column dd {
    background-color: #fff;
    padding: 5vw;
    flex-grow: 1; }
    @media screen and (min-width: 601px) {
      .area-blackboard .column dd {
        padding: 20px; } }
.area-blackboard .column + .column {
  background-color: #fff6d9;
  margin-bottom: 30px;
  border-radius: 0 0 10px 10px; }
  @media screen and (min-width: 601px) {
    .area-blackboard .column + .column {
      margin-bottom: 0; } }
  .area-blackboard .column + .column dt {
    color: #ff7e00; }
  .area-blackboard .column + .column::after {
    content: "";
    background-color: transparent;
    top: -10px;
    left: calc(50% - 20px);
    right: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 20px 0 20px;
    border-color: #11c9ea transparent transparent transparent;
    position: absolute; }
    @media screen and (min-width: 601px) {
      .area-blackboard .column + .column::after {
        top: calc(50% - 35px);
        left: 0;
        right: auto;
        border-width: 20px 0 20px 30px;
        border-color: transparent transparent transparent #11c9ea; } }
@media screen and (min-width: 601px) {
  .area-blackboard .flex-s:first-child .column {
    border-radius: 10px 10px 0 0;
    padding-bottom: 10px; }
    .area-blackboard .flex-s:first-child .column::after {
      top: 63%; }
  .area-blackboard .flex-s:first-child .column + .column::after {
    top: calc(63% - 15px); }
  .area-blackboard .flex-s:nth-child(2) dt {
    display: none; }
  .area-blackboard .flex-s:nth-child(2) .column {
    padding-top: 0;
    padding-bottom: 10px;
    border-radius: 0 0; }
  .area-blackboard .flex-s:last-child dt {
    display: none; }
  .area-blackboard .flex-s:last-child .column {
    border-radius: 0 0 10px 10px;
    padding-top: 0;
    padding-bottom: 20px; } }

.area-break .column {
  background-color: #d9f9ff;
  padding: 5vw;
  border-radius: 10px; }
  @media screen and (min-width: 601px) {
    .area-break .column {
      padding: 20px; } }
  .area-break .column dt {
    font-size: 1.8rem;
    color: #006ecb;
    text-align: center;
    margin-bottom: 15px; }
  .area-break .column dd {
    background-color: #fff;
    padding: 5vw 5vw 0; }
    @media screen and (min-width: 601px) {
      .area-break .column dd {
        padding: 20px 20px 0; } }
  .area-break .column dd + dd {
    padding: 5vw; }
    @media screen and (min-width: 601px) {
      .area-break .column dd + dd {
        padding: 20px; } }
  .area-break .column b {
    background-color: #11c9ea;
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 5px;
    padding: 5px;
    margin-bottom: 5px;
    display: inline-block; }
.area-break .column + .column {
  background-color: #fff6d9; }
  .area-break .column + .column dt {
    color: #ff7e00; }

.area-flow {
  background-color: #d9f9ff;
  border-radius: 10px;
  padding: 5vw;
  margin: 20px 0;
  flex-direction: column;
  gap: 20px; }
  @media screen and (min-width: 601px) {
    .area-flow {
      flex-direction: row;
      padding: 30px;
      gap: 0; } }
  .area-flow h3 {
    color: #006ecb;
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    width: 100%; }
  .area-flow dl {
    width: 19%; }
    @media screen and (max-width: 600px) {
      .area-flow dl {
        background-color: #11c9ea;
        display: flex;
        align-items: stretch;
        width: 100%; } }
  .area-flow dt {
    background-color: #11c9ea;
    color: #fff;
    padding: 5px;
    margin-bottom: 5px;
    text-align: center; }
    @media screen and (max-width: 600px) {
      .area-flow dt {
        writing-mode: vertical-rl;
        white-space: normal;
        flex-shrink: 0;
        margin-bottom: 0; } }
  .area-flow span {
    writing-mode: horizontal-tb; }
  .area-flow dd {
    width: auto; }
    @media screen and (max-width: 600px) {
      .area-flow dd {
        display: flex;
        align-items: center;
        background-color: #fff;
        width: 25%; } }
  .area-flow dd + dd {
    margin-top: 5px; }
    @media screen and (max-width: 600px) {
      .area-flow dd + dd {
        background-color: #d9f9ff;
        flex-grow: 1;
        padding-left: 10px;
        margin-top: 0;
        display: block; } }

.img-set {
  position: relative;
  min-height: 212px;
  margin-bottom: 40px; }
  .img-set dd:last-child {
    overflow: hidden; }
    @media screen and (max-width: 600px) {
      .img-set dd:last-child::before {
        content: "";
        background-image: url(../support/img/img_point.png);
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: contain;
        /**/
        float: right;
        width: 123px;
        height: 100px;
        margin-right: -10px; } }
  @media screen and (min-width: 601px) {
    .img-set::before {
      content: "";
      background-image: url(../support/img/img_point.png);
      background-position: right bottom;
      background-repeat: no-repeat;
      background-size: contain;
      /**/
      float: right;
      width: 246px;
      height: 200px;
      margin-right: -10px; } }
  .img-set::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #c0c0c0 transparent transparent transparent;
    position: absolute;
    bottom: -30px;
    left: calc(50% - 20px); }

.txt-summary {
  background-color: #f7ab00;
  font-size: 2.6rem;
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: #fff;
  text-align: center;
  padding: 15px;
  border-radius: 16px;
  position: relative;
  clear: both; }
  .txt-summary::before, .txt-summary::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #c0c0c0 transparent transparent transparent;
    position: absolute;
    top: -30px;
    left: calc(50% - 90px); }
  .txt-summary::after {
    left: calc(50% + 50px); }

.area-case {
  position: relative;
  padding-left: 40px; }
  .area-case .step-side {
    padding-bottom: 40px;
    margin-bottom: 0;
    position: relative;
    width: 100%; }
    .area-case .step-side .type-en {
      text-align: center;
      border-top: 3px dotted #fff;
      width: 100%;
      margin-top: 5px;
      padding-top: 5px; }
    .area-case .step-side > div {
      background-color: #d9f9ff;
      border-radius: 0 0 8px 8px;
      padding: 5vw;
      margin-left: 0 !important;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      @media screen and (min-width: 601px) {
        .area-case .step-side > div {
          padding: 20px; } }
      @media screen and (min-width: 901px) {
        .area-case .step-side > div {
          border-radius: 0 8px 8px 0;
          width: 62%; } }
    .area-case .step-side::after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 20px 20px 0 20px;
      border-color: #c0c0c0 transparent transparent transparent;
      position: absolute;
      bottom: 10px;
      left: calc(50% - 20px); }
    .area-case .step-side:last-child {
      padding: 0; }
      .area-case .step-side:last-child::after {
        content: none; }
  .area-case .step-side:nth-child(3)::before,
  .area-case .step-side:nth-child(4)::before,
  .area-case .step-side:nth-child(5)::before {
    content: "";
    width: 40px;
    height: 100%;
    border-left: 6px solid #ffbb28;
    position: absolute;
    left: -46px; }
  .area-case .step-side:last-child::before {
    content: "";
    width: 40px;
    height: 50%;
    border: 6px solid #ffbb28;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 16px;
    position: absolute;
    left: -46px;
    top: 0; }
  .area-case .step-side:nth-child(2)::before {
    content: "";
    width: 22px;
    height: 70%;
    border: 6px solid #ffbb28;
    border-right: none;
    border-bottom: none;
    border-radius: 16px 0 0 0;
    position: absolute;
    left: -46px;
    top: calc((100% - 40px) / 2); }
  @media screen and (min-width: 901px) {
    .area-case .step-side:nth-child(2) > p {
      position: relative; } }
  .area-case .step-side:nth-child(2) > p::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 0 13px 18px;
    border-color: transparent transparent transparent #ffbb28;
    position: absolute;
    left: -18px;
    top: calc((100% - 40px) / 2 - 10px); }
    @media screen and (min-width: 901px) {
      .area-case .step-side:nth-child(2) > p::after {
        top: calc(50% - 10px); } }

.area-tool {
  position: relative; }
  .area-tool .step-side {
    padding-bottom: 40px;
    margin-bottom: 0;
    position: relative;
    width: 100%; }
    .area-tool .step-side > div {
      background-color: #d9f9ff;
      border-radius: 0 0 8px 8px;
      padding: 5vw;
      margin-left: 0 !important;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      @media screen and (min-width: 601px) {
        .area-tool .step-side > div {
          padding: 20px; } }
      @media screen and (min-width: 901px) {
        .area-tool .step-side > div {
          border-radius: 0 8px 8px 0;
          width: 62%; } }
    @media screen and (min-width: 901px) {
      .area-tool .step-side > p {
        width: 13%;
        padding: 20px 10px;
        border-radius: 8px 0 0 8px; } }

.frame-qa h3 {
  color: #000000;
  line-height: 1.6;
  padding-bottom: 15px;
  margin-top: 40px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ffdda5; }
.frame-qa p {
  display: flex;
  flex-direction: column;
  position: relative; }
  @media screen and (min-width: 601px) {
    .frame-qa p {
      flex-direction: row;
      align-items: center; } }
  .frame-qa p::before {
    content: "";
    background-image: url(../support/img/icon_anser_s.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    margin-bottom: 10px;
    flex-shrink: 0;
    align-self: center; }
    @media screen and (min-width: 835px) {
      .frame-qa p::before {
        background-image: url(../support/img/icon_anser.png);
        width: 44px;
        height: 44px;
        margin-right: 10px;
        margin-bottom: 0; } }

.frame-qa + .frame-qa {
  margin-top: 40px; }

dl.area-info dt {
  font-size: 1.2rem;
  color: #11c9ea;
  line-height: 1.1; }
dl.area-info dd + dt {
  margin-top: 10px; }

a.bclist {
  display: inline-block;
  margin-top: 15px;	
  text-decoration: underline;
  color: #333333;
}

a:hover.bclist {
  color: #999999;	
}