/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:767px) {
}

@media (min-width: 768px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

/* ---------------------------------------- common */

main { padding: 5em 0; }


@media (max-width: 599px) {
	footer .inside { padding: 2em 0; }
}

@media (min-width: 600px) and (max-width:959px) {
	footer .inside { padding: 3em 0; }
}

@media (min-width: 960px) {
	footer .inside { padding: 4em 0; }
}

/* ---------------------------------------- visual */

#visual .inner { position: relative; }
#visual .inner h2 { 
	width: 90%;
	color: #fff;
	text-align: center;
	margin: 0;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.2), -2px -2px 3px rgba(0,0,0,0.2);
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#visual .inner h2 small {
	display: block;
	color: var(--theme-color02-middle);
}

.blur {
	display: inline-block;
	padding: 0.2em 1em;
	backdrop-filter: blur(1.0px);
	-webkit-backdrop-filter: blur(10px);
	/*background-color: rgba(255, 255, 255, 0.2);*/
	border-radius: 10px;
}

@media (max-width: 480px) {
	#visual .inner { height: 275px; }
	#visual .inner h2 { font-size: 2.0rem;}
	#visual .inner h2 small { font-size: 1.4rem; }
}

@media (min-width: 481px) and (max-width:767px) {
	#visual .inner { height: 300px; }
	#visual .inner h2 { font-size: 2.8rem; }
	#visual .inner h2 small { font-size: 1.6rem; }
}

@media (min-width: 768px) and (max-width:959px) {
	#visual .inner { height: 325px; }
	#visual .inner h2 { font-size: 3.2rem; }
	#visual .inner h2 small { font-size: 1.8rem; }
}

@media (min-width: 960px) {
	#visual .inner { height: 350px; }
	#visual .inner h2 { font-size: 3.8rem; }
	#visual .inner h2 small { font-size: 2.0rem; }
}

/* ---------------------------------------- tabnav */

@media (max-width: 599px) {
	.tabnav { font-size: 1.3rem; }
}

@media (min-width: 600px) and (max-width:767px) {
	.tabnav { font-size: 1.4rem; }
}

@media (min-width: 768px) and (max-width:959px) {
	.tabnav { font-size: 1.5rem; }
}

@media (min-width: 960px) {
	.tabnav { font-size: 1.6rem; }
}

.tabnav.upper {
	border-bottom: 4px var(--theme-color01-middle) solid;
	/* margin: 0 0 5em; */
}

.tabnav.under {
	border-top: 4px var(--theme-color01-middle) solid;
	background: var(--theme-color01-light);
	/* margin: 5em 0 0; */
}
.tabnav ul li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	height: 4em;
	line-height: 1.4;
	background: #c5e6f9; /*#F59EB1*/
	padding: .5em 1em;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	transition: .2s ease;
}
.tabnav ul li a:hover,
.tabnav ul li.current a {
	color: #fff;
	background: var(--theme-color01-middle);
}

.tabnav.upper ul li a{
	border-radius: 10px 10px 0px 0px;
}
	
.tabnav.under ul li a{
	border-radius: 0px 0px 10px 10px;
}

@media (max-width: 599px) {
	.tabnav ul {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.tabnav ul li { 
		width: 49%; 
		margin: .25em 0;
	}
}

@media (min-width: 600px) {
	.tabnav ul {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	.tabnav ul li { width: 23.5%; }
	.tabnav ul li:not(:last-child){ margin: 0 2% 0 0; }
}

/* ---------------------------------------- title */

.roundbox {
	color: #ffffff;
  	background: linear-gradient(135deg, var(--theme-color01-middle), var(--theme-color02-middle));
  	padding: .5em .75em;
  	-webkit-border-radius: 3rem 0 3rem 0;
  	border-radius: 3rem 0 3rem 0;
	font-weight: bolder;
}

.underbar {
	color: var(--theme-color01-middle);
	border-bottom: 2px var(--theme-color01-middle) solid;
	padding: 0 0 .5em;
	margin: 0 0 1.5em;
}

.box_theme-color01 {
	background: var(--theme-color01-light);
	padding: 1.5em;
	margin: 2em 0;
}

.pinkbox h2, .pinkbox h3, .pinkbox h4 { 
	color: var(--theme-color01-middle); 
	margin: 0 0 .5em;
}

/* ---------------------------------------- cregit */

.text-cregit {
	text-align: right; 
	margin: 2em 0 0;
}

/* ---------------------------------------- other style */

.bold {
	font-weight:bolder;
}

.lead-text {
	display: grid;
	place-items: center;
    font-size: 1.1em;
    padding: 0.2em 0 4em 0;
}

.attention {
  font-size: 1.2em;
  color: red;
}

.larger {
	font-size:1.2em;
}