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

/*
Reset
Layout
clearfix
Media screen
*/

/* font */
@font-face {
	font-family:Noto Sans;
	src:url('../fonts/NotoSans-Regular.ttf') format("truetype");
}

/*================================================================================
	Reset
================================================================================*/
html,
head,
body,
header,
footer,
nav,
section,
div,
ul,
ol,
li,
dl,
dt,
dd,
table,
tr,
th,
td,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
img,
video {
	margin:0;
	padding:0;
	border:none;
}
ul,ol { list-style:none; }
a,
a:hover,
a:active {
	color:#333333;
	text-decoration:none;
}
a,
a img,
a:hover img {
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	-ms-transition:all 0.5s;
	-o-transition:all 0.5s;
	transition:all 0.5s;
}
a:hover,
a:hover img { opacity:0.6; }
img {
	display:block;
	width:100%;
	height:auto;
}

html {
	margin-left:-1px;
	overflow-Y:scroll;
	height:100%;
	margin-bottom:1px;
}

body {
	height:auto;
	color:#333;
	font-size:14px;
	line-height:180%;
	background-color:#fff;
	font-family:"Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/*================================================================================
	Layout
================================================================================*/
.wrap { margin:0 auto; box-sizing:border-box; position:relative; }
h2 { margin-bottom:50px; font-size:22px; text-align:center; position:relative; }
h2 span { display:block; position:absolute; }
.btn_pagetop { width:82px; height:102px; position:absolute; bottom:-85px; right:-100px; }
.btn_pagetop a { display:block; width:100%; height:100%; background:url(../img/icon_pagetop.png) no-repeat 0 100%; }
.btn_pagetop.col_w a { background:url(../img/icon_pagetop_w.png) no-repeat 0 100%; }

/* header
--------------------------------------------------------------------------------*/
header { width:100%; height:100px; background-color:#fff; position:fixed; right:-0; z-index:10; }
header .wrap { margin:0 auto; width:970px; height:100%; position:relative; }
header h1 { width:134px; margin:0 auto; padding-top:15px; }
.hd_link { position:absolute; top:30px; right:0; }
.hd_link li { margin-left:30px; float:left; }
.hd_link li a { display:block; }
.hd_link li:nth-child(1) a { overflow:hidden; width:42px; height:0; padding-top:34px; background:url(../img/icon_twitter.png) no-repeat 0 0; }
.hd_link li:nth-child(2) a { padding:8px 10px; font-size:16px; line-height:100%; border:2px solid #666; }
.hd_link li:nth-child(2) a:hover { opacity:1.0; color:#fff; background-color:#666; }

nav { position:absolute; top:120px; }

/* footer
--------------------------------------------------------------------------------*/
footer { padding-bottom:20px; }
footer p.txt_copy { margin-bottom:20px; padding:12px 0; color:#fff; text-align:center; line-height:100%; background-color:#e94721; }
footer a.btn_logo { display:block; width:134px; margin:0 auto; }

/*================================================================================
	Media screen : PC 640px
================================================================================*/
@media screen and (min-width: 641px) {

body { letter-spacing:2px; }

section { padding-top:200px; padding-bottom:100px; }
.wrap { width:970px; }
#btn_menu { display:none; }
.btn_pagetop a:hover { background:url(../img/icon_pagetop.png) no-repeat 0 0; }
.btn_pagetop.col_w a:hover { background:url(../img/icon_pagetop_w.png) no-repeat 0 0; }

/* header
--------------------------------------------------------------------------------*/
nav li { width:140px; height:70px; margin:0 10px; float:left; }
nav li a { display:block; width:100%; height:100%; padding-top:25px; color:#fff; text-align:center; line-height:100%; box-sizing:border-box; }
nav li:nth-child(1) a { background:url(../img/icon_nav_01.png) no-repeat 50% 0; }
nav li:nth-child(2) a { background:url(../img/icon_nav_02.png) no-repeat 50% 0; }
nav li:nth-child(3) a { background:url(../img/icon_nav_03.png) no-repeat 50% 0; }
nav li:nth-child(4) a { background:url(../img/icon_nav_04.png) no-repeat 50% 0; }
nav li:nth-child(5) a { background:url(../img/icon_nav_05.png) no-repeat 50% 0; }
nav li:nth-child(6) a { background:url(../img/icon_nav_06.png) no-repeat 50% 0; }
nav li a:hover { color:#e62680; font-weight:bold; opacity:1.0; }
nav li:nth-child(1) a:hover { background:url(../img/icon_nav_on_01.png) no-repeat 50% 0; }
nav li:nth-child(2) a:hover { background:url(../img/icon_nav_on_02.png) no-repeat 50% 0; }
nav li:nth-child(3) a:hover { background:url(../img/icon_nav_on_03.png) no-repeat 50% 0; }
nav li:nth-child(4) a:hover { background:url(../img/icon_nav_on_04.png) no-repeat 50% 0; }
nav li:nth-child(5) a:hover { background:url(../img/icon_nav_on_05.png) no-repeat 50% 0; }
nav li:nth-child(6) a:hover { background:url(../img/icon_nav_on_06.png) no-repeat 50% 0; }
nav li a.active { color:#e62680; font-weight:bold; opacity:1.0; }
nav li:nth-child(1) a.active { background:url(../img/icon_nav_on_01.png) no-repeat 50% 0; }
nav li:nth-child(2) a.active { background:url(../img/icon_nav_on_02.png) no-repeat 50% 0; }
nav li:nth-child(3) a.active { background:url(../img/icon_nav_on_03.png) no-repeat 50% 0; }
nav li:nth-child(4) a.active { background:url(../img/icon_nav_on_04.png) no-repeat 50% 0; }
nav li:nth-child(5) a.active { background:url(../img/icon_nav_on_05.png) no-repeat 50% 0; }
nav li:nth-child(6) a.active { background:url(../img/icon_nav_on_06.png) no-repeat 50% 0; }
header.active { top:-100px; }

/* footer
--------------------------------------------------------------------------------*/
footer .wrap { margin-bottom:30px; text-align:center; }
footer .wrap p { display:inline-block; letter-spacing:4px; }
footer .wrap p:nth-of-type(1) { margin-right:20px; padding-top:12px; padding-right:33px; background:url(../img/icon_tel.png) no-repeat 100% 100%; background-size:30px 30px; }
footer .wrap p:nth-of-type(2) a { display:none; }
footer .wrap p:nth-of-type(3) a { margin-left:20px; padding:15px 20px; border:2px solid #6e6c66; padding-right:50px; background:url(../img/icon_twitter.png) no-repeat 97% 50%; }
footer p span { padding-left:20px; }
footer p strong { font-weight:normal; }
footer p.txt_copy br { display:none; }

}

/*================================================================================
	Media screen : 横幅100%時の背景色ヌケ防止
================================================================================*/
@media screen and (min-width: 641px) and (max-width: 970px) {
#container { width:1000px; }
}
@media screen and (min-width: 641px) and (max-width: 1220px) {
.btn_pagetop { right:20px; }
}

/*================================================================================
	Media screen : SP 640px
================================================================================*/
@media screen and (max-width: 640px) {

section { padding-top:60px; padding-bottom:60px; }
h2 { margin-bottom:35px; font-size:20px; }
.btn_pagetop { width:41px; height:41px; bottom:-50px; right:10px; }
.btn_pagetop a { background-size:41px 41px; }
.btn_pagetop.col_w a { background-size:41px 41px; }

/* header
--------------------------------------------------------------------------------*/
header { height:50px; }
header .wrap { width:100%; }
header h1 { width:67px; padding-top:7px; padding-left:10px; margin:0; }
.hd_link { top:15px; right:60px; }
.hd_link li { margin-left:15px; }
.hd_link li:nth-child(1) a { width:21px; padding-top:17px; background-size:21px 17px; }
.hd_link li:nth-child(2) a { padding:4px 8px; font-size:12px; border:1px solid #666; }
#btn_menu { overflow:hidden; width:48px; height:0; padding-top:50px; position:absolute; top:0; right:-1px; }
#btn_menu { background:#000 url(../img/icon_menu.png) no-repeat 50% 50%; background-size:26px 20px; }
#btn_menu.active { background:#000 url(../img/icon_menu_close.png) no-repeat 50% 50%; background-size:26px 20px; }
nav { position:absolute; top:50px; right:-400px; transition:all 0.5s; }
nav.active { right:-1px; transition:all 0.5s; }
nav li { border-bottom:1px solid #fff; background-color:#e84720; }
nav li:last-child { border-bottom:none; }
nav li a { display:block; padding:10px 20px; padding-left:50px; color:#fff; }
nav li:nth-child(1) a { background:url(../img/icon_nav_sp_01.png) no-repeat 0 0; background-size:47px 47px; }
nav li:nth-child(2) a { background:url(../img/icon_nav_sp_02.png) no-repeat 0 0; background-size:47px 47px; }
nav li:nth-child(3) a { background:url(../img/icon_nav_sp_03.png) no-repeat 0 0; background-size:47px 47px; }
nav li:nth-child(4) a { background:url(../img/icon_nav_sp_04.png) no-repeat 0 0; background-size:47px 47px; }
nav li:nth-child(5) a { background:url(../img/icon_nav_sp_05.png) no-repeat 0 0; background-size:47px 47px; }
nav li:nth-child(6) a { background:url(../img/icon_nav_sp_06.png) no-repeat 0 0; background-size:47px 47px; }

/* footer
--------------------------------------------------------------------------------*/
footer .wrap { text-align:center; }
footer .wrap p { margin:10px 0 20px; }
footer .wrap p strong { display:none; }
footer .wrap p:nth-of-type(1) { margin-bottom:-5px; }
footer .wrap p:nth-of-type(1) span { padding:2px 0 8px; padding-left:35px; background:url(../img/icon_tel.png) no-repeat 0 0; background-size:26px 26px; }
footer .wrap p:nth-of-type(2) span { display:none; }
footer .wrap p:nth-of-type(3) a { padding:10px; border:2px solid #6e6c66; padding-right:30px; background:url(../img/icon_twitter.png) no-repeat 97% 50%; background-size:21px 17px; }
footer p.txt_copy { margin-top:20px; margin-bottom:10px; padding:8px 0; }
footer a.btn_logo { width:67px; }

}


/*================================================================================
	clearfix
================================================================================*/
header ul:after,
footer .wrap:after,
.box_fl:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
/* clearfix for ie7 */
header ul,
footer .wrap,
.box_fl {
	display: inline-block;
}
header ul,
footer .wrap,
.box_fl {
	display: block;
}