@charset "UTF-8";

#blockimg480 { display: none; }

/* CSS Document */

/* ************************************************** */
/* HEADER  RAYOUT */
/* ************************************************** */
@media screen and (max-width:1500px) {
	.head .head_bar .btn {
		width: 150px;
		height: 40px;
		line-height: 40px;
	}
	.head .head_bar .btn a {
		border-radius: 20px 0 0 20px;
	}
	.head .head_bar .btn.entry a {
		border-radius: 0 20px 20px 0;
	}

	.contents .main-img h1.title {
		width: 35%;
		height: 6vw;
		left:-62px;
		font-size: 3vw;
		line-height: 6vw;
	}
}


/* ************************************************** */
/* PC  Display */
/* ************************************************** */
@media screen and (max-width:1100px) {
	.wrpper-main {
		margin: 0 5%;
		width: 90%;
	}
	.head .head_bar {
		top: 122px;
		right: 10px;
		width: 40px;
	}
	.head .head_bar .btn {
		width: 40px;
		height: 150px;
		line-height: 20px;
		margin-bottom: 5px;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		align-items: center;
	}
	.head .head_bar .btn a {
		width: 40px;
		border-radius: 20px 20px 0 0;
		padding: 5px 10px 5px 0;
	}
	.head .head_bar .btn.entry a {
		border-radius: 0 0 20px 20px;
	}
}


/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 980px */
/* **************************************************************** */
@media only screen and (max-width:980px){
	.head .logo-common {
		width: 250px;
		height: 100px;
		background-size: 250px;
	}
	.head .logo-common img { width: 170px;margin: 10px auto 0; }
	.head .logo-common a { font-size: 15px; }

	.contents .main-img h1.title { 
		top:180px;
	}

	.footer .btn {
		width: 80%;
		margin: 80px 10% 30px;
		height: auto;
	}
	.footer .btn a { height: 100px;background-size: 30px; }
	.footer .btn a .title{ top: 25px; }
	.footer .btn a .title span { font-size: 1.5vw; padding-top: 10px; }
	.footer .blog { width: 80%;margin: 0 10% 100px; height: auto; }
	.footer .blog a {
		width: 100%;
		margin: 0 0 30px;
		height: 100px;
	}
	.footer .blog a .title{ top: 25px; font-size: 3vw; }
	.footer .blog a .title span { font-size: 1.5vw; padding-top: 10px; }

	/*.footer .foot-nav .pc { width: 40%;margin: 0 5%; 50px }*/
	.footer .foot-nav .pc { width: 40%;margin: 0 5% }
	.footer .foot-nav .pc ul li ul { width: 90%;margin: 0 5%; }
	.footer .foot-nav .mb { width: 600px;margin: 100px auto 30px;float: none; }
	.footer .foot-nav .mb ul li { width: 180px;margin: 0 0 0 20px;float: left;text-align: center; }

	.footer .foot-nav .logo {
		text-align: center;
		width: 100%;
		float: left;
		margin: 0 0 30px;
		padding: 0;
	}
	.footer .foot-nav .logo img { width: 100%;max-width: 400px;margin: 0 auto; }
}


/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 880px */
/* **************************************************************** */
@media only screen and (max-width:880px){
	.footer .foot-nav .pc { display: none; }
	.footer .foot-nav .mb { width: 100%;margin: 100px 0 30px;float: left; }
	.footer .foot-nav .mb ul { width: 90%;margin: 50px 5% 100px;float: left; }
	.footer .foot-nav .mb ul li { width: 250px;float: none;margin: 30px auto; }
	.footer .foot-nav ul a { border: #FFF 1px solid;display: block;padding: 10px 0; }
	.footer .foot-nav .logo img { width: 70%;max-width: 250px;margin: 0 auto; }
}


/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 640px */
/* **************************************************************** */
@media screen and (max-width:640px) {
	.contents .main-img h1.title {
		left: 0;
		width: auto;
		height: 7vw;
		font-size: 4vw;
		line-height: 7vw;
	}
}


/* ************************************************** */
/* Smart-Phone Tate(Portrayte) */
/* ************************************************** */
@media only screen and (max-width:580px){
	.footer .btn {
		height: 100px;
		width: calc(80% - 20px);
		margin: 60px 10% 30px;
		margin-right: calc(10% + 20px);
	}
	.footer .btn a { height: 100px;background-size: 30px;background-position: center right 10px; }
	.footer .btn a .title { font-size: 6.5vw; top:25px; }
	.footer .btn a .title span { font-size: 4vw; padding-top: 8px; }

	.footer .blog {
		height: 240px;
		margin: 0px 10% 75px;
		margin-right: calc(10% + 20px);
		width: calc(80% - 20px);
	}
	.footer .blog a {
		height: 100px;
		margin: 0 0 25px;
		width: 100%;
	}
	.footer .blog a .title span { font-size:4vw; }
	.footer .blog a .title { font-size: 6.5vw; top:25px; }

	.footer .foot-nav {	padding: 0; }
}


/* ************************************************** */
/* Smart-Phone Tate(Portrayte) */
/* ************************************************** */
@media only screen and (max-width:480px){
	.head .logo-common {
		width: 200px;
		height: 90px;
		background-size: 93%;
		background-position: top;
	}
	.head .logo-common a { font-size: 12px; }
	.head .logo-common img { width: 65%;margin: 10px auto 0; }

	.contents { margin: 140px 0 0; }
	.contents .main-img h1.title {
		width: 100%;
		height: 40px;
		padding: 0;
		margin: 35px 0 0 0;
		background-image: initial;
		background-color: #022B1C;
		top:100px;
		font-size: 20px;
		line-height: 40px;
	}

	.glid-sidebar .widepage-widget img { width: 90%;margin: 0 5%; }
}

@media only screen and (max-width:300px){
	.head .logo-common { width: 170px; }
	.head .logo-common a { font-size: 15px; }
	.head .logo-common img { width: 60%; }
}