@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed&display=swap');

* {
	margin: 0;
	padding: 0;
}
*::after,
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family: 'Noto Sans JP', sans-serif;
	background: #ffffff;
	font-size: 14px;
	letter-spacing: 2px;
	color: #333;
}
article {
	height: auto;
	margin: 50px auto;
	text-align: center;
	line-height: 1.9;
}
article p {
	margin-bottom: 1em;
}
.outer_g {
  background-color:#eee;
}
.outer_gr {
  background-color:#ddf2d0;
}
.outer_eg {
  background-color:#b3dfe0;
}
a {
	color: #000;
	text-decoration: none !important;
}

.pagetop {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index:5;
}

.pagetop img {
	display: block;
	width: 50px;
	height: 50px;
}

.sml {
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0px;
}

.bml {
	font-size: 16px;
	font-weight:700;
}

.catch1 {
	font-size: 21px;
	line-height: 1.7;
	letter-spacing: 1.5px;
	font-weight:700;
	margin-top: 0em;
}

.catch2 {
	font-size: 32px;
	line-height: 1.7;
	letter-spacing: 1.5px;
	margin-bottom: 0.5em;
}

.catch3 {
	width: 100%;
	font-size: 21px;
	line-height: 1.7;
	letter-spacing: 1.5px;
	font-weight:700;
	background-color:#eee;
}

.ssml {
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: 1px;
}

h2 {
	font-family: 'Cabin Condensed', sans-serif;
	font-size: 38px;
	letter-spacing: 5px;
	font-weight:400;
	color: #333 ;
}

h3 {
	font-size: 21px;
	letter-spacing: 5px;
	font-weight:400;
}

.pd_itemmd {
	font-size: 13px;
	text-decoration:underline;
	margin-bottom: 0.5em;
}

.about_md {
	font-size: 18px;
	text-decoration:underline;
	margin-bottom: 0.5em;
}

.abutit {
	font-size: 21px;
	letter-spacing: 5px;
	font-weight:400;
}

video {
  width: 80%; // 適宜指定
}

.mds {
  font-size:32px;
	display: inline-block;
	margin: 0px auto;
}

.txtbk {
	display: inline-block;
  font-size:12px;
    text-align: center;
	color: #ffffff ;
  background-color:#000000;
  padding:0px 4px;
	margin-bottom: 1em;
}

.txtbkl {
	border: solid 1px #000000;
  padding:2px 8px 3px 8px;
}

.mail {
	display: inline-block;
	border: 1px solid #888;
	border-radius: 5px;
	padding:20px;
	margin-top: 1em;
	line-height: 1.9;
}

.prof {
	float:right;
	margin-left: 30px;
	width: 260px;
	border-radius: 10px;
}

.top_item img {
	width: 280px;
}

#about-column {
		width: 90%;
		text-align: center;
		background: #f6f4f0;
		padding: 30px;
	display: inline-block;
}

#about-column img {
		width: 70%;
}

.main-title {
	margin-top: 170px;
color: #FFF;
  font-size:18px;
	letter-spacing: 5px;
}

#mailf {
	width: 100%;
	height: 600px;
}

.pc { display: block !important; }
.sp { display: none !important; }

#footer {
	font-size: 13px;
	line-height: 1.8;
	color: #222;
	padding: 10px;
	text-align: center;
}
#footer a {
	color: #fff;
	text-decoration: none;
}

#footerlogo img {
	width: 140px;
	margin-bottom: 5px;
}

#insta_btn img {
	width: 120px;
	margin-bottom: 5px;
}

#news {
	text-align: left;
}

    .box_info {
        overflow:auto;
        width:100%;
        height:300px;
        padding:0px;
}

div#news div#information div {
	margin: 20px 0;
	border-bottom: 1px dotted #eee;
	padding-bottom: 10px;
}

div#news dl dt {
	font-weight: bold;
}

.about_box {
	margin: 80px 0;
}

.contact_box {
	margin: 200px 0;
}

.policy_box {
	margin: 200px 100px;
	text-align: left ;
}

.about_box img {
	width:80%;
}

#top_bn img {
	width:35%;
}

.fadein {
    opacity : 0;
    transform : translate(0, 100px);
    transition : all 1200ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

table {
	width: 100%;
	max-width: 700px ;
	margin: 30px auto 0 auto;
	border-collapse:collapse;
	text-align: left ;
}

.tbl-r01 th {
  width: 30%;
  padding: 5px;
}

.tbl-r01 td {
  padding: 5px;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
.howtoimg{
  float: right;
	margin-left: 10px;
}
.howtoimg img{
	width: 200px;
}

/* ▲▲▲ここまではナビゲーションに関係ない設定▲▲▲ */

.inner {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
}

.inner2 {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
	padding: 20px;

}

.outer {
	  background-color:#ffffff;
}

.inner-w {
	width: 100%;
	margin: 0 auto;
}

.inner:after {
	content: "";
	clear: both;
	display: block;
}

.inner-main {
	width: 100%;
	margin: 100px auto -100px auto;
}

.inner-main img {
	width: 100%;
	margin: 0 auto;
}

/* header */
#top-head {
	top: -100px;
	position: absolute;
	width: 100%;
	margin: 100px auto 0;
	padding: 25px 0 20px 0;
	line-height: 1;
	z-index: 999;
	color: #fff;
	text-decoration: none;
	background-color:#fff;
}

#top-head .inner {
	width: 100%;
	position: relative;
	margin: 0 auto;
	text-align: center;
}
#top-head .logo img {
	width: 240px;
	margin-bottom: 20px;
}
#global-nav ul {
	list-style: none;
	position: relative;
	font-family: 'Cabin Condensed', sans-serif;
	font-weight:400;
	font-size: 16px;
	letter-spacing: 1px;
	display: inline-block;
}
#global-nav ul li {
	display: inline-block;
	position: relative;
}
#global-nav ul li a {
	padding: 0 20px;
	color: #333;
}
#global-nav ul li a:hover {
	color: #999;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}

/* Btn Hover */
#global-nav ul li:after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	bottom: 0px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	width: 50%;
	left: 25%;
}
#global-nav ul li:hover:after {
	background: #333;
	bottom: -5px;
	width: 50%;
	left: 25%;
}

/* Fixed */
#top-head.fixed {
	margin-top: 0;
	top: 0;
	position: fixed;
	padding-top: 20px;
	height: auto;
	background: #fff;
	background: rgba(255,255,255,.7);
	transition: top 0.65s ease-in;
	-webkit-transition: top 0.65s ease-in;
	-moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo img {
	display:none;
}
#top-head.fixed #global-nav ul li a {
	color: #333;
	padding: 0 10px;
}

#top-head.fixed #global-nav ul li a:hover {
	color: #999;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}


*, *:before, *:after {
	box-sizing: border-box;
}

.col_1{
	top: 100px;
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	  position:relative;
	margin: 0;
	padding: 0;
	background: #ffffff;
}

.col_11{
	width: 35%;
	color: #fff;
}

.col_12{
	text-align: left;
	width: 65%;
	font-size: 16px;
	color: #333;
	line-height: 1.9;
	padding-left: 60px;
}

.col_11 img{
	width: 100%;
}

.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	  position:relative;
	  z-index:2;
	padding: 50px 0;
}

.col_2 > div{
	width: 50%;
	padding: 0px;
	margin: 0px;
}

.col_21{
	text-align: left;
	width: 100%;
}

.col_21 img{
	width: 100%;
	padding: 0px;
}


.col_22 img{
	width: 100%;
	padding: 60px;
	border-radius: 50%;
}

.col_23{
	text-align: left;
	width: 100%;
}

.col_23 img{
	width: 90%;
	padding: 0px;
}

.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	  position:relative;
	  z-index:2;
	padding: 0;
}

.col_31{
	text-align: left;
	width: 25%;
}

.col_31 img{
border-radius: 50%;
	width: 80%;
}

.col_32{
	text-align: left;
	width: 75%;
}

.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	  position:relative;
	  z-index:2;
	padding: 0;
}

.col_42{
	width: 35%;
	color: #fff;
}

.col_42 img{
	width: 100%;
}

.col_41{
	text-align: left;
	width: 65%;
	font-size: 16px;
	color: #333;
	line-height: 1.9;
}

.col_5{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	  position:relative;
	  z-index:2;
	padding: 0;
	justify-content: center;
	align-items: center;
}

.col_51{
	text-align: left;
	width: 30%;
}

.col_51 img{
border-radius: 50%;
	width: 90%;
}

.col_52{
	text-align: left;
	width: 70%;
}

.col_52 img{
      margin-top: -5px;
	width: 90%;
	padding: 0px;
}

.tea_ill{
float:right;
	width: 25%;
}

.howtxt{
	font-size: 16px;
	padding: 30px;
}

.extra{
	width: 100%;
	max-width: 720px;
      margin-top: 20px;
}

.oil{
	width: 90%;
      margin-top: 20px;
}

hr{
	border: 0;
	border-top: 1px dotted #ccc;
}

        .btn > span:last-of-type,
        .btn.active > span:first-of-type
        {
            display: none;
        }

        .btn.active > span:last-of-type {
            display: inline;
        }

    .slider {
        width: 100%;
        margin: 0 auto;
    }

    .slick-slide {
      margin: 0px 10px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }

.slick_center { margin: 0 0 50px;}
    .slick_center img { width: 100%; height: auto; }
    .slick-prev{left:2%;}
    .slick-next{right:-42%;}
    .slick-arrow{z-index:20;}
    .slide-arrow{
      position: absolute;
      top: 45%;
    }
    .prev-arrow{
   width: 2.5%;
      left: -10px;
    }
    .next-arrow{
   width: 2.5%;
      right: -10px;
    }
.mdf {
	font-size: 12px;
	line-height: 1.5;
	text-align: left;
	cursor: hand;
cursor: pointer;
}
.mdf img {
	margin-bottom: 8px;
	cursor: hand;
cursor: pointer;

}

.min  {
width:25%; float: right; margin-left:20px;
}

a[href^="tel:"] {
    pointer-events: none;
}

.buybut {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:500;
		font-size: 16px;
		line-height: 1.5;
		width: 400px;
		max-width: 100%;
		text-align: center;
		color: #FFF;
		background: #8bd3d5;
		border-radius: 5px;
		padding: 15px;
		border: 1px solid #8bd3d5;
		margin: 30px auto 10px auto;
/*-webkit-transition: 5s;
    -moz-transition: 5s;
    -o-transition: 5s;
    -ms-transition: 5s;*/
    transition: 0.5s;
}

.buybut:hover {
		color: #8bd3d5;
		background: #FFF;
		border: 1px solid #8bd3d5;
	}

.way3 {
		display:inline-block;
		vertical-align: middle;
		font-weight:500;
		font-size: 16px;
		line-height: 1.5;
		width: 200px;
		max-width: 100%;
		text-align: center;
		color: #FFF;
		background: #8bd3d5;
		border-radius: 5px;
		padding: 10px;
		margin: 20px 10px 40px 10px;
}

.way3t {
		display:inline-block;
		font-weight:500;
		font-size: 16px;
		line-height: 1.5;
		width: 580px;
		max-width: 100%;
		text-align: center;
		color: #FFF;
		background: #8bd3d5;
		border-radius: 5px;
		padding: 10px;
		margin:10px;
}

.flex3 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
		justify-content: center;
		align-items: center;
}

.flexc {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
		justify-content: center;
		align-items: center;
		font-weight:500;
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: 1px;
		width: 240px;
		max-width: 100%;
		height: 100px;
		text-align: center;
		color: #FFF;
		background: #8bd3d5;
		border-radius: 5px;
		padding: 10px;
		margin:10px ;
}

.free5 {
		display:inline-block;
		font-weight:500;
		font-size: 16px;
		line-height: 1.5;
		max-width: 100%;
		text-align: center;
		color: #c9e5e4;
		border: 1px solid #c9e5e4;
		border-radius: 5px;
		padding: 10px;
		margin: 20px 10px 0px 10px;
}

.ulb_635 {
background:linear-gradient(transparent 70%, #c9e5e4 0%);
font-weight:700;
}

.text_635 {
font-size: 18px;
line-height: 1.5;
color: #8bd3d5;
font-weight:700;
letter-spacing: 1px;
}

table.table01 {
	border-collapse: collapse;
	margin: 0px auto;
}

table.table01 {
	border-spacing: 0;
    border-collapse: collapse;
    color: #555;
    width: 100%;
}

td {
    border-bottom: 1px solid #ddd;
    padding: 20px;
}

.freerd {text-align:center;}

.freerd img {width: 70%; margin-top: 15px;}

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

@media screen and (max-width: 980px) {
	article {
		width: 100%;
		padding: 0 30px;
	}
	.inner {
		width: 90%;
		padding: 0 20px;
		margin: 0 auto;
		text-align: center;
	}
	#global-nav ul li a {
		padding: 0 20px;
	}
	#top-head.fixed #global-nav ul li a {
		padding: 0 15px;
	}

	.col_2 > div{
		width: 100%;
	}

	.col_3 > div{
		width: 100%;
	}

}

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

h2 {
	font-family: 'Cabin Condensed', sans-serif;
	font-size: 32px;
	letter-spacing: 5px;
	font-weight:400;
	margin: 20px auto 10px auto;
}

.min  {
width:40%; float: right; margin-left:20px;
}

.col_2{
	width: 90%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	  position:relative;
	  z-index:2;
	padding: 0;
		margin: 0 auto;
		text-align: center;
}

article {
	height: auto;
	margin: 40px auto;
	text-align: center;
	line-height: 1.7;
}

	.col_1 > div{
		width: 100%;
	}

	.col_2 > div{
		width: 100%;
	}

	.col_3 > div{
		width: 100%;
	}

	.col_4 > div{
		width: 100%;
	}

.main-title {
	margin-top: 60px;
color: #FFF;
  font-size:18px;
	letter-spacing: 5px;
}

h3 {
	font-family: 'Cormorant Garamond', serif;
	font-size: 18px;
	letter-spacing: 5px;
	font-weight:400;
}

.bml {
	font-size: 16px;
	line-height: 1.5;
	font-weight:700;
}

	#top-head,
	.inner {
		width: 100%;
		padding: 0;
	}
	#top-head {
	padding-top: 20px;
	top: 0;
	position: absolute;
	margin: 0;
	}

#global-nav ul {
	list-style: none;
	position: relative;
	font-family: 'Cabin Condensed', sans-serif;
	font-weight:400;
	font-size: 3.8vw;
	letter-spacing: 0;
	display: inline-block;
}

#global-nav ul li a {
	padding: 0 3px;
	line-height: 1.5;
}

#top-head .logo img {
	width: 200px;
	margin-bottom: 15px;
}

	#top-head.fixed #global-nav ul li a {
		padding: 0 5px;
	}

	/* Fixed reset */
	#top-head.fixed {
		padding: 10px;
	background: #fff;
	background: rgba(255,255,255,.7);
	line-height: 1.5;
	}

.tea_ill{
float:right;
	width: 40%;
	margin-top: 10px;
}

#mailf {
	width: 90%;
	height: 500px;
}

.prof-sp {
	display: inline-block;
	width: 260px;
	border-radius: 10px;
	margin-bottom: 20px;
}

.center {
	margin: 0 auto;
	text-align: center;
}

.pagetop {
	display: none;
	position: fixed;
	bottom: 15px;
	right: 15px;
	z-index:5;
}

  .tbl-r01 {
    width: 100%;
  }
  .tbl-r01 th {
	padding: 0px 40px;
    display: block;
    width: 100%;
	box-sizing: border-box;
  }

  .tbl-r01 td {
	padding: 0 40px 20px 40px;
    display: block;
    width: 100%;
	box-sizing: border-box;
  }

#footer {
	font-size: 11px;
	line-height: 1.8;
	letter-spacing: 2px;
	color: #222;
	padding: 10px;
	text-align: center;
}
#footer a {
	color: #fff;
	text-decoration: none;
}

#footerlogo img {
	width: 120px;
	margin-bottom: 5px;
}

.pc { display: none !important; }
.sp { display: block !important; }

.col_31{
	width: 100%;
	padding: 10px;
	text-align: center;
}

.col_31 img{
	width: 70%;
}

.col_32{
	width: 100%;
	padding: 20px;
	text-align: left ;
}

.col_41{
	width: 100%;
	padding: 0 20px;
	text-align: left;
}

.col_42{
	width: 100%;
	padding:0 20px;
	text-align: left ;
}

.col_51{
	width: 70%;
}

.col_51 img{
	width: 100%;
}

.col_52{
	width: 100%;
	padding: 20px;
	text-align: left ;
}

.col_22{
	text-align: left;
	width: 100%;
}

.col_22 img{
	width: 100%;
	margin-top: 20px;
	padding: 0px;
}

.about_box {
	margin: 60px 0;
}

.about_box img {
	width:90%;
}

#about-column {
		width: 90%;
		text-align: center;
		background: #f6f4f0;
		padding: 20px;
	display: inline-block;
}

#about-column img {
		width: 100%;
}

.top_item img {
	width: 50%;
}

.policy_box {
	margin: 100px 30px;
	text-align: left ;
}

.contact_box {
	margin: 100px 0;
}

#top_bn img {
	width:70%;
}

.howtoimg{
  float: none;
	text-align: center ;
	margin: 0;
}
.howtoimg img{
	width: 80%;
	margin: 10px 0;
}

.col_11{
	margin: 0;
	padding: 30px;
}

.col_12{
	color: #333;
	line-height: 1.7;
	margin: 0;
	padding: 0 30px 30px 30px;
}

.catch1 {
	font-size: 18px;
	line-height: 1.7;
	letter-spacing: 1.5px;
	font-weight:700;
}

.catch2 {
	font-size: 24px;
	line-height: 1.7;
	letter-spacing: 1.5px;
	margin-bottom: 0.5em;
}

.spleft {
	display: inline-block;
	width:90%;
	text-align: left ;
	margin-top: 20px;
}

#global-nav ul li:hover:after {
	background: #fff;
	bottom: -2px;
	width: 50%;
	left: 25%;
}

.way3 {
		display:block;
		font-weight:500;
		font-size: 16px;
		line-height: 1.5;
		width: 70%;
		max-width: 100%;
		text-align: center;
		color: #FFF;
		background: #8bd3d5;
		border-radius: 5px;
		padding: 10px;
		margin: 10px auto;
}

.way3t {
		display:inline-block;
		font-weight:500;
		font-size: 16px;
		line-height: 1.5;
		width: 580px;
		max-width: 100%;
		text-align: center;
		color: #FFF;
		background: #8bd3d5;
		border-radius: 5px;
		padding: 10px;
		margin:0;
}

.free5 {
		display:inline-block;
		font-weight:500;
		font-size: 14px;
		line-height: 1.5;
		max-width: 100%;
		text-align: center;
		color: #c9e5e4;
		border: 1px solid #c9e5e4;
		border-radius: 5px;
		padding: 10px;
		margin: 20px 5px 0px 5px;
		letter-spacing: 1px;
}

.howtxt{
	font-size: 14px;
	padding: 20px 0;
}

.col_22 img{
	width: 100%;
	padding: 20px;
	border-radius: 50%;
}

.freerd {text-align: left ;}
.freerd img {width: 100%; margin-top: 10px;}

.flex3 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
		justify-content: center;
		align-items: center;
flex-direction: column;
  flex-wrap: wrap;
}

.flexc {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
		justify-content: center;
		align-items: center;
		font-weight:500;
		font-size: 16px;
		line-height: 1.5;
		width: 240px;
		max-width: 100%;
		height: 100px;
		text-align: center;
		color: #FFF;
		background: #8bd3d5;
		border-radius: 5px;
		padding: 10px;
		margin:10px ;
}

}

.c-shop-links {
	width: 100%;
  display: flex;
  gap: 2%;
}
.c-shop-links__link {
  display: block;
  width: 32%;
  aspect-ratio: 1;
}
.c-shop-links__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}