@charset "UTF-8";

:root {
  --color: #333;
  --font-family: 'Kiwi Maru', 'M PLUS 1', "Sawarabi Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

body {
  background-color: #F9F5EC;
}

body.front-top-page {
  background-color: #fff;
}

.navi-in>ul li:nth-child(5n-3) .caption-wrap .item-label:after,
.navi-footer-in>ul li:nth-child(5n-3)::after {
  background-color: var(--blue);
}

.navi-in>ul li:nth-child(5n-2) .caption-wrap .item-label:after,
.navi-footer-in>ul li:nth-child(5n-2)::after {
  background-color: var(--yellow);
}

.navi-in>ul li:nth-child(5n-1) .caption-wrap .item-label:after,
.navi-footer-in>ul li:nth-child(5n-1)::after {
  background-color: var(--green);
}

.navi-in>ul li:nth-child(5n) .caption-wrap .item-label:after,
.navi-footer-in>ul li:nth-child(5n)::after {
  background-color: var(--orange);
}

.mv::after {
  background-image: url('https://irodori-career.net/wp/wp-content/themes/cocoon-child-master/mv_cover4.png');
}

.section.profile {
  padding-top: 1rem;
}

.section.profile:before,
.section.book:after {
  background-image: url(https://irodori-career.net/wp/wp-content/themes/cocoon-child-master/sec_foot.png);
}

.section.profile:before,
.section.book:after {
  content: "";
  height: max(7rem, 140px);
  width: 100%;
  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  z-index: -1;
}

.section.profile:before {
  top: -10.04vw;
  left: 0;
  width: 100%;
  height: 10.1vw;
}

.section.book:after {
  bottom: -8.04vw;
  left: 0;
  width: 100%;
  height: 8.1vw;
  transform: scaleY(-1);
}

.book.section {
  margin-bottom: 8rem;
}

.pro_license li {
  background: #ffe48d;
  color: #000;
}

.contact_bg::before {
  background-color: rgb(47 47 47 / 80%);
}

.contact.section .wrap .btn_wrap a {
  background-color: var(--yellow);
  color: #000;
  border: var(--yellow) 2px solid;
}

.contact.section .wrap .btn_wrap a:hover {
  background-color: #fff;
}

#footer {
  background-color: #F7F3EA;
}

.move.active.move_title.t_orange::before {
  animation: left_top 1s forwards;
}

.move.active.move_title.t_blue::before {
  animation: left_btm 1s forwards;
}

.move.active.move_title.t_l_green::before {
  animation: right_top 1s forwards;
}

.move.active.move_title.t_green::before {
  animation: right_btm 1s forwards;
}

.move_title {
  position: relative;
  z-index: 0;
}

.move_title::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: 10.91vw 6.81vw;
  opacity: 0;
}

.page .move_title::before,
.single .move_title::before {
  opacity: 1;
}

.move_title.t_orange::before {
  background: url("mark_orange.svg") no-repeat;
  top: -80%;
  left: 46%;
  width: 9rem;
  height: 6.7rem;
}

.move_title.t_green::before {
  background: url("mark_green.svg") no-repeat;
  top: 10%;
  left: 50%;
  width: 9.5rem;
  height: 5.5rem;
}

.move_title.t_l_green::before {
  background: url("mark_l_green.svg") no-repeat;
  top: -55%;
  left: 36%;
  width: 9rem;
  height: 5.5rem;
}

.move_title.t_red::before {
  background: url("mark_red.svg") no-repeat;
  top: -62%;
  left: 25%;
}

.move_title.t_blue::before {
  background: url("mark_blue.svg") no-repeat;
  top: -80%;
  left: 25%;
  width: 11rem;
  height: 7rem;
}

.move_title.t_yellow::before {
  background: url("mark_yellow.svg") no-repeat;
  top: -39%;
  left: 47%;
  width: 9rem;
  height: 5rem;
}

.fullwidth-bg:before {
  background-color: #F4EDDE;
}

.fullwidth-bg.white:before {
  background-color: #fff;
}

.page .article ul.wp-block-list li::before,
.single .article ul.wp-block-list li::before {
  color: var(--orange);
}

.page .article h2.profile_title {
  margin-bottom: 5px;
}

.page .article h2.profile_title+p {
  margin-bottom: 2.5rem;
}

.mv .mv_text h2 {
  font-size: 2.4rem;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
}