@charset "UTF-8";
html {
-webkit-text-size-adjust: 100%;
}

body {
display: none;
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
.mainslid{
width: 1100px;
height: 600px;
justify-content: space-between;
align-items: center;
margin: 0 auto;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 1100px;
width: 90%;
height: auto;}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 1100px;
width: 80%;
height: auto;}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 680px;
width: 90vw;
height: auto;}
}

.slider{
max-width: 1100px;
img {
width: 100%;
height: auto;}
margin: 0 auto;}

.mainslid-space {
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{ 
margin-top: 100px;
margin-bottom: 120px;}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
margin-top: 50px;
margin-bottom: 120px;}
@media screen and (max-width: 720px) /*ウィンドウ幅が最大720pxまでの場合に適用*/
{
margin-top: 20px;
margin-bottom: 120px;}
}/*OK*/

.slick-prev{
margin-left: -30px;
align-items: center;
z-index: 1;
@media screen and (max-width: 720px) /*ウィンドウ幅が最大720pxまでの場合に適用*/
{
margin-top: -15px;
img {
width: auto;
max-width: 80%;
height: auto;
justify-content: center;
display: none}}
}

.slick-next{
margin-right: -30px;
align-items: center;
z-index: 1;
@media screen and (max-width: 720px) /*ウィンドウ幅が最大720pxまでの場合に適用*/
{
margin-top: -15px;
img {
width: auto;
max-width: 80%;
height: auto;
justify-content: center;
display: none}}
}

.container-group{
max-width: 960px;
max-height: 1000px;
justify-content: space-between;
align-items: center;
margin: 0 auto;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 960px;
width: 90vw;
height: auto;}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 960px;
width: 75vw;
height: auto;}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 680px;
width: 90vw;
height: auto;}
}

.container-bl{
display: flex;
max-width: 240;
margin-top: -7px}

.container{
img {
width: auto;
max-width: 100%;
height: auto;}}

.sns-group{
display: flex;
margin-left: auto;
margin-right: auto;
align-items: center;
max-width: 960px;
height: 60px;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 960px;
width: 90vw;
height: auto;}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 960px;
width: 90vw;
height: auto;}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 100%;
width: 90vw;
height: auto;}
}

.sns-bl{
display: flex;
justify-content: center;
width: 150px;
height: 40px;
margin-top: 20px;
margin-right: 0;
margin-left: auto;
}

.bt-sns{
width: 150px;
}