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

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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: inherit;
	line-height: 1;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	color: #404040;
	font-family: "UD新ゴ コンデンス70 M", sans-serif;
}
a{
	color: #404040;
	text-decoration: none;
}
li{
	list-style-type: none;
}
img{
  max-width: 100%;
  vertical-align: top;
}
.no-scroll{
	overflow: hidden;
}
*,
::before,
::after{
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
main{
	display: block;
}



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

	body {
		font-size: 20px;
		width: 100%;
		background: #eee;
	}
	.ignore-pc{
		display: none;
	}


	/* gheader
	========================================================*/

	#gheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80px;
		z-index: 1000;
		background: #fff;
	}
	#gheader h1{
		position: absolute;
		top: 50%;
		left: 20px;
		margin: -25px 0 0;
		width: 98px;
		height: 50px;
	}
	#gheader h2{
		position: absolute;
		top: 50%;
		left: 143px;
		margin: -12.5px 0 0;
		width: 280px;
		height: 25px;
	}
	.social-list{
		position: absolute;
		margin: auto;
		top: 0;
		right: 20px;
		bottom: 0;
		display: flex;
		height: 42px;
	}
	.social-list li + li{
		margin-left: 10px;
	}
	.social-list a.fb{
		display: block;
		width: 42px;
		height: 42px;
		background: url(../img/icon_fb.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.social-list a.tw{
		display: block;
		width: 42px;
		height: 42px;
		background: url(../img/icon_tw.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.social-list a:hover{
		opacity: 0.7;
		transition: opacity 400ms ease;
	}


	/* gfooter
	========================================================*/

	#gfooter{
		position: relative;
		padding: 40px 0;
		background: #fff;
		z-index: 50;
	}
	#top #gfooter{
		margin: 100px 0 0;
	}
	#top #gfooter:before{
		content: "";
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 15px;
		background-image: linear-gradient(to right, #f08300 0% 33%, #00a1e8 33% 67%, #714f9c 67% 33%);
		background-repeat: repeat-x;
		background-size: 100% 15px;	
	}
	#gfooter p{
		text-align: center;
		font-size: 16px;
		line-height: 1.8;
	}
	#gfooter p.cr{
		margin: 40px auto 0;
		font-size: 12px;
	}
	.cr-chibimaruko{
		padding: 0 0 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cr-chibimaruko img{
		width: 190px;
	}
	.cr-chibimaruko span{
		display: inline-block;
		margin: 0 0 0 15px;
		font-size: 12px;
	}


	/* btn-pt
	========================================================*/

	.btn-pt{
		position: fixed;
		bottom: 20px;
		right: 20px;
		width: 60px;
		height: 60px;
		transition: all 400ms ease;
		opacity: 0;
		visibility: hidden;
	}
	.btn-pt.on{
		opacity: 1;
		visibility: visible;
	}
	.btn-pt a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 30px;
		border: 2px solid #333;
		background: #fff;
	}
	.btn-pt a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: block;
		width: 22.5px;
		height: 13.5px;
		background: url(../img/arrow_pt.png) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 400ms ease;
	}
	.btn-pt a:hover:after{
		transform: translateY(-10px);
	}


}


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

	body {
		width: 100%;
		font-size: 14px;
		background: #eee;
	}
	.ignore-sp{
		display: none;
	}


	/* gheader
	========================================================*/

	#gheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 45px;
		z-index: 1000;
		background: #fff;
	}
	#gheader h1{
		position: absolute;
		top: 50%;
		left: 10px;
		margin: -12.5px 0 0;
		width: 49px;
		height: 25px;
	}
	#gheader h2{
		position: absolute;
		top: 50%;
		left: 70px;
		margin: -7px 0 0;
		width: 174px;
		height: 14px;
	}
	.social-list{
		position: absolute;
		margin: auto;
		top: 0;
		right: 10px;
		bottom: 0;
		display: flex;
		height: 25px;
	}
	.social-list li + li{
		margin-left: 5px;
	}
	.social-list a.fb{
		display: block;
		width: 25px;
		height: 25px;
		background: url(../img/icon_fb.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.social-list a.tw{
		display: block;
		width: 25px;
		height: 25px;
		background: url(../img/icon_tw.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	/* gfooter
	========================================================*/

	#gfooter{
		position: relative;
		padding: 30px 0;
		background: #fff;
		z-index: 50;
	}
	#top #gfooter{
		margin: 30px 0 0;
	}
	#top #gfooter:before{
		content: "";
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 6px;
		background-image: linear-gradient(to right, #f08300 0% 33%, #00a1e8 33% 67%, #714f9c 67% 33%);
		background-repeat: repeat-x;
		background-size: 100% 6px;	
	}

	#gfooter p{
		text-align: center;
		font-size: 12px;
		line-height: 1.8;
	}
	#gfooter p.cr{
		margin: 20px auto 0;
		font-size: 10px;
	}

	.cr-chibimaruko{
		padding: 0 0 25px;
		text-align: center;
	}	
	.cr-chibimaruko img{
		width: 142px;
	}
	.cr-chibimaruko span{
		display: block;
		margin: 15px 0 0;
		font-size: 12px;
	}

	/* btn-pt
	========================================================*/

	.btn-pt{
		position: fixed;
		bottom: 10px;
		right: 10px;
		width: 36px;
		height: 36px;
		transition: all 400ms ease;
		opacity: 0;
		visibility: hidden;
	}
	.btn-pt.on{
		opacity: 1;
		visibility: visible;
	}
	.btn-pt a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 30px;
		border: 1.5px solid #333;
		background: #fff;
	}
	.btn-pt a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: block;
		width: 11.5px;
		height: 5.5px;
		background: url(../img/arrow_pt.png) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 400ms ease;
	}


}


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

	#search-nav ul li h4 i {
	    font-size: 12px;
	}

}