/* font */
:root {
  font-size: 16px;
  font-family: Arial, Helvetica, Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
@media only screen and (max-width: 1200px) {
	:root {
		font-size: 14px;
	}
}
@media only screen and (max-width: 920px) {
	:root {
		font-size: 12px;
	}
}

/* size */
:root {
	--size-xs: 1rem;
	--size-sm: 2rem;
	--size-md: 3rem;
	--size-lg: 4rem;
	--size-xl: 5rem;

	--fsize-xs: 0.8rem;
	--fsize-sm: 0.9rem;
	--fsize-md: 1rem;
	--fsize-lg: 1.25rem;
	--fsize-xl: 1.875rem;

	--menu-height: 4rem;
}

html {
  color: var(--text-default)
}

@media screen and (min-width: 768px) {
  .spOnly, .sp_only{
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .pcOnly, .pc_only{
    display: none !important;
  }
}

/* headline */
h1, h2, h3 {
  font-weight: 700;
  line-height: 1.33333;
	margin: 0;
}
h2 {
  font-size: var(--fsize-xl);
}
h3 {
  font-size: var(--fsize-lg);
}

p {
  margin-top: 0;
  margin: 0;
  line-height: 1.875;
}

a {
  text-decoration: underline;
  color: var(--color-text);
  transition: all .3s;
}
a:hover {
	opacity: .7;
}

img {
  width: 100%;
  height: auto;
  display: block
}

figure {
  margin: 0
}

strong {
  font-weight: bold;
  /* color: var(--accent-text-color) */
}

/* table */
table {
  margin: 0 auto 1.875rem;
  border-left: solid 1px #7f7f7f;
  border-top: solid 1px #7f7f7f;
  line-height: 1.5;
  font-size: .875rem
}
table:not(:first-child) {
  margin-top: .75rem
}
table caption {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.33333;
  text-align: center;
  font-size: 2rem;
  margin: 0 0 2.125rem
}
table:first-child caption {
  margin-top: 0
}
th *:last-child, td *:last-child {
  margin-bottom: 0
}
th, thead td {
  text-align: left;
  background: var(--secondary-bg-color);
  color: var(--secondary-text-color)
}
td {
  background: var(--bg-section-box)
}
th, td {
  border-right: solid 1px #7f7f7f;
  border-bottom: solid 1px #7f7f7f;
  padding: .375rem;
  vertical-align: top
}
@media only screen and (min-width: 1024px) {
  table {
    max-width: 57.75rem
  }
}
@media only screen and (min-width: 830px) {
  table {
    font-size: 1rem;
    margin: 0 auto 3.75rem;
    max-width: 48.75rem
  }
  th, td {
    padding: .625rem
  }
}

/* class Style */
.text-red { color: #d9534f; }

.text-right { text-align: center; }
.text-center { text-align: center; }
.text-left { text-align: center; }


.alert-danger {
	color: var(--alert-def-text);
	background-color: var(--alert-def-bg);
	list-style: none;
	padding: var(--size-xs);
	margin-top: 0;
}


/**
	right-float-box
**/
#right-float-box {
	position: fixed;
	bottom: 70px;
	right: 20px;
	transform: translateX(250px);
	transition: .5s;
	opacity: 0;
	z-index: 1000;
}
#right-float-box.scroll-start {
	transform: translateX(0);
	opacity: 1;
	transition: .5s;
}
#right-float-box.scroll-start.scroll-end {
	transform: translateX(250px);
	opacity: 0;
}
.right-float-box-in {
	display: inline-block;
}
.right-float-box-in .right-float-in {
	display: block;
	text-align: right;
}
.right-float-box-in .right-float-in > * {
	display: block;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.6);
	text-decoration: none;
}
.right-float-box-in .right-float-in img {
	max-width: 500px;
}
.right-float-box-in .upperRight img {
	width: 40px;
}
.right-float-box-in .right-float-in p {
	text-align: left;
	background-color: #FFF;
	padding: .5rem;
	text-decoration: none;
}
.right-float-box-in .upperRight {
	font-size: 25px;
	position: absolute;
	top: -10px;
	right: -10px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #FFF;
	background: #000;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	z-index: 10;
	transition: all .5s;
}
.right-float-box-in .upperRight:hover {
	transform: scale(1.2);
} 
.right-float-box-in .upperRight::before{
	content: "\f00d";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.right-float-box-in .right-float-in label {
	text-align: center;
	display: inline-block;
	height: auto;
	line-height: 1.7;
	font-size: 15px;
	color: #000;
	margin-top: 5px;
	padding: 5px;
	background: rgb(255 255 255 / 50%);
	border-radius: 3px;
}
.right-float-box-in .right-float-in label input {
  vertical-align: text-top;
  line-height: 1;
  top: 1px;
}
.right-float-box-in .btn-hide input[type="checkbox"] {
  display: none;
}
.right-float-box-in .btn-hide > span {
	position: relative;
	vertical-align: middle;
	font-size: 13px;
	margin-right: 5px;
	border-radius: 3px;
	padding: 2px;
	border: 2px solid #000;
	background: #fff;
	opacity: .2;
	transition: all .3s;
}
.right-float-box-in .btn-hide input[type="checkbox"] + span:before {
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  content: '\f00c';
  color: #000000;
  opacity: 0;
  transition: all .3s;
}
.right-float-box-in .btn-hide input[type="checkbox"]:checked + span {
	opacity: 1;
}
.right-float-box-in .btn-hide input[type="checkbox"]:checked + span:before {
	opacity: 1;
}
@media only screen and (max-width:678px){
	.right-float-box-in .upperRight img {width:5vw;}
	.right-float-box-in .right-float-in img {max-width: 72vw;}
  #right-float-box.scroll-start{
		right: 0;bottom: 15vw;
		max-width: 50vw;
	}
  .right-float-box-in .right-float-in label {
    font-size: 12px !important;
    display: block;
    margin-top: 0;
    border-radius: 0;
  }
  .right-float-box-in .upperRight {
		top: -30px;
    right: 0;
    font-size: 15px;
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
}
@media only screen and (max-width:460px) {
	#right-float-box {bottom: 30vw;}
}


/**
	page-top
**/
#page-top {
	position: fixed;
	display: flex;
	z-index: 999;
	cursor: pointer;
	right: 20px;
	bottom: 10px;
	background: #fff;
	color: #000;
	padding: 7px;
	border-radius: 3px;
	text-decoration: none;
	opacity: .5;
	transition: all .5s;
	font-size: .8rem;
	align-items: center;
	justify-content: center;
}
#page-top:hover {
	transform: scale(1.2);
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.6);
	opacity: 1;
}
#page-top > i {
	font-size: 30px;
}
#page-top > img {
	width: 20px;
	height: 20px;
}
#page-top > span {
	margin-left: 5px;
}
@media only screen and (max-width:678px){
    #page-top {
    	right: 0;
    	bottom: 0;
    	padding: 2vw 3vw;
    }
    #page-top > i {
    	font-size: 7vw;
    }
}