/*
Theme Name: 長野エスコ
Theme URI: https://
Author: 長野エスコ事業協同組合
Description: 
Version: 5.0
Tags: 

*/
@charset "utf-8";

/* @group Reset */

*{ margin: 0;padding: 0}

a { text-decoration : underline; color: #000; }
a:hover{ color:#000; text-decoration: none;}
a:hover img{
	opacity: 0.6;
  	filter: alpha(opacity=60);
  	-ms-filter: "alpha(opacity=60)";
}
	
ul, ol { list-style : none}
img { vertical-align : middle}

input[type="text"] {
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 0;
    outline: none;
    background: #fff;
	padding: 10px;
}
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
    padding: 0;
    border: 1px solid #ccc;
    outline: none;
    background: #fff;
	padding: 10px;
}
button,
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: 1px solid #ccc;
    outline: none;
    background: #fff;
	padding: 10px
}

/* @end */

/* @group Fluid-img */

img { max-width : 100%}

/* @end */


/* @group HTML */


html {
font-family: source-han-sans-japanese, sans-serif;
font-weight:400;
font-size : 100%; /*16px*/
line-height : 1.5;
letter-spacing: 0.1em;}
body { width: 100%; }


/* @end */

/* @group Heading */

h1 {
font-size : 1.25rem; /* 20px */
line-height : 1 /* 20px */ } 

h2 {
font-size : 1em; /* 16px */
line-height : 1.3333 /* 48px */ } 

h3 {
font-size : 0.875em; /* 14px */
line-height : 1; /* 24px */
margin-bottom : 1em }

main{
   display:block;
}
h1.title-design{ font-size: 1.75rem; text-align: center;}
h1.title-design i{ border-bottom: 5px solid #FFAE00; width: 100px; margin: 24px auto; display: block}
h1.title-design span{ display: block; font-size: 0.875rem;}

/* @end */

/* @group Shear */

.pc{ display:none;}
.sp{ display:inherit; }
.tb{ display: none;}
.tbsp{ display:inherit;}

section h1.title-design1{ width: 100%; border-bottom: 1px solid #FFAE00; padding-bottom: 34px; margin-bottom: 20px; text-align: center; font-weight: normal; font-size: 1.5rem; color: #008000; }

/* @end */

/* @group Header */
header{ width: 100%; position: fixed; z-index: 1; padding:24px 0 14px; top:0 }
header .hgr{ overflow: hidden; width: 100%; }
header .hgr h1{ width: 250px; float: left; margin-left: 3%} 
header .hgr nav{ width: auto; float: right; margin-top: 12px; margin-right: 3%}
header.change-color{ background: #fff}

/* @end */

/* @group ハンバーガーメニュー */
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 34px;
  height: 34px;
z-index: 3;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #000;
}

.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 11px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 7px;
}

.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(14px) rotate(-45deg);
  transform: translateY(14px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  left: 200%;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-animation: active-menu-bar02 .8s forwards;
  animation: active-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-8px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
}

/* @end */


/* @group ヘッダーメニュー　dropdown-menu */
.smp-dpmenu{ 
		position:fixed; 
		top:97px;
    	right: 0;
    	bottom: 0;
    	left: 0;
		z-index:2;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		-webkit-transition-duration:1s; background:#fff; padding:0; max-height:0;
		text-align: left; font-size: 1.125rem;
}
.smp-dpmenu.open{padding:0 0 0 0;max-height:12em;}
.dropdown-menu{  overflow:hidden; width:100%; height: 100%; overflow-y: auto; border-top: 1px solid #000;}

.dropdown-menu li{ line-height:1em;list-style:none; border-bottom: #000 dashed 1px;  padding:26px 3%; overflow: hidden; text-align: left}
.dropdown-menu li a{display:block; width:100%; height:100%; color:#000; background: url(images/icon.svg) no-repeat left center; padding-left: 25px; float: left; width: 100%; text-decoration: none; background-size: 12px}

/* @end */
main{ }
.main-img{
position: relative; 
background-image: url("images/or-bg.jpg");
background-image: image-set(url(images/or-bg.jpg) 1x, url(images/or-bg@2x.jpg) 2x);
background-image: -webkit-image-set(url(images/or-bg.jpg) 1x, url(images/or-bg@2x.jpg) 2x);
background-size: 100%;
background-repeat: repeat-y;
background-position: top right;
padding-top: 100px;
width: 100%; 
margin: 0;
padding-bottom: 50px
	
}
.main-copy-area{ width: 100%; 
background-image: url("images/main-img-sp.png");
background-image: image-set(url(images/main-img-sp.png) 1x, url(images/main-img-sp@2x.png) 2x);
background-image: -webkit-image-set(url(images/main-img-sp.png) 1x, url(images/main-img-sp@2x.png) 2x);
background-size: 100%;
background-repeat: no-repeat;
background-position: top right;
margin-top: 0;
height: 390px
}
main section{ width: 93.75%; margin: 68px auto 0}
.pop{ background: #FFF9EE; margin: 100px 0 0 0}

/* slider */
.mainslider{ 
width:100%;
height:750px;
overflow:hidden; position: absolute}
.main-img .slick-slide img{ width: 100%;}
.main-img h1 { width: 60%; text-align: center; margin: 0 auto; padding-top: 185px }
.about{ background: url(images/pop-bg1.png) no-repeat center center;}
.about h1{ font-size: 1.4375rem; margin-top: 50px; width: 80%; margin: 0 auto; text-align: center; line-height: 120%}
.about h1 span{ border-top: 6px solid #FFAE00; border-bottom: 6px solid #FFAE00; padding: 29px 0 19px;  display: block}
.about h1 span i{ font-style: normal; font-size: 0.875rem; display: block; margin-top: 10px}
.about div{ width: 100%; overflow: hidden}
.about div p{ width: 100%; margin-top: 47px; text-align: center; line-height: 233%; font-size: 1rem;}
.about div img{ margin-top: 27px;}
.result{ padding-top: 30px; padding-bottom: 10px}
.result h1{ margin-top: 40px; }
.result h2{ color: #FFAE00; font-size: 1.25rem; margin: 30px 0 10px; text-align: center}
.result ul{ width: 100%; overflow: hidden; margin-bottom: 20px }
.result ul li{ width:93.75%; border-top: 1px dashed #FFAE00;  padding: 15px 3%;  color: #FFAE00;  list-style-position: inside; list-style-type: disc; font-size: 1.375rem}
.result ul li span{ color: #000; font-size: 1rem; display:inline-block; vertical-align:top; width: 90%; margin-top: -7px; }
.result ul li.imglist{ list-style-type: none; overflow: hidden; margin-bottom: 15px; padding: 15px 0}
.result ul li.imglist span{ width: 71%; float: left; margin-top: 7px;}
.result ul li.imglist img{ float: left; width:26%; margin-right: 3%;}
.result ul li:last-child{ border-bottom: 1px dashed #FFAE00; }
.result .result-box{ background: #FEDE97; padding: 15px 5%; width: 90%; font-size: 0.875em; line-height: 260%; margin-top: 16px;}
.result .result-box span{ display: block; font-size: 0.75rem}

.result p{ margin: 50px 0; text-align: center}

.system h2{ font-size:  1.5625rem; border-bottom: 2px solid #FFAE00; border-top: 2px solid #FFAE00; padding:25px 0; text-align: center; margin: 90px 0 45px; color: #FFAE00;}
.systembox{width: 100%; margin: 50px auto}
.flow-box{ width: 100%; overflow: hidden; text-align: center; margin-top: 50px}
.flow-box .flow-slide{ width: 100%;}
.flow-box .flow-slide .flowslide-box{ margin-top: 50px; width: 100%;}
.flow-box .flow-slide .flowslide-box .slider-list{ width: 100%;}
.flow-box .flow-slide .flowslide-box .slider-list ul{ width: 100%}
.flow-box .flow-slide .flowslide-box .slider-list ul li img{ max-width: 100%; height: auto}
.flow-box .flow-slide .flowslide-box .slider-list ul li a{ display: block}
.flow-box .flow-slide .flowslide-box .slider-list ul .slick-dots{ bottom: -74px;}
.flow-box .flow-slide .flowslide-box .slider-list .list-title{ padding: 10px 0; text-align: center; margin: 10px 0 50px; font-weight: 500}
.flow-box .flow-illust{ width: 100%; margin-top: 30px}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{ bottom: 15px;}
.period p{ line-height: 200%; margin-top: 40px}
.period img{ margin-top: 40px; }
.period h1 img{ margin-top: 0; margin-bottom: 50px}
main section.period{ padding: 80px 0}
.period .attention{ font-size: 0.875em; margin-top: 40px; line-height: 185%}
.period .attention span{display: block; color: #ff0000}
button.contact{ border: 5px solid #FFAE00; text-align: center; font-size: 1.25rem; font-weight: bold; width: 80%; margin: 40px auto; display: block; padding: 0 }
button.contact a{ display: block; width: 100%; text-decoration: none; padding: 35px 0 ; color: #000;}
button.contact a:hover{ background: #FFAE00; color: #fff;}
footer{ width: 100%; background: #FFAE00; padding: 60px 0; text-align: center}
footer img{ margin-bottom: 28px; width: 70%}
footer p{ color: #000; font-size: 1em; line-height: 160%}
footer p a{ color: #000; text-decoration: underline; display: inline}
footer p a:hover{ text-decoration: none; color: #fff}
.slick-dots li button::before,
.slick-dots li.slick-active button::before{ font-size: 12px; line-height: 0}

.lang{-webkit-transition-duration:1s; padding:0; max-height:0; overflow:hidden; font-size: 0.875rem; width: 100%; margin-bottom: 0}
.lang.open{padding:5px 0;max-height:20em; background: #fff; margin-top: 15px}
.lang-icon{ width: 10%; float: right; margin-right: 15px; margin-top: 8px}
.lang li{ line-height:1em;list-style:none; border-bottom: #000 dashed 1px;  padding:26px 3%; overflow: hidden; text-align: left}
.lang li a{display:block; width:100%; height:100%; color:#000; background: url(images/icon.svg) no-repeat left center; padding-left: 25px; float: left; width: 100%; text-decoration: none;}

.lang-icon a.btn{ float: right; background: none; width: 100%; padding-left: 0px; text-align: center;}
.lang-icon a span i.material-icons{ vertical-align: -6px}
.btn > span:last-of-type,
        .btn.active > span:first-of-type
        {
            display: none;
        }
 
.btn.active > span:last-of-type {
            display: inline;
        }
.pop{ padding-bottom: 50px}
#page_top{
width: 55px;
height: 56px;
position: fixed;
right: 20px;
bottom: 20px;
background: #222222;
z-index: 10;
border-radius: 100px
}
#page_top a{
  position: relative;
  display: block;
	padding: 13px 0 0 19px;
  text-decoration: none;
}
#page_top a:hover{
	opacity: 0.6;
  	filter: alpha(opacity=60);
  	-ms-filter: "alpha(opacity=60)"; }
#page_top a img{ width: 18px;}
header.under{ background: #fff}

@media screen and (min-width : 768px){
	.pc{ display:inherit;}
	.sp{ display:none; }
	.tb{ display:none; }
	.tbsp{ display:inherit;}
	section h1.title-design1{ padding-bottom: 30px; margin-bottom: 30px; font-size: 1.25rem; }
	
	/* @group Header */
	header{ padding:30px 0 30px; }
	header .hgr nav{ margin-top: 13px}
	.smp-dpmenu{ top: 106px;}
	.main-copy-area{ background: none; height: auto}
	.main-img h1{ display: none}
	.main-img img{ margin: 5px 0 0; width: 97%; }
	
	main{ }
	main section{ margin-top: 100px;}
	.about h1{ font-size: 1.25rem; margin-top: 50px; width: 55%; margin: 0 auto; text-align: center}
	.about h1 span{  display: block}
	.about div{ width: 100%; overflow: hidden; margin-top: 60px; }
	.about div p{ width: 49%; text-align: left; float: left;  font-size: 1.125rem; margin-top: 10px;}
	.about div img{ margin-top: 0; float: right; width: 49%}
	.result h2{ font-size: 1.125rem; margin: 40px 0 24px;}
	
	.result ul{ width: 100%; overflow: hidden; margin-bottom: 20px }
	.result ul li{ width:93.75%; padding: 15px 3%;  list-style-position: inside; list-style-type: disc; font-size: 1.375rem}
	.result ul li span{ color: #000; font-size: 0.875rem; display:inline-block; vertical-align:middle; width: 90%; }
	.result ul li.imglist{ list-style-type: none; overflow: hidden; width: 32.6%; float: left; margin-right: 1%; border-top:none; padding:0 }
	.result ul li:nth-child(3n){ margin-right: 0; }
	.result ul li:nth-child(4n){ clear: both }
	.result ul li.imglist span{ width: 100%; float: none; }
	.result ul li.imglist img{ float: none; width:100%; margin-right: 0; margin-bottom: 10px}
	.result .result-box{ line-height: 180%}
	.result .result-box span{ display: block}
	
	.system{ margin-top: 100px}
	.system h2{ margin: 100px 0 50px; }
	.flow-box{ width: 100%; overflow: hidden; text-align: center; margin-top: 100px}
	.flow-box .flow-slide{ width: 60%; float: left; overflow: hidden}
	.flow-box .flow-illust img{ max-width: 100%; }

	.flow-box .flow-illust{ width: 35%; float: right; margin-top: 50px;}
	.system .flow-box .flow-illust h2{ margin-top: 0}
	.flow-box .flow-slide .flowslide-box{ margin-top: 50px; width: 100%; overflow: hidden; }
	.flow-box .flow-slide .flowslide-box .slider-list{  width: 100%; float: left; margin-right: 0; height: 500px;}
	.flow-box .flow-slide .flowslide-box .slider-list:nth-child(2n){ margin-right: 0}
	.flow-box .flow-slide .flowslide-box .slider-list .list-title{ padding: 6px 0; margin: 8px 0 50px}
	
	button.contact{ width: 535px; margin: 26px auto 0 ; display: block; padding: 0 }
	footer img{ margin-bottom: 28px; width: 350px}
	
	.lang-icon{ width: 34px; float: right; margin-right: 15px; margin-top: 10px}
	.systembox{width: 90%; margin: 50px auto}
	}

/*1200px*/
@media screen and (min-width : 1200px) {
	.pc{ display:inherit;}
	.sp{ display:none; }
	.tb{ display:inherit;}
	.tbsp{ display:none;}
	h1.title-design{ font-size: 2rem; text-align: center;}
	
	section h1.title-design1{ padding-bottom: 34px; margin-bottom: 30px; font-size:  1.5625rem; }
	
	header{ padding: 0; }
	header .hgr{ overflow: hidden; width: 100%; margin: 0 0 18px; }
	header .hgr h1{ width: 332px; float: left; margin-top: 55px; margin-left: 4%}
	header.change-color .hgr h1,header.under .hgr h1{margin-top: 23px; }
	
	header .hgr .head-menu-sub nav.head-sub-left{ width: 100%}
	header .hgr nav{ margin-top: 0}
	header .hgr .grand-menu{overflow: hidden; float: right; width: 715px; background: #fff; border-top-left-radius:100px; border-bottom-left-radius: 100px; margin: 55px 0 0 0 }
	header .hgr .vmgrand-menu{width: 767px;}
	header.change-color .hgr .grand-menu{ margin: 29px 0 0 0 }
	header.under .hgr .grand-menu{ margin: 29px 0 0 0 }
	.head-menu-sub{ float: right; width: 630px; }
	.head-menu-sub-en{ width: 630px;}
	.head-menu-sub-vm{ width: 690px}
	.head-menu-sub-china{ width: 630px}
	.head-menu-sub .head-sub-left ul{ width: 100%; overflow: hidden; margin: 16px 0 12px }
	.head-menu-sub .head-sub-left ul li{ font-size: 1.25rem; text-align: center; float: left; width: auto; font-weight: 500; padding:0 25px;}
	.head-menu-sub .head-sub-left ul li a{ text-decoration: none; padding-bottom: 3px; display: block; border-bottom: 2px solid #FFF;}
	.head-menu-sub .head-sub-left ul li a:hover{ color: #000; border-bottom: 2px solid #FFAE00; }
	.head-menu-sub .head-sub-left ul li:hover{  }
	
	main{ }
	main section{ margin-top: 0;  width: 1200px; }
	
	.main-img{ padding-top: 170px }
	.main-img img{ margin: 5px 0 0; width: 97%; }
	.about{ margin-top: 143px }
	.about h1{ font-size: 1.5625rem; margin-top: 50px; width: 460px; margin: 0 auto; text-align: center}
	.about h1 span{ display: block; letter-spacing: 0.04em;}
	.about div{ width: 100%; overflow: hidden; margin-top: 100px}
	.about div p{ width: 520px; font-size: 1.125rem; line-height: 224%; margin-top: 98px; letter-spacing: 0.12em; }
	.about div p.vm-top{ margin-top: 59px;}
	.about div img{ width: 600px;}
	.result{ padding-top:100px}
	.result h1,.system h1{ margin-bottom: 56px; }
	.result h2{ font-size: 1.5625rem; margin: 0 0 67px; letter-spacing: 0.09em;}
	.result h2.result-title2{margin: 54px 0 35px; font-weight: 500}
	.result ul{ width: 100%; overflow: hidden; margin-bottom: 69px }
	.result ul li{ width:1200px; padding: 20px 28px 26px; font-size: 2rem}
	.result ul li span{ font-size: 1rem;vertical-align:middle; width: 90%; }
	.result ul li.imglist{ margin-bottom: 75px; line-height: 120%}
	.result ul li.imglist{ width: 380px; margin-right: 30px; border-top:none; padding:0 }
	.result ul li.imglist span{ width: 100%; float: none; line-height: 173%}
	.result ul li.imglist img{ margin-bottom: 25px}
	.result .result-box{ padding: 40px 30px; width: 1140px; font-size: 1em; line-height: 200%}
	.result .result-box span{ display: block; font-size: 0.875em}
	.result ul li:nth-child(3n){ margin-right: 0; }
	.result ul li:nth-child(4n){ clear: both }
	.flow-box .flow-illust{ width: 30%; float: right}
	.system h2{ margin: 114px 0 58px; }
	.flow-box .flow-slide{ width: 700px}
	.flow-box .flow-slide .flowslide-box .slider-list{ width: 100%; margin-right: 20px; height: 500px; margin-bottom: 50px}
	.slick-dots{ bottom: -183px;}
	.flow-box .flow-slide .flowslide-box .slider-list ul li{ height: 400px; }
	.flow-box .flow-svg{ width: 264px; float: left; margin-left: 87px;}
	.flow-box .flow-slide .flowslide-box .slider-list ul .slick-dots{ bottom: -420px;}
	.period{ margin-top: 98px; text-align: center}
	.period p{ margin-top: 40px; text-align: left}
	.flow-box .flow-slide .flowslide-box .slider-list ul li img{ width: 100%; height: auto}
	
	.lang-icon{ width: 34px; float: right; margin-right: 0; margin-top: 15px; padding: 0 12px; }
	.lang{width: 100%; float: none; margin-left: 0; margin-top: 0; }
	.lang.open { padding: 5px 0; max-height: 19.5em; border-top: 1px solid #ccc; }
	
	.lang li{ line-height:1em;list-style:none; border-bottom: #000 dashed 1px;  padding:26px 3%; overflow: hidden; text-align: center}
	.lang li a{display:block; width:100%; height:100%; color:#000; background: none; padding-left: 25px; float: left; width: 100%; text-decoration: none;}
	.systembox{width: 1056px; margin: 100px auto}
	main section.period{ padding: 100px 0}
	
}