@charset "UTF-8";

/*reset*/
*:focus {
  outline: none !important;
  box-shadow:none !important;
}

/*トップバナー*/
section.mainVisual {
  margin-top: 77px;
}
section.mainVisual .pc-title{
  display: none;
}
section.mainVisual .container-fluid.sp-lead-01{
  background-color: #000;
  color: #fff;
  text-align: center;
  display: none;
}
section.mainVisual .container-fluid.sp-lead-02{
  background-color: #fff;
  color: #000;
  text-align: left;
  padding-top: 40px;
  display: none;
  font-size: 20px;
  font-weight: bold;
}
.jumbotron-extend {
  position: relative;
  background: url(../image/systema_top_pc.png) no-repeat center bottom;
  background-size: cover;
  padding: 79% 0 0 0;
}
.top-title-img{
  position: absolute;
  top: 30px;
  left: 20px;
}


/*共通*/
a{
  color: #2ea7e0;
}
a:hover{
  color: #2ea7e0;
  opacity: 0.7;
  text-decoration: underline;
}
.mt-m80{
  margin-top: -80px!important;
}
.mt-m10{
  margin-top: -10px!important;
}
.mt-m20{
  margin-top: -20px!important;
}
.fs-15{
  font-size: 15px!important;
}
@media screen and (min-width: 545px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 544px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}
p{
  margin: 0;
}
ul{
  margin: 0 0 0 20px;
  line-height: 1.8;
  padding: 0 0 0 10px;
  list-style-position: outside;
}
header ul,footer ul{
  margin: 0;
  line-height: 24px;
  padding: 0 ;
  list-style-type: none;
}
.wrap{
  overflow: hidden;
}
body{
 background-color:  #fff;
 width :100%;
}
p {
  font-size : 1rem;
  line-height : 1.8;
}
p.lead {
  font-size : 1.2rem;
  line-height : 1.7;
  font-weight :bold;
}
h1 {
  font-weight: bold;
  font-size :2.3rem;
  line-height: 1.6;
  margin: 20px 0 20px 0;
}
h2 {
  font-weight: bold;
  font-size :28px;
  margin: 0;
}
button h3 {
  margin: 0;
}
a h4 {
font-size: 1.4rem;
font-weight :bold;
line-height: 2;
margin: 0;
}
.strong ul{
  padding-left: 20px;
}
.strong li{
  font-weight: bold;
  font-size :1rem;
  line-height: 1.7;
}
.tri_trans2 {
  display     : inline-block;    /* 変形するためのブロック化 */
  font-size   : 70px;            /* 文字サイズ */
  line-height : 1em;             /* 行の高さ */
  transform   : scale(2.1, 0.7);   /* 変形 横,縦 */

}
.bg_color_grea{
 background-color:  #fffafa;
}
.bg_color_white{
  background-color:  #ffffff;
}

/* social button */
.facebook {
  background-color: #2e4a88;
  box-shadow: 0 4px 0 #1B3D82;
  text-shadow: 0 -1px -1px #1B3D82;
  display: inline;
  position: relative;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: white;
  border-radius: 5px;
  padding: 14px 80px;
}
.facebook:hover {
  background-color: #354F84;
}
.facebook:active {
  top: 2px;
	box-shadow: 0 2px 0 #1B3D82;
}
.twitter {
  background-color: #008DDE;
  box-shadow: 0 4px 0 #0078BD;
  display: inline;
  position: relative;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: white;
  border-radius: 5px;
  padding: 14px 80px;
}
.twitter:active {
  top: 2px;
	box-shadow: 0 2px 0 #0078BD;
}
.twitter:hover {
  background-color: #1397D8;
}
.photo-list img{
  height: 100%;
  object-fit: cover;
}
.btn-top{
  background: -moz-linear-gradient(top, #ee2822 65%, #dc6543);
  background: -webkit-linear-gradient(top, #ee2822 65%, #dc6543);
  background: linear-gradient(to bottom, #ee2822 65%, #dc6543);
  color: #fff;
  padding: 10px 60px;
  font-size: 26px;
  font-weight: bold;
  border-radius: 50px;
  box-shadow: 1px 2px 3px 1px rgb(0 0 0 / 40%);
  margin: 20px 0;
}
.btn-top:hover{
  color: #fff;
  opacity: 0.7;
}
.btn-aplly{
  background: -moz-linear-gradient(top, #ee2822 65%, #dc6543);
  background: -webkit-linear-gradient(top, #ee2822 65%, #dc6543);
  background: linear-gradient(to bottom, #ee2822 65%, #dc6543);
  color: #fff;
  padding: 10px;
  font-size: 30px;
  font-weight: bold;
  box-shadow: 1px 2px 3px 1px rgb(0 0 0 / 40%);
  width: 100%;
  height: 100px;
}
.btn-aplly:hover{
  color: #fff;
  opacity: 0.7;
}
.btn-contact{
  background: #f6f6f6;
  border: solid #000 2px;
  color: #000;
  padding: 10px;
  font-size: 30px;
  font-weight: bold;
  width: 100%;
  height: 100px;
}
.btn-contact:hover{
  opacity: 0.7;
}
.row-inner {
  max-width: 800px;
  width: 100%;
  margin: 0px auto;
  padding: 40px 0;
  display: flex;
  flex-wrap: wrap;
}
.text-red{
  color: #f90000;
}

/*maincatchArea*/
section.maincatchArea .top-btn-area{
  padding-top: 40px;
}
section.maincatchArea ul li{
  font-size: 20px;
  font-weight: bold;
  line-height: 2;
}

/*newsArea*/
section.newsArea{
  overflow: hidden;
}
section.newsArea .title{
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  text-align: center;
  padding: 15px 0;
  background: #2ea7e0;
  color: #fff100;
}

/*overviewArea*/
section.overviewArea{
  overflow: hidden;
}
section.overviewArea img{
  width: 100%;
  display: block;
}
section.overviewArea .title{
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  text-align: center;
  background: url(../image/systema_item_01.png) no-repeat center #fff;
  background-size: 230px;
  padding: 85px 0;
}
section.overviewArea .title h2{
  padding: 15px 0;
  color: #2ea7e0;
  background: #fff100;
}
section.overviewArea .col-inner{
  background-color: #fff100;
  text-align: center;
  border-radius: 20px;
  padding: 30px;
  font-weight: bold;
}
section.overviewArea .col-inner h3{
  color: #2ea7e0;
  font-weight: bold;
}
section.overviewArea .col-inner ul{
  margin: 0;
  list-style-position: inside;
  margin-bottom: 8px;
}

/*contentsArea*/
section.contentsArea{
  background: #000;
  padding: 40px 0;
}
section.contentsArea .title{
  color: #fff;
  text-align: center;
  margin-bottom: 25px;
}
section.contentsArea img{
  display: block;
  width: 100%;
}
section.contentsArea ul{
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
section.contentsArea ul li{
  padding: 15px;
}
section.contentsArea ul li.photo-01{
  width: 35%;
}
section.contentsArea ul li.photo-02{
  width: 37%;
  display: flex;
  align-items: center;
}
section.contentsArea ul li.photo-03{
  width: 28%;
}
section.contentsArea ul li.photo-04{
  width: 33%;
  display: flex;
  align-items: flex-end;
}
section.contentsArea ul li.photo-05{
  width: 25%;
  margin-top: 10px;
}
section.contentsArea ul li.photo-06{
  width: 42%;
}
section.contentsArea ul li.photo-04 img{
  width: 84%;
  margin-left: auto;
}

/*profileArea*/
section.profileArea{
  overflow: hidden;
}
section.profileArea img{
  width: 100%;
  display: block;
}
section.profileArea .title{
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  text-align: center;
  background: url(../image/systema_item_01.png) no-repeat center #fff;
  background-size: 230px;
  padding: 85px 0;
}
section.profileArea .title h2{
  padding: 15px 0;
  color: #2ea7e0;
  background: #fff100;
}
section.profileArea .inner-col-12{
  flex: 0 0 100%;
  max-width: 100%;
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
section.profileArea .inner-col-8{
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
section.profileArea .inner-col-4{
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
section.profileArea .lead.name{
  font-size: 1.375rem;
  line-height: 1.7;
  font-weight: bold;
}

/*faqArea*/
section.faqArea{
  margin-top: 77px;
  padding: 35px 0;
}
section.faqArea h2{
  background: url(../image/systema_item_01.png) no-repeat center #fff;
  background-size: 130px;
  padding: 45px 0;
} 
section.faqArea div.title{
  margin-bottom: 20px;
}
section.faqArea h4{
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}
section.faqArea .col-12{
  margin-bottom: 20px;
}

@media screen and (min-width:992px) and ( max-width:1120px) {
  header .nav-link{
    font-size: 15px;
  }
}