@charset "utf-8";

.head-space{
width: auto;
height: 100px;
}

.joint{
width: auto;
height: 100px;
background: #fff;
}

.joint2{
width: auto;
height: 50px;
background: #fff;
}

.joint3{
width: auto;
height: 0px;
background: #fff;
}
/*ページ内リンク*/
.anchor{
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}

.balloon {
  position: relative;
  margin: 1em 0 0em 40px;
  padding: 15px;
  background: #c0e4f2;
  border-radius: 30px;
 width: 60%;
 height: 40%;
}

.balloon:before {  
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #c0e4f2;
  border-radius: 50%;
}

.balloon:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #c0e4f2;
  border-radius: 50%;
}
.balloon p {
  margin: 0; 
  padding: 0;
    font-size: 14px;
    text-align: left;
}

/*スクロールスライド*/
.slidein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
.slidein-left{
      transform: translate(-100%,0);
}
.slidein-right{
      transform: translate(100%,0);
}
.slidein-up{
 transform: translate(0,-70%);
}
.slidein-bottom{
  transform: translate(0,100%);
}
.scrollin{
    transform: translate(0, 0)!important;
    opacity: 1!important;
}

/*フェードイン*/
.fade{animation: fadeIn 3s ease 0s 1 normal;}
        @keyframes fadeIn { from {
     opacity: 0;
     transform: translateY(-15px);
 }
 to {
     opacity: 1;
     transform: translateY(0);
 }
 }
.slidein-bottom0{
 transform: translate(0,45%);
}
.slidein-bottom1{
 transform: translate(0,15%);
}
.slidein-bottom2{
 transform: translate(0,30%);
}
.slidein-bottom3{
 transform: translate(0,45%);
}
.slidein-bottom4{
 transform: translate(0,60%);
}
.slidein-bottom5{
 transform: translate(0,75%);
}
.slidein-bottom6{
 transform: translate(0,90%);
}
.slidein-bottom7{
 transform: translate(0,-0%);
}
/*フェードイン2*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in2 {
  animation: fadeIn 3s ease-in-out;
}

/*---------------------------------
アコーディオンボックス
--------------------------------*/
.acbox{
  width: auto;
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
  margin:0 10px; /* ボックス全体の位置調整 */
}

.acbox label{
  width: auto;
  font-size: 16px; /* ラベルの文字サイズ */
  font-weight: bold;
  text-align: center;
  background: #c0e4f2; /* ラベルの背景色 */
  position: relative;
  display: block;
  padding:8px;
  border-radius: 4px; /* ラベルの角の丸み */
  cursor: pointer;
  color: #fff;
}

.acbox label:hover{
  background:#c0e4f2;/* ラベルにマウスを乗せた時の背景色 */
}

.acbox input{
  display: none;
}

.acbox label:after{
  color: #fff;
  content:"＋"; /* ラベルのアイコン */
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -14px;
}

.acbox input:checked ~ label::after {
  content:"－"; /* ラベルをクリックした後のアイコン */
}

.acbox div{
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.15s; /* 開閉スピードの設定 */
}

.acbox input:checked ~ div{
  height: auto;
  padding: 10px; /* 開いた部分の枠内の余白 */
  border-radius: 0px;
  background: #fff; /* 開いた部分の背景色 */
  opacity: 1;
  z-index: -1;
}

.acbox input:checked ~ label {
  background: #c0e4f2; /* クリック後のラベルの背景色 */
}

.acbox-under{
  font-size: 15px; /* 開いた部分の文字サイズ */
  color: #555555; /* 開いた部分の文字色 */
}

.btn,
a.btn,
button.btn {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: transparent;
  border-radius: 0.5rem;
}
        
a.btn-flat {
  overflow: hidden;
  padding: 0.8rem 3.5rem;
  color: #fff;
  border-radius: 0;
  background: rgba(11,96,147);
}

a.btn-flat span {
  position: relative;
  z-index: 1;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: calc(-150% + 20px);
  width: 200%;
  height: 500%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);
  background:rgba(255,204,0);
}

a.btn-flat:after {
  position: absolute;
  top: -400%;
  right: calc(-150% + 20px);
  width: 200%;
  height: 500%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);
  background: rgba(255,204,0);
}

a.btn-flat:hover:before {
  -webkit-transform: rotate(45deg) translateX(0) translateY(-50%);
  transform: rotate(45deg) translateX(0) translateY(-50%);
}

a.btn-flat:hover:after {
  -webkit-transform: rotate(45deg) translateX(0) translateY(50%);
  transform: rotate(45deg) translateX(0) translateY(50%);
}

.btn-navi {
  display: inline-block;           
  position: relative;              
  width: 100%;                    
  height: 50px;                    
  text-align: center;              
  line-height: 50px;               
  font-size: 12px;
 }
.btn-navi span {
  display: block;                  
  position: absolute;              
  width: 100%;                     
  height: 100%;                    
  border: 0px solid transparent;         
  transform-style: preserve-3d;   
  transition: 0.3s;   
   opacity: 1;
}
.btn-navi span:nth-child(1) {
  background-color: transparent;  
  color: #1a0b08;         
  transform: rotateX(0deg);        
  transform-origin: 0 50%  -30px;   
  border-radius: 0px;
}
.btn-navi span:nth-child(2) {
  background-color: transparent;   
  color:#1a0b08;        
  transform: rotateX(90deg);     
  transform-origin: 0 50%  -30px; 
  border-radius: 30px;
}
.btn-navi:hover span:nth-child(1) {
  transform: rotateX(-90deg);    
}
.btn-navi:hover span:nth-child(2) {
  transform: rotateX(0deg);       
}

/* --- 全体はじまり ----- */
body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}

p,h1,h2,h3,h4,h5,h6{
margin-top: 0;
}

img{
vertical-align:bottom;
}

ul{
margin: 0;
padding: 0;
}

#wrap{
clear: both;
width: :auto;
margin: 0 auto;
}
.wrap2{
clear: both;
width: :auto;
margin: 0 auto;
padding: 2%;
}
/* --- 全体おわり ----- */

/*scrollbar始まり*/
div::-webkit-scrollbar {
width: 15px;
}

div::-webkit-scrollbar-track {
background:#1a0b08;
border-radius: 5px;
}
div::-webkit-scrollbar-thumb {
background:#ffe200;
border-radius:5px;
}

/*scrollbarおわり*/

* --- 文字スクロールはじまり ----- */
.scroll {
margin     : auto;
width      : 96%;
text-align : center;
color      : #333;
overflow   : hidden;

}

.scroll span{
display     : inline-block;
padding-left: 65%;
white-space : nowrap;
animation   : scrollAnime 11s linear infinite;
}

.scroll img{
width: 50px;
}

@keyframes scrollAnime{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}

.scroll2 {
margin     : auto;
width      : 96%;
text-align : center;
color      : #333;
overflow   : hidden;

}

.scroll2 span{
display     : inline-block;
padding-left: 65%;
white-space : nowrap;
animation   : scrollAnime 5s linear infinite;
}

.scroll2 img{
width: 50px;
}

@keyframes scrollAnime{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}

.scroll3 {
margin     : auto;
width      : 96%;
text-align : center;
color      : #333;
overflow   : hidden;
}

.scroll3 span{
display     : inline-block;
padding-left: 65%;
white-space : nowrap;
animation   : scrollAnime 3s linear infinite;
}

.scroll3 img{
width: 50px;
}

@keyframes scrollAnime{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}

@media (max-width: 768px){
.scroll {
margin     : auto;
width      : 96%;
text-align : center;
color      : #333;
overflow   : hidden;

}

.scroll span{
display     : inline-block;
padding-left: 65%;
white-space : nowrap;
animation   : scrollAnime 11s linear infinite;
}

.scroll img{
width: 50px;
}

@keyframes scrollAnime{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}

.scroll2 {
margin     : auto;
width      : 96%;
text-align : center;
color      : #333;
overflow   : hidden;

}

.scroll2 span{
display     : inline-block;
padding-left: 65%;
white-space : nowrap;
animation   : scrollAnime 5s linear infinite;
}

.scroll2 img{
width: 50px;
}

@keyframes scrollAnime{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}

.scroll3 {
margin     : auto;
width      : 96%;
text-align : center;
color      : #333;
overflow   : hidden;
}

.scroll3 span{
display     : inline-block;
padding-left: 65%;
white-space : nowrap;
animation   : scrollAnime 3s linear infinite;
}

.scroll3 img{
width: 50px;
}

@keyframes scrollAnime{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}
}
/* --- 文字スクロール終わり ----- */

/* --- 文字エフェクトはじまり ----- */
.str1{
font-size: 32px;
color: #303967;
font-weight:bold;
padding-left: ;
letter-spacing: 10px;
  text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff; 
}

.str2{
font-size: 24px;
color: #303967;
line-height: 1em;
font-weight: bold;
text-shadow: 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff; 
}

.str3{
font-size: 18px;
color:#fff;
line-height: 1em;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}

.str4{
font-size: 32px;
color: #303967;
font-weight: bold;
}

.str5{
font-size: 8px;
color:#fff;
}
.str6{
font-size: 16px;
color: #303967;
}

.str7{
font-size: 18px;
color: #303967;
  text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff; 
}

.str10{
font-size: 18px;
color: #fff;
font-weight: bold;
}
.str01{ 
display       : inline-block;        
border-bottom : 2px solid #fff;  
}

.str11{
font-size: 24px;
color: #494544;
font-weight: bold;
font-family: "HGP行書体", serif;
}
.str12{
border-bottom : 3px solid rgba(11,96,147);
}
.str13{
border-bottom : 1.5px solid #494544;
}
.str14{
font-size: 18px;
font-weight: bold;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
}
.str02{ 
font-size: 32px;
color: #c0e4f2;
}
.str00{
font-size: 38px;
color: red;
background: transparent
}

.str05{
font-size: 38px;
color: #fff;
background: #c0e4f2;
}

.str03{
  -ms-writing-mode: tb-rl;        
  writing-mode    : vertical-rl; 
}

.str04{
font-size: 18px;
font-weight: bold;
}

.str05 {
display       : inline-block;       
border        : 0px solid #000;  
padding       : 2px;               
margin        : 0 4px; 
font-size: 16px;
background: transparent;
color:#c0e4f2;
font-weight: bold;
}

.str06 {
display       : inline-block;      
border        : 10px solid #fff;   
padding       : 2px; 
padding-left: 2px;
padding-right:2px;
margin        : 0 2px;              
background    : #c0e4f2;        
margin        : 0 2px; 
color: #fff;
}

.str07{
font-size: 150%;
}

.str20 {
  position: relative;
  padding-left: 25px;
}

.str20:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px rgba(11,96,147);
}
.str20:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 2px rgba(11,96,147);
}
/* --- 文字エフェクトおわり ----- */

/* --- top　ボタン ----- */
.topIcon {
display       : inline-block;
position      : fixed;       
top           : 5%;        
right         : 0%;        
padding       : 15px 25px;   
background: rgba(11,96,147);
color         : #fff;     
opacity       : 1;        
border-radius : 0px;        
font-size     : 14px;        
font-weight   : bold;        
line-height   : 1em;       
text-align    : center;      
cursor        : pointer;    
z-index       : 99999;         
letter-spacing: 3px;
font-family:'Noto Serif JP', cursive;
}

.topIcon:hover {
opacity       : 0.5;
}


.topIcon img{
width: 30px;
}

.topIcon a{
text-decoration: none;
color:  #fff;
}

.topIcon2 {
display       : inline-block;
position      : fixed;       
bottom        : 0px;        
right         : 0px;        
padding       : 20px 15px;   
background: rgba(11,96,147);
color         : #fff;     
opacity       : 1;        
border-radius : 0%;        
font-size     : 14px;        
font-weight   : ;        
line-height   : 1em;       
letter-spacing: 1px;        
text-align    : center;      
cursor        : pointer;    
z-index       : 99999;         
border:0px solid #000;
}

.topIcon2:hover {
opacity       : 0.3;   
}

.topIcon2 a{
text-decoration: none;
color: #fff;
}

.topIcon3 {
display       : inline-block;
position      : fixed;       
top           : 5%;        
right         : 135px;        
padding       : 15px 25px;   
background: transparent;
color         : #494544;     
opacity       : 1;        
border-radius : 0px;        
font-size     : 14px;        
font-weight   : bold;        
line-height   : 1em;       
text-align    : center;      
cursor        : pointer;    
z-index       : 99999;         
letter-spacing: 3px;
border: 1px solid rgba(11,96,147);
}

.topIcon3:hover {
opacity       : 0.5;
}


.topIcon3 img{
width: 30px;
}

.topIcon3 a{
text-decoration: none;
color:  #494544;
}
/* --- top　ボタン ----- */


.btn2{
 display:inline-block;
 background:rgba(11,96,147);
 width: 120px;
 padding:10px 30px 10px 20px;
 text-align:center;
 color:#fff;
 margin:5px;
 border:1px solid;
 cursor:pointer;
 position: relative;
 text-decoration: none;
font-size: 16px;
letter-spacing: 3px;
}
.btn2::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0px);
    right: 20px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #fff;
    border-bottom: 1px solid #fff;
    transform: skew(45deg);
    transition: .3s;
}
.btn2:hover::after{
    right: 10px;
    width: 30px;
}

.btn2a{
 display:inline-block;
 background:transparent;
 width: 130px;
 padding:10px 35px 10px 10px;
 text-align:center;
 color:#494544;
 margin:5px;
 cursor:pointer;
 position: relative;
 text-decoration: none;
font-size: 12px;
letter-spacing: 1px;
}
.btn2a::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0px);
    right: 20px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #494544;
    border-bottom: 1px solid #494544;
    transform: skew(45deg);
    transition: .3s;
}
.btn2a:hover::after{
    right: 10px;
    width: 30px;
}
.btn2c{
 display:inline-block;
 background:rgba(11,96,147);
 width: 150px;
 padding:10px 35px 10px 10px;
 text-align:center;
 color:#fff;
 margin:5px;
 cursor:pointer;
 position: relative;
 text-decoration: none;
font-size: 14px;
letter-spacing: 2px;
}
.btn2c::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0px);
    right: 20px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #fff;
    border-bottom: 1px solid #fff;
    transform: skew(45deg);
    transition: .3s;
}
.btn2c:hover::after{
    right: 10px;
    width: 30px;
}
.btn2b{
display:inline-block;
background:transparent;
width: auto;
text-align:center;
color:blue;
text-decoration: none;
font-size: 14px;
letter-spacing: 2px;
}
.btn2b:hover{
opacity: 0.5;
}
.btn2d{
 display:inline-block;
 background:transparent;
 width: 120px;
 text-align:center;
 color:#494544;
 margin:20px;
 cursor:pointer;
 position: relative;
 text-decoration: none;
border: 0px solid #494544;
font-size: 14px;
letter-spacing: 2px;
}
.btn2d:hover{
opacity: 0.5;
}
.btn2e{
 display:inline-block;
 background:transparent;
 width: 150px;
 text-align:center;
 color:#494544;
 margin:20px;
 cursor:pointer;
 position: relative;
 text-decoration: none;
border: 1px solid #494544;
font-size: 14px;
letter-spacing: 2px;
}
.btn2e:hover{
opacity: 0.5;
}
.btn2d{
 display:inline-block;
 background:rgba(11,96,147);
 width: 120px;
 padding:5px 35px 5px 5px;
 text-align:center;
 color:#fff;
 margin:5px;
 cursor:pointer;
 position: relative;
 text-decoration: none;
font-size: 12px;
letter-spacing: 1px;
}
.btn2d::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0px);
    right: 20px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #fff;
    border-bottom: 1px solid #fff;
    transform: skew(45deg);
    transition: .3s;
}
.btn2d:hover::after{
    right: 10px;
    width: 30px;
}
.btn2f{
 display:inline-block;
 background:transparent;
 width: 120px;
 padding:5px 35px 5px 5px;
 text-align:center;
 color:#494544;
 margin:5px;
 cursor:pointer;
 position: relative;
 text-decoration: none;
font-size: 12px;
letter-spacing: 1px;
border: 1px solid #494544;
}
.btn2f::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0px);
    right: 20px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #494544;
    border-bottom: 1px solid #494544;
    transform: skew(45deg);
    transition: .3s;
}
.btn2f:hover::after{
    right: 10px;
    width: 30px;
}
.btn3 {
display       : inline-block;
border-radius : 5%;          
font-size     : 18px;        
text-align    : center;     
cursor        : pointer;     
padding       : 12px 12px;   
background    : #000;    
color         : #fff;     
line-height   : 1em;         
transition    : .3s;         
box-shadow    : 6px 6px 3px #666666;  
border        : 1px solid #000;    
letter-spacing: 3px;
}
.btn3:hover {
box-shadow    : none;        
color         : #000;     
background    : #ffffff;    
}

.btn4 {
display       : inline-block;
border-radius : 0%;          
font-size     : 18px;        
text-align    : center;     
cursor        : pointer;     
padding       : 12px 12px;   
background: rgba(11,96,147);
color         : #fff;     
line-height   : 1em;         
transition    : .3s;         
box-shadow    : 6px 6px 3px #666666;  
border        : 1px solid transparent;    
letter-spacing: 3px;
}
.btn4:hover {
box-shadow    : none;        
color: #494544;
background    : #ffffff;    
}

.btn5 {
display       : inline-block;
border-radius : 0%;          
font-size     : 18px;        
text-align    : center;     
cursor        : pointer;     
padding       : 12px 12px;   
background    : #ffffff;    
color: #000;
line-height   : 1em;         
transition    : .3s;         
box-shadow    : 6px 6px 3px #666666;  
border        : 1px solid transparent;    
letter-spacing: 3px;
}
.btn5:hover {
box-shadow    : none;        
background         : transparent;     
color: #fff;
}

/*ボタンおわり*/

/* スクロールCSS始まり */
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-400px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}
/* スクロールCSS終わり */



/* --- スクロールダウン ----- */
body {
scroll-behavior: smooth;
}
/* --- スクロールダウン ----- */

.Text-Span {
  position: relative;
  z-index: 1;
}
.Text-Span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0%;
  height: 3px;
  background: #ffe200;
  z-index: -1;
  transition: all 5s;
}
.Text-Span.isActive:after {
  width: 100%;
}



@media (max-width: 768px){
/* --- top　ボタン ----- */
.topIcon {
display       : none;
}

/* --- 文字エフェクトはじまり ----- */
.str1{
font-size: 32px;
color: #303967;
font-weight:bold;
padding-left: ;
letter-spacing: 10px;
  text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff; 
}

.str2{
font-size: 24px;
color: #303967;
line-height: 1em;
font-weight: ;
  text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff; 
}

.str3{
font-size: 18px;
color:#fff;
line-height: 1em;
font-weight: bold;
}

.str4{
font-size: 24px;
color: #303967;
font-weight: bold;
}

.str5{
font-size: 8px;
color:#fff;
}
.str6{
font-size: 16px;
color: #9fd9f6;
}

.str7{
font-size: 18px;
color: #9fd9f6;
  text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff; 
}

.str10{
font-size: 18px;
color: #fff;
font-weight: bold;
}

.str14{
font-size: 16px;
font-weight: bold;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
}

.topIcon2 {
display       : inline-block;
position      : fixed;       
bottom        : 0px;        
right         : 0px;        
padding       : 20px 15px;   
background:rgba(11,96,147);
color         : #fff;     
opacity       : 1;        
border-radius : 0%;        
font-size     : 14px;        
font-weight   : ;        
line-height   : 1em;       
letter-spacing: 1px;        
text-align    : center;      
cursor        : pointer;    
z-index       : 99999;         
border:0px solid #000;
}

.topIcon2:hover {
opacity       : 0.3;   
}

.topIcon2 a{
text-decoration: none;
color: #fff;
}
.btn2b{
display:inline-block;
background:transparent;
width: auto;
text-align:center;
color:blue;
text-decoration: none;
font-size: 12px;
letter-spacing: 2px;
}
.btn2b:hover{
opacity: 0.5;
}
.btn2f{
 display:inline-block;
 background:transparent;
 width: 120px;
 padding:5px 35px 5px 5px;
 text-align:center;
 color:#494544;
 margin:5px;
 cursor:pointer;
 position: relative;
 text-decoration: none;
font-size: 12px;
letter-spacing: 1px;
border: 1px solid #494544;
}
.btn2f::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0px);
    right: 20px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #494544;
    border-bottom: 1px solid #494544;
    transform: skew(45deg);
    transition: .3s;
}
.btn2f:hover::after{
    right: 10px;
    width: 30px;
}
.joint3{
width: auto;
height: 50px;
background: #fff;
}
}