@charset "UTF-8";

/*-----------------------------------------------------------------
リセット
----------------------------------------------------------------- */
*,
*:after,
*:before {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	border:0;
	outline:0;
	 -webkit-appearance:none;
}
ol, ul,li{ list-style:none; margin:0; padding:0;}
:focus,
:active { outline:0;}
table {
	border-collapse:collapse;
	border-spacing:0;
	}
th,
td { padding:8px; line-height:1.8em;}
input{ margin-right:5px;}
.switch { visibility:hidden;}

body{
	margin:0;
	padding:0;
	font-family:'Open Sans', 'Noto Sans Japanese', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size:17px;
	line-height:1.8;
	font-weight:400;
	letter-spacing:0.05em;
	color:#444;
	}
h1, h2, h3, h4, h5, h6, p,dt ,dl,dd{ font-size:inherit; margin:0; padding:0;}
hr{ display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
ul{ list-style:none; margin:0; padding:0;}
li{ margin:0; padding:0;}
@media screen and (min-width:360px) { * { -webkit-text-size-adjust:none;} }


/*----------------------------------------------------
 clearfix
----------------------------------------------------*/

.clearfix:after,
.header:after,
.wrapper:after,
.productMaterial li:after,
.productUsuki:after{ content:".";display:block;height:0.1px;clear:both;visibility:hidden;font-size:0.1em;line-height:0;}
.clearfix,
.header,
.wrapper,
.productMaterial li,
.productUsuki{ display:inline-block;overflow:hidden;_overflow:visible;display:block;}
* html .clearfix,
* html .header,
* html .wrapper,
* html .productMaterial li,
* html .productUsuki{ height:1%;}


/* anchor ---------- */
a { color:#0054C2; text-decoration:underline;}
a:hover { text-decoration:none; opacity:0.6; filter:alpha(opacity=60);}
a .imgbt:hover{ opacity:0.6; filter:alpha(opacity=60); cursor:pointer;}
a { -webkit-tap-highlight-color:rgba(0,0,0,0);}

/* ---------------------------------------------------------
	汎用ボタン
--------------------------------------------------------- */

.btn{
	-webkit-appearance:none;
	position:relative;
	display:inline-block;
	background:#444444;
	padding:10px 15px 20px;
	border-radius:24px;
    -webkit-border-radius:24px;    /* Safari,Google Chrome用 */
    -moz-border-radius:24px;   /* Firefox用 */
	text-align:center;
	text-decoration:none;
	letter-spacing:0.1em;
	color:#fff;
	min-width:300px;
	height:48px;
	}
	.btn.btn300 { width:300px;}
	.btnCenter { display:block; max-width:480px; margin-right:auto; margin-left:auto;}
	
input.btn {
    border: none;
    font-size: inherit;
    padding: 12px 15px 15px;
    margin-top: 40px;
}
.btn:after { position:absolute; top:10px; right:15px; content:'\f105'; font-family:fontAwesome;}
.btn:hover{ opacity:0.6; filter:alpha(opacity=60); cursor:pointer;}

.businessMedia .btn {
	min-width:160px;
	height:28px;
	border-radius:14px;
    -webkit-border-radius:14px;    /* Safari,Google Chrome用 */
    -moz-border-radius:14px;   /* Firefox用 */
	padding:1px 15px 2px;
	margin-top:10px;
	font-size:0.8em;
	}
.businessMedia .btn:after { top:1px;}


/* ---------------------------------------------------------
	フォーム、フォーム バリデーション
--------------------------------------------------------- */

/* input base ---------- */
input, textarea {
	padding:10px;
	text-align:left;
	border:1px solid #ddd;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	line-height: 1.6;
	}
input:focus,textarea:focus {
    border:solid 1px #EEA34A;
}
input{ min-height:40px;}

input[type=checkbox],
input[type=radio]{ margin-right:5px;}
input[type=text],input[type=tel],input[type=email] { width:70%; font-size:1.1em;display:block;}
textarea {  width:98%; font-size:1em;display:block; resize:vertical;}

label,
input[type=text],
input[type=tel],
input[type=checkbox],
input[type=radio] { display:inline;}

input.myError,
textarea.myError{ background:#FFFFE6;}
p.myError{ color:#F00; padding-top:10px; font-weight:bolder; display:block; clear:both;}

input[type=checkbox],
input[type=radio] {vertical-align:middle;}

input[type="checkbox"] {
    -moz-appearance: checkbox;
    -webkit-appearance: checkbox;
    -o-appearance: checkbox;
    -ms-appearance: checkbox;
}

.input1{width: 70%;}



/*----------------------------------------------------
	content - common
----------------------------------------------------*/

ruby { display:inline-table; text-align:center; text-indent:0px; white-space:nowrap; line-height:1; height:1em; vertical-align:text-bottom; position:relative; top:-0.15em;}
rb { display:table-row-group; line-height:1; text-align:center; white-space:nowrap;}
rt { display:table-header-group; font-size:0.35em; line-height:1.5; letter-spacing:0.4em; text-align:center; white-space:nowrap;}

/* headline ---------- */
.headLine { font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; font-weight:400; letter-spacing:0.1em; line-height:1.8em; text-align:center;}
html.android .headLine{font-family:'Noto Sans Japanese';}
.headLine span { display:block; font-family:'Open Sans',sans-serif; font-size:0.46em; line-height:1.2em; font-weight:400; letter-spacing:0.2em;}
#home .headLine { font-size:1.733em; margin-bottom:40px;}
#subContent .headLine { font-size:2.133em; margin-bottom:40px; line-height: 1.3;}
#subContent .headLine span { margin-bottom: 1em; font-size:0.375em; letter-spacing:0.5em; }

/* bread crumbs ---------- */
#bread { width:100%; background:#fafafa; /*border:solid #ececec; border-width:1px 0; */padding:0; font-size: 11px;}
#bread > ul.wrapper { overflow: hidden; padding:5px 15px;}
#bread > ul > li { float:left; margin-right:5px; opacity:0.8; filter:alpha(opacity=80);}
#bread > ul > li:before { content:'\f105'; font-family:fontAwesome; margin-right:5px;}
#bread > ul > li:first-child:before { content:''; margin-right:0;}
#bread > ul > li a { color:#444;}

/* column ---------- */
.wrapper { width:100%; max-width:1030px; padding:15px; margin-right:auto; margin-left:auto;}

.column2wrap { width:102%; margin-right:-1%; margin-left:-1%; overflow:hidden;}
.column2wrap > li,
.column2wrap > div,
.column2wrap > article { width:48%; margin-right:1%; margin-left:1%; float:left;}
.column2wrap > li .btn{ min-width:100%; width:100%}

.column3wrap { width:101.33%; margin-right:-0.665%; margin-left:-0.665%; overflow:hidden;}
.column3wrap > li,
.column3wrap > div,
.column3wrap > article { width:32%; margin-right:0.665%; margin-left:0.665%; float:left;}
.column3wrap > li .btn{ min-width:100%; width:100%}

.column4wrap { width:102%; margin-right:-1%; margin-left:-1%; overflow:hidden;}
.column4wrap > li,
.column4wrap > div,
.column4wrap > article { width:23%; margin-right:1%; margin-left:1%; float:left;}
.column4wrap > li .btn{ min-width:100%; width:100%}


/*----------------------------------------------------
 	header
----------------------------------------------------*/
header { width:100%; max-width:1020px; padding:20px 10px 0; margin:0 auto; overflow:hidden;}
.headLogo { float:left; width:180px;}
.headLogo img{ width:100%; height:auto;}

#subHeader { background:#fff; width:100%; padding-bottom: 20px;}

/*----------------------------------------------------
 	navigation
----------------------------------------------------*/

nav#gNavi > ul { float:right;}
@media screen and (min-width:1001px) {
	nav#gNavi > ul {font-size: 14px;}
	#gNavi > ul > li.icoInsta .pcNone {
		display: none;
	}
}
nav#gNavi > ul > li { float:left; margin-left:1.5em; letter-spacing:0.1em;}
#gNavi > ul > li a { position:relative; display:inline-block; color:#444; text-decoration:none;}
#gNavi > ul > li a:hover { opacity:1; filter:alpha(opacity=100);}
#gNavi > ul > li a::after { position:absolute; bottom:-4px; left:0; content:''; width:100%; height:2px; background:#333; transform:scale(0, 1); transform-origin:left top; transition:transform .3s;}
#gNavi > ul > li a:hover::after { transform:scale(1, 1);}
#gNavi > ul > li.icoInsta a::after { background: none;}
#gNavi > ul > li.icoInsta a:hover { opacity:0.7; filter:alpha(opacity=70);}

.slicknav_menu { display:none; background:none; margin-bottom:50px;}
.slicknav_nav a,
.slicknav_nav .slicknav_row,
.slicknav_nav ul{ color:#444; margin:0;}
.slicknav_nav a:hover { opacity:1; filter:alpha(opacity=100);}

.slicknav_icon,
.slicknav_icon span { display:inline-block; transition:all .4s; box-sizing:border-box;}
.slicknav_icon { position:relative; width:50px; height:44px;}
.slicknav_menu .slicknav_icon-bar{ position:absolute; left:0;}
.slicknav_icon span:nth-of-type(1) { top:0;}
.slicknav_icon span:nth-of-type(2) { top:3px;}
.slicknav_icon span:nth-of-type(3) { bottom:0;}
.active .slicknav_icon-bar:nth-of-type(1) { -webkit-transform:translateY(6px) rotate(-45deg); transform:translateY(6px) rotate(-45deg);}
.active .slicknav_icon-bar:nth-of-type(2) { opacity:0;}
.active .slicknav_icon-bar:nth-of-type(3) { -webkit-transform:translateY(-6px) rotate(45deg); transform:translateY(-6px) rotate(45deg);}

@media screen and (max-width:1000px) {
	header { position:absolute; top:0; margin:0 0 -20px; padding:50px 15px 10px; background:#fff; overflow:visible;z-index:50;}
	.headLogo { position:absolute; top:18px; left:10px; width:50%; max-width:180px; height:auto; float:left}
	#gNavi ul{ display:none;}
	.slicknav_btn { position:absolute; top:10px; right:10px; background:none; text-shadow:none;}
	.slicknav_menu .slicknav_icon-bar { background-color:#444; box-shadow:none;}
	.slicknav_menu { display:block; width:100%; margin-bottom:-70px;}
	.slicknav_nav { width:120%; margin:0 -10%; padding:3em 0 5em; background:#fff; border-bottom:1px solid #eee;}
	.slicknav_nav a { font-size:1.143em; text-align:center; line-height:3em;}
	.slicknav_nav a:hover { background:#fafafa;}
	.sub_menu{position:inherit;}
	}


/*----------------------------------------------------
 	top
----------------------------------------------------*/
#topMain { min-height:1000px; background:#1f3f4a url(../img/img_bg_main.jpg) center top no-repeat; background-size:cover; position:relative;}
.topMessage { padding-top:300px;}

.topTxtBox { width:100%; max-width:460px; padding:160px 0; text-align:justify; text-justify:inter-ideograph;}
.topTxt { margin-bottom:60px;}
.topTxt > p { margin-bottom:40px;}



/* concept ---------- */
#concept { background: #4c667b url(../img/concept/img_bg.jpg) center bottom no-repeat; background-size:cover; color:#fff;}

.topConcept { position:relative; overflow:hidden; margin:-12% 0 0; padding:100px 0 0; z-index:10;}
.topConcept:before { content:''; position:absolute; top:0; left:0; width:145%; height:100%; margin:0 -15%; background:#fff; -webkit-transform-origin:right center; -ms-transform-origin:right center; transform-origin:right center; -webkit-transform:rotate(-5deg); -ms-transform:rotate(-5deg); transform:rotate(-5deg); z-index:-1;}
.topConcept .wrapper { max-width:1200px; min-height:740px; background:url(../img/img_bg_con01.png) right 20px bottom -5px no-repeat; background-size:50% auto; padding:0 100px;}
/* 20220816 */
.topConcept .wrapper.custom2022 { background: none;}
.topConcept .wrapper.custom2022 h2 { margin-bottom: 20px; text-align: center;}
.topConcept .wrapper.custom2022 h2 img{ max-width: 180px; height: auto;}

@media only screen and (min-width:1080px){
	.topConcept .wrapper.custom2022 .topTxtBox { width: 800px; max-width: none; display: flex; justify-content: space-between; margin: 0 auto; padding-bottom: 0;}
	.topConcept .wrapper.custom2022 .topTxt { max-width: 640px; padding-left: 80px;}
}

/* product ---------- */
.topProduct { position:relative; overflow:hidden; margin:-12% 0 0; padding:100px 0; z-index:20; color:#fff;}
.topProduct:before { content:''; position:absolute; top:0; left:0; width:145%; height:80%; margin:0 -15%; background:#1f3f4a; -webkit-transform-origin:right center; -ms-transform-origin:right center; transform-origin:right center; -webkit-transform:rotate(-5deg); -ms-transform:rotate(-5deg); transform:rotate(-5deg); z-index:-1;}
.topProduct .wrapper { max-width:1200px; min-height:540px; background:url(../img/img_bg_con02.png) left 0 bottom 40px no-repeat; background-size:50% auto; padding:0 100px;}
.topProduct .topTxtBox { float:right;}
.topProduct .btn { background:#405c65;}

/* oem ---------- */
.topOEM .topTxtBox { max-width:660px; margin:0 auto; padding:0 0 80px;}
/*.topOEMcat { padding:40px 0 0; font-family:"Yu Mincho", "YuMincho","游明朝",serif; color:#b4c100; font-size:1.733em; font-weight:500; letter-spacing:0.1em; line-height:1.8em; text-align:center;}
html.android .topOEMcat{font-family:'Noto Sans Japanese';}*/
.topOEMcat{ padding:40px 0 0; text-align:center;}

/* access ---------- */
.topAccess { width:100%; background:#1f4a3f; padding:100px 0; color:#fff;}
.topAccess a { color:#fff;}
.topAccess .topTxt { text-align:center;}
.topAccess .topTxt > p{ margin-bottom:30px;}
.phone { letter-spacing:0.15em;}
.topAccess .btn { background:#40655c;}


/*----------------------------------------------------
 	sub content
----------------------------------------------------*/

.subContainer { padding:65px 0;}
.subProduct .subContainer { padding:65px 0 0;}
.subInner{padding-bottom: 80px;}
.bgcl01 { background:#fafafa;}

.decimal01{margin-left: 1em;}
.decimal01 li{list-style:decimal;}
.decimal01 li li ,
.decimal02 li li{list-style:none;}
.decimal02 li{text-indent:-1.3em; padding-left: 1.3em;}

.lowerRoman{margin-left: 1em;}
.lowerRoman li{list-style:lower-roman !important;}

/*.disc{margin-left: 1em;}*/
.disc li:before{ content:"・";}

.table01{width: 100%; background:#ddd; border-collapse:separate; border-spacing:1px;}
.table01 th{width: 25%; background:#fafafa; font-weight:normal; text-align:left; padding: 20px;}
.table01 td{background:#fff; padding: 20px;}


h3.sub01{ margin-bottom: 40px; position:relative; font-size: 1.6em; font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; font-weight:600; letter-spacing:0.1em; line-height:1.6em;}
h3.sub01.center{text-align:center;}
h3.sub01.left{text-align:left;}
/*h3.sub01:after{content:""; display: block; width: 40px; position:absolute; bottom:-20px; border-bottom: 1px solid;}*/
h3.sub01.center:after{left:50%; margin-left: -20px;}
h3.sub01.left:after{left:0;}



/* product ---------- */
.productOEM { display:table; background:#1f3f4a; color:#fff;}
.productOEM .imgBox{ display:table-cell; width: 50%; background:url(../product/img/img_product01.jpg) center top no-repeat; background-size:cover;}
.productOEM .txtBox{ display:table-cell; width: 50%; padding:80px 0;}
.txtOem { padding-left:40px; width:100%; max-width:460px;}
.productOEM .btn { background:#405c65;}

.productFoodsWrap { padding:100px 0 20px;}
.productFoodCat { margin-bottom:40px;  text-align:center; font-size: 1.2em; color: #b4c100; font-weight: bold; line-height: 2em;}
.productFoodsWrap h4 { border: 1px solid #333; border-left-width:4px; padding:10px 20px; margin-bottom: 40px; overflow:hidden; font-size: 1.6em; font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; font-weight:600;}
.productFoodsWrap h4 span.note { float:right; font-size: 11px;font-family:"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; font-weight:400;}

.productFoodsWrap section { margin-bottom: 80px;}
.productList.syrup { overflow:hidden; margin:0 -2.65% 20px;}
.productList.syrup > li { width:28%; margin:20px 2.65%; float:left; font-size:0.8rem; line-height: 180%;}
.productList.sugar { overflow:hidden; margin:0 -2% 20px;}
.productList.sugar > li { width:46%; margin:20px 2%; float:left; font-size:0.85rem; line-height: 180%;}

.productList img { display:block; width: 100%; max-width:300px; height:auto; margin:0 auto 10px;}
.productName { margin-bottom: 20px; line-height:1.4em; letter-spacing:0.1em; font-weight:600;}
.productName .name { display:block; font-size: 1rem;}
.productName .nameEn { display:block; font-size: 11px; font-family:'Open Sans',sans-serif; color:#999;}
.productDetail { overflow:hidden; border-top: 1px solid #333; padding-top: 20px; margin-top: 20px; font-size: 10px; line-height: 170%;}
.productDetail > dt { clear:both; width:3.5em; float:left;}
.productDetail > dd:before { content:'：';}
.productDetail > dd { width:calc(100% - 4.5em); float:right; text-indent:-1em; margin-left: 1em;}
.productDetail > dd:after {	content:'';	display:block; clear:both;}

.productHowtoWrap { background:url(../product/img/img_syrup_how_bg01.jpg) left top repeat; padding:40px 30px 30px; margin-bottom: 40px; text-align:center;}
.productHowtoTtl{ margin-bottom: 10px; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; font-size: 24px; font-weight: 500;}
.productHowto > li img{ width: 100%; margin-bottom:5px; vertical-align: bottom;}

.linkSNS { color:#333;}
.linkSNS i{ text-decoration:none;}
i.fa-facebook-official { color:#305097; margin-right: 5px;}
.linkSNS:after{ position: absolute; top: 10px; right: 15px; content: '\f105'; font-family: fontAwesome;}

.productMaterialWrap { background:#fafafa; padding:80px 0;}
.productMaterial{margin-bottom: 40px;}
.productMaterial li{ overflow:hidden; margin-bottom: 40px;}
.productMaterial .imgBox{width: 30%; float:left;}
.productMaterial li:nth-child(2n) .imgBox{ float:right;}
.productMaterial .txtBox{width: 65%; float:right;}
.productMaterial li:nth-child(2n) .txtBox{ float:left;}
.productMaterial .imgBox img{ width: 100%;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;}
.productMaterialWrap h4{ font-size:1.2em; margin-bottom: 15px; color:#b4c100;}

.productEffectWrap { background:#fff; padding:40px; margin-bottom:80px; font-size:13px; line-height:2em;}
.productEffectWrap h3 { border-bottom:1px solid #444; padding-bottom:10px; margin-bottom:30px; font-size:1.154em;}
.productEffectWrap h3:before { content:'\f00c'; font-family:fontAwesome; margin-right: 5px;}
.productEffectContainer { padding-left:50px;}
.productEffect h4{ margin-bottom: 10px; font-size:1.154em;}
.productEffect > li{ border-left:1px solid #444; padding:5px 20px;}

.productUsuki .imgBox{width: 30%; float:left;}
.productUsuki .txtBox{width: 65%; float:right;}
.productUsuki .imgBox img{width: 100%;}



/* company ---------- */

.companyName { margin-bottom:50px; font-size: 1.6em; font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; font-weight:600; letter-spacing:0.1em; text-align: center; line-height: 1.4;}

.companyDtail{width:100%; max-width:640px; margin-left: auto; margin-right: auto; padding-top:10px;}
.companyDtail dt{float:left; width: 5.5em; position:relative;}
.companyDtail dt:after{content:"："; position: absolute; top: 0; right: 0;}
.companyDtail dd{padding-left: 5.5em;}

.companyDtail.custom2022 { max-width: 560px;}

.history { padding-top:10px;}
.history li { display: flex;}
.history li span{display: inline-block; padding:5px 0 15px; vertical-align:top;}
.history li .year{width: 140px;}
.history li .txt{width: calc(100% - 140px); border-left:1px solid #444; position:relative;padding-left:40px}
.history li .txt:before{content:""; position:absolute; top:14px; left:-6px; display: block; width: 12px; height: 12px; background:#b4c100; border-radius:6px;}

.acList { width:100%; max-width:640px; display: flex; justify-content:center; flex-wrap: wrap; margin:0 auto; padding:20px 0; overflow:hidden;}
.acBox { width:50%; text-align:center;}
.acBox dt { margin-bottom:5px; font-size:1.067em; font-weight: 600;}
.acBox dd { font-size:0.8em; line-height:1.8em;}

.accessMap{width: 100%; height:400px;}



/* philosophy ---------- */
.philosophy { width:100%; max-width:800px; margin:0 auto;}
.philosophy li{ border:1px solid #ccc; padding:30px; margin-bottom: 20px;}
.philosophy li .cap{margin-bottom: 10px; font-size:1.2em; font-weight:500;}
.philosophy li .cap span{font-size:0.8em;}
.philosophy .text13 { text-align:justify; text-justify:inter-ideograph; line-height:1.8em;}


/* business ---------- */
.businessWrap,
.businessMedia { padding:20px 0 0;}
ul.business > li{ margin-bottom: 15px; text-indent:-2em; padding-left: 2em; line-height:1.8em;}
.award { display:table; width:100%; max-width:700px; margin:0 auto; overflow:hidden;}
.awardImg { display:table-cell; padding-right:40px;}
.awardTxt { display:table-cell; vertical-align:middle;}
.businessMedia > article{ padding:30px; border:1px solid #ccc; margin-bottom: 20px; font-size: 0.9em; line-height:1.8em;}
.businessMedia .imgBox{width: 30%; float:left;}
.businessMedia .imgBox img{width: 100%;}
.businessMedia .txtBox{ width: 66%; float:right; padding: 10px 0px;}


/* contact ---------- */
.caution,
.nini{color:#fff; font-size:0.7em; padding:2px 6px; margin-right: 5px;}
.caution{background:#d00;}
.nini{background:#bbb;}


/* sitemap ---------- */
.subContainer .sitemap { text-align:center;}
.subContainer .sitemap > li { display:block; padding:0; line-height:3em; color:#888;}
.subContainer .sitemap > li a { color: #444; text-decoration:none;}

.privacy { font-size:0.867em; line-height:1.7em;}



/*----------------------------------------------------
 	footer
----------------------------------------------------*/

footer { width:100%; background:#fff; padding:80px 0;}
footer .sitemap { padding-bottom:30px; margin-bottom:40px; border-bottom:1px solid #e0e0e0; text-align:center;}
footer .sitemap > li { display:inline-block; padding:0 20px; line-height:3em;}
footer .sitemap a { font-size:0.867em; color:#444; text-decoration:none; letter-spacing:0.1em;}
footer .sitemap a:hover { opacity:0.6; filter:alpha(opacity=60); cursor:pointer;}
.ftLogo { width: 80%; max-width: 400px; margin: auto; text-align:center;}
.ftLogo img { width: 100%; height: auto;}
.copy { padding-top:10px; font-family:'Open Sans',sans-serif; font-size:0.846em; letter-spacing:0.1em; text-align:center;}
.pagetop { width:50px; height:50px; position: fixed; bottom: 20px; right: 20px; z-index:200;}
.pagetop img { width:100%; height:auto;}


@media only screen and (min-width:1080px){
	.pcNone { display:none;}
/*----------------------------------------------------
 	top
----------------------------------------------------*/
.topConcept .wrapper,
.topProduct .wrapper { margin:0 auto; /*padding:0 10px;*/}
.topOEM .wrapper { margin:0 auto; padding:0 10px;}



.topOEM .wrapper { max-width:1200px; min-height:825px; background:url(../img/img_bg_con03.png) left center no-repeat; background-size:auto 80%; padding:0 100px;}
.topOEMtxt { text-align:center;}

.topAccess { padding:0;}
.topAccess .wrapper { max-width:1200px; min-height:0; /* background:url(../img/img_bg_con04.png) left center no-repeat; */ background-size:auto 100%; padding:100px;}


/*----------------------------------------------------
 	product
----------------------------------------------------*/
.productHowtoBlock { width: 100%; min-height: 90px; background:url(../product/img/img_syrup_how_bg02.png) right top no-repeat; background-size: 238px 90px;}
.productHowto { width: 100%; max-width: calc(680px + 4% ); margin: 40px auto 0; overflow: hidden;}
.productHowto > li { width: 28.33%; margin: 0 2.5%; float: left; font-size: 13px;}


/*----------------------------------------------------
 	footer
----------------------------------------------------*/
/*footer .sitemap > li:nth-child(8):before { content:"\A"; white-space:pre;}*/
}

@media only screen and (max-width:1079px){
.spNone { display:none;}

/*----------------------------------------------------
 	top
----------------------------------------------------*/
#topMain { min-height:inherit;}
.topMessage { padding:20% 0; text-align:center;}
.topMessage img { width:80%; max-width:450px;}

.topTxtBox { width:50%;}
/* 20220816 */
.topConcept .wrapper.custom2022 { padding:0 6vw;}
.custom2022 .topTxtBox { width: 100%; max-width: 640px; margin: 0 auto; padding: 40px 0;}
.custom2022 .btnWrap { text-align: center;}

.topConcept .wrapper { background-position:right -22% bottom -10px; background-size:58% auto;}
.topProduct .wrapper { background-position:left -22% center; background-size:58% auto;}

/*----------------------------------------------------
 	footer
----------------------------------------------------*/
footer { padding:30px 0 ;}
footer .sitemap > li:nth-child(5n+1):before { content:"\A"; white-space:pre;}
}

@media only screen and (max-width:768px){
.btn.btn300 { /*width:100%;*/ display:block; margin-right:auto; margin-left:auto;}

.column2wrap > li,
.column2wrap > div,
.column2wrap > article { width:100%; margin-right:0; margin-left:0; margin-bottom:40px; float:left;}

.column3wrap > li,
.column3wrap > div,
.column3wrap > article { width:100%; margin-right:0; margin-left:0; margin-bottom:20px; float:left;}

.column4wrap > li,
.column4wrap > div,
.column4wrap > article { width:100%; margin-right:0; margin-left:0; margin-bottom:20px; float:left;}

.topMessage { padding:40% 0;}
.topTxtBox { width:100%; max-width:100%;}
.topTxt { margin-bottom:30px;}
.topTxt > p { margin-bottom:1.5em;}

.topConcept .wrapper { min-width:100%; min-height:inherit; padding:0 15px 0; background-position:center 0; background-repeat:no-repeat; background-size:80% auto;}
.topConcept .topTxtBox { padding-top:115%; padding-bottom: 40px;}

/* 20220816 */
.topConcept .custom2022 .topTxtBox { padding-top: 0;}
.topConcept .wrapper.custom2022 h2 { width: 100%; max-width: 100%;}
.topConcept .wrapper.custom2022 h2 img { width: 100px;}

.topProduct .wrapper { min-width:100%; min-height:inherit; padding:0 15px 0; background-position:center 0; background-repeat:no-repeat; background-size:80% auto;}
.topProduct .topTxtBox { padding-top:90%; padding-bottom: 200px;}

.topOEM .wrapper { margin-top:-150px;}
.topOEM .topTxtBox { padding-bottom:40px;}
.topOEMcat { padding:20px 0 0; font-size:1.4em; line-height:1.8em;}
.topOEM .column2wrap > li { margin-bottom:20px;}

.topAccess { padding:40px 0 20px;}

footer .sitemap > li { display:block; padding:0; font-size:1.1em; line-height:2.25em;}
footer .sitemap > li:nth-child(5n+1):before { content:""; white-space:pre;}
.pagetop { width:10%; height:auto; position: fixed; bottom: 5px; right: 10px;}


/*----------------------------------------------------
 	sub content
----------------------------------------------------*/
.table01 th,
.table01 td{width: 100%; display: block;}

.privacy h3.sub01{ font-size: 1.4em; letter-spacing:0.05em;}

/* concept ---------- */
#concept { /*background: #4c667b url(../concept/img/img_bg.jpg) center bottom no-repeat;*/ background-size:contain;}

/* product ---------- */
.productOEM { display:block;}
.productOEM .imgBox{ display:block; width: 100%; padding-bottom:42.4%;}
.productOEM .txtBox{ display:block; width: 100%; padding:40px 0;}
.txtOem { padding:0 15px 20px; width:100%;}

.productFoodsWrap { padding:40px 0;}
.productFoodCat { font-size: 1em;}
.productFoodsWrap h4 span.note { display:block; float:none; text-align: left;}
.productFoodsWrap section { margin-bottom: 60px;}

.productList { overflow:hidden; margin:0 0 20px;}
.productList.syrup > li,
.productList.sugar > li { width:96%; margin:30px auto; float:none; font-size: 15px;}
.productName { text-align: center;}
.productName .name {font-size: 1.1rem;}
.productDetail { font-size: 12px;}

.productHowto { width: 100%; margin: 0 auto; overflow: hidden;}
.productHowto > li { width:100%; margin:20px 0 0; float: none; font-size: 13px;}

.productMaterialWrap { padding:40px 0;}
.productMaterial .imgBox{width: 100%; float:none; margin-bottom: 10px; text-align: center;}
.productMaterial .imgBox img { width:60%; height:auto;}
.productMaterial .txtBox{width: 100%; float:none;}
.productMaterial .txtBox h4 { text-align: center;}

.productEffectWrap { padding:20px; margin-bottom:40px;}
.productEffectContainer { padding-left:0;}
/*.productEffect > li{background:#efefef; padding: 15px;}*/
.productEffect > li{ border-top:1px solid #444; border-left:0; padding:20px 0 0 20px; margin-top:20px;}

/*.productUsuki{padding: 15px;}*/
.productUsuki .imgBox{width: 100%; float:none; text-align:center;}
.productUsuki .imgBox img { width:60%; height:auto;}
.productUsuki .txtBox{width: 100%; float:none; margin-bottom: 10px;}


/* company ---------- */
.history li span{padding:5px 4%;}
.history li .year{width: 38%;}
.history li .txt{width: 62%;}

.acBox { width:100%; float:none; margin-bottom:40px;}
.acBox:last-of-type { margin-bottom:0px;}
.accessMap{height:240px;}

/* business ---------- */
.businessWrap,
.businessMedia { padding:10px 0 0;}

.award { display:block;}
.awardImg { display:block; padding-right:0; text-align:center;}
.awardTxt { display:block; text-align:center;}

.businessMedia > article{ padding:15px;}
.businessMedia .txtBox{ padding: 0px;}


}


/* ------------------------------------------------
	　common
    ---------------------------------------------- */

.fl { float:left;}
.fr { float:right;}

.mb5 { margin-bottom:5px;}
.mb10 { margin-bottom:10px;}
.mb20 { margin-bottom:20px;}
.mb30 { margin-bottom:30px;}
.mb40 { margin-bottom:40px;}
.mb50 { margin-bottom:50px;}
.mb60 { margin-bottom:60px;}
.mb70 { margin-bottom:70px;}
.mb90 { margin-bottom:90px;}

.ml5 { margin-left:5px;}
.ml10 { margin-left:10px;}
.ml12 { margin-left:12px;}
.ml13 { margin-left:13px;}
.ml15 { margin-left:15px;}
.ml20 { margin-left:20px;}
.ml25 { margin-left:25px;}
.ml30 { margin-left:30px;}

.mr5 { margin-right:5px;}
.mr10 { margin-right:10px;}
.mr15 { margin-right:15px;}
.mr20 { margin-right:20px;}
.mr30 { margin-right:30px;}

.mt5 { margin-top:5px;}
.mt10 { margin-top:10px;}
.mt15 { margin-top:15px;}
.mt20 { margin-top:20px;}
.mt30 { margin-top:30px;}
.mt40 { margin-top:40px;}
.mt50 { margin-top:50px;}
.mt60 { margin-top:60px;}

.pt5 { padding-top:5px;}
.pt10 { padding-top:10px;}
.pt20 { padding-top:20px;}
.pt30 { padding-top:30px;}
.pt40 { padding-top:40px;}

.pb5 { padding-bottom:5px;}
.pb10 { padding-bottom:10px;}
.pb20 { padding-bottom:20px;}
.pb100{ padding-bottom:100px;}

.text10{ font-size:72%; line-height:1.8em;}
.text11{ font-size:79%; line-height:1.8em;}
.text12{ font-size:86%; line-height:1.8em;}
.text13{ font-size:93%;}
.text14{ font-size:100%;}
.text16{ font-size:115%;}
.text18{ font-size:129%;}
.text20{ font-size:143%;}
.text24{ font-size:172%;}
.text28{ font-size:200%;}
.text30{ font-size:214%;}
.textC { text-align:center;}
.textR { text-align:right;}
.textL{ text-align:left;}
.textB { font-weight:600;}

.red { color:#f00;}

.box10p { width:10%;}
.box15p { width:15%;}
.box20p { width:20%;}
.box35p { width:35%;}
.box40p { width:40%;}
.box45p { width:45%;}
.box49p { width:49%;}
.box50p { width:50%;}
.box55p { width:55%;}
.box60p { width:60%;}
.box80p { width:80%;}
.box100p { width:100%;}

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

.link a{ color:#FD7E33; text-decoration:underline; font-weight:bold;}
.link a:hover{ text-decoration:none;}

.va_b{ vertical-align:bottom;}
.va_m{ display:inline-block;vertical-align:middle;}



/* ------------------------------------------------
	　20210603
    ---------------------------------------------- */
.icoInsta img { width:1em; height:auto; margin-right: 0.5em;}
@media only screen and (min-width:1024px){
    .icoInsta img { margin-right: 20px;}
    .icoInsta span { display: none;}
    .contactBtn { width: 60%; margin: 0 auto;}
    
}


/* ------------------------------------------------
	　20250603
    ---------------------------------------------- */
.businessWrap {
	display: flex;
	gap: 20px 40px;
}
.businessPh {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}
@media only screen and (max-width:1000px){
	.businessWrap {
		flex-direction: column;
	}
}

.supportList {
	counter-reset: number 0;
	margin-bottom: 1.5em;
}
.supportList > dt {
	position: relative;
	margin-top: 1.5em;
	padding-left: 1.25em;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	font-weight: 600;
	letter-spacing: 0.05em;
	font-size: 1.3em;
}
.supportList > dt::before {
	position: absolute;
	left: 0;
	counter-increment: number 1;
	content: counter(number) ".";
	margin-right: 0.25em;
	line-height: 1.6;
}
.supportList > dd {
	margin-top: 0.25em;
}
.supportList__detail {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	position: relative;
	padding-left: 1em;
}
.supportList__detail > li::before {
	content: "・";
	position: absolute;
	left: 0;
}
.uspWrap {
	width: 100%;
}
.uspWrap img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.uspCap {
	position: relative;
	display: flex;
    width: fit-content;
    margin: auto;
	margin-top: 1rem;
	text-align: center;
}
.uspCap::before,
.uspCap::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
	height: 1px;
	background: currentColor;
}
.uspCap::before {
	left: -1.7em;
}
.uspCap::after {
	right: -1.5em;
}
.topConcept .wrapper.custom2022 {
	padding-top: 80px;
}
.topConcept {
	padding-top: 0;
}
.topConcept .custom2022 .topTxtBox {
	padding-top: 60px;
}
.topConcept .wrapper.custom2022 .topTxtBox {
	padding-bottom: 40px;
}
.topConcept .wrapper.custom2022 h2 {
	margin-bottom: 40px;
}
@media only screen and (min-width:769px){
	.uspWrap {
		margin: 50px auto 0;
	}
	.topConcept .wrapper.custom2022 {
		padding-top: 14vw;
	}
	.topConcept .custom2022 .topTxtBox {
		padding-top: 120px;
	}
}

.companyName .text10 { font-size:clamp(11px, 0.6em, 14px);}

@media only screen and (max-width:768px){
.history li .year { width: 28%; line-height: 1.6;}
}