@charset "UTF-8";
/*----------------------------------------------------------------------------------------------------
 *
 * Theme Name: kankyokagaku, Inc ver1.3
 * Theme URI: 
 * Author: kinjo aimi
 * Author URI: 
 * Description:沖縄県環境科学センターのコーポレートサイト用のテーマ
 * Version: 1.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: wellblue
 *
 *--------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------
 *
 *
 * リセット
 *
 *
--------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font:inherit; font-size:100%; vertical-align:baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
html, body { width:100%; height:100%; line-height:1; }
ol, ul { list-style:none; }
blockquote, q {quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; word-wrap: break-word;}

/*--------------------------------------------------

   Clearfix

--------------------------------------------------*/
.cf { zoom:1; } .cf:before,.cf:after { content:""; display:table; } .cf:after { clear:both; }

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * 基本設定
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
html { overflow:auto; scroll-behavior: smooth; }
@media screen and (max-width:1000px){ body { width:1000px; } }
@media screen and (max-width:766px){ body { width:100%; background:#fff; } }
body {min-height: 100vh; font-family: 'Noto Sans JP', sans-serif;
	display:-webkit-box; display:-ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
a {overflow-wrap: break-word;  line-height: 1.3;} 
a:link,
a:visited {color: #000; ; text-decoration:none; transition:.3s ease;}
a:hover,
a:active {text-decoration:none; transition:.3s ease; }
img { max-width:100%; height:auto; vertical-align:top; backface-visibility:hidden; }
a:link img,
a:visited img {opacity:1.0; transition:.3s ease; }
a:hover img,
a:active img {opacity: 0.6; transition: .3s ease; }
video::-webkit-media-controls-enclosure { overflow:hidden; }
video::-webkit-media-controls-panel { width: calc(100% + 30px); }
/* .fa, .far, .fas {font-family: "Font Awesome 5 Free";} */
sup {
    /* visibility: visible; */
    vertical-align: super;
    font-size: smaller;
}

/* ------------------------------小見出し属性------------------------------　*/
h1 , h2 ,h3 ,h4 ,h5 { margin:0; padding:0; line-height:1.7; margin:0 0 20px 0;}
h1 { font-size:30px; }
h2 { font-size:80px; }
h3 { font-size:28px; }
h4 { font-size:18px; }
h5 { font-size:16px; }

@media screen and (max-width:766px){
	h1 { font-size:24px;}
	h2 { font-size:19px; }
	h3 { font-size:18px; }
	h4 { font-size:16px; }
	h5 { font-size:16px; }
}
p { font-size:16px; margin: 0; padding:0; line-height:1.8; display:block; color:#000; }
ul { margin:0; padding:0; }
li { margin:0; padding:0; font-size:16px; line-height: 1.8;}
i { padding-right:6px; }
img { max-width:100%; height:auto; display:block; }
dt,
dd {line-height: 1.8;}
@media screen and (max-width:766px){
/* 	p { font-size:3.3vw; } */
/* 	li { font-size:3.2vw; } */
}
img.center,.aligncenter { margin:0 auto; display:block; }
img.left { float:left; margin:0 30px 30px 0; }
img.right { float:right; margin:0 0 30px 30px; }
img.photo00 { background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
img.photo-left { transform:rotate(-4deg); -moz-transform:rotate(-4deg); -webkit-transform:rotate(-4deg); background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
img.photo-right { transform:rotate(4deg); -moz-transform:rotate(4deg); -webkit-transform:rotate(4deg); background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
.bold { font-weight:bold; }
.underline { text-decoration:underline; font-weight:bold; }
.red { color:#c40023; font-weight:bold; }
.red_underline { background:linear-gradient(transparent 60%, #ff9999 60%); }
.yellow { color:#000000; font-weight:bold; background:linear-gradient(transparent 60%, #ffff00 60%); }
.green {color:#009e96;}
.center { text-align:center; }
.big { font-size:20px; }
.sp00 { margin-top:0 !important; }
.sp10 { margin-top:10px !important; }
.sp20 { margin-top:20px !important; }
.sp30 { margin-top:30px !important; }
.sp50 { margin-top:50px !important; }
.sp70 { margin-top:70px !important; }
.sp100 { margin-top:100px !important; }
.align_left { text-align:left; }
.align_right { text-align:right; }
.align_center { text-align:center; }
.ffffff { background:#ffffff!important; }
.f7f7f7 { background:#f7f7f7!important; }
@media screen and (max-width:766px){
	img.left , img.right  { float:none; margin:0 auto 20px auto; display:block; }
	.big { font-size:16px; }
}
.pc { display:block!important; }
.sp { display:none!important; }
@media screen and (max-width:766px){
	.pc { display:none!important; }
	.sp { display:block!important; }
}
.back-main-color {background: #ffdc00;}

/* ------------------------------フォント------------------------------　*/
.wf-oswald {font-family: 'Oswald', sans-serif;}
.wf-hiragino {font-family: 'Hiragino Mincho ProN', 'ヒラギノ明朝 ProN', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro', 'YuMinchoW','YuMinchoM','游明朝' ,"Yu Mincho",'YuMincho' , 'HGS明朝E' ,'メイリオ', 'Meiryo', serif; ;}


/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * ヘッダー
 *
 *
 *
 *
--------------------------------------------------------------------------------*/

/* ------------------------------ロゴ・メニューバーエリア------------------------------　*/
.header-pc {display: block;}
.header-sp {display: none;}
header {position: fixed; width: 100%; height: 60px; margin: 0 auto; background: #fff; z-index: 999; border-bottom: 1px solid #eee; top:0;}
header #inner {margin: 0 auto; 
	display:-webkit-box; display:-ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#h1 {margin: 0; padding-left: 30px; }
#h1 img {height: 40px; width: auto; object-fit: contain;}

@media screen and (max-width:1026px){
	#h1 {padding-left: 10px;}
	#global-nav #menu-nav li.btn-contact a {width: 120px;}
}

@media screen and (max-width:966px){
	.header-pc {display: none;}
	.header-sp {display: block;}
	header { position: fixed;width: 100%; top: 0; background: #fff; height: 60px; z-index: 9999; }
  header #header {width: 100%;}
	header #inner { width:100%; height: 60px; position: relative;}
	#h1 { margin: 0; padding-left: 2%;}
}

@media screen and (max-width:466px) {
	header {height: 45px;}
	header #inner {height: 45px;}
	#h1 img  {height: 30px;}
}

@media print {
  header {display: none !important;}
}


/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * グローバルナビゲーション
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
/* ------------------------------グローバルナビゲーション（PC）------------------------------　*/

#check-menu,#btn-menu { display:none; }
.logo_sp { display:none; }
#global-nav #menu-nav { margin: 0; padding: 0; height: 60px;}
#global-nav #menu-nav > li {transition: .3s ease;}
#global-nav #menu-nav > li:hover #menu-nav .sub-menu-nav li a {color: #fff;}
.menu-logo {display: none !important;}


@media screen and (min-width:967px){
	nav#global-nav {max-width: calc(100% - 320px); margin-left: auto;}
	.menu {display: flex;position: relative;}
	.menu .menu_list > a {
		border: 1px solid #ccc;
	    display: block;
	    padding: 10px;
	    text-align: center;
	    transition: .3s;
	}
.menu_contents {
    background: -moz-linear-gradient(left, #02539d, #009e96);
      background: -webkit-linear-gradient(left, #02539d, #009e96);
      background: linear-gradient(to right, #02539d, #009e96);
    display: none;
    position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
}
.menu_contents li a {
    color: #fff;
}


.header-menu {max-width: calc(100% - 320px); margin-left: auto;}
	.menu {position: relative; display: flex;}
	.menu > li {text-align: center; height: 60px; display: flex; align-items: center; justify-content: center;}
	.menu > li p {cursor: pointer;}
	.menu > li a,
	.menu > li p
	 {display: block; padding: 0 20px; font-size: 12px; width: 100%; height: 60px; display: flex; align-items: center; justify-content: center;}
	.menu > li:hover a span,
	.menu > li:hover p span {color: #009e96;  border-bottom: 1px solid #009e96; padding-bottom: 2px; -webkit-transition: all .3s; transition: all .3s;}
	
	.menu__second-level > li {border-top: 1px solid #111;}
	.menu__third-level > li {border-top: 1px solid #111;}
	.sub-menu-nav {display: flex;justify-content: center;}
	.sub-menu-nav > li {border: none;}
	li.menu__mega ul.menu__second-level > li a {color: #fff; padding: 27px 45px; font-weight: bold;}
	li.menu__mega ul.menu__second-level > li {border: none;}
	li.menu__mega ul.menu__second-level > li a:hover {color: #009e96; border: none !important;}
	
	ul.oya > li a {font-size: 14px;font-weight: bold;}
	ul.kodomo {padding-left: 15px;display: block; }
	ul.kodomo > li a {font-size: 12px;font-weight: normal;}
	
	ul.mago {padding-left: 11px;}
	ul.mago > li a {padding: 10px 0; height: auto; justify-content: flex-start; font-weight: normal !important; font-size: 12px;}
	ul.mago > li a:before {content: "ー"; margin-right: 0.2em;}
	
	/*食品メニュー部分*/
	.menu-food-list-wrapper {display: flex;}
	.menu-food-list p {font-size: 12px; color: #fff; padding: 5px 0;}
	
	/*事業紹介メニュー部分*/
	ul.menu-naturalenv {padding: 30px 0;}
	ul.menu-naturalenv > li {padding: 0 10px; text-align: left;}
	ul.menu-naturalenv > li a {padding: 8px 5px !important; height: auto; justify-content: flex-start;}
	ul.menu-naturalenv > li > ol {padding-left: 25px;}
	ul.menu-naturalenv > li > ol > li a {padding: 10px 0; height: auto; justify-content: flex-start; font-weight: normal !important;}
	ul.menu-naturalenv > li > ol > li a:before {content: "ー"; margin-right: 0.2em;}
	
	/*サブメニュー*/
	#global-nav p.init-bottom {cursor:pointer;display: block;
        padding: 0 20px;
        font-size: 12px;
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;}
  #global-nav p.init-bottom:hover span {color: #009e96;  border-bottom: 1px solid #009e96; padding-bottom: 2px; -webkit-transition: all .3s; transition: all .3s;}
}
#global-nav .h-btn {padding: 0; width: 140px;transition: .3s ease; width: 140px; height: 60px; display: flex; align-items: center; justify-content: center; transition: .5s all;}
#global-nav .h-btn a {color: #fff; font-weight: bold;}
#global-nav .btn-contact a {background:  #02539d;}
#global-nav .btn-request a {background:  #009e96;}

#global-nav .h-btn a:hover {-moz-linear-gradient(right, #009e96, #02539d); background: -webkit-linear-gradient(right, #009e96, #02539d); background: linear-gradient(to left, #009e96, #02539d); border-bottom: none !important;}

    
@media screen and (max-width:966px){
	li.menu__mega ul.menu__second-level {flex-wrap: wrap; }
	#menu-nav .menu-logo {display: block !important;}
	ul.kodomo {padding-left: 34px;}
	ul.kodomo > li p {color: #fff; font-size: 12px;}
	ul.mago {padding-left: 18px;}

	/*事業紹介メニュー部分*/
	ul.menu-naturalenv > li a {padding: 8px 5px !important; height: auto; justify-content: flex-start;}
	ul.menu-naturalenv > li > ol {padding-left: 25px;}
	ul.menu-naturalenv > li > ol > li {width: 100% !important;}
	ul.menu-naturalenv > li > ol > li a {padding: 10px 0; height: auto; justify-content: flex-start; font-weight: normal !important;}
}
    
/* ------------------------------グローバルナビゲーション（モバイル）------------------------------　*/
@media screen and (max-width:966px){
	input[type="checkbox"]#check-menu:checked ~ #menu-nav { display:block; height: 100vh; /* margin-top: -60px; */ overflow: scroll; background: -moz-linear-gradient(left, #02539d, #009e96);
    background: -webkit-linear-gradient(left, #02539d, #009e96);
    background: linear-gradient(to right, #02539d, #009e96);
    width: 100%;
    position: fixed;
    /* z-index: 9999; */
    top: 0;
    right: 0;
    -moz-transition: width .2s ease-out;
    -webkit-transition: width .2s ease-out;
    transition: width .2s ease-out;}
	#btn-menu { width:60px; height:60px; display:block;}
	#menu-nav { display:none; list-style:none; }	
	nav#global-nav {width: 60px; margin: 0 auto; position: fixed; z-index: 9999; top: 0; right: 0; 
		-moz-transition: width .2s ease-out; -webkit-transition: width .2s ease-out; transition: width .2s ease-out;}
	#global-nav .sub-menu-head {height: 60px;
    display:-webkit-box !important; display:-ms-flexbox !important; display: flex !important;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
  #global-nav .sub-menu-head p {font-size: 12px; color: #fff; margin: 0; line-height: 1; font-weight: normal;}
  #global-nav .sub-menu-head span {display: block; font-size: 14px; margin-bottom: 6px; font-weight: bold;}
	#global-nav .sub-menu-nav {/* display: none; */}
	#global-nav .sub-menu-head:hover,
	#nav-toggle {display: block;}
	#global-nav .sub-menu-nav a {color: #000;}
	#global-nav .sub-menu-nav a, 
	#global-nav .sub-menu:hover .sub-menu-nav { width: 100%;}
	#global-nav .sub-menu-nav {position: initial !important;background: transparent;/* color: #000; */top: 0;padding: 0px;left: 0;width: 0;height: 100%;overflow: initial;-moz-transition: width .2s ease-out;-webkit-transition: none;transition: none;width: 100%;display: none;}
	#global-nav .sub-menu-nav li:last-child {margin-bottom: 10px;}
	#menu-nav .sub-menu-nav ul > li a {font-size: 12px !important; height: auto; padding: 15px 5px !important;  position: relative;}
	#menu-nav .sub-menu-nav ul > li a:before {content: "ー"; font-weight: 600; position: absolute; top: 50%; left: -0.5em; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
/* 	#global-nav #menu-nav li.btn-contact {display: none;} */
	#global-nav > ul > li {position: relative; display: block; height: auto; margin: 0 auto; padding: 0; clear: both;}
  #global-nav > ul > li:first-child {margin-bottom: 50px;}
  #global-nav > ul > li:not(:first-child) {border-top: 1px solid #fff; width: 90%;}
  #global-nav > ul > li:first-child h1 {margin-bottom: 0; padding-left: 2%; height: 60px; display: flex; align-items: center;}
  #global-nav > ul > li:first-child img {height: 40px; width: auto; object-fit: contain;}
	#global-nav #menu-nav a {text-decoration: none; display: block; padding: 20px 0; font-weight: normal; text-align: left; color: #fff; font-size: 12px;
		-moz-transition: background-color .3s linear; -webkit-transition: background-color .3s linear; transition: background-color .3s linear; justify-content: flex-start;}
	#global-nav .sub-menu.is-active > a,
	#global-nav .sub-menu-nav a,
	#global-nav .sub-menu-head {position: relative; padding: 20px 0; font-size: 14px; font-weight: bold;}
	#global-nav .sub-menu-nav a:before {content: "ー"; margin-right: 0.2em;}
	#global-nav .sub-menu.is-active > a:after,
	#global-nav .sub-menu-head:hover:after { border-color: #fff;}
}


   

/* ------------------------------navアコーディオン------------------------------　*/
@media screen and (max-width:966px){
	/*SP スライドメニュー　ボタン*/
	#slide_button {position: absolute; top: 0px; right: 0; width: 60px; height: 60px; outline: none; border: none; cursor: pointer; z-index: 100; transition: all 0.3s;}
	#slide_button.active {background: transparent;}
	#slide_button span {display: inline-block; box-sizing: border-box; position: absolute; right: 10px; width: 27px; height: 2px; background: #000; transition: all .1s; color: #fff;}
	#slide_button span:nth-of-type(1) {top: 20px; width: 45px;}
  #slide_button span:nth-of-type(2) {top: 29px; width: 30px;}
  #slide_button span:nth-of-type(3) {top: 38px; width: 15px;}
	
	/*active*/
	#slide_button.active span:nth-of-type(2) {opacity: 0;}
  #slide_button.active span:nth-of-type(1) {transform: translateY(-11px) rotate(45deg); top: 40px; background: #fff; width: 30px;}
  #slide_button.active span:nth-of-type(3) {transform: translateY(-50px) rotate(-45deg); top:79px; background: #fff; width: 30px;}
	li.accordion {display: block;}
	li.accordion .sub-menu-head { display:block; width:100%; height:auto; line-height:1.4; cursor:pointer; margin: 0;display: flex; position: relative; padding-right: 10%; }
	.op_plus {position: absolute; right: 0; width: 18px; height: 18px; margin: 0 5px;}
	.op_plus:before, 
	.op_plus:after {display: block; content: ''; background-color: #fff; border-radius: 10px; position: absolute; width: 18px; height: 2px; top: 8px; left: 0; z-index: 0;}
	.op_plus:before {width: 2px; height: 18px; top: 0; left: 8px;}
	.close .op_plus:before {display: none;}
	.close .op_plus:after {display: block; content: ''; border-radius: 10px; position: absolute; width: 18px; height: 2px; top: 7px; left: 0;}
	.up-arrow {transform: rotateX(180deg) !important; top: 35% !important; right: 2% !important; -ms-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
	li.accordion .sub-menu-head.close { box-shadow:none }
	li.accordion .sub-menu-nav {width:100%;height:auto;/* display:none; */margin:0;padding:30px 30px 10px 45px;}
	li.accordion br { display:inline; }
	a.init-bottom {display: none !important;}
}
@media screen and (max-width:466px){
	#slide_button  {width: 45px; height: 45px; }
	#slide_button span:nth-of-type(1) {top: 10px}
	#slide_button span:nth-of-type(2) {top: 20px;}
	#slide_button span:nth-of-type(3) {top: 30px;}
	#slide_button.active span:nth-of-type(1) {top: 33px;}
	#slide_button.active span:nth-of-type(3) {top: 72px;}
}











/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * メインビジュアル
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
#kv {height: 100vh; /* margin-top: 60px; */ position: relative;}
#kv #kv_inner {height: 100vh; position: relative;}
#kv .btn-more-wrapper {margin-top: 20px;}
#kv .btn-wrapper {text-align: left;}
#kv a.btn-more {color: #fff;}
#kv .btn-border {border-bottom: 1px solid #fff;}
#kv .kv-bottom {position: absolute; bottom: -40px; left: 0; width: 100%; height: 150px; background: #fff; z-index: 100; display: flex; align-items: center; justify-content: center;}
#kv .kv-bottom ul li {position: relative; flex-basis: 100%; padding: 5px 0;}
#kv .kv-bottom ul li a {width: 400px; height: 40px; display: flex;  align-items: center; justify-content: center; color: #009e96; font-size: 12px; border: 1px solid #000; margin: 0 auto;}
#kv nav.nav-bottom {position: absolute; bottom: 0px; right: 0; z-index: 99;}
#kv nav.nav-bottom ul {background: #fff; display: flex; flex-wrap: wrap;}
#kv nav.nav-bottom ul li {position: relative;}
#kv nav.nav-bottom ul li a {height: 50px; display: flex;  align-items: center; justify-content: center; padding: 0 45px;}
#kv nav.nav-bottom ul li h3 {font-size: 14px; margin: 0;}

@media screen and (max-width:766px){
	#kv nav.nav-bottom {width: 100%; bottom: 60px; height: 75px;}
	#kv nav.nav-bottom ul li {width: 100%;}
	#kv nav.nav-bottom ul li a {height: auto; padding: 3.5% 4%; }
	#kv nav.nav-bottom ul li h3 {flex-basis: 100%;}
	#kv .kv-bottom {bottom: 60px; height: 120px;}
	#kv .kv-bottom ul {height: auto; width: 100%;}
	#kv .kv-bottom ul li {border-top: 1px solid #000; padding: 0;width: 100%;}
	#kv .kv-bottom ul li:not(:first-of-child) {border-bottom: 1px solid #000;}
	#kv .kv-bottom ul li a {width: 100%; height: 60px; font-size: 4vw; border: none;}
	#kv .btn-wrapper {text-align: center;}
}

@media screen and (max-width:466px){
	#kv .kv-bottom {height: 6em;}
	#kv .kv-bottom ul li a {height: 3em;}
	#kv nav.nav-bottom {height: 4.5em; bottom: calc(6em + 60px);}
}

@media print {
	#kv {height: 700px;}
	#kv #kv_inner {height: 700px;}
	#kv nav.nav-bottom {bottom: 100px;}
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {position:relative; z-index: 1; height: 100vh;}
.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
.slider-item .catch-wrapper {max-width: 1000px;
    width: 96%;
    /* margin: 160px auto; */
    /* padding-top: 60px; */
    height: 100vh;
    display: flex;
    align-items: center;
    margin: 0 auto;}
.slider-item .catch {width: 45%; margin-right: auto;}
.slider-item h1 {font-size: 39px; color: #fff; letter-spacing: 0.2em; line-height: 1.6;}
.slider-item h1 span {display: block; font-size: 29px; margin-bottom: 0px; letter-spacing: 0;}
.slider-item p {color: #fff; font-size: 14px;}
.slider-item img {width: 130px; margin: 25px 0 0 0;}
.slider-item ol {color: #fff; font-size: 12px;}
.slider-item ol {margin-top: 30px;}
.slider-item ol > li {position: relative; padding-left: 1em; font-size: 12px;}
.slider-item ol > li:before {content: "・"; font-weight: 600; position: absolute; top: 17%; bottom: 50%; left: 0.5em; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

.slider-item01 {
	background-image: url(img/sustainable.jpg);
  background-image: image-set(url(img/sustainable.jpg) 1x, url(img/sustainable@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/sustainable.jpg) 1x, url(img/sustainable@2x.jpg) 2x);
  background-position: 50% 50%;
}
.slider-item02 {
	background-image: url(img/naturalenv.jpg);
  background-image: image-set(url(img/naturalenv.jpg) 1x, url(img/naturalenv@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/naturalenv.jpg) 1x, url(img/naturalenv@2x.jpg) 2x);
  background-position: 50% 50%;
}
.slider-item03 {
	background-image: url(img/livingenv.jpg);
  background-image: image-set(url(img/livingenv.jpg) 1x, url(img/livingenv@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/livingenv.jpg) 1x, url(img/livingenv@2x.jpg) 2x);
  background-position: 50% 50%;
}
.slider-item04 {
	background-image: url(img/drink.jpg);
  background-image: image-set(url(img/drink.jpg) 1x, url(img/drink@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/drink.jpg) 1x, url(img/drink@2x.jpg) 2x);
  background-position: 50% 50%;
}
.slider-item05 {
	background-image: url(img/food.jpg);
  background-image: image-set(url(img/food.jpg) 1x, url(img/food@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/food.jpg) 1x, url(img/food@2x.jpg) 2x);
  background-position: 50% 50%;
}
.slider-item06 {
	background-image: url(img/quality.jpg);
  background-image: image-set(url(img/quality.jpg) 1x, url(img/quality@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/quality.jpg) 1x, url(img/quality@2x.jpg) 2x);
  background-position: 50% 50%;
}

/*ドットナビゲーションの設定*/
.slide-dots {position: absolute; z-index: 3; text-align: center; margin: 0px 0 0 0; right: 40px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.slick-arrow {display: none !important;}
.slide-dots li {margin: 0 15px;}
.slide-dots button {position: relative; text-indent: -9999px; margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.slide-dots button:before {content: ''; font-size: 20px; text-indent: 0px; position: absolute; top: 0; left: 0; background: #fff; width: 6px; height: 6px; border-radius: 50%;}
.slick-active button:before {content: ''; background: #fff; width: 12px; height: 12px; border-radius: 50%; left: -3px; top: -3px;}

@media screen and (max-width:766px) {
	.slide-dots {right: 4%; top: 40vh;}
	.slide-dots button {margin: 20px 0;}
	.slide-dots button:before {width: 12px; height: 12px;}
	.slick-active button:before {width: 20px; height: 20px; top: -7px; left: -4px;}
	.slider-item {height: calc(100vh - 135px);}
	.slider-item .catch-wrapper {margin: 60px auto; height: calc(100% - 60px); display: flex; align-items: center;}
	.slider-item .catch {width: 70%; margin-left: auto;}
	.slider-item h1 {font-size: 6vw; text-align: center;}
	.slider-item h1 span {margin-bottom: 10px; font-size: 3.4vw;}
	.slider-item p {font-size: 3vw;}
	.slider-item img {width: 100px; margin: 20px auto;}
	
	.slider-item01 {
	background-image: url(img/sustainable-sp.jpg);
  background-image: image-set(url(img/sustainable-sp.jpg) 1x, url(img/sustainable-sp@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/sustainable-sp.jpg) 1x, url(img/sustainable-sp@2x.jpg) 2x);
  background-position: 50% 50%;
}
.slider-item02 {
	background-image: url(img/naturalenv-sp.jpg);
  background-image: image-set(url(img/naturalenv-sp.jpg) 1x, url(img/naturalenv-sp@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/naturalenv-sp.jpg) 1x, url(img/naturalenv-sp@2x.jpg) 2x);
  background-position: 50% 50%;
}
.slider-item03 {
	background-image: url(img/livingenv-sp.jpg);
  background-image: image-set(url(img/livingenv-sp.jpg) 1x, url(img/livingenv-sp@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/livingenv-sp.jpg) 1x, url(img/livingenv-sp@2x.jpg) 2x);
  background-position: 50% 50%;
}
.slider-item04 {
	background-image: url(img/drink-sp.jpg);
  background-image: image-set(url(img/drink-sp.jpg) 1x, url(img/drink-sp@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/drink-sp.jpg) 1x, url(img/drink-sp@2x.jpg) 2x);
  background-position: 50% 50%;
}
.slider-item05 {
	background-image: url(img/food-sp.jpg);
  background-image: image-set(url(img/food-sp.jpg) 1x, url(img/food-sp@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/food-sp.jpg) 1x, url(img/food-sp@2x.jpg) 2x);
  background-position: 50% 50%;
}
.slider-item06 {
	background-image: url(img/quality-sp.jpg);
  background-image: image-set(url(img/quality-sp.jpg) 1x, url(img/quality-sp@2x.jpg) 2x);
  background-image: -webkit-image-set(url(img/quality-sp.jpg) 1x, url(img/quality-sp@2x.jpg) 2x);
  background-position: 50% 50%;
}
}

@media screen and (max-width:466px) {
	.slider-item {height: calc(100vh - (10.5em + 60px) );}
	.slider-item .catch-wrapper {/* height: calc(100vh - (10.5em + 60px) ); */ height: calc(100vh - (18em + 60px) ):}
	.slider-item .catch {width: 80%;}
	.slider-item img {width: 70px; margin: 10px auto;}
	.slider-item p {font-size: 10px;}
	.slide-dots {bottom: -15px !important;}
	.slide-dots button {margin: .5em 0;}
	.slide-dots button:before {width: 10px; height: 10px;}
	.slick-active button:before {width: 13px; height: 13px; top: -2px; left: -4px;}
	#kv .btn-wrapper {margin-top: 0;}
}

@media print {
	.slider {height: 700px;}
	.slider-item {height: 600px;}
	.slider-item .catch-wrapper {max-width: 1200px;
		display: flex;
    align-items: center;
    justify-content: center;
    height: 700px;
    margin: 0 auto;}
}


/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * コンテンツ
 *
 *
 *
 *
--------------------------------------------------------------------------------*/

/* ------------------------------共通------------------------------　*/
section { width:100%; }
section .inner {max-width:1000px; width: 96%; margin:0 auto; padding:100px 0;}
/*
section .big-ttl h2 {font-size: 70px; color: #fff; margin: 0; line-height: 1.5;}
section .big-ttl p {font-size: 30px; color: #fff;}
*/
section .top-ttl { margin : 0 auto 4px; padding-left: 45px;}
section .top-ttl h2 {font-size:37px; font-weight: 400; line-height: 1.4; text-align: left; margin-bottom: 0px; position: relative}
section .top-ttl h2:before {content: '';
    width: 25px;
    height: 1px;
    display: inline-block;
    background-color: #009e96;
    position: absolute;
    top: 50%;
    left: -30px;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);}
section .top-ttl p {font-size: 14px; letter-spacing: 2px; /* margin-top: 10px; */ color: #009e96;}

/*
.btn {background: #0089d7; color:#fff !important; width: 200px; height: 55px; text-align: center; margin: auto; border-radius: 5px; font-weight: bold; font-size: 16px; 
	display:-webkit-box; display:-ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;} 
.btn:hover {background: none; color:#0089d7 !important; border: 1px solid #0089d7;}
*/

.btn-wrapper {text-align: right; margin-top: 20px;}
/* .news a.btn-more {display: inline-block; padding: 10px 20px; border-bottom: 1px solid #009e96;} */

/*moreボタン*/
.btn-more-wrapper {display: inline-block; margin-top: 40px; min-width: 140px; position: relative; text-align: center;}
a.btn-more {color: #000; font-size: 14px; display: block;}
a.btn-more span {font-size: 12px; display: block; position: absolute; right: 0; bottom: 50%;}
.btn-border{ border-bottom: 1px solid #009e96;  margin-top: 15px; }

@media screen and (max-width:1026px) {
	section .top-ttl {width: 90%;}
}

@media screen and (max-width:766px) {
	section .inner { width:90%; padding:60px 0; /* overflow: hidden; */}
	section .big-ttl h2 {font-size: 8vw; display: inline-block;}
	section .big-ttl p {font-size: 5.4vw;}
	section .top-ttl {margin: 0 auto 5%; padding-left: 0; text-align: center;}
	section .top-ttl h2 {font-size: 10vw; margin-bottom: 0px; text-align: center; display: inline-block;}
/*
	section .ttl {margin-bottom: 2em;}
	section .ttl h2 {font-size: 5.2vw; text-align: center; line-height: 1.5;}
	section .ttl h2 span {font-size: 4vw;}
*/

.btn-wrapper {text-align: center;}
.btn-more-wrapper {width: 40%;}
	.arrow-wrapper {left: -3vw;}
/* 	p.arrow::after {left: -3vw;} */
/* 	a.btn-more {font-size: 3.2vw;} */
/* 	a.btn-more span {font-size: 3.2vw;} */

}



/* ------------------------------　記事関連（下層）------------------------------　*/
/*
 ul.post { width: 100%; }
 ul.post li { width:100%; padding: 10px 0; background:#fff; 
	display:-webkit-box; display:-ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
ul.post li .date-wrapper .category {display: inline-block; margin: 2px 5px !important;}
ul.post li .category a {padding: 1px 7px; border-radius: 2px; display: inline-block; width: 100%; font-size: 12px; border: 1px solid; border-color: currentColor;}
ul.post li .category a:hover {background: currentcolor; }
ul.post li .date-wrapper .ymd {float: left; padding: 2px 0;}
ul.post li .date-wrapper .ymd:after {content: '/'; padding: 0 10px;}
ul.post li h3 {font-size:24px; margin:20px 0; }
ul.post li p {font-size:18px; margin:0;}

@media screen and (max-width:766px){
	ul.post {margin-top: 25px;}
	ul.post li { width:100%; flex-basis:100%; margin:10px 0;  background:#fff; display: block;}
	ul.post li h3 {font-size: 6vw;}
	ul.post li p {font-size:4vw; margin:0;}
}
*/

/*--------------------------------------------------------------------------------
 * ページ全体入れ替え
--------------------------------------------------------------------------------*/
/*
@media screen and (max-width:766px){
	article#page_top {display: flex; flex-wrap: wrap;}
	#page_top .news {order: 1;}
	#page_top .about {order: 2;}
	#page_top .parallax01 {order: 3;}
	#page_top .tsunagari {order: 4;}
	#page_top .tourism {order: 5;}
	
	#page_top .topics {order: 7;}
	#page_top .parallax02 {order: 8;}
	#page_top .sustainable {order: 6;}
	#page_top .banner {order: 9;}
}
*/

/*--------------------------------------------------------------------------------
 * parallax
--------------------------------------------------------------------------------*/
/*
.parallax01 {height: 100vh;}
.parallax01-fix::before {
  background: url(img/parallax-01.jpg) no-repeat center;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;}
.parallax02 {height: 100vh;}
.parallax02-fix::before {
  background: url(img/parallax-02.jpg) no-repeat center;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;}

@media screen and (max-width:766px){
	.parallax01,
	.parallax02 {height: 50vh;}
	.parallax01-fix::before {background: url(img/parallax-01_sp.jpg) no-repeat center; background-size: cover;}
	.parallax02-fix::before {background: url(img/parallax-02_sp.jpg) no-repeat center; background-size: cover;}
}
*/


/*--------------------------------------------------------------------------------
 * news
--------------------------------------------------------------------------------*/
#page_top .news .inner {padding: 60px 0;}
#page_top .news .news-wrapper {display: flex; justify-content: space-between; } 
#page_top .news .top-ttl {flex-basis: 30%;}
#page_top .news ul {flex-basis: 70%;}
/* #page_top .news ul li {display: flex;} */
#page_top .news ul li a {display: flex; align-items: center; padding: 15px 0;}
#page_top .news ul li h3 {font-size: 14px; margin-bottom: 0;}
.category {width: 70px; font-size: 12px; border: 1px solid #009e96; color: #009e96; padding: 0px; text-align: center;}
.ymd {font-size: 14px; color: #009e96; padding: 0 30px;}
#page_top .news .btn-more-wrapper {margin-top: 10px;}
#page_top .news .new-tag { color: #009e96; flex-basis: 10%;}
#page_top .news .txt-wrapper {padding: 0; flex-basis: 85%;display: flex;}


@media screen and (max-width:766px){
	#page_top .news .inner {padding: 40px 0 70px 0;}
	#page_top .news .news-wrapper {flex-wrap: wrap;}
	#page_top .news .txt-wrapper {flex-wrap: wrap;}
	#page_top .news .top-ttl {flex-basis: 100%;}
	#page_top .news ul {flex-basis: 100%;}
	#page_top .news ul li a {font-size: 3.4vw; max-width: none; width: 100%; height: auto; padding: 4% 0; display: flex; align-items: flex-start; flex-wrap: wrap;}
  #page_top .news ul li h3 {flex-basis: 100%; padding-top: 2%;}
  .ymd {padding: 0 3%;}
}

@media print {
	#page_top .news .inner {
		padding: 0;
	}
}

/*--------------------------------------------------------------------------------
 * business
--------------------------------------------------------------------------------*/
#page_top .business {background: -moz-linear-gradient(left, #02539d, #009e96); background: -webkit-linear-gradient(left, #02539d, #009e96); background: linear-gradient(to right, #02539d, #009e96); background-size: 40%;}
#page_top .business .inner {padding: 0; width: 100%; max-width: 100%;}
#page_top .business .business-wrapper {display: flex; justify-content: space-between; max-width: calc(100% - (50% - (1000px / 2))); margin-left: auto;}
#page_top .business .business-ttl {flex-basis: 30%; padding-top: 95px;}
#page_top .business .business-ttl h2 {color: #fff;}
#page_top .business .business-ttl h2:before {background-color: #fff;}
#page_top .business .business-ttl p {color: #fff;}
#page_top .business ul {flex-basis: 70%; display: flex; flex-wrap: wrap;/*  align-items: center; */ justify-content: space-between;}
#page_top .business ul li {flex-basis: calc(100% / 2); background-size: cover; background-position: center; max-height: 220px;}

#page_top .business ul li:first-child {background-image: url(img/business-01.jpg); }
#page_top .business ul li:nth-of-type(2) {background-image: url(img/business-02.jpg); }
#page_top .business ul li:nth-of-type(3) {background-image: url(img/business-03.jpg); }
#page_top .business ul li:nth-of-type(4) {background-image: url(img/business-04.jpg); }
#page_top .business ul li:nth-of-type(5) {background-image: url(img/business-05.jpg); }
#page_top .business ul li:nth-of-type(6) {background-image: url(img/business-06.jpg); }
#page_top .business ul li a {display: block; text-align: center;  min-height: 220px;position: relative; transition: all 0.5s; display: flex; align-items: center; justify-content: center;}
#page_top .business ul li:hover a {background-color:rgba(255,255,255,.2);}
#page_top .business ul li a img {width: 100px; margin-left: 20px;}
#page_top .business ul li .ttl-wrapper h3 {color: #fff; font-size: 30px;  margin-bottom: 0px;}
#page_top .business ul li .ttl-wrapper p  {color: #fff; font-size: 12px;}
#page_top .business ul li .ttl-wrapper h6 { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; font-size: 20px;}
#page_top .business ul li .btn-more-wrapper {min-width: 74px; margin-top: 0; position: absolute; bottom: 0px; right: 0px; font-size: 12px; -webkit-transform: translate(-50%,-50%); transform:translate(-50%,-50%);}
#page_top .business ul li .btn-more-wrapper p {color: #fff; position: relative;}
#page_top .business ul li .btn-more-wrapper p:after {content: ''; width: 25px; height: 1px; display: inline-block; background-color: #fff; position: absolute; top: 50%; right: -30px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
#page_top .business ul li .btn-more-wrapper .btn-border {margin-top: 0;}
#page_top .business .arrow-wrapper {top: 250px;}

@media screen and (min-width:1026px){
	#page_top .business {background-size: 50%;}
}

@media screen and (max-width:766px){
	#page_top .business {background-size: 100%;}
	#page_top .business .business-wrapper {flex-wrap: wrap;}
	#page_top .business .business-ttl {flex-basis: 100%; padding-top: 60px; padding-bottom: 80px;}
	#page_top .business ul {flex-basis: 100%;}
	#page_top .business ul li {flex-basis: 100%;}
	#page_top .business ul li .btn-more-wrapper {width: auto;}
	#page_top .business ul li .btn-more-wrapper p:after {right: -20px;}
}

/*--------------------------------------------------------------------------------
 * company
--------------------------------------------------------------------------------*/
#page_top .company .top-ttl {max-width: 1000px; width: 96%; margin: 0 auto; padding: 90px 0 35px 45px;}
#page_top .company .company-wrapper {background-color: rgba(0,0,0,.1);}
#page_top .company ul {max-width: 1000px; width: 96%; margin: 0 auto; padding: 100px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
#page_top .company ul li {flex-basis: 32.5%; margin: 5px 0; background: #fff;}
#page_top .company ul li a {background: #fff; display: block; width: 100%; text-align: center;  width: 100%; padding: 25px 0; font-size: 20px;}
#page_top .company ul li a:hover {background: #e5f5f5;}
#page_top .company ul li a span {color: #009e96; font-size: 12px; display: block; margin-top: 10px;}
/* #page_top .vertical  {-ms-writing-mode: tb-rl;writing-mode: vertical-rl; text-orientation: upright;} */
/*
.arrow-wrapper {position: absolute; top: 0; left: 5%;}
p.arrow {position: relative; display: inline-block; font-size: 16px; height: 70px; line-height: 70px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: mixed;}
p.arrow::after {content: ''; position: absolute; left: 0; right: 0; top: 50px; width: 2px; height: 50vh; margin: auto; background-color: #eee;}
*/

@media screen and (max-width:766px){
	#page_top .company .top-ttl {padding: 65px 0 65px 0;}
	#page_top .company ul li {flex-basis: 100%;}
	#page_top .company ul li a {padding: 33px 0;}
}





/*--------------------------------------------------------------------------------
 * topics
--------------------------------------------------------------------------------*/
#page_top .topics {background: #fff;}
#page_top .topics .top-ttl {margin-bottom: 30px;}
#page_top .topics ul li {border-bottom: 1px solid #aaa; padding: 30px 0; position: relative;}
#page_top .topics ul li a {display: block;}

#page_top .topics ul li a.btn-more {position: absolute; bottom: 30px; right: 40px;}
#page_top .topics ul li a.btn-more:after {content: ''; width: 25px; height: 1px; display: inline-block; background-color: #009e96; position: absolute; top: 55%; right: -50px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

#page_top .topics ul li .topics-wrapper {display: flex; flex-wrap: wrap;  justify-content: space-between;}
#page_top .topics ul li .img-wrapper {flex-basis: 20%;}
#page_top .topics ul li img {width: 100%; height: 140px; object-fit: cover;}
#page_top .topics ul li .txt-wrapper {flex-basis: 80%; padding-left: 50px; padding-right: 20%;}
#page_top .topics ul li p {font-weight: normal; font-size: 14px;}
#page_top .topics ul li p.ymd {font-size: 14px; padding: 0; margin-bottom: 10px;}
#page_top .topics ul li h3 {font-size: 14px; margin-bottom: 10px;}
#page_top .topics ul li .topics-btn {font-size: 16px; letter-spacing: 3px; color: #000;}

@media screen and (max-width:766px){
	#page_top .topics .inner {padding: 15% 0 60px 0;}
	#page_top .topics ul li {flex-basis: 100%; width: 100%; margin: 0 0 2% 0;}
	#page_top .topics ul li a:last-of-type {bottom: 20px;}
	#page_top .topics ul li .txt-wrapper {flex-basis: 100%; padding-left: 0; padding-right: 0; display: flex; flex-direction: column-reverse;}
	#page_top .topics ul li .img-wrapper {flex-basis: 100%; margin-bottom: 5%;}
	#page_top .topics ul li img {height: 35vh;background: #f3f3f3;}
	#page_top .topics ul li p.ymd {font-size: 3.4vw; margin-bottom: 0;}
	#page_top .topics ul li h3 {font-size: 3.4vw; margin: 2% 0 5% 0;}
	#page_top .topics ul li p:not(p.ymd) {display: none;}
	#page_top .topics ul li .topics-btn {font-size: 3.7vw;}
}

/*--------------------------------------------------------------------------------
 * cta-top
--------------------------------------------------------------------------------*/
.cta-top ul {display: flex; flex-wrap: wrap;}
.cta-top ul li:not(:first-child),
.cta-top ul li:not(:nth-of-type(2)) {flex-basis: 100%;}
.cta-top ul li:first-child {flex-basis: 50%;}
.cta-top ul li:nth-of-type(2) {flex-basis: 50%;}
.cta-top ul li a {height: 200px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff;}
.cta-top ul li:first-child a {background: #009e96;}
.cta-top ul li:nth-of-type(2) a {background: #81b4af; font-size: 30px;}
.cta-top ul li:nth-of-type(2) a span {font-size: 24px; margin-right: 10px; margin-bottom: -5px;}
.cta-top ul li:nth-of-type(odd) {background: #b1b1b1;}
.cta-top ul li:nth-of-type(even) {background: #808080;}
.cta-top ul li p {font-size: 30px; text-align: center; color: #fff;}
.cta-top ul li p span {font-size: 16px; font-family: 'Noto Sans JP', sans-serif; display: block;}
.cta-top ul li img {margin-right: 20px;}

@media screen and (max-width:766px){
	.cta-top ul li:first-child {flex-basis: 100%;}
	.cta-top ul li:nth-of-type(2) {flex-basis: 100%;} 
	.cta-top ul li a {height: 130px;}
}



/*--------------------------------------------------------------------------------
 * cta
--------------------------------------------------------------------------------*/
.cta .inner {padding: 130px 0 170px 0;}
.cta ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
.cta ul li {flex-basis: 48.5%; margin: 14px 0;}
.cta ul li a {font-size: 32px; height: 100px; display: flex; align-items: center; justify-content: center;}
.cta ul li:first-of-type a {background: #009e96; color: #fff; }
.cta ul li:nth-of-type(2) a {background: #ececec; color: #009e96; border: 1px solid #aaa;}
.cta ul li:nth-of-type(3) a {background: #fff; color: #009e96; border: 1px solid #aaa;}
.cta ul li:last-of-type a {background: #82b5b0; color: #fff;}
.cta ul li a:hover {background: #e5f5f5; border: none;}

@media screen and (max-width:766px){
	.cta .inner {padding: 90px 0 90px 0;}
	.cta ul {flex-wrap: wrap;}
  .cta ul li {flex-basis: 100%; margin: 3% 0;}
	.cta ul li a {font-size: 21px; height: 80px;}
}

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * フッター
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
footer {background: #e5e5e5; position: relative;}
footer .inner {display: flex; justify-content: space-between; max-width: 100%; padding: 50px 5% 25px 5%; }
footer .footer-left {flex-basis: 25%;}
footer .footer-left img {width: 255px; }
footer .footer-left p:first-of-type {margin: 20px 0; line-height: 1.7; font-size: 12px;}
footer .footer-left p:nth-of-type(2) {font-size: 10px; color: #333;}
footer .footer-left p:last-of-type {font-size: 10px; color: #333;}

footer .footer-left ul > li {margin: 15px 0;}
footer .footer-left ul > li a {height: 40px; display: block; position: relative; background: #fff; color: #009e96; display: flex; align-items: center; justify-content: center; position: relative;}
footer .footer-left ul > li a img {position: absolute; width: 15px; left: 15px;}
footer .footer-left ul vli a:hover {background: #e5f5f5;}
footer .footer-left ul > li:first-of-type a {font-size: 14px; font-weight: bold;}
footer .footer-left ul > li:last-of-type a {font-size: 18px;}
footer .footer-left ul > li:last-of-type a span {font-size: 14px; padding-right: 5px;}

footer .footer-right {flex-basis: 70%; display: flex;}
footer .footer-middle {flex-basis: 75%;}
footer .footer-middle nav {display: flex; flex-wrap: wrap;}
footer .footer-middle ul {flex-basis: 32%;} 
footer .footer-middle ul:not(:last-of-type) {
    margin-right: 1.5%;
}
footer .footer-middle ul > li a {display: block; padding: 15px 0; font-size: 14px;}
footer .footer-middle ol {margin-bottom: 10px;}
footer .footer-middle ol > li a {position: relative; color: #808080; padding: 5px 0 5px 10px;
    font-size: 12px;}
footer .footer-middle ol > li a:after {content: "-"; font-weight: 600; position: absolute; top: 50%; left: 0.3em; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 1;}

footer .footer-sub {margin-top: 80px;}
footer .footer-sub ul {display: flex;}

footer .footer-sub ul li:not(:last-of-type) {margin-right: 2%;}

footer .footer-sub ul:first-of-type li {flex-basis: 32%;}
footer .footer-sub ul:first-of-type li a {display: block; font-size: 12px;  text-align: center; padding: 10px 10px;} 
footer .footer-sub ul:first-of-type li:nth-of-type(1) a { background: #fff; padding: 10px 10px 10px 2em; font-weight: bold; position: relative;}
footer .footer-sub ul:first-of-type li:nth-of-type(1) a img {position: absolute;
    /* left: 10px; */
    top: 50%;
    left: 1.5em;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);}
footer .footer-sub ul:first-of-type li:nth-of-type(2) a {background: #009e96; color: #fff;}
footer .footer-sub ul:first-of-type li:nth-of-type(3) a {background: #02539d; color: #fff;}


footer .footer-sub ul:last-of-type li a {font-size: 10px; margin-right: 1em; color: #404040;}




footer .footer-bottom {position: relative; flex-basis: 25%;}
footer .footer-bottom > ul {display: flex;
    
    position: absolute;
    bottom: 15px;}
footer .footer-bottom > ul li {padding: 0 5px;}
footer .footer-bottom > ul li a {display: block;}
footer .footer-bottom > ul li img {width: 65px; height: 65px;}




address {font-size: 10px; color: #333; margin-top: 30px;}

@media screen and (max-width:766px){
	footer .inner {flex-wrap: wrap; padding: 50px 5% 0px 5%;}
	
	footer .footer-left {flex-basis: 100%; margin-bottom: 10%;}
	footer .footer-left img {margin: 0 auto;}
	footer .footer-left p:first-of-type {font-size: 14px; text-align: left;}
	footer .footer-left p:nth-of-type(2) {text-align: left; font-size: 3.4vw;}
	footer .footer-left p:last-of-type {text-align: left; font-size: 3.4vw;}
	
	footer .footer-left ul li a {height: 55px;}
	footer .footer-left ul li:first-of-type a {font-size: 18px;}
	footer .footer-left ul li:last-of-type a {font-size: 22px;}
	footer .footer-left ul li:last-of-type a span {font-size: 18px;}
	footer .footer-left ul li a img {width: 25px;}

	footer .footer-right {flex-basis: 100%; flex-wrap: wrap;}
	
	footer .footer-middle {flex-basis: 100%;}
	footer .footer-middle ul {flex-basis: 100%;}
	footer .footer-middle ul:last-of-type {display: flex; /* flex-basis: 100%;  flex-wrap: wrap; text-align: center; */ }
	footer .footer-middle ul:last-of-type li {flex-basis: 100%; text-align: left;}
	footer .footer-middle ul > li a {font-size: 12px;}
	
	
	footer .footer-sub {margin-top: 30px;}
	footer .footer-sub ul {display: block;}
	
	footer .footer-sub ul:first-of-type li {flex-basis: 100%; margin: 10px 0;}
	footer .footer-sub ul:first-of-type li a {font-size: 23px; height: 50px; display: flex;
    align-items: center;
    justify-content: center;}
	footer .footer-sub ul li:not(:last-of-type) {margin-right: 0;}
	footer .footer-sub ul:last-of-type {margin-top: 40px; display: block;}
	footer .footer-sub ul:last-of-type li a  {font-size: 12px; margin-right: 0; text-align: center;}
	footer .footer-sub ul:first-of-type li:nth-of-type(1) a {font-size: 20px;  padding: 20px 10px 20px 2em;}
	
	
	
	footer .footer-bottom {/* position: initial; */ flex-basis: 100%; margin-top: 40px;}
	footer .footer-bottom ul {position: relative; justify-content: center;}
	footer .footer-bottom ul li img {width: 95px; height: 95px;}
	
	
	
	footer p {font-size: 4vw; text-align:center; margin:0; }
	address {font-size: 2.4vw; padding: 5% 0 80px 0; text-align: center;}
}


/* ------------------------------グローバルナビ上部固定------------------------------　*/
.fixed { position:fixed; top:0; width:100%; z-index:10000; }
@media screen and (max-width:766px){
.fixed { position:static; }
}

/* ------------------------------ページ下部固定CTA_SP------------------------------　*/
#buttonTow , #buttonTow a { display:none; }
@media screen and (max-width:766px){
#buttonTow { position:fixed; bottom:0;  width:100%; height:auto; z-index:1000; }
#buttonTow ul {display: flex;justify-content: space-around;}
#buttonTow ul li{width: 50%;}
#buttonTow ul li:first-child {background: #009e96;}
#buttonTow ul li:last-child {background: #02539d;}
#buttonTow a {height: 60px;transition: .3s ease;color: #fff;display: flex;align-items: center;justify-content: center;text-align:center; font-size:4vw; color:#ffffff; }
#buttonTow a img {width: 5vw; margin-right: .5em;}
#buttonTow a:hover { text-decoration:none;}
}

/* ------------------------------ページ下部固定CTA_PC------------------------------　*/
#buttonPc { position:fixed; bottom:0; width:100%; height:auto; z-index:1000; background:#f08300; }
#buttonPc a#pc_box { display:block; width:100%; height:auto; color:#ffffff; padding:15px 0; text-align:center; font-size:16px; }
 #buttonPc a:hover { text-decoration:none }

@media screen and (max-width:768px){
	#buttonPc { display:none; }
	#buttonPc a#pc_box { display:none; }
}

/* ------------------------------ページトップへ戻る------------------------------　*/
#pageTop { position:fixed; bottom:20px; right:20px; z-index: 999;}
#pageTop a { display: block;
    z-index: 999;
    margin: 0;
    padding: 0;
    width: 50px;
    /* height: 50px; */
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    border: 1px solid #e5e5e5;}
#pageTop a:hover { text-decoration:none; opacity:0.7; }

@media screen and (max-width:768px){
	#pageTop , #pageTop a { display:none; }
}

/* ------------------------------reCAPCHA------------------------------　*/
.re-wrapper {margin-top: 60px; text-align: center;}
.re-wrapper p {display: inline-block; border: 1px solid #aaa; padding: 30px;}
.grecaptcha-badge { visibility: hidden; }
.re-wrapper a.anchor {padding: 0 0.5em;}

@media screen and (max-width:766px){
	.re-wrapper p {padding: 5%; text-align: left;}
}


/* ------------------------------アコーディオン------------------------------　*/
/*
.accordion dl, .accordion dt, .accordion dd{ margin:0; padding:0; }
.accordion dt { display:block; width:100%; height:auto; line-height:1.4; cursor:pointer; border-radius:30px; background:#ffffff; font-size:15px!important; font-weight:bold; color:#000000; margin:0; padding:16px 30px 16px 16px; box-shadow: 0px 6px rgba(0,0,0,1); border:2px solid #000000; text-align:center; }
.accordion dt:after { content:"▼"; margin-left:10px }
.accordion dt.close { background:#000000; color:#ffffff; box-shadow:none }
.accordion dt.close:after { content:"▲"; }
.accordion dd { width:100%; height:auto; display:none; margin:0; padding:60px 0 0 0; }
.accordion dd img { border-radius:20px; border:3px solid #000000; box-shadow:6px 6px rgba(0,0,0,0.3); margin:0 0 30px 0;}
.accordion br { display:inline; }
*/



/* ------------------------------フェードインアニメーション------------------------------　*/
.sa {opacity: 0; transition: all .9s ease; } /* ノーマル */
.sa.show {opacity: 1; transform: none; } /* ノーマル */
.sa-lr {transform: translate(-100px, 0); overflow: hidden;} /* 右から */
.sa-rl {transform: translate(100px, 0); overflow: hidden;} /* 左から */
.sa-up {transform: translate(0, 100px); } /* 下から */
.sa-down {transform: translate(0, -100px); } /* 上から */
.sa-scaleUp {transform: scale(.5); } /* 縮小→拡大 */
.sa-scaleDown {transform: scale(1.5); } /* 拡大→縮小 */
.sa-rotateL {transform: rotate(180deg); } /* 左回転 */
.sa-rotateR {transform: rotate(-180deg); } /* 右回転 */

@media print {
	.sa {opacity: 1; transition: inherit;}
	.sa-up {transform:none;}
	p {break-inside: avoid;}
}

/* ------------------------------ふわふわ------------------------------　*/
@keyframes horizontal {
    0% { transform:translateX( -5px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-5px); }
  100% { transform:translateY(  0px); }
}
img.huwahuwa { animation: horizontal 2s ease-in-out infinite alternate; }
img.huwahuwa { animation: vertical 2s ease-in-out infinite alternate; }
img.huwa01 { animation-duration: 1.1s}
img.huwa02 { animation-duration: 1.3s}
img.huwa03 { animation-duration: 1.5s}

/* ------------------------------吹き出しを作る------------------------------　*/
.balloon { margin:0 0 2em 0; position:relative; }
.balloon:before,.balloon:after { clear:both; content: ""; display: block; }
.balloon figure { width:80px; height:80px; margin:0; padding:0; }
.balloon-image-left {float:left; margin-right:20px; margin-left:0; }
.balloon-image-right {float:right; margin-left:20px; }
.balloon figure img { width:100%; height:100%; border-radius:50%; border:1px solid #cccccc; }
.balloon-image-description { padding:5px 0 0; font-size:10px; text-align:center; }

.balloon-text-right,
.balloon-text-left { position:relative; padding:15px 20px; border-radius:10px; max-width: -webkit-calc(100% - 120px); max-width: calc(100% - 120px); display:inline-block; background:#ffffff; border:1px solid #cccccc; }
.balloon-text-right { float:left; margin-left:10px; }
.balloon-text-left { float:right; margin-right:10px; background:#00bee6; }
.balloon-text-left p { color:#ffffff; }

.balloon p { margin:0; padding:0; font-size:14px; }
.balloon p:last-child { margin-bottom:0; }
/* 三角部分 */
.balloon-text-right:before {position:absolute; content: ''; border:10px solid transparent; border-right:10px solid #cccccc; top:15px; left:-20px; }
.balloon-text-right:after {position:absolute; content: ''; border:10px solid transparent; border-right:10px solid #fff; top: 15px; left:-19px; }
.balloon-text-left:before {position:absolute; content: ''; border:10px solid transparent; border-left:10px solid #cccccc; top: 15px; right:-20px; }
.balloon-text-left:after {position:absolute; content: ''; border:10px solid transparent; border-left:10px solid #00bee6; top:15px; right:-19px; }

@media screen and (max-width:766px){
	.balloon figure {width:60px; height:60px; }
	.balloon figure img { border:3px solid #f5f5f5; }
	.balloon-text-right,.balloon-text-left { max-width: -webkit-calc(100% - 80px); max-width: calc(100% - 80px); }
	.balloon p { font-size:12px; }
}

/* button.components-button.block-editor-post-preview__button-toggle.components-dropdown-menu__toggle.is-tertiary {opacity: 1 !important;} */

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * サスティナブルページ（page_sustainable.php）
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
#page_sustainable #jissyu { list-style-type:disc; }
#page_sustainable #jissyu li { line-height: 2.5; }

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * 技術情報ページ（page_technical.php）
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
#page_technical .scientific-name {font-style:italic;}