@charset "utf-8";
/* 事業案内 */
.alpha {
animation-name: alpha;
animation-duration: 0.6s;
animation-delay: 0s;
animation-timing-function:ease-out;
opacity: 1;
}
.bgTxt {
font-size: 15.0rem;
font-family: 'Butler Light';
font-weight: normal;
color: #F2F7F7;
text-align: center;
line-height: 100%;
z-index: 1
}
h4 {
font-family: "Hannari","source-han-serif-japanese";
font-weight: 400;
font-size: 3.0rem;
line-height: 100%;
text-align: center;
font-weight: normal;
z-index: 5;
margin-top: -60px;
display: block;
margin-bottom: 60px;
}
.txt01 {
font-size: 1.5rem;
line-height: 260%;
text-align: center;
margin-bottom: 100px;
}
.service__item {
counter-increment: number 1;
position: relative;
padding: 5.8rem 6.5rem 6rem;
margin-bottom: 30px;
}
.service__item.is-show:before {
width: 35%;
animation-name: width;
animation-duration: 0.3s;
animation-delay: 0s;
animation-timing-function:ease-out;
opacity: 1;
}
@keyframes width {
0% {
width:0px;
opacity: 0;
}
100% {
width:35%;
opacity: 1;
}

}
.service__item:nth-child(odd):before {
left: 0;
}
.service__item:before {
position: absolute;
display: block;
content: '';
top: 0;
width: 0; 
height: 100%;
background: #F6F6F6;
z-index: -1;
}
.service__item:nth-child(even):before {
right: 0;
}
.service__item .anc {
position: absolute;
top: 0;
left: 0;
margin-top: -8rem;
padding-top: 8rem;
}
.service__item.is-show .img,
.service__item.is-show .ttl, 
.service__item.is-show .txt {
animation-name: alpha;
animation-duration: 0.6s;
animation-delay: 0s;
animation-timing-function:ease-out;
opacity: 1;
}
@keyframes alpha {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.service__item .ttl {
position: relative;
font-size: 2.0rem;
font-weight: 700;
line-height: 180%;
margin-bottom: 3rem;
padding-top: 1.9rem;
padding-left: 1.4rem;
letter-spacing: 0.2em;
/*opacity: 0;
-webkit-transform: translateY(1rem); 
transform: translateY(1rem); */
}
.service__item .ttl:before {
content: '';
top: 0.2rem;
left: 0;
width: 0.3rem;
height: 4.4rem;
background: #287B44;
}
.service__item .ttl:before,
.service__item .ttl:after {
position: absolute;
display: block;
}
.service__item .ttl:after {
top: 0;
left: auto;
content: "SOLUTION" counter(number);
font-size: 1.2rem;
font-weight: normal;
font-family: 'Fjalla One', sans-serif;
line-height: 1.25;
letter-spacing: 0.1em;
color: #222;
}
picture {
display: block;
}
.imgWrap {
overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
background: #000;
}
.imgWrap img {
width: 100%;
display: block;
transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.imgWrap img:hover {
transform: scale(1.1);	/*画像の拡大率*/
transition-duration: 0.3s;	/*変化に掛かる時間*/
opacity: 0.6;	/* 小さくするほど暗くなります */
}
.service__item .txt {
min-height: 10.4rem;
line-height: 2;
margin: 2.6rem 0 0.4rem;
/*opacity: 0; 
-webkit-transform: translateY(1rem); 
transform: translateY(1rem); */
}
.Btn{
position: relative;
max-width: 260px;
width: 100%;
height: 50px;
line-height: 100%;
display: flex;
background: #287B44;
font-size: 1.5rem;
padding-top: 20px;
text-align: left;
}
.txtBox a {
text-decoration: none;
}
.Btn-Text{
width: 100%;
height: 100%;
color: #fff;
z-index: 10;
text-align: center;
font-family: 'Fjalla One', sans-serif;
font-size: 1.3rem;
}
.Btn-Text:before{
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 0;
display: block;
background: #000;
z-index: -1;
transition: .2s;
}
.Btn-Text::after{
content: "";
display: block;
position: absolute;
top: calc(50% - 5px);
right: 20px;
width: 8px;
height: 8px;
border: 2px solid;
border-color: transparent transparent #FFF #FFF;
transform: rotate(-135deg);
transition: .3s;
}
.Btn-Text:hover{
color: #fff;
}
.Btn-Text:hover:before{
width: 100%;
}
.Btn-Text:hover::after{
right: 10px;
}

/*　スマートフォン 横　*/
@media (orientation: landscape) and (max-width: 767px){
.bgTxt {
font-size: 13.0rem;
}
.txt01 {
font-size: 1.3rem;
line-height: 200%;
text-align: center;
margin-bottom: 30px;
padding: 0 30px;
}
.service__item .txt {
min-height: 10.4rem;
line-height: 200%;
margin: 2.6rem 0 2.5rem;
font-size: 1.3rem;
}

}



/*スマートフォン 縦*/

@media (orientation: portrait) and (max-width: 767px){
main {
margin-bottom: 0px;
}
.bgTxt {
font-size: 7.5rem;
font-family: 'Butler Light';
font-weight: normal;
color: #F2F7F7;
text-align: center;
line-height: 100%;
z-index: 1;
}
h4 {
font-family: "Hannari","source-han-serif-japanese";
font-size: 1.8rem;
line-height: 145%;
text-align: center;
font-weight: normal;
z-index: 5;
margin-top: -60px;
display: block;
margin-bottom: 30px;
}
.txt01 {
font-size: 1.1rem;
line-height: 200%;
text-align: center;
margin-bottom: 30px;
padding: 0 30px;
}


.service__item {
counter-increment: number 1;
position: relative;
padding: 2.8rem 2.0rem 6rem;
}
.service__item.is-show:before {
width: 55%;
}
.service__item:nth-child(odd):before {
left: 0;
}
.service__item:before {
position: absolute;
display: block;
content: '';
top: 0;
width: 0; 
height: 100%;
background: #F6F6F6;
z-index: -1;
}
.service__item:nth-child(even):before {
right: 0;
}

.service__item .ttl {
position: relative;
font-size: 1.6rem;
font-weight: 700;
line-height: 180%;
margin-bottom: 3rem;
padding-top: 1.9rem;
padding-left: 1.4rem;
letter-spacing: 0.2em;
opacity: 0;
-webkit-transform: translateY(1rem); 
transform: translateY(1rem); 
}
.service__item .ttl:before {
content: '';
top: 0.2rem;
left: 0;
width: 0.3rem;
height: 4.4rem;
background: #287B44;
}

.service__item .ttl:after {
top: 0;
left: auto;
content: "SOLUTION" counter(number);
font-size: 1.0rem;
font-weight: normal;
font-family: 'Fjalla One', sans-serif;
line-height: 1.5;
letter-spacing: 0.1em;
color: #222;
}

.service__item .txt {
min-height: 10.4rem;
line-height: 180%;
margin: 2.6rem 0 2.5rem;
font-size: 1.2rem;
}
.Btn{
position: relative;
max-width: 260px;
width: 100%;
height: 40px;
line-height: 100%;
display: flex;
background: #287B44;
font-size: 1.2rem;
padding-top: 15px;
}
.txtBox a {
text-decoration: none;
}
.Btn-Text{
font-size: 1.2rem;
}

}