@charset "UTF-8";
/* 全体 */

* {
	margin: 0;
	padding: 0;
}

html {
	text-align:center;
	height:100%;
	background-color:#fff;
}

body {
    margin: 0;
    padding: 0;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	letter-spacing: 0.03em;
	font-size:1em;
    color:#666;
}


/* IE6*/
* html body {
	font-size:1.1em;
}

/*IE7*/
:first-child+html body (font-size:1.25em;)


h1, h2, h3, h4, h5, h6,
p, pre, blockquote,
ul, ol, dl, address {
    margin: 0;
    padding: 0;
}

/*リンク関連*/
a { color: #666; text-decoration: underline; }
a:visited { color:#666; }
a:hover { color: #ee88b5; text-decoration: underline; }

img { border:none; max-width: 100%; height:auto; width:auto; /* ie8 */ vertical-align:bottom; }
a:hover img { opacity:0.7;filter: alpha(opacity=70);-ms-filter: "alpha( opacity=80 )"; }


/*クリア*/
.clear { clear:both; }
.clear:after { visibility: hidden; content : ""; display : block; height : 0; clear : both; }


/*文字関連*/
h1 { padding:0; margin:0;}
h1.ttl { width:1000px; padding:40px 0 0 0; margin:0 auto; text-align:left; }
h2 { padding:0; margin:0; text-align:center; }


/*本文基本文字サイズ*/
p { font-size:0.8em; line-height:1.8; margin: 0 0 15px 0; text-align:center; color:#333; }
p.comment { font-size:0.8em; line-height:1.3; margin: 5px 0 0 0; text-align:left; color:#333; }

/*全体レイアウト関連*/
#wrapper {
	width:100%;
	margin:0 auto;
	text-align:center;
	
}

/*ヘッダー*/
#header {
	width:1000px;
	margin:0 auto 15px auto;
	padding:0;
	background-color:none;
}

#header1 {
	width:1000px;
	margin:0 auto 15px auto;
	padding:0;
	background-color:none;
	height:546px;
	position:relative; 
}


footer {
	width:100%;
	padding:0;
	background-color:#333;
	color: #fff;
	margin:0 auto; 
	clear:both; 
	font-size:0.7em;
	text-align:center; 
	height:4em;
	line-height:4em;
}



ul.ft_menu { list-style:none; margin:20px auto; width:1000px; text-align:center; font-size:0.8em; }
ul.ft_menu li { display:inline-block; margin:0 20px 20px 0; text-align:center; }
ul.ft_menu li:last-child { display:inline-block; margin:0 0 20px 0; text-align:center;  }

.mfg { float:right; margin:0 0 15px 0;}
.pc_content { width:852px; margin:0 auto; padding:0;}

/*本文*/
.content { width:100%; margin:0 auto; clear:both; padding:0;}
.content1 { width:1000px; margin:0 auto; clear:both; padding:0; text-align:center; background-color:#fff57f;}
.content a:after { display:inline; }
.content span:after { display:inline; }


ul.gnavi { list-style:none; margin:0 auto; padding:0; width:894px;}
ul.gnavi li { float:left; margin:0 18px 18px 0; width:286px; height:405px; overflow:hidden; }
ul.gnavi li:nth-child(3n) { margin:0 0 18px 0; }
ul.gnavi li:nth-child(10) { margin:0 0 18px 0; width:894px; height:168px;}

ul.pickup { list-style:none; margin:20px auto; width:894px; border-top:1px dashed #999;}
ul.pickup li { border-bottom:1px dashed #999; text-align:center; font-size:1.2em; padding:0.7em 0; line-height:1.3;}
ul.pickup li a { display:block; text-decoration:none; }

.tm10 { margin-top:10px; }
.tm20 { margin-top:20px; }
.tm30 { margin-top:30px; }
.bm30 { margin-bottom:30px; }
.bm20 { margin-bottom:20px; }
.bm10 { margin-bottom:10px; }
.tm50 { margin:50px 0 0 0; }
.w85 { width:8%; vertical-align:text-top;}

/*フローティング*/

div#floating-menu {
	display:block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
	width:50px;
	height:50px;
}

div#floating-menu img { width:100%; height:100%;}

ul.ft_menu { list-style:none; margin:20px auto; width:1000px; text-align:center; font-size:0.75em; }
ul.ft_menu li { display:inline-block; margin:0 20px 20px 0; text-align:left; padding:0; line-height:1.5; vertical-align:top;}
ul.ft_menu li:last-child { display:inline-block; margin:0 0 20px 0; text-align:left; padding:0; }

ul.ft_logo { list-style:none; margin:60px auto 0 auto; width:1000px; text-align:center; }
ul.ft_logo li { display:inline-block; margin:0 20px 0 0; text-align:left; padding:0; }
ul.ft_logo li:first-child { width:180px; }
ul.ft_logo li:last-child { display:inline-block; margin:0 0 20px 0; text-align:left; padding:0; }

/*フッターリンク*/
.copyright { clear:both; width:100%; text-align:center; font-size:0.65em; line-height:1.5; padding:10px 0; background-color:#a99054; margin:0 auto; color:#FFF; }


.txt { font-size:0.85em; line-height:1.3; margin:0 auto 20px auto; text-align:left; width:850px; }
.large { font-size:1.1em; font-weight:bold; }
.font13 { font-size:1.3em; display:block; }
.font085 { font-size:0.85em; display:block; }


.btn { width:100%; text-align:center; }

.subttl { width:1000px; margin:0 auto; }

nav { display:none; }
.overlay { display:none; }


.gift { width:268px; margin:20px auto; text-align:center; }
.white { width:894px; margin:0 auto; }
.brown { width:1000px; margin:20px auto 40px auto; background-color:#a89990; padding:10px 0;}
.item { width:894px; margin:20px auto 0 auto; padding:0 0 20px 0; clear:both; }
.thumb { width:234px; float:left;}
.text { width:610px; float:right; text-align:left; color:#FFF; font-size:1em; line-height:1.3;}


.border-t { border-top:1px solid #333; }
.border-tw { border-top:1px solid #fff; }
.border-bw { border-bottom:1px solid #fff; }

.arrow { width:385px; margin:0; padding:0; }


.buruburu-hover:hover {
    display: inline-block;
    -moz-animation: hurueru .2s  infinite;
	-webkit-animation: hurueru .2s  infinite;
	-o-animation: hurueru .2s  infinite;
	-ms-animation: hurueru .2s  infinite;
    animation: hurueru .2s  infinite;
}

@-moz-keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

@-webkit-keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

@-o-keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

@-ms-keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

ul.pc { display:block;}
ul.sp { display:none;}
.pc-menu { display:block; }
.sp-menu { display:none;}

.bannar { margin:0 auto 40px auto; }
.topbtn { margin:50px auto 20px; text-align:center; }

.cate-catch { text-align:center; font-size:1.3em; line-height:1.5; margin:30px auto; }

/*スライダー*/
.slider { background-color:#FFF; height:430px; width:1000px; margin:20px auto; }
.slider .slick-slide:not(.slick-center) {
/*-moz-filter: opacity(40%);
-o-filter: opacity(40%);
-ms-filter: opacity(40%);
filter: opacity(40%);
transition: 0.2s linear;
opacity:0.4;*/

filter:alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
	
}

/*ポップアップ*/
.popup { width:600px; margin:0 auto; padding:0; text-align:center; background-color:#fff57f;}

.arrow { position:absolute; top:520px; left:320px; z-index:99; } 
.arrow img { width:10%; 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) }
}


@media screen and (max-width: 600px) {

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

body {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	-webkit-text-size-adjust: 100%;
}

#wrapper {
	width:100%;
	margin:0 auto;
	text-align:left;
	padding:0%;
	display:block;
	overflow:hidden;
	
}

#header { width:100%; height:auto; padding:0; margin:0; }
#header1 { width:100%; height:auto; padding:0; margin:0; position:static; }
h1 img { width:100%;}
h2 img { width:90%; text-align:center; margin:1% auto; }
.pickupnews { width:80%; text-align:center; margin:1% auto; }
ul.pickup { width:95%; margin:1% auto 2% auto; }
ul.pickup { line-height:1.3; }
.content { width:100%; margin:0 auto; clear:both; overflow:hidden; padding:0 0 0 0;  }
.content1 { width:100%; margin:0 auto; clear:both; padding:0; text-align:center; background-color:#fff57f;}

footer {
	padding:2% 0;
	background-color:#333;
	color: #fff;
	width:100%;
	margin:0 auto; 
	clear:both; 
	font-size:0.7em;
	text-align:center; 
	height:auto;
	line-height:1.3;
}

p.center { font-size:0.8em; line-height:1.3; text-align:center; margin:2% auto; }
p.comment { font-size:0.8em; line-height:1.3; margin: 1% 0 0 0; text-align:left; color:#333; }

ul.ft_menu { list-style:none; float:none; margin:0; width:100%; text-align:center; }
ul.ft_menu li { display:inline; margin:0 2% 0 0; }


ul.ft_logo { list-style:none; margin:4% auto; width:100%; text-align:center; }
ul.ft_logo li { display:inline-block; margin:0 2% 0 0; text-align:left; padding:0; }
ul.ft_logo li:first-child { width:70%; text-align:center;}
ul.ft_logo li:last-child { display:inline-block; margin:0; text-align:left; padding:0; }
	

ul.gnavi { list-style:none; margin:0 auto; padding:0; width:100%;}
/*ul.gnavi { display:none; }*/
ul.gnavi li { float:left; margin:0 1% 1% 0; width:32.5%; height:auto; }
ul.gnavi li:nth-child(3n) { margin:0 0 1% 0; height:auto; }
ul.gnavi li:nth-child(10) { margin:0 0 1% 0; width:99.5%; height:auto; }

.white { width:95%; margin:0 auto; }
.tm10 { margin-top:1%; }
.tm20 { margin-top:2%; }
.tm30 { margin-top:3%; }
.bm30 { margin-bottom:3%; }
.bm20 { margin-bottom:2%; }
.bm10 { margin-bottom:1%; }
.tm50 { margin:2% 0 0 0; }

.font13 { font-size:1.1em; display:block; }
.font085 { font-size:0.85em; display:block; }

ul.pc { display:none;}
ul.sp { display:block;}
.pc-menu { display:none; }
.sp-menu { display:block;}

.bannar { margin:0 auto 5% auto; }
.topbtn { margin:10vw auto 4%; }
.topbtn img { width:70%; text-align:center; }


/*デモ*/
.wrapper {
  height: 100%;
  overflow-x: hidden;
  position: relative;
}
.overlay {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s;
}
.overlay.open {
  width: 100%;
	
  opacity: 1;
  
}
main {
  height: 100%;
  min-height: 100vh;
  padding: 0;
  background-color: #fff;
  transition: all .5s;
  display: flex;
  flex-direction: column;
  justify-content: top;
}
main.open {
  transform: translateX(-250px);
}
main h1 {
  text-align: center;
  font-weight: 500;
}
main p {
  text-align: center;
}
.menu-trigger {
  display: inline-block;
  width: 36px;
  height: 28px;
  vertical-align: middle;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 5px;
  z-index: 100;
/*   transform: translateX(0);
  transition: transform .5s;
 */}
/* .menu-trigger.active {
  transform: translateX(-250px);
}
 */.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000;
  transition: all .5s;
}
.menu-trigger.active span {
  background-color: #000;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(12px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
  top: 12px;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-12px) rotate(45deg);
}

nav {
	display:block;
  width: 250px;
  height: 100%;
  padding-top: 0;
  background-color:#fff;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  transform: translate(250px);
  transition: all .5s;
  overflow:scroll;
}
nav.open {
  transform: translateZ(0);
}
nav li {
	font-size:0.85em;
  color: #333;
  text-align: left;
  padding: 0 9px;
  background-color:#FFF;
  line-height:4em;
  border-bottom:solid 1px #ccc;
  
}
ul.first { list-style:none; }
ul.first li { background-image:url("../img/sp_menu_0.jpg"); background-repeat:no-repeat; background-size:50%; background-position:1.5em center; padding:0; color:#fff; text-align:right;}
ul.second { width:90%; margin:0 auto; list-style:none; }
ul.second li a { display:block; text-decoration:none; }
ul.second li:nth-child(1) { background-image:url("../img/sp_menu_1.jpg"); background-repeat:no-repeat; background-size:22%; background-position:center left; padding:0 0 0 4em; }
ul.second li:nth-child(2) { background-image:url("../img/sp_menu_2.jpg"); background-repeat:no-repeat; background-size:22%; background-position:center left; padding:0 0 0 4em; }
ul.second li:nth-child(3) { background-image:url("../img/sp_menu_3.jpg"); background-repeat:no-repeat; background-size:22%; background-position:center left; padding:0 0 0 4em; }
ul.second li:nth-child(4) { background-image:url("../img/sp_menu_4.jpg"); background-repeat:no-repeat; background-size:22%; background-position:center left; padding:0 0 0 4em; }
ul.second li:nth-child(5) { background-image:url("../img/sp_menu_5.jpg"); background-repeat:no-repeat; background-size:22%; background-position:center left; padding:0 0 0 4em; }
ul.second li:nth-child(6) { background-image:url("../img/sp_menu_6.jpg"); background-repeat:no-repeat; background-size:22%; background-position:center left; padding:0 0 0 4em; }
ul.second li:nth-child(7) { background-image:url("../img/sp_menu_7.jpg"); background-repeat:no-repeat; background-size:22%; background-position:center left; padding:0 0 0 4em; }
ul.second li:nth-child(8) { background-image:url("../img/sp_menu_8.jpg"); background-repeat:no-repeat; background-size:22%; background-position:center left; padding:0 0 0 4em; }
ul.second li:nth-child(9) { background-image:url("../img/sp_menu_9.jpg"); background-repeat:no-repeat; background-size:22%; background-position:center left; padding:0 0 0 4em; }
ul.second li:nth-child(10) { background-image:url("../img/sp_menu_10.jpg"); background-repeat:no-repeat; background-size:22%; background-position:center left; padding:0 0 0 4em; border:none;}

ul.third { width:100%; margin:0 auto; list-style:none; border-top:solid 1px #ccc; padding:1em 0; }
ul.third li { border:none; text-align:center; line-height:3em; }
ul.third li a { text-decoration:none; }

/*スライダー*/
.slider { background:none; height:auto; width:100%;}
.slider .slick-slide:not(.slick-center) {
filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

.cate-catch { text-align:center; font-size:1em; line-height:1.5; margin:3% auto; }
.brown { width:100%; margin:2% auto; background-color:#a89990; padding:3% 0;}
.item { width:95%; margin:1% auto 3% auto; padding:0 0 2% 0; clear:both; }
.thumb { width:30%; float:left;}
.text { width:65%; float:right; text-align:left; color:#FFF; font-size:0.8em; line-height:1.3;}
.w85 { width:15%; vertical-align:text-bottom;}

.arrow { display:none; } 
}

/**/
.tit {
	font-family: 'Noto Serif JP', serif;
	font-size: 2.2rem;
	color: #444;
	margin: 50px 0;
}
.tit span {
	display: block;
	font-size: 3.4rem;
	margin: 0.25em 0;
	line-height: 1.2;
	font-family: 'Noto Serif JP', serif;
}
.gain1 span:after {
	content: url("../img/mark_day.png");
	margin-left: 20px;
}
.gain2 span:after {
	content: url("../img/mark_week.png");
	margin-left: 20px;
}
.gain3 span:after {
	content: url("../img/mark_mon.png");
	margin-left: 20px;
}

@media screen and (max-width: 600px) {
	.tit {
		text-align: center;
		font-size: 1.2rem;
		margin: 1em 0;
	}
	.tit span {
		font-size: 1.4rem;
	}
	.gain1 span:after,
	.gain2 span:after,
	.gain3 span:after {
		content: '';
		display: inline-block;
		width: 10vw;
		height: 5vw;
		margin-left: 2vw;
		background-image: url("../img/mark_day.png");
		background-size: contain;
	}
	.gain2 span:after {
		background-image: url("../img/mark_week.png");
	}
	.gain3 span:after {
		background-image: url("../img/mark_mon.png");
	}
}