@charset "UTF-8";

/* ================================================== */
/* base */
/* ================================================== */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

:root {
  --bulma-column-gap: 1.2rem;
  --bulma-navbar-height: 6.8rem;
  --color-black: rgba(50,50,50,1);
  --color-blue: rgba(50,141,184,1);
  --color-gray: rgba(225,225,225,1);
  --color-gray-dark: rgba(100,100,100,1);
  --color-gray-light: rgba(240,240,240,1);
  --color-navy: rgba(38,46,119,1);
  --color-navy-light: rgba(38,46,119,.5);
  --color-pink: rgba(235,128,155,1);
  --color-white: rgba(255,255,255,1);
  --color-yellow: rgba(255,215,0,1);
  --color-license-blue: rgba(32,67,144,1);
  --color-license-green: rgba(35,117,77,1);
  --color-license-orange: rgba(177,78,22,1);
  --color-license-purple: rgba(92,38,153,1);
  --color-license-yellow: rgba(144,124,35,1);
  --border-radius-card: .75rem;
  --font-size-normal: 1.6rem;
  --font-size-small: 1.4rem;
  --font-weight-normal: 400;
  --font-weight-bold: 800;
  --margin-bottom-block: 4.4rem;
  --margin-bottom-content: 2.4rem;
  --margin-bottom-card-content: 1.2rem;
  --padding-card-content: 2.4rem;
}

html {
  font-size: 62.5%;
  height: 100%;
}

body {
  color: var(--color-black);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
  '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック','Yu Gothic',
  'Hiragino Kaku Gothic ProN','メイリオ', arial, Meiryo,
  'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-normal);
  height: 100%;
  line-height: 1.8;
  width: 100%;
}

img {
  vertical-align: top;
}

/* ================================================== */
/* elements - button */
/* ================================================== */
.button,
.button:hover {
  color: var(--color-white);
}
.button {
  background-color: var(--color-navy);
  border: none;
  font-size: 2rem;
}
.button:hover {
  background-color: var(--color-pink);
  text-decoration: none;
}

.button-white {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.toggle a {
  line-height: 1.5;
}

.toggle {
  display: flex;
}

.toggle .toggle_button a {
  background-color: var(--color-navy-light);
  color: var(--color-white);
  padding: 1rem 2rem;
}
.toggle .toggle_button a:hover {
  opacity: 1;
}
.toggle .toggle_button:first-child a {
  border-radius: 4rem 0 0 4rem;
}
.toggle .toggle_button:last-child a {
  border-radius: 0 4rem 4rem 0;
}
.toggle .toggle_button.is-active a {
  background-color: var(--color-navy);
  color: var(--color-white);
  opacity: 1;
}
.toggle .toggle_button a:hover,
.toggle .toggle_button.is-active a:hover {
  background-color: var(--color-pink);
  text-decoration: none;
}

@media screen and (max-width: 1023px) {
  .toggle .toggle_button a {
    align-items: center;
    display: flex;
    padding: 1rem 1.5rem;
  }
}

/* ================================================== */
/* elements - content */
/* ================================================== */
.content.border-content:not(:last-child) {
  border-bottom: 1px solid var(--color-gray);
  margin-bottom: var(--margin-bottom-content);
  padding-bottom: var(--margin-bottom-content);
}

.content blockquote,
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.content p, .content ul {
  color: var(--color-black);
}

.content blockquote {
  background-color: var(--color-gray-light);
  border-inline-start: 5px solid var(--color-gray);
}

.content h4:not(:last-child) {
  font-size: var(--font-size-normal);
  margin-bottom: var(--margin-bottom-card-content);
}

.content p:not(:last-child),
.content ul:not(:last-child) {
  margin-bottom: var(--margin-bottom-content);
}

.content dl dd,
.content ul ul,
.content ul.list-border {
  margin: 0;
}

.content ul:not(:first-child) {
  margin-top: 0;
}

.content ul.list-style-none {
  list-style: none;
}
.content ul.list-border > li:not(:last-child) {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
}
.content ul.list-border.list-border-dotted > li:not(:last-child) {
  border-bottom: 1px dotted var(--color-gray);
}
.content ul.list-border.list-border-solid > li:not(:last-child) {
  border-bottom: 1px solid var(--color-gray);
}

.link_arrow-foward::after {
  content: '\e5c8';
  font-family: 'Material Icons';
  margin: 0;
}

.link_open-in-new::after {
  content: '\e89e';
  font-family: 'Material Icons';
  margin: 0;
}

.list_disc li {
  list-style: disc inside;
  padding-left: 1.3em;
  text-indent: -1.3em;
}
.list_disc li ul li {
  list-style-type: circle;
}

.stretched-link {
  position: static;
}
.stretched-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* ================================================== */
/* elements - image */
/* ================================================== */
.image.image-max-width-375 {
  margin: 0 auto;
  max-width: 375px;
}
.image.image-radius img {
  border-radius: var(--border-radius-card);
}

/* ================================================== */
/* elements - tag */
/* ================================================== */
.tag {
  background-color: var(--color-black);
  border-radius: 0;
  color: var(--color-white);
  display: inline-block;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  height: auto;
  padding: 0 .5rem;
  white-space: normal;
}
.tag.is-pink {
  background-color: var(--color-white);
  color: var(--color-pink);
}

/* ================================================== */
/* elements - title */
/* ================================================== */
.title {
  color: var(--color-black);
  line-height: 1.4;
}
.title:not(:last-child) {
  margin-bottom: var(--margin-bottom-block);
}
.title.is-1 {
  font-size: 6.4rem;
}
.title.is-2 {
  font-size: 4.8rem;
  line-height: 1.2;
}
.title.is-3 {
  font-size: 3.2rem;
}
.title.is-4 {
  font-size: 2.4rem;
}
.title.is-5 {
  font-size: var(--font-size-normal);
}

/* ================================================== */
/* components - card */
/* ================================================== */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.card.is-hover-effect:hover {
  transform: translateY(-5px); 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
}

.card-image.card-image-radius {
  border-radius: var(--border-radius-card);
}

.card-content {
  padding: var(--padding-card-content);
}

.card-content-border {
  border: 1px solid var(--color-gray-light);
}

.card-content .content figure:not(:last-child),
.card-content .content h3:not(:last-child),
.card-content .content p:not(:last-child),
.card-content .content .card-content-columns:not(:last-child),
.card-content .content .title:not(:last-child) {
  margin: 0 auto var(--margin-bottom-card-content);
}

.card-content .content-border:not(:last-child) {
  border-bottom: 1px solid var(--color-gray);
  margin-bottom: var(--margin-bottom-card-content);
  padding-bottom: var(--margin-bottom-card-content);
}

.card-content .content-border h3:last-child {
  margin: 0 auto 0;
}

.card-content .card-content-columns {
  align-items: center;
  display: flex;
}

.card-content .card-content-column:not(:last-child) {
  margin-right: var(--margin-bottom-card-content);
}

@media screen and (max-width: 768px) {
  .card-content-columns {
    flex-direction: column;
  }
  .card-content .card-content-column:not(:last-child) {
    margin-bottom: var(--margin-bottom-card-content);
    margin-right: 0;
  }
}

/* ================================================== */
/* components - navbar */
/* ================================================== */
.navbar {
  font-size: var(--font-size-small);
}

.navbar-brand {
  padding: .5rem 0;
}
.navbar-brand a.navbar-item {
  background-color: var(--color-white);
}
.navbar-brand .navbar-item img {
  height: 48px;
  max-height: none;
}

a.navbar-item,
a.navbar-item:hover,
.navbar-link {
  color: var(--color-black);
}
a.navbar-item:hover,
a.navbar-link:hover {
  background-color: var(--color-gray-light);
  text-decoration: none;
}

.navbar-burger {
  color: var(--color-navy);
}
.navbar-burger:hover {
  background-color: transparent;
}

.navbar-dropdown {
  border: 1px solid var(--color-gray);
  border-radius: var(--border-radius-card);
  font-size: var(--font-size-small);
}
.navbar-dropdown a {
  font-weight: var(--font-weight-normal);
}
.navbar-dropdown a.navbar-item:not(.is-active,.is-selected) {
  background-color: var(--color-white);
  color: var(--color-black);
}
.navbar-dropdown a.navbar-item:hover {
  background-color: var(--color-gray-light);
}

.navbar-link:not(.is-arrowless):after {
  border-color: var(--color-blue);
}

@media screen and (max-width: 1023px) {
  .navbar-dropdown {
    border: none;
  }
}

/* ================================================== */
/* columns */
/* ================================================== */
.columns.text-image .column.is-two-thirds {
  padding-right: 3.25rem;
}

.column-step:not(:first-child) {
  padding-left: 0;
}
.column-step:not(:last-child) {
  padding-right: 0;
}
.column-step .column-step-bar {
  margin-bottom: var(--margin-bottom-content);
}
.column-step .column-step-bar::before,
.column-step .column-step-bar::after {
  background-color: var(--color-gray);
  content: '';
  flex-grow: 1;
  height: 8px;
}
.column-step .column-step-label {
  border: 4px solid var(--color-gray);
  border-radius: 5rem;
  font-size: 3.2rem;
  height: 72px;
  line-height: 1;
  width: 72px;
}
.column-step .title {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .columns.text-image {
    display: flex;
  }
  .columns.text-image {
    flex-direction: column-reverse;
  }
  .columns.text-image .column.is-two-thirds .title {
    margin-bottom: .75rem;
  }
  .columns.text-image .column.is-two-thirds .content {
    padding-top: 2.25rem;
  }
  .columns.text-image .column.is-two-thirds .content .image.is-flex-mobile {
    margin-bottom: 3rem;
  }
  .columns.text-image .column.is-two-thirds {
    padding-right: var(--bulma-column-gap);
  }
  .columns.text-image .image {
    text-align: center;
  }
  .columns.text-image .image img {
    margin: 0 auto;
    max-width: 375px;
  }

  .column-step:not(:first-child) {
    padding-left: var(--bulma-column-gap);
  }
  .column-step:not(:last-child) {
    padding-right: var(--bulma-column-gap);
  }
}

/* ================================================== */
/* layout - hero */
/* ================================================== */
#hero {
  background-color: var(--color-navy);
}
#hero .hero-body {
  padding: 10rem 0;
}

/* ================================================== */
/* layout - section */
/* ================================================== */
.section {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

/* ================================================== */
/* layout - footer */
/* ================================================== */
footer {
  border-top: 1px solid var(--color-gray);
  font-size: 1.2rem;
  text-align: center;
}

footer a {
  color: var(--color-black);
}

footer .content .footer-menu {
  display: flex;
  justify-content: center;
}
footer .content .footer-menu li {
  margin: 0 1rem;
}

footer .content .footer-service-logo {
  display: flex;
  justify-content: center;
}
footer .content .footer-service-logo img {
  height: 120px;
}

/* ================================================== */
/* helpers - color */
/* ================================================== */
.background_blue {
  background-color: var(--color-blue);
}
.background_gray {
  background-color: var(--color-gray);
}
.background_gray-dark {
  background-color: var(--color-gray-dark);
}
.background_gray-light {
  background-color: var(--color-gray-light);
}
.background_navy {
  background-color: var(--color-navy);
}
.background_pink {
  background-color: var(--color-pink);
}
.background_yellow {
  background-color: var(--color-yellow);
}

.background_license_blue {
  background-color: var(--color-license-blue);
}
.background_license-green {
  background-color: var(--color-license-green);
}
.background_license_orange {
  background-color: var(--color-license-orange);
}
.background_license_purple {
  background-color: var(--color-license-purple);
}
.background_license_yellow {
  background-color: var(--color-license-yellow);
}

.border_gray {
  border-color: var(--color-gray);
}

.border_white,
.card-content .content-border.border_white:not(:last-child) {
  border-color: var(--color-white);
}

.color_gray-dark,
.content .color_gray-dark {
  color: var(--color-gray-dark);
}

.color_navy,
.content .color_navy {
  color: var(--color-navy);
}

.color_black {
  color: var(--color-black);
}

/* ================================================== */
/* helpers - typography */
/* ================================================== */
a, h1, h2, h3, h4 {
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--color-blue);
}
a:hover,
a:hover figcaption {
  text-decoration: underline;
}

.is-size-4 {
  font-size: var(--font-size-normal)!important;
}

.is-size-5 {
  font-size: var(--font-size-small)!important;
}

.ff_josefin {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* ================================================== */
/* helpers - visibility */
/* ================================================== */
@media screen and (max-width: 768px) {
  .ta_center_mobile {
    text-align: center;
  }
}