@charset "UTF-8";
/* CSS Document */

/*ベース*/

body{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    max-width: 1920px;
    margin: auto;
    height: 100vh;
	text-align: center;
	padding:auto; 
    position: relative;	
    letter-spacing: .1rem;
    line-height: 2rem;
}
.sp {display: none !important;}
.pc {display: block !important;}

a{color:white;}
a:visit{color:white;}
a:hover{color:lightgray;}

.service a {color:black;}
.service a:visited {color:black;}
.service a:hover{opacity: .8;}

header{position: fixed;
width:100%;
z-index: 999;
height:4rem;}

.wrap{width:80%;
margin: auto;}

/*分割*/
.calam2{width:calc(100%/2); }
.calam3{width:calc(100%/3); }
.calam4{width:calc(100%/4); }


.sub-header{
padding: 3rem ;
color:white;
text-align: center;
}
.sub-header h2{display: inline-block;
margin-top: 3rem;}


/*insta*/
.wedget-flame{margin: 2rem 0;
}



/*ヘッダー*/

header li{display: inline-block;
text-shadow:  2px 3px 3px rgba(0, 0, 0, 0.4);}
header ul{margin-right: auto;
text-align: right;
margin-right:1rem;}

header a{color: white;
}


/*TOP動画*/

video{width:100%;
margin-top: 3rem;
}

/*セクション*/
section{margin-top: 3rem;
padding:3rem;

}



/*背景*/

.bg-pink{background-color: #FFF2F2;}
.bg-yellow{background-color: #FDF6DC;}
.bg-blue{background-color:#E5FFFA;}
.bg-white{background-color:#FFFFFF;}

.bg-pink2{background-color:#FF6A98;}
.bg-yellow2{background-color:#EA9345;}
.bg-blue2{background-color:#1CB7BD;}


.bg-grade-red{background: linear-gradient(270deg,rgba(245, 204, 248, 1) 0%, rgba(213, 40, 106, 1) 100%);}
.bg-grade-pink{background: linear-gradient(180deg,rgba(255, 168, 168, 1) 0%, rgba(175, 7, 52, 1) 100%);}
.bg-grade-yellow{background: linear-gradient(180deg,rgba(255, 245, 123, 1) 0%, rgba(216, 128, 10, 1) 100%);}
.bg-grade-blue{background: linear-gradient(180deg,rgba(125, 250, 211, 1) 0%, rgba(6, 171, 185, 1) 100%);}
.bg-grade-mulch{background: linear-gradient(174deg,rgba(255, 255, 255, 1) 0%, rgba(248, 224, 186, 0.87) 50%, rgba(242, 126, 152, 0.67) 100%);}


.bg1{background-image:url("../img/red.png");
      background-repeat: no-repeat;
    background-size: cover;
    margin-top:0;
    padding:4rem 2rem;
}
.bg2{background-image:url("../img/yellow.png");
      background-repeat: no-repeat;
    background-size: cover;
    margin-top:0;
     padding:4rem 2rem;
}
.bg3{background-image:url("../img/blue.png");
      background-repeat: no-repeat;
    background-size: cover;
    margin-top:0;
      padding:4rem 2rem;
}



/*LINE*/
.line-pink{text-decoration:underline;
    text-decoration-color: #EC848E;
text-underline-offset: .8rem;
     margin-bottom: 3rem;
    margin-top: 3rem;
}
.line-yellow{text-decoration:underline;
    text-decoration-color: #EA9345;
text-underline-offset: .8rem;
      margin-bottom: 3rem;
    margin-top: 3rem;}

.line-blue{text-decoration:underline ;
    text-decoration-color: #1CB7BD;
text-underline-offset: .8rem;
    margin-bottom: 3rem;
    margin-top: 3rem;}

/*文字*/
h3,h2{margin-bottom: 1rem;}

p{margin-bottom: .8rem;}

.pink{color:#EC848E;
font-weight: 800;}

.access{font-weight: 800;
    text-align: left;
    width:80%;
    margin: auto;
}

.title{color:white;}

/*バナー系*/

.bnr{
border-radius: 20px;
padding: 1rem;
}

.bnrs{width:60%;
    margin: 2rem auto;
border-radius: 20px;
padding: 1rem;
}

.bnr3{border-radius: 20px;
padding: 1rem;
display: flex;
align-items: center;
flex-direction: column;
}
.bnr3 p{vertical-align: middle;}

.mago{flex-grow:1;}

.bnr img{width:70%;
margin: auto;
}

.bnr2{margin-top:auto;
width:80%;
padding:.5rem 1rem;
border-radius: 20px;
    
}

/*テキストボックス*/
.text-box{display: inline-block;
margin: auto;
text-align: left;}

.text-box2{display: inline-block;
margin-top: auto;
margin-left: 2rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
text-align: left;
width:40%;}

/*位置*/
.flex2{display: flex;
    flex-direction: column;
}

.service a{flex-grow: 1;}

.track{display: inline-block;
margin-top: auto;
width:45%;
margin-bottom: -2rem;}

.logo{width:40%;}

.logos{display: flex;
    flex-direction: column;
    align-items: center;
}

.logos img{display: inline-block;
    text-align: center;
    margin-bottom: 5rem;
}

.logos img:last-child{
    margin-top: auto;
margin-bottom: 0;}

.yamazo{width:30%;
    margin: auto;
text-align: center;}
.yamazo img{display: inline-block;}


.news{width:60%;}

#news li{border-bottom: 1px solid lightpink;
margin-bottom: 1rem;}

/*テーブル*/
table {border: 1px solid gray;
border-collapse:collapse;
border-spacing: 0;
margin: auto;
width:90%;
}

td{text-align: left;
padding: 2rem;}

tr:first-child th{background: linear-gradient(270deg,rgba(245, 204, 248, 1) 0%, rgba(213, 40, 106, 1) 100%); 
color:white;
    padding:1rem;
border-bottom:none;}


tr {border-bottom: 1px solid gray;
padding: 1.5rem;}

th{background-color: lightgray;
padding:.8rem;}

table a{color:black;}


.sns{
 aspect-ratio:3/2;
width:100%;
margin: auto;}

.sns iframe{width:100%;
height:100%;}

.map{
 aspect-ratio:16/9;
width:80%;
margin: auto;
}

.map iframe{width:100%;
height:100%;}



/*ここからスマホの表示*/
@media screen and (max-width : 768px){
.of-x{overflow-x: hidden;}
    .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
    
    iframe{height: 30vh;}
    
    .of-x{overflow-x: hidden;}
  
.flex{flex-wrap: wrap;}  
.calam2 , .calam3 ,.calam4{flex: 1 1 100%; ; }
section{margin-top: 3rem;
padding:0 3px;

}

.wrap{width:95%;}
    
    table{width:95%;}
    
    .logo{width:80%;}
    
.logos{display:block;}
.logos img{display:block;
    margin: auto;
    margin-bottom: 2rem;}

.logos img:last-child{
    margin-top: 0;
    width:90%;
}
    
#strong img{width:70%;}
    
.yamazo{width:50%;
    margin: auto;}
    
    .news{width:90%;
    margin: auto;}
    
 .news ul{font-size: .8rem;
    width:95%;}
    
    
.text-box2{display: inline-block;
margin:auto;
text-align: center;
padding: 3rem 0 0;
width:90%;}
    
.title{color:black;}
    
    .steps{width:80%;}    
    
    /* ハンバーガーアイコン */
.hamburger {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content:space-around;
  cursor: pointer;
  margin-left:auto;
  margin-right: 5px;
  z-index: 1001; /* メニューより前 */
}

.hamburger span {
  display: block;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: 0.3s;
  margin: .2rem;
z-index: 1002;
}

/* メニュー */
.nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 70%;
  height: 100vh;
  background: rgba(0,0,0,0.9);
  color: #fff;
  transition: right 0.3s ease;
  z-index: 1000;
}

.nav ul {
  list-style: none;
  padding: 80px 20px;
  margin: 0;
}
.nav li {
  margin-bottom: 20px;
    display: block;
}
.nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}

    .track{ 
width:90%;
    margin: auto;}
    
    video{width: 100vw;
    z-index: 0}
    
    .text-box2{margin: auto;
        width:95%;}
    
    .bnr img{width:90%;
}
    
/* メニュー開いた状態 */
.nav.open {
  right: 0;
}

/* ハンバーガー開いた時のアニメーション */
.hamburger.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}


    
}