header#pages { height: 163px; }
@media screen and (min-width: 768px) { header#pages { height: 268px; } }
header#pages .inner.pages h2 { position: absolute; top: inherit; bottom: 33px; left: 0; color: #fff; text-align: left; font-size: 2.2rem; line-height: 112%; font-weight: 500; }
@media screen and (min-width: 768px) { header#pages .inner.pages h2 { top: inherit; bottom: 50px; font-size: 3rem; } }
header#pages .inner.pages h2::after { position: absolute; display: block; content: ''; width: 50px; height: 1px; background: #FFF; left: 0px; bottom: -10px; }
@media screen and (min-width: 768px) { header#pages .inner.pages h2::after { width: 80px; height: 3px; bottom: -15px; } }
header#pages .inner.pages p { position: absolute; bottom: 63px; left: 0; color: #fff; text-align: left; font-size: 1rem; line-height: 130%; font-family: 'Roboto', sans-serif; font-weight: 500; }
@media screen and (min-width: 768px) { header#pages .inner.pages p { font-size: 1.4rem; bottom: 93px; } }
header#pages .inner.pages p.en { text-transform: uppercase; }
header#pages .slider { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
header#pages .slider .slide1 { width: 100%; height: 163px; background: url("../images/page-management-main-pc.jpg") no-repeat center center; background-size: cover; }
@media screen and (min-width: 768px) { header#pages .slider .slide1 { width: 100%; height: 268px; background: url("../images/page-management-main-pc.jpg") no-repeat center center; background-size: cover; } }

section#managementData { position: relative; }
section#managementData .inner { width: 90%; margin: 0 auto; padding: 40px 0 50px 0; position: relative; }
section#managementData .inner .en { font-family: 'Roboto', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.4rem; color: #6BC1B1; margin-bottom: 1em; }
section#managementData .inner h3 { font-weight: 500; font-size: 2.6rem; margin-bottom: 3em; position: relative; }
section#managementData .inner h3::after { display: block; position: absolute; content: ""; width: 80px; height: 2px; background: #6BC1B1; bottom: -20px; left: 50%; margin-left: -40px; }
section#managementData .inner .box { width: 100%; margin: 0 auto; position: relative; z-index: 1; text-align: left; }
@media screen and (min-width: 768px) { section#managementData .inner { width: 1200px; padding: 75px 0 85px 0; }
  section#managementData .inner h3 { font-size: 3rem; }
  section#managementData .inner .box { width: 900px; display: flex; justify-content: space-between; } }

.managementSection { line-height: 1.6; }
.managementSection p { font-size: 1.4rem; line-height: 1.6; margin: 0 0 2em 0; }
.managementSection p.txtAliginRight { text-align: left; }
.managementSection p strong { font-weight: bold; }
.managementSection ul { margin: 0 0 2em 0; }
.managementSection ul li { font-size: 1.4rem; line-height: 1.6; }
.managementSection ol { clear: right; list-style: decimal; margin: 0 0 2em 1.5em; }
.managementSection ol li { font-size: 1.4rem; line-height: 1.6; }
.managementSection ol li h5::after { display: none; }
.managementSection ol li ol { list-style: decimal-leading-zero; margin: 0 0 0 3em; }
.managementSection h4 { font-size: 2.1rem; font-weight: bold; background: #DCF4DD; padding: 0.3em 0 0.3em 20px; margin: 0.5em 0; position: relative; }
.managementSection h4:after { position: absolute; display: block; content: ""; background: #6BC1B1; width: 5px; height: 20px; top: 12px; left: 0px; }
.managementSection h5 { font-size: 1.8rem; font-weight: bold; padding: 0 0 0 10px; margin: 2em 0 0.3em 0; position: relative; }
.managementSection h5:after { position: absolute; display: block; content: ""; background: #444; width: 5px; height: 5px; top: 12px; left: 0px; }
.managementSection h6 { text-align: center; font-size: 1.8rem; font-weight: bold; padding: 0 0 0 10px; margin: 2em 0 0.3em 0; background: #2AA582; color: #FFF; }
.managementSection dl { border-bottom: 1px dotted #DDD; }
.managementSection dl dt { padding: 10px 10px 0 10px; font-size: 1.4rem; line-height: 1.6; box-sizing: border-box; border-top: 1px dotted #DDD; }
.managementSection dl dd { padding: 0 10px 10px 10px; font-size: 1.4rem; line-height: 1.6; box-sizing: border-box; border-bottom: 1px dotted #DDD; }
.managementSection img { max-width: 320px; height: auto; }
@media screen and (min-width: 768px) { .managementSection img { max-width: initial; } }
.managementSection .button { width: 100%; height: 63px; background: #6ac1b0; /* Old browsers */ background: -moz-linear-gradient(left, #6ac1b0 0%, #46c286 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #6ac1b0 0%, #46c286 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #6ac1b0 0%, #46c286 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ac1b0', endColorstr='#46c286',GradientType=1 ); /* IE6-9 */ font-size: 1.5rem; font-weight: 400; position: relative; display: table; transition: .2s; }
.managementSection .button .buttonInner { display: table-cell; vertical-align: middle; text-align: center; }
.managementSection .button small { font-size: 1rem; }
.managementSection .button::after { display: block; position: absolute; content: ""; width: 19px; height: 45px; background: url("../../images/arrow.svg") no-repeat center right; background-size: cover; top: 9px; right: 10px; transition: .2s; }
.managementSection a.contact { color: #FFF; text-decoration: none; }
@media screen and (min-width: 768px) { .managementSection { width: 660px; }
  .managementSection .managementImg { float: right; margin: 0 0 2em 1em; }
  .managementSection p.txtAliginRight { text-align: right; }
  .managementSection a.contact:hover .button { background: #44BA66; }
  .managementSection a.contact:hover .button::after { right: 5px; }
  .managementSection dl { display: flex; flex-wrap: wrap; border-bottom: 1px dotted #DDD; }
  .managementSection dl dt { width: 30%; padding: 10px; box-sizing: border-box; border-top: 1px dotted #DDD; }
  .managementSection dl dd { padding: 10px; margin: 0; border-top: 1px dotted #DDD; border-bottom: none; width: 70%; box-sizing: border-box; } }

.center { text-align: center; }

.left { text-align: left; }

.right { text-align: right; }

.fl img { float: none; }
@media screen and (min-width: 768px) { .fl img { float: left; } }

.fr img { float: none; }
@media screen and (min-width: 768px) { .fr img { float: right; } }

.flex p, .flex div { padding: 10px; }
@media screen and (min-width: 768px) { .flex { display: flex; } }

.indent p, .indent div { padding: 20px; }

.red1 { color: #CC0000; }

ul.disc { list-style: disc; }
ul.disc li { font-size: 1.4rem; line-height: 1.6; margin: 0 0 0.5em 1.5em; }
ul.disc li strong { font-weight: bold; }

.tayoriBox1 { background: #6BCBFD; padding: 20px; border-radius: 5px; }
.tayoriBox1 p { margin-bottom: 0; }

.tayoriBox2 { margin: 25px auto; text-align: center; }
@media screen and (min-width: 768px) { .tayoriBox2 .tayoriBox2 { width: 560px; } }

.tayoriBox3 { background: #FFB635; padding: 20px; border-radius: 5px; }
.tayoriBox3 p { margin-bottom: 0; }

.tayoriBox4 { background: #55E2DA; padding: 20px; border-radius: 5px; }
.tayoriBox4 p { margin-bottom: 0; }
.tayoriBox4 p.title { font-size: 1.8rem; text-align: center; font-weight: bold; }

.tayoriBox5 { background: #F0E85A; padding: 20px; border-radius: 5px; }
.tayoriBox5 p { margin-bottom: 0; }
.tayoriBox5 p strong.titleOrange { font-size: 1.8rem; }

.tayoriBox6 { background: #E9C8FF; padding: 20px; border-radius: 5px; }
.tayoriBox6 p { margin-bottom: 0; }

.tayoriBox7 { background: #7ED992; padding: 20px; border-radius: 5px; }
.tayoriBox7 p { margin-bottom: 0; }

.managementPager { font-size: 1.4rem; line-height: 1.6; text-align: center; }
.managementPager a { background: #444; padding: 0.3em 1em 0.3em 1em; border-radius: 5px; color: #FFF; text-decoration: none; margin: 0 1em; }
.managementPager ul { margin-top: 2em; display: flex; justify-content: center; }
.managementPager ul li a { background: #999; padding: 0.3em 1em 0.3em 1em; border-radius: 5px; color: #FFF; text-decoration: none; margin: 0 1em; }
@media screen and (min-width: 768px) { .managementPager { text-align: left; display: flex; justify-content: center; }
  .managementPager ul { margin-top: 0; display: flex; justify-content: center; } }

.sideBar { margin-top: 30px; border-radius: 5px; padding: 2em; background: #F9F9F9; }
.sideBar ul li { font-size: 1.4rem; line-height: 1.6; border-bottom: #CCC dotted 1px; margin-bottom: 1em; }
.sideBar ul li a { display: block; padding: 0.5em 0; text-decoration: none; color: #444; }
.sideBar ul li a.active { color: #019EA7; }
.sideBar ul li a:hover { color: #6BC1B1; }
@media screen and (min-width: 768px) { .sideBar { width: 200px; margin-top: 0px; } }
