@charset "UTF-8";
/* CSS Document */

#businessContent{
padding: 0 0 8%;
}

@media screen and (max-width: 999px){
#businessContent{
padding: 0 0 15%;
}
}/*999*/





#businessMission{
padding: 8% 0 0;
}
#businessMissionHead{
position: relative;
}
#businessMissionHead .heading01{
position: absolute;
bottom: 0;
left: 50%;
width: 1000px;
transform: translate(-50%, 30%);
}
#businessMissionContent{
max-width: 1000px;
margin: 120px auto 0;
}
#businessMissionContent h3{
font-size: 2.25rem;
line-height: 1.5;
font-weight: 400;
}
#businessMissionContentBox{
display: flex;
justify-content: space-between;
margin: 50px 0 0;
}
#businessMissionContentBox .txt{
width: calc(50% - 20px);
}
#businessMissionContentBox .txt p{
font-size: 0.875rem;
line-height: 2;
}
#businessMissionContentBox .txt p+p{
margin-top: 1em;
}
#businessMissionContentBox .banner{
width: calc(50% - 20px);
}
#businessMissionContentBox .banner figure a{
transition: opacity 200ms ease;
}
#businessMissionContentBox .banner figure a:hover{
opacity: 0.7;
}
#businessMissionContentBox .banner .attention{
font-size: 0.75rem;
padding: 0 0 0 1em;
margin: 1em 0 0;
text-indent: -1em;
}

@media screen and (max-width: 999px){
#businessMission{
padding: 15% 0 0;
}
#businessMissionHead .heading01{
left: 20px;
right: 20px;
width: auto;
transform: translateY(40%);
}
#businessMissionContent{
max-width: 1000px;
margin: 60px auto 0;
padding: 0 20px;
}
#businessMissionContent h3{
font-size: 1.5rem;
}
#businessMissionContentBox{
display: block;
margin: 20px 0 0;
}
#businessMissionContentBox .txt{
width: auto;
}
#businessMissionContentBox .txt p{
font-size: 0.75rem;
}
#businessMissionContentBox .banner{
width: auto;
margin: 30px 0 0;
}
}/*999*/

#businessMission.init{
opacity: 0;
transform: translateY(50px);
}
#businessMission.init.active{
animation: commonShow01 800ms linear forwards, commonShow02 800ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}





#businessResponsibilities{
max-width: 1000px;
margin: 0 auto;
padding: 8% 0 0;
}
#businessResponsibilities ul.list{
margin: 50px 0 0;
}
#businessResponsibilities ul.list>li+li{
margin: 120px 0 0;
}
#businessResponsibilities ul.list>li .head{
display: flex;
justify-content: space-between;
align-items: center;
}
#businessResponsibilities ul.list>li .head figure{
width: calc(50% - 20px);
}
#businessResponsibilities ul.list>li .head .txt{
width: calc(50% - 20px);
}
#businessResponsibilities ul.list>li .head .txt h3{
font-size: 1.5rem;
line-height: 1.5;
}
#businessResponsibilities ul.list>li .head .txt h3 small{
display: block;
font-size: 66%;
}
#businessResponsibilities ul.list>li .head .txt h3 span{
display: inline-block;
font-size: 75%;
}
#businessResponsibilities ul.list>li .head .txt p{
font-size: 0.875rem;
margin: 1em 0 0;
line-height: 2;
}
#businessResponsibilities ul.list>li .schedule{
display: flex;
flex-direction: column;
align-items: center;
margin: 50px 0 0;
padding: 60px;
background-color: #f1ebe5;
}
#businessResponsibilities ul.list>li .schedule h4{
color: #008773;
font-size: 1.5rem;
line-height: 1.5;
text-align: center;
border-bottom: 2px solid #008773;
padding: 0 0 5px;
}
#businessResponsibilities ul.list>li .schedule ol{
width: 100%;
margin: 40px 0 0;
}
#businessResponsibilities ul.list>li .schedule ol li{
position: relative;
padding: 0 0 40px;
z-index: 1;
}
#businessResponsibilities ul.list>li .schedule ol li::before{
content: '';
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
background-image: url(../images/clock_base.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
z-index: 2;
}
#businessResponsibilities ul.list>li .schedule ol li::after{
content: '';
display: block;
width: 1px;
position: absolute;
top: 10px;
bottom: 0;
left: 19px;
background-color: #808080;
z-index: 1;
}
#businessResponsibilities ul.list>li .schedule ol li:last-child{
padding: 0;
}
#businessResponsibilities ul.list>li .schedule ol li:last-child::after{
content: none;
}
#businessResponsibilities ul.list>li .schedule ol li .txt{
position: relative;
padding: 5px 0 0 65px;
}
#businessResponsibilities ul.list>li .schedule ol li .txt::before{
content: '';
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
background-image: url(../images/clock_h.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
z-index: 3;
}
#businessResponsibilities ul.list>li .schedule ol li .txt::after{
content: '';
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
background-image: url(../images/clock_m.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
z-index: 3;
}
.h01 .txt::before,
.m05 .txt::after{
transform: rotate(30deg);
}
.h02 .txt::before,
.m10 .txt::after{
transform: rotate(60deg);
}
.h03 .txt::before,
.m15 .txt::after{
transform: rotate(90deg);
}
.h04 .txt::before,
.m20 .txt::after{
transform: rotate(120deg);
}
.h05 .txt::before,
.m25 .txt::after{
transform: rotate(150deg);
}
.h06 .txt::before,
.m30 .txt::after{
transform: rotate(180deg);
}
.h07 .txt::before,
.m35 .txt::after{
transform: rotate(210deg);
}
.h08 .txt::before,
.m40 .txt::after{
transform: rotate(240deg);
}
.h09 .txt::before,
.m45 .txt::after{
transform: rotate(270deg);
}
.h10 .txt::before,
.m50 .txt::after{
transform: rotate(300deg);
}
.h11 .txt::before,
.m55 .txt::after{
transform: rotate(330deg);
}
#businessResponsibilities ul.list>li .schedule ol li .txt p.title{
color: #008773;
}
#businessResponsibilities ul.list>li .schedule ol li .txt p.body{
font-size: 0.875rem;
}

@media screen and (max-width: 999px){
#businessResponsibilities{
padding: 15% 20px 0;
}
#businessResponsibilities ul.list{
margin: 30px 0 0;
}
#businessResponsibilities ul.list>li+li{
margin: 60px 0 0;
}
#businessResponsibilities ul.list>li .head{
display: block;
}
#businessResponsibilities ul.list>li .head figure{
width: auto;
}
#businessResponsibilities ul.list>li .head .txt{
width: auto;
margin: 20px 0 0;
}
#businessResponsibilities ul.list>li .head .txt h3{
font-size: 1.125rem;
}
#businessResponsibilities ul.list>li .head .txt p{
font-size: 0.75rem;
}
#businessResponsibilities ul.list>li .schedule{
margin: 20px 0 0;
padding: 30px 20px;
}
#businessResponsibilities ul.list>li .schedule h4{
font-size: 1.125rem;
}
#businessResponsibilities ul.list>li .schedule ol{
margin: 30px 0 0;
}
#businessResponsibilities ul.list>li .schedule ol li{
padding: 0 0 20px;
}
#businessResponsibilities ul.list>li .schedule ol li .txt{
padding: 5px 0 0 55px;
}
#businessResponsibilities ul.list>li .schedule ol li .txt p.title{
font-size: 0.9375rem;
}
#businessResponsibilities ul.list>li .schedule ol li .txt p.body{
font-size: 0.75rem;
}
}/*999*/

#businessResponsibilities.init{
opacity: 0;
transform: translateY(50px);
}
#businessResponsibilities.init.active{
animation: commonShow01 800ms linear forwards, commonShow02 800ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
#businessResponsibilities ul.list>li .schedule.init ol li{
opacity: 0;
transform: translateX(-50px);
}
#businessResponsibilities ul.list>li .schedule.init.active ol li{
animation: businessResponsibilities 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#businessResponsibilities ul.list>li .schedule.init.active ol li:nth-child(2){
animation-delay: 70ms;
}
#businessResponsibilities ul.list>li .schedule.init.active ol li:nth-child(3){
animation-delay: 140ms;
}
#businessResponsibilities ul.list>li .schedule.init.active ol li:nth-child(4){
animation-delay: 210ms;
}
#businessResponsibilities ul.list>li .schedule.init.active ol li:nth-child(5){
animation-delay: 280ms;
}
#businessResponsibilities ul.list>li .schedule.init.active ol li:nth-child(6){
animation-delay: 350ms;
}
#businessResponsibilities ul.list>li .schedule.init.active ol li:nth-child(7){
animation-delay: 420ms;
}
#businessResponsibilities ul.list>li .schedule.init.active ol li:nth-child(8){
animation-delay: 490ms;
}
#businessResponsibilities ul.list>li .schedule.init.active ol li:nth-child(9){
animation-delay: 560ms;
}
#businessResponsibilities ul.list>li .schedule.init.active ol li:nth-child(10){
animation-delay: 630ms;
}

@keyframes businessResponsibilities{
0%{
opacity: 0;
transform: translateX(-50px);
}
100%{
opacity: 1;
transform: none;
}
}