@charset "utf-8";

html {
  scroll-padding-top: 72px;
}

/*========================================================================*\

$wrapper

\*========================================================================*/

body {
  line-height: 1.8;
}

#wrapper {
  overflow: hidden;
}

/*========================================================================*\

$main

\*========================================================================*/

.responsiveBox {
  margin-top: 7.2rem;
}

#main {
  margin-top: 0;
}

#main #mainInner {
  padding: 1rem 1rem 0 0;
}

#main #mainInner h3 {
  bottom: -6%;
  left: 50%;
  margin: auto;
  position: absolute;
  transform: translateX(-50%);
  width: 90%;
}

/*========================================================================*\

$outBox

\*========================================================================*/

#Co #outBox {
  padding: 6rem 2rem 1rem 2rem;
  position: relative;
}

/*========================================================================*\

$Co

\*========================================================================*/

#Co section {
  position: relative;
}

#Co .tll,
#Co .tll_02 {
  font-size: 2.2rem;
  margin-bottom: 8rem;
}

#Co .tll {
  margin: 0 0 8rem 0;
}

#Co .tll:before {
  background: url(../images/bg_title.png) no-repeat center bottom;
  background-size: cover;
  bottom: -1.2rem;
  content: ""; /*何も入れない*/
  height: 11px; /*画像の高さ*/
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  vertical-align: middle;
  width: 90%; /*画像の幅*/
  z-index: -1;
}

#Co .tll_02:before {
  background: url(../images/bg_title_02.png) no-repeat center bottom;
  background-size: contain;
  bottom: -2.5rem;
  content: ""; /*何も入れない*/
  height: 44px; /*画像の高さ*/
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  vertical-align: middle;
  width: 600px; /*画像の幅*/
  z-index: -1;
}

/*========================================================================*\

$Co

\*========================================================================*/

#Co section {
  position: relative;
}

#Co .tll,
#Co .tll_02 {
  font-size: 2.3rem;
  margin-bottom: 4rem;
}

#Co .tll:before,
#Co .tll_02:before {
  bottom: -1.2rem;
  height: 11px;
  width: 100%;
}

/*========================================================================*\

$reasonSection

\*========================================================================*/

#Co #reasonSection {
  background-size: 70%, 70%;
}

#reasonSection .catch_b {
  padding: 1rem 0;
  font-size: 2rem;
}

#Co #reasonSection .titleBox {
  background: #ffffff;
  padding: 4rem 0 1rem 0;
}

#Co #reasonSection .tll {
  margin-bottom: 0;
}

#reasonSection .reasonArea {
  margin-bottom: 3rem;
  padding: 3rem 2rem;
}

#reasonSection .reasonArea h3 {
  font-size: 1.5rem;
  margin: 0 0 3rem 0;
}

#reasonSection .reasonArea h3::before,
#reasonSection .reasonArea h3::after {
  height: 26px;
  width: 1px;
}

#reasonSection .reasonArea h3::before {
  margin-right: 1.5rem;
}

#reasonSection .reasonArea h3::after {
  margin-left: 1.5rem;
}

#reasonSection .reasonArea h3::before,
#reasonSection .reasonArea h3::after {
  margin-top: 0;
}

#reasonSection .reasonArea .reasonBox {
  margin: 0 0 5rem 0;
}

#reasonSection .reasonArea .reasonBox h4 {
  font-size: 1.4rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  padding: 0 0 1rem 3rem;
}

#reasonSection .reasonArea .reasonBox h5 {
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 0 0 1rem 3rem;
}

#reasonSection .reasonArea .reasonBox h4::before,
#reasonSection .reasonArea .reasonBox h5::before {
  font-size: 1.3rem;
  height: 22px;
  line-height: 22px;
  margin-right: 0.4rem;
  top: 33%;
  transform: translateY(-50%);
  width: 22px;
}

#reasonSection .reasonArea .reasonBox .reasonBoxItem.firstBox {
  float: left;
  margin: 0 5% 0 0;
  width: 55%;
}

#reasonSection .reasonArea .reasonBox.reverse .reasonBoxItem.firstBox {
  float: right;
  margin: 0 0 0 5%;
  width: 55%;
}

#reasonSection .reasonArea .reasonBox .reasonBoxItem .number {
  font-size: 4rem;
  top: -1rem;
}

/*========================================================================*\

$contactBox

\*========================================================================*/

#Co .contactArea {
  padding: 2rem;
}

#Co .contactArea .contactAreaInner {
  max-width: 100%;
  padding: 3rem 2rem 2rem 2rem;
}

#Co .contactArea .contactAreaInner h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  padding-left: 8rem;
  text-align: left;
}

#Co .contactArea .contactAreaInner h4 {
  display: none;
}

#Co .contactArea .contactAreaInner p {
  margin-bottom: 0;
}

#Co .contactArea .contactAreaInner .nobunaga {
  left: -9rem;
  width: 175px;
  z-index: -1;
}

#Co .contactArea .contactAreaInner .catch {
  left: 5rem;
  position: absolute;
  top: -5rem;
  width: 210px;
}

#Co .contactArea .contactAreaInner .bas {
  top: -1rem;
  width: 98px;
}

#Co .contactArea.mini .contactAreaInner h3 {
  padding-left: 0;
  text-align: center;
  margin-bottom: 2rem;
}

#Co .contactArea.mini .contactAreaInner h3 .sp {
  display: none !important;
}

/*========================================================================*\

$supportSection

\*========================================================================*/

#Co #supportSection {
  background-size: 70%, 70%;
}

#Co #supportSection .box02 .box02Inner:nth-child(n + 2) {
  margin-top: 2rem;
}

#Co #supportSection .box02 .itemBox {
  padding: 2rem;
}

#Co #supportSection .box02 .itemBox h3,
#Co #supportSection .box02 .itemBox h3 .ss {
  font-size: 1.7rem;
}

#Co #supportSection .box02 .box02Inner .itemBox h3 {
  margin-bottom: 1rem;
}

#Co #supportSection .box02 .box02Inner:first-child .itemBox h3 {
  line-height: 1.2;
}

#Co #supportSection .box02 .itemBox h3 .sss {
  font-size: 1.7rem;
}

#Co #supportSection .box02 .itemBox h3 .extend {
  font-size: 3rem;
}

#Co #supportSection .box02 .itemBox h3 .extend.number {
  font-size: 4rem;
}

#Co #fromSection .box02Inner .itemBox .point {
  position: absolute;
  top: -10px;
  left: auto;
  right: -40px;
  width: 17%;
}

#Co #fromSection .box02Inner .itemBox .point_02 {
  position: absolute;
  top: 0px;
  left: auto;
  right: -40px;
  width: 17%;
}

#Co #supportSection .numberBox {
  font-size: 1.6rem;
  left: 2rem;
  padding: 2.5rem;
  top: -5rem;
}

#Co #supportSection .numberBox .number {
  font-size: 1.8rem;
}

/*========================================================================*\

$womanSection

\*========================================================================*/


#Co #womanSection .main,
#Co #fromSection .main {
  margin: 0 0 2rem 0;
}

#Co #womanSection h2,
#Co #fromSection h2 {
  font-size: 1.8rem;
  margin: 0 0 1.5rem 0;
}

#Co #womanSection h2::before,
#Co #womanSection h2::after,
#Co #fromSection h2::before,
#Co #fromSection h2::after {
  height: 26px;
  width: 1px;
}

#Co #womanSection h2::before,
#Co #fromSection h2::before {
  margin-right: 1.5rem;
}

#Co #womanSection h2::after,
#Co #fromSection h2::after {
  margin-left: 1.5rem;
}

#Co #womanSection .catch,
#Co #fromSection .catch {
  font-size: 1.4rem;
  margin: 0 0 2rem 0;
  text-align: left;
}

#Co #womanSection .box04 figure,
#Co #fromSection .box04 figure {
  border: 2px solid #f9fe7d;
}

#Co #womanSection .box04 .box04Inner:nth-child(n + 3),
#Co #fromSection .box04 .box04Inner:nth-child(n + 3) {
  margin-top: 1rem;
}

#Co #womanSection .box03 .box03Inner .itemBox {
  padding: 0 2rem;
  width: calc(100% - 80px);
}

#Co #womanSection .box03 .box03Inner {
  align-items: center;
  background-color: #ffffff;
  background-image: none;
  display: flex;
  padding: 0rem;
  width: 100%;
}

#Co #womanSection .box03 .box03Inner:nth-child(n + 2) {
  margin-top: 1rem;
}

#Co #womanSection .box03 .box03Inner figure {
  background: rgba(201, 21, 30, 0.2);
  display: block;
  margin: 0;
  padding: 1.8rem;
  width: 80px !important;
}

#Co #womanSection .box03 .box03Inner:nth-child(2) figure {
  padding: 2.2rem 1.5rem;
}

#Co #womanSection .box03 .box03Inner h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  text-align: left;
}

#Co #womanSection .box03 .box03Inner h3 .big {
  font-size: 2.2rem;
}

#Co #womanSection .box03 .box03Inner p {
  font-size: 1.4rem;
  margin-bottom: 0;
  text-align: left;
}

#Co #womanSection .ikumennBox {
  margin: 3rem 0;
}

/*========================================================================*\

$fromSection

\*========================================================================*/

#Co #fromSection .box02Inner {
  border: 2px solid #c9151e;
}

#Co #fromSection .box02 .box02Inner:nth-child(n + 2) {
  margin-top: 2rem;
}

#Co #fromSection .box02Inner.ouenBox h3,
#Co #fromSection .box02Inner.ouenBox h3 span {
  font-size: 1.6rem;
}

#Co #fromSection .box02Inner .itemBox .itemBoxInner {
  width: 55%;
}

#Co #fromSection .box02Inner .itemBox .itemBoxInner:last-child {
  width: 45%;
}

#Co #fromSection .box02Inner .itemBox h4 {
  font-size: 1.4rem;
  padding-left: 3.2rem;
  position: relative;
}

#Co #fromSection .box02Inner .itemBox h4 .ss {
  font-size: 1.2rem;
  font-weight: 500;
}

#Co #fromSection .box02Inner .itemBox h4::before {
  font-size: 1.2rem;
  height: 22px;
  line-height: 22px;
  width: 22px;
}

#Co #fromSection .box02Inner .itemBox p {
  font-size: 1.4rem;
  text-align: center;
}

#Co #fromSection .box02Inner .itemBox p .emphasis {
  font-size: 3rem;
}

#Co #fromSection .box04 {
  margin-bottom: 2rem;
}

#Co #fromSection .gifuBox {
  padding: 3.5rem 1.5rem 2rem 1.5rem;
}

#Co #fromSection .gifuBox h3 {
  font-size: 1.8rem;
  margin-bottom: 4rem;
}

#Co #fromSection .gifuBox h3 .line {
  border-bottom: 2px dotted #c9151e;
}

#Co #fromSection .gifuBox .gifuBoxInner {
  background-size: contain;
  padding: 0 2rem;
}

#Co #fromSection .gifuBox .gifuBoxInner:before,
#Co #fromSection .gifuBox .gifuBoxInner::after {
  background-size: cover;
  height: 21px;
  top: -20px;
  width: 100%;
}

#Co #fromSection .gifuBox .gifuBoxInner:after {
  bottom: -20px;
  top: auto;
}

#Co #fromSection .gifuBox .gifuBoxInner .itemBox {
  margin-bottom: 2rem;
}

#Co #fromSection .gifuBox .gifuBoxInner h4 {
  background-size: 12px 13px;
  font-size: 1.6rem;
  line-height: 1.5;
  padding-left: 2rem;
}

#Co #fromSection .gifuBox .gifuBoxInner figure {
  float: none;
  margin: 0;
  margin-bottom: 2rem;
  width: 100%;
}

#Co #fromSection .gifuBox .gifuBoxInner p {
  margin-bottom: 1rem;
}

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

$flowSection

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

#Co #flowSection .flowBox {
  padding: 0 0 0 60px;
  position: relative;
  z-index: 10;
}

#Co #flowSection .flowBox:after {
  left: 20px;
  position: absolute;
  top: 1px;
  width: 2px;
}

#Co #flowSection .flowBox .flowBoxInner {
  display: block;
  margin: 0 0 2rem 0;
  padding: 2rem;
}

#Co #flowSection .flowBox .flowBoxInner .itemBox {
  width: 100%;
}

#Co #flowSection .flowBox .flowBoxInner .itemBox p {
  margin-bottom: 1rem;
}

#Co #flowSection .flowBox .flowBoxInner .itemBox:last-child {
  width: 100%;
}

#Co #flowSection .flowBox h4 {
  font-size: 1.8rem;
}

#Co #flowSection .flowBox h4 .ss {
  font-size: 1.4rem;
}

#Co #flowSection .flowBox .num {
  font-size: 2rem;
  left: -60px;
  line-height: 40px;
  width: 40px;
}

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

$faqSection

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

#Co #faqSection {
  background: url(../images/bg_faq.png) repeat center center;
  background-size: 100%;
}

#Co #faqSection .sectionInner .faqwrap {
  padding: 2rem;
}

#Co #faqSection .sectionInner .faqwrap .faqBox {
  margin-bottom: 2rem;
}

#Co #faqSection .sectionInner .faqwrap .faqBox:last-child {
  margin-bottom: 0;
}

#Co #faqSection .sectionInner .faqwrap .faqBox::after {
  left: 12px;
}

#Co #faqSection .sectionInner .faqwrap .faqBox h3 {
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 0.5rem 0 1.5rem 4rem;
}

#Co #faqSection .sectionInner .faqwrap .faqBox p {
  line-height: 1.6;
}

#Co #faqSection .sectionInner .faqwrap .faqBox h3::before,
#Co #faqSection .sectionInner .faqwrap .faqBox .faqBoxInner p::before {
  border-radius: 30px;
  font-size: 1.3rem;
  height: 24px;
  line-height: 24px;
  width: 24px;
}

#Co #faqSection .sectionInner .faqwrap .faqBox .faqBoxInner {
  margin-left: 4rem;
  padding: 1.5rem;
}

#Co #faqSection .sectionInner .faqwrap .faqBox .faqBoxInner p {
  padding-left: 4rem;
}

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

$recruitmentSection

============================================================ */
#Co table.tbl {
  margin: 0;
}

#Co table.tbl th {
  width: 28%;
}

#Co table.tbl td {
  font-size: 1.3rem;
}

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

$recruitmentSection

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

#contactSection {
  background-size: cover;
}

#contactSection .sectionInner {
  padding: 3rem 2rem;
  width: 100%;
}

#contactSection .sectionInner h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

#contactSection .sectionInner h2 .big {
  font-size: 2.4rem;
}

#contactSection .sectionInner .catch {
  display: none;
}

#contactSection .sectionInner p a {
  display: block;
  width: 100%;
}

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

$footer

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

footer {
  background: url(../images/bg_footer_sp.png) center bottom no-repeat #a4e1f6;
  background-size: contain;
}

footer #footerInner {
  padding: 2.5rem 0 18rem 0;
  width: 100%;
}

footer #footerInner h2 {
  margin: 0 auto 1rem auto;
  width: 70%;
}

footer #footerInner .tel {
  line-height: 1.2;
  margin-bottom: 2rem;
}

footer #footerInner .tel a {
  font-size: 2.4rem;
}

footer #footerInner .tel .ss {
  font-size: 1.3rem;
}

footer #footerInner h3 {
  font-size: 1.3rem;
}

footer #footerInner address {
  font-size: 1.3rem;
}

#copy {
  margin-bottom: 72px;
}

/*========================================================================*\

$footetMenu

\*========================================================================*/

#footetMenu {
  padding: 1rem 0;
}

#footetMenu #footetMenuInner {
  margin: 0 auto;
  max-width: 100%;
  padding: 0 1rem;
}

#footetMenu #footetMenuInner li:first-child {
  width: 75%;
}

#footetMenu #footetMenuInner li:last-child {
  width: 20%;
}

#footetMenu #footetMenuInner li a {
  font-size: 1.4rem;
  height: 52px;
}

#footetMenu #footetMenuInner li a .bus {
  right: -5px;
  top: -10px;
  width: 20%;
}

#footetMenu #footetMenuInner li p {
  font-size: 1.2rem;
}

#footetMenu #footetMenuInner li:nth-child(2) a:hover {
  box-shadow: 0 0 0 #01672d;
  transform: translateY(5px);
}

#footetMenu #footetMenuInner li p::before,
#footetMenu #footetMenuInner li p::after {
  width: 1px;
}

#footetMenu #footetMenuInner li p::before,
#footetMenu #footetMenuInner li p::after {
  margin-top: 0;
}

#footetMenu #footetMenuInner li:nth-child(2) p,
#footetMenu #footetMenuInner li:nth-child(2) a span.tel {
  display: none;
}

#footetMenu #footetMenuInner li:nth-child(2) a .ico_tel {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 24px;
}

/*========================================================================*\

$cp_box

\*========================================================================*/

.cp_box {
  position: relative;
}

.cp_box label {
  background: linear-gradient(
    to bottom,
    rgba(250, 252, 252, 0) 0%,
    rgba(250, 252, 252, 0.95) 50%
  );
  bottom: 0;
  cursor: pointer;
  height: 180px; /* グラデーションの高さ */
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 40;
}

.cp_box label img {
  bottom: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 260px;
  z-index: 1;
}

.cp_box label img {
  bottom: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 280px;
  z-index: 1;
}

.cp_box .active .off,
.cp_box .on {
  display: none;
}

.cp_box .active .on,
.cp_box .off {
  display: block;
}

.cp_box input:checked + label {
  background: inherit;
}

.cp_box input {
  display: none;
}

.cp_box .cp_container {
  height: 420px;
  overflow: hidden;
  transition: all 0.5s;
}

.cp_box input:checked + label {
  /* display: none ; 閉じるボタンを消す場合解放 */
}

.cp_box input:checked ~ .cp_container {
  height: auto !important;
  padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
  transition: all 0.5s;
}

#flowSection .cp_box .cp_container {
  height: 1300px;
}

#recruitmentSection .cp_box .cp_container {
  height: 1500px;
}

#flowSection .cp_box label img,
#faqSection .cp_box label img,
#recruitmentSection .cp_box label img {
  bottom: 20px;
}

#flowSection .cp_box label img.on,
#faqSection .cp_box label img.on,
#recruitmentSection .cp_box label img.on {
  bottom: 0;
}