﻿@charset "utf-8";

.guide-title-image {margin-top: 20px;}
.guide-title-image img {width: 100%;}
.svc-layout-area4b {margin-top: 40px;background-color: #F3F3F3;padding: 4px 30px 30px;}
.svc-layout-boxA-title {font-size: 18px;}
.svc-layout-boxA-txt {font-size: 13px;}
@media screen and (min-width: 1001px) {
.itemcategory-category-description-list {width: calc((100% - 80px) / 4) !important;}
.itemcategory-category-description-area {margin-left: 6%;}
}
@media screen and (max-width: 840px) {.itemcategory-category-description-area {margin-left: 6%;}}

.list-checked li{
    --list-width:10px;
    position: relative;
    padding-left: calc(var(--list-width) + 4px);
    margin-bottom: 6px;
}
@media screen and (max-width: 900px) {
	.list-checked li{
    font-size: 0.875rem;
}
	}
.list-checked li::before{
    --type-color:#00AF95;
    content: "";
    display: block;
    position: absolute;
    top: 0.6em;
    left: 0px;
    width: var(--list-width);
    height: 5px;
    border-left: 2px solid var(--type-color);
    border-bottom: 2px solid var(--type-color);
    transform: rotate(-45deg);
}

.badge-pill.pill-large {
    padding: 0.5em 1em;
    font-size: 0.875rem;
    line-height: 1;
}

.badge-pill.badge-secondary{
    color:#333;
    background-color: #e4e8ec;
}

.stack-area>*+*{
    margin-top: var(--mt);
}

.stack-area.stack-sm{
    --mt:8px;
}
.stack-area.stack-md{
    --mt:24px;
}

.text-color-blue{
    color: #00AF95 !important;
}

.slider-tumbnails{
    position: relative;
}

.slider-tumbnail img{
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: 8px;
    vertical-align: middle;
}

.slider-tumbnails .slick-dots {
    position: absolute;
    bottom: 16px;
    left: 0px;
    width: 100%;
    display: flex;
    align-self: center;
    justify-content: center;
    gap: 16px;
}
.slider-tumbnails .slick-dots li button {
    display: flex;
    border: none;
    background-color: #dcdddd;
    text-indent: -9999px;
    width: 8px;
    height: 8px;
    border-radius: 200em;
    padding: 0;
}
.slider-tumbnails .slick-dots li.slick-active button {
    background-color: #6d6c6c;
}

.figure-labeled {
    position: relative;
    flex-shrink: 0;
}

.common-label {
    display: inline-block;
    background-color: #ffffff;
    padding: 0.5em;
    line-height: 1.4;
}

.common-button.red {
    --bg-color: #e60512;
    color: #ffffff !important;
    padding: 24px 80px;
    font-size: 15px;
}
.common-button.has-arrow.red::before {
    background: #ffffff;
}

.figure-labeled img{
    max-width: none;
    width: 100%;
}

.figure-labeled .common-label {
    position: absolute;
    top: 10px;
    left: 10px;
}

.figure-labeled .common-description-area {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 16px 20px 18px;
    margin: 0px;
    background-color: rgba(0,0,0,.2);
}

.common-description {
    font-size: 13px !important;
    font-weight: bold;
    color: #ffffff !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.column-card {
    background: #ffffff;
    border: #f3f3f3 solid 4px;
    padding: 40px;
}

.slider-card{
    --maxw:350px;
    max-width: var(--maxw);
    margin-right: 10px;
}

.table-striped {
    width: 100%;
    font-size: 14px;
    font-weight: normal;
    color: #000;
    border-right: 2px solid rgba(0, 0, 0, .05);
}

.table-striped th,
.table-striped td {
    border-left: 2px solid rgba(0, 0, 0, .05);
    border-bottom: 2px solid rgba(0, 0, 0, .05);
    padding: 8px;
}

.table-striped th {
    width: 30%;
}

.accordion-box input:checked + label + div {
    border:none!important;
    padding: 1.8em 1.8em 1.2em 1.8em;
}

.accordion-box {
    max-width: 840px;
    font-size: clamp(13px, calc(0.8125rem + ((1vw - 3.4px) * 0.5882)), 16px)!important;
    line-height: 1.6875;
    margin: 0 auto;
}


/* slide-common */
.slider-container .slick-slide {
    margin-right: 10px;
}
.review-works-areaB{
    overflow: hidden;
}

/* 7.css */
.slick-slide {
    height: auto !important;
}
.slick-track {
    display: flex !important;
    align-items: stretch;
}
.text-size-s {
    font-size: 14px;
    font-weight: normal;
    color: #000 !important;
}
/* item.css */
.topslides.sub02 .slick-arrow, .topslides.sub03 .slick-arrow {
    top: 31%;
}
.topslides.sub02 .slick-slide, .topslides.sub03 .slick-slide {
    margin: 0 5px;
    position: relative;
}
.topslides.sub03 a {
    aspect-ratio: 3/4;
    display: block;
}
.topslides.sub03 a>img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top center;
    object-position: top center;
    width: 100%;
    height: 100%;
}
.topslides.sub02 .slick-slide .screen, .topslides.sub03 .slick-slide .screen {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.66);
    background-image: url("../../common/img/icon-search-gray.svg");
    background-size: 22px auto;
    background-position: 97% 97%;
    background-repeat: no-repeat;
    transition: opacity .4s;
    opacity: 0;
    padding: 1em;
    color: #fff;
}

.topslides.sub02 .slick-slide:hover .screen, .topslides.sub03 .slick-slide:hover .screen {
    opacity: 1;
}
.title-underblue span {
    border-bottom: 3px solid #00AF95 !important;
    font-size: 1.3rem !important;
    padding-bottom: 10px;
}
h4.column-area-h4 {
	font-size: 1rem;
	margin: 2em 0 0.8em 0;
	font-weight: normal;
}
.slide-common .slick-arrow{
    overflow: hidden;
    top: 44%;
    height: auto;
}
@media screen and (max-width: 767px) {
    .slide-common .slick-arrow {
        top: 44%;
        width: 16px;
        height: auto;
    }
}
.slider-card{
    display: flex!important;
    flex-direction: column;
}
.slider-card .column-card{
    height: 100%;
}
#difference .text-body {
	text-align: center;
}

.border-width-2{
  border-width: 2px!important;
}

.border-color-common{
  border-color: #f2f2f2!important;
}

.table-common{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.table-common th,.table-common td{
  padding: 1em;
  border: #dedcdc solid 1px;
  text-align: center;
}

.table-common th {
  text-align: center;
  --bg-color: #e9f6f3;
  background-color: var(--bg-color);
}

.table-common tr:first-child th{
  --bg-color:#16af96;
  color: #ffffff;
}

.table-common th:first-child {
  width: 25%;
}

.table-common-figure{
  width: 100%;
  height: auto;
  max-width: 100%;
}
.table-common-mark{
  width: 24px;
  height: auto;
}
.table-common-mark+*{
  display: block;
  margin-top: 6px;
}

.button-cv{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #fff!important;
  background-color: #16af96;
  border-radius: 100px;
  padding: 1em;
  width: 100%;
  max-width: 420px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: none;
}

.button-cv:hover{
  opacity: 0.8;
}

.banner-copy.type-B{
  background-color: #e9f6f3;
}
.banner-copy.text-large{
  font-size: 16px;
}
@media screen and (max-width: 767px) {
    .banner-copy.text-large{
        font-size: 15px;
    }
}

.slide-common.arrow-typeB .slick-arrow{
  --button-offset:-12px;
  border: #16af96 solid 2px;
  border-radius: 100px;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  background-image: url("../img/campaign/arrow_rounded.svg");
}

.slide-common.arrow-typeB .slick-arrow.slick-prev{
  left: var(--button-offset);
}

.slide-common.arrow-typeB .slick-arrow.slick-next{
  right: var(--button-offset);
}

.common-embed-form{
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 866px;
  max-width: 580px;
  width: 100%;
  border: 0;
}

@media screen and (max-width: 430px) {
  .common-embed-form{
    height: 1048px;
  }
}


#contents {
        overflow: visible;
    }
@media screen and (max-width: 767px) {
    #contents {
        overflow: visible;
    }
}


