img{
    box-shadow: 5px 5px 10px rgba(0,0,0,.1);
}

.boxshadow-none{
    box-shadow: none;
}

.marker{
    background:linear-gradient(transparent 50%, rgb(255, 213, 0, .5) 50%);
    display: inline;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition:background-size 1.5s;
  }

.marker.on {
    /* 横方向を100%にして、マーカーを引く */
    background-size: 100% 100%;
}

/* ヘッダー */
.web{
    background-image:url(../../img/webp/websitedesign-header.webp);
    background-repeat:no-repeat;
    background-size: cover;
    background-position:50% 100%;
    background-attachment: fixed;
}

.typing-web{
    overflow: hidden;
    white-space: nowrap;
    border-right: .15em solid #527083;
    animation: typing 4s steps(15, end) forwards, blink-caret .75s step-end 4s infinite, hide-caret 1s 4s forwards;
}

.movie-faq{
    background-image:url(../../img/moviefaq-header.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    background-position:50% 50%;
    background-attachment: fixed;
}

.typing-movie-faq{
    overflow: hidden;
    white-space: nowrap;
    border-right: .15em solid #527083;
    animation: typing 4s steps(23, end) forwards, blink-caret .75s step-end 4s infinite, hide-caret 1s 4s forwards;
}

.analysis{
    background-image:url(../../img/analysis-header.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    background-position:50% 50%;
    background-attachment: fixed;
}

.typing-analysis{
    overflow: hidden;
    white-space: nowrap;
    border-right: .15em solid #527083;
    animation: typing 3s steps(9, end) forwards, blink-caret .75s step-end 3s infinite, hide-caret 1s 4s forwards;
}

.businesssupport{
    background-image:url(../../img/businesssupport-header.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    background-position:50% 50%;
    background-attachment: fixed;
}

.typing-businesssupport{
    overflow: hidden;
    white-space: nowrap;
    border-right: .15em solid #527083;
    animation: typing 4s steps(17, end) forwards, blink-caret .75s step-end 4s infinite, hide-caret 1s 4s forwards;
}

.maintenance{
    background-image:url(../../img/maintenance-header.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    background-position:50% 50%;
    background-attachment: fixed;
}

.typing-maintenance{
    overflow: hidden;
    white-space: nowrap;
    border-right: .15em solid #527083;
    animation: typing 4s steps(12, end) forwards, blink-caret .75s step-end 4s infinite, hide-caret 1s 4s forwards;
}

.development{
    background-image:url(../../img/development-header.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    background-position:50% 50%;
    background-attachment: fixed;
}

.typing-development{
    overflow: hidden;
    white-space: nowrap;
    border-right: .15em solid #527083;
    animation: typing 4s steps(12, end) forwards, blink-caret .75s step-end 4s infinite, hide-caret 1s 4s forwards;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }

  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #527083 }
  }

  @keyframes hide-caret {
    to { border-color: transparent }
}

.contents-width{
    margin-right:32px;
    margin-left:32px;
}

.list{
    max-width:1000px;
    margin:0 auto;
    padding:40px;
}

.bgc-eefcff{
    background-color: #eefcff;
}

.bgc-fff{
    background-color: #fff;
}

.inner{
    max-width:1000px;
    margin:0 auto;
    padding:10px 40px;
}

.inner-last{
    max-width:1000px;
    margin:0 auto;
    padding:10px 40px 60px;
}

.ta-c{
    text-align: center;
}

h2{
    text-align: center;
}

.button-b{
    display: inline-flex;
    align-items: center;
    padding:6px 20px;
    box-sizing:border-box;
    background-color: #fff;
    border:solid 1px #333;
    color:#333;
    font-weight:bold;
    border-radius:4px;
    transition: border ease .3s;
    position:relative;
    }

.button-b:before{
    content: "";
    border-top: 1px solid black;
    border-left: 1px solid black;
    display: inline-block;
    width: 5px;
    height: 5px;
    transform: rotate(135deg);
    position:relative;
    right:7px;
}

.button-b:hover{
    background-color:#f6f6f6;
    border-color:#c9c9c9;
}

.button-b::after {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    content: "";
    border: solid 2px transparent;
    transition: border ease .3s;
}

.button-b:hover::after {
    border: solid 2px #c9c9c9
}

.qa{
    margin-bottom:100px;
}

.qa__block {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    background-color: #fff;
  }

  .qa-bgc-eefcff{
    background-color: #eefcff;
}

.qa-body-inner{
    max-width: 1000px;
    margin-right:auto;
    margin-left:auto;
    padding-top:50px;
    padding-bottom:50px;
}

.qa__body{
    position: relative;
    display: none;
    transition:opacity 0.4s;
    background-color:#fff;
}

.qa__body.is-open{
    visibility: visible;
    display: block;
    animation-name: fadeIn;
    animation-fill-mode:forwards;
    animation-duration:0.4s;
}

@keyframes fadeIn{
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
}

.qa__item{
    display: inline-block;
    width:100%;
}

.qa__head{
    font-size: 26px;
    width: 100%;
    max-width:1000px;
    position: relative;
    text-align: left;
    cursor: pointer;
    transition:0.4s;
    margin:0;
    padding:1.2rem 0;
}

.qa__head.is-open{
    border-bottom:transparent;
}

.qa__head:after {
    content: "";
    border-top: 1px solid black;
    border-left: 1px solid black;
    display: inline-block;
    width: 10px;
    height: 10px;
    transform: rotate(-135deg);
    position: absolute;
    right: 20px;
    top: 40%;
    transition: transform .4s;
  }

  .js-ac.is-open .qa__head:after {
    transform: rotate(45deg);
  }

  .border-top{
    border-top:solid 1px #333;
  }

  .qa-inner{
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    border-bottom:solid 1px #333;
  }

.qa__item .link-box{
    margin-bottom:1rem;
    display: inline-block;
}

.qa__item .link{
    background-color:#333;
    color:#fff;
    padding:0 1rem 0.2rem;
    border-radius: 18px;
    white-space: nowrap;
    margin-bottom:1rem;
}

.qa__item .link::after{
    content:"";
    display: inline-block;
    width:16px;
    height:16px;
    background-image:url('img/icon-1.png');
    background-position: center;
    background-size:contain;
    position:relative;
    top:2px;
    left:5px;
}

.qa__item .h3{
    font-size: 22px;
    font-weight:bold;
    background-color: #217892;
    color:#fff;
    padding:0 10px 3px;
}

.qa__item .flex-2,
.qa__item .flex-3
{
    display: flex;
    justify-content: space-around;
    width:100%;
    margin-top:50px;
    margin-bottom:50px;
}

.qa__item .flex-2 picture{
    width:45%;
    height:100%;
}

.qa__item figcaption{
    font-size:14px;
}

.figcaption{
    margin-top:30px;
}

/* ビデオ */
video{
    width:100%;
    margin:1rem 0;
}

.flex-2-video{
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.flex-2-video video{
    width:50%;
    margin:0 0.5rem;
}
.flex-2-video iframe{
    width:50%;
    margin:0 0.5rem;
    aspect-ratio: 5 / 3;
}

/* 動画FAQページ */

.heading01 {
    display: inline-block;
	position: relative;
	padding-left: 85px;
}

.heading01::before {
	content: attr(data-number);
	position: absolute;
	top: 65%;
	left: 0;
	transform: translateY(-65%);
	color: rgba(63,193,201,0.5);
	font-size: 65px;
}

.heading01::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 1px;
	background-color: rgba(63,193,201,1);
}

.heading02 {
    display: inline-block;
	position: relative;
	padding-left: 85px;
}

.heading02::before {
	content: attr(data-number);
	position: absolute;
	top: 65%;
	left: 0;
	transform: translateY(-65%);
	color: rgba(63,193,201,0.5);
	font-size: 65px;
}

.heading02::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 140px;
	height: 1px;
	background-color: rgba(63,193,201,1);
}