@charset "utf-8";

.slick { opacity: 0; transition: opacity .5s linear; background-color: transparent; overflow: hidden; padding-top: 64px; padding-bottom: 64px; }
.slick.slick-initialized { opacity: 1; }

.slick div.slick-list { overflow: visible; }
.slick div.slick-slide { position: relative; width: 800px; height: 360px; margin: 0 20px; overflow: hidden; background-color: #eee; color: #fff; }
.slick div.slick-slide a { display: block; width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }

.slick div.slick-slide div.photo { position: relative; width: auto; height: auto; /*min-height: 100%;*/ top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.slick div.slick-slide div.photo > img { display: block; width: auto; max-width: inherit; height: auto; min-height: 100%; -webkit-transition: all .3s; transition: all .3s; }
.slick div.slick-slide a:hover div.photo > img { -webkit-transform: scale(1.03); transform: scale(1.03); }

.slick div.slick-slide div.text {  position: absolute; bottom: 0; left: 0; width: 100%; height: auto; padding: 17px 20px 15px; line-height: 1.6; background-color: rgba(229,42,1,0.9); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.slick div.slick-slide div.text div.cate { width: 150px; line-height: 64px; text-align: center; font-weight: bold; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.slick div.slick-slide div.text div.cate > span { display: block; }
.slick div.slick-slide div.text div.cate + div { width: calc( 100% - 150px ); padding: 0 20px 0 30px; border-left: 1px solid #fff; }
.slick div.slick-slide div.text p.title { font-size: 1.125em; font-weight: bold; margin-bottom: 6px; }

@media screen and (max-width: 767px){
	/* top */
	.slick-dotted.slick-slider { padding: 16px 0 24px; width: 100%; height: auto; margin: 0 auto; }
	.slick div.slick-slide { width: 100%; height: auto; margin: 0; }
	.slick div.slick-slide a { padding: 0 15px; }
	.slick div.slick-slide div.photo { width: 100%; height: auto; max-height: 300px; top: 0; left: 0; -webkit-transform: none; transform: none; }
    .slick div.slick-slide div.photo > img { width: 100%; height: auto; min-height: inherit; }
    .slick div.slick-slide div.text { position: relative; bottom: inherit; left: inherit; width: 100%; height: auto; padding: 8px 10px 8px; font-size: 1.5rem; }
    
    .slick div.slick-slide div.text div.cate { width: 100px; }
    .slick div.slick-slide div.text div.cate + div { width: calc( 100% - 100px ); padding: 0 5px 0 5px; }
    .slick div.slick-slide div.text p.title { font-size: 1em; margin-bottom: 6px; }

	/* top */
}

.slick .slick-arrow { width: 48px; height: 48px; margin-top: -35px; border-radius: 50%; z-index: 5; background-color: #fff; -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.16); box-shadow: 0px 2px 4px rgba(0,0,0,0.16); }
.slick .slick-arrow::before { -webkit-transition: all .3s; transition: all .3s; }
.slick .slick-prev { top: 50%; bottom: 50%; left:  calc( ( 100% - 800px ) / 2 - 20px ); margin: auto; }
.slick .slick-next { top: 50%; bottom: 50%; right: calc( ( 100% - 800px ) / 2 - 20px ); margin: auto; }
.slick .slick-prev::before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url(../img/common/arrow_cle.svg); background-size: cover; background-position: center center; background-repeat: no-repeat; -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 1; }
.slick .slick-next::before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url(../img/common/arrow_cle.svg); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 1; }
.slick .slick-prev:hover::before { opacity: .5; }
.slick .slick-next:hover::before { opacity: .5; }

.slick-dotted.slick-slider { margin-bottom: inherit !important;}
.slick .slick-dots { bottom: 24px; }
.slick .slick-dots li { width: 12px; height: 12px; padding: 0; margin: 0 8px; background-color: #CCC; border-radius: 50%; -webkit-transition: all .3s; transition: all .3s; }
.slick .slick-dots li button { width: 12px; height: 12px; padding: 0; }
.slick .slick-dots li:hover,
.slick .slick-dots li.slick-active { background-color: #E52A01; }
.slick .slick-dots li button::before { display: none; }
/* top */

@media screen and (max-width: 767px){
    /*.slick .slick-dots { bottom: 23px; }
	.slick .slick-dots li { width: 9px; height: 9px;  margin: 0 5px; }/**/
    .slick .slick-dots { bottom: 7px; }
    .slick .slick-dots li { width: 8px; height: 8px; margin: 0 4px; line-height: 1; }
    .slick .slick-dots li button { width: 8px; height: 8px; }
    
    .slick .slick-arrow { width: 32px; height: 32px; margin-top: -1px; }
    .slick .slick-prev { top: 50%; left:  0; }
    .slick .slick-next { top: 50%; right: 0; }
}



.news { background-color: #F4F4F4; margin: 32px auto 50px; padding: 23px 23px 18px; }
.news > div { width: 210px; float: left; padding-left: 28px; background-image: url(../img/common/info_circle.svg); background-size: 24px auto; background-position: left center; background-repeat: no-repeat; }
.news > ul  { margin-left: 210px; }
.news > ul > li { margin-bottom: 5px; }
.news > ul > li > a { display: block; padding-left: 16px; background-image: url(../img/common/arrow_nml_02.svg); background-size: 8px auto; background-position: left 10px; background-repeat: no-repeat; -webkit-transition: all .3s; transition: all .3s; }
.news > ul > li > a:hover { opacity: .6; }

@media screen and (max-width: 767px){
    .news { background-color: #F4F4F4; margin: 16px auto 20px; padding: 14px 12px 10px; }
    .news > div { width: 100%; float: inherit; padding-bottom: 6px; border-bottom: 1px solid #ccc; margin-bottom: 6px; background-position: left 5px; }
    .news > ul  { margin-left: 1em; }
}


.read { margin: 44px auto 80px; }
.read .hd span { display: block; font-size: 0.458em; margin-top: 24px; }
.read ul { width: 560px; }

@media screen and (max-width: 767px){
    .read { margin: 22px auto 50px; }
    .read .hd span { font-size: 0.563em; margin-top: 8px; }
    .read ul,
    .read ul > li { width: 100%; }
    .read ul > li + li { margin-top: 10px; }
}


.case { padding: 50px 0; }
.case > ul { position: relative; top: 0; left: 50%; width: 108%; max-width: 100vw; min-width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.case > ul > li { position: relative; width: 32%; padding-top: 80px; }
.case > ul > li h3 { position: absolute; width: 100%; top: -3px; left: 0; }
.case > ul > li > div { position: relative; height: 426px; border-radius: 12px; -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.24); box-shadow: 0px 0px 4px rgba(0,0,0,0.24); background-color: #fff; overflow: hidden; }
.case > ul > li > div a.bxlink { padding: 33px 30px; }
.case > ul > li > div .photo { position: relative; width: 100%; height: 260px; overflow: hidden; margin-bottom: 8px; }
.case > ul > li > div .photo > img { position: absolute; top: 0; left: 50%; display: block; width: auto; max-width: inherit; height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.case > ul > li > div .date  { font-size: 1.2rem; }
.case > ul > li > div .title { font-weight: bold; }
.case > ul > li .btn01 { margin: 30px auto; width: 91.428%; }

@media screen and (max-width: 767px){
    .case { padding: 40px 0 0; }
    .case > ul > li { width: 92%; padding-top: 114px; margin: 0 auto; }
    .case > ul > li .btn01 { width: 100%; }
}


.cBox { margin: 80px auto; background-color: #fff; border-radius: 50px; padding: 64px 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.cBox .photo { position: relative; width: 428px; height: 375px; overflow: hidden; }
.cBox .photo > img { position: absolute; top: 0; left: 50%; display: block; width: auto; max-width: inherit; height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.cBox .photo + div { position: relative; width: 445px; }
.cBox .photo + div h3.hd.t2 { line-height: 1.3; margin-bottom: 32px; }
.cBox .photo + div p { margin-bottom: 36px; }
.cBox .photo + div .btn01 { margin: 30px auto 0; width: 91.428%; }

@media screen and (max-width: 767px){
    .cBox { margin: 32px auto; border-radius: 12px; padding: 16px 16px; }
    .cBox .photo { position: relative; width: 100%; height: auto; max-width: 310px; max-height: 165px; overflow: hidden; margin: 0 auto 16px; }
    .cBox .photo > img { position: relative; left: inherit; width: 100%; height: auto; -webkit-transform: inherit; transform: inherit; }
    .cBox .photo + div { width: 100%; }
    .cBox .photo + div .btn01 { margin: 16px auto; width: 100%; }
}



.links { padding: 80px 0; }
.links .slideOuter { margin: 45px auto; width: 976px; }
.links .slideOuter .slide {}
.links .slideOuter div.slick-slide { position: relative; width: 220px; margin: 0 16px; }
.links .slideOuter div.slick-slide a { display: block; width: 100%; height: auto; padding: 0; text-align: center; -webkit-transition: all .3s; transition: all .3s; }
.links .slideOuter div.slick-slide a:hover { opacity: .6; }
.links .slideOuter .slick-arrow { width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; z-index: 5; background-color: #fff; -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.16); box-shadow: 0px 2px 4px rgba(0,0,0,0.16); }
.links .slideOuter .slick-arrow::before { -webkit-transition: all .3s; transition: all .3s; }
.links .slideOuter .slick-prev { top: 50%; left:  calc( ( 100% - 976px ) / 2 - 12px ); }
.links .slideOuter .slick-next { top: 50%; right: calc( ( 100% - 976px ) / 2 - 12px ); }
.links .slideOuter .slick-prev::before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url(../img/common/arrow_cle.svg); background-size: cover; background-position: center center; background-repeat: no-repeat; -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 1; }
.links .slideOuter .slick-next::before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url(../img/common/arrow_cle.svg); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 1; }
.links .slideOuter .slick-prev:hover::before { opacity: .5; }
.links .slideOuter .slick-next:hover::before { opacity: .5; }

.links .btn01 { margin: 30px auto 0; width: 320px; }



@media screen and (max-width: 767px){
    .links { padding: 47px 0; }
    .links .slideOuter { margin: 20px auto; width: 100%; }
    .links .slideOuter .slick-arrow { width: 32px; height: 32px; }
    .links .slideOuter .slick-prev { top: 50%; left:  0; }
    .links .slideOuter .slick-next { top: 50%; right: 0; }
}