@import url("https://fonts.googleapis.com/earlyaccess/sawarabimincho.css");


.warpper-line-blue .head-title .text-head img{ margin-top: -6px;}
.warpper-line-blue{ padding: 22px 0 0;}
.relax{ display: table; width: 100%;}
.relax .heart{ display: table-cell; padding: 12px;}
.relax .text{ display: table-cell; padding: 12px; font-size: 20px; color: #3a3a3a;}
.relax .text .text-blue{ font-size: 25px; color: #2162d8; display: block;  font-family: "Sawarabi Mincho"; }
.relax .text .text-blue strong{ font-size: 37px; font-weight: normal;}

.list-relax ul li{ display: table; width: 100%; border-radius: 12px; overflow: hidden; margin: 14px auto;}
.list-relax ul li div{ display: table-cell; background: #e4f7fe; padding: 12px; vertical-align: middle;}
.list-relax ul li div.circle{ text-align: center; width: 20%;}
.list-relax ul li div.text-relax{ text-align: left; width: 60%; color: #3a3a3a; font-size: 16px;}
.list-relax ul li div.images{ text-align: center; width: 20%;}
.list-relax ul li div.images img{ width: 100%;}
.list-relax ul li div .yellow{ background: url(../images/pt-yellow.jpg); border-radius: 50%; width: 150px; height: 150px; margin: auto; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; line-height: 1.2; text-shadow: 1px 2px 0 #caa000;}

.list-maintenance ul li{ display: table; width: 100%; border-radius: 12px; overflow: hidden; margin: 14px auto;}
.list-maintenance ul li div{ display: table-cell; background: #e4f7fe; padding: 12px; vertical-align: middle;}
.list-maintenance ul li div.circle{ text-align: center; width: 20%;}
.list-maintenance ul li div.text-relax{ text-align: left; width: 60%; color: #3a3a3a; font-size: 16px;}
.list-maintenance ul li div.images{ text-align: center; width: 20%;}
.list-maintenance ul li div.images img{ width: 100%;}
.list-maintenance ul li div .blue{ background: url(../images/pt-blue.jpg); border-radius: 50%; width: 150px; height: 150px; margin: auto; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; line-height: 1.2; text-shadow: 1px 2px 0 #3350cc;}

.box-contact{ display:table; width: 100%; text-align: center;}
.box-contact a{ color: #fff;}
.box-contact .tel{ background: url(../images/pattern-tile-darkblue.png); width: 50%; display: table-cell; padding: 15px;}
.box-contact .tel span{ display: inline-block; width: 200px; vertical-align: middle; font-size: 24px; font-weight: bold;}
.box-contact .tel small{ display: block; font-size: 12px; font-weight: normal;}
.box-contact .mail{ background: url(../images/pattern-tile-blue.png); width: 50%; display: table-cell; padding: 15px;}
.box-contact .mail span{ display: inline-block; width: 60%; vertical-align: middle; font-size: 22px; font-weight: bold;}


@media(max-width:1273px){
  .box-contact{ display: none;}
}

@media(max-width:768px){
  .list-relax ul li{ display: flex; flex-wrap: wrap;}
  .list-relax ul li div{ display: block;}
  .list-relax ul li div.circle{ width: 100%;}
  .list-relax ul li div.text-relax{ width: 60%; }
  .list-relax ul li div.images{ width: 40%;}
  .list-relax ul li div .yellow{ border-radius: 0; height: auto; width: 100%; border-radius: 22px;}

  .list-maintenance ul li{ display: flex; flex-wrap: wrap;}
  .list-maintenance ul li div{ display: block;}
  .list-maintenance ul li div.circle{ width: 100%;}
  .list-maintenance ul li div.text-relax{ width: 60%; }
  .list-maintenance ul li div.images{ width: 40%;}
  .list-maintenance ul li div .blue{ border-radius: 0; height: auto; width: 100%; border-radius: 22px;}
}

@media(max-width:480px){
  .list-relax ul li div.text-relax{ width: 100%; }
  .list-relax ul li div.images{ width: 100%;}

  .list-maintenance ul li div.text-relax{ width: 100%; }
  .list-maintenance ul li div.images{ width: 100%;}
}