@charset "utf-8";

/* ------------------------------------------------------------------------------
   共通
--------------------------------------------------------------------------------- */
body {
    font:.95em "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3" !important;
	margin:0;
	background-image: url(../img/top/bg01.gif);
	background-repeat: repeat;
	line-height:1.5 !important;
	letter-spacing:0.05em;
	color:#5B5B5B;
}

html {
 overflow-y:scroll;
 }

img {
  /* make images responsive */
  max-width: 100%;
}

a img {border:0;}

a:link, a:visited {
	color:#006633;
	text-decoration:underline;
}
a:active, a:hover {
	color:#FF6600;
	text-decoration:underline;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


/* ------------------------------------------------------------------------------
   共通（コンテンツ）
--------------------------------------------------------------------------------- */
#wrapper {
	height:auto;
	margin:0 auto;
	background-color: #FFFFFF;
	border-top:5px solid #BCE06C;
	clear:both;
	position:relative;
}
/* firefox́E*/
#wrapper:after{
	content:"";
	display:block;
	clear:both;
	height:1px;
	margin-top:-1px;
}

main.cd-main-content {
    width:100%;
	height: auto;
	margin: 0 0 1.5em;
	padding:0 1%;
	clear:both;
	display:block;
	overflow:hidden;
}

section {
    margin-bottom:2.5em !important;
	display:block;
	clear:both;
}



/* ------------------------------------------------------------------------------
   トップページ
--------------------------------------------------------------------------------- */

/* メイン画像
----------------------------------*/
#mainimg {
    max-width: 100%;
	height:auto;
	margin: 0 0 1em;
	padding:0;
	display:block;
	clear:both;
	text-align:center;
}
	 

/* 左サイド・右サイド
----------------------------------*/
#left, #right {
	height:auto;
	margin: 0 0 .5em;
	padding:0;
	display:block;
	overflow:hidden;
}

/* 左サイド
----------------------------------*/
#news {
	width: 100%;
	height:auto;
	margin:1.5em 0 1em;
	padding: 0;
	display:block;
	clear:both;
}

.topbox {
    width:100%;
	height:auto;
	margin:0 0 1em;
	padding:0;
	display:block;
}
.topbox ul {
	height:auto;
	margin: 0 .5em .7em 0;
	padding: 0;
	border:1px solid #75A84B;
    border-radius: 8px ;
    -moz-border-radius: 8px ;
	display:block;
	position:relative;
}
.topbox ul li.mds {
	margin:0;
	padding:.5em;
    background-color:#75A84B !important;
	background:url(../img/etc/ic_arrow03.png) 97% 50% no-repeat;
    border-radius: 6px 6px 0 0 ;
    -moz-border-radius: 6px 6px 0 0 ;
	color:#FFFFFF;
	font-weight:bold;
}
.topbox ul li.txt {
    padding:.5em;
	font-size:.85em;
    display:block;
}
.topbox ul li.txt img {
    margin:0 .3em .5em 0;
}
.topbox ul li.bt_look {
	position:absolute;
	right:0;
	bottom:0;
	margin-right:.35em;
}


/* 右サイド
----------------------------------*/
.bt {
    margin:0 auto .3em;
}

#access {
	width: 100%;
	height: auto;
	margin: 0 0 .8em;
	padding: 0;
	border:1px solid #8C8C8C;
    border-radius: 8px ;
    -moz-border-radius: 8px ;
}
#access .mds {
	margin:0;
	padding:.6em .5em .5em;
	background: 
	  url(../img/top/access_icon.png) 97% 50% no-repeat,
	  url(../img/top/access_bg.png) left 50% repeat-x;
    background-color:#FFFFFF;
	border-bottom:1px solid #8C8C8C;
    border-radius: 7px 7px 0 0 ;
    -moz-border-radius: 7px 7px 0 0 ;
	color:#328976;
	font-size:1.1em;
	font-weight:bold;
	font-family: "メイリオ",sans-serif;
	text-shadow: 2px 2px 1px #FFF,
    -2px 2px 1px #FFF,
    2px -2px 1px #FFF,
    -2px -2px 1px #FFF;
}
#access p {
    padding:.3em .5em;
	margin:0;
}
#access iframe {
    padding:.5em .5em 0;
}
#access img {
    padding-top:.5em;
}



/* ------------------------------------------------------------------------------
   コンテンツ
--------------------------------------------------------------------------------- */
#content, #sub {
	height:auto;

	margin: 1em 0 .5em;
	padding:0;
	display:block;
	overflow:hidden;
}

#content_no {
	width:100%;
	height:auto;
	margin: 1em 0 .5em;
	padding:0;
	display:block;
	overflow:hidden;
}


/* 外来のご案内（流れ）
----------------------------------*/
ol.nagare {
	margin: .5em 0;
	padding: 0;
    list-style: none;      /* olがはき出す数字を消す */
	counter-reset: number; /* 数字のカウントをリセットする */
}
ol.nagare li {
	margin: 1.5em 0;
	padding-bottom:3.5em;
	padding-left:2em;
	text-indent:-2em;
	background:url(../img/etc/ic_uarrow.gif) center bottom no-repeat;
}
ol.nagare li:last-child {
    background:none;
	padding-bottom:0;
}


ol.nagare li:before {
    counter-increment: number;
	content: counter(number);
	background: #338A5E;
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	margin-right: .3em;
	text-indent:.2em;
	line-height: 1.6;
	font-weight:bold;
}


/* サイトマップ
----------------------------------*/
.sitemap {
    width:100%;
	height:auto;
	margin:0;
	padding:0;
	display:block;
	clear:both;
}
.sitemap .mds {
    width:100%;
	height:auto;
	margin:0 0 .5em;
	padding:.3em;
	background-color:#4D9431;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
}
.sitemap ul {
	padding:0;
	float:left;
	display:block;
}     




/* ------------------------------------------------------------------------------
   コンテンツ・サブメニュー
--------------------------------------------------------------------------------- */
.sidemenu {
	width: 100%;
	height:auto
	margin: 0 0 .8em;
	padding: 0;
	display:block;
}
.sidemenu ul {
    margin:0;
	padding:0;
	display:block;
	border:1px solid #80A26F;
    border-radius: 8px 8px 0 0 ;
    -moz-border-radius: 8px 8px 0 0 ;
}
.sidemenu ul .mds {
    width:100%;
	height:auto;
	margin:0;
	padding:.6em .3em .4em;
	text-align:center;
	background-color:#4F8B30;
    border-radius: 6px 6px 0 0 ;
    -moz-border-radius: 6px 6px 0 0 ;
	font-family: "メイリオ",sans-serif;
	font-size:1em;
	font-weight:bold;
	color:#FFFFFF;
	display:block;
}
.sidemenu ul li a {
    width:100%;
	height:auto;
	margin:0;
	padding:.5em;
    background:linear-gradient(#FFF, #F3F3F3);
	border-bottom:1px dotted #80A26F;
	display:block;
	text-decoration:none;	
}
.sidemenu ul li a:hover, .sidemenu ul li a.active2 {
    background:url("../img/etc/ic_arrow01.gif") 97% 50% no-repeat,
    linear-gradient(to bottom, #FFF, #FFF4D6);
	color:#FF6600;
	text-shadow: 2px 2px 1px #FFF,
    -2px 2px 1px #FFF,
    2px -2px 1px #FFF,
    -2px -2px 1px #FFF;
}
.sidemenu ul li a.active2 {
    font-weight:bold;
}
.sidemenu ul li:last-child a {
     border-bottom:none;
}




/* ------------------------------------------------------------------------------
   フッター
--------------------------------------------------------------------------------- */
.top {
	padding: 0px;
	margin: 1.5em .55em .3em 0;
	text-align: right;
}


#footer {
	width:100%;
	height:auto;
	margin:0;
	padding:1em .5em;
	font-size:.8em;
	text-align: center;
	background-color: #C0DAAB;
	clear:both;
	display:block;
}



/* ------------------------------------------------------------------------------
   装飾
--------------------------------------------------------------------------------- */

/* 見出し
----------------------------------*/
h2.title {
    width:100%;
	height:76px;
	margin:0 0 .7em;
	padding:.7em .5em .5em 1.5em;
	background: 
	  url(../img/etc/title_icon.png) .8em 50% no-repeat,
	  url(../img/etc/title_bg.png) left 50% repeat-x;
	border:1px solid #76C11D;
    border-radius: 7px ;
    -moz-border-radius: 7px ;
	color:#4B9925;
	font-size:1.8em;
	font-weight:bold;
	font-family: "メイリオ",sans-serif;
	text-shadow: 2px 2px 1px #FFF,
    -2px 2px 1px #FFF,
    2px -2px 1px #FFF,
    -2px -2px 1px #FFF;
	display:block;
}

.mds01 {
	font-family: "メイリオ",sans-serif;
	width: 100%;
	height: auto;
	margin: 0 0 .7em;
	padding: .5em 0 .3em .7em;
	background: 
	  url(../img/etc/mds_bg01a.png) left 48% no-repeat,
	  url(../img/etc/mds_bg01b.png) left top repeat;
	border-bottom:1px dotted #91B37E;
	font-size: 1.4em;
	font-weight: bold;
	color: #448866;
}

.mds02 {
	font-family: "Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif;
	height: auto;
	margin: .7em 0;
	padding: 0;
	font-size: 1.5em;
	color: #F52A47;
}

.mds03 {
	font-family: "Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif;
	height: auto;
	margin: 1em 0;
	padding: 0;
	font-size: 1.7em;
	color: #448866;
}


/* リストタグ
----------------------------------*/
ul.ul01 {
	margin: .5em 0;
	padding:0;
}
ul.ul01 li {
	margin: 0 0 .4em;
	padding-left: 17px;
	background: url(../img/etc/ic_arrow02.gif) 2px 5px no-repeat;
	line-height:1.6;
}
ul.clear li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


ol.ol01 {
    margin: .5em 0;
	padding-left:1.5em;
}


/* テーブル
----------------------------------*/
.table01 {
	margin:.8em 0;
	border-collapse: collapse;
	clear:both;
}
.table01 th, .table01 td {
    border:1px solid #CCC;
	padding:.5em;
}
.table01 thead th {
    background-color:#60B572;
	color:#FFFFFF;
	font-weight:bold;
}
.table01 tbody th {
    background-color:#F4F4F4;
	font-weight:bold;
}



/* テキスト
----------------------------------*/
.fntb { font-weight:bold; }
.fntsmall { font-size:smaller; }
.fntbig { font-size:larger; }

.fnt_red { color: #D20005; }
.fnt_orange { color: #FF6100; }



/* 配色
----------------------------------*/
.bg_yel { background-color:#FFFCDC !important; }
.bg_sky { background-color:#EAFBFD !important; }
.bg_pin { background-color:#FFE3F2 !important; }



/* 配置
----------------------------------*/
.mb05 { margin-bottom:5px; clear:both; }
.mb30 { margin-bottom:30px; clear:both; }

.p_right {
	margin: 0 0 .5em .5em;
	float: right;
}

.cat03 {
    width:100%;
	height:auto;
	margin:0 0 .8em;
	padding:0;
	overflow:hidden;
	display:block;
	clear:both;
}
.cat03 .box {
	height:auto;
	padding:0;
	display:block;
}



/* ------------------------------------------------------------------------------
   ポップアップ
--------------------------------------------------------------------------------- */
h4.pop_mds {
	height: auto;
	width: 580px;
	margin: 0 0 15px;
	padding: 10px;
	font-size: 1.3em;
	font-weight: bold;
	line-height:130%;
	color: #448866;
	border-left:5px solid #91B37E;
	background-color:#DFF0D8;
}

.pop_close {
    font-size:0.8em;
	text-align:center;
	margin:20px 0 0;
}	



/* ------------------------------------------------------------------------------
   レスポンシブ
--------------------------------------------------------------------------------- */

/* PC用
----------------------------------*/
@media print, screen and (min-width:960px){	

	#wrapper {
	width:970px;
	padding: 0;
	}
	

	/* トップページ
	----------------------------------*/
	.mainimgpc {
	margin-top:3.7em;
	}
	
	.mainimgsm {
	display:none;
	}

	#left {
	width:650px;
	float:left;
	}
	
	#right {
	width:290px;
	float:right;
　　}

    .topbox ul {
    width: 48.75% !important;
	float: left !important;
　　}


	/* コンテンツ
	----------------------------------*/
    #content {
    width:750px;
	float:right;
    }
    #sub {
    width:180px;
	float:left;
    }


	/* サイトマップ
	----------------------------------*/
    .sitemap ul {
    width:31.5%;
	margin:0 .5em 1em;
    }     


	/* ヘッダー
	----------------------------------*/
    header.cd-main-header {
	display:none;
	}

	#header_pc {
	width:100%;
	height:90px;
	margin: 0;
	padding:.5em;
	background: url(../img/top/header_bg.png) right 50% no-repeat;
	display:block;
	position:relative;
	}
	
	#header_pc h1 {
	font-size:.8em;
	color:#878787;
	}
	#header_pc .logo {
	margin:.55em 0 0;
	}
	#header_pc .toi {
	position:absolute;
	top:1em;
	right:.5em;
	}

		/* メニュー
	----------------------------------*/
	nav#menu_pc {
	width:100%;
	height:auto;
	margin:0 0 .8em;
	padding:0 .1em;
	display:block;
	font-family: "メイリオ",sans-serif;

	}
	
	nav#menu_pc ul li a {
	float:left;
	width:20%;
	height:auto;
	padding:.7em .3em .5em;
	background:linear-gradient(#8BC04C, #7BB03C);
	border:2px solid #FFF;
	box-shadow:0 0 8px gray;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
	text-decoration:none;	
	display:block;
	}
		
	nav#menu_pc ul li a:active, nav#menu_pc ul li a:hover, nav#menu_pc ul a.active {
	background:linear-gradient(#FF8C0B, #EC7C00);
	text-decoration:none;
	}
	
	cd-overlay, ul#cd-primary-nav {
	display:none;
	}

   /* 配置
   ----------------------------------*/
	.cat03 .box {
    width:32%;
	margin:0 .8em 0 0;
	float:left;
	}
	.cat03 .box:last-child {
	margin-right:0;
	}

}


/* モニター幅959px以下
----------------------------------*/
@media only screen and (max-width:959px){
	*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}

	/* トップページ
	----------------------------------*/
	.mainimgsm {
	display:none;
	}


	/* コンテンツ
	----------------------------------*/
    #content, #sub {
    width:100%;
	float:none;
    }
	#content, #content_no {
	margin-top:4.5em;
	}


	/* サイトマップ
	----------------------------------*/
    .sitemap ul {
    width:31.5%;
	margin:0 .5em 1em;
    }     


	/* メニュー
	----------------------------------*/
	#menu_pc {
	display:none;
	}


   /* 配置
   ----------------------------------*/
	.cat03 .box {
    width:32%;
	margin:0 .8em 0 0;
	float:left;
	}
	.cat03 .box:last-child {
	margin-right:0;
	}

}

/* iPad 縦
----------------------------------*/
@media only screen and (max-width:773px) {

	#wrapper {
	width:98%;
	padding: 0 1%;
	}

	/* トップページ
	----------------------------------*/
	.mainimgpc {
	display:none;
	}
	.mainimgsm {
	display:block;
	margin-top:9%;
	}


	/* サイトマップ
	----------------------------------*/
    .sitemap ul {
    width:47.3%;
	margin:0 .5em .8em;
    }     


}


/* スマートフォン 横(ランドスケープ)
----------------------------------*/
@media only screen and (max-width:670px){


	/* トップページ
	----------------------------------*/
	#left, #right {
	width:100%;
	float:none;
	}

　　.topbox ul {
	width: 100%;
	margin-right:0 !important;
	float: none;
　　}


   /* 配置
   ----------------------------------*/
	.cat03 .box {
    width:48%;
	margin:0 .8em .8em 0;
	float:left;
	}
	.cat03 .box:nth-child(even) {
	margin-right:0;
	}

}


/* スマートフォン iPhone5 横(ランドスケープ)
----------------------------------*/
@media only screen and (width:568px){

	/* トップページ
	----------------------------------*/
	.mainimgsm {
	margin-top:12%;
	}


	/* サイトマップ
	----------------------------------*/
    .sitemap ul {
    width:100%;
	margin:0 0 .8em;
	float:none;
    }     


}


/* スマートフォン 縦(ポートレート)
----------------------------------*/
@media only screen and (max-width:480px){

	/* トップページ
	----------------------------------*/
	.mainimgsm {
	margin-top:17%;
	}
	

	/* コンテンツ
	----------------------------------*/
	h2.title {
	font-size:1.5em;
	padding:.9em .5em .5em 1em;
	}


	/* サイトマップ
	----------------------------------*/
    .sitemap ul {
    width:100%;
	margin:0 0 .8em;
	float:none;
    }     



   /* 見出し
   ----------------------------------*/
    h2.title {
	padding-left:1.5em !important;
	}


	/* テーブル
	----------------------------------*/
	.sm_table { 
    width: 100%; 
	overflow-x: auto;
	}
	.sm_table table {
	width: 600px;
	}
	
	.sm_table02 {
    border-collapse: collapse;
    }
    .sm_table02 td, .sm_table02 th {
    display: block;
	width:100%;
    }


	/* 配置
	----------------------------------*/
    .p_right {
	margin: .3em auto .6em;
	float: none !important ;
	display:block;
    }


}


/* スマートフォン iPhone5 縦(ポートレート)
----------------------------------*/
@media only screen and (max-width:320px){

	/* トップページ
	----------------------------------*/
	.mainimgsm {
	margin-top:20%;
	}


   /* 配置
   ----------------------------------*/
	.cat03 .box {
    width:100%;
	margin:0;
	float:none;
	}


}



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

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}


input {
  font-family: sans-serif;
  font-size: 1.6rem;
}

input[type="search"]::-ms-clear {
  /* removes close icon - IE */
  display: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}


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

Main components 

-------------------------------- */
.cd-main-content, .cd-main-header {
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

.cd-main-content, .cd-main-header {
  position: relative;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}



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

.cd-main-content {
  background: #FFF;
  min-height: 100vh;
  z-index: 2;
}

#header_pc {
   display:none;
}

.cd-main-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 4em;
  background: #FFF;
  filter: alpha(opacity=90);
  opacity:0.9;
  z-index: 3;
}

.nav-is-fixed .cd-main-header {
  /* add .nav-is-fixed class to body if you want a fixed navigation on > 1170px */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}


.cd-logo {
  position: absolute;
  top: 12px;
  left: 1%;
}
.cd-logo img {
  display: block;
}


.cd-header-buttons {
  position: absolute;
  display: inline-block;
  top: 3px;
  right: 5%;
}
.cd-header-buttons li {
  display: inline-block;
}


.cd-nav-trigger {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
  white-space: nowrap;
  /* hide text */
  color: transparent;
  z-index: 3;
  text-indent:100%;
}


.cd-nav-trigger span, .cd-nav-trigger span::before, .cd-nav-trigger span::after {
  /* hamburger icon in CSS */
  position: absolute;
  display: inline-block;
  height: 3px;
  width: 24px;
  background: #2e3233;
}

.cd-nav-trigger span {
  /* line in the center */
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -2px;
  -webkit-transition: background 0.3s 0.3s;
  -moz-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}

.cd-nav-trigger span::before, .cd-nav-trigger span::after {
  /* other 2 lines */
  content: '';
  right: 0;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform 0.3s 0.3s;
  -moz-transition: -moz-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
}
.cd-nav-trigger span::before {
  /* menu icon top line */
  top: -6px;
}
.cd-nav-trigger span::after {
  /* menu icon bottom line */
  top: 6px;
}
.cd-nav-trigger.nav-is-visible span {
  /* hide line in the center */
  background: rgba(46, 50, 51, 0);
}
.cd-nav-trigger.nav-is-visible span::before, .cd-nav-trigger.nav-is-visible span::after {
  /* keep visible other 2 lines */
  background: #2e3233;
}
.cd-nav-trigger.nav-is-visible span::before {
  -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
  -moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
  -ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
  -o-transform: translateX(4px) translateY(-3px) rotate(45deg);
  transform: translateX(4px) translateY(-3px) rotate(45deg);
}
.cd-nav-trigger.nav-is-visible span::after {
  -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
  -moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
  -ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
  -o-transform: translateX(4px) translateY(2px) rotate(-45deg);
  transform: translateX(4px) translateY(2px) rotate(-45deg);
}


.cd-primary-nav, .cd-primary-nav ul {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 260px;
  background: #2e3233;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-primary-nav a, .cd-primary-nav ul a {
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid #3a3f40;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform, opacity;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
}
.cd-primary-nav.is-hidden, .cd-primary-nav ul.is-hidden {
  /* secondary navigations hidden by default */
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}
.cd-primary-nav.moves-out > li > a, .cd-primary-nav ul.moves-out > li > a {
  /* push the navigation items to the left - and lower down opacity - when secondary nav slides in */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}

.cd-primary-nav .see-all a {
  /* different style for the See all button on mobile and tablet */
  color: #69aa6f;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item, .cd-primary-nav .cd-nav-icons .cd-nav-item {
  /* items with picture (or icon) and title */
  height: 80px;
  line-height: 80px;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item h3, .cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item {
  padding-left: 90px;
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item img {
  position: absolute;
  display: block;
  height: 40px;
  width: auto;
  left: 20px;
  top: 50%;
  margin-top: -20px;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item {
  padding-left: 75px;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item p {
  color: #2e3233;
  font-size: 1.3rem;
  /* hide description on small devices */
  display: none;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item::before {
  /* item icon */
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px 40px;
}
.has-children > a, .go-back a {
  position: relative;
}
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
  /* arrow icon in CSS - for element with nested unordered lists */
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1px;
  display: inline-block;
  height: 2px;
  width: 10px;
  background: #464c4e;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.has-children > a::before, .go-back a::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.has-children > a::after, .go-back a::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.has-children > a {
  padding-right: 40px;
}
.has-children > a::before, .has-children > a::after {
  /* arrow goes on the right side - children navigation */
  right: 20px;
  -webkit-transform-origin: 9px 50%;
  -moz-transform-origin: 9px 50%;
  -ms-transform-origin: 9px 50%;
  -o-transform-origin: 9px 50%;
  transform-origin: 9px 50%;
}

.cd-primary-nav .go-back a {
  padding-left: 40px;
}
.cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after {
  /* arrow goes on the left side - go back button */
  left: 20px;
  -webkit-transform-origin: 1px 50%;
  -moz-transform-origin: 1px 50%;
  -ms-transform-origin: 1px 50%;
  -o-transform-origin: 1px 50%;
  transform-origin: 1px 50%;
}

.cd-search {
  position: absolute;
  height: 50px;
  width: 100%;
  top: 50px;
  left: 0;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-search form {
  height: 100%;
  width: 100%;
}
.cd-search input {
  border-radius: 0;
  border: none;
  background: #ffffff;
  height: 100%;
  width: 100%;
  padding: 0 5%;
  box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05);
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.cd-search input::-webkit-input-placeholder {
  color: #c9cbc4;
}
.cd-search input::-moz-placeholder {
  color: #c9cbc4;
}
.cd-search input:-moz-placeholder {
  color: #c9cbc4;
}
.cd-search input:-ms-input-placeholder {
  color: #c9cbc4;
}
.cd-search input:focus {
  outline: none;
}
.cd-search.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.nav-is-fixed .cd-search {
  position: fixed;
}

.cd-overlay {
  /* shadow layer visible when navigation is active */
  position: fixed;
  z-index: 2;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  background-color: rgba(105, 170, 111, 0.8);
  visibility: hidden;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}
.cd-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s;
}

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

support for no js 

-------------------------------- */
.no-js .cd-primary-nav {
  position: relative;
  height: auto;
  width: 100%;
  overflow: visible;
  visibility: visible;
  z-index: 2;
}

.no-js .cd-search {
  position: relative;
  top: 0;
  opacity: 1;
  visibility: visible;
}

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

   レスポンシブ 

-------------------------------- */
  body.nav-on-left.overflow-hidden {
    overflow: hidden;
  }

  .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible {
    -webkit-transform: translateX(-260px);
    -moz-transform: translateX(-260px);
    -ms-transform: translateX(-260px);
    -o-transform: translateX(-260px);
    transform: translateX(-260px);
  }
  .nav-on-left .cd-main-content.nav-is-visible, .nav-on-left .cd-main-header.nav-is-visible {
    -webkit-transform: translateX(260px);
    -moz-transform: translateX(260px);
    -ms-transform: translateX(260px);
    -o-transform: translateX(260px);
    transform: translateX(260px);
  }

  .nav-on-left .cd-logo {
    left: auto;
    right: 5%;
  }

  .nav-on-left .cd-header-buttons {
    right: auto;
    left: 5%;
  }
  .nav-on-left .cd-header-buttons li {
    float: right;
  }

  .nav-on-left .cd-primary-nav, .nav-on-left .cd-primary-nav ul {
    right: auto;
    left: 0;
  }

  .cd-primary-nav {
    /* by default .cd-primary-nav is hidden - trick for iOS devices where you can see the navigation if you pull down */
    visibility: hidden;
    -webkit-transition: visibility 0s 0.3s;
    -moz-transition: visibility 0s 0.3s;
    transition: visibility 0s 0.3s;
  }
  .cd-primary-nav.nav-is-visible {
    visibility: visible;
    -webkit-transition: visibility 0s 0s;
    -moz-transition: visibility 0s 0s;
    transition: visibility 0s 0s;
  }

  .cd-overlay.is-visible {
    -webkit-transform: translateX(-260px);
    -moz-transform: translateX(-260px);
    -ms-transform: translateX(-260px);
    -o-transform: translateX(-260px);
    transform: translateX(-260px);
  }
  .nav-on-left .cd-overlay.is-visible {
    -webkit-transform: translateX(260px);
    -moz-transform: translateX(260px);
    -ms-transform: translateX(260px);
    -o-transform: translateX(260px);
    transform: translateX(260px);
  }
  .cd-overlay.is-visible.search-is-visible, .nav-on-left .cd-overlay.is-visible.search-is-visible {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}