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

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

	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; }
body { font-size: 1.6rem; font-family: "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #000; line-height: 1.5; 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.fade:hover { text-decoration: none; background-color: #fff; color: #333; -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; margin-bottom: 50px; }

@media (min-width: 768px) {
	body{ min-width: 1100px; }
	.container { max-width: 1100px; }

	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) {
	.container { margin-left: 20px; margin-right: 20px; width: auto; }
	.pc { display: none; }
	.sp { display: block; }
}


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

    pageTop

------------------------------------------------------*/
#page-top { position:fixed; bottom:20px; right:20px; font-size:1.4rem; z-index:999; }
#page-top a { background: linear-gradient(to right, #0093c2, #34957c); text-decoration: none; color: #34957c; width: 55px; height: 55px; line-height: 55px; text-align: center; display: block; position: relative; z-index: 1;}
#page-top a::before { content: ''; position: absolute; width: 66%; height: 66%; border-radius: 50%; background-color: #fff; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }

@media (min-width: 768px) {
    #page-top a:hover { opacity: 0.8; }
}

@media (max-width: 767px) {

}


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

	header

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


@media (min-width: 768px) {

}

@media (max-width: 767px) {
    .menuBtn { position: absolute; top: 0; right: 0; width: 38px; height: 38px; padding: 8px; z-index: 9999; }
    .menuBtn span { display: block; width: 22px; height: 4px; border-radius: 4px;  background: #000; }
    .menuBtn span:not(:last-of-type) { margin-bottom: 5px; }
    .spMenu { background-color: rgba(63, 60, 60, 0.55); position: absolute; width: 100%; z-index: 9998; left: 0; top: 0; padding-top: 30px; -moz-transform: translateY(-280px); -webkit-transform: translateY(-280px); -o-transform: translateY(-280px); -ms-transform: translateY(-280px); -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); }
    .spMenu li { text-align: center; }
    .spMenu li:not(:last-of-type) { border-bottom: 1px solid #fff; }
    .spMenu li a { color: #fff; text-decoration: none; font-family: 游明朝, YuMincho, HG 明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; display: block; padding: 5px; }
    .spMenu li:first-of-type a img { max-width: 23px; }
    .spMenu.open { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); }

    .menuBtn:not(.first_read) span:nth-of-type(1) {
		animation: menu-bar01 .55s forwards;
	  }
	  @keyframes menu-bar01 {
		0% {
		  transform: translateY(9px) rotate(45deg);
		}
		50% {
		  transform: translateY(9px) rotate(0);
		}
		100% {
		  transform: translateY(0) rotate(0);
		}
	  }
	  .menuBtn:not(.first_read) span:nth-of-type(2) {
		-webkit-transition: all .25s .25s;
		-o-transition: all .25s .25s;
		transition: all .25s .25s;
		opacity: 1;
	  }
	  .menuBtn:not(.first_read) span:nth-of-type(3) {
		animation: menu-bar02 .55s forwards;
	  }
	  @keyframes menu-bar02 {
		0% {
		  transform: translateY(-9px) rotate(-45deg);
		}
		50% {
		  transform: translateY(-9px) rotate(0);
		}
		100% {
		  transform: translateY(0) rotate(0);
		}
	  }
	  .menuBtn.open span:nth-of-type(1) {
		animation: active-menu-bar01 .55s forwards;
	  }
	  @keyframes active-menu-bar01 {
		0% {
		  transform: translateY(0) rotate(0);
		}
		50% {
		  transform: translateY(9px) rotate(0);
		}
		100% {
		  transform: translateY(9px) rotate(45deg);
		}
	  }
	  .menuBtn.open span:nth-of-type(2) {
		opacity: 0;
	  }
	  .menuBtn.open span:nth-of-type(3) {
		animation: active-menu-bar03 .55s forwards;
	  }
	  @keyframes active-menu-bar03 {
		0% {
		  transform: translateY(0) rotate(0);
		}
		50% {
		  transform: translateY(-9px) rotate(0);
		}
		100% {
		  transform: translateY(-9px) rotate(-45deg);
		}
	  }

}


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

    footer

------------------------------------------------------*/
footer { background-color: #474b97; color: #fff;}
footer .inner ul { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
footer .inner ul li { font-size: 1.6rem; text-align: center; border-bottom: 2px solid #fff; border-top: 4px solid #fff; padding: 18px 5px 12px; position: relative;}
footer .inner ul li::before { content: ''; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #fff; position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 10px; height: 10px; }
footer .inner ul li a { color: #fff; text-decoration: none;}
footer .inner .logo { margin-bottom: 10px;}
footer .inner .logo img { width: 100%; max-width: 306px;}
footer .inner .logo + p { font-size: 1.3rem; letter-spacing: 0.06em; }

#copy { text-align: center; font-size: 0.9rem; }


@media (min-width: 768px) {
    footer { padding-top: 75px; padding-bottom: 30px;}
	footer .inner { margin-bottom: 45px; display:-webkit-box; display:-ms-flexbox; display:flex; }
    footer .inner nav { width: calc((100% - 436px) - 50px);}
    footer .inner ul li { width: 256px; }
    footer .inner ul li:first-child { margin-right: 60px;}
    footer .inner ul li a:hover { text-decoration: underline;}
    footer .inner nav+div { /*width: 306px;*/ padding-left: 150px;}

}

@media (max-width: 767px) {
    footer { padding-top: 35px; padding-bottom: 20px;}
    footer .inner { margin-bottom: 10px;}
    footer .inner nav { width: 100%; margin-bottom: 35px;}
    footer .inner ul li { width: calc(50% - 12px); max-width: 256px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
    footer .inner nav+div { width: 100%; text-align: center; }

}