@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url('https://fonts.googleapis.com/css?family=Roboto');

/*-----------------------------------------
float
-----------------------------------------*/

/*--要素を右へ配置--*/
.right { float:right;}

/*--要素を左へ配置--*/
.left { float:left;}

/*--<後述>回り込みをリセット--*/
.cl { clear: both;}

/*--<先述>回り込みをリセット/モダンブラウザ--*/
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }

/*--<先述>回り込みをリセット/IE 6・7--*/
.cf { zoom:1; }



body {
  font-family: 'Noto Sans Japanese';
  font-weight: 200;
}

header {
}
header #site_title {
  max-width: 1200px;
  width: 90%;
  padding: 1.2em 0;
  font-size: 1.8em;
  margin: 0 auto;
  font-weight: 600;
}
header #site_title a {
  text-decoration: none;
  color: #000;
}

/*- index only -*/
body#index header #site_title {
  max-width: 1600px;
  width: 100%;
  padding: 3em 0;
  font-size: 1.8em;
  margin: 0 auto;
  font-weight: 600;
  text-align: center;
  background-image: url("../img/index.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
body#index header span {
  background-color: #fff;
  padding: 1em 1.5em;
  -moz-opacity: 0.8;
	opacity: 0.8;
}

header nav {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background:#CCCCCC;
}
header nav ul{
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  max-width: 1200px;
  margin: 0 auto;
  border-right: 1px solid #ddd;
}
header nav ul li{
  min-width: 8%;
  flex-basis: 25%;
  background: #999;
  text-align: center;
  list-style: none;
  border-left: 1px solid #ddd;
}
header nav ul li a {
  text-decoration: none;
  padding: 1.4em 0;
  display: block;
  font-weight: 500;
  color: #fff;
  font-size: 1em;
}
header nav ul li a:hover {
  background-color: #05A3BC;
}
#pankuzu {
	font-size: 0.9em;
	max-width: 1200px;
	width: 90%;
	padding: 1em 0;
  margin: 1.5em auto 1em;
}
#pankuzu ul li {
  float:left;
  list-style: none;
}
#pankuzu ul li:not(:first-child):before {
  content: "　/　";
}

#read_wrap {
  /*background-color: #EFEFEF;*/
  width: 100%;
  position: relative;
  z-index: 1;
}
#read_wrap::after{
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
  background-color:#333;
  opacity: 0.7;
}
#read {
  max-width: 1600px;
  width: 100%;
  padding-top: 4em;
  padding-bottom: 3em;
  text-align: center;
  border-bottom: 1px solid #ddd;
  margin: 0 auto;
  
  /*background-image: url("../img/0002-24.jpg");*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/*img {
  margin: 40px auto;
  max-width: 600px;
  width: 100%;
  display: block;
}*/
#read>h1 {
  font-size: 2em;
  margin-bottom: 0.3em;
  color: #fff;
  position: relative;
  z-index: 3;
  text-shadow: 0 0 4px #666;
}

#read>p {
  font-size: 1em;
  margin-bottom: 20px;
  color: #FFF;
  position: relative;
  z-index: 3;
  text-shadow: 0 0 8px #666;
}


/*-- subnav --*/

#subnav {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background:#ddd;
}
#subnav ul{
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  max-width: 1200px;
  margin: 0 auto;
  border-right: 1px solid #ddd;
}
#subnav ul li{
  background: #eee;
  text-align: center;
  list-style: none;
  border-left: 1px solid #ccc;
}
#subnav ul li a {
  text-decoration: none;
  padding: 1em 0;
  display: block;
  font-weight: 400;
  color: #333;
  font-size: 1em;
}
#subnav ul li a:hover {
  background-color:#A0F1EB;
}


/* nav highlight */
body#about nav li.about,
body#about_axolotl nav li.about,
body#about_habitat nav li.about,
body#about_metamorphosis nav li.about,

body#live nav li.live,
body#live_pickup nav li.live,
body#live_quality nav li.live,
body#live_type nav li.live,
body#live_maintenance nav li.live,

body#launch nav li.launch,
body#launch_place nav li.launch,
body#launch_tank nav li.launch,
body#launch_bottom nav li.launch,
body#launch_tempe nav li.launch,
body#launch_control nav li.launch,
body#launch_attitude nav li.launch,

body#food nav li.food,
body#food_about nav li.food,
body#food_convenient nav li.food,
body#food_other nav li.food {
  background-color: #05A3BC;
}


/* subnav column */
body#about #subnav ul li,
body#about_axolotl #subnav ul li,
body#about_habitat #subnav ul li,
body#about_metamorphosis #subnav ul li {
  width: calc( 100% / 3 );
}
body#live #subnav ul li,
body#live_pickup #subnav ul li,
body#live_quality #subnav ul li,
body#live_type #subnav ul li,
body#live_maintenance #subnav ul li{
  width: calc( 100% / 4 );
}
body#launch #subnav ul li,
body#launch_place #subnav ul li,
body#launch_tank #subnav ul li,
body#launch_bottom #subnav ul li,
body#launch_tempe #subnav ul li,
body#launch_control #subnav ul li,
body#launch_attitude #subnav ul li {
  width: calc( 100% / 6 );
}

body#food #subnav ul li,
body#food_about #subnav ul li,
body#food_convenient #subnav ul li,
body#food_other #subnav ul li {
  width: calc( 100% / 3 );
}


/* subnav highlight */
body#about_axolotl #subnav li.about_axolotl,
body#about_habitat #subnav li.about_habitat,
body#about_metamorphosis #subnav li.about_metamorphosis,

body#live_pickup #subnav li.live_pickup,
body#live_quality #subnav li.live_quality,
body#live_type #subnav li.live_type,
body#live_maintenance #subnav li.live_maintenance,

body#launch_place #subnav li.launch_place,
body#launch_tank #subnav li.launch_tank,
body#launch_bottom #subnav li.launch_bottom,
body#launch_tempe #subnav li.launch_tempe,
body#launch_control #subnav li.launch_control,
body#launch_attitude #subnav li.launch_attitude,

body#food_about #subnav li.food_about,
body#food_convenient #subnav li.food_convenient,
body#food_other #subnav li.food_other
{
  background-color:#A0F1EB;
}



.index_list {
  border: 1px solid #ddd;
  background-color: aliceblue;
  padding: 20px 60px 20px 20px;
  width: auto;
  margin: 20px 0;
  display:inline-block;
}
.index_list p {
  margin: 0 0 10px 0;
}
.index_list ul {
  padding-left: em;
  text-align: left;
  /*list-style: outside;*/
}
.index_list ul li {
  /*list-style: outside;*/
  list-style-type: none;
  padding-left: 38px;
  background-image: url("../img/kkrn_icon_check_5.svg");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: left  center;
  font-weight: 400;
  font-size: 1.1em;
  margin-bottom: 0.2em;
}
main {
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
}
article {
  margin: 40px 0;
  padding-top: 2em;
  border-top: 1px solid #ddd;
}
article:before,
article:after { content:""; display:table; }
article:after { clear:both; }

article:first-child {
  border-top: none;
}

article h2 {
  font-size: 1.6em;
  /*margin-bottom: 15px;*/
  color: #05A3BC;
  font-weight: 600;
  border-left: #05A3BC 5px solid;
  padding: 0.1em 0.1em 0.1em 0.5em;
  margin: 1em 0 1.5em;
}
article p {
  font-size: 1em;
  line-height: 170%;
  margin-bottom: 20px;
  letter-spacing: 0.03em;
}
article p strong {
  background: linear-gradient(transparent 50%, #ffff66 50%);
}
article img {
  display: block;
  aspect-ratio: 4 / 3;
  float: right;
  width: calc( 40% - 2em);
  max-width: 350px;
  margin-top: 0.5em;
  margin-left: 2em;
  margin-bottom: 2em;
}
main article table {
  border-collapse:collapse;
  empty-cells:show;
	border-style:none;
	border:0px;
	border-top:#eee 1px solid;
	border-left:#eee 1px solid;
	border-right:#eee 1px solid;
	margin-top:20px;
}
main article table th {
	font-size:1.2em;
	text-align:left;
	padding:15px;
	background-color:#f1fbfe;
	border:none;
	border-bottom:#eee 1px solid;
	font-weight:normal;
	color:#0084A6;
}
main article table table th {
	white-space: nowrap;
}
main article table td {
	font-size:1.2em;
	text-align:left;
	padding:15px;
	border:none;
	border-bottom:#eee 1px solid;
}
main article ul.other_link {
	border: 1px solid #ddd;
	background-color: aliceblue;
	padding: 20px 60px 20px 40px;
	width: auto;
	margin: 10px 0;
	display:inline-block;
	list-style: outside;
}
main article ul.other_link li {
	margin-bottom: 2px;
}


#pagination {
  margin-top: 100px;
}
#pagination ul {
  width: 100%;
  border: 1px solid #ddd;
}
#pagination ul li {
  width: 50%;
  list-style: none;
  text-align: center;
}
#pagination ul li a {
  display: block;
  padding: 15px 15px 25px 15px;
  font-size: 1.2em;
  text-decoration: none;
  font-weight: 400;
}
#pagination ul li.back {
	background-color:#EFEFEF;
}
#pagination ul li.back a {
	color: #999;
}
#pagination ul li a:hover {
  background-color: #05A3BC;
  color: #fff;
}
#pagination ul li a span {
  font-size: 1em;
  line-height: 4px;
  font-weight: 100;
}
#pagination ul li.back {
  float: left;
  border-right:1px solid #ddd;
}
#pagination ul li.next {
  float: right;
}


/* category_list */
#category_list {
  border: 1px solid #ddd;
  background-color: aliceblue;
  padding: 20px 60px 20px 20px;
  width: auto;
  margin: 30px 0;
  display:inline-block;
}
#category_list p {
  margin: 0 0 10px 0;
}
#category_list ul {
  padding-left: 25px;
  text-align: left;
}
#category_list ul li {
  list-style: outside;
  margin-bottom: 2px;
}
#category_list ul li ul {
  padding-left: 20px;
  margin-bottom: 10px;
}
#category_list ul li ul li {
  list-style-type: circle;
}


/* banner */
.bn_bottom {
  width: 100%;
}
.bn_bottom .bn_pc,
.bn_bottom .bn_sp {
  margin: 0 auto;
  text-align: center;
}
.bn_bottom .bn_pc { display: block; }
.bn_bottom .bn_sp { display: none; }



footer {
  width: 100%;
  background-color: #666;
  padding: 30px 0;
}

footer #sitemap {
  max-width: 1200px;
  width: calc( 100% - 4em );
  margin: 0 auto;
  
 /*-moz-column-width: 16em;
 -webkit-column-width: 16em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;*/
}
footer #sitemap section {
 /*display: inline-block;*/
  display: block;
  margin-bottom: 2em;
  /*padding:  1em;*/
  width: calc( 100% / 4 );
  float: left;
}
footer #sitemap section p {
  margin-bottom: 5px;
  font-size: 1.1em;
  font-weight: 400;
}
footer #sitemap section p a {
  color: #fff;
  text-decoration: none;
}
footer #sitemap section ul li{
  padding-left: 0.6em;
  list-style: none;
  font-size: 1em;
  margin-bottom: 0.1em;
}
footer #sitemap section ul li a {
  color: lightgoldenrodyellow;
  font-weight: 100;
  text-decoration: none;
}
footer address {
  color: #ddd;
  font-size: 0.9em;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 100;
  font-style: normal;
  text-align: center;
  border-top: 1px solid #999;
  padding-top: 30px;
  margin-top: 20px;
}

#PageTop {
	width: 55px;
	height: 55px;
	opacity:0.7;
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	z-index: 100;
	position: fixed;
	bottom: 25px;
	right: 25px;
}
#PageTop a {
	width:45px;
	height:45px;
	display: block;
	background-image:url(../img/pagetop.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 25px;
	text-indent: -9999px;
	background-color: #56c6e9;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-moz-opacity: 0.8;
	opacity: 0.8;
}
#PageTop a:hover {
	background-image:url(../img/pagetop_.svg);
	background-color: #fff;
	-moz-opacity: 0.9;
	opacity: 0.9;
}

/*-----------------------------------------
INDEX
-----------------------------------------*/

main {
  max-width: 1200px;
  line-height: 180%;
  margin-bottom: 20px;
  letter-spacing: 0em;
}
#index p.explanation {
	font-size: 1.6em;
	line-height: 180%;
	letter-spacing: 0.1em;
	text-align: center;
	display: block;
	margin-bottom: 80px;
}
#index p.explanation .br-pc {
	display:block;
}
#index_content {
  max-width: 1050px;
  width: 98%;
  margin: 0 auto;
  
 -moz-column-width: 16em;
 -webkit-column-width: 16em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em; 
}
#index_content section {
	display: inline-block;
	margin-bottom: 15px;
	padding: 20px;
	width:  100%;
	background-color: #F1F1F1;
	text-align: center;
}
#index_content section img {
  margin: 0 0 10px 0;
}
#index_content section p{
  margin-bottom: 15px;
  font-size: 1.6em;
  font-weight: 400;
}
#index_content section p a {
  color: #333;
  text-decoration: none;
}
#index_content section ul li{
  list-style: none;
  font-size: 1.5em;
  line-height: 25px;
  margin-bottom: 2px;
}
#index_content section ul li a {
  font-weight: 300;
  /*text-decoration: none;*/
}
body#index footer address{
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}



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

レスポンシブ対応      730px 以下

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

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

/* banner */
.bn_bottom .bn_pc { display: none; }
.bn_bottom .bn_sp { display: block; }

header #site_title {
  padding: 0.9em 0;
  font-size: 1.4em;
  font-weight: 600;
  text-align: center;
}
header nav ul li{
  flex-basis: 50%;
  border-top: 1px solid #ddd;
}
header nav ul li:nth-child(3),
header nav ul li:nth-child(4) {
  border-left: 1px solid #ddd;
}
header nav ul li a {
  padding: 1em 0;
  font-weight: 400;
  font-size: 1em;
}

#read {
  padding-top: 3em;
  padding-bottom: 2em;
}
#read>h1 {
  font-size: 1.8em;
  margin-bottom: 0.4em;
  font-weight: 600;
}
#read>p {
  font-size: 1em;
  margin-bottom: 20px;
  color: #FFF;
  position: relative;
  z-index: 3;
  text-shadow: 0 0 8px #666;
}

#subnav ul {
  flex-wrap: wrap;
}
#subnav ul li{
  flex-basis: 50%;
  border-top: 1px solid #ddd;
}
#subnav ul li:nth-child(3),
#subnav ul li:nth-child(4) {
  border-left: 1px solid #ddd;
}
#subnav ul li a {
  padding: 1.2em 0;
  font-weight: 400;
  font-size: 0.8em;
}
#subnav ul li a:hover {
  background-color:#A0F1EB;
}
  
  
  
}


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

レスポンシブ対応      630px 以下

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

@media screen and (max-width:630px) {}


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

レスポンシブ対応      500px 以下

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

@media screen and (max-width:500px) {
  
header nav ul{
  flex-wrap: wrap;
}

header nav ul li:nth-child(5) a,
header nav ul li:nth-child(6) a,
header nav ul li:nth-child(7) a,
header nav ul li:nth-child(8) a {
  border-top: 1px solid #ddd;
} 
  #read {
    /*width: calc( 100% - 2em);*/
    width: auto;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 3em;
    padding-bottom: 2em;
  }
article img {
  float: none;
  margin-top: 0em;
  margin-left: 0;
  width: 100%;
  max-width: 100%;
}
  
#index p.explanation {
	font-size: 14px;
	letter-spacing: 0em;
	text-align: left;
	padding-bottom: 40px;
	/*margin-bottom: 40px;*/
}
#index p.explanation .br-pc {
	display:none;
}

#pagination ul li {
  width: 100%;
}
#pagination ul li a {
  padding: 10px 10px 20px 10px;
}
#pagination ul li.back {
  float: none;
  border-right: none;
}
#pagination ul li.back a:hover {
	color: #fff;
}
#pagination ul li.next {
	border-bottom:1px solid #ddd;
	float: none;
}
#categor_list {
  width: 100%;
}

footer #sitemap section {
  width: calc( 100% / 2 );
}
footer #sitemap section ul li{
  font-size: 16px;
}
footer #sitemap section ul li a {
  font-weight: 200;
}
footer address{
  font-size: 12px;
}
  
/* font */
  #read p,
  article p,
  li {
    font-size: 110%;
  }
  article h2 {
    font-size: 1.7em;
  }
}