@charset "utf-8";

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

#header div:after,
#header nav:after,
#footer:after,
#footer .left_col:after{
content:"";
display:block;
clear:both;
}

@media all and (min-width: 940px){
#header div div{
padding:0 15px;
}
}


@media all and (min-width: 1080px){
#header div div{
padding:0 20px;
}
}

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

#mv{
position: relative;
}

#mv > div:first-child{
position: absolute;
z-index: 2;
top: 50%;
right: 5%;
transform: translateY(-50%);
z-index: 11;
}

#mv > div >  span{
}

#mv h2,
#mv p{
position: relative;
z-index: 1;
color: #fff;
/* text-shadow:
	1px 1px 3px rgba(255,255,255,0.5),
	1px -1px 3px rgba(255,255,255,0.5),
	-1px 1px 3px rgba(255,255,255,0.5),
	-1px -1px 3px rgba(255,255,255,0.5),
	2px 2px 3px rgba(255,255,255,0.5),
	2px -2px 3px rgba(255,255,255,0.5),
	-2px 2px 3px rgba(255,255,255,0.5),
	-2px -2px 3px rgba(255,255,255,0.5)
; */
}

#mv h2{
font-family:"游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
font-size: 40px;
text-align: center;
filter: drop-shadow(0 0 6px #0006);
}

#mv h2 span{
font-size: 20px;
display: block;
}

#mv p{
font-size: 5vw;
font-weight: bold;
text-align: center;
}

#mv .jona{
position: absolute;
z-index: 100;
bottom: 10%;
left: 5%;
width: 200px;
}

#mv .jona img{
width: 100%;
filter:brightness(1.3) drop-shadow(0 0 6px #0006);
}

#mv .news {
margin:5% auto 0 auto;
font-size:100%;
position: absolute;
bottom: 10%;
right: 5%;
z-index: 100;
display: flex;
filter: drop-shadow(0 0 6px #000a);
}

#mv .news h3{
line-height: 1;
font-size:137.5%;
text-align: center;
padding-right: 20px;
color: #fff;
border-right: 2px solid #fff;
display: flex;
justify-content: center;
align-items: center;
}

#mv .news p{
color:#fff;
text-shadow: none;
font-size:100%;
text-align: left;
padding: 10px;
padding-left: 20px;
}

#mv .news a {
color: #fff;
}

#mv .news a:link,
#mv .news a:visited{
text-decoration: underline;
}


#mv #slides{
width: 100%;
height: 100vh;
margin-bottom: 0;
}

#mv #slides img{
width: 100%;
}

.slick-list,
.slick-track,
.slick-slide,
.slick-slide div{
height: 100%;
}

#mv #slides .slick-slide:nth-child(1) div div {
background-image: url("../_images/home/slides/slide05.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

#mv #slides .slick-slide:nth-child(2) div div {
background-image: url("../_images/home/slides/slide06.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

#mv #slides .slick-slide:nth-child(3) div div {
background-image: url("../_images/home/slides/slide07.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

/*#mv #slides #slick-slide00 div div:after,*/
#mv #slides #slick-slide01 div div:after,
#mv #slides #slick-slide02 div div:after,
#mv #slides #slick-slide00 div div:after{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
display: block;
/* background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVQImWNgYGBoYGBgMEbCKBwUgQasKgCBugPLGRk4dQAAAABJRU5ErkJggg==); */
width: 100%;
height: 100%;
background: #000;
opacity: .2;
}

#mv .slick-dots {
bottom: 30px;
}

#slides div.slide-animation{
  animation: fadezoom 15s 0s forwards;
}

@keyframes fadezoom {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

@media all and (max-width: 940px){

#mv > div:first-child div{
margin:3% auto 0 auto;
font-size:1.5vw;
}

#mv > div:first-child {
position: absolute;
z-index: 2;
top: 40%;
left: 50%;
right: 0;
z-index: 11;
transform: translate(-50%,-50%);
width: 100%;
}

#mv > div:first-child div p{
margin-bottom: 0.6em;
}

#mv > div:first-child div p:last-child{
margin-bottom: 1.4em;
}

#mv .news {
left: 50%;
bottom: 20%;
right:auto;
z-index: 100;
transform: translateX(-50%);
width:72%;
}

#mv .jona{
bottom: 5%;
left: 50%;
transform: translateX(-50%);
width: 15vw;
}

}

@media all and (max-width: 500px){

#mv #slides .slick-slide:nth-child(1) div div{
background-position: 65% top;
}
#mv #slides .slick-slide:nth-child(3) div div{
background-position: 35% top;
}


#mv h2 span{
display: block;
font-size:70%;
}

#mv h2{
font-size: 7.5vw;
}

#mv p{
font-size: 7vw;
font-weight: bold;
text-align: center;
}

#mv .jona{
width: 25vw;
}

#mv .news {
font-size: 100%;
position: absolute;
left: 50%;
bottom: 20%;
right: 0;
z-index: 100;
display: block;
transform: translateX(-50%);
width: 85%;
}

#mv .news h3 {
font-size: 100%;
padding-right: 0;
border-right: none;
padding-bottom: 6px;
border-bottom: 1px solid #fff;
}

#mv .news p {
color: #fff;
font-size: 80%;
padding: 2.5px;
padding-left: 0;
}
}

@media all and (max-width: 500px){
/* #mv{
padding-top: calc(100vh - 66px);
} */

#mv #slides img{
width:auto;
height: 100%;
margin-left: -50%;
}

#mv #slides #slick-slide00 img{
}

#mv > div:first-child div{
margin:8% auto 0 auto;
width: auto;
font-size:3.5vw;
}

#mv > div:first-child div h3{
padding: 1em 0 1em 0;
}

#mv > div:first-child div p{
margin-bottom: 0.8em;
}

#mv > div:first-child div p small{
display: block;
}

#mv > div:first-child div p:last-child{
margin-bottom: 1.8em;
}

}
/*/--------------------------------------------------------------------------/*/
/* ===== CATCH ===== */
/*/--------------------------------------------------------------------------/*/

#catch{
background-color: #F2F2F2;
padding: 4% 0;
}

#catch > div{
flex-direction:row-reverse;
width: 1245px;
margin: 0 auto;
position: relative;
padding-bottom: 8%;
}

#catch div div{
box-sizing: border-box;
background: #FFF;
width: 55%;
padding: 3%;
position: absolute;
bottom: 0;
right: 0;
}

#catch h2{
color: #000;
margin-bottom: 25px;
font-size: 30px;
}

/* #catch h2 br{
display: none;
} */

#catch p{
color: #000;
font-size:106.25%;
}

#catch > div > p{
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 55%;
text-align: center;
}

#catch .service {
font-size: 18px;
font-family: "Times New Roman", serif;
line-height: 0.85;
letter-spacing: 3.6px;
margin-bottom: 25px;
}

#catch > div > p img{
width: 100%;
}

@media all and (max-width: 1245px){
#catch > div {
width: 95%;
}
}

@media all and (max-width: 900px){
#catch > div {
padding: 0;
}

#catch > div > p {
width: 100%;
}

#catch div div {
position: static;
width: 100%;
}
}

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

#catch > div{
display: block;
}

#catch div div{
width: auto;
}

#catch > div > p{
display: block;
width: auto;
text-align: center;
}

#catch h2 br{
display: block;
}

}

@media all and (max-width: 480px){
#catch .service {
margin-bottom: 10px;
}

#catch h2{
font-size:4.5vw;
margin-bottom: 10px;
}
#catch p{
font-size:4vw;
}


}

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

#service{
/* background-image:url("../_images/home/service-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover; */
border-top:1px solid #DDD;
border-bottom:1px solid #DDD;
padding: 4% 0;
}

#service h2{
display: none;
color: #1144AA;
text-shadow: -1px 1px 0 rgba(255,255,255,1);
margin-bottom: 4.687%;
line-height: 64px;
font-size: 225%;
text-align: center;
}

#service h2:before,
#service h2:after{
content:'';
display: inline-block;
width: 52px;
height: 64px;
vertical-align: middle;
}

#service h2:before{
background:url("../_images/common/section-h2-before.png");
margin-right: 0.7em;
}

#service h2:after{
background:url("../_images/common/section-h2-after.png");
margin-left: 0.7em;
}

#service > div{
  width: 80%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

#service div div{
  width: 47.5%;
  margin-left: 5%;
  margin-bottom: 4%;
}

#service div div:nth-child(2n-1) {
  margin-left: 0;
}

#service div div:nth-child(3) , #service div div:nth-child(4){
  margin-bottom: 0;
}
/* #service div div:nth-child(1),
#service div div:nth-child(3){
flex-direction:row-reverse;
} */

#service div div > p{
width: 100%;
text-align: center;
}

#service div div > p{
background-size:cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}

#service div div > p::after {
  content: "";
  width: 2px;
  height: 50px;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: #1144AA;
}

#service div div:nth-child(1) > p{
background-image: url("../_images/home/service-delivery.jpg");
}
#service div div:nth-child(2) > p{
background-image: url("../_images/home/service-management.jpg");
}
#service div div:nth-child(3) > p{
background-image: url("../_images/home/service-picking.jpg");
}
#service div div:nth-child(4) > p{
background-image: url("../_images/home/service-desk.jpg");
}

#service div div > p img{
width: 100%;
height:auto;
}

#service div div a{
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
margin-top: 40px;
}

#service div div a:hover{
text-decoration: none;
}

#service div div a{
background-color: rgba(255,255,255,0.7);
}

#service div div a:link,
#service div div a:visited{
background-color: rgba(255,255,255,0.7);
color: #000;
}

/* #service div div a:hover{
background-color: #1144AA;
color: #FFFF;
text-decoration: none;
} */

/* #service div div a h3 span{
position: relative;
padding-right: 50px;
} */

/* #service div div a h3 span:after{
content:"";
position: absolute;
top:calc(50% - 3px);
right: 0;
border-top:3px solid #1144AA;
width: 40px;
height: 0;
} */

#service div div a p:last-child span{
position: relative;
background-color:#1144AA;
color: #FFF;
padding:2% 10%;
transition: .5s;
display: inline-block;
border: 1px solid transparent;
}

#service div div a p:last-child span:after{
content: "";
position: absolute;
top:calc(50% - 7px);
right: 15px;
display: block;
border-top: 3px solid #FFF;
border-right: 3px solid #FFF;
width: 10px;
height: 10px;
transform: rotate(45deg);
}

#service div div a:hover h3 span:after{
border-top:3px solid #FFF;
}

#service div div a:hover p:last-child span{
background-color:#FFF;
color: #1144AA;
border: 1px solid #1144AA;
}

#service div div a:hover p:last-child span:after{
border-top: 3px solid #1144AA;
border-right: 3px solid #1144AA;
}


#service div div a p{
font-weight: normal;
}

#service div div a h3,
#service div div a p{
margin-bottom: 4%;
text-align: center;
}

@media all and (max-width: 940px){
#service div div a{
padding:3%;
}
}

@media all and (max-width: 900px){
#service > div {
width: 90%;
}
}

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

#service div div{
flex-direction:column-reverse;
align-items: center;
align-content: center;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
width: 100%;
margin-left: 0;
margin-bottom: 3%;
}

#service div div:nth-child(3) , #service div div:nth-child(4){
  margin-bottom: 3%;
}

#service div div:nth-child(1),
#service div div:nth-child(3){
flex-direction:column-reverse;
}

#service div div:last-child{
margin-bottom: 3%;
}

#service div div a{
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
padding:7% 7%;
}

#service div div a,
#service div div a:link,
#service div div a:visited{
background-color: rgba(255,255,255,0.9);
}

#service div div:nth-child(4) > p{
background-position: bottom;
}

#service div div a p{
font-size: 87.5%;
}

#service div div a p:last-child{
text-align: center;
}


}

@media all and (max-width: 500px){


#service div div a p{
font-size: 75%;
}

#service div div a p:last-child{
font-size:68.75%;
}

}


@media all and (max-width: 360px){

#service div div a{
padding:6% 5%;
}

#service div div a p:last-child span:after{
top:calc(50% - 6px);
right: 10px;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
width: 8px;
height: 8px;
}

#service div div a:hover h3 span:after{
border-top:3px solid #FFF;
}

#service div div a:hover p:last-child span{
background-color:#FFF;
color: #1144AA;
}

#service div div a:hover p:last-child span:after{
border-top: 2px solid #1144AA;
border-right: 2px solid #1144AA;
}


}

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

#company{
padding: 5.468% 0;
text-align: center;
}

#company h2,
#company h2 + p{
color: #060;
text-align: center;
}

#company h2{
margin-bottom: 3%;
line-height: 1.3;
font-size:175%;
}

#company h3.sub_title {
text-align: center;
font-size: 150%;
color: #060;
margin-bottom: 3%;
position: relative;
display: inline-block;
}

#company h3.sub_title::before {
content: "";
width: 2px;
height: 30px;
background: #060;
position: absolute;
left: -15px;
bottom: 4px;
transform: rotate(-25deg);
}

#company h3.sub_title::after {
content: "";
width: 2px;
height: 30px;
background: #060;
position: absolute;
right: -15px;
bottom: 4px;
transform: rotate(25deg);
}

#company .text {
color: #000;
text-align: center;
margin-bottom: 3%;
}

#company h2 + p{
margin-bottom: 5.468%;
font-size: 112.5%;
}

#company > div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1180px;
padding: 0 20px;
margin: 0 auto;
margin-top: 30px;
}

#company .inner02 {
width: 95%;
margin: auto;
display: block;
}

#company div div{
width: 45%;
position: relative;
}

#company div.outer {
width: 200px;
height: 200px;
background: rgba(255,255,255,.8);
position: absolute;
top: 0;
left: -20%;
z-index: 2;
}

#company div.inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

#company div h3{
position: relative;
margin-bottom: 2.565%;
font-size: 110%;
}

#company p.btn {
position: absolute;
left: 50%;
bottom: -15px;
transform: translateX(-50%);
background: #14A;
color: #fff;
width: 150px;
margin-bottom: 0;
}

#company p.btn a {
display: block;
color: #fff;
text-align: center;
padding: 7px 0;
font-size: 16px;
line-height: 1;
}
/* #company div h3:before{
content: '';
position: absolute;
bottom: 0;
z-index: -2;
display: block;
background-color: #CCE5B2;
width: 100%;
height: 10px;
}

#company div h3:after{
content: url("../_images/home/company-h3-bg.png");
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
width: 34px;
height: 24px;
} */

#company p{
margin-bottom: 1.5%;
}

#company img{
width: 100%;
}

#company p:last-child a:link,
#company p:last-child a:visited{
color: #fff;
}

#company p:last-child a:after{
content:"▶";
font-size: 11px;
margin-left: 0.5em;
}

#company p:last-child a:link:after,
#company p:last-child a:visited:after{
color: #fff;
}

@media all and (max-width: 1300px){
/* #company .outer02{
display: block;
}

#company div div {
width: 60%;
margin: auto;
}

#company div div:nth-child(1) {
margin-bottom: 3%;
} */

#company div.outer {
left: 0;
}

#company div div {
width: 47.5%;
}

}

@media all and (max-width: 1100px){
  #company .inner02 {
    width: 90%;
    margin: auto;
  }
}

@media all and (max-width: 980px){
#company h2{
font-size:150%;
}

#company h2 + p{
font-size:2vw;
}
}

@media all and (max-width: 900px){
#company .outer02{
display: block;
}

#company div div {
width: 60%;
margin: auto;
}

#company div div:nth-child(1) {
margin-bottom: 3%;
}

#company div.outer {
left: -20%;
}
}

@media all and (max-width: 700px){
  #company div div {
  width: 70%;
  margin: auto;
  }
}

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

#company h2 + p{
margin-right: 2%;
margin-left: 2%;
font-size:3vw;
}
}

@media all and (max-width: 550px){
#company div div {
width: 90%;
}

#company div.outer {
width: 150px;
height: 150px;
left: 0%;
}
}

@media all and (max-width: 480px){
#company h2{
margin-right: 2%;
margin-left: 2%;
font-size: 4.5vw;
}

#company h3.sub_title {
font-size: 4vw;
}

#company .text {
  font-size: 75%;
}
}

@media all and (max-width: 500px){

#company h2,
#company h2 + p{
text-align: left;
}


#company h2 + p{
font-size:4vw;
}

#company > div{
padding: 0 2%;
}

#company div div{
width: 100%;
margin-bottom: 4%;
}

#company div div h3{
font-size: 5vw;
}

#company div div p{
font-size:3.7vw;
}

#company h3.sub_title::before {
height: 15px;
}

#company h3.sub_title::after {
height: 15px;
}

}

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

#osusume{
background:url("../_images/home/pht-05-01.webp") no-repeat;
background-size:cover;
background-position: center center;
background-attachment: fixed;
padding:4.6875%;
}

#osusume > div{
display: flex;
justify-content: space-between;
max-width: 1070px;
margin: 0 auto;
}

#osusume > div > p,
#osusume > div > div{
box-sizing: border-box;
width: 46.729%;
}

#osusume img{
width: 100%;
}

#osusume .calendar{
background-color: rgba(255,255,255,0.9);
padding: 10px;
}

#osusume .calendar h2{
background: #CCE5B2;
border-bottom:1px solid #ACC592;
padding:5px 10px;
margin-bottom: 10px;
text-align: center;
}

#osusume .calendar table{
border-bottom: 1px solid #EEE;
width: 100%;
font-size: 75%;
}

#osusume .calendar form{
display: flex;
}

#osusume .calendar form span{
display: block;
width: calc(100% / 3);
}

#osusume .calendar form span:nth-child(1){
text-align: left;
}

#osusume .calendar form span:nth-child(2){
font-size: 2em;
text-align: center;
}

#osusume .calendar form span:nth-child(2) span{
display: inline;
font-size: 50%;
}


#osusume .calendar form span:nth-child(3){
text-align: right;
}

#osusume .calendar button{
margin-top: 0.5em;
}

#osusume .calendar th,
#osusume .calendar td{
position: relative;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
width:14.2857%;
line-height: 1.2;
text-align: center;
}

#osusume .calendar th:last-child,
#osusume .calendar td:last-child{
border-right: none;
}

#osusume .calendar th{
height: 2.3em;
}

#osusume .calendar td{
overflow: hidden;
height:3.2em;
}

#osusume .calendar th{
background-color:#777;
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
color:#FFF;
}

#osusume .calendar th:first-child{
background-color: #ED2702;
}
#osusume .calendar th:last-child{
background-color: #1144AA;
}

#osusume .calendar td div:first-child{
position: absolute;
top:0;
right:0;
width: 100%;
height: 3.2em;
line-height: 1;
text-align: right;
}

#osusume .calendar td div:first-child span{
position: absolute;
right: 3px;
bottom: 2px;
}

#osusume .calendar td.sun div:first-child,
#osusume .calendar td.holiday div:first-child{
color:#ED2702;
}

#osusume .calendar td.sat div:first-child{
color:#1144AA;
}

#osusume .calendar .rholiday{
background-color: #5C9724;
color: #FFF;
border-radius: 50%;
width: 1em;
height: 1em;
padding: 0.6em;
margin: 1em auto 0 auto;
font-size: 10px;
line-height: 1em;
}

#osusume .calendar .sholiday{
position: absolute;
top: 0;
left: 0;
background-color: #99A;
color: #FFF;
width: 100%;
height: 1em;
padding: 0.2em 0;
margin: 0 auto;
line-height: 1em;
font-size: 10px;
text-align: center;
}


.pholiday{
display: none;
}

#osusume .calendar .notice{
background: #DDD;
color:#F22;
margin: 10px;
padding: 5px 10px;
font-weight: bold;
text-align: center;
font-size:81.25%;
}

@media all and (max-width: 500px){
#osusume > div{
display: block;
padding:0 2.46%;
}
#osusume > div > p,
#osusume > div > div{
width: auto;
}

#osusume p:first-child{
margin-bottom:2.46%;
}

}

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


#social{
background-color: #F4F4F4;
padding:4.6875%;
}


#social > div{
display: flex;
justify-content: space-between;
max-width: 960px;
margin: 0 auto 3% auto;
}

#social >div > div{
width: 41.666%;
}


#social #photos h2{
background: url("../_images/home/photos.png") no-repeat left center;
padding-left: 60px;
margin-bottom: 10px;
line-height: 40px;
}

#social #photos ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}

#social #photos ul li{
width:32%;
margin-bottom: 2%;
}

#social #photos ul li a img{
opacity: 1;
transition: all 0.2s ease-out;
}

#social #photos ul li a:hover img{
opacity: 0.7;
}

#social #photos ul li img{
width: 100%;
height: auto;
vertical-align: top;
}

#social .img3 img:last-child{
display: none;
}

#social img{
width: 100%;
}

@media all and (max-width: 500px){
#social > div{
display: block;
padding:0 2.46%;
}

#social >div > div,
#social >div > p{
width: auto;
}

#social p:first-child{
margin-bottom:5%;
}

#social .img3 img:first-child{
display: none;
}

#social .img3 img:last-child{
display: block;
}

}

/*/--------------------------------------------------------------------------/*/
/* ===== 歳時記 ===== */
/*/--------------------------------------------------------------------------/*/

#social #saiziki {
	margin-top: 6%;
	display: block;
	text-align: center;
}

#saiziki h3 {
	font-size: 1.5em;
	text-align: center;
	margin-bottom: 30px;
	/* background: url(../_images/home/saiziki_bg.png) no-repeat left center;
	padding-left: 60px; */
	line-height: 40px;
	display: inline-block;
}

#saiziki .slider {
	width: 100%;
}

#saiziki .slider li {
	padding: 0 30px;
	box-sizing: border-box;
}

#saiziki .slider .slick-next {
	width: 30px;
	height: 30px;
	background: #1144AA;
	text-indent: -999px;
	right: -50px;
}

#saiziki .slider .slick-next::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 30%;
  right: 10px;
}

#saiziki .slider .slick-prev {
	width: 30px;
	height: 30px;
	background: #1144AA;
	text-indent: -999px;
	left: -50px;
}

#saiziki .slider .slick-prev::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-135deg);
  position: absolute;
  top: 30%;
  left: 10px;
}

#saiziki .slick-list , #saiziki .slick-track , #saiziki .slick-slide , #saiziki .slick-slide div {
	height: auto;
}

@media all and (max-width: 700px){

	#saiziki .slider li {
		padding: 0 10px;
	}

	#saiziki .slider .slick-next {
		right: 0px;
	}

	#saiziki .slider .slick-prev {
		left: 0px;
	}

}

@media all and (max-width: 500px){
  #saiziki .slider img {
    width: 100%;
    height: 50vw;
    object-fit: cover;
  }
}

/*/--------------------------------------------------------------------------/*/
/* ===== モーダルウィンドウ ===== */
/*/--------------------------------------------------------------------------/*/

.modaal-container {
	background: none;
	text-align: center;
}

@media all and (max-width: 500px){

	.modaal-container img {
		width: 100%;
	}

}

/*/--------------------------------------------------------------------------/*/
/* ===== バナーエリア ===== */
/*/--------------------------------------------------------------------------/*/

#social .img1 {
box-sizing: border-box;
    margin-top: 6%;
    margin-bottom: 6%;
		width: 100%;
}

#social .img1 img {
	width: 100%;
}

#social .img2 {
box-sizing: border-box;
	width: 100%;
	padding: 20px;
	background: #fff;
	text-align: center;
}

#social .img2 img {
	width: 60%;
	background: #fff;
}

#social .copy {
	text-align: center;
	margin-top: 20px;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
}

@media all and (max-width: 535px){

	#social .copy {
		margin-top: 10px;
		font-size: 13px;
		line-height: 21px;
	}

}

/*/--------------------------------------------------------------------------/*/
/* ===== ACCESS ===== */
/*/--------------------------------------------------------------------------/*/
#access{
padding:4.6875% 0;
}

#access > div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1110px;
margin: 0 auto;
padding: 0 20px;
}

#access > div > div{
width: 47.3%;
}

#access h2,
#access p{
text-align: center;
}

#access h2{
font-size: 131.25%;
}

#access p{
font-size: 81.25%;
}

#access h2 + p{
margin-bottom: 2%;
}

#access div div div{
position: relative;
height: 0;
padding-top:69.23%;
}

#access div div div p{
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 1px solid #DDD;
width: 100%;
height: 100%;
}

#access div div div iframe{
border: none;
width: 100%;
height: 100%;
}


@media all and (max-width: 500px){
#access > div{
display: block;
margin: 0 auto;
padding: 0 2.46%;
}

#access > div > div{
width: auto;
}

#access > div > div:first-child{
margin-bottom:6%;
}

#access h2{
font-size: 4vw;
}

#access p{
font-size: 3vw;
}

}