@charset "utf-8";

img{
max-width:100%;
}

/*-- 

top

====================================================== --*/

.fade-in{
opacity:0;
transform:translateY(50px);
transition:opacity 0.5s ease 1s, transform 0.5s cubic-bezier(0, .72, .36, 1.04) 1s;
}
.fade-in.show{
opacity:1;
transform:translateY(0);
}
.title-in{}
.title-in .section__title{
opacity:0;
transform:translateX(-50px);
transition:opacity 0.5s ease 1s, transform 1.0s cubic-bezier(0, .72, .36, 1.04) 1s;
}
.title-in .section__line{
opacity:0;
transform:translateX(50px);
transition:opacity 0.5s ease 1s, transform 1.0s cubic-bezier(0, .72, .36, 1.04) 1s;
}
.title-in .section__heading{
opacity:0;
transform:translateY(50px);
transition:opacity 0.5s ease 1s, transform 0.5s cubic-bezier(0, .72, .36, 1.04) 1s;
}
.title-in.show .section__title{
opacity:1;
transform:translateX(0);
}
.title-in.show .section__line{
opacity:1;
transform:translateX(0);
}
.title-in.show .section__heading{
opacity:1;
transform:translateX(0);
}
/*-- common section styles --*/
.section__header{
text-align:center;
margin-bottom:40px;
}
.section__header .section__title{
margin-bottom:30px;
line-height:1;
}
.section__header .section__title img{
height:18px;
}
.section__header .section__line{
width:70px;
height:7px;
background:#00a23f;
margin:0 auto 30px;
}
/*-- .caligraphy --*/
.caligraphy_wrap{
position:relative;
overflow:hidden;
}
.caligraphy_wrap .caligraphy{}
.caligraphy_wrap .caligraphy svg{
position:absolute;
width:100%;
top:0;
left:0;
z-index:3;
height:auto;
opacity:0;
}
.caligraphy_wrap.show .caligraphy svg{
opacity:1;
}
/*-- #mv --*/
#mv{
position:relative;
}
#mv .mv_logo{
position:absolute;
top:25.5%;
left:13.5%;
width:31.0%;
}
#mv .mv_logo img{
width:100%;
opacity:0;
filter:blur(5px);
transition:filter 0.5s ease 1s, opacity 0.5s ease 1s, transform 1.0s cubic-bezier(0, .72, .36, 1.04) 1s;
}
#mv .mv_logo img:nth-child(1){
transform:translateX(-50px);
}
#mv .mv_logo img:nth-child(2){
transform:translateX(50px);
position:absolute;
top:0;
left:0;
}
/* .show が付いた後 */
.caligraphy_wrap.show #mv .mv_logo img{
opacity:1;
transform:translateX(0);
filter:blur(0);
}
#mv .mv__img{}
#mv .mv__img img{
width:100%;
opacity:0;
transition:opacity 0.5s ease;
}
.show #mv .mv__img img{
opacity:1;
}
/*-- brand --*/
#brand{
background:#fff;
position:relative;
width:100%;
padding-top:92.5%;
}
#brand .brand__inner{
position:absolute;
top:0;
left:0;
width:100%;
padding:8% 0;
margin:0 auto;
text-align:center;
}
#brand .brand__title{
font-size:4rem;
font-size:2.78vw;
font-weight:600;
color:#00a23f;
margin-bottom:30px;
letter-spacing:0.02em;
}
#brand .brand__text{
font-size:2rem;
font-size:1.39vw;
font-weight:600;
line-height:1.7;
margin:0 auto;
}
/*-- vision --*/
#vision{
background:#ebf8f1;
padding:80px 0;
}
#vision .vision__inner{
max-width:1080px;
margin:0 auto;
}
#vision .vision__header{}
#vision .vision__header .vision__title{}
#vision .vision__header .vision__title img{}
#vision .vision__content{
text-align:center;
}
#vision .vision__content .vision__heading{
margin-bottom:26px;
padding:0 14px;
line-height:1;
}
#vision .vision__content .vision__heading img{
width:899px;
}
#vision .vision__content .vision__desc{
color:#333;
font-size:3.1rem;
font-weight:600;
line-height:1.5;
}
/*-- solution --*/
#solution{
background:#fff;
padding:80px 0;
}
#solution .solution__inner{
margin:0 auto;
}
#solution .solution__intro{
text-align:center;
margin-bottom:40px;
}
#solution .solution__intro_title{
margin-bottom:20px;
}
#solution .solution__intro_title img{
width:715px;
}
#solution .solution__intro_text{
font-size:2rem;
line-height:1.8;
}
#solution .solution__intro_text span{
display:inline-flex;
align-items:baseline;
gap:4px;
margin:0 0.5rem;
}
#solution .solution__intro_text span img{
height:1.2em;
vertical-align:baseline;
}
#solution .solution__system{
margin-bottom:60px;
}
#solution .solution__system .solution__system_catch{
font-size:2.4rem;
margin-bottom:30px;
line-height:1.6;
text-align:center;
font-weight:600;
}
#solution .solution__system .solution__system_catch span{
display:inline-flex;
align-items:center;
gap:4px;
margin:0 0.5em;
}
#solution .solution__system .solution__system_catch span img{
height:1.0em;
vertical-align:middle;
transform:translateY(0.2em);
}
#solution .solution__system .solution__categories{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1190px;
margin:0 auto;
position:relative;
padding:0 20px;
}
#solution .solution__system .solution__categories .solution__diagram{
position:relative;
z-index:3;
}
#solution .solution__system .solution__categories .solution__category{
position:relative;
align-items:center;
}
#solution .solution__system .solution__categories .solution__category1{
border-bottom:2px solid #00A23F;
min-width:280px;
}
#solution .solution__system .solution__categories .solution__category1::before{
content:"";
position:absolute;
/* border-top の位置から */
bottom:82px;
right:-121px;
height:2px;
width:180px;
background:#00a23f;
transform:rotate(-70deg);
}
#solution .solution__system .solution__categories .solution__category2{
border-top:2px solid #00A23F;
min-width:310px;
padding:20px 0 0 20px;
}
#solution .solution__system .solution__categories .solution__category2::before{
content:"";
position:absolute;
/* border-top の位置から */
top:120px;
left:-174px;
height:2px;
width:260px;
background:#00a23f;
transform:rotate(-70deg);
}
#solution .solution__system .solution__categories .solution__category .solution__category_title{}
#solution .solution__system .solution__categories .solution__category .solution__category_title img{
width:226px;
}
#solution .solution__system .solution__categories .solution__category .solution__list_content{
margin-bottom:1.5em;
}
#solution .solution__system .solution__categories .solution__category .solution__list_content .ttl{
color:#00A23F;
border-radius:10px;
border:1.5px solid #00A23F;
padding:0.5em 1em;
font-weight:600;
font-size:1.1em;
margin-bottom:0.5em;
line-height:1.3;
text-align:center;
display:inline-block;
}
#solution .solution__system .solution__categories .solution__category .solution__list_content .ttl img{
height:49px;
}
#solution .solution__system .solution__categories .solution__category .solution__list_content:nth-child(3) .ttl img{
height:24.5px;
}
#solution .solution__system .solution__categories .solution__category .solution__list_content .list{
line-height:1.3;
}
#solution .solution__system .solution__categories .solution__category .solution__list_content .list li{
font-weight:600;
padding-left:1em;
margin-left:revert-layer;
text-indent:-1em;
margin-top:0.3em;
}
#solution .solution__system .solution__categories .solution__category .solution__list_content .list li::before{
content:"・";
}
#solution .solution__bottom{}
#solution .solution__bottom a{
display:flex;
margin:0 auto;
background:#fff;
border:1.5px solid #00a23f;
border-radius:60px;
font-size:2rem;
font-weight:600;
color:#000;
text-decoration:none;
max-width:500px;
text-align:center;
height:70px;
align-items:center;
justify-content:center; /* 横方向の中央揃え */
}
#solution .solution__bottom a span{
margin-right:1rem;
}
#solution .solution__bottom a span img{
height:1.2em;
vertical-align:baseline;
}
#solution .solution__bottom a::after{
content:"";
width:34px;
height:34px;
background:#00A23E url(/business/brand/asset/img/share_arw.svg) no-repeat center / 17px auto;
margin-left:1em;
border-radius:50%;
}
/*-- service --*/
#service{
background:#ebf8f1;
padding:80px 0;
}
#service .service__inner{
max-width:1040px;
margin:0 auto;
}
#service .section__heading{
font-size:3.6rem;
font-weight:600;
margin-top:30px;
text-align:center;
}
#service .service__grid{
grid-template-columns:repeat(2, 1fr);
gap:25px;
margin-top:40px;
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
}
#service .service__card{
background:#fff;
overflow:hidden;
box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);
width:30%;
}
#service .service__card_content{
font-weight:600;
padding-bottom:30px;
display:flex;
flex-direction:column;
height:100%;
}
#service .service__card_content .service__card_img{
width:100%;
}
#service .service__card_content .service__card_img img{
max-width:100%;
}
#service .service__card_title{
font-size:2.0rem;
color:#00a23f;
padding:20px 16px 0;
}
#service .service__card_title img{
height:20px;
vertical-align:middle;
}
#service .service__card_text{
font-size:1.4rem;
line-height:1.6;
color:#333;
text-align:justify;
padding:10px 16px 16px;
margin-bottom:auto;
}
#service .service__card_link{
font-size:1.4rem;
text-decoration:none;
font-weight:600;
display:flex;
margin-left:16px;
item-align:center;
align-items:center;
}
#service .service__card_link img{
height:12.5px;
margin-bottom:2px;
}
#service .service__card_link::before{
content:"";
width:28px;
height:28px;
margin-right:10px;
background:#000000 url(/business/brand/asset/img/share_arw.svg) no-repeat center / 15px auto;
border-radius:50%;
}
/*-- responsive pc --*/
@media screen and (min-width:768px){
.sp{
display:none;
}
.caligraphy_wrap .caligraphy_sp{
display:none;
}
}
/*-- responsive solution --*/
@media screen and (max-width:1026px){
/*-- solution --*/
#solution{}
#solution .solution__inner{}
#solution .solution__intro{
padding:0 20px;
margin-bottom:1.5em;
}
#solution .solution__intro_title{}
#solution .solution__intro_title img{}
#solution .solution__intro_text{
text-align:justify;
font-size:1.6rem;
}
#solution .solution__intro_text span{}
#solution .solution__intro_text span img{}
#solution .solution__system{}
#solution .solution__system .solution__system_catch{
text-align:left;
padding:0 20px;
font-size:1.6rem;
}
#solution .solution__system .solution__system_catch span{
margin-left:0;
}
#solution .solution__system .solution__system_catch span img{}
#solution .solution__system .solution__categories{
flex-direction:column;
}
#solution .solution__system .solution__categories .solution__diagram{
width:50%;
padding:30px 0;
}
#solution .solution__system .solution__categories .solution__diagram img{
width:100%;
}
#solution .solution__system .solution__categories .solution__category{
width:100%;
padding:0 20px;
display:flex;
gap:20px;
align-items:normal;
justify-content:space-between;
}
#solution .solution__system .solution__categories .solution__category::before{
transform:rotate(15deg);
width:400px;
}
#solution .solution__system .solution__categories .solution__category1{
border-bottom:none;
border-left:2px solid #00A23F;
padding-bottom:20px;
}
#solution .solution__system .solution__categories .solution__category1::before{
left:-8px;
bottom:-53px;
}
#solution .solution__system .solution__categories .solution__category2{
border-right:2px solid #00A23F;
border-top:none;
padding-top:20px;
}
#solution .solution__system .solution__categories .solution__category2::before{
right:-8px;
top:-53px;
left:auto;
}
#solution .solution__system .solution__categories .solution__category .solution__category_title{}
#solution .solution__system .solution__categories .solution__category .solution__category_title img{}
#solution .solution__system .solution__categories .solution__category .solution__list{
width:100%;
}
#solution .solution__system .solution__categories .solution__category .solution__list_content{
flex:1;
}
#solution .solution__system .solution__categories .solution__category .solution__list_content:last-child{
margin-bottom:0;
}
#solution .solution__system .solution__categories .solution__category .solution__list_content .ttl{
width:100%;
}
#solution .solution__system .solution__categories .solution__category .solution__list_content .list{}
#solution .solution__system .solution__categories .solution__category .solution__list_content .list li{}
#solution .solution__system .solution__categories .solution__category .solution__list_content .list li::before{}
#solution .solution__bottom{
width:90%;
margin:0 auto;
}
#solution .solution__bottom a{}
#solution .solution__bottom a span{}
#solution .solution__bottom a span img{}
#solution .solution__bottom a::after{}
#service .service__card_title{
font-size:1.6rem;
}
#service .service__card_title img{
height:16px;
}
}
/*-- responsive sp --*/
@media screen and (max-width:767px){
.pc{
display:none;
}
.slick-track{
display:flex;
}
.slick-slide{
height:auto;
}
.slick-slide > div{
height:100%;
}
.section__header{
margin-bottom:10px;
}
.section__header .section__title{
margin-bottom:18px;
}
.section__header .section__title img{
height:14px;
}
.section__header .section__line{}
/*-- .caligraphy --*/
.caligraphy_wrap{
position:relative;
}
.caligraphy_wrap .caligraphy{}
.caligraphy_wrap .caligraphy svg{}
.caligraphy_wrap .caligraphy svg:nth-child(1){
top:0;
left:0;
width:100%;
}
.caligraphy_wrap .caligraphy svg:nth-child(2){
bottom:10px;
top:auto;
left:0;
width:100%;
}
/*-- #mv --*/
#mv{}
#mv .mv_logo{
top:17.5%;
left:16%;
width:68%;
}
#mv .mv__img{}
#mv .mv__img img{}
/*-- brand --*/
#brand{
padding-top:0;
}
#brand .brand__inner{
position:relative;
padding-bottom:40%;
}
#brand .brand__title{
font-size:2.6rem;
padding-left:0.5em;
}
#brand .brand__text{
font-size:1.3rem;
}
/*-- vision --*/
#vision{
padding:4em 0 4em;
}
#vision .vision__inner{}
#vision .vision__title{}
#vision .vision__title img{
height:14px;
}
#vision .vision__content{
line-height:0;
}
#vision .vision__content .vision__heading{
margin-bottom:14px;
}
#vision .vision__content .vision__heading img{}
#vision .vision__content .vision__desc{
font-size:1.8rem;
line-height:1.6;
}
/*-- solution --*/
#solution{}
#solution .solution__inner{}
#solution .solution__intro{}
#solution .solution__intro_title{}
#solution .solution__intro_title img{}
#solution .solution__intro_text{}
#solution .solution__intro_text span{}
#solution .solution__intro_text span img{}
#solution .solution__system{}
#solution .solution__system .solution__system_catch{}
#solution .solution__system .solution__system_catch span{}
#solution .solution__system .solution__system_catch span img{}
#solution .solution__system .solution__categories{}
#solution .solution__system .solution__categories .solution__diagram{
width:80%;
}
#solution .solution__system .solution__categories .solution__diagram img{
width:100%;
}
#solution .solution__system .solution__categories .solution__category{
display:block;
gap:0;
}
#solution .solution__system .solution__categories .solution__category::before{
transform:rotate(25deg);
width:250px;
}
#solution .solution__system .solution__categories .solution__category1{}
#solution .solution__system .solution__categories .solution__category1::before{
left:-12px;
bottom:-53px;
}
#solution .solution__system .solution__categories .solution__category2{}
#solution .solution__system .solution__categories .solution__category2::before{
right:-12px;
top:-54px;
left:auto;
}
#solution .solution__system .solution__categories .solution__category .solution__category_title{}
#solution .solution__system .solution__categories .solution__category .solution__category_title img{}
#solution .solution__system .solution__categories .solution__category .solution__list{}
#solution .solution__system .solution__categories .solution__category .solution__list_content{}
#solution .solution__system .solution__categories .solution__category .solution__list_content:last-child{}
#solution .solution__system .solution__categories .solution__category .solution__list_content .ttl{}
#solution .solution__system .solution__categories .solution__category .solution__list_content .list{}
#solution .solution__system .solution__categories .solution__category .solution__list_content .list li{}
#solution .solution__system .solution__categories .solution__category .solution__list_content .list li::before{}
#solution .solution__bottom{}
#solution .solution__bottom a{}
#solution .solution__bottom a span{}
#solution .solution__bottom a span img{}
#solution .solution__bottom a::after{}
/*-- service --*/
#service{}
#service .service__inner{}
#service .section__heading{
font-size:2.6rem;
}
#service .service__grid{ /* flex-direction:column; */ display:block;
}
#service .service__card{
/* width:100%; */
margin:0 8px;
}
#service .service__card_content{
padding-bottom:20px;
}
#service .service__card_content .service__card_img{}
#service .service__card_content .service__card_img img{}
#service .service__card_title{
font-size:2.0rem;
line-height:20px;
padding-top:30px;
padding-bottom:10px;
}
#service .service__card_title img{}
#service .service__card_text{}
#service .service__card_link{}
#service .service__card_link img{}
#service .service__card_link::before{}



/*-- 

slick UI

====================================================== --*/

#service .service__grid{
position:relative;
}
/* ---------------------------
Arrow buttons
--------------------------- */
#service .service__grid .slick-prev, #service .service__grid .slick-next{
position:absolute;
bottom:-5px;
z-index:10;
width:40px;
height:40px;
border-radius:50%;
font-size:0;
line-height:0;
background:#00A23F url(/business/brand/asset/img/share_arw.svg) no-repeat center / 14px auto;
margin-left:1em;
}
#service .service__grid .slick-prev{
left:50%;
margin-left:-120px;
transform:scaleX(-1);
}
#service .service__grid .slick-next{
right:50%;
margin-right:-120px;
}
/* slickデフォルトの矢印を消す */
#service .service__grid .slick-prev:before, #service .service__grid .slick-next:before{}
/* 白い矢印（CSSで描画） */
#service .service__grid .slick-prev:after, #service .service__grid .slick-next:after{
width:10px;
height:10px;
border-top:3px solid #fff;
border-right:3px solid #fff;
display:block;
}
#service .service__grid .slick-prev:after{
transform:rotate(-135deg);
} /* ← */
#service .service__grid .slick-next:after{} /* → */
/* 無効状態（端のときに出る場合） */
#service .service__grid .slick-prev.slick-disabled, #service .service__grid .slick-next.slick-disabled{
opacity:.35;
pointer-events:none;
}
/* ---------------------------
Dots (1,2,3... -> dots)
--------------------------- */
#service .service__grid .slick-dots{
display:flex !important;
justify-content:center;
gap:14px;
margin-top:35px;
padding:0;
}
#service .service__grid .slick-dots li{
margin:0;
width:auto;
height:auto;
}
/* 数字を消して丸にする */
#service .service__grid .slick-dots li button{
width:12px;
height:12px;
border-radius:50%;
border:none;
background:#cfcfcf;
padding:0;
font-size:0;
line-height:0;
box-shadow:none;
}
#service .service__grid .slick-dots li button:before{
content:none; /* slickデフォルトのドットを無効化 */
}
/* アクティブ：緑 */
#service .service__grid .slick-dots li.slick-active button{
background:#00a23f;
}
}
}