@charset "UTF-8";
/* ----------------------------------------------------------------------
 TOP PAGE
---------------------------------------------------------------------- */
/* TOP COMMON */
.box-link { display: flex; justify-content: center; align-items: center; width: 70%; max-width: 300px; height: 50px; margin: 50px auto 0; border: 1px solid #000}
.main-top section { padding: 40px 0}
.main-top img { max-width: 100%; height: auto}
.main-top p { line-height: 1.8}
.main-top .note { font-size: 12px}
.main-top h2 { margin-bottom: 20px; font-size: 24px; font-weight: 500; text-align: center}
.main-top .text-summary { margin-bottom: 30px}
@media screen and (min-width: 768px) { 
  .box-link { width: 320px}
  .main-top section { padding: 80px 0}
  .main-top h2 { font-size: 30px}
}
/* メインビジュアル */
.main-top .mv { position: relative; background: url(../img/top/bg_mv_sp.jpg) no-repeat top center/cover}
.main-top .mv-inr { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; min-width: 320px; padding: 0 20px; z-index:2}
.main-top .mv-inr .ttl { position: absolute; top: 86px; left: 20px}
.main-top .mv-inr .ttl img { max-width: 70%}
.main-top .mv-inr h1 { position: absolute; top: 36px; right: 20px; padding: 6px 10px; color: #fff; font-size: 8px; text-align: center; font-weight: 300; line-height: 1.3; border: 1px solid #fff; border-radius: 6px}
.main-top .btn-area.main { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 6}
@media (min-width: 375px) and (max-width: 389px) {
  .main-top .mv-inr h1 { font-size: 12px}
  .main-top .mv-inr .ttl img { max-width: 80%;  filter: drop-shadow(20px 20px 20px #000)}
}
@media (min-width: 390px) and (max-width: 440px) {
  .main-top .mv-inr h1 { font-size: 13.5px}
  .main-top .mv-inr .ttl img { max-width: 80%}
}
@media (min-width: 441px) and (max-width: 767px) {
  .main-top .mv-inr h1 { font-size: 17px}
  .main-top .mv-inr .ttl img { max-width: 90%}
}
@media (min-width: 768px) and (max-width: 1029px) {
  .main-top .mv-inr h1 { font-size: 20px}
  .main-top .mv-inr .ttl img { max-width: 80%}
}
@media screen and (max-width: 1029px) {
  .main-top .mv { min-height: 770px}
}
@media screen and (min-width: 1030px) {
  .main-top .mv { height: 850px; background: #000 url(../img/top/bg_mv_pc.jpg) no-repeat top center/auto 100%}
  .main-top .mv-inr .ttl { top: 30px; left: 0}
  .main-top .mv-inr .ttl img { max-width: 100%}
  .main-top .mv-inr h1 { top: 30px; right: 0; padding: 8px 35px; font-size: 28px}
  .main-top .mv-inr { width: 1030px; height: calc(100% - 80px); position: absolute; left: 50%; transform: translateX(-50%)}
}
/* ボタンエリア */
.main-top .btn-area { padding: 30px 0; background: #191919}
.main-top .btn-area.main { background: rgba(25,25,25,0.9)}
.main-top .btn-area .btn { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; font-size: 18px; font-weight: bold; background: linear-gradient(to bottom,  #f9a502 60%,#c88402 100%); border-radius: 100vh}
@media screen and (min-width: 768px) { 
  .main-top .btn-area .btn { width: 60%; height: 60px; margin: auto}
  .main-top .btn-area .btn:hover { color: #f9a502; background: #fff}
}
/* dipサービス */
.service-dip { padding: 0 20px 40px!important}
.service-dip .text { margin: 10px 0 40px; font-size: 16px; font-family: serif; font-weight: 600; text-align: center}
.service-dip .ttl { margin-bottom: 10px; padding: 7px 15px; color: #fff; line-height: 1.3; text-align: center; background: #231815}
.service-dip .disc { margin-bottom: 30px}
@media screen and (min-width: 768px) {
  .service-dip { padding: 0 20px 60px!important}
  .service-dip .text { margin: 20px 0 60px; font-size: 2.1359vw}
  .service-dip .ttl {font-size: 20px}
  .service-dip .img-service { max-width: 80%; margin: 50px 5% 0 auto}
  .service-dip .ttl { font-size: 20px}
  .service-dip .disc { text-align: center}
}
@media screen and (min-width: 1030px) {
  .service-dip .text { font-size: 22px}
}
/* メディア・AI・DX */
.main-top .service-media ul, .main-top .service-branding ul, .main-top .service-dx ul { display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 14px}
.main-top .service-media ul li, .main-top .service-branding ul li, .main-top .service-dx ul li { width: 100%; padding: 20px; border: 1px solid #ddd; border-radius: 8px}
.main-top .service-media ul li figure { max-width: 80%; margin: 30px auto 0}
.main-top .service-media .box-outline, .main-top .service-branding .box-outline, .main-top .service-dx .box-outline { display: flex; justify-content: space-between; flex-wrap: wrap}
.main-top .service-media h3, .main-top .service-branding h3, .main-top .service-dx h3 { margin-bottom: 10px; font-size: 16px; line-height: 1.5}
.main-top .service-media .btn, .main-top .service-branding .btn, .main-top .service-dx .btn { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; margin: 30px auto 0; color: #fff; font-size: 14px; background: #333; border-radius: 10px}
.main-top .service-media .box-outline .box-image .logo, .main-top .service-branding .box-outline .box-image .logo, .main-top .service-dx .box-outline .box-image .logo { margin-bottom: 10px}
.main-top .service-media .note { margin-top: 10px}
@media screen and (max-width: 767px) {
  .main-top .service-media ul li:nth-child(n+2),
  .main-top .service-dx ul li:nth-child(n+2) {  margin-top: 30px}
  .main-top .service-media .box-outline .box-image, .main-top .service-branding .box-outline .box-image, .main-top .service-dx .box-outline .box-image { width: 65%; margin: 30px auto 0; text-align: center}
}
@media screen and (min-width: 768px) { 
  .main-top .service-media ul li, .main-top .service-branding ul li, .main-top .service-dx ul li { display: flex; justify-content: center; flex-direction: column; width: 48%}
  .main-top .service-media ul li:nth-child(n + 3) { margin-top: 30px}
  .main-top .service-media ul li figure { margin: auto}
  .main-top .service-media .box-outline, .main-top .service-branding .box-outline, .main-top .service-dx .box-outline { flex-grow: 2.1}
  .main-top .service-media .box-outline .box-text, .main-top .service-branding .box-outline .box-text, .main-top .service-dx .box-outline .box-text { width: 50%}
  .main-top .service-media .box-outline .box-image, .main-top .service-branding .box-outline .box-image, .main-top .service-dx .box-outline .box-image { width: 44%}
  .main-top .service-media .box-outline .box-image .logo, .main-top .service-branding .box-outline .box-image .logo, .main-top .service-dx .box-outline .box-image .logo { margin-bottom: 20px}
  .main-top .service-media .btn, .main-top .service-branding .btn, .main-top .service-dx .btn { width: 90%; height: 60px; font-size: 1.456vw}
  .main-top .service-media .btn:hover, .main-top .service-dx .btn:hover, .main-top .service-branding .btn:hover { opacity: .8}
}
@media screen and (min-width: 1030px) { 
  .main-top .service-media .btn, .main-top .service-branding .btn, .main-top .service-dx .btn { font-size: 15px}
}
/* BRANDING */
.main-top .service-branding { padding-top: 0}
@media screen and (max-width: 767px) {
  .main-top .service-branding ul li:nth-child(n + 2) { margin-top: 30px}  
}
@media screen and (min-width: 768px) { 
  .main-top .service-branding .box-btn { flex-grow: 1}
}
/* DX */
.main-top .service-dx { padding-top: 0}
.main-top .service-dx h3 { color: #0093d0}
.main-top .service-dx .btn { background: #1a86d1}
.main-top .service-dx .ul-other { margin-top: 40px}
.main-top .service-dx .ul-other li { padding: 0; border: 0}
.main-top .service-dx .ul-other a { position: relative; display: flex; justify-content: center; flex-direction: column; padding: 20px; border: 1px solid #ddd; border-radius: 8px}
.main-top .service-dx .ul-other a::after { position: absolute; right: 15px; content: ""; width: 14px; height: 14px; border-top: 4px solid #1a86d1; border-right: 4px solid #1a86d1; transform: rotate(45deg)}
.main-top .service-dx .ul-other .catch { margin: 0 0 5px 5px!important; font-size: 13px; line-height: 1.3!important; font-weight: bold}
@media screen and (max-width: 767px) {
  .main-top .service-dx .ul-other a:nth-of-type(n + 2) { margin-top: 20px}
  .main-top .service-dx .ul-other .catch { padding-right: 30px}
  .main-top .service-dx .ul-other a img { width: 90%}
}
@media screen and (min-width: 768px) { 
  .main-top .service-dx .ul-other a::before, .main-top .service-dx .ul-other a::after { right: 20px}
  .main-top .service-dx .ul-other a:nth-of-type(n + 3) { margin-top: 20px}
  .main-top .service-dx .ul-other a:hover { color: #0093d0; border-color: #0093d0}
}
/* TOPPICS */
.main-top .news { padding: 40px 20px; color: #fff; background: #000}
.main-top .news-outline { position: relative; display: flex; flex-wrap: wrap; padding: 0 20px}
.main-top .news-outline .box-left, .main-top .news-outline .box-right { width: 100%}
.main-top .box-news { width: 100%}
.main-top .box-news .no-image { display: flex; justify-content: center; align-items: center; width: 100%; height: 190px; color: #333; font-size: 18px; font-weight: bold; background: #ccc}
.main-top .box-news figure img { width: 100%; height: auto; object-fit: cover}
.main-top .news-outline .box-news .summary { margin: 30px 0 10px; font-size: 14px; line-height: 1.5}
.main-top .box-news .summary a { color: #fff}
.main-top .box-news .summary a:hover { color: #0499cc}
.main-top .box-news .date { color: #999; font-size: 14px}
@media screen and (max-width: 767px) {
  .main-top .box-news { margin-bottom: 50px; padding-bottom: 30px; border-bottom: 0.5px solid #fff}
  .main-top .box-news:last-of-type { margin-bottom: 0; padding-bottom: 0; border: 0}
  .main-top .slide-arrow { display: none}
}
@media screen and (min-width: 768px) {
  .main-top .news { padding: 40px 0 20px}
  .main-top .news h2 { text-align: left}
  .main-top .news-outline { max-width: 1030px; margin: auto; justify-content: space-between}
  .main-top .news-outline .box-right .slick-slider { position: static!important}
  .main-top .news-outline .box-left { width: 260px}
  .main-top .news-outline .box-right { width: calc(100% - 260px)}
  .slider-news .slick-list {  padding: 0 20% 0 0!important}
  .main-top .box-news { margin-right: 45px}
  .main-top .box-news .no-image { height: 140px; font-size: 14px}
  .main-top .box-news figure { display: flex; justify-content: center; align-items: center; height: 140px; overflow: hidden}
  .main-top .box-news figure img {  transition: 0.5s all}
  .main-top .box-news figure img:hover { transform: scale(1.1)}
  .main-top .box-news figure:hover { cursor: pointer}
  .main-top .slide-arrow { position: absolute; top: 50px; width: 50px; height: 50px; color: #fff; font-size: 30px; border: 1px solid #fff; border-radius: 50px; z-index: 5}
  .main-top .slide-arrow:hover { color: #fba026; border-color: #fba026}
  .main-top .prev-arrow { left: 20px}
  .main-top .next-arrow { left: 100px}
}
/* ユーザーの声 */
.main-top .sec-voice { background: #d9dbdb}
.main-top .sec-voice input[name="tab_item"] { display: none}
.main-top .sec-voice .tabs { display: flex; justify-content: space-between; flex-wrap: wrap}
.main-top .sec-voice .tabs label img { width: 70%; height: auto; border-radius: 100%}
.main-top .sec-voice .tabs label span { display: block; margin-top: 10px; font-size: 13px; text-align: center}
.main-top .sec-voice .tabs input:checked + label img { border: 3px solid #333}
.main-top .sec-voice .tabs .tab_content { width: 100%; display: none; margin-top: 50px; padding: 20px; line-height: 1.8; background: #fff; border-radius: 12px}
#voice01:checked ~ #voice01_content,
#voice02:checked ~ #voice02_content,
#voice03:checked ~ #voice03_content, 
#voice04:checked ~ #voice04_content, 
#voice05:checked ~ #voice05_content, 
#voice06:checked ~ #voice06_content { display: block}
.main-top .sec-voice .tabs .tab_content strong { display: inline-block; margin-bottom: 10px; padding: 5px 20px; color: #fff; font-size: 12px; text-align: center; background: #333}
.main-top .sec-voice .tabs .tab_content p:first-of-type{ margin-bottom: 50px}
@media screen and (max-width: 767px) {
  .sec-voice .tabs label:nth-of-type(n + 4) { margin-top: 20px}
}
@media screen and (min-width: 768px) { 
  .main-top .sec-voice .tabs label { position: relative; width: 16%}
  .main-top .sec-voice .tabs label:hover { cursor: pointer}
  .main-top .sec-voice .tabs label img { width: 100px}
  .main-top .sec-voice .tabs input:checked + label:after { content: ""; position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 30px solid #fff}
}
/* 導入事例 */
.top-case-study { padding: 60px 0}
.top-case-study .list-case-study { display: flex; justify-content: space-between; flex-wrap: wrap}
.top-case-study .list-case-study li { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px}
.top-case-study .list-case-study li .company-thum { position: relative; width: 100%; z-index: 1}
.top-case-study .list-case-study li .company-thum img { width: 100%; height: 170px; object-fit: cover}
.top-case-study .list-case-study li .company-thum .icon-new { position: absolute; top: 0; left: 0; display: block; width: 50px; height: 20px; line-height: 20px; color: #fff; font-size: 10px; text-align: center; font-weight: bold; background: #f9a502; z-index: 3}
.top-case-study .list-case-study li .company-logo { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; padding: 1px 0; text-align: center; background: rgba(255,255,255,.7)}
.top-case-study .list-case-study li .company-logo img { width: auto; height: 28px}
.top-case-study .company-name { margin-top: 15px; font-size: 14px; font-weight: bold}
.top-case-study .single-ttl { font-size: 16px; font-weight: bold; line-height: 1.5}
.top-case-study .single-date { color: #999; font-size: 12px}
.top-case-study .ul-tag { position:relative; margin: 10px 0 0!important; color: #0099cc; font-size: 13px; line-height: 1.5}
.top-case-study .ul-tag li { width: 100%!important; padding: 0 0 0 20px; border: 0}
.top-case-study .ul-tag li:before { font-family:'design_plus'; color:#0099cc; font-size:15px; line-height:1; position: absolute; top: 3px; left: 0}
.top-case-study .ul-tag li.post_tag:before { content:'\e935'}
@media screen and (max-width: 767px) {
 .top-case-study .list-case-study li:nth-child(n+2) { margin-top: 30px}
}
@media screen and (min-width: 768px) {
  .top-case-study .list-case-study li { display: flex; flex-direction: column; width: 32%}
  .top-case-study .list-case-study li .company-thum img { height: 160px}
  .top-case-study .list-case-study li .company-logo img { width: auto; height: 28px}
  .top-case-study .list-case-study li .box-tagtop { flex-grow: 1}
  .top-case-study .ul-tag li { display: block}
}
/* 資料ダウンロード */
.main-top .material-area { padding: 26px 0; color: #fff; background: #000211 url(../img/top/bg-material.jpg) no-repeat center right/auto 100%}
.main-top .material-area .contents-inr { display: flex; justify-content: space-between; flex-direction: row-reverse; flex-wrap: wrap}
.main-top .material-area .box-right, .main-top .material-area .box-left { width: 100%}
.main-top .material-area a { position: relative; display: flex; justify-content: center; align-items: center; width: 300px; height: 50px; margin: 20px auto 0; color: #000211; font-size: 16px; font-weight: bold; background: linear-gradient(to bottom,  #f9a502 60%,#c88402 100%); border-radius: 50px}
.main-top .arrow-right::after {  content: "";  position: absolute;  margin: auto;  top: 0;  bottom: 0;  right: 20px;  width: 15px;  height: 15px;  border: 4px solid;  border-color:  #000211 #000211 transparent transparent;  transform: rotate(45deg)}
@media screen and (max-width: 767px) {
  .main-top .material-area .box-left { margin-top: 30px}
}
@media screen and (min-width: 768px) {
  .main-top .material-area { width: 100%; padding: 40px 0}
  .main-top .material-area a:hover { opacity: 0.8}
  .main-top .material-area .contents-inr { align-items: flex-end}
  .main-top .material-area .box-left { width: 48%}
  .main-top .material-area .box-right { width: 45.5%}
}
/* よくある質問 */
.main-top .sec-faq .ttl { margin: 50px 0 10px!important;  font-weight: bold; font-size: 16px}
.main-top .sec-faq .ttl::before { content: "â– "; margin-right: 5px}
.main-top .sec-faq .ttl:first-of-type { margin-top: 0!important}
.main-top .sec-faq a { color: #fba026; text-decoration: underline}
.main-top .sec-faq .accordion { margin-bottom: 20px; border: 1px solid #ccc}
.main-top .sec-faq .toggle { display: none}
.main-top .sec-faq .box-faq { position: relative}
.main-top .sec-faq .question p { margin: 0!important; line-height: 1.3!important}
.main-top .sec-faq .question, .sec-faq .answer { backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s}
.main-top .sec-faq .question { display: block; padding: 15px 40px}
.main-top .sec-faq .question::after, .sec-faq .question::before { content: ""; position: absolute; right: 1.25em; top: 45%; width: 3px; height: 1em; background-color: #fba026; transition: all 0.3s}
.main-top .sec-faq .question::after { transform: rotate(90deg)}
.main-top .sec-faq .answer { max-height: 0; overflow: hidden}
.main-top .sec-faq .answer-inr { padding: 15px}
.main-top .sec-faq .answer .lead { margin-bottom: 30px!important; padding-bottom: 30px; font-size: 16px; font-weight: 500; border-bottom: 1px dashed #ddd}
.main-top .sec-faq .toggle:checked + .question { color: #fff; background: #fba026}
.main-top .sec-faq .toggle:checked + .question + .answer { max-height: 500px; transition: all 1.5s}
.main-top .sec-faq .toggle:checked + .question::before { transform: rotate(90deg) !important}
.main-top .sec-faq .toggle:checked + .question::after {background-color: #fff}
.main-top .sec-faq .ic-q { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; color: #fba026; font-size: 21px; font-style: normal; font-weight: normal}
.main-top .sec-faq .ic-a { display: inline-block; width: 40px; height: 40px; line-height: 36px; margin-right: 10px; color: #fff; font-size: 30px; font-style: normal; text-align: center; background: #fba026; border-radius: 40px}
@media screen and (max-width: 767px) {
}
@media screen and (min-width: 768px) { 
  .main-top .sec-faq .question { padding: 20px 40px}
  .main-top .sec-faq .question:hover { cursor: pointer}
  .main-top .sec-faq .question::after, .sec-faq .question::before { right: 1.25em; top: 1.25em}
  .main-top .sec-faq .answer-inr { padding: 30px}
}
/*アクセスランキング */
.main-top .sec-ranking { background: #f0f0f0}
.main-top .sec-ranking h3 { padding-bottom: 20px; font-size: 20px; text-align: center; border-bottom: 3px solid #0399cc}
.main-top .sec-ranking ul  { display: flex; justify-content: space-between; flex-wrap: wrap}
.main-top .sec-ranking ul li { width: 100%; padding: 20px; background: #fff; border-radius: 6px}
.main-top .sec-ranking .thumbnail { position: relative; width: 100%; height: 170px; margin-bottom: 20px; overflow: hidden}
.main-top .sec-ranking .rank { position: absolute; top: 0; left: 0; width: 75px; height: 30px; line-height: 30px; color: #fff; font-size: 20px; text-align: center; font-weight: bold; background: #0499cc}
.main-top .sec-ranking .rank span:after { content: "位"; margin-left: 3px; font-size: 15px}
.main-top .sec-ranking ul.document { margin: 30px 0 50px}
.main-top .sec-ranking ul.column { margin: 30px 0 0}
.main-top .sec-ranking ul.column  .thumbnail img { width: 100%; height: 170px; object-fit: cover}
.main-top .sec-ranking .title { font-size: 16px; font-weight: bold}
.main-top .sec-ranking .date { color: #999; font-size: 14px}
.main-top .sec-ranking .box-link { margin: 80px auto 0}
@media screen and (max-width: 767px) {
  .main-top .sec-ranking ul li:nth-child(n+2) { margin-top: 30px}
}
@media screen and (min-width: 768px) {  
  .main-top .sec-ranking ul li { width: 32%}
}
/**/
.top-inview { padding: 30px 0 0}
.top-inview ul { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0; list-style-type: none}
.top-inview ul li { width: 100%!important}
.top-inview ul li figure img { margin: -35px 0 -45px!important; width: 100%; height: 160px; object-fit: cover}
.top-inview ul li .cate a { display: flex; justify-content: center; align-items: center; width: 90px; height: 30px; color: #fff; text-align: center; background: #ed2c00; border-radius: 40px}
.top-inview ul li .link-outline { display: flex; justify-content: flex-start; align-items: center; padding: 10px 20px 20px}
.top-inview ul li h3 { margin-bottom: -20px!important}
.top-inview ul li h3:hover { color: #ed2c00}
.top-inview ul li time { color: #9d9d9d}
@media screen and (max-width: 767px) {
  .top-inview ul li:last-child{ border-bottom: 1px solid #ddd}
  .top-inview ul li figure { position: relative}
  .top-inview ul li figure .cate a { position: absolute; top: -20px; left: 10px; font-size: 12px}
  .top-inview ul li h3 { font-size: 15px}
}
@media screen and (min-width: 768px) { 
  .top-inview { padding: 60px 0 0}
  .top-inview ul li { width: 50%!important}
  .top-inview ul li:nth-child(odd) { border-right: 1px solid #ddd}
  .top-inview ul li:nth-child(n + 3) { border-bottom: 1px solid #ddd}
  .top-inview ul li figure img { height: 330px}
  .top-inview ul li .link-outline { padding: 0 30px 20px}
  .top-inview ul li .cate a { width: 120px; height: 40px; line-height: 40px; margin-right: 30px}
  .top-inview ul li h3 { margin-bottom: -30px!important}
}
.sec-voice { background: #d9dbdb}
.sec-voice input[name="tab_item"] { display: none}
.sec-voice .tabs { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 30px}
.sec-voice .tabs label { width: 33.3%; text-align: center; transition: all 0.2s ease}
.sec-voice .tabs label img { max-width: 70%; border-radius: 100%}
.sec-voice .tabs label span { display: block; margin-top: 10px; font-size: 13px; text-align: center}
.sec-voice .tabs input:checked + label img { border: 3px solid #ff9999}
.sec-voice .tabs .tab_content { width: 100%; display: none; margin-top: 50px; padding: 20px; background: #fff; border-radius: 12px}
#voice01:checked ~ #voice01_content,
#voice02:checked ~ #voice02_content,
#voice03:checked ~ #voice03_content, 
#voice04:checked ~ #voice04_content, 
#voice05:checked ~ #voice05_content, 
#voice06:checked ~ #voice06_content { display: block}
@media screen and (max-width: 767px) {
  .sec-voice .tabs label:nth-of-type(n + 4) { margin-top: 20px}
}
@media screen and (min-width: 768px) { 
  .sec-voice .tabs label { position: relative; width: 16%}
  .sec-voice .tabs label img { max-width: 100px}
  .sec-voice .tabs input:nth-of-type(1):checked + label:after,
  .sec-voice .tabs input:nth-of-type(2):checked + label:after,
  .sec-voice .tabs input:nth-of-type(3):checked + label:after,
  .sec-voice .tabs input:nth-of-type(4):checked + label:after,
  .sec-voice .tabs input:nth-of-type(5):checked + label:after,
  .sec-voice .tabs input:nth-of-type(6):checked + label:after { content: ""; position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 30px solid #fff}
}
/* TOP MODAL */
.main-top .modal-tel-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.8); overflow: auto; opacity: 0; visibility: hidden; transition: .3s; z-index: 20}
.main-top .modal-tel-container:before { content: ""; display: inline-block; vertical-align: middle; height: 100%}
.main-top .modal-tel-container.active { opacity: 1; visibility: visible}
.main-top .modal-tel-body { position: relative; display: inline-block; vertical-align: middle; width: 50%; max-width: 360px}
.main-top .modal-tel-body img { width: 90%}
.main-top .modal-tel-close { position: absolute; display: flex; align-items: center; justify-content: center; top: 10px; right: 10px; width: 40px; height: 40px; font-size: 40px; color: #000; cursor: pointer}
.main-top .modal-content { padding: 40px 20px 20px; text-align: center; background: #fff; border-radius: 6px}
@media only screen and (max-width: 767px) {
  .main-top .modal-content { width: calc(100% - 40px)}
}
/* COMMON */
a.window { display: inline-block; padding-right: 24px; background: url("../img/common/icon-window.png") no-repeat right center/16px auto}
/* SITEMP ONELY */
.sitemap .ul-outline { display: flex; justify-content: space-between; flex-wrap: wrap}
.sitemap .ul-outline ul { width: 100%}
.sitemap .ul-outline ul .ttl { margin: 0 0 20px -1em; height: 95px; list-style-type: none; border-bottom: 1px dotted #000; overflow: hidden}
.sitemap .ul-outline ul .ttl img { max-width: 260px}
.sitemap .ul-outline .baitoru .ttl img { margin-left: -60px}
.sitemap .ul-outline .baitoru-next .ttl img, .sitemap .ul-outline .hatarako .ttl img { margin-left: -30px}
.sitemap .ul-outline .baitoru-pro .ttl img { margin-left: -46px}
.sitemap .ul-outline .kobot .ttl img { margin-left: -70px}
.sitemap .ul-outline ul p.ttl { margin: 0}
@media print, (min-width: 768px) { 
  .sitemap .ul-outline ul { width: 45%}
  .sitemap .ul-line-one-three { display: flex; justify-content: flex-start}
  .sitemap .ul-line-one-three li { width: 15%}
}
/* ページヘッダー */
#header { border-bottom: none; background: rgba(0,0,0,0.8)}
.pc-flex-between .box-left { margin-bottom: 30px}
@media print, (min-width: 768px) { 
  .pc-flex-between { display: flex; justify-content: space-between}
  .pc-flex-between .box-left {  width: 330px; margin-bottom: 0}
  .pc-flex-between .box-right {  width: calc(100% - 380px)}
}
/* ----------------------------------------------------------------------
 HOME
---------------------------------------------------------------------- */
#main-top .inr { width: 100%; max-width: 1140px; padding: 0 20px; margin: 50px auto 0}
.banner_content.top .overlay { background: rgba(0,0,0,0.7)}
.banner_content.top  .inview { color: #fff}
.banner_content.top  .catch { font-size: 20px}
.banner_content.top .design_button a { background: #b20000}
@media print, (min-width: 768px) {   
  .banner_content.top  .catch { font-size: 36px}
}