@charset "UTF-8";
body {
	position: relative;
}
html,body{
    width: 100%;
}

/* 共通設定 
===========================================*/
/* 表 */
table,
th,
td{
	border: 1px solid #a3c27f;
	border-collapse: collapse;
	line-height: 1.6;
}
table{
	width: 100%;
	margin: 40px 0;
}
table th{
	background-color: rgba(244,232,98,0.3);
	padding: 10px;
}
table td{
	padding: 10px;
}

ol{
	padding-left: 20px;
}
ol li{
	padding-bottom: 10px;
}


/* ウィンドウ幅 
===========================================*/
/* 第二階層以下のコンテナ */
.container{
	max-width: 1000px;
	margin: 100px auto;
	padding: 0 10px;
}

/* デバイス別表示設定 */
/* スマホデバイス */
@media (max-width:767px){
	/* spクラス表示 */
	/* sp-tabクラス表示 */
	/* tab-pcクラス非表示 */
	.tab-pc{
		display: none;
	}
	/* pcクラス非表示 */
	.pc{
		display: none;
	}
}
/* タブレット */
@media (min-width:767.001px) and (max-width:1024px){
	/* spクラス非表示 */
	.sp{
		display: none;
	}
	/* sp-tabクラス表示 */
	/* tab-pcクラス表示 */
	/* pcクラス非表示 */
	.pc{
		display: none;
	}
}
/* PC */
@media (min-width:1024px){
	/* spクラス非表示 */
	.sp{
		display: none;
	}
	/* sp-tabクラス表示 */
	.sp-tab{
		display: none;
	}
	/* tab-pcクラス表示 */
	/* pcクラス表示 */
}


/* ヘッダー 
===========================================*/
header {
	width: 100%;
}
.header-box {
	position: fixed;
	transition: .3s;
	width: 100%;
	background: #fff;
	opacity: 90%;
	z-index: 9;
}
.header1 {
	position: relative;
}
.header1 ul{
	position: absolute;
	bottom: 5px;
	right: 10px;
	list-style-position: outside;
	padding: 0;
}
.header1 li {
	display: inline-block; /* リストを横に表示 */
	padding: 10px 20px;
}
.header1 li a {
	color: #a3c27f;
}
/* ロゴイメージ */
.header1 img{
	width: 200px;
	padding: 10px;
}
.header1 > a:hover{
	opacity: 0.5;
}

/* ホバーのエフェクト */
.header1 ul a{
	display: inline-block;
	position: relative;
 	text-decoration: none;
}
.header1 ul a:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -7px;
	width: 100%;
	height: 2px;
	background: #a3c27f;
	transform: scale(0, 1);
	transition: 0.4s;
}
.header1 ul a:hover:before {
	transform: scale(1);
}


/*menu*/
.menu{
    position: absolute;
    right: 15px;
    top: 20px;
    z-index: 99;
}
.menu img{
	width: 30px;
}

.menu-batu{
    position: fixed;
    right: 30px;
    top: 20px;
    z-index: 99;
	visibility: hidden;
}
.menu-batu img{
	width: 25px;
}

/*gnav*/
.gnav{
    background: rgba(0,0,0,0.8);
    display: none;
    height: 100%;
    position: fixed;
	top:0px;
    width: 100%;
    z-index: 98;
}
.gnav__wrap{
    align-items:center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
}
.gnav__menu__item{
    margin: 40px 0;
}
.gnav__menu__item a{
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    padding: 40px;
    text-decoration: none;
    transition: .5s;
}
.gnav__menu__item a:hover{
    color: #666;
}

/* 共通設定 
===========================================*/
.bread-crumb{
	display: flex;
	padding: 0 0 40px;
}

.bread-crumb li:after{
	content: '\003e';
	display: inline-block;
	padding: 0 10px;
	color: #a3c27f;
}

.bread-crumb li:last-child:after{
  display: none;
}

/* フッター関連
===========================================*/
/* TOPへ戻るボタン */
#page_top{
	background-color:rgba(163,194,127,0.5);
	width: 50px;
	height: 50px;
	z-index: 10;
	position: fixed;
	right: 0;
	bottom: 0;
	display: none;
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}
#page_top img{
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

/* フッターエリア */
.footer-area{
	background-color: #A3C27F;
	padding: 20px 40px;
}
.footer-area ul.list-sns{
	display: flex;
}
.footer-area ul.list-sns li{
	margin-right: 30px;
}
.footer-area ul.list-sns li a:hover{
	opacity: 0.7;
}

.icon-aw{
	color:#CDDEB9;
	font-size: 1.5em;
}


/* ナビ */
.footer-nav ul{
	margin: 0;
	padding: 0;
	float: right;
}
.footer-nav li a{
	display: block;
	padding: 0px;
}

.footer-nav ul:after{
	content: "";
	display: block;
	clear: both;
}
.footer-nav li{
	float: left;
	width: auto;
}
/* スマホ・タブレット */
@media (max-width:767px){
	.footer-nav ul{
		float: none;
	}
	.footer-nav li{
		float: none;
		text-align: center;
		padding: 5px;
		border-bottom: 1px solid #fff;
	}
	.footer-nav li:first-child{
		border-top: 1px solid #fff;
	}
	.footer-nav{
		background-color: #A3C27F;
		padding: 0px;
	}
}

.footer-nav{
	padding-top: 0px;
}
/* スマホ・タブレット */
@media (max-width:767px){
	.footer-nav{
		padding-top: 10px;
	}
}

.footer-area ul.list-nav li{
	margin-left: 30px;
}
/* スマホ・タブレット */
@media (max-width:1024px){
	.footer-area ul.list-nav li{
		margin-right: 30px;
		margin-left: 0px;
	}
}
footer ul.list-nav li a{
	color: #fff;
}
footer ul.list-nav li a:hover{
	opacity: 0.5;
}

/* コピーライト */
.copy-right{
	padding:0px 0 0 0;
	text-align: center;
}
.copy-right p{
	font-size: 1.2rem;
	color: #fff;
}

/* トップページ
===========================================*/
/* アニメーション設定 */
body,html {
	width: 100%;
	/*height: 100vh;*/
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.anime {
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.anime img{
	width: 350px;
}
/* タブレット以下 */
@media (max-width:1024px){
	.anime img{
		width: 200px;
	}
}

@keyframes logo_anime {
   0% { opacity: 0; }
 100% { opacity: 1; }
}
.anime img{
	animation-delay: 0s;
	opacity: 0;
}
.anime img {animation-duration: 1s;
	animation-name: logo_anime;
	animation-iteration-count: 1;
	opacity: 1;
}





.head-area{
	position: relative;
}


/*  トップイメージ画像 */
.top-images img{
	width: 100%;
}

/* TOPページのアニメーション */
@keyframes fade_anime {
   0% { opacity: 0; }
  20% { opacity: 1; }
  50% { opacity: 1; }
  60% { opacity: 0; }
 100% { opacity: 0; }
}

img.img1{
	object-fit: cover;
	animation-delay: 0s;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	
}
img.img2{
    object-fit: cover;
	position: absolute;
	top: 0;
	opacity: 0;
	animation-delay: 5s;
}

.top-images img {animation-duration: 10s;
	animation-name: fade_anime;
	animation-iteration-count: infinite; /* 再生回数無限 */
	opacity: 0;
	width: 100%;
	height: auto;
  	display: block;
  	margin: auto;
  	font-size: 0;
  	line-height: 0;
}
/* タブレット以下 */
@media (max-width:1024px){
	.top-images img {
		width: 100vw;
		height: 100vh;
	}
	img.img1{
		object-position: 50% 50%;
	}
	img.img2{
		object-position: 0 100%;
	}
}
/*  スマホ以下 */
@media (max-width:768px){
	img.img1{
		object-position: 30% 30%;
	}
	img.img2{
		object-position: 50% 50%;
	}
}


/* トップ画像上のキャプション */
.area-caption h2{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 150%;
}
.area-caption h2 span{
	margin: 0 1.0rem;
    padding: 1.0rem 1.0rem 1.0rem .5rem;
    letter-spacing: 7px;
	line-height: 1;
	display: inline-block;
	background-color: #fff;
}
.caption-no1{
	position: absolute;
	top:20%;
	right:10%;
}
/* スマートフォン以下 */
@media (max-width:767px){
	.caption-no1{
		position: absolute;
		top:20%;
		left:10%;
	}
}
.caption-no2{
	position: absolute;
	top:20%;
	left:10%;
}
/* キャプションのアニメーション */
@keyframes caption_anime {
   0% { opacity: 0; }
  20% { opacity: 0.8; }
  40% { opacity: 0.8; }
  50% { opacity: 0; }
 100% { opacity: 0; }
}

.caption-no1 h2{
	animation-delay: 0s;
}
.caption-no2 h2{
	animation-delay: 5s;
}

.area-caption h2{animation-duration: 10s;
	animation-name: caption_anime;
	animation-iteration-count: infinite; /* 再生回数無限 */
	opacity: 0;
}


/* 文字列のフェードイン */
/* 上から */
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}
/* 左から */
.fadein-left {
  opacity : 0;
  transform: translateX(-20px);
  transition: all 1s;
}
/* 右から */
/*.fadein-right {
  opacity : 0;
  transform: translateX(20px);
  transition: all 1s;
}*/




/* 導入部分 */
.intro-area {
	padding: 100px 20px;
	text-align: center;
}

/* 画像部分 */
.intro-area img {
	width: 300px;
}
	
/* タブレット以下 */
@media (max-width:1024px){
	/* 画像部分 */
	.intro-area img {
		width: 200px;
	}
}
	
.intro-area .intro-text p{
	padding: 50px 0 0;
	font-size: 1.6rem;
}
	
/* タイトルエリア */
.area-title {
	padding: 50px 0;
	text-align: center;
}

.area-title h2{
	font-size: 4.0rem;
	font-weight: normal;
	padding-bottom: 1.5rem;
	display: inline-block;
	position: relative;
}

/* タブレット以下 */
@media (max-width:1024px){
	.area-title h2{
		font-size: 3.0rem;
		padding-bottom: 1.0rem;
	}
}
.area-title h2:after{
	content: "";
	position: absolute;
	left: -30px;
	right: -30px;
	bottom: 0;
	border-bottom: 2px solid #a3c27f;
}
/* タブレット以下 */
@media (max-width:1024px){
	.area-title h2:after{
		content: "";
		position: absolute;
		left: -30px;
		right: -30px;
		bottom: 0;
		border-bottom: 2px solid #a3c27f;
	}
}

.area-title h3{
	padding-top: 1.5rem;
	font-size: 2.0rem;
	font-weight: normal;
}
/* タブレット以下 */
@media (max-width:1024px){
	.area-title h3{
		padding-top: 1.0rem;
		font-size: 1.6rem;
	}	
}
/* エリア① */
.area-type1 {
	background-color: rgba(244,232,98,0.3);
	padding-bottom: 30px;
}

/* 説明エリア */
.area-description {
	position: relative;
	margin: 50px auto 0px;
	max-width: 1500px; /* TODO:調整　横幅の最大値 */
}
/* タブレット以下 */
@media (max-width:1024px){
	/* 説明エリア */
	.area-description {
		margin: 0px auto 0px;
	}
}

.area-description:after,
.area-description2:after{
	content: "";
	display: block;
	clear: both;
}
.area-description h2,
.area-description2 h2{
	font-size: 3.0rem;
	font-weight: normal;
	padding-bottom: 3.0rem;
}
/* タブレット以下 */
@media (max-width:1024px){
	.area-description h2,
	.area-description2 h2{
		font-size: 2.0rem;
		padding-bottom: 2.0rem;
	}
}

/* 説明BOX左 */
.description-left {
	z-index: 2;
	background: #fff;
	box-shadow: 5px  5px 5px rgba(100,100,100,0.15);
	position: absolute;
	top: -50px;
	left: 0;
	width: 50%;
}
/* タブレット以下 */
@media (max-width:1024px){
	/* 説明BOX左 */
	.description-left {
		float: left;
		width: 90%;
		position: relative;
		margin-top: 10px;
	}
}
/* 横幅ワイド */
@media (min-width:1500px){
	.description-left {
		top: -50px;
		left: 0px;
		width: 50%;
	}
}
@media (min-width:1700px){
	.description-left {
		top: -50px;
		left: -100px;
		width: 50%;
	}
}

.desc-inner {
	padding: 0;
	margin: 0;
	background: #fff;
}

.desc-inner-box {
	margin: 50px;/* TODO調整 */
}
/* タブレット以下 */
@media (max-width:1024px){
	.desc-inner-box {
		margin: 30px 11.11%;/* TODO調整 */
	}
}
.desc-button-wrap{
	display: block;
	margin: 50px 0 50px;
	width: 100%;
}
/* タブレット以下 */
@media (max-width:1024px){
	.desc-button-wrap{
		display: block;
		margin: 15px 0 30px;
		width: 100%;
	}
}

.desc-button {
	display: block;
	width: 120px;
	text-align: center;
	padding: 20px;
	margin: 0 auto;
	background: #f3cfe2;
}

.desc-button-wrap a:hover .desc-button{
	opacity:0.5;
}

/* 横線装飾左 */
.left-line {
	position: absolute;
	top:100px;
	left: 0;
	height: 1.5px;
	width: 105%;
	background-color: #a3c27f;
	z-index: 3;
}
/* タブレット以下 */
@media (max-width:1024px){
	/* 横線装飾左 */
	.left-line {
		top:60px;
	}
}
/* 横幅ワイド */
/* タブレット以下 */
@media (min-width:1500px){
	/* 横線装飾左 */
	.left-line {
		width: 100%;
	}
}

/* 画像右 */
.description-img-right {
	float: right;
	width: 55%;
}
/* タブレット以下 */
@media (max-width:1024px){
	/* 画像右 */
	.description-img-right {
		width: 90%;
	}
}
.description-img-right img {
	width: 100%;
}
/* 要素の間の余白*/
.area-space1{
	padding: 50px;
}

/* 説明BOX右 */
.description-right {
	position: absolute;
	top: -50px;
	right: 0;
	width: 50%;
	z-index: 2;
	background: #fff;
	box-shadow: -5px  5px 5px rgba(100,100,100,0.15);
}
/* タブレット以下 */
@media (max-width:1024px){
	/* 説明BOX右 */
	.description-right {
		z-index: 2;
		background: #fff;
		box-shadow: 5px  5px 5px rgba(100,100,100,0.15);
		float: right;
		width: 90%;
		position: relative;
		margin-top: 10px;
	}
}
/* Wide横幅 */
@media (min-width:1500px){
	.description-right {
		top: -50px;
		right: 0px;
		width: 50%;
	}
}
@media (min-width:1700px){
	.description-right {
		top: -50px;
		right: -100px;
		width: 50%;
	}
}

/* 横線装飾右 */
.right-line {
	position: absolute;
	top:100px;
	right: 0px;
	height: 1.5px;
	width: 105%;
	background-color: #a3c27f;
	z-index: 3;
}
/* Wide横幅 */
@media (min-width:1500px){
	.right-line {
		width: 100%;
	}
}
/* タブレット以下 */
@media (max-width:1024px){
	/* 横線装飾右 */
	.right-line {
		position: absolute;
		top:60px;
		right: 0px;
		height: 1.5px;
		width: 105%;
		background-color: #a3c27f;
		z-index: 3;
	}
}
/* 画像左 */
.description-img-left {
	float: left;
	width: 55%;
}
/* タブレット以下 */
@media (max-width:1024px){
	/* 画像左 */
	.description-img-left {
		float: left;
		width: 90%;
	}
}
.description-img-left img {
	width: 100%;
}
/* エリア② */
.area-type2 {
	background-color: rgba(243,207,226,0.3);
	padding-bottom: 30px;
}

/* 要素の間の余白2*/
.area-space2{
	padding: 50px;
}
/* タブレット以下 */
@media (max-width:1024px){
	/* 要素の間の余白2*/
	.area-space2{
		padding: 10px;
	}
}
/* 説明エリア */
.area-description2 {
	margin-top: 0px;
}


/* インスタ部分 */
.insta-area img{
	margin: 0;
	padding: 0;
	vertical-align: bottom; /* 画像の下の余白を削除 */
	width: 100%;
}

.insta-area:after {
	content: "";
	display: block;
	clear: both;
}

.insta-area ul li{
	float: left;
	width: 25%;
}

/* 画面が大きい場合10個画像を表示させる:TODO横幅調整 */
@media (min-width:1200px){
	.insta-area ul li{
		float: left;
		width: 20%;
	}
}
@media (max-width:1200px){
	.width-w{
		display: none;
	}
}
/* タブレット・スマホデバイス */
@media (max-width:1024px){
	.insta-area ul li{
		float: left;
		width: 33.33%;
	}
}

/* 画像を正方形に表示させる */
.thumbs {
  width: 100%;
  max-width: 500px;
  position: relative;
}
.thumbs::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.thumbs img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}
.thumbs{
	overflow: hidden;
}

.thumbs img {
    -moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
}
.thumbs img:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
	opacity: 0.6;
}

/* 要素の間の余白3*/
.area-space3{
	padding: 100px;
}



/* 商品一覧ページ
===========================================*/
.container h1{
	margin: 0 0 20px;
	font-size: 2.0rem;
}
.container h1:after{
	content: '';
    display: block;
    background: #a3c27f;
    height: 2px;
    width: 30px;
    margin-top: 10px;
}
.container-products ul.products {
	padding-bottom: 100px;
}
.container-products .products:after {
	content: "";
	display: block;
	clear: both;
}
.container-products .products li{
	margin-bottom: 20px;
	width: 25%;
	float: left;
}
/* タブレット */
@media (max-width:1024px){
	.container-products .products li{
		width: 33.33%;
	}
}
/* スマホ */
@media (max-width:767px){
	.container-products .products li{
		margin-top: 20px;
		width: 50%;
		float: left;
	}
}
/* スマホ2 */
@media (max-width:500px){
	.container-products .products li{
		margin-top: 20px;
		width: 100%;
		float: left;
	}
}

.container-products .products .products-inner{
	padding: 0 30px;
}
.container-products .products img{
	background-size:cover;
	border-radius: 50%;
	width: 100%;
}
/* スマホ2 */
@media (max-width:500px){
	.container-products .products-image{
		text-align: center;
	}
	.container-products .products img{
		width: 90%;
		max-width: 300px;
	}
}

.container-products dd.products-description{
	height: 7.8rem;
}


.container h2{
	margin-bottom: 15px;
	font-size: 2.0rem;
}
.container h2:after{
	content: '';
    display: block;
    height: 2px;
    width: 30px;
    margin-top: 10px;
}
.container h2.pink:after{
    background: #F19DB5;
}
.container h2.yellow:after{
    background: #F4E862;
}
.container p{
	margin-bottom: 15px;
}
.container-products .products .products-description{
	padding:10px 0;
}

.container-products .products .product-button {
	display: block;
	width: 120px;
	text-align: center;
	padding: 10px;
	margin: 20px auto;
	background: #f3cfe2;
	color: #fff;
}
.container-products a:hover .product-button{
	opacity: 0.7;
}

/* 商品詳細ページ
===========================================*/
.container-product-details .photo-and-status{
	padding: 0;
}
.container-product-details .photo-and-status:after {
	content: "";
	display: block;
	clear: both;
}
.container-product-details .photo-and-status .photos{
	float: left;
	width: 60%;
}

.container-product-details .photo-and-status .status{
	float: left;
	width: 40%;
}

/* タブレット */
@media (max-width:1024px){
	.container-product-details .photo-and-status .photos{
		float: none;
		width: 100%;
		max-width: 700px;
		margin: 0 auto;
	}
	.container-product-details .photo-and-status .status{
		width: 100%;
		max-width: 400px;
	}
}

/* スマホ */
@media (max-width:767px){
	.container-product-details .photo-and-status .photos{
		width: 100%;
	}
	.container-product-details .photo-and-status .status{
		width: 100%;
	}
}
/* 写真の設定 */
.container-product-details .photos .photo-big img{
	width: 100%;
}
.container-product-details .photos{
	text-align: center;
}
.container-product-details .photos ul{
	display: inline-block;
	margin: 0;
	padding: 0;
}
.container-product-details .photos li{
	float: left;
}
.container-product-details .photos li img{
	width: 50px;
	padding: 0;
	margin: 10px;
}
/* 写真横のスペース */
.container-product-details .photo-and-status .status .status-inner{
	padding: 0px 20px;
}
/* タブレット */
@media (max-width:1024px){
	.container-product-details .photo-and-status .status .status-inner{
		padding: 0px 0px;
	}
}
/* カートに追加ボタン */
.container-product-details .photo-and-status .status .button-cart{
	text-align: center;
	margin: 20px 0;
	padding: 10px;
	color: #000;
	background-color: #f19db5;
	border-radius: 5px;
}

/* お気に入りに追加ボタン */
.container-product-details .photo-and-status .status .button-like{
	text-align: center;
	margin: 20px 0;
	padding: 10px;
	color: #000;
	background-color: #fff;
	border: solid 1px #a3c27f;
	border-radius: 5px;
}

/* タブレット以下 */
@media (max-width:1024px){
	.container-product-details .details {
		margin-top: 40px;
	}
}

/* 表 */
.container-product-details .details th{
	width: 30%;
}





/* Lesson詳細ページ
===========================================*/
.container-lessons .lesson-section:after {
	content: "";
	display: block;
	clear: both;
}
.container-lessons .lesson-section .photos{
	float: left;
	width: 30%;
}

.container-lessons .lesson-section .lesson-detail{
	float: left;
	width: 70%;
}

/* タブレット */
@media (max-width:1024px){
	.container-lessons .lesson-section .photos{
		float: none;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}
	.container-lessons .lesson-section .lesson-detail{
		width: 100%;
	}
}

/* スマホ */
@media (max-width:767px){
	.container-lessons .lesson-section .photos{
		width: 100%;
	}
}

.container-lessons .lesson-section .photos img{
	width: 100%;
}

.container-lessons h1{
	padding: 0;
	margin: 0 0 15px;
}
.container-lessons .lesson-section {
	margin: 40px 0;
}
.container-lessons .lesson-detail-inner{
	margin: 0 20px;
}

/* タブレット */
@media (max-width:1024px){
	.container-lessons .lesson-detail-inner{
		padding: 0;
		margin: 0;
	}
}

/* 営業案内ページ
===========================================*/
.container-information .information-section {
	margin: 30px 0;
}
.container-information iframe{
	width:100%;
}
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* 会社概要
===========================================*/
.container-gaiyou th{
	width: 30%;
}


/* インスタ様ページ
===========================================*/
.container-instagram{
	max-width: 800px;
	margin: 0 auto;
}
.container-instagram img{
	width: 100%;
}