@charset "UTF-8";
/***************************************************************
 *
 * sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css
 *
***************************************************************/
pre, textarea {
  overflow: auto;
}

[hidden], audio:not([controls]), template {
  display: none;
}

details, main, summary {
  display: block;
}

input[type=number] {
  width: auto;
}

input[type=search] {
  -moz-appearance: textfield;
       appearance: textfield;
  -webkit-appearance: textfield;
}

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

progress {
  display: inline-block;
}

small {
  font-size: 75%;
}

textarea {
  resize: verticlp_specialal;
}

[unselectable] {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

*, ::after, ::before {
  box-sizing: inherit;
  border-style: solid;
  border-width: 0;
}

* {
  position: relative;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

::after, ::before {
  text-decoration: inherit;
  vertical-align: inherit;
}

:root {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  box-sizing: border-box;
  cursor: default;
  font: 20px/1.5 sans-seri f;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
}

audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

button, input, select, textarea {
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}

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

ol, ul {
  list-style: none;
}

select {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

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

::-moz-selection {
  background-color: #B3D4FC;
  text-shadow: none;
}

::selection {
  background-color: #B3D4FC;
  text-shadow: none;
}

@media screen {
  [hidden~=screen] {
    display: inherit;
  }
  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    clip: rect(0 0 0 0) !important;
    position: absolute !important;
  }
}
/***************************************************************
 *
 * layout and etc...
 *
***************************************************************/
img {
  max-width: 100%;
  height: auto;
}

body {
  margin: 0;
}

/*
			inview (ScrollTrigger)
*********************************************/
.inview {
  transition: all 1s ease;
}

.ivo {
  opacity: 0;
  filter: blur(12px);
}
.ivo.in-view {
  opacity: 1;
  filter: blur(0);
}

/*
			Draggable
*********************************************/
.draggable_wrap,
.draggable_snap_wrap {
  overflow: hidden;
}
.draggable_wrap::after,
.draggable_snap_wrap::after {
  z-index: 1;
  transition: 1s all ease;
  opacity: 0;
  pointer-events: none;
  content: "\2194";
  position: absolute;
  display: block;
  width: 4em;
  height: 4em;
  top: 55%;
  left: 0;
  right: 0;
  margin: auto;
  color: #fff;
  font-size: 2em;
  line-height: 2em;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 1.5em;
}
.draggable_wrap.dragg::after,
.draggable_snap_wrap.dragg::after {
  z-index: 10000;
  opacity: 1;
}

/*
			PC通話発信無効化
*********************************************/
@media (min-width: 769px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
/***************************************************************
 *
 * sass media query
 *
***************************************************************/
/***************************************************************
 *
 * Stylesheet for LP
 *
***************************************************************/
/*
			Font
*********************************************/
:root {
  --green: #43b47c;
  --green_dark: #2f7d3e;
  --green_pale: #dff3e8;
  --mint: #e9f8f0;
  --mint_deep: #b5e2cb;
  --cream: #f5efe4;
  --ink: #101010;
  --font_jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;
  --font_en: "Jost", "Gilda Display", sans-serif;
}

body {
  font-size: 20px;
  line-height: 1.4em;
  color: #101010;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "YuGothic", "open sans", "Noto Sans Japanese", "メイリオ", "Meiryo", system-ui, sans-serif;
  background: #e4f3e8;
}

body a {
  color: #101010;
  text-decoration: none;
}

body a:hover {
  color: #101010;
  text-decoration: none;
}

.font_a {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "HGS明朝E", "メイリオ", "Meiryo", serif;
}

.font_g {
  font-family: "Gilda Display", serif;
}

.font_j {
  font-family: "Jost", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "YuGothic", "open sans", "Noto Sans Japanese", "メイリオ", "Meiryo", system-ui, sans-serif;
}

.font_i {
  font-family: "Instrument", serif;
}

/*
			Responsive
*********************************************/
.md_show,
.md_showin {
  display: none;
}

@media screen and (max-width: 1300px) {
  body {
    font-size: 20px;
    font-size: 1.5384615385vw;
    font-size: 1.5384615385dvw;
    line-height: 1.4em;
  }
  .lg_hide {
    display: none;
  }
  .lg_show {
    display: block;
  }
  .lg_showin {
    display: inline;
  }
}
@media screen and (max-width: 768px) {
  .md_hide {
    display: none;
  }
  .md_show {
    display: block;
  }
  .md_showin {
    display: inline;
  }
  body {
    font-size: 20px;
    font-size: 2.6041666667vw;
    line-height: 1.4em;
    overflow: auto;
    height: auto;
  }
}
/***************************************************************
 *
 * 				 こじま法律事務所　離婚サイト Top page
 *
***************************************************************/
#loading {
  z-index: 200;
  background: url(img/014-2.png) no-repeat center center/100% 100%;
}
#loading > ul {
  width: 100dvw;
  height: 100dvh;
  display: grid;
  grid-template-columns: 3.5dvw 3.5dvw 3.5dvw;
}
@media screen and (max-width: 1300px) {
  #loading > ul {
    grid-template-columns: 3.5em 3.5em 3.5em;
  }
}
#loading > ul {
  gap: 2em;
  justify-content: center;
  align-items: center;
}
#loading > ul > li {
  opacity: 0;
  transition: 1s all ease;
}
#loading > ul > li:nth-child(1) {
  padding-top: 5em;
}
#loading > ul > li:nth-child(2) {
  padding-bottom: 2em;
}
#loading > ul > li:nth-child(3) {
  padding-bottom: 5em;
}

/* FV */
#tphead {
  background: url(img/014-2.png) no-repeat center -10em;
}
@media screen and (max-width: 1300px) {
  #tphead {
    background: url(img/014-2m.png) no-repeat center -10em/100% auto;
  }
}
@media screen and (max-width: 768px) {
  #tphead {
    background: url(img/014-2s.png) no-repeat center -4em/100% auto;
  }
}
#tphead > h1 {
  display: none;
}
@media screen and (max-width: 768px) {
  #tphead > h1 {
    display: block;
    width: 12em;
    padding: 2em 0 0 0em;
    margin-left: 2em;
  }
}
#tphead {
  overflow: hidden;
}
#tphead > p {
  position: absolute;
  width: 0.875em;
  height: 24.275em;
  top: 0;
  bottom: 0;
  left: 1em;
  margin: auto;
}
@media (max-width: 1400px) {
  #tphead > p {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  #tphead > p {
    display: block;
    left: 2em;
    width: 1em;
    height: auto;
    z-index: 2;
    padding-top: 12em;
  }
}
#tphead > div {
  margin-left: auto;
  margin-right: calc(1em + (50dvw - 650px) * 0.6);
}
@media screen and (max-width: 1300px) {
  #tphead > div {
    margin-right: 1em;
  }
}
@media screen and (max-width: 768px) {
  #tphead > div {
    display: none;
  }
}
#tphead > div {
  width: 24.45em;
  padding: 3em 0 0;
}
#tphead > div > a {
  display: block;
  margin-bottom: 1em;
}
#tphead > div > p {
  text-align: center;
}
#tphead > h2 {
  margin-left: auto;
  margin-right: calc(10em + 50dvw - 650px);
}
@media screen and (max-width: 1300px) {
  #tphead > h2 {
    margin-right: 10em;
  }
}
#tphead > h2 {
  width: 12.5em;
  display: grid;
  gap: 1em;
  grid-template-columns: 3.5em 3.5em 3.5em;
  padding-top: 8em;
  padding-bottom: 12em;
}
@media screen and (max-width: 768px) {
  #tphead > h2 {
    padding-top: 4em;
    padding-bottom: 26em;
    grid-template-columns: 4em 4em 4em;
  }
}
#tphead > span#tphead_table {
  pointer-events: none;
  display: block;
  position: absolute;
  width: 70.75em;
  height: 58.65em;
  top: 6em;
  left: calc(10em + 50dvw - 650px);
}
@media screen and (max-width: 1300px) {
  #tphead > span#tphead_table {
    left: 10em;
  }
}
@media screen and (max-width: 768px) {
  #tphead > span#tphead_table {
    display: none;
  }
}
#tphead > span#tphead_man {
  pointer-events: none;
  display: block;
  position: absolute;
  width: 15.6em;
  height: 42.65em;
  top: 7em;
  right: 0;
}
@media screen and (max-width: 768px) {
  #tphead > span#tphead_man {
    display: none;
  }
}
#tphead > span#tphead_sm {
  display: none;
}
@media screen and (max-width: 768px) {
  #tphead > span#tphead_sm {
    display: block;
    position: absolute;
    pointer-events: none;
    width: 100dvw;
    height: 45.05em;
    left: 0;
    top: 20em;
  }
}

/* nav + drawer_btn */
#gnav.tphead_nav {
  position: absolute;
}
#drawer_gnav.drawer_nav {
  display: none;
}
#gnav,
#drawer_gnav {
  z-index: 100;
  width: 17.5em;
  top: 2em;
  left: calc(1em + (50dvw - 650px) * 0.6);
}
@media screen and (max-width: 1300px) {
  #gnav,
  #drawer_gnav {
    left: 1em;
  }
}
@media screen and (max-width: 768px) {
  #gnav.tphead_nav {
    display: none;
  }
  #drawer_gnav.drawer_nav {
    display: block;
    position: fixed;
    top: 2em;
    max-height: calc(100dvh - 4em);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #gnav,
  #drawer_gnav {
    position: fixed;
    transition: all 1s ease;
    transform: translateX(-40em);
    width: 30em;
    left: 4.4em;
  }
}
#gnav > div,
#drawer_gnav > div {
  border: 1px solid #000;
  border-radius: 50% 50% 1em 1em/8em 8em 1em 1em;
  background: #FFF;
  padding: 4em 1.5em 1em;
}
@media screen and (max-width: 768px) {
  #gnav > div,
  #drawer_gnav > div {
    border-radius: 50% 50% 1em 1em/12em 12em 1em 1em;
  }
}
#gnav > div > h1,
#drawer_gnav > div > h1 {
  width: 9em;
  height: 6.8em;
  margin: 0 auto 3em;
}
@media screen and (max-width: 768px) {
  #gnav > div > h1,
  #drawer_gnav > div > h1 {
    width: 12em;
    height: 9.06667em;
  }
}
#gnav > div > ul > li,
#drawer_gnav > div > ul > li {
  border-bottom: 2px dashed #797979;
}
#gnav > div > ul > li:last-child,
#drawer_gnav > div > ul > li:last-child {
  border-bottom: none;
}
#gnav > div > ul > li > a,
#drawer_gnav > div > ul > li > a {
  display: block;
  padding: 1em 0.5em;
}
@media screen and (max-width: 768px) {
  #gnav > div > ul > li > a,
  #drawer_gnav > div > ul > li > a {
    padding: 2em 1em;
  }
}
#gnav > div > ul > li > a > span,
#drawer_gnav > div > ul > li > a > span {
  font-size: 1.05em;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  #gnav > div > ul > li > a > span,
  #drawer_gnav > div > ul > li > a > span {
    font-size: 1.6em;
  }
}

#drawer_btn {
  display: none;
}
@media screen and (max-width: 768px) {
  #drawer_btn {
    display: block;
    position: fixed;
    cursor: pointer;
    z-index: 101;
    width: 3em;
    height: 3em;
    top: 2em;
    right: 2em;
    padding: 0;
    border: 0;
    background: transparent;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #drawer_btn > span {
    width: 3em;
    height: 2px;
    background: #52c88d;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: transform 0.5s ease;
  }
  #drawer_btn > span:first-child {
    transform: translateY(-0.5em);
  }
  #drawer_btn > span:last-child {
    transform: translateY(0.5em);
  }
}

#drawer_screen {
  display: none;
}
@media screen and (max-width: 768px) {
  #drawer_screen {
    display: block;
    z-index: -1;
    position: fixed;
    inset: 0;
    width: 100dvw;
    height: 100dvh;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
}

body.drawer_open #drawer_btn > span:first-child {
  transform: rotate(135deg);
}
body.drawer_open #drawer_btn > span:last-child {
  transform: rotate(-135deg);
}

body.drawer_open #drawer_gnav {
  transform: none;
}

body.drawer_open #drawer_screen {
  z-index: 99;
  opacity: 0.6;
  pointer-events: auto;
}

body.drawer_open {
  overflow: hidden;
}

/* about */
.intro {
  position: relative;
  padding: 0 0 0;
  border-radius: 64px 64px 0 0;
  background: #eaf8f0;
}

.intro .section_inner,
.faq .section_inner {
  width: min(75em, 100%);
  padding: 0 2em;
  margin: 0 auto;
}

.intro_links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6em;
  width: 56em;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 6.5em;
  transform: translateY(-3.2em);
}
@media screen and (max-width: 768px) {
  .intro_links {
    display: block;
  }
  .intro_links > a:first-child {
    display: block;
    margin-bottom: 2em;
    width: 80%;
  }
  .intro_links > a:last-child {
    display: block;
    width: 80%;
    margin-left: auto;
  }
}

.intro_lead {
  margin: -1.4em auto 3em;
  color: #48b07c;
  text-align: center;
  font-size: 2.1em;
  font-weight: 600;
  line-height: 1.8;
}

.intro_content {
  display: grid;
  grid-template-columns: 23.5em minmax(0, 28em);
  gap: 3.5em;
  align-items: stretch;
  width: 56em;
  max-width: 100%;
  margin: 0 auto;
  min-height: 0;
}
@media screen and (max-width: 768px) {
  .intro_content {
    display: block;
  }
}
.intro_content > img:last-child {
  display: none;
}
@media screen and (max-width: 768px) {
  .intro_content > img:last-child {
    display: block;
    left: -2em;
    top: 4em;
  }
}

.intro_visual {
  position: relative;
  display: block;
  min-height: 100%;
}

.intro_quote {
  width: 5.6em;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .intro_quote {
    display: block;
    margin-bottom: 2em;
  }
}

.intro_message {
  display: grid;
  gap: 2.1em;
  margin: -3.6em 0 0 7.5em;
}
@media screen and (max-width: 768px) {
  .intro_message {
    margin: 0;
    padding-left: 2em;
  }
}

.intro_message img {
  width: 7.55em;
}

.intro_message_text {
  margin: 0;
  font-size: 1.6em;
  font-weight: 900;
  line-height: 2.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .intro_message_text {
    font-size: 2em;
  }
}

.intro_man {
  position: absolute;
  left: -6em;
  bottom: -3em;
  width: 28em;
  max-width: none;
}
@media screen and (max-width: 768px) {
  .intro_man {
    display: none;
  }
}

.intro_text {
  padding-top: 0.4em;
  padding-bottom: 5em;
  font-size: 1.15em;
  font-weight: 400;
  line-height: 2.45;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
  .intro_text {
    padding: 2em 1em 0;
    font-size: 1.8em;
    line-height: 1.8em;
  }
}

.intro_text p {
  margin: 0 0 3.2em;
}
@media screen and (max-width: 768px) {
  .intro_text p {
    margin: 0 0 1.6em;
  }
}

.intro_next {
  position: absolute;
  left: 50%;
  bottom: -3em;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 6em;
  height: 6em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--green);
}

.intro_next img {
  width: 2.1em;
}

/* feature */
.consult {
  padding: 9em 0 15em;
  border-radius: 3.2em 3.2em 0 0;
  text-align: center;
  background: url(img/041.png) no-repeat center bottom;
  background-color: var(--mint_deep);
}

.consult_scene {
  width: 46.15em;
  margin: 0 auto 8.4em;
}

.feature_label {
  width: 5.7em;
  margin: 0 auto 1.2em;
}

.section_title {
  margin: 0 0 2.4em;
  text-align: center;
  font-size: 2.1em;
  font-weight: 600;
  line-height: 1.5;
}

.section_title_en {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font_en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.fee_title {
  text-align: center;
  margin-bottom: 52px;
}

.fee_lead {
  width: 640px;
  margin: 0 auto 52px;
}

.fee_scene {
  width: 760px;
  margin: 0 auto 44px;
}

.fee_cards {
  display: grid;
  gap: 42px;
  width: min(940px, 100%);
  margin: 0 auto;
}

.fee_cards img {
  width: 100%;
  border-radius: 14px;
}

.fee_cards_split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}

.pill_nav {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: 3.4em;
  width: min(52em, 100% - 4em);
  margin: 0 auto 4.2em;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 768px) {
  .pill_nav {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1em;
    width: 100%;
    padding: 0 1em;
  }
}
@media screen and (max-width: 768px) {
  .pill_nav > li {
    margin: 0 auto;
  }
  .pill_nav > li:nth-child(1) {
    order: 1;
  }
  .pill_nav > li:nth-child(2) {
    order: 2;
  }
  .pill_nav > li:last-child {
    grid-column: 1/3;
    justify-self: center;
    order: 3;
    grid-row: 2/3;
  }
}

.pill_nav span {
  display: block;
  width: 16.05em;
}
@media screen and (max-width: 768px) {
  .pill_nav span {
    width: 18em;
  }
}

.point_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5em;
  width: min(75em, 100%);
  margin: 0.5em auto 0;
  padding: 0 1em;
  text-align: left;
}

.point_card {
  display: block;
  font-weight: 500;
  line-height: 1.8;
}

.point_card_kicker {
  margin: 0 0 0.75em;
  font-family: var(--font_en);
  font-size: 1.2em;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
}

.point_card_num {
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  margin: 0 auto 2em;
  border: 1px solid #111;
  border-radius: 50%;
  background: #fff;
  font-family: var(--font_en);
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1;
}

.point_card h3 {
  margin: 0 0 1.7em;
  font-size: 1.4em;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-align: center;
}

.point_card p {
  margin: 0 auto;
  font-size: 1em;
  line-height: 2.5;
  letter-spacing: 0.05em;
}

.point_card > p:last-child {
  text-align: left;
}

@media screen and (max-width: 768px) {
  .consult {
    padding: 72px 0 58px;
    border-radius: 28px 28px 0 0;
  }
  .consult_scene {
    width: 100%;
    margin-bottom: 4em;
  }
  .section_title {
    margin-bottom: 24px;
    font-size: 2em;
    line-height: 1.8em;
  }
  .section_title_en {
    font-size: 9px;
  }
  .fee_lead,
  .fee_scene {
    width: 300px;
  }
  .fee_cards {
    gap: 18px;
  }
  .fee_cards_split,
  .contact_inner,
  .access_card {
    grid-template-columns: 1fr;
  }
  .point_grid,
  .article_cards,
  .voice_cards {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .point_card {
    font-size: 11px;
    text-align: center;
  }
  .point_card h3 {
    font-size: 1.6em;
  }
  .point_card p {
    font-size: 1.1em;
  }
}
@media screen and (max-width: 768px) {
  .point_grid {
    display: block;
    width: 70%;
    margin: 0 auto 15em;
  }
  .point_card {
    margin-bottom: 4em;
  }
  .point_card > p.point_card_kicker {
    font-size: 2em;
  }
  .point_card > p {
    font-size: 1.8em;
    line-height: 1.8em;
  }
  .point_card > h3 {
    font-size: 2.2em;
    margin-bottom: 1em;
  }
  .point_card_num {
    font-size: 2em;
  }
}
/* important */
.important {
  background: #f9f7ed;
  padding-bottom: 10em;
}
@media screen and (max-width: 768px) {
  .important {
    padding-bottom: 20em;
  }
}
.important > span {
  display: block;
  width: 20.15em;
  height: 40.25em;
  position: absolute;
  top: -9em;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateX(26em);
}
@media screen and (max-width: 768px) {
  .important > span {
    top: auto;
    bottom: 0;
    left: auto;
    transform: none;
    width: 10.075em;
    height: 20.125em;
  }
}
.important > h2 {
  width: 33.425em;
  top: -6em;
  margin: 0 auto;
}
.important > ul {
  max-width: 1500px;
  margin: 0 auto 3em;
  padding: 0 5em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .important > ul {
    width: 22em;
    max-width: calc(100% - 4em);
    margin: 0 auto 3em;
    padding: 0;
    text-align: left;
    background: #FFF;
    border: 1px solid #2c7a2e;
    border-radius: 0.8em;
    overflow: hidden;
  }
  .important > ul.is-open > li {
    display: block;
  }
  .important > ul.is-open > li.now::after {
    transform: rotate(-135deg);
  }
}
.important > ul > li {
  cursor: pointer;
  display: inline-block;
  font-size: 1.3em;
  padding: 0.1em 0 0.4em 2em;
  font-weight: 600;
  margin-right: 2em;
  margin-bottom: 1em;
  background: url(img/045.png) no-repeat left top/1.3em 1.3em;
}
.important > ul > li.now {
  border-bottom: 1px solid #2c7a2e;
  color: #2c7a2e;
}
@media screen and (max-width: 768px) {
  .important > ul > li {
    display: none;
    margin: 0;
    padding: 0.9em 2.2em 0.9em 2.1em;
    border-bottom: 1px solid #d9e5db;
    background-position: 0.8em center;
    background-size: 1em auto;
    cursor: pointer;
  }
  .important > ul > li:last-child {
    border-bottom: none;
  }
}
@media screen and (max-width: 768px) {
  .important > ul > li.now {
    display: block;
    padding-right: 3.2em;
    border-bottom: none;
  }
  .important > ul > li.now::after {
    content: "";
    position: absolute;
    right: 1.1em;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid #2c7a2e;
    border-bottom: 2px solid #2c7a2e;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
}

.article_cards {
  display: grid;
  max-width: 1500px;
  margin: 0 auto;
  gap: 2em;
  grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 768px) {
  .article_cards {
    display: block;
  }
}
.article_cards > article {
  background: #FFF;
  border-radius: 2em;
  padding: 2em;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
@media screen and (max-width: 768px) {
  .article_cards > article {
    width: 80%;
    margin: 0 auto 3em;
  }
}
.article_cards > article > a > h3 {
  font-size: 1.2em;
  line-height: 1.5em;
  font-weight: 600;
  margin-bottom: 1em;
  color: #2c7a2e;
}
@media screen and (max-width: 768px) {
  .article_cards > article > a > h3 {
    font-size: 1.6em;
    line-height: 1.6em;
  }
}
.article_cards > article > a > p {
  font-size: 1em;
  line-height: 1.8em;
  padding-bottom: 2em;
}
@media screen and (max-width: 768px) {
  .article_cards > article > a > p {
    font-size: 1.2em;
  }
}
.article_cards > article > a > div {
  display: grid;
  grid-template-columns: 1fr 8em;
  align-items: end;
}
.article_cards > article > a > div > span {
  color: #2c7a2e;
  font-size: 0.8em;
}
@media screen and (max-width: 768px) {
  .article_cards > article > a > div > span {
    font-size: 1em;
  }
}
.article_cards > article > a > div > strong {
  display: block;
  background-color: #2c7a2e;
  border-radius: 1.2em/50%;
  color: #FFF;
  text-align: center;
  padding: 0.4em;
  font-size: 0.9em;
}
@media screen and (max-width: 768px) {
  .article_cards > article > a > div > strong {
    font-size: 1em;
    border-radius: 0.6em;
  }
}

#faq {
  background: url(img/042.png) no-repeat center top #b5e2cb;
  padding: 10em 0 0;
  border-radius: 0 0 0 15em;
  overflow: hidden;
}
#faq > div > h2 {
  font-size: 2.5em;
  line-height: 1.6em;
  margin-bottom: 1em;
}
@media screen and (max-width: 768px) {
  #faq > div > h2 {
    text-align: center;
    font-size: 2.6em;
  }
}
#faq > div > p {
  font-size: 1.1em;
  line-height: 1.6em;
}
@media screen and (max-width: 768px) {
  #faq > div > p {
    font-size: 1.2em;
    text-align: center;
  }
}
#faq > div > div {
  padding-top: 4em;
  padding-bottom: 4em;
}
@media screen and (max-width: 768px) {
  #faq > div > div {
    padding-bottom: 40em;
  }
}
#faq > div > div > span {
  display: block;
  width: 16.85em;
  height: 40.85em;
  position: absolute;
  bottom: 0;
  left: -2em;
}
@media screen and (max-width: 768px) {
  #faq > div > div > span {
    left: 4em;
  }
}
#faq > div > div > ul {
  padding-left: 14em;
  padding-bottom: 2em;
}
@media screen and (max-width: 768px) {
  #faq > div > div > ul {
    padding-left: 0;
  }
}
#faq > div > div > ul > li {
  background: #FFF;
  border-radius: 1em;
  padding: 2em 5em 2em 2em;
  margin-bottom: 3em;
}
@media screen and (max-width: 768px) {
  #faq > div > div > ul > li {
    padding: 1.6em 5em 2em 2em;
  }
}
#faq > div > div > ul > li > img {
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  top: 2em;
  right: 2em;
  cursor: pointer;
  transition: 0.6s ease all;
}
#faq > div > div > ul > li.open > img {
  transform: rotate(90deg);
}
#faq > div > div > ul > li > h3 {
  background: url(img/046.png) no-repeat left center/1.55em 1.75em;
  padding-left: 3em;
  padding-top: 0.2em;
}
@media screen and (max-width: 768px) {
  #faq > div > div > ul > li > h3 {
    padding-top: 0;
    margin-bottom: 2em;
  }
}
#faq > div > div > ul > li > h3 > span {
  font-size: 1.15em;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  #faq > div > div > ul > li > h3 > span {
    font-size: 1.4em;
    line-height: 1.6em;
  }
}
#faq > div > div > ul > li > div.text {
  background: url(img/047.png) no-repeat left top/1.55em 1.75em;
  padding-left: 3em;
  padding-top: 0.2em;
  display: none;
  height: 0;
  overflow: hidden;
  margin-top: 1em;
}
@media screen and (max-width: 768px) {
  #faq > div > div > ul > li > div.text {
    padding-top: 0;
  }
}
#faq > div > div > ul > li > div.text > p {
  margin-bottom: 1em;
}
#faq > div > div > ul > li > div.text > p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #faq > div > div > ul > li > div.text > p > span {
    font-size: 1.2em;
    line-height: 1.6em;
  }
}

#fee {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2.5em;
}
@media screen and (max-width: 768px) {
  #fee {
    padding: 0 1em;
  }
}
#fee .fee_title {
  padding: 5em 0 0;
}
#fee .fee_title > span {
  display: block;
  width: 3.7em;
  margin-bottom: 1em;
  margin: 0 auto;
}
#fee .fee_title > h2 {
  margin-bottom: 1em;
}
@media screen and (max-width: 768px) {
  #fee .fee_title > h2 {
    font-size: 2.6em;
  }
}
#fee .fee_title > p {
  font-size: 1.1em;
  margin-bottom: 4em;
}
@media screen and (max-width: 768px) {
  #fee .fee_title > p {
    font-size: 1.6em;
  }
}
#fee #fee_first {
  padding-bottom: 5em;
}
#fee #fee_first > span {
  display: block;
  width: 37.8em;
  margin: 0 auto 2em;
}
@media screen and (max-width: 768px) {
  #fee #fee_first > span {
    width: 100%;
    margin-bottom: 4em;
  }
}
#fee #fee_first > div {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 7.5em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2em auto;
  gap: 1em;
  justify-items: center;
}
@media screen and (max-width: 768px) {
  #fee #fee_first > div {
    padding: 0 1em;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 3em;
  }
}
#fee #fee_first > div > span {
  width: 1.4em;
}
@media screen and (max-width: 768px) {
  #fee #fee_first > div > span {
    display: none;
  }
}
#fee #fee_self {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2em;
  margin-bottom: 2em;
}
@media screen and (max-width: 768px) {
  #fee #fee_self {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
  }
}
#fee #fee_self > span:nth-child(1) {
  order: 1;
  width: 25.95em;
  align-self: end;
  justify-self: start;
}
@media screen and (max-width: 768px) {
  #fee #fee_self > span:nth-child(1) {
    order: 2;
    grid-row: 2/3;
  }
}
#fee #fee_self > span:nth-child(2) {
  order: 3;
  width: 25.95em;
  justify-self: end;
}
@media screen and (max-width: 768px) {
  #fee #fee_self > span:nth-child(2) {
    order: 3;
    grid-row: 3/4;
  }
}
#fee #fee_self > span:nth-child(3) {
  order: 2;
  grid-row: 1/3;
  grid-column: 2/3;
  width: 22.45em;
}
@media screen and (max-width: 768px) {
  #fee #fee_self > span:nth-child(3) {
    order: 1;
    grid-row: 1/2;
    grid-column: 1/2;
    justify-self: center;
  }
}
#fee #fee_self > span:nth-child(4) {
  order: 4;
  grid-row: 3/4;
  grid-column: 1/2;
  justify-self: end;
  width: 28.25em;
}
@media screen and (max-width: 768px) {
  #fee #fee_self > span:nth-child(4) {
    grid-row: 4/5;
    grid-column: 1/2;
    width: 100%;
  }
}
#fee #fee_self > span:nth-child(5) {
  order: 5;
  grid-row: 3/4;
  grid-column: 2/3;
  width: 28.25em;
}
@media screen and (max-width: 768px) {
  #fee #fee_self > span:nth-child(5) {
    order: 5;
    grid-row: 5/6;
    grid-column: 1/2;
    width: 100%;
  }
}
#fee #fee_total {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2em 2em;
  align-items: end;
  margin-bottom: 3em;
}
@media screen and (max-width: 768px) {
  #fee #fee_total {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
}
#fee #fee_total > span:nth-child(1) {
  grid-row: 1/3;
  grid-column: 1/2;
  width: 22.45em;
  justify-self: end;
}
@media screen and (max-width: 768px) {
  #fee #fee_total > span:nth-child(1) {
    order: 1;
    grid-row: 1/2;
    grid-column: 1/2;
    justify-self: center;
  }
}
#fee #fee_total > span:nth-child(2),
#fee #fee_total > span:nth-child(3) {
  width: 25.975em;
}
#fee #fee_total > span:nth-child(2) {
  align-self: end;
  justify-self: start;
}
@media screen and (max-width: 768px) {
  #fee #fee_total > span:nth-child(2) {
    order: 2;
    grid-row: 2/3;
    grid-column: 1/2;
  }
}
#fee #fee_total > span:nth-child(3) {
  align-self: start;
  justify-self: end;
}
@media screen and (max-width: 768px) {
  #fee #fee_total > span:nth-child(3) {
    order: 3;
    grid-row: 3/4;
    grid-column: 1/2;
  }
}
#fee #fee_total > span:nth-child(4) {
  grid-column: 1/3;
  width: 57.65em;
  justify-self: center;
  margin-top: 2em;
}
@media screen and (max-width: 768px) {
  #fee #fee_total > span:nth-child(4) {
    order: 4;
    grid-row: 4/5;
    grid-column: 1/2;
    width: 100%;
    justify-self: center;
  }
}
#fee > p {
  margin: 0 auto 5em;
  text-align: center;
  font-size: 1.1em;
  line-height: 1.9em;
}
@media screen and (max-width: 768px) {
  #fee > p {
    font-size: 1.2em;
  }
}

#flow_wrap {
  background: url(img/041.png) no-repeat center top/2010px 60px;
}
@media screen and (max-width: 1300px) {
  #flow_wrap {
    background: url(img/041m.png) no-repeat center top/contain;
  }
}
@media screen and (max-width: 768px) {
  #flow_wrap {
    background: url(img/041.png) no-repeat center top;
  }
}
#flow_wrap {
  padding: 3em 0 0;
  z-index: 1;
}

#flow {
  background: #f9f7ed;
}
#flow > h3 {
  width: 3.775em;
  margin: 0 auto 2em;
}
#flow > h2 {
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 1em;
}
#flow > p {
  font-size: 1.1em;
  text-align: center;
  margin-bottom: 4em;
}
@media screen and (max-width: 768px) {
  #flow > p {
    font-size: 1.2em;
  }
}
#flow > div#flow_slide {
  width: 100%;
  overflow: hidden;
  padding: 0 0 5em;
}
#flow > div#flow_slide > div {
  width: -moz-max-content;
  width: max-content;
}
#flow > div#flow_slide > div ul {
  width: -moz-max-content;
  width: max-content;
  display: grid;
  grid-template-columns: 24.8em 0.6em 24.8em 0.6em 24.8em 0.6em 24.8em;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #flow > div#flow_slide > div ul {
    grid-template-columns: 32em 0.6em 32em 0.6em 32em 0.6em 32em;
  }
}
#flow > div#flow_slide > div ul img.flow_arrow {
  transform: scale(400%);
  z-index: 2;
}

#contact {
  background: #f9f7ed;
}
#contact > span {
  display: block;
  position: absolute;
  z-index: 5;
  width: 28.35em;
  height: 22.25em;
  top: -10em;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateX(-25.825em);
}
@media (min-width: 1601px) {
  #contact > span {
    transform: none;
    right: auto;
  }
}
@media screen and (max-width: 768px) {
  #contact > span {
    transform: none;
    right: auto;
  }
}
#contact > div {
  max-width: 1300px;
  margin: 0 auto;
  padding: 3em 2.5em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 768px) {
  #contact > div {
    grid-template-columns: auto;
    grid-template-rows: auto auto;
  }
}
#contact > div h2 {
  width: 14.825em;
  margin-bottom: 2.5em;
}
@media screen and (max-width: 768px) {
  #contact > div h2 {
    margin: 0 auto 3em;
  }
}
#contact > div h4 {
  font-size: 1.2em;
  line-height: 1.6em;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  #contact > div h4 {
    font-size: 1.4em;
    line-height: 1.8em;
    text-align: center;
    margin-bottom: 4em;
  }
}
#contact > div h3 {
  text-align: center;
  padding-top: 1em;
  margin-bottom: 1em;
}
#contact > div h3 > span {
  padding-right: 1em;
}
#contact > div h3 > strong {
  font-size: 3.5em;
  font-weight: 500;
}
#contact > div p {
  font-size: 1.1em;
  text-align: center;
  margin-bottom: 1em;
}
#contact > div a {
  display: block;
  width: 11.55em;
  height: 3.55em;
  margin: 0 auto;
}

#office {
  overflow: hidden;
}
#office > img {
  width: 100%;
  min-width: none;
}
#office > span {
  position: absolute;
  display: block;
  width: 100%;
  height: 3em;
  top: 0;
  left: 0;
  background: url(img/042.png) no-repeat center top/2010px 60px;
}
@media screen and (max-width: 1300px) {
  #office > span {
    background: url(img/042m.png) no-repeat center top/contain;
  }
}

#access {
  max-width: 1300px;
  width: 95%;
  margin: 0 auto;
  top: -3em;
  border: 2px solid #307c32;
  background: #FFF;
  padding: 3em;
  border-radius: 1em;
  display: grid;
  grid-template-columns: 53% 47%;
}
@media screen and (max-width: 768px) {
  #access {
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    gap: 3em;
  }
}
#access h2 {
  width: 11.6em;
  margin-bottom: 2em;
}
#access p {
  font-size: 1.1em;
  line-height: 1.6em;
  margin-bottom: 3em;
}
#access p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #access p {
    font-size: 1.2em;
  }
}
#access iframe {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  #access iframe {
    height: 40em;
  }
}

#footer {
  padding: 5.5em 0 2em;
  background: url(img/077.png) no-repeat center bottom;
}
@media screen and (max-width: 1300px) {
  #footer {
    background: url(img/077m.png) no-repeat center bottom/contain;
  }
}
@media screen and (max-width: 768px) {
  #footer {
    background: url(img/077s.png) no-repeat center bottom/contain;
  }
}
#footer > h2 {
  width: 13em;
  margin: 0 auto 14em;
}
@media screen and (max-width: 768px) {
  #footer > h2 {
    margin: 0 auto 20em;
  }
}
#footer > h3 {
  width: 26.2em;
  margin: 0 auto 2em;
}
#footer > ul {
  display: grid;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 2em;
  grid-template-columns: 1fr auto auto;
  justify-content: end;
}
@media screen and (max-width: 768px) {
  #footer > ul {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0em;
  }
}
#footer > ul > li {
  font-size: 0.9em;
  margin-left: 2em;
}
#footer > ul > li > a {
  display: block;
  background: url(img/079.png) no-repeat right center/0.725em 0.675em;
  padding-right: 1em;
}
@media screen and (max-width: 768px) {
  #footer > ul > li > a {
    text-align: right;
  }
}
#footer > ul > li:first-child {
  justify-self: start;
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  #footer > ul > li:first-child {
    grid-column: 1/3;
    grid-row: 3/4;
    justify-self: center;
  }
}
#footer > ul > li:first-child > a {
  background: none;
}
@media screen and (max-width: 768px) {
  #footer > ul > li:nth-child(2) {
    grid-row: 1/2;
    justify-self: center;
    padding-bottom: 1em;
  }
  #footer > ul > li:nth-child(3) {
    justify-self: center;
    grid-row: 2/3;
    padding-bottom: 3em;
  }
}/*# sourceMappingURL=style.css.map */