@charset "UTF-8";

html {
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
	color: #724320;
	font-family: 'Noto Sans JP', sans-serif;
}

body {
	width: 100%;
	height: 100%;
	font-size: 26px;
	font-size: 2.6rem; 
	line-height: 4rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
	overflow-x: hidden;
	background-color: #ffffff;
}



@media (max-width: 1200px){
body{
line-height:4rem;
}

}

/*スマートフォン*/
@media (max-width: 780px){
body{
	font-size: 12px;
	font-size: 1.2rem; 
	min-width: 320px;
	height:100%;
	-webkit-text-size-adjust: 100%;
line-height:2rem;
word-wrap:break-word;
}
}


.center{
	margin-right: auto;
	margin-left: auto;
	text-align: center!important;
}

.left{
	text-align: left!important;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */



/* リンク */
a:link, 
a:visited {
	color: #FF3399;
	text-decoration: underline;
}

 /* カーソルが上にある時のリンク */
a:hover {
	color: #ff81cd;
}

.emp{
	font-weight: 700;
}

section{
	margin-right: auto;
	margin-left: auto;
}

img {
  border: none;
  vertical-align: middle;
}

.hanging-indent {
  padding-left: 1em;
  text-indent: -1em;
}

.left{
	float: left;
}

.right{
	float: right;
}

.red{
	color: #ff0000!important;
}


@media (max-width: 780px){
.br-sp { display:block; }
}

@media screen and (min-width: 780px) {
.br-sp {
	display: inline;
}
}

@media (min-width: 780px){
	.br-pc { display:block; }
	}
	
	@media screen and (max-width: 780px) {
	.br-pc {
		display: inline;
	}
	}

img{
	width:100%;
	max-width:100%;
	height:auto;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 800px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}


a img {
	transition: .3s;
  }
  a img:hover {
	opacity: 0.6;
  }

 .copy{
	  color: #ffffff;
	  font-size: 10px;
	  text-align: center;
	  background-color: #0071c0;
	  line-height: 1.4rem;
	  padding-top: 5px;
	  padding-bottom: 5px;
  }

 
  .note{
	padding-top: 16px;
	font-size: 1.6rem;
	line-height:1.8em;
	text-align: left;
}

  @media screen and (max-width: 780px) {
 .note{
	font-size: 1.0rem;
	line-height:1.4em;
	text-align: left;
}
}


/* Loading Block */
#loading {
	transition: all 1s;
	background-color: rgb(255, 255, 255);
	z-index: 9999;
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #a2d27a;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
  
  /* Hide Loading Block */
  .loaded {
	opacity: 0;
	visibility: hidden;
  }