/* FONT
-------------------------------------------------- */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
::selection {
  background: #b3e5fb;
  color: #ffffff;
}
::-moz-selection {
  background: #b3e5fb;
  color: #ffffff;
}

/* HTML / BODY / MAIN / CONTAINER
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  color: #1d3544;
}
body.sticky-footer {
  margin-bottom: 236px;
}
body.fixed-nav {
  padding-top: 56px;
}
main {
	padding-bottom: 20px;
}
.content-wrapper {
  min-height: calc(100vh - 236px);
	overflow-x: hidden;
}


/* FOOTER
-------------------------------------------------- */
.footer-logo-box {
	padding: 60px;
	text-align: center;
}
.footer-bottom {
	border-bottom: 6px solid #03A9F4;
}
footer.sticky-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 236px;
  line-height: 55px;
  color: #fff;
	border-top: 1px solid rgba(0,0,0,.1);
}
footer a {
	color: #92a1aa;
}
footer a:hover {
	color: #03A9F4;
}


/* HEADERS
-------------------------------------------------- */
h1 {
  margin-bottom: 20px;
	font-feature-settings: "palt";
}
h2 {
	margin-top: 40px;
  padding: .25rem 0 .25rem .75rem;
	font-feature-settings: "palt";
}
h2.top {
	margin-top: 20px;
}
h3 {
	margin-top: 40px;
}
h3.top {
	margin-top: 20px;
}


/* LINKS
-------------------------------------------------- */
a {
	color: #03A9F4;
}
a:hover {
	color: #67cbf8;
	text-decoration: none;
}
.breadcrumb-list {
  overflow-x: scroll;
  background-color: #FFF;
	-ms-overflow-style: none;
}
.breadcrumb-list::-webkit-scrollbar {
  display: none;
}
.breadcrumb-list ol {
  list-style: none;
  display: table;
}
.breadcrumb-list ol li {
  padding: 5px 0px;
  display: table-cell;
  white-space: nowrap;
}
.breadcrumb-list ol > li + li:before {
  content: "/";
  padding: 0.6rem;
}
.breadcrumb-list ol > li:last-child{
	padding-right: 15px;
}

#back_to_top {
  position: fixed;
  bottom: 40px;
  right: 16px;
  display: none;
	z-index: 1060;
}
#back_to_top a {
	display: block;
	width: 60px;
	height: 60px;
	padding:15px;
	border-radius: 50%;
	opacity: .6;
}
#back_to_top a:hover {
	opacity: 1;
}

/* MODAL
-------------------------------------------------- */
.modal-toggle {
	color: #03A9F4;
}
.modal-toggle:hover {
	color: #67cbf8;
	cursor: pointer;
}
.modal-body ol {
	margin-bottom: 0px;
}


/* side-tag
-------------------------------------------------- */
.side-tag {
	position: fixed;
  bottom: 0px;
  right: 0px;
	z-index: 1060;
	/* transform: rotate( 90deg ); */
	padding: 8px;
	text-align: center;
	color: #fff;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1rem;
	opacity: .6;
}


/* TEXT
-------------------------------------------------- */
.smaller {
  font-size: 50%;
}
.sup-text {
	font-size: 80%;
	vertical-align: top;
	position: relative;
	top: -0.1em;
	font-weight: bold;
}
.sub-text {
	font-size: 75.5%;
	vertical-align: bottom;
	position: relative;
	top: 0.1em;
}
.figure-caption {
  color: #3a5566;
}


/* UL / OL  LIST
-------------------------------------------------- */
ul, ol {
	padding-left: 20px;
}
ul {
	list-style: none;
}
.list-circle li {
	position: relative;
	padding-left: 1.8em;
  list-style: none;
}
.list-circle li:before {
	font-family: "Font Awesome\ 5 Free";
	content: "\f111";
	font-weight: 900;
	left: .2rem;
	position: absolute;
	top: 0;
  color: #03A9F4;
}
.list-asterisk li {
	position: relative;
	padding-left: 2em;
  list-style: none;
}
.list-asterisk li:before {
	font-family: "Font Awesome\ 5 Free";
	content: "\f069";
	font-weight: 900;
	left: 0.5rem;
	position: absolute;
	top: 0;
}
.contents-ul li {
	padding: .5rem 0;
}
ol {
  counter-reset: number;
  list-style-type: none !important;
}
ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: .5rem 1.0rem 1.0rem 30px;
}
ol.number-circle-ol li:before{
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display:inline-block;
  background: #03A9F4;
  color: #fff;
  font-weight:bold;
  font-size: 1rem;
  border-radius: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align:center;
}
ol.number-ol li:before{
  position: absolute;
  counter-increment: number;
  content: counter(number)".";
  display:inline-block;
  font-weight:bold;
  font-size: 1rem;
  left: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align:center;
}
ol.lower-alpha-ol li:before{
  position: absolute;
  counter-increment: number;
  content: counter(number, lower-alpha)".";
  display:inline-block;
  font-size: 1.4rem;
  left: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align:center;
	font-weight: bold;
}
ol.number-parenthesis-ol li:before{
  position: absolute;
  counter-increment: number;
  content: counter(number)"）";
  display:inline-block;
  font-size: 1rem;
  left: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align:center;
}
.index-ul li {
	padding: .5rem 0;
	font-feature-settings: "palt";
}


/* TABLE
-------------------------------------------------- */
.table thead th {
  vertical-align: top;
}
.table-ckd {
	border-bottom: 1px solid #dee2e6;
}

/* IMAGE
-------------------------------------------------- */
.img-fluid {
  width: 100%;
	max-width: none;
}


/* MAIN CONTENTS
-------------------------------------------------- */
.jumbotron {
	border-radius: 0rem;
	background: #FFB300;
	background: -moz-linear-gradient(-45deg, #FFB300 0%, #FFB300 50%, #1976D2 50%, #1976D2 100%);
	background: -webkit-linear-gradient(-45deg, #FFB300 0%,#FFB300 50%,#1976D2 50%,#1976D2 100%);
	background: linear-gradient(135deg, #FFB300 0%,#FFB300 50%,#1976D2 50%,#1976D2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFB300', endColorstr='#1976D2',GradientType=1 );
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
}
.jumbotron h1 {
	font-family: 'Noto Sans JP';
	font-weight: 300;
	text-align: center;
	font-size: 2.4rem;
	color: #fff;
	font-feature-settings: "palt";
}
.sub-title {
	text-align: center;
	font-size: 1rem;
	color: #fff;
	font-feature-settings: "palt";
}
.lead {
	margin: 0px auto 80px;
	font-size: 1.1rem;
}
.lead h2 {
	text-align: center;
	font-size: 2.4rem;
	color: #03A9F4;
}
.supervisor {
	margin-left: 10px;
  text-align: center;
	font-size: .8rem;
	font-weight: bold!important;
  color: #fff;
}
.copylight p {
	margin-top: 40px;
	text-align: left;
	font-size: .6rem;
  color: #fff;
}
.note {
	padding: 40px 0;
	border-top: 1px solid rgba(0,0,0,.1);
	border-bottom: 1px solid rgba(0,0,0,.1);
	font-feature-settings: "palt";
}
.content-image {
	margin: 40px 0;
  padding: 16px;
  height: 180px;
  background-color: #FFF8E1;
  text-align: center;
}
.content-image h3 {
  margin: 28px 0 20px;
  color: #03A9F4;
}
.title {
	margin-bottom: 20px;
	padding: 16px 0;
	font-size: 1.8rem;
	color: #fff;
	font-feature-settings: "palt";
}
.reference {
	margin-top: 80px;
	font-size: 0.9rem;
	border-top: 1px solid rgba(0,0,0,.1);
}
.reference ol {
	padding-left: 2rem;
}

.recommend {
	margin: 0 0 235px;
	padding: 60px 30px;
	background-image: radial-gradient(circle, #9adcfa 0%, #03a9f4 100%);
}
.recommend h3 {
	margin-top: 0px;
	margin-bottom: 20px;
	text-align: center;
	color: #fff;
	font-feature-settings: "palt";
}
.recommend p {
	text-align: left;
	color: #fff;
	font-feature-settings: "palt";
}
.cover {
	margin-bottom: 20px;
}

/* DOG
-------------------------------------------------- */
.dog-blue-color {
  color: #00BCD4;
}
.dog-light-blue-color {
  color: #66d6e5;
}
.dog-blue-bg {
  background: #00BCD4;
}
.dog-light-blue-bg {
  background: #b2dfdb;
}
h1.dog-h1:first-letter {
  margin-right: .1rem;
  font-size: 3.5rem;
  color: #00BCD4;
}
h2.dog-h2 {
  border-left: 6px solid #00BCD4;
}
h2.dog-contents-h2:first-letter {
	padding: 8px;
  font-size: 2.4rem;
  color: #00BCD4;
}
ol.dog-number-circle-ol  li:before{
	color: #fff;
  background: #00BCD4;
}
.dog-contents-link a {
	color: #00BCD4;
}
.dog-contents-link a:hover {
	text-decoration: none;
	color: #66d6e5;
}
.back_to_top_dog a {
	background-image:  url("../images/dog_arrow.png");
	-webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.back_to_top_dog a:hover {
	opacity: 1.0;
	-webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

/* CAT
-------------------------------------------------- */
.cat-pink-color {
  color: #F06292;
}
.cat-light-pink-color {
  color: #f7b0c8;
}
.cat-pink-bg {
  background: #F48FB1;
}
.cat-light-pink-bg {
  background: ;
}
h1.cat-h1:first-letter {
  margin-right: .1rem;
  font-size: 3.5rem;
  color: #F06292;
}
h2.cat-h2 {
  border-left: 6px solid #F48FB1;
}
h2.cat-contents-h2:first-letter {
	padding: 8px;
  font-size: 2.4rem;
  color: #F06292;
}
ol.cat-number-circle-ol li:before{
  background: #F06292;
}
.cat-contents-link a {
	color: #F06292;
}
.cat-contents-link a:hover {
	text-decoration: none;
	color: #f7b0c8;
}
.back_to_top_cat a {
	background-image:  url("../images/cat_arrow.png");
	-webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.back_to_top_cat a:hover {
	opacity: 1.0;
	-webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}


/* NAVBAR
-------------------------------------------------- */
.fixed-top {
  z-index: 1070;
}
.navbar {
  padding: 0;
  background: #03A9F4;
}
.navbar-brand {
	margin-right: 0;
  padding: 13px 0 13px 15px;
	font-size: 1.25rem;
	font-weight: 900;
  color: #fff;
	font-feature-settings: "palt";
}
.navbar-brand-link {
	color: #fff;
}
.navbar-brand-link:hover {
	color: #fff;
	text-decoration: none;
}
.navbar-sub-title {
	display: none;
	color: #fff;
	font-weight: 600;
}
.navbar-nav {
	height: 100vh;
	overflow: auto;
	padding-top: 10px;
	padding-bottom: 80px;
}
.navbar-sidenav {
  background: #F4F7F9;
}
.navbar-toggler {
  margin-right: 0.75rem;
	padding: 0;
}

/* Custom-toigger */
.animated-toggler {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
.animated-toggler span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.animated-toggler span {
  background: #fff;
}
.animated-toggler span:nth-child(1) {
  top: 0px;
}
.animated-toggler span:nth-child(2), .animated-toggler span:nth-child(3) {
  top: 10px;
}
.animated-toggler span:nth-child(4) {
  top: 20px;
}
.animated-toggler.open span:nth-child(1) {
  top: 11px;
  width: 0%;
  left: 50%;
}
.animated-toggler.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.animated-toggler.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.animated-toggler.open span:nth-child(4) {
  top: 11px;
  width: 0%;
  left: 50%;
}
#mainNav button:focus {
  outline: none;
  outline: none;
}
.navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
}
.nav-link-active {
	color: #92a1aa;
}
.nav-link-active:hover {
	color: #92a1aa;
	cursor: default;
}
#mainNav .navbar-collapse {
  /* overflow: auto;
  max-height: 100vh; */
}
li.divider {
  height: 1px;
  margin: 10px 1px;
  overflow: hidden;
  border-bottom: 1px solid #d8d8d8;
  box-shadow: 0 1px 0 #ffffff;
  -moz-box-shadow: 0 1px 0 #ffffff;
  -o-box-shadow: 0 1px 0 #ffffff;
  -ms-box-shadow: 0 1px 0 #ffffff;
}


/* MEDIA QUERIES
-------------------------------------------------- */
/* Small devices (phonesSE, 320px and up) */
@media (min-width: 320px) {
	.jumbotron h1 {
	 font-size: 3.2rem;
 }
 .sub-title {
	 font-size: 1rem;
 }
 h2 {
   font-size: 1.4rem;
 }
 h3 {
   font-size: 1.4rem;
 }
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.jumbotron h1 {
		 font-size: 4.0rem;
	}
	.sub-title {
		 font-size: 1.4rem;
	}
	h2 {
	 font-size: 1.6rem;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.navbar-brand {
		margin-left: 0;
		padding: 12px 0 11px 39px;
		font-size: 1.4rem;
		font-weight: 900;
		color: #fff;
		font-feature-settings: "palt";
	}
	.jumbotron h1 {
	 	font-size: 4.2rem;
	}
	.sub-title {
	 	font-size: 1.8rem;
	}
	.supervisor {
	 	margin-left: 0px;
	}
	.copylight p {
	 	text-align: center;
	}
	h2 {
	 	font-size: 1.6rem;
	}
	h2.cat-contents-h2:first-letter {;
		font-size: 3.2rem;
	}
	h2.dog-contents-h2:first-letter {;
		font-size: 3.2rem;
	}
	.reference ol {
		padding-left: 3rem;
	}
	.pager {
		margin: 60px 0 40px;
		font-size: 1rem;
	}
	.recommend {
		margin: 0 0 235px;
		padding: 60px 120px;
	}
 .recommend p {
 		font-size: 1.2rem;
 }
 footer.sticky-footer {
 		border-top: none;
 }
 .table-ckd {
	 margin-left: auto;
	 margin-right: auto;
	 width: 80%;
	 text-align: center;
 }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #mainNav .navbar-collapse {
    overflow: visible;
    max-height: none;
  }
  #mainNav .navbar-collapse .navbar-sidenav {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 56px;
		/* overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ */
  }
  #mainNav .navbar-collapse .navbar-sidenav > .nav-item {
    width: 300px;
		font-feature-settings: "palt";
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding: .3em 1rem;
		line-height: 1.4;
		font-size: .9rem;
  }
	#mainNav.fixed-top .navbar-sidenav {
    height: 100vh;
  }
  #mainNav.fixed-top .sidenav-toggler {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: calc(100vh - 56px);
  }
	body.sidenav-toggled footer.sticky-footer {
    width: calc(100% - 55px);
  }
  footer.sticky-footer {
    width: calc(100% - 300px);
  }
	.content-wrapper {
    margin-left: 300px;
  }
	.container {
		max-width: 840px;
	}
	.container-index {
		max-width: 960px;
	}
	h2 {
 	 font-size: 2rem;
  }
	.jumbotron h1 {
		text-align: center;
		font-weight: 200;
		font-size: 4.8rem;
	}
	.title {
		margin-top: 0;
	}
	.sub-title {
		margin-bottom: 40px;
 	 font-size: 1.8rem;
  }
	.navbar-sub-title {
		display: block;
		margin-left: 1rem;
		font-feature-settings: "palt";
	}
	.supervisor {
	  font-size: 1rem;
	}
	.copylight p {
 	 font-size: .9rem;
  }
	.index-ul li {
		font-size: 1.3rem;
	}

	.modal-dialog {
    position: relative;
    left: 120px;
	}
}
/* Large devices (desktops, 1200px and up) */
@media (min-width: 1200px) {
	/* .container {
		max-width: 720px;
	} */
}