@charset "utf-8";    
@import url(https://fonts.googleapis.com/css?family=Sacramento);
@import url(https://fonts.googleapis.com/css?family=Limelight);

/*　フォント
---------------------------------------------------------------------------*/

.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }/*明朝体*/
.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }/*ゴシック*/
.wf-notosansjapanese { font-family: "Noto Sans Japanese"; }


/*リンク設定
---------------------------------------------------------------------------*/
#news a{
  color:#000;
	transition: 0.3s; /* マウスオン時の移り変わるまでの時間設定　0.3s*/
  text-decoration: none;
  border-bottom:1px dotted #888;

}
#news a:hover {
  background:#eae6de;
  /*background:#ddd;*/
}



/*メイン画像
---------------------------------------------------------------------------*/
#wrapper_mainVisual{	
  position:relative;

}

#mainVisual{	
  margin-top:0px;
	padding: 0px;
  border:none;
  text-align:center;  
  display:block;
  overflow:hidden;

}

 .slider-container {
  position: relative;
  margin:0 auto 0;
}

 .slider {
  display:block;
  margin: 0 0px;
  /* cursor: pointer;*/
  padding:0;
  background: transparent ;
  cursor: default;
}

/*スライダーの画像と文字を別々にするためのクラス。*/
.slider_page{
  position:relative;

}
/*スライダーの文字のクラス*/
/*　1枚目 - 5枚目　共通　*/
.slider_moji_01,.slider_moji_02,.slider_moji_03,.slider_moji_04,.slider_moji_05{
  display:block;

  font-family: "Sawarabi Gothic";
  font-family: "Sawarabi Mincho";
  font-family: "Noto Sans Japanese";
  position:absolute;
  width: 100%;
  text-align: center;
  text-align:left;

}
.slider_moji_01{
  top:35%;

  left:40%;
  color:white;
  font-weight:bold;
  font-size: 3.8rem;
  line-height:2;
  text-align:left;
}

.s_large{
   font-size:3.8rem;
}


/*　2枚目　*/
.slider_moji_02{
  bottom:20%;
  left:25%;
  color: #fff;
  text-align:center;
  font-size: 4.1rem;
  font-weight:bold;
}
/*　3枚目　*/
.slider_moji_03{
  top:55%;
  left:30%;
  color: #fff;
  text-align:center;
  font-size: 4.1rem;
  font-weight:bold;
}

/*　4枚目　*/
.slider_moji_04{

  top:21%;
  left:62%;
  color: #4f452e;
  font-size: 3.5rem;
  line-height:2.5;
}
/*　5枚目　*/
.slider_moji_05{

  top:16%;
  left:48%;
  color: #fff;

  font-size: 3.5rem;
  font-weight:bold;

}

/*slider*/
.shadow{
  text-shadow:2px 2px rgba(0, 0, 0, 0.2);
	-moz-text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
	-o-text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
	-ms-text-shadow: 2px 2px rgba(0, 0, 0, 0.2);  
  behavior: url(./PIE.htc);

}

/* slider*/
 .slider-arrow {
  display:none;
  position: absolute;
  top: 50%;
  margin-top: -20px;  /*  -18 */
  cursor: pointer;
  z-index:20;  /*  */
  opacity:0;
  width:70px;
}

#mainVisual .slider-prev{
  left: 28px;
  transition: 0.2s linear;
  opacity:1;
}

#mainVisual .slider-next{
  right: 23px;
  transition: 0.2s linear;
  opacity:1;
}

#mainVisual .slider-prev:hover,#mainVisual .slider-next:hover{
  opacity:0.8;
}
#mainVisual.slick-dots {
    display:none;
    bottom: -30px;
    opacity: 1;
}
#mainVisual .slick-dots li button:before {
    color: #4f452e;
    font-size:15px;    
    opacity: 1;
    margin-top:10px;

}
#mainVisual .slick-dots li.slick-active button:before {

    color:#CBE600;

}



/*コンテンツ
---------------------------------------------------------------------------*/
#index_cont{
  position:relative;
  zoom: 1;
  overflow:hidden;
  font-size:1.6rem;
  margin:30px 0 0px;
}

/*共通定義
--------------------------------------------------------*/
h2{
	display:block;
  font-family: "Noto Sans Japanese";
	padding:2px 0px 2px 0px;/**/
	font-size:2.4rem;
	text-align:center;
  background:#80b639;
	margin-bottom:0px;
  letter-spacing:10px;
  color:white;
  z-index:0;

 background-color: #80b639;
/*
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, #95c851), to(#95c851)),
-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, #95c851), to(#95c851));
-webkit-background-size: 5px 5px;
*/
/*
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #95c851), color-stop(.5, transparent), to(transparent));
-webkit-background-size: 5px;*/
}

h3{

}

.cont {
  position:relative;
	padding:20px 40px;
  background:white;
}

/*ごあいさつ
---------------------------------------------------------*/
#greeting{
  position:relative;
  margin:30px 0 70px;
	background:white;
  line-height:1.8;
  height:250px;
  box-shadow:2px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
	-ms-box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
  behavior: url(./PIE.htc);

 /*
  animation: slideInUp; *//* referring directly to the animation's @keyframe declaration */
  /*animation-duration: 2s;*/
}

.kazari01{
  position:absolute;
  top:80px;
  left:10px;
  width:130px;
  opacity:1;
  z-index:0;
}

.l_cont{ 
	float:left;
	margin:30px 40px 20px 170px;
	width:54%;
  text-align:justify;


}
.r_cont {
  position:absolute;
  top:15px;
  right:30px;
  width:290px;
  z-index:10;
}

/*真ん中の３本柱
---------------------------------------------------------*/
#menu_002{
  position:relative;
  margin: 20px 0 70px;
}
#menu_002 ul{
  position:relative;
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

#menu_002 img{

  width:140px;
}
#menu_002 ul a{
  text-decoration:none;
}

#menu_002 ul  a:hover li .menu_002_cnt img{
  transform: rotate( -3deg );
  transition: 0.3s;
}

#menu_002 ul li{
  width:362px;
  height:180px;
  background:white;
  margin:0 24px 0 0;
  padding:0;
  display:block;
  box-shadow:2px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
	-ms-box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
  behavior: url(./PIE.htc);
}
#menu_002 .child01{
position:relative;
}

#menu_002 .child01 h2{
  position:relative;
  background:#0AB0F7;

}
#menu_002 .child02 h2{
  position:relative;
  background:#f7530b;
  background:#80b639;
  background:#F7650A;
}
#menu_002 .child03 h2{
  position:relative;
  background:#EB9809;
}


#menu_002 .menu_002_cnt{
  position:relative;
  padding:20px;
  font-size:14px;
  letter-spacing:1px;
  text-align: justify;
  text-justify: inter-ideograph;
  height:82px;
}
#menu_002 .menu_002_cnt p img{
  position:absolute;
  bottom:0px;
  right:0px;
  width:100px;

}
#menu_002 .menu_002_cnt img{
  float:left;
  margin-right:20px;
}

/*左右にわかれたところ
-----------------------------------------*/
#menu_003{
  /*position:relative;
  display:block;
  width:100%;
  margin-bottom:40px;*/
  box-sizing: content-box;
  position:relative;
  display:flex;
  justify-content: space-between;
  margin-bottom:70px;
}


#left_side{
  position:relative;

 /*  float:left;*/
  display:block;
  width:70%;

  margin-right:0px;
}
#left_side h2{

  padding-bottom:5px;

}

#right_side{
  width:25%;
}
#right_side h2{
  
  padding-bottom:5px;

}

/*お知らせ
-----------------------------------*/
#news{
  position:relative;
  padding:0px 40px 70px;
  margin-bottom:0px;
  background:white;
}

#news p{
  position:relative;
  font-size:14px;
  text-align:left;
  margin:0px auto 0px ;
  padding:8px;
}
#news .frame_waku{
  position:relative;
  padding:0px;
  margin-top:0px;
}

#news h3{
  font-size:18px;
}
#news dl{
  position:relative;
  padding:10px 0 0;
  margin:0px;
}
.cont_dl2{
  font-size:15.5px;
}

#news dl::after{
  content:"";
  clear:both;
  display:block;
}

#news dt,
#news dd{
  display:block;
  padding:20px 0 0px;
  margin:0;
}

#news dt{
  float:left;
  clear:left;
  width: 15%;
  font-size:15px;
  font-weight:bold;
  border-top:1px dashed gray;

  padding:20px 0 30px;
}
#news  .cont_dt{
  width:20%;
  color:#000;
  font-weight:normal;
  border-top:none;

}
#news  .cont_dt2{
  float:left;
  width:42%;
  color:#000;
  font-weight:normal;
  border-top:none;

  padding:0px 0 0px;

}

#news dd {
  position:relative;
  float:left;
  width:85%;
  color:#31220a;

  border-top:1px dashed gray;
  padding:20px 0 20px;
}
#news .cont_dd{
  border-top:none;
}
#news .cont_dd2{
  border-top:none;

  width:57%;
  padding:0px 0 0px;
}
#news dt:first-child,#news dt:first-child + dd{
  border-top:none;
}

#news dd a img{
  margin:20px 0 20px;
  height:250px;
  object-fit: cover;
}
#news dd a img:hover{
  transform: rotate( -2deg );
  transition: 0.3s;
}

.news_list_wrap{
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0;             /* デフォルト指定上書き */
    padding: 0;  
    text-indent:-1em;
    margin-left:2em;
}
.news_list:before{
    content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #000;     /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: -1px;                  /* 位置調整 */
    margin-right: 5px;          /* 余白指定 */

}

.news_list_diamond:before {
    content: "";
    position: absolute;
    top: .4em;
    left: 0;
    width: 8.3px;
    height: 8.3px;
    background-color: #000;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

    display:  inline-block;     /* インラインブロックにする */

    position:  relative;        /* 位置調整 */
    top: -1px;                  /* 位置調整 */
    margin-right: 6px;          /* 余白指定 */
}


/*--------------------------------------------------------------
ｃｓｓでの改行　ＰＣ表示の時のみ改行したい */

.css-br::before {
  content: "\A";
  white-space: pre;
}
/*-------------------------------------------------------------*/

.news-text{
  font-size:15px;
  line-height:2.5rem;
}
.css-underline{
  border-bottom:1px solid;
}
#new_icon{
  display:block;
  font-size:15px;
  color:#f7530b;
 
}
.text-left{
  text-align:left;
}
.text-right{
  text-align:right;
}
.news-flex{
  width:100%;
  position:relative;
  display:flex;
  flex-wrap: nowrap;
  box-sizing:content-box;
}
.news-clubname{
  width:230px;

}
.news-clubname2{
  font-size:14px;
  width:200px;

}
.news-schejule{
  width:calc(100% - 230px);

}
.news-schejule2{
  width:calc(100% - 200px);
  font-size:14px;

}

.font-maker_y{
  background:linear-gradient(transparent 40%, #ff6 60%);
}
.font-maker_b{
  background:linear-gradient(transparent 40%, rgb(187, 226, 249) 60%);
}
.font-maker_p{
  background:linear-gradient(transparent 40%, rgb(249, 187, 235) 60%);
}
.font-maker_g{
  background:linear-gradient(transparent 40%, rgb(194, 249, 187) 60%);
}
.font-maker_v{
  background:linear-gradient(transparent 40%, rgb(222, 187, 249) 60%);
}
.font-bold{
  font-weight:bold;
}


/* 続きを読むのボタン作成用　コード*/
.read-more-state {
  display: none;
  transition: all 2s ease;
}
.read-more-target {
  /* opacity: 0;*/  transition: all 2s ease;
  display:none;
  max-height: 0;
  font-size: 0;

}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  /* opacity: 1;*/  transition: all 2s ease;
  display:inline-block;
  font-size: inherit;
  max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
  content: '続きを読む +';
}
.read-more-state:checked ~ .read-more-trigger:before {
  content: '閉じる';
}

.read-more-trigger {
  transition: all 2s ease;
  position:absolute;
  bottom:-40px;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(0) translateX(-50%);

  max-width: 700px;
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  width:80%;
  color:#f7530b;
  font-size: 1em;
  line-height: 2;
  border: 1px solid #f7530b;
  border-radius: .25em;
  transition: .5s ease;
  text-align:center;
}

/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

.ribbon13 {    
    
   /*  display: inline-block;*/
    display:none;   
    position: absolute;
    top: -6px;
    left: 30px;
    margin: 0;
    padding: 10px 0;
    z-index: 2;
    width: 60px;
    text-align: center;
    color: #7D8C62;
    color:#fff;
    font-size: 23px;
    background: linear-gradient(#519500 0%, #519500 100%);
    border-radius: 2px 0 0 0;
  }

.ribbon13:before{
    position: absolute;
    content: '';
    top: 0;
    right: -6px;
    border: none;
    border-bottom: solid 6px #7D8C62;
    border-right: solid 6px transparent;
}
.ribbon13:after{
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    width: 0;
    border-left: 30px solid #519500;
    border-right: 30px solid #519500;
    border-bottom: 10px solid transparent;
}

/*まとめ
---------------------------------------------------------*/
#matome{
  position:relative;
  background:white;
  margin:0px 0 70px;
  line-height:2.0;
}
#matome h2{
  letter-spacing:3.4px;
}
#matome .cont{
  position:relative;
  padding:30px 40px;
  margin-top:0px;

}
#matome .cont-01{
  display:flex;
  justify-content: space-between;
}
#matome .left_cont{
   width:70%;
}
#matome .right_cont{
  width:27%;
  height:200px;
}
#matome .right_cont img{
  width:100%;
  object-fit: contain;
}

.kazari02{
  position:absolute;
  top:130px;
  right:0px;
  width:100px;
  z-index:1;

}
/*店舗情報
----------------------*/
#tenpo_info{
  position:relative;
  color:#232323;
  font-size:1.5rem;
  width:100%;
  height:600px;  
  padding:20px 0px 40px;
  text-align:center;
  background:white;
}

#tenpo_info img{
  width:150px;
  margin:15px 0 0px;
}

/*店舗情報　テーブル設定*/
#tenpo_info dl{
  text-align:left;
  width:75%;
  font-size:90%;
  color:#000;
  margin:30px auto 0;
}
#tenpo_info dl::after{
  content:"";
  clear:both;
  display:block;
}

#tenpo_info dt,#tenpo_info dd{
  display:block;

  padding:5px 0;
}
#tenpo_info dt:first-child + dd{
  border-top:none;
}

#tenpo_info dt {
  display:inline;
  font-family: "Noto Sans Japanese";
  font-size:16px;
  font-weight:bold;
  color: #80b639;
  color:#4d4747;
  text-align: left;
}
#tenpo_info dt i{
  margin-right:10px;
  color:#519500;
}
#tenpo_info dd{
  border-bottom:1px solid #ccc;
  padding:10px 0;
  margin-bottom:20px;
}

#tenpo_info ul{
  margin-top:0px;
}
#tenpo_info li{
  list-style-type: circle;
  margin-left:18px;
}


/*リンク（この右側のみ）設定
------------------------------*/
#tenpo_info a{

  color:#000;
	transition: 0.3s; /* マウスオン時の移り変わるまでの時間設定　0.3s*/
/*   text-decoration: underline dashed #aaa;*/
  text-decoration:none;
  border-bottom:1px dashed #aaa;
  line-height:2;
  

}
#tenpo_info a:hover {
  background:#ddd;
 /*background:#ddd;*/
}

/*TEL番号
----------*/
#tenpo_info .c_tel{
  margin:0px 0;
  pointer-events: none;
  border-bottom:none;
  /* color:#f7530b;*/ /*オレンジ*/
}
#tenpo_info .c_tel a{
  border-bottom:none;
  
}