@charset "utf-8";

/*
COLORS
================================================ */
:root {
	/* Color */
	--main-color: #aacf53;
	--sub-color_01: #333;
	
	--blue: #7dcdf5;
	--dark-blue: #00A0E9;
	--navy: #1d50a2;
	--green: #009245;
	--light-yellow: #f4f1df;
	--yellow: #e1b80d;
	--light-orange: #ED945D;
	--orange: #E35F0D;
	--vermilion: #dc503c;
	--red: #E60012;
	--light-gray: #D1D5D9;
	--gray: #8B8C90;
	--dark-gray: #666666;
	--white: #fff;
	--black: #000;
}

/* 全体の設定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}  

body {
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0;
}

html {scroll-behavior: smooth;}

section {
	padding: clamp(3rem,6.5vw,5rem) 1rem;
}

/* 基本CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
img {
    max-width: 100%;
    height: auto;/*高さ自動*/
}

a {
    text-decoration-line: none;
	color: inherit;
}

a:hover,a img:hover {
    color: inherit;
    opacity: 0.8;
}

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

li {text-decoration: none;}

table {border-collapse: collapse;}

th, td {
	text-align: left;
    vertical-align: top;
}

button {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    font:inherit;
    color:inherit;
}

@media (min-width: 769px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}


.inner{
	width: 100%;
	margin-left: auto; margin-right: auto;
}
.inner.--1200{max-width: 1200px;}
.inner.--1000{max-width: 1000px;}
.inner.--800{max-width: 800px;}
.inner.--700{max-width: 700px;}

.flex-box {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	align-items: center;
}

.grid-box {
	display: grid;
	display: -webkit-grid;
	justify-content: center;
	gap: .5rem;
}

.fl-wrap {flex-wrap: wrap;}

.fl-align-top {align-items: flex-start;}
.fl-align-base {align-items: baseline;}
.fl-align-end {align-items: flex-end;}

.fl-con-bet {justify-content: space-between;}


.item {
	padding: .5rem;
	width: 100%;
}
.span-2 {flex-basis: 48%;}
.span-3 {flex-basis: calc(100% / 3);}
.span-4 {flex-basis: 25%;}

.grid-col-2 {grid-template-columns: repeat(2, 1fr);}
.grid-col-3 {grid-template-columns: repeat(3, 1fr);}
.grid-col-4 {grid-template-columns: repeat(4, 1fr);}

.gap5 {gap: 0.5rem;}
.gap10 {gap: 1rem;}
.gap20 {gap: 2rem;}


.black-bg {background-color: var(--black);}
.white-bg {background-color: var(--white);}
.light-yellow-bg {background-color: var(--light-yellow);}
.red-bg {background-color: var(--red);}
.green-bg {background-color: var(--green);}

.tr-black-bg {
	position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.pos-r {position: relative;}

.center {text-align: center!important;}
.left {text-align: left!important;}
.right {text-align: right!important;}

.font-red {color: var(--red);}

.font-bold { font-weight: bold; }
.font-small {font-size: small;}
.font12-14 {font-size: clamp(12px,2vw,14px);}
.font12-16 {font-size: clamp(12px,2vw,16px);}
.font14-16 {font-size: clamp(14px,2vw,16px);}
.font16-18 {font-size: clamp(16px,2vw,18px);}
.font18-20 {font-size: clamp(18px, 2vw, 20px);}
.font20-24 {font-size: clamp(20px, 2.5vw, 24px);}
.font24-36 { font-size: clamp(24px, 3vw, 36px); }

.indent {
	text-indent: -1em;
	padding-left: 1em;
}

@media screen and (max-width: 960px) {
    .flex960 {
        flex-direction: column;
    }
    
    .grid-box.grid-col-3.grid960,
    .grid-box.grid-col-4.grid960 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
	.flex768 {
		flex-direction: column;
	}

	.flex768.rev {
		flex-direction: column-reverse;
	}

	.grid-box.grid-col-2.grid768 {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media screen and (max-width: 560px) {
	.flex560 {
		flex-direction: column;
	}

	.flex560.rev {
		flex-direction: column-reverse;
	}

	.grid-box.grid-col-3.grid960,
	.grid-box.grid-col-4.grid960,
	.grid-box.grid-col-2.grid560 {
        grid-template-columns: repeat(1, 1fr);
    }
}

	.only-pc {display: block;}
	.only-sp {display: none;}

	.only-pc560 {display: block;}
	.only-sp560 {display: none;}

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

@media screen and (max-width: 560px) {
	.only-pc560 {display: none;}
	.only-sp560 {display: block;}
}

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


.mt0{margin-top: 0;}
.mt5{margin-top: .5rem;}
.mt10{margin-top: 1rem;}
.mt20{margin-top: 2rem;}
.mt30{margin-top: 3rem;}
.mt40{margin-top: 4rem;}
.mt50{margin-top: 5rem;}
.mt60{margin-top: 6rem;}
.mt70{margin-top: 7rem;}
.mt80{margin-top: 8rem;}
.mt100{margin-top: 10rem;}

.mb0{margin-bottom: 0;}
.mb10{margin-bottom: 1rem;}
.mb20{margin-bottom: 2rem;}
.mb30{margin-bottom: 3rem;}
.mb40{margin-bottom: 4rem;}
.mb50{margin-bottom: 5rem;}
.mb60{margin-bottom: 6rem;}
.mb70{margin-bottom: 7rem;}
.mb80{margin-bottom: 8rem;}
.mb100{margin-bottom: 10rem;}
.mb200{margin-bottom: 20rem;}

.mr10 {margin-right: 1rem;}

.mb40auto{
	margin: 0 auto 4rem;
}

.mrl-auto {
    margin-left: auto;
    margin-right: auto;
}

.mt20-40 {margin-top: clamp(2rem,5.5vw,4rem);}
.mt30-50 {margin-top: clamp(3rem,6.2vw,5rem);}
.mt30-80 {margin-top: clamp(3rem,9vw,8rem);}
.mt50-60 {margin-top: clamp(5rem,7.5vw,6rem);}
.mt60-100 {margin-top: clamp(6rem,10.5vw,10rem);}

.mb10-30 {margin-bottom: clamp(1rem,2vw,3rem);}
.mb20-40 {margin-bottom: clamp(2rem,5.5vw,4rem);}
.mb30-80 {margin-bottom: clamp(3rem,9vw,8rem);}
.mb40-60 {margin-bottom: clamp(4rem, 4vw, 6rem);}
.mb40-80 { margin-bottom: clamp(4rem, 12vw, 8rem); }
.mb60-100 {margin-bottom: clamp(6rem,10.5vw,10rem);}
.mb80-100 {margin-bottom: clamp(8rem,15.5vw,10rem);}
.mb100-140 {margin-bottom: clamp(10rem,10.2vw,14rem);}


.pt0{ padding-top: 0;}
.pt10{padding-top: 1rem;}
.pt20{padding-top: 2rem;}
.pt30{padding-top: 3rem;}
.pt40{padding-top: 4rem;}
.pt80{padding-top: 8rem;}
.pt100{padding-top: 10rem;}

.pb0{ padding-bottom: 0;}
.pd10 {padding-bottom: 1rem;}
.pb20{padding-bottom: 2rem;}
.pb30{padding-bottom: 3rem;}
.pb40{padding-bottom: 4rem;}

.pr10{padding-right: 1rem;}
.pl10{padding-left: 1rem;}

.prl0 {
	padding-left: 0;
	padding-right: 0;
}
.prl10 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.prl20 {
	padding-left: 2rem;
	padding-right: 2rem;
}

.pt20-40 {padding-top: clamp(2rem,4.5vw,4rem);}
.pt40-80 {padding-top: clamp(4rem,9vw,8rem);}
.pt50-150 {padding-top: clamp(5rem,12vw,15rem);}

.pb10-30 {padding-bottom: clamp(1rem,2vw,3rem);}
.pb20-40 {padding-bottom: clamp(2rem,4.5vw,4rem);}
.pb40-80 {padding-bottom: clamp(4rem,9vw,8rem);}
.pb100-140 {padding-bottom: clamp(10rem,10.2vw,14rem);}

.no-wrap {display: inline-block!important;}

.youtube {
	width: 100%;
    aspect-ratio: 16 / 9;
}

.youtube iframe {
    width: 100%;
    height: 100%;
}

/* パンくずリスト */
.breadcrumb {
    display: flex;
    align-items: center;
    max-width: 1200px;
    padding: 0 2rem;
    margin: 1rem auto 0;
	flex-wrap: wrap;
}
.breadcrumb li {
    padding: 0 .5rem;
    margin-bottom: 0;
    font-size: clamp(12px, 2vw, 14px);
	color: var(--gray);
}
.breadcrumb li::after {
    content: "／";
    padding-left: .7rem;
}
.breadcrumb li:last-of-type::after {
	display: none;
}
.breadcrumb li a img {
	/*display: inline-block;*/
    width: 1.2em;
}
.breadcrumb li a :not(img) {
    color: var(--blue);
    border-bottom: 1px solid var(--blue);
}

/*ヘッダー
-------------------------------------*/
header {
	width: 100%;
	height: 100px;
	background-color: var(--main-color);
	color: var(--white);
	position: -webkit-sticky;
	position: sticky;
	top: 0;
    left: 0;
	z-index: 5;
}

header .head-area {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transform: translateY(10%);
}

header .head-nav {
	display: flex;
	justify-content: center;
	align-items: center;
}

#nav-area {padding: 0 1rem;}

#nav-area ul {
	display: flex;
	justify-content: center;
}

#nav-area ul li {
	padding: 0 .5rem;
}

#nav-area ul li a {color: var(--white);}

/* ハンバーガーボタン */
.openbtn {display: none;}


@media screen and (max-width: 1200px) {
	header .head-area {
		flex-direction: column;
		transform: none;
		height: 100%;
	}
	
	header h1 {margin: 0 auto; font-size: clamp(1.5em, 3vw, 2em);}
	
	header .head-nav {padding-bottom: 1rem; padding-top: 1rem;}
}

@media screen and (max-width: 960px) {
	
	header .head-area {transform: translateY(10%);}
	
	#nav-area {
		display: none;
		position: absolute;
		top: 90px;
		width: 100%;
		padding: 0;
	}
		
	#nav-area ul {
		display: block;
		background-color: var(--main-color);
	}
	
	#nav-area ul li {
		border-bottom: 1px solid var(--white);
		text-align: center;
		padding: 1rem;
	}
		
	#nav-area ul li:last-of-type {border-bottom: none;}
	
	
	/* ハンバーガーボタン */
	.openbtn {
		display: block;
		position: absolute;
		right: 2%;
		top: 50%;
		transform: translateY(-50%);
		background-color: var(--sub-color_01);
		border-radius: 5px;
		cursor: pointer;
		width: 50px;
		height: 50px;
	}
	
	.openbtn span {
		display: inline-block;
		transition: all .4s;
		position: absolute;
	}
	
	.openbtn span:nth-of-type(1),.openbtn span:nth-of-type(3) {
		height: 2px;
		background-color: #fff;
		width: 62%;
		left: 10px;
	}
	
	.openbtn span:nth-of-type(1) {
		top:13px;	
	}

	.openbtn span:nth-of-type(2) {
		top:19px;
		left:11px;
		font-size:0.6rem;
		text-transform: uppercase;
		color: #fff;
	}

	.openbtn span:nth-of-type(3) {
		top:36px;
	}

	/*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
	.openbtn.active span:nth-of-type(1) {
		top: 18px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}

	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}

	.openbtn.active span:nth-of-type(3){
		top: 30px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
}

/*フッター
-------------------------------------*/
footer {
	background-color: var(--main-color);
	color: var(--white);
	padding: clamp(.5rem, 1.5vw, 1rem) 1rem;
}

.copyright {font-size: 14px;text-align: center;}

/*トップページ
-------------------------------------*/
/* FVスライド */
.fv-img {
	text-align: center;
	position: relative;
}

.fv-slider-ttl {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	margin: 0;
	max-width: 30%;
}

.fv-img img {
	width: 100%;
}

.fv-slider {
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.link-btn__round-btn {
	display: inline-flex!important;
    align-items: center;
	justify-content: space-between;
	background-color: var(--sub-color_01);
	border: 1px solid var(--sub-color_01);
    max-width: 100%;
    width: clamp(220px, 21.5vw, 280px);
    min-height: 65px;
    border-radius: 100px;
    margin-bottom: 1rem;
	color: var(--white);
	font-size: clamp(18px, 2vw, 20px);
	font-weight: 500;
    transition: all 0.3s;
}
.link-btn__round-btn:hover {
	background-color: var(--white);
	color: var(--sub-color_01);
}

/*下層ページ
-------------------------------------*/

/*投稿ページ
-------------------------------------*/
/* ページネーション */
.nav-pn-links {
    display: flex;
    justify-content: space-between;
	color: var(--gray);
}

.nav-pn-links a {position: relative;}
.nav-pn-links a:hover {opacity: 1;}

.nav-pn-links a::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gray);
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: left top;
}

.nav-pn-links a:hover::after {transform: scale(1, 1);}

@media screen and (max-width: 560px) {
	.nav-pn-links {
        font-size: .9em;
    }
}


/* サンプルページ専用
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-sample * {
	margin: 0;
}
.page-sample th,.page-sample td {
	text-align: start;
    vertical-align: baseline;
}
.page-sample th {
	text-align: center;
}

/* 送料ページ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.postage-header {
	background-color: #86bc43;
	display: flex;
    align-items: center;
}
.postage-header h1 {
	width: 100%;
    max-width: 170px;
    margin: 0 auto;
}
.postage-header h1 img {
	width: 100%;
}
.postage-footer {
	background-color: #000;
	color: #818181;
}
.page-postage {
	background: url('../img/common/body_bg.jpg') repeat-y center / cover;
}

/* 説明欄 */
.calendar iframe {max-width: 100%;height: 360px;}
.map-bg-img {
	display: inline-block;
	width: 20px;
	height: 20px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin-left: .3rem;
    vertical-align: bottom;
}

/* 送料表 */
.fee-table {
	width: 100%;
	max-width: 1000px;
	border: 2px solid #9fa0a0;
	background-color: var(--white);
	margin: 0 auto;
}
.fee-table :is(th,td) {
	width: calc(100% / 9);
	border-bottom: 2px solid #9fa0a0;
	border-right: 2px solid #9fa0a0;
	padding: 1rem;
	text-align: center;
    vertical-align: middle;
}
.fee-table th {
	background-color: #e6e6e6;
	font-size: clamp(16px,2vw,18px);
	white-space: nowrap;
}
.fee-table td {
}

.fee-table .gray {background-color: #e6e6e6;}

.fee-table.fee-table--sp :is(th,td) {
	width: calc(100% / 3);
}

.prefectures {min-height: 180px;}

.region-nav-area nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem;
}
.region-nav-area button {
	padding: 1rem;
	text-align: center;
	background-color: #e6e6e6;
	font-size: clamp(18px,2vw,20px);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .3s, color .3s;
}
.region-nav-area button:hover {
	background-color: #86bc43;
	color: var(--white);
}

/* 営業所止め */
/* アコーディオンスニペット */
.accordion-container {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.accordion-container li {margin: 1rem 0; padding: 0 clamp(.5rem,2.5vw,2rem);}
.accordion-container .accordion-ttl {
    width: 100%;
	position: relative;
	margin: 0;
    padding: 1.2rem 2rem;
    color: var(--white);
	font-size: clamp(18px, 2vw, 20px);
	background-color: #86bc43;
	transition: all .5s ease;
	display: flex;
    align-items: center;
    justify-content: space-between;
}
.accordion-container .accordion-ttl span:not([class]) {
	width: 100%;
}
.accordion-btn {
	display: inline-block;
	width: 30px;
	aspect-ratio: 1 / 1;
	position: relative;
	background-color: var(--white);
}
.accordion-container .accordion-ttl .accordion-btn::after {
	content: "";
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    aspect-ratio: 2 / 1;
	background-color: #86bc43;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	transition: all .3s ease;
}
.accordion-container .accordion-ttl.close .accordion-btn::after {
	transform: translate(-50%, -50%) rotate(180deg);
}
.accordion-container .accordion-inner {
	display: none;
	background-color: var(--white);
	padding: 1rem;
	text-align: left;
}
/* アコーディオンスニペットここまで */

.accordion-inner table {
	width: 100%;
	border: 2px solid #9fa0a0;
    background-color: var(--white);
    margin: 0 auto;
}
.accordion-inner table :is(th,td) {
	border-bottom: 2px solid #9fa0a0;
    border-right: 2px solid #9fa0a0;
    padding: 1rem;
    vertical-align: middle;
}
.accordion-inner table th {
	background-color: #e6e6e6;
    font-size: clamp(16px, 2vw, 18px);
	text-align: center;
    white-space: nowrap;
}
.accordion-inner table tr th:first-of-type {
	width: calc(100% / 3);
}
.accordion-inner table tr th span {font-size: .8em;}