@charset "UTF-8";
/*

Site Name: 
Description: Style
Version: 2022/02/01 00:00
Author: THE ASTERISC HAUS
*/

/*
===================================================================

CONTENTS

	1: IMPORT
		1-1: RESET
		1-2: NAV
	2: BODY AND BASE SETTING
		2-1: HTML + BODY
		2-2: GENERAL SETTING
		2-3: FONT SIZE & STYLE
		2-4: CONTAINER
		2-5: SLIDER - bxslider
		2-6: thumbnail_box / thumbnail_list_box
		2-7: BG-COLOR
		2-8: ScrollTrigger
	3: STYLE
		3-1: styles
		
===================================================================
*/


/*
====================================================
1: IMPORT
====================================================
*/
/* --------------------------------------------------------------------------------------------
1-1: RESET
-------------------------------------------------------------------------------------------- */
@import url(sanitize.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* --------------------------------------------------------------------------------------------
1-2: NAV
-------------------------------------------------------------------------------------------- */
@import url(___________nav.css);





/*
====================================================
2: BODY AND BASE SETTING
====================================================
*/
/* --------------------------------------------------------------------------------------------
2-1: HTML + BODY
-------------------------------------------------------------------------------------------- */
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}
body { 
	font-size: 1.6rem;
	line-height: 1.8;
	background: ;
	color: #4c443d;
	font-family: 'Noto Sans JP',"メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif!Important;
	letter-spacing: .075em;
 }

img{
	width: 100%;
}

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

h1,h2,h3,h4,p{
	margin: 0 0 1rem;
	font-weight: normal;
}


.font-kirigirisu{

}



@media screen and (max-width: 768px) {
	.pc{
		display: none;
	}
}
@media screen and (min-width: 768px) {
	.sp{
		display: none;
	}
}

a{
	text-decoration: none;
	transition: 0.3s linear;
	color: #333;
}
a:hover{
	opacity:.8;
	transition: 0.5s
}


@media screen and (min-width: 768px) {
	.container-in.contact .tel-no a[href^="tel:"] {
	    pointer-events: none;
	}
}

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

}






.container{
	max-width: 1280px;
	margin: auto;
}


.flexblock{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}


.fv{
	background:#FFD900;
}




/*.container-flued.nav-box{
	background:#22AC38;
	height: 10px;
}*/




.header{
	background:#FFD900;
	position:relative;
}

.header .ttl{
	width:500px;
	margin: auto;
	padding:1% 0;
}


.ttl-kubara{
	position:absolute;
	right: 15px;
	top: 15px;
	width: 60px;
}


@media screen and (max-width:767px){
	.header .ttl{
		width:240px;
		margin: 0;
	}
	.ttl-kubara{
		position:absolute;
		right: 15px;
/*		top: calc(50% - 30%);*/
		top: 15px;
		width: 8%;
	}
}



/* --------------------------------------------------------------------------------------------
			You Tube
-------------------------------------------------------------------------------------------- */
.youtube {
	margin: 30px auto;
  width: 80%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width:767px){
	.youtube {
	  width: 100%;
	}
}

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

h2.ttl{
	font-size:3rem;
	font-weight:bold;
	color:#350800;
}
h3.ttl{
	font-size:2.4rem;
	font-weight:bold;
	color:#350800;
}



/* --------------------------------------------------------------------------------------------
: パンくず
-------------------------------------------------------------------------------------------- */
.breadcrumb {
  padding: 14px 15px;
  font-size: 1.4rem;
  margin-bottom: 20px;
  list-style: none;
  background-color: #FFD900;
  padding-left: 6%;
}

.breadcrumb > li {
    display: inline-block;
}
.breadcrumb > li + li:before {
    padding: 0 5px;
    color: #333;
    content: "/ ";
}
.breadcrumb a{
  
}


@media screen and (min-width: 768px) {
	.breadcrumb {
		margin-bottom: 60px;
	}
}






/* --------------------------------------------------------------------------------------------
	3つの理由
-------------------------------------------------------------------------------------------- */

.reason-box{
	background:url("../img/common/reason_bg.jpg");
	background-size: 8%;
	padding:60px 0;

}


@media screen and (max-width:767px){
	.reason-box{
		padding:30px 0;

	}
}




/* --------------------------------------------------------------------------------------------
	レシピ
-------------------------------------------------------------------------------------------- */
.container-flued.recipe-box{
	background-image:url(../img/top/recipe_bg_top.png),url(../img/top/recipe_bg_bottom.png);
	background-position: top, bottom;
	background-repeat: repeat-x, repeat-x;
	background-size: 75% auto, 75% auto;
	padding: 100px 0;
	margin: 40px 0 0;
}

.recipe-box .flexblock::before{
  content:"";
  display: block;
  width:23%;
  order:1;
}
.recipe-box .flexblock::after{
  content:"";
  display: block;
  width:23%;
}


.recipe-box .flexblock .item{
	width: 23%;
	margin: 0 0 3%;
	border-radius:6px;
}
.recipe-box .flexblock .item img{
	border-radius:6px;
}

/* 黄色 */
.recipe-box .flexblock .item:nth-child(1),
.recipe-box .flexblock .item:nth-child(3),
.recipe-box .flexblock .item:nth-child(6),
.recipe-box .flexblock .item:nth-child(8),
.recipe-box .flexblock .item:nth-child(9),
.recipe-box .flexblock .item:nth-child(11),
.recipe-box .flexblock .item:nth-child(14),
.recipe-box .flexblock .item:nth-child(16),
.recipe-box .flexblock .item:nth-child(17),
.recipe-box .flexblock .item:nth-child(19){
	background:#F0E900;
}

/* 緑 */
.recipe-box .flexblock .item:nth-child(2),
.recipe-box .flexblock .item:nth-child(4),
.recipe-box .flexblock .item:nth-child(5),
.recipe-box .flexblock .item:nth-child(7),
.recipe-box .flexblock .item:nth-child(10),
.recipe-box .flexblock .item:nth-child(12),
.recipe-box .flexblock .item:nth-child(13),
.recipe-box .flexblock .item:nth-child(15),
.recipe-box .flexblock .item:nth-child(18){
	background:#B5D100;
}










@media screen and (max-width:767px){
	.container-flued.recipe-box{
		background-image:url(../img/top/recipe_bg_top.png),url(../img/top/recipe_bg_bottom.png);
		background-position: top, bottom;
		background-repeat: repeat-x, repeat-x;
		background-size: 150% auto, 150% auto;
		padding: 40px 0 60px;
		margin: 40px 0 0;
	}

	.container.recipe-box{
		margin: 30px 0 0;
	}
	.recipe-box .flexblock .item{
		width: 48%;
		margin: 0 0 2%;
	}
	/*.recipe-box .flexblock .item:nth-child(3){
		order: 3;
	}
	.recipe-box .flexblock .item:nth-child(4){
		order: 2;
	}
	.recipe-box .flexblock .item:nth-child(5){
		order: 4;
	}
	.recipe-box .flexblock .item:nth-child(6){
		order: 5;
	}
	.recipe-box .flexblock .item:nth-child(7){
		order: 7;
	}
	.recipe-box .flexblock .item:nth-child(8){
		order: 6;
	}*/

	/* 黄色 */
	.recipe-box .flexblock .item:nth-child(1),
	.recipe-box .flexblock .item:nth-child(4),
	.recipe-box .flexblock .item:nth-child(5),
	.recipe-box .flexblock .item:nth-child(8),
	.recipe-box .flexblock .item:nth-child(9),
	.recipe-box .flexblock .item:nth-child(12),
	.recipe-box .flexblock .item:nth-child(13),
	.recipe-box .flexblock .item:nth-child(16){
		background:#F0E900;
	}

	/* 緑 */
	.recipe-box .flexblock .item:nth-child(2),
	.recipe-box .flexblock .item:nth-child(3),
	.recipe-box .flexblock .item:nth-child(6),
	.recipe-box .flexblock .item:nth-child(7),
	.recipe-box .flexblock .item:nth-child(10),
	.recipe-box .flexblock .item:nth-child(11),
	.recipe-box .flexblock .item:nth-child(14),
	.recipe-box .flexblock .item:nth-child(19){
		background:#B5D100;
	}
}





/* --------------------------------------------------------------------------------------------
	TVCM放映中
-------------------------------------------------------------------------------------------- */
.movie-box{
	background:url("../img/common/movie_bg.jpg");
	background-size: 8%;
	padding:60px 0;

}

.movie-box h3{
	color: #fff;
	text-align:center;
	font-weight:bold;
}



@media screen and (max-width:767px){
	.movie-box{
		padding:30px 0;

	}
}



/* --------------------------------------------------------------------------------------------
	トップ商品スペック
-------------------------------------------------------------------------------------------- */
.products-box{
	width: 60%;
	margin: 60px auto;
}

.products-box .item01{
	width: 30%;
}
.products-box .item02{
	width: 65%;
}

.top-products_ttl{
	margin:0 0 20px;
}


.products-box .spec{
	margin: 40px 0 0;
}
.products-box .spec h1{
	font-weight:bold;
	font-size:2.4rem;
}


.top-products-tbl{
	font-size: 1.4rem;
}

.top-products-tbl th {
	background: #f0f0f0;
	border: solid 1px #ddd;
	color: #807160;
	padding: 10px;
	white-space: nowrap;
	font-weight:normal;
}
.top-products-tbl td {
	border: solid 1px #ddd;
	padding: 10px;
}
 

@media screen and (max-width: 767px) {
	.products-box{
		width: 90%;
		margin: 40px auto;
	}
	.products-box .container{
		padding:0;
	}
	.products-box .item01{
		width: 32%;
	}
	.products-box .item02{
		width: 65%;
	}

	.top-products_ttl{
		margin:0 0 10px;
	}
	.products-box .spec{
		margin: 20px 0 0;
	}
	.products-box .spec h1{
		font-size:2rem;
		margin-top: 30px;
	}
	.last td:last-child {
		border-bottom: solid 1px #ddd;
		width: 100%;
	}
	.top-products-tbl {
		width: 100%;
		margin:auto;
	}
	.top-products-tbl th,
	.top-products-tbl td {
		border-bottom: none;
		display: block;
		width: 100%;
	}
}





/* --------------------------------------------------------------------------------------------
	トップ　誕生ストーリー
-------------------------------------------------------------------------------------------- */
.container.story-box{
	margin:4% auto;

}
.container.story-box img{
	border-radius:12px;
}



/* --------------------------------------------------------------------------------------------
	ボタン
-------------------------------------------------------------------------------------------- */

.btn_store{
	margin: 30px 0 30px;
}


.btn_recipe{
	margin: 40px auto 60px;
	width: 70%;
}

a.btn {
	display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
	text-decoration: none;
	width: 100%;
	margin: auto;
	padding: 2rem 0rem 2rem 0rem;
	font-weight: bold;
	background: #B3D101;
	color: #320A00;
	border-radius: 100vh;
	position: relative;
	transition: 0.5s;
	font-size:2rem;
}
a.btn::after {
	content: '';
	width: 10px;
	height: 10px;
	border-top: 2px solid #320A00;
	border-right: 2px solid #320A00;
	transform: rotate(45deg);
	margin-left: 2rem;
}
a.btn:hover {
	background: #c4dd02;
	color: #320A00;
}


.btn_recipe a{
	border:3px solid #abba3b;
}


@media screen and (max-width:767px){
	.btn_store{
		margin: 10px 0 10px;
	}
	a.btn {
		width:100%;
		font-size:1.3rem;
		padding: 1.5rem 0rem 1.5rem 0rem;
		border-radius: 50vh;
		letter-spacing:0;
	}
	a.btn::after {
		display:none;
		margin-left: 1rem;
	}

}






.starburst {
	display: block;
	font-size:2.4rem;
	width: 10rem;
	height: 10rem;
	line-height: 10rem;
	background: #d60505;
	-webkit-transform: rotate(-70deg);
	-moz-transform: rotate(-45deg);
	rotation: -45deg;
	position: relative;
	top: 0em;
	left: 0em;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	font-weight: bold;
	text-shadow: 0 0 3em #FF2F2F, 0 0 4px #d60505;
	-moz-transition: -moz-transform 0.3s ease;
	-webkit-transition: -webkit-transform 0.3s ease;
}
.starburst span {
	display: block;
	width: 10rem;
	height: 10rem;
	background: #d60505;
	-webkit-transform: rotate(22.5deg);
	-moz-transform: rotate(22.5deg);
	rotation: 22.5deg;
}


@media screen and (max-width:767px){
	.starburst {
		display: block;
		font-size:2.4rem;
		width: 8rem;
		height: 8rem;
		line-height: 8rem;
	}
	.starburst span {
		display: block;
		width: 8rem;
		height: 8rem;
		font-size:1.6rem;
	}
}



/* --------------------------------------------------------------------------------------------
			下層共通
-------------------------------------------------------------------------------------------- */
.ttl-page{
	width: 60%;
	margin: 0 auto 60px;
}


h3.ttl.ttl_balloon {
  font-weight: bold;
  padding: 0.5em 1em;
  background-color: #019944;
  color: #fff;
  position: relative;
  margin-bottom: 40px;
}
h3.ttl.ttl_balloon:before {
  content: '';
  height: 0;
  width: 0;
  border: solid transparent;
  position: absolute;
  left: 30px;
  top: 100%;
  border-color: transparent;
  border-top-color: #019944;
  border-right-color: #019944;
  border-width: 6.5px;
}
p.ttl_balloon{
	background:#B5D101;
	color: #360800;
	border-radius:12px;
	width: 90%;
	margin: 30px auto;
	padding: 3rem 3rem;
}




h2.midashi {
  position: relative;
  padding: 1rem 2rem;
  border: 4px solid #000;
  text-align:center;
  color:#012674;
  margin: 0 0 30px;
  font-weight:bold;
}

h2.midashi:before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  content: '';
  border: 2px solid #000;
}





@media screen and (max-width:767px){
	.ttl-page{
		width: 96%;
		margin: 30px auto 60px;
	}
	h2.midashi{
		font-size: 2rem;
	}

}


/* --------------------------------------------------------------------------------------------
	誕生物語
-------------------------------------------------------------------------------------------- */
.story-fv{
	padding:2% 0;

}

.story-fv img{
	border-radius:12px;
/*	border:dotted 5px #fff;
	padding: 1rem;
	background: #FFD900;*/
}

.story-page .btn-box{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width: 60%;
	margin: 30px auto 60px;
}

.story-page .btn-box .item{
	width: 21%;
	position:relative;
	padding-top: 30px;
}

/*.story-page .btn-box .item.active{
	opacity:.5;
}*/
.story-page .btn-box .item:nth-child(4){
	opacity:.5;
}

/*.story-page .btn-box .item:nth-child(1){
	background:red;
}*/


.story-page .btn-box .item.active:before {
    content: "";
    display: inline-block;
    background: url(../story/img/btnmark.png) no-repeat;
    background-size: contain;
    width: 50px;
    height: 30px;
    position: absolute;
    left: calc(50% - 25px);;
    top: 0;
}
.story-page .btn-box .item.active img{

}


.story-page{
	background: url(../img/common/reason_bg.jpg);
}




.story-page .story-block .flex-block {
	margin: 30px 0;
	justify-content:space-around;
}
.story-page .story-block .flex-block .item.item-p{
	width:40%;
	text-align:center;
}
.story-page .story-block .flex-block .item{
	width:60%;
}
.story-page .story-block .flex-block .item.item-p01 img{
	width:30%;
}

.story-page .story-block .flex-block .item.item-p02 img{
	width:90%;
	margin:4rem 0 0;
}



.story-page .kodawari-box{
	margin: 0 0 60px;
}


.story-page .kodawari-box .flex-box{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
}

.story-page .kodawari-box .flex-box .item-p{
	width: 20%;
}

.story-page .kodawari-box .flex-box .arrow_box{
    position:relative;
    width:70%;
    height:100%;
    background:#B5D101;
    padding:20px;
    text-align:left;
    color:#360800;
    border-radius:12px;
}
.story-page .kodawari-box .flex-box .arrow_box:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(1, 153, 68, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:30px;
    border-right-width:30px;
    margin-top: -10px;
    border-right-color:#B5D101;
    right:100%;
    top:50%;
}





.story-page .story-block .label-box{
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
	width: 90%;
	margin: auto;
}

.story-page .story-block .label-box .item{
	width: 18%;
	font-weight:bold;
	text-align:center;
	line-height:1.4;
	font-size:1.8rem;
}

.story-page .story-block .label-box .item img{
	margin: 0 0 15px;
}


.story-page .story-block .label-box .item span{
	font-size:1.4rem;
	font-weight:normal;
}


.caractor_all,
.caractor_box{
	width: 80%;
	margin:auto;
}


.caractor_box{
	margin-top:60px;
}
.caractor_box .item{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	margin:0 0 30px;
}

.caractor_box .item .item-p{
	width: 25%;
}

.caractor_box .item .item-t{
	width: 68%;
}
.caractor_box .item .item-t h3{
	font-weight:bold;
	font-size:2.4rem;
	color:#019944;
}





/*  ========================== くばら社員のうまたれ愛 ==========================  */
.employee-voice h2 {
  position: relative;
  padding: 1em 2em;
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
}

.employee-voice h2:before,
.employee-voice h2:after {
  position: absolute;
  content: '';
}

.employee-voice h2:after {
  top: 0;
  left: 6%;
  width: 50px;
  height: 50px;
  border-top: 6px solid #000;
  border-left: 6px solid #000;
}

.employee-voice h2:before {
  right: 6%;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-right: 6px solid #000;
  border-bottom: 6px solid #000;
}


/*  ========================== イラスト吹き出し ==========================  */

.balloon {
  width: 100%;
  margin: 6% 0;
  overflow: hidden;
}

.balloon-l .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon-l .faceicon img{
  width: 100%;
  height: auto;
/*  border: solid 3px #8b9e2a;*/
  border-radius: 50%;
}

.balloon-l .chatting {
  width: 100%;
}

.balloon-l .says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 20px;
  border-radius: 12px;
  background: #d0e75a;
}

.balloon-l .says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d0e75a;
}

.balloon-l .says p {
  margin: 0;
  padding: 0;
}





.balloon-r .faceicon {
  float: right;
  margin-left: -90px;
  width: 80px;
}

.balloon-r .faceicon img{
  width: 100%;
  height: auto;
/*  border: solid 3px #8b9e2a;*/
  border-radius: 50%;
}

.balloon-r .chatting {
  width: 100%;
}

.balloon-r .says {
  display: inline-block;
  position: relative; 
  margin: 5px 105px 0 0;
  padding: 20px;
  border-radius: 12px;
  background: #d0e75a;
}

.balloon-r .says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  right: -24px;
  border: 12px solid transparent;
  border-left: 12px solid #d0e75a;
}

.balloon-r .says p {
  margin: 0;
  padding: 0;
}


/*  ========================== //　イラスト吹き出し ==========================  */













@media screen and (max-width:767px){
	.story-page .btn-box{
		width: 96%;
		justify-content:space-around;
	}
	.story-page .btn-box .item{
		width: 40%;
		position:relative;
		padding-top: 30px;
	}

	.story-page .kodawari-box .flex-box{
		align-items:center;
	}
	.story-page .story-block .flex-block .item.item-p,
	.story-page .story-block .flex-block .item{
		width:100%;
	}
	.story-page .story-block .label-box{
		width: 100%;
	}
	.story-page .story-block .label-box .item{
		line-height:1.2;
		width: 19%;
		font-size:1.4rem;
	}
	.story-page .story-block .label-box .item span{
		font-size:1rem;
	}

	.caractor_all,
	.caractor_box{
		width: 100%;
		margin:60px auto;
	}
	.caractor_box .item .item-p{
		margin:auto;
	}
	.caractor_box .item .item-t{
		width: 100%;
	}
	.caractor_box .item .item-t h3{
		text-align:center;
	}
}





/* --------------------------------------------------------------------------------------------
	キャンペーン
-------------------------------------------------------------------------------------------- */

/*トップページ*/
.container.top-cp-box{
	margin:60px auto;
}
.top-cp-box img{
	border-radius:12px;
}
@media screen and (max-width:767px){
	.container.top-cp-box{
		margin:30px auto;
	}
}




.cp-fv{
	background:url(../campaign/img/fv-bg.jpg);
}

.cp-box{
	margin: 60px 0;
}

.cp-box .kikan {
	text-align:center;
	margin-bottom:60px;
}
.cp-box .kikan img{
	max-width:640px;
}

.cp-box .present-box{
	margin-bottom:100px;
}
.cp-box .present-box .flex-block{
	justify-content:flex-start;
	align-items:center;
	width: 80%;
	margin:auto;
}
.cp-present-name h3{
	font-size:3rem;
	margin-left: 6rem;
	font-weight:bold;
}



.cp-box .present-box .present-p{
	width: 60%;
	margin:auto;
}

.apply-box {
	width: 90%;
	margin: 0 auto 60px;
}
.apply-box img{
	border-radius:12px;
}


.att{
	width: 80%;
	margin:auto;
	font-size:1.2rem;
}

.att ul li{
	list-style-type: disc;
}



.cp-box p.att{
	width: 100%;
	font-size:1.6rem;
	text-align:right;
	margin: 0 0 4rem;
}





@media screen and (max-width:767px){
	.cp-fv{
		background:none;
	}
	.cp-fv .container{
		padding: 0;
	}
	.cp-box .kikan{
		margin: 30px 0 40px;
	}
	.cp-box .present-box .flex-block{
		justify-content:flex-start;
		align-items:center;
		width: 100%;
		margin:auto;
	}
	.cp-box .present-box .present-p{
		width: 80%;
	}
	.cp-present-name{
		width:60%;
		margin-left: 3rem;
	}
	.cp-present-name h3{
		font-size:2.1rem;
		font-weight:bold;
		margin: 15px 0 0;
		letter-spacing:0;
	}
	.cp-box .present-box{
		margin-bottom:60px;
	}
	.apply-box {
		width: 96%;
		margin: 0 auto 60px;
	}
	.cp-box p.att{
		width: 100%;
		font-size:1.2rem;
		text-align:center;
		margin: 0 0 4rem;
		letter-spacing:0;
	}
}













/* --------------------------------------------------------------------------------------------
	page-top
-------------------------------------------------------------------------------------------- */
/*リンクの形状*/
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  background:#FFD900;
  border-radius: 5px;
  width: 80px;
  height: 80px;
  color: #320A00;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:1.8rem;
  transition:all 0.3s;
}

#page-top a:hover{
  background: #777;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom:10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}









/* --------------------------------------------------------------------------------------------
2-2: フッター
-------------------------------------------------------------------------------------------- */
footer{
	text-align: left;
	background: #FFD900;
	padding:60px 0 20px;
	color: #333;
	font-size: 1.4rem;
	line-height: 1.6;
	letter-spacing: 1.4px;
}

.f-logo{
	margin: auto;
	width: 200px;
}


footer .copyright{
	text-align: center;
	margin-top: 30px;
}






















/* --------------------------------------------------------------------------------------------
2-4: CONTAINER
-------------------------------------------------------------------------------------------- */
.container{
	margin-bottom: 60px;
	width: 100%;
	max-width: 1080px;
	/*max-width: 1280px;*/
	margin:0 auto;
	padding:0 15px;
	overflow: hidden;
}


.container-wrap{
	background:#f7f4ed;
	border-radius:30px;
	max-width: 1080px;
	margin: 0 auto 6%;
	padding: 3% 2%;
}



/*.container-in{
	margin: 0 0 10% 0;
}*/



.flex-block{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}


@media screen and (max-width:767px){
	.container-wrap{
		margin: 0 15px;
	}
}




















/* ヘッダー */
header{
    width: 100%;
}
.header_wrapper{
    max-width: 1320px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: end;
}
/*.header_wrapper h1{
    width: auto;
    display: flex;
    align-items: center;
}
.header_wrapper h1 a{
    display: block;
    color: #333;
    text-decoration: none;
    font-size: 34px;
}*/
/*.header_wrapper h1 span{
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    margin-left: 10px;
}*/
.header_right{
    display: flex;
}
@media (max-width: 767px){
    header{
        position: fixed;
        top: 0;
        z-index: 100;
        padding: 0;
    }
}


/* ナビゲーション */
.gnav{
    width: 100%;
/*    background-color: #B1CB2C;*/
		background-color: #9fba16;
		font-family: ab-kirigirisu, sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size:2.4rem;
		line-height:1.2;
		letter-spacing:-.5rem;
}
.gnav_wrapper{
    max-width: 980px;
    margin: auto;
    display: flex;
    align-items: center;
}
.gnav_wrapper li{
/*    border-left: #888 1px solid;*/
    text-align: center;
    width: calc(100%/7);
    transition: all  0.3s ease;

    display: table;
    width: 100%;

}

.gnav_wrapper li:nth-child(odd){
	background:#009944;
}
.gnav_wrapper li:nth-child(even){
	background:#B1CB2C;
}

/*.gnav_wrapper li:last-child{
    border-right: #a1bc18 2px solid;
}*/
.gnav_wrapper li:hover{
    background-color: #888;
}
.gnav_wrapper li a{
    display: block;
    padding: 1.6rem 0;
    color: #fff;
    text-decoration: none;

    display: table-cell;
    vertical-align: middle;
    background: re;
    height: 90px;


}
@media (max-width: 767px){
    .gnav_wrapper{
        position: fixed;
        display: table;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #B1CB2C;
        visibility: hidden;
        opacity: 0;
        padding-top: 20%;
    }
    .gnav_wrapper li{
/*        max-width: 300px;*/
        margin: 0 auto;
        text-align: center;
        width: 100%;
        border-bottom: #888 1px solid;
        border-left: none;
    }
    .gnav_wrapper li:last-child{
        border-right: none;
    }
    .gnav_wrapper li a{
    	height: auto;
    }
    .menu-btn{
        color: #fff;
        cursor: pointer;
        z-index: 100;
        background-color: #333;
        max-width: 56px;
        width: 56px;
    }
    .menu-btn i{
        display: block;
        font-size: 24px;
        text-align: center;
        padding-top: 10px;
    }
    .menu-btn span{
        display: block;
        padding: 0 0 10px 0;
        font-size: 10px;
        text-align: center;
    }
    .open{
        transition: all .5s;
        visibility: visible;
        opacity: 1;
        z-index: 10;
    }
    .menu-btn span::after{
        content: attr(data-txt-menu);
    }
    .open span::after{
        content: attr(data-txt-close);
    }
    
}