@charset "UTF-8";
/* CSS Document */

:root {
	--color-white: #fff;
	--color-black: #000;

	--color-basic: #2558A8;
	--coclor-text: #333;
	--color-sub1: #088E8E;
	--color-sub2: #FD0403;
	--color-bg: #EFF2F8;
}

.font-01 {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.font-02 {
  font-family: "Big Shoulders", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

:root {
    --delay: 0.5s;
    --duration: 500ms;
    --iterations: 1;
}


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

	common css

------------------------------------------------------*/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html { width: 100%; overflow: scroll; font-size: 10px; }
html.fixed {}
html.fixed body { height: 100%; position: fixed; width: 100%;}
body { font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", " 游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic,メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: var(--coclor-text); line-height: 2; background-color: #fff; overflow: hidden;}
.container { width: 100%; margin-left: auto; margin-right: auto; position: relative;}
ul { list-style: none; }
ol { list-style: decimal; }
img { vertical-align: bottom; width: auto; max-width: 100%; height: auto; }
/*a:link { color: #000; text-decoration: none; }
a:visited { color: #000; }*/
a.fade:hover { text-decoration: none; background-color: #fff; color: var(--coclor-text); -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }

.pc { display:block; }
.sp { display:none; }

main { display: block; }

@media (min-width: 768px) {
	body{ /*min-width: 1100px;*/ }
	.container { max-width: 1600px; }
	.w800 { max-width: 800px; margin-left: auto; margin-right: auto;}
    .w920 { max-width: 920px; margin-left: auto; margin-right: auto;}
	.w960 { max-width: 960px; margin-left: auto; margin-right: auto;}

	a:hover { text-decoration: underline; }
	a img:hover { opacity: 0.8; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }
}

@media screen and (min-width:768px) and ( max-width:1080px) {
    .container { width: -webkit-calc(100% - 40px); width: calc(100% - 40px);}
}

@media (max-width: 767px) {
	body{ }
	.container { margin-left: 20px; margin-right: 20px; width: auto; }
	.pc { display: none !important; }
	.sp { display: block !important; }

}



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

    pageTop

------------------------------------------------------*/
a#page-top { font-size: 1.6rem; position: fixed; right: 20px; bottom: 60px; z-index: 1000; cursor: pointer; overflow: hidden;  width: 60px; height: 40px; text-decoration: none; padding: 5px;  background: #000; opacity: 0.5; text-align: center; border-radius: 5px; color: #FFF; }


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

	header

------------------------------------------------------*/
header {}
header .l_col-head {}

#head-logo {}
#head-logo a { color: var(--color-black); font-weight: 700; text-decoration: none; }
#head-logo img { vertical-align: middle; margin-right: 15px;}

#g-navi {}
#g-navi .l_col-navi {}
#g-navi .l_col-navi li {}
#g-navi .l_col-navi li a { text-decoration: none; color: var(--color-basic); font-size: 1.6rem; font-weight: 700;}


@media (min-width: 768px) {
	header { padding: 0 40px;}
	header .l_col-head { height: 100px; align-items: center;}

	#head-logo a { font-size: 1.8rem; }
	#head-logo img { width: 70px;}

	#g-navi .l_col-navi li:not(:last-child) { margin-right: 30px;}
}

@media screen and (min-width:768px) and ( max-width:1000px) {
    header { padding: 0 20px;}
	#g-navi .l_col-navi li:not(:last-child) { margin-right: 20px;}
}

@media (max-width: 767px) {
	header .l_col-head { height: 40px; line-height: 40px; }

	#head-logo { margin-bottom: 0; padding-left: 10px;}
	#head-logo img { width: 34px;}

	#g-navi { background: linear-gradient(90deg, #0071D3 0%, #2558A8 100%); position: absolute; z-index: 1; width: 100%; height: calc(100% - 40px); padding: 40px; top: -100vh; }
	#g-navi .l_col-navi li { width: 100%; margin-bottom: 0; border-bottom: 1px solid var(--color-white); position: relative;}
	#g-navi .l_col-navi li::before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: var(--color-white); left: 0; top: calc(50% - 2px); }
	#g-navi .l_col-navi li a { color: var(--color-white); display: block; width: 100%; height: 100%; padding: 5px 10px;}

	#g-navi.active { top: 40px;}
}



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

	menu-btn

------------------------------------------------------*/
#menu-btn { width: 32px; height: 32px; position: absolute; top: 5px; right: 5px; cursor: pointer; z-index: 100; }
#menu-btn span { background-color: var(--color-basic); display: block; height: 2px; position: relative; transition: all 0.15s; width: 22px; left: 0; right: 0; margin: auto; }

#menu-btn span:nth-child(1) { top: 7px;}
#menu-btn span:nth-child(2) { top: 13px;}
#menu-btn span:nth-child(3) { top: 19px;}

#menu-btn.active span:nth-child(2) { opacity: 0;}
#menu-btn.active span:nth-child(1) { transform: translateY(8px) rotate(-45deg); }
#menu-btn.active span:nth-child(3) { transform: translateY(-8px) rotate(45deg); }

@media (min-width: 768px) {
	#menu-btn { display: none;}
}

@media (max-width: 767px) {

}


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

	footer

------------------------------------------------------*/
footer {}
footer .l_col-foot {}

#foot-logo {}
#foot-logo a { color: var(--color-black); font-weight: 700; text-decoration: none; }
#foot-logo img { vertical-align: middle; margin-right: 15px;}

#copy { color: var(--color-basic); font-weight: 400; line-height: normal;}

@media (min-width: 768px) {
	footer { padding: 0 40px;}
	footer .l_col-foot { height: 100px; align-items: center;}

	#foot-logo a { font-size: 1.8rem; }
	#foot-logo img { width: 70px;}

	#copy { font-size: 1.4rem;}
}

@media (max-width: 767px) {
	footer { padding: 10px 0;}

	#foot-logo { margin-bottom: 5px;}
	#foot-logo a { font-size: 1.2rem;}
	#foot-logo img { width: 34px;}

	#copy { font-size: 1.2rem; margin-bottom: 0; width: 100%;}

}


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

	visual

------------------------------------------------------*/
#visual { position: relative; overflow: hidden; margin-bottom: 0;}
#visual > img {
object-fit: cover;
width: 100%;
height: 100%;

opacity: 0;

}
#visual > img.animation-on {
animation: fadeIn-a calc(var(--duration) * 2) ease 0.5s var(--iterations) normal forwards;
}
#visual div {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 760px;

}
#visual figure { }
#visual figure img {  height: auto;}
#visual h1 {
color: var(--color-white);
text-align: center;
text-shadow: 0 0 14px rgba(0, 0, 0, 0.55);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.05em;
}



@media (min-width: 768px) {
	#visual { height: 840px;}
	#visual div { height: 300px; top: -150px; bottom: 0;}
	#visual figure { margin-bottom: 45px;}
	#visual figure img { max-width: calc(398px/2);}
	#visual h1 { font-size: 3rem;}
}

@media (max-width: 767px) {
	#visual div { height: 240px; top: -110px;}
	#visual figure { margin-bottom: 20px;}
	#visual figure img { max-width: 150px;}
	#visual h1 { font-size: 2rem;}
}




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

	about

------------------------------------------------------*/
#about { background-color: var(--color-basic); border-bottom: 20px solid #1C4484; text-align: center; }
#about h2 { color: var(--color-white); font-weight: normal;}
#about h2 span { color: #25539B; border-radius: 5px; background-color: var(--color-white);  display: inline-block; font-weight: bold; line-height: 2;}

@media (min-width: 768px) {
	#about { min-height: 200px; padding-top: 50px;}
	#about h2 { line-height: 2.8; font-size: 1.8rem;}
	#about h2 span { margin: 0 10px; padding: 1px 12px;}
}

@media (max-width: 767px) {
	#about { padding: 15px 0; margin-bottom: 65px;}
	#about h2 { font-size: 1.3rem; white-space: nowrap; line-height: 2.5;}
	#about h2 span { margin: 0 2px; padding: 1px 6px;}
}


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

	title

------------------------------------------------------*/
.title-a { text-align: center;}
.title-a .title { color: var(--color-basic); font-weight: 700; line-height: 1; letter-spacing: 0.05em; position: relative; }
.title-a .title::before ,
.title-a .title::after { content: "";  border-radius: 50%; background-color: var(--color-sub2); position: absolute; left: 0px; right: 20px; top: auto; margin: auto; }
.title-a .title::after { right: 0; left: 20px; background-color: var(--color-sub1);}
.title-a .sub { color: #B6B6B6; font-style: normal; font-weight: 600; line-height: 1; letter-spacing: 0.1em;}


.title-b { color: var(--color-basic); border-left: 10px solid var(--color-basic); line-height: 1; margin-bottom: 30px; padding-left: 10px; position: relative;}
.title-b::before { content: ""; position: absolute; width: calc(100% - 275px); height: 1px; background-color: var(--color-basic); right: 0; top: 50%;}
.title-b .title { font-weight: 700; display: inline-block;}
.title-b .title::after { content: ""; width: 1px; height: 1em; background-color: var(--color-basic); display: inline-block; transform: rotate(45deg); margin-left: 14px; margin-right: 12px; vertical-align: -3px; }
.title-b .sub { font-weight: 600; line-height: 1; letter-spacing: 0.05em; display: inline-block; vertical-align: 1px;}




.title-c { color: var(--color-basic); font-weight: 700; line-height: 1;}


.title-d { color: var(--color-white); text-align: center;}
.title-d p {  font-weight: 700; position: relative;}
.title-d p::before ,
.title-d p::after {
content: "";
    width: 1px;
    height: 1.2em;
    background-color: #fff;
    display: inline-block;
    transform: rotate(315deg);
    margin-right: 20px;
    vertical-align: sub;
}
.title-d p::after { transform: rotate(45deg); margin-right: 0; margin-left: 15px;}
.title-d .title {  font-weight: 700;}


@media (min-width: 768px) {
	.title-a .title { font-size: 3.2rem; margin-bottom: 35px;}
	.title-a .title::before ,
	.title-a .title::after { width: 10px; height: 10px; bottom: -22px;}
	.title-a .sub { font-size: 2.4rem;}

	.title-b .title { font-size: 2.4rem;}
	.title-b .sub { font-size: 1.8rem;} 

	.title-c { font-size: 2.4rem;}

.title-d p { font-size: 1.8rem;}
.title-d .title { font-size: 4rem;}


}

@media (max-width: 767px) {
	.title-a .title { font-size: 2.4rem; margin-bottom: 32px;}
	.title-a .title::before ,
	.title-a .title::after { width: 8px; height: 8px; bottom: -20px;}
	.title-a .sub { font-size: 1.6rem;}

	.title-b .title { font-size: 2rem;}
	.title-b .sub { font-size: 1.4rem;}

	.title-c { font-size: 1.8rem;}


.title-d p { font-size: 1.6rem;}
.title-d .title { font-size: 2.8rem;}


}


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

	business

------------------------------------------------------*/
#business {}
#business .title-a { margin-bottom: 35px;}

#business .contents { background-color: var(--color-bg); padding: 35px 0 70px;}
#business .contents .text { margin-bottom: 40px;}
#business .contents .text p { font-size: 16px;}
#business .l_col-3 {}
#business .l_col-3 section { margin-bottom: 0;}
#business .l_col-3 section:not(:last-child) {}
#business .l_col-3 section .deco { color: var(--color-basic); text-align: center; letter-spacing: 0.1em; line-height: 1;}
#business .l_col-3 section .deco span { color: var(--color-sub2); display: block; letter-spacing: 0.1em; margin-bottom: 10px;}
#business .l_col-3 section .title { color: var(--color-white); font-size: 1.6rem; font-weight: 700; text-align: center; background-color: var(--color-basic);}
#business .l_col-3 section figure {}
#business .l_col-3 section figure img { width: 100%;}
#business .l_col-3 section .text { margin-bottom: 0;}
#business .l_col-3 section .text p { text-align: left;}



@media (min-width: 768px) {

	#business .contents .text p { text-align: center;}
	#business .l_col-3 section { width: calc((100% - 2px) / 3);}
	#business .l_col-3 section .deco { margin-bottom: 25px; font-size: 5rem;}
	#business .l_col-3 section .deco span { font-size: 1.6rem;}
	#business .l_col-3 section .title { height: 30px; line-height: 1.9;}
	#business .l_col-3 section figure { margin-bottom: 30px;}
	#business .l_col-3 section .text { padding: 0 25px;}
}

@media screen and (min-width:768px) and ( max-width:1000px) {
	#business .l_col-3 section:last-child .deco { font-size: 4.2rem; height: 76px; letter-spacing: 0;}
	#business .l_col-3 section:last-child .deco span { margin-bottom: 16px;}
}


@media (max-width: 767px) {
	#business { margin-bottom: 30px;}

	#business .l_col-3 section:not(:last-child) { margin-bottom: 60px;}
	#business .l_col-3 section .deco { font-size: 4rem; margin-bottom: 20px;}
	#business .l_col-3 section .deco span { font-size: 1.4rem;}
	#business .l_col-3 section figure { margin-bottom: 15px;}
	#business .l_col-3 section .text p { font-size: 1.4rem;}
}


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

	outline

------------------------------------------------------*/
#outline {}
#outline .title-a { margin-bottom: 35px;}
#outline .container {}
#outline .container > .text { }
#outline .container > .text p { font-size: 1.6rem;}

@media (min-width: 768px) {
	#outline .container > .text { margin-bottom: 80px; text-align: center;}
}

@media (max-width: 767px) {
	#outline { margin-bottom: 150px;}
	#outline .container > .text { margin-bottom: 75px;}
}


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

	message

------------------------------------------------------*/
#message { position: relative;}
#message::before { content: ""; position: absolute; width: 100vw; height: 100%; background-color: var(--color-white); left: 0; top: 0; z-index: -1; box-shadow: 10px 10px 45px 0 rgba(0, 0, 0, 0.15);}

#message .title-b {}
#message .l_col-2 { border-bottom: 1px solid var(--color-basic); padding-bottom: 40px;}
#message .l_col-2 figure { position: relative;}
#message .l_col-2 figure img { position: relative;}
#message .l_col-2 figure::before { content: ""; position: absolute; background-color: var(--color-bg); left: 0; top: 0; z-index: 0}
#message .l_col-2 > div {}
#message .l_col-2 .title-c {}
#message .l_col-2 .text {}
#message .l_col-2 .text p {}


@media (min-width: 768px) {
	#message { max-width: 1160px; margin-left: auto; margin-right: auto; padding: 30px 0 50px 40px;}
	#message .l_col-2 figure { text-align: right; max-width: 470px; width: 45%; padding-top: 50px;}
	#message .l_col-2 figure::before { width: calc(100% - 50px); height: calc(100% - 50px);}
	#message .l_col-2 figure img { max-width: 420px;}
	#message .l_col-2 > div { width: 55%; max-width: 560px;}
	#message .l_col-2 .title-c { margin-bottom: 30px;}
	#message .l_col-2 .text p { font-size: 1.6rem;}
	#message .l_col-2 .text p:first-child { margin-bottom: 0;}

	#message .l_col-2 .text a { display: none;}
}

@media screen and (min-width:1080px) and ( max-width:1160px) {
	#message .l_col-2 > div { padding-right: 20px; }
}

@media screen and (min-width:768px) and ( max-width:1160px) {
	#message .l_col-2 figure { width: calc(50% - 10px);}
	#message .l_col-2 figure img { width: calc(100% - 50px);}
	#message .l_col-2 > div { width: calc(50% - 10px);}
}


@media (max-width: 767px) {
	#message { padding:20px 0 30px 20px; margin-bottom: 170px;}
	#message .title-b::before { width: calc(100% - 230px);}
	#message .l_col-2 figure {padding-top: 30px; max-width: calc(232px + 30px); text-align: right; margin-left: auto; margin-right: auto; margin-bottom: 35px;}
	#message .l_col-2 figure img { max-width: 232px;}
	#message .l_col-2 figure::before { width: calc(100% - 30px); height: calc(100% - 30px);}
	#message .l_col-2 .title-c { margin-bottom: 20px;}
	#message .l_col-2 .text p { font-size: 1.4rem;}
	#message .l_col-2 .text .more { display: none;}
	#message .l_col-2 .text a { font-size: 1.4rem;}
}


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

	philosophy

------------------------------------------------------*/
#philosophy { position: relative; background-color: var(--color-white);}
#philosophy::before { 
	    content: "";
    position: absolute;
    width: 100vw;
    height: 640px;
    background: url(../images/bg_philosophy.jpg) no-repeat center center / cover;
    right: -230px;
    top: -305px;
    z-index: -2;
 }
#philosophy::after {
    content: "";
    position: absolute;
    width: 800px;
    height: 100px;
    background-color: var(--color-basic);
    z-index: -3;
    right: -450px;
    bottom: -215px;
 }

#philosophy .title-b {}
#philosophy .title-b::before { width: calc(100% - 290px);}
#philosophy .text { text-align: center;}
#philosophy .text p { font-size: 1.6rem;}


@media (min-width: 768px) {
	#philosophy { max-width: 700px; margin-left: auto; margin-right: auto; box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.15); padding: 30px; margin-bottom: 320px;}
}

@media screen and (min-width:768px) and ( max-width:1160px) {
	#philosophy::before { right: -34px;}
}

@media (max-width: 767px) {
	#philosophy { padding: 20px; margin-bottom: 270px;}
	#philosophy::before { right: 0; left: -20px; top: -265px;}
	#philosophy::after { width: 50vw; right: -20px;}
	#philosophy .title-b::before { width: calc(100% - 240px);}
}



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

	profile

------------------------------------------------------*/
#profile { position: relative;}
#profile::before { content: ""; position: absolute; width: 100vw; height: 100%; background-color: var(--color-white); left: 0; top: 0; z-index: -1; box-shadow: 10px 10px 45px 0 rgba(0, 0, 0, 0.15);}
#profile::after {
    content: "";
    position: absolute;
    background-color: var(--color-bg);
    z-index: -2;
 }


#profile .title-b {}
#profile .title-b::before { width: calc(100% - 240px);}
#profile div.l_col-2 { border-bottom: 1px solid var(--color-basic); padding-bottom: 40px;}
#profile div.l_col-2 > div {}
#profile dl {}
#profile dl > div {}
#profile dl dt { color: var(--color-sub1); font-size: 1.6rem; font-weight: 400;}
#profile dl dt::before { content: "●"; font-size: 85%; padding-right: 5px; vertical-align: 1px;}
#profile dl dd { font-size: 1.6rem;;}
#profile table {}
#profile table tr {}
#profile table th { display: list-item; width: 100%; list-style-type: none; text-align: left; color: var(--color-sub1);}
#profile table td { display: list-item; width: 100%; list-style-type: none;}
#profile table tr:not(:last-child) td { border-bottom: 1px dashed var(--color-basic); padding-bottom: 15px; margin-bottom: 15px;}


@media (min-width: 768px) {
	#profile { max-width: 1160px; margin-left: auto; margin-right: auto; padding: 40px 0 50px 40px; margin-bottom: 250px;}
	#profile::after { width: 800px; left: -220px; height: 350px; bottom: -100px;}
	#profile dl > div:nth-child(n+3) { margin-top: 20px;}
	#profile dl dt {}
	#profile dl dd {}
	#profile table {}
	#profile table tr {}
	#profile table th {}
	#profile table td {}
}

@media (max-width: 767px) {
	#profile { padding: 20px 0 20px 20px;}
	#profile::after { width: 50vw; left: -20px; height: 100px; bottom: -50px;}
	#profile .title-b {}
	#profile .title-b::before { width: calc(100% - 205px);}
	#profile div.l_col-2 {}
	#profile div.l_col-2 > div {}
	#profile dl {}
	#profile dl > div {}
	#profile dl dt {}
	#profile dl dd {}
	#profile table {}
	#profile table tr {}
	#profile table th {}
	#profile table td {}
}


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

	recruit

------------------------------------------------------*/
#recruit { background-color: var(--color-bg);}
#recruit .bg-visual { background: url(../images/st_recruit.jpg) no-repeat center center / cover; }
#recruit .bg-visual .title-a {}
#recruit .bg-visual .title-a .title { color: var(--color-white);}

#recruit .container {}
#recruit .container > .text { font-size: 1.6rem; margin-bottom: 30px;}
#recruit .title-c { text-align: center; color: var(--color-sub1); }
#recruit .l_col-2 {}
#recruit .l_col-2 section { background-color: #fff; text-align: center; margin-bottom: 0;}
#recruit .merit { color: var(--color-sub1); font-weight: 700;}
#recruit section .title { color: var(--color-white); font-weight: 700; }
#recruit section .title span { background-color: var(--color-sub1); color: var(--color-white); padding: 8px 20px;}
#recruit figure {}
#recruit figure img {}
#recruit section .text { text-align: left;}
#recruit section .text p { }

#other-links { text-align: center;}
#other-links p { color: var(--color-sub1); font-size: 1.8rem; font-weight: 700; margin-bottom: 20px;}
#other-links a {}
#other-links img { max-width: 640px; width: 100%;}




@media (min-width: 768px) {
	#recruit { padding-bottom: 100px;}
	#recruit .bg-visual { height: 430px; padding-top: 170px; margin-bottom: 45px;}
	#recruit .bg-visual .title-a {}

	#recruit .container {}
	#recruit .container > .text {  text-align: center;}
	#recruit .title-c { margin-bottom: 45px;}
	#recruit .l_col-2 { max-width: 1160px; margin-left: auto; margin-right: auto; margin-bottom: 80px;}
	#recruit .l_col-2 section { padding: 40px;}
	#recruit .merit { font-size: 2rem;}
	#recruit section .title { font-size: 2rem; margin-bottom: 30px;}
	#recruit section .title span {}
	#recruit figure { margin-bottom: 30px;}
	#recruit figure img {}
	#recruit section .text {}
	#recruit section .text p { font-size: 1.6rem;}

	#other-links {}
	#other-links p {}
	#other-links a {}
	#other-links img {}
}

@media (max-width: 767px) {
	#recruit { padding-bottom: 80px; margin-bottom: 50px;}
	#recruit .bg-visual { height: 240px; padding-top: 90px; margin-bottom: 30px;}
	#recruit .bg-visual .title-a {}

	#recruit .container {}
	#recruit .container > .text {}
	#recruit .title-c { margin-bottom: 35px;}
	#recruit .l_col-2 { margin-bottom: 60px;}
	#recruit .l_col-2 section { padding: 15px 20px 20px;}
	#recruit .l_col-2 section:not(:last-child) { margin-bottom: 50px;}
	#recruit .merit { font-size: 1.4rem; margin-bottom: 5px;}
	#recruit section .title { font-size: 1.4rem; margin-bottom: 20px;}
	#recruit section .title span {}
	#recruit figure { margin-bottom: 20px;}
	#recruit figure img {}
	#recruit section .text {}
	#recruit section .text p { font-size: 1.4rem;}

	#other-links {}
	#other-links p {}
	#other-links a {}
	#other-links img {}
}



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

	contact

------------------------------------------------------*/
#contact { margin-bottom: 0;}
#contact .title-a {}
#contact > .text { }
#contact > .text p { font-size: 1.6rem;}
#contact .contents { }
#contact .contents .l_col-2 {}
#contact .contents section { background-color: var(--color-white);}
#contact .contents .title { color: var(--color-white); text-align: center; font-weight: 700; line-height: 1; background-color: #F08800; }

#contact .contents .title::before { content: ""; background: url(../images/icon_kojin.svg) no-repeat left top / cover; display: inline-block; vertical-align: sub; margin-right: 10px;}




#contact .contents .body {}
#contact .contents .text { text-align: center; }
#contact .contents .text p { color: #F08800; font-size: 1.6rem; font-weight: 700;}
#contact .contents .lead { font-style: normal; font-weight: 700; margin-bottom: 5px;}
#contact .contents ul { padding-left: 2em;}
#contact .contents ul li { list-style-type: disc;}
#contact .contents .contact { text-align: center; padding-top: 10px; letter-spacing: 0.05em;}
#contact .contents .contact a { font-size: 1.4rem; color: var(--color-basic);}

#contact #hojin .title { background-color: var(--color-sub1);}
#contact #hojin .title::before { width: 38px; height: 30px; background: url(../images/icon_hojin.svg) no-repeat left top / cover;;}
#contact #hojin .text p { color: var(--color-sub1);}

#contact-information { background-color: var(--color-basic);  margin-bottom: 0;  position: relative;}
#contact-information::before {
    content: "";
    position: absolute;
    top: -49px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 0vw solid transparent;
    border-right: 50vw solid transparent;
    border-bottom: 50px solid var(--color-basic);
}
#contact-information::after {
    content: "";
    position: absolute;
    top: -49px;
    right: 0;
    width: 0;
    height: 0;
    border-left: 50vw solid transparent;
    border-right: 0vw solid transparent;
    border-bottom: 50px solid var(--color-basic);
}


#contact-information .container {}
#contact-information .title-d { margin-bottom: 35px;}
#contact-information dl {}
#contact-information dl div { color: var(--color-white); justify-content: center; color: var(--color-basic); text-align: center;  font-weight: 700;
        background-color: #fff;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 10px;

}
#contact-information dl div:not(:last-child) { margin-bottom: 20px;}
#contact-information dl dt {}
#contact-information dl dt::before { content: ""; background: url(../images/icon_tel.svg) no-repeat left top / cover; display: inline-block;  margin-right: 10px;}
#contact-information dl dd {}
#contact-information dl dd a { color: var(--color-basic); text-decoration: none;}
#contact-information dl div:last-child dt::before { background: url(../images/icon_mail.svg) no-repeat left top / cover; vertical-align: baseline;}

#gmap {}
#gmap iframe {}




@media (min-width: 768px) {
	#contact {}
	#contact .title-a { margin-bottom: 50px;}
	#contact > .text { text-align: center; margin-bottom: 70px;}
	#contact > .text p {}
	#contact .contents { background: url(../images/bg_contact.jpg) no-repeat center center / cover; padding-top: 50px;}
	#contact .contents .l_col-2 { max-width: 1160px;}
	#contact .contents section {}
	#contact .contents .title { height: 80px; line-height: 80px; font-size: 2.4rem;}
	#contact .contents .title::before { width: 38px; height: 34px; }
	#contact .contents .body { padding: 20px 40px 40px;}
	#contact .contents .text { margin-bottom: 30px;}
	#contact .contents .text p {}
	#contact .contents .lead { font-size: 18px;}
	#contact .contents ul {}
	#contact .contents ul li { font-size: 1.6rem;}
	#contact .contents .contact { display: none;}

	#contact-information { padding-top: 80px; padding-bottom: 100px;}
	#contact-information .container {}
	#contact-information .title-d {}
	#contact-information dl {}
	#contact-information dl div { font-size: 3.6rem; height: 112px; line-height: 112px;}
	#contact-information dl dt {}
	#contact-information dl dd {}
	#contact-information dl dt::before { width: 38px; height: 38px; vertical-align: sub;}
	#contact-information dl div:last-child dt::before { width: 38px; height: 29px;} 

	#gmap {}
	#gmap iframe {}
}

@media (max-width: 767px) {
	#contact {}
	#contact .title-a { margin-bottom: 30px;}
	#contact > .text { margin-bottom: 50px;}
	#contact > .text p {}
	#contact .contents {}
	#contact .contents .l_col-2 {}
	#contact .contents section {}
	#contact .contents .title { height: 50px; line-height: 50px; font-size: 1.8rem;}
	#contact .contents .title::before { width: 32px; height: 29px; }
	#contact .contents .body { padding: 20px 15px;}
	#contact .contents .text { margin-bottom: 20px;}
	#contact .contents .text p {}
	#contact .contents .lead { font-size: 16px;}
	#contact .contents ul {}
	#contact .contents ul li { font-size: 1.4rem;}

	#kojin { position: relative; margin-bottom: 120px;}
	#kojin::before {
        content: "";
        background: url(../images/bg_contact-kojin.png) no-repeat center center / cover;
        position: absolute;
        width: calc(100% + 40px);
        height: calc(100% + 120px);
        z-index: -1;
        left: -20px;
        top: -20px;
	}
	#hojin { position: relative; margin-bottom: 120px;}
	#hojin::before {
        content: "";
        background: url(../images/bg_contact-hojin.png) no-repeat center center / cover;
        position: absolute;
        width: calc(100% + 40px);
        height: calc(100% + 140px);
        z-index: -1;
        left: -20px;
        top: -20px;
	}


	#contact-information { padding-top: 60px; padding-bottom: 60px;}
	#contact-information .container {}
	#contact-information .title-d { margin-bottom: 20px;}
	#contact-information dl {}
	#contact-information dl div { font-size: 2.4rem; height: 80px; line-height: 80px;}
	#contact-information dl dt {}
	#contact-information dl dd {}
	#contact-information dl dt::before { width: 24px; height: 24px; vertical-align: text-bottom;}
	#contact-information dl div:last-child dt::before { width: 24px; height: 18px;}

	#gmap {}
	#gmap iframe { height: 480px;}
}



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



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


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


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

	animation

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

/**
	js-fade-up
	animation
*/
.js-fade-up { opacity: 0;}
.js-fade-up.animation-on {
	animation-name: basic-animation;
	animation-duration: var(--duration);
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}
/**
	下から上
*/
@keyframes basic-animation{
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/**
	fadeIn-a
	animation
*/
@keyframes fadeIn-a {
    0% {
        opacity: 0;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


@media (min-width: 768px) {
	.delay01 { animation-delay: 0.1s; }
	.delay02 { animation-delay: 0.2s; }
	.delay03 { animation-delay: 0.3s; }
	.delay04 { animation-delay: 0.4s; }
	.delay05 { animation-delay: 0.5s; }
	.delay06 { animation-delay: 0.6s; }
	.delay07 { animation-delay: 0.7s; }
	.delay08 { animation-delay: 0.8s; }
	.delay09 { animation-delay: 0.9s; }
	.delay10 { animation-delay: 1.0s; }
	.delay11 { animation-delay: 1.1s; }
	.delay12 { animation-delay: 1.2s; }
	.delay13 { animation-delay: 1.3s; }
	.delay14 { animation-delay: 1.4s; }
	.delay15 { animation-delay: 1.5s; }
	.delay16 { animation-delay: 1.6s; }
	.delay17 { animation-delay: 1.7s; }
	.delay18 { animation-delay: 1.8s; }
	.delay19 { animation-delay: 1.9s; }
	.delay20 { animation-delay: 2.0s; }
}

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



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


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}