@charset "utf-8";
/*================================================
 *  リンク設定
 ================================================*/		
a:link{ 
	font-weight: bold;
	text-decoration: none;}
a:visited{ 
	font-weight: bold;
	text-decoration:none;}
a:hover{ 
	font-weight: bold;
	text-decoration:none;}
a:active{ 
	font-weight: bold;
	text-decoration:none;}



/*================================================
 *  アニメーション設定
 ================================================*/	
.fluffy { animation: fluffy1 3s ease infinite;}
@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}



/*================================================
 *  共通
 ================================================*/
body{ 
	color: #333;
	font-size: 15px;
	line-height: 1.5;
	font-family:'Lato', 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	background: #fff;
}



/*================================================
 *  main
 ================================================*/	
#info{
	min-height: 100%;
	background: url(../images/back_main.jpg) no-repeat center center;
	background-size:cover;
}
#info_beads{
	min-height: 100%;
	background: url(../images/background.jpg) repeat;
	background-size:cover;
}
#Contents_col_01{ background-color: rgba(255,255,255,0.3);}
#Contents_col_01_beads{ background-color: rgba(255,255,255,0.3);}
h1{
	width: 95%;
	padding-left: 5%;
	margin: 0 auto 100px;
}
h1.beadsfesTitle{
	font-size: 90px;
	font-weight: bold;
	text-align: right;
	line-height: 1.2;
	background: url(../images/h1_back.png) no-repeat;
	padding: 110px 0 0;
}
h1.beadsfesTitle span{
	display: block;
	font-size: 50px;
	font-weight: bold;
	margin-bottom: 0;
}
#Contents_col_02{ background-color: rgba(255,231,146,0.8);}
#Contents_col_03{ background: repeating-linear-gradient(-45deg, #ffe071, #ffe071 14px, #fffdf8 0, #fffdf8 28px);}
#Contents_col_04{ background-color: rgba(255,224,113,0.45);}
#Contents_col_06{ background-color: rgba(255,224,113,0.45);}
@media screen and (max-width: 1000px) {
	#info{
	min-height: 100%;
	background: url(../images/back_main.jpg) no-repeat center top;
	background-size: cover;
	}
	h1{ 
		width: 95%;
		margin: 0 auto 100px;
	}
    h1 img{ width: 80%;}
	h1.beadsfesTitle{ background-size: 80% auto;}
}



/*================================================
 *  section
 ================================================*/	
.section{ 
	width: 1000px;
	padding: 3% 0;
	margin: 0 auto;
}
.box{
	width: 90%;
	margin: 0 auto;
}
@media screen and (max-width: 1000px) {
    .section{ 
		width: 100%;
		padding: 5% 0;
		margin: 0;
	}
}

/*---------- Contents_col_01 ----------*/
.left{
	width: 60%;
	float: left;
	background-color: rgba(255,255,255,0.9);
	border-radius: 8px;
	padding: 3%;
}
.left2{ 
	width: 60%;
	float: left;
}
.left p{ margin-bottom: 10px;}
.left p span{
	font-size: 18px;
	font-weight: bold;
}
.right{
	width: 33%;
	float: right;
}
.right2{
	width: 38%;
	float: right;
}
@media screen and (max-width: 1000px) {
	.left2 img{ width: 100%;}
	.right img{ width: 100%;}
}

/*---------- Contents_col_02 ----------*/	
#Contents_col_02 dl{
	width: 38%;
	float: left;
	padding-right: 2%;
	margin-bottom: 10px;
}
#Contents_col_02 dl dt{
	display: inline-block;
	color: #fff;
	font-weight: bold;
	background: #f29877;
	border-radius: 6px;
	padding: 3px 6px;
	margin-bottom: 4px;
}
#Contents_col_02 dl dd{ margin-bottom: 22px;}
.rootBtn{
	display: inline-block;
	font-weight: bold;
	text-align: center;
	background: #fff;
	border: #f29877 2px solid;
	border-radius: 20px;
	padding: 5px 20px;
	margin-top: 8px;
}
a.rootBtn:link{ color: #f29877;}
a.rootBtn:visited{ color: #f29877;}
a.rootBtn:hover{ 
	color: #fff;
	background: #f29877;
}
iframe{
	width: 60%;
	height: 400px;
}
@media screen and (max-width: 1000px) {
	#Contents_col_02 dl{ width: 100%;}
	#Contents_col_02 dl dt{
		width: 10%;
		float: left;
		text-align: center;
		margin-right: 2%;
	}
	#Contents_col_02 dl dd{
		width: 86%;
		float: left;
		padding-top: 1px;
	}
	iframe{
		width: 100%;
		height: 400px;
		margin: 0 auto;
	}
}

/*---------- Contents_col_03 ----------*/
#Contents_col_03 div.box{
	background: #fff url(../images/back_kirakira.png) no-repeat;
	background-position: bottom;
	padding: 50px 0;
	margin-bottom: 30px;
}
#Contents_col_03 div.box2{	
	text-align: center;
	background:none;
	padding-bottom: 30px;
}
.box2 img{ margin-bottom: 20px;}
.box2 p span{ 
	font-size: 20px;
	font-weight: bold;
}
h2{
	display: inline-block;
	font-size: 26px;
	line-height: 1.2;
	font-weight: bold;
	background: url(../images/icon_tikutiku.png) no-repeat;
	border-bottom: #f8a055 6px solid;
	padding: 0 0 8px 48px;
	margin: 0 25px;
}
#ws_2{ background: url(../images/icon_amiami.png) no-repeat;}
#ws_3{ background: url(../images/icon_kougu.png) no-repeat;}
#ws_4{ background: url(../images/icon_kirakira.png) no-repeat;}
#ws_5{ background: url(../images/icon_himo.png) no-repeat;}
h2 strong{ 
	font-size: 34px;
	font-weight: bold;
}
#Contents_col_03 table{ 
	width: 90%;
	margin: 35px 5% 0;
}
.workshop_list td{
	width: 26%;
	vertical-align: top;
	padding: 8px 2%;
}
.workshop_list tr:first-child td{ 
	font-weight: bold;
	padding: 8px 4%;
}
#Contents_col_03 td ul li{ font-size: 13px;}
.workshop_list td img{
	width: 100%;
	box-shadow: 0 0 10px #bbb;
	border: #fff 6px solid;
	border-radius: 50%;
}
#beads_fes_img td{
	width: 26%;
	vertical-align: top;
	padding: 8px 2%;
	padding-bottom: 20px;
}
#beads_fes_img td img{
	width: 100%;
	box-shadow: 0 0 10px #bbb;
	border: #fff 6px solid;
}
.youtube{
	display: block;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	text-align: center;
	background: linear-gradient(#fdcda4, #f8a055);
    border: #f8a055 1px solid;
	border-radius: 12px;
	padding: 4px 0;
	margin-top: 6px;
}
a.youtube:link{ color: #fff;}
a.youtube:visited{ color: #fff;}
a.youtube:hover{ color: #fff;}
.txt{
	display: inline-block;
	font-size: 12px;
	padding: 10px 10px 0 0;
	background: url(../images/sankaku.gif) right 15px no-repeat;
}
.txt:hover{ 
	color: #f8a055;
	background: url(../images/sankaku_on.gif) right 15px no-repeat;
}
.wsBtn{
	display: block;
	width: 50%;
	font-weight: bold;
	text-align: center;
	padding: 2%;
	margin: 25px auto 0;
	border: #f8a055 3px solid;
	border-radius: 30px;
}
.wsBtn:link{ 
	color: #f8a055;
	background: #fff;
}
.wsBtn:visited{ 
	color: #f8a055;
	background: #fff;
}
.wsBtn:hover{ 
	color: #fff;
	background: #f8a055;
}
h3{
	font-size: 28px;
	font-weight: bold;
	margin: 0 40px;
}
@media screen and (max-width: 1000px) {
	.box2 img{ width: 100%;}
	#Contents_col_03 tr:first-child td{ font-size: 16px;}
	#Contents_col_03 td ul li{ font-size: 15px;}
	#Contents_col_03 img{ width: 100%;}
}

/*---------- Contents_col_04 ----------*/
#Contents_col_04 .section{ background: url(../images/back_flag.png) center 0 no-repeat;}

/*---------- Contents_col_05 ----------*/
h4{
	text-align: center;
	margin: 10px 0 20px;
}
#Contents_col_05 p{
	text-align: center;
	margin-bottom: 3px;
}
.mlmg_btn a{
	display: block;
	width: 50%;
	font-weight: bold;
	background: #8fc31f;
	border-radius: 20px;
	padding: 6px 14px;
	margin: 15px auto 60px;
}
.mlmg_btn a:link{ color: #fff;}
.mlmg_btn a:visited{ color: #fff;}
.mlmg_btn a:hover{ background: #f8a055;}
#Contents_col_05 ul{
	text-align: center;
	margin: 60px auto 0;
}
#Contents_col_05 li{ 
	display: inline;
	height: 30px;
	line-height: 30px;
	padding: 0 5px;
}
#Contents_col_05 li a{ display: inline-block;}
#Contents_col_05 li a:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
}

/*---------- Contents_col_06 ----------*/
#Contents_col_05 h3{ margin: 0;}
.k_left{
	width: 55%;
	float: left;
}
.k_right{
	width: 40%;
	float: right;
}
.k_right img{
	width: 100%;
	box-shadow: 0 0 10px #bbb;
	border: #fff 8px solid;
}



/*================================================
 *  footer
 ================================================*/
#footer p{ 
	position: fixed;
	bottom: 10px;
	right: 10px;
}
.btn{
	display: inline-block;
	width: 80px;
	height: 80px;
	line-height: 80px;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	background-color: rgba(255,255,255,0.8);
	border-radius: 50%;
	overflow: hidden;
	transition: .4s;
}
.btn:link{ color: #f8a055;}
.btn:visited{ color: #f8a055;}
.btn:hover{
	color: #fff;
    background-color: rgba(248,160,85,0.8);
}
#footerBar {
	font-size: 12px;
	text-align: center;
	background: #fff;
	bottom: 0;
	clear: both;
	padding: 12px 0;
	margin: 0; 
}



/*================================================;
 *  clearfix
 ================================================*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}