/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

body {
  background: #fff;
  color: #22333D;
  font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

p {
  padding: 0;
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin: 0;
  padding: 0;
}

/*--------------------------------------------------------------
# loading
--------------------------------------------------------------*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 100;
}
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #8cd2c8;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
 

/*--------------------------------------------------------------
# text
--------------------------------------------------------------*/
.midashiSGR {
	font-family: 'Quattrocento Sans', sans-serif;
	font-weight: bold;
	color: #454F54;
	font-size: 0.85rem;
}
.midashiSPB {
	font-family: 'Quattrocento Sans', sans-serif;
	font-weight: bold;
	color: #8CD2C8;
	font-size: 0.85rem;
}
.midashiMPB {
	font-family: 'Quattrocento Sans', sans-serif;
	font-weight: bold;
	color: #8CD2C8;
	font-size: 1.2rem;
}
.midashiLPB {
	font-family: 'Quattrocento Sans', sans-serif;
	font-weight: bold;
	color: #8CD2C8;
	font-size: 1.4rem;
}

.midashiSMGr {
	font-family: 'Quattrocento Sans', sans-serif;
	font-weight: bold;
	color: rgba(34, 51, 51, 0.5);
	font-size: 0.85rem;
}
.midashi10SPB {
	font-family: 'Quattrocento Sans', sans-serif;
	font-weight: bold;
	font-size: 1rem;
}
.readtext {
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.8;
}
.text12Bl {
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.4;
}
.text12BlB {
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.4;
}
.text12BMgr {
	color: #454F54;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.4;
}
.text12BDdg {
	color: #41625D;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.4;
}
.text12BDg {
	color: #669992;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.4;
}

.text16BlBLLine {
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.4;
	border-left: solid 2px rgba(140, 210, 200, 0.75);
	padding-left: 1rem;
}
.text14BlB {
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.4;
}
.text14BlBLine {
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.4;
	border-top: solid 1px rgba(34, 51, 61, 0.3);
	border-bottom: solid 1px rgba(34, 51, 61, 0.3);
	padding: 1rem 0;
}
.text12BlBLine {
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.4;
	border-top: solid 1px rgba(34, 51, 61, 0.3);
	border-bottom: solid 1px rgba(34, 51, 61, 0.3);
	padding: 1rem 0;
}
.text11BlBLine {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
	border-top: solid 1px rgba(34, 51, 61, 0.3);
	border-bottom: solid 1px rgba(34, 51, 61, 0.3);
	padding: 1rem 0;
}
.text10BlLine {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	border-top: solid 1px rgba(34, 51, 61, 0.3);
	border-bottom: solid 1px rgba(34, 51, 61, 0.3);
	padding: 1rem 0;
}
.text10BlLine:nth-child(n+2) {
	border-top: none;
	border-bottom: solid 1px rgba(34, 51, 61, 0.3);
	padding: 1rem 0;
}
.text10BlLine:nth-child(even) {
	background-color: rgba(34, 51, 61, 0.03);
}

.text10Bl {
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.4;
}
.text08Bl {
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
}
.text07Bl {
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.4;
}
.textsmall07 {
	font-size: 0.65em;
}
.textsmall075 {
	font-size: 0.7em;
}
.textsmall06 {
	font-size: 0.55em;
}
.textsmall05 {
	font-size: 0.55em;
}
.lh12 {
	line-height: 1.2;
}
.lh15 {
	line-height: 1.5;
}
.lh18 {
	line-height: 1.8;
}
.lh20 {
	line-height: 2.0;
}
@media (max-width: 575px) {
	.readtext {
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.8;
	}
	.text10Bl {
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.4;
	}
	.text08Bl {
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.4;
	}
	.text07Bl {
	font-size: 0.6rem;
	font-weight: 400;
	line-height: 1.4;
	}
}

@media (max-width: 575px) {
	.midashiSPB {
		font-size: 0.75rem;
	}
	.midashiSMGr {
		font-size: 0.75rem;
	}
	.text16BlBLLine {
	font-size: 1.2rem;
	}
}
.super {
	font-size: 0.7rem;
	vertical-align: super;
}
.sub {
	font-size: 0.7rem;
	vertical-align: sub;
}

/* UNDER CONSTRUCTION */
.card-img-overlay {
  color: rgba(255, 255, 255, 1.00);
  background-color: rgba(0, 0, 0, 0.50);
  padding: 0;
  top: calc(50% - 0.5rem);
  text-align: center;
  font-weight: bold;
}

@media screen and (min-width: 576px) {
  .onlySP {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  .onlyPC {
    display: none;
  }
}

/*--------------------------------------------------------------
# link
--------------------------------------------------------------*/
a {
  color: #22333D;
}

a:hover, a:active, a:focus {
  color: #22333D;
  outline: none;
  text-decoration: none;
}
.readtext a {
  color: #669992;
  font-weight: 600;
}

.readtext a:hover, a:active, a:focus {
  color: #669992;
  font-weight: 600;
  outline: none;
  text-decoration: none;
}


#hero a:link {
  color: #22333D;
  font-weight: bold;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid #22333D;
}
#hero a:hover {
  color: #454F54;
  border-bottom: 2px solid #454F54;
}
#hero a:active {
  color: #22333D;
  border-bottom: 2px solid #22333D;
}
#hero a:focus {
  color: #22333D;
  border-bottom: 2px solid #22333D;
}
#footer a {
  color: #8CD2C8;
}
#footer a:hover, a:active, a:focus {
  color: #2dca98;
  outline: none;
  text-decoration: none;
}
.marker span {
  padding-bottom: 0.15rem;
  background: -webkit-linear-gradient(left, rgba(140, 210, 200, 0.50) 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
  background: linear-gradient(to right, rgba(140, 210, 200, 0.50) 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
  -webkit-transition: background-position .3s ease-out;
  transition: background-position .3s ease-out;
}
.marker:hover span {
  background-position: 0% bottom;
}
.marker02 span {
  padding-bottom: 0.15rem;
  background: -webkit-linear-gradient(left, rgba(140, 210, 200, 0.50) 30%, transparent 30%) 100% bottom / 200% 30% no-repeat;
  background: linear-gradient(to right, rgba(140, 210, 200, 0.50) 30%, transparent 30%) 100% bottom / 200% 30% no-repeat;
  -webkit-transition: background-position .3s ease-out;
  transition: background-position .3s ease-out;
}
.marker02:hover span {
  background-position: 0% bottom;
}



/*--------------------------------------------------------------
# parts
--------------------------------------------------------------*/
.underLineGr {
	border-bottom: 2px solid #22333D;
}
.underLinePGBox {
	border-bottom: solid 10px rgba(140, 210, 200, 0.75);
	overflow: hidden;
}
.underLinePGBox:hover img {
	transform: scale(1.03);
	transition-duration: 0.3s;
}
.underLinePGBoxTop {
	border-bottom: solid 10px rgba(140, 210, 200, 0.75);
	overflow: hidden;
}
.underLinePGBoxTop:hover img {
	transform: scale(1.03);
	transition-duration: 0.3s;
}
@media (max-width: 575px) {
	.underLinePGBoxTop {
		border-bottom: none;
		overflow: hidden;
	}
}

.colorber_PG {
	background-color: rgba(140, 210, 200, 0.50);
}
.colorber_PG35 {
	background-color: rgba(140, 210, 200, 0.35);
}
.bgcolorLGr {
	background-color: rgba(34, 51, 61, 0.07);
}
.bgcolorDGr {
	background-color: rgba(34, 51, 61, 1);
}
.bgcolorLPB {
	background-color: rgba(140, 210, 200, 0.50);
}
.breadcrumb {
	font-family: 'Quattrocento Sans', sans-serif;
	background-color: rgba(34, 51, 61, 0.07);
	font-size: 0.85rem;
}
.badge-info {
	background-color: rgba(140, 210, 200, 0.75);
	font-weight: 400;
}
.endborder {
	border-bottom: 1px solid #dfe2e5;
}
/*--------------------------------------------------------------
# youtube
--------------------------------------------------------------*/
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/*--------------------------------------------------------------
# header
--------------------------------------------------------------*/
#logo {
	/* position: absolute; */
    left: 30px;
    top: 15px;
    z-index: 90;
}

.planuslogo {
    width: 120px;
}
#header {
	background-color: transparent;
	height: 90px;
}
#header .language {
	position: absolute;
    right: 100px;
    top: 22px;
    z-index: 90;
}
@media (max-width: 575px) {
  #logo {
	position: absolute;
    left: 20px;
    top: 8px;
  }
  .planuslogo {
    width: 83px;
  }
  #header {
	height: 60px;
  }
  #header .language {
    right: 55px;
    top: 10px;
  }
}

/*--------------------------------------------------------------
# hero
--------------------------------------------------------------*/
#hero h1 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 5rem;
  line-height: 0.9;
  letter-spacing: -0.2rem;
  z-index: 90;
}
#hero .herosubcopy {
  z-index: 90;
}
#hero h2 {
  font-size: 1rem;
  line-height: 1.5;
}
@media (max-width: 767px) {
  #hero h1 {
	font-size: 4rem;
  }
  #hero h2 {
	font-size: 0.85rem;
  }
}
@media (max-width: 575px) {
  #hero h1 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	letter-spacing: 0rem;
	line-height: 1;
  }
  #hero h2 {
	font-size: 0.85rem;
  }
}
#hero {
	padding-top: 120px;
	background-color: #8CD2C8;
	position: relative;
	overflow: hidden;
	height: 40rem;
}
@media (max-width: 1000px) {
  #hero {
	padding-top: 100px;
	height: 32.5rem;
  }
}
@media (max-width: 575px) {
  #hero {
	padding-top: 80px;
	height: 35rem;
  }
  #hero .herosubcopy {
	  position: absolute;
	  top: 19rem;
	  width: 87vw;
  }
}
.topillust01 {
	position: absolute;
	width: 1500px;
	height: auto;
	top: -30px;
	right: -600px;
	z-index: 85;
}
.topillust02 {
	position: absolute;
	width: 750px;
	height: auto;
	bottom: 0px;
	right: -100px;
	z-index: 87;
}
.topillust03 {
	position: absolute;
	width: 700px;
	height: auto;
	top: -140px;
	left: -80px;
	z-index: 86;
}
.topillust01 img {
  opacity: 0.75;
}
.topillust02 img {
  opacity: 0.75;
}
.topillust03 img {
  opacity: 0.5;
}
@media (max-width: 1000px) {
  .topillust02 {
	position: absolute;
	width: 500px;
	height: auto;
	bottom: 0px;
	right: -70px;
	z-index: 86;
  }
  .topillust03 {
	position: absolute;
	width: 550px;
	height: auto;
	top: -95px;
	left: -65px;
	z-index: 86;
  }
}
@media (max-width: 767px) {
  .topillust02 {
	position: absolute;
	width: 500px;
	height: auto;
	bottom: 0px;
	right: -70px;
	z-index: 86;
  }
}
@media (max-width: 575px) {
  .topillust01 {
	position: absolute;
	width: 300px;
	height: auto;
	top: 100px;
	right: -50px;
	z-index: 85;
  }
  .topillust02 {
	position: absolute;
	width: 300px;
	height: auto;
	bottom: 0px;
	right: -50px;
	z-index: 86;
  }
  .topillust03 {
	position: absolute;
	width: 320px;
	height: auto;
	top: -55px;
	left: -10px;
	z-index: 86;
  }
  .topillust03 img {
	opacity: 0.65;
  }
}
/*--------------------------------------------------------------
# herosecond
--------------------------------------------------------------*/
#herosecond h1 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 5rem;
  line-height: 0.9;
  letter-spacing: -0.2rem;
  z-index: 90;
}
#heroseconds h1 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 5rem;
  line-height: 0.9;
  letter-spacing: -0.2rem;
  z-index: 90;
}

#herosecond .herosubcopy {
  z-index: 90;
}
#herosecond h2 {
  font-size: 1rem;
  line-height: 1.5;
}
#heroseconds .herosubcopy {
  z-index: 90;
}
#heroseconds h2 {
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 767px) {
  #herosecond h1 {
	font-size: 4rem;
  }
  #herosecond h2 {
	font-size: 0.85rem;
  }
  #heroseconds h1 {
	font-size: 4rem;
  }
  #heroseconds h2 {
	font-size: 0.85rem;
  }
}
@media (max-width: 575px) {
  #herosecond h1 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	letter-spacing: 0rem;
	line-height: 1;
  }
  #herosecond h2 {
	font-size: 0.85rem;
  }
  #heroseconds h1 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	letter-spacing: 0rem;
	line-height: 1;
  }
  #heroseconds h2 {
	font-size: 0.85rem;
  }
}
#herosecond {
	padding-top: 120px;
	position: relative;
	overflow: hidden;
	height: 15rem;
}
#heroseconds {
	padding-top: 120px;
	position: relative;
	overflow: hidden;
	height: 15rem;
}
@media (max-width: 575px) {
  #herosecond {
	padding-top: 80px;
	height: 15rem;
  }
  #herosecond .herosubcopy {
	  position: absolute;
	  top: 9rem;
	  width: 87vw;
  }
  #heroseconds {
	padding-top: 80px;
	height: 7rem;
  }
  #heroseconds .herosubcopy {
	  position: absolute;
	  top: 9rem;
	  width: 87vw;
  }
}
/*--------------------------------------------------------------
# heroproject
--------------------------------------------------------------*/
#heroproject h1 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.5rem;
  z-index: 90;
}
#heroproject .herosubcopy {
  z-index: 90;
}
@media (max-width: 767px) {
  #heroproject h1 {
	font-size: 1.6rem;
  }
}
@media (max-width: 575px) {
  #heroproject h1 {
	font-size: 1.1rem;
	line-height: 1.4;
	letter-spacing: 0rem;
  }
}
#heroproject3L h1 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.5rem;
  z-index: 90;
}
#heroproject3L .herosubcopy {
  z-index: 90;
}
@media (max-width: 767px) {
  #heroproject3L h1 {
	font-size: 1.6rem;
  }
}
@media (max-width: 575px) {
  #heroproject3L h1 {
	font-size: 1.1rem;
	line-height: 1.4;
	letter-spacing: 0rem;
  }
}
#heroproject1L h1 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.5rem;
  z-index: 90;
}
#heroproject1L .herosubcopy {
  z-index: 90;
}
@media (max-width: 767px) {
  #heroproject1L h1 {
	font-size: 1.6rem;
  }
}
@media (max-width: 575px) {
  #heroproject1L h1 {
	font-size: 1.1rem;
	line-height: 1.4;
	letter-spacing: 0rem;
  }
}

#heroproject {
	padding-top: 120px;
	position: relative;
	overflow: hidden;
	height: 15rem;
}
#heroproject3L {
	padding-top: 120px;
	position: relative;
	overflow: hidden;
	height: 16rem;
}
#heroproject1L {
	padding-top: 120px;
	position: relative;
	overflow: hidden;
	height: 12rem;
}


@media (max-width: 575px) {
  #heroproject {
	padding-top: 80px;
	height: 7rem;
  }
  #heroproject3L {
	padding-top: 80px;
	height: 8rem;
  }
  #heroproject1L {
	padding-top: 80px;
	height: 5rem;
  }
}
/*--------------------------------------------------------------
# herosubcontent
--------------------------------------------------------------*/
#herosubcontent h1 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 3rem;
  line-height: 1.2;
  letter-spacing: 0.5rem;
  z-index: 90;
}
#herosubcontent .herosubcopy {
  z-index: 90;
}
@media (max-width: 767px) {
  #herosubcontent h1 {
	font-size: 2rem;
  }
}
@media (max-width: 575px) {
  #herosubcontent h1 {
	font-size: 1.6rem;
	line-height: 1.4;
	letter-spacing: 0rem;
  }
}

#herosubcontent {
	padding-top: 120px;
	position: relative;
	overflow: hidden;
	height: 13rem;
}
@media (max-width: 575px) {
  #herosubcontent {
	padding-top: 80px;
	height: 4rem;
  }
}



/*--------------------------------------------------------------
# typewriter
--------------------------------------------------------------*/
.ityped-cursor {
    font-size: 1em;
    opacity: 1;
    -webkit-animation: blink 0.3s infinite;
    -moz-animation: blink 0.3s infinite;
    animation: blink 0.3s infinite;
    animation-direction: alternate;
}

@keyframes blink {
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes blink {
    100% {
        opacity: 0;
    }
}

@-moz-keyframes blink {
    100% {
        opacity: 0;
    }
}


/*--------------------------------------------------------------
# slider
--------------------------------------------------------------*/
.swiper-container {
      width: 100%;
      height: 60vh;
    }
    .swiper-slide {
      font-size: 18px;
      padding: 40px 60px;
    }
    .parallax-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 130%;
      height: 100%;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
    }
    .swiper-slide .title {
	  font-family: 'Noto Serif JP', serif;
      font-size: 1.8rem;
      line-height: 1.2;
      font-weight: 300;
    }
    .swiper-slide .subtitle {
      font-size: 0.9rem;
      font-weight: bold;
      margin-top: 0.5rem;
    }
    .swiper-slide .text {
      font-size: 0.85rem;
      line-height: 1.5;
      margin-top: 0.5rem;
    }
    .sliderflame {
	  background-color: rgba(255,255,255,0.8);
      max-width: 35vw;
      padding: 2.5rem 1.5rem;
    }
@media (max-width: 767px) {
    .swiper-slide .title {
      font-size: 1.6rem;
    }
    .swiper-slide .subtitle {
      font-size: 0.85rem;
    }
    .swiper-slide .text {
      font-size: 0.75rem;
    }
}
@media (max-width: 575px) {
	.sliderflame {
	  background-color: rgba(255,255,255,0.9);
      max-width: 70vw;
      padding: 1.5rem 1.5rem;
    }
    .swiper-container {
      width: 100%;
      height: 70vh;
    }
    .swiper-slide .title {
      font-size: 1.4rem;
    }
    .swiper-slide .subtitle {
      font-size: 0.85rem;
    }
    .swiper-slide .text {
      font-size: 0.7rem;
    }
}
/*--------------------------------------------------------------
# Contactinfo
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Project TOP Text Over
--------------------------------------------------------------*/
.textwindow {
	overflow:		hidden;
	position:		relative;
}
.textwindow .caption {
	visibility:		hidden;
	text-align: 	center;
	width:			100%;
	height:			auto;
	position:		absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);

	-webkit-transition:	all 0.3s step-end;
	transition:		all 0.3s step-end;
}
.textwindow:hover .caption {
	visibility:		visible;
}
.textwindow .caption p {
	opacity:		0;
}
.textwindow:hover .caption p {
	opacity:		1;
}

.textwindow .mask1, .textwindow .mask2 {
	width:			50%;
	height:			100%;
	position:		absolute;
	top:			0;
	background-color:	rgba(255,255,255,0.75);
	-webkit-transition:	all 0.3s ease;
	transition:		all 0.3s ease;
}
.textwindow .mask1 {
	left:			-50%;
}
.textwindow:hover .mask1 {
	left:			0px;
}
.textwindow .mask2 {
	right:			-50%;
}
.textwindow:hover .mask2 {
	right:			0px;
}

/*--------------------------------------------------------------
# youtube
--------------------------------------------------------------*/

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

/*動画表示のモーダルの余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper {
	padding:0;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
	background:#666;
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #343b40;
  padding: 30px 0;
  color: #fff;
  margin-top: 5rem;
}
@media (max-width: 575px) {
  #footer {
    margin-top: 3rem;
  }
}
#footer .footer-top {
  font-family: 'YakuHanMP','Noto Serif JP',"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 0.85rem;
}
#footer .footer-top p {
  margin-bottom: 0;
}
#footer .footer-top ul {
  margin-bottom: 0;
}
#footer .my-box {
}
#footer .my-box:nth-last-child(1) {
	border-right: none;
}
#footer .footer-top ul  {
  padding-left: 1.5rem;
  margin-top: 0.2rem;
}

#footer .copyright {
  font-size: 0.85rem;
  text-align: center;
}