@charset "UTF-8";
/* Scss Document */
/*=============================================
 * body
 *=============================================*/
html{
    font-size: 62.5%;
}
body{
      font-family: Arial, Noto Sans JP, serif, Roboto, Droid Sans, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
    color: #333;
}
#main {
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 28px;
  background: #fff;
  min-width: inherit;
  min-height: inherit;
  max-height: 100%;
  letter-spacing: 1px;
}
@media only screen and (min-width: 768px) {
	#main{
		font-size: 16px;
		line-height: 32px;
		letter-spacing: 0;
	}
}

.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*=============================================
 ******************* main **********************
 *=============================================*/
main {
  clear: both;
  width: 100%;
  position: relative;
	overflow: hidden;
}
.wrap {
  margin: 0 auto;
  position: relative;
}
@media only screen and (max-width: 767px) {
  #main img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}
@media only screen and (min-width: 768px) {
#main img {
    max-width: 100%;
    height: auto;
}
}
html {
  min-width: auto;
}
.animated {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-duration: 1s;
  animation-fill-mode: both
}
.wow{
	visibility: hidden;
}
@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    -webkit-transition: none !important;
    animation: unset !important;
    transition: none !important
  }
}


.fadeIn{
	    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
	
}
@-webkit-keyframes fadeIn {
    0% {
       
        opacity: 0;
     
       
    }
    to {
     
        opacity: 1;
      
       
    }
}
@keyframes fadeIn {
    0% {
     
        opacity: 0;
      
      
    }
    to {

        opacity: 1;

      
    }
}





@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .btn-over img, .over-img img, img.over, img:not(.btn):not(.non-over), button img,.btn {
	opacity: 1;
	transform: none !important;
	-moz-transform: none !important;
	-webkit-transform: none !important;
	transition: opacity .3s ease;
	-moz-transition: opacity .3s ease;
	-webkit-transition: opacity .3s ease;
}
	.btn {
		transition:none !important ;
	-moz-transition:none !important ;
	-webkit-transition:none !important ;
	}	
.over-img img:hover, img.over:hover, /* a:not([href=""]):hover img:not(.btn):not(.non-over), */
a:hover img:not(.btn):not(.non-over), button:hover img {
	cursor: pointer;
	opacity: .8;
	transform: none !important;
	-moz-transform: none !important;
	-webkit-transform: none !important;
}
   a:before {
   text-decoration: underline;
   display: inline-block;
}

a:before, a:hover:before {
   text-decoration: none;
}
   
}


/*=============================================
 ******************* RESPONSIVE ****************
 *=============================================*/
html {
  min-width: auto;
}
html a:hover {
  text-decoration: none;
}
html .wrap {
  padding: 0 5vw;
  width: auto;
  max-width: 100%;
}
.sp {
  display: block;
}
.pc {
  display: none !important;
}
html #socialbuttons .social-line {
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
  html #socialbuttons .social-line {
    width: auto;
    overflow: hidden;
  }
  html .wrap {
    padding: 0 20px;
    width: 1240px;
    max-width: 100%;
    box-sizing: border-box;
  }
}
/*=============================================
 *************** responsive common ************
 *=============================================*/
@media only screen and (min-width: 768px) {
  body {
    position: static !important;
    top: 0 !important;
	box-sizing: border-box;
  }
  
  
}
.flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.ob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.txt, .txt1, .txt2, .txt3 {
  text-align: justify;
}

@media only screen and (min-width: 768px) {
  .txt, .txt1, .txt2, .txt3 {
    text-align: inherit;
  }


}