@charset "utf-8";
/*body{ background-color:#f6aa00; }*/
html { scroll-behavior: smooth;}
section{ display:block; }

.clearfix:after {
    clear: both;
    content: "";
    display: block;
}
.text_s{ font-size:86%; }

.red{
    float: right;
    background-color: red;
    padding: 2px 4px;
    margin: 2px 0 0 4px;
    color: white;
    font-size: 11px;
    font-weight: bold;
    }
.pagetop {
    display: none;
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 2;
  cursor: pointer;
}

.note{
    margin:20px;
    padding: 30px;
    font-size: 80%;
    text-align: left;
    line-height: 15px;
 }

img {
    vertical-align: bottom;
 }
#back1{
    background: #DEE098;
 }
#back2{
    background: #333333;
 }
#back3{
    background: #C7A881;
 }


/* 動画全体の横幅を指定するためのdiv */
.video-wrap {
	margin: auto;
  max-width: 91%; /* ここに動画の横幅を指定 */
}

/* 動画を囲うdiv */
.video1 {
  position: relative;
  width:100%; /* 横幅は100%で固定 */
  height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
  padding-top: 56.25%; /* 高さを指定(16:9) */
}

/* YouTube埋め込み用のiframe */
.video1 iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* カテゴリ */
.category{
    width: 85%;
    margin: 30px auto;
    padding: 0 0 30px;
    background-color: #003F34;
}
.category p a{
    display: block;
    color: #d2d4a5;
    font-size: 1.5em;
    font-weight: 400;
    padding: 15px;
    list-style: none;
    text-decoration: none;
}
.category ul{
    display: flex;
    list-style: none;
    padding: 0 30px 0;
    margin: 0;
}
.category ul li{
    flex: 1;
    margin:5px;
}

.category ul li:first-child {
  margin-left: 0; /* 最初の要素の左マージンをなくす（必要に応じて調整） */
}

.category ul li:last-child {
  margin-right: 0; /* 最後の要素の右マージンをなくす（必要に応じて調整） */
}

.category ul img {
  width: 100%; /* 親要素（<li>）の幅いっぱいに画像を広げる */
  height: auto; /* アスペクト比を保つ */
  display: block; /* imgタグのデフォルトのインライン挙動を解消し、marginの挙動を安定させる */
}

/*// ボタン基本コード*/
.c-btn {
    display: block;
    border: 2px solid #f27A055;
    border-radius: 60px;
    background-color: #a5c626;
    color: #fff;
    font-weight: bold;
    text-decoration: none !important;
	text-align: center;
    max-width: 300px;
    padding: 15px 40px;
	margin: auto;
}

.button-2 {
    display: block;
    width: 250px;
    margin:20px auto 20px;
    padding: 0.8em 1em;
    border: none;
    border-radius: 3px;
    background-color: #003F34;
    color: #DCCCA6;
    text-align: center;
    font-weight: 400;
    font-size: 1em;
    transition: 1s;
    list-style: none;
    text-decoration: none;
}

.button-2:hover {
    opacity: 0.7;
}

/*// テキスト基本コード*/
.c-txt {
  color: #f27A055;
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.06em;
}
 
.c-btn.slide.skew::after {
  transform: skewY(-10deg) scale(1, 0);
  height: 140px; /*// ボタンの高さによって調整*/
}
.c-btn.slide.skew:hover::after {
  transform: skewY(-10deg) scale(1, 1);
}

/* ----------------------------------------------
	スライド
------------------------------------------------- */
/*.slider img{
    margin:5px!important;
}*/
.slide{
	margin: auto;
	background-color: #fff;
}
.img_slide{
	margin: auto;
  max-width: 91%; /* ここに写真の横幅を指定 */
}
/*.back_c{
	background-color: #FDD077;
}*/

/*==================================================
スライダーのためのcss
===================================*/

/*画像の横幅を100%にしてレスポンシブ化*/
.wrapper img{
  /*width: 100%;
padding: 1px;
  height: auto;
  vertical-align: bottom;*//*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/
.gallery{
  margin:0 0 5px 0;
}
li{
list-style: none;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    width: 38px;
    height: 38px;
    background: rgba(112, 112, 112, 0.6);
    border: 1px solid rgb(255, 255, 255);
    border-radius: 50%;
}

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

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

.slick-prev::after,
.slick-next::after{
    content: '';
    display: inline-block;
  vertical-align: middle;
	width: 1em;
  height: 1em;
    border: 2px solid #fff;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
    border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
}
.slick-prev::after{
    position: relative;
    top: 0px;
    left: 0px;}
.slick-next::after{
    position: relative;
    top: 0px;
    right: 0px;}

/*選択するサムネイル画像の設定*/

.choice-btn li{
  cursor: pointer;
  outline: none;
	list-style: none;
  background:#333;
}

.choice-btn li img{
  opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img{
  opacity: 1;/*選択されているものは透過しない*/
}

/*========= レイアウトのためのCSS ===============*/
/*エリア全体を中央寄せ*/
.wrapper{
/*  width:94%;
  max-width:900px;*/
  margin:0 auto;
}

ul{
  margin:0;
  padding: 0;
  list-style: none;
}

.wrapper a{
  /*color: #333;*/
}

.wrapper a:hover,
.wrapper a:active{
  text-decoration: none;
}

.wrapper p{
  /*margin:30px 0;
  word-wrap : break-word;*/
}


/* ----------------------------------------------
	ナビ
------------------------------------------------- */
#navbb1{
	display:block;
    background-color: #FFFFFF;
}
#global-nav{
	display:block;
	margin: 0 auto;
    padding: 0;
    width: 100%;
	text-align: center;
	z-index: 2;
    transition: 1.0s ;
}
#global-nav.hide{
	transform: translateY(-100%);
}
.hideClass {
  transform: translateY(-60px);
}

.nav{
    position: fixed;
    top: 0;
    padding: 0;
    width: 100%;
    /*transition: 1.0s ;*/
    z-index: 1000;
}

.nav a:hover img {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
    }
.nav a img{
    transition: 1.0s ;
    }