@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*-----------------------------------------------------------------
                           サイト全体
-----------------------------------------------------------------*/

/* パンくずと記事タイトル間の余白を狭く */
.l-content {
        padding-top: 2em;
}
/* メインコンテンツの横幅(メイン・サイドバー間の余白を24pxに) */
@media (min-width: 960px) {
    .-sidebar-on .l-mainContent {
        width: calc(100% - var(--swl-sidebar_width) - 24px);
    }
}

/* ヘッダーのロゴ画像の上下の余白を16px->8pxに(PC) */
@media (min-width: 960px) {
    .-series .l-header__logo {
        padding: 8px 0;
    }
}
.l-fixHeader__logo {
    padding: 8px 0;
}

/* トップページのメインビジュアルの画像表示位置調整(PC) */
@media (min-width: 960px)  {
	.u-obf-cover {
		object-position: 50% 60%;
	}
}

/*-----------------------------------------------------------------
                           記事ページ
-----------------------------------------------------------------*/


/* マーカー */
article strong {
	background: linear-gradient(transparent 64%, var(--color_mark_orange) 0%);
}

/* DMMのPR枠、ボタン */
p.vivi-aicampus__head {
  margin: 4em 0 2em;
  padding: .5em 0 .5em 16px;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.4;
  border-left: solid 6px var(--color_htag);
  position: relative;
  z-index: 1;
}
@media (min-width: 600px) {
    p.vivi-aicampus__head {
        font-size: 1.4em;
    }
}
  
ul.vivi-aicampus__list {
  list-style: none;
  margin-top: 16px;
  padding: 0 0 0 24px;
}
ul.vivi-aicampus__list li {
    position: relative;
  font-size: 16px;
}
ul.vivi-aicampus__list li::before {
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background-color: #309da4;
    left: -22px;
    top: 2px;
  content: '';
    display: block;
    position: absolute;
}
ul.vivi-aicampus__list li::after {
  width: 10px;
    height: 6px;
    border: solid #fff;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    top: 7px;
    left: -18px;
  content: '';
    display: block;
    position: absolute;
}
  
.vivi-aicampus__bln {
  margin: 24px auto;
  text-align: center;
}
.vivi-aicampus__bln a {
  position: relative;
  display: inline-block;
  padding: 12px 16px;
  max-width: 480px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-decoration: none;
  border: 1.5px solid #ddd;
  border-radius: 4px;
  color: #333;
  background: #fff;
  animation: 1s vivi-bln-jump infinite alternate ease-in-out;
}
.vivi-aicampus__bln a:before {
    content: '';
    position: absolute;
    bottom: -18.5px;
    left: 50%;
    margin-left: -11px;
    border: 11px solid transparent;
    border-top: 11px solid #fff;
    z-index: 2;
}
.vivi-aicampus__bln a:after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #ddd;
    z-index: 1;
}
@keyframes vivi-bln-jump {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-10px);
    }
}

.vivi-aicampus__btn {
  text-align: center;
}
.vivi-aicampus__btn a {
  display: inline-block;
  padding: 16px 24px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  color: #fff;
  background: linear-gradient(to right, #309da4, #2a5b9a);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  transition: .3s;
}
.vivi-aicampus__btn a:hover {
  box-shadow: unset;
  transform: translateY(4px);
}

.vivi-aicampus__arw {
  display: inline-block;
  vertical-align: middle;
  margin-left: 16px;
  color: #fff;
  line-height: 1;
  position: relative;
}
.vivi-aicampus__arw::before {
  content: '';
  width: 10.4px;
  height: 10.4px;
  border: 2px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  transform-origin: top right;
  position: absolute;
  top: 50%;
  right: -1px;
  box-sizing: border-box;
}