@charset "UTF-8";
/* CSS Document */


/* =============================================================================
   サイト固有：サイト全体・全画面サイズ共通スタイル
    ========================================================================== */

html,body{
	box-sizing:border-box;
	width:100%;
	height:100%;
}

html{
  font-size:16px;
}

a{
	cursor: pointer;
}









/* =============================================================================
   サイト構成要素：サイト全体・全画面サイズ共通スタイル　共通＆小画面用
    ========================================================================== */

/* ===== 小画面用ページヘッダー周り ===== */




div.header_box,
div.low{/* タイトルとナビが入るボックス */
width:100%;
height:auto;
  padding-bottom:0px;
  background-color:transparent;/* トップなどの画像イキページはカラーを透明に */
  background-image:url(../img/bg_wh_paper.gif);/* プロダクトを含む通常ページは白画像 */
  position:fixed;
  left:0;
  top:0;
  z-index:99999;
  
  transition:background ease 400ms;
  -webkit-transition:background ease 400ms;
}
div.header_box.low{/* スクロールした時の縮小時の設定 */
  background-image:none;
  background-color:rgba(62,56,44,0.85);/*  */
    
  transition:background ease 400ms;
  -webkit-transition:background ease 400ms;
}




/* ===== サイト『タイトル』周り ===== */

/*サイト独自のタイトルを指定の場合はここで */


header p#h1{
  width:auto;
  height:auto;
  text-align:center;
  text-indent:0.5em;
  margin:0 auto;
  float:left;
}

p#h1 > a{
  font-size:28px; /* ←表示サイズ28px */
  line-height:2.57142857;/* 行間72px,ナビの24pxと合わせて96px（４L）になるように設定 */
 /* letter-spacing:-0.1em;
  text-align:center;*/

  color:#222;/* 表示直後のh1の色 */
  font-family:"ycb_logo_yoko";
      
  transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,fcolor ease 400ms;/* 縮小するアニメーション設定 */
  -webkit-transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,color ease 400ms;
    }

p#h1 > a.low{
  font-size:24px;/* h3と同じサイズ設定 */
  line-height:1.5;/* 行間でピッチを修正 1L=50px */
  margin:0;
  color:#fff;/* スクロールして縮小時のh1の色 */
  
  transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,color ease 400ms;/* 拡大するアニメーション設定 */
  -webkit-transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,color ease 400ms;
}



/* ===== グローバルナビゲーション周り ===== */

nav#g_nav{
  background:rgba(0,160,148,1); /*rgba(28,35,33,0.7) スタンダード：グレー */
  /*width:100%;*/
  height:auto;
  z-index:99;
}
nav#g_nav ul{
  margin:0 0 25px;
}

nav#g_nav ul li{
  overflow:hidden;
  width:100%;/* 小画面での折りたたみナビの項目幅サイズ */
  height:auto;
}
nav#g_nav ul li a{/* メニューの文字スタイル設定 */
  display:block;
  width:60%;/* ナビ項目の中で幅いっぱいに反応しないよう指示 */
  height:3em;/* 小画面での折りたたみナビの項目高さ */
  line-height:3em;/* 上下位置センターに。hightと同じ値 */
  text-align:center;
  margin:0 auto;
  text-shadow: 1px 1px 2px rgba(51,51,51,0.4);
}
nav#g_nav ul li a:link,
nav#g_nav ul li a:visited{/* Gナビの文字色 */
  color:#fff;
  font-weight:bold;
}
nav#g_nav ul li a:hover{/* Gナビのhover文字色 */
  /* 小画面では設定なし
  color:#39C;
  text-shadow: none;*/
}



/* === end g_nav周り === */




/* =====小画面用カテゴリーナビ、アイコン ===== */

/* 小画面用カテナビ背景ボックス：画面に現れないので透明にしておく */
nav#cate_navbox{
	width:100%;
	height:auto;
	margin:0;
	padding:0;
 	 background:transparent;
}

/* 小画面用カテナビ：全体 */
ul#cate_sml{
	width:100%;
	height:auto;
	padding:0;
}
/* 小画面用カテナビ：リスト項目 */
ul#cate_sml li{
	float:left;
	display:block;
	width:33.3333%;
	height:48px;
	text-align:center;
}
/* 小画面用カテナビ：リスト項目「新製品」のみ */
ul#cate_sml>li.sml_new{
	width:100%;
	height:48px;
}

/* 小画面用カテナビ：リンク */
ul.cate_nav li a{
	display:block;
	width:100%;
	height:48px;
	overflow:hidden;
	text-align:center;
}
/* 小画面用カテナビ：リンク「新製品」のみ */
ul#cate_sml>li.sml_new a.new{
	width:33.333%;
	height:48px;
	margin:0 auto;
}


/* =====カテゴリーナビ、背景色指定（liの背景色） ===== */
li.sml_new{
	background-color:#fa4b55; /* LightRed */
}
li.sml_sen{
	background-color:#4cc8ff;
}
li.sml_han{
	background-color:#24648c;
}
li.sml_kan{
	background-color:#ec781e;
}
li.sml_sho{
	background-color:#735a96;
}
li.sml_oth{
	background-color:#f4a210;
}
li.sml_sta{
	background-color:#786e50;
}


/* =====カテゴリーナビ、アイコン指定（aの背景画像） ===== */
a.new{
	background:url(../icons/sml_col_01new.svg);
}
a.sen{
	background:url(../icons/sml_col_02sen.svg);
}
a.han{
	background:url(../icons/sml_col_03han.svg);
}
a.kan{
	background:url(../icons/sml_col_04kan.svg);
}
a.sho{
	background:url(../icons/sml_col_05sho.svg);
}
a.oth{
	background:url(../icons/sml_col_06oth.svg);
}
a.sta{
	background:url(../icons/sml_col_07sta.svg);
}
/* 小画面用 背景画像の共通設定 */
a.new,a.sen,a.han,a.kan,a.sho,a.oth,a.sta{
	background-size:120px 48px;
	background-repeat:no-repeat;
	background-position:center center;
}
		

/* ==  end カテゴリー色指定 == */







/* ===== 小画面用コンテンツボックス周り ===== */

div#top_image_box,
div#image_box{/* 最初の背景表示用のボックス */
	width:100%;
	height:auto;
	padding-top:72px;/* #header_boxの高さ＋アキを逃げる。小画面用 */
	margin:0;
	box-sizing:border-box;
	}/* 各画像の指定やアキの指定は個別のCSSに記述 */
	
	
	
	
	/* ===== 小画面用キャッチフレーズ周りの指定 =====*/

section.main_copy{
	box-sizing:border-box;
	width:90%;
	max-width:100%;/* 759px */
  height:auto;
	color:#fff;
	text-shadow:4px 4px 5px rgba(0,0,0,0.9);
}

.hdgroup{
	width:100%;
	height:auto;
	text-shadow:4px 4px 5px rgba(0,0,0,0.9);
	/*margin:0 0 24px 0;*//* トップ以外はpが無いのでアキの設定も無し */
}

.main_copy h2{
	font-size:200%;/* 36px */
	line-height:1;
	width:100%;
  height:auto;
	margin:0 0 0 0;
	padding:0;
}
.main_copy h2,
.main_copy aside{
	font-family: 'Noto Serif JP', serif;
	font-weight:900;
}


/* ===== end キャッチフレーズ周りの指定 =====*/
	
/*body div.backbox{ paralaxの為のセクション毎のボックス。幅100%
  width:100%;
  margin:0;
  padding:0 5% 0;
  box-sizing:border-box;
}*/
/*	background: no-repeat 50% 0 fixed;*/
	/*position: relative;*/
  
  
  .backbox{
	  box-sizing:border-box;
	  /*width:100%;*/
	  height:auto;
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:center top;
	  padding:48px 3% 0px;/* 基本のパディング 個別のアキは下記の個別で指定 */
  }
  


/* ===== 小画面用：基本コンテンツボックススタイル指示 ===== */

.content_box{
	box-sizing:border-box;
	width:100%;
	max-width:100%;/* 759px */
	height:auto;
	margin:0 auto 48px;
	padding:0 5% 0;
	overflow:hidden;
	background:#fff;
	box-shadow: 3px 3px 4px 2px rgba(51,51,51,0.4);
}
.content_box:last-child{
	margin-bottom:72px;
}

/* ===== 記事ボックス装飾 :: basic基本 ===== */

.basic h3{/* font-size：156.25%=25px */
	color:#00a094;
	font-weight:500;
	border-bottom:solid 3px #00a094;
	margin-bottom:24px;
}



.basic h4{/* font-size：125%=20px */
	/*background-color: #00a094;*/
}
.basic p{
	margin-bottom:48px;
}





/* ===== 小画面用フッター周り ===== */

#footer_box{
  width:100%;
  height:auto;
  background:rgba(0,160,148,1); /* rgba(0,0,0,0.7) */
}

footer{
	box-sizing:border-box;
	width:100%;
	height:auto;
  max-width:100%;/* 759px */
  /*padding:48px 24px 0;*/
  margin:0 auto;
  overflow:hidden;
 /* background:rgba(0,153,255,0.2);*/
}

/* ===== 小画面用フッター内 ===== */

footer #content_map{
	width:100%;
	height:auto;
	margin:0 auto;
	padding: 0 0 36px;
	/*box-shadow: 3px 0px 4px 0px rgba(0,51,0,0.2), -3px 0px 4px 0px rgba(0,51,0,0.2),
	           1px 0px 2px 0px rgba(255,255,255,0.2)inset, -1px 0px 2px 0px rgba(255,255,255,0.2)inset;*/
}

#content_map .mainpage_list{
	width:100%;
	height:auto;/* 360px */
	overflow:hidden;
}
.mainpage_list>li{
	float:left;
	box-sizing:border-box;
	width:50%;
	height:300px;/* auto */
	border-left:solid 2px rgba(255,255,255,0.6);
	margin:48px 0 0 0;
	font-size:100%;
	text-indent:2em;
	/*color:#fff;opacity:0.9;*/
	color: #fff;opacity:0.8; /*rgba(255,255,255,0.9)*/;
}
/*.mainpage_list>li:first-child,
.mainpage_list>li:nth-child(4){
	border-left:solid 2px rgba(255,255,255,0.6);
}*/

.mainpage_list>li:nth-child(odd){
	border-left:none;
}
/*.mainpage_list>li:nth-child(5){
	border-left:solid 2px rgba(255,255,255,0.6);
}*/


.mainpage_list>li a{
	box-sizing:border-box;
	display:block;
	width:100%;
	height:auto;
	margin:0 0 24px 0;
}
footer div#content_map ul li a:hover{
	color:#fff;
}
.subcontent_list>li a{
	margin:0 0 12px 0;
}



/*
#content_map .mainpage_list>li>.subcontent_list{
	margin:12px 0 0 0;
}
#content_map .mainpage_list>.mainpage_first{
	width:157px; 不要
	border:none;
	margin:20px 0 0 18px;
}
#content_map .mainpage_list>li>ul.subcontent_list li{
	margin:0 0 15px 0;
	font-size:93%;
	text-indent:2em;
}
#content_map .mainpage_list>li>ul.subcontent_list .extra_list{
	font-size:85%;
	letter-spacing:-0.08em;
}
*/

footer .ci{
	width:100%;
	height:auto;
	margin:96px 0 0;
	text-align:center;
}

footer div.ci h1{
	width:auto;
	margin:0 auto;
	text-align:center;
	color:#fff;
}
div.ci h1 a{
  font-family:"ycb_logo_yoko";
  font-size:2em;
}
	
footer .ci p{
	width:100%;
	height:auto;
	margin:0 0 0 0;
	font-size:100%;
	letter-spacing:0.1em;
	text-align:center;
	float:right;
	color:#fff;
}
footer div.ci p small{
	font-size:0.75em;
}
footer a:link,footer a:visited{
	color:#fff;
}
footer a:hover{
	color:#cf0;
}


.copyright{
  width:100%;
  height:auto;
  margin:0 0 24px;
  color:#fff;
}
.copyright small{
  text-align:right;
}

/* =============================================================================
   サイト構成要素：サイト全体・全画面サイズ共通スタイル　【中画面用】
    ========================================================================== */


/* ===== 長い製品名の時の長体設定 ===== */

.text_short_25{
	display:inline;
	font-size:156.25%; /* 25px */
}
.text_short_20{
	display:inline;
	font-size:118.75%; /* 20px */
}
.text_short_18{
	display:inline;
	font-size:118.75%; /* 18px */
}
.text_short_16{
	display:inline;
	font-size:100%; /* 16px */
}
.text_short_15{
	display:inline;
	font-size:93.75%; /* 15px */
}
.text_short_14{
	display:inline;
	font-size:87.5%; /* 14px */
}
.text_short_13{
	display:inline;
	font-size:81.25%; /* 13px */
	}
.text_short_12{
	display:inline;
	font-size:75%; /* 12px */
}

.text_short_14_line{
	display:block;
	font-size:87.5%; /* 14px */
	line-height:1.4em;/* 行間でピッチを修正 1L=22px */
}

br.bs{
	display:inline-block;
	margin:0 0 24px;
}
br.ss{
	display:inline-block;
	margin:0 0 12px;
}


/*-moz-h4 .longv1,
-moz-h3 .longv1{
transform: scale(0.9, 1);
width:111.111111%;
margin-left:-5.555555%;
margin-bottom:24px;
}
-webkit-h4 .longv1,
-webkit-h3 .longv1{
transform: scale(0.9, 1);
width:111.111111%;
margin-left:-5.555555%;
margin-bottom:24px;
}
-ms-h4 .longv1,
-ms-h3 .longv1{
transform: scale(0.9, 1);
width:111.111111%;
margin-left:-5.555555%;
margin-bottom:24px;
}
ul h4.longv1,
ulh3.longv1{
transform: scale(0.9, 1);
width:111.111111%;
margin-left:-5.555555%;
margin-bottom:24px;
}


-moz-h4 .longv2,
-moz-h3 .longv2{
transform: scale(0.8, 1);
width:125%;
margin-left:-12.5%;
margin-bottom:24px;
}
-webkit-h4 .longv2,
-webkit-h3 .longv2{
transform: scale(0.8, 1);
width:125%;
margin-left:-12.5%;
margin-bottom:24px;
}
-ms-h4 .longv2,
-ms-h3 .longv2{
transform: scale(0.8, 1);
width:125%;
margin-left:-12.5%;
margin-bottom:24px;
}
h4 .longv2,
h3 .longv2{
transform: scale(0.8, 1);
width:125%;
margin-left:-12.5%;
margin-bottom:24px;
}


-moz-h4 .longv3,
-moz-h3 .longv3{
transform: scale(0.7, 1);
width:142.857%;
margin-left:-21.4285%;
margin-bottom:24px;
}
-webkit-h4 .longv3,
-webkit-h3 .longv3{
transform: scale(0.7, 1);
width:142.857%;
margin-left:-21.4285%;
margin-bottom:24px;
}
-ms-h4 .longv3,
-ms-h3 .longv3{
transform: scale(0.7, 1);
width:142.857%;
margin-left:-21.4285%;
margin-bottom:24px;
}
h4 .longv3,
h3 .longv3{
transform: scale(0.7, 1);
width:142.857%;
}
*/



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

/* ===== ページヘッダー周り ===== */

.header_box,
nav#g_nav{
  width:100%;
  height:auto;
  background:rgba(0,160,148,0.6);
  position:fixed;
  left:0;
  top:0;
}
/*.header,
.content_box{
  max-width:100%;
  margin:0 auto;
}*/



/* ===== サイト『タイトル』周り ===== */
header p#h1 {
	width:100%;
  height:auto;
}
p#h1 > a{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  font-size:36px; /* ←表示サイズ36px */
  line-height:2.5;/* 行間72px,ナビの24pxと合わせて96px（4L）になるように設定 */
  color:#222;/* 表示直後のp#h1の色 */
      
  transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,color ease 400ms;/* 縮小するアニメーション設定 */
  -webkit-transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,color ease 400ms;
    }

p#h1 > a.low{
  font-size:16px;/* h3と同じサイズ設定 */
  line-height:1.5;/* 行間でピッチを修正 1L=50px */
  margin:0;
  color:#fff;/* スクロールして縮小時のp#h1の色 */
  
  transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,color ease 400ms;/* 拡大するアニメーション設定 */
  -webkit-transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,color ease 400ms;
}


/* ===== 中画面用グローバルナビゲーション周り ===== */

nav#g_nav{
  width:100%;
  height:auto;
  background:#006655; /* rgba(0,160,148,0.6) */
  position:fixed;
  left:0;
  top:0;
}
  
nav#g_nav ul{
  max-width:1024px;
  height:auto;
  margin:0 auto;
  z-index:9999;
}
nav#g_nav ul li{
  float:left;
  overflow:hidden;
  width:16.6666667%;
  /*width:14.28575%;*/
  height:auto;
}
nav#g_nav ul li a{/* メニューの文字スタイル設定 */
  display:block;
  width:100%;
  height:auto;
   height:1.875em;/*文字16pxでナビの高さを30pxにする設定*/
  line-height:1.875;

}


/* =====  end g_nav周り  =====*/





/* =====中画面用カテゴリーナビ、アイコン ===== */

/* 中画面用カテナビ背景ボックス：画面に現れるので背景に色を指定 */
nav#cate_navbox{
  background:rgba(0,0,0,0.4);
	box-shadow: 0px 4px 2px rgba(51,51,51,0.4);
	margin:0 0 0px;
	z-index:999;
}


/* 中画面カテナビ：全体 */
ul#cate_desk{
	width:98%;
	max-width:760px;/* 98% */
 /* height:auto;*/
	margin:0 auto;
}
/* 中画面・PC用カテナビ：リスト項目 */
ul#cate_desk li{
	float:left;
	display:block;
	box-sizing:border-box;
	width:14.2857%;
	height:100%;
	text-align:center;
	padding:1.5%;
}

/* 中画面・PC用ダミー透明画像 */
ul#cate_desk li a img{
	width:100%;
  height:auto;
}

/* 中画面・PC用カテナビ：リンク */
ul.cate_nav li a{
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
	text-align:center;
	box-shadow: 2px 2px 2px rgba(51,51,51,0.4);
}




/* =====カテゴリーナビ、中画面・PC用アイコン指定（aの背景画像） ===== */
a.new{
	background:url(../icons/desk_col_01new.svg);
}
a.sen{
	background:url(../icons/desk_col_02sen.svg);
}
a.han{
	background:url(../icons/desk_col_03han.svg);
}
a.kan{
	background:url(../icons/desk_col_04kan.svg);
}
a.sho{
	background:url(../icons/desk_col_05sho.svg);
}
a.oth{
	background:url(../icons/desk_col_06oth.svg);
}
a.sta{
	background:url(../icons/desk_col_07sta.svg);
}
/* 小画面用 背景画像の共通設定 */
a.new,a.sen,a.han,a.kan,a.sho,a.oth,a.sta{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}
		

/* ==  end カテゴリー色指定 == */



	/* ===== 中画面用キャッチフレーズ周りの指定 =====*/

section.main_copy{
width:100%;
max-width:100%;/* 1024px; */
  height:auto;
}

div#top_image_box,
div#image_box{/* 最初の背景表示用のボックス */
	padding-top:120px;/* #header_boxの高さ＋アキを逃げる。小画面用 */
	}/* 各画像の指定やアキの指定は個別のCSSに記述 */

.hdgroup{
	width:100%;
	height:auto;
	margin:0 0 0 0;
}

.main_copy h2{
	font-size:200%;/* 36px */
	line-height:1;
	width:100%;
  height:auto;
	margin:0 0 0 0;
	padding:0;
}
.main_copy h2,
.main_copy aside{
	font-family: 'Noto Serif JP', serif;
	font-weight:900;
}


/* ===== end キャッチフレーズ周りの指定 =====*/




/* ===== 中画面用：基本コンテンツボックススタイル指示 ===== */

.content_box{
	width:98%;
	max-width:100%;/* 1079px */
  height:auto;
	/*margin:0 auto 48px;*/
}





/* ===== フッター周り ===== */


/*footer ul{
  width:100%;
  padding:24px 0 0;
  text-align:center;
}
footer ul li{
  width:50%;
  margin:12px 0;
  float:left;
}
footer ul li a{
  width:70%;
  line-height:2em;
  margin:1em auto 1em;
}*/


/* ===== 中画面用フッター周り ===== */

#footer_box{
  width:100%;
  height:auto;
  background:rgba(0,160,148,1); /* rgba(0,0,0,0.7) */
}

footer{
	box-sizing:border-box;
	width:100%;
  max-width:100%;/* 1080px */
	height:auto;
  /*padding:48px 24px 0;*/
  margin:0 auto;
  overflow:hidden;
 /* background:rgba(0,153,255,0.2);*/
}

/* ===== フッター内 ===== */

footer #content_map{
	width:100%;
	height:auto;
	margin:0 auto;
	padding: 0 0 36px;
	/*box-shadow: 3px 0px 4px 0px rgba(0,51,0,0.2), -3px 0px 4px 0px rgba(0,51,0,0.2),
	           1px 0px 2px 0px rgba(255,255,255,0.2)inset, -1px 0px 2px 0px rgba(255,255,255,0.2)inset;*/
}

#content_map .mainpage_list{
	width:100%;
	height:auto;/* 360px */
	overflow:hidden;
}
.mainpage_list>li{
	float:left;
	box-sizing:border-box;
	width:33.3333%;
  height:auto;
	/*height:360px;  */
	border-left:solid 2px rgba(255,255,255,0.6);
	margin:48px 0 0 0;
	font-size:100%;
	text-indent:2em;
	/*color:#fff;opacity:0.9;*/
	color: #fff;opacity:0.8; /*rgba(255,255,255,0.9)*/;
}

.mainpage_list>li:nth-child(odd){
	border-left:solid 2px rgba(255,255,255,0.6);
}

.mainpage_list>li:first-child,
.mainpage_list>li:nth-child(4){
	border-left:none;
}


.mainpage_list>li a{
	box-sizing:border-box;
	display:block;
	width:100%;
  height:auto;
	margin:0 0 24px 0;
}

.subcontent_list>li a{
	margin:0 0 12px 0;
}



/*
#content_map .mainpage_list>li>.subcontent_list{
	margin:12px 0 0 0;
}
#content_map .mainpage_list>.mainpage_first{
	width:157px; 不要
	border:none;
	margin:20px 0 0 18px;
}
#content_map .mainpage_list>li>ul.subcontent_list li{
	margin:0 0 15px 0;
	font-size:93%;
	text-indent:2em;
}
#content_map .mainpage_list>li>ul.subcontent_list .extra_list{
	font-size:85%;
	letter-spacing:-0.08em;
}
*/

footer .ci{
	width:100%;
	max-width:100%;/* 1023px */
  height:auto;
	margin:96px 0 0;
	text-align:center;
}

footer div.ci h1{
	width:auto;
  height:auto;
	margin:0 auto;
	text-align:center;
	color:#fff;
}
div.ci h1 a{
  font-family:"ycb_logo_yoko";
  font-size:2em;
}
	
footer .ci p{
	width:100%;
	height:auto;
	margin:0 0 0 0;
	font-size:100%;
	letter-spacing:0.1em;
	text-align:center;
	float:right;
	color:#fff;
}
footer div.ci p small{
	font-size:0.75em;
}
footer a:link,footer a:visited{
	color:#fff;
}
footer a:hover{
	color:#9C0;
}


.copyright{
  width:100%;
  height:auto;
  margin:0 0 24px;
  color:#fff;
}
.copyright small{
  text-align:right;
}




}




/* =============================================================================
   サイト構成要素：サイト全体・全画面サイズ共通スタイル　【PC画面用】
    ========================================================================== */

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


/* ===== ページヘッダー周り ===== */

nav#g_nav{
  width:100%;
  height:auto;
  background:rgba(0,160,148,0.6);
  position:fixed;
  left:0;
  top:0;
}

/*.header,
.content_box{
  max-width:1080px;
}*/

/*header p#h1{
  width:80%;
}*/





/* ===== ページタイトル周り ===== */

p#h1{
	text-align:center;
}

p#h1 > a{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  font-size:36px; /* ←表示サイズ48px */
  line-height:2.5;/* 行間72px,ナビの24pxと合わせて96（4L）になるように設定 */
  color:#222;/* 表示直後のp#h1の色 */
  /*margin:0 auto;
  width:auto;*/
  transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,color ease 400ms;/* 縮小するアニメーション設定 */
  -webkit-transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,color ease 400ms;
    }

p#h1 > a.low{
  font-size:16px;/* h3と同じサイズ設定 */
  line-height:1.5;/* 行間でピッチを修正 1L=50px */
  margin:0;
  color:#fff;/* スクロールして縮小時のp#h1の色 */
  
  transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,color ease 400ms;/* 拡大するアニメーション設定 */
  -webkit-transition:font-size ease 400ms,line-height ease 400ms,margin ease 400ms,color ease 400ms;
}


/* ===== PC用グローバルナビゲーション周り ===== */

/*nav#g_nav{
  background:rgba(0,160,148,0.6);
}*/
  
nav#g_nav ul{
	width:100%;
  max-width:1080px;/* 100% */
  height:auto;
  margin:0 auto;
  z-index:9999;
}
nav#g_nav ul li{
  float:left;
  overflow:hidden;
  width:16.6666667%;
 /* width:14.28575%;*/
  height:auto;
}
nav#g_nav ul li a{/* メニューの文字スタイル設定 */
  width:100%;
   height:1.875em;/*文字16pxでナビの高さを30pxにする設定*/
  line-height:1.875;

}


/* =====  end g_nav周り  =====*/






/* ===== PC用カテゴリーナビ、アイコン ===== */

/* 中画面・PC用カテナビ：全体 */
ul#cate_desk{
	width:98%;
	max-width:1024px;/* 98% */
  height:auto;
}

/*.cate_navbox{
  background:rgba(0,160,148,0.6);
}*/





/* ===== PC画面用キャッチフレーズ周りの指定 =====*/

section.main_copy{
	width:100%;
max-width:100%;/* 1080px */
  height:auto;
}
div#top_image_box,
div#image_box{/* 最初の背景表示用のボックス */
	padding-top:120px;/* #header_boxの高さ＋アキを逃げる。小画面用 */
	margin:0;
	}/* 各画像の指定やアキの指定は個別のCSSに記述 */
	

.hdgroup{
	width:100%;
	height:auto;
	margin:0 0 24px 0;
}

.main_copy h2{
	font-size:3.515625vw;/* 200%=36px */
	line-height:1;
	width:100%;
  height:auto;
	margin:0 0 0 0;
	padding:0;
}
.main_copy h2,
.main_copy aside{
	font-family: 'Noto Serif JP', serif;
	font-weight:900;
}


/* ===== end キャッチフレーズ周りの指定 =====*/



/* ===== PC画面用：基本コンテンツボックススタイル指示 ===== */

.content_box{
	width:98%;
	max-width:1080px;/* 98% */
  height:auto;
	/*margin:0 auto 48px;*/
}






/* ===== PC画面用：フッター周り ===== */

#footer_box{
  width:100%;
  height:auto;
  background:rgba(0,160,148,1); /* rgba(0,0,0,0.7) */
}

footer{
	box-sizing:border-box;
	width:100%;
	height:auto;
  max-width:100%;/* 1080px */
  margin:0 auto;
  overflow:hidden;
 /* background:rgba(0,153,255,0.2);*/
}

/* ===== フッター内 ===== */

footer #content_map{
	width:100%;
	height:auto;
	margin:0 auto;
	padding: 0 0 36px;
	box-shadow: 3px 0px 4px 0px rgba(0,51,0,0.2), -3px 0px 4px 0px rgba(0,51,0,0.2),
	           1px 0px 2px 0px rgba(255,255,255,0.2)inset, -1px 0px 2px 0px rgba(255,255,255,0.2)inset;
}

#content_map .mainpage_list{
	width:100%;
	height:auto;
	overflow:hidden;
}
.mainpage_list>li{
	float:left;
	box-sizing:border-box;
	width:20%;
	height:300px;
	border-left:solid 2px rgba(255,255,255,0.6);
	margin:24px 0 0 0;
	font-size:100%;
	text-indent:2em;
	/*color:#fff;opacity:0.9;*/
	color: #fff;opacity:0.8; /*rgba(255,255,255,0.9)*/;
}

.mainpage_list>li:nth-child(4){
	border-left:solid 2px rgba(255,255,255,0.6);
}


.mainpage_list>li:first-child{
	border-left:none;
}


.mainpage_list>li a{
	box-sizing:border-box;
	display:block;
	width:100%;
  height:auto;
	margin:0 0 24px 0;
}
.subcontent_list>li a{
	margin:0 0 12px 0;
}





footer div#content_map ul li a:link,
footer div#content_map ul li a:visited{
	color:#fff;
}
footer div#content_map ul li a:hover{
	color:#99cc33;
}



/*
#content_map .mainpage_list>li>.subcontent_list{
	margin:12px 0 0 0;
}
#content_map .mainpage_list>.mainpage_first{
	width:157px; 不要
	border:none;
	margin:20px 0 0 18px;
}
#content_map .mainpage_list>li>ul.subcontent_list li{
	margin:0 0 15px 0;
	font-size:93%;
	text-indent:2em;
}
#content_map .mainpage_list>li>ul.subcontent_list .extra_list{
	font-size:85%;
	letter-spacing:-0.08em;
}
*/

footer .ci{
	width:100%;/* 1080px */
  height:auto;
	margin:96px 0 0;
}

footer div.ci h1{
	width:auto;
  height:auto;
	margin:0 auto;
	text-align:center;
	color:#fff;
}
div.ci h1 a{
  font-family:"ycb_logo_yoko";
  font-size:2em;
}
	
footer .ci p{
	width:100%;
	height:auto;
	margin:0 12px 0 0;
	font-size:100%;
	letter-spacing:0.1em;
	text-align:center;
	float:right;
	color:#fff;
}
footer div.ci p small{
	font-size:0.75em;
}
footer a:link,footer a:visited{
	color:#fff;
}
footer a:hover{
	color:#cf0;
}


.copyright{
  width:100%;
  height:auto;
  margin:0 0 24px;
  color:#fff;
}
.copyright small{
  text-align:right;
}



}