@charset "utf-8";

/* *****共通設定***** */

main {
  display: block;
  background-color: #ffffff;
}

main .btn {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  font-size: 1.5rem;
}

h1 {
  font-size: 3rem;
}

h2, h3 {
  color: #401f0f;
}

.gray {
  color: #6c757d;
}

.card {
  border-color: #ffffff;
}

.img-thumbnail {
  width: 100%;
  padding: .25rem;
  background-color: transparent;
  border: none;
}

/* ヘッダー(navbar) */
.navbar {
  background-color: #ff7d00;
}

.navbar .navbar-collapse {
  flex-grow: 0;
}

.navbar .navbar-brand {
  height: 50px;
}

.navbar .navbar-brand img {
  height: 100%;
}

.navbar .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffce11;
}

/* フッター */
#footer {
  background-color: #ff7d00;
}

#footer .container {
  color: #e0c7b2;
}

#footer .footer-ttl {
  font-size: 1rem;
  font-weight: bold;
  margin: 1.5rem 0;
  color: #ffce11;
}

#footer address p,
#footer #footer-news li {
  margin-bottom: 0.5rem;
}

#footer #footer-news ul {
  margin: 0;
  padding: 0
}

#footer #footer-news ul {
  list-style: none;
}

#footer #footer-news li span {
  display: inline-block;
  margin-right: 0.5rem;
}

#footer #copyright {
  background-color: #ff7d00;
  color: #FFFFFF;
}

#footer img {
  width: 360px;
}

/* *****トップページ***** */
/* メイン画像 */
h1 {
  color: #ffa12a;
  padding-top: 20px;
}

#page-top h1 + span {
  font-size: 3rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 110%;
  margin-top: 0.2rem;
  display: block;
}

#page-top .jumbotron-fluid {
  height: 640px;
  border-bottom: #dddddd;
  background: url("../img/main_03.png") no-repeat center center;
  background-size: cover;
}

#page-top .jumbotron-fluid .container {
  height: 100%;
}

#page-top .jumbotron-fluid .btn {
  padding-left: 3rem;
  padding-right: 3rem;
  margin-top: 1.5rem;
  font-weight: bold;
  border-width: 3px;
  border-color: #fff;
}

h2 {
  font-size: 2.5rem;
}

#sec0_title {
  color: #FF7D00;
}

section {
  text-align: center;
}

#img0 {
  width: 40%;
}

/* セクション1 */


.sec1_style {
  background-image: url("../img/sec1_card.jpg");
  padding: 3px;
  border: solid 5px #FFFFFF;
  color: #FFFFFF;
  width: 100%;
  height: 200px;
}

.sec1_style:hover {
  background-image: url("../img/sec1_card_hover.jpg");
}

.sec1_style_middle {
  padding: 3px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sec1_style_no {
  color: #ffffff;
  font-size: 25px;
}

.sec1_style_text {
  color: #ffffff;
}

/* 各セクション */
#page-top section {
  padding: 5rem 0;
}

#page-top section:nth-child(odd) {
  background-color: #FFFFFF;
}

#page-top section .container > h2 {
  margin-bottom: 30px;
  font-size: 1.3rem;
}

#page-top section .container > h2 + p {
  max-width: 100%;
  margin: 0 auto 50px;
}

#sec1 h3 {
  font-size: 1.4rem;
}

#sec2 {
  line-height: 180%;
  background-color: #FFFFFF;
}

#sec2_title {
  background-color: #ffce11;
}

#sec2 .row {
  min-height: 160px;
  color: #2f2f2f;
}

#sec4 {
  background-color: #e1c8b4;
  text-align: center;
}


#sec4 .card-body .clearfix p,
#sec4 .card-body .clearfix h3 {
  margin-left: 115px;
  line-height: 130%;
}

#sec4 .card-body .card-title {
  margin-bottom: 5px;
  color: #401f0f;
}

#sec4 .card-body .card-subtitle {
  font-size: 0.9rem;
  margin-bottom: 5px;
  color: #968075;
}

#sec4 img {
  width: 60%;
}

#sec4 .btn {
  width: 100%;
  background-color: #401f0f;
  border: none;
  padding: 1rem 0;
}

#sec5 article > .row {
  border: 1px solid #dddddd;
}

#sec5 > div:nth-child(1) img {
  width: 100%;
}

/*#sec4 > div:nth-child(2){
    margin-left: 220px;
}*/
#sec5 h2 {
  position: relative;
  overflow: hidden;
  padding: 0.5rem 0.5rem;
  background-color: #ffbe64;
  border-radius: 100vh;
  text-align: center;
  color: #FFFFFF;
}

#sec5 h3 {
  margin-bottom: 0.1rem;
}

#sec5 p {
  font-size: 0.9rem;
}

#sec5 h4 {
  font-size: 1.1rem;
}

#sec5 svg {
  color: #ffbe64;
}

#sec5 article > div div header {
  padding: 10px;
}

.maru {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  background-color: #0056b3;
}

#sec6 {
  background-color: #FFFFFF;
}

#sec6_title {
  color: #FFFFFF;
}

#sec6_sub_title {
  color: #FF7D00;
}

#sec7_title {
  background-color: #87be64;
  color: #FFFFFF;
}

/* *****下層ページ***** */

#breadcrumb-wrapper {
  border-bottom: 1px solid #a29080;
}

#breadcrumb-wrapper,
.breadcrumb {
  font-size: 0.9rem;
  background-color: #563322;
}

.breadcrumb a {
  color: rgba(255, 255, 255, .5);
}

.breadcrumb a:hover,
.breadcrumb a:focus {
  color: rgba(255, 255, 255, 1);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding-right: 1rem;
  color: rgba(255, 255, 255, .5);
}

.breadcrumb-item.active {
  color: #ffffff;
}

h1.page-ttl {
  font-size: 2rem;
}

#page h1 + span {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 110%;
  margin-top: 0.2rem;
  display: block;
}

#page article {
  padding: 5rem 0;
}

#page section {
  padding-bottom: 5rem;
}

#page section:last-child {
  padding-bottom: 0rem;
}

#page h1 + small {
  font-size: 1.5rem;
  color: #ffffff;
  line-height: 110%;
  margin-top: 0.2rem;
}

#page .jumbotron {
  background-color: #f1efff;
  border-bottom: #dddddd;
  background: url("../img/main_03.png") no-repeat center center;
  background-size: cover;
  border-radius: initial;
}

#page .jumbotron .container {
  padding: 0;
}

#page .jumbotron .container p {
  margin-bottom: 0;
}

#page h2 + p {
  margin: 0 0 1.2rem;
}

#page main img {
  max-width: 100%;
}

#page .sample-title {
  display: flex;
  align-items: center;
  text-align: center;
}

#page .sample-title::after {
  border-top: 3px dotted;
  content: "";
  display: inline; /* for IE */
  flex-grow: 1;
  margin-left: 0.5em;
}

#page .sample-title span {
  background-color: #fbfbf2;
}

#page .sample-subtitle {
  font-size: 1.5rem;
  font-weight: bold;
  color: #401f0f;
}

/* *****フォーム***** */

.form1 label {
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.form1 input,
.form1 textarea,
.form1 select {
  max-width: 768px;
}

.form1 .form-group {
  margin-bottom: 2rem;
}


/* *****トグル***** */
.navbar-toggler {
  border-color: #000000;

}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255, 102, 203);
}

.navbar-light .navbar-toggler {
  border-color: rgba(0, 0, 0, 0);
}

.success {
  background-color: #87be64;
  color: #FFFFFF;
}


/* -- ひっくりかえるカード -- */

.card {
  position: relative;
  padding: 0;
}

.card a {
  display: block;
}

.card_reverse {
  position: absolute;
  top: 0;
  left: 0;
}

/* 表面の表示 */
.card_surface {
  opacity: 1;
  transform: rotateY(0deg);
  transition: opacity 100ms 150ms,
  transform 300ms 150ms;
}

.card_reverse {
  opacity: 0;
  transform: rotateY(90deg);
  transition: opacity 50ms 200ms,
  transform 300ms;
}

/* 裏面の表示 */
a:hover .card_surface {
  opacity: 0;
  transform: rotateY(90deg);
  transition: opacity 50ms 200ms,
  transform 300ms;
}

a:hover .card_reverse {
  opacity: 1;
  transform: rotateY(0deg);
  transition: opacity 100ms 150ms,
  transform 300ms 150ms;
}

.lead2 {
  font-size: 1.0rem;
}

#sec1-2 {
  display: none;
}

#sec2 {
  margin-top: -100px;
}


@media screen and (min-width: 768px) and ( max-width: 1024px) {
  #img0 {
    width: 60%;
  }

  #sec1-2 {
    display: none;
  }

}

@media screen and (min-width: 481px) and ( max-width: 767px) {

  #img0 {
    width: 60%;
  }

  .sec1_style_middle {
    padding: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    display: none;
  }

  .card {
    width: 500px;
    height: 150px;
    margin: 0 auto;
    padding: 0% 0% 0% 0%;
  }

  .card_reverse {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
  }


  .card-title {
    padding: 5px;
  }

  #sec1-1 {
    display: none;
  }
  #sec1-2 {
    display: unset;
  }

  #sec2 {
    display: none;
  }

  #sec3 {
    display: none;
  }

  #sec100 {
    margin-top: -300px;
  }

}


@media screen and (max-width: 480px) {
  #img0 {
    width: 70%;
  }

  .sec1_style_middle {
    padding: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    display: none;
  }

  .card {
    width: 500px;
    height: 150px;
    margin: 0;
    padding: 0% 0% 0% 0%;
  }

  .card_reverse {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
  }

  .card-title {
    padding: 5px;
  }

  #sec1-1 {
    display: none;
  }
  #sec1-2 {
    display: unset;
  }
  #sec0 {
    padding-bottom: 0;
  }
  #sec1 {
    padding: 0;
  }
  .card-img-top{
    width: auto;
  }

  #sec2 {
    display: none;
  }

  #sec3 {
    display: none;
  }

  #sec100 {
    margin-top: -300px;
  }

}