@charset "UTF-8";
@keyframes rotate {
  0% {
    transform: rotateZ(0)
  }
  100% {
    transform: rotateZ(360deg)
  }
}

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, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

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

body {
  line-height: 1;
  overflow-x: hidden;
}

ol, ul {
  list-style: none
}

blockquote, q {
  quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}

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


/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

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

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline
}

audio:not([controls]) {
  display: none;
  height: 0
}

[hidden], template {
  display: none
}

a {
  background-color: transparent
}

a:active, a:hover {
  outline: 0
}

abbr[title] {
  border-bottom: 1px dotted
}

b, strong {
  font-weight: 700
}

dfn {
  font-style: italic
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

mark {
  background: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sup {
  top: -.5em
}

sub {
  bottom: -.25em
}

img {
  border: 0
}

svg:not(:root) {
  overflow: hidden
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0
}

pre {
  overflow: auto
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0
}

button {
  overflow: visible
}

button, select {
  text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer
}

button[disabled], html input[disabled] {
  cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0
}

input {
  line-height: normal
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  height: auto
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em
}

legend {
  border: 0;
  padding: 0
}

textarea {
  overflow: auto
}

optgroup {
  font-weight: 700
}

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

td, th {
  padding: 0
}

html {
  font-size: 62.5%
}

body {
  color: #000;
  font-family: Noto Sans JP, HiraKakuPro, Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, YuGothic, "游ゴシック", Roboto, Osaka, sans-serif;
  line-height: 1.6
}

@font-face {
  font-family: GenJyuuGothic;
  src: url(/assets/font/GenJyuuGothic-Bold.eot), url(/assets/font/GenJyuuGothic-Bold.eot?) format("embedded-opentype"), url(/assets/font/GenJyuuGothic-Bold.woff) format("woff"), url(/assets/font/GenJyuuGothic-Bold.ttf) format("truetype")
}

*, :before, :after {
  box-sizing: border-box
}

.bw span {
  display: inline-block;
}

.left {
  text-align: left !important;
}

.center {
  text-align: center;
}

.red {
  color: red;
}

.mt1em {
  margin-top: 1em !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.pb90 {
  padding-bottom: 90px !important;
}

.w300 {
  width: 300px;
}

.text_regular {
  font-size: 1.8rem;
  line-height: 3.6rem;
  letter-spacing: .1rem
}

.text-small {
  font-size: 1.4rem;;
  line-height: 2.8rem;
}

.list {
  display: table;
  margin: 0px auto;
}

.list ul {
  list-style-type: disc;
  font-size: 1.6rem;
  text-align: left;
}

.list li + li {
  margin-top: 0.5em;
}

.footer_info ul {
  font-size: 12px;
}

.footer_info li + li {
  margin-top: 0.5em;
}

@media only screen and (min-width:961px) {
  .anker {
    padding-top: 180px;
    margin-top: -180px;
  }
}

.landscape {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .65);
  width: 100%;
  height: 100%
}

.landscape-image {
  position: relative;
  width: 100%;
  height: 100%
}

.landscape-image img {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 64.96478873239437%
}

.wrapper {
  position: relative;
  width: 100%;
  background-color: #fff
}

@media only screen and (min-width:961px) {
  .wrapper {
    padding: 27px
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .wrapper {
    padding: 5px
  }
}

@media only screen and (max-width:568px) {
  .wrapper {
    padding: 5px
  }
}

.loading {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #ededed
}

.loading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.loading-container__anime {
  display: block;
  width: calc(228px/2);
  margin: 0 auto 20px
}

.main {
  width: 100%;
  background-color: #ededed;
  position: relative;
  z-index: 0
}

a {
  color: #000;
  text-decoration: none;
  transition: .2s all ease 0s
}

a:hover {
  opacity: .6
}

.js-hidden {
  opacity: 0;
  visibility: hidden;
  transition: .8s all ease-in-out 0s
}

.js-active {
  opacity: 1;
  visibility: visible
}

@media only screen and (min-width:961px) {
  .showPc {
    display: block
  }
  .showSp {
    display: none
  }
  .breakCancelPc {
    display: none
  }
  .breakCancelSp {
    display: block
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .showPc {
    display: block
  }
  .showSp {
    display: none
  }
  .breakCancelPc {
    display: block
  }
  .breakCancelSp {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .showPc {
    display: none
  }
  .showSp {
    display: block
  }
  .breakCancelPc {
    display: block
  }
  .breakCancelSp {
    display: none
  }
}

.pankuzuList {
  margin-top: 10px;
  width: 100%
}

@media only screen and (min-width:961px) {
  .pankuzuList {
    padding: 0 20px
  }
}

.pankuzuList-list {
  display: flex;
  max-width: 960px;
  margin: 0 auto
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .pankuzuList {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .pankuzuList {
    display: none
  }
}

.pankuzuList li {
  font-size: 1.4rem
}

.pankuzuList li:first-of-type a {
  color: #007815
}

.pankuzuList li:nth-of-type(n+2) {
  padding-left: 15px
}

.pankuzuList li:nth-of-type(n+2):before {
  padding: 0 15px 0 0;
  content: ">"
}

.nextArrow {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translate(-50%, 0)
}

.nextArrow img {
  width: 19px
}

@media only screen and (max-width:568px) {
  .nextArrow img {
    width: 13px
  }
}

h1 {
  font-size: 4rem
}

.head-2 {
  position: relative;
  font-size: 4rem;
  line-height: 5.5rem;
  font-family: GenJyuuGothic, sans-serif;
  letter-spacing: .2rem;
  display: inline
}

@media only screen and (max-width:568px) {
  .head-2 {
    font-size: 2.3rem;
    letter-spacing: .2rem;
    line-height: 3.1rem
  }
}

.head-2 span {
  position: relative;
  font-family: GenJyuuGothic, sans-serif
}

.head-2 span:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 8px;
  background-image: url(/assets/images/common/bg_diagonalline.png);
  background-repeat: repeat-x
}

@media only screen and (max-width:568px) {
  .head-2 span:after {
    background-image: none
  }
}

.head-2 .turnBack-line {
  display: inline
}

.head-2 .turnBack-line:after {
  content: '';
  background-image: none
}

@media only screen and (max-width:568px) {
  .head-2 .turnBack-line:after {
    background-image: url(/assets/images/common/bg_diagonalline.png);
    background-size: contain
  }
}

.head-2 .turnBack .block {
  display: none
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .head-2 .turnBack:after {
    content: '';
    background-image: none
  }
  .head-2 .turnBack .block {
    display: block
  }
  .head-2 .turnBack .block:after {
    content: '';
    background-image: none
  }
  .head-2 .turnBack span:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 8px;
    background-image: url(/assets/images/common/bg_diagonalline.png);
    background-repeat: repeat-x
  }
}

.head2-oneLine span:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 8px;
  background-image: url(/assets/images/common/bg_diagonalline.png);
  background-repeat: repeat-x
}

.head-3 span {
  position: relative;
  font-size: 3.2rem;
  line-height: 4.2rem
}

@media only screen and (max-width:568px) {
  .head-3 span {
    font-size: 2.1rem;
    line-height: 2.1rem
  }
}

.head-3 span:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 18px;
  background: #fff94b;
  mix-blend-mode: multiply
}

@media only screen and (max-width:568px) {
  .head-3 span:after {
    height: 10px
  }
}

.head-4 span {
  position: relative;
  font-size: 2.4rem;
  line-height: 3.4rem;
  font-weight: 700
}

@media only screen and (max-width:568px) {
  .head-4 span {
    font-size: 1.8rem;
    line-height: 2.8rem
  }
}

.head-4 span:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000
}

.bgWhite {
  background-color: #fff
}

.bgNami {
  position: relative;
  padding-bottom: 90px;
}

.bgNami:before {
  content: '';
  position: absolute;
  top: -5px;
  z-index: 0;
  width: 100%;
  height: 101px;
  background-image: url(/assets/images/common/bg_gizagiza_w.png);
  background-repeat: repeat-x;
  background-position: bottom
}

.bgNami:after {
  content: '';
  position: absolute;
  bottom: -5px;
  z-index: 0;
  width: 100%;
  height: 101px;
  background-image: url(/assets/images/common/bg_gizagiza_w.png);
  background-repeat: repeat-x;
  background-position: bottom
}

.decoration-yellowUnderline {
  position: relative;
  z-index: 5
}

.decoration-yellowUnderline:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 18px;
  background: #fff94b;
  mix-blend-mode: multiply
}

@media only screen and (max-width:568px) {
  .decoration-yellowUnderline:after {
    height: 10px
  }
}

.decoration-emphasize {
  position: relative
}

.decoration-emphasize:after {
  content: '・';
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  font-size: 2rem;
  line-height: 2rem;
  font-family: GenJyuuGothic, sans-serif
}

.decoration-underLine {
  position: relative
}

.decoration-underLine:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000
}

@media only screen and (max-width:568px) {
  .decoration-underLine:after {
    bottom: -2px;
    height: 2px
  }
}

.decoration-textRed {
  color: #ce0000
}

.lowerHead {
  position: relative;
  width: 100%;
  padding-bottom: 68px
}

@media only screen and (max-width:568px) {
  .lowerHead {
    padding-bottom: 50px
  }
}

.lowerHead:after {
  content: '';
  position: absolute;
  bottom: -5px;
  z-index: 0;
  width: 100%;
  height: 101px;
  background-image: url(/assets/images/common/bg_gizagiza_w.png);
  background-repeat: repeat-x;
  background-position: bottom
}

.lowerHead .lowerTitle {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 278px;
  text-align: center;
  background-image: url(/assets/images/common/mainillust_bg.png);
  background-repeat: no-repeat;
  background-size: 95%;
  background-position: center
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .lowerHead .lowerTitle {
    height: 208px
  }
}

@media only screen and (max-width:568px) {
  .lowerHead .lowerTitle {
    background-image: url(/assets/images/common/mainillust_bg_sp.png);
    background-size: 122%;
    background-position: 38% 4%;
    height: 148px;
    margin: 0 auto;
    padding-top: 20px
  }
}

.lowerHead .lowerTitle-title {
  position: relative;
  top: 40%;
  transform: translateY(-50%);
  font-size: 4.2rem;
  line-height: 5.6rem;
  font-family: GenJyuuGothic, sans-serif;
  letter-spacing: .2rem;
  display: inline
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .lowerHead .lowerTitle-title {
    top: 10%
  }
}

@media only screen and (max-width:568px) {
  .lowerHead .lowerTitle-title {
    font-family: GenJyuuGothic, sans-serif;
    font-size: 2.7rem;
    line-height: 2.3rem;
    top: 13%
  }
  .lowerHead .lowerTitle-title .showSp {
    display: inline
  }
}

.lowerHead .lowerTitle-title:before {
  content: '';
  position: absolute;
  top: 40px;
  left: 40px;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  max-width: calc(651px/2);
  height: calc(446px/2)
}

.lowerHead .lowerTitle-title:after {
  content: '';
  position: absolute;
  top: 40px;
  right: 40px;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  max-width: calc(600px/2);
  height: calc(436px/2)
}

.lowerHead .lowerTitle-title .titleLine {
  position: relative
}

.lowerHead .lowerTitle-title .titleLine:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000
}

.lowerHead .lowerTitle-title .titleLine:nth-of-type(2) {
  top: 20px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .lowerHead .lowerTitle-title .titleLine:after {
    content: '';
    bottom: none;
    left: 0;
    height: 0;
    background-color: none
  }
  .lowerHead .lowerTitle-title .titleLine span {
    position: relative
  }
  .lowerHead .lowerTitle-title .titleLine span:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #000
  }
  .lowerHead .lowerTitle-title .titleLine span:nth-of-type(2) {
    top: 20px
  }
}

@media only screen and (max-width:568px) {
  .lowerHead .lowerTitle-title .titleLine:after {
    content: '';
    bottom: none;
    left: 0;
    height: 0;
    background-color: none
  }
  .lowerHead .lowerTitle-title .titleLine span {
    position: relative
  }
  .lowerHead .lowerTitle-title .titleLine span:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #000
  }
  .lowerHead .lowerTitle-title .titleLine span:nth-of-type(2) {
    top: 20px
  }
}

.lowerHead .lowerTitle-title .titleLine-twoLine span {
  position: relative
}

.lowerHead .lowerTitle-title .titleLine-twoLine span:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000
}

@media only screen and (max-width:568px) {
  .lowerHead .lowerTitle-title .titleLine-twoLine span:after {
    height: 3px
  }
}

.lowerHead .lowerTitle-title .titleLine-twoLine span:nth-of-type(2) {
  top: 20px
}

.lowerHead .lowerButton {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .lowerHead .lowerButton {
    flex-direction: column
  }
}

@media only screen and (max-width:568px) {
  .lowerHead .lowerButton {
    margin-top: 16px
  }
}

.lowerHead .lowerButton-button {
  position: relative;
  width: 100%;
  max-width: 240px;
  height: 78px;
  margin: 11px 6px 0px;
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .lowerHead .lowerButton-button {
    width: 100%;
    max-width: 100%;
    height: 56px;
    margin: 10px 0 0;
    padding: 0 20px
  }
  .lowerHead .lowerButton-button:first-of-type {
    margin: 0
  }
}

@media only screen and (max-width:568px) {
  .lowerHead .lowerButton-button {
    width: 85%;
    max-width: 100%;
    height: 56px;
    margin: 10px 6px 0
  }
  .lowerHead .lowerButton-button:first-of-type {
    margin: 0 6px
  }
}

.lowerHead .lowerButton-button:after {
  content: '';
  position: absolute;
  z-index: 5;
  top: 5px;
  left: 0;
  width: 100%;
  max-width: 278px;
  height: 78px;
  border-radius: 10px;
  background-image: url(/assets/images/common/bg_diagonalline_small.png);
  background-repeat: repeat;
  opacity: .6
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .lowerHead .lowerButton-button:after {
    width: 94%;
    max-width: 100%;
    height: 56px;
    left: 50%;
    transform: translateX(-50%)
  }
}

@media only screen and (max-width:568px) {
  .lowerHead .lowerButton-button:after {
    width: 100%;
    max-width: 100%;
    height: 56px
  }
}

.lowerHead .lowerButton-button__link {
  position: relative;
  display: block;
  width: 100%;
  max-width: 278px;
  height: 78px;
  border: 3px solid #000;
  border-radius: 10px;
  background-color: #fff;
  margin: 0 auto;
  z-index: 10
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .lowerHead .lowerButton-button__link {
    width: 100%;
    max-width: 100%;
    height: 56px
  }
}

@media only screen and (max-width:568px) {
  .lowerHead .lowerButton-button__link {
    width: 100%;
    max-width: 100%;
    height: 56px
  }
}

.lowerHead .lowerButton-button__link:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background-image: url(/assets/images/common/arrow_bottom.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(40px/2);
  height: calc(24px/2)
}

.lowerHead .lowerButton-button__link span {
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 700
}

@media only screen and (max-width:568px) {
  .lowerHead .lowerButton-button__link span {
    font-size: 1.4rem;
    line-height: 1.4rem;
    letter-spacing: -1px;
    padding-right: 30px
  }
}

.lowerHead .lowerButton-button__link .linkText {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%)
}

.lowerHead .lowerButton-button__link .textSmall {
  font-size: 1.4rem
}

@media only screen and (max-width:568px) {
  .lowerHead .lowerButton-button__link .textSmall {
    font-size: 1.2rem
  }
}

.lowerHead .lowerButton-button__link img {
  width: 100%
}

.lowerHead .button-4 .lowerButton-button {
  max-width: 230px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .lowerHead .button-4 .lowerButton-button {
    max-width: 100%
  }
}

@media only screen and (max-width:568px) {
  .lowerHead .button-4 .lowerButton-button {
    max-width: 100%
  }
}

.lowerHead .button-4 .lowerButton-button:after {
  max-width: 230px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .lowerHead .button-4 .lowerButton-button:after {
    max-width: 100%
  }
}

@media only screen and (max-width:568px) {
  .lowerHead .button-4 .lowerButton-button:after {
    max-width: 100%
  }
}

.lowerHead .button-4 .lowerButton-button:after__link {
  max-width: 230px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .lowerHead .button-4 .lowerButton-button:after__link {
    max-width: 100%
  }
}

@media only screen and (max-width:568px) {
  .lowerHead .button-4 .lowerButton-button:after__link {
    max-width: 100%
  }
}

.lowerHead .nextArrow {
  bottom: -54px
}

@media only screen and (max-width:568px) {
  .lowerHead .nextArrow {
    bottom: -41px
  }
}

.example {
  display: flex;
  justify-content: space-between;
  max-width: 894px;
  margin: 50px auto 0
}

@media only screen and (max-width:568px) {
  .example {
    flex-direction: column;
    max-width: 100%;
    margin: 40px auto 0
  }
}

.example-box {
  max-width: 278px;
  position: relative;
  border: 2px solid #000;
  border-radius: 20px;
  background-color: #fff;
  padding: 56px 0 18px
}

@media only screen and (max-width:568px) {
  .example-box {
    max-width: 100%;
    width: 85%;
    margin: 30px auto 0;
    border-radius: 10px;
    padding: 15px 25px 16px
  }
  .example-box:first-of-type {
    margin: 0 auto
  }
}

@media only screen and (max-width:568px) and (max-width:568px) {
  .example-box:nth-of-type(3) {
    padding: 15px 0 16px
  }
}

.example-box:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  height: 5px;
  background: #fff
}

.example-box-head {
  position: absolute;
  top: -15px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  width: 100%;
  max-width: 80.57553956834532%
}

@media only screen and (max-width:568px) {
  .example-box-head {
    top: -4%;
    max-width: 56.451612903225815%
  }
}

.example-box__text {
  margin-top: 57px;
  font-size: 1.6rem;
  line-height: 2.8rem;
  font-weight: 700;
  padding: 0 24px
}

@media only screen and (max-width:568px) {
  .example-box__text {
    margin-top: 15px;
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

.example-box__illust {
  margin-top: 27px;
  width: 100%
}

@media only screen and (max-width:568px) {
  .example-box__illust {
    margin-top: 22px
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .example-box {
    margin-right: 20px
  }
  .example-box:first-of-type {
    margin-left: 20px;
    margin-right: 20px
  }
  .example-box:last-of-type {
    margin-right: 20px
  }
}

.example-seiniku:after {
  width: 68%
}

@media only screen and (max-width:568px) {
  .example-seiniku:after {
    width: 48%
  }
}

.example-kakoushokuhin:after {
  width: 63%
}

@media only screen and (max-width:568px) {
  .example-kakoushokuhin:after {
    width: 45%
  }
}

.example-hanbaitool:after {
  width: 80%
}

@media only screen and (max-width:568px) {
  .example-hanbaitool:after {
    width: 58%
  }
}

.mark-example {
  max-width: 800px;
  margin: 60px auto 0px;
  position: relative;
  border: 2px solid #000;
  border-radius: 20px;
  background-color: #fff;
  padding: 40px 30px;
}
.mark-example::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  width: 90%;
  max-width: 600px;
  height: 5px;
  background: #fff;
}

.mark-example-head {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 600px;
  z-index: 5;
}

.mark-example-item {
  margin-bottom: 20px;
}

.mark-example-item-image img {
  max-width: 100%;
}

.mark-example-item-text p {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: left;
}

@media screen and (max-width: 991.98px) {
  .mark-example-item-image img {
    width: 400px;
  }
  .mark-example-item-text p {
    text-align: center;
  }
}
@media screen and (min-width: 992px) {
  .mark-example-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mark-example-item > div {
    width: 50%;
  }
}

.header {
  width: 100%;
  position: relative;
  z-index: 1000
}

@media only screen and (min-width:961px) {
  .header {
    padding: 0 20px
  }
}

.header .container {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 15px
}

.header .container .headerLogo {
  max-width: 258px;
}

.header .navigationPc {
  display: block
}

.header .navigationPc .container {
  padding: 0px;
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .header .navigationPc {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .header .navigationPc {
    display: none
  }
}

.headerMain {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.headerMainLink a {
  display: block;
  padding: 5px 2em;
  border: 3px solid #000;
  border-radius: 2em;
  background-color: #faf426;
  color: #000;
  font-size: 16px;
  font-weight: bold;
}

.headerMenu {
  position: relative;
  padding: 20px 0px;
}
.headerMenu::before {
  position: absolute;
  top: 0px;
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
  bottom: 0px;
  z-index: -1;
  background-color: #c03425;
  content: "";
}

.header.js_active .headerMenu {
  position: fixed;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
}

.headerMenu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  list-style: none;
}

.headerMenu li {
  position: relative;
  text-align: center;
}

.headerMenu li.current::before {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #faf426;
  content: "";
}

.headerMenu a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.headerMenu .scrollDisp {
  display: none;
}

.header.js_active .headerMenu .scrollDisp {
  display: block;
}

.header .naviButton {
  position: fixed;
  top: 5px;
  right: 5px;
  z-index: 100;
  display: block;
  width: calc(100px/2);
  height: calc(100px/2);
  transition: .2s
}

@media only screen and (min-width:961px) {
  .header .naviButton {
    display: none
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .header .naviButton {
    display: block
  }
}

@media only screen and (max-width:568px) {
  .header .naviButton {
    display: block
  }
}

.header .naviButton img {
  width: 100%;
  height: 100%
}

.header .naviButton.hide {
  transform: translateY(-110%)
}

.header .navigationSp {
  width: 100%;
  height: 100%
}

@media only screen and (min-width:961px) {
  .header .navigationSp {
    display: none
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .header .navigationSp {
    display: block
  }
}

@media only screen and (max-width:568px) {
  .header .navigationSp {
    display: block
  }
}

.header .navigationSp .headerLogo {
  width: 41.083333%;
  margin: 7px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .header .navigationSp .headerLogo {
    max-width: 258px
  }
}

.header .navigationSp .navigation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, .98);
  opacity: 0;
  visibility: hidden;
  transition: .2s all ease-in-out 0s
}

.header .navigationSp .navigation .naviButton {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 100;
  display: block;
  width: calc(100px/2);
  height: calc(100px/2)
}

.header .navigationSp .navigation .naviButton img {
  width: 100%;
  height: 100%
}

.header .navigationSp .navigation .navigationBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 69%
}

.header .navigationSp .navigation .navigationBox-list {
  margin-bottom: calc(80px/2)
}

.header .navigationSp .navigation .navigationBox .lowerList {
  padding-left: 20px
}

.header .navigationSp .navigation .navigationBox li {
  position: relative;
  font-size: 1.8rem;
  font-weight: 700;
  min-width: 170px
}

.header .navigationSp .navigation .navigationBox li a {
  color: #333
}

.header .navigationSp .navigation .navigationBox li a:before {
  content: '';
  background-image: url(/assets/images/common/arrow_sp_menu.svg);
  background-repeat: no-repeat;
  width: calc(15px/2);
  height: calc(21px/2);
  position: absolute;
  top: 12px;
  left: -20px
}

.header .navigationSp .navigation .navigationBox .navigationBlock {
  margin-left: -40px;
  color: #333
}

.header .navigationSp .navigation .navigationBox .navigationBlock:before {
  content: '';
  background-image: none
}

.header .navigationSp .navigation .navi1 span {
  color: #9f5e36
}

.header .navigationSp .navigation .navi2 span {
  color: #e05e52
}

.header .navigationSp .navigation .navigationDetail li .navLink {
  font-size: 1.6rem;
  margin-left: -13px
}

.header .navigationSp .navigation .navigationDetail li .navLink:before {
  content: '';
  background-image: url(/assets/images/common/arrow_sp_menu.svg);
  background-repeat: no-repeat;
  width: calc(15px/2);
  height: calc(21px/2);
  position: absolute;
  top: 14px;
  left: -30px
}

.header .navigationSp .spMenuActive {
  opacity: 1;
  visibility: visible
}

.footer {
  position: relative;
  width: 100%;
  padding: 60px 20px 40px;
  background-color: #4b4b4b
}

@media only screen and (min-width:961px) {
  .footer:before {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    width: 100%;
    height: 101px;
    background-image: url(/assets/images/common/bg_gizagiza_g.png);
    background-repeat: repeat-x;
    background-position: top;
    background-size: contain;
    content: '';
  }
}

.footer-illust {
  position: relative
}

.footer-illust__shika {
  position: absolute;
  top: -180px;
  left: 50px;
  width: 100%;
  max-width: calc(231px/2);
  height: calc(284px/2)
}

@media only screen and (max-width:991px) {
  .footer-illust__shika {
    top: -100px;
    left: 24px;
    max-width: calc(116px/2);
    height: calc(142px/2)
  }
}

.footer-illust__tree1 {
  position: absolute;
  top: -240px;
  right: 182px;
  width: 100%;
  max-width: calc(307px/2);
  height: calc(438px/2)
}

@media only screen and (max-width:991px) {
  .footer-illust__tree1 {
    display: none
  }
}

.footer-illust__tree2 {
  position: absolute;
  top: -240px;
  right: 19px;
  width: 100%;
  max-width: calc(288px/2);
  height: calc(440px/2)
}

@media only screen and (max-width:991px) {
  .footer-illust__tree2 {
    top: -120px;
    right: 13px;
    max-width: calc(144px/2);
    height: calc(220px/2)
  }
}

.footer .container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

@media screen and (min-width: 960px) {
  .footer .container {
    display: flex;
    justify-content: space-between;
  }
}

.footer .container-copyright {
  position: relative;
  z-index: 5;
  min-width: 300px;
  font-size: 1.4rem;
  line-height: 1.4rem;
  font-weight: 700;
  color: #fff;
}

@media only screen and (max-width:959px) {
  .footer .container-copyright {
    font-size: 1rem;
    line-height: 1rem;
    text-align: center;
    margin-top: 32px;
    padding-bottom: 30px
  }
}

.footer_link .navigationBox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: -10px -10px 0px;
}

.footer_link .navigationBox li {
  position: relative;
  margin: 10px 10px 0px;
  width: calc(40% - 20px);
  font-size: 1.4rem;
  font-weight: 700;
}

.footer_link .navigationBox li a {
  display: inline-block;
  position: relative;
  padding: 0px 0px 0px 1em;
  color: #fff
}

.footer_link .navigationBox li a:before {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  content: '';
  width: 8px;
  height: 10px;
  background-image: url(/assets/images/common/arrow_sp_menu_footer.svg);
  background-repeat: no-repeat;
  content: "";
}

@media screen and (max-width: 600px) {
  .footer_link .navigationBox li {
    width: calc(50% - 20px);
  }
}
@media screen and (max-width: 959px) {
  .footer_link {
    margin-top: 30px;
  }
}

@media only screen and (min-width:961px) {
  .footer .showPc {
    display: block
  }
  .footer .showSp {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .footer .showPc {
    display: none
  }
  .footer .showSp {
    display: block
  }
}

.topPage {
  position: relative;
  z-index: 0;
  max-width: 100%;
  overflow: hidden
}

.topPage .topVisual {
  height: 80vh;
  position: relative;
  background-image: url(/assets/images/common/mainillust_bg.png);
  background-repeat: no-repeat;
  background-size: 94%;
  background-position: center 50%;
  max-width: 1366px;
  margin: 0 auto
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .topVisual {
    height: 70vh;
    background-position: center 50%
  }
}

@media only screen and (max-width:568px) {
  .topPage .topVisual {
    height: 100%;
    background-size: 120%;
    background-image: url(/assets/images/common/mainillust_bg_sp.png);
    background-position: center 49%;
    background-size: 102%
  }
}

.topPage .topVisual .mainTitle {
  width: 100%;
  max-width: 960px;
  margin: 25px auto 0
}

.topPage .topVisual .mainTitle-title {
  margin: 0 auto
}

.topPage .topVisual .mainTitle-title img {
  width: 69.583333%;
  margin: 0 auto
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .topVisual .mainTitle-title {
    margin: 13px auto 0
  }
  .topPage .topVisual .mainTitle-title img {
    width: 69.583333%
  }
}

@media only screen and (max-width:568px) {
  .topPage .topVisual .mainTitle-title {
    margin: 9px auto 0
  }
  .topPage .topVisual .mainTitle-title img {
    width: 86.84931506849315%
  }
}

.topPage .topVisual .mainTitle-titleText {
  font-size: 1.6rem;
  line-height: 2.9rem;
  letter-spacing: .08rem;
  text-align: center;
  margin-top: 25px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .topVisual .mainTitle-titleText {
    font-size: 1.4rem;
    line-height: 2.1rem
  }
}

@media only screen and (max-width:568px) {
  .topPage .topVisual .mainTitle-titleText {
    font-size: 1.4rem;
    line-height: 2.1rem;
    letter-spacing: .1rem;
    margin-top: 14px
  }
}

.topPage .topVisual .mainVisual {
  position: relative;
  padding-bottom: 65px;
  margin-top: 6px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .topVisual .mainVisual {
    margin-top: 40px;
    background-position: center 16%
  }
}

@media only screen and (max-width:568px) {
  .topPage .topVisual .mainVisual {
    padding-bottom: 38px;
    margin-top: -13px
  }
}

.topPage .topVisual .mainVisual .mainIlust {
  position: relative
}

.topPage .topVisual .mainVisual-peaple {
  position: relative;
  z-index: 10;
  width: 53.395833%;
  max-width: 960px;
  margin: 0 auto
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .topVisual .mainVisual-peaple {
    width: 53.395833%
  }
}

@media only screen and (max-width:568px) {
  .topPage .topVisual .mainVisual-peaple {
    width: 82.87671232876713%;
    padding-top: 32px
  }
}

.topPage .topVisual .mainVisual-peaple__illust {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 695px
}

@media only screen and (max-width:568px) {
  .topPage .topVisual .mainVisual-peaple__illust {
    max-width: 302.5px
  }
}

@keyframes hukidashiScale {
  0% {
    transform: scale(.2, .2)
  }
  40% {
    transform: scale(1.2, 1.2)
  }
  60% {
    transform: scale(1, 1)
  }
  80% {
    transform: scale(1.1, 1.1)
  }
  100% {
    transform: scale(1, 1)
  }
}

.topPage .topVisual .mainVisual-peaple__balloon {
  position: absolute;
  top: -9.6%;
  right: -23.2%;
  width: 28.6%;
  max-width: 196px;
  animation-name: hukidashiScale;
  animation-duration: .5s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  transform-origin: 50% 50%
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .topVisual .mainVisual-peaple__balloon {
    top: -7.6%;
    right: -20.2%;
    width: 25.6%
  }
}

@media only screen and (max-width:568px) {
  .topPage .topVisual .mainVisual-peaple__balloon {
    top: 60.4%;
    right: 18.8%;
    width: 35.356164%;
    max-width: 106px
  }
}

@keyframes walkInoshishiTab {
  0% {
    left: -15%;
    opacity: 0;
    background-position: 0 0
  }
  20% {
    left: -10%;
    opacity: 1;
    background-position: 0 -83px
  }
  40% {
    left: -8%;
    background-position: 0 0
  }
  60% {
    left: -3%;
    background-position: 0 -83px
  }
  80% {
    left: 0;
    background-position: 0 0
  }
  100% {
    left: 5%;
    background-position: 0 -83px
  }
}

@keyframes walkInoshishiPc {
  0% {
    left: -15%;
    opacity: 0;
    background-position: 0 0
  }
  20% {
    left: -10%;
    opacity: 1;
    background-position: 0 -83px
  }
  40% {
    left: -5%;
    background-position: 0 0
  }
  60% {
    left: -0%;
    background-position: 0 -83px
  }
  80% {
    left: 5%;
    background-position: 0 0
  }
  100% {
    left: 10%;
    background-position: 0 -83px
  }
}

@keyframes walkShikaSp {
  0% {
    right: -25%;
    opacity: 0;
    background-position: 0 0
  }
  20% {
    right: -25%;
    opacity: 1;
    background-position: 0 -78.5px
  }
  40% {
    right: -20%;
    background-position: 0 0
  }
  60% {
    right: -15%;
    background-position: 0 -78.5px
  }
  80% {
    right: -10%;
    background-position: 0 0
  }
  100% {
    right: -6%;
    background-position: 0 -78.5px
  }
}

@keyframes walkInoshishiSp {
  0% {
    left: -25%;
    opacity: 0;
    background-position: 0 0
  }
  20% {
    left: -25%;
    opacity: 1;
    background-position: 0 -41.5px
  }
  40% {
    left: -15%;
    background-position: 0 0
  }
  60% {
    left: -10%;
    background-position: 0 -41.5px
  }
  80% {
    left: -5%;
    background-position: 0 0
  }
  100% {
    left: -2%;
    background-position: 0 -41.5px
  }
}

@keyframes walkShikaTab {
  0% {
    right: -15%;
    opacity: 0;
    background-position: 0 0
  }
  20% {
    right: -10%;
    opacity: 1;
    background-position: 0 -157px
  }
  40% {
    right: -8%;
    background-position: 0 0
  }
  60% {
    right: -3%;
    background-position: 0 -157px
  }
  80% {
    right: 0;
    background-position: 0 0
  }
  100% {
    right: 5%;
    background-position: 0 -157px
  }
}

@keyframes walkShikaPc {
  0% {
    right: -15%;
    opacity: 0;
    background-position: 0 0
  }
  20% {
    right: -10%;
    opacity: 1;
    background-position: 0 -157px
  }
  40% {
    right: -5%;
    background-position: 0 0
  }
  60% {
    right: -0%;
    background-position: 0 -157px
  }
  80% {
    right: 5%;
    background-position: 0 0
  }
  100% {
    right: 10%;
    background-position: 0 -157px
  }
}

.topPage .topVisual .mainVisual-animal {
  position: absolute;
  z-index: 0;
  top: 36%;
  height: 157px;
  width: 100%
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .topVisual .mainVisual-animal {
    height: 157px;
    width: 100%
  }
}

@media only screen and (max-width:568px) {
  .topPage .topVisual .mainVisual-animal {
    height: calc(157px/2);
    width: 100%;
    top: 5%
  }
}

.topPage .topVisual .mainVisual-animal__inoshishi {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -15%;
  width: 147px;
  height: 83px;
  overflow: hidden;
  opacity: 1;
  background: url(/assets/images/top/mainillust_inoshishi.png) 0 0 no-repeat;
  background-size: 100%;
  animation: walkInoshishiPc 1.5s steps(1, start) 0s 1 forwards;
  animation-fill-mode: forwards;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .topVisual .mainVisual-animal__inoshishi {
    animation: walkInoshishiTab 1.5s steps(1, start) 0s 1 forwards;
    width: 147px;
    height: 83px
  }
}

@media only screen and (max-width:568px) {
  .topPage .topVisual .mainVisual-animal__inoshishi {
    left: -20%;
    animation: walkInoshishiSp 1.5s steps(1, start) 0s 1 forwards;
    width: calc(147px/2);
    height: calc(83px/2)
  }
}

.topPage .topVisual .mainVisual-animal__shika {
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -15%;
  width: 128px;
  height: 156px;
  overflow: hidden;
  opacity: 1;
  background: url(/assets/images/top/mainillust_shika.png) 0 0 no-repeat;
  background-size: 100%;
  animation: walkShikaPc 1.5s steps(1, start) 0s 1 forwards;
  animation-fill-mode: forwards;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .topVisual .mainVisual-animal__shika {
    animation: walkShikaTab 1.5s steps(1, start) 0s 1 forwards;
    width: 128px;
    height: 157px
  }
}

@media only screen and (max-width:568px) {
  .topPage .topVisual .mainVisual-animal__shika {
    bottom: -8px;
    right: -20%;
    animation: walkShikaSp 1.5s steps(1, start) 0s 1 forwards;
    width: calc(128px/2);
    height: calc(157px/2)
  }
}

.topPage .topVisual .nextArrow {
  bottom: -47px
}

@media only screen and (max-width:568px) {
  .topPage .topVisual .nextArrow {
    bottom: -31px
  }
}

.topPage .contents {
  max-width: 960px;
  margin: 0 auto;
  text-align: center
}

.topPage .contents-point {
  position: relative;
  padding-top: 93px;
  padding-bottom: 84px
}

@media only screen and (max-width:568px) {
  .topPage .contents-point {
    padding-top: 55px;
    padding-bottom: 59px
  }
}

.topPage .contents-point:before {
  content: '';
  position: absolute;
  top: 81px;
  right: -122px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(204px/2);
  height: calc(308px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-point:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-point:before {
    display: none
  }
}

.topPage .contents-point .headText {
  font-size: 1.8rem;
  line-height: 3.6rem;
  letter-spacing: .15rem;
  margin-top: 35px
}

@media only screen and (max-width:568px) {
  .topPage .contents-point .headText {
    font-size: 1.4rem;
    line-height: 2.4rem;
    letter-spacing: .1rem;
    margin-top: 29px;
    padding: 0 10px
  }
}

.topPage .contents-point .pointList {
  display: flex;
  justify-content: space-between;
  align-items: stretch
}

@media only screen and (max-width:568px) {
  .topPage .contents-point .pointList {
    flex-direction: column
  }
}

.topPage .contents-point .pointListIllust {
  display: flex;
  flex-direction: column;
  margin-top: 100px
}

@media only screen and (max-width:568px) {
  .topPage .contents-point .pointListIllust {
    margin-top: 68px
  }
}

.topPage .contents-point .pointListIllust-illust {
  position: relative
}

@media only screen and (max-width:568px) {
  .topPage .contents-point .pointListIllust-illust {
    margin-top: 0
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-point .pointListIllust-illust:first-of-type {
    margin-left: 20px;
    margin-right: 20px
  }
  .topPage .contents-point .pointListIllust-illust:last-of-type {
    margin-right: 20px
  }
}

.topPage .contents-point .pointListIllust-illust__point {
  position: absolute;
  z-index: 10;
  top: -45px;
  left: 14%;
  width: 53.333333333333336%
}

@media only screen and (max-width:568px) {
  .topPage .contents-point .pointListIllust-illust__point {
    top: -33px;
    left: 44%;
    width: 32.333333%;
    transform: translateX(-50%)
  }
}

.topPage .contents-point .pointListIllust-illust__illust {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 275px
}

@media only screen and (max-width:568px) {
  .topPage .contents-point .pointListIllust-illust__illust {
    max-width: 204px
  }
}

.topPage .contents-point .pointListText-box {
  position: relative;
  margin-top: 32px;
  height: 100%
}

@media only screen and (max-width:568px) {
  .topPage .contents-point .pointListText-box {
    margin-top: 13px
  }
}

.topPage .contents-point .pointListText-box:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(/assets/images/top/point_parenthesis_close.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: 300px;
  height: 10px
}

@media only screen and (max-width:568px) {
  .topPage .contents-point .pointListText-box:after {
    left: 50%;
    transform: translateX(-50%);
    max-width: auto;
    height: 10px
  }
}

.topPage .contents-point .pointListText-box__title {
  width: 100%;
  max-width: 300px;
  height: auto
}

.topPage .contents-point .pointListText-box__text {
  position: relative;
  padding: 15px 33px;
  font-size: 1.6rem;
  line-height: 2.8rem;
  text-align: left;
  width: 100%;
  max-width: 300px
}

@media only screen and (max-width:568px) {
  .topPage .contents-point .pointListText-box__text {
    margin: 0 auto;
    padding: 9px 30px 18px;
    font-size: 1.4rem;
    line-height: 2.1rem;
    max-width: 315px
  }
}

.topPage .contents-point .pointListText-box__link {
  max-width: 300px;
  width: 100%;
  text-align: left;
  padding: 0 33px 25px;
  margin: 0 auto
}

.topPage .contents-point .pointListText-box__link a {
  position: relative;
  left: 35px;
  width: 100%
}

.topPage .contents-point .pointListText-box__link a:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 42%;
  left: -36px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(48px/2);
  height: calc(48px/2);
  background-image: url(/assets/images/common/icon_link_circle.png);
  background-repeat: no-repeat;
  background-size: contain
}

.topPage .contents-point .pointListText-box__link span {
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif;
  text-decoration: underline
}

@media only screen and (max-width:568px) {
  .topPage .contents-point .pointListText-box__link span {
    font-size: 1.4rem;
    line-height: 1.4rem
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-point:first-of-type .pointListText-box {
    margin-left: 20px;
    margin-right: 0
  }
  .topPage .contents-point:last-of-type .pointListText-box {
    margin-left: 20px;
    margin-right: 20px
  }
}

.topPage .contents-point .nextArrow {
  bottom: -50px
}

@media only screen and (max-width:568px) {
  .topPage .contents-point .nextArrow {
    bottom: -33px
  }
}

.topPage .contents-shinsataisei {
  position: relative;
  padding-top: 87px;
  padding-bottom: 100px
}

@media only screen and (max-width:568px) {
  .topPage .contents-shinsataisei {
    padding-top: 53px;
    padding-bottom: 89px
  }
}

.topPage .contents-shinsataisei:before {
  content: '';
  position: absolute;
  top: -90px;
  left: -135px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(180px/2);
  height: calc(248px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-shinsataisei:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-shinsataisei:before {
    display: none
  }
}

.topPage .contents-shinsataisei .headText {
  font-size: 1.6rem;
  line-height: 3.6rem;
  letter-spacing: .15rem;
  margin-top: 40px
}

@media only screen and (max-width:568px) {
  .topPage .contents-shinsataisei .headText {
    font-size: 1.4rem;
    line-height: 3.6rem;
    letter-spacing: .15rem;
    margin-top: 40px
  }
}

.topPage .contents-shinsataisei .shinsataisei {
  display: flex;
  justify-content: space-between
}

@media only screen and (max-width:568px) {
  .topPage .contents-shinsataisei .shinsataisei {
    flex-direction: column;
    padding: 0 27.5px
  }
}

.topPage .contents-shinsataisei .shinsataiseiBox {
  width: 100%;
  max-width: 450px;
  background-color: #fff;
  border-radius: 20px;
  margin-top: 66px
}

@media only screen and (max-width:568px) {
  .topPage .contents-shinsataisei .shinsataiseiBox {
    border-radius: 10px;
    margin-top: 21px
  }
  .topPage .contents-shinsataisei .shinsataiseiBox:first-of-type {
    margin-top: 40px
  }
}

.topPage .contents-shinsataisei .shinsataiseiBox-illust {
  width: 100%;
  margin-top: 42px
}

@media only screen and (max-width:568px) {
  .topPage .contents-shinsataisei .shinsataiseiBox-illust {
    width: 100%;
    margin-top: 32px
  }
}

.topPage .contents-shinsataisei .shinsataiseiBox-title {
  font-size: 2.6rem;
  line-height: 3.6rem;
  padding-bottom: 17px;
  border-bottom: 3px solid #000;
  margin: 20px 45px 0
}

@media only screen and (max-width:568px) {
  .topPage .contents-shinsataisei .shinsataiseiBox-title {
    font-size: 1.8rem;
    line-height: 2.4rem;
    padding-bottom: 13px;
    margin: 6px 25px 0
  }
}

.topPage .contents-shinsataisei .shinsataiseiBox-text {
  font-size: 1.6rem;
  line-height: 3.2rem;
  text-align: left;
  padding: 20px 45px 45px
}

@media only screen and (max-width:568px) {
  .topPage .contents-shinsataisei .shinsataiseiBox-text {
    font-size: 1.4rem;
    line-height: 2.1rem;
    padding: 15px 25px 21px;
    letter-spacing: .1rem
  }
}

.topPage .contents-shinsataisei .nextArrow {
  bottom: -38px
}

@media only screen and (max-width:568px) {
  .topPage .contents-shinsataisei .nextArrow {
    bottom: 0
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-shinsataisei .shinsataiseiBox:first-of-type {
    margin-left: 20px;
    margin-right: 20px
  }
  .topPage .contents-shinsataisei .shinsataiseiBox:last-of-type {
    margin-right: 20px
  }
}

.contents-kensyukai {
  padding-top: 87px;
}

.topPage .contents-certificationMark {
  margin-top: 133px
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark {
    margin-top: 43px
  }
}

.topPage .contents-certificationMark .certificationMark {
  position: relative;
  font-size: 3.2rem;
  line-height: 4.2rem
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .certificationMark {
    font-size: 2.1rem;
    line-height: 2.5rem
  }
}

.topPage .contents-certificationMark .certificationMark-illust {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 179px
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .certificationMark-illust {
    width: 108px
  }
}

.topPage .contents-certificationMark .descriptionBox {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 30px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-certificationMark .descriptionBox {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .descriptionBox {
    flex-direction: column;
    margin-top: 63px
  }
}

.topPage .contents-certificationMark .descriptionBox .descriptionText {
  position: relative;
  border: 2px solid #000;
  border-radius: 10px;
  background-color: #fff;
  width: 100%;
  padding: 40px 20px;
  -ms-grid-row-align: center;
  align-self: center;
  opacity: 0;
  visibility: hidden;
  transition: .2s all ease-in-out 0s
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .descriptionBox .descriptionText {
    padding: 14px;
    width: 83.541667%;
    border-radius: 0
  }
}

.topPage .contents-certificationMark .descriptionBox .descriptionText-head {
  font-size: 2.8rem;
  line-height: 2.8rem;
  font-family: GenJyuuGothic, sans-serif
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .descriptionBox .descriptionText-head {
    font-size: 1.8rem;
    line-height: 3rem
  }
}

.topPage .contents-certificationMark .descriptionBox .descriptionText-text {
  margin-top: 10px;
  font-size: 1.6rem;
  line-height: 2.8rem
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .descriptionBox .descriptionText-text {
    margin-top: 4px;
    font-size: 1.2rem;


    line-height: 1.9rem
  }
}

.topPage .contents-certificationMark .descriptionBox .descriptionText:after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: -22px;
  width: 22px;
  height: 29px;
  background-image: url(/assets/images/top/balloon_thorn.png);
  background-repeat: no-repeat;
  background-size: 100%
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .descriptionBox .descriptionText:after {
    background-image: url(/assets/images/top/balloon_thorn_sp.png);
    bottom: -18.5px;
    right: auto;
    left: 54px;
    width: calc(40px/2);
    height: calc(37px/2)
  }
}

.topPage .contents-certificationMark .descriptionBox .showBalloon {
  opacity: 1;
  visibility: visible
}

.topPage .contents-certificationMark .descriptionBox .descripthionMark {
  position: relative;
  margin: 13px 13px 0 34px
}

.topPage .contents-certificationMark .descriptionBox .descripthionMark:before {
  content: '';
  position: absolute;
  top: -347px;
  right: -111px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf3.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(186px/2);
  height: calc(340px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-certificationMark .descriptionBox .descripthionMark:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .descriptionBox .descripthionMark:before {
    display: none
  }
}

.topPage .contents-certificationMark .descriptionBox .descripthionMark-mark {
  max-width: 303px
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .descriptionBox .descripthionMark-mark {
    margin-top: 2px;
    width: 64.191781%
  }
}

.topPage .contents-certificationMark .matching {
  position: relative;
  margin-top: 47px;
  padding-bottom: 0
}

.topPage .contents-certificationMark .matching:before {
  content: '';
  position: absolute;
  top: 43px;
  left: -123px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf4.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(274px/2);
  height: calc(286px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-certificationMark .matching:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching:before {
    display: none
  }
}

.topPage .contents-certificationMark .matching:after {
  content: '';
  position: absolute;
  top: 1005px;
  right: -132px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(180px/2);
  height: calc(248px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-certificationMark .matching:after {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching:after {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching {
    margin: 29px 0 48px;
    padding: 0 27.5px
  }
}

.topPage .contents-certificationMark .matching .matchingHead {
  position: relative;
  font-size: 3rem;
  line-height: 3rem;
  font-family: GenJyuuGothic, sans-serif;
  display: flex;
  justify-content: center
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingHead {
    font-size: 1.8rem;
    line-height: 2.4rem
  }
}

.topPage .contents-certificationMark .matching .matchingHead .lineBalloon-1 {
  position: relative;
  left: -30px;
  bottom: 0;
  width: 3px;
  height: 30px;
  background-color: #000;
  transform: rotate(-30deg)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-certificationMark .matching .matchingHead .lineBalloon-1 {
    bottom: -10px;
    left: -5%;
    width: 2px;
    height: 60px
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingHead .lineBalloon-1 {
    bottom: -10px;
    left: -5%;
    width: 1px;
    height: 38px
  }
}

.topPage .contents-certificationMark .matching .matchingHead .lineBalloon-2 {
  position: relative;
  right: -30px;
  bottom: 0;
  width: 3px;
  height: 30px;
  background-color: #000;
  transform: rotate(30deg)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-certificationMark .matching .matchingHead .lineBalloon-2 {
    bottom: -10px;
    right: -5%;
    width: 2px;
    height: 60px
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingHead .lineBalloon-2 {
    bottom: -10px;
    right: -5%;
    width: 1px;
    height: 38px
  }
}

.topPage .contents-certificationMark .matching .matchingHead-text {
  margin-top: 35px;
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: .14rem
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingHead-text {
    margin-top: 16px;
    font-size: 1.4rem;
    line-height: 2.1rem;
    letter-spacing: 0
  }
}

.topPage .contents-certificationMark .matching .matchingBox {
  width: 100%;
  margin-top: 45px;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  align-items: stretch;
  flex-wrap: wrap
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-certificationMark .matching .matchingBox {
    flex-direction: column;
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingBox {
    flex-direction: column;
    border-radius: 10px;
    margin-top: 21px
  }
  .topPage .contents-certificationMark .matching .matchingBox:first-of-type {
    margin-top: 37px
  }
}

@media only screen and (max-width:568px) and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingBox:first-of-type {
    margin-top: 21px
  }
}

.topPage .contents-certificationMark .matching .matchingBox li {
  width: 100%;
  max-width: 450px;
  background-color: #fff;
  border-radius: 20px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-certificationMark .matching .matchingBox li {
    margin: 0 auto 20px
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingBox li {
    margin: 0 auto 20px
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-certificationMark .matching .matchingBox .matchingBox1 {
    margin-right: auto
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingBox .matchingBox1 {
    margin-right: auto
  }
}

.topPage .contents-certificationMark .matching .matchingBox .matchingBox3 {
  margin: 40px auto 0
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-certificationMark .matching .matchingBox .matchingBox3 {
    margin-top: 0
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingBox .matchingBox3 {
    margin-top: 0
  }
}

.topPage .contents-certificationMark .matching .matchingBox-logo {
  width: 44.44444444444444%;
  margin-top: 40px
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingBox-logo {
    width: 59.666667%;
    margin-top: 21px
  }
}

.topPage .contents-certificationMark .matching .matchingBox-title {
  font-size: 2.6rem;
  line-height: 3.6rem;
  padding-bottom: 16px;
  border-bottom: 3px solid #000;
  margin: 9px 45px 0
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingBox-title {
    font-size: 1.8rem;
    line-height: 2.4rem;
    padding-bottom: 13px;
    margin: 0 25px
  }
}

.topPage .contents-certificationMark .matching .matchingBox-text {
  font-size: 1.6rem;
  line-height: 3.2rem;
  text-align: left;
  padding: 20px 45px 30px;
  letter-spacing: .08rem
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingBox-text {
    font-size: 1.4rem;
    line-height: 2.1rem;
    padding: 15px 25px 21px;
    letter-spacing: .1rem
  }
}

.topPage .contents-certificationMark .matching .matchingBox-link {
  font-size: 1.6rem;
  line-height: 3.2rem;
  color: #e15f52;
  text-align: left
}

@media only screen and (max-width:568px) {
  .topPage .contents-certificationMark .matching .matchingBox-link {
    font-size: 1.4rem;
    line-height: 2.1rem
  }
}

.topPage .contents-question {
  position: relative;
  margin-top: 30px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-question {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-question {
    margin-top: 0
  }
}

.topPage .contents-question .question-title {
  position: relative;
  margin-top: 60px
}

@media only screen and (max-width:568px) {
  .topPage .contents-question .question-title {
    margin-top: 25px
  }
}

.topPage .contents-question .question-title img {
  position: relative;
  z-index: 10;
  width: calc(508px/2)
}

@media only screen and (max-width:568px) {
  .topPage .contents-question .question-title img {
    width: 47.397260273972606%
  }
}

.topPage .contents-question .question-title:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  background-color: #000
}

@media only screen and (max-width:568px) {
  .topPage .contents-question .question-title:after {
    width: 95%;
    left: 50%;
    transform: translate(-50%, -50%)
  }
}

.topPage .contents-question .question-box {
  display: flex;
  margin: 9px auto 0;
  max-width: 820px
}

@media only screen and (max-width:568px) {
  .topPage .contents-question .question-box {
    max-width: 100%
  }
}

.topPage .contents-question .question-box__illust {
  width: 21.463414634146343%;
  height: 41.70731707317073%
}

@media only screen and (max-width:568px) {
  .topPage .contents-question .question-box__illust {
    margin: 7px 0 0 9px;
    width: 30.6%
  }
}

.topPage .contents-question .question-box__text {
  position: relative;
  border: 3px solid #000;
  border-radius: 10px;
  background-color: #fff;
  width: 525px;
  padding: 25px;
  -ms-grid-row-align: center;
  align-self: center;
  font-size: 2.4rem;
  line-height: 3.4rem;
  margin-left: 30px
}

@media only screen and (max-width:568px) {
  .topPage .contents-question .question-box__text {
    font-size: 1.5rem;
    line-height: 2.1rem;
    text-align: left;
    width: 59.09589%;
    padding: 10px 35px;
    border: 2px solid #000;
    margin-left: 18px
  }
}

.topPage .contents-question .question-box__text:after {
  content: '';
  position: absolute;
  top: 50%;
  left: -14px;
  transform: translateY(-50%);
  width: 14px;
  height: 16.5px;
  background-image: url(/assets/images/top/balloon_thorn_left.png);
  background-repeat: no-repeat;
  background-size: 100%
}

@media only screen and (max-width:568px) {
  .topPage .contents-question .question-box__text:after {
    background-image: url(/assets/images/top/balloon_thorn_left_sp.png);
    width: 9px;
    height: 10.5px;
    left: -8px
  }
}

.topPage .contents-anser {
  position: relative;
  max-width: 820px;
  margin-top: 47px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-anser {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser {
    margin-top: 30px
  }
}


.topPage .contents-anser:after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-image: url(/assets/images/common/bg_diagonalline.png);
  background-repeat: repeat;
  opacity: .6
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-anser:after {
    width: 96%;
    height: 100%;
    left: 25px
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser:after {
    width: 90%;
    height: 99%;
    left: 25px
  }
}

.topPage .contents-anser .anser {
  position: relative;
  border: 2px solid #000;
  border-radius: 10px;
  background-color: #fff;
  margin: 0 auto;
  z-index: 5
}

.topPage .contents-anser .anser:before {
  content: '';
  position: absolute;
  top: 123px;
  left: -194px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(204px/2);
  height: calc(308px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-anser .anser:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .anser:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .anser {
    width: 95%
  }
}

.topPage .contents-anser .anser-title {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%)
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .anser-title {
    top: -18px
  }
}

.topPage .contents-anser .anser-title img {
  width: calc(688px/2)
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .anser-title img {
    width: calc(378px/2)
  }
}

.topPage .contents-anser .anser-text {
  margin-top: 20px;
  font-size: 2.4rem;
  line-height: 3.8rem;
  padding-top: 26px;
  letter-spacing: .1rem
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .anser-text {
    font-size: 1.5rem;
    line-height: 2.3rem;
    padding: 15px
  }
}

.topPage .contents-anser .anser-illust {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 27px 0 34px
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .anser-illust {
    padding: 30px 0 17px
  }
}

.topPage .contents-anser .anser-illust__kakouhin {
  font-size: 1.6rem;
  line-height: 2.6rem
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .anser-illust__kakouhin {
    font-size: 1.2rem;
    line-height: 1.6rem
  }
}

.topPage .contents-anser .anser-illust__kakouhin img {
  width: 100%
}

.topPage .contents-anser .anser-illust__kakouhin p {
  margin-top: 23px
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .anser-illust__kakouhin p {
    padding: 0 15px
  }
}

.topPage .contents-anser .anser-illust__line {
  background-image: url(/assets/images/top/anser_diagonalline.png);
  background-repeat: no-repeat;
  width: 8px;
  height: 226px
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .anser-illust__line {
    width: 18px;
    height: 143px;
    background-size: contain
  }
}

.topPage .contents-anser .anser-illust__menu {
  font-size: 1.6rem;
  line-height: 2.6rem
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .anser-illust__menu {
    font-size: 1.2rem;
    line-height: 1.6rem
  }
}

.topPage .contents-anser .anser-illust__menu img {
  width: 100%
}

.topPage .contents-anser .anser-illust__menu p {
  margin-top: 23px
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .anser-illust__menu p {
    padding: 0 15px
  }
}

.topPage .contents-anser .nextArrow {
  bottom: -220px
}

@media only screen and (max-width:568px) {
  .topPage .contents-anser .nextArrow {
    bottom: -122px
  }
}


.topPage .contents-unusable {
  position: relative;
  margin-top: 70px;
  border-top: 2px solid #000;
  width: 88%;
  padding-bottom: 92px
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable {
    margin-top: 31px;
    width: 94%;
    padding-bottom: 40px
  }
}

.topPage .contents-unusable .unusable {
  margin-top: 144px
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable .unusable {
    margin-top: 66px
  }
}

.topPage .contents-unusable .unusable-title {
  display: flex;
  justify-content: center;
  margin-left: -55px
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable .unusable-title {
    margin: 0 auto
  }
}

.topPage .contents-unusable .unusable-title__illust {
  width: calc(408px/2);
  height: calc(312px/2)
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable .unusable-title__illust {
    width: calc(244px/2);
    height: calc(188px/2);
    margin-top: 44px
  }
}

.topPage .contents-unusable .unusable-title__text {
  -ms-grid-row-align: center;
  align-self: center;
  font-size: 3.2rem;
  line-height: 4.2rem;
  padding: 40px 0 0 20px
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable .unusable-title__text {
    font-size: 2.2rem;
    line-height: 2.6rem;
    letter-spacing: 0;
    text-align: left;
    padding: 40px 0 0 19px
  }
}

.topPage .contents-unusable .unusable-text {
  margin-top: 31px;
  font-size: 1.8rem;
  line-height: 3.6rem;
  letter-spacing: .2rem
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable .unusable-text {
    margin-top: 21px;
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

.topPage .contents-unusable .example {
  margin-top: 57px;
  display: flex;
  justify-content: space-between;
  max-width: 100%
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable .example {
    width: 100%;
    margin: 8px auto;
    flex-direction: column-reverse
  }
}

.topPage .contents-unusable .example-box {
  max-width: 464px;
  position: relative;
  z-index: 10;
  border: 2px solid #000;
  border-radius: 10px;
  background-color: #fff;
  padding: 50px 0 34px
}

@media only screen and (min-width:961px) {
  .topPage .contents-unusable .example-box:first-of-type {
    margin-right: 20px
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable .example-box {
    padding: 33px 0 21px;
    width: 90%
  }
  .topPage .contents-unusable .example-box:first-of-type {
    margin-top: 34px
  }
}

.topPage .contents-unusable .example-box:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  height: 5px;
  width: 35%;
  background: #fff
}

.topPage .contents-unusable .example-box-head {
  position: absolute;
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  z-index: 5
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable .example-box-head {
    top: -4%;
    width: 32.410423452768725%
  }
}

.topPage .contents-unusable .example-box__text {
  margin-top: 0;
  font-size: 2rem;
  line-height: 3.2rem;
  font-weight: 700
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable .example-box__text {
    font-size: 1.4rem;
    line-height: 2.3rem;
    margin-bottom: 4px;
    font-weight: 400;
    padding: 0 10px;
    letter-spacing: -.1rem
  }
}

.topPage .contents-unusable .example-box__illust {
  width: 100%;
  margin-top: 11px
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable .example-box__illust {
    margin-top: 1px
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-unusable .example-box:first-of-type {
    margin-left: 20px;
    margin-right: 20px
  }
  .topPage .contents-unusable .example-box:last-of-type {
    margin-right: 20px
  }
}

.topPage .contents-unusable .nextArrow {
  bottom: -53px
}

@media only screen and (max-width:568px) {
  .topPage .contents-unusable .nextArrow {
    bottom: -43px
  }
}

.topPage .contents-company {
  position: relative;
  padding-top: 97px;
  padding-bottom: 60px
}

@media only screen and (max-width:568px) {
  .topPage .contents-company {
    padding-top: 60px;
    padding-bottom: 30px
  }
}

.topPage .contents-company .headText {
  margin-top: 52px;
  position: relative;
  background-image: url(/assets/images/top/bg_house.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: auto;
  height: calc(255px/2)
}

@media only screen and (max-width:568px) {
  .topPage .contents-company .headText {
    margin-top: 35px;
    height: calc(162px/2)
  }
}

.topPage .contents-company .headText p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  line-height: 3.6rem;
  letter-spacing: .1rem
}

@media only screen and (max-width:568px) {
  .topPage .contents-company .headText p {
    font-size: 1.4rem;
    line-height: 2.3rem;
    width: 100%
  }
}

.topPage .contents-company .company {
  margin: 45px 0 0
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-company .company {
    margin: 40px 20px
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-company .company {
    margin-top: 29px
  }
}

.topPage .contents-company .company-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 59px 0;
  background-color: #ededed
}

.topPage .contents-company .company-list li {
  margin: 0 0 0 40px
}

.topPage .contents-company .company-list li:first-of-type {
  margin-left: 0
}

.topPage .contents-company .company-list li img {
  width: auto;
  height: 70px
}

.topPage .contents-company .company-list li p {
  font-size: 1.4rem;
  line-height: 1.8rem;
  margin-bottom: 20px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-company .company-list li {
    margin-right: 5%;
    width: 18.75%
  }
  .topPage .contents-company .company-list li:nth-child(4n) {
    margin-left: 0
  }
  .topPage .contents-company .company-list li:nth-child(3n) {
    margin-right: 0
  }
  .topPage .contents-company .company-list li img {
    width: 100%;
    height: auto
  }
  .topPage .contents-company .company-list li p {
    font-size: 1.2rem;
    line-height: 1.4rem
  }
  .topPage .contents-company .company-list .list7 {
    width: 18.75%
  }
  .topPage .contents-company .company-list .list7 img {
    transform: translateY(50%);
    width: 100%;
    height: auto
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-company .company-list {
    padding: 24px 5px;
    width: 85%;
    margin: 0 auto
  }
  .topPage .contents-company .company-list li {
    margin: 0 5px;
    width: 30.75%
  }
  .topPage .contents-company .company-list li:nth-child(4n) {
    margin-left: 0
  }
  .topPage .contents-company .company-list li:nth-child(3n) {
    margin-right: 0
  }
  .topPage .contents-company .company-list li img {
    width: 100%;
    height: auto
  }
  .topPage .contents-company .company-list li p {
    font-size: .8rem;
    line-height: 1rem;
    margin-bottom: 10px
  }
  .topPage .contents-company .company-list .list7 {
    width: 31.75%
  }
  .topPage .contents-company .company-list .list7 img {
    transform: translateY(50%);
    width: 100%;
    height: auto
  }
}

.topPage .contents-company .company .randomOrder {
  font-size: 1.4rem;
  line-height: 1.8rem;
  margin-top: 10px;
  text-align: right
}

@media only screen and (max-width:568px) {
  .topPage .contents-company .company .randomOrder {
    margin-right: 8%;
    margin-top: 5px;
    font-size: 1rem
  }
}

.topPage .contents-company .company-bigText {
  margin-top: 32px;
  position: relative;
  font-size: 3.6rem;
  line-height: 5.2rem;
  font-family: GenJyuuGothic, sans-serif;
  display: flex;
  justify-content: center;
  letter-spacing: .1rem
}

@media only screen and (max-width:568px) {
  .topPage .contents-company .company-bigText {
    margin-top: 14px;
    font-size: 1.6rem;
    line-height: 2.6rem
  }
}

.topPage .contents-company .company-bigText .lineBalloon-1 {
  position: relative;
  left: -43px;
  bottom: -30px;
  width: 3px;
  height: 66px;
  background-color: #000;
  transform: rotate(-30deg)
}

@media only screen and (max-width:568px) {
  .topPage .contents-company .company-bigText .lineBalloon-1 {
    bottom: -15px;
    left: -3%;
    width: 1px;
    height: 33px
  }
}

.topPage .contents-company .company-bigText .lineBalloon-2 {
  position: relative;
  right: -43px;
  bottom: -30px;
  width: 3px;
  height: 66px;
  background-color: #000;
  transform: rotate(30deg)
}

@media only screen and (max-width:568px) {
  .topPage .contents-company .company-bigText .lineBalloon-2 {
    bottom: -15px;
    right: -3%;
    width: 1px;
    height: 33px
  }
}

.topPage .contents-details {
  padding-top: 80px;
  position: relative;
  z-index: 5;
  padding-bottom: 213px
}

@media only screen and (max-width:568px) {
  .topPage .contents-details {
    padding-top: 20px;
    padding-bottom: 93px
  }
}

.topPage .contents-details .details {
  width: 100%;
  max-width: 776px;
  margin: 0 auto
}

.topPage .contents-details .details-head {
  position: relative;
  font-size: 2.4rem;
  line-height: 2.4rem
}

@media only screen and (max-width:568px) {
  .topPage .contents-details .details-head {
    font-size: 1.6rem;
    line-height: 2.6rem
  }
}

.topPage .contents-details .details-head:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(145px/2);
  height: calc(103px/2);
  background-image: url(/assets/images/top/illust_leaf1.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .topPage .contents-details .details-head:before {
    max-width: calc(77px/2);
    height: calc(55px/2);
    left: 9%
  }
}

.topPage .contents-details .details-head:after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(104px/2);
  height: calc(122px/2);
  background-image: url(/assets/images/top/illust_leaf2.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .topPage .contents-details .details-head:after {
    max-width: calc(56px/2);
    height: calc(66px/2);
    right: 12%
  }
}

.topPage .contents-details .details-button {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-details .details-button {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-details .details-button {
    width: 77%;
    margin: 14px auto 0
  }
}

.topPage .contents-details .details-button__link {
  position: relative;
  width: 100%;
  max-width: calc(746px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-details .details-button__link {
    width: 48%
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-details .details-button__link {
    width: 100%;
    margin-bottom: 10px;
    max-width: 100%
  }
}

.topPage .contents-details .details-button__link-text {
  position: absolute;
  z-index: 10;
  font-size: 1.8rem;
  width: 100%;
  top: 45%;
  left: 8px;
  transform: translateY(-50%)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .topPage .contents-details .details-button__link-text {
    font-size: 1.5rem
  }
}

@media only screen and (max-width:568px) {
  .topPage .contents-details .details-button__link-text {
    font-size: 1.4rem;
    letter-spacing: .15rem;
    top: 45%
  }
}

.topPage .contents-details .details-button__link-text span {
  position: relative
}

.topPage .contents-details .details-button__link-text span:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(24px/2);
  height: calc(40px/2);
  background-image: url(/assets/images/common/arrow_next.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .topPage .contents-details .details-button__link-text span:before {
    left: -20px;
    max-width: calc(18px/2);
    height: calc(28px/2)
  }
}

.topPage .contents-details .details-button img {
  width: 100%;
  position: relative
}

.restaurant {
  overflow: hidden
}

.restaurant .lowerTitle-title:before {
  content: '';
  max-width: calc(651px/2);
  height: calc(446px/2);
  background-image: url(/assets/images/restaurant/illust_head_left.png);
  top: -62px;
  left: -357px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .restaurant .lowerTitle-title:before {
    max-width: calc(185px/2);
    height: calc(186px/2);
    background-image: url(/assets/images/restaurant/illust_head_left_sp.png);
    top: 32%;
    left: -63%
  }
}

@media only screen and (max-width:568px) {
  .restaurant .lowerTitle-title:before {
    max-width: calc(185px/2);
    height: calc(186px/2);
    background-image: url(/assets/images/restaurant/illust_head_left_sp.png);
    top: 32%;
    left: -71%
  }
}

.restaurant .lowerTitle-title:after {
  content: '';
  max-width: calc(600px/2);
  height: calc(436px/2);
  background-image: url(/assets/images/restaurant/illust_head_right.png);
  top: -60px;
  right: -367px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .restaurant .lowerTitle-title:after {
    max-width: calc(106px/2);
    height: calc(205px/2);
    background-image: url(/assets/images/restaurant/illust_head_right_sp.png);
    top: 26%;
    right: -88%
  }
}

@media only screen and (max-width:568px) {
  .restaurant .lowerTitle-title:after {
    max-width: calc(106px/2);
    height: calc(205px/2);
    background-image: url(/assets/images/restaurant/illust_head_right_sp.png);
    top: 26%;
    right: -92%
  }
}

.restaurant .contents {
  max-width: 960px;
  margin: 0 auto;
  text-align: center
}

.restaurant .contents-merit {
  position: relative;
  padding-top: 100px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-merit {
    padding-top: 63px
  }
}

.restaurant .contents-merit:before {
  content: '';
  position: absolute;
  top: 81px;
  right: -136px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(204px/2);
  height: calc(308px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .restaurant .contents-merit:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .restaurant .contents-merit:before {
    display: none
  }
}

.restaurant .contents-merit .merit {
  width: 100%;
  max-width: 960px
}

.restaurant .contents-merit .merit .meritDescription {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 70px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-merit .merit .meritDescription {
    display: block;
    margin-top: 35px
  }
}

.restaurant .contents-merit .merit .meritDescription-box {
  max-width: 450px;
  background-color: #ededed;
  border-radius: 20px;
  padding-bottom: 34px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-merit .merit .meritDescription-box {
    max-width: 100%;
    width: 84%;
    border-radius: 10px;
    padding-bottom: 24px;
    margin: 13px auto 0
  }
  .restaurant .contents-merit .merit .meritDescription-box:first-of-type {
    margin: 20px auto 0
  }
}

.restaurant .contents-merit .merit .meritDescription-box__illust {
  width: 100%;
  padding-top: 42px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-merit .merit .meritDescription-box__illust {
    padding-top: 37px
  }
}

.restaurant .contents-merit .merit .meritDescription-box__title {
  font-size: 2.6rem;
  line-height: 2.6rem;
  font-weight: 700;
  border-bottom: 3px solid #000;
  margin: 30px 45px 0;
  padding-bottom: 18px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-merit .merit .meritDescription-box__title {
    font-size: 1.8rem;
    line-height: 1.8rem;
    margin: 18px 30px 0;
    padding-bottom: 15px
  }
}

.restaurant .contents-merit .merit .meritDescription-box__text {
  font-size: 1.6rem;
  line-height: 2.8rem;
  margin: 0 45px;
  padding-top: 10px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-merit .merit .meritDescription-box__text {
    font-size: 1.4rem;
    line-height: 2.4rem;
    margin: 0 20px;
    padding-top: 13px
  }
}

.restaurant .contents-merit .merit .meritDescription-box__link {
  margin-top: 20px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-merit .merit .meritDescription-box__link {
    margin-top: 11px
  }
}

.restaurant .contents-merit .merit .meritDescription-box__link a {
  position: relative;
  width: 100%
}

.restaurant .contents-merit .merit .meritDescription-box__link a:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(48px/2);
  height: calc(48px/2);
  background-image: url(/assets/images/common/icon_link_circle.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .restaurant .contents-merit .merit .meritDescription-box__link a:before {
    left: -13px;
    max-width: calc(44px/2);
    height: calc(44px/2)
  }
}

.restaurant .contents-merit .merit .meritDescription-box__link span {
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif;
  text-decoration: underline;
  margin-left: 15px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-merit .merit .meritDescription-box__link span {
    font-size: 1.4rem;
    line-height: 1.4rem
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .restaurant .contents-merit .merit .meritDescription-box:first-of-type {
    margin-left: 20px;
    margin-right: 20px
  }
  .restaurant .contents-merit .merit .meritDescription-box:last-of-type {
    margin-right: 20px
  }
}

.facilities {
  margin-top: 75px;
  padding-bottom: 100px
}

@media only screen and (max-width:568px) {
  .facilities {
    margin-top: 23px;
    padding-bottom: 57px
  }
}

.facilities p {
  position: relative;
  font-size: 3rem;
  line-height: 3rem;
  font-family: GenJyuuGothic, sans-serif;
  display: flex;
  justify-content: center
}

@media only screen and (max-width:568px) {
  .facilities p {
    font-size: 1.8rem;
    line-height: 2.4rem
  }
}

.facilities p .lineBalloon-1 {
  position: relative;
  left: -30px;
  bottom: 0;
  width: 3px;
  height: 30px;
  background-color: #000;
  transform: rotate(-30deg)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .facilities p .lineBalloon-1 {
    bottom: -10px;
    left: -5%;
    width: 2px;
    height: 60px
  }
}

@media only screen and (max-width:568px) {
  .facilities p .lineBalloon-1 {
    bottom: -10px;
    left: -5%;
    width: 1px;
    height: 38px
  }
}

.facilities p .lineBalloon-2 {
  position: relative;
  right: -30px;
  bottom: 0;
  width: 3px;
  height: 30px;
  background-color: #000;
  transform: rotate(30deg)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .facilities p .lineBalloon-2 {
    bottom: -10px;
    right: -5%;
    width: 2px;
    height: 60px
  }
}

@media only screen and (max-width:568px) {
  .facilities p .lineBalloon-2 {
    bottom: -10px;
    right: -5%;
    width: 1px;
    height: 38px
  }
}

.facilities-button {
  margin-top: 34px;
  display: flex;
  justify-content: center
}

@media only screen and (max-width:568px) {
  .facilities-button {
    margin-top: 10px
  }
}

.facilities-button__link {
  position: relative;
  width: 100%;
  max-width: calc(746px/2);
  height: calc(162px/2);
  background-image: url(/assets/images/common/button.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .facilities-button__link {
    max-width: calc(562px/2);
    height: calc(122px/2)
  }
}

.facilities-button__link span {
  position: relative;
  font-size: 1.8rem;
  width: 100%;
  top: 28%;
  left: 8px
}

@media only screen and (max-width:568px) {
  .facilities-button__link span {
    font-size: 1.6rem;
    top: 27%;
    left: 11px
  }
}

.facilities-button__link span:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(24px/2);
  height: calc(40px/2);
  background-image: url(/assets/images/common/arrow_next.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .facilities-button__link span:before {
    max-width: calc(18px/2);
    height: calc(28px/2);
    left: -15px
  }
}

.facilities-button__link img {
  width: 100%
}

.restaurant .contents-merit .nextArrow {
  bottom: -40px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-merit .nextArrow {
    bottom: -33px
  }
}

.restaurant .contents-HowtoUse {
  position: relative;
  z-index: 10;
  padding-top: 108px;
  padding-bottom: 165px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse {
    padding-top: 55px;
    padding-bottom: 110px;
    letter-spacing: -.5px
  }
}

.restaurant .contents-HowtoUse:before {
  content: '';
  position: absolute;
  top: -150px;
  left: -150px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(180px/2);
  height: calc(248px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .restaurant .contents-HowtoUse:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse:before {
    display: none
  }
}

.restaurant .contents-HowtoUse .howtoUse .headText {
  margin-top: 51px;
  font-size: 1.8rem;
  line-height: 1.8rem
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .howtoUse .headText {
    margin-top: 40px;
    font-size: 1.4rem;
    line-height: 1.4rem;
    letter-spacing: .1rem
  }
}

.restaurant .contents-HowtoUse .example {
  margin: 68px auto 0
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .example {
    margin: 40px auto 0
  }
}

.restaurant .contents-HowtoUse .manual {
  margin-top: 67px;
  display: flex;
  justify-content: center
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .manual {
    margin-top: 30px;
    display: block
  }
}

.restaurant .contents-HowtoUse .manual-title {
  position: relative;
  max-width: 480px;
  width: 100%;
  text-align: right
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .manual-title {
    max-width: 100%;
    text-align: center
  }
}

.restaurant .contents-HowtoUse .manual-title span {
  font-size: 2.8rem;
  line-height: 2.8rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .manual-title span {
    font-size: 1.8rem;
    line-height: 1.8rem
  }
}

.restaurant .contents-HowtoUse .manual-title:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -21px;
  right: 0;
  width: 96px;
  height: 2px;
  background-color: #000;
  transform: rotate(7deg)
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .manual-title:before {
    width: 1px;
    height: 20px;
    right: auto;
    left: 75px;
    top: 0;
    transform: rotate(-28deg)
  }
}

.restaurant .contents-HowtoUse .manual-title:after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: -18px;
  right: 0;
  width: 96px;
  height: 2px;
  background-color: #000;
  transform: rotate(-7deg)
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .manual-title:after {
    width: 1px;
    height: 20px;
    right: 75px;
    top: 0;
    transform: rotate(28deg)
  }
}

.restaurant .contents-HowtoUse .manual-link {
  max-width: 480px;
  width: 100%;
  text-align: left
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .manual-link {
    max-width: 100%;
    margin-top: 20px
  }
}

.restaurant .contents-HowtoUse .manual-link a {
  position: relative;
  left: 12%
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .manual-link a {
    left: 26%
  }
}

.restaurant .contents-HowtoUse .manual-link a:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(48px/2);
  height: calc(48px/2);
  background-image: url(/assets/images/common/icon_link_circle.png);
  background-repeat: no-repeat;
  background-size: contain
}

.restaurant .contents-HowtoUse .manual-link span {
  position: relative;
  top: 2px;
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif;
  text-decoration: underline;
  margin-left: 15px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .manual-link span {
    font-size: 1.4rem;
    line-height: 1.4rem
  }
}

.restaurant .contents-HowtoUse .permission {
  position: relative;
  margin-top: 126px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .permission {
    margin-top: 71px
  }
}

.restaurant .contents-HowtoUse .permission:before {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf3.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(186px/2);
  height: calc(340px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .restaurant .contents-HowtoUse .permission:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .permission:before {
    display: none
  }
}

.restaurant .contents-HowtoUse .permission-head {
  position: relative
}

.restaurant .contents-HowtoUse .permission-head p {
  font-size: 3.2rem;
  line-height: 4.2rem
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .permission-head p {
    font-size: 2.1rem;
    line-height: 2.6rem
  }
}

.restaurant .contents-HowtoUse .permission-head__illust {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 179px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .permission-head__illust {
    width: calc(202px/2)
  }
}

.restaurant .contents-HowtoUse .permission-text {
  margin-top: 63px;
  font-size: 1.8rem;
  line-height: 3.6rem;
  letter-spacing: .16rem
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .permission-text {
    margin-top: 38px;
    padding: 0 20px;
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

.restaurant .contents-HowtoUse .apply {
  position: relative;
  max-width: 820px;
  margin: 54px auto 0
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .apply {
    margin: 40px auto 0;
    padding: 0 10px
  }
}

.restaurant .contents-HowtoUse .apply:after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-image: url(/assets/images/common/bg_diagonalline.png);
  background-repeat: repeat;
  opacity: .6
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .apply:after {
    top: 6px;
    left: 12px;
    width: 95%;
    height: 100%
  }
}

.restaurant .contents-HowtoUse .apply .applyBox {
  position: relative;
  border: 2px solid #000;
  border-radius: 10px;
  background-color: #fff;
  margin: 0 auto;
  z-index: 5;
  padding: 50px 20px 55px
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .apply .applyBox {
    padding: 35px 20px 34px
  }
}

.restaurant .contents-HowtoUse .apply .applyBox-title {
  position: relative;
  font-size: 3rem;
  line-height: 4.2rem;
  font-family: GenJyuuGothic, sans-serif
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .apply .applyBox-title {
    font-size: 1.8rem;
    line-height: 2.6rem
  }
}

.restaurant .contents-HowtoUse .apply .applyBox-title:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(128px/2);
  height: calc(156px/2);
  background-image: url(/assets/images/restaurant/illust_leaf.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .restaurant .contents-HowtoUse .apply .applyBox-title:before {
    left: -5%
  }
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .apply .applyBox-title:before {
    top: -56%;
    left: 43%;
    transform: translateY(-50%);
    max-width: calc(82px/2);
    height: calc(99px/2)
  }
}

.restaurant .contents-HowtoUse .apply .applyBox-button {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .restaurant .contents-HowtoUse .apply .applyBox-button .breakCancelPc {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .apply .applyBox-button {
    margin-top: 15px
  }
}

.restaurant .contents-HowtoUse .apply .applyBox-button__link {
  position: relative;
  width: 100%;
  max-width: calc(970px/2)
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .apply .applyBox-button__link {
    width: 86%
  }
}

.restaurant .contents-HowtoUse .apply .applyBox-button__link span {
  position: absolute;
  font-size: 1.8rem;
  width: 100%;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%)
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .apply .applyBox-button__link span {
    font-size: 1.6rem
  }
}

.restaurant .contents-HowtoUse .apply .applyBox-button__link span:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(24px/2);
  height: calc(40px/2);
  background-image: url(/assets/images/common/arrow_next.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .restaurant .contents-HowtoUse .apply .applyBox-button__link span:before {
    left: 15%;
    max-width: calc(18px/2);
    height: calc(28px/2)
  }
}

.restaurant .contents-HowtoUse .apply .applyBox-button__link img {
  width: 100%
}

.processing {
  overflow: hidden
}

.processing .lowerTitle-title:before {
  content: '';
  max-width: calc(623px/2);
  height: calc(252px/2);
  background-image: url(/assets/images/processing/illust_head_left.png);
  top: 9px;
  left: -356px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .lowerTitle-title:before {
    max-width: calc(141px/2);
    height: calc(246px/2);
    background-image: url(/assets/images/processing/illust_head_left_sp.png);
    top: 0;
    left: -61%
  }
}

@media only screen and (max-width:568px) {
  .processing .lowerTitle-title:before {
    max-width: calc(141px/2);
    height: calc(246px/2);
    background-image: url(/assets/images/processing/illust_head_left_sp.png);
    top: -25%;
    left: -61%
  }
}

.processing .lowerTitle-title:after {
  content: '';
  max-width: calc(462px/2);
  height: calc(438px/2);
  background-image: url(/assets/images/processing/illust_head_right.png);
  top: -73px;
  right: -284px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .lowerTitle-title:after {
    max-width: calc(118px/2);
    height: calc(233px/2);
    background-image: url(/assets/images/processing/illust_head_right_sp.png);
    top: 10%;
    right: -94%
  }
}

@media only screen and (max-width:568px) {
  .processing .lowerTitle-title:after {
    max-width: calc(118px/2);
    height: calc(233px/2);
    background-image: url(/assets/images/processing/illust_head_right_sp.png);
    top: -15%;
    right: -94%
  }
}

.processing .contents {
  max-width: 960px;
  margin: 0 auto;
  text-align: center
}

.processing .nomalButton {
  margin-top: 30px;
  display: flex
}

@media only screen and (max-width:568px) {
  .processing .nomalButton {
    margin-top: 25px
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .nomalButton-button .breakCancelPc {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .nomalButton-button {
    margin-top: 15px
  }
}

.processing .nomalButton-button__text {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 353px;
  width: 100%
}

.processing .nomalButton-button__link {
  position: relative
}

@media only screen and (max-width:568px) {
  .processing .nomalButton-button__link {
    width: 77%;
    margin: 0 auto
  }
}

.processing .nomalButton-button__link span {
  position: relative;
  font-size: 1.8rem;
  width: 100%
}

@media only screen and (max-width:568px) {
  .processing .nomalButton-button__link span {
    font-size: 1.4rem
  }
}

.processing .nomalButton-button__link span:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -21px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(24px/2);
  height: calc(40px/2);
  background-image: url(/assets/images/common/arrow_next.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .processing .nomalButton-button__link span:before {
    left: -9%;
    max-width: calc(18px/2);
    height: calc(28px/2)
  }
}

.processing .nomalButton-button__link img {
  width: 100%;
  max-width: 353px
}

.processing .iconLink a {
  position: relative;
  width: 100%
}

.processing .iconLink a:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(48px/2);
  height: calc(48px/2);
  background-image: url(/assets/images/common/icon_link_circle.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .processing .iconLink a:before {
    max-width: calc(43px/2);
    height: calc(43px/2)
  }
}

.processing .iconLink span {
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif;
  text-decoration: underline;
  margin-left: 15px
}

@media only screen and (max-width:568px) {
  .processing .iconLink span {
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

.processing .contents-point {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px
}

@media only screen and (max-width:568px) {
  .processing .contents-point {
    padding-top: 60px;
    padding-bottom: 50px
  }
}

.processing .contents-point:before {
  content: '';
  position: absolute;
  top: 80px;
  right: -100px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(204px/2);
  height: calc(308px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-point:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-point:before {
    display: none
  }
}

.processing .contents-point .point {
  width: 100%;
  max-width: 960px
}

.processing .contents-point .point .head-2 span:after {
  content: '';
  background-image: none
}

.processing .contents-point .point .head-2 .turnBack-line {
  display: inline
}

.processing .contents-point .point .head-2 .turnBack-line:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 8px;
  background-image: url(/assets/images/common/bg_diagonalline.png);
  background-repeat: repeat-x
}

.processing .contents-point .point .pointList {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 64px
}

@media only screen and (max-width:568px) {
  .processing .contents-point .point .pointList {
    display: block;
    margin-top: 85px
  }
}

.processing .contents-point .point .pointList-box {
  position: relative;
  max-width: 300px;
  background-color: #ededed;
  border-radius: 20px;
  margin: 50px 0 0;
  padding-bottom: 36px
}

@media only screen and (max-width:568px) {
  .processing .contents-point .point .pointList-box {
    max-width: 100%;
    width: 84%;
    padding-bottom: 24px;
    margin: 62px auto 0
  }
  .processing .contents-point .point .pointList-box:first-of-type {
    margin: 20px auto 0
  }
}

.processing .contents-point .point .pointList-box__point {
  position: absolute;
  z-index: 10;
  top: -60px;
  left: 12%;
  width: 53.333333333333336%
}

@media only screen and (max-width:568px) {
  .processing .contents-point .point .pointList-box__point {
    width: 37.733333%;
    top: -40px;
    left: 43%;
    transform: translateX(-50%)
  }
}

.processing .contents-point .point .pointList-box__illust {
  width: 100%;
  padding-top: 72px
}

@media only screen and (max-width:568px) {
  .processing .contents-point .point .pointList-box__illust {
    width: 76%;
    padding-top: 53px
  }
}

.processing .contents-point .point .pointList-box__title {
  font-size: 2.6rem;
  line-height: 3.4rem;
  font-weight: 700;
  border-bottom: 3px solid #000;
  margin: 0 30px;
  padding-bottom: 9px
}

@media only screen and (max-width:568px) {
  .processing .contents-point .point .pointList-box__title {
    font-size: 1.8rem;
    line-height: 2.4rem;
    border-bottom: 2px solid #000;
    margin: 0 23px;
    padding-bottom: 14px
  }
}

.processing .contents-point .point .pointList-box__text {
  font-size: 1.6rem;
  line-height: 2.8rem;
  margin: 0 30px;
  padding-top: 21px
}

@media only screen and (max-width:568px) {
  .processing .contents-point .point .pointList-box__text {
    font-size: 1.4rem;
    line-height: 2.1rem;
    padding-top: 16px
  }
}

.processing .contents-point .point .pointList-box__link {
  margin: 0 auto;
  margin-top: 20px;
  text-align: left;
  display: inline-block
}

@media only screen and (max-width:568px) {
  .processing .contents-point .point .pointList-box__link {
    margin-top: 15px
  }
}

.processing .contents-point .point .pointList-box__link a {
  position: relative;
  width: 100%
}

.processing .contents-point .point .pointList-box__link a:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -35px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(48px/2);
  height: calc(48px/2);
  background-image: url(/assets/images/common/icon_link_circle.png);
  background-repeat: no-repeat;
  background-size: contain
}

.processing .contents-point .point .pointList-box__link span {
  font-size: 1.6rem;
  line-height: 1.8rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif;
  text-decoration: underline
}

@media only screen and (max-width:568px) {
  .processing .contents-point .point .pointList-box__link span {
    font-size: 1.4rem;
    line-height: 1.4rem
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-point .point .pointList-box {
    margin-right: 20px
  }
  .processing .contents-point .point .pointList-box:first-of-type {
    margin-left: 20px;
    margin-right: 20px
  }
  .processing .contents-point .point .pointList-box:last-of-type {
    margin-right: 20px
  }
}

.processing .contents-point .point-button {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto
}

@media only screen and (max-width:568px) {
  .processing .contents-point .point-button {
    flex-direction: column;
    width: 100%
  }
}

.processing .contents-point .point-button .nomalButton {
  margin-top: 60px
}

@media only screen and (max-width:568px) {
  .processing .contents-point .point-button .nomalButton {
    margin-top: 25px
  }
  .processing .contents-point .point-button .nomalButton:last-of-type {
    margin-top: 9px
  }
}

@media only screen and (min-width:961px) {
  .processing .contents-point .point-button .nomalButton:first-of-type {
    margin-right: 20px
  }
}

.processing .contents-point .nextArrow {
  bottom: -50px
}

@media only screen and (max-width:568px) {
  .processing .contents-point .nextArrow {
    bottom: -35px
  }
}

.processing .contents-question {
  position: relative;
  padding-top: 97px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-question {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-question {
    padding-top: 59px
  }
}

.processing .contents-question .question-title {
  position: relative;
  margin-top: 70px
}

@media only screen and (max-width:568px) {
  .processing .contents-question .question-title {
    margin-top: 40px
  }
}

.processing .contents-question .question-title img {
  position: relative;
  z-index: 10;
  width: calc(508px/2)
}

@media only screen and (max-width:568px) {
  .processing .contents-question .question-title img {
    width: 47.397260273972606%
  }
}

.processing .contents-question .question-title:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  background-color: #000
}

@media only screen and (max-width:568px) {
  .processing .contents-question .question-title:after {
    width: 95%;
    left: 50%;
    transform: translate(-50%, -50%)
  }
}

.processing .contents-question .question-box {
  display: flex;
  margin: 10px auto 0;
  max-width: 820px
}

@media only screen and (max-width:568px) {
  .processing .contents-question .question-box {
    max-width: 100%
  }
}

.processing .contents-question .question-box__illust {
  width: 21.463414634146343%;
  height: 41.70731707317073%
}

@media only screen and (max-width:568px) {
  .processing .contents-question .question-box__illust {
    margin: 7px 0 0 9px;
    width: 30.6%
  }
}

.processing .contents-question .question-box__text {
  position: relative;
  border: 3px solid #000;
  border-radius: 10px;
  background-color: #fff;
  width: 525px;
  padding: 25px;
  -ms-grid-row-align: center;
  align-self: center;
  font-size: 2.4rem;
  line-height: 3.4rem;
  margin-left: 30px
}

@media only screen and (max-width:568px) {
  .processing .contents-question .question-box__text {
    font-size: 1.5rem;
    line-height: 2.1rem;
    text-align: left;
    width: 59.09589%;
    padding: 10px 35px;
    border: 2px solid #000;
    margin-left: 18px
  }
}

.processing .contents-question .question-box__text:after {
  content: '';
  position: absolute;
  top: 50%;
  left: -14px;
  transform: translateY(-50%);
  width: 14px;
  height: 16.5px;
  background-image: url(/assets/images/top/balloon_thorn_left.png);
  background-repeat: no-repeat;
  background-size: 100%
}

@media only screen and (max-width:568px) {
  .processing .contents-question .question-box__text:after {
    background-image: url(/assets/images/top/balloon_thorn_left_sp.png);
    width: 9px;
    height: 10.5px;
    left: -8px
  }
}

.processing .question1:before {
  content: '';
  position: absolute;
  top: -70px;
  left: -131px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(180px/2);
  height: calc(248px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .question1:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .question1:before {
    display: none
  }
}

.processing .question2 {
  padding-top: 0
}

.processing .question2 .question-title {
  margin-top: 45px
}

.processing .question2:before {
  content: '';
  position: absolute;
  top: 300px;
  left: -180px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf4.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(274px/2);
  height: calc(286px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .question2:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .question2:before {
    display: none
  }
}

.processing .question3 {
  padding-top: 35px
}

.processing .question3 .question-title {
  margin-top: 45px
}

.processing .anser1 {
  position: relative
}

.processing .anser1:before {
  content: '';
  position: absolute;
  top: 486px;
  right: -204px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf3.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(186px/2);
  height: calc(340px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .anser1:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .anser1:before {
    display: none
  }
}

.processing .anser3 {
  position: relative
}

.processing .anser3:before {
  content: '';
  position: absolute;
  top: 162px;
  left: -214px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(204px/2);
  height: calc(308px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .anser3:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .anser3:before {
    display: none
  }
}

.processing .contents-anser {
  position: relative;
  max-width: 820px;
  margin-top: 34px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-anser {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-anser {
    margin-top: 30px
  }
}

.processing .contents-anser:after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-image: url(/assets/images/common/bg_diagonalline.png);
  background-repeat: repeat;
  opacity: .6
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-anser:after {
    width: 95%;
    height: 100%;
    left: 25px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-anser:after {
    width: 90%;
    height: 99%;
    left: 25px
  }
}

.processing .contents-anser .anser {
  position: relative;
  border: 2px solid #000;
  border-radius: 10px;
  background-color: #fff;
  margin: 0 auto;
  z-index: 5
}

@media only screen and (max-width:568px) {
  .processing .contents-anser .anser {
    width: 95%
  }
}

.processing .contents-anser .anser-title {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%)
}

@media only screen and (max-width:568px) {
  .processing .contents-anser .anser-title {
    top: -18px
  }
}

.processing .contents-anser .anser-title img {
  width: calc(688px/2)
}

@media only screen and (max-width:568px) {
  .processing .contents-anser .anser-title img {
    width: calc(378px/2)
  }
}

.processing .contents-anser .anser-text {
  margin: 57px 0 44px;
  font-size: 2.4rem;
  line-height: 3.8rem
}

@media only screen and (max-width:568px) {
  .processing .contents-anser .anser-text {
    margin: 20px 0 0;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 15px 15px 27px
  }
}

.processing .contents-anser .anser-text span {
  font-weight: 700
}

.processing .contents-anser .anser-illust {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 30px 0
}

@media only screen and (max-width:568px) {
  .processing .contents-anser .anser-illust {
    padding: 30px 0 25px
  }
}

.processing .contents-anser .anser-illust__kakouhin {
  font-size: 1.6rem;
  line-height: 2.6rem
}

@media only screen and (max-width:568px) {
  .processing .contents-anser .anser-illust__kakouhin {
    font-size: 1.2rem;
    line-height: 1.6rem
  }
}

.processing .contents-anser .anser-illust__kakouhin img {
  width: 100%
}

.processing .contents-anser .anser-illust__kakouhin p {
  margin-top: 15px
}

@media only screen and (max-width:568px) {
  .processing .contents-anser .anser-illust__kakouhin p {
    padding: 0 15px
  }
}

.processing .contents-anser .anser-illust__line {
  background-image: url(/assets/images/top/anser_diagonalline.png);
  background-repeat: no-repeat;
  width: 8px;
  height: 226px
}

@media only screen and (max-width:568px) {
  .processing .contents-anser .anser-illust__line {
    width: 18px;
    height: 143px;
    background-size: contain
  }
}

.processing .contents-anser .anser-illust__menu {
  font-size: 1.6rem;
  line-height: 2.6rem
}

@media only screen and (max-width:568px) {
  .processing .contents-anser .anser-illust__menu {
    font-size: 1.2rem;
    line-height: 1.6rem
  }
}

.processing .contents-anser .anser-illust__menu img {
  width: 100%
}

.processing .contents-anser .anser-illust__menu p {
  margin-top: 15px
}

@media only screen and (max-width:568px) {
  .processing .contents-anser .anser-illust__menu p {
    padding: 0 15px
  }
}

.processing .contents-anser .nextArrow {
  bottom: -220px
}

@media only screen and (max-width:568px) {
  .processing .contents-anser .nextArrow {
    bottom: -118px
  }
}

.processing .contents-standards {
  margin-top: 90px
}

@media only screen and (max-width:568px) {
  .processing .contents-standards {
    margin-top: 60px
  }
}

.processing .contents-standards .certificationStandards {
  position: relative
}

.processing .contents-standards .certificationStandards span {
  margin-left: 9px;
  letter-spacing: .2rem
}

.processing .contents-standards .certificationStandards:after {
  content: '';
  position: absolute;
  z-index: 3;
  top: -40px;
  left: 29.5%;
  width: calc(207px/2);
  height: calc(125px/2);
  border-radius: 10px;
  background-image: url(/assets/images/processing/text_check.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-standards .certificationStandards:after {
    left: 23%
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-standards .certificationStandards:after {
    width: calc(131px/2);
    height: calc(78px/2);
    left: 16%;
    top: -27px
  }
}

.processing .contents-standards .standards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 894px;
  margin: 42px auto 0
}

@media only screen and (max-width:568px) {
  .processing .contents-standards .standards {
    justify-content: center;
    margin: 26px auto 0
  }
}

.processing .contents-standards .standards-box {
  width: 278px;
  position: relative;
  border: 2px solid #000;
  border-radius: 20px;
  background-color: #fff;
  padding: 20px 10px 14px;
  margin-bottom: 30px;
  font-weight: 400
}

@media only screen and (max-width:568px) {
  .processing .contents-standards .standards-box {
    width: 46%;
    padding: 12px 10px 40px;
    margin-bottom: 15px
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-standards .standards-box:nth-child(odd) {
    margin-right: 20px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-standards .standards-box:nth-child(odd) {
    margin-right: 10px
  }
}

.processing .contents-standards .standards-box:nth-of-type(2) {
  margin-left: 30px;
  margin-right: 30px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-standards .standards-box:nth-of-type(2) {
    margin-left: 0;
    margin-right: 20px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-standards .standards-box:nth-of-type(2) {
    margin-left: 0;
    margin-right: 0
  }
}

.processing .contents-standards .standards-box:nth-of-type(4) {
  margin-right: 30px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-standards .standards-box:nth-of-type(4) {
    margin-left: 0;
    margin-right: 20px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-standards .standards-box:nth-of-type(4) {
    margin-right: 0
  }
}

.processing .contents-standards .standards-box__head {
  font-size: 2.6rem;
  line-height: 6.8rem;
  font-weight: 700
}

@media only screen and (max-width:568px) {
  .processing .contents-standards .standards-box__head {
    font-size: 1.6rem;
    line-height: 4rem
  }
}

.processing .contents-standards .standards-box .twoLine {
  line-height: 3.6rem
}

@media only screen and (max-width:568px) {
  .processing .contents-standards .standards-box .twoLine {
    line-height: 2rem
  }
}

.processing .contents-standards .standards-box__text {
  margin-top: 25px;
  font-size: 1.6rem;
  line-height: 2.8rem
}

@media only screen and (max-width:568px) {
  .processing .contents-standards .standards-box__text {
    margin-top: 0;
    font-size: 1.3rem;
    line-height: 1.9rem
  }
}

.processing .contents-standards .standards-box__illust {
  margin-top: 27px;
  width: 100%
}

@media only screen and (max-width:568px) {
  .processing .contents-standards .standards-box__illust {
    margin-top: 10px
  }
}

.processing .contents-fee {
  margin-top: 92px
}

@media only screen and (max-width:568px) {
  .processing .contents-fee {
    margin-top: 64px
  }
}

.processing .contents-fee .fee {
  position: relative
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-fee .fee {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .fee .head-3 {
    margin-left: 48px
  }
}

.processing .contents-fee .fee .head-3:after {
  content: '';
  position: absolute;
  z-index: 3;
  top: -40px;
  left: 32%;
  width: calc(207px/2);
  height: calc(125px/2);
  border-radius: 10px;
  background-image: url(/assets/images/processing/text_check.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-fee .fee .head-3:after {
    left: 27%
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .fee .head-3:after {
    width: calc(131px/2);
    height: calc(78px/2);
    left: 26%;
    top: -24px
  }
}

.processing .contents-fee .fee .feeDetails {
  width: 100%;
  height: 181px;
  max-width: 894px;
  position: relative;
  border: 2px solid #000;
  border-radius: 20px;
  background-color: #fff;
  padding: 20px 10px;
  margin: 41px auto 0
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .fee .feeDetails {
    max-width: 100%;
    width: 95%;
    height: auto;
    margin: 30px auto 0;
    padding: 20px 10px 23px
  }
}

.processing .contents-fee .fee .feeDetails-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 894px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 40px
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .fee .feeDetails-box {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    transform: none
  }
}

.processing .contents-fee .fee .feeDetails-box__1 {
  font-size: 2.4rem;
  line-height: 3.6rem;
  font-weight: 700;
  text-align: left
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-fee .fee .feeDetails-box__1 {
    font-size: 2rem;
    line-height: 3rem
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .fee .feeDetails-box__1 {
    font-size: 1.6rem;
    line-height: 2.1rem;
    text-align: center
  }
}

.processing .contents-fee .fee .feeDetails-box__plus {
  width: calc(84px/2);
  height: calc(84px/2);
  -ms-grid-row-align: center;
  align-self: center
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .fee .feeDetails-box__plus {
    width: calc(61px/2);
    height: calc(61px/2);
    margin: 18px 0 7px
  }
}

.processing .contents-fee .fee .feeDetails-box__2 {
  font-size: 2.4rem;
  line-height: 3.6rem
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-fee .fee .feeDetails-box__2 {
    font-size: 2rem;
    line-height: 3rem
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .fee .feeDetails-box__2 {
    font-size: 1.6rem;
    line-height: 2.1rem
  }
}

.processing .contents-fee .reexamination {
  width: 100%;
  height: 342px;
  max-width: 724px;
  position: relative;
  border: 2px solid #000;
  border-radius: 20px;
  background-color: #fff;
  padding: 20px 10px;
  margin: 102px auto 0
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .reexamination {
    max-width: 100%;
    width: 85%;
    margin: 50px auto 0;
    padding: 30px 15px 16px;
    height: auto
  }
}

.processing .contents-fee .reexamination:before {
  content: '';
  position: absolute;
  top: 9px;
  right: -250px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(180px/2);
  height: calc(248px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-fee .reexamination:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .reexamination:before {
    display: none
  }
}

.processing .contents-fee .reexamination-box {
  position: relative;
  width: 100%;
  margin-top: 29px
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .reexamination-box {
    display: block;
    margin-top: 0
  }
}

.processing .contents-fee .reexamination-box__head {
  position: absolute;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(480px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-fee .reexamination-box__head {
    top: -25%
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .reexamination-box__head {
    width: calc(332px/2);
    top: -42px
  }
}

.processing .contents-fee .reexamination-box__1 {
  font-size: 2.4rem;
  line-height: 3.6rem;
  font-weight: 700;
  margin-bottom: 35px
}

.processing .contents-fee .reexamination-box__1 p:first-of-type {
  margin-bottom: 20px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-fee .reexamination-box__1 {
    font-size: 2rem;
    line-height: 3rem
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .reexamination-box__1 {
    font-size: 1.6rem;
    line-height: 2.1rem;
    text-align: center
  }
}

.processing .contents-fee .reexamination-box__2 {
  font-size: 2.4rem;
  line-height: 3.6rem;
  font-weight: 700
}

.processing .contents-fee .reexamination-box__2 p:first-of-type {
  margin-bottom: 20px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-fee .reexamination-box__2 {
    font-size: 2rem;
    line-height: 3rem
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-fee .reexamination-box__2 {
    font-size: 1.4rem;
    line-height: 2.1rem;
    text-align: center
  }
}

.processing .contents-subsidy {
  margin-top: 72px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-subsidy {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-subsidy {
    margin-top: 30px
  }
}

.processing .contents-subsidy .subsidy .head-4 span {
  font-size: 2.8rem;
  line-height: 2.8rem
}

@media only screen and (max-width:568px) {
  .processing .contents-subsidy .subsidy .head-4 span {
    font-size: 1.8rem;
    line-height: 1.8rem
  }
}

.processing .contents-subsidy .subsidy-text {
  margin-top: 30px;
  font-size: 1.6rem;
  line-height: 3.2rem
}

@media only screen and (max-width:568px) {
  .processing .contents-subsidy .subsidy-text {
    margin-top: 20px;
    font-size: 1.4rem;
    line-height: 2.4rem;
    padding: 0 25px
  }
}

.processing .contents-subsidy .subsidy-link {
  margin-top: 20px;
  font-size: 1.6rem;
  line-height: 3.2rem
}

@media only screen and (max-width:568px) {
  .processing .contents-subsidy .subsidy-link {
    margin-top: 20px;
    font-size: 1.4rem;
    line-height: 2.4rem;
    padding: 0 10px
  }
}

.processing .contents-subsidy .subsidy-link a {
  color: #e15f52;
  text-decoration: underline
}

.processing .contents-subsidy .subsidy-button {
  margin: 41px auto 0
}

.processing .contents-subsidy .subsidy-button .nomalButton {
  justify-content: center
}

.processing .contents-certificationPeriod {
  margin-top: 102px;
  padding-bottom: 40px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-certificationPeriod {
    padding: 0 20px 100px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod {
    margin-top: 60px;
    padding-bottom: 30px
  }
}

.processing .contents-certificationPeriod .certificationPeriod {
  position: relative
}

.processing .contents-certificationPeriod .certificationPeriod span {
  margin-left: 20px
}

.processing .contents-certificationPeriod .certificationPeriod:after {
  content: '';
  position: absolute;
  z-index: 3;
  top: -40px;
  left: 22%;
  width: calc(207px/2);
  height: calc(125px/2);
  border-radius: 10px;
  background-image: url(/assets/images/processing/text_check.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-certificationPeriod .certificationPeriod:after {
    left: 13%
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod .certificationPeriod:after {
    width: calc(131px/2);
    height: calc(78px/2);
    left: 7%;
    top: -27px
  }
}

.processing .contents-certificationPeriod .certificationPeriod-figure {
  width: 100%;
  max-width: calc(1440px/2);
  margin: 40px auto 0
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod .certificationPeriod-figure {
    margin: 27px auto 0;
    width: 95%
  }
}

.processing .contents-certificationPeriod .certificationPeriod-text {
  margin-top: 30px;
  font-size: 1.6rem;
  line-height: 3.2rem
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-certificationPeriod .certificationPeriod-text {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod .certificationPeriod-text {
    margin-top: 18px;
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

.processing .contents-certificationPeriod .RegularAuditFee {
  width: 100%;
  height: 401px;
  max-width: 724px;
  position: relative;
  border: 2px solid #000;
  border-radius: 20px;
  background-color: #fff;
  padding: 20px 10px;
  margin: 67px auto 0
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod .RegularAuditFee {
    max-width: 100%;
    width: 85%;
    margin: 35px auto 0;
    padding: 30px 35px 21px;
    height: auto
  }
}

.processing .contents-certificationPeriod .RegularAuditFee:before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  height: 5px;
  width: 44%;
  background: #fff
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod .RegularAuditFee:before {
    width: 73%
  }
}

.processing .contents-certificationPeriod .RegularAuditFee-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod .RegularAuditFee-box {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    transform: none
  }
}

.processing .contents-certificationPeriod .RegularAuditFee-box__head {
  position: absolute;
  top: -20.9%;
  left: 50%;
  transform: translateX(-50%);
  width: 43%
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-certificationPeriod .RegularAuditFee-box__head {
    top: -21%
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod .RegularAuditFee-box__head {
    width: 92%;
    top: -42px
  }
}

.processing .contents-certificationPeriod .RegularAuditFee-box__1 {
  font-size: 2.4rem;
  line-height: 3.6rem;
  font-weight: 700
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod .RegularAuditFee-box__1 {
    font-size: 1.6rem;
    line-height: 2.1rem;
    text-align: center
  }
}

.processing .contents-certificationPeriod .RegularAuditFee-box__plus {
  width: calc(84px/2);
  height: calc(84px/2);
  -ms-grid-row-align: center;
  align-self: center;
  margin: 25px 0 15px
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod .RegularAuditFee-box__plus {
    width: calc(61px/2);
    height: calc(61px/2);
    margin: 18px 0 7px
  }
}

.processing .contents-certificationPeriod .RegularAuditFee-box__2 {
  font-size: 2.4rem;
  line-height: 3.6rem;
  font-weight: 700
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod .RegularAuditFee-box__2 {
    font-size: 1.4rem;
    line-height: 2.1rem;
    text-align: center
  }
}

.processing .contents-certificationPeriod .RegularAuditFee-button {
  position: relative;
  z-index: 10
}

.processing .contents-certificationPeriod .RegularAuditFee-button .nomalButton {
  justify-content: center
}

.processing .contents-certificationPeriod .nextArrow {
  bottom: -111px
}

@media only screen and (max-width:568px) {
  .processing .contents-certificationPeriod .nextArrow {
    bottom: -35px
  }
}

.processing .contents-importantPoint {
  position: relative;
  padding-top: 160px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint {
    padding-top: 60px
  }
}

.processing .contents-importantPoint:before {
  content: '';
  position: absolute;
  top: -67px;
  right: -131px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf5.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(203px/2);
  height: calc(286px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-importantPoint:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint:before {
    display: none
  }
}

.processing .contents-importantPoint:after {
  content: '';
  position: absolute;
  top: 920px;
  left: -150px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(180px/2);
  height: calc(248px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-importantPoint:after {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint:after {
    display: none
  }
}

.processing .contents-importantPoint .importantPoint .descriptionText {
  margin-top: 41px;
  font-size: 1.8rem;
  line-height: 3.6rem
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .importantPoint .descriptionText {
    margin-top: 32px;
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-importantPoint .check {
    padding: 0 20px
  }
}

.processing .contents-importantPoint .check-box {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  background-color: #ededed;
  border-radius: 10px;
  margin: 60px auto 0;
  padding-bottom: 30px;
  text-align: left
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check-box {
    display: block;
    max-width: 100%;
    width: 84%;
    padding-bottom: 24px;
    margin: 20px auto 0
  }
  .processing .contents-importantPoint .check-box:first-of-type {
    margin: 80px auto 0
  }
}

.processing .contents-importantPoint .check-box:nth-child(n+2) {
  margin: 100px auto 0
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check-box:nth-child(n+2) {
    margin: 70px auto 0
  }
}

.processing .contents-importantPoint .check-box .checkText {
  position: absolute;
  top: -70px;
  left: 10px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check-box .checkText {
    top: -53px;
    left: 43%;
    transform: translateX(-50%)
  }
}

.processing .contents-importantPoint .check-box .question {
  padding: 79px 36px 0;
  max-width: 620px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check-box .question {
    padding: 57px 23px 0
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check-box .question .head-4 {
    text-align: center;
    width: 100%
  }
  .processing .contents-importantPoint .check-box .question .head-4 span {
    display: block
  }
  .processing .contents-importantPoint .check-box .question .head-4 span:after {
    bottom: -17px
  }
}

.processing .contents-importantPoint .check-box .question .descriptionText {
  margin-top: 26px;
  font-size: 1.8rem;
  line-height: 3.6rem
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check-box .question .descriptionText {
    margin-top: 30px;
    font-size: 1.4rem;
    line-height: 2.4rem;
    letter-spacing: .1rem
  }
}

.processing .contents-importantPoint .check-box .question-point {
  display: flex;
  margin-top: 7px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check-box .question-point {
    display: none
  }
}

.processing .contents-importantPoint .check-box .question-point img {
  height: calc(180px/2)
}

.processing .contents-importantPoint .check-box .question-point p {
  -ms-grid-row-align: center;
  align-self: center;
  font-size: 1.6rem;
  line-height: 3.2rem;
  margin-left: 16px
}

.processing .contents-importantPoint .check-box .iconLink {
  margin-top: 20px;
  padding-left: 60px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check-box .iconLink {
    margin-top: 15px;
    padding-left: 42px
  }
}

.processing .contents-importantPoint .check-box .illust {
  -ms-grid-row-align: center;
  align-self: center;
  margin-top: 35px;
  padding-right: 36px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check-box .illust {
    padding-right: 0;
    margin-top: 16px;
    text-align: center
  }
}

.processing .contents-importantPoint .check-box .illust img {
  width: calc(562px/2)
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check-box .illust img {
    width: calc(400px/2)
  }
}

.processing .contents-importantPoint .check-box .pointSp {
  display: flex;
  margin-top: 18px;
  padding: 0 20px
}

@media only screen and (min-width:961px) {
  .processing .contents-importantPoint .check-box .pointSp {
    display: none
  }
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-importantPoint .check-box .pointSp {
    display: none
  }
}

.processing .contents-importantPoint .check-box .pointSp img {
  width: calc(135px/2);
  height: calc(135px/2)
}

.processing .contents-importantPoint .check-box .pointSp p {
  -ms-grid-row-align: center;
  align-self: center;
  font-size: 1.2rem;
  line-height: 2rem;
  margin-left: 16px
}

.processing .contents-importantPoint .check .check01 .checkText {
  width: calc(319px/2);
  height: calc(238px/2)
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check01 .checkText {
    width: calc(239px/2);
    height: calc(180px/2)
  }
}

.processing .contents-importantPoint .check .check02 {
  padding-bottom: 20px
}

.processing .contents-importantPoint .check .check02 .head-4 {
  line-height: 3.6rem
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check02 .head-4 {
    letter-spacing: -.1rem
  }
  .processing .contents-importantPoint .check .check02 .head-4 span:first-of-type:after {
    display: none
  }
}

.processing .contents-importantPoint .check .check02 .checkText {
  width: calc(345px/2);
  height: calc(240px/2)
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check02 .checkText {
    width: calc(242px/2);
    height: calc(180px/2)
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check02 .illust {
    margin-top: 0
  }
  .processing .contents-importantPoint .check .check02 .illust img {
    width: calc(441px/2)
  }
}

.processing .contents-importantPoint .check .check03 {
  display: block;
  padding-bottom: 46px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check03 .head-4 {
    letter-spacing: -.1rem
  }
}

.processing .contents-importantPoint .check .check03 .question {
  max-width: 100%
}

.processing .contents-importantPoint .check .check03 .checkText {
  width: calc(351px/2);
  height: calc(240px/2)
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check03 .checkText {
    width: calc(241px/2);
    height: calc(180px/2)
  }
}

.processing .contents-importantPoint .check .check04 {
  display: block;
  padding-bottom: 46px
}

.processing .contents-importantPoint .check .check04 .checkText {
  width: calc(354px/2);
  height: calc(240px/2)
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check04 .checkText {
    width: calc(246px/2);
    height: calc(180px/2)
  }
}

.processing .contents-importantPoint .check .check04 .question {
  padding: 74px 36px 0;
  max-width: 100%
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check04 .question {
    padding: 55px 23px 0
  }
}

.processing .contents-importantPoint .check .check04 .check {
  display: flex
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check04 .check {
    display: block;
    margin-top: 29px;
    padding: 0 25px 0 42px
  }
}

.processing .contents-importantPoint .check .check04 .check .checkList {
  margin-top: 30px;
  margin-left: 60px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check04 .check .checkList {
    margin-top: 0;
    margin-left: 0
  }
}

.processing .contents-importantPoint .check .check04 .check .checkList li {
  font-size: 1.8rem;
  line-height: 3.6rem;
  list-style: disc
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check04 .check .checkList li {
    font-size: 1.4rem;
    line-height: 2.2rem
  }
}

.processing .contents-importantPoint .check .check04 .check .checkList:nth-child(2) {
  margin-left: 90px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .check .check04 .check .checkList:nth-child(2) {
    margin-left: 0
  }
}

.processing .contents-importantPoint .sampleDl {
  position: relative;
  margin-top: 50px;
  padding-bottom: 88px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .sampleDl {
    margin-top: 25px;
    padding-bottom: 29px
  }
}

.processing .contents-importantPoint .sampleDl:before {
  content: '';
  position: absolute;
  top: 123px;
  right: -133px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf6.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(168px/2);
  height: calc(288px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-importantPoint .sampleDl:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .sampleDl:before {
    display: none
  }
}

.processing .contents-importantPoint .sampleDl-text {
  position: relative;
  font-size: 3rem;
  line-height: 4rem;
  font-family: GenJyuuGothic, sans-serif;
  display: flex;
  justify-content: center
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .sampleDl-text {
    font-size: 1.8rem;
    line-height: 2.4rem
  }
}

.processing .contents-importantPoint .sampleDl-text .lineBalloon-1 {
  position: relative;
  left: -30px;
  bottom: -32px;
  width: 3px;
  height: 40px;
  background-color: #000;
  transform: rotate(-30deg)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-importantPoint .sampleDl-text .lineBalloon-1 {
    bottom: -10px;
    left: -5%;
    width: 2px;
    height: 60px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .sampleDl-text .lineBalloon-1 {
    bottom: -10px;
    left: -5%;
    width: 1px;
    height: 38px
  }
}

.processing .contents-importantPoint .sampleDl-text .lineBalloon-2 {
  position: relative;
  right: -30px;
  bottom: -32px;
  width: 3px;
  height: 40px;
  background-color: #000;
  transform: rotate(30deg)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-importantPoint .sampleDl-text .lineBalloon-2 {
    bottom: -10px;
    right: -5%;
    width: 2px;
    height: 60px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .sampleDl-text .lineBalloon-2 {
    bottom: -10px;
    right: -5%;
    width: 1px;
    height: 38px
  }
}

.processing .contents-importantPoint .sampleDl .iconLink {
  margin-top: 30px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .sampleDl .iconLink {
    margin-top: 18px
  }
}

.processing .contents-importantPoint .sampleDl .nomalButton {
  margin-top: 45px;
  justify-content: center
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .sampleDl .nomalButton {
    margin-top: 28px
  }
}

.processing .contents-importantPoint .nextArrow {
  bottom: -50px
}

@media only screen and (max-width:568px) {
  .processing .contents-importantPoint .nextArrow {
    bottom: -35px
  }
}

.processing .contents-HowtoUse {
  position: relative;
  z-index: 10;
  margin-top: 98px;
  padding-bottom: 150px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-HowtoUse {
    padding-bottom: 210px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse {
    margin-top: 0;
    padding-top: 60px;
    padding-bottom: 110px
  }
}

.processing .contents-HowtoUse .howtoUse .headText {
  margin-top: 55px;
  font-size: 1.8rem;
  line-height: 1.8rem
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .howtoUse .headText {
    margin-top: 40px;
    font-size: 1.4rem;
    line-height: 1.4rem;
    letter-spacing: .1rem
  }
}

.processing .contents-HowtoUse .example {
  margin: 62px auto 0
}

.processing .contents-HowtoUse .manual {
  margin-top: 70px;
  display: flex;
  justify-content: center
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .manual {
    margin-top: 33px;
    display: block
  }
}

.processing .contents-HowtoUse .manual-title {
  position: relative;
  max-width: 480px;
  width: 100%;
  text-align: right
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .manual-title {
    max-width: 100%;
    text-align: center
  }
}

.processing .contents-HowtoUse .manual-title span {
  font-size: 2.8rem;
  line-height: 2.8rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .manual-title span {
    font-size: 1.8rem;
    line-height: 1.8rem
  }
}

.processing .contents-HowtoUse .manual-title:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -20px;
  right: 0;
  width: 96px;
  height: 2px;
  background-color: #000;
  transform: rotate(8deg)
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .manual-title:before {
    width: 1px;
    height: 20px;
    right: auto;
    left: 75px;
    top: 0;
    transform: rotate(-28deg)
  }
}

.processing .contents-HowtoUse .manual-title:after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: -20px;
  right: 0;
  width: 96px;
  height: 2px;
  background-color: #000;
  transform: rotate(-8deg)
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .manual-title:after {
    width: 1px;
    height: 20px;
    right: 75px;
    top: 0;
    transform: rotate(28deg)
  }
}

.processing .contents-HowtoUse .manual-link {
  max-width: 480px;
  width: 100%;
  text-align: left
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .manual-link {
    max-width: 100%;
    margin: 20px auto 0;
    text-align: center
  }
}

.processing .contents-HowtoUse .manual-link a {
  position: relative;
  left: 15%
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .manual-link a {
    left: 10px
  }
}

.processing .contents-HowtoUse .manual-link a:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(48px/2);
  height: calc(48px/2);
  background-image: url(/assets/images/common/icon_link_circle.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .manual-link a:before {
    max-width: calc(43px/2);
    height: calc(43px/2)
  }
}

.processing .contents-HowtoUse .manual-link span {
  position: relative;
  top: 2px;
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif;
  text-decoration: underline;
  margin-left: 15px
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .manual-link span {
    font-size: 1.4rem;
    line-height: 1.4rem
  }
}

.processing .contents-HowtoUse .permission {
  position: relative;
  margin-top: 129px
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .permission {
    margin-top: 82px
  }
}

.processing .contents-HowtoUse .permission:before {
  content: '';
  position: absolute;
  top: -300px;
  left: -150px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf3.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(186px/2);
  height: calc(340px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-HowtoUse .permission:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .permission:before {
    display: none
  }
}

.processing .contents-HowtoUse .permission-head {
  position: relative
}

.processing .contents-HowtoUse .permission-head p {
  font-size: 3.2rem;
  line-height: 4.2rem
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .permission-head p {
    font-size: 2.1rem;
    line-height: 2.6rem
  }
}

.processing .contents-HowtoUse .permission-head__illust {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 179px
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .permission-head__illust {
    width: calc(202px/2)
  }
}

.processing .contents-HowtoUse .permission-text {
  margin-top: 61px;
  font-size: 1.8rem;
  line-height: 3.6rem
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .permission-text {
    margin-top: 38px;
    padding: 0 40px;
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

.processing .contents-HowtoUse .apply {
  position: relative;
  max-width: 820px;
  margin: 40px auto 0
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-HowtoUse .apply {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .apply {
    margin: 42px auto 0;
    padding: 0 10px
  }
}

.processing .contents-HowtoUse .apply:after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-image: url(/assets/images/common/bg_diagonalline.png);
  background-repeat: repeat;
  opacity: .6
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-HowtoUse .apply:after {
    width: 95%;
    height: 100%;
    left: 25px
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .apply:after {
    top: 6px;
    left: 12px;
    width: 95%;
    height: 100%
  }
}

.processing .contents-HowtoUse .apply .applyBox {
  position: relative;
  border: 2px solid #000;
  border-radius: 10px;
  background-color: #fff;
  margin: 0 auto;
  z-index: 5;
  padding: 50px 50px 62px
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .apply .applyBox {
    padding: 35px 20px 17px
  }
}

.processing .contents-HowtoUse .apply .applyBox-title {
  position: relative;
  font-size: 3rem;
  line-height: 4.2rem;
  font-family: GenJyuuGothic, sans-serif
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .apply .applyBox-title {
    font-size: 1.8rem;
    line-height: 2.6rem
  }
}

.processing .contents-HowtoUse .apply .applyBox-title:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(128px/2);
  height: calc(156px/2);
  background-image: url(/assets/images/restaurant/illust_leaf.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-HowtoUse .apply .applyBox-title:before {
    left: 3%
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .apply .applyBox-title:before {
    max-width: calc(82px/2);
    height: calc(99px/2);
    top: -111%;
    left: 50%;
    transform: translateX(-50%)
  }
}

.processing .contents-HowtoUse .apply .applyBox-button {
  margin-top: 23px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .processing .contents-HowtoUse .apply .applyBox-button .breakCancelPc {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .apply .applyBox-button {
    margin-top: 15px
  }
}

.processing .contents-HowtoUse .apply .applyBox-button__link {
  position: relative;
  width: 100%;
  max-width: calc(970px/2)
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .apply .applyBox-button__link {
    width: 86%
  }
}

.processing .contents-HowtoUse .apply .applyBox-button__link span {
  position: absolute;
  font-size: 1.8rem;
  width: 100%;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%)
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .apply .applyBox-button__link span {
    font-size: 1.6rem
  }
}

.processing .contents-HowtoUse .apply .applyBox-button__link span:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(24px/2);
  height: calc(40px/2);
  background-image: url(/assets/images/common/arrow_next.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .processing .contents-HowtoUse .apply .applyBox-button__link span:before {
    left: 15%;
    max-width: calc(18px/2);
    height: calc(28px/2)
  }
}

.processing .contents-HowtoUse .apply .applyBox-button__link img {
  width: 100%
}

.mark {
  overflow: hidden
}

.mark .lowerTitle-title {
  top: 15%;
  transform: none
}

.mark .lowerTitle-title:before {
  content: '';
  max-width: calc(550px/2);
  height: calc(394px/2);
  background-image: url(/assets/images/mark/illust_head_left.png);
  top: 11px;
  left: -362px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .lowerTitle-title:before {
    max-width: calc(105px/2);
    height: calc(216px/2);
    background-image: url(/assets/images/mark/illust_head_left_sp.png);
    top: 25%;
    left: -48%
  }
}

@media only screen and (max-width:568px) {
  .mark .lowerTitle-title:before {
    max-width: calc(105px/2);
    height: calc(216px/2);
    background-image: url(/assets/images/mark/illust_head_left_sp.png);
    top: -11%;
    left: -43%
  }
}

.mark .lowerTitle-title:after {
  content: '';
  max-width: calc(628px/2);
  height: calc(400px/2);
  background-image: url(/assets/images/mark/illust_head_right.png);
  top: 7px;
  right: -356px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .lowerTitle-title:after {
    max-width: calc(136px/2);
    height: calc(98px/2);
    background-image: url(/assets/images/mark/illust_head_right_sp.png);
    top: 40%;
    right: -35%
  }
}

@media only screen and (max-width:568px) {
  .mark .lowerTitle-title:after {
    max-width: calc(136px/2);
    height: calc(98px/2);
    background-image: url(/assets/images/mark/illust_head_right_sp.png);
    top: -17%;
    right: -30%
  }
}

.mark .contents {
  max-width: 960px;
  margin: 0 auto;
  text-align: center
}

.mark .contents-application {
  position: relative;
  padding-top: 123px
}

@media only screen and (max-width:568px) {
  .mark .contents-application {
    padding-top: 63px
  }
}

.mark .contents-application:before {
  content: '';
  position: absolute;
  top: 100px;
  right: -120px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(204px/2);
  height: calc(308px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-application:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-application:before {
    display: none
  }
}

.mark .contents-application .application {
  width: 100%;
  max-width: 960px
}

.mark .contents-application .application .head-3 {
  margin-top: 50px
}

@media only screen and (max-width:568px) {
  .mark .contents-application .application .head-3 {
    margin-top: 39px
  }
}

.mark .contents-application .aboutApplication {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 55px
}

@media only screen and (max-width:568px) {
  .mark .contents-application .aboutApplication {
    display: block;
    margin-top: 30px
  }
}

.mark .contents-application .aboutApplication-box {
  max-width: 450px;
  background-color: #ededed;
  border-radius: 10px;
  padding-bottom: 40px
}

@media only screen and (max-width:568px) {
  .mark .contents-application .aboutApplication-box {
    max-width: 100%;
    width: 84%;
    padding-bottom: 24px;
    margin: 20px auto 0
  }
  .mark .contents-application .aboutApplication-box:first-of-type {
    margin: 20px auto 0
  }
}

.mark .contents-application .aboutApplication-box__illust {
  width: 100%;
  padding-top: 42px;
  margin-bottom: 22px
}

@media only screen and (max-width:568px) {
  .mark .contents-application .aboutApplication-box__illust {
    margin-bottom: 57px
  }
}

.mark .contents-application .aboutApplication-box__title {
  font-size: 1.6rem;
  line-height: 3.2rem;
  font-weight: 700;
  border-bottom: 2px solid #000;
  margin: 0 45px;
  padding-bottom: 0;
  display: inline
}

@media only screen and (max-width:568px) {
  .mark .contents-application .aboutApplication-box__title {
    margin: 0;
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

.mark .contents-application .aboutApplication-box__text {
  font-size: 1.6rem;
  line-height: 3.2rem;
  margin: 0 45px
}

@media only screen and (max-width:568px) {
  .mark .contents-application .aboutApplication-box__text {
    font-size: 1.4rem;
    line-height: 2.4rem;
    margin: 0 23px
  }
}

.mark .contents-application .aboutApplication-box:last-of-type .aboutApplication-box__illust {
  padding-top: 48px;
  margin-bottom: 37px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-application .aboutApplication-box {
    margin-right: 20px
  }
  .mark .contents-application .aboutApplication-box:first-of-type {
    margin-left: 20px;
    margin-right: 20px
  }
  .mark .contents-application .aboutApplication-box:last-of-type {
    margin-right: 20px
  }
}

.mark .contents-application .change {
  margin-top: 64px
}

@media only screen and (max-width:568px) {
  .mark .contents-application .change {
    margin-top: 25px
  }
}

.mark .contents-application .change-title p {
  position: relative;
  font-size: 3rem;
  line-height: 3rem;
  font-family: GenJyuuGothic, sans-serif;
  display: flex;
  justify-content: center
}

@media only screen and (max-width:568px) {
  .mark .contents-application .change-title p {
    font-size: 1.8rem;
    line-height: 2.4rem
  }
}

.mark .contents-application .change-title p .lineBalloon-1 {
  position: relative;
  left: -30px;
  bottom: 1px;
  width: 3px;
  height: 30px;
  background-color: #000;
  transform: rotate(-30deg)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-application .change-title p .lineBalloon-1 {
    bottom: 0;
    left: -3%;
    width: 2px;
    height: 30px
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-application .change-title p .lineBalloon-1 {
    bottom: 0;
    left: -3%;
    width: 1px;
    height: 30px
  }
}

.mark .contents-application .change-title p .lineBalloon-2 {
  position: relative;
  right: -30px;
  bottom: 1px;
  width: 3px;
  height: 30px;
  background-color: #000;
  transform: rotate(30deg)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-application .change-title p .lineBalloon-2 {
    bottom: 0;
    right: -3%;
    width: 2px;
    height: 30px
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-application .change-title p .lineBalloon-2 {
    bottom: 0;
    right: -3%;
    width: 1px;
    height: 30px
  }
}

.mark .contents-application .change-text {
  margin-top: 30px;
  font-size: 1.6rem;
  line-height: 3.2rem
}

@media only screen and (max-width:568px) {
  .mark .contents-application .change-text {
    margin-top: 5px;
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

.mark .contents-application .step {
  position: relative;
  padding-bottom: 68px;
  margin-top: 80px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-application .step {
    padding: 0 20px 50px
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-application .step {
    margin-top: 43px;
    padding-bottom: 42px
  }
}

.mark .contents-application .step:before {
  content: '';
  position: absolute;
  top: 0;
  left: -150px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(180px/2);
  height: calc(248px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-application .step:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-application .step:before {
    display: none
  }
}

.mark .contents-application .step-box {
  max-width: 810px;
  width: 100%;
  margin: 46px auto 0;
  padding-right: 30px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-application .step-box {
    width: 90%;
    margin: 40px 0 0 40px
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-application .step-box {
    width: 97%;
    margin: 31px 0 0
  }
}

.mark .contents-application .step-boxList {
  position: relative;
  margin-bottom: 29px
}

@media only screen and (max-width:568px) {
  .mark .contents-application .step-boxList {
    margin-bottom: 15px
  }
}

.mark .contents-application .step-boxList__step {
  position: absolute;
  top: 50%;
  left: -7px;
  transform: translateY(-50%);
  z-index: 10;
  width: calc(195px/2)
}

@media only screen and (max-width:568px) {
  .mark .contents-application .step-boxList__step {
    width: calc(110px/2);
    left: 10px
  }
}

.mark .contents-application .step-boxList__text {
  position: relative;
  border: 2px solid #000;
  border-radius: 20px;
  background-color: #fff;
  padding: 20px 25px 20px 75px;
  font-size: 2.2rem;
  line-height: 3.3rem;
  text-align: left;
  left: 40px
}

@media only screen and (max-width:568px) {
  .mark .contents-application .step-boxList__text {
    border-radius: 10px;
    font-size: 1.4rem;
    line-height: 2.2rem;
    padding: 10px 25px 10px 40px;
    left: 33px
  }
}

.mark .contents-application .step-boxList__text:after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 46.5%;
  transform: translateX(-50%);
  background-image: url(/assets/images/mark/balloon_thorn_bottom.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(97px/2);
  height: calc(44px/2)
}

@media only screen and (max-width:568px) {
  .mark .contents-application .step-boxList__text:after {
    background-image: url(/assets/images/mark/balloon_thorn_bottom_sp.png);
    width: calc(49px/2);
    height: calc(24px/2);
    left: 49.5%;
    bottom: -12px
  }
}

.mark .contents-application .step-boxList__text a {
  color: #e15f52;
  text-decoration: underline
}

.mark .contents-application .step-boxList:last-of-type .step-boxList__text:after {
  background-image: none
}

@media only screen and (min-width:961px) {
  .mark .contents-application .step-boxList:nth-of-type(3) .step-boxList__text {
    padding: 30px 25px 41px 75px
  }
}

.mark .contents-application .nextArrow {
  bottom: -47px
}

@media only screen and (max-width:568px) {
  .mark .contents-application .nextArrow {
    bottom: -32px
  }
}

.mark .contents-HowtoUse {
  position: relative;
  z-index: 10;
  padding: 95px 0 100px
}

@media only screen and (max-width:568px) {
  .mark .contents-HowtoUse {
    padding: 56px 0 53px
  }
}

.mark .contents-HowtoUse:before {
  content: '';
  position: absolute;
  top: -60px;
  right: -117px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf3.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(186px/2);
  height: calc(340px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-HowtoUse:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-HowtoUse:before {
    display: none
  }
}

.mark .contents-HowtoUse .howtoUse .head-3 {
  margin-top: 55px
}

@media only screen and (max-width:568px) {
  .mark .contents-HowtoUse .howtoUse .head-3 {
    margin-top: 40px
  }
}

.mark .contents-HowtoUse .howtoUse .descriptionText {
  margin-top: 41px;
  font-size: 1.8rem;
  line-height: 3.6rem
}

@media only screen and (max-width:568px) {
  .mark .contents-HowtoUse .howtoUse .descriptionText {
    margin-top: 25px;
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

.mark .contents-HowtoUse .example {
  margin: 50px auto 0
}

@media only screen and (max-width:568px) {
  .mark .contents-HowtoUse .example {
    margin: 35px auto 0
  }
}

.mark .contents-HowtoUse .example-box__link {
  margin-top: 20px
}

.mark .contents-HowtoUse .example-box__link a {
  position: relative;
  width: 100%
}

.mark .contents-HowtoUse .example-box__link a:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(48px/2);
  height: calc(48px/2);
  background-image: url(/assets/images/common/icon_link_circle.png);
  background-repeat: no-repeat;
  background-size: contain
}

.mark .contents-HowtoUse .example-box__link span {
  font-size: 3.8rem;
  line-height: 1.8rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif;
  text-decoration: underline;
  margin-left: 15px
}



.mark .contents-HowtoUse .example-box__text {
  font-weight: 400
}

.mark .contents-HowtoUse .nextArrow {
  bottom: -50px
}

@media only screen and (max-width:568px) {
  .mark .contents-HowtoUse .nextArrow {
    bottom: -35px
  }
}

.mark .contents-guideline {
  position: relative;
  padding-top: 100px;
  padding-bottom: 10px
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline {
    padding-top: 60px
  }
}

.mark .contents-guideline:before {
  content: '';
  position: absolute;
  top: -56px;
  left: -157px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf4.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(274px/2);
  height: calc(286px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-guideline:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline:before {
    display: none
  }
}

.mark .contents-guideline .guideline .head-3 {
  margin-top: 57px
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .guideline .head-3 {
    margin-top: 43px
  }
}

.mark .contents-guideline .guideline .descriptionText {
  margin-top: 45px;
  font-size: 1.8rem;
  line-height: 3.6rem
}

.mark .contents-guideline .purpose {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-guideline .purpose {
    display: block
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .purpose {
    display: block;
    margin-top: 30px
  }
}

.mark .contents-guideline .purpose-mark {
  width: 34%
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-guideline .purpose-mark {
    width: 37%;
    margin: 0 auto
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .purpose-mark {
    width: calc(340px/2);
    margin: 0 auto
  }
}

.mark .contents-guideline .purpose-mark__mark {
  position: relative;
  width: 100%;
  max-width: 280px;
  max-height: 280px
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .purpose-mark__mark {
    max-width: calc(340px/2);
    max-height: calc(339px/2);
    margin: 0 auto
  }
}

.mark .contents-guideline .purpose-mark__mark:after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 10px;
  left: 10px;
  width: 100%;
  max-width: 280px;
  height: 100%;
  border-radius: 15px;
  background-image: url(/assets/images/common/bg_dot.png);
  background-repeat: repeat;
  opacity: .6
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .purpose-mark__mark:after {
    top: 8px;
    left: 6px
  }
}

.mark .contents-guideline .purpose-mark__mark p {
  position: relative;
  border: 2px solid #000;
  border-radius: 10px;
  background-color: #fff;
  margin: 0 auto;
  z-index: 5;
  min-height: 280px
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .purpose-mark__mark p {
    min-height: calc(339px/2)
  }
}

.mark .contents-guideline .purpose-mark__mark p img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: calc(310px/2)
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .purpose-mark__mark p img {
    max-width: calc(180px/2)
  }
}

.mark .contents-guideline .purpose-text {
  width: 66%;
  margin-top: -2px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-guideline .purpose-text {
    width: 90%;
    margin: 20px auto 0
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .purpose-text {
    width: 85%;
    margin: 19px auto 0
  }
}

.mark .contents-guideline .purpose-text .head-4 {
  text-align: left
}

.mark .contents-guideline .purpose-text__text {
  margin-top: 25px;
  text-align: left;
  font-size: 1.6rem;
  line-height: 2.8rem
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .purpose-text__text {
    font-size: 1.4rem;
    line-height: 2.2rem;
    margin-top: 17px
  }
}

.mark .contents-guideline .precautions {
  margin-top: 94px;
  position: relative;
  z-index: 1
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .precautions {
    margin-top: 45px
  }
}

.mark .contents-guideline .precautions .descriptionText {
  margin-top: 40px;
  font-size: 1.8rem;
  line-height: 3.6rem
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .precautions .descriptionText {
    margin-top: 24px;
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

.mark .contents-guideline .exampleAttention {
  position: relative;
  margin-top: 60px;
  display: flex;
  justify-content: space-between
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .exampleAttention {
    margin-top: 35px;
    flex-direction: column
  }
}

.mark .contents-guideline .exampleAttention:before {
  content: '';
  position: absolute;
  top: 127px;
  right: -132px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(180px/2);
  height: calc(248px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-guideline .exampleAttention:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .exampleAttention:before {
    display: none
  }
}

.mark .contents-guideline .exampleAttention-box {
  /*max-width: 464px;*/
  position: relative;
  /*border: 2px solid #000;*/
  border-radius: 10px;
  background-color: #fff;
  padding: 50px 0 35px
}

.mark .contents-guideline .exampleAttention-box:first-of-type {
  margin-right: 20px
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .exampleAttention-box {
    max-width: 100%;
    width: 95%;
    margin: 30px auto 0;
  }
  .mark .contents-guideline .exampleAttention-box:first-of-type {
    margin: 0 auto
  }
}

.mark .contents-guideline .exampleAttention-box:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  height: 5px;
  width: 35%;
  background: #fff
}

.mark .contents-guideline .exampleAttention-box-head {
  position: absolute;
  top: -3.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  z-index: 5
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .exampleAttention-box-head {
    top: -4%;
    width: 32.410423452768725%
  }
}

.mark .contents-guideline .exampleAttention-box__text {
  text-align: left;
  padding: 30px 25px 0;
  margin-left: 12px;
  list-style-type: disc;
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 700
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .exampleAttention-box__text {
    font-size: 1.4rem;
    line-height: 2.4rem;
    padding: 30px 0 0
  }
}

.mark .contents-guideline .exampleAttention-box__illust {
  width: 100%
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .exampleAttention-box__illust {
    margin-top: 20px
  }
}

.mark .contents-guideline .exampleAttention-box:last-of-type .example-box__text {
  padding: 30px 25px 0;
  margin-left: 12px
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .exampleAttention-box:last-of-type .example-box__text {
    padding: 30px 0 0;
    margin-left: 0
  }
}

.mark .contents-guideline .exampleAttention-box:last-of-type .example-box__text li {
  list-style-type: none
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-guideline .exampleAttention-box {
    margin-right: 20px
  }
  .mark .contents-guideline .exampleAttention-box:first-of-type {
    margin-left: 20px;
    margin-right: 20px
  }
  .mark .contents-guideline .exampleAttention-box:last-of-type {
    margin-right: 20px
  }
}

.mark .contents-guideline .isolation {
  position: relative;
  margin-top: 85px;
  text-align: left
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-guideline .isolation {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .isolation {
    margin-top: 40px;
    padding: 0 30px
  }
}

.mark .contents-guideline .isolation:before {
  content: '';
  position: absolute;
  top: 106px;
  left: -139px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf5.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(204px/2);
  height: calc(308px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-guideline .isolation:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .isolation:before {
    display: none
  }
}

.mark .contents-guideline .isolation-text {
  margin-top: 30px;
  font-size: 1.6rem;
  line-height: 2.6rem
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .isolation-text {
    margin-top: 13px;
    font-size: 1.4rem;
    line-height: 2.2rem
  }
}

.isolation-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
}

.isolation-box__example {
  display: flex;
  flex-wrap: wrap;
  width: calc(50% - 20px);
}

.isolation-box__example img {
  max-height: 250px;
}

.isolation-box__example img:nth-of-type(2) {
  margin: 0px 0px 0px 20px;
}

.isolation-box__text {
  font-size: 1.6rem;
  line-height: 2.6rem;
}

@media screen and (max-width: 1000px) {
  .isolation-box__example {
    width: 100%;
  }
  .isolation-box__example:nth-of-type(2) {
    margin: 30px 0px 0px;
  }
}
@media screen and (min-width: 10001px) {
  .isolation-box__example {
    width: calc(50% - 20px);
  }
  .isolation-box__example:nth-of-type(2) {
    margin: 0px 0px 0px 40px;
  }
}

.mark .contents-guideline .color {
  margin: 56px 0 200px;
  text-align: left
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .mark .contents-guideline .color {
    padding: 0 20px
  }
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .color {
    margin: 9px 0 74px;
    padding: 0 30px
  }
}

.mark .contents-guideline .color-text {
  margin-top: 30px;
  font-size: 1.6rem;
  line-height: 2.8rem
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .color-text {
    margin-top: 16px;
    font-size: 1.4rem;
    line-height: 2.1rem
  }
}

.mark .contents-guideline .color-notice {
  margin-top: 30px;
  font-size: 1.6rem;
  line-height: 2.8rem
}

@media only screen and (max-width:568px) {
  .mark .contents-guideline .color-notice {
    margin-top: 20px;
    font-size: 1.2rem;
    line-height: 2.1rem
  }
}

.request {
  overflow: hidden
}

.request .lowerTitle-title:before {
  content: '';
  background-image: url(/assets/images/request/illust_head_left.png);
  max-width: calc(316px/2);
  height: calc(382px/2);
  top: -60px;
  left: -220px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .request .lowerTitle-title:before {
    max-width: calc(212px/2);
    height: calc(191px/2);
    background-image: url(/assets/images/request/illust_head_left_sp.png);
    top: 25%;
    left: -60%
  }
}

@media only screen and (max-width:568px) {
  .request .lowerTitle-title:before {
    max-width: calc(212px/2);
    height: calc(191px/2);
    background-image: url(/assets/images/request/illust_head_left_sp.png);
    top: -2%;
    left: -50%
  }
}

.request .lowerTitle-title:after {
  content: '';
  background-image: url(/assets/images/request/illust_head_right.png);
  max-width: calc(386px/2);
  height: calc(474px/2);
  top: -80px;
  right: -250px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .request .lowerTitle-title:after {
    max-width: calc(144px/2);
    height: calc(110px/2);
    background-image: url(/assets/images/request/illust_head_right_sp.png);
    top: 50%;
    right: -89%
  }
}

@media only screen and (max-width:568px) {
  .request .lowerTitle-title:after {
    max-width: calc(144px/2);
    height: calc(110px/2);
    background-image: url(/assets/images/request/illust_head_right_sp.png);
    top: 65%;
    right: -89%
  }
}

.request .contents {
  max-width: 960px;
  margin: 0 auto;
  text-align: center
}

.request .contents-step {
  position: relative;
  padding-top: 100px;
  padding-bottom: 90px
}

@media only screen and (max-width:568px) {
  .request .contents-step {
    padding-top: 62px;
    padding-bottom: 64px
  }
}

.request .contents-step:before {
  content: '';
  position: absolute;
  top: 80px;
  right: -120px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(204px/2);
  height: calc(308px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .request .contents-step:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .request .contents-step:before {
    display: none
  }
}

.request .contents-step:after {
  content: '';
  position: absolute;
  top: 980px;
  left: -150px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(180px/2);
  height: calc(248px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .request .contents-step:after {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .request .contents-step:after {
    display: none
  }
}

.request .contents-step .step {
  width: 100%;
  max-width: 960px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .request .contents-step .step {
    padding: 0 20px
  }
}

.request .contents-step .step .nextIcon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 32px 46px 0;
  border-color: #dcdcdc transparent transparent;
  margin: 30px auto 21px
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .nextIcon {
    border-width: calc(32px/2) calc(46px/2) 0;
    margin: 22px auto
  }
}

.request .contents-step .step .stepDescription {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 21px
}

.request .contents-step .step .stepDescription-box {
  position: relative;
  width: 96.959184%;
  background-color: #ededed;
  border-radius: 10px;
  padding: 47px 30px 36px 206px;
  text-align: left
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box {
    max-width: 100%;
    width: 84%;
    padding-bottom: 24px;
    margin: 62px auto 0;
    padding: 25px 18px
  }
  .request .contents-step .step .stepDescription-box:first-of-type {
    margin: 0 auto
  }
}

.request .contents-step .step .stepDescription-box__step {
  position: absolute;
  top: -52px;
  left: -30px;
  width: calc(436px/2)
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__step {
    top: -30px;
    left: -19px;
    width: calc(240px/2)
  }
}

.request .contents-step .step .stepDescription-box__title {
  font-size: 2.8rem;
  line-height: 3.2rem;
  font-weight: 700;
  margin-bottom: 17px
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__title {
    font-size: 1.8rem;
    line-height: 2.6rem;
    margin-left: 35%
  }
}

.request .contents-step .step .stepDescription-box__text {
  font-size: 1.6rem;
  line-height: 2.8rem
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__text {
    padding-top: 23px;
    font-size: 1.5rem;
    line-height: 2.2rem
  }
}

.request .contents-step .step .stepDescription-box__notes {
  margin-top: 20px;
  font-size: 1.6rem;
  line-height: 2.8rem
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__notes {
    margin-top: 10px;
    font-size: 1.4rem;
    line-height: 2.1rem
  }
}

.request .contents-step .step .stepDescription-box__notes span {
  color: #ce0000;
  font-weight: 700
}

.request .contents-step .step .stepDescription-box__address {
  margin-top: 20px;
  font-size: 1.8rem;
  line-height: 2.8rem;
  font-weight: 700
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__address {
    margin-top: 10px;
    font-size: 1.4rem;
    line-height: 2.1rem
  }
}

.request .contents-step .step .stepDescription-box__documents {
  position: relative;
  z-index: 0;
  width: 100%;
  margin-top: 35px
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__documents {
    margin-top: 35px
  }
}

.request .contents-step .step .stepDescription-box__documents:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  transform: translateY(-50%);
  border-top: 2px solid #000;
  width: 100%;
  height: 2px
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__documents:after {
    top: 0
  }
}

.request .contents-step .step .stepDescription-box__documents span {
  position: relative;
  z-index: 10;
  display: block;
  font-size: 1.8rem;
  line-height: 3.8rem;
  font-weight: 700;
  max-width: 246px;
  text-align: center;
  background-color: #fff94b;
  border: 2px solid #000;
  border-radius: 15px
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__documents span {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
    line-height: 2.6rem;
    max-width: 63%;
    border-radius: 5px
  }
}

.request .contents-step .step .stepDescription-box__link {
  width: 100%;
  margin-top: 25px;
  padding-right: 20px
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__link {
    margin-top: 18px
  }
  .request .contents-step .step .stepDescription-box__link:first-of-type {
    margin-top: 0
  }
}

.request .contents-step .step .stepDescription-box__link .step-link {
  display: block;
  position: relative;
  left: 20px;
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__link .step-link {
    font-size: 1.4rem;
    line-height: 2rem;
    left: 10px;
    letter-spacing: -.1rem;
    margin-left: 10px
  }
}

.request .contents-step .step .stepDescription-box__link .step-link__container {
  position: relative;
  left: 24px
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__link .step-link__container {
    left: 11px
  }
}

.request .contents-step .step .stepDescription-box__link .step-link:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -13px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(48px/2);
  height: calc(48px/2);
  background-image: url(/assets/images/common/icon_link_circle.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__link .step-link:before {
    max-width: calc(43px/2);
    height: calc(43px/2);
    left: -20px
  }
}

.request .contents-step .step .stepDescription-box__link .step-link a span {
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif;
  text-decoration: underline;
  color: #e15f52
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__link .step-link a span {
    font-size: 1.4rem;
    line-height: 2rem;
    letter-spacing: -.1rem
  }
}

.request .contents-step .step .stepDescription-box__link:nth-of-type(3) .step-link {
  line-height: 2.2rem
}

.request .contents-step .step .stepDescription-box__list {
  margin-top: 30px
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__list {
    margin-top: 15px
  }
}

.request .contents-step .step .stepDescription-box__list p {
  font-size: 1.8rem;
  line-height: 3.2rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__list p {
    font-size: 1.4rem;
    line-height: 2.4rem
  }
}

.request .contents-step .step .stepDescription-box__list .step-list {
  font-size: 1.6rem;
  line-height: 2.8rem
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__list .step-list {
    font-size: 1.3rem;
    line-height: 2.3rem
  }
}

.request .contents-step .step .stepDescription-box__list .step-list__head {
  margin-top: 20px
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__list .step-list__head {
    margin-top: 0
  }
}

.request .contents-step .step .stepDescription-box__list .step-list ul {
  font-size: 1.6rem;
  line-height: 2.8rem
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription-box__list .step-list ul {
    font-size: 1.3rem;
    line-height: 2.3rem
  }
}

.request .contents-step .step .stepDescription-box__list .step-list ul li {
  padding-left: 20px
}

.request .contents-step .step .stepDescription-box__list .step-list ul a {
  color: #e15f52;
  text-decoration: underline
}

.request .contents-step .step .stepDescription-box__list .step-list ul a:hover {
  text-decoration: none
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription .oneLineTitle {
    padding: 25px 18px 33px
  }
  .request .contents-step .step .stepDescription .oneLineTitle .stepDescription-box__title {
    margin-top: 13px
  }
  .request .contents-step .step .stepDescription .oneLineTitle .stepDescription-box__text {
    padding-top: 34px
  }
  .request .contents-step .step .stepDescription .oneLineTitle .stepDescription-box__link {
    margin-top: 13px
  }
}

.request .contents-step .step .stepDescription:first-of-type {
  margin-top: 86px
}

@media only screen and (max-width:568px) {
  .request .contents-step .step .stepDescription:first-of-type {
    margin-top: 58px
  }
}

.request .contents-step .step .stepDescription:nth-of-type(2) {
  padding: 47px 30px 76px 206px
}

.request .contents-step .nextArrow {
  bottom: -50px
}

@media only screen and (max-width:568px) {
  .request .contents-step .nextArrow {
    bottom: -28px
  }
}

.request .contents-flow {
  position: relative;
  z-index: 10;
  margin-top: 98px;
  padding-bottom: 210px
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .request .contents-flow {
    padding: 0 20px 220px
  }
}

@media only screen and (max-width:568px) {
  .request .contents-flow {
    margin-top: 0;
    padding-top: 57px;
    padding-bottom: 110px
  }
}

.request .contents-flow:before {
  content: '';
  position: absolute;
  top: -1050px;
  right: -150px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf3.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(186px/2);
  height: calc(340px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .request .contents-flow:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .request .contents-flow:before {
    display: none
  }
}

.request .contents-flow:after {
  content: '';
  position: absolute;
  top: -150px;
  left: -180px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf4.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(274px/2);
  height: calc(286px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .request .contents-flow:after {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .request .contents-flow:after {
    display: none
  }
}

.request .contents-flow .flow {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: 0 auto
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow {
    padding: 0 10px
  }
}

.request .contents-flow .flow:before {
  content: '';
  position: absolute;
  top: 680px;
  right: -250px;
  z-index: 5;
  background-image: url(/assets/images/common/bg_leaf2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  max-width: calc(180px/2);
  height: calc(248px/2)
}

@media only screen and (min-width:569px) and (max-width:960px) {
  .request .contents-flow .flow:before {
    display: none
  }
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow:before {
    display: none
  }
}

.request .contents-flow .flow .headText {
  margin-top: 48px;
  font-size: 1.8rem;
  line-height: 3.6rem
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow .headText {
    margin-top: 38px;
    font-size: 1.4rem;
    line-height: 2.2rem;
    padding: 0 25px
  }
}

.request .contents-flow .flow-notice {
  margin-top: 30px;
  font-size: 1.4rem;
  line-height: 2.4rem
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-notice {
    font-size: 1.2rem;
    line-height: 1.5rem
  }
}

.request .contents-flow .flow-box {
  position: relative;
  border: 2px solid #000;
  border-radius: 10px;
  height: 78px;
  margin-bottom: 28px
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-box {
    height: auto;
    border-radius: 7px;
    margin-bottom: 15px;
    padding: 9px 0
  }
}

.request .contents-flow .flow-box p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 2.4rem;
  line-height: 3.6rem;
  text-align: left;
  padding: 0 20px
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-box p {
    position: relative;
    top: 0;
    transform: none;
    font-size: 1.2rem;
    line-height: 1.5rem;
    padding: 0 10px
  }
}

.request .contents-flow .flow-box p span {
  font-weight: 700
}

.request .contents-flow .flow .arrowBottom-w:after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: calc(97px/2);
  height: calc(44px/2);
  background-image: url(/assets/images/common/arrow_baloon_bottom_w.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow .arrowBottom-w:after {
    bottom: -11px;
    max-width: calc(48px/2);
    height: calc(22px/2);
    background-image: url(/assets/images/common/arrow_baloon_bottom_w_sp.png)
  }
}

.request .contents-flow .flow .arrowBottom-y:after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: calc(97px/2);
  height: calc(44px/2);
  background-image: url(/assets/images/common/arrow_baloon_bottom_y.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow .arrowBottom-y:after {
    bottom: -11px;
    max-width: calc(48px/2);
    height: calc(22px/2);
    background-image: url(/assets/images/common/arrow_baloon_bottom_y_sp.png)
  }
}

.request .contents-flow .flow .sizeMiddle {
  width: 100%;
  max-width: 460px;
  background-color: #fff
}

.request .contents-flow .flow .sizeSmall {
  width: 100%;
  max-width: 198px;
  background-color: #fff
}

.request .contents-flow .flow .sizeSmall-y {
  width: 100%;
  max-width: 342px;
  background-color: #fff94b
}

.request .contents-flow .flow-1Column {
  margin-top: 40px
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-1Column {
    margin-top: 25px
  }
}

.request .contents-flow .flow-1Column .flow-box {
  width: 100%;
  background-color: #fff
}

.request .contents-flow .flow-2Column {
  display: flex;
  justify-content: flex-end
}

.request .contents-flow .flow-2Column__right {
  width: 100%;
  max-width: 460px
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-2Column__right {
    max-width: 59%
  }
}

.request .contents-flow .flow-2Column__right .flow-box {
  background-color: #fff94b
}

.request .contents-flow .flow-2Column__right .flow-box p {
  text-align: left
}

.request .contents-flow .flow-2Column__right .flow-box .textCenter {
  text-align: center
}

.request .contents-flow .flow-3Column {
  position: relative;
  display: flex;
  justify-content: space-between
}

.request .contents-flow .flow-3Column .flow-illust {
  position: absolute;
  bottom: 0;
  left: 60px
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-3Column .flow-illust {
    bottom: 0;
    left: 32px
  }
}

.request .contents-flow .flow-3Column .flow-illust img {
  width: calc(292px/2)
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-3Column .flow-illust img {
    width: calc(152px/2)
  }
}

.request .contents-flow .flow-3Column__left {
  width: 100%;
  max-width: 198px
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-3Column__left {
    max-width: 25%
  }
}

.request .contents-flow .flow-3Column__left .flow-box {
  background-color: #fff
}

.request .contents-flow .flow-3Column__left .flow-box p {
  text-align: center;
  padding: 0
}

.request .contents-flow .flow-3Column__center {
  width: 100%;
  max-width: 122px
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-3Column__center {
    max-width: 14%
  }
}

.request .contents-flow .flow-3Column__center .arrow {
  margin-top: 10px;
  position: relative;
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-weight: 700;
  text-align: center
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-3Column__center .arrow {
    font-size: .8rem;
    line-height: .8rem
  }
}

.request .contents-flow .flow-3Column__center .arrow img {
  margin-top: 10px;
  width: calc(194px/2);
  height: calc(166px/2)
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-3Column__center .arrow img {
    width: calc(86px/2);
    height: calc(74px/2)
  }
}

.request .contents-flow .flow-3Column__right {
  width: 100%;
  max-width: 460px
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-3Column__right {
    max-width: 59%
  }
}

.request .contents-flow .flow-3Column__right .flow-box {
  background-color: #fff94b
}

.request .contents-flow .flow-3Column__right .flow-box:last-of-type {
  margin-bottom: 0
}

.request .contents-flow .flow-3Column__right .flow-text {
  font-size: 2rem;
  line-height: 3.6rem;
  font-weight: 700
}

@media only screen and (max-width:568px) {
  .request .contents-flow .flow-3Column__right .flow-text {
    font-size: 1.1rem;
    line-height: 1.5rem
  }
}

.request .contents-flow .flow-3Column__right .bg-w {
  background-color: #fff
}




/*2021年9月追加CSS↓*/

/*トップ↓*/
.padding_top{
	padding-top: 50px
}

.discript_p{
	font-size: 1.8rem;
    line-height: 3.6rem;
    letter-spacing: .15rem;
    margin-top: 35px;
	margin-bottom: 35px;
}

.link_pdf {
	position: relative;
}

.link_pdf span{
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 700;
  font-family: GenJyuuGothic, sans-serif;
  text-decoration: underline;
}

.link_pdf span:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 42%;
  left: -36px;
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(48px/2);
  height: calc(48px/2);
  background-image: url(/assets/images/common/icon_link_circle.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.relative{
	position: relative;
}

.bottun_text{
	position: absolute;
    z-index: 10;
    font-size: 1.8em;
    width: 100%;
    top: 45%;
    left: 8px;
    transform: translateY(-50%);
	margin-top: 30px;
	line-height: 1em;
}

.bottun_text::before{
    content:"";
	display:inline-block;
	width:1em;
	height:1em;
    background-image: url(/assets/images/common/arrow_next.png);
    background-repeat: no-repeat;
    background-size: contain;
	vertical-align: top;
}

.bottun_img{
	width: 40%;
	margin-top: 50px;
}

.shinko_kyokai_padding{
	padding-bottom: 65px;
}

.arrow_margin_top{
	margin-top: -35px;
}

.kensyukai_h3 {
    font-size: 2.8rem;
    line-height: 2.8rem;
    font-family: GenJyuuGothic, sans-serif;
	margin-top: 40px
}

.kensyukai_h4{
	font-size: 2rem;
    line-height: 2rem;
    font-family: GenJyuuGothic, sans-serif;
	margin-top: 30px
}

.kensyukai_text{
	font-size: 1.6rem;
    line-height: 3.2rem;
    text-align: center;
    margin-top: 60px;
}

.two_line::before{
    position: absolute;
    top: 22%;
    transform: translate(-22%);
    left: 35%;
}

.margin_top{
	margin-top: 70px;
}

.ninsyo_search{
	position: relative;
    font-size: 3rem;
    line-height: 3rem;
    font-family: GenJyuuGothic, sans-serif;
    display: flex;
    justify-content: center;
}

.balloon-1{
	position: relative;
    left: -30px;
    bottom: 0;
    width: 3px;
    height: 30px;
    background-color: #000;
    transform: rotate(-30deg);
}

.balloon-2{
	position: relative;
    right: -30px;
    bottom: 0;
    width: 3px;
    height: 30px;
    background-color: #000;
    transform: rotate(30deg);
}


/*認証ページ↓*/

.acd-check{
    display: none;
}
.acd-label{
    display: block;
    margin-bottom: 1px;
}
.acd-content{
    border: 1px solid #333;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
	background-color: #fff;
}
.acd-check:checked + .acd-label + .acd-content{
    height: 175px;
    opacity: 1;
    padding: 10px;
    visibility: visible;
	z-index: 20;
    position: relative;
}
.acordion{
	font-size: 1.7rem;
    line-height: 2.2rem;
    font-weight: 600;
	margin-top: 5px;
	margin-bottom: 10px;
}
.text_center{
	text-align: center; 
}
.margin_bottom{
	margin-bottom: 50px;
}
.a_hover:hover{
	opacity: .6;
}
.question-title{
	position: relative;
    margin-top: 70px;
}
.question-title img{
	position: relative;
    z-index: 10;
    width: calc(508px/2);
}
.question-title:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background-color: #000;
}
.question-box{
	display: flex;
    margin: 10px auto 0;
    max-width: 820px;
}
.question-box__illust{
	width: 21.463414634146343%;
    height: 41.70731707317073%;
}
.question-box__text{
    position: relative;
    border: 3px solid #000;
    border-radius: 10px;
    background-color: #fff;
    width: 525px;
    padding: 25px;
    -ms-grid-row-align: center;
    align-self: center;
    font-size: 2.4rem;
    line-height: 3.4rem;
    margin-left: 30px;
}
.question-box__text:after{
	content: '';
    position: absolute;
    top: 50%;
    left: -14px;
    transform: translateY(-50%);
    width: 14px;
    height: 16.5px;
    background-image: url(/assets/images/top/balloon_thorn_left.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
.contents-anser{
	position: relative;
    max-width: 820px;
    margin-top: 34px;
}
.anser1{
    position: relative;
}
.anser1:before{
    content: '';
    position: absolute;
    top: 486px;
    right: -204px;
    z-index: 5;
    background-image: url(/assets/images/common/bg_leaf3.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    max-width: calc(186px/2);
    height: calc(340px/2);
}
.anser{
	position: relative;
    border: 2px solid #000;
    border-radius: 10px;
    background-color: #fff;
    margin: 30px auto;
    z-index: 5;
}
.anser-title{
	position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}
.anser-title img{
	width: calc(688px/2);
}
.anser-text{
	margin: 57px 0 44px;
    font-size: 2.4rem;
    line-height: 3.8rem;
}
.contents-anser:after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-image: url(/assets/images/common/bg_diagonalline.png);
    background-repeat: repeat;
    opacity: .6;
}
.contents-standards {
    margin-top: 90px;
}
.certificationStandards {
    position: relative;
	margin-top: 90px;
}
/*.certificationStandards:after {
    content: '';
    position: absolute;
    z-index: 3;
    top: -40px;
    left: 29.5%;
    width: calc(207px/2);
    height: calc(125px/2);
    border-radius: 10px;
    background-image: url(/assets/images/processing/text_check.png);
    background-repeat: no-repeat;
    background-size: contain;
}*/
.contents-standards .certificationStandards span {
    margin-left: 9px;
    letter-spacing: .2rem;
}

.contents-standards .certificationStandards span {
    margin-left: 9px;
    letter-spacing: .2rem;
}
.head-3 span:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 18px;
    background: #fff94b;
    mix-blend-mode: multiply;
}
.standards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 894px;
    margin: 42px auto 0;
}
.standards-box {
    width: 278px;
    position: relative;
    border: 2px solid #000;
    border-radius: 20px;
    background-color: #fff;
    padding: 20px 10px 14px;
    margin-bottom: 30px;
    font-weight: 400;
}
.standards-box .twoLine {
    line-height: 3.6rem;
}
.standards-box__illust {
    margin-top: 27px;
    width: 100%;
}
.standards-box__text {
    margin-top: 25px;
    font-size: 1.6rem;
    line-height: 2.8rem;
}
.standards-box:nth-of-type(2) {
    margin-left: 30px;
    margin-right: 30px;
}
.standards-box__head {
    font-size: 2.6rem;
    line-height: 6.8rem;
    font-weight: 700;
}
.standards-box:nth-of-type(4) {
    margin-right: 30px;
}
.processing .question2 {
    padding-top: 0;
}
.question2:before {
    content: '';
    position: absolute;
    top: 300px;
    left: -180px;
    z-index: 5;
    background-image: url(/assets/images/common/bg_leaf4.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    max-width: calc(274px/2);
    height: calc(286px/2);
}
.fee {
    position: relative;
	margin-top: 92px;
}
.head-3 span {
    position: relative;
    font-size: 3.2rem;
    line-height: 4.2rem;
}
.head-3 span:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 18px;
    background: #fff94b;
    mix-blend-mode: multiply;
}
/*.head-3:after {
    content: '';
    position: absolute;
    z-index: 3;
    top: -40px;
    left: 32%;
    width: calc(207px/2);
    height: calc(125px/2);
    border-radius: 10px;
    background-image: url(/assets/images/processing/text_check.png);
    background-repeat: no-repeat;
    background-size: contain;
}*/
.feeDetails {
    width: 100%;
    height: 181px;
    max-width: 894px;
    position: relative;
    border: 2px solid #000;
    border-radius: 20px;
    background-color: #fff;
    padding: 20px 10px;
    margin: 41px auto 0;
}
.feeDetails-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 894px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 40px;
}
.feeDetails-box__1 {
    font-size: 2.4rem;
    line-height: 3.6rem;
    font-weight: 700;
    text-align: left;
}
.feeDetails-box__plus {
    width: calc(84px/2);
    height: calc(84px/2);
    -ms-grid-row-align: center;
    align-self: center;
}
.feeDetails-box__2 {
    font-size: 2.4rem;
    line-height: 3.6rem;
}
.reexamination {
    width: 100%;
    height: 342px;
    max-width: 724px;
    position: relative;
    border: 2px solid #000;
    border-radius: 20px;
    background-color: #fff;
    padding: 20px 10px;
    margin: 102px auto 0;
}
.reexamination:before {
    content: '';
    position: absolute;
    top: 9px;
    right: -250px;
    z-index: 5;
    background-image: url(/assets/images/common/bg_leaf2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    max-width: calc(180px/2);
    height: calc(248px/2);
}
.reexamination-box {
    position: relative;
    width: 100%;
    margin-top: 29px;
}
.reexamination-box__head {
    position: absolute;
    top: -25%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(480px/2);
}
.reexamination-box__1 {
    font-size: 2.4rem;
    line-height: 3.6rem;
    font-weight: 700;
    margin-bottom: 35px;
}
.reexamination-box__1 p:first-of-type {
    margin-bottom: 20px;
}
.reexamination-box__2 {
    font-size: 2.4rem;
    line-height: 3.6rem;
    font-weight: 700;
}
.reexamination-box__2 p:first-of-type {
    margin-bottom: 20px;
}

.contents-subsidy {
    margin-top: 72px;
}
.subsidy{
	margin-top: 72px;
}
.head-4 span {
    font-size: 2.8rem;
    line-height: 2.8rem;
}
.head-4 span {
    position: relative;
    font-size: 2.4rem;
    line-height: 3.4rem;
    font-weight: 700;
}
.subsidy-text {
    margin-top: 30px;
    font-size: 1.6rem;
    line-height: 3.2rem;
}
.subsidy-link {
    margin-top: 20px;
    font-size: 1.6rem;
    line-height: 3.2rem;
}
.subsidy-link a {
    color: #e15f52;
    text-decoration: underline;
}
.processing .contents-subsidy .subsidy-button {
    margin: 41px auto 0;
}
.nomalButton {
    margin-top: 30px;
    display: flex;
	justify-content: center;
}
.processing .nomalButton-button__link {
    position: relative;
}
.nomalButton-button__text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 353px;
    width: 100%;
}
.nomalButton-button__link span {
    position: relative;
    font-size: 1.8rem;
    width: 100%;
}
.processing .nomalButton-button__link span:before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    left: -21px;
    transform: translateY(-50%);
    width: 100%;
    max-width: calc(24px/2);
    height: calc(40px/2);
    background-image: url(/assets/images/common/arrow_next.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.nomalButton-button__link img {
    width: 100%;
    max-width: 353px;
}
.nomalButton-button__link img {
    width: 100%;
    max-width: 353px;
}
.nomalButton-button__text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 353px;
    width: 100%;
}

.nomalButton-button__link span:before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    left: -21px;
    transform: translateY(-50%);
    width: 100%;
    max-width: calc(24px/2);
    height: calc(40px/2);
    background-image: url(/assets/images/common/arrow_next.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.nomalButton-button__link img {
    width: 100%;
    max-width: 353px;
}
.relaive{
	position: relative
}
.pdf_link{
	color: #e15f52;
    text-decoration: underline;
	font-size: 1.6rem;
    line-height: 2.8rem;
	
}
.text_left{
	text-align: left;
}
.text{
	font-size: 1.6rem;
    line-height: 2.8rem;
	margin-top: 20px;
}
.h4_text{
	font-size: 2rem;
    line-height: 3rem;
	margin-top: 10px
}
.two_line_reqest:before{
	position: absolute;
    top: 22%;
    transform: translate(-22%);
    left: 32%;
}


/*マークページ*/

.display_flex{
	display: flex;
    justify-content: space-between;
}
.display_flex img{
  margin: 0px 5px;
	width: 70%;
}
.display_flex figure{
  display: flex;
  flex-direction: column;
}

.display_flex figcaption{
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 400;
  text-align: center;
  margin-top: 10px;
}


.example-box__link{
	text-align: center;
	margin-top: 20px;
}
.example-box__link a {
    position: relative;
    width: 100%;
}
.example-box__link span {
    font-size: 1.8rem;
    line-height: 1.8rem;
    font-weight: 700;
    font-family: GenJyuuGothic,sans-serif;
    text-decoration: underline;
    margin-left: 15px;
}
.example-box__link a:before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    width: 100%;
    max-width: calc(48px/2);
    height: calc(48px/2);
    background-image: url(/assets/images/common/icon_link_circle.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.contents-anser {
    position: relative;
    max-width: 820px;
    margin-top: 47px;
	margin: 0 auto;
    text-align: center;
}
.anser-illust {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 27px 0 34px;
}
.anser-illust__kakouhin {
    font-size: 1.6rem;
    line-height: 2.6rem;
}
.anser-illust__kakouhin img {
    width: 100%;
}
.anser-illust__kakouhin p {
    margin-top: 23px;
}
.anser-illust__menu p {
    margin-top: 23px;
}
.anser-illust__line {
    background-image: url(/assets/images/top/anser_diagonalline.png);
    background-repeat: no-repeat;
    width: 8px;
    height: 226px;
}
.anser-illust__menu {
    font-size: 1.6rem;
    line-height: 2.6rem;
}
.anser-illust__menu img {
    width: 100%;
}

.unusable {
    margin-top: 144px;
}
.contents-unusable {
    position: relative;
    margin-top: 70px!important;
    border-top: 2px solid #000;
    width: 88%;
    padding-bottom: 92px;
}
.unusable-title {
    display: flex;
    justify-content: center;
    margin-left: -55px;
}
.unusable-title__illust {
    width: calc(408px/2);
    height: calc(312px/2);
}
.unusable-title__text {
    -ms-grid-row-align: center;
    align-self: center;
    font-size: 3.2rem;
    line-height: 4.2rem;
    padding: 40px 0 0 20px;
}
.unusable-text {
    margin-top: 31px;
    font-size: 1.8rem;
    line-height: 3.6rem;
    letter-spacing: .2rem;
}
.example {
    margin-top: 57px;
    display: flex;
    justify-content: space-between;
    max-width: 100%;
}

.example-box_mark {
    max-width: 464px;
    position: relative;
    z-index: 10;
    border: 2px solid #000;
    border-radius: 10px;
    background-color: #fff;
    padding: 50px 0 34px;
    margin: 30px;
}
.example-box_mark:after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    height: 5px;
    width: 35%;
    background: #fff;
}
.example-box-head_mark {
    position: absolute;
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
    width: 33%;
    z-index: 5;
}
.container_ex{
	max-width: 960px!important;
}

.contents-certificationMark {
    margin-top: 133px;
}
.certificationMark {
    position: relative;
    font-size: 3.2rem;
    line-height: 4.2rem;
}
.certificationMark-illust {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 0;
    width: 179px;
}
.descriptionBox {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 30px;
}
@media only screen and (max-width:568px) {
  .descriptionBox {
    display: block;
  }
}
.animeBalloon {
    position: relative;
    border: 2px solid #000;
    border-radius: 10px;
    background-color: #fff;
    width: 100%;
    padding: 40px 20px;
    -ms-grid-row-align: center;
    align-self: center;
    opacity: 0;
    visibility: hidden;
    transition: .2s all ease-in-out 0s;
}
.showBalloon {
    opacity: 1;
    visibility: visible;
}
.descriptionText-head {
    font-size: 2.8rem;
    line-height: 2.8rem;
    font-family: GenJyuuGothic,sans-serif;
}
.decoration-emphasize {
    position: relative;
}
.descriptionText-text {
    margin-top: 10px;
    font-size: 1.6rem;
    line-height: 2.8rem;
}
.animeBalloon:after {
    content: '';
    position: absolute;
    bottom: 20px;
    right: -22px;
    width: 22px;
    height: 29px;
    background-image: url(/assets/images/top/balloon_thorn.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
@media only screen and (max-width:568px) {
  .animeBalloon:after {
    display: none
  }
}
.descripthionMark {
    position: relative;
    margin: 13px 13px 0 34px;
}
.descripthionMark:before {
    content: '';
    position: absolute;
    top: -347px;
    right: -111px;
    z-index: 5;
    background-image: url(/assets/images/common/bg_leaf3.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    max-width: calc(186px/2);
    height: calc(340px/2);
}
.descripthionMark-mark {
    max-width: 303px;
}
.arrow_bottom{
	margin-bottom: -150px!important;
}

/*飲食加工業者ページ*/
.contents-point {
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
}
.contents-point:before {
    content: '';
    position: absolute;
    top: 80px;
    right: -100px;
    z-index: 5;
    background-image: url(/assets/images/common/bg_leaf1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    max-width: calc(204px/2);
    height: calc(308px/2);
}
.processing .contents-point .point {
    width: 100%;
    max-width: 960px;
}
.turnBack-line {
    display: inline;
}
.processing .contents-point .point .head-2 .turnBack-line:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 8px;
    background-image: url(/assets/images/common/bg_diagonalline.png);
    background-repeat: repeat-x;
}
.point .head-2 span:after {
    content: '';
    background-image: none;
}
.pointList {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 64px;
}
.pointList-box {
    position: relative;
    max-width: 300px;
    background-color: #ededed;
    border-radius: 20px;
    margin: 50px 0 0;
    padding-bottom: 36px;
}
.pointList-box__point {
    position: absolute;
    z-index: 10;
    top: -60px;
    left: 12%;
    width: 53.333333333333336%;
}
.pointList-box__illust {
    width: 100%;
    padding-top: 72px;
}
.pointList-box__title {
    font-size: 2.6rem;
    line-height: 3.4rem;
    font-weight: 700;
    border-bottom: 3px solid #000;
    margin: 0 30px;
    padding-bottom: 9px;
}
.pointList-box__text {
    font-size: 1.6rem;
    line-height: 2.8rem;
    margin: 0 30px;
    padding-top: 21px;
}
.pointList-box__link {
    margin: 0 auto;
    margin-top: 20px;
    text-align: left;
    display: inline-block;
}
.pointList-box__link span {
    font-size: 1.6rem;
    line-height: 1.8rem;
    font-weight: 700;
    font-family: GenJyuuGothic,sans-serif;
    text-decoration: underline;
}
.pointList-box__link a {
    position: relative;
    width: 100%;
}
.pointList-box__link a:before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
    width: 100%;
    max-width: calc(48px/2);
    height: calc(48px/2);
    background-image: url(/assets/images/common/icon_link_circle.png);
    background-repeat: no-repeat;
    background-size: contain;
}

/*飲食店ページ*/
.contents-company {
    position: relative;
    padding-top: 97px;
    padding-bottom: 60px;
}
.headText {
    margin-top: 52px;
    position: relative;
    background-image: url(/assets/images/top/bg_house.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: auto;
    height: calc(255px/2);
}
.headText p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.8rem;
    line-height: 3.6rem;
    letter-spacing: .1rem;
}
.topPage .contents-company .headText p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.8rem;
    line-height: 3.6rem;
    letter-spacing: .1rem;
}
.company {
    margin: 45px 0 0;
}
.company-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: -20px -20px 0px;
    padding: 59px 0;
    background-color: #ededed;
}
.company-list li:first-of-type {
    margin-left: 0;
}
.company-list li img {
    width: auto;
    max-width: 220px;
    max-height: 150px;
}
.company-list li p {
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin-bottom: 20px;
}
.company-list li {
    margin: 20px 20px 0px;
}
.topPage .contents-company .company-list li img {
    width: auto;
    height: 70px;
}
.randomOrder {
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin-top: 10px;
    text-align: right;
}

.matching {
    position: relative;
    margin-top: 47px;
    padding-bottom: 0;
}
.matching:before {
    content: '';
    position: absolute;
    top: 43px;
    left: -123px;
    z-index: 5;
    background-image: url(/assets/images/common/bg_leaf4.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    max-width: calc(274px/2);
    height: calc(286px/2);
}
.matchingHead {
    position: relative;
    font-size: 3rem;
    line-height: 3rem;
    font-family: GenJyuuGothic,sans-serif;
    display: flex;
    justify-content: center;
}
.lineBalloon-1 {
    position: relative;
    left: -30px;
    bottom: 0;
    width: 3px;
    height: 30px;
    background-color: #000;
    transform: rotate(
-30deg);
}
.lineBalloon-2 {
    position: relative;
    right: -30px;
    bottom: 0;
    width: 3px;
    height: 30px;
    background-color: #000;
    transform: rotate(
30deg);
}
.matchingHead-text {
    margin-top: 35px;
    font-size: 1.6rem;
    line-height: 3.2rem;
    letter-spacing: .14rem;
}
.matchingBox {
    width: 100%;
    margin-top: 45px;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    align-items: stretch;
    flex-wrap: wrap;
}
.matching:after {
    content: '';
    position: absolute;
    top: 1005px;
    right: -132px;
    z-index: 5;
    background-image: url(/assets/images/common/bg_leaf2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    max-width: calc(180px/2);
    height: calc(248px/2);
}
.matchingBox-logo {
    width: 44.44444444444444%;
    margin-top: 40px;
}
.matchingBox li {
    width: 100%;
    max-width: 450px;
    background-color: #fff;
    border-radius: 20px;
}
.matchingBox-title {
    font-size: 2.6rem;
    line-height: 3.6rem;
    padding-bottom: 16px;
    border-bottom: 3px solid #000;
    margin: 9px 45px 0;
}
.matchingBox-text {
    font-size: 1.6rem;
    line-height: 3.2rem;
    text-align: left;
    padding: 20px 45px 30px;
    letter-spacing: .08rem;
}
.matchingBox-link {
    font-size: 1.6rem;
    line-height: 3.2rem;
    color: #e15f52;
    text-align: left;
}

/*問い合わせページ*/
.lower_h1{
	font-size: 4.2rem;
    line-height: 5.6rem;
    font-family: GenJyuuGothic, sans-serif;
    letter-spacing: .2rem;
	padding-top: 80px;
}

/*資料ダウンロードページ*/
.download_list_item + .download_list_item {
  margin-top: 60px;
}

.download_list_item h3 {
  font-size: 24px;
  font-weight: bold;
  text-align: left;
}

.download_list_item h4 {
  margin-top: 1em;
  font-size: 18px;
  font-weight: bold;
  text-align: left;
}

.download_list_item li {
  margin-top: 10px;
  text-align: left;
}

.text_color {
	color: #e15f52;
}

.youtube {
	display: block;
	margin: 10px auto 0;
}

.list8 {
	margin-top: 20px!important;
}
.list8 img {
	width: 70%!important;
  height: auto!important;
}

/*問い合わせページ*/
form#mailformpro .mailform {
  margin: 0px;
}

form#mailformpro dl {
  box-sizing: border-box;
}

form#mailformpro dl dt {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  border: none;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}

form#mailformpro dl dd {
  box-sizing: border-box;
  border: none;
}

form#mailformpro dl dt:nth-of-type(n+2),
form#mailformpro dl dd:nth-of-type(n+2) {
  border-top: 1px solid #d3dad9;
}

.mfp_colored {
  background: none;
}

.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea {
  padding: 1em;
  margin: 0px;
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid #c03425;
  background-color: #faebe9;
  box-shadow: none;
  outline: none;
}

.mfp_element_submit,
.mfp_element_reset,
.mfp_element_button {
  padding: 0.5em 3em;
  box-sizing: border-box;
  background: none;
  background-color: #c03425;
  box-shadow: none;
  color: #fff;
  font-size: 18px;
  text-shadow: 0px 2px 0px #90261c;
}

.mfp_element_submit:hover,
.mfp_element_reset:hover,
.mfp_element_button:hover {
  background: none;
  background-color: #d8483b;
  box-shadow: none;
}

div.mfp_err {
  padding: 0.5em 0px 0.5em 1em;
  background: none;
}

.problem {
  border: 1px solid #ffd5dc;
  background-color: #ffd5dc;
}

.must,
.no_must {
  display: block;
  padding: 0px 1em;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  text-shadow: none;
  color: #fff;
  font-size: 10px;
  line-height: 1.5;
}

.must {
  border: 1px solid #c60505;
  background-color: #c60505;
}

.no_must {
  border: 1px solid #fc0;
  background-color: #fc0;
}

@media screen and (max-width: 767.98px) {
  form#mailformpro dl dt,
  form#mailformpro dl dd {
      padding: 1em;
      width: 100%;
  }
  .must,
  .no_must {
      margin: 2px 2em 0px 0px;
  }
}

@media print, (min-width: 768px) {
  form#mailformpro dl {
      display: flex;
      flex-wrap: wrap;
  }
  form#mailformpro dl dt {
      float: none;
      padding: 2em 0px;
      width: 280px;
  }
  form#mailformpro dl dd {
      padding: 2em 2em 2em 0px;
      width: calc(100% - 280px);
  }
  .mfp_element_text,
  .mfp_element_number,
  .mfp_element_select-one,
  .mfp_element_email,
  .mfp_element_tel,
  .mfp_element_textarea {
      max-width: 500px;
  }
  .must,
  .no_must {
      margin: 2px 2em 0px;
  }
}