@charset "utf-8";

/**********************************************************************　クリスタルヌード　*******************************************************************************/

body { margin: 0 ; padding: 0 ; background-color: #f1f1f1 } /* 白ふちなしデザイン */

header ul li.fobt,.sp {display: none;}

/**********************************************************************　大枠デザイン　*******************************************************************************/
/***** 　　　　　左右1366で縛るかどうか？ 　　　　　　*****/ 

@media screen and (min-width: 1368px) 
{
section { border-left: 1px solid #ccc ; border-right: 1px solid #ddd }
footer { border-left: 1px solid #ccc ; border-right: 1px solid #ddd }
}

section { padding: 75px 0px 0px 0px; max-width: 1366px ; margin: 0 auto ; background-color: #fff }

/**********************************************************************　デザイン　*******************************************************************************/

.id-box { padding-top: 50px; }
.bgph {background-size: 100% auto; background-position: center center}

.item01 { width: 35%; top: 0;right: 15% }
.item02 { top: 0;left: 7% }
.item03 { width: 21%; top: 0;right: 15% } 
.item03 img { width: 100%;height: auto; }

body.fod.item03 { width: 21%; top: 0;right: 0% } 
#rm .item01 { width: 35%; top: 0;right: 10% }
#ec .item01 { width: 35%; top: 0;right: 10% }

#cn .item01 img { width: 60%;height: auto;padding-left: 40% }
#ec .item01 img { width: 90%;height: auto;padding-left: 10% }
#cq .item01 img { width: 60%;height: auto;padding-left: 40% }
#rm .item01 img { width: 100%;height: auto;padding-left: 0% }
#bs .item01 img { width: 60%;height: auto;padding-left: 40% }

.topban { top: 0;right: 0 ; width: 15% }
.topban a { opacity: .5 }
.topban a:hover { opacity: 1.0 }

/**********************************************************************　画像サイズの調整　*******************************************************************************/

.p-wide-90p { width: 90%;margin-right: 10% }
.p-wide-80p { width: 80%;margin-right: 20% }
.p-wide-70p { width: 70%;margin-right: 30% }

/**********************************************************************　背景写真ボックス　*******************************************************************************/

body #photobg { background-size: 100% auto; }

/**********************************************************************　タイポグラフィー　*******************************************************************************/

span.kaig {text-align: center;display: block;}

/**********************************************************************　フォントサイズ　*************************************************************************/

h1 ,.h1like { font-size: 1.5em;line-height: 1.2em }
h2 ,.h2like { font-size: 1.4em;line-height: 1.4em }
h3 ,.h3like { font-size: 1.3em;line-height: 1.4em }
h4 ,.h4like { font-size: 1.2em;line-height: 1.4em }

#body09 h1 { font-size: 1.2em;line-height: 1.2em }
#body09 h2 { font-size: 1.4em;line-height: 1.4em }
#body09 h3 { font-size: 1.3em;line-height: 1.4em }
#body09 h3.bs { font-size: 1.2em ; line-height: 1.2em ; margin-bottom: 20px }
#body09 h4 { font-size: 1.2em;line-height: 1.4em }

h1.markfhead, h2.markfhead, h3.markfhead, h4.markfhead { font-size: 1.3em;line-height: 1.4em }

.sitemap a { font-size: 0.7em;line-height: 1.5em }

div.anch { font-size:0.8em }

/**********************************************************************　サイズの調整　*******************************************************************************/

/*.txt { margin-left: 7%; margin-right: 7% }*/
.lft { width: 48% }.rgt { width: 48% }
.lft .honbun { width: 95%;padding-right: 5% }
.rgt .honbun { width: 95%;padding-left: 5%  }

.rokuyon .lft { width: 58% }
.rokuyon .rgt { width: 38% }

.nanasan .lft { width: 68% }
.nanasan .rgt { width: 28% }

.ph-copy { width: 95% ;margin-left: 2.5%;margin-top: 2% }
.ph-copy.hlf { width: 40% ; padding-left: 10% }

.formbtn { 
width: 460px ; 
}

/***********************************************************************　固定ヘッダー　******************************************************************************/


/************************* 　ロゴ　***************************/

.h1box .logom { width: 33% ; margin-left: auto ; margin-right: auto; }

.logos{ width: 50%; }
.logos img{ width: 80%;height: auto; }
.logof { margin-top: 30px }
.logof img { width: 15%;height: auto; }

/***********************************************************************　フッター　******************************************************************************/

footer{
width: 100% ;
padding: 50px 0 200px 0;
margin: 0 auto ;
max-width: 1366px ;
}

.sitemap { display: table;padding: 15px 10% 0 ;height:36px;margin: 0 auto ; width: 80% }
.sitemap a { display: block;float: left; }
.sitemap a { width: calc(16.666% - 12px) ;height: 25px;padding: 10px 0 0 0;margin: 0 5px; }

body.fod .sitemap { padding: 15px 0 0 0 }
body.fod .sitemap a { width: calc(20.0% - 12px) }


/**************************************************************　トップページ用　スライドショー　******************************************************************/



/******************************************************************************* 　マルチ　 *********************************************************************************/

/**　　　　　左右２列　　　　　　　**/

.lft{float: left;width: 50%;}
.rgt{float: right;width: 50%;}

/**********************************************************************  商品一覧  *******************************************************************************/

/*.card.card01,*/ .card.card02 { width: 21.5%; margin: 1% 1% ; }

.card.card01 { width: calc( 100% - 2px ); margin: 0 ;}
.card.card01 span { width: calc( 65% - 50px );float: left;margin-left: 10px ;text-align: justify; }
.card.card01 span.cardp { width: 35%;float: left;padding-right: 10px; }
.card.card01 span.cardh img { width: 50%;padding-top: 10px }

.card.card03 { width: calc( 33.3333333333333% - 57px ); margin: 0 20px 20px 0 ;}
.tray.card03 { width:calc( 33.3333333333333% - 56px ); margin: 0 20px 20px 0 ;}
.tray.card04 { width:calc( 50% - 52px ); margin: 20px 20px 0 0 ; }

#body08 .tray.card04 { width: calc( 25% - 57px ); margin: 0 20px 20px 0 ; }
.card.card04 { width: calc( 50% - 10px ) ; margin: 0 20px 20px 0 ; }
.card.card04 a { min-height: 100px }

.card.card04 a img{ width: 100%;height: auto; padding-bottom: 0; }
.card.card04 span { width: 55%;float: left;margin-left: 10px ;text-align: left; }
.card.card04 span.cardp { width: 35%;float: left;padding-right: 10px; }
.card.card04 p{ width: 100%;height: auto; padding-bottom: 0; }

.cardfll { width: calc( 100% - 2px ); margin: 20px 0 0 0 ; }
.cardfll span.cardp { width: 30%;float: left;padding-right: 10px; }
.cardfll span { width: 65%;float: left;margin-left: 10px ;text-align: left; }

.card.card06 { width: 14.2%; margin: 1% 0.7% ; }

.dan5 .thmbph { width: calc( 20% - 10px ) ; margin-right: 10px ; margin-bottom: 10px }
.dan4 .thmbph { width: calc( 25% - 20px ) ; margin-right: 20px;margin-bottom: 10px }

.dan3 .thmbph { width: calc( 33.3333333333% - 20px ) ; margin-right: 20px;margin-bottom: 10px }
.dan3 .thmbph img { width: 70.0%; }

/**********************************************************************　オリジナルデザイン　*************************************************************************/

h2.lps img { width: 20%;height: auto;vertical-align: middle;padding: 10px 20px 15px 0 }
p.lps { background-image: url(../image01/logo2.png);background-repeat: no-repeat;background-position: right 10px ;background-size: 80px auto;padding-right: 120px}
#body02 p.lps { background-image: url(../image02/logo2.png); }
p.ec12 { background-image: url(../image02/ec12.png);background-repeat: no-repeat;background-position: right 10px ;background-size: 100px auto;padding-right: 140px}

.tray.card01 { width: calc( 67% - 22px ) ; margin: 0 0 20px 0 ;padding: 20px 20px 20px 33%;background-image: url(../image01/lpsbg.jpg);background-repeat: no-repeat;background-position: left center ;background-size: 30% auto; }

#body02 .tray.card01 { background-image: url(../image02/lpsbg.jpg);background-repeat: no-repeat;background-position: left center ;background-size: 28% auto; }
#body02 .tray.card01.ec12 { background-image: url(../image02/ec12bg.jpg);background-repeat: no-repeat;background-position: left center ;background-size: 28% auto; }

#body03 .tray.card01.bg01 { background-image: url(../image03/bg01.jpg);background-position: left center ; }
#body03 .tray.card01.bg02 { background-image: url(../image03/bg02.jpg);background-position: left center ; }
#body03 .tray.card01.bg03 { background-image: url(../image03/bg03n.jpg);background-position: left center ; }
#body03 .tray.card01.bg04 { background-image: url(../image03/bg04.jpg);background-position: left center ; }
#body03 .tray.card01.bg05 { background-image: url(../image03/bg05.jpg);background-position: left center ; }
#body03 .tray.card01.bg06 { background-image: url(../image03/bg06.jpg);background-position: left center ; }
#body03 .tray.card01.bg07 { background-image: url(../image03/bg07.jpg);background-position: left center ; }
#body03 .tray.card01.bg08 { background-image: url(../image03/bg08.jpg);background-position: left center ; }
#body03 .tray.card01.bg09 { background-image: url(../image03/bg09.jpg);background-position: left center ; }
#body03 .tray.card01.bg10 { background-image: url(../image03/bg10.jpg);background-position: left center ; }
#body03 .tray.card01.bg11 { background-image: url(../image03/bg11.jpg);background-position: left center ; }

#body04 .tray.card01.bg01 { background-image: url(../image04/bg01.jpg);background-position: left center ; }
#body04 .tray.card01.bg02 { background-image: url(../image04/bg02.jpg);background-position: left center ; }
#body04 .tray.card01.bg03 { background-image: url(../image04/bg03.jpg);background-position: left center ; }

#body05 .tray.card01.bg01 { background-image: url(../image05/bg01.jpg);background-position: left center ; }
#body05 .tray.card01.bg02 { background-image: url(../image05/bg02.jpg);background-position: left center ; }

#body06 .tray.card01 { background-image: url(../image06/lpsbg.jpg);background-repeat: no-repeat;background-position: left center ;background-size: 30% auto; }
#body08 .tray.card01 { background-image: url(../image08/lpsbg.jpg);background-repeat: no-repeat;background-position: left center ;background-size: 30% auto; }

#btl-box.tray.card01 { background-image: url(../image01/btlbg.jpg); }
#series-box.tray.card01 { background-image: url(../image08/thumb02.jpg); min-height: 160px }
#gmp-box div.card01 { font-size: 1.0em }

#body08 #photobg p.abso { top: 50px ; right: 50px ; width: 15% }
#body09 #photobg p.abso { top: 50px ; right: 50px ; width: 10% }

#body09 .tray.card01.mulberry { background-image: url(../image09/mulberry.jpg);background-repeat: no-repeat;background-position: 5% center ;background-size: 28% auto;min-height: 200px }
#body09 .tray.card01.eucalyptus { background-image: url(../image09/eucalyptus.jpg);background-repeat: no-repeat;background-position: 2% center ;background-size: 31% auto;min-height: 200px }
#body09 .tray.card01.guava { background-image: url(../image09/guava.jpg);background-repeat: no-repeat;background-position: 5% center ;background-size: 26% auto;min-height: 200px }
#body09 .tray.card01.eiyo { background-image: url(../image09/03.jpg);background-repeat: no-repeat;background-position: left center ;background-size: 35% auto;min-height: 200px }

.dnj { width: 520px ; background-size: 100px auto; margin-top: 10px ; background-position: right top }

/**********************************************************************  説明など *******************************************************************************/

.step-zu img { width: 90%;height: auto; }

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

#nagare4 .step , #nagare5 .step { width: 95%; }
#nagare4 .step.step04 , #nagare5 .step.step05 { margin-bottom: 100px }
}

/******************　背景写真付　********************/
@media screen and (min-width: 900px) 
{

.step { background-image: url(../img/100.png);background-repeat: no-repeat; }

.bgbox { padding-left: 25%;background-image: url(../image03/thumb01.jpg);background-repeat: no-repeat;background-size: 22% auto; background-position: left center }

.tray01 .bgbox { background-image: url(../image03/thumb01.jpg);background-position: left top }
.tray02 .bgbox { background-image: url(../image03/thumb02.jpg);background-position: left center }
.tray03 .bgbox { background-image: url(../image03/thumb03.jpg);background-position: left center }
.tray04 .bgbox { background-image: url(../image03/thumb04.jpg);background-position: left center }
.tray05 .bgbox { background-image: url(../image03/thumb05.jpg);background-position: left center }
.tray06 .bgbox { background-image: url(../image03/thumb06.jpg);background-position: left center }
.tray07 .bgbox { background-image: url(../image03/thumb07.jpg);background-position: left center }

.tray img{ width: 100%;height: auto; padding-bottom: 0; }

}




/**********************************************************************  エフェクト  *******************************************************************************/

/**　　　　　左右２列　　　　　　　**//*@import url(effects.css);*//*　その他は　エフェクト参照*/

.zoom-b {  }
.zoom-box:last-child { padding-bottom: 5%; }
.zoom-box::after { content: ''; clear: both; display: block; }
.zoom-box div {
	position: relative;
	width: 47%;
	height: auto;
	padding: 0;
}

.zoom-box.mojisoto:last-child { padding-bottom: 2.0%; }

/**　　　　　左右３列　　　　　　　**/

.zoom-box.sandan div {width: 30%;}
.zoom-box div.zb-lft { float: left; }
.zoom-box div.zb-rgt { float: right; }
.zoom-box.sandan div.zb-lft.cntr { margin-left: 5% }

.zoom-box div:first-child { margin-left: 0; }
.zoom-box div span {
	position: absolute;
	text-align: left;
	top: 10%;
	left: 5%;
	z-index: 1;
	display: block;
	margin: 0;
	padding: 0;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 1;
}


.zoom-box figure:hover+a span {
	left: 8%;
	opacity: 1;
}


/* 1. 背景写真がズームインするボタン */

.hover01 figure img {
	width: 100%;
	height: auto;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.hover01 figure:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

/**********************************************************************  アンカー  *******************************************************************************/

div.anch { clear: both;float: none;display:block;height: 20px;padding: 50px 0 0 0 }
div.anch a { display:block;float: left ;padding: 10px 0 }
div.anch a.anch-up { display:block;float: right; }

ul.tblike.nidan li.thbox{ border-top: 1px solid #CCCCCC; }

.kazai { width: 16%; padding: 0 2% ;margin: 20px 0 }

p.codebtn,
.bribt a
{ width: 50%;height: 40px;padding: 10px 0 0 0;margin: 0 auto; }


/**********************************************************************　テーブルのようなリスト　*******************************************************************************/


ul.tblike.pref li.thbox{width: 20%;}
ul.tblike.pref li.tdbox{width: 10%;}
ul.tblike.pref li.thbox.brn{height: 50px;}
ul.tblike.pref li.tdbox{width: 79%;text-align: left;padding-left: 1%}
ul.tblike.pref li.tdbox.brn{width: 9%;text-align: left;padding-left: 1%;height: 50px}
ul.tblike.pref li.tdbox.add{width: 69%;text-align: left;padding-left: 1%}

ul.tblike.nidan li.tdbox{width: 50%;}

ul.tblike.nidan li.bono{border-bottom: 0px solid #ffffff;}
ul.tblike li.end{float: none;clear: left;border-bottom: 1px solid #CCCCCC;}

ul.tblike li.end.bono{float: none;clear: left;border-bottom: 0px solid #CCCCCC;}


/************************* info ***************************/

dl.toiawase dt ,dl.toiawase dd { float: left;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #CCCCCC;padding: 0 0 0 0;margin: 0 0 30px 0;height: 50px }
dl.toiawase dt.bikou ,dl.toiawase dd.bikou { height: 140px }
dl.toiawase dt.clear-box ,dl.toiawase dd.clear-box { float: none; clear: both ;width: 100%  }

dl.toiawase dt{ width: 25% }
dl.toiawase dd{ width: 74% }

dl.toiawase dd input.meru{ width: 60% !important; }
dl.toiawase dd input.nama{ width: 40% !important; }
dl.toiawase dd input.pos{ width: 30% !important; }
dl.toiawase dd input.add{ width: 80% !important; }
dl.toiawase dd textarea.you{ width: 90% !important; }
dl.toiawase dd textarea.you{ height: 100px !important; }


/**********************************************************************　サイズ調整　*******************************************************************************/

/*---------------------　パソコン用　---------------------*/

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

@media screen and (min-width: 1081px) 
{
}

@media screen and (min-width: 1480px) 
{
}

/*---------------------　パソコン用　---------------------*/

.pt-ss { padding-top: 5px }.pb-ss { padding-bottom: 5px }
.pt-s { padding-top: 10px }.pb-s { padding-bottom: 10px }
.pt-m { padding-top: 20px }.pb-m { padding-bottom: 20px }
.pt-l { padding-top: 30px }.pb-l { padding-bottom: 30px }
.pt-ll { padding-top: 50px }.pb-ll { padding-bottom: 50px }

.mt-ss { margin-top: 5px }.mb-ss { margin-bottom: 5px }
.mt-s { margin-top: 10px }.mb-s { margin-bottom: 10px }
.mt-m { margin-top: 20px }.mb-m { margin-bottom: 20px }
.mt-l { margin-top: 30px }.mb-l { margin-bottom: 30px }
.mt-ll { margin-top: 50px }.mb-ll { margin-bottom: 50px }

.pr-s { padding-right: 10px }.pl-s { padding-left: 10px }
.pr-m { padding-right: 20px }.pl-m { padding-left: 20px }
.pr-l { padding-right: 30px }.pl-l { padding-left: 30px }
.pr-ll { padding-right: 40px }.pl-ll { padding-left: 40px }

.pl-half { padding-left: 25% }

.w-15p{ width: 15%;margin-left:42.5% }
.w-20p{ width: 20%;margin-left:40% }
.w-60p{ width: 60%;margin-left:20% }
.w-70p{ width: 70%;margin-left:15% }
.w-90p{ width: 90%;margin-left:5% }
.w-95p{ width: 95%;margin-left:2.5% ; }
.w-100p{ width: 100%;margin-left:0% }
.w-face { width: 50%;margin-left:25% }
.w-wide-fl { width: 85%;margin-left:10%;margin-right:5% }
.w-wide { width: 80%;margin-left:10%;margin-right:10% ;  }/*background-color: #ff1*/

.lft-s {left: 5%}
.tp-s {top: 10%}