@charset "UTF-8";

/* Layout
 *********************************** */
.basic-layout.page-container-wrapper {
  background: #fff3d5;
}

/* Basic Page Header
 *********************************** */
.view-browser .basic-page-header {
  height: 100vw;
  max-height: 1024px;
  background: url('/images/home/bg_header.png') center top repeat-x,
    url('/images/home/pc_bg_yellow_01.png') center bottom -200px repeat-x,
    url('/images/home/bg_tree.png') center top /cover no-repeat #0a7344;
}

.basic-page-header__title {
  padding-top: 12px;
  text-align: center;

  margin-right: auto;
  margin-left: auto;
  max-width: 960px;
}

.basic-page-header__title-image {
  width: 36vw;
  max-width: 320px;
  height: auto;
}

.basic-page-header__global-nav {
  margin-top: 12px;
  text-align: center;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  margin-right: auto;
  margin-left: auto;
  max-width: 960px;
}

.basic-page-header__global-nav .item {
  flex: 0 0 25%;
  box-sizing: border-box;
  text-align: center;
}

.basic-page-header__global-nav .item img {
  height: 6vw;
}

@media (min-width: 768px) {
  .basic-page-header__global-nav .item img {
    height: auto;
  }
}

/* Main Content
 *********************************** */
.view-browser .basic-main-block {
  margin-top: -68vw;
}

@media (min-width: 768px) {
  .view-browser .basic-main-block {
    margin-top: -72vw;
  }
}

@media (min-width: 1024px) {
  .view-browser .basic-main-block {
    margin-top: -800px;
  }
}

.basic-layout > .container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 960px;
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

.basic-layout-container-wrapper {
  margin-right: auto;
  margin-left: auto;
  max-width: 576px;
  line-height: 1.555;
  font-family: 'M PLUS 1p', 'Helvetica Neue',
    Arial,
    'Hiragino Kaku Gothic ProN',
    'Hiragino Sans',
    Meiryo,
    sans-serif;
  font-size: 18px;
}

@media (min-width: 768px) {
  .basic-layout-container-wrapper {
    max-width: 980px;
  }
}

/* Ribbon
 *********************************** */
.basic-layout .ribbon-wrapper {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  overflow: visible;
  padding: 20px 0;
  width: 100%;
}

.basic-layout .title-ribbon {
  background: #fc8524;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  height: 48px;
  line-height: 48px;
  padding: 0 8px;
  position: relative;
  text-align: center;
  z-index: 1;
}

@media (min-width: 425px) {
  .basic-layout .title-ribbon {
    font-size: 24px;
    height: 48px;
    line-height: 48px;
    padding: 0 18px;
  }
}

@media (min-width: 768px) {
  .basic-layout .title-ribbon {
    font-size: 36px;
    height: 60px;
    line-height: 60px;
    padding: 0 36px;
  }
}

.basic-layout .title-ribbon::before,
.basic-layout .title-ribbon::after {
  background: inherit;
  content: "";
  height: 100%;
  position: absolute;
  width: 24px;
  z-index: 0;
}

@media (min-width: 425px) {
  .basic-layout .title-ribbon::before,
  .basic-layout .title-ribbon::after {
    width: 32px;
  }
}

@media (min-width: 768px) {
  .basic-layout .title-ribbon::before,
  .basic-layout .title-ribbon::after {
    width: 42px;
  }
}

.basic-layout .title-ribbon::before {
  clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%);
  left: -24px;
  top: 0;
  transform: scaleX(-1);
}

.basic-layout .title-ribbon::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 50% 50%);
  right: -24px;
  top: 0;
  transform: scaleX(-1);
}

/* Ribbon Block
 *********************************** */
.basic-layout .ribbon-block {
  margin-top: -36px;
  padding: 16px 16px 16px 16px;
  border: 2px solid #fc8524;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
  color: #970f06;
}