@charset "utf-8";

/* *****************************
 * 色調
 *
 * パターン：秘色（ひそく・ひしょく）#00708E
 *
 * ベース：#C94761
 * 薄色：#FAEDEF (255,237,239)
 * **************************** */

/* *****************************
 * CIスタイル
 * **************************** */

:root {
	/*
	--col-ci1:201,71,97;
	--col-ci2:255,237,239;
	*/
	--col-ci1:231,57,114;
	--col-ci2:255,245,249;
	--col-ci3:255,250,233;
	--col-ci4:96,96,96;
}

.bg-col-ci1 {
	--bg-col:var(--col-ci1);
	--ft-col:var(--col-white);
}

.bg-col-ci2 {
	--bg-col:var(--col-ci2);
}

.bg-col-ci3 {
	--bg-col:var(--col-ci3);
}

.ft-col-ci1 {
	--ft-col:var(--col-ci1);
}
.ft-col-ci4 {
	--ft-col:var(--col-ci4);
}

.bd-col-ci1 {
	--bd-col:var(--col-ci1);
}
.bd-col-ci4 {
	--bd-col:var(--col-ci4);
}

.hover-col-ci1:hover {
	background-color:rgb(var(--col-ci1));
	color:rgb(var(--col-white)) !important;
}

html {
	--fs-default: var(--fs-130) !important;
	font-family: var(--fm-mintyo);
	
}

/* *****************************
 * システムクラス
 * **************************** */

/* OKの場合 */
.complete {
	margin:1em;
	padding:1em;
	
	border:#666 solid 1px;

	border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
}

/* *****************************
 * 装飾クラス
 * **************************** */
 
/* *****************************
 * ヘッダ 
 * **************************** */
header > nav {
    position:relative;
}

header > nav:before {
    content: "";
    position: absolute;
    padding: 0;
    margin: 0;
    background-color: rgb(var(--bg-col));
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translate(-50%,0);
    z-index: -1;
}


/* *****************************
 * フッタ
 * **************************** */
footer {
	margin: 2em 0em 0em 0em;
	padding: 0em;
	display:block;
	
	clear:both;
	
	text-align:center;
	
}

footer address {
	margin: 0em;
	padding: 1em;
	font-style:normal;
	line-height: 1.5em;
	color:#fff;
	background-color:#C94761;
	/*
	border-top-width: 1em;
	border-top-style: solid;
	border-top-color: #5E6634;
	*/
}

footer address a {
	margin: 0em;
	padding: 0em;
	line-height: 1.5em;
	font-size: larger;
	color: #FFF;
}

footer ul {
	margin:0em;
	padding: 0em;
	list-style-type: none;
	text-align:center;
}

footer li {
	margin: 0em;
	padding: 0em;
	display:inline-block;
}

footer li a {
	margin: 0em;
	padding: 1em;
	color: #666;
	display:inline-block;
}

footer li a:hover {
	text-decoration:underline;
	color: #fff;
	background:#C94761;
	opacity:70%;
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	footer address {
		font-size: 10pt;
	}
}

/* *****************************
 * Facebook対応
 * **************************** */
.fb-page {
	width:290px;
	height:300px;
}

.fb-like-box {
	width:290px;
	height:300px;
}

/* ****************************** *
 * スプラッシュ
 * ****************************** */
.splash {
	margin: 0em;
	padding: 0em;
	/*height:calc(100vw / 3);*/
	overflow:hidden;
	position:relative;
	
	background-color:#FAEDEF;

}

/* スプラッシュの直下の画像 */
.splash > img {
	width:100%;
		
	/* 上下中央に合わせる */
	position: absolute;
	min-height:100%;
	min-width:100%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

/* ****************************** *
 * ラベル
 * ****************************** */

/* ラベル:お知らせ */
.mark.round {
	border:1px solid rgb(var(--bd-col));
	
	text-align:center;
}

/* ラベル:イベント */
.event .mark.round {
	--ft-col:var(--col-white);
	--bg-col:var(--col-warning);
	color:rgb(var(--ft-col));
	background-color:rgb(var(--bg-col));
	
	border:none;
}

/* ラベル:ピックアップ */
.pickup .mark.round {
	--ft-col:var(--col-white);
	--bg-col:var(--col-black);
	color:rgb(var(--ft-col));
	background-color:rgb(var(--bg-col));
	
	border:none;
}

/* ラベル:バラ栽培 */
.diaryrose .mark.round {
	--ft-col:var(--col-white);
	--bg-col:var(--col-ci1);
	
	color:rgb(var(--ft-col));
	background-color:rgb(var(--bg-col));
	
	border:none;
}

/* ラベル:料理 */
.lifefood .mark.round {
	--ft-col:var(--col-white);
	--bg-col:var(--col-danger);
	color:rgb(var(--ft-col));
	background-color:rgb(var(--bg-col));
	
	border:none;
}

/* ラベル:日誌 */
.diaryplants .mark.round {
	--ft-col:var(--col-white);
	--bg-col:var(--col-success);
	color:rgb(var(--ft-col));
	background-color:rgb(var(--bg-col));
	
	border:none;
}


/* ****************************** *
 * 標準
 * ****************************** */
main {
	margin: 0em;
	padding: 0em;

	text-align:left;
	
	--ft-col:var(--col-ci4);
	color:rgb(var(--ft-col));
}

main a {
	--ft-col:var(--col-black);
	color:rgb(var(--ft-col));
}


main .splash:before {
    content:"";
    display: block;
    padding-top: 40%; /* 高さを幅の75%に固定 */
}

/* ****************************** *
 * 標準:ナビ
 * ****************************** */

/*
main > nav {
    position:relative;
}

main > nav:before {
    content: "";
    position: absolute;
    padding: 0;
    margin: 0;
    background-color: rgb(var(--bg-col));
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translate(-50%,0);
    z-index: -1;
}
*/

/* ****************************** *
 * 標準:ホーム用
 * ****************************** */

.home {
}

.home .benefits {

}

/* ****************************** *
 * 地図マップ（GoogleMap用)
 * ****************************** */
.map {
	position: relative;
    width: 100%;
}

.map::before {
    content:"";
    display: block;
    padding-top: 75%; /* 高さを幅の75%に固定 */
}

.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ****************************** *
 * コンテンツ：連絡先
 * ****************************** */
.contact p {
	/* 単語内の禁則処理はせず、要素毎に改行 */
	word-break: keep-all;
}



/* ****************************** *
 * リスト：商品
 * ****************************** */
.col-item {
	--col:11.8rem;
}

/* ****************************** *
 * ストア
 * ****************************** */


.letterpack {
	background-color:rgb(var(--col-white));
}

.brandnew {
	color:rgb(var(--col-white));
	background-color:rgb(var(--col-r1));
	border:none;
}

.secret {
	color:rgb(var(--col-white));
	background-color:rgb(var(--col-gr));
	border:none;
}


/* ***************************** *
 * calendar: カレンダー
 * ***************************** */

.calendar {
    margin: 0em;
    padding: 0.5em;
    position: relative;
}

.calendar caption {
	margin: 4px;
}

.calendar table {
	width: 100%;
	border-collapse: collapse;
	
	border-spacing: 0;
}

.calendar table, td, th {
	border:rgb(var(--bd-col)) 1px solid;
}

.calendar th {
	position: relative;
	height: 3em;
	text-align:center;
	/*border-bo	ttom:thick solid #999;*/
}

.calendar th.daysun {
	color: #F00;
}

.calendar td {
	position: relative;
	/*border-bottom:thick solid #999;*/
	text-align: left;
	vertical-align: baseline;
	width: 14.28%;
	height: 4em;
	
	box-sizing:border-box;
}

.calendar td p {
	margin:0px;
	padding:0.2em;
	overflow:hidden;
	display:block;
	
	font-size: 10pt;
	line-height: 10pt;

}

.calendar td.today {
	/*border: 2px solid #009;*/
	background-color: #CFF;
}

.calendar td.has {
	background-color: #EEE;
}

.calendar td.closed {
	color: #F00;
}

.calendar td.opened {
	background-color: #FEF;
}
.calendar td.reserved {
	background-color: #CCC;
}

.calendar td.peak {
	background-image: url(./images/icon/icon_peak.png);
	background-repeat: no-repeat;
	background-position: right bottom;
 }


.calendar td.buds {
	background-image: url(./images/icon/icon_buds.png);
	background-repeat: no-repeat;
	background-position: right bottom;
 }
 
.calendar ul {
	margin: 0em;
	padding: 0em;
	list-style-type: none;
}

.calendar li {
    margin: 0em;
    padding: 0.3em;
    float: left;
    overflow: hidden;
    max-width: 100%;
    max-height: 1.3em;
	/*white-space:nowrap;*/
	
	font-size: 10pt;
	line-height:10pt;
}

.calendar a:hover {
	text-decoration:none;
	opacity:70%;
}

.calendar .prev {
	text-align: left;
}

.calendar .next {
	text-align: right;
}

/* カレンダーの天気予報 */
.calendar .weather_icon {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 2em;
}

/* ****************************** *
 * 全体校正(最後に配置)
 * ****************************** */
@media screen and (min-width: 1280px) {
/* 1280pxを超えるビュー */
	header > * {
		margin-left:calc((100% - 1240px) / 2);
		margin-right:calc((100% - 1240px) / 2);
	}
	main > * {
		/* viewクラス直下の属性にスタイル適用 */
		padding-left:calc((100% - 1240px) / 2);
		padding-right:calc((100% - 1240px) / 2);
	}
	footer ul {
		padding-left:calc((100% - 1240px) / 2);
		padding-right:calc((100% - 1240px) / 2);
	}
}

@media screen and (max-width: 768px) {
	/* 768pxまでの幅の場合に適応される */
	html {
		--fs-default: var(--fs-110) !important;
	}
}

@media screen and (max-width: 310px) {
	/* 310pxまでの幅の場合に適応される */
	html {
		--fs-default: var(--fs-100) !important;
	}
}