@charset "UTF-8"

.jumbotron {
    position: relative;
    background-color:  darkgrey!important; 
    padding-top: 15 %; /* .jumbotronのwidthに対して高さ75%に保つ*/     
    background-size: cover; 
}

.jumbotron-background {
    background-color:  darkgrey!important; 
    padding-top: 15 %; /* .jumbotronのwidthに対して高さ75%に保つ*/
    min-height: 230px;    
    background: url(../img/general/header.png) no-repeat center;     
    background-size: cover; 
    border-radius:0px;
}

.jumbotron-extend {
    position: relative;
    height: 115vh;
    min-height: 300px;
/*    padding-top: 15 %;  .jumbotronのwidthに対して高さ75%に保つ*/    
/*    background: url(../img/general/top.jpg) no-repeat left;    */
    background: url(../img/general/test.png) no-repeat left;    
    background-size: cover;
    background-position: 10%;
}     
.jumbotron-container {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
/*スマホの場合は315PXで表示、それ以外は360    */
.w-310370{
    width: 370px;
}
        
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
/*
.pc { display: block !important; }
.sp { display: none !important; }
*/
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 600px) {
    .jumbotron-extend {
        max-width: 100%;
        /*    padding-top: 15 %;  .jumbotronのwidthに対して高さ75%に保つ*/    
        background: url(../img/general/top_sp.jpg) no-repeat left;    
        background-size: cover;
    }     

    .jumbotron-background {
        background-color:  darkgrey!important; 
        padding-top: 15 %; /* .jumbotronのwidthに対して高さ75%に保つ*/
        min-height: 230px;    
        background: url(../img/general/header_sp.png) no-repeat center;     
        background-size: cover; 
        border-radius:0px;
    }    
    /*スマホの場合は315PXで表示、それ以外は360    */
    .w-310370{
        width: 310px;
    }
    
}      



body{
   font-family:  Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
}    
.table td{
    vertical-align:middle;
    font-size:14px;
}
.width-1{
    width:200px;
    max-with:240px;
}
.width-2{
    width:45px;
}
.required{
    background-color:#2500c3;
    color:white;
}

.midashi1{
    background-color:#00c34b;
    color:white;
}

.under {
/*          border-bottom: solid 3px #87CEFA;*/
    background: linear-gradient(transparent 70%, #ffff5c 70%);
}
.under_dot {
    border-bottom: dotted 2px #87CEFA;
}        
.under_line {
    border-bottom:solid 2px #87CEFA;
}   
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }

/* サークル */
.circle {
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: skyblue;
    text-align: center;
    /* line-height: 80px; */
}

.navbar-toggler{
  background-color: rgb(200, 217, 229);
}        
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}  

/*hover時に画像を拡大　開始*/
.imgWrap {
	overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
    z-index: 0;

}
.imgWrap img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.imgWrap img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}    
/*hover時に画像を拡大　終了*/


/*商品紹介ギャラリーのlist*/
#list li{
	list-style-type:none;
}

/*商品紹介ギャラリーの表示非表示用ボタン*/
button{
	font-size:14px;
	margin-right:2px;
    margin-bottom: 2px;
	display:block;
	padding:4px 5px;
	background:#ffffff;
	border-radius:10px;
	display:inline-block;
	cursor:pointer;
    color:black;
    border-style: solid;
}  

/*商品紹介ギャラリーボタンクリック時の色*/
.activeB {
  background-color: #000080;
  color: white;
}


.btn:hover {
	opacity: 0.5 ;
}

.place:hover{
	background-color: #3d3db1;
}

/*googlemap埋め込み*/
.google-maps {
    position: relative;
    padding-bottom: 40%; // これが縦横比
    height: 0;
    overflow: hidden;
  }
  .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }    

/*href色*/
  a:link, a:visited, a:hover, a:active {
    color: black;
  }  


/*問合せページのスマホ時電話ボタン表示*/
.toiawasetel
    {
    position: fixed;
    bottom: 16px;
    right: 16px;
    }

/*ajax通信時のスピナ表示*/
#overlay{   
    position: fixed;
    top: 0;
    left:0;
    z-index: 100;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
}
.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(359deg); 
    }
}
.is-hide{
    display:none;
} 


/* コラムにマウスオーバー時に色変更*/
.wraplink :hover{
    opacity: 0.8;
    background-color: #ffffff;
    cursor: pointer;
}