@charset "utf-8";
/*-------------------------------------
	   Main Contents
-------------------------------------*/
#top-contents { max-width:1000px;margin:0 auto; }

#topConLeft { float:left;width:48%;margin-right:2%; }
  @media screen and (max-width : 768px){
    #top-contents { width:100%; }
  }
  @media screen and (max-width : 480px) {
    #topConLeft { float:none;width:98%;margin:0 1%; }
  }


h2.topTitle { color: #ff0000;margin:20px 0 0 0;padding:10px 0;font-size:24px;
             position: relative;text-align:center;background:#0000ff; }
h2.topTitle2 { color: #333;margin:20px 0 0 0;padding:5px 0 5px 10px;font-size:18px;
             position: relative;text-align:left;background:linear-gradient(#ccc, #fff);
             border-left:5px #ff0000 solid;border-bottom:1px #ff0000 solid; }

h2.topTitle3 { color: #333;margin:20px 0 0 0;padding:5px 0 5px 10px;font-size:18px;
             position: relative;text-align:left;background:linear-gradient(#ccc, #fff);
             border-left:5px #0000ff solid;border-bottom:1px #0000ff solid; }

#midCon { width:100%;background:linear-gradient(#ccc, #fff); }

.midConInner { width:1000px;margin:0 auto; }
  @media screen and (max-width : 768px){
    .midConInner { width:100%; }
  }


h2.topTitle4 { color: #333;margin:0;padding:5px 0 5px 10px;font-size:18px;
             position: relative;text-align:left; }



  @media screen and (max-width : 768px) {
      h2.infoTitle { margin:20px 0 0 1%; }
      #midConInner { width:100%; }
  }
  @media screen and (max-width : 480px) {
      h2.infoTitle { margin:20px 0 0 1%; }
      #midConInner { width:100%; }
  }

#box-contentsTop { width:90%;padding: 5px 10px; color: #555;margin:20px 0px 20px 5%; }
#box-contentsTop .prImage { float:left;width:30%;margin:0;}
#box-contentsTop .prImage img { width:100%;margin-right:1%;border-radius:50%;
                    border:1px #ddd solid;padding:1px;display: inline-block;
                    box-shadow: 3px 3px 5px -2px rgba(0, 0, 0, 0.8);} 

#box-contentsTop .boxText { float:right;width:60%;margin:0px 0 10px 10px;padding:1%;line-height:2.0em;
          font-size:14px;font-weight:bold;border:1px #ff0000 solid;border-radius:20px;}
#box-contentsTop .boxText2 { float:right;width:60%;margin:0px 0 10px 10px;padding:2px 1%;line-height:2.0em;
          font-size:14px;font-weight:bold;border-left:3px #ff0000 solid;border-bottom:1px #ff0000 solid;}

  @media screen and (max-width : 768px){
    #box-contentsTop { width:96%;padding: 1%; color: #555;margin:1%;
             border:1px #ff9999 solid;  }
    #box-contentsTop .prImage { width:40%;}
    #box-contentsTop .prImage img { width:100%;margin-right:1%;} 
    #box-contentsTop .boxText { width:53%;float:right;padding:10px 2% 10px 1%;margin:0;}
    #box-contentsTop .boxText2 { float:right;width:53%;margin:10px 0px;padding:2px 1%; }
  }
  @media screen and (max-width : 480px) {
      #box-contentsTop { width:96%;padding: 1%; color: #555;margin:1%;
             border:1px #ff9999 solid;  }
      #box-contentsTop .prImage { float:none;width:100%;text-align:center; }
      #box-contentsTop .boxText { width:94%;float:none;padding:2%;margin:1%;}
      #box-contentsTop .boxText2 { float:none;width:94%;margin:1%;padding:2px 1%; }
      #box-contentsTop .prImage img { width:50%; }
  }

#box-contents { width:85%;padding: 5px 10px; color: #555;margin:20px 0px 20px 5%;
             border:1px #ff9999 solid;font-size:14px;  }
#box-contents .prImage { float:left;width:170px;margin:0;padding-right:10px;}
#box-contents .prImage img { width:99%;
                    border:1px #ddd solid;padding:1px;display: inline-block;
                    box-shadow: 3px 3px 5px -2px rgba(0, 0, 0, 0.8);} 
#box-contents .prImageRight { float:left;width:60%;margin:0;padding-right:10px;}

#box-contents .boxText { float:left;margin:0;padding:1%;line-height:1.6em;
          margin-left:20px;}

#box-contents .boxText2 { float:left;max-width:560px;margin:0;padding:1%;line-height:1.6em;
          margin-left:0px;}

#box-contents .boxText3 { max-width:560px;margin:0 0 0 20px;padding:5px 2%;line-height:1.5em;
          border:1px #ccc solid;color:#fff;font-size:14px;text-align:left;
             text-shadow: 2px 2px 2px #333, -2px 2px 2px #333,2px -2px 2px #333,-2px -2px 2px #333,
             0px 2px 2px #333, -2px 0px 2px #333, 2px 0px 2px #333, 0px -2px 2px #333,
             5px 5px 6px #333; border-bottom:1px #777 solid;border-right:1px #777 solid;border-left:1px #777 solid;
             background:url(../image/text3bg.png);}

#box-contents div.boxText4 { max-width:700px;margin:30px 0 0 20px;padding:5px 2%;line-height:1.5em;
          border:1px #4f81bd solid; }
#box-contents div.boxText5 { max-width:700px;margin:30px 0 0 20px;padding:5px 2%;line-height:1.5em;
          border:1px #c0504d solid; }

#box-contents div.boxText4 h4.blue { color:#fff;padding:5px 10px;margin:-25px 0 5px 0;
           border:3px #fff solid; background:#4f81bd;border-radius:10px;
           box-shadow: 1px 1px 1px 1px #aaa;
           -webkit-box-shadow: 1px 1px 1px 1px #aaa;
           -moz-box-shadow: 1px 1px 1px 1px #aaa; }
#box-contents div.boxText5 h4.red { color:#fff;padding:5px 10px;margin:-25px 0 5px 0;
           border:3px #fff solid; background:#c0504d;border-radius:10px; 
           box-shadow: 1px 1px 1px 1px #aaa;
           -webkit-box-shadow: 1px 1px 1px 1px #aaa;
           -moz-box-shadow: 1px 1px 1px 1px #aaa;}

#box-contents div.boxText4 .text {  }
#box-contents div.boxText5 .text { }

  @media screen and (max-width : 768px) {
      #box-contents { width:98%;padding: 1%;margin:0;  }
      #box-contents .prImage { float:left;width:47%;margin:0;padding-right:1%;}
      #box-contents .prImage img { width:100%;margin-right:1%;} 
      #box-contents .prImageRight { float:left;width:50%; }
      #box-contents .boxText { float:left;width:46%; }
  }
  @media screen and (max-width : 480px) {
      #box-contents { width:95%;padding: 5px 5px; color: #555;margin:20px 1%;
             border:1px #ff9999 solid;  }
      #box-contents .prImage { float:none;width:100%;text-align:center; }
      #box-contents .prImage img { width:50%; }
      #box-contents .prImageRight { float:none;width:100%;margin-left:0px; }
      #box-contents .boxText3 { margin-left:0px; }
      #box-contents div.boxText4 { width:94%;margin-left:1%;margin-right:1%; }
      #box-contents div.boxText5 { width:94%;margin-left:1%;margin-right:1%; }
  }
#box-contents .prImage {  display: inline-block;  vertical-align: middle;
       -webkit-transform: translateZ(0);  transform: translateZ(0);  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
       -webkit-backface-visibility: hidden;  backface-visibility: hidden;
       -moz-osx-font-smoothing: grayscale;  position: relative;
       -webkit-transition-duration: 0.3s;  transition-duration: 0.3s;
       -webkit-transition-property: transform;  transition-property: transform; }
#box-contents .prImage:before {  pointer-events: none; position: absolute;  z-index: -1;  content: '';
        top: 98%;  left: 5%;  height: 10px;  width: 90%;  opacity: 0;
        background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
       background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
       /* W3C */
       -webkit-transition-duration: 0.3s;  transition-duration: 0.3s;
       -webkit-transition-property: transform, opacity;  transition-property: transform, opacity; }
/* 

#box-contents .prImage:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
       -webkit-transform: translateY(-5px);  transform: translateY(-5px); }
#box-contents .prImage:hover:before, .box-contents:focus:before, .box-contents:active:before {
       opacity: 1;  -webkit-transform: translateY(5px);  transform: translateY(5px); }
*/

#box-contents3 { width:90%;padding: 5px 10px; color: #555;margin:20px 0px 40px 5%;border:1px #ccc solid;  }
#box-contents3 .prImageLeft { float:left;width:30%;margin:10px 10px 10px 45px;font-size:24px;padding-top: 4px;
                  text-align:center;border:1px #c0c0c0 solid; border-radius:10px; 
                  background:linear-gradient(#ccc, #fff); }
#box-contents3 .prImage { float:left;width:55%;margin:10px 10px 10px 40px;font-size:24px;padding-top: 4px;
                  text-align:center;border:1px #c0c0c0 solid; border-radius:10px; 
                  background:linear-gradient(#ccc, #fff); }
#box-contents3 .boxText2 { float:right;width:12%;margin:0;padding:20px 1%;line-height:1.6em;
              font-weight:bold;margin-left:20px;  }

  @media screen and (max-width : 768px){
    #box-contents3 .boxText { width:98%;padding:1%;margin:0%; }
    #box-contents3 { width:98%;padding:1%;margin:0%; }
    #box-contents3 .boxText2 { float:right;width:20%; }
  }


#box-contents3 .contactBtn { margin:10px;font-size:20px; font-weight: bold; width:350px;height:50px;position:relative;
                border-radius: 20px; text-align:center;float:right;
                background: #ccccff; color: #fff;border: #ff0000 solid 1px; }
#box-contents3 .contactBtn a { position:absolute;
                top:0;    left:0;padding: 10px 0px;   width:100%;   height:100%; }

  @media screen and (max-width : 480px) {
      #box-contents3 .contactBtn { margin:10px 2% 0;font-size:20px; font-weight: bold; width:96%;
                border-radius: 20px; text-align:center;float:none;
                background: #ccccff; color: #fff; border:#ff0000 solid 1px; }
  }

#box-contents3 .contactBtn:hover { background: #fff; color: #333; border: solid 1px #333; transition: all 0.5s; }

#box-contents3 .boxText { width:98%;margin:10px auto;font-weight:bold;padding:20px 0 20px 20px;}
#box-contents3 .boxBox { width:90%;margin:10px auto;
                  border:1px #c0c0c0 solid;background:linear-gradient(#fff, #ccc, #fff); }

  @media screen and (max-width : 768px) {
      #box-contents3 { width:96%;padding: 0;margin:1%;   }
      #box-contents2 { width:96%;padding: 0; margin:1%;border:1px #ff9999 solid;  }
      #box-contents3 .boxText { width:98%;margin:1% auto;font-weight:bold;padding:20px 0 10px 0px;}
      #box-contents3 .prImage { float:none;width:96%;padding: 0;margin:1%; }
      #box-contents3 .prImageLeft { float:none;width:96%;padding: 0;margin:1%; }
      #box-contents3 .boxBox { width:96%;margin:1% auto; }
  }
  @media screen and (max-width : 480px) {
      #box-contents3 { width:96%;padding: 0;margin:1%;   }
      #box-contents2 { width:96%;padding: 0; margin:1%;border:1px #ff9999 solid;  }
      #box-contents3 .boxText { width:98%;margin:1% auto;font-weight:bold;padding:20px 0 10px 0px;}
      #box-contents3 .prImage { float:none;width:96%;padding: 0;margin:1%; }
      #box-contents3 .prImageLeft { float:none;width:96%;padding: 0;margin:1%; }
      #box-contents3 .boxText2, #box-contents .boxText { float:left;width:96%;margin:0;padding:1%;line-height:1.6em;
          margin-left:0px;font-size:12px;}
      #box-contents3 .boxBox { width:96%;margin:1% auto; }
  }

/*-------------------------------------
	   Face Book
-------------------------------------*/
aside { margin:10px auto; }
#facebook { width:800px;margin:30px auto 10px;padding-left:100px; }

  @media screen and (max-width : 768px) {
      #facebook { width:500px;margin:30px auto; padding-left:0px; }
      div.fb-like-box, div.fb-like-box iframe[style], div.fb-like-box span { width: 98% !important; }
  }
  @media screen and (max-width : 480px) {
      #facebook { width:340px;margin:30px auto; padding-left:0px; }
      div.fb-like-box, div.fb-like-box iframe[style], div.fb-like-box span { width: 98% !important; }
  }

/*-------------------------------------
	   TopPage Flowchart
-------------------------------------*/
#topFlowChart { width:80%; margin:20px 10% 20px 10%; }
  @media screen and (max-width : 768px) {
      #topFlowChart { width:98%; margin:20px 0 20px 1%; }
  }
  @media screen and (max-width : 480px) {
      #topFlowChart { width:98%; margin:20px 0 20px 1%; }
  }
#topFlowChart ol { width:100%; }
#topFlowChart ol li.illust { width:20%;float:left; }
#topFlowChart ol li.illust img { border:1px #aaa solid;border-radius:20px;  }
#topFlowChart ol li.flow { width:76%;margin-left:2%;float:left;font-size:16px;
         margin-bottom: 12px; border:1px #aaa solid;border-radius:20px;  }
#topFlowChart ol li.arrow { clear:both;margin:10px auto;text-align:center; }
#topFlowChart li.flow dt { padding: 0px 10px 7px;background:linear-gradient(#fff, #ccc, #fff);
               border-bottom: 1px #aaa solid; font-weight: bold;color: #777; }
#topFlowChart li.flow dt strong { margin-left: 3px;color: #2b2b2b;}
#topFlowChart li.flow dd { margin: 0;padding: 25px 15px 15px; color: #2b2b2b;font-size:14px;}
#topFlowChart .linkText { font-size:16px; font-weight: bold; padding: 5px 10px;margin:20px 0;
                 border-bottom:#ff0000 solid 1px; border-left:#ff0000 solid 3px;}
#topFlowChart .contactBtn { margin:-80px 0 0 0;font-size:20px; font-weight: bold; width:350px;
                border-radius: 20px; text-align:center;float:right;position:relative;height:45px;
                background: #ccccff; color: #fff; border:#ff0000 solid 1px; }
#topFlowChart .contactBtn a { position:absolute;
                top:0;    left:0;padding: 10px 0px;   width:100%;   height:100%; }

  @media screen and (max-width : 768px) {
      #topFlowChart .contactBtn { margin:0px;width:350px; }
  }
  @media screen and (max-width : 480px) {
      #topFlowChart .contactBtn { clear:both;margin:10px 2% 0;font-size:20px; width:96%;
                border-radius: 20px; padding-top: 10px;text-align:center;float:none;
                background: #ccccff; color: #fff; border:#ff0000 solid 1px; }
      #topFlowChart p a:link { width:100%;word-break: break-all; }
  }

#topFlowChart .contactBtn:hover { background: #fff; color: #333; border: solid 1px #333; transition: all 0.5s; }
#topFlowChart .workBoxA { padding:10px 0; }
#topFlowChart .workPic { float:left;width:16%;margin:10px 30px;font-weight:bold;text-align:center; }
#topFlowChart .workPic img { float:left;border-radius:50%;border:1px #ccc solid; }
#topFlowChart .workPicB { float:left;width:60%;margin:10px;font-weight:bold;text-align:center; }
#topFlowChart .workPicB img { float:left;border-radius:50%;border:1px #ccc solid; }
#topFlowChart .workBoxB { float:left;width:33%; }
#topFlowChart .workTxt { float:left;font-weight:bold; }
#topFlowChart .workBoxC { float:left;width:33%; }
  @media screen and (max-width : 768px) {
      #topFlowChart .workBoxA { width:100%;padding:10px 0; }
      #topFlowChart .workPic { float:left;width:32%;margin:10px 8%;font-weight:bold;text-align:center; }
      #topFlowChart .workBoxB  { float:left;width:50%;text-align:center; }
      #topFlowChart .workPicB { float:left;width:70%;margin:10px 15%; }
      #topFlowChart .workPicB img { width:100%; }
      #topFlowChart .workBoxC { width:50%;text-align:center; }
      #topFlowChart .workTxt { width:100%; }
  }
  @media screen and (max-width : 480px) {
      #topFlowChart .workBoxA { width:100%;padding:10px 0; }
      #topFlowChart .workPic { float:left;width:32%;margin:10px 8%;font-weight:bold;text-align:center; }
      #topFlowChart .workBoxB  { float:left;width:50%;text-align:center; }
      #topFlowChart .workPicB { float:left;width:70%;margin:10px 15%; }
      #topFlowChart .workPicB img { width:100%; }
      #topFlowChart .workBoxC { width:50%;text-align:center; }
      #topFlowChart .workTxt { width:100%; }
  }

/*-------------------------------------
	   Support
-------------------------------------*/
#txtContents { width:95%;padding: 5px 10px; color: #333;margin:20px 0px 20px 5%; }
#txtContents .boxText { float:right;width:550px;margin:10px 0 0 10px;padding:1%;line-height:2.0em;
          font-size:14px;font-weight:bold;border:3px #ff0000 solid;border-radius:20px;}
#txtContents .txtText { width:95%; margin-left:20px; }
#txtContents ul { font-size:16px;font-weight:bold;margin:15px 0 15px 40px;color:#660000; }
#supportContents { width:80%;padding: 20px 30px; color: #555;margin:20px 0px 20px 10%; 
          border:3px #ff0000 solid;border-radius:20px; }
#txtContents table { margin:20px 0px 20px 80px; }

#txtContents div.info-care { width:46%; float:left; margin:20px 1%; }
#txtContents div.info-care table { margin:20px 1%; width:100%; }
#txtContents table.info-accept  { margin:20px 0; width:90%; }
#txtContents table.info-accept td { text-align:right; width:17%; }
#txtContents table.info-accept td:first-child {  width:20%; }
#txtContents table.info-accept td.c-cell { text-align:center; }


  @media screen and (max-width : 768px) {
    #txtContents { width:97%;padding: 5px 1%; margin:20px 0 0 1%; }
  }
  @media screen and (max-width : 480px) {
    #txtContents { width:90%;padding: 5px 2%; color: #555;margin:20px 2% 20px 2%; }
    #supportContents { width:82%;padding: 20px 7%; color: #555;margin:20px 0px 20px 2%; 
          border:3px #ff0000 solid;border-radius:20px; }
    #txtContents .txtText { width:100%; margin-left:0px; }
    #txtContents ul { margin:15px 0;}
    #txtContents table { margin:20px 0px 20px 0px; }
    #txtContents div.info-care { width:100%; float:none; margin:20px 0; }
    #txtContents table.info-accept  { margin:20px 0; width:100%; }
  }

/*-------------------------------------
	   Flow Chart
-------------------------------------*/
#flowContents { width:90%; margin:20px 0 10px 10%;border:1px #ff0000 solid; }
  @media screen and (max-width : 480px) {
    #flowContents { width:100%; margin:20px 0 10px 0; }
  }
#flowContents .boxText { float:right;width:70%;padding:5px; }
#flowContents .boxText3 { float:left;width:50%; }
#flowContents .infoImage { float:left;width:25%;padding:5px; }
#flowContents .infoImage img { width:100%;margin-right:1%;
                    border:1px #ddd solid;padding:1px;display: inline-block;
                    box-shadow: 3px 3px 5px -2px rgba(0, 0, 0, 0.8);} 
  @media screen and (max-width : 480px) {
      #flowContents  { width:93%;float:none;padding:2%;margin:20px 1%; }
      #flowContents .boxText { float:none;width:98%;padding:1%; }
      #flowContents .infoImage { float:none;width:98%;padding:1%; }
  }
#flowContents .contactBtn { clear:both; float:right; color: #333;text-align:center;margin:10px;
                font-size:20px; font-weight: bold; margin-top:-50px;
                border-radius: 50px; height:50px; width: 200px; position:relative;
                background: #ccc; color: #fff; border: solid 1px; }
#flowContents .contactBtn a { position:absolute;
                top:0;    left:0;padding: 10px 0px;   width:100%;   height:100%; }

#flowContents .contactBtn:hover { background: #fff; color: #333; border: solid 1px #333; transition: all 0.5s; }

#flowContents table.info-table { margin-left:100px; }
#flowContents th.cell001 { width:250px; }
#flowContents th.cell002 { width:300px; }

#flowContents th { text-align:center; background:#c6d9f1; }
#flowContents td.cell001, #flowContents td.cell002 { text-align:center; }
#flowContents h3 { margin:30px 0 0 50px; }

  @media screen and (max-width : 480px) {
      #flowContents .boxText3 { float:none;width:90%; }
      #flowContents ol  { margin-left:0px; }
      #flowContents table.info-table { margin-left:10px; }
  }
/*-------------------------------------
	   INFORMATION
-------------------------------------*/

#infoContents  { width:90%; margin:20px 0 10px 10%; }
#infoContents .infoImage { float:left;width:24%;padding:5px; }

  @media screen and (max-width : 768px) {
      #infoContents  { width:100%; margin:20px 0 10px 0; }
  }
  @media screen and (max-width : 480px) {
      #infoContents .infoImage { float:left;width:50%; }
  }

#infoContents .boxText { float:right;width:73%;padding:5px; }
#infoContents h3 { color:#990000;font-size:14px;margin:10px; }
#infoContents ul { margin:0 0 0 40px;list-style-type:disc; }
#infoContents .contactBtn { margin:10px;font-size:20px; font-weight: bold; position:relative;
                border-radius: 50px; height:50px;; border: none; width: 200px; 
                background: #ccc; color: #fff; border: solid 1px; }
#infoContents .contactBtn a { position:absolute;
                top:0;    left:0;padding: 10px 0px;   width:100%;   height:100%; }


#infoContents .infoText { margin:10px 0 0 20px; }

#infoContents .contactBtn { color: #333;text-align:center;  }
#infoContents .contactBtn:hover { background: #fff; color: #333; border: solid 1px #333; transition: all 0.5s; }

  @media screen and (max-width : 480px) {
      #infoContents  { width:93%;float:none;padding:2%;margin:20px 1%; }
      #infoContents .boxText { width:98%;padding:1%;margin:0;}
      #infoContents h3 { color:#990000;font-size:14px;margin:10px 0; }
  }
/*-------------------------------------
	   Example
-------------------------------------*/
#exampleCon table.example { margin:0px 0 0px 0px; }
#exampleCon table caption { height:30px;font-weight:bold; }
  @media screen and (max-width : 480px) {
      #exampleCon table.example { width:98%;margin:1%; }
      #exampleCon table caption { height:50px;margin-top:10px; }
  }
#exampleCon th { background:#ccffcc; }

#exampleCon span.red { color:#cc3333; }
#exampleCon span.blue { color:#3333cc; }

#exampleCon { width:100%;padding: 5px 10px; color: #555;margin:0; }
#exampleCon .infoImage { float:left;width:200px;margin:10px 0 0 0;}
#exampleCon .infoImage img { width:100%;margin-right:1%;
                    border:1px #ddd solid;padding:1px;display: inline-block;
                    box-shadow: 3px 3px 5px -2px rgba(0, 0, 0, 0.8);} 
#exampleCon .exText { float:right;width:600px;margin:0;padding:1%;line-height:1.6em;margin-left:20px;}
#exampleCon .exText2 { float:right;width:600px;margin:0;padding:3px 1%;line-height:1.6em;margin:20px 0 0 20px;
                   font-weight:bold;border-left:#ff0000 3px solid;border-bottom:1px #ff0000 solid;}
  @media screen and (max-width : 768px) {
      #exampleCon .infoImage { float:left;width:25%;margin:10px 0 0 0;}
      #exampleCon .exText { float:right;width:70%;margin:0px; }
      #exampleCon .exText2 { float:right;width:70%;margin:0px; }
  }
  @media screen and (max-width : 480px) {
      #exampleCon { width:100%;padding: 5px 0;  }
      #exampleCon .infoImage { float:none;width:100%; }
      #exampleCon .exText { clear:both;float:none;width:100%;margin:0;padding:0;} 
      #exampleCon .exText2 { clear:both;float:none;width:100%;margin:0;} 
  }
/*-------------------------------------
	   Foreigner
-------------------------------------*/
#txtContents h3 { color: #333;margin:20px 0 10px 10px;padding:5px 0 5px 10px;font-size:16px;
             position: relative;text-align:left;background:linear-gradient(#ccc, #fff);
             border-left:5px #ff0000 solid;border-bottom:1px #ff0000 solid; }
#txtContents h3.blue { border-left:5px #0000ff solid;border-bottom:1px #0000ff solid; }

  @media screen and (max-width : 768px) {
      #txtContents h3 { margin:20px 0 10px 0;padding:5px 0 5px 10px; }
  }