@charset "UTF-8";

body {
	background: #fff;
	background-image: url('https://image.rakuten.co.jp/benkyo/cabinet/02640991/04958602/imgrc0078531074.jpg')/*,url('https://image.rakuten.co.jp/benkyo/cabinet/02562713/point_banner/0604_ss_100x600.jpg')*/;
	background-position: left,right;
	background-repeat: repeat-y;
	background-attachment: scroll;
	-webkit-text-size-adjust: 100%;
}
@media only screen and (max-width: 1280px){
  body{
    background-image:none;
  }
}


/*
    .slick-slide {
      margin: 0px 15px;
    }
    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }

    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }*/
		/*========= 検索窓を開くための虫眼鏡ボタン設定 ===========*/

		.open-btn{
		  position: absolute;
		  top:6px;
		  left:3px;
		  background: url("../images/search.svg") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/
		  background-size: 30px 30px;
		  width:50px;
		  height:50px;
		  /*border-radius: 50%;*/
		  cursor: pointer;
		}

		/*========= 検索窓の設定 ===============*/

		/*==検索窓背景のエリア*/

		#search-wrap{
		    position:fixed;/*固定配置にして*/
		  top: 0;
		    left: 0;
		  z-index: -1;/*最背面に設定*/
		  opacity: 0;/*透過を0に*/
		  transition: all 0.4s;/*transitionを使ってスムースに現れる*/
		  width:100%;
		  height: 100vh;
		}

		/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
		#search-wrap.panelactive{
		  opacity: 1;/*不透明に変更*/
		   z-index: 99999;/*全面に出現*/
		   background: rgba(24, 207, 205, 0.94);
		    /*中の要素を天地中央揃えにする設定*/
		   display: flex;
		   justify-content: center;
		   align-items: center;
		}

		/*==検索窓のエリア*/

		#search-wrap .search-area{
		  display: none;/*検索窓のエリアは、はじめ非表示*/
		}

		/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後*/
		#search-wrap.panelactive .search-area{
		  display: block;/*検索窓エリアを表示*/
		  width:80%;
		  position: relative;
			bottom: 18%;
		}

		/*==検索フォームの設定*/

		#search-wrap form{
		  position: relative;
		  height: 66px;
		}

		/*==テキスト入力とボタンinput共通設定*/
		#search-wrap input{
		  -webkit-appearance:none;/*SafariやChromeのデフォルトの設定を無効*/
		  outline: none;
		  cursor: pointer;/*カーソルを指マークに*/
		  color: #333;
		}

		/*テキスト入力input設定*/
		 #search-wrap input[type="text"] {
		  width: 100%;
		  padding: 15px 20px;
		  border: none;
		  border-bottom:2px solid #666;
		  transition: all 0.5s;
		  letter-spacing: 0.05em;
			font-size:1rem;
		}

		 #search-wrap input[type="text"]:focus {
		  background:#fff;
		}

		/*ボタンinput設定*/
		 #search-wrap input[type="submit"] {
		  position: absolute;
		   top: -5px;
		  right: 2px;
		  background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_search.svg") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/
		  background-size: 25px 25px;
		  width:60px;
		  height: 60px;
			border: none;
		}

		/*=======　閉じるための×ボタン　========*/
		.close-btn{
		  position: absolute;
		  top:22%;
		  right:20px;
		  z-index: 2;
		  cursor: pointer;
		    width: 60px;
		    height:60px;
		}

		.close-btn span{
		    display: inline-block;
		    position: absolute;
		    left: 14px;
		    height: 3px;
		    border-radius: 2px;
		  background-color: #fff;
		 }

		/*×マーク*/
		.close-btn span:nth-of-type(1) {
		    top: 21px;
		    left: 16px;
		    transform: translateY(6px) rotate(-135deg);
		    width: 50%;
		}

		.close-btn span:nth-of-type(2){
		    top: 32px;
		    left: 16px;
		    transform: translateY(-6px) rotate(135deg);
		    width: 50%;
		}
.search-area h2{
	color:#fff;
	font-size:1.7rem;
	padding:15px 0;
}