@charset "utf-8";
/*
	Theme Name: Welcart Basic Child
	Description: Welcart Basic Child Theme
	Author: Collne Inc
	Template: welcart_basic
	Version: 1.0.0
*/

/* 共通CSSファイル */

html {
	scroll-behavior: smooth;
}

@font-face {
    src: url('webfonts/NotoSansJP-Regular.woff') format("woff"),
         url('webfonts/NotoSansJP-Regular.woff2') format("woff2");
    font-family: "NotoSans Regular";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    src: url('webfonts/NotoSansJP-Medium.woff') format("woff"),
         url('webfonts/NotoSansJP-Medium.woff2') format("woff2");
    font-family: "NotoSans Medium";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

body, button {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
/* テキスト文字の標準フォントを設定 */
    font-family: "NotoSans Regular", 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo, "sans-serif";
	color: #333;
    font-size: 16px;
    line-height: 2;
	background: #fff6e5;
}
.medium {
    font-family: "NotoSans Medium", "sans-serif";
}

h1, h2, h3, h4, h5, h6 {
    font-family: "NotoSans Medium";
    font-weight: normal;
	position: relative;
	letter-spacing: 5%;
	line-height: 1.6;
}
#secondary h3 {
	margin-bottom: 0!important;
	padding-bottom: 0!important;
	border-bottom: none!important;
}

section,
.relative {
	position: relative;
}

img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}
.round {
	border-radius: 20px;
}
@media screen and (max-width: 767px) {
	.sp-right-round {
		padding-right: 8vw;
	}
	.sp-right-round img {
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;		
	}
	.sp-left-round {
		padding-left: 8vw;
	}
	.sp-left-round img {
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;		
	}
}
@media screen and (min-width: 768px) {
	.round,
	.sp-right-round img,
	.sp-left-round img {
		border-radius: 30px;
	}
}
.round15 {
	border-radius: 15px;
}
.circle {
	border-radius: 50%;
}

p {
    margin: 0 0 1em;
}
p:last-of-type {
    margin: 0;
}

dl, dd {
	margin: 0;
}
.flex dl {
	display: flex;
}
.flex dt {
	flex-shrink: 0;
}
.dt-medium dt {
	font-family: "NotoSans Medium", "sans-serif";
}

.hl-base {
	font-size: 6vw;
}
@media screen and (min-width: 360px) {
	.hl-base {
		font-size: 22px;
	}
}
@media screen and (min-width: 768px) {
	.hl-base {
		font-size: 25px;
	}
	.b-font {
		font-size: 18px;
	}
}
.green {
	color: #133F03;
}
.white {
	color: #fff;
}
.f18 {
	font-size: 18px;
}
.f20 {
	font-size: 20px;
}
.s80 {
	font-size: 80%;
}
.mb1 {
	margin-bottom: 1em!important;
}
.mb3 {
	margin-bottom: 3em!important;
}
.right {
	text-align: right;
}
.center {
	text-align: center;
}
.auto {
	margin: auto;
}
.w100 {
	width: 100%;
}

a {
	color: #333;
	text-decoration: underline;
	transition: .3s;
}
a.under-none {
	text-decoration: none;
}
a:focus {
	outline: none;
}
a:hover {
	color: #D3342E;
}
.link:hover {
    opacity: .7;
}
.link, .main-btn {
    position: relative;
    transition: .3s;
}
.link a, .main-btn a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main-btn {
	font-family: "NotoSans Medium";
	font-size: 16px;
	width: fit-content;
	letter-spacing: 5%;
	line-height: 1.5;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	cursor: pointer;
}
.main-btn::after {
	content: '\f35a';
	font-family: "Font Awesome 7 Free";
	color: #D3342E;
	font-weight: 900;
	font-size: 145%;
	margin: 0 0 0 8px;
}
.main-btn-txt {
	padding: 0 0 3px;
}
.main-btn:hover {
	color: #D3342E;
}
.main-btn.newtab {
	grid-template-columns: auto 1fr auto;
}
.main-btn.newtab::before {
	content: '\f08e';
	font-family: "Font Awesome 7 Free";
	color: #D3342E;
	font-weight: 900;
	font-size: 120%;
	margin: 0 10px 0 0;
}

ul, li {
	list-style: disc;
}
ol, ol li {
	list-style: decimal;
}
ul, ol {
    padding-left: 1.5em;
}
ul.list-none, ul.list-none li {
    list-style: none;
}
ul.list-none {
    margin: 0;
    padding: 0;
}
li {
    line-height: 1.6;
}
li:not(:last-child) {
    margin: 0 0 .5em;
}
th,td {
	border: none!important;
	padding: 15px 20px!important;
	line-height: 1.6;
	color: #333!important;
}
th {
	background: #FAECD1!important;
	font-weight: normal !important;
	font-family: "NotoSans Medium", "sans-serif";
}
td {
	background: #fff!important;
}
@media screen and (max-width: 767px) {
	table {
		border: none!important;
	}
	tr {
		border-top: 2px solid #EDD3A1;
	}
}
@media screen and (min-width: 768px) {
	th,td {
		border: 1px solid #EDD3A1!important;
	}
}

.wrap {
    box-sizing: content-box;
    margin: auto;
    position: relative;
/* 左右の余白を設定 */
    padding: 0 8vw;
}
.block {
	display: block;
}
.inline-b {
	display: inline-block;
}
.__pc, .__pc-inline {
    display: none;
}
.__sp-inline {
	display: inline-block;
}
.d-none {
    display: none;
}
a[href*="tel:"] {
	text-decoration: none;
}
@media screen and (max-width: 767px) {
    .wrap.sp-none {
        padding: 0;
    }
	/* 左右の余白を設定 */
	.sp-side {
		padding: 0 8vw;
	}
	.sp-left {
		margin-left: 10px;
	}
}
@media screen and (min-width: 768px) {
    .wrap {
        max-width: 1100px;
		padding: 0 30px;
    }
	.min {
        max-width: 800px!important;
    }
    
    .__pc {
        display: block;
    }
    .__pc-inline {
        display: inline-block;
    }
    .__sp, .__sp-inline {
        display: none;
    }
	.center-pc {
		text-align: center;
	}
    
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
    }
}

input[type="password"],
input[type="text"],
input[type="reset"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	background-color: #fff;
	line-height: 1.5;
	min-height: 50px;
	border: 1px solid #333 !important;
	border-radius: 10px !important;
	letter-spacing: 10%;
	font-size: 18px;
}
#adminbar-search {
	border: none!important;
}
input[type="password"],
input[type="text"],
input[type="reset"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"] {
	max-width: 100%;
	padding: 0 .714em;
}
input[type="radio"] {
	content: "";
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0 4px 0 0;
	border: 1px solid #999;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-khtml-border-radius: 50%;
	border-radius: 50%;
	outline: none;
	background-color: #fff;
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
input[type="radio"]:checked::after {
	content: "";
	display: block;
	position: absolute;
	top: 2px;
	left: 2px;
	width: 10px;
	height: 10px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-khtml-border-radius: 50%;
	border-radius: 50%;
	background: #333;
}
input[type="checkbox"] {
	transform: scale(1.8);
	margin: 0 15px 0 0;
}
select {
    min-width: 230px;
    padding: .4em calc(.8em + 30px) .4em .8em;
    cursor: pointer;
}
textarea {
	width: 100%;
	min-height: 10em;
	padding: .714em;
	outline: none;
	resize: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
option {
	background-color: #fff;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea {
	-webkit-transition: all .3s;
	transition: all .3s;
	outline: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus {
	border: 1px solid #aaa;
	box-shadow: 0 0 7px #aaa;
}
input[type="submit"] {
	font-size: 18px;
	background: #D3342E;
	border: none;
	color: #fff;
	padding: .8em;
	cursor: pointer;
	width: fit-content;
	font-family: "NotoSans Medium", "sans-serif";
	border-radius: 10px;
	text-decoration: none;
}
input[type="submit"]:hover {
	background: #D3544F;
}

/* ページ内リンク用 */
.inpage-link {
	display: block;
	position: relative;
	top: -80px;
	visibility: hidden;
}
@media screen and (min-width: 768px) {
	.inpage-link {
		top: -9vw;
	}
}
@media screen and (min-width: 1600px) {
	.inpage-link {
		top: -120px;
	}
}

/* Scroll Hintを使用する場合*/
.scroll-hint-icon {
    width: 140px!important;
    left: 50%!important;
    transform: translateX(-50%);
    height: 90px!important;
	background: rgba(197,160,88,.9)!important;
	top: 20% !important;
}
/* スクロールバー全体のデザイン（Chrome, Edge, Safari） */
.js-scroll::-webkit-scrollbar {
	height: 7px;
}
.js-scroll::-webkit-scrollbar-thumb {
	background: #EDD3A1;      /* バーの色 */
	border-radius: 10px;   /* 角丸 */
}
.js-scroll::-webkit-scrollbar-track {
	background: #FFF6E5;   /* 背景色 */
}
@media screen and (min-width: 768px) {
	.js-scroll::-webkit-scrollbar {
		height: 15px;
	}
}

/* CF7を使用する場合*/
.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}
.wpcf7-spinner {
	display: none;
}


/* 背景設定 */
@media screen and (max-width: 767px) {
	body.home,
	.header-block,
	.c-main,
	.footer-inner,
	.site-content,
	.base-bg {
		background: #FFF6E5 url('./assets/image/bg__sp.png');
	}
}
@media screen and (min-width: 768px) {
	body.home,
	.header-block,
	.c-main,
	.footer-inner::before,
	.site-content,
	.base-bg {
		background: #FFF6E5 url('./assets/image/bg.png');
	}
}


/* カーブ曲線 */
.curve {
	width: 100%;
	height: 17vw;
	background: transparent;
	overflow: hidden;
}
.curve svg {
	width: 100%;
	height: 100%;
	display: block;
}
.curve-type1 .curve-fill {
	fill: #fff6e5;
}
.curve-type1 .curve-line {
	fill: none;
	stroke: #EDD3A1;
	stroke-width: 4;
	vector-effect: non-scaling-stroke;
}
.curve-type2 .curve-fill {
	fill: rgba(237,211,161,.3);
}
.curve-bg {
	background: rgba(237,211,161,.3);
}
@media screen and (min-width: 768px) {
	.curve {
		height: 13vw;
	}
}


/* Scroll 矢印 */
.scroll-arw {
	display: flex;
	align-items: center;
	width: fit-content;
	margin: 0 0 0 auto;
}
.scroll-arw::before {
	content: 'scroll';
	color: #133F03;
	font-size: 12px;
}
.scroll-arw::after {
	content: '';
	background: #133F03;
	width: 50px;
	height: 10px;
	display: block;
	clip-path: polygon(0 55%, 90% 55%, 80% 12%, 82% 0, 100% 70%, 0 70%);
	margin: 0 0 0 10px;
}


/* 野菜アイコン */
.daikon::before,
.hakusai::before,
.nasu::after,
.kabu::before,
.renkon::before,
.kyuri::after {
	content: '';
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	z-index: 2;
}
.daikon::before {
	background-image: url('./assets/image/icon/daikon.png');
}
.hakusai::before {
	background-image: url('./assets/image/icon/hakusai.png');
}
.nasu::after {
	background-image: url('./assets/image/icon/nasu.png');
} 
.kabu::before {
	background-image: url('./assets/image/icon/kabu.png');
}
.renkon::before {
	background-image: url('./assets/image/icon/renkon.png');
}
.kyuri::after {
	background-image: url('./assets/image/icon/kyuri.png');
}


/* header
--------------------------------------------*/
/* スクロールしたら固定 */
.header-block.fixed {
    position: fixed!important;
    top: 0;
    left: 0;
    width: 100%;
	z-index: 9999;
    background: linear-gradient(to bottom, #FFF6E5 70%, transparent 100%)!important;
}
.header-block {
	font-size: 18px;
	border-bottom: none!important;
	margin-bottom: 0!important;
}
@media screen and (min-width: 768px) {
	.header-block {
		font-size: 1.1vw;
	}
}
@media screen and (min-width: 1600px) {
	.header-block {
		font-size: 18px;
	}
}

/* ヘッダーメニュー */
.header-wrap {
	height: 70px;
}
.header-logo {
	width: 150px;
	position: absolute;
	top: 12px;
	left: 20px;
	z-index: 9999;
}
.header-nav .sub-menu {
	margin: .8em 0 0;
}
.menu-eng {
	font-size: 88%;
	display: block;
	letter-spacing: 10%;
}
.menu-jp:hover {
	color: #D3342E;
	transition: .3s;
}
.hds-area {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 35px;
}
@media screen and (max-width: 370px) {
	.hds-area {
		font-size: 4.8vw;
	}
}
.hds-shopbtn {
	width: 8.2em;
	height: 8.2em;
	background: #133F03;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	font-size: 88%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 .7em;
}
#hds-member .hds-name::after {
	content: '\f007';
}
#hds-incart .hds-name::after {
	content: '\f07a';
}
.hds-shopbtn:hover {
	opacity: 1;
	background: #D3342E;
}
.hds-name::after {
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 2.3em;
	display: block;
	line-height: 1.2;
}
.hds-quant {
	color: #133F03;
	background: #fff;
	font-size: 80%;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	border: 1px solid;
	position: absolute;
	bottom: 3.9em;
	right: 3em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.menu-item a {
	text-decoration: none;
	letter-spacing: 5%;
}
@media screen and (max-width: 767px) {
	.header-menu-ul li {
		position: relative;
		border-top: 1px dashed #133F03;
		margin: 0;
	}
	.header-menu-ul a {
		display: block;
		padding: 1em 0 1em .5em;
	}
	.header-menu-ul a::after {
		content: '\f35a';
		font-family: "Font Awesome 7 Free";
		color: #D3342E;
		font-weight: 900;
		font-size: 1.3em;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.header-menu-ul li:last-child {
		border-bottom: 1px dashed #133F03;
	}
}
@media screen and (min-width: 768px) {
	.header-wrap {
		height: 7.7em;
	}
	.header-logo {
		width: 15em;
		top: 3.3em;
		left: 3.3em;
	}
	.header-menu {
		max-width: 850px;
		margin: 0 auto;
		padding: 2.3em 0 0;
	}
	.header-menu-ul {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.header-menu-ul li {
		margin: 0 1em;
	}
	.hds-area {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
	}
	.hds-shopbtn {
		width: 12em;
		height: 6em;
		border-radius: 0 0 10em 10em;
		margin: 0;
	}
	.hds-quant {
		bottom: 2.6em;
		right: 5em;
	}
}


/* メニュー ホバー時の動き */
@media screen and (min-width: 768px) {
	.header-nav .sub-menu {
		visibility: hidden;
		opacity: 0;
		transition: all .3s;
		position: absolute;
		top: 3.2em;
		left: 0;
		padding: 0;
		width: 10em;
		background: #fff6e5;
		z-index: 999;
		margin: 0;
		border: 2px solid #EDD3A1;
	}
	.header-nav li {
		position: relative;
	}
	.header-nav li:hover .sub-menu {
		visibility: visible;
		opacity: 1;
	}
	.header-nav li a {
		padding: .5em 0;
	}
	.header-nav .sub-menu li {
		margin: 0;
		list-style: none;
	}
	.header-nav .sub-menu a {
		display: block;
		padding: .8em;
	}
}

@media screen and (max-width: 767px) {
	/* スマホメニュー　右からスライド表示 */
    .header-menu {
		position: fixed;
		top: 0;
		right: -120%;
		width: 100%;
		background: #fff6e5 url('./assets/image/bg__sp.png');
		margin: 0;
		padding: 110px 8vw 150px;
		transition: all 0.6s;
		height: 100vh;
		z-index: 9998;
    }
	.header-menu.active {
		overflow-y: scroll;
		right: 0;
	}
	
	/* ハンバーガーアイコン */
	.hamb-icon {
		height: 50px;
		width: 50px;
		background: #133F03;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border-radius: 50%;
		border: 1px solid #133F03;
		position: absolute;
		top: 10px;
		right: 20px;
		padding-top: 12px;
		z-index: 9999;
    }
	.hamb-icon.open {
		background: #fff;
	}
	
	/* ハンバーガーのバー */
    .hamb-bar {
        position: relative;
        width: 25px;
        height: 15px;
        cursor: pointer;
        z-index: 9999;
    }
	.hamb-bar::before {
		content: 'MENU';
		color: #fff;
		font-size: 10px;		
		position: absolute;
		top: -22px;
		left: 50%;
		transform: translateX(-50%);
	}
	.hamb-icon.open .hamb-bar::before {
		content: 'CLOSE';
		color: #133F03;
	}
    .bar-line {
        background: #fff;
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
        transition: all .4s;
    }
    .bar-line.top {
        top: 0;
    }
    .bar-line.middle {
        top: 50%;
        transform: translateY(-50%);
    }
    .bar-line.bottom {
        bottom: 0;
    }

	/* オープン時のバーアニメーション */
    .hamb-icon.open .bar-line.top, .hamb-icon.open .bar-line.bottom {
        background: #133F03;
        top: 50%;
    }
    .hamb-icon.open .bar-line.top {
        transform: translateY(-50%) rotate(-45deg);
    }
    .hamb-icon.open .bar-line.middle {
        display: none;
    }
    .hamb-icon.open .bar-line.bottom {
        bottom: auto;
        transform: translateY(-50%) rotate(45deg);
    }
}


/* footer
--------------------------------------------*/
.footer-block {
	position: relative;
	color: #333;
	padding: 0 !important;
	background: transparent;
	margin-top: -16vw;
}
.footer-inner {
	font-size: 16px;
}
.footer-wrap {
	padding: 45px 0 0;
}
.footer-main {
	margin: 0 0 50px;
}
.footer-logo {
	width: 220px;
	margin: 0 auto 40px;
}
.footer-info dl {
	display: flex;
}
footer a {
	color: #333;
}
.footer-nav {
	width: auto;
	padding: 0 !important;
	text-align: center;
}
footer nav li {
	width: auto;
	padding: 0 0 10px !important;
	float: none;
}
.footer-menu-ul a {
	position: relative;
}
.footer-menu-ul a:hover {
	color: #D3342E;
}
.footer-menu-ul a:hover::after {
	content: '\f35a';
	font-family: "Font Awesome 7 Free";
	color: #D3342E;
	font-weight: 900;
	position: absolute;
	font-size: 1.1em;
	top: 0;
	right: -1.5em;
}
.footer-nav-after {
	margin: 15px 0 50px;
	border-top: 1px solid #133F03;
	padding: 20px 0 0;
}

/* Copyright */
.footer-copy {
	text-align: center;
	font-size: 90%;
}

@media screen and (max-width: 767px) {
	.footer-info {
		max-width: 270px;
		margin: auto;
	}
	.footer-nav {
		max-width: 200px;
		margin: auto !important;
	}
	.footer-copy {
		padding: 0 0 50px;
	}
}
@media screen and (min-width: 768px) {
	.footer-block {
		margin-top: -12vw;
	}
	.footer-inner {
		position: relative;
		font-size: 1.8vw;
	}
	.footer-inner::before {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 2vw;
		left: 0;
	}
	.footer-wrap {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 0 0 4em;
		margin-top: -2vw;
	}
	.footer-main {
		margin: 0 5em 0 0;
	}
	.footer-logo {
		width: 17.5em;
		margin: 0 0 2.2em;
	}
	.footer-nav {
		display: flex;
		align-items: flex-end;
		margin: 0 !important;
		text-align: left;
	}
	.footer-nav-after {
		margin: 0 4.3em;
		border-top: none;
		padding: 0;
	}
}
@media screen and (min-width: 900px) {
	.footer-inner {
		font-size: 16px;
	}
}

/* Page top */
.page-top {
	position: fixed;
	bottom: 10px;
	right: 20px;
	z-index: 999;
}
.page-top-btn {
	background: #fff;
	border: 1px solid;
	font-size: 10px;
	line-height: 1.2;
	color: #EDD3A1;
	text-align: center;
	width: 5em;
	height: 5em;
	border-radius: 50%;
}
.page-top-btn::before {
	content: '\f35b';
	font-family: "Font Awesome 7 Free";
	color: #EDD3A1;
	font-weight: 900;
	display: block;
	font-size: 1.5em;
	line-height: 1.2;
	padding: .2em 0 0;
}
@media screen and (min-width: 768px) {
	.page-top {
		bottom: 30px;
		right: 30px;
	}
	.page-top-btn {
		font-size: 16px;
	}
}


/* #main-content
--------------------------------------------*/
.main-content {
	background: #fff6e5;
}
.main-title,
.member_page_title,
.cart_page_title {
	font-size: 23px;
	background: #FAECD1;
	padding: 1.5em 8vw !important;
	text-align: center;
	line-height: 1.6;
	letter-spacing: 5%;
}
.c-main {
	padding: 60px 0 0;
}
.inner-content {
	padding: 0 0 16vw;
}
.main-block {
	margin: 0 0 120px;
}
#content {
	padding: 0;
}
@media screen and (min-width: 768px) {
	.main-title,
	.member_page_title,
	.cart_page_title {
		font-size: 1.9vw;
		padding: 2.2em 1em !important;
	}
	.c-main {
		padding: 5vw 0 0;
	}
	.inner-content {
		padding: 0 0 12vw;
	}
	.main-block {
		margin: 0 0 150px;
	}
}
@media screen and (min-width: 1600px) {
	.main-title,
	.member_page_title,
	.cart_page_title {
		font-size: 30px;
	}
	.c-main {
		padding: 80px 0 0;
	}
}