/*+++++++++++++++++
header
++++++++++++++++++*/
.drawer-hamburger {
	display: block;
	background: var(--site-color);
	padding: 10px 15px 17px;
	box-sizing: border-box;
	width: 4rem;
	margin: 0;
	height: auto;
	border-radius: 5px;
	position: relative;
	display: flex;
	align-items: center;
}
.drawer-hamburger:hover {
	background:var(--site-color);
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
	background:var(--white);
	height: 2px;

}
.drawer-hamburger-icon:after {
	top: -8px;	
}
 .drawer-hamburger-icon:before {
 	top: 8px;
 }

.drawer--right.drawer-open .drawer-hamburger {
	right:0;
}
.drawer-nav {
	/* width: 100%; */
	background: var(--site-color);
	z-index: -1;
}
.drawer-open .drawer-nav {
	width:var(--flex-100);
}
.drawer--right .drawer-nav {
	right:-35rem;
	overflow: auto;
	height: 100vh;
	padding: 0 0 100px;
}

.drawer-menu {
	max-width: var(--flex-90);
	margin: 7rem auto 30px;
}
.drawer-menu ol.drw_mainmenu{
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: var(--flex-100);
	margin: 0 auto 20px;
	border-top: 1px solid var(--opa-white05);
}
.drawer-menu ol.drw_mainmenu li{
	border-bottom: 1px solid var(--opa-white05);
	/* border-radius: 5px; */
	position: relative;
}
.drawer-menu ol.drw_mainmenu li i {
	position:absolute;
	right: 0;
	top: 1rem;
	margin: auto;
	display: flex;
	align-items: center;
	width: 35px;
	height: 35px;
	border-radius: 100px;
	cursor: pointer;
	justify-content: center;
	color: var(--white);
	font-size: var(--font-h6);
}
.drawer-menu ol.drw_mainmenu li i.active {
	background:var(--site-color);
	color:var(--white);
}
.drawer-menu ol.drw_mainmenu li i.active:before {
	content: "\f068";
}

.drawer-menu ol.drw_mainmenu li a{
	display: flex;
	text-decoration: none;
	padding: 20px 0 20px;
    font-size: var(--font-h5);
	max-width: var(--flex-85);
	box-sizing: border-box;
	color: var(--white);
}
.drawer-menu ol.drw_mainmenu li > .pull {
	display:none;
	box-shadow: none;
	position: relative;
	right: 0;
	width: auto;
	margin: 0;
	padding: 25px 25px;
	border-radius: 5px;
}

/*ドロワー内アイコン*/
.drawer-menu ol.tnav-vs_list {
	display:grid;
	gap:10px;
	grid-template-columns:repeat(3,1fr);
}
.drawer-menu ol.tnav-vs_list > li > a {
	background: none !important;
}
.drawer-menu ol.tnav-vs_list > li > a .h6-title {
	color:var(--white);
}
.drawer-menu ol.tnav-vs_list > li > a svg {
	fill: var(--white) !important;
}

.drawer-menu ol {
	/* margin: auto; */
}

.drawer-menu ol li .drw {
	border:none;
}
.drawer-menu ol li .drw dt a:before {
	background: var(--white);
}
.drawer-menu ol li .drw dt a {
	color:var(--white);
}

.drawer-menu .pull-wrap {
	display: block;
}
.drawer-menu .pull-wrap .midashi {
	display:none;
}
.drawer-menu .pull-wrap > div {
	padding: 0;
}
.drawer-menu .pull-wrap ol {
	grid-template-columns: 1fr !important;
	padding: 0;
	max-width: var(--flex-100);
}
.drawer-menu .pull-wrap ol li a {
	padding: 0;
	/* display: block; */
	color: var(--black);
}

.drawer-open header .header-wrap {background: none;border: none;}
.drawer-open .logo{
    opacity: 0;
    pointer-events: none;
}


/**/

header {
	background: var(--white);
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	position: fixed;
	top: 0;
	width: var(--flex-100);
	border: none;
	z-index: 5;
}

.header-wrap {
	padding: 10px;
	justify-content: space-between;
	/* backdrop-filter: blur(2px); */
	/* position: fixed; */
	top: 0;
	align-items: center;
	right: 0;
	width: 100%;
	background: var(--white);
	box-sizing: border-box;
	/* border-bottom:1px solid var(--gray); */
}
.frontpage .header-wrap {
	border-bottom:none;
}


.header-wrap .logo {
	display: block;
	width: 130px;
	height: auto;
	transition: .3s;
}

/*underpage*/
.underpage header {
	box-shadow: none;
	position: fixed;
	z-index: 10;
	/*border-bottom: 1px solid var(--gray);*/
}
.underpage .header-wrap {
	position:relative;
}
.underpage .is-animation .header-wrap {
    padding: 0;
}
/**/

.header-side {
	/* display: none; */
	display:flex;
	gap: 10px;
	position: relative;
	z-index: 1;
}
.header-side > div:first-child {
	/* display:none; */
}
.header-subbox {
	background: var(--site-color);
	padding: 10px 10px 12px 12px;
	border-radius: 0 0 0 20px;
	max-width: max-content;
	display: none;
	align-items: center;
	gap: 10px;
}
.header-sub {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	float: right;
}
.header-sub li a{
	color: var(--black);
	text-decoration: none;
	font-weight: var(--wght-500);
	font-size: var(--font-em);
	transition: .3s;
}
.header-sub li a:hover {
	transition:.3s;
	color:var(--blue);
}
.header-sub li i {
	color: var(--site-color);
}
.keyword_search  {
	border-radius: 100px;
	padding: 4px 20px 5px;
	box-sizing: border-box;
	line-height: 1.1rem;	
	background: var(--lightorange);
}


.header-nav {
	display: none;
	gap: 50px;
	align-items: flex-end;
	clear: both;
	padding: 0 50px 0 0;
}
.header-nav li > a{
	color: var(--black);
	text-decoration: none;
	font-weight: var(--wght-500);
	font-size: var(--font-h5);
	position: relative;
	transition: .3s;
}
.header-nav li.active > a {
	color: var(--site-color);
}

.icon_link {
	border: 1px solid var(--orange);
	padding: 5px 10px;
	display: flex;
	max-width: max-content;
	align-items: flex-end;
	background: var(--white);
	border-radius: 5px;
}
.icon_link p {
	color: var(--black);
	font-size: var(--font-em);
}
.icon_link a{
	color: var(--black);
	text-decoration: none;
	border: none;
	margin: 0;
	display: block;
	gap: 10px;
	align-items: center;
}
.icon_link figure svg{
	max-width: 18px;
	height: 18px;
	margin: 3px auto 0;
	display: block;
	fill: var(--site-color);
}

.pull {
	display: none;
	position: absolute;
	background: #fff;
	z-index: 1;
	/* height: 500px; */
	width: var(--flex-95);
	right: 3rem;
	margin: 20px 0 0 0;
	box-sizing: border-box;
	border-radius: 20px 0;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	overflow: hidden;
}
.pull-wrap {
	display: grid;
	grid-template-columns: 25% 75%;
	justify-content: left;
	align-items: flex-start;
}
.pull-wrap .midashi {
	position: relative;
	border-bottom: 1px solid var(--gray);
	padding: 0 0 15px;
	color: var(--blue);
	align-items: center;
	margin:0 0 20px;
	gap: 10px;
	text-decoration: none;
}
.pull-wrap .midashi span {
	background: var(--gray);
	color: var(--black);
	margin: -15px 0 0 10px;
	border-radius: 100px;
	padding: 3px 13px 4px;
	font-weight: var(--wght-500);
}
.pull-wrap > div {
	padding: 30px 40px 0;
}
.pull-wrap ol {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 10px 0;
	align-items: flex-start;
}
.subject .pull-wrap  ol {
	grid-template-columns: repeat(3,1fr);
}

.pull-wrap ol li a {
	font-size: var(--font-h6);
	display: flex;
	align-items: center;
}
.pull-wrap ol li a:hover {
	color: var(--blue);
	text-decoration: underline;
}

.arrow {
	display: flex;
	border: 1px solid var(--site-color);
	color: var(--site-color);
	font-size: 9px;
	padding: 5px 5px 5px 3px;
	border-radius: 3px;
	background: var(--lightorange);
	align-items: center;
	height: 9px;
	width: 12px;
	justify-content: center;
	margin: 4px 8px 3px 0;
}

.arrow span {
	display: block;
	width: 18px;
	height: 18px;
	position: relative;
	overflow: hidden;
	top: 0;
	left: 0;
	/* transform: translate(-50%, -50%); */
}
.arrow span::before, .arrow span::after {

	content: "\f178";
	width: 100%;
	height: 100%;
	position: absolute;
	transition:.3s;
	top: 0;
	left: 0;
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	/* font-size: 10px; */
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--site-color);
	}



.pull-wrap figure{
	/* height: 200px; */
	overflow: hidden;
	position: relative;
}
.pull-wrap figure img {
	aspect-ratio: 3/4.5;
	object-fit:cover;
	/* position: absolute; */
	top: -1rem;
	margin: auto;
}

li.subject .pull-wrap figure img {
	aspect-ratio:3/4;
}
li.about .pull-wrap ol li:last-child {
	/* grid-column: 1 / -1; */
}


/*+++++++++++++++++++++
common
+++++++++++++++++++++*/
.tnav-vs {
	position: relative;
	z-index: 0;
	left: 0;
	right: 0;
	padding: 0;
	overflow: hidden;
	/* height: 200px; */
	padding: 0;
}
.tnav-vs figure {
	position:absolute;
	height: 300px;
	top: 0;
}
.tnav-vs figure:before {
	content:"";
	background: rgba(255,255,255,0.6);
	position: absolute;
	left: 0;
	width: var(--flex-100);
	height: var(--flex-100);
}
.tnav-vs figure img {
	filter: blur(4px);
	z-index: -1;
	position: relative;
	aspect-ratio: 4/2;
	object-fit: cover;
}
.tnav-vs ol.tnav-vs_list {
	display: grid;
	gap:10px;
	grid-template-columns: repeat(3,1fr);
	position: relative;
	z-index: 1;
	padding: 20px 0;
}
.tnav-vs ol.tnav-vs_list > li > a {
	background: var(--white);
	padding: 20px 0;
	display: block;
	border-radius: 5px;
	cursor: pointer;
	text-decoration: none;
	transition:.3s;
	font-weight: var(--wght-500);
}

.tnav-vs ol.tnav-vs_list > li > a svg {
	margin: 0 auto 15px;
	width: 50px;
	height: 50px;
	display: block;
	fill: var(--site-color);
	/* height: 50px; */
}

/*venobox*/
#vinline {
    display: none;
}

.vbox-close {
    background: var(--site-color) !important;
    color: var(--white) !important;
    padding: 10px !important;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 2.5rem !important;
    margin: -1.2rem;
    top: 4rem !important;
    opacity: 1 !important;
}

.vbox-inline .close {
    background: var(--blue);
    color: var(--white);
    padding: 10px;
    width: 60px;
    height: 60px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    margin: -1.2rem;
    top: 0;
}

.vbox-inline {
	max-width: var(--flex-100);
	padding: 30px 20px 20px !important;
	box-sizing: border-box;
	border-radius: 10px;
	height: auto;
}
.vbox-inline .item-center svg {
    fill:var(--site-color);
}
.vbox-overlay {
	background: rgba(11, 96, 176, 0.1) !important;
}

/*+++++++++++++++++
animation
++++++++++++++++++*/
header.is-animation {
	background:var(--white);
	box-shadow: none;
	/* border-bottom: 1px solid var(--opa-white02); */
}
header.is-animation .icon_link {
	/* background: transparent; */
}
/*header.is-animation .header-sub li a,
header.is-animation .header-sub li i,
header.is-animation .header-nav li > a,
header.is-animation .icon_link p{
	color:var(--white);
}*/
header.is-animation .pull-wrap ol li a {
	color:var(--black);
}

/*+++++++++++++++
icon title
++++++++++++++++*/
.icon-title {
    border-bottom: 1px solid var(--gray);
    padding: 0 0 15px;
}
.icon-title svg{
	fill:var(--blue);
	max-width: 50px;
}


/*+++++++++++++++
search
++++++++++++++++*/
#searchform {
	left: 0;
	background: var(--white);
	/* display: flex; */
	justify-content: space-between;
	border-radius: 100px;
	position: relative;
}
.searchform {
	position:relative;
	margin: 0;
}
.searchform>input {
	padding: 20px;
	border: none;
	outline: none;
	border: 1px solid var(--gray);
	border-radius: 5px;
	width: var(--flex-100);
	box-sizing: border-box;
}
#searchsubmit {
	position: absolute;
	right: 0;
	top: 0;
	margin: auto;
	bottom: 0;
	padding: 8px 20px 6px;
	border: none;
	color: var(--white);
	width: auto !important;
	background: var(--site-color);
	border-radius: 5px;
	font-size: var(--font-h6);
	height: auto;
	font-weight: var(--wght-500);
	box-sizing: border-box;
	margin: 10px;
}

.search-wrapbox>form>div:before {
}


.search-wrapbox {
	display: none;
	position: fixed;
	left: 50%;
	max-width: 800px;
	top: 50%;
	background: #fff;
	margin: auto;
	min-height: max-content;
	padding: 50px 50px 60px;
	box-sizing: border-box;
	border-radius: 10px;
	transform: translate(-50%, -50%);
	width: var(
	--flex-100);
}

.search-wrapbox.active {
	display: block;
	z-index: 10;
}

.search-wrapbox>div {
	/* right: 0; */
	/* top: 0; */
	/* bottom: 0; */
}
.search-close {
	background: var(--darkgray);
	max-width: max-content;
	padding: 7px 20px 10px;
	border-radius: 100px;
	position: absolute;
	bottom: -1rem;
	color: var(--white);
	left: 0;
	right: 0;
	gap: 10px;
	margin: auto;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: .3s;
}
.search-close i {
	margin: 3px 0 0;
}

.search-close:hover {
	transition:.3s;
	background:#666;
}

.search-wrapbox #searchform {
	margin: auto;
	width: var(--flex-100);
}
.search-wrapbox #searchform input.search-input {
	padding: 20px;
	box-sizing: border-box;
	width: var(--flex-100);
	margin: 1px auto 0;
	font-size: var(--font-h6);
	border-radius: 5px;
	border: 1px solid var(--gray);
}

.search-wrapbox #searchsubmit {
	border: none;
	max-width: max-content;
	padding: 15px 30px;
	border-radius: 5px;
	margin: 8px;
	font-weight: 400;
	display: block;
	font-size: var(--font-h6);
}

/*++++++++++++++++++++
tnav
+++++++++++++++++++++*/
.vbox-inline .tnav {
	position: relative;
	margin: 0rem auto 20px !important;
	z-index: 1;
	padding: 10px 5px;
	box-sizing: border-box;
}
.vbox-inline .tnav ol{
	grid-template-columns: repeat(2,1fr);
	box-shadow: none;
	gap: 10px;
}
.vbox-inline .tnav li {/* border: 1px solid var(--lightgray); */border-radius: 5px;}
.vbox-inline .tnav li figure {
	width: 100px;
	height: 100px;
	margin: 0 auto 10px;
	background: var(--site-color-opa);
}
.vbox-inline .tnav li figure svg{width: 40px;height: 40px;}
.vbox-inline .tnav li a {
	padding: 15px;
}

.vbox-inline .tnav li a figure:after {
	content:"";
	width: 100px;
	background: none;
	height: 100px;
}
.vbox-inline .tnav li a figure:before {
	content:"";
	width: 100px;
	height: 100px;
}

.vbox-inline .tnav li a .engs {
	color: var(--sub-color);
	transition:.5s;
}
.vbox-inline .tnav li a:hover .engs {
	color: var(--white);
	transition:.5s;
}
.vbox-inline .tnav li a:hover .darkgray {
	color: var(--white);
	transition:.5s;	
}

.vbox-inline .tnav_text * {
	position: relative;
	z-index: 10;
	transition:.5s;
}
.vbox-inline .tnav_text:hover * {
	transition: .5s;
	color: var(--white);
}

.common_faq dt {
    text-align: left;
}
.common_faq dd {
	display:flex;
	gap:10px;
	flex-wrap: wrap;
}
.common_faq dd a {
    /* border: 1px solid var(--darkgray); */
    color: var(--site-color);
    text-decoration: none;
    padding: 3px 16px 5px;
    box-sizing: border-box;
    border-radius: 100px;
    font-size: var(
    --font-h6);
    background: var(
    --lightgray);
    transition: .3s;
}
.common_faq dd a:hover {
}

@media screen and (min-width: 600px) {
/*+++++++++++++++++
header
++++++++++++++++++*/
.header-wrap .logo {
	
width: 220px;
}	
.drawer-open .drawer-nav {
	width: var(--flex-70);
}

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
	background:var(--white);
	height: 1.5px;
}

.drawer--right.drawer-open .drawer-hamburger {
	right:0;
}

.drawer-menu ol.drw_mainmenu li i.active {
	background:var(--site-color);
	color:var(--white);
}
.drawer-menu ol.drw_mainmenu li i.active:before {
	content: "\f068";
}

.drawer-menu ol.tnav-vs_list {
}
.drawer-menu ol.tnav-vs_list > li > a {
	background: none !important;
}
.drawer-menu ol.tnav-vs_list > li > a .h6-title {
}
.drawer-menu ol.tnav-vs_list > li > a svg {
	fill: var(--white) !important;
}

.drawer-menu ol {
	/* margin: auto; */
}

.drawer-menu ol li .drw {
	border:none;
}
.drawer-menu ol li .drw dt a:before {
	background: var(--white);
}
.drawer-menu ol li .drw dt a {
	color:var(--white);
}

/**/


.pull-wrap ol li a:hover {
	color: var(--blue);
	text-decoration: underline;
}


/*+++++++++++++++++++++
common
+++++++++++++++++++++*/
.tnav-vs {
}
.tnav-vs figure {
}
.tnav-vs figure:before {
	content:"";
	background: rgba(255,255,255,0.6);
	position: absolute;
	left: 0;
	width: var(--flex-100);
	height: var(--flex-100);
}
.tnav-vs figure img {
	filter: blur(4px);
	z-index: -1;
	position: relative;
	aspect-ratio: 4/1.5;
	object-fit: cover;
}

/*venobox*/
#vinline {
    display: none;
}

.vbox-close {
    margin: -0.5rem;
    top: 3rem !important;
}

.vbox-inline .close {
    background: var(--blue);
    color: var(--white);
    padding: 10px;
    width: 60px;
    height: 60px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    margin: -1.2rem;
    top: 0;
}

.vbox-inline {
}

/*+++++++++++++++
search
++++++++++++++++*/
#searchform {
	left: 0;
	background: var(--white);
	/* display: flex; */
	justify-content: space-between;
	border-radius: 100px;
	position: relative;
}

.search-close i {
	margin: 3px 0 0;
}

.search-close:hover {
	transition:.3s;
	background:#666;
}

.search-wrapbox #searchform {
	margin: auto;
	width: var(--flex-100);
}
.search-wrapbox #searchform input.search-input {
	padding: 20px;
	box-sizing: border-box;
	width: var(--flex-100);
	margin: 1px auto 0;
	font-size: var(--font-h6);
	border-radius: 5px;
	border: 1px solid var(--gray);
}

.search-wrapbox #searchsubmit {
}

/*++++++++++++++++++++
tnav
+++++++++++++++++++++*/

.vbox-inline .tnav li a .engs {
	color: var(--sub-color);
	transition:.5s;
}
.vbox-inline .tnav li a:hover .engs {
	color: var(--white);
	transition:.5s;
}

.vbox-inline .tnav_text * {
}
.vbox-inline .tnav_text:hover * {
	transition: .5s;
	color: var(--white);
}

.common_faq dt {
    text-align: left;
}


}

@media screen and (min-width: 1024px) {
/*+++++++++++++++++
header
++++++++++++++++++*/

.drawer-hamburger:hover {
	background:var(--blue);
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
	background:var(--white);
	height:1.5px;
}

.drawer--right.drawer-open .drawer-hamburger {
	right:0;
}

.drawer-open .drawer-nav {
	width: var(--flex-70);
}

.drawer-menu {
	margin: 9rem auto 30px;
}

.drawer-menu ol.drw_mainmenu li i {
	position:absolute;
	right: 0;
	top: 1rem;
	margin: auto;
	display: flex;
	align-items: center;
	width: 35px;
	height: 35px;
	border-radius: 100px;
	cursor: pointer;
	justify-content: center;
	color: var(--white);
	font-size: var(--font-h6);
}
.drawer-menu ol.drw_mainmenu li i.active {
	background:var(--site-color);
	color:var(--white);
}
.drawer-menu ol.drw_mainmenu li i.active:before {
	content: "\f068";
}


.drawer-menu ol.tnav-vs_list {
	display:grid;
	gap:10px;
	grid-template-columns:repeat(3,1fr);
}
.drawer-menu ol.tnav-vs_list > li > a {
	background: none !important;
}
.drawer-menu ol.tnav-vs_list > li > a .h6-title {
	color:var(--white);
}

.drawer-menu ol {
	margin: auto;
}

.drawer-menu ol li .drw {
	border:none;
}
.drawer-menu ol li .drw dt a:before {
	background: var(--white);
}
.drawer-menu ol li .drw dt a {
	color:var(--white);
}

.drawer-menu .pull-wrap {
	display: block;
}
.drawer-menu .pull-wrap .midashi {
	display:none;
}
.drawer-menu .pull-wrap > div {
	padding: 0;
}
.drawer-menu .pull-wrap ol {
	margin: 0;
	grid-template-columns: 1fr;
	padding: 0;
	max-width: var(--flex-100);
}
.drawer-menu .pull-wrap ol li a {
	padding: 0;
	/* display: block; */
	color: var(--black);
}
/**/
.header-wrap .logo {
	width: 200px;
	padding: 30px 0 0;
}

.header-sub li a:hover {
	transition:.3s;
	color:var(--blue);
}


.header-nav li > a:hover {
	transition:.3s;
	color:var(--site-color);
}

.pull-wrap > div {
	padding: 30px;
}

.pull-wrap ol li a {
	font-size: var(--font-em);
	display: flex;
}
.pull-wrap ol li a:hover {
	color: var(--blue);
	text-decoration: underline;
}


/*+++++++++++++++++++++
common
+++++++++++++++++++++*/
.tnav-vs figure:before {
	content:"";
	background: rgba(255,255,255,0.6);
	position: absolute;
	left: 0;
	width: var(--flex-100);
	height: var(--flex-100);
}
.tnav-vs figure img {
	filter: blur(4px);
	z-index: -1;
	position: relative;
	aspect-ratio: 4/1.5;
	object-fit: cover;
}

.tnav-vs ol.tnav-vs_list > li > a:hover {
	transition:.3s;	
	transform: translateY(-5px);	
}

/*venobox*/
#vinline {
    display: none;
}

.vbox-close {right: 13.5rem !important;top: 5rem !important;}

.vbox-inline .close {
    background: var(--blue);
    color: var(--white);
    padding: 10px;
    width: 60px;
    height: 60px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    margin: -1.2rem;
    top: 0;
}

.vbox-inline {
	max-width: 640px;
}

/*+++++++++++++++
search
++++++++++++++++*/
#searchform {
	left: 0;
	background: var(--white);
	/* display: flex; */
	justify-content: space-between;
	border-radius: 100px;
	position: relative;
}

.search-close i {
	margin: 3px 0 0;
}

.search-close:hover {
	transition:.3s;
	background:#666;
}

.search-wrapbox #searchform {
	margin: auto;
	width: var(--flex-100);
}
.search-wrapbox #searchform input.search-input {
	padding: 20px;
	box-sizing: border-box;
	width: var(--flex-100);
	margin: 1px auto 0;
	font-size: var(--font-h6);
	border-radius: 5px;
	border: 1px solid var(--gray);
}

.search-wrapbox #searchsubmit {
}

/*++++++++++++++++++++
tnav
+++++++++++++++++++++*/

.vbox-inline .tnav ol{
    grid-template-columns: repeat(3,1fr);
    max-width: var(--flex-100);
}

.vbox-inline .tnav li a:hover figure:before {
	content:"";
	background:var(--white);
	z-index:0;
	transition: .5s;	
	border-radius:100px;
}
.vbox-inline .tnav li a:hover figure:after {
	content:"";
	transform:scale(4);
	transition: .5s;
	background: var(--sub-color);
	
}
.vbox-inline .tnav li a .engs {
	color: var(--sub-color);
	transition:.5s;
}
.vbox-inline .tnav li a:hover .engs {
	color: var(--white);
	transition:.5s;
}

.vbox-inline .tnav_text .h4-title {font-size: var(--font-h5);}
.vbox-inline .tnav_text:hover * {
	transition: .5s;
	color: var(--white);
}

.common_faq dt {
    text-align: left;
}

.common_faq dd a:hover {
	transition:.3s;
	background:var(--blue);
	color:var(--white);
}	
}

@media screen and (min-width: 1200px) {
/*+++++++++++++++++
header
++++++++++++++++++*/
.header-nav,.header-subbox {
	display:flex;
	justify-content: right;
}	
.header-nav {
	padding:20px 50px 0 0;
}	
.header-wrap {
	padding: 0 0 20px 20px;
	justify-content: space-between;
	/* backdrop-filter: blur(2px); */
	/* position: fixed; */
	top: 0;
	align-items: center;
	right: 0;
	width: 100%;
	background: var(--white);
	box-sizing: border-box;
	/* border-bottom:1px solid var(--gray); */
}	
.drawer-hamburger {
	display: none;
}

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
	background:var(--white);
	height:1.5px;
}

.drawer--right.drawer-open .drawer-hamburger {
	right:0;
}
.drawer-nav {
	/* width: 100%; */
	background:var(--site-color);
}
.drawer-open .drawer-nav {
	width:var(--flex-100);
}
.drawer--right .drawer-nav {
	right:-35rem;
	overflow: auto;
	height: 100vh;
	padding: 0 0 100px;
}

.drawer-menu {
	max-width: var(--flex-90);
	margin: 7rem auto 30px;
}
.drawer-menu ol.drw_mainmenu{
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: var(--flex-100);
	margin: 0 auto 20px;
	border-top: 1px solid var(--opa-white05);
}
.drawer-menu ol.drw_mainmenu li{
	border-bottom: 1px solid var(--opa-white05);
	/* border-radius: 5px; */
	position: relative;
}
.drawer-menu ol.drw_mainmenu li i {
	position:absolute;
	right: 0;
	top: 1rem;
	margin: auto;
	display: flex;
	align-items: center;
	width: 35px;
	height: 35px;
	border-radius: 100px;
	cursor: pointer;
	justify-content: center;
	color: var(--white);
	font-size: var(--font-h6);
}
.drawer-menu ol.drw_mainmenu li i.active {
	background:var(--site-color);
	color:var(--white);
}
.drawer-menu ol.drw_mainmenu li i.active:before {
	content: "\f068";
}

.drawer-menu ol.drw_mainmenu li a{
	display: flex;
	text-decoration: none;
	padding: 20px 0 20px;
	max-width: var(--flex-85);
	box-sizing: border-box;
	color: var(--white);
}
.drawer-menu ol.drw_mainmenu li > .pull {
	display:none;
	box-shadow: none;
	position: relative;
	right: 0;
	width: auto;
	margin: 0;
	padding: 25px 25px;
	border-radius: 5px;
}

.drawer-menu ol.tnav-vs_list {
	display:grid;
	gap:10px;
	grid-template-columns:repeat(3,1fr);
}
.drawer-menu ol.tnav-vs_list > li > a {
	background: none !important;
}
.drawer-menu ol.tnav-vs_list > li > a .h6-title {
	color:var(--white);
}
.drawer-menu ol.tnav-vs_list > li > a svg {
	fill: var(--white) !important;
}

.drawer-menu ol {
	margin: auto;
}

.drawer-menu ol li .drw {
	border:none;
}
.drawer-menu ol li .drw dt a:before {
	background: var(--white);
}
.drawer-menu ol li .drw dt a {
	color:var(--white);
}

.drawer-menu .pull-wrap {
	display: block;
}
.drawer-menu .pull-wrap .midashi {
	display:none;
}
.drawer-menu .pull-wrap > div {
	padding: 0;
}
.drawer-menu .pull-wrap ol {
	margin: 0;
	grid-template-columns: 1fr;
	padding: 0;
	max-width: var(--flex-100);
}
.drawer-menu .pull-wrap ol li a {
	padding: 0;
	/* display: block; */
	color: var(--black);
}
/**/
	.header-side > div:first-child {
		display: block;
	}


.header-sub li a:hover {
	transition:.3s;
	color:var(--blue);
}

.header-side {
	gap:20px;
}

.icon_link {
	padding: 5px 20px 6px;
}

li.about .pull-wrap ol li:last-child {
}

.icon_link a {
	display:flex;
}
/*+++++++++++++++++++++
vbox
+++++++++++++++++++++*/
.vbox-inline .tnav {
	padding: 20px;
}
.vbox-inline .tnav li figure svg {
	width: 60px;
	height: 60px;
}
	
/*+++++++++++++++++++++
common
+++++++++++++++++++++*/
.tnav-vs {
	position: relative;
	z-index: 0;
	left: 0;
	right: 0;
	padding: 0;
	overflow: hidden;
	/* height: 200px; */
	padding: 0;
}
.tnav-vs figure {
	position:absolute;
	height: 300px;
	top: 0;
}
.tnav-vs figure:before {
	content:"";
	background: rgba(255,255,255,0.6);
	position: absolute;
	left: 0;
	width: var(--flex-100);
	height: var(--flex-100);
}
.tnav-vs figure img {
	filter: blur(4px);
	z-index: -1;
	position: relative;
	aspect-ratio: 4/1.5;
	object-fit: cover;
}
.tnav-vs ol.tnav-vs_list {
	display: grid;
	gap:20px;
	grid-template-columns: repeat(3,1fr);
	position: relative;
	z-index: 1;
	padding: 30px;
}
.tnav-vs ol.tnav-vs_list > li > a {
	padding: 30px 10px;
}
.tnav-vs ol.tnav-vs_list > li > a:hover {
	transition:.3s;	
	transform: translateY(-5px);	
}


/*venobox*/
#vinline {
    display: none;
}

.vbox-inline .close {
    background: var(--blue);
    color: var(--white);
    padding: 10px;
    width: 60px;
    height: 60px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    margin: -1.2rem;
    top: 0;
}

.vbox-inline {
	max-width: 850px;
	padding: 40px 40px 20px !important;
}


/*+++++++++++++++
search
++++++++++++++++*/
#searchform {
	left: 0;
	background: var(--white);
	/* display: flex; */
	justify-content: space-between;
	border-radius: 100px;
	position: relative;
}

.searchform>input {
	padding: 25px;
	border: none;
	outline: none;
	border: 1px solid var(--gray);
	border-radius: 5px;
	width: var(--flex-100);
	box-sizing: border-box;
}
.search-close i {
	margin: 3px 0 0;
}

.search-close:hover {
	transition:.3s;
	background:#666;
}

.search-wrapbox #searchform {
	margin: auto;
	width: var(--flex-100);
}
.search-wrapbox #searchform input.search-input {
	padding: 20px;
	box-sizing: border-box;
	width: var(--flex-100);
	margin: 1px auto 0;
	font-size: var(--font-h6);
	border-radius: 5px;
	border: 1px solid var(--gray);
}


/*++++++++++++++++++++
tnav
+++++++++++++++++++++*/


.vbox-inline .tnav li a:hover figure:before {
	content:"";
	background:var(--white);
	z-index:0;
	transition: .5s;	
	border-radius:100px;
}
.vbox-inline .tnav li a:hover figure:after {
	content:"";
	transform:scale(4);
	transition: .5s;
	background: var(--sub-color);
	
}
.vbox-inline .tnav li a .engs {
	color: var(--sub-color);
	transition:.5s;
}
.vbox-inline .tnav li a:hover .engs {
	color: var(--white);
	transition:.5s;
}
.vbox-inline .tnav li a:hover .darkgray,
.vbox-inline .tnav li a:hover .brown  {
	color: var(--white);
	transition:.5s;	
}

.vbox-inline .tnav_text:hover * {
	transition: .5s;
	color: var(--white);
}

.common_faq dt {
    text-align: left;
}

}


@media screen and (min-width: 1500px) {
/*+++++++++++++++++
header
++++++++++++++++++*/

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
	background:var(--white);
	height:1.5px;
}

.drawer--right.drawer-open .drawer-hamburger {
	right:0;
}
.drawer-nav {
	/* width: 100%; */
	background:var(--site-color);
}
.drawer-open .drawer-nav {
	width:var(--flex-100);
}
.drawer--right .drawer-nav {
	right:-35rem;
	overflow: auto;
	height: 100vh;
	padding: 0 0 100px;
}

.drawer-menu {
	max-width: var(--flex-90);
	margin: 7rem auto 30px;
}
.drawer-menu ol.drw_mainmenu{
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: var(--flex-100);
	margin: 0 auto 20px;
	border-top: 1px solid var(--opa-white05);
}
.drawer-menu ol.drw_mainmenu li{
	border-bottom: 1px solid var(--opa-white05);
	/* border-radius: 5px; */
	position: relative;
}
.drawer-menu ol.drw_mainmenu li i {
	position:absolute;
	right: 0;
	top: 1rem;
	margin: auto;
	display: flex;
	align-items: center;
	width: 35px;
	height: 35px;
	border-radius: 100px;
	cursor: pointer;
	justify-content: center;
	color: var(--white);
	font-size: var(--font-h6);
}
.drawer-menu ol.drw_mainmenu li i.active {
	background:var(--site-color);
	color:var(--white);
}
.drawer-menu ol.drw_mainmenu li i.active:before {
	content: "\f068";
}

.drawer-menu ol.drw_mainmenu li a{
	display: flex;
	text-decoration: none;
	padding: 20px 0 20px;
	max-width: var(--flex-85);
	box-sizing: border-box;
	color: var(--white);
}
.drawer-menu ol.drw_mainmenu li > .pull {
	display:none;
	box-shadow: none;
	position: relative;
	right: 0;
	width: auto;
	margin: 0;
	padding: 25px 25px;
	border-radius: 5px;
}

.drawer-menu ol.tnav-vs_list {
	display:grid;
	gap:10px;
	grid-template-columns:repeat(3,1fr);
}
.drawer-menu ol.tnav-vs_list > li > a {
	background: none !important;
}
.drawer-menu ol.tnav-vs_list > li > a .h6-title {
	color:var(--white);
}
.drawer-menu ol.tnav-vs_list > li > a svg {
	fill: var(--white) !important;
}

.drawer-menu ol {
	margin: auto;
}

.drawer-menu ol li .drw {
	border:none;
}
.drawer-menu ol li .drw dt a:before {
	background: var(--white);
}
.drawer-menu ol li .drw dt a {
	color:var(--white);
}

.drawer-menu .pull-wrap {
	display: block;
}
.drawer-menu .pull-wrap .midashi {
	display:none;
}
.drawer-menu .pull-wrap > div {
	padding: 0;
}
.drawer-menu .pull-wrap ol {
	margin: 0;
	grid-template-columns: 1fr;
	padding: 0;
	max-width: var(--flex-100);
}
.drawer-menu .pull-wrap ol li a {
	padding: 0;
	/* display: block; */
	color: var(--black);
}

/*underpage*/
.underpage .is-animation .header-wrap {
	padding: 0;
}	
/**/

.header-wrap .logo {width: 240px;}


.header-nav {padding: 20px 0 0 60px;justify-content: left;}

.pull-wrap {
	display: grid;
	grid-template-columns: 23% 77%;
	justify-content: left;
	align-items: flex-start;
}
.pull-wrap .midashi {
	position: relative;
	border-bottom: 1px solid var(--gray);
	padding: 0 0 15px;
	color: var(--site-color);
	align-items: center;
	margin:0 0 20px;
	gap: 10px;
	text-decoration: none;
}


.arrow {
	height: 8px;
	width: 10px;
	margin: 4px 5px 3px 0;
}

.arrow span::before, .arrow span::after {

	content: "\f178";
	width: 100%;
	height: 100%;
	position: absolute;
	transition:.3s;
	top: 0;
	left: 0;
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	/* font-size: 10px; */
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--site-color);
	}

.arrow span::before {
  transform: translate(-150%, 0);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.arrow span::after {
  transform: translate(0, 0);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

a:hover .arrow span::before {
	transform: translate(0, 0);
}
a:hover .arrow span::after {
	transform: translate(150%, 0);
}



.pull-wrap figure{
	/* height: 200px; */
	overflow: hidden;
	position: relative;
}


/*+++++++++++++++++++++
common
+++++++++++++++++++++*/
.tnav-vs {
	position: relative;
	z-index: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	/* height: 200px; */
	padding: 0;
}
.tnav-vs figure {
	position:absolute;
	height: 300px;
	top: 0;
}
.tnav-vs figure:before {
	content:"";
	background: rgba(255,255,255,0.6);
	position: absolute;
	left: 0;
	width: var(--flex-100);
	height: var(--flex-100);
}
.tnav-vs figure img {
	filter: blur(4px);
	z-index: -1;
	position: relative;
	aspect-ratio: 4/1.5;
	object-fit: cover;
}

.tnav-vs ol.tnav-vs_list > li > a:hover {
	transition:.3s;	
	transform: translateY(-5px);	
}

/*venobox*/
#vinline {
    display: none;
}

.vbox-close {
    width: 60px;
    height: 60px;
    right: 33rem !important;
    top: 3rem !important;
}

.vbox-inline .close {
    background: var(--blue);
    color: var(--white);
    padding: 10px;
    width: 60px;
    height: 60px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    margin: -1.2rem;
    top: 0;
}

/*+++++++++++++++
search
++++++++++++++++*/
#searchform {
	left: 0;
	background: var(--white);
	/* display: flex; */
	justify-content: space-between;
	border-radius: 100px;
	position: relative;
}

.searchform>input {
	padding: 25px;
	border: none;
	outline: none;
	border: 1px solid var(--gray);
	border-radius: 5px;
	width: var(--flex-100);
	box-sizing: border-box;
}
.search-wrapbox.active {
	display: block;
	z-index: 10;
}


.search-close {
	background: var(--darkgray);
	max-width: max-content;
	padding: 7px 20px 10px;
	border-radius: 100px;
	position: absolute;
	bottom: -1rem;
	color: var(--white);
	left: 0;
	right: 0;
	gap: 10px;
	margin: auto;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: .3s;
}
.search-close i {
	margin: 3px 0 0;
}

.search-close:hover {
	transition:.3s;
	background:#666;
}

.search-wrapbox #searchform {
	margin: auto;
	width: var(--flex-100);
}
.search-wrapbox #searchform input.search-input {
	padding: 20px;
	box-sizing: border-box;
	width: var(--flex-100);
	margin: 1px auto 0;
	font-size: var(--font-h6);
	border-radius: 5px;
	border: 1px solid var(--gray);
}

/*++++++++++++++++++++
tnav
+++++++++++++++++++++*/

.vbox-inline .tnav li a .engs {
	color: var(--sub-color);
	transition:.5s;
}
.vbox-inline .tnav li a:hover .engs {
	color: var(--white);
	transition:.5s;
}

.vbox-inline .tnav_text:hover * {
	transition: .5s;
	color: var(--white);
}

.common_faq dt {
    text-align: left;
}
.common_faq dd {
	display:flex;
	gap:10px;
	flex-wrap: wrap;
}

}