@charset "UTF-8";
/* ===========================================================

	Title: top.css
	Created: 2018-05-02
	TOP専用スタイル

=========================================================== */

/*
	Common
	General
		banner
	
=========================================================== */

.separate {
  display: block; padding: 0; margin: 0;
  clear: both; width: 100%; position: relative;
  min-width: 1000px;
}

.separate__inner {
  display: block; padding: 0; margin: 0 auto;
  clear: both;
  width: 100%; height: 400px;
  position: relative; overflow: hidden;
}

.separate span {
  display: block; padding: 0; margin: 0;
  clear: both;
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  z-index: 10; overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.separate span {
  background-image: url(../img/top/separate-bg.jpg);
}

/* -----------------------------------------------------------
	Jumbotron
----------------------------------------------------------- */

.jumbotron {
  display: flex;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  min-width: 1000px;
  position: relative;
  flex-wrap: wrap;
  align-content: space-between;
}

.jumbotron {
  background-image: url(../img/top/jumbotron-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


.jumbotron__inner,
.jumbotron__scroll {
  display: block;
  padding: 0 1.0rem;
  margin: 0;
  position: relative;
  width: 100%;
}

.jumbotron__inner {
  padding: 70px 1.0rem 0 1.0rem;
}

.jumbotron__inner h1 {
  display: block; padding: 20vh 2.0rem 0 2.0rem; margin: 0;
  color: #fff;
  font-weight: bold;
  font-size: 1.75rem; line-height: 1.4;
}

.jumbotron__inner span {
    display: block;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1400px;
}



.jumbotron__scroll {}


a.jumbotron__scroll__icon {
  display: block; padding: 0; margin: 0 auto;
  width: 4.0rem; height: 8.0rem;
  position: relative;
  color: rgba(255, 255, 255, 1.00);
  text-align: center;
  text-transform: uppercase;
}


a.jumbotron__scroll__icon::after {
  display: block; padding: 0; margin: auto;
  width: 4rem; height: 4rem;
  position: absolute; top: 0; left: 0; bottom: 3.0rem; right: 0;
  border: solid 2px currentColor;
  border-top-color: rgba(255,255,255,0.00);
  border-left-color: rgba(255,255,255,0.00);
  transform: rotate(45deg);
  content: ""; transition: all 0.5s;
}
a.jumbotron__scroll__icon:hover::after { bottom: 0; }

/* -----------------------------------------------------------
	Top Common
----------------------------------------------------------- */

.top-section {
    display: block;
    padding: 3.0rem 1.0rem 7.0rem 1.0rem;
    margin: 0;
    clear: both;
    line-height: 1.8;
}

.top-section__inner {
    display: block;
    padding: 0;
    margin: 0 auto;
    clear: both;
    max-width: 1000px;
}

/* -----------------------------------------------------------
	message
----------------------------------------------------------- */

.message {
  display: flex;
  padding: 0;
  margin: 0 -1.0rem;
  flex-direction: row-reverse;
}

.message__body,
.message__photo {
  display: block;
  padding: 0 1.0rem;
  margin: 0;
}

.message__body {
  width: calc(100% - 400px);
}
.contents-style .message__body h2 {
  padding: 0; margin: 0 0 1.6rem 0; text-align: left;
}
.contents-style .message__body h2::after { display: none; }
.contents-style .message__body p {
    font-size: 0.9375rem;
}



.message__photo {
  width: 400px;
  text-align: center;
  font-size: 0.875rem;
}

.contents-style p.message__photo_img {
  display: block; padding: 0; margin: 0 auto; width: 100%;
  overflow: hidden;
  border-radius: 0;
}
.message__photo_img img { vertical-align: bottom; position: relative;}

.contents-style p.message__photo_part {
  display: block;
  padding: 1.5rem 0 0 0;
  margin: 0 auto;
}
.message__photo_part span {
  display: block; padding: 0; margin: 0;
}
.message__photo_part__name { font-size: 1.375rem; }







/* -----------------------------------------------------------
	philosophy
----------------------------------------------------------- */

.top-section--philosophy {
  background-image: url(../img/top/philosophy-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}



.philosophy-box {
  display: block; padding: 6.0rem 1.0rem;
  background-color: rgba(43,160,237,0.80);
  color: #fff; text-align: center;
  font-size: 1.5rem; line-height: 1.6;
  box-shadow: 0 0 1.0rem rgba(0,0,0,0.20);
}



/* -----------------------------------------------------------
	comitment
----------------------------------------------------------- */
.comitment-box {
  display: flex; padding: 0; margin: 0 -1.0rem;
  flex-wrap: wrap;
}
.comitment-box dl {
  display: flex;
  flex-direction: column;
  padding: 1.0rem; margin: 0;
  width: 50%;
}
.comitment-box dt,
.comitment-box dd {
  display: block; margin: 0;
  background-color: rgba(11,102,162,0.05);
}
.comitment-box dt {
  padding: 2.0rem;
  color: rgba(11,102,162,1.0);
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700; font-size: 1.5rem;
  text-align: center;
  text-transform: uppercase;
  position: relative;
}
.comitment-box dt::after {
  display: block; padding: 0; margin: 1.0rem auto 0 auto;
  width: 2.0rem; height: 1px;
  content: ""; background-color: rgb(194, 35, 40);
  
}
.comitment-box dd {
  display: block; padding: 0 2.0rem 2.0rem 2.0rem; margin: 0; flex:1 auto; min-height: 0%;
}

/* -----------------------------------------------------------
	profile
----------------------------------------------------------- */

.top-section--profile {
  background-image: url(../img/top/profile-bg.jpg);
  background-position: center center;
  background-repeat: repeat;
}

.profile-data {
  display: block; padding: 0; margin: 0;
  width: 100%; font-size: 0.875rem;
}
.profile-data > dl {
  display: table; padding: 0; margin: 0 0 0.25rem 0;
  width: 100%;
}

.profile-data > dl > dt,
.profile-data > dl > dd {
  display: table-cell; padding: 1.0rem; margin: 0;
  vertical-align: top;
}
.profile-data > dl > dt {
  background-color: rgba(11,102,162,0.10);
  color: rgba(11,102,162,1.00);text-align: center;
  width: 12rem;
}
.profile-data > dl > dd {
  background-color: #fff;
  width: calc(100% - 12rem);
}

.profile-data .dl-table { margin: 0; }





a.map-btn {
  display: inline-block;
  padding: 0.25rem 1.0em;
  margin: -0.25rem 0 -0.25rem 1.0rem;
  background-color: rgba(11,102,162, 1.00);
  color: #fff;
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  vertical-align: middle;
  position: absolute;
}

a.map-btn:hover {
  background-color: rgba(11,102,162, 0.50);
}

a.map-btn::before {
  display: inline-block;
  padding: 0;
  margin: 0 0.5rem 0 0;
  content: "\f041";
  font-family: FontAwesome;
}

/* -----------------------------------------------------------
	organization
----------------------------------------------------------- */


/* -----------------------------------------------------------
	relation banner
----------------------------------------------------------- */

.banner-relation {
  display: block;
  padding: 10px;
  margin: 0;
  width: 100%;
  background-color: rgba(11,102,162,0.20);
}

.banner-relation img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.banner-relation__inner {
  display: flex;
  padding: 0 5px;
  margin: 0 auto;
  width: 1000px;
  justify-content: center;
  flex-direction: row;
}

.banner-relation dl:first-child {
  width: 330px;
}
.banner-relation dl:last-child {
  width: 660px;
}
.banner-relation dl {
  display: block;
  padding: 10px;
  margin: 0;
  font-size: 0.785rem;
  color: #333;
}

.banner-relation dt {
  display: block; padding: 0.5rem 0; margin: 0;
}

.banner-relation dd {
  display: block; padding: 0; margin: 0;
}

.banner-relation ul {
  display: flex; padding: 0; margin: 0 -10px;
  flex-wrap: wrap;
}
.banner-relation li {
  display: block; padding: 10px; margin: 0;
}
.banner-relation a {
  display: block; padding: 0; margin: 0;
  background-color: #fff;
  width: 310px;
}