@charset "UTF-8";
/* ########### 中小企業IT支援センター ########### */
/*
 * "font-awesome" is lisenced under the SIL Open Font License 1.1
 * https://fortawesome.github.io/Font-Awesome
 * http://scripts.sil.org/OFL
 */

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
html {
  line-height: 1.5;
  text-align: justify;
  font-family: "Helvetica Neue", Arial, "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

ul,
li {
  list-style: none;
  font-size: 13px;
}

a {
  color: #000000;
  text-decoration: none;
}

body {
  background: white;
}
img {
  vertical-align: bottom;
  max-width: 100%;
  pointer-events: none;
}
.white {
  color: white;
}
.blue {
  color: #003f76;
}

.orange {
  color: #ff7e06;
}
.crimsonbold {
  font-weight: bold;
  color: crimson;
}
.big {
  font-size: 20px;
}
.bold {
  font-weight: bold;
}
.center {
  text-align: center;
}

.bigbold {
  font-size: 20px;
  font-weight: bold;
}
.smalltext {
  line-height: 1.35;
  font-size: 0.9rem;
}
.smalltitle {
  font-weight: bold;
  vertical-align: 1.5px;
}
.casebox::after,
.flowbox::after,
.planbox3::after,
.reasonbox4::after,
.kaiketuphotobox::after,
.clearfix::after,
.checkbox::after {
  content: "";
  display: block;
  clear: both;
}
h2 {
  text-align: center;
  font-family: "Haettenschweiler", Arial, Helvetica, sans-serif;
}

.inlineblock {
  display: inline-block;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.titleleft {
  float: left;
}
.titleright {
  float: right;
}
.maineria {
  position: relative;
}
.okomariboxall,
.planboxall {
  background: #003f76;
}
.kaiketuboxall,
.flowboxall,
.faqboxall {
  background: lightgray;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.priceright {
  width: 100%;
  border: solid 1px rgb(28, 63, 138);
}
.pricethright {
  font-weight: bold;
  background-color: rgb(38, 71, 143);
  color: white;
  text-align: center;
  width: 100%;
  border: solid 1px rgb(28, 63, 138);
}

.contactright {
  width: 100%;
}
.mailform {
  font-size: 100%;
  width: 100%;
  height: 2em;
  padding: 0.25em 0.5em 0.25em 0.5em;
  margin: 0em 0em 0.5em 0em;
}
.mailformta {
  font-size: 100%;
  padding: 0.5em 0.5em 0.5em 0.5em;
  width: 100%;
  height: 10em;
}

.sousin {
  margin: 1em 0em 2em 0em;
  text-align: center;
}

.h2contact {
  margin: 0 0 20px 0;
  line-height: 1.5;
  color: #003f76;
  font-weight: bold;
}
/* ################################# 479px以下 ################################# */
@media (max-width: 479px) {
  .tbsf {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  p {
    font-size: 14px;
  }
  .subp {
    font-size: 11px;
  }
  .contentstop {
    padding: 0 0 0 16px;
  }
  .contents {
    padding: 35px 16px;
  }
  .contents2 {
    padding: 5px 16px 35px;
  }
  .okomaribox {
    padding: 25px 16px;
    background: rgb(255, 255, 255);
  }
  .kaiketubox {
    text-align: center;
    padding: 25px 16px;
    background: rgb(255, 255, 255);
  }
  #logo {
    color: #003f76;
    font-size: 18px;
    padding: 5px 0 2px 0;
    line-height: 1;
  }
  .title {
    line-height: 1.15;
    height: 80px;
    display: table-cell;
    vertical-align: middle;
  }
  .contact1 {
    width: 80px;
    height: 80px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    background-color: rgb(0, 160, 233);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .contact1:hover {
    width: 80px;
    height: 80px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    background-color: rgb(3, 143, 207);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .contact2 {
    width: 0px;
    height: 40px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    background-color: rgb(0, 160, 233);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .contact2:hover {
    width: 80px;
    height: 40px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    background-color: rgb(3, 143, 207);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .far {
    padding: 2px;
    font-size: 16px;
  }
  .bigboldtel {
    vertical-align: -1px;
    font-size: 16px;
    font-weight: bold;
  }

  .shortspace {
    letter-spacing: -2px;
  }
  .maintext {
    padding: 5px 0 0 0;
    line-height: 1.15;
    font-size: 26px;
    font-weight: bold;
  }
  .mainsubtext {
    font-size: 12px;
  }
  .mainiconbigbold {
    font-size: 19px;
    font-weight: bold;
  }
  .mainiconblue {
    font-size: 10px;
    margin: 5px 0 10px 0;
    line-height: 1.25;
    width: 50px;
    height: 50px;
    padding: 9px 0 0 0;
    background-color: #003f76;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  .mainiconorange {
    font-size: 10px;
    margin: 5px 0 10px 5px;
    line-height: 1.25;
    width: 50px;
    height: 50px;
    padding: 9px 0 0 0;
    background-color: #ff7e06;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  .maintitle {
    white-space: nowrap;
    text-align: center;
    position: absolute;
    color: white;
    top: 39%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
  .mainimageback {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
  }

  .h2orange {
    margin: 0 0 20px 0;
    line-height: 1.25;
    color: #ff7e06;
    font-size: 18px;
    font-weight: bold;
  }
  .h2blue {
    margin: 0 0 20px 0;
    line-height: 1.25;
    color: #003f76;
    font-size: 18px;
    font-weight: bold;
  }
  .h2bluesub {
    color: rgb(65, 64, 64);
    font-size: 12px;
  }
  .h2white {
    margin: 0 0 20px 0;
    line-height: 1.25;
    color: white;
    font-size: 18px;
    font-weight: bold;
  }
  .h2whitesub {
    color: white;
    font-size: 12px;
  }
  .orangeunder {
    border-bottom: 3px solid #ffbd06;
  }
  .blueunder {
    border-bottom: 3px solid #003f76;
  }
  .whiteunder {
    border-bottom: 3px solid white;
  }
  .triangle3 {
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #003f76;
  }

  .checkmark {
    width: 20px;
    float: left;
  }
  .checktext {
    font-size: 14px;
    overflow: hidden;
    padding: 4px 0 0 6px;
    font-weight: bold;
    line-height: 1.25;
  }
  .checkbox {
    padding: 6px 0;
    border-bottom: 1px solid gray;
  }
  .checkboxright {
    text-align: center;
    margin: 10px 0 0 0;
  }
  .checkboxright img {
    width: 200px;
  }
  .kaiketuimgpc {
    display: none !important;
  }
  .kaiketuimgtbsf {
    display: block !important;
    margin: 10px auto 0px;
    width: 160px;
  }
  .kaiketutext {
    margin: 10px 0 15px;
    text-align: center;
    line-height: 1.5;
    font-size: 16px;
    font-weight: bold;
  }
  .kaiketuform,
  .sousin input {
    width: 240px;
    margin: 5px auto 5px;
    padding: 0.45em 0 0.5em 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: bold;
    text-align: center;
    background: rgb(0, 160, 233);
    color: white;
    box-shadow: 2px 2px 2px rgb(136, 136, 136);
    border-radius: 30px;
  }
  .kaiketuform:hover,
  .sousin input:hover {
    width: 270px;
    margin: 5px auto 5px;
    padding: 0.5em 0 0.45em 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: bold;
    text-align: center;
    background-color: rgb(3, 143, 207);
    color: white;
    box-shadow: 2px 2px 2px rgb(207, 207, 207);
    border-radius: 30px;
  }
  .kaiketuphoto {
    display: none;
  }

  .reasonicon {
    margin: 25px auto 5px;
    width: 65px;
    height: auto;
  }
  .reasonnumber {
    font-family: "impact";
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    color: #003f76;
    opacity: 0.4;
  }
  .reasontitle {
    margin: 5px 0 5px 0;
    color: #003f76;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }
  .reasonsubp {
    width: 70%;
    margin: 0 15% 0 15%;
    text-align: left;
  }

  .planbox {
    background-color: white;
    width: 100%;
    padding: 20px;
  }
  .planbox:nth-child(2) {
    margin: 20px 0;
  }
  .planphoto {
    width: 70%;
    margin: 0 15% 10px 15%;
    text-align: center;
  }
  .plantitle {
    margin: 5px 0 5px 0;
    color: #003f76;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }
  .plansubp {
    line-height: 1.35;
  }

  .flowbox {
    background-color: white;
    padding: 20px;
  }
  .flowbox:nth-child(2) {
    margin: 20px 0;
  }
  .flowbox:nth-child(3) {
    margin: 20px 0;
  }
  .flowtitle {
    margin: 5px 0 10px 0;
    color: #003f76;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid gray;
    text-align: center;
  }
  .flowsubp {
    line-height: 1.35;
  }

  .flownumber {
    line-height: 1;
    font-family: "impact";
    font-size: 28px;
    font-weight: bold;
    color: #003f76;
    opacity: 0.4;
    text-align: center;
  }
  .flowphoto {
    width: 70%;
    margin: 0 15% 20px 15%;
    text-align: center;
  }

  table td,
  th {
    text-align: justify;
    font-size: 12px;
    padding: 8px 12px 8px 12px;
  }
  .priceleft {
    font-weight: bold;
    background-color: rgb(197, 215, 248);
    color: rgb(28, 63, 138);
    text-align: left;
    width: 100px;
    border: solid 1px rgb(28, 63, 138);
  }
  .pricethleft {
    font-weight: bold;
    background-color: rgb(38, 71, 143);
    color: white;
    text-align: center;
    width: 100px;
    border: solid 1px rgb(28, 63, 138);
  }

  .casebox {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
  }
  .casebox:nth-child(2) {
    margin: 20px 0;
  }
  .casebox:nth-child(3) {
    margin: 20px 0;
  }
  .casesubtitle {
    line-height: 2;
    border-bottom: 1px solid gray;
    font-size: 15px;
    margin: 0;
  }
  .casetitle {
    margin: 5px 0 10px 0;
    font-size: 16px;
    font-weight: bold;
  }
  .casesubp {
    line-height: 1.35;
  }
  .casephoto {
    width: 70%;
    margin: 0 15% 20px 15%;
    text-align: center;
  }
  .qtext {
    text-indent: -26px;
    margin: 16px 0 0 0;
    padding: 10px 20px 10px 40px;
    font-size: 16px;
    font-weight: bold;
    background-color: #003f76;
    line-height: 1.25;
    color: white;
  }
  .atext {
    font-size: 14px;
    text-indent: -26px;
    padding: 10px 20px 15px 40px;
    line-height: 1.25;
    background-color: white;
  }
  .qtext::before {
    vertical-align: -2px;
    padding: 0 15px 0 0 0;
    font-size: 20px;
    content: "Q. ";
    font-weight: bold;
  }
  .atext::before {
    font-size: 20px;
    content: "A. ";
    font-weight: bold;
    color: #ff7e06;
  }
  .contactleft {
    font-weight: bold;
    color: rgb(28, 63, 138);
    text-align: left;
    width: 80px;
  }
  .radiotext {
    font-size: 13px;
    padding: 0 13px 0 0;
    margin: 0em 0em 1em 0em;
  }

  .footertitle {
    font-size: 18px;
    font-weight: bold;
    margin: 0em 0em 1em 0em;
  }
  .footer2 {
    font-size: 13px;
    padding: 40px 0;
    text-align: center;
    color: white;
    mix-blend-mode: multiply;
    background-color: rgb(28, 63, 138);
  }
  .copy {
    padding: 5px 0;
    text-align: center;
    color: white;
    background-color: rgba(28, 63, 138, 0.5);
  }
  .footer {
    background: url(../image/photoftbsf.jpg) center center / cover no-repeat;
  }
  .caseboxall {
    background-color: rgb(118, 160, 214);
  }
}
/* ################################# 480px以上767px以下 ################################# */

@media (min-width: 480px) and (max-width: 767px) {
  .tbsf {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  p {
    font-size: 15px;
  }
  .subp {
    font-size: 12px;
  }
  .contentstop {
    padding: 0 0 0 30px;
  }
  .contents {
    padding: 45px 30px;
  }
  .contents2 {
    padding: 5px 30px 45px;
  }
  .okomaribox {
    padding: 30px 25px;
    background: rgb(255, 255, 255);
  }
  .kaiketubox {
    text-align: center;
    padding: 30px 25px;
    background: rgb(255, 255, 255);
  }
  #logo {
    color: #003f76;
    font-size: 22px;
    padding: 5px 0 0 0;
    line-height: 1;
  }
  .title {
    line-height: 1.2;
    height: 90px;
    display: table-cell;
    vertical-align: middle;
  }
  .contact1 {
    width: 90px;
    height: 90px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    background-color: rgb(0, 160, 233);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .contact1:hover {
    width: 90px;
    height: 90px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    background-color: rgb(3, 143, 207);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .contact2 {
    width: 90px;
    height: 45px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    background-color: rgb(0, 160, 233);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .contact2:hover {
    width: 90px;
    height: 45px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    background-color: rgb(3, 143, 207);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .far {
    padding: 3px;
    font-size: 22px;
  }
  .bigboldtel {
    vertical-align: -2px;
    font-size: 20px;
    font-weight: bold;
  }

  .shortspace {
    letter-spacing: -3px;
  }
  .mainsubtext {
    font-size: 16px;
  }
  .maintext {
    padding: 5px 0 0 0;
    line-height: 1.15;
    font-size: 38px;
    font-weight: bold;
  }
  .mainiconbigbold {
    font-size: 25px;
    font-weight: bold;
  }
  .mainiconblue {
    font-size: 14px;
    margin: 5px 0 10px 0;
    line-height: 1.15;
    width: 70px;
    height: 70px;
    padding: 14px 0 0 0;
    background-color: #003f76;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  .mainiconorange {
    font-size: 14px;
    margin: 5px 0 10px 5px;
    line-height: 1.15;
    width: 70px;
    height: 70px;
    padding: 14px 0 0 0;
    background-color: #ff7e06;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  .maintitle {
    white-space: nowrap;
    text-align: center;
    position: absolute;
    color: white;
    top: 39%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
  .mainimageback {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
  }

  .h2orange {
    margin: 0 0 25px 0;
    line-height: 1.25;
    color: #ff7e06;
    font-size: 26px;
    font-weight: bold;
  }
  .h2blue {
    margin: 0 0 25px 0;
    line-height: 1.25;
    color: #003f76;
    font-size: 26px;
    font-weight: bold;
  }
  .h2bluesub {
    color: rgb(65, 64, 64);
    font-size: 17px;
  }
  .h2white {
    margin: 0 0 25px 0;
    line-height: 1.25;
    color: white;
    font-size: 26px;
    font-weight: bold;
  }
  .h2whitesub {
    color: white;
    font-size: 17px;
  }
  .orangeunder {
    border-bottom: 5px solid #ffbd06;
  }
  .blueunder {
    border-bottom: 5px solid #003f76;
  }
  .whiteunder {
    border-bottom: 5px solid white;
  }
  .triangle3 {
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #003f76;
  }

  .checkmark {
    width: 28px;
    float: left;
  }
  .checktext {
    line-height: 1.25;
    font-size: 18px;
    overflow: hidden;
    padding: 4px 0 0 8px;
    font-weight: bold;
    vertical-align: -8px;
  }
  .checkbox {
    padding: 8px 0;
    border-bottom: 1px solid gray;
  }
  .checkboxright {
    text-align: center;
    margin: 16px 0 0 0;
  }
  .checkboxright img {
    width: 230px;
  }

  .kaiketuimgpc {
    display: none !important;
  }
  .kaiketuimgtbsf {
    display: block !important;
    margin: 10px auto 20px;
    width: 170px;
  }
  .kaiketutext {
    margin: 10px 0 25px;
    text-align: center;
    line-height: 1.75;
    font-size: 19px;
    font-weight: bold;
  }
  .kaiketuform,
  .sousin input {
    width: 270px;
    margin: 5px auto 5px;
    padding: 0.55em 0 0.6em 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: bold;
    text-align: center;
    background: rgb(0, 160, 233);
    color: white;
    box-shadow: 2px 2px 2px rgb(136, 136, 136);
    border-radius: 30px;
  }
  .kaiketuform:hover,
  .sousin input:hover {
    width: 270px;
    margin: 5px auto 5px;
    padding: 0.6em 0 0.55em 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: bold;
    text-align: center;
    background-color: rgb(3, 143, 207);
    color: white;
    box-shadow: 2px 2px 2px rgb(207, 207, 207);
    border-radius: 30px;
  }
  .kaiketuphoto {
    float: left;
    width: 48%;
  }
  .kaiketuphoto:nth-child(1) {
    margin: 0 4% 0 0;
  }
  .kaiketuphoto:nth-child(3) {
    margin: 4% 0 0 26%;
    width: 48%;
  }

  .reasonicon {
    margin: 35px auto 10px;
    width: 80px;
    height: auto;
  }
  .reasonnumber {
    font-family: "impact";
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    color: #003f76;
    opacity: 0.4;
  }
  .reasontitle {
    margin: 5px 0 5px 0;
    color: #003f76;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  .reasonsubp {
    width: 70%;
    margin: 0 15% 0 15%;
    text-align: left;
  }

  .planbox {
    background-color: white;
    width: 100%;
    padding: 30px;
  }
  .planbox:nth-child(2) {
    margin: 30px 0;
  }
  .planphoto {
    width: 70%;
    margin: 0 15% 20px 15%;
    text-align: center;
  }
  .plantitle {
    margin: 10px 0 10px 0;
    color: #003f76;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  .plansubp {
    line-height: 1.35;
  }

  .flowbox {
    background-color: white;
    padding: 30px;
  }
  .flowbox:nth-child(2) {
    margin: 30px 0;
  }
  .flowbox:nth-child(3) {
    margin: 30px 0;
  }
  .flowtitle {
    margin: 5px 0 10px 0;
    color: #003f76;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid gray;
    text-align: center;
  }
  .flowsubp {
    line-height: 1.35;
  }

  .flownumber {
    line-height: 1;
    font-family: "impact";
    font-size: 28px;
    font-weight: bold;
    color: #003f76;
    opacity: 0.4;
    text-align: center;
  }
  .flowphoto {
    width: 70%;
    margin: 0 15% 20px 15%;
    text-align: center;
  }

  table td,
  th {
    text-align: justify;
    font-size: 13px;
    padding: 8px 12px 8px 12px;
  }
  .priceleft {
    font-weight: bold;
    background-color: rgb(197, 215, 248);
    color: rgb(28, 63, 138);
    text-align: left;
    width: 160px;
    border: solid 1px rgb(28, 63, 138);
  }
  .pricethleft {
    font-weight: bold;
    background-color: rgb(38, 71, 143);
    color: white;
    text-align: center;
    width: 160px;
    border: solid 1px rgb(28, 63, 138);
  }

  .casebox {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 30px;
  }
  .casebox:nth-child(2) {
    margin: 30px 0;
  }
  .casebox:nth-child(3) {
    margin: 30px 0;
  }
  .casesubtitle {
    line-height: 2;
    border-bottom: 1px solid gray;
    font-size: 15px;
    margin: 0;
  }
  .casetitle {
    margin: 5px 0 10px 0;
    font-size: 18px;
    font-weight: bold;
  }
  .casesubp {
    line-height: 1.35;
  }
  .casephoto {
    width: 70%;
    margin: 0 15% 20px 15%;
    text-align: center;
  }

  .qtext {
    text-indent: -30px;
    margin: 16px 0 0 0;
    padding: 15px 25px 15px 55px;
    font-size: 18px;
    font-weight: bold;
    background-color: #003f76;
    line-height: 1.25;
    color: white;
  }
  .atext {
    text-indent: -30px;
    padding: 15px 25px 25px 55px;
    line-height: 1.25;
    background-color: white;
  }
  .qtext::before {
    vertical-align: -2px;
    padding: 0 15px 0 0 0;
    font-size: 24px;
    content: "Q. ";
    font-weight: bold;
  }
  .atext::before {
    font-size: 24px;
    content: "A. ";
    font-weight: bold;
    color: #ff7e06;
  }
  .contactleft {
    font-weight: bold;
    color: rgb(28, 63, 138);
    text-align: left;
    width: 100px;
  }
  .radiotext {
    font-size: 14px;
    padding: 0 16px 0 0;
    margin: 0em 0em 1em 0em;
  }

  .footertitle {
    font-size: 20px;
    font-weight: bold;
    margin: 0em 0em 1em 0em;
  }
  .footer2 {
    font-size: 14px;
    padding: 40px 0;
    text-align: center;
    color: white;
    mix-blend-mode: multiply;
    background-color: rgb(28, 63, 138);
  }
  .copy {
    padding: 5px 0;
    text-align: center;
    color: white;
    background-color: rgba(28, 63, 138, 0.5);
  }
  .footer {
    background: url(../image/photoftbsf.jpg) center center / cover no-repeat;
  }
  .caseboxall {
    background-color: rgb(118, 160, 214);
  }
}

/* ################################# 768px以上 ################################# */

@media (min-width: 768px) {
  .tbsf {
    display: none !important;
  }
  .pc {
    display: block !important;
  }
  p {
    font-size: 16px;
  }
  .subp {
    font-size: 15px;
  }
  .contents {
    padding: 60px 30px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1160px;
  }

  .contents2 {
    padding: 10px 30px 60px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1160px;
  }
  .okomaribox {
    padding: 30px 30px 50px;
    background: rgb(255, 255, 255);
  }
  .kaiketubox {
    text-align: center;
    position: relative;
    padding: 30px;
    background: rgb(255, 255, 255);
  }
  .contentstop {
    padding: 0 0 0 30px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1160px;
  }

  #logo {
    color: #003f76;
    font-size: 26px;
    padding: 5px 0 2px 0;
    line-height: 1;
  }
  .title {
    line-height: 1.2;
    height: 115px;
    display: table-cell;
    vertical-align: middle;
  }
  .contact1 {
    width: 115px;
    height: 115px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: rgb(0, 160, 233);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .contact1:hover {
    width: 115px;
    height: 115px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: rgb(3, 143, 207);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .contact2 {
    width: 115px;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: rgb(0, 160, 233);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .contact2:hover {
    width: 115px;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: rgb(3, 143, 207);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .far {
    padding: 4px;
    font-size: 24px;
  }
  .bigboldtel {
    vertical-align: -2px;
    font-size: 22px;
    font-weight: bold;
  }

  .shortspace {
    letter-spacing: -5px;
  }
  .mainsubtext {
    font-size: 22px;
  }
  .maintext {
    padding: 5px 0 0 0;
    line-height: 1.15;
    font-size: 54px;
    font-weight: bold;
  }
  .mainiconbigbold {
    font-size: 30px;
    font-weight: bold;
  }
  .mainiconblue {
    margin: 10px 0 15px 0;
    line-height: 1.15;
    width: 90px;
    height: 90px;
    padding: 20px 0 0 0;
    background-color: #003f76;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  .mainiconorange {
    margin: 10px 0 15px 5px;
    line-height: 1.15;
    width: 90px;
    height: 90px;
    padding: 20px 0 0 0;
    background-color: #ff7e06;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  .maintitle {
    white-space: nowrap;
    text-align: center;
    position: absolute;
    color: white;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
  .mainimageback {
    width: 100%;
    min-height: 475px;
    max-height: 550px;
    object-fit: cover;
  }

  .h2orange {
    margin: 0 0 30px 0;
    line-height: 1.25;
    color: #ff7e06;
    font-size: 32px;
    font-weight: bold;
  }
  .h2blue {
    margin: 0 0 30px 0;
    line-height: 1.25;
    color: #003f76;
    font-size: 32px;
    font-weight: bold;
  }
  .h2bluesub {
    color: rgb(65, 64, 64);
    font-size: 20px;
  }
  .h2white {
    margin: 0 0 30px 0;
    line-height: 1.25;
    color: white;
    font-size: 32px;
    font-weight: bold;
  }
  .h2whitesub {
    color: white;
    font-size: 20px;
  }
  .orangeunder {
    border-bottom: 5px solid #ffbd06;
  }
  .blueunder {
    border-bottom: 5px solid #003f76;
  }
  .whiteunder {
    border-bottom: 5px solid white;
  }
  .triangle3 {
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #003f76;
  }

  .checkmark {
    width: 28px;
    float: left;
  }
  .checktext {
    line-height: 1.35;
    font-size: 18px;
    overflow: hidden;
    padding: 3px 0 0 8px;
    font-weight: bold;
    vertical-align: -8px;
  }
  .checkbox {
    padding: 8px 0;
    margin: 0 32px 0 0;
    border-bottom: 1px solid gray;
  }
  .checkboxall {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .checkboxleft {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
  }
  .checkboxright {
    width: 250px;
    display: table-cell;
    vertical-align: middle;
  }
  .kaiketutuikabox {
    padding: 0 20% 0 0;
    margin: 0 auto;
    display: table;
  }
  .kaiketutuika {
    display: table-cell;
    vertical-align: middle;
  }
  .kaiketuimgpc {
    display: table-cell;
    vertical-align: middle;
    width: 195px;
  }

  .kaiketuimgtbsf {
    display: none !important;
  }
  .kaiketutext {
    margin: 10px 0 25px;
    text-align: center;
    line-height: 1.75;
    font-size: 19px;
    font-weight: bold;
  }
  .kaiketuform,
  .sousin input {
    width: 320px;
    margin: 10px auto 45px;
    padding: 0.65em 0 0.7em 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: bold;
    text-align: center;
    background: rgb(0, 160, 233);
    color: white;
    box-shadow: 2px 2px 2px rgb(136, 136, 136);
    border-radius: 30px;
  }
  .kaiketuform:hover,
  .sousin input:hover {
    width: 320px;
    margin: 10px auto 45px;
    padding: 0.675em 0 0.675em 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: bold;
    text-align: center;
    background-color: rgb(3, 143, 207);
    color: white;
    box-shadow: 2px 2px 2px rgb(207, 207, 207);
    border-radius: 30px;
  }
  .kaiketuphoto {
    float: left;
    width: 32%;
  }
  .kaiketuphoto:nth-child(2) {
    margin: 0 2%;
  }

  .reasonbox {
    width: 22%;
    float: left;
  }
  .reasonbox:nth-child(2) {
    margin: 0 4%;
  }
  .reasonbox:nth-child(3) {
    margin: 0 4% 0 0;
  }
  .reasonicon {
    margin: 5px auto;
    width: 100px;
    height: auto;
  }
  .reasonnumber {
    font-family: "impact";
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    color: #003f76;
    opacity: 0.4;
  }
  .reasontitle {
    margin: 5px 0 5px 0;
    color: #003f76;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  .reasonsubp {
    line-height: 1.35;
  }

  .planbox {
    background-color: white;
    width: 32%;
    height: 355px;
    padding: 30px;
    float: left;
  }
  .planbox:nth-child(2) {
    margin: 0 2%;
  }
  .plantitle {
    margin: 10px 0 10px 0;
    color: #003f76;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  .plansubp {
    line-height: 1.35;
  }

  .flowbox {
    background-color: white;
    padding: 30px;
  }
  .flowbox:nth-child(2) {
    margin: 16px 0;
  }
  .flowbox:nth-child(3) {
    margin: 16px 0;
  }
  .flowtitle {
    margin: 5px 0 10px 0;
    color: #003f76;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid gray;
  }
  .flowsubp {
    line-height: 1.35;
  }

  .flownumber {
    line-height: 1;
    font-family: "impact";
    font-size: 32px;
    font-weight: bold;
    color: #003f76;
    opacity: 0.4;
  }
  .flowtextbox {
    padding: 0 15px 0 0;
    overflow: hidden;
  }
  .flowphoto {
    float: right;
    width: 200px;
  }

  table td,
  th {
    text-align: justify;
    font-size: 16px;
    padding: 8px 12px 8px 12px;
  }
  .priceleft {
    font-weight: bold;
    background-color: rgb(197, 215, 248);
    color: rgb(28, 63, 138);
    text-align: left;
    width: 350px;
    border: solid 1px rgb(28, 63, 138);
  }
  .pricethleft {
    font-weight: bold;
    background-color: rgb(38, 71, 143);
    color: white;
    text-align: center;
    width: 350px;
    border: solid 1px rgb(28, 63, 138);
  }

  .casebox {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 30px;
  }
  .casebox:nth-child(2) {
    margin: 16px 0;
  }
  .casebox:nth-child(3) {
    margin: 16px 0;
  }
  .casesubtitle {
    line-height: 2;
    border-bottom: 1px solid gray;
    font-size: 15px;
    margin: 0;
  }
  .casetitle {
    margin: 5px 0 5px 0;
    font-size: 18px;
    font-weight: bold;
  }
  .casesubp {
    line-height: 1.35;
  }
  .casetextbox {
    padding: 0 0 0 15px;
    overflow: hidden;
  }
  .casephoto {
    float: left;
    width: 200px;
  }

  .qtext {
    text-indent: -30px;
    margin: 16px 0 0 0;
    padding: 15px 25px 15px 60px;
    font-size: 18px;
    font-weight: bold;
    background-color: #003f76;
    line-height: 1.25;
    color: white;
  }
  .atext {
    text-indent: -30px;
    padding: 15px 25px 25px 60px;
    line-height: 1.25;
    background-color: white;
  }
  .qtext::before {
    vertical-align: -2px;
    padding: 0 15px 0 0 0;
    font-size: 24px;
    content: "Q. ";
    font-weight: bold;
  }
  .atext::before {
    font-size: 24px;
    content: "A. ";
    font-weight: bold;
    color: #ff7e06;
  }

  .contactleft {
    font-weight: bold;
    color: rgb(28, 63, 138);
    text-align: left;
    width: 200px;
  }
  .radiotext {
    font-size: 16px;
    padding: 0 16px 0 0;
    margin: 0em 0em 1em 0em;
  }
  .footertitle {
    font-size: 24px;
    font-weight: bold;
    margin: 0em 0em 1em 0em;
  }
  .footer2 {
    font-size: 15px;
    padding: 50px 0;
    text-align: center;
    color: white;
    mix-blend-mode: multiply;
    background-color: rgb(28, 63, 138);
  }
  .copy {
    padding: 5px 0;
    text-align: center;
    color: white;
    background-color: rgba(28, 63, 138, 0.5);
  }
  .footer {
    background: url(../image/photof.jpg) center center / cover no-repeat;
  }
.caseboxall {
  background: url(../image/photoc.jpg) center center / cover no-repeat;
}
}