@charset "utf-8";

/*  style　[ top ]

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



/*---------------------------------

 header

----------------------------------*/



  header {

    background: url(../images/header_bg.jpg) center center no-repeat;

    background-size: cover;

    min-height:800px;

    position: relative;

  }

.catch {

  width: 40%;

  position: absolute;

  top: 25%;

  right: 2%;

}

.catch img {

  margin-bottom: 5px;

}

/* ～767px(xs) ____________________________________________________ */

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

  header {

    min-height:350px;

  }

  .catch {

  width: 40%;

  position: absolute;

  top: 150px;

  right: 2%;

}

.catch img {

  margin-bottom: 5px;

  width: 100%;

}



}



/* h2 */

h2 {

  font-size: 3em;

}

/* ～767px(xs) ____________________________________________________ */

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

  /* h2 */

h2 {

  font-size: 2.2em;

}

}



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

   主なサービス内容

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

.box-red {

    position: relative;

    margin: 5em 0;

    padding: 0.5em 1em;

    border-top: solid 1px #D90000;

  border-bottom: solid 1px #D90000;

  background: #fff;

  background-image: linear-gradient(180deg, #fff 0%, #fff 30%,#FFBFBF 100%);

  /*  border-radius: 8px;*/

}

.box-red .box-title {

    position: absolute;

    display: inline-block;

    top: -13px;

    left: 45%;

    padding: 0 15px;

    line-height: 1;

    font-size: 1.5em;

    background: #FFF;

    color: #000;

    font-weight: bold;

}

.box-blue {

    position: relative;

    margin: 2em 0;

    padding: 0.5em 1em;

    border-top: solid 1px #2299CD;

  border-bottom: solid 1px #2299CD;

  background: #fff;

  background-image: linear-gradient(180deg, #fff 0%, #fff 30%,#C1E6F4 100%);

  /*  border-radius: 8px;*/

}

.box-blue .box-title {

    position: absolute;

    display: inline-block;

    top: -13px;

    left: 45%;

    padding: 0 15px;

    line-height: 1;

    font-size: 1.5em;

    background: #FFF;

    color: #000;

    font-weight: bold;

}





.flex-box {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  margin: 2em 0;

}



.grid {

  width: 32%;

}

.detail {

  position: relative;

  display: block;

  text-align: right;

  padding-right: 24px;

}



.detail:after {/*三角の部分*/

  content: "";

  position: absolute;

  top: 2px;

  /*left: 100%;*/

  right: 0;

  border-style: solid;

  border-color: transparent;

  border-left-color: #2299CD;/*背景色*/

  border-width: 14px 12px;

  width: 0;

  height: 0;

}



.detail a {

  display: inline-block;

  padding: 0 3px 0 7px;

  height: 28px;

  line-height: 28px;

  text-decoration: none;

  color: #FFF;

  background: #2299CD;/*背景色*/

  font-size: 13px;



}



.detail a:hover {

  color: #FFF;

}

/* ～767px(xs) ____________________________________________________ */

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

  .box-red .box-title {

    left: 33%;

}

  .box-blue .box-title {

    left: 33%;

}



  .grid {

  width: 100%;

    margin-bottom: 1em;

}



}





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

   料金

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

#price {

  background: url(../images/bg01.svg) center bottom no-repeat;

  background-size: cover;

}

.larg {

  font-size: x-large;

}

/* ～767px(xs) ____________________________________________________ */

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

  .larg {

  font-size: large;

}

}

.w600 {

  font-weight: 600;

}







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

   お客様の声

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



.bg-01 {

  background: #F0F0E1;

}

.voice {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  list-style: none;

  margin: 0;

  padding: 0;

  justify-content: space-around;

}

.item {

  width: 30%;

  margin: 2em 0 1em 0;

}

.item h3 {

  text-align: center;

  font-size: 1.1em;

  font-weight: 400;

  line-height: 1.5;

  margin: 0;

  color: #000;

  padding: 0.5em;

}

.item p {

  padding: 0.5em;

}







/* ～767px(xs) ____________________________________________________ */

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

  .item {

  width: 100%;

    margin: 0.5em 0 1em 0;

}



}



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

   topics

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

.news-list {

  background: #eee;

  margin: 0;

  padding: 2em;

}

.news-list li {

  margin: 0 0 0 0.5em;

  padding: 0.5em 0;

}

.news-list li a {

  border-bottom: #333 1px dashed;

}



/* 768px(sm)～ ____________________________________________________ */

@media print,screen and (min-width: 768px) {

}

/* 992px(md)～ ____________________________________________________ */

@media screen and (min-width: 992px) {

}

/* 1200px(lg)～ ___________________________________________________ */

@media screen and (min-width: 1200px) {

}