@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-black-h: 0;
  --bulma-black-s: 0%;
  --bulma-black-l: 20%;
  --bulma-navbar-height: 5.6rem;
  --bulma-text: rgba(51,51,51,1);
  --color-blue: rgba(50,141,184,1);
  --color-gray: rgba(224,224,224,1);
  --color-navy: rgba(38,46,119,1);
  --color-dark-navy: rgba(13,21,94,1);
  --color-light-navy: rgba(38,46,119,.5);
  --color-pink: rgba(235,128,155,1);
  --color-white: rgba(255,255,255,1);
}

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

body {
  color: var(--bulma-text);
  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: 1.6rem;
  font-weight: 400;
  height: 100%;
  line-height: 1.8;
  width: 100%;
}

img {
  vertical-align: top;
}

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

.narrow-content {
  margin: 0 auto;
  max-width: 768px;
  width: 100%;
}

.group {
  margin-bottom: 5rem;
}
.group:last-child {
  margin-bottom: 0;
}

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

/* ================================================== */
/* typography */
/* ================================================== */
a, h1, h2, h3, h4 {
  font-weight: 800;
}

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

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 5rem;
  line-height: 1.2;
}

h3 {
  font-size: 3rem;
  line-height: 1.4;
}

.fw_bold {
  font-weight: 800;
}

.fw_normal {
  font-weight: 400;
}

/* ================================================== */
/* elements */
/* ================================================== */
.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;
}

.content h4:not(:last-child) {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.content p:not(:last-child) {
  margin-bottom: 3rem;
}

.content dl dd,
.content ul,
.content ul ul,
.content ul.list-border {
  margin: 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);
}

.title {
  color: var(--bulma-text);
  line-height: 1.6;
}
.title:not(:last-child) {
  margin-bottom: 4rem;
}
.title.is-1 {
  font-size: 5.4rem;
}
.title.is-2 {
  font-size: 3.6rem;
}
.title.is-3 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.card-content .title:not(:last-child) {
  margin-bottom: 2rem;
}

.toggle a {
  line-height: 1.5;
}

.toggle {
  display: flex;
}

.toggle .toggle_button a {
  background-color: var(--color-light-navy);
  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;
  }
}

/* ================================================== */
/* components */
/* ================================================== */
.card-content {
  padding: 4rem;
}

.navbar {
  font-size: 1.4rem;
}

.navbar-brand {
  padding: .5rem 0;
}
.navbar-brand .navbar-item img {
  height: 36px;
  max-height: none;
}

a.navbar-item,
a.navbar-item:hover {
  color: hsl(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l));
}
a.navbar-item:hover {
  background-color: transparent;
}

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

.tag {
  background-color: hsl(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l));
  border-radius: 0;
  color: var(--color-white);
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 800;
  height: auto;
  padding: 0 .5rem;
  text-align: center;
}
.tag.is-pink {
  background-color: var(--color-white);
  color: var(--color-pink);
}

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

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

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

footer {
  font-size: 1.2rem;
  text-align: center;
}
footer .content .footer-logo,
footer .content ul.footer-nav {
  margin-bottom: 2rem;
}
footer .content .footer-logo {
  display: flex;
  justify-content: center;
}
footer .content .footer-logo img {
  height: 120px;
}

/* ================================================== */
/* helpers */
/* ================================================== */
.bc_blue {
  background-color: var(--color-blue);
}

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

.bc_dark-navy {
  background-color: var(--color-dark-navy);
}

.bc_light-navy {
  background-color: #eff1ff;
}

.bc_pink {
  background-color: var(--color-pink);
}

.c_navy {
  color: var(--color-navy);
}

.fs_small {
  font-size: 1.4rem;
}

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