@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=M+PLUS+1p:wght@400;500;800&family=Noto+Sans+JP&family=Noto+Serif+JP:wght@400;700;900&display=swap');

* {
    margin: 0;
    padding: 0;
} 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
strong {
font-weight: bold;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

*, *::before, *::after {
	box-sizing: border-box;
}

.clearfix:before, .clearfix:after{content:""; display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}

/*base*/
html {
	font-size: 9px;
	position: relative;
	text-align: center;
	/*scroll-behavior: smooth;*/
}
body {
	background: #ffffff;
	text-align: center;
	color: #494949;
	font-size: 1.8rem;
	font-family: 'M PLUS 1p', "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	line-height: 1.8;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
	position:relative;
	min-width: 140rem;
	overflow-x:hidden;
}

a {
	color: #333;
	text-decoration: none;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
}

img {
	box-shadow: #fff 0 0 0;
	vertical-align:middle;
	max-width:100%;
}
a:hover {
	color: #5862de;
}
a img{
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;}

.left{
	float: left;
	position:relative;
}
.right{
	float: right;
	position:relative;
}

.fw_mincho{ font-family: 'Noto Serif JP', serif;}
.fw_noto{ font-family: 'Noto Sans JP', sans-serif;}
.fw_bebas{ font-family: 'Bebas Neue', cursive;}

.container{
max-width:136rem;
margin:0 auto;
}

/*------------------------------------------------------------------------------------header*/
#header{
position:absolute;
z-index:50;
width:100%;
text-align:justify;
padding:2em 3em 0 3em;
}
#header h1{
float:left;
    position: relative;
    z-index: 15;
}
#header h1 img{
height:2.2em;
}
#header ul{
padding-top:1.15em;
}
#header li{
display:inline-block;
margin-left:2.8em;
}
#header a{
color:#fff;
cursor:pointer;
}
#header .logo_b{
display:none;
}
#header.clicked a{
color:#000;
cursor:pointer;
}
#header a:hover,#header.clicked a:hover{
	color: #5862de;
}
#header.clicked .logo_b{
display:block;
}
#header.clicked .logo_w{
display:none;
}
#header li.active{
border-bottom:2px solid #000;
}

.popupNavi {
	position: fixed;
		width: 100%;
	min-width:140rem;
	clear:both;
	top:0;
	right: 0;
	left:0;
	margin:0;
	z-index:5;
}
.popupNaviChild {
	display:none;
	position: absolute;
	width: 100%;
	right: 0;
	left:0;
	margin:0;
	background-color:#fff;
	color:#000;
	padding:11em 0 5em 0;
	font-size:1.6rem;
}
.popupNavi .navibox{
max-width:138rem;
margin: 0 auto;
text-align:left;
}
.popupNaviChild h4{
font-size:2rem;
font-weight:500;
margin-bottom:2em;
}
.popupNaviChild h4 p{
font-size:3.5rem;
font-weight:900;
line-height:1;
}
.popupNaviChild ul{
	display:flex;
}
.popupNaviChild li{
width:18%;
margin-right:2%;
}
.popupNaviChild li a{
display:block;
color:#000;
min-width:10em;
padding:0.7em 0;
border-bottom:1px solid #000;
}
.popupNaviChild li a:hover{
color:#5862de;
border-bottom:1px solid #5862de;
}


/*------------------------------------------------------------------------------------drawer*/
#drawer{
padding:3em 1rem;
overflow-y: auto;
}
#drawer .logo_n{
max-width:138rem;
margin:0 auto;
padding:0 0 3em 0;
text-align:justify;
}
#drawer .logo_n img{
height:2em;
}
#drawer .navibox{
max-width:138rem;
margin:0 auto;
display:flex;
flex-wrap:wrap;
justify-content: space-between;
}
#drawer .navibox ul{
width:21%;
text-align:justify;
}
#drawer .navibox li{
font-size:1.5rem;
}
#drawer .navibox a{
color:#fff;
display:block;
padding:0.2em 0;
position:relative;
}
#drawer .navibox a:hover{
color:#a0a7fa;
}
#drawer .navibox .title{
padding:1.4em 0 0 0;
font-size:1.8rem;
font-weight:bold;
border-bottom:1px solid #b5b5b5;
margin-bottom:0.7em;
}
#drawer .navibox a.link{
color:#fff;
}
#drawer .navibox a.link:after{
content:"→";
position:absolute;
right:0;
}
#drawer .navibox a.link.on:after{
right:1em;
    transform: rotate(180deg);
}
#drawer .navibox a.link:hover{
color:#a0a7fa;
}
#drawer .navibox .inner{
cursor:pointer;
}
#drawer .navibox .inner:after{
content:"┼";
position:absolute;
right:0;}
#drawer .navibox .inner.active:after{
content:"─";}
#drawer .navibox .sub{
display:none;
}



/*------------------------------------------------------------------------------------footer*/
#footer{}

#foot_navi .recruit a{
display:flex;
justify-content:center;
align-items:center;
color:#fff;
}
#foot_navi  .recruita:hover{
color:#a0a7fa;
}
#foot_navi .recruit .icon{
width:7em;
}
#foot_navi .recruit .title{
font-size:1.6rem;
padding:0 2em;
}
#foot_navi .recruit .title span{
font-size:4.2rem;
font-weight:700;
line-height:1;
}
#foot_navi .recruit .arrow{
font-size:3.7rem;
font-weight:700;
}

#foot_navi{
background-color:#000;
background-image:url(../img/footer_back.jpg);
background-repeat:no-repeat;
background-position:505;
background-size:cover;
color:#d3d3d3;
font-size:1.5rem;
padding:3em 3em 2em 5em;
}
    .foot_flex{
        display: flex;
        justify-content: space-between;
        align-items:flex-end;
    }
.footbox{
    order: 2;
    width: 30em;
}
.footbox ul{
    padding: 4em 0 3em 0;
}

#foot_navi a{
color:#d3d3d3;
}
#foot_navi a:hover{
color:#a0a7fa;
}
#foot_navi ul{
text-align:right;
}
#foot_navi li{
display:inline-block;
padding-left:1em;
    padding-bottom: 0.5em;
}
#foot_navi .addbox{
text-align:justify;
padding:10em 0 5em 0;
}
#foot_navi .logo{}
#foot_navi .txt{
padding:1em 0;
}
#foot_navi .maplink{}
#foot_navi .maplink a{
display:inline-block;
border:1px solid #d3d3d3;
padding:0.3em 5em;
font-size:2rem;
font-weight:bold;
}
#foot_navi .maplink a:hover{
border:1px solid #a0a7fa;
background-color:rgba(255,255,255,0.2);
}
#foot_navi .copyright{
text-align:left;
}

/*------------------------------------------------------------------------------------detail*/
#mainimage{
    color: #fff;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 26.66%;
}
#mainimage h2{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
}
#mainimage h2 p{
    font-size: 8rem;
    line-height: 1;
}
#pankuzu{
    text-align: right;
    padding: 1.5em 5em;
}
#pankuzu p{
    font-size: 1.4rem;
    font-weight: 400;
}
h3.title{
    display: flex;
    align-items: center;
    margin: 3em 0;
}
h3.title .titlemin{
    font-size: 1.5rem;
    font-weight: 400;
}
h3.title .titlemin::after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 0 1em;
    width: 3em;
    border-bottom: 1px solid #bfbfbf;
}
h3.title .fw_mplus{
    font-size: 2.8rem;
    font-weight: 500;
}
#detail{
    padding-bottom: 10em;
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
/*base*/
html {
	font-size: 0.64vw;
}
body {
	min-width: 100%;
}

.container{
max-width:100%;
padding:0 1.5em;
margin:0 auto;
}
/*------------------------------------------------------------------------------------header mini*/
.popupNavi {
	min-width:100%;
}
}

@media only screen and (max-width: 767px) {


html{
	font-size:2.1vw;
	}

body {
	min-width: 100%;
}

.container{
max-width:100%;
padding:0 1.5em;
margin:0 auto;
}
/*------------------------------------------------------------------------------------header sp*/
#header {
  padding:1.3em 1em;
}
#header h1 img{
height:auto;
  width: 11em;
}
#header ul{
display:none;
}

/*------------------------------------------------------------------------------------drawer sp*/
#drawer{
padding:3em 2em;
}
#drawer .logo_n{
display:none;
}
#drawer .navibox{
max-width:100%;
margin:0 auto;
display:flex;
flex-wrap:wrap;
justify-content: space-between;
}
#drawer .navibox ul{
width:100%;
}

/*------------------------------------------------------------------------------------footer sp*/

#foot_navi{
font-size:1.5rem;
padding:2em 1.5em;
}
    .foot_flex{
        display: block;
        padding-top: 4em;
    }
.footbox{
    display: inline-block;
    width: auto;
}
#foot_navi .recruit a{
justify-content:space-between;
}
#foot_navi .recruit .icon{
width:5em;
}
#foot_navi .recruit .title{
}
#foot_navi .recruit .title span{
font-size:3.2rem;
line-height:1;
}
#foot_navi .recruit .arrow{
font-size:3.5rem;
}
#foot_navi a{
color:#d3d3d3;
}
#foot_navi ul{
display:none;
}
#foot_navi .addbox{
padding:3em 0 4em 0;
    text-align: center;
}
#foot_navi .logo{}
#foot_navi .txt{
padding:1.5em 0;
}
#foot_navi .copyright{
text-align:center;
    line-height: 1.3;
}
/*------------------------------------------------------------------------------------detail p*/
#mainimage{
    padding-top: 60%;
}
#mainimage h2{
    top: 48%;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
}
#mainimage h2 p{
    font-size: 6rem;
    line-height: 1;
}
#pankuzu{
    padding: 1em;
}
#pankuzu p{
}
h3.title{
    display: flex;
    align-items: center;
    margin: 4em 0 2em 0;
}
h3.title .titlemin{
    font-size: 1.2rem;
}
h3.title .titlemin::after{
    margin: 0 1em;
    width: 2em;
}
h3.title .fw_mplus{
    font-size: 2.4rem;
}

}

@media only screen and (min-width: 768px) {

.mf_fon{
transform: rotate(0.03deg);
}

/* Grow Rotate */
a img.overbig {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
a:hover img.overbig, a:focus img.overbig, a:active img.overbig {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}


}