@charset "UTF-8";
/* CSS Document */
html {
    scroll-behavior: smooth;
}
body{
	background-color: #936;
}

img.tham{
  box-shadow: 2px 2px 4px 1px rgba(52, 52, 52, 0.4);
}

img.tham:hover{
opacity: 0.7;
}

.rounded10{
border-radius: 10px;
}

.of-logo{
width:300px;
float:right;
}

.modal-header{
background-color: #936;
color:#FFF;
padding: 0.5rem 1rem;
}
.modal-footer{
background-color: #936;
color:#FFF;
padding:0.5rem 1rem;
}
.close{
color:#FFF;
}

@media (min-width: 768px){
.modal-dialog {
    max-width: 750px;
    margin: 1.75rem auto;
	}
}
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}