@charset "utf-8";

@import url('@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');');

/*
================================
　共通
================================
*/

html{
}
body {
	font-family: "Zen Old Mincho", serif;
	-webkit-text-size-adjust: 100%;
	width: 100%;
	background: #ecf7f3;
}
p,th,td,dt,dd,li {
	color: #231815;
	font-family: "Zen Old Mincho", serif;
	font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem); /* 16px→13px */
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2.4;
}


/* リンク */
a:hover, a:active {
	opacity: 0.5;
	filter: alpha(opacity=50);
	transition-timing-function: ease-out;
	transition-duration: 0.6s;
}

/* flex 関連 */
.fl-between {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.fl-center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.fl-start {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}
.fl-end {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}
.fl-reverse {
	flex-direction: row-reverse;
}

/* SP表示 関連 */
.disp-pc {
	display: block;
}
.disp-sp {
	display: none;
}
.disp-tab {
	display: none;
}
@media screen and (max-width: 1080px) {
.disp-pc {
	display: none;
}
.disp-tab {
	display: block;
}
.disp-sp {
	display: none;
}
}
@media screen and (max-width: 667px) {
.disp-pc {
	display: none;
}
.disp-tab {
	display: none;
}
.disp-sp {
	display: block;
}
}

/* PC時、電話番号タップ不可にする　 */
@media (min-width: 667px) {
a[href*="tel:"] {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
	color: #1B2B40;
}
}


#wrap {
	position: relative;
	margin: 0 auto;
	width: 100%;
	min-width: 375px;
	overflow: hidden;
	animation: fadein 2s forwards;
}
@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}
article {
	margin: 20px 0 0;
	width: 100%;
}
article section {
	width: 100%;
}
article section .inner {
	margin: 0 auto;
	width: calc(100% - 16vw);
	max-width: 600px;
}


/*
================================
　ヘッダー
================================
*/
header {
	width: 100%;
	height: 110px;
	z-index: 1000;
}
.header-inr {
	margin: 0 auto;
	width: calc(100% - 16vw);
	height: 100%;
	display: grid;
	grid-template-columns: 280px auto;
	align-items: center;
}
.hdr-logo a {
	display: grid;
	width: 280px;
}
@media screen and (max-width: 1080px) {
.header-inr {
	width: calc(100% - 12vw);
	grid-template-columns: 245px auto;
}
.hdr-logo a {
	width: 245px;
}
}
@media screen and (max-width: 667px) {
header {
	height: 70px;
}
.header-inr {
	grid-template-columns: 160px auto;
}
.hdr-logo a {
	width: 160px;
}
}

/*
================================
　PC用ナビゲーション
================================
*/
.m-nav {
}
.m-nav li a {
	display: block;
	margin: 0 0 0 60px;
}
.m-nav li span {
	position: relative;
	display: block;
	font-weight: 700;
	font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem); /*16→14px*/
	line-height: 2;
	letter-spacing: 0.1em;
}
.m-nav li span:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: #007f56;
	transition: width 0.3s;
}

.m-nav li a:hover span {
	transition-timing-function: ease-out;
	transition-duration: 0.6s;
}

.m-nav li a:hover span:after {
	width: 100%;
}

@media screen and (max-width: 1200px) {
.m-nav {
	display: none;
}
}


/*
================================
　ナビゲーション
================================
*/
/* ハンバーガーボタン */
.openbtn{
	display: none;
}
@media screen and (max-width: 1200px) {
.openbtn{
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin: 0 0 0 auto;
	width: 60px;
	height: 60px;
	z-index: 100000000;
}
.openbtn-inner {
	position: relative;
	width: 100%;
	height: 28px;
}
.openbtn span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: #01835c;
}
.openbtn span:nth-of-type(1) {
	top: 0px;	
}
.openbtn span:nth-of-type(2) {
	top: 13px;
}
.openbtn span:nth-of-type(3) {
	top: 27px;
}
.openbtn.active span:nth-of-type(1) {
	top: 0;
	left: 0;
	transform: translateY(13px) rotate(-20deg);
	width: 100%;
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn.active span:nth-of-type(3){
	top: 26px;
	left: 0;
	transform: translateY(-13px) rotate(20deg);
	width: 100%;
}
}
@media screen and (max-width: 667px) {
.openbtn{
	height: 35px;
	width: 35px;
	max-width: initial;
	min-width: initial;
	border-left: none;
}
.openbtn-inner {
	height: 18px;
}
.openbtn span:nth-of-type(2) {
	top: 8px;
}
.openbtn span:nth-of-type(3) {
	top: 17px;
}
.openbtn.active span:nth-of-type(1) {
	transform: translateY(8.5px) rotate(-20deg);
}
.openbtn.active span:nth-of-type(3){
	top: 17px;
	transform: translateY(-8.5px) rotate(20deg);
}
}


#g-nav{
	position:fixed;
	top: 0px;
	right: -120%;
	width: 100%;
	height: 100%;
	background: #ecf7f3;
	opacity: 0;
	z-index: 10000000;
}
#g-nav.panelactive{
	right: 0;
	opacity: 1;
}

#g-nav-list { /*縦スクロール*/
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
#g-nav .menu-box01 {
	width: 100%;
}
#g-nav .menu-box01 li {
	margin: 30px;
}
#g-nav .menu-box01 li a {
	display: block;
	width: 100%;
	height: 100%;
	color: #333;
	font-weight: 700;
	font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
	line-height: 3;
	text-align: center;
}
#g-nav .menu-box01 li a:hover {
	color: #ccc;
}


/*
================================
　メインイメージ
================================
*/
.swiper3 {
	margin: 0 auto 80px auto;
	width: calc(100% - 16vw);
	max-width: 1000px;
	position: relative;
}
.swiper3 .swiper-wrapper {
	width: 100%;
	height: calc(100dvh - 240px);
	/* min-height: 500px;
	max-height: 700px; */
	max-height: 680px;
}
.swiper3 .img01 {
	background: url(../images/img_topmain01.jpg) no-repeat center center;
	background-size: cover;
}
.swiper3 .img02 {
	background: url(../images/img_topmain02.jpg) no-repeat center center;
	background-size: cover;
}
.swiper3 .img03 {
	background: url(../images/img_topmain03.jpg) no-repeat center center;
	background-size: cover;
}
.swiper3 .img04 {
	background: url(../images/img_topmain04.jpg) no-repeat center center;
	background-size: cover;
}
.swiper3 .img05 {
	background: url(../images/img_topmain05.jpg) no-repeat center center;
	background-size: cover;
}
.swiper3 .swiper-pagination {
	display: flex;
	column-gap: 0.4rem;
	justify-content: center;
	bottom: -40px;
}
.swiper3 .swiper-pagination {
}
.swiper3 .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: #b1b1b3;
	cursor: pointer;
	-webkit-transition: var(--transition);
	transition: var(--transition);
	border-radius: 0;
}
.swiper3 .swiper-pagination-bullet-active {
	background: #007f56;
}
@media screen and (max-width: 667px) {
.swiper3 {
	margin: 0 auto 60px auto;
}
.swiper3 .swiper-wrapper {
	height: calc(100dvh - 160px);
}
.swiper3 .swiper-pagination {
	column-gap: 0.3rem;
	bottom: -30px;
}
.swiper3 .swiper-pagination-bullet {
	width: 6px;
	height: 6px;
}
}

/*
================================
　フッター
================================
*/
footer {
	margin: 100px 0 0;
	width: 100%;
	height: 200px;
	background: url(../images/img_footer.jpg) no-repeat center center;
	background-size: cover;
}
.sns {
}
.sns a {
	display: block;
	margin: 30px auto;
	width: 30px;
}
.ft-nav {
}
.ft-nav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.ft-nav li a {
	display: block;
	padding: 20px 30px;
}
.ft-nav li a span {
	font-size: clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem); /*14→10px*/
}
address {
	border-top: 1px solid #007f56;
	padding: 1em 0 0;
	margin: 0 0 50px;
	text-align: center;
	font-size: clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem); /*14→10px*/
	letter-spacing: 0.1em;
}
@media screen and (max-width: 1080px) {
footer {
	margin: 50px 0 0;
	height: 300px;
}
}
@media screen and (max-width: 667px) {
footer {
	height: 180px;
}
.ft-nav li a {
	padding: 10px 16px;
}
.sns a {
	width: 26px;
}
}
@media screen and (max-width: 420px) {
.ft-nav li a {
	padding: 10px 6px;
}
}



/*
================================
　トップページ
================================
*/

.top-about {
	padding: 50px 0 0;
}
.top-about h2 {
	margin: 0 0 50px;
	text-align: center;
}
.top-about h2 span {
	font-weight: 700;
	color: #007f56;
	font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); /*20→16px*/
	letter-spacing: 0.05em;
}
.top-about-title {
	margin: 0 auto 50px;
	width: 68%;
}
.top-about-text {
	padding: 0 0 140px;
	background: url(../images/img_olive.png) no-repeat 90% 90%;
	background-size: 200px;
}
.top-about-text p {
	text-align: center;
}
@media screen and (max-width: 667px) {
.top-about-text {
	padding: 0 0 100px;
	background: url(../images/img_olive.png) no-repeat 100% 90%;
	background-size: 140px;
}
}

/*
================================
　SAVON NATUREについて
================================
*/
.page-about {
}
.page-about h2 {
	margin: 0 0 50px;
	text-align: center;
}
.page-about h2 span {
	font-weight: 700;
	color: #007f56;
	font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); /*20→16px*/
	letter-spacing: 0.05em;
}
.page-about figure {
	margin: 0 auto 50px;
	width: 75%;
	max-width: 400px;
}
.page-about-text {
}
.page-about-text p {
	margin: 0 0 1.6em;
}
.page-about-text p:last-of-type {
	margin: 0;
}

/*
================================
　profile
================================
*/
.page-profile {
}
.page-profile .inner {
	padding: 0 0 50px;
	background: url(../images/img_olive.png) no-repeat 100% 92%;
	background-size: 200px;
}
.page-profile h2 {
	margin: 0 0 50px;
	text-align: center;
}
.page-profile h2 span {
	font-weight: 700;
	color: #007f56;
	font-size: clamp(1rem, 0.886rem + 0.57vw, 1.313rem); /*21→16px*/
	letter-spacing: 0.1em;
}
.page-profile figure {
	margin: 0 auto 20px;
	width: 75%;
	max-width: 400px;
}
.page-profile-name {
	margin: 0 auto 40px;
	text-align: center;
}
.page-profile-name small {
	margin: 0 auto 10px;
	display: block;
	font-size: clamp(0.625rem, 0.557rem + 0.34vw, 0.813rem); /* 13→10px */
	font-weight: 700;
}
.page-profile-name span {
	font-weight: 700;
	font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem); /*28→20px*/
	letter-spacing: 0.1em;
}
.page-profile-text {
	margin: 0 0 40px;
	display: grid;
	grid-template-columns: 10% auto;
	align-items: baseline;
}
.page-profile-text p {
	font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem); /* 16→13px */
	font-weight: 700;
	line-height: 1.8
}
.page-profile-box {
	margin: 0 0 40px;
}
.page-profile-box .detail p {
	font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem); /* 16→13px */
	font-weight: 700;
}
.page-profile-box .note {
	padding-left: 10%;
}
.page-profile-box .note p {
	font-size: clamp(0.688rem, 0.619rem + 0.34vw, 0.875rem); /* 14→11px */
	line-height: 1.8
}
@media screen and (max-width: 667px) {
.page-profile .inner {
	background: url(../images/img_olive.png) no-repeat 100% 100%;
	background-size: 140px;
}
}
@media screen and (max-width: 540px) {
.page-profile-text {
	grid-template-columns: 16% auto;
}
.page-profile-box .note {
	padding-left: 16%;
}
}

/*
================================
　講座・販売
================================
*/
.page-guide {
	margin: 0 0 100px;
}
.page-guide h2 {
	margin: 0 0 50px;
	text-align: center;
}
.page-guide h2 span {
	font-weight: 700;
	color: #007f56;
	font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem); /*18→14px*/
	letter-spacing: 0.05em;
}
.page-guide figure {
	position: relative;
	margin: 0 0 50px;
	width: 100%;
	overflow: hidden;
}
.page-guide figure:before {
	display: block;
	content: "";
	aspect-ratio: 1920 / 300;
}
.page-guide figure img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.page-guide-box {
	margin: 0 0 50px;
	background: #fff;
	border: 1px solid #00835A;
	padding: 6% 8%;
}
.page-guide-box.hanbai {
	margin: 0 0 1em;
}
.page-guide .hanbai-note {
	margin: 0 0 50px;
}
.page-guide .hanbai-note p {
	line-height: 1.8;
	font-size: clamp(0.625rem, 0.58rem + 0.23vw, 0.75rem); /* 12→10px */
	font-weight: 400;
}
.page-guide-box h3 {
	margin: 0 0 1em;
	padding: 0 0 8px;
	border-bottom: 1px dashed #00835A;
	text-align: center;
}
.page-guide-box h3 span {
	font-weight: 700;
	color: #007f56;
	font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem); /*24→18px*/
	letter-spacing: 0.05em;
}
.page-guide-box p {
	font-size: clamp(0.75rem, 0.682rem + 0.34vw, 0.938rem); /*15→12px*/
	text-align: center;
	line-height: 1.8;
	font-weight: 700;
}
.page-guide-box table {
	margin: 0 auto;
}
.page-guide-box p + table {
	margin-top: 60px;
}
.page-guide-box th {
	font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem); /*16→13px*/
	font-weight: 700;
	padding-right: 1em;
	line-height: 1.8;
}
.page-guide-box td.price {
	font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem); /*16→13px*/
	font-weight: 700;
	line-height: 1.8;
}
.page-guide-box td.price small {
	font-size: clamp(0.625rem, 0.58rem + 0.23vw, 0.75rem); /* 12→10px */
	font-weight: 700;
}
.page-guide-box td.note {
	padding-top: 10px;
	line-height: 1.8;
	font-size: clamp(0.625rem, 0.58rem + 0.23vw, 0.75rem); /* 12→10px */
	font-weight: 400;
}
.toiawase-button {
	margin: 100px 0 0;
}
.toiawase-button a {
	position: relative;
	display: block;
	width: 100%;
	padding: 4%;
	background: #00835A;
	text-align: center;
}
.toiawase-button span {
	font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem); /*18→14px*/
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.01em;
	line-height: 1.6;
}
.toiawase-button a:hover, .toiawase-button a:active {
	opacity: 0.3;
	filter: alpha(opacity=30);
	transition-timing-function: ease-out;
	transition-duration: 0.6s;
}

@media screen and (max-width: 1080px) {
.page-guide figure:before {
	aspect-ratio: 2880 / 1425;
}
}
@media screen and (max-width: 667px) {
.page-guide {
	margin: 0 0 60px;
}
.page-guide-box table {
	width: 100%;
}
.page-guide-box th {
	display: block;
	width: 100%;
	padding-right: 0;
	text-align: center;
}
.page-guide-box td {
	display: block;
	width: 100%;
	text-align: center;
}
.toiawase-button {
	margin: 60px 0 0;
}
}
@media screen and (max-width: 390px) {
.page-guide-box p + table {
	margin-top: 40px;
}
}


/*
================================
　特定商取引法に基づく表記
================================
*/
.page-law {
	margin: 0 0 100px;
}
.page-law .inner {
	max-width: 1000px;
}
.page-law h2 {
	margin: 0 0 50px;
	text-align: center;
}
.page-law h2 span {
	font-weight: 700;
	color: #007f56;
	font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); /*20→16px*/
	letter-spacing: 0.05em;
}
.page-law-table {
}
.page-law-table th {
	font-weight: 700;
	padding: 16px 20px;
	width: 30%;
}
.page-law-table td {
	padding: 16px 20px;
	width: auto;
}
@media screen and (max-width: 1080px) {
.page-law-table th {
	display: block;
	width: 100%;
	padding: 16px 20px 0;
	border-bottom: none;
}
.page-law-table td {
	display: block;
	width: 100%;
	padding: 0 20px 16px;
}
}
@media screen and (max-width: 667px) {
.page-law {
	margin: 0 0 60px;
}
.page-law-table th {
	padding: 10px 0 0;
}
.page-law-table td {
	padding: 0 0 10px;
}
}