@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Noto+Sans+JP:wght@100..900&display=swap');


/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*/
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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 1;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
a img {
  border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: break-word;
}
html, body {
  font-family: var(--font-ja);
  line-height: 1.4;
  /*text-align: justify;*/
  font-size: 10px;
  /*scroll-behavior: smooth;*/
  /*-webkit-overflow-scrolling: touch;*/
  font-weight: var(--medium);
  color: var(--color-txt);
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
}
a {
  display: inline-block;
  color: initial;
  cursor: pointer;
}
a, a:hover {
  text-decoration: none;
}
.flex {
  display: flex;
}
button {
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  letter-spacing: 0;
}
/*
p, dt, dd {
  overflow-wrap: break-word;
}
*/
body {
  margin: auto;
}
small {
  font-size: 70%;
}
main {
  overflow: hidden;
}
li {
  list-style: none;
}
input,
textarea,
select,
option,
button {
  font-family: var(--font-ja);
  font-weight: var(--medium);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
option:focus-visible {
  outline: none;
}
input,
textarea,
select {
  width: 100%;
  padding: 1.2rem 1.6rem;
  background: var(--color-white);
  border-radius: 0.2rem;
  border: 1px solid rgb(0 0 0 / 0.1);
  font-size: 1.6rem;
  font-weight: var(--bold);
}
select {
  background: var(--color-white) url(../img/common/icon_select_arrow.png) center right 1.6rem/1rem auto no-repeat;
}
select::after {
  position: absolute;
  content: "";
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
@media screen and (max-width: 767px) {
  ::-webkit-scrollbar{
    width: 0;
  }
}
@media screen and (max-width: 1350px) {
  html, body {
    font-size: calc(1000vw / 1350);
  }
}
@media screen and (max-width: 767px) {
  html, body {
    font-size: calc(1000vw / 390);
  }
}
.sp,
.spi {
  display: none !important;
}
.pc {
  display: block !important;
}
.pci {
  display: inline-block !important;
}
@media screen and (max-width: 767px) {
  .sp {
    display: block !important;
  }
  .spi {
    display: inline-block !important;
  }
  .pc,
  .pci {
    display: none !important;
  }
}

/* ----------------------------------
common
---------------------------------- */
:root {
  --color-gray: #f1f1f1;

  --color-green: #6cd469;
  --color-green2: #05ad87;
  --color-bg-green: #d6ecd6;
  --color-bg-green2: #d1e8e3;
  --color-gr-green: #6cd469 linear-gradient(-150deg, #6cd469 0%, #05ad87 100%);

  --color-blue: #1a6fec;
  --color-bg-blue: #e1e9f5;
  --color-gr-blue: #1ab0fd linear-gradient(-150deg, #1ab0fd 0%, #1a6fec 100%);

  --color-pink: #f73966;
  --color-bg-pink: #f6e5e9;
  --color-gr-pink: #f07649 linear-gradient(-150deg, #f07649 0%, #f73966 100%);
  
  --color-puple: #8b53e7;
  --color-bg-puple: #e9e3f3;

  --color-orange: #f07649;
  --color-bg-orange: #fbf0e8;

  --color-white: #fff;
  --color-txt: #000;
  --color-border: #a4b3b2;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semibold: 600;
  --bold: 700;
  --font-en: "Marcellus", serif;
  --font-ja: "Noto Sans JP", sans-serif;
}
.is-hide {
  display: none !important;
}
.en {
  font-family: var(--font-en);
}
.ja {
  font-family: var(--font-ja);
}
a {
  transition: .3s;
}
a:hover {
  opacity: 0.5;
}
::placeholder {
  color: #B1B9BA;
}
body.fixed {
  /* width: 100%;
  height: 100%;
  position: fixed; */
  overflow: hidden;
}
.in {
  max-width: 128rem;
  margin: 0 auto;
}
.txt {
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  line-height: 2;
}
.flex {
  display: flex;
}
.df_ttl {
  position: relative;
  padding: 7.8rem 0 7rem;
  text-align: center;
}
.df_ttl .ttl_sub {
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: var(--bold);
  letter-spacing: 0.05em;
  line-height: 1;
}
.df_ttl .ttl_h2 {
  position: relative;
  z-index: 1;
  font-size: 4.8rem;
  font-weight: var(--bold);
  letter-spacing: 0.05em;
}
.df_ttl .ttl_bg {
  position: absolute;
  left: 50%;
  top: -3.5rem;
  width: calc(100% + 24rem);
  font-size: 18rem;
  font-weight: var(--bold);
  letter-spacing: 0.2em;
  transform: translateX(-50%);
  line-height: 1;
  opacity: 0.15;
  pointer-events: none;
}
.df_ttl > img {
  height: 2.7rem;
  width: auto;
  margin: 3.6rem auto 0;
}
.df_ttl > .txt {
  margin-top: 5.7rem;
  font-weight: var(--regular);
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6rem;
  width: 30rem;
  border-radius: 5rem;
  font-size: 1.6rem;
  font-weight: var(--bold);
  font-style: italic;
  color: var(--color-white);
  letter-spacing: 0.05em;
}
.button span {
  position: relative;
  padding-right: 2.5rem;
}
.button span::after {
  position: absolute;
  top: 50%;
  right: 0;
  content: "";
  display: block;
  width: 1.6rem;
  height: 1.2rem;
  background: url(../img/button_arrow.png) center/contain no-repeat;
  transform: translateY(-50%);
}
.contents {
  padding-bottom: 10.9rem;
}
span.obi {
  position: relative;
}
span.obi.active::before {
  background: var(--color-white);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  animation: obi 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
span.obi span {
  position: relative;
  display: inline-block;
  padding: 0.9rem;
  font-weight: var(--bold);
  z-index: 1;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .txt {
    font-size: 1.5rem;
  }
  .df_ttl {
    padding: 2.8rem 0 5rem;
  }
  .df_ttl .ttl_sub {
    margin-bottom: 1.8rem;
    font-size: 1.4rem;
  }
  .df_ttl .ttl_h2 {
    font-size: 3rem;
  }
  .df_ttl .ttl_bg {
    top: -1.8rem;
    font-size: 9rem;
    transform: translateX(-48%);
  }
  .df_ttl > img {
    height: 2rem;
    margin-top: 2.7rem;
  }
  .df_ttl > .txt {
    margin-top: 4.7rem;
    text-align: left;
    font-size: 1.4rem;
  }
  .in {
    margin: 0 1.5rem;
  }
  .button {
    width: 28rem;
    height: 5rem;
  }
  .contents {
    padding-bottom: 8rem;
  }
}

.fixed-button {
  position: fixed;
  top: 35%;
  right: 1.5rem;
  background: var(--color-gr-pink);
  width: 6rem;
  height: 22rem;
  writing-mode: tb;
  z-index: 2;
  transform: translateY(-50%);
  letter-spacing: 0.1em;
}
.fixed-button span {
  padding: 0 0 2.5rem 0;
  margin-left: -0.6rem;
}
.fixed-button span::after {
  right: auto;
  top: auto;
  bottom: 0;
  left: 60%;
  transform: translateX(-50%);
}

/*20250522　oc追加 */

.fixed-button_oc {
  position: fixed;
  top: 65%;
  right: 1.5rem;
  background: var(--color-gr-blue);
  width: 6rem;
  height: 22rem;
  writing-mode: tb;
  z-index: 2;
  transform: translateY(-50%);
  letter-spacing: 0.1em;
}
.fixed-button_oc span {
  padding: 0 0 2.5rem 0;
  margin-left: -0.6rem;
}
.fixed-button_oc span::after {
  right: auto;
  top: auto;
  bottom: 0;
  left: 60%;
  transform: translateX(-50%);
}
/*20250522　oc追加 */



@media screen and (max-width: 767px) {  
  .fixed-button {
    display: none;
  }
  .fixed-button_oc {
    display: none;
  }
}



/* ----------------------------------
header
---------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.2rem 1.5rem;
  z-index: 11;
}
header .logo {
  position: relative;
  width: 38.2rem;
  z-index: 11;
}
header .hamburger {
  position: relative;
  width: 6rem;
  height: 6rem;
  border-radius: 6rem;
  background: var(--color-white);
  transition: .3s;
  z-index: 11;
  cursor: pointer;
}
header .hamburger span {
  position: absolute;
  display: block;
  bottom: 1.8rem;
  left: 50%;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: var(--bold);
  font-style: italic;
  color: #e50012;
  letter-spacing: 0;
  transform: translateX(-50%);
  line-height: 1;
  transition: .3s;
}
header .hamburger::after,
header .hamburger::before {
  position: absolute;
  left: 50%;
  content: "";
  display: block;
  width: 2.4rem;
  height: 0.2rem;
  background: #e50012;
  transform: translateX(-50%);
  transition: .3s;
}
header .hamburger::after {
  top: 2.3rem;
}
header .hamburger::before {
  top: 1.8rem;
}
header .hamburger.open {
  background: #e50012;
}
header .hamburger.open::after {
  top: 1.8rem;
  background: var(--color-white);
  transform: translateX(-50%) rotate(35deg);
}
header .hamburger.open::before {
  top: 1.8rem;
  background: var(--color-white);
  transform: translateX(-50%) rotate(-35deg);
}
header .hamburger.open span {
  color: var(--color-white);
}
header .in {
  position: fixed;
  max-height: 100vh;
  max-width: none;
  width: 100%;
  top: 0;
  left: 0;
  padding: 10rem 0 4rem;
  border-bottom: 1rem solid #e50012;
  background: var(--color-gray);
  z-index: 10;
  overflow-y: scroll;
  display: none;
}
header .in::-webkit-scrollbar {
  display: none;
}
header .in nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem 7.2rem;
  padding: 10.8rem 3rem 0;
  max-width: 150rem;
  margin: 0 auto;
}
header .in nav dl {
  width: calc(33.33% - (7.2rem * 2 / 3));
}
header .in nav dl dt {
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e50012;
  font-size: 3rem;
  font-weight: var(--bold);
  letter-spacing: 0.05em;
  line-height: 1;
}
header .in nav dl dd li + li {
  margin-top: 3rem;
}
header .in nav dl dd a {
  font-size: 1.6rem;
  padding-left: 2.6rem;
  font-weight: var(--regular);
  letter-spacing: 0.05em;
  background: url(../img/nav_arrow.png) top 0.5rem left/1.2rem auto no-repeat;
}
.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 7rem auto 0;
  padding-bottom: 11rem;
}
.buttons .button {
  background: var(--color-gr-pink);
}
.buttons .button.line {
  background: #06c755;
}
.buttons .button.line span {
  padding-left: 5rem;
}
.buttons .button.line span::before {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  display: block;
  width: 4rem;
  height: 3.8rem;
  background: url(../img/line_icon.png) center/contain no-repeat;
  transform: translateY(-50%);
}

/* OCボタン追加　css*/
.buttons .button.oc {
  background: var(--color-gr-blue);
}
/* OCボタン追加　css*/



@media screen and (max-width: 767px) {
  main {
    padding-top: 6rem;
  }
  header {
    padding: 0.5rem 1rem;
    background: #e70012;
  }
  header.open {
    background: none;
  }
  header .logo {
    width: 21.2rem;
    background: url(../img/logo_wh.png) center/100% auto no-repeat;
    transition: background .3s;
  }
  header .logo img {
    opacity: 0;
    transition: .3s;
  }
  header.open .logo {
    background: none;
  }
  header.open .logo img {
    opacity: 1;
  }
  header .hamburger {
    width: 5rem;
    height: 5rem;
  }
  header .hamburger span {
    bottom: 1.2rem;
  }
  header .hamburger::after {
    top: 1.4rem;
  }
  header .hamburger::before {
    top: 1.9rem;
  }
  header .hamburger.open::before {
    top: 1.5rem;
  }
  header .hamburger.open::after {
    top: 1.5rem;
  }
  header .in {
    padding: 6rem 0;
    margin: 0;
  }
  header .in nav {
    gap: 2.6rem;
    padding: 6rem 3rem 0;
  }
  header .in nav dl {
    width: 100%;
  }
  header .in nav dl dt {
    position: relative;
    margin: 0;
    padding: 1.4rem 0;
    font-size: 2.1rem;
  }
  header .in nav dl dt::after,
  header .in nav dl dt::before {
    position: absolute;
    top: 50%;
    right: 1rem;
    content: "";
    display: block;
    width: 1.6rem;
    height: 0.2rem;
    background: #e50012;
    transform: translateY(-50%);
    transition: .3s;
  }
  header .in nav dl dt::after {
    transform: translateY(-50%) rotate(90deg);
  }
  header .in nav dl dt.open::after {
    transform: translateY(-50%) rotate(0deg);
    opacity: 0;
  }
  header .in nav dl dd {
    display: none;
  }
  header .in nav dl dd ul {
    margin-top: 4rem;
  }
  .buttons {
    display: block;
    margin-top: 5rem;
    padding: 0;
  }
  .buttons .button {
    margin: 0 auto;
  }
  .buttons .button + .button {
    margin-top: 1rem;
  }
}



/* ----------------------------------
mv
---------------------------------- */
.mv {
  position: relative;
}
.mv picture {
  position: relative;
  overflow: hidden;
  display: block;
  height: 80rem;
  width: 100%;
}
.mv picture img,
.mv picture source {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv .mv_ttl {
  position: absolute;
  top: 21.6rem;
  left: 50%;
  font-size: 10rem;
  font-style: italic;
  font-weight: var(--bold);
  letter-spacing: -0.05em;
  line-height: 1.12;
  text-align: center;
  transform: translateX(-50%);
  background: var(--color-gr-pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mv .txt_wrap {
  position: relative;
  margin-top: -18rem;
  padding: 6.5rem 0 7rem;
  text-align: center;
}
.mv .txt_wrap::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/mv_txt_bg.png) center/cover no-repeat;
  opacity: 0.9;
}
.mv .txt_wrap .lead {
  position: relative;
  margin-bottom: 3.8rem;
  padding-bottom: 3.5rem;
  font-size: 3.2rem;
  font-weight: var(--bold);
  line-height: 1.3125;
  letter-spacing: 0.05em;
  color: var(--color-white);
  z-index: 1;
}
.mv .txt_wrap .lead::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  content: "";
  display: block;
  width: 4rem;
  height: 0.2rem;
  background: var(--color-white);
  transform: translateX(-50%);
}
.mv .txt_wrap .txt {
  position: relative;
  color: var(--color-white);
  z-index: 1;
}
@media screen and (min-width: 1351px) {
  .mv picture {
    height: calc(800 / 1351 * 100vw);
  }
  .mv .mv_ttl {
    font-size: calc(100 / 1351 * 100vw);
    top: calc(216 / 1351 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  .mv .txt_wrap::after {
    background-image: url(../img/mv_txt_bg_sp.png);
  }
  .mv picture {
    position: static;
    height: auto;
  }
  .mv picture img, 
  .mv picture source {
    position: static;
    height: auto;
  }
  .mv .mv_ttl {
    position: static;
    padding: 2.8rem 0 2.5rem;
    font-size: 4.4rem;
    transform: unset;
  }
  .mv .txt_wrap {
    padding: 4rem 2.5rem;
    border-radius: 1rem;
    margin: 0 1.5rem;
    overflow: hidden;
  }
  .mv .txt_wrap .lead {
    padding-bottom: 2.5rem;
    margin-bottom: 3.7rem;
    font-size: 2.2rem;
    line-height: 1.5;
  }
  .mv .txt_wrap .txt {
    text-align: left;
    font-weight: var(--regular);
  }
}


/* ----------------------------------
movies
---------------------------------- */
.movies {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  max-width: 160rem;
  margin: 0 auto;
  padding: 9rem 3rem 11.9rem;
}
.movies .item {
  width: calc(33.33% - (3rem * 2 / 3));
}
.movies .item .ttl_h3 {
  margin-bottom: 2.6rem;
  text-align: center;
}
.movies .item .ttl_h3 img {
  height: 2.6rem;
  width: auto;
  margin: 0 auto;
}

.movie {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.5634;
  border-radius: 1rem;
  overflow: hidden;
}
.player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.thumb,
.thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
.thumb::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  width: 8rem;
  height: 8rem;
  background: url(../img/movie_click_orange.png) center/contain no-repeat;
  transform: translate(-50%,-50%);
  z-index: 2;
  transition: .2s;
}
.thumb:hover {
  cursor: pointer;
}
.thumb:hover::after {
  opacity: 0.6;
}
@media screen and (max-width: 767px) {
  .movies {
    gap: 4rem;
    padding: 8rem 0;
    margin: 0 1.5rem;
  }
  .movies .item {
    width: 100%;
  }
  .movies .item .ttl_h3 {
    margin-bottom: 1.8rem;
  }
  .movies .item .ttl_h3 img {
    height: 2.3rem;
  }
  .thumb::after {
    width: 6rem;
    height: 6rem;
  }
}


/* ----------------------------------
anchor_links
---------------------------------- */
.anchor_links {
  position: relative;
  max-width: 160rem;
  margin: 0 auto 11.4rem;
  padding: 10rem 3rem 7rem;
}
.anchor_links::before {
  position: absolute;
  left: 50%;
  top: 0;
  content: "";
  display: block;
  width: calc(100% - 6rem);
  height: 100%;
  border-radius: 1rem;
  background: url(../img/anchor_links_bg.jpg) center/cover no-repeat;
  transform: translateX(-50%);
  z-index: -1;
}
.anchor_links .df_ttl {
  padding: 0;
}
.anchor_links .df_ttl .ttl_sub {
  margin-bottom: 2rem;
  font-family: var(--font-en);
  font-size: 1.6rem;
  color: #e50012;
  letter-spacing: 0.2em;
}
.anchor_links .df_ttl .ttl_h2 {
  font-size: 6rem;
  line-height: 1.3;
}
.anchor_links .txt {
  margin-top: 4.8rem;
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.6;
}
.anchor_links .list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 108rem;
  margin: 0 auto;
  gap: 5rem 18rem;
  padding-top: 9.4rem;
  text-align: center;
}
.anchor_links .list::after {
  position: absolute;
  top: -4rem;
  right: -8rem;
  content: "";
  display: block;
  width: 48.8rem;
  height: 14.1rem;
  background: url(../img/anchor_links_txt.png) center/contain no-repeat;
  z-index: -1;
}
.anchor_links .list a {
  position: relative;
  display: block;
  width: 24rem;
  padding: 28rem 0 5rem;
}
.anchor_links .list a::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 24rem;
  height: 24rem;
  border-radius: 100%;
  background: var(--color-white);
}
.anchor_links .list a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: "";
  display: block;
  width: 5rem;
  height: 3.2rem;
  background: url(../img/anchor_links_arrow1.png) center/contain no-repeat;
  transform: translateX(-50%);
}
.anchor_links .list a img {
  position: absolute;
  left: 50%;
  top: -1.4rem;
  width: 29.4rem;
  transform: translateX(-50%);
}

.anchor_links .list h3 {
  margin-bottom: 2.6rem;
  font-size: 3rem;
  font-weight: var(--bold);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--color-green2);
}
.anchor_links .list li:nth-of-type(2) h3 {
  color: var(--color-blue);
}
.anchor_links .list li:nth-of-type(2) a::after {
  background-image: url(../img/anchor_links_arrow2.png);
}
.anchor_links .list li:nth-of-type(3) h3 {
  color: var(--color-pink);
}
.anchor_links .list li:nth-of-type(3) a::after {
  background-image: url(../img/anchor_links_arrow3.png);
}
.anchor_links .list .txt {
  margin: 0;
  font-weight: var(--regular);
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .anchor_links {
    padding: 6rem 2rem 5rem;
    margin: 0 1.5rem 8rem;
  }
  .anchor_links::before {
    width: 100%;
    background-image: url(../img/anchor_links_bg_sp.jpg);
  }
  .anchor_links .df_ttl .ttl_sub {
    margin-bottom: 1.7rem;
    font-size: 1.2rem;
  }
  .anchor_links .df_ttl .ttl_h2 {
    font-size: 3rem;
  }
  .anchor_links .txt {
    margin-top: 4rem;
    text-align: left;
    font-size: 1.4rem;
  }
  .anchor_links .list {
    gap: 1rem;
    flex-wrap: wrap;
  }
  .anchor_links .list li {
    width: 100%;
  }
  .anchor_links .list a {
    width: 100%;
    padding: 1.6rem 6rem 1.6rem 12rem;
    background: var(--color-white);
    border-radius: 2rem;
  }
  .anchor_links .list a::before {
    content: none;
  }
  .anchor_links .list a img {
    width: 9rem;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
  }
  .anchor_links .list h3 {
    text-align: left;
    font-size: 2rem;
    margin-bottom: 1.3rem;
  }
  .anchor_links .list a::after {
    width: 3.2rem;
    height: 2rem;
    right: 1.5rem;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
  }
  .anchor_links .list::after {
    top: 0;
    right: -1.5rem;
    width: 25.4rem;
    height: 7.3rem;
  }
}



/* ----------------------------------
kv
---------------------------------- */
.kv {
  padding: 8rem 3rem 10rem;
}
.kv img {
  max-width: 154rem;
  margin: 0 auto;
}
.kv .kv_txt {
  max-width: 142.6rem;
  margin: -39.5rem auto 0;
}
.kv .kv_ttl {
  position: relative;
  width: max-content;
  margin-bottom: 10rem;
  font-size: 10rem;
  font-weight: var(--bold);
  letter-spacing: 0.05em;
  line-height: 1;
}
.kv .kv_txt .lead {
  margin-bottom: 4rem;
  font-size: 3.6rem;
  font-weight: var(--bold);
  line-height: 1.8;
}
.kv .kv_txt .txt {
  max-width: 89rem;
  font-weight: var(--regular);
  font-size: 1.8rem;
  color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .kv {
    padding: 6rem 1.5rem 8rem;
  }
  .kv .kv_txt {
    margin-top: -13rem;
  }
  .kv .kv_txt .txt {
    font-size: 1.5rem;
  }
  .kv .kv_ttl {
    margin-bottom: 10rem;
    font-size: 6rem;
    color: var(--color-txt) !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
  }
  .kv .kv_txt .lead {
    margin-bottom: 3.7rem;
    font-size: 2.4rem;
  }
}



/* ----------------------------------
merit
---------------------------------- */
.merit {
  padding: 8rem 0 12rem;
}
.merit .flex {
  position: relative;
  gap: 8rem;
  align-items: center;
  justify-content: space-between;
}
.merit .flex::before {
  position: absolute;
  content: "";
  display: block;
}
.merit .flex:nth-of-type(odd) {
  flex-direction: row-reverse;
}
.merit .flex + .flex {
  margin-top: 7rem;
}
.merit .flex_img {
  position: relative;
  overflow: hidden;
  height: 48rem;
  width: 60rem;
  border-radius: 1rem;
}
.merit .flex_img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.merit .flex_txt {
  position: relative;
  width: 60rem;
  margin-top: 4rem;
}
.merit .flex_txt h3 {
  position: absolute;
  left: -3rem;
}
.merit .flex_txt .lead {
  margin-bottom: 4rem;
  font-size: 3.6rem;
  font-weight: var(--bold);
  line-height: 1.8;
}
.merit .flex_txt .txt {
  position: relative;
  font-weight: var(--regular);
}
@media screen and (max-width: 767px) {
  .merit {
    padding: 6rem 0 8rem;
  }
  .merit .flex {
    display: block;
  }
  .merit .flex + .flex {
    margin-top: 5rem;
  }
  .merit .flex_img {
    width: 100%;
    height: 28.8rem;
  }
  .merit .flex_txt {
    padding: 0 1rem;
    margin-top: 6.5rem;
    width: 100%;
  }
  .merit .flex_txt .txt {
    font-size: 1.4rem;
  }
  .merit .flex_txt .lead {
    margin-bottom: 3.7rem;
    font-size: 2.4rem;
  }
  .merit .flex_txt h3 {
    left: 0;
  }
}



/* ----------------------------------
video
---------------------------------- */
.video {
  padding: 6rem 0 7rem;
  max-width: 128rem;
  margin: 0 auto;
  background: var(--color-gray);
  border-radius: 1rem;
}
.video .df_ttl .ttl_bg {
  color: var(--color-white) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  opacity: 0.7;
}
.video .df_ttl {
  padding-bottom: 5rem;
}
.video .movie {
  position: relative;
  overflow: hidden;
  max-width: 80.8rem;
  margin: 0 auto;
}
.video .movie + .movie {
  margin-top: 4rem;
}
.video .button {
  margin: 5rem auto 0;
}
@media screen and (max-width: 767px) {
  .video {
    margin: 0 1.5rem;
    padding: 5rem 2rem 6rem;
  }
  .video .in {
    margin: 0;
  }
  .video .button {
    margin-top: 4rem;
  }
}



/* ----------------------------------
job
---------------------------------- */
.job {
  padding: 8rem 0 6rem;
}
.job .flex {
  gap: 8rem;
  align-items: flex-start;
  justify-content: space-between;
}
.job .flex_txt {
  position: relative;
  width: 60rem;
}
.job .flex_txt img {
  width: 54.9rem;
  margin: 4rem auto 0;
}
.job .flex_txt .lead {
  margin-bottom: 4rem;
  font-size: 3.6rem;
  font-weight: var(--bold);
  line-height: 1.4;
}
.job .flex_txt .txt {
  font-weight: var(--regular);
}
.job .flex_img {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: 60rem;
}
.job .flex_img li {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: 29rem;
  padding: 1rem 1.2rem;
  background: var(--color-green);
  border-radius: 5rem;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  color: var(--color-white);
  line-height: 1;
}
.job .flex_img li img {
  width: 6rem;
  height: 6rem;
}
.job .business {
  position: relative;
  padding-top: 4rem;
}
.job .business_ttl {
  margin-bottom: 3rem;
}
.job .business_ttl img {
  display: block;
  height: 2.7rem;
  width: auto;
  margin: 0 auto;
}
.job .business .swiper {
  overflow: visible;
}
.job .business .swiper-wrapper {
  display: flex;
}
.job .business .swiper-slide {
  position: relative;
  padding-top: 12rem;
  width: 20rem;
  min-width: 20rem;
  margin: 0 1rem;
  border-radius: 1rem;
  border: 1px solid var(--color-puple);
  background: var(--color-bg-puple);
  overflow: hidden;
}
.job .business .swiper-slide img {
  position: absolute;
  left: 50%;
  top: 2rem;
  width: 8rem;
  transform: translateX(-50%);
}
.job .business .swiper-slide p {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  width: 100%;
  background: var(--color-puple);
  font-size: 2rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  color: var(--color-white);
  text-align: center;
}
.job .business .swiper-buttons {
  position: absolute;
  top: -5.3rem;
  left: 50%;
  width: 25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  transform: translateX(-50%);
}
.job .business .swiper-buttons p {
  width: 1.3rem;
  cursor: pointer;
  transition: .3s;
}
.job .business .swiper-buttons p:hover {
  opacity: 0.58;
}
@media screen and (max-width: 767px) {
  .job {
    padding: 6rem 0;
  }
  .job .flex {
    display: block;
  }
  .job .flex_txt {
    width: 100%;
  }
  .job .flex_txt .lead {
    font-size: 2.4rem;
    margin-top: 1.5rem;
    margin-bottom: 3.8rem;
    text-align: center;
  }
  .job .flex_txt img {
    width: 31.1rem;
  }
  .job .flex_img {
    width: 100%;
    gap: 1rem;
    margin-top: 5rem;
  }
  .job .flex_img li {
    gap: 1rem;
    padding: 0.5rem 0.6rem;
    width: calc(50% - 0.5rem);
    font-size: 1.8rem;
  }
  .job .flex_img li img {
    width: 5rem;
    height: 5rem;
  }
  .job .flex_txt .txt {
    font-size: 1.4rem;
  }
  .job .business_ttl {
    margin-bottom: 2.2rem;
  }
  .job .business_ttl img {
    height: 2rem;
  }
  .job .business .swiper-slide {
    margin: 0 0.5rem;
    border-width: 0.2rem;
  }
  .job .business .swiper-slide p {
    font-size: 1.8rem;
  }
  .job .business .swiper-buttons {
    width: 17.5rem;
    top: -4.3rem;
  }
}



/* ----------------------------------
imgbanner
---------------------------------- */
.imgbanner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(400 / 1600 * 100vw);
  min-height: 40rem;
}
.imgbanner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .imgbanner {
    height: 20rem;
    min-height: 20rem;
  }
}



/* ----------------------------------
why
---------------------------------- */
.why {
  padding: 8rem 0 12rem;
}
.why .list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 1.6rem;
}
.why .list + .list {
  margin-top: 5rem;
}
.why .list::after {
  position: absolute;
  content: "";
  display: block;
  z-index: -1;
}
.why .list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 6.5rem 2.5rem 3.5rem;
  border-radius: 2rem;
  width: calc(33.33% - (1.6rem * 2 / 3));
  background: var(--color-gray);
}
.why .list li .flex_img {
  width: 12.6rem;
}
.why .list li .flex_txt {
  width: 22rem;
}
.why .list li .flex_txt h3 {
  font-size: 2rem;
  font-weight: var(--bold);
  line-height: 1.4;
}
.why .list li .flex_txt h3 img {
  position: absolute;
  top: 1.3rem;
  left: 1.6rem;
  height: 5.75rem;
  width: auto;
}
.why .list li .flex_txt .txt {
  margin-top: 2rem;
  font-weight: var(--regular);
  font-size: 1.5rem;
  line-height: 1.6;
}
.why .button {
  margin: 5rem auto 0;
}
@media screen and (max-width: 767px) {
  .why {
    padding: 6rem 0 8rem;
  }
  .why .list {
    gap: 4rem;
  }
  .why .list li {
    width: 100%;
    padding: 3rem 2rem;
  }
  .why .list li .flex_img {
    width: 10rem;
  }
  .why .list li .flex_txt {
    width: 20rem;
  }
  .why .list li .flex_txt h3 {
    font-size: 1.8rem;
  }
  .why .list li .flex_txt .txt {
    margin-top: 1.5rem;
    font-size: 1.4rem;
  }
  .why .list li .flex_txt h3 img {
    top: -1.9rem;
    left: 1.1rem;
  }
  .why .button {
    margin-top: 4rem;
  }
}



/* ----------------------------------
faq
---------------------------------- */
.faq {
  padding: 6rem 0 17rem;
  max-width: 128rem;
  margin: 0 auto;
  border-radius: 1rem;
}
.faq .df_ttl .ttl_bg {
  color: var(--color-white) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  opacity: 0.7;
}
.faq .in {
  max-width: 84rem;
}
.faq .in dl {
  border-top: 1px solid var(--color-white);
}
.faq .in dl:last-of-type {
  border-bottom: 1px solid var(--color-white);
}
.faq .in dt {
  position: relative;
  padding: 3rem 6rem;
  font-size: 1.5rem;
  line-height: 2;
  cursor: pointer;
}
.faq .in dt::before {
  position: absolute;
  content: "";
  display: block;
}
.faq .in dt::before {
  right: 2rem;
  top: 50%;
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  transform: translateY(-50%);
  background: url(../img/icon_accordion_koumuin.png) center/contain no-repeat;
  transition: .3s;
}
.faq .in dt.open::before {
  transform: translateY(-50%) rotate(180deg);
}
.faq .in dd {
  display: none;
  position: relative;
  padding: 2rem 3rem 2rem 7rem;
  margin: 0 2rem 3rem;
  background: var(--color-white);
  border-radius: 1rem;
  font-size: 1.5rem;
  line-height: 2;
}
.faq .in dt span,
.faq .in dd span {
  position: absolute;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
}
.faq .in dt span {
  left: 2.4rem;
  top: 2.8rem;
}
.faq .in dd span {
  left: 3rem;
}
@media screen and (max-width: 767px) {
  .faq {
    padding: 5rem 2rem 11rem;
    margin: 0 1.5rem;
  }
  .faq .in {
    max-width: none;
    margin: 0;
  }
  .faq .in dt {
    padding: 2.4rem 4rem;
    font-size: 1.4rem;
  }
  .faq .in dd {
    padding: 2rem 2rem 3rem;
    margin: 0 auto 2.4rem;
    font-size: 1.4rem;
  }
  .faq .in dt span {
    left: 0;
    top: 2rem;
  }
  .faq .in dd span {
    position: static;
    display: block;
    margin-bottom: 1rem;
  }
  .faq .in dt::before {
    top: 2.8rem;
    right: 0;
    transform: unset;
  }
  .faq .in dt.open::before {
    transform: rotate(180deg);
  }
}



/* ----------------------------------
cv
---------------------------------- */
.cv {
  background: url(../img/koumuin_cv_bg.png) center bottom 5.8rem/52.9rem auto no-repeat;
}
.cv .images {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 112rem;
  margin: -9rem auto 0;
}
.cv .images img {
  width: 20.8rem;
}
.cv .images img:nth-of-type(2) {
  margin-top: 3rem;
}
.cv .images img:nth-of-type(3) {
  margin-top: 6rem;
}
.cv .images img:nth-of-type(4) {
  margin-top: 9rem;
}
.cv .images img:nth-of-type(5) {
  margin-top: 12rem;
}
.cv .lead {
  margin-top: 6rem;
  font-size: 4.4rem;
  font-weight: var(--bold);
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
}
.cv .button {
  margin: 5rem auto 0;
}
@media screen and (max-width: 767px) {
  .cv .images {
    max-width: 32rem;
    margin-top: -8rem;
    gap: 0 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cv .images img {
    width: 10rem;
  }
  .cv .images img:nth-of-type(2) {
    margin-top: 2rem;
  }
  .cv .images img:nth-of-type(3) {
    margin-top: 4rem;
  }
  .cv .images img:nth-of-type(4) {
    margin-top: -1rem;
  }
  .cv .images img:nth-of-type(5) {
    margin-top: 1rem;
  }
  .cv .lead {
    font-size: 3rem;
  }
  .cv .button {
    margin-top: 4rem;
  }
}



/* ----------------------------------
message
---------------------------------- */
.message {
  padding: 12rem 0 14rem;
  background: url(../img/message_bg.jpg) center bottom/cover no-repeat;
}
.message .df_ttl {
  padding: 0;
}
.message .df_ttl .ttl_sub {
  margin-bottom: 3.8rem;
  font-size: 1.6rem;
  font-family: var(--font-en);
  letter-spacing: 0.2em;
  color: #e50012;
}
.message .df_ttl .ttl_h2 {
  font-size: 5rem;
}
.message .txt {
  position: relative;
  padding-top: 9.8rem;
  font-weight: var(--regular);
  text-align: center;
}
.message .txt::after {
  position: absolute;
  top: -4.7rem;
  right: 10rem;
  content: "";
  display: block;
  width: 43rem;
  height: 12rem;
  background: url(../img/message_txt.png) center/contain no-repeat;
}
.message .buttons {
  margin-top: 5rem;
  padding: 0;
}
.message .button {
  background: var(--color-gr-pink);
}
@media screen and (max-width: 767px) {
  .message {
    padding: 7rem 1rem 10rem;
  }
  .message .df_ttl .ttl_sub {
    margin-bottom: 3.4rem;
    font-size: 1.2rem;
  }
  .message .df_ttl .ttl_h2 {
    font-size: 2.8rem;
  }
  .message .txt {
    padding-top: 11.8rem;
    text-align: left;
    font-size: 1.4rem;
  }
  .message .txt::after {
    width: 29.8rem;
    height: 8.4rem;
    top: -0.3rem;
    right: -1.5rem;
  }
}




/* ----------------------------------
footer
---------------------------------- */
footer {
  text-align: center;
  padding: 4rem 0 5rem;
  background: var(--color-white);
}
footer .logo {
  display: block;
  width: 38rem;
  margin: 0 auto 4rem;
}
footer p {
  font-size: 1.8rem;
  font-weight: var(--bold);
  letter-spacing: 0.05em;
  line-height: 1;
}
footer p.copy {
  margin-top: 2.5rem;
  font-size: 1.2rem;
  font-weight: var(--regular);
}
footer .button {
  margin: 5rem auto;
  background: var(--color-gr-pink);
}
@media screen and (max-width: 767px) {
  footer .logo {
    width: 30rem;
  }
}




/* ----------------------------------
公務員
---------------------------------- */
#public-servant .kv {
  background: url(../img/koumuin_kv_bg.jpg) center/cover no-repeat;
}
#public-servant .kv .kv_ttl,
#public-servant .df_ttl .ttl_bg,
#public-servant .cv .lead,
#public-servant .job .flex_txt .lead  {
  background: var(--color-gr-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#public-servant .df_ttl .ttl_sub {
  color: var(--color-green2);
}
#public-servant .button {
  background: var(--color-gr-green);
}
/*20250522　OC追加*/
#public-servant .button .oc {
  background: var(--color-gr-blue);
}
#public-servant .why .list li:nth-of-type(odd) {
  background: var(--color-bg-green2);
}
#public-servant .faq {
  background: var(--color-bg-green);
}
#public-servant .faq dt span,
#public-servant .why .list li .flex_txt h3 {
  color: var(--color-green2);
}
#public-servant .merit span.obi {
  color: var(--color-white);
}
#public-servant .merit span.obi.active::before {
  background: var(--color-gr-green);
}
#public-servant .merit .flex_txt h3 {
  top: -6.6rem;
  width: 18rem;
}
#public-servant .merit .flex:nth-of-type(3) .flex_txt h3 {
  top: -6.1rem;
  width: 15.45rem;
}
#public-servant .merit .flex:nth-of-type(4) .flex_txt h3 {
  top: -6.7rem;
  width: 18.4rem;
}
#public-servant .merit .flex:nth-of-type(2)::before {
  bottom: -12.8rem;
  left: -7.3rem;
  width: 32.3rem;
  height: 27rem;
  background: url(../img/koumuin_merit_bg1.png) center/contain no-repeat;
} 
#public-servant .merit .flex:nth-of-type(3)::before {
  bottom: -16.5rem;
  right: -17.4rem;
  width: 30.9rem;
  height: 28.1rem;
  background: url(../img/koumuin_merit_bg2.png) center/contain no-repeat;
} 
#public-servant .merit .flex:nth-of-type(4)::before {
  bottom: -13.3rem;
  left: 47.5rem;
  width: 31.7rem;
  height: 25.5rem;
  background: url(../img/koumuin_merit_bg3.png) center/contain no-repeat;
} 
#public-servant .job .flex_txt::before {
  position: absolute;
  top: -17.6rem;
  left: -15.9rem;
  content: "";
  display: block;
  width: 32.3rem;
  height: 28.1rem;
  background: url(../img/koumuin_job_bg.png) center/contain no-repeat;
  z-index: -1;
}
#public-servant .why .list::after {
  bottom: -22.2rem;
  right: -26.8rem;
  width: 47.6rem;
  height: 45.7rem;
  background: url(../img/koumuin_why_bg.png) center/contain no-repeat;
}
#public-servant .why .in {
  position: relative;
}
#public-servant .why .in::after {
  position: absolute;
  content: "";
  top: -16.6rem;
  left: -32rem;
  display: block;
  width: 45rem;
  height: 35rem;
  background: url(../img/koumuin_why_bg1.png) center/contain no-repeat;
  z-index: -1;
}
#public-servant .thumb::after {
  background-image: url(../img/movie_click_green.png);
}
@media screen and (max-width: 767px) {
  #public-servant .kv {
    background-image: url(../img/koumuin_kv_bg_sp.jpg);
  }
  #public-servant .merit .flex_txt h3 {
    width: 13.3rem;
    top: -4.4rem;
  }
  #public-servant .merit .flex:nth-of-type(3) .flex_txt h3 {
    width: 12.147rem;
    top: -4rem;
  }
  #public-servant .merit .flex:nth-of-type(4) .flex_txt h3 {
    width: 13.5rem;
    top: -4.4rem; 
  }
  #public-servant .merit .flex:nth-of-type(2)::before {
    width: 24rem;
    height: 17rem;
    bottom: auto;
    top: 26.4rem;
  }
  #public-servant .merit .flex:nth-of-type(3)::before {
    bottom: auto;
    top: 18.8rem;
    right: -13.4rem;
    width: 28.2rem;
    height: 22.2rem;
  }
  #public-servant .merit .flex:nth-of-type(4)::before {
    width: 30.2rem;
    height: 24.3rem;
    bottom: auto;
    left: -11rem;
    top: 20.2rem; 
  }
  #public-servant .job .flex_txt::before {
    top: -6.2rem;
    width: 23.6rem;
    height: 18.7rem;
    left: -7.9rem;
  }
  #public-servant .why .in::after {
    top: -10.4rem;
    left: -11rem;
    width: 22.9rem;
    height: 17.7rem;
  }
  #public-servant .why .list::after {
    width: 31.7rem;
    height: 30.7rem;
    bottom: -16.9rem;
    right: -13.8rem;
  }
  #public-servant .cv {
    background: url(../img/koumuin_cv_bg.png) center bottom 7.5rem/27.5rem auto no-repeat;
  }
}


/* ----------------------------------
公認会計⼠
---------------------------------- */
#accountant .kv {
  background: url(../img/kaikeishi_kv_bg.jpg) center/cover no-repeat;
}
#accountant .kv .kv_ttl,
#accountant .df_ttl .ttl_bg,
#accountant .cv .lead,
#accountant .job .flex_txt .lead  {
  background: var(--color-gr-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#accountant .df_ttl .ttl_sub {
  color: var(--color-blue);
}
#accountant .button {
  background: var(--color-gr-blue);
}
/*20250522　OC追加*/
#accountant .button_oc {
  background: var(--color-gr-pink);
}
#accountant .why .list li:nth-of-type(odd) {
  background: var(--color-bg-blue);
}
#accountant .faq {
  background: var(--color-bg-puple);
}
#accountant .faq dt span,
#accountant .why .list li .flex_txt h3 {
  color: var(--color-blue);
}
#accountant .faq dt::before {
  background-image: url(../img/icon_accordion_kaikeishi.png);
}
#accountant .merit span.obi {
  color: var(--color-white);
}
#accountant .merit span.obi.active::before {
  background: var(--color-gr-blue);
}
#accountant .merit .flex_txt h3 {
  top: -6.6rem;
  width: 18rem;
}
#accountant .merit .flex:nth-of-type(3) .flex_txt h3 {
  top: -6.9rem;
  width: 20.7rem;
}
#accountant .merit .flex:nth-of-type(4) .flex_txt h3 {
  top: -6.4rem;
  width: 16rem;
}
#accountant .merit .flex:nth-of-type(2)::before {
  bottom: -11.3rem;
  left: -14.5rem;
  width: 34.7rem;
  height: 34.2rem;
  background: url(../img/kaikeishi_merit_bg1.png) center/contain no-repeat;
} 
#accountant .merit .flex:nth-of-type(3)::before {
  bottom: -11.2rem;
  right: -26.1rem;
  width: 37.9rem;
  height: 35.2rem;
  background: url(../img/kaikeishi_merit_bg2.png) center/contain no-repeat;
} 
#accountant .merit .flex:nth-of-type(4)::before {
  bottom: -15.4rem;
  left: 40.9rem;
  width: 37.1rem;
  height: 33.3rem;
  background: url(../img/kaikeishi_merit_bg3.png) center/contain no-repeat;
}
#accountant .job .flex_img {
  position: relative;
}
#accountant .job .flex_img::after {
  position: absolute;
  top: -3.9rem;
  left: 0;
  content: "";
  display: block;
  width: 64.8rem;
  height: 50rem;
  background: url(../img/kaikeishi_jpb_bg.png) center/contain no-repeat;
  z-index: -1;
}
#accountant .why .in {
  position: relative;
}
#accountant .why .in::after {
  position: absolute;
  content: "";
  top: -34rem;
  left: -23.7rem;
  display: block;
  width: 47.4rem;
  height: 55.5rem;
  background: url(../img/kaikeishi_why_bg2.png) center/contain no-repeat;
  z-index: -1;
}
#accountant .why .list::after {
  bottom: -14.2rem;
  right: -24rem;
  width: 38.7rem;
  height: 37.9rem;
  background: url(../img/kaikeishi_why_bg1.png) center/contain no-repeat;
}
#accountant .cv {
  background: url(../img/kaikeishi_cv_bg.png) center bottom 3.3rem/64.8rem auto no-repeat;
}
#accountant .thumb::after {
  background-image: url(../img/movie_click_blue.png);
}
#accountant .anime.mask::after {
  background: var(--color-gr-blue);
}
@media screen and (max-width: 767px) {
  #accountant .kv {
    background-image: url(../img/kaikeishi_kv_bg_sp.jpg);
  }
  #accountant .kv .kv_txt {
    margin-top: -18.5rem;
  }
  #accountant .kv .kv_ttl {
    margin-bottom: 15.3rem;
  }
  #accountant .merit .flex_txt h3 {
    width: 13.4rem;
    top: -4.8rem;
  }
  #accountant .merit .flex:nth-of-type(3) .flex_txt h3 {
    width: 15.5rem;
    top: -5rem;
  }
  #accountant .merit .flex:nth-of-type(4) .flex_txt h3 {
    width: 11.8rem;
    top: -4.6rem;
  }
  #accountant .job .flex_img {
    width: 32.9rem;
    margin-left: auto;
    margin-right: auto;
  }
  #accountant .merit .flex:nth-of-type(2)::before {
    width: 21.9rem;
    height: 19.2rem;
    bottom: auto;
    top: 23.4rem;
    left: -5.5rem;
  }
  #accountant .merit .flex:nth-of-type(3)::before {
    width: 22.7rem;
    height: 19.9rem;
    bottom: auto;
    top: 19.7rem;
    right: -10.5rem;
  }
  #accountant .merit .flex:nth-of-type(4)::before {
    width: 20.2rem;
    height: 18.2rem;
    bottom: auto;
    top: 23.7rem;
    left: -7.5rem;
  }
  #accountant .job .flex_img::after {
    top: -3rem;
    left: -1.4rem;
    width: 35.7rem;
    height: 27.3rem;
  }
  #accountant .why .in::after {
    top: -18.4rem;
    left: -10.7rem;
    width: 24.7rem;
    height: 29rem;
  }
  #accountant .why .list::after {
    width: 29rem;
    height: 25.2rem;
    bottom: -15.6rem;
    right: -9rem;
  }
  #accountant .cv {
    background: url(../img/kaikeishi_cv_bg.png) center bottom 14.9rem/39rem auto no-repeat;
  }
}

/* ----------------------------------
税理士
---------------------------------- */
#tax-accountant .kv {
  background: url(../img/zeirishi_kv_bg.jpg) center/cover no-repeat;
}
#tax-accountant .kv .kv_ttl,
#tax-accountant .df_ttl .ttl_bg,
#tax-accountant .cv .lead,
#tax-accountant .job .flex_txt .lead  {
  background: var(--color-gr-pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#tax-accountant .df_ttl .ttl_sub {
  color: var(--color-pink);
}
#tax-accountant .button {
  background: var(--color-gr-pink);
}
/*20250522　OC追加*/
#tax-accountant .button .oc {
  background: var(--color-gr-green);
}
#tax-accountant .why .list li:nth-of-type(odd) {
  background: var(--color-bg-pink);
}
#tax-accountant .faq {
  background: var(--color-bg-orange);
}
#tax-accountant .faq dt span,
#tax-accountant .why .list li .flex_txt h3 {
  color: var(--color-pink);
}
#tax-accountant .faq dt::before {
  background-image: url(../img/icon_accordion_zeirishi.png);
}
#tax-accountant .merit span.obi {
  color: var(--color-white);
}
#tax-accountant .merit span.obi.active::before {
  background: var(--color-gr-pink);
}
#tax-accountant .job .business .swiper-slide {
  border-color: var(--color-orange);
  background: var(--color-bg-orange);
}
#tax-accountant .job .business .swiper-slide p {
  background: var(--color-orange);
}
#tax-accountant .merit .flex_txt h3 {
  top: -5.3rem;
  width: 18.062rem;
}
#tax-accountant .merit .flex:nth-of-type(3) .flex_txt h3 {
  top: -7.1rem;
  width: 27.707rem;
}
#tax-accountant .merit .flex:nth-of-type(4) .flex_txt h3 {
  top: -6.4rem;
  width: 18.364rem;
}
#tax-accountant .merit .flex:nth-of-type(2)::before {
  bottom: -13.7rem;
  left: -27.7rem;
  width: 51.8rem;
  height: 24.6rem;
  background: url(../img/zeirishi_merit_bg1.png) center/contain no-repeat;
} 
#tax-accountant .merit .flex:nth-of-type(3)::before {
  bottom: -11.8rem;
  right: -20.4rem;
  width: 31.5rem;
  height: 27.4rem;
  background: url(../img/zeirishi_merit_bg2.png) center/contain no-repeat;
} 
#tax-accountant .merit .flex:nth-of-type(4)::before {
  bottom: -12rem;
  left: 54.1rem;
  width: 30.5rem;
  height: 22.8rem;
  background: url(../img/zeirishi_merit_bg3.png) center/contain no-repeat;
}
#tax-accountant .why .in {
  position: relative;
}
#tax-accountant .why .in::after {
  position: absolute;
  content: "";
  top: -13.7rem;
  left: -22rem;
  display: block;
  width: 30.9rem;
  height: 27.4rem;
  background: url(../img/zeirishi_why_bg1.png) center/contain no-repeat;
  z-index: -1;
}
#tax-accountant .why .list::after {
  bottom: -18.2rem;
  right: -29.6rem;
  width: 47.7rem;
  height: 38rem;
  background: url(../img/zeirishi_why_bg2.png) center/contain no-repeat;
}
#tax-accountant .job .flex_img {
  position: relative;
}
#tax-accountant .job .flex_img img {
  width: 47.4rem;
  margin: 0 auto;
}
#tax-accountant .job .flex_img::after {
  position: absolute;
  top: -5.9rem;
  left: 3.1rem;
  content: "";
  display: block;
  width: 55.4rem;
  height: 50.1rem;
  background: url(../img/zeirishi_job_bg.png) center/contain no-repeat;
  z-index: -1;
}
#tax-accountant .cv {
  background: url(../img/zeirishi_cv_bg.png) center bottom 4rem/58.1rem auto no-repeat;
}
#tax-accountant .anime.mask::after {
  background: var(--color-gr-pink);
}
@media screen and (max-width: 767px) {
  #tax-accountant .kv {
    background-image: url(../img/zeirishi_kv_bg_sp.jpg);
  }
  #tax-accountant .job .flex_img {
    width: 26.8rem;
    margin-left: auto;
    margin-right: auto;
  }
  #tax-accountant .job .flex_img img {
    width: 100%;
  }
  #tax-accountant .job .flex_img::after {
    width: 32rem;
    height: 29rem;
    top: -1.7rem;
    left: -2.5rem;
  }
  #tax-accountant .merit .flex_txt h3 {
    width: 13.457rem;
    top: -4.5rem;
  }
  #tax-accountant .merit .flex:nth-of-type(3) .flex_txt h3 {
    width: 20.905rem;
    top: -5.4rem;
  }
  #tax-accountant .merit .flex:nth-of-type(4) .flex_txt h3 {
    width: 13.683rem;
    top: -4.3rem;
  }
  #tax-accountant .merit .flex:nth-of-type(2)::before {
    width: 35.7rem;
    height: 19.5rem;
    bottom: auto;
    top: 25.6rem;
    left: -20.7rem;
  }
  #tax-accountant .merit .flex:nth-of-type(3)::before {
    width: 25rem;
    height: 20.1rem;
    bottom: auto;
    top: 21rem;
    right: -10.7rem;
  }
  #tax-accountant .merit .flex:nth-of-type(4)::before {
    width: 30.2rem;
    height: 22.5rem;
    bottom: auto;
    top: 21.7rem;
    left: -12.7rem;
  }
  #tax-accountant .why .in::after {
    width: 31.2rem;
    height: 25.1rem;
    top: -15rem;
    left: -15rem;
  }
  #tax-accountant .why .list::after {
    width: 27.9rem;
    height: 21.9rem;
    bottom: -12.1rem;
    right: -11.6rem;
  }
  #tax-accountant .cv {
    background: url(../img/zeirishi_cv_bg.png) center bottom 12.4rem/36.3rem auto no-repeat;
  }
}


.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}
/* アニメーション */
.anime.slideUp,
.anime.slideLeft,
.anime.fadeIn {
  opacity: 0;
}
.anime.slideUp.active {
  animation: slideUp .5s .05s ease-out forwards;
}
.anime.slideLeft.active {
  animation: slideLeft .5s .05s ease-out forwards;
}
.anime.fadeIn.active {
  animation: fadeIn .5s .2s ease-out forwards;
}
.anime.scaleDown.active img {
  animation: img-scale 7s ease-out forwards;
}
span.anime.slideLeft {
  display: inline-block;
}
.anime.mask {
  position: relative;
  overflow: hidden;
}
.anime.mask::after {
  background: var(--color-gr-green);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 100%);
}
.anime.mask img {
  opacity: 0;
  transition: opacity 0ms 450ms;
}
.anime.mask.active img {
  opacity: 1;
}
.anime.mask.active::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(-2rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes img-scale {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes obi {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}
@keyframes mask-bg {
  0% {
    transform: translate(-101%, 0);
  }
  40%, 60% {
    transform: translate(0%, 0);
  }
  100% {
    transform: translate(100%, 0);
  }
}