@charset "utf-8";
/*--------------------------------------
	copyright :　webcal
	-----------------------------------*/


/*　共通layout */
:root{ --base_color:#f18200; }
a { text-decoration: none; }
.sp_cont { display: block; }
.pc_cont { display: none; }
@media screen and ( min-width: 769px ) {
	.sp_cont { display: none; }
	.pc_cont { display: block; }
}


/*----------------------------------------------------------------------*/

/* body-wrap ----------*/
#body-wrap { position: relative; overflow: hidden; }
#body-wrap .inner {}
#body-wrap img { max-width: 100%; }
a:link, a:visited {}

/* contents-wrap ----------*/
#contents-wrap {}

/* header ----------*/
#header { position: fixed; top: 0; width: 100%; background: #fff; z-index: 999; }
#header .inner { padding: 0 1rem 1rem; }
#header h1 { text-align: center; font-size: 70%; }
#header a { color: #000; }
#header img { width: 100%; max-width: 170px; }
#header .tel p { line-height: 1; }
#header .tel a { color: #e95513; font-weight: bold; font-size: 4.5vw; }
#header .l_box { display: flex; justify-content: space-between; align-items: center; }
@media screen and ( min-width: 351px ) {
    #header img { max-width: 200px; }
}
@media screen and ( min-width: 769px ) {
	#header .inner { display: flex; justify-content: space-around; padding: 1rem 2rem; align-items: center; }
	#header .inner > div { width: 50%; }
    #header h1 { text-align: left; margin-left: 2rem; }
	#header img { max-width: 250px; }
	#header .tel { display: none; }
}


/* mv ----------*/
#mv { margin-bottom: 10rem; }
#mv img { width: 100%; }
@media screen and ( min-width: 769px ) {
	#mv .mv_wrap { height: 640px; width: 100%; background-image: url("../_img/index/main-txt.webp"), url("../_img/index/main-bg2.webp"); background-size: 824px 541px, cover; background-position: center right calc(50% + 100px), top center; background-repeat: no-repeat, no-repeat; }
}
/* main  ----------*/



/* nav_bar ----------*/
#nav_bar { position: absolute; top: 1rem; right: 1rem; width: 5rem; height: 5rem; background-color: #333; background-color: rgba(0, 0, 0, 0.8); }
#nav_bar:hover { cursor: pointer; }
#nav_bar span { position: relative; display: block; width: inherit; height: inherit; }
#nav_bar:after, #nav_bar span:before, #nav_bar span:after { position: absolute; left: 25%; content: ""; display: block; width: 50%; height: 2px; background-color: #FFF; transition: all 0.2s ease-out; }
#nav_bar:after { top: 28%; }
#nav_bar span:before { top: calc(50% - 1px); }
#nav_bar span:after { bottom: 28%; }
#nav_bar:hover:after { top: 35%; }
#nav_bar:hover span:after { bottom: 35%; }
.nav_open { position: fixed; z-index: -1; width: 100%; height: 100%; }
.nav_open #nav_bar:after { top: calc(50% - 1px); -webkit-transform: rotate(135deg); transform: rotate(135deg); }
.nav_open #nav_bar span:before { opacity: 0; }
.nav_open #nav_bar span:after { bottom: calc(50% - 1px); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
@media screen and ( min-width:768px ) {
	#nav_bar { display: none; }
}


/* nav ----------*/
#nav { display: none; }
#nav li a { color: #fff; padding: 0.5rem 2rem; border-radius: 100vh; }
#nav li:nth-of-type(1) a { background: #144a97; }
#nav li:nth-of-type(2) a { background: #57a433; }
#nav li:nth-of-type(3) a { background: #f18200; }
@media screen and ( min-width: 769px ) {
	#nav { display: flex; justify-content: flex-end; }
	#nav ul.flb { display: flex; }
	#nav ul.flb li { font-size: 2vw; }
	#nav ul.flb li:not(:nth-last-of-type(1)) { margin-right: 1.25vw; }
	#nav ul.flb a { font-weight: bold; padding: 0.5rem 1.25vw; }
}
@media screen and ( min-width: 1090px ) {
	#nav ul.flb li { font-size: 2rem; }
}
/* breadcrumbs ----------*/


/* main ----------*/




/* pageup ----------*/
#pageup { position: fixed; bottom: 0; right: 0; opacity: 0; z-index: 999; }
#pageup a { position: relative; display: block; width: 6rem; height: 6rem; background-color: var(--base_color); }
#pageup span { position: relative; display: block; width: inherit; height: inherit; overflow: hidden; padding-top: 100%; }
#pageup a:after, #pageup span:before, #pageup span:after { position: absolute; content: ""; display: block; width: 50%; height: 2px; background-color: #FFF; transition: all 0.2s ease-out; }
#pageup a:after { top: 30%; left: 25%; width: 50%; }
#pageup span:before, #pageup span:after { bottom: 30%; width: 30.5%; }
#pageup span:before { right: 24%; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#pageup span:after { left: 24%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#pageup:hover span:before, #pageup:hover span:after { bottom: 45%; }

/* footer ----------*/
#footer { padding: 1rem 2rem; border-top: 1px solid #e5e5e5; margin-bottom: 10rem; }
#footer .flex_box { display: none; }
#footer .sp_footer { background: #fff; position: fixed; bottom: 0; width: 100%; height: auto; left: 0; }
#footer .sp_footer ul { display: flex; justify-content: center; padding: 2.5rem 1rem; }
#footer .sp_footer li:not(:nth-last-of-type(1)) { margin-right: 3rem; }
#footer .sp_footer p { font-size: 3.7vw; }
#footer .sp_footer a { display: inline; color: #fff; padding: 1rem; border: 3px solid var(--base_color); border-radius: 7px; background: var(--base_color); font-weight: bold; }
#footer-copy { font-size: 1.4rem; text-align: center; }
#footer-copy a { color: #333; }
@media screen and ( min-width: 769px ) {
	#footer { margin-bottom: 17rem; }
	#footer .sp_footer { display: none; }
	#footer .flex_box { display: block;  position: fixed; bottom: 0; width: 100%; height: auto; background: rgba(255, 255, 255, 0.8); font-size: 1.8vw; min-height: 120px; font-weight: bold; padding: 1rem 2rem; box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5); left: 0; }
	#footer .flex_box p { margin: 0; }
	#footer .flex_box img { width: 100%; max-width: 300px; }
	#footer .flex_box .flb { display: flex; align-items: center; }
	#footer .flex_box .flb li { width: calc( (100% - 20rem) / 3 ); text-align: center; }
	#footer .flex_box .flb li:nth-of-type(1) { text-align: right; }
	#footer .flex_box .flb li:nth-of-type(3) { text-align: left; }
	#footer .flex_box .flb li:not(:nth-last-of-type(1)) { margin-right: 6.4vw; }
	#footer .flex_box .flb li a:not([href="/"]) { color: var(--base_color); padding: 2rem; border: 3px solid; border-radius: 7px; }
    #footer-copy { font-size: 1.4rem; }
}