@charset "UTF-8";

/* gs =========================== */

.slick-slider {
opacity:0;}
.slick-initialized {
opacity:1 !important;}
.slick-dotted.slick-slider {
margin-bottom:0;}

.gs00 {
position:relative;
width:100%;}
.slider-index {
width:100%;
height:400px;}
.slider-index .slick-slide {
width:100%;
height:400px;
background:url(../../images/gs/gs_0101.jpg) center center / cover;}
.slider-index .slick-slide:nth-child(2) {
background:url(../../images/gs/gs_0102.jpg) center center / cover;}
.slider-index .slick-slide:nth-child(3) {
background:url(../../images/gs/gs_0103.jpg) center center / cover;}
.slider-index .slick-slide:nth-child(4) {
background:url(../../images/gs/gs_0104.jpg) center center / cover;}
.slider-index .slick-slide:nth-child(5) {
background:url(../../images/gs/gs_0105.jpg) center center / cover;}
.gs00 .txt {
position:absolute;
width:100%;
top:50%;
transform:translate(0,-65%);}
.gs00 h1 {
margin:18px 0 0 0;
font-size:110%;
line-height:1.3;
letter-spacing:0.02em;
white-space:nowrap;
overflow:hidden;}

@media only screen and (max-width:640px) {

.gs00 h1 {
font-size:2.8vw;}

}

@media only screen and (max-width:480px) {

.slider-index .slick-slide {
height:360px;}
.gs00 .txt {
transform:translate(0,-70%);}

}

.gs01 {
background:#fff;}
.gs01 .logo {
transform:translate(0,-65px);
background:url("../../images/gs/0100_00.png") no-repeat center bottom / cover;}
.gs01 .logo img {
max-width:85%;}

.gs02 {
position:relative;
z-index:2;
padding:0 0 65px 0;}
.gs02::before , .gs02::after {
content:"";
position:absolute;
z-index:-1;
width:100%;
height:100%;
left:0;
top:0;
background:url("../../images/gs/bg03.png") repeat left center / 2px;}
.gs02::after {
z-index:-2;
background:url("../../images/gs/bg01.jpg") repeat left top / cover;}
.gs02 .img {
padding:50px 0 20px 0;}
.gs02 .img img {
border-radius:20px;}

@media only screen and ( max-width:800px) {

.gs02 {
padding:0 0 50px 0;}

}

.gs03 {
width:100%;
margin:30px auto 0;
justify-content:space-between;
text-align:left;
font-size:80%;
line-height:1.5;}
.gs03 li {
width:23%;
margin:2% 0 0 0;}
.gs03 li img {
margin:0 0 10px 0;}
.gs03 li a img {
box-shadow:0 0 0 2px #fff;
transition:0.3s;}
.gs03 li a:hover img {
box-shadow:0 0 0 2px #e80;}
.gs03 li .ttl {
font-size:110%;
font-weight:bold;
margin:4px 0;}

@media only screen and ( max-width:1023px) {

.gs03 li {
width:48%;
margin:4% 0 0 0;}

}

@media only screen and ( max-width:640px) {

.gs03 li {
width:100%;}

}

.gs04 {
position:relative;
z-index:2;}
.gs04::before , .gs04::after {
content:"";
position:absolute;
z-index:-1;
width:100%;
height:100%;
left:0;
top:0;
background:url("../../images/gs/bg03.png") repeat left center / 2px;}
.gs04::after {
z-index:-2;
background:url("../../images/gs/bg01.jpg") repeat left bottom / cover;}
.gs04 ul {
width:100%;
margin:0 auto;}
.gs04 ul li.img {
float:right;
width:32%;}
.gs04 ul li.img img {
border-radius:20px;}
.gs04 ul li.txt {
float:left;
text-align:left;
width:63%;}

@media only screen and ( max-width:1023px) {

.gs04 {
max-width:800px;}
.gs04 ul li.img {
float:none;
width:100%;}
.gs04 ul li.img img {
width:80%;}
.gs04 ul li.txt {
float:none;
width:100%;
padding:50px 0 0 0;}

}