@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    margin-bottom: 40px;
}

@media screen and (min-width: 768px),
print {
    .slider {
    
    margin-bottom:110px;
}
}
/*　背景画像設定　*/

.slider-item01 {
    background:url(../../../../img/top/1sp.jpg);
}

.slider-item02 {
    background:url(../../../../img/top/2sp.jpg);
}

.slider-item03 {
    background:url(../../../../img/top/3sp.jpg);
}

.slider-item04 {
    background:url(../../../../img/top/4sp.jpg);
}


@media screen and (min-width: 768px),
print {
    .slider-item01 {
    background:url(../../../../img/top/1.jpg);
}

.slider-item02 {
    background:url(../../../../img/top/2.jpg);
}

.slider-item03 {
    background:url(../../../../img/top/3.jpg);
}

.slider-item04 {
    background:url(../../../../img/top/4.jpg);
}


}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


/*
+++++++++++++++++++++++++++++++

↓ドット正常表示↓

+++++++++++++++++++++++++++++++
*/

*,
::before,
::after {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* Remove the default button styling in all browsers */
button {
  background-color: transparent;
  border-style: none;
  color: inherit;
}





/*
+++++++++++++++++++++++++++++++

top-con01

+++++++++++++++++++++++++++++++
*/

.top-con01{
    margin-bottom:40px;
}

@media screen and (min-width: 768px),
print {
    .top-con01{
    padding:0 30px;
    margin:0 auto 80px;
        max-width: 1700px;
        display:flex;
        justify-content: space-between;
        position: relative;
        z-index:2;
}
}

.top-con01-left{
    padding:0 10px;
    margin-bottom: 30px;
}

@media screen and (min-width: 992px),
print {
    .top-con01-left{
        padding:0;
        width:45%;
    margin-bottom:0;
}
}

.top-con01-right{

}

@media screen and (min-width: 992px),
print {
    .top-con01-right{
        width:45%;
}
}

.top-con01-t01{
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
    font-weight: bold;
    font-size:25px;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

@media screen and (min-width: 992px),
print {
    .top-con01-t01{
    font-size:55px;
    margin-bottom: 40px;
        padding-bottom: 20px;
}
}



.top-con01-t02{
    margin-bottom: 20px;
    line-height: 2;
}

@media screen and (min-width: 992px),
print {
   .top-con01-t02{
    line-height: 2.4;
       margin-bottom:50px;
} 
}

.top-con01-photo01{
    
}

.top-con01-photo02{
    margin:-50px 0 0 50px;
}

.top-con01-photo02 video{
    width:100%;
    border-top-left-radius: 5px; 
    border-bottom-right-radius: 8px; 
}

@media screen and (min-width: 992px),
print {
    .top-con01-photo02 video{
    border-bottom-left-radius: 20px; 
}
}

@media screen and (min-width: 992px),
print {
    .top-con01-photo02{
    margin:-50px -50px 0 50px;
}
}


/*
++++++++++++++++++

top-con02

+++++++++++++++++++
*/

.top-con02{
    margin:-70px 0 40px;
}

@media screen and (min-width: 768px),
print {
    .top-con02{
    margin:-250px 0 110px;
        max-width:1500px;
        position: relative;
        z-index:1;
}
}


/*
++++++++++++++++++

top-con03

+++++++++++++++++++
*/

.top-con03-back{
    background-image: url("../../../../img/top/back01.png");
    background-position: right 0 bottom 0;
    background-repeat: no-repeat;
    background-size:400px;
    padding-bottom:70px;
}

@media screen and (min-width: 768px),
print {
    .top-con03-back{
    background-image: url("../../../../img/top/back01.png");
    background-position: right 0 bottom 0;
    background-repeat: no-repeat;
    background-size:800px;
    padding:60px 0;
}
}

.top-con03{

}

@media screen and (min-width: 768px),
print {
    .top-con03{
        max-width:1500px;
        margin:auto;
        padding:0 50px;
        display: flex;
        justify-content: space-between;
        
}
}

.top-con03-left{
    padding:0 10px;
    margin-bottom: 30px;
}

@media screen and (min-width: 768px),
print {
.top-con03-left{
    padding:50px 0 0 0;
    margin-bottom:0;
    width:45%;
}
    
}

.top-con03-right{
    padding-right:70px;
}

@media screen and (min-width: 768px),
print {
.top-con03-right{
    padding-left:0;
    width:40%;
}
    
}

/*
++++++++++++++++++

top-con04

+++++++++++++++++++
*/

.top-con04{
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 768px),
print {
    .top-con04{
    margin:0 auto;
        max-width:1500px;
        flex-direction:row;
        justify-content:center;
        
}
}

.top-con04-left{
    order:2;
    padding-right: 40px;
    margin-top:-50px;
}

@media screen and (min-width: 768px),
print {
    .top-con04-left{
    order:1;
    padding:190px 0 0 0;
        width:40%;
        margin-right:-70px;
        position: relative;
        z-index:2;
}
}

.top-con04-right{
    order:1;
    padding:50px 15px 80px;
    background: #f2f2f2;
}

@media screen and (min-width: 768px),
print {
    .top-con04-right{
    order:2;
    padding:120px 100px 70px 150px;
        width:60%;
        position: relative;
        z-index:1;
        margin-bottom: 70px;
}
}




.top-con04-t02{
    margin-bottom: 20px;
    line-height: 2;
}

@media screen and (min-width: 992px),
print {
   .top-con04-t02{
    line-height: 2.4;
       margin-bottom:50px;
} 
}

/*
++++++++++++++++++

top-con05

+++++++++++++++++++
*/

.top-con05{
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 768px),
print {
    .top-con05{
    margin:0 auto 110px;
        max-width:1500px;
        flex-direction:row;
        justify-content:center;
        
}
}

.top-con05-right{
    padding-left: 40px;
    margin-top:-50px;
}

@media screen and (min-width: 768px),
print {
    .top-con05-right{
    padding:190px 0 0 0;
        width:40%;
        margin-left:-70px;
        position: relative;
        z-index:2;
}
}

.top-con05-left{

    padding:50px 15px 80px;
    background: #f2f2f2;
}

@media screen and (min-width: 768px),
print {
    .top-con05-left{

    padding:120px 150px 70px 100px;
        width:60%;
        position: relative;
        z-index:1;
        margin-bottom: 70px;
}
}

.top-con05-t01{
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
    font-weight: bold;
    font-size:20px;
    margin-bottom: 15px;
}

@media screen and (min-width: 992px),
print {
    .top-con05-t01{
    font-size:40px;
    margin-bottom: 40px;
}
}


.top-con05-t02{
    margin-bottom: 20px;
    line-height: 2;
}

@media screen and (min-width: 992px),
print {
   .top-con05-t02{
    line-height: 2.4;
       margin-bottom:50px;
} 
}


/*
++++++++++++++++++

top-con06

+++++++++++++++++++
*/

.top-con06{
    margin-bottom:20px;
    padding:0 0 10px 15px;
}

@media screen and (min-width: 768px),
print {
    .top-con06{
    margin:0 auto 70px;
        max-width:900px;
        
}
}


/*
++++++++++++++++++

top-con07

+++++++++++++++++++
*/

.top-con07{
    padding:0 15px;
    margin-bottom: 40px;
}

@media screen and (min-width: 768px),
print {
    .top-con07{
    margin:0 auto 110px;
        max-width:900px;
        
}
}

.top-con07 li{
    border-bottom: 1px #000 solid;
    padding-left:7px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

@media screen and (min-width: 768px),
print {
.top-con07 li{
    display: flex;
    padding-bottom:35px;
    margin-bottom:35px;
}
    }

.top-con07-left{
    font-size:11px;
    margin-bottom: 5px;
}

@media screen and (min-width: 992px),
print {
   .top-con07-left{
    font-size:16px;
    margin:0;
       width:20%;
} 
}

.top-con07-right{

}

@media screen and (min-width: 992px),
print {
   .top-con07-right{
       width:80%;
} 
}

/*
++++++++++++++++++

top-con08

+++++++++++++++++++
*/

.top-con08{

}

@media screen and (min-width: 768px),
print {
    .top-con08{
    margin:0 auto;
        max-width:1800px;
        display: flex;
        justify-content: space-between;
        
}
}

.top-con08-right{
    padding:0 15px;
    margin-bottom:30px;
}

@media screen and (min-width: 992px),
print {
   .top-con08-right{
    margin-bottom:0;
       width: 47%;
       order:2;
} 
}

.top-con08-left{

}

@media screen and (min-width: 992px),
print {
   .top-con08-left{
       width:50%;
       order:1;
} 
}

.top-con08-photo01{
    padding-right: 20px;
}

@media screen and (min-width: 992px),
print {
   .top-con08-photo01{
    padding-right:0;
       width:330px;
} 
}


.top-con08-photo02{
    margin-top:-150px;
    padding-left:30px;
}

@media screen and (min-width: 992px),
print {
  .top-con08-photo02{
    margin-top:-110px;
    padding-left:50px;
  
}
}

.top-con08-photo03{
    margin:30px auto 0;
}

@media screen and (min-width: 992px),
print {
 .top-con08-photo03{
    margin:50px auto 0;
    width:100%;
}
}

.top-con08-t01{
    font-size:22px;
    margin-bottom: 20px;
}

@media screen and (min-width: 992px),
print {
    .top-con08-t01{
    font-size:35px;
    margin-bottom:60px;
}
}

.top-con08-t02{
    line-height: 2;
    margin-bottom: 20px;
}

@media screen and (min-width: 992px),
print {
    .top-con08-t02{
        line-height:3;
    margin-bottom:70px;
}
}

/*
++++++++++++++++++

top-con09

+++++++++++++++++++
*/

.top-con09{
    margin-bottom:30px;
    padding:0 0 10px 15px;
    font-weight: bold;
}

@media screen and (min-width: 768px),
print {
    .top-con09{
    margin:0 auto 70px;
        max-width:900px;
        
}
}


/*
++++++++++++++++++

top-con010

+++++++++++++++++++
*/

.top-con10 iframe{
   width: 100%;
    height:450px;
}

@media screen and (min-width: 768px),
print {
    .top-con10 iframe{
   width: 100%;
    height:600px;
        margin-bottom: 150px;
}
}









/*
++++++++++++++++++++++++++++++++++++++

@media screen and (min-width: 992px),
print {
    
}

@media screen and (min-width: 768px) and (max-width:991px)
{
}

+++++++++++++++++++++++++++++++++++++++++
*/