@charset "UTF-8";
/*
Theme Name: SOLEDA
Description: 株式会社それだHPテーマ
*/
/*============== Fonts ==============*/
/*============== Color ==============*/
/*============== imgPath ==============*/
/*============== ブレイクポイント ==============*/
/* =============================================
Fonts
============================================= */
/* =============================================
Size
============================================= */
/* =============================================
Border
============================================= */
/* =============================================
Position
============================================= */
/* =============================================
Background Image
============================================= */
html {
  font-family: "Noto Sans JP", sans-serif;
  box-sizing: border-box;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  color: #1F1F1F;
  background-color: #FCFCFC;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, a,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, input[type=submit] {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

main.is_active {
  overflow-y: hidden;
  pointer-events: none;
}

body {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 960px) {
  body {
    overflow: hidden;
  }
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
@media screen and (max-width: 960px) {
  h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0;
  }
}
p {
  line-height: 1.5;
}
ul, li {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

a {
  color: #1F1F1F;
  text-decoration: none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
  cursor: pointer;
  transition: 0.3s;
}

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

/* iphoneデフォルトのボタンcssを無効にする */
*:not(input[type=checkbox]) {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

input[type=radio] {
  -webkit-appearance: auto;
}

input[type=submit] {
  cursor: pointer;
}

button {
  border: none;
  outline: none;
  font: "Noto Sans JP", sans-serif;
  color: #1F1F1F;
  background: none;
  font-size: 16px;
}

img {
  vertical-align: middle;
  width: 100%;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

summary {
  display: block;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

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

*,
*:before,
*:after {
  box-sizing: inherit;
}

/*============== Width ==============*/
.hp_w5 {
  width: 5%;
  margin: 0 auto;
}

.hp_w10 {
  width: 10%;
  margin: 0 auto;
}

.hp_w15 {
  width: 15%;
  margin: 0 auto;
}

.hp_w20 {
  width: 20%;
  margin: 0 auto;
}

.hp_w25 {
  width: 25%;
  margin: 0 auto;
}

.hp_w30 {
  width: 30%;
  margin: 0 auto;
}

.hp_w35 {
  width: 35%;
  margin: 0 auto;
}

.hp_w40 {
  width: 40%;
  margin: 0 auto;
}

.hp_w45 {
  width: 45%;
  margin: 0 auto;
}

.hp_w50 {
  width: 50%;
  margin: 0 auto;
}

.hp_w55 {
  width: 55%;
  margin: 0 auto;
}

.hp_w60 {
  width: 60%;
  margin: 0 auto;
}

.hp_w65 {
  width: 65%;
  margin: 0 auto;
}

.hp_w70 {
  width: 70%;
  margin: 0 auto;
}

.hp_w75 {
  width: 75%;
  margin: 0 auto;
}

.hp_w80 {
  width: 80%;
  margin: 0 auto;
}

.hp_w85 {
  width: 85%;
  margin: 0 auto;
}

.hp_w90 {
  width: 90%;
  margin: 0 auto;
}

.hp_w95 {
  width: 95%;
  margin: 0 auto;
}

.hp_w100 {
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 960px) {
  .hp_w5 {
    width: 90%;
  }
  .hp_w10 {
    width: 90%;
  }
  .hp_w15 {
    width: 90%;
  }
  .hp_w20 {
    width: 90%;
  }
  .hp_w25 {
    width: 90%;
  }
  .hp_w30 {
    width: 90%;
  }
  .hp_w35 {
    width: 90%;
  }
  .hp_w40 {
    width: 90%;
  }
  .hp_w45 {
    width: 90%;
  }
  .hp_w50 {
    width: 90%;
  }
  .hp_w55 {
    width: 90%;
  }
  .hp_w60 {
    width: 90%;
  }
  .hp_w65 {
    width: 90%;
  }
  .hp_w70 {
    width: 90%;
  }
  .hp_w75 {
    width: 90%;
  }
  .hp_w80 {
    width: 90%;
  }
  .hp_w85 {
    width: 90%;
  }
  .hp_w90 {
    width: 90%;
  }
  .hp_w95 {
    width: 90%;
  }
  .hp_w100 {
    width: 90%;
  }
}
/*============== Padding・Margin ==============*/
.hp_pdb_10 {
  padding-bottom: 10px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_10 {
    padding-bottom: 5px;
  }
}

.hp_mgt_10 {
  margin-top: 10px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_10 {
    margin-top: 5px;
  }
}

.hp_mgr_10 {
  margin-right: 10px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_10 {
    margin-right: 5px;
  }
}

.hp_mgb_10 {
  margin-bottom: 10px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_10 {
    margin-bottom: 5px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_20 {
  padding-bottom: 20px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_20 {
    padding-bottom: 10px;
  }
}

.hp_mgt_20 {
  margin-top: 20px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_20 {
    margin-top: 10px;
  }
}

.hp_mgr_20 {
  margin-right: 20px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_20 {
    margin-right: 10px;
  }
}

.hp_mgb_20 {
  margin-bottom: 20px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_20 {
    margin-bottom: 10px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_30 {
  padding-bottom: 30px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_30 {
    padding-bottom: 15px;
  }
}

.hp_mgt_30 {
  margin-top: 30px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_30 {
    margin-top: 15px;
  }
}

.hp_mgr_30 {
  margin-right: 30px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_30 {
    margin-right: 15px;
  }
}

.hp_mgb_30 {
  margin-bottom: 30px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_30 {
    margin-bottom: 15px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_40 {
  padding-bottom: 40px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_40 {
    padding-bottom: 20px;
  }
}

.hp_mgt_40 {
  margin-top: 40px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_40 {
    margin-top: 20px;
  }
}

.hp_mgr_40 {
  margin-right: 40px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_40 {
    margin-right: 20px;
  }
}

.hp_mgb_40 {
  margin-bottom: 40px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_40 {
    margin-bottom: 20px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_50 {
  padding-bottom: 50px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_50 {
    padding-bottom: 25px;
  }
}

.hp_mgt_50 {
  margin-top: 50px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_50 {
    margin-top: 25px;
  }
}

.hp_mgr_50 {
  margin-right: 50px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_50 {
    margin-right: 25px;
  }
}

.hp_mgb_50 {
  margin-bottom: 50px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_50 {
    margin-bottom: 25px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_60 {
  padding-bottom: 60px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_60 {
    padding-bottom: 30px;
  }
}

.hp_mgt_60 {
  margin-top: 60px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_60 {
    margin-top: 30px;
  }
}

.hp_mgr_60 {
  margin-right: 60px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_60 {
    margin-right: 30px;
  }
}

.hp_mgb_60 {
  margin-bottom: 60px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_60 {
    margin-bottom: 30px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_70 {
  padding-bottom: 70px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_70 {
    padding-bottom: 35px;
  }
}

.hp_mgt_70 {
  margin-top: 70px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_70 {
    margin-top: 35px;
  }
}

.hp_mgr_70 {
  margin-right: 70px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_70 {
    margin-right: 35px;
  }
}

.hp_mgb_70 {
  margin-bottom: 70px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_70 {
    margin-bottom: 35px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_80 {
  padding-bottom: 80px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_80 {
    padding-bottom: 40px;
  }
}

.hp_mgt_80 {
  margin-top: 80px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_80 {
    margin-top: 40px;
  }
}

.hp_mgr_80 {
  margin-right: 80px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_80 {
    margin-right: 40px;
  }
}

.hp_mgb_80 {
  margin-bottom: 80px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_80 {
    margin-bottom: 40px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_90 {
  padding-bottom: 90px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_90 {
    padding-bottom: 45px;
  }
}

.hp_mgt_90 {
  margin-top: 90px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_90 {
    margin-top: 45px;
  }
}

.hp_mgr_90 {
  margin-right: 90px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_90 {
    margin-right: 45px;
  }
}

.hp_mgb_90 {
  margin-bottom: 90px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_90 {
    margin-bottom: 45px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_100 {
  padding-bottom: 100px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_100 {
    padding-bottom: 50px;
  }
}

.hp_mgt_100 {
  margin-top: 100px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_100 {
    margin-top: 50px;
  }
}

.hp_mgr_100 {
  margin-right: 100px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_100 {
    margin-right: 50px;
  }
}

.hp_mgb_100 {
  margin-bottom: 100px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_100 {
    margin-bottom: 50px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_110 {
  padding-bottom: 110px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_110 {
    padding-bottom: 55px;
  }
}

.hp_mgt_110 {
  margin-top: 110px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_110 {
    margin-top: 55px;
  }
}

.hp_mgr_110 {
  margin-right: 110px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_110 {
    margin-right: 55px;
  }
}

.hp_mgb_110 {
  margin-bottom: 110px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_110 {
    margin-bottom: 55px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_120 {
  padding-bottom: 120px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_120 {
    padding-bottom: 60px;
  }
}

.hp_mgt_120 {
  margin-top: 120px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_120 {
    margin-top: 60px;
  }
}

.hp_mgr_120 {
  margin-right: 120px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_120 {
    margin-right: 60px;
  }
}

.hp_mgb_120 {
  margin-bottom: 120px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_120 {
    margin-bottom: 60px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_130 {
  padding-bottom: 130px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_130 {
    padding-bottom: 65px;
  }
}

.hp_mgt_130 {
  margin-top: 130px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_130 {
    margin-top: 65px;
  }
}

.hp_mgr_130 {
  margin-right: 130px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_130 {
    margin-right: 65px;
  }
}

.hp_mgb_130 {
  margin-bottom: 130px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_130 {
    margin-bottom: 65px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_140 {
  padding-bottom: 140px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_140 {
    padding-bottom: 70px;
  }
}

.hp_mgt_140 {
  margin-top: 140px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_140 {
    margin-top: 70px;
  }
}

.hp_mgr_140 {
  margin-right: 140px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_140 {
    margin-right: 70px;
  }
}

.hp_mgb_140 {
  margin-bottom: 140px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_140 {
    margin-bottom: 70px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_150 {
  padding-bottom: 150px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_150 {
    padding-bottom: 75px;
  }
}

.hp_mgt_150 {
  margin-top: 150px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_150 {
    margin-top: 75px;
  }
}

.hp_mgr_150 {
  margin-right: 150px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_150 {
    margin-right: 75px;
  }
}

.hp_mgb_150 {
  margin-bottom: 150px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_150 {
    margin-bottom: 75px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_160 {
  padding-bottom: 160px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_160 {
    padding-bottom: 80px;
  }
}

.hp_mgt_160 {
  margin-top: 160px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_160 {
    margin-top: 80px;
  }
}

.hp_mgr_160 {
  margin-right: 160px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_160 {
    margin-right: 80px;
  }
}

.hp_mgb_160 {
  margin-bottom: 160px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_160 {
    margin-bottom: 80px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_170 {
  padding-bottom: 170px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_170 {
    padding-bottom: 85px;
  }
}

.hp_mgt_170 {
  margin-top: 170px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_170 {
    margin-top: 85px;
  }
}

.hp_mgr_170 {
  margin-right: 170px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_170 {
    margin-right: 85px;
  }
}

.hp_mgb_170 {
  margin-bottom: 170px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_170 {
    margin-bottom: 85px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_180 {
  padding-bottom: 180px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_180 {
    padding-bottom: 90px;
  }
}

.hp_mgt_180 {
  margin-top: 180px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_180 {
    margin-top: 90px;
  }
}

.hp_mgr_180 {
  margin-right: 180px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_180 {
    margin-right: 90px;
  }
}

.hp_mgb_180 {
  margin-bottom: 180px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_180 {
    margin-bottom: 90px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_190 {
  padding-bottom: 190px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_190 {
    padding-bottom: 95px;
  }
}

.hp_mgt_190 {
  margin-top: 190px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_190 {
    margin-top: 95px;
  }
}

.hp_mgr_190 {
  margin-right: 190px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_190 {
    margin-right: 95px;
  }
}

.hp_mgb_190 {
  margin-bottom: 190px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_190 {
    margin-bottom: 95px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

.hp_pdb_200 {
  padding-bottom: 200px;
}
@media screen and (max-width: 560px) {
  .hp_pdb_200 {
    padding-bottom: 100px;
  }
}

.hp_mgt_200 {
  margin-top: 200px;
}
@media screen and (max-width: 560px) {
  .hp_mgt_200 {
    margin-top: 100px;
  }
}

.hp_mgr_200 {
  margin-right: 200px;
}
@media screen and (max-width: 560px) {
  .hp_mgr_200 {
    margin-right: 100px;
  }
}

.hp_mgb_200 {
  margin-bottom: 200px;
}
@media screen and (max-width: 560px) {
  .hp_mgb_200 {
    margin-bottom: 100px;
  }
}

.hp_mgb_12 {
  margin-bottom: 12px;
}

/* =============================================
改行調整
============================================= */
.hp_inline_block {
  display: inline-block;
}

/* =============================================
レスポンシブ表示
============================================= */
@media screen and (max-width: 960px) {
  .pc_only {
    display: none !important;
  }
}

.sp_only {
  display: none;
}
@media screen and (max-width: 960px) {
  .sp_only {
    display: block;
  }
}

/* =============================================
フォント
============================================= */
.hp_fc_w {
  color: white;
}

.hp_fc_orage {
  color: #FCFCFC;
}

.hp_fs_small {
  font-size: 12px;
}

.hp_txa_center {
  text-align: center;
}

/* =============================================
背景
============================================= */
.hp_bg_base {
  background-color: #FCFCFC;
}

.hp_bg_white {
  background-color: white;
}

/* =============================================
ボタン
============================================= */
.el_btn {
  padding: 15px 85px 15px 30px;
  background-color: #fff;
  display: inline-block;
  border-radius: 50px;
  font-size: 25px;
  font-weight: 300;
  position: relative;
  letter-spacing: 0.08em;
  transition: all 0.3s;
  color: #000;
  cursor: pointer;
}
@media screen and (max-width: 560px) {
  .el_btn {
    padding: 10px 85px 10px 30px;
    font-size: 23px;
  }
}
.el_btn::before {
  content: "";
  width: 29px;
  height: 1px;
  display: block;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  background: #000;
  background-size: contain;
  transition: all 0.3s;
}
.el_btn.border {
  border: 1px solid #000;
}
.el_btn:hover {
  background-color: #000;
  color: #fff;
}
.el_btn:hover a {
  color: #fff;
}
.el_btn:hover::before {
  background-color: #fff;
  right: 20px;
}
.el_btn a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* =============================================
ブロックリンク
============================================= */
.el_block-link {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* =============================================
汎用タイトル
============================================= */
.el_ttl {
  padding-left: 10%;
  border-bottom: 1px solid #D9DDE3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .el_ttl {
    flex-direction: column;
  }
}
@media screen and (max-width: 1250px) {
  .el_ttl {
    padding-left: 5%;
  }
}
@media screen and (max-width: 960px) {
  .el_ttl {
    padding-left: 15px;
    padding-bottom: 20px;
    align-items: start;
    gap: 8px;
  }
}
.el_ttl_main {
  font-size: 128px;
  font-family: "Kantumruy Pro", sans-serif;
  line-height: 1;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 1250px) {
  .el_ttl_main {
    font-size: 100px;
  }
}
@media screen and (max-width: 560px) {
  .el_ttl_main {
    font-size: 60px;
  }
}
.el_ttl_sub {
  padding: 0 31px;
  font-size: 22px;
  position: relative;
}
@media screen and (max-width: 1250px) {
  .el_ttl_sub {
    font-size: 20px;
  }
}
@media screen and (max-width: 560px) {
  .el_ttl_sub {
    padding: 0 9px;
    font-size: 14px;
  }
}
.el_ttl_sub::before, .el_ttl_sub::after {
  content: "";
  width: 11px;
  height: 52px;
  display: block;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}
@media screen and (max-width: 560px) {
  .el_ttl_sub::before, .el_ttl_sub::after {
    width: 5px;
    height: 22px;
  }
}
.el_ttl_sub::before {
  left: 0;
  background: url(/wp-content/themes/soleda/assets/img/common/title_left.svg) center center no-repeat;
  background-size: contain;
}
.el_ttl_sub::after {
  right: 0;
  background: url(/wp-content/themes/soleda/assets/img/common/title_right.svg) center center no-repeat;
  background-size: contain;
}

/* =============================================
中央揃えタイトル
============================================= */
.el_centerTtl {
  text-align: center;
}
.el_centerTtl_main {
  font-family: "Kantumruy Pro", sans-serif;
  font-size: 70px;
  text-transform: uppercase;
  line-height: 1;
}
@media screen and (max-width: 560px) {
  .el_centerTtl_main {
    font-size: 55px;
  }
}
.el_centerTtl_sub {
  font-size: 20px;
}
@media screen and (max-width: 560px) {
  .el_centerTtl_sub {
    font-size: 14px;
  }
}

/* =============================================
下層ページタイトル
============================================= */
.el_lowerTtl {
  padding-top: 100px;
  position: relative;
}
@media screen and (max-width: 960px) {
  .el_lowerTtl {
    padding-top: 50px;
    padding-bottom: 10px;
  }
}
.el_lowerTtl_main {
  padding: 0 10%;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 960px) {
  .el_lowerTtl_main {
    padding: 0 15px;
    line-height: 1.15;
  }
}
.el_lowerTtl_main.ja {
  font-size: 80px;
}
@media screen and (max-width: 960px) {
  .el_lowerTtl_main.ja {
    font-size: 50px;
  }
}
@media screen and (max-width: 560px) {
  .el_lowerTtl_main.ja {
    font-size: 40px;
  }
}

/* =============================================
背景カラー付きタイトル
============================================= */
.el_backColorTtl {
  padding: 15px 20px;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  color: #fff;
  position: relative;
}
.el_backColorTtl_en {
  font-family: "Kantumruy Pro", sans-serif;
  font-size: 70px;
  line-height: 1;
}
@media screen and (max-width: 960px) {
  .el_backColorTtl_en {
    font-size: 45px;
  }
}
.el_backColorTtl_ja {
  font-size: 18px;
}
@media screen and (max-width: 960px) {
  .el_backColorTtl_ja {
    font-size: 14px;
  }
}
/* =============================================
小さめ本文
============================================= */
.el_txt_small {
  font-size: 14px;
}

/* =============================================
全面リンク
============================================= */
.el_blockLink {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* =============================================
パンくずリスト
============================================= */
.el_breadcrumbs {
  min-height: 92px;
  padding: 30px 10%;
  background-color: #FCFCFC;
}
@media screen and (max-width: 960px) {
  .el_breadcrumbs {
    min-height: inherit;
    padding: 15px 20px;
    border-top: 1px solid #D9DDE3;
  }
}
.el_breadcrumbs.border {
  border-top: 1px solid #D9DDE3;
  border-bottom: 1px solid #D9DDE3;
}
.el_breadcrumbs_item {
  padding-right: 15px;
  padding-left: 10px;
  position: relative;
  color: #8d8d8d;
}
.el_breadcrumbs_item::before {
  content: "";
  width: 5px;
  height: 10px;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: center center no-repeat;
  background-size: cover;
  background-image: url("/wp-content/themes/soleda/assets/img/common/arrow_breadcrumbs.svg");
  background-size: contain;
}
.el_breadcrumbs_item:first-child {
  padding-left: 0;
}
.el_breadcrumbs_item:last-child::before {
  display: none;
}

/* =============================================
キャラクター
============================================= */
.el_chara {
  position: relative;
}
.el_chara.big {
  width: 6.5972222222vw;
}
.el_chara_main {
  width: 100px;
  height: 150px;
}
@media screen and (max-width: 960px) {
  .el_chara_main {
    height: 130px;
  }
}
.el_chara_sub {
  width: 32px;
  position: absolute;
  top: 0;
  left: -30px;
}
.el_chara_sub.kurukuru {
  animation: kurukuru 2s linear infinite both;
}
.el_chara_sub.kirakira1 {
  animation: kirakira 2s linear infinite both;
}
.el_chara_sub.kirakira2 {
  animation: kirakira 2s linear infinite both;
  animation-delay: 0.3s;
}
.el_chara_fukidashi {
  width: 90px;
  position: absolute;
  top: -50px;
  right: -80px;
  animation: kurukuru2 2s linear infinite both;
}
@media screen and (max-width: 960px) {
  .el_chara_fukidashi {
    width: 80px;
    min-width: inherit;
    right: -57px;
  }
}
@keyframes kurukuru {
  30% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-15deg);
  }
  70% {
    transform: rotate(0);
  }
}
@keyframes kurukuru2 {
  30% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(15deg);
  }
  70% {
    transform: rotate(0);
  }
}
@keyframes kirakira {
  30% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    opacity: 0;
    transform: rotate(-10deg);
  }
  70% {
    opacity: 1;
    transform: rotate(0);
  }
}
/* =============================================
カテゴリー選択パーツ
============================================= */
.el_category {
  background-color: #fff;
  border-radius: 30px;
  padding: 10px 30px;
  display: inline-block;
}
@media screen and (max-width: 960px) {
  .el_category {
    max-width: 400px;
    width: 90%;
    padding: 0;
    background-color: transparent;
  }
}
.el_category_select {
  display: none;
  padding: 10px 20px;
  border-radius: 30px;
  background-color: #DDE8EB;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .el_category_select {
    width: 100%;
    display: block;
  }
}
.el_category_select.is_active::before {
  transform: translateY(-50%) rotate(180deg);
}
.el_category_select::before {
  content: "";
  width: 10px;
  height: 5px;
  display: block;
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  background: center center no-repeat;
  background-size: cover;
  background-image: url("/wp-content/themes/soleda/assets/img/common/arrow_dawn.svg");
  pointer-events: none;
  transition: all 0.3s;
}
.el_category_list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .el_category_list {
    display: none;
    background-color: #fff;
    padding: 20px;
    padding-top: 30px;
    border-radius: 0 0 30px 30px;
    position: relative;
    top: -20px;
  }
}
@media screen and (max-width: 960px) {
  .el_category_item {
    margin-bottom: 5px;
    font-size: 15px;
  }
}
.el_category_item a:hover {
  opacity: 0.6;
}
.el_category_item.is_active {
  padding: 5px 10px;
  background-color: #1F1F1F;
}
.el_category_item.is_active a {
  color: #fff;
  transition: all 0.3s;
}
@media screen and (max-width: 960px) {
  .el_category_item {
    padding-left: 20px;
    position: relative;
  }
  .el_category_item.is_active {
    padding-left: 20px;
    background-color: transparent;
  }
  .el_category_item.is_active a {
    color: #1F1F1F;
  }
  .el_category_item.is_active::before {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: #DDE8EB;
  }
}
/* =============================================
ページネーション
============================================= */
.el_pagenation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.el_pagenation_list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}
.el_pagenation_list li {
  width: 55px;
  height: 55px;
  font-size: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 100px;
  position: relative;
}
@media screen and (max-width: 960px) {
  .el_pagenation_list li {
    flex-direction: column;
  }
}
.el_pagenation_list li:not(.current) {
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.el_pagenation_list li::before, .el_pagenation_list li::after {
  content: "";
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 100px;
  background-size: cover;
  z-index: -1;
}
.el_pagenation_list li::before {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
}
.el_pagenation_list li::after {
  width: 53px;
  height: 53px;
  background: #FCFCFC;
}
.el_pagenation_list li.notNumbering::before, .el_pagenation_list li.notNumbering::after, .el_pagenation_list li.current::before, .el_pagenation_list li.current::after {
  display: none;
}
.el_pagenation_list li.current {
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  color: #fff;
}
.el_pagenation_list li.notNumbering {
  width: auto;
}
.el_pagenation_arrow {
  width: 9px;
}

/* =============================================
バナー
============================================= */
.bl_banner {
  padding-top: 100px;
  background-color: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
}
@media screen and (max-width: 960px) {
  .bl_banner {
    padding-top: 60px;
  }
}
.bl_banner_cont {
  max-width: 1125px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .bl_banner_cont {
    display: block;
    width: 90%;
  }
}
.bl_banner_item {
  width: calc(50% - 15px);
  max-width: 550px;
  height: 310px;
  margin: 0 auto;
  padding: 32px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
@media screen and (max-width: 960px) {
  .bl_banner_item {
    width: 100%;
    height: 130px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
  }
}
.bl_banner_item::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(/wp-content/themes/breaunetwork/assets/img/banner/banner_company.png) no-repeat center center;
  -ms-background-size: cover;
  background-size: cover;
  transition: all 0.3s ease-out;
}
.bl_banner_item:hover::after {
  transform: scale(1.3);
}
.bl_banner_item p {
  font-size: 32px;
  color: white;
  font-weight: 700;
  font-family: "Kantumruy Pro", sans-serif;
  position: relative;
  z-index: 1;
  transition: 0.3s;
}
@media screen and (max-width: 960px) {
  .bl_banner_item p {
    font-size: 20px;
  }
}
.bl_banner_item.recruit::after {
  background-image: url(/wp-content/themes/breaunetwork/assets/img/banner/banner_recruit.png);
}
.bl_banner_item.customer::after {
  background-image: url(/wp-content/themes/breaunetwork/assets/img/banner/banner_customer.png);
}
.bl_banner_item .el_commonBtn {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .bl_banner_item .el_commonBtn {
    width: 55px;
    height: 55px;
    right: 20px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}
.bl_banner_item a {
  z-index: 2;
}

/* =============================================
CTA
============================================= */
.bl_cta {
  position: relative;
  color: #fff;
}
.bl_cta_cont {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
@media screen and (max-width: 960px) {
  .bl_cta_cont {
    flex-direction: column;
  }
}
.bl_cta_txt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .bl_cta_txt {
    margin: 40px auto;
    gap: 20px;
  }
}
.bl_cta_txt_p {
  font-size: 20px;
  text-align: left;
  display: inline-block;
}
@media screen and (max-width: 960px) {
  .bl_cta_txt_p {
    width: 270px;
    font-size: 18px;
  }
}
.bl_cta_mailCont {
  flex-grow: 1;
}
.bl_cta_mail {
  width: 113px;
  height: 113px;
  background-color: #FCFCFC;
  border-radius: 150px;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .bl_cta_mail {
    width: 75px;
    height: 75px;
  }
}
.bl_cta_mail_icon {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bl_cta_mail_icon.icon1 {
  width: 50%;
}
.bl_cta_mail_icon.icon2 {
  width: 27.433%;
  visibility: hidden;
}

/* =============================================
メールアイコンのアニメーション
============================================= */
#mail_icon1.active {
  animation: mail_1 2s ease-in-out both;
}

#mail_icon2.active {
  animation: mail_2 0.8s ease-in both;
  animation-delay: 0.08s;
}

@keyframes mail_1 {
  0% {
    transform: translate(-50%, -50%);
  }
  40% {
    transform: translateX(-50%) translateY(-300%);
    opacity: 1;
  }
  41% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    transform: translateX(-50%) translateY(200%);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
@keyframes mail_2 {
  0% {
    transform: translate(-50%, -70%);
    visibility: visible;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-550%);
    opacity: 0;
    visibility: hidden;
  }
}
/* =============================================
基本テーブル
============================================= */
.bl_table {
  width: 100%;
  text-align: left;
  font-size: 18px;
}
@media screen and (max-width: 960px) {
  .bl_table {
    font-size: 16px;
  }
}
.bl_table tr {
  border-bottom: 1px solid #D9DDE3;
  vertical-align: middle;
}
@media screen and (max-width: 960px) {
  .bl_table tr {
    display: flex;
    flex-direction: column;
  }
}
.bl_table tr.first {
  border-top: 1px solid #D9DDE3;
}
.bl_table th {
  padding: 15px 0;
  width: 27%;
  background-color: #FCFCFC;
  font-weight: 400;
}
@media screen and (max-width: 960px) {
  .bl_table th {
    padding: 10px 0;
    padding-bottom: 0;
    width: 100%;
    text-align: left;
  }
}
.bl_table td {
  padding: 15px 0;
  width: 70%;
}
@media screen and (max-width: 960px) {
  .bl_table td {
    width: 100%;
  }
}
.bl_table td .sp {
  display: none;
}
@media screen and (max-width: 960px) {
  .bl_table td .sp {
    display: block;
  }
}
/* =============================================
ピックアップ・関連実績のパーツ
============================================= */
.bl_scrolle2colum .bl_pickup_item:first-child {
  border-left: 1px solid #fff;
}
.bl_scrolle2colum .bl_pickup_item:last-child {
  border-right: 1px solid #fff;
}
.bl_scrolle2colum .el_centerTtl {
  width: 100%;
  padding-left: 20px;
  text-align: left;
}

.un_works .bl_pickup_list,
.un_works .bl_pickup_item {
  border-color: #D9DDE3;
}
.un_works .bl_pickup_list {
  border-top: none;
  border-bottom: none;
  border-left: 1px solid #D9DDE3;
}
.un_works .bl_pickup_item {
  border: none;
  border-right: 1px solid #D9DDE3 !important;
  border-bottom: 1px solid #D9DDE3 !important;
}
.un_works .bl_pickup_item:last-child {
  display: block;
}
.un_works .bl_pickup_item:nth-child(1), .un_works .bl_pickup_item:nth-child(2), .un_works .bl_pickup_item:nth-child(3), .un_works .bl_pickup_item:nth-child(4) {
  border-top: 1px solid #D9DDE3 !important;
}

.bl_pickup {
  background-color: #D9DDE3;
  color: #fff;
  padding: 30px 0 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .bl_pickup {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .bl_pickup {
    padding-right: 15px;
    padding-left: 15px;
  }
}
.bl_pickup_list {
  width: 100%;
  max-width: 1250px;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
@media screen and (max-width: 960px) {
  .bl_pickup_list {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 560px) {
  .bl_pickup_list {
    flex-direction: column;
  }
}
.bl_pickup_item {
  width: 25%;
  aspect-ratio: 0.8/1;
  padding: 30px;
  border-left: 1px solid #fff;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}
@media screen and (max-width: 960px) {
  .bl_pickup_item {
    width: 50%;
    padding: 20px;
    border-top: 1px solid #fff;
  }
}
@media screen and (max-width: 560px) {
  .bl_pickup_item {
    width: 100%;
  }
}
.bl_pickup_item:first-child {
  border: none;
}
@media screen and (max-width: 560px) {
  .bl_pickup_item:nth-child(4) {
    display: none;
  }
}
.bl_pickup_item:hover {
  background-color: #fff;
}
.bl_pickup_item:hover .bl_pickup_item_img {
  aspect-ratio: 1.66/1;
}
.bl_pickup_item:hover .bl_pickup_item_txt {
  flex-grow: 1;
}
.bl_pickup_item:hover .bl_pickup_item_ttl {
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
}
.bl_pickup_item:hover .bl_pickup_item_desc {
  flex-grow: 1;
  display: block;
}
.bl_pickup_item_cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 100%;
  justify-content: start;
}
@media screen and (max-width: 960px) {
  .bl_pickup_item_cont {
    flex-direction: column;
  }
}
.bl_pickup_item_img {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  transition: all 0.3s;
}
.bl_pickup_item_img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.bl_pickup_item_txt {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 8px;
}
@media screen and (max-width: 960px) {
  .bl_pickup_item_txt {
    flex-direction: column;
  }
}
.bl_pickup_item_ttl {
  font-size: 17px;
  color: #000;
}
.bl_pickup_item_tag {
  padding: 5px 10px;
  display: inline-block;
  background-color: #000;
  color: #fff;
  font-size: 14px;
}
.bl_pickup_item_desc {
  display: none;
  transition: all 0.3s;
  color: #1F1F1F;
  font-size: 14px;
}

/* =============================================
ブログ
============================================= */
.bl_blog {
  width: 100%;
  max-width: 1250px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid #fff;
  border-bottom: none;
}
@media screen and (max-width: 960px) {
  .bl_blog {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .bl_blog {
    border-right: none;
    border-left: none;
  }
}
.bl_blog.column3 .bl_blog_item {
  width: 33.3333333333%;
}
@media screen and (max-width: 960px) {
  .bl_blog.column3 .bl_blog_item {
    width: 100%;
  }
}
.bl_blog.column3 .bl_blog_item:nth-child(3n+1) {
  border-left: none;
}
.bl_blog.column2 {
  border-left: 1px solid #D9DDE3;
  justify-content: left;
}
@media screen and (max-width: 960px) {
  .bl_blog.column2 {
    border: none;
  }
}
.bl_blog.column2 .bl_blog_item {
  width: 50%;
  border-color: #D9DDE3;
  border-top: 1px solid #D9DDE3;
  border-right: 1px solid #D9DDE3;
  border-left: none;
  border-bottom: none;
}
@media screen and (max-width: 960px) {
  .bl_blog.column2 .bl_blog_item {
    width: 100%;
    border-right: none;
  }
}
.bl_blog.column2 .bl_blog_item:nth-child(2n),
.bl_blog.column2 .bl_blog_item .bl_blog_item_tag {
  border-color: #D9DDE3;
}
@media screen and (max-width: 960px) {
  .bl_blog.column2 .bl_blog_item:first-child {
    border-top: 1px solid #D9DDE3;
  }
}
.bl_blog.column2 .bl_blog_item:nth-child(2n+1) {
  border-left: none;
}
.bl_blog.column2 .bl_blog_item:nth-last-child(2), .bl_blog.column2 .bl_blog_item:last-child {
  border-bottom: 1px solid #D9DDE3;
}
.bl_blog.column2 .bl_blog_item:nth-child(2n+1):last-child {
  border-right: 1px solid #D9DDE3;
  border-bottom: 1px solid #D9DDE3;
}
@media screen and (max-width: 960px) {
  .bl_blog.column2 .bl_blog_item:nth-child(2n+1):last-child {
    border-right: none;
  }
}
.bl_blog.column2 .bl_blog_item_ttl {
  font-size: 18px;
}
@media screen and (max-width: 960px) {
  .bl_blog.column2 .bl_blog_item_ttl {
    font-size: 16px;
  }
}
.bl_blog_item {
  padding: 40px 30px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  gap: 0;
  transition: all 0.3s;
  position: relative;
}
@media screen and (max-width: 960px) {
  .bl_blog_item {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .bl_blog_item {
    padding: 15px 0;
    border-left: none;
  }
}
.bl_blog_item:hover {
  background-color: #fff;
}
.bl_blog_item:hover .bl_blog_item_date,
.bl_blog_item:hover .bl_blog_item_tag,
.bl_blog_item:hover .bl_blog_item_ttl {
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bl_blog_item:hover .bl_blog_item_tag {
  border-color: #8d8d8d;
}
.bl_blog_item:hover .bl_blog_item_img img {
  transform: scale(1.1);
}
.bl_blog_item_cont {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 15px;
}
@media screen and (max-width: 960px) {
  .bl_blog_item_cont {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .bl_blog_item_cont {
    flex-direction: row;
    max-width: inherit;
    justify-content: left;
    align-items: center;
  }
}
.bl_blog_item_img {
  width: 100%;
  aspect-ratio: 1.6/1;
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .bl_blog_item_img {
    width: 30%;
  }
}
.bl_blog_item_img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s;
}
@media screen and (max-width: 960px) {
  .bl_blog_item_txt {
    width: calc(70% - 15px);
  }
}
.bl_blog_item_top {
  margin-bottom: 6px;
  font-size: 14px;
  display: flex;
}
.bl_blog_item_date {
  padding-right: 8px;
  font-family: "Roboto Condensed", sans-serif;
  line-height: 1;
}
.bl_blog_item_tagList {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 5px;
}
.bl_blog_item_tag {
  padding-left: 8px;
  border-left: 1px solid #fff;
  line-height: 1;
}
.bl_blog_item_ttl {
  font-size: 18px;
}
@media screen and (max-width: 960px) {
  .bl_blog_item_ttl {
    font-size: 16px;
  }
}
/* =============================================
視差効果
============================================= */
.bl_parallax.service {
  padding-top: 80px;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  position: relative;
}
@media screen and (max-width: 960px) {
  .bl_parallax.service {
    padding-top: 35px;
  }
}
.bl_parallax.works {
  padding-top: 110px;
  position: relative;
  margin-bottom: -100px;
}
.bl_parallax_img {
  overflow: hidden;
  aspect-ratio: 4/1;
  position: relative;
}
@media screen and (max-width: 960px) {
  .bl_parallax_img {
    aspect-ratio: 2.15/1;
  }
}
.bl_parallax_img_cont {
  width: 100%;
  aspect-ratio: 2.61/1;
  position: absolute;
  top: 0;
  left: 0;
  background: center center no-repeat;
  background-size: cover;
}
@media screen and (max-width: 960px) {
  .bl_parallax_img_cont {
    aspect-ratio: 2.15/1;
    background-size: 160% !important;
  }
}
.bl_parallax_img_cont.service_1 {
  background: center center no-repeat;
  background-size: cover;
  background-image: url("/wp-content/themes/soleda/assets/img/service/service_mv1.png");
}
.bl_parallax_img_cont.service_2 {
  background: center center no-repeat;
  background-size: cover;
  background-image: url("/wp-content/themes/soleda/assets/img/service/service_mv2.png");
}
.bl_parallax_img_cont.service_3 {
  background: center center no-repeat;
  background-size: cover;
  background-image: url("/wp-content/themes/soleda/assets/img/service/service_mv3.png");
}
.bl_parallax_img_cont.service_4 {
  background: center center no-repeat;
  background-size: cover;
  background-image: url("/wp-content/themes/soleda/assets/img/service/service_mv4.png");
}

/* =============================================
下層ページの縦スクロール＋コンテンツ
============================================= */
.bl_scrolle2colum {
  position: relative;
  display: flex;
  border-bottom: 1px solid #D9DDE3;
}
@media screen and (max-width: 960px) {
  .bl_scrolle2colum {
    border-bottom: none;
  }
}
.bl_scrolle2colum_back {
  width: 10%;
  position: relative;
  border-right: 1px solid #D9DDE3;
}
@media screen and (max-width: 560px) {
  .bl_scrolle2colum_back {
    display: none;
  }
}
.bl_scrolle2colum_cont {
  width: 90%;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 100px;
}
@media screen and (max-width: 960px) {
  .bl_scrolle2colum_cont {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .bl_scrolle2colum_cont {
    padding: 50px 0 0;
    gap: 30px;
  }
}
@media screen and (max-width: 560px) {
  .bl_scrolle2colum_cont {
    width: 100%;
  }
}
.bl_scrolle2colum_cont.small {
  padding: 0;
}
@media screen and (max-width: 960px) {
  .bl_scrolle2colum_cont.last {
    padding-bottom: 50px;
  }
}
.bl_scrolle2colum_inner {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}
.bl_scrolle2colum_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 80px;
}
@media screen and (max-width: 960px) {
  .bl_scrolle2colum_main {
    flex-direction: column;
  }
}
.bl_scrolle2colum_txt {
  font-size: 20px;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.6px;
}
@media screen and (max-width: 960px) {
  .bl_scrolle2colum_txt {
    padding: 20px 15px 30px;
    font-size: 16px;
  }
}
/* =============================================
サービスのリスト
============================================= */
.bl_serviceList {
  padding: 50px 10%;
  background-color: #DDE8EB;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
@media screen and (max-width: 960px) {
  .bl_serviceList {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .bl_serviceList {
    padding: 110px 15px 50px 15px;
  }
}
.bl_serviceList .el_chara {
  position: absolute;
  top: -100px;
  left: 4.1666666667vw;
}
@media screen and (max-width: 960px) {
  .bl_serviceList .el_chara {
    top: -50px;
    left: 25px;
  }
}
@media screen and (max-width: 960px) {
  .bl_serviceList .el_chara_fukidashi {
    top: 10px;
    right: -125px;
  }
}
@media screen and (max-width: 560px) {
  .bl_serviceList .el_chara_fukidashi {
    right: -142px;
  }
}
.bl_serviceList_list {
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .bl_serviceList_list {
    flex-direction: column;
    gap: 15px;
  }
}
@media screen and (max-width: 960px) {
  .bl_serviceList_list.system {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.bl_serviceList_list.system .bl_serviceList_ttl {
  margin-bottom: 0;
}
.bl_serviceList_list.system .bl_serviceList_item:not(.w100) {
  padding-bottom: 0;
}
.bl_serviceList_item {
  width: calc((100% - 60px) / 3);
  padding: 20px 25px 30px;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: start;
  position: relative;
}
@media screen and (max-width: 960px) {
  .bl_serviceList_item {
    width: 100%;
  }
}
.bl_serviceList_item.w100 {
  width: 100%;
}
.bl_serviceList_item::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(0 0, 100% 0%, 0 100%);
          clip-path: polygon(0 0, 100% 0%, 0 100%);
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  border-radius: 5px 0 0 0;
}
.bl_serviceList_ttlCont {
  padding-bottom: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl_serviceList_ttl {
  height: 78px;
  display: inline-block;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  font-weight: 500;
  display: flex;
  align-items: center;
  line-height: 1.2;
}
@media screen and (max-width: 960px) {
  .bl_serviceList_ttl {
    height: auto;
    line-height: 1.5;
    font-size: 25px;
  }
}
.bl_serviceList_ttl_img {
  max-width: 35px;
  max-height: 35px;
  position: relative;
}
.bl_serviceList_txt {
  width: 100%;
  border-top: 1px solid #D9DDE3;
  padding-top: 20px;
  flex-grow: 1;
}

/* =============================================
ご利用の流れ
============================================= */
.bl_flow_item {
  padding: 50px 20px 50px 45px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  gap: 100px;
  border-bottom: 1px dashed #D9DDE3;
  position: relative;
  list-style: none;
}
@media screen and (max-width: 960px) {
  .bl_flow_item {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .bl_flow_item {
    padding: 20px 15px 40px 15px;
    flex-direction: row;
  }
}
.bl_flow_comment {
  padding-left: 45px;
  font-size: 30px;
  color: #8d8d8d;
}
@media screen and (max-width: 960px) {
  .bl_flow_comment {
    font-size: 20px;
    padding-left: 15px;
  }
}
.bl_flow_num {
  width: 75px;
  height: 75px;
  font-size: 24px;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
}
@media screen and (max-width: 960px) {
  .bl_flow_num {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .bl_flow_num {
    width: 60px;
    height: 60px;
  }
}
.bl_flow_num::before, .bl_flow_num::after {
  content: "";
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 100px;
  background-size: cover;
  z-index: -1;
}
.bl_flow_num::before {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
}
.bl_flow_num::after {
  width: 72px;
  height: 72px;
  background: #FCFCFC;
}
@media screen and (max-width: 960px) {
  .bl_flow_num::after {
    width: 58px;
    height: 58px;
  }
}
.bl_flow_num.sp_only {
  display: none;
}
@media screen and (max-width: 960px) {
  .bl_flow_num.sp_only {
    margin-right: 15px;
    display: inline-block;
    text-align: center;
    line-height: 60px;
  }
}
.bl_flow_main {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 25px;
}
@media screen and (max-width: 960px) {
  .bl_flow_main {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .bl_flow_main {
    width: 100%;
  }
}
.bl_flow_ttl {
  font-size: 30px;
  display: inline-block;
  position: relative;
}
@media screen and (max-width: 960px) {
  .bl_flow_ttl {
    width: 100%;
    display: block;
    font-size: 25px;
  }
}
/* =============================================
サイトマップ
============================================= */
.bl_sitemap {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  gap: 100px;
  flex-wrap: wrap;
}
@media screen and (max-width: 960px) {
  .bl_sitemap {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .bl_sitemap {
    width: 100%;
    gap: 20px;
  }
}
.bl_sitemap a, .bl_sitemap p {
  color: #8d8d8d;
  display: inline-block;
}
@media screen and (max-width: 960px) {
  .bl_sitemap_item {
    width: 100%;
  }
}
.bl_sitemap_ttl {
  margin-bottom: 20px;
  font-size: 20px;
  position: relative;
}
.bl_sitemap_ttl::before {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #8d8d8d;
  background-size: cover;
  transition: all 0.3s;
  pointer-events: none;
}
.bl_sitemap_ttl:hover::before {
  width: 0px;
}
.bl_sitemap_list {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 15px;
}
@media screen and (max-width: 960px) {
  .bl_sitemap_list {
    flex-direction: column;
  }
}
/* =============================================
loading
============================================= */
.bl_loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: 100;
}
.bl_loading_cont {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.bl_loading_item {
  position: relative;
  transform: translateY(100%);
}
.bl_loading_img {
  margin-bottom: 30px;
  max-width: 380px;
  left: 50%;
  transform: translateX(-50%);
  animation: popup 1s ease-in both;
}
@media screen and (max-width: 560px) {
  .bl_loading_img {
    max-width: 250px;
  }
}
.bl_loading_txt {
  margin-bottom: 50px;
  font-size: 23px;
  animation: simpleup 1s ease-out both;
  animation-delay: 1.5s;
  color: #fff;
}
@media screen and (max-width: 560px) {
  .bl_loading_txt {
    font-size: 18px;
  }
}
.bl_loading_logo {
  max-width: 345px;
  animation: simpleup 1s ease-out both;
  animation-delay: 2.2s;
  opacity: 0.6;
}
@media screen and (max-width: 560px) {
  .bl_loading_logo {
    max-width: 230px;
  }
}
.bl_loading_hiddenBox {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  top: 0;
  left: 0;
}

@keyframes popup {
  50% {
    transform: translate(-50%, -150%);
  }
  65% {
    transform: translate(-50%, -150%) rotate(0);
  }
  70% {
    transform: translate(-50%, -150%) rotate(-5deg);
  }
  100% {
    transform: translate(-50%, -135%);
  }
}
@keyframes simpleup {
  50% {
    transform: translate(0%, -150%);
  }
  65% {
    transform: translate(0%, -150%);
  }
  100% {
    transform: translate(0%, -135%);
  }
}
/* =============================================
通常遷移ローディング
============================================= */
.js_loading_read {
  transition: all 0.3s;
  opacity: 1;
  background-color: #fff;
}
.js_loading_read .bl_loading_logo {
  transform: translate(0%, -100%);
  animation: loading 1s ease-in-out infinite both;
}
.js_loading_read.loaded {
  opacity: 0;
  visibility: hidden;
}

@keyframes loading {
  0% {
    transform: translate(0%, -100%);
  }
  50% {
    transform: translate(0%, -150%);
  }
  100% {
    transform: translate(0%, -100%);
  }
}
/* =============================================
ヘッダー
============================================= */
.ly_header {
  width: 100%;
  padding: 16px 18px 16px 20px;
  position: fixed;
  z-index: 10;
  pointer-events: none;
}
.ly_header.is_active .ly_header_logo {
  width: 18.0555555556vw;
  background-image: url("/wp-content/themes/soleda/assets/img/common/logo_main.svg");
  display: none;
}
@media screen and (max-width: 960px) {
  .ly_header.is_active .ly_header_logo {
    width: 195px;
  }
}
.ly_header.scroll .ly_header_logo {
  width: 60px;
  height: 60px;
  background-color: #D9DDE3;
  border-radius: 100%;
  background-image: url("/wp-content/themes/soleda/assets/img/common/logo_mark.svg");
  background-size: 60%;
}
@media screen and (max-width: 960px) {
  .ly_header.scroll .ly_header_logo {
    width: 60px;
    height: 60px;
  }
}
.ly_header.scroll .ly_header_hamburger {
  width: 60px;
  height: 60px;
  gap: 2px;
}
.ly_header.scroll .ly_header_hamburger_line {
  width: 30px;
}
.ly_header.scroll .ly_header_hamburger_line .line1 {
  margin-bottom: 7px;
}
.ly_header.scroll .ly_header_hamburger_ttl {
  font-size: 12px;
}
.ly_header_cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ly_header_cont a {
  pointer-events: all;
}
.ly_header_logo {
  width: 27.7777777778vw;
  max-width: 400px;
  height: 62px;
  transition: all 0.3s;
  background: center center no-repeat;
  background-size: contain;
  background-image: url("/wp-content/themes/soleda/assets/img/common/logo_main.svg");
}
@media screen and (max-width: 960px) {
  .ly_header_logo {
    width: 195px;
  }
}
.ly_header_hamburger {
  padding-top: 3px;
  width: 80px;
  height: 80px;
  background-color: #fff;
  border-radius: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  border: 1px solid #fff;
  pointer-events: all;
  transition: all 0.3s;
}
@media screen and (max-width: 960px) {
  .ly_header_hamburger {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .ly_header_hamburger {
    width: 60px;
    height: 60px;
    gap: 3px;
  }
}
.ly_header_hamburger_line {
  position: relative;
  width: 40px;
}
@media screen and (max-width: 960px) {
  .ly_header_hamburger_line {
    width: 30px;
  }
}
.ly_header_hamburger_line span {
  display: block;
  width: 100%;
  position: relative;
  border: 1px solid #000;
  transition: all 0.3s;
}
.ly_header_hamburger_line .line1 {
  margin-bottom: 10px;
}
@media screen and (max-width: 960px) {
  .ly_header_hamburger_line .line1 {
    margin-bottom: 7px;
  }
}
.ly_header_hamburger_ttl {
  font-size: 14px;
  display: block;
}
@media screen and (max-width: 960px) {
  .ly_header_hamburger_ttl {
    font-size: 12px;
  }
}
.ly_header_hamburger.is_active {
  background-color: transparent;
  border-color: #fff !important;
}
.ly_header_hamburger.is_active .ly_header_hamburger_line span {
  border-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
}
.ly_header_hamburger.is_active .ly_header_hamburger_line .line1 {
  transform: translate(-50%, -50%) rotate(45deg);
}
.ly_header_hamburger.is_active .ly_header_hamburger_line .line2 {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.ly_header_hamburger.is_active .ly_header_hamburger_ttl {
  display: none;
}
.ly_header__lower .ly_header_logo {
  background: center center no-repeat;
  background-size: contain;
  background-image: url("/wp-content/themes/soleda/assets/img/common/logo_gray.svg");
  width: 18.0555555556vw;
  max-width: 400px;
}
@media screen and (max-width: 960px) {
  .ly_header__lower .ly_header_logo {
    width: 195px;
  }
}
.ly_header__lower .ly_header_hamburger {
  border: 1px solid #000;
}

/* =============================================
メニュー展開
============================================= */
.ly_menu {
  padding: 160px 15px 60px;
  display: none;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  position: fixed;
  z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  overflow-x: hidden;
  overflow-y: scroll;
}
@media screen and (max-width: 960px) {
  .ly_menu {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .ly_menu {
    justify-content: left;
  }
}
@media screen and (max-width: 560px) {
  .ly_menu_cont {
    width: 100%;
  }
}
.ly_menu .bl_sitemap {
  max-width: 1000px;
  flex-wrap: wrap;
  gap: 60px 100px;
}
@media screen and (max-width: 560px) {
  .ly_menu .bl_sitemap {
    gap: 30px;
  }
}
.ly_menu .bl_sitemap a, .ly_menu .bl_sitemap p {
  color: #fff;
  display: block;
}
.ly_menu .bl_sitemap_item {
  width: calc((100% - 200px) / 3);
}
@media screen and (max-width: 960px) {
  .ly_menu .bl_sitemap_item {
    width: 100%;
  }
}
.ly_menu .bl_sitemap_ttl::before {
  background-color: #fff;
}
.ly_menu_cta {
  margin-top: 60px;
}
@media screen and (max-width: 560px) {
  .ly_menu_cta {
    margin-top: 0;
  }
}
.ly_menu.is_active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

/* =============================================
フッター
============================================= */
.ly_footer {
  background-color: #fff;
}
.ly_footer_cont {
  padding: 50px 0;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
  gap: 0;
}
@media screen and (max-width: 960px) {
  .ly_footer_cont {
    flex-direction: column;
  }
}
@media screen and (max-width: 560px) {
  .ly_footer_cont {
    padding-bottom: 30px;
  }
}
.ly_footer_copyright {
  padding: 35px 0 20px;
  background-color: #D9DDE3;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
@media screen and (max-width: 960px) {
  .ly_footer_copyright {
    flex-direction: column;
  }
}
.ly_footer_copyright img {
  max-width: 350px;
}
@media screen and (max-width: 960px) {
  .ly_footer_copyright img {
    max-width: 250px;
  }
}
.ly_footer_copyright small {
  font-size: 15px;
}
.ly_footer_cta {
  padding: 100px 15px;
  color: #fff;
  position: relative;
}
.ly_footer_cta_back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.ly_footer_chara {
  position: absolute;
  right: 27px;
  bottom: -35px;
}
@media screen and (max-width: 960px) {
  .ly_footer_chara {
    position: relative;
    left: 50%;
    bottom: -10px;
  }
}
@media screen and (max-width: 960px) {
  .ly_footer_chara .el_chara_fukidashi {
    top: 10px;
  }
}
/* =============================================
Inner
============================================= */
.ly_inner {
  width: 85%;
  max-width: 1260px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 960px) {
  .ly_inner {
    width: calc(100% - 30px);
  }
}
.ly_inner__small {
  max-width: 700px;
}
@media screen and (max-width: 960px) {
  .ly_inner__small {
    width: 90%;
  }
}
.ly_inner__big {
  width: 85%;
  max-width: 1240px;
}
@media screen and (max-width: 960px) {
  .ly_inner__big {
    width: 90%;
  }
}
/* =============================================
Container
============================================= */
.ly_cont {
  padding: 100px 0;
}
@media screen and (max-width: 960px) {
  .ly_cont {
    padding: 50px 0;
  }
}
.ly_bigCont {
  padding-top: 130px;
}
@media screen and (max-width: 960px) {
  .ly_bigCont {
    padding-top: 80px;
  }
}
@media screen and (max-width: 560px) {
  .ly_bigCont {
    padding-top: 50px;
  }
}

.ly_lowerCont {
  padding-top: 102px;
}
@media screen and (max-width: 960px) {
  .ly_lowerCont {
    padding-top: 88px;
  }
}
/* =============================================
下層ページの共通レイアウト
============================================= */
.ly_lower_ttl {
  padding: 180px 0 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
@media screen and (max-width: 960px) {
  .ly_lower_ttl {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .ly_lower_ttl {
    padding: 110px 5% 50px;
    gap: 30px;
  }
}
.ly_lower_ttl.nikken {
  padding-top: 255px;
}
@media screen and (max-width: 960px) {
  .ly_lower_ttl.nikken {
    padding-top: 182px;
  }
}
.ly_lower_ttl h1 {
  font-size: 40px;
}
@media screen and (max-width: 960px) {
  .ly_lower_ttl h1 {
    font-size: 22px;
  }
}
.ly_lower_img {
  aspect-ratio: 3.7/1;
  background: center center no-repeat;
  background-size: cover;
}
@media screen and (max-width: 960px) {
  .ly_lower_img {
    aspect-ratio: 2.15/1;
  }
}
/* =============================================
カーソル
============================================= */
.cursor_cont {
  pointer-events: none;
}

#cursor {
  width: 0;
  height: 0;
  position: fixed;
  background-color: #000;
  color: #fff;
  line-height: 60px;
  text-align: center;
  z-index: 2;
  font-size: 1px;
  border-radius: 100%;
  opacity: 0;
  transition: all 0.3s;
}
#cursor.is_active {
  width: 60px;
  height: 60px;
  opacity: 1;
  font-size: 14px;
}

/* =============================================
FV
============================================= */
.un_fv {
  position: relative;
  height: 100vh;
}
@media screen and (max-width: 960px) {
  .un_fv {
    height: auto;
  }
}
.un_fv_back {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 960px) {
  .un_fv_back {
    height: 100%;
  }
}
@media screen and (max-width: 560px) {
  .un_fv_back {
    aspect-ratio: 0.45/1;
  }
}
.un_fv_works {
  padding: 100px 15px;
  max-height: 100vh;
  aspect-ratio: 1.34/1;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 960px) {
  .un_fv_works {
    aspect-ratio: 1/1;
  }
}
@media screen and (max-width: 560px) {
  .un_fv_works {
    width: 100%;
    max-height: inherit;
    padding-bottom: 50px;
    aspect-ratio: 0.43/1;
  }
}
.un_fv_works_cont {
  max-width: 1089px;
  max-height: 100%;
  aspect-ratio: 1.34/1;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 960px) {
  .un_fv_works_cont {
    max-height: inherit;
  }
}
@media screen and (max-width: 560px) {
  .un_fv_works_cont {
    width: 100%;
    aspect-ratio: 0.48/1;
  }
}
.un_fv_works_item {
  position: absolute;
  cursor: none;
}
.un_fv_works_item a {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.un_fv_works_item img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.un_fv_works_item::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
  pointer-events: none;
  background: transparent;
  mix-blend-mode: multiply;
  z-index: 2;
}
.un_fv_works_item.is_one_hover::before {
  content: "";
  background: #4b4b4b;
  opacity: 0.7;
  background-size: cover;
}
.un_fv_works_item.web {
  aspect-ratio: 1.4/1;
}
.un_fv_works_item.video {
  aspect-ratio: 16/9;
}
.un_fv_works #works_1 {
  width: 24.9%;
  top: 3%;
  left: 8.63%;
  animation: floating 5s ease-in-out infinite both;
}
@media screen and (max-width: 560px) {
  .un_fv_works #works_1 {
    display: none;
  }
}
.un_fv_works #works_2 {
  width: 44.965%;
  top: 15.04%;
  right: 26.53%;
  animation: floating 6s ease-in-out infinite both;
}
@media screen and (max-width: 560px) {
  .un_fv_works #works_2 {
    width: 55.1162790698vw;
    top: 30.2325581395vw;
    right: 6.0465116279vw;
    left: auto;
  }
}
.un_fv_works #works_3 {
  width: 29.568%;
  top: 0;
  right: 0;
  animation: floating 4s ease-in-out infinite both;
  animation-delay: 3s;
}
@media screen and (max-width: 560px) {
  .un_fv_works #works_3 {
    width: 43.7209302326vw;
    top: 6.976744186vw;
    right: auto;
    left: 9.7674418605vw;
  }
}
.un_fv_works #works_4 {
  width: 34.98%;
  top: 34.39%;
  left: 0;
  animation: floating 5s ease-in-out infinite both;
  animation-delay: 2s;
}
@media screen and (max-width: 560px) {
  .un_fv_works #works_4 {
    width: 54.8837209302vw;
    top: 123.2558139535vw;
    left: 14.4186046512vw;
  }
}
.un_fv_works #works_5 {
  width: 29.56%;
  left: 18.08%;
  bottom: 0;
  animation: floating 5s ease-in-out infinite both;
  animation-delay: 3s;
}
@media screen and (max-width: 560px) {
  .un_fv_works #works_5 {
    width: 47.4418604651vw;
    top: 74.4186046512vw;
    left: 3.9534883721vw;
    bottom: auto;
  }
}
.un_fv_works #works_6 {
  width: 29.56%;
  right: 15.426%;
  bottom: 4.1322%;
  animation: floating 6s ease-in-out infinite both;
  animation-delay: 1s;
}
@media screen and (max-width: 560px) {
  .un_fv_works #works_6 {
    display: none;
  }
}
.un_fv_works #works_7 {
  width: 25.457%;
  top: 55.731%;
  right: -2.93%;
  animation: floating 5s ease-in-out infinite both;
}
@media screen and (max-width: 960px) {
  .un_fv_works #works_7 {
    right: 0%;
  }
}
@media screen and (max-width: 560px) {
  .un_fv_works #works_7 {
    width: 48.6046511628vw;
    top: 100vw;
    right: 6.976744186vw;
  }
}
.un_fv_btn {
  position: absolute;
  bottom: 50px;
  right: 8.9583333333vw;
}
@media screen and (max-width: 560px) {
  .un_fv_btn {
    top: 198.6046511628vw;
    right: 4.6511627907vw;
  }
}

/* =============================================
TOPサービス
============================================= */
.un_topService {
  position: relative;
}
.un_topService_chara {
  position: absolute;
  top: 8.0555555556vw;
  right: 9.7222222222vw;
  z-index: 1;
}
@media screen and (max-width: 560px) {
  .un_topService_chara {
    top: 108px;
  }
}
@media screen and (max-width: 560px) {
  .un_topService_chara .el_chara_fukidashi {
    top: -66px;
    right: -37px;
  }
}
.un_topService_list {
  max-width: 1100px;
  margin: 60px auto 120px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
}
@media screen and (max-width: 960px) {
  .un_topService_list {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 560px) {
  .un_topService_list {
    margin: 30px auto 30px;
    flex-direction: column;
  }
}
.un_topService_item {
  width: calc((100% - 60px) / 4);
  padding: 0 25px 30px 25px;
  color: #fff;
  position: relative;
  cursor: pointer;
}
@media screen and (max-width: 960px) {
  .un_topService_item {
    width: calc((100% - 30px) / 2);
  }
}
@media screen and (max-width: 560px) {
  .un_topService_item {
    width: 100%;
    padding: 0 15px 18px 15px;
  }
}
.un_topService_item::before {
  content: "";
  width: 100%;
  height: 0%;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  background-size: cover;
}
.un_topService_item.active::before {
  animation: service_hover 0.4s ease-in both;
}
.un_topService_item.dis_active::before {
  animation: service_hover_out 0.3s ease-in both;
}
@keyframes service_hover {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}
@keyframes service_hover_out {
  0% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}
.un_topService_item.item1 {
  background: center center no-repeat;
  background-size: cover;
  background-image: url("/wp-content/themes/soleda/assets/img/top/service_1.png");
}
@media screen and (max-width: 960px) {
  .un_topService_item.item1 {
    background: center center no-repeat;
    background-size: cover;
    background-image: url("/wp-content/themes/soleda/assets/img/top/service_1_sp.png");
  }
}
.un_topService_item.item1::before {
  background: linear-gradient(0deg, #dfca0c 0%, #e68e31 100%);
}
.un_topService_item.item2 {
  background: center center no-repeat;
  background-size: cover;
  background-image: url("/wp-content/themes/soleda/assets/img/top/service_2.png");
}
@media screen and (max-width: 960px) {
  .un_topService_item.item2 {
    background: center center no-repeat;
    background-size: cover;
    background-image: url("/wp-content/themes/soleda/assets/img/top/service_2_sp.png");
  }
}
.un_topService_item.item2::before {
  background: linear-gradient(0deg, #51ccf1 0%, #414ff2 100%);
}
.un_topService_item.item3 {
  background: center center no-repeat;
  background-size: cover;
  background-image: url("/wp-content/themes/soleda/assets/img/top/service_3.png");
}
@media screen and (max-width: 960px) {
  .un_topService_item.item3 {
    background: center center no-repeat;
    background-size: cover;
    background-image: url("/wp-content/themes/soleda/assets/img/top/service_3_sp.png");
  }
}
.un_topService_item.item3::before {
  background: linear-gradient(0deg, #e993d7 0%, #d576e8 100%);
}
.un_topService_item.item4 {
  background: center center no-repeat;
  background-size: cover;
  background-image: url("/wp-content/themes/soleda/assets/img/top/service_4.png");
}
@media screen and (max-width: 960px) {
  .un_topService_item.item4 {
    background: center center no-repeat;
    background-size: cover;
    background-image: url("/wp-content/themes/soleda/assets/img/top/service_4_sp.png");
  }
}
.un_topService_item.item4::before {
  background: linear-gradient(0deg, #76da92 0%, #14ad87 100%);
}
.un_topService_item_cont {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 40px;
}
@media screen and (max-width: 960px) {
  .un_topService_item_cont {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .un_topService_item_cont {
    gap: 0;
  }
}
.un_topService_item:nth-child(2n) {
  position: relative;
  top: 60px;
}
@media screen and (max-width: 960px) {
  .un_topService_item:nth-child(2n) {
    top: auto;
  }
}
.un_topService_item_cont {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.un_topService_num {
  opacity: 0.5;
  line-height: 1;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 133px;
  position: relative;
  left: -25px;
}
@media screen and (max-width: 560px) {
  .un_topService_num {
    left: -19px;
    font-size: 100px;
  }
}
.un_topService_subList {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 11px;
}
@media screen and (max-width: 960px) {
  .un_topService_subList {
    flex-direction: column;
  }
}
@media screen and (max-width: 560px) {
  .un_topService_subList {
    gap: 7px;
  }
}
.un_topService_subList_item {
  padding-left: 25px;
  position: relative;
}
.un_topService_subList_item::before {
  content: "";
  width: 17px;
  height: 1px;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #fff;
}
.un_topService_ttl {
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.35;
}
@media screen and (max-width: 1250px) {
  .un_topService_ttl {
    font-size: 25px;
  }
}
@media screen and (max-width: 560px) {
  .un_topService_ttl {
    margin-bottom: 12px;
  }
}
.un_topService_scrolleTxt {
  padding: 25px 0;
  border-top: 1px solid #D9DDE3;
  border-bottom: 1px solid #D9DDE3;
}
.un_topService_scrolleTxt_cont {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  position: relative;
  display: flex;
  gap: 20px;
  animation: right-left 30s linear infinite both;
}
@media screen and (max-width: 560px) {
  .un_topService_scrolleTxt_cont {
    width: 200%;
  }
}

/* =============================================
TOPピックアップ
============================================= */
.un_topPickup {
  position: relative;
}
.un_topPickup_chara {
  position: absolute;
  top: -0.9722222222vw;
  left: 16.25vw;
}
@media screen and (max-width: 560px) {
  .un_topPickup_chara {
    top: -20px;
    left: 0;
  }
}

/* =============================================
TOP それだについて
============================================= */
.un_topCompany {
  position: relative;
}
.un_topCompany_chara {
  right: 0;
  top: 20px;
}
@media screen and (max-width: 960px) {
  .un_topCompany_chara {
    position: absolute;
    top: 120px;
  }
}
@media screen and (max-width: 960px) {
  .un_topCompany_chara .el_chara_fukidashi {
    top: 10px;
    right: auto;
    left: -66px;
  }
}
.un_topCompany .un_chara_slide {
  display: none;
  padding-top: 75px;
}
.un_topCompany .un_chara_slide .swiper-wrapper .up {
  top: -45px;
}
@media screen and (max-width: 960px) {
  .un_topCompany .un_chara_slide {
    display: block;
  }
}
.un_topCompany .un_company {
  margin-top: 80px;
}
@media screen and (max-width: 960px) {
  .un_topCompany .un_company {
    margin-top: 100px;
  }
}
@media screen and (max-width: 960px) {
  .un_topCompany .un_company_chara {
    display: none;
  }
}
.swiper-wrapper {
  transition-timing-function: linear !important;
}

/* =============================================
ブログ
============================================= */
.un_topBlog {
  padding: 50px 0;
  background-color: #595959;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .un_topBlog {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .un_topBlog {
    padding: 50px 15px;
  }
}
/* =============================================
お問い合わせフォーム（contact form 7用）
============================================= */
.un_contact {
  padding-top: 110px;
}
.un_contact_cta {
  padding: 50px 15px;
  color: #fff;
  position: relative;
}
.un_contact_cta_back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.un_contact_btn {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.un_contact_btn::before {
  content: "";
  width: 29px;
  height: 1px;
  display: block;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  background: #000;
  background-size: contain;
  transition: all 0.3s;
  z-index: 1;
  pointer-events: none;
}
.un_contact_btn:hover:before, .un_contact_btn.back:hover:before {
  background-color: #fff;
  right: 20px;
}
.un_contact_btn:hover input, .un_contact_btn.back:hover input {
  background-color: #000;
  color: #fff;
}
.un_contact_btn input {
  width: 100%;
  padding: 15px 105px 15px 50px;
  background-color: #fff;
  display: inline-block;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 300;
  position: relative;
  letter-spacing: 0.08em;
  transition: all 0.3s;
  border: 1px solid #000;
  cursor: pointer;
  color: #000;
}
.un_contact_btn .wpcf7-spinner {
  display: none !important;
}
.un_contact_btn.back input {
  border-color: #D9DDE3;
  background-color: #D9DDE3;
}

.bl_form {
  max-width: 600px;
  margin: 100px auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
@media screen and (max-width: 960px) {
  .bl_form {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .bl_form {
    padding: 0;
    margin-top: 30px;
  }
}
.bl_form_ttl {
  text-align: center;
  margin-bottom: 55px;
  font-size: 25px;
  font-weight: 500;
}
@media screen and (max-width: 560px) {
  .bl_form_ttl {
    font-size: 23px;
    margin-bottom: 30px;
  }
}
.bl_form_item {
  margin-bottom: 30px;
}
.bl_form_item.checkbox p {
  margin-bottom: 12px;
}
.bl_form_item_post {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 10px;
}
.bl_form_scroll {
  height: 200px;
  margin-bottom: 50px;
  padding: 20px 15px;
  border: 1px solid #D9DDE3;
  overflow-y: scroll;
}
.bl_form_scroll p {
  font-size: 12px;
}
.bl_form_attention {
  padding-left: 65px;
}
.bl_form_attention.el_required::after {
  right: auto;
  left: 0;
}
@media screen and (max-width: 960px) {
  .bl_form_attention {
    padding-left: 55px;
  }
}
.bl_form_select {
  position: relative;
}
.bl_form_select::before {
  width: 18px;
  height: 9px;
  content: "";
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}
.bl_form .input_non {
  display: none;
}
.bl_form dl {
  margin-bottom: 40px;
}
@media screen and (max-width: 960px) {
  .bl_form dl {
    margin-bottom: 35px;
  }
}
.bl_form dt {
  margin-bottom: 15px;
  display: inline-block;
}
@media screen and (max-width: 960px) {
  .bl_form dt {
    margin-bottom: 10px;
  }
}
.bl_form input:not([type=checkbox]):not(.un_contact_btn input),
.bl_form textarea,
.bl_form select {
  padding: 15px 20px;
  margin-top: 12px;
  width: 100%;
  background-color: white;
  border: 2px solid #D9DDE3;
  font-size: 16px;
  color: #1F1F1F;
  transition: all 0.3s;
  border-radius: 5px;
}
@media screen and (max-width: 960px) {
  .bl_form input:not([type=checkbox]):not(.un_contact_btn input),
  .bl_form textarea,
  .bl_form select {
    padding: 20px 10px;
  }
}
.bl_form input[type=checkbox] {
  width: 20px;
  height: 20px;
}
.bl_form textarea {
  height: auto;
}
.bl_form .wpcf7-list-item.first {
  margin-left: 0;
}
.bl_form_txt {
  margin-bottom: 100px;
  font-size: 15px;
}
.bl_form_txt span {
  font-size: 15px;
}
.bl_form_attention {
  font-size: 14px;
}

.el_required {
  margin-right: 8px;
  padding: 6px 12px;
  color: #fff;
  background-color: #4b4b4b;
  font-size: 14px;
}
.el_required .wpcf7-form-control,
.el_required .wpcf7-form-control-wrap {
  width: 100%;
  display: inline-block;
}
.el_required .wpcf7-list-item label span {
  width: 200px;
}

/* =============================================
確認画面
============================================= */
.bl_form__comfirm .bl_form_item {
  padding-bottom: 20px;
  border-bottom: 1px solid #D9DDE3;
}
.bl_form__comfirm .un_contact_btnCont {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
@media screen and (max-width: 960px) {
  .bl_form__comfirm .un_contact_btnCont {
    flex-direction: column;
  }
}
.bl_form__comfirm .un_contact_btnCont .un_contact_btn {
  left: auto;
  transform: none;
}

/* =============================================
チェックボックス
============================================= */
.bl_checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 60px;
  position: relative;
  left: -25px;
}
@media screen and (max-width: 560px) {
  .bl_checkbox {
    margin-bottom: 50px;
  }
}
.bl_checkbox a,
.bl_checkbox .el_required {
  color: #1F1F1F;
}
.bl_checkbox a {
  margin-right: 10px;
  border-bottom: 1px solid #FCFCFC;
  display: inline-block;
  position: relative;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 960px) {
  .bl_checkbox a {
    margin-right: 5px;
  }
}
.bl_checkbox .el_required {
  display: flex;
  right: -5px;
}
.bl_checkbox input[type=checkbox] {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background-color: white;
  padding: 0;
  border: 1px solid #1F1F1F;
  position: relative;
  top: 3px;
}
.bl_checkbox .error {
  position: relative;
  left: -25px;
  bottom: -20px;
  margin-right: -85px;
}

/* =============================================
エラー
============================================= */
.bl_form .wpcf7-not-valid-tip {
  font-size: 12px;
}
.bl_form .wpcf7 form.invalid .wpcf7-response-output,
.bl_form .wpcf7 form.unaccepted .wpcf7-response-output,
.bl_form .wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #D9DDE3;
  text-align: center;
}

/* =============================================
会社紹介
============================================= */
.un_company {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 80px;
  align-items: start;
}
@media screen and (max-width: 960px) {
  .un_company {
    flex-direction: column;
  }
}
@media screen and (max-width: 1250px) {
  .un_company {
    gap: 30px;
  }
}
@media screen and (max-width: 960px) {
  .un_company {
    width: 100%;
    position: relative;
    gap: 50px;
    align-items: center;
  }
}
.un_company .un_chara_slide {
  padding-top: 75px;
  width: 100vw;
  display: none;
}
@media screen and (max-width: 960px) {
  .un_company .un_chara_slide {
    display: block;
  }
}
.un_company .swiper-wrapper .up {
  top: -45px;
}
.un_company .swiper-wrapper {
  transition-timing-function: linear !important;
}
.un_company_ttlChara {
  position: absolute;
  top: -30px;
  left: 400px;
}
@media screen and (max-width: 960px) {
  .un_company_ttlChara {
    left: 350px;
  }
}
@media screen and (max-width: 560px) {
  .un_company_ttlChara {
    left: auto;
    right: -9px;
  }
}
@media screen and (max-width: 960px) {
  .un_company_ttlChara .el_chara_fukidashi {
    top: -16px;
    right: auto;
    left: -66px;
  }
}
.un_company_chara {
  position: relative;
}
@media screen and (max-width: 960px) {
  .un_company_chara {
    display: none;
  }
}
.un_company_chara.left .el_chara:nth-child(2n) {
  left: -11.1111111111vw;
}
@media screen and (max-width: 1250px) {
  .un_company_chara.left .el_chara:nth-child(2n) {
    left: -6.9444444444vw;
  }
}
.un_company_chara.right .el_chara:nth-child(2n) {
  right: -11.1111111111vw;
}
@media screen and (max-width: 1250px) {
  .un_company_chara.right .el_chara:nth-child(2n) {
    right: -6.9444444444vw;
  }
}
.un_company_txt {
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
}
@media screen and (max-width: 960px) {
  .un_company_txt {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .un_company_txt {
    font-size: 16px;
  }
}
.un_company_txt .el_btn {
  margin-top: 60px;
}
@media screen and (max-width: 560px) {
  .un_company_txt .el_btn {
    margin-top: 0;
  }
}
.un_company_txt_top {
  margin-bottom: 80px;
}
@media screen and (max-width: 960px) {
  .un_company_txt_top {
    margin-bottom: 30px;
  }
}
.un_company_txt p {
  line-height: 1.8;
}
@media screen and (max-width: 560px) {
  .un_company_txt .lineAnimation {
    width: 80%;
  }
}
@media screen and (max-width: 560px) {
  .un_company_prof {
    width: 100%;
  }
}
@media screen and (max-width: 960px) {
  .un_company_prof_sp {
    max-width: 450px;
  }
}
/* =============================================
実績ページ
============================================= */
.un_works {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
@media screen and (max-width: 960px) {
  .un_works {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .un_works {
    gap: 20px;
  }
}
.un_works .bl_pickup_list {
  flex-wrap: wrap;
  justify-content: left;
}

/* =============================================
ブログページ
============================================= */
.un_blog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
@media screen and (max-width: 960px) {
  .un_blog {
    flex-direction: column;
  }
}
.un_blog_cont {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .un_blog_cont {
    flex-direction: column;
  }
}
.un_blog_main {
  max-width: 800px;
  width: calc(100% - 310px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .un_blog_main {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .un_blog_main {
    width: 100%;
  }
}
.un_blog_side {
  width: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .un_blog_side {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .un_blog_side {
    width: 100%;
  }
}
@media screen and (max-width: 960px) {
  .un_blog_side_cont {
    width: 100%;
  }
}
.un_blog_side_ttl {
  padding-bottom: 5px;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  border-bottom: 1px solid #000;
}
.un_blog_side_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media screen and (max-width: 960px) {
  .un_blog_side_list {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .un_blog_side_list {
    justify-content: stretch;
    align-items: stretch;
  }
}
.un_blog_side_list_item {
  padding: 10px;
  background-color: #fff;
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: all 0.3s;
  border: 1px solid #FCFCFC;
}
@media screen and (max-width: 960px) {
  .un_blog_side_list_item {
    width: 100%;
  }
}
.un_blog_side_list_item:hover {
  border-color: #D9DDE3;
}
.un_blog_side_list_item_img {
  width: 55px;
  height: 55px;
  overflow: hidden;
}
.un_blog_side_list_item_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.un_blog_side_list_item_ttl {
  width: calc(100% - 63px);
  font-size: 14px;
}
.un_blog_single {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 30px;
  width: 100%;
}
@media screen and (max-width: 960px) {
  .un_blog_single {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .un_blog_single {
    gap: 15px;
  }
}
.un_blog_single a {
  border-bottom: 1px solid #000;
  transition: all 0.3s;
}
.un_blog_single a:hover {
  color: #8d8d8d;
}
.un_blog_single h2 {
  width: 100%;
  margin-top: 50px;
  padding: 8px 30px;
  color: #fff;
  font-size: 30px;
  background: #000;
  font-weight: 400;
  line-height: 1.3;
}
@media screen and (max-width: 560px) {
  .un_blog_single h2 {
    padding: 8px 15px;
    font-size: 20px;
  }
}
.un_blog_single h3 {
  width: 100%;
  padding: 17px 0;
  font-size: 25px;
  border-bottom: 2px solid #D9DDE3;
  position: relative;
  font-weight: 400;
}
@media screen and (max-width: 560px) {
  .un_blog_single h3 {
    font-size: 20px;
  }
}
.un_blog_single h3::before {
  content: "";
  width: 45px;
  height: 2px;
  display: block;
  position: absolute;
  left: 0;
  bottom: -2px;
  background: #000;
}
.un_blog_single h5 {
  font-size: 18px;
}
@media screen and (max-width: 960px) {
  .un_blog_single h5 {
    font-size: 16px;
  }
}
.un_blog_single p {
  width: 100%;
  margin-bottom: 10px;
}
.un_blog_single > ul, .un_blog_single > ol {
  width: 100%;
  padding: 30px 50px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 20px;
  border: 1px solid #D9DDE3;
}
@media screen and (max-width: 960px) {
  .un_blog_single > ul, .un_blog_single > ol {
    flex-direction: column;
  }
}
@media screen and (max-width: 560px) {
  .un_blog_single > ul, .un_blog_single > ol {
    padding: 30px 15px;
  }
}
.un_blog_single ul li {
  padding-left: 30px;
  position: relative;
}
.un_blog_single ul li::before {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  top: 6px;
  left: 0;
  background: #D9DDE3;
}
.un_blog_single ul li ul {
  margin-top: 10px;
}
.un_blog_single ul li ul li {
  padding-left: 20px;
}
.un_blog_single ul li ul li::before {
  width: 5px;
  height: 5px;
  background-color: #000;
  border-radius: 100%;
  top: 13px;
}
.un_blog_single .hcb_wrap.hcb_wrap {
  width: 100%;
}
.un_blog_single .wp-block-spacer {
  height: 30px !important;
}
.un_blog_postLink {
  width: 100%;
  padding: 30px 0;
  border-top: 1px solid #D9DDE3;
  display: flex;
  justify-content: space-between;
  gap: 20%;
}
.un_blog_postLink a {
  color: #8d8d8d;
}
.un_blog_postLink_item {
  width: 50%;
}
.un_blog_related {
  padding: 50px 0;
  background-color: #595959;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .un_blog_related {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .un_blog_related {
    padding: 50px 15px;
  }
}
.un_blog_mokuji {
  width: 80%;
  padding: 30px 60px;
  position: relative;
}
@media screen and (max-width: 960px) {
  .un_blog_mokuji {
    width: 100%;
    padding: 15px;
  }
}
.un_blog_mokuji::before, .un_blog_mokuji::after {
  content: "";
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background-size: cover;
  z-index: -1;
}
.un_blog_mokuji::before {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
}
.un_blog_mokuji::after {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #FCFCFC;
}
.un_blog_mokuji_ttl {
  display: inline-block;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 25px;
  margin-bottom: 30px;
}
.un_blog_mokuji_list {
  counter-reset: li;
}
.un_blog_mokuji_list li {
  padding-left: 40px;
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
}
@media screen and (max-width: 960px) {
  .un_blog_mokuji_list li {
    font-size: 16px;
  }
}
.un_blog_mokuji_list li::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-weight: bold;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  counter-increment: li;
  content: "0" counter(li);
}
.un_blog_mokuji_list li::after {
  content: "";
  width: 1px;
  height: 15px;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
}
.un_blog_mokuji_list a {
  transition: all 0.3s;
}
.un_blog_mokuji_list a:hover {
  opacity: 0.6;
}
.un_blog_mokuji_close {
  padding: 5px 10px;
  font-size: 14px;
  background-color: #D9DDE3;
  display: inline-block;
  position: absolute;
  top: 30px;
  right: 30px;
}

/* =============================================
シングルページ共通
============================================= */
.un_single {
  padding-top: 110px;
}
.un_single.works .un_single_top_cont {
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .un_single.works .un_single_top_cont {
    gap: 20px;
  }
}
.un_single.works .un_single_ttl {
  font-size: 55px;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  font-weight: 400;
}
@media screen and (max-width: 960px) {
  .un_single.works .un_single_ttl {
    font-size: 40px;
  }
}
@media screen and (max-width: 560px) {
  .un_single.works .un_single_ttl {
    font-size: 25px;
    line-height: 1.3;
  }
}
.un_single.works img {
  border: 1px solid #D9DDE3;
}
.un_single.works .wp-block-columns {
  width: 80%;
  margin: 0 auto;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .un_single.works .wp-block-columns {
    width: 100%;
  }
}
.un_single.blog .un_blog_cont {
  padding: 100px 0;
}
@media screen and (max-width: 960px) {
  .un_single.blog .un_blog_cont {
    padding: 50px 0;
  }
}
.un_single_top {
  padding: 50px 0;
  border-bottom: 1px solid #D9DDE3;
}
@media screen and (max-width: 960px) {
  .un_single_top {
    padding: 30px 0;
  }
}
@media screen and (max-width: 560px) {
  .un_single_top {
    padding-top: 15px;
  }
}
.un_single_top_cont {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 0;
  gap: 20px;
}
@media screen and (max-width: 960px) {
  .un_single_top_cont {
    flex-direction: column;
  }
}
.un_single_cont {
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .un_single_cont {
    flex-direction: column;
  }
}
@media screen and (max-width: 960px) {
  .un_single_cont {
    padding: 50px 0;
  }
}
.un_single_mainImg {
  width: 100%;
  aspect-ratio: 1.6/1;
  background: center center no-repeat;
  background-size: cover;
  background-size: cover;
}
.un_single_ttl {
  line-height: 1.2;
  font-size: 36px;
  font-weight: 500;
}
@media screen and (max-width: 960px) {
  .un_single_ttl {
    font-size: 26px;
  }
}
@media screen and (max-width: 560px) {
  .un_single_ttl {
    font-size: 23px;
  }
}
.un_single_tag {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 10px;
}
.un_single_tag_item {
  padding: 3px 10px;
  background-color: #000;
  font-size: 16px;
  color: #fff;
}
@media screen and (max-width: 960px) {
  .un_single_tag_item {
    padding: 1px 10px;
    font-size: 14px;
  }
}
.un_single_info {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 60px;
}
@media screen and (max-width: 960px) {
  .un_single_info {
    flex-direction: column;
    align-items: start;
    gap: 25px;
  }
}
.un_single_info_top {
  display: flex;
  justify-content: left;
  align-items: start;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .un_single_info_top {
    gap: 20px;
  }
}
.un_single_info_txt {
  font-size: 15px;
}
.un_single_info_txt:first-child {
  padding-right: 30px;
  border-right: 1px solid #D9DDE3;
}
@media screen and (max-width: 960px) {
  .un_single_info_txt:first-child {
    padding-right: 25px;
  }
}
.un_single_info_ttl {
  margin-bottom: 10px;
  color: #8d8d8d;
}
@media screen and (max-width: 960px) {
  .un_single_info_ttl {
    font-size: 13px;
  }
}
.un_single_info .el_btn {
  border: none;
  border-bottom: 1px solid #000;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: 20px;
}
.un_single_info .el_btn::before {
  display: none;
}
.un_single_info .el_btn:hover {
  color: #8d8d8d;
}
.un_single_siyou {
  width: 100%;
  margin: 100px 0 0;
  padding: 30px;
  border-radius: 5px;
  border: 1px solid #D9DDE3;
  background-color: #fff;
}
@media screen and (max-width: 960px) {
  .un_single_siyou {
    margin-top: 50px;
    padding: 15px;
  }
}
.un_single_siyou_ttl {
  margin-bottom: 20px;
  font-size: 20px;
  color: #8d8d8d;
}
@media screen and (max-width: 960px) {
  .un_single_siyou_ttl {
    font-size: 18px;
  }
}
.un_single_siyou_list {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.un_single_siyou_item {
  padding: 3px 16px;
  background: #8d8d8d;
  font-size: 16px;
  color: #fff;
  border-radius: 20px;
}
@media screen and (max-width: 960px) {
  .un_single_siyou_item {
    font-size: 14px;
  }
}
/* =============================================
MVのテキストアニメーション
============================================= */
.txtAnimation {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.txtAnimation_item {
  display: flex;
  position: absolute;
  flex-direction: row;
  top: 0;
  left: 0;
}
.txtAnimation_item.item1 {
  animation: right-left 60s linear infinite both;
  animation-delay: -3s;
}
.txtAnimation_item.item1.delay {
  animation-delay: 15s;
}
.txtAnimation_item.item2 {
  animation: right-left 120s linear infinite both;
  animation-delay: 3s;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 560px) {
  .txtAnimation_item.item2 {
    animation: right-left 60s linear infinite both;
  }
}
.txtAnimation_item.item3 {
  flex-direction: column;
  animation: bottom-top 70s linear infinite both;
}
.txtAnimation_item.item3.delay {
  animation-delay: 15s;
}
.txtAnimation_item.item3 li {
  height: 250vh;
}
.txtAnimation_item.item4 {
  flex-direction: column;
  animation: bottom-top 120s linear infinite both;
}
.txtAnimation_item.item4.delay {
  animation-delay: -5s;
}
.txtAnimation_item.item4 li {
  height: 250vh;
}
.txtAnimation_item.item5 {
  flex-direction: column;
  animation: top-bottom 100s linear infinite both;
}
.txtAnimation_item.item5.delay {
  animation-delay: 15s;
}
.txtAnimation_item.item5 li {
  height: 250vh;
}
.txtAnimation_item li {
  width: 100vw;
  height: 100vh;
}
@media screen and (max-width: 560px) {
  .txtAnimation_item li {
    width: 200vw;
    height: 150vh;
  }
}
.txtAnimation_item li.start-yoko {
  width: 250vw;
}

@keyframes right-left {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes bottom-top {
  0% {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes top-bottom {
  0% {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(50%);
  }
}
@keyframes floating {
  0% {
    transform: translateX(0%) translateY(0%);
  }
  50% {
    transform: translateX(0%) translateY(10%);
  }
  100% {
    transform: translateX(0%) translateY(0%);
  }
}
/* =============================================
MVの実績浮遊アニメーション
============================================= */
@keyframes floating {
  0% {
    transform: translateX(0%) translateY(0%);
  }
  50% {
    transform: translateX(0%) translateY(10%);
  }
  100% {
    transform: translateX(0%) translateY(0%);
  }
}
/* =============================================
流れる英字テキスト
============================================= */
.scrolleTxt {
  width: 10.4166666667vw;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  z-index: -1;
}
.scrolleTxt img {
  animation: txt-bottom-top 20s linear infinite both;
}
.scrolleTxt.yoko {
  width: 100vw;
  height: 13.0555555556vw;
  top: auto;
  bottom: -3px;
}
@media screen and (max-width: 960px) {
  .scrolleTxt.yoko {
    bottom: 10px;
    height: 95px;
  }
}
.scrolleTxt.yoko img {
  width: auto;
  height: 100%;
  animation: txt-right-left 20s linear infinite both;
  position: absolute;
  bottom: 0;
}
.scrolleTxt.yoko.long img {
  animation-delay: -8s;
  animation-duration: 40s;
}

@keyframes txt-bottom-top {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes txt-right-left {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
/* =============================================
フワッとフェードイン
============================================= */
.fadein,
.fadein_stay {
  /* 最初は非表示 */
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: transform 1s, opacity 1s, visibility 1s;
}

.is-fadein {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* =============================================
スライドイン
============================================= */
.container {
  overflow: hidden;
}

.slidein {
  /* 装飾に関わるスタイルは省略 */
  margin: 50px auto;
  transition: 2s cubic-bezier(0.75, 0, 0.25, 1);
}

.slide_left {
  transform: translateX(calc(-50vw - 50%));
}

.slide_right {
  transform: translateX(calc(50vw + 50%));
}

.show {
  transform: translateX(0);
}

/* =============================================
下線を引くアニメーション
============================================= */
.js_line_anime {
  position: relative;
}
.js_line_anime.is_active::before {
  content: "";
  width: 0;
  height: 3px;
  display: block;
  position: absolute;
  left: 0;
  bottom: -10px;
  background: linear-gradient(90deg, #64CFB4 0%, #18B3FB 100%);
  background-size: cover;
  animation: line_anime 0.6s linear both;
}
.js_line_anime.loading::before {
  animation: line_anime 0.3s linear both;
  animation-delay: 0.8s;
}
@keyframes line_anime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}/*# sourceMappingURL=style.css.map */