/*背景色のアニメーション
body {
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}
@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
*/

/*フッターとヘッダー*/
#header, #footer {
    position: fixed;
    height: 65px;
    display: block;
    width: 100%;
    background: #333;
    z-index: 9;
    text-align: center;
    color: #f2f2f2;
    padding: 5px 0 0 0;
}
#header img{
    width: 230px;
    float: left;
}
#header h1{
    float: right;
    margin: 25px 50px;
}
#footer {
    bottom: 0px;
    display: flex;
}
#footer div{
    flex-grow: 1;
  margin: auto;
}
#footer img{
  vertical-align: middle;
  margin: 0px 10px;
}

/*各セクションのスタイル*/
/*
.section{
  margin:  10px;
}
/*どうも.sectionをつけるとjs fullpageとうまく動かなくなる  */
.slide_box{
  margin: 0px 50px 0px 50px;
}

.section h2{
  font-size: 20px;
    position: relative;
    top: 90px;
    left: 20px;  
}
#prices h2,#contacts h2{
  position: inherit;
  margin-left: 20px; 
}
.section h3{
  font-size: 20px;
  margin-bottom: 10px;
}
.section h4{
  font-size: 30px;
  margin-bottom: 30px;
}



.price_area{
  margin: 40px;
}
/*プライスボックスのスタイル*/
.price_box
{
  background-color: rgba(218, 218, 218, 0.8);
  padding: 15px;
  margin: 20px 0 40px 0;
  position:relative;
  font-family: 'Open Sans', sans-serif;
  text-decoration:none;
  background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
  border-radius: 5px; 
}

.price_box::before {
  background-color: rgba(255, 255, 255, 0);
  content:"";
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  padding:8px;
  left:-8px;
  top:-8px;
  z-index:-1;
  border-radius: 5px;
  box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}
.price_area ul{
    margin-left: 20px;
    margin-bottom: 20px;
    line-height: 1.5em;
}

.price_area  li{
 list-style: square outside;
  color: #666;
  list-style-image: none;
}

/*
.slide{
  margin: 0px 0px 0px 50px;
}
/*.slideにスタイルを付けてもおかしくなる*/

.main_box{
  display: flex;
  justify-content: space-between;
}
.main_box .text_box,.main_box .img_box{
  margin: 10px;
    max-width: 40%;
    flex-grow: 1;
    line-height: 2em;

}
/*画像のスタイル*/
.main_box .mainImg{
  margin: 10px 10px 10px 0px;
  max-width: 600px;  
  border-radius: 10px;  
}



/*背景キャンバスを全画面に固定する方法サイズはjsで指定*/
body{
    margin: 0px;
    padding: 0px;
    position: relative;
}

#particles-js{
    height: auto;
    overflow: auto;
    position: fixed;
    z-index: -1;
    width: 100%;
    height:100%;
    min-height:100%;
}
canvas{
    position: fixed;
}
/*スライド下部のドット*/
#fp-nav ul, .fp-slidesNav ul {
    margin-bottom: 50px;
}
#fp-nav.right {
    right: 0px;
}

/*左右スライドのボタンをアニメート*/
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 18.5px 24px 18.5px 0;
    border-color: transparent #ccc transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 18.5px 0 18.5px 24px;
    border-color: transparent transparent transparent #ccc;
}

/*コンタクトフォーム*/
#modal-content{
  width:50%;
  margin:1.5em auto 0;
  padding:10px 20px;
  border:2px solid #aaa;
  background:#fff;
  z-index:10;
  position:fixed;
}

.modal-p{
  margin-top:1em;
}

.modal-p:first-child{
  margin-top:0;
}

.button-link{
  color:#00f;
  text-decoration:underline;
}
 
.button-link:hover{
  cursor:pointer;
  color:#f00;
}